This repository has been archived by the owner on Jul 3, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
174 lines (171 loc) · 10.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
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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <base href="https://assets.htmlacademy.ru/content/skills/1/case-01/"> -->
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" type="text/css" href="style/responsive.css">
<title>Новости культуры</title>
</head>
<body>
<header class="main-header">
<div class="container">
<a>
<img class="d-flex justify-content-center mx-auto" src="img/logo.svg" alt="Новости культуры">
</a>
<nav class="main-header-nav navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="site-navigation topnav navbar-nav w-100 justify-content-between mx-auto" id="myTopnav">
<li class="site-navigation-item nav-item">
<a class="nav-link" href="#">Новости</a>
</li>
<li class="site-navigation-item nav-item">
<a class="nav-link" href="#">Обзоры</a>
</li>
<li class="site-navigation-item nav-item">
<a class="nav-link" href="#">Музыка</a>
</li>
<li class="site-navigation-item nav-item">
<a class="nav-link" href="#">Архитектура</a>
</li>
<li class="site-navigation-item nav-item">
<a class="nav-link" href="#">Кино</a>
</li>
<li class="site-navigation-item nav-item">
<a class="nav-link" href="#">Театр</a>
</li>
<li class="site-navigation-item nav-item">
<a class="nav-link" href="#">Литература</a>
</li>
<li class="site-navigation-item nav-item">
<a class="nav-link" href="#">Религия</a>
</li>
<li class="site-navigation-item nav-item">
<a class="nav-link" href="#">Живопись</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<main>
<h1 class="visually-hidden">Новости культуры</h1>
<section class="headline text-center">
<img src="img/headline-img.png" alt="headline logo">
<h2><a href="#">Подводный отель</a></h2>
<p>Как известно, Дубай – город контрастов. Самые революционные и фантастические мечты архитекторов способен воплотить в жизнь этот мегаполис, построенный на нефти и за счёт нефти.</p>
</section>
<section class="reviews">
<div class="container">
<h2>Обзоры</h2>
<ul class="reviews-list row">
<li class="reviews-item col-md-4">
<article>
<img src="img/monparnasse.jpg" alt="Сцена из спектакля «Шальные годы» Монпарнаса">
<h3 class="my-3"><a class="reviews-link" href="#">«Шальные годы» Монпарнаса</a></h3>
<p>В Музее изобразительных искусств имени Пушкина с 29 сентября по 29 ноября проходит выставка «Шальные годы Монпарнаса»</p>
</article>
</li>
<li class="reviews-item col-md-4">
<article>
<img src="img/clay-in-the-hands.jpg" alt="Кусок глины в руках">
<h3 class="my-3"><a class="reviews-link" href="#">Анатомия за 30 секунд</a></h3>
<p>Сейчас, когда мир открыт нараспашку для человека и его познавательных изысканий, интерес к научно-популярной литературе заметно вырос</p>
</article>
</li>
<li class="reviews-item col-md-4">
<article>
<img src="img/spherical-eccentrics.jpg" alt="Сцена из спектакля «Чудаки и зануды»">
<h3 class="my-3"><a class="reviews-link" href="#">Сферические чудаки</a></h3>
<p>Корреспондентам «Культурного обозревателя» посчастливилось побывать в театре «Сфера» на премьере спектакля «Чудаки и зануды»</p>
</article>
</li>
</ul>
</div>
</section>
<section class="promo">
<h2>Абонементы в театр</h2>
<ul class="promo-list col">
<li class="promo-item">
<h3>Скидка 50% на весь сезон 2020</h3>
<p>Покупая абонемент на сезон 2020 года вы сэкономите половину стоимости всех спектаклей</p>
</li>
<li class="promo-item">
<h3>Места у сцены</h3>
<p>Только для обладателей абонементов будет возможность сесть поближе к сцене</p>
</li>
<li class="promo-item">
<h3>Автограф-сессия актёров</h3>
<p>После спектаклей у вас будет возможность пообщаться с актёрами и взять у них автограф</p>
</li>
</ul>
<a href="#">Смотреть <i class="fas fa-arrow-right"></i></a>
</section>
</main>
<footer class="main-footer d-flex text-center">
<div class="container">
<div class="col">
<a>
<img src="img/white-logo.svg" alt="Новости культуры">
</a>
<ul class="footer-navigation justify-content-between">
<li class="footer-navigation-item">
<a href="#">Новости</a>
</li>
<li class="footer-navigation-item">
<a href="#">Обзоры</a>
</li>
<li class="footer-navigation-item">
<a href="#">Музыка</a>
</li>
<li class="footer-navigation-item">
<a href="#">Архитектура</a>
</li>
<li class="footer-navigation-item">
<a href="#">Кино</a>
</li>
<li class="footer-navigation-item">
<a href="#">Театр</a>
</li>
<li class="footer-navigation-item">
<a href="#">Литература</a>
</li>
<li class="footer-navigation-item">
<a href="#">Религия</a>
</li>
<li class="footer-navigation-item">
<a href="#">Живопись</a>
</li>
</ul>
<ul class="social-list d-flex justify-content-center">
<li class="social-list-item">
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
<li class="social-list-item">
<a href="#"><i class="fab fa-facebook"></i></a>
</li>
<li class="social-list-item">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</footer>
<!-- bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- livereload -->
<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')
</script>
</body>
</html>