diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7692da9
--- /dev/null
+++ b/README.md
@@ -0,0 +1,117 @@
+# Contact Information Form
+
+A responsive HTML form for collecting user's name and mobile number with real-time validation and modern styling.
+
+## Features
+
+### Form Fields
+- **Full Name**: Text input with validation (2-50 characters, letters and spaces only)
+- **Mobile Number**: Tel input with validation (10-15 digits, optional international format)
+
+### Validation
+- **Real-time validation**: Instant feedback as user types
+- **Pattern matching**: Name must contain only letters and spaces
+- **Mobile format**: Accepts 10-15 digit numbers with optional + prefix
+- **Auto-formatting**: Mobile number gets formatted for better readability
+- **Submit prevention**: Button disabled until all fields are valid
+
+### Design Features
+- **Responsive design**: Works on desktop, tablet, and mobile devices
+- **Modern styling**: Gradient backgrounds, smooth animations, and hover effects
+- **Accessibility**: Proper labels, focus states, and error messages
+- **User feedback**: Success messages and loading states
+
+## Files
+
+- `contact-form.html` - Main form HTML structure
+- `form-style.css` - Complete CSS styling with responsive design
+- `form-script.js` - JavaScript for validation and user interactions
+- `test-form.html` - Test suite for validation functions
+
+## Usage
+
+1. Open `contact-form.html` in a web browser
+2. Fill in your full name and mobile number
+3. The form will validate inputs in real-time
+4. Submit button becomes active when all fields are valid
+5. Click Submit to see the success message
+
+## Testing
+
+Open `test-form.html` to run automated tests for the validation functions. The test suite validates:
+
+### Name Validation Tests
+- ✅ Valid names with letters and spaces
+- ✅ Rejects names with numbers or special characters
+- ✅ Enforces length requirements (2-50 characters)
+
+### Mobile Validation Tests
+- ✅ Accepts 10-15 digit numbers
+- ✅ Supports international format with + prefix
+- ✅ Handles formatted numbers with spaces
+- ✅ Rejects invalid formats and lengths
+
+## Browser Compatibility
+
+- Chrome, Firefox, Safari, Edge (modern versions)
+- Mobile browsers (iOS Safari, Android Chrome)
+- Responsive design works on all screen sizes
+
+## Customization
+
+### Styling
+Edit `form-style.css` to customize:
+- Colors and gradients
+- Font sizes and families
+- Spacing and layout
+- Animation effects
+
+### Validation Rules
+Edit `form-script.js` to modify:
+- Name validation pattern
+- Mobile number format requirements
+- Error messages
+- Form behavior
+
+### Form Submission
+The current implementation shows a success message. To integrate with a backend:
+
+```javascript
+// Replace the setTimeout in form submission with actual API call
+fetch('/api/submit-contact', {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+        name: name,
+        mobile: mobile
+    })
+})
+.then(response => response.json())
+.then(data => {
+    // Handle success
+})
+.catch(error => {
+    // Handle error
+});
+```
+
+## Security Considerations
+
+- Client-side validation only - always validate on the server side
+- Sanitize inputs before processing
+- Consider rate limiting for form submissions
+- Implement CSRF protection for production use
+
+## Accessibility Features
+
+- Semantic HTML structure
+- Proper form labels and associations
+- Focus indicators and keyboard navigation
+- Error messages linked to form fields
+- High contrast colors for readability
+
+---
+
+**Note**: This is a client-side only implementation. For production use, add server-side validation and proper data handling.
diff --git a/USER_FORM_DOCUMENTATION.md b/USER_FORM_DOCUMENTATION.md
new file mode 100644
index 0000000..33e400a
--- /dev/null
+++ b/USER_FORM_DOCUMENTATION.md
@@ -0,0 +1,102 @@
+# Angular User Form - Name and Email
+
+This project demonstrates a clean, professional Angular reactive form that collects user name and email information with proper validation.
+
+## Features
+
+- **Reactive Forms**: Built using Angular's ReactiveFormsModule for better form control and validation
+- **Form Validation**: Comprehensive validation including:
+  - Required field validation for both name and email
+  - Email format validation
+  - Name length validation (2-50 characters)
+  - Name pattern validation (letters and spaces only)
+- **User Experience**: 
+  - Real-time validation feedback
+  - Visual error states with helpful error messages
+  - Responsive design that works on all screen sizes
+  - Loading and success states
+  - Clean, modern UI with smooth animations
+- **Accessibility**: Form labels, proper input types, and keyboard navigation support
+
+## Files Structure
+
+```
+src/app/
+├── user-form.component.ts      # Component logic and form handling
+├── user-form.component.html    # Form template with validation
+├── user-form.component.css     # Styling and responsive design
+└── app.module.ts              # Module configuration with imports
+```
+
+## Component Details
+
+### UserFormComponent
+
+**Key Features:**
+- Uses Angular FormBuilder for reactive form creation
+- Implements comprehensive validation rules
+- Provides helper methods for error checking and display
+- Handles form submission with success feedback
+- Includes form reset functionality
+
+**Validation Rules:**
+- **Name**: Required, 2-50 characters, letters and spaces only
+- **Email**: Required, valid email format, max 100 characters
+
+### Form Template
+
+**UI Elements:**
+- Clean, card-based layout
+- Visual feedback for form states (valid/invalid/touched)
+- Error messages with icons
+- Submit and Reset buttons with appropriate states
+- Development status display for debugging
+
+### Styling
+
+**Design Features:**
+- Modern gradient background
+- Card-based form layout with shadow effects
+- Smooth hover and focus transitions
+- Responsive design for mobile and desktop
+- Error state styling with animations
+- Professional color scheme
+
+## Usage
+
+1. **Import the component** in your app.module.ts:
+```typescript
+import { UserFormComponent } from './user-form.component';
+
+@NgModule({
+  declarations: [
+    // ... other components
+    UserFormComponent
+  ],
+  // ... rest of module config
+})
+```
+
+2. **Use in templates**:
+```html
+<app-user-form></app-user-form>
+```
+
+## Form Behavior
+
+- **Validation**: Real-time validation with visual feedback
+- **Submission**: Form submits only when all fields are valid
+- **Reset**: Users can reset the form to clear all data
+- **Error Display**: Context-aware error messages guide users to correct issues
+
+## Customization
+
+The form can be easily customized by modifying:
+- Validation rules in `user-form.component.ts`
+- Styling in `user-form.component.css`
+- Form layout in `user-form.component.html`
+
+## Dependencies
+
+- Angular (with ReactiveFormsModule)
+- No external UI libraries required - uses pure CSS for styling
diff --git a/about-us-style.css b/about-us-style.css
new file mode 100644
index 0000000..3f65edb
--- /dev/null
+++ b/about-us-style.css
@@ -0,0 +1,490 @@
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    overflow-x: hidden;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Navigation */
+.navbar {
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+    backdrop-filter: blur(10px);
+}
+
+.nav-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 70px;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.nav-links {
+    display: flex;
+    list-style: none;
+    gap: 30px;
+}
+
+.nav-links a {
+    text-decoration: none;
+    color: #333;
+    font-weight: 500;
+    transition: color 0.3s ease;
+    position: relative;
+}
+
+.nav-links a:hover,
+.nav-links a.active {
+    color: #667eea;
+}
+
+.nav-links a::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    transition: width 0.3s ease;
+}
+
+.nav-links a:hover::after,
+.nav-links a.active::after {
+    width: 100%;
+}
+
+/* Hero Section */
+.hero-section {
+    height: 500px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 70px;
+    overflow: hidden;
+}
+
+.hero-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1600&h=900&fit=crop');
+    background-size: cover;
+    background-position: center;
+    opacity: 0.2;
+}
+
+.hero-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
+}
+
+.hero-content {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    color: white;
+}
+
+.hero-title {
+    font-size: 4rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    animation: fadeInUp 1s ease;
+}
+
+.hero-subtitle {
+    font-size: 1.5rem;
+    font-weight: 300;
+    animation: fadeInUp 1s ease 0.2s backwards;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Story Section */
+.story-section {
+    padding: 100px 0;
+    background: #fff;
+}
+
+.story-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: center;
+}
+
+.story-text h2 {
+    font-size: 2.5rem;
+    margin-bottom: 30px;
+    color: #333;
+    position: relative;
+    padding-bottom: 15px;
+}
+
+.story-text h2::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 60px;
+    height: 4px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 2px;
+}
+
+.story-text p {
+    font-size: 1.1rem;
+    line-height: 1.8;
+    color: #555;
+    margin-bottom: 20px;
+}
+
+.story-image {
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+    transform: perspective(1000px) rotateY(-5deg);
+    transition: transform 0.5s ease;
+}
+
+.story-image:hover {
+    transform: perspective(1000px) rotateY(0deg);
+}
+
+.story-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+/* Mission Section */
+.mission-section {
+    padding: 100px 0;
+    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
+}
+
+.section-title {
+    text-align: center;
+    font-size: 2.5rem;
+    margin-bottom: 60px;
+    color: #333;
+}
+
+.mission-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 40px;
+}
+
+.mission-card {
+    background: white;
+    padding: 40px 30px;
+    border-radius: 15px;
+    text-align: center;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.mission-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 50px rgba(102, 126, 234, 0.2);
+}
+
+.mission-icon {
+    font-size: 3rem;
+    margin-bottom: 20px;
+}
+
+.mission-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 15px;
+    color: #333;
+}
+
+.mission-card p {
+    color: #666;
+    line-height: 1.8;
+}
+
+/* Team Section */
+.team-section {
+    padding: 100px 0;
+    background: white;
+}
+
+.section-subtitle {
+    text-align: center;
+    font-size: 1.2rem;
+    color: #666;
+    margin-top: -40px;
+    margin-bottom: 60px;
+}
+
+.team-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 40px;
+}
+
+.team-member {
+    text-align: center;
+    transition: transform 0.3s ease;
+}
+
+.team-member:hover {
+    transform: translateY(-10px);
+}
+
+.member-image {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto 20px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 5px solid #f0f2ff;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    transition: border-color 0.3s ease;
+}
+
+.team-member:hover .member-image {
+    border-color: #667eea;
+}
+
+.member-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.team-member h3 {
+    font-size: 1.3rem;
+    margin-bottom: 5px;
+    color: #333;
+}
+
+.member-role {
+    color: #667eea;
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+
+.member-bio {
+    color: #666;
+    font-size: 0.95rem;
+    line-height: 1.6;
+}
+
+/* Stats Section */
+.stats-section {
+    padding: 80px 0;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 40px;
+}
+
+.stat-item {
+    text-align: center;
+}
+
+.stat-number {
+    font-size: 3rem;
+    font-weight: 700;
+    margin-bottom: 10px;
+}
+
+.stat-label {
+    font-size: 1.1rem;
+    opacity: 0.9;
+}
+
+/* CTA Section */
+.cta-section {
+    padding: 100px 0;
+    background: white;
+    text-align: center;
+}
+
+.cta-section h2 {
+    font-size: 2.5rem;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.cta-section p {
+    font-size: 1.2rem;
+    color: #666;
+    margin-bottom: 40px;
+}
+
+.cta-button {
+    display: inline-block;
+    padding: 18px 50px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    text-decoration: none;
+    border-radius: 50px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+}
+
+.cta-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
+}
+
+/* Footer */
+.footer {
+    background: #2d3748;
+    color: white;
+    padding: 30px 0;
+    text-align: center;
+}
+
+.footer p {
+    margin: 0;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .team-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .nav-links {
+        gap: 15px;
+    }
+    
+    .hero-title {
+        font-size: 2.5rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1.2rem;
+    }
+    
+    .story-content {
+        grid-template-columns: 1fr;
+        gap: 40px;
+    }
+    
+    .story-image {
+        transform: none;
+    }
+    
+    .mission-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .team-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .stats-grid {
+        grid-template-columns: 1fr;
+        gap: 30px;
+    }
+    
+    .section-title {
+        font-size: 2rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .nav-container {
+        flex-direction: column;
+        height: auto;
+        padding: 15px 20px;
+    }
+    
+    .nav-links {
+        margin-top: 10px;
+    }
+    
+    .hero-section {
+        height: 400px;
+        margin-top: 100px;
+    }
+    
+    .hero-title {
+        font-size: 2rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1rem;
+    }
+    
+    .story-section,
+    .mission-section,
+    .team-section,
+    .cta-section {
+        padding: 60px 0;
+    }
+    
+    .story-text h2,
+    .section-title,
+    .cta-section h2 {
+        font-size: 1.8rem;
+    }
+}
diff --git a/about-us.html b/about-us.html
new file mode 100644
index 0000000..86e6784
--- /dev/null
+++ b/about-us.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Us - Our Story</title>
+    <link rel="stylesheet" href="about-us-style.css">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="nav-container">
+            <div class="logo">Our Company</div>
+            <ul class="nav-links">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about-us.html" class="active">About</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </div>
+    </nav>
+
+    <section class="hero-section">
+        <div class="hero-overlay"></div>
+        <div class="hero-content">
+            <h1 class="hero-title">About Us</h1>
+            <p class="hero-subtitle">Innovating the future, one step at a time</p>
+        </div>
+    </section>
+
+    <section class="story-section">
+        <div class="container">
+            <div class="story-content">
+                <div class="story-text">
+                    <h2>Our Story</h2>
+                    <p>Founded in 2020, we started with a simple mission: to create innovative solutions that make a difference in people's lives. What began as a small team of passionate individuals has grown into a thriving company dedicated to excellence and innovation.</p>
+                    <p>Our journey has been marked by continuous learning, adaptation, and a commitment to delivering exceptional value to our customers. We believe in the power of technology to transform businesses and improve lives.</p>
+                </div>
+                <div class="story-image">
+                    <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=600&fit=crop" alt="Team collaboration">
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="mission-section">
+        <div class="container">
+            <h2 class="section-title">Our Mission & Vision</h2>
+            <div class="mission-grid">
+                <div class="mission-card">
+                    <div class="mission-icon">🎯</div>
+                    <h3>Our Mission</h3>
+                    <p>To empower businesses and individuals through innovative technology solutions that drive growth and success.</p>
+                </div>
+                <div class="mission-card">
+                    <div class="mission-icon">🔭</div>
+                    <h3>Our Vision</h3>
+                    <p>To be the leading provider of transformative solutions that shape the future of technology and business.</p>
+                </div>
+                <div class="mission-card">
+                    <div class="mission-icon">💎</div>
+                    <h3>Our Values</h3>
+                    <p>Innovation, integrity, excellence, and customer-centricity guide everything we do.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="team-section">
+        <div class="container">
+            <h2 class="section-title">Meet Our Team</h2>
+            <p class="section-subtitle">The talented people behind our success</p>
+            <div class="team-grid">
+                <div class="team-member">
+                    <div class="member-image">
+                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&h=400&fit=crop" alt="Team member">
+                    </div>
+                    <h3>John Anderson</h3>
+                    <p class="member-role">CEO & Founder</p>
+                    <p class="member-bio">Visionary leader with 15+ years of experience in tech innovation.</p>
+                </div>
+                <div class="team-member">
+                    <div class="member-image">
+                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&h=400&fit=crop" alt="Team member">
+                    </div>
+                    <h3>Sarah Mitchell</h3>
+                    <p class="member-role">CTO</p>
+                    <p class="member-bio">Technology expert passionate about building scalable solutions.</p>
+                </div>
+                <div class="team-member">
+                    <div class="member-image">
+                        <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400&h=400&fit=crop" alt="Team member">
+                    </div>
+                    <h3>Michael Chen</h3>
+                    <p class="member-role">Head of Design</p>
+                    <p class="member-bio">Creative designer focused on user-centered experiences.</p>
+                </div>
+                <div class="team-member">
+                    <div class="member-image">
+                        <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop" alt="Team member">
+                    </div>
+                    <h3>Emily Rodriguez</h3>
+                    <p class="member-role">Marketing Director</p>
+                    <p class="member-bio">Strategic marketer with a passion for brand storytelling.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="stats-section">
+        <div class="container">
+            <div class="stats-grid">
+                <div class="stat-item">
+                    <div class="stat-number">500+</div>
+                    <div class="stat-label">Happy Clients</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">1000+</div>
+                    <div class="stat-label">Projects Completed</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">50+</div>
+                    <div class="stat-label">Team Members</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">15+</div>
+                    <div class="stat-label">Awards Won</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="cta-section">
+        <div class="container">
+            <h2>Ready to Work With Us?</h2>
+            <p>Let's create something amazing together</p>
+            <a href="contact.html" class="cta-button">Get In Touch</a>
+        </div>
+    </section>
+
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2025 Our Company. All rights reserved.</p>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..de8c17b
--- /dev/null
+++ b/about.html
@@ -0,0 +1,875 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Us | Your Digital Journey Starts Here</title>
+    <meta name="description" content="Learn about our mission, values, and the passionate team behind our innovative digital solutions. Discover what makes us different.">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #6366f1;
+            --secondary-color: #8b5cf6;
+            --accent-color: #06b6d4;
+            --text-primary: #1f2937;
+            --text-secondary: #6b7280;
+            --background-light: #ffffff;
+            --background-dark: #f8fafc;
+            --border-color: #e5e7eb;
+            --shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+            --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        html {
+            scroll-behavior: smooth;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            line-height: 1.6;
+            color: var(--text-primary);
+            background-color: var(--background-light);
+        }
+
+        /* Header Navigation */
+        .header {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            transition: all 0.3s ease;
+        }
+
+        .nav {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem 2rem;
+        }
+
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-decoration: none;
+        }
+
+        .nav-links {
+            display: flex;
+            list-style: none;
+            gap: 2rem;
+        }
+
+        .nav-links a {
+            text-decoration: none;
+            color: var(--text-secondary);
+            font-weight: 500;
+            transition: color 0.3s ease;
+            position: relative;
+        }
+
+        .nav-links a:hover,
+        .nav-links a.active {
+            color: var(--primary-color);
+        }
+
+        .nav-links a::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: var(--primary-color);
+            transition: width 0.3s ease;
+        }
+
+        .nav-links a:hover::after,
+        .nav-links a.active::after {
+            width: 100%;
+        }
+
+        .nav-toggle {
+            display: none;
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            color: var(--text-primary);
+            cursor: pointer;
+        }
+
+        /* Hero Section */
+        .hero {
+            min-height: 60vh;
+            display: flex;
+            align-items: center;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            position: relative;
+            overflow: hidden;
+            margin-top: 80px;
+        }
+
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="white" opacity="0.1"/><circle cx="80" cy="40" r="1.5" fill="white" opacity="0.1"/><circle cx="60" cy="80" r="1" fill="white" opacity="0.1"/><circle cx="30" cy="70" r="1.5" fill="white" opacity="0.1"/><circle cx="90" cy="10" r="1" fill="white" opacity="0.1"/></svg>');
+        }
+
+        .hero-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+            text-align: center;
+            position: relative;
+            z-index: 2;
+        }
+
+        .hero h1 {
+            font-size: clamp(2.5rem, 5vw, 3.5rem);
+            font-weight: 700;
+            color: white;
+            margin-bottom: 1.5rem;
+            line-height: 1.2;
+            animation: fadeInUp 1s ease-out;
+        }
+
+        .hero p {
+            font-size: 1.25rem;
+            color: rgba(255, 255, 255, 0.9);
+            margin-bottom: 2.5rem;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+            animation: fadeInUp 1s ease-out 0.2s both;
+        }
+
+        /* Main Content Sections */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 2rem;
+        }
+
+        .section {
+            padding: 6rem 0;
+        }
+
+        .section-title {
+            text-align: center;
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            color: var(--text-primary);
+        }
+
+        .section-subtitle {
+            text-align: center;
+            font-size: 1.25rem;
+            color: var(--text-secondary);
+            margin-bottom: 4rem;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        /* Mission Section */
+        .mission {
+            background: var(--background-dark);
+        }
+
+        .mission-content {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 4rem;
+            align-items: center;
+        }
+
+        .mission-text h3 {
+            font-size: 1.75rem;
+            font-weight: 600;
+            margin-bottom: 1.5rem;
+            color: var(--text-primary);
+        }
+
+        .mission-text p {
+            font-size: 1.1rem;
+            line-height: 1.8;
+            color: var(--text-secondary);
+            margin-bottom: 1.5rem;
+        }
+
+        .mission-image {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .mission-placeholder {
+            width: 100%;
+            max-width: 400px;
+            height: 300px;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            border-radius: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 4rem;
+            box-shadow: var(--shadow-large);
+        }
+
+        /* Values Section */
+        .values {
+            background: var(--background-light);
+        }
+
+        .values-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2rem;
+        }
+
+        .value-card {
+            background: var(--background-light);
+            padding: 2.5rem;
+            border-radius: 1rem;
+            box-shadow: var(--shadow-light);
+            transition: all 0.3s ease;
+            text-align: center;
+            border: 1px solid var(--border-color);
+        }
+
+        .value-card:hover {
+            transform: translateY(-5px);
+            box-shadow: var(--shadow-large);
+            border-color: var(--primary-color);
+        }
+
+        .value-icon {
+            width: 4rem;
+            height: 4rem;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            border-radius: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 1.5rem;
+            font-size: 1.5rem;
+            color: white;
+        }
+
+        .value-card h3 {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: var(--text-primary);
+        }
+
+        .value-card p {
+            color: var(--text-secondary);
+            line-height: 1.7;
+        }
+
+        /* Team Section */
+        .team {
+            background: var(--background-dark);
+        }
+
+        .team-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 2rem;
+        }
+
+        .team-card {
+            background: var(--background-light);
+            border-radius: 1rem;
+            overflow: hidden;
+            box-shadow: var(--shadow-light);
+            transition: all 0.3s ease;
+        }
+
+        .team-card:hover {
+            transform: translateY(-5px);
+            box-shadow: var(--shadow-large);
+        }
+
+        .team-image {
+            height: 250px;
+            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 3rem;
+        }
+
+        .team-info {
+            padding: 2rem;
+            text-align: center;
+        }
+
+        .team-info h3 {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: var(--text-primary);
+        }
+
+        .team-role {
+            color: var(--primary-color);
+            font-weight: 500;
+            margin-bottom: 1rem;
+        }
+
+        .team-info p {
+            color: var(--text-secondary);
+            line-height: 1.6;
+        }
+
+        /* Story Section */
+        .story {
+            background: var(--background-light);
+        }
+
+        .story-content {
+            max-width: 800px;
+            margin: 0 auto;
+            text-align: center;
+        }
+
+        .story-content p {
+            font-size: 1.1rem;
+            line-height: 1.8;
+            color: var(--text-secondary);
+            margin-bottom: 2rem;
+        }
+
+        .story-highlight {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            padding: 3rem;
+            border-radius: 1rem;
+            margin: 3rem 0;
+            box-shadow: var(--shadow-large);
+        }
+
+        .story-highlight h3 {
+            font-size: 2rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+        }
+
+        .story-highlight p {
+            font-size: 1.25rem;
+            color: rgba(255, 255, 255, 0.9);
+            margin-bottom: 0;
+        }
+
+        /* CTA Section */
+        .cta-section {
+            padding: 6rem 0;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            text-align: center;
+            color: white;
+        }
+
+        .cta-section h2 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+        }
+
+        .cta-section p {
+            font-size: 1.25rem;
+            margin-bottom: 2rem;
+            opacity: 0.9;
+        }
+
+        .btn {
+            display: inline-block;
+            padding: 1rem 2rem;
+            border-radius: 50px;
+            font-weight: 600;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-size: 1.1rem;
+            cursor: pointer;
+            border: none;
+        }
+
+        .btn-primary {
+            background: white;
+            color: var(--primary-color);
+            box-shadow: var(--shadow-medium);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-large);
+        }
+
+        /* Footer */
+        .footer {
+            background: var(--text-primary);
+            color: white;
+            padding: 3rem 0 2rem;
+        }
+
+        .footer-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 2rem;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .footer-section h3 {
+            font-size: 1.25rem;
+            margin-bottom: 1rem;
+            color: var(--accent-color);
+        }
+
+        .footer-section p,
+        .footer-section a {
+            color: rgba(255, 255, 255, 0.8);
+            text-decoration: none;
+            margin-bottom: 0.5rem;
+            display: block;
+        }
+
+        .footer-section a:hover {
+            color: var(--accent-color);
+        }
+
+        .footer-bottom {
+            text-align: center;
+            padding-top: 2rem;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            color: rgba(255, 255, 255, 0.6);
+            max-width: 1200px;
+            margin: 0 auto;
+            padding-left: 2rem;
+            padding-right: 2rem;
+        }
+
+        /* Animations */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .nav-links {
+                display: none;
+                position: absolute;
+                top: 100%;
+                left: 0;
+                right: 0;
+                background: rgba(255, 255, 255, 0.98);
+                backdrop-filter: blur(10px);
+                flex-direction: column;
+                padding: 1rem 2rem;
+                box-shadow: var(--shadow-medium);
+            }
+
+            .nav-links.active {
+                display: flex;
+            }
+
+            .nav-toggle {
+                display: block;
+            }
+
+            .hero h1 {
+                font-size: 2.5rem;
+            }
+
+            .mission-content {
+                grid-template-columns: 1fr;
+                gap: 2rem;
+            }
+
+            .values-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .team-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .section {
+                padding: 4rem 0;
+            }
+
+            .container {
+                padding: 0 1rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .nav {
+                padding: 1rem;
+            }
+
+            .hero-content {
+                padding: 1rem;
+            }
+
+            .value-card,
+            .team-info {
+                padding: 2rem;
+            }
+
+            .story-highlight {
+                padding: 2rem;
+                margin: 2rem 0;
+            }
+
+            .section-title {
+                font-size: 2rem;
+            }
+        }
+
+        /* Accessibility improvements */
+        @media (prefers-reduced-motion: reduce) {
+            *,
+            ::before,
+            ::after {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+                scroll-behavior: auto !important;
+            }
+        }
+
+        /* Focus styles for keyboard navigation */
+        .btn:focus,
+        .nav-links a:focus {
+            outline: 2px solid var(--accent-color);
+            outline-offset: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- Header Navigation -->
+    <header class="header" id="header">
+        <nav class="nav">
+            <a href="index.html" class="logo">YourBrand</a>
+            <ul class="nav-links" id="navLinks">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="index.html#features">Features</a></li>
+                <li><a href="about.html" class="active">About</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+            <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">☰</button>
+        </nav>
+    </header>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="hero-content">
+            <h1>About Our Story</h1>
+            <p>Discover the passion, innovation, and dedication that drives us to create exceptional digital experiences for our users worldwide.</p>
+        </div>
+    </section>
+
+    <!-- Mission Section -->
+    <section class="section mission">
+        <div class="container">
+            <h2 class="section-title">Our Mission</h2>
+            <p class="section-subtitle">Empowering businesses and individuals through innovative digital solutions</p>
+            
+            <div class="mission-content">
+                <div class="mission-text">
+                    <h3>Building Tomorrow's Digital Experience</h3>
+                    <p>
+                        We believe in the transformative power of technology. Our mission is to create digital solutions that don't just meet today's needs, but anticipate tomorrow's opportunities. We're committed to bridging the gap between complex technology and intuitive user experiences.
+                    </p>
+                    <p>
+                        Every line of code we write, every design we craft, and every solution we deliver is guided by our commitment to excellence, innovation, and user satisfaction. We don't just build products; we create experiences that matter.
+                    </p>
+                    <p>
+                        Our approach combines cutting-edge technology with human-centered design, ensuring that our solutions are not only powerful and efficient but also accessible and enjoyable to use.
+                    </p>
+                </div>
+                <div class="mission-image">
+                    <div class="mission-placeholder">🚀</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Values Section -->
+    <section class="section values">
+        <div class="container">
+            <h2 class="section-title">Our Values</h2>
+            <p class="section-subtitle">The principles that guide everything we do</p>
+            
+            <div class="values-grid">
+                <div class="value-card">
+                    <div class="value-icon">💡</div>
+                    <h3>Innovation</h3>
+                    <p>We embrace new ideas and cutting-edge technologies to deliver solutions that push boundaries and exceed expectations.</p>
+                </div>
+                
+                <div class="value-card">
+                    <div class="value-icon">🤝</div>
+                    <h3>Collaboration</h3>
+                    <p>We believe in the power of teamwork, both within our organization and with our clients, to achieve extraordinary results.</p>
+                </div>
+                
+                <div class="value-card">
+                    <div class="value-icon">🎯</div>
+                    <h3>Excellence</h3>
+                    <p>We're committed to delivering the highest quality in everything we do, from code to customer service.</p>
+                </div>
+                
+                <div class="value-card">
+                    <div class="value-icon">🌍</div>
+                    <h3>Impact</h3>
+                    <p>We strive to create solutions that make a positive difference in the lives of our users and the broader community.</p>
+                </div>
+                
+                <div class="value-card">
+                    <div class="value-icon">🔍</div>
+                    <h3>Transparency</h3>
+                    <p>We believe in open communication, honest feedback, and clear processes in all our interactions.</p>
+                </div>
+                
+                <div class="value-card">
+                    <div class="value-icon">⚡</div>
+                    <h3>Agility</h3>
+                    <p>We adapt quickly to change, embrace new challenges, and continuously evolve to meet our users' needs.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Team Section -->
+    <section class="section team">
+        <div class="container">
+            <h2 class="section-title">Meet Our Team</h2>
+            <p class="section-subtitle">The passionate individuals behind our success</p>
+            
+            <div class="team-grid">
+                <div class="team-card">
+                    <div class="team-image">👨‍💻</div>
+                    <div class="team-info">
+                        <h3>Alex Johnson</h3>
+                        <div class="team-role">CEO & Co-Founder</div>
+                        <p>Visionary leader with 15+ years in tech, passionate about creating products that make a difference.</p>
+                    </div>
+                </div>
+                
+                <div class="team-card">
+                    <div class="team-image">👩‍💻</div>
+                    <div class="team-info">
+                        <h3>Sarah Chen</h3>
+                        <div class="team-role">CTO & Co-Founder</div>
+                        <p>Technical innovator dedicated to building scalable, secure, and beautiful digital solutions.</p>
+                    </div>
+                </div>
+                
+                <div class="team-card">
+                    <div class="team-image">👨‍🎨</div>
+                    <div class="team-info">
+                        <h3>Marcus Rodriguez</h3>
+                        <div class="team-role">Head of Design</div>
+                        <p>Creative director focused on crafting intuitive user experiences that delight and inspire.</p>
+                    </div>
+                </div>
+                
+                <div class="team-card">
+                    <div class="team-image">👩‍💼</div>
+                    <div class="team-info">
+                        <h3>Emily Davis</h3>
+                        <div class="team-role">VP of Operations</div>
+                        <p>Operations expert ensuring smooth processes and exceptional customer experiences.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Story Section -->
+    <section class="section story">
+        <div class="container">
+            <h2 class="section-title">Our Story</h2>
+            <p class="section-subtitle">From a simple idea to a trusted digital partner</p>
+            
+            <div class="story-content">
+                <p>
+                    It all started in 2018 when our founders, Alex and Sarah, recognized a gap in the market for truly user-centered digital solutions. Working from a small office with just a handful of team members, they set out to create technology that would not only solve problems but also inspire and empower users.
+                </p>
+                
+                <p>
+                    What began as late-night coding sessions and endless cups of coffee has evolved into a thriving company that serves thousands of users across 150+ countries. Our journey hasn't always been smooth, but every challenge has taught us valuable lessons and made us stronger.
+                </p>
+                
+                <div class="story-highlight">
+                    <h3>Today, We're Proud to Serve</h3>
+                    <p>50,000+ happy users worldwide, with 99.9% uptime and 24/7 support, making digital dreams a reality every day.</p>
+                </div>
+                
+                <p>
+                    As we look to the future, we remain committed to our core mission: creating digital experiences that matter. We're constantly innovating, expanding our team with passionate individuals, and building solutions that will shape the future of digital interaction.
+                </p>
+                
+                <p>
+                    Our story is still being written, and we're excited to have you be a part of it. Whether you're a user, a partner, or someone considering joining our team, you're contributing to something bigger than just software – you're helping us build the future.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="cta-section">
+        <div class="container">
+            <h2>Ready to Be Part of Our Story?</h2>
+            <p>Join thousands of users who trust us to deliver exceptional digital experiences.</p>
+            <a href="contact.html" class="btn btn-primary">Get Started Today</a>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="footer-content">
+            <div class="footer-section">
+                <h3>YourBrand</h3>
+                <p>Building the future of digital experiences, one innovation at a time.</p>
+                <p>© 2024 YourBrand. All rights reserved.</p>
+            </div>
+            
+            <div class="footer-section">
+                <h3>Quick Links</h3>
+                <a href="index.html">Home</a>
+                <a href="index.html#features">Features</a>
+                <a href="about.html">About</a>
+                <a href="contact.html">Contact</a>
+            </div>
+            
+            <div class="footer-section">
+                <h3>Contact Info</h3>
+                <p>Email: hello@yourbrand.com</p>
+                <p>Phone: +1 (555) 123-4567</p>
+                <p>Address: 123 Innovation St, Tech City</p>
+            </div>
+            
+            <div class="footer-section">
+                <h3>Follow Us</h3>
+                <a href="#">Twitter</a>
+                <a href="#">LinkedIn</a>
+                <a href="#">Facebook</a>
+                <a href="#">Instagram</a>
+            </div>
+        </div>
+        
+        <div class="footer-bottom">
+            <p>Made with ❤️ for an amazing user experience</p>
+        </div>
+    </footer>
+
+    <script>
+        // Mobile Navigation Toggle
+        document.addEventListener('DOMContentLoaded', function() {
+            const navToggle = document.getElementById('navToggle');
+            const navLinks = document.getElementById('navLinks');
+            const header = document.getElementById('header');
+
+            navToggle.addEventListener('click', function() {
+                navLinks.classList.toggle('active');
+                navToggle.setAttribute('aria-expanded', navLinks.classList.contains('active'));
+            });
+
+            // Close mobile menu when clicking on links
+            navLinks.addEventListener('click', function(e) {
+                if (e.target.tagName === 'A') {
+                    navLinks.classList.remove('active');
+                    navToggle.setAttribute('aria-expanded', 'false');
+                }
+            });
+
+            // Header background on scroll
+            window.addEventListener('scroll', function() {
+                if (window.scrollY > 100) {
+                    header.style.background = 'rgba(255, 255, 255, 0.98)';
+                    header.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
+                } else {
+                    header.style.background = 'rgba(255, 255, 255, 0.95)';
+                    header.style.boxShadow = 'none';
+                }
+            });
+
+            // Intersection Observer for animations
+            const observerOptions = {
+                threshold: 0.1,
+                rootMargin: '0px 0px -50px 0px'
+            };
+
+            const observer = new IntersectionObserver(function(entries) {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = '1';
+                        entry.target.style.transform = 'translateY(0)';
+                    }
+                });
+            }, observerOptions);
+
+            // Observe cards for animation
+            document.querySelectorAll('.value-card, .team-card, .mission-content > *').forEach(el => {
+                el.style.opacity = '0';
+                el.style.transform = 'translateY(20px)';
+                el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+                observer.observe(el);
+            });
+
+            // Smooth scroll for anchor links
+            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+                anchor.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const target = document.querySelector(this.getAttribute('href'));
+                    if (target) {
+                        const headerHeight = document.querySelector('.header').offsetHeight;
+                        const targetPosition = target.offsetTop - headerHeight;
+                        window.scrollTo({
+                            top: targetPosition,
+                            behavior: 'smooth'
+                        });
+                    }
+                });
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/button-page.html b/button-page.html
new file mode 100644
index 0000000..3625468
--- /dev/null
+++ b/button-page.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Button Page</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            background-color: #f0f0f0;
+        }
+        
+        .container {
+            text-align: center;
+            background: white;
+            padding: 40px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        
+        .small-button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            font-size: 14px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        
+        .small-button:hover {
+            background-color: #0056b3;
+        }
+        
+        .small-button:active {
+            transform: translateY(1px);
+        }
+        
+        h1 {
+            color: #333;
+            margin-bottom: 30px;
+        }
+        
+        p {
+            color: #666;
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Welcome to the Button Page</h1>
+        <p>Here's your small button:</p>
+        <button class="small-button" onclick="handleButtonClick()">Click Me!</button>
+        <p id="message" style="margin-top: 20px; color: #28a745; font-weight: bold;"></p>
+    </div>
+
+    <script>
+        function handleButtonClick() {
+            const message = document.getElementById('message');
+            message.textContent = 'Button clicked! 🎉';
+            
+            // Hide the message after 2 seconds
+            setTimeout(() => {
+                message.textContent = '';
+            }, 2000);
+        }
+    </script>
+</body>
+</html>
diff --git a/contact-form.html b/contact-form.html
new file mode 100644
index 0000000..95af42c
--- /dev/null
+++ b/contact-form.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Information Form</title>
+    <link rel="stylesheet" href="form-style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Contact Information Form</h1>
+        
+        <form id="contactForm" class="contact-form">
+            <div class="form-group">
+                <label for="fullName">Full Name</label>
+                <input 
+                    type="text" 
+                    id="fullName" 
+                    name="fullName" 
+                    required
+                    placeholder="Enter your full name"
+                    minlength="2"
+                    maxlength="50"
+                >
+                <span class="error-message" id="nameError"></span>
+            </div>
+            
+            <div class="form-group">
+                <label for="mobileNumber">Mobile Number</label>
+                <input 
+                    type="tel" 
+                    id="mobileNumber" 
+                    name="mobileNumber" 
+                    required
+                    placeholder="Enter your mobile number"
+                    pattern="^[\+]?[0-9]{10,15}$"
+                    title="Please enter a valid mobile number (10-15 digits, optional + prefix)"
+                >
+                <span class="error-message" id="mobileError"></span>
+            </div>
+            
+            <button type="submit" class="submit-btn">Submit</button>
+            <button type="reset" class="reset-btn">Clear</button>
+            
+            <div id="successMessage" class="success-message"></div>
+        </form>
+    </div>
+    
+    <script src="form-script.js"></script>
+</body>
+</html>
diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000..948a9d0
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,1183 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us | YourBrand - Get in Touch</title>
+    <meta name="description" content="Contact YourBrand for support, inquiries, or partnerships. We're here to help with phone, email, and live chat support available 24/7.">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #6366f1;
+            --secondary-color: #8b5cf6;
+            --accent-color: #06b6d4;
+            --text-primary: #1f2937;
+            --text-secondary: #6b7280;
+            --background-light: #ffffff;
+            --background-dark: #f8fafc;
+            --border-color: #e5e7eb;
+            --success-color: #10b981;
+            --error-color: #ef4444;
+            --shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+            --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        html {
+            scroll-behavior: smooth;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            line-height: 1.6;
+            color: var(--text-primary);
+            background-color: var(--background-light);
+        }
+
+        /* Header Navigation */
+        .header {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            transition: all 0.3s ease;
+        }
+
+        .nav {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem 2rem;
+        }
+
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-decoration: none;
+        }
+
+        .nav-links {
+            display: flex;
+            list-style: none;
+            gap: 2rem;
+        }
+
+        .nav-links a {
+            text-decoration: none;
+            color: var(--text-secondary);
+            font-weight: 500;
+            transition: color 0.3s ease;
+            position: relative;
+        }
+
+        .nav-links a:hover,
+        .nav-links a.active {
+            color: var(--primary-color);
+        }
+
+        .nav-links a::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: var(--primary-color);
+            transition: width 0.3s ease;
+        }
+
+        .nav-links a:hover::after,
+        .nav-links a.active::after {
+            width: 100%;
+        }
+
+        .nav-toggle {
+            display: none;
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            color: var(--text-primary);
+            cursor: pointer;
+        }
+
+        /* Page Header */
+        .page-header {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            padding: 8rem 2rem 4rem;
+            text-align: center;
+            color: white;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .page-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="white" opacity="0.1"/><circle cx="80" cy="40" r="1.5" fill="white" opacity="0.1"/><circle cx="60" cy="80" r="1" fill="white" opacity="0.1"/><circle cx="30" cy="70" r="1.5" fill="white" opacity="0.1"/><circle cx="90" cy="10" r="1" fill="white" opacity="0.1"/></svg>');
+        }
+
+        .page-header-content {
+            max-width: 800px;
+            margin: 0 auto;
+            position: relative;
+            z-index: 2;
+        }
+
+        .page-header h1 {
+            font-size: clamp(2rem, 4vw, 3.5rem);
+            font-weight: 700;
+            margin-bottom: 1rem;
+            animation: fadeInUp 1s ease-out;
+        }
+
+        .page-header p {
+            font-size: 1.25rem;
+            opacity: 0.9;
+            animation: fadeInUp 1s ease-out 0.2s both;
+        }
+
+        /* Contact Section */
+        .contact-section {
+            padding: 6rem 2rem;
+            background: var(--background-light);
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .contact-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 4rem;
+            margin-bottom: 4rem;
+        }
+
+        /* Contact Information */
+        .contact-info {
+            background: var(--background-dark);
+            padding: 3rem;
+            border-radius: 1rem;
+            box-shadow: var(--shadow-light);
+        }
+
+        .contact-info h2 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+            color: var(--text-primary);
+        }
+
+        .contact-info p {
+            color: var(--text-secondary);
+            margin-bottom: 2rem;
+            line-height: 1.7;
+        }
+
+        .contact-details {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+        }
+
+        .contact-item {
+            display: flex;
+            align-items: flex-start;
+            gap: 1rem;
+        }
+
+        .contact-icon {
+            width: 3rem;
+            height: 3rem;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            border-radius: 0.75rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.25rem;
+            color: white;
+            flex-shrink: 0;
+        }
+
+        .contact-item-content h3 {
+            font-size: 1.1rem;
+            font-weight: 600;
+            margin-bottom: 0.25rem;
+            color: var(--text-primary);
+        }
+
+        .contact-item-content p {
+            color: var(--text-secondary);
+            margin: 0;
+        }
+
+        .contact-item-content a {
+            color: var(--primary-color);
+            text-decoration: none;
+        }
+
+        .contact-item-content a:hover {
+            text-decoration: underline;
+        }
+
+        /* Business Hours */
+        .business-hours {
+            margin-top: 2rem;
+            padding: 2rem;
+            background: white;
+            border-radius: 0.75rem;
+            border-left: 4px solid var(--primary-color);
+        }
+
+        .business-hours h3 {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: var(--text-primary);
+        }
+
+        .hours-list {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .hours-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .hours-item .day {
+            font-weight: 500;
+            color: var(--text-primary);
+        }
+
+        .hours-item .time {
+            color: var(--text-secondary);
+        }
+
+        .hours-item.today {
+            background: var(--background-dark);
+            padding: 0.5rem;
+            border-radius: 0.5rem;
+            margin: 0 -0.5rem;
+        }
+
+        /* Contact Form */
+        .contact-form {
+            background: white;
+            padding: 3rem;
+            border-radius: 1rem;
+            box-shadow: var(--shadow-light);
+        }
+
+        .contact-form h2 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+            color: var(--text-primary);
+        }
+
+        .form-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .form-group.full-width {
+            grid-column: 1 / -1;
+        }
+
+        .form-group label {
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+            color: var(--text-primary);
+        }
+
+        .form-group input,
+        .form-group select,
+        .form-group textarea {
+            padding: 0.75rem 1rem;
+            border: 2px solid var(--border-color);
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            font-family: inherit;
+            transition: border-color 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .form-group input:focus,
+        .form-group select:focus,
+        .form-group textarea:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+
+        .form-group textarea {
+            resize: vertical;
+            min-height: 120px;
+        }
+
+        .form-group .error {
+            border-color: var(--error-color);
+        }
+
+        .form-group .error-message {
+            color: var(--error-color);
+            font-size: 0.875rem;
+            margin-top: 0.25rem;
+        }
+
+        .form-submit {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            padding: 0.875rem 2rem;
+            border: none;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            width: 100%;
+        }
+
+        .form-submit:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-large);
+        }
+
+        .form-submit:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .form-message {
+            margin-top: 1rem;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-weight: 500;
+        }
+
+        .form-message.success {
+            background: rgba(16, 185, 129, 0.1);
+            color: var(--success-color);
+            border: 1px solid rgba(16, 185, 129, 0.2);
+        }
+
+        .form-message.error {
+            background: rgba(239, 68, 68, 0.1);
+            color: var(--error-color);
+            border: 1px solid rgba(239, 68, 68, 0.2);
+        }
+
+        /* Social Media Links */
+        .social-section {
+            background: var(--background-dark);
+            padding: 4rem 2rem;
+            text-align: center;
+        }
+
+        .social-section h2 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            color: var(--text-primary);
+        }
+
+        .social-section p {
+            color: var(--text-secondary);
+            margin-bottom: 2rem;
+        }
+
+        .social-links {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .social-link {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.75rem 1.5rem;
+            background: white;
+            border-radius: 50px;
+            text-decoration: none;
+            color: var(--text-primary);
+            font-weight: 500;
+            transition: all 0.3s ease;
+            box-shadow: var(--shadow-light);
+        }
+
+        .social-link:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-medium);
+        }
+
+        .social-link.twitter:hover {
+            background: #1da1f2;
+            color: white;
+        }
+
+        .social-link.linkedin:hover {
+            background: #0077b5;
+            color: white;
+        }
+
+        .social-link.facebook:hover {
+            background: #1877f2;
+            color: white;
+        }
+
+        .social-link.instagram:hover {
+            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
+            color: white;
+        }
+
+        /* Map Section */
+        .map-section {
+            padding: 4rem 2rem;
+            background: white;
+        }
+
+        .map-section h2 {
+            text-align: center;
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            color: var(--text-primary);
+        }
+
+        .map-section p {
+            text-align: center;
+            color: var(--text-secondary);
+            margin-bottom: 3rem;
+        }
+
+        .map-container {
+            background: var(--background-dark);
+            border-radius: 1rem;
+            padding: 2rem;
+            text-align: center;
+            box-shadow: var(--shadow-light);
+        }
+
+        .map-placeholder {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            padding: 4rem 2rem;
+            border-radius: 0.75rem;
+            font-size: 1.25rem;
+            font-weight: 500;
+        }
+
+        /* Footer */
+        .footer {
+            background: var(--text-primary);
+            color: white;
+            padding: 3rem 2rem 2rem;
+        }
+
+        .footer-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .footer-section h3 {
+            font-size: 1.25rem;
+            margin-bottom: 1rem;
+            color: var(--accent-color);
+        }
+
+        .footer-section p,
+        .footer-section a {
+            color: rgba(255, 255, 255, 0.8);
+            text-decoration: none;
+            margin-bottom: 0.5rem;
+            display: block;
+        }
+
+        .footer-section a:hover {
+            color: var(--accent-color);
+        }
+
+        .footer-bottom {
+            text-align: center;
+            padding-top: 2rem;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            color: rgba(255, 255, 255, 0.6);
+        }
+
+        /* Animations */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .nav-links {
+                display: none;
+                position: absolute;
+                top: 100%;
+                left: 0;
+                right: 0;
+                background: rgba(255, 255, 255, 0.98);
+                backdrop-filter: blur(10px);
+                flex-direction: column;
+                padding: 1rem 2rem;
+                box-shadow: var(--shadow-medium);
+            }
+
+            .nav-links.active {
+                display: flex;
+            }
+
+            .nav-toggle {
+                display: block;
+            }
+
+            .page-header {
+                padding: 6rem 1rem 3rem;
+            }
+
+            .contact-grid {
+                grid-template-columns: 1fr;
+                gap: 2rem;
+            }
+
+            .contact-info,
+            .contact-form {
+                padding: 2rem;
+            }
+
+            .form-grid {
+                grid-template-columns: 1fr;
+                gap: 1rem;
+            }
+
+            .social-links {
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .social-link {
+                width: 100%;
+                max-width: 300px;
+                justify-content: center;
+            }
+
+            .business-hours {
+                padding: 1.5rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .nav {
+                padding: 1rem;
+            }
+
+            .page-header,
+            .contact-section,
+            .social-section,
+            .map-section {
+                padding-left: 1rem;
+                padding-right: 1rem;
+            }
+
+            .contact-info,
+            .contact-form {
+                padding: 1.5rem;
+            }
+
+            .contact-item {
+                align-items: center;
+            }
+
+            .contact-icon {
+                width: 2.5rem;
+                height: 2.5rem;
+                font-size: 1rem;
+            }
+        }
+
+        /* Accessibility improvements */
+        @media (prefers-reduced-motion: reduce) {
+            *,
+            ::before,
+            ::after {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+                scroll-behavior: auto !important;
+            }
+        }
+
+        /* Focus styles for keyboard navigation */
+        .form-submit:focus,
+        .social-link:focus,
+        .nav-links a:focus {
+            outline: 2px solid var(--accent-color);
+            outline-offset: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- Header Navigation -->
+    <header class="header" id="header">
+        <nav class="nav">
+            <a href="index.html" class="logo">YourBrand</a>
+            <ul class="nav-links" id="navLinks">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="index.html#features">Features</a></li>
+                <li><a href="index.html#about">About</a></li>
+                <li><a href="contact.html" class="active">Contact</a></li>
+            </ul>
+            <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">☰</button>
+        </nav>
+    </header>
+
+    <!-- Page Header -->
+    <section class="page-header">
+        <div class="page-header-content">
+            <h1>Contact Us</h1>
+            <p>We'd love to hear from you! Get in touch with our team for support, partnerships, or any questions you might have.</p>
+        </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section class="contact-section">
+        <div class="container">
+            <div class="contact-grid">
+                <!-- Contact Information -->
+                <div class="contact-info">
+                    <h2>Get in Touch</h2>
+                    <p>Ready to start your journey with us? Contact our friendly team - we're here to help you every step of the way.</p>
+                    
+                    <div class="contact-details">
+                        <div class="contact-item">
+                            <div class="contact-icon">📍</div>
+                            <div class="contact-item-content">
+                                <h3>Visit Our Office</h3>
+                                <p>123 Innovation Street<br>
+                                Tech City, TC 12345<br>
+                                United States</p>
+                            </div>
+                        </div>
+                        
+                        <div class="contact-item">
+                            <div class="contact-icon">📞</div>
+                            <div class="contact-item-content">
+                                <h3>Call Us</h3>
+                                <p>Main: <a href="tel:+15551234567">+1 (555) 123-4567</a><br>
+                                Support: <a href="tel:+15551234568">+1 (555) 123-4568</a><br>
+                                Sales: <a href="tel:+15551234569">+1 (555) 123-4569</a></p>
+                            </div>
+                        </div>
+                        
+                        <div class="contact-item">
+                            <div class="contact-icon">✉️</div>
+                            <div class="contact-item-content">
+                                <h3>Email Us</h3>
+                                <p>General: <a href="mailto:hello@yourbrand.com">hello@yourbrand.com</a><br>
+                                Support: <a href="mailto:support@yourbrand.com">support@yourbrand.com</a><br>
+                                Sales: <a href="mailto:sales@yourbrand.com">sales@yourbrand.com</a></p>
+                            </div>
+                        </div>
+                        
+                        <div class="contact-item">
+                            <div class="contact-icon">💬</div>
+                            <div class="contact-item-content">
+                                <h3>Live Chat</h3>
+                                <p>Available 24/7 on our website<br>
+                                Average response time: &lt; 2 minutes<br>
+                                <a href="#live-chat">Start Live Chat</a></p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Business Hours -->
+                    <div class="business-hours">
+                        <h3>Business Hours</h3>
+                        <div class="hours-list">
+                            <div class="hours-item today">
+                                <span class="day">Monday</span>
+                                <span class="time">9:00 AM - 6:00 PM</span>
+                            </div>
+                            <div class="hours-item">
+                                <span class="day">Tuesday</span>
+                                <span class="time">9:00 AM - 6:00 PM</span>
+                            </div>
+                            <div class="hours-item">
+                                <span class="day">Wednesday</span>
+                                <span class="time">9:00 AM - 6:00 PM</span>
+                            </div>
+                            <div class="hours-item">
+                                <span class="day">Thursday</span>
+                                <span class="time">9:00 AM - 6:00 PM</span>
+                            </div>
+                            <div class="hours-item">
+                                <span class="day">Friday</span>
+                                <span class="time">9:00 AM - 5:00 PM</span>
+                            </div>
+                            <div class="hours-item">
+                                <span class="day">Saturday</span>
+                                <span class="time">10:00 AM - 2:00 PM</span>
+                            </div>
+                            <div class="hours-item">
+                                <span class="day">Sunday</span>
+                                <span class="time">Closed</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Contact Form -->
+                <div class="contact-form">
+                    <h2>Send us a Message</h2>
+                    <form id="contactForm">
+                        <div class="form-grid">
+                            <div class="form-group">
+                                <label for="firstName">First Name *</label>
+                                <input type="text" id="firstName" name="firstName" required>
+                                <span class="error-message" id="firstNameError"></span>
+                            </div>
+                            
+                            <div class="form-group">
+                                <label for="lastName">Last Name *</label>
+                                <input type="text" id="lastName" name="lastName" required>
+                                <span class="error-message" id="lastNameError"></span>
+                            </div>
+                        </div>
+
+                        <div class="form-grid">
+                            <div class="form-group">
+                                <label for="email">Email Address *</label>
+                                <input type="email" id="email" name="email" required>
+                                <span class="error-message" id="emailError"></span>
+                            </div>
+                            
+                            <div class="form-group">
+                                <label for="phone">Phone Number</label>
+                                <input type="tel" id="phone" name="phone">
+                                <span class="error-message" id="phoneError"></span>
+                            </div>
+                        </div>
+
+                        <div class="form-grid">
+                            <div class="form-group">
+                                <label for="company">Company</label>
+                                <input type="text" id="company" name="company">
+                            </div>
+                            
+                            <div class="form-group">
+                                <label for="subject">Subject *</label>
+                                <select id="subject" name="subject" required>
+                                    <option value="">Select a subject</option>
+                                    <option value="general">General Inquiry</option>
+                                    <option value="support">Technical Support</option>
+                                    <option value="sales">Sales & Pricing</option>
+                                    <option value="partnership">Partnership</option>
+                                    <option value="feedback">Feedback</option>
+                                    <option value="other">Other</option>
+                                </select>
+                                <span class="error-message" id="subjectError"></span>
+                            </div>
+                        </div>
+
+                        <div class="form-group full-width">
+                            <label for="message">Message *</label>
+                            <textarea id="message" name="message" placeholder="Tell us how we can help you..." required></textarea>
+                            <span class="error-message" id="messageError"></span>
+                        </div>
+
+                        <button type="submit" class="form-submit" id="submitBtn">
+                            Send Message
+                        </button>
+
+                        <div class="form-message" id="formMessage" style="display: none;"></div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Social Media Section -->
+    <section class="social-section">
+        <div class="container">
+            <h2>Follow Us</h2>
+            <p>Stay connected with us on social media for the latest updates, tips, and behind-the-scenes content.</p>
+            
+            <div class="social-links">
+                <a href="https://twitter.com/yourbrand" class="social-link twitter" target="_blank" rel="noopener noreferrer">
+                    <span>🐦</span>
+                    <span>Twitter</span>
+                </a>
+                
+                <a href="https://linkedin.com/company/yourbrand" class="social-link linkedin" target="_blank" rel="noopener noreferrer">
+                    <span>💼</span>
+                    <span>LinkedIn</span>
+                </a>
+                
+                <a href="https://facebook.com/yourbrand" class="social-link facebook" target="_blank" rel="noopener noreferrer">
+                    <span>👥</span>
+                    <span>Facebook</span>
+                </a>
+                
+                <a href="https://instagram.com/yourbrand" class="social-link instagram" target="_blank" rel="noopener noreferrer">
+                    <span>📷</span>
+                    <span>Instagram</span>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Map Section -->
+    <section class="map-section">
+        <div class="container">
+            <h2>Find Us</h2>
+            <p>Located in the heart of Tech City, we're easy to reach by car, public transportation, or on foot.</p>
+            
+            <div class="map-container">
+                <div class="map-placeholder">
+                    🗺️ Interactive Map<br>
+                    <small>123 Innovation Street, Tech City, TC 12345</small><br>
+                    <small>Click to open in Maps app</small>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-section">
+                    <h3>YourBrand</h3>
+                    <p>Building the future of digital experiences, one innovation at a time.</p>
+                    <p>© 2024 YourBrand. All rights reserved.</p>
+                </div>
+                
+                <div class="footer-section">
+                    <h3>Quick Links</h3>
+                    <a href="index.html">Home</a>
+                    <a href="index.html#features">Features</a>
+                    <a href="index.html#about">About</a>
+                    <a href="contact.html">Contact</a>
+                </div>
+                
+                <div class="footer-section">
+                    <h3>Contact Info</h3>
+                    <p>Email: hello@yourbrand.com</p>
+                    <p>Phone: +1 (555) 123-4567</p>
+                    <p>Address: 123 Innovation St, Tech City</p>
+                </div>
+                
+                <div class="footer-section">
+                    <h3>Follow Us</h3>
+                    <a href="#">Twitter</a>
+                    <a href="#">LinkedIn</a>
+                    <a href="#">Facebook</a>
+                    <a href="#">Instagram</a>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <p>Made with ❤️ for an amazing user experience</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Mobile Navigation Toggle
+        document.addEventListener('DOMContentLoaded', function() {
+            const navToggle = document.getElementById('navToggle');
+            const navLinks = document.getElementById('navLinks');
+            const header = document.getElementById('header');
+
+            navToggle.addEventListener('click', function() {
+                navLinks.classList.toggle('active');
+                navToggle.setAttribute('aria-expanded', navLinks.classList.contains('active'));
+            });
+
+            // Close mobile menu when clicking on links
+            navLinks.addEventListener('click', function(e) {
+                if (e.target.tagName === 'A') {
+                    navLinks.classList.remove('active');
+                    navToggle.setAttribute('aria-expanded', 'false');
+                }
+            });
+
+            // Header background on scroll
+            window.addEventListener('scroll', function() {
+                if (window.scrollY > 100) {
+                    header.style.background = 'rgba(255, 255, 255, 0.98)';
+                    header.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
+                } else {
+                    header.style.background = 'rgba(255, 255, 255, 0.95)';
+                    header.style.boxShadow = 'none';
+                }
+            });
+
+            // Contact Form Handling
+            const contactForm = document.getElementById('contactForm');
+            const submitBtn = document.getElementById('submitBtn');
+            const formMessage = document.getElementById('formMessage');
+
+            // Form validation
+            function validateField(field, errorElement, validationFn) {
+                const value = field.value.trim();
+                const isValid = validationFn(value);
+                
+                if (isValid) {
+                    field.classList.remove('error');
+                    errorElement.textContent = '';
+                    return true;
+                } else {
+                    field.classList.add('error');
+                    return false;
+                }
+            }
+
+            function validateEmail(email) {
+                const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                return re.test(email);
+            }
+
+            function validatePhone(phone) {
+                if (!phone) return true; // Optional field
+                const re = /^[\+]?[1-9][\d]{0,15}$/;
+                return re.test(phone.replace(/[\s\-\(\)]/g, ''));
+            }
+
+            // Real-time validation
+            document.getElementById('firstName').addEventListener('blur', function() {
+                validateField(this, document.getElementById('firstNameError'), value => {
+                    if (!value) {
+                        document.getElementById('firstNameError').textContent = 'First name is required';
+                        return false;
+                    }
+                    return true;
+                });
+            });
+
+            document.getElementById('lastName').addEventListener('blur', function() {
+                validateField(this, document.getElementById('lastNameError'), value => {
+                    if (!value) {
+                        document.getElementById('lastNameError').textContent = 'Last name is required';
+                        return false;
+                    }
+                    return true;
+                });
+            });
+
+            document.getElementById('email').addEventListener('blur', function() {
+                validateField(this, document.getElementById('emailError'), value => {
+                    if (!value) {
+                        document.getElementById('emailError').textContent = 'Email is required';
+                        return false;
+                    }
+                    if (!validateEmail(value)) {
+                        document.getElementById('emailError').textContent = 'Please enter a valid email address';
+                        return false;
+                    }
+                    return true;
+                });
+            });
+
+            document.getElementById('phone').addEventListener('blur', function() {
+                validateField(this, document.getElementById('phoneError'), value => {
+                    if (value && !validatePhone(value)) {
+                        document.getElementById('phoneError').textContent = 'Please enter a valid phone number';
+                        return false;
+                    }
+                    return true;
+                });
+            });
+
+            document.getElementById('subject').addEventListener('change', function() {
+                validateField(this, document.getElementById('subjectError'), value => {
+                    if (!value) {
+                        document.getElementById('subjectError').textContent = 'Please select a subject';
+                        return false;
+                    }
+                    return true;
+                });
+            });
+
+            document.getElementById('message').addEventListener('blur', function() {
+                validateField(this, document.getElementById('messageError'), value => {
+                    if (!value) {
+                        document.getElementById('messageError').textContent = 'Message is required';
+                        return false;
+                    }
+                    if (value.length < 10) {
+                        document.getElementById('messageError').textContent = 'Message must be at least 10 characters long';
+                        return false;
+                    }
+                    return true;
+                });
+            });
+
+            // Form submission
+            contactForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                
+                // Validate all fields
+                const firstName = document.getElementById('firstName');
+                const lastName = document.getElementById('lastName');
+                const email = document.getElementById('email');
+                const phone = document.getElementById('phone');
+                const subject = document.getElementById('subject');
+                const message = document.getElementById('message');
+
+                let isValid = true;
+
+                // Validate required fields
+                if (!validateField(firstName, document.getElementById('firstNameError'), value => !!value)) {
+                    document.getElementById('firstNameError').textContent = 'First name is required';
+                    isValid = false;
+                }
+
+                if (!validateField(lastName, document.getElementById('lastNameError'), value => !!value)) {
+                    document.getElementById('lastNameError').textContent = 'Last name is required';
+                    isValid = false;
+                }
+
+                if (!validateField(email, document.getElementById('emailError'), value => !!value && validateEmail(value))) {
+                    document.getElementById('emailError').textContent = !email.value.trim() ? 'Email is required' : 'Please enter a valid email address';
+                    isValid = false;
+                }
+
+                if (phone.value.trim() && !validateField(phone, document.getElementById('phoneError'), validatePhone)) {
+                    document.getElementById('phoneError').textContent = 'Please enter a valid phone number';
+                    isValid = false;
+                }
+
+                if (!validateField(subject, document.getElementById('subjectError'), value => !!value)) {
+                    document.getElementById('subjectError').textContent = 'Please select a subject';
+                    isValid = false;
+                }
+
+                if (!validateField(message, document.getElementById('messageError'), value => !!value && value.length >= 10)) {
+                    const errorText = !message.value.trim() ? 'Message is required' : 'Message must be at least 10 characters long';
+                    document.getElementById('messageError').textContent = errorText;
+                    isValid = false;
+                }
+
+                if (!isValid) {
+                    formMessage.textContent = 'Please fix the errors above and try again.';
+                    formMessage.className = 'form-message error';
+                    formMessage.style.display = 'block';
+                    return;
+                }
+
+                // Simulate form submission
+                submitBtn.disabled = true;
+                submitBtn.textContent = 'Sending...';
+                formMessage.style.display = 'none';
+
+                setTimeout(() => {
+                    // Reset form
+                    contactForm.reset();
+                    
+                    // Show success message
+                    formMessage.textContent = 'Thank you for your message! We\'ll get back to you within 24 hours.';
+                    formMessage.className = 'form-message success';
+                    formMessage.style.display = 'block';
+                    
+                    // Reset button
+                    submitBtn.disabled = false;
+                    submitBtn.textContent = 'Send Message';
+                    
+                    // Clear any error states
+                    document.querySelectorAll('.error').forEach(el => el.classList.remove('error'));
+                    document.querySelectorAll('.error-message').forEach(el => el.textContent = '');
+                    
+                    // Hide success message after 5 seconds
+                    setTimeout(() => {
+                        formMessage.style.display = 'none';
+                    }, 5000);
+                }, 2000);
+            });
+
+            // Set today's business hours
+            const today = new Date().getDay(); // 0 = Sunday, 1 = Monday, etc.
+            const hoursItems = document.querySelectorAll('.hours-item');
+            hoursItems.forEach((item, index) => {
+                item.classList.remove('today');
+            });
+            
+            // Adjust for Monday = 0 in our list vs Sunday = 0 in getDay()
+            const todayIndex = today === 0 ? 6 : today - 1;
+            if (hoursItems[todayIndex]) {
+                hoursItems[todayIndex].classList.add('today');
+            }
+
+            // Intersection Observer for animations
+            const observerOptions = {
+                threshold: 0.1,
+                rootMargin: '0px 0px -50px 0px'
+            };
+
+            const observer = new IntersectionObserver(function(entries) {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = '1';
+                        entry.target.style.transform = 'translateY(0)';
+                    }
+                });
+            }, observerOptions);
+
+            // Observe contact cards and form
+            document.querySelectorAll('.contact-info, .contact-form, .social-links, .map-container').forEach(el => {
+                el.style.opacity = '0';
+                el.style.transform = 'translateY(20px)';
+                el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+                observer.observe(el);
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/form-script.js b/form-script.js
new file mode 100644
index 0000000..8088895
--- /dev/null
+++ b/form-script.js
@@ -0,0 +1,190 @@
+// Contact Form JavaScript
+document.addEventListener('DOMContentLoaded', function() {
+    const form = document.getElementById('contactForm');
+    const nameInput = document.getElementById('fullName');
+    const mobileInput = document.getElementById('mobileNumber');
+    const nameError = document.getElementById('nameError');
+    const mobileError = document.getElementById('mobileError');
+    const successMessage = document.getElementById('successMessage');
+    const submitBtn = form.querySelector('.submit-btn');
+
+    // Real-time validation functions
+    function validateName(name) {
+        const nameRegex = /^[a-zA-Z\s]{2,50}$/;
+        return nameRegex.test(name.trim());
+    }
+
+    function validateMobile(mobile) {
+        const mobileRegex = /^[\+]?[0-9]{10,15}$/;
+        return mobileRegex.test(mobile.replace(/\s/g, ''));
+    }
+
+    function showError(element, message) {
+        element.textContent = message;
+        element.style.display = 'block';
+    }
+
+    function hideError(element) {
+        element.textContent = '';
+        element.style.display = 'none';
+    }
+
+    function updateSubmitButton() {
+        const isNameValid = validateName(nameInput.value);
+        const isMobileValid = validateMobile(mobileInput.value);
+        
+        submitBtn.disabled = !(isNameValid && isMobileValid && nameInput.value.trim() && mobileInput.value.trim());
+    }
+
+    // Real-time name validation
+    nameInput.addEventListener('input', function() {
+        const name = this.value.trim();
+        
+        if (name === '') {
+            hideError(nameError);
+        } else if (!validateName(name)) {
+            showError(nameError, 'Name must be 2-50 characters long and contain only letters and spaces');
+        } else {
+            hideError(nameError);
+        }
+        
+        updateSubmitButton();
+    });
+
+    // Real-time mobile validation
+    mobileInput.addEventListener('input', function() {
+        let mobile = this.value.replace(/\s/g, '');
+        
+        // Auto-format mobile number (optional)
+        if (mobile.length > 3 && mobile.length <= 6) {
+            mobile = mobile.slice(0, 3) + ' ' + mobile.slice(3);
+        } else if (mobile.length > 6 && mobile.length <= 10) {
+            mobile = mobile.slice(0, 3) + ' ' + mobile.slice(3, 6) + ' ' + mobile.slice(6);
+        }
+        
+        const rawMobile = mobile.replace(/\s/g, '');
+        
+        if (rawMobile === '') {
+            hideError(mobileError);
+        } else if (!validateMobile(rawMobile)) {
+            showError(mobileError, 'Please enter a valid mobile number (10-15 digits)');
+        } else {
+            hideError(mobileError);
+        }
+        
+        updateSubmitButton();
+    });
+
+    // Format mobile number on blur
+    mobileInput.addEventListener('blur', function() {
+        let mobile = this.value.replace(/\s/g, '');
+        
+        // Format mobile number for better readability
+        if (mobile.length >= 10) {
+            if (mobile.startsWith('+')) {
+                // International format
+                this.value = mobile.slice(0, 1) + ' ' + mobile.slice(1, 4) + ' ' + mobile.slice(4, 7) + ' ' + mobile.slice(7);
+            } else {
+                // Domestic format
+                this.value = mobile.slice(0, 3) + ' ' + mobile.slice(3, 6) + ' ' + mobile.slice(6);
+            }
+        }
+    });
+
+    // Form submission
+    form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        const name = nameInput.value.trim();
+        const mobile = mobileInput.value.replace(/\s/g, '');
+        
+        // Final validation
+        let hasErrors = false;
+        
+        if (!validateName(name)) {
+            showError(nameError, 'Please enter a valid name');
+            hasErrors = true;
+        }
+        
+        if (!validateMobile(mobile)) {
+            showError(mobileError, 'Please enter a valid mobile number');
+            hasErrors = true;
+        }
+        
+        if (hasErrors) {
+            return;
+        }
+        
+        // Show loading state
+        submitBtn.textContent = 'Submitting...';
+        submitBtn.classList.add('loading');
+        submitBtn.disabled = true;
+        
+        // Simulate form submission (replace with actual API call)
+        setTimeout(() => {
+            // Success
+            successMessage.innerHTML = `
+                <strong>Success!</strong><br>
+                Name: ${name}<br>
+                Mobile: ${mobile}<br>
+                Form submitted successfully!
+            `;
+            successMessage.style.display = 'block';
+            
+            // Reset form after successful submission
+            form.reset();
+            hideError(nameError);
+            hideError(mobileError);
+            
+            // Reset button state
+            submitBtn.textContent = 'Submit';
+            submitBtn.classList.remove('loading');
+            submitBtn.disabled = true;
+            
+            // Hide success message after 5 seconds
+            setTimeout(() => {
+                successMessage.style.display = 'none';
+            }, 5000);
+            
+        }, 1500);
+    });
+
+    // Reset button functionality
+    form.addEventListener('reset', function() {
+        hideError(nameError);
+        hideError(mobileError);
+        successMessage.style.display = 'none';
+        submitBtn.disabled = true;
+        submitBtn.textContent = 'Submit';
+        submitBtn.classList.remove('loading');
+    });
+
+    // Initial state
+    updateSubmitButton();
+});
+
+// Additional utility functions
+function formatPhoneNumber(phoneNumber) {
+    const cleaned = phoneNumber.replace(/\D/g, '');
+    
+    if (cleaned.length === 10) {
+        return `${cleaned.slice(0, 3)} ${cleaned.slice(3, 6)} ${cleaned.slice(6)}`;
+    } else if (cleaned.length === 11 && cleaned.startsWith('1')) {
+        return `+1 ${cleaned.slice(1, 4)} ${cleaned.slice(4, 7)} ${cleaned.slice(7)}`;
+    }
+    
+    return phoneNumber;
+}
+
+// Prevent form submission on Enter key in input fields (optional)
+document.querySelectorAll('input').forEach(input => {
+    input.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const form = this.closest('form');
+            if (form) {
+                form.dispatchEvent(new Event('submit'));
+            }
+        }
+    });
+});
diff --git a/form-style.css b/form-style.css
new file mode 100644
index 0000000..f4083b4
--- /dev/null
+++ b/form-style.css
@@ -0,0 +1,199 @@
+/* Contact Form Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.container {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 40px;
+    border-radius: 15px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 500px;
+    backdrop-filter: blur(10px);
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 30px;
+    font-size: 2rem;
+    font-weight: 300;
+}
+
+.contact-form {
+    width: 100%;
+}
+
+.form-group {
+    margin-bottom: 25px;
+}
+
+label {
+    display: block;
+    margin-bottom: 8px;
+    color: #555;
+    font-weight: 500;
+    font-size: 1rem;
+}
+
+input[type="text"],
+input[type="tel"] {
+    width: 100%;
+    padding: 15px;
+    border: 2px solid #e1e1e1;
+    border-radius: 8px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    background: #fff;
+}
+
+input[type="text"]:focus,
+input[type="tel"]:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    transform: translateY(-2px);
+}
+
+input[type="text"]:valid,
+input[type="tel"]:valid {
+    border-color: #10b981;
+}
+
+input[type="text"]:invalid:not(:placeholder-shown),
+input[type="tel"]:invalid:not(:placeholder-shown) {
+    border-color: #ef4444;
+}
+
+.error-message {
+    display: block;
+    color: #ef4444;
+    font-size: 0.875rem;
+    margin-top: 5px;
+    min-height: 20px;
+}
+
+.submit-btn,
+.reset-btn {
+    width: 48%;
+    padding: 15px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-right: 4%;
+}
+
+.submit-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.submit-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+}
+
+.submit-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.reset-btn {
+    background: #6b7280;
+    color: white;
+    margin-right: 0;
+}
+
+.reset-btn:hover {
+    background: #4b5563;
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(107, 114, 128, 0.4);
+}
+
+.success-message {
+    margin-top: 20px;
+    padding: 15px;
+    background: #d1fae5;
+    color: #065f46;
+    border-radius: 8px;
+    border-left: 4px solid #10b981;
+    display: none;
+}
+
+/* Responsive Design */
+@media (max-width: 600px) {
+    .container {
+        padding: 30px 20px;
+        margin: 10px;
+    }
+    
+    h1 {
+        font-size: 1.5rem;
+    }
+    
+    .submit-btn,
+    .reset-btn {
+        width: 100%;
+        margin-right: 0;
+        margin-bottom: 10px;
+    }
+}
+
+/* Animation for form appearance */
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.container {
+    animation: slideIn 0.6s ease-out;
+}
+
+/* Loading state */
+.loading {
+    position: relative;
+    overflow: hidden;
+}
+
+.loading::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+    0% {
+        left: -100%;
+    }
+    100% {
+        left: 100%;
+    }
+}
diff --git a/greeting-hello-button.html b/greeting-hello-button.html
new file mode 100644
index 0000000..8b177a4
--- /dev/null
+++ b/greeting-hello-button.html
@@ -0,0 +1,281 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Greeting Hello Button</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(45deg, #667eea 0%, #764ba2 50%, #667eea 100%);
+            background-size: 400% 400%;
+            animation: gradientShift 8s ease infinite;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        
+        @keyframes gradientShift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        
+        .greeting-container {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 50px 40px;
+            text-align: center;
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            max-width: 500px;
+            width: 100%;
+            animation: slideUp 0.8s ease-out;
+        }
+        
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .greeting-title {
+            font-size: 2.5rem;
+            color: #333;
+            margin-bottom: 10px;
+            font-weight: 700;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .greeting-subtitle {
+            font-size: 1.1rem;
+            color: #666;
+            margin-bottom: 30px;
+            font-weight: 300;
+        }
+        
+        .hello-greeting-button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 15px 35px;
+            font-size: 1.2rem;
+            font-weight: 600;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+            position: relative;
+            overflow: hidden;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .hello-greeting-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.5s;
+        }
+        
+        .hello-greeting-button:hover::before {
+            left: 100%;
+        }
+        
+        .hello-greeting-button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
+            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+        }
+        
+        .hello-greeting-button:active {
+            transform: translateY(-1px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+        }
+        
+        .greeting-message {
+            margin-top: 25px;
+            font-size: 1.1rem;
+            font-weight: 500;
+            color: #28a745;
+            opacity: 0;
+            transform: translateY(10px);
+            transition: all 0.3s ease;
+            min-height: 30px;
+        }
+        
+        .greeting-message.show {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        
+        .emoji-decoration {
+            font-size: 1.5rem;
+            margin: 0 10px;
+            animation: bounce 2s infinite;
+        }
+        
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% {
+                transform: translateY(0);
+            }
+            40% {
+                transform: translateY(-10px);
+            }
+            60% {
+                transform: translateY(-5px);
+            }
+        }
+        
+        .click-count {
+            margin-top: 15px;
+            font-size: 0.9rem;
+            color: #666;
+            font-style: italic;
+        }
+        
+        /* Mobile responsive */
+        @media (max-width: 768px) {
+            .greeting-container {
+                padding: 30px 25px;
+                margin: 20px;
+            }
+            
+            .greeting-title {
+                font-size: 2rem;
+            }
+            
+            .greeting-subtitle {
+                font-size: 1rem;
+            }
+            
+            .hello-greeting-button {
+                padding: 12px 28px;
+                font-size: 1rem;
+            }
+            
+            .greeting-message {
+                font-size: 1rem;
+            }
+        }
+        
+        @media (max-width: 480px) {
+            .greeting-title {
+                font-size: 1.8rem;
+            }
+            
+            .hello-greeting-button {
+                padding: 10px 25px;
+                font-size: 0.95rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="greeting-container">
+        <h1 class="greeting-title">Welcome!</h1>
+        <p class="greeting-subtitle">Click the button below to receive a friendly greeting</p>
+        
+        <button class="hello-greeting-button" onclick="showGreeting()">
+            Say Hello
+        </button>
+        
+        <div class="greeting-message" id="greetingMessage"></div>
+        <div class="click-count" id="clickCount"></div>
+    </div>
+
+    <script>
+        let clickCounter = 0;
+        const greetings = [
+            "Hello! 👋 Welcome to our site!",
+            "Hi there! 😊 Great to see you!",
+            "Greetings! 🌟 Hope you're having a wonderful day!",
+            "Hello again! 🎉 Thanks for clicking!",
+            "Hey! 👋 You're awesome for visiting!",
+            "Hi! 🌈 Sending you positive vibes!",
+            "Hello friend! 🤗 Nice to meet you!",
+            "Greetings and salutations! ✨ You rock!"
+        ];
+        
+        function showGreeting() {
+            clickCounter++;
+            const messageElement = document.getElementById('greetingMessage');
+            const countElement = document.getElementById('clickCount');
+            
+            // Remove show class first for animation reset
+            messageElement.classList.remove('show');
+            
+            // Small delay to ensure animation resets
+            setTimeout(() => {
+                // Get random greeting or use index based on click count
+                const greetingIndex = (clickCounter - 1) % greetings.length;
+                const greeting = greetings[greetingIndex];
+                
+                messageElement.innerHTML = `<span class="emoji-decoration">🎉</span>${greeting}<span class="emoji-decoration">🎉</span>`;
+                messageElement.classList.add('show');
+                
+                // Update click count
+                if (clickCounter === 1) {
+                    countElement.textContent = `First click! Welcome aboard! 🚀`;
+                } else if (clickCounter <= 5) {
+                    countElement.textContent = `Click #${clickCounter} - You're on a roll! 🔥`;
+                } else if (clickCounter <= 10) {
+                    countElement.textContent = `Click #${clickCounter} - You really like this button! 😄`;
+                } else {
+                    countElement.textContent = `Click #${clickCounter} - You're a clicking champion! 🏆`;
+                }
+                
+                // Add some sparkle effect (optional)
+                addSparkleEffect();
+            }, 100);
+        }
+        
+        function addSparkleEffect() {
+            const button = document.querySelector('.hello-greeting-button');
+            button.style.transform = 'translateY(-3px) scale(1.05)';
+            
+            setTimeout(() => {
+                button.style.transform = '';
+            }, 200);
+        }
+        
+        // Add keyboard support
+        document.addEventListener('keydown', function(event) {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                showGreeting();
+            }
+        });
+        
+        // Welcome message on page load
+        window.addEventListener('load', function() {
+            setTimeout(() => {
+                const messageElement = document.getElementById('greetingMessage');
+                messageElement.innerHTML = '<span style="color: #666; font-size: 0.9rem;">👆 Click the button above for a friendly greeting!</span>';
+                messageElement.classList.add('show');
+            }, 1000);
+        });
+    </script>
+</body>
+</html>
diff --git a/hello.html b/hello.html
new file mode 100644
index 0000000..c584ae7
--- /dev/null
+++ b/hello.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hello Page</title>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .hello-container {
+            text-align: center;
+            background: rgba(255, 255, 255, 0.9);
+            padding: 3rem 4rem;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            animation: fadeIn 1s ease-out;
+        }
+        
+        h1 {
+            font-size: 3rem;
+            color: #333;
+            margin: 0;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .hello-button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            font-size: 1rem;
+            border-radius: 25px;
+            cursor: pointer;
+            margin-top: 2rem;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            font-family: 'Arial', sans-serif;
+            font-weight: bold;
+        }
+        
+        .hello-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+        }
+        
+        .hello-button:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+        }
+        
+        @media (max-width: 768px) {
+            .hello-container {
+                padding: 2rem;
+                margin: 1rem;
+            }
+            
+            h1 {
+                font-size: 2rem;
+            }
+            
+            .hello-button {
+                padding: 10px 20px;
+                font-size: 0.9rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="hello-container">
+        <h1>Hello</h1>
+        <button class="hello-button" onclick="sayHello()">Hello Button</button>
+    </div>
+    <script>
+        function sayHello() {
+            alert('Hello! 👋 Thanks for clicking the button!');
+        }
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c2e8bc7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Radio Button Selection</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Please Make Your Selection</h1>
+        
+        <form id="radioForm">
+            <div class="question">
+                <h2>Do you agree with the terms and conditions?</h2>
+                
+                <div class="radio-group">
+                    <div class="radio-option">
+                        <input type="radio" id="yes" name="answer" value="yes">
+                        <label for="yes">Yes</label>
+                    </div>
+                    
+                    <div class="radio-option">
+                        <input type="radio" id="no" name="answer" value="no">
+                        <label for="no">No</label>
+                    </div>
+                </div>
+            </div>
+            
+            <button type="submit" class="submit-btn">Submit</button>
+            <div id="result" class="result"></div>
+        </form>
+    </div>
+    
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/names_table.html b/names_table.html
new file mode 100644
index 0000000..c1d05c8
--- /dev/null
+++ b/names_table.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random Names Table</title>
+</head>
+<body>
+    <h1>Random Names Table</h1>
+    
+    <table border="1">
+        <thead>
+            <tr>
+                <th>ID</th>
+                <th>Name</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>1</td>
+                <td>Alice Johnson</td>
+            </tr>
+            <tr>
+                <td>2</td>
+                <td>Michael Chen</td>
+            </tr>
+            <tr>
+                <td>3</td>
+                <td>Sarah Williams</td>
+            </tr>
+            <tr>
+                <td>4</td>
+                <td>David Rodriguez</td>
+            </tr>
+            <tr>
+                <td>5</td>
+                <td>Emma Thompson</td>
+            </tr>
+        </tbody>
+    </table>
+</body>
+</html>
diff --git a/projects-script.js b/projects-script.js
new file mode 100644
index 0000000..4832118
--- /dev/null
+++ b/projects-script.js
@@ -0,0 +1,242 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const cardsWrapper = document.getElementById('cardsWrapper');
+    const scrollLeftBtn = document.getElementById('scrollLeft');
+    const scrollRightBtn = document.getElementById('scrollRight');
+    const indicatorDots = document.getElementById('indicatorDots');
+    const projectCards = document.querySelectorAll('.project-card');
+
+    // Scroll amount (one card width + gap)
+    const scrollAmount = 380;
+
+    // Initialize scroll indicator dots
+    function initIndicatorDots() {
+        const numCards = projectCards.length;
+        const cardsPerView = Math.floor(cardsWrapper.clientWidth / 380);
+        const numDots = Math.ceil(numCards / cardsPerView);
+
+        indicatorDots.innerHTML = '';
+        for (let i = 0; i < numDots; i++) {
+            const dot = document.createElement('div');
+            dot.className = 'indicator-dot';
+            if (i === 0) dot.classList.add('active');
+            dot.addEventListener('click', () => scrollToSection(i));
+            indicatorDots.appendChild(dot);
+        }
+    }
+
+    // Scroll to specific section
+    function scrollToSection(index) {
+        const cardsPerView = Math.floor(cardsWrapper.clientWidth / 380);
+        const scrollPosition = index * cardsPerView * scrollAmount;
+        cardsWrapper.scrollTo({
+            left: scrollPosition,
+            behavior: 'smooth'
+        });
+    }
+
+    // Update active indicator dot
+    function updateIndicator() {
+        const dots = indicatorDots.querySelectorAll('.indicator-dot');
+        const cardsPerView = Math.floor(cardsWrapper.clientWidth / 380);
+        const scrollPosition = cardsWrapper.scrollLeft;
+        const activeIndex = Math.round(scrollPosition / (cardsPerView * scrollAmount));
+
+        dots.forEach((dot, index) => {
+            dot.classList.toggle('active', index === activeIndex);
+        });
+
+        updateScrollButtons();
+    }
+
+    // Update scroll button states
+    function updateScrollButtons() {
+        const maxScroll = cardsWrapper.scrollWidth - cardsWrapper.clientWidth;
+        scrollLeftBtn.disabled = cardsWrapper.scrollLeft <= 0;
+        scrollRightBtn.disabled = cardsWrapper.scrollLeft >= maxScroll - 5;
+    }
+
+    // Scroll left button
+    scrollLeftBtn.addEventListener('click', () => {
+        cardsWrapper.scrollBy({
+            left: -scrollAmount,
+            behavior: 'smooth'
+        });
+    });
+
+    // Scroll right button
+    scrollRightBtn.addEventListener('click', () => {
+        cardsWrapper.scrollBy({
+            left: scrollAmount,
+            behavior: 'smooth'
+        });
+    });
+
+    // Listen to scroll events
+    cardsWrapper.addEventListener('scroll', () => {
+        updateIndicator();
+    });
+
+    // Handle window resize
+    let resizeTimer;
+    window.addEventListener('resize', () => {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(() => {
+            initIndicatorDots();
+            updateIndicator();
+        }, 250);
+    });
+
+    // Touch/swipe support for mobile
+    let touchStartX = 0;
+    let touchEndX = 0;
+    let isDragging = false;
+    let startScrollLeft = 0;
+
+    cardsWrapper.addEventListener('touchstart', (e) => {
+        touchStartX = e.touches[0].clientX;
+        startScrollLeft = cardsWrapper.scrollLeft;
+        isDragging = true;
+    }, { passive: true });
+
+    cardsWrapper.addEventListener('touchmove', (e) => {
+        if (!isDragging) return;
+        touchEndX = e.touches[0].clientX;
+        const diff = touchStartX - touchEndX;
+        cardsWrapper.scrollLeft = startScrollLeft + diff;
+    }, { passive: true });
+
+    cardsWrapper.addEventListener('touchend', () => {
+        isDragging = false;
+    });
+
+    // Mouse drag support for desktop
+    let mouseDown = false;
+    let startX;
+    let scrollLeft;
+
+    cardsWrapper.addEventListener('mousedown', (e) => {
+        mouseDown = true;
+        startX = e.pageX - cardsWrapper.offsetLeft;
+        scrollLeft = cardsWrapper.scrollLeft;
+        cardsWrapper.style.cursor = 'grabbing';
+    });
+
+    cardsWrapper.addEventListener('mouseleave', () => {
+        mouseDown = false;
+        cardsWrapper.style.cursor = 'grab';
+    });
+
+    cardsWrapper.addEventListener('mouseup', () => {
+        mouseDown = false;
+        cardsWrapper.style.cursor = 'grab';
+    });
+
+    cardsWrapper.addEventListener('mousemove', (e) => {
+        if (!mouseDown) return;
+        e.preventDefault();
+        const x = e.pageX - cardsWrapper.offsetLeft;
+        const walk = (x - startX) * 2;
+        cardsWrapper.scrollLeft = scrollLeft - walk;
+    });
+
+    // Set cursor style
+    cardsWrapper.style.cursor = 'grab';
+
+    // Keyboard navigation
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowLeft') {
+            cardsWrapper.scrollBy({
+                left: -scrollAmount,
+                behavior: 'smooth'
+            });
+        } else if (e.key === 'ArrowRight') {
+            cardsWrapper.scrollBy({
+                left: scrollAmount,
+                behavior: 'smooth'
+            });
+        }
+    });
+
+    // Handle view button clicks
+    const viewButtons = document.querySelectorAll('.view-btn');
+    viewButtons.forEach((btn, index) => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const card = btn.closest('.project-card');
+            const title = card.querySelector('.card-title').textContent;
+            
+            // Add animation
+            btn.style.transform = 'scale(0.95)';
+            setTimeout(() => {
+                btn.style.transform = 'scale(1)';
+            }, 150);
+
+            // Show alert (replace with actual navigation)
+            setTimeout(() => {
+                alert(`Opening project: ${title}\n\nThis would navigate to the project details page.`);
+            }, 200);
+        });
+    });
+
+    // Handle card clicks
+    projectCards.forEach((card) => {
+        card.addEventListener('click', (e) => {
+            if (!e.target.classList.contains('view-btn')) {
+                const title = card.querySelector('.card-title').textContent;
+                console.log(`Card clicked: ${title}`);
+            }
+        });
+    });
+
+    // Auto-scroll feature (optional - uncomment to enable)
+    /*
+    let autoScrollInterval;
+    let isAutoScrolling = false;
+
+    function startAutoScroll() {
+        if (isAutoScrolling) return;
+        isAutoScrolling = true;
+        
+        autoScrollInterval = setInterval(() => {
+            const maxScroll = cardsWrapper.scrollWidth - cardsWrapper.clientWidth;
+            
+            if (cardsWrapper.scrollLeft >= maxScroll - 5) {
+                cardsWrapper.scrollTo({ left: 0, behavior: 'smooth' });
+            } else {
+                cardsWrapper.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+            }
+        }, 3000);
+    }
+
+    function stopAutoScroll() {
+        isAutoScrolling = false;
+        clearInterval(autoScrollInterval);
+    }
+
+    // Start auto-scroll after 2 seconds
+    setTimeout(startAutoScroll, 2000);
+
+    // Stop auto-scroll on user interaction
+    cardsWrapper.addEventListener('mouseenter', stopAutoScroll);
+    cardsWrapper.addEventListener('touchstart', stopAutoScroll);
+    scrollLeftBtn.addEventListener('click', stopAutoScroll);
+    scrollRightBtn.addEventListener('click', stopAutoScroll);
+    */
+
+    // Initialize
+    initIndicatorDots();
+    updateIndicator();
+
+    // Add smooth entrance animation
+    setTimeout(() => {
+        projectCards.forEach((card, index) => {
+            setTimeout(() => {
+                card.style.opacity = '1';
+            }, index * 100);
+        });
+    }, 100);
+
+    // Log initialization
+    console.log('Project card scroller initialized');
+    console.log(`Total cards: ${projectCards.length}`);
+});
diff --git a/projects-style.css b/projects-style.css
new file mode 100644
index 0000000..cd3e99f
--- /dev/null
+++ b/projects-style.css
@@ -0,0 +1,359 @@
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+}
+
+.page-container {
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+/* Header styles */
+.header {
+    text-align: center;
+    color: white;
+    margin-bottom: 50px;
+    padding: 20px;
+}
+
+.header h1 {
+    font-size: 3rem;
+    margin-bottom: 10px;
+    font-weight: 700;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.subtitle {
+    font-size: 1.2rem;
+    opacity: 0.95;
+    font-weight: 300;
+}
+
+/* Scroller container */
+.scroller-container {
+    position: relative;
+    padding: 0 60px;
+    margin-bottom: 30px;
+}
+
+/* Cards wrapper - horizontal scroll */
+.cards-wrapper {
+    display: flex;
+    gap: 30px;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    padding: 20px 10px;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+}
+
+.cards-wrapper::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+}
+
+/* Project card */
+.project-card {
+    flex: 0 0 350px;
+    background: white;
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    cursor: pointer;
+}
+
+.project-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+}
+
+/* Card image */
+.card-image {
+    position: relative;
+    width: 100%;
+    height: 220px;
+    overflow: hidden;
+}
+
+.card-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.project-card:hover .card-image img {
+    transform: scale(1.1);
+}
+
+/* Card overlay */
+.card-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(102, 126, 234, 0.9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.project-card:hover .card-overlay {
+    opacity: 1;
+}
+
+.view-btn {
+    padding: 12px 30px;
+    background: white;
+    color: #667eea;
+    border: none;
+    border-radius: 25px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.view-btn:hover {
+    transform: scale(1.05);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+/* Card content */
+.card-content {
+    padding: 25px;
+}
+
+.card-title {
+    font-size: 1.5rem;
+    color: #333;
+    margin-bottom: 12px;
+    font-weight: 600;
+}
+
+.card-description {
+    font-size: 0.95rem;
+    color: #666;
+    line-height: 1.6;
+    margin-bottom: 15px;
+}
+
+/* Tags */
+.card-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.tag {
+    padding: 6px 14px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 500;
+}
+
+/* Scroll buttons */
+.scroll-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 50px;
+    height: 50px;
+    background: white;
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+    z-index: 10;
+    color: #667eea;
+}
+
+.scroll-btn:hover {
+    background: #667eea;
+    color: white;
+    transform: translateY(-50%) scale(1.1);
+}
+
+.scroll-btn:active {
+    transform: translateY(-50%) scale(0.95);
+}
+
+.scroll-btn-left {
+    left: 0;
+}
+
+.scroll-btn-right {
+    right: 0;
+}
+
+.scroll-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.scroll-btn:disabled:hover {
+    background: white;
+    color: #667eea;
+    transform: translateY(-50%) scale(1);
+}
+
+/* Scroll indicator */
+.scroll-indicator {
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+}
+
+.indicator-dots {
+    display: flex;
+    gap: 10px;
+}
+
+.indicator-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.indicator-dot.active {
+    background: white;
+    width: 30px;
+    border-radius: 5px;
+}
+
+.indicator-dot:hover {
+    background: rgba(255, 255, 255, 0.7);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    body {
+        padding: 10px;
+    }
+
+    .header h1 {
+        font-size: 2rem;
+    }
+
+    .subtitle {
+        font-size: 1rem;
+    }
+
+    .scroller-container {
+        padding: 0 10px;
+    }
+
+    .scroll-btn {
+        display: none;
+    }
+
+    .project-card {
+        flex: 0 0 280px;
+    }
+
+    .card-image {
+        height: 180px;
+    }
+
+    .card-content {
+        padding: 20px;
+    }
+
+    .card-title {
+        font-size: 1.3rem;
+    }
+
+    .card-description {
+        font-size: 0.9rem;
+    }
+
+    /* Show overlay on mobile by default for better UX */
+    .card-overlay {
+        opacity: 0;
+    }
+}
+
+@media (max-width: 480px) {
+    .header {
+        margin-bottom: 30px;
+    }
+
+    .header h1 {
+        font-size: 1.8rem;
+    }
+
+    .subtitle {
+        font-size: 0.9rem;
+    }
+
+    .project-card {
+        flex: 0 0 260px;
+    }
+
+    .card-image {
+        height: 160px;
+    }
+
+    .card-content {
+        padding: 15px;
+    }
+
+    .card-title {
+        font-size: 1.2rem;
+    }
+
+    .card-description {
+        font-size: 0.85rem;
+    }
+
+    .tag {
+        font-size: 0.75rem;
+        padding: 5px 12px;
+    }
+}
+
+/* Smooth animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.project-card {
+    animation: fadeIn 0.5s ease forwards;
+}
+
+.project-card:nth-child(1) { animation-delay: 0.1s; }
+.project-card:nth-child(2) { animation-delay: 0.2s; }
+.project-card:nth-child(3) { animation-delay: 0.3s; }
+.project-card:nth-child(4) { animation-delay: 0.4s; }
+.project-card:nth-child(5) { animation-delay: 0.5s; }
+.project-card:nth-child(6) { animation-delay: 0.6s; }
+.project-card:nth-child(7) { animation-delay: 0.7s; }
+.project-card:nth-child(8) { animation-delay: 0.8s; }
diff --git a/projects.html b/projects.html
new file mode 100644
index 0000000..39a933d
--- /dev/null
+++ b/projects.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Our Projects - Portfolio Showcase</title>
+    <link rel="stylesheet" href="projects-style.css">
+</head>
+<body>
+    <div class="page-container">
+        <header class="header">
+            <h1>Our Projects</h1>
+            <p class="subtitle">Explore our latest work and creative solutions</p>
+        </header>
+
+        <div class="scroller-container">
+            <button class="scroll-btn scroll-btn-left" id="scrollLeft" aria-label="Scroll left">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="15 18 9 12 15 6"></polyline>
+                </svg>
+            </button>
+
+            <div class="cards-wrapper" id="cardsWrapper">
+                <div class="project-card">
+                    <div class="card-image">
+                        <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=400&fit=crop" alt="E-Commerce Platform">
+                        <div class="card-overlay">
+                            <button class="view-btn">View Project</button>
+                        </div>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">E-Commerce Platform</h3>
+                        <p class="card-description">A modern online shopping experience with seamless checkout and inventory management.</p>
+                        <div class="card-tags">
+                            <span class="tag">React</span>
+                            <span class="tag">Node.js</span>
+                            <span class="tag">MongoDB</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="project-card">
+                    <div class="card-image">
+                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop" alt="Analytics Dashboard">
+                        <div class="card-overlay">
+                            <button class="view-btn">View Project</button>
+                        </div>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">Analytics Dashboard</h3>
+                        <p class="card-description">Real-time data visualization and insights for business intelligence and decision making.</p>
+                        <div class="card-tags">
+                            <span class="tag">Vue.js</span>
+                            <span class="tag">D3.js</span>
+                            <span class="tag">Python</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="project-card">
+                    <div class="card-image">
+                        <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop" alt="Mobile Banking App">
+                        <div class="card-overlay">
+                            <button class="view-btn">View Project</button>
+                        </div>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">Mobile Banking App</h3>
+                        <p class="card-description">Secure and intuitive mobile banking solution with biometric authentication.</p>
+                        <div class="card-tags">
+                            <span class="tag">React Native</span>
+                            <span class="tag">Firebase</span>
+                            <span class="tag">TypeScript</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="project-card">
+                    <div class="card-image">
+                        <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&h=400&fit=crop" alt="Task Management System">
+                        <div class="card-overlay">
+                            <button class="view-btn">View Project</button>
+                        </div>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">Task Management System</h3>
+                        <p class="card-description">Collaborative project management tool with real-time updates and team coordination.</p>
+                        <div class="card-tags">
+                            <span class="tag">Angular</span>
+                            <span class="tag">Express</span>
+                            <span class="tag">PostgreSQL</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="project-card">
+                    <div class="card-image">
+                        <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=600&h=400&fit=crop" alt="Social Media Platform">
+                        <div class="card-overlay">
+                            <button class="view-btn">View Project</button>
+                        </div>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">Social Media Platform</h3>
+                        <p class="card-description">Connect and share with friends through posts, stories, and real-time messaging.</p>
+                        <div class="card-tags">
+                            <span class="tag">Next.js</span>
+                            <span class="tag">GraphQL</span>
+                            <span class="tag">Redis</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="project-card">
+                    <div class="card-image">
+                        <img src="https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?w=600&h=400&fit=crop" alt="Fitness Tracking App">
+                        <div class="card-overlay">
+                            <button class="view-btn">View Project</button>
+                        </div>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">Fitness Tracking App</h3>
+                        <p class="card-description">Track workouts, nutrition, and health metrics with personalized fitness plans.</p>
+                        <div class="card-tags">
+                            <span class="tag">Flutter</span>
+                            <span class="tag">Django</span>
+                            <span class="tag">ML</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="project-card">
+                    <div class="card-image">
+                        <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=600&h=400&fit=crop" alt="CRM Solution">
+                        <div class="card-overlay">
+                            <button class="view-btn">View Project</button>
+                        </div>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">CRM Solution</h3>
+                        <p class="card-description">Customer relationship management system with sales pipeline and automation tools.</p>
+                        <div class="card-tags">
+                            <span class="tag">Svelte</span>
+                            <span class="tag">FastAPI</span>
+                            <span class="tag">MySQL</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="project-card">
+                    <div class="card-image">
+                        <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&h=400&fit=crop" alt="Learning Management System">
+                        <div class="card-overlay">
+                            <button class="view-btn">View Project</button>
+                        </div>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">Learning Management System</h3>
+                        <p class="card-description">Online education platform with courses, quizzes, and progress tracking features.</p>
+                        <div class="card-tags">
+                            <span class="tag">React</span>
+                            <span class="tag">Laravel</span>
+                            <span class="tag">AWS</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <button class="scroll-btn scroll-btn-right" id="scrollRight" aria-label="Scroll right">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="9 18 15 12 9 6"></polyline>
+                </svg>
+            </button>
+        </div>
+
+        <div class="scroll-indicator">
+            <div class="indicator-dots" id="indicatorDots"></div>
+        </div>
+    </div>
+
+    <script src="projects-script.js"></script>
+</body>
+</html>
diff --git a/random_contacts_table.html b/random_contacts_table.html
new file mode 100644
index 0000000..6551543
--- /dev/null
+++ b/random_contacts_table.html
@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random Contacts Directory</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+        }
+
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            font-weight: 300;
+        }
+
+        .header p {
+            font-size: 1.1em;
+            opacity: 0.9;
+        }
+
+        .table-container {
+            padding: 0;
+            overflow-x: auto;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 16px;
+        }
+
+        thead {
+            background: #f8f9fa;
+        }
+
+        th {
+            padding: 20px;
+            text-align: left;
+            font-weight: 600;
+            color: #495057;
+            border-bottom: 3px solid #dee2e6;
+            position: sticky;
+            top: 0;
+            background: #f8f9fa;
+        }
+
+        td {
+            padding: 15px 20px;
+            border-bottom: 1px solid #dee2e6;
+            color: #495057;
+        }
+
+        tbody tr {
+            transition: background-color 0.2s ease;
+        }
+
+        tbody tr:hover {
+            background-color: #f8f9fa;
+        }
+
+        tbody tr:nth-child(even) {
+            background-color: #fdfdfd;
+        }
+
+        .name {
+            font-weight: 500;
+            color: #495057;
+        }
+
+        .phone {
+            font-family: 'Courier New', monospace;
+            color: #6c757d;
+            font-weight: 500;
+        }
+
+        .index {
+            font-weight: 600;
+            color: #6c757d;
+            text-align: center;
+            width: 60px;
+        }
+
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 2em;
+            }
+            
+            th, td {
+                padding: 12px 15px;
+                font-size: 14px;
+            }
+            
+            .header {
+                padding: 20px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            body {
+                padding: 10px;
+            }
+            
+            .header h1 {
+                font-size: 1.8em;
+            }
+            
+            th, td {
+                padding: 10px 8px;
+                font-size: 13px;
+            }
+            
+            .table-container {
+                font-size: 12px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>📞 Random Contacts Directory</h1>
+            <p>A collection of randomly generated contact information</p>
+        </div>
+        <div class="table-container">
+            <table>
+                <thead>
+                    <tr>
+                        <th class="index">#</th>
+                        <th>Full Name</th>
+                        <th>Phone Number</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td class="index">1</td>
+                        <td class="name">Sarah Johnson</td>
+                        <td class="phone">(555) 123-4567</td>
+                    </tr>
+                    <tr>
+                        <td class="index">2</td>
+                        <td class="name">Michael Chen</td>
+                        <td class="phone">(555) 987-6543</td>
+                    </tr>
+                    <tr>
+                        <td class="index">3</td>
+                        <td class="name">Emily Rodriguez</td>
+                        <td class="phone">(555) 246-8135</td>
+                    </tr>
+                    <tr>
+                        <td class="index">4</td>
+                        <td class="name">David Thompson</td>
+                        <td class="phone">(555) 369-2580</td>
+                    </tr>
+                    <tr>
+                        <td class="index">5</td>
+                        <td class="name">Jessica Williams</td>
+                        <td class="phone">(555) 741-9630</td>
+                    </tr>
+                    <tr>
+                        <td class="index">6</td>
+                        <td class="name">James Anderson</td>
+                        <td class="phone">(555) 852-7419</td>
+                    </tr>
+                    <tr>
+                        <td class="index">7</td>
+                        <td class="name">Ashley Martinez</td>
+                        <td class="phone">(555) 963-1470</td>
+                    </tr>
+                    <tr>
+                        <td class="index">8</td>
+                        <td class="name">Robert Davis</td>
+                        <td class="phone">(555) 159-3570</td>
+                    </tr>
+                    <tr>
+                        <td class="index">9</td>
+                        <td class="name">Amanda Wilson</td>
+                        <td class="phone">(555) 753-9514</td>
+                    </tr>
+                    <tr>
+                        <td class="index">10</td>
+                        <td class="name">Christopher Brown</td>
+                        <td class="phone">(555) 486-2759</td>
+                    </tr>
+                    <tr>
+                        <td class="index">11</td>
+                        <td class="name">Jennifer Garcia</td>
+                        <td class="phone">(555) 317-6842</td>
+                    </tr>
+                    <tr>
+                        <td class="index">12</td>
+                        <td class="name">Matthew Miller</td>
+                        <td class="phone">(555) 928-4613</td>
+                    </tr>
+                    <tr>
+                        <td class="index">13</td>
+                        <td class="name">Samantha Lee</td>
+                        <td class="phone">(555) 604-7251</td>
+                    </tr>
+                    <tr>
+                        <td class="index">14</td>
+                        <td class="name">Daniel Taylor</td>
+                        <td class="phone">(555) 815-3962</td>
+                    </tr>
+                    <tr>
+                        <td class="index">15</td>
+                        <td class="name">Lauren Moore</td>
+                        <td class="phone">(555) 492-6078</td>
+                    </tr>
+                    <tr>
+                        <td class="index">16</td>
+                        <td class="name">Andrew Jackson</td>
+                        <td class="phone">(555) 537-1849</td>
+                    </tr>
+                    <tr>
+                        <td class="index">17</td>
+                        <td class="name">Megan White</td>
+                        <td class="phone">(555) 263-8450</td>
+                    </tr>
+                    <tr>
+                        <td class="index">18</td>
+                        <td class="name">Kevin Harris</td>
+                        <td class="phone">(555) 680-2174</td>
+                    </tr>
+                    <tr>
+                        <td class="index">19</td>
+                        <td class="name">Nicole Thomas</td>
+                        <td class="phone">(555) 394-7562</td>
+                    </tr>
+                    <tr>
+                        <td class="index">20</td>
+                        <td class="name">Brandon Clark</td>
+                        <td class="phone">(555) 751-4829</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/reactive-forms/src/app/app.component.html b/reactive-forms/src/app/app.component.html
index bb3d76b..34f2e06 100644
--- a/reactive-forms/src/app/app.component.html
+++ b/reactive-forms/src/app/app.component.html
@@ -1,4 +1,5 @@
 <div class="container-fluid">
+  <!-- Original Registration Form -->
   <h2>Registration Form</h2>
 
   <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
@@ -68,3 +69,7 @@ <h2>Registration Form</h2>
   {{registrationForm.status | json}}
   {{registrationForm.value | json}}
 </div>
+
+<!-- New User Form Component -->
+<hr style="margin: 40px 0; border: 2px solid #ddd;">
+<app-user-form></app-user-form>
diff --git a/reactive-forms/src/app/app.module.ts b/reactive-forms/src/app/app.module.ts
index b34cdfa..bd1c38c 100644
--- a/reactive-forms/src/app/app.module.ts
+++ b/reactive-forms/src/app/app.module.ts
@@ -3,10 +3,12 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
+import { UserFormComponent } from './user-form.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    UserFormComponent
   ],
   imports: [
     BrowserModule,
diff --git a/reactive-forms/src/app/user-form.component.css b/reactive-forms/src/app/user-form.component.css
new file mode 100644
index 0000000..9167015
--- /dev/null
+++ b/reactive-forms/src/app/user-form.component.css
@@ -0,0 +1,253 @@
+/* Form Container */
+.form-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.form-card {
+  background: white;
+  padding: 40px;
+  border-radius: 15px;
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 500px;
+  transition: transform 0.2s ease;
+}
+
+.form-card:hover {
+  transform: translateY(-2px);
+}
+
+/* Form Title */
+.form-title {
+  color: #333;
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.form-subtitle {
+  color: #666;
+  font-size: 16px;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+/* Form Groups */
+.form-group {
+  margin-bottom: 25px;
+}
+
+.form-label {
+  display: block;
+  color: #333;
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.required {
+  color: #e74c3c;
+  font-weight: bold;
+}
+
+/* Form Inputs */
+.form-input {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 16px;
+  border: 2px solid #e1e5e9;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  background-color: #fafbfc;
+  box-sizing: border-box;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #667eea;
+  background-color: white;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-input:hover:not(:focus) {
+  border-color: #c5c9d0;
+}
+
+.form-input.error {
+  border-color: #e74c3c;
+  background-color: #fdf2f2;
+}
+
+.form-input.error:focus {
+  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
+}
+
+/* Error Messages */
+.error-message {
+  color: #e74c3c;
+  font-size: 14px;
+  margin-top: 5px;
+  display: flex;
+  align-items: center;
+  animation: slideDown 0.3s ease;
+}
+
+.error-message:before {
+  content: "⚠️";
+  margin-right: 5px;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Form Actions */
+.form-actions {
+  display: flex;
+  gap: 15px;
+  margin-top: 30px;
+  justify-content: space-between;
+}
+
+.btn {
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  flex: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.btn-primary {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: linear-gradient(45deg, #5a6fd8, #6a4190);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+}
+
+.btn-secondary {
+  background: #f8f9fa;
+  color: #6c757d;
+  border: 2px solid #e9ecef;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: #e9ecef;
+  color: #495057;
+  transform: translateY(-1px);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+/* Form Status */
+.form-status {
+  margin-top: 20px;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border-left: 4px solid #6c757d;
+}
+
+.status-item {
+  margin-bottom: 10px;
+}
+
+.status-item:last-child {
+  margin-bottom: 0;
+}
+
+.valid {
+  color: #28a745;
+  font-weight: bold;
+}
+
+.invalid {
+  color: #e74c3c;
+  font-weight: bold;
+}
+
+.error-list {
+  margin: 5px 0 0 20px;
+  color: #e74c3c;
+}
+
+.error-list li {
+  margin-bottom: 3px;
+}
+
+/* Responsive Design */
+@media (max-width: 600px) {
+  .form-container {
+    padding: 15px;
+  }
+  
+  .form-card {
+    padding: 30px 20px;
+  }
+  
+  .form-title {
+    font-size: 24px;
+  }
+  
+  .form-actions {
+    flex-direction: column;
+  }
+  
+  .btn {
+    width: 100%;
+  }
+}
+
+/* Loading State */
+.loading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+/* Success Animation */
+@keyframes success {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.form-card.success {
+  animation: success 0.6s ease;
+  border: 2px solid #28a745;
+}
diff --git a/reactive-forms/src/app/user-form.component.html b/reactive-forms/src/app/user-form.component.html
new file mode 100644
index 0000000..9d12101
--- /dev/null
+++ b/reactive-forms/src/app/user-form.component.html
@@ -0,0 +1,86 @@
+<div class="form-container">
+  <div class="form-card">
+    <h2 class="form-title">User Information Form</h2>
+    <p class="form-subtitle">Please fill in your details below</p>
+    
+    <form [formGroup]="userForm" (ngSubmit)="onSubmit()" novalidate>
+      
+      <!-- Name Field -->
+      <div class="form-group">
+        <label for="name" class="form-label">
+          Full Name <span class="required">*</span>
+        </label>
+        <input
+          type="text"
+          id="name"
+          formControlName="name"
+          class="form-input"
+          [class.error]="hasError('name', 'required') || hasError('name', 'minlength') || hasError('name', 'maxlength') || hasError('name', 'pattern')"
+          placeholder="Enter your full name"
+          autocomplete="name"
+        />
+        <div class="error-message" *ngIf="getErrorMessage('name')">
+          {{ getErrorMessage('name') }}
+        </div>
+      </div>
+
+      <!-- Email Field -->
+      <div class="form-group">
+        <label for="email" class="form-label">
+          Email Address <span class="required">*</span>
+        </label>
+        <input
+          type="email"
+          id="email"
+          formControlName="email"
+          class="form-input"
+          [class.error]="hasError('email', 'required') || hasError('email', 'email') || hasError('email', 'maxlength')"
+          placeholder="Enter your email address"
+          autocomplete="email"
+        />
+        <div class="error-message" *ngIf="getErrorMessage('email')">
+          {{ getErrorMessage('email') }}
+        </div>
+      </div>
+
+      <!-- Form Actions -->
+      <div class="form-actions">
+        <button
+          type="button"
+          class="btn btn-secondary"
+          (click)="resetForm()"
+          [disabled]="!userForm.dirty"
+        >
+          Reset
+        </button>
+        <button
+          type="submit"
+          class="btn btn-primary"
+          [disabled]="userForm.invalid && isSubmitted"
+        >
+          Submit
+        </button>
+      </div>
+
+      <!-- Form Status Display (for development/debugging) -->
+      <div class="form-status" *ngIf="isSubmitted">
+        <div class="status-item">
+          <strong>Form Status:</strong>
+          <span [class.valid]="userForm.valid" [class.invalid]="!userForm.valid">
+            {{ userForm.valid ? 'Valid' : 'Invalid' }}
+          </span>
+        </div>
+        <div class="status-item" *ngIf="!userForm.valid">
+          <strong>Errors:</strong>
+          <ul class="error-list">
+            <li *ngIf="hasError('name', 'required')">Name is required</li>
+            <li *ngIf="hasError('name', 'minlength')">Name is too short</li>
+            <li *ngIf="hasError('name', 'pattern')">Name contains invalid characters</li>
+            <li *ngIf="hasError('email', 'required')">Email is required</li>
+            <li *ngIf="hasError('email', 'email')">Email format is invalid</li>
+          </ul>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
diff --git a/reactive-forms/src/app/user-form.component.ts b/reactive-forms/src/app/user-form.component.ts
new file mode 100644
index 0000000..000be85
--- /dev/null
+++ b/reactive-forms/src/app/user-form.component.ts
@@ -0,0 +1,111 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-user-form',
+  templateUrl: './user-form.component.html',
+  styleUrls: ['./user-form.component.css']
+})
+export class UserFormComponent implements OnInit {
+  userForm: FormGroup;
+  isSubmitted = false;
+
+  constructor(private formBuilder: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.initializeForm();
+  }
+
+  initializeForm(): void {
+    this.userForm = this.formBuilder.group({
+      name: ['', [
+        Validators.required,
+        Validators.minLength(2),
+        Validators.maxLength(50),
+        Validators.pattern(/^[a-zA-Z\s]*$/)
+      ]],
+      email: ['', [
+        Validators.required,
+        Validators.email,
+        Validators.maxLength(100)
+      ]]
+    });
+  }
+
+  // Getter methods for easy access to form fields
+  get name() {
+    return this.userForm.get('name');
+  }
+
+  get email() {
+    return this.userForm.get('email');
+  }
+
+  onSubmit(): void {
+    this.isSubmitted = true;
+
+    if (this.userForm.valid) {
+      const formData = this.userForm.value;
+      console.log('Form Data:', formData);
+      
+      // Here you would typically send the data to a service
+      alert(`Form submitted successfully!\nName: ${formData.name}\nEmail: ${formData.email}`);
+      
+      // Reset form after successful submission
+      this.resetForm();
+    } else {
+      console.log('Form is invalid');
+      this.markFormGroupTouched();
+    }
+  }
+
+  resetForm(): void {
+    this.userForm.reset();
+    this.isSubmitted = false;
+  }
+
+  private markFormGroupTouched(): void {
+    Object.keys(this.userForm.controls).forEach(key => {
+      const control = this.userForm.get(key);
+      control?.markAsTouched();
+    });
+  }
+
+  // Helper method to check if field has error
+  hasError(fieldName: string, errorType: string): boolean {
+    const field = this.userForm.get(fieldName);
+    return field ? field.hasError(errorType) && (field.dirty || field.touched || this.isSubmitted) : false;
+  }
+
+  // Helper method to get error message
+  getErrorMessage(fieldName: string): string {
+    const field = this.userForm.get(fieldName);
+    if (!field || !field.errors || (!field.touched && !this.isSubmitted)) {
+      return '';
+    }
+
+    const errors = field.errors;
+    
+    if (errors['required']) {
+      return `${this.capitalizeFirst(fieldName)} is required`;
+    }
+    if (errors['email']) {
+      return 'Please enter a valid email address';
+    }
+    if (errors['minlength']) {
+      return `${this.capitalizeFirst(fieldName)} must be at least ${errors['minlength'].requiredLength} characters`;
+    }
+    if (errors['maxlength']) {
+      return `${this.capitalizeFirst(fieldName)} cannot exceed ${errors['maxlength'].requiredLength} characters`;
+    }
+    if (errors['pattern']) {
+      return `${this.capitalizeFirst(fieldName)} can only contain letters and spaces`;
+    }
+
+    return 'Invalid input';
+  }
+
+  private capitalizeFirst(str: string): string {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+}
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..0ecea4c
--- /dev/null
+++ b/script.js
@@ -0,0 +1,64 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const form = document.getElementById('radioForm');
+    const result = document.getElementById('result');
+    
+    // Handle form submission
+    form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        // Get the selected radio button value
+        const selectedOption = document.querySelector('input[name="answer"]:checked');
+        
+        if (selectedOption) {
+            const answer = selectedOption.value;
+            showResult(answer);
+        } else {
+            showError('Please select an option before submitting.');
+        }
+    });
+    
+    // Add click animation to radio options
+    const radioOptions = document.querySelectorAll('.radio-option');
+    radioOptions.forEach(option => {
+        option.addEventListener('click', function() {
+            const radio = this.querySelector('input[type="radio"]');
+            radio.checked = true;
+            
+            // Add visual feedback
+            this.style.transform = 'scale(0.98)';
+            setTimeout(() => {
+                this.style.transform = 'scale(1)';
+            }, 150);
+        });
+    });
+    
+    function showResult(answer) {
+        result.className = 'result success';
+        result.innerHTML = `
+            <strong>Thank you for your response!</strong><br>
+            You selected: <em>${answer.charAt(0).toUpperCase() + answer.slice(1)}</em>
+        `;
+        result.style.display = 'block';
+        
+        // Scroll to result
+        result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+    
+    function showError(message) {
+        result.className = 'result error';
+        result.textContent = message;
+        result.style.display = 'block';
+        
+        // Hide error after 3 seconds
+        setTimeout(() => {
+            result.style.display = 'none';
+        }, 3000);
+    }
+    
+    // Add keyboard navigation support
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter' && document.activeElement.type === 'radio') {
+            form.dispatchEvent(new Event('submit'));
+        }
+    });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d47cef2
--- /dev/null
+++ b/style.css
@@ -0,0 +1,167 @@
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    background: white;
+    padding: 40px;
+    border-radius: 15px;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+    max-width: 500px;
+    width: 90%;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 30px;
+    font-size: 2rem;
+}
+
+.question h2 {
+    color: #555;
+    margin-bottom: 20px;
+    font-size: 1.3rem;
+    font-weight: 500;
+}
+
+.radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-bottom: 30px;
+}
+
+.radio-option {
+    display: flex;
+    align-items: center;
+    padding: 15px 20px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.radio-option:hover {
+    border-color: #667eea;
+    background-color: #f8f9ff;
+}
+
+.radio-option input[type="radio"] {
+    margin-right: 15px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+
+.radio-option label {
+    font-size: 1.1rem;
+    color: #333;
+    cursor: pointer;
+    flex: 1;
+}
+
+/* Custom radio button styling */
+input[type="radio"] {
+    appearance: none;
+    border: 2px solid #ddd;
+    border-radius: 50%;
+    position: relative;
+}
+
+input[type="radio"]:checked {
+    border-color: #667eea;
+}
+
+input[type="radio"]:checked::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 10px;
+    height: 10px;
+    background-color: #667eea;
+    border-radius: 50%;
+}
+
+.radio-option:has(input[type="radio"]:checked) {
+    border-color: #667eea;
+    background-color: #f8f9ff;
+}
+
+.submit-btn {
+    width: 100%;
+    padding: 15px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.submit-btn:hover {
+    transform: translateY(-2px);
+}
+
+.submit-btn:active {
+    transform: translateY(0);
+}
+
+.result {
+    margin-top: 20px;
+    padding: 15px;
+    border-radius: 8px;
+    font-weight: 600;
+    text-align: center;
+    display: none;
+}
+
+.result.success {
+    background-color: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+    display: block;
+}
+
+.result.error {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+    display: block;
+}
+
+/* Responsive design */
+@media (max-width: 480px) {
+    .container {
+        padding: 25px;
+        margin: 20px;
+    }
+    
+    h1 {
+        font-size: 1.5rem;
+    }
+    
+    .question h2 {
+        font-size: 1.1rem;
+    }
+    
+    .radio-option {
+        padding: 12px 15px;
+    }
+}
diff --git a/test-form.html b/test-form.html
new file mode 100644
index 0000000..b32c244
--- /dev/null
+++ b/test-form.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Form Test</title>
+</head>
+<body>
+    <h1>Testing Form Components</h1>
+    
+    <h2>Test Results:</h2>
+    <ul id="testResults"></ul>
+    
+    <script>
+        // Simple test suite for form validation
+        const tests = [];
+        
+        // Test name validation
+        function testNameValidation() {
+            const validateName = (name) => /^[a-zA-Z\s]{2,50}$/.test(name.trim());
+            
+            return {
+                'Valid name "John Doe"': validateName('John Doe'),
+                'Valid single name "John"': validateName('John'),
+                'Invalid empty name': !validateName(''),
+                'Invalid single character': !validateName('J'),
+                'Invalid name with numbers': !validateName('John123'),
+                'Invalid name too long': !validateName('A'.repeat(51))
+            };
+        }
+        
+        // Test mobile validation
+        function testMobileValidation() {
+            const validateMobile = (mobile) => /^[\+]?[0-9]{10,15}$/.test(mobile.replace(/\s/g, ''));
+            
+            return {
+                'Valid 10-digit number': validateMobile('1234567890'),
+                'Valid international number': validateMobile('+1234567890'),
+                'Valid 15-digit number': validateMobile('123456789012345'),
+                'Invalid short number': !validateMobile('123456789'),
+                'Invalid long number': !validateMobile('1234567890123456'),
+                'Invalid with letters': !validateMobile('12345abcde'),
+                'Valid with spaces (should work)': validateMobile('123 456 7890')
+            };
+        }
+        
+        // Run tests
+        function runTests() {
+            const results = document.getElementById('testResults');
+            const allTests = {
+                ...testNameValidation(),
+                ...testMobileValidation()
+            };
+            
+            let passedCount = 0;
+            let totalCount = Object.keys(allTests).length;
+            
+            for (const [testName, result] of Object.entries(allTests)) {
+                const li = document.createElement('li');
+                li.innerHTML = `<strong>${testName}:</strong> ${result ? '✅ PASS' : '❌ FAIL'}`;
+                li.style.color = result ? 'green' : 'red';
+                results.appendChild(li);
+                
+                if (result) passedCount++;
+            }
+            
+            const summary = document.createElement('li');
+            summary.innerHTML = `<strong>Summary: ${passedCount}/${totalCount} tests passed</strong>`;
+            summary.style.fontWeight = 'bold';
+            summary.style.marginTop = '20px';
+            summary.style.padding = '10px';
+            summary.style.backgroundColor = passedCount === totalCount ? '#d4edda' : '#f8d7da';
+            results.appendChild(summary);
+        }
+        
+        // Run tests when page loads
+        document.addEventListener('DOMContentLoaded', runTests);
+    </script>
+</body>
+</html>
diff --git a/videos/browser_session_1762783538908.webm b/videos/browser_session_1762783538908.webm
new file mode 100644
index 0000000..a4463e2
Binary files /dev/null and b/videos/browser_session_1762783538908.webm differ