/design-practice

Primary LanguageHTML

Specs:

Coding time

  • full page design, and style: 10 hrs
  • adding responsive media queries: 1 hr
  • adding extras: 2 hr
  • hosting and optimization: 1 hr

Color

rgb(255, 166, 0)

Font-family

Lato, sans-serif

Design and Layout

  • Build out the fluid grid.
  • Using the grid.css given by course, similar to bootstrap but more explained.

Section 0: Header

  1. set h1 headline text
  2. add background image for full viewport height within header container
  3. add links under h1 of hero-text-box
  4. style header position of text
  5. add link active and hover over states in css
  6. add transitions to css of links
  7. add nav container
  8. set as row with a ul and links
  9. add logo above ul
  10. style nav and logo

Section 1: Features

  1. add new section
  2. add row with h2 tagline and long copy
  3. add row with (4x) col span-1-of-4 div's
  4. add icon, h3 title, and content to each
  5. modularize the h1 and h2 css
  6. style the section heading
  7. style the long-copy
  8. style the icons and feature boxes

Section 2: Meals Showcase

  1. add new section
  2. add 2x ul's with 4 li > figure > img
  3. add layout formatting to img elements
  4. add animation effects and transitions to images
  5. rebalance spacing on long-copy

Section 3: Steps

  1. add new section
  2. add heading div row
  3. add new row container
  4. add 2 col divs
  5. add phone img to first col
  6. add 3 divs for steps to second div
  7. add numbers to plain div
  8. add text to p element
  9. add class img.app-screen, col.steps-box, inner col div.works-step
  10. add margin to .steps-box
  11. add alignment to first col as right
  12. add alignment to last col as left
  13. add responsive padding to last col
  14. resize .app-screen img
  15. format the number divs
  16. set to inline-block to flow next to text elements
  17. add spacing to the preceding text
  18. clear the floats from previous section
  19. add offwhite background to section-steps

Section 4: Cities

  1. add new section
  2. add new row
  3. nest h2 with heading
  4. add new row with 4 cols
  5. add img icon and text to each col
  6. reuse box class from above.
  7. add feature boxes with images and logos
  8. resize images to width 100%
  9. style logos
  10. style links
  11. update above app store links border

Section 5: Testimonials

  1. add new section
  2. add col with 3 cols
  3. add content with block quotes.
  4. style img, cite and blockquote
  5. add glyph for quotation mark
  6. modify positioning of blockquote

Section 6: Plans

  1. add new section
  2. add heading row
  3. add new row with 3 cols
  4. add div for plan-box
  5. add plan title
  6. add plan-price with content
  7. add plan-price-meal with content
  8. add ul for features
  9. add icon font as li's
  10. add content to li's
  11. add styes to boxes and content

Section 7: Contact Form

  1. add new section
  2. add form elements
  3. add attributes to elements
  4. style inputs and labels
  5. modify the submit button to be included in the button settings
  6. center the form
  7. space and border styles for form elements

Section 8: Footer

  1. add footer section
  2. add nav ul
  3. add social ul
  4. add copyright text
  5. style both uls
  6. add hover effects to links
  7. add proper brand colors to social icons hover effects
  8. resize section

Media Queries

  1. add sizing for each break points