【ソースコード】中級編：ストアサイト（カフェ）／パララックス
index.html
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>COFFEE</title>
<meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキス">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<header id="header">
<nav>
<ul>
<li><a href="#menu">MENU</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#location">LOCATION</a></li>
</ul>
</nav>
<h1 class="site-title"><img src="img/logo.svg" alt="COFFEE"></h1>
</header>
<main>
<section id="menu">
<div class="menu-img fixed-bg">
<h2 class="sec-title">MENU</h2>
</div>
<div class="menu-content wrapper">
<div class="menu-item">
<h3 class="item-title">COFFEE</h3>
<dl>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
</dl>
</div>
<div class="menu-item">
<h3 class="item-title">FOOD</h3>
<dl class="food">
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
</dl>
<h3 class="item-title">OTHER</h3>
<dl>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
</dl>
</div>
</div>
</section>
<section id="about">
<div class="about-img fixed-bg">
<h2 class="sec-title">ABOUT</h2>
</div>
<div class="about-content wrapper">
<div class="about-item">
<h3 class="item-title">COFFEE</h3>
<ul>
<li>
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
</li>
<li>
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
</li>
<li>
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
</li>
<li>
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
</li>
</ul>
<a class="btn" href="#"><span>Read More</span></a>
</div>
</div>
</section>
<section id="location">
<div class="location-img fixed-bg">
<h2 class="sec-title">LOCATION</h2>
</div>
<div class="location-content wrapper">
<div class="location-item">
<h3 class="item-title">OUR STORE</h3>
<div class="item-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4585.299293219977!2d139.7062494041788!3d35.64507269733178!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b40ba660b1b%3A0x8858088b6942f55f!2z44CSMTUwLTAwMjIg5p2x5Lqs6YO95riL6LC35Yy65oG15q-U5a-_5Y2X!5e0!3m2!1sja!2sjp!4v1592748907506!5m2!1sja!2sjp"></iframe>
</div>
<div class="item-info">
<p>
X-XX-XX, Ebisuminami, Shibuya-ku, Tokyo 150-0022<br>
東京都渋谷区恵比寿南X-XX-XX
</p>
<p>
Open 7 days a Week<br>
9:00am to 10:00pm
</p>
<p>Tel : XX-XXXX-XXXX</p>
</div>
</div>
</div>
</section>
</main>
<footer id="footer">
<p>© COFFEE</p>
</footer>
</body>
</html>