-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (164 loc) · 8.99 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="shortcut icon"
href="imgs/favicon-16x16.png"
type="image/x-icon"
/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="font/bootstrap-icons.min.css" />
<link rel="stylesheet" href="css/all.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<title>Weather App</title>
</head>
<body>
<nav
class="navbar bg-dark border-bottom border-body navbar-expand-lg"
data-bs-theme="dark"
>
<div class="container">
<div class="logo d-flex justify-content-center align-items-center">
<div class="logo-img d-flex justify-content-end align-items-start">
<a class="navbar-brand d-flex justify-content-end align-items-center" href="#"
><img src="imgs/[email protected]" class="w-50" alt=""
/></a>
</div>
<div class="logo-text d-flex flex-column justify-content-end mt-4">
<h1 class="pb-0 mb-0"><a class="navbar-brand fs-6 fw-bold pb-0 mb-0 d-block" href="#">Weather</a></h1>
<p class="pt-0 mt-0 pb-0"><a class="navbar-brand pt-0 fw-light mt-0 d-block" href="#">tagline goes here</a></p>
</div>
</div>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active me-3" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item me-3">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item me-3">
<a class="nav-link " href="#">Live cameras</a>
</li>
<li class="nav-item me-3">
<a class="nav-link " href="#">Photos</a>
</li>
<li class="nav-item me-3">
<a class="nav-link " href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="">
<div class="container">
<div class="inputs position-relative mb-5">
<input type="search" class="form-control bg-dark border border-dark rounded-pill mt-5" id="searchInput" placeholder="Find your location....">
<button class="btn btn-primary position-absolute rounded-pill">Find</button>
</div>
</div>
</header>
<section class="bg-Black-Russian ">
<div class="container">
<div class="row gx-0">
<div class="col-md-4">
<div class="item">
<div class="date d-flex justify-content-between black-rock-bg py-2 px-3 rounded-start-top">
<div class="day-name text-Alto" id="dayName">Friday</div>
<div class="day-date text-Alto" id="dateName">18August</div>
</div>
<div class="item-data bg-Revolver py-2 px-3 rounded-start-bottom">
<div class="country text-Alto mt-2" id="countryName">Koria</div>
<div class="degree-img mt-2">
<div class="degree text-white display-1 fw-bolder"><span id="dayDegree">36.1</span><sup>o</sup>C</div>
<img src="imgs/113.webp" alt="" id="dayImgIndication">
</div>
<div class="degree-text-indication text-Pacific-Blue mt-2" id="dayTextIndication">Sunny</div>
<div class="extra-data d-flex justify-content-between align-items-center text-Alto">
<div class="umbrella"><i class="fa-solid fa-umbrella"></i><span id="dayUmbrella">20%</span></div>
<div class="wind"><i class="fa-solid fa-wind"></i><span id="dayWind">18km/h</span></div>
<div class="compass"><i class="fa-solid fa-compass"></i><span id="dayCompass">East</span> </div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="item">
<div class="date d-flex justify-content-between black-rock-bg py-2 px-3 bg-Black-Russian">
<div class="day-name text-Alto" id="dayTomorrowName">Friday</div>
<div class="day-date text-Alto" id="dateTomorrowName">18August</div>
</div>
<div class="item-data bg-Midnight-Express py-2 px-3">
<div class="img-indication mt-3 text-center" id=""><img src="imgs/113.webp" alt="" id="dayTomorrowImgIndication"></div>
<div class="degree mt-3">
<div class="degree-max text-white fs-4 fw-bolder text-center"><span id="dayTomorrowMaxDegree">36.1</span><sup>o</sup>C</div>
<div class="degree-min text-Alto fs-6 fw-medium text-center"><span id="dayTomorrowMinDegree">36.1</span><sup>o</sup>C</div>
</div>
<div class="degree-text-indication text-Pacific-Blue mt-3 text-center" id="dayTomorrowTextIndication">Sunny</div>
<div class="extra-data d-flex justify-content-between align-items-center mt-5 text-Alto">
<div class="umbrella"><i class="fa-solid fa-umbrella"></i><span id="dayTomorrowUmbrella">20%</span></div>
<div class="wind"><i class="fa-solid fa-wind"></i><span id="dayTomorrowWind"> 18km/h</span></div>
<div class="compass"><i class="fa-solid fa-compass"></i><span id="dayTomorrowCompass"> East</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="item">
<div class="date d-flex justify-content-between black-rock-bg py-2 px-3 rounded-end-top">
<div class="day-name text-Alto" id="dayAfterTomorrowName">Friday</div>
<div class="day-date text-Alto" id="dateAfterTomorrowName">18August</div>
</div>
<div class="item-data bg-Revolver py-2 px-3 rounded-end-bottom">
<div class="img-indication mt-3 text-center" id=""><img src="imgs/113.webp" alt="" id="dayAfterTomorrowImgIndication"></div>
<div class="degree mt-3">
<div class="degree-max text-white fs-4 fw-bolder text-center"><span id="dayAfterTomorrowMaxDegree">36.1</span><sup>o</sup>C</div>
<div class="degree-min text-Alto fs-6 fw-medium text-center"><span id="dayAfterTomorrowMinDegree">36.1</span><sup>o</sup>C</div>
</div>
<div class="degree-text-indication text-Pacific-Blue mt-3 text-center" id="dayAfterTomorrowTextIndication">Sunny</div>
<div class="extra-data d-flex justify-content-between align-items-center mt-5 text-Alto">
<div class="umbrella"><i class="fa-solid fa-umbrella"></i><span id="dayAfterTomorrowUmbrella">20%</span></div>
<div class="wind"><i class="fa-solid fa-wind"></i><span id="dayAfterTomorrowWind"> 18km/h</span></div>
<div class="compass"><i class="fa-solid fa-compass"></i><span id="dayAfterTomorrowCompass"> East</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-Midnight-Express">
<div class="container">
<div class="subscribe-media-links d-flex justify-content-between align-items-center">
<div class="inputs position-relative mb-5 w-75">
<input type="search" class="form-control bg-dark border border-dark rounded-pill" id="searchInput" placeholder="Enter your email to Subscribe">
<button class="btn btn-primary position-absolute rounded-pill">Subscribe</button>
</div>
<div class="media-links d-flex gap-2">
<div class="media-link d-flex justify-content-center align-items-center"><a href=""><i class="fa-brands fa-facebook-f"></i></a></div>
<div class="media-link d-flex justify-content-center align-items-center"><a href=""><i class="fa-brands fa-twitter"></i></a></div>
<div class="media-link d-flex justify-content-center align-items-center"><a href=""><i class="fa-brands fa-google-plus-g"></i></a></div>
<div class="media-link d-flex justify-content-center align-items-center"><a href=""><i class="fa-brands fa-pinterest"></i></a></div>
</div>
</div>
<p class="text-Link-Water">Copyright 2014 Company name. Designed by Themezy. All rights reserved</p>
</div>
</footer>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>