Tech That Matters

Tag: css Page 1 of 2

css cards

107 Beautiful CSS Cards Examples to Improve Your User Interface

Sticky post

If you’re looking to elevate the user interface of your website or application, consider incorporating eye-catching CSS cards. To help inspire you, we’ve compiled a list of 107 stunning CSS card examples that you can use as a reference.

#1 – CSS Card

Name Temani Afif
Links demo and code
Made with HTML / CSS

#2– CSS Card

Name Gayane Gasparyan
Links demo and code
Made with HTML / CSS

#3– CSS Card

Name Aleksandar ČuguroviΔ‡
Links demo and code
Made with HTML / CSS

#4– CSS Card

Name Aaron Iker
Links demo and code
Made with HTML / CSS (SCSS)

#5– CSS Card

Name Marcello Lopes
Links demo and code
Made with HTML / CSS

#6– CSS Card

Name Josh
Links demo and code
Made with HTML / CSS (SCSS)

#7– CSS Card

Name Rahul
Links demo and code
Made with HTML / CSS

#8– CSS Card

Name Mark Boots
Links demo and code
Made with HTML / CSS

#9– CSS Card

Name Jon Kantner
Links demo and code
Made with HTML / CSS

#10– CSS Card

Name kiberbash
Links demo and code
Made with HTML / CSS (SCSS)

#11– CSS Card

Name Lorentz
Links demo and code
Made with HTML / CSS

#12– CSS Card

Name Aryan Tayal
Links demo and code
Made with HTML / CSS

#13– CSS Card

Name Temani Afif
Links demo and code
Made with HTML / CSS

#14– CSS Card

Name Aryan Tayal
Links demo and code
Made with HTML / CSS

#15– CSS Card

Name Vivien Ngo
Links demo and code
Made with HTML / CSS (SCSS)

#16– CSS Card

Name Camila Waz
Links demo and code
Made with HTML / CSS

#17– CSS Card

Name HΓ₯vard Brynjulfsen
Links demo and code
Made with HTML / CSS (SCSS)

#18– CSS Card

Name Cristian Diaz
Links demo and code
Made with HTML / CSS

#19– CSS Card

Name Amit Sheen
Links demo and code
Made with HTML / CSS (SCSS)

#20– CSS Card

Name Sanket Bodake
Links demo and code
Made with HTML / CSS

#21– CSS Card

Name Josh Werner
Links demo and code
Made with HTML / CSS

#22– CSS Card

Name ayush gupta
Links demo and code
Made with HTML / CSS

#23– CSS Card

Name HΓ₯vard Brynjulfsen
Links demo and code
Made with HTML / CSS (SCSS)

#24– CSS Card

Name Jhey
Links demo and code
Made with HTML (Pug) / CSS (Stylus)

#25– CSS Card

Name Takane Ichinose
Links demo and code
Made with HTML / CSS

#26– CSS Card

Name Noah Raskin
Links demo and code
Made with HTML / CSS

#27– CSS Card

Name Shireen Taj
Links demo and code
Made with HTML / CSS (SCSS)

#28– CSS Card

Name Mike Mangialardi
Links demo and code
Made with HTML / CSS (SCSS)

#29– CSS Card

Name Fernando Cohen
Links demo and code
Made with HTML / CSS (SCSS)

#30– CSS Card

Name Sebi
Links demo and code
Made with HTML / CSS (SCSS)

#31– CSS Card

Name Chris Coyier
Links demo and code
Made with HTML (Pug) / CSS (SCSS)

#32– CSS Card

Name Chris Smith
Links demo and code
Made with HTML / CSS

#33– CSS Card

Name Chris Smith
Links demo and code
Made with HTML / CSS

#34– CSS Card

Name Morten Rand-Hendriksen
Links demo and code
Made with HTML / CSS

#35– CSS Card

Name fabian wohlgemuth
Links demo and code
Made with HTML / CSS / JS

#36– CSS Card

Name P
Links demo and code
Made with HTML / CSS (SCSS)

#37– CSS Card

Name Katy Wellington
Links demo and code
Made with HTML / CSS

#38– CSS Card

Name Coding Artist
Links demo and code
Made with HTML / CSS

#39– CSS Card

Name Arti Bhandari
Links demo and code
Made with HTML / CSS

#40– CSS Card

Name Luisoms
Links demo and code
Made with HTML / CSS

#41– CSS Card

Name Genaro Colusso
Links demo and code
Made with HTML / CSS

#42– CSS Card

Name Smashing Magazine
Links demo and code
Made with HTML / CSS (SCSS)

#43– CSS Card

Name fabian wohlgemuth
Links demo and code
Made with HTML / CSS / JS

#44– CSS Card

Name Coding Artist
Links demo and code
Made with HTML / CSS

#45– CSS Card

Name Fernando Cohen
Links demo and code
Made with HTML / CSS

#46– CSS Card

Name Roger
Links demo and code
Made with HTML / CSS

#47– CSS Card

Name Adam Kuhn
Links demo and code
Made with HTML (Haml) / CSS (SCSS)

#48– CSS Card

Name Andy Fought
Links demo and code
Made with HTML / CSS (SCSS)

#49– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#50– CSS Card

Name BEN ABBESS
Links demo and code
Made with HTML / CSS

#51– CSS Card

Name Dicky AL Fattah
Links demo and code
Made with HTML / CSS

#52– CSS Card

Name Savio Martin
Links demo and code
Made with HTML / CSS

#53– CSS Card

Name Luan Manara
Links demo and code
Made with HTML / CSS

#54– CSS Card

Name StΓ©phanie Walter
Links demo and code
Made with HTML / CSS (SCSS)

#55– CSS Card

Name Nooray Yemon
Links demo and code
Made with HTML / CSS

#56– CSS Card

Name Johana Morales
Links demo and code
Made with HTML / CSS

#57– CSS Card

Name Rick
Links demo and code
Made with HTML / CSS

#58– CSS Card

Name Jhonier Riascos Zapata
Links demo and code
Made with HTML / CSS

#59– CSS Card

Name konradstepien
Links demo and code
Made with HTML / CSS

#60– CSS Card

Name JΓΈshΓΌΓ₯ WΓ₯rd
Links demo and code
Made with HTML / CSS (SCSS)

#61– CSS Card

Name Aashir Aamir Khan
Links demo and code
Made with HTML / CSS

#62– CSS Card

Name Madalena
Links demo and code
Made with HTML / CSS

#63– CSS Card

Name Dan Benmore
Links demo and code
Made with HTML / CSS

#64– CSS Card

Name markelrayes
Links demo and code
Made with HTML / CSS

#65– CSS Card

Name Reiha Hosseini
Links demo and code
Made with HTML / CSS

#66– CSS Card

Name Ryan
Links demo and code
Made with HTML / CSS

#67– CSS Card

Name Ryan Mulligan
Links demo and code
Made with HTML (Pug) / CSS (SCSS)

#68– CSS Card

Name RΓ©mi Rucojevic
Links demo and code
Made with HTML / CSS (SCSS)

#69– CSS Card

Name HJB
Links demo and code
Made with HTML / CSS (SCSS)

#70– CSS Card

Name Florin Pop
Links demo and code
Made with HTML / CSS

#71– CSS Card

Name Andrew Hawkes
Links demo and code
Made with HTML / CSS

#72– CSS Card

Name Curtis Lee
Links demo and code
Made with HTML / CSS

#73– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#74– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#75– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#76– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#77– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#78– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#79– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#80– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#81– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#82– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#83– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#84– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#85– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#86– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#87– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#88– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#89– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#90– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#91– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#92– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#93– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#94– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#95– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#96– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#97– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#98– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

#99– CSS Card

Name Jared Parsons
Links demo and code
Made with HTML / CSS

How To Create A Modern Website Using React Js Step-By-Step Website Tutorial

Sticky post
How To Create A Modern Website Using React Js

Are you looking to create a modern website using React? In this step-by-step tutorial, you’ll learn how to set up your development environment, and we will learn How To Create A Modern Website Using React Js .creating a new React project, and build a sleek website using React components and libraries. From installing Node.js and selecting a text editor to coding custom components and using popular libraries like React Router and Bootstrap, this tutorial covers everything you need to know to create a professional-looking website. Whether you’re a beginner or an experienced developer, this guide will help you take your web development skills to the next level. Follow along and create your own stunning website today!. Be ready of a tutorial How To Make Website a modern website using React | Create Website Header Design

App.js

Let’s start by creating an app.js file and writing all the HTML elements.Let’s begin by creating the website’s skeleton using simple HTML. The navbar must come first, followed by the header and finally the picture section of the website. You may use the code below to

import "./App.css";
function App() {
  return (
    <div className="container">
      <nav>
        <img src="images/logo.png" className="logo" alt="imaged" />
        <ul>
          <li>
            <a href="www.ziontutorial.com">Traval Guide</a>
          </li>
          <li>
            <a href="www.ziontutorial.com">Famous Places</a>
          </li>
          <li>
            <a href="www.ziontutorial.com">Contact Us</a>
          </li>
        </ul>
        <button className="btn">
          <img src="images/icon.png" alt="icon" /> Bookings
        </button>
      </nav>
      <div className="content">
        <h1>
          Beautiful
          <br />
          Places to explore
        </h1>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </p>
        <form>
          <input type="text" placeholder="Country Name" />
          <button type="submit" className="btn">
            Search
          </button>
        </form>
      </div>
      <p></p>
    </div>
  );
}

export default App;

Let’s write all the CSS and the landing page which will make this landing page very beautiful.

App.css

Let’s create a really simple CSS style for our header portion. As I mentioned in the previous section, we generated the navbar, header text, and header picture using HTML. Now that we have these components, let’s add some CSS to our skeleton to make the header seem lovely. I’ve listed all the code necessary to construct our header below. You may check this out and experiment with these values to see what happens.

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

.container {
  width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(rgb(9, 0, 77, 0.65), rgba(9, 0, 77, 0.65));
  background-image: url("https://source.unsplash.com/random/1920x1080/?wallpaper,landscape");

  background-size: cover;
  background-position: center;
  padding: 10px 8%;
}

nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.logo {
  width: 180px;
  cursor: pointer;
}

nav ul {
  list-style: none;
  width: 100%;
  text-align: right;
  padding-right: 60px;
}

nav ul li {
  display: inline-block;
  margin: 10px 20px;
}

nav ul li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 400;
}

.btn {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border: 0;
  outline: 0;
  border-radius: 5px;
  background: #f5168d;
  color: #ffffff;
  font-weight: 500;
  cursor: pointer;
}

.btn img {
  width: 20px;
  margin-right: 10px;
}

.content {
  margin-top: 14%;
  color: #fff;
  max-width: 620px;
}

.content h1 {
  font-size: 70px;
  font-weight: 800;
  line-height: 85px;
  margin-bottom: 25px;
}

.content form {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  margin-top: 30px;
}

.content form input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 16px;
  padding-left: 10px;
}

.content form .btn {
  font-size: 15px;
  padding: 10px 30px;
}

⭐ Conclusion

via GIPHY

We did it! ? Hope you like How To Create A Modern Website Using React Js. For such projects do visits and comment on which project should I pick next.

Check out this How to Install WordPress on Localhost | Xammp. Comment if you have any dought Regarding this project please comment in the comment box. Or join Our telegram Channel mostly available on that platform you can ask any question.

Happy coding!

People are also reading:

40 Must-Have CSS Libraries to Elevate Your Web Design Game

Sticky post
40 Must-Have CSS Libraries
40 Must-Have CSS Libraries

If you’re a web designer or developer, you know how important it is to stay on top of the latest tools and trends in the field. That’s why we’ve put together a list of 40 must-have CSS libraries that can take your web design game to the next level. From responsive frameworks to advanced animations and effects, these libraries can help you create stunning and engaging websites that stand out from the crowd. Whether you’re a seasoned pro or just starting out, these CSS libraries are sure to be valuable additions to your toolkit.

Here are the link of each website

  1. Bootstrap: https://getbootstrap.com/
  2. Bulma: https://bulma.io/
  3. Foundation: https://foundation.zurb.com/
  4. Semantic UI: https://semantic-ui.com/
  5. Materialize: https://materializecss.com/
  6. UIKit: https://getuikit.com/
  7. Tailwind CSS: https://tailwindcss.com/
  8. Ant Design: https://ant.design/
  9. Spectre.css: https://picturepan2.github.io/spectre/
  10. Semantic UI React: https://react.semantic-ui.com/
  11. Vuetify: https://vuetifyjs.com/en/
  12. PrimeNG: https://www.primefaces.org/primeng/
  13. Shards: https://designrevision.com/downloads/shards/
  14. Element: https://element.eleme.io/
  15. Chakra UI: https://chakra-ui.com/
  16. Carbon Design System: https://www.carbondesignsystem.com/
  17. Fluent UI: https://developer.microsoft.com/en-us/fluentui#/
  18. Grommet: https://v2.grommet.io/
  19. Blueprint: https://blueprintjs.com/
  20. Tachyons: https://tachyons.io/
  21. Basscss: https://basscss.com/
  22. NES.css: https://nostalgic-css.github.io/NES.css/
  23. Milligram: https://milligram.io/
  24. Mini.css: https://minicss.org/
  25. Material Design Lite: https://getmdl.io/
  26. Ionic Framework: https://ionicframework.com/
  27. Quasar: https://quasar.dev/
  28. Webflow: https://webflow.com/
  29. Skeleton: http://getskeleton.com/
  30. Suzie: https://github.com/oddbird/susy
  31. Buefy:https://buefy.org/
  32. React-Bootstrap:https://react-bootstrap.github.io/
  33. Reactstrap:https://reactstrap.github.io/
  34. Rebass :https://rebassjs.org/
  35. Styled Components:https://styled-components.com/
  36. Emotion:https://emotion.sh/docs/introduction
  37. Glamorous:https://glamorous.rocks/
  38. Water.css: https://watercss.kognise.dev/#
  39. Polished:https://polished.js.org/
  40. Hover.css: https://ianlunn.github.io/Hover/

A CSS library is a collection of pre-written CSS code that can be used to style web pages. A library typically focuses on specific CSS functionalities, such as typography or animation, and provides a set of styles that can be added to existing web designs to achieve a desired look and feel.

CSS libraries are often lightweight, easy to use, and can save developers a significant amount of time when styling web pages. They can also help ensure consistency across different pages of a website, and improve the overall user experience by providing a visually appealing and responsive design. Popular CSS libraries include Bootstrap, Foundation, Materialize, and many others.

Most Used CSS libraries

  1. Bootstrap: A CSS framework developed by Twitter that provides a set of pre-designed user interface (UI) components, such as buttons, forms, navigation bars, and grids, to help developers build responsive and mobile-first websites and applications quickly.
  2. Foundation: Another popular CSS framework that offers a suite of UI components, including forms, navigation menus, and typography styles, that are easy to customize and responsive by default.
  3. Materialize: A CSS framework based on Google’s Material Design language, which is a design philosophy that emphasizes a clean and modern look and feel for web and mobile applications.
  4. Bulma: A lightweight and modular CSS framework that focuses on providing a clean and simple design for web interfaces, with a flexible grid system and a range of UI components that can be customized easily.
  5. Semantic UI: A comprehensive and intuitive CSS framework that uses human-friendly HTML syntax to make building responsive and accessible web interfaces easy and efficient. It offers a wide range of UI components, such as buttons, forms, and grids, that can be easily customized.
  6. Tailwind CSS: A CSS utility framework that provides a set of pre-defined classes for common design patterns, such as spacing, typography, and layout. This allows developers to build custom and responsive web interfaces quickly, without needing to write custom CSS styles.
  7. Spectre.css: A minimalist and lightweight CSS framework that provides a range of useful UI components, such as grids, typography, and forms, for building modern and responsive web interfaces.
  8. Pure.css: Another lightweight and minimalistic CSS framework that offers a range of UI components, including forms, tables, and grids, that are easy to customize and responsive by default.
  9. UIKit: A comprehensive and modular CSS framework that offers a range of UI components, such as navigation menus, grids, and forms, that are highly customizable and responsive by default.
  10. Ant Design: A popular CSS framework that provides a range of customizable UI components, such as forms, tables, and navigation menus, that are optimized for building enterprise-level web applications and interfaces. It also offers a design language that emphasizes consistency and usability across all components.
  11. Vuetify: A popular CSS framework for building web interfaces using the Vue.js JavaScript framework, offering a range of customizable UI components, such as navigation menus, forms, and cards.
  12. PrimeNG: A CSS framework for building web interfaces using the Angular JavaScript framework, offering a range of customizable UI components, such as grids, forms, and charts.
  13. Shards: A modern and lightweight CSS framework that provides a range of responsive UI components, such as buttons, forms, and cards, that are easy to customize and integrate into web interfaces.
  14. Element: A CSS framework that provides a range of customizable UI components, such as forms, tables, and grids, for building responsive and modern web interfaces.
  15. Chakra UI: A popular and modern CSS framework that provides a range of customizable UI components, such as forms, modals, and typography, for building responsive and accessible web interfaces.
  16. Carbon Design System: A comprehensive and modular CSS framework that offers a range of UI components, such as buttons, forms, and grids, that are optimized for building enterprise-level web applications.
  17. Fluent UI: A CSS framework that provides a range of customizable UI components, such as buttons, forms, and icons, for building modern and responsive web interfaces.
  18. Grommet: A modern and responsive CSS framework that provides a range of UI components, such as tables, charts, and modals, that are easy to customize and integrate into web interfaces.
  19. Blueprint: A CSS framework that provides a range of customizable UI components, such as forms, navigation menus, and grids, that are optimized for building web interfaces with the React.js JavaScript framework.
  20. Tachyons: A CSS utility framework that provides a set of pre-defined classes for building custom and responsive web interfaces quickly and efficiently, with a focus on readability and consistency.
  21. Basscss: Another CSS utility framework that provides a range of pre-defined classes for building custom and responsive web interfaces quickly and efficiently, with a focus on simplicity and modularity.
  22. NES.css: A fun and retro-themed CSS framework that provides a range of customizable UI components, such as buttons, forms, and cards, for building modern web interfaces with a nostalgic feel.
  23. Milligram: A minimalist and lightweight CSS framework that offers a range of UI components, such as buttons, forms, and typography, for building modern and responsive web interfaces.
  24. Mini.css: Another minimalist and lightweight CSS framework that provides a range of UI components, such as grids, forms, and navigation menus, that are easy to customize and responsive by default.
  25. Material Design Lite: A lightweight and customizable CSS framework based on Google’s Material Design philosophy, offering a range of UI components, such as buttons, forms, and grids, for building modern and responsive web interfaces.
  26. Ionic Framework: A popular CSS framework for building hybrid mobile applications using web technologies, offering a range of customizable UI components, such as buttons, forms, and cards, that can be easily integrated into mobile apps.
  27. Quasar: Another CSS framework for building hybrid mobile applications using web technologies, offering a range of customizable UI components, such as modals, forms, and navigation menus, that are optimized for mobile devices.
  28. Webflow: A comprehensive web design platform that offers a range of customizable templates and UI components, such as forms, animations, and sliders, for building modern and responsive web interfaces without writing code.
  29. Skeleton: A lightweight and responsive CSS framework that provides a set of pre-defined classes for building custom web interfaces quickly and efficiently.
  30. Suzie: A CSS framework that offers a range of customizable UI components, such as buttons, forms,

Conclusion

In general, using CSS libraries can be a helpful way for web developers to save time and effort in creating consistent designs across their projects. By utilizing pre-existing code for common features, developers can focus more on creating great web design and efficient apps. While some CSS libraries may not seem exciting at first, they can still be valuable tools for making the development process more productive and efficient. Overall, incorporating CSS libraries into web development projects can help streamline the design process and create a cohesive visual aesthetic.

People are also reading:

Responsive Gym Website Using HTML CSS JavaScript

Responsive Gym Website Using HTML, CSS & JavaScript

Sticky post
Responsive Gym Website Using HTML, CSS & JavaScript

Create Responsive Gym Website Using HTML CSS JavaScript

Hello to Everyone. In this article, you will learn how to create Responsive Gym Website Using HTML CSS JavaScript. You will be able to create your own website at the end of this article since we will start from scratch with this project and teach you every HTML, CSS, and JavaScript concept.

Being physically and mentally fit is necessary for a happy and long life. Exercise Is One Of The Best Ways To Keep Your Health In Check. So, regardless of how busy you are, finding a workout routine is always recommended. Because diseases are so prevalent today, more people are now aware of the benefits of exercise. The Best Exercise Program Will Particularly Improve A Person’s Physical, Mental, And Social Well-Being.

Responsive Gym Website Using HTML, CSS & JavaScript
Responsive Gym Website Using HTML, CSS & JavaScript

I Wish You Were Generally Aware Of What The Project Involves. We’ll walk you through this project step by step in our article.

Step1: Adding HTML Markup

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--=============== FAVICON ===============-->
        <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

        <!--=============== BOXICONS ===============-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">

        <!--=============== SWIPER CSS ===============--> 
        <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">

        <!--=============== CSS ===============--> 
        <link rel="stylesheet" href="assets/css/styles.css">

        <title>Gym management system</title>
    </head>
    <body>
        <!--==================== HEADER ====================-->
        <header class="header" id="header">
            <nav class="nav container">
                <a href="#" class="nav__logo">
                    <img src="assets/img/Dumbell_03.png" alt="" class="nav__logo-img">
                    Gym Managment 
                </a>

                <div class="nav__menu" id="nav-menu">
                    <ul class="nav__list">
                        <li class="nav__item">
                            <a href="#home" class="nav__link active-link">Home</a>
                        </li>

                        <li class="nav__item">
                            <a href="#weoffer" class="nav__link">We offer</a>
                        </li>

                        <li class="nav__item">
                            <a href="#about" class="nav__link">Payroll</a>
                        </li>

                        <li class="nav__item">
                            <a href="#features" class="nav__link">Membership</a>
                        </li>                      

                        <a href="#" class="button button--ghost">Support</a>
                    </ul>

                    <div class="nav__close" id="nav-close">
                        <i class='bx bx-x'></i>
                    </div>

                    <img src="assets/img/nav-img.png" alt="" class="nav__img">
                </div>

                <div class="nav__toggle" id="nav-toggle">
                    <i class='bx bx-grid-alt'></i>
                </div>

            </nav>
        </header>

        <main class="main">
            <!--==================== HOME ====================-->
            <section class="home container" id="home">
                <div class="swiper home-swiper">
                    <div class="swiper-wrapper">
                        <!-- HOME SLIDER 1 -->
                        <section class="swiper-slide">
                            <div class="home__content grid">
                                <div class="home__group">
                                    <img src="assets/img/home1-img.png" alt="" class="home__img">
                                </div>
    
                                <div class="home__data">
                                  
                                    <h1 class="home__title">Esmart <br> Fitness <br> Solution</h1>
                                    <p class="home__description">A top gym management software solution to simplify managing your gym.With dedicated mobile apps for trainers and members, administer workouts schedules & diet plans and many more activities effectively.
                                    </p>

                                    <div class="home__buttons">
                                        <a href="#" class="button">Book Now</a>
                                        
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- HOME SLIDER 2 -->
                        <section class="swiper-slide">
                            <div class="home__content grid">
                                <div class="home__group">
                                    <img src="assets/img/home2-img.png" alt="" class="home__img">
                                   
                                    </div>
    
                                <div class="home__data">
                                  
                                    <h1 class="home__title">Makes <br>your GYM Smarter!</h1>
                                    <p class="home__description">Adino steals cotton candy from his brother and eats them all in one bite, 
                                        a hungry beast. Grahami can no longer contain his anger towards Adino.
                                    </p>

                                    <div class="home__buttons">
                                        <a href="#" class="button">Book Now</a>                                      
                                    </div>
                                </div>
                            </div>
                        </section>

              
                       
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </section>
            
            <!--==================== CATEGORY ====================-->
            <section class="section category " id="weoffer">
                <h2 class="section__title">WE OFFERS </h2>

                <div class="category__container container grid">
                    <div class="category__data">
                        <img src="assets/img/Gym Bottle_01.png" alt="" class="category__img">
                        <h3 class="category__title">Enquiry Management</h3>
                        <p class="category__description">will reveal lots of paper work burden, makes enquiry process easier and more faster.</p>
                    </div>

                    <div class="category__data">
                        <img src="assets/img/Dumbell_01.png" alt="" class="category__img">
                        <h3 class="category__title">Membership Management</h3>
                        <p class="category__description">Each member have their own set of measurement, membership</p>
                    </div>

                    <div class="category__data">
                        <img src="assets/img/Kettlebell_01.png" alt="" class="category__img">
                        <h3 class="category__title">Workout Management</h3>
                        <p class="category__description">e-SmartFitness optimizes your users to track record of their workouts with help of quick access features </p>
                    </div>
                </div>
            </section>

            <!--==================== ABOUT ====================-->
            <section class="section about" id="about">
                <div class="about__container container grid">
                    <div class="about__data">
                        <h2 class="section__title about__title">Payroll Management</h2>
                        <p class="about__description">Using Payroll management you can easily manage staff salary, shift assignment, advance salary, and many more features makes your software more handy.
                        </p>
                        <a href="#" class="button">Know more</a>
                    </div>

                    <img src="assets/img/Weight machine_03.png" alt="" class="about__img">
                </div>
            </section>

             <!--==================== Payroll ====================-->
             <section class="section features" id="features">
                <div class="about__container container grid">
                    
                    <img src="assets/img/Kettlebell_01.png" alt="" class="about__img">
                    <div class="about__data">
                        <h2 class="section__title about__title">Membership Management</h2>
                        <p class="about__description">Each member have their own set of measurement, membership and task details. Manage Financial accounts by enrolling member to a membership plan.
                        </p>
                        <a href="#" class="button">Know more</a>
                    </div>
                </div>
            </section>

            <!--==================== DISCOUNT ====================-->
            <section class="section discount">
                <div class="discount__container container grid">
                    <div class="discount__data">
                        <h2 class="discount__title">20% Discount <br> For new Membership</h2>
                        <a href="#" class="button">Go to new</a>
                    </div>

                    <img src="assets/img/Dumbell_03.png" alt="" class="discount__img">
                </div>
            </section>

           

            <!--==================== OUR NEWSLETTER ====================-->
            <section class="section newsletter">
                <div class="newsletter__container container">
                    <h2 class="section__title">Our Newsletter</h2>
                    <p class="newsletter__description">
                        Promotion new products and sales. Directly to your inbox
                    </p>

                    <form action="" class="newsletter__form">
                        <input type="text" placeholder="Enter your email" class="newsletter__input">
                        <button class="button">
                            Subscribe
                        </button>
                    </form>
                </div>
            </section>
        </main>

        <!--==================== FOOTER ====================-->
            <footer class="footer section">
                <div class="footer__container container grid">
                    <div class="footer__content">
                        <a href="#" class="footer__logo">
                           
                            Gymmanagment System
                        </a>

                        <p class="footer__description">Enjoy the our Services</p>
                        
                        <div class="footer__social">
                            <a href="https://www.facebook.com/" target="_blank" class="footer__social-link">
                                <i class='bx bxl-facebook'></i>
                            </a>
                            <a href="https://www.instagram.com/" target="_blank" class="footer__social-link">
                                <i class='bx bxl-instagram-alt' ></i>
                            </a>
                            <a href="https://twitter.com/" target="_blank" class="footer__social-link">
                                <i class='bx bxl-twitter' ></i>
                            </a>
                        </div>
                    </div>

                    <div class="footer__content">
                        <h3 class="footer__title">About</h3>
                        
                        <ul class="footer__links">
                            <li>
                                <a href="#" class="footer__link">We offer</a>
                            </li>
                            
                        </ul>
                    </div>

                    <div class="footer__content">
                        <h3 class="footer__title">Our Services</h3>
                        
                        <ul class="footer__links">
                            <li>
                                <a href="#" class="footer__link">Payroll</a>
                            </li>
                           
                        </ul>
                    </div>

                    <div class="footer__content">
                        <h3 class="footer__title">Our Company</h3>
                        
                        <ul class="footer__links">
                            <li>
                                <a href="#" class="footer__link">Membership</a>
                            </li>
                           
                        </ul>
                    </div>
                </div>

                <span class="footer__copy">&#169; All rigths reserved</span>
                <img src="assets/img/Handgrip_01.png" alt="" class="footer__img-one">
                <img src="assets/img/Handgrip_01.png" alt="" class="footer__img-two">
            </footer>

            <!--=============== SCROLL UP ===============-->
            <a href="#" class="scrollup" id="scroll-up">
                <i class='bx bx-up-arrow-alt scrollup__icon'></i>
            </a>
        
        <!--=============== SCROLL REVEAL ===============-->
        <script src="assets/js/scrollreveal.min.js"></script>

        <!--=============== SWIPER JS ===============-->
        <script src="assets/js/swiper-bundle.min.js"></script>
        
        <!--=============== MAIN JS ===============-->
        <script src="assets/js/main.js"></script>
    </body>
</html>

Building Navigation Bar

To add a navigation bar to our website, first create a div with the class “Menu,” and inside of that, use the img> tag to add our logo to the left side of the navbar. Finally, inside of that, use the nav> tag to add various menu items to the navbar. In order to make it easier for visitors to navigate our website using the navbar, we will create a link to all of the menu items inside the navbar.

Building Header Section

We will use the
Tag to insert the primary heading for our gym website now that we have added a header section using the Header Tag. Next, we’ll use the paragraph tag to add a succinct description of our website and anchor -based Get Started Now button. We Will Also Include An Image To Enhance The Visual Appeal Of Our Header.

Body Section :

We will now include sub-parts in our body section like the feature, explore, and trainer sections. We will now build those various sections using the div element with various classes, the p tag to add some text, and the img tag to add images to our website. I Suggest Using More And More Visuals To Make Your Website Appear More Attractive. Simply taking a quick look at our structure might give you an idea, and you should work to use your own creativity to improve the website.

Building Footer Section

We Will Build A Footer Section With The Footer Tag And A Div> Section With the tag. We Will Add The Copyright Icon And Copyright Content Using The &Copy Tag, And The Name Of The Person Who Designed The Website Using the tag. Let’s Have A Look At Our Webpage Now That We’ve Added Structure.

Step2: Adding CSS Code

/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;900&display=swap');

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  --hue: 14;
  --first-color: hsl(var(--hue), 91%, 54%);
  --first-color-alt: hsl(var(--hue), 91%, 50%);
  --title-color: hsl(var(--hue), 4%, 100%);
  --text-color: hsl(var(--hue), 4%, 85%);
  --text-color-light: hsl(var(--hue), 4%, 55%);

  /*Green gradient*/
  --body-color: linear-gradient(90deg, hsl(105, 5%, 15%) 0%, hsl(0, 0%, 20%) 100%);
  --container-color: linear-gradient(136deg, hsl(0, 0%, 31%) 0%, hsl(0, 0%, 25%) 100%);
  
  /*Red gradient*/
  /* --body-color: linear-gradient(90deg, hsl(360, 28%, 40%) 0%, hsl(18, 28%, 40%) 100%);
  --container-color: linear-gradient(136deg, hsl(360, 28%, 35%) 0%, hsl(18, 28%, 35%) 100%); */

  /*Black solid*/
  /* --body-color: hsl(30, 8%, 8%);
  --container-color: hsl(30, 8%, 10%); */

  /*========== Font and typography ==========*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-black: 900;

  /*========== Margenes Bottom ==========*/
  --mb-0-25: .25rem;
  --mb-0-5: .5rem;
  --mb-0-75: .75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/* Responsive typography */
@media screen and (min-width: 992px) {
  :root {
    --biggest-font-size: 4rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html{
  scroll-behavior: smooth;
}

body{
  margin: var(--header-height) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: var(--body-color);
  color: var(--text-color);
}

h1,h2,h3,h4{
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}

ul{
  list-style: none;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
  height: auto;
}

button,
input{
  border: none;
  outline: none;
}

button{
  cursor: pointer;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

/*=============== REUSABLE CSS CLASSES ===============*/
.section{
  padding: 4.5rem 0 2rem;
}

.section__title{
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-2);
  text-align: center;
}

/*=============== LAYOUT ===============*/
.container{
  max-width: 968px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}

.grid{
  display: grid;
}

.main{
  overflow: hidden; /*For animation*/
}

/*=============== HEADER ===============*/
.header{
  width: 100%;
  background: var(--body-color); 
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
}

/*=============== NAV ===============*/
.nav{
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo{
  display: flex;
  align-items: center;
  column-gap: .5rem;
  font-weight: var(--font-medium);
}

.nav__logo-img{
  width: 1.25rem;
}

.nav__link,
.nav__logo,
.nav__toggle,
.nav__close{
  color: var(--title-color);
}

.nav__toggle{
  font-size: 1.25rem;
  cursor: pointer;
}

@media screen and (max-width: 767px){
  .nav__menu{
    position: fixed;
    width: 100%;
    background: var(--container-color);
    top: -150%;
    left: 0;
    padding: 3.5rem 0;
    transition: .4s;
    z-index: var(--z-fixed);
    border-radius: 0 0 1.5rem 1.5rem;
  }
}

.nav__img{
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

.nav__close{
  font-size: 1.8rem;
  position: absolute;
  top: .5rem;
  right: .7rem;
  cursor: pointer;
}

.nav__list{
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1.5rem;
}

.nav__link{
  text-transform: uppercase;
  font-weight: var(--font-black);
  transition: .4s;
}

.nav__link:hover{
  color: var(--text-color);
}

/* Show menu */
.show-menu{
  top: 0;
}

/* Change background header */
.scroll-header{
  background: var(--container-color);
}

/* Active link */
.active-link{
  position: relative;
}

.active-link::before{
  content: '';
  position: absolute;
  bottom: -.75rem;
  left: 45%;
  width: 5px;
  height: 5px;
  background-color: var(--title-color);
  border-radius: 50%;
}

/*=============== HOME ===============*/
.home__content{
  row-gap: 1rem;
}

.home__group{
  display: grid;
  position: relative;
  padding-top: 2rem;
}

.home__img{
  height: 250px;
  justify-self: center;
}

.home__indicator{
  width: 8px;
  height: 8px;
  background-color: var(--title-color);
  border-radius: 50%;
  position: absolute;
  top: 7rem;
  right: 2rem;
}

.home__indicator::after{
  content: '';
  position: absolute;
  width: 1px;
  height: 48px;
  background-color: var(--title-color);
  top: -3rem;
  right: 45%;
}

.home__details-img{
  position: absolute;
  right: .5rem;
}

.home__details-title,
.home__details-subtitle{
  display: block;
  font-size: var(--small-font-size);
  text-align: right;
}

.home__subtitle{
  font-size: var(--h3-font-size);
  text-transform: uppercase;
  margin-bottom: var(--mb-1);
}

.home__title{
  font-size: var(--biggest-font-size);
  font-weight: var(--font-black);
  line-height: 109%;
  margin-bottom: var(--mb-1);
}

.home__description{
  margin-bottom: var(--mb-1);
}

.home__buttons{
  display: flex;
  justify-content: space-between;
}

/* Swiper Class */
.swiper-pagination{
  position: initial;
  margin-top: var(--mb-1);
}

.swiper-pagination-bullet{
  width: 5px;
  height: 5px;
  background-color: var(--title-color);
  opacity: 1;
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
  margin: 0 .5rem;
} 

.swiper-pagination-bullet-active{
  width: 1.5rem;
  height: 5px;
  border-radius: .5rem;
}

/*=============== BUTTONS ===============*/
.button{
  display: inline-block;
  background-color: var(--first-color);
  color: var(--title-color);
  padding: 1rem 1.75rem;
  border-radius: .5rem;
  font-weight: var(--font-medium);
  transition: .3s;
}

.button:hover{
  background-color: var(--first-color-alt);
}

.button__icon{
  font-size: 1.25rem;
}

.button--ghost{
  border: 2px solid;
  background-color: transparent;
  border-radius: 3rem;
  padding: .75rem 1.5rem;
}

.button--ghost:hover{
  background: none;
}

.button--link{
  color: var(--title-color);
}

.button--flex{
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
}

/*=============== CATEGORY ===============*/
.category__container{
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
}

.category__data{
  text-align: center;
}

.category__img{
  width: 120px;
  margin-bottom: var(--mb-0-75);
  transition: .3s;
}

.category__title{
  margin-bottom: var(--mb-0-25);
}

.category__data:hover .category__img{
  transform: translateY(-.5rem);
}

/*=============== ABOUT ===============*/
.about__container{
  row-gap: 2rem;
}

.about__data{
  text-align: center;
}

.about__description{
  margin-bottom: var(--mb-2);
}

.about__img{
  width: 200px;
  justify-self: center;
}

/*=============== TRICK OR TREAT ===============*/
.trick__container{
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding-top: 1rem;
}

.trick__content{
  position: relative;
  background: var(--container-color);
  border-radius: 1rem;
  padding: 1.5rem 0 1rem 0;
  text-align: center;
  overflow: hidden;
}

.trick__img{
  width: 90px;
  transition: .3s;
}

.trick__subtitle,
.trick__price{
  display: block;
}

.trick__subtitle{
  font-size: var(--smaller-font-size);
  margin-bottom: var(--mb-0-5);
}

.trick__title,
.trick__price{
  color: var(--title-color);
  font-weight: var(--font-medium);
  font-size: var(--normal-font-size);
}

.trick__button{
  display: inline-flex;
  padding: .5rem;
  border-radius: .25rem .25rem .75rem .25rem;
  position: absolute;
  right: -3rem;
  bottom: 0;
}

.trick__icon{
  font-size: 1.25rem;
  color: var(--title-color);
}

.trick__content:hover .trick__img{
  transform: translateY(-.5rem);
}

.trick__content:hover .trick__button{
  right: 0;
}

/*=============== DISCOUNT ===============*/
.discount__container{
  background: var(--container-color);
  border-radius: 1rem;
  padding: 2.5rem 0 1.5rem;
  row-gap: .75rem;
}

.discount__data{
  text-align: center;
}

.discount__title{
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-2);
}

.discount__img{
  width: 200px;
  justify-self: center;
}

/*=============== NEW ARRIVALS ===============*/
.new__container{
  padding-top: 1rem;
}

.new__img{
  width: 120px;
  margin-bottom: var(--mb-0-5);
  transition: .3s;
}

.new__content{
  position: relative;
  background: var(--container-color);
  width: 242px;
  padding: 2rem 0 1.5rem 0;
  border-radius: .75rem;
  text-align: center;
  overflow: hidden;
}

.new__tag{
  position: absolute;
  top: 8%;
  left: 8%;
  background-color: var(--first-color);
  color: var(--title-color);
  font-size: var(--small-font-size);
  padding: .25rem .5rem;
  border-radius: .25rem;
}

.new__title{
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
}

.new__subtitle{
  display: block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-0-5);
}

.new__prices{
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
}

.new__price{
  font-weight: var(--font-medium);
  color: var(--title-color);
}

.new__discount{
  color: var(--first-color);
  font-size: var(--smaller-font-size);
  text-decoration: line-through;
  font-weight: var(--font-medium);
}

.new__button{
  display: inline-flex;
  padding: .5rem;
  border-radius: .25rem .25rem .75rem .25rem;
  position: absolute;
  bottom: 0;
  right: -3rem;
}

.new__icon{
  font-size: 1.25rem;
}

.new__content:hover .new__img{
  transform: translateY(-.5rem);
}

.new__content:hover .new__button{
  right: 0;
}

/*=============== NEWSLETTER ===============*/
.newsletter__description{
  text-align: center;
  margin-bottom: var(--mb-1-5);
}

.newsletter__form{
  background: var(--container-color);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  border-radius: .75rem;
}

.newsletter__input{
  width: 70%;
  padding: 0 .5rem;
  background: none;
  color: var(--title-color);
}

.newsletter__input::placeholder{
  color: var(--text-color);
}

/*=============== FOOTER ===============*/
.footer{
  position: relative;
  overflow: hidden;
}

.footer__img-one,
.footer__img-two{
  position: absolute;
  transition: .3s;
}

.footer__img-one{
  width: 100px;
  top: 6rem;
  right: -2rem;
}

.footer__img-two{
  width: 150px;
  bottom: 4rem;
  right: 4rem;
}

.footer__img-one:hover,
.footer__img-two:hover{
  transform: translateY(-.5rem);
}

.footer__container{
  row-gap: 2rem;
}

.footer__logo{
  display: flex;
  align-items: center;
  column-gap: .5rem;
  margin-bottom: var(--mb-1);
  font-weight: var(--font-medium);
  color: var(--title-color);
}

.footer__logo-img{
  width: 20px;
}

.footer__description{
  margin-bottom: var(--mb-2-5);
}

.footer__social{
  display: flex;
  column-gap: .75rem;
}

.footer__social-link{
  display: inline-flex;
  background: var(--container-color);
  padding: .25rem;
  border-radius: .25rem;
  color: var(--title-color);
  font-size: 1rem;
}

.footer__social-link:hover{
  background: var(--body-color);
}

.footer__title{
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-1);
}

.footer__links{
  display: grid;
  row-gap: .35rem;
}

.footer__link{
  font-size: var(--small-font-size);
  color: var(--text-color);
  transition: .3s;
}

.footer__link:hover{
  color: var(--title-color);
}

.footer__copy{
  display: block;
  text-align: center;
  font-size: var(--smaller-font-size);
  margin-top: 4.5rem;
}

/*=============== SCROLL UP ===============*/
.scrollup{
  position: fixed;
  background: var(--container-color);
  right: 1rem;
  bottom: -20%;
  display: inline-flex;
  padding: .3rem;
  border-radius: .25rem;
  z-index: var(--z-tooltip);
  opacity: .8;
  transition: .4s;
}

.scrollup__icon{
  font-size: 1.25rem;
  color: var(--title-color);
}

.scrollup:hover{
  background: var(--container-color);
  opacity: 1;
}

/* Show Scroll Up*/
.show-scroll{
  bottom: 3rem;
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar{
  width: 0.6rem;
  background: #413e3e;
}

::-webkit-scrollbar-thumb{
  background: #272525;
  border-radius: .5rem;
}

/*===============  BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px){
  .container{
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }

  .home__img{
    height: 200px;
  }
  .home__buttons{
    flex-direction: column;
    width: max-content;
    row-gap: 1rem;
  }

  .category__container,
  .trick__container{
    grid-template-columns: .8fr;
    justify-content: center;
  }
}

/* For medium devices */
@media screen and (min-width: 576px){
  .about__container{
    grid-template-columns: .8fr;
    justify-content: center;
  }

  .newsletter__container{
    display: grid;
    grid-template-columns: .7fr;
    justify-content: center;
  }
  .newsletter__description{
    padding: 0 3rem;
  }
}

@media screen and (min-width: 767px){
  body{
    margin: 0;
  }

  .section{
    padding: 7rem 0 2rem;
  }

  .nav{
    height: calc(var(--header-height) + 1.5rem);
  }
  .nav__img,
  .nav__close,
  .nav__toggle{
    display: none;
  }
  .nav__list{
    flex-direction: row;
    column-gap: 3rem;
  }
  .nav__link{
    text-transform: initial;
    font-weight: initial;
  }

  .home__content{
    padding: 8rem 0 2rem;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }
  .home__img{
    height: 300px;
  }
  .swiper-pagination{
    margin-top: var(--mb-2);
  }

  .category__container{
    grid-template-columns: repeat(3, 200px);
    justify-content: center;
  }

  .about__container{
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }
  .about__title,
  .about__data{
    text-align: initial;
  }
  .about__img{
    width: 250px;
  }

  .trick__container{
    grid-template-columns: repeat(3, 200px);
    justify-content: center;
    gap: 2rem;
  }

  .discount__container{
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-items: center;
    column-gap: 3rem;
    padding: 3rem 0;
    border-radius: 3rem;
  }
  .discount__img{
    width: 350px;
    order: -1;
  }
  .discount__data{
    padding-right: 6rem;
  }

  .newsletter__container{
    grid-template-columns: .5fr;
  }

  .footer__container{
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    column-gap: 1rem;
  }
  .footer__img-two{
    right: initial;
    bottom: 0;
    left: 15%;
  }
}

/* For large devices */
@media screen and (min-width: 992px){
  .container{
    margin-left: auto;
    margin-right: auto;
  }

  .section__title{
    font-size: var(--h1-font-size);
    margin-bottom: 3rem;
  }

  .home__content{
    padding-top: 9rem;
    gap: 3rem;
  }
  .home__group{
    padding-top: 0;
  }
  .home__img{
    height: 400px;
    transform: translateY(-3rem);
  }
  .home__indicator{
    top: initial;
    right: initial;
    bottom: 15%;
    left: 45%;
  }
  .home__indicator::after{
    top: 0;
    height: 75px;
  }
  .home__details-img{
    bottom: 0;
    right: 58%;
  }
  .home__title{
    margin-bottom: var(--mb-1-5);
  }
  .home__description{
    margin-bottom: var(--mb-2-5);
    padding-right: 2rem;
  }

  .category__container{
    column-gap: 8rem;
  }
  .category__img{
    width: 200px;
  }

  .about__container{
    column-gap: 7rem;
  }
  .about__img{
    width: 350px;
  }
  .about__description{
    padding-right: 2rem;
  }

  .trick__container{
    gap: 3.5rem;
  }
  .trick__content{
    border-radius: 1.5rem;
  }
  .trick__img{
    width: 110px;
  }
  .trick__title{
    font-size: var(--h3-font-size);
  }

  .discount__container{
    column-gap: 7rem;
  }

  .new__content{
    width: 310px;
    border-radius: 1rem;
    padding: 2rem 0;
  }
  .new__img{
    width: 150px;
  }
  .new__img,
  .new__subtitle{
    margin-bottom: var(--mb-1);
  }
  .new__title{
    font-size: var(--h3-font-size);
  }

  .footer__copy{
    margin-top: 6rem;
  }
}

@media screen and (min-width: 1200px){
  .home__img{
    height: 420px;
  }
  .swiper-pagination{
    margin-top: var(--mb-2-5);
  }
  .footer__img-one{
    width: 120px;
  }
  .footer__img-two{
    width: 180px;
    top: 30%;
    left: -3%;
  }
}

Step3: Adding Javascript

/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
      navToggle = document.getElementById('nav-toggle'),
      navClose = document.getElementById('nav-close')

/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
    navToggle.addEventListener('click', () =>{
        navMenu.classList.add('show-menu')
    })
}

/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
    navClose.addEventListener('click', () =>{
        navMenu.classList.remove('show-menu')
    })
}

/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
    const navMenu = document.getElementById('nav-menu')
    // When we click on each nav__link, we remove the show-menu class
    navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

/*=============== HOME SWIPER ===============*/
let homeSwiper = new Swiper(".home-swiper", {
    spaceBetween: 30,
    loop: 'true',
    
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
})

/*=============== CHANGE BACKGROUND HEADER ===============*/
function scrollHeader(){
    const header = document.getElementById('header')
    // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
    if(this.scrollY >= 50) header.classList.add('scroll-header'); else header.classList.remove('scroll-header')
}
window.addEventListener('scroll', scrollHeader)

/*=============== NEW SWIPER ===============*/
let newSwiper = new Swiper(".new-swiper", {
    centeredSlides: true,
    slidesPerView: "auto",
    loop: 'true',
    spaceBetween: 16,
});

/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
const sections = document.querySelectorAll('section[id]')

function scrollActive(){
    const scrollY = window.pageYOffset

    sections.forEach(current =>{
        const sectionHeight = current.offsetHeight,
              sectionTop = current.offsetTop - 58,
              sectionId = current.getAttribute('id')

        if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
        }else{
            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
        }
    })
}
window.addEventListener('scroll', scrollActive)

/*=============== SHOW SCROLL UP ===============*/ 
function scrollUp(){
    const scrollUp = document.getElementById('scroll-up');
    // When the scroll is higher than 460 viewport height, add the show-scroll class to the a tag with the scroll-top class
    if(this.scrollY >= 460) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll')
}
window.addEventListener('scroll', scrollUp)

/*=============== SCROLL REVEAL ANIMATION ===============*/
const sr = ScrollReveal({
    origin: 'top',
    distance: '60px',
    duration: 2500,
    delay: 400,
    // reset: true
})

sr.reveal(`.home-swiper, .new-swiper, .newsletter__container`)
sr.reveal(`.category__data, .trick__content, .footer__content`,{interval: 100})
sr.reveal(`.about__data, .discount__img`,{origin: 'left'})
sr.reveal(`.about__img, .discount__data`,{origin: 'right'})

Output:

Conclusion

yeey!

We did it! ? Hope you like Responsive Gym Website Using HTML CSS JavaScript. For such projects do visits and comment on which project should I cover next.

Check out this BMI Calculator using react and hooks. Comment if you have any dought Regarding this project please comment in the comment box. Or join Our telegram Channel mostly available on that platform you can ask any question.

Happy coding!

People are also reading:

Blob Maker Step By Step Using HTML, CSS & JavaScript

Sticky post

Blob Maker Using HTML, CSS, and JavaScript: Step by Step

Blob Maker Step By Step Using HTML, CSS & JavaScript

Greetings to everybody. I’m glad you’re here for today’s instruction on ziontutorial. We’ll discover Blob Maker Step By Step Using HTML, CSS & JavaScript, which is a pie-shaped design. All we have to do is provide the height and width, and the program will provide the syntax needed to add that shape to the project’s CSS code. To finish this project, we’ll utilize HTML, CSS, and JavaScript in today’s session.

In order to build Blob Maker, we will need to arrange the list using a few HTML (Hypertext Markup Language) characteristics and components.

Then, using CSS (Cascading Stylesheets), we can style or design the Blob Maker project with the proper padding and alignment.

In order to make the Blob Maker project responsive from the user’s perspective, we will finally use JS (JavaScript).

With source code accessible for you to copy and paste into your own project, we give Blob Maker Step By Step Using HTML, CSS, & JavaScript projects using CSS.

Hopefully, you now have a general idea of the project.

HTML Code

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blob Maker | ziotutorial</title>
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
    <
</head>
<body>
    <div class="wrapper">
        <div class="output">
            <div id="blob"></div>
        </div>
        <div class="dimensions">
            <div>
                <label for="blob-height">
                    Height
                </label>
                <input type="number" value="200" id="blob-height">
            </div>
            <div>
                <label for="blob-width">
                    Width
                </label>
                <input type="number" value="200" id="blob-width">
            </div>
        </div>
        <div class="sliders">
            <input type="range" value="30">
            <input type="range" value="80">
            <input type="range" value="60">
            <input type="range" value="40">
        </div>
        <input type="text" id="css-code" readonly>
        <button id="copy">Copy</button>
    </div>
    <!--Script-->
    <script src="app.js"></script>
</body>
</html>

As you can see in the preceding code, we have used all essential components and attributes in order to create the framework of the Blob Maker project. Please share the CSS code for the styling and tag alignment.

CSS Code

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
    font-family: "Roboto Mono",monospace;
    font-weight: 400;
    color: #010120;
}
body{
    background-color: #ffffff;
    background-image: url(./bg.png );
   
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 
}
.wrapper{
    background-color: #ffffff;
    width: 45%;
    min-width: 550px;
    padding: 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 8px;
}
.output{
    background-color: #eef3f8;
    width: 100%;
    min-height: 250px;
    padding: 20px 0;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    display: grid;
    place-items: center;
}
#blob{
    height: 300px;
    width: 300px;
    background: rgb(94,92,122);
background: linear-gradient(90deg, rgba(94,92,122,1) 0%, rgba(9,9,121,1) 42%, rgba(0,212,255,1) 100%);
    box-shadow: 15px 20px 30px rgba(0,0,0,0.15);
}
.dimensions{
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 20px 0 40px 0;
}
label{
    font-weight: 500;
}
input[type="number"]{
    height: 40px;
    width: 80px;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #a0a0b0;
    border-radius: 3px;
}
input[type="number"]:focus{
    background-color: #f1f5fa;
    border-color: #025eaa;
    color: #025eaa;
}
.sliders{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
input[type="text"]{
    width: 82%;
    margin-top: 50px;
    padding: 10px;
    font-size: 12px;
    border: none;
    background-color: #f1eff9;
    border-radius: 3px;
}
button{
    width: 12%;
    margin-left: 4%;
    padding: 10px 0;
    background-color: #0075ff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    color: #ffffff;
    font-size: 12px;
}

Now let’s code the JavaScript part to make it responsive.

let outputCode = document.getElementById("css-code");

let sliders = document.querySelectorAll("input[type='range']");
sliders.forEach(function(slider){
    slider.addEventListener("input",createBlob);
});

let inputs = document.querySelectorAll("input[type='number']");
inputs.forEach(function(inp){
    inp.addEventListener("change",createBlob);
});

function createBlob(){
    let radiusOne = sliders[0].value;
    let radiusTwo = sliders[1].value;
    let radiusThree = sliders[2].value;
    let radiusFour = sliders[3].value;

    let blobHeight = inputs[0].value;
    let blobWidth = inputs[1].value;

    let borderRadius = `${radiusOne}% ${100 - radiusOne}% ${100 - radiusThree}% ${radiusThree}% / ${radiusFour}% ${radiusTwo}% ${100 - radiusTwo}% ${100 - radiusFour}%`;

    document.getElementById("blob").style.cssText = `border-radius: ${borderRadius}; height: ${blobHeight}px; width: ${blobWidth}px`;

    outputCode.value = `border-radius: ${borderRadius};`
}

document.getElementById("copy").addEventListener("click", function(){
    outputCode.select();
    document.execCommand('copy');
    alert('Code Copied');
});

createBlob();
Blob Maker Step By Step Using HTML CSS & JavaScript

Conclusion

yeey!

Using HTML, CSS, and JavaScript, we were able to develop our Blob Maker (Source Code) I will mention in the given below. in this tutorial we have cover Blob Maker Step By Step Using HTML, CSS & JavaScript. Hope you enjoy this tutorial

If you think this blog is useful, always visit ziontutorial by searching on Google to locate Source Codes, and follow us on social platforms also

Happy learning and thanks for visiting!

Thank You And Happy Learning!!!

Code Idea – codingartist

People are also reading:

Creating beautiful tooltips with only CSS

Creating beautiful tooltips with only CSS

Sticky post
Creating beautiful tooltips with only CSS

Hello, friend’s hope you are doing so today we are making very cool tooltips with only CSS.

Either you can download the source from the bottom file or follow the tutorial along with me.

Again before deep dive diving into the tutorial do comment and subscribe to our youtube channel so that you can get new videos each and every week.

Let’s start our tooltips with only CSS & this is one of the best tooltips with only CSS Also, make your tooltips with only CSS . So without wasting any time let’s jump into the source code.

We start our code with the tooltips with only CSS.

Creating beautiful tooltips with only CSS

THE HTML

<div class="tooltip-container">
 Hover Me !
<span class="tooltip">Praesent ut tincidunt ligula. Donec at sem sit amet nulla porttitor consequat sit amet quis velit. Phasellus imperdiet mi in velit gravida tincidunt.</span>
</div>


THE CSS

Lets talk about our styling part where put some twic effect for our tooltip its a very small abd simple tooltip project using css. With

@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: local('Muli'), url(http://themes.googleusercontent.com/static/fonts/muli/v4/kU4XYdV4jtS72BIidPtqyw.woff) format('woff');
}

body {
    width:120px;
    margin: 150px auto;
    background: #D76655;
    font: 400 12px/14px 'Muli';
}

.tooltip-container {
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.tooltip {
    opacity: 0;
    z-index: 99;
    color: #bbb;
    width: 190px;
    display: block;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 3px;
    text-align: center;
    text-shadow: 1px 1px 2px #111;
    background: rgba(51,51,51,0.9);
    border: 1px solid rgba(34,34,34,0.9);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    position: absolute;
    right: -80px;
    bottom: 40px;
}

.tooltip:before,.tooltip:after {
    content: '';
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(51,51,51,0.9);
    position: absolute;
    bottom: -10px;
    left: 43%;
}

.tooltip-container:hover .tooltip,a:hover .tooltip {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

This is the final version of the TOOLTIP if you are following the source code then this will look like this and you can modify and change as per your requirement. That’s shit hope you like this tutorial I will provide you the source file link where you can download the sources.

Output

Creating beautiful tooltips with only CSS
Creating beautiful tooltips with only CSS

People are also reading:

How to Build a Responsive Navigation Bar With Flexbox

Navbar CSS Tutorial: Create a Navigation Bar with Flexbox.

Sticky post
How to Build a Responsive Navigation Bar With Flexbox

Create a Navigation Bar with Flexbox.

Hello, friend’s hope you are doing so today we are making a very cool Navigation Bar with Flexbox using HTML and CSS. Also we make this navbar responsive so that you can use this on your mobo devices.

Either you can download the source from the bottom file or follow the tutorial along with me.

Again before deep dive diving into the tutorial do comment and subscribe to our youtube channel so that you can get new videos each and every week.

Let’s start our Responsive Navigation Bar with Flexbox & this is the one of the best navbar example using flexbox. using CSS and HTML. Also, make your website is navbar in just a few min by using this source code. So without wasting any time let’s jump into the source code.

We start our code with the skeleton of the navbar using HTML AND CSS. first, we make a header tag where we put out logo nav links and last but not least our contact info button.

Make a folder of index and style and also an image folder where we put our logo and other remaining images. It this gonna be fun to create this navigation bar which makes you practical scenario with Navigation Bar with Flexbox using HTML and CSS. Hope you like it too .

eg.

Let’s start our first HTML part where we have to make our skeleton of the website using HTML AND CSS without using javascript.

THE HTML

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <header>

        <img class="logo" src="./images/logo.svg" alt="">

        <nav>
            <ul class="nav__links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Project</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Music</a></li>
            </ul>
        </nav>

        <a href="" class="cta"><button>Contact</button></a>

    </header>

</body>
</html>

Let’s make our navbar bar attractive and beautiful with CSS in the CSS part we are using flexbox which helps us to make our navbar component stable.

THE CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #24252A;
}

li,a,button {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: edf0f1;
    text-decoration: none;
}

header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
}

.logo
{
    cursor: pointer;
}

.nav__links {
    list-style: none;
}

.nav__links li {

    display: inline-block;
    padding: 0px 20px;
}

.nav__links li a {
    transition: all 0.3s ease 0s;
    color: white;

}

.nav__links li a:hover {
    color: #0088a9;
}

button
{
    padding: 9px 25px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

This is the final version of the navbar if you are following the source code then this will look like this and you can modify and change as per your requirement. That’s shit hope you like this tutorial I will provide you the source file link where you can download the sources.

Download Source Code

People are also reading:

How to make Simple Interest Calculator in Javascript

How to make Simple Interest Calculator in Javascript | Html Simple Interest Calculator for beginners

Sticky post
Simple Interest Calculator in JavaScript

In this tutorial, we will make a very simple javascript Simple interest calculator using HTML CSS and javascript. If you are a beginner then this tutorial is the best for you what you will learn from this tutorial is .

Note: Make sure you have downloaded the Assests and files for this project Here Link

Planing

since we will be building to make this simple interest calculator. You will learn lots of this which will give a great knowledge about DOM manipulation. I will all the list which you will learn during making or following this tutorial.

  • We will learn how to center a container .
  • we will learn how to deal with formula to implement our simple inerest in javascript
  • how to get user input .
  • how to save and manipulate to given specipic place of your output .
  • And many other things which is related with our styling part that will give you an great idea about dom manipulation and some basic element .

To start off we will draw a basic idea of our application which we are be building for this application either you can refer to your notebook or an online software tool Like Figma,Adobe xd, or something else from the marketplace.

It’s not about color staying the elements it’s just a layout refining where you will learn about components of our application .

The Html

Lets start with HTML syntax for the application so that we can define our elements of inputs paragraphs and so on then we will move in javascript and CSS part to make our application working .

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">
    <h2>Simple Interest</h2>
    
    
  <input type="number" id="principal" placeholder="Principal">
    
    
    <input type="number" id="rate" placeholder="Rate Of Interest">

  
    <input type="number" id="time"placeholder="Time in years">
    
    <div class="result">
      <p>Interest: <span id="interest"></span><br></p> 
      <p>Total Interest: <span id="plus"></span></p>
    </div>
    
    <button id="btn" class="button-56" role="button">Submit</button>
  </div>

</body>

</html>

Our basic elements are ready let’s move into our styling part where we will learn about how to make our applications looks awesome with our CSS and js for the workability part. Let’s move to our javascript which gives our application winds to calculate our simple interest by using simple logic formula .

The Javascript

<!--Script-->
  <script>
  
  /*Simple Interest Formula = 
  p*r*t/100*/
    
    btn.addEventListener("click", () => {
        /*Get input values to the variables */
      let p = parseInt(document.getElementById('principal').value);
      let r = document.getElementById('rate').value;
      let t = document.getElementById('time').value;
      let btn = document.getElementById('btn');
      
      var interest = (p*r*t)/100;
      
      document.getElementById('interest').innerHTML = interest;
      
      var plusInterest = p + interest;
      document.getElementById('plus').innerHTML = plusInterest;
      
    })
    
  </script>

Since we have already done our javascript part lets jump to our styling part so that our app looks amazing and beautiful.

The CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #3E00AC;
  font-family: 'Poppins', sans-serif;
}

.container{
  width: 550px;
  height: 750px;  
  display: grid;
  place-items: center;
  background: #edf1f4;
  border-radius: 10px;
  border: 3px solid rgb(0, 0, 0);
  
}

.container h2 {
  
  padding-top: 15px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: #464646;

  
}

.container span{
  font-weight: 700;
}

.container .result{
  color: #9E9E9E;
  width: 440px;
}

.container input{
  width: 440px;
  height: 80px;
  background: #edf1f4;
  inset: -5px -5px 5px #fff;
  border-radius: 5px;
  border: 1px solid black;
  outline: none;
  font-size: 20px;
  padding: 24px;
}

p {
  color: #3E00AC;
  font-size: 17px;
  padding: 10px;
}



#interest {
  font-size: 20px;
  padding-left: 1rem;
}
#plus {
  font-size: 20px;
  padding-left: 1rem;
}




/* CSS */
.button-56 { width: 400px;
  height: 200px;
  align-items: center;
  background-color: #adffc8;
  border: 2px solid #111;
  border-radius: 8px;
  box-sizing: border-box;
  color: rgb(26, 26, 26);
  cursor: pointer;
  display: flex;
  font-family: Inter,sans-serif;
  font-size: 16px;
  height: 68px;
  justify-content: center;
  line-height: 24px;
  max-width: 100%;
  padding: 85rem 25rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-bottom: 1rem;
}

.button-56:after {
  background-color: #111;
  border-radius: 8px;
  content: "";
  display: block;
  height: 48px;
  left: 0;
  width: 100%;
  position: absolute;
  top: -2px;
  transform: translate(8px, 8px);
  transition: transform .2s ease-out;
  z-index: -1;
}

.button-56:hover:after {
  transform: translate(0, 0);
}

.button-56:active {
  background-color: #ffdeda;
  outline: 0;
}

.button-56:hover {
  outline: 0;
}

@media (min-width: 768px) {
  .button-56 {
    padding: 0 40px;
  }
}

After following the whole code of HTML CSS and javascript you will get this kind of interface mention in blow .

Simple Interest Calculator in Javascript  project for beigners

Congratulations! You’ve created a fully functional and styled app. Hopefully, you’ve learned a something new during the whole process! Do comment in the comment box for any suggestion and query .

Downloading Files

Conclusion

Hope you like this article ? Did you enjoy How to make Simple Interest Calculator in Javascript? Let me know in the comment box. Finally, we learn to enjoy and try it on our own.

Happy Coding! ?

People are also reading:

How to Create a Responsive pricing table – HTML & CSS Tutorial (Minimal Modern Design)

Sticky post

hello guys, Today in this blog you will learn how to make a Reponsive modern pricing table using HTML & CSS. In the previous blog, I have shared a blog on how to make a modern website landing page using HTML and CSS and now it’s time to move into a Responsive pricing table using HTML & CSS.

A pricing table is used in many scenarios where users can see the list of prices of the product and services which they are providing. Also, it is used to display various pricing plans, Subscriptions, Or price comparisons. The best part of this pricing table is, it is fully responsive and minimal for any device.

Also i have created so many small projects using HTML CSS and javascript for beginners you can check it out Here

If you used this pricing plan on your website this pricing plan site would give you a very sleek and unique look to clients. and if you want to create or watch a video on it you can watch a full tutorial on it.

Video Tutorial Of Responsive Pricing Table

I have covered this video so that you can achieve or make this pricing table using HTML and CSS I hope you will understand the logic behind the small and minimal pricing table. Also if you are a beginner in web design then this would be the best thing for you. You will learn so many things by making these things at your own pace.

You might like this:

Responsive Modern Pricing Tables [Source Codes]

To create a Responsive pricing table first you need to create two files one HTML file and another one is the CSS file. After creating these two files make sure you copy the source code properly so that we can run it on a live server. meanwhile we have to create an HTML file with the name of index.html file and another file name would be style.css and this file would help you to make your styling to your pricing table looks responsive and minimal. Let’s start this simple responsive pricing table using HTML and css step by step .

THE HTML

<!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>Pricing Table</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="pricing-table">
        <!-- 1 card -->
        <div class="pricing-card">
            <h3 class="pricing-card-header">Lean</h3>
            <div class="price"> $4.88/yr
              </div>
            <ul>
                <li>Free control plane included</li>    
            </ul>
            <a href="#" class="order-btn">Order Now</a>                          
        </div>

        <!-- 2 card -->
        <div class="pricing-card">
            <h3 class="pricing-card-header">Standard</h3>
            <div class="price"> $8.88/yr
              </div>
            <ul>
                <li>Deploy in seconds</li>
                
            </ul>
            <a href="#" class="order-btn">Order Now</a>                          
        </div>

        <!-- 3 card -->

        <div class="pricing-card">
            <h3 class="pricing-card-header">Advanced</h3>
            <div class="price"> $20.88/yr
              </div>
            <ul>
                <li>Free daily backups,</li>
                
            </ul>
            <a href="#" class="order-btn">Order Now</a>                          
        </div>

        <!-- 4th card  -->
        <div class="pricing-card">
            <h3 class="pricing-card-header">Enterprise</h3>
            <div class="price"> $48.88/yr
              </div>
            <ul>
                <li>Highly available</li>
                
            </ul>
            <a href="#" class="order-btn">Order Now</a>                          
        </div>
        
    </div>
    
</body>
</html>

After pasting the above code into your HTML file your site will look like this. It’s a very basic website where we use only HTML elements. After finishing this part we will move to the CSS part where the main magic will happen to our site.

THE CSS

The best magic will happen here so follow along with the code and paste in your style.css file.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&amp;family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&amp;display=swap');

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    list-style: none;
}

body{
    background-color: #0D0D20;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.pricing-table{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: min(1920px,100%);
}

.pricing-card{
    flex: 1;
    max-width: 360px;
    background-color: #171727;
    margin: 20px 10px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    color: #ffffff;
    transition: .3s linear;
    border-radius: 20px;
    /* border: 0.5px solid #fff; */
    
}

.pricing-card-header{
    background-color: #171727;
    display: inline-block;
    color: #fff;
    padding: 12px 30px;
    border-radius: 0 0 20px 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    transition: .4s linear;
}

.pricing-card:hover .pricing-card-header {
    box-shadow: 0 0 0 26em #242486;
}

.price{
    font-size: 30px;
    font-weight: 500;
    color: #ffffff;
    margin: 40px 0;
    transition: .2s linear;
}

.price sup, .price span {
    font-size: 22px;
    font-weight: 700;
}

.pricing-card li {
    font-size: 16px;
    padding: 10px 0;
   
}

.pricing-card:hover , .pricing-card:hover .price {
    color: #fff;
}



.order-btn {
    display: inline-block;
    margin-bottom: 40px;
    margin-top: 80px;
    border: 2px solid #1F1F35;
    color: #ffffff;
    padding: 18px 40px;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 500;
    transition: .3s linear;
}

.order-btn:hover {
    background-color: #0fbcf9;
    color: #fff;
}

@media screen and (max-width:1100px)
{
    .pricing-card{
        flex: 50%;
    }
}
Responsive pricing table without hover

When we hover on the card its color would change which makes this pricing table dope.

After hovering on the card

That’s all, now you’ve successfully created Responsive Pricing Tables using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Conclusion

And voila! We’re done! ?

Happy Coding!

Page 1 of 2

Powered by ziontutorial & DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» Β© 2016 - 2023. ziontutorial.com