Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
</head>

<header>
		<div>
			<h1>ロゴ</h1>
			<div id="nav_toggle">
				<div>
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>
			<div id="nav_reserve">
				<a class="btn" href="https://store.shopping.yahoo.co.jp/clans-store/hs0001.html">予約する</a>
			</div>
			<nav>
				<ul>
					<li><a href="#content00">はじめに</a></li>
					<li><a href="#content01">サンプル</a></li>
					<li><a href="#content02">商品概要</a></li>
					<li><a href="#content03">スペシャル</a></li>
					<li><a href="#content04">ショップ</a></li>
					<li><a href="#content07">シェア</a></li>
				</ul>
			</nav>
		</div>
</header>

<article id="contents">
 <section>
    <div id="content00" class="contents">
        <div id="content00_bg" class="background"></div>
        <div class="wrap">
          <div class="text-box00">
				<div class="text-area00 pc">
                <h2>あの沖縄のシーサーが堂々の登場!</h2>
				  <p>沖縄取材で躍動したシーサーたちの魅力をとことん詰め込んだ、まさにファン必携のアイテムが、ついに発売決定。</p>
					<p>これを買わずして、『シーサー』ファンは名乗れない。</p>
				</div>
					<div class="text-area00 sp">
						<h2>あの沖縄のシーサーが堂々の登場!</h2>
			<p>沖縄取材で躍動したシーサーたちの魅力をとことん詰め込んだ、まさにファン必携のアイテムが、ついに発売決定。</p>
			<p>これを買わずして、『シーサー』ファンは名乗れない。</p>
				</div>

            </div>
        </div>
    </div><!-- content00 -->
 </section>
 <section>
    <div id="content01" class="contents">
        <div id="content01_bg" class="background"></div>
        <div class="wrap">
            <div class="text-box">
				<div class="text-area">
                <h2 class="title">サンプル</h2>
				<p class="subtitle">-Sample-</p>
                <p class="comment">画像をクリックすると拡大してご覧いただけます</p>
				<div id="sample">
				<ul>
				<li><a href="images/sample_01.jpg" data-lightbox="sample" data-title="sample"><img src="images/sample_01.jpg"></a></li>
				<li><a href="images/sample_02.jpg" data-lightbox="sample" data-title="sample"><img src="images/sample_02.jpg"></a></li>
				<li><a href="images/sample_03.jpg" data-lightbox="sample" data-title="sample"><img src="images/sample_03.jpg"></a></li>
				<li><a href="images/sample_04.jpg" data-lightbox="sample" data-title="sample"><img src="images/sample_04.jpg"></a></li>
				</ul>
				</div>
				</div>
            </div>
        </div>
    </div><!-- content01 -->
 </section>
 <section>
    <div id="content02" class="contents">
        <div id="content02_bg" class="background"></div>
        <div class="wrap">
            <div class="text-box">
				<div class="text-area">
				<h2 class="title">商品概要</h2>
				<p class="subtitle">-Product Overview-</p>
				 <h3 class="pc">シーサーの像</h3>
				<h3 class="sp">シーサーの像</h3>
<p class="image"><img src="images/book_image.jpg"></p>
<p class="detail">サイズ:とにかくでかい<br>
重さ:とにかく思い<br>
販売価格:時価<br>
発売日:2019年11月29日(金)予定<br>
販売元:Tech Brook編集部<br>
注意書き:こちらはサンプルなので、架空の商品です</p>

<div class="summary">
<h4>特製化粧箱に入った豪華仕様</h4>
<ul>
<li>用語集、年表を収録したデータベース付き</li>
<li>シーサー 特別インタビュー映像を同梱</li>
<li>メインクリエイター陣による記念寄せ書きも収録</li>
</ul>
<p class="strong">さらに肩たたき券がもらえるプレゼントURL付き!</p>
</div>

<div class="special">
<h4>プレゼントURLについて</h4>
<ul>
<li>※URL入力の有効期限は、2021年11月29日(月)23時59分となります。</li>
<li>※URLひとつにつき、入力は1回限りとなります。一度使用したプレゼントURLは無効となります。</li>
</ul>
</div>

<div class="credit">
<p>(C)Tech Brook</p>
</div>

            </div>
        </div></div>
    </div><!-- content02 -->
 </section>
 <section>
    <div id="content03" class="contents">
        <div id="content03_bg" class="background"></div>
        <div class="wrap">
            <div class="text-box">
				<div class="text-area">
				<h2 class="title">スペシャル</h2>
				<p class="subtitle">-Special-</p>
                <h3 class="pc">限定「肩たたき券」が全員もらえる!</h3>
				<h3 class="sp">肩たたき券がもらえる!</h3>
<p class="image"><img src="images/sample_book.png"></p>
<p>この商品のためだけに用意された「肩たたき券」がもらえるプレゼントURL付き!</p>
				</div>
			</div>
        </div>
    </div><!-- content03 -->
 </section>
 <section>
    <div id="content04" class="contents">
        <div id="content04_bg" class="background"></div>
        <div class="wrap">
            <div class="text-box">
				<div class="text-area">
				<h2 class="title">ショップ</h2>
				<p class="subtitle">-Shop-</p>
				<p class="shoplogo"><a href="https://www.amazon.co.jp/"><img src="images/shop_logo.png"></a></p>
<p>※予定数量に達し次第、予約受付終了となります<br>
※クリックで予約ページへ移動します<br>
※予約開始時間、発送方法、発送日につきましては、予約ページをご確認ください</p>
            	</div>
        	</div>
		</div>
    </div><!-- content04 -->
  </section>
	<section>
    <div id="content05" class="contents">
        <div id="content05_bg" class="background"></div>
        <div class="wrap">
            <div class="text-box">
			  <div class="text-area">
				<h2 class="title">シーサーについて</h2>
				<p class="subtitle">-about-</p>
				  <p class="logo"><img src="images/shisa.jpg"></p>
					<h3>『シーサー』とは</h3>
				<p>シーサーは、沖縄県などでみられる伝説の獣像。建物の門や屋根、村落の高台などに据え付けられる。家や人、村に災厄をもたらす悪霊を追い払う魔除けの意味を持ち、屋根の上に設置されることが多いとされる</p>
				  <a href="https://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%BC%E3%82%B5%E3%83%BC" target="_blank" class="shisa">wikipediaより抜粋</a>
            	</div>
        	</div>
		</div>
    </div><!-- content04 -->
  </section>


  <section>
    <div id="content07" class="contents">
        <div id="content07_bg" class="background"></div>
        <div class="wrap">
            <div class="text-box">
				<div class="text-area">
				<h2 class="title">シェア</h2>
				<p class="subtitle">-Share-</p>
					<a href="http://twitter.com/" class="tw_btn">Twitterでシェアする</a>
					<a href="https://www.facebook.com/" class="fa_btn">Facebookでシェアする</a>
            </div>
        </div>
    </div><!-- content06 -->
  </section>


</article>

<script>
$(function(){
    $('.contents').each(function(i, elem){
        var contentsPOS = $(elem).offset().top;
        $(window).on('load scroll resize', function(){
            var winHeight = $(window).height();
            var scrollTop = $(window).scrollTop();
            var showClass = 'show';
            var timing = 100;
            if (scrollTop >= contentsPOS - winHeight + timing){
              $(elem).addClass(showClass);
            } else {
              $(elem).removeClass(showClass);
            }
        });
    });
});
</script>

              
            
!

CSS

              
                @charset "UTF-8";
/* CSS Document */
body,h1,h2,p,ul,li{margin:0;padding:0;}
h1{color: #fff;}
li{list-style: none;}
a{text-decoration: none;}
body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
h2,h3 { font-family: "Sawarabi Mincho"; }
a{color: #fff;}


/* ボタン類 */
.btn{
	display: block;
	width:100%;
	border: 1px solid #4169e1;
	background: #4169e1;
	color: #111;
	font-weight: bold;
}
.btn:hover{
	background: #FF6732;
	color: #fff;
	transition: 0.4s;
}

#nav_reserve{
	position: absolute;
	top:30px;
	right:30px;
	z-index: 99;
	width:120px;
	line-height: 40px;
	text-align: center;
}
.toshop{
	width:320px;
	text-align: center;
	line-height: 80px;
	margin:30px auto 0;
	font-size:1.2em;
}


/* header */
header{
	margin:0;
	width:100%;
	position: fixed;
	z-index: 99;
	background: #00008b;
}
header h1{position: absolute; left:0; right:0; margin:0 auto; height:80px; width:154px; padding:10px 0;}
header h1 img{width:100%;}


/* nav */
nav{
	display: none;
	position: absolute;
	top:98px;
	width: 100%;
	background: #222;
	left: 0;
}
header nav ul{
	display: block;
	margin: 0 auto;
	width: 90%;
}
header nav ul li{
	margin: 30px auto 0;
	padding:0 0 30px 0;
	text-align: center;
	border-bottom: 1px solid #444;
}
header nav ul li:last-child{
	border: none;
}
header nav ul li a{
	display: block;
}
header nav ul li a:hover{
	text-decoration: underline;
}

/* 開閉ボタン */
#nav_toggle{
	display: block;
	width: 40px;
	height: 40px;
	position: relative;
	top: 4px;
	z-index: 100;
	padding:30px;
}
#nav_toggle div {
	position: relative;
}
#nav_toggle span{
	display: block;
	height: 3px;
	background: #fff;
	position:absolute;
	width: 100%;
	left: 0;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}
#nav_toggle span:nth-child(1){
	top:0px;
}
#nav_toggle span:nth-child(2){
	top:12px;
}
#nav_toggle span:nth-child(3){
	top:24px;
}

/* 開閉ボタンopen時 */
.open #nav_toggle span:nth-child(1) {
	top: 12px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);
}
.open #nav_toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}
.open #nav_toggle span:nth-child(3) {
	top: 12px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	transform: rotate(-135deg);
}


/* 背景 */
.background{
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    position: fixed;
    background-position: center center;
    opacity: 0;
-webkit-background-size: cover;
        background-size: cover;
-webkit-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
}
.show .background { opacity: 1;}
.contents .wrap {
    padding: 30vh 2vh 30vh;
    position: relative;
    z-index: 2;
}
/* 背景画像 */
#content00_bg {background-image: url(https://dl.dropbox.com/s/fa6tmv5ats4qfer/bg_00.jpg?dl=0);}
#content01_bg {background-image: url(https://dl.dropbox.com/s/4vgezcrgvkp4424/bg_01.jpg?dl=0);}
#content02_bg {background-image: url(https://dl.dropbox.com/s/lgc59zmlss4vrbw/bg_02.jpg?dl=0);}
#content03_bg {background-image: url(https://dl.dropbox.com/s/t02qz3sfx2vs0d4/bg_03.jpg?dl=0);}
#content04_bg {background-image: url(https://dl.dropbox.com/s/pj1vvueuwp3tmbx/bg_04.jpg?dl=0);}
#content05_bg {background-image: url(https://dl.dropbox.com/s/0s3z1u785bmj2ba/bg_05.jpg?dl=0);}
#content06_bg {background-image: url(../images/bg_02.jpg);}
#content07_bg {background-image: url(../images/bg_05.jpg);}
#content00 .wrap,#content01 .wrap,#content02 .wrap,#content03 .wrap,#content04 .wrap,#content05 .wrap,#content06 .wrap, #content07 .wrap { background-color: rgba(0,0,0,0.4);}



/* xx-コンテンツ共通 */
.text-box {
    max-width: 600px;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
	margin:0 auto;
	border-left:1px solid #bebb77 ;
	border-right:1px solid #c79810;
}
.text-box:before,
.text-box:after {
	content:"";
	display:block;
	height:1px;
	width:100%;
	background:-webkit-gradient(linear, left top, right bottom, from(#bebb77), to(#c79810));
	background:-moz-linear-gradient(left, #bebb77, #c79810);
	background:linear-gradient(left, #bebb77, #c79810);
}
.text-area{padding:50px 30px;}
.text-area h2{text-align: center; font-size:22px;}
.text-area .subtitle{text-align: center; margin-bottom:30px; font-size:16px; color: #eac15d;}
.text-area h3{font-size:26px; margin-bottom:30px; text-align: center;}
.text-area p{font-size:16px; line-height: 1.5em;}
.text-area .comment{text-align: center; margin-bottom:30px;}
.text-area h4{margin:0 0 10px 0; color: #eac15d;}
.text-area .image{text-align: center; margin-bottom:30px;}


/* 00-イントロ */
.text-box00 {
    max-width: 840px;
    color: #fff;
	margin:0 auto;
}
.text-box00 img{width:100%;}
.text-box00 h2{
	margin-bottom:20px;
  font-size: 80px;
}
.text-box00 p{
	margin-bottom:20px;
  font-size: 30px;
}


/* 01-サンプル */
#content01 ul{
	display: -webkit-flex;
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	justify-content: space-around;
}
#content01 li{width:49%;}
#content01 li img{width:100%;}


/* 02-商品概要 */
.special{
	font-size:14px;
	border:1px solid #ccc;
	background: #111;
	padding:20px;
	margin-top:30px;
}
.detail{margin-bottom:30px;}
.special li{line-height: 1.8em;}
.summary li{margin-bottom: 10px;}
.summary li:before{
	content: '◆';
	color:#eac15d;
	font-size: 10px;
	margin-right:6px;
	vertical-align: middle;
	}
.image img{width:80%;}
.period{margin-top:30px;}
.period h4{margin-bottom:20px;}
.period p{margin:0 0 30px 10px; text-align: center;}
.period span{font-size:1.5em; padding-bottom:5px; border-bottom:1px solid #eac15d;}
.summary .strong{
	color:#FF6732;
	font-weight: bold;
	font-size: 1.3em;
	margin-top:20px;
}
.credit p{font-size: 0.9em; font-weight: normal; margin-top:30px; text-align: center;}


/* 04-ショップ */
#content04 .shoplogo{width:70%; margin:0 auto;}
#content04 .shoplogo img{width:100%; margin-bottom:30px;}


/* 05-シーサー紹介 */
#content05 .logo{text-align: center;}
#content05 p{margin-bottom:30px;}
.shisa{
	width:380px;
	height:60px;
	border:1px solid #fff;
	display: block;
	margin:0 auto;
	text-align: center;
	line-height: 60px;
}
.shisa{background: #3a589e; margin-bottom:30px;}
.shisa:hover{
	background: red;
	color: #fff;
	transition: 0.4s;
}


/* 07-シェア */
#content07 .tw_btn,
#content07 .fa_btn{
	width:320px;
	height:60px;
	border:1px solid #fff;
	display: block;
	margin:0 auto;
	text-align: center;
	line-height: 60px;
}
#content07 .tw_btn{background: #1da1f2; margin-bottom:30px;}
#content07 .fa_btn{background: #3a589e;}
#content07 .tw_btn:hover,
#content07 .fa_btn:hover{
	background: #FF6732;
	color: #fff;
	transition: 0.4s;
}
              
            
!

JS

              
                


	$(function(){
		<!-- ナビバーを広げる動き -->
		$('#nav_toggle').click(function(){
					$("header").toggleClass('open');
			$("nav").slideToggle(500);
				});
	<!-- ナビバーを閉める動き -->
	$('nav a').on('click', function(){
	        if (window.innerWidth <= 2400) {
	            $('#nav_toggle').click();
	        }
	    });
		});

	$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;
    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;
  });
});



              
            
!
999px

Console