-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.sass
527 lines (511 loc) · 10.2 KB
/
style.sass
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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
$width: 2053px
*
margin: 0
padding: 0
font-family: Montserrat, sans-serif
html, body
height: 100%
body
display: flex
flex-direction: column
.content
flex: 1
.container
width: $width
margin: 0 auto
display: block
box-sizing: border-box
&_flex
display: flex
justify-content: space-between
&__nav
display: flex
justify-content: space-between
padding: 35px 136px 55px 136px
.search
font-size: 0
&__input
height: 30px
padding: 0 10px
border: 1px solid #e7e7e7
box-sizing: border-box
background-color: transparent
border-right: none
outline: none
width: 154px
&__button
height: 30px
box-sizing: border-box
background-color: transparent
border: 1px solid #e7e7e7
border-left: none
padding-right: 11px
outline: none
cursor: pointer
.product
position: relative
letter-spacing: 1.05px
&__price
color: #9a9a9a
font-size: 21px
font-weight: 300
position: absolute
top: 15px
left: 15px
&_old
display: inline-block
text-decoration: line-through
margin-right: 15px
&__sub
letter-spacing: 1.05px
position: relative
top: -7px
font-size: 10px
&__hover
position: absolute
width: 100%
top: 0
box-shadow: 0 0 10px rgba(0,0,0,0.5)
visibility: hidden
&__top
width: 100%
height: 100%
display: flex
flex-direction: column
&__images
display: flex
flex-direction: column
align-items: flex-end
img
padding-right: 16px
padding-top: 16px
&__info
text-align: center
color: white
font-size: 48px
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.13)
padding-top: 71px
&__bottom
text-align: center
padding: 20px 35px
box-sizing: border-box
border-top: 1px solid #eee
background-color: #fff
margin-top: 145px
&__name
color: #727272
font-size: 13px
font-weight: 400
&__description
color: #8e8c8c
font-family: Roboto, sans-serif
font-size: 14px
font-weight: 400
padding-top: 15px
&__icons
padding-top: 15px
i
padding: 6px
border-radius: 50%
background-color: #727272
color: white
&:hover
background-color: #00c8c8
cursor: pointer
&:hover &__hover
visibility: visible
z-index: 1
a
text-decoration: none
.header
background-color: #333
height: 45px
&__container
height: 100%
display: flex
justify-content: space-between
align-items: center
&__left
margin-left: 441px
&__right
margin-right: 442px
&__price
color: #777777
font-size: 13px
font-weight: 400
&__link
color: #999999
font-size: 13px
font-weight: 400
line-height: 20px
&:first-child
margin-right: 20px
&__shopping-cart
margin-left: 82px
display: inline-block
background-color: #00c8c8
line-height: 46px
padding: 0 23px
color: #ffffff
font-size: 13px
font-weight: 400
i:first-child
margin-right: 22px
font-size: 17px
i:last-child
margin-left: 10px
.index
position: relative
height: 919px
background-color: #f8f8f8
&__nav
top: 0
position: absolute
&__container
background: url(img/index-main.png) 230px no-repeat #f8f8f8
height: 100%
display: flex
justify-content: center
align-items: center
&__heading
color: #575153
font-size: 450px
font-weight: 700
letter-spacing: 190px
.nav
box-sizing: border-box
padding: 0 136px
height: 112px
&__right
display: flex
&__logo
color: #222222
font-size: 24px
font-weight: 400
letter-spacing: 1.2px
span
font-weight: 700
&__menu
margin-right: 115px
display: flex
align-items: center
&__link
font-size: 13px
font-weight: 400
line-height: 20px
color: #222
&:hover
color: #00c8c8
&:not(:last-child)
margin-right: 30px
.products
margin-top: 60px
&__ul
display: flex
list-style-type: none
border-top: 1px solid #eee
padding-top: 50px
padding-bottom: 60px
margin: 0 140px
&__li
color: #727272
font-size: 13px
font-weight: 400
margin-right: 55px
&__grid
display: grid
grid-template-columns: repeat(4, 420px)
grid-template-rows: 500px 174px 500px
grid-column-gap: 30px
grid-row-gap: 30px
margin: 0 140px
padding-bottom: 60px
border-bottom: 1px solid #eee
&__item
background-color: #f8f8f8
&__item:nth-child(3)
grid-column: 3 / 5
grid-row: 1 / 3
text-align: center
.product__bottom
margin-top: 349px
.product__icons
margin-top: 18px
&__item:nth-child(4)
grid-column: 1 / 3
grid-row: 2 / 4
text-align: center
.product__bottom
margin-top: 349px
.product__icons
margin-top: 18px
.footer
flex-shrink: 0
display: flex
flex-direction: column
&__top
background-color: #f8f8f8
&__container_top
padding: 0 441px
&__nav
display: flex
justify-content: space-between
&__ul
list-style-type: none
&__heading
color: #575153
font-size: 13px
font-weight: 400
line-height: 20px
margin-bottom: 30px
margin-top: 60px
&__li
margin-bottom: 10px
&:last-child
margin-bottom: 60px
&__link
display: block
color: #727272
font-size: 14px
font-weight: 300
&__p
color: #727272
font-size: 14px
font-weight: 300
&__blocks
display: flex
justify-content: space-between
margin-bottom: 56px
&__awards
background-color: #333
text-align: center
padding: 60px 55px
h3
color: #ffffff
font-size: 36px
font-weight: 700
letter-spacing: 1.8px
h3:last-child
font-weight: 300
&__external
font-size: 36px
background-color: #00c8c8
display: flex
&__external-link
display: block
margin-top: 83px
margin-bottom: 83px
margin-right: 55px
color: white
&:last-child
margin-right: 148px
&:first-child
margin-left: 148px
&__bottom
background-color: #333
line-height: 45px
&__container_bottom
display: flex
justify-content: space-between
font-size: 13px
font-weight: 400
padding: 0 441px
&__copyright
color: #999999
&__creators
display: flex
color: #777777
&__creator:first-child
margin-right: 30px
.lookbook
display: flex
width: 663px
background-color: #f8f8f8
text-align: right
justify-content: space-between
padding-top: 43px
box-sizing: border-box
margin-bottom: 125px
margin-top: 62px
&:first-child
padding-left: 39px
&:last-child
padding-left: 39px
&__content
margin-right: 57px
width: 294px
&__header
color: #575153
font-size: 45px
font-weight: 700
letter-spacing: 2.4px
margin-top: 90px
span
font-weight: 300
&__p
color: #727272
display: inline-block
font-family: Roboto, sans-serif
font-size: 15px
font-weight: 400
line-height: 22px
margin-top: 25px
&__button
color: #454647
font-size: 16px
font-weight: 400
letter-spacing: 3.2px
box-sizing: border-box
line-height: 59px
background-color: #f8f8f8
border: 2px solid #737373
padding: 0 33px
margin-top: 30px
.image
background-image: url("img/brand-top.png"), url("img/brand.jpg")
display: flex
justify-content: center
align-items: center
flex-direction: column
padding: 150px 0
margin-bottom: 60px
&__heading
color: #ffffff
font-size: 48px
font-weight: 300
letter-spacing: 2.4px
margin-bottom: 37px
span
font-weight: 700
&__slogan
color: #ffffff
font-size: 30px
font-weight: 400
letter-spacing: 1.5px
.brand
margin-bottom: 120px
&__container
width: 1170px
&__heading
color: #ffffff
font-size: 48px
font-weight: 300
letter-spacing: 2.4px
margin-bottom: 37px
span
font-weight: 700
&_padding_60
padding-top: 60px
&_size_m
color: #575153
font-size: 18px
font-weight: 400
margin-bottom: 25px
letter-spacing: normal
&_size_s
color: #727272
font-size: 13px
font-weight: 400
text-transform: uppercase
margin-bottom: 15px
letter-spacing: normal
&__text
color: #8e8c8c
font-family: Roboto, sans-serif
font-size: 15px
font-weight: 400
line-height: 22px
overflow: hidden
a
color: #00c8c8
font-family: Roboto, sans-serif
&_margin_60
margin-bottom: 60px
&_last
width: 570px
&__picture1
float: left
margin-right: 30px
margin-bottom: 62px
&__picture2
float: right
margin-bottom: 25px
&__picture3
float: left
margin-right: 30px
&__awards
float: right
display: flex
width: 570px
justify-content: space-between
margin-top: -100px
.local
&__addresses
width: 1170px
margin: 0 auto
display: flex
justify-content: space-between
padding-bottom: 60px
&__city
color: #575153
font-size: 18px
font-weight: 400
padding-bottom: 25px
&__street
color: #727272
font-size: 13px
font-weight: 400
padding-bottom: 15px
&__description
color: #8e8c8c
font-family: Roboto, sans-serif
font-size: 15px
font-weight: 400
line-height: 22px
&__figure
margin-bottom: 124px
&__map
vertical-align: bottom
&__info
padding: 40px
&__container
background-color: #f8f8f8
&__detail
color: #8e8c8c
font-size: 15px
font-weight: 400
line-height: 30px
margin-bottom: 5px
&:nth-child(4)
margin-top: 25px
&__icon
display: inline-block
padding-top: 3px
box-sizing: border-box
width: 30px
height: 30px
text-align: center
color: white
background-color: #727272
font-size: 18px
font-weight: 400
border-radius: 50%
border: 1px solid #727272
margin-top: 60px
margin-right: 10px
&__button
color: #454647
font-size: 16px
font-weight: 400
text-transform: uppercase
letter-spacing: 3.2px
line-height: 57px
padding: 0 34px
margin-top: 25px
background-color: #fff
border: 2px solid #737373
&:hover
background-color: #00c8c8
border-color: #00c8c8
color: white
cursor: pointer