Snagen's Coffee Drinker Template

Go Home Don't Click Do Click Creature

My Castle Town - Toby Fox

Artist: Shaarkbait

This is the demo page for my free-to-use template, Coffee Drinker! It should work fine on both mobile and desktop.

If you imported everything correctly and haven't modified anything, it will look like this.

Rules

Feel free to modify and frankenstein to your preference!
Do not remove credit. You may move it to a different area of the page, but it still needs to be clearly visible.
If you want to share a modified version with others, make it clear that the template was made by me & link back. You may only provide it for COMPLETELY free and may not lock it behind a paywall or otherwise profit off of redistributing or modifying my code.
Do not hotlink the original images from my site, please upload them to your own site instead!

HTML

<!DOCTYPE html>
<html>
  <head>
  <!--
  *********************************************************************************************************************************
  *********************************************************************************************************************************

SNAGEN'S COFFEE DRINKER TEMPLATE
    
    RULES:
      1. Feel free to modify and frankenstein to your preference!
      2. Do not remove credit. You may move it to a different area of the page, but it still needs to be clearly visible.
      3. If you want to share a modified version with others, make it clear that the template was made by me & link back.
      You may only provide it for COMPLETELY free and may not lock it behind a paywall or otherwise profit off of redistributing
      or modifying my code.
      4. Do not hotlink the original images from my site, please upload them to your own site instead!

*********************************************************************************************************************************
  *********************************************************************************************************************************
  -->
  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link href="/pages/resources/coffee/tempdemo.css" rel="stylesheet" type="text/css" media="all">
    <link rel="stylesheet" href="https://furryring.neocities.org/onionring.css">
  </head>
  <body>
    <div class="page">
    
      
      <div class="header">
        <h1>Page Title</h1>
        <p>Add a warning here or just delete it!</p>
      </div>
      
      
      <div class="shelf">
        <a href="/index">Home</a>
        
      </div>
      
      
      <div class="small">
        <span>
          <div id="music">
            <audio loop controls style="max-width: 100%;"><source src="MUSIC FILE HERE" type="audio/mp3">If you can see this, your browser doesn't support the audio element.</audio>
            <br><font size="2"><em>artist + track name</em></font>
            
          </div>
        </span>
      
      </div>
      
      
      
      <div class="pagedoll">
        <img src="URLHERE" alt="IMG DESC HERE">
        <em>Artist: <a href="ARTIST URL HERE" target="_blank">ARTIST</a></em>
      </div>
      
      
      <div class="big">
      
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dui sed tellus rutrum vestibulum. Quisque porttitor vehicula est eget aliquam. Vivamus diam enim, lobortis euismod euismod id, consequat eget est. Etiam a dolor vitae orci tempor aliquam et a turpis. Vestibulum ultrices erat tortor, vel mollis ante posuere quis. Praesent lacinia imperdiet sapien et iaculis. Fusce pulvinar, enim vitae fringilla volutpat, leo mi vulputate arcu, sit amet vehicula ex felis vel sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus vitae est nec felis faucibus interdum. Nam scelerisque enim quis dui aliquam tempor. Praesent maximus, est id sollicitudin rhoncus, lorem ipsum venenatis urna, eget eleifend lorem lectus id quam. Donec purus ipsum, lacinia sed ligula vel, luctus iaculis tellus. Sed in condimentum justo. Vivamus at erat eu elit ultrices iaculis quis hendrerit justo. In lacinia non libero vitae fermentum.</p>
      <p>Sed enim augue, condimentum eget justo a, dictum porttitor urna. Curabitur eu sagittis augue. Suspendisse maximus id nisi sit amet sagittis. Nulla sodales mi vel leo lacinia, vitae ultricies tellus tincidunt. Aenean luctus vitae risus sed sagittis. Aenean lacinia suscipit dolor, vitae iaculis leo scelerisque ac. Etiam ex lorem, eleifend ut massa vitae, sollicitudin tincidunt tellus.</p>
      </div>
      
      
      
      <div class="footer">
        
         Template by <a href="https://spicedsnake.gay" target="_blank">Snagen</a>
      </div>
      
    </div>
  </body>
</html>

CSS

/*********************************************************************************************************************************
**********************************************************************************************************************************

/****************************************
        FONTS
****************************************/
@font-face {
  font-family: 'blooming';
  src: url('FONT URL'); /* Font download here: http://www.publicdomainfiles.com/show_file.php?id=13487098289211 */
}
@font-face {
  font-family: 'bromine';
  src: url('FONT URL'); /* Font download here: http://www.publicdomainfiles.com/show_file.php?id=13949888837211 */
}

/****************************************
        BASICS
****************************************/

body {
  /* Text */
  font-family: bromine;
  color: peru;
  text-align: center;
  
  /* Background */
  background-color: sienna;
  background-image: url('BG URL HERE'); /* Image download here: https://www.pexels.com/photo/open-book-and-a-cup-of-coffee-9463153/ */
  background-attachment: fixed;
  background-size: cover;
  padding: 0;
  margin: 0;
}
h1,h2,h3,h4,h5,h6 {
  font-family: blooming;
}

hr {
  border-color: seagreen;
}

a {
  color: seagreen;
  text-decoration: none;
}
a:hover {
  color: #56bfa1;
}

/****************************************
        DIVS
****************************************/

.page {
  /* Alignment */
  margin-left: auto;
  margin-right: auto;
  
  /* Grid */
  display: grid;
  
  /* Background */
  background-color: rgba(255,239,213,90%);
  border-radius: 10px;
}
.page .header {
  grid-area: header;
  background-color: #000;
  background-color: #211c1c;
}
/* Nav */
.page .shelf {
  grid-area: shelf;
  background-color: #3d3636;
}
.page .shelf a {
  border-radius: 5px;
}
.page .shelf a:hover {
  color: #3d3636;
  background-color: seagreen;
}
.page .shelf #alert {
  text-transform: uppercase;
  font-family: blooming;
}
.page .pagedoll {
  grid-area: pagedoll;
}
.page .small {
  grid-area: small;
}
.page .big {
  grid-area: big;
}
.page .footer {
  grid-area: footer;
  background-color: #211c1c;
}

/****************************************
        DESKTOP-SPECIFIC
****************************************/

@media screen and (min-width: 800px) {
  
  /* Body */
  body {
    font-size: 13pt;
  }
  
  /* Page Container */
  .page {
    grid-template-areas: 
    'header header header header'
    'shelf small pagedoll pagedoll'
    'shelf big big big'
    'shelf footer footer footer';
    width: 800px;
    margin: 50px auto;
  }
  
  /* Header */
  .page .header {
    border-radius: 10px 10px 0px 0px;
  }
  /* Navbar */
  .page .shelf {
    padding: 10px 20px;
    border-radius: 0px 0px 0px 10px;
  }
  .page .shelf a {
    display: block;
    padding: 15px 10px;
  }
  
  /* Music & Webring */
  .page .small {
    padding: 10px;
  }
  .page .small #furryring {
    margin-top: 15px;
  }
  .page span {
    position: relative;
    top: 25%;
  }
  
  /* Pagedoll */
  .page .pagedoll {
    padding: 5px;
  }
  .page .pagedoll img {
    max-width: 100%;
  }
  
  /* Main Text */
  .page .big {
    padding: 15px;
  }
  .page .big #furryring {
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Footer */
  .page .footer {
    border-radius: 0px 0px 10px 0px;
    padding: 15px 10px;
  }
}

/****************************************
        MOBILE-SPECIFIC
****************************************/

@media screen and (max-width: 800px) {
  .page {
    grid-template-areas: 
    'header'
    'shelf'
    'pagedoll'
    'small'
    'big'
    'footer'
    ;
    margin: 20px 5px;
  }
  
  /* Header */
  .page .header {
    border-radius: 5px 5px 0px 0px;
    padding: 15px;
  }
  /* Nav */
  .page .shelf {
    padding: 10px;
    line-height: 25px;
  }
  .page .shelf a {
    padding: 5px 8px;
  }
  
  /* Small Box */
  .page .small {
    padding: 15px;
  }
  .page .small #music {
    margin-top: 25px;
  }
  .page .small #furryring {
    margin-top: 25px;
  }
  
  /* Pagedoll */
  .page .pagedoll img {
    max-width: 100%;
  }
  
  /* Big Box */
  .page .big {
    padding: 15px;
  }
  
  /* Footer */
  .page .footer {
    padding: 15px;
    border-radius: 0px 0px 5px 5px;
  }
}