-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweatherApi.html
137 lines (119 loc) · 6.21 KB
/
weatherApi.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<title>Unit </title>
</head>
<body>
<header>
<div class="container-fluid text-center py-5 ">
<div class="section__text">
<h1 style="font-size: 7rem">Hello</h1>
<h2>Weather API</h2>
</div>
<div class="row mx-5">
<div class="col-md-6 ">
<div class="form-group font-weight-bold">
<label>Выберите город</label>
<select class="form-control selectMenu mx-auto " id="select " style='max-width:40rem'>
<option>London</option>
<option>Moscow</option>
<option>Voronezh</option>
<option>Washington</option>
<option>Minsk</option>
<option>Vladivostok</option>
<option>Mehiko</option>
<option>Sydney</option>
<option>Goa</option>
<option>Havana</option>
</select>
</div>
<button type="button" class="btn btn1 btn-warning">Выбрать</button>
</div>
<div class="col-md-6">
<form>
<div class="form-group mx-auto text-center font-weight-bold" style='max-width:40rem'>
<label>Укажите город</label>
<input class="form-control inputMenu" placeholder="Moscow ">
</div>
</form>
<button type="button" class="btn btn2 btn-warning">Готово</button>
</div>
</div>
</header>
<div class="section__cards ">
<div class="container py-5 ">
<div class="row d-flex justify-content-around align-items-center ">
<div class="card border-warning rounded " style="width: 18rem; ">
<div class=" card-body text-center ">
<div class="card-img "></div>
<h5 class="card-title city-name ">City</h5>
<p class="card-text ">Temperature</p>
<div class="row ">
<div class="col-md-6 ">Min Temp
<p class="minTemp my-1 font-weight-bold ">Temperature</p>
</div>
<div class="col-md-6 ">Max Temp
<p class="maxTemp my-1 font-weight-bold ">Temperature</p>
</div>
</div>
</div>
<ul class="list-group list-group-flush text-center ">
<li class="list-group-item weather ">Облачность</li>
<li class="list-group-item windSpeed ">wind</li>
</ul>
<button type="button " class="btn btn-warning ">More</button>
</div>
<div class="card border-warning rounded " style="width: 18rem; ">
<div class=" card-body text-center ">
<div class="card-img "></div>
<h5 class="card-title city-name ">City</h5>
<p class="card-text ">Temperature</p>
<div class="row ">
<div class="col-md-6 ">Min Temp
<p class="minTemp my-1 font-weight-bold ">Temperature</p>
</div>
<div class="col-md-6 ">Max Temp
<p class="maxTemp my-1 font-weight-bold ">Temperature</p>
</div>
</div>
</div>
<ul class="list-group list-group-flush text-center ">
<li class="list-group-item weather ">Облачность</li>
<li class="list-group-item windSpeed ">wind</li>
</ul>
<button type="button " class="btn btn-warning ">More</button>
</div>
<div class="card border-warning rounded " style="width: 18rem; ">
<div class=" card-body text-center ">
<div class="card-img "></div>
<h5 class="card-title city-name ">City</h5>
<p class="card-text ">Temperature</p>
<div class="row ">
<div class="col-md-6 ">Min Temp
<p class="minTemp my-1 font-weight-bold ">Temperature</p>
</div>
<div class="col-md-6 ">Max Temp
<p class="maxTemp my-1 font-weight-bold ">Temperature</p>
</div>
</div>
</div>
<ul class="list-group list-group-flush text-center ">
<li class="list-group-item weather ">Облачность</li>
<li class="list-group-item windSpeed ">wind</li>
</ul>
<button type="button " class="btn btn-warning ">More</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>