generated from tripleten-com/se_project_aroundtheus
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (146 loc) · 5.07 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initla-scale=1.0" name="viewport" />
<meta content="ie=edge" http-equiv="X-UA-Compatible" />
<title>Around the U.S</title>
<link href="./pages/index.css" rel="stylesheet" />
</head>
<body class="page">
<div class="page__content">
<header class="header page__section">
<img
class="header__logo"
src="./images/Header-Logo.svg"
alt="Around the U.S logo"
/>
</header>
<main class="content">
<section class="profile page__section">
<img
class="profile__image"
src="images/Jacques_Cousteau.png"
alt="Jacques Cousteau"
/>
<div class="profile__info">
<h1 class="profile__title" id="profile__title">Jacques Cousteau</h1>
<button
class="profile__edit-button"
id="profile-edit-button"
type="button"
></button>
<p class="profile__description">Explorer</p>
</div>
<button class="profile__add-button" type="button"></button>
</section>
<section class="cards page__section">
<ul class="cards__list">
<li class="card">
<img
class="card__image"
src="./images/yosemite-valley.png"
alt="Yosemite Valley"
/>
<div class="card__description">
<h2 class="card__description-title">Yosemite Valley</h2>
<button class="card__like-button" type="button"></button>
</div>
</li>
<li class="card">
<img
src="./images/lake-louise.png"
alt="Lake Louise"
class="card__image"
/>
<div class="card__description">
<h2 class="card__description-title">Lake Louise</h2>
<button class="card__like-button"></button>
</div>
</li>
<li class="card">
<img
class="card__image"
src="./images/bald-mountains.png"
alt="Bald Mountains"
/>
<div class="card__description">
<h2 class="card__description-title">Bald Mountains</h2>
<button class="card__like-button"></button>
</div>
</li>
<li class="card">
<img
class="card__image"
src="./images/latemar.png"
alt="Latemar"
/>
<div class="card__description">
<h2 class="card__description-title">Latemar</h2>
<button class="card__like-button"></button>
</div>
</li>
<li class="card">
<img
class="card__image"
src="./images/vanoise-national-park.png"
alt="Vanoise National Park"
/>
<div class="card__description">
<h2 class="card__description-title">Vanoise National Park</h2>
<button class="card__like-button"></button>
</div>
</li>
<li class="card">
<img
class="card__image"
src="./images/lago-di-braies.png"
alt="Lago di Braies"
/>
<div class="card__description">
<h2 class="card__description-title">Lago di Braies</h2>
<button class="card__like-button"></button>
</div>
</li>
</ul>
</section>
</main>
<footer class="footer">
<p class="footer__copyright">© Jonathan W Brandt 2024</p>
</footer>
</div>
<div class="modal" id="profile-edit-modal">
<div class="modal__container">
<button class="modal__close" id="modal-close-button"></button>
<p class="modal__header">Edit Profile</p>
<form class="modal__form" id="modal__form">
<input
class="modal__form-input-title"
id="modal-title"
placeholder="Name"
type="text"
name="title"
/>
<input
class="modal__form-input-description"
id="modal-description"
placeholder="Description"
type="text"
name="description"
/>
<button class="modal__button" id="save-button">Save</button>
</form>
</div>
</div>
<template id="card-template">
<li class="card">
<img class="card__image" src="" alt="" />
<div class="card__description">
<h2 class="card__description-title"></h2>
<button class="card__like-button" type="button"></button>
</div>
</li>
</template>
<script src="./scripts/index.js"></script>
</body>
</html>