MED'S AWESOME PAGE CODE 3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="PUT YOUR FAVICON HERE">
    <title>MED'S AWESOME PAGE CODE 3</title>


<!--Hiya! This quick page theme was by me, Med! You can find me at tsuinosora.neocities.com. This is just a quick layout I made for personal use, credit is appreciated but not needed:
  * The font used for the body is Fira Sans and the font used for links, h1, and h2 is Pangolin, you may want to change it! I used google fonts but I'm sure there's other ways to do so.
  * Feel free to edit to hell and back!
  * You could probaby add a scrollbar for the text boxes! I chose not to because I am on Firefox and it looks ugly but feel free to add it in yourself!
  * I have a 1280x1024 monitor! It may look different on yours :3
  * Please don't copy my code directly from this page :( use my pastebin instead pls, hotlinking isn't very cash money of you -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Pangolin&display=swap" rel="stylesheet">

<style>

body{
  background-color:#FFF;
  background-image:url("BACKGROUND GOES HERE");
  font-family: 'Fira Sans', sans-serif;
}

#titletext{
  width:1163px;
  height:80px;
  margin:auto;
  padding:3px;
  position:absolute;
  top:20px;
  left:38px;
  background-position: center bottom;
  color:#000;
  border:2px outset #052141;
  box-shadow: 2px 2px 2px #aaaaaabf;
  }

#containment1{
  margin:auto;
  width:230px;
  position:absolute;
  top:129px;
  left:30px;
  }

#containment2{
  margin:auto;
  width:800px;
  position:absolute;
  top:129px;
  left:224px;
  }

#containment3{
  margin:auto;
  width:230px;
  position:absolute;
  top:129px;
  left:989px;
  }

#middle{
  margin:auto;
  padding:3px;
  font-size:16px;
  width:700px;
  background-color:#fff;
  color:#000;
  border:2px outset #052141;
  box-shadow: 2px 2px 2px #aaaaaabf;
}

#side{
  text-align:left;
  padding:3px;
  margin:auto;
  font-size:16px;
  width:200px;
  background-color:#fff;
  color:#000;
  border:2px outset #052141;
  box-shadow: 2px 2px 2px #aaaaaabf;}


#cornerimg{
  position: fixed;
  bottom:-5px;
  right:-5px;}

h1{
  text-shadow: 2px 2px 2px #aaaaaabf;
  font-size:35px;
  font-family: 'Pangolin', cursive;
  color:#fff;
}

h2{
  font-size:25px;
  font-family: 'Pangolin', cursive;
  color:#62AADA;}

a{
  font-family: 'Pangolin', cursive;
  color:#5FAFE2;
}

a:hover{
  color:#83D0FE;
}

</style>

</head>

  <body>

  <div id="titletext"><center><h1>MED'S AWESOME PAGE CODE 3</h1></center></div>
  <div id="containment1">
  <div id="side"><center>I put my hitcount up here</center></div><br>
  <div id="side">
  <a href="">link</a><br>
  <a href="">link</a><br>
  <a href="">link</a><br>
  <a href="">link</a><br>
  <a href="">link</a><br>
  <a href="">link</a><br></div><br>
  <div id="side">
  <a href="">offsite link</a><br>
  <a href="">offsite link</a><br>
  <a href="">offsite link</a><br>
  <a href="">offsite link</a><br>
  <a href="">offsite link</a><br>
  <a href="">offsite link</a><br></div></div>

  <div id="containment2"><div id="middle"><p><h2>Welcome!</h2>
  <p>Hiya!</p>
  <p>This is my index page code! The main gist of it is that there's a title box and three columns of boxes underneath, plus you can put an image in the lower right corner because of the alignment of it!</p>
  <p>The boxes don't have a predefined height, and automatically expand when you put stuff in them, and you could add more if you wanted! The side boxes are 200px with a padding of 3px and these middle boxes are 700px with a padding of 3px. You could add more boxes if you wanted!</p></div><br>
  <div id="middle"><p><h2>This is a second box</h2>
  <p><b>Wowie:</b> you could put stuff in here like updates</p>
  <p>idk man the world is yours to conquer</p></div></div>

  <div id="containment3">
  <div id="side"><center>awesome more boxes</center></div><br>
  <div id="side"><center>Aaaaaaaaaaaaaa</center></div><br>
  <div id="side"><center>do watever u want 4eva</center></div>
</div>

<div id="cornerimg"><img src={PUT CORNER IMAGE HERE}></div>
  </body>
</html>