Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Lab 1</title>
<style id="jsbin-css">
.header{
  color : SteelBlue;
}

#courseTitle {
  font-style : 'italic';
  font-size : 16px;
}

#labTitle {
  color : red;
  font-size : 14px;
}

p > strong {
  color:red;
}

line {
  stroke:SteelBlue;
  stroke-width:5px;
}

#svgbox {
  color:red;
}
</style>
</head>
<body>
  <h2 class = 'header'> Jingtian Zhou</h2>
  <h3 class = 'header'>jz3525</h3>
  <hr>
  <p id = 'courseTitle'>Data Visualization</p>
  <p id = 'labTitle'>Lab 1</p>
  <hr>
  <p>This is my <strong>first</strong> <em><strong>HTML</strong></em> page.</p>

  <svg width='400' height = '400' id = 'svgbox'>
    <rect x='55' y = '85' width='200' height = '200' style='fill:orange; stroke:black' />
    <circle cx = '150' cy = '170' r = '10' style = 'fill:green; stroke:red; stroke-width:3px'/>
    <line x1='100' y1='150' x2 ='150' y2 ='150' />
    <line x1='125' y1='150' x2 ='125' y2 ='200' />
    <line x1='127' y1='200' x2 ='107' y2 ='200' />
    <g transform='rotate(30) translate(50,-100)'>
    <line x1='175' y1='150' x2 ='225' y2 ='150' />
    <line x1='225' y1='150' x2 ='175' y2 ='200' />
    <line x1='175' y1='200' x2 ='225' y2 ='200' />
    </g>
  </svg>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Lab 1</title>
</head>
<body>
  <h2 class = 'header'> Jingtian Zhou</h2>
  <h3 class = 'header'>jz3525</h3>
  <hr>
  <p id = 'courseTitle'>Data Visualization</p>
  <p id = 'labTitle'>Lab 1</p>
  <hr>
  <p>This is my <strong>first</strong> <em><strong>HTML</strong></em> page.</p>

  <svg width='400' height = '400' id = 'svgbox'>
    <rect x='55' y = '85' width='200' height = '200' style='fill:orange; stroke:black' />
    <circle cx = '150' cy = '170' r = '10' style = 'fill:green; stroke:red; stroke-width:3px'/>
    <line x1='100' y1='150' x2 ='150' y2 ='150' />
    <line x1='125' y1='150' x2 ='125' y2 ='200' />
    <line x1='127' y1='200' x2 ='107' y2 ='200' />
    <g transform='rotate(30) translate(50,-100)'>
    <line x1='175' y1='150' x2 ='225' y2 ='150' />
    <line x1='225' y1='150' x2 ='175' y2 ='200' />
    <line x1='175' y1='200' x2 ='225' y2 ='200' />
    </g>
  </svg>
</body>
</html>

  </script>

<script id="jsbin-source-css" type="text/css">.header{
  color : SteelBlue;
}

#courseTitle {
  font-style : 'italic';
  font-size : 16px;
}

#labTitle {
  color : red;
  font-size : 14px;
}

p > strong {
  color:red;
}

line {
  stroke:SteelBlue;
  stroke-width:5px;
}

#svgbox {
  color:red;
}</script>
</body>
</html>