HTML, CSS and JavaScript playground

<html>
<head>
<title>Yunfei Xie</title>
</head>
<body>
  <div id="Title">
    <h2>What IxD means to me</h2>
  </div>
  
  <div id="MydesignDream">
     <p id="gooddesigntext"> For me, a good interactive design must demonstrate the value of the product. Depends on the definition of products, a good design should interact with users identifiable. It must fully consider the user experience, during the interacting process.  Also, the information should be accepted easily, which means interactive design also should be friendly for users</p>
       <h1>My Design Dream</h1>
       <br><br><br>  
          <a href="https://www.youtube.com/watch?v=W75jr0RhVhQ"><img src="https://www.nintendo.com/switch/assets/images/switch/facebook.jpg"  width="300" height="150" controls></a>
             <p id="gooddesigntext"> I want to combine reality and virtuality in my design for my users. Just like Nintendo Switch, when people play digital games, they can still experience the sense of ritual and reality.</p>
  </div>
  
   <div id="Mylifephotos"> 
      <h3>Cool Design</h3>
     <br> <br> <br>
      <ul>
        <li><h5 id="gooddesigntext">Love Has No Labels: Skeletons Kiss Behind Screen</h5></li>
        <img src="https://lovehasnolabels.com/wp-content/uploads/2018/08/lhnl_share.png" width="240" height="240" controls>
        <a href="https://www.youtube.com/watch?v=mv-htkf21P0">See More</a>

<p id="gooddesigntext">Every day, we have the ability and opportunity to create a more accepting world. Even small acts of inclusion can have a big impact on making others feel accepted. The ideal is so simple.</p><br><br><br><br>
     <li><h5 id="gooddesigntext">Fenwick MusÃ©e Virtuel
 </h5></li><br>
        <img src="https://assets.awwwards.com/awards/submissions/2018/09/5bab98a35b67a.jpg" width="400" height="240" controls><a href="https://www.histoire-chariots-fenwick.fr/">See More</a>
        <p id="gooddesigntext"> An immersive and sensory site in which the story advances as the user progresses in this virtual museum. Really beautiful story telling and unusual navigation design.The animation is also really high-quality.</p><br><br><br><br>
     <li><h5 id="gooddesigntext">VIITA TITAN HRV </h5></li><br>
        <img src="https://ksr-ugc.imgix.net/assets/022/356/147/1b16707fdc3f187df303c5a8166c3ab1_original.png?ixlib=rb-1.1.0&w=680&fit=max&v=1535362353&auto=format&gif-q=50&lossless=true&s=dedce02de3f283dfd0126a08a445f409" width="280" height="280" controls><a href="https://titan.viita-watches.com/en/">See More</a>
        <p id="gooddesigntext"> Typography design has been combined in this website perfectly. The animation is so natural and fluency.</p>
        <br><br>
         </ul>
  </div>
</body>

body {
  background-color: #FAFAD2
}

#Title {
     background-image: url("https://www.gifvideo.net/files/photos/2017/11/animation-by-james-hazael.gif");
  background-size: 400px;
  position: absolute;
  top: 15px;
  z-index: 2;
  max-width: 400px;
  min-width: 400px;
  margin: 0 auto;
  left:0;
  right:0;
  height: 150px;
  margin-top: 100px;
    
  }
h2{ position: absolute;
    left: 50;
    top: -50px;  
    font-size: 180%;
    font-family: "Helvetica";
    color: white;
    background-color: #000000}
 
#introduction {
    position: absolute;
    top: 350px;
    left: 100px;
}
 #gooddesigntext  {
  
    text-align: center;
    font-size: px;
    font-family:"Courier New", Helvetica, Arial, sans-serif;

}
#MydesignDream {
 
  position: absolute;
  top: 180px;
  z-index: 2;
  max-width: 400px;
  min-width: 400px;
  margin: 0 auto;
  left:0;
  right:0;
  height: 50px;
  margin-top: 100px;
}
h1 { position: absolute;
    left:80;
    top: auto;  
    font-size: 180%;
    font-family: "Helvetica";
    color: white;
    background-color: #000000;
}

#Mylifephotos {
 
  position: absolute;
  top: 750px;
  z-index: 2;
  max-width: 400px;
  min-width: 400px;
  margin: 0 auto;
  left:0;
  right:0;
  height: 50px;
  margin-top: 100px;
}

h3 { position: absolute;
    left:100;
    top: auto;  
    font-size: 180%;
    font-family: "Helvetica";
    color: white;
    background-color: #000000;
}