HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!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>
/* 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;
}
}
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'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'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'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't worry, we didn't forget about the whole "getting an education" thing. Even with all the fun and merriment, you'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't just tolerate laziness - we embrace it. Our students are the kings and queens of procrastination, the masters of doing nothing. But don't think that means we don't have any fun - oh no, quite the opposite. Whether you'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've got something for you.</label></p><p class="para"><label>So let'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'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);
}
}
Also see: Tab Triggers