Theme 27

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>theme 27</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=Fleur+De+Leah&display=swap" rel="stylesheet">

<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=Averia+Serif+Libre:wght@300&display=swap" rel="stylesheet">

<style>

body{
background-color: #DACBB6;
background-image: url('https://i.imgur.com/m5Mig5o.png');
font-family: 'Averia Serif Libre', serif;
}

#all{
width: 820px;
height: 580px;
border-radius: 15px;
padding: 10px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #91697b;
background-image: url('https://i.imgur.com/BspyVOP.png');
box-shadow: 2px 2px 2px #57443E;
}

#page1{
background-color: #fff;
border-radius: 15px;
width: 818px;
height: 578px;
padding: 2px;
box-shadow: 0px 0px 2px #57443E;
}

#page2{
background-color: #fff;
border-radius: 15px;
width: 814px;
height: 574px;
box-shadow: 0px 0px 2px #574539;
padding: 2px;
}

#page3{
background-color: #fff;
border-radius: 15px;
width: 814px;
height: 574px;
box-shadow: 0px 0px 2px #574539;
background-image: url('https://i.imgur.com/BspyVOP.png');
}

#left{
float: left;
width: 393px;
height: 544px;
padding: 10px 0px 0px 0px;
}

#right{
float: right;
width: 391px;
height: 544px;
padding: 10px 10px 0px 0px;
}

#left h1{
text-align: center;
margin: 0px;
font-weight: normal;
font-size: 54px;
font-family: 'Fleur De Leah', serif;
color: #fff;
background-image: url('https://i.imgur.com/ioTIDUC.png');
width: 400px;
height: 106px;
line-height: 106px;
}

#leftcontent{
overflow: scroll;
overflow-x: hidden;
height: 423px;
padding: 0px 10px 0px 15px;
font-size: 14px;
text-align: justify;
color: #5c4751;
}

#right h1{
text-align: center;
margin: 0px;
font-weight: normal;
font-size: 54px;
font-family: 'Fleur De Leah', serif;
color: #fff;
background-image: url('https://i.imgur.com/jZyOU30.png');
width: 400px;
height: 106px;
line-height: 106px;
}

#rightcontent{
overflow: scroll;
overflow-x: hidden;
height: 445px;
padding: 0px 10px 0px 12px;
font-size: 14px;
text-align: justify;
color: #5c4751;
}

h2{
text-align: right;
margin: 0px;
font-size: 15px;
letter-spacing: 1px;
font-weight: normal;
text-transform: uppercase;
color: #c79e95;
}

#line{
width: 1px;
height: 574px;
margin: 0 auto;
background-color: #A19386;
box-shadow: 0px 0px 10px #2e2a27;
}

#nav{
text-align: right;
border-bottom: 1px dotted #ad8598;
margin: 0px 0px 5px 10px;
font-size: 14px;
color: #c79e95;
}

#nav a{
letter-spacing: 1px;
}

a{
text-decoration: none;
color: #b8ba83;
}

a:hover{
color: #ad8598;
}

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

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

::-webkit-scrollbar-thumb{
background-color: #ad8598;
border-radius: 5px;
}

#credit{
font-size: 12px;
position: fixed;
bottom: 0;
right: 0;
font-family: 'Averia Serif Libre', serif;
}

#credit a{
color: #fff;
}

#credit a:hover{
color: #5c4751;
}

</style>

</head>

<body>

<div id="all">

<div id="page1">

<div id="page2">

<div id="page3">

<div id="left"> <!-- left page start -->

<h1>Title Here</h1>

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

<div id="leftcontent">

<h2>header here</h2>

<img src="https://i.imgur.com/T6ae4Li.png" style="width:200px;float:left;margin-right:10px;">

<p style="clear:right;margin:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam gravida velit id mauris tristique pharetra. Vivamus et commodo urna. Pellentesque molestie tortor orci, nec viverra velit feugiat at. Curabitur eget sapien in elit rutrum convallis nec in lacus. Mauris finibus rhoncus nibh, a facilisis justo facilisis ut. Donec ante neque, egestas sit amet ultricies nec, porttitor ut sem.</p>

<p>Phasellus tortor nisi, dapibus eget efficitur vitae, bibendum id nibh. Nulla iaculis condimentum massa, sit amet malesuada diam efficitur in. Mauris finibus rhoncus nibh, a facilisis justo facilisis ut. Donec ante neque, egestas sit amet ultricies nec, porttitor ut sem.</p>

<p>Cras tellus dolor, scelerisque a ex vitae, maximus sodales eros. Sed bibendum metus ut ex euismod ullamcorper sed lacinia nibh. Morbi euismod interdum hendrerit. Donec hendrerit risus vitae placerat dignissim.</p>

<p>Aenean congue sed ante efficitur venenatis. Morbi dapibus ipsum nibh, rutrum blandit libero convallis at. Aliquam erat volutpat. Vestibulum ac justo vel justo dignissim viverra. Sed sit amet ipsum sem.</p>

<p>Nulla a nulla nulla. Donec sit amet bibendum ante. Duis vehicula risus a elementum pellentesque. In hac habitasse platea dictumst. Morbi ex sem, imperdiet id viverra quis, tempus sit amet eros.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam gravida velit id mauris tristique pharetra. Vivamus et commodo urna. Pellentesque molestie tortor orci, nec viverra velit feugiat at. Curabitur eget sapien in elit rutrum convallis nec in lacus.</p>

<p>Phasellus tortor nisi, dapibus eget efficitur vitae, bibendum id nibh. Nulla iaculis condimentum massa, sit amet malesuada diam efficitur in. Mauris finibus rhoncus nibh, a facilisis justo facilisis ut. Donec ante neque, egestas sit amet ultricies nec, porttitor ut sem.</p>

</div>

</div> <!-- left page end -->

<div id="right"> <!-- right page start -->

<h1>Title Here</h1>

<div id="rightcontent">

<h2>header here</h2>

<p style="margin:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam gravida velit id mauris tristique pharetra. Vivamus et commodo urna. Pellentesque molestie tortor orci, nec viverra velit feugiat at. Curabitur eget sapien in elit rutrum convallis nec in lacus.</p>

<p>Phasellus tortor nisi, dapibus eget efficitur vitae, bibendum id nibh. Nulla iaculis condimentum massa, sit amet malesuada diam efficitur in. Mauris finibus rhoncus nibh, a facilisis justo facilisis ut. Donec ante neque, egestas sit amet ultricies nec, porttitor ut sem.</p>

<p>Cras tellus dolor, scelerisque a ex vitae, maximus sodales eros. Sed bibendum metus ut ex euismod ullamcorper sed lacinia nibh. Morbi euismod interdum hendrerit. Donec hendrerit risus vitae placerat dignissim.</p>

<p>Aenean congue sed ante efficitur venenatis. Morbi dapibus ipsum nibh, rutrum blandit libero convallis at. Aliquam erat volutpat. Vestibulum ac justo vel justo dignissim viverra. Sed sit amet ipsum sem.</p>

<p>Nulla a nulla nulla. Donec sit amet bibendum ante. Duis vehicula risus a elementum pellentesque. In hac habitasse platea dictumst. Morbi ex sem, imperdiet id viverra quis, tempus sit amet eros.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam gravida velit id mauris tristique pharetra. Vivamus et commodo urna. Pellentesque molestie tortor orci, nec viverra velit feugiat at. Curabitur eget sapien in elit rutrum convallis nec in lacus.</p>

<p>Phasellus tortor nisi, dapibus eget efficitur vitae, bibendum id nibh. Nulla iaculis condimentum massa, sit amet malesuada diam efficitur in. Mauris finibus rhoncus nibh, a facilisis justo facilisis ut. Donec ante neque, egestas sit amet ultricies nec, porttitor ut sem.</p>

</div>

</div> <!-- right page end -->

<div id="line">
</div>

</div>

</div>

</div>

</div>

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

</body>

</html>