HaileyLawrence_assignment1

<!DOCTYPE html>
<html>
<head>
<title>Hailey Lawrence's Web page</title>
</head>
<body>
   <div id="Introduction">
       
     <div id="hello">
         <h1>h  e  l  l  o</h1>
     </div>
     
     <div id="rectangle">
           <p>My name is Hailey Lawrence & I am a Sr. Design major. I grew up in a tiny college town named Alfred in upstate New York. Alfred has one coffee shop, one traffic light & one store.</p>
     </div>

<div id="lists">
       
       <div id="aboutme">
         <p><strong>About Me_</strong></p>
         <div>
             <ul>
               <li>I lived in New Zealand</li>
               <li>I worked on a sheep farm</li>
               <li>I love old movies</li>
             </ul>
         </div>
       </div>

<div id="websites">
         <p><strong>Top Websites_</strong></p>
         <div>
          <ul>
            <li><a href="https://www.pinterest.com/">Pinterest</a></li>
            <li><a href="https://www.filmstruck.com/us/">Filmstruck</a></li>
            <li><a href="https://vimeo.com/">Vimeo</a></li>
          </ul>
         </div>
       </div>
       
       <div id="FunnyVideo">
           <p><strong>Funny Video_</strong></p>

<ul>
              <li><a href="https://youtu.be/wPOgvzVOQig">Trust Fall</a></li>
            </ul>

</div>

</body>
</html>

body {
  background-color: #FAEBD7
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 349px;
    margin-top: 0px;
}

#Introduction {
  
  background-image: url("https://i.imgur.com/GmiaJJq.jpg");
  background-size: 349px;
  position: absolute;
  top: 15px;
  z-index: 2;
  max-width: 349px;
  min-width: 349px;
  margin: 0 auto;
  left:0;
  right:0;
  height: 349px;
  margin-top: 100px;
}

#Introduction h1 {
  
  font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
  font-size: 100;
  font-weight: 100;
  color: #000000;
  letter-spacing: 7.6px;  
 }

#hello {
  position: absolute;
  left: 0;
  top: -170;
}

#Introduction img {
  position: absolute;
  left: 0;
  top: 0;
}

#rectangle {
  background-color: #FF7F50;
  color: #000000;
  max-width: 180px;
  z-index: 10;
  position: absolute;
  left: -80px;
  bottom: 10px;
}

#rectangle p {
  padding: 10% 10% 15% 10%;
  text-align: center;
  font-size: px;
  font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif
    
}
  
    
 #aboutme  {
  
  text-align: center;
  font-size: px;
  font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;

}

#websites {
 
  text-align: center;
  font-size: px;
  font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;

}

#lists {
  position: absolute;
  top: 400px;
  left: 60px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li a {
  
  color: #000000;
  text-decoration: none;
  }

li a:hover {
  color: #FF7F50;
  
}

#FunnyVideo {
  text-align: center;
  font-size: px;
  font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
    
  
  }