Skip to content

Commit ed12097

Browse files
Rares MateiRares Matei
Rares Matei
authored and
Rares Matei
committed
make flexbox files consistent with the others
1 parent d3294bd commit ed12097

File tree

7 files changed

+102
-27
lines changed

7 files changed

+102
-27
lines changed

‎exercise-specific-src/15-more-flexbox/custom.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
body {
2+
display: flex;
3+
justify-content: space-evenly;
4+
flex-wrap: wrap;
5+
}
6+
7+
.site-wrapper {
8+
margin-right: 0;
9+
margin-left: 0;
10+
width: 550px;
11+
}
12+
13+
.solution {
14+
max-width: 561px;
15+
}
16+
17+
.countries {
18+
height: 310px;
19+
border: black solid;
20+
}
21+
22+
.countries--tall {
23+
min-height: 0px;
24+
}

‎exercise-specific-src/15-more-flexbox/solution1.png

35.5 KB
Loading

‎exercise-specific-src/15-more-flexbox/solution2.png

33.5 KB
Loading

‎exercise-specific-src/15-more-flexbox/solution3.png

38.9 KB
Loading

‎exercise-specific-src/15-more-flexbox/solution4.png

40.5 KB
Loading

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"12": "live-server --open=week-2/12-align-items",
2020
"13": "live-server --open=week-2/13-order",
2121
"14": "live-server --open=week-2/14-align-self",
22+
"15": "live-server --open=week-2/15-more-flexbox",
2223
"serve": "live-server"
2324
},
2425
"devDependencies": {

‎week-2/15-more-flexbox/index.html

+77-27
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,82 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<title>12 - Align Items - HTML, CSS and Git Exercises</title>
6-
<link rel="stylesheet" href="/css/normalize.css" />
7-
<link rel="stylesheet" href="/css/week2.css" />
8-
<link rel="stylesheet" href="/css/week2-flexbox.css" />
9-
<link rel="stylesheet" href="flexbox.css" />
10-
</head>
113

12-
<body>
13-
<div class="site-wrapper site-wrapper">
14-
<div class="site-header"><h1 class="site-header__title">First</h1></div>
15-
<ul class="countries countries--tall countries--first">
16-
<li class="country">1. Brazil</li>
17-
<li class="country">2. Croatia</li>
18-
<li class="country">3. Ethiopia</li>
19-
<li class="country">4. Laos</li>
20-
<li class="country">5. Uganda</li>
21-
</ul>
22-
<div class="site-header"><h1 class="site-header__title">Second</h1></div>
23-
<ul class="countries countries--tall countries--second">
24-
<li class="country">1. Brazil</li>
25-
<li class="country">2. Croatia</li>
26-
<li class="country">3. Ethiopia</li>
27-
<li class="country">4. Laos</li>
28-
<li class="country">5. Uganda</li>
29-
</ul>
4+
<head>
5+
<meta charset="utf-8">
6+
<title>15 - More Flexbox - HTML, CSS and Git Exercises</title>
7+
<link rel="stylesheet" href="/css/normalize.css">
8+
<link rel="stylesheet" href="/css/week2.css">
9+
<link rel="stylesheet" href="/css/week2-flexbox.css">
10+
<link rel="stylesheet" href="flexbox.css">
11+
<link
12+
rel="stylesheet"
13+
href="../../exercise-specific-src/15-more-flexbox/custom.css"
14+
/>
15+
</head>
16+
17+
<body>
18+
<div class="site-wrapper site-wrapper">
19+
<div class="site-header">
20+
<h1 class="site-header__title">Exercises</h1>
21+
</div>
22+
<h3>First</h3>
23+
<ul class="countries countries--tall countries--first">
24+
<li class="country">1. Brazil</li>
25+
<li class="country">2. Croatia</li>
26+
<li class="country">3. Ethiopia</li>
27+
<li class="country">4. Laos</li>
28+
<li class="country">5. Uganda</li>
29+
</ul>
30+
<h3>Second</h3>
31+
<ul class="countries countries--tall countries--second">
32+
<li class="country">1. Brazil</li>
33+
<li class="country">2. Croatia</li>
34+
<li class="country">3. Ethiopia</li>
35+
<li class="country">4. Laos</li>
36+
<li class="country">5. Uganda</li>
37+
</ul>
38+
<h3>Third</h3>
39+
<ul class="countries countries--tall countries--third">
40+
<li class="country">1. Brazil</li>
41+
<li class="country">2. Croatia</li>
42+
<li class="country">3. Ethiopia</li>
43+
<li class="country">4. Laos</li>
44+
<li class="country">5. Uganda</li>
45+
</ul>
46+
<h3>Fourth</h3>
47+
<ul class="countries countries--tall countries--fourth">
48+
<li class="country">1. Brazil</li>
49+
<li class="country">2. Croatia</li>
50+
<li class="country">3. Ethiopia</li>
51+
<li class="country">4. Laos</li>
52+
<li class="country">5. Uganda</li>
53+
</ul>
54+
</div>
55+
<div class="site-wrapper site-wrapper">
56+
<div class="site-header">
57+
<h1 class="site-header__title">Solutions</h1>
58+
</div>
59+
<h3>First</h3>
60+
<img
61+
class="solution"
62+
src="../../exercise-specific-src/15-more-flexbox/solution1.png"
63+
/>
64+
<h3>Second</h3>
65+
<img
66+
class="solution"
67+
src="../../exercise-specific-src/15-more-flexbox/solution2.png"
68+
/>
69+
<h3>Third</h3>
70+
<img
71+
class="solution"
72+
src="../../exercise-specific-src/15-more-flexbox/solution3.png"
73+
/>
74+
<h3>Fourth</h3>
75+
<img
76+
class="solution"
77+
src="../../exercise-specific-src/15-more-flexbox/solution4.png"
78+
/>
3079
</div>
31-
</body>
80+
</body>
81+
3282
</html>

0 commit comments

Comments
 (0)