-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (96 loc) · 3.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="This is where your description goes">
<meta name="keywords" content="one, two, three">
<title>Chicago Weather</title>
<!-- external CSS link -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="weatherBackground innerContainer">
<section>
<div class="mainGridBox">
<h1><span class="currentTemp">80</span>°</h1>
<p class="shortForecast">Partly Cloudy</p>
<div class="highRainBox">
<p class="rightBorder smallText">
High<br>
<span class="thin">
<span id="highTemp">80</span>°
</span>
</p>
<p class="leftBorder smallText">Rain<br>
<span class ='thin'>
<span id="chanceOfRain">40</span>%
</span>
</p>
</div>
<div class="weatherIcon"></div>
</div>
<img src="assets/layered-waves-haikei.webp" alt="" class="waves">
</section>
</div>
<section class="innerContainer">
<div class="textContent">
<h3 class="dateTime" id="currentDate">Thursday, September 5</h3>
<h4 class="dateTime thin" id="currentTime">4:00pm</h4>
<!--<p class="detailedForecast">Here is the long version of the daily forecast Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>-->
</div>
<div class="hourlyForecastGrid">
<div class="col">
<p class="smallText center" id="futureTime1">1pm</p>
<div class="smallIconContainer">
<img class="smallIcon"src="assets/sunny.png" alt="">
</div>
<p class="hourlyTemp center" id="futureTemp1">66°</p>
<p class="precip center">💧<span id="futureRain1">10</span>%</p>
</div>
<div class="col">
<p class="smallText center" id="futureTime2">1pm</p>
<div class="smallIconContainer">
<img class="smallIcon"src="assets/sunny.png" alt="">
</div>
<p class="hourlyTemp center" id="futureTemp2">66°</p>
<p class="precip center">💧<span id="futureRain2">10</span>%</p>
</div>
<div class="col">
<p class="smallText center" id="futureTime3">1pm</p>
<div class="smallIconContainer">
<img class="smallIcon"src="assets/sunny.png" alt="">
</div>
<p class="hourlyTemp center" id="futureTemp3">66°</p>
<p class="precip center">💧<span id="futureRain3">10</span>%</p>
</div>
<div class="col">
<p class="smallText center" id="futureTime4">1pm</p>
<div class="smallIconContainer">
<img class="smallIcon"src="assets/sunny.png" alt="">
</div>
<p class="hourlyTemp center" id="futureTemp4">66°</p>
<p class="precip center">💧<span id="futureRain4">10</span>%</p>
</div>
<div class="col">
<p class="smallText center" id="futureTime5">1pm</p>
<div class="smallIconContainer">
<img class="smallIcon"src="assets/sunny.png" alt="">
</div>
<p class="hourlyTemp center" id="futureTemp5">66°</p>
<p class="precip center">💧<span id="futureRain5">10</span>%</p>
</div>
</div>
</section>
<section class="innerContainer">
<div class="textContent orange">
<p class="bold">Top Story</p>
<p class="thin news" id="news"><a id="newsLink" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></p>
<a class="button" href="#">Refresh Page</a>
</div>
</section>
<script type="text/javascript" src="main.js"></script>
</body>
</html>