Skip to content

Commit e9b0668

Browse files
larry-xuelarry-xue
committed
css layout(flex) & tutorial
1 parent 10de6bc commit e9b0668

File tree

9 files changed

+1040
-254
lines changed

9 files changed

+1040
-254
lines changed

‎code-challenge/03/index.html

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

‎code-challenge/03/style.css

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

‎code-challenge/04/index.html

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

0 commit comments

Comments
 (0)