-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (122 loc) · 6.08 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap"
rel="stylesheet"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">
<script defer src="script.js"></script>
<title>Where in the world?</title>
</head>
<body>
<header>
<div id="hidden-focus" tabindex="-1" class="visually-hidden"></div>
<a href="/" class="title" aria-label="App Home">
<h1 >Where in the world?</h1>
</a>
<div class="theme__switcher">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="moon">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="moon__solid hide">
<path fillRule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clipRule="evenodd" />
</svg>
<button id="change__theme">Dark Mode</button></div>
</header>
<main class="main">
<div class="search__optionsBox">
<div class="search__container">
<!-- <label for="search-country">Search Country</label> -->
<!-- <span class="material-symbols-outlined">search</span> -->
<svg class="search-icon" viewBox="0 0 24 24">
<path d="M10 2C5.58 2 2 5.58 2 10s3.58 8 8 8c1.65 0 3.17-0.5 4.42-1.34l4.75 4.75c0.39 0.39 1.02 0.39 1.41 0s0.39-1.02 0-1.41l-4.75-4.75C17.5 13.17 18 11.65 18 10c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"></path>
</svg>
<input
type="search"
class="search__input"
id="search-country"
placeholder="Search for a country..."
/>
</div>
<button class="back__btn hide">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288 480 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-370.7 0 73.4-73.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-128 128z"
/>
</svg>
<span>Back</span>
</button>
<!-- Choose by region dropdown list -->
<div class="dropdown">
<button class="filter__btn">
Filter by Region
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="chevron-down w-6 h-6"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
<div id="filter__dropdown" class="dropdown__content">
<!-- <a href="#" data-value="All">All</a> -->
<a href="#" class="option" data-value="Africa">Africa</a>
<a href="#" class="option" data-value="Americas">America</a>
<a href="#" class="option" data-value="Asia">Asia</a>
<a href="#" class="option" data-value="Europe">Europe</a>
<a href="#" class="option" data-value="Oceania">Oceania</a>
</div>
</div>
</div>
<div class="container">
<!-- Content Loader -->
<template id="card-template">
<div class="country placeholder">
<div class="img__container"><img class="country__img lazy skeleton" src="images/default.png"/></div>
<div class="country__data">
<div class="skeleton skeleton-text skeleton__title"></div>
<div class="skeleton skeleton-text skeleton-text__body"></div>
<div class="skeleton skeleton-text skeleton-text__body"></div>
<div class="skeleton skeleton-text skeleton-text__body"></div>
</div>
</div>
</template>
<!-- Content Loader -->
<!-- <div class="country" data-name="Angola">
<div class="img__container"><img class="country__img lazy" src="https://flagcdn.com/w320/ao.png" alt="The flag of Angola features two equal horizontal bands of red and black, with a yellow emblem at its centre. This emblem consists of a five-pointed star within the hoist-side facing half of a cogwheel that is crossed on its lower end by a machete."> </div>
<div class="country__data">
<h3 class="country__name">Angola</h3>
<p class="country__population"><span>Population</span>: 32,866,268</p>
<p class="country__region"><span>Region:</span> Africa</p>
<p class="country__capital"><span>Capital:</span> Luanda</p>
</div>
</div> -->
</div>
</main>
<footer>
<p>Challenge by Frontend Mentor.<a
class="footer__link"
href="https://www.linkedin.com/in/cristina-secu"
target="_blank"
> Coded by Cristina Secu</a </p>
</footer>
</body>
</html>