D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mushon
Full window
Github gist
Miriam's modified tutorial html + css files
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>How to Make an Origami Bunny</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> <link rel="stylesheet" href="css/my-styles.css" type="text/css" media="screen, projection"> </head> <body> <div class="container"> <div id="introduction" class="span-4"> <p> The word origami comes from the Japanese words 'Oru' and 'Gami', which mean 'folding' and 'paper' respectively. There are many hundreds of thousands of shapes that a seasoned Origami practitioner can create using the standard square sheet of Origami paper. In this tutorial, you will learn how to create the shape of a bunny using only one piece of paper, the nimbleness of your young mind and fingers, and the power of your own breath </p> </div> <div id="content" class="span-18 append-2 last"> <div id="header"> <h1> How to Make an Origami Bunny </h1> <h2> A Tutorial </h2> </div> <div id="Steps"> <ol> <li class="step-1"> <div class="image box"> <img src="https://a.parsons.edu/~hierm158/images/step1.jpg" alt="step1"> </div> <div class="caption"> </div> <div id="Step-1"> <p> To begin your bunny, you must have a single piece of origami paper. </p> </div> </li> <li> <div class="image box" <img src="https://a.parsons.edu/~hierm158/images/step2.jpg" width= "225" height= "151" alt= "step2"> <img src="https://a.parsons.edu/~hierm158/images/step3.jpg" width= "225" height= "151" alt= "step3" </div> <div class="caption"> </div <div id= "Step-2" <p> The second step in creating the origami bunny is to fold the necessary creases into the sheet. You do this by folding the sheet in half horizintally, vertically, and diagonally in both directions. You will create a star shape.</p> </div </li> <li> <div class="image box" <img src="https://a.parsons.edu/~hierm158/images/step4.jpg" width= "225" height= "151" alt="step 4"> <img src="https://a.parsons.edu/~hierm158/images/step5.jpg" width= "225" height= "151" alt="step5"> <p>Step 3 involves folding the creased sheet of origami paper into a triangle by bringing the center of each of the side edges into the center of the bottom edge. <p> </div> </li> <li> <div class="image box" <img src="https://a.parsons.edu/~hierm158/images/step6.jpg" width= "225" height= "151" alt="step6"> <p>In this step, the two side tips of the top triangle should be folded in to the top tip. <p> </div> </li> <li> <div class="image box" <img src="https://a.parsons.edu/~hierm158/images/step7.jpg" width= "225" height= "151" alt="step7" <p>The two flaps of the top tip should now be folded into the pockets created by the previously folded side tips.<p> </div> </li> <li> <div class="image box" <img src="https://a.parsons.edu/~hierm158/images/step8.jpg" alt=step7" width= "225" height= "151" alt="step7" <p>Flip the triangle over.<p> </div> </li> <li> <div class="image box" <img src="https://a.parsons.edu/~hierm158/images/step9.jpg" width= "225" height= "151" alt="step9" <p> Fold the tips in to create a triangle.<p> </div> </li> <li> <div class="image box" <img src="https://a.parsons.edu/~hierm158/images/step10.jpg" width= "225" height= "151" alt="step10" <p>Turn the right tip of the diamond to the left. <p> </div> </li> <li> <div class="image box" <img src= "https://a.parsons.edu/~hierm158/images/step12.jpg" width= "225" height= "151" alt="step12" <p> Fold the left tip to the right <p> </div> </li> <li> <div class="image box" <img src= "https://a.parsons.edu/~hierm158/images/step14.jpg" width= "225" height= "151" alt="step14" <p>Continue folding until all tips are folded into the center.<p> </div> </li> <li> <div class= "image box" <img src="https://a.parsons.edu/~hierm158/images/step15.jpg" width= "225" height= "151" alt=step15 <img src="https://a.parsons.edu/~hierm158/images/step16.jpg" width= "225" height= "151" alt=step16 <p> Fold up the "ears" of the bunny and flatten. </div> </li> <li> <div class="image box" <img src="https://a.parsons.edu/~hierm158/images/step17.jpg" width= "225" height= "151" alt=step17 <p> Blow into the "mouth" of the bunny to inflate. </div> </li> </ol> </div> </div> </div> </body> </html>