The Summit

This project is a static ski lodge landing page focused on improving the usability and visual feedback of links, buttons, and other interactive elements. It was created as part of the The Summit project from the Learn Links and Buttons lesson provided by Codecademy.

The page demonstrates how CSS hover states, active states, transitions, cursor styles, and color changes can make interactive elements clearer and more engaging for users.

Features

• Ski lodge landing page with a full-width mountain banner
• Fixed navigation bar with styled navigation links
• Hover feedback for standard links and navigation elements
• Custom call-to-action button with hover and active states
• Interactive activity buttons for different winter activities
• CSS transitions for smoother visual feedback
• Clear cursor changes to indicate clickable elements
• Custom typography using the Raleway and Amatic SC fonts
• Section-based layout with a banner, description, activities panel, and footer
• CSS styling for colors, spacing, borders, typography, and interactive states

File Structure

• index.html: Page structure, navigation, banner, content, activities, and footer
• starting.css: Base layout, typography, colors, images, and general page styling
• style.css: Link, navigation, button, hover, active, cursor, and transition styles

Usage

To view the project:

1. Download or clone the repository.
2. Open index.html in any web browser.
3. Hover over and click the links, main button, and activity buttons to view their interactive states.

Customization

If you would like to extend or modify this page:

• Update index.html to change the page content, navigation items, or activities
• Modify starting.css to experiment with the layout, typography, images, spacing, or colors
• Modify style.css to create different hover, active, and transition effects
• Add functional links to the navigation elements
• Add responsive styles for improved usability on smaller screens
• Add JavaScript for more advanced interactions or navigation behavior

Acknowledgements

This project was created using the guide provided by Codecademy. The original project can be found here.