MonkeyLife
https://alicex.jp/ID/
Code
head
<![CDATA[<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap">
<style>
CSS
</style>]]>
CSS
<![CDATA[/*
Template T-10 Monkey Life
By Jumble Fun
Site URL https://alicex.jp/kenz/
*/
* {
font-size:13px;
font-family:"Libre-Baskerville";
box-sizing:border-box;
margin:0;
padding:0;
}
body {
color:white;
background:black;
scroll-behavior:smooth;
}
a {
color:white;
text-decoration:none;
}
ul {
list-style-type:none;
}
header {
background-image:
url('../header-back.image.jpeg');
background-repeat:no-repeat;
background-position:50% 25%;
background-size:cover;
position:relative;
width:100%;
height:160px;
margin-bottom:80px;
padding:10px;
}
header h1,
header h1 i {
font-size:50px;
font-weight:600;
font-family:"Libre Baskerville";
}
header h1 {
color:orange;
position:absolute;
top:100px;
right:20px;
text-align:right;
}
header h1 i {
color:white;
display:block;
transform:rotate(5deg);
}
header p {
border:solid 1px gray;
color:white;
background-color:black;
padding:4px 10px;
display:inline-block;
}
main {
padding:10px;
}
main ul {
counter-reset:list;
}
main ul li {
font-size:18px;
position:relative;
height:70px;
margin-left:20px;
padding-left:70px;
}
main ul li:before {
content:"0" counter(list);
counter-increment:list;
font-size:28px;
border-radius:50%;
border:solid 1px gray;
color:black;
background-color:white;
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
display:flex;
justify-content:center;
align-items:center;
}
main ul li a {
font-size:18px;
line-height:50px;
}]]>
body
<![CDATA[<div class="contain">
<header>
<h1>Monkey<i>Life</i></h1>
<p>https://alicex.jp/ID/</p>
</header>
<main>
<ul>
<li><a href="">About</a>
<li><a href="">Contents</a>
<li><a href="">Contact</a>
</ul>
</main>
</div>]]>
