Skip to main content

Login Form using only HTML & CSS with Code Example

How to Create a Circular Scroll Progress with HTML, CSS & JavaScript

A login form is an essential component of many websites and applications that require users to authenticate before accessing certain contents.

Source Code

HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <!-- Font Awesome Cdn Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>

<body>
    <div class="wrapper">
        <h1>Hello World!</h1>
        <p>Welcome to the Website</p>
        <form>
            <input type="text" placeholder="Enter username">
            <input type="password" placeholder="Password">
            <p class="recover">
                <a href="#">Recover Password</a>
            </p>
            <closeform></closeform>
        </form>
        <button>Sign in</button>
        <p class="or">
            ----- or continue with -----
        </p>
        <div class="icons">
            <i class="fab fa-google"></i>
            <i class="fab fa-github"></i>
            <i class="fab fa-facebook"></i>
        </div>
        <div class="not-member">
            Not a member? <a href="#">Register Now</a>
        </div>
    </div>
</body>

</html>
CSS 

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  background: #dfe9f5;
}
.wrapper{
  width: 330px;
  padding: 2rem 0 1rem 0;
  margin: 50px auto;
  background: #fff;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
}
h1{
  font-size: 2rem;
  color: #07001f;
}
p{
  margin-bottom: 1.7rem;
}
form input{
  width: 85%;
  outline: none;
  border: none;
  background: #dfe9f5;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 10px;
}
.recover{
  text-align: right;
  font-size: 0.8rem;
  margin: 0.2rem 1.7rem 0 0;
}
.recover a{
  text-decoration: none;
  color: #07001f;
}
button{
  font-size: 1.1rem;
  margin-top: 1rem;
  padding: 8px 0;
  border-radius: 5px;
  outline: none;
  border: none;
  width: 85%;
  background: rgb(71, 105, 255);
  color: #fff;
  cursor: pointer;
}
button:hover{
  background: rgba(122, 30, 30, 0.767);
}
.or{
  font-size: 0.8rem;
  margin-top: 1.5rem;
}
.icons i{
  color: #07001f;
  padding: 00.8rem 1.5rem;
  border-radius: 10px;
  margin-left: .9rem;
  font-size: 1.5rem;
  cursor: pointer;
  border: 2px solid #dfe9f5;
}
.icons i:hover{
  color: #fff !important;
  background: #07001f;
  transition: 1s;
}
.icons i:first-child{
  color: green;
}
.icons i:last-child{
  color: blue;
}
.not-member{
  font-size: 0.8rem;
  margin-top: 1.4rem;
}
.not-member a{
  color: tomato;
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}
JavaScript 

// Try edit me
const message = 'Hello Morioh!' 

// Update text
document.querySelector('#root').innerHTML = message

// Log to console
console.log(message)

Step By Step Explanation of above JS code snippet:

•const message = 'Hello Morioh!':

This line creates a constant variable named message and assigns it the value of the string "Hello Morioh!".

•document.querySelector('#root').innerHTML = message:

This line finds the HTML element with the ID of "root" using the querySelector method and sets its innerHTML property to the value of the message variable. This means that the text "Hello Morioh!" will be displayed on the webpage where the element with ID "root" is located.

•console.log(message):

This line logs the value of the message variable to the browser console, which is a useful tool for debugging and troubleshooting code.

Labels:

Comments

Post a Comment

Hello,

Thank you for taking the time to leave a comment! Your feedback is important to us and we appreciate any suggestions or thoughts you may have. We strive to create the best possible experience for our users and your comments will help us achieve that goal.

If you have any questions or concerns, please don't hesitate to reach out to us. We're here to help and are always happy to hear from our users.

Thank you again for your comment and have a great day!

Best regards,
NewWebSofts

Popular posts from this blog

CSS property border-image-outset

Page Title The border-image-outset property in CSS defines the extent to which an element's border-image extends beyond its border-box, creating a space between the element's border-image area and the edge of its border. .container { border-style: ridge; border-width: 3rem; border-image-source: url('path/to/image.jpg'); border-image-slice: 70; border-image-width: 40%; border-image-repeat: repeat; border-image-outset: 2; } See the Pen Untitled by Mushtaq Ahmad ( @MushtaqPhysicist ) on CodePen . The CSS border-image-outset property, also known as the "Edge Overhang" property, is specified in the CSS Backgrounds and Borders Module Level 3. Its purpose is to enable the border image area to extend beyond an element's border-box, which is accurately described by the term "Edge Overhang". S...
Post a Comment
Read more

Everything You Need to Know About CSS Grid

Everything You Need to Know About CSS Grid We have a thorough manual on CSS grid, which covers all aspects of settings for both parent container and child elements of grid. Back to TOC Table of Contents Introduction Basics Important Terminology Grid Properties Special Units & Functions Fluid Columns Snippet Animation Introduction CSS Grid Layout, also known as "Grid" or "CSS Grid", is a revolutionary two-dimensional grid-based layout system that completely transforms the way we design user interfaces. In the past, CSS was used to layout web pages, but it was never very effective. We used tables, floats, positioning, and inline-...
Post a Comment
Read more

Styling SVGs with CSS

Styling SVGs with CSS SVGs are a versatile and powerful format for creating high-quality graphics on the web. However, by default, SVGs can appear plain and unstyled, which can make them feel out of place in a modern web design.That's where CSS comes in. By using CSS to style SVGs, you can add color, gradients, shadows, animations, and other visual effects that make them more dynamic and engaging. Back to TOC Table of Contents What is SVG? Inline vs External SVGs Basic Styling Techniques Advanced Styling Techniques Animation Demo • What is SVG? SVG stands for Scalable Vector Graphics. It is a vector graphics format that uses XML to define two-dimensional graphics. Unlike raster graphics, such as JPEGs or PNGs, SVGs can be scaled without losing quality, making them ideal for use on websites and other digital media. • Inline vs External SVGs SVGs can be...
Post a Comment
Read more