Educational Website using html CSS and JavaScript

Introduction

Hello friends, welcome to today’s new blog post. Today we have created a beautiful project for you which is going to be very useful for you and this project will also improve your coding skills. Today we have created an Educational Website for you using HTML CSS and JavaScript which is completely responsive and is an advanced project. You can use this for your website. In this you can also sell your course and you can also use it as a portfolio. We have designed it very well. We have made this project quite advanced. In this, each page has been designed separately. In this, we have designed home page, about, course, blog page and contact page separately, which you can visit. We have also used Google Live Map in this, which is quite amazing. You can also suggest this website to your teacher. We have also created a teacher’s section in which we have added a teacher, so let’s go, now we will understand its code.

HTML (index.html)

Get Discount on Top Educational Courses

Brand Name	Discount Information	Coupon Codes Link
Educative.io	20% discount on Educative courses and plans
W3Schools	20% discount on W3Schools courses
KodeKloud	10% discount on KodeKloud courses and plans
GeeksforGeeks	30% discount on GeeksforGeeks courses
Target Test Prep	20% discount on Target Test Prep
Coding Ninjas	₹5000 discount on Coding Ninjas courses
Skillshare	40% discount on Skillshare
DataCamp	50% discount on DataCamp
365 Data Science	57% discount on 365 Data Science Plans
Get Smarter	Flat 20% discount on Get Smarter courses
SmartKeeda	Flat 40% discount on SmartKeeda courses
StackSocial	20% discount on StackSocial courses

First of all we will create the structure of our project with the help of HTML which does not look good at all but HTML is very important for our project, without HTML you cannot create any website, so let us now understand the code of HTML.

<!DOCTYPE html> This tag is the most important tag of our email, from this we know that this code is the code of the email
<head> This element is that element of HTML in which we add the link of our website like the link of font etc. It also has a close tag </head>
If you want to add the title of the website then you can do it in this way <title>Developergtm – education website</title> In this you can add the title as per your choice
To link the css file to html you can add the url of your css file like this <link rel=”stylesheet” href=”css/style.css”>
To create navigation we have created <header class=”header”> with HTML like this in which we have added logo menu item
We have used this template to add logo in html <a href=”home.html” class=”logo”> <i class=”fas fa-graduation-cap”></i> Developergtm </a> We have added text logo in it, you can add image as well
To create the navbar we have used <nav class=”navbar”>. In this we have used <ul> and <li> to add the menu items.
To create the home section, we have used <section class=”home”>. In this, we have added an image and text <img src=”images/home-img.png” alt=””>
We have also created a category section in the website <section class=”category”> in which we have added different category courses
To add category we have created a box like this in which we have added the text <a character=”#” class=”box”>
To create the footer section, we have created the section like this, in which we have also added some social links <section class=”footer”>
To add copyright in footer we have used <div> from this article <div class=”credit”> created by <span>mr. Ajay Pawar</span> | all rights reserved! </div>

Friends, we have now completed our home page. We have created multiple pages in it whose code is different. You will find that code in the code file which you will find at the end of this blog post and you can also check the live preview.

				
					


    
    
    
    <title>Developergtm - education website</title>

    <!-- font awesome cdn link  -->
    

    <!-- custom css file link  -->
    



    
<!-- header section starts  -->

<header class="header">

    <a href="home.html" class="logo"> <i class="fas fa-graduation-cap"></i> Developergtm </a>

    <div id="menu-btn" class="fas fa-bars"></div>

    <nav class="navbar">
        <ul>
            <li><a href="home.html">home</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="#">courses +</a>
                <ul>
                    <li><a href="course-1.html">course 01</a></li>
                    <li><a href="course-2.html">course 02</a></li>
                    <li><a href="course-3.html">course 03</a></li>
                </ul>
            </li>
            <li><a href="#">pages +</a>
                <ul>
                    <li><a href="teachers.html">teachers</a></li>
                    <li><a href="blog.html">blogs</a></li>
                </ul>
            </li>
            <li><a href="contact.html">contact</a></li>
        </ul>
    </nav>

</header>

<!-- header section ends -->

<!-- home section starts  -->

<section class="home">

    <div class="image">
        <img decoding="async" src="images/home-img.png" alt="">
    </div>

    <div class="content">
        <h3>your course to bright future</h3>
        <p>Comprehensive learning programs
            &amp; classes for all students</p>
        <a href="#" class="btn">get started</a>
    </div>

</section>

<!-- home section ends -->

<!-- categories section starts  -->

<section class="category">

    <a href="#" class="box">
        <img decoding="async" src="images/category-1.png" alt="">
        <h3>computer science</h3>
    </a>

    <a href="#" class="box">
        <img decoding="async" src="images/category-2.png" alt="">
        <h3>artificial intelligence</h3>
    </a>

    <a href="#" class="box">
        <img decoding="async" src="images/category-3.png" alt="">
        <h3>database management</h3>
    </a>

    <a href="#" class="box">
        <img decoding="async" src="images/category-4.png" alt="">
        <h3>theory of computation</h3>
    </a>

    <a href="#" class="box">
        <img decoding="async" src="images/category-5.png" alt="">
        <h3>cloud computing</h3>
    </a>

</section>

<!-- categories section ends -->












<!-- footer section starts  -->

<section class="footer">

    <div class="box-container">

        <div class="box">
            <h3>explore</h3>
            <a href="home.html"> <i class="fas fa-arrow-right"></i> home </a>
            <a href="about.html"> <i class="fas fa-arrow-right"></i> about </a>
            <a href="course-1.html"> <i class="fas fa-arrow-right"></i> course-1 </a>
            <a href="course-2.html"> <i class="fas fa-arrow-right"></i>course-2 </a>
            <a href="course-3.html"> <i class="fas fa-arrow-right"></i> course-3 </a>
            <a href="teachers.html"> <i class="fas fa-arrow-right"></i> teachers </a>
            <a href="blog.html"> <i class="fas fa-arrow-right"></i> blog </a>
            <a href="contact.html"> <i class="fas fa-arrow-right"></i> contact </a>
        </div>

        <div class="box">
            <h3>categories</h3>
            <a href="#"> <i class="fas fa-arrow-right"></i> web design </a>
            <a href="#"> <i class="fas fa-arrow-right"></i> graphic design</a>
            <a href="#"> <i class="fas fa-arrow-right"></i> UI / UX design</a>
            <a href="#"> <i class="fas fa-arrow-right"></i> seo marketing</a>
            <a href="#"> <i class="fas fa-arrow-right"></i> digital marketing</a>
            <a href="#"> <i class="fas fa-arrow-right"></i> email marketing</a>
            <a href="#"> <i class="fas fa-arrow-right"></i> all courses</a>
        </div>

        <div class="box">
            <h3>quick links</h3>
            <a href="#"> <i class="fas fa-arrow-right"></i> my account </a>
            <a href="#"> <i class="fas fa-arrow-right"></i> feedback </a>
            <a href="#"> <i class="fas fa-arrow-right"></i> help center </a>
            <a href="#"> <i class="fas fa-arrow-right"></i> certificates </a>
            <a href="#"> <i class="fas fa-arrow-right"></i> newsletter </a>
        </div>

        <div class="box">
            <h3>follow us</h3>
            <a href="#"> <i class="fab fa-facebook-f"></i> facebook </a>
            <a href="#"> <i class="fab fa-twitter"></i> twitter </a>
            <a href="#"> <i class="fab fa-linkedin"></i> linkedin </a>
            <a href="#"> <i class="fab fa-instagram"></i> instagram </a>
            <a href="#"> <i class="fab fa-pinterest"></i> pinterest </a>
            <a href="#"> <i class="fab fa-github"></i> github </a>
        </div>

    </div>

    <div class="credit"> created by <span>Goutam Prajapat(Developergtm)</span> | all rights reserved! </div>

</section>

<!-- footer section ends -->

<!-- custom js file link  -->

CSS (Style.css)

This is our CSS code which adds styling to our web page. Using this we’ve styled all of our HTML elements. This code makes our project visually appealing to keep engaging the user to our website. Here’s the breakdown of our CSS code:

Code starts by importing the exporting the Poppins google font.
Universal selector sets the margin, padding and all the text and transition properties to the whole web page.
The .btn class contains some styling like display, color, border and hover properties for all the buttons of the webpage.
Heading tag contains all the essential styling for the several heading of the page to create interactive UI.
.header class contains position, display, margin and other properties like webkit etc. for the proper alignment and visually appealing UI for this section. All the logo, navbar and other elements are designed in this class.
The .home class sets styling for the home page of the website like image and content alignment, display properties along with color, height etc.
Category page styles all of its components like boxes and images by giving several properties like height, display, margin, padding, border etc.
About section aligns all the content including images and text in such a way that it attracts user UI. Font, colors and other aspects are styles in this section.
Course section is designed to represent each course. There are some styling provided to each of them. Each course section contains some margin, padding, font, color and other properties.Main video of the page is styled by giving some CSS properties to interact with user.
Teachers section contains all the teachers name, their identity and quick links and all these are styled under the main teacher container section.
Blog page is designed to upload daily blogs to the website. Each blog contains some images, heading and content all are styled using essential CSS properties.
The contact page contains some boxes, a form and map which displays the location. Each box is designed and aligned well along with the contact form. All these elements are styled well for better UI of the website.
Footer is designed using the essential aspects or properties like display, margin, font, height, width etc. for each page of the website. All these are designed well so that user can access quick links using footer at each page.
Lastly, media queries are used to provide same styling to smaller screens as well. Using media queries we’ve styled and formatted our website for the smaller screen so that users can easily access it in mobiles.

This was all about our CSS code.

				
					@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&amp;display=swap");
* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-transform: capitalize;
  text-decoration: none;
  outline: none;
  border: none;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

section {
  padding: 3rem 9%;
}

.btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 1rem 3rem;
  background: #e9edfb;
  color: #224bcf;
  cursor: pointer;
  border-radius: .5rem;
  font-size: 1.7rem;
}

.btn:hover {
  color: #fff;
  background: #224bcf;
}

.heading {
  background: url(../images/heading-bg.png) no-repeat;
  background-size: cover;
  background-position: center;
}

.heading h3 {
  font-size: 3.5rem;
  color: #302851;
}

.heading p {
  font-size: 1.6rem;
  color: #666;
  padding-top: .5rem;
}

.heading p a {
  padding-right: .5rem;
  color: #fa1d86;
}

.heading p a:hover {
  color: #224bcf;
}

.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 9%;
  background: #224bcf;
}

.header .logo {
  font-size: 2.5rem;
  font-weight: bolder;
  color: #fff;
}

.header .logo i {
  color: #fa1d86;
}

.header .navbar ul {
  list-style: none;
}

.header .navbar ul li {
  position: relative;
  float: left;
}

.header .navbar ul li:hover ul {
  display: block;
}

.header .navbar ul li a {
  padding: 2rem;
  display: block;
  font-size: 1.7rem;
  color: #fff;
}

.header .navbar ul li a:hover {
  background: #fa1d86;
}

.header .navbar ul li ul {
  position: absolute;
  left: 0;
  width: 20rem;
  background: #224bcf;
  display: none;
}

.header .navbar ul li ul li {
  width: 100%;
}

#menu-btn {
  cursor: pointer;
  color: #fff;
  font-size: 2.5rem;
  display: none;
}

.home {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
}

.home .image {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 42rem;
          flex: 1 1 42rem;
}

.home .image img {
  width: 100%;
}

.home .content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 42rem;
          flex: 1 1 42rem;
}

.home .content h3 {
  color: #302851;
  font-size: 5rem;
}

.home .content p {
  font-size: 1.4rem;
  color: #666;
  padding: 1rem 0;
  line-height: 2.5;
}

.category {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(16rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

.category .box {
  border-radius: 1rem;
  background: #f5f5f5;
  padding: 4rem 3rem;
  text-align: center;
}

.category .box img {
  height: 7rem;
  margin-bottom: 2rem;
}

.category .box h3 {
  font-size: 1.7rem;
  color: #302851;
}

.about {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
}

.about .image {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 42rem;
          flex: 1 1 42rem;
}

.about .image img {
  width: 100%;
}

.about .content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 42rem;
          flex: 1 1 42rem;
}

.about .content h3 {
  color: #302851;
  font-size: 4.5rem;
}

.about .content p {
  font-size: 1.4rem;
  padding: 1rem 0;
  color: #666;
  line-height: 2.5;
}

.course-1 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
  gap: 1.5rem;
}

.course-1 .box {
  background: #f5f5f5;
  border-radius: 1rem;
  text-align: center;
  padding: 3rem 2rem;
}

.course-1 .box img {
  margin-bottom: 1rem;
  height: 8rem;
}

.course-1 .box h3 {
  font-size: 2rem;
  color: #302851;
  padding: .5rem 0;
}

.course-1 .box p {
  font-size: 1.4rem;
  color: #666;
  line-height: 2.5;
  padding: 1rem 0;
}

.course-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
  gap: 1.5rem;
}

.course-2 .box {
  padding: 2rem;
  border-radius: 1rem;
  background: #f5f5f5;
}

.course-2 .box .image {
  margin-bottom: 2rem;
  text-align: center;
}

.course-2 .box .image img {
  height: 22rem;
}

.course-2 .box .content span {
  font-size: 1.4rem;
  color: #fa1d86;
  background: #ffeaf4;
  padding: .5rem 1rem;
}

.course-2 .box .content h3 {
  color: #302851;
  line-height: 2;
  margin-top: 1.5rem;
  font-size: 2rem;
}

.course-2 .box .content p {
  font-size: 1.4rem;
  color: #666;
  line-height: 2.5;
  padding: 1rem 0;
}

.course-2 .box .content .icons {
  margin-top: 2rem;
  padding-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
}

.course-2 .box .content .icons a {
  font-size: 1.4rem;
  color: #666;
}

.course-2 .box .content .icons a:hover {
  color: #fa1d86;
}

.course-2 .box .content .icons a i {
  padding-right: .5rem;
  color: #fa1d86;
}

.course-3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
  gap: 1.5rem;
}

.course-3 .box {
  text-align: center;
  overflow: hidden;
}

.course-3 .box:hover .video video {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.course-3 .box .video {
  height: 25rem;
  width: 100%;
  overflow: hidden;
  border-radius: .5rem;
  position: relative;
}

.course-3 .box .video video {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  cursor: pointer;
}

.course-3 .box .video i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 2rem;
  height: 5rem;
  width: 5rem;
  line-height: 5rem;
  border-radius: 50%;
  background: #fff;
  color: #302851;
  pointer-events: none;
  z-index: 10;
}

.course-3 .box .content {
  padding-top: 1rem;
}

.course-3 .box .content h3 {
  font-size: 1.7rem;
  color: #302851;
  padding: .5rem 0;
}

.course-3 .box .content p {
  font-size: 1.5rem;
  color: #666;
}

.main-video {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  width: 100%;
  display: none;
}

.main-video.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.main-video #close-vid {
  position: absolute;
  top: 1.5rem;
  right: 2.5rem;
  font-size: 6rem;
  color: #fff;
  cursor: pointer;
}

.main-video video {
  width: 80%;
  border: 0.5rem solid #fff;
  border-radius: .5rem;
}

.teachers {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(27rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
  gap: 1.5rem;
}

.teachers .box {
  text-align: center;
  overflow: hidden;
}

.teachers .box:hover .image .share {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.teachers .box:hover .image .share a {
  -webkit-transform: translateY(-1rem);
          transform: translateY(-1rem);
  opacity: 1;
  -webkit-transition: -webkit-transform .2s .2s;
  transition: -webkit-transform .2s .2s;
  transition: transform .2s .2s;
  transition: transform .2s .2s, -webkit-transform .2s .2s;
}

.teachers .box .image {
  overflow: hidden;
  height: 32rem;
  width: 100%;
  position: relative;
  border-radius: 1rem;
}

.teachers .box .image .share {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 10;
  overflow: hidden;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

.teachers .box .image .share a {
  font-size: 2.5rem;
  margin: 2rem 1.5rem;
  color: #fff;
  -webkit-transform: translateY(5rem);
          transform: translateY(5rem);
  opacity: 0;
}

.teachers .box .image .share a:hover {
  color: #fa1d86;
}

.teachers .box .image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.teachers .box .content {
  padding-top: 1rem;
}

.teachers .box .content h3 {
  font-size: 2rem;
  color: #302851;
}

.teachers .box .content span {
  color: #666;
  font-size: 1.5rem;
}

.blog {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
  gap: 1.5rem;
}

.blog .box .image {
  height: 25rem;
  width: 100%;
  overflow: hidden;
}

.blog .box .image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: .5rem;
}

.blog .box .content {
  padding: 2rem;
  background: #f5f5f5;
}

.blog .box .content .icons {
  padding: 1.5rem 0;
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.blog .box .content .icons a {
  font-size: 1.4rem;
  color: #666;
}

.blog .box .content .icons a:hover {
  color: #224bcf;
}

.blog .box .content .icons a i {
  padding-right: .5rem;
  color: #224bcf;
}

.blog .box .content h3 {
  font-size: 1.7rem;
  padding: .5rem 0;
  color: #302851;
}

.blog .box .content p {
  padding: 1rem 0;
  font-size: 1.4rem;
  line-height: 2.5;
  color: #666;
}

.contact .icons-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(30rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 1.5rem;
}

.contact .icons-container .icons {
  text-align: center;
  padding: 2rem;
  border-radius: 1rem;
  background: #f5f5f5;
  margin-bottom: 2rem;
}

.contact .icons-container .icons i {
  height: 6.5rem;
  width: 6.5rem;
  line-height: 6.5rem;
  font-size: 2.5rem;
  color: #224bcf;
  background: #e9edfb;
  border-radius: 50%;
  text-align: center;
  margin-bottom: .5rem;
}

.contact .icons-container .icons h3 {
  font-size: 2rem;
  color: #302851;
  padding: .7rem 0;
}

.contact .icons-container .icons p {
  line-height: 2;
  font-size: 1.4rem;
  color: #666;
}

.contact .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5rem;
}

.contact .row form {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 42rem;
          flex: 1 1 42rem;
  border-radius: 1rem;
  background: #f5f5f5;
  padding: 2rem;
}

.contact .row form h3 {
  font-size: 2.5rem;
  color: #302851;
  margin-bottom: .5rem;
}

.contact .row form .box, .contact .row form textarea {
  width: 100%;
  padding: 1rem 1.2rem;
  font-size: 1.6rem;
  color: #666;
  text-transform: none;
  margin: 1rem 0;
  border-radius: .5rem;
  background: #fff;
}

.contact .row form textarea {
  height: 15rem;
  resize: none;
}

.contact .row .map {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 42rem;
          flex: 1 1 42rem;
  width: 100%;
  border-radius: 1rem;
}

.footer {
  background: #f5f5f5;
}

.footer .box-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  gap: 1.5rem;
}

.footer .box-container .box h3 {
  font-size: 2.2rem;
  padding: 1rem 0;
  color: #302851;
}

.footer .box-container .box a {
  display: block;
  font-size: 1.4rem;
  padding: 1rem 0;
  color: #666;
}

.footer .box-container .box a:hover {
  color: #fa1d86;
}

.footer .box-container .box a:hover i {
  padding-right: 2rem;
}

.footer .box-container .box a i {
  color: #fa1d86;
  padding-right: .5rem;
}

.footer .credit {
  text-align: center;
  margin-top: 2rem;
  padding: 1rem;
  padding-top: 2.5rem;
  font-size: 2rem;
  color: #666;
  border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
}

.footer .credit span {
  color: #fa1d86;
}

@media (max-width: 1200px) {
  html {
    font-size: 55%;
  }
  section {
    padding: 3rem 2rem;
  }
}

@media (max-width: 768px) {
  #menu-btn {
    display: inline-block;
  }
  .header {
    padding: 2rem;
  }
  .header .navbar {
    position: absolute;
    top: 99%;
    left: 0;
    right: 0;
    background: #224bcf;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  .header .navbar.active {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .header .navbar ul li {
    width: 100%;
  }
  .header .navbar ul li ul {
    width: 100%;
    position: relative;
  }
  .about .content h3 {
    font-size: 3rem;
  }
  .main-video video {
    width: 95%;
    border-width: .2rem;
  }
}

@media (max-width: 450px) {
  html {
    font-size: 50%;
  }
}
/*# sourceMappingURL=style.css.map */

Javascript (Script.js)

This is our JavaScript code which adds interactive functionality to our website. Using this code we’ve added some minor functionality about menu bar which works in smaller screens. Let’s dive into our code.

Code starts by accessing the navbar from the HTML document.
On the menu button a classlist is added on its onclick event. It active the classlist on click event.
On window scroll the class list will be removed.
Next, the main video of page is accessed using DOM properties. Using DOM properties we’ve added some functions on each video like class list, src etc.
On the close video button click event, all the classlist will be removed from the main video

This was all about our small JavaScript code.

				
					let navbar = document.querySelector('.header .navbar');

document.querySelector('#menu-btn').onclick = () =&gt;{
    navbar.classList.toggle('active');
}

window.onscroll = () =&gt;{
    navbar.classList.remove('active');
}

let mainVid = document.querySelector('.main-video');

document.querySelectorAll('.course-3 .box .video video').forEach(vid =&gt;{

    vid.onclick = () =&gt;{
        let src = vid.getAttribute('src');
        mainVid.classList.add('active');
        mainVid.querySelector('video').src = src;
    }

});

document.querySelector('#close-vid').onclick = () =&gt;{
    mainVid.classList.remove('active');
}

Output:

Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.