/ src / sass / homePage.module.scss
homePage.module.scss
 1  $primaryColor: #012060;
 2  .wrapper {
 3    color: #ffffff;
 4  
 5    .main {
 6      min-height: calc((100vh - 80px) - 100px);
 7      padding: 40px 40px;
 8      text-align: center;
 9      display: flex;
10      flex-direction: column;
11      align-items: center;
12      background-color: $primaryColor;
13    }
14    .text__lead,
15    .text__sub {
16      font-size: 38px;
17      line-height: 1.5;
18      color: #222;
19      font-weight: 400;
20      margin: 40px 0;
21      color: #ffffff;
22    }
23    .text__sub {
24      font-size: 24px;
25      font-weight: 300;
26    }
27  }
28  .page__btns {
29    display: flex;
30  
31    .btn {
32      padding: 0 80px;
33      line-height: 53px;
34      font-size: 14px;
35      border-radius: 30px;
36      cursor: pointer;
37      outline: none;
38      border: 1px solid transparent;
39      line-height: 48px;
40      transition: 0.1s ease-in-out;
41      transition-property: color, background-color, border-color;
42    }
43  
44    .btn__primary {
45      background: #ffffff;
46      color: #1e87f0;
47  
48      &:hover {
49        box-shadow: 0 10px 40px #1e87f0;
50      }
51    }
52  
53    .btn__secondary {
54      background-color: transparent;
55      color: rgba(255, 255, 255, 0.8);
56      border: 1px solid #e5e5e5;
57      border-color: rgba(255, 255, 255, 0.6);
58  
59      &:hover {
60        border-color: #ffffff;
61        color: #ffffff;
62      }
63    }
64  }
65  
66  .footer {
67    padding: 80px 0;
68    color: rgb(255, 255, 255);
69    text-align: center;
70    background-color: $primaryColor;
71  
72    .link {
73      cursor: pointer;
74  
75      &:hover {
76        color: rgba(255, 255, 255);
77      }
78    }
79  }