Information
About
サイトの説明
Rule
サイトの規約
Main Contents
Contents
Contents
Code
head
<![CDATA[<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
<style>
CSS
</style>]]>
CSS
<![CDATA[/*
Template T-13 Influential Face
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 {
color:silver;
background:black;
scroll-behavior:smooth;
}
a {
color:silver;
text-decoration:none;
}
ul {
list-style-type:none;
}
header {
background-image:
url('../header-back.image..jpeg');
background-repeat:no-repeat;
background-position:0% 0%;
background-size:cover;
height:160px;
padding:20px;
}
header h1 {
font-size:20px;
font-weight:600;
margin-bottom:90px;
}
header ul {
display:flex;
justify-content:center;
}
header ul li {
margin: 0 10px;
}
header ul li button {
font-weight:600;
color:silver;
background-color:transparent;
}
header ul li a {
font-weight:600;
}
section {
padding:20px;
}
section h2 {
font-size:24px;
font-weight:600;
margin-bottom:20px;
}
section.info h2 {
color:#d80;
}
section.main h2 {
color:#00f;
}
section.contact h2 {
color:#f00;
}
section h3 {
font-weight:15px;
font-weight:600;
}
div.container {
line-height:180%;
margin-top:-16px;
margin-bottom:20px;
white-space:pre-line;
}]]>
JS
<![CDATA[$(window).on('load', function(){
$('section').hide();
$('.list').on('click',function(){
$('section').not($('.'+$(this).attr('id'))).hide();
$('.'+$(this).attr('id')).fadeToggle(300);
});
});]]>
body
<![CDATA[<div class="contain">
<header>
<h1>Influential Face</h1>
<ul>
<li><button id="info" class="list">Info</button>
<li><button id="main" class="list">Main</button>
<li><button id="contact" class="list">Contact</button>
<li><a href="">Clap</a>
</ul>
</header>
<section class="info">
<h2>Information</h2>
<h3>About</h3>
<div class="container">
サイトの説明
</div>
<h3>Rule</h3>
<div class="container">
サイトの規約
</div>
</section>
<section class="main">
<h2>Main Contents</h2>
<h3>Contents</h3>
<div class="container">
<a href="">サブページ</a>
<a href="">サブページ</a>
</div>
<h3>Contents</h3>
<div class="container">
<a href="">サブページ</a>
<a href="">サブページ</a>
</div>
</section>
<section class="contact">
<h2>Contact</h2>
<h3>Author</h3>
<div class="container">
自己紹介
</div>
<h3>SNS</h3>
<div class="container">
<a href="">Facebook</a>
<a href="">Instagram</a>
<a href="">Twitter</a>
</div>
<h3>Mail</h3>
<div class="container">
メールボックス
</div>
</section>
</div>]]>