web page with media queries

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.