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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Systems | Bismark-IQ-Tech</title>
    <link rel="stylesheet" href="project.css">
    <link rel="shortcut icon" href="media/main2.jpg" type="image/x-icon">
    <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>
</head>

<body>
    <header>
        <!-- <nav>
            <div class="logo">Bismark IQ Tech</div> -->
        <!-- <ul class="nav-links">
                <li><a href="#about">About</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="project.html">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <button class="menu-btn" onclick="toggleMenu()">☰</button> -->

        <!-- 
        </nav> -->


        <nav class="back">

            <a href="index.html">
                <ion-icon class="navbar-icon" size="large" name="caret-back-outline"></ion-icon>

            </a>

        </nav>

    </header>

    <main>
        <section id="projects">
            <h1> Projects</h1>
            <div class="project-container">
                <!-- Project 1 -->
                <div class="project-card">
                    <img src="media/responsive-web-design.webp" alt="Responsive Portfolio">
                    <h3>Responsive Portfolio Website</h3>
                    <p>A clean and modern portfolio design.</p>
                </div>
                <!-- Project 2 -->
                <!-- <div class="project-card">
                    <img src="media/Article_e-com_sep-1.jpg" alt="E-commerce Platform">
                    <h3>E-commerce Platform</h3>
                    <p>Developed a user-friendly online store.</p>
                </div> -->
                <!-- Project 3 -->
                <!-- <div class="project-card">
                    <img src="media/Mobile-App-Design.jpg" alt="Mobile App">
                    <h3>Mobile App</h3>
                    <p>A task management app for productivity.</p>
                </div> -->
                <!-- Project 4 -->
                <!-- <div class="project-card">
                    <img src="media/youtube-logo-youtube-logo-transparent-youtube-icon-transparent-free-free-png.png" alt="Mobile App">
                    <h3>Mobile App</h3>
                    <p>A task management app for productivity.</p>
                </div> -->
            </div>
        </section>
    </main>



    <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="project.js"></script>
</body>

</html>