Skip to content

Commit b3ab7e4

Browse files
ceo-uploadsceo-uploads
authored
Add files via upload
1 parent 45eae3d commit b3ab7e4

2 files changed

Lines changed: 232 additions & 0 deletions

File tree

‎Stylus Login/login.css‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
/* ===== Reset & Base ===== */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
7+
}
8+
9+
body {
10+
height: 100vh;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
background: linear-gradient(135deg, #141e30, #243b55);
15+
overflow: hidden;
16+
}
17+
18+
.container {
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
width: 100%;
23+
padding: 20px;
24+
}
25+
26+
/* ===== Login Card ===== */
27+
.form {
28+
display: flex;
29+
flex-direction: column;
30+
gap: 15px;
31+
padding: 2.5em 2em;
32+
background: rgba(23, 23, 23, 0.8);
33+
border-radius: 20px;
34+
backdrop-filter: blur(10px);
35+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
36+
width: 100%;
37+
max-width: 350px;
38+
transition: transform 0.4s ease, box-shadow 0.4s ease;
39+
}
40+
41+
.form:hover {
42+
transform: scale(1.03);
43+
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7);
44+
}
45+
46+
47+
48+
/* ===== Input Fields ===== */
49+
.form {
50+
display: flex;
51+
flex-direction: column;
52+
gap: 10px;
53+
padding-left: 2em;
54+
padding-right: 2em;
55+
padding-bottom: 0.4em;
56+
background-color: #171717;
57+
border-radius: 25px;
58+
transition: .4s ease-in-out;
59+
}
60+
61+
.form:hover {
62+
transform: scale(1.05);
63+
border: 1px solid black;
64+
}
65+
66+
#heading {
67+
text-align: center;
68+
font-weight: bold;
69+
margin: 1em;
70+
color: rgb(255, 255, 255);
71+
font-size: 2em;
72+
}
73+
74+
.field {
75+
display: flex;
76+
align-items: center;
77+
justify-content: center;
78+
gap: 0.5em;
79+
border-radius: 25px;
80+
padding: 0.6em;
81+
border: none;
82+
outline: none;
83+
color: white;
84+
background-color: #171717;
85+
box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
86+
}
87+
88+
.input-icon {
89+
height: 1.3em;
90+
width: 1.3em;
91+
fill: white;
92+
}
93+
94+
.input-field {
95+
background: none;
96+
border: none;
97+
outline: none;
98+
width: 100%;
99+
color: #d3d3d3;
100+
}
101+
102+
.field:hover {
103+
border-color: #6a5acd;
104+
background: rgba(255, 255, 255, 0.08);
105+
}
106+
107+
.input-icon {
108+
height: 1.3em;
109+
width: 1.3em;
110+
fill: #aaa;
111+
transition: fill 0.3s ease;
112+
}
113+
114+
.field:hover .input-icon {
115+
fill: #fff;
116+
}
117+
118+
.input-field {
119+
background: none;
120+
border: none;
121+
outline: none;
122+
flex: 1;
123+
color: #e0e0e0;
124+
font-size: 0.95em;
125+
}
126+
127+
/* ===== Buttons ===== */
128+
.form .btn {
129+
display: flex;
130+
justify-content: center;
131+
gap: 0.8em;
132+
margin-top: 1.8em;
133+
}
134+
135+
.button1,
136+
.button2,
137+
.button3 {
138+
padding: 0.6em 1.6em;
139+
border-radius: 8px;
140+
border: none;
141+
outline: none;
142+
font-size: 0.95em;
143+
font-weight: 500;
144+
cursor: pointer;
145+
transition: all 0.3s ease;
146+
background: #252525;
147+
color: white;
148+
}
149+
150+
.button1:hover,
151+
.button2:hover {
152+
background: #6a5acd;
153+
box-shadow: 0 4px 15px rgba(106, 90, 205, 0.4);
154+
}
155+
156+
.button3 {
157+
margin: 1.2em;
158+
background: transparent;
159+
border: 1px solid rgba(255, 255, 255, 0.2);
160+
}
161+
162+
.button3:hover {
163+
background: crimson;
164+
border-color: crimson;
165+
color: #fff;
166+
box-shadow: 0 4px 12px rgba(220, 20, 60, 0.4);
167+
}
168+
169+
/* ===== Responsive ===== */
170+
@media (max-width: 480px) {
171+
.form {
172+
padding: 2em 1.2em;
173+
max-width: 95%;
174+
}
175+
176+
#heading {
177+
font-size: 1.3em;
178+
}
179+
180+
.input-field {
181+
font-size: 0.9em;
182+
}
183+
184+
.button1,
185+
.button2,
186+
.button3 {
187+
font-size: 0.85em;
188+
padding: 0.5em 1.2em;
189+
}
190+
}

‎Stylus Login/login.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>FU Questions - Login</title>
8+
<link rel="stylesheet" href="login.css">
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<form class="form">
14+
<p id="heading">Login</p>
15+
<div class="field">
16+
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
17+
viewBox="0 0 16 16">
18+
<path
19+
d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z">
20+
</path>
21+
</svg>
22+
<input autocomplete="off" placeholder="Username" class="input-field" type="text">
23+
</div>
24+
<div class="field">
25+
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
26+
viewBox="0 0 16 16">
27+
<path
28+
d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z">
29+
</path>
30+
</svg>
31+
<input placeholder="Password" class="input-field" type="password">
32+
</div>
33+
<div class="btn">
34+
<button class="button1">Login</button>
35+
<button class="button2">Sign Up</button>
36+
</div>
37+
<button class="button3">Forgot Password</button>
38+
</form>
39+
</div>
40+
</body>
41+
42+
</html>

0 commit comments

Comments
 (0)