Skip to content

Commit 7bd47b8

Browse files
thomascweithomascwei
committed
.
1 parent 7c4f239 commit 7bd47b8

File tree

5 files changed

+192
-17
lines changed

5 files changed

+192
-17
lines changed

‎starter/02-HTML-Fundamentals/challenge.html

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,31 @@
99
<body>
1010
<article>
1111
<h2>Converse low Top</h2>
12-
<img src="./img/challenges.jpg" alt="challenges" width="300" />
13-
<p class="price"><strong>$60.0</strong></p>
14-
<p class="shipping">Free shipping</p>
15-
<a class="more-info" href="#">More Information &rarr;</a>
16-
<div class="color-pick">
17-
<div class="color"></div>
18-
<div class="color color-red"></div>
19-
<div class="color color-green"></div>
12+
<img
13+
class="product-img"
14+
src="./img/challenges.jpg"
15+
alt="challenges"
16+
width="250"
17+
/>
18+
<div class="product-info">
19+
<p class="price"><strong>$60.0</strong></p>
20+
<p class="shipping">Free shipping</p>
21+
<div class="clear-fix"></div>
22+
<a class="more-info" href="#">More Information &rarr;</a>
23+
<div class="color-pick">
24+
<div class="color"></div>
25+
<div class="color color-red"></div>
26+
<div class="color color-green"></div>
27+
</div>
28+
</div>
29+
30+
<div class="product-detail">
31+
<h3 class="detail-title">Product details</h3>
32+
<ul class="detail-list">
33+
<li>light</li>
34+
<li>comfort</li>
35+
</ul>
2036
</div>
21-
<h3 class="detail-title">Product details</h3>
22-
<ul class="detail-list">
23-
<li>light</li>
24-
<li>comfort</li>
25-
</ul>
2637
</article>
2738
<button class="cart">add to cart</button>
2839
<p class="sale">SALE</p>

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

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
* {
22
margin: 0;
33
padding: 0;
4+
box-sizing: border-box;
45
}
56
body {
67
border: 5px solid #000;
7-
width: 500px;
8+
width: 800px;
89
margin: 50px auto;
910
position: relative;
1011
}
@@ -14,19 +15,42 @@ h2 {
1415
text-transform: uppercase;
1516
padding: 10px;
1617
}
18+
.product-img {
19+
float: left;
20+
margin-right: 20px;
21+
}
22+
23+
.product-info {
24+
width: 243px;
25+
float: left;
26+
margin-right: 20px;
27+
margin-top: 20px;
28+
}
29+
.product-detail {
30+
width: 243px;
31+
float: left;
32+
margin-top: 20px;
33+
}
1734

1835
.price {
1936
font-weight: bold;
2037
font-size: 25px;
38+
float: left;
2139
}
2240

2341
.shipping {
2442
text-transform: uppercase;
2543
font-weight: bold;
2644
color: #777;
2745
margin-bottom: 10px;
46+
margin-top: 5px;
47+
48+
float: right;
2849
}
2950

51+
.clear-fix {
52+
clear: both;
53+
}
3054
.more-info:link {
3155
display: inline-block;
3256
margin-bottom: 30px;
@@ -44,7 +68,6 @@ h2 {
4468
.detail-title {
4569
text-transform: uppercase;
4670
margin-bottom: 10px;
47-
margin-top: 20px;
4871
}
4972
.detail-list {
5073
list-style: square;

‎starter/03-CSS-Fundamentals/css-grid.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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>CSS Grid</title>
8+
<style>
9+
.el--1 {
10+
background-color: blueviolet;
11+
}
12+
.el--2 {
13+
background-color: orangered;
14+
}
15+
.el--3 {
16+
background-color: green;
17+
height: 150px;
18+
}
19+
.el--4 {
20+
background-color: goldenrod;
21+
}
22+
.el--5 {
23+
background-color: palevioletred;
24+
}
25+
.el--6 {
26+
background-color: steelblue;
27+
}
28+
.el--7 {
29+
background-color: yellow;
30+
}
31+
.el--8 {
32+
background-color: crimson;
33+
}
34+
35+
.container--1 {
36+
/* STARTER */
37+
font-family: sans-serif;
38+
background-color: #ddd;
39+
font-size: 40px;
40+
margin: 40px;
41+
42+
/* CSS GRID */
43+
}
44+
45+
.container--2 {
46+
/* STARTER */
47+
font-family: sans-serif;
48+
background-color: black;
49+
font-size: 40px;
50+
margin: 100px;
51+
52+
width: 1000px;
53+
height: 600px;
54+
55+
/* CSS GRID */
56+
}
57+
</style>
58+
</head>
59+
<body>
60+
<div class="container--1">
61+
<div class="el el--1">(1) HTML</div>
62+
<div class="el el--2">(2) and</div>
63+
<div class="el el--3">(3) CSS</div>
64+
<div class="el el--4">(4) are</div>
65+
<div class="el el--5">(5) amazing</div>
66+
<div class="el el--6">(6) languages</div>
67+
<div class="el el--7">(7) to</div>
68+
<div class="el el--8">(8) learn</div>
69+
</div>
70+
71+
<div class="container--2">
72+
<div class="el el--1">(1)</div>
73+
<div class="el el--3">(3)</div>
74+
<div class="el el--4">(4)</div>
75+
<div class="el el--5">(5)</div>
76+
<div class="el el--6">(6)</div>
77+
<div class="el el--7">(7)</div>
78+
</div>
79+
</body>
80+
</html>

‎starter/03-CSS-Fundamentals/flexbox.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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>Flexbox</title>
8+
<style>
9+
.el--1 {
10+
background-color: blueviolet;
11+
}
12+
.el--2 {
13+
background-color: orangered;
14+
}
15+
.el--3 {
16+
background-color: green;
17+
height: 150px;
18+
}
19+
.el--4 {
20+
background-color: goldenrod;
21+
}
22+
.el--5 {
23+
background-color: palevioletred;
24+
}
25+
.el--6 {
26+
background-color: steelblue;
27+
}
28+
.el--7 {
29+
background-color: yellow;
30+
}
31+
.el--8 {
32+
background-color: crimson;
33+
}
34+
35+
.container {
36+
/* STARTER */
37+
font-family: sans-serif;
38+
background-color: #ddd;
39+
font-size: 40px;
40+
margin: 40px;
41+
42+
/* FLEXBOX */
43+
display: flex;
44+
align-items: center;
45+
justify-content: center;
46+
}
47+
</style>
48+
</head>
49+
<body>
50+
<div class="container">
51+
<div class="el el--1">HTML</div>
52+
<div class="el el--2">and</div>
53+
<div class="el el--3">CSS</div>
54+
<div class="el el--4">are</div>
55+
<div class="el el--5">amazing</div>
56+
<div class="el el--6">languages</div>
57+
<div class="el el--7">to</div>
58+
<div class="el el--8">learn</div>
59+
</div>
60+
</body>
61+
</html>

‎starter/03-CSS-Fundamentals/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ <h1>📘 The Code Magazine</h1>
2222
<nav>
2323
<a href="blog.html">Blog</a>
2424
<a href="#">Challenges</a>
25-
<a href="#">Flexbox</a>
26-
<a href="#">CSS Grid</a>
25+
<a href="flexbox.html">Flexbox</a>
26+
<a href="css-grid.html">CSS Grid</a>
2727
</nav>
2828
</header>
2929

0 commit comments

Comments
 (0)