<div class="wrap" id="top">
  <header>
    <h1><a href="">Michelle</a></h1>
    <nav>
      <ul class="menu">
        <li><a href="#info">information</a></li>
        <li><a href="#main">novel</a></li>
        <li><a href="#image">image</a></li>
        <li><a href="bkm">bookmark</a></li>
      </ul>
    </nav>
  </header>
  <div class="intro">
    <h2>introduction</h2>
    <section>
      <h3 id="info">information</h3>
      <div class="inner">
        <div class="content">
          <dl class="update">
            <dt>2022.04.01</dt>
            <dd class="mark">ここに更新内容</dd>
            <dt>2022.03.27</dt>
            <dd>影</dd>
            <dt>2022.03.14</dt>
            <dd>カルメン</dd>
          </dl>
          PC.レスポンシブ対応のテンプレート。<br>
          Introduction3カラム、Maincontents2カラムのレイアウトです。</div>
        <hr>
        <div class="content"> 背景画像は<a href="https://pixabay.com/images/id-5202790/">Pixabay</a>様からお借りしています。<br>
          タイトル画像は<a href="https://www.freepik.com/free-vector/set-elegant-frames-with-leaves_13744724.htm">freepic</a>様からお借りしたものを加工しています。<br>
          リボンのアイコンは<a href="https://icooon-mono.com/">ICOON MONO</a>様からお借りしています。<br>
          写真のサンプルは全て<a href="https://unsplash.com/">Unsplash</a>様からお借りしています。
          <div class="box"><strong>strongタグ</strong> <br>
            <em>emタグ</em><br>
            <ul class="inline">
              <li><a href="source.html">source code</a></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <section>
      <h3>about me</h3>
      <div class="inner">
        <div class="content">
          <dl class="link_list">
            <dt>owner</dt>
            <dd>ハンドルネーム</dd>
            <dt>site name</dt>
            <dd>Michelle</dd>
            <dt>url</dt>
            <dd>https://xxx.jp</dd>
            <dt>banner</dt>
            <dd><img src="画像のURL" alt=""> </dd>
          </dl>
          <ul class="inline">
            <li><a href="#">memo</a></li>
            <li><a href="#">twitter</a></li>
            <li><a href="#">pixiv</a></li>
          </ul>
          <div class="prof"> <img src="画像のURL" alt=""/>
            <p>ここに自己紹介など。</p>
          </div>
        </div>
        <div class="content">
          <h4>Mail form</h4>
          <!--メールフォーム-->
          <form action="#" method="post">
            <input type="text" id="name" value="" placeholder="your name" class="mail">
            <input type="text" id="email" value="" placeholder="e-mail" class="mail">
            <select>
              <option selected disabled>select</option>
              <option value="項目1">項目1</option>
              <option value="項目2">項目2</option>
              <option value="項目3">項目3</option>
            </select>
            <textarea name="コメント" placeholder="sample" class="comment"></textarea>
            <input type="submit" value="send" class="btn">
          </form>
        </div>
      </div>
    </section>
    <section>
      <h3 id="bkm">bkm &amp; rank</h3>
      <div class="inner">
        <div class="content">
          <h4>bkm</h4>
          <ul class="list">
            <li><a href=""><img src="画像のURL" alt=""/></a></li>
            <li><a href=""><img src="画像のURL" alt=""/></a></li>
            <li><a href=""><img src="画像のURL" alt=""/></a></li>
          </ul>
          <h4>rank</h4>
          <ul class="inline">
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
            <li><a href="">リンク</a></li>
          </ul>
        </div>
      </div>
    </section>
  </div>
  <div class="main">
    <h2>main contents</h2>
    <section>
      <h3 id="main">novel</h3>
      <div class="inner">
        <div class="content">
          <h4>name change</h4>
          <form class="name_change">
            <input type="text" placeholder="名字">
            <input type="text"  placeholder="名前">
            <br>
            <input type="submit" value="登録">
            <input type="reset" value="削除">
          </form>
        </div>
        <div class="content">
          <h4>sample link</h4>
          <dl class="list_block">
            <dt>NAME</dt>
            <dd><a href="">リンク</a><span>ここにあらすじ</span> </dd>
            <dd><a href="">リンク</a> </dd>
            <dd><a href="">リンク</a> </dd>
          </dl>
          <dl class="list_block">
            <dt>NAME</dt>
            <dd><a href="">リンク</a> </dd>
            <dd><a href="">リンク</a> </dd>
            <dd><a href="">リンク</a> </dd>
          </dl>
          <dl class="list_inline">
            <dt>NAME</dt>
            <dd><a href="">テキストリンク</a><a href="">テキストリンク</a><a href="">テキストリンク</a> </dd>
            <dt>NAME</dt>
            <dd><a href="">テキストリンク</a><a href="">テキストリンク</a><a href="">テキストリンク</a> </dd>
          </dl>
        </div>
      </div>
    </section>
    <section>
      <h3 id="image">image</h3>
      <div class="inner">
        <div class="content">
          <h4>picture</h4>
          <ul class="modal_content">
            <li><a class="js-modal-open" href="" data-target="modal_01"><img src="画像のURL" alt="サンプル01"></a></li>
            <li><a class="js-modal-open" href="" data-target="modal_02"><img src="画像のURL" alt="サンプル02"></a></li>
            <li><a class="js-modal-open" href="" data-target="modal_03"><img src="画像のURL" alt="サンプル03"></a></li>
            <li><a class="js-modal-open" href="" data-target="modal_04"><img src="画像のURL" alt="サンプル04"></a></li>
            <li><a class="js-modal-open" href="" data-target="modal_05"><img src="画像のURL" alt="サンプル05"></a></li>
          </ul>
          <!--modal 画像表示　ここから-->
          <div id="modal_01" class="modal js-modal">
            <div class="modal_bg js-modal-close"></div>
            <div class="img_content"> <img src="画像のURL" alt="サンプル01"/> <span>ここにコメント</span></div>
          </div>
          <div id="modal_02" class="modal js-modal">
            <div class="modal_bg js-modal-close"></div>
            <div class="img_content"> <img src="画像のURL" alt="サンプル02"/><span>ここにコメント</span> </div>
          </div>
          <div id="modal_03" class="modal js-modal">
            <div class="modal_bg js-modal-close"></div>
            <div class="img_content"> <img src="画像のURL" alt="サンプル03"/><span>ここにコメント</span> </div>
          </div>
          <div id="modal_04" class="modal js-modal">
            <div class="modal_bg js-modal-close"></div>
            <div class="img_content"> <img src="画像のURL" alt="サンプル04"/><span>ここにコメント</span> </div>
          </div>
          <div id="modal_05" class="modal js-modal">
            <div class="modal_bg js-modal-close"></div>
            <div class="img_content"> <img src="画像のURL" alt="サンプル05"/> </div>
          </div>
          <!--modal 画像表示　ここまで--> 
        </div>
      </div>
    </section>
  </div>
</div>
<p id="top-btn" class="page-top"><a href="#top">top</a></p>
<ul class="footer">
  <li>Template by<a href="https://as.lclla.com">Luca</a></li>
</ul>
<script>
$(function () {
  $('a[href^="#"]').click(function () {
    var speed = 400;
    var href = $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({
      scrollTop: position
    }, speed, "swing");
    return false;
  });

  var topBtn = $('#top-btn');
  topBtn.hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 200) {
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }
  });
  $('.js-modal-open').each(function () {
    $(this).on('click', function () {
      var target = $(this).data('target');
      var modal = document.getElementById(target);
      $(modal).fadeIn('fast');
      return false;
    });
  });
  $('.js-modal-close').on('click', function () {
    $('.js-modal').fadeOut('fast');
    return false;
  });
});
</script>