<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Spankie's Intro</title>
    <link href="styles/style.css" rel="stylesheet" />
    <link
      href="https://fonts.googleapis.com/css?family=Merriweather&display=swap"
      rel="stylesheet"/>
      <style>
        ul {
          list-style: none;
        }
      
        ol {
          list-style: none;
        }
      </style>
  </head>
  <body class="first">
    <section class="center">
      <h1>Spankie B. Hungry</h1>
      <img
        src="https://i.imgflip.com/as2y2.jpg"
        width="400"
        height="400"
        alt="shocked monkey in a green polks dot shirt"
      />
      <p>This is Spankie</p>
      <p>
        You notice that Spankie is a littled shocked that you showed up without
        anything to eat. After all, you know that no one will sell him a mask so
        he can go out shopping.
      </p>
      <p>However, there is a solution:</p>
      <ul>
        <li>Go to Walmart</li>
        <br />
        <li>buy some madeleines <br />(they're his favorite)</li>
        <br />
        <li>
          <b><i>Feed the Monkey!</i></b>
        </li>
      </ul>
      <p>
        If you don't have a mask yourself, you can always go online to <br/>
        
        <a href="https://www.amazon.com/">Amazon</a> 
        
        <p>Just make sure to
        ship the madeleines to his address.
      </p>
    </section>

  <footer class="row">
        <section class="column">
      <img class="left" src="http://1.bp.blogspot.com/-lnVcvfUAyRk/UgyCuTuIsjI/AAAAAAAAFDQ/YQHylsAmqJQ/s1600/9.+Thinking.jpg" alt="baboon-left" style="width:100%">
  </section>
      <section class="column">
      <img class="lotr" src="https://img.memecdn.com/lord-of-the-bananas_o_894338.gif" alt="LOTR-Banana" style="width:100%">
    </section>
    <section class="column">
      <img class="right" src="http://1.bp.blogspot.com/-lnVcvfUAyRk/UgyCuTuIsjI/AAAAAAAAFDQ/YQHylsAmqJQ/s1600/9.+Thinking.jpg" alt="baboon-right" style="width:100%">
  </section>           
   </footer>
  </body>
</html>

html {
  font-size: 10px;
  font-family: 'Merriweather', serif;
  background-color: blue;
}

.first {
  align-content: center;
  width: 75%;
  margin: 10% auto;
  background-color: gold;
}

h1 {
  margin: 0;
  font-size: 40px;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px rgb(221, 18, 18);
}

p {
  padding-left: 5%;
  padding-right: 5%;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 2px;
}

li {
  font-size: 25px;
  line-height: 1;
  letter-spacing: 2px;
}
.center {
  text-align: center;
}
img {
  width: 200px;
  height: 200px;
}
.column {
  float: left;
  width: 32.25%;
  padding: 5px;
}

.row::after {
  content: "";
  clear: both;
  display: flex;
}
.left{
  margin-left: 9px;
  z-index: -1
}
}
.lotr{
  margin-left:50px;
  }
.right{
  margin-left: -8px;
 z-index: -1
   -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.first {
  background: -webkit-linear-gradient(bottom right, blue, gold);
  background: -moz-linear-gradient(bottom right, blue, gold);
  background: -ms-linear-gradient(bottom right, blue, gold);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.