Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 4.18.0-553.40.1.lve.el8.x86_64

PHP Version:

8.2.27

User:

u205613439

Directory:

/home/u205613439/domains/projectsunleashed.com/public_html

Free Space:

3.03 TB

🔧 Quick Actions

✏️ Editing: residential.php

<?php include 'include/header.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SShomes - Luxury Residential Interiors</title>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            
        }
        
        body {
            color: #333;
            background-color: #faf7f5;
            line-height: 1.6;
        }
        
        .container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Typography */
        h1, h2, h3, h4 {
            font-family: Caramella, Regular;
            font-weight: 600;
        }
        
        .section-title {
            font-size: 42px;
            color: #333;
            margin-bottom: 30px;
            text-align: center;
            position: relative;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 2px;
            background-color: #A67B5B;
        }
        
        p {
            margin-bottom: 15px;
        }
        
        /* Buttons */
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: #A67B5B;
            color: white;
            text-decoration: none;
            border-radius: 0;
            font-weight: 500;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            border: 2px solid #A67B5B;
            text-transform: uppercase;
            font-size: 14px;
        }
        
        .btn:hover {
            background-color: transparent;
            color: #A67B5B;
        }
        
        .btn-outline {
            background-color: transparent;
            color: #A67B5B;
        }
        
        .btn-outline:hover {
            background-color: #A67B5B;
            color: white;
        }
        
        /* Hero Section */
        .hero {
            position: relative;
            height: 100vh;
            background: url('img/residentialbg.png') center/cover no-repeat;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
        
        .hero::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
        }
        
        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 600px;
            margin-left: 10%;
            color: white;
            animation: fadeIn 1.5s ease-in-out;
        }
        
        .hero-content h1 {
            font-size: 60px;
            line-height: 1.2;
            margin-bottom: 20px;
            color: #F3EEE8;
        }
        
        .hero-content p {
            font-size: 18px;
            margin-bottom: 30px;
            color: #F3EEE8;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* About Section */
        .about-section {
            padding: 100px 0;
            background-color: #F3EEE8;
        }
        
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }
        
        .about-image {
            position: relative;
            height: 500px;
        }
        
        .about-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .about-image::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            width: 100%;
            height: 100%;
            border: 2px solid #A67B5B;
            z-index: -1;
        }
        
        .about-content h2 {
            margin-bottom: 30px;
            font-size: 36px;
        }
        
        .about-content p {
            margin-bottom: 20px;
            color: #555;
        }
        
        /* Services Section */
        .services-section {
            padding: 100px 0;
            background-color: white;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }
        
        .service-card {
            background-color: #F3EEE8;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .service-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            margin-bottom: 20px;
        }
        
        .service-card h3 {
            margin-bottom: 15px;
            font-size: 22px;
            color: #333;
        }
        
        .service-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 3px;
            background-color: #A67B5B;
            transition: width 0.3s ease;
        }
        
        .service-card:hover::after {
            width: 100%;
        }
        
        /* Projects Section */
        .projects-section {
            padding: 100px 0;
            background-color: #faf7f5;
        }
        
        .projects-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }
        
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        
        .project-card {
            position: relative;
            height: 350px;
            overflow: hidden;
            cursor: pointer;
        }
        
        .project-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .project-card:hover img {
            transform: scale(1.1);
        }
        
        .project-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(166, 123, 91, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .project-card:hover .project-overlay {
            opacity: 1;
        }
        
        .project-overlay h3 {
            color: white;
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .project-overlay p {
            color: white;
            font-size: 16px;
        }
        
        .view-all-btn {
            margin-top: 40px;
            text-align: center;
        }
        
        /* Stats Section */
        .stats-section {
            padding: 80px 0;
            background-color: #A67B5B;
            color: white;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            text-align: center;
        }
        
        .stat-item {
            position: relative;
        }
        
        .stat-item::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            height: 60%;
            width: 1px;
            background-color: rgba(255, 255, 255, 0.3);
        }
        
        .stat-item:last-child::after {
            display: none;
        }
        
        .stat-number {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 10px;
            font-family: 'Playfair Display', serif;
        }
        
        .stat-label {
            font-size: 18px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Testimonials Section */
        .testimonials-section {
            padding: 100px 0;
            background-color: white;
        }
        
        .testimonials-slider {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .testimonial-item {
            text-align: center;
            padding: 0 40px;
        }
        
        .testimonial-text {
            font-size: 18px;
            font-style: italic;
            margin-bottom: 20px;
            position: relative;
            padding: 30px;
            background-color: #F3EEE8;
            border-radius: 5px;
        }
        
        .testimonial-text::before {
            content: '"';
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 60px;
            color: #A67B5B;
            opacity: 0.3;
            font-family: 'Playfair Display', serif;
        }
        
        .testimonial-author {
            font-weight: 600;
            color: #A67B5B;
            font-size: 18px;
        }
        
        /* Core Values Section */
        .core-values-section {
            padding: 100px 0;
            background: url('img/project_banner8.png') center/cover no-repeat;
            position: relative;
        }
        
        .core-values-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
        }
        
        .core-values-content {
            position: relative;
            z-index: 1;
            max-width: 600px;
            margin-left: auto;
            padding: 60px;
            background-color: rgba(255, 255, 255, 0.9);
        }
        
        .core-values-content h2 {
            margin-bottom: 30px;
            color: #333;
        }
        
        .core-values-content p {
            color: #555;
            margin-bottom: 20px;
        }
        
        /* Why Us Section */
        .why-us-section {
            padding: 100px 0;
            background-color: #F3EEE8;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        
        .feature-item {
            background-color: white;
            padding: 40px 30px;
            text-align: center;
            border-radius: 5px;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }
        
        .feature-item:hover {
            transform: translateY(-10px);
            border-color: #A67B5B;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            font-size: 40px;
            color: #A67B5B;
            margin-bottom: 20px;
        }
        
        .feature-title {
            font-size: 20px;
            margin-bottom: 15px;
            color: #333;
        }
        
        .feature-desc {
            color: #666;
        }
        
        /* CTA Section */
        .cta-section {
            padding: 80px 0;
            background-color: #A67B5B;
            text-align: center;
            color: white;
        }
        
        .cta-content {
            max-width: 700px;
            margin: 0 auto;
        }
        
        .cta-content h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }
        
        .cta-content p {
            margin-bottom: 30px;
            font-size: 18px;
        }
        
        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .btn-white {
            background-color: white;
            color: #A67B5B;
            border-color: white;
        }
        
        .btn-white:hover {
            background-color: transparent;
            color: white;
        }
        
        /* Responsive Design */
        @media (max-width: 1200px) {
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .projects-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 992px) {
            .section-title {
                font-size: 36px;
            }
            
            .hero-content h1 {
                font-size: 48px;
            }
            
            .about-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            
            .about-image {
                height: 400px;
            }
            
            .stats-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .hero {
                height: 80vh;
            }
            
            .hero-content {
                margin-left: 5%;
                max-width: 90%;
            }
            
            .hero-content h1 {
                font-size: 36px;
            }
            
            .services-grid {
                grid-template-columns: 1fr;
            }
            
            .projects-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            
            .stat-item::after {
                display: none;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }
            
            .core-values-content {
                max-width: 100%;
                margin: 0 auto;
                padding: 40px 20px;
            }
            
            .cta-buttons {
                flex-direction: column;
                gap: 15px;
            }
        }
        
        @media (max-width: 480px) {
            .section-title {
                font-size: 28px;
            }
            
            .hero-content h1 {
                font-size: 28px;
            }
            
            .hero-content p {
                font-size: 16px;
            }
            
            .btn {
                padding: 10px 20px;
                font-size: 12px;
            }
            
            .testimonial-text {
                padding: 20px;
                font-size: 16px;
            }
        }

/*  */
        .parallax-section {
      background-attachment: fixed;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
      text-align: center;
      padding: 60px 20px;
    }

/* Specific Backgrounds for Parallax */
    .hero-banner {
      background-image: url('img/residentialbg.png');
    }

.why-us-section {
      background-image: url('assets/img/about_banner4.png');
    }

.architecture-design {
      background-image: url('images/architecture.jpg');
    }

@media (max-width: 768px) {
      .parallax-section {
        background-attachment: scroll;
      }
    }
    </style>
</head>
<body>
    
    <section class="hero parallax-section">
        <div class="hero-content">
            <h1>Designing Dream Residential Havens
</h1>
            <p>Turn your home into a haven of style and serenity with our custom-tailored interior design expertise.
</p>
            <div class="hero-buttons">
                <a href="#projects" class="btn">View Projects</a>
                <a href="#contact" class="btn btn-outline">Contact Us</a>
            </div>
        </div>
    </section>
    
    
    <section class="about-section" id="about">
        <div class="container">
            <div class="about-grid">
                <div class="about-image">
                    <img src="img/aboutimages(2).png" alt="Luxury Interior Design">
                </div>
                <div class="about-content">
                    <h2 class="section-title" style="text-align: left;">Timeless Residential Design
</h2>
                    <p>At SS Homes, we create residential interiors that transcend trends and stand the test of time. Our designs blend classic elegance with modern functionality, ensuring your home remains both beautiful and practical for years to come. Every space is thoughtfully crafted to reflect your unique lifestyle, creating a warm, inviting atmosphere that feels truly yours.
</p>
                    <p>With over a decade of experience in luxury residential interior design, we have established ourselves as a trusted name in creating timeless, elegant, and personalized living spaces.</p>
                   
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="services-section" id="services">
        <div class="container">
            <h2 class="section-title">What We Do</h2>
            <div class="services-grid">
                <div class="service-card">
                    <img src="img/Luxury.png" alt="Luxury Interiors">
                    <h3>Luxury Interiors</h3>
                    <p>Elevate your living experience with our premium interior design solutions tailored to your unique style and preferences.</p>
                </div>
                <div class="service-card">
                    <img src="img/Bespoke.png" alt="Bespoke Furniture">
                    <h3>Bespoke Furniture</h3>
                    <p>Custom-designed furniture pieces that perfectly complement your space and reflect your personal taste.</p>
                </div>
                <div class="service-card">
                    <img src="img/Turnkey.png" alt="Turnkey Projects">
                    <h3>Turnkey Projects</h3>
                    <p>Comprehensive end-to-end solutions from concept development to final execution, ensuring a hassle-free experience.</p>
                </div>
                <div class="service-card">
                    <img src="img/Architecture.png" alt="Architecture with Design Consultancy">
                    <h3>Architecture & Design</h3>
                    <p>Integrated architectural and design consultancy services to create cohesive and harmonious living environments.</p>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="projects-section" id="projects">
        <div class="container">
            <div class="projects-header">
                <h2 class="section-title">Our Projects</h2>
            </div>
            <div class="projects-grid">
                <div class="project-card">
                    <img src="img/1p.png" alt="Luxury Balcony Design">
                    <div class="project-overlay">
                        <h3>Luxury Balcony</h3>
                        <p>Gurugram, Haryana</p>
                    </div>
                </div>
                <div class="project-card">
                    <img src="img/2p.png" alt="Modern Kitchen">
                    <div class="project-overlay">
                        <h3>Modern Kitchen</h3>
                        <p>Delhi NCR</p>
                    </div>
                </div>
                <div class="project-card">
                    <img src="img/3p.png" alt="Elegant Bedroom">
                    <div class="project-overlay">
                        <h3>Elegant Bedroom</h3>
                        <p>Noida, UP</p>
                    </div>
                </div>
                <div class="project-card">
                    <img src="img/4p.png" alt="Contemporary Living Room">
                    <div class="project-overlay">
                        <h3>Contemporary Living</h3>
                        <p>Mumbai, Maharashtra</p>
                    </div>
                </div>
                <div class="project-card">
                    <img src="img/5p.png" alt="Luxury Bathroom">
                    <div class="project-overlay">
                        <h3>Luxury Bathroom</h3>
                        <p>Chandigarh</p>
                    </div>
                </div>
                <div class="project-card">
                    <img src="img/6p.png" alt="Modern Office">
                    <div class="project-overlay">
                        <h3>Modern Office</h3>
                        <p>Bangalore, Karnataka</p>
                    </div>
                </div>
            </div>
            <div class="view-all-btn">
                <a href="project.php" class="btn">View All Projects</a>
            </div>
        </div>
    </section>
    
    
    <section class="stats-section">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-number" id="area-counter">0</div>
                    <div class="stat-label">Sq Ft. Designed</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="homes-counter">0</div>
                    <div class="stat-label">Homes Transformed</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="experience-counter">0</div>
                    <div class="stat-label">Years of Experience</div>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="testimonials-section" id="testimonials">
        <div class="container">
            <h2 class="section-title">What Our Clients Say</h2>
            <div class="testimonials-slider">
                <div class="testimonial-item">
                    <div class="testimonial-text">
                        I was looking for some good interior designers in Delhi NCR, to get my interiors done at M3M Golf Estate, which is when I came across SShomes. The team has been so supportive and understanding of my needs.
                    </div>
                    <div class="testimonial-author">- N K Bhardwaj</div>
                </div>
                
            </div>
        </div>
    </section>
    
    
    <section class="core-values-section">
        <div class="container">
            <div class="core-values-content">
                <h2 class="section-title" style="text-align: left;">Our Core Values</h2>
                <p>At SShomes, we meticulously redefine spaces with creative brilliance, client dedication, and timeless elegance. Our innovative designs seamlessly blend inventive details, prioritizing and elevating your distinctive vision.</p>
                <p>We believe in creating spaces that not only look beautiful but also enhance the quality of life for our clients. Every project we undertake is a testament to our commitment to excellence and attention to detail.</p>
                <a href="#" class="btn">Learn More About Us</a>
            </div>
        </div>
    </section>
    
    
    <section class="why-us-section " id="why-us"  >
        <div class="container">
            <h2 class="section-title">Why Choose Us?</h2>
            <div class="features-grid">
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <h3 class="feature-title">Legacy of Luxury</h3>
                    <p class="feature-desc">Our portfolio of high-end residential projects speaks to our expertise in luxury interior design.</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="feature-title">Personalized Consultation</h3>
                    <p class="feature-desc">We take the time to understand your needs, preferences, and lifestyle.</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-gem"></i>
                    </div>
                    <h3 class="feature-title">Bespoke Elegance</h3>
                    <p class="feature-desc">Every design element is carefully curated to create a unique and elegant living environment.</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <h3 class="feature-title">Environmental Conscious</h3>
                    <p class="feature-desc">We incorporate sustainable practices and eco-friendly materials in our design process.</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="feature-title">Complete Transparency</h3>
                    <p class="feature-desc">We maintain clear communication and transparency throughout the project lifecycle.</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-calendar-check"></i>
                    </div>
                    <h3 class="feature-title">Guaranteed Timelines</h3>
                    <p class="feature-desc">We are committed to delivering projects on time without compromising on quality.</p>
                </div>
            </div>
        </div>
    </section>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <?php include 'include/footer.php'; ?>
    
    <script>
        // Counter animation function
        function animateCounter(elementId, targetValue, duration) {
            const counterElement = document.getElementById(elementId);
            let startTime = null;
            const startValue = 0;
            
            function updateCounter(timestamp) {
                if (!startTime) startTime = timestamp;
                const progress = Math.min((timestamp - startTime) / duration, 1);
                const currentValue = Math.floor(progress * (targetValue - startValue) + startValue);
                counterElement.textContent = currentValue.toLocaleString();
                
                if (progress < 1) {
                    requestAnimationFrame(updateCounter);
                } else {
                    counterElement.textContent = targetValue.toLocaleString();
                }
            }
            
            requestAnimationFrame(updateCounter);
        }

// Intersection Observer to trigger counter animation when visible
        function handleIntersection(entries, observer) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // Start counter animations with updated values
                    animateCounter('area-counter', 200000, 2000);
                    animateCounter('homes-counter', 120, 2000);
                    animateCounter('experience-counter', 13, 2000);

// Unobserve after triggering
                    observer.unobserve(entry.target);
                }
            });
        }

// Create and setup the Intersection Observer
        const observer = new IntersectionObserver(handleIntersection, {
            root: null,
            threshold: 0.1
        });

// Observe the stats section
        document.addEventListener('DOMContentLoaded', function() {
            observer.observe(document.querySelector('.stats-section'));
            
            // Simple testimonial rotation (would be replaced with a proper slider in production)
            const testimonials = [
                {
                    text: "I was looking for some good interior designers in Delhi NCR, to get my interiors done at M3M Golf Estate, which is when I came across SShomes. The team has been so supportive and understanding of my needs.",
                    author: "- N K Bhardwaj"
                },
                {
                    text: "I'll definitely refer SShomes to whoever wants their commercial property to look beautiful and lovely. The team was very responsive, punctual, and professional.",
                    author: "- Mohit Chaudhary"
                },
                {
                    text: "I got my parents home in Mohali renovated with SShomes. My parent's were so happy with the results. The team is very professional and creative when it comes to giving your home a makeover!",
                    author: "- Amiti Joshi"
                }
            ];
            
            let currentTestimonial = 0;
            const testimonialText = document.querySelector('.testimonial-text');
            const testimonialAuthor = document.querySelector('.testimonial-author');
            
            // Change testimonial every 5 seconds
            setInterval(() => {
                currentTestimonial = (currentTestimonial + 1) % testimonials.length;
                
                // Fade out
                testimonialText.style.opacity = 0;
                testimonialAuthor.style.opacity = 0;
                
                // Change content and fade in after a short delay
                setTimeout(() => {
                    testimonialText.textContent = testimonials[currentTestimonial].text;
                    testimonialAuthor.textContent = testimonials[currentTestimonial].author;
                    testimonialText.style.opacity = 1;
                    testimonialAuthor.style.opacity = 1;
                }, 500);
            }, 5000);
        });
    </script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: residential.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation