Manage Landing Page

A modern, responsive landing page built with HTML5, CSS3, and JavaScript. This project showcases a complete business landing page with interactive features, testimonials slider, and form validation.

🎯 Overview

This project is a solution to the Manage Landing Page challenge on Frontend Mentor. The challenge focuses on building a pixel-perfect, responsive landing page that matches the provided design specifications.

The Challenge

Users should be able to:

• ✅ View the optimal layout for the site depending on their device's screen size
• ✅ See hover states for all interactive elements on the page
• ✅ Navigate through testimonials using a horizontal slider
• ✅ Receive validation feedback when submitting the newsletter form
• ✅ Experience smooth animations and transitions

✨ Features

🎨 Responsive Design

• Mobile-first approach with breakpoints at 768px
• Optimized for devices from 320px to 1440px+
• Fluid typography and spacing

🧭 Interactive Navigation

• Mobile hamburger menu with smooth animations
• Accessible navigation with proper ARIA labels
• Click-outside-to-close functionality

📱 Testimonials Slider

• Touch-friendly horizontal scrolling
• Dot navigation indicators
• Smooth scroll behavior with CSS scroll-snap
• Auto-sync between scroll position and active dot

📧 Form Validation

• Real-time email validation
• Custom error messaging
• Accessible form labels and error states
• Prevents invalid submissions

🎭 Modern UI/UX

• Smooth hover effects and transitions
• Loading animations for images
• Intersection Observer for scroll animations
• Professional color scheme and typography

🛠 Technologies Used

• HTML5 - Semantic markup and accessibility
• CSS3 - Modern layout with Grid and Flexbox
• JavaScript (ES6+) - Interactive functionality
• CSS Custom Properties - Consistent theming
• BEM Methodology - Scalable CSS architecture

Key CSS Features

• CSS Grid for complex layouts
• CSS Custom Properties (variables)
• CSS Scroll Snap for smooth scrolling
• CSS Transforms and Transitions
• Mobile-first responsive design

JavaScript Features

• ES6+ syntax and features
• Intersection Observer API
• Form validation with regex
• Event delegation and optimization
• Smooth scrolling implementation

📦 Installation

1. Clone the repository

   git clone https://github.com/Ayokanmi-Adejola/manage-landing-page.git
   cd manage-landing-page

2. Open in your preferred development environment

   # Using VS Code
   code .
   
   # Or open index.html directly in your browser
   open index.html

3. For development with live server

   # Using Python
   python -m http.server 3000
   
   # Using Node.js (if you have live-server installed)
   npx live-server

🎮 Usage

Development

• Open index.html in your browser or use a local development server
• Edit styles in style.css
• Modify functionality in script.js
• All images are located in the images/ directory

Customization

• Colors can be modified in the CSS custom properties at the top of style.css
• Typography settings are centralized in the :root selector
• Component styles follow BEM methodology for easy maintenance

📁 Project Structure

manage-landing-page/
├── index.html              # Main HTML file
├── style.css              # Stylesheet with all styles
├── script.js              # JavaScript functionality
├── README.md              # Project documentation
├── style-guide.md         # Design specifications
├── images/                # Image assets
│   ├── logo.svg
│   ├── illustration-intro.svg
│   ├── avatar-*.png
│   ├── icon-*.svg
│   └── bg-*.svg
└── design/                # Design reference files
    ├── desktop-design.jpg
    ├── mobile-design.jpg
    ├── active-states.jpg
    └── mobile-navigation.jpg

🎨 Design Specifications

Layout Breakpoints

• Mobile: 375px (design reference)
• Desktop: 1440px (design reference)
• Responsive: 320px - 1920px+ (implementation)

Color Palette

• Primary Orange: hsl(12, 88%, 59%)
• Primary Blue: hsl(228, 39%, 23%)
• Neutral Gray: hsl(233, 12%, 13%)
• Light Orange: hsl(13, 100%, 96%)
• Light Gray: hsl(0, 0%, 98%)

Typography

• Font Family: Be Vietnam Pro
• Font Weights: 400 (Regular), 500 (Medium), 700 (Bold)
• Base Font Size: 16px

🌐 Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

Progressive Enhancement

• Core functionality works without JavaScript
• Enhanced experience with JavaScript enabled
• Graceful degradation for older browsers

👨‍💻 Author

Ayokanmi Adejola

• Frontend Mentor: @Ayokanmi-Adejola