-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.sass
172 lines (133 loc) · 3.15 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
@import _colors
@import _header
@import _hero
@import _download
@import _footer
*
margin: 0
padding: 0
box-sizing: border-box
outline: none
user-select: none
font-size: 10px
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
$number-of-columns: 12
.row
display: grid
gap: 1rem
grid-template-columns: repeat($number-of-columns, 1fr)
.container
max-width: 90%
margin: 0 auto 0 auto
justify-content: center
body
text-align: center
img
display: block
max-width: 100%
grid-column: span 12
margin: auto
h1
line-height: 4.25rem
font-size: 3.6rem
color: $text
grid-column: span 12
h2
line-height: 3.6rem
font-size: 2.4rem
color: $orange
grid-column: span 12
p
line-height: 3.8rem
font-size: 2.4rem
color: $secondtext
grid-column: span 12
.btn
border: 1px solid $orange
color: $orange
background: transparent
border-radius: 3rem
padding: 1rem 5rem
font-size: 2.4rem
line-height: 3.6rem
grid-column: span 12
cursor: pointer
.active
background: $orange
color: white
cursor: pointer
.order1
grid-column: span 12
.order2
grid-column: span 12
@media (min-width: 768px)
header
.mobile-nav
display: none
.nav-bar
display: flex
.hero
.hero-head
background: url(/assets/hero-bg.svg) center/cover no-repeat
padding: 10rem 0 10rem 0
.btn
grid-column: 7/12
color: white
border: 1px solid white
.active
grid-column: 2/7
border: 1px solid $orange
h1
grid-column: 3/11
color: white
font-size: 5.8rem
line-height: 8rem
p
grid-column: 3/11
color: white
#hero-phone
transform: translateY(-11rem)
.hero-wrapper
.hero-text-wrapper
text-align: left
grid-column: span 6
.phone
grid-column: span 6
.order1
order: 1
.order2
order: 2
.download
background: url(/assets/download-bg.svg) center/cover no-repeat
.btn
grid-column: 7/10
.active
grid-column: 4/7
p
color: white
.footer
.row
display: flex
justify-content: space-around
align-items: center
.footer-logo
display: block
margin: 0
@media (min-width: 1024px)
.hero
.hero-head
.btn
grid-column: 7/11
.active
grid-column: 3/7
.container
max-width: 80%
@media (min-width: 1440px)
.hero
.hero-head
.btn
grid-column: 7/10
.active
grid-column: 4/7
.container
max-width: 60%