@@ -69,11 +69,13 @@ <h2>Cool</h2>
69
69
< style >
70
70
html {
71
71
box-sizing : border-box;
72
- font-family : "Arial Rounded MT Bold" , "Helvetica Rounded" , Arial, sans-serif
72
+ font-family : "Arial Rounded MT Bold" , "Helvetica Rounded" , Arial, sans-serif;
73
73
}
74
+
74
75
* , * : before , * : after {
75
76
box-sizing : inherit;
76
77
}
78
+
77
79
body {
78
80
margin : 0 ;
79
81
min-height : 100vh ;
@@ -99,10 +101,10 @@ <h2>Cool</h2>
99
101
text-decoration : none;
100
102
font-size : 20px ;
101
103
background : rgba (0 , 0 , 0 , 0.2 );
102
- padding : 10px 20px ;
104
+ padding : 10px 20px ;
103
105
display : inline-block;
104
- margin : 20px ;
105
- border-radius : 5px ;
106
+ margin : 20px ;
107
+ border-radius : 5px ;
106
108
}
107
109
108
110
nav ul {
@@ -115,17 +117,17 @@ <h2>Cool</h2>
115
117
116
118
.cool > li {
117
119
position : relative;
118
- display : flex;
120
+ display : flex;
119
121
justify-content : center;
120
122
}
121
123
122
124
.dropdown {
123
125
opacity : 0 ;
124
126
position : absolute;
125
127
overflow : hidden;
126
- padding : 20px ;
127
- top : -20px ;
128
- border-radius : 2px ;
128
+ padding : 20px ;
129
+ top : -20px ;
130
+ border-radius : 2px ;
129
131
transition : all 0.5s ;
130
132
transform : translateY (100px );
131
133
will-change : opacity;
@@ -139,17 +141,15 @@ <h2>Cool</h2>
139
141
.trigger-enter-active .dropdown {
140
142
opacity : 1 ;
141
143
}
142
-
143
-
144
-
144
+
145
145
.dropdownBackground {
146
- width : 100px ;
147
- height : 100px ;
146
+ width : 100px ;
147
+ height : 100px ;
148
148
position : absolute;
149
149
background : # fff ;
150
150
border-radius : 4px ;
151
151
box-shadow : 0 50px 100px rgba (50 , 50 , 93 , .1 ), 0 15px 35px rgba (50 , 50 , 93 , .15 ), 0 5px 15px rgba (0 , 0 , 0 , .1 );
152
- transition : all 0.3s , opacity 0.1s , transform 0.2s ;
152
+ transition : all 0.3s , opacity 0.1s , transform 0.2s ;
153
153
transform-origin : 50% 0 ;
154
154
display : flex;
155
155
justify-content : center;
@@ -162,28 +162,28 @@ <h2>Cool</h2>
162
162
163
163
.arrow {
164
164
position : absolute;
165
- width : 20px ;
166
- height : 20px ;
165
+ width : 20px ;
166
+ height : 20px ;
167
167
display : block;
168
- background : white;
168
+ background : white;
169
169
transform : translateY (-50% ) rotate (45deg );
170
170
}
171
171
172
172
.bio {
173
- min-width : 500px ;
174
- display : flex;
173
+ min-width : 500px ;
174
+ display : flex;
175
175
justify-content : center;
176
176
align-items : center;
177
177
line-height : 1.7 ;
178
178
}
179
179
180
180
.bio img {
181
- float : left;
182
- margin-right : 20px ;
181
+ float : left;
182
+ margin-right : 20px ;
183
183
}
184
184
185
185
.courses {
186
- min-width : 300px ;
186
+ min-width : 300px ;
187
187
}
188
188
189
189
.courses li {
@@ -198,14 +198,13 @@ <h2>Cool</h2>
198
198
}
199
199
200
200
a .button {
201
- background : black;
201
+ background : black;
202
202
display : block;
203
- padding : 10px ;
204
- color : white;
203
+ padding : 10px ;
204
+ color : white;
205
205
margin-bottom : 10px ;
206
206
}
207
207
208
-
209
208
/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
210
209
.button [href *= twitter ] { background : # 019FE9 ; }
211
210
.button [href *= facebook ] { background : # 3B5998 ; }
0 commit comments