https://github.com/arnobt78/Modern-Tech--Javascript-Frontend
Created a simple website template with header logo, navbar, body, user sign up, sign in, footer using HTML, CSS and Javascript with a responsive screen feature.
https://github.com/arnobt78/Modern-Tech--Javascript-Frontend
call-to-action css front-end-development html javascript landing-page mobile-menu navbar one-page-site responsive-design sign-up-interface small-business-website starter-template tech-product tech-product-landing-page tech-showcase tech-website tech-website-template web-development-fundamentals
Last synced: 8 months ago
JSON representation
Created a simple website template with header logo, navbar, body, user sign up, sign in, footer using HTML, CSS and Javascript with a responsive screen feature.
- Host: GitHub
- URL: https://github.com/arnobt78/Modern-Tech--Javascript-Frontend
- Owner: arnobt78
- Created: 2024-08-19T22:46:05.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-28T00:19:58.000Z (11 months ago)
- Last Synced: 2025-08-17T18:23:34.798Z (10 months ago)
- Topics: call-to-action, css, front-end-development, html, javascript, landing-page, mobile-menu, navbar, one-page-site, responsive-design, sign-up-interface, small-business-website, starter-template, tech-product, tech-product-landing-page, tech-showcase, tech-website, tech-website-template, web-development-fundamentals
- Language: CSS
- Homepage: https://modern-tech-landing-page.netlify.app/
- Size: 6.75 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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/](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](#project-overview)
- [Live Demo](#live-demo)
- [Screenshots](#screenshots)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Project Structure](#project-structure)
- [How to Run](#how-to-run)
- [Usage Guide](#usage-guide)
- [Customization](#customization)
- [Keywords](#keywords)
- [Credits](#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](https://fontawesome.com/)
- Fonts: [Google Fonts - Kumbh Sans](https://fonts.google.com/specimen/Kumbh+Sans)
---
**Feel free to fork and customize this template for your own projects!**