Skip to content

Instantly share code, notes, and snippets.

@mushon mushon/index.html

Created Feb 16, 2010
Embed
What would you like to do?
Miriam's modified tutorial html + css files
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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="http://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="http://a.parsons.edu/~hierm158/images/step2.jpg" width= "225" height= "151" alt= "step2">
<img src="http://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="http://a.parsons.edu/~hierm158/images/step4.jpg" width= "225" height= "151" alt="step 4">
<img src="http://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="http://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="http://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="http://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="http://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="http://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= "http://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= "http://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="http://a.parsons.edu/~hierm158/images/step15.jpg" width= "225" height= "151" alt=step15
<img src="http://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="http://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>
body{
}
#introduction {
background: #d02627;
/*padding: 0 10px 5px;
width: 130px;*/
margin-top: 200px;
color: #fff;
}
#introduction p{
padding: 10px;
}
#content{
background: #2b273e;
}
.box{
background: #000;
}
#steps ol li.step-1{
border-bottom: #eee;
background-image: url(images/step-1.jpg);
}
#steps ol li{
border-bottom: 2px solid #fff;
padding-bottom: 20px;
}
#steps ol li.odd{
background-position-x: 300px;
}
#steps ol li.even{
background-position-x: 200px;
}
a{
}
a:hover{
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.