/product-landing-page

Unit 1 Lesson 7 Lab: Responsive Web Design

GNU General Public License v3.0GPL-3.0

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:
      1. Header (fixed)
      • Logo
      • Menu
      1. Email sign-up
      2. Three product talking points
      3. Embedded YouTube Video
      4. Three cards advertising three different pricing points
      5. Footer with three links and a copyright
    • Desktop Layout:
      1. Header (fixed)
      • Logo
      • Navbar-style menu
      1. Email sign-up
      2. Three product talking points with font-awesome icons
      3. Embedded YouTube Video
      4. Three cards in a row
      5. Footer

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 and height inline as they do in this link. Use CSS to give your <iframe> a relative width (in percentages) and a max-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 that id in your anchor tag. More about that here

Submission Directions

...the usual.

  1. Fork this lab
  2. Clone it
  3. Create your first-last folder in fellow-submissions
  4. Add your project files there.
  5. Commit early. Commit often.
  6. push when done and then open a pull request 😎

Due Date

Friday, October 4 at 9AM