ActiveBox Landing Page

Overview

ActiveBox is a modern, responsive landing page template designed for businesses, startups, and creative agencies. It features a clean, minimalist design with a focus on showcasing content effectively across all devices.

Features

• Fully Responsive Design - Optimized for all screen sizes from mobile to desktop
• Modern UI Components - Clean and professional design elements
• Interactive Elements - Smooth animations and transitions
• Optimized Performance - Fast loading times and efficient code
• Cross-Browser Compatibility - Works on all modern browsers
• Accessibility Features - ARIA attributes and semantic HTML
• Customizable Sections - Easily modify content to fit your needs

Sections

1. Header - Navigation with smooth scrolling and mobile-friendly menu
2. Intro - Hero section with call-to-action button
3. Features - Highlight your product or service features
4. Works - Portfolio/project showcase with hover effects
5. Team - Team member profiles with social media links
6. Testimonials - Client reviews slider
7. Download - Call-to-action section
8. Footer - Contact information and social links

Technologies Used

• HTML5
• CSS3 (with modern features like Flexbox)
• JavaScript (ES6+)
• jQuery for slider functionality
• Slick Carousel for testimonials
• SVG icons for better scaling and performance

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

Installation and Usage

1. Clone or download the repository

   git clone https://github.com/FrankFMY/ActiveBox-Landing-Page.git
   

2. Open index.html in your browser to view the template

3. Customize the content in index.html to match your requirements

4. Modify styles in style.css to change colors, fonts, or layout

5. Update JavaScript functionality in app.js if needed

Customization

Changing Colors

The primary color scheme can be modified in the style.css file:

/* Primary colors */
.btn--red {
    background-color: #e84545; /* Change this to your preferred color */
}

Adding New Sections

To add a new section, follow the existing HTML structure pattern:

<section class="your-section" id="your-section">
    <div class="container">
        <h2 class="section-title">Your Section Title</h2>
        <!-- Your content here -->
    </div>
</section>

Performance Optimization

• Images are optimized for web
• CSS is organized for better maintainability
• JavaScript is loaded with defer attribute
• Lazy loading implemented for images
• Preconnect used for external resources

Accessibility Features

• Semantic HTML structure
• ARIA attributes for interactive elements
• Keyboard navigation support
• Skip to content link
• Proper heading hierarchy
• Sufficient color contrast

Credits

• Design: Kamal Chaneman
• Fonts: Google Fonts (Raleway, Open Sans, Cardo)
• Icons: Custom SVG icons
• Images: Unsplash

---

Author

FrankFMY

Support

For any questions or support, please contact [email protected]