Visual illusion lab: Template

Make a folder with a relatively short name, e.g. "stereocolor". Make a document in that folder with the name "index.html", and copy the following code into it. You will need to put all files that you want to appear on the webpage in that folder. Complete all the TODO sections. Your page will look something like this.

You do not need to follow this template, as long as you clearly include the elements described on the tasks page. The template is here to help if you'd like, otherwise feel free to personalize your page.

Remember that others will be looking at this webpage to understand your illusion, so you should keep the goal of communicating to others in mind as you write your text! Connecting your illusion to concepts you learned in class will be helpful for that.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Design by TEMPLATED http://templated.co Released for free under the Creative Commons Attribution License Name : Retention Description: A two-column, fixed-width design with dark color scheme. Version : 1.0 Released : 20140221 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>9.35 Illusion Lab</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="http://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet" /> <link href="../../default.css" rel="stylesheet" type="text/css" media="all" /> <link href="../../fonts.css" rel="stylesheet" type="text/css" media="all" /> <!--[if IE 6]> <link href="default_ie6.css" rel="stylesheet" type="text/css" /> <![endif]--> </head> <body> <div id="wrapper"> <div id="header-wrapper"> <div id="header" class="container"> <div id="logo"> <h1><a href="#">9.35 Illusion Laboratory</a></h1> <p>Spring 2020 Vision Lab</p> </div> <div id="banner"> <a href="#" class="image"><img src="images/pic01.jpg" alt="" /></a> </div> </div> </div> <div id="menu-wrapper"> <div id="menu" class="container"> <ul> <li><a href="../../index.html">Homepage</a></li> <li><a href="../../tasks.html">Tasks</a></li> <li><a href="../../review.html">Illusion review</a></li> <li><a href="../../signup.html">Meeting signup</a></li> <li class="current_page_item"><a href="../../gallery.html">Gallery</a></li> <li><a href="../../resources.html">Resources</a></li> <li><a href="../../rubric.html">Rubric</a></li> <li><a href="../../archives.html">Past Years</a></li> </ul> </div> <!-- end #menu --> </div> <div id="page" class="container"> <div> <div class="title"> <h2>TODO: insert your scientific question as clear & concise as possible</h2> <span class="byline">TODO: Insert your name if you wish.</span> </div> <p>TODO: insert your 2 paragraph explanation of your demo design here.</p> <p>TODO: insert your illusion (we expect at least one image/video, you might have more or also have text labels/prompts): </p> <img src="TODO:myimagename.jpg" width=500/><br> <!--You can use the width parameter to change the size of your image--> <!--src could be a gif, png, jpeg, etc.--> <p>TODO: insert the full citation to the papers that inspired you here.<p> </div> </div> </div> <div id="copyright" class="container"> <p> CC BY-NC. | Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>.</p> </div> </body> </html>