DropOut/public/index.html

171 lines
7.2 KiB
HTML

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!--
################################################################
「ハロー、ミライアカリだよっ!ピロリン」
「デベロッパーツール開くなんて、悪い子ちゃん❤️」
################################################################
Designed by yuki540.
-->
<title>DropOut</title>
<meta name="description" content="「今日も明日も、ぐーたら生活。」">
<meta name="keywords" content="yuki540,satella.io,yuki540.com,DropOut">
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1">
<meta property="og:url" content="https://yuki540.com">
<meta property="og:image" content="https://yuki540.com/images/ogp.png">
<meta property="og:type" content="website">
<meta property="og:title" content="DropOut">
<meta property="og:site_name" content="yuki540.com">
<meta property="og:description" content="「今日も明日も、ぐーたら生活。」">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@eriri_jp" />
<meta name="twitter:title" content="DropOut" />
<meta name="twitter:description" content="「今日も明日も、ぐーたら生活。」" />
<meta name="twitter:image" content="https://yuki540.com/images/ogp.png" />
<link rel="shortcut icon" href="https://yuki540.com/images/profile/yuki540.png" />
<link rel="apple-touch-icon" href="https://yuki540.com/images/profile/yuki540.png" />
<link rel="stylesheet" href="./stylesheets/font-awesome-4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="./stylesheets/font.css" />
<link rel="stylesheet" href="./stylesheets/style.css" />
</head>
<body>
<main id="root">
<!--********************************** load view ***************************************-->
<section class="load-view">
<div class="load-view__frame">
<div class="load-view__frame__squares">
<div></div><div></div><div></div><div></div>
</div>
<div class="load-view__frame__lines">
<div></div><div></div><div></div><div></div>
</div>
</div>
<div class="load-view__body">
<div class="load-view__body__bg"></div>
<div class="load-view__body__panel">
<section class="load-view__body__panel__icon load-view__body__panel__icon_type_1">
<div class="box">
<div class="frame"></div>
<div class="frame"></div>
</div>
<div class="icon"></div>
</section>
<section class="load-view__body__panel__icon load-view__body__panel__icon_type_2">
<div class="box">
<div class="frame"></div>
<div class="frame"></div>
</div>
<div class="icon"></div>
</section>
<section class="load-view__body__panel__icon load-view__body__panel__icon_type_3">
<div class="box">
<div class="frame"></div>
<div class="frame"></div>
</div>
<div class="icon"></div>
</section>
<section class="load-view__body__panel__icon load-view__body__panel__icon_type_4">
<div class="box">
<div class="frame"></div>
<div class="frame"></div>
</div>
<div class="icon"></div>
</section>
</div>
<div class="load-view__body__poster">
<section class="poster">
<div class="illust"></div>
<div class="handle"></div>
<div class="ball"></div>
</section>
<section class="poster">
<div class="illust"></div>
<div class="ball"></div>
</section>
<section class="poster">
<div class="illust"></div>
<div class="ball"></div>
</section>
<section class="poster">
<div class="illust"></div>
<div class="ball"></div>
</section>
<div class="paint-ball-box">
<div class="paint-ball"><div></div></div>
</div>
</div>
<div class="load-view__body__info">
<section class="allow">
<img class="sd sd-1" src="./images/load-view/sd/1.png" alt="SDキャラ" />
<img class="text text-1" src="./images/load-view/text/1.png" alt="テキスト" />
<div class="line"></div>
<div class="paint-ball"><div></div></div>
</section>
<section class="allow">
<img class="sd sd-2" src="./images/load-view/sd/2.png" alt="SDキャラ" />
<img class="text text-2" src="./images/load-view/text/2.png" alt="テキスト" />
<div class="line"></div>
<div class="paint-ball"><div></div></div>
</section>
<section class="allow">
<img class="sd sd-1" src="./images/load-view/sd/3.png" alt="SDキャラ" />
<img class="text text-1" src="./images/load-view/text/3.png" alt="テキスト" />
<div class="line"></div>
<div class="paint-ball"><div></div></div>
</section>
<section class="allow">
<img class="sd sd-2" src="./images/load-view/sd/4.png" alt="SDキャラ" />
<img class="text text-2" src="./images/load-view/text/4.png" alt="テキスト" />
<div class="line"></div>
<div class="paint-ball"><div></div></div>
</section>
</div>
<div class="load-view__body__close">
<div class="curtain"></div>
<div class="curtain"></div>
<h3 class="message">Let's enjoy CSS Animation.</h3>
</div>
</div>
</section>
<!--********************************** gab animation ***************************************-->
<section class="gab-animation" data-state="start">
<div class="gab-animation__bg">
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
</div>
<div class="gab-animation__frame">
<section class="area"></section>
<section class="area"></section>
</div>
<div class="gab-animation__illust">
<div class="illust"></div>
<div class="paint-balls"><div></div><div></div></div>
</div>
<div class="gab-animation__effects">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
<div class="gab-animation__gauge">
<h4 class="name">Gabriel</h4>
<div class="gauge"></div>
</div>
</section>
</main>
<script type="text/javascript" src="./scripts/app.min.js"></script>
</body>
</html>