title: Header is not in the correct position
body: <p>Excuse me for my stupidity. I'm trying to merge two different files but they're messed up and I'm sweating while thinking about the solution. Really appreciate someone taking the time to review my case T^T
  <a href="https://drive.google.com/drive/folders/1JAFLpSdcICcbrQ0eZmbE96jfGv0Vlx0X?usp=sharing" rel="nofollow noreferrer">Drive of header video</a> if you want.</p>
  <p>Oh, the system forced me to add more details to the post but I think with this dense code, it must be very detailed....</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Open+Sans&amp;family=Ubuntu+Condensed&amp;display=swap');
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
  }
  
  header {
    z-index: 999;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 200px;
    transition: 0.5s ease;
  }
  
  header .brand {
    color: #fff;
    font-size: 1.5em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
  }
  
  header .navigation {
    position: relative;
  }
  
  header .navigation .navigation-items a {
    position: relative;
    color: #fff;
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    margin-left: 30px;
    transition: 0.3s ease;
  }
  
  header .navigation .navigation-items a:before {
    content: '';
    position: absolute;
    background: #fff;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 0;
    transition: 0.3s ease;
  }
  
  header .navigation .navigation-items a:hover:before {
    width: 100%;
  }
  
  section {
    padding: 100px 200px;
  }
  
  .home {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: #2696E9;
  }
  
  .home:before {
    z-index: 777;
    content: '';
    position: absolute;
    background: rgba(3, 94, 251, 0.144);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  
  .home .content {
    z-index: 888;
    color: #fff;
    width: 70%;
    margin-top: 50px;
    display: none;
  }
  
  .home .content.active {
    display: block;
  }
  
  .home .content h1 {
    font-size: 4em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 75px;
    margin-bottom: 40px;
  }
  
  .home .content h1 span {
    font-size: 1.2em;
    font-weight: 600;
  }
  
  .home .content p {
    margin-bottom: 65px;
  }
  
  
  /* .home .content a{
    background: #fff;
    padding: 15px 35px;
    color: #1680AC;
    font-size: 1.1em;
    font-weight: 500;
    text-decoration: none;
    border-radius: 2px;
  } */
  
  .home .media-icons {
    z-index: 888;
    position: absolute;
    right: 30px;
    display: flex;
    flex-direction: column;
    transition: 0.5s ease;
  }
  
  .home .media-icons a {
    color: #fff;
    font-size: 1.6em;
    transition: 0.3s ease;
  }
  
  .home .media-icons a:not(:last-child) {
    margin-bottom: 20px;
  }
  
  .home .media-icons a:hover {
    transform: scale(1.3);
  }
  
  .home video {
    z-index: 000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .slider-navigation {
    z-index: 888;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(80px);
    margin-bottom: 12px;
  }
  
  .slider-navigation .nav-btn {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    transition: 0.3s ease;
  }
  
  .slider-navigation .nav-btn.active {
    background: #2696E9;
  }
  
  .slider-navigation .nav-btn:not(:last-child) {
    margin-right: 20px;
  }
  
  .slider-navigation .nav-btn:hover {
    transform: scale(1.2);
  }
  
  .video-slide {
    position: absolute;
    width: 100%;
    clip-path: circle(0% at 0 50%);
  }
  
  .video-slide.active {
    clip-path: circle(150% at 0 50%);
    transition: 2s ease;
    transition-property: clip-path;
  }
  
  @media (max-width: 1040px) {
    header {
      padding: 12px 20px;
    }
    section {
      padding: 100px 20px;
    }
    .home .media-icons {
      right: 15px;
    }
    header .navigation {
      display: none;
    }
    header .navigation.active {
      position: fixed;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(1, 1, 1, 0.5);
    }
    header .navigation .navigation-items a {
      color: #222;
      font-size: 1.2em;
      margin: 20px;
    }
    header .navigation .navigation-items a:before {
      background: #222;
      height: 5px;
    }
    header .navigation.active .navigation-items {
      background: #fff;
      width: 600px;
      max-width: 600px;
      margin: 20px;
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 5px;
      box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
    }
    .menu-btn {
      background: url(menu.png)no-repeat;
      background-size: 30px;
      background-position: center;
      width: 40px;
      height: 40px;
      cursor: pointer;
      transition: 0.3s ease;
    }
    .menu-btn.active {
      z-index: 999;
      background: url(close.png)no-repeat;
      background-size: 25px;
      background-position: center;
      transition: 0.3s ease;
    }
  }
  
  @media (max-width: 560px) {
    .home .content h1 {
      font-size: 3em;
      line-height: 60px;
    }
  }
  
  body .bod {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #3c2864;
  }
  
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 40px;
  }
  
  .card {
    position: relative;
    width: 320px;
    height: 450px;
    margin: 30px;
    background: #287bff;
    border-radius: 20px;
    border-bottom-left-radius: 160px;
    border-bottom-right-radius: 160px;
    box-shadow: 0 15px 0 #fff, inset 0 -15px 0 rgba(255, 255, 255, 0.25), 0 45px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  
  .card::before {
    content: '';
    position: absolute;
    top: -140px;
    left: -40%;
    width: 100%;
    height: 120%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
    transform: rotate(35deg);
    pointer-events: none;
    filter: blur(5px);
  }
  
  .card:nth-child(1) {
    background: linear-gradient(to bottom, #24ff72, #9a4eff);
  }
  
  .card:nth-child(2) {
    background: linear-gradient(to bottom, #24ff72, #9a4eff);
  }
  
  .card:nth-child(3) {
    background: linear-gradient(to bottom, #24ff72, #9a4eff);
  }
  
  .icon {
    position: relative;
    width: 140px;
    height: 120px;
    background: #3c2864;
    ;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1), inset 0 -8px 0 #fff;
    z-index: 1000;
    display: flex;
    justify-content: center;
  }
  
  .icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 50px;
    height: 50px;
    background: transparent;
    border-top-right-radius: 50px;
    box-shadow: 15px -15px 0 15px #3c2864;
  }
  
  .icon::after {
    content: '';
    position: absolute;
    top: 0;
    right: -50px;
    width: 50px;
    height: 50px;
    background: transparent;
    border-top-left-radius: 50px;
    box-shadow: -15px -15px 0 15px #3c2864;
  }
  
  .icon ion-icon {
    color: #fff;
    position: relative;
    font-size: 6em;
    z-index: 10000;
    --ionicon-stroke-width: 10px;
  }
  
  .cont {
    position: absolute;
    width: 100%;
    padding: 30px;
    padding-top: 140px;
    text-align: center;
  }
  
  .cont h2 {
    font-size: 1.75em;
    color: #fff;
    margin-bottom: 10px;
  }
  
  .cont p {
    color: #fff;
    line-height: 1.5em;
  }
  
  .cont a {
    color: #000000;
    ;
    line-height: 1.5em;
  }
  
  footer {
    background-color: #000000;
    background-position: center;
    color: #fff;
    line-height: 1.5em;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;KHXH&amp;NV&lt;/title&gt;
    &lt;link rel="stylesheet" href="nthuuyen.css"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"&gt;
  &lt;/head&gt;
  
  &lt;body class="bod"&gt;
    &lt;div class="container"&gt;
      &lt;div class="card"&gt;
        &lt;div class="icon"&gt;
          &lt;ion-icon name="star-half-outline"&gt;&lt;/ion-icon&gt;
        &lt;/div&gt;
        &lt;div class="cont"&gt;
          &lt;h2&gt;Phạm Thanh Loan&lt;/h2&gt;
          &lt;p&gt;Điểm học tập: 9.1 &lt;br&gt; Điểm rèn luyện: 90 &lt;br&gt; Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. &lt;br&gt;
            &lt;!-- Đạt chứng chỉ ngoại ngữ A. &lt;br&gt; Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. &lt;br&gt; --&gt;
            Là Hội viên Hội sinh viên Việt Nam &lt;br&gt; Đạt danh hiệu "Thanh niên khỏe" &lt;br&gt; Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.&lt;br&gt;
            &lt;a href="#"&gt;Read more&lt;/a&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
        &lt;div class="icon"&gt;
          &lt;ion-icon name="star-half-outline"&gt;&lt;/ion-icon&gt;
        &lt;/div&gt;
        &lt;div class="cont"&gt;
          &lt;h2&gt;Đỗ Thanh Tây&lt;/h2&gt;
          &lt;p&gt;Điểm học tập: 9 &lt;br&gt; Điểm rèn luyện: 90 &lt;br&gt; Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. &lt;br&gt; Đạt chứng chỉ ngoại ngữ A. &lt;br&gt; Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. &lt;br&gt;
            &lt;!-- Là Hội viên Hội sinh viên Việt Nam &lt;br&gt; Đạt danh hiệu "Thanh niên khỏe" &lt;br&gt; Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.&lt;br&gt; --&gt;
            &lt;a href="#"&gt;Read more&lt;/a&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
        &lt;div class="icon"&gt;
          &lt;ion-icon name="star-half-outline"&gt;&lt;/ion-icon&gt;
        &lt;/div&gt;
        &lt;div class="cont"&gt;
          &lt;h2&gt;Nguyễn Ngọc Phương Uyên&lt;/h2&gt;
          &lt;p&gt;Điểm học tập: 8.6 &lt;br&gt; Điểm rèn luyện: 81 &lt;br&gt; Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. &lt;br&gt; Đạt chứng chỉ ngoại ngữ A. &lt;br&gt; Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. &lt;br&gt;
            &lt;!-- Là Hội viên Hội sinh viên Việt Nam &lt;br&gt; Đạt danh hiệu "Thanh niên khỏe" &lt;br&gt; Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.&lt;br&gt; --&gt;
            &lt;a href="#"&gt;Read more&lt;/a&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"&gt;&lt;/script&gt;
    &lt;script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;body class="bod"&gt;
    &lt;header&gt;
      &lt;a href="#" class="brand"&gt;ĐOÀN HỘI SINH VIÊN&lt;/a&gt;
      &lt;div class="menu-btn"&gt;&lt;/div&gt;
      &lt;div class="navigation"&gt;
        &lt;div class="navigation-items"&gt;
          &lt;a href="#"&gt;Trang chủ&lt;/a&gt;
          &lt;a href="#"&gt;Giới thiệu&lt;/a&gt;
          &lt;a href="#"&gt;Hướng dẫn&lt;/a&gt;
          &lt;a href="#"&gt;Thông báo&lt;/a&gt;
          &lt;a href="#"&gt;Liên hệ&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  
    &lt;section class="home"&gt;
      &lt;video class="video-slide active" src="head.mp4" autoplay muted loop&gt;&lt;/video&gt;
      &lt;video class="video-slide" src="head.mp4" autoplay muted loop&gt;&lt;/video&gt;
      &lt;video class="video-slide" src="head.mp4" autoplay muted loop&gt;&lt;/video&gt;
      &lt;video class="video-slide" src="head.mp4" autoplay muted loop&gt;&lt;/video&gt;
      &lt;video class="video-slide" src="hea.mp4" autoplay muted loop&gt;&lt;/video&gt;
      &lt;div class="content active"&gt;
        &lt;h1&gt;ㅤㅤㅤㅤㅤ&lt;br&gt;&lt;span&gt;ㅤㅤㅤㅤ&lt;/span&gt;&lt;/h1&gt;
        &lt;p&gt;ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ&lt;/p&gt;
        &lt;!-- &lt;a href="#"&gt;Read More&lt;/a&gt; --&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
        &lt;h1&gt;ㅤㅤㅤㅤㅤ&lt;br&gt;&lt;span&gt;ㅤㅤㅤㅤ&lt;/span&gt;&lt;/h1&gt;
        &lt;p&gt;ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ&lt;/p&gt;
        &lt;!-- &lt;a href="#"&gt;Read More&lt;/a&gt; --&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
        &lt;h1&gt;ㅤㅤㅤㅤㅤ&lt;br&gt;&lt;span&gt;ㅤㅤㅤㅤ&lt;/span&gt;&lt;/h1&gt;
        &lt;p&gt;ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ&lt;/p&gt;
        &lt;!-- &lt;a href="#"&gt;Read More&lt;/a&gt; --&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
        &lt;h1&gt;ㅤㅤㅤㅤㅤ&lt;br&gt;&lt;span&gt;ㅤㅤㅤㅤ&lt;/span&gt;&lt;/h1&gt;
        &lt;p&gt;ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ&lt;/p&gt;
        &lt;!-- &lt;a href="#"&gt;Read More&lt;/a&gt; --&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
        &lt;h1&gt;ㅤㅤㅤㅤㅤ&lt;br&gt;&lt;span&gt;ㅤㅤㅤㅤ&lt;/span&gt;&lt;/h1&gt;
        &lt;p&gt;ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ&lt;/p&gt;
        &lt;!-- &lt;a href="#"&gt;Read More&lt;/a&gt; --&gt;
      &lt;/div&gt;
      &lt;div class="media-icons"&gt;
        &lt;a href="#"&gt;&lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href="#"&gt;&lt;i class="fab fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href="#"&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="slider-navigation"&gt;
        &lt;div class="nav-btn active"&gt;&lt;/div&gt;
        &lt;div class="nav-btn"&gt;&lt;/div&gt;
        &lt;div class="nav-btn"&gt;&lt;/div&gt;
        &lt;div class="nav-btn"&gt;&lt;/div&gt;
        &lt;div class="nav-btn"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
    &lt;script type="text/javascript"&gt;
      //Javacript for responsive navigation menu
      const menuBtn = document.querySelector(".menu-btn");
      const navigation = document.querySelector(".navigation");
  
      menuBtn.addEventListener("click", () =&gt; {
        menuBtn.classList.toggle("active");
        navigation.classList.toggle("active");
      });
  
      //Javacript for video slider navigation
      const btns = document.querySelectorAll(".nav-btn");
      const slides = document.querySelectorAll(".video-slide");
      const contents = document.querySelectorAll(".content");
  
      var sliderNav = function(manual) {
        btns.forEach((btn) =&gt; {
          btn.classList.remove("active");
        });
  
        slides.forEach((slide) =&gt; {
          slide.classList.remove("active");
        });
  
        contents.forEach((content) =&gt; {
          content.classList.remove("active");
        });
  
        btns[manual].classList.add("active");
        slides[manual].classList.add("active");
        contents[manual].classList.add("active");
      }
  
      btns.forEach((btn, i) =&gt; {
        btn.addEventListener("click", () =&gt; {
          sliderNav(i);
        });
      });
    &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;footer&gt;
    &lt;p&gt;
      Group 3 &lt;br&gt; Phone: 0374040XXX &lt;br&gt; Class:xyz
    &lt;/p&gt;
  &lt;/footer&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>