>> Header & Footer in CSS
Page Layout Header Content Footer Navigation
Web-based Systems | Misbhauddin Laying out a header in HTML using CSS Header Layout Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin Header Components Search/ Login/Cart/Social Logo Identity & Title Navigation Links Web-based Systems | Misbhauddin
Types of Header (Based on Layout) CONVENTIONAL Logo Left/ Menu Right UN-CONVENTIONAL Logo Right/ Menu Left FOCUS Logo Center/ Menu Left& Right Web-based Systems | Misbhauddin
Types of Header (Based on Design) 1. The Huge Header The “BAD” Takes up a lot of Space The “GOOD” More Impact if done correctly Web-based Systems | Misbhauddin
Types of Header (Based on Design) 2. The Web App Screenshots of the Product The “CALL TO ACTION” Try Now / Sign Up for Free Web-based Systems | Misbhauddin
Types of Header (Based on Design) 3. The Illustrated Character Popular Trend WHY They add character, personality and a sense of friendliness to your website Web-based Systems | Misbhauddin
Types of Header (Based on Design) 4. The Portfolio Screenshots For Services/Products Companies WHY Show different examples of work alongside a tagline introducing yourself Web-based Systems | Misbhauddin
Types of Header (Based on Design) 5. The Carousel (Slider) WHY Allow you to fit in more information into the header with a slider effect Web-based Systems | Misbhauddin
What To Include In Footers SITE MAP Detailed list of the pages on a website, divided into categories Helps users to navigate Helps Web Crawlers (Search Engines) to locate pages Web-Based Systems - Misbhauddin
What To Include In Footers SITE MAP Web-Based Systems - Misbhauddin
What To Include In Footers SITE MAP Web-Based Systems - Misbhauddin
What To Include In Footers QUICK “ABOUT” OR “CONTACT” INFORMATION Web-Based Systems - Misbhauddin
What To Include In Footers A SIMPLE CONTACT FORM Web-Based Systems - Misbhauddin
What To Include In Footers BACK TO TOP LINKS Web-Based Systems - Misbhauddin
What To Include In Footers Social media Web-Based Systems - Misbhauddin
What To Include In Footers Copyright statement / Links Web-Based Systems - Misbhauddin
Web-based Systems | Misbhauddin Pre-requisite Download the lec7.zip file It includes a folder called assets with all the resources you will need to do the exercise. The output-exercise.png shows the expected output. Except for the navigation bar (menu bar) in the header and the Join Button, do everything. Hint: The footer has four columns (divs) – recall last class. Web-based Systems | Misbhauddin