1#@!#!123s

: / home3 / encodto1 / public_html /
Filename : websiteportfolio.php
back
<?php
// Include database connection
include 'database.php';

// Fetch data from the `website_portfolio` table
$query = "SELECT * FROM website_portfolio ORDER BY id DESC";
$result = mysqli_query($conn, $query);

// Check for query execution errors
if (!$result) {
    die("Query Failed: " . mysqli_error($conn));
}
?>

<!DOCTYPE html>
<html lang="en">
<?php
// Include styles
include 'style.php';
?>

<style>
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 3rem;
    }

    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease-in-out;
    }

    .gallery-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
        transition: transform 0.3s ease-in-out;
    }

    .gallery-item:hover img {
        transform: scale(1.1);
    }

    /* Overlay effect */
    .gallery-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        /* Black with opacity */
        opacity: 0;
        /* Hidden by default */
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease-in-out;
    }

    .gallery-item:hover .gallery-overlay {
        opacity: 1;
        /* Show overlay on hover */
    }

    .gallery-caption {
        color: #fff;
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
    }



    .gallery-caption {
        position: absolute;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        width: 100%;
        padding: 10px;
        opacity: 0;
        transition: opacity 0.3s ease;
        text-align: center;
    }

    .gallery-item:hover .gallery-caption {
        opacity: 1;
    }
</style>

<body>
    <!-- Main -->
    <main class="main-page new-release-page">
        <!-- Header -->
        <?php include 'header.php'; ?>

        <!-- Portfolio Hero -->
        <section class="hero-service-wrap hero-section-wrap hero-portfolio-wrap">
            <div class="hero-section-content-wrap">
                <div class="custom-container">
                    <div class="hero-portfolio-body">
                        <div class="hero-section-content text-center">
                            <h5 class="section-subtitle">Web Portfolio</h5>
                            <h1 class="section-title fade-in">We are doing world-class <br> projects in your way</h1>
                            <p>Our projects are born from a passion for innovation that knows no bounds. We see challenges as
                                opportunities to push the envelope and explore new frontiers.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Project Section -->
        <section class="project-area">
            <div class="custom-container">
                <div class="custom-row justify-content-between">
                    <div class="project-left-details">
                        <h5 class="section-subtitle">PROJECTS</h5>
                        <h1 class="section-title">Showcase of our recognized work</h1>
                        <p>Our collaborative approach ensures that we truly understand our clients' unique requirements and challenges.</p>
                        <ul>
                            <li><i class="las la-check"></i> Managed Services and Products</li>
                            <li><i class="las la-check"></i> Flexibility and Adaptability</li>
                            <li><i class="las la-check"></i> Competitive Advantage</li>
                        </ul>
                    </div>

                    <div class="project-right-slider">
                        <div class="project-right-slider-inner">
                            <div class="swiper project-slider">
                                <div class="swiper-wrapper">
                                    <?php while ($row = mysqli_fetch_assoc($result)): ?>
                                        <div class="swiper-slide project-item">
                                            <div class="project-item-inner">
                                                <img src="encoadminders/uploads/website/<?php echo htmlspecialchars($row['image']); ?>" alt="Project Image" />
                                            </div>
                                        </div>
                                    <?php endwhile; ?>
                                </div>
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Project Section end -->

        <!-- Call to Action Section -->
        <section class="cta-area cta-area2 cta-area2-white mt-5">
            <div class="custom-container">
                <div class="cta-body text-center d-flex align-items-center justify-content-between">
                    <img src="assets/imgs/bg-shape-cta.svg" alt="Shape" class="animation-slide-left bg-shape" />
                    <div class="left">
                        <h2>Build your project with us, Make it world-class</h2>
                        <p>Our projects are born from a passion for innovation that knows no bounds.</p>
                    </div>
                    <a href="getquote.html" class="theme-btn2">Get Quote Now</a>
                </div>
            </div>
        </section>

        <!-- Gallery Section -->
        <section class="gallery-area mt-5">
            <div class="custom-container">
                <h1 class="section-title text-center mb-4">Our Portfolio Gallery</h1>
                <div class="gallery-grid">
                    <?php mysqli_data_seek($result, 0); // Reset pointer to the start 
                    ?>
                    <?php while ($row = mysqli_fetch_assoc($result)): ?>
                        <div class="gallery-item">
                            <a href="website_details.php?id=<?php echo urlencode($row['id']); ?>">
                                <img src="encoadminders/uploads/website/<?php echo htmlspecialchars($row['image']); ?>" alt="Portfolio Image" />
                                <div class="gallery-caption">
                                    <?php echo htmlspecialchars($row['name']); ?>
                                </div>
                            </a>
                        </div>
                    <?php endwhile; ?>
                </div>
            </div>
        </section>



        <!-- Footer -->
        <?php include 'footer.php'; ?>
    </main>

    <!-- Scripts -->
    <script src="assets/js/jquery-3.7.0.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/gsap.min.js"></script>
    <script src="assets/js/Draggable.min.js"></script>
    <script src="assets/js/swiper-bundle.min.js"></script>
    <script src="assets/js/client-marquee.js"></script>
    <script src="assets/js/theme-custom.js"></script>
    <script src="assets/js/form1.js"></script>
    <script src="assets/js/subscribe-form.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Tawk.to Script -->
    <script type="text/javascript">
        var Tawk_API = Tawk_API || {},
            Tawk_LoadStart = new Date();
        (function() {
            var s1 = document.createElement("script"),
                s0 = document.getElementsByTagName("script")[0];
            s1.async = true;
            s1.src = 'https://embed.tawk.to/609cf4b4185beb22b30cda7a/1f5ihnorp';
            s1.charset = 'UTF-8';
            s1.setAttribute('crossorigin', '*');
            s0.parentNode.insertBefore(s1, s0);
        })();
    </script>
</body>

</html>