Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/naveen-369/landing-page
Developed a responsive landing page with HTML5, Tailwind CSS, and JavaScript, featuring services, pricing, and posts, plus dark mode for improved user experience.
https://github.com/naveen-369/landing-page
html-css-javascript tailwindcss
Last synced: 11 days ago
JSON representation
Developed a responsive landing page with HTML5, Tailwind CSS, and JavaScript, featuring services, pricing, and posts, plus dark mode for improved user experience.
- Host: GitHub
- URL: https://github.com/naveen-369/landing-page
- Owner: Naveen-369
- License: mit
- Created: 2024-07-09T05:32:30.000Z (6 months ago)
- Default Branch: Production_Server
- Last Pushed: 2024-07-11T13:03:02.000Z (6 months ago)
- Last Synced: 2024-11-07T20:27:14.613Z (2 months ago)
- Topics: html-css-javascript, tailwindcss
- Language: HTML
- Homepage:
- Size: 584 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Landing_Page Project - Utilizing TailWindCSS
## Overview
This is a responsive webpage designed to provide information about various services offered by the company. The webpage includes sections for navigation, a hero banner, services, pricing plans, and featured posts. It also features a dark mode toggle for enhanced user experience.
## Technologies Used
- HTML5
- Tailwind CSS for styling
- JavaScript for dark mode toggle functionality
- Google Fonts for typography
## File Structure
```
LandingPage/
├── assets/
│ ├── HeroBanner.png
│ ├── WebDevelopement.png
│ ├── MobileApplication.png
│ ├── Design.png
| ├── FeaturedPost1.png
| ├── FeaturedPost2.png
| ├── FeaturedPost3.png
| └── FeaturedPost4.png
├── src/
│ ├── index.html
│ ├── input.css
│ └── output.css
|
├──node_modules/...
├── Package.json
└── tailwind.config.js
```
## Detailed Section Breakdown
### Navigation Section
This section provides a navigational menu for the webpage. It includes links to different sections such as Home, Services, Pricing, About, and Contact. It also includes a Sign-Up button and a dark mode toggle.
```html
Sign Up
```
### Hero Section
The hero section provides an introductory paragraph about learning photo editing. It includes a "Get Started" button and an image.
```html
Learning photo editing is a valuable skill...
Get Started
```
### Services Section
This section showcases the different services offered by the company. Each service is represented by an image and a brief description.
```html
Explore our Services
Web Developement
Lorem Ipsum is simply dummy text...
Mobile Application Developement
Lorem Ipsum is simply dummy text...
Design - UI & UX
Lorem Ipsum is simply dummy text...
```
### Pricing Section
The pricing section displays various subscription plans offered by the company. Each plan is highlighted with its features and pricing.
```html
Pricing
Offers multiple packages for Monthly and Yearly Subscriptions
Featured plans are here
$99
Basic
Core Business requirement
$199
Advanced
Core Business requirement
$299
Business
Core Business requirement
```
### Feature Posts Section
This section displays featured posts related to the company's services. Each post includes an image and a brief description.
```html
Features Post
Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry...
Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry...
Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry...
```
## Scripts and Styles
### Dark Mode Toggle Script
The JavaScript code for the dark mode toggle switches the theme between light and dark modes based on user interaction and system preferences.
```javascript
const toggleDarkModeButton = document.getElementById('toggleDarkMode');
toggleDarkModeButton.addEventListener('click', function() {
document.body.classList.toggle('dark');
});
```
### Custom Tailwind CSS Configuration
The custom Tailwind CSS configuration (`output.css`) includes styles tailored to the design of the webpage, ensuring a consistent look and feel across all sections.
```css
/* Custom Tailwind CSS output */
@tailwind base;
@tailwind components;
@tailwind utilities;
.Navigation_Enclosure {
/* Custom styles */
}
.Navigation_Enclosure_Dark {
/* Custom dark mode styles */
}
/* Additional custom styles */
```
## Usage
### 1. Clone the Repository
Fork the repository and clone it in your local machine.
```git
git clone "https://github.com/Naveen-369/Landing-Page.git"
cd Landing-Page
```
### 2. Install Dependencies
Install the necessary node modules using the package manager.
```npm
npm install
```
### 3. Open in Browser
Open the project in the browser. Now you can view the project.
## Contribution
To contribute to the project do the above steps and run the following command in the terminal.
```shell
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
```
Now start developing your changes in the project and create a pull request.
## Conclusion
This webpage is designed to be responsive, user-friendly, and visually appealing. The implementation of dark mode enhances the user experience, providing a modern and accessible interface. The detailed breakdown of each section ensures clarity and ease of maintenance.