Skip to content

Commit 50521a8

Browse files
pedrorosembergpedrorosemberg
authored
Create login.css
1 parent bf0986b commit 50521a8

File tree

1 file changed

+152
-0
lines changed

1 file changed

+152
-0
lines changed

‎login.css

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,153 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
12

3+
/* Basic reset and styling */
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
font-family: 'Varela Round', sans-serif;
9+
}
10+
11+
body {
12+
font-family: 'Varela Round', sans-serif;
13+
background-color: #d3d3d3;
14+
color: #050419;
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
18+
text-align: center;
19+
}
20+
21+
header {
22+
background-color: #050419;
23+
color: #ffffff;
24+
width: 100%;
25+
padding: 1em 0;
26+
display: flex;
27+
justify-content: space-between;
28+
align-items: center;
29+
}
30+
31+
.logo-img {
32+
width: 100px; /* Tamanho ajustável da imagem */
33+
height: auto;
34+
margin-left: 10em;
35+
image-rendering: auto;
36+
}
37+
38+
header .logo {
39+
font-size: 1.5em;
40+
font-weight: bold;
41+
margin-left: 1em;
42+
}
43+
44+
header nav ul {
45+
list-style: none;
46+
display: flex;
47+
margin-right: 2em;
48+
}
49+
50+
header nav ul li {
51+
margin-left: 2em;
52+
}
53+
54+
header nav ul li a {
55+
color: #ffffff;
56+
text-decoration: none;
57+
font-size: 1.1em;
58+
}
59+
60+
main {
61+
width: 90%;
62+
max-width: 1200px;
63+
margin: 2em auto;
64+
}
65+
66+
.login {
67+
border: 1px solid #050419;
68+
width: 400px;
69+
height: 500px;
70+
background-color: #050419;
71+
color: white;
72+
border-radius: 20px;
73+
box-shadow: 0px 0px 10px #050419;
74+
display: flex;
75+
align-items: center;
76+
justify-content: center;
77+
}
78+
79+
form {
80+
display: flex;
81+
flex-direction: column;
82+
gap: 5px;
83+
width: 100%;
84+
padding: 40px;
85+
backdrop-filter: brightness(40%);
86+
}
87+
88+
h1 {
89+
font-weight: normal;
90+
font-size: 24px;
91+
text-shadow: 0px 0px 2px #050419;
92+
margin-bottom: 60px;
93+
}
94+
95+
label {
96+
color: rgba(255, 255, 255, 0.8);
97+
text-transform: uppercase;
98+
font-size: 10px;
99+
letter-spacing: 2px;
100+
padding-left: 10px;
101+
}
102+
103+
input {
104+
background: rgba(255, 255, 255, 0.3);
105+
height: 40px;
106+
line-height: 40px;
107+
border-radius: 20px;
108+
padding: 0px 20px;
109+
border: none;
110+
margin-bottom: 20px;
111+
color: white;
112+
}
113+
114+
button {
115+
background: rgb(45, 126, 231);
116+
height: 40px;
117+
line-height: 40px;
118+
border-radius: 40px;
119+
padding: 0px 20px;
120+
border: none;
121+
margin: 10px 0px;
122+
box-shadow: 0px 0px 5px #050419;
123+
color: white;
124+
cursor: pointer;
125+
}
126+
127+
footer {
128+
background-color: #050419;
129+
color: #ffffff;
130+
width: 100%;
131+
padding: 1em 0;
132+
font-family: "Varela Round";
133+
}
134+
135+
.footer-content {
136+
display: flex;
137+
justify-content: space-between;
138+
align-items: center;
139+
width: 90%;
140+
max-width: 1200px;
141+
margin: auto;
142+
}
143+
144+
.footer-links {
145+
display: flex;
146+
gap: 1em;
147+
}
148+
149+
.footer-links a {
150+
color: #ffffff;
151+
text-decoration: none;
152+
font-size: 0.9em;
153+
}

0 commit comments

Comments
 (0)