-
Notifications
You must be signed in to change notification settings - Fork 0
/
photo.html
181 lines (166 loc) · 12.7 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Academy: Седона</title>
<link rel="stylesheet" href="css/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
<script>objectFitImages();</script>
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="js/picturefill.min.js" async></script>
</head>
<body>
<svg style="display:none">
<symbol viewBox="0 0 26.943 34.09" id="logo-html-academy"><path d="M13.62,0.017L13.472,0L0,1.412v24.661l13.473,8.017l13.43-7.99l0.042-0.025V1.412L13.62,0.017z M25.019,12.127L13.495,5.334 L13.494,5.23l-0.087,0.05l-0.088-0.056v0.109L1.925,12.118V3.147l11.548-1.212l11.547,1.212V12.127z M13.405,6.787L24.923,13.5 l-4.479,2.64l-7.093-4.221l-0.014,1.415l5.904,3.513l-0.86,0.507l-5.03-2.992l-0.014,1.415l3.827,2.275l-0.782,0.523l-3.031-1.787 l-0.014,1.413l1.853,1.091l-1.8,1.081L2.034,13.622L13.405,6.787z M1.925,15.127l11.411,6.791l0.016,1.044L5.41,18.234L5.395,19.65 l7.979,4.795l0.018,1.076l-7.973-4.74l-0.013,1.414l8.021,4.822l0.046,0.025l8.143-4.872l-0.011-5.177l3.415-2.036v10.021 L13.472,31.85L1.925,24.979V15.127z"/></symbol>
<symbol viewBox="0 0 17.5 14.663" id="icon-twitter"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.283,0.153c1.736-0.484,3.074,0.264,3.685,1.15 c0.694-0.225,1.372-0.47,2.072-0.69c-0.004,0.841-0.538,1.478-0.883,1.728C16.861,2.506,17.5,1.86,17.5,1.86 c-0.175,0.977-1.035,1.746-1.611,1.977C15.65,10.429,12.617,14.793,5.507,14.66c-0.538,0,0.077,0-0.46,0 c-0.422,0-4.29-0.45-5.047-1.843c2.341,0.192,4.011-0.412,4.835-1.15c-0.989-0.293-2.761-0.464-3.07-2.881 c0.362,0.105,0.583,0.223,1.228,0.117C1.757,8.067,0.385,7.366,0.461,5.218c0.294,0.319,1.1,0.523,1.381,0.461 c-0.725-0.235-2.03-3.281-0.921-4.836C2.794,2.655,4.769,4.364,8.29,4.528C8.506,2.288,9.461,0.788,11.283,0.153z"/></symbol>
<symbol viewBox="0 0 8.672 18.944" id="icon-facebook"><path d="M6.275,3.356c0.799,0,1.599,0,2.398,0c0-1.119,0-2.237,0-3.356c-0.959,0-1.92,0-2.878,0C2.656,0.181,1.54,2.387,1.948,6.114 H0v3.518h1.959c0,3.104,0,6.208,0,9.312c1.279,0,2.559,0,3.837,0c0-3.104,0-6.208,0-9.312h2.857V6.114H5.787 C5.765,5.069,5.75,3.709,6.275,3.356z"/></symbol>
<symbol viewBox="0 0 19.979 14.015" id="icon-youtube"><path d="M17.145,0H2.835C1.275,0,0,1.275,0,2.835v8.345c0,1.56,1.275,2.835,2.835,2.835h14.31c1.56,0,2.835-1.275,2.835-2.835V2.835 C19.979,1.275,18.704,0,17.145,0z M7.036,10.392V3.623l6.769,3.384L7.036,10.392z"/></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,6s-6-2.686-6-6H0c0,4.42,3.58,8,8,8s8-3.58,8-8S12.42,4,8,4z"/></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-3V3C32,1.35,30.65,0,29,0z M14.403,15.854c-0.545,0.108-1.104,0.164-1.678,0.164c-0.694,0-1.354-0.107-1.976-0.323c-0.623-0.214-1.172-0.562-1.646-1.041 s-0.852-1.103-1.133-1.868C7.69,12.02,7.551,11.091,7.551,10c0-1.134,0.157-2.085,0.471-2.851c0.315-0.768,0.723-1.384,1.224-1.854 c0.502-0.468,1.062-0.804,1.679-1.008c0.616-0.204,1.233-0.307,1.852-0.307c0.66,0,1.22,0.045,1.678,0.134 c0.457,0.087,0.835,0.192,1.133,0.313L15.14,6.347c-0.254-0.121-0.555-0.209-0.902-0.265C13.891,6.027,13.47,6,12.973,6 c-0.915,0-1.649,0.325-2.206,0.977c-0.558,0.651-0.836,1.663-0.836,3.031c0,0.598,0.067,1.142,0.199,1.632 c0.132,0.493,0.334,0.913,0.603,1.26c0.271,0.349,0.607,0.619,1.01,0.812c0.402,0.193,0.867,0.29,1.396,0.29 c0.496,0,0.915-0.049,1.257-0.148c0.342-0.099,0.639-0.227,0.893-0.38l0.463,1.841C15.398,15.564,14.949,15.745,14.403,15.854z M23.101,15.854c-0.545,0.108-1.105,0.164-1.678,0.164c-0.694,0-1.354-0.107-1.976-0.323c-0.623-0.214-1.172-0.562-1.646-1.041 s-0.852-1.103-1.133-1.868c-0.281-0.767-0.421-1.695-0.421-2.786c0-1.134,0.157-2.085,0.471-2.851 c0.314-0.768,0.723-1.384,1.223-1.854c0.502-0.468,1.062-0.804,1.68-1.008c0.616-0.204,1.233-0.307,1.851-0.307 c0.661,0,1.221,0.045,1.678,0.134c0.458,0.087,0.836,0.192,1.133,0.313l-0.446,1.918c-0.253-0.121-0.554-0.209-0.901-0.265 C22.588,6.027,22.166,6,21.67,6c-0.915,0-1.649,0.325-2.206,0.977c-0.558,0.651-0.836,1.663-0.836,3.031 c0,0.598,0.067,1.142,0.199,1.632c0.132,0.493,0.334,0.913,0.603,1.26c0.271,0.349,0.606,0.619,1.009,0.812 c0.402,0.193,0.868,0.29,1.396,0.29c0.497,0,0.915-0.049,1.257-0.148c0.342-0.099,0.64-0.227,0.894-0.38l0.463,1.841 C24.096,15.564,23.646,15.745,23.101,15.854z"/></symbol>
<symbol viewBox="0 0 20 20" id="icon-video-fullscreen">
<g>
<polygon points="0,0 0,3 0,6 3,6 3,3 6,3 6,0 3,0"/>
<polygon points="3,14 0,14 0,17 0,20 3,20 6,20 6,17 3,17"/>
<polygon points="17,0 14,0 14,3 17,3 17,6 20,6 20,3 20,0"/>
<polygon points="17,17 14,17 14,20 17,20 20,20 20,17 20,14 17,14"/>
</g>
</symbol>
</svg>
<header class="page-header">
<nav class="main-nav">
<ul class="nav" id="nav"><!-- Класс сворачивающий меню nav--hidden" -->
<li class="nav__item"><a href="index.html">Главная</a></li>
<li class="nav__item nav__item--active nav__item--flex-growed"><a>Фото и видео</a></li>
<li class="nav__item"><a href="form.html">Форма отзыва</a></li>
<li class="nav__item"><a href="https://htmlacademy.ru/intensive/adaptive">HTML Academy</a></li>
</ul>
<a class="main-nav__logo" href="index.html"><!-- Класс корректирующий положение логотипа при закрытом меню main-nav__logo--top-state -->
<h1>Седона</h1>
<picture>
<source media="(min-width: 1200px)" srcset="img/logo-sedona-desktop.svg">
<source media="(min-width: 768px)" srcset="img/logo-sedona-tablet.svg">
<img src="img/logo-sedona-mobile.svg" alt="Логотип города Sedona"/>
</picture>
</a>
<div class="toggler"><button class="toggler__btn toggler__btn--opened" id="toggler-btn"></button></div><!-- Класс гамбургера в открытом состоянии toggler__btn--opened -->
</nav>
</header>
<main class="photo">
<div class="welcome welcome--reduced-also">
<div class="welcome-slogan welcome-slogan--reduced">
<h1 class="welcome-slogan__title">Фото и видео</h1>
<p class="welcome-slogan__text">Не можете решиться на путешествие из-за курса? Фотографии помогут вам забыть о политике и экономике.</p>
</div>
</div>
<article class="photo__item">
<div class="photo__item-img">
<a href="#">
<picture>
<source media="(min-width: 1200px)" srcset="img/photo-1-desktop@1x.jpg 1x, img/photo-1-desktop@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="img/photo-1-tablet@1x.jpg 1x, img/photo-1-tablet@2x.jpg 2x">
<img src="img/photo-1-mobile@1x.jpg" srcset="img/photo-1-mobile@2x.jpg 2x" alt="Sedona road photo">
</picture>
</a>
</div>
<div class="photo__descr photo__descr--biggest">
<div class="photo__items-wrapper">
<b class="photo__item-title">Неродные просторы</b>
<span class="photo__item-author">Автор фото: Борис</span>
</div>
<span class="likes">1350</span>
</div>
</article>
<article class="photo__item">
<div class="photo__item-img">
<a href="#">
<picture>
<source media="(min-width: 1200px)" srcset="img/photo-2-desktop@1x.jpg 1x, img/photo-2-desktop@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="img/photo-2-tablet@1x.jpg 1x, img/photo-2-tablet@2x.jpg 2x">
<img src="img/photo-2-mobile@1x.jpg" srcset="img/photo-2-mobile@2x.jpg 2x" alt="Sedona flowers photo">
</picture>
</a>
</div>
<div class="photo__descr">
<div>
<b class="photo__item-title">Местная растительность</b>
<span class="photo__item-author">Автор фото: Сергей</span>
</div>
<span class="likes">143</span>
</div>
</article>
<article class="photo__item">
<div class="photo__item-img">
<a href="#">
<picture>
<source media="(min-width: 1200px)" srcset="img/photo-3-desktop@1x.jpg 1x, img/photo-3-desktop@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="img/photo-3-tablet@1x.jpg 1x, img/photo-3-tablet@2x.jpg 2x">
<img src="img/photo-3-mobile@1x.jpg" srcset="img/photo-3-mobile@2x.jpg 2x" alt="Sedona road to North photo">
</picture>
</a>
</div>
<div class="photo__descr photo__descr--dark">
<div>
<b class="photo__item-title">Дорога на север</b>
<span class="photo__item-author">Автор фото: Петр</span>
</div>
<span class="likes">96</span>
</div>
</article>
<article class="photo__item">
<div class="photo__item-img">
<a href="#">
<picture>
<source media="(min-width: 1200px)" srcset="img/photo-4-desktop@1x.jpg 1x, img/photo-4-desktop@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="img/photo-4-tablet@1x.jpg 1x, img/photo-4-tablet@2x.jpg 2x">
<img src="img/photo-4-mobile@1x.jpg" srcset="img/photo-4-mobile@2x.jpg 2x" alt="Sedona horror bridge photo">
</picture>
</a>
</div>
<div class="photo__descr">
<div>
<b class="photo__item-title">Мост дьявола</b>
<span class="photo__item-author">Автор фото: Антон</span>
</div>
<span class="likes">254</span>
</div>
</article>
<article class="video-presentation">
<b class="video-presentation__title">Все еще сомневаетесь?</b>
<p class="video-presentation__text">Смотрите видеопрезентацию и скорее за билетами, пока они не подорожали в очередной раз!</p>
<div class="video-presentation__wrapper">
<picture>
<source media="(min-width: 1200px)" srcset="img/video-desktop@1x.jpg 1x, img/video-desktop@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="img/video-tablet@1x.jpg 1x, img/video-tablet@2x.jpg 2x">
<img src="img/video-mobile@1x.jpg" srcset="img/video-mobile@2x.jpg 2x" alt="Video-player">
</picture>
<div class="video-presentation__controls">
<div class="video-presentation__timeline">
<div class="video-presentation__bar"></div>
<div class="video-presentation__toggle"></div>
</div>
<button class="video-presentation__replay"><svg width="16" height="20"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video-replay"></use></svg></button>
<button class="video-presentation__subtitles"><svg width="32" height="20"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video-subtitles"></use></svg></button>
<button class="video-presentation__fullscreen"><svg width="20" height="20"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video-fullscreen"></use></svg></button>
</div>
</div>
</article>
</main>
<footer class="page-footer">
<b class="page-footer__hashtag">#VISITSEDONA</b>
<ul class="social-links">
<li><a class="social-links__item social-links__item--twitter" href="#"><svg width="18" height="15"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitter"></use></svg></a></li>
<li><a class="social-links__item social-links__item--facebook" href="#"><svg width="9" height="19"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook"></use></svg></a></li>
<li><a class="social-links__item social-links__item--youtube" href="#"><svg width="20" height="15"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-youtube"></use></svg></a></li>
</ul>
<div class="page-footer__developer">
<span>Разработано</span>
<a href="https://htmlacademy.ru/intensive/adaptive"><svg width="27" height="34"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo-html-academy"></use></svg></a>
</div>
</footer>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>