-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
73 lines (73 loc) · 2.75 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
<!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" />
<title>Weather App</title>
<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=Barlow+Condensed:wght@300&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/MyWeather/app/style.css" />
<script src="/MyWeather/js/app.js" defer></script>
</head>
<body>
<div class="card">
<div class="search">
<input
type="text"
placeholder="Search city"
class="search-bar"
autocomplete="off"
/>
<button>
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
height="2em"
width="2em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M505.04 442.66l-99.71-99.69c-4.5-4.5-10.6-7-17-7h-16.3c27.6-35.3 44-79.69 44-127.99C416.03 93.09 322.92 0 208.02 0S0 93.09 0 207.98s93.11 207.98 208.02 207.98c48.3 0 92.71-16.4 128.01-44v16.3c0 6.4 2.5 12.5 7 17l99.71 99.69c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.59.1-33.99zm-297.02-90.7c-79.54 0-144-64.34-144-143.98 0-79.53 64.35-143.98 144-143.98 79.54 0 144 64.34 144 143.98 0 79.53-64.35 143.98-144 143.98zm.02-239.96c-40.78 0-73.84 33.05-73.84 73.83 0 32.96 48.26 93.05 66.75 114.86a9.24 9.24 0 0 0 14.18 0c18.49-21.81 66.75-81.89 66.75-114.86 0-40.78-33.06-73.83-73.84-73.83zm0 96c-13.26 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z"
></path>
</svg>
</button>
</div>
<div class="loading">
<div class="weather">
<h1 class="city">Weather in Denver</h1>
</div>
<h1 class="temperature">51°C</h1>
<div class="date">Date: 2022-04-04</div>
<div class="time">Time: 00:00:00</div>
<div class="flex">
<img
src="https://openweathermap.org/img/wn/04d.png"
alt=""
class="icon"
/>
<div class="description">Cloudy</div>
</div>
<div class="particulars">
<div class="humidity">Humidity: 60%</div>
<div class="wind">Wind speed: 4.63 km/h</div>
</div>
</div>
</div>
<script src="/MyWeather/vanilla-tilt.min.js"></script>
<script>
VanillaTilt.init(document.querySelectorAll('.card'), {
max: 25,
speed: 400,
glare: true,
'max-glare': 1
})
</script>
</body>
</html>