Final Project

by Addison Riley

HTML

<body>
<h1>
Origami
</h1>
<h6>(Try it.)</h6>
<a href="https://s-media-cache-ak0.pinimg.com/originals/f0/e4/7a/f0e47a74783b633a980105bf13dd42c2.jpg" target="_blank">
<p><img src="https://s-media-cache-ak0.pinimg.com/originals/f0/e4/7a/f0e47a74783b633a980105bf13dd42c2.jpg" alt="Dragon" width="600" height="340" align="center"> </p>
</a>
<h1> </h1>
<p2>Origami is the japanese art of 'paper folding.' On this website I will show you how to make some simple origami designs. (Not the dragon.) </p2>
<h1> </h1>
</body>
<body bgcolor="lightgray">
<body>
<p1>The Crane</p1>
<a href="https://www.google.com/" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Origami-crane.jpg" alt="Crane" width="300" height="170" align="center">
</a>
<h6> </h6>
<p3>The crane is the first thing that comes to mind when you think of origami, and its also one of the easiest to make. Click the button to the right to see how to make a crane. </p3>
<button onclick="myFunction()">
Instructions
</button>
<h6> </h6>
<p1>A Box</p1>
<a href="https://cdn.instructables.com/FG7/38DI/H461XASL/FG738DIH461XASL.MEDIUM.jpg?width=614" target="_blank">
<img src="https://cdn.instructables.com/FG7/38DI/H461XASL/FG738DIH461XASL.MEDIUM.jpg?width=614" alt="Box" width="300" height="170" align="center">
</a>
<p3>This little box stands on four legs and can hold a few small items in it. Click the button to see how to make it. </p3>
<button onclick="myFunction2()">
Instructions
</button>
<h6> </h6>
<p1>Random: </p1>
Random alert box: <input type="text" id="input" />
<input type="button" value="Run" onclick="sayHello()" />
<h6> </h6>
</body>

<ul id='menu'>
   <li><a href='#'>Sources: </a>
     <ul>
         <li><a href='#'>http://static.neatorama.com/images/2006-09/dragon-origami.jpg</a></li>
         <li><a href='#'>https://upload.wikimedia.org/wikipedia/commons/f/fd/Origami-crane.jpg</a></li>
         <li><a href='#'>http://www.instructables.com/id/How-to-make-a-Paper-Crane-1/</a></li>
        ...

CSS

p1 {
  color: orange;
}
h1 {
  text-align: center;
}
h6 {
  text-align: center;
}
p2 {
  text-align:center;
}

ul { 
	padding:0; 
	margin:0
}
a {
	display:block;
	text-decoration: none;
}
li {
	display:block; 
	float:middle;
}
li ul li {
	float:middle;
}
li ul {
	display:none; 
	position:middle; 
	z-index:1
}
li:hover ul {
	display:block;
}

#menu {
	height:30px
}
#menu a {
	color:black; 
	padding:10px 15px 10px 15px;
}
#menu a:hover {
	color:blue;
}
#menu li {
	background-color:#FFF; 
	border:solid 1px #CCC;  
	margin-left:0px
}
#menu li:hover {
	background-color:white
}

JavaScript

function myFunction(){
	window.open("http://www.instructables.com/id/How-to-make-a-Paper-Crane-1/");
}

function myFunction2(){
	window.open("http://www.instructables.com/id/Footed-Origami-Box/");
}

function sayHello() {
    var input = document.getElementById('input').value;
    alert(input)
}