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

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

Creating custom CSS shapes and icons

Creating Custom CSS Shapes and Icons Custom CSS shapes and icons refer to unique visual elements that are created using Cascading Style Sheets (CSS) rather than using traditional image formats such as JPEG, PNG, or SVG. By using CSS, developers can create custom shapes and icons that can be easily scaled, manipulated, and styled without having to rely on external image files. Back to TOC Table of Contents Introduction Creating Shapes with CSS Creating Icons with CSS Demo • Introduction In this article, we will learn how to create custom shapes and icons using CSS. We will explore different techniques and examples to help you understand how CSS can be used to create unique visual elements for your website. • Creating Shapes with CSS Creating custom shapes with CSS can be done using a variety of techniques such as using borders, gradients, and pseudo-...
Post a Comment
Read more

Find Your Location using HTML, CSS & JavaScript

See the Pen Untitled by Mushtaq Ahmad ( @MushtaqPhysicist ) on CodePen . Find Your Location using HTML, CSS & JavaScript It is against policy to access Geolocation in Blogger.com . However, you can still find your location by clicking on CodePen button and then clicking the Get Location button to retrieve your location data Source Code HTML Copy Code <div class="container"> <h1>Find Your Location</h1> <p>Your location: <span id="location"></span></p> <button id="getLocation">Get Location</button> </div> CSS Copy Code body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; } .container { max-width: 800px; margin: 0 auto; padding: 50px; background-color: #fff; border...
Post a Comment
Read more