Overdose
Announce
Code
head
<![CDATA[<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Angkor:wght@400;700&display=swap">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<style>
CSS
</style>]]>
CSS
<![CDATA[/*
Template T-08 Overdose
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:rosybrown;
scroll-behavior:smooth;
}
a {
color:#644;
text-decoration:none;
}
ul {
list-style-type:none;
}
header {
margin-bottom:50px;
}
header h1 {
position:relative;
width:190px;
height:190px;
margin:70px auto 40px;
}
header h1:before {
content:'';
border-radius:50%;
background-color:#dbb;
background-image:
url('../h1before.image.jpeg');
background-repeat:no-repeat;
background-position:50% 50%;
background-size:cover;
background-blend-mode:darken;
position:absolute;
top:5px;
left:5px;
width:180px;
height:180px;
display:block;
z-index:-1;
}
header h1:after {
content:'';
border-radius:50%;
border:solid 3px #644;
background-color:#866;
box-sizing:border-box;
position:absolute;
top:0;
left:0;
width:190px;
height:190px;
display:block;
z-index:-2;
}
header h1 i {
font-size:40px;
font-family:"Angkor",Sans-Serif;
font-weight:600;
color:#644;
text-shadow:2px 2px 0 antiquewhite;
display:block;
transform:translate(-20px,50px);
}
header ul {
display:flex;
justify-content:center;
}
header ul li {
margin:5px 6px;
}
header ul li button {
color:rosybrown;
background-color:#644;
box-shadow:3px 3px 0 0 #444;
padding:3px 5px;
}
nav {
background-color:oldlace;
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(50%,0);
transition:0.4s;
}
nav:target {
z-index:5;
opacity:1;
transform:translate(0,0);
transition:0.4s;
}
nav h2 {
font-size:20px;
font-weight:600;
color:#644;
background-color:rosybrown;
width:100%;
height:100px;
margin-bottom:20px;
padding:10px 20px;
}
nav h2 i {
color:oldlace;
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:oldlace;
}
nav h3 {
font-size:14px;
font-weight:600;
color:#644;
background-color:rosybrown;
box-shadow:3px 3px 0 0 gray;
margin:0 10px;
padding:5px 20px;
display:inline-block;
}
nav h3:first-letter {
font-size:18px;
color:firebrick;
}
nav div {
color:#644;
line-height:180%;
margin-bottom:20px;
padding:10px 20px;
white-space:pre-line;
}
main {
text-align:center;
margin-bottom:80px;
}
main h2 {
font-size:16px;
font-weight:600;
}
div.container {
line-height:180%;
margin-bottom:20px;
white-space:pre-line;
}]]>
body
<![CDATA[<div class="contain">
<header>
<h1><i>Overdose</i></h1>
<ul>
<li><button onclick="location.href='#about-nav'">About</button></li>
<li><button onclick="location.href='#rule-nav'">Rule</button></li>
<li><button onclick="location.href='#link-nav'">Link</button></li>
<li><button onclick="location.href='#contact-nav'">Contact</button></li>
<li><button onclick="location.href=''">Clap</button></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>
<main>
<h2>Announce</h2>
<div class="container">
<a href="">更新履歴</a>
♯note_pagelist1♯
</div>
</main>
</div>]]>
