-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (104 loc) · 4.46 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Devun Durst - WDD 230 - Web Frontend Development</title>
<!-- Essential META Tags -->
<meta name="author" content="Devun Fox Durst">
<meta name="description" content="WDD 230 - Web Frontend Development Devun Durst - course assignment portal">
<meta property="og:title" content="Devun Durst Frontend Portoflio">
<meta property="og:type" content="website">
<meta property="og:image" content="https://savemountdiablo.org/wp-content/uploads/2022/03/Mount-Diablo-Al-Johnson-928x522.jpg">
<meta property="og:url" content="https://devunfox15.github.io/wdd230/">
<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=Lato&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/normalize.css">
<link rel="stylesheet" href="styles/base.css">
<link rel="stylesheet" href="styles/larger.css">
<link rel="icon" href="./images/favicon.ico">
</head>
<body>
<header>
<div class="grid_container">
<img class="profile-picture" src="./images/devun-durst.webp" loading="lazy" alt="A piture of the site frontend developer">
<span class="Homepage-Name"> Devun Durst</span>
</div>
</header>
<div id="mode"></div>
<nav>
<button id="myBtn"></button>
<ul class="menuLinks">
<li><a class="current-menu-item" href="./index.html">Home</a></li>
<li><a class="link" href="./chamber/index.html">Chamber</a></li>
<li><a class="link" href="./week01/chamber-site-plan.html">Site Plan</a></li>
<li><a class="link" href="./form.html">Form</a></li>
</ul>
<div class="logo-container">
<img src="./images/dark.svg" alt="dark mode" id="darkBtn">
</div>
</nav>
<main id="main">
<div class="hero">
<picture id="hero-picture">
<source media="(max-width: 500px)" srcset="./images/hero-smaller.webp">
<source media="(max-width: 1000px)" srcset="./images/hero-sm-med.webp">
<img src="./images/hero-large.webp" alt="Image Settings" loading="lazy">
</picture>
<span>Sacramento Temple</span>
</div>
<h1 id="title"> WDD 230: Web Frontend Developement</h1>
<div class="flex-container">
<section class="card">
<div class="blue_div">
<h2>Learning Activities</h2>
</div>
<div class="container">
<ul id="links-list"></ul>
</div>
</section>
<section class="card">
<div class="blue_div">
<h2>Information</h2>
</div>
<div class="container">
<div class="weather-display">
<h3>Weather</h3>
<p><span>Hometown:</span>Concord, california: <span id="current-temp"></span>°F</p>
<figure>
<img id="weather-icon" src="" alt="weather-icon">
<figcaption></figcaption>
</figure>
</div>
<ul>
<li> <span>Number Of page Visits: </span><span class ="visits"></span></li>
</ul>
</div>
</section>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d119687.57080897817!2d-122.09542025268051!3d37.9735926758491!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808560ac69c4cc85%3A0xe416004961fffef!2sConcord%2C%20CA!5e0!3m2!1sen!2sus!4v1708026020126!5m2!1sen!2sus"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</main>
<footer>
<div class="footer-info">
<h3 id="dateTime">Javascript date</h3>
<h3 id="author">author of Site</h3>
<h3 id="country">country of author</h3>
<img class="usa-photo" src="./images/united-states.webp" loading="lazy" alt="flag" width ="180" height="90">
</div>
<p id="modifiedTime"></p>
</footer>
<script src="./scripts/getweather.js"></script>
<script src="./scripts/getDates.js"></script>
<script src="./scripts/darkMode.js"></script>
<script src="./scripts/hamburgerMenu.js"></script>
<script src="./scripts/getVisits.js"></script>
<script src="./scripts/links.js"></script>
</body>
</html>