assignment-web-module/ads_cards.css at main · AsiriHarischandra/assignment-web-module · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Watch Ads Section */
.watch-ads {
    padding: 40px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.watch-ads h2 {
    font-size: 2em;
    color: #333;
    margin-bottom: 30px;
    font-weight: bold;
}

/* Grid Layout for Cards */
.watch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    justify-items: center;
}

/* Card Styling */
.card {
    width: 180px;
    height: 240px;
    perspective: 1000px;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.card-front {
    background: linear-gradient(135deg, #f5f5f5 60%, #ffffff 88%, #e0e0e0 40%, #d3d3d3 48%);
}

.card-back {
    background: linear-gradient(135deg, #d3d3d3 30%, #e0e0e0 88%, #f5f5f5 40%, #ffffff 78%);
    transform: rotateY(180deg);
    color: #333;
}

/* Card Image Styling */
.card-image {
    width: 140px;
    height: 140px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Card Back Content */
.card-back h3 {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.card-back p {
    font-size: 1em;
    margin-bottom: 15px;
}

.buy-btn {
    background-color: #1e7031;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s;
}

.buy-btn:hover {
    background-color: #000000;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .watch-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .watch-ads h2 {
        font-size: 1.5em;
    }

    .card {
        width: 160px;
        height: 220px;
    }

    .card-image {
        width: 120px;
        height: 120px;
    }
}