Web Design Basics

introduction to web design

12 Homework

Posted on October 5, 2012 by Onno

Homework for the Final

Finish your website.
Test it.

Homework for the Unit

Create a page featuring multimedia, including canvas and video.
Ideally, you are able to incorporate canvas and video in the final, but the final does not have to include multimedia.
A link to the multimedia page has to be on the work-sheet.

@import url(../twentyeleven/style.css); /* mods: remember to disable the entire responsive structure /* fonts family=Neuton:200,300,400,700,800,400italic Merriweather+Sans:400,300,700,800,400italic ----------------------------------------------- */ body {font-family: 'Neuton', serif; font-weight: 200; font-size: 22px;} h1, h2, h3, h4, h5, h6 {font-family: "Merriweather Sans", sans-serif;} /*h1(font: normal normal 700 2.5em/2em "Merriweather Sans", sans-serif;)*/ #nav-single {display: none;} strong, b {font-family: 'Neuton', serif; font-weight: 500; font-size: 1.3em;} /* live demo ----------------------------------------------- */ .handson_demo{margin:40px 0 30px;position:relative;left:-18px;} .handson_demo h3{position:absolute;background:aqua;border:1px solid blue;padding:0 10px;top:-25px;left:20px; font-size: 50% !important;} .handson_demo pre{border:1px solid silver;border-left:8px solid hsla(180,100%,20%,.1);border-radius:8px 0 0 8px;width:100%;} .handson_demo style{line-height:1.4em;display:block;font-size:1.15em;} .w300 {max-width:60%;} .w60 {max-width:60%;} .w75 {max-width:70%; margin: auto;} .w90 {max-width:90%;} .live-demo div{margin:20px;} .live-demo{min-width:300px;position:relative;left:-18px;width:100%;margin:40px auto;padding:45px 7px 5px;border:1px solid silver;border-left:8px solid hsla(0,100%,40%,.1);background:hsla(0,5%,95%,1);background:#eee;border-radius:8px 0 0 8px;} .live-demo h3{position:absolute;background:pink;border:1px solid red;padding:0 10px;top:-25px;left:20px;} .handson_demo script{line-height: 1.4em;display: block;font-size: 1.15em;width: 100%;padding: 10px 0;background: red;} .demo {margin: 30px auto; padding: 10px 5%; border: 10px solid silver; width: 90%; back ground: red;} /* following paragraph first line tab */ p + p{margin-top:8px;margin-bottom:6px;line-height:1.8em;text-indent:1.5em;margin-top:0;} /* links target new window */ a{target:target-new;} /*table of contents*/ a[href$=TofContents] {position: relative; top: 17px; font-size: 70%; text-decoration: none; background: none; border-bottom: none; } a[href$=TofContents]:before {content: "back to contents"; color: blue;} .l-head {float: left; padding-right: 10px;} .pat {clear:left;} #contents {list-style:none; position: relative; margin-top: 5px; left: 0px; border: 1px solid #666; border-top: 35px solid #666; padding: 20px 20px 30px 30px; float: right; background: #efefef; font-family: Helvetica, sanserif; line-height: 1.2em; width: 30%; max-width: 150px; } #contents li:first-child {font-size: 1.1em; position: absolute; color: #fff; margin-top: -47px; margin-left: -10px;} #contents a{font-size: .7em; text-decoration: none; color: #666;} #contents a:hover{text-decoration: underline; color: #00f;} /* code */ pre{background-color:rgb(95%,100%,100%);white-space:pre-wrap;padding:7px 7px 0;border-radius:6px; font-size: 1em;} code{background-color:rgb(95%,100%,100%);padding:1px 3px;margin:-1px 0; font-size: 1em;} /* pictures */ figure{margin:20px auto;width:100%;} figca ption{margin:0 0 20px;font-size:80%;padding:0;line-height:1.1em; color: white;} figcap tion a {color: white !important;} img{padding:0;margin:0;} .right-p {float: right; margin: 10px 0 10px 20px; border: 1px solid black; padding: 1px; background: #333; color: #ddd; text-align: center; border-radius: 5px; width: 50%;} .left-p {float: left; margin: 10px 20px 10px 0; border: 1px solid black; padding: 1px; background: #333; color: #ddd; text-align: center; border-radius: 5px; width: 50%;} .center-p {margin: 10px auto; border: 1px solid black; padding: 1px; background: #333; color: #ddd; text-align: center; border-radius: 5px;} /* Video Style ratio */ .vContainingBlock{position:relative;width:100%;outline:3px solid purple;background:#000;} .vContainingBlock h3{padding:0 5px;color:#fff;} .videoWrapper{position:relative;padding-bottom:56.25%;padding-top:25px;height:0;overflow:hidden;} .videoWrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;} /* rewrite of style sheet ----------------------------------------------- */ .entry-meta{visibility:hidden;} body{background:#888!important;} .entry-content{padding:5px important;width:100%!important;} #header{padding:30px 0 0;background:#eee;} #site-title{font-size:30px;line-height:36px;width:700px;padding:0;} #site-title a{color:#000;font-weight:700;text-decoration:none;text-shadow:0 0 155px #fff;} #site-description{font-style:italic;width:240px;margin:3px;} /*content*/ #glossary div {width: 150px; float: left;} /*links*/ #entry-content li a ,#content .nav-next a, #content .nav-previous a, #content .comments-link a, #content #commentform a {background: none; border-bottom: none; text-decoration: none;} #entry-content li a:hover ,#content .nav-next a:hover, #content .nav-previous a:hover, #content .comments-link a:hover, #content #commentform a:hover {background: none; border-bottom: none; } #content h2 a {background: none; border-bottom: none; text-decoration: underline;} #content h2 a:hover {background: none; border-bottom: none; text-decoration: underline; color: blue} #content h2 a:active {background: none; border-bottom: none; text-decoration: underline; color: green} #content a {color: #222; background: hsla(40,40%,85%,.1); padding: 1px 0px 2px 3px; margin -1px 0px -2px -3px; text shadow: 1px 1px 2px #bbb; display: block-inline; position: relative; left: -3px; border-bottom: 3px solid hsla(40,0%,55%,.5);} #content a:hover {color: #222; border-bottom: 3px solid hsla(240,60%,55%,.5); background: hsla(240,40%,85%,.1); text-decoration: none; } #content a:active {color: #222; border-bottom: 3px solid hsla(120,60%,55%,.5); background: hsla(120,40%,85%,.1); text-decoration: none; } #content .read { font-w eight: 700; color: hsla(0,100%,25%,1); background: hsla(0,100%,98%,1); border-bottom: 1px solid hsla(0,30%,50%,.5); border-top: 1px solid hsla(0,30%,50%,.5);} #content .overview { font-w eight: 700; color: hsla(120,100%,25%,1); background: hsla(120,100%,98%,1); border-bottom: 1px solid hsla(120,30%,50%,.5); border-top: 1px solid hsla(120,30%,50%,.5);} /*counter styles from syllabus*/ #content #syllabus a {background: #666; padding: none; margin none; left: 0px; border-bottom: none;} #content #syllabus .hw a {background: #aaa; padding: none; margin none; left: 0px; border-bottom: none;} #content .nohilight a {background: none; padding: none; margin none; left: 0px; border-bottom: none;} /*content*/ #content h1{margin-top:18px;margin-bottom:0;line-height:1.8em; font-size: 1.4em;} #content h2{margin-top:18px;margin-bottom:0;line-height:1.8em; font-size: 1.2em;} #content h3{margin-top:18px;margin-bottom:0;line-height:1.8em; font-size: .9em; text-transform: uppercase; font-weight: 900;} #content h4{margin-top:18px;margin-bottom:0;line-height:1.8em; font-size: .8em; text-transform: uppercase; font-weight: 700;} #content h5{margin-top:18px;margin-bottom:0;line-height:1.8em; font-size: .7em; text-transform: uppercase; font-weight: 900;} #content h6{margin-top:18px;margin-bottom:0;line-height:1.8em; font-size: .6em; text-transform: uppercase; font-weight: 700;} #line-special ul{background-color:rgb(95%,100%,100%);padding:1px 3px;margin:-1px 0;} assignment{background-color:rgb(100%,95%,95%);padding:7px;-moz-border-radius:12px;-webkit-border-radius:12px;-0-border-radius:12px;border-radius:6px;} #mbod .example{font-size:1.4em;color:green;} .highlight{background-color:rgba(100%,100%,0%,.5);} #content table,#content table tr td{margin:0;padding:0 5px;border:0; font-weight: 200;} #content table{margin:0 0 10px;} #content td:first-child{text-align:right;} .name{text-align:left;width:55px;} .at{text-align:center;width:15px;} .ab{text-align:center;width:15px;padding-right:4px;margin-left:4px;background-color:rgba(100%,0%,0%,.2);} #content p{margin-top:4px;margin-bottom:6px;line-height:1.8em;} .dim {opacity: .65} .stand-out {background: hsla(40,20%,70%,.5); padding: 10px; border: 1px solid silver; margin: 10px;} /* syllabus */ #syllabus table{padding-left:170px;clear:both;} #syllabus{overflow:none;} #syllabus p + p{margin-top:8px;margin-bottom:6px;line-height:1.8em;text-indent:0em;margin-top:0;} #syllabus h2,#syllabus h3 {font:Arial, Helvetica, sans-serif;font-size:.8em;font-weight:900;margin-right:20px;float:left;background:#666;padding:4px;margin-bottom:0px;margin-right:10px;color:#fff;height:100%;width:120px;letter-spacing:2px;text-align:right;clear:left; position: relative; top: 16px; le ft: -20px;} #syllabus h3{font-size:.7em;font-weight:700;} #syllabus h2{ line-height: 1.6em} #syllabus .hw{background:#aaa;} #syllabus .close{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #aaa;} #syllabus p{display:block;overflow:auto;padding-top:20px;} #syllabus p + p{display:block;overflow:auto;padding-top:0;} #syllabus ol{margin-left:170px;} #syllabus td{text-align:left;} #syllabus a:link{color:#fff;background:#666;padding:3px;text-decoration:none;} #syllabus a:visited{color:#fff;} #syllabus a:hover{color:#faa;} #syllabus .hw a:link{color:#fff;background:#aaa;padding:3px;text-decoration:none;} #syllabus .hw a:hover{color:#a33;} #syllabus .clear {clear: both;} #syllabus .marginleft {margin-left: 170px;} #syllabus td {text-align: left;} #syllabus .quartegrade {color: orange} /* Header Bar -non static structure / main menu ----------------------------------------------- */ #access{background:#666;display:block;float:left; margin: 0px; padding: 0; position:relative; left:11px; top: 6px; width:722px;box-shadow:none; height: 59px; overflow: none;} #access a { color: #eee; display: block; line-heig ht: 3.333em; padding: 0 1.2125em; text-decoration: none;font-size: 1.5em;} #access ul ul { -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); box-shadow: 0 3px 3px rgba(0,0,0,0.2); display: none; float: left; margin: 0; position: absolute; top: 3.333em; left: 0; width: 188px; z-index: 99999;} #access ul ul ul { left: 100%; top: 0;}#access ul ul a { background: #f9f9f9; border-bottom: 1px dotted #ddd; color: #444; font-size: 13px; font-weight: normal; height: auto; line-height: 1.4em; padding: 10px 10px; width: 168px;} #access li:hover > a,#access ul ul :hover > a,#access a:focus { background: #efefef;}#access li:hover > a,#access a:focus { background: #f9f9f9; /* Show a solid color for older browsers */ background: -moz-linear-gradient(#f9f9f9, #e5e5e5); background: -o-linear-gradient(#f9f9f9, #e5e5e5); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */ background: -webkit-linear-gradient(#f9f9f9, #e5e5e5); color: #373737;} #access ul li:hover > ul { display: block;}#access .current-menu-item > a,#access .current-menu-ancestor > a,#access .current_page_item > a,#access .current_page_ancestor > a { font-weight: bold;} /* Static Structure ----------------------------------------------- */ #page {width: 1000px} #main: {position: relative; } #secondary {float: left; padding-left: 734px; margin: 0 0; width: 20px} #access2-static{position:fixed;margin-left:-11px;margin-top:6px;border-left:21px solid #666;height:59px;} #access-static{position:fixed;margin-left:-11px;margin-top:6px;border-left:13px solid #666;height:100%; padding: 0;width: 50px !important;} .widget-area #static{position:fixed;top:110px;padding:0 23px 0 30px;border-top:59px solid #666;border-right:13px solid #666;height:100%; background:#eee; width:214px;margin-top:-30px;} .xoxo a{ font-weight: 500; font-family: "Merriweather Sans", sans-serif;} .xoxo {margin: 0;margin-top:-50px; width: 200px;} .xoxo .widget{background:#eee;} .xoxo h3{visibility:hidden;} .xoxo ul{list-style:none;} .widget-area #static div{position:relative;top:-45px;} .widget-area a {color: #555;} #categories-2{visibility:hidden; height: 0; width: 0;} /* Page structure ----------------------------------------------- */ #content{background:#fff;border-radius:5px;box-shadow:0 0 2px 2px #aaa; margin-right: 270px !important; margin-left: 14px !important; padding: 20px;} #page{background:#eee;margin: 10px auto;border-radius:5px;box-shadow:0 0 2px 2px #666; } #branding{border:none;} /* Responsive Structure ----------------------------------------------- ----------------------------------------------- ----------------------------------------------- */ @media (max-width: 1100px) { #access{width:515px;box-shadow:none;} #content{margin-right: 206px !important; margin-left: 14px !important; padding: 10px;} #page {width: 730px} #secondary {float: left; padding-left: 527px; margin: 0 0;} #access2-static{position:fixed;margin-left:-11px;margin-top:7px;border-left:21px solid #666;height:59px;} #access-static{position:fixed;margin-left:-11px;margin-top:7px;border-left:13px solid #666;height:100%; padding: 0;} .widget-area #static{width:153px} .xoxo {margin: 0;margin-top:-50px; width: 150px;} .xoxo a {font-size: 90%;} body,input,textarea{font-size:16px;} a[href$=TofContents] { font-size: 85%; text-decoration: none; } #contents a{font-size: 1em; line-height: 2em;} }/*end 1100*/ @media (max-width: 750px) { #secondary {float: none; padding-left: 0; margin: 0 0;} #page {width: 730px !important;} #access{padding:2px 20px 28px 20px; position: relative; left: -20px;} #access2-static{visibility:hidden;} #access-static{visibility:hidden;} #access{width:770px !important;} #syllabus h2{float:none;text-align:left;padding-left:10px;position:relative; left:-24px;font-size:130%;line-height:1.2em;} #syllabus ol{margin-left:40px;} .widget-area #static{visibility:hidden;} .live-demo{width:100%;margin:20px -14px 0;padding:20px 14px 5px 0;} #static{visibility:hidden!important;position:absolute!important;} #content{margin: 10px !important; padding: 10px; width: 680px !important;} body,input,textarea{font-size:16px; color: #333;} a[href$=TofContents] { font-size: 85%; text-decoration: none; } #contents a{font-size: 1em; line-height: 2em;} }/*end 750*/ /*iphone*/ @media (max-width: 480px) { #syllabus h2{left:-10px;font-size:130%;line-height:1.2em;} #branding{border-top:none;} #access{width:450px;box-shadow:none; padding:10px 0;} #content{margin-right: 28px !important; margin-left: 14px !important; padding: 10px; width: 420px;} #page {width: 430px;} #access2-static{ float: none; position:relative;margin-left:-11px;margin-top:7px;border-left:21px solid #666;height:59px;} #access-static{ float: none;position:relative;margin-left:-11px;margin-top:7px;border-left:13px solid #666;height:100%; padding: 0;} .widget-area #static{ float: none; width:153px} .xoxo { float: none; margin: 0;margin-top:-50px; width: 150px;} #categories-2{ float: none; visibility:visible; height: 36px; width: 50px; top: -60px; position: absolute; z-index: 10000} }end iphone