Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.body{
  background-color:white
}
.header {
  color:Green;
}
.courseTitle {
  font-style: italic;
  font-size: 16px;
}
.LabTitle {
  font-size: 14px;
  color:Red;
}
p > strong{
  color:cornflowerBlue;
}
line {
  stroke:cornflowerblue;
  stroke-width: 5px
}
</style>
</head>
<body>
  <h2 class="header">Nathan B. Caplan</h2>
  <h3 class="header"><color="green">nbc270</h3>
    <hr>
  <p class="courseTitle">Data Visualization</p>
  <p class="LabTitle">Lab 1</p>
    <hr>
    <p>This is my <strong>first </strong><em><strong>HTML</strong></em></p>

<svg width="400" height="400">
<!--  <circle cx="50" cy="50" r="28" style ="fill:cornflowerblue; stroke:red; "/>

  <path d="M 200 10 L 300 10 L 300 50 Z"
        style="fill:none; stroke:red; stroke-width:5px;"/>
-->
  <rect x="0" y="0" width="180" height="200" style="fill:orange; stroke-width:3px; stroke:black" /></rect>
  <g transform="rotate(20) translate(85,40)">
  <line x1="5" y1="50" x2="5" y2="100"></line>
  <line x1="5" y1="50" x2="50" y2="100"></line>
  <line x1="50" y1="50" x2="50" y2="100"></line>
  </g>

  <circle cx="100" cy="75" r="28" style ="fill:none; stroke:cornflowerblue; stroke-width:5px "/>
  <rect x="110" y="10" width="50" height="100" style="fill:orange; stroke=white" /></rect>
  <circle cx="50" cy="50" r="20" style ="fill:yellow; stroke:purple; "/>
 <svg>


<script id="jsbin-source-css" type="text/css">.body{
  background-color:white
}
.header {
  color:Green;
}
.courseTitle {
  font-style: italic;
  font-size: 16px;
}
.LabTitle {
  font-size: 14px;
  color:Red;
}
p > strong{
  color:cornflowerBlue;
}
line {
  stroke:cornflowerblue;
  stroke-width: 5px
}
</script>
</body>
</html>