Build a Layout for Relaxr

Students will fork this repository and clone it. Upon completion, push (sync/publish) all of your changes after committing them.

Reading from Learn HTML & CSS

• Chapter 4: Opening the Box Model
• Chapter 5: Opening the Box Model

Description

A hot, new NY Tech Startup, Relaxr, has approached you to help them develop a new landing page for their company. They've handed you the design file for the site, along with the copy and assets. You need to take these files and turn it into a landing page.

Note: For a view of the full page, see the jpg provided in the deliverable. Don't be alarmed if your font sizes don't perfectly match what you see in the jpg - trust in the design file!

Small Screen & Widescreen Views

Remember to use a wrapper id/class to set a content width

Real-World Applications

• Build a website from a design file
• Integrate advanced CSS properties
• Use HTML5 structural elements (section, nav, aside, ...)
• Use CSS Resets to "normalize" the rendering of your page across different browsers (normalize.css)
• Use the Box Model to style element borders and structure your page

Technical Requirements

• Use HTML5 structural elements (nav, header, footer - please as few divs as possible)
• Use a CSS Reset file in addition to your style.css file to style the page (normalize.css)
• Use IDs and Classes to to select and style elements on the page
• Style your text with the Google Fonts provided by your style guide. Google fonts provides the CSS you need to change fonts.
• Follow naming conventions, maintain consistency across .html and .css files and use best practices for naming IDs and Classes
• Indent nested elements to increase your code's readability

Resources

• Starter code can be found inside of the "starter_code" folder for this assignment.
• Box Model explanation from Mozilla
• Box Model Breakdown
• CSS Tricks difference between IDs and Classes
• What is a CSS Reset?
• Relaxr's design file