https://github.com/kostastepetes/web-components-landing-page
Web Components for a minimalistic, yet complete, company landing page. The page contains: Navbar, Hero, Stripe Bar, About & Services Sections, Contact Form and Footer.
https://github.com/kostastepetes/web-components-landing-page
company-site landing-page web-components
Last synced: 5 months ago
JSON representation
Web Components for a minimalistic, yet complete, company landing page. The page contains: Navbar, Hero, Stripe Bar, About & Services Sections, Contact Form and Footer.
- Host: GitHub
- URL: https://github.com/kostastepetes/web-components-landing-page
- Owner: kostastepetes
- Created: 2024-02-26T11:42:33.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-26T12:31:55.000Z (over 2 years ago)
- Last Synced: 2025-02-01T17:46:04.362Z (over 1 year ago)
- Topics: company-site, landing-page, web-components
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Components Project: Landing Page Example
This project showcases the use of custom web components to create a landing page. The landing page includes various components such as a navigation bar, hero banner, stripe bars, an about section, services section, a contact form, and a footer. Each component is designed to be reusable and customizable, providing a modular and maintainable structure for web development.
## Features
- **Custom Web Components**: The landing page is built using custom web components, allowing for easy integration and reuse across different web applications.
- **Modular Design**: Each part of the landing page is encapsulated in its own web component, promoting separation of concerns and making the codebase easier to manage.
- **Responsive Design**: The components are designed with responsiveness in mind, ensuring a good user experience on devices of all sizes.
## Installation
To use this landing page in your project, follow these steps:
1. **Include the Component Files**: Copy the JavaScript files for each component (`navbar-component.js`, `hero-banner-component.js`, `stripe-bar-component.js`, `about-component.js`, `services-component.js`, `contact-form-component.js`, `footer-component.js`) into your project's directory.
2. **Link the Components**: In your HTML file, include the JavaScript files for each component before the closing `