Skip to content

Commit 9320a48

Browse files
NateWrNateWr
committed
Add exercise for media queries
1 parent a09f08c commit 9320a48

File tree

5 files changed

+292
-1
lines changed

5 files changed

+292
-1
lines changed

‎css/week2.css

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
body {
2+
background: #25262f;
3+
}
4+
5+
.site-wrapper {
6+
padding: 2rem;
7+
max-width: 1200px;
8+
background: rgba(255,255,255,0.9);
9+
}
10+
11+
.site-header__title {
12+
margin: 0 0 2rem;
13+
padding-bottom: 1rem;
14+
border-bottom: 1px solid rgba(0,0,0,.5);
15+
font-weight: 300;
16+
font-size: 2rem;
17+
}
18+
19+
.countries {
20+
margin: 0;
21+
padding: 0;
22+
list-style: none;
23+
}
24+
25+
.country {
26+
display: block;
27+
padding: 1rem;
28+
background: #fff;
29+
border: 1px solid rgba(0,0,0,0.2);
30+
border-radius: 2px;
31+
}
32+
33+
.country + .country {
34+
margin-top: 0.5rem;
35+
}
36+
37+
@media (min-width: 1200px) {
38+
.site-wrapper {
39+
margin: 2rem auto;
40+
border-radius: 3px;
41+
}
42+
}

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"5": "live-server --open=week-1/5-css-selectors",
1414
"6": "live-server --open=week-1/6-css-properties",
1515
"7": "live-server --open=week-1/7-css-box",
16-
"8": "live-server --open=week-1/8-git-branch"
16+
"8": "live-server --open=week-1/8-git-branch",
17+
"9": "live-server --open=week-2/9-media-queries"
1718
}
1819
}

‎week-2/9-media-queries/columns.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/* Add your own CSS code below */
2+
@media (min-width: 992px) {
3+
.countries {
4+
columns: 3;
5+
}
6+
}

‎week-2/9-media-queries/index.html

+225
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>9. Media Queries - 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="/week-2/9-media-queries/columns.css">
10+
</head>
11+
12+
<body>
13+
<div class="site-wrapper">
14+
<div class="site-header">
15+
<h1 class="site-header__title">Countries</h1>
16+
</div>
17+
<ul class="countries">
18+
<li class="country">Afghanistan</li>
19+
<li class="country">Albania</li>
20+
<li class="country">Algeria</li>
21+
<li class="country">Andorra</li>
22+
<li class="country">Angola</li>
23+
<li class="country">Antigua and Barbuda</li>
24+
<li class="country">Argentina</li>
25+
<li class="country">Armenia</li>
26+
<li class="country">Aruba</li>
27+
<li class="country">Australia</li>
28+
<li class="country">Austria</li>
29+
<li class="country">Azerbaijan</li>
30+
<li class="country">The Bahamas</li>
31+
<li class="country">Bahrain</li>
32+
<li class="country">Bangladesh</li>
33+
<li class="country">Barbados</li>
34+
<li class="country">Belarus</li>
35+
<li class="country">Belgium</li>
36+
<li class="country">Belize</li>
37+
<li class="country">Benin</li>
38+
<li class="country">Bermuda</li>
39+
<li class="country">Bhutan</li>
40+
<li class="country">Bolivia</li>
41+
<li class="country">Bosnia and Herzegovina</li>
42+
<li class="country">Botswana</li>
43+
<li class="country">Brazil</li>
44+
<li class="country">Brunei</li>
45+
<li class="country">Bulgaria</li>
46+
<li class="country">Burkina Faso (formerly Upper Volta)</li>
47+
<li class="country">Burundi</li>
48+
<li class="country">Cambodia</li>
49+
<li class="country">Cameroon</li>
50+
<li class="country">Canada</li>
51+
<li class="country">Cape Verde</li>
52+
<li class="country">Central African Republic</li>
53+
<li class="country">Chad</li>
54+
<li class="country">Chile</li>
55+
<li class="country">People's Republic of China</li>
56+
<li class="country">Republic of China (Taiwan)</li>
57+
<li class="country">Cook Islands</li>
58+
<li class="country">Colombia</li>
59+
<li class="country">Comoros</li>
60+
<li class="country">Democratic Republic of the Congo (formerly Zaire)</li>
61+
<li class="country">Republic of the Congo</li>
62+
<li class="country">Costa Rica</li>
63+
<li class="country">Côte d'Ivoire</li>
64+
<li class="country">Croatia</li>
65+
<li class="country">Cuba</li>
66+
<li class="country">Republic of Cyprus</li>
67+
<li class="country">Czech Republic</li>
68+
<li class="country">Denmark</li>
69+
<li class="country">Djibouti</li>
70+
<li class="country">Dominica</li>
71+
<li class="country">Dominican Republic</li>
72+
<li class="country">Democratic Republic of Congo</li>
73+
<li class="country">East Timor</li>
74+
<li class="country">Ecuador</li>
75+
<li class="country">Egypt</li>
76+
<li class="country">El Salvador</li>
77+
<li class="country">Equatorial Guinea</li>
78+
<li class="country">Eritrea</li>
79+
<li class="country">Estonia</li>
80+
<li class="country">Ethiopia</li>
81+
<li class="country">Fiji</li>
82+
<li class="country">Finland</li>
83+
<li class="country">France</li>
84+
<li class="country">Gabon</li>
85+
<li class="country">The Gambia</li>
86+
<li class="country">Georgia</li>
87+
<li class="country">Germany</li>
88+
<li class="country">Ghana</li>
89+
<li class="country">Greece</li>
90+
<li class="country">Grenada</li>
91+
<li class="country">Guatemala</li>
92+
<li class="country">Guinea</li>
93+
<li class="country">Guinea-Bissau</li>
94+
<li class="country">Guyana</li>
95+
<li class="country">Haiti</li>
96+
<li class="country">Holy See (see Vatican City)</li>
97+
<li class="country">Honduras</li>
98+
<li class="country">Hungary</li>
99+
<li class="country">Iceland</li>
100+
<li class="country">India</li>
101+
<li class="country">Indonesia</li>
102+
<li class="country">Iran</li>
103+
<li class="country">Iraq</li>
104+
<li class="country">Ireland</li>
105+
<li class="country">Israel</li>
106+
<li class="country">Italy</li>
107+
<li class="country">Ivory Coast (see Côte d'Ivoire)</li>
108+
<li class="country">Jamaica</li>
109+
<li class="country">Japan</li>
110+
<li class="country">Jordan</li>
111+
<li class="country">Kazakhstan</li>
112+
<li class="country">Kenya</li>
113+
<li class="country">Kiribati</li>
114+
<li class="country">Kuwait</li>
115+
<li class="country">Kyrgyzstan</li>
116+
<li class="country">Laos</li>
117+
<li class="country">Latvia</li>
118+
<li class="country">Lebanon</li>
119+
<li class="country">Lesotho</li>
120+
<li class="country">Liberia</li>
121+
<li class="country">Libya</li>
122+
<li class="country">Liechtenstein</li>
123+
<li class="country">Lithuania</li>
124+
<li class="country">Luxembourg</li>
125+
<li class="country">Republic of Macedonia</li>
126+
<li class="country">Madagascar</li>
127+
<li class="country">Malawi</li>
128+
<li class="country">Malaysia</li>
129+
<li class="country">Maldives</li>
130+
<li class="country">Mali</li>
131+
<li class="country">Malta</li>
132+
<li class="country">Marshall Islands</li>
133+
<li class="country">Mauritania</li>
134+
<li class="country">Mauritius</li>
135+
<li class="country">Mexico</li>
136+
<li class="country">Federated States of Micronesia</li>
137+
<li class="country">Moldova</li>
138+
<li class="country">Monaco</li>
139+
<li class="country">Mongolia</li>
140+
<li class="country">Montenegro</li>
141+
<li class="country">Morocco</li>
142+
<li class="country">Mozambique</li>
143+
<li class="country">Myanmar (formerly Burma)</li>
144+
<li class="country">Namibia</li>
145+
<li class="country">Nauru</li>
146+
<li class="country">Nepal</li>
147+
<li class="country">Netherlands</li>
148+
<li class="country">New Zealand (Aotearoa)</li>
149+
<li class="country">Nicaragua</li>
150+
<li class="country">Niger</li>
151+
<li class="country">Nigeria</li>
152+
<li class="country">Niue</li>
153+
<li class="country">North Korea</li>
154+
<li class="country">Norway</li>
155+
<li class="country">Oman</li>
156+
<li class="country">Pakistan</li>
157+
<li class="country">Palau</li>
158+
<li class="country">Panama</li>
159+
<li class="country">Papua New Guinea</li>
160+
<li class="country">Paraguay</li>
161+
<li class="country">Peru</li>
162+
<li class="country">Philippines</li>
163+
<li class="country">Poland</li>
164+
<li class="country">Portugal</li>
165+
<li class="country">Qatar</li>
166+
<li class="country">Romania</li>
167+
<li class="country">Russia</li>
168+
<li class="country">Rwanda</li>
169+
<li class="country">Saint Kitts and Nevis</li>
170+
<li class="country">Saint Lucia</li>
171+
<li class="country">Saint Vincent and the Grenadines</li>
172+
<li class="country">Samoa</li>
173+
<li class="country">San Marino</li>
174+
<li class="country">São Tomé and Príncipe</li>
175+
<li class="country">Saudi Arabia</li>
176+
<li class="country">Senegal</li>
177+
<li class="country">Serbia</li>
178+
<li class="country">Seychelles</li>
179+
<li class="country">Sierra Leone</li>
180+
<li class="country">Singapore</li>
181+
<li class="country">Slovakia</li>
182+
<li class="country">Slovenia</li>
183+
<li class="country">Solomon Islands</li>
184+
<li class="country">Somalia</li>
185+
<li class="country">South Africa</li>
186+
<li class="country">South Korea</li>
187+
<li class="country">South Sudan</li>
188+
<li class="country">Spain</li>
189+
<li class="country">Sri Lanka</li>
190+
<li class="country">Sudan</li>
191+
<li class="country">Suriname</li>
192+
<li class="country">Swaziland</li>
193+
<li class="country">Sweden</li>
194+
<li class="country">Switzerland</li>
195+
<li class="country">Syria</li>
196+
<li class="country">Taiwan (see Republic of China)</li>
197+
<li class="country">Tajikistan</li>
198+
<li class="country">Tanzania</li>
199+
<li class="country">Thailand</li>
200+
<li class="country">Togo</li>
201+
<li class="country">Tonga</li>
202+
<li class="country">Trinidad and Tobago</li>
203+
<li class="country">Tunisia</li>
204+
<li class="country">Turkey</li>
205+
<li class="country">Turkmenistan</li>
206+
<li class="country">Tuvalu</li>
207+
<li class="country">Uganda</li>
208+
<li class="country">Ukraine</li>
209+
<li class="country">United Arab Emirates</li>
210+
<li class="country">United Kingdom</li>
211+
<li class="country">United States</li>
212+
<li class="country">Uruguay</li>
213+
<li class="country">Uzbekistan</li>
214+
<li class="country">Vanuatu</li>
215+
<li class="country">Vatican City (Holy See)</li>
216+
<li class="country">Venezuela</li>
217+
<li class="country">Vietnam</li>
218+
<li class="country">Yemen</li>
219+
<li class="country">Zambia</li>
220+
<li class="country">Zimbabwe</li>
221+
</ul>
222+
</div>
223+
</body>
224+
225+
</html>

‎week-2/9-media-queries/readme.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Media Queries
2+
3+
Media queries help us change how the webpage looks depending on the size of the screen. The list of countries is very long in this example. Use media queries to show the list in multiple columns when the screen is wide enough.
4+
5+
In this exercise, the following CSS will put the countries into two columns:
6+
7+
```
8+
.countries {
9+
columns: 2;
10+
}
11+
```
12+
13+
Follow the steps below to complete this exercise.
14+
15+
1. Open `columns.css` and write a media query so that the countries are in two columns when the screen is wider than `768px`.
16+
2. Write another media query so that the countries are in three columns when the screen is wider than `1200px`.
17+
3. Change the size of your browser window to see how it reacts to different widths.

0 commit comments

Comments
 (0)