-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
226 lines (220 loc) · 9.81 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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang = "ru">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width">
<meta name = "keywords" content = "Coffee, Coffee mug, Tea, Tea cup, Mug, Cup">
<meta name = "description" content = "The best place to buy design coffee mugs & tea cups">
<link rel = "stylesheet" href = "css/style.css">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
<title>CoffeeStyle</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="container header_container">
<div class="header__logo">
<img class="logo__img" src = "img/icons/logo.svg" alt = "CoffeeStyle.">
</div>
<div class="header__burger">
<span></span>
</div>
<nav class="header__menu">
<ul class="menu__list upper_text">
<li class="list__point"><a href = "javascript:scroll(0,0)">Home</a></li>
<li class="list__point"><a href = "#products">Our products</a></li>
<li class="list__point"><a href = "#blog">Blog</a></li>
<li class="list__point"><a href = "#about">About</a></li>
<li class="list__point"><a href = "#contact">Contact</a></li>
<li class="list__point"><a href = "#styleguide">Styleguide</a></li>
</ul>
</nav>
<div class="header__cart" >
<div class="cart__img">
<img src = "img/icons/cart.svg" alt = "cart image">
</div>
<p class="cart__name">Cart</p>
<p class="cart__count">0</p>
</div>
</div>
</header>
<main>
<div class="about_card" id="about">
<div class="container about_container">
<div class="about__text_up upper_text">
Best place to buy design
</div>
<h1>Coffee Mugs</h1>
<div class="about__text_down">
The most versatile furniture system ever created. Designed to fit your life, made to move and grow.
</div>
<div class="about__link">
<a href = "#products">Explore Our Products</a>
</div>
</div>
</div>
<div class="container">
<div class="description_card">
<h2 class="description__title">Even the all-powerful Pointing has no control about the blind texts.</h2>
<div class="description__text text">
It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.
One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
</div>
<div class="description__open_link">
<a href = "#">Read the full Story</a>
<span></span>
</div>
<div class="description__close_link">
<img src="img/icons/arrowUp.svg" alt="Arrow Up">
</div>
</div>
<div class="products_card" id="products">
<div class="featured__products">
<h3>Featured Mugs</h3>
<div class="swiper featured__swiper" data-mobile="false">
<div class="swiper-pagination featured__pagination"></div>
</div>
</div>
<div class="all__products">
<h3>More Products</h3>
<div class="swiper all__swiper" data-mobile="false">
<div class="swiper-pagination all__pagination"></div>
</div>
</div>
</div>
<div class="offer_card" id="styleguide">
<h3>Buy 2 mugs and get a coffee magazine free</h3>
<div class="offer_container">
<div class="offer__images">
<div class="images__big">
<img src = "img/offers/first.png" alt = "Empty book">
</div>
<div class="images__small">
<img src = "img/offers/second.png" alt = "Cup&Arms">
<img src = "img/offers/third.png" alt = "Cup with tea">
</div>
</div>
<div class="offer__content">
<p class="content__name upper_text">Premium Offer</p>
<p class="content__title title">Get our Coffee Magazine</p>
<div class="content__text text">
The most versatile furniture system ever created. Designed to fit your life.
</div>
<div class="content__link upper_text">
<a href = "#products">Start Shopping</a>
</div>
</div>
</div>
</div>
</div>
<div class="image_card"></div>
<div class="container">
<div class="blog_card" id="blog">
<h3>Behind the mugs, lifestyle stories</h3>
<div class="swiper container swiper_blog" data-mobile="false">
<div class="swiper-wrapper swiper-wrapper_blog">
<div class="card"><div class="blog__card">
<div class="card__img">
<img src = "img/blog/first.png" alt = "Cafe">
</div>
<h4>Health Check: why do I get a headache when I haven’t had my coffee?</h4>
<div class="card__text text">
It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
</div>
<div class="card__date upper_text">
October 9, 2018
</div>
</div></div>
<div class="card"><div class="blog__card">
<div class="card__img">
<img src = "img/blog/second.png" alt = "Cafe">
</div>
<h4>How long does a cup of coffee keep you awake?</h4>
<div class="card__text text">
It is a paradisematic country, in which roasted parts. Vel qui et ad voluptatem.
</div>
<div class="card__date upper_text">
October 9, 2018
</div>
</div></div>
<div class="card"><div class="blog__card">
<div class="card__img">
<img src = "img/blog/third.png" alt = "Cafe">
</div>
<h4>Recent research suggests that heavy coffee drinkers may reap health benefits.</h4>
<div class="card__text text">
It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
</div>
<div class="card__date upper_text">
October 9, 2018
</div>
</div></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="subscribe_card">
<h3>Sign up and get free coffee bags</h3>
<div class="subscribe__title title">Coffee Updates</div>
<form action = "#" method = "post" id="subscribe-form" class="subscribe_form error_in_form">
<input type = "email" name = "email" placeholder="customer@coffeestyle.io" id = "email-for-subscribe" class="subscribe_form__email">
<button type = "submit" class="subscribe_form__button">subscribe</button>
</form>
</div>
</main>
<footer class="footer">
<div class="container footer_container">
<div class="footer__company footer_column">
<div class="company__logo upper_text">
<img class="logo__img" src = "img/icons/logo.svg" alt = "CoffeeStyle.">
</div>
<div class="company__text text">
Delivering the best coffee life since 1996.<br> From coffee geeks to the real ones.
</div>
</div>
<div class="footer__menu footer_column">
<div class="menu__title upper_text">Menu</div>
<ul class="footer_menu__list">
<li class="footer_list__point"><a href = "javascript:scroll(0,0)">Home</a></li>
<li class="footer_list__point"><a href = "#products">Our products</a></li>
<li class="footer_list__point"><a href = "#blog">Blog</a></li>
<li class="footer_list__point"><a href = "#about">About</a></li>
<li class="footer_list__point"><a href = "#contact">Contact</a></li>
<li class="footer_list__point"><a href = "#styleguide">Styleguide</a></li>
</ul>
</div>
<div class="footer__follow footer_column">
<div class="follow__title upper_text">Follow Us</div>
<ul class="follow__list">
<li class="footer_list__point"><a href = "https://facebook.com" target="_blank">Facebook</a></li>
<li class="footer_list__point"><a href = "https://instagram.com/" target="_blank">Instagram</a></li>
<li class="footer_list__point"><a href = "https://pinterest.ru/" target="_blank">Pinterest</a></li>
<li class="footer_list__point"><a href = "https://twitter.com" target="_blank">Twitter</a></li>
</ul>
</div>
<div class="footer__contact footer_column" id="contact">
<div class="contact__title upper_text">Contact Us</div>
<div class="contact__text text">
We’re Always Happy to Help
<div class="contact__email">
<a href = "mailto:us@coffeestyle.io">us@coffeestyle.io</a>
</div>
</div>
</div>
</div>
<div class="footer__copyright container">
<span>CoffeeStyle Inc. © 1996</span>
<span>Powered by Webflow</span>
</div>
</footer>
</div>
<script type="module">
import Main from "./js/index.js"
const main = new Main();
main.render()
</script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
</body>
</html>