gallery/public/previews/arch/contact.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 - Contact</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">Our Work</a>
            </div>
            <div class="nav_link">
                <a href="about.html">About Us</a>
            </div>
            <div class="nav_link">
                <a href="contact.html" class="active">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>
    <div id="overlay2"></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">
        <!-- Contact -->
        <section class="contact container">
            <div class="left">
                <h1 class="font64">Let's get acquainted.</h1>
                <p class="font26 mT50">
                    We would like to invite you for a no-obligation introductory meeting in which we
                    will listen to your wishes and explain the construction costs and the process.
                </p>
                <div class="btn mT80" id="appointment">
                    <a class="btn_cnt" href="#a" style="transform: translate3d(0px, 0px, 0px);">
                        <span class="btn-text"><span data-text="Make an Appointment">Make an Appointment</span></span>
                    </a>
                </div>
                <div class="image mT120">
                    <img src="assests/images/home/hero_img_3.webp" alt="contact_img" loading="lazy" data-scroll
                        data-scroll-speed="-2">
                </div>
            </div>
            <div class="right">
                <p class="font26 font_B">Arch + partners architects BNA</p>
                <p class="font20 mT20">Call us on <a href="#a">+92 1234567890 </a></p>
                <p class="font20 mT20">Email to <a href="mailto:[email protected]">[email protected]</a></p>
                <p class="font26 font_B mT50">Visiting address</p>
                <p class="font20 mT20">Rozengaarde 18</p>
                <p class="font20 mT20">7461 DB Rijssen</p>
                <p class="font20 mT20">England</p>

                <div class="image mT120">
                    <img src="assests/images/home/method_2.webp" alt="contact_img" loading="lazy" data-scroll
                        data-scroll-speed="-2">
                </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>

    <!-- Appointment Slider Section -->
    <div class="appointment_cnt">
        <div class="close_app">
            <i class="fa-solid fa-xmark"></i>
        </div>
        <h1 class="font64">Free Introduction</h1>
        <p class="font20 mT20">
            Make an appointment for a no-obligation introductory meeting in which we will listen to your wishes and
            explain the construction costs and the process. We will then contact you.
        </p>
        <form action="">
            <input type="text" placeholder="Your Name*" name="name" required>
            <input type="email" placeholder="Your Email Address*" name="email" required>
            <input type="tel" placeholder="Your Phone Number*" name="phone" required>
            <input type="submit" value="Send Message">
        </form>
        <img src="assests/images/home/hero_img_4.webp" class="mT80" alt="appointment image" loading="lazy">
    </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/apointment.js"></script>
    <script src="js/main.js" type="module"></script>
</body>

</html>