Hometown Homepage

My hometown homepage solo project created for Scrimba Learn HTML and CSS course.

Preview

Live Demo

Check it out on Github Pages

About this project

The project is a landing page consists of four main sections:

• Section one is a hero section as introduction, it contains:

  • A background image
  • h1 heading as a main Title
  • A paragraph as a brief description of my hometown.

• Section two is a container of landmarks, it contains:

  • h2 heading title
  • Three columns each one containing:
    • h3 heading
    • An image as link
    • A paragraph as a brief description of the landmark

• Section three is a container of activities, it contains:

  • h2 heading title
  • Three columns each one containing:
    • Icon
    • h3 heading
    • paragraph as a brief description of the activity

• Section four for the guide card which contains:

  • My personal image
  • h4 heading
  • Paragraph to introduce me as a guide
    
  
  

Requirements

• Make it about your own hometown or country
• use classes
• Use flexbox
• Use background image
• Use color palette
• Add a whole new section
  

My process

The project built with:

• Semantic HTML5 markup
• CSS custom properties
• Flexbox for aligning elements
• Hover pseudo class on landmarks
• Font awesome icons in activities section
• Colors used: Color Palette
• Media Queries for both desktop and mobile devices
  

Attributions

• Images by Wikimedia Commons
• Favicon by Flaticon