| |
| |
| |
| |
| |
| |
| <!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> |
| |
| <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> |
| |
| <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> |