
<?php $__env->startSection('content'); ?>

<section id="hero-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <div class="block wow fadeInUp" data-wow-delay=".3s">
                    <!-- Slider -->
                    <section class="cd-intro">
                        <h1 class="wow fadeInUp animated cd-headline slide" data-wow-delay=".4s">
                            <span>Ready to serve you with online application</span><br>
                            <span class="cd-words-wrapper">
                                <b class="is-visible">Transcript</b>
                                <b>Attestation</b>
                            </span>
                        </h1>
                    </section> <!-- cd-intro -->
                    <!-- /.slider -->
                    <h2 class="wow fadeInUp animated" data-wow-delay=".6s">
                        Apply for your transcript, detailed statement of results, attestation and much more. To be
                        delievered to the mode of transport you select.
                    </h2>
                    <a class="btn-lines btn-primary btn"
                        style="background-color: #064bba;" href="<?php echo route('apply'); ?>" >Appy
                        Online</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!--/#main-slider-->
<section id="feature">
    <div class="container">
        <div class="section-heading">
            <h1 class="title wow fadeInDown" data-wow-delay=".3s"><b>Our Products</b></h1>
            <p class="wow fadeInDown" data-wow-delay=".5s">Easy and convenient way to access these services</p>
        </div>
        <div class="row">
            <div class="col-md-4 col-lg-4 col-xs-12">
                <div class="media wow fadeInUp animated" data-wow-duration="500ms" data-wow-delay="300ms">
                    <div class="media-left">
                        <div class="icon d-flex align-items-center justify-content-center">
                            <!-- <i class="ion-ios-flask-outline"></i> -->
                            <i class="fas fa-file" data-feather="user"></i> 
                        </div>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">Transcript</h4>
                        <p>You can apply for a transcript to be delivered to an address (local or international) or you
                            can hand pick a copy on campus. Easy and efficient.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-lg-4 col-xs-12">
                <div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="600ms">
                    <div class="media-left">
                        <div class="icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">Letter of Attestation</h4>
                        <p>You can apply for a letter of attestation to be delivered to an address (local or
                            international) or you can hand pick a copy on campus. Easy and efficient.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-lg-4 col-xs-12">
                <div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="900ms">
                    <div class="media-left">
                        <div class="icon">
                            <i class="fas fa-book-open"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">Detailed Results</h4>
                        <p>You can apply for a detailed result to be delivered to an address (local or international) or
                            you can hand pick a copy on campus. Easy and efficient.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-lg-4 col-xs-12">
                <div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="1200ms">
                    <div class="media-left">
                        <div class="icon">
                            <i class="fas fa-poll-h"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">English Profiency Letter</h4>
                        <p>You can apply for an english profiency letter to be delivered to an address (local or
                            international) or you can hand pick a copy on campus. Easy and efficient.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-lg-4 col-xs-12">
                <div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="1500ms">
                    <div class="media-left">
                        <div class="icon">
                            <i class="fas fa-receipt"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">Recommendation Letter</h4>
                        <p>You can apply for a recommendation letter to be delivered to an address (local or
                            international) or you can hand pick a copy on campus. Easy and efficient.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section> <!-- /#feature -->

<section id="contact-section">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="block">
                    <h2 class="subtitle wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".3s">Let's Talk Further</h2>
                    <p class="subtitle-des wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".5s">
                    Please fill out the following form and we will get back to you shortly
                    </p>
                    <div class="contact-form">
                        <form id="contact-form" role="form">
                
                            <div class="form-group wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".6s">
                                <input type="text" placeholder="Your Name" class="form-control" name="name" id="name">
                            </div>
                            
                            <div class="form-group wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".8s">
                                <input type="email" placeholder="Your Email" class="form-control" name="email" id="email" >
                            </div>
                            
                            <div class="form-group wow fadeInDown" data-wow-duration="500ms" data-wow-delay="1s">
                                <input type="text" placeholder="Subject" class="form-control" name="subject" id="subject">
                            </div>
                            
                            <div class="form-group wow fadeInDown" data-wow-duration="500ms" data-wow-delay="1.2s">
                                <textarea rows="6" placeholder="Message" class="form-control" name="message" id="message"></textarea>    
                            </div>
                
                            <div id="submit" class="wow fadeInDown" data-wow-duration="500ms" data-wow-delay="1.4s">
                                <button  type="submit" id="contact-submit" class="btn btn-default btn-send" value="Send Message">Send Message</button>
                            </div>                      
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                 <div class="map-area">
                    <h2 class="subtitle  wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".3s">Find Us</h2>
                    <p class="subtitle-des wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".5s">
                       This is our location on the map.
                    </p>
                    <div class="map">
                     <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15853.75752311633!2d0.470069!3d6.5921838!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1027252fb911234b%3A0xde03c9546cda203e!2sHo%20Technical%20University!5e0!3m2!1sen!2sgh!4v1668780965195!5m2!1sen!2sgh" width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="row address-details">
            <div class="col-md-3">
                <div class="email wow fadeInLeft" data-wow-duration="500ms" data-wow-delay=".7s">
                    <i class="ion-ios-email-outline"></i>
                    <p>info@htu.edu.gh</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="phone wow fadeInLeft" data-wow-duration="500ms" data-wow-delay=".9s">
                    <i class="ion-ios-telephone-outline"></i>
                    <p>036 229 0146</p>
                </div>
            </div>
        </div>
    </div>
</section>  

<footer id="footer" style="background-color: #064bba; color: white !important;">
    <div class="container">
        <div class="col-md-8">
            <p class="copyright">Copyright: <span>
                    <script>
                    document.write(new Date().getFullYear())
                    </script>
                </span>Ho Technical University</a>.
                <br>
                <a href="https://htu.edu.gh" target="_blank">
                    Know more
                </a>
            </p>
        </div>
        <div class="col-md-4">
            <!-- Social Media -->
            <ul class="social" style="color: white !important;">
                <li>
                    <a href="http://wwww.fb.com/themefisher" class="Facebook">
                        <i class="ion-social-facebook"></i>
                    </a>
                </li>
                <li>
                    <a href="http://wwww.twitter.com/themefisher" class="Twitter">
                        <i class="ion-social-twitter"></i>
                    </a>
                </li>
                <li>
                    <a href="#" class="Linkedin">
                        <i class="ion-social-linkedin"></i>
                    </a>
                </li>
                <li>
                    <a href="http://wwww.fb.com/themefisher" class="Google Plus">
                        <i class="ion-social-googleplus"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</footer> <!-- /#footer -->
<?php $__env->stopSection(); ?>

<?php echo $__env->make('master_content', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>