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.

Comments

Popular posts from this blog

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...

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

See the Pen How to Create a Circular Scroll Progress with HTML, CSS & JavaScript by Mushtaq Ahmad ( @MushtaqPhysicist ) on CodePen . How to Create a Circular Scroll Progress with HTML, CSS & JavaScript In this guide, we will explore process of using HTML, CSS, and JavaScript to design a circular scroll progress indicator. This type of indicator displays percentage of a webpage that has been scrolled. Specifically, we will create a circular indicator and position it in bottom right corner of webpage. The indicator's fill level will correspond to amount of page that has been scrolled. HTML Copy Code <!DOCTYPE html> <html lang="en"> <head> <title>Scroll Percentage</title> <!-- Stylesheet --> <link rel="stylesheet" href="style.css"> </head> <body>...

Develop a Quiz App with Timer using HTML CSS & JavaScript

Develop a Quiz App with Timer using HTML CSS & JavaScript See the Pen Create a Quiz App with Timer using HTML CSS & JavaScript by Mushtaq Ahmad ( @MushtaqPhysicist ) on CodePen . In this article you’ll learn how to Create a Quiz Application with Timer using HTML CSS & JavaScript. The Quiz App with Timer program consists of three layers or boxes that are sequentially displayed when a specific button is clicked. Initially, the webpage displays a "Start Quiz" button, which, upon clicking, triggers a pop-up animation displaying an info box. The info box contains the rules of the quiz and two buttons labeled "Exit" and "Continue." Clicking on the "Exit" button hides the info box, while clicking on "Continue" button displays the Quiz Box. Within the Quiz Box, there is a header with a title on the left side and a timer box on the right side. The timer starts at 15 seconds and decremen...