<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        zua.ke
    </title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

     <link rel="stylesheet" href="test1.css">

    <script>
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous">
    </script>


</head>


<!--body -->
<body style=" background-color: mintcream">

<header>

    <div class="header-inner">

        <a href="#" class="brand">
            <img src="zua.png" width="30" alt="" />

        </a>



        <div class="navigation">
            <a class="nav-scroll" href="home.php">
                HOME
            </a>
            <a class="nav-scroll" href="about.php">
                ABOUT
            </a>
            <a class="nav-scroll" href="projects.php">
                PROJECTS
            </a>
            <a class="nav-scroll" href="#budget">
                BUDGET DOCUMENTS
            </a>
            <a class="nav-scroll" href="#resources">
                RESOURCES
            </a>
        </div>

    </div>
    <script >
        $(function(){

            $('.nav-scroll').click(function(){
                $('.active').removeClass('active');
                $('.show').removeClass('show');
                panelId = $(this).attr('href');
                $(panelId).addClass('show');
                $(this).addClass('active');
            });

        });

    </script>
</header>
<h1 style="padding: 100px; text-align: center">Mombassa open governance</h1>

<link rel="stylesheet" href="home.css">
<!--js with proper-->
<div class="slideshow-container" style="max-height: 600px; top: 10px;">

    <!-- Full-width images with number and caption text -->
    <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="1.jpg" style="width:100%; height: 600px">
        <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="2.jpg" style="width:100%; height: 600px">
        <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="4.jpg" style="width:100%; height: 600px" >
        <div class="text">Caption Three</div>
    </div>

    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- The dots/circles -->
<div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div >
<section style="width: 90%; margin: auto;">

<h1 style=" text-align: center">Who are we</h1>
<p style="text-align: center; margin-bottom: auto">*BRIEF INFORMATION ABOUT ZUA GOES HERE*</p>
    <div class="container1" >
        <img src="wrw.jpg" alt="Avatar" class="image">
        <div class="overlay">
            <div class="text">About MOG
                The name ‘ZUA’ is derived from a Swahili word which means 'bring to light or pull out'. ZUA’s main aim is to strengthen the capacity of members of the public,
                CSOs and the marginalized (women, youth and PLWDs) to effectively participate in budget making process as well as implementation and oversight.
                ZUA permits the translation of budget information to everyone's comfortability and use. The Platform makes use of simplified budget language for
                inclusivity in order to facilitate participation of all members of public in the process of budget implementation.

                Section 91 of the County Government Act (2012) stipulates that county governments shall facilitate the establishment of modalities and platforms
                for citizen participation such as town hall meetings, ICT based technologies, establishment of citizen fora at county levels and decentralized units.


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

    <!--a second container-->


    <!--a second container-->

</section>

    <h1 style=" text-align: center">Our partners</h1>
    <p style="text-align: center;">INFORMATION ABOUT ZUA PARTNERS GOES HERE</p>
    <div class="divs" style="display: flex;max-width: 90%;margin: auto;">

        <div class="cols"  style=" flex: 50%;padding: 10px; margin-bottom: auto;"><p style="text-align: center; "> HIVOS EAST AFRICA</p>
            <img src="hvs.jpg" alt="Avatar" class="image"  style="width: 60%; margin: auto;height: 350px;" >
        </div>


        <div class="cols container1"  style=" flex: 50%;padding: 10px; margin-bottom: auto"><p style="text-align: center">  MOMBASA COUNTY ASSEMBLY</p>
            <img src="msa.jpg" alt="Avatar" class="image"  style="width: 60%; margin:auto; height: 350px">
            <div class="overlay">
                <div class="text">About msa



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

    </div>

<div class="divt">
    <p>BUDGET CYCLE ACTIVITIES AND CITIZEN PARTICIPATION</p>
</div>


<div class="divh">

    <div class="colh"><p> 1.FORMULATION</p></div>
    <div class="colh"><p> 2.APPROVAL</p></div>
    <div class="colh"><p> 3.IMPLEMENTATION</p></div>
    <div class="colh"><p> 4.AUDIT</p></div>
</div>

<script src="home.js">

</script>


<!--home page ens here-->
<!--footer -->

<footer style="background-color:yellow; width:100%;">
    <p>Author: zuake<br>
        <a href="mailto:hege@example.com">info@zua.ke</a></p>
</footer>

</body>



</html>