I need help with this case. The files it wants me to open are empty except the pictures that it probably wants me to add to it. If you want to add a picture just insert it and put in blank and leave a comment. Thank you in advance!

here is file jb_styles

@charset "utf-8";

/* New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Case Problem 4 Author: Date: 04/30/2018 Filename: jb_styles.css

This file contains the screen styles used with the Jersey Buoys home page

*/

Then heres jb_home

Case Problem 4 for this Case Problem: jb home txt.html, jb styles tt.css 10 PNG files, 1 TXT fle u Jersey Buoys s Tony Gallo is the owner of jersey Buoys, a surfing school in Ocean City, New Jersey you as part of a team that will redesign the school's website, putting more emphasis on supporting mobile devices. Tony wants you to you with start by redesigning the website's front page. He's supplied graphi Complete the following cs and sample text. He needs you to write up the HTML code and CSS style sheets Using your folder. Enter itor, open the jb home txt.html and ib styles txt.css files from the htmlos ryour name and the date in the comment section of each file and save them as jb home.html and jb styles.css respectively ng the content of the jb_info.txt page. You file, create the content and structure of the jb_home.html are free to supplement the material in these text files with additional textual content your own if appropriate. The case4 folder includes public domain graphics that you appropriate to the case hypertext links because you will be linking to pages that don't actually exist devices. your website, but you should feel free to add your own non-copyrighted material problem, Use the 4 symbol for the value of the href attribute in your 3. Be sure to include the viewport meta element so that your page is properly scaled on mobile 4. Link your file to the jb styles.css style sheet. If you need to create other style sheets for your project, such as a reset style sheet, link to those files as well. Indicate the type of device in your link element. 5. Go to the jb styles.css file in your editor and create the layout and design styles to be used in your page. The design is up to you, but must include the following features: Media queries that match devices of a specific width with a cutoff for mobile devices at 480 pixels in screen width. Layout styles that vary based on the width of the device. . A navigation list that is initially hidden from the mobile user but that can be displayed in response to a hover or touch event over a navicon. . Telephone and email links that are reformatted to make them easier to use on mobile devices. .Tony does not want to display information on surfer slang in the mobile version of this page; exclude those elements in your media query for mobile devices. Flex layouts oriented in either the row or column direction. Be sure to include the WebKit browser extension in all of your flex styles. . Flex items that grow and shrink from a defined initial size based on the width of the device screen . Flex items that change their order from the default document order in the HTML file. . A flex layout that aligns the flex item content using the justify-content, align-items, align-content, or align-self properties 6. Include comments in your style sheet to make it easy for other users to interpret. 7. Test your layout and design on a variety of devices, browsers, and screen resolutions to ensure that your sample page is readable under different conditions, If possible verify the behavior of the page on a mobile device or a mobile emulator custom page 432