-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (127 loc) · 4.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="pages/index.css" />
<title>Around The U.S.</title>
</head>
<body class="page">
<div class="content">
<header class="header">
<img class="logo" src="./images/logo.svg" alt="project logo" />
</header>
<main>
<section class="profile">
<div class="profile__avatar-container">
<img class="profile__avatar" src="images/avatar.png" alt="avatar" />
</div>
<div class="profile__info">
<h1 class="profile__name">Jacques Cousteau</h1>
<button class="profile__edit-button" type="button">
<img
class="profile__edit-icon"
src="./images/edit-icon.svg"
alt="edit button icon"
/>
</button>
<p class="profile__occupation">Explorer</p>
</div>
<button class="profile__add-button" type="button">
<img
class="profile__add-icon"
src="./images/add-icon.svg"
alt="add button"
/>
</button>
</section>
<div class="popup popup_func_edit">
<div class="popup__container">
<button
class="popup__close-btn popup__close-btn_func_edit"
type="button"
></button>
<h2 class="popup__title">Edit Profile</h2>
<form class="form form_type_edit" name="editForm">
<input
class="form__text-input"
id="fullName"
type="text"
name="full-name"
placeholder="Name"
required
/>
<input
class="form__text-input"
id="job"
type="text"
name="occupation"
placeholder="About me"
required
/>
<button class="form__btn" type="submit">Save</button>
</form>
</div>
</div>
<div class="popup popup_func_add">
<div class="popup__container">
<button
class="popup__close-btn popup__close-btn_func_add"
type="button"
></button>
<h2 class="popup__title">New Place</h2>
<form class="form form_type_add" name="addForm">
<input
class="form__text-input"
id="title"
type="text"
name="title"
placeholder="Title"
required
/>
<input
class="form__text-input"
id="img-link"
type="text"
name="img-link"
placeholder="Image link"
required
/>
<button class="form__create" type="submit">Create</button>
</form>
</div>
</div>
<section class="cards">
<ul class="cards__list"></ul>
</section>
<div class="popup popup_func_img-modal">
<div class="popup__container popup__container_type_modal">
<button
class="popup__close-btn popup__close-btn_func_img-modal"
type="button"
></button>
<figure class="popup__figure">
<img class="popup__image" src=" " alt=" " />
<figcaption class="popup__caption"></figcaption>
</figure>
</div>
</div>
</main>
<footer class="footer">
<p class="footer__copyright">© 2021 Around The U.S.</p>
</footer>
</div>
<template id="card-template">
<li class="card">
<button class="card__delete-btn" type="button"></button>
<img class="card__image" src=" " alt=" " />
<div class="card__tab">
<h2 class="card__title"></h2>
<button class="card__like-btn" type="button"></button>
</div>
</li>
</template>
<script src="script/index.js"></script>
</body>
</html>