About This Signup Form
A Signup Form Created with HTML, CSS, and JAVASCRIPT it is made by Coding Vlogs Youtube Channel. you can download the source code or copy the source code and use it for free. if you have not subscribed to our youtube channel so subscribe now we are creating a beautiful coding project and providing source code for free. For Download Source Code Scroll Down ↓
About This Signup Form Design
As you may see within the above picture when an input inside the form profits cognizance, its label floats to the top and a semi-thick border appears across the input. If the textual content receives typed into the input and the input loses consciousness, the label remains on top. otherwise, the label drops backtrack into the enter. Many present-day bureaucracies have a few type of transitions carried out to them. not most effective do these transitions make the shape extra dynamic, but they also help guide the consumer at the state of the enter (this is whether or not it has recognition or no longer) and what type of statistics every input is expected to address.
About This Code
On this tutorial, you may study some cool CSS functions like transitions, selectors like placeholder_focus, and many other CSS properties you should recognize. we're going to outline the markup for our signal-up shape. however before that, we should install our HTML boilerplate and successfully hyperlink to our stylesheet from the pinnacle tag. The code for this signup shape template is easy and smooth to recognize. For our comfort, we've got covered the styling and javascript code in the most important HTML document. we've got used HTML form to present a simple shape to the signup form. we have tried to create an extremely good layout for this shape.
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Coding Vlogs</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<!-- code here -->
<div class="card">
<div class="card-image">
<h2 class="card-heading">
Get started
<small>Let us create your account</small>
</h2>
</div>
<form class="card-form">
<div class="input">
<input type="text" class="input-field" required/>
<label class="input-label">Full name</label>
</div>
<div class="input">
<input type="text" class="input-field" required/>
<label class="input-label">Email</label>
</div>
<div class="input">
<input type="password" class="input-field" required/>
<label class="input-label">Password</label>
</div>
<div class="action">
<button class="action-button">Get started</button>
</div>
</form>
<div class="card-info">
<p>By signing up you are agreeing to our <a href="#">Terms and Conditions</a></p>
</div>
</div>
</div>
<!-- partial -->
</body>
</html>
CSS is a programming language used to style an HTML document. It customises how HTML elements are displayed on screen and lets you customise everything from font colours and opacity to adding a background image or linking to another page with a <href> tag.
Style (CSS)
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
*, *:after, *:before {
box-sizing: border-box;
}
body {
font-family: "DM Sans", sans-serif;
line-height: 1.5;
background-color: #f1f3fb;
padding: 0 2rem;
}
img {
max-width: 100%;
display: block;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
}
.card {
margin: 2rem auto;
display: flex;
flex-direction: column;
width: 100%;
max-width: 425px;
background-color: #FFF;
border-radius: 10px;
box-shadow: 0 10px 20px 0 rgba(153, 153, 153, 0.25);
padding: 0.75rem;
}
.card-image {
border-radius: 8px;
overflow: hidden;
padding-bottom: 65%;
background-image: url("https://images.unsplash.com/photo-1506619216599-9d16d0903dfd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80");
background-repeat: no-repeat;
background-size: 150%;
background-position: 0 5%;
position: relative;
}
.card-heading {
position: absolute;
left: 10%;
top: 15%;
right: 10%;
font-size: 1.75rem;
font-weight: 700;
color: #735400;
line-height: 1.222;
}
.card-heading small {
display: block;
font-size: 0.75em;
font-weight: 400;
margin-top: 0.25em;
}
.card-form {
padding: 2rem 1rem 0;
}
.input {
display: flex;
flex-direction: column-reverse;
position: relative;
padding-top: 1.5rem;
}
.input + .input {
margin-top: 1.5rem;
}
.input-label {
color: #8597a3;
position: absolute;
top: 1.5rem;
transition: 0.25s ease;
}
.input-field {
border: 0;
z-index: 1;
background-color: transparent;
border-bottom: 2px solid #eee;
font: inherit;
font-size: 1.125rem;
padding: 0.25rem 0;
}
.input-field:focus, .input-field:valid {
outline: 0;
border-bottom-color: #6658d3;
}
.input-field:focus + .input-label, .input-field:valid + .input-label {
color: #6658d3;
transform: translateY(-1.5rem);
}
.action {
margin-top: 2rem;
}
.action-button {
font: inherit;
font-size: 1.25rem;
padding: 1em;
width: 100%;
font-weight: 500;
background-color: #6658d3;
border-radius: 6px;
color: #FFF;
border: 0;
}
.action-button:focus {
outline: 0;
}
.card-info {
padding: 1rem 1rem;
text-align: center;
font-size: 0.875rem;
color: #8597a3;
}
.card-info a {
display: block;
color: #6658d3;
text-decoration: none;
}
I have an import statement at the top of the CSS code indicating that I am getting my favorite font from the Google font collection. If you would like to use a different font. The above CSS code is for the main form container and the header part of the form. At this stage, you should be able to see the header design on the browser when you refresh.
If You Like Our Post So Please Click On This Like Button For Download Complete Source Code You Can Click On This Download Now And Don't Forgot To Subscribe Our Youtube Channel. Follow us on social media Link is given below. And Share This Blogs To your Friends and Family.