Skip to content

Commit 8627544

Browse files
pauloportfpauloportf
committed
New interface
1 parent 58bf5a9 commit 8627544

File tree

8 files changed

+139
-27
lines changed

8 files changed

+139
-27
lines changed

‎css/style.css

+69-10
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66

77
body {
88
font-family: "Montserrat", sans-serif;
9-
background: rgb(7, 22, 68);
10-
background: radial-gradient(circle, rgb(7, 22, 68) 0%, rgb(5, 42, 89) 100%);
9+
background-color: #F5F5F5;
1110
font-family: "Baloo 2", sans-serif;
1211
}
1312

@@ -19,10 +18,10 @@ main {
1918
height: 100vh;
2019
}
2120
main section.card {
22-
width: 45rem;
21+
width: 40rem;
2322
height: 55rem;
2423
border-radius: 10px;
25-
background-color: #d3ecfc;
24+
background-color: #E6E6E6;
2625
text-align: center;
2726
position: relative;
2827
display: flex;
@@ -33,6 +32,18 @@ main section.card {
3332
-webkit-box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
3433
-moz-box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
3534
}
35+
@media screen and (max-width: 1400px) {
36+
main section.card {
37+
width: 35rem;
38+
height: 45rem;
39+
}
40+
}
41+
@media screen and (max-width: 1100px) {
42+
main section.card {
43+
width: 25rem;
44+
height: 35rem;
45+
}
46+
}
3647
@media screen and (max-width: 800px) {
3748
main section.card {
3849
width: 35rem;
@@ -56,12 +67,24 @@ main section.card .profile {
5667
width: 15rem;
5768
height: 15rem;
5869
border-radius: 50%;
59-
border: 5px solid #efffff;
70+
border: 5px solid #000000;
6071
margin-top: 1rem;
6172
box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
6273
-webkit-box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
6374
-moz-box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
6475
}
76+
@media screen and (max-width: 1400px) {
77+
main section.card .profile {
78+
width: 10rem;
79+
height: 10rem;
80+
}
81+
}
82+
@media screen and (max-width: 1100px) {
83+
main section.card .profile {
84+
width: 8rem;
85+
height: 8rem;
86+
}
87+
}
6588
@media screen and (max-width: 600px) {
6689
main section.card .profile {
6790
width: 10rem;
@@ -76,7 +99,12 @@ main section.card .profile {
7699
}
77100
main section.card h2 {
78101
font-size: 2.5rem;
79-
color: #383838;
102+
color: #161616;
103+
}
104+
@media screen and (max-width: 1100px) {
105+
main section.card h2 {
106+
font-size: 2rem;
107+
}
80108
}
81109
@media screen and (max-width: 374px) {
82110
main section.card h2 {
@@ -91,11 +119,11 @@ main section.card .lastfm {
91119
flex-direction: row;
92120
justify-content: center;
93121
align-items: center;
94-
width: 40rem;
122+
width: 30rem;
95123
height: 4rem;
96124
border-radius: 5px;
97125
margin: 0.3rem 0;
98-
background-color: #03121d;
126+
background-color: #000;
99127
color: #f5f5f5;
100128
text-decoration: none;
101129
transition: 0.5s ease;
@@ -111,6 +139,15 @@ main section.card .lastfm {
111139
width: 30rem;
112140
}
113141
}
142+
@media screen and (max-width: 1100px) {
143+
main section.card .github,
144+
main section.card .spotify,
145+
main section.card .twitter,
146+
main section.card .lastfm {
147+
width: 20rem;
148+
height: 3rem;
149+
}
150+
}
114151
@media screen and (max-width: 600px) {
115152
main section.card .github,
116153
main section.card .spotify,
@@ -132,7 +169,7 @@ main section.card .github:hover,
132169
main section.card .spotify:hover,
133170
main section.card .twitter:hover,
134171
main section.card .lastfm:hover {
135-
background-color: #5b7b96;
172+
background-color: #ffffff;
136173
color: #161616;
137174
box-shadow: 0px 0px 0px 0px transparent;
138175
-webkit-box-shadow: 0px 0px 0px 0px transparent;
@@ -152,8 +189,18 @@ main section.card .lastfm img {
152189
display: none;
153190
}
154191
}
192+
main section.card .github img,
193+
main section.card .spotify img,
194+
main section.card .lastfm img {
195+
width: 33px;
196+
height: 33px;
197+
}
198+
main section.card .twitter img {
199+
width: 33px;
200+
height: 30px;
201+
}
155202
main section.card .playlists {
156-
width: 40rem;
203+
width: 30rem;
157204
height: 12rem;
158205
margin-top: 1rem;
159206
background-color: #282828;
@@ -170,6 +217,18 @@ main section.card .playlists {
170217
font-size: xx-large;
171218
transition: 0.4s ease-in-out;
172219
}
220+
@media screen and (max-width: 1400px) {
221+
main section.card .playlists {
222+
width: 30rem;
223+
height: 9rem;
224+
}
225+
}
226+
@media screen and (max-width: 1100px) {
227+
main section.card .playlists {
228+
width: 20rem;
229+
height: 6rem;
230+
}
231+
}
173232
@media screen and (max-width: 800px) {
174233
main section.card .playlists {
175234
width: 30rem;

‎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

+68-15
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@
55
}
66

77
@mixin responsive-desktop {
8-
@media screen and (max-width: 1200px) {
8+
@media screen and (max-width: 1400px) {
9+
@content;
10+
}
11+
}
12+
13+
@mixin responsive-nethub {
14+
@media screen and (max-width: 1100px) {
915
@content;
1016
}
1117
}
@@ -30,12 +36,7 @@
3036

3137
body {
3238
font-family: "Montserrat", sans-serif;
33-
background: rgb(7, 22, 68);
34-
background: radial-gradient(
35-
circle,
36-
rgba(7, 22, 68, 1) 0%,
37-
rgba(5, 42, 89, 1) 100%
38-
);
39+
background-color: #F5F5F5;
3940
font-family: "Baloo 2", sans-serif;
4041
}
4142

@@ -48,10 +49,10 @@ main {
4849
height: 100vh;
4950

5051
section.card {
51-
width: 45rem;
52+
width: 40rem;
5253
height: 55rem;
5354
border-radius: 10px;
54-
background-color: #d3ecfc;
55+
background-color: #E6E6E6;
5556
text-align: center;
5657

5758
position: relative;
@@ -64,6 +65,17 @@ main {
6465
box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
6566
-webkit-box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
6667
-moz-box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
68+
69+
@include responsive-desktop() {
70+
width: 35rem;
71+
height: 45rem;
72+
}
73+
74+
@include responsive-nethub() {
75+
width: 25rem;
76+
height: 35rem;
77+
}
78+
6779

6880
@include responsive-tablet {
6981
width: 35rem;
@@ -87,13 +99,23 @@ main {
8799
width: 15rem;
88100
height: 15rem;
89101
border-radius: 50%;
90-
border: 5px solid #efffff;
102+
border: 5px solid #000000;
91103
margin-top: 1rem;
92104

93105
box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
94106
-webkit-box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
95107
-moz-box-shadow: 2px 2px 6px 0px rgba(77, 77, 77, 0.5);
96108

109+
@include responsive-desktop() {
110+
width: 10rem;
111+
height: 10rem;
112+
}
113+
114+
@include responsive-nethub() {
115+
width: 8rem;
116+
height: 8rem;
117+
}
118+
97119
@include responsive-mobile {
98120
width: 10rem;
99121
height: 10rem;
@@ -107,7 +129,11 @@ main {
107129

108130
h2 {
109131
font-size: 2.5rem;
110-
color: #383838;
132+
color: #161616;
133+
134+
@include responsive-nethub() {
135+
font-size: 2rem;
136+
}
111137

112138
@include responsive-300 {
113139
font-size: 1.5rem;
@@ -124,12 +150,12 @@ main {
124150
justify-content: center;
125151
align-items: center;
126152

127-
width: 40rem;
153+
width: 30rem;
128154
height: 4rem;
129155
border-radius: 5px;
130156
margin: 0.3rem 0;
131157

132-
background-color: #03121d;
158+
background-color: #000;
133159
color: #f5f5f5;
134160

135161
text-decoration: none;
@@ -144,6 +170,11 @@ main {
144170
width: 30rem;
145171
}
146172

173+
@include responsive-nethub() {
174+
width: 20rem;
175+
height: 3rem;
176+
}
177+
147178
@include responsive-mobile {
148179
width: 18rem;
149180
}
@@ -154,7 +185,7 @@ main {
154185
}
155186

156187
&:hover {
157-
background-color: #5b7b96;
188+
background-color: #ffffff;
158189
color: #161616;
159190

160191
box-shadow: 0px 0px 0px 0px transparent;
@@ -171,8 +202,20 @@ main {
171202
}
172203
}
173204

205+
.github img,
206+
.spotify img,
207+
.lastfm img {
208+
width: 33px;
209+
height: 33px;
210+
}
211+
212+
.twitter img {
213+
width: 33px;
214+
height: 30px;
215+
}
216+
174217
.playlists {
175-
width: 40rem;
218+
width: 30rem;
176219
height: 12rem;
177220

178221
margin-top: 1rem;
@@ -195,6 +238,16 @@ main {
195238

196239
transition: 0.4s ease-in-out;
197240

241+
@include responsive-desktop() {
242+
width: 30rem;
243+
height: 9rem;
244+
}
245+
246+
@include responsive-nethub() {
247+
width: 20rem;
248+
height: 6rem;
249+
}
250+
198251
@include responsive-tablet {
199252
width: 30rem;
200253
}

‎imagens/Banner.png

-1.39 MB
Loading

‎imagens/catProfile.jpg

-15.7 KB
Binary file not shown.

‎imagens/logo.jpeg

35.3 KB
Loading

‎imagens/paylin.png

-265 Bytes
Loading

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<main>
2424
<section class="card">
2525
<img
26-
src="./imagens/catProfile.jpg"
26+
src="./imagens/logo.jpeg"
2727
alt="Cat sleep profile"
2828
class="profile"
2929
/>

0 commit comments

Comments
 (0)