Tech That Matters

Tag: html

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:

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!

Powered by ziontutorial & DEV Community 👩‍💻👨‍💻 © 2016 - 2023. ziontutorial.com