-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (110 loc) · 5.4 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<!--Description.👇-->
<meta content="WeatherSense, a simple weather app which shows you the real time weather data."
property="og:description">
<!--Icon.👇-->
<link href="https://icons-for-free.com/iconfiles/png/512/fog+foggy+weather+icon-1320196634851598977.png"
rel="icon" type="image/x-icon">
<!--JQuery.👇-->
<script crossorigin="anonymous"
integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE="
src="https://code.jquery.com/jquery-3.7.0.slim.min.js"></script>
<title>WeatherSense - by Damian.</title>
<!--BootStrap 5 - CSS.👇 -->
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" rel="stylesheet">
<!--CSS.👇-->
<link href="css/minifiedcss.css" rel="stylesheet">
<!--Fonts - Tilt Warp.👇-->
<!--AOS.👇-->
<link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap" rel="stylesheet">
<!--Animations - https://animate.style👇-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<!--Normalize CSS.👇-->
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
referrerpolicy="no-referrer" rel="stylesheet"/>
<!--FontAwesome.👇-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 class="commonText mainText animate__animated animate__jello">Welcome to <div id="ws">WeatherSense.</div> Your
ultimate weather companion.</h1>
<div class="textFieldContainer" >
<form class="form-floating " id="textField">
<input class="form-control animate__animated animate__jackInTheBox" id="tf" placeholder="Moratuwa."
type="text">
<label class="commonText" for="tf" id="textFieldLabel">📌 What's your city ?</label>
</form>
</div>
<div class="weatherContainer" data-aos="zoom-in">
<div class="weatherCard" data-aos="zoom-in">
<div id="cityName" class="commonText"></div><br><br>
<div class="weatherDetails"></div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Footer -->
<div class="myFooter" data-aos="zoom-in">
<footer class="bg-dark text-center text-white">
<!-- Grid container -->
<div class="container p-4 pb-0">
<!-- Section: Social media -->
<section class="mb-4" data-aos="zoom-in">
<!-- Github -->
<a class="btn btn-outline-light btn-floating m-1" href="https://github.com/DamianRavinduPeiris" target=_blank role="button"
><i class="fa fa-github"></i
></a>
<a class="btn btn-outline-light btn-floating m-1" href="https://stackoverflow.com/users/19215399/damian-peiris" target=_blank role="button"
><i class="fa fa-stack-overflow"></i
></a>
<!-- LinkedIn. -->
<a class="btn btn-outline-light btn-floating m-1" href="https://www.linkedin.com/in/damianpeiris/" target=_blank role="button"
><i class="fa fa-linkedin"></i
></a>
<!-- Instagram -->
<a class="btn btn-outline-light btn-floating m-1" href="https://instagram.com/damian.peiris" role="button"
><i class="fa fa-instagram"></i
></a>
<!-- Twitter -->
<a class="btn btn-outline-light btn-floating m-1" href="https://twitter.com/damianlka" target=_blank role="button"
><i class="fa fa-twitter"></i
></a>
</section>
<!-- Section: Social media -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div data-aos="zoom-in" class="text-center p-3 commonText" style="background-color: rgba(0, 0, 0, 0.2);">
Made with 💖by Damian.<br> <br>
Damian Peiris. © 2023 All Rights Reserved.
</div>
<!-- Copyright -->
</footer>
</div>
<!--Sweet Alert.👇-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="js/minified.js"></script>
<!--AOS.👇-->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<!--BootStrap 5 - JS.👇 -->
<script crossorigin="anonymous"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>