Theme 29

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

<style>

body{
background-color: #322938;
}

#all{
width: 700px;
margin: 0 auto;
background-color: #fff;
padding: 10px;
}

#header{
width: 700px;
height: 210px;
margin-bottom: 10px;
background-image: url('https://i.imgur.com/hCNFFqk.png');
position:relative;
}

#header h1{
margin:0px;
color: #7d8781;
font-weight: normal;
letter-spacing: 1px;
opacity: 0.8;
position: absolute;
right: 5px;
bottom: 0px;
}

#sidebar{
float:left;
width: 200px;
font-size: 14px;
margin-bottom: 10px;
}

#sidebar ul, li{
padding: 0px;
list-style-type: none;
margin: 0px;
}

#sidebar li{
border-bottom: 1px dotted #322938;
padding: 2px 0px 0px 0px;
}

#sidebar ul{
padding: 5px 0px 0px 0px;
}

#sidebox1{
width: 200px;
background-color: #d6d1ae;
margin-bottom: 7px;
padding-top: 5px;
}

#sidebox2{
width: 200px;
background-color: #d6d1ae;
margin-bottom: 7px;
padding-top: 5px;
}

#sidebox3{
width: 200px;
background-color: #d6d1ae;
margin-bottom: 7px;
padding-top: 5px;
}

#sidebox4{
width: 180px;
background-color: #d6d1ae;
padding: 10px;
}

#q{
width: 155px;
background-color: #c4a9b9;
color: #322938;
padding: 15px 10px 10px 15px;
letter-spacing: 1px;
font-size: 14px;
margin: 0px;
background-image: url('https://i.imgur.com/KSc3087.png');
background-repeat: no-repeat;
background-size: 32%;
}

.sideheaders{
border-bottom: 10px solid #453352;
color: #453352;
text-align: center;
text-transform: uppercase;
font-size: 13px;
font-weight: normal;
letter-spacing: 1px;
margin: 0px;
}

#sidebar a{
color: #453352;
text-decoration: none;
}

#sidebar a:visited{
color: #453352;
}

#sidebar a:hover{
font-style: italic;
}

#sidebar a:active{
color: #453352;
}

#main{
float: right;
width: 480px;
margin-bottom: 10px;
font-size: 14px;
text-align: justify;
color: #322938;
padding-right: 5px;
}

#main h3{
border-bottom: 1px dotted #89a194;
font-weight: normal;
letter-spacing: 1px;
font-size: 16px;
color: #699a80;
margin: 0px;
}

#other{
background-color: #c4a9b9;
padding: 10px;
border: 1px dotted #695762;
letter-spacing: 1px;
color: #584a52;
}

#footer{
background-color: #d6d1ae;
clear: both;
color: #322938;
font-size: 13px;
letter-spacing: 1px;
padding: 1px;
}

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

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

::-webkit-scrollbar-thumb{
background-color: #3e3644;
}

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

#credit a{
color: #5f5567;
}

#credit a:visited{
color: #5f5567;
}

#credit a:hover{
font-style: italic;
}

#credit a:active{
color: #5f5567;
}

</style>

</head>

<body>

<div id="all">

<div id="header">
<h1>Aenean Libero Dui</h1>
</div>

<div id="sidebar">

<div id="sidebox1">
<h3 class="sideheaders">header</h3>
<ul>
<li><a href="">Lectus sit amet eleifend hendrerit...</a></li>
<li><a href="">Quam elit tristique...</a></li>
<li><a href="">Luctus ullamcorper orci...</a></li>
</ul>
</div>

<div id="sidebox2">
<h3 class="sideheaders">header</h3>
<ul>
<li><a href="">Varius aliquam ac eget...</a></li>
<li><a href="">Ex a libero...</a></li>
<li><a href="">Nulla bibendum orci...</a></li>
</ul>
</div>

<div id="sidebox3">
<h3 class="sideheaders">header</h3>
<ul>
<li><a href="">Phasellus id magna mauris...</a></li>
<li><a href="">Eu sapien efficitur...</a></li>
<li><a href="">Curabitur vel metus...</a></li>
</ul>
</div>

<div id="sidebox4">
<p id="q">Ut gravida, lectus sit amet eleifend hendrerit, quam elit tristique mauris, luctus ullamcorper orci ex a libero. Nulla eget lorem at.</p>
</div>
</div>

<div id="main"><!-- MAIN CONTENT HERE -->
<h3>Mauris hendrerit ligula at luctus scelerisque</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pretium ligula eget porta auctor. Cras posuere nisi massa, sed iaculis massa eleifend ut. Proin interdum pellentesque diam id semper. Morbi tempor facilisis justo eu molestie. Ut eu felis vel odio dapibus egestas. Vivamus at sagittis libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id ornare ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi pulvinar magna sem, a luctus lorem fringilla quis. Nulla facilisi. Proin consectetur, nibh ac ultrices pharetra, libero est eleifend purus, et efficitur lectus felis non nisi. Morbi at risus in sapien dictum molestie. Mauris commodo consequat justo quis lacinia. Vestibulum rutrum justo et arcu porttitor pulvinar. Pellentesque at consequat neque, a tincidunt ex.</p>

<p>Nam ipsum ipsum, tincidunt quis venenatis at, porta at magna. Sed tincidunt tellus nulla, a porta justo euismod sed. In ornare dolor justo, a pretium neque eleifend at. In sed nisl sit amet ipsum lacinia egestas. Vestibulum at viverra tortor. Maecenas faucibus ipsum ac arcu imperdiet aliquam. Nullam magna sem, scelerisque quis felis in, feugiat feugiat ligula. Praesent lorem libero, mollis ac posuere ut, rhoncus et orci. Maecenas ut ipsum at purus fringilla finibus a sit amet odio. Etiam at sodales felis. Vivamus id sollicitudin est, quis vestibulum neque. Integer felis felis, scelerisque et metus eget, aliquam posuere odio. Proin eu hendrerit massa, eu lobortis enim. Ut feugiat vestibulum metus. Praesent scelerisque vitae eros quis aliquam. Praesent eu massa ac augue auctor pharetra non sit amet ligula.</p>

<div id="other">
<p style="margin:0px;"><i>In sed nisl sit amet ipsum lacinia egestas. Vestibulum at viverra tortor. Maecenas faucibus ipsum ac arcu imperdiet aliquam. Nullam magna sem</i>, <b>scelerisque quis</b> felis in, feugiat feugiat ligula. Praesent lorem libero, mollis ac posuere ut, rhoncus et orci. Maecenas ut ipsum at purus fringilla finibus a sit amet odio. Etiam at sodales felis. Vivamus id sollicitudin est, quis vestibulum neque. Integer felis felis, scelerisque et metus eget, aliquam posuere odio.</p>
</div>
<!-- END MAIN CONTENT HERE -->
</div>

<div id="footer">footer text here</div>

</div>

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

</body>

</html>