sass/front-page/banner.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

@import ../settings.sass
  
section.banner
  background-image: url("/img/front-page/banner/banner-bg.svg")
  background-position: bottom
  background-repeat: no-repeat
  background-size: cover
  padding: 77px 0 87px
  +resp(sm)
    background-image: url("/img/front-page/banner/banner-bg-sm.svg")
    padding: 45px 0 0
  div.sm-none
    +resp(sm)
      padding: 0
  div.banner__text-button
    max-width: 50%
    +resp(lg)
      max-width: 61%
    +resp(sm)
      margin-bottom: 23px
      max-width: 100%
    h1.banner__title
      font-family: $lato
      font-weight: 800
      font-size: 45px
      line-height: 120%
      letter-spacing: 0.02em
      color: $black
      padding-bottom: 57px
      +resp(sm)
        font-size: 38px
        text-align: center
        padding-bottom: 51%
        padding-left: 20px
        padding-right: 20px
      +resp(esm)
        font-size: 28px
    div.banner__btn_container
      +resp(sm)
        background-color: $white
        display: flex
        justify-content: center
        padding-left: 20px
        padding-right: 20px
      a.banner__btn
        max-width: 311px
        width: 100%
        height: 58px
        background: $black
        border: 1px solid $black
        display: inline-flex
        margin-top: 23px
        align-items: center
        justify-content: center
        font-family: $lato
        font-weight: 900
        font-size: 16px
        line-height: 15px
        color: $white
        text-decoration: none
        transition: 0.3s
        +resp(sm)
          height: 38px
          font-size: 14px
        &:hover
          background: $white
          color: $black