Open In App

Create GeeksforGeeks Clone Using HTML CSS & JavaScript

Last Updated : 07 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we’ll make a clone of the GeeksforGeeks website. The clone includes home, about, courses, and contact pages. On the home page, we’ve added sections like categories, features, testimonials, and FAQs, similar to the GFG website. We named our clone GeeksforGeeks 2.0 to avoid copyright issues. The about page showcases achievements and introduces our team. The courses page features GFG courses, and the contact page provides contact information.

70

Preview Page

Approach :

  • File Structure Setup:
    • Create a folder and generate five HTML files: index.html, contact.html, about.html, blog.html, and courses.html.
    • Write the HTML code for each file to define the layout of the website.
    • Link these HTML files with respective CSS files: style.css, about.css, contact.css, and blog.css.
  • CSS Styling:
    • Develop four CSS files (style.css, about.css, contact.css, blog.css) for proper visualization of the website.
    • Implement styling in HTML and CSS files to enhance the overall appearance and layout of the website.
  • Website Code Implementation:
    • Write HTML and CSS code to construct the structure and design of the website.
    • Ensure proper visualization of the website through well-crafted HTML and CSS elements.
  • JavaScript Logic:
    • Create a script.js file to incorporate logic for testimonials swiper and navbar coloring.
    • Implement functionality to enhance user experience and interactivity on the website.
  • Responsive Design:
    • Integrate media queries to make the website responsive, adapting to different screen sizes and devices.
    • Ensure a seamless user experience across various devices through responsive design practices.

Example: The below code implements all the point written in the approach practically.

HTML Files:

HTML




<!-------------- index.html ----------------->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href=
        type="image/x-icon">
    <title>GeeksforGeeks 2.0</title>
 
    <!------------Iconscout CDN--------------------->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">
 
    <!-- --------------Google Fonts--------------------- -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href=
"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet">
 
    <!-- ----------------Swiper JS------------------------------ -->
    <link rel="stylesheet" href=
</head>
<style>
    #login:hover {
        color: white;
    }
</style>
 
<body>
    <nav>
        <div class="container nav__container">
            <a href="index.html">
                <img alt="" src=
                    style="width: 50%;">
            </a>
            <ul class="nav__menu">
                <li><a href="./index.html">Home</a></li>
                <li><a href="./about.html">About</a></li>
                <li><a href="./courses.html">Courses</a></li>
                <li><a href="./blog.html">Blog</a></li>
                <li><a href="./contact.html">Contact</a></li>
                <li>
                    <a href="./login.html" class="btn btn-primary"
                        id="login">
                        Login/Register
                    </a>
                </li>
            </ul>
            <button id="open-menu-btn">
                <i class="uil uil-bars"></i>
            </button>
            <button id="close-menu-btn">
                <i class="uil uil-multiply"></i>
            </button>
        </div>
    </nav>
 
 
 
    <!-- ======================End Navbar================== -->
 
 
    <!-- ====================Header========================== -->
    <header>
        <div class="container header__container">
            <div class="header__left">
                <h1>
                    Start Your Coding Journay with GeeksforGeeks 2.0
                </h1>
                <p style="text-align: justify;">
                    Welcome to GeeksforGeeks 2.0, an updated version
                    of GeeksforGeeks. This version has new features and
                    an updated learning path to help you achieve your goals.
                </p>
                <a href="/courses.html" class="btn btn-primary">
                    Let's Start
                </a>
 
            </div>
            <div class="header__right">
                <div class="header__right-image">
                    <img alt="" src=
                </div>
            </div>
        </div>
    </header>
 
    <!-- ==================End Header========================= -->
 
    <!-- ==============End Category=================== -->
    <section class="categories">
        <div class="container container categories__container">
            <div class="categories__left">
                <h1>New Categories</h1>
                <p style="text-align: justify;">
                    There are some new categories or areas in which
                    GeeksforGeeks 2.0 explores for our Geeks, and correct
                    and high-quality content is the point that makes
                    GeeksforGeeks 2.0 different from others.
                </p>
                <a href="https://www.geeksforgeeks.org/" class="btn">
                    Learn More
                </a>
            </div>
            <div class="categories__right">
                <article class="category">
                    <span class="category__icon">
                        <i class="uil uil-bitcoin-circle"></i>
                    </span>
                    <h5>
                        <a href="https://www.geeksforgeeks.org/blockchain/"
                            target="_blank">
                            Blockchain
                        </a>
                    </h5>
                    <p>
                        Blockchain is a secure way of
                        recording transactions.
                    </p>
                </article>
 
                <article class="category">
                    <span class="category__icon">
                        <i class="uil uil-palette"></i>
                    </span>
                    <h5>
                        <a href="https://www.geeksforgeeks.org/graphic-design/">
                            Graphic Design
                        </a>
                    </h5>
                    <p>
                        Graphic Design can be found on anything
                        from billboards to mobile apps.
                    </p>
                </article>
 
                <article class="category">
                    <span class="category__icon">
                        <i class="uil uil-usd-circle"></i>
                    </span>
                    <h5>
                        <a href="https://www.geeksforgeeks.org/finance/">
                            Finance
                        </a>
                    </h5>
                    <p>
                        The specialised study of how a company manages
                        its funds is known as Finance.
                    </p>
                </article>
 
                <article class="category">
                    <span class="category__icon">
                        <i class="uil uil-megaphone"></i>
                    </span>
                    <h5>
                        <a href="https://www.geeksforgeeks.org/marketing/">
                            Marketing
                        </a>
                    </h5>
                    <p>
                        Marketing is key in management, involving activities
                        to promote services for sale.
                    </p>
                </article>
 
                <article class="category">
                    <span class="category__icon">
                        <i class="uil uil-music"></i>
                    </span>
                    <h5>Music </h5>
                    <p>
                        Music is the art form that combines sounds
                        to create expression, and harmony.
                    </p>
                </article>
                <article class="category">
                    <span class="category__icon">
                        <i class="uil uil-puzzle-piece"></i>
                    </span>
                    <h5>
                        <a href=
                            Business
                        </a>
                    </h5>
                    <p>
                        Business is the pursuit of profit through
                        the exchange of services.
                    </p>
                </article>
 
            </div>
        </div>
    </section>
    <!-- =============End Category================ -->
 
    <!-- ==============Courses================= -->
    <section class="courses">
        <h2 style="color: gray
        ;">GeeksforGeeks 2.0 Courses</h2>
        <div class="container courses__container">
            <article class="course">
                <div class="course__image">
                    <img alt="" src=
                </div>
                <div class="course__info">
                    <h4>Master Java Programming</h4>
                    <p style="text-align: justify;">
                        "GeeksforGeeks 2.0 offers a 90% refund if you
                        complete 90% of the course within 90 days."</p>
                    <a href="/blog.html" target="_blank"
                        class="btn btn-primary">
                        Learn More
                    </a>
                </div>
            </article>
 
            <article class="course">
                <div class="course__image">
                    <img src=
                        alt="compiler">
 
                </div>
                <div class="course__info">
                    <h4>Software Testing and Automation</h4>
                    <p style="text-align: justify;">
                        GeeksforGeeks 2.0 offers a 90% refund if you
                        complete 90% of the course within 90 days.
                    </p>
                    <a href="courses.html" class="btn btn-primary">
                        Learn More
                    </a>
                </div>
            </article>
 
 
            <article class="course">
                <div class="course__image">
                    <img alt="" src=
                </div>
                <div class="course__info">
                    <h4>Interview Prepration</h4>
                    <p style="text-align: justify;">
                        GeeksforGeeks 2.0 offers a 90% refund if you
                        complete 90% of the course within 90 days.
                    </p>
                    <a href="courses.html" class="btn btn-primary">
                        Learn More
                    </a>
                </div>
            </article>
        </div>
    </section>
 
    <!-- ===============End Courses===================== -->
 
    <!-- ===============Testimonial ================== -->
 
    <section class="container testimonials__container mySwiper">
        <h2 style="color:rgb(98, 95, 95);">
            Student Testimonials
        </h2>
        <div class="swiper-wrapper">
            <article class="testimonial swiper-slide">
                <div class="avatar">
                    <img alt="" src=
                </div>
                <div class="testimonial__info">
                    <h5>Suraj Kath</h5>
                    <small>Placed In Google</small>
                </div>
                <div class="testimonial__body">
                    <p>
                        Hello, I have been practicing questions on this site
                        for the last 2 years and recently I got placed at Google.
                        Really loved the breadth of concepts and topics available
                        on this site. Great work guys!! Thank you
                    </p>
                </div>
            </article>
 
            <article class="testimonial swiper-slide">
                <div class="avatar">
                    <img alt="" src=
                </div>
                <div class="testimonial__info">
                    <h5>Siddharth Rajpal</h5>
                    <small>Placed In Google, Amazon</small>
                </div>
                <div class="testimonial__body">
                    <p>
                        I am Siddharth Rajpal, a 2014 passout from NSIT
                        and I used to visit your website to prepare for
                        job interviews and once I was ready I started
                        applying to various companies. I got recruited at
                        Google, Amazon,
                    </p>
                </div>
            </article>
 
            <article class="testimonial swiper-slide">
                <div class="avatar">
                    <img alt="" src=
                </div>
                <div class="testimonial__info">
                    <h5>Kyoo San Martin Monroy</h5>
                    <small>Amazon(2014) Google(2015)
                    </small>
                </div>
                <div class="testimonial__body">
                    <p>
                        I just want to say “Thank you for create GeeksForGeeks”.
                        My life change when I was accepted first in Amazon (2014)
                        and then in Google( 2015), and it was possible studying
                        everything from the GeeksforGeeks.
                    </p>
                </div>
            </article>
 
            <article class="testimonial swiper-slide">
                <div class="avatar">
                    <img alt="" src=
                </div>
                <div class="testimonial__info">
                    <h5>Vivek Kumar Thakur</h5>
                    <small>Placed In Amazon</small>
                </div>
                <div class="testimonial__body">
                    <p>
                        Thank you for providing great platform for learning.
                        Recently amazon visited our campus and I was
                        interviewed by Amazon and got the offer just because
                        of geeksforgeeks. Thanks a lot.
                    </p>
                </div>
            </article>
 
            <article class="testimonial swiper-slide">
                <div class="avatar">
                    <img alt="" src=
                </div>
                <div class="testimonial__info">
                    <h5>Murlidar Setty</h5>
                    <small>Placed</small>
                </div>
                <div class="testimonial__body">
                    <p>
                        Thank you so much for providing one of the best
                        portal to learn problem solving techniques,
                        programming languages, Puzzles and many more.
                    </p>
                </div>
            </article>
        </div>
        <div class="swiper-pagination"></div>
    </section>
 
    <!-- ===================End Testimonials==================== -->
 
    <!-- ===============FAQ======================= -->
 
    <section class="faqs">
        <h2 style="color:rgb(98, 95, 95);">
            Frequently Asked Questions
        </h2>
        <div class="container faqs__container">
            <article class="faq ">
                <div class="faq__icon">
                    <i class="uil uil-plus"></i>
                </div>
                <div class="question__answer">
                    <h4>
                        Will I actually get 90% of my course fee back?
                    </h4>
                    <p>
                        Yes, To qualify for the refund,you must complete 90%
                        of the course content within 90 days from
                        the date of purchase.
                    </p>
                </div>
            </article>
 
            <article class="faq">
                <div class="faq__icon">
                    <i class="uil uil-plus"></i>
                </div>
                <div class="question__answer">
                    <h4>
                        Is there any number to contact for queries?
                    </h4>
                    <p>
                        You may call us on +91-7982906637 in case
                        of any query.
                    </p>
                </div>
            </article>
 
            <article class="faq">
                <div class="faq__icon">
                    <i class="uil uil-plus"></i>
                </div>
                <div class="question__answer">
                    <h4>
                        How can I enroll for this program?
                    </h4>
                    <p>
                        You need to fill out an Application form post
                        initial registration. After that, your application
                        will be reviewed by our team to assess your
                        eligibility for this program.
                    </p>
                </div>
            </article>
 
            <article class="faq">
                <div class="faq__icon">
                    <i class="uil uil-plus"></i>
                </div>
                <div class="question__answer">
                    <h4>
                        What if I am not selected?
                    </h4>
                    <p>
                        You will be able to re-apply to the program
                        based on your eligibility criteria.
                    </p>
                </div>
            </article>
 
            <article class="faq">
                <div class="faq__icon">
                    <i class="uil uil-plus"></i>
                </div>
                <div class="question__answer">
                    <h4>
                        Once I am enrolled in the program, for
                        how long will the course content be available for?
                    </h4>
                    <p>
                        The course content will be available for a period
                        of 1 year from the date of purchase.
                    </p>
                </div>
            </article>
 
            <article class="faq">
                <div class="faq__icon">
                    <i class="uil uil-plus"></i>
                </div>
                <div class="question__answer">
                    <h4>
                        Can I make the payment through PayPal?
                    </h4>
                    <p>
                        Yes. Mail us with your details at
                        courses@geeksforgeeks.org.
                    </p>
                </div>
            </article>
        </div>
    </section>
 
    <!-- ========================End FAQ===================== -->
 
    <!-- =================================Footer===================== -->
 
    <footer>
        <div class="container footer__container">
            <div class="footer__1">
                <a href="/index.html" class="footer__logo">
                    <a href="index.html">
                        <img alt="" src=
 
                    </a>
                </a>
                    <p>
                        <i class="uil uil-location-point"></i>
                        A-143, 9th Floor, Sovereign Corporate Tower,
                        Sector-136, Noida, Uttar Pradesh - 201305
                    </p>
            </div>
            <div class="footer__2">
                <h4>Explore</h4>
                <ul class="permalinks">
                    <li><a href="./index.html">Home</a></li>
                    <li><a href="./about.html">About</a></li>
                    <li><a href="./courses.html">Courses</a></li>
                    <li><a href="./contact.html">Contact</a></li>
                </ul>
            </div>
 
            <div class="footer__3">
                <h4>Legal</h4>
                <ul class="privacy">
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms and conditions</a></li>
                    <li><a href="#">Refund Policy</a></li>
                </ul>
            </div>
            <div class="footer__4">
                <h4>Contact Us</h4>
                <div>
                    <p>08069289001</p>
                    <p>Noida, Uttar Pradesh (201305)</p>
                </div>
                <ul class="footer__socials">
                    <li>
                        <a href="#">
                            <i class="uil uil-facebook-f"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="uil uil-instagram-alt"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="uil uil-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="uil uil-linkedin-alt"></i>
                        </a>
                    </li>
                </ul>
            </div>
 
        </div>
        <div class="footer__copyright">
            <small>
                <strong style="color: green;">
                    GeeksforGeeks 2.0
                </strong>
                © All Right Reserved
            </small>
        </div>
    </footer>
 
    <!-- ============================End Footer=========================== -->
 
 
    <script src=
    </script>
    <script src="./script.js"></script>
    <script src="./main.js"></script>
</body>
 
</html>


HTML




<!-- --------------------------- courses.html ------------------------- -->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href=
        type="image/x-icon">
    <title>GeeksforGeeks 2.0</title>
 
    <!------------Iconscout CDN--------------------->
    <link rel="stylesheet" href=
    <link rel="shortcut icon" href=
        type="image/x-icon">
    <link rel="stylesheet" href="./style.css">
 
    <!-- --------------Google Fonts--------------------- -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href=
"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet">
 
 
    <!-- ----------------Swiper JS------------------------------ -->
    <link rel="stylesheet" href=
</head>
 
<body>
    <nav>
        <div class="container nav__container">
            <a href="./index.html">
                <img src=
                    style="max-width: 150px;">
            </a>
            <ul class="nav__menu">
                <li><a href="./index.html">Home</a></li>
                <li><a href="./about.html">About</a></li>
                <li><a href="./courses.html">Courses</a></li>
                <li><a href="./contact.html">Contact</a></li>
            </ul>
            <button id="open-menu-btn">
                <i class="uil uil-bars"></i>
            </button>
            <button id="close-menu-btn">
                <i class="uil uil-multiply"></i>
            </button>
        </div>
    </nav>
    <!-- ======================End Navbar================== -->
    <br><br>
    <section class="courses" style="margin-top: -2px;">
        <div class="container courses__container">
            <article class="course">
                <div class="course__image">
                    <img src=
                        alt="">
                </div>
                <div class="course__info">
                    <h4 style="text-align: justify;">
                        DSA to Development: A Complete Guide
                    </h4>
                    <p style="text-align: justify;">
                        "GeeksforGeeks 2.0 offers a 90% refund if
                        you complete 90% of the course within 90 days."
                    </p>
                    <a href=
                        class="btn btn-primary">
                        Explore
                    </a>
                </div>
            </article>
 
            <article class="course">
                <div class="course__image">
                    <img src=
                </div>
                <div class="course__info">
                    <h4 style="text-align: justify;">
                        Full Stack Development with React & Node JS - Live
                    </h4>
                    <p style="text-align: justify;">
                        "GeeksforGeeks 2.0 offers a 90% refund if
                        you complete 90% of the course within 90 days."
                    </p>
                    <a href=
                        class="btn btn-primary">
                        Explore
                    </a>
                </div>
            </article>
 
            <article class="course">
                <div class="course__image">
                    <img src=
                </div>
                <div class="course__info">
                    <h4 style="text-align: justify;">
                        Tech Interview 101 - From DSA to System Design
                    </h4>
                    <p style="text-align: justify;">
                        "GeeksforGeeks 2.0 offers a 90% refund if you
                        complete 90% of the course within 90 days."
                    </p>
                    <a href=
                        class="btn btn-primary">
                        Explore
                    </a>
                </div>
            </article>
 
            <article class="course">
                <div class="course__image">
                    <img src=
                </div>
                <div class="course__info">
                    <h4 style="text-align: justify;">
                        Data Structures & Algorithms in Python - Self Paced
                    </h4>
                    <p style="text-align: justify;">
                        "GeeksforGeeks 2.0 offers a 90% refund if you
                        complete 90% of the course within 90 days."
                    </p>
                    <a href=
                        class="btn btn-primary">
                        Explore
                    </a>
                </div>
            </article>
 
            <article class="course">
                <div class="course__image">
                    <img src=
                </div>
                <div class="course__info">
                    <h4 style="text-align: justify;">
                        Complete Test Series for Product-Based Companies
                    </h4>
                    <p style="text-align: justify;">
                        "GeeksforGeeks 2.0 offers a 90% refund if you
                        complete 90% of the course within 90 days."
                    </p>
                    <a href=
                        class="btn btn-primary">
                        Explore
                    </a>
                </div>
            </article>
 
            <article class="course">
                <div class="course__image">
                    <img src=
                </div>
                <div class="course__info">
                    <h4 style="text-align: justify;">
                        Master Java Programming - Complete Beginner to Advanced
                    </h4>
                    <p style="text-align: justify;">
                        "GeeksforGeeks 2.0 offers a 90% refund if you
                        complete 90% of the course within 90 days."
                    </p>
                    <a href=
                        class="btn btn-primary">
                        Explore
                    </a>
                </div>
            </article>
 
            <article class="course">
                <div class="course__image">
                    <img src=
                </div>
                <div class="course__info">
                    <h4 style="text-align: justify;">
                        Complete Guide to Software Testing and Automation
                    </h4>
                    <p style="text-align: justify;">
                        "GeeksforGeeks 2.0 offers a 90% refund if you
                        complete 90% of the course within 90 days."
                    </p>
                    <a href=
                        class="btn btn-primary">
                        Explore
                    </a>
                </div>
            </article>
 
            <article class="course">
                <div class="course__image">
                    <img src=
                </div>
                <div class="course__info">
                    <h4 style="text-align: justify;">
                        Complete Interview Preparation
                    </h4>
                    <p style="text-align: justify;">
                        "GeeksforGeeks 2.0 offers a 90% refund if you
                        complete 90% of the course within 90 days."
                    </p>
                    <a href=
                        class="btn btn-primary">
                        Explore
                    </a>
                </div>
            </article>
 
            <article class="course">
                <div class="course__image">
                    <img src=
                </div>
                <div class="course__info">
                    <h4 style="text-align: justify;">
                        JAVA Backend Development - Live
                    </h4>
                    <p style="text-align: justify;">
                        "GeeksforGeeks 2.0 offers a 90% refund if you
                        complete 90% of the course within 90 days."
                    </p>
                    <a href=
                        class="btn btn-primary">
                        Explore
                    </a>
                </div>
            </article>
        </div>
    </section>
 
    <!-- =================================Footer===================== -->
 
    <footer>
        <div class="container footer__container">
            <div class="footer__1">
                <a href="./index.html" class="footer__logo">
                    <a href="./index.html">
                        <img src=
                    </a>
                </a>
                <p>
                    <i class="uil uil-location-point"></i>
                    A-143, 9th Floor, Sovereign Corporate Tower,
                    Sector-136, Noida, Uttar Pradesh - 201305
                </p>
            </div>
            <div class="footer__2">
                <h4>Explore</h4>
                <ul class="permalinks">
                    <li><a href="./index.html">Home</a></li>
                    <li><a href="./about.html">About</a></li>
                    <li><a href="./courses.html">Courses</a></li>
                    <li><a href="./contact.html">Contact</a></li>
                </ul>
            </div>
 
            <div class="footer__3">
                <h4>Legal</h4>
                <ul class="privacy">
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms and conditions</a></li>
                    <li><a href="#">Refund Policy</a></li>
                </ul>
            </div>
            <div class="footer__4">
                <h4>Contact Us</h4>
                <div>
                    <p>08069289001</p>
                    <p>Noida, Uttar Pradesh (201305)</p>
                </div>
                <ul class="footer__socials">
                    <li>
                        <a href="#">
                            <i class="uil uil-facebook-f"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="uil uil-instagram-alt"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="uil uil-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="uil uil-linkedin-alt"></i>
                        </a>
                    </li>
                </ul>
            </div>
 
        </div>
        <div class="footer__copyright">
            <small>
                <strong style="color: green;">
                    GeeksforGeeks 2.0
                </strong>
                © All Right Reserved
            </small>
        </div>
    </footer>
 
    <!-- ============================End Footer=========================== -->
 
    <script src=
    </script>
    <script src="./script.js"></script>
</body>
 
</html>


HTML




<!-- ------------ contact.html------------ -->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href=
        type="image/x-icon">
 
    <title>GeeksforGeeks 2.0</title>
 
    <!------------Iconscout CDN--------------------->
    <link rel="stylesheet" href=
    <link rel="shortcut icon" href=
        type="image/x-icon">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./contact.css">
 
    <!-- --------------Google Fonts--------------------- -->
    <link rel="preconnect" href=
    <link rel="preconnect" href=
    <link href=
"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet">
 
 
    <!-- ----------------Swiper JS------------------------------ -->
    <link rel="stylesheet" href=
</head>
 
<body>
    <nav>
        <div class="container nav__container">
            <a href="./index.html">
                <img src=
                    style="max-width: 150px;">
            </a>
            <ul class="nav__menu">
                <li><a href="./index.html">Home</a></li>
                <li><a href="./about.html">About</a></li>
                <li><a href="./courses.html">Courses</a></li>
                <li><a href="./contact.html">Contact</a></li>
            </ul>
            <button id="open-menu-btn">
                <i class="uil uil-bars"></i>
            </button>
            <button id="close-menu-btn">
                <i class="uil uil-multiply"></i>
            </button>
        </div>
    </nav>
 
    <!-- ======================End Navbar================== -->
 
    <!-- ==========================Contact Page======================== -->
    <br>
    <section class="contact">
        <div class="container contact__container">
            <aside class="contact__aside">
                <div class="aside__image">
                    <img src=
                </div>
                <h2 style="color: gray;">Contact Us</h2>
                <p>
                    Contact us for any type of query. GeeksforGeeks 2.0
                    is always available to answer you.
                </p>
 
                <ul class="contact__details">
                    <li>
                        <i class="uil uil-phone-times"></i>
                        <h5>08069289001</h5>
                    </li>
                    <li>
                        <i class="uil uil-envelope"></i>
                        <h5>feedback@geeksforgeeks.org</h5>
                    </li>
                    <li>
                        <i class="uil uil-location-point"></i>
                        <h5>Noida, Uttar Pradesh (201305)</h5>
                    </li>
                    <li>
                </ul>
                <ul class="contact__socials">
                    <li>
                        <a href="">
                            <i class="uil uil-facebook-f"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="uil uil-instagram"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                        <i class="uil uil-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="uil uil-linkedin-alt"></i>
                        </a>
                    </li>
                </ul>
 
            </aside>
 
            <form class="contact__form">
                <div class="form__name">
                    <input type="text" name="First Name"
                        placeholder="First Name" required>
                    <input type="text" name="Last Name"
                        placeholder="Last Name" required>
                </div>
                <input type="email" name="Email Address"
                    placeholder="Your Email Address" required>
                <textarea name="Message" rows="7"
                    placeholder="Message" required>
                </textarea>
                <button type="submit" class="btn btn-primary">
                    Send Message
                </button>
            </form>
        </div>
    </section>
 
    <!-- =====================End Contact Page=================================== -->
 
    <!-- =================================Footer===================== -->
 
    <footer>
        <div class="container footer__container">
            <div class="footer__1">
                <a href="./index.html" class="footer__logo">
                    <a href="./index.html">
                        <img src=
                    </a>
                </a>
                <p>
                    <i class="uil uil-location-point"></i>
                    A-143, 9th Floor, Sovereign Corporate Tower,
                    Sector-136, Noida, Uttar Pradesh - 201305
                </p>
            </div>
            <div class="footer__2">
                <h4>Explore</h4>
                <ul class="permalinks">
                    <li><a href="./index.html">Home</a></li>
                    <li><a href="./about.html">About</a></li>
                    <li><a href="./courses.html">Courses</a></li>
                    <li><a href="./contact.html">Contact</a></li>
                </ul>
            </div>
 
            <div class="footer__3">
                <h4>Legal</h4>
                <ul class="privacy">
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms and conditions</a></li>
                    <li><a href="#">Refund Policy</a></li>
                </ul>
            </div>
            <div class="footer__4">
                <h4>Contact Us</h4>
                <div>
                    <p>08069289001</p>
                    <p>Noida, Uttar Pradesh (201305)</p>
                </div>
                <ul class="footer__socials">
                    <li>
                        <a href="#">
                            <i class="uil uil-facebook-f"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="uil uil-instagram-alt"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="uil uil-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="uil uil-linkedin-alt"></i>
                        </a>
                    </li>
                </ul>
            </div>
 
        </div>
        <div class="footer__copyright">
            <small>
                <strong style="color: green;">
                    GeeksforGeeks 2.0
                </strong>
                © All Right Reserved
            </small>
        </div>
    </footer>
 
    <!-- ============================End Footer=========================== -->
    <script src=
    </script>
    <script src="./script.js"></script>
</body>
 
</html>


HTML




<!-- --------blog html------------- -->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href=
        type="image/x-icon">
 
    <title>GeeksforGeeks 2.0</title>
    <!-- ================ Box Icons ================ -->
    <link href=
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="./blog.css">
    <link href=
"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet">
</head>
 
<body>
    <!-- ===============Header=====================-->
    <header>
        <!-- =============Nav============ -->
        <div class="nav container">
            <img src=
                id="gfg">
            <a href="./index.html" class="login">
                home
            </a>
        </div>
    </header>
    <!-- =========home============ -->
    <section class="home" id="home">
        <div class="home-text continer">
            <img src=
                style="width: 100%; height:330px" alt="">
 
            <br>
            <span class="home-subtitle">
                Your source of great content
            </span>
        </div>
    </section>
    <!-- ======Post Filter========== -->
    <div class="post-filter ">
        <span class="filter-item active-filter"
            data-filter='all'>
            All
        </span>
        <span class="filter-item" data-filter="mobile">
            Development
        </span>
        <span class="filter-item" data-filter="design">
            Language
        </span>
        <span class="filter-item" data-filter="tech">
            Framework
        </span>
 
    </div>
    <!-- =========Posts=========== -->
    <section class="post container">
        <!-- ========Post Box 1======== -->
        <div class="post-box mobile ">
            <img src=
                class="post-img">
            <h2 class="category">Development</h2>
            <a href="https://www.geeksforgeeks.org/web-development/"
                target="_blank" class="post-title">
                Web Developement Tutorial
            </a>
            <p class="post-decription">
                Web development refers to the creat-ing, building,
                and maintaining of websites.It includes aspects such
                as web design, web publishing, web-programming, and
                database manage-ment.
            </p>
        </div>
        <!-- ========Post Box 2======== -->
        <div class="post-box mobile">
            <img src=
                class="post-img">
            <h2 class="category">Development</h2>
            <a href="https://www.geeksforgeeks.org/html-tutorial/"
                target="_blank" class="post-title">
                HTML Tutorial
            </a>
            <p class="post-decription">
                This HTML Tutorial is a Complete Guide for Beginners
                who want to learn HTML from basics. Here, we cover
                everything from HTML fundamentals such as Basic HTML
                Tags and their Attributes,
            </p>
        </div>
        <!-- ========Post Box 3======== -->
        <div class="post-box mobile">
            <img src=
                alt="CSS-Tutorial" class="post-img">
            <h2 class="category">Development</h2>
            <a href="https://www.geeksforgeeks.org/css-tutorial/"
                target="_blank" class="post-title">
                CSS Tutorial
            </a>
            <p class="post-decription">
                This CSS Tutorial is designed for both beginners and
                experienced professionals. Here, you will learn CSS
                from basic to advanced concepts, such as properties,
                selectors, functions, media queries, and more.
            </p>
            <!-- =========Profile========== -->
 
        </div>
 
    </section>
    <section class="post container">
        <!-- ========Post Box 4======== -->
        <div class="post-box mobile">
            <img src=
                class="post-img">
            <h2 class="category">Development</h2>
            <a href="https://www.geeksforgeeks.org/javascript/"
                target="_blank" class="post-title">
                JavaScript Tutorial
            </a>
            <p class="post-decription">
                This JavaScript Tutorial is designed to help both
                beginners and experienced professionals master the
                fundamentals of JavaScript. This free tutorial covers
                all JavaScript concepts.
            </p>
        </div>
        <!-- ========Post Box 5======== -->
        <div class="post-box design">
            <img src=
                class="post-img">
            <h2 class="category">Language</h2>
                target="_blank" class="post-title">
                Python Tutorial
            </a>
            <p class="post-decription">
                This Python Tutorial is very well suited for
                beginners and also for experienced programmers
                with other programming languages like C++ and Java.
            </p>
        </div>
        <!-- ========Post Box 6======== -->
        <div class="post-box design">
            <img src=
                class="post-img">
            <h2 class="category">Language</h2>
            <a href="https://www.geeksforgeeks.org/java/"
                target="_blank" class="post-title">
                Java Tutorial
            </a>
            <p class="post-decription">
                This Java Tutorial is designed for beginners
                as well as experienced professionals. Whether
                you’re looking to learn the basics of Java or
                its advanced concepts, this free Java tutorial
                is the perfect resource for you.
            </p>
 
        </div>
 
    </section>
    <section class="post container">
        <!-- ========Post Box 7======== -->
        <div class="post-box design">
            <img src=
                class="post-img">
            <h2 class="category">Language</h2>
            <a href="https://www.geeksforgeeks.org/c-plus-plus/"
                target="_blank" class="post-title">
                C++ Tutorial
            </a>
            <p class="post-decription">
                C++ is the most used and most popular programming
                language developed by Bjarne Stroustrup. C++ is a
                high-level and object-oriented programming language.
            </p>
        </div>
        <!-- ========Post Box 8======== -->
        <div class="post-box tech">
            <img src=
                target="_blank" class="post-img">
            <h2 class="category">Framework</h2>
            <a href="https://www.geeksforgeeks.org/django-tutorial/"
                class="post-title">
                Django Tutorial
            </a>
            <p class="post-decription">
                Django is a Python-based web framework that allows
                you to quickly create efficient web applications.
                It is also called batteries included framework because
                Django provides built-in features for everything including
                Django Admin Interface,
            </p>
        </div>
        <!-- ========Post Box 9======== -->
        <div class="post-box tech">
            <img src=
                class="post-img">
            <h2 class="category">Framework</h2>
            <a href="https://www.geeksforgeeks.org/react-tutorial/"
                target="_blank" class="post-title">
                React Tutorial
            </a>
            <p class="post-decription">
                This free React tutorial is designed for people
                who prefer to learn by doing. So if you are a
                beginner or advanced React developer, this tutorial
                will guide you through all the fundamentals to build
                any React app.
            </p>
        </div>
 
    </section>
    <!-- =========footer========= -->
    <div class="footer container">
        <p>
            ©
            <strong style="color: green;">
                GeeksforGeeks-2.0
            </strong>
            Right Reserved
        </p>
        <div class="social">
            <a href="#">
                <i class='bx bxl-facebook-circle'></i>
            </a>
            <a href="#">
                <i class='bx bxl-twitter'></i>
            </a>
            <a href="#">
                <i class='bx bxl-instagram-alt'></i>
            </a>
            <a href="#">
                <i class='bx bxl-linkedin-square'></i>
            </a>
        </div>
    </div>
 
    <!-- =============JQuery Link========== -->
        integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
        crossorigin="anonymous">
    </script>
    <!-- =======================Link to Js=============== -->
    <script src="./script.js"></script>
    <script>
        // =======Filter js==============
        $(document).ready(function () {
            $('.filter-item').click(function () {
                const value = $(this).attr("data-filter");
                if (value == "all") {
                    $(".post-box").show("1000");
                } else {
                    $(".post-box")
                        .not("." + value)
                        .hide("1000");
                    $(".post-box")
                        .filter("." + value)
                        .show("1000");
                }
 
            });
            $(".filter-item").click(function () {
                $(this).addClass("active-filter").
                siblings().removeClass("active-filter");
            });
        });
 
        const header = document.querySelector("header");
 
        window.addEventListener("scroll", () => {
            header.classList.
            toggle("shadow", window.scrollY > 0);
        });
    </script>
 
</body>
 
</html>


HTML




<!-- -------------------------- about.html ------------------ -->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href=
        type="image/x-icon">
    <title>GeeksforGeeks 2.0</title>
 
    <!------------Iconscout CDN--------------------->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./about.css">
 
    <!-- --------------Google Fonts--------------------- -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href=
"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet">
 
</head>
 
<body>
    <nav>
        <div class="container nav__container">
            <a href="index.html">
                <img src=
                    style="width: 150px;">
            </a>
            <ul class="nav__menu">
                <li><a href="./index.html">Home</a></li>
                <li><a href="./about.html">About</a></li>
                <li><a href="./courses.html">Courses</a></li>
                <li><a href="./contact.html">Contact</a></li>
            </ul>
            <button id="open-menu-btn">
                <i class="uil uil-bars"></i>
            </button>
            <button id="close-menu-btn">
                <i class="uil uil-multiply"></i>
            </button>
        </div>
    </nav>
    <!-- ===================End Navbar====================== -->
    <div class="about__achievements">
        <div class="container about__achievements-container">
            <div class="about__achievements-left">
                <img src=
            </div>
            <div class="about__achievements-right">
                <h1 style="color: rgb(114, 114, 114);">
                    Achievements
                </h1>
                <p style="text-align: justify;">
                    GeeksforGeeks is a computer science portal founded
                    by Sandeep Jain in 2009. It started as a blog to share
                    computer science concepts and has grown into a comprehensive
                    platform for learning and practicing coding. It is based in
                    Noida, Uttar Pradesh, India. Industry: E-Learning, EdTech
                    Product, Services and Operations: - Provides a wide range of
                    articles on various topics related to computer science and
                    programming.
                </p>
                <div class="achievements__cards">
                    <article class="achievement_card">
                        <span class="achievement__icon">
                            <i class="uil uil-video"></i>
                        </span>
                        <h2>40+</h2>
                        <p>Courses</p>
                    </article>
 
                    <article class="achievement_card">
                        <span class="achievement__icon">
                            <i class="uil uil-users-alt"></i>
                        </span>
                        <h2>50,000+</h2>
                        <p>Students</p>
                    </article>
 
                    <article class="achievement_card">
                        <span class="achievement__icon">
                            <i class="uil uil-trophy"></i>
                        </span>
                        <h2>100+</h2>
                        <p>Job Opportunity</p>
                    </article>
                </div>
            </div>
        </div>
    </div>
    <br><br>
    <!-- =================End Achievements======================= -->
    <section class="team">
        <h2>GeeksforGeeks 2.0 Team</h2>
        <div class="container team__container">
            <article class="team__member">
                <div class="team__member-image">
                    <img src=
                </div>
                <div class="team__member-info">
                    <h4>Sandeep Jain</h4>
                    <p>CEO @ GFG</p>
                </div>
                <div class="team__member-socials">
                    <a href="#" target="_blank">
                        <i class="uil uil-instagram"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-twitter-alt"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-linkedin-alt"></i>
                    </a>
                </div>
            </article>
 
            <article class="team__member">
                <div class="team__member-image">
                    <img src=
                </div>
                <div class="team__member-info">
                    <h4>Chhaya Jain</h4>
                    <p>Director @ GFG</p>
                </div>
                <div class="team__member-socials">
                    <a href="#" target="_blank">
                        <i class="uil uil-instagram"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-twitter-alt"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-linkedin-alt"></i>
                    </a>
                </div>
            </article>
 
            <article class="team__member">
                <div class="team__member-image">
                    <img src=
                </div>
                <div class="team__member-info">
                    <h4>Shikhar Goel</h4>
                    <p>CTO @ GFG</p>
                </div>
                <div class="team__member-socials">
                    <a href="#" target="_blank">
                        <i class="uil uil-instagram"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-twitter-alt"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-linkedin-alt"></i>
                    </a>
 
                </div>
            </article>
 
            <article class="team__member">
                <div class="team__member-image">
                    <img src=
                </div>
                <div class="team__member-info">
                    <h4>Asihsh Jangra</h4>
                    <p>Mentor @ GFG</p>
                </div>
 
                <div class="team__member-socials">
                    <a href="#" target="_blank">
                        <i class="uil uil-instagram"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-twitter-alt"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-linkedin-alt"></i>
                    </a>
 
                </div>
            </article>
 
            <article class="team__member">
                <div class="team__member-image">
                    <img src=
                </div>
                <div class="team__member-info">
                    <h4>Gaurav Raj</h4>
                    <p>Metor @ GFG</p>
                </div>
 
                <div class="team__member-socials">
                    <a href="#" target="_blank">
                        <i class="uil uil-instagram"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-twitter-alt"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-linkedin-alt"></i>
                    </a>
 
                </div>
            </article>
 
            <article class="team__member">
                <div class="team__member-image">
                    <img src=
                </div>
                <div class="team__member-info">
                    <h4>Devashish Khare</h4>
                    <p>Mentor @ GFG</p>
                </div>
                <div class="team__member-socials">
                    <a href="#" target="_blank">
                        <i class="uil uil-instagram"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-twitter-alt"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-linkedin-alt"></i>
                    </a>
                </div>
            </article>
 
            <article class="team__member">
                <div class="team__member-image">
                    <img src=
                </div>
                <div class="team__member-info">
                    <h4>Jay Dalsaniya</h4>
                    <p>Mentor @ GFG</p>
                </div>
                <div class="team__member-socials">
                    <a href="#" target="_blank">
                        <i class="uil uil-instagram"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-twitter-alt"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-linkedin-alt"></i>
                    </a>
                </div>
            </article>
 
            <article class="team__member">
                <div class="team__member-image">
                    <img src=
                </div>
                <div class="team__member-info">
                    <h4>Karan Mashru
                    </h4>
                    <p>Mentor @ GFG</p>
                </div>
                <div class="team__member-socials">
                    <a href="#" target="_blank">
                        <i class="uil uil-instagram"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-twitter-alt"></i>
                    </a>
                    <a href="#" target="_blank">
                        <i class="uil uil-linkedin-alt"></i>
                    </a>
 
                </div>
            </article>
        </div>
    </section>
    <!-- =======================End Achievements==================== -->
 
    <!-- =================================Footer===================== -->
 
    <footer>
        <div class="container footer__container">
            <div class="footer__1">
                <a href="./index.html" class="footer__logo">
                    <a href="./index.html">
                        <img src=
                    </a>
                </a>
                <p>
                    <i class="uil uil-location-point"></i>
                    A-143, 9th Floor, Sovereign Corporate Tower,
                    Sector-136, Noida, Uttar Pradesh - 201305
                </p>
            </div>
            <div class="footer__2">
                <h4>Explore</h4>
                <ul class="permalinks">
                    <li><a href="./index.html">Home</a></li>
                    <li><a href="./about.html">About</a></li>
                    <li><a href="./courses.html">Courses</a></li>
                    <li><a href="./contact.html">Contact</a></li>
                </ul>
            </div>
 
            <div class="footer__3">
                <h4>Legal</h4>
                <ul class="privacy">
                    <li>
                        <a href="#">Privacy Policy</a>
                    </li>
                    <li>
                        <a href="#">Terms and conditions</a>
                    </li>
                    <li>
                        <a href="#">Refund Policy</a>
                    </li>
                </ul>
            </div>
            <div class="footer__4">
                <h4>Contact Us</h4>
                <div>
                    <p>08069289001</p>
                    <p>Noida, Uttar Pradesh (201305)</p>
                </div>
                <ul class="footer__socials">
                    <li>
                        <a href="#">
                            <i class="uil uil-facebook-f"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="uil uil-instagram-alt"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="uil uil-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="uil uil-linkedin-alt"></i>
                        </a>
                    </li>
                </ul>
            </div>
 
        </div>
        <div class="footer__copyright">
            <small>
                <strong style="color: green;">
                    GeeksforGeeks 2.0
                </strong>
                © All Right Reserved
            </small>
        </div>
    </footer>
 
    <!-- ============================End Footer=========================== -->
    <script src="./script.js"></script>
 
 
</body>
 
</html>


HTML




<!-- ================= login.html============ -->
 
<!DOCTYPE html>
<html lang="en" dir="ltr">
 
<head>
    <meta charset="utf-8" />
    <title>
        Login and Registration Form in HTML | GFG
    </title>
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./login.css">
</head>
 
<body>
 
 
    <div class="wrapper">
 
        <div class="title-text">
            <div class="title login">
                <a href="./index.html" class="title login"
                    style="text-decoration: none;">
                    GeeksforGeeks
                </a>
            </div>
            <div class="title signup">
                <a href="./index.html" class="title login"
                    style="text-decoration: none;">
                    GeeksforGeeks
                </a>
            </div>
            <br /><br />
        </div>
        <div class="form-container">
            <div class="slide-controls">
                <input type="radio" name="slide" id="login" checked />
                <input type="radio" name="slide" id="signup" />
                <label for="login" class="slide login">
                    Sign In
                </label>
                <label for="signup" class="slide signup">
                    Sign up
                </label>
                <div class="slider-tab"></div>
            </div>
            <div class="form-inner">
                <form action="#" class="login">
                    <div class="field">
                        <label for="">Email Address</label>
                        <input type="text" placeholder="" required />
                    </div>
                    <br />
                    <div class="field">
                        <label>Password</label>
                        <input type="password" placeholder="" required />
                    </div>
                    <br />
                    <div class="field btn">
                        <input type="submit" value="Login" />
                    </div>
                    <div class="signup-link">
                        Don't Have Account?
                        <a href="">Signup</a>
                    </div>
                </form>
                <form action="#" class="signup">
                    <div class="field">
                        <label for="">Full Name</label>
                        <input type="text" placeholder="" required />
                    </div>
                    <br />
                    <div class="field">
                        <label for="">Email Address</label>
                        <input type="email" placeholder="" required />
                    </div>
                    <br />
                    <div class="field">
                        <label for="">Password</label>
                        <input type="password" placeholder="" required />
                    </div>
                    <br />
                    <div class="field btn">
                        <input type="submit" value="Signup" />
                    </div>
 
                </form>
            </div>
 
        </div>
    </div>
 
    <script src="./login.js">
 
    </script>
</body>
 
</html>


CSS Files:

CSS




/* --------------------  style.css ---------------------- */
 
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    list-style-type: none;
    box-sizing: border-box;
}
 
:root {
    --color-primary: rgb(214, 205, 205);
    --color-success: #00bf8e;
    --color-warning: #f7c94b;
    --color-danger: rgb(19, 102, 19);
    --color-danger-varient: rgba(247, 88, 66, 0.4);
    --color-white: black;
    --color-light: rgba(30, 14, 14, 0.7);
    --color-black: #000;
    --color-bg: white;
    --color-bg1: rgb(241, 227, 227);
    --color-bg2: white;
    --container-width-lg: 76%;
    --container-width-md: 90%;
    --container-width-sm: 94%;
    --transition: all 400ms ease;
}
 
body {
    font-family: "Montserrat", sans-serif;
    line-height: 1.7;
    color: var(--color-white);
    background-color: var(--color-bg);
}
 
.container {
    width: var(--container-width-lg);
    margin: 0 auto;
}
 
section {
    padding: 6rem 0;
}
 
section h2 {
    text-align: center;
    margin-bottom: 4rem;
}
 
h1,
h2,
h3,
h4,
h5 {
    line-height: 1.2;
}
 
h1 {
    font-size: 2.4rem;
}
 
h2 {
    font-size: 2rem;
}
 
h3 {
    font: 1.6rem;
}
 
h4 {
    font-size: 1.3rem;
}
 
a {
    color: var(--color-white);
}
 
img {
    width: 100%;
    display: block;
    object-fit: cover;
 
}
 
.btn {
    display: inline-block;
    background: white;
    color: green;
    padding: 0.7rem 2rem;
    border: 1px solid green;
    font-weight: 500;
    border-radius: 7px;
    transition: var(--transition);
}
 
.btn:hover {
    background: green;
    color: white;
    border-color: green;
}
 
.btn-primary {
    background: transparent;
    color: green;
}
 
/* Navbar*/
nav {
    background: transparent;
    width: 100vw;
    height: 5rem;
    position: fixed;
    top: 0;
    z-index: 11;
}
 
/* change navbar styles on scroll */
 
.window-scroll {
    background: var(--color-primary);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
 
}
 
.nav__container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
nav button {
    display: none;
}
 
.nav__menu {
    display: flex;
    align-items: center;
    gap: 4rem;
}
 
.nav__menu a {
    font-size: 1rem;
    font-weight: bold;
    transition: var(--transition);
}
 
.nav__menu a:hover {
    color: green;
 
}
 
/* Header================ */
header {
    position: relative;
    top: 5rem;
    overflow: hidden;
    height: 70vh;
    margin-bottom: 5rem;
}
 
header h1 {
    color: rgb(63, 60, 60);
}
 
.header__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 5rem;
    height: 100%;
}
 
.header__left p {
    margin: 1rem 0 2.4rem;
}
 
/* =Categories======= */
.categories {
    background: var(--color-bg1);
    height: 32rem;
}
 
.categories h1 {
    line-height: 1;
    margin-bottom: 3rem;
    color: rgb(93, 87, 87);
}
 
.categories__container {
    display: grid;
    grid-template-columns: 40% 60%;
}
 
.categories__left {
    margin-right: 4rem;
 
}
 
.categories__left p {
    margin: 1rem 0 3rem;
}
 
.categories__right {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: -70px;
    gap: 1.2rem;
}
 
.category {
    background: var(--color-bg2);
    padding: 2rem;
    border-radius: 2rem;
    transition: var(--transition);
    border: 0.5px solid gray;
}
 
.category:hover {
    box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.3);
    z-index: 1;
}
 
.category:nth-child(2) .category__icon {
    background: var(--color-danger);
}
 
.category:nth-child(3) .category__icon {
    background: var(--color-success);
}
 
.category:nth-child(4) .category__icon {
    background: var(--color-warning);
}
 
.category:nth-child(5) .category__icon {
    background: var(--color-success);
}
 
.category:nth-child(6) .category__icon {
    background: var(--color-bg1);
}
 
.category__icon {
    background: var(--color-primary);
    padding: 0.7rem;
    border-radius: 0.9rem;
}
 
.category h5 {
    margin: 2rem 0 1rem;
}
 
.category p {
    font-size: 0.85rem;
}
 
/* ===Courses============== */
.courses {
    margin-top: 10rem;
}
 
.courses__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
 
.course {
    background: var(--color-bg1);
    box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.4);
    text-align: center;
    border: 1px solid transparent;
    transition: var(--transition);
}
 
.course:hover {
    background: transparent;
    border-color: var(--color-primary);
}
 
.course__info {
    padding: 2rem;
}
 
.course__info p {
    margin: 1.2rem 0 2rem;
    font-size: 0.9rem;
 
}
 
/* FAQ */
.faqs {
    background: var(--color-bg1);
    box-shadow: insert 0 0 3rem rgba(0, 0, 0, 0.5);
}
 
.faqs__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
 
.faq {
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.0rem;
    height: fit-content;
    background: rgb(251, 250, 250);
    cursor: pointer;
}
 
.faq h4 {
    font-size: 1rem;
    line-height: 2.2;
}
 
.faq__icon {
    align-self: flex-start;
    font-size: 1.2rem;
}
 
.faq p {
    margin-top: 0.8rem;
    display: none;
}
 
.faq.open p {
    display: block;
}
 
/* Testimonial */
.testimonials__container {
    overflow-x: hidden;
    position: relative;
    margin-bottom: 5rem;
}
 
.testimonial {
    padding-top: 2rem;
}
 
.avatar {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 0.5rem;
    border: 1rem solid var(--color-bg);
}
 
.testimonial__info {
    text-align: center;
}
 
.testimonial__body {
    background: var(--color-primary);
    padding: 1.5rem;
    margin-top: 3rem;
    position: relative;
}
 
.testimonial__body::before {
    content: '';
    display: block;
    background:
        linear-gradient(135deg, transparent,
        var(--color-primary), var(--color-primary),
        var(--color-primary));
    width: 3rem;
    height: 3rem;
    left: 50%;
    top: -1.5rem;
    position: absolute;
    transform: rotate(45deg);
}
 
/* =Footer=*/
footer {
    background: var(--color-bg1);
    padding: 5rem;
    font-size: 0.9rem;
}
 
.footer__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5rem;
}
 
.footer__container>div h4 {
    margin-bottom: 1.2rem;
}
 
.footer__1 p {
    margin: 0 0 2rem;
}
 
footer ul li {
    margin-bottom: 0.7rem;
}
 
footer ul li a:hover {
    text-decoration: underline;
}
 
.footer__socials {
    display: flex;
    gap: 1rem;
    font-size: 1.2rem;
    margin-top: 2rem;
}
 
.footer__copyright {
    text-align: center;
    margin-top: 4rem;
    padding: 1.2rem 0;
    border-top: 1px solid var(--color-bg2);
}
 
 
/* Move Icon */
 
.header__right-image img {
    /* Set initial position */
    position: relative;
    animation:
        moveUpDown 2s infinite
        alternate ease-in-out;
}
 
@keyframes moveUpDown {
    0% {
        transform: translateY(0);
        /* Start position */
    }
 
    100% {
        transform: translateY(20px);
        /* End position - adjust as needed */
    }
}
 
/* Move FAQ Feature */
 
.faq:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 
.faq {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
 
 
/* Media Queries (Tablets) */
 
@media screen and (max-width: 1024px) {
    .container {
        width: var(--container-width-md);
    }
 
    h1 {
        font-size: 2.2rem;
    }
 
    h2 {
        font-size: 1.7rem;
    }
 
    h3 {
        font-size: 1.4rem;
    }
 
    h4 {
        font-size: 1.2rem;
    }
 
    /* Navbar */
    nav button {
        display: inline-block;
        background: transparent;
        font-size: 1.8rem;
        color: var(--color-white);
        cursor: pointer;
    }
 
    nav button#close-menu-btn {
        display: none;
    }
 
    .nav__menu {
        position: fixed;
        top: 5rem;
        right: 5%;
        height: fit-content;
        width: 18rem;
        flex-direction: column;
        gap: 0;
        display: none;
    }
 
    .nav__menu li {
        width: 100%;
        height: 5.8rem;
        animation: animateNavItems 400ms linear forwards;
        transform-origin: top right;
        opacity: 0;
    }
 
    .nav__menu li:nth-child(2) {
        animation-delay: 200ms;
    }
 
    .nav__menu li:nth-child(3) {
        animation-delay: 400ms;
    }
 
    .nav__menu li:nth-child(4) {
        animation-delay: 600ms;
    }
 
    @keyframes animateNavItems {
        0% {
            transform: rotateZ(-90deg);
        }
 
        100% {
            transform: rotateZ(0);
            opacity: 1;
        }
    }
 
    .nav__menu li a {
        background: var(--color-primary);
        box-shadow: -4rem 6rem 10rem rgba(0, 0, 0, 0.6);
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
    }
 
    .nav__menu li a:hover {
        background: var(--color-bg2);
        color: var(--color-white);
    }
 
    /* Header */
    header {
        height: 52vh;
        margin-bottom: 4rem;
    }
 
    .header__container {
        gap: 0;
        padding-bottom: 3rem;
    }
 
    /* Categories */
    .categories {
        height: auto;
    }
 
    .categories__container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
 
    .categories__left {
        margin-right: 0;
    }
 
    /* Course */
    .courses {
        margin-top: 0;
    }
 
    .courses__container {
        grid-template-columns: 1fr 1fr;
    }
 
    /* FAQs */
    .faqs__container {
        grid-template-columns: 1fr;
    }
 
    .faq {
        padding: 1.5rem;
    }
 
    /* Footer */
    .footer__container {
        grid-template-columns: 1fr 1fr;
    }
}
 
/* Media Query (Phone) */
@media screen and (max-width:600px) {
    .container {
        width: var(--container-width-sm);
    }
 
    /* Navbar*/
    .nav__menu {
        right: 3%;
    }
 
    /* Header=============== */
    header {
        height: 100vh;
    }
 
    .header__container {
        grid-template-columns: 1fr;
        text-align: center;
        margin-top: 0rem;
    }
 
    .header__left p {
        margin-bottom: 1.3rem;
    }
 
    /* Category*/
    .categories__right {
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
    }
 
    .category {
        padding: 1rem;
        border-radius: 1rem;
    }
 
    .category__icon {
        margin-top: 4px;
        display: inline-block;
    }
 
    /* Courses==================/ */
    .courses__container {
        grid-template-columns: 1fr;
    }
 
    /* Testimonial=========== */
    .testimonial__body {
        padding: 1.2rem;
    }
 
    /* Footer */
    .footer__container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
 
    .footer__1 p {
        margin: 1rem auto;
    }
 
    .footer__socials {
        justify-content: center;
    }
 
}


CSS




/* --------------------  contact.css ---------------------- */
 
.contact__container {
    background: var(--color-bg1);
    padding: 4rem;
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 4rem;
    height: 30rem;
    margin: 7rem auto;
    border-radius: 1rem;
 
}
 
/* ================Aside======================= */
.contact__aside {
    padding: 3rem;
    border-radius: 1rem;
    position: relative;
    bottom: 10rem;
    background: var(--color-bg2);
    border: 1px solid black;
}
 
.aside__image {
    width: 12rem;
    margin-bottom: 2rem;
}
 
.contact__aside h2 {
    text-align: left;
    margin-bottom: 1rem;
}
 
.contact__aside p {
    font-size: 0.9rem;
    margin-bottom: 2rem;
}
 
.contact__details li {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}
 
.contact__details li {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}
 
.contact__socials {
    display: flex;
    gap: 0.8rem;
    margin-top: 3rem;
}
 
.contact__socials a {
    background: var(--color-bg1);
    padding: 0.9rem;
    border-radius: 50%;
    font-size: 1rem;
    transition: var(--transition);
}
 
.contact__socials a:hover {
    background: transparent;
}
 
/* ==============Form============== */
.contact__form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-right: 4rem;
}
 
.form__name {
    display: flex;
    gap: 1.2rem;
}
 
.contact__form input[type="text"] {
    width: 50%;
}
 
input,
textarea {
    width: 100%;
    padding: 1rem;
    background: var(--color-bg);
    color: var(--color-white);
    font-weight: bold;
    font-size: 14px;
}
 
.contact__form .btn {
    width: max-content;
    margin-top: 1rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
}
 
/* ==================== Media Query (Tablets)============ */
@media screen and (max-width: 1024px) {
    .contact {
        padding-bottom: 0;
 
    }
 
    .contact__container {
        gap: 1.5rem;
        margin-top: 3rem;
        height: auto;
        padding: 1.5rem;
    }
 
    .contact__aside {
        width: auto;
        padding: 1.5rem;
        bottom: 0;
    }
 
    .contact__form {
        align-self: center;
        margin-right: 1.5rem;
    }
 
}
 
/* ==================== Media Query (Phone)============ */
@media screen and (max-width: 600px) {
    .contact__container {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-top: 0;
        padding: 0;
    }
 
    .contact__form {
        margin: 0 1.5rem 3rem;
    }
 
    .form__name {
        flex-direction: column;
    }
 
    .form__name input[type="text"] {
        width: 100%;
    }
 
}


CSS




/* --------------------  about.css ---------------------- */
 
/* =========================Achievements ================= */
 
.about__achievements {
    margin-top: 10rem;
}
 
.about__achievements-container {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 5rem;
}
 
.about__achievements-right>p {
    margin: 1.6rem 0 2.5rem;
 
}
 
.achievements__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
 
.achievement_card {
    background: var(--color-bg1);
    padding: 1.6rem;
    border-radius: 1rem;
    text-align: center;
    transition: var(--transition);
}
 
.achievement_card:hover {
    background: var(--color-bg2);
    box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.3);
}
 
.achievement__icon {
    background: var(--color-danger);
    border-radius: 0.9rem;
    padding: 0.2rem;
    width: 55px;
    display: inline-block;
    margin-bottom: 2rem;
    font-size: 2rem;
 
}
 
.achievement_card:nth-child(2) .achievement__icon {
    background: var(--color-success);
}
 
.achievement_card:nth-child(3) .achievement__icon {
    background: var(--color-primary);
}
 
.achievement_card p {
    margin-top: 1rem;
}
 
/* ===========Achievement===================== */
.team {
    background: var(--color-bg1);
    box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5);
}
 
.team__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
 
.team__member {
    background: var(--color-bg2);
    padding: 2rem;
    border: 1px solid transparent;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
 
.team__member:hover {
    background: transparent;
    border-color: var(--color-primary);
}
 
.team__member-image img {
    filter: saturate(0);
}
 
.team__member:hover img {
    filter: saturate(1);
}
 
.team__member-info {
    text-align: center;
    margin-top: 1.4rem;
}
 
.team__member-info p {
    color: var(--color-light);
}
 
.team__member-socials {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -100%;
    display: flex;
    flex-direction: column;
    background: var(--color-primary);
    border-radius: 1rem 0 0 1rem;
    box-shadow: -2rem 0 2rem rgba(0, 0, 0, 0.3);
    transition: var(--transition);
}
 
.team__member:hover .team__member-socials {
    right: 0;
 
}
 
.team__member-socials a {
    padding: 1rem;
}
 
/* ================Move icon================= */
 
.about__achievements-left img {
    position: relative;
    animation: moveUpDown 2s infinite alternate ease-in-out;
}
 
@keyframes moveUpDown {
    0% {
        transform: translateY(0);
        /* Start position */
    }
 
    100% {
        transform: translateY(20px);
        /* End position - adjust as needed */
    }
}
 
/* ====================Media Query (Tablet)=============== */
@media screen and (max-width: 1024px) {
    .about__achievements {
        margin-top: 2rem;
    }
 
    .about__achievements-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
 
    .about__achievements-left {
        width: 80%;
        margin: 0 auto;
    }
 
    .team__container {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
 
    .team__member {
        padding: 1rem;
    }
}
 
/* ===============Media Query (Phone)=============== */
@media screen and (max-width: 600px) {
    .achievements__cards {
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
    }
 
    .team__container {
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
    }
 
    .team__member {
        padding: 0;
    }
 
    .team__member p {
        margin-bottom: 1.5rem;
    }
 
}


CSS




/* blog.css */
 
#gfg {
    width: 15%;
    margin-top: -35px;
}
 
 
body {
    font-family: "Montserrat", sans-serif;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
    box-sizing: border-box;
}
 
/* =========Variables============= */
:root {
    --container-color: white;
    --second-color: green;
    --text-color: #172317;
    --bg-color: rgb(250, 243, 243);
}
 
::selection {
    color: var(--bg-color);
    background: var(--second-color);
}
 
a {
    text-decoration: none;
}
 
li {
    list-style: none;
}
 
img {
    width: 100%;
}
 
section {
    padding: 3rem 0 2rem;
}
 
.container {
    max-width: 1068px;
    margin: auto;
    width: 100%;
 
}
 
/* ========header=======. */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 200;
}
 
header.shadow {
    background: var(--bg-color);
    box-shadow: 0 1px 4px gray;
    transition: 0.4s;
}
 
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
}
 
.login {
    padding: 8px 14px;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 4px;
    border: 2px solid green;
    background: transparent;
    color: green;
    margin-top: -3%;
    font-family: Arial, Helvetica, sans-serif;
}
 
.login:hover {
    background: green;
    color: white;
    transition: 0.3s;
 
}
 
.home {
    width: 100%;
    min-height: 440px;
    background: transparent;
    display: grid;
    justify-content: center;
    align-items: center;
}
 
.home-text {
    color: rgb(149, 141, 141);
    text-align: center;
}
 
.home-title {
    font-size: 3.5rem;
}
 
.home-subtitle {
    font-size: 1rem;
    font-weight: 400;
}
 
/* ====Post filter========/ */
.post-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1.5rem;
    margin-top: 2rem !important;
 
}
 
.filter-item {
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}
 
.active-filter {
    background: var(--second-color);
    color: var(--bg-color);
    padding: 4px 10px;
    border-radius: 4px;
}
 
/* ==Posts====== */
.post {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(200px, auto));
    justify-content: center;
    gap: 1.5rem;
}
 
.post-box {
    background: var(--bg-color);
    box-shadow: 0 1px 2px black;
    padding: 15px;
    border-radius: 0.5rem;
 
 
}
 
.post-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    border-radius: 0.5rem;
}
 
.category {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--second-color);
}
 
.post-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-color);
    /* ====To Remain Title In 2 Lines======= */
    overflow: hidden;
}
 
.post-decription {
    line-height: 1.3rem;
    margin: 5px 0 10px;
    overflow: hidden;
    text-align: justify;
    font-size: 13px;
 
}
 
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
}
 
.footer p {
    font-size: 0.938rem;
}
 
.social {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}
 
.social .bx {
    font-size: 1.4rem;
    color: var(--text-color);
}
 
.social .bx:hover {
    color: var(--second-color);
    transition: 0.3s all linear;
}
 
/* =====Past Content======== */
.post-header {
    width: 100%;
    height: 500px;
    background: var(--container-color);
}
 
.post-container {
    max-width: 800px;
    margin: auto;
    width: 100%;
}
 
.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4rem !important;
}
 
.back-home {
    color: var(--second-color);
    font-size: 0.9rem;
}
 
.header-title {
    width: 90%;
    font-size: 2.6rem;
    color: var(--bg-color);
    text-align: center;
    margin-bottom: 1rem;
}
 
.header-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center;
}
 
.post-content {
    margin-top: 10rem !important;
 
}
 
.sub-heading {
    font-size: 1.2rem;
}
 
.post-text {
    font-size: 1rem;
    line-height: 1.7rem;
    margin: 1rem 0;
    text-align: justify;
}
 
/* ===Share==== */
.share {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;
 
}
 
.share-title {
    font-size: 1.1rem;
 
}
 
/* =====Responsive===== */
@media (max-width:1060px) {
    .container {
        margin: 0 auto;
        width: 95%;
    }
 
    .home-text {
        width: 100%;
    }
 
    .login {
        margin-top: 2%;
    }
 
    #gfg {
        width: 100px;
        margin-top: 1%;
    }
}
 
@media (max-width: 800px) {
    .nav {
        padding: 14px 0;
    }
 
    .post-container {
        margin: 0 auto;
        width: 95%;
    }
 
    .login {
        margin-top: 2%;
    }
 
    #gfg {
        width: 100px;
        margin-top: 1%;
    }
}
 
@media(max-width: 768px) {
    .nav {
        padding: 10px 0;
    }
 
    section {
        padding: 2rem 0;
    }
 
    .login {
        margin-top: 2%;
    }
 
    #gfg {
        width: 100px;
        margin-top: 1%;
    }
 
    .header-content {
        margin-top: 3rem !important;
    }
 
    .home {
        min-height: 380px;
    }
 
    .home-title {
        font-size: 3rem;
    }
 
    .header-title {
        font-size: 2rem;
    }
 
    .header-img {
        height: 370px;
    }
 
    .post-header {
        height: 435px;
    }
 
    .post-content {
        margin-top: 9rem !important;
    }
}
 
@media (max-width: 570px) {
    .post-header {
        height: 490px;
    }
 
    .header-title {
        width: 100%;
    }
 
    .header-img {
        height: 340px;
    }
 
    .footer {
        flex-direction: column;
        row-gap: 1rem;
        padding: 20px 0;
        text-align: center;
    }
 
    .login {
        margin-top: 2%;
    }
 
    #gfg {
        width: 100px;
        margin-top: 1%;
    }
}
 
@media (max-width: 396px) {
    .home-title {
        font-size: 2rem;
    }
 
    .home-subtitle {
        font-size: 0.9rem;
 
    }
 
    .home {
        min-height: 300px;
    }
 
    .post-box {
        padding: 10px;
    }
 
    .header-title {
        font-size: 1.4rem;
    }
 
    .login {
        margin-top: 2%;
    }
 
    #gfg {
        width: 100px;
        margin-top: 1%;
    }
 
    .header-img {
        height: 240px;
    }
 
    .post-header {
        height: 335px;
    }
 
    .post-content {
        margin-top: 5rem !important;
    }
 
    .post-text {
        font-size: 0.875rem;
        line-height: 1.5rem;
        margin: 10px 0;
    }
}


CSS




/* ============= login.css================ */
 
@import url(
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
 
html,
body {
    display: grid;
    height: 100%;
    width: 100%;
    place-items: center;
    background-color: rgba(244, 233, 233, 0.5);
}
 
.wrapper {
    overflow: hidden;
    max-width: 350px;
    background: white;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);
}
 
.wrapper .title-text {
    display: flex;
    width: 200%;
}
 
.wrapper .title {
    width: 50%;
    font-size: 30px;
    font-family:
         "Times New Roman", Times, serif;
    color: green;
    font-weight: 300;
    text-align: center;
    transition: all 0.6s;
}
 
 
.wrapper .slide-controls {
    position: relative;
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    margin: 30px 0 10px 0;
    justify-content: center;
    border: 1px solid black;
}
 
.slide-controls .slide {
    height: 100%;
    width: 100%;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
    z-index: 1;
    transition: all 0.6s ease;
}
 
.slide-controls label.signup {
    color: #000;
}
 
.slide-controls .slider-tab {
    position: absolute;
    height: 100%;
    width: 50%;
    left: 0;
    z-index: 0;
    border-radius: 4px;
    background: rgb(225, 220, 217);
    transition:
         all 0.6s cubic-bezier
         (0.68, -0.55, 0.265, 1.55);
}
 
input[type="radio"] {
    display: none;
}
 
#signup:checked~.slider-tab {
    left: 50%;
}
 
#signup:checked~label.signup {
    color: #fff;
    cursor: default;
    user-select: none;
}
 
#signup:checked~label.login {
    color: #000;
}
 
#login:checked~label.signup {
    color: #000;
}
 
#login:checked~label.login {
    cursor: default;
    user-select: none;
}
 
.wrapper .form-container {
    width: 100%;
    overflow: hidden;
}
 
.form-container .form-inner {
    display: flex;
    width: 200%;
}
 
.form-container .form-inner form {
    width: 50%;
    transition:
     all 0.6s cubic-bezier
     (0.68, -0.55, 0.265, 1.55);
}
 
.form-inner form .field {
    height: 50px;
    width: 100%;
    margin-top: 20px;
}
 
.form-inner form .field input {
    height: 100%;
    width: 100%;
    outline: none;
    border-radius: 10px;
    padding-left: 10px;
    border: 1px solid lightgrey;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
}
 
.form-inner form .field input:focus {
    border-color: green;
}
 
.form-inner form .field input::placeholder {
    color: #999;
    transition: all 0.3s ease;
}
 
form .field input:focus::placeholder {
    color: #b3b3b3;
}
 
.form-inner form .pass-link {
    margin-top: 5px;
}
 
.form-inner form .signup-link {
    text-align: center;
    margin-top: 30px;
}
 
form .btn input[type="submit"] {
    height: 80%;
    z-index: 1;
    position: relative;
    background: none;
    border: none;
    border: 1px solid green;
    padding-left: 0;
    width: 40%;
    margin-left: 80px;
    border-radius: 4px;
    color: green;
    background-color: transparent;
    font-size: 18px;
    cursor: pointer;
}
 
form .btn:hover input[type="submit"] {
    background-color: green;
    color: white;
}


JavaScript Files:

Javascript




// ================== login.js ==============
 
const loginText =
    document.querySelector(".title-text .login");
const loginForm =
    document.querySelector("form.login");
const loginBtn =
    document.querySelector("label.login");
const signupBtn =
    document.querySelector("label.signup");
const signupLink =
    document.querySelector("form .signup-link a");
signupBtn.onclick = () => {
    loginForm.style.marginLeft = "-50%";
    loginText.style.marginLeft = "-50%";
};
loginBtn.onclick = () => {
    loginForm.style.marginLeft = "0%";
    loginText.style.marginLeft = "0%";
};
signupLink.onclick = () => {
    signupBtn.click();
    return false;
};


Javascript




// ================= script.js==============
 
//change navbar styles on scroll
window.addEventListener('scroll', () => {
    document.querySelector('nav').classList.toggle
        ('window-scroll', window.scrollY > 0)
})
 
//show /hid faq answer
const faqs = document.querySelectorAll('.faq');
faqs.forEach(faq => {
    faq.addEventListener('click', () => {
        faq.classList.toggle('open');
 
        //change icon
        const icon = faq.querySelector('.faq__icon i');
        if (icon.className === 'uil uil-plus') {
            icon.className = 'uil uil-minus';
        } else {
            icon.className = 'uil uil-plus';
 
        }
 
    })
});
 
// Show / hide nav menu
const menu =
    document.querySelector(".nav__menu");
const menuBtn =
    document.querySelector("#open-menu-btn");
const closeBtn =
    document.querySelector("#close-menu-btn");
 
menuBtn.addEventListener('click', () => {
    menu.style.display = "flex";
    closeBtn.style.display = 'inline-block';
    menuBtn.style.display = "none";
});
 
// Close nav menu
const closeNav = () => {
    menu.style.display = "none";
    closeBtn.style.display = 'none';
    menuBtn.style.display = 'inline-block';
};
closeBtn.addEventListener('click', closeNav);
 
// ============= Swiper =================
const swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,
    spaceBetween: 30,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
 
    //when window width is >=600px
    breakpoints: {
        600: {
            slidesPerView: 2,
        }
    }
});


Output:

2024-03-0113-27-29online-video-cuttercom-ezgifcom-video-to-gif-converter



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads