451 lines
19 KiB
HTML
451 lines
19 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">
|
||
<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 class="calling__live-view">
|
||
<section class="view">
|
||
<div class="char"></div>
|
||
<div class="name"><span>結衣</span></div>
|
||
</section>
|
||
<section class="view">
|
||
<div class="char"></div>
|
||
<div class="name"><span>英梨々</span></div>
|
||
</section>
|
||
<section class="view">
|
||
<div class="char"></div>
|
||
<div class="name"><span>ガブリール</span></div>
|
||
</section>
|
||
</section>
|
||
<section class="calling__say">
|
||
<div class="line"></div>
|
||
<div class="line"></div>
|
||
<div class="line"></div>
|
||
<div class="line"></div>
|
||
<div class="img"></div>
|
||
</section>
|
||
<section class="calling__end">
|
||
<div></div><div></div><div></div><div></div><div></div>
|
||
<div></div><div></div><div></div><div></div><div></div>
|
||
</section>
|
||
</section>
|
||
<!--********************************** end-animation ***************************************-->
|
||
<section class="end-animation">
|
||
<section class="end-animation__end-roll">
|
||
<div class="text-balls">
|
||
<div class="text-ball">
|
||
<div class="inner">
|
||
<div class="bg">
|
||
<div></div><div></div><div></div><div></div><div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-ball">
|
||
<div class="inner">
|
||
<div class="bg">
|
||
<div></div><div></div><div></div><div></div><div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-ball">
|
||
<div class="inner">
|
||
<div class="bg">
|
||
<div></div><div></div><div></div><div></div><div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="paints"><div></div><div></div><div></div><div></div></div>
|
||
<div class="window">
|
||
<img src="./images/end-animation/end.png" alt="END" />
|
||
</div>
|
||
</section>
|
||
</section>
|
||
<!--********************************** top-page ***************************************-->
|
||
<section class="top-page" data-state="start">
|
||
<section class="top-page__ring">
|
||
<div class="wrap">
|
||
<div class="inner">
|
||
<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><div></div><div></div>
|
||
<div></div><div></div><div></div><div></div><div></div><div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="top-page__main-illust"></section>
|
||
<section class="top-page__frame">
|
||
<section><div></div><div></div><div></div></section>
|
||
<section><div></div><div></div><div></div></section>
|
||
<section><div></div><div></div><div></div></section>
|
||
<section><div></div><div></div><div></div></section>
|
||
</section>
|
||
<section class="top-page__logo">
|
||
<img src="./images/top-page/logo.png" alt="ロゴ" />
|
||
</section>
|
||
<section class="top-page__global-nav">
|
||
<nav class="nav-box">
|
||
<section>
|
||
<a data-href="profile-page" data-color="pink" href="#">私について</a>
|
||
<a data-href="memories-page" data-color="light-pink" href="#">思い出</a>
|
||
</section>
|
||
<section>
|
||
<a data-href="history-page" data-color="light-purple" href="#">このサイトの歴史</a>
|
||
<a data-href="product-page" data-color="purple" href="#">作ったもの</a>
|
||
</section>
|
||
</nav>
|
||
<div class="message"><h3>ようこそ、魔法少女サイトへ</h3></div>
|
||
</section>
|
||
<section class="top-page__sns">
|
||
<a title="Twitter" href="https://twitter.com/eriri_jp" target="_blank">
|
||
<i class="fab fa-twitter"></i>
|
||
</a>
|
||
<a title="GitHub" href="https://github.com/yuki540net" target="_blank">
|
||
<i class="fab fa-github"></i>
|
||
</a>
|
||
<a title="はてなブログ" href="https://yuki540.hatenablog.jp/archive" target="_blank">
|
||
<i class="fas fa-edit"></i>
|
||
</a>
|
||
</section>
|
||
<section class="top-page__share-btn">
|
||
<a target="_blank" href="http://twitter.com/intent/tweet?url=https://magical-girl.site&text=DropOut - 魔法少女にはなれなかった - / @eriri_jp">
|
||
<i class="fab fa-twitter"></i>でシェアする
|
||
</a>
|
||
</section>
|
||
</section>
|
||
<!--********************************** page-box ***************************************-->
|
||
<section class="page-box">
|
||
<section class="page-box__bg"><div></div><div></div></section>
|
||
<a class="page-box__close-btn" href="#">
|
||
<section></section>
|
||
<section><div></div></section>
|
||
</a>
|
||
<article class="page-box__content">
|
||
|
||
<!--**** profile ****-->
|
||
<section class="profile-page" style="display: none">
|
||
<section class="page-title">
|
||
<div></div><div></div><div></div><div></div>
|
||
<h2>私について</h2>
|
||
</section>
|
||
<section class="profile-page__body">
|
||
<div class="icon"><div></div><div></div><div></div><div></div></div>
|
||
<h3 class="name">yuki540</h3>
|
||
<div class="info">
|
||
<div class="info-li">
|
||
<span>Location</span><span>：</span><span>Wakayama, Japan</span>
|
||
</div>
|
||
<div class="info-li">
|
||
<span>Birthday</span><span>：</span><span>1996/11/09</span>
|
||
</div>
|
||
<div class="info-li">
|
||
<span>Job</span><span>：</span><span>ニート（通う理由がなく、専門学校退学した）</span>
|
||
</div>
|
||
<div class="info-li">
|
||
<span>Love</span><span>：</span><span>アニメ, 由比ヶ浜結衣, ミライアカリ, ココロヤミ</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
|
||
<!--**** history ****-->
|
||
<section class="history-page" style="display: none">
|
||
<section class="page-title">
|
||
<div></div><div></div><div></div><div></div>
|
||
<h2>このサイトの歴史</h2>
|
||
</section>
|
||
</section>
|
||
|
||
<!--**** product ****-->
|
||
<section class="product-page" style="display: none">
|
||
<section class="page-title">
|
||
<div></div><div></div><div></div><div></div>
|
||
<h2>作ったもの</h2>
|
||
</section>
|
||
</section>
|
||
|
||
<!--**** memories ****-->
|
||
<section class="memories-page" style="display: none">
|
||
<section class="page-title">
|
||
<div></div><div></div><div></div><div></div>
|
||
<h2>思い出</h2>
|
||
</section>
|
||
</section>
|
||
</article>
|
||
</section>
|
||
</main>
|
||
<script type="text/javascript" src="./scripts/app.min.js"></script>
|
||
</body>
|
||
</html>
|