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"> <link rel="stylesheet" href="css/jquery.bxslider.css"> </head> <body> <header> <h1>Cafe de FELICA</h1> </header> <div class="main-visual"> <ul class="bxslider"> <li><img src="img/header-01.jpg" alt=""></li> <li><img src="img/header-02.jpg" alt=""></li> <li><img src="img/header-03.jpg" alt=""></li> </ul> </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 class="info-wrapper"> <div class="shop-info"> <dl> <dt>営業時間</dt> <dd>09:00~20:00</dd> <dt>住所</dt> <dd>豊島区南池袋公園</dd> <dt>電話番号</dt> <dd><a href="tel:0300000000">03-0000-0000</a></dd> <dt>座席数</dt> <dd>100席</dd> </dl> </div> <div class="map-wrapper"> <iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.945289249687!2d139.71212651465234!3d35.727564035038164!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1632788705152!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> </div> <h2>カレンダー</h2> <div class="calendar"> </div> </div><!-- /.contents --> <div class="contents" id="form"> <h2>Form</h2> <div class="form-wrapper"> </div> </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 src="js/jquery.bxslider.js"></script> <script> $(function(){ //#btnをon.clickしたら $('#btn').on('click',function(){ $(this).toggleClass('is-active'); //#g-navをfadeToggle $('#g-nav').fadeToggle(); }); //#g-nav aをon.clickしたら $('#g-nav a').on('click',function(){ //#g-navをfadeOut $('#g-nav').fadeOut(); //#btnについてる「is-active」をremoveClass $('#btn').removeClass('is-active'); }); //bxslider用の記述 $('.bxslider').bxSlider({ mode: 'fade', auto: true,//スライドの自動再生をon touchEnabled: false,//スマホ時の縦スクロールの挙動 controls: false,//左右のボタンをoff pager: false,//画像下の黒丸をoff speed: 2000 }); }); </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 li{ width: 100%; height: 100vh; } .main-visual img{ object-fit: cover; width: 100%; height: 100%; } h1{ position: absolute; left: 50px; top: 50px; z-index:1000; font-size: 50px; background-color: rgba(255, 248, 220, 0.5); padding: 20px 30px; } #btn{ position: fixed; right: 0; top: 0; background-color: #FFF; z-index: 200; } #g-nav{ width: 100%; height: 100vh; padding-top: 100px; background-color:#bd1111; position: fixed; top: 0; left: 0; display: none; text-align: center; z-index: 100; } #g-nav li{ margin-bottom: 20px; } #g-nav a{ color: #FFF; font-size: 24px; padding: 20px; } #g-nav a:hover{ text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 4px; } .contents{ } 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%; } /* googleMap部分 */ .map-wrapper{ width: 44%; height: 400px; } .g-map{ width: 100%; height: 100%; filter: grayscale(100%); } /* shop-info部分 */ .info-wrapper{ display: flex; justify-content: space-between; max-width: 960px; margin: 50px auto; } .shop-info{ width: 44%; } .shop-info>dl{ display: flex; flex-wrap: wrap; } .shop-info dt{ width: 30%; margin-bottom: 20px; border-bottom: 1px solid #c51c1c; padding-bottom: 10px; } .shop-info dd{ width: 70%; margin-bottom: 20px; border-bottom: 1px solid #c51c1c; padding-bottom: 10px; } .shop-info dd>a{ color: #000; } /* カレンダー部分 */ .calendar{ max-width: 960px; height: 600px; margin: 50px auto; } .g-calendar{ width: 100%; height: 100%; } /* フォーム部分 */ .form-wrapper{ max-width: 640px; height: 1200px; margin: 50px auto; } .g-form{ width: 100%; height: 100%; }
