Unit 1 Lesson 7 Lab: Responsive Layouts
Build a Mobile-First Product Landing Page
Objective
The objective of this project is to build a landing page for a product using the principles of mobile-first design. To complete this project, you will have to use media queries to create appropriate breakpoints to ensure that your landing page looks great on mobile and desktop browsers.
Requirements
You will model your landing page off of this site. You are free to create or choose your own product that you will market but it must meet the following requirements, all of which are present in the sample page:
- The mobile and desktop layouts of your page must be identical to the mobile and desktop layouts of the sample:
- Mobile Layout:
- Header (fixed)
- Logo
- Menu
- Email sign-up
- Three product talking points
- Embedded YouTube Video
- Three cards advertising three different pricing points
- Footer with three links and a copyright
- Desktop Layout:
- Header (fixed)
- Logo
- Navbar-style menu
- Email sign-up
- Three product talking points with font-awesome icons
- Embedded YouTube Video
- Three cards in a row
- Footer
- Mobile Layout:
Tips
- Experiment with the
fixed
display
property to achieve a header that stays in place when you scroll. - The icons that you see in the desktop display are available for free at Font Awesome. These come in handy quite often so now is a good time to learn how to use them 😁.
- Your buttons on your card should respond when they are moused over. Explor the
:hover
psuedo-selector to achieve this effect. - YouTube videos are simple to embed. However, do not set
width
andheight
inline as they do in this link. Use CSS to give your<iframe>
a relativewidth
(in percentages) and amax-width
. - The navbar links direct the user to different sections on the page (click on "Features", "How It Works", and "Pricing" to test it out). This can be done by assigning the different sections of your page an
id
and linking to thatid
in your anchor tag. More about that here
Submission Directions
...the usual.
- Fork this lab
- Clone it
- Create your
first-last
folder infellow-submissions
- Add your project files there.
- Commit early. Commit often.
push
when done and then open a pull request 😎
Due Date
Friday, October 4 at 9AM