index.html

<!-- 
  TODO: Create a motivational post website.
Style it how ever you like. 
Look at the goal image for inspiration.
But it must have the following features:
1. The main h1 text should be using the Regular Libre Baskerville Font from Google Fonts:
  https://fonts.google.com/specimen/Libre+Baskerville
2. The text should be white and background black.
3. Add your own image into the images folder inside assets. It should have a 5px white border.
4. The text should be center aligned.
5. Create a div to contain the h1, p and img elements. Adjust the margins so that the image and text are centered on the page. 
  Hint: You horizontally center a div by giving it a width of 50% and a margin-left of 25%.
  Hint: Set the image to have a width of 100% so it fills the div. 
6. Read about the text-transform property on MDN docs to make the h1 uppercase with CSS.
  https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform 
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Meme</title>
  <style>
    body{
      background-color: black;
    }
    h1{
      text-transform: uppercase;
      font-size:3rem;
    }
 img{
  width: 100%;
  border: 5px solid white;
 }
 .hi{
  width: 50%;
  margin-left: 25%;
  margin-top: 100px;
  color:white;
  font-family: 'Libre Baskerville', serif;
  text-align: center;
 }


  </style>
  <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=Caveat&display=swap" rel="stylesheet">
</head>
<body>
<div class="hi">
  <img src="./assets/images/MV5BYzc4M2U2NTgtYTkyZi00YjI1LTk2YzItNGY0OTBlNGNiNTk1XkEyXkFqcGdeQWpnYW1i._V1_.jpg" alt="Girl looking in the mirror shocked"/>
  <h1 >THAT MOMENT WHEN YOU LOOK IN THE MIRROR</h1>
  <p >  And realise you're ugly that's why everyone leaves you</p>
</div>


</body>


</html>