1
1
body {
2
- font-family : Arial, sans-serif;
3
- margin : 0 ;
4
- padding : 0 ;
5
- background-color : # f9f9f9 ;
6
- }
7
-
8
- header {
9
- background-color : # 333 ;
10
- color : # fff ;
11
- padding : 10px 20px ;
12
- text-align : center;
13
- }
14
-
15
- .navbar {
16
- display : flex;
17
- justify-content : space-between;
18
- align-items : center;
19
- }
20
-
21
- # cart-btn {
22
- background-color : # 28a745 ;
23
- color : white;
24
- border : none;
25
- padding : 10px 20px ;
26
- font-size : 1rem ;
27
- cursor : pointer;
28
- border-radius : 5px ;
29
- }
30
-
31
- # cart-btn : hover {
32
- background-color : # 218838 ;
33
- }
34
-
35
- .container {
36
- margin : 50px auto;
37
- padding : 20px ;
38
- background : # fff ;
39
- border-radius : 10px ;
40
- box-shadow : 0 4px 6px rgba (0 , 0 , 0 , 0.1 );
41
- max-width : 1000px ;
42
- }
43
-
44
- h1 {
45
- margin-bottom : 30px ;
46
- }
47
-
48
- .products-container {
49
- display : grid;
50
- grid-template-columns : repeat (auto-fill, minmax (200px , 1fr ));
51
- gap : 20px ;
52
- }
53
-
54
- .product {
55
- border : 1px solid # ddd ;
56
- border-radius : 10px ;
57
- padding : 10px ;
58
- text-align : center;
59
- background-color : # fff ;
60
- }
61
-
62
- .product img {
63
- max-width : 100% ;
64
- height : 300px ;
65
- border-radius : 10px ;
66
- }
67
-
68
- .product .title {
69
- font-size : 1.1rem ;
70
- font-weight : bold;
71
- margin : 10px 0 ;
72
- height : 60px ;
73
- overflow : hidden;
74
- }
75
-
76
- .product .price {
77
- font-size : 1rem ;
78
- color : # 333 ;
79
- margin : 10px 0 ;
80
- }
81
-
82
- .product button {
83
- background-color : # 007bff ;
84
- color : white;
85
- border : none;
86
- padding : 10px ;
87
- font-size : 1rem ;
88
- cursor : pointer;
89
- border-radius : 5px ;
90
- width : 100% ;
91
- }
92
-
93
- .product button : hover {
94
- background-color : # 0056b3 ;
95
- }
96
-
97
- /* Cart Modal Styles */
98
- .cart-modal {
99
- position : fixed;
100
- top : 0 ;
101
- left : 0 ;
102
- width : 100% ;
103
- height : 100% ;
104
- background-color : rgba (0 , 0 , 0 , 0.7 );
105
- display : none;
106
- justify-content : center;
107
- align-items : center;
108
- z-index : 1000 ;
109
- }
110
-
111
- .cart-content {
112
- background-color : white;
113
- padding : 20px ;
114
- border-radius : 10px ;
115
- max-width : 500px ;
116
- width : 100% ;
117
- text-align : left;
118
- }
119
-
120
- # cart-items {
121
- list-style-type : none;
122
- padding : 0 ;
123
- }
124
-
125
- # cart-items li {
126
- display : flex;
127
- justify-content : space-between;
128
- padding : 5px 0 ;
129
- }
130
-
131
- # close-cart {
132
- margin-top : 20px ;
133
- background-color : # dc3545 ;
134
- color : white;
135
- border : none;
136
- padding : 10px ;
137
- font-size : 1rem ;
138
- cursor : pointer;
139
- border-radius : 5px ;
140
- }
141
-
142
- # close-cart : hover {
143
- background-color : # c82333 ;
144
- }
145
-
2
+ font-family : Arial, sans-serif;
3
+ margin : 0 ;
4
+ padding : 0 ;
5
+ background-color : # f9f9f9 ;
6
+ }
7
+
8
+ header {
9
+ background-color : # 333 ;
10
+ color : # fff ;
11
+ padding : 10px 20px ;
12
+ text-align : center;
13
+ }
14
+
15
+ .navbar {
16
+ display : flex;
17
+ justify-content : space-between;
18
+ align-items : center;
19
+ }
20
+
21
+ # cart-btn {
22
+ background-color : # 28a745 ;
23
+ color : white;
24
+ border : none;
25
+ padding : 10px 20px ;
26
+ font-size : 1rem ;
27
+ cursor : pointer;
28
+ border-radius : 5px ;
29
+ }
30
+
31
+ # cart-btn : hover {
32
+ background-color : # 218838 ;
33
+ }
34
+
35
+ .container {
36
+ margin : 50px auto;
37
+ padding : 20px ;
38
+ background : # fff ;
39
+ border-radius : 10px ;
40
+ box-shadow : 0 4px 6px rgba (0 , 0 , 0 , 0.1 );
41
+ max-width : 1000px ;
42
+ }
43
+
44
+ h1 {
45
+ margin-bottom : 30px ;
46
+ }
47
+
48
+ .products-container {
49
+ display : grid;
50
+ grid-template-columns : repeat (auto-fill, minmax (200px , 1fr ));
51
+ gap : 20px ;
52
+ }
53
+
54
+ .product {
55
+ border : 1px solid # ddd ;
56
+ border-radius : 10px ;
57
+ padding : 10px ;
58
+ text-align : center;
59
+ background-color : # fff ;
60
+ }
61
+
62
+ .product img {
63
+ max-width : 100% ;
64
+ height : 300px ;
65
+ border-radius : 10px ;
66
+ }
67
+
68
+ .product .title {
69
+ font-size : 1.1rem ;
70
+ font-weight : bold;
71
+ margin : 10px 0 ;
72
+ height : 60px ;
73
+ overflow : hidden;
74
+ }
75
+
76
+ .product .price {
77
+ font-size : 1rem ;
78
+ color : # 333 ;
79
+ margin : 10px 0 ;
80
+ }
81
+
82
+ .product button {
83
+ background-color : # 007bff ;
84
+ color : white;
85
+ border : none;
86
+ padding : 10px ;
87
+ font-size : 1rem ;
88
+ cursor : pointer;
89
+ border-radius : 5px ;
90
+ width : 100% ;
91
+ }
92
+
93
+ .product button : hover {
94
+ background-color : # 0056b3 ;
95
+ }
96
+
97
+ /* Cart Modal Styles */
98
+ .cart-modal {
99
+ position : fixed;
100
+ top : 0 ;
101
+ left : 0 ;
102
+ width : 100% ;
103
+ height : 100% ;
104
+ background-color : rgba (0 , 0 , 0 , 0.7 );
105
+ display : none;
106
+ justify-content : center;
107
+ align-items : center;
108
+ z-index : 1000 ;
109
+ }
110
+
111
+ .cart-content {
112
+ background-color : white;
113
+ padding : 20px ;
114
+ border-radius : 10px ;
115
+ max-width : 500px ;
116
+ width : 100% ;
117
+ text-align : left;
118
+ }
119
+
120
+ # cart-items {
121
+ list-style-type : none;
122
+ padding : 0 ;
123
+ }
124
+
125
+ # cart-items li {
126
+ display : flex;
127
+ justify-content : space-between;
128
+ padding : 5px 0 ;
129
+ }
130
+
131
+ # close-cart {
132
+ margin-top : 20px ;
133
+ background-color : # dc3545 ;
134
+ color : white;
135
+ border : none;
136
+ padding : 10px ;
137
+ font-size : 1rem ;
138
+ cursor : pointer;
139
+ border-radius : 5px ;
140
+ }
141
+
142
+ # close-cart : hover {
143
+ background-color : # c82333 ;
144
+ }
0 commit comments