-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (167 loc) · 11.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
175
176
177
178
179
<!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>expertsender</title>
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div class="page">
<header class="header">
<div class="header__inner">
<div class="header__top">
<img class="header__logo" src="images/logo.png" alt="expertsender logo">
<ul class="header__list">
<li class="header__list-item">
<a class="header__link" href="#">
Открыть в браузере
</a>
</li>
<li class="header__list-item">
<a class="header__link" href="#">
Отписаться
</a>
</li>
</ul>
</div>
<div class="inner">
<h1 class="header__title">
Вдохновению нет предела:<br><span class="header__subtitle">летний шопинг</span>
</h1>
</div>
</div>
</header>
<div class="wrapper">
<div class="container">
<section class="entry">
<div class="inner">
<img class="entry__img" src="images/top-picture.png" alt="top picture">
<h2 class="entry__title">
Привет, Софи!
</h2>
<p class="entry__text text">
Вдохновение - это очень уж странный предмет… если оно есть, то его сразу нет.<br>Еженедельная подборка интересных идей поможет избежать творческого кризиса в нашей компании :)
</p>
</div>
</section>
<section class="product" id="products">
<div class="inner product__inner">
<a class="button button--center" href="#products">
<span class="button__text">Поймай вдохновение</span>
<span class="button__background"></span>
<span class="button__border"></span>
</a>
<ul class="product__list">
<li class="product__list-item">
<a class="product__poster-container" href="#">
<span class="product__poster-frame product__poster-frame--top"></span>
<img class="product__poster" src="images/product01.png" alt="product01">
<span class="product__poster-frame product__poster-frame--bottom"></span>
</a>
<p class="product__text text">
Не банальное расположение товаров в письме и подборка нескольких вещей из каждой коллекции помогают быстро собрать подходящий образ.
</p>
<a class="button button--product" href="#">
<span class="button__text button__text--product">Хочу увидеть</span>
<span class="button__background button__background--product"></span>
<span class="button__border button__border--product"></span>
</a>
</li>
<li class="product__list-item">
<a class="product__poster-container" href="#">
<span class="product__poster-frame product__poster-frame--top"></span>
<img class="product__poster" src="images/product02.png" alt="product02">
<span class="product__poster-frame product__poster-frame--bottom"></span>
</a>
<p class="product__text text">
Познакомить подписчика с персональным VIP-шопером - отличный ход для того, чтобы побудить к покупке и повысить лояльность к бренду.
</p>
<a class="button button--product" href="#">
<span class="button__text button__text--product">Хочу увидеть</span>
<span class="button__background button__background--product"></span>
<span class="button__border button__border--product"></span>
</a>
</li>
<li class="product__list-item">
<a class="product__poster-container" href="#">
<span class="product__poster-frame product__poster-frame--top"></span>
<img class="product__poster" src="images/product03.png" alt="product03">
<span class="product__poster-frame product__poster-frame--bottom"></span>
</a>
<p class="product__text text">
Компании могут приглашать к благотворительной деятельности своих подписчиков, рассказывая о миссии и используя интересный дизайн.
</p>
<a class="button button--product" href="#">
<span class="button__text button__text--product">Хочу увидеть</span>
<span class="button__background button__background--product"></span>
<span class="button__border button__border--product"></span>
</a>
</li>
<li class="product__list-item">
<a class="product__poster-container" href="#">
<span class="product__poster-frame product__poster-frame--top"></span>
<img class="product__poster" src="images/product02.png" alt="product04">
<span class="product__poster-frame product__poster-frame--bottom"></span>
</a>
<p class="product__text text">
Не знаешь какую фотографию выбрать для баннера, сделай стильный коллаж.
</p>
<a class="button button--product" href="#">
<span class="button__text button__text--product">Хочу увидеть</span>
<span class="button__background button__background--product"></span>
<span class="button__border button__border--product"></span>
</a>
</li>
</ul>
</div>
</section>
<section class="complition" id="bonus">
<div class="inner">
<a class="button button--center" href="#bonus">
<span class="button__text">Мелочь, а приятно</span>
<span class="button__background"></span>
<span class="button__border"></span>
</a>
<p class="complition__text text">
Забавный сайт - «мяукалка» <a class="complition__link" href="#">Сatsoundboard.com.</a><br>Наводишь курсор - тебе в ответ «мяу», от самого тоненького до густого баса.
</p>
<img class="complition__img" src="images/cat.png" alt="cute cat">
<p class="complition__text text">
С порцией вдохновения,<br>отдел Клиентского счастья
</p>
</div>
</section>
<footer class="footer">
<div class="footer__top">
<div class="inner footer__inner">
<a class="footer__link" href="#">
<svg class="footer__img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="21" viewBox="0 0 21 21">
<image id="speech-bubble" width="21" height="21" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAABH0lEQVQ4ja2VvytGURjHPxQZFSUGKZKJwaD8+gMsDN5SFgZ/mcVgMFgslPzKZjKRSJQMpjd3+eqrc0rH+9b7dp9P3XvucM6n5zz3PM/pkUQbloDNNE4AA8A38ARcAofARcullhbPpKRjdYbnTZWOUtiQVHUozFRpXUvpepeyko3syjkdAd7bJbcLxoC33jR/P0BoDvxypDPAfZDUzDvS3UCh2bN0NVi67O1/AMOB0i9LK6AvUFp5+81AoWla+hAsfbH0PFh65ZzOAneB0oVc96c16z5z/behDEl6DJCO25dr/xO4qbntbeD590vSoqSjmhHulP20jvBM0lzZ+f33B4EtYC3dRW6wPrs+atPACjAK9LtagFfgNt1RJ/+SAPwApbFXcbY2uFoAAAAASUVORK5CYII="/>
</svg>
</a>
<a class="footer__link" href="#">
<svg class="footer__img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" viewBox="0 0 22 22">
<image id="pinterest-logo" width="22" height="22" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAACL0lEQVQ4jY2VOWhVURCGvzxTiRgCTw3uCSTGFSzEQlxArYyFqIVisBHBxspORNBCC7GK2iqiENTCUiIouCEWSoxbAkFE4pKIYiAoxvfLgbkwGc59ZuAyc/+Z898zc+bOaZBEiVSBPcBWYBUwD2gAvgADwD3gFvA5uzoRZ54Tkn7q/zIh6VSOIwLzJT2bBmGUfkmtnsuXIqX6AmjJJDYMvAcmgCZguZXKy3dgDfAxluJ1ZieXJK0uKdcBSQMhfjiW4ngI+CFpvSPpkNQt6ZCkjeEDV8PaswXx7OCoSWp3hI8ymQxJ2uzIHwd/NYFHAnjUghfbqRcymfnAUottDfixBN52wFe3i4eG3U87sI55Gwh6XPwDh9+tACvdyfaZXghsAGrATmAMGAEuh07odPZzZ3dUQnt9Mr3W9CAw7vxLAvEfZ9ec3VwJgU2mv5me6Xzpd94V4kecPWeKx3qvkHdWr4qdfJJOwzZlDu+gq/Ebh39IO37lawPst7R6DBszvTfs9jfQa/ayUO+hRuAO0OXAa8AksN1SLYhHA3E38MvsM8HXl1JozqRYyOnwl6X3K5J2OGx3Zl1L4TxZQtxl/i2S1mXmxeHMmvNxuqXWag8pVa1DrgP7gAs26VKLbnNt6btkQdEVfhaPui8/cb6ndcpVyLiktrJBv0jSSwu8adisaZAO2sAqvUH8KLwoKZWqtw7hX0nnJDVGjnqX6Qx7Uq+uAOYanmqeziNdpjfsZpkqwD/Hvzbo+Bi45wAAAABJRU5ErkJggg=="/>
</svg>
</a>
<a class="footer__link" href="#">
<svg class="footer__img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="18" viewBox="0 0 20 18">
<image id="sladeshare1600" width="20" height="18" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAABiElEQVQ4jZ2UTyuFQRTGnysk/3KxwoJwS+6KLyAbygLJxkLKXtbyMaQIn8HOn68gUXb+bthRKAqXn+Z25jbGqHs99b7nfc+Z5zln5syMAP8sAAUqh+Msep2Me0nqlXQp6UrSnirDuKQ+Sf1FDVOesrqGg4rLfYaM6zRUZbW8mc1WWJ1Da6jhBTFb/Q9BzyEU9MiYbZK0JWlf0nQQnzTfto1RwPmh/m62YNYRZu17LFiK3YDbImlG0keo4QSbgzX0U++OKq9NTLUn+n8rVg1sAM/WqZx1NgscAqfActDtJeDEYm3myxn3Edh0jgHg2pxu4ATQCLQD+cTWyVuswcYeGPcGGAwHrkRnxGV8Al6BOaDeZvJksRCrXifO3mbTLBdnVm1JI942D4kGfEnakXSaaEyNpPvQ4c+yR6ek2wTR7zUSsS5Jd/4nPhkvVlFceYekz4SYS+A4JcTER0lHCaJLXJfwHxsnSPF7W4wkGuIW3jUsxmjM/+uKmgfOgXtgPfCvme/CLuSfPNA3x/RR6SyHd6AAAAAASUVORK5CYII="/>
</svg>
</a>
</div>
</div>
<div class="inner">
<p class="footer__text">
Вы получили это сообщение, потому что мы вас любим и хотим, <span class="nobr">чтобы муза была всегда неподалеку от вас :)</span><br>Отписаться от рассылки вы, конечно, можете, перейдя по ссылке, <span class="nobr">но мы будем грустить.</span>
</p>
</div>
</footer>
</div>
</div>
</div>
</body>
</html>