Hello friends today in this blog you will learn how to create 3D rotate registration form using html and CSS. If you are aware of html and CSS or you are in it in the beginning then you will be taught to create a registration form in this blog.
Before this registration form, we have shared many registration forms, which you can view or read by clicking on this link or you can also go to the menu of this website. This registration form is designed only with the help of html and CSS. This form has no internal function. See it only as a design and learn how to design such a form. Which will help you to form in the beginning.
You may have seen many registration forms designed, but o is designed in either JavaScript or jquery. Now it's time to create a 3D registration form using html and CSS code. That looks beautiful and attracts what we have shared
You can see in this image that a 3D rotate registration form is designed. Which is designed from html and CSS. Moving the mouse over this form, the page of the form becomes straight. In the left site of this form, 3 social media login hover button has been given, which makes this form look beautiful and attractive. So 3 input fields and a sign up button is given to its right. Clicking inside this input field, the name of the place holder of the input hovers upwards and icons are also placed in the right of the input which you can use in this form Let's learn how to design with the help of html and CSS.
If you are having difficulty in understanding this form or are having many difficulties, then you can understand it by watching the video tutorial of this form and shown by writing code in this video tutorial, which you will not have any trouble in understanding the form of this registration form. The following is given below, which you can see by clicking on the video.
Video Tutorial of 3D registration form design using html and css
I hope that you have understood by watching the video tutorial of this registration form. Therefore, I mean to say that how you have written the code of this registration form and where you have to use this code, you must have known. Which you must have understood this form very well and you will start designing such forms.
3D registration form design Source Codes
First of all we know about the code of html of the 3D registration form, we did a div whose class name is given wrapeer and undar of this wrapper took second div whose class name is main. This div has got a h1 tag inside it called h1 heading tag And has taken two div tags which are class names sign-up and sign-up-l.
Inside the class sign-up, three anchor tags are taken and this anchor tag has a href link and its class name is btn. An <i> tag is taken inside these three anchor tags. This tag has been used as the font icons, whose class names are given separately, such as fab fa-Facebook, fab fa-twitter and fab fa -google-plus and outside of which the icon name of these classes is written
And inside the class sign-up-l, we have taken a form tag whose method = "POST" is done inside the form char p tag. It is used as a paragraph. It is a block element. Inside this p tag we input Is taken and the <i> tag of this input is used as the font icon
Know about the css of this form. Firstly we have zeroed the margin and padding on this page and the box-size is border-boxed, after this the class wrapper is styled with width height and background-color and others The tag and class are designed with different style tags, you can see this form using @media screen for different devices.
If you like this 3D registration form or you want to get the source code of this form then you can get the source code of this form. To get this code, we have given below two code files, one html code file and the other CSS code. File, scroll down and copy both these code files and paste them into the file, which will help you to understand it more.
HTML CODE FILE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="form1.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="wrapper fl">
<div class="main">
<h1 class="head">
Create An Account</h1>
<div class="sign-up fl">
<a href="#" class="btn ico bg1 hov1"><i class="fa fa-facebook fab"></i> Sign in with Facebook</a>
<a href="#" class="btn ico bg2 hov2"><i class="fa fa-twitter fab"></i> Sign in with Twitter</a>
<a href="#" class="btn ico bg3 hov3"><i class="fa fa-google-plus-g fab"></i> Sign in with Google<b>+</b></a>
</div>
<div class="sign-up-l fr">
<form method="post">
<p class="inpt">
<input type="text" name="fname" placeholder="username" required><i class="fa fa-user fas"></i>
</p>
<p class="inpt">
<input type="email" name="uid" placeholder="email" required><i class="fa fa-envelope fas"></i>
</p>
<p class="inpt">
<input type="password" name="pass" placeholder="password"><i class="fa fa-lock fas"></i>
</p>
<p>
<input type="submit" name="sub" value="Sign up" class="sub">
</p>
</form>
</div>
</div>
</div>
</body>
</html>
CSS CODE FILE :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bg1{background-color: #3b5999;}
.bg2{background-color:#55acee;}
.bg3{background-color:#dd4b39;}
.bg4{background-color:#131418;}
.fl{float: left;}
.fr{float: right;}
.wrapper{
width: 100%;
height: 100vh;
background-image: linear-gradient(135deg, #007991 30%, #78ffd6 90%);
}
.main{
width: 50%;
height: 400px;
margin: auto;
margin-top: 100px;
box-shadow: 2px 2px 10px #00000080;
transform: rotateX(60deg) rotateZ(-50deg);
transform-style: preserve-3d;
transition: all 2s;
}
.main:hover {
transform: rotateX(0deg) rotateZ(0deg);
}
.sign-up{
width: 50%;
height: 325px;
background-color: #E93570;
transform-style: preserve-3d;
}
.head{
color: #C9D8F3;
font-size: 30px;
text-align: center;
padding: 20px 0;
background-image: linear-gradient(135deg, #007991 30%, #78ffd6 90%);
box-shadow: 2px 2px 10px #00000080;
}
.btn{
display: block;
width: 80%;
margin: auto;
margin-top: 30px;
padding: 15px 15px;
position: relative;
text-decoration: none;
font-size: 20px;
color: #C9D8F3;
border-radius: 10px;
}
.ico{
padding-left: 70px;
position: relative;
}
.ico .fab{
position: absolute;
left: 0;
top: 0;
bottom: 0;
line-height: 50px;
padding: 0 15px 0 15px;
background-color: #00000021;
border-radius: 10px 0 0 10px;
}
.hov1:hover{
background-color: #1b4192;
box-shadow: inset 0 3px 0 #00000033;
}
.hov2:hover{
background-color: #248ddd;
box-shadow: inset 0 3px 0 #00000033;
}
.hov3:hover{
background-color: #e93d26;
box-shadow: inset 0 3px 0 #00000033;
}
.sign-up-l{
width: 50%;
height: 325px;
transform-style: preserve-3d;
background: linear-gradient(
60deg,
#f79533,
#f37055,
#ef4e7b,
#a166ab,
#5073b8,
#1098ad,
#07b39b,
#6fba82
);
}
.inpt{
width: 80%;
margin: 20px 10%;
position: relative;
border-bottom: 1px solid #FD2E62;
}
.inpt input{
width: 100%;
height: 45px;
border: none;
background-color: #fff;
outline: none;
color: #B0B0B0;
font-size: 16px;
}
.inpt input:focus::-webkit-input-placeholder{
color: #B0B0B0;
font-size: 16px;
font-weight: bold;
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
.inpt input::placeholder{
font-size: 16px;
color: #B0B0B0;
}
.fas{
font-size: 20px;
padding: 10px 10px ;
position: absolute;
right: 1%;
top: 0;
bottom: 0;
color: #333333;
}
.sub{
width: 80%;
height: 40px;
margin: 20px 10%;
background: linear-gradient(
60deg,
#f79533,
#f37055,
#ef4e7b,
#a166ab,
#5073b8,
#1098ad,
#07b39b,
#6fba82
);
box-shadow: 2px 2px 10px #00000080;
border: none;
color: #C9D8F3;
border-radius: 25px;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
outline: none;
}
.sub:hover{
color: #1fffc7;
background: linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%);
}
Post a Comment