Skip to content

Commit ff92f04

Browse files
dboyliaodboyliao
committed
vid 50 done
1 parent c75e617 commit ff92f04

File tree

4 files changed

+285
-8
lines changed

4 files changed

+285
-8
lines changed

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="./style.css" />
7+
<title>Challenge</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<article class="product">
12+
<div class="product-title-container">
13+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
14+
</div>
15+
<img
16+
src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
17+
alt="Chuck Taylor All Star Shoe"
18+
height="250"
19+
width="250"
20+
class="product-image"
21+
/>
22+
23+
<div class="product-basic-container">
24+
<div>
25+
<p class="product-price"><strong>$65.00</strong></p>
26+
<p class="product-shipping">Free shipping</p>
27+
</div>
28+
<div class="clear"></div>
29+
<p>
30+
Ready to dress up or down, these classic canvas Chucks are an
31+
everyday wardrobe staple.
32+
</p>
33+
34+
<a class="more-info" href="https://www.converse.com"
35+
>More information &rarr;</a
36+
>
37+
<ol class="variant-list">
38+
<li></li>
39+
<li></li>
40+
<li></li>
41+
<li></li>
42+
<li></li>
43+
<li></li>
44+
</ol>
45+
</div>
46+
47+
<div class="product-details-container">
48+
<h3 class="product-details-header">Product details</h3>
49+
<ul class="product-details-list">
50+
<li>Lightweight, durable canvas sneaker</li>
51+
<li>Lightly padded footbed for added comfort</li>
52+
<li>Iconic Chuck Taylor ankle patch</li>
53+
</ul>
54+
</div>
55+
56+
<button class="add-cart">Add to cart</button>
57+
</article>
58+
</div>
59+
</body>
60+
</html>

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

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

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ <h1>📘 The Code Magazine</h1>
2323

2424
<nav>
2525
<!-- <strong>This is the navigation</strong> -->
26-
<a href="blog.html">Blog</a>
26+
<a href="./blog.html">Blog</a>
2727
<a href="#">Challenges</a>
28-
<a href="#">Flexbox</a>
29-
<a href="#">CSS Grid</a>
28+
<a href="./flexbox.html">Flexbox</a>
29+
<a href="./css-grid.html">CSS Grid</a>
3030
</nav>
3131
</header>
3232

@@ -39,12 +39,12 @@ <h2>The Basic Language of the Web: HTML</h2>
3939
alt="Headshot of Laura Jones"
4040
height="50"
4141
width="50"
42+
class="author-img"
4243
/>
4344

44-
<p id="author">
45+
<p id="author" class="author">
4546
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
4647
</p>
47-
4848
<img
4949
src="img/post-img.jpg"
5050
alt="HTML code on a screen"

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

Lines changed: 46 additions & 3 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 */
@@ -14,7 +15,7 @@ body {
1415
}
1516

1617
.container {
17-
width: 800px;
18+
width: 1200px;
1819
/* margin-left: auto;
1920
margin-right: auto; */
2021
margin: 0 auto;
@@ -50,8 +51,7 @@ aside {
5051
border-bottom: 5px solid #1098ad;
5152
/* padding-top: 50px;
5253
padding-bottom: 50px; */
53-
padding: 50px 0;
54-
width: 500px;
54+
padding: 50px 40px;
5555
}
5656

5757
/* SMALLER ELEMENTS */
@@ -82,6 +82,7 @@ h4 {
8282
font-size: 20px;
8383
text-transform: uppercase;
8484
text-align: center;
85+
margin-bottom: 40px;
8586
}
8687

8788
p {
@@ -134,6 +135,7 @@ li:last-child {
134135

135136
.related {
136137
list-style: none;
138+
margin-left: 0;
137139
}
138140

139141
body {
@@ -265,3 +267,44 @@ footer p {
265267
nav p {
266268
font-size: 18px;
267269
} */
270+
271+
/* FLOATS */
272+
.author {
273+
padding: 10px;
274+
}
275+
276+
.author-img {
277+
float: left;
278+
}
279+
280+
h1 {
281+
float: left;
282+
}
283+
284+
nav {
285+
float: right;
286+
}
287+
288+
.main-header::after {
289+
content: "";
290+
display: block;
291+
clear: both;
292+
}
293+
294+
article {
295+
width: 825px;
296+
float: left;
297+
}
298+
299+
aside {
300+
width: 300px;
301+
float: right;
302+
}
303+
304+
footer {
305+
clear: both;
306+
}
307+
308+
.related img {
309+
display: block;
310+
}

0 commit comments

Comments
 (0)