Login Form Page Design with HTML and CSS

-

 



Your website's login page serves as the virtual gateway for your users to access a world of personalized content, services, and interactions. It's the first point of contact, the digital threshold that bridges the gap between your audience and the unique experiences your site has to offer. A well-designed login page not only ensures security but also provides a seamless and inviting user experience.

In an age where online presence is paramount, the login page plays a crucial role in shaping the initial impression users have of your website. It should not be seen merely as a functional necessity, but as an opportunity to showcase your brand's identity and commitment to user-centric design


For Full Tutorial:-

ABOUT THE NAVBAR: The basic Navbar is created in HTML and CSS and some javascript code for clicking the login page design. but if you want to make the login page only you have to

Step 1: Setting up the HTML Structure


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="logo">
            <img src="Assests/logo.png" alt="">
        </div>
        <div class="links">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
            <i class="fa-solid fa-bars" onclick=hamburg()></i>
        </div>
        <div class="links-short " id="ham">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
            <i class="fa-solid fa-xmark" onclick=cancel()></i>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>


Step 2 : Styling with CSS


*{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    background-image: url('Assests/background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.container{
    margin-top: 10px;
    width: 100%;
    height: 10vh;
    display: flex;
    justify-content: space-around;
}

.container .logo img{
    width: 200px;
    height: 70px;
}

.container .links{
    margin-top: 20px;
}
.container .links a{
    color: white;
    text-decoration: none;
    margin-right: 60px;
    font-size: 1.7rem;
}

.container .links i{
    color: white;
    font-size: 2rem;
    position: absolute;
    right: 60px;
    top: 30px;
    opacity: 0;
}


.links-short{
    position: absolute;
    top: 0;
    transition: 0.3s linear ;
    transform: translateY(-400px);
    width: 100%;
    height: 30vh;
    background-color: black;
}

.links-short a{
    display: flex;
    margin-top: 30px;
    color: white;
    text-decoration: none;
    justify-content: center;
}

.links-short a:hover{
    font-size: 1.3rem;
}

.links-short i{
    color: white;
    position: absolute;
    right: 60px;
    top: 20px;
    font-size: 2rem;
}
@media (max-width:990px) {
    .container .links i{
        opacity: 1;
    }

    .container .links a{
        opacity: 0;
    }

   
}


Step 3 : Now Script with JS


const ham = document.getElementById('ham')

function hamburg(){
    ham.style.transform = "translateY(0px)";
}
function  cancel(){
    ham.style.transform = "translateY(-400px)";
}



Conclusion


As web technologies evolve, staying updated with our latest practices and frameworks will enable you to create even more user-friendly navigation systems for your websites. Embracing responsive design principles ensures that your website remains accessible and user-friendly across the ever-expanding array of devices and screen sizes.


Comments

Post a Comment

Popular posts from this blog

Shoes website using html and css - procoder09

-
Image
Shoes Website Using HTML and CSS Explore our selection of premium brands renowned for their quality craftsmanship and innovative designs. Whether you're seeking the latest trends or timeless classics, our website is your one-stop destination for all your shoe needs. Browse through our user-friendly interface, where you can effortlessly search, filter, and compare styles to find the perfect fit. With detailed product descriptions, high-resolution images, and customer reviews, you can shop with confidence, knowing you're making an informed decision. Experience the convenience of online shopping with our seamless checkout process and secure payment options. Plus, enjoy fast and reliable shipping to your doorstep, so you can start strutting in your new shoes in no time. Watch Full Tutorial :- Step 1: Set Up Your HTML Structure: Begin by creating a new HTML file. You can use any code editor, such as Visual Studio Code or Sublime Text, to write your code. Here's a basic HTML...
Read more

Full Travel Responsive Website using html and css only | Source Code

-
Image
H ello, friends today in this blog I will teach you how to Create A Website in HTML and CSS Only. Earlier I have shared a blog about a Complete Personal Portfolio Website using HTML CSS & JavaScript and now I’m going to create a simple website. How can I make my website attractive? To make a website beautiful and attractive you need to follow the following steps: Take simple colors for your website. Use a maximum of 3 to 4 color Make Website Responsive (Fite in any screen sizes devices) Try To use the same sizes and font family for text. Keep essential navigation links inside the navigation bar If you are feeling difficulty with what I’m saying then you can watch the full video tutorial of this program.   For Source Code: Check above video discription
Read more

Bus Ticket Booking System Website design using HTML and CSS

-
Image
INTRODUCTION In today's fast-paced world, convenience is key, and one area where convenience is highly valued is in travel. Whether it's for commuting to work or embarking on a leisurely trip, having an efficient and user-friendly system for booking bus tickets is essential. This is where a well-designed bus ticket booking system website comes into play. In this article, we'll explore the process of designing such a website using HTML and CSS, focusing on key design principles and elements. Understanding the Requirements: Before diving into the design process, it's crucial to understand the requirements of a bus ticket booking system website. At its core, the website should allow users to search for bus routes, view available seats, select preferred departure and arrival times, and securely book tickets online. Additionally, the website should provide users with essential information such as bus schedules, ticket prices, and booking policies. Designing the Layout: The l...
Read more