Untitled

<!-- Welcome to the source code! You can alter this however you'd like, I only ask is that the credit is kept there and if you do move it, atleast make a credits page! But I'd prefer if it's on the index 💥 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The emoji that is in the tab bar -->
<link rel="icon" type="image/x-icon" href="https://goooby.neocities.org/pixels/9e095477.gif">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- site title -->
<title>Site title</title>
</head>
<body>
<div class="fullsite">
<div class="header">
<h1 class="sitename">yoursite.neocities.org</h1>
</div>
<div class="left">
<div class="main">
<div class="main2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quam similique molestiae mollitia quas vero soluta beatae id placeat in nulla quo, reiciendis pariatur accusantium nihil necessitatibus fuga assumenda ipsum.</p>
</div>
</div>
<div class="box1">
<p>Whatever you want!</p>
</div>
<div class="box2">
<p>Whatever you want!</p>
</div>
</div>
<div class="right">
    <div class="nav">
    <div class="titletab"><h3>Sitely</h3></div>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <div class="titletab"><h3>Personal</h3></div>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <div class="titletab"><h3>Offsite</h3></div>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    </div>
    <div class="box3">
    <p>Whatever you want!</p>
    </div>
</div>
<div class="footer"></div>
</div>
<!-- please don't delete, thank you for using my layout! (*^_^*) -->
<a href="https://goooby.neocities.org/" class="credit" target="_blank">layout by  goob</a>
</body>
</html>

<style>
*{
margin: 0;
box-sizing: border-box;
}
body{
background-image: url(http://i160.photobucket.com/albums/t197/myntebuu/SOZAI/bgheartstripeblue.gif);
}
.fullsite{
width: 45rem;
height: fit-content;
background: url(https://goooby.neocities.org/backgrounds/blue%20dots.png); /* increase & decrease to your needs */
margin: 1rem auto;
padding: 10px;
border: 3px ridge #ffffff;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
gap: 5px;
flex-wrap: wrap;
}
.header{
width: 100%;
height: 10em;
background-image: url(https://i.pinimg.com/564x/21/9f/29/219f299290d45a75ba797fc36827117f.jpg);
background-size: contain;
box-shadow: white 0px 0px 12px 10px inset;
border: 3px ridge #d4f6ff;
}
.sitename{
font-family: MountHills;
font-size: 2.4em;
color: #a1d2eb;
filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 1px rgb(69, 168, 214));
}
.left{
width: 31rem;
height: 30rem;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 5px;
}
.nav{
background-color: #fff;
width: 12rem;
height: 20rem;
border: 3px ridge #d4f6ff;
overflow: auto;
overflow-x: hidden;
}
.main{
width: 100%;
height: 15.8rem;
background-image: url(https://goooby.neocities.org/backgrounds/tumblr_leiazpO0wr1qf7n84o1_100.gif);
border: 3px ridge #d4f6ff;
padding: 10px;
background-size: 30px;
}
.box1{
width: 15.3rem;
height: 13.8rem;
background-color: #fff;
border: 3px ridge #d4f6ff;
padding: 5px;
}
.box2{
width: 15.3rem;
height: 13.8rem;
background-color: #fff;
border: 3px ridge #d4f6ff;
padding: 5px;
}
.footer{
width: 100%;
height: 6rem;
background-image: url(https://goooby.neocities.org/backgrounds/3rf1q7.png);
border: 3px ridge #d4f6ff;
}
.titletab{
width: 11rem;
height: 2.5rem;
background-image: url(https://goooby.neocities.org/backgrounds/gVvPi8W.gif);
margin: 0.5rem auto 0 auto;
border-radius: 30px;
background-size: 40px;
box-shadow: inset 13px 0px 6px -10px rgba(146, 146, 146, 0.2), inset -13px 0px 6px -10px rgba(146, 146, 146, 0.56), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgba(143, 143, 143, 0.38);
text-align: center;
font-family: Zen;
border: 1px solid rgba(128, 128, 128, 0.438);
}
.main2{
width: fit-content;
height: 100%;
background-color: #ffffff;
border: rgb(200, 242, 255) ridge 2px;
overflow: auto;
padding: 5px;
}
li{
list-style-image: url(https://goooby.neocities.org/pixels/star129.gif);
}
a{
color: rgb(65, 65, 65);
font-family: basiic;
}
p{
font-family: basiic;
}
.titletab > h3{
filter: drop-shadow(-1px 1px 0 #fff) drop-shadow(0 0.2px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 0px #fff) drop-shadow(0 -1px 0px #fff);
}
/* color when you highlight text with your mouse */
::selection{
background-color: #c9edff;
color: black;
}
.credit{
font-family: zen;
font-weight: bolder;
text-decoration: none;
filter: drop-shadow(-1px 1px 0 #fff) drop-shadow(0 0.2px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 0px #fff) drop-shadow(0 -1px 0px #fff);
top: 58rem;
position: absolute;
}
::-webkit-scrollbar{
display: none;
}
.box3{
background-color: #ffffff;
width: 5rem;
height: 5rem;
margin-top: 5px;
border: rgb(200, 242, 255) ridge 2px;
width: 12rem;
height: 9.6rem;
}
.right{
/* Anything you want! */
}
</style>
<!-- fonts -->
<style>
@font-face {
src: url(https://dl.dropbox.com/s/zsaj2ksfyd20ugv/Mount%20Hills.otf);
font-family: MountHills;
}
@font-face {
font-family: basiic;
src:url(https://dl.dropbox.com/s/ojkb2mefxt1izhq/basiic.ttf);
}
@font-face {
font-family: Zen;
src: url(https://dl.dropbox.com/s/xu99rn6hppd0p9q/ZenMaruGothic-Medium.ttf);
}
</style>