Skip to content

Instantly share code, notes, and snippets.

@VitalyErmilov

VitalyErmilov/airpods-landing-page-example.markdown

Created February 1, 2025 01:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save VitalyErmilov/898c2e2c9fb094dfcf73de19ccccb9f7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save VitalyErmilov/898c2e2c9fb094dfcf73de19ccccb9f7 to your computer and use it in GitHub Desktop.
Download ZIP
Airpods Landing Page Example
Raw
airpods-landing-page-example.markdown
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AirPods Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="l-header">
<nav class="nav bd-grid">
<a href="#" class="nav-logo">AirPods</a>
<div class="nav-menu" id="nav-menu">
<ul class="nav-list">
<li class="nav-item"><a href="#l-main" class="nav-link">Description</a></li>
<li class="nav-item"><a href="#l-section" class="nav-link">Specifications</a></li>
</ul>
</div>
<div class="nav-actions">
<div class="nav-toggle" id="nav-toggle">
<img src="https://i.postimg.cc/zGFxhLRv/bx-chevron-down.png" alt="logo">
</div>
<a href="#" class="nav-btn">Buy</a>
</div>
</nav>
</header>
<main class="l-main bd-grid">
<section class="home">
<div class="home-data">
<h1 class="home-title">AirPods</h1>
<p class="home-description">AirPods give you an unrivaled wireless experience, now offering more hours of talk time and a new <br> wireless charging case</p>
</div>
<div class="home-img">
<img src="https://i.postimg.cc/TwLjthhr/airpod1.png" alt="image" class="airpod1">
<img src="https://i.postimg.cc/d1b2pvTg/airpod2.png" alt="image" class="airpod2">
</div>
<div class="home-scroll">
<span class="home-scroll-text">Scroll down for more</span>
<a href="#l-section"><img src="https://i.postimg.cc/brPG1vnY/bx-mouse.png" alt="icon" class="home-scroll-icon"></a>
</div>
</section>
<section class="l-section" id="l-section">
<div class="details">
<div class="details-content">
<div class="details-box">
<span class="details-initial">More than</span>
<h3 class="details-title">24 <span>h</span></h3>
<p class="details-description">battery with<br> the charging case</p>
</div>
<div class="details-box">
<span class="details-initial">Until</span>
<h3 class="details-title">5 <span>h</span></h3>
<p class="details-description">battery with<br> a single charge</p>
</div>
<div class="details-box">
<span class="details-initial">Only</span>
<h3 class="details-title">15 <span>min</span></h3>
<p class="details-description">charging is equivalent <br>to up to 3 hours of <br>audio</p>
</div>
</div>
<div class="details-img">
<img src="https://i.postimg.cc/ht0bZHst/airpods.png" alt="image" class="airpods">
</div>
</div>
</section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Raw
script.js
const showMenu = (toggleId, navId) => {
const toggle = document.getElementById(toggleId);
const nav = document.getElementById(navId);
if(toggle && nav) {
toggle.addEventListener('click', () => {
nav.classList.toggle('show');
})
}
}
showMenu('nav-toggle', 'nav-menu');
/* GSAP Animation */
gsap.from('.home-title', {opacity: 0, duration: 1.5, delay: .5, y: 50});
gsap.from('.home-description', {opacity: 0, duration: 1.5, delay: .8, y: 50});
gsap.from('.airpod1', {opacity: 0, duration: 2, delay: 1.2, y: 40});
gsap.from('.airpod2', {opacity: 0, duration: 2, delay: 1.4, y: 40});
gsap.from('.nav-logo', {opacity: 0, duration: 2.5, delay: 1.5, y: 25});
gsap.from('.nav-toggle', {opacity: 0, duration: 2.5, delay: 1.7, y: 25});
gsap.from('.nav-item', {opacity: 0, duration: 2.5, delay: 1.9, y: 25, ease: 'expo.out', stagger: .3});
gsap.from('.nav-btn', {opacity: 0, duration: 2.5, delay: 2, y: 25});
gsap.from('.home-scroll', {opacity: 0, duration: 1.5, delay: 2.3, y: 30});
var animate = new TimelineMax({onUpdate:updatePercentage})
var controller = new ScrollMagic.Controller()
animate
.from('.details-img', {opacity: 0, y: 25})
.from('.details-box', {opacity: 0, y: 25, duration: 1, ease:'expo.out', stagger: .4})
var scene = new ScrollMagic.Scene({
triggerElement: ".details-box"
})
.setTween(animate)
.addTo(controller)
function updatePercentage(){
animate.progress();
}
Raw
style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root {
--first-color: #1d1d1f;
--second-color: #0071e3;
--white-color: #fff;
--body-font: 'Roboto', sans-serif;
--biggest-font-size: 3.5rem;
--bigger-font-size: 2.25rem;
--big-font-size: 1.625rem;
--normal-font-size: 0.813rem;
--smaller-font-size: 0.75rem;
--z-back: -10;
--z-normal: 1;
--z-tooltip: 10;
--z-fixed: 100;
--z-modal: 1000;
}
*, ::before, ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
html { scroll-behavior: smooth; }
body {
margin: 3rem 0 0 0;
font-family: var(--body-font);
background-color: var(--white-color);
color: var(--first-color);
}
img {
max-width: 100%;
height: auto;
}
.bd-grid {
max-width: 1200px;
margin-left: 1rem;
margin-right: 1rem;
}
.l-header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--white-color);
}
.nav {
height: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-actions {
display: flex;
align-items: center;
}
.nav-item { margin-bottom: 1.5rem; }
.nav-link { color: var(--first-color); }
.nav-link:hover { color: var(--second-color); }
.nav-logo {
color: var(--first-color);
font-weight: 700;
}
.nav-toggle {
display: inline;
cursor: pointer;
margin-right: 1rem;
}
.nav-toggle img { width: 1.8rem; }
.nav-btn {
background-color: var(--second-color);
color: var(--white-color);
padding: 0.375rem 1rem;
border-radius: 2rem;
}
/*HOME*/
.home {
height: calc(100vh - 3rem);
display: grid;
grid-template-rows: 1.5fr 1fr 1fr;
grid-template-areas: "data" "img" "scroll";
row-gap: 1.5rem;
}
.home-data {
grid-area: data;
text-align: center;
padding-top: 3.5rem;
}
.home-title {
font-size: var(--biggest-font-size);
font-weight: 400;
margin-bottom: 1.5rem;
}
.home-description {
font-size: var(--normal-font-size);
padding: 0 1rem;
}
.home-img {
grid-area: img;
display: flex;
justify-content: center;
}
.home-img img {
width: 81px;
height: 177px;
margin-right: 1rem;
}
.home-scroll {
grid-area: scroll;
text-align: center;
align-self: center;
}
.home-scroll-text {
display: block;
font-size: .75rem;
margin-bottom: 1rem;
}
.home-scroll-item { width: 2rem; }
.airpod1 { animation: airpod1 3s infinite; }
.airpod2 { animation: airpod2 3s infinite; }
@keyframes airpod1 {
50% { transform: translateY(-6%); }
}
@keyframes airpod2 {
50% { transform: translateY(-6%); }
}
/*L-SECTION*/
.details {
height: calc(100vh - 3rem);
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
justify-content: center;
}
.details-box {
margin-bottom: 2.5rem;
text-align: center;
}
.details-initial { font-size: var(--smaller-font-size); }
.details-title {
font-size: var(--bigger-font-size);
font-weight: 400;
}
.details-title span { font-size: var(--big-font-size); }
.details-description { font-size: var(--normal-font-size); }
.details-img {
width: max-content;
align-self: center;
}
.details-img img { width: 218px; }
.airpods { animation: airpods 3s infinite; }
@keyframes airpods {
50% { transform: translateY(-6%); }
}
@media screen and (max-width: 768px) {
.nav-menu {
position: fixed;
top: -100%;
left: 0;
background-color: var(--white-color);
width: 100%;
height: 20%;
padding: 2rem 1rem;
z-index: var(--z-fixed);
border-bottom: 1px solid gray;
transition: .5s;
}
.show { top: 3rem; }
}
@media screen and (min-width: 768px) {
:root {
--biggest-font-size: 8rem;
--bigger-font-size: 4.5rem;
--big-font-size: 2.5rem;
--normal-font-size: 1rem;
--smaller-font-size: 0.938rem;
}
body { margin: 0; }
.nav { height: 4rem; }
.nav-menu { margin-left: auto; }
.nav-list { display: flex; }
.nav-item {
margin-right: 1.5rem;
margin-bottom: 0;
}
.nav-toggle { display: none; }
.home {
height: 100vh;
-ms-grid-columns: min-content;
grid-template-columns: -webkit-min-content;
grid-template-columns: min-content;
-ms-grid-rows: 80% 10%;
grid-template-rows: 80% 10%;
grid-template-areas: "data img" "scroll scroll";
-ms-flex-line-pack: end;
align-content: flex-end;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-column-gap: 4rem;
column-gap: 4rem;
}
.home-data {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: data;
padding: 0;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
text-align: initial;
}
.home-description {
padding: 0 5rem 0 0;
text-align: justify;
}
.home-img {
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: img;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.home-img img {
width: 114px;
height: 248px;
}
.home-scroll {
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-area: scroll;
padding-bottom: 2rem;
}
.details {
-webkit-column-gap: 4rem;
column-gap: 4rem;
}
.details-box { margin-bottom: 2rem; }
.details-img {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.details-img img {
width: 300px;
}
}
@media screen and (min-width: 1200px) {
.bd-grid {
margin-left: auto;
margin-right: auto;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment