Skip to content

Commit 9e796b2

Browse files
jonasvanleeuwen19jonasvanleeuwen19
committed
admin login template page
1 parent 0920a01 commit 9e796b2

File tree

2 files changed

+240
-0
lines changed

2 files changed

+240
-0
lines changed

‎admin/index.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,59 @@
1+
<!doctype html>
12

3+
<html lang="en">
4+
5+
<head>
6+
7+
<meta charset="UTF-8">
8+
9+
<title>CodePen - Animated Login Form using Html &amp; CSS Only</title>
10+
11+
<link rel="stylesheet" href="./style.css">
12+
13+
</head>
14+
15+
<body> <!-- partial:index.partial.html -->
16+
17+
<section> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span>
18+
19+
<div class="signin">
20+
21+
<div class="content">
22+
23+
<h2>Sign In</h2>
24+
25+
<div class="form">
26+
27+
<div class="inputBox">
28+
29+
<input type="text" required> <i>Username</i>
30+
31+
</div>
32+
33+
<div class="inputBox">
34+
35+
<input type="password" required> <i>Password</i>
36+
37+
</div>
38+
39+
<div class="links"> <a href="#">Forgot Password</a> <a href="#">Signup</a>
40+
41+
</div>
42+
43+
<div class="inputBox">
44+
45+
<input type="submit" value="Login">
46+
47+
</div>
48+
49+
</div>
50+
51+
</div>
52+
53+
</div>
54+
55+
</section> <!-- partial -->
56+
57+
</body>
58+
59+
</html>

‎admin/style.css

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
2+
*
3+
{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Quicksand', sans-serif;
8+
}
9+
body
10+
{
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
min-height: 100vh;
15+
background: #000;
16+
}
17+
section
18+
{
19+
position: absolute;
20+
width: 100vw;
21+
height: 100vh;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
gap: 2px;
26+
flex-wrap: wrap;
27+
overflow: hidden;
28+
}
29+
section::before
30+
{
31+
content: '';
32+
position: absolute;
33+
width: 100%;
34+
height: 100%;
35+
background: linear-gradient(#000,#0f0,#000);
36+
animation: animate 5s linear infinite;
37+
}
38+
@keyframes animate
39+
{
40+
0%
41+
{
42+
transform: translateY(-100%);
43+
}
44+
100%
45+
{
46+
transform: translateY(100%);
47+
}
48+
}
49+
section span
50+
{
51+
position: relative;
52+
display: block;
53+
width: calc(6.25vw - 2px);
54+
height: calc(6.25vw - 2px);
55+
background: #181818;
56+
z-index: 2;
57+
transition: 1.5s;
58+
}
59+
section span:hover
60+
{
61+
background: #0f0;
62+
transition: 0s;
63+
}
64+
65+
section .signin
66+
{
67+
position: absolute;
68+
width: 400px;
69+
background: #222;
70+
z-index: 1000;
71+
display: flex;
72+
justify-content: center;
73+
align-items: center;
74+
padding: 40px;
75+
border-radius: 4px;
76+
box-shadow: 0 15px 35px rgba(0,0,0,9);
77+
}
78+
section .signin .content
79+
{
80+
position: relative;
81+
width: 100%;
82+
display: flex;
83+
justify-content: center;
84+
align-items: center;
85+
flex-direction: column;
86+
gap: 40px;
87+
}
88+
section .signin .content h2
89+
{
90+
font-size: 2em;
91+
color: #0f0;
92+
text-transform: uppercase;
93+
}
94+
section .signin .content .form
95+
{
96+
width: 100%;
97+
display: flex;
98+
flex-direction: column;
99+
gap: 25px;
100+
}
101+
section .signin .content .form .inputBox
102+
{
103+
position: relative;
104+
width: 100%;
105+
}
106+
section .signin .content .form .inputBox input
107+
{
108+
position: relative;
109+
width: 100%;
110+
background: #333;
111+
border: none;
112+
outline: none;
113+
padding: 25px 10px 7.5px;
114+
border-radius: 4px;
115+
color: #fff;
116+
font-weight: 500;
117+
font-size: 1em;
118+
}
119+
section .signin .content .form .inputBox i
120+
{
121+
position: absolute;
122+
left: 0;
123+
padding: 15px 10px;
124+
font-style: normal;
125+
color: #aaa;
126+
transition: 0.5s;
127+
pointer-events: none;
128+
}
129+
.signin .content .form .inputBox input:focus ~ i,
130+
.signin .content .form .inputBox input:valid ~ i
131+
{
132+
transform: translateY(-7.5px);
133+
font-size: 0.8em;
134+
color: #fff;
135+
}
136+
.signin .content .form .links
137+
{
138+
position: relative;
139+
width: 100%;
140+
display: flex;
141+
justify-content: space-between;
142+
}
143+
.signin .content .form .links a
144+
{
145+
color: #fff;
146+
text-decoration: none;
147+
}
148+
.signin .content .form .links a:nth-child(2)
149+
{
150+
color: #0f0;
151+
font-weight: 600;
152+
}
153+
.signin .content .form .inputBox input[type="submit"]
154+
{
155+
padding: 10px;
156+
background: #0f0;
157+
color: #000;
158+
font-weight: 600;
159+
font-size: 1.35em;
160+
letter-spacing: 0.05em;
161+
cursor: pointer;
162+
}
163+
input[type="submit"]:active
164+
{
165+
opacity: 0.6;
166+
}
167+
@media (max-width: 900px)
168+
{
169+
section span
170+
{
171+
width: calc(10vw - 2px);
172+
height: calc(10vw - 2px);
173+
}
174+
}
175+
@media (max-width: 600px)
176+
{
177+
section span
178+
{
179+
width: calc(20vw - 2px);
180+
height: calc(20vw - 2px);
181+
}
182+
}

0 commit comments

Comments
 (0)