Skip to content

Instantly share code, notes, and snippets.

@Miriam6142

Miriam6142/Origami Bunnies CSS

Created February 19, 2010 17:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Miriam6142/308940 to your computer and use it in GitHub Desktop.
Save Miriam6142/308940 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Origami Bunnies CSS
body {
background-color:#CCCCCC;
background-image:url(assets/assets-2.jpg);
}
#topbar {
background-color:#b8ddf5;
height:20px;
width:530px;
}
#sidebar {
background-color:#b8ddf5;
height:530px;
width:20px;
}
#image box{
margin:200px 200px 200px;
}
#banner {
background: #000000;
color:#97e5af;
font-family:"STHeiti",Palatino,serif;
font-size: 40px;
font-weight: 100;
padding-bottom:8px;
padding-top:10px;
}
#header {
padding: 0px 20px 20px
}
#sub-header {
font-family:"STHeiti",Palatino,serif;
font-size:30px;
font-weight:bold;
letter-spacing:2px;
line-height:14px;
padding-bottom:8px;
padding-top:10px;
}
#introduction {
background: #6d7d79;
/*padding: 0 10px 5px;
width: 130px;*/
margin-top: 0px;
color: #fff;
}
#introduction p{
padding: 10px;
}
#content{
background: #2b273e;
}
div.step-1{
background:url(css/assets/number1.jpg);
}
div.numberodd{
margin:0px 0px 10px 450px
}
div.numbereven{
margin:0 0 10px -60px
}
#steps ol li.step-1{
border-bottom: #eee;
background-image: url(assets/number1.jpg);
color:#FFFFFF;
padding-bottom:8px;
padding-top:0px;
}
#steps ol li{
border-bottom: 2px solid #FFFFFF;
padding-bottom: 20px;
color:#FFFFFF;
padding-bottom:8px;
padding-top:0px;
}
#steps ol li.odd{
background-position-x: 300px;
}
#steps ol li.even{
background-position-x: 200px;
}
#p.img.left{
}
a:hover{
}
Raw
Origami Bunnies HTML
<!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 id="topbar" class="span-25"
</div>
<div id="sidebar" class="span-10"
</div>
<div id="container" class="container">
<div id=background class="span-24">
</div
<div id= "banner" class="span-24">
<center> ORIGAMI BUNNIES</center>
</div>
<div id="sub-header" class="span-23">
<center> A TUTORIAL FOR THE FOLDING-IMPAIRED</center>
</div>
<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-12 append-2 last">
<div id="Steps">
<ol>
<li>
<div class="image box">
<img src="http://a.parsons.edu/~hierm158/images/step1.jpg" width= "250" height= "202" alt="step1">
</div>
<div class="caption">
</div>
<div id="step-1">
<h4> To begin your bunny, you must have a single piece of origami paper. </h4>
</div>
</li>
<li>
<div class="numbereven"
<img src="http://a.parsons.edu/~hierm158/images/number2.jpg" width= "100" height= "122">
</div>
<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"
<h4> 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.</h4>
</div
</li>
<li>
<div class="numberodd"
<img src="http://a.parsons.edu/~hierm158/images/number3.jpg" width= "100" height= "122">
</div>
<div class="image box"
<img src="http://a.parsons.edu/~hierm158/images/step5.jpg" width= "225" height= "151" alt="step5">
</div>
<div class="caption"
</div>
<div id="Step-3"
<h4>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. </h4>
</div>
</li>
<li>
<div class="numbereven"
<img src="http://a.parsons.edu/~hierm158/images/number4.jpg" width= "100" height= "122">
</div>
<div class="image box"
<img src="http://a.parsons.edu/~hierm158/images/step6.jpg" width= "225" height= "151" alt="step6">
</div>
<div class="caption"
</div>
<div id="Step-4"
<h4>In this step, the two side tips of the top triangle should be folded in to the top tip. </h4>
</div>
</li>
<li>
<div class="numberodd"
<img src="http://a.parsons.edu/~hierm158/images/number5.jpg" width= "100" height= "122">
</div>
<div class="image box"
<img src="http://a.parsons.edu/~hierm158/images/step7.jpg" width= "225" height= "151" alt="step7"
</div>
<div class="caption"
</div>
<div id="Step-5"
<h4>The two flaps of the top tip should now be folded into the pockets created by the previously folded side tips.</h4>
</div>
</li>
<li>
<div class="numbereven"
<img src="http://a.parsons.edu/~hierm158/images/number6.jpg" width= "100" height= "122">
</div>
<div class="image box"
<img src="http://a.parsons.edu/~hierm158/images/step8.jpg" alt=step7" width= "225" height= "151" alt="step7"
</div>
<div class="caption"
</div>
<div id="Step-6"
<h4>Flip the triangle over.</h4>
</div>
</li>
<li>
<div class="numberodd"
<img src="http://a.parsons.edu/~hierm158/images/number7.jpg" width= "100" height= "122">
</div>
<div class="image box"
<img src="http://a.parsons.edu/~hierm158/images/step9.jpg" width= "225" height= "151" alt="step9"
</div>
<div class="caption"
</div>
<div id="Step-7"
<h4> Fold the tips in to create a triangle.</h4>
</div>
</li>
<li>
<div class="numbereven"
<img src="http://a.parsons.edu/~hierm158/images/number8.jpg" width= "100" height= "122">
</div>
<div class="image box"
<img src="http://a.parsons.edu/~hierm158/images/step10.jpg" width= "225" height= "151" alt="step10"
</div>
<div class="caption"
</div>
<div id="Step-8"
<h4>Turn the right tip of the diamond to the left. </h4>
</div>
</li>
<li>
<div class="numberodd"
<img src="http://a.parsons.edu/~hierm158/images/number9.jpg" width= "100" height= "122">
</div>
<div class="image box"
<img src= "http://a.parsons.edu/~hierm158/images/step12.jpg" width= "225" height= "151" alt="step12"
</div>
<div class="caption"
</div>
<div id="Step-9"
<h4> Fold the left tip to the right </h4>
</div>
</li>
<li>
<div class="numbereven"
<img src="http://a.parsons.edu/~hierm158/images/number10.jpg" width= "100" height= "122" >
</div>
<div class="image box"
<img src= "http://a.parsons.edu/~hierm158/images/step14.jpg" width= "225" height= "151" alt="step14"
</div>
<div class="caption"
</div>
<div id="Step-10"
<h4>Continue folding until all tips are folded into the center.</h4>
</div>
</li>
<li>
<div class="numberodd"
<img src="http://a.parsons.edu/~hierm158/images/number11.jpg" width= "100" height= "122">
</div>
<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
</div>
<div class="caption"
</div>
<div id="Step-11"
<h4> Fold up the "ears" of the bunny and flatten.</h4>
</div>
</li>
<li>
<div class="numbereven"
<img src="http://a.parsons.edu/~hierm158/images/number12.jpg" width= "100" height= "122">
</div>
<div class="image box"
<img src="http://a.parsons.edu/~hierm158/images/step17.jpg" width= "225" height= "151" alt=step17
</div>
<div class="caption"
</div>
<div id="Step-12"
<h4> Blow into the "mouth" of the bunny to inflate.</h4>
</div>
</li>
</ol>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment