Odin Landing Page

The Odin Project https://www.theodinproject.com/lessons/foundations-landing-page

Odin Landing Page is a website that will display

Skills:

• basic HTML
• basic CSS
• flexbox

Desired Outcome

Theme

Result

• improve accuracy by increasing padding sizes for sections

TODO:

• Header
• Hero
• Info
• Quote
• Action
• Footer

Steps Taken

• Set up repository

• create README, index, css files

• auto-fill html (!) and link to css file

• add navbar

  • nav w list of links
  • links arranged w flexbox
  • logo link kept to left w margin-right: auto

• add header font

  • access https://fonts.google.com/specimen/Roboto
  • select families: light italic, regular, bold
  • html: embed font by copying link to head of html
  • css: specify font-family as directed

• add hero containers and content

• Overall Formatting

  • keep background color against edges w all margin and padding set to 0 (overrides default browser values)
  • pad sections away from edges w set left/right padding

• add info section containers