        <?php  include('header.php') ?>

        <section class="overflow-hidden bg-blue-500 justify-items-center pt-12">
            <div class="container px-4 mx-auto">
                <div class="flex flex-wrap -m-8 align-middle justify-center mt-8 mb-8">
                    <p id="our mission" class="mb-5 font-heading font-normal text-center uppercase tracking-px text-white text-red-500 mx-auto pb-3 text-sm" contenteditable="false">STAND OUT TO EMPLOYERS</p>
                    <div class="container mx-auto px-4 justify-center flex-wrap">
                        <h2 class="mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-white tracking-px max-w-xl md:w-auto" contenteditable="false">Helping everyone
                            <div class="">unlock new opportunities</div>
                        </h2>
                        <p class="max-w-lg mx-auto text-center text-lg text-white mt-6 p-2 lg:p-0 md:p-0" contenteditable="true">Just a few steps to jump start your career with a free Google Career Certificate and become job-ready</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="relative overflow-hidden pb-16 bg-blue-500">
            <div class="relative z-10 container mx-auto px-4">

                <div class="flex flex-wrap -m-10">
                    <div class="w-full bg-blue-500 lg:p-0 md:p-0 p-3">
                        <div class="md:max-w-xl text-center mx-auto">


                            <p></p>
                            <br><br>
                            <div class="flex flex-wrap max-w-md mx-auto -m-2 mb-5">
                            </div>


                            <form action="#" method="post">
                                <div class="flex flex-wrap -m-10 ">
                                    <div class="w-full">
                                        <div class="text-center transition duration-300 ease-in lg:mx-0 md:mx-0 mx-10">


                                            <p></p>
                                            <br><br>
                                            <div class="mx-auto -m-2 mb-2">
                                                <div class="mx-6 lg:mx-0 md:mx-0">
                                                    <input class="w-full bg-gray-200 outline-none border border-gray-200 focus:ring-2 text-sm py-3.5 mb-2 px-5 bg-blue-500 placeholder-white text-white" type="text" placeholder="Full name" name="full-name">
                                                </div>
                                                <div class="mx-6 lg:mx-0 md:mx-0">
                                                    <input class="w-full px-5 py-3.5 outline-none border border-gray-200 focus:ring-2 text-sm mb-2 bg-blue-500 text-white placeholder-white" type="text" placeholder="Email Address" name="email" contenteditable="false">
                                                </div>
                                                <div class="mx-6 lg:mx-0 md:mx-0">
                                                    <input class="w-full px-5 py-3.5 outline-none border border-gray-200 focus:ring-2 text-sm mb-2 text-white bg-blue-500 placeholder-white" type="text" placeholder="University Name" name="University-Name" contenteditable="false">
                                                </div>
                                                <div class="mx-6 lg:mx-0 md:mx-0">
                                                    <select id="courses" class="border border-gray-200 text-sm block w-full py-3.5 dark:focus:border-blue-500 px-5 bg-blue-500 text-white placeholder-white"><option selected>Choose a Course</option>
      <option value="UX">UX Design</option>
      <option value="Project Management">Project Management</option>
      <option value="IT">IT Support</option>
      <option value="Data Analytics">Data Analytics</option>
      <option value="Digital Marketing">Digital Marketing &amp; E-Commerce</option></select>
                                                    <div class="w-full p-2">
                                                    </div>
                                                    <div class="items-center pb-2 font-bold pt-8 flex">
                                                        <p class="text-sm text-white" contenteditable="false">Privacy Consent</p>
                                                    </div>
                                                    <div class="items-center pb-4 flex px-8">
                                                        <input id="link-checkbox" type="checkbox" value="" class="w-4 h-4 text-blue-500 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 mr-4 rounded-none">
                                                        <label
                                                            for="link-checkbox" class="text-sm text-justify text-white" contenteditable="false">By registering for this Google Career Certificate Scholarship Program, you acknowledge that your information will be used in accordance with the Department for Work and Pensions' Privacy Policy.
                                                            Your data may be shared with the Department for Work and Pensions' partners (including Google and Coursera). If you have any questions about your data, or want it deleted, please reach out to
                                                            <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline">dwp-scholarship-uk@coursera.org</a>.</label>
                                                    </div>
                                                    <div class="w-full p-2">
                                                        <div class="group relative">
                                                            <div class="absolute top-0 left-0 w-full h-full opacity-0 group-hover:opacity-50 transition duration-300 ease-in-out tracking-px uppercase"></div>
                                                            <button class="p-1 w-full font-heading font-medium text-base text-white overflow-hidden">
                              <div class="relative py-4 px-9 bg-red-500 overflow-hidden">
                                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full transition ease-in-out duration-500 bg-blue-500 tracking-px uppercase"></div>
                                <p class="relative z-10 uppercase tracking-px font-medium" contenteditable="false">APPLY now</p>
                              </div>
                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

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

        </section>

        <section class="overflow-hidden">
            <div class="container mx-auto px-4 pt-10">
                <img class="mx-auto w-80" src="https://static.shuffle.dev/uploads/files/59/59d8d6481e116259b9698d7279d55ac39df4770f/Emplio-new-p-blue-mg-copy.jpeg" alt="" contenteditable="false">
                <p class="font-heading text-xs font-normal text-center uppercase tracking-px text-white text-gray-200 text-red-500 font-semibold mb-10"
                    contenteditable="false">A PLATFORM BY CREATIVES FOR YOU LTD.      </p>
                <ul class="flex flex-wrap justify-center -m-5 pb-8">
                    <li class="p-5"><a class="font-heading text-base text-gray-900 hover:text-gray-700" href="#" contenteditable="false">About us</a></li>
                    <li class="p-5"><a class="font-heading text-base text-gray-900 hover:text-gray-700" href="#" contenteditable="false">Students</a></li>
                    <li class="p-5"><a class="font-heading text-base text-gray-900 hover:text-gray-700" href="#" contenteditable="false">Businesses</a></li>
                    <li class="p-5"><a class="font-heading text-base text-gray-900 hover:text-gray-700" href="#" contenteditable="false">Contact us</a></li>
                </ul>
                <div class="border-b border-gray-100"></div>
                <p class="text-gray-600 text-center py-8 text-sm">© Copyright 2022. All Rights Reserved by Creatives For You Ltd.</p>
            </div>
        </section>

        <?php  include('footer.php') ?>