🏠 Landing Page

---

📑 Table of Contents

• 🏠 Landing Page

  • 📑 Table of Contents

  • 🌐 Live Demo

  • 📖 Description

  • ⚙️ System Requirements

  • 🔍 Verify Installation

  • 🚀 Project Installation

    • 1️⃣ Clone the repository
    • 2️⃣ Open the project

  • ▶️ Run the Project

  • 🧠 Project Architecture

    • 📦 Core Modules

      • Navigation System
      • Content Sections
      • Forms & Interactions
      • Scroll Animations

  • ✨ Features

  • 🛠 Technologies Used

  • 📁 Project Structure

  • 🔥 Best Practices Implemented

  • 🎯 Project Goal

  • 📄 License

---

🌐 Live Demo

🔗 https://alobuuls.github.io/landing-page/

---

📖 Description

Note

Landing Page is a responsive marketing website built with HTML, CSS, and vanilla JavaScript.

The project simulates a corporate website for a home products company, showcasing products, company information, international presence, contact forms, and promotional content through a modern and responsive user interface.

---

⚙️ System Requirements

Before running the project, make sure you have:

• 🌐 A modern web browser (Chrome, Firefox, Edge, Safari)
• 📦 Git (optional)

---

🔍 Verify Installation

Check that Git is installed:

git --version

---

🚀 Project Installation

1️⃣ Clone the repository

git clone git@github.com:alobuuls/landing-page.git
cd landing-page

2️⃣ Open the project

Important

No dependencies or package installation are required.

You can simply open:

index.html

or run the project using Live Server in Visual Studio Code.

---

▶️ Run the Project

Open the index.html file directly in your browser or start a local development server.

---

🧠 Project Architecture

Note

The application is built using semantic HTML, modular CSS, and vanilla JavaScript.

📦 Core Modules

Navigation System

Responsible for:

• Responsive navigation menu
• Mobile hamburger menu
• Anchor navigation
• Smooth user navigation

Content Sections

Handles:

• Hero banner
• Product showcase
• Company information
• International locations
• Promotional content

Forms & Interactions

Manages:

• Newsletter subscription form
• Contact form validation
• User interactions
• Call-to-action buttons

Scroll Animations

Controls:

• Scroll-triggered animations
• Element visibility effects
• Dynamic UI behavior
• Enhanced user experience

---

✨ Features

• 📱 Fully responsive layout
• 🍔 Mobile navigation menu
• 🎨 Modern landing page design
• 🌙 Dark mode support
• 🖼️ Optimized WebP images
• ⚡ Lazy loading images
• 🎬 Scroll-based animations
• 🎥 Embedded promotional video
• 📩 Contact form
• 📬 Newsletter subscription form
• 🌎 International presence section
• 🏢 Corporate presentation section
• 🛍️ Product showcase section
• ♿ Accessibility-focused attributes
• 🚀 Lightweight implementation without frameworks

---

🛠 Technologies Used

Technology	Purpose
HTML5	Structure
CSS3	Styling
JavaScript (ES6+)	Functionality
DOM API	DOM Manipulation
CSS Animations	Visual Effects
WebP Images	Image Optimization
Font Awesome	Icons
HTML Dialog API	Video Modal

---

📁 Project Structure

landing-page/
├── index.html
├── css/
│   ├── initialize.css
│   ├── header.css
│   ├── banner.css
│   ├── articles.css
│   ├── products.css
│   ├── areas.css
│   ├── 2nd-banner.css
│   ├── ctc-us.css
│   ├── flags.css
│   ├── ctc-us2.css
│   └── footer.css
├── js/
│   ├── menu.js
│   ├── scroll-animation.js
│   └── scroll-validations.js
├── images/
├── fonts/
├── README.md
└── index.html

---

🔥 Best Practices Implemented

• Semantic HTML structure
• Responsive design principles
• Modular CSS organization
• Separation of responsibilities
• Lazy loading images
• Accessibility attributes
• Reusable CSS components
• Mobile-first mindset
• Optimized assets
• Clean file structure
• Maintainable codebase
• Progressive enhancement

---

🎯 Project Goal

Practice and strengthen front-end development concepts through the creation of a complete responsive landing page:

• Semantic HTML
• Responsive layouts
• CSS architecture
• DOM manipulation
• Event handling
• Accessibility
• User experience design
• Scroll animations
• Form handling
• Modern web development practices

---

📄 License

This project is intended for educational and portfolio purposes.

Created by Alondra Francisco.

---