Beautiful registration form design
Source code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="registration.css">
</head>
<body>
<div class="header">
<span class="mainlogo">
<span class="outter">
<span class="inner">
<span class="logo">
<i>
AB
</i>
<span class="official">
</span>
<br>
<span class="o">
<i>
O
</i>
</span>
<span class="ff">
<i>
ff
</i>
</span>
<span class="icial">
<i>
icial
</i>
</span>
</span>
</span>
</span>
</span>
</div>
<div class="layout">
<div class="divimg">
<div class="image">
<img src="abofficial.jpg" alt="">
</div>
</div>
<div class="form">
<div class="formlayout">
<form action="#" method="POST">
<div class="forminput">
<br>
<h2>
REGISTRATION INFO
</h2>
<div class="igname">
<label for="fname">FIRST NAME</label>
<input type="text" name="Fname" id="fname" required placeholder="Enter First Name">
</div>
<br>
<div class="igusername">
<label for="Lname">LAST NAME</label>
<input type="text" name="Lname" id="Lname" required placeholder="Enter last Name">
</div>
<br>
<div class="igdob">
<label for="un">USER NAME</label>
<input type="text" name="un" id="un" required placeholder="Enter UserName">
</div>
<br>
<div class="iggender">
<label for="country">COUNTRY</label>
<input type="text" name="country" id="country" required placeholder="Enter Country">
</div>
<br>
<div class="igemail">
<label for="email">EMAIL</label>
<input type="email" name="email" id="email" required placeholder="Enter Your Email">
</div>
<br>
<div class="igpass">
<label for="pass">PASSWORD</label>
<input type="password" name="pass" id="pass" required placeholder="Enter Password">
</div>
</div>
<br>
<br>
<button type="submit">
SUBMIT
</button>
</form>
</div>
</div>
</div>
</body>
</html>
css
body {
background-image: url(https://images.wallpapersden.com/image/download/star-wars-the-mandalorian_a2tqa26UmZqaraWkpJRmZ21lrWZlZ2k.jpg);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.header {
background-color: black;
opacity: 75%;
position: absolute;
left: 0;
right: 0;
}
.outter {
margin-top: 5px;
margin-bottom: 5px;
opacity: 100% !important;
margin-left: 1%;
background-color: white;
width: 180px;
height: 100px;
display: block;
border-top-right-radius: 35px;
border-bottom-left-radius: 35px;
}
.inner {
font-family: Brush Script MT;
position: relative;
left: 10px;
top: 10px;
width: 171px;
height: 91px;
background-color: black;
display: block;
border-top-right-radius: 35px;
border-bottom-left-radius: 35px;
}
.logo {
position: relative;
left: 7px;
top: -5px;
font-size: 52px;
color: crimson;
}
.o {
color: crimson;
position: relative;
left: 30px;
font-size: 46px;
top: -23px;
}
.ff {
color: coral;
font-size: 46px;
position: relative;
top: -30px;
left: 15px;
}
.icial {
color: crimson;
font-size: 46px;
position: relative;
top: -23px;
left: -2px;
}
.layout {
display: flex;
flex-direction: row;
width: 80%;
margin-left: 10%;
position: fixed;
}
.layout {
display: flex;
flex-direction: row;
width: 80%;
top: 130px;
}
.divimg, .form {
width: 50%;
}
.image {
width: fit-content;
height: fit-content;
}
.mainlogo {
opacity: 200% !important;
}
img {
max-width: 100%;
max-height: 80%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
opacity: 65%;
}
.form {
color: crimson;
opacity: 85%;
background-color: black;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
h2 {
margin-left: 12%;
}
label {
align-items: center;
display: flex;
margin-left: 12%;
font-size: 13px;
}
input {
border: 1px solid rgb(44, 44, 44);
outline: none;
width: 70%;
margin-left: 12%;
height: 40px;
padding-left: 5%;
background-color: black;
}
::placeholder {
opacity: 60%;
color: white;
}
input:hover {
outline: none;
border-right: 1px solid crimson;
}
input:focus-within {
outline: none;
color: white;
font-size: 15px;
border-bottom: 1px groove crimson;
border-right: 1px groove crimson;
}
input:window-inactive {
color: white;
}
button {
position: relative;
margin-left: 25%;
outline: none;
border: none;
width: 50%;
height: 40px;
color: white;
background-color: rgb(4, 161, 4);
font-size: 22px;
letter-spacing: 1px;
}
button:hover {
border: 1px solid crimson;
cursor: pointer;
font-size: 15px;
}
Comments
Post a Comment