index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Women in Tech</title>

    <!--Link to integrate bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <!--Link to integrate JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./index.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@600&family=Work+Sans:wght@700&display=swap"
        rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@600&family=Work+Sans:wght@300&display=swap"
        rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@600&family=Work+Sans:wght@300;400&display=swap"
        rel="stylesheet">
</head>

<body>
    <div class="Hero">

        <div class="nav-container">
            <nav class="nav-bar">
                <img src="./Images/Logo-CFG.png" width="70px" height="45px" padding="16px 16px 16px 16px">
                <ul class="nav-items">
                    <li><a href="About">ABOUT</a></li>
                    <li><a href="Why Tech?">WHY TECH?</a></li>
                    <li><a href="Contact">CONTACT</a></li>
                </ul>
            </nav>
        </div>

        <div class="intro-container">
            <div class="intro">
                <h1 class="display-1">Empowering Women Through Tech</h1>
                
                <p></p>
                <p class="sub-heading"> Our goal is to provide support to women in transitioning into a career in tech
                </p>
                <p></p>
              
                <button class="btn btn-primary" href="About">FIND OUT MORE</button>
            </div>
            <div class="hero-image">
                <img src="./Images/profile images.png" width="580px" height="600px">
            </div>
        </div>
        <div>
        </div>

        <div class="whytech">
            <div class="whytechheader">
                <h2>WHY TECH?</h2>
                <p>
                </p>
                <p>Pursue a career in tech to unleash your potential, contribute to groundbreaking innovations, and
                    shape a more inclusive and equitable future</p>
            </div>

            <div>
                <!--add a carousel here-->

                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card" style="width: 18rem; height: 440px">
                                <img src="./Images/skills icon1.png" class="card-img-top-1"
                                    alt="Skills icon in black and white">
                                <div class="card-body">
                                    <h3 class="card-title">SKILLSET</h3>
                                    <p class="card-text">Learn a wide range of skills from coding to design to help you
                                        on your journey into the field of tech</p>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card" style="width: 18rem; height: 440px">
                                <img src="./Images/job icon1.png" class="card-img-top-2"
                                    alt="Job search icon in black and white">
                                <div class="card-body">
                                    <h3 class="card-title">EMPLOYABILITY</h3>
                                    <p class="card-text">Increase and widen your access to job opportunities through
                                        improving your employability with new skills</p>


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

                        <div class="col-md-4">
                            <div class="card" style="width: 18rem; height: 440px">
                                <img src="./Images/community icon1.png" class="card-img-top-3" alt="...">
                                <div class="card-body">
                                    <h3 class="card-title">COMMUNITY</h3>
                                    <p class="card-text">Find a community of link-minded women who share the same goals,
                                        ambitions and interests</p>

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

                </div>
                <button class="btn btn-primary" href="About">FIND OUT MORE</button>
            </div>
        </div>

        <div class="mission-section">
            <img src="./Images/rocket.png" style="padding: 20px; margin: 40px;">
            <div class="mission">
                <h2>OUR MISSION</h2>
                <p>
                </p>
                <p>Our mission is to create an inclusive and supportive environment where women can thrive and excel in
                    the tech industry. We believe that diversity drives innovation, and we are committed to breaking
                    down barriers and challenging stereotypes to ensure equal opportunities for all. Through mentorship,
                    skill development, and networking initiatives, we aim to equip women with the tools and confidence
                    they need to succeed in this rapidly evolving field. Together, we can shape a future where women
                    play a pivotal role in shaping technology and making a lasting impact on society.
                </p>
            </div>
        </div>

        <div class="team">
            <div class="teamheader">
                <h2>WHO ARE WE?<h2>
                        <p>
                        </p>
                        <p>Pursue a career in tech to unleash your potential, contribute to groundbreaking innovations,
                            and
                            shape a more inclusive and equitable future</p>
            </div>

            <div>


                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card" style="width: 18rem; height: 380px;">
                                <img src="./Images/Imo profile.png" class="card-img-top-1"
                                    alt="Skills icon in black and white">
                                <div class="card-body">
                                    <h3 class="card-title">IMOGEN CAMPBELL</h3>
                                    <p class="card-text">UX Designer</p>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card" style="width: 18rem; height: 380px">
                                <img src="./Images/El profile.png" class="card-img-top-2"
                                    alt="Job search icon in black and white">
                                <div class="card-body">
                                    <h3 class="card-title">EL NAFAR</h3>
                                    <p class="card-text">Graphic Designer</p>


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

                        <div class="col-md-4">
                            <div class="card" style="width: 18rem; height: 380px">
                                <img src="./Images/Julianna profile.png" class="card-img-top-3" alt="...">
                                <div class="card-body">
                                    <h3 class="card-title">JULIANNA ELDRIDGE</h3>
                                    <p class="card-text">Analyst</p>

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

                </div>
                <button class="btn btn-primary" href="About">FIND OUT MORE</button>
            </div>
        </div>


    </div>
    <footer class="footer">
        <img src="./Images/logo BG.png">
        <p>

        </p>
        <h4>&copy; 2023 WomenInTech, Inc.</h4>
        <p>

        </p>
        <ul class="footer-links">
            <li><a href="About" id="about-link">About</a></li>
            <li><a href="Terms" id="terms-link">Terms</a></li>
            <li><a href="Privacy" id="privacy-link">Privacy</a></li>
            <li><a href="Contact" id="contact-link">Contact</a></li>
        </ul>
        <div class="social-media">
            <div class="Facebook">
                <img src="./Images/Facebook.png">
            </div>
            <div class="Instagram">
                <img src="./Images/Instagram.png">
            </div>
            <div class="Pinterest">
                <img src="./Images/Pinterest.png">
            </div>
            <div class="Twitter">
                <img src="./Images/Twitter.png">
            </div>
        </div>
    </footer>
</body>