Theme 26

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>theme 26</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap" rel="stylesheet">

<style>

body{
background-color: #fcf9f7;
font-family: 'Yuji Syuku', serif;
background-image: url('https://i.imgur.com/fldnvdl.png');
}

#all{
width: 599px;
height: 681px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

#container{
width: 599px;
height: 681px;
background-image: url('https://i.imgur.com/Sag7RXx.png');
position: relative;
}

#title{
position: absolute;
top: 15px;
left: 140px;
width: 377px;
height: 127px;
color: #fff;
text-align: center;
}

#title h1{
margin: 0px;
text-align: center;
font-weight: normal;
line-height: 118px;
font-size: 40px;
}

#nav{
position: absolute;
bottom: 4px;
left: 59px;
width: 250px;
}

#nav p{
margin: 0px;
letter-spacing: -1px;
font-size: 15px;
}

a{
text-decoration: none;
color: #979cad;
}

a:hover{
color: #fff;
}

#contentbox{
border-radius: 17px;
width: 364px;
height: 486px;
position: absolute;
padding: 10px;
left: 145px;
top: 176px;
}

#innerbox{
border-radius: 17px;
padding-right: 10px;
padding-left: 5px;
width: 349px;
height: 466px;
overflow: scroll;
overflow-x: hidden;
color: #8d9099;
}

#contentbox h2{
text-align: right;
margin: 0px;
border-bottom: 2px dotted #F2DDD2;
font-size: 20px;
font-weight: normal;
color: #c5c8d1;
}

#content{
text-align: justify;
font-size: 14px;
}

::-webkit-scrollbar{
width: 6px;
}

::-webkit-scrollbar-track{
background-color: transparent;
}

::-webkit-scrollbar-thumb{
background-color: #DFE1E8;
}

#credit{
font-size: 12px;
position: fixed;
bottom: 0;
right: 0;
}

#credit a:hover{
color: #DFE1E8;
}

</style>

</head>

<body>

<div id="all">

<div id="container">

<div id="title">

<h1>Welcome</h1>

<div id="nav">
<p>
[<a href="">home</a>
<a href="">about</a>
<a href="">gallery</a>
<a href="">links</a>
<a href="">blog</a>
<a href="">misc</a>
<a href="">other</a>]
</p>
</div>

</div>

<div id="contentbox">

<div id="innerbox">

<h2>header here</h2>

<div id="content">

<p style="margin-top:2px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut finibus vestibulum velit, id dignissim lorem faucibus in. Etiam euismod ultrices sem laoreet dictum. Praesent semper accumsan facilisis. Aenean a lacus accumsan, consectetur ex at, sagittis metus.</p>

<p>Donec auctor interdum nisi sodales lobortis. Sed ut ornare erat, lacinia bibendum lorem. Aenean sodales efficitur ipsum, non tincidunt velit euismod in. In quis posuere felis. Integer eu elit tempus.</p>

<p>Mauris nec nunc vel sem imperdiet fermentum eu ac elit. Suspendisse ullamcorper vitae neque quis sollicitudin. In non augue eget metus convallis consectetur. Nullam porttitor viverra bibendum. Ut ac magna bibendum, vehicula nulla eget, venenatis orci. Vivamus dui urna.</p>

<p>Aliquam id suscipit tortor, id dignissim metus. Nullam egestas dictum quam non consequat. Vestibulum sed quam tristique, condimentum diam vel, aliquet augue. Integer pharetra laoreet est at aliquet.</p>

<p>Pellentesque at urna eget diam vestibulum dictum eu vel lorem. Aenean sit amet sapien ut ex sollicitudin dictum sit amet ut augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</div>

</div>

</div>

</div>

</div>

<div id="credit"><a href="https://repth.neocities.org/index.html">©repth</a></div>

</body>

</html>