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
28
<!--
Created By: Shruti
Date: 20 July 2019
-->
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<div class="container" id="con">
<div class="design"></div>
<h1>Sign up</h1>
<hr>
<form>
<div class="username">
<i class="fa fa-user" aria-hidden="true"></i>
<input type="text" placeholder="username" required>
</div>
<div class="email">
<i class="fa fa-envelope" aria-hidden="true"></i>
<input type="email" placeholder="email" required>
</div>
<div class="password">
<i class="fa fa-lock" aria-hidden="true"></i>
<input type="password" placeholder="password" required>
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
/*
Created By: Shruti
Date: 20 July 2019
*/
body{
margin: 0;
padding: 0;
background: #330127;
}
.container{
position: absolute;
height: 490px;
width: 350px;
top: 7%;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 20px;
background: #fff;
overflow: hidden;
}
.design{
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
background: linear-gradient(to top left, rgba(253, 33, 142, 0.7), rgba(122, 23, 253, 0.7));
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*
Created By: Shruti
Date: 20 July 2019
*/
function change() {
var body = document.querySelector('body');
var con = document.getElementById('con');
var checkbox = document.getElementById('checkbox');
if(checkbox.checked == true){
con.style.background = '#000';
body.style.background = '#ffbbe9';
}
else{
con.style.background = '#fff';
body.style.background = '#330127';
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run