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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="styles.css">
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <title>Home | Bismark-IQ-Tech</title>
    <link rel="shortcut icon" href="media/main2.jpg" type="image/x-icon">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <nav>
        <div class="nav-container">
            <div class="logo" data-aos="zoom-in" data-aos-duration="1500">
                <a href="#index.html">Bismark <span>IQ Tech</span></a>
            </div>
            <div class="links">
                <div class="link" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100"><a href="#">Home</a>
                </div>
                <div class="link" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200"><a
                        href="Services.html">Services</a></div>
                <div class="link" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300"><a
                        href="project.html">Systems</a></div>
                <div class="link" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400"><a
                        href="skills.html">About us</a></div>
                <div class="link" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="500"><a
                        href="contact.html"> Contact</a></div>
            </div>
            <i class="fa-solid fa-bars hamburg" onclick="hamburg()"></i>
        </div>
        <div class="dropdown">
            <div class="links">
                <a href="#"><ion-icon class="navbar-icon" size="small" name="home"></ion-icon>Home</a>
                <a href="Services.html"><ion-icon class="navbar-icon" size="small"
                        name="laptop-outline"></ion-icon>Services</a>
                <a href="project.html"><ion-icon class="navbar-icon" size="small" name="send"></ion-icon>Systems</a>
                <a href="skills.html"><ion-icon class="navbar-icon" size="small" name="mail"></ion-icon>About us</a>
                <a href="contact.html"><ion-icon class="navbar-icon" size="small"
                        name="phone-portrait-outline"></ion-icon>Contact</a>
                <i class="fa-solid fa-xmark cancel" onclick="cancel()"></i>

                <div class="search-bar">
                    <input type="text" placeholder="Search...." id="search">
                    <button onclick="performSearch()">Search</button>
                </div>

            </div>
        </div>
    </nav>


    <section>
        <div class="main-container">
            <div class="image" data-aos="zoom-out" data-aos-duration="3000">
                <img src="media/profile.jpg" alt="logo">
            </div>
            <div class="content">
                <h1 data-aos="fade-left" data-aos-duration="1500" data-aos-delay="700">Hey I'm <span>Bismark</span></h1>
                <div class="typewriter" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="900">I'm a <span
                        class="typewriter-text"></span><label for="">|</label></div>
                <p data-aos="flip-down" data-aos-duration="1500" data-aos-delay="1100">Welcome to Bismark IQ Tech - your
                    hub for innovative tech solutions,tutorials and Services. Empowering individuals and businesses in
                    Ghana with cutting-edge tools and practical and practical insights to solve everyday challenges in
                    technology</p>
                <div class="social-links">
                    <a href="https://www.youtube.com/@bismarkIQTech" data-aos="fade-up" data-aos-duration="1500"
                        data-aos-delay="1300"><i class="fa-brands fa-youtube"></i></a>
                    <a href="https://www.facebook.com/BismarkIQTech?mibextid=ZbWKwL" data-aos="fade-up"
                        data-aos-duration="1500" data-aos-delay="1400"><i class="fa-brands fa-facebook"></i></a>
                    <a href="https://www.tiktok.com/@bismarkiqtech?_t=8sKs43SvhNm&_r=1" data-aos="fade-up"
                        data-aos-duration="1500" data-aos-delay="1500"><i class="fa-brands fa-tiktok"></i></a>
                    <a href="https://www.instagram.com/bismarkiqtech/profilecard/?igsh=MWxjNzIwcG5mZWh5dA=="
                        data-aos="fade-up" data-aos-duration="1500" data-aos-delay="1600"><i
                            class="fa-brands fa-instagram"></i></a>
                </div>
                <div class="btn" data-aos="zoom-in" data-aos-duration="1500" data-aos-delay="1800">
                    <a style="text-decoration: none;" href="contact.html"><button style="cursor: pointer;"> Hire
                            me</button></a>

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



    <div class="what-we-offer">
        <div class="container">
            <h4 class="tag scroll-animation ">Our Offering and Services</h4>
            <p>
                Bismark IQ Tech delivers tech content creation,software development, and
                web design globally. it also provides graphic design and innovative tech solutions
            </p>

            <a href="services.html" class="btn btn-primary scroll-animation ">Learn More</a>
        </div>
    </div>











    <!-- what project have you done code -->
    <div class="why-choose-us">
        <div class="container">
            <h4 class="tag scroll-animation ">Our Product</h4>

            <section>
                <a style="text-decoration: none;" href="project.html">
                    <div class="why-choose-item">
                        <img src="media/responsive-web-design.webp" alt="" width="100px">
                        <p>
                            <strong>Expertise</strong>

                            Our team of experts are highly skilled and experienced in the IT industry.
                        </p>
                    </div>
                </a>

                <a style="text-decoration: none;" href="project.html">
                    <div class="why-choose-item">
                        <img src="media/Article_e-com_sep-1.jpg" alt="" width="80px">
                        <p>
                            <strong>Client-Centric Approach</strong>

                            Tailored services to meet your unique business needs
                        </p>
                    </div>
                </a>
                <a style="text-decoration: none;" href="project.html">
                    <div class="why-choose-item">
                        <img src="media/Mobile-App-Design.jpg" alt="" width="80px">
                        <p>
                            <strong>Reliability & Communication</strong>

                            Reliable support, and transparent communication for a seamless partnership
                        </p>
                    </div>
                </a>
        </div>
    </div>




    <div class="Testimonials">
        <h4>Testimonials</h4>
        <div class="card">
            <p class="card-title">Kwasi Adu</p>
            <p class="small-desc">
                I'm a testimonial. Click to edit me and add text that says something nice about you and your services.
                Let your customers review you and tell their friends how great you are.
            </p>
            <div class="go-corner">
                <div class="go-arrow">→</div>
            </div>
        </div>

        <div class="card">
            <p class="card-title">Miracle</p>
            <p class="small-desc">
                I'm a testimonial. Click to edit me and add text that says something nice about you and your services.
                Let your customers review you and tell their friends how great you are.
            </p>
            <div class="go-corner">
                <div class="go-arrow">→</div>
            </div>
        </div>


        <div class="card">
            <p class="card-title">Bismark</p>
            <p class="small-desc">
                I'm a testimonial. Click to edit me and add text that says something nice about you and your services.
                Let your customers review you and tell their friends how great you are.
            </p>
            <div class="go-corner">
                <div class="go-arrow">→</div>
            </div>
        </div>



    </div>
















    <footer class="footer">
        <div class="footer-container">
            <div class="footer-about">
                <h3>Bismarck IQ Tech</h3>
                <p>Your go-to problem solver, developer, and tech content creator.</p>
            </div>
            <div class="footer-links">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="project.html">See My Work</a></li>
                    <li><a href="contact.html">Contact Me</a></li>
                    <li><a href="Services.html">Services</a></li>
                </ul>
            </div>
            <div class="footer-social">
                <h4>Connect with Me</h4>
                <a href="https://www.facebook.com/BismarkIQTech?mibextid=ZbWKwL" target="_blank">Facebook</a> |
                <a href="https://www.twitter.com" target="_blank">INSTAGRAM</a> |
                <a href="https://www.youtube.com/@bismarkIQTech" target="_blank">Youtube</a>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 Bismarck IQ Tech. All Rights Reserved.</p>
        </div>
    </footer>



    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init({ offset: 0 });
    </script>
    <script src="index.js"></script>
</body>

</html>