-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.sass
182 lines (156 loc) · 4.13 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
@import url('https://fonts.googleapis.com/css2?family=Lora&family=Roboto+Slab:wght@300;400&family=Roboto:wght@300;400&display=swap')
@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap")
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400&family=Open+Sans:wght@300&display=swap')
// font-family: 'Lora', serif;
// font-family: 'Roboto', sans-serif;
// font-family: 'Roboto Slab', serif;
// font-family: "Jost", sans-serif;
// font-family: 'Fredoka', sans-serif;
// font-family: 'Open Sans', sans-serif;
$primary: #ff1482
@mixin flexC
display: flex
flex-direction: column
justify-content: center
@mixin flexR
display: flex
justify-content: flex-start
*
box-sizing: border-box;
padding: 0
margin: 0
body
@include flexC
align-items: center
width: 95vw
min-height: 90vh
margin: auto
.everything
@include flexC
display: flex
width: 350px
overflow-x: hidden
border-radius: 15px
background-color: #fff
box-shadow: 0 14px 28px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.02);
.heading
@include flexC
padding: 15px
align-items: center
background-color: $primary
color: #fff
img
width: 75px
height: 75px
border-radius: 50%
margin: 7px
h3
font:
size: 1.4rem
family: "Jost", sans-serif
padding-top: 5px
h4
font:
size: 1.2rem
family: "Jost", sans-serif
margin-top: -.22rem
p
font:
family: "Jost", sans-serif
size: 1.2rem
margin-top: .2rem
margin-bottom: 0.2rem
.nav
@include flexR
gap: 2rem
margin-top: .5rem
padding-left: 2rem
p
font:
family: 'Roboto', sans-serif
weight: 800
color: #837979
position: relative
p.active
color: #000
p.active::after
content: ''
position: absolute
width: 100%
height: 5px
background-color: white
top: -12px
left: 0
p:hover,p:focus
color: #000
p::before
content: ''
position: absolute
width: 100%
height: 4px
background-color: white
top: 0
left: 0
transform: scale(0)
transition: transform 0.4s ease-in
transition: top 0.4s ease-in
p:hover::before
border-radius: 10px
transform: scale(1)
top: -12px
.propo-content
padding: 5px 0 5px 0
@include flexC
gap: 20px
.exp
@include flexR
justify-content: start
align-items: center
gap: 15px
font:
family: "Jost", sans-serif
size: 1rem
width: 20ch
span
font:
size: 2.1rem
.price
text-align: center
color: $primary
font:
family: 'Roboto Slab', serif
size: 1.2rem
margin-bottom: .9rem
.btn-container
text-align: center
margin: 1rem 0 2rem 0
button
padding: 1rem 1rem
background-color: $primary
font:
family: "Roboto", sans-serif
size: 1.1rem
color: white
border: none
border-radius: 15px
.intro-content
h3
font:
family: "Jost", sans-serif
size: 1.4rem
margin-bottom: 1rem
p
width: 30ch
font-family: "Jost", sans-serif
.disappear
transition: transform .5s ease-in
transform: translateX(-100%)
height: 0
overflow: hidden
.appear
transform: translateX(0%)
height: auto
.non
display: none
.marge
margin: 1.5rem 0 1.5rem 2rem