Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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" />
  <link rel="icon" href="/img/logo/logo-black.svg" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&family=Monda:wght@700&family=Gantari:wght@300;400;500;700;900&family=Poppins:wght@300;400;500;700;900&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="index.css" />
  <script defer src="index.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.8/typed.min.js"></script>
  <title>Slacker University</title>
</head>

<body>
  <header class="header flex">
    <div class="logo"></div>
    <ul class="top-menu flex">
      <li class="options"><a href="#" class="link-disabled">Apply Now</a></li>
      <li class="options"><a href="#" class="link-disabled">Contact</a></li>
      <li class="options search">
        <label aria-label="Input Search Text">
          <input type="search" />
        </label>
        <button class="btn" aria-label="search">
          <i class="fa-solid fa-magnifying-glass"></i>
        </button>
      </li>
      <li class="options menu-icon">
        <a href="#">Menu <i class="fa-solid fa-ellipsis-vertical"></i></a>
      </li>
    </ul>

    <nav>
      <ul class="main-menu link-disabled">
        <li class="items"><a href="#" class="flex">Academics</a></li>
        <li class="items"><a href="#" class="flex">Students</a></li>
        <li class="items"><a href="#" class="flex">Admissions</a></li>
        <li class="items"><a href="#" class="flex">Staffs</a></li>
        <li class="items"><a href="#" class="flex">Accomodations</a></li>
        <li class="items"><a href="#" class="flex">Scholarships</a></li>
      </ul>
    </nav>
  </header>

  <section class="hero-area" id="hero-area">
    <video src="vid/bg-video.mp4" poster="https://images.unsplash.com/20/cambridge.JPG?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjkwNzQyNzh8&ixlib=rb-4.0.3&q=85" autoplay muted loop></video>
    <div class="info-box">
      <h2 class="title">SLACKER UNIVERSITY</h2>
      <p class="motto">WHERE PROCRASTINATION IS A VIRTUE</p>
    </div>
    <div class="tour">
      <button class="btn">
        <a href="map.html">360° VIRTUAL TOUR</a>
      </button>
    </div>
  </section>
  <section class="bonus" id="bonus">
    <img src="https://images.unsplash.com/photo-1614624532983-4ce03382d63d?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjkwNzQ3NDZ8&ixlib=rb-4.0.3&q=85" alt="" />
    <div class="box text-box">
      <h3 class="info">
        RECIEVE YOUR VERY OWN SETUP<span>WITH UP TO $10,000</span>
      </h3>
    </div>
    <button class="box btn apply">GET STARTED</button>
  </section>

  <section class="courses" id="courses">
    <h2 class="title">COURSES WE OFFER</h2>
    <div class="box">
      <ul class="list link-disabled">
        <li class="course"><a href="#">Advanced Napping</a></li>
        <li class="course"><a href="#">Accounting</a></li>
        <li class="course"><a href="#">Actuarial Science</a></li>
        <li class="course"><a href="#">Anthropology</a></li>
        <li class="course"><a href="#">Art</a></li>
        <li class="course"><a href="#">Art History</a></li>
        <li class="course"><a href="#">Astronomy</a></li>
        <li class="course"><a href="#">Beer Appreciation</a></li>
        <li class="course"><a href="#">Biochemistry</a></li>
        <li class="course"><a href="#">Bioinformatics</a></li>
        <li class="course"><a href="#">Biological Engineering</a></li>
        <li class="course"><a href="#">Biomedical Engineering</a></li>
        <li class="course"><a href="#">Biostatistics</a></li>
        <li class="course"><a href="#">Binge-Watching</a></li>
        <li class="course"><a href="#">Computer Engineering</a></li>
        <li class="course"><a href="#">Couch Potato Training</a></li>
        <li class="course"><a href="#">Counseling</a></li>
        <li class="course"><a href="#">Creative Writing</a></li>
        <li class="course"><a href="#">Cultural Studies</a></li>
        <li class="course"><a href="#">Data Science</a></li>
        <li class="course"><a href="#">Doing Nothing Philosophy</a></li>
        <li class="course"><a href="#">Earth Science</a></li>
        <li class="course"><a href="#">Ecology</a></li>
        <li class="course"><a href="#">Education</a></li>
        <li class="course"><a href="#">Education Technology</a></li>
        <li class="course"><a href="#">Electrical Engineering</a></li>
        <li class="course"><a href="#">Health Informatics</a></li>
        <li class="course"><a href="#">Healthcare Management</a></li>
        <li class="course"><a href="#">History</a></li>
        <li class="course"><a href="#">History of Science</a></li>
        <li class="course"><a href="#">Hospitality Management</a></li>
        <li class="course"><a href="#">Information Technology</a></li>
        <li class="course"><a href="#">Internet Surfing</a></li>
        <li class="course"><a href="#">International Relations</a></li>
        <li class="course"><a href="#">Management Information Systems</a></li>
        <li class="course"><a href="#">Marine Biology</a></li>
        <li class="course"><a href="#">Materials Science</a></li>
        <li class="course"><a href="#">Mathematics</a></li>
        <li class="course"><a href="#">Medicine</a></li>
        <li class="course"><a href="#">Medical Anthropology</a></li>
        <li class="course"><a href="#">Others...</a></li>
      </ul>
    </div>
  </section>

  <section class="degrees" id="degrees">
    <div class="text-box">
      <p class="sub-title">LIVE YOUR TRUE DREAM</p>
      <h2 class="title">CHOOSE YOUR DEGREE</h2>
    </div>
    <div class="container link-disabled">
      <a class="item" href="#">
        <div class="text-box">
          <p class="duration">Full Time</p>
          <h4 class="title">Undergraduate</h4>
        </div>
        <p class="info">
          These are the basic courses for students who just want to have a
          good time and enjoy life. Students will learn the foundations of
          partying, gaming, and having fun, as well as the art of doing
          nothing.
        </p>
      </a>
      <a class="item" href="#">
        <div class="text-box">
          <p class="duration">Full/Part Time</p>
          <h4 class="title">Graduate</h4>
        </div>
        <p class="info">
          For students who have already mastered the basics of having a good
          time and are ready to take their skills to the next level, the
          graduate degree program offers advanced courses in the science of
          recreation and the philosophy of doing nothing.
        </p>
      </a>
      <a class="item" href="#">
        <div class="text-box">
          <p class="duration">Full/Part Time</p>
          <h4 class="title">Postgraduate</h4>
        </div>
        <p class="info">
          For students who want to go even deeper into the study of fun, the
          postgraduate degree program offers specialized courses in areas such
          as the sociology of partying, the economics of having a good time,
          and the psychology of doing nothing.
        </p>
      </a>
      <a class="item" href="#">
        <div class="text-box">
          <p class="duration">Full Time</p>
          <h4 class="title">Slackers</h4>
        </div>
        <p class="info">
          The Pinnacle Of All Degrees for dedicated fun-seekers, it is
          designed for those who want to turn their love of partying and
          gaming into a career. Advanced techniques for avoiding work and
          maximizing leisure time, as well as how to make a living for
          slacker's lifestyle.
        </p>
      </a>
    </div>
  </section>

  <section class="stats" id="stats">
    <h2 class="title">STATS WE ARE PROUD OF</h2>
    <div class="container">
      <div class="stat">
        <div class="value" id="success">-</div>
        <p class="info">SUCCESS RATE</p>
      </div>
      <div class="stat">
        <div class="value" id="graduates">-</div>
        <p class="info">GRADUATES</p>
      </div>
      <div class="stat">
        <div class="value" id="lectures">-</div>
        <p class="info">LECTURES SKIPPED</p>
      </div>
      <div class="stat">
        <div class="value" id="parties">-</div>
        <p class="info">PARTIES HOSTED</p>
      </div>
    </div>
  </section>

  <section class="events" id="events">
    <div class="text-box flex">
      <h2 class="title">Events</h2>
      <ul class="tabs-nav flex link-disabled">
        <li class="item is-active">
          <a href="#">Special Events</a>
        </li>
        <li class="item">
          <a href="#">Regular Events</a>
        </li>
        <li class="item">
          <a href="#">Past Events</a>
        </li>
        <li class="item">
          <a href="#">All Events</a>
        </li>
      </ul>
    </div>
    <div class="tabs">
      <div class="event">
        <p class="date">20 <span class="month">Jan</span></p>
        <div class="info">
          <div class="row flex">
            <p class="name">The Slacker's Olympics</p>
            <p class="time"><i class="fa-regular fa-clock"></i> 8AM</p>
          </div>
          <div class="row flex">
            <p class="category">Category: Sport</p>
            <p class="location">
              <i class="fa-solid fa-location-dot"></i> Athletic Field
            </p>
            <p class="outfit">Outfit: Athletic wear & a lack of motivation</p>
          </div>
        </div>
        <p class="pass"><i class="fa-solid fa-ticket"></i> Free</p>
      </div>
      <div class="event">
        <p class="date">22 <span class="month">Jan</span></p>
        <div class="info">
          <div class="row flex">
            <p class="name">Snack Attack</p>
            <p class="time"><i class="fa-regular fa-clock"></i> 8PM</p>
          </div>
          <div class="row flex">
            <p class="category">Category: Food</p>
            <p class="location">
              <i class="fa-solid fa-location-dot"></i> Great Hall
            </p>
            <p class="outfit">Outfit: Snack-themed costumes</p>
          </div>
        </div>
        <p class="pass"><i class="fa-solid fa-ticket"></i> Free</p>
      </div>
      <div class="event">
        <p class="date">28 <span class="month">Jan</span></p>
        <div class="info">
          <div class="row flex">
            <p class="name">Console & VR Clash</p>
            <p class="time"><i class="fa-regular fa-clock"></i> 6PM</p>
          </div>
          <div class="row flex">
            <p class="category">Category: Games</p>
            <p class="location">
              <i class="fa-solid fa-location-dot"></i> Game Room
            </p>
            <p class="outfit">Outfit: Cosplay</p>
          </div>
        </div>
        <p class="pass"><i class="fa-solid fa-ticket"></i> Free</p>
      </div>
      <div class="event">
        <p class="date">2 <span class="month">Feb</span></p>
        <div class="info">
          <div class="row flex">
            <p class="name">Shop-o-Mania</p>
            <p class="time"><i class="fa-regular fa-clock"></i> 11AM</p>
          </div>
          <div class="row flex">
            <p class="category">Category: Shopping</p>
            <p class="location">
              <i class="fa-solid fa-location-dot"></i> Campus Mall
            </p>
            <p class="outfit">Outfit: Casual</p>
          </div>
        </div>
        <p class="pass"><i class="fa-solid fa-ticket"></i> Free</p>
      </div>
      <div class="event">
        <p class="date">10 <span class="month">Feb</span></p>
        <div class="info">
          <div class="row flex">
            <p class="name">Netflix & Chill</p>
            <p class="time"><i class="fa-regular fa-clock"></i> 10PM</p>
          </div>
          <div class="row flex">
            <p class="category">Category: Movies</p>
            <p class="location">
              <i class="fa-solid fa-location-dot"></i> Space Theatre
            </p>
            <p class="outfit">Outfit: Comfortable clothes and a blanket</p>
          </div>
        </div>
        <p class="pass"><i class="fa-solid fa-ticket"></i> Free</p>
      </div>
    </div>
  </section>
</body>

</html>
              
            
!

CSS

              
                /* GENERAL STYLING 
––––––––––––––––––––––––––––––––––––– */
:root {
  --textColor: #000;
  --textColor2: #fff;
  --textColor3: #101c3a;
  --bgColor: #fff;
  --bgColor2: #151515;
  --bgColor3: #101c3a;
  --bgColor4: #1c3559;
  --font: "Poppins", serif;
  --font-size-6x: min(7.5vmin, calc(2rem + 1.2vmax));
  --font-size-5x: min(6.5vmin, calc(1.1rem + 1.2vmax));
  --font-size-4x: min(4vmin, calc(0.8rem + 1.2vmax));
  --font-size-3x: min(6vmin, calc(1rem + 0.12vmax));
  --font-size-2x: min(4vmin, calc(0.85rem + 0.12vmax));
  --font-size-1x: min(2vmin, calc(0.65rem + 0.12vmax));
  --letter-spacing-3x: 0.03em;
  --letter-spacing-2x: 0.02em;
  --gap-3x: min(5vmin, 1.5rem);
  --gap-2x: min(4.5vmin, 1rem);
  --size-10x: min(15vmin, 5.5rem);
  --size-9x: min(10vmin, 5rem);
  --size-8x: min(10vmin, 4rem);
  --size-7x: min(10vmin, 3rem);
  --size-6x: min(8.5vmin, 2.5rem);
  --size-5x: min(8vmin, 2rem);
  --size-4x: min(8vmin, 1.5rem);
  --size-3x: min(7vmin, 1rem);
  --size-2x: min(5vmin, 1rem);
  --size-1x: min(2.5vmin, 0.5rem);
}
:root.dark {
  --textColor: #f6f6f6;
  --bgColor: #121212;
  --bgColor2: #000000;
}
html {
  scroll-behavior: smooth;
}
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font);
  color: var(--textColor3);
}
img,
video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
h2 {
  font-size: var(--font-size-5x);
  text-align: center;
}
p {
  color: var(--textColor1);
}
li {
  list-style-type: none;
}
a {
  text-decoration: none;
  display: inline-block;
  width: 100%;
  color: inherit;
}
button {
  cursor: pointer;
  font-size: var(--font-size-2x);
  font-family: inherit;
  border: 1px solid var(--bgColor);
  border-radius: 0.2em;
  background-color: transparent;
  color: inherit;
}
svg {
  display: block;
  width: 100%;
  height: auto;
}
iframe {
  display: block;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* HEADER STYLING
––––––––––––––––––––––––––––––––––––– */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: var(--gap-2x);
  padding: var(--size-1x) var(--size-2x);
  z-index: 30;
  color: var(--textColor2);
  -webkit-transition: color 200ms ease;
  -o-transition: color 200ms ease;
  transition: color 200ms ease;
}
.header::after {
  position: absolute;
  inset: 0 0 0 0;
  z-index: -10;
  content: "";
  background-color: transparent;
  -webkit-transition: background-color 200ms ease;
  -o-transition: background-color 200ms ease;
  transition: background-color 200ms ease;
}
.header > .logo {
  width: min(30vmin, 170px);
}
.header > .logo path {
  fill: var(--textColor2);
  -webkit-transition: fill 200ms ease;
  -o-transition: fill 200ms ease;
  transition: fill 200ms ease;
}
.header > .top-menu {
  font-size: var(--font-size-3x);
  letter-spacing: var(--letter-spacing-2x);
  font-weight: 700;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: var(--gap-3x);
}
.header > .top-menu > .options {
  -webkit-transition: -webkit-transform 150ms ease;
  transition: -webkit-transform 150ms ease;
  -o-transition: transform 150ms ease;
  transition: transform 150ms ease;
  transition: transform 150ms ease, -webkit-transform 150ms ease;
}
.header > .top-menu > .options:not(.search):hover {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}
.header > .top-menu > .search input {
  outline: none;
  border: none;
  border-bottom: 1px solid var(--bgColor);
  max-width: 0;
  -webkit-transition: max-width 0.5s ease-out;
  -o-transition: max-width 0.5s ease-out;
  transition: max-width 0.5s ease-out;
  color: var(--textColor2);
  background-color: transparent;
  font-size: var(--font-size-2x);
  font-family: inherit;
}
.header > .top-menu > .search:focus-within input,
.header > .top-menu > .search:hover input {
  max-width: 20vw;
}
.header > .top-menu > .search > .btn {
  border: none;
}
.header.opaque,
.header.opaque > .top-menu > .search input {
  color: var(--textColor3);
  border-color: var(--bgColor3);
}
.header.opaque::after {
  background-color: var(--bgColor);
  -webkit-box-shadow: 0px -2px 8px #000000c7;
  box-shadow: 0px -2px 8px #000000c7;
}
.header.opaque > .logo path {
  fill: var(--textColor3);
}

/* NAVBAR STYLING
––––––––––––––––––––––––––––––––––––– */
nav {
  position: fixed;
  inset: 0 auto 0 50%;
  width: 0;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: width 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: width 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: width 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -20;
  overflow: hidden;
  background-color: var(--bgColor);
}
nav.open {
  width: 100%;
}
nav > .main-menu {
  height: 100%;
  font-size: var(--font-size-3x);
  font-weight: 600;
  text-transform: uppercase;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.12em;
  white-space: nowrap;
  color: white;
}
nav > .main-menu > .items:nth-child(1) {
  background-color: #1e2932;
}
nav > .main-menu > .items:nth-child(2) {
  background-color: #283618;
}
nav > .main-menu > .items:nth-child(3) {
  background-color: #553739;
}
nav > .main-menu > .items:nth-child(4) {
  background-color: #0a2e24;
}
nav > .main-menu > .items:nth-child(5) {
  background-color: #bc6c25;
}
nav > .main-menu > .items:nth-child(6) {
  background-color: #8b1c11;
}
nav > .main-menu > .items:hover {
  -webkit-filter: brightness(1.2);
  filter: brightness(1.2);
}
nav > .main-menu > .items > a {
  height: 100%;
}

/* HERO SECTION STYLING
––––––––––––––––––––––––––––––––––––– */
.hero-area {
  width: 100%;
  height: 100vh;
  position: relative;
  text-align: center;
}
.hero-area > video {
  -o-object-position: top;
  object-position: top;
  -webkit-filter: brightness(0.7);
  filter: brightness(0.7);
}
.hero-area > .info-box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  color: var(--textColor2);
}
.hero-area > .info-box > .title {
  font-size: var(--font-size-6x);
  letter-spacing: 0.05em;
}
.hero-area > .info-box > .motto {
  font-size: var(--font-size-1x);
  letter-spacing: 0.2em;
}
.hero-area > .tour {
  position: absolute;
  inset: auto 0 1% 0;
  color: var(--textColor2);
}
.hero-area > .tour > .btn {
  width: min(90%, 460px);
  -webkit-transition: border-color 200ms ease;
  -o-transition: border-color 200ms ease;
  transition: border-color 200ms ease;
}
.hero-area > .tour > .btn:hover {
  border-color: #ffffff33;
}
.hero-area > .tour > .btn > a {
  padding-block: min(2.5vmin, 0.9em);
  font-size: var(--font-size-2x);
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* BONUS SECTION STYLING
––––––––––––––––––––––––––––––––––––– */
.bonus {
  text-align: center;
  position: relative;
  aspect-ratio: 8/4;
}
.bonus > img {
  -webkit-filter: brightness(0.6) saturate(0.7);
  filter: brightness(0.6) saturate(0.7);
}
.bonus > .box {
  position: absolute;
  width: 100%;
  top: 7%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  color: var(--textColor2);
}
.bonus > .text-box > .info {
  font-size: min(5vmin, calc(1rem + 1.2vmax));
  letter-spacing: 0.04em;
  font-weight: 600;
}
.bonus > .text-box > .info > span {
  display: block;
  font-size: 0.62em;
}
.bonus > .apply {
  width: auto;
  top: auto;
  bottom: 2%;
  padding: var(--size-1x) var(--size-4x);
  font-size: var(--font-size-2x);
  letter-spacing: var(--letter-spacing-2x);
  font-weight: 500;
  border: 2px solid var(--bgColor);
}
.bonus > .apply:hover {
  border-color: #ffffff33;
}

/* COURSES LIST STYLING
––––––––––––––––––––––––––––––––––––– */
.courses {
  margin-block: min(5vmin, 2rem) min(3vmin, 1rem);
  padding-block: var(--size-2x);
}
.courses > .box {
  overflow: auto;
  background-color: var(--bgColor4);
  color: var(--textColor2);
  border-radius: min(7vmin, 1rem);
  margin: var(--size-2x);
}
.courses > .box > .list {
  max-height: min(60vmax, 80vh);
  -webkit-columns: auto max(200px, 20vw);
  -moz-columns: auto max(200px, 20vw);
  columns: auto max(200px, 20vw);
  -webkit-column-gap: max(2%, 15px);
  -moz-column-gap: max(2%, 15px);
  column-gap: max(2%, 15px);
  -webkit-column-rule: 1px solid;
  -moz-column-rule: 1px solid;
  column-rule: 1px solid;
  padding: var(--size-2x);
}
.courses > .box > .list > .course {
  font-size: var(--font-size-2x);
  margin-bottom: 0.7em;
}
.courses > .box::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.courses > .box::-webkit-scrollbar-thumb {
  background-color: var(--bgColor);
  border-radius: 1rem;
  border: 2px solid var(--bgColor4);
}
.courses > .box::-webkit-scrollbar-button {
  width: initial;
}

/* DEGREES STYLING
––––––––––––––––––––––––––––––––––––– */
.degrees {
  padding: var(--size-5x);
}
.degrees > .text-box {
  text-align: center;
  margin-block: var(--size-2x);
}
.degrees > .text-box > .sub-title {
  font-size: min(3.3vmin, 0.8em);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-3x);
}
.degrees > .container {
  max-width: 1150px;
  margin: 0 auto;
  padding: var(--size-5x);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: min(13vmin, 3rem) 1rem;
  background-color: #e5c794;
}
.degrees > .container > .item {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: min(50vmin, 190px);
  padding: 0 var(--size-5x);
  border-bottom: 1px solid;
  border-right: 1px solid;
}
.degrees > .container > .item .title {
  font-size: var(--font-size-3x);
}
.degrees > .container > .item .duration {
  font-size: var(--font-size-1x);
  letter-spacing: var(--letter-spacing-3x);
  font-weight: 500;
}
.degrees > .container > .item > .info {
  margin-block: var(--size-2x);
  font-size: var(--font-size-2x);
}

/* STATS STYLING
––––––––––––––––––––––––––––––––––––– */
.stats {
  padding-block: var(--size-7x);
  margin: var(--size-7x) var(--size-2x);
  text-align: center;
  border-top: 2px solid var(--bgColor4);
  border-bottom: 2px solid var(--bgColor4);
}
.stats > .title {
  margin-bottom: var(--size-7x);
  font-size: var(--font-size-3x);
  letter-spacing: var(--letter-spacing-3x);
}
.stats > .container {
  width: min(100%, 1100px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: var(--gap-3x);
}
.stats > .container > .stat > .value {
  font-size: var(--font-size-6x);
  font-weight: 700;
}
.stats > .container > .stat > .info {
  font-family: var(--font);
  font-size: var(--font-size-1x);
  letter-spacing: 0.2em;
}

/* EVENTS STYLING
––––––––––––––––––––––––––––––––––––– */
.events {
  max-width: 1380px;
  margin: var(--size-9x) auto;
  padding: var(--size-7x);
  background-color: #f1f1f1;
}
.events > .text-box {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: var(--gap-2x);
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.events > .text-box::before {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  content: "";
  -ms-flex-item-align: stretch;
  align-self: stretch;
  outline: 1px solid;
}
.events > .text-box > .tabs-nav {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  font-size: var(--font-size-2x);
  font-size: min(3.4vmin, calc(0.85rem + 0.12vmax));
}
.events > .text-box > .tabs-nav > .item {
  padding: var(--size-1x) var(--size-2x);
}
.events > .text-box > .tabs-nav > .is-active {
  background-color: var(--bgColor3);
  color: var(--textColor2);
  border-radius: 0.5em;
}
.events > .tabs {
  padding-top: var(--size-2x);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(60vmin, 400px), 1fr));
}
.events > .tabs > .event {
  -webkit-box-shadow: 0px 0px 6px -1px #77777773;
  box-shadow: 0px 0px 6px -1px #77777773;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--gap-3x);
  padding: var(--size-4x);
  margin: var(--size-1x);
  border-radius: 0.3rem;
}
.events > .tabs > .event::before {
  position: absolute;
  content: "";
  inset: 0% auto 0 0;
  height: 80%;
  margin-block: auto;
  border: 2px solid #d3940c;
  border-radius: 1rem;
}
.events > .tabs > .event > .date {
  text-align: center;
  font-size: var(--font-size-3x);
}
.events > .tabs > .event > .date > .month {
  display: block;
  font-size: 0.7em;
}
.events > .tabs > .event > .info > .row {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-column-gap: var(--gap-3x);
  -moz-column-gap: var(--gap-3x);
  column-gap: var(--gap-3x);
}
.events > .tabs > .event > .info p {
  font-size: min(4vmin, calc(0.8rem + 0.12vmax));
  line-height: 1.8;
}
.events > .tabs > .event > .info .name {
  font-size: var(--font-size-3x);
  font-weight: 700;
}
.events > .tabs > .event > .info .outfit {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}
.events > .tabs > .event > .pass {
  font-size: var(--font-size-2x);
  color: #d2691e;
}

@media screen and (max-width: 730px) {
  .header > .top-menu > :nth-child(-1n + 2) {
    display: none;
  }
  .stats > .container {
    grid-template-columns: repeat(2, 1fr);
  }
  .events > .text-box > .tabs-nav > .item:nth-child(3) {
    display: none;
  }
}
@media screen and (max-width: 580px) {
  nav > .main-menu {
    grid-template-columns: none;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
  }
  .bonus {
    aspect-ratio: 1/1;
  }
}

              
            
!

JS

              
                const header = document.querySelector("header");
const menuIcon = document.querySelector(".menu-icon");
const menu = document.querySelector("nav");
const discoverItems = document.querySelectorAll(".discover-items");
const stats = document.querySelectorAll(".stat > .value");
const heroSlideUpBtn = document.querySelectorAll(
  ".hero-area [data-animate~=btn-slide-up]"
);
const discoverSlideElems = document.querySelectorAll(
  ".discover [data-animate~=slide-up]"
);
const majorSlideElems = document.querySelectorAll(
  ".major [data-animate~=slide-up]"
);
const majorSlideRightElems = document.querySelectorAll(
  ".major [data-animate~=slide-right]"
);
const bonusScaleElems = document.querySelectorAll(
  ".bonus [data-animate~=scale-up]"
);
const degreesSlideElems = document.querySelectorAll(
  ".degrees [data-animate~=slide-up]"
);
const eventsSlideElems = document.querySelectorAll(
  ".events [data-animate~=slide-right]"
);
let headerInLandingPage = true;

// ---Menu toggling---
menuIcon.addEventListener("click", (e) => {
  e.preventDefault();
  menu.classList.toggle("open");
  if (!headerInLandingPage) header.classList.toggle("opaque");
});

// ---Disable some links---
document.querySelectorAll(".link-disabled").forEach((e) =>
  e.addEventListener("click", (e) => {
    e.preventDefault();
    showNotif(
      false,
      "Server On Holiday",
      "The page is not broken, the school's developers are currently taking a break.",
      5000
    );
  })
);

// ---intersectionObserver for elem reveal animation on scroll---
createObserver("#hero-area", {
  func: (intersecting) => {
    header.classList.toggle("opaque", !intersecting);
    headerInLandingPage = intersecting;
    if (menu.classList.contains("open")) header.classList.remove("opaque");
  },
  observeOnce: false,
  headerNavBug: true,
  thresholdValue: 0.25
});
createObserver("#stats", {
  func: typeLetter,
  observeOnce: true,
  thresholdValue: 0.25
});
createObserver("#stats", {
  func: statsCounter.bind(null, stats, {
    endDigitRange: [
      [50, 65],
      [200, 230],
      [880, 930],
      [70, 85]
    ],
    symbol: ["%", "k", "k", "k"],
    decimal: [0, 1, 1, 0],
    speed: 100
  }),
  observeOnce: true,
  thresholdValue: 1.0
});
createObserver("#hero-area", {
  func: () => heroSlideUpBtn.forEach((each) => each.classList.add("animate")),
  observeOnce: true,
  thresholdValue: 0
});
createObserver("#major", {
  func: () => majorSlideElems.forEach((each) => each.classList.add("animate")),
  observeOnce: true,
  thresholdValue: 0.2
});
createObserver("#major", {
  func: () =>
    majorSlideRightElems.forEach((each) => each.classList.add("animate")),
  observeOnce: true,
  thresholdValue: 0.2
});
createObserver("#bonus", {
  func: () => bonusScaleElems.forEach((each) => each.classList.add("animate")),
  observeOnce: true,
  thresholdValue: 0.2
});
createObserver("#degrees", {
  func: () =>
    degreesSlideElems.forEach((each) => each.classList.add("animate")),
  observeOnce: true,
  thresholdValue: 0.3
});
createObserver("#events", {
  func: () => eventsSlideElems.forEach((each) => each.classList.add("animate")),
  observeOnce: true,
  thresholdValue: 0.3
});

// ---University statistics counter function---
function statsCounter(arrOfElems, options) {
  arrOfElems.forEach((elem, index) => {
    const rand = (min, max) => Math.floor(Math.random() * (max - min)) + min;
    const symbol = options["symbol"][index];
    const endDigitRange = options["endDigitRange"][index];
    const endValue = rand(...endDigitRange);
    const speed = options["speed"] + 1.23;
    const increment = endValue / speed;
    const decimal = options["decimal"][index];
    let startValue = 0;

    let timer = setInterval(() => {
      startValue += increment;
      elem.innerText = `${startValue.toFixed(decimal)}${symbol}`;

      if (startValue >= endValue) clearInterval(timer);
    }, 10);
  });
}

// ---Creates all Intersection observer used---
function createObserver(elemID, options) {
  const elem = document.querySelector(elemID);
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        // This "if statement" should not be included if this function is reused in a different website
        if (options.headerNavBug) {
          options.func(entry.isIntersecting);
          return;
        }

        if (entry.isIntersecting) {
          options.func();
          if (options.observeOnce) observer.unobserve(entry.target);
        }
      });
    },
    { threshold: options.thresholdValue }
  );

  observer.observe(elem);
}

// ---Infinite Sliding---
const sliderContents = document.getElementsByClassName("program");
let currentSlideIndex = 0;

function goToSlide(currentSlideIndex) {
  [...sliderContents].forEach(
    (each, i) =>
      (each.style.transform = `translateX(${(i - currentSlideIndex) * 100}%)`)
  );

  readyNextSlide();
}
function readyNextSlide() {
  const lastSlideIndex = sliderContents.length - 1;

  if (currentSlideIndex === lastSlideIndex) {
    document.querySelector(".programs").append(sliderContents[0]);
    sliderContents[lastSlideIndex].style.transform = `translateX(100%)`;
    currentSlideIndex--;
  }

  if (currentSlideIndex === 0) {
    document.querySelector(".programs").prepend(sliderContents[lastSlideIndex]);
    sliderContents[0].style.transform = `translateX(-100%)`;
    currentSlideIndex++;
  }
}
goToSlide(currentSlideIndex);
document
  .querySelector(".prev")
  .addEventListener("click", () => goToSlide(--currentSlideIndex));
document
  .querySelector(".next")
  .addEventListener("click", () => goToSlide(++currentSlideIndex));

// ---Typewriting For Letter---
function typeLetter() {
  const letterToStudent =
    '<div class="content"><div class="text-box"><img src="img/official.svg" alt=""><p class="sub-title">FROM THE CHAOTIC DESK OF THE CHANCELLOR</p></div><form action=""><p class="para"><label>Hello, future <select class="selection"><option value="null" selected></option><option value="Undergraduate">Undergraduate</option><option value="graduate">graduate</option><option value="postgraduate">postgraduate</option><option value="slacker">slacker</option></select>! Are you fed up of the traditional university experience and ready for something a little more... relaxed? If so, then Slacker University is where you belong!</label></p><p class="para"><label>You may think you&#39;re just an average <select class="selection"><option value="null" selected></option><option value="student">student</option><option value="gamer">gamer</option><option value="lazy-bone">lazy-bone</option><option value="party animal">party animal</option></select>, but at this University, we see potential in you. </label><label>We&#39;re a community of fun-loving individuals that knows how to have a good time and still get our <select class="selection"><option value="null" selected></option><option value="degrees">degrees</option><option value="diplomas">diplomas</option><option value="certificate">certificate</option><option value="badge of honor">badge of honor</option></select>.</label></p><p class="para"><label>SLACKER UNIVERSITY: WHERE PROCRASTINATION IS A VIRTUE are pleased to inform you, a <select class="selection"><option value="null" selected></option><option value="18+">18+</option><option value="25+">25+</option><option value="35+">35+</option><option value="50+">50+</option></select> <select class="selection"><option value="null" selected></option><option value="male">male</option><option value="female">female</option></select></label><label>is invited to join us at Slacker University&#39;s <select class="selection"><option value="null" selected></option><option value="great hall">great hall</option><option value="party central">party central</option><option value="fun factory">fun factory</option><option value="gamers lounge">gamers lounge</option><option value="food town">food town</option></select></label><label> and let your <select class="selection"><option value="null" selected></option><option value="creative side">creative side</option><option value="inner gamer">inner gamer</option><option value="inner gluttony">inner gluttony</option><option value="love of parties">love of parties</option><option value="love of doing nothing">love of doing nothing</option></select> shine. </label><label>Remember, you are among the few elites chosen to partake in the extraordinary education and blissful experience that this prestigious University has to offer.</label></p><p class="para"><label>But don&#39;t worry, we didn&#39;t forget about the whole "getting an education" thing. Even with all the fun and merriment, you&#39;ll still get your full academic degree and study just a tiny little bit. Just enough to keep your <select class="selection"><option value="null" selected></option><option value="parents">parents</option><option value="guardian">guardian</option></select> off your back, you know.</label></p><p class="para"><label>At Slacker U, we don&#39;t just tolerate laziness - we embrace it. Our students are the kings and queens of procrastination, the masters of doing nothing. But don&#39;t think that means we don&#39;t have any fun - oh no, quite the opposite. Whether you&#39;re into<select class="selection"><option value="null" selected></option><option value="creating">creating</option><option value="gaming">gaming</option><option value="partying">partying</option><option value="flirting">flirting</option><option value="having fun">having fun</option><option value="doing nothing">doing nothing</option></select>, we&#39;ve got something for you.</label></p><p class="para"><label>So let&#39;s break you out of your <select class="selection"><option value="null" selected></option><option value="regular university">regular university</option><option value="boring life">boring life</option><option value="9-5 grind">9-5 grind</option><option value="seriousness jail">seriousness jail</option></select> and join the ranks of the ultimate slackers to ever walk this planet. </label><label>We can&#39;t wait to see what the future holds for you at Slacker University. Consider Accepting this invitation and join us on this magnificent journey.</label></p><div class="btn-box"><button class="accept" type="submit" id="accept">Accept</button></div></form></div>';

  const typingOptions = {
    strings: [letterToStudent],
    typeSpeed: 15,
    showCursor: false,
    loop: false,
    onComplete: () => {
      document.querySelector(".veil").remove();
      showNotif(
        true,
        "Go On",
        "You can interact with the Official Letter now.",
        4000
      );
      document.querySelector("#accept").addEventListener("click", (e) => {
        e.preventDefault();
        showNotif(
          true,
          "INVITATION ACCEPTED",
          " We'd Contact you in a week's time. BE PREPARED!",
          5000
        );
      });
    }
  };

  const typed = new Typed(document.querySelector("#typed"), typingOptions);
  document.querySelector(".letter").classList.add("animate");
  document.querySelector(".letter").addEventListener("click", () => {
    if (!typed.typingComplete) {
      showNotif(
        false,
        "Where Are Your Manners?",
        "The School's Chancellor is composing a message, Wait till he's done.",
        4000
      );
    }
  });
}

// ---Creates Notifications---
function showNotif(isError, notifHead, notifInfo, timer) {
  let notification = document.querySelector(".notif");

  document.querySelector(".notif-head").innerHTML = notifHead;
  document.querySelector(".notif-info").innerHTML = notifInfo;
  !isError
    ? notification.classList.add("error")
    : notification.classList.remove("error");

  if (!notification.classList.contains("show")) {
    notification.classList.add("show");
    setTimeout(() => {
      notification.classList.remove("show");
    }, timer);
  }
}

              
            
!
999px

Console