-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (131 loc) · 7.37 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=description content="Test landing page">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Вкуснадом!</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
</head>
<body class="landing">
<section class="landing__section section section_striped-once">
<header class="section__header_main">
<h1 class="section__header-title">Устали ходить за продуктами</h1>
<p class="section__header-subtitle">в магазин?</p>
</header>
<div class="section__row section__row_centered">
<div class="section__row-item helper__align-right helper__padding-10-30">
<img src="./img/image-header.png" alt="Корзина с продуктами" class="section__row-image">
</div>
<div class="section__row-item helper__padding-10-30">
<p class="section__text_small">А что, если мы вам предложим коробку с продуктами и рецептами на 3 ужина для двоих по специальной цене?</p>
<p class="section__text_small">Заманчиво? Спешите заказать! Доставим бесплатно.</p>
<button type="button" class="section__button section__button_margin-v-30">Заказать</button>
<p class="section__text_large helper__width-24rem">3 ужина на двоих всего за <span class="section__text_large_old">2000 Р</span> <span class="section__text_large_new">1600 Р</span></p>
<p class="section__text_smallest section__text_light">Успейте заказать до полуночи пятницы, чтобы получить коробку в воскресенье, 25 сентября.</p>
</div>
</div>
</section>
<section class="landing__section section">
<header class="section__divider">
<div class="section__divider-line">
</div>
<h2 class="section__divider-text">
Как это работает?
</h2>
<div class="section__divider-line">
</div>
</header>
<div class="section__row section__row_space-around helper__padding-h-50">
<div class="section__row-item card">
<div class="card__number helper__opacity-25">
1
</div>
<p class="card__content">Мы закупаем свежие продукты и наши шеф-повара создают для вас лучшие рецепты</p>
</div>
<div class="section__row-item card">
<div class="card__number helper__opacity-50">
2
</div>
<p class="card__content">Вы оформляете заказ на нашем сайте</p>
</div>
<div class="section__row-item card">
<div class="card__number helper__opacity-75">
3
</div>
<p class="card__content">Мы бесплатно доставляем коробку с продуктами и рецептами на 3 ужина до вашей двери</p>
</div>
<div class="section__row-item card">
<div class="card__number">
4
</div>
<p class="card__content">Вы готовите по нашему рецепту - 30 минут и ваш вкусный ужин готов!</p>
</div>
</div>
</section>
<section class="landing__section section">
<header class="section__divider">
<div class="section__divider-line">
</div>
<h2 class="section__divider-text">
Меню на 3 ужина
</h2>
<div class="section__divider-line">
</div>
</header>
<div>
<!-- 3rd party css classes are used here -->
<div class="carousel" data-flickity>
<div class="carousel-cell">
<img src="./img/slider.jpg" alt="Фото пасты с мясными шариками в томатном соусе с сыром">
<div class="carousel-cell-caption">
Паста с мясными шариками в томатном соусе с сыром
</div>
</div>
<div class="carousel-cell">
<img src="./img/slider.jpg" alt="Фото пасты с мясными шариками в томатном соусе с сыром">
<div class="carousel-cell-caption">
Паста с мясными шариками в томатном соусе с сыром
</div>
</div>
<div class="carousel-cell">
<img src="./img/slider.jpg" alt="Фото пасты с мясными шариками в томатном соусе с сыром">
<div class="carousel-cell-caption">
Паста с мясными шариками в томатном соусе с сыром
</div>
</div>
</div>
</div>
</section>
<section class="landing__section section section_striped-twice">
<header class="section__divider">
<div class="section__divider-line">
</div>
<h2 class="section__divider-text">
Не прощелкайте ;)
</h2>
<div class="section__divider-line">
</div>
</header>
<div class="section__form form">
<h3 class="form__header form__text_large">Закажите 3 ужина на двоих за <span class="form__text_new form__text_large">1600 Р</span></h3>
<p class="form__text_small form__text_light">Только на первый заказ</p>
<form action="" method="" accept-charset="utf-8">
<input class="form__input" type="text" name="name" placeholder="Ваше имя">
<input class="form__input" type="tel" name="phoneNumber" placeholder="Ваш телефон">
<input class="form__input" type="email" name="email" placeholder="Ваш email">
<input class="form__submit" type="Submit" value="Заказать">
</form>
<p class="form__text_small form__text_light">Успейте заказать до полуночи пятницы, чтобы получить коробку в воскресенье, 25 сентября. Доставка бесплатно!</p>
</div>
<footer class="section__footer">
<a class="section__footer-link" href="#">Условия обслуживания</a>
</footer>
</section>
</body>
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flickity@2/dist/flickity.css">
<script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js" async></script>
</html>