generated from tripleten-com/se_project_aroundtheus
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (143 loc) · 4.79 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-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"></ul>
</section>
</main>
<footer class="footer">
<p class="footer__copyright">© Jonathan W Brandt 2024</p>
</footer>
</div>
<!--Profile Modal-->
<div class="modal" id="profile-edit-modal">
<div class="modal__container">
<button class="modal__close" id="profile-modal-close-button"></button>
<p class="modal__header">Edit Profile</p>
<form class="modal__form" id="modal-edit-form">
<input
class="modal__input modal__input_type_name"
id="profile-name"
placeholder="Name"
type="text"
name="title"
maxlength="40"
minlength="2"
required
/>
<span class="modal__error" id="profile-name-error"
>Please fill out this field</span
>
<input
class="modal__input"
id="profile-description"
placeholder="Description"
type="text"
name="description"
maxlength="400"
minlength="2"
required
/>
<span
class="modal__error modal__error_bottom"
id="profile-description-error"
>Please fill out this field</span
>
<button class="modal__button" id="profile-save-button">Save</button>
</form>
</div>
</div>
<!--Card Modal-->
<div class="modal" id="add-card-modal">
<div class="modal__container">
<button class="modal__close" id="card-modal-close-button"></button>
<p class="modal__header">New Place</p>
<form class="modal__form" id="add-card-form">
<input
class="modal__input modal-title modal__input_type_title"
placeholder="Title"
type="text"
name="title"
maxlength="30"
minlength="1"
required
id="place-name"
/>
<span class="modal__error" id="place-name-error"
>Please fill out this field</span
>
<input
class="modal__input modal__input_type_url modal-description"
placeholder="Image URL"
type="url"
name="url"
required
id="webaddress-url"
/>
<span
class="modal__error modal__error_bottom"
id="webaddress-url-error"
>Please enter a web address</span
>
<button class="modal__button" id="new-card-save-button">Save</button>
</form>
</div>
</div>
<!--Preview Img Modal-->
<div class="modal" id="preview-modal">
<div class="modal__content modal__content_type_preview">
<button
class="modal__close modal__close_button_preview"
id="preview-modal-close-button"
></button>
<img class="modal__image" src="#" alt="#" />
<p class="modal__caption"></p>
</div>
</div>
<!--Template-->
<template id="card-template">
<li class="card">
<button class="card__delete-button" type="button"></button>
<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" type="module"></script>
</body>
</html>