-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
262 lines (238 loc) · 14.9 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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="en"> <!-- Основной язык сайта -->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/css/style.css"> <!-- Путь к css документу со стилями -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!-- Ссылка с GoogleFonts на стили -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fontawesome-free-6.0.0-web/css/all.css">
<link rel="stylesheet" href="jquery.mCustomScrollbar.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/81f3a44f30.js" crossorigin="anonymous"></script>
<title>Happy box</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#nav").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 1500);
});
});
</script>
<div class="header" id="nav">
<div class="containerr">
<div class="header__inner">
<a class="header__logo" href="#offer">
<i class="fa-solid fa-gift"></i>
<div class="header__logo__text">Happy box</div>
</a>
<nav class="nav">
<a class = "nav__link" href = "#advantage">advantage</a>
<a class = "nav__link" href = "#experiences">experiences</a>
<a class = "nav__link" href = "#delivery">delivery</a>
<a class = "nav__link" href = "#tastes">tastes</a>
<a class = "nav__link" href = "#review">reviews</a>
<a class = "telephone__link" href = "#">+123 45 6789 6789</a>
</nav>
</div>
</div>
</div>
<div class="offer" id="offer">
<div class="container">
<div class="scale">
<h1 class = "Make_a_gift_with">Make a gift with</h1>
<h1 class = "macaroons">macaroons</h1>
<h1 class = "descryption">Shop macaroons boxes and pyramids, the perfect gift with nationwide shipping.</h1>
<a href="" class="gradient-button">order now</a>
</div>
<div class="square1"></div>
<div class="square2"></div>
<div class="pic1Scale">
<div class="picture1"></div>
<div class="pic1Text">Birthday macaroons set</div>
</div>
<div class="pic2Scale">
<div class="picture2"></div>
<div class="pic2Text">Rainbow macaroons set</div>
</div>
</div>
</div>
<div class="benefits" id="advantage">
<div class="container2">
<div class="benefitsSquare" style="margin-left: 75px;">
<div class="cake"></div>
<div class="advantageText">Create gifts</div>
<div class="advantageDescryption">We offer a wide range of gifts ranging from sweet biscuits to our own baked cakes. Its a great opportunity to make a gift to your relatives and friends.</div>
</div>
<div class="benefitsSquare" style="margin-left: 505px;">
<div class="truck"></div>
<div class="advantageText">Fast delivery</div>
<div class="advantageDescryption">We will deliver your delicious treats as soon as possible. We have not only tasty, but also fast delivery and high quality.</div>
</div>
<div class="benefitsSquare" style="margin-left: 935px;">
<div class="packages"></div>
<div class="advantageText" style="margin-top: -55px;">Big choice</div>
<div class="advantageDescryption">Even if you do not know what is better to order, it does not matter. Our best confectioners and critics will help you make the right choice</div>
</div>
</div>
<div class="container3", style="margin-top: -40px;" id="experiences">
<div class="advantageText2">Create positive emotional experieces around you</div>
<div class="menuBox">
<div class="miniSquare">
<div class="gifts"></div>
</div>
<div class="menuBoxText">Make your friends happy</div>
<div class="menuBoxDescryption">Bring her one of her favorite treats. You know what your friend likes. Maybe she can't live without an afternoon coffee, or maybe she has a penchant for black forest cake. Surprise her by bringing one of them to her when you know she's having a rough day.</div>
<div class="miniSquare" style="margin-top: 65px;">
<div class="heart"></div>
</div>
<div class="menuBoxText">Show them your love</div>
<div class="menuBoxDescryption">Do you know what your S.O.’s favorite snack is? Pick it up on your way to see them. It is a simple and easy way to put a smile on their face. It will also show them you know them like the back of your hand.</div>
<div class="miniSquare" style="margin-top: 65px;">
<div class="plane"></div>
</div>
<div class="menuBoxText">Send him or her a card or postcard</div>
<div class="menuBoxDescryption">Not many people get handwritten notes anymore. It's so rare, in fact, that it's bound to put a smile on her face. Drop a note in the mail to her. If you include one with a funny card, that's a bonus.</div>
</div>
<div class="square3"></div>
<div class="square4"></div>
<div class="square5"></div>
<div class="pic3Scale">
<div class="picture3"></div>
<div class="pic3Text">Alice, 23 y.o. teenager</div>
</div>
<div class="pic4Scale">
<div class="picture4"></div>
<div class="pic4Text">Kate, 25 y.o. professional model</div>
</div>
<div class="pic5Scale">
<div class="picture5"></div>
<div class="pic5Text">Jane, 24 y.o. experienced visagiste</div>
</div>
</div>
</div>
<div class="nextOffer" id="delivery">
<div class="container4">
<div class="square6">
<div class="pic6Scale">
<div class="picture6"></div>
</div>
<div class="pic6Text">Bob, working as a delivery man in our company for 6 years</div>
</div>
<div class="deliveryText">Productive and effective place</div>
<div class="deliveryDescryption">I've got a huge experience working for that company because I have learned a lot and I appreciate everything and just advice everyone looking for work where you can work with your own team. I like seeing smile on people's faces. Thats what makes me feel better, and thats when i understand, thats my mission is not only to deliver, but also to give happiness.</div>
<div class="deliveryDescryption" style="margin-top: 285px;">Me and my team deliver everything as fast as it even possible. We working on how to improve the delivery process because we all understand what is the feeling when you are waiting for the tasty macaroons and other treats. If we are late with our delivery, we always give some bonuses to our clients. Wanna challenge us? :)</div>
<div class="deliveryNum">01</div>
<div class="deliveryPlus">tasty</div>
<div class="deliveryNum" style="margin-left: 185px;">02</div>
<div class="deliveryPlus" style="margin-left: 225px;">fast</div>
<div class="deliveryNum" style="margin-left: 300px;">03</div>
<div class="deliveryPlus" style="margin-left: 340px;">emotional</div>
</div>
<div class="container5" id="tastes">
<div class="tasteText">Choose to your</div>
<div class="taste">taste</div>
<div class="tasteDescryption">Taste is one of the five senses that people have. When you have food or drink in your mouth, your sense of taste makes it possible for you to recognize what it is.</div>
<div class="heeeee">
<div class="littleSquare"></div>
<div class="bigSquare"></div>
<div class="littleSquare" style="margin-left: 955px;"></div>
<div class="littleSquare" style="margin-left: 1275px;"></div>
<div class="circle"></div>
<div class="circle" style="margin-left: 880px;"></div>
<div class="macaroon1"></div>
<div class="macaroon2"></div>
<div class="macaroon2Text">Fruits macaroon set</div>
<div class="macaroon2Descryption">This set consists of macaroons is made with the ussage of natural fruits juice, such as apple, mango, strawbery, lemon, orange, etc.</div>
<div class="macaroon2Price">$24</div>
<div class="macaroon2PriceDescryption">for 16 macaroons</div>
<a href="" class="orderButton">order now</a>
<div class="macaroon3"></div>
<div class="macaroon4"></div>
<div class="littleCircle"></div>
<div class="littleCircle" style="margin-left: 585px;"></div>
<div class="littleCircle" style="margin-left: 605px;"></div>
<div class="sliderMain"></div>
<div class="littleCircle" style="margin-left: 695px;"></div>
<div class="littleCircle" style="margin-left: 715px;"></div>
<div class="littleCircle" style="margin-left: 735px;"></div>
</div>
<i class="fa-solid fa-angle-left"></i>
<i class="fa-solid fa-angle-right"></i>
</div>
</div>
<div class="saleOffer">
<div class="saleIcon"></div>
<h3 class="float-text">Sign up now to get 10% off your first order</h3>
<div class="searchBar">
<h4 class="emailTxt">Enter your email address</h4>
<a href="#">
<i class="fa-solid fa-arrow-right" style="color: #7f74ff;"></i>
</a>
</div>
<div class="block"></div>
</div>
<div class="reviews" id="review">
<div class="reviewsBlock">
<div class="circleReviewL"></div>
<div class="circleReviewR"></div>
<div class="person1"></div>
<div class="person2"></div>
<div class="person3"></div>
<div class="person4"></div>
<div class="person5"></div>
<div class="person6"></div>
<div class="person7"></div>
<h4 class="personName">Mark Shvenser</h4>
<h4 class="commentTxt">Our order arrived much faster than last yea. More people must be shopping at the store. I wish we could. My wife is at high risk for Covid complications and most recently was told that he cannot drive. Truly miss coming out there. My family likes tasty macaroons, and this is a best shop to buy some of them. Fast delivery, kind peronal, nothing to add. Just a greate place for everyone who wants to have a great time.</h4>
<a href="#">
<i class="fa-solid fa-arrow-right" style="color: #7f74ff; margin-top: 137px; font-size: 26px; margin-left: 705px;"></i>
<i class="fa-solid fa-arrow-left" style="color: #7f74ff; margin-top: -32px; font-size: 26px; margin-left: -30px; position: absolute;"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-facebook-square"></i>
</a>
<a class="read__link" href="#">read more</a>
<div class="littleCircle" style="margin-left: 265px; margin-top: 320px;"></div>
<div class="littleCircle" style="margin-left: 285px; margin-top: 320px;"></div>
<div class="littleCircle" style="margin-left: 305px; margin-top: 320px;"></div>
<div class="sliderMain" style="margin-top: 320px; margin-left: 325px;"></div>
<div class="littleCircle" style="margin-left: 395px; margin-top: 320px;"></div>
<div class="littleCircle" style="margin-left: 415px; margin-top: 320px;"></div>
<div class="littleCircle" style="margin-left: 435px; margin-top: 320px;"></div>
</div>
</div>
<div class="subscribe">
<a class="header__logo" style="width: 170px; justify-content: unset; margin-left: 120px; position: absolute; margin-top: 45px;" href="#offer">
<i class="fa-solid fa-gift"></i>
<div class="header__logo__text">Happy box</div>
</a>
<div class="underLogoTxt">Join us and feel sweets power on yourself. We apreciate every client, try to make their days better.</div>
<h2 style="position: absolute; margin-left: 720px; margin-top: 45px; font-weight: 400;">Subscribe us</h2>
<div class="searchBar" style="left: -3%; margin-top: 100px; position: absolute;">
<h4 class="emailTxt">Enter your email address</h4>
<a href="#">
<i class="fa-solid fa-envelope" style="color: #7f74ff; position: absolute; margin-left: -845px; margin-top: -10px;"></i>
<i class="fa-solid fa-arrow-right" style="color: #7f74ff; position: absolute; margin-left: -400px; margin-top: -7px;"></i>
</a>
</div>
<div class="block" style="margin-top: 130px; position: absolute; width: 460px; margin-left: 215px;"></div>
<div class="contacts">
<h3 style="font-weight: 400;">Minsk. Kyprievicha str, 6</h3>
<h3 style="font-weight: 400; margin-top: 5px; margin-left: 55px;">+1-267-759-9000</h3>
<h3 style="font-weight: 400; margin-top: 5px; margin-left: -40px;">[email protected]</h3>
</div>
<a href="#">
<div class="icons">
<i class="fa-solid fa-bullseye"></i>
<i class="fa-solid fa-message" style="margin-top: 5px;"></i>
<i class="fa-solid fa-reply" style="margin-top: 7px;"></i>
</div>
</a>
<h3 style="text-align: center; top: 80%; font-weight: 400; position: relative; color: #7f74ff;">Welcome! Be free to buy something, and our tasty macaroons will make your day.</h3>
</div>
</body>
</html>