<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tokyo Night view</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
    <link rel="stylesheet" type="text/css" href="https://sat0512.sakura.ne.jp/tnv/BeerSlider.css">
</head>
<body>
    <header>
        <div>
            <img src="https://sat0512.sakura.ne.jp/tnv/images/tnb.png" alt="tokyo night view">
        </div>
    </header>
    <!-- スライダー -->
    <section class="change">
      <!--右の画像 -->
        <div id="slider" class="beer-slider" data-beer-label="before">
            <img src="https://sat0512.sakura.ne.jp/tnv/images/hills02.jpg" alt="">
            <!--左の画像 -->
            <div class="beer-reveal" data-beer-label="after">
                <img src="https://sat0512.sakura.ne.jp/tnv/images/hills01.jpg" alt="">
            </div>
        </div>
    </section>
    <footer class="copy">
        <p> Copyright &copy;2018 <a href="https://sat0512.com/"> Satoshi Nakano</a></p>
    </footer>
     <!--ここでjs読み込ませる -->
    <script src="https://sat0512.sakura.ne.jp/tnv/BeerSlider.js"></script>
</body>
</html>
@charset "UTF-8";
body {
  margin: 0;
  padding: 0;
  align-items: center;
  background: #001e43;
}

header {
  margin: 0 auto;
  text-align: center;
  background-color: #000222;
}
/* スライダーレイアウト */
.change {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* スマートフォン用レイアウト */

@media screen and (min-width: 360px) {
  main .instaBox {
    width: calc(100%);
    margin: 0 auto;
  }
}

.copy {
  text-align: center;
  color: #fffeee;
  position: fixd;
  bottom: 5px;
}

.copy a {
  color: #fffeee;
  text-decoration: none;
}
 new BeerSlider(document.getElementById('slider'));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.