-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
154 lines (141 loc) · 7.69 KB
/
index.html
File metadata and controls
154 lines (141 loc) · 7.69 KB
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
<!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="Favicon_Clock.png" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="style.css">
<title>World Clock</title>
</head>
<body>
<header class="p-3 mb-3 border-bottom bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <a
href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
<use xlink:href="#bootstrap"></use>
</svg> </a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 link-secondary text-light">Welcome to World Clock</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search"></form>
<div class="dropdown text-end"> <a href="#"
class="d-block link-body-emphasis text-decoration-none dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false"> <img src="user.png" alt="profile" width="32"
height="32" class="rounded-circle"> </a>
<ul class="dropdown-menu text-small">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
</header>
<div class="container my-4">
<main>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">India <i class="bi bi-clock-fill"></i></h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title" id="india"></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Accurate real-time clock</li>
<li>Multiple cities tracking</li>
<li>12/24 hour format support</li>
<li>Next daylight saving change</li>
</ul>
<a class="w-100 btn btn-lg btn-outline-primary"
href="https://www.timeanddate.com/time/zone/india" target="_blank" role="button">Learn
More About This Zone</a>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">United States <i class="bi bi-clock-fill"></i></h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title" id="usa"></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Current local time</li>
<li>Time zone information</li>
<li>Daylight Saving status</li>
<li>UTC time difference</li>
</ul>
<a class="w-100 btn btn-lg btn-outline-primary"
href="https://www.timeanddate.com/time/zone/usa" target="_blank" role="button">Learn
More About This Zone</a>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Australia <i class="bi bi-clock-fill"></i></h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title" id="australia"></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Global time comparison</li>
<li>Automatic time updates</li>
<li>Time zone converter</li>
<li>Customizable alerts and reminders</li>
</ul>
<a class="w-100 btn btn-lg btn-outline-primary"
href="https://www.timeanddate.com/time/zone/australia" target="_blank"
role="button">Learn More About This Zone</a>
</div>
</div>
</div>
</div>
<!-- SEARCH & TIME PICKER SIDE BY SIDE ROW -->
<div class="row justify-content-center mt-4">
<!-- SEARCH CITY CARD -->
<div class="col-md-6 col-lg-5">
<div class="card shadow-sm card-tall">
<div class="card-header bg-light">
<input type="text" class="form-control" placeholder="Search City here..." id="cityname">
</div>
<div class="card-body d-flex justify-content-center align-items-center">
<p class="card-text text-center" id="time">
Please enter your city to show the time
</p>
</div>
<div class="card-footer bg-transparent">
<button class="btn btn-primary w-100" id="btn">Search</button>
</div>
</div>
</div>
<!-- SIMPLE HTML TIME PICKER CARD -->
<div class="col-md-6 col-lg-5">
<div class="card shadow-sm">
<div class="card-header bg-light">
<h6 class="m-0">Select Time To Set Alarm (India)</h6>
</div>
<div class="card-body">
<label class="form-label">Choose Time:</label>
<input type="time" class="form-control" id="alarm">
</div>
</div>
</div>
</div>
</main>
</div>
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>