mkfreeman/jsbin.nunoso.html

## jsbin.nunoso.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Class Exercise 1" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <!-- Create a div with an id of "top-div"-->
  <div id="top-div">

    <!-- Create an unordered list of 4 elements.
    Assign the first elements an id of "first-li"
    Assign the second and third elements a class of "middle"
-->
    <ul>
      <li id="first-li">Element 1</li>
      <li class="middle">Element 2</li>
      <li class="middle">Element 3</li>
      <li>Element 4</li>
     </ul>
    <!-- Close "top-div" and create a second div "main-div" -->
  </div>
  <div>
    <!-- Create an svg element with these settings:
        - width attribute of 400
        - height attribute of 200
        - id of "main-svg"
        - class of "my-svgs"
    -->
    <svg width=400 height=200 id="main-svg" class="my-svgs">
      <!-- Create four circle elements such that:
        - Each circle has the class "point"
        - Each circle has a different id
        - Each circle has a different radius
        - None of the circles overlap
       -->
      <circle cx=100 cy=100 id="circle-1" r=3 class="point"></circle>
      <circle cx=100 cy=120 id="circle-2" r=5 class="point"></circle>
      <circle cx=100 cy=140 id="circle-3" r=8 class="point"></circle>
      <circle cx=100 cy=160 id="circle-4" r=11 class="point"></circle>
      <!-- Close "main-svg" and "main-div" -->
    </svg>
  </div>
   <!-- Close "main-div" and create a third div "bottom-div" -->
  </div>
  <div id="bottom-div">
    <!-- Create an svg element with these settings:
        - width attribute of 200
        - height attribute of 200
        - id of "bottom-svg"
        - class of "my-svgs"
    -->
    <svg width=200 height=200 id="bottom-svg" class="my-svgs">
      <!-- Create two rectangle elements such that:
        - Each rectangle has the class "my-rects"
        - Each rectangle has a different id
        - Each rectangle has a different width and height
        - The rectangles don't overlap
       -->
      <rect x=100 y=100 id="rect-1" width=20 height=30 class="point"></rect>
      <rect x=150 y=100 id="rect-2" width=20 height=30 class="point"></rect>
      <!-- Draw a line that intersects both rectangles -->
      <line x1=50 x2=200 y1=120 y2=120 style="stroke:black;stroke-width:2px"></line>
      <!-- Close "bottom-svg" and "bottom-div" -->
    </svg>
  </div>
    <!-- Write some HTML comments below this line -->
    <!-- Here are some of my HTML comments -->


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Class Exercise 1" />
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<!-- Create a div with an id of "top-div"-->
	<div id="top-div">

	<!-- Create an unordered list of 4 elements.
	Assign the first elements an id of "first-li"
	Assign the second and third elements a class of "middle"
	-->
	<ul>
	<li id="first-li">Element 1</li>
	<li class="middle">Element 2</li>
	<li class="middle">Element 3</li>
	<li>Element 4</li>
	</ul>
	<!-- Close "top-div" and create a second div "main-div" -->
	</div>
	<div>
	<!-- Create an svg element with these settings:
	- width attribute of 400
	- height attribute of 200
	- id of "main-svg"
	- class of "my-svgs"
	-->
	<svg width=400 height=200 id="main-svg" class="my-svgs">
	<!-- Create four circle elements such that:
	- Each circle has the class "point"
	- Each circle has a different id
	- Each circle has a different radius
	- None of the circles overlap
	-->
	<circle cx=100 cy=100 id="circle-1" r=3 class="point"></circle>
	<circle cx=100 cy=120 id="circle-2" r=5 class="point"></circle>
	<circle cx=100 cy=140 id="circle-3" r=8 class="point"></circle>
	<circle cx=100 cy=160 id="circle-4" r=11 class="point"></circle>
	<!-- Close "main-svg" and "main-div" -->
	</svg>
	</div>
	<!-- Close "main-div" and create a third div "bottom-div" -->
	</div>
	<div id="bottom-div">
	<!-- Create an svg element with these settings:
	- width attribute of 200
	- height attribute of 200
	- id of "bottom-svg"
	- class of "my-svgs"
	-->
	<svg width=200 height=200 id="bottom-svg" class="my-svgs">
	<!-- Create two rectangle elements such that:
	- Each rectangle has the class "my-rects"
	- Each rectangle has a different id
	- Each rectangle has a different width and height
	- The rectangles don't overlap
	-->
	<rect x=100 y=100 id="rect-1" width=20 height=30 class="point"></rect>
	<rect x=150 y=100 id="rect-2" width=20 height=30 class="point"></rect>
	<!-- Draw a line that intersects both rectangles -->
	<line x1=50 x2=200 y1=120 y2=120 style="stroke:black;stroke-width:2px"></line>
	<!-- Close "bottom-svg" and "bottom-div" -->
	</svg>
	</div>
	<!-- Write some HTML comments below this line -->
	<!-- Here are some of my HTML comments -->


	</body>
	</html>