-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (124 loc) · 6.62 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
<!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 or Not</title>
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body class="container">
<nav class="navbar bg-body-tertiary d-flex justify-content-between">
<div>
<a class="navbar-brand text-info" href="#">
<img src="./assets/images/sunset.png" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
Weather or Not
</a>
</div>
<div>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search for a city!" aria-label="Search">
<button class="btn btn-outline-info search-button" type="submit">Search</button>
</form>
</div>
</nav>
<div class="d-flex align-items-center">
<span class="col-6 border border-info container rounded">
<div>
<div class="d-flex justify-content-start align-items-center current-city-icon-div">
<h3 class="text-info current-city">City</h3>
<img height="24" class="current-icon"></img>
</div>
<h3 class="text-info current-date">Date</h3>
<p class="text-info current-temperature">Temperature</p>
<p class="text-info current-humidity">Humidity</p>
<p class="text-info current-wind-speed">Wind Speed</p>
</div>
</span>
<div class="col-1">
</div>
<ul class="list-group col-5">
<!-- <li class="list-group-item list-group-item-info"></li>
<li class="list-group-item list-group-item-info"></li>
<li class="list-group-item list-group-item-info"></li>
<li class="list-group-item list-group-item-info"></li>
<li class="list-group-item list-group-item-info"></li> -->
</ul>
</div>
<div class="forecast-h4-div">
<h4 class="text-info">5-Day Forecast</h4>
</div>
<div class="d-flex align-items-center justify-content-between five-day-container">
<span class="col-2 border border-info cotainer rounded list-group-item-info future-date-container">
<div class="container">
<div class="d-flex justify-content-start align items center future-date-icon-div">
<h5 class="text-info-emphasis future-date">Date</h5>
<i>icon</i>
</div>
<p class="text-info-emphasis">Temperature</p>
<p class="text-info-emphasis">Humidity</p>
<p class="text-info-emphasis">Wind Speed</p>
</div>
</span>
<span class="col-2 border border-info cotainer rounded list-group-item-info future-date-container">
<div class="container">
<div class="d-flex justify-content-start align items center future-date-icon-div">
<h5 class="text-info-emphasis future-date">Date</h5>
<i>icon</i>
</div>
<p class="text-info-emphasis">Temperature</p>
<p class="text-info-emphasis">Humidity</p>
<p class="text-info-emphasis">Wind Speed</p>
</div>
</span>
<span class="col-2 border border-info cotainer rounded list-group-item-info future-date-container">
<div class="container">
<div class="d-flex justify-content-start align items center future-date-icon-div">
<h5 class="text-info-emphasis future-date">Date</h5>
<i>icon</i>
</div>
<p class="text-info-emphasis">Temperature</p>
<p class="text-info-emphasis">Humidity</p>
<p class="text-info-emphasis">Wind Speed</p>
</div>
</span>
<span class="col-2 border border-info cotainer rounded list-group-item-info future-date-container">
<div class="container">
<div class="d-flex justify-content-start align items center future-date-icon-div">
<h5 class="text-info-emphasis future-date">Date</h5>
<i>icon</i>
</div>
<p class="text-info-emphasis">Temperature</p>
<p class="text-info-emphasis">Humidity</p>
<p class="text-info-emphasis">Wind Speed</p>
</div>
</span>
<span class="col-2 border border-info cotainer rounded list-group-item-info future-date-container">
<div class="container">
<div class="d-flex justify-content-start align items center future-date-icon-div">
<h5 class="text-info-emphasis future-date">Date</h5>
<i>icon</i>
</div>
<p class="text-info-emphasis">Temperature</p>
<p class="text-info-emphasis">Humidity</p>
<p class="text-info-emphasis">Wind Speed</p>
</div>
</span>
</div>
<footer class="container">
<p class="text-light">Credits</p>
<a href="https://www.flaticon.com/free-icons/sunrise" title="sunrise icons">Sunrise icons created by srip - Flaticon</a>
<a href="https://www.flaticon.com/free-icons/night" title="night icons">Night icons created by Freepik - Flaticon</a>
<a href="https://www.flaticon.com/free-icons/cloud-computing" title="cloud computing icons">Cloud computing icons created by Freepik - Flaticon</a>
<a href="https://www.flaticon.com/free-icons/fog" title="fog icons">Fog icons created by Pixel perfect - Flaticon</a>
<a href="https://www.flaticon.com/free-icons/rain" title="rain icons">Rain icons created by Freepik - Flaticon</a>
<a href="https://www.flaticon.com/free-icons/storm" title="storm icons">Storm icons created by Freepik - Flaticon</a>
<a href="https://www.flaticon.com/free-icons/snowflake" title="snowflake icons">Snowflake icons created by Good Ware - Flaticon</a>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script>dayjs().format()</script>
<script src="./assets/js/script.js"></script>
</body>
</html>