9月21日分作業データ - WEBサイト制作の勉強

index.html

<!DOCTYPE html>
<html lang="ja">
<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">
<title>Cafe de FELICA</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/hamburgers.css">
</head>
<body>
<header>
<h1>Cafe de FELICA</h1>
</header>
<div class="main-visual">
<img src="img/header-01.jpg" alt="">
</div>
<p class="hamburger hamburger--3dxy " id="btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>
<nav id="g-nav">
<ul>
<li><a href="#">Top</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#info">Info</a></li>
<li><a href="#form">Form</a></li>
</ul>
</nav>

<main>
<div class="contents" id="video">
<h2>Video</h2>
<div class="video-wrapper">
<iframe class="y-tube" src="https://www.youtube.com/embed/43CHISIvBvU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div><!-- /.contents -->


<div class="contents" id="menu">
<h2>Menu</h2>
<ul class="menu-wrapper">
<li><a href="img/menu-01.jpg" data-lightbox="menu"><img src="img/menu-01.jpg" alt=""></a></li>
<li><a href="img/menu-02.jpg" data-lightbox="menu"><img src="img/menu-02.jpg" alt=""></a></li>
<li><a href="img/menu-03.jpg" data-lightbox="menu"><img src="img/menu-03.jpg" alt=""></a></li>
</ul>
</div><!-- /.contents -->

<div class="contents" id="info">
<h2>Info</h2>
</div><!-- /.contents -->
<div class="contents" id="form">
<h2>Form</h2>
</div><!-- /.contents -->
</main>

<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/lightbox.js"></script>

<script>
$(function(){
//#btnをon.clickしたら
$('#btn').on('click',function(){
$(this).toggleClass('is-active');
});
});
</script>
</body>
</html>

style.css

@charset "utf-8";

html,body,h1,h2,h3,p,ul,li,dl,dt,dd{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
max-width: 100%;
}
*{
box-sizing: border-box;
}


/* ヒーローヘッダー部分 */
.main-visual{
width: 100%;
height: 100vh;
}
.main-visual>img{
object-fit: cover;
width: 100%;
height: 100%;
}

.contents{
height: 100vh;
}
h2{
text-align: center;
padding-top: 60px;
font-size: 50px;
}

/* 動画部分 */
.video-wrapper{
max-width: 800px;
height: 400px;
margin: 50px auto;
}
.y-tube{
width: 100%;
height: 100%;
}

/* メニュー部分 */
.menu-wrapper{
max-width: 960px;
margin: 50px auto;
display: flex;
justify-content: space-between;
}
.menu-wrapper>li{
width: 31%;
}