Build a Website

Two View Layout For this assignment you will be creating a responsive page using media queries and the 12-column grid layout. Your page will be coded "mobile-first" and will render two unique layouts for mobile and desktop screens. The subject of your page will be a biography or "fan page" of your favorite actor/actress. The mobile layout must contain/display: -a header with a page title -a menu/nav button (not a full menu) -the subject's name and headshot (picture) -a brief biography -a 4-picture gallery -a list of their notable roles (minimum of 4) -a list of awards or nominations (minimum of 2) -a link for "more information" -a footer containing your name and the date -all sections occupy 100% width The desktop layout must contain/display: -a header with a page title and image -full navigation bar/menu -subject's name and headshot -brief biography -an 8-picture gallery -list of notable roles (same roles as above but with one corresponding image, each) -list of awards, etc. -a section of at least 4 links to other sites about the subject -a footer with your name, date, and the application used to code your page The HTML and CSS code: -submit one "[login to view URL]" and one "[login to view URL]" file to blackboard -make use of the "background-image" CSS3 tools we've looked at in class -layout your page using a 12-column grid -a single media query should change your layout once the screen is at least 768 px wide -all previous coding requirements hold true... tag structure, viewport meta tag, alt attributes, etc. Three Layout For this assignment, you will be modifying your previous submission so that your content renders in three distinct layouts: mobile, tablet, and desktop. First, correct any/all mistakes or errors from your previous submission. Remember, your CSS and HTML code should be written "mobile-first". By default, your page renders in mobile view, a media query should trigger the change to tablet view at 768px, then a second media query should trigger the change to desktop view at 1024px. Pretty much all of your CSS files should have the following rules (yes, you may copy/paste them): /** TO DEFAULT ALL COLUMN CLASSES TO 100% AND FLOAT THEM LEFT **/ [class*="col-"] {float:left; width=100%; margin: 0;} /** TO CONTAIN A 12-COLUMN SUM IN A SINGLE ROW **/ .row:after {content: ""; clear: both; display: block;} /** TO TRIGGER TABLET VIEW AND SET TAB COLUMN WIDTHS**/ @media screen and (min-width: 768px){ .col-t-1 {width: 8.33%;} .col-t-2 {width: 16.66%;} .col-t-3 {width: 25%;} .col-t-4 {width: 33.33%;} .col-t-5 {width: 41.66%;} .col-t-6 {width: 50%;} .col-t-7 {width: 58.33%;} .col-t-8 {width: 66.66%;} .col-t-9 {width: 75%;} .col-t-10 {width: 83.33%;} .col-t-11 {width: 91.66%;} .col-t-12 {width: 100%;} } /** TO TRIGGER DESKTOP VIEW AND SET DSK COLUMN WIDTHS**/ @media screen and (min-width: 768px){ .col-d-1 {width: 8.33%;} .col-d-2 {width: 16.66%;} .col-d-3 {width: 25%;} .col-d-4 {width: 33.33%;} .col-d-5 {width: 41.66%;} .col-d-6 {width: 50%;} .col-d-7 {width: 58.33%;} .col-d-8 {width: 66.66%;} .col-d-9 {width: 75%;} .col-d-10 {width: 83.33%;} .col-d-11 {width: 91.66%;} .col-d-12 {width: 100%;} } If your CSS file does not contain the above code, it should still contain ONLY 2 media queries (one for tablet view and one for desktop view). It should also demonstrate a knowledge of the 12-column grid. What you choose to show and how you choose to arrange your content in this new layout is up to you. It should not be wildly different than either your mobile or your tablet layouts. Generally, though try to stick to using 33% or 50% widths for your content. in other words, try not to use more than 3 columns in a row in your tablet layout. Also, in this assignment, I would like you to integrate at least two different Google Web Fonts, using the "@import url()" command in your CSS file. All page text should be assigned a font through CSS.