Heading

Layout Features

  • Fully responsive layout on any size device.
  • Fixed width divs that add a scrollbar as opposed to stretching.
  • Navigation section moves to top when window is resized.
Navigation
Heading

The great thing about this is that you can write as much as you like, and it just adds a scrollbar. Just keep writing until you can write no more!

Heading

in the end, nothing really matters

:root { --dk-color:#bf776b; --mid-color:#f2b1a4; --lt-color:#ffe8e3; --dkest-color:#8e534a; --accent:#226051; } html, body { margin:0; padding-top:25px; padding:0; height:100%; font-family:Verdana; font-size:11px; background-image:url('https://neothemes.neocities.org/images/roses-bg.gif'); background-repeat:repeat; color:var(--dkest-color); padding:1px; overflow-y:hidden; } body a { color:var(--accent); font-weight:bold; } #container { max-width:900px; margin:0 auto; margin-top:15px; height:100%; } h1, h3, h5 { color:var(--dk-color); } h2, h4, h6 { color:var(--accent); } #header { max-width:850px; height:105px; margin-left:5px; margin-right:5px; margin:0 auto; background-color:var(--lt-color); border:1px solid var(--dkest-color); } .title { font-size:35px; text-align:center; font-style:italic; } #wrapper { margin:0 auto; max-width:860px; } .content { padding:10px; } #two-boxes { display:flex; flex-wrap:wrap; max-width:900px; } .box-one, .box-two, .box-three, .box-four, .box-five, .box-six { border:1px solid var(--dkest-color); background-color:var(--lt-color); overflow:auto; } .box-one, .box-two { height:200px; width:418px; margin-left:5px; } .box-one { margin-top:5px; margin-right:5px; } .box-two { margin-top:5px; margin-right:5px; } .box-three { margin-left:5px; margin-top:5px; width:260px; height:326px; } .box-four { margin-top:5px; margin-left:5px; width:581px; height:326px; } .section-title { text-align:center; font-weight:bold; padding-top:5px; padding-bottom:5px; background-color:var(--mid-color); color:var(--dkest-color); font-size:12px; } .nav-wrapper { display:flex; flex-wrap:wrap; width:400px; height:50px; margin:0 auto; justify-content:space-evenly; margin-top:5px; } button { width:190px; height:35px; background-color:var(--mid-color); color:var(--dkest-color); font-weight:bold; border:none; margin-top:5px; margin-right:5px; } button a { color:var(--accent); font-weight:bold; } p { padding:5px; } p a { color:var(--dkest-color); font-weight:bold; } .scroll::-webkit-scrollbar-track { background-color: var(--lt-color); } .scroll::-webkit-scrollbar { width: 10px; background-color: #f2b1a4; } .scroll::-webkit-scrollbar-thumb { background-color: var(--dk-color); } #footer { text-align:center; padding-top:5px; margin-bottom:5px; } #footer p { background-color:white; display:block; width:160px; margin:0 auto; margin-top:5px; margin-bottom:5px; padding:5px; } textarea { background-color:var(--dkest-color); color:var(--lt-color); font-size:10px; } @media only screen and (max-width: 860px) { html, body { overflow:visible; } #header { width:97.6%; } #container { width:100%; } .box-one, .box-two, .box-three, .box-four, .box-five, .box-six { width:100%; } .box-two { order:1; } .box-one { order:2; } .box-three { width:98%; } .three-boxes { width:98%; } .two-boxes { width:100%; } .wrapper { width:100%; } }