<!-- layout by goooby.neocities.org -->
<!--
welcome to the source code, you can do whateeverre you want here idc idc add and remove anything you want to.
...
you can add more cred if you want but all i ask is that the top comment stays thanks (you can delete this)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://file.garden/ZRW6VPKULjLI59VM/500gift/cal.js"></script>
<title>your title here</title>
</head>
<body>
<div class="wrap">
<div class="top"></div>
<div class="middle">
<div class="left">
<div class="nav">
<div class="navtop">
<div class="navdesc"><p>Navigation!</p></div>
</div>
<ul>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
<li><p>hoiii</p></li>
</ul>
</div>
<script type="text/javascript">
calendar();
</script>
<div class="calendar"></div>
</div>
<div class="main">
<div class="header">
<h1>Yourname.neocities.org!</h1>
</div>
<div class="intro_wrap">
<div class="intro"><p>Thank you everyone for 500 followers!! Please enjoy this f2u layout! <a href="#">code here.</a></p></div>
</div>
<div class="divwrap">
<div class="chat"><p>maybe a chatbox?</p></div>
<div class="link"><p>maybe for buttons?</p></div>
</div>
</div>
<div class="right">
<div class="box1"><p>empty box 1</p></div>
<div class="updates"><p>update box?</p></div>
<div class="box2"><p>empty box 2</p></div>
<div class="ad"></div>
</div>
</div>
<div class="bottom"><p>Bottom text</p></div>
</div>
<!-- Code injected by live-server -->
<script>
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script>
</body>
</html>

<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
cursor: url(https://goooby.neocities.org/pixels/oth404.png), auto;
}
a{
color: #77adff;
}
:root{
--border: #a17989
}
body{
background-image: linear-gradient(transparent, #fffff1cb) ,url(https://goooby.neocities.org/graphics%20made%20by%20me/pattern_0_ec35e96c122a194f3959e1b1c0ecef4b.png);
background-attachment: fixed;
}
.wrap{
margin: 2rem auto;
width: 50rem;
height: 50rem;
background-color: darkslateblue;
border: 8px ridge var(--border);
border-radius: 30px 30px 4px 4px;
display: flex;
flex-direction: column;
overflow: auto;
box-shadow: #833554a1 -3px 4px 9px -3px;
}
.top{
width: 100%;
height: 5%;
background-color: #fffdfa;
border-bottom: 5px ridge var(--border);
box-shadow: inset #ffc0c0 0 0 6px;
}
.middle{
width: 100%;
height: 89%;
background-image: url(https://goooby.neocities.org/graphics%20made%20by%20me/pattern_0_cd8fd8484550651477c15ecedb159999.png);
display: flex;
padding: 5px;
gap: 5px;
box-shadow: inset white 0 0 4px 2px;
}
.bottom{
width: 100%;
height: 7%;
background-color: #FFFAEF;
border-top: 5px ridge var(--border);
box-shadow: inset #ffc0c0 0 0 6px;
text-align: center;
font-size: 1.5em;
color: #6e5962;
padding-top: 8px;
}
.left{
width: 25%;
height: 100%;
background-color: #fffcf9;
border: 3px ridge #ffd8e9;
border-radius: 10px 10px 3px 3px;
padding: 3px;
}
.main{
width: 50%;
height: 100%;
background-color: #fffcf9;
border: 3px ridge #ffd8e9;
border-radius: 10px 10px 3px 3px;
padding: 5px;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.divwrap{
width: 100%;
height: 14.7rem;
background-color: #fffdfd;
border: 2px ridge #a17989;
display: flex;
padding: 5px;
gap: 0.5rem;
border-radius: 3px;
color: #856371;
}
.chat{
width: 60%;
height: 100%;
background-color: #fffdf9bb;
border: 2px ridge #f0bfd4;
box-shadow: inset #ffddeb 0 0 6px;
padding: 3px;
}
.link{
width: 40%;
height: 100%;
background-color: #fffdf9bb;
border: 2px ridge #f0bfd4;
box-shadow: inset #ffddeb 0 0 6px;
padding: 3px;
}
.header{
width: 100%;
height: 11rem;
background: linear-gradient(white, #fffff7);
border: 2px ridge #9f7565;
border-radius: 3px 5px;
padding: 3px;
box-shadow: inset #ffddeb 0 0 6px;
}
.header h1{
margin-top: 8.6rem;
color: #9f7565;
font-size: 1.5em;
}
.intro_wrap{
width: 100%;
height: 15rem;
background: linear-gradient(#fffff1, #ffdceb);
border: 2px ridge #9f7565;
padding: 10px;
border-radius: 3px;
}
.intro{
width: 100%;
height: 100%;
border: 2px ridge #f0bfd4;
background-color: #fffff7;
box-shadow: inset #ffddeb 0 0 6px;
padding: 5px;
color: #856371;
}
.right{
width: 25%;
height: 100%;
background-color: #fffcf9;
border: 3px ridge #ffd8e9;
border-radius: 10px 10px 3px 3px;
display: flex;
flex-direction: column;
padding: 3px;
gap: 0.5rem;
color: #856371;
}
.box1{
width: 100%;
height: 10rem;
background-color: #fffff1;
border: 2px ridge #f0bfd4;
}
.updates{
width: 100%;
height: 15rem;
background-color: white;
border: 2px ridge #f0bfd4;
}
.box2{
width: 100%;
height: 8.3rem;
background-color: #fff4f9;
border: 2px ridge #f0bfd4;
}
.ad{
width: 100%;
height: 6.9rem;
background-image: url(https://file.garden/ZRW6VPKULjLI59VM/graphics/big/jp%20ads/120316recruit_twitter_sb-200x123.gif);
background-size: contain;
}
.nav{
width: 100%;
height: 29rem;
border: 2px ridge #a17989;
border-radius: 13px 13px 3px 3px;
overflow: auto;
background: radial-gradient(#ffcfe0, #fffbf7);
}
.nav li{
width: 95%;
background: linear-gradient(to bottom, rgba(255,255,241,1) 0%, rgba(255,248,242,1) 52%, rgba(255,224,226,1) 61%, rgba(255,237,243,1) 100%);
border: 1px solid #a17989;
height: 2rem;
margin: 3px auto;
padding: 3px;
border-radius: 5px;
p{
font-size: 1.3em;
color: #856371;
}
}
.nav li::after{
content: url(https://goooby.neocities.org/pixels/IMG-1967.png);
top: -1.5rem;
left: 8.6rem;
position: relative;
}
.navtop{
width: 100%;
height: 2.5rem;
background: linear-gradient(white, #ffe1ea);
padding: 4px;
border-bottom: 1px solid gray;
}
.navdesc{
width: 100%;
height: 100%;
background-color: rgb(255, 254, 252);
border: 1px solid #6e5962;
border-radius: 7px 7px 5px 5px;
text-align: center;
padding-top: 5px;
color: #6e5962;
box-shadow: rgba(85, 36, 55, 0.144) 0px 1px 2px 0px, #e751061c 0px 1px 4px 0px inset;
}
.nav::-webkit-scrollbar{
display: none;
}
</style>
<!-- CALENDAR CSS: -->
<style>
.cal_calendar
{
border: 1px solid #8f657a;
padding: 1px;
background: linear-gradient(#fffff1, #ffdceb);
width: 100%;
margin: 0.6rem auto 0 auto;
height: 191px;
color: #83586e;
border-radius: 5px;
}
.cal_calendar th
{
border:1px solid #874a17c9;
background: linear-gradient(50deg, #FFFFF2, #ffe0f2);
width:36px;
font-size: 0.69em;
border-radius: 3px;
color: #83586e;
box-shadow: inset #ffcee8 0 0 4px 1px;
}
.cal_calendar td
{
border:1px solid #fa94c785;
background:linear-gradient(#fffff1, #ffdceb);
text-align:center;
font-size: 0.8em;
border-radius: 3px;
box-shadow: inset white 0 3px 3px, inset #ff7cb945 0 0 2px 1px;
}
.cal_today
{
color:#ff7cb9;
font-weight:bold;
}
.cal_days_bef_aft
{
color:#5a779e;
}
</style>