html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--
My first login form
Made for mobile view
-->
<!DOCTYPE html>
<html>
<head>
<title>Login form</title>
</head>
<body>
<main class="loginbox">
<img src="https://cdn3.iconfinder.com/data/icons/essential-rounded/64/Rounded-31-512.png" alt="avatar" class="avatar">
<header><h2>Get started</h2></header>
<form autocomplete="on">
<input class="formline"type="email" required name="email" placeholder="Email">
<input class="formline" type="password" required name="password" placeholder="Password">
<input class="submit" value="Login"type="submit" name="submit">
</form>
<h3>or</h3>
<form>
<input type="submit" class="signupbttn" value="Sign Up">
</form>
<small><a href="#">Forgot password?</a></small>
</main>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
background-image:url('https://image.freepik.com/free-vector/abstract-blur-forest-background_1073-155.jpg');
background-size:cover;
background-position:center;
height:100vh;
}
main{
position:absolute;
box-sizing:border-box;
height:auto;
width:80vw;
top:20vh;
left:10vw;
background-color:#6d5;
text-align:center;
border-radius:5%;
padding-bottom:5%;
animation:slide 0.5s ease-in-out 0s 1 normal;
}
.avatar{
height:10vh;
display:block;
margin:-5vh auto 0 auto;
position:relative;
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run