yangao85/html-css-responsive-practice

HTML-CSS-Responsive-Practice

Task 1 - Set up the project in Git Hub

• Create a forked copy of this project
• Clone your OWN version of the repository
• Create a new branch: git checkout -b .
• Implement the project on your newly created branch, committing changes regularly
• Push commits: git push -u origin

Task 2 - MVP

HTML

• Semantic HTML is used throughout the site - please use most semantic element possible
• all alt tags are filled out for accessibility
• in your navigation, home should link to the top of the page, about should link to the about section, plants should link to the shop section and contact should link to the contact section.

CSS

• background color of site and h1 is #FBFFFB
• Use scalable units for sizing of containers, fonts, margin, padding where possible (%, em, rem, vh, vw, etc.) avoid the use of px
• Title font: Oxygen
• Paragraph font: Source Sans Pro
• (note that the fonts in the design file are not the same as the google fonts)
• navigation should be fixed to the top of the page when the user scrolls and the opicity should be 0.9
• accent color (titles, links) is #266035
• "shop our indoor plant sale" button should switch background color and text color on hover
• must use flexbox for layout

RESPONSIVE

• write media queries for 800px and 500px - your site should match the files for the tablet and phone view respectively at these breakpoints