Skip to content

Commit bdc41bf

Browse files
DirkBrouwerDirkBrouwer
committed
Add solution to sixth flexbox exercise
1 parent b941f08 commit bdc41bf

File tree

2 files changed

+91
-33
lines changed

2 files changed

+91
-33
lines changed

‎flex/06-flex-layout/index.html

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,47 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<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">
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" />
77
<title>LAYOUT</title>
8-
<link rel="stylesheet" href="./style.css">
8+
<link rel="stylesheet" href="./style.css" />
99
</head>
1010
<body>
11-
<div class="header">
12-
<ul class="left-links">
13-
<li><a href="#">About</a></li>
14-
<li><a href="#">Store</a></li>
15-
</ul>
16-
<ul class="right-links">
17-
<li><a href="#">Profile</a></li>
18-
<li><a href="#">Settings</a></li>
19-
</ul>
20-
</div>
21-
<div class="content">
22-
<img src="./logo.png" alt="Project logo. Represents odin with the project name.">
23-
<div class="input">
24-
<input type="text">
11+
<div class="container">
12+
<div class="header">
13+
<ul class="left-links">
14+
<li><a href="#">About</a></li>
15+
<li><a href="#">Store</a></li>
16+
</ul>
17+
<ul class="right-links">
18+
<li><a href="#">Profile</a></li>
19+
<li><a href="#">Settings</a></li>
20+
</ul>
2521
</div>
26-
<div class="buttons">
27-
<button>Do the thing!</button>
28-
<button>Do the other thing!</button>
22+
<div class="content">
23+
<img
24+
src="./logo.png"
25+
alt="Project logo. Represents odin with the project name."
26+
/>
27+
<div class="input">
28+
<input type="text" />
29+
</div>
30+
<div class="buttons">
31+
<button>Do the thing!</button>
32+
<button>Do the other thing!</button>
33+
</div>
34+
</div>
35+
<div class="footer">
36+
<ul class="left-links">
37+
<li><a href="#">Advertising</a></li>
38+
<li><a href="#">Business</a></li>
39+
</ul>
40+
<ul class="right-links">
41+
<li><a href="#">Privacy</a></li>
42+
<li><a href="#">Terms</a></li>
43+
</ul>
2944
</div>
30-
</div>
31-
<div class="footer">
32-
<ul class="left-links">
33-
<li><a href="#">Advertising</a></li>
34-
<li><a href="#">Business</a></li>
35-
</ul>
36-
<ul class="right-links">
37-
<li><a href="#">Privacy</a></li>
38-
<li><a href="#">Terms</a></li>
39-
</ul>
4045
</div>
4146
</body>
42-
</html>
47+
</html>

‎flex/06-flex-layout/style.css

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
3+
html {
4+
box-sizing: border-box;
5+
}
6+
7+
*,
8+
*::before,
9+
*::after {
10+
box-sizing: inherit;
11+
}
212

313
body {
414
height: 100vh;
@@ -7,6 +17,17 @@ body {
717
font-family: Roboto, sans-serif;
818
}
919

20+
ul {
21+
list-style-type: none;
22+
padding: 0;
23+
margin: 0;
24+
}
25+
26+
a {
27+
text-decoration: none;
28+
color: #696969;
29+
}
30+
1031
img {
1132
width: 600px;
1233
}
@@ -16,6 +37,7 @@ button {
1637
border: none;
1738
border-radius: 8px;
1839
background: #eee;
40+
padding: 10px;
1941
}
2042

2143
input {
@@ -24,3 +46,34 @@ input {
2446
padding: 8px 24px;
2547
width: 400px;
2648
}
49+
50+
.container {
51+
height: 100%;
52+
display: flex;
53+
flex-direction: column;
54+
justify-content: space-between;
55+
}
56+
57+
.header,
58+
.footer {
59+
display: flex;
60+
justify-content: space-between;
61+
padding: 15px;
62+
}
63+
64+
.left-links,
65+
.right-links {
66+
display: flex;
67+
gap: 15px;
68+
}
69+
70+
.content {
71+
display: flex;
72+
flex-direction: column;
73+
align-items: center;
74+
row-gap: 15px;
75+
}
76+
77+
.footer {
78+
background-color: #eeeeee;
79+
}

0 commit comments

Comments
 (0)