Pomp and Circumstance Template

<!DOCTYPE html>
<html>
  <head>


  <style>

/* Pomp and Circumstance V.1.0 Template, send any questions to [email protected]! Powered by yerba mate and autism. */


/* Changes to .grid style reflect across both main and side
IE if you change the background-color to white both main and side will have white backgrounds */
.grid {
    display: grid;
    background-color: #fff6f9;
    max-width: 1200px;
    color: #d62b3d;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 0px;
}

/* Changes to main style will reflect only on main not on side
Has a border-right property be half of the border property so together main and side look like they only have one border
Scrollbar color and width can be changed here */
.main {
  grid-area: 1 / 1 / 2 / 5;
  padding: 0px;
  margin: 0px;
  border: 6px solid #f8c7dd;
  border-right: 3px solid #f8c7dd;
  text-align: left;
  font-family: "ms ui gothic";
  font-size:16px;
  max-height: 785px;
  overflow-y: scroll;
  scrollbar-color: #efc815 #d62b3d;
  scrollbar-width: thin;
}

/* Same as the above */
.side {
  grid-area: 1 / 5 / 2 / 6;
  padding: 0px;
  padding-top: 6px;
  margin: 0px;
  font-family: "ms ui gothic";
  font-size: 18px;
  border: 6px solid #f8c7dd;
  border-left: 3px solid #f8c7dd;
  text-align: left;
}

/* Changes the text at the top of the page
displayed on top of grid */
.title  {
  max-width: 1200px;
  color: #f8c7dd;
  font-family: "ms gothic";
  font-size: 80px;
  margin: 0;
  padding: 0;
  margin-bottom: -20px;
  text-align: left;
}

/* Change link colors */
a:link {
  color: #efc815;
  background-color: transparent;
  text-decoration: underline;
}

/* Change link colors on already visited links */
a:visited {
  color: #efc815;
  background-color: transparent;
  text-decoration: underline;
}

/* This media query is responsible for making the website functional on mobile
At 600px of less side will display below main */
@media only screen and (max-width: 600px) {
  .main {grid-area: 1 / span 5;}
  .side {grid-area: 2 / span 5;}
}

/* Body properties
I did most of this on grid instead of body
so this is only here for the background and to remove excess padding and margins */
      body {background-image: url('BACKGROUND URL');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            margin: 0;
            padding: 0;
            }

/* This is what makes the icon displayed on side have rounded corners */
  .icon {
border-radius: 50px;
}

/* A div that is the same color as the border
I called it navigation but it can be called anything else */
.navigation {
  margin: 0;
  padding-left: -10px
  padding-right: -10px
  padding: 0;
  font-family: "ms gothic";
  background-color: #2ca5dd
}

/* This makes the randomText display properly */
.randomText {
  font-size:25px;
  font-family:"ms gothic";
  font-weight: bold;
}

/* Change the bullet points for ul here */
  ul {
    padding-left: 30px;
    list-style-type:"★";
  }

/* Style h1 here */
  h1 {
    font-size:25px;
    font-family:"ms gothic";
  }

/* Style h2 here */
h2 {
  font-size:18px;
  font-family:"ms gothic";
  padding: 10px;
  margin-top: -20px;
}


</style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TITLE</title>
      <link rel="icon" type="image/x-icon" href="FAVICON URL">
  </head>

  <body style="background-color:white;">


<center>

<div class="title">TITLE</div>

<div class="grid">
    <div class="main">

  <center><strong><h1>SECONDARY TITLE</h1></strong></center>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    </div>

    <div class="side">
    <center><img class= "icon" src="ICON URL" style="max-width:95%;height:auto;">

    <h1> LINKS </h1></center>

    <nav>
    <ul>
    <li>LINK 1</li>
    <li>LINK 2</li>
    <li>LINK 3</li>
    <li>LINK 4</li>
    <li>LINK 5</li>
    <li>LINK 6</li>
    <li>LINK 7</li>
    </ul>
    </nav>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <center><p style="font-size: 16px;"> Template by <a href="https://recarmdra.neocities.org/">recarmdra</a></p></center>


    </div>
</div>
</center>
  </body>
</html>