MED'S AWESOME PAGE CODE 1

<!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 FAVICON HERE}">
    <title>MED'S AWESOME PAGE CODE 1</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 since this was mostly made in one day. Some general information:
  * The font used for the body is Fira Sans and the font used for links and the title is Pangolin, you may want to change it! I used Google Fonts for them lol
  * Feel free to edit to hell and back!
  * There are no scrollbars set up for text in the boxes! "Why not?" you may ask. Well, I'm on firefox and they look kinda ugly on here lol. so this is best for a quick layout that doesn't require a whole lot of text but that does have a fair amount of links
  * I have a 1280x1024 monitor! It may look different on yours :3 -->

<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:#FFDAEA;
  background-image:url({BACKGROUND IMAGE URL GOES HERE});
  font-family: 'Fira Sans', sans-serif;
}

#containment{
  margin:auto;
  width:850px;
  height:660px;
  position:relative;
  top:0px;
  }

#textbox1{
  margin:auto;
  padding:3px;
  font-size:16px;
  width:394px;
  height:194px;
  background-color:#fff;
  color:#000;
  border:2px solid #FFBBD6;
  position:absolute;
  left:10px;
  top:60px;
}

#imgbox1{
  margin:auto;
  padding:0px;
  font-size:16px;
  width:400px;
  height:200px;
  background-image:url({IMAGE FOR IMAGE BOX 1, BEST IF 400 x 200px});
  color:#000;
  border:2px solid #FFBBD6;
  position:absolute;
  right:10px;
  top:60px;
}

#textbox2{
  margin:auto;
  padding:3px;
  font-size:16px;
  width:394px;
  height:194px;
  background-color:#fff;
  color:#000;
  border:2px solid #FFBBD6;
  position:absolute;
  right: 10px;
  bottom: 160px;
}

#imgbox2{
  margin:auto;
  padding:0px;
  font-size:16px;
  width:400px;
  height:200px;
  background-image:url({IMAGE FOR IMAGE BOX 2, BEST IF 400 x 200px});
  color:#000;
  border:2px solid #FFBBD6;
  position:absolute;
  left:10px;
  bottom:160px;
}

#links{
  padding:3px;
  margin:auto;
  font-size:18px;
  width:844px;
  height:24px;
  background-color:#fff;
  color:#000;
  border:2px solid #FFBBD6;
  position:absolute;
  bottom:100px;}

h1{
  text-align:right;
  text-shadow: 2px 2px 2px #D0010161;
  font-size:50px;
  font-family: 'Pangolin', cursive;
  color:#FE3C7B;
}

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

a:hover{
  color:#FE3C7B;
}

</style>

</head>

  <body>
  <div id="containment"><h1>TESTING . . .</h1>
  <div id="textbox1"><p>This is a test box to show how much text I can fit on this text box! Wowie! SO many words! I love typing and the feeling of keyboard keys clicking under my fingers as I type a lot of text.</p><p>Everyone loves how good at typing I am, and I am a very special internet user! Yippie!!</p><p>Words! Girls love them!!!</p></div>
  <div id="imgbox1"></div>
  <div id="imgbox2"></div>
  <div id="textbox2"><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 id="links"><center><a href="#">test text</a> // <a href="#">test text</a> // <a href="#">test text</a> // <a href="#">test text</a> // <a href="#">test text</a> // <a href="#">test text</a> // <a href="#">test text</a></center></div></div>
  </body>
</html>