Skip to content

Commit 1cfc3bb

Browse files
iamserdaiamserda
committed
finished section 4
1 parent 3643c8d commit 1cfc3bb

File tree

3 files changed

+227
-25
lines changed

3 files changed

+227
-25
lines changed

‎starter/02-HTML-Fundamentals/challenges/index.css‎

Lines changed: 152 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
html {
2-
height: 100vh;
2+
min-height: 100vh;
33
}
44

55
html,
@@ -26,28 +26,21 @@ footer {
2626
color: black;
2727
border: 5px solid black;
2828
padding: 1em 1em 2em;
29-
width: 90%;
29+
width: 80%;
3030
margin: 1em auto;
3131
}
3232

3333
.component h1 {
3434
color: black;
3535
margin: 0 auto 1em;
3636
text-align: center;
37-
font-size: 2em;
37+
font-size: 2rem;
3838
}
3939

4040
h2 {
4141
font-size: 1em;
4242
}
4343

44-
.component img {
45-
width: 100%;
46-
max-width: 300px;
47-
height: auto;
48-
padding-right: 1em;
49-
}
50-
5144
.component button {
5245
position: absolute;
5346
bottom: 0;
@@ -79,36 +72,171 @@ h2 {
7972
color: white;
8073
}
8174

82-
83-
/* .clearfix:after {
84-
content: "";
85-
clear: both;
86-
} */
87-
88-
#component2 button {
75+
#component2 button,
76+
#component3 button {
8977
width: 100%;
9078
padding: 0.5em;
9179
font-size: 1.25rem;
9280
border-top: 5px solid black;
9381
clear: both;
9482
}
9583

96-
#component2 button:hover {
84+
#component2 button:hover,
85+
#component3 button:hover {
9786
background-color: white;
9887
color: black;
88+
}
9989

90+
.product-image {
91+
width: 100%;
92+
max-width: 300px;
93+
height: auto;
94+
padding-right: 1em;
95+
float: left;
96+
margin-left: auto;
10097
}
10198

102-
#component1 .product-image,
103-
#component2 .product-image,
104-
#component1 .product-description,
105-
#component2 .product-description {
99+
.product-description {
100+
width: 40%;
106101
float: left;
102+
margin-right: auto;
103+
}
104+
105+
div.product3 {
106+
display: flex;
107+
width: 100%;
108+
float: none;
109+
flex-flow: row nowrap;
107110
}
108111

109-
#component1 .clearfix::after,
110-
#component2 .clearfix::after {
112+
.clearfix::after {
111113
content: "";
112114
display: block;
113115
clear: both;
116+
}
117+
118+
.pricing p {
119+
margin-top: 0;
120+
}
121+
122+
.component3 {
123+
position: relative;
124+
padding: 1em 0.75em 2em;
125+
}
126+
127+
.component3::after,
128+
.component4::after {
129+
content: "SALE";
130+
background: red;
131+
color: white;
132+
text-transform: uppercase;
133+
position: absolute;
134+
top: -20px;
135+
left: -40px;
136+
padding: 0.75em 2em;
137+
font-size: 0.8rem;
138+
font-weight: bold;
139+
letter-spacing: 3px;
140+
}
141+
142+
.component h1 {
143+
width: 80%;
144+
margin: 0 auto;
145+
padding: 0.5em;
146+
font-size: 1.5rem;
147+
}
148+
149+
.component3 .image-color-container {
150+
width: 30%;
151+
min-width: 300px;
152+
margin: 1em 0 2em;
153+
}
154+
155+
.component3 .pricing {
156+
width: 30%;
157+
align-self: baseline;
158+
}
159+
160+
.component3 .description {
161+
width: 30%;
162+
align-self: baseline;
163+
}
164+
165+
.box-container {
166+
margin-top: 2em;
167+
width: 100%;
168+
max-width: 300px;
169+
justify-content: space-evenly;
170+
}
171+
172+
.box {
173+
width: 25px;
174+
height: 25px;
175+
background-color: rgb(14, 14, 14);
176+
}
177+
178+
.blue-box {
179+
background-color: rgb(0, 89, 255)
180+
}
181+
182+
.red-box {
183+
background-color: rgb(255, 44, 44)
184+
}
185+
186+
.yellow-box {
187+
background-color: rgb(255, 238, 0);
188+
}
189+
190+
.green-box {
191+
background-color: rgb(73, 153, 73);
192+
}
193+
194+
.brown-box {
195+
background-color: rgb(107, 67, 49);
196+
}
197+
198+
.component4 {
199+
display: grid;
200+
grid-template-columns: 1rem 1fr 1rem;
201+
grid-template-rows: 4rem 1fr 3rem;
202+
padding: 0;
203+
gap: 1rem;
204+
}
205+
206+
.component4 h1 {
207+
grid-column: 1 / -1;
208+
}
209+
210+
.product4 {
211+
display: grid;
212+
grid-template-columns: 1fr 1fr 1fr;
213+
grid-template-rows: 1fr;
214+
padding: 0;
215+
gap: 1rem;
216+
grid-column: 2 / 3;
217+
grid-row: 2 / 3;
218+
}
219+
220+
.product4 .image-color {
221+
display: block;
222+
grid-column: 1 / 2;
223+
grid-row: 1 / 2;
224+
}
225+
226+
.product4-image {
227+
max-width: 100%;
228+
}
229+
230+
button.button4 {
231+
width: 100%;
232+
grid-column: 1 / -1;
233+
grid-row: 6 / 7;
234+
border-top: 5px solid black;
235+
padding: 0.5em;
236+
font-size: 1.25rem;
237+
}
238+
239+
button.button4:hover {
240+
background-color: white;
241+
color: black;
114242
}

‎starter/02-HTML-Fundamentals/challenges/index.html‎

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ <h2>Product details:</h2>
4545
<button>Add to Cart</button>
4646
</div>
4747
<div id="component2" class="component clearfix">
48-
<h1>Converse Chuck Taylor All-Star Low Top</h1>
48+
<h1>Converse Chuck Taylor CSS Float</h1>
4949

5050
<img class="product-image" src="challenges.jpg"
5151
alt="a person wearing jeans and a pair of Chuck Taylor black with white soles and cap." />
@@ -66,6 +66,79 @@ <h2>Product details:</h2>
6666

6767
<button>Add to Cart</button>
6868
</div>
69+
<div id="component3" class="component component3 container-col">
70+
<h1>Converse Chuck Taylor CSS Flexbox</h1>
71+
<div class="product3 container-row">
72+
<div class="image-color-container container-col">
73+
<img class="product-image" src="challenges.jpg"
74+
alt="a person wearing jeans and a pair of Chuck Taylor black with white soles and cap." />
75+
<div class="box-container container-row">
76+
<div class="box black-box"></div>
77+
<div class="box blue-box"></div>
78+
<div class="box red-box"></div>
79+
<div class="box yellow-box"></div>
80+
<div class="box green-box"></div>
81+
<div class="box brown-box"></div>
82+
</div>
83+
</div>
84+
<div class="pricing">
85+
<p><strong>USD $65.00</strong></p>
86+
<p>Free Shipping</p>
87+
<p>Ready to dress up or dress down? These classic canvas Chucks are an everyday wardrobe
88+
staple.
89+
</p>
90+
<a href="#">More info →</a>
91+
</div>
92+
<div class="description">
93+
<h2>Product details:</h2>
94+
<ul>
95+
<li>Lightweight, durable canvas sneaker.</li>
96+
<li>Lightweight padded footbed for added comfort.</li>
97+
<li>Iconic Chuck Taylor ankle patch.</li>
98+
</ul>
99+
</div>
100+
</div>
101+
102+
103+
104+
105+
<button>Add to Cart</button>
106+
</div>
107+
<div id="component4" class="component component4">
108+
<h1>Converse Chuck Taylor All-Star CSS GRID</h1>
109+
<div class="product4">
110+
<div class="image-color">
111+
<img class="product4-image" src="challenges.jpg"
112+
alt="a person wearing jeans and a pair of Chuck Taylor black with white soles and cap." />
113+
<div class="box-container container-row">
114+
<div class="box black-box"></div>
115+
<div class="box blue-box"></div>
116+
<div class="box red-box"></div>
117+
<div class="box yellow-box"></div>
118+
<div class="box green-box"></div>
119+
<div class="box brown-box"></div>
120+
</div>
121+
</div>
122+
<div class="pricing">
123+
<p><strong>USD $65.00</strong></p>
124+
<p>Free Shipping</p>
125+
<p>Ready to dress up or dress down? These classic canvas Chucks are an everyday wardrobe
126+
staple.
127+
</p>
128+
<a href="#">More info →</a>
129+
</div>
130+
<div class="description">
131+
<h2>Product details:</h2>
132+
<ul>
133+
<li>Lightweight, durable canvas sneaker.</li>
134+
<li>Lightweight padded footbed for added comfort.</li>
135+
<li>Iconic Chuck Taylor ankle patch.</li>
136+
</ul>
137+
</div>
138+
</div>
139+
<button class="button4">Add to Cart</button>
140+
</div>
141+
</div>
69142
</div>
70143
</main>
71144
<!-- <footer>

‎starter/02-HTML-Fundamentals/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,7 @@ footer p {
210210
text-align: left;
211211
font-size: 2.25rem;
212212
margin-top: 0;
213+
margin-bottom: 0.25em;
213214
position: relative;
214215
}
215216

0 commit comments

Comments
 (0)