82 lines
4.3 KiB
HTML
82 lines
4.3 KiB
HTML
{342db0945d57985b0038154fa68a933f8ae2b487 true 4354 index.html 0xc002aeba40}
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="assets/css/styles.css">
|
|
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
|
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
<!-- HEADER -->
|
|
<header class="l-header">
|
|
<nav class="nav bd-grid">
|
|
<a href="#" class="nav__logo"><ion-icon name="aperture-outline"></ion-icon>AirPods</a>
|
|
<div class="nav__menu" id="nav-menu">
|
|
<ul class="nav__list">
|
|
<li class="nav__item"><a href="#" class="nav__link">Descripcion</a></li>
|
|
<li class="nav__item"><a href="#l-section" class="nav__link">Special</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="nav__actions">
|
|
<div class="nav__toggle" id="nav-toggle">
|
|
<img src="assets/icons/bx-chevron-down.svg" alt="">
|
|
</div>
|
|
<a href="#" class="nav__btn">Buy</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<!-- HOME -->
|
|
<main class="l-main bd-grid">
|
|
<section class="home">
|
|
<div class="home__data">
|
|
<h1 class="home__title">AirPods</h1>
|
|
<p class="home__description">They give you an unmatched wireless experience,
|
|
now they offer you more hours to talk and come with a new charging case. <br><!-- GSAP -->wireless.</p>
|
|
</div>
|
|
<div class="home__img">
|
|
<img src="assets/img/airpod1.png" alt="" class="airpod1">
|
|
<img src="assets/img/airpod2.png" alt="" class="airpod2">
|
|
</div>
|
|
<div class="home__scroll">
|
|
<span class="home__scroll-text">Scroll down for more</span>
|
|
<a href="#l-section"><img src="assets/icons/bx-mouse.svg" alt="" 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 of</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 on<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">charge equals<br> up to 3 hours of<br> audio</p>
|
|
</div>
|
|
</div>
|
|
<div class="details__img">
|
|
<img src="assets/img/airpods.png" alt="" class="airpods">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- GSAP -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
|
|
<!-- TIMELINE MAX -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineMax.min.js"></script>
|
|
<!-- SCROLLMAGIC -->
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
|
|
<!-- MAIN -->
|
|
<script src="assets/js/main.js"></script>
|
|
</body>
|
|
</html> |