<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<link rel="icon" type="image/x-icon" href="download.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0
,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family
=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<style type="text/css">
body{
box-sizing: border-box;
margin-top: 2rem;
/*padding: auto;*/
background-image: url(wallpaperflare.com_wallpaper.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: Urbanist, Sans serif;
/*color: white;*/
}
.form-pg{
background: white;
background: rgba( 250, 237, 237, 0.15 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4.5px );
-webkit-backdrop-filter: blur( 4.5px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
/*height: 85vh;
width: 55vh;
margin-left: 36%;
margin-top: 4%;*/
border-radius: 33px;
padding: 60px;
}
.header{
text-align: center;
margin-bottom: 100px;
margin-top: -80px;
font-family: Roboto, Sans serif;
font-size: 24px;
}
.int-pg{
display: flex;
margin-bottom: 30px;
outline: none;
/*border-radius: 10px;*/
width: 22rem;
border: none;
border-bottom: 2px solid #000;
margin-top: px;
background: transparent;
font-size: 18px;
}
.int-pg::placeholder{
color: #001;
font-size: 18px;
}
.btn-pg{
width: 22rem;
text-align: center;
height: 50px;
border-radius: 80px;
margin-top: 30px;
border: none;
background-color: green;
font-size: 2rem;
color: white;
text-shadow: 0px 0px 15px #00ffc0;
}
a,h4{
text-decoration: none;
font-size: 21px;
}
</style>
</head>
<body>
<div class="form-pg">
<form>
<div class="header"><h1>Register</h1></div>
<div class="detail-pg">
<input class="int-pg" type="text" name="name" id="name" placeholder="Name">
<input class="int-pg" type="Email" name="name" id="name" placeholder="Email">
<input class="int-pg" type="Password" name="name" id="name" placeholder="Password">
<input class="int-pg" type="Password" name="name" id="name" placeholder="Confirm Password">
</div>
<div class="bt-pg">
<input class="btn-pg" type="button" value="SUBMIT"><br>
<h4>Have An Account ? <a href="login.html">Login here</a></h4>
</div>
</form>
</div>
</body>
</html>