Theme 24

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

<style>

body{
background-color: #a47473;
color: #614140;
}

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

#left{
width: 215px;
height: 600px;
float: left;
}

#lefttop{
background-color: #ebe1dd;
width: 215px;
height: 290px;
margin-bottom: 20px;
border: 1px solid #614140;
background-image: url('https://i.imgur.com/KjjjwxF.jpg');
}

#leftbottom{
background-color: #ebe1dd;
width: 185px;
height: 260px;
padding: 15px;
border: 1px solid #614140;
text-align: center;
overflow: scroll;
overflow-x: hidden;
}

h1{
margin: 0px;
font-weight: normal;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 20px;
color: #a47473;
}

#leftbottom ul, li{
list-style-type: none;
padding: 0px;
letter-spacing: 1px;
}

a{
text-decoration: none;
color: #63a888;
}

a:hover{
color: #a47473;
}

#right{
float: right;
width: 325px;
height: 600px;
}

#righttop{
background-color: #ebe1dd;
width: 295px;
height: 325px;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #614140;
text-align: center;
overflow: scroll;
overflow-x: hidden;
font-size: 15px;
letter-spacing: 1px;
}

.content{
text-align: justify;
}

#rightbottom{
background-color: #ebe1dd;
width: 295px;
height: 195px;
padding: 15px;
border: 1px solid #614140;
text-align: center;
overflow: scroll;
overflow-x: hidden;
font-size: 15px;
letter-spacing: 1px;
}

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

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

::-webkit-scrollbar-thumb{
background-color: #80ad99;
}

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

#credit a{
color: #c7acab;
}

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

</style>

</head>

<body>

<div id="all">

<div id="left">

<div id="lefttop">
</div>

<div id="leftbottom">

<h1>navigate</h1>

<ul>
<li><a href="">home</a></li>
<li><a href="">about</a></li>
<li><a href="">gallery</a></li>
<li><a href="">blog</a></li>
<li><a href="">links</a></li>
<li><a href="">other</a></li>
<li><a href="">misc</a></li>
</ul>

<h1>other</h1>
<ul>
<li><a href="">home</a></li>
<li><a href="">about</a></li>
<li><a href="">gallery</a></li>
<li><a href="">blog</a></li>
<li><a href="">links</a></li>
<li><a href="">other</a></li>
<li><a href="">misc</a></li>
</ul>

</div>

</div>

<div id="right">

<div id="righttop">

<h1>welcome</h1>

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum est velit, et condimentum lacus elementum eu. Quisque viverra ac ipsum sit amet scelerisque. Mauris nec felis nec ligula faucibus maximus. Phasellus faucibus vitae nunc id volutpat. Donec eu ligula justo. In ullamcorper, nibh eget vulputate lobortis, magna mi lacinia erat.</p>

<p>Cras non nulla consectetur mi euismod rhoncus. Nullam condimentum justo volutpat diam bibendum faucibus. Duis non pulvinar neque. Suspendisse in blandit augue, sed sodales ex. Vivamus pharetra nibh vitae risus vehicula accumsan. Vivamus ac leo eleifend, elementum lorem quis, laoreet sapien. Vivamus finibus aliquam ligula semper varius.</p>

<p>Ut nisl lectus, ultrices et efficitur vitae, ornare sed massa. Mauris dictum cursus sagittis. Etiam dolor est, fermentum ac pellentesque euismod, euismod a turpis. Quisque dui augue, sollicitudin ac mollis id, pretium dictum leo. Nam faucibus et urna eget finibus. Pellentesque neque nibh, cursus et orci tempus, laoreet bibendum enim.</p>

<p>Nulla et mi enim. Donec elementum lorem eget dui lobortis, id viverra tortor blandit. Morbi vitae felis erat. Nulla quis tincidunt massa. Integer sollicitudin tincidunt pretium. Quisque dolor magna, scelerisque ac mauris id, convallis mattis neque. Ut ullamcorper sem vitae nisl tincidunt iaculis. Sed sollicitudin pulvinar interdum. Mauris hendrerit erat a velit mattis fringilla.</p>

<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst. Cras lacinia mi eros, in auctor erat molestie consectetur. Pellentesque ac sodales libero, et hendrerit odio. Ut consequat consequat tempor. Nulla sit amet urna dictum, pulvinar tellus eu, consectetur diam. Proin aliquam cursus varius.</p>
</div>

</div>

<div id="rightbottom">

<h1>header</h1>

<div class="content">

<!-- the form below is just for show and can't actually submit anything :P -->

<div id="form">

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<div>
<textarea name="comments" id="comments" style="width:280px;height:135px;background-color:#f7f4f2;color:#694a49;padding:5px;font-family:serif;border:1px solid #80ad99;">
say something!
</textarea>
</div>
<input type="submit" value="Submit" style="background-color:#eefae1;color:#694a49;border:1px solid #c2afa7;font-family:serif;font-size:12px;cursor:pointer;">
</form>

</div>

</div>

</div>

</div>

</div>

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

</body>

</html>