<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>AirMug Pro</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<nav class="global-nav">
<div class="global-nav-links">
<a href="#" class="global-nav-item">Rooms</a>
<a href="#" class="global-nav-item">Ideas</a>
<a href="#" class="global-nav-item">Stores</a>
<a href="#" class="global-nav-item">Contact</a>
</div>
</nav>
<nav class="local-nav">
<div class="local-nav-links">
<a href="#" class="product-name">AirMug Pro</a>
<a href="#">개요</a>
<a href="#">제품사양</a>
<a href="#">구입하기</a>
</div>
</nav>
<section class="scroll-section" id="scroll-section-0">
<h1>AirMug Pro</h1>
<div class="sticky-elem main-message">
<p>온전히 빠져들게 하는<br>최고급 세라믹</p>
</div>
<div class="sticky-elem main-message">
<p>주변 맛을 느끼게 해주는<br>주변 맛 허용 모드</p>
</div>
<div class="sticky-elem main-message">
<p>온종일 편안한<br>맞춤형 손잡이</p>
</div>
<div class="sticky-elem main-message">
<p>새롭게 입가를<br>찾아온 매혹</p>
</div>
</section>
<section class="scroll-section" id="scroll-section-1">
<p>
<strong>보통 스크롤 영역</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex iusto obcaecati officia repellendus sapiente! Ab accusamus ad atque autem consequuntur deserunt dolorem doloremque eaque earum illo laudantium magni minima minus nulla numquam placeat quasi quia quo recusandae, reiciendis soluta tempore voluptatibus? Ex, facere, itaque. Alias atque minus molestias nam similique voluptate? Aliquid atque deleniti magnam minima officiis, rem unde. Architecto exercitationem odio porro, quidem saepe sunt tenetur? A assumenda at commodi dolorum, ducimus et ex facilis illum incidunt iure iusto labore laborum laudantium minus modi molestias, nihil nostrum omnis optio, perferendis porro quidem quod rem repudiandae sapiente sed sequi sit. Alias aspernatur debitis deleniti earum enim ex inventore magnam minima nesciunt nobis nostrum nulla numquam placeat quaerat, repellat! Aspernatur assumenda corporis, cum distinctio enim fugit ipsam nulla odit perferendis sunt unde voluptates. Adipisci aspernatur ea eligendi exercitationem minus quae quidem reprehenderit tempore vitae voluptates! Asperiores fugiat laboriosam obcaecati officia provident quo rem, rerum? Alias asperiores aspernatur, aut consectetur consequuntur, corporis deleniti dicta ducimus earum eligendi est excepturi explicabo, hic illo illum ipsum iure iusto magnam maiores minus mollitia nesciunt nulla obcaecati perspiciatis placeat possimus quae qui quidem quis repellat repudiandae rerum sapiente tempore tenetur velit veritatis voluptatum. Ab, eum saepe.
</p>
</section>
<section class="scroll-section" id="scroll-section-2">
<div class="sticky-elem main-message">
<p>
<small>편안한 촉감</small>
입과 하나 되다
</p>
<div class="sticky-elem desc-message">
<p>편안한 목넘김을 완성하는 디테일한 여러 구성 요소들, 우리는 이를 하나하나 새롭게 살피고 재구성하는 과정을 거쳐 새로운 수준의 머그, AirMug Pro를 만들었습니다. 입에 뭔가 댔다는 감각은 어느새 사라지고 오롯이 당신과 음료만 남게 되죠.
디자인 앤 퀄리티 오브 스웨덴,
메이드 인 차이나
</p>
<div class="pin"></div>
</div>
<div class="sticky-elem desc-message">
<p>
디자인 앤 퀄리티 오브 스웨덴,<br>메이드 인 차이나
</p>
<div class="pin"></div>
</div>
</section>
<section class="scroll-section" id="scroll-section-3">
<p class="mid-message">
<strong>Retina 머그</strong><br>
아이디어를 광활하게 펼칠<br>
아름답고 부드러운 음료 공간.
</p>
<p class="canvas-caption">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur explicabo id minima modi nesciunt qui voluptates. Accusamus consequatur hic ipsa ipsum nihil officiis, optio placeat quas rem veritatis! At, debitis doloribus earum eligendi eos est excepturi iste nihil officiis repudiandae sapiente sit soluta voluptate! Error illum repellendus sequi tenetur?
</p>
</section>
<footer class="footer">연습</footer>
</div>
</body>
</html>