Hostinger one of the most popular hosting and domains provider platforms worldwide, Hostinger has a user-friendly login page that captures our attention with its sleek and intuitive design. Have you ever wondered how they create such a visually appealing login page? Well, Look no further!
In this beginner-friendly blog post, I’ll walk you through the process of creating a responsive hostinger login page using only HTML and CSS. You’ll learn how to create interactive and responsive forms, position elements on the page, and style them to match the Hostinger aesthetic.
By the end of this blog post, you’ll understand how HTML and CSS work together to create a visually appealing and user-friendly form that looks great on all devices. So, let’s waste no time and start the steps to creating a Hostinger login form page!
Steps To Create Hostinger Login Page in HTML and CSS
To create a Hostinger login or sign-in page using HTML and CSS, follow these step-by-step instructions:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a style.css file. The file name must be style and its extension .css
- Download and place the Images folder in your project directory. This folder includes the Netflix logo and the hero background image.
To start, add the following HTML codes to your index.html file: This code includes various elements such as navigation, headings, paragraphs, a form, input fields, a button, and links. I’ve also included default form validation using the required attribute in the input elements.
See also
- Form Validation Using Jquery
- How To Create Login Attempt Limit Form In PHP Using MySQL Database
- Registration & Login with Mobile OTP verification using PHP with mysql
- Registration and Login using PHP OOPs Concepts
- Registration & Login with Email OTP verification using PHP Mysql
- Implement captcha code login validation in PHP with Mysql
- CakePHP 4 Form Model Validation with Example
Create HTML Page
First, paste the following codes into your index.html file.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Log in to Hostinger</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="brand-logo mt-4 ms-4">
<img src="img/hostinger-logo-dark.svg" alt="Hostinger logo">
</div>
<div class="login-form mt-5">
<div class="row">
<h3 class="text-center mb-25 login-title">Log in</h3>
<form class="d-flex justify-content-center align-items-center flex-column w-100" accept="" method="POST">
<div class="social-login-block w-100 mt-4 mb-5">
<a class="login-with-google"><img src="img/Google-Logo.png" width="20px" title="Log in with Google"></a>
<a class="login-with-facebook"><img src="img/facebook-logo.webp" width="20px" title="Log in with facebook"></a>
</div>
<div class="col-3 mb-3" style="margin-bottom:12px">
<div class="or-divider">
<span>or</span>
</div>
</div>
<div class="col-3 mb-4">
<input type="email" class="login-input" id="email" placeholder="Email">
</div>
<div class="col-3 mb-4">
<input type="password" class="login-input" id="password" placeholder="Password">
<div class="login-icon">
<i class="bi bi-eye-fill"></i>
</div>
</div>
<div class="d-grid gap-2 col-3 mx-auto">
<button class="btn btn-primary btn-lg login-btn h-button" type="button">Log in</button>
</div>
<div class="col-3 mb-4 text-center">
<p><a href="#">Forgot password?</a></p>
<p>Not a member yet? <a href="register.html">Choose a hosting plan</a> and get started now!</p>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".login-icon i").on('click', function(event) {
event.preventDefault();
if($("#password").attr('type') == 'password'){
$("#password").attr('type', 'text');
$('.login-icon i').css("color", "#6747c7");
}else if($("#password").attr('type') == 'text'){
$("#password").attr('type', 'password');
$('.login-icon i').css("color", "");
}
});
});
</script>Create CSS Page
Next, add the following CSS codes to your style.css file to achieve a design that looks like the Netflix login page. This code includes different styles for elements such as color, font, background, border, etc., and makes the page responsive for all devices. Feel free to customize these styles according to your preferences.
style.css
body{
font-family: Muli,sans-serif;
font-weight: 400;
font-style: normal;
color: #2f1c6a;
}
.login-title{
font-size: 24px;
color: #2f1c6a;
font-weight: 700 !important;
font-family: Muli,sans-serif;
}
.social-login-block{
text-align: center;
}
.login-with-google{
border: 1px solid #dadce0;
border-radius: 4px;
padding: 14px 24px;
}
.login-with-facebook{
border: 1px solid #dadce0;
border-radius: 4px;
padding: 14px 24px;
background-color: #1877F2;
}
.login-btn{
background-color: #6747c7 !important;
border-radius: 4px !important;
border-radius: 3px;
padding: 15px 20px;
color: #fff;
font-size: 14px;
font-weight: 700;
text-align: center;
cursor: pointer;
border: 1px solid #673de6;
transition: all .3s ease-in-out;
}
.login-btn:hover{
background-color: #6610f2;
}
.or-divider::after,
.or-divider::before{
color: #979797;
border-top: 1px solid #ccc;
content: " ";
display: inline-block;
margin-top: 0px;
vertical-align: middle;
width: 47%;
}
.or-divider,span{
color: #979797;
font-size: 14px;
}
p {
font-size: 16px;
font-weight: 700;
text-decoration: none;
margin-top: 25px;
}
a{
color: #6747c7;
text-decoration: none;
font-size: 15px;
font-weight: 700;
}
.login-icon{
cursor: pointer;
display: flex;
margin-bottom: 0;
max-width: 24px;
overflow: hidden;
position: absolute;
right: 590px;
margin-top: -35px;
}
.login-icon i{
font-size: 20px;
color: #6c757d;
}
.login-input{
border-radius: 4px !important;
position: relative;
display: block;
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.37);
border-radius: 4px;
background-color: transparent;
margin: 0px auto;
padding: 6px 4px 4px 14px;
height: 50px;
outline: none !important;
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
border:1px solid #d9d9d9;
}
label {
display: none;
padding: 0 6px;
font-size: 15px;
font-weight: 400;
cursor: text;
}
.login-input:focus {
color: #6c757d;
font-size: 15px;
border: 1px solid #6f42c1;
transition: all 0.15s ease-in-out;
}
Conclusion
In conclusion, creating a Hostinger inspired login page can be a valuable project for beginner web developers. It provides a great opportunity to dive into various aspects of web development, such as creating responsive forms, styling elements, and even incorporating floating label input animations.
By following the steps outlined in this post, I hope you’re able to create a responsive Hostinger login page using only HTML and CSS. To understand the code better, you should experiment with it. To further enhance your web development skills, I recommend you try recreating the other login form designs that are available on this website.
If you encounter any problems while creating your Hostinger login page, you can download the source code files for this Hostinger login or sign-in page project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.
You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊
