gallery/public/previews/arch/about.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 - ABOUT US</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">
    <!-- Swiper.js -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.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">Our Work</a>
            </div>
            <div class="nav_link">
                <a href="about.html" class="active">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 -->
        <section class="subPage_header">
            <div class="container">
                <h1 class="font64">We have a passion for architecture, landscape and interior.</h1>
                <p class="font26 mT50">We strive for buildings and environments with a clear character, special
                    spaciousness and a careful and sustainable finish.</p>
            </div>
        </section>

        <!-- Team -->
        <div class="team containerV">
            <div class="card" data-scroll data-scroll-speed="2" data-scroll-delay="0.1">
                <img src="assests/images/about/team1.webp" alt="Team Profile" loading="lazy">
                <div class="txt mT20">
                    <p class="font26 font_M">Theo Reitsema</p>
                    <p class="font20">architect - director</p>
                </div>
            </div>

            <div class="card" data-scroll data-scroll-speed="2" data-scroll-delay="0.2">
                <img src="assests/images/about/team2.webp" alt="Team Profile" loading="lazy">
                <div class="txt mT20">
                    <p class="font26 font_M">Stephanie Weitering</p>
                    <p class="font20">senior interior designer - project manager</p>
                </div>
            </div>

            <div class="card" data-scroll data-scroll-speed="2" data-scroll-delay="0.1">
                <img src="assests/images/about/team3.webp" alt="Team Profile" loading="lazy">
                <div class="txt mT20">
                    <p class="font26 font_M">Dennis Weerink</p>
                    <p class="font20">senior project architect - project manager</p>
                </div>
            </div>

            <div class="card" data-scroll data-scroll-speed="2" data-scroll-delay="0.3">
                <img src="assests/images/about/team4.webp" alt="Team Profile" loading="lazy">
                <div class="txt mT20">
                    <p class="font26 font_M">Jacob Kunst</p>
                    <p class="font20">senior designer, structural engineer</p>
                </div>
            </div>

            <div class="card" data-scroll data-scroll-speed="2" data-scroll-delay="0.1">
                <img src="assests/images/about/team5.webp" alt="Team Profile" loading="lazy">
                <div class="txt mT20">
                    <p class="font26 font_M">Ashley Tettero</p>
                    <p class="font20">ontwerper</p>
                </div>
            </div>

            <div class="card" data-scroll data-scroll-speed="2" data-scroll-delay="0.2">
                <img src="assests/images/about/team6.webp" alt="Team Profile" loading="lazy">
                <div class="txt mT20">
                    <p class="font26 font_M">Kasper Brinkman</p>
                    <p class="font20">ontwerper, bouwkundig engineer</p>
                </div>
            </div>

            <div class="card" data-scroll data-scroll-speed="2" data-scroll-delay="0.1">
                <img src="assests/images/about/team7.webp" alt="Team Profile" loading="lazy">
                <div class="txt mT20">
                    <p class="font26 font_M">Eline Hassink</p>
                    <p class="font20">interieur ontwerper</p>
                </div>
            </div>

            <div class="card" data-scroll data-scroll-speed="2" data-scroll-delay="0.3">
                <img src="assests/images/about/team8.webp" alt="Team Profile" loading="lazy">
                <div class="txt mT20">
                    <p class="font26 font_M">Anna van't Hul</p>
                    <p class="font20">stagiaire</p>
                </div>
            </div>

            <div class="card" data-scroll data-scroll-speed="2" data-scroll-delay="0.1">
                <img src="assests/images/about/team9.webp" alt="Team Profile" loading="lazy">
                <div class="txt mT20">
                    <p class="font26 font_M">Fons Bramer</p>
                    <p class="font20">ontwerper, bouwkundig engineer</p>
                </div>
            </div>

            <div class="card" data-scroll data-scroll-speed="2" data-scroll-delay="0.2">
                <img src="assests/images/about/team10.webp" alt="Team Profile" loading="lazy">
                <div class="txt mT20">
                    <p class="font26 font_M">Anneke op den Dries</p>
                    <p class="font20">administratief medewerker</p>
                </div>
            </div>
        </div>

        <!-- Block -->
        <section class="about_block container containerV">
            <div class="wrapper">
                <div>
                    <h1 class="font64">
                        We are driven to design <span class="grey">inspiring buildings</span> where people can live,
                        work
                        and meet.
                    </h1>
                    <div class="image mT80">
                        <img src="assests/images/about/aboutBlock1.webp" alt="about_block_img" loading="lazy"
                            data-scroll data-scroll-speed="-2">
                    </div>
                </div>
                <div>
                    <p class="font26">
                        Good dialogue with the client creates clear and powerful concepts that are carefully developed.
                        Good
                        integration into the environment, sustainability and craftsmanship play an important role.
                    </p>
                    <div class="image mT80">
                        <img src="assests/images/about/aboutBlock2.webp" alt="about_block_img" loading="lazy"
                            data-scroll data-scroll-speed="-2">
                    </div>
                </div>
            </div>

            <div class="image blockImage">
                <img src="assests/images/about/aboutBlock3.webp" alt="about_block_img" loading="lazy" data-scroll
                    data-scroll-speed="-2">
            </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>

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

        <!-- Slider Section -->
        <section class="slider container containerV">
            <h1 class="font64">On TV</h1>
            <div class="swiper mySwiper2 mT50">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="assests/images/about/slider1.webp" />
                    </div>
                    <div class="swiper-slide">
                        <img src="assests/images/about/slider2.webp" />
                    </div>
                    <div class="swiper-slide">
                        <img src="assests/images/about/slider3.webp" />
                    </div>
                    <div class="swiper-slide">
                        <img src="assests/images/about/slider4.webp" />
                    </div>
                </div>
            </div>

            <div thumbsSlider="" class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="assests/images/about/slider1.webp" />
                    </div>
                    <div class="swiper-slide">
                        <img src="assests/images/about/slider2.webp" />
                    </div>
                    <div class="swiper-slide">
                        <img src="assests/images/about/slider3.webp" />
                    </div>
                    <div class="swiper-slide">
                        <img src="assests/images/about/slider4.webp" />
                    </div>
                </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>

    <!-- 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>
    <!-- Swiper.js -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <!-- Custom Script -->
    <script src="js/main.js" type="module"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            spaceBetween: 20,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".mySwiper2", {
            spaceBetween: 10,
            thumbs: {
                swiper: swiper,
            },
        });
    </script>
</body>

</html>