Project 2 Overview Introduction The purpose of this project is to allow you design and build a responsive website that can be viewed on a phone, tablet, or a full size computer. Unit Learning Outcomes The following CLOs are covered in this project: Create a multi-platform website. The following ULOs are also reinforced: Code the following: Fluid layouts Media queries in HTML, with separate CSS files Web page for phone Web page for tablet Web page for regular website Responsive images using the tag in phone views Responsive images using the tag in tablet views Responsive images using the tag in regular website Embedding media queries in one CSS file For FLEXBOX, creating a multi-platform web page Using hidden menus in phone, tablet and regular website views Information form in phone, tablet, and regular website views Survey form in phone, tablet and regular website views Use advanced CSS3 rules in phone, tablet and computer Directions There are 3 milestones for this project. They are due on the following dates: Milestone #1 Unit 5 by 11:59 pm --- 10 points Milestone #2 Unit 6 by 11:59 pm ---- 10 points Milestone #3 Unit 7 by 11:59 pm ---- 10 points Final Submission Unit 8 by 11:59 pm --- 100 points This you will be creating a responsive website that will be viewed on three different sized devices. The following table shows the breakdown of the three devices you will code for. Device Device width Standard website 800 - 1280px Tablet sized device 400 - 799px Phone sized device Less than 400px All styling of your website must be done with CSS. All CSS is required to be in external style sheets. Because we are coding a responsive website, you will need three CSS files, except for the page that is required to use FLEXBOX, where you will only have one CSS file. You will not be allowed to use any of the following. Using any of the following will result in a grade of ZERO for the entire project. Framework for building a responsive website. Adobe Muse Any software that generates HTML code from images Any software or website that creates responsive websites JavaScript or jQuery that controls the responsive website The purpose of this assignment is for you to build a complete website using media queries to control the appearance of the site on the different devices listed above. You may use HTML, HTML5, CSS, and only limited JavaScript or jQuery that is used for manipulation of content on the page. You are going to build a website for a community organization or a club. The website will contain the information listed below. You will determine the number of pages for the website and how the information is to be presented for each device format. The website will require a certain minimum amount of information. I have broken this down into pieces to better help you organize the required content. Opening page: This is the only required page. It will contain basic information about your organization. You will name this page index.html. Any other content can be put on this page. but remember you are designing for three different devices. Organization events There will be a calendar using Google calendar. You will not make the calendar public. There are no events on the calendar at this time but under the calendar, you will have searchable list of events (5-events minimum). Each event will then link to a .pdf flyer of that event. See this link for an example: https://www.w3schools.com/howto/howto_js_filter_lists.asp (Links to an external site.)Links to an external site. Join our organization form - this will be a 2-part process: Part 1 This is a form containing the following: last name, first name, address, city, state, e-mail address, and phone number. All text fields must be validated by HTML5. Part 2 Once the user submits the page, you will take them to a second registration page which will ask five (5) more detailed questions about the user's interest in the club they are joining. This will be a survey type form process. For example, if your club were for dog owners, you would ask questions about the number and breeds of dogs they own, their ages, etc. You will then create a page called welcome.html, which will welcome them to the organization. Products: This will contain t-shirts, hats and mugs supporting your organization. This page must be done with jQuery, accordion or tab panel. You will need photos or images of each product. History: This will contain information on the history of your organization. You must include at least 5 photos of a previous club activity. Photos must be displayed on the page using lightbox, making sure to make it responsive for use on three different devices. See this link for an example https://www.w3schools.com/howto/howto_js_lightbox.asp (Links to an external site.)Links to an external site. Contact information: This will contain the following information: mailing address, phone number, and e-mail contact. Tutorials page: This page will be done in a card format style using FLEXBOX to manage the content and the look of the page. You are required to create a separate CSS file for the FLEXBOX process to work. You will have at least 6 cards on the page, the cards must link to a pdf file that you will have to create or find content for on the web, tutorial content must relate to club topic. THIS PAGE IS REQUIRED TO USE THE FLEXBOX CONCEPT, (see week 7 lecture), IF FLEXBOX IS NOT USED ON THIS PAGE YOU WILL RECEIVE ZERO POINTS, for using FLEXBOX, even if you have used it somewhere else in your website. Video tutorial page: This page will contain, a link to a You Tube video that will be associated with your product. In order to obtain this video link you will go to You Tube and search for video for your club, ( it should be a tutorial type video) then research how to embed a link to this You Tube video, that is what will be on your page. Awards page: This page will list awards that members in your club have won.