4月11日の作業データ Fresco Italiano - 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>Fresco Italiano｜トップページ</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/hamburgers.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
</head>
<body>
<header>
<h1>Fresco Italiano</h1>

<p class="hamburger " id="ham-btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>
</header>
<nav id="g-nav">
<ul>
<li><a href="#" data-en="TOP">トップ</a></li>
<li><a href="#" data-en="NEWS">お知らせ</a></li>
<li><a href="#" data-en="VIDEO">動画</a></li>
<li><a href="#" data-en="MENU">メニュー</a></li>
<li><a href="#" data-en="INFORMATION">店舗情報</a></li>
<li><a href="#" data-en="FAQ">よくあるご質問</a></li>
<li><a href="#" data-en="RESERVE">ご予約はこちらから</a></li>
</ul>
</nav>
<main>
<div class="main-visual">
<ul class="bxslider">
<li><img src="img/main01.jpg" alt=""></li>
<li><img src="img/main02.jpg" alt=""></li>
<li><img src="img/main03.jpg" alt=""></li>
</ul>
<p class="tag-line">新鮮な素材から生まれるイタリアンの魅力を、南池袋で</p>
</div><!-- /.main-visual -->
<div class="concept">
<h2>フレッシュな素材にこだわったイタリアン</h2>
<p>
<span>Fresco Italiano</span>では、厳選された新鮮な素材を使用したイタリアンを提供しています。<br>
地元の農家から直接仕入れた野菜や、新鮮な魚介類を使用し、季節ごとに変わるメニューをお楽しみいただけます。<br>
また、パスタやピザなども手作りで提供しており、素材の味を最大限に引き出したイタリアンを提供しています。
</p>
<div class="concept-gallery">
<p><img src="img/concept01.jpg" alt=""></p>
<p><img src="img/concept02.jpg" alt=""></p>
<p><img src="img/concept03.jpg" alt=""></p>
</div><!-- /.concept-gallery -->
</div><!-- /.concept -->

<section id="news">
<h2 data-en="NEWS">お知らせ</h2>
<dl id="news-list">

</dl>
</section><!-- /#news -->

<section id="video">
<h2 data-en="VIDEO">動画</h2>
<div class="video-wrapper">
<!-- 自動再生の場合
<video src="img/video.mp4" autoplay muted loop playsinline></video> -->

<!-- 自動再生じゃない方 -->
<video src="img/video.mp4" controls></video>
</div>
</section><!-- /#video -->

<section id="menu">
<h2 data-en="MENU">メニュー</h2>
</section><!-- /#menu -->

<section id="information">
<h2 data-en="INFORMATION">店舗情報</h2>
</section><!-- /#information -->

<section id="faq">
<h2 data-en="FAQ">よくあるご質問</h2>
</section><!-- /#faq -->

<ul class="bxslider2">
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
</ul>
</main>
<footer>
<p><small>&copy; 2020-2023 Fresco Italiano</small></p>
</footer>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js' integrity='sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==' crossorigin='anonymous'></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(function(){
//bxsliderその１
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,//trueがon
pager: false,//falseがoff
controls: false,
speed: 2000,
pause: 2000,
});

//news記事の呼び出し
$('#news-list').load('news.txt');


});
</script>
</body>
</html>

style.css

@charset "utf-8";

/* 変数の登録 */
:root{
--main_color:#3aa24a;
--sub_color:#ee5914;
--ja:'BIZ UDPGothic', sans-serif;
--en:'Pacifico', cursive;
}

/* header部分 */
header{
width: 100%;
height: 80px;
background-color: var(--main_color);
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 15px;
}
h1{
font-family: var(--en);
font-size: 38px;
}

/* ナビ部分 */
#g-nav{
display: none;
}

/* メインビジュアル部分 */
.main-visual{
width: 100%;
height: calc(100vh - 80px);/* デバイス毎の1画面分の高さ */
position: relative;
}
.main-visual li{
width: 100%;
height: calc(100vh - 80px);
}
.main-visual img{
object-fit: cover;
width: 100%;
height: 100%;
}
.tag-line{
position: absolute;
z-index: 10;
top: 200px;
left: 100px;
background-color: #df50638b;
font-size: 22px;
font-family: var(--ja);
padding: 10px;
}

/* コンセプト部分 */
.concept{
padding: 100px 10px;
text-align: center;
}
.concept>h2{
margin-bottom: 50px;
}
.concept>p{
margin-bottom: 100px;
}
.concept span{
font-family: var(--en);
font-size: 17px;
}
.concept-gallery{
width: 600px;
margin: 0 auto 300px;
position: relative;
}
.concept-gallery>p:nth-of-type(1){
box-shadow: 16px 16px 0 #c1dee1;
}
.concept-gallery>p:nth-of-type(2){
width: 60%;
position: absolute;
left: -120px;
bottom: -140px;
box-shadow: 16px 16px 0 #b6bf9a;
}
.concept-gallery>p:nth-of-type(3){
width: 34%;
position: absolute;
right: -60px;
bottom: -180px;
box-shadow: 16px 16px 0 #da9959;
}

section{
padding: 50px 10px 100px;
}
/* セクションの見出し */
section>h2{
text-align: center;
margin-bottom: 100px;
font-family: var(--ja);
color: var(--main_color);
font-size: 32px;
}
section>h2::before{
content: attr(data-en);
display: block;
font-size: 20px;
color: var(--sub_color);
font-family: var(--en);
}

/* お知らせ部分 */
#news-list{
max-width: 700px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#news-list>dt{
width: 25%;
padding: 30px 20px 10px;
font-weight: bold;
border-bottom: 2px solid var(--main_color);
}
#news-list>dd{
width: 75%;
padding: 30px 20px 10px;
border-bottom: 2px solid var(--main_color);
}
#news-list>dt:nth-of-type(n+4){
display: none;
}
#news-list>dd:nth-of-type(n+4){
display: none;
}