Project-Mesto/index.html at main · DanilenkoRoman/Project-Mesto · GitHub

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
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="ru">
  <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">
    <title>Mesto</title>
    <meta name="description" content="Учебный проект">
    <meta name="keywords" content="html, css, javascript">
    <meta name="author" content="Роман Даниленко">
    <link rel="stylesheet" href="./pages/index.css">
    <script src="./scripts/validate.js" defer type="module"></script>
    <script src="./scripts/index.js" defer type="module"></script>
  </head>
  <body class="body">
    <div class="page">
      <!-- Шапка -->
      <header class="header">
        <img
          class="header__logo"
          src="./images/mesto-logo.svg"
          alt="Логотип Место">
      </header>
      <main class="content">
        <!-- Начало секции профиля -->
        <section class="profile">
          <img
            class="profile__avatar"
            src="./images/kusto.jpg"
            alt="Аватар профиля">
          <div class="profile__info">
            <h1 class="profile__name">Жак-Ив Кусто</h1>
            <button
              type="button"
              class="profile__edit-button"
              aria-label="Редактировать профиль">
            </button>
            <p class="profile__details">Исследователь океана</p>
          </div>
          <button
            type="button"
            class="profile__add-button"
            aria-label="Добавить место">
          </button>
        </section>
        <section class="elements"></section>
      </main>
      <!-- Начало подвала -->
      <footer class="footer">
        <p class="footer__copyright">© 2020 Mesto Russia</p>
      </footer>
    </div>
    <!-- Начало popup редактирования профиля -->
    <section id="profile-popup" class="popup popup_type_edit-profile">
      <article class="popup__container popup__container_type_edit">
        <h2 class="popup__name">Редактировать профиль</h2>
        <form
          name="profile-name"
          class="popup__form popup__form_edit"
          novalidate>
          <input
            placeholder="Имя"
            required
            id="name"
            autocomplete="off"
            minlength="2"
            maxlength="40"
            type="text"
            class="popup__input popup__input_type_name"
            name="name">
          <span id="err-name" class="popup__error"></span>
          <input
            placeholder="О себе"
            required
            id="detail"
            autocomplete="off"
            minlength="2"
            maxlength="200"
            class="popup__input popup__input_type_detail"
            name="detail">
          <span id="err-detail" class="popup__error"></span>
          <button
            type="submit"
            class="popup__submit-btn"
            aria-label="Сохранить">
            Сохранить</button>
        </form>
        <button
          type="button"
          aria-label="Закрыть"
          class="popup__close"
        ></button>
      </article>
    </section>
    <!-- Начало popup добавления карточки -->
    <section class="popup popup_type_add">
      <article class="popup__container popup__container_type_add">
        <h2 class="popup__name">Новое место</h2>
        <form
          name="profile-name"
          class="popup__form popup__form_add"
          novalidate>
          <input
            placeholder="Название"
            required
            minlength="2"
            maxlength="30"
            autocomplete="off"
            id="name-image"
            class="popup__input popup__input_type_name"
            name="name">
          <span id="err-name-image" class="popup__error"></span>
          <input
            placeholder="Ссылка на картинку"
            type="url"
            required
            id="link"
            class="popup__input popup__input_type_link"
            name="link">
          <span id="err-link" class="popup__error"></span>
          <button
          type="submit"
          class="popup__submit-btn">
          Создать</button>
        </form>
        <button type="button" class="popup__close"></button>
      </article>
    </section>
    <!-- Увеличение изображения по клику -->
    <section class="popup popup_type_image">
      <figure class="popup__container popup__container_type_image">
        <button type="button" class="popup__close"></button>
        <img class="popup__image" src="#" alt="">
        <figcaption class="popup__image-name"></figcaption>
      </figure>
    </section>
    <!-- Шаблон карточек -->
    <template class="elements-template">
      <article class="element">
        <button
          type="button"
          class="element__delete"
          aria-label="Удалить">
        </button>
        <img class="element__photo" src="#" alt="">
        <div class="element__container">
          <h2 class="element__name"></h2>
          <button
            type="button"
            class="element__like-button"
            aria-label="Лайк">
          </button>
        </div>
      </article>
    </template>
  </body>
</html>