Web Design Basics

introduction to web design

13 Homework

Posted on October 5, 2012 by Onno

Homework for the Final

Update website with suggestions from the peer review. State how effective the peer review was in making you reconsider aspects of your site.
Write review and hand in to the person whose website you reviewed right after you reviewed it.

Homework for the Unit

The final project is to have a form on it.

@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