Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit cde2b3b

Browse files
solve the linter
1 parent 1d4bde7 commit cde2b3b

File tree

1 file changed

+143
-144
lines changed

1 file changed

+143
-144
lines changed

‎Source-Code/E-CommerceWebsite/style.css

Lines changed: 143 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,144 @@
11
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

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /