HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
<title>What IxD means to me</title>
</head>
 <style>
 center {
 margin: 20;
 }
 </style>
 
 <body class="container">
 <div class="ME"> What'IxD'means to me</div>
 <div>
 What is good interaction design? 
 If a person who hasnâ€™t learned about design (is not interested in design) uses something, and cannot find anything, that is good interactive design. Because, the fact that a person cannot find anything means that he or she doesnâ€™t feel any inconvenience, and cannot find any problems. Probably the person who designed that is a talented problem-solver which means a good interactive designer. Interactive designers especially UX designers cannot give audience(users) a super impressive visual like artworks in galleries, but their designs plays a very important role, even though people canâ€™t look recognize it.
 
 </div>
 If you were a coding and design guru who could create anything singlehandedly, what would you make?
 I want to do my own exhibition. I will hold my exhibition which people aren't just viewing and listening passively but can interact with my artwork. I want to make audiences curious and fall into my work. 
 
 <div>
 Three examples of interaction design that I found 
 
 1.LINES - an Interactive Sound Art Exhibition
 <video class="video" width="560" height="315" controls src="https://www.youtube.com/embed/hP36xoPXDnM" allow="autoplay; encrypted-media" allowfullscreen margin="20"> </video>
 LINES is an interactive sound art exhibition created by Swedish composer Anders Lind in 2016. Lines attached to the wall, on the floor and hanging from the ceiling in combination with sensors and electronics are forming three novel music instruments. No musical experiences are required to perform, while the well-experienced musician or composer finds new musical challenges and opportunities with the instruments. The ambition with LINES is to enable: new forms of musical interaction, an exploration of new artistic expressions and to provide unique and inspiring musical experiences.
 
 
 2.Music Playing Wall - Interactive media wall
 <video class="video"width="560" height="315" controls src="https://www.youtube.com/embed/RG5Fi-eCLbc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen ></video>

Music Playing Wall, a fun Interactive touch wall painted with instruments recognizes hand touch, plays the sound of instruments and maps colors. Children can easily play various kinds of instrument without physical constraints. An painting of musical instruments feels like a real instrument to play music. â€˜PLAYDODOâ€™ is a kidâ€™s convergence playground created by combining future-oriented technology and imaginative idea for a new experience theyâ€™ve never had. Our services are running on the â€œTangible experience contentsâ€œ, based on the "Multiple Intelligences" and â€œPatterns of behaviorâ€. It could be providing a 'new experience' for children, and by analyzing a 'experience dataâ€˜. 'Convergence Playground' is identify 'strengths intelligence' of children.

3.The mood reflecting floor - Interactive design floor
 <video class="video"width="560" height="315" controls src="https://www.youtube.com/embed/JOg4chJAn8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></video>
 
 The mood reflecting floor is an experimental interactive project dealing with human emotions.
The floor designed to pick up different body languages and react some what like fish in a pond. Agitated and angry moods expressed by fast and sharp movements will scare away the floor, while calm and relaxed moods, expressed by slow and calm movements, will draw the floor towards the user. The floor can also help change the user mood by showing playfulness and interacting more like a game of catch.
 
 What I found inspiring about these projects
 <ul class="Not">
 <li>Not only adults but also children love this. Audience can enjoy this not only by individual but also by group </li>
 <li>People can create their own artwork by this artwork</li>
 <li>These days, artworks which people just simply stand and see is not that attractive and competitive</li>
 </ul>
 </div> 
 
</body>
</html>

.container {
  font-size: 30px;
  font-family: monospace;
  border-color: black;
  border-width: 15px;
  border-style: solid;
  background-color : linen;
  
}

.ME {
  margin: 20;
  border-color: black;
  border-width: 3px;
  border-style: dotted;
  text-align: center;
}

.T { 
  font-size: 40px; 
  font-family: monospace; 
  color: #29A8C9;
  margin: 20;
  text-decoration: underline;}

.P {
  font-size: 20px;
  font-family: "Open Sans", Tahoma, sans-serif;
  margin: 20;
  line-height: 1.5;
  background-color: #F5DEB3;
  Padding: 15;}

.I {
  font-size: 40px; 
  font-family: monospace; 
  color: #29A8C9;
  margin: 20;
  text-decoration: underline;}

.F { 
  font-size: 40px; 
  font-family: monospace; 
  color: #29A8C9;
  margin: 20;
  text-decoration: underline;}

.Lines {
  Font-size: 30px;
  Font-family:  monospace;
  color: #EA767A;
  margin: 20;
}

.What {
  Font-size: 20px;
  Font-family: "Open Sans", Tahoma, sans-serif;
  margin: 20;
}

.Not {
  Font-size:  20px;
  Font-family: "Open Sans", Tahoma, sans-serif;
  margin: 20;
  list-style-type: square;
}

.Wall {
  Font-size: 30px;
  Font-family:  monospace;
  color: #EA767A;
  margin: 20;
}

.video {
  margin: 20;
  style: center;
}