282 lines
12 KiB
HTML
282 lines
12 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="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
|
|
<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">
|
|
<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>
|
|
<div class="gab-animation__back-overray">
|
|
<section><div></div><div></div></section>
|
|
<section><div></div><div></div></section>
|
|
<section><div></div><div></div></section>
|
|
</div>
|
|
<div class="gab-animation__message"></div>
|
|
<div class="gab-animation__front-overray">
|
|
<section><div></div><div></div></section>
|
|
</div>
|
|
<div class="gab-animation__palette">
|
|
<section class="paint-box">
|
|
<section class="paint">
|
|
<div></div><div></div><div></div><div></div>
|
|
<section class="char char-1"></section>
|
|
</section>
|
|
<section class="paint">
|
|
<div></div><div></div><div></div><div></div>
|
|
<section class="char char-2"></section>
|
|
</section>
|
|
<section class="paint">
|
|
<div></div><div></div><div></div><div></div>
|
|
<section class="char char-3"></section>
|
|
</section>
|
|
<section class="paint">
|
|
<div></div><div></div><div></div><div></div>
|
|
<section class="char char-4"></section>
|
|
</section>
|
|
<section class="paint">
|
|
<div></div><div></div><div></div><div></div>
|
|
<section class="char char-5"></section>
|
|
</section>
|
|
</section>
|
|
<section class="frame frame-top">
|
|
<div></div><div></div><div></div><div></div><div></div>
|
|
</section>
|
|
<section class="frame frame-bottom">
|
|
<div></div><div></div><div></div><div></div><div></div>
|
|
</section>
|
|
<section class="clock"><div></div></section>
|
|
</div>
|
|
<div class="gab-animation__camera">
|
|
<section class="layer layer-1"></section>
|
|
<section class="layer layer-2"></section>
|
|
<section class="layer layer-3"></section>
|
|
<section class="layer layer-4"></section>
|
|
</div>
|
|
<div class="gab-animation__close">
|
|
<section class="effect effect-1">
|
|
<div></div><div></div><div></div><div></div>
|
|
<div></div><div></div><div></div><div></div>
|
|
<div></div><div></div><div></div><div></div>
|
|
</section>
|
|
<section class="effect effect-2">
|
|
<div></div><div></div><div></div><div></div>
|
|
<div></div><div></div><div></div><div></div>
|
|
<div></div><div></div><div></div><div></div>
|
|
</section>
|
|
<section class="effect effect-3">
|
|
<div></div><div></div><div></div><div></div>
|
|
<div></div><div></div><div></div><div></div>
|
|
<div></div><div></div><div></div><div></div>
|
|
</section>
|
|
<section class="ball ball-1"></section>
|
|
<section class="ball ball-2"></section>
|
|
<section class="ball ball-3"></section>
|
|
<section class="end-block">
|
|
<div class="paint-ball"></div>
|
|
<div class="paint-ball"></div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
<!--********************************** calling ***************************************-->
|
|
<section class="calling" data-state="start">
|
|
<section class="calling__bg">
|
|
<div></div><div></div><div></div><div></div>
|
|
<div></div><div></div><div></div><div></div>
|
|
<div></div><div></div><div></div><div></div>
|
|
<div></div><div></div><div></div><div></div>
|
|
</section>
|
|
<section class="calling__icons">
|
|
<section class="icon-box">
|
|
<div class="icon"></div>
|
|
<h4 class="name"><span>結衣</span></h4>
|
|
</section>
|
|
<section class="icon-box">
|
|
<div class="icon"></div>
|
|
<h4 class="name"><span>ガヴリール</span></h4>
|
|
</section>
|
|
<section class="icon-box">
|
|
<div class="icon"></div>
|
|
<h4 class="name"><span>英梨々</span></h4>
|
|
</section>
|
|
</section>
|
|
<section class="calling__controls-btn">
|
|
<div class="btn btn-1">
|
|
<div></div><div></div><div></div><div></div>
|
|
<i class="fas fa-phone"></i>
|
|
</div>
|
|
<div class="btn btn-2">
|
|
<div></div><div></div><div></div><div></div>
|
|
<i class="fas fa-phone"></i>
|
|
</div>
|
|
<div class="touch"></div>
|
|
</section>
|
|
<section class="calling__controls-bar">
|
|
<div class="inner">
|
|
<div class="btn"><i class="fas fa-video"></i></div>
|
|
<div class="btn"><i class="fas fa-phone"></i></div>
|
|
<div class="btn"><i class="fas fa-microphone"></i></div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
<script type="text/javascript" src="./scripts/app.min.js"></script>
|
|
</body>
|
|
</html>
|