Build a Responsive Login Page Using HTML/CSS (SCSS): Step-by-Step Tutorial

-

Build a Responsive Login Page Using HTML/CSS (SCSS): Step-by-Step Tutorial


 

This title emphasizes the process of both designing and developing a login page, highlighting the importance of visual aesthetics and user experience. The inclusion of "responsive" indicates that the login page will be optimized for various screen sizes, while "HTML/CSS (SCSS)" and "step-by-step" indicate that the tutorial is beginner-friendly and easy to follow along with.

--------

HTML CODE:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <form action="#">
            <div class="segment">
                <h1>Sign up</h1>
            </div>
            <label>
                <input type="text" placeholder="Email Address"/>
            </label>
            <label>
                <input type="password" placeholder="Password"/>
            </label>
            <button class="red" type="button"><ion-icon name="lock-closed"></ion-icon> Log in</button>

            <div class="segment">
                <button class="unit" type="button"><ion-icon name="arrow-back"></ion-icon></button>
                <button class="unit" type="button"><ion-icon name="bookmark"></ion-icon></button>
                <button class="unit" type="button"><ion-icon name="settings"></ion-icon></button>
            </div>

            <div class="input-group">
                <label>
                    <input type="text" placeholder="Email Address"/>
                </label>
                <button class="unit" type="button"><ion-icon name="search"></ion-icon></button>
            </div>

        </form>
        <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    </body>
</html>
----------------

SCSS CODE:

$ruler: 16px;

$color-red: #ae1100;

$color-bg: #ebecf0;

$color-shadow: #babecc;

$color-white: #fff;


body, html{

    background-color: $color-bg;

}

body, p, input, select, textarea, button{

    font-family: 'Montserrat', sans-serif;

    letter-spacing: -0.2px;

    font-size: $ruler;

}

div, p{

    color: $color-shadow;

    text-shadow: 1px 1px 1px $color-white;

}

form{

    padding: $ruler;

    width: $ruler*20;

    margin: 0 auto;

}

.segment{

    padding: $ruler*2 0;

    text-align: center;

}

button, input{

    border: 0;

    outline: 0;

    font-size: $ruler;

    border-radius: $ruler*20;

    padding: $ruler;

    background-color: $color-bg;

    text-shadow: 1px 1px 0 $color-white;

}

label{

    display: block;

    margin-bottom: $ruler*1.5;

    width: 100%;

}

input{

    margin-right: $ruler/2;

    box-shadow: inset 2px 2px 5px $color-shadow, inset -5px -5px 10px $color-white;

    width: 100%;

    box-sizing: border-box;

    transition: all 0.2s ease-in-out;

    appearance: none;

    -webkit-appearance: none;


    &:focus{

        box-shadow: inset 1px 1px 2px $color-shadow, inset -1px -1px 2px $color-white;

    }

}

button{

    color: #61677c;

    font-weight: bold;

    box-shadow: -5px -5px 20px $color-shadow;

    transition: all 0.2s ease-in-out;

    cursor: pointer;

    font-weight: 600;


    &:hover{

        box-shadow: -2px -2px 5px $color-white, 2px 2px 5px $color-shadow;

    }

    &:active{

        box-shadow: inset 1px 1px 2px $color-shadow, inset -1px -1px 2px $color-white;

    }

    .icon{

        margin-right: $ruler/2;

    }

    &.unit{

        border-radius: $ruler/2;

        line-height: 0;

        width: $ruler*3;

        height: $ruler*3;

        display: inline-flex;

        justify-content: center;

        align-items: center;

        margin: 0 $ruler/2;

        font-size: $ruler*1.2;


        .icon{

            margin-right: 0;

        }

    }

    &.red{

        display: block;

        width: 100%;

        color: $color-red;

    }

}

.input-group{

    display: flex;

    align-items: center;

    justify-content: flex-start;


    label{

        margin: 0;

        flex: 1;

    }

}

-----------





Comments

Post a Comment

Popular posts from this blog

How to Use Hover in CSS? Responsive Text Animation Using HTML & CSS | CSS Hover Effects Part2

-
Image
In the world of web development, creating engaging and interactive user experiences is a top priority. One powerful way to achieve this is by using CSS hover effects to add life and flair to your web pages. In this tutorial, we'll explore how to use CSS hover states to craft a stunning responsive text animation for your website. Getting Started Before we dive into the nitty-gritty of CSS, let's set up our HTML structure. Here's a basic template to get started: ------------------------------------------- HTML: <html>     <head>         <title>Text Animation using CSS</title>         <link rel="stylesheet" href="style.css">     </head>     <body>         <a href="#">The Intelligent</a>     </body> </html> ------------------------------------------- Styling with CSS Now, let's move on to the CSS. Create a styles.css file and l...
Read more

How to Create a Responsive Login Page Using HTML and CSS: A Step-by-Step Guide

-
Image
 In this blog post, you will learn how to create a professional-looking login page that is responsive and works well on any device using HTML and CSS. You'll be taken through the process step-by-step, starting with the basics of HTML and CSS, before moving onto more advanced techniques such as form design, button styling, and responsive design. By the end of the guide, you'll have a fully-functional login page that you can use for your own projects. HTML :  <html>     <head>         <link rel="stylesheet" href="style.css">     </head>     <body>         <div class="wrapper">             <form action="#" method="post">                 <div class="field">                     <input type="text" id="name" name="name" placeholder="Who are you?" ...
Read more

How to About Us Page Section Using HTML & CSS

-
 How to About Us Page Section Using   HTML & CSS 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"> <script src="https://kit.fontawesome.com/2f934aa499.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="style.css"> <title>About Us</title> </head> <body> <div class="section"> <div class="container"> <div class="content-section"> <div class="title"> <h1>About Us</h1> </div> <div class="content"> <h3>The Intelligent ...
Read more