Class Project 01 – Div Tags

Class Project 02 – Footer

Make the HTML footer match the mockup in your exercise files:
1. Exercise Files > Project 1 > Mockup Example - Project 1.jpg
It doesn’t have to be pixel perfect. Just guess the sizes and spacing.
Requirements
1. Ignore the map in the middle (we’ll do that later together).
2. Have spacing above and below the footer.
3. The footer text is: Main St, Blackabbey, Adare, Co. Limerick - Copyright 2017©
4. Put the text in a <p> tag and style the text to match the mockup.
5. Background color is black which is transparent.
Take a screenshot of both your completed pages in Chrome and share to show that you’ve done it in any or all of the following:
1. Assignments section of this website
2. Add to comments on the page.
3. Social media & tag Dan
  1. Instagram: @bringyourownlaptop #byolweb
  2. Twitter: @danlovesadobe #byolweb
  3. Facebook group here. #byolweb

Class Project 03 – Flexbox Header

Add the logo & nav to the header of our website using your new flexbox skills.
Your page will look like this when you are finished:

Exercise Files > Project 2 > Class Project 3.png
Requirements:
1. Add a background color to the entire site of: #FC5E55
2. Create a logo & nav box inside the header tag.
3. Add the logo to the logo box.
  1. Image is in: Exercise Files > Project 2 > logo-roar-bikes.png
4. Add text to the <nav> box but don’t make them links or buttons yet, Just plain old text:
  1. Book Online About Contact
5. Make the nav right aligned.
6. Remove the background color & height of the header.
7. Add padding to the top & bottom of the header.
8. Make sure both the logo & nav are centered vertically.
Take a screenshot of both your completed pages in Chrome and share to show that you’ve done it in any or all of the following:
1. Assignments section of this website
2. Add to comments on the page.
3. Social media & tag Dan
  1. Instagram: @bringyourownlaptop #byolweb
  2. Twitter: @danlovesadobe #byolweb
  3. Facebook group here. #byolweb

Class Project 04 – Nav Button

Goal: to create your own button class which looks like this:

bafd7de7

You’ll leave ‘mybutton’ applied to the hero box but create a new style called ‘navbutton’ and apply it to your navigation.
Requirements
1. They are all <a> tags.
2. Create your own custom class called ‘navbutton’.
3. White border around the button.
4. Text is Playfair Display.
5. Text is white
6. No underline.
7. No background color.
Take a screenshot of both your completed pages in Chrome and share to show that you’ve done it in any or all of the following:
1. Assignments section of this website
2. Add to comments of the page.
3. Social media & tag Dan
  1. Instagram: @bringyourownlaptop #byolweb
  2. Twitter: @danlovesadobe #byolweb
  3. Facebook group here. #byolweb

Class Project 05 – Header Design

Goal: to recreate this header:

5b5a840f

Lizz Soup

12