index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>G3 Architects - Assignment2</title>
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/responsive.css">
</head>

<body>
    <section class="header-banner">
        <!-- Header Section Start -->
        <header class="container">
            <div class="logo">
                <h3>G3 Architects</h3>
            </div>
            <div class="menu-container">
                <nav>
                    <ul class="menu">
                        <li><a href="#">Home</a></li>
                        <li><a href="#feature">About</a></li>
                        <li><a href="#testimonial">Testimonial</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- Header Section End -->

        <!-- Banner  Section Start-->
        <div class="container">
            <div class="banner-content">
                <h2 class="banner-title">Brand New <br>Group of Architects </h2>
                <p class="description">"Expertise in Architecture: Designing for Function and Aesthetics. Crafting Stunning and Functional Spaces. Innovative Architecture Solutions for Your Project"</p>
                <button class="primary-btn">Explore More</button>
            </div>
            <div class="banner-image">
                <img src="assets/images/banner.png" alt="">
            </div>
        </div>
    </section>
    <!-- Banner  Section End-->
    <!-- Main Section Begin -->
    <main class="container">
        <!-- Feature Section Start-->
        <section class="feature-section">
            <div class="feature-left-gallary">
                <div class="feature-left-image">
                    <img src="assets/images/team1.png" alt="">
                </div>
                <div class="feature-left-image">
                    <img src="assets/images/team2.png" alt="">
                </div>
                <div class="feature-left-image">
                    <img src="assets/images/team3.png" alt="">
                </div>
                <div class="feature-left-image">
                    <img src="assets/images/team4.png" alt="">
                </div>
            </div>
            <div class="feature-right-content">
                <h2 class="title"><span class="feat-quick">Quick list</span> of Our <span class="feat-color"><br>
                        Features</span></h2>
                <p class="description">Advanced Frontend Development Techniques for Exceptional User Experience. Development Techniques for Exceptional User Experience</p>
                <button class="primary-btn">Explore More</button>
            </div>
        </section>
        <!-- Feature Section End-->

        <!-- Feature Point Section Start-->
        <section class="feature-point-section" id="feature">
            <div class="point-left">
                <div class="point-top">
                    <h2 class="title feat-title">Features you will <br> love & enjoy</h2>
                    <p class="description">Advanced Frontend Development Techniques for Exceptional User Experience</p>
                </div>
                <div class="feat-points">
                    <div class="point">
                        <h3>Desktop & Mobile Version</h3>
                        <p class="description">Having both a desktop and mobile version of a website or application is becoming more important as it allows users to access the content on any device, and it also helps with Search Engine Optimization(SEO) as Google and other search engines give priority to mobile-friendly websites.</p>
                    </div>
                    <div class="point">
                        <h3>Awesome Modern Design</h3>
                        <p class="description">Awesome Modern Design is to create a visually stunning, yet practical space that is both beautiful and functional. The design aesthetic is often simple, yet elegant and timeless. It can be seen in many different forms like furniture, buildings, and even fashion. </p>
                    </div>
                    <div class="point">
                    <h3>Super Easy to Edit</h3>
                    <p class="description">This feature can be beneficial for people who want to make changes to the design, content, or functionality of a website, software application, or other type of product without requiring much technical expertise.</p>
                </div>
                    <div class="point">
                        <h3>Drag & Drop Builder</h3>
                        <p class="description">A "Drag & Drop Builder" is a user interface feature that allows users to easily design and customize a website or other type of content by dragging and dropping pre-designed elements. </p>
                    </div>
                </div>
            </div>
            <div class="point-right">
                <img src="assets/images/architect.png" alt="">
                <!-- extra -->
                <div class="expreience">
                    <h2>12+Year</h2>
                    <p>Experience</p>
                </div>
            </div>
        </section>
        <!-- Feature Point Section End-->

        <!-- Fact Section Start-->
        <section class="fact-section">
            <div class="fact-details">
                <h2 class="title">Some Facts</h2>
                <p class="description">Expertise in Architecture: Designing for Function and Aesthetics. Crafting Stunning and Functional Spaces. <br> Innovative Architecture Solutions for Your Project"</p>
            </div>
            <!-- extra -->
            <div class="fact-cards">
                <div class="card">
                    <img src="assets/images/icons/ribon.png" alt="">
                    <h2>55</h2>
                    <p>Awards Winnings</p>
                </div>
                <div class="card">
                    <img src="assets/images/icons/projects.png" alt="">
                    <h2>1255</h2>
                    <p>Projects Finished</p>
                </div>
                <div class="card">
                    <img src="assets/images/icons/customers.png" alt="">
                    <h2>490</h2>
                    <p>Clients Worked</p>
                </div>
                <div class="card">
                    <img src="assets/images/icons/email.png" alt="">
                    <h2>34245</h2>
                    <p>Email Send</p>
                </div>
            </div>
        </section>
        <!-- Fact Section End-->

        <!-- Sponsor Section Start-->
        <section class="sponsor-section">
            <div class="sponsor-details">
                <h2 class="title">Sponsor</h2>
                <p class="description">There are many variations of passages of Lorem Ipsum available, but the majority
                    have suffered
                    alteration.
                </p>
            </div>
            <div class="sponsor-logos">
                <img src="assets/images/sponsors/amazon.png" alt="">
                <img src="assets/images/sponsors/figma.png" alt="">
                <img src="assets/images/sponsors/spotify.png" alt="">
                <img src="assets/images/sponsors/google.png" alt="">
                <img src="assets/images/sponsors/telerama.png" alt="">
            </div>
        </section>
        <!-- Sponsor Section End-->

        <!-- extra -->
        <!-- Testimonial Section Start-->
        <section class="testimonial-section" id="testimonial">
            <div class="testimonial">
                <h2 class="title">Testimonials</h2>
                <p class="description">Expert Frontend Development that Elevates Your Website</p>
            </div>
            <div class="testimonial-card">
                <div class="card-author">
                    <img src="assets/images/t3.jpg" alt="">
                    <div>
                        <h2>Taslima</h2>
                        <p>CEO, Company</p>
                    </div>
                </div>
                <div class="card-content">
                    <p class="description">Our frontend developer is a true asset to our team. Their skills in HTML, CSS and JavaScript are exceptional and they consistently deliver high-quality work. They have a great eye for design and user experience, making our website visually stunning and easy to navigate.
                    </p>
                </div>
            </div>
            <div class="testimonial-card">
                <div class="card-author">
                    <img src="assets/images/t2.jpg" alt="">
                    <div>
                        <h2>Rabeya</h2>
                        <p>CEO, Company</p>
                    </div>
                </div>
                <div class="card-content">
                    <p class="description">I had the pleasure of working with a frontend developer who exceeded all of my expectations. Their attention to detail and ability to turn complex design ideas into seamless user experiences was impressive.
                    </p>
                </div>
            </div>
            <div class="testimonial-card">
                <div class="card-author">
                    <img src="assets/images/t1.jpg" alt="">
                    <div>
                        <h2>John Doe</h2>
                        <p>CEO, Company</p>
                    </div>
                </div>
                <div class="card-content">
                    <p class="description">I had the pleasure of working with a frontend developer who exceeded all of my expectations. Their attention to detail and ability to turn complex design ideas into seamless user experiences was impressive.
                    </p>
                </div>
            </div>
        </section>
        <!-- Testimonial Section End-->
    </main>
    <!-- Footer Section Start-->
    <footer class="container">
        <div class="copyright">
            <p>All rights reserved copyright@2023 <a href="https://github.com/devvsakib" target="_blank">DevvSakib</a></p>
        </div>
    </footer>
    <!-- Footer Section End-->
</body>

</html>