This assessment contains materials that may be subject to copyright and other intellectual property rights. Modification, distribution or reposting of this document is strictly prohibited. Learners found reposting this document or its solution anywhere will be subject to the colleges Academic Integrity policy. ASSIGNMENT 1 Coding Guidelines The assessment will be tested using Chrome web browser. Before submitting, ensure that all links and images are working by opening your index.html file in a Private Browsing window (incognito mode). In addition to implementing the required functionality, grading is based on appropriate usage of coding conventions demonstrated in class, clear organisation of code, clarity of naming, etc. HTML must demonstrate appropriate and thoughtful usage of elements: Semantic tags must be used to organise the different parts of the website Where possible, text content must be enclosed in an appropriate text element tag, ie: heading, paragraph, span, or tag. All CSS must be written in an external stylesheet, and imported into your index.html via the tag. No inline styles or internal stylesheets permitted. CSS must demonstrate appropriate and thoughtful usage of CSS selector syntax: Where appropriate, use class selectors to create reusable css styles Where appropriate, use tag and relational selectors to target specific groups of elements Excessive usage of styling via id selectors will not be accepted (ie: applying an id to every element instead of thoughtfully using tag, class, and relational selectors) You may use an icon library. No other 3rd party CSS tools or frameworks are permitted Unless otherwise specified, you should refer to the expected output for the websites text, colours, whitespacing, and alignment. Submission Checklist Organize your files as follows HTML file must be named: index.html CSS file must be named: styles.css Any image files should be placed in a folder called assets Place all files in a folder called IndividualFirstName. Replace Firstname with your name.For example, IndividualDavid Create a zip file of the folder, and rename the zip file to IndividualFirstName.zip, replacing firstname your first name and username. For example: IndividualFirstName.zip. Rar and 7zip files are NOT accepted. Submit your zip file to the dropbox by the specified due date. 0 This assessment contains materials that may be subject to copyright and other intellectual property rights. Modification, distribution or reposting of this document is strictly prohibited. Learners found reposting this document or its solution anywhere will be subject to the colleges Academic Integrity policy. Academic Integrity This is an individual assessment You may use the course materials You may use the Internet to look up HTML or CSS syntax. However, following tutorials is not permitted You are responsible for familiarising yourself with the colleges Academic Integrity Policy. Actions that constitute academic dishonesty include, but are not limited to: Reposting any part of the assessment to online forums or homework help websites Contract plagiarism: Purchasing a solution, or completing a solution for compensation Sharing or receiving source code, references, or assistance from others Grading The grading criteria for each section includes: Section meets the described requirements The look and feel of the section is complete and polished Pleasing typography, color schemes, and imagery All required image assets are included in the submission (no broken links or images) Appropriate usage of containers, flexbox, margin, and padding. Appropriate usage of HTML semantic tags and CSS selectors 1 This assessment contains materials that may be subject to copyright and other intellectual property rights. Modification, distribution or reposting of this document is strictly prohibited. Learners found reposting this document or its solution anywhere will be subject to the colleges Academic Integrity policy. WEBSITE DESCRIPTION In this assessment, you will build a single page website for a music festival. The expected output of the webpage is provided in the course webpage. Using HTML and CSS, write the code to produce the website. Website Icons and Fonts 1. Use Google Fonts for the text of your website. You may choose any combination of fonts you like. Ensure that the overall sizing of fonts is proportional to the fonts displayed in the expected output. 2. Use Boostrap Icons for webpage icons. a. The library must be imported using the CDN , not the @import syntax. Use the tag version of the icon. Website Organisation The website is organized into these sections: Header section contains the webpage navigation menu Hero section this is the main section of the website and displays information about the page. Lineup this is a subsection and displays information about the musical bands playing at the festival Tickets and Passes this is a subsection and displays information about what ticket purchasing options the user has Footer section this is the bottom section and contains copyright and social media icons. Header section 1. The top of the website contains a navigation section with links: Music LIneup, Tickets, Plan Your Trip, Shop, FAQ, and Contact. Refer to the expected output for text content, images, and alignment. 2. Set the href of each link to #. 2 This assessment contains materials that may be subject to copyright and other intellectual property rights. Modification, distribution or reposting of this document is strictly prohibited. Learners found reposting this document or its solution anywhere will be subject to the colleges Academic Integrity policy. Hero Section 1. Displays a background image and explains the purpose of the website. Refer to the expected output for text content, images, and alignment. 2. The background of the section consists of an image that occupies the full width and height of the section. You may use any appropriate image you like. 3. The height of this section must be set to the users entire viewport height. You must use appropriate viewport sizing (vh/vw). 4. NOTE: there is a symbol between August 10-12 and Seabridge Island. Implement this symbol using the html bullet entity Lineup Section 1. This section contains information about the musicians that will be performing at the music festival, and an embedded Spotify music playlist. Refer to the expected output for text content, images, and alignment. Festivals Schedule Embedded Spotify playlist 3 This assessment contains materials that may be subject to copyright and other intellectual property rights. Modification, distribution or reposting of this document is strictly prohibited. Learners found reposting this document or its solution anywhere will be subject to the colleges Academic Integrity policy. 2. Festival Schedule: Displays a listing of the festivals schedule and the bands playing on each day. The festival lasts 3 days. You may use any dates and band names that you like. a. NOTE there is a symbol between each band name. Implement this symbol using the html bullet entity 3. Spotify Playlist: The section also shows an embedded Spotify playlist. You can use any available Spotify playlist that you wish (https://open.spotify.com/) The HTML embed code can be found by selecting any Playlist on Spotify.com, then choosing the > Share > Embed Playlist option. 4 This assessment contains materials that may be subject to copyright and other intellectual property rights. Modification, distribution or reposting of this document is strictly prohibited. Learners found reposting this document or its solution anywhere will be subject to the colleges Academic Integrity policy. Tickets and Passes Section 1. This section describes the options the user has for purchasing a ticket to the music festival. Refer to the expected output for text content, images, and alignment. 2. The ticket types must be arranged in 3 columns. Use CSS Flexbox. 3. Each ticket type consists of an icon, the name of the ticket type, the price of the ticket, and a button. You may customise the icons, pricing, and ticket type names to your liking. a. Use Bootstrap Icons for the icons 5 This assessment contains materials that may be subject to copyright and other intellectual property rights. Modification, distribution or reposting of this document is strictly prohibited. Learners found reposting this document or its solution anywhere will be subject to the colleges Academic Integrity policy. Footer Section 1. The footer section of the website consists of copyright information and social media icons. Refer to the expected output for text content, images, and alignment. 2. Use Bootstrap icons for the social media icons. END OF ASSESSMENT 6