Complete Responsive Educational Website in HTML, CSS & Javascript

Hello friends, Today in this blog I will show you how to create a responsive educational website in HTML, CSS & Javascript. Earlier, you learned to create a television portfolio website.

I have made tutorials regarding many types of landing pages and other designs but I haven’t created a complete website before. You will learn something great today that will help you to increase your skills. So, without doing it late let’s move toward the main topic.

On this e-learning website, you can find many parts having various contents. In the nav bar, you can see a logo, some navigation links, and a login & signup button. After that in the hero section, there is an image, some text, and a button. The whole website has very plain and simple colors with perfectly managed contrast. You should always care about the contrast while creating websites.

The above-shown image is exactly the same one we are going to make today. For the live preview, you can click here.

If you’re feeling difficult to understand what I am saying. You can watch a video preview of this program (Responsive educational website).

Video of Responsive Educational Website

As you have seen in the above video, the whole website is really amazing and useful. If you’re a beginner and feeling difficult to understand then, don’t worry just go through the code once and you will get all the points. To get the source codes you just need to scroll down.

Responsive Educational Website [Source Codes]

Before creating this website first, you need to create three HTML files five CSS files, and two js files. After creating these files just paste the following code into your file. Create CSS files inside the CSS folder and Javascript files inside the js folder. The folder structure is given below.

First, create all HTML files and paste the given codes into your respective HTML files. Remember, you’ve to create a file with a .html extension.

index.html

  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>R-Learn | E-learning Platform</title>
    <!-- Font awesome -->
    <script src="https://kit.fontawesome.com/220218f8ed.js" crossorigin="anonymous"></script>
    <!-- Default Css -->
    <link rel="stylesheet" href="static/css/reset.css">
    <!-- CSS -->
    <link rel="stylesheet" href="static/css/nav.css">

    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500;600;700;800&family=Nunito:wght@200;300;400;600;700;800;900&display=swap"
        rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap" rel="stylesheet">
    <!-- j-query -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>
    <nav>
        <div class="navContainer">
            <div class="ham_burger">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="logo">
                <a href="#">R-<span>Learn</span></a>
            </div>
            <div class="nav_links">
                <div class="searchForm">
                    <form action="." method="get">
                        <input type="search" placeholder="Search Something">
                        <button type="submit"><i class="fas fa-search"></i></button>
                    </form>
                </div>
                <ul>
                    <li><a href="#">Ask</a></li>
                    <li><a href="#">Blogs</a></li>
                    <li><a href="#">Classes</a></li>
                    <li><a href="#">Note</a></li>
                    <li><a class="searchListBtn">Search <i class="fas fa-search"></i></a></li>

                </ul>
            </div>
            <div class="nav_linksClick">
                <div class="linkscontainer">
                    <form action="." method="get">
                        <input type="search" name="" id="" placeholder="Search Something">
                        <button type="submit"><img src="static/image/icon/search.svg"></button>
                    </form>
                    <div class="line"></div>
                    <div class="navlinks">
                        <ul>
                            <li><a href="#">Ask</a> <span><i class="fas fa-caret-right"></i></span></li>
                            <li><a href="#">Blogs</a><span><i class="fas fa-caret-right"></i></span></li>
                            <li><a href="#">Classes</a><span><i class="fas fa-caret-right"></i></span></li>
                            <li><a href="#">Note</a><span><i class="fas fa-caret-right"></i></span></li>
                            <li><a href="#">Contact</a><span><i class="fas fa-caret-right"></i></span></li>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="formMenu">
                <a href="./login.html">Login</a>
                <a href="./register.html">Register</a>
            </div>
        </div>
    </nav>
    <!-- Hero Section -->
    <div class="hero">
        <div class="container">
            <div class="textContent">
                <h1>Connecting Dots, <br> <span> Together </span>& <span>Forever</span></h1>
                <p>Sharing Knowledge to make this world a better place to live.</p>
                <a href="#">Join For Free</a>
            </div>
            <div class="imgSection">
                <img src="static/image/hero.png" alt="">
            </div>
        </div>
    </div>

    <!-- Options -->
    <div class="options">
        <div class="container">
            <div class="title">
                <h2>Make a Decision What to <br>Study</h2>
            </div>
            <div class="content">
                <!-- Card 1 -->
                <div class="card card1">
                    <div class="innercard">
                        <div class="text">
                            <h2>Algebra</h2>
                            <a href="#">Explore <i class="fas fa-caret-right"></i></a>
                        </div>
                        <div class="img">
                            <p>X * Y= XY</p>
                        </div>
                    </div>
                </div>
                <!-- Card 2 -->
                <div class="card card2">
                    <div class="innercard">
                        <div class="text">
                            <h2>Maths</h2>
                            <a href="#">Explore <i class="fas fa-caret-right"></i></a>
                        </div>
                        <div class="img">
                            <!-- <p>X * Y= XY</p> -->
                        </div>
                    </div>
                </div>
                <!-- Card 3 -->
                <div class="card card3">
                    <div class="innercard">
                        <div class="text">
                            <h2>Computer <br> Programming</h2>
                            <a href="#">Explore <i class="fas fa-caret-right"></i></a>
                        </div>
                        <div class="img">
                            <!-- <p>X * Y= XY</p> -->
                        </div>
                    </div>
                </div>
                <!-- Card 4 -->
                <div class="card card4">
                    <div class="innercard">
                        <div class="text">
                            <h2>English</h2>
                            <a href="#">Explore <i class="fas fa-caret-right"></i></a>
                        </div>
                        <div class="img">
                            <!-- <p>X * Y= XY</p> -->
                        </div>
                    </div>
                </div>
                <!-- Card 5 -->
                <div class="card card5">
                    <div class="innercard">
                        <div class="text">
                            <h2>Science</h2>
                            <a href="#">Explore <i class="fas fa-caret-right"></i></a>
                        </div>
                        <div class="img">
                            <!-- <p>X * Y= XY</p> -->
                        </div>
                    </div>
                </div>
                <!-- Card 6 -->
                <div class="card card6">
                    <div class="innercard">
                        <div class="text">
                            <h2>Statistics</h2>
                            <a href="#">Explore <i class="fas fa-caret-right"></i></a>
                        </div>
                    </div>
                </div>
                <!-- .. -->
            </div>
        </div>

    </div>
    <!-- Why One Step -->
    <div class="whyUs">
        <div class="container">
            <div class="contentTitle">
                <h2><span>Why</span> <br> R-Learn?</h2>
                <p>Check out what the creators of the One Step says. Want to see more? Contact us for more information.
                </p>
            </div>

            <div class="contentCards">
                <div class="textContent">
                    <div class="content">
                        <h2>What our <br> Creators say</h2>
                    </div>
                    <div class="button">
                        <div class="btn1 btn">
                            <i class="fas fa-caret-left"></i>
                        </div>
                        <div class="btn2 btn">
                            <i class="fas fa-caret-right"></i>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="cardcontainer">
                        <div class="cardTitle">
                            <h2>OSP</h2>
                            <p>Trustable Content</p>
                            <h3>****</h3>
                        </div>
                        <div class="content">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti voluptatum ducimus
                                rerum laborum eos nulla.</p>
                        </div>
                        <div class="codelogo">
                            <h2>****</h2>
                        </div>
                        <div class="cardCreatorDetail">
                            <h2>Rijan Neupane</h2>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Div Extra Content -->
    <div class="info">
        <div class="container">
            <div class="img">

            </div>
            <div class="textcontent">
                <h2>A <span>DEEPEER</span> LOOK <br> INTO THE <span>STUDY</span> </h2>
                <p>For Free. For Everyone. Forever </p>
                <a href="#">Get Started</a>
            </div>
        </div>
    </div>

    <!-- footer start  -->
    <footer>
        <div class="col-1">
            <div class="title">R-<span>Learn</span></div>
            <div class="copyright">
                © 2020 R-Learn,All Rights Reserved
            </div>
            <div class="policy">
                <a href="#">Terms of Service</a> |
                <a href="#">Privacy Policy</a>
            </div>
        </div>
        <!-- column 2 start  -->
        <div class="col-2">
            <div class="head">Quick Links</div>
            <div class="links">
                <a href="">About Us</a>
                <a href="">Blogs</a>
                <a href="">Contact Us</a>
            </div>
        </div>
        <!-- column 3 start  -->
        <div class="col-3">
            <div class="head">Resources</div>
            <div class="links">
                <a href="#">Science</a>
                <a href="#">Math</a>
                <a href="#">Computer</a>
                <a href="#">Social</a>
                <a href="#">Account</a>
                <a href="#">Economics</a>
                <a href="#">More</a>
            </div>
        </div>
        <!-- column 4 start -->
        <div class="col-4">
            <div class="head">Get In Touch</div>
            <p>
                Question or Feedback?<br>
                We'd Love to hear from you
            </p>
            <div class="social-icons">
                <div class="facebook">
                    <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
                </div>
                <div class="insta">
                    <a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a>
                </div>
                <div class="twitter">
                    <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
                </div>
                <div>
                </div>
    </footer>

</body>
<script src="static/js/nav.js"></script>
<script src="static/js/main.js"></script>

</html>

register.html

  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register | R-Learn E-Learning Platform</title>
    <!-- Font awesome -->
    <script src="https://kit.fontawesome.com/220218f8ed.js" crossorigin="anonymous"></script>
    <!-- Default Css -->
    <link rel="stylesheet" href="static/css/reset.css">
    <!-- CSS -->
    <link rel="stylesheet" href="static/css/nav.css">

    <link rel="stylesheet" href="static/css/register.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500;600;700;800&family=Nunito:wght@200;300;400;600;700;800;900&display=swap"
        rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap" rel="stylesheet">
    <!-- j-query -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>
    <nav>
        <div class="navContainer">
            <div class="ham_burger">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="logo">
                <a href="index.html">R-<span>Learn</span></a>
            </div>
            <div class="nav_links">
                <div class="searchForm">
                    <form action="." method="get">
                        <input type="search" placeholder="Search Something">
                        <button type="submit"><i class="fas fa-search"></i></button>
                    </form>
                </div>
                <ul>
                    <li><a href="#">Ask</a></li>
                    <li><a href="#">Blogs</a></li>
                    <li><a href="#">Classes</a></li>
                    <li><a href="#">Note</a></li>
                    <li><a class="searchListBtn">Search <i class="fas fa-search"></i></a></li>

                </ul>
            </div>
            <div class="nav_linksClick">
                <div class="linkscontainer">
                    <form action="." method="get">
                        <input type="search" name="" id="" placeholder="Search Something">
                        <button type="submit"><img src="static/image/icon/search.svg"></button>
                    </form>
                    <div class="line"></div>
                    <div class="navlinks">
                        <ul>
                            <li><a href="#">Ask</a> <span><i class="fas fa-caret-right"></i></span></li>
                            <li><a href="#">Blogs</a><span><i class="fas fa-caret-right"></i></span></li>
                            <li><a href="#">Classes</a><span><i class="fas fa-caret-right"></i></span></li>
                            <li><a href="#">Note</a><span><i class="fas fa-caret-right"></i></span></li>
                            <li><a href="#">Contact</a><span><i class="fas fa-caret-right"></i></span></li>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="formMenu">
                <a href="./login.html">Login</a>
                <a href="./register.html">Register</a>
            </div>
        </div>
    </nav>

    <!-- ---------------nav bar ends here---------------- -->
    <!-- -------------------------- main container starts here------------------------ -->
    <div class="container">
        <div class="inner-container">
            <div class="left-container">
                <div class="content">
                <h2>Create your Account</h2>
                <form action="">
                <div class="name">
                <input type="text" placeholder="First Name" required class="first-name">
                <input type="text" placeholder="Last Name" class="last-name">
            </div>
                <input type="email" placeholder="Email" class="email" required>
                <input type="text" placeholder="Username" class="email" required>
                <p>You Can Use Letters, numbers and periods</p>
                <div class="password">
                <input type="password" placeholder="Password" required>
                <input type="password" placeholder="Confirm Password" class="confirm-password" required>
                 <p>Use at least 8 characters</p>
            </div>
                <a href="#">Sign in Instead</a>
                <button type="submit">Sign Up</button>
            </form>
            </div>
            </div>
            <div class="right-container">
                <img src="./static/image/signup.png" alt="">
            </div>
        </div>
    </div>
     <!-- -----------------------------main container ends here----------------------------  -->
    <!-- footer start  -->
    <footer>
        <div class="col-1">
            <div class="title">R-<span>Learn</span></div>
            <div class="copyright">
                © 2020 R-Learn,All Rights Reserved 
            </div>
            <div class="policy">
                <a href="#">Terms of Service</a> |
                <a href="#">Privacy Policy</a>
            </div>
        </div>
        <!-- column 2 start  -->
        <div class="col-2">
            <div class="head">Quick Links</div>
            <div class="links">
                <a href="">About Us</a>
                <a href="">Blogs</a>
                <a href="">Contact Us</a>
            </div>
        </div>
        <!-- column 3 start  -->
        <div class="col-3">
            <div class="head">Resources</div>
            <div class="links">
                <a href="#">Science</a>
                <a href="#">Math</a>
                <a href="#">Computer</a>
                <a href="#">Social</a>
                <a href="#">Account</a>
                <a href="#">Economics</a>
                <a href="#">More</a>
            </div>
        </div>
        <!-- column 4 start -->
        <div class="col-4">
            <div class="head">Get In Touch</div>
            <p>
              Question or Feedback?<br>
              We'd Love to hear from you
            </p>
            <div class="social-icons">
                <div class="facebook">
                    <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
                </div>
                <div class="insta">
                    <a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a>
                </div>
                <div class="twitter">
                    <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
                </div>
              <div>
        </div>
  </footer>
    <!-- ---------------------footer ends here------------------ -->
</body>
<script src="static/js/nav.js"></script>
<script src="static/js/main.js"></script>

</html>

login.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | R-Learn E-learning Platform</title>
    <!-- Font awesome -->
    <script src="https://kit.fontawesome.com/220218f8ed.js" crossorigin="anonymous"></script>
    <!-- Default Css -->
    <link rel="stylesheet" href="static/css/reset.css">
    <!-- CSS -->
    <link rel="stylesheet" href="static/css/nav.css">

    <link rel="stylesheet" href="static/css/register.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500;600;700;800&family=Nunito:wght@200;300;400;600;700;800;900&display=swap"
        rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap" rel="stylesheet">
    <!-- j-query -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>
    <nav>
        <div class="navContainer">
            <div class="ham_burger">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="logo">
                <a href="index.html">R-<span>Learn</span></a>
            </div>
            <div class="nav_links">
                <div class="searchForm">
                    <form action="." method="get">
                        <input type="search" placeholder="Search Something">
                        <button type="submit"><i class="fas fa-search"></i></button>
                    </form>
                </div>
                <ul>
                    <li><a href="#">Ask</a></li>
                    <li><a href="#">Blogs</a></li>
                    <li><a href="#">Classes</a></li>
                    <li><a href="#">Note</a></li>
                    <li><a class="searchListBtn">Search <i class="fas fa-search"></i></a></li>

                </ul>
            </div>
            <div class="nav_linksClick">
                <div class="linkscontainer">
                    <form action="." method="get">
                        <input type="search" name="" id="" placeholder="Search Something">
                        <button type="submit"><img src="static/image/icon/search.svg"></button>
                    </form>
                    <div class="line"></div>
                    <div class="navlinks">
                        <ul>
                            <li><a href="#">Ask</a> <span><i class="fas fa-caret-right"></i></span></li>
                            <li><a href="#">Blogs</a><span><i class="fas fa-caret-right"></i></span></li>
                            <li><a href="#">Classes</a><span><i class="fas fa-caret-right"></i></span></li>
                            <li><a href="#">Note</a><span><i class="fas fa-caret-right"></i></span></li>
                            <li><a href="#">Contact</a><span><i class="fas fa-caret-right"></i></span></li>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="formMenu">
                <a href="./login.html">Login</a>
                <a href="./register.html">Register</a>
            </div>
        </div>
    </nav>

    <!-- ---------------nav bar ends here---------------- -->
  <!-- -------------------------- main container starts here------------------------ -->
  <div class="container">
    <div class="inner-container">
        <div class="left-container">
            <div class="content">
            <h2>Create your Account</h2>
            <form action="">
            <input type="text" placeholder="Username" class="email" required>
            <div class="password">
            <input type="password" placeholder="Password" style="width: 65%;" required>
        </div>
            <a href="register.html">Sign Up Instead</a>
            <button type="submit">Login</button>
        </form>
        </div>
        </div>
        <div class="right-container">
            <img src="./static/image/signup.png" alt="">
        </div>
    </div>
</div>
 <!-- -----------------------------main container ends here----------------------------  -->
    <!-- footer start  -->
    <footer>
        <div class="col-1">
            <div class="title">R-<span>Learn</span></div>
            <div class="copyright">
                © 2020 R-Learn,All Rights Reserved 
            </div>
            <div class="policy">
                <a href="#">Terms of Service</a> |
                <a href="#">Privacy Policy</a>
            </div>
        </div>
        <!-- column 2 start  -->
        <div class="col-2">
            <div class="head">Quick Links</div>
            <div class="links">
                <a href="">About Us</a>
                <a href="">Blogs</a>
                <a href="">Contact Us</a>
            </div>
        </div>
        <!-- column 3 start  -->
        <div class="col-3">
            <div class="head">Resources</div>
            <div class="links">
                <a href="#">Science</a>
                <a href="#">Math</a>
                <a href="#">Computer</a>
                <a href="#">Social</a>
                <a href="#">Account</a>
                <a href="#">Economics</a>
                <a href="#">More</a>
            </div>
        </div>
        <!-- column 4 start -->
        <div class="col-4">
            <div class="head">Get In Touch</div>
            <p>
              Question or Feedback?<br>
              We'd Love to hear from you
            </p>
            <div class="social-icons">
                <div class="facebook">
                    <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
                </div>
                <div class="insta">
                    <a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a>
                </div>
                <div class="twitter">
                    <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
                </div>
              <div>
        </div>
  </footer>
</body>
<script src="static/js/nav.js"></script>
<script src="static/js/main.js"></script>

</html>

Second, create all CSS files and paste the given code into your respective CSS files. Remember, you’ve to create a file with a .css extension.

reset.css

  *{
    margin: 0;
    padding: 0;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    line-height: 1;
    font-family: "Karla", sans-serif;
	width: 100%;
	overflow-x: hidden;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body{
    background: #fcfcfc;
}

nav.css

  nav {
    width: 100%;
    height: 100px;
    background-color: #fff;
    position: relative;
}

nav .navContainer {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (max-width: 1200px) {
    nav .navContainer {
        width: 100%;
    }
}

nav .navContainer .ham_burger {
    display: none;
    width: 30px;
    position: absolute;
    left: 10px;
}

nav .navContainer .ham_burger div {
    width: 30px;
    height: 2px;
    background: #222;
    margin-bottom: 6px;
}

nav .navContainer .ham_burger div:last-child {
    width: 15px;
    margin-bottom: none;
    background-color: #3255ca;
}

nav .navContainer .logo {
    color: #111;
    font-size: 25px;
    font-weight: 700;
}

@media only screen and (max-width: 730px) {
    nav .navContainer .ham_burger {
        display: block;
    }

    nav .navContainer .logo {
        position: relative;
        left: 100px;
    }
}

nav .navContainer .logo a {
    text-decoration: none;
    color: #111;
}

nav .navContainer .logo a span {
    color: #5071df;
}

nav .navContainer .nav_links {
    width: 350px;
}
nav .navContainer .nav_links .searchForm {
    width: 350px;
    height: 50px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}
nav .navContainer .nav_links .searchForm form{
    display: flex;
}
nav .navContainer .nav_links .searchForm form input{
    width: 300px;
    height: 40px;
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

}
nav .navContainer .nav_links .searchForm form input:focus,
nav .navContainer .nav_links .searchForm form input:hover{
    border: 1px solid #5071df;
    border-right: none;
    
}
nav .navContainer .nav_links .searchForm form button{
    width: 50px;
    height: 40px;
    color: #fff;
    background: #5071df;
    outline: none;
    border: none;
}
nav .navContainer .nav_links ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (max-width: 730px) {
    nav .navContainer .ham_burger {
        display: block;
    }

    nav .navContainer .logo {
        position: relative;
        left: 60px;
    }

    nav .navContainer .nav_links {
        display: none;
    }
}

nav .navContainer .nav_links ul li a {
    text-decoration: none;
    color: rgb(105, 105, 105);
    font-weight: 600;
    font-size: 16px;
    transition: 0.4s ease;
}

nav .navContainer .nav_links ul li a:hover {
    color: #5071df;
}

/* Links 2 */
nav .navContainer .nav_linksClick {
    position: absolute;
    top: 105px;
    width: 95%;
    background: #fff;
    left: -50%;
    transform: translateX(-50%);
    height: 350px;
    box-shadow: 2px 2px 10px rgba(117, 117, 117, 0.5);
    border-radius: 5px;
    opacity: 0;
    z-index: 2;

}

nav .navContainer .nav_linksClick .linkscontainer {
    width: 95%;
    position: relative;
    top: 15px;
    margin: 0 auto;
}

nav .navContainer .nav_linksClick .linkscontainer form input {
    width: 100%;
    height: 40px;
    border: none;
    outline: none;
    border: 1px solid #696969;
    border-radius: 5px;
    padding: 10px;
    font-size: 18px;
    color: #546fc9;
    margin-bottom: 10px;
    transition: 0.5s ease;
}

nav .navContainer .nav_linksClick .linkscontainer form input:focus {
    border: 1px solid #5071df;

}

nav .navContainer .nav_linksClick .linkscontainer form button {
    background: none;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    background: #5071df;
    color: #fff;
    cursor: pointer;
    margin-bottom: 10px;
}

nav .navContainer .nav_linksClick .linkscontainer form button img {
    width: 20px;
}

nav .navContainer .nav_linksClick .linkscontainer .line {
    width: 100%;
    height: 1px;
    background-color: #696969;
    margin-bottom: 10px;
}

nav .navContainer .nav_linksClick .linkscontainer .navlinks {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav .navContainer .nav_linksClick .linkscontainer .navlinks ul {
    width: 100%;
    height: 200px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    /* grid-template-rows: 1fr 1fr 1fr; */
}

nav .navContainer .nav_linksClick .linkscontainer .navlinks ul li {
    background-color: #3255ca;
    padding: 10px 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .navContainer .nav_linksClick .linkscontainer .navlinks ul li a {
    text-decoration: none;
    color: #fff;
}

nav .navContainer .nav_linksClick .linkscontainer .navlinks ul li span {
    color: #fff;
    font-size: 16px;
}

/* Login Register */
nav .navContainer .formMenu {
    width: auto;
}

nav .navContainer .formMenu a {
    padding: 15px 25px;
    background: #5071df;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 5px 5px 15px rgba(80, 113, 223, 0.3);
}

nav .navContainer .formMenu a:first-child {
    border: 2px solid #5071df;
    color: #5071df;
    background: none;
    margin-right: 10px;
    box-shadow: none;
    transition: 0.5s;
}

nav .navContainer .formMenu a:first-child:hover {
    color: #fff;
    background: #5071df;
    box-shadow: 5px 5px 15px rgba(80, 113, 223, 0.3);

}

@media only screen and (max-width: 730px) {
    nav .navContainer .ham_burger {
        display: block;
    }

    nav .navContainer .logo {
        position: relative;
        left: 60px;
    }

    nav .navContainer .nav_links {
        display: none;
    }

    nav .navContainer .formMenu a {
        padding: 10px 15px;
    }
    nav .navContainer .formMenu {
        position: relative;
        right: 10px;
}
}

style.css

  /* Global  */

body{
    width: 100%;
    overflow-x: hidden;
}
.container{
    margin: 0 auto;
    width: 1200px;
    height: 100%;
}


/* -- */
.hero {
    position: relative;
    width: 100%;
    height: 670px;
    margin-bottom: 50px;

}

.hero .container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background: #666; */
}

@media only screen and (max-width: 1200px) {
    .hero .container {
        width: 95%;
    }

}

@media only screen and (max-width: 900px) {
    .hero .container {
        flex-direction: column;
    }

}

.hero .container .textContent {
    width: auto;
    height: auto;
    position: relative;
    top: 70px;
}

/* 
@media only screen and (max-width: 1080px){

} */
.hero .container .textContent h1 {
    font-size: 50px;
    word-spacing: 5px;
    font-weight: 700;
    margin-bottom: 30px;
}


.hero .container .textContent h1 span {
    color: #5071df;
}

.hero .container .textContent p {
    font-size: 18px;
    margin-bottom: 50px;

}

.hero .container .textContent a {
    font-size: 16px;
    text-decoration: none;
    padding: 20px 30px;
    background-color: #5071df;
    color: #fff;
    border-radius: 5px;
    transition: .3s;
    box-shadow: 5px 5px 15px rgba(80, 113, 223, 0.5);
}
.hero .container .textContent a:hover {
    background-color: #2e54cf;
}


.hero .container .imgSection img {
    width: 600px;
}

@media only screen and (max-width: 1080px) {
    .hero .container .textContent h1 {
        font-size: 40px;
    }

    .hero .container .imgSection img {
        width: 500px;
    }

}

@media only screen and (max-width: 900px) {
    .hero {
        height: 750px;
    }

    .hero .container {
        flex-direction: column;
        justify-content: space-around;
    }

    .hero .container .textContent {
        margin-bottom: 40px;
    }

    .hero .container .textContent h1 {
        font-size: 50px;

    }

    .hero .container .imgSection img {
        width: 600px;
    }



}

@media only screen and (max-width: 700px) {
    .hero .container {
        width: 90%;
        margin: 0 auto;
    }

    .hero .container .textContent h1 {
        font-size: 40px;
        line-height: 50px;
    }

    .hero .container .textContent p {
        font-size: 16px;
    }

    .hero .container .textContent a {
        padding: 15px 25px;
    }

    .hero .container .imgSection img {
        width: 100%;
    }
}

/* Options */
.options{
    position: relative;
    width: 100%;
    height: 725px;
    margin-bottom: 100px;
}
.options .container{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    /* background: #fff; */
}
@media only screen and (max-width: 1200px){
    .options{
        margin-bottom: 250px;
    }
    .options .container{
        width: 95%;
    }

}
.options .container .title{
    margin-bottom: 25px;
    height: 100px;
}
.options .container .title h2{ 
    font-size: 25px;
    font-weight: 600;
    line-height: 35px;
}

.options .container .content{
    height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 1rem;
} 
.options .container .content .card{

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #696969;
    border-radius: 10px;
    color: #fff;
    box-shadow: 0px 0px 15px rgba(73, 73, 73,0.5);
    position: relative;
}
.options .container .content .card .innercard .text{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.options .container .content .card .innercard .text h2{
    font-size: 20px;
    line-height: 24px;
}
.options .container .content .card .innercard .text a{
    color: #fff;
    font-size: 14px;
    text-decoration: none;

}

.options .container .content .card1{
    grid-column: 1/3;
    background-color: #2c469e;
}
.options .container .content .card1 .innercard .img{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 250px;
    height: 100px;
     background: url(../image/icon/upanddown.svg);
    background-size: cover;
    background-position: right;
   
}

.options .container .content .card1 .innercard .img p{
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.options .container .content .card2{
    grid-column: 3/4;
    background-color: #333333;


}

.options .container .content .card2 .innercard .img{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100px;
    height: 100px;
     background: url(../image/icon/mathematics.svg);
    background-size: cover;
    background-position: right;
   
}
.options .container .content .card3{
    grid-column: 4/5;
    grid-row: 1/3;
    background-color:#776bf8;

}
.options .container .content .card3 .innercard .img{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 200px;
    height: 220px;
     background: url(../image/icon/program.svg);
    background-size: cover;
    background-position: center;
   
}

.options .container .content .card4{
    grid-column: 1/2;
    grid-row: 2/4;
    background-color: #1fbf75;

    
}
.options .container .content .card4 .innercard .img{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 200px;
    height: 200px;
     background: url(../image/icon/english.svg);
    background-size: 100% 150%;
    background-position:center;
   
}
.options .container .content .card5{
    grid-column: 2/4;
    grid-row: 2/4;
    background-color: rgb(255, 110, 57);

    
}
.options .container .content .card5 .innercard .img{
    position: absolute;
    bottom: 0px;
    right: 10px;
    width: 250px;
    height: 250px;
     background: url(../image/icon/atom.svg);
    background-size: 100% 150%;
    background-position:center;
   
}
.options .container .content .card6{
    grid-column: 4/5;
    background-color: #2b64f8;

}
@media only screen and (max-width: 940px){
    .options .container .content{
        height: 800px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;

    }
    .options .container .content .card3{
        grid-column: 1/2;
        grid-row: 4/5;
    }
    .options .container .content .card3 .innercard .img{
        width: 100px;
        height: 120px;
    }
    .options .container .content .card6{
        grid-column: 2/4;
        grid-row: 4/5;
    }


}

@media only screen and (max-width: 600px){
    .options{
        height: 650px;
        margin-bottom: 100px;
    }
    .options .container .content{
        height: 500px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    
    }
    .options .container .content .card .innercard .text h2{
        font-size: 15px;
        line-height: 16px;
}
    .options .container .content .card .innercard .img{
        width: 50px;
        height: 50px;
    }
    .options .container .content .card1 .innercard .img{
        width: 150px;
        height: 100px;
        background-size: 100% 100%;
    }
    .options .container .content .card3 .innercard .img{
        width: 80px;
        height: 100px;
    }
    .options .container .content .card5 .innercard .img{
        width: 100px;
        height: 100px;
        bottom: 10px;
    }
    .options .container .content .card3{
        grid-row: 3/5;
    }
    .options .container .content .card4{
        grid-row: 2/3;
    }
    .options .container .content .card6{
        grid-column: 2/4;
        grid-row: 4/5;
    } 
}


.options .container .content .card .innercard{
        width: 90%;
        height: 90%;
}
.options .container .content .card .innercard .imgpart{
    width: 75px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: chartreuse;
}
.options .container .content .card .innercard .imgpart img{
    width: 50px;
}


.whyUs{
    width: 100%;
    height: 800px;
    background-color: #fff;
    margin-bottom: 100px;
}
@media only screen and (max-width: 1200px){
    .whyUs .container{
        width: 90%;
    }

}
.whyUs .container .contentTitle{
    font-size: 30px;
    font-weight: 700;
    height: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* position: relative;
    top: 50px; */
    /* margin-bottom: 100px; */
}
@media only screen and (max-width: 1100px){
    .whyUs .container .contentTitle{
        flex-direction: column;
        align-items: flex-start;
        height: 250px;

    }
    
}
.whyUs .container .contentTitle h2 {
    font-size: 50px;
    line-height: 60px;
    font-weight: 700;
}
.whyUs .container .contentTitle h2 span{
    color: #5071df;
    font-weight: 300;
}
.whyUs .container .contentTitle p{
    position: relative;
    width: 450px;
    font-size: 18px;
    font-weight: 300;
    word-spacing: 5px;
    line-height: 25px;
    text-align: justify;
    border-left: 2px solid #5071df;

    padding: 5px 20px;
}

.whyUs .container .contentCards{
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media only screen and (max-width: 900px){
    .whyUs .container .contentTitle{
        margin-bottom: 20px;

    }
    .whyUs .container .contentCards{
        flex-direction: column;
        align-items: flex-start;
        height: 600px;
    }
}
.whyUs .container .contentCards .textContent{
    width: auto;
}
.whyUs .container .contentCards .textContent .content{
    font-size: 40px;
    font-weight: 700;
    line-height: 45px;
    color: #111;
    margin-bottom: 40px;
}

.whyUs .container .contentCards .textContent .button{
    width: 150px;
    height: auto;
    display: flex;
    justify-content: space-between;
}
.whyUs .container .contentCards .textContent .button .btn{
    width: 50px;
    height: 50px;
    box-shadow: 0px 0px 10px rgba(121, 121, 121, 0.404);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #5071df;
    font-size: 20px;
    cursor: pointer;
}
.whyUs .container .contentCards .card{
    position: relative;
    width: 550px;
    height: 350px;
    background: #fff;
    box-shadow: 10px 10px 20px rgba(80, 113, 223,0.3);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg, #3a62e7, #92abff);
    overflow: hidden;
}
@media only screen and (max-width: 900px){
    .whyUs .container .contentTitle{
        margin-bottom: 20px;

    }
.whyUs .container .contentTitle p{
    width: auto;
}
    .whyUs .container .contentCards{
        flex-direction: column;
        align-items: flex-start;
        height: 500px;
    }
    .whyUs .container .contentCards .textContent .content h2{
        display: none;
    }
    .whyUs .container .contentCards .card{
        width: 100%;
    }

}
.whyUs .container .contentCards .card .cardcontainer{
    position: relative;
    width: 90%;
    height: 90%;
    /* text-align: center; */
    color: #fff;
    
}
.whyUs .container .contentCards .card .cardcontainer::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 250px;
    height: 250px;
    background-color: rgba(255, 255, 255, 0.116);
    border-radius: 50%;
}
.whyUs .container .contentCards .card .cardcontainer::after{
    content: "";
    position: absolute;
    bottom: -100px;
    left: -120px;
    width: 350px;
    height: 350px;
    transform: rotate(45deg);
    background-color: rgba(255, 255, 255, 0.151);
    /* border-radius: 50%; */
}
.whyUs .container .contentCards .card .cardcontainer .cardTitle{
    position: relative;
}
.whyUs .container .contentCards .card .cardcontainer .cardTitle h2{
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 5px;
}
.whyUs .container .contentCards .card .cardcontainer .cardTitle p{
    font-size: 18px;
    font-weight: 200;
}

.whyUs .container .contentCards .card .cardcontainer .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    line-height: 24px;
    font-size: 20px;
}
.whyUs .container .contentCards .card .cardcontainer .codelogo {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 18px;
    letter-spacing: 2px;
}
.whyUs .container .contentCards .card .cardcontainer .cardCreatorDetail{
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-size: 25px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Extra Content */
.info{
    width: 100%;
    height: 700px;
}
.info .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media only screen and (max-width: 1200px){
    .info .container{
        width: 90%;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 1080px){
    .info .container{
        width: 90%;
        margin: 0 auto;
    }
}


.info .container .img{
    width: 450px;
    height: 450px;
    background: url("../image/astronotcycle.png");
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    box-shadow: 10px 10px 16px rgba(78, 78, 78, 0.205);
}

.info .container .textcontent h2{
    font-size: 60px;
    font-weight: 600;
    line-height: 65px;
    margin-bottom: 20px;    
    word-spacing: 7px;
}
@media only screen and (max-width: 1080px){
    .info .container .img{
        width: 400px;
        height: 400px;
    }
    .info .container .textcontent h2{
        font-size: 50px;
    }
}
@media only screen and (max-width: 930px){
    .info .container .img{
        width: 350px;
        height: 350px;
    }
    .info .container .textcontent h2{
        font-size: 40px;
    }

}
@media only screen and (max-width: 930px){
    .info .container{
        flex-direction: column-reverse;
    }
    .info .container .img{
        width: 100%;
        height: 350px;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .info .container .textcontent h2{
        font-size: 40px;
    }

}

.info .container .textcontent h2 span{
    color: #b1a7ff;
}
.info .container .textcontent p{
    font-size: 18px;
    color: #696969;
    margin-bottom: 35px;
}
.info .container .textcontent a{
    padding: 15px 25px;
    background-color: #b1a7ff;
    text-decoration: none;
    color: #fff;
    transition: .3s;
}
.info .container .textcontent a:hover{
    background-color: #8879f7;   
}

register.css

  .container{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.container .inner-container{
    width: 65%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border: 1px solid rgba(153, 153, 153, 0.542);
    border-radius: 10px;
    padding-bottom: 100px;
    background-color: #fff;
}
.container .inner-container .left-container{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: left;
    margin-left: 30px;
}
.container .inner-container .left-container h2{
  margin-top: 30px;
  font-size: 22px;
}
.container .inner-container .left-container form .name{
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
}
.container .inner-container .left-container form .name .first-name{
    margin-right: 10px;
}
.container .inner-container .left-container form .email{
    margin-top: 20px;
    width: 65%;
}
.container .inner-container .left-container form p{
    margin-top: 5px;
    font-size: 13px;
    color: #777;
}
.container .inner-container .left-container form .password{
    margin: 20px 0px;
    margin-bottom: 60px;
}
.container .inner-container .left-container .content form a{
    font-size: 14px;
    text-decoration: none;
}
.container .inner-container .left-container .content form button{
    padding: 5px 20px;
    float: right;
    background-color: #5071df;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    box-shadow: 3px 3px 10px #2a46a3;
    transition: .5s;
    cursor: pointer;
}
.container .inner-container .left-container .content form button:hover{
    background-color: #2a46a3;
}
.container .inner-container .left-container .content form input{
    padding: 10px 5px;
    border: 0.5px solid rgba(153, 153, 153, 0.289);
    border-radius: 5px;
}
.container .inner-container .left-container .content form input:hover::placeholder{
    padding-left: 10px;
    transition: .5s;
}
.container .inner-container .right-container{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .inner-container .right-container img{
    height: 300px;
}

/* responsive media queries */

@media (min-width:1200px){
    .container .inner-container .left-container{
        width: 65%;
    }
    .container .inner-container .right-container{
        width: 35%;
    }
    .container .inner-container .right-container img{
        width: 250px;
        height: 250px;
    }
}

@media (min-width:990px) and (max-width:1200px){
    .container .inner-container{
        width: 90%;
    }
}
@media (min-width:636px) and (max-width:990px){
    .container .inner-container .right-container{
        display: none;
    }
    .container .inner-container .left-container{
        width: 100%;
    }
    .container .inner-container .left-container button{
        margin-right: 30%;
    }
}
@media (max-width:636px){
    .container .inner-container{
        width: 90%;
        border: none;
        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.145);
    }
    .container .inner-container .left-container h2{
        font-size: 18px;
      }
      .container .inner-container .right-container{
          display: none;
      }
      .container .inner-container .left-container{
          width: 100%;
          margin-left: 10px;
      }
      .container .inner-container .left-container .password .confirm-password{
        margin-top: 20px;
        margin-left: 0px;
    }
    .container .inner-container .left-container .name .last-name{
        margin-top: 20px;
        margin-left: 0px;
    }
    .container .inner-container .left-container button{
        margin-right: 10%;
    }
    }

At last, create two JS files and paste the given code into your respective JS files. Remember, you’ve to create a file with a .js extension.

nav.js

  
function Navigation(){
    let nav = document.querySelector(".nav_linksClick");
    let menu = document.querySelector(".ham_burger");
    let nav_open = false;
    menu.addEventListener("click",() => {
        if (nav_open === false){
            // nav.style.display = "block";
            nav.style.left = "50%";
            nav.style.opacity = "1";
            nav.style.transition = "1s ease";
            nav_open = true;
        }
        else if (nav_open === true){
            // nav.style.display = "none";
            nav.style.left = "-50%";
            nav.style.opacity = "0";
            nav.style.transition = "0.6s ease";
            nav_open = false;
        }

    })
}
function SearchOpen(){
    let search_open = false;
    let search_btn = document.querySelector(".searchListBtn");
    let search_form = document.querySelector(".searchForm");
    search_btn.addEventListener("click", () => {
        if (search_open === false){
            search_form.style.display = "block";
            search_open = true;
        }
        else if(search_open === true){
            search_form.style.display = "none";
            search_open = false;


        }
    })
}
function main(){
    SearchOpen()
    Navigation()
}

main()

main.js

  $(
    function slide(){
        let author = ["Rijan Neupane", "Aakash Thapa", "Donald Trump", "K.P Oli"]
        let title = ["Trustable Content", "Make as a Student", "Learn by Doing", "Perfect Place for learning"]
        let content = ["Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti voluptatum ducimus rerum laborum eos nulla.","Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti voluptatum ducimus rerum laborum eos nulla.", "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti voluptatum ducimus rerum laborum eos nulla.", "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti voluptatum ducimus rerum laborum eos nulla."]
        let bgcolor = ["linear-gradient(200deg, #3a62e7, #92abff)", " linear-gradient(200deg, #ff6021, #fdad7f)", "linear-gradient(200deg, #ff21da, #ea4cff)", "linear-gradient(200deg, #21e2a2, #2e8f6f)"]

        // Buttons
        let btn1 = $(".whyUs .container .contentCards .textContent .button .btn1")
        let btn2 = $(".whyUs .container .contentCards .textContent .button .btn2")
        // cards content
        let contenttitle = $(".whyUs .container .contentCards .card .cardcontainer .cardTitle p")
        let innercontent = $(".whyUs .container .contentCards .card .cardcontainer .content p")
        let innerauthor = $(".whyUs .container .contentCards .card .cardcontainer .cardCreatorDetail h2")
        let card = $(".whyUs .container .contentCards .card");
        count = 1
        btn1.click(() => {
            contenttitle.html(title[count]);
            innercontent.html(content[count]);
            innerauthor.html(author[count]);
            card.css({
                "background": bgcolor[count],
            })
            count -= 1
            if (count < 0){
                count = 0
            }
        })

        btn2.click(() => {
            contenttitle.html(title[count]);
            innercontent.html(content[count]);
            innerauthor.html(author[count]);
            
            count +=1
            card.css({
                "background": bgcolor[count],
            })
            if (count > title.length){
                count = title.length
            }
        })

        

    }
);

That’s all you have to do. Now you have successfully created your own responsive educational website. If you have faced any errors/problems during creating this website then, please comment down your queries. I’m always ready to help you. That’s all for today, I will see you again with awesome and stunning designs.