Skip to content

Commit 06f01c2

Browse files
andreituicuandreituicu
committed
04 - CSS Floats + Box Sizing
1 parent 8a175dd commit 06f01c2

File tree

6 files changed

+283
-12
lines changed

6 files changed

+283
-12
lines changed

‎slides/04-Layouts/1-Absolute-positioning-vs-Floats.png

597 KB
Loading

‎slides/04-Layouts/2-Box-Sizing-Border-Box.png

1.2 MB
Loading

‎starter/04-CSS-Layouts/index.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ <h6>The Basic Language of the Web: HTML</h6>
1818
-->
1919

2020
<div class="container">
21-
<header class="main-header">
21+
<header class="main-header clearfix">
2222
<h1>📘 The Code Magazine</h1>
2323

2424
<nav>
@@ -28,6 +28,7 @@ <h1>📘 The Code Magazine</h1>
2828
<a href="#">Flexbox</a>
2929
<a href="#">CSS Grid</a>
3030
</nav>
31+
<!-- <div class="clear"></div> -->
3132
</header>
3233

3334
<article>
@@ -39,9 +40,10 @@ <h2>The Basic Language of the Web: HTML</h2>
3940
alt="Headshot of Laura Jones"
4041
height="50"
4142
width="50"
43+
class="author-image"
4244
/>
4345

44-
<p id="author">
46+
<p id="author" class="author">
4547
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
4648
</p>
4749

‎starter/04-CSS-Layouts/product-component.css

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
article {
8+
font-family: sans-serif;
9+
line-height: 1.4;
10+
}
11+
12+
.clearfix::after {
13+
content: "";
14+
display: block;
15+
clear: both;
16+
}
17+
18+
/* PRODUCT */
19+
.product {
20+
border: 4px solid black;
21+
width: 825px;
22+
margin: 50px auto;
23+
position: relative;
24+
}
25+
26+
.sale-label {
27+
background-color: #ec2f2f;
28+
color: #fff;
29+
font-size: 12px;
30+
text-transform: uppercase;
31+
font-weight: bold;
32+
padding: 7px 15px;
33+
display: inline-block;
34+
position: absolute;
35+
top: -17px;
36+
left: -38px;
37+
letter-spacing: 2px;
38+
}
39+
40+
.product-title {
41+
text-align: center;
42+
font-size: 22px;
43+
text-transform: uppercase;
44+
background-color: #f7f7f7;
45+
padding: 15px;
46+
}
47+
48+
/* PRODUCT INFORMATION */
49+
.product-image {
50+
float: left;
51+
}
52+
53+
.product-info {
54+
/* (825 - 8 - 250 - 80) / 2 = 243.5 */
55+
width: 243px;
56+
margin-top: 20px;
57+
margin-left: 40px;
58+
float: left;
59+
}
60+
61+
.price {
62+
font-size: 24px;
63+
float: left;
64+
margin-bottom: 25px;
65+
}
66+
67+
.shipping {
68+
font-size: 12px;
69+
text-transform: uppercase;
70+
font-weight: bold;
71+
color: #777;
72+
margin-top: 7px;
73+
margin-bottom: 20px;
74+
float: right;
75+
}
76+
77+
.product-description {
78+
clear: both;
79+
margin-bottom: 10px;
80+
}
81+
82+
.more-info:link,
83+
.more-info:visited {
84+
color: black;
85+
margin-bottom: 30px;
86+
display: inline-block;
87+
}
88+
89+
.more-info:hover,
90+
.more-info:active {
91+
text-decoration: none;
92+
}
93+
94+
/* PRODUCT VARIATIONS */
95+
.variation-color {
96+
display: inline-block;
97+
height: 22px;
98+
width: 22px;
99+
margin-right: 10px;
100+
}
101+
102+
.variation-color-black {
103+
background-color: #000;
104+
}
105+
106+
.variation-color-blue {
107+
background-color: #2f6ee2;
108+
}
109+
110+
.variation-color-red {
111+
background-color: #ec2f2f;
112+
}
113+
114+
.variation-color-yellow {
115+
background-color: #f0bf1e;
116+
}
117+
118+
.variation-color-green {
119+
background-color: #90cc20;
120+
}
121+
122+
.variation-color-brown {
123+
background-color: #885214;
124+
}
125+
126+
/* PRODUCT DETAILS */
127+
.product-details {
128+
float: left;
129+
width: 243px;
130+
margin-left: 40px;
131+
margin-top: 20px;
132+
}
133+
134+
.details-title {
135+
text-transform: uppercase;
136+
font-size: 16px;
137+
margin-bottom: 15px;
138+
}
139+
140+
.details-list {
141+
list-style: square;
142+
margin-left: 20px;
143+
}
144+
145+
.details-list li {
146+
margin-bottom: 10px;
147+
}
148+
149+
/* BUTTON */
150+
.add-cart {
151+
background-color: #000;
152+
border: none;
153+
color: #fff;
154+
font-size: 20px;
155+
text-transform: uppercase;
156+
cursor: pointer;
157+
width: 100%;
158+
padding: 15px;
159+
border-top: 4px solid black;
160+
}
161+
162+
.add-cart:hover {
163+
color: #000;
164+
background-color: #fff;
165+
}

‎starter/04-CSS-Layouts/product-component.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<link href="product-component.css" rel="stylesheet" />
2+
3+
<article class="product">
4+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
5+
<div class="container clearfix">
6+
<img
7+
src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
8+
alt="Chuck Taylor All Star Shoe"
9+
height="250"
10+
width="250"
11+
class="product-image"
12+
/>
13+
14+
<div class="product-info">
15+
<p class="price"><strong>$65.00</strong></p>
16+
<p class="shipping">Free shipping</p>
17+
<p class="sale-label">sale</p>
18+
19+
<p class="product-description">
20+
Ready to dress up or down, these classic canvas Chucks are an everyday
21+
wardrobe staple.
22+
</p>
23+
24+
<a class="more-info" href="https://www.converse.com"
25+
>More information &rarr;</a
26+
>
27+
28+
<div class="variations">
29+
<div class="variation-color variation-color-black"></div>
30+
<div class="variation-color variation-color-blue"></div>
31+
<div class="variation-color variation-color-red"></div>
32+
<div class="variation-color variation-color-yellow"></div>
33+
<div class="variation-color variation-color-green"></div>
34+
<div class="variation-color variation-color-brown"></div>
35+
</div>
36+
</div>
37+
38+
<div class="product-details">
39+
<h3 class="details-title">Product details</h3>
40+
<ul class="details-list">
41+
<li class="details-list-item">Lightweight, durable canvas sneaker</li>
42+
<li class="details-list-item">
43+
Lightly padded footbed for added comfort
44+
</li>
45+
<li class="details-list-item">Iconic Chuck Taylor ankle patch</li>
46+
</ul>
47+
</div>
48+
</div>
49+
<button class="add-cart">Add to cart</button>
50+
</article>

‎starter/04-CSS-Layouts/style.css

Lines changed: 64 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
* {
2-
/* border-top: 10px solid #1098ad; */
2+
/*
3+
border-top: 10px solid #1098ad;
4+
*/
35
margin: 0;
46
padding: 0;
7+
box-sizing: border-box;
58
}
69

710
/* PAGE SECTIONS */
@@ -14,20 +17,26 @@ body {
1417
}
1518

1619
.container {
17-
width: 800px;
18-
/* margin-left: auto;
19-
margin-right: auto; */
20+
width: 1200px;
21+
/*
22+
margin-left: auto;
23+
margin-right: auto;
24+
*/
2025
margin: 0 auto;
2126
}
2227

2328
.main-header {
2429
background-color: #f7f7f7;
25-
/* padding: 20px;
30+
/*
31+
padding: 20px;
2632
padding-left: 40px;
27-
padding-right: 40px; */
33+
padding-right: 40px;
34+
*/
2835
padding: 20px 40px;
2936
margin-bottom: 60px;
30-
/* height: 80px; */
37+
/*
38+
height: 80px;
39+
*/
3140
}
3241

3342
nav {
@@ -48,10 +57,8 @@ aside {
4857
background-color: #f7f7f7;
4958
border-top: 5px solid #1098ad;
5059
border-bottom: 5px solid #1098ad;
51-
/* padding-top: 50px;
52-
padding-bottom: 50px; */
5360
padding: 50px 0;
54-
width: 500px;
61+
padding: 50px 40px;
5562
}
5663

5764
/* SMALLER ELEMENTS */
@@ -82,6 +89,7 @@ h4 {
8289
font-size: 20px;
8390
text-transform: uppercase;
8491
text-align: center;
92+
margin-bottom: 30px;
8593
}
8694

8795
p {
@@ -134,6 +142,7 @@ li:last-child {
134142

135143
.related {
136144
list-style: none;
145+
margin-left: 0;
137146
}
138147

139148
body {
@@ -265,3 +274,48 @@ footer p {
265274
nav p {
266275
font-size: 18px;
267276
} */
277+
278+
/* FLOATS */
279+
280+
.author-image {
281+
float: left;
282+
margin-bottom: 20px;
283+
}
284+
285+
.author {
286+
float: left;
287+
margin-top: 10px;
288+
margin-left: 20px;
289+
}
290+
291+
h1 {
292+
float: left;
293+
}
294+
295+
nav {
296+
float: right;
297+
}
298+
299+
.clear {
300+
clear: both;
301+
}
302+
303+
.clearfix::after {
304+
clear: both;
305+
content: "";
306+
display: block;
307+
}
308+
309+
article {
310+
width: 825px;
311+
float: left;
312+
}
313+
314+
aside {
315+
width: 300px;
316+
float: right;
317+
}
318+
319+
footer {
320+
clear: both;
321+
}

0 commit comments

Comments
 (0)