Sample Web Page

commit 3b9d319ed2803b1a140bb8db26170c63750963b5 Author: dev-1 Date: Sat Nov 29 22:15:57 2025 +0530 Initial commit: Add sample webpage with HTML, CSS, and JavaScript diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4fb372e --- /dev/null +++ b/.gitignore @@ -0,0 +1,22 @@ +# IDE +.vscode/ +.idea/ +*.swp +*.swo + +# OS +.DS_Store +Thumbs.db + +# Dependencies +node_modules/ +package-lock.json +yarn.lock + +# Build +dist/ +build/ + +# Environment +.env +.env.local diff --git a/README.md b/README.md new file mode 100644 index 0000000..64b0e40 --- /dev/null +++ b/README.md @@ -0,0 +1,39 @@ +# Sample Web Page + +A simple, responsive web application built with HTML, CSS, and JavaScript. + +## Features + +- Responsive design for all devices +- Modern UI with gradient backgrounds +- Smooth navigation and scrolling +- Contact form functionality +- Service cards showcase + +## Project Structure + +``` +. +├── index.html # Main HTML file +├── styles.css # CSS styling +├── script.js # JavaScript functionality +└── README.md # This file +``` + +## Quick Start + +1. Open `index.html` in your browser +2. Navigate through sections using the navigation menu +3. Click "Get Started" button to see the CTA functionality +4. Fill in the contact form to test form submission + +## Browser Support + +- Chrome (latest) +- Firefox (latest) +- Safari (latest) +- Edge (latest) + +## License + +MIT License - Feel free to use this project as a starting point for your own web applications. diff --git a/index.html b/index.html new file mode 100644 index 0000000..bb99d05 --- /dev/null +++ b/index.html @@ -0,0 +1,78 @@ + + + + + + Sample Web Page + + + +

+ +

Welcome to Our Sample Web Page

This is a sample web application built with HTML, CSS, and JavaScript.

+ +

About Us

We create modern, responsive web applications that deliver excellent user experiences.

+ +

Services

Web Design

Beautiful and responsive designs for all devices.

Development

Fast and scalable web applications.

Support

Ongoing maintenance and support services.

+ +

Contact Us

+ +

+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..1a0e9ca --- /dev/null +++ b/script.js @@ -0,0 +1,37 @@ +// Sample Web Page JavaScript + +// CTA Button functionality +document.getElementById('ctaBtn').addEventListener('click', function() { + alert('Welcome! Let\'s get started with your web application.'); + console.log('CTA button clicked'); +}); + +// Smooth scrolling for navigation links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); +}); + +// Contact form submission +document.getElementById('contactForm').addEventListener('submit', function(e) { + e.preventDefault(); + const email = this.querySelector('input[type="email"]').value; + const message = this.querySelector('textarea').value; + + console.log('Form submitted:', { email, message }); + alert('Thank you for your message! We will get back to you soon.'); + this.reset(); +}); + +// Log page load +document.addEventListener('DOMContentLoaded', function() { + console.log('Page loaded successfully'); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..93ef9c5 --- /dev/null +++ b/styles.css @@ -0,0 +1,201 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: #333; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Header & Navigation */ +header { + background-color: #2c3e50; + color: white; + position: sticky; + top: 0; + z-index: 100; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +.navbar { + padding: 1rem 0; +} + +.navbar .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: bold; +} + +.nav-links { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-links a { + color: white; + text-decoration: none; + transition: color 0.3s ease; +} + +.nav-links a:hover { + color: #3498db; +} + +/* Hero Section */ +.hero { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 100px 0; + text-align: center; +} + +.hero h2 { + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.hero p { + font-size: 1.2rem; + margin-bottom: 2rem; +} + +.cta-button { + background-color: #3498db; + color: white; + padding: 12px 30px; + border: none; + border-radius: 5px; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.cta-button:hover { + background-color: #2980b9; +} + +/* Sections */ +section { + padding: 60px 0; + border-bottom: 1px solid #eee; +} + +section h2 { + font-size: 2rem; + margin-bottom: 2rem; + text-align: center; +} + +/* About Section */ +.about { + background-color: #f8f9fa; +} + +.about p { + font-size: 1.1rem; + text-align: center; + max-width: 800px; + margin: 0 auto; +} + +/* Services Section */ +.service-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.service-card { + background: white; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + transition: transform 0.3s ease; +} + +.service-card:hover { + transform: translateY(-5px); + box-shadow: 0 4px 12px rgba(0,0,0,0.15); +} + +.service-card h3 { + margin-bottom: 1rem; + color: #667eea; +} + +/* Contact Section */ +.contact { + background-color: #f8f9fa; +} + +#contactForm { + max-width: 600px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 1rem; +} + +#contactForm input, +#contactForm textarea { + padding: 10px; + border: 1px solid #ddd; + border-radius: 5px; + font-family: inherit; +} + +#contactForm button { + background-color: #667eea; + color: white; + padding: 12px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#contactForm button:hover { + background-color: #764ba2; +} + +/* Footer */ +footer { + background-color: #2c3e50; + color: white; + text-align: center; + padding: 2rem 0; + margin-top: 3rem; +} + +/* Responsive */ +@media (max-width: 768px) { + .nav-links { + gap: 1rem; + font-size: 0.9rem; + } + + .hero h2 { + font-size: 1.8rem; + } + + section h2 { + font-size: 1.5rem; + } +}