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 }