Responsive WP site from my water theme

Deadline: June 12th! Make a responsive, Wordpress site with six different page templates from my Illustrator design files. The site has two breakpoints, so every page will have three layouts. The different layouts are in the range 320-699 px, 700-1023 and 1024-1280 px (because I want the widest layout to show on a landscape iPad). I have given you two examples for each three layouts so that you can see about how the content will flow/scale. The site should be fully fluid responsive, so that the content will always (or at least up to 1280 px) fill the browser window nicely (but with margins, described below), like the images and text scale on for example these two pages: [login to view URL] [login to view URL] Pay attention to typography like font sizes, paragraph spacing and so on. For the page side margins, you will see that they are different for different widths. Use em or % for the margins so that they scale nicely. Create the site at [login to view URL], and then move the site to another server/address (I will provide you with the address later) once it is complete. The images must be replaceable. Don't hard-code them in to the theme. Use this responsive image script to minimize traffic for narrow window widths: [login to view URL] All text except for the logo should use regular fonts and webfonts. The stationary design uses the font “Baskerville old face”, but the webfont "Libre Baskerville" looks almost just like it, so you can use that one. For the narrowest design, the menu will be a drop-down menu. Open the file “[login to view URL]" for reference. When the menu button is pressed on the finished page, the menu expands in an animation like the menu on this page [login to view URL] (view it in a narrow browser window so that the menu is collapsed at first.) The wide layout has five menu items. The logo and “Hem” should link to the start page. The flag, which is in the menu in the narrow layout and in the top right in the medium and wide layout, should link to the English page, which we will create when this site is done. So you could just make a simple page that says “English version coming soon!” and link to it, for now. The Wordpress installation should be in Swedish, and must support the Swedish characters "åäöÅÄÖ". All error messages and other text should also be in Swedish. We want no English text whatsoever on the Swedish version. The layout should be made with HTML5 standard. The phone number should be a phone link on devices that have phone abilities. Specific pages: Start page: I have made a single colored bar in the top under the menu to extend the background image’s height on the medium and wide layout. Be careful and make that color exactly like the top of the bg image so that the transition is not visible. The movie strip and text ”Se en film om Thoreauvatten” in the wide layout will respond to mouse over by sliding into the viewport. See the hidden group “movie rolled over” for what I mean. (It is in the layer “wide desktop\content\movie rolled over”.) When the user clicks the movie image, a lightbox will appear with the movie. See the lightbox design in the hidden group “movie lightbox” in the “wide desktop” artboard. The x in the top right of the movie closes the lightbox. The Esc key should also close the lightbox. The movie should stream from our server and start directly when the lightbox activates. The “Hotell & Restaurang” and “Företag” buttons/images should link to two specific products on the product page. I will provide you with the link later. For the medium and wide layout, the complete group with image, the blue bar and text should be clickable, not just the text. Thoreauvatten The lightbox for the movie applies to this page too. -------------------------------------------------------- The rest of the description is in the attached Word document.