-
Notifications
You must be signed in to change notification settings - Fork 1
/
franklin-8.html
152 lines (148 loc) · 8.4 KB
/
franklin-8.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Franklin Weather</title>
<meta name="description" content="Franklin has weather, hear it here first!">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/weather-7.css">
<link rel="stylesheet" href="css/large.css">
<link rel="stylesheet" href="css/medium.css">
<link rel="stylesheet" href="css/small.css">
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet">
<script src="js/navBar.js"></script>
</head>
<body>
<picture class="backImg">
<source media="(min-width:2201px)" srcset="images/franklin-original.jpg">
<source media="(max-width:2200px) and (min-width:1801px)" srcset="images/franklin-large.jpg">
<source media="(max-width:1800px) and (min-width:901px)" srcset="images/franklin-medium.jpg">
<source media="(max-width:900px)" srcset="images/franklin-small.jpg">
<img src="images/franklin-large.jpg" alt="Background">
</picture>
<header class="headBack">
<img src="images/cloud.png" width="200" height="273" alt="Cloudy">
<h1 class="heading">Franklin</h1>
<span class="icon" onclick="openNav()">☰ </span>
</header>
<nav id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()" id=”content-mobile”>×</a>
<a href="">Home</a>
<a href="franklin-8.html" style="color: aqua">Franklin</a>
<a href="">Greenville</a>
<a href="">Springfield</a>
<a href="stormcenter.html">Storm Center</a>
<a href="gallery.html">Gallery</a>
</nav>
<nav id=”nav” class="navBar">
<a href="">Home</a>
<a href="franklin-7.html" style="color: aqua">Franklin</a>
<a href="">Greenville</a>
<a href="">Springfield</a>
<a href="stormcenter.html">Storm Center</a>
<a href="gallery.html">Gallery</a>
</nav>
<main class="main">
<section class="story">
<table>
<thead>
<tr>
<th colspan="2">Franklin Weather Sample/Placeholder Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>Summary</td>
<td>Sunny</td>
</tr>
<tr>
<td>High</td>
<td><span id="temph">90</span>°F</td>
</tr>
<tr>
<td>Low</td>
<td><span id="templ">66</span>°F</td>
</tr>
<tr>
<td>Chance Precipitation</td>
<td>0%</td>
</tr>
<tr>
<td>Max Wind</td>
<td><span id="wind">5</span> mph SW</td>
</tr>
<tr>
<td>Wind Chill</td>
<td><span id="windChill"></span></td>
</tr>
</tbody>
</table>
</section>
<section class="storyAlt" id=”content-desktop”>
<h3 class="desktop">Ten Day Forecast</h3>
<table class="desktop">
<thead>
<tr>
<th>Day 1</th>
<th>Day 2</th>
<th>Day 3</th>
<th>Day 4</th>
<th>Day 5</th>
<th>Day 6</th>
<th>Day 7</th>
<th>Day 8</th>
<th>Day 9</th>
<th>Day 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>89°F</td>
<td>87°F</td>
<td>78°F</td>
<td>75°F</td>
<td>72°F</td>
<td>72°F</td>
<td>79°F</td>
<td>83°F</td>
<td>85°F</td>
<td>89°F</td>
</tr>
</tbody>
</table>
</section>
<section class="story">
<article>
<h3>Weather Story</h3>
<aside>
<img src="images/rain.jpg" class="rightImg" alt="rainy day">
</aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
</p><p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.
</p><p>
Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam.
</p><p>
Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue.
</p><p>
Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante.
</p>
</article>
</section>
<!-- <section class="endSpace"><p> <br></p></section>Extra space below if Last so that footer doesn't hide text-->
</main>
<footer>
<section class="contact">
<p>The Weather Site</p>
<p>123 Main St, Franklin, MU, 83454<br>
(999) 999 999 [email protected]<br>
</p>
</section>
© 2018 | Franlkin Weather | <span id="date"></span> | <a href="index.html">Home</a><!-- Will return user to main page, but for now goes to index! -->
</footer>
<script src="js/currentdate.js"></script>
<script src="js/windchill.js"></script>
</body>
</html>