Coder Abhi, Author at Creative Web Designer | UI/UX Specialist

Coder Abhi

Total Post: 38

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

HTML and CSS Javascript
0
0
10 min read

Build a Fully Functional Calculator with HTML, CSS, and js

Build a Fully Functional Calculator with HTML, CSS, and JS as one of the best exercises for web developers. This project combines logic, design, and functionality, making it a fantastic way to sharpen your skills. In this blog post, we’ll guide you step-by-step through creating a responsive calculator using HTML, CSS, and JavaScript. This calculator will not only handle basic functions like addition, subtraction, multiplication, and division, but also more advanced operations, offering a hands-on experience perfect for improving your web development abilities.

Whether you’re new to web development or looking to refine your JavaScript skills, building this fully functional calculator with HTML, CSS, and JS is the perfect project to practice. It’s an ideal way to understand how HTML, CSS, and JavaScript work together in harmony to create interactive user interfaces and responsive web applications. Start learning today and enhance your development toolkit!

Steps to Build a Fully Functional Calculator with HTML, CSS, and JavaScript

To create this working calculator, follow these step-by-step instructions. Each step involves writing and structuring your HTML, styling it with CSS, and adding JavaScript to handle the operations.

Create a Folder: Start by creating a new folder for your project. Inside this folder, you’ll create all the necessary files.
Create index.html File: This file will contain the basic structure and layout of your calculator. It will include input fields, buttons for numbers and operations, and display areas.
Create style.css File: The style.css file will give your calculator a clean, responsive design. Use CSS to arrange buttons and text fields, adjust fonts, and colors, and ensure the calculator looks great on desktop and mobile devices.
Create script.js File: The script.js file will contain the JavaScript logic to make your calculator functional. This is where you’ll define the actions for each button click and handle the calculations.

Key Features of the Calculator

Basic Arithmetic Operations: The calculator will be able to perform basic operations like addition, subtraction, multiplication, and division.
Responsive Design: Thanks to CSS, your calculator will be fully responsive, ensuring it looks great on any screen size, from mobile to desktop.
Input Validation: To ensure smooth operations, the calculator won’t allow you to click on operation buttons (e.g., plus, minus) before selecting numbers.
Detailed Code Structure

HTML Structure

Your index.html file will contain the essential structure for the calculator. It includes buttons for digits (0-9), operations (addition, subtraction, etc.), and a display area to show the input and result.


<!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>Calculator in HTML CSS & JavaScript</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <input type="text" class="display" />
      <div class="buttons">
        <button class="operator" data-value="AC">AC</button>
        <button class="operator" data-value="DEL">DEL</button>
        <button class="operator" data-value="%">%</button>
        <button class="operator" data-value="/">/</button>
        <button data-value="7">7</button>
        <button data-value="8">8</button>
        <button data-value="9">9</button>
        <button class="operator" data-value="*">*</button>
        <button data-value="4">4</button>
        <button data-value="5">5</button>
        <button data-value="6">6</button>
        <button class="operator" data-value="-">-</button>
        <button data-value="1">1</button>
        <button data-value="2">2</button>
        <button data-value="3">3</button>
        <button class="operator" data-value="+">+</button>
        <button data-value="0">0</button>
        <button data-value="00">00</button>
        <button data-value=".">.</button>
        <button class="operator" data-value="=">=</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS Styling

In your style.css, you’ll style the calculator layout, arranging the buttons in a grid format and making the design responsive. You can experiment with colors, fonts, and spacing to achieve the desired look.


/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@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: #e0e3eb;
}
.container {
  position: relative;
  max-width: 300px;
  width: 100%;
  border-radius: 12px;
  padding: 10px 20px 20px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
.display {
  height: 80px;
  width: 100%;
  outline: none;
  border: none;
  text-align: right;
  margin-bottom: 10px;
  font-size: 25px;
  color: #000e1a;
  pointer-events: none;
}
.buttons {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}
.buttons button {
  padding: 10px;
  border-radius: 6px;
  border: none;
  font-size: 20px;
  cursor: pointer;
  background-color: #eee;
}
.buttons button:active {
  transform: scale(0.99);
}
.operator {
  color: #2f9fff;
}

JavaScript Functionality

Your script.js file will manage the functionality of the calculator. JavaScript will listen to user input, perform the necessary calculations, and update the display. You’ll write functions that execute when the user clicks buttons, handle input validation, and ensure the calculator operates correctly.


const display = document.querySelector(".display");
const buttons = document.querySelectorAll("button");
const specialChars = ["%", "*", "/", "-", "+", "="];
let output = "";
//Define function to calculate based on button clicked.
const calculate = (btnValue) => {
  display.focus();
  if (btnValue === "=" && output !== "") {
    //If output has '%', replace with '/100' before evaluating.
    output = eval(output.replace("%", "/100"));
  } else if (btnValue === "AC") {
    output = "";
  } else if (btnValue === "DEL") {
    //If DEL button is clicked, remove the last character from the output.
    output = output.toString().slice(0, -1);
  } else {
    //If output is empty and button is specialChars then return
    if (output === "" && specialChars.includes(btnValue)) return;
    output += btnValue;
  }
  display.value = output;
};
//Add event listener to buttons, call calculate() on click.
buttons.forEach((button) => {
  //Button click listener calls calculate() with dataset value as argument.
  button.addEventListener("click", (e) => calculate(e.target.dataset.value));
});

Troubleshooting and Support

If you face any difficulties while creating the calculator, don’t worry! You can always download the full source code by clicking the “Download Source Code” button below. This will give you access to all the files and allow you to test the calculator directly in your browser.

Conclusion: Build Your Fully Functional Calculator

By following these steps, you can easily create a fully functional calculator application using web technologies like HTML, CSS, and JavaScript. This project not only enhances your web development skills but also provides valuable insights into creating interactive web applications.

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

To help you get started easily, you can download the complete source code for the calculator project by clicking the button below:

HTML and CSS
2
0
10 min read

Creating a Netflix-inspired login Page with HTML and CSS

The sleek and familiar design of Netflix’s login page is one of the most well-known on the web. Have you ever thought to recreate this eye-catching interface, then you’re in the right place. In this guide, I’ll show you how to build a Netflix-inspired login page using HTML and CSS. Whether you’re a beginner or an intermediate developer, this project will help you improve your front-end skills while mimickingthe modern, user-friendly design of Netflix.

Why Build a Netflix-inspired Login Page?

For developers, recreating real-world projects is a fantastic way to practice. The Netflix-inspired login page is more than just an ordinary sign-in form—it has a clean, responsive design that works seamlessly across devices. By building this, you’ll learn how to position elements, style forms, and make a page responsive, all while mimicking a global platform’s aesthetic.

Let’s jump into the step-by-step process of building a Netflix-inspired login page.

Steps to Create a Netflix-inspired Login Page in HTML and CSS

1. Create Your Project Folder: Create a folder for your project. Inside this folder, create two files:

index.html (for HTML structure)
style.css (for styling)

You can also create an “Images” folder to add the Netflix logo or background images to the project.

2. Build the HTML Structure: In the index.html file, you’ll use semantic HTML to create the layout. Add the necessary elements such as a navigation bar, heading, form, input fields for username and password, and a “Sign In” button. Here’s an example of how your HTML might look:


 
<!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>Netflix Login Page | Abhikesh Kumar</title>
 
    <link rel="stylesheet" href="style.css">
 
</head>
 
<body>
 
    <nav>
 
        <a href="#"><img src="images/logo.svg" alt="logo"></a>
 
    </nav>
 
    <div class="form-wrapper">
 
        <h2>Sign In</h2>
 
        <form action="#">
 
            <div class="form-control">
 
                <input type="text" required>
 
                <label>Email or phone number</label>
 
            </div>
 
            <div class="form-control">
 
                <input type="password" required>
 
                <label>Password</label>
 
            </div>
 
            <button type="submit">Sign In</button>
 
            <divclass="form-help">
 
                <div class="remember-me">
 
                    <input type="checkbox" id="remember-me">
 
                    <label for="remember-me">Remember me</label>
 
                </div>
 
                <a href="#">Need help?</a>
 
            </div>
 
        </form>
 
        <p>New to Netflix? <a href="#">Sign up now</a></p>
 
        <small>
 
            This page is protected by Google reCAPTCHA to ensure you're not a bot.
 
            <a href="#">Learn more.</a>
 
        </small>
 
    </div>
 
</body>
 
</html>

3. Style the Page with CSS: In your style.css file, style the elements to match Netflix’s minimalist look. You’ll focus on fonts, spacing, and responsiveness to ensure the page looks good on all devices. Here’s some basic CSS for the login page:


 
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap");
 
* {
 
    margin: 0;
 
    padding: 0;
 
    box-sizing: border-box;
 
    font-family: 'Roboto', sans-serif;
 
}
 
body {
 
    background: #000;
 
}
 
body::before {
 
    content: "";
 
    position: absolute;
 
    left: 0;
 
    top: 0;
 
    opacity: 0.5;
 
    width: 100%;
 
    height: 100%;
 
    background: url("images/hero-img.jpg");
 
    background-position: center;
 
}
 
nav {
 
    position: fixed;
 
    padding: 25px 60px;
 
    z-index: 1;
 
}
 
nav a img {
 
    width: 167px;
 
}
 
.form-wrapper {
 
    position: absolute;
 
    left: 50%;
 
    top: 50%;
 
    border-radius: 4px;
 
    padding: 70px;
 
    width: 450px;
 
    transform: translate(-50%, -50%);
 
    background: rgba(0, 0, 0, .75);
 
}
 
.form-wrapper h2 {
 
    color: #fff;
 
    font-size: 2rem;
 
}
 
.form-wrapper form {
 
    margin: 25px 0 65px;
 
}
 
form .form-control {
 
    height: 50px;
 
    position: relative;
 
    margin-bottom: 16px;
 
}
 
.form-control input {
 
    height: 100%;
 
    width: 100%;
 
    background: #333;
 
    border: none;
 
    outline: none;
 
    border-radius: 4px;
 
    color: #fff;
 
    font-size: 1rem;
 
    padding: 0 20px;
 
}
 
.form-control input:is(:focus, :valid) {
 
    background: #444;
 
    padding: 16px 20px 0;
 
}
 
.form-control label {
 
    position: absolute;
 
    left: 20px;
 
    top: 50%;
 
    transform: translateY(-50%);
 
    font-size: 1rem;
 
    pointer-events: none;
 
    color: #8c8c8c;
 
    transition: all 0.1s ease;
 
}
 
.form-control input:is(:focus, :valid)~label {
 
    font-size: 0.75rem;
 
    transform: translateY(-130%);
 
}
 
form button {
 
    width: 100%;
 
    padding: 16px 0;
 
    font-size: 1rem;
 
    background: #e50914;
 
    color: #fff;
 
    font-weight: 500;
 
    border-radius: 4px;
 
    border: none;
 
    outline: none;
 
    margin: 25px 0 10px;
 
    cursor: pointer;
 
    transition: 0.1s ease;
 
}
 
form button:hover {
 
    background: #c40812;
 
}
 
.form-wrapper a {
 
    text-decoration: none;
 
}
 
.form-wrapper a:hover {
 
    text-decoration: underline;
 
}
 
.form-wrapper :where(label, p, small, a) {
 
    color: #b3b3b3;
 
}
 
form .form-help {
 
    display: flex;
 
    justify-content: space-between;
 
}
 
form .remember-me {
 
    display: flex;
 
}
 
form .remember-me input {
 
    margin-right: 5px;
 
    accent-color: #b3b3b3;
 
}
 
form .form-help :where(label, a) {
 
    font-size: 0.9rem;
 
}
 
.form-wrapper p a {
 
    color: #fff;
 
}
 
.form-wrapper small {
 
    display: block;
 
    margin-top: 15px;
 
    color: #b3b3b3;
 
}
 
.form-wrapper small a {
 
    color: #0071eb;
 
}
 
@media (max-width: 740px) {
 
    body::before {
 
        display: none;
 
    }
 
    nav, .form-wrapper {
 
        padding: 20px;
 
    }
 
    nav a img {
 
        width: 140px;
 
    }
 
    .form-wrapper {
 
        width: 100%;
 
        top: 43%;
 
    }
 
    .form-wrapper form {
 
        margin: 25px 0 40px;
 
    }
 
}

Key Learning Points

Form Design: You’ll understand how to create a clean and user-friendly login form, focusing on accessibility and responsiveness.
CSS Flexbox: You’ll use Flexbox to center the form on the screen, making it responsive and ensuring it looks good on all devices.
Styling and Design: You’ll match the Netflix aesthetic, learning how to incorporate background images, colors, and minimalistic design elements that enhance the user experience.

Conclusion and Final Words

Building a Netflix-inspired login page using only HTML and CSS is a great project for both beginners and seasoned developers. It allows you to explore crucial aspects of web development like form creation, styling, and making responsive designs. Projects like this help hone your front-end development skills, improve your understanding of CSS, and build your portfolio.

Once you’ve mastered this, you can take it a step further by adding additional features like floating labels, password toggle options, or even basic JavaScript form validation to make your project more dynamic.

If you encounter any issues while building your Netflix login page, don’t worry! You can download the source code for this project by clicking the “Download” button below.

Download Source Code

Ready to get started? Click the button below to download the source code for the Netflix login page and start your project today.

HTML and CSS Javascript
2
0
20 min read

How to Build a Google Gemini Chatbot Using HTML, CSS, and Js

In today’s world, AI chatbots like Google Gemini and ChatGPT are changing how we interact with technology. They provide more human-like conversations and smarter responses. Have you ever thought about creating your own chatbot similar to Google Gemini? The good news is, that with HTML, CSS, and JavaScript, you can build a chatbot interface that mimics Gemini’s conversational style.

Google Gemini is a smart AI chatbot created by Google, much like ChatGPT. It uses artificial intelligence to generate natural, human-like responses, making interactions feel smoother and easier. While building an AI model like Google Gemini involves complex machine learning, you can create a simpler version of the chatbot interface using basic web development tools. This tutorial will show you how to build a fully functional chatbot interface with HTML, CSS, and JavaScript.

Why Build a Chatbot Interface?

Building a chatbot interface like Gemini provides valuable experience in web development, user interface (UI) design, and API integration. By following this tutorial, you’ll learn how to structure a dynamic chatbot layout, style it with CSS, and make it interactive with JavaScript.

Additionally, the chatbot we’ll create will support essential features like:

Sending and receiving messages
Toggling between light and dark themes
Saving chat history and user preferences in local storage

This project will help you level up your front-end development skills and give you a foundation for building more advanced web applications in the future.

Steps to Build a Google Gemini Chatbot Clone

Step 1: Setting Up Your Project Folder

To start, create a new folder for your project. You can name it something like gemini-chatbot. Inside this folder, you will need the following three files:

index.html – This will contain the HTML structure of your chatbot interface.
style.css – This file will handle the styling of the chatbot, giving it a sleek, responsive design.
script.js – Here, you’ll write the JavaScript code that makes the chatbot interactive.

You can also download and include images, such as logos or background graphics, to make the chatbot interface more appealing.

Step 2: Structuring the HTML (index.html)

The HTML file is responsible for the layout and structure of your chatbot. Start by creating the basic framework for your chatbot interface, which will include the following sections:

A header – This will display the chatbot name and theme toggle button (light/dark).
A chat area – This section will hold the conversation bubbles and display messages.
An input area – At the bottom of the page, you’ll have a text input box where users can type their messages and a button to send them.

Make sure to use semantic HTML tags for better accessibility and readability. Here you can understand the structure through this example in a simplified way:

 

<!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>Gemini Chatbot | Abhikesh Kumar</title>
  <!-- Linking Google Fonts For Icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">
    <!-- Header Greetings -->
    <h1 class="title">Hello, there</h1>
    <p class="subtitle">How can I help you today?</p>
    <!-- Suggestion list -->
    <ul class="suggestion-list">
      <li class="suggestion">
        <h4 class="text">Help me plan a game night with my 5 best friends for under $100.</h4>
        <span class="icon material-symbols-rounded">draw</span>
      </li>
      <li class="suggestion">
        <h4 class="text">What are the best tips to improve my public speaking skills?</h4>
        <span class="icon material-symbols-rounded">lightbulb</span>
      </li>
      <li class="suggestion">
        <h4 class="text">Can you help me find the latest news on web development?</h4>
        <span class="icon material-symbols-rounded">explore</span>
      </li>
      <li class="suggestion">
        <h4 class="text">Write JavaScript code to sum all elements in an array.</h4>
        <span class="icon material-symbols-rounded">code</span>
      </li>
    </ul>
  </header>
  <!-- Chat List / Container -->
  <div class="chat-list"></div>
  <!-- Typing Area -->
  <div class="typing-area">
    <form action="#" class="typing-form">
      <div class="input-wrapper">
        <input type="text" placeholder="Enter a prompt here" class="typing-input" required />
        <button id="send-message-button" class="icon material-symbols-rounded">send</button>
      </div>
      <div class="action-buttons">
        <span id="theme-toggle-button" class="icon material-symbols-rounded">light_mode</span>
        <span id="delete-chat-button" class="icon material-symbols-rounded">delete</span>
      </div>
    </form>
    <p class="disclaimer-text">
      Gemini may display inaccurate info, including about people, so double-check its responses.
    </p>
  </div>
  <script src="script.js"></script>
</body>
</html>

Step 3: Styling with CSS (style.css)

Now that your HTML structure is ready, it’s time to make it visually appealing with CSS. The style file will control the layout, colors, font styles, and responsiveness of your chatbot.

Focus on creating a minimalist and modern look, similar to Google’s Gemini chatbot. You can add a light and dark theme toggle by using CSS variables for colors and switching them based on the user’s selection.

For example

 

/* 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 mode colors */
  --text-color: #E3E3E3;
  --subheading-color: #828282;
  --placeholder-color: #A6A6A6;
  --primary-color: #242424;
  --secondary-color: #383838;
  --secondary-hover-color: #444;
}
.light_mode {
  /* Light mode colors */
  --text-color: #222;
  --subheading-color: #A0A0A0;
  --placeholder-color: #6C6C6C;
  --primary-color: #FFF;
  --secondary-color: #E9EEF6;
  --secondary-hover-color: #DBE1EA;
}
body {
  background: var(--primary-color);
}
.header, .chat-list .message, .typing-form {
  margin: 0 auto;
  max-width: 980px;
}
.header {
  margin-top: 6vh;
  padding: 1rem;
  overflow-x: hidden;
}
body.hide-header .header {
  margin: 0;
  display: none;
}
.header :where(.title, .subtitle) {
  color: var(--text-color);
  font-weight: 500;
  line-height: 4rem;
}
.header .title {
  width: fit-content;
  font-size: 3rem;
  background-clip: text;
  background: linear-gradient(to right, #4285f4, #d96570);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header .subtitle {
  font-size: 2.6rem;
  color: var(--subheading-color);
}
.suggestion-list {
  width: 100%;
  list-style: none;
  display: flex;
  gap: 1.25rem;
  margin-top: 9.5vh;
  overflow: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.suggestion-list .suggestion {
  cursor: pointer;
  padding: 1.25rem;
  width: 222px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border-radius: 0.75rem;
  justify-content: space-between;
  background: var(--secondary-color);
  transition: 0.2s ease;
}
.suggestion-list .suggestion:hover {
  background: var(--secondary-hover-color);
}
.suggestion-list .suggestion :where(.text, .icon) {
  font-weight: 400;
  color: var(--text-color);
}
.suggestion-list .suggestion .icon {
  width: 42px;
  height: 42px;
  display: flex;
  font-size: 1.3rem;
  margin-top: 2.5rem;
  align-self: flex-end;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  color: var(--text-color);
  background: var(--primary-color);
}
.chat-list {
  padding: 2rem 1rem 12rem;
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-color: #999 transparent;
}
.chat-list .message.incoming {
  margin-top: 1.5rem;
}
.chat-list .message .message-content {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  align-items: center;
}
.chat-list .message .text {
  color: var(--text-color);
  white-space: pre-wrap;
}
.chat-list .message.error .text {
  color: #e55865;
}
.chat-list .message.loading .text {
  display: none;
}
.chat-list .message .avatar {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  align-self: flex-start;
}
.chat-list .message.loading .avatar {
  animation: rotate 3s linear infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.chat-list .message .icon {
  color: var(--text-color);
  cursor: pointer;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  font-size: 1.25rem;
  margin-left: 3.5rem;
  visibility: hidden;
}
.chat-list .message .icon.hide {
  visibility: hidden;
}
.chat-list .message:not(.loading, .error):hover .icon:not(.hide){
  visibility: visible;
}
.chat-list .message .icon:hover {
  background: var(--secondary-hover-color);
}
.chat-list .message .loading-indicator {
  display: none;
  gap: 0.8rem;
  width: 100%;
  flex-direction: column;
}
.chat-list .message.loading .loading-indicator {
  display: flex;
}
.chat-list .message .loading-indicator .loading-bar {
  height: 11px;
  width: 100%;
  border-radius: 0.135rem;
  background-position: -800px 0;
  background: linear-gradient(to right, #4285f4, var(--primary-color), #4285f4);
  animation: loading 3s linear infinite;
}
.chat-list .message .loading-indicator .loading-bar:last-child {
  width: 70%;
}
@keyframes loading {
  0% {
    background-position: -800px 0;
  }
  100% {
    background-position: 800px 0;
  }
}
.typing-area {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 1rem;
  background: var(--primary-color);
}
.typing-area :where(.typing-form, .action-buttons) {
  display: flex;
  gap: 0.75rem;
}
.typing-form .input-wrapper {
  width: 100%;
  height: 56px;
  display: flex;
  position: relative;
}
.typing-form .typing-input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font-size: 1rem;
  color: var(--text-color);
  padding: 1.1rem 4rem 1.1rem 1.5rem;
  border-radius: 100px;
  background: var(--secondary-color);
}
.typing-form .typing-input:focus {
  background: var(--secondary-hover-color);
}
.typing-form .typing-input::placeholder {
  color: var(--placeholder-color);
}
.typing-area .icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  font-size: 1.4rem;
  color: var(--text-color);
  align-items: center;
  justify-content: center;
  background: var(--secondary-color);
  transition: 0.2s ease;
}
.typing-area .icon:hover {
  background: var(--secondary-hover-color);
}
.typing-form #send-message-button {
  position: absolute;
  right: 0;
  outline: none;
  border: none;
  transform: scale(0);
  background: transparent;
  transition: transform 0.2s ease;
}
.typing-form .typing-input:valid ~ #send-message-button {
  transform: scale(1);
}
.typing-area .disclaimer-text {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 1rem;
  color: var(--placeholder-color);
}
/* Responsive media query code for small screen */
@media (max-width: 768px) {
  .header :is(.title, .subtitle) {
    font-size: 2rem;
    line-height: 2.6rem;
  }
  .header .subtitle {
    font-size: 1.7rem;
  }
  .typing-area :where(.typing-form, .action-buttons) {
    gap: 0.4rem;
  }
  .typing-form .input-wrapper {
    height: 50px;
  }
  .typing-form .typing-input {
    padding: 1.1rem 3.5rem 1.1rem 1.2rem;
  }
  .typing-area .icon {
    height: 50px;
    width: 50px;
  }
  .typing-area .disclaimer-text {
    font-size: 0.75rem;
    margin-top: 0.5rem;
  }
}

Step 4: Adding Interactivity with JavaScript (script.js)

The final step is adding interactivity using JavaScript. This involves sending messages, toggling between themes, and storing chat history in the browser’s local storage.

Your chatbot will need functions to:

Send messages – Capture the text from the input field and display it in the chat area.
Toggle themes – Switch between light and dark themes by adding/removing the dark-theme class.
Store chat history – Save the chat history in local Storage so it persists even after a page refresh.

Here’s a basic implementation of these features in JavaScript:

 

const typingForm = document.querySelector(".typing-form");
const chatContainer = document.querySelector(".chat-list");
const suggestions = document.querySelectorAll(".suggestion");
const toggleThemeButton = document.querySelector("#theme-toggle-button");
const deleteChatButton = document.querySelector("#delete-chat-button");
// State variables
let userMessage = null;
let isResponseGenerating = false;
// API configuration
const API_KEY = "PASTE-YOUR-API-KEY"; // Your API key here
const API_URL = `https://generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent?key=${API_KEY}`;
// Load theme and chat data from local storage on page load
const loadDataFromLocalstorage = () => {
  const savedChats = localStorage.getItem("saved-chats");
  const isLightMode = (localStorage.getItem("themeColor") === "light_mode");
  // Apply the stored theme
  document.body.classList.toggle("light_mode", isLightMode);
  toggleThemeButton.innerText = isLightMode ? "dark_mode" : "light_mode";
  // Restore saved chats or clear the chat container
  chatContainer.innerHTML = savedChats || '';
  document.body.classList.toggle("hide-header", savedChats);
  chatContainer.scrollTo(0, chatContainer.scrollHeight); // Scroll to the bottom
}
// Create a new message element and return it
const createMessageElement = (content, ...classes) => {
  const div = document.createElement("div");
  div.classList.add("message", ...classes);
  div.innerHTML = content;
  return div;
}
// Show typing effect by displaying words one by one
const showTypingEffect = (text, textElement, incomingMessageDiv) => {
  const words = text.split(' ');
  let currentWordIndex = 0;
  const typingInterval = setInterval(() => {
    // Append each word to the text element with a space
    textElement.innerText += (currentWordIndex === 0 ? '' : ' ') + words[currentWordIndex++];
    incomingMessageDiv.querySelector(".icon").classList.add("hide");
    // If all words are displayed
    if (currentWordIndex === words.length) {
      clearInterval(typingInterval);
      isResponseGenerating = false;
      incomingMessageDiv.querySelector(".icon").classList.remove("hide");
      localStorage.setItem("saved-chats", chatContainer.innerHTML); // Save chats to local storage
    }
    chatContainer.scrollTo(0, chatContainer.scrollHeight); // Scroll to the bottom
  }, 75);
}
// Fetch response from the API based on user message
const generateAPIResponse = async (incomingMessageDiv) => {
  const textElement = incomingMessageDiv.querySelector(".text"); // Getting text element
  try {
    // Send a POST request to the API with the user's message
    const response = await fetch(API_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        contents: [{
          role: "user",
          parts: [{ text: userMessage }]
        }]
      }),
    });
    const data = await response.json();
    if (!response.ok) throw new Error(data.error.message);
    // Get the API response text and remove asterisks from it
    const apiResponse = data?.candidates[0].content.parts[0].text.replace(/\*\*(.*?)\*\*/g, '$1');
    showTypingEffect(apiResponse, textElement, incomingMessageDiv); // Show typing effect
  } catch (error) { // Handle error
    isResponseGenerating = false;
    textElement.innerText = error.message;
    textElement.parentElement.closest(".message").classList.add("error");
  } finally {
    incomingMessageDiv.classList.remove("loading");
  }
}
// Show a loading animation while waiting for the API response
const showLoadingAnimation = () => {
  const html = `<div class="message-content">
                  <img class="avatar" src="images/gemini.svg" alt="Gemini avatar">
                  <p class="text"></p>
                  <div class="loading-indicator">
                    <div class="loading-bar"></div>
                    <div class="loading-bar"></div>
                    <div class="loading-bar"></div>
                  </div>
                </div>
                <span onClick="copyMessage(this)" class="icon material-symbols-rounded">content_copy</span>`;
  const incomingMessageDiv = createMessageElement(html, "incoming", "loading");
  chatContainer.appendChild(incomingMessageDiv);
  chatContainer.scrollTo(0, chatContainer.scrollHeight); // Scroll to the bottom
  generateAPIResponse(incomingMessageDiv);
}
// Copy message text to the clipboard
const copyMessage = (copyButton) => {
  const messageText = copyButton.parentElement.querySelector(".text").innerText;
  navigator.clipboard.writeText(messageText);
  copyButton.innerText = "done"; // Show confirmation icon
  setTimeout(() => copyButton.innerText = "content_copy", 1000); // Revert icon after 1 second
}
// Handle sending outgoing chat messages
const handleOutgoingChat = () => {
  userMessage = typingForm.querySelector(".typing-input").value.trim() || userMessage;
  if(!userMessage || isResponseGenerating) return; // Exit if there is no message or response is generating
  isResponseGenerating = true;
  const html = `<div class="message-content">
                  <img class="avatar" src="images/user.jpg" alt="User avatar">
                  <p class="text"></p>
                </div>`;
  const outgoingMessageDiv = createMessageElement(html, "outgoing");
  outgoingMessageDiv.querySelector(".text").innerText = userMessage;
  chatContainer.appendChild(outgoingMessageDiv);

  typingForm.reset(); // Clear input field
  document.body.classList.add("hide-header");
  chatContainer.scrollTo(0, chatContainer.scrollHeight); // Scroll to the bottom
  setTimeout(showLoadingAnimation, 500); // Show loading animation after a delay
}
// Toggle between light and dark themes
toggleThemeButton.addEventListener("click", () => {
  const isLightMode = document.body.classList.toggle("light_mode");
  localStorage.setItem("themeColor", isLightMode ? "light_mode" : "dark_mode");
  toggleThemeButton.innerText = isLightMode ? "dark_mode" : "light_mode";
});
// Delete all chats from local storage when button is clicked
deleteChatButton.addEventListener("click", () => {
  if (confirm("Are you sure you want to delete all the chats?")) {
    localStorage.removeItem("saved-chats");
    loadDataFromLocalstorage();
  }
});
// Set userMessage and handle outgoing chat when a suggestion is clicked
suggestions.forEach(suggestion => {
  suggestion.addEventListener("click", () => {
    userMessage = suggestion.querySelector(".text").innerText;
    handleOutgoingChat();
  });
});
// Prevent default form submission and handle outgoing chat
typingForm.addEventListener("submit", (e) => {
  e.preventDefault();
  handleOutgoingChat();
});
loadDataFromLocalstorage();

Conclusion and Final Words

You’ve successfully built a Google Gemini chatbot interface using HTML, CSS, and JavaScript. This project is an excellent way to sharpen your front-end development skills, as it incorporates responsive design, theme switching, and local storage management. You’ve also learned the process of creating an interactive web application that mimics real-world chatbots.

This chatbot interface can be further enhanced by integrating an AI-powered API to generate intelligent responses, just like the actual Google Gemini chatbot.

If you encounter any challenges while building your chatbot or need further assistance, feel free to download the source code files for this project by clicking the “Download” button below.

HTML and CSS
0
0
9 min read

Create a Button Ripple Animation in HTML, CSS, and Js

In today’s web development world, enhancing user experience with subtle animations can make a big difference. One popular interactive effect is the Button Ripple Animation, which provides immediate feedback to users when they click on a button. This tutorial will walk you through creating a smooth ripple animation using HTML, CSS, and JavaScript. Whether new to web development or looking to polish your existing skills, this tutorial will help you build a polished, professional-looking button animation.

Why Button Ripple Animation?

Button ripple animations create a visual confirmation that a button has been clicked. This effect starts from the point where the user clicks and expands outward like a ripple, making the interface feel more responsive and interactive. It’s a common technique used in material design and across modern websites and applications.

In this post, we’ll:

Explore the steps to create a Button Ripple Animation from scratch.
Walk through the HTML, CSS, and JavaScript code to build this animation.
Provide the full source code at the end for easy download.

Let’s dive into how you can create this eye-catching effect.

Understanding the Button Ripple Animation

When a button is clicked, a ripple effect appears starting from the point of the click and expands outward. This effect is created using a combination of CSS animations and JavaScript for interaction. In essence, a hidden element (a circle or “ripple”) is dynamically added to the button when it’s clicked, and its size and position are adjusted based on where the user clicked.

Key Benefits of Adding Ripple Animations:

User Feedback: Provides visual feedback, improving user experience.
Modern Look: Adds a contemporary, sleek feel to your buttons.
Enhanced Interaction: This makes your interface feel more responsive and interactive.

Step-by-Step: Building the Button Ripple Animation

Follow the steps below to build your button ripple effect:

1. Setting Up the Project Files

First, create a folder for your project, and inside the folder, create two files:

index.html: The main HTML file.
style.css: The stylesheet for styling the button and animation.

2. Writing the HTML Code

In the index.html file, create the basic structure of the webpage and the button that will display the ripple effect. Here’s the HTML code:


<!DOCTYPE html>
<!-- Coding By Abhikesh - abhikesh.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Button Ripple Effect | CodingLab </title>
    <link rel="stylesheet" href="style.css">
   </head>
<body>
  <div class="buttons">
    <a class="button"href="#">Button</a>
    <a class="button two" href="#">Button</a>
  </div>
  <script>
  // Ripple Effect JavaScript Code
  let buttons = document.querySelectorAll(".button");
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", (e)=>{
      e.preventDefault(); // preventing form submitting
      let overlay = document.createElement('span'); //creating a tag(span)
      overlay.classList.add("overlay"); //adding a class inside the span
      e.target.appendChild(overlay); //adding overlay tag inside the anchor tag at in HTML
      let xValue = e.clientX - e.target.offsetLeft; //by this we get perfect value where we will click
      let yValue = e.clientY - e.target.offsetTop; //by this we get perfect value where we will click
       overlay.style.left = xValue + "px"; //changing the position of the overlay according to our clicks on the button
       overlay.style.top = yValue + "px"; //changing the position of the overlay according to our clicks on the button
  });
  }
  </script>
</body>
</html>

In this HTML structure, we have a simple button that will trigger the ripple animation upon being clicked. We’re also using a bit of JavaScript to calculate the position of the click.

3. Writing the CSS Code

Now, move on to the style.css file to style the button and create the ripple animation. Below is the CSS code to make the button look good and animate the ripple:

/* 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{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #350048;
}
.buttons .button{
  position: relative;
  display: inline-block;
  color: #fff;
  padding: 12px 38px;
  background: linear-gradient(90deg, #6616d0, #ac34e7);
  border-radius: 45px;
  margin: 10px;
  font-size: 30px;
  font-weight: 400;
  text-decoration: none;
  box-shadow: 3px 5px rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0,0,0,0.1);
  overflow: hidden;
}
.buttons .button.two{
  background: linear-gradient(90deg, #025ce3, #4e94fd);
}
.buttons .button .overlay{
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  animation: blink 0.5s linear;
}
@keyframes blink {
  0%{
    height: 0px;
    width: 0px;
    opacity: 0.3;
  }
  100%{
    height: 400px;
    width: 400px;
    opacity: 0;
  }
}

In this CSS code:

.ripple-button: This class styles the button with padding, and a gradient background, and removes any borders.
.ripple: This class defines the animated ripple effect that appears when the button is clicked. The ripple expands using a scaling animation (transform: scale()).
@keyframes ripple-effect: This keyframe defines the animation for the ripple, which scales it up and fades it

JavaScript Explanation

In the script block within the HTML, we add a click event listener to each button. When the button is clicked, a new span element (representing the ripple) is created and positioned at the exact point where the user clicked. The ripple class is applied to animate the effect, and after the animation is complete (600ms), the ripple element is removed from the DOM to prevent clutter.

Additional Tips and Customizations

Customizing Colors: You can easily adjust the gradient background of the button or the color of the ripple effect to match your website’s theme.
Animation Duration: If you want the ripple to last longer, simply increase the animation duration in the CSS.
Button Sizes: The button can be resized or given different styles like rounded corners or shadows to suit your design needs.

Conclusion

Creating a Button Ripple Animation using HTML, CSS, and JavaScript is a fun and straightforward way to enhance the interactivity of your website. This animation is widely used across modern websites and apps, adding a professional touch to any interface.

By following this tutorial, you’ll not only create a beautiful ripple animation but also deepen your understanding of CSS animations and JavaScript DOM manipulation. The flexibility of this technique allows you to easily customize it for different styles and effects.

Download the Source Code
If you want to experiment further or need a quick start, you can download the complete source code for this button ripple animation. Click the button below to download all the files:

HTML and CSS
1
0
34 min read

How to Create a Responsive Coffee Website in HTML CSS & Js

Creating a responsive coffee website in HTML, CSS, and JavaScript is a rewarding and creative journey, especially for those new to web development. This project allows you to dive into essential coding skills while building a professional and stylish site to showcase your work.

In this blog post, we’ll guide you through constructing a fully responsive, coffee-themed website using only HTML, CSS, and JavaScript. The site will feature key sections such as Home, About, Menu, Testimonials, Gallery, Contact, and a Footer. It will not only be visually appealing but also function seamlessly across all devices, from mobile to desktop.

One standout feature we’ll implement is a slider for the Testimonials section, adding a dynamic touch to customer reviews. We’ll also include a hamburger menu on mobile devices to enhance navigation.

This project is perfect for beginners in web development looking to sharpen their front-end coding skills. Let’s get started!

Key Sections of the Coffee Website

Here’s a breakdown of the sections you’ll be creating for your responsive coffee website:

Hero Section: The homepage welcoming visitors with an eye-catching introduction to your coffee shop and navigation menu.
About Section: Share your coffee shop’s history, values, and mission.
Menu Section: Display the coffee and food options available, enticing your visitors with your offerings.
Testimonials Section: A slider showcasing customer reviews, adding credibility to your coffee shop.
Gallery Section: Feature images of your coffee shop’s ambiance and delicious offerings.
Contact Section: Include a form or contact details for visitors to get in touch with you easily.
Footer Section: Provide additional information like social media links and extra navigation options.

Steps to Create a Responsive Coffee Website
Follow these steps to create a responsive coffee website using HTML, CSS, and JavaScript:

1. Set up your project folder: Create a folder for your website, naming it something like coffee-website.

2. Create the necessary files: Inside your project folder, create the following files:

index.html: Your main HTML file.
style.css: Your CSS file for styling.
script.js: Your JavaScript file for interactivity.

3. Download images: Add an “Images” folder to your project directory, containing all the necessary photos for your website.

4. Write the HTML code: Begin by adding the necessary HTML structure to your index.html file. Use semantic HTML tags like <header>, <nav>, <ul>, <li>, <a>, <section>, and <footer> to create a clean and structured layout.



 
<!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>Coffee Website | abhikesh</title>
 
    <!-- Linking Font Awesome for icons -->
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
 
    <!-- Linking Swiper CSS -->
 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
 
    <link rel="stylesheet" href="style.css" />
 
  </head>
 
  <body>
 
    <!-- Header / Navbar -->
 
    <header>
 
      <nav class="navbar">
 
        <a href="#" class="nav-logo">
 
          <h2 class="logo-text">☕ Coffee</h2>
 
        </a>
 
        <ul class="nav-menu">
 
          <button id="menu-close-button" class="fas fa-times"></button>
 
          <li class="nav-item">
 
            <a href="#" class="nav-link">Home</a>
 
          </li>
 
          <li class="nav-item">
 
            <a href="#about" class="nav-link">About</a>
 
          </li>
 
          <li class="nav-item">
 
            <a href="#menu" class="nav-link">Menu</a>
 
          </li>
 
          <li class="nav-item">
 
            <a href="#testimonials" class="nav-link">Testimonials</a>
 
          </li>
 
          <li class="nav-item">
 
            <a href="#gallery" class="nav-link">Gallery</a>
 
          </li>
 
          <li class="nav-item">
 
            <a href="#contact" class="nav-link">Contact</a>
 
          </li>
 
        </ul>
 
        <button id="menu-open-button" class="fas fa-bars"></button>
 
      </nav>
 
    </header>
 
    <main>
 
      <!-- Hero section -->
 
      <section class="hero-section">
 
        <div class="section-content">
 
          <div class="hero-details">
 
            <h2 class="title">Best Coffee</h2>
 
            <h3 class="subtitle">Make your day great with our special coffee!</h3>
 
            <p class="description">Welcome to our coffee paradise, where every bean tells a story and every cup sparks joy.</p>
 
            <div class="buttons">
 
              <a href="#" class="button order-now">Order Now</a>
 
              <a href="#contact" class="button contact-us">Contact Us</a>
 
            </div>
 
          </div>
 
          <div class="hero-image-wrapper">
 
            <img src="images/coffee-hero-section.png" alt="Coffee" class="hero-image" />
 
          </div>
 
        </div>
 
      </section>
 
      <!-- About section -->
 
      <section class="about-section" id="about">
 
        <div class="section-content">
 
          <div class="about-image-wrapper">
 
            <img src="images/about-image.jpg" alt="About" class="about-image" />
 
          </div>
 
          <div class="about-details">
 
            <h2 class="section-title">About Us</h2>
 
            <p class="text">At Coffee House in Berndorf, Germany, we pride ourselves on being a go-to destination for coffee lovers and conversation seekers alike. We're dedicated to providing an exceptional coffee experience in a cozy and inviting atmosphere, where guests can relax, unwind, and enjoy their time in comfort.</p>
 
            <div class="social-link-list">
 
              <a href="#" class="social-link"><i class="fa-brands fa-facebook"></i></a>
 
              <a href="#" class="social-link"><i class="fa-brands fa-instagram"></i></a>
 
              <a href="#" class="social-link"><i class="fa-brands fa-x-twitter"></i></a>
 
            </div>
 
          </div>
 
        </div>
 
      </section>
 
      <!-- Menu section -->
 
      <section class="menu-section" id="menu">
 
        <h2 class="section-title">Our Menu</h2>
 
        <div class="section-content">
 
          <ul class="menu-list">
 
            <li class="menu-item">
 
              <img src="images/hot-beverages.png" alt="Hot Beverages" class="menu-image" />
 
              <div class="menu-details">
 
                <h3 class="name">Hot Beverages</h3>
 
                <p class="text">Wide range of Steaming hot coffee to make you fresh and light.</p>
 
              </div>
 
            </li>
 
            <li class="menu-item">
 
              <img src="images/cold-beverages.png" alt="Cold Beverages" class="menu-image" />
 
              <div class="menu-details">
 
                <h3 class="name">Cold Beverages</h3>
 
                <p class="text">Creamy and frothy cold coffee to make you cool.</p>
 
              </div>
 
            </li>
 
            <li class="menu-item">
 
              <img src="images/refreshment.png" alt="Refreshment" class="menu-image" />
 
              <div class="menu-details">
 
                <h3 class="name">Refreshment</h3>
 
                <p class="text">Fruit and icy refreshing drink to make feel refresh.</p>
 
              </div>
 
            </li>
 
            <li class="menu-item">
 
              <img src="images/special-combo.png" alt="Special Combos" class="menu-image" />
 
              <div class="menu-details">
 
                <h3 class="name">Special Combos</h3>
 
                <p class="text">Your favorite eating and drinking combations.</p>
 
              </div>
 
            </li>
 
            <li class="menu-item">
 
              <img src="images/desserts.png" alt="Dessert" class="menu-image" />
 
              <div class="menu-details">
 
                <h3 class="name">Dessert</h3>
 
                <p class="text">Satiate your palate and take you on a culinary treat.</p>
 
              </div>
 
            </li>
 
            <li class="menu-item">
 
              <img src="images/burger-frenchfries.png" alt="burger & French Fries" class="menu-image" />
 
              <div class="menu-details">
 
                <h3 class="name">Burger & French Fries</h3>
 
                <p class="text">Quick bites to satisfy your small size hunger.</p>
 
              </div>
 
            </li>
 
          </ul>
 
        </div>
 
      </section>
 
      <!-- Testimonials section -->
 
      <section class="testimonials-section" id="testimonials">
 
        <h2 class="section-title">Testimonials</h2>
 
        <div class="section-content">
 
          <div class="slider-container swiper">
 
            <div class="slider-wrapper">
 
              <ul class="testimonials-list swiper-wrapper">
 
                <li class="testimonial swiper-slide">
 
                  <img src="images/user-1.jpg" alt="User" class="user-image" />
 
                  <h3 class="name">Sarah Johnson</h3>
 
                  <i class="feedback">"Loved the French roast. Perfectly balanced and rich. Will order again!"</i>
 
                </li>
 
                <li class="testimonial swiper-slide">
 
                  <img src="images/user-2.jpg" alt="User" class="user-image" />
 
                  <h3 class="name">James Wilson</h3>
 
                  <i class="feedback">"Great espresso blend! Smooth and bold flavor. Fast shipping too!"</i>
 
                </li>
 
                <li class="testimonial swiper-slide">
 
                  <img src="images/user-3.jpg" alt="User" class="user-image" />
 
                  <h3 class="name">Michael Brown</h3>
 
                  <i class="feedback">"Fantastic mocha flavor. Fresh and aromatic. Quick shipping!"</i>
 
                </li>
 
                <li class="testimonial swiper-slide">
 
                  <img src="images/user-4.jpg" alt="User" class="user-image" />
 
                  <h3 class="name">Emily Harris</h3>
 
                  <i class="feedback">"Excellent quality! Fresh beans and quick delivery. Highly recommend."</i>
 
                </li>
 
                <li class="testimonial swiper-slide">
 
                  <img src="images/user-5.jpg" alt="User" class="user-image" />
 
                  <h3 class="name">Anthony Thompson</h3>
 
                  <i class="feedback">"Best decaf I've tried! Smooth and flavorful. Arrived promptly."</i>
 
                </li>
 
              </ul>
 
              <div class="swiper-pagination"></div>
 
              <div class="swiper-slide-button swiper-button-prev"></div>
 
              <div class="swiper-slide-button swiper-button-next"></div>
 
            </div>
 
          </div>
 
        </div>
 
      </section>
 
      <!-- Gallery section -->
 
      <section class="gallery-section" id="gallery">
 
        <h2 class="section-title">Gallery</h2>
 
        <div class="section-content">
 
          <ul class="gallery-list">
 
            <li class="gallery-item">
 
              <img src="images/gallery-1.jpg" alt="Gallery Image" class="gallery-image" />
 
            </li>
 
            <li class="gallery-item">
 
              <img src="images/gallery-2.jpg" alt="Gallery Image" class="gallery-image" />
 
            </li>
 
            <li class="gallery-item">
 
              <img src="images/gallery-3.jpg" alt="Gallery Image" class="gallery-image" />
 
            </li>
 
            <li class="gallery-item">
 
              <img src="images/gallery-4.jpg" alt="Gallery Image" class="gallery-image" />
 
            </li>
 
            <li class="gallery-item">
 
              <img src="images/gallery-5.jpg" alt="Gallery Image" class="gallery-image" />
 
            </li>
 
            <li class="gallery-item">
 
              <img src="images/gallery-6.jpg" alt="Gallery Image" class="gallery-image" />
 
            </li>
 
          </ul>
 
        </div>
 
      </section>
 
      <!-- Contact section -->
 
      <section class="contact-section" id="contact">
 
        <h2 class="section-title">Contact Us</h2>
 
        <div class="section-content">
 
          <ul class="contact-info-list">
 
            <li class="contact-info">
 
              <i class="fa-solid fa-location-crosshairs"></i>
 
              <p>123 Campsite Avenue, Wilderness, CA 98765</p>
 
            </li>
 
            <li class="contact-info">
 
              <i class="fa-regular fa-envelope"></i>
 
              <p>[email protected]</p>
 
            </li>
 
            <li class="contact-info">
 
              <i class="fa-solid fa-phone"></i>
 
              <p>(123) 456-78909</p>
 
            </li>
 
            <li class="contact-info">
 
              <i class="fa-regular fa-clock"></i>
 
              <p>Monday - Friday: 9:00 AM - 5:00 PM</p>
 
            </li>
 
            <li class="contact-info">
 
              <i class="fa-regular fa-clock"></i>
 
              <p>Saturday: 10:00 AM - 3:00 PM</p>
 
            </li>
 
            <li class="contact-info">
 
              <i class="fa-regular fa-clock"></i>
 
              <p>Sunday: Closed</p>
 
            </li>
 
            <li class="contact-info">
 
              <i class="fa-solid fa-globe"></i>
 
              <p>www.abhikesh.com</p>
 
            </li>
 
          </ul>
 
          <form action="#" class="contact-form">
 
            <input type="text" placeholder="Your name" class="form-input" required />
 
            <input type="email" placeholder="Your email" class="form-input" required />
 
            <textarea placeholder="Your message" class="form-input" required></textarea>
 
            <button type="submit" class="button submit-button">Submit</button>
 
          </form>
 
        </div>
 
      </section>
 
      <!-- Footer section -->
 
      <footer class="footer-section">
 
        <div class="section-content">
 
          <p class="copyright-text">© 2024 Coffee Shop</p>
 
          <div class="social-link-list">
 
            <a href="#" class="social-link"><i class="fa-brands fa-facebook"></i></a>
 
            <a href="#" class="social-link"><i class="fa-brands fa-instagram"></i></a>
 
            <a href="#" class="social-link"><i class="fa-brands fa-x-twitter"></i></a>
 
          </div>
 
          <p class="policy-text">
 
            <a href="#" class="policy-link">Privacy policy</a>
 
            <span class="separator">•</span>
 
            <a href="#" class="policy-link">Refund policy</a>
 
          </p>
 
        </div>
 
      </footer>
 
    </main>
 
    <!-- Linking Swiper script -->
 
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 
    <!-- Linking custom script -->
 
    <script src="script.js"></script>
 
  </body>
 
</html>

5. Style the website with CSS: In your style.css file, use modern CSS properties to design the website. Experiment with colors, typography, backgrounds, and layouts to make your coffee website visually appealing.

/* Google Fonts Link */
@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

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

:root {
/* Colors */
--white-color: #fff;
--dark-color: #252525;
--primary-color: #3b141c;
--secondary-color: #f3961c;
--light-pink-color: #faf4f5;
--medium-gray-color: #ccc;

/* Font size */
--font-size-s: 0.9rem;
--font-size-n: 1rem;
--font-size-m: 1.12rem;
--font-size-l: 1.5rem;
--font-size-xl: 2rem;
--font-size-xxl: 2.3rem;

/* Font weight */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

/* Border radius */
--border-radius-s: 8px;
--border-radius-m: 30px;
--border-radius-circle: 50%;

/* Site max width */
--site-max-width: 1300px;
}

html {
scroll-behavior: smooth;
}

/* Stylings for whole site */
ul {
list-style: none;
}

a {
text-decoration: none;
}

button {
cursor: pointer;
background: none;
border: none;
}

img {
width: 100%;
}

:where(section, footer) .section-content {
margin: 0 auto;
padding: 0 20px;
max-width: var(--site-max-width);
}

section .section-title {
text-align: center;
padding: 60px 0 100px;
text-transform: uppercase;
font-size: var(--font-size-xl);
}

section .section-title::after {
content: "";
width: 80px;
height: 5px;
display: block;
margin: 10px auto 0;
background: var(--secondary-color);
border-radius: var(--border-radius-s);
}

/* Navbar styling */
header {
z-index: 5;
width: 100%;
position: fixed;
background: var(--primary-color);
}

header .navbar {
display: flex;
padding: 20px;
align-items: center;
margin: 0 auto;
justify-content: space-between;
max-width: var(--site-max-width);
}

.navbar .nav-logo .logo-text {
color: var(--white-color);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
}

.navbar .nav-menu {
gap: 10px;
display: flex;
}

.navbar .nav-menu .nav-link {
padding: 10px 18px;
color: var(--white-color);
font-size: var(--font-size-m);
border-radius: var(--border-radius-m);
transition: 0.3s ease;
}

.navbar .nav-menu .nav-link:hover {
color: var(--primary-color);
background: var(--secondary-color);
}

.navbar :where(#menu-open-button, #menu-close-button) {
display: none;
}

/* Hero section styling */
.hero-section {
min-height: 100vh;
background: var(--primary-color);
}

.hero-section .section-content {
display: flex;
padding-top: 40px;
align-items: center;
min-height: 100vh;
justify-content: space-between;
}

.hero-section .hero-details {
color: var(--white-color);
}

.hero-section .hero-details .title {
font-size: var(--font-size-xxl);
color: var(--secondary-color);
font-family: "Miniver", sans-serif;
}

.hero-section .hero-details .subtitle {
margin-top: 8px;
max-width: 70%;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
}

.hero-section .hero-details .description {
max-width: 70%;
margin: 24px 0 40px;
font-size: var(--font-size-m);
}

.hero-section .hero-details .buttons {
display: flex;
gap: 23px;
}

.hero-section .hero-details .button {
padding: 10px 26px;
display: block;
border: 2px solid transparent;
border-radius: var(--border-radius-m);
background: var(--secondary-color);
color: var(--primary-color);
font-size: var(--font-size-m);
font-weight: var(--font-weight-medium);
transition: 0.3s ease;
}

.hero-section .hero-details .button:hover,
.hero-section .hero-details .button.contact-us {
color: var(--white-color);
border-color: var(--white-color);
background: transparent;
}

.hero-section .hero-details .button.contact-us:hover {
color: var(--primary-color);
background: var(--secondary-color);
border-color: var(--secondary-color);
}

.hero-section .hero-image-wrapper {
max-width: 500px;
margin-right: 30px;
}

/* About section styling */
.about-section {
padding: 120px 0;
background: var(--light-pink-color);
}

.about-section .section-content {
display: flex;
gap: 50px;
align-items: center;
justify-content: space-between;
}

.about-section .about-image-wrapper .about-image {
height: 400px;
width: 400px;
object-fit: cover;
border-radius: var(--border-radius-circle);
}

.about-section .about-details {
max-width: 50%;
}

.about-section .about-details .section-title {
padding: 0;
}

.about-section .about-details .text {
line-height: 30px;
margin: 50px 0 30px;
text-align: center;
font-size: var(--font-size-m);
}

.about-section .social-link-list {
display: flex;
gap: 25px;
justify-content: center;
}

.about-section .social-link-list .social-link {
color: var(--primary-color);
font-size: var(--font-size-l);
transition: 0.2s ease;
}

.about-section .social-link-list .social-link:hover {
color: var(--secondary-color);
}

/* Menu section styling */
.menu-section {
color: var(--white-color);
background: var(--dark-color);
padding: 50px 0 100px;
}

.menu-section .menu-list {
display: flex;
gap: 110px;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}

.menu-section .menu-list .menu-item {
display: flex;
text-align: center;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: calc(100% / 3 - 110px);
}

.menu-section .menu-list .menu-item .menu-image {
width: 83%;
aspect-ratio: 1;
margin-bottom: 15px;
object-fit: contain;
}

.menu-section .menu-list .menu-item .name {
margin: 12px 0;
font-size: var(--font-size-l);
font-weight: var(--font-weight-semibold);
}

.menu-section .menu-list .menu-item .text {
font-size: var(--font-size-m);
}

/* Testimonials section styling */
.testimonials-section {
padding: 50px 0 100px;
background: var(--light-pink-color);
}

.testimonials-section .slider-wrapper {
overflow: hidden;
margin: 0 60px 50px;
}

.testimonials-section .testimonial {
user-select: none;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

.testimonials-section .testimonial .user-image {
width: 180px;
height: 180px;
margin-bottom: 50px;
object-fit: cover;
border-radius: var(--border-radius-circle);
}

.testimonials-section .testimonial .name {
margin-bottom: 16px;
font-size: var(--font-size-m);
}

.testimonials-section .testimonial .feedback {
line-height: 25px;
}

.testimonials-section .swiper-pagination-bullet {
width: 15px;
height: 15px;
opacity: 1;
background: var(--secondary-color);
}

.testimonials-section .swiper-slide-button {
color: var(--secondary-color);
margin-top: -50px;
transition: 0.3s ease;
}

.testimonials-section .swiper-slide-button:hover {
color: var(--primary-color);
}

/* Gallery section styling */
.gallery-section {
padding: 50px 0 100px;
}

.gallery-section .gallery-list {
display: flex;
gap: 32px;
flex-wrap: wrap;
}

.gallery-section .gallery-list .gallery-item {
overflow: hidden;
border-radius: var(--border-radius-s);
width: calc(100% / 3 - 32px);
}

.gallery-section .gallery-item .gallery-image {
width: 100%;
height: 100%;
cursor: zoom-in;
transition: 0.3s ease;
}

.gallery-section .gallery-item:hover .gallery-image {
transform: scale(1.3);
}

/* Contact section styling */
.contact-section {
padding: 50px 0 100px;
background: var(--light-pink-color);
}

.contact-section .section-content {
display: flex;
gap: 48px;
align-items: center;
justify-content: space-between;
}

.contact-section .contact-info-list .contact-info {
display: flex;
gap: 20px;
margin: 20px 0;
align-items: center;
}

.contact-section .contact-info-list .contact-info i {
font-size: var(--font-size-m);
}

.contact-section .contact-form .form-input {
width: 100%;
height: 50px;
padding: 0 12px;
outline: none;
margin-bottom: 16px;
font-size: var(--font-size-s);
border-radius: var(--border-radius-s);
border: 1px solid var(--medium-gray-color);
}

.contact-section .contact-form {
max-width: 50%;
}

.contact-section .contact-form textarea.form-input {
height: 100px;
padding: 12px;
resize: vertical;
}

.contact-section .contact-form .form-input:focus {
border-color: var(--secondary-color);
}

.contact-section .contact-form .submit-button {
padding: 10px 28px;
outline: none;
margin-top: 10px;
border: 1px solid var(--primary-color);
border-radius: var(--border-radius-m);
background: var(--primary-color);
color: var(--white-color);
font-size: var(--font-size-m);
font-weight: var(--font-weight-medium);
transition: 0.3s ease;
}

.contact-section .contact-form .submit-button:hover {
color: var(--primary-color);
background: transparent;
}

/* Footer section styling */
.footer-section {
padding: 20px 0;
background: var(--dark-color);
}

.footer-section .section-content {
display: flex;
align-items: center;
justify-content: space-between;
}

.footer-section :where(.copyright-text, .social-link, .policy-link) {
color: var(--white-color);
transition: 0.2s ease;
}

.footer-section .social-link-list {
display: flex;
gap: 25px;
}

.footer-section .social-link-list .social-link {
font-size: var(--font-size-l);
}

.footer-section .social-link-list .social-link:hover,
.footer-section .policy-text .policy-link:hover {
color: var(--secondary-color);
}

.footer-section .policy-text .separator {
color: #fff;
margin: 0 5px;
}

/* Responsive media query code for max width 1024px */
@media screen and (max-width: 1024px) {
.menu-section .menu-list {
gap: 60px;
}

.menu-section .menu-list .menu-item {
width: calc(100% / 3 - 60px);
}

}

/* Responsive media query code for max width 900px */
@media screen and (max-width: 900px) {
:root {
--font-size-m: 1rem;
--font-size-l: 1.3rem;
--font-size-xl: 1.5rem;
--font-size-xxl: 1.8rem;
}

body.show-mobile-menu {
overflow: hidden;
}

body.show-mobile-menu header::before {
content: "";
content: '';
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
backdrop-filter: blur(5px);
background: rgba(0, 0, 0, 0.2);
}

.navbar :is(#menu-open-button, #menu-close-button) {
font-size: var(--font-size-l);

display: block;
}

.navbar :is(#menu-open-button, #menu-close-button):hover {
color: var(--secondary-color) !important;
}

.navbar #menu-open-button {
color: #fff;
}

.navbar .nav-menu #menu-close-button {
position: absolute;
right: 30px;
top: 30px;
}

.navbar .nav-menu {
display: block;
background: #fff;
position: fixed;
top: 0;
left: -300px;
height: 100%;
width: 300px;
display: flex;
align-items: center;
flex-direction: column;
padding-top: 100px;
transition: left 0.2s ease;
}

body.show-mobile-menu .nav-menu {
left: 0;
}

.navbar .nav-menu .nav-link {
display: block;
margin-top: 17px;
padding: 10px 22px;
color: var(--dark-color);
font-size: var(--font-size-l);
}

.hero-section .section-content {
text-align: center;
gap: 50px;
padding: 30px 20px 20px;
justify-content: center;
flex-direction: column-reverse;
}

.hero-section .hero-details :is(.subtitle, .description),
.about-section .about-details,
.contact-section .contact-form {
max-width: 100%;
}

.hero-section .hero-details .buttons {
justify-content: center;
}

.hero-section .hero-image-wrapper {
max-width: 270px;
margin-right: 0;
}

.about-section .section-content {
gap: 70px;
flex-direction: column-reverse;
}

.about-section .about-image-wrapper .about-image {
width: 100%;
height: 100%;
aspect-ratio: 1;
max-width: 250px;
}

.menu-section .menu-list {
gap: 30px;
}

.menu-section .menu-list .menu-item {
width: calc(100% / 2 - 30px);
}

.menu-section .menu-list .menu-item .menu-image {
max-width: 200px;
}

.gallery-section .gallery-list {
gap: 30px;
}

.gallery-section .gallery-list .gallery-item {
width: calc(100% / 2 - 30px);
}

.contact-section .section-content {
align-items: center;
flex-direction: column-reverse;
}
}

/* Responsive media query code for max width 640px */
@media screen and (max-width: 640px) {

.menu-section .menu-list .menu-item,
.gallery-section .gallery-list .gallery-item {
width: 100%;
}

.menu-section .menu-list {
gap: 60px;
}

.testimonials-section .slider-wrapper {
margin: 0 0 30px;
}

.testimonials-section .swiper-slide-button {
display: none;
}

.footer-section .section-content {
flex-direction: column;
gap: 20px;
}
}

6. Add functionality with JavaScript: In your script.js file, write JavaScript code to add interactive features. This includes:

Initializing the Swiper slider for the Testimonials section.
Creating a hamburger menu for mobile navigation that enhances the user experience.

const navbarLinks = document.querySelectorAll(".nav-menu .nav-link");
const menuOpenButton = document.querySelector("#menu-open-button");
const menuCloseButton = document.querySelector("#menu-close-button");

menuOpenButton.addEventListener("click", () => {
// Toggle mobile menu visibility
document.body.classList.toggle("show-mobile-menu");
});

// Close menu when the close button is clicked
menuCloseButton.addEventListener("click", () => menuOpenButton.click());

// Close menu when nav link is clicked
navbarLinks.forEach((link) => {
link.addEventListener("click", () => menuOpenButton.click());
});

/* Initializing Swiper */
let swiper = new Swiper(".slider-wrapper", {
loop: true,
grabCursor: true,
spaceBetween: 25,

// Pagination bullets
pagination: {
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true,
},

// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},

/* Responsive breakpoints */
breakpoints: {
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
1024: {
slidesPerView: 3,
},
},
});

Once you’ve completed these steps, open the index.html file in your browser to preview your coffee website. You’ll see how responsive it looks across different screen sizes, from mobile to desktop.

Why Build a Responsive Coffee Website?

Creating a responsive coffee website offers several benefits:

Mobile Optimization: As more users access websites on their phones, ensuring your site looks great on any device is crucial.
Interactive Features: By adding dynamic elements like sliders and animated menus, you can provide a richer experience for visitors.
Portfolio Boost: If you’re a beginner, this project is a great way to show off your web development skills and can be a perfect addition to your portfolio.

Conclusion

In conclusion, building a responsive coffee website using HTML, CSS, and JavaScript is a fantastic way to enhance your web development skills. Through this project, you’ve learned how to structure a website, style it with CSS, and add dynamic functionality with JavaScript. Each section, from the homepage to the footer, offers valuable hands-on experience to help you grow as a front-end developer.

Take this opportunity to explore other website projects and further develop your HTML, CSS, and JavaScript expertise. You can experiment with different features like sliders, animations, and responsive layouts, which are in high demand in today’s web design world.

If you need the full source code for this coffee website, you can download it below and use it as a reference for your projects.

Download the Source Code

Click the button below to download the complete source code for the Responsive Coffee Website project.

Prev.
1
2
3
4
Next

Latest post

Popular Posts

Top 17 Best WordPress Plugins For Blogger (461)

Create a Website with a Login/Registration Form in HTML, CSS and JavaScript (303)

Create A Glassmorphism Login Form in HTML and CSS (226)

Show & Hide Password in HTML CSS & JavaScript (223)

Learn to build a functional contact form in PHP (198)

Stay Connected

Coder Abhi

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

Steps to Build a Fully Functional Calculator with HTML, CSS, and JavaScript

Key Features of the Calculator

Troubleshooting and Support

Conclusion: Build Your Fully Functional Calculator

Why Build a Netflix-inspired Login Page?

Steps to Create a Netflix-inspired Login Page in HTML and CSS

Why Build a Chatbot Interface?

Steps to Build a Google Gemini Chatbot Clone

Why Button Ripple Animation?

Understanding the Button Ripple Animation

JavaScript Explanation

Key Sections of the Coffee Website

Why Build a Responsive Coffee Website?

Recent Posts

Recent Comments

Categories

Latest Posts

Comments

Newsletter