Banner carousel full

At Marble DP Art, we take pride in transforming spaces with our expert craftsmanship in stone, marble, granite, and terrazzo. Below, you can explore our portfolio showcasing before and after images of our projects. Each transformation reflects our dedication to quality and attention to detail.

Our Work

Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Before & After Toggle</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            display: flex;
            flex-direction: column; /* Stack elements vertically */
            align-items: center;
            padding: 20px; /* Padding for the body */
        }

        .before-after-container {
            position: relative;
            max-width: 1000px; /* Increase max width for larger images */
            width: 100%; /* Full width for responsiveness */
            cursor: pointer;
            overflow: hidden;
            border: 2px solid #ddd; /* Optional border for visibility */
            border-radius: 8px; /* Rounded corners */
            margin: 20px 0; /* Margin between images */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
        }

        .before-after-container img {
            width: 100%;
            height: auto;
            display: block;
            transition: opacity 0.3s ease;
        }

        .after-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .visible {
            opacity: 1; /* Show after image */
        }
    </style>
</head>
<body>

    
    <div class="before-after-container" id="toggleContainer1">
        <img src="https://i.imgur.com/s8V5iUN.jpg" alt="Before Image" class="before-image">
        <img src="https://i.imgur.com/FZDGQWS.jpg" alt="After Image" class="after-image">
    </div>

    
    <div class="before-after-container" id="toggleContainer2">
        <img src="https://i.imgur.com/ITCbY9R.jpg" alt="Before Image" class="before-image">
        <img src="https://i.imgur.com/7NOlNeR.jpg" alt="After Image" class="after-image">
    </div>

    
    <div class="before-after-container" id="toggleContainer3">
        <img src="https://i.imgur.com/bOJTLpC.jpg" alt="Before Image" class="before-image">
        <img src="https://i.imgur.com/R0KLng0.jpg" alt="After Image" class="after-image">
    </div>

    
    <div class="before-after-container" id="toggleContainer4">
        <img src="https://i.imgur.com/6clp2h8.jpg" alt="Before Image" class="before-image">
        <img src="https://i.imgur.com/tVMPHkD.jpg" alt="After Image" class="after-image">
    </div>

    
    <div class="before-after-container" id="toggleContainer5">
        <img src="https://i.imgur.com/cBXQEfz.jpg" alt="Before Image" class="before-image">
        <img src="https://i.imgur.com/CdY99cw.jpg" alt="After Image" class="after-image">
    </div>

    
    <div class="before-after-container" id="toggleContainer6">
        <img src="https://i.imgur.com/wXmHiP7.jpg" alt="Before Image" class="before-image">
        <img src="https://i.imgur.com/WG0GKce.jpg" alt="After Image" class="after-image">
    </div>

    
    <div class="before-after-container" id="toggleContainer7">
        <img src="https://i.imgur.com/qNeP7Kv.jpg" alt="Before Image" class="before-image">
        <img src="https://i.imgur.com/1JBBFpy.jpg" alt="After Image" class="after-image">
    </div>

    <script>
        // Toggle function for each container
        const toggleContainers = document.querySelectorAll('.before-after-container');
        toggleContainers.forEach(container => {
            const afterImage = container.querySelector('.after-image');
            container.addEventListener('click', function() {
                afterImage.classList.toggle('visible');
            });
        });
    </script>

</body>
</html>

Image carousel

We are proud to have collaborated with Howard Walwyn, a distinguished figure in England, known for his expertise in antique clocks. At his prestigious property, we crafted and installed bespoke kitchen worktops, designed to meet the highest standards of elegance and functionality. As one of the finest suppliers, Howard Walwyn, who has a renowned store in Kensington, London, has graciously offered to leave us a review for our meticulous work. We are excited to showcase this partnership and continue delivering exceptional quality to all our clients.