-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (62 loc) · 4.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="darkTheme.css">
<link rel="stylesheet" href="fontawesome-free-6.1.2-web/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Nunito+Sans:wght@200;300;400&family=Open+Sans:wght@300&family=Roboto:wght@300;400;500;700&family=Square+Peg&display=swap" rel="stylesheet">
<title>Frontend Mentor - REST Countries API with color theme switcher</title>
</head>
<body>
<header>
<div class="menu">
<h1 id="title">Where in the world?</h1>
<a id="dark" href="#"><svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M421.6 379.9c-.6641 0-1.35 .0625-2.049 .1953c-11.24 2.143-22.37 3.17-33.32 3.17c-94.81 0-174.1-77.14-174.1-175.5c0-63.19 33.79-121.3 88.73-152.6c8.467-4.812 6.339-17.66-3.279-19.44c-11.2-2.078-29.53-3.746-40.9-3.746C132.3 31.1 32 132.2 32 256c0 123.6 100.1 224 223.8 224c69.04 0 132.1-31.45 173.8-82.93C435.3 389.1 429.1 379.9 421.6 379.9zM255.8 432C158.9 432 80 353 80 256c0-76.32 48.77-141.4 116.7-165.8C175.2 125 163.2 165.6 163.2 207.8c0 99.44 65.13 183.9 154.9 212.8C298.5 428.1 277.4 432 255.8 432z"/></svg>Dark Mode</a>
</div>
</header>
<section id="page-all-flags">
<div class="search">
<label for="search"><svg class="search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
<input type="search" name="search" id="search" placeholder="Cerca una nazione..."> </input>
</label>
<select name="country" id="select">
<option value="All" >All</option>
<option value="Africa">Africa</option>
<option value="America">America</option>
<option value="Asia">Asia</option>
<option value="Europe">Europa</option>
<option value="Oceania">Oceania</option>
</select>
</div>
<div class="country-grid" id="gridCountry">
</div>
</section>
<!--PAGINA DETTAGLI BANDIERE-->
<div class="container" id="page-dettagli">
<div class="button">
<button id="back"><i class="fa-solid fa-arrow-left-long"></i>Back</button>
</div>
<div class="contenitore-dettagli" id="contenitore">
<img src="germany.png" alt="image-not-found">
<div class="dettagli">
<h1>Germany</h1>
<div class="griglia-dettagli">
<p class="Name"><strong>Native Name:</strong></p>
<p class="Domain"><strong>Top Level Domain:</strong>---</p>
<p class="Popolazione"><strong>Population:</strong>---</p>
<p class="Moneta"><strong>Currencies:</strong>---</p>
<p class="Regione"><strong>Region:</strong>---</p>
<p class="Language"><strong>Language:</strong>---</p>
<p class="Sub"><strong>Sub Region:</strong>---</p>
<p class="Capitale"><strong>Capital:</strong>---</p>
</div>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>