-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (114 loc) · 4.33 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Setting the viewport to make the website look good on all devices:-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Set page title-->
<title>Fernando Chazarreta - WDD 230 - Web Frontend Development</title>
<!-- Meta tags: Description an author. Used in Google results page -->
<meta
name="description"
content="This is the course assignment portal for BYU's 'WDD 230 - Web Frontend Development' course. By Fernando Chazarreta"
>
<meta name="author" content="Fernando Chazarreta">
<!-- Meta tags: Open graph properties. Used when the page is shared into Facebook -->
<meta property="og:title" content="Fernando Chazarreta - WDD 230 - Web Frontend Development">
<meta property="og:type" content="website">
<meta
property="og:image"
content="https://media-cdn.tripadvisor.com/media/photo-s/14/b8/8c/ea/photo0jpg.jpg"
>
<meta property="og:url" content="https://fernandochaza.github.io/wdd230/">
<!-- Google fonts -->
<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=Fira+Mono:wght@400;500&family=Inter:wght@100;300;400;700;800;900&display=swap"
rel="stylesheet"
>
<!-- External CSS-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
>
<link rel="stylesheet" href="styles/base.css">
<link rel="stylesheet" href="styles/larger.css">
<!-- Favicon -->
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<img
id="profile-picture"
src="images/profile-pic.webp"
alt="Fernando Chazarreta's profile picture"
/>
<h1>Fernando Chazarreta</h1>
<div class="dark-mode-container">
<button aria-label="Toggle Dark Mode" class="dark-light-button">☀</button>
</div>
</header>
<div class="menu-button-container">
<button aria-label="Toggle Navigation Menu" class="menu-button">☰</button>
</div>
<nav id="my-nav">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="chamber/index.html">Chamber</a></li>
<li><a href="week01/chamber-site-plan.html">Site Plan</a></li>
<li><a href="form.html">Form</a></li>
</ul>
</nav>
<main>
<section class="hero-container">
<h2 class="hero-label">Buenos Aires Temple</h2>
<picture>
<source media="(max-width: 768px)" srcset="images/buenos-aires-landscape-768w.webp" />
<source media="(min-width: 769px)" srcset="images/buenos-aires-landscape-900w.webp" />
<img
class="hero-image"
src="images/buenos-aires-landscape-768w.webp"
alt="Entrance to the Buenos Aires Temple"
width="768"
height="480"
/>
</picture>
</section>
<div class="title-container">
<h2 class="title">WDD 230: Web Frontend Development</h2>
</div>
<section class="card">
<h3 class="card-header">Learning Activities</h3>
<ul id="list-container">
</ul>
</section>
<section class="card">
<h3 class="card-header">Information</h3>
<div class="location">Caleta Olivia</div>
<div class="weather"><img id="weather-icon" src="#" alt=""><span id="weather-info"></span></div>
<div class="visits"></div>
</section>
</main>
<aside class="location-frame-container">
<iframe
class="location-frame"
src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2749.345414792822!2d-67.51932892292876!3d-46.44185252453471!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sgorosito!5e0!3m2!1sen!2sar!4v1687830675884!5m2!1sen!2sar"
width="400"
height="300"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</aside>
<footer>
<p>
© <span id="year"></span> • Fernando Chazarreta •
<span id="flag"></span> Argentina
</p>
<p id="lastModified"></p>
</footer>
<script src="scripts/main.js" type="module"></script>
</body>
</html>