Modern Tech Landing Page – HTML, CSS, JavaScript Template

---

Project Overview

This project is a modern, responsive website template built with HTML, CSS, and JavaScript. It demonstrates core web development fundamentals and is suitable as a starter template for personal, portfolio, or small business websites.

• Live Demo: https://modern-tech-landing-page.netlify.app/

---

Key features include:

• Responsive navigation bar (with mobile menu)
• Hero section with call-to-action
• Services/Features showcase
• Simple sign-up interface
• Footer with social links and site navigation
• Stylish, modern design
• Fully responsive for all device sizes

---

Table of Contents

• Project Overview
• Live Demo
• Screenshots
• Features
• Technologies Used
• Project Structure
• How to Run
• Usage Guide
• Customization
• Keywords
• Credits

---

Features

• Responsive Navbar: Adapts to desktop and mobile, with a hamburger menu on small screens.
• Hero Section: Bold headline, subheading, and prominent call-to-action button.
• Services Section: Cards highlighting product/service features (AI-powered tech, etc.).
• Dedicated Tech Page: Learn more about technologies used (see tech.html).
• Footer: Includes "About Us", "Contact", "Videos", and "Social Media" links.
• Social Media Icons: Quick links to Facebook, Instagram, YouTube, Twitter, LinkedIn, etc.
• Modern Styling: Uses gradients, icons (FontAwesome), and Google Fonts.
• Mobile Friendly: Fully responsive CSS for all device sizes.

---

Technologies Used

• HTML5: Semantic markup and structure.
• CSS3: Modern, responsive layouts, gradients, and animations.
  • Flexbox & CSS Grid
  • Media Queries for responsiveness
  • Custom CSS classes for modularity
• JavaScript (Vanilla):
  • Mobile menu toggle for navigation
  • Simple DOM manipulation
• FontAwesome: For vector icons and social media links.
• Google Fonts: For modern typography.

---

Project Structure

Javascript-HTML-CSS--Fundamental-Project-1/
│
├── index.html            # Main landing page
├── tech.html             # Technology details page
├── styles.css            # Main CSS stylesheet
├── app.js                # JavaScript for navbar toggle
├── images/               # Images and SVGs (e.g., pic1.svg, pic2.jpg, pic4.jpg)
└── README.md             # Project documentation

---

How to Run

1. Clone or Download the Repository

   git clone https://github.com/arnobt78/Javascript-HTML-CSS--Fundamental-Project-1.git
   

   Or download and unzip manually.

2. Open the Project

   • Navigate to the project folder.

3. Run the Website Locally

   • Locate index.html.
   • Option 1 (Recommended):
     Right-click on index.html and choose "Open with Live Server" (requires VSCode Live Server extension).
   • Option 2:
     Double-click index.html to open in your browser.

   The site will load at a local address like http://127.0.0.1:5500/index.html or as a file path in your browser.

---

Usage Guide / Walkthrough

• Navbar

  • Desktop: Navigation links to Home, Tech, Products, and Sign Up.
  • Mobile: Hamburger menu toggles navigation.

• Hero Section

  • Welcome headline, subheadline, and a "Get Started" button.
  • Modern SVG/image illustration.

• Services Section

  • Two cards: "Experience Bliss" (AI powered technology) and "Are you Ready?" (encourage user action).

• Footer Section

  • Multiple columns: About Us, Contact, Videos, Social Media.
  • Social icons for popular platforms.

• Tech Page

  • Access via navbar ("Tech").
  • Highlights technology stack and details.

---

Customization

• Images: Replace or add to /images/ for your own branding.
• Colors & Fonts: Edit styles.css to match your preferred color scheme and typography.
• Content: Update text in index.html and tech.html for your own info.
• Links: Adjust navigation and social media links in the HTML files.

---

Keywords

HTML, CSS, JavaScript, Responsive, Navbar, Website Template, Landing Page, Front-End, Web Development, Portfolio, Modern Design, Tech Showcase, Static Website, One Page Site, Starter Template

---

Credits

• Template inspired by frontend tutorials (e.g., Brian Design on YouTube).
• Icons: FontAwesome
• Fonts: Google Fonts - Kumbh Sans

---

Feel free to fork and customize this template for your own projects!