HTML, CSS and JavaScript playground

<html lang="en">
	<head>
		<title>What does IxD Mean to me?</title>		
	</head>
	<body>
     <div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">I am Kyle An</h1>
    <h3>And I'm a designer</h3>
    
  </div>
</div>
		<header>
          
            <h1>What does Interactive Design mean to me?</h1>
        
          
         
        </header>
      
        <div class="thin-grey-border">
          <div class="top-paragraph">
           <center> <img src="http://aureliano.com/archivos/cerebro-ux-ui-1.png"/></center>
            
          <box1>Interactive Design attempts to solve the problem of getting users to interact in an easy and intuitive way to produce an emotional response.  Interactive design is finding an answer to a problem which exists and the end user ultimately shows the designer if they have correctly solved the problem or not.   
          </box1> 
          <box1>Good interactive design should not make user confused when they are look at it. People think interactive desing is only about the product looking <strong>"pretty"</strong> or if it has a nice design.  Interactive design goes way farther below the surface of the looks to create a unique experience for the users.   
          </box1>
        </div>
      </div>
      
      <box2>
        
       
        
         <h2>If I am a design guru, what would I make? </h2></box2>
        
<iframe src="https://giphy.com/embed/NTTYWCAq75w1sWaGqa" width="800" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>

<p></p>
        
        <box2>
           In the future, I would like to work on more interactive designs with voice input, like Siri, Alexa, and Cortana.  This is really the future of interactive design.  Our voice is a strong, powerful tool, even more powerful then typing on a keyboard or using a mouse.  People who are unconfortable using a computer, can easily use there voices.  However, the experience needs to come alot father along.  How many times have you asked Siri or Alexa a question that you think is simple to answer, and both of them have no idea what you're asking?  I would love to make a new virtual assistance closer to<strong> "Her"</strong>, someone who is always grwoing and learning based on the individual person rather than some pre-programmed answers or expressions.

</box2>
        
        
      <div class="box-clear"></div>
      
         
         <hr>
         
      
         <div style="width:100%;height:0;padding-bottom:75%;position:relative;"><iframe src="https://giphy.com/embed/H5ZdvZpxVZbTW" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
        
        <h2>Three good examples of interaction </h2>
        <ul>
        <li>Pillpack</li>
        <li>Trello</li>
        <li>Apple</li>
        </ul>
          
          
          <div class="row">
          <div class="column">
         <a href="https://www.ideo.com/case-study/growing-an-online-pharmacy-from-startup-to-sale" alt="pillbox" ><img src="https://i.imgur.com/QRaTNdt.jpg" width="300" height="250" ></a>
          </div>
          <div class="column">
          <a href="https://blog.trello.com/how-design-teams-are-using-trello-ultimate-guide" alt="trello" >
            <img src="https://i.imgur.com/4FZwU7o.png" width="300" height="250"></a>
          </div>
          <div class="column">
          <a href="https://www.apple.com" alt="apple" >
          <img src="https://i.imgur.com/zzzgNRE.png" width="300" height="250">
          </a>
          </div>
          </div>
        
        
        </body>

.thin-grey-border {
      border-color: #A9A9A9;
      border-width: 1px;
      border-style: 10px; }
   
.photo-sphere {
    border-color: #A9A9A9;
    border-width: 3px;
    border-style: solid;
    border-radius: 50%;
  }
  
.small-image {
    width: 100px;
  }
  
h1 {color:#000000;
	  font-size: 35px; 
      font-family: "Courier New", Courier, monospace;
	  padding: 1px;
      margin: 5px 0 0 10px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  
  }
  
h2 {color:#000000;
	  font-size: 26px; 
      font-family: "Courier New", Courier, monospace;
	  padding: 1px;
      margin: 5px 0 0 10px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 60px;
  
      
  }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
 
}

.hero-image {
  background: url(https://i.pinimg.com/originals/ce/20/b3/ce20b3b29dc38051ce94ee4ed9c8220d.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

h3 {color:#A9A9A9;
	  font-size: 18px; 
      font-family: "Courier New", Courier, monospace;
	  padding: 1px;
      margin: 5px 0 0 10px;
  text-align: center;
  
  }
  
    
  
  
  
  
.top-paragraph {color:#A9A9A9;
	  font-size: 18px; 
      font-family: "Courier New", Courier, monospace;
	  padding: 1px;
      margin: 5px 0 0 10px;
 
}
box1{
			font-size: 18px; 
            font-family: "Courier New", Courier, monospace;
            
            float:left;
			width:450px;
			height:200px;
	        padding-top:4px;
			border: 2px;
            border-radius: 25px;
			padding-left: 110px;
            text-align: left;
    }		      
box2{
			font-size: 18px; 
            font-family: "Courier New", Courier, monospace;
            padding-top: 30px;
            float:left;
			width:800px;
			height:200px;
	      
			border: 2px;
            border-radius: 25px;
			padding: 10px;
    }

.box-clear {
    
    clear: left;
}

hr { 
    display: inherit;
    margin-top: 2em;
    margin-bottom: 1em;
    margin-left:300px;
    margin-right: 10%;
    border-style: inset;
    border-width: 2px;
    
}
* {
    box-sizing: border-box;
}

.column {
    float: left;
    width: 33.33%;
    padding: 5px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}