Abhikesh Kumar

Total Post: 42

Hi, I am Abhikesh Kumar, a professional web designer specializing in creating visually appealing and highly functional websites for individuals. With a mix of creativity and technical know-how, I design websites that not only look beautiful but also work perfectly, all while meeting the unique needs and goals of each client. I’m skilled in WordPress, HTML, CSS, JavaScript etc. ensuring that every website I build is fully optimized, responsive, and user-friendly.

HTML and CSS
0
1
15 min read

Responsive Login & Registration Form in HTML & CSS | Free Code

Are you ready to create your own responsive login and registration form in HTML and CSS? This detailed tutorial will show you how to create a responsive, user-friendly, and modern login and registration form. This form design can help you improve the user experience on your website, no matter if you’re a beginner in this field. Plus, you can also download the full source code to customize and use in your projects.

By the end of this guide, you’ll understand how to create a Responsive Login and Registration Form and optimize it for better performance and SEO. So, let’s get started!

What is a Responsive Login and Registration Form?

Websites that need user authentication must have a responsive login and registration form. While the registration form gathers user data for account creation, the login form enables users to enter their email address, phone number, or password to access the website. Combining both forms on a single page with a seamless design improves the user experience, especially on mobile devices.

The form is responsive, and it adjusts perfectly to a variety of screen sizes, ensuring that your website looks professional and operates efficiently on all devices.

Why Build a Responsive Login and Registration Form Using HTML & CSS?

Using HTML and CSS to create a responsive login and registration form has several benefits:

Lightweight Design: HTML and CSS ensure your form loads quickly, which is critical for SEO and user retention.
No JavaScript Required: This form uses only HTML and CSS, keeping your design simple and efficient while avoiding unnecessary JavaScript.
Fully Responsive: CSS media queries ensure your form adapts seamlessly to various screen sizes, providing an optimal user experience.
SEO-Friendly: By using semantic HTML and focusing on performance, your page will rank better in search engines.

Features of the Responsive Login and Registration Form

Single-page Design: Both the login and registration forms are integrated on one page, and users can easily toggle between them with a smooth transition.
CSS Flip Animation: The form smoothly flips between the login and registration sections, creating an engaging visual effect.
No JavaScript: This design relies solely on CSS transitions, simplifying the development process.
Responsive Layout: The form is designed to work perfectly across all devices, ensuring a great user experience.
SEO Optimization: Semantic HTML tags and lightweight CSS ensure that your form loads quickly and ranks well in search engines.

Step-by-Step Guide: Building a Responsive Login and Registration Form

1. Setting Up the HTML Structure

Start by setting up the basic HTML structure. The HTML will contain two main sections: the login form and the registration form. The form toggles between login and registration using a checkbox and CSS transitions.

Here’s the basic HTML structure:


<!DOCTYPE html>
<!-- Created by abhikesh |www.abhikesh.com-->
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title> Login and Registration Form in HTML & CSS | abhikesh </title>
  <link rel="stylesheet" href="style.css">
  <!-- Fontawesome CDN Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="container">
    <input type="checkbox" id="flip">
    <div class="cover">
      <div class="front">
        <img src="images/frontImg.jpg" alt="">
        <div class="text">
          <span class="text-1">Every new friend is a <br> new adventure</span>
          <span class="text-2">Let's get connected</span>
        </div>
      </div>
      <div class="back">
        <img class="backImg" src="images/backImg.jpg" alt="">
        <div class="text">
          <span class="text-1">Complete miles of journey <br> with one step</span>
          <span class="text-2">Let's get started</span>
        </div>
      </div>
    </div>
    <div class="forms">
      <div class="form-content">
        <div class="login-form">
          <div class="title">Login</div>
          <form action="#">
            <div class="input-boxes">
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                <input type="text" placeholder="Enter your email" required>
              </div>
              <div class="input-box">
                <i class="fas fa-lock"></i>
                <input type="password" placeholder="Enter your password" required>
              </div>
              <div class="text"><a href="#">Forgot password?</a></div>
              <div class="button input-box">
                <input type="submit" value="Sumbit">
              </div>
              <div class="text sign-up-text">Don't have an account? <label for="flip">Sigup now</label></div>
            </div>
          </form>
        </div>
        <div class="signup-form">
          <div class="title">Signup</div>
          <form action="#">
            <div class="input-boxes">
              <div class="input-box">
                <i class="fas fa-user"></i>
                <input type="text" placeholder="Enter your name" required>
              </div>
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                <input type="text" placeholder="Enter your email" required>
              </div>
              <div class="input-box">
                <i class="fas fa-lock"></i>
                <input type="password" placeholder="Enter your password" required>
              </div>
              <div class="button input-box">
                <input type="submit" value="Sumbit">
              </div>
              <div class="text sign-up-text">Already have an account? <label for="flip">Login now</label></div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

2. Styling with CSS

Now that you have the structure, it’s time to style the form using CSS. The CSS will manage the layout, colors, and flip animation.

Here’s an example of the basic CSS for the form:


/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  padding: 30px;
}
.container {
  position: relative;
  max-width: 850px;
  width: 100%;
  background: #fff;
  padding: 40px 30px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  perspective: 2700px;
}
.container .cover {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 50%;
  z-index: 98;
  transition: all 1s ease;
  transform-origin: left;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.container #flip:checked ~ .cover {
  transform: rotateY(-180deg);
}
.container #flip:checked ~ .forms .login-form {
  pointer-events: none;
}
.container .cover .front,
.container .cover .back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.cover .back {
  transform: rotateY(180deg);
}
.container .cover img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 10;
}
.container .cover .text {
  position: absolute;
  z-index: 10;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container .cover .text::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  background: #FF014F;
}
.cover .text .text-1,
.cover .text .text-2 {
  z-index: 20;
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.cover .text .text-2 {
  font-size: 15px;
  font-weight: 500;
}
.container .forms {
  height: 100%;
  width: 100%;
  background: #fff;
}
.container .form-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-content .login-form,
.form-content .signup-form {
  width: calc(100% / 2 - 25px);
}
.forms .form-content .title {
  position: relative;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}
.forms .form-content .title:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 25px;
  background: #FF014F;
}
.forms .signup-form .title:before {
  width: 20px;
}
.forms .form-content .input-boxes {
  margin-top: 30px;
}
.forms .form-content .input-box {
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  margin: 10px 0;
  position: relative;
}
.form-content .input-box input {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.form-content .input-box input:focus,
.form-content .input-box input:valid {
  border-color: #FF014F;
}
.form-content .input-box i {
  position: absolute;
  color: #FF014F;
  font-size: 17px;
}
.forms .form-content .text {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.forms .form-content .text a {
  text-decoration: none;
}
.forms .form-content .text a:hover {
  text-decoration: underline;
}
.forms .form-content .button {
  color: #fff;
  margin-top: 40px;
}
.forms .form-content .button input {
  color: #fff;
  background: #FF014F;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  transition: all 0.4s ease;
}
.forms .form-content .button input:hover {
  background: #FF014F;
}
.forms .form-content label {
  color: #FF014F;
  cursor: pointer;
}
.forms .form-content label:hover {
  text-decoration: underline;
}
.forms .form-content .login-text,
.forms .form-content .sign-up-text {
  text-align: center;
  margin-top: 25px;
}
.container #flip {
  display: none;
}
a{
  color: #FF014F;
}
@media (max-width: 730px) {
  .container .cover {
    display: none;
  }
  .form-content .login-form,
  .form-content .signup-form {
    width: 100%;
  }
  .form-content .signup-form {
    display: none;
  }
  .container #flip:checked ~ .forms .signup-form {
    display: block;
  }
  .container #flip:checked ~ .forms .login-form {
    display: none;
  }
}

3. Making the Form Responsive

To make sure the form works on all screen sizes, you’ll need to use CSS media queries. This ensures that the form adjusts its layout when viewed on smaller devices like phones and tablets.

Here’s an example:

@media (max-width: 730px) {
  .container .cover {
    display: none;
  }
.form-content .login-form,
  .form-content .signup-form {
    width: 100%;
  }
.form-content .signup-form {
    display: none;
  }
.container #flip:checked ~ .forms .signup-form {
    display: block;
  }
.container #flip:checked ~ .forms .login-form {
    display: none;
  }
}

This media query adjusts the width of the form for mobile devices and ensures the form is easy to interact with on smaller screens.

Best Practices for Optimizing Your Form for SEO

To ensure your Responsive Login and Registration Form performs well on search engines and offers a smooth user experience, follow these best practices:

Fast Loading Speed: Keep your HTML and CSS code clean and efficient to minimize loading times, which is crucial for SEO.
Keyword Optimization: Include relevant keywords like “Responsive Login and Registration Form,” “HTML and CSS,” and “UI Design” throughout your content for better search engine ranking.
Semantic HTML: Use meaningful HTML tags like <h2>, <h3>, <form>, and <label> to structure your content in a way that is easy for search engines to understand.
Alt Text for Images: If you include any images in your form, use alt text to describe them. This improves accessibility and helps search engines interpret the content.
Mobile Responsiveness: Ensure your form is fully responsive by testing it on various devices and screen sizes. A mobile-friendly design improves SEO and user experience.

Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit NameChkr to find out!
Read Also

Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.

Download the Source Code for Responsive Login and Registration Form

Ready to add this form to your website? You can download the complete source code for the Responsive Login and Registration Form by clicking the button below. Customize it for your project, and enjoy the simplicity of HTML and CSS to create a user-friendly interface.

HTML and CSS
1
0
12 min read

Flipping Card UI Design in HTML & CSS | Download Source Code

Are you ready to create a Flipping Card UI Design in HTML & CSS? This tutorial will guide you to build a sleek, modern flipping card animation using only HTML and CSS. Whether you’re a beginner or an experienced developer looking to add flair to your web designs, mastering this effect will enhance your skillset and make your projects stand out.

By the end of this guide, you’ll not only understand how to create a Flipping Card UI Design, but you’ll also be able to download the source code and customize it for your use. Let’s get started!

Introduction to Flipping Card UI Design

A Flipping Card UI Design adds interactive and visually appealing elements to your website. It’s a design feature where the card “flips” when hovered over, revealing more information on the other side. This technique is widely used in modern web design, especially for displaying product information, portfolio items, or cards containing key details concisely.

By learning to create a Flipping Card UI Design using HTML & CSS, you can add unique interactivity to your web projects without relying on JavaScript, ensuring faster load times and smoother performance.

Why Use HTML & CSS for Flipping Card UI?

Using HTML & CSS for your Flipping Card UI offers several benefits:

Ease of Use: HTML and CSS are straightforward, making it easy to create interactive designs without complex code.
No JavaScript Required: You can achieve smooth animations using just CSS, which keeps your design lightweight and SEO-friendly.
Responsive Design: CSS allows you to make the design responsive, ensuring that your flipping cards work perfectly on mobile devices and different screen sizes.
Improved Load Speed: By sticking to HTML & CSS, you minimize the need for heavy libraries, which leads to faster load times—a key factor for SEO.

Incorporating Flipping Card UI Design not only improves the user experience but also enhances the visual appeal of your site, keeping visitors engaged.

How to Create a Flipping Card UI Design: Step-by-Step Guide

1. Setting Up HTML Structure

The foundation of your Flipping Card UI Design lies in the HTML structure. Start by setting up the basic layout for the card and its content. Here’s how you can create the skeleton of your flipping card.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flipping Card UI Design</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <section>
    <div class="container">
      <div class="card front-face">
        <header>
          <span class="logo">
            <img src="images/logo.png" alt="" />
            <h5>Master Card</h5>
          </span>
          <img src="images/chip.png" alt="" class="chip" />
        </header>
        <div class="card-details">
          <div class="name-number">
            <h6>Card Number</h6>
            <h5 class="number">5050 4040 3030 2020</h5>
            <h5 class="name">Abhikesh Kumar</h5>
          </div>
          <div class="valid-date">
            <h6>Valid Thru</h6>
            <h5>00/30</h5>
          </div>
        </div>
      </div>
      <div class="card back-face">
        <h6>
          For customer service call +977 1111 3433 or email at
          [email protected]
        </h6>
        <span class="magnetic-strip"></span>
        <div class="signature"><i>001</i></div>
        <h5>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia
          maiores sed doloremque nesciunt neque beatae voluptatibus doloribus.
          Libero et quis magni magnam nihil temporibus? Facere consectetur
          dolore reiciendis et veniam.
        </h5>
      </div>
    </div>
  </section>
</body>
</html>

In this HTML code:

Card-container: Contains the card and manages the overall layout.
Front and back classes represent the two sides of the flipping card.

Make sure to structure your HTML with semantic tags for better SEO and accessibility. Using elements like <header>, <section>, and <article> can improve how search engines interpret your content.

2. Styling with CSS

Now that the structure is in place, let’s style the Flipping Card with CSS. The CSS will control the size, color, and the actual flipping animation.

Create a style.css file and add the following code:


/* Import Google Font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: #121321;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  perspective: 1000px;
}
section::before {
  content: "";
  position: absolute;
  height: 240px;
  width: 240px;
  border-radius: 50%;
  transform: translate(-150px, -100px);
  background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
section::after {
  content: "";
  position: absolute;
  height: 240px;
  width: 240px;
  border-radius: 50%;
  transform: translate(150px, 100px);
  background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
.container {
  position: relative;
  height: 225px;
  width: 375px;
  z-index: 100;
  transition: 0.6s;
  transform-style: preserve-3d;
}
.container:hover {
  transform: rotateY(180deg);
}
.container .card {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 25px;
  border-radius: 25px;
  backdrop-filter: blur(25px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backface-visibility: hidden; /* Ensure backface-visibility is set */
  transform-style: preserve-3d;
}
.front-face {
  backface-visibility: hidden;
}
.front-face header,
.front-face .logo {
  display: flex;
  align-items: center;
}
.front-face header {
  justify-content: space-between;
}
.front-face .logo img {
  width: 48px;
  margin-right: 10px;
}
h5 {
  font-size: 16px;
  font-weight: 400;
}
.front-face .chip {
  width: 50px;
}
.front-face .card-details {
  display: flex;
  margin-top: 40px;
  align-items: flex-end;
  justify-content: space-between;
}
h6 {
  font-size: 10px;
  font-weight: 400;
}
h5.number {
  font-size: 18px;
  letter-spacing: 1px;
}
h5.name {
  margin-top: 20px;
}
.card.back-face {
  border: none;
  padding: 15px 25px 25px 25px;
  transform: rotateY(180deg);
  backface-visibility: hidden; /* Ensure backface-visibility is set */
}
.card.back-face h6 {
  font-size: 8px;
}
.card.back-face .magnetic-strip {
  position: absolute;
  top: 40px;
  left: 0;
  height: 45px;
  width: 100%;
  background: #000;
}
.card.back-face .signature {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 80px;
  height: 40px;
  width: 85%;
  border-radius: 6px;
  background: repeating-linear-gradient(#fff,
      #fff 3px,
      #efefef 0px,
      #efefef 9px);
}
.signature i {
  color: #000;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  background-color: #fff;
  margin-right: -30px;
  z-index: -1;
}
.card.back-face h5 {
  font-size: 8px;
  margin-top: 15px;
}

In this CSS code:

Perspective adds the 3D effect needed for the card flip.
Transform and transition properties enable the smooth flip animation.
Backface visibility hides the content of the back until the flip occurs.

This CSS will make your Flipping Card UI Design functional, responsive, and engaging for users.

Best Practices for Flipping Card UI
When creating a Flipping Card UI, follow these best practices to ensure it’s optimized for both SEO and user experience:

Responsive Design: Make sure your card is mobile-friendly by using media queries to adjust the layout on smaller screens. Here’s an example of a responsive media query:

@media (max-width: 600px) {
  .card.back-face h5 {
  font-size: 6px;
  margin-top: 15px;
 }
}

Optimize for Speed: Keep the CSS simple and clean to reduce the load time of your page. Quick loading speeds play a crucial role in improving your website’s SEO performance.
Alt Text for Accessibility: Include alt text for any images or visual elements within your card. This ensures that users with disabilities, and search engines, can interpret the content correctly.
Semantic HTML: Use proper heading tags (<h2>, <h3>, etc.) and organize your content logically. This improves SEO by helping search engines understand the structure of your webpage.
Keyword Optimization: Use trending keywords related to UI Design, HTML, CSS animations, and responsive web design to attract organic traffic.

Following these practices will make your Flipping Card UI Design not only look great but also perform well on search engines and across all devices.

Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit NameChkr to find out!
Read Also

Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.

Download the Flipping Card Source Code
Ready to experiment with the code? You can download the full source code for the Flipping Card UI Design by clicking the button below. This gives you a head start to customize and use it in your projects.

HTML and CSS
1
0
10 min read

How to Create a Simple Website in HTML & CSS | With Source Code

Creating a Simple Website in HTML & CSS is one of the best ways to start your web development journey. Whether you’re a beginner or looking to sharpen your skills, building a simple website using these core technologies is a must. In this tutorial, we’ll walk through the entire process step-by-step, and by the end, you’ll have a complete website and you can even download the source code to practice and improve further. So, let’s get started creating your first simple website in HTML & CSS.

What is a Simple Website in HTML & CSS?

A Simple Website in HTML & CSS refers to a basic web page design built using two primary web development languages: HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). These websites usually contain key components like headers, footers, buttons, and text.

HTML provides the structure or skeleton of the website, while CSS adds the style, such as colors, fonts, and layout designs. Even with this simplicity, you can still create an aesthetically pleasing and fully functional website that loads quickly and delivers a smooth user experience.

Why Use HTML & CSS for Simple Websites?

HTML and CSS serve as the foundation for all websites, providing the essential structure and style that power the web. If you’re new to web development, starting with a Simple Website in HTML & CSS helps you:

Understand the fundamentals of front-end web development.
Build clean, efficient, and responsive designs.
Gain confidence by working with easy-to-learn and intuitive technologies.

Creating a simple website not only teaches the basics but also offers hands-on experience that can be applied to more complex projects later.

Step-by-Step Guide: How to Create a Simple Website in HTML & CSS

1. Setting Up HTML Structure

Start by setting up the HTML structure of your website. The basic structure includes the head and body tags, which contain essential elements like the title, meta information, and the content displayed on the page.

Below is an example of what your index.html file should look like:


<!DOCTYPE html>
<!---Coding By Abhikesh!--->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simple Website Design</title>
  <!---Custom Css File!--->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <nav>
      <div class="logo">
        <a href="#">Your<span>Logo</span></a>
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="buttons">
        <a href="#" class="login">Log in</a>
        <a href="#" class="btn">Register</a>
      </div>
    </nav>
    <div class="content">
      <h2>Hello,<br>I'am <span>Coder</span></h2>
      <p>I'm A Web Developer & Designer. I Will Make Your Project Beautiful And Attractive</p>
    </div>
    <div class="link">
      <a href="#" class="hire">Hire Me</a>
    </div>
  </div>
</body>
</html>

2. Styling Your Website with CSS

Next, let’s add styling to our website using CSS. Create a style.css file that will give your website a polished look. Here’s an example:


@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Karla', sans-serif;
}
body{
  color: #fff;
}
.container{
  width: 100%;
  height: 100vh;
  background-image: url(back.jpg);
  background-position: center;
  background-size: cover;
  padding-top: 35px;
  padding-left: 8%;
  padding-right: 8%;
}
nav{
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo a{
  font-size: 40px;
  text-decoration: none;
}
span{
  color: #f9004d;
}
nav ul li{
  display: inline-block;
  list-style: none;
  margin: 10px 15px;
}
nav ul li a{
  text-decoration: none;
  transition: 0.5s;
}
nav ul li a:hover{
  color: #f9004d;
}
.login{
  text-decoration: none;
  margin-right: 15px;
  font-size: 18px;
}
.btn{
  background: #000;
  border-radius: 6px;
  padding: 9px 25px;
  text-decoration: none;
  transition: 0.5s;
  font-size: 18px;
}
.content{
  margin-top: 10%;
  max-width: 600px;
}
.content h2{
  font-size: 60px
}
.content p{
  margin-top: 10px;
  line-height: 25px;
}
a{
  color: #fff;
}
.link {
  margin-top: 30px;
}
.hire{
  color: #000;
  text-decoration: none;
  background: #fff;
  padding: 9px 25px;
  font-weight: bold;
  border-radius: 6px;
  transition: 0.5s;
}
.link .hire:hover{
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}

This CSS stylesheet will style your website by giving it a responsive layout, clean typography, and visually appealing colors. The header section stands out, while the body text is easy to read.

Best Practices for a Simple Website

When creating a Simple Website in HTML & CSS, keep the following best practices in mind:

Use Semantic HTML Tags: These help search engines understand your website structure and improve SEO. Use tags like <header>, <main>, <section>, and <footer>.
Optimize for SEO: Include relevant keywords in your meta descriptions, headings, and throughout your content. For example, in this guide, the focus keyword is “Simple Website in HTML & CSS.”
Mobile-First Design: Ensure your website is responsive and looks good on all screen sizes, especially mobile devices. You can use media queries to adjust your layout for smaller screens.
Fast Load Times: Keep your code clean and avoid unnecessary elements. Optimize images and minimize CSS and JS files.
Accessibility: Make your website accessible to everyone, including people with disabilities, by using proper contrast, alt tags, and keyboard navigation.

Sample Media Query for Responsiveness

To make your website responsive, you can add a media query in your CSS:


@media (max-width: 600px) {
  .btn{
    background: red;
    border-radius: 6px;
    padding: 9px 25px;
    text-decoration: none;
    transition: 0.5s;
    font-size: 18px;
  }
}

This makes the navigation links stack vertically on smaller screens, ensuring your site looks great on mobile devices.

Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit NameChkr to find out!
Read Also

Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.

How to Download the Source Code
If you’re ready to experiment with the code and create your own Simple Website in HTML & CSS, you can download the entire source code. Click the button below to get started!

HTML and CSS
1
0
9 min read

Create a Stylish Profile Card in HTML & CSS

Are you ready to give your website a fresh and modern touch? In this guide, you will learn how to create a Stylish Profile Card in HTML and CSS. Profile cards are a fantastic way to display user information such as name, role, followers, posts, and contact options. This tutorial will walk you through designing a sleek profile card perfect for portfolios, personal websites, or social media profiles.

What is a Stylish Profile Card?

A Stylish Profile Card in HTML is not just a design element; it’s a compact and visually appealing way to present user information. Typically, these cards showcase a user’s image, name, profession, and relevant metrics like followers, posts, and following counts. By combining HTML for structure and CSS for design, we can craft a professional profile card that enhances user experience and engages visitors.

How to Create a Stylish Profile Card in HTML

Let’s dive into the steps of building your own Stylish Profile Card:

Step 1: HTML Structure

First, let’s set up the basic structure using HTML. We’ll define a section for the profile card and include an image, user name, user profession, and interactive buttons like “Message” and “Follow.”


<!DOCTYPE html>
<!---Coding By abhikesh--->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Profle Card UI Design | abhikesh </title>
  <!---Custom Css File!--->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="main">
  <div class="profile-card">
    <div class="image">
      <img src="images/profile.jpg" alt="" class="profile-pic">
    </div>
    <div class="data">
      <h2>Olivia Gomez</h2>
      <span>Developer & Designer</span>
    </div>
    <div class="row">
      <div class="info">
        <h3>Following</h3>
        <span>120</span>
      </div>
      <div class="info">
        <h3>Followers</h3>
        <span>5000</span>
      </div>
      <div class="info">
        <h3>Posts</h3>
        <span>209</span>
      </div>
    </div>
    <div class="buttons">
      <a href="#" class="btn">Message</a>
      <a href="#" class="btn">Follow Me</a>
    </div>
  </div>
</section>
</body>
</html>

Step 2: Adding the Image

The image section features the user’s profile picture, making it the focal point of your Stylish Profile Card. In this example, the image is circular with a soft shadow effect, giving it a polished and professional look.

Step 3: CSS Styling

Now, let’s add some flair to our profile card using CSS. This is where the magic happens! CSS enhances the card with shadows, hover effects, and stylish buttons, ensuring the card is centrally aligned and visually appealing.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.main{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(images/back.jpg);
  background-position: center;
  background-size: cover;
}
.profile-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  width: 100%;
  border-radius: 25px;
  padding: 30px;
  border: 1px solid #ffffff40;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.image{
  position: relative;
  height: 150px;
  width: 150px;
}
.image .profile-pic{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.data{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
}
.data h2{
  font-size: 33px;
  font-weight: 600;
}
span{
  font-size: 18px;
}
.row{
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.row .info{
  text-align: center;
  padding: 0 20px;
}
.buttons{
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.buttons .btn{
  color: #fff;
  text-decoration: none;
  margin: 0 20px;
  padding: 8px 25px;
  border-radius: 25px;
  font-size: 18px;
  white-space: nowrap;
  background: linear-gradient(to left, #33ccff 0%, #ff99cc 100%);
}
.buttons .btn:hover{
  box-shadow: inset 0 5px 20px rgba(0,0,0,0.4);
}

Key Elements of a Stylish Profile Card in HTML

Profile Image: The user’s image is the focal point of any Stylish Profile Card. CSS is used to make it circular and add shadows for a polished look.
User Information: Display the user’s name and profession prominently. This gives immediate context to who the person is.
Metrics Section: Following, followers, and posts data is displayed in a neat row for quick user insights.
Buttons: The “Message” and “Follow” buttons invite interaction, making the card functional and aesthetic.

Benefits of Using a Stylish Profile Card in HTML

Visual Appeal: A well-designed profile card improves the overall visual experience on a website or app.
User Interaction: By adding buttons for messaging and following, the profile card encourages user interaction.
Responsive Design: This Stylish Profile Card is fully responsive, ensuring it looks great on both desktop and mobile devices.

Improving User Engagement with a Stylish Profile Card

User engagement can be significantly improved by integrating Stylish Profile Cards into your website. The combination of attractive visuals and useful user information encourages visitors to connect and explore more about the individual featured.

Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit NameChkr to find out!
Read Also

Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.

Conclusion
Creating a Stylish Profile Card in HTML and CSS is a fantastic way to enhance the user interface of any website. The balance of aesthetic appeal and functionality makes these cards ideal for personal portfolios, social media platforms, and business profiles. Follow the steps outlined here to create your own custom Stylish Profile Card and elevate your web design game!

For further customization, feel free to download the source code below and start tweaking it to suit your needs!

Download Source Code

Click the button below to download the full source code for the Input Label Animation project:

HTML and CSS
1
0
12 min read

Master Input Label Animations in HTML & CSS

If you’ve ever filled out a form online, you’ve likely noticed the modern, sleek look of Input Label Animations—floating labels that animate when you click inside a text field. This small design feature not only enhances the look of your form but also improves user experience by making it clear which field is currently active.

In this guide, we’ll show you how to create Input Label Animations using HTML and CSS from scratch. We’ll cover everything from the basic structure of the form to the CSS styling that makes the label float when the input is focused. By the end of this article, you’ll have a fully functional, aesthetically pleasing form that can be easily integrated into any website.

Let’s dive right in!

What is Input Label Animation?

Input Label Animations, often called floating label animations, are a popular UI design pattern where the label, usually placed inside the input field, “floats” or moves above the input box when the user interacts with the field. This method is not only visually appealing but also more efficient in terms of space. The input label transitions from being inside the field to hovering above it, providing a clear distinction between inactive and active input fields.

Floating labels are commonly used in modern web forms, helping maintain a clean, minimalist design. Moreover, this animation improves usability by clearly indicating where the user is supposed to input data.

Benefits of Floating Label Animation

Why should you consider implementing input label animation in your forms? Here are a few benefits:

1. Enhanced User Experience

Floating labels offer a more interactive and dynamic experience for users, helping them navigate through forms with ease. It gives visual cues to the user about the input they are currently filling out, which is particularly helpful on forms with multiple fields.

2. Space-Saving Design

With floating labels, there’s no need to place static labels above input fields, saving precious screen real estate. This makes it perfect for mobile-responsive designs where space is limited.

3. Improved Readability

Since the label floats above the input field when the user begins typing, there’s no confusion about what information needs to be entered in each field. This design also makes the form appear cleaner and more intuitive.

4. Modern Aesthetic

Incorporating animations in web forms adds a polished, professional look to the design. It makes your website feel more up-to-date, which can enhance user trust and overall brand perception.

Creating the Basic HTML Structure

Before we get to the fun part of styling the animation, we need to set up a simple HTML structure. Follow these steps:

Step 1: Create an HTML File

First, create a file named index.html. This file will contain the basic HTML structure for your form.


<!DOCTYPE html>
<!---Coding By abhikesh | www.abhikesh.com--->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Input Label Animaton | CoderGirl</title>
  <!---Custom CSS File--->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="input-field">
    <inputtype="text"requiredspellcheck="false">
    <label>Enter email</label>
  </div>
</body>
</html>

In this structure, we have two input fields: one for the name and one for the email. Each field is wrapped in a div with the class input group for easier styling and alignment.

CSS Styling for Input Label Animation

Now that we have our HTML structure, let’s add some CSS to bring the animation to life. This will be done in a file named style.css.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #060b23;
}
.input-field{
  position: relative;
}
.input-field input{
   width: 350px;
  height: 60px;
  border-radius: 6px;
  font-size: 18px;
  padding: 0 15px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  outline: none;
}
.input-field label{
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 19px;
  pointer-events: none;
  transition: 0.3s;
}
input:focus{
  border: 2px solid #18ffff;
}
input:focus ~ label,
input:valid ~ label{
  top: 0;
  left: 15px;
  font-size: 16px;
  padding: 0 2px;
  background: #060b23;
}

Step 2: Create a CSS File

Create a file named style.css and add the following CSS code:

Explanation of the CSS

Form Styling: The form is centered both vertically and horizontally using Flexbox.
Input Field Styling: Each input field has a basic border and padding, and when focused, the border color changes to blue (#007BFF).
Label Animation: The label starts inside the input field, aligned vertically to the middle. When the user clicks inside the field or starts typing, the label moves to the top of the input box and shrinks in size.

Understanding the Animation Process

When a user interacts with the input field, CSS transitions are used to smoothly move the label from inside the input field to above it. This movement gives a clear indication of where the label goes as the user focuses on the input field, enhancing the overall user experience.

The transition is primarily controlled by the transform, top, and font-size properties of the label. Additionally, the color of the border changes when the input is focused, which provides a visual cue to users.

The key to this input label animation lies in the following lines of CSS:

input:focus ~ label,
input:valid ~ label {
top: 0;
left: 15px;
font-size: 16px;
padding: 0 2px;
background: #060b23;
}

This code tells the browser to move the label upwards when the input field is focused or when valid input is detected. The label floats above the input, stays in this position while the user is typing, and returns to its original position if the input field is cleared. The border color also changes on focus, providing a responsive and elegant experience for the user.

This ensures a clean and dynamic interaction between the user and the form, making the label behavior intuitive and visually appealing.

Additional Customization Options

If you want to further enhance the look and feel of your form, you can try the following:

Custom Fonts: Experiment with different Google Fonts to give your form a unique look.
Theme Colors: Change the border color and label colors to match your website’s theme.
Input Validation: Add some JavaScript to validate user input in real-time, providing feedback when a field is incorrectly filled.

Tips for Optimizing Input Label Animation

To ensure that your floating label animations look great and perform well across all devices, follow these best practices:

Mobile Responsiveness: Always test your forms on different screen sizes to ensure the labels and input fields scale properly on mobile devices.
Accessibility: Make sure that your forms are accessible by adding proper aria-label tags and ensuring that the animations are easy to understand for screen reader users.
Performance: Use lightweight CSS animations to avoid impacting your website’s load time. Avoid using too many CSS animations in one page, as this can slow down the user experience.

Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit NameChkr to find out!
Read Also

Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.

Conclusion

You’ve now learned how to create a sleek and user-friendly Input Label Animation using HTML and CSS. By integrating this feature into your forms, you’ll enhance both the functionality and aesthetic appeal of your website, making it more engaging for users.

Input label animations are a small but impactful UI/UX feature that can make your forms look modern and professional. Experiment with different styles, colors, and fonts to find the perfect fit for your website.

For further customization, feel free to download the source code below and start tweaking it to suit your needs!

Download Source Code

Click the button below to download the full source code for the Input Label Animation project:

HTML and CSS Javascript
1
0
11 min read

Create a Customizable Toast Notification Using HTML, CSS, and JavaScript

Introduction to Toast Notifications

Toast notifications are those small, friendly alerts that pop up on your screen to give you feedback or updates about what’s happening. They’re commonly used in web applications to keep users informed without interrupting the workflow. I am sharing this guide to show you how to create a customizable toast notification using HTML, CSS, and JavaScript.

Why Use Toast Notifications?

Toast notifications are essential for providing feedback and enhancing user interactions. Here are several reasons to incorporate them into your web applications:

User Engagement: Notifications can inform users about important actions like successful form submissions or errors, keeping them engaged with the application.
Real-time Feedback: They provide immediate feedback without requiring page refreshes, which is crucial for improving user experience.
Customizable: Developers can easily customize the appearance and behavior of toast notifications to align with the application’s design.

Understanding the Structure of Toast Notifications

A typical toast notification consists of:

A message that informs the user about an action’s success, failure, or warning.
An optional close button to dismiss the notification.
A progress indicator to show the notification duration.

Setting Up Your Project

Before diving into coding, let’s set up a project folder that will contain all necessary files. Follow these steps:

Create a Project Folder: Name your folder something like toast-notification.
Create Essential Files:

index.html: This file will contain the main HTML structure.
style.css: This file will manage the styling of the toast notifications.
script.js: This file will handle the functionality of the toast notifications.

Creating the HTML Layout

In your index.html file, add the following code to establish the basic layout for your toast notification:


<!DOCTYPE html>
<!-- Coding By Abhikesh - www.abhikesh.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Toast Notification | abhikesh</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Font Awesome CDN link for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <ul class="notifications"></ul>
    <div class="buttons">
      <button class="btn" id="success">Success</button>
      <button class="btn" id="error">Error</button>
      <button class="btn" id="warning">Warning</button>
      <button class="btn" id="info">Info</button>
    </div>
  </body>
</html>

Styling the Toast Notification

Next, open your style.css file and add the following CSS code to style the toast notifications and the buttons:


/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
:root {
  --dark: #34495E;
  --light: #ffffff;
  --success: #0ABF30;
  --error: #E24D4C;
  --warning: #E9BD0C;
  --info: #3498DB;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--dark);
}
.notifications {
  position: fixed;
  top: 30px;
  right: 20px;
}
.notifications :where(.toast, .column) {
  display: flex;
  align-items: center;
}
.notifications .toast {
  width: 400px;
  position: relative;
  overflow: hidden;
  list-style: none;
  border-radius: 4px;
  padding: 16px 17px;
  margin-bottom: 10px;
  background: var(--light);
  justify-content: space-between;
  animation: show_toast 0.3s ease forwards;
}
@keyframes show_toast {
  0% {
    transform: translateX(100%);
  }
  40% {
    transform: translateX(-5%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-10px);
  }
}
.notifications .toast.hide {
  animation: hide_toast 0.3s ease forwards;
}
@keyframes hide_toast {
  0% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(calc(100% + 20px));
  }
}
.toast::before {
  position: absolute;
  content: "";
  height: 3px;
  width: 100%;
  bottom: 0px;
  left: 0px;
  animation: progress 5s linear forwards;
}
@keyframes progress {
  100% {
    width: 0%;
  }
}
.toast.success::before, .btn#success {
  background: var(--success);
}
.toast.error::before, .btn#error {
  background: var(--error);
}
.toast.warning::before, .btn#warning {
  background: var(--warning);
}
.toast.info::before, .btn#info {
  background: var(--info);
}
.toast .column i {
  font-size: 1.75rem;
}
.toast.success .column i {
  color: var(--success);
}
.toast.error .column i {
  color: var(--error);
}
.toast.warning .column i {
  color: var(--warning);
}
.toast.info .column i {
  color: var(--info);
}
.toast .column span {
  font-size: 1.07rem;
  margin-left: 12px;
}
.toast i:last-child {
  color: #aeb0d7;
  cursor: pointer;
}
.toast i:last-child:hover {
  color: var(--dark);
}
.buttons .btn {
  border: none;
  outline: none;
  cursor: pointer;
  margin: 0 5px;
  color: var(--light);
  font-size: 1.2rem;
  padding: 10px 20px;
  border-radius: 4px;
}
@media screen and (max-width: 530px) {
  .notifications {
    width: 95%;
  }
  .notifications .toast {
    width: 100%;
    font-size: 1rem;
    margin-left: 20px;
  }
  .buttons .btn {
    margin: 0 1px;
    font-size: 1.1rem;
    padding: 8px 15px;
  }
}

Customizing Toast Styles

You can create different styles for success, error, warning, and info notifications by adding specific classes. Here’s an example of how to define the different classes in your CSS, as shown above.

Implementing JavaScript Functionality

In your script.js file, implement the functionality to display toast notifications. Add the following code:


const notifications = document.querySelector(".notifications"),
buttons = document.querySelectorAll(".buttons .btn");
const toastDetails = {
    timer: 5000,
    success: {
        icon: 'fa-circle-check',
        text: 'Success: This is a success toast.',
    },
    error: {
        icon: 'fa-circle-xmark',
        text: 'Error: This is an error toast.',
    },
    warning: {
        icon: 'fa-triangle-exclamation',
        text: 'Warning: This is a warning toast.',
    },
    info: {
        icon: 'fa-circle-info',
        text: 'Info: This is an information toast.',
    }
}
const removeToast = (toast) => {
    toast.classList.add("hide");
    if(toast.timeoutId) clearTimeout(toast.timeoutId); // Clearing the timeout for the toast
    setTimeout(() => toast.remove(), 500); // Removing the toast after 500ms
}
const createToast = (id) => {
    // Getting the icon and text for the toast based on the id passed
    const { icon, text } = toastDetails[id];
    const toast = document.createElement("li"); // Creating a new 'li' element for the toast
    toast.className = `toast ${id}`; // Setting the classes for the toast
    // Setting the inner HTML for the toast
    toast.innerHTML = `<div class="column">
                         <i class="fa-solid ${icon}"></i>
                         <span>${text}</span>
                      </div>
                      <i class="fa-solid fa-xmark" onclick="removeToast(this.parentElement)"></i>`;
    notifications.appendChild(toast); // Append the toast to the notification ul
    // Setting a timeout to remove the toast after the specified duration
    toast.timeoutId = setTimeout(() => removeToast(toast), toastDetails.timer);
}
// Adding a click event listener to each button to create a toast when clicked
buttons.forEach(btn => {
    btn.addEventListener("click", () => createToast(btn.id));
});

How the JavaScript Works

Function: The showToast function creates a new toast element based on the type passed to it (success, error, warning, info).
Auto-Dismiss: Each toast automatically fades out after five seconds but can also be dismissed manually by clicking the close button.

Testing Your Toast Notification

After setting up your HTML, CSS, and JavaScript files, open index.html in your web browser to test the functionality. Click the buttons to see the toast notifications appear, and observe how they behave according to the specified styles.

Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit NameChkr to find out!

Read Also

Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.

Conclusion

Congratulations! You have successfully created a customizable toast notification system using HTML, CSS, and JavaScript. This implementation not only enhances user interaction but also improves overall usability within your web application.

Feel free to further customize the design and functionality to match your specific needs, making your notifications more engaging for users.

Download Source Code

To get started with your toast notification system, download the source code by clicking the button below:

HTML and CSS
1
0
12 min read

How to Build a Responsive Dropdown Menu with HTML & CSS

In the world of web development, having a Responsive Dropdown Menu is essential to ensure smooth and efficient navigation for users. Whether you’re building a personal blog, an eCommerce site, or a corporate webpage, a dropdown menu allows you to organize content effectively, offering a cleaner and more professional user experience. In this guide, you’ll learn how to create a Responsive Dropdown Menu Bar using HTML and CSS. By following this simple tutorial, you can add a mobile-friendly, visually appealing navigation bar that works across all devices.

Why Choose a Responsive Dropdown Menu?

A Responsive Dropdown Menu is a critical element for modern websites. It not only makes the site look organized but also improves usability. With the increasing number of users accessing websites from mobile devices, it’s more important than ever to ensure that your site navigation adapts seamlessly across all screen sizes. Dropdown menus are a great way to present a large number of links in a compact space.

Whether you’re designing for a desktop, tablet, or smartphone, your visitors will appreciate a mobile-optimized dropdown menu that is easy to use and helps them navigate your site effortlessly.

How to Create a Responsive Dropdown Menu

Now, let’s break down how you can build a fully responsive dropdown menu. This guide will help you create a dropdown that adapts to both desktop and mobile users, enhancing user interaction on every platform.

Setting Up the HTML Structure

The HTML structure is simple but forms the foundation of your dropdown menu. You’ll create a navigation bar with several links, and one of them will contain a submenu that will act as the dropdown.


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Responsive Drop-down Menu Bar</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <link rel="stylesheet" href="file:///E:/fontawesome/css/all.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="file:///E:/jquery.js"></script>
  </head>
  <body>
    <nav>
      <div class="logo">Abhikesh</div>
      <label for="btn" class="icon">
        <span class="fa fa-bars"></span>
      </label>
      <input type="checkbox" id="btn">
      <ul>
        <li><a href="#">Home</a></li>
        <li>
          <label for="btn-1" class="show">Features +</label>
          <a href="#">Features</a>
          <input type="checkbox" id="btn-1">
          <ul>
            <li><a href="#">Pages</a></li>
            <li><a href="#">Elements</a></li>
            <li><a href="#">Icons</a></li>
          </ul>
        </li>
        <li>
          <label for="btn-2" class="show">Services +</label>
          <a href="#">Services</a>
          <input type="checkbox" id="btn-2">
          <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">App Design</a></li>
            <li>
              <label for="btn-3" class="show">More +</label>
              <a href="#">More <span class="fa fa-plus"></span></a>
              <input type="checkbox" id="btn-3">
              <ul>
                <li><a href="#">Submenu-1</a></li>
                <li><a href="#">Submenu-2</a></li>
                <li><a href="#">Submenu-3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <div class="content">
      <header>Responsive Drop-down Menu Bar</header>
      <p>HTML and CSS</p>
    </div>
    <script>
      $('.icon').click(function(){
        $('span').toggleClass("cancel");
      });
    </script>
  </body>
</html>

Styling the Dropdown Menu with CSS

The CSS will handle the styling and responsiveness. You will be using CSS media queries to make sure the dropdown adapts to different screen sizes, offering a horizontal layout for desktop users and a vertical, clickable menu for mobile users.


@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  background: #f2f2f2;
}
nav{
  background: #1b1b1b;
}
nav:after{
  content: '';
  clear: both;
  display: table;
}
nav .logo{
  float: left;
  color: white;
  font-size: 27px;
  font-weight: 600;
  line-height: 70px;
  padding-left: 60px;
}
nav ul{
  float: right;
  margin-right: 40px;
  list-style: none;
  position: relative;
}
nav ul li{
  float: left;
  display: inline-block;
  background: #1b1b1b;
  margin: 0 5px;
}
nav ul li a{
  color: white;
  line-height: 70px;
  text-decoration: none;
  font-size: 18px;
  padding: 8px 15px;
}
nav ul li a:hover{
  color: #D40643;
  border-radius: 5px;
  box-shadow:  0 0 5px #D40643,
               0 0 10px #D40643;
}
nav ul ul li a:hover{
  box-shadow: none;
}
nav ul ul{
  position: absolute;
  top: 90px;
  border-top: 3px solid #D40643;
  opacity: 0;
  visibility: hidden;
  transition: top .3s;
}
nav ul ul ul{
  border-top: none;
}
nav ul li:hover > ul{
  top: 70px;
  opacity: 1;
  visibility: visible;
}
nav ul ul li{
  position: relative;
  margin: 0px;
  width: 150px;
  float: none;
  display: list-item;
  border-bottom: 1px solid rgba(0,0,0,0.3);
}
nav ul ul li a{
  line-height: 50px;
}
nav ul ul ul li{
  position: relative;
  top: -60px;
  left: 150px;
}
.show,.icon,input{
  display: none;
}
.fa-plus{
  font-size: 15px;
  margin-left: 40px;
}
@media all and (max-width: 968px) {
  nav ul{
    margin-right: 0px;
    float: left;
  }
  nav .logo{
    padding-left: 30px;
    width: 100%;
  }
  .show + a, ul{
    display: none;
  }
  nav ul li,nav ul ul li{
    display: block;
    width: 100%;
  }
  nav ul li a:hover{
    box-shadow: none;
  }
  .show{
    display: block;
    color: white;
    font-size: 18px;
    padding: 0 20px;
    line-height: 70px;
    cursor: pointer;
  }
  .show:hover{
    color: #D40643;
  }
  .icon{
    display: block;
    color: white;
    position: absolute;
    top: 0;
    right: 40px;
    line-height: 70px;
    cursor: pointer;
    font-size: 25px;
  }
  nav ul ul{
    top: 70px;
    border-top: 0px;
    float: none;
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  nav ul ul a{
    padding-left: 40px;
  }
  nav ul ul ul a{
    padding-left: 80px;
  }
  nav ul ul ul li{
    position: static;
  }
  [id^=btn]:checked + ul{
    display: block;
  }
  nav ul ul li{
    border-bottom: 0px;
  }
  span.cancel:before{
    content: '\f00d';
  }
}
.content{
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}
header{
  font-size: 35px;
  font-weight: 600;
  padding: 10px 0;
}
p{
  font-size: 30px;
  font-weight: 500;
}

Best Practices for a Responsive Dropdown Menu

Keep it Simple: A clean and simple dropdown menu enhances user experience and reduces confusion.
Optimize for Mobile: Ensure that the dropdown menu works smoothly on mobile devices, where most users now interact with websites.
SEO-Friendly: Use semantic HTML tags, and descriptive text for links, and make sure the dropdown menu is easily crawlable by search engines like Google.
Performance: Minimize the use of JavaScript and heavy libraries. Rely on HTML and CSS for lightweight, fast-loading navigation.

Enhancing User Experience

Responsive dropdown menus provide a more intuitive and organized user experience. They can help reduce clutter and offer visitors a structured way to access different sections of your website, no matter the device they’re using.

SEO Tips for Your Dropdown Menu

While dropdown menus help improve user experience, they also need to be SEO-friendly. Make sure your menu links are descriptive and easy to crawl by search engines. Additionally, it’s essential to use ALT text for any images and provide descriptive labels for each menu item.

Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit NameChkr to find out!

Read Also

Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.

Conclusion

By implementing a Responsive Dropdown Menu, you significantly improve both the usability and aesthetic of your website. This feature is particularly beneficial for websites with multiple categories or large amounts of content. Plus, with our HTML and CSS approach, you can build a fully responsive dropdown menu without the need for heavy JavaScript libraries.
Download the Source Code
To get started, feel free to download the source code for this Responsive Dropdown Menu Bar by clicking the button below.

HTML and CSS Javascript
1
0
9 min read

Create a Stunning Double Click Heart Animation for Engaging Web Design

In today’s digital world, reacting to content with likes, hearts, and emojis has become a big part of social media. Whether you’re scrolling through Instagram or watching TikTok, the double-click heart animation is a familiar way to show love for content. This fun feature makes it easy and interesting for users to express their appreciation.

In this tutorial, we’ll show you how to create a stunning Double Click Heart Animation using HTML, CSS, and JavaScript. By the end, you’ll have a working heart animation that pops up when users double-click an image on your webpage. This feature is great for blogs, portfolios, or any web project that wants to encourage more interaction.

Why Add a Heart Animation to Your Website?

Incorporating animations like the heart icon is an excellent way to enhance your website’s interactivity. This feature not only captivates visitors visually but also encourages them to stay on your site longer, providing a fun way to interact with content.

Whether you’re developing a social platform, a personal blog, or an eCommerce site, adding interactive elements can significantly improve the overall user experience. This double-click animation is a straightforward yet effective approach to achieving that.

Steps to Create the Double Click Heart Animation

Let’s dive into creating the heart animation from the ground up. You should have a fundamental grasp of HTML, CSS, and JavaScript. Follow the steps below to ensure the animation functions as intended.

1. Set Up Your Project Folder
To start, create a dedicated folder for your project.

index.html: This file will hold the structure of your HTML code.
style.css: This file will include the styling for your project.
script.js: This file will handle the animation logic using JavaScript.

2. Writing the HTML Code
The first step is to create the structure of your webpage. Here’s the HTML code that you’ll need to paste into your index.html file:


<!DOCTYPE html>
<!-- Coding by Abhikesh || www.abhikesh.com -->
<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" />
    <title>Double Click For Heart</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <i class="fa-solid fa-heart heart"></i>
    </div>
  </body>
</html>

This basic HTML structure includes an image container and a placeholder for the animated heart. You can replace your-image.jpg with any image you’d like to use for the animation.

3. Styling the Animation in CSS
Now, let’s add some style to the animation. Here’s the code you need to paste into your style.css file:


/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7fb;
}
.container {
  position: relative;
  height: 420px;
  width: 320px;
  background-image: url("img.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.heart {
  position: absolute;
  color: red;
  font-size: 40px;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.heart.active {
  animation: animate 0.8s linear forwards;
}
@keyframes animate {
  30% {
    font-size: 80px;
    opacity: 1;
  }
  50% {
    opacity: 1;
    font-size: 60px;
  }
  70% {
    font-size: 70px;
  }
  80% {
    font-size: 60px;
    opacity: 1;
  }
  90% {
    font-size: 60px;
    opacity: 1;
  }
}

This CSS code styles the image container, makes the heart icon invisible by default, and defines a scaling animation that will be triggered when the heart is clicked.

4. Adding Functionality with JavaScript
Now, let’s handle the double-click functionality using JavaScript. Here’s the code you need to paste into your script.js file:


// Select the container and heart elements from the DOM
const container = document.querySelector(".container"),
  heart = document.querySelector(".heart");
// Add a double-click event listener to the container
container.addEventListener("dblclick", (e) => {
  // Calculate the x and y position of the double-click event
  let xValue = e.clientX - e.target.offsetLeft,
    yValue = e.clientY - e.target.offsetTop;
  // Set the position of the heart element using the x and y values
  heart.style.left = `${xValue}px`;
  heart.style.top = `${yValue}px`;
  // Add the active class to the heart element to animate it
  heart.classList.add("active");
  // Remove the active class after 1 second
  setTimeout(() => {
    heart.classList.remove("active");
  }, 1000);
});

This JavaScript code listens for a double-click event on the image container. Once a double-click is detected, the heart icon becomes visible and scales up with a heartbeat animation.

5. Testing Your Animation
Once you’ve written the code, open the index.html file in your browser to see the animation in action. When you double-click the image, the heart animation should appear and then disappear after a short duration.

If the animation doesn’t work as expected, make sure that:

The heart icon is correctly linked in the CSS (background: url(‘heart-icon. png’)).
JavaScript is correctly linked in the HTML.
Benefits of Adding Animations Like Double Click Heart

Interactive elements like this heart animation improve user experience by making your website more engaging. It also increases time spent on your site, which can boost your SEO rankings and help you better connect with your audience.

Animations like these can also encourage users to interact with your content more frequently, leading to higher click-through rates and, potentially, conversions.

Want to Check Username Availability on Social Media?

If you’re looking to check username availability on various social media platforms, visit NameChkr to find out!

Read Also

Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.

Final Thoughts

Creating a Double Click Heart Animation in HTML, CSS, and JavaScript is not only a great way to make your website more interactive but also a simple and fun project for web developers of all skill levels. By following the steps outlined above, you can easily integrate this feature into your website.

If you run into any issues or simply want to skip the manual steps, feel free to download the source code by clicking the button below.

Download Source Code

This project is easy to implement and can be further customized to match your website’s design. We hope this tutorial was useful for you—happy coding!

HTML and CSS
0
0
11 min read

Create a Stunning Basic Login Form Using HTML and CSS

Creating a Basic Login Form is a fundamental skill for any aspiring web developer. If you’ve ever browsed various websites, you’ve likely encountered numerous basic login forms. Have you ever wondered how to design a basic login form using just HTML and CSS? The great news is that it’s entirely possible to build an elegant and functional basic login form using only these two powerful languages.

In this guide, we’ll walk you through the entire process of building a Basic Login Form using HTML and CSS. We’ll begin by establishing the HTML structure, followed by applying CSS styles to enhance its visual appeal. Additionally, we’ll incorporate modern features like Google and Apple login buttons to give it a contemporary touch. Let’s dive right in!

Steps to Build a Basic Login Form Using HTML and CSS

To create your simple login form using only HTML and CSS, follow these straightforward steps:

Step 1: Set Up Your Project

First, create a new folder to house your project files. You can name it anything you like; for example, login-form. Within this folder, create the following files:

index.html: This file will act as the primary HTML document for your project.
style.css: This file will contain all your CSS styling code.
Images Folder: Create an Images folder where you will place logos for Google and Apple, which will be used in the form.

Step 2: Build the HTML Structure

Now, let’s start coding! Open your index.html file and add the necessary HTML markup. This code will lay out the basic structure of your login form using essential HTML elements like <form>, <div>, <label>, and <button>.


<!DOCTYPE html>
<!-- Source Codes By abhikesh - www.abhikesh.com -->
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Login Form in HTML and CSS | Abhikesh Kumar</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="login_form">
    <!-- Login form container -->
    <form action="#">
      <h3>Log in with</h3>
      <div class="login_option">
        <!-- Google button -->
        <div class="option">
          <a href="#">
            <img src="logos/google.png" alt="Google" />
            <span>Google</span>
          </a>
        </div>
        <!-- Apple button -->
        <div class="option">
          <a href="#">
            <img src="logos/apple.png" alt="Apple" />
            <span>Apple</span>
          </a>
        </div>
      </div>
      <!-- Login option separator -->
      <p class="separator">
        <span>or</span>
      </p>
      <!-- Email input box -->
      <div class="input_box">
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="Enter email address" required />
      </div>
      <!-- Paswwrod input box -->
      <div class="input_box">
        <div class="password_title">
          <label for="password">Password</label>
          <a href="#">Forgot Password?</a>
        </div>
        <input type="password" id="password" placeholder="Enter your password" required />
      </div>
       <!-- Login button -->
      <button type="submit">Log In</button>
      <p class="sign_up">Don't have an account? <a href="#">Sign up</a></p>
    </form>
  </div>
</body>
</html>

Step 3: Style Your Form Using CSS

Next, open your style.css file and add the appropriate CSS code to style your login form. This code will help your form look modern and visually appealing. You can customize it further by experimenting with different colors, fonts, and backgrounds to match your style.


/* Google Fonts Link */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* Resetting default styling and setting font-family */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}
body {
    width: 100%;
    min-height: 100vh;
    padding: 0 10px;
    display: flex;
    background: #ff3c00;
    justify-content: center;
    align-items: center;
}
/* Login form styling */
.login_form {
    width: 100%;
    max-width: 435px;
    background: #fff;
    border-radius: 6px;
    padding: 41px 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.login_form h3 {
    font-size: 20px;
    text-align: center;
}
/* Google & Apple button styling */
.login_form .login_option {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.login_form .login_option .option {
    width: calc(100% / 2 - 12px);
}
.login_form .login_option .option a {
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: #F8F8FB;
    border: 1px solid #DADAF2;
    border-radius: 5px;
    margin: 34px 0 24px 0;
    text-decoration: none;
    color: #171645;
    font-weight: 500;
    transition: 0.2s ease;
}
.login_form .login_option .option a:hover {
    background: #ededf5;
    border-color: #ff3c00;
}
.login_form .login_option .option a img {
    max-width: 25px;
}
.login_form p {
    text-align: center;
    font-weight: 500;
}
.login_form .separator {
    position: relative;
    margin-bottom: 24px;
}
/* Login option separator styling */
.login_form .separator span {
    background: #fff;
    z-index: 1;
    padding: 0 10px;
    position: relative;
}
.login_form .separator::after {
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    height: 1px;
    background: #C2C2C2;
    display: block;
}
form .input_box label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
}
/* Input field styling */
form .input_box input {
    width: 100%;
    height: 57px;
    border: 1px solid #DADAF2;
    border-radius: 5px;
    outline: none;
    background: #F8F8FB;
    font-size: 17px;
    padding: 0px 20px;
    margin-bottom: 25px;
    transition: 0.2s ease;
}
form .input_box input:focus {
    border-color: #ff3c00;
}
form .input_box .password_title {
    display: flex;
    justify-content: space-between;
    text-align: center;
}
form .input_box {
    position: relative;
}
a {
    text-decoration: none;
    color: #ff3c00;
    font-weight: 500;
}
a:hover {
    text-decoration: underline;
}
/* Login button styling */
form button {
    width: 100%;
    height: 56px;
    border-radius: 5px;
    border: none;
    outline: none;
    background: #ff3c00;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 28px;
    transition: 0.3s ease;
}
form button:hover {
    background: #ff3c00;
}

Step 4: Test Your Login Form

Once you have added the HTML and CSS code, it’s time to see your work in action! Open index.html in your favorite web browser to view your project. If everything is set up correctly, you should see your stylish login form ready to use.

Want to Check Username Availability on Social Media?

If you’re looking to check username availability on various social media platforms, visit NameChkr to find out!

Read Also

Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.

Conclusion

Creating a Basic Login Form is a fantastic way for beginners to grasp the fundamentals of HTML and CSS while gaining practical experience in designing and styling web forms. By following the steps outlined in this guide, you’ve successfully built your Basic Login Form from scratch.

To further enhance your web development skills, consider exploring other attractive login and registration forms available online. Many of these examples utilize advanced features that can deepen your understanding of user interactions and enhance your projects.

If you encounter any challenges while building your Basic Login Form or wish to save time, feel free to download the source code for this project using the button below.

Feel free to download the complete source code for this project and start building!

HTML and CSS
1
0
11 min read

Responsive Login and Registration Form with HTML and CSS

Building a responsive login and registration form is an essential skill for web developers, as it forms the backbone of user authentication on many websites. This project enhances the user experience and adds critical functionality to web applications. In this tutorial, we’ll guide you through creating a fully responsive login and registration form from scratch using only HTML and CSS. This hands-on project will sharpen your front-end development skills while implementing key features such as user login and sign-up, along with form validation.

Why Create a Login and Registration Form?

Every website or web application requiring user accounts needs a well-structured login and registration system. As a developer, mastering the creation of these forms helps you gain a deeper understanding of how front-end processes work. Plus, this project allows you to implement real-world functionality essential for any modern web application.

Step-by-Step Guide to Building the Login and Registration Form

Let’s walk through how you can create your own login and registration form. We’ll divide the process into three simple steps: setting up the project files, creating the HTML structure, and styling the form with CSS.

1. File Structure of the Project

Before we begin coding, set up your file structure. Create two files:

index.html: This will contain the HTML.
style.css: This will handle the styling of the form.

Having a well-organized structure will help you manage your code easily.

2. Create the HTML Structure

In your index.html file, you will build the structure for both the login and registration forms. Here’s how you can get started:

<!DOCTYPE html>
 
<!-- Website - www.abhikesh.com -->
 
<html lang="en">
 
  <head>
 
    <meta charset="UTF-8" />
 
    <meta name="description" content=" Today in this blog you will learn how to create a responsive Login & Registration Form in HTML CSS & JavaScript. The blog will cover everything from the basics of creating a Login & Registration in HTML, to styling it with CSS and adding with JavaScript." />
 
    <meta
 
      name="keywords"
 
      content="
 
 Animated Login & Registration Form,Form Design,HTML and CSS,HTML CSS JavaScript,login & registration form,login & signup form,Login Form Design,registration form,Signup Form,HTML,CSS,JavaScript,
 
"
 
    />
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <title>Login & Signup Form HTML CSS | Abhikesh Kumar</title>
 
    <link rel="stylesheet" href="style.css" />
 
    <script src="../custom-scripts.js" defer></script>
 
  </head>
 
  <body>
 
    <section class="wrapper">
 
      <div class="form signup">
 
        <header>Signup</header>
 
        <form action="#">
 
          <input type="text" placeholder="Full name" required />
 
          <input type="text" placeholder="Email address" required />
 
          <input type="password" placeholder="Password" required />
 
          <div class="checkbox">
 
            <input type="checkbox" id="signupCheck" />
 
            <label for="signupCheck">I accept all terms & conditions</label>
 
          </div>
 
          <input type="submit" value="Signup" />
 
        </form>
 
      </div>
 
      <div class="form login">
 
        <header>Login</header>
 
        <form action="#">
 
          <input type="text" placeholder="Email address" required />
 
          <input type="password" placeholder="Password" required />
 
          <a href="#">Forgot password?</a>
 
          <input type="submit" value="Login" />
 
        </form>
 
      </div>
 
      <script>
 
        const wrapper = document.querySelector(".wrapper"),
 
          signupHeader = document.querySelector(".signup header"),
 
          loginHeader = document.querySelector(".login header");
 
        loginHeader.addEventListener("click", () => {
 
          wrapper.classList.add("active");
 
        });
 
        signupHeader.addEventListener("click", () => {
 
          wrapper.classList.remove("active");
 
        });
 
      </script>
 
    </section>
 
  </body>
 
</html>

This creates the basic structure for the login and registration forms, with fields for username, email, and password. You can easily extend this form by adding more fields, such as “Confirm Password” or “Forgot Password” links.

3. Style the Form Using CSS

Once the HTML structure is in place, you’ll want to style the form to make it visually appealing. Use your style.css file to add styling like colors, spacing, and animations.

/* Import Google font - Poppins */
 
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
 
* {
 
  margin: 0;
 
  padding: 0;
 
  box-sizing: border-box;
 
  font-family: "Poppins", sans-serif;
 
}
 
body {
 
  min-height: 100vh;
 
  display: flex;
 
  align-items: center;
 
  justify-content: center;
 
  background: #f0faff;
 
}
 
.wrapper {
 
  position: relative;
 
  max-width: 470px;
 
  width: 100%;
 
  border-radius: 12px;
 
  padding: 20px 30px 120px;
 
  background: #4070f4;
 
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
 
  overflow: hidden;
 
}
 
.form.login {
 
  position: absolute;
 
  left: 50%;
 
  bottom: -86%;
 
  transform: translateX(-50%);
 
  width: calc(100% + 220px);
 
  padding: 20px 140px;
 
  border-radius: 50%;
 
  height: 100%;
 
  background: #fff;
 
  transition: all 0.6s ease;
 
}
 
.wrapper.active .form.login {
 
  bottom: -15%;
 
  border-radius: 35%;
 
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
 
}
 
.form header {
 
  font-size: 30px;
 
  text-align: center;
 
  color: #fff;
 
  font-weight: 600;
 
  cursor: pointer;
 
}
 
.form.login header {
 
  color: #333;
 
  opacity: 0.6;
 
}
 
.wrapper.active .form.login header {
 
  opacity: 1;
 
}
 
.wrapper.active .signup header {
 
  opacity: 0.6;
 
}
 
.wrapper form {
 
  display: flex;
 
  flex-direction: column;
 
  gap: 20px;
 
  margin-top: 40px;
 
}
 
form input {
 
  height: 60px;
 
  outline: none;
 
  border: none;
 
  padding: 0 15px;
 
  font-size: 16px;
 
  font-weight: 400;
 
  color: #333;
 
  border-radius: 8px;
 
  background: #fff;
 
}
 
.form.login input {
 
  border: 1px solid #aaa;
 
}
 
.form.login input:focus {
 
  box-shadow: 0 1px 0 #ddd;
 
}
 
form .checkbox {
 
  display: flex;
 
  align-items: center;
 
  gap: 10px;
 
}
 
.checkbox input[type="checkbox"] {
 
  height: 16px;
 
  width: 16px;
 
  accent-color: #fff;
 
  cursor: pointer;
 
}
 
form .checkbox label {
 
  cursor: pointer;
 
  color: #fff;
 
}
 
form a {
 
  color: #333;
 
  text-decoration: none;
 
}
 
form a:hover {
 
  text-decoration: underline;
 
}
 
form input[type="submit"] {
 
  margin-top: 15px;
 
  padding: none;
 
  font-size: 18px;
 
  font-weight: 500;
 
  cursor: pointer;
 
}
 
.form.login input[type="submit"] {
 
  background: #4070f4;
 
  color: #fff;
 
  border: none;

This CSS will give your form a clean and simple look, with rounded corners, consistent spacing, and a color scheme that feels modern.

Additional Tips and Tricks

Responsive Design: Ensure your forms look great on both desktop and mobile devices by using media queries in your CSS.
Form Validation: Implement form validation with JavaScript to ensure users fill out all required fields properly.
Security: Always remember that form validation should also be performed on the server side to protect against malicious input.

Conclusion

Building a responsive login and registration form using HTML and CSS is a valuable skill for any web developer. By following this step-by-step guide, you’ll not only create a functional and user-friendly form but also sharpen your front-end development skills. Whether you’re a beginner or an experienced developer, this project is a great way to deepen your understanding of how web technologies work together.

Want to check username availability on social media? Visit NameChkr to find out!

Read Also

Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.

Feel free to download the complete source code for this project below and start building!

Prev.
1
2
3
4
5
Next

Latest post

Popular Posts

Top 17 Best WordPress Plugins For Blogger (1181)

How to Implement Show & Hide Password Feature in HTML, CSS & JavaScript (2024) (830)

Functional Contact Form in PHP (819)

Transparent Login Form Using HTML, CSS, and JavaScript (736)

Vertical Card Sliding Animation Using HTML & CSS (716)

Stay Connected

Abhikesh Kumar

What is a Responsive Login and Registration Form?

Why Build a Responsive Login and Registration Form Using HTML & CSS?

Features of the Responsive Login and Registration Form

Step-by-Step Guide: Building a Responsive Login and Registration Form

Introduction to Flipping Card UI Design

Why Use HTML & CSS for Flipping Card UI?

How to Create a Flipping Card UI Design: Step-by-Step Guide

What is a Simple Website in HTML & CSS?

Why Use HTML & CSS for Simple Websites?

Step-by-Step Guide: How to Create a Simple Website in HTML & CSS

What is a Stylish Profile Card?

How to Create a Stylish Profile Card in HTML

Key Elements of a Stylish Profile Card in HTML

Benefits of Using a Stylish Profile Card in HTML

Improving User Engagement with a Stylish Profile Card

What is Input Label Animation?

Benefits of Floating Label Animation

Understanding the Animation Process

Introduction to Toast Notifications

Why Use Toast Notifications?

Understanding the Structure of Toast Notifications

Why Choose a Responsive Dropdown Menu?

How to Create a Responsive Dropdown Menu

Best Practices for a Responsive Dropdown Menu

Why Add a Heart Animation to Your Website?

Steps to Create the Double Click Heart Animation

Steps to Build a Basic Login Form Using HTML and CSS

Why Create a Login and Registration Form?

Step-by-Step Guide to Building the Login and Registration Form

Recent Posts

Recent Comments

Categories

Latest Posts

Comments

Newsletter