-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (134 loc) · 5 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Forecastly</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Boostrap 3 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Weather icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css">
<!-- Font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Font Import -->
<!-- <link href='http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600' rel='stylesheet'> -->
<link href="https://fonts.googleapis.com/css?family=Pacifico|Cookie|Lora" rel="stylesheet">
<!-- Custom style -->
<link rel="stylesheet" href="css/main.css">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Moment.JS script -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js'></script>
<!-- Custom script -->
<script type="text/javascript" src="js/main.js"></script>
</head>
<body class="weather">
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<h1> Forecastly </h1>
<div class="weather-body">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<div class="icon0"></div>
<!-- <div class="forecast0"></div> -->
</div>
<div class="col-md-6 temperature">
<span class="temp0"></span>
<div class="convertTemp">
<button type="button" id="temp-unit" class="btn btn-primary">C°</button>
<button type="button" id="temp-unit" class="btn btn-primary">F°</button>
</div>
</div>
<!-- <div class="forecast0"></div> -->
</div>
</div>
<div class="col-md-6 temperature">
<div>
<span class="day0"></span>,
<span class="time"></span>
</div>
<div>
<span class="date0"></span>
<span class="month"></span>,
<span class="year"></span>
</div>
<div class="location"></div>
<!-- <div class="country text-center"></div> -->
</div>
</div>
<div class="row today-summary">
<div class="col-md-12">
<div class="forecast0"></div>
</div>
</div>
<!-- End current day's forecast -->
<div class="row daily">
<!-- Start day1 forecast -->
<div class="col-md-2">
<div class="day1 text-uppercase text-center"></div><br/>
<div class="date1 text-center"></div>
<div class="temp1 text-center"></div>
<div class="icon1 text-center"></div>
<div class="forecast1 text-center"></div>
</div>
<!-- End day1 forecast -->
<!-- Start day2 forecast -->
<div class="col-md-2">
<div class="day2 text-uppercase text-center"></div><br/>
<div class="date2 text-center"></div>
<div class="temp2 text-center"></div>
<div class="icon2 text-center"></div>
<div class="forecast2 text-center"></div>
</div>
<!-- End day2 forecast -->
<!-- Start day3 forecast -->
<div class="col-md-2">
<div class="day3 text-uppercase text-center"></div><br/>
<div class="date3 text-center"></div>
<div class="temp3 text-center"></div>
<div class="icon3 text-center"></div>
<div class="forecast3 text-center"></div>
</div>
<!-- End day3 forecast -->
<!-- Start day4 forecast -->
<div class="col-md-2">
<div class="day4 text-uppercase text-center"></div><br/>
<div class="date4 text-center"></div>
<div class="temp4 text-center"></div>
<div class="icon4 text-center"></div>
<div class="forecast4 text-center"></div>
</div>
<!-- End day4 forecast -->
<!-- Start day5 forecast -->
<div class="col-md-2">
<div class="day5 text-uppercase text-center"></div><br/>
<div class="date5 text-center"></div>
<div class="temp5 text-center"></div>
<div class="icon5 text-center"></div>
<div class="forecast5 text-center"></div>
</div>
<!-- End day5 forecast -->
<!-- Start day6 forecast -->
<div class="col-md-2">
<div class="day6 text-uppercase text-center"></div><br/>
<div class="date6 text-center"></div>
<div class="temp6 text-center"></div>
<div class="icon6 text-center"></div>
<div class="forecast6 text-center"></div>
</div>
<!-- End day6 forecast -->
</div>
</div>
<p>Powered by <a href="https://darksky.net/">DarkSky</a></p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
</body>
</html>