Skip to content

Commit 563eacf

Browse files
pauloportfpauloportf
committed
New update
1 parent 8627544 commit 563eacf

21 files changed

+92
-126
lines changed

‎css/style.css

+40-24
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
body {
88
font-family: "Montserrat", sans-serif;
9-
background-color: #F5F5F5;
9+
background-color: #353941;
1010
font-family: "Baloo 2", sans-serif;
1111
}
1212

@@ -21,7 +21,7 @@ main section.card {
2121
width: 40rem;
2222
height: 55rem;
2323
border-radius: 10px;
24-
background-color: #E6E6E6;
24+
background-color: #26282B;
2525
text-align: center;
2626
position: relative;
2727
display: flex;
@@ -64,10 +64,10 @@ main section.card {
6464
}
6565
}
6666
main section.card .profile {
67-
width: 15rem;
68-
height: 15rem;
67+
width: 13rem;
68+
height: 13rem;
6969
border-radius: 50%;
70-
border: 5px solid #000000;
70+
border: 5px solid #fff;
7171
margin-top: 1rem;
7272
box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
7373
-webkit-box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
@@ -99,7 +99,7 @@ main section.card .profile {
9999
}
100100
main section.card h2 {
101101
font-size: 2.5rem;
102-
color: #161616;
102+
color: #d3d3d3;
103103
}
104104
@media screen and (max-width: 1100px) {
105105
main section.card h2 {
@@ -116,20 +116,19 @@ main section.card .spotify,
116116
main section.card .twitter,
117117
main section.card .lastfm {
118118
display: flex;
119-
flex-direction: row;
120-
justify-content: center;
121119
align-items: center;
120+
gap: 15px;
122121
width: 30rem;
123122
height: 4rem;
124123
border-radius: 5px;
125-
margin: 0.3rem 0;
126-
background-color: #000;
127-
color: #f5f5f5;
124+
margin: 0.3rem 0rem;
125+
background-color: #5F85DB;
126+
color: #F5F5F5;
128127
text-decoration: none;
129128
transition: 0.5s ease;
130-
box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
131-
-webkit-box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
132-
-moz-box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
129+
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.5);
130+
-webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.5);
131+
-moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.5);
133132
}
134133
@media screen and (max-width: 800px) {
135134
main section.card .github,
@@ -169,7 +168,7 @@ main section.card .github:hover,
169168
main section.card .spotify:hover,
170169
main section.card .twitter:hover,
171170
main section.card .lastfm:hover {
172-
background-color: #ffffff;
171+
background-color: #90B8F8;
173172
color: #161616;
174173
box-shadow: 0px 0px 0px 0px transparent;
175174
-webkit-box-shadow: 0px 0px 0px 0px transparent;
@@ -179,7 +178,7 @@ main section.card .github img,
179178
main section.card .spotify img,
180179
main section.card .twitter img,
181180
main section.card .lastfm img {
182-
margin-right: 10px;
181+
margin-right: 0px;
183182
}
184183
@media screen and (max-width: 374px) {
185184
main section.card .github img,
@@ -189,23 +188,35 @@ main section.card .lastfm img {
189188
display: none;
190189
}
191190
}
192-
main section.card .github img,
191+
main section.card .github h3,
192+
main section.card .spotify h3,
193+
main section.card .twitter h3,
194+
main section.card .lastfm h3 {
195+
flex-grow: 0.8;
196+
}
197+
main section.card .github img {
198+
width: 40px;
199+
height: 40px;
200+
margin-left: 10px;
201+
}
193202
main section.card .spotify img,
194203
main section.card .lastfm img {
195-
width: 33px;
196-
height: 33px;
204+
width: 36px;
205+
height: 36px;
206+
margin-left: 10px;
197207
}
198208
main section.card .twitter img {
199-
width: 33px;
209+
width: 35px;
200210
height: 30px;
211+
margin-left: 10px;
201212
}
202213
main section.card .playlists {
203214
width: 30rem;
204215
height: 12rem;
205216
margin-top: 1rem;
206217
background-color: #282828;
207218
border-radius: 10px;
208-
background-image: url(../imagens/fastimespause.png);
219+
background-image: url(../imagens/playlistsCover.png);
209220
background-repeat: no-repeat;
210221
background-size: cover;
211222
background-position: center;
@@ -215,6 +226,7 @@ main section.card .playlists {
215226
text-decoration: none;
216227
color: #f5f5f5;
217228
font-size: xx-large;
229+
border: 2px solid transparent;
218230
transition: 0.4s ease-in-out;
219231
}
220232
@media screen and (max-width: 1400px) {
@@ -238,7 +250,7 @@ main section.card .playlists {
238250
main section.card .playlists {
239251
width: 18rem;
240252
height: 8rem;
241-
background-image: url(../imagens/fastimes.gif);
253+
background-image: url(../imagens/playlistsGif.gif);
242254
color: rgba(73, 73, 73, 0.7176470588);
243255
}
244256
}
@@ -250,6 +262,10 @@ main section.card .playlists {
250262
}
251263
}
252264
main section.card .playlists:hover {
253-
background-image: url(../imagens/fastimes.gif);
254-
color: rgba(40, 40, 40, 0.5882352941);
265+
background-image: url(../imagens/playlistsGif.gif);
266+
color: rgba(243, 243, 243, 0.5882352941);
267+
box-shadow: 0px 0px 0px 0px transparent;
268+
-webkit-box-shadow: 0px 0px 0px 0px transparent;
269+
-moz-box-shadow: 0px 0px 0px 0px transparent;
270+
border: 2px solid #f5f5f5;
255271
}/*# sourceMappingURL=style.css.map */

‎css/style.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/style.scss

+45-25
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636

3737
body {
3838
font-family: "Montserrat", sans-serif;
39-
background-color: #F5F5F5;
39+
background-color: #353941;
4040
font-family: "Baloo 2", sans-serif;
4141
}
4242

@@ -52,7 +52,7 @@ main {
5252
width: 40rem;
5353
height: 55rem;
5454
border-radius: 10px;
55-
background-color: #E6E6E6;
55+
background-color: #26282B;
5656
text-align: center;
5757

5858
position: relative;
@@ -96,10 +96,10 @@ main {
9696
}
9797

9898
.profile {
99-
width: 15rem;
100-
height: 15rem;
99+
width: 13rem;
100+
height: 13rem;
101101
border-radius: 50%;
102-
border: 5px solid #000000;
102+
border: 5px solid #fff;
103103
margin-top: 1rem;
104104

105105
box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
@@ -129,7 +129,7 @@ main {
129129

130130
h2 {
131131
font-size: 2.5rem;
132-
color: #161616;
132+
color: #d3d3d3;
133133

134134
@include responsive-nethub() {
135135
font-size: 2rem;
@@ -145,26 +145,25 @@ main {
145145
.twitter,
146146
.lastfm {
147147
display: flex;
148-
flex-direction: row;
149-
150-
justify-content: center;
151148
align-items: center;
152149

150+
gap: 15px;
151+
153152
width: 30rem;
154153
height: 4rem;
155154
border-radius: 5px;
156-
margin: 0.3rem 0;
155+
margin: 0.3rem 0rem;
157156

158-
background-color: #000;
159-
color: #f5f5f5;
157+
background-color: #5F85DB;
158+
color: #F5F5F5;
160159

161160
text-decoration: none;
162161

163162
transition: 0.5s ease;
164163

165-
box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
166-
-webkit-box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
167-
-moz-box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
164+
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.5);
165+
-webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.5);
166+
-moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.5);
168167

169168
@include responsive-tablet {
170169
width: 30rem;
@@ -185,7 +184,7 @@ main {
185184
}
186185

187186
&:hover {
188-
background-color: #ffffff;
187+
background-color: #90B8F8;
189188
color: #161616;
190189

191190
box-shadow: 0px 0px 0px 0px transparent;
@@ -194,24 +193,37 @@ main {
194193
}
195194

196195
img {
197-
margin-right: 10px;
196+
margin-right: 0px;
198197

199198
@include responsive-300 {
200199
display: none;
201200
}
202201
}
202+
203+
h3 {
204+
flex-grow: 0.8;
205+
}
203206
}
204207

205-
.github img,
208+
.github img {
209+
width: 40px;
210+
height: 40px;
211+
212+
margin-left: 10px;
213+
}
206214
.spotify img,
207215
.lastfm img {
208-
width: 33px;
209-
height: 33px;
216+
width: 36px;
217+
height: 36px;
218+
219+
margin-left: 10px;
210220
}
211221

212222
.twitter img {
213-
width: 33px;
223+
width: 35px;
214224
height: 30px;
225+
226+
margin-left: 10px;
215227
}
216228

217229
.playlists {
@@ -223,7 +235,7 @@ main {
223235
background-color: #282828;
224236
border-radius: 10px;
225237

226-
background-image: url(../imagens/fastimespause.png);
238+
background-image: url(../imagens/playlistsCover.png);
227239
background-repeat: no-repeat;
228240
background-size: cover;
229241
background-position: center;
@@ -236,6 +248,8 @@ main {
236248
color: #f5f5f5;
237249
font-size: xx-large;
238250

251+
border: 2px solid transparent;
252+
239253
transition: 0.4s ease-in-out;
240254

241255
@include responsive-desktop() {
@@ -256,7 +270,7 @@ main {
256270
width: 18rem;
257271
height: 8rem;
258272

259-
background-image: url(../imagens/fastimes.gif);
273+
background-image: url(../imagens/playlistsGif.gif);
260274
color: #494949b7;
261275
}
262276

@@ -267,9 +281,15 @@ main {
267281
}
268282

269283
&:hover {
270-
background-image: url(../imagens/fastimes.gif);
284+
background-image: url(../imagens/playlistsGif.gif);
285+
286+
color: #f3f3f396;
287+
288+
box-shadow: 0px 0px 0px 0px transparent;
289+
-webkit-box-shadow: 0px 0px 0px 0px transparent;
290+
-moz-box-shadow: 0px 0px 0px 0px transparent;
271291

272-
color: #28282896;
292+
border: 2px solid #f5f5f5;
273293
}
274294
}
275295
}

‎icones/Spotify_Primary_Logo_RGB_Green.png

-23.9 KB
Binary file not shown.

‎icones/at-sign.svg

-14
This file was deleted.

‎icones/compasslocal.svg

-14
This file was deleted.

‎icones/dev1.svg

-14
This file was deleted.

‎icones/github-original.svg

-1
This file was deleted.

‎icones/githubIcon.png

1.36 KB
Loading

‎icones/lastfm.png

-1009 Bytes
Binary file not shown.

‎icones/lastfmIcon.png

1 KB
Loading

0 commit comments

Comments
 (0)