Skip to content

Commit 9ffbfc0

Browse files
AbernachyAbernachy
authored
Merge pull request #12 from Aber-Learningforks/css/flexbox
finished challenge 3 and reset mine to look like his since variations…
2 parents 3b08949 + 10765bc commit 9ffbfc0

File tree

2 files changed

+148
-184
lines changed

2 files changed

+148
-184
lines changed

‎projectfolder/css/shopStyle.css

Lines changed: 109 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,202 +1,167 @@
11
* {
2-
margin: 0px;
3-
padding: 0px;
4-
box-sizing: content-box;
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
55
}
66

77
body {
88
font-family: sans-serif;
99
line-height: 1.4;
1010
}
1111

12-
p {
13-
margin-bottom: 20px;
14-
}
15-
.product-description {
12+
.clearfix::after {
13+
content: '';
14+
display: block;
1615
clear: both;
1716
}
1817

19-
.product-container {
20-
border: black 4px solid;
21-
width: 900px;
22-
margin: 25px auto;
18+
.container {
19+
/* background-color: red; */
20+
display: flex;
21+
gap: 40px;
22+
}
23+
24+
.product-img {
25+
}
26+
27+
/* PRODUCT */
28+
.product {
29+
border: 4px solid black;
30+
width: 825px;
31+
margin: 50px auto;
2332
position: relative;
2433
}
25-
.product-name {
26-
background: #f7f7f7;
27-
text-transform: uppercase;
34+
35+
.product-title {
2836
text-align: center;
29-
padding: 20px 0;
37+
font-size: 22px;
38+
text-transform: uppercase;
39+
background-color: #f7f7f7;
40+
padding: 15px;
3041
}
3142

32-
.product-name::after {
33-
content: 'SALE';
34-
position: absolute;
35-
top: 25px;
36-
left: -25px;
37-
background: red;
38-
color: white;
39-
letter-spacing: 2px;
40-
padding: 5px 5px;
41-
font-size: 12px;
42-
width: 80px;
43-
text-align: center;
43+
/* PRODUCT INFORMATION */
44+
.product-info {
45+
/* (825 - 8 - 250 - 80) / 2 */
46+
/* width: 243px; */
47+
flex: 1;
48+
margin-top: 20px;
4449
}
4550

46-
.product-details {
47-
text-transform: uppercase;
51+
.product-price {
52+
display: flex;
53+
justify-content: space-between;
54+
align-items: center;
4855
margin-bottom: 20px;
49-
font-size: 16px;
56+
}
57+
58+
.price {
59+
font-size: 24px;
5060
}
5161

5262
.shipping {
63+
font-size: 12px;
5364
text-transform: uppercase;
5465
font-weight: bold;
5566
color: #777;
56-
/* float: right; */
5767
}
5868

59-
.price {
60-
font-size: 25px;
61-
margin-bottom: 0px;
62-
/* float: left; */
63-
}
69+
.sale {
70+
background-color: #ec2f2f;
71+
color: #fff;
72+
font-size: 12px;
73+
text-transform: uppercase;
74+
font-weight: bold;
75+
letter-spacing: 2px;
76+
padding: 7px 15px;
77+
display: inline-block;
78+
position: absolute;
79+
top: -17px;
80+
left: -38px;
6481

65-
/* Link styling */
66-
.homepage:link {
67-
color: #1098ad;
82+
/* width: 40px;
83+
text-align: center; */
6884
}
6985

70-
.homepage:visited {
71-
color: #1098ad;
72-
}
73-
.homepage:hover {
74-
color: orangered;
75-
text-decoration: none orangred;
76-
}
77-
78-
a:link {
79-
color: black;
80-
text-decoration: underline black;
86+
.product-description {
87+
margin-bottom: 10px;
8188
}
8289

83-
a:visited {
90+
.more-info:link,
91+
.more-info:visited {
8492
color: black;
93+
margin-bottom: 30px;
94+
display: inline-block;
8595
}
8696

87-
a:hover {
88-
color: black;
97+
.more-info:hover,
98+
.more-info:active {
8999
text-decoration: none;
90100
}
91101

92-
/* Other stuff */
93-
94-
button {
95-
width: 100%;
96-
background-color: black;
97-
text-transform: uppercase;
98-
border: black solid 5px;
99-
color: white;
100-
font-size: 18px;
101-
}
102-
103-
button:hover {
104-
color: black;
105-
background-color: white;
106-
border: black solid 5px;
107-
/* The above can be consolidated down into:
108-
background-color: white
109-
filter:invert(100%)
110-
*/
111-
}
112-
113-
ul {
114-
margin-left: 15px;
115-
margin-bottom: 10px;
102+
.product-colors {
103+
display: flex;
104+
gap: 10px;
116105
}
117106

118-
ul li {
119-
list-style: square;
120-
margin-bottom: 10px;
107+
.color {
108+
background-color: #000;
109+
height: 22px;
110+
width: 22px;
121111
}
122112

123-
nav {
124-
border: #1098ad solid 5px;
125-
background-color: #ad2510;
126-
opacity: 0.8;
127-
justify-content: center;
113+
.color-blue {
114+
background-color: #2f6ee2;
128115
}
129-
130-
.colored-boxes > div {
131-
display: inline-block;
132-
width: 15px;
133-
height: 15px;
134-
margin-right: 5px;
135-
margin-bottom: 10px;
116+
.color-red {
117+
background-color: #ec2f2f;
136118
}
137-
138-
.black {
139-
background-color: black;
140-
border: solid 5px black;
141-
width: 5px;
142-
height: 5px;
119+
.color-yellow {
120+
background-color: #f0bf1e;
143121
}
144-
.blue {
145-
background-color: blue;
146-
border: solid 5px blue;
147-
width: 5px;
148-
height: 5px;
122+
.color-green {
123+
background-color: #90cc20;
149124
}
150-
.red {
151-
background-color: red;
152-
border: solid 5px red;
153-
width: 5px;
154-
height: 5px;
125+
.color-brown {
126+
background-color: #885214;
155127
}
156128

157-
.yellow {
158-
background-color: yellow;
159-
border: solid 5px yellow;
160-
width: 5px;
161-
height: 5px;
162-
}
163-
.green {
164-
background-color: #00d500;
165-
border: solid 5px #00d500;
166-
width: 5px;
167-
height: 5px;
129+
/* PRODUCT DETAILS */
130+
.product-details {
131+
/* width: 243px; */
132+
margin-top: 20px;
133+
flex: 1;
168134
}
169-
.brown {
170-
background-color: brown;
171-
border: solid 5px brown;
172-
width: 5px;
173-
height: 5px;
135+
136+
.details-title {
137+
text-transform: uppercase;
138+
font-size: 16px;
139+
margin-bottom: 15px;
174140
}
175141

176-
/* Floats */
177-
.product-image {
178-
/* float: left; */
179-
margin-right: 40px;
142+
.details-list {
143+
list-style: square;
144+
margin-left: 20px;
180145
}
181146

182-
.product-details-container {
183-
/* background-color: yellow; */
184-
/* width: 243px; */
185-
height: 250px;
186-
/* float: left; */
187-
padding: 0px 40px;
188-
/* margin-top: 20px; */
147+
.details-list li {
148+
margin-bottom: 10px;
189149
}
190150

191-
.shippipng-container {
192-
display: flex;
151+
/* BUTTON */
152+
.add-cart {
153+
background-color: #000;
154+
border: none;
155+
color: #fff;
156+
font-size: 20px;
157+
text-transform: uppercase;
158+
cursor: pointer;
159+
padding: 15px;
160+
width: 100%;
161+
border-top: 4px solid black;
193162
}
194-
.product-info-container {
195-
/* width: 243px; */
196-
/* background-color: blue; */
197-
/* float: left; */
198163

199-
height: 250px;
200-
margin-right: 40px;
201-
/* margin-top: 20px; */
164+
.add-cart:hover {
165+
color: #000;
166+
background-color: #fff;
202167
}

0 commit comments

Comments
 (0)