-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (145 loc) · 7.03 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HTML Academy: Cat Energy</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header class="page-header">
<div class="page-header__wrapper">
<img class="page-header__logo-image" src="img/logo-mobile.png" width="35px" height="35px" alt="Logo">
<img class="page-header__title" src="img/slogan-logo.png" alt="CAT ENERGY">
<img class="page-header__title-logo-image" src="img/logo-name-tablet.png" alt="Logo">
<nav class="main-nav main-nav--closed main-nav--nojs">
<button class="main-nav__toggle" type="button"><span class="visually-hidden">Open menu</span></button>
<ul class="main-nav__list site-list">
<li class="site-list__item site-list__item--active"><a>Main</a></li>
<li class="site-list__item"><a href="catalog.html">Catalog</a></li>
<li class="site-list__item"><a href="options.html">Choose the programm</a></li>
</ul>
</nav>
</div>
<img class="background-image" src="img/background.png">
</header>
<main class="main">
<section class="slogan">
<div class="slogan__wrapper">
<h1 class="slogan__title">Functional meal <br>for cats.</h1>
<p class="slogan__add-info">Do you take care of yourself? <br>
Take care of a cat as well!</p>
<a class="slogan__link button" href="programm.html">Choose the programm</a>
</div>
<img class="slogan__image" src="img/slogan-image.png" alt="Example of product">
<a class="slogan__link--extra button" href="options.html">Choose the programm</a>
</section>
<section class="options">
<div class="options__wrapper">
<ul class="options__list">
<li class="options__item">
<h3 class="options__title options__title--lose">Lose weight</h2>
<p class="options__description">The weight of your cat is more than of your dog? and he can't jump and climb on the trees anymore? So it is a diet time!<br> Cat Energy SLIM will help your pet to lose weight!</p>
<a class="options__arrow" href="catalog.html">Catalog SLIM</a>
</li>
<li class="options__item">
<h3 class="options__title options__title--gain">Gain weight</h2>
<p class="options__description">Earn credibility among alley cats and even dogs on the street!? <br>Cat Energy PRO will help your pet to gain weight!</p>
<a class="options__arrow" href="catalog.html">Catalog PRO</a>
</li>
</ul>
</div>
</section>
<section class="benefits">
<div class="benefits__wrapper">
<h3 class="main-title">How does it work?</h3>
<ul class="benefits__list">
<li class="benefits__item">Only healthy nutrition are the ingridients of this functional meal</li>
<li class="benefits__item">Produced as a powder which requires only to pour it with boiled water</li>
<li class="benefits__item">Replase one or two your usual daily food intakes with our functional meal </li>
<li class="benefits__item">After just one month you already can enjoy the first results</li>
</ul>
</div>
</section>
<section class="example">
<h3 class="main-title example__extra-title">Real example</h3>
<div class="example__wrapper">
<div class="example__extra-wrapper">
<h3 class="main-title example__title">Real example</h3>
<p class="example__info">Boris has lost 5 kilos in 2 months just after replacing his usual meal with our functional feeding Cat Energy Slim. Perfect result without exhausting workouts! And meanwhile he didn't change his habbits and he is still sleaping 16 hours a day.</p>
<div class="example__numbers">
<p class="example__numbers__kilo">5 kilo</p>
<p class="example__numbers__days">60 days</p>
</div>
<p class="example__expenses">Expenses on feeding: 300 euro</p>
</div>
<div class="example__cat-wrapper">
<img class="example__cat example__cat--fat block" src="img/fat-cat.png" alt="Cat as an example" height="500px">
<img class="example__cat example__cat--slim none" src="img/slim-cat.png" alt="Cat as an example" height="500px">
<ul class="choose-cat">
<li class="choose-option">
<label for="cat-fat">
<input class="visually-hidden filter-input" type="radio" name="option" id="cat-fat" checked>
<span class="radio-indicator--left"></span>
Before</label>
</li>
<li class="choose-option">
<label for="cat-slim">
<input class="visually-hidden filter-input" type="radio" name="option" id="cat-slim">
<span class="radio-indicator--right"></span>
After</label>
</li>
</ul>
</div>
</div>
</section>
<section class="for-dilers">
<p class="for-dilers__p"><b>We are inviting dillers for cooperation!</b></p>
<p class="for-dilers__p">str. Bolshaya Konushennaya, build.19/8, Sait-Petersburg</p>
</section>
<div class="map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d1998.6076646602064!2d30.317445718702146!3d59.93865214663683!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2snl!4v1563892981162!5m2!1sru!2snl" width="100%"
height="400px" frameborder="0" style="border:0" allowfullscreen></iframe>
<img class="map-pin" src="img/map-pin.png" alt="We are here!">
</div>
</main>
<footer class="page-footer">
<div class="page-footer__wrapper">
<img class="footer-logo" src="img/slogan-logo.png" alt="CAT ENERGY" width="90">
<div class="page-footer__social social">
<ul class="social__list">
<li class="social__item">
<a class="social__link social__link--vkontakte" href="#" area-label="Vkontakte"><img src="img/vk.png" height="" alt="Logo Vkontakte"></a>
</li>
<li class="social__item">
<a class="social__link social__link--insta" href="#" area-label="Instagram"><img src="img/insta.png" height="" alt="Logo Insta"></a>
</li>
<li class="social__item">
<a class="social__link social__link--facebook" href="#" area-label="Facebook"><img src="img/fb.png" height="" alt="Logo Facebook"></a>
</li>
</ul>
</div>
<div class="page-footer__copyright copyright">
<a class="copyright__link" href="https://htmlacademy.ru/intensive/adaptive">HTML Academy</a>
<img src="img/logo-html.svg" alt="Logo HtmlAcademy">
</div>
</div>
</footer>
<script>
var navMain = document.querySelector('.main-nav');
var navToggle = document.querySelector('.main-nav__toggle');
navMain.classList.remove('main-nav--nojs');
navToggle.addEventListener('click', function() {
if (navMain.classList.contains('main-nav--closed')) {
navMain.classList.remove('main-nav--closed');
navMain.classList.add('main-nav--opened');
} else {
navMain.classList.add('main-nav--closed');
navMain.classList.remove('main-nav--opened');
}
}
);
</script>
</body>
</html>