gallery/public/previews/arch/index.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 - HOME</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" class="active">Home</a>
            </div>
            <div class="nav_link">
                <a href="home2.html">Home 02</a>
            </div>
            <div class="nav_link">
                <a href="work.html">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">
        <!-- Hero Section -->
        <section class="hero container">
            <div class="hero_heading">
                <h1 class="font96">Architecture</h1>
            </div>
            <div class="hero_heading">
                <h1 class="font96">Landscape Interior</h1>
            </div>
            <div class="hero_img img_1" data-scroll data-scroll-speed="2" data-scroll-direction="horizontal">
                <img src="assests/images/home/hero_img_1.webp" alt="architecture" loading="lazy">
            </div>

            <div class="hero_img img_2" data-scroll data-scroll-speed="-1" data-scroll-direction="horizontal">
                <img src="assests/images/home/hero_img_2.webp" alt="architecture" loading="lazy">
            </div>

            <div class="hero_img img_3" data-scroll data-scroll-speed="-1.5">
                <img src="assests/images/home/hero_img_3.webp" alt="architecture" loading="lazy">
            </div>

            <div class="hero_img img_4" data-scroll data-scroll-speed="-1" data-scroll-direction="horizontal">
                <img src="assests/images/home/hero_img_4.webp" alt="architecture" loading="lazy">
            </div>

            <div class="hero_img img_5" data-scroll data-scroll-speed="2.5">
                <img src="assests/images/home/hero_img_5.webp" alt="architecture" loading="lazy">
            </div>

            <div class="hero_img img_6" data-scroll data-scroll-speed="2.5" data-scroll-direction="horizontal">
                <img src="assests/images/home/hero_img_6.webp" alt="architecture" loading="lazy">
            </div>
        </section>

        <!-- About Section -->
        <section class="about container containerV">
            <div>
                <h1 class="font64">
                    We stand for grip and quality. Through our integrated approach we create tailor-made total
                    experiences.
                </h1>
            </div>
            <div>
                <p class="font32">
                    For more than 19 years we have been creating environments where people can live, work and meet.
                    Together with our clients, we conceive, design and realize high-quality buildings, villas, interiors
                    and landscapes.
                </p>

                <div class="btn mT80">
                    <a class="btn_cnt" href="about.html" style="transform: translate3d(0px, 0px, 0px);">
                        <span class="btn-text"><span data-text="About Us">About Us</span></span>
                    </a>
                </div>
            </div>
        </section>

        <!-- Method Section -->
        <section class="method containerV">
            <div class="left">
                <div class="image">
                    <img src="assests/images/home/method_1.webp" alt="method_img" loading="lazy" data-scroll
                        data-scroll-speed="-2">
                </div>
            </div>
            <div class="right">
                <div class="image">
                    <img src="assests/images/home/method_2.webp" alt="method_img" loading="lazy" data-scroll
                        data-scroll-speed="-2">
                </div>
                <div class="containerPR">
                    <h1 class="font64 mT120">A well-run process yields so much more.</h1>
                    <p class="font32 mT50">
                        We are creative in coming up with solutions. We help people move forward. Through our unique
                        process
                        we work towards the highest possible price-quality ratio. A good process with attention to
                        quality,
                        time and costs leads to a good end result. We actually bring your plans to life.
                    </p>
                    <div class="btn mT80">
                        <a class="btn_cnt" href="#a" style="transform: translate3d(0px, 0px, 0px);">
                            <span class="btn-text"><span data-text="Our Method">Our Method</span></span>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Work Section -->
        <section class="work container containerV">
            <div class="heading_block">
                <h1 class="font64">See the result of our work.</h1>
                <div class="btn">
                    <a class="btn_cnt" href="work.html" style="transform: translate3d(0px, 0px, 0px);">
                        <span class="btn-text"><span data-text="Our Work">Our Work</span></span>
                    </a>
                </div>
            </div>

            <div class="project-container mT120">
                <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>

        <!-- Awwards Section -->
        <section class="awwards container containerV">
            <div class="heading_block">
                <h1 class="font64">Awards and publications</h1>
                <div class="btn">
                    <a class="btn_cnt" href="#a" style="transform: translate3d(0px, 0px, 0px);">
                        <span class="btn-text"><span data-text="Show More">Show More</span></span>
                    </a>
                </div>
            </div>

            <div class="awwards_cnt mT120">
                <div class="row">
                    <img src="assests/images/home/awwards1.webp" alt="awwards" loading="lazy">
                    <p class="font26 font_B">European Property Award 2023 in the category Best Office Interior
                        Netherlands 2023, first prize</p>
                </div>
                <div class="row">
                    <img src="assests/images/home/awwards2.webp" alt="awwards" loading="lazy">
                    <p class="font26 font_B">Het Kleine Krikhaar wins Reynaers Project Prize 2021</p>
                </div>
                <div class="row">
                    <img src="assests/images/home/awwards3.webp" alt="awwards" loading="lazy">
                    <p class="font26 font_B">Mies van der Rohe Award nomination</p>
                </div>
            </div>
        </section>

        <!-- Block Section -->
        <section class="block containerV">
            <div class="image">
                <img src="assests/images/home/blockImg.webp" alt="block_img" loading="lazy" data-scroll
                    data-scroll-speed="-2">
            </div>
            <div class="txt container">
                <h1 class="font64">
                    "The days are perceived <span class="grey">as shorter</span> in the new office, it is so pleasant to
                    work here."
                </h1>
                <div class="mT50">
                    <p class="font20 font_B mT50">Luurt van de Ploeg</p>
                    <p class="font20 font_M mT20">CFO VolkerWessels Construction & Real Estate Development</p>
                </div>
            </div>
        </section>

        <!-- Marquee Section -->
        <section class="marquee_Section container containerV">
            <div class="heading_block">
                <h1 class="font64">Together we make the most beautiful things.</h1>
                <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>

            <div class="marquee_cnt mT120">
                <div class="marquee">
                    <ul class="marquee-content">
                        <li><img src="./assests/images/home/brand-logo1.png" alt="client" loading="lazy"></li>
                        <li><img src="./assests/images/home/brand-logo2.png" alt="client" loading="lazy"></li>
                        <li><img src="./assests/images/home/brand-logo3.png" alt="client" loading="lazy"></li>
                        <li><img src="./assests/images/home/brand-logo4.png" alt="client" loading="lazy"></li>
                        <li><img src="./assests/images/home/brand-logo5.png" alt="client" loading="lazy"></li>
                        <li><img src="./assests/images/home/brand-logo6.png" alt="client" loading="lazy"></li>
                    </ul>
                </div>
            </div>
        </section>

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

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

        <!-- Footer -->
        <footer>
            <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>