Skip to content

Global CSS Updates

  1. Update the logo to the crownCoffeeLogo_white.png
    • This will make the logo white, and you will not see it in the browser until the background color is modified.
    • Note: The Logo image will be resized in later instructions.

Back to Top image

Both the coffeeGuide.html and menu.html pages will have a "Back to Top" image added to the "Back to Top" link at the bottom of the page.

  1. Add the backToTop.png image to the coffeeGuide.html and menu.html pages.
  2. Place the image before the “Back to Top” text.
    • The image and the “Back to Top” text should both be contained in the <a> element.
  3. Add a line break after the image.
    • Note: The Back to Top image will be resized later in these specifications section.

Example of Back to Top image and text

Global styles(main.css)

Some styles for the Crown Coffee website will apply to multiple pages, such as the logo, navigation, header, and footer. These styles will be in added to the the main.css stylesheet. Follow the steps below to achieve the desired styling.

Make sure your main.css is properly connected to each HTML document before proceeding.

Body element styles

  • Use a sans-serif font family for all text.
  • Set the body element to have 0 margins.

Main element styles

  • Give the main element a width of 55%
  • Center the main element to the viewport (browser window)
  • Add top and bottom margins

Header element styles

  • Add a background color #2E1B11
  • Add a text color #FFFFFF
  • Center the text
  • Add top and bottom padding
  • Add a top and bottom border #ED4749

Headings

  • Change the color of level 1 headings #FFFFFF
  • Make level 1 headings font weight “normal”
  • Increase the letter spacing of level 1 headings
  • Change the color of any sub level headings (only target headings you have in your HTML) #ED4749

All links in the main body of the website should have these styles.

  • Remove the default underline
  • Change the color of unvisited links #709F10
  • Change the color of visited links #A87B50
  • Change the color of hovered links #ED4749

These styles should override the previously created link styles to format only the top navigation links.

  • Change the color of unvisited links #ED4749
  • Change the color of visited links #A87B50
  • Changed the color of hovered links #C39F89
  • Add a text shadow to hovered links

Example of completed header and navigation styles

Header Example

Logo Sizing

  • Give the logo image a width of 250px

Back to Top Sizing

  • Give the image a width of 50px
  • Add padding to the right, left, and bottom
  • Change the background color #2E1B11
  • Change the text color #D6CBC0
  • Add a top border #ED4749
  • Right-align the address element

Footer Hours/Location Text

  • Change the background color #FFFFFF
  • Add padding to all sides
  • Add a border to all sides #A87B50
  • Round the border corners
  • Change the border color on hover #ED4749

Example of completed footer styles

Example footer