Skip to content

Commit f1eafb1

Browse files
MandoCastilloMandoCastillo
committed
box-sizing: border-box
1 parent 3add4f5 commit f1eafb1

File tree

8 files changed

+235
-6
lines changed

8 files changed

+235
-6
lines changed

‎.idea/.gitignore

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/html-css-course.iml

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/vcs.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎challenge/index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="styles.css">
6+
<title>Title</title>
7+
</head>
8+
<body>
9+
<article class="product">
10+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
11+
<img
12+
src="https://i.imgur.com/ZrTU3VK.jpeg"
13+
alt="Chuck Taylor All Star Shoe"
14+
height="250"
15+
width="250"
16+
/>
17+
<p class="price"><strong>$65.00</strong></p>
18+
<p class="shipping">Free shipping</p>
19+
<p class="sale">Sale</p>
20+
21+
<p class="product-description">
22+
Ready to dress up or down, these classic canvas Chucks are an everyday
23+
wardrobe staple.
24+
</p>
25+
<a href="https://converse.com" target="_blank" class="more-info">More information &rarr;</a>
26+
27+
<div class="colors">
28+
<div class="color"></div>
29+
<div class="color color-blue"></div>
30+
<div class="color color-red"></div>
31+
<div class="color color-yellow"></div>
32+
<div class="color color-green"></div>
33+
<div class="color color-brown"></div>
34+
</div>
35+
36+
<h3 class="details-title">Product details</h3>
37+
<ul class="details-list">
38+
<li>Lightweight, durable canvas sneaker</li>
39+
<li>Lightly padded footbed for added comfort</li>
40+
<li>Iconic Chuck Taylor ankle patch.</li>
41+
</ul>
42+
<button class="add-cart">Add to cart</button>
43+
</article>
44+
</body>
45+
</html>

‎challenge/styles.css

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

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

Lines changed: 2 additions & 1 deletion
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>

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

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
/* border-top: 10px solid #1098ad; */
33
margin: 0;
44
padding: 0;
5+
box-sizing: border-box;
56
}
67

78
/* PAGE SECTIONS */
@@ -15,7 +16,7 @@ body {
1516
}
1617

1718
.container {
18-
width: 800px;
19+
width: 1200px;
1920
/* margin-left: auto;
2021
margin-right: auto; */
2122
margin: 0 auto;
@@ -49,10 +50,7 @@ aside {
4950
background-color: #f7f7f7;
5051
border-top: 5px solid #1098ad;
5152
border-bottom: 5px solid #1098ad;
52-
/* padding-top: 50px;
53-
padding-bottom: 50px; */
54-
padding: 50px 0;
55-
width: 500px;
53+
padding: 50px 40px;
5654
}
5755

5856
/* SMALLER ELEMENTS */
@@ -83,6 +81,7 @@ h4 {
8381
font-size: 20px;
8482
text-transform: uppercase;
8583
text-align: center;
84+
margin-bottom: 30px;
8685
}
8786

8887
p {
@@ -135,6 +134,7 @@ li:last-child {
135134

136135
.related {
137136
list-style: none;
137+
margin-left: 0;
138138
}
139139

140140
body {
@@ -288,3 +288,27 @@ h1 {
288288
nav {
289289
float: right;
290290
}
291+
292+
.clear {
293+
clear: both;
294+
}
295+
296+
.clearfix::after {
297+
clear: both;
298+
content: '';
299+
display: block;
300+
}
301+
302+
article {
303+
width: 825px;
304+
float: left;
305+
}
306+
307+
aside {
308+
width: 300px;
309+
float: right;
310+
}
311+
312+
footer {
313+
clear: both;
314+
}

0 commit comments

Comments
 (0)