<!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>AR-</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<header>
<input type="checkbox" id="ham-menu">
<label for="ham-menu">
<span class="buns">
<span class="patty"></span>
</span>
</label>
<label for="ham_menu" class="light-dark"></label>
<img src="img/mashiro.png" alt="ロゴ" class="rogo_img">
<nav>
<ul>
<li class="menu"><a href="#home">ホーム</a></li>
<li class="menu"><a href="#about">使い方</a></li>
<li class="menu"><a href="#stamp">スタンプ</a></li>
<li class="menu"><a href="#information">施設情報</a></li>
</ul>
</nav>
<button class="start_btn_circle">
<img src="img/AR.png" alt=""> <br>
スタンプラリー <br>スタート
</button>
</header>
<main>
<div class="main_visual">
<img src="img/img1.jpg" alt="img">
<div class="title">
</p>
<p> ス タ ン プ ラ リ ー <br>
<h1>AR Stamp Rally</h1>
<!-- <span class="t_text1">AR Stamp Rally</span> <br> -->
<p><span class="t_text2">in松ヶ丘開墾場</span> </p>
</div>
</div>
<div class="content">
<div class="start_guide">
松ヶ丘開墾場の至るところに<br>
キャタクターである「ましろちゃん」がARで登場します。 <br>
ましろちゃんを探してスタンプを貯めよう。
</div>
<div class="btn">
<button class="start_btn">
<img src="img/AR.png" alt=""> <br>
スタンプラリー <br>スタート
</button>
<button class="stamp_btn">スタンプ帳</button>
<button class="map_btn">マップ</button>
</div>
</div>
<section class="content2">
<img src="img/sumafo.jpg" alt="">
<div style="color: black;">
<pre>
aaaaaaaaaaaaaaaaaaa
aaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaa
aaaaaaaaaaaaaaaa
</pre>
</div>
</section>
<section class="content3">
<div style="color: #000;">
<pre>
aaaaaaaaaaaaaaaaaaa
aaaaa
aaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaa
aaaa
aaaaaaaaaaaaaaaaaa
</pre>
</div>
<img src="img/Paper map-amico.svg" alt="">
</section>
</main>
<footer
style="background: rgba(100, 100, 100, .8);
height: 100px;"
>
</footer>
</body>
</html>
Satou Fumiya