Skip to content

Commit 3d6e00b

Browse files
AbernachyAbernachy
committed
started flexbox
1 parent 0989fdf commit 3d6e00b

File tree

4 files changed

+222
-73
lines changed

4 files changed

+222
-73
lines changed

‎projectfolder/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ <h1>📘 The Code Magazine</h1>
2525
<nav>
2626
<a href="./pages/blog.html">Blog</a>
2727
<a href="./pages/challenges.html">Challenges</a>
28-
<a href="#">Flexbox</a>
29-
<a href="#">CSS Grid </a>
28+
<a href="./pages/flexbox.html">Flexbox</a>
29+
<a href="./pages/css-grid.html">CSS Grid </a>
3030
</nav>
3131
<div class="clear"></div>
3232

‎projectfolder/pages/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>

‎projectfolder/pages/flexbox.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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: stretch;
45+
align-items: center;
46+
justify-content: space-between;
47+
}
48+
</style>
49+
</head>
50+
<body>
51+
<div class="container">
52+
<div class="el el--1">HTML</div>
53+
<div class="el el--2">and</div>
54+
<div class="el el--3">CSS</div>
55+
<div class="el el--4">are</div>
56+
<div class="el el--5">amazing</div>
57+
<div class="el el--6">languages</div>
58+
<div class="el el--7">to</div>
59+
<div class="el el--8">learn</div>
60+
</div>
61+
</body>
62+
</html>

‎starter/04-CSS-Layouts/css-grid.html

Lines changed: 78 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,87 @@
11
<!DOCTYPE html>
22
<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-
}
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>
348

35-
.container--1 {
36-
/* STARTER */
37-
font-family: sans-serif;
38-
background-color: #ddd;
39-
font-size: 40px;
40-
margin: 40px;
9+
<style>
10+
.el--1 {
11+
background-color: blueviolet;
12+
}
13+
.el--2 {
14+
background-color: orangered;
15+
}
16+
.el--3 {
17+
background-color: green;
18+
height: 150px;
19+
}
20+
.el--4 {
21+
background-color: goldenrod;
22+
}
23+
.el--5 {
24+
background-color: palevioletred;
25+
}
26+
.el--6 {
27+
background-color: steelblue;
28+
}
29+
.el--7 {
30+
background-color: yellow;
31+
}
32+
.el--8 {
33+
background-color: crimson;
34+
}
4135

42-
/* CSS GRID */
43-
}
36+
.container--1 {
37+
/* STARTER */
38+
font-family: sans-serif;
39+
background-color: #ddd;
40+
font-size: 40px;
41+
margin: 40px;
4442

45-
.container--2 {
46-
/* STARTER */
47-
font-family: sans-serif;
48-
background-color: black;
49-
font-size: 40px;
50-
margin: 100px;
43+
/* CSS GRID */
44+
}
5145

52-
width: 1000px;
53-
height: 600px;
46+
.container--2 {
47+
/* STARTER */
48+
font-family: sans-serif;
49+
background-color: black;
50+
font-size: 40px;
51+
margin: 100px;
5452

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>
53+
width: 1000px;
54+
height: 600px;
7055

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>
56+
/* CSS GRID */
57+
}
58+
</style>
59+
</head>
60+
<body>
61+
<div>
62+
<nav>
63+
<a class="homepage" href="../index.html">Home Page</a>
64+
</nav>
65+
</div>
66+
;
67+
<div class="container--1">
68+
<div class="el el--1">(1) HTML</div>
69+
<div class="el el--2">(2) and</div>
70+
<div class="el el--3">(3) CSS</div>
71+
<div class="el el--4">(4) are</div>
72+
<div class="el el--5">(5) amazing</div>
73+
<div class="el el--6">(6) languages</div>
74+
<div class="el el--7">(7) to</div>
75+
<div class="el el--8">(8) learn</div>
76+
</div>
77+
78+
<div class="container--2">
79+
<div class="el el--1">(1)</div>
80+
<div class="el el--3">(3)</div>
81+
<div class="el el--4">(4)</div>
82+
<div class="el el--5">(5)</div>
83+
<div class="el el--6">(6)</div>
84+
<div class="el el--7">(7)</div>
85+
</div>
86+
</body>
8087
</html>

0 commit comments

Comments
 (0)