!-- Your Site Name Here --!

Get the Code!

HTML:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>!-- Your Site Name Here --!</title>
      <link href="01.css" rel="stylesheet" type="text/css" media="all">
      <link rel="icon" type="image/png" href="https://neothemes.neocities.org/images/favicon.gif" />
   </head>
   <body class="scroll">
      <div id="container">
      <div id="header">
         <h1 class="title">Your Site Name <br>(or graphic)</h1>
      </div>
      <div id="wrapper">
         <div id="two-boxes">
            <div class="box-one scroll">
               <div class="section-title">
                  Heading
               </div>
               <div class="content">
                  <p><strong>Layout Features</strong></p>
                  <ul>
                     <li>Fully responsive layout on any size device.</li>
                     <li>Fixed width divs that add a scrollbar as opposed to stretching.</li>
                     <li>Navigation section moves to top when window is resized.</li>
                  </ul>
               </div>
            </div>
            <div class="box-two scroll">
               <div class="section-title">Navigation</div>
               <div class="nav-wrapper">
                  <button><a href="/">Home</a></button>
                  <button><a href="#">Link</a></button>
                  <button><a href="#">Link</a></button>
                  <button><a href="#">Link</a></button>
                  <button><a href="#">Link</a></button>
                  <button><a href="#">Link</a></button>
                  <button><a href="#">Link</a></button>    
                  <button><a href="#">Link</a></button>
               </div>
            </div>
         </div>
         <div id="two-boxes">
            <div class="box-three scroll">
               <div class="section-title">Heading</div>
               <div class="content">
                  <p>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!</p>
               </div>
            </div>
               <div class="box-four scroll">
                  <div class="section-title">Heading</a></div>
                  <div class="content">
                     <p>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!</p>
                  </div>
               </div>
         </div>
         <div id="footer">
            <p>© Layout by <a href="https://neothemes.neocities.org/" target="_blank">NeoThemes</a></p>
         </div>
      </div>
   </body>
</html>

CSS:

: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%;
    }
}

Your Site Name
(or graphic)

Get the Code!

H1

H2

H3

H4

H5

H6

Your Site Name (or graphic)

Get the Code!

H1

H2

H3

H4

H5

H6

Your Site Name
(or graphic)