Homework 2 Responsive Websites with Flexbox

Homework 2 Responsive Websites with Flexbox
1 Assignment Objectives The goal of this assignment is to sharpen your skills with CSS3, specifically responsive design and flexbox. In this assignment, you will only be writing CSS, the HTML is provided for you. Using media queries, your website’s style will respond differently based on the page’s width. This assignment is to be completed individually, you are permitted(andencouraged)touseonlineresourceslikeMozilla’sMDN.Inaddition, itisrecommendedtocomplete some challenges on Flexbox Froggy to learn the basics of Flexbox. If done properly, your CSS should result in the following views:
Desktop
1
Left: Tablet, Right: Phone
2 Setup For this assignment, you will be editing one file, solution.css, which is linked to page.html. If you open index.html, it will show three frames of page.html with different widths for desktop, tablet and mobile views to assist you with responsive development. You must not edit these html files. 3 General CSS The first part of the assignment is to create the general properties that will be used with commonly with all widths of your webpage. Style the following elements as directed:
• body – Background color of #eee • header – Background color of #49516f – Must have a flexbox layout – Have items aligned to center – Padding of 20px top and bottom • header h1 – Margin of 0 on all sides – Text color of white • header span – Margin of 0 on all sides
2
– Text color of white • .logo class – Padding of 5px on all sides – Margin of 10px on all sides – Height and Width of 100px – Border of 5px width, solid type and white color • .posts class – Must have a flexbox layout – Flex elements must wrap into multiple lines • .post class – Must automatically grow to flex parent (Hint: MDN Link) • .post-body class – Height of 200px • .post-body class – Height of 200px • .post-container class – Margin of 10px on all sides – Padding of 10px on all sides – White background color – Must have a flexbox layout – Have items aligned to center • .post-pic class – Height and Width of 200px – Right margin of 10px 3.1 Responsive View I: Desktop This will be your first media query that you create in your solution.css file. This media query should match the media where the minimum width is 999px. These are the properties that the query will overwrite: • .posts class – Set the direction of the flexbox to column – Align the items of the flexbox to center • .post class – Set the maximum width to 800px – Set the element to automatically flex to it’s parent •
If done correctly, you should see that elements in the header are centered and the posts will grow to a maximum of 800px:
3
3.2 Responsive View II: Tablet Your second media query will be for the Tablet view that match the maximum width of 998px and a minimum width of 400px. Here are the properties: • header – Justify the content of the flexbox to center • .posts class – Set the direction of the flexbox to row – The flexbox must wrap elements • .post-container class – Have the flex direction to a column • .post class – Have the element flex to 50% of the parent • .post-pic class – Width of 100% – Height of auto If implemented correctly, your tablet view should resemble the following:
4
3.3 Responsive View III: Phone YourlastmediaquerywillbeforthePhoneviewthatmatchthemaximumwidthof399px. Herearetheproperties: • header – Have the flex direction to a column – Align text to the center (Hint: you don’t need flex for this one) • .logo class – Have the border radius be 50% • .posts class – Must have an automatic flex basis – – Have the flex direction to a column • .post-container class – Have the flex direction switch to a column • .post-pic class – Width of 100% – Height of auto The correct style for your phone view should resemble the following:
5