-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
63 lines (56 loc) · 3.41 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
<!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,shrink-to-fit=no">
<!-- viewport is the space mtb jitne hisse mai hamari website jho hai ekk screen ke andar dikh rahi hotti hai either the screen can be of mobile or computer-->
<!-- width=device-width is used for automatically fiting all the text in the screen either the screen of laptop or phone or any device-->
<!-- initial-scale=1.0 is used for setting the value for zoom in or zoom out , -->
<!-- shrink-to-fit=no , if we are creating a very big site and that srite is not responsive than when we will open that site in phone than the font of that site will get shrink so for not
shrinking we use this -->
<title>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- When you only need to include Bootstrap’s compiled CSS or JS, you can use jsDelivr. -->
<!-- Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. -->
<!-- What is compiled Bootstrap?
Bootstrap uses LESS files to generate CSS files. The pre-compiled version contains the output from LESS. If you want to modify Bootstrap you'll
need the source and then compile the LESS files into CSS. -->
<!-- https://www.youtube.com/watch?v=ZPA9zl-QPmY -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- The .container class provides a responsive fixed width container
Resize the browser window to see that its width (max-width) will change at different breakpoints -->
<div class="row">
<!-- In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. -->
<form>
<h3 class="alert text-center text-light white-color">Weather</h3>
<div class="mb-3">
<select name="countrylist" id="countrylist" class="form-select">
<!-- Select is a form control that, after a click displays a collapsable list of multiple values which can be used in forms, menus or surveys -->
</select>
</div>
<div class="mb-3">
<select name="statelist" id="statelist" class="form-select" disabled>
<option value="">Select State</option>
</select>
</div>
<div class="mb-3">
<select name="citylist" id="citylist" class="form-select" disabled>
<option value="">Select City</option>
</select>
</div>
</form>
<div class="d-flex justify-content-center" id="weatherwidget">
</div>
<!-- Use d-flex class to enable flexbox in bootstrap and aligns the items to the desired position. -->
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>