Avatar photo

Abhikesh Kumar

Total Post: 45

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.

How to Build a Responsive Website in HTML and CSS

How to Build a Responsive Website in HTML and CSS

In today’s digital world, creating a responsive website in HTML and CSS is an essential skill for web designers and developers. Whether showcasing your portfolio, hosting a blog, or simply experimenting with web design, having a responsive site ensures your content looks great on any device.

This guide is perfect for beginners who want to build their first responsive website in HTML and CSS. We’ll walk you through creating an engaging homepage featuring an interactive navigation bar and styling elements that make your website visually appealing and user-friendly.

Why Build a Responsive Website in HTML and CSS?

Responsive websites adjust seamlessly across different screen sizes and devices, making them accessible to a broader audience. By using only HTML and CSS, you can create a fully functional and aesthetically pleasing website without relying on complex coding frameworks.

Step-by-Step Guide to Creating a Responsive Website in HTML and CSS

Follow these simple steps to build your very own responsive website:
Step 1: Set Up Your Project

  1. Create a folder for your project and name it something relevant.
  2. Inside this folder, create two files: index.html (for the HTML structure) and style.css (for the CSS styling).

Step 2: Create the HTML Structure

In your index.html file, add the following basic HTML markup. This includes semantic tags like <header>, <nav>, <h1>, <h2>, and <ul> for your navigation:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Website Homepage HTML and CSS</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="header">
      <nav class="navbar">
        <h2 class="logo"><a href="#">abhikesh</a></h2>
        <input type="checkbox" id="menu-toggle" />
        <label for="menu-toggle" id="hamburger-btn">
          <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
            <path d="M3 12h18M3 6h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </label>
        <ul class="links">
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
        <div class="buttons">
          <a href="#" class="signin">Sign In</a>
          <a href="#" class="signup">Sign Up</a>
        </div>
      </nav>
    </header>
    <section class="hero-section">
      <div class="hero">
        <h2>Mobile App Development</h2>
        <p>
          Join us in the exciting world of programming and turn your ideas into
          reality. Unlock the world of endless possibilities - learn to code and
          shape the digital future with us.
        </p>
        <div class="buttons">
          <a href="#" class="join">Join Now</a>
          <a href="#" class="learn">Learn More</a>
        </div>
      </div>
      <div class="img">
        <img src="https://abhikesh.com/blogs/wp-content/uploads/2023/10/hero-bg.png" alt="hero image" />
      </div>
    </section>
  </body>
</html>

Step 3: Apply CSS for Responsiveness
In your style.css file, you will add CSS code to style your website and ensure it’s responsive:

/* Importing Google font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

body {
  height: 100vh;
  width: 100%;
  background: linear-gradient(to bottom, #175d69 23%, #330c43 95%);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 15px;
}

.navbar .logo a {
  font-size: 1.8rem;
  text-decoration: none;
  color: #fff;
}

.navbar .links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 35px;
}

.navbar .links a {
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  padding: 10px 0;
  transition: 0.2s ease;
}

.navbar .links a:hover {
  color: #47b2e4;
}

.navbar .buttons a {
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
  padding: 15px 0;
  transition: 0.2s ease;
}

.navbar .buttons a:not(:last-child) {
  margin-right: 30px;
}

.navbar .buttons .signin:hover {
  color: #47b2e4;
}

.navbar .buttons .signup {
  border: 1px solid #fff;
  padding: 10px 20px;
  border-radius: 0.375rem;
  text-align: center;
  transition: 0.2s ease;
}

.navbar .buttons .signup:hover {
  background-color: #47b2e4;
  color: #fff;
}

.hero-section {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 95vh;
  padding: 0 15px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-section .hero {
  max-width: 50%;
  color: #fff;
}

.hero h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #c9c7c7;
}

.hero-section .img img {
  width: 517px;
}

.hero-section .buttons {
  margin-top: 40px;
}

.hero-section .buttons a {
  text-decoration: none;
  color: #fff;
  padding: 12px 24px;
  border-radius: 0.375rem;
  font-weight: 600;
  transition: 0.2s ease;
  display: inline-block;
}

.hero-section .buttons a:not(:last-child) {
  margin-right: 15px;
}

.buttons .join {
  background-color: #47b2e4;
}

.hero-section .buttons .learn {
  border: 1px solid #fff;
  border-radius: 0.375rem;
}

.hero-section .buttons a:hover {
  background-color: #47b2e4;
}

/* Hamburger menu styles */
#menu-toggle {
  display: none;
}

#hamburger-btn {
  font-size: 1.8rem;
  color: #fff;
  cursor: pointer;
  display: none;
  order: 1;
}

@media screen and (max-width: 1023px) {
  .navbar .logo a {
    font-size: 1.5rem;
  }

  .links {
    position: fixed;
    left: -100%;
    top: 75px;
    width: 100%;
    height: 100vh;
    padding-top: 50px;
    background: #175d69;
    flex-direction: column;
    transition: 0.3s ease;
  }

  .navbar #menu-toggle:checked ~ .links {
    left: 0;
  }

  .navbar #hamburger-btn {
    display: block;
  }

  .header .buttons {
    display: none;
  }

  .hero-section .hero {
    max-width: 100%;
    text-align: center;
  }

  .hero-section img {
    display: none;
  }
}

Understanding the Code

  • HTML Structure: This creates the website’s basic layout, including the header, navigation bar, and main content area.
  • CSS Styling: We used a media query to make the navigation bar stack vertically on smaller screens, ensuring the website is fully responsive.

Benefits of Building a Responsive Website in HTML and CSS

  • Improved User Experience: Users can view your website seamlessly across different devices, improving their overall experience.
  • Easy Maintenance: Using pure HTML and CSS reduces the complexity of your site, making it easier to maintain and update.
  • SEO-Friendly: A well-designed responsive website looks great and performs well in search engines, attracting more visitors.
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

  1. 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.
  2. 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.
  3. 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.
  4. 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 words and conclusion.

Building a responsive website in HTML and CSS is an exciting and productive project, especially for beginners. This guide teaches you the critical steps to creating a beautiful and adaptable homepage that works across all devices.

Don’t stop here! Continue experimenting by recreating other modern designs or adding new features to your website. The possibilities are endless with just HTML and CSS.

Download the Source Code
Click the button below to quickly download all the source code files for this project and start building your responsive website!

Create a Powerful Functional Contact Form in PHP – Easy Tutorial

Create a Powerful Functional Contact Form in PHP – Easy Tutorial

Hello friends, in this blog post, you will learn how to build a functional contact form in PHP. This form will utilize HTML, CSS, JavaScript, and PHP to create a fully functional contact system for your website. Contact forms enable visitors to reach out directly to the site owner. In this tutorial, you’ll see how to create a functional PHP contact form that includes fields for user information like their name, email address, and message subject.

The functional contact form in PHP is vital to any website as it allows seamless communication between users and the website owner. You can customize this form’s fields based on your website’s needs. This project ensures validation to guarantee users input valid email addresses and messages.

Why Build a Functional Contact Form in PHP?

  • Direct Communication: A contact form allows users to communicate directly with you, avoiding the need for them to open an email client.
  • Data Validation: The form ensures that valid emails and messages are submitted, reducing spam and errors.
  • Customization: You can customize the form fields to gather more data or offer specific queries.

How the Functional PHP Contact Form Works

This functional contact form in PHP has dynamic status text that indicates whether a message has been successfully sent. The form is fully validated using JavaScript, so users must enter a valid email and message before submitting.

Unlike traditional contact forms that refresh the page upon submission, this contact form uses Ajax. It sends all form data (name, email, phone, message) through Ajax to a PHP script, which processes the information and sends it via email using the PHP mail() function.

Steps to Create a Functional PHP Contact Form

  1. Create the HTML File: Name the file index.html, and include form fields like name, email, and message. This is the structure of the contact form.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Form in PHP</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <header>Send us a Message</header>
    <form action="#">
      <div class="dbl-field">
        <div class="field">
          <input type="text" name="name" placeholder="Enter your name">
          <i class='fas fa-user'></i>
        </div>
        <div class="field">
          <input type="text" name="email" placeholder="Enter your email">
          <i class='fas fa-envelope'></i>
        </div>
      </div>
      <div class="dbl-field">
        <div class="field">
          <input type="text" name="phone" placeholder="Enter your phone">
          <i class='fas fa-phone-alt'></i>
        </div>
        <div class="field">
          <input type="text" name="website" placeholder="Enter your website">
          <i class='fas fa-globe'></i>
        </div>
      </div>
      <div class="message">
        <textarea placeholder="Write your message" name="message"></textarea>
        <i class="material-icons">message</i>
      </div>
      <div class="button-area">
        <button type="submit">Send Message</button>
        <span></span>
      </div>
    </form>
  </div>
  <script src="script.js"></script>
</body>
</html>

2. Create the CSS File: Name it style.css, and apply styles to make the form look professional and responsive.

/* 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;
}
body{
  display: flex;
  padding: 0 10px;
  min-height: 100vh;
  background: #0D6EFD;
  align-items: center;
  justify-content: center;
}
::selection{
  color: #fff;
  background: #0D6EFD;
}
.wrapper{
  width: 715px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.05);
}
.wrapper header{
  font-size: 22px;
  font-weight: 600;
  padding: 20px 30px;
  border-bottom: 1px solid #ccc;
}
.wrapper form{
  margin: 35px 30px;
}
.wrapper form.disabled{
  pointer-events: none;
  opacity: 0.7;
}
form .dbl-field{
  display: flex;
  margin-bottom: 25px;
  justify-content: space-between;
}
.dbl-field .field{
  height: 50px;
  display: flex;
  position: relative;
  width: calc(100% / 2 - 13px);
}
.wrapper form i{
  position: absolute;
  top: 50%;
  left: 18px;
  color: #ccc;
  font-size: 17px;
  pointer-events: none;
  transform: translateY(-50%);
}
form .field input,
form .message textarea{
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 18px 0 48px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.field input::placeholder,
.message textarea::placeholder{
  color: #ccc;
}
.field input:focus,
.message textarea:focus{
  padding-left: 47px;
  border: 2px solid #0D6EFD;
}
.field input:focus ~ i,
.message textarea:focus ~ i{
  color: #0D6EFD;
}
form .message{
  position: relative;
}
form .message i{
  top: 30px;
  font-size: 20px;
}
form .message textarea{
  min-height: 130px;
  max-height: 230px;
  max-width: 100%;
  min-width: 100%;
  padding: 15px 20px 0 48px;
}
form .message textarea::-webkit-scrollbar{
  width: 0px;
}
.message textarea:focus{
  padding-top: 14px;
}
form .button-area{
  margin: 25px 0;
  display: flex;
  align-items: center;
}
.button-area button{
  color: #fff;
  border: none;
  outline: none;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px;
  padding: 13px 25px;
  background: #0D6EFD;
  transition: background 0.3s ease;
}
.button-area button:hover{
  background: #025ce3;
}
.button-area span{
  font-size: 17px;
  margin-left: 30px;
  display: none;
}
@media (max-width: 600px){
  .wrapper header{
    text-align: center;
  }
  .wrapper form{
    margin: 35px 20px;
  }
  form .dbl-field{
    flex-direction: column;
    margin-bottom: 0px;
  }
  form .dbl-field .field{
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
  }
  form .message textarea{
    resize: none;
  }
  form .button-area{
    margin-top: 20px;
    flex-direction: column;
  }
  .button-area button{
    width: 100%;
    padding: 11px 0;
    font-size: 16px;
  }
  .button-area span{
    margin: 20px 0 0;
    text-align: center;
  }
}

3. Create the JavaScript File: Use script.js to validate the form and send data via Ajax.

//Contact Form in PHP
const form = document.querySelector("form"),
statusTxt = form.querySelector(".button-area span");
form.onsubmit = (e)=>{
  e.preventDefault();
  statusTxt.style.color = "#0D6EFD";
  statusTxt.style.display = "block";
  statusTxt.innerText = "Sending your message...";
  form.classList.add("disabled");

  let xhr = new XMLHttpRequest();
  xhr.open("POST", "message.php", true);
  xhr.onload = ()=>{
    if(xhr.readyState == 4 && xhr.status == 200){
      let response = xhr.response;
      if(response.indexOf("required") != -1 || response.indexOf("valid") != -1 || response.indexOf("failed") != -1){
        statusTxt.style.color = "red";
      }else{
        form.reset();
        setTimeout(()=>{
          statusTxt.style.display = "none";
        }, 3000);
      }
      statusTxt.innerText = response;
      form.classList.remove("disabled");
    }
  }
  let formData = new FormData(form);
  xhr.send(formData);
}

4. Create the PHP File: This file, named message.php, will process the form submission. Be sure to set your email as the $receiver to receive messages.

//Contact Form in PHP
<?php
  $name = htmlspecialchars($_POST['name']);
  $email = htmlspecialchars($_POST['email']);
  $phone = htmlspecialchars($_POST['phone']);
  $website = htmlspecialchars($_POST['website']);
  $message = htmlspecialchars($_POST['message']);

  if(!empty($email) && !empty($message)){
    if(filter_var($email, FILTER_VALIDATE_EMAIL)){
      $receiver = "receiver_email_address"; //enter that email address where you want to receive all messages
      $subject = "From: $name <$email>";
      $body = "Name: $name\nEmail: $email\nPhone: $phone\nWebsite: $website\n\nMessage:\n$message\n\nRegards,\n$name";
      $sender = "From: $email";
      if(mail($receiver, $subject, $body, $sender)){
         echo "Your message has been sent";
      }else{
         echo "Sorry, failed to send your message!";
      }
    }else{
      echo "Enter a valid email address!";
    }
  }else{
    echo "Email and message field is required!";
  }
?>
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

  1. 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.
  2. 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.
  3. 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.
  4. 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 Words

Building a functional contact form in PHP is a great way to improve user interaction on your website. The tutorial above helps you easily create and integrate a contact form that works smoothly without requiring page reloads. If you encounter issues, you can download the complete source code using the button below. Customize the form as needed to fit your website’s unique needs!

Create Toggle Button using HTML CSS and JavaScript

Create Toggle Button using HTML CSS and JavaScript

Hello there. I hope that all is going great with you. In this post, you will learn how to create a Toggle Button using HTML, CSS, and JavaScript. I recently designed an adorable shape Toggle Button that you may find appealing; today’s button is simple yet effective.

Toggle buttons can be added to any webpage or application to enable or disable specific aspects. For instance, to turn on Wi-Fi, you would use this type of button. They are helpful on various pages in software programs and other front-end components for similar purposes.

Please look at the image of our toggle button I posted online. As shown, one toggle button is closed while its counterpart opens up, but in reality, there is only one toggle button that we must click to open or close; only its circular part moves.

I believe you can quickly design this toggle button using HTML, CSS, and JavaScript. If you’re having difficulty creating an easy toggle switch, here is the complete source code;

Hamburger Menu Button that Has Loading Animation

Switch Button [Source Code] and Toggle Button (Source Code).

To create an animated Button using HTML, CSS, and JavaScript code, it’s necessary to create two separate files—one HTML and the other CSS. Once these have been made, copy-paste their contents into your document before downloading them in their entirety by clicking the Download Button.
HTML File

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Toggle Button Animation</title>
        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div></div>
        <!-- JavaScript -->
        <script>
            const toggleBtn = document.querySelector(".toggle");
            toggleBtn.addEventListener("click", () => toggleBtn.classList.toggle("active"));
        </script>
    </body>
</html>

CSS File

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7d2ae8;
}
.toggle{
  position: relative;
  height: 12px;
  width: 125px;
  cursor: pointer;
  border-radius: 25px;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.toggle::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: #7d2ae8;
  border: 10px solid #fff;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.toggle.active::before{
  left: calc(100% - 70px);
  background-color: #fff;
  border-color: #7d2ae8;
}
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

  1. 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.
  2. 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.
  3. 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.
  4. 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.

Animation Button: Create Interactive Buttons in HTML, CSS

Animation Button: Create Interactive Buttons in HTML, CSS

Creating an Animation Button in HTML, CSS, and JavaScript is an exciting way to enhance user interaction on your website. In this tutorial, you’ll learn how to build a button that animates with a click, providing an engaging experience for your visitors.

What is an Animation Button in HTML?

An Animation Button in HTML is a dynamic button that triggers visual effects when clicked. These animations can vary in style, such as changing colors, expanding in size, or producing ripple effects, enriching the user experience on web applications and sites.

Why Use Button Click Animation Button?

Button click animations serve several purposes:

  • Engagement: Animated buttons attract user attention and encourage interaction.
  • Feedback: They provide immediate visual feedback, confirming to users that their action has been recognized.
  • Aesthetics: These animations can enhance the overall design of your website, making it look modern and appealing.

Steps for Creating an Animation Button

Let’s break down the process of creating an Animation Button in HTML into simple steps.

1. Project File Structure

To create this Animation Button, you’ll need to set up a project with two main files:

  • index.html: This file will contain the HTML structure for your button.
  • style.css: This file will hold all the CSS styles needed for the buttons and animations.
2. Designing the Button Click Animation

Now that your files are set up, it’s time to design your button.

HTML Structure: Open your index.html file and add the following code:

<!DOCTYPE html>
<!-- Coding By abhikesh- 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>Button Click Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <button>Click Me</button>
    <script>
      const button = document.querySelector(".button");
      button.addEventListener("click", (e) => {
        e.preventDefault;
        button.classList.add("animate");
        setTimeout(() => {
          button.classList.remove("animate");
        }, 600);
      });
    </script>
  </body>
</html>

CSS Styling: In your style.css file, include the following code to style your button and add the animation:

/* 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 {
  display: flex;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0faff;
}
.button {
  position: relative;
  padding: 10px 22px;
  border-radius: 6px;
  border: none;
  color: #fff;
  cursor: pointer;
  background-color: #7d2ae8;
  transition: all 0.2s ease;
}
.button:active {
  transform: scale(0.96);
}
.button:before,
.button:after {
  position: absolute;
  content: "";
  width: 150%;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1000;
  background-repeat: no-repeat;
}
.button.animate::before {
  top: -70%;
  background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
  animation: greentopBubbles ease-in-out 0.6s forwards infinite;
}
@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
.button.animate::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  animation: greenbottomBubbles ease-in-out 0.6s forwards infinite;
}
@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
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

  1. 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.
  2. 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.
  3. 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.
  4. 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
Following these steps, you have successfully created an HTML animation Button that reacts when clicked, providing a delightful user experience. Feel free to customize the button’s style and animations to match your website’s theme.

Feel free to share this tutorial with others if you found it helpful! Your support enables us to continue creating valuable content for the developer community. Thank you for reading!

Send Mail Seamlessly with XAMPP Server – Step-by-Step Guide

Send Mail Seamlessly with XAMPP Server – Step-by-Step Guide

Dear Readers welcome to this tutorial on sending mail using the XAMPP server. In a previous post, I discussed setting up XAMPP to send mail via localhost in PHP. If you haven’t had a chance to read that yet, I recommend checking it out first!

This webpage program features a form for sending mail that requires three inputs: an email address, a subject, and a message. If you try to send without filling in all three fields, you’ll see an alert: “All input fields are required!” After you fill in the details and hit send, your message will be delivered to the recipient from the email address you provided, along with a confirmation message that states: “Your mail was successfully delivered.”

If the mail fails to send, an alert message will appear: “Sorry, failed while sending mail!” If you’d like a more visual guide, check out my comprehensive video tutorial on how to send email with PHP and Gmail.

Creating the Program to Send Mail Using XAMPP Server

To set up this program for sending mail using XAMPP, you must create two files: one PHP and one CSS file. Here’s how to get started:

Create a PHP File

Name it mail.php and copy the following code into it. All PHP files should end with the .php extension for proper functioning.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Send Mail From Localhost</title>
      <link rel="stylesheet" href="style.css">
      <!-- bootstrap cdn link -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   </head>
   <body>
      <div>
         <div>
            <div>
               <h2>
                  Send Message
               </h2>
               <p>
                  Send mail to anyone from localhost.
               </p>
               <!-- starting php code -->
               <?php
                  //first we leave this input field blank
                  $recipient = "";
                  //if user click the send button
                  if(isset($_POST['send'])){
                      //access user entered data
                     $recipient = $_POST['email'];
                     $subject = $_POST['subject'];
                     $message = $_POST['message'];
                     $sender = "From: [email protected]";
                     //if user leave empty field among one of them
                     if(empty($recipient) || empty($subject) || empty($message)){
                         ?>
               <!-- display an alert message if one of them field is empty -->
               <div>
                  <?php echo "All inputs are required!" ?>
               </div>
               <?php
                  }else{
                      // PHP function to send mail
                     if(mail($recipient, $subject, $message, $sender)){
                      ?>
               <!-- display a success message if once mail sent sucessfully -->
               <div>
                  <?php echo "Your mail successfully sent to $recipient"?>
               </div>
               <?php
                  $recipient = "";
                  }else{
                   ?>
               <!-- display an alert message if somehow mail can't be sent -->
               <div>
                  <?php echo "Failed while sending your mail!" ?>
               </div>
               <?php
                  }
                  }
                  }
                  ?> <!-- end of php code -->
               <form action="mail.php" method="POST">
                  <div>
                     <input name="email" type="email" placeholder="Recipients" value="<?php echo $recipient ?>">
                  </div>
                  <div>
                     <input name="subject" type="text" placeholder="Subject">
                  </div>
                  <div>
                     <!-- change this tag name into textarea to show textarea field. Due to more textarea I got an error, so I change the name of this field -->
                     <!-- <changeit cols="30" rows="5" name="message" placeholder="Compose your message.."></changeit> -->
                  </div>
                  <div>
                     <input type="submit" name="send" value="Send" placeholder="Subject">
                  </div>
               </form>
            </div>
         </div>
      </div>
   </body>
</html>

Create a CSS File

Name this file style.css and copy your CSS code into it. Ensure that it ends with the .css extension for easy access later.

/* custom css styling */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
html,body{
    background: #007bff;
}
::selection{
    color: #fff;
    background: #007bff;
}
.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Poppins', sans-serif;
}
.container .mail-form{
    background: #fff;
    padding: 25px 35px;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.container form .form-control{
    height: 43px;
    font-size: 15px;
}
.container .mail-form form .form-group .button{
    font-size: 17px!important;
}
.container form .textarea{
    height: 100px;
    resize: none;
}
.container .mail-form h2{
    font-size: 30px;
    font-weight: 600;
}
.container .mail-form p{
    font-size: 14px;
}
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

  1. 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.
  2. 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.
  3. 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.
  4. 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.

Following these steps, you should successfully set up a way to send mail using the XAMPP server and PHP!
If you encounter any issues or the code doesn’t work as expected, you can download the complete code files from the link below. These free files come in a zip format that you can easily extract.

How to Design a Responsive Fiverr Website in HTML and CSS

How to Design a Responsive Fiverr Website in HTML and CSS

Enhance your web development skills by embarking on a practical journey of creating a Fiverr site using HTML and CSS. This tutorial not only allows you to recreate designs from popular platforms like Fiverr but also empowers you to showcase your ability to recreate existing designs.
This blog post presents a straightforward guide on how to build a responsive Fiverr website using only HTML, CSS, and JavaScript. You will confidently learn how to create an interactive homepage featuring navigation bars and place elements on the page with styles matching Fiverr’s.
As we create our Fiverr-inspired homepage, we will explore a range of HTML tags and CSS attributes, such as navigation bars, sections, divs, inputs, links, and others, to craft an appealing layout and ensure an accessible interface.

How to Create a Fiverr Website Using HTML and CSS

  • Follow these instructions to create a responsive Fiverr-inspired Homepage using HTML and CSS:
  • Create a folder, name it, and place all necessary files inside.
  • Create an index.html file as your starting point.
  • Create a style.css file containing CSS code.
  • The Images folder can be downloaded and placed into the project directory for use during development. It includes files for both the Fiverr Logo and Hero Background Image.

Add the HTML codes below to your index.html file for use on mobile screens. These codes provide navigation bars, sections, input fields, and links, in addition to various tags that make up your website. These codes include JavaScript lines for toggling menus on and off.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fiverr Homepage Clone</title>
  <link rel="stylesheet" href="style.css">
  <!-- Google Icons Link -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">
</head>
<body>
  <header>
    <nav>
      <a href="#">
        <img src="images/logo.svg" alt="Fiverr Logo">
      </a>
      <ul>
        <li><a href="#">Fiverr Business</a></li>
        <li><a href="#">Explore</a></li>
        <li>
          <a href="#">
            <span>language</span>
            English
          </a>
        </li>
        <li><a href="#">Become a Seller</a></li>
        <li><a href="#">Sign In</a></li>
        <li><a href="#">Join Us</a></li>
        <span id="close-menu-btn">close</span>
      </ul>
      <span id="hamburger-btn">menu</span>
    </nav>
  </header>
  <section>
    <div>
      <h1>Find the right freelance service, right away</h1>
      <form action="#">
        <input type="text" placeholder="Search for any service..." required>
        <button type="sumbit">search</button>
      </form>
      <div>
        Popular:
        <ul>
          <li><a href="#">Webite Design</a></li>
          <li><a href="#">Logo Design</a></li>
          <li><a href="#">WordPress</a></li>
          <li><a href="#">AI Design</a></li>
        </ul>
      </div>
    </div>
  </section>
  <script>
    const header = document.querySelector("header");
    const hamburgerBtn = document.querySelector("#hamburger-btn");
    const closeMenuBtn = document.querySelector("#close-menu-btn");
    // Toggle mobile menu on hamburger button click
    hamburgerBtn.addEventListener("click", () => header.classList.toggle("show-mobile-menu"));
    // Close mobile menu on close button click
    closeMenuBtn.addEventListener("click", () => hamburgerBtn.click());
  </script>
</body>
</html>

Add the CSS codes below to your style.css to replicate the Fiverr Homepage look on your website. These CSS codes feature styles for elements such as color, border, background, and even the image from Fiverr! Additionally, media queries make your website responsive.

/* Importing Google font - Fira Sans */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Fira Sans', sans-serif;
}
body {
  background: #1B1B1D;
}
header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  padding: 20px;
}
header .navbar {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar .menu-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 30px;
}
.navbar .menu-links li a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: 0.2s ease;
}
.navbar .menu-links .language-item a {
  display: flex;
  gap: 8px;
  align-items: center;
}
.navbar .menu-links .language-item span {
  font-size: 1.3rem;
}
.navbar .menu-links li a:hover {
  color: #1dbf73;
}
.navbar .menu-links .join-btn a {
  border: 1px solid #fff;
  padding: 8px 15px;
  border-radius: 4px;
}
.navbar .menu-links .join-btn a:hover {
  color: #fff;
  border-color: transparent;
  background: #1dbf73;
}
.hero-section {
  height: 100vh;
  background-image: url("images/hero-img.jpg");
  background-position: center;
  background-size: cover;
  position: relative;
  display: flex;
  padding: 0 20px;
  align-items: center;
}
.hero-section .content {
  max-width: 1280px;
  margin: 0 auto 40px;
  width: 100%;
}
.hero-section .content h1 {
  color: #fff;
  font-size: 3rem;
  max-width: 630px;
  line-height: 65px;
}
.hero-section .search-form {
  height: 48px;
  display: flex;
  max-width: 630px;
  margin-top: 30px;
}
.hero-section .search-form input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  padding: 0 15px;
  font-size: 1rem;
  border-radius: 4px 0 0 4px;
}
.hero-section .search-form button {
  height: 100%;
  width: 60px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #1dbf73;
  color: #fff;
  border-radius: 0 4px 4px 0;
  transition: background 0.2s ease;
}
.hero-section .search-form button:hover {
  background: #19a463;
}
.hero-section .popular-tags {
  display: flex;
  color: #fff;
  gap: 25px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 25px;
}
.hero-section .popular-tags .tags {
  display: flex;
  gap: 15px;
  align-items: center;
  list-style: none;
}
.hero-section .tags li a {
  text-decoration: none;
  color: #fff;
  border: 1px solid #fff;
  padding: 4px 12px;
  border-radius: 50px;
  transition: 0.2s ease;
}
.hero-section .tags li a:hover {
  color: #000;
  background: #fff;
}
.navbar #hamburger-btn {
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 1.7rem;
}
.navbar #close-menu-btn {
  position: absolute;
  display: none;
  color: #000;
  top: 20px;
  right: 20px;
  cursor: pointer;
  font-size: 1.7rem;
}
@media screen and (max-width: 900px) {
  header.show-mobile-menu::before {
    content: "";
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    backdrop-filter: blur(5px);
  }
  .navbar .menu-links {
    height: 100vh;
    max-width: 300px;
    width: 100%;
    background: #fff;
    position: fixed;
    left: -300px;
    top: 0;
    display: block;
    padding: 75px 40px 0;
    transition: left 0.2s ease;
  }
  header.show-mobile-menu .navbar .menu-links {
    left: 0;
  }
  .navbar .menu-links li {
    margin-bottom: 30px;
  }
  .navbar .menu-links li a {
    color: #000;
    font-size: 1.1rem;
  }
  .navbar .menu-links .join-btn a {
    padding: 0;
  }
  .navbar .menu-links .join-btn a:hover {
    color: #1dbf73;
    background: none;
  }
  .navbar :is(#close-menu-btn, #hamburger-btn) {
    display: block;
  }
  .hero-section {
    background: none;
  }
  .hero-section .content {
    margin: 0 auto 80px;
  }
  .hero-section .content :is(h1, .search-form) {
    max-width: 100%;
  }
  .hero-section .content h1 {
    text-align: center;
    font-size: 2.5rem;
    line-height: 55px;
  }
  .hero-section .search-form {
    display: block;
    margin-top: 20px;
  }
  .hero-section .search-form input {
    border-radius: 4px;
  }
  .hero-section .search-form button {
    margin-top: 10px;
    border-radius: 4px;
    width: 100%;
  }
  .hero-section .popular-tags {
    display: none;
  }
}
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

  1. 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.
  2. 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.
  3. 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.
  4. 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 and final remarks.

Building a Fiverr website using HTML, CSS, and JavaScript can be an enjoyable project for new web programmers. You have created an engaging, responsive Fiverr homepage by following the instructions presented here! Don’t stop here! Keep the inspiration flowing by continuing to experiment and hone your skills. I encourage you to explore and recreate other impressive website designs found here, and let your creativity soar.

Clicking the Download button will provide free access to this Fiverr Homepage’s source files if any issues arise when creating your Fiverr site.

Ultimate Overview of Creating a Stunning Login and Registration Form

Ultimate Overview of Creating a Stunning Login and Registration Form

New to Web Development? Start by Building a Website with a Login and Registration Form!

If you’re just starting out in web development, creating a website with a Login and Registration Form is a perfect project to build your skills. This hands-on practice will help you master critical skills, like designing smooth navigation menus, developing homepage layouts, and writing functional form logic. It’s an ideal way to practice and learn while bringing your ideas to life!

In this guide, I will walk you through creating a responsive website that includes Login and Registration Form using HTML, CSS, and JavaScript. By completing this project, you’ll gain practical experience and learn essential web development concepts like DOM manipulation, event handling, and conditional statements.

Responsive Design with Login and Registration Form

The website’s homepage features a navigation bar and a login button. When clicked, the button reveals an attractive blurred background for the login form on the left side, with input fields on the right. If you wish to register instead, simply click the sign-up link, which takes you directly to the Registration Form.

Steps for Establishing a Website with Login and Registration Form

Follow these step-by-step instructions to create a responsive website featuring Login and Registration Form with HTML, CSS, and JavaScript:

  • Create a Project Folder: Name it as you like and store the necessary files.
  • Create index.html: This will be your main document.
  • Create style.css: This file will contain your CSS code.
  • Create script.js: This will house your JavaScript code.
  • Add Images Folder: Include all the images needed for this project.
Coding the Login and Registration Form

Upload the following HTML code to your index.html file, which includes the header, nav, ul, form, and additional elements required for your project.

<!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">


    <title>Website with Login & Signup Form | Abhikesh</title>


    <!-- Google Fonts Link For Icons -->


    <link rel="stylesheet"


        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0">


    <link rel="stylesheet" href="style.css">


    <script src="script.js" defer></script>


</head>


<body>


    <header>


        <nav class="navbar">


            <span class="hamburger-btn material-symbols-rounded">menu</span>


            <a href="#" class="logo">


                <h2>Abhikesh</h2>


            </a>


            <ul class="links">


                <span class="close-btn material-symbols-rounded">close</span>


                <li><a href="#">Home</a></li>


                <li><a href="#">Portfolio</a></li>


                <li><a href="#">Courses</a></li>


                <li><a href="#">About us</a></li>


                <li><a href="#">Contact us</a></li>


            </ul>


            <button class="login-btn">LOG IN</button>


        </nav>


    </header>


    <div class="blur-bg-overlay"></div>


    <div class="form-popup">


        <span class="close-btn material-symbols-rounded">close</span>


        <div class="form-box login">


            <div class="form-details">


                <h2>Welcome Back</h2>


                <p>Please log in using your personal information to stay connected with us.</p>


            </div>


            <div class="form-content">


                <h2>LOGIN</h2>


                <form action="#">


                    <div class="input-field">


                        <input type="text" required>


                        <label>Email</label>


                    </div>


                    <div class="input-field">


                        <input type="password" required>


                        <label>Password</label>


                    </div>


                    <a href="#" class="forgot-pass-link">Forgot password?</a>


                    <button type="submit">Log In</button>


                </form>


                <div class="bottom-link">


                    Don't have an account?


                    <a href="#" id="signup-link">Signup</a>


                </div>


            </div>


        </div>


        <div class="form-box signup">


            <div class="form-details">


                <h2>Create Account</h2>


                <p>To become a part of our community, please sign up using your personal information.</p>


            </div>


            <div class="form-content">


                <h2>SIGNUP</h2>


                <form action="#">


                    <div class="input-field">


                        <input type="text" required>


                        <label>Enter your email</label>


                    </div>


                    <div class="input-field">


                        <input type="password" required>


                        <label>Create password</label>


                    </div>


                    <div class="policy-text">


                        <input type="checkbox" id="policy">


                        <label for="policy">


                            I agree the


                            <a href="#" class="option">Terms & Conditions</a>


                        </label>


                    </div>


                    <button type="submit">Sign Up</button>


                </form>


                <div class="bottom-link">


                    Already have an account?


                    <a href="#" id="login-link">Login</a>


                </div>


            </div>


        </div>


    </div>


</body>


</html>

Add CSS codes to your style.css document to visually style your website and forms. Experiment with various CSS properties like colors, fonts, and backgrounds to give your site a personalized touch.

/* Importing Google font - Open Sans */


@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");


* {


    margin: 0;


    padding: 0;


    box-sizing: border-box;


    font-family: "Open Sans", sans-serif;


}


body {


    height: 100vh;


    width: 100%;


    background: url("images/hero-bg.jpg") center/cover no-repeat;


}


header {


    position: fixed;


    width: 100%;


    top: 0;


    left: 0;


    z-index: 10;


    padding: 0 10px;


}


.navbar {


    display: flex;


    padding: 22px 0;


    align-items: center;


    max-width: 1200px;


    margin: 0 auto;


    justify-content: space-between;


}


.navbar .hamburger-btn {


    display: none;


    color: #fff;


    cursor: pointer;


    font-size: 1.5rem;


}


.navbar .logo {


    gap: 10px;


    display: flex;


    align-items: center;


    text-decoration: none;


}


.navbar .logo img {


    width: 40px;


    border-radius: 50%;


}


.navbar .logo h2 {


    color: #fff;


    font-weight: 600;


    font-size: 1.7rem;


}


.navbar .links {


    display: flex;


    gap: 35px;


    list-style: none;


    align-items: center;


}


.navbar .close-btn {


    position: absolute;


    right: 20px;


    top: 20px;


    display: none;


    color: #000;


    cursor: pointer;


}


.navbar .links a {


    color: #fff;


    font-size: 1.1rem;


    font-weight: 500;


    text-decoration: none;


    transition: 0.1s ease;


}


.navbar .links a:hover {


    color: #19e8ff;


}


.navbar .login-btn {


    border: none;


    outline: none;


    background: #fff;


    color: #275360;


    font-size: 1rem;


    font-weight: 600;


    padding: 10px 18px;


    border-radius: 3px;


    cursor: pointer;


    transition: 0.15s ease;


}


.navbar .login-btn:hover {


    background: #ddd;


}


.form-popup {


    position: fixed;


    top: 50%;


    left: 50%;


    z-index: 10;


    width: 100%;


    opacity: 0;


    pointer-events: none;


    max-width: 720px;


    background: #fff;


    border: 2px solid #fff;


    transform: translate(-50%, -70%);


}


.show-popup .form-popup {


    opacity: 1;


    pointer-events: auto;


    transform: translate(-50%, -50%);


    transition: transform 0.3s ease, opacity 0.1s;


}


.form-popup .close-btn {


    position: absolute;


    top: 12px;


    right: 12px;


    color: #878484;


    cursor: pointer;


}


.blur-bg-overlay {


    position: fixed;


    top: 0;


    left: 0;


    z-index: 10;


    height: 100%;


    width: 100%;


    opacity: 0;


    pointer-events: none;


    backdrop-filter: blur(5px);


    -webkit-backdrop-filter: blur(5px);


    transition: 0.1s ease;


}


.show-popup .blur-bg-overlay {


    opacity: 1;


    pointer-events: auto;


}


.form-popup .form-box {


    display: flex;


}


.form-box .form-details {


    width: 100%;


    color: #fff;


    max-width: 330px;


    text-align: center;


    display: flex;


    flex-direction: column;


    justify-content: center;


    align-items: center;


}


.login .form-details {


    padding: 0 40px;


    background: url("images/login-img.jpg");


    background-position: center;


    background-size: cover;


}


.signup .form-details {


    padding: 0 20px;


    background: url("images/signup-img.jpg");


    background-position: center;


    background-size: cover;


}


.form-box .form-content {


    width: 100%;


    padding: 35px;


}


.form-box h2 {


    text-align: center;


    margin-bottom: 29px;


}


form .input-field {


    position: relative;


    height: 50px;


    width: 100%;


    margin-top: 20px;


}


.input-field input {


    height: 100%;


    width: 100%;


    background: none;


    outline: none;


    font-size: 0.95rem;


    padding: 0 15px;


    border: 1px solid #717171;


    border-radius: 3px;


}


.input-field input:focus {


    border: 1px solid #00bcd4;


}


.input-field label {


    position: absolute;


    top: 50%;


    left: 15px;


    transform: translateY(-50%);


    color: #4a4646;


    pointer-events: none;


    transition: 0.2s ease;


}


.input-field input:is(:focus, :valid) {


    padding: 16px 15px 0;


}


.input-field input:is(:focus, :valid)~label {


    transform: translateY(-120%);


    color: #00bcd4;


    font-size: 0.75rem;


}


.form-box a {


    color: #00bcd4;


    text-decoration: none;


}


.form-box a:hover {


    text-decoration: underline;


}


form :where(.forgot-pass-link, .policy-text) {


    display: inline-flex;


    margin-top: 13px;


    font-size: 0.95rem;


}


form button {


    width: 100%;


    color: #fff;


    border: none;


    outline: none;


    padding: 14px 0;


    font-size: 1rem;


    font-weight: 500;


    border-radius: 3px;


    cursor: pointer;


    margin: 25px 0;


    background: #00bcd4;


    transition: 0.2s ease;


}


form button:hover {


    background: #0097a7;


}


.form-content .bottom-link {


    text-align: center;


}


.form-popup .signup,


.form-popup.show-signup .login {


    display: none;


}


.form-popup.show-signup .signup {


    display: flex;


}


.signup .policy-text {


    display: flex;


    margin-top: 14px;


    align-items: center;


}


.signup .policy-text input {


    width: 14px;


    height: 14px;


    margin-right: 7px;


}


@media (max-width: 950px) {


    .navbar :is(.hamburger-btn, .close-btn) {


        display: block;


    }


    .navbar {


        padding: 15px 0;


    }


    .navbar .logo img {


        display: none;


    }


    .navbar .logo h2 {


        font-size: 1.4rem;


    }


    .navbar .links {


        position: fixed;


        top: 0;


        z-index: 10;


        left: -100%;


        display: block;


        height: 100vh;


        width: 100%;


        padding-top: 60px;


        text-align: center;


        background: #fff;


        transition: 0.2s ease;


    }


    .navbar .links.show-menu {


        left: 0;


    }


    .navbar .links a {


        display: inline-flex;


        margin: 20px 0;


        font-size: 1.2rem;


        color: #000;


    }


    .navbar .links a:hover {


        color: #00BCD4;


    }


    .navbar .login-btn {


        font-size: 0.9rem;


        padding: 7px 10px;


    }


}


@media (max-width: 760px) {


    .form-popup {


        width: 95%;


    }


    .form-box .form-details {


        display: none;


    }


    .form-box .form-content {


        padding: 30px 20px;


    }


}

Once the styles are applied, load your website in the browser. While the forms may initially be hidden, they will become visible later through JavaScript.

Finally, add JavaScript code to your script.js file. This code includes click event listeners, allowing classes to be toggled on various HTML elements.

const navbarMenu = document.querySelector(".navbar .links");


const hamburgerBtn = document.querySelector(".hamburger-btn");


const hideMenuBtn = navbarMenu.querySelector(".close-btn");


const showPopupBtn = document.querySelector(".login-btn");


const formPopup = document.querySelector(".form-popup");


const hidePopupBtn = formPopup.querySelector(".close-btn");


const signupLoginLink = formPopup.querySelectorAll(".bottom-link a");


// Show mobile menu


hamburgerBtn.addEventListener("click", () => {


    navbarMenu.classList.toggle("show-menu");


});


// Hide mobile menu


hideMenuBtn.addEventListener("click", () =>  hamburgerBtn.click());


// Show login popup


showPopupBtn.addEventListener("click", () => {


    document.body.classList.toggle("show-popup");


});


// Hide login popup


hidePopupBtn.addEventListener("click", () => showPopupBtn.click());


// Show or hide signup form


signupLoginLink.forEach(link => {


    link.addEventListener("click", (e) => {


        e.preventDefault();


        formPopup.classList[link.id === 'signup-link' ? 'add' : 'remove']("show-signup");


    });


});
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

  1. 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.
  2. 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.
  3. 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.
  4. 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 website with Login and Registration Form is an engaging and hands-on learning experience that explores various web development components. Following the steps outlined in this post, you should have successfully created your login and registration Form using HTML, CSS, and JavaScript.

Create an Engaging Testimonial Slider: A Step-by-Step Guide

Create an Engaging Testimonial Slider: A Step-by-Step Guide

Hello friend! I hope your project is going smoothly, and I can’t wait to connect and create wonderful memories together soon! In this blog post, you will learn how to create a responsive Testimonial Slider using HTML, CSS, and SwiperJS/JavaScript. This tutorial will empower you to showcase customer reviews effectively.

What is a Testimonial Slider?

A Testimonial Slider displays reviews of products and services. For example, testimonials on a coffee shop website may include customer opinions about the coffee offered. This dynamic element enhances user engagement and builds trust with potential customers.

Project Overview

In this project, our Testimonial Slider will feature:

  • An image of the reviewer
  • Review text
  • A quote icon
  • The reviewer’s name and details
  • Navigation buttons for sliding through testimonials

How Does It Work?

When interacting with the Testimonial Slider, users can click on the navigation buttons to slide through testimonials. Additionally, users can drag the slider to navigate between quotes easily. The design is completely responsive, effortlessly adjusting to various screen sizes.

Step-by-Step Guide to Create a Testimonial Slider

To create your Testimonial Slider, you must develop three files: an HTML file, a CSS file, and a JavaScript file. Here’s a quick summary of how to begin:

1. Create the HTML Structure

Add the following HTML code to your file to set up the basic structure of the Testimonial Slider:

<!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>Responsive Testimonial Slider</title>


  <!-- Swiper CSS -->


  <link rel="stylesheet" href="css/swiper-bundle.min.css" />


  <!-- CSS -->


  <link rel="stylesheet" href="css/style.css" />


  <!-- Boxicons CSS -->


  <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />


</head>


<body>


  <section class="container">


    <div class="testimonial mySwiper">


      <div class="testi-content swiper-wrapper">


        <div class="slide swiper-slide">


          <img src="images/img1.jpg" alt="" class="image" />


          <p>


            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,


            saepe provident dolorem a quaerat quo error facere nihil deleniti


            eligendi ipsum adipisci, fugit, architecto amet asperiores


            doloremque deserunt eum nemo.


          </p>


          <i class="bx bxs-quote-alt-left quote-icon"></i>


          <div class="details">


            <span class="name">Marnie Lotter</span>


            <span class="job">Web Developer</span>


          </div>


        </div>


        <div class="slide swiper-slide">


          <img src="images/img2.jpg" alt="" class="image" />


          <p>


            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,


            saepe provident dolorem a quaerat quo error facere nihil deleniti


            eligendi ipsum adipisci, fugit, architecto amet asperiores


            doloremque deserunt eum nemo.


          </p>


          <i class="bx bxs-quote-alt-left quote-icon"></i>


          <div class="details">


            <span class="name">Marnie Lotter</span>


            <span class="job">Web Developer</span>


          </div>


        </div>


        <div class="slide swiper-slide">


          <img src="images/img3.jpg" alt="" class="image" />


          <p>


            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,


            saepe provident dolorem a quaerat quo error facere nihil deleniti


            eligendi ipsum adipisci, fugit, architecto amet asperiores


            doloremque deserunt eum nemo.


          </p>


          <i class="bx bxs-quote-alt-left quote-icon"></i>


          <div class="details">


            <span class="name">Marnie Lotter</span>


            <span class="job">Web Developer</span>


          </div>


        </div>


      </div>


      <div class="swiper-button-next nav-btn"></div>


      <div class="swiper-button-prev nav-btn"></div>


      <div class="swiper-pagination"></div>


    </div>


  </section>


  <!-- Swiper JS -->


  <script src="js/swiper-bundle.min.js"></script>


  <!-- JavaScript -->


  <script src="js/script.js"></script>


</body>


</html>

2. Style the Slider with CSS

Next, include your CSS code to add styles and ensure that the Testimonial Slider looks visually appealing:

/* Google Fonts - 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;


}


.container {


  height: 100vh;


  width: 100%;


  display: flex;


  align-items: center;


  justify-content: center;


  background-color: #e3f2fd;


}


.testimonial {


  position: relative;


  max-width: 900px;


  width: 100%;


  padding: 50px 0;


  overflow: hidden;


}


.testimonial .image {


  height: 170px;


  width: 170px;


  object-fit: cover;


  border-radius: 50%;


}


.testimonial .slide {


  display: flex;


  align-items: center;


  justify-content: center;


  flex-direction: column;


  row-gap: 30px;


  height: 100%;


  width: 100%;


}


.slide p {


  text-align: center;


  padding: 0 160px;


  font-size: 14px;


  font-weight: 400;


  color: #333;


}


.slide .quote-icon {


  font-size: 30px;


  color: #4070f4;


}


.slide .details {


  display: flex;


  flex-direction: column;


  align-items: center;


}


.details .name {


  font-size: 14px;


  font-weight: 600;


  color: #333;


}


.details .job {


  font-size: 12px;


  font-weight: 400;


  color: #333;


}


/* swiper button css */


.nav-btn {


  height: 40px;


  width: 40px;


  border-radius: 50%;


  transform: translateY(30px);


  background-color: rgba(0, 0, 0, 0.1);


  transition: 0.2s;


}


.nav-btn:hover {


  background-color: rgba(0, 0, 0, 0.2);


}


.nav-btn::after,


.nav-btn::before {


  font-size: 20px;


  color: #fff;


}


.swiper-pagination-bullet {


  background-color: rgba(0, 0, 0, 0.8);


}


.swiper-pagination-bullet-active {


  background-color: #4070f4;


}


@media screen and (max-width: 768px) {


  .slide p {


    padding: 0 20px;


  }


  .nav-btn {


    display: none;


  }

download : swiper-bundle.min.css

}

3. Implement Functionality with JavaScript

Finally, use JavaScript to add interactivity to your Testimonial Slider:



var swiper = new Swiper(".mySwiper", {


  slidesPerView: 1,


  grabCursor: true,


  loop: true,


  pagination: {


    el: ".swiper-pagination",


    clickable: true,


  },


  navigation: {


    nextEl: ".swiper-button-next",


    prevEl: ".swiper-button-prev",


  },



});

Demo of the Testimonial Slider

You can check out the demo of the Testimonial Slider to see how it functions. This hands-on experience will give you insight into the code and its behavior.

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

  1. 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.
  2. 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.
  3. 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.
  4. 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 Testimonial Slider is an engaging and practical project that enhances your web development skills. After following the steps outlined in this tutorial, you will have successfully built your own testimonial slider.

If you encounter difficulties during creation, use the button below to download the complete source code. This resource is available for free!

Essential Cookie Consent Box for HTML, CSS, and JavaScript Websites

Essential Cookie Consent Box for HTML, CSS, and JavaScript Websites

Hey all! In this blog, you’ll learn how to create a Cookie Consent Box using HTML, CSS, and JavaScript. I’ve also demonstrated how to detect an Internet Connection using JavaScript. I’ve also provided various JavaScript projects that may assist in your mission, so be sure to take a look! Cookies are small text documents with bits of data (usually no bigger than 4KB) stored by an internet server on a customer computer/browser to ensure a quality user experience at an online site. This blog demonstrates how you could set cookies into individual browsers as consent boxes through Javascript.

At first, an Internet webpage will have a cookie consent field, as shown in its preview image above. It contains an image, header text, a brief description, a button to accept cookies and a link for additional information about that cookie in this field. Even when refreshing pages, this cookie container will only reappear once you accept cookies through your browser.

Once you receive the cookie by clicking “I understand,” its container will disappear until you manually clear away it or it has not expired. If a website blocks cookies from being placed or this consent container cannot set any for your browser, an error alert container will display instead. By default, all consent containers set will automatically expire after one month, but this period can be increased or decreased according to your wishes.

You have seen in the video how I created a cookie consent box using HTML CSS & JavaScript to build its design layouts, while I used a bit of JavaScript codes to set cookies in consumer browsers. Even amateur programmers can easily make consent fields using our codes and take it further than ever! As is common these days, websites use cookies to provide relevant advertisements and records, so if you also run a website or endeavour, you could quickly implement this cookie field by making minor adjustments in its code. Please find this cookie consent box and its codes to set cookies to consumer browsers useful!

Learn How to Set Cookie Consent Box in a User Browser

To create the Cookie Consent Box, start by creating two files: an HTML File and a CSS File. When those are complete, simply paste their codes into your document—alternatively, you can download them using the button below!
Start creating an HTML document with the name index.Html and copy-pasting these codes. Be aware that documents with an extension HTML cannot be edited directly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cookie Constent Box</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <img src="#" alt="">
    <div>
      <header>Cookies Consent</header>
      <p>This website use cookies to ensure you get the best experience on our website.</p>
      <div>
        <button>I understand</button>
        <a href="#">Learn more</a>
      </div>
    </div>
  </div>
  <script>
    const cookieBox = document.querySelector(".wrapper"),
    acceptBtn = cookieBox.querySelector("button");
    acceptBtn.onclick = ()=>{
      //setting cookie for 1 month, after one month it'll be expired automatically
      document.cookie = "CookieBy=CodingNepal; max-age="+60*60*24*30;
      if(document.cookie){ //if cookie is set
        cookieBox.classList.add("hide"); //hide cookie box
      }else{ //if cookie not set then alert an error
        alert("Cookie can't be set! Please unblock this site from the cookie setting of your browser.");
      }
    }
    let checkCookie = document.cookie.indexOf("CookieBy=CodingNepal"); //checking our cookie
    //if cookie is set then hide the cookie box else show it
    checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide");
  </script>
</body>
</html>

Second, create a CSS report named favor. Css and paste the given code into it. Please remember to name it favor.Css for your report extension.

@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{
  background: #FCBA7F;
}
.wrapper{
  position: absolute;
  bottom: 30px;
  left: 30px;
  max-width: 365px;
  background: #fff;
  padding: 25px 25px 30px 25px;
  border-radius: 15px;
  box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.15);
  text-align: center;
}
.wrapper.hide{
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition: all 0.3s ease;
}
::selection{
  color: #fff;
  background: #FCBA7F;
}
.wrapper img{
  max-width: 90px;
}
.content header{
  font-size: 25px;
  font-weight: 600;
}
.content{
  margin-top: 10px;
}
.content p{
  color: #858585;
  margin: 5px 0 20px 0;
}
.content .buttons{
  display: flex;
  align-items: center;
  justify-content: center;
}
.buttons button{
  padding: 10px 20px;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
  background: #FCBA7F;
  cursor: pointer;
  transition: all 0.3s ease;
}
.buttons button:hover{
  transform: scale(0.97);
}
.buttons .item{
  margin: 0 10px;
}
.buttons a{
  color: #FCBA7F;
}
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

  1. 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.
  2. 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.
  3. 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.
  4. 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.

Assuming your code works correctly and no errors or trouble arises, download the source code files via the given download button. They are free zip files that must be extracted later.

Create A Glassmorphism Login Form in HTML and CSS

Create A Glassmorphism Login Form in HTML and CSS

As an amateur web developer, have you seen modern glass morphism effects on login bureaucracy, cards and various components on various websites? Have you considered designing your Login form with glass morphism effects?
Glassmorphism is an exciting consumer interface layout trend that creates the illusion of translucent and blurred glass surfaces, giving elements a semi-obvious appearance while making history and foreground combinations easy.
I will walk you through creating a Glassmorphism Login Form using HTML and CSS, including creating forms with glasslike effects and how to add floating-label animation.

Steps To Create Glassmorphism Login Form In HTML & CSS

  1. To create a Login Form with glass morphism effects and floating enter label animation using HTML and CSS, follow these easy instructions step-by-step:
  2. Create a folder. Feel free to name this folder whatever suits your needs, and then place your documents within it.
  3. Create an index.Html record; its file call must include “index” and its extension “.Html.”
  4. Create a Style.Css Document. The document name must include its extension (.Css).

Start by including the following HTML codes in your index.Html file. These contain essential HTML elements like documents, enter, hyperlinks and buttons – plus, for primary form validation purposes, I have also added a “required” feature to input fields.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism Login Form | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <form action="#">
      <h2>Login</h2>
        <div>
        <input type="text" required>
        <label>Enter your email</label>
      </div>
      <div>
        <input type="password" required>
        <label>Enter your password</label>
      </div>
      <div>
        <label for="remember">
          <input type="checkbox" id="remember">
          <p>Remember me</p>
        </label>
        <a href="#">Forgot password?</a>
      </div>
      <button type="submit">Log In</button>
      <div>
        <p>Don't have an account? <a href="#">Register</a></p>
      </div>
    </form>
  </div>
</body>
</html>

Add these CSS codes to your fashion.Css file to style our login form with a glass morphism effect and floating label animation. These lines of code contain various CSS properties, such as blur, background image, and history picture, to achieve the desired Glassmorphism effect.

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 0 10px;
}
body::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000;
  background-position: center;
  background-size: cover;
}
.wrapper {
  width: 400px;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
form {
  display: flex;
  flex-direction: column;
}
h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #fff;
}
.input-field {
  position: relative;
  border-bottom: 2px solid #ccc;
  margin: 15px 0;
}
.input-field label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #fff;
  font-size: 16px;
  pointer-events: none;
  transition: 0.15s ease;
}
.input-field input {
  width: 100%;
  height: 40px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: #fff;
}
.input-field input:focus~label,
.input-field input:valid~label {
  font-size: 0.8rem;
  top: 10px;
  transform: translateY(-120%);
}
.forget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 0 35px 0;
  color: #fff;
}
#remember {
  accent-color: #fff;
}
.forget label {
  display: flex;
  align-items: center;
}
.forget label p {
  margin-left: 8px;
}
.wrapper a {
  color: #efefef;
  text-decoration: none;
}
.wrapper a:hover {
  text-decoration: underline;
}
button {
  background: #fff;
  color: #000;
  font-weight: 600;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 16px;
  border: 2px solid transparent;
  transition: 0.3s ease;
}
button:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.15);
}
.register {
  text-align: center;
  margin-top: 30px;
  color: #fff;
}
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

  1. 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.
  2. 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.
  3. 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.
  4. 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 and Closing Words (optional)

Conclusion Ultimately, we covered step-by-step commands for setting up your project folder, developing HTML shape code, and including CSS patterns for the Glassmorphism effect and floating label animation. Following these instructions, you have successfully built your Glassmorphism Login Form.
Consider customizing and personalizing your login shape, adding personal touches that make it even more stunning. Why recreate some login form designs featured here to further stretch your HTML and CSS skills?
If you encounter difficulties creating your Glassmorphism login form, you can download the source code documents for this form project for free using the Download button. Alternatively, click View Live for a live demo demonstration.