-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathphoto.html
194 lines (194 loc) · 14.9 KB
/
photo.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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/picturefill.min.js" async></script>
<title>HTML Academy: Седона</title>
</head>
<body>
<svg style="display:none"><symbol viewBox="0 0 8.672 18.944" id="icon-facebook"><path d="M6.275 3.356h2.398V0H5.795C2.656.181 1.54 2.387 1.948 6.114H0v3.518h1.959v9.312h3.837V9.632h2.857V6.114H5.787c-.022-1.045-.037-2.405.488-2.758z"/></symbol><symbol viewBox="0 0 22 20" id="icon-like"><path d="M12.383 3.646l-.637 2.929L11.219 9H19.9v2l.001.058L17 18H8V8.029l.014-.015 4.369-4.368M2 10v8-8M13.2 0L6.6 6.6c-.4.3-.6.8-.6 1.4v10c0 1.1.9 2 2 2h9c.8 0 1.5-.5 1.8-1.2l3-7.1c.1-.2.1-.5.1-.7V9h.1c0-1.1-.9-2-2-2h-6.3l1-4.6v-.3c0-.4-.2-.8-.4-1.1l-1.1-1zM4 8H0v12h4V8zm18 1v.044V9z"/></symbol><symbol viewBox="0 0 17.5 14.663" id="icon-twitter"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.283.153c1.736-.484 3.074.264 3.685 1.15.694-.225 1.372-.47 2.072-.69-.004.841-.538 1.478-.883 1.728.704.165 1.343-.481 1.343-.481-.175.977-1.035 1.746-1.611 1.977-.239 6.592-3.272 10.956-10.382 10.823h-.46c-.422 0-4.29-.45-5.047-1.843 2.341.192 4.011-.412 4.835-1.15-.989-.293-2.761-.464-3.07-2.881.362.105.583.223 1.228.117C1.757 8.067.385 7.366.461 5.218c.294.319 1.1.523 1.381.461C1.117 5.444-.188 2.398.921.843 2.794 2.655 4.769 4.364 8.29 4.528c.216-2.24 1.171-3.74 2.993-4.375z"/></symbol><symbol viewBox="0 0 20 20" id="icon-video-fullscreen"><g><path d="M0 0v6h3V3h3V0H3zM3 14H0v6h6v-3H3zM17 0h-3v3h3v3h3V0zM17 17h-3v3h6v-6h-3z"/></g></symbol><symbol viewBox="0 0 16 20" id="icon-video-replay"><path d="M8 4V0L3 5l5 5V6c3.315 0 6 2.686 6 6s-2.685 6-6 6-6-2.686-6-6H0c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></symbol><symbol viewBox="0 0 32 20" id="icon-video-subtitles"><path d="M29 0H3C1.35 0 0 1.35 0 3v14c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3zM14.403 15.854a8.61 8.61 0 0 1-1.678.164 5.986 5.986 0 0 1-1.976-.323c-.623-.214-1.172-.562-1.646-1.041s-.852-1.103-1.133-1.868c-.28-.766-.419-1.695-.419-2.786 0-1.134.157-2.085.471-2.851.315-.768.723-1.384 1.224-1.854a4.53 4.53 0 0 1 1.679-1.008 5.86 5.86 0 0 1 1.852-.307c.66 0 1.22.045 1.678.134.457.087.835.192 1.133.313l-.448 1.92a3.332 3.332 0 0 0-.902-.265A8.244 8.244 0 0 0 12.973 6c-.915 0-1.649.325-2.206.977-.558.651-.836 1.663-.836 3.031 0 .598.067 1.142.199 1.632.132.493.334.913.603 1.26.271.349.607.619 1.01.812.402.193.867.29 1.396.29.496 0 .915-.049 1.257-.148.342-.099.639-.227.893-.38l.463 1.841c-.354.249-.803.43-1.349.539zm8.698 0a8.618 8.618 0 0 1-1.678.164 5.986 5.986 0 0 1-1.976-.323c-.623-.214-1.172-.562-1.646-1.041s-.852-1.103-1.133-1.868c-.281-.767-.421-1.695-.421-2.786 0-1.134.157-2.085.471-2.851.314-.768.723-1.384 1.223-1.854a4.526 4.526 0 0 1 1.68-1.008 5.858 5.858 0 0 1 1.851-.307c.661 0 1.221.045 1.678.134a6.05 6.05 0 0 1 1.133.313l-.446 1.918a3.314 3.314 0 0 0-.901-.265A8.569 8.569 0 0 0 21.67 6c-.915 0-1.649.325-2.206.977-.558.651-.836 1.663-.836 3.031 0 .598.067 1.142.199 1.632.132.493.334.913.603 1.26.271.349.606.619 1.009.812.402.193.868.29 1.396.29.497 0 .915-.049 1.257-.148.342-.099.64-.227.894-.38l.463 1.841c-.353.249-.803.43-1.348.539z"/></symbol><symbol viewBox="0 0 19.979 14.015" id="icon-youtube"><path d="M17.145 0H2.835A2.842 2.842 0 0 0 0 2.835v8.345a2.842 2.842 0 0 0 2.835 2.835h14.31a2.842 2.842 0 0 0 2.835-2.835V2.835A2.844 2.844 0 0 0 17.145 0zM7.036 10.392V3.623l6.769 3.384-6.769 3.385z"/></symbol><symbol viewBox="0 0 26.943 34.09" id="logo-htmlacademy"><path d="M13.62.017L13.472 0 0 1.412v24.661l13.473 8.017 13.43-7.99.042-.025V1.412L13.62.017zm11.399 12.11L13.495 5.334l-.001-.104-.087.05-.088-.056v.109L1.925 12.118V3.147l11.548-1.212L25.02 3.147v8.98zm-11.614-5.34L24.923 13.5l-4.479 2.64-7.093-4.221-.014 1.415 5.904 3.513-.86.507-5.03-2.992-.014 1.415 3.827 2.275-.782.523-3.031-1.787-.014 1.413 1.853 1.091-1.8 1.081-11.356-6.751 11.371-6.835zm-11.48 8.34l11.411 6.791.016 1.044-7.942-4.728-.015 1.416 7.979 4.795.018 1.076-7.973-4.74-.013 1.414 8.021 4.822.046.025 8.143-4.872-.011-5.177 3.415-2.036v10.021L13.472 31.85 1.925 24.979v-9.852z"/></symbol></svg>
<div class="background-wraper">
<header class="page-header">
<div class="page-header__wraper">
<nav class="page-header__menu page-header__menu--opened">
<ul class="page-header__list">
<li class="page-header__item"><a class="page-header__url" href="index.html">Главная</a></li>
<li class="page-header__item"><a class="page-header__url page-header__url--active" href="photo.html">Фото и видео</a></li>
<li class="page-header__item"><a class="page-header__url" href="form.html">Форма отзыва</a></li>
<li class="page-header__item"><a class="page-header__url" href="https://htmlacademy.ru/intensive/adaptive">HTML Academy</a></li>
</ul>
<button class="page-header__mobile-menu-close" type="button">Закрыть</button>
<a class="page-header__logo-wraper" href="index.html">
<picture>
<source media="(min-width: 1200px)" srcset="img/logo-sedona-desktop.svg">
<source media="(min-width: 768px)" srcset="img/logo-sedona-tablet.svg">
<img class="page-header__logo" src="img/logo-sedona-mobile.svg" width="102" height="83" alt="Седона">
</picture>
</a>
</nav>
<div class="page-header__promo-text promo-text">
<div class="promo-text__slogan promo-text__slogan--lower">
<img class="promo-text__title" src="img/text-sedona.svg" width="282" height="214" alt="Седона Промо">
</div>
</div>
</div>
</header>
<section class="media">
<div class="media__wraper">
<header class="media__head">
<h1 class="media__title">Фото и видео</h1>
<p class="media__text">Не можете решиться на путешествие из-за курса? Фотографии помогут вам забыть о политике и экономике.</p>
</header>
<section class="foto">
<div class="foto__wraper">
<figure class="foto__item">
<div class="foto__img-wraper">
<a href="#">
<picture>
<source media="(min-width: 1200px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
<source media="(min-width: 768px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
<img class="foto__img" src="img/[email protected]" srcset="img/[email protected] 2x" alt="Народные просторы">
</picture>
</a>
</div>
<figcaption class="foto__more">
<div class="foto__more-text">
<h2 class="foto__title">Неродные просторы</h2>
<p class="foto__text">Автор фото: Борис</p>
</div>
<div class="foto__likes">
<button class="foto__btn" type="button" title="Поставить лайк">
<svg class="foto__icon" width="23" height="21"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-like"></use></svg>
</button>
<button class="foto__number" type="button">1350</button>
</div>
</figcaption>
</figure>
<figure class="foto__item">
<div class="foto__img-wraper">
<a href="#">
<picture>
<source media="(min-width: 1200px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
<source media="(min-width: 768px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
<img class="foto__img" src="img/[email protected]" srcset="img/[email protected] 2x" width="280" height="280">
</picture>
</a>
</div>
<figcaption class="foto__more">
<div class="foto__more-text">
<h2 class="foto__title">Местная растительность</h2>
<p class="foto__text">Автор фото: Сергей</p>
</div>
<div class="foto__likes">
<button class="foto__btn" type="button" title="Поставить лайк">
<svg class="foto__icon" width="23" height="21"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-like"></use></svg>
</button>
<button class="foto__number" type="button">143</button>
</div>
</figcaption>
</figure>
<figure class="foto__item">
<div class="foto__img-wraper">
<a href="#">
<picture>
<source media="(min-width: 1200px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
<source media="(min-width: 768px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
<img class="foto__img" src="img/[email protected]" srcset="img/[email protected] 2x" width="280" height="280" alt="Дорога на север">
</picture>
</a>
</div>
<figcaption class="foto__more">
<div class="foto__more-text">
<h2 class="foto__title">Дорога на север</h2>
<p class="foto__text">Автор фото: Петр</p>
</div>
<div class="foto__likes">
<button class="foto__btn" type="button" title="Поставить лайк">
<svg class="foto__icon" width="23" height="21"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-like"></use></svg>
</button>
<button class="foto__number" type="button">96</button>
</div>
</figcaption>
</figure>
<figure class="foto__item">
<div class="foto__img-wraper">
<a href="#">
<picture>
<source media="(min-width: 1200px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
<source media="(min-width: 768px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
<img class="foto__img" src="img/[email protected]" srcset="img/[email protected] 2x" width="280" height="280" alt="Мост дьявола">
</picture>
</a>
</div>
<figcaption class="foto__more">
<div class="foto__more-text">
<h2 class="foto__title">Мост дьявола</h2>
<p class="foto__text">Автор фото: Антон</p>
</div>
<div class="foto__likes">
<button class="foto__btn" type="button" title="Поставить лайк">
<svg class="foto__icon" width="23" height="21"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-like"></use></svg>
</button>
<button class="foto__number" type="button">254</button>
</div>
</figcaption>
</figure>
</div>
</section>
<section class="video">
<div class="video__wraper">
<h2 class="video__title">Все еще сомневаетесь?</h2>
<p class="video__text">Смотрите видеопрезентацию и скорее за билетами, пока они не подорожали в очередной раз!</p>
</div>
<div class="video__video-player">
<div class="video__wraper-player">
<div class="video__line-player">
<div class="video__dot-player">
</div>
</div>
</div>
<div class="video__userbar">
<button class="video__replay" type="button" title="Повторить">
<svg class="video__icon" width="16" height="20"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video-replay"></use></svg>
</button>
<button class="video__subtitle" type="button" title="Субтитры">
<svg class="video__icon" width="32" height="20"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video-subtitles"></use></svg>
</button>
<button class="video__fullscreen" type="button" title="На весь экран">
<svg class="video__icon" width="20" height="20"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video-fullscreen"></use></svg>
</button>
</div>
</div>
</section>
</div>
</section>
<footer class="page-footer">
<div class="page-footer__wraper">
<p class="page-footer__hashtag">#visitsedona</p>
<div class="page-footer__social social">
<div class="social__wraper">
<a class="social__link" href="#" title="Twiter">Twit
<svg class="social__icon" width="18" height="14"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitter"></use></svg>
</a>
<a class="social__link" href="#" title="Facebook">FB
<svg class="social__icon" width="9" height="18"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook"></use></svg>
</a>
<a class="social__link" href="#" title="Youtube">Youtube
<svg class="social__icon" width="20" height="14"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-youtube"></use></svg>
</a>
</div>
</div>
<div class="page-footer__copyright-wraper">
<p class="page-footer__copyright">Разработано</p>
<a href="https://htmlacademy.ru/intensive/adaptive" title="HTML ACADEMY">
<svg class="page-footer__copyright-img" width="27" height="37"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo-htmlacademy"></use></svg>
</a>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="js/menu.js"></script>
</body>
</html>