jadefyre | website page layout code

internet neighbours

layout code

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YOUR WEBSITE/PAGE TITLE HERE</title>
    <meta name="description" content="PAGE DESCRIPTION"> 
    </head>
  <body>
  <div id="homelink"><p><a href="/"><strong>« home</strong></a></div>
    <div id="container">
      <div id="header">
      </div>
      <div id="flex">
        <main class="page">
        
          <h2>internet neighbours</h2>
            <div class="display-box">
            
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
              <div class="grid-item"><a href="https://jadefyre.neocities.org" target="_blank"><img src="/images/placeholder_button.gif"></a></div>
            
                
            </div> 
            
        </main>
        
        <aside class="page">
        <div id="sidebox"><p><sup>ENTER A DESCRIPTION HERE</sup></p>
        <p align="center"><a href="/index.html">« return home</a></p></div>
        </aside>
      </div> 
        <div id="footer">
          <div align="center"><p>page design by <a href="https://jadefyre.neocities.org/goodies/layouts/websites-layout.html" target="_blank">jadefyre</a></p></div>
        </div>
    </div> 
    
    <style>

/* Download fonts from fonts.google.com to your own server and link them here. If you don't want to change the URLs, make a top-level folder called fonts and make sure the file names are exactly as follows after you upload them. You can download Montserrat here: https://fonts.google.com/specimen/Montserrat */
      @font-face {
        font-family: Montserrat;
        src: url('/fonts/Montserrat-Regular.ttf'); 
      }
      
      @font-face {
        font-family: Montserrat;
        src: url('/fonts/Montserrat-SemiBold.ttf');
        font-weight: bold;
      }
      
      @font-face {
        font-family: Montserrat;
        src: url('/fonts/Montserrat-SemiBoldItalic.ttf');
        font-style: italic;
      }
      
      @font-face {
        font-family: Montserrat;
        src: url('/fonts/Montserrat-BoldItalic.ttf');
        font-style: italic;
        font-weight: bold;
      }
      
      body {
        background-color: #ffe3f2;
        color: #FE74BD;
        font-family: 'Montserrat', sans-serif;
        margin: 0px;      
      }
      
      #homelink { 
        margin-left: 50px; 
        font-size: 2em;
      } 
      #homelink a {
        color: white; 
      }
      
      #container { 
        position: absolute;
        max-width: 50%;
        padding-bottom: 50px;
        margin-bottom:100px;
        margin-left: 200px;        
      }
      
      #header {
        width: 100%;
        height: 100px;
      }
      
      #flex {
        display: flex;
      }
      
      
      .page {
        height: 350px; 
        border: dashed;
        border-width: 5px; 
        border-color: white; 
        text-align: left;
      }
      
      main {
        padding: 50px 10px 10px 100px; /* changing the first parameter (50px in the default code) may cause your sidebar to display weirdly. make sure to adjust 'padding-top' under the "aside" element if you adjust this, and vice versa */
        border-top-left-radius: 30px; /* border-radius elements adjust the curved corners. feel free to change or remove if you prefer square corners */
        border-bottom-left-radius: 30px;
        order: 1; 
        width: 70%;
        overflow:auto;
        scrollbar-color:#b32286 #fe74bd; /* the first colour is for the scrollbar itself, and the second colour is for the track it runs on */
        align-self: flex-end;
      }
      
      .display-box { 
        overflow: auto;
        scrollbar-color: #FF7B74 #FFA6D5;
        display: flex;
        flex-wrap:wrap;
        max-height: 80%;
        margin: 0;
        padding: 0;
        padding-bottom: 10px;
        vertical-align: middle;      
      }
      
      .grid-item {
        display: inline; 
        padding: 1px 0px 1px; /* this adjusts the space between each website button. the top and bottom are 1px each, resulting in a 2px gap between rows, while the buttons have no space between them side to side. adjust to your liking. 1st value is the top, second value is the right, third value is the bottom, and fourth value is the left. If you only have 3 values, the second value is both right and left and the third value is for the bottom. */
      }
      
      aside {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        border-left: none !important;
        overflow: hidden;
        width: 30%;
        order: 2;
        padding: none;
        align-self: flex-end;
        padding-top: 60px;
      }
      
      #sidebox { 
        max-height: 100%;
        display: flex;
        flex-wrap: wrap;
        vertical-align: middle;
        text-align: left;
        padding: 5%;
        margin: 40% 0 20px 0;
        overflow: auto; 
        scrollbar-color: #FF7B74 #FFA6D5;      
      }
      
      #sidebox p:last-child {
        align-self: flex-end;
        margin-top: 30%; /* This is for your "return home" link in the side bar. If it's too high or low, adjust the percentage. */
      }
      
      #footer {
        height: auto;
        text-align: center !important;
        width: 99%; 
      }
      
      #footer p {
        border: dotted; 
        border-width: 2px; 
        border-color: white; 
        border-radius: none;
        margin: 5px;
        width: 40%;
      }
      
      #footer div {
        max-width: auto;
        max-height: auto; 
      }
      
      /* Credit for the following a:hover "rainbow text on hover" code: https://dabblet.com/gist/1843609 (it's number 11) */
      a:hover { 
      font-variant: small-caps; 
      -webkit-background-clip: text;
      color: white;
      -webkit-text-fill-color: transparent;
      background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
      background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); 
      background-image:    -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
      background-image:     -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); 
      background-image:      -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
      border-bottom: solid 1px; 
      border-top: solid 1px;
      border-color: #FF7B74;
      }
      }
      
      a:visited {
        text-decoration: none;
        color: #FFAAA6;
      }
      
      a { 
        color: #FF7B74;
        text-decoration: none;
        font-weight: bold;
      }
      
      .box-1 {
        background-color: white; 
        background-image: url('https://jadefyre.neocities.org/images/tiles/jadefyre_rainbow_border_tile_2.png'); /* <-- make sure you save this image to your own server so you don't have a broken background in your future in case I move it! */
        background-repeat: repeat; 
        width 70%; 
        border-radius: 10px;
        margin: auto;
        padding: 20px;
      }
      
      /* Please note: I am technically still learning CSS and haven't yet figured out how to make this page display nicely on mobile. I'm working on it, though! In the mean-time, feel free to fiddle with the code below and if you can get it working, I'd be super grateful if you'd let me know so I can make the fixes. I will credit you of course! */
      
      /* vvv mobile responsiveness vvv */
      
      @media only screen and (max-width: 800px) {
      
      #flex {
        flex-wrap: wrap;
      }
      
      body {
        margin: 0;
        padding: 0;
      }
      
      #container {
        max-width: 100%;
        margin: none;
        margin-left: 20px;
      }
      
      main, aside {
        margin: none;
        max-height: none;
      }
      
      #homelink {
        margin-left: 10px;
      }
      
      #sidebox {
        max-height: auto;
      }
      
      .page {
        border: none;
      }
      
      aside {
        width: 100%;
        order: 1;      
        border:none;
      }
      
      main {
        width: 100%;
        order: 2;
        border:none;
      }
      }
    </style>
  </body>
</html>