Introduction: Website (HTML and CSS)

About: An aspiring artist. Visit me at https://www.instagram.com/erilyth_art/

Hello everyone at instructables :)

Recently I have been trying to make some websites and host them online to just see how the HTML and CSS I learnt worked out so that I could make a full fledged website featuring and reviewing games in the near future.

In the testing and mending/improving my skills, I decided to make a website which features the instructables I personally liked from www.instructables.com.

I tried to implement a lot of techniques to make the website more interactive. I have added a sticky footer which is fit on the screen and then a lot of drop-down lists and some hidden menus. It also has support by which anyone viewing the website will be able to send us ideas/complaints about the website or for featuring new projects etc...This feature of sending replies to the website owner's email is a little tricky as it involves the use of PHP and other server scripting languages...

The rest of the functions are all based upon the use of HTML and CSS. This makes it a lot more simpler for new people to get started on creating their own websites by code rather than using websites like www.webs.com etc just the way I started when I was 12, but the best thing is that you can create the entire website only with the use of HTML but CSS adds a lot of interactive elements to the website. I am currently 15 years old so I started learning about programming about 3 years ago.

The text that was used in the website was made by the use of Photoshop and some other image editing programs, I used about 3-4 of them but I found Photoshop to be the most convenient.

What did you make?
I made a website that is fully functional and as soon as I get my computer back up and working I will start hosting it online. Everything is set and ready to be hosted but my hosting computer is down as it recently got overworked as I use it for hosting other things as well such as minecraft servers. This is a website that showcases the basics of web designing as I do know that we can get into a lot more advanced programming techniques which make very good websites.

How did you make it?
I always had an interest in programming and electronics. When I saw a lot of really well designed and very good looking websites I just knew I had to try to make one myself. To code the website I used programs like Microsoft Front-page and Microsoft word, I did however enjoyed using front-page much more than word as front-page makes it a lot easier for non professionals to start creating websites as it points out some common code errors and colors different text in different colors to separate coding from writing etc...My computer techer at school also helped me a lot by teaching me new things like how to adjust shapes/sizes/orientation of different drop down boxes and the shading effect etc...

Where did you make it?
On my computer in my house. Sometimes I worked on it at school as well when I had time.

What did you learn?
By creating this website I learnt a lot of things, I learnt how to put the coding I learnt to use and I learnt how to join up bits and pieces of HTML and CSS coding I learnt at school and online. Before making this website I was always unsure if I can make a website and be able to host it online as I was unsure how everything I learnt would add up to give me a successful result. Now I'm a lot more confident about creating websites and can get started on creating actual, serious and good websites using this as a start off :). One of the biggest surprises I encountered after I finished making the whole website was I found out I hadn't included support for use on other browsers like Google Chrome, Safari etc as when I was working I only used Mozilla Firefox for testing....due to this I had to go through more code and learn a lot of other things to make sure that the website ran on Google Chrome and other browsers.

I also made an instructable about a year ago on the basics of website coding and creation when I just started learning how to code HTML and CSS, so have a look at it for the utter basics of web designing but for making more advanced websites you should learn more deep and detailed CSS and JavaScript coding....which hopefully I will start learning soon.

https://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

Hope this inspires people to start making their own websites and showing off their creativity and talent.

"HTML code for page 1"

<!--Each step of the instructable in contained inside an article tag, this is just to group the steps in their own tag and for organization purposes-->
<!--Has 5 main div elements, The header, navMenu, Info, Body, Footer.-->
<!--Linking to style sheet "style.css"-->

<! DOCTYPE html PUBLIC "-//w3C//DTD HTML 5.0//EN">

<html>

<!--***********************************************************************************************************************************************-->

<head>

<link href="CSS/style.css" rel="stylesheet" type="text/css">
<title>DIY Genius</title>
<meta name="description" content="Learn things you never knew before! Make your own DIY projects! Become a DIY master!">
<meta name="keywords" content="website, new, DIY, projects, Make, Craft, Best, Waste, Technology, Workshop, Craft">

</head>

<!--***********************************************************************************************************************************************-->

<body bgcolor=#CCCCCC>

<div id="container">

<!--***********************************************************************************************************************************************-->

<div id="header">
<a name="Start of page"></a>
<table width=100% align=center background="Images/headerbackground.jpg">
<tr>
<td width="1000px" align="center"><img src="Images/Title.jpg" width="916px" height="198px"></td>
<td align=right><H5>Content from</H5><a href="https://www.instructables.com"><img src="Images/instructables-logo.png" onmouseover="src='Images/instructables-logo1.jpg'" onmouseout="src='Images/instructables-logo.png'" style="border-radius: 0px;"></a></td>
</tr>
</table>
</div>

<br></br>

<!--***********************************************************************************************************************************************-->

<div id="navMenubackground">
<div id="navMenu">

<ul>

<li><a href="#">Materials</a>
<ul>
<li><a href="http://www.ebay.com/itm/100-x-2-5mm-Nylon-Zip-Ties-Wraps-Cable-Wire-/140611677563?pt=LH_DefaultDomain_0&hash=item20bd1bed7b" target="_blank">Zip Ties</a></li>
<li><a href="http://www.ebay.com/itm/New-0-6mm-Tin-Lead-Soldering-Solder-Wire-Rosin-Core-/270714225033?pt=LH_DefaultDomain_0&hash=item3f07d34189" target="_blank">Solder</a></li>
<li><a href="http://www.ebay.com/itm/5-ft-3mm-Desoldering-Braid-Solder-Remover-Wick-TNI-U-/200595432345?pt=LH_DefaultDomain_0&hash=item2eb46b6399" target="_blank">Wick</a></li>
<li><a href="http://www.ebay.com/itm/NEW-1-ROLL-BROWN-COVALENCE-ELECTRICAL-TAPE-66-3-4-7-MIL-ELECTRIC-19MM-X-20M-/190601313480?pt=LH_DefaultDomain_0&hash=item2c60b93cc8" target="_blank">Electric Tape</a></li>
</ul><!--end of sub UL tag-->
</li>

<li><a href="#">Reference</a>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Cable_tie" target="_blank">Zip Tie</a></li>
<li><a href="http://www.performance-pcs.com/catalog/index.php?main_page=index&cPath=44_80" target="_blank">Zip Tie Anchor</a></li>
<li><a href="https://www.instructables.com/id/Zip-Tie-Basket/" target="_blank">Zip Tie Basket</a></li>
</ul><!--end of sub UL tag-->
</li>

<li><a href="#">DIY Projects</a>
<ul>
<li><a href="Main Page 1.htm">Zip Tie Basket</a></li>
<li><a href="Main Page 2.htm">LED Night Lamp</a></li>
</ul><!--end of sub UL tag-->
</li>

</ul><!--end of main UL tag-->

</div><!--end of nav menu div-->
</div><!--end of nav menu background div-->

<!--***********************************************************************************************************************************************-->

<div id="Info">
<h3>Author : <a href="https://www.instructables.com/member/BladeFyre+Studios/" target="_blank">BladeFyre Studios</a></h3>
<h4>Published : Jul 26, 2011</h4>
<h4>License : None<abbr title="All Rights Reserved">(ARR)</abbr></h4>
<h5>Related: Zip Tie, Basket, Weaving, Plastic</h5>
</div>

<!--***********************************************************************************************************************************************-->

<div id="body" style="width: 1110px; height: 1140px">

<img src="Images/Heading 1.jpg" alt="Make a Zip Tie Basket"></br>

<article>
<image src="Images/Zip-tie-basket.jpg" alt="Zip Tie Basket">
</article>
<article>
</article>
<article>
</article>
<article><p></p>
We will now learn how to make a zip tie basket with about 100 zip ties...
<p></p>You will be able to use this basket for a lot of things!
<br />I personally use it to hold my solder, wick and electrical tape
<br />
<br />
</article>

<ol>

<article>
<H2><li><b>Materials required :</b></li></H2>
<image src="Images/Supplies.jpg" alt="Supplies">
<ul>
<li><p>16 X Anchors (1" X 1")</p></li>
<li><p>100 X Zip Ties (7 3/8 in long)</p></li>
</ul>
<br>I guess you could use any size depending on how big or small you want to make your basket!!</br>
</article>

<article>
<H2><li><b>Set-Up</b></li></H2>
<image src="Images/Set-up.jpg" alt="Set Up">
<image src="Images/F6EVZBQGQKLPAPE.MEDIUM.jpg" alt="Set Up">
<p></p>Lay out the 16 anchors into a 4 X 4 square
<br />Put one Zip Tie through a row of 4, do this for all of them, but alternate the direction of Zip Ties.
</article>

<article>
<H2><li><b>Weave Away</b></li></H2>
<image src="Images/Weave-Away.jpg" alt="Weave, Weave and Weave">
<image src="Images/FEMYGPIGQKM05QC.MEDIUM.jpg" alt="Weaves on and on">
<image src="Images/F096D66GQKLPAPS.MEDIUM.jpg" alt="Weaving along">
<p></p>Weave 7 Zip Ties on each side (again alternating direction)
<br />Then fold up the sides and connect the Zip Ties to each other...
<blockquote><p></p>NOTE: I found it easier to use 4 Zip Ties to make a square then weave it into all 4 sides at once....</blockquote>
</article>

<article>
<H2><li><b>Secure the weave</b></li></H2>
<image src="Images/Secure-the-weave.jpg" alt="Securing the weave">
<image src="Images/FTGOJZUGQKM4NRK.MEDIUM.jpg" alt="Secure the corners">
<p></p>Trim off excess Zip Tie ends
<br />Use a Zip Tie to connect a corner to a corner to secure the weave
</article>

<article>
<H2><li><b>Peel, Stick and Fill</b></li></H2>
<image src="Images/Peel-Stick-and-Fill.jpg" alt="Peeling, Sticking and Filling">
<p></p>Locate a place to stick the basket (i.e. a work bench, dresser, counter, etc..)
<br />Peel the backing off of the anchors.
<p></p>Place on the location to install, pressing firmly to get the basket to stick evenly!
<br />Place the items you want to store in the basket!
<p></p>In my case I store my Solder, Wick, and Electrical tape in it!
</article>

<article>
<H2><li><b>Resources, Help</li></b></H2>
<table align="left" border="1" width="40%" height="100px">
<colgroup>
<col class="Column1">
<col class="Column2">
</colgroup>
<tr>
<th colspan="2" style="background-color:#333333"><font color="FFFFFF">Measurements</font></th>
</tr>
<tr>
<th width="47%" style="background-color:#686868"><font color="FFFFFF">Zip Ties</font></th>
<th width="49%" style="background-color:#686868"><font color="FFFFFF">Basket Size</font></th>
</tr align="center">
<tr align="center">
<td width="47%">100</td>
<td width="49%">10cm</td>
</tr>
<tr align="center">
<td width="47%">200</td>
<td width="49%">20cm</td>
</tr>
<tr align="center">
<td width="47%">300</td>
<td width="49%">30cm</td>
</tr>
<tr align="center">
<td width="47%">400</td>
<td width="49%">40cm</td>
</tr>
<tr align="center">
<td width="47%">500</td>
<td width="49%">50cm</td>
</tr>
<tr align="center">
<td width="47%">600</td>
<td width="49%">60cm</td>
</tr>
</table>
<p></p>
</article>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<article>
<H2><li><b>FAQ</b></li></H2>
<details>
<summary><em>How strong is the basket?</em></summary>
<p>It is quite strong, enough for home use</p>
</details>
<details>
<summary><em>How long did it take to make?</em></summary>
<p>Not long, about 1 week</p>
</details>
<details>
<summary><em>Is this your own idea?</em></summary>
<p>Yes, I thought it up by myself...</p>
</details>
</article>

<br /><br />

<fieldset>
<legend><h1>Send us your thoughts</h1></legend>
<form action="mailto:vishalapr@yahoo.in" method="post">
<table>
<tr>
<td>Name :</td>
<td><input type="text" name="name" value="Enter your name" size="35"></td>
</tr>
<tr>
<td>Email :</td>
<td><input type="text" name="email" value="Enter your email" size="35"></td>
</tr>
<tr>
<td valign="top">Message :</td>
<td><textarea rows="5" cols="35"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" value="Send!"></td>
</tr>
</table>
</form>
</fieldset>

<br />

<a href="#Start of page">Jump to the Start of the page</a>

<br /><br /><br /><br /><br />

</ol>

</div><!--ending of the body DIV-->

<br></br>

<!--***********************************************************************************************************************************************-->

<div id="footer">
<center><font size="3">Copyright © 2012 <abbr title="www.DIYGenius.com">&nbsp; DIYGenius.com,&nbsp; </abbr>All Rights Reserved.</font></center>
</div>

<!--***********************************************************************************************************************************************-->

</div><!--ending of the container DIV-->

<!--***********************************************************************************************************************************************-->

</body>

</html>

"HTML code for page 2"

<!--Each step of the instructable in contained inside an article tag, this is just to group the steps in their own tag and for organization purposes-->
<!--Has 5 main div elements, The header, navMenu, Info, Body, Footer.-->
<!--Linking to style sheet "style.css"-->

<! DOCTYPE html PUBLIC "-//w3C//DTD HTML 5.0//EN">

<html>

<!--***********************************************************************************************************************************************-->

<head>

<link href="CSS/style.css" rel="stylesheet" type="text/css">
<title>DIY Genius</title>
<meta name="description" content="Learn things you never knew before! Make your own DIY projects! Become a DIY master!">
<meta name="keywords" content="website, new, DIY, projects, Make, Craft, Best, Waste, Technology, Workshop, Craft">

</head>

<!--***********************************************************************************************************************************************-->

<body bgcolor=#CCCCCC>

<div id="container">

<!--***********************************************************************************************************************************************-->

<div id="header">
<a name="Start of page"></a>
<table width=100% align=center background="Images/headerbackground.jpg">
<tr>
<td width="1000px" align="center"><img src="Images/Title.jpg" width="916px" height="198px"></td>
<td align=right><H5>Content from</H5><a href="https://www.instructables.com"><img src="Images/instructables-logo.png" onmouseover="src='Images/instructables-logo1.jpg'" onmouseout="src='Images/instructables-logo.png'" style="border-radius: 0px;"></a></td>
</tr>
</table>
</div>

<br></br>

<!--***********************************************************************************************************************************************-->

<div id="navMenubackground">
<div id="navMenu">

<ul>

<li><a href="#">Materials</a>
<ul>
<li><a href="http://www.ebay.com/itm/10-Sheets-1-8-Clear-Cast-Acrylic-Plexiglass-12-x-12-/290409405568?pt=LH_DefaultDomain_0&hash=item439dbfdc80">Acrylic Sheet</a></li>
<li><a href="http://www.ebay.com/itm/10-x-5mm-Blue-LED-Light-emitting-Diodes-10000mcd-gift-/320568095904?pt=LH_DefaultDomain_0&hash=item4aa358f4a0">LEDs</a></li>
<li><a href="http://www.ebay.com/itm/Pro-Sanding-Nail-File-Buffing-Sandpaper-Slim-Black-N111-/290610237063?pt=LH_DefaultDomain_0&hash=item43a9b84e87">Sandpaper</a></li>
<li><a href="http://www.ebay.com/itm/NEW-10X-CR2025-2025-3V-Lithium-Button-Cell-Coin-Battery-/110793380114?pt=US_Batteries&hash=item19cbccd112">Button Cell Battery</a></li>
<li><a href="http://www.ebay.com/itm/2pcs-CR2032-CR2025-Notebook-Laptop-PC-Button-Cell-Battery-Socket-Base-Holder-/150678515771?pt=US_Batteries&hash=item231523b03b">Button Cell Holder</a></li>
<li><a href="http://www.ebay.com/itm/Vinyl-Electrical-Tape-NEW-General-Use-/390306485709?pt=LH_DefaultDomain_0&hash=item5ae01455cd">Electric Tape</a></li>
<li><a href="http://www.ebay.com/itm/1pc-Momentary-ON-OFF-N-C-CAR-BOAT-3V-4-5V-6V-9V-12V-24V-120V-Push-Switch-YM507-/180758737924?pt=LH_DefaultDomain_0&hash=item2a160f7404">Momentary switch</a></li>
</ul><!--end of sub UL tag-->
</li>

<li><a href="#">Reference</a>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Poly%28methyl_methacrylate%29">Acrylic Sheet</a></li>
<li><a href="http://en.wikipedia.org/wiki/Light-emitting_diode">LED</a></li>
<li><a href="http://en.wikipedia.org/wiki/Sandpaper">Sandpaper</a></li>
<li><a href="http://en.wikipedia.org/wiki/Button_cell">Button cell</a></li>
<li><a href="http://en.wikipedia.org/wiki/Switch">Momentary Switch</a></li>
<li><a href="https://www.instructables.com/id/LED-Cube-Night-Light/">LED Night Lamp</a></li>
</ul><!--end of sub UL tag-->
</li>

<li><a href="#">DIY Projects</a>
<ul>
<li><a href="Main Page 1.htm">Zip Tie Basket</a></li>
<li><a href="Main Page 2.htm">LED Night Lamp</a></li>
</ul><!--end of sub UL tag-->
</li>

</ul><!--end of main UL tag-->

</div><!--end of nav menu div-->
</div><!--end of nav menu background div-->

<!--***********************************************************************************************************************************************-->

<div id="Info"> 
<h3>Author : <a href="https://www.instructables.com/member/motadacruz/" target="_blank">motadacruz</a></h3>
<h4>Published : Feb 11, 2010</h4>
<h4>License : None<abbr title="All Rights Reserved">(ARR)</abbr></h4>
<h5>Related: LED, cube, ambient, light, lamp, night</h5>
</div>
</div>

<!--***********************************************************************************************************************************************-->

<div id="body" style="width: 1117px; height: 3072px">

<img src="Images/Heading 2.jpg" alt="Make an LED Night Lamp"></br>

<article>
<image src="Images/LED-Cube-Night-Light.jpg" alt="The Final product">
</article>
<article>
<p></p>This LED lamp will be perfect in any home. It gives more light then I thought it would.
<br />Today I recieved the last products I ordered to get started building this LED cube.
<p></p>Though this cube I made is 9cm x 9cm x 9cm... it feels bigger then that. Maybe because it gives allot of light.
<br />In most of my projects and instructables I use a toggle switch to switch LED's on and off.
<br />I wanted to do something different this time. Got to say it worked out pretty awesome.
<br />On the bottom is small momentary switch that will turn the LED's on and off. The switch is strong enough
to hold the cube.
<br />But when the box is pressed down, the switch isn't strong enough to click back
because of the weight.
<br />So pressing the box will turn the light on, and pulling the box up will turn it off again.
<p></p>Below you can see a movie I made to show how it works.
<p></p>If you think it's cool enough, go to step one so you can get all the materials and tools to build your own!
<br />
<br />
<iframe width="640" height="480" src="http://www.youtube.com/embed/PBjm83P_AxM" frameborder="0" allowfullscreen></iframe>
</article>

<ol>

<article>
<p></p><H2><li>Tools & Materials</li></H2>
<image src="Images/Tools-Materials.jpg" alt="Materials">
<p></p>The materials used for this project are pretty easy to get and not too expensive.
<br />Only some tools are maybe not in everyone's toolbox. But there are also many tools you can use
<br />instead if you're not able to get your hands on some.
<ul>
<p><b>Materials</b></p>
<li><br />- A4 acrylic sheet - 3mm thick (also known as 'plexiglass')</li>
<li><br />- Fine sandpaper (400 does a great job!)</li>
<li><br />- 3x 5mm LED (I used blue, gives a good effect. But any color can be used)</li>
<li><br />- 2x button cell battery (CR2032)</li>
<li><br />- 2x button cell holder</li>
<li><br />- Small momentary switch</li>
<li><br />- Electrical wire (ripped it of my bike)</li>
</ul>
</article>


<article>
<p><H2><li> Cutting the acrylic</li></H2></p>
<image src="Images/Cutting-the-acrylic.jpg" alt="Cutting and Mending...">
<image src="Images/FBARYMIG5FR5LZM.MEDIUM.jpg" alt="Cutting the acrylic">
<p></p>First we need to cut the 6 sides of the cube out of the acrylic sheet.
<p><p></p>1. Get the pen and draw six equal squares on the acrylic sheet. Straight lines are needed, so unless
<br />you've got a real steady hand, use a ruler :)
<p></p>2. Use the jig saw to cut the squares from the acrylic sheet. Be sure to do this as perfect as you can.
<blockquote><br />NOTE : All squares need to be (almost) the same (photo 2).</blockquote>
</article>

<article>
<p><H2><li>Frosting the acrylic</li></H2></p>
<image src="Images/Frosting-the-acrylic.jpg" alt="Frosting">
<image src="Images/FJ5WNU7G5FR5M20.MEDIUM.jpg" alt="Peeling">
<image src="Images/FHZ9CDFG5FR5M1Z.MEDIUM.jpg" alt="Frosting and Peeling">
<p></p>The acrylic is 'water clear'. That's not what we want. We want a frosted (or diffused) cube to it spreads
<br />the light equally to give a nice effect.
<p></p>You can probably get acrylic sheets that already have a frosted look. But I couldn't find them here.
<br />Found 1 shop, but they charged allot more then the water clear one. Since sandpaper doesn't cost
<br />much I went for the water clear one :)
<p></p>1. Remove the protecting plastic from each plate (photo 1 and 2).
<p></p>2. Now get the fine sandpaper (400) and place it on a table, with the sanding side up. Get a plate and
<br />rub it over the sandpaper in a circular motion. If one side is frosted enough, turn the plate over and do
<br />the same with that side.
<p></p>To see if you did a good job on sanding, you can hold the plates against the light. Just give the bad
<br />parts some extra sanding.
</article>

<article>
<p><H2><li>Make the cube</li></H2></p>
<image src="Images/Make-the-cube.jpg" alt="Making the cube!">
<image src="Images/FUXRO3AG5FR5M8F.MEDIUM.jpg" alt="Joining the acrylic">
<p></p>Now we've got the plates ready we need to shape them into a cube.
<br />Before you go and glue parts together, make sure first they fit nicely onto each other. We need all parts
<br />to fit nicely.
<p></p>1. After fitting the plates get the glue gun and glue only 5 plates together. If you have some trouble
<br />holding the plates together before gluing, you can use some tape to hold them together. This way you
<br />can put the glue on more relaxed.
<p></p>2. The last plate that's not glued on yet needs a hole for the switch to fit in. Get the drilling tool and use
<br />a drill bit that is the same size as the switch (corner to corner).
<br />When you're drilling, do this very carefully! You don't want to hurry, else you might put too much
<br />pressure on it and break the plate.
<p></p>Try if the switch fits the hole nicely. Later on we're going to use the glue gun to put the switch in place.
</article>

<article>
<p><H2><li>Preparing the LED's</li></H2></p>
<image src="Images/Preparing-the-LEDs.jpg" alt="Testing LEDs">
<image src="Images/F6DIVHIG5FR5MBB.MEDIUM.jpg" alt="Preparing LEDs">
<p></p>If you're goofy looking like me and bought water clear LED's as well, here we go diffuse them :)
<p></p>1. Get the sandpaper (again the 400) and sand the LED's.
<br />You can see the difference of the water clear ones (photo 1) and the diffused ones (photo 2).
</article>

<article>
<p><H2><li>Make the circuit</li></H2></p>
<image src="Images/Make-the-circuit.jpg" alt="Making the Circuit">
<image src="Images/F3DL04HG5FR5MHF.MEDIUM.jpg" alt="Connecting components">
<p></p>We now need the put the switch, LED's and batteries together to make the circuit.
<br />To ensure this circuit is nice and strong you can solder the parts together. Since I don't have a solder
<br />station I used hot glue to stick them together. Maybe not as good looking, but it does the job.
<p></p>1. Put the batteries in the holders. I'd like to do this first so they are slightly heavier and easier to handle.
<p></p>2. Put some electrical wire from the positive side of 1 battery holder to the negative side of the other battery holder.
<p></p>3. From the 2nd battery holder, go to the momentary switch with another electrical wire.
<p></p>4. Use some electrical wire to connect the opposite leg of the switch to the positive leg of the LED's.
<p></p>5. And from the negative leg of the LED you use some electrical wire to go back to the 1st battery holding.
<p></p>6. Test the switch and see if the LED's light up. If not, you made a mistake in your circuit. If everything is
<br />working fine, use some hot glue to make sure the parts stay together. Or you can solder it if you have a soldering staion.
</article>

<article>
<p><H2><li>Finishing Up</li></H2></p>
<image src="Images/F6I6UTBG5FR5MI8.MEDIUM.jpg" alt="Neat and Tidy">
<image src="Images/FX93ZQOG5FRB5SK.MEDIUM.jpg" alt="Tidying up">
<image src="Images/FIQEX3DG5FR5MI7.MEDIUM.jpg" alt="Finishing up">
<image src="Images/FBR70K2G5FRB5SJ.MEDIUM.jpg" alt="And Done!">
<p></p>We've now got all the parts we need. All we need to do now is put the bottom part into the cube to make it a whole cube.
<br />1. Sand the sides of the bottom plate so it fits snugly into the bottom. You just want the bottom plate
<br />slightly bigger then the hole it fits in. This way, once you put it in there, it will get stuck and won't let go
<br />while moving the cube.
<p></p>You can of course make any color you want. You can even put color changing LED's in there to create nice ambient light.
</article>

<article>
<H2><li><b>Resources, Help</li></b></H2>
<table align="left" border="1" width="445">
<colgroup>
<col class="Column1">
<col class="Column2">
</colgroup>
<tr>
<th colspan="2" style="background-color:#045FB4">Measurements</th>
</tr>
<tr>
<th width="47%" style="background-color:#045FB4">Acrylic Size</th>
<th width="49%" style="background-color:#045FB4">Box Size</th>
</tr>
<tr>
<td width="47%" align="center">60cm</td>
<td width="49%" align="center">10cm</td>
</tr>
<tr>
<td width="47%" align="center">120cm</td>
<td width="49%" align="center">20cm</td>
</tr>
<tr>
<td width="47%" align="center">180cm</td>
<td width="49%" align="center">30cm</td>
</tr>
<tr>
<td width="47%" align="center">140cm</td>
<td width="49%" align="center">40cm</td>
</tr>
<tr>
<td width="47%" align="center">320cm</td>
<td width="49%" align="center">50cm</td>
</tr>
<tr>
<td width="47%" align="center">380cm</td>
<td width="49%" align="center">60cm</td>
</tr>
</table>
<p></p>
</article>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<article>
<H2><li><b>FAQ</b></li></H2>
<details>
<summary><em>How strong is the cube?</em></summary>
<p>It is quite strong, enough for home use</p>
</details>
<details>
<summary><em>How long did it take to make?</em></summary>
<p>Not long, about 2-3 weeks</p>
</details>
<details>
<summary><em>Is this your own idea?</em></summary>
<p>Yes, I thought it up by myself...</p>
</details>
</article>

<br /><br />

<fieldset>
<legend><h1>Send us your thoughts</h1></legend>
<form action="mailto:vishalapr@yahoo.in" method="post">
<table>
<tr>
<td>Name :</td>
<td><input type="text" name="name" value="Enter your name" size="35"></td>
</tr>
<tr>
<td>Email :</td>
<td><input type="text" name="email" value="Enter your email" size="35"></td>
</tr>
<tr>
<td valign="top">Message :</td>
<td><textarea rows="5" cols="35"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" value="Send!"></td>
</tr>
</table>
</form>
</fieldset>

<br />
<br />

<a href="#Start of page">Jump to the Start of the page</a>

<br /><br /><br /><br /><br />

</ol>

</div>
<br></br>

<!--***********************************************************************************************************************************************-->

<div id="footer">
<center><font size="3">Copyright © 2012 <abbr title="www.DIYGenius.com">&nbsp; DIYGenius.com,&nbsp; </abbr>All Rights Reserved.</font></center>
</div>

<!--***********************************************************************************************************************************************-->

</div>

<!--***********************************************************************************************************************************************-->

</body>

</html>

"CSS code for both pages"

/*******************************************************************************************************************************************************************/

#body
{
border: 0px;
padding: 0px;
margin: 0px;
font-family: Century Gothic;
width: 90%;
}

/*******************************************************************************************************************************************************************/

#container
{
width: 100%;
border: 0px;
padding: 0px;
margin: 0px;
}

/*******************************************************************************************************************************************************************/

#header
{
border-top: 15px solid #333333;
width: 100%;
height: 220px;
}

/********************************************************************************************************************************************************************/

#navMenubackground
{
height: 36px;
width: 100%;
background-color: #333333;
}

/********************************************************************************************************************************************************************/

#navMenu
{
margin:0;
padding:0;
position:absolute;
left:33%
}

#navMenu ul
{
margin:0;
padding:0;
}

#navMenu li
{
margin:0;
padding:0;
list-style: none;
float: left;
position: relative;
background: #666666;
border-radius: 20px 5px;
}

#navMenu ul li a
{
text-align: center;
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #FFFFFF;
border: 1px solid #CCCCCC;
border-right: 2px solid #CCCCCC;
border-left: 2px solid #CCCCCC;
text-shadow: 1px 1px 1px #000000;
padding: 2px;
border-radius: 20px 5px;
}

#navMenu ul ul
{
position: absolute;
visibility: hidden;
top:36px;
}

#navMenu ul li:hover ul
{
visibility: visible;
}

/*******************************************************************************************************************************************************************/

#navMenu li:hover
{
background: #333333;
}

#navMenu ul li:hover ul li a:hover
{
background: #AAAAAA;
color: #000000;
}

#navMenu li a:hover
{
color:#FFFFFF;
}

#navMenu li li a:hover
{
color:#000000;
}

/*******************************************************************************************************************************************************************/

#Info
{
font-family: Lucida Sans Unicode;
border: 9px solid #333333;
margin: 2px solid #FFFFFF;
background-color: #999999;
float:right;
height:450px;
width:300px;
top: 100px;
position: relative;
right: 20px;
top: 55px;
border-radius: 10px;
}

/*******************************************************************************************************************************************************************/

#Info a:hover
{
color: #FFFFFF;
text-decoration: none;
}

#Info a:active
{
color: #333333;
}

#Info a:link
{
color: #333333;
}

/*******************************************************************************************************************************************************************/

#footer
{
font-weight:bold;
font-family: Century Gothic;
color: #FFFFFF;
clear: both;
background-color: #333333;
padding:4px;
width:100%;
position: fixed;
bottom: 5px;
height: 35px;
}

/*******************************************************************************************************************************************************************/

fieldset
{
width: 500px;
height: 270px;
}

/*******************************************************************************************************************************************************************/

abbr
{
font-weight:bold;
font-style:italic;
font-size:++1
}

/*******************************************************************************************************************************************************************/

.Column1
{
background-color:#999999;
}

/*******************************************************************************************************************************************************************/

.Column2
{
background-color:#999999;
}

/*******************************************************************************************************************************************************************/

h2
{
text-shadow:2px 2px 2px #AAAAAA;
}

/*******************************************************************************************************************************************************************/

img
{
border-radius: 20px;
}

/*******************************************************************************************************************************************************************/

Make-to-Learn Youth Contest

Participated in the
Make-to-Learn Youth Contest