Template Image
H1 Back Animation
Header Ul Image 1
Header Ul Image 2
head
<![CDATA[<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Amatic+SC:wght@400;700&display=swap">
<style>
CSS
</style>]]>
CSS
<![CDATA[/*
Template T-09 From Dusk Till Die
By Jumble Fun
Site URL https://alicex.jp/kenz/
*/
* {
font-size:13px;
font-family:"Montserrat",Sans-Serif;
box-sizing:border-box;
margin:0;
padding:0;
}
body {
background:black;
scroll-behavior:smooth;
}
a {
color:silver;
text-decoration:none;
}
header h1 {
background-color:gray;
background-image:
url('../h1-back.animation.gif');
background-repeat:no-repeat;
background-position:50% 50%;
background-size:cover;
background-blend-mode:luminosity;
width:140px;
height:140px;
text-align:center;
margin:30px auto 200px;
}
header h1 i {
font-size:30px;
font-family:"Amatic SC";
color:silver;
transform:translateY(140px);
display:block;
}
header h1 i:nth-child(odd) {
font-size:18px;
}
header h1 i:nth-child(even) {
color:red;
text-shadow:1px 1px 0 darkred;
}
header ul {
width:100%;
padding:10px;
display:flex;
justify-content:center;
}
header ul li {
width:60px;
text-align:center;
}
header ul li a {
font-family:"Amatic SC";
font-size:21px;
color:silver;
}
header ul li a img {
border-radius:50%;
border:solid 1px gray;
width:34px;
height:34px;
}
nav {
background-color:#111;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:block;
overflow-y:scroll;
}
nav:not(:target) {
z-index:-1;
opacity:0;
transform:translate(0,-10px);
transition:0.4s;
}
nav:target {
z-index:5;
opacity:1;
transform:translate(0,0);
transition:0.4s;
}
nav h2 {
font-size:18px;
font-weight:600;
color:silver;
background-color:red;
width:100%;
height:100px;
margin-bottom:20px;
padding:10px 20px;
}
nav h2 i {
color:white;
margin-top:15px;
display:block;
}
a.back {
position:absolute;
top:20px;
right:10px;
width:26px;
height:26px;
line-height:26px;
text-align:center;
display:block;
}
a.back i {
font-size:28px;
color:silver;
}
nav h3 {
font-size:14px;
font-weight:600;
color:black;
background-color:silver;
box-shadow:3px 3px 0 0 gray;
margin:0 10px;
padding:5px 20px;
display:inline-block;
}
nav h3:first-letter {
font-size:18px;
color:red;
}
nav div {
color:silver;
line-height:180%;
margin-bottom:20px;
padding:10px 20px;
white-space:pre-line;
}]]>
body
<![CDATA[<div class="contain">
<header>
<h1><i>From</i><i>Dusk</i><i>Till</i><i>Die</i></h1>
<ul>
<li><a href="#about-nav"><img src="../ul.image-1.jpeg"><br>About</a></li>
<li><a href="#rule-nav"><img src="../ul.image-2.jpeg"><br>Rule</a></li>
<li><a href="#link-nav"><img src="ul.image-1.jpeg"><br>Link</a></li>
<li><a href="#contact-nav"><img src="../ul.image-2.jpeg"><br>Contact</a></li>
<li><a href=""><img src="../ul.image-1.jpeg"><br>Clap</a></li>
</ul>
</header>
<nav id="about-nav">
<h2>About<i>About this site.</i></h2>
<a href="#" onclick="javascript:window.history.back(-1);return false;" class="back"><i class="fas fa-times-circle"></i></a>
<h3>First</h3>
<div>
このサイトの説明。
</div>
</nav>
<nav id="rule-nav">
<h2>Rule<i>This site's rule.</i></h2>
<a href="#" onclick="javascript:window.history.back(-1);return false;" class="back"><i class="fas fa-times-circle"></i></a>
<h3>Attention</h3>
<div>
注意事項。
</div>
<h3>Ban</h3>
<div>
禁止事項。
</div>
</nav>
<nav id="link-nav">
<h2>Link<i>Main contents.</i></h2>
<a href="#" onclick="javascript:window.history.back(-1);return false;" class="back"><i class="fas fa-times-circle"></i></a>
<h3>Main</h3>
<div>
<a href="">サブページ</a>
<a href="">サブページ</a>
<a href="">サブページ</a>
</div>
<h3>Ranking</h3>
<div>
<a href="">ランク</a>
<a href="">ランク</a>
<a href="">ランク</a>
</div>
</nav>
<nav id="contact-nav">
<h2>Contact<i>Contact me.</i></h2>
<a href="#" onclick="javascript:window.history.back(-1);return false;" class="back"><i class="fas fa-times-circle"></i></a>
<h3>Author</h3>
<div>
自己紹介。
</div>
<h3>SNS</h3>
<div>
SNS
</div>
<h3>Mail Box</h3>
<div>
メールボックス。
</div>
</nav>
</div>]]>
