gallery/public/previews/arch/work.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Arch">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="keywords"
        content="architecture, design, sustainable architecture, innovative designs, real estate, real estate agency, agency">
    <meta name="description"
        content="Transforming dreams into iconic spaces. Explore our architecture agency's portfolio of innovative designs, sustainable solutions, and timeless structures. Elevate your vision with our award-winning architects. Discover the artistry of architectural excellence." />
    <title>ARCH - Our Work</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <!-- Locomotive.js -->
    <link rel="stylesheet" href="css/loco.css">
    <!-- Custom Css -->
    <link rel="stylesheet" href="css/main.css">
</head>

<body>

    <!-- Preloader -->
    <div class="preloader">
        <div class="animateImg">
            <img src="assests/images/home/hero_img_1.webp" class="animateImg1">
        </div>
        <div class="animateImg">
            <img src="assests/images/home/hero_img_2.webp" class="animateImg2">
        </div>
        <div class="animateImg">
            <img src="assests/images/home/hero_img_3.webp" class="animateImg3">
        </div>
        <div class="animateImg">
            <img src="assests/images/home/hero_img_4.webp" class="animateImg4">
        </div>
        <div class="animateImg">
            <img src="assests/images/home/hero_img_5.webp" class="animateImg5">
        </div>
        <div class="animateImg">
            <img src="assests/images/home/hero_img_6.webp" class="animateImg6">
        </div>
    </div>

    <!-- Navigation Menu -->
    <div class="navigation_menu">
        <div class="navigation_cnt">
            <div class="nav_link">
                <a href="index.html">Home</a>
            </div>
            <div class="nav_link">
                <a href="home2.html">Home 02</a>
            </div>
            <div class="nav_link">
                <a href="work.html" class="active">Our Work</a>
            </div>
            <div class="nav_link">
                <a href="about.html">About Us</a>
            </div>
            <div class="nav_link">
                <a href="contact.html">Contact</a>
            </div>

            <div class="navigation_social">
                <i class="fa-brands fa-facebook"></i>
                <i class="fa-brands fa-instagram"></i>
                <i class="fa-brands fa-linkedin"></i>
            </div>
            <div class="navigation_policies">
                <a href="#a"> Privacy & Cookies</a>
                <a href="#a"> Terms & Conditions</a>
            </div>
        </div>
    </div>

    <!-- Overlay -->
    <div id="overlay"></div>

    <!-- Navbar -->
    <nav>
        <div class="nav_cnt">
            <div class="logo" onclick="window.location.href='index.html'">
                <h1 class="font26">Arch</h1>
            </div>
            <div class="hamburger open_nav">
                <svg viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <line x1="0" y1="17" x2="48" y2="17" stroke-width="1" />
                        <line x1="0" y1="31" x2="48" y2="31" stroke-width="1" />
                    </g>

                    <g>
                        <line x1="0" y1="24" x2="48" y2="24" stroke-width="1" />
                        <line x1="0" y1="24" x2="48" y2="24" stroke-width="1" />
                    </g>
                </svg>
            </div>
        </div>
    </nav>

    <!------------- ALL CONTENT ------------>
    <div id="main">
        <!-- Page Header -->
        <div class="subPage_header" data-scroll-section>
            <div class="container">
                <h1 class="font64">
                    For more than 19 years we have been creating environments in which people live, work and meet. Where
                    every detail is right. Each with its own story. View a selection of our work.
                </h1>
            </div>
        </div>

        <!-- Work Section -->
        <section class="work container containerV" data-scroll-section>
            <div class="project-container">
                <div class="projects">
                    <div class="project" id="header">
                        <div class="client">
                            <p>Project</p>
                        </div>
                        <div class="location">
                            <p>Location</p>
                        </div>
                        <div class="service">
                            <p>Category</p>
                        </div>
                        <div class="year">
                            <p>Year</p>
                        </div>
                    </div>

                    <div class="project" id="p1">
                        <div class="client">
                            <p>Thameside Towers</p>
                        </div>
                        <div class="location">
                            <p>YHA London Themeside</p>
                        </div>
                        <div class="service">
                            <p>Apartments</p>
                        </div>
                        <div class="year">
                            <p>2023</p>
                        </div>
                    </div>

                    <div class="project" id="p2">
                        <div class="client">
                            <p>Meadow View</p>
                        </div>
                        <div class="location">
                            <p>Birmingham, Nevada Way</p>
                        </div>
                        <div class="service">
                            <p>House</p>
                        </div>
                        <div class="year">
                            <p>2018</p>
                        </div>
                    </div>

                    <div class="project" id="p3">
                        <div class="client">
                            <p>Glenwood Lodge</p>
                        </div>
                        <div class="location">
                            <p>Leeds, Alderton Heights</p>
                        </div>
                        <div class="service">
                            <p>Pent House</p>
                        </div>
                        <div class="year">
                            <p>2022</p>
                        </div>
                    </div>

                    <div class="project" id="p4">
                        <div class="client">
                            <p>Tudor Oaks</p>
                        </div>
                        <div class="location">
                            <p>Manchester, Kingsway Street</p>
                        </div>
                        <div class="service">
                            <p>House</p>
                        </div>
                        <div class="year">
                            <p>2016</p>
                        </div>
                    </div>

                    <div class="project" id="p5">
                        <div class="client">
                            <p>Cityscape Suites</p>
                        </div>
                        <div class="location">
                            <p>London, Jermyn Street</p>
                        </div>
                        <div class="service">
                            <p>Apartments</p>
                        </div>
                        <div class="year">
                            <p>2015</p>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- Brands -->
        <section class="brands containerV" data-scroll-section>
            <div class="heading_block container">
                <h1 class="font64">Together we make the most <span class="grey">beautiful</span> things.</h1>
            </div>
            <div class="row Row1" data-scroll data-scroll-direction="horizontal" data-scroll-speed="-2">
                <img src="assests/images/home/brand-logo1.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo2.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo3.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo4.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo5.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo6.png" alt="brand" loading="lazy">
            </div>
            <div class="row" data-scroll data-scroll-direction="horizontal" data-scroll-speed="2">
                <img src="assests/images/home/brand-logo5.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo6.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo3.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo1.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo2.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo4.png" alt="brand" loading="lazy">
            </div>
            <div class="row" data-scroll data-scroll-direction="horizontal" data-scroll-speed="-2">
                <img src="assests/images/home/brand-logo2.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo6.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo1.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo3.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo4.png" alt="brand" loading="lazy">
                <img src="assests/images/home/brand-logo5.png" alt="brand" loading="lazy">
            </div>
        </section>

        <!-- full-image -->
        <div class="containerV" data-scroll-section></div>

        <div class="image" data-scroll-section data-scroll>
            <img src="assests/images/home/full-img.webp" alt="" data-scroll data-scroll-speed="-2">
        </div>

        <!-- Footer -->
        <footer data-scroll-section>
            <div class="container">
                <div class="btn">
                    <a class="btn_cnt" href="contact.html" style="transform: translate3d(0px, 0px, 0px);">
                        <span class="btn-text"><span data-text="Contact Us">Contact Us</span></span>
                    </a>
                </div>
                <div class="footer_social">
                    <i class="fa-brands fa-facebook"></i>
                    <i class="fa-brands fa-instagram"></i>
                    <i class="fa-brands fa-linkedin"></i>
                </div>
            </div>
        </footer>
    </div>

    <!-- Project Cursor -->
    <div class="preview">
        <div class="preview-img"></div>
    </div>

    <!-- GSAP -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <!-- Locomotive.js -->
    <script src="js/loco.js"></script>
    <!-- Custom Script -->
    <script src="js/main.js" type="module"></script>
    <script src="js/project.js"></script>
</body>

</html>