Theme 10

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme 10</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=VT323&display=swap" rel="stylesheet">

<style>
html{
}

body{
background-image: url('https://i.imgur.com/H3Lk5bM.gif');
background-size:;
background-color: #fff;
font-family: 'VT323', sans-serif;
font-size: 24px;
}

#container{
width: 800px;
}

#side{
float: right;
width: 200px;
background-color: #fff;
text-align: center;
border-radius: 10px;
border: 1px solid #4f5561;
padding-bottom: 15px;
}

#sidecontent{
padding: 15px;
font-size: 30px;
margin: 0px 15px 15px 15px;
border-bottom: 5px dotted #858d9c;
}

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

#sideheader{
border-bottom: 1px solid #4f5561;
border-radius: 10px 10px 0px 0px;
background-image: linear-gradient(to right, rgba(198, 211, 240, 1), rgba(198, 211, 240, 0));
text-shadow: 1px 1px 5px #858d9c;
padding: 5px;
color: #fff;
}

#sideheader h1{
margin: 0px;
}

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

a:visited{
color: #f3a4a2;
}

a:hover{
color: #858d9c;
}

#sidemisc{
text-align: center;
color: #858d9c;
}

#scrollbox{
border: 1px solid #4f5561;
text-align: center;
color: #858d9c;
width: 120px;
height: 110px;
margin: 0 auto;
padding: 10px;
overflow: scroll;
overflow-x: hidden;
}

#main{
width: 590px;
clear: left;
background-color: #fff;
border-radius: 10px;
border: 1px solid #4f5561;
margin-bottom: 7px;
}

#header{
border-bottom: 1px solid #4f5561;
border-radius: 10px 10px 0px 0px;
background-image: linear-gradient(to right, rgba(198, 211, 240, 1), rgba(198, 211, 240, 0));
text-shadow: 1px 1px 5px #858d9c;
color: #fff;
padding: 5px;
}

#header h1{
margin: 0px;
}

#content{
padding: 15px;
color: #858d9c;
}

#content h2{
margin: 0px;
}

#content p{
font-size: 24px;
}

#footer{
clear: both;
background-color: #fff;
border: 1px solid #4f5561;
padding: 5px;
border-radius: 10px;
font-size: 14px;
background-image: linear-gradient(to right, rgba(198, 211, 240, 1), rgba(198, 211, 240, 0));
}

#footer p{
margin: 0px;
}

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

</style>

</head>

<body>

<div id="container">

<div id="side"><!-- SIDEBAR -->

<div id="sideheader"><h1>Nav</h1></div>

<div id="sidecontent"><!-- LINKS -->
<ul>
<li><a href="URL HERE">Home</a></li>
<li><a href="URL HERE">Profile</a></li>
<li><a href="URL HERE">Themes</a></li>
<li><a href="URL HERE">Journal</a></li>
</ul>
</div><!-- END LINKS -->

<div id="sidemisc">

<div id="scrollbox">
<p style="margin:0px;">Hello</p>
<img src="https://i.imgur.com/qAef7LL.png"><img>
<img src="https://i.imgur.com/R0BIiHi.gif"><img>
<img src="https://i.imgur.com/gdv6WS2.png"><img>
</div>

<img src="https://i.imgur.com/YHtkjs0.gif" style="width:47%;margin-top:10px;"><img>

</div>
</div><!-- end of sidebar -->

<div id="main">

<div id="header"><h1>Welcome</h1></div>

<div id="content"><!-- Replace with your content below -->
<h2>Header</h2>
<p style="clear:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus risus dolor. Fusce tellus nunc, pretium ut fermentum eu, blandit quis turpis.

<img src="https://i.imgur.com/yHFqjSJ.gif" style="float:right;margin:10px;"><img>

Etiam molestie urna ac fermentum pharetra. Morbi facilisis sodales diam eu euismod.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vel sapien eros. Curabitur dictum ut libero laoreet cursus. Donec tincidunt viverra mi, id dapibus dui consequat sit amet.</p>

<p>Duis aliquam sem ac elit mollis luctus. Mauris eget sollicitudin nibh. Donec luctus ex eget dolor pulvinar cursus. Aliquam sem turpis, iaculis a ex a, mattis aliquam sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor magna, ullamcorper vel elit at, venenatis ullamcorper dui. Nam posuere leo a convallis ultricies. id dapibus dui consequat sit amet.</p>

<!--end content -->
</div>


</div>

<div id="footer"><p>footer 2021</p></div>

</div>

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

</body>

</html>