intershif1

by DSDmark

HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!--
 ─── EXTERNAL CSS BELOW ─────────────────────────────────────────────────────────
   -->
 <link rel="stylesheet" href="assets/css/style.css">
 <title>Web Development internship</title>
</head>
<body>
  <!-- =========== TOP SCROLL BAR ============ -->
  <a href="#" class="scrolltop" id="scroll-top">
   <i class="far fa-bars scrolltop_icon">👍</i>
  </a>
 <!-- ======== HEADER ========== -->
 <header class="l-header " id="header">
  <nav class="nav bd-container">
   <a href="#" class="nav_logo">internship
     🤯</a>
   <div class="nav_menu" id="nav_menu">
    <ul class="nav_list">
     <li class="nav_item"><a href="#home" class="nav_link ">Home</a></li>
     <li class="nav_item"><a href="#about" class="nav_link">About</a></li>
     <li class="nav_item"><a href="#services" class="nav_link">Get internship</a></li>
     <li class="nav_item"><a href="#menu" class="nav_link">Menu</a></li>
     <li class="nav_item"><a href="#contact" class="nav_link">Contact us</a></li>
     <li class="nav_item"><i class="themeIcon"  id="change_theme">🌓</i></li>
    </ul>
   </div>
   <div class="nav_toggle" id="nav-toggle">
    <i class="fas fa-bars">☰</i>
   </div>
  </nav>
  </header>
  <!-- ========= MAIN SECTION STARTED HERE ==========  -->
  <main class="l-main">
    <!-- ========= HOME =========  -->
    <section class="home" id="home">
      <div class="home_container bd-container bd-grid">
			<img class="home_img" src="https://picsum.photos/200/300?grayscale" alt="jobs here">
        <div class="home_data">
          <h1 class="home_tt">want a internship</h1>
          <h2 class="home_stt">Applied for<br>Arun Cyber Security</h2>
          <a href="#" class="button">
            view jobs
          </a>
        </div>
				
      </div>
    </section>
    <!-- ========== ABOUT ==========...

CSS

/* ========== CSS VARIABLES ======== */
:root{
 --h-h:3rem;
 /* =========== COLORS ========== */
 --f-c-a:#f67f47;
 --f-c:#000;
 --tt-c:#9d21b0;
 --t-c:#4051a7;
 --t-c-l:#86e0e8;
 --b-c:#fefefe;
 --c-c:#fdffff;

 /* ====== FONT SIZE ===== */
 --biggest-font:2.25rem;
 --h1-fs:1.5rem;
 --h2-fs:1.25rem;
 --h3-fs:1rem;
 --n-fs:.938rem;
 --s-fs:.813rem;
 --s-fs:.75rem;

 /* =========== MARGIN SIZE ======= */
 --mr-1:.5rem;
 --mr-2:1rem;
 --mr-3:1.5rem;
 --mr-4:2rem;
 --mr-5:2.5rem;
 --mr-6:3rem;

 /* ====== FONT WEIGHT ======= */
 --f-wm:500;
 --f-wb:600;
 /* ========== Z-INDEX ====== */
 --z-l:10;
 --z-h:100;
}

@media only screen and (min-width: 768px){
 :root{
  --biggest-font:4.25rem;
 --h1-fs:2.5rem;
 --h2-fs:1.5rem;
 --h3-fs:1.25rem;
 --n-fs:1rem;
 --s-fs:.875em;
 --s-fs:.814rem;
 }
}

/* ========== BASE ====== */
*,::after,::before{
 font-family:"Poppins",sans-serif;
 text-transform:uppercase;
 box-sizing:border-box;
}
html{
 scroll-behavior:smooth;
}
/* =========== VARIABLES DARK THEME ========== */
body.change_theme{
  --f-c:#e06138;
 --tt-c:#eff2f2;
 --t-c:#d2d7d5;
 --b-c:#01011d;
 --c-c:#293136;
}
/* ========== BACKGROUND CHANGE BTN DARK/LIGHT======== */
.themeIcon{
  position:absolute;
  right:1rem;
  top:1.5rem;
  color:var(--t-c);
  font-size:1rem;
  cursor:pointer;
}

body{
  margin:var(--h-h) 0 0 0;
  font-size: var(--n-fs);
  background: var(--b-c);
  line-height:1.6; 
}
h1,h2,h3,p,ul{
  margin:0;
}
ul{
  padding:0;
  list-style:none;
}
a{
  text-decoration:none;
}
svg,img{
  max-width:100%;
  height:auto;
}
/* ========== CSS CLASS ======= */
.section{
  padding:2rem 0 2rem;
}
.section-tt, .section-stt{
text-transform:capitalize;
 text-align:center;
}
.section-tt{
 font-size:var(--h1-fs);
 color:var(--tt-c);
 margin-bottom:var(--mr-3);
}
.section-stt{
 display:block;
 font-size: var(--f-wb);
 color:var(--f-c);
 margin-bottom: var(--mr-1);
}

/* =========== LAYOUT ========...

JavaScript

// ========== SHOW MENU ============ 
const showMenu = (toggleId, navId) => {
 const toggle = document.getElementById(toggleId),
  nav = document.getElementById(navId);

 // ============= VALIDATE THAT VARIABES EXIST ============ 
 if (toggle && nav) {
  toggle.addEventListener('click', () => {
   nav.classList.toggle('show-menu');
  })
 }
}
showMenu('nav-toggle', 'nav_menu');

// ============ REMOVE MOBLIE MENU WHEN CLICK ON ========== 
const navLink = document.querySelectorAll('.nav_link');
// console.log(navLink);    // RETURN  THE ALL CLSS IN THE FORM OF ARRAY: 
function onClick() {
 const navMenu = document.getElementById('nav_menu');
 // ==== REMOVE THE CLASS WHEN CLICK =========== 
 navMenu.classList.remove('show-menu');
}
navLink.forEach(n => n.addEventListener('click', onClick));

// =========== SEROLL SECTIONS ACTIVE LINK =========== 
const sections = document.querySelectorAll('section[id]');
//  console.log(sections);   // SECTIONS RETUREN IN THE FORM OF ARRAY 
function scrollActive() {
 const scrollY = window.pageYOffset;
 // console.log(scrollY);

 sections.forEach(current => {
  // console.log(current);    // RETURN THE CURRENT DIV INFO.
  const sectionHeight = current.offsetHeight;
  //  console.log(sectionHeight);   // RETURN THE CURRENT VIEWPORT HIEGHT 
  const sectionTop = current.offsetTop;
  //  console.log(sectionTop);       // RETURN HEADER HEIGTH
  sectionId = current.id;
  //  console.log(current);
  //  console.log(sectionId);

  if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
   document.querySelector(`.nav_menu a[href*=${sectionId}]`).classList.add('active-link');
  } else {
   document.querySelector(`.nav_menu a[href*=${sectionId}]`).classList.remove('active-link');
  }
 })
};
window.addEventListener('scroll', scrollActive);

//  ======== BOX-SHADOW ON HEADER ========== 
function scrollHeader() {
 const nav = document.getElementById('header');
 //  ==== WHEN THE SCROLL IS GREATER THEAN 200 VIEWPORT HEIGTH, ADD THE...