<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title><?php echo config('title') ?></title>
        <link rel="shortcut icon" href="<?php echo base_url() ?>/cdn/about/<?php echo config('favicon') ?>" type="image/x-icon" />
        <meta name="author" content="Marwa El-Manawy <marwa@elmanawy.info>" />
        <meta name="description" content="<?php echo config('meta_description') ?>">
        <meta name="Keywords" content="<?php echo config('meta_keywords') ?>">
       	<link rel="shortcut icon" href="<?php echo base_url() ?>/cdn/about/<?php echo config('favicon') ?>" type="image/x-icon">
        <link rel="stylesheet" href="<?php echo STYLE_CSS ?>/plugins.css">
        <link rel="stylesheet" href="<?php echo STYLE_CSS ?>/font-awesome.css">
        <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300%7cPoppins:400,300,500,700,600' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="<?php echo STYLE_CSS ?>/swiper.min.css">
        <link rel="stylesheet" href="<?php echo STYLE_CSS ?>/main.css">

        <script src="<?php echo STYLE_JS ?>/lib/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <div id="preloader">
            <img src="<?php echo STYLE_IMAGES ?>/preloading.gif"/>
        </div>
        <div class="main-wrapper">
            <header id="header" class="has-border">
                <a href="<?php echo site_url() ?>" class="logo">
                    <img src="<?php echo base_url() ?>/cdn/about/<?php echo config('logo') ?>" alt="<?php echo config('title') ?> - Logo">
                </a>
                <a href="#" class="mob-menu"><i class="fa fa-bars"></i></a>
                <nav>
                    <ul class="main-menu">
                        <li><a href="<?php echo site_url() ?>">home</a> </li>
                        <li><a href="<?php echo site_url('aboutme') ?>">About Me</a></li>
                        <li><a href="<?php echo site_url('albums') ?>">Albums</a></li>
                        <li><a href="<?php echo site_url('journal') ?>">Journal</a></li>
                        <li><a href="<?php echo site_url('packages') ?>">Packages</a></li>
                        <li><a href="<?php echo site_url('home/contactme') ?>">Say Hello !</a></li>
                    </ul>
                </nav>
            </header>
            {layout}
            <section class="hire-me text-center ">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="section-head wow fadeInUp" data-wow-duration="1.5s" style="visibility: visible; animation-duration: 1.5s; animation-name: fadeInUp;">
                                <h2>Let's work together!</h2>
                            </div>
                            <div class="mt-5 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".2s" style="visibility: visible; animation-duration: 1.5s; animation-delay: 0.2s; animation-name: fadeInUp;">
                                <a href="<?php echo site_url('home/contactme') ?>" class="button btn-outline">Contact Me!</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <footer id="footer">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 text-left copyrights">
                            <?php echo config('copyright') ?>
                        </div>
                        <div class="col-md-6 text-right">
                            <div class="author-box-social">
                                <?php if (config('facebook')): ?><a href="<?php echo config('facebook') ?>" class="social-link-footer"><i class="fa fa-facebook"></i></a><?php endif ?>
                                <?php if (config('instagram')): ?> <a href="<?php echo config('instagram') ?>" class="social-link-footer"><i class="fa fa-instagram"></i></a> <?php endif ?>
                                <?php if (config('youtube')): ?><a href="<?php echo config('youtube') ?>" class="social-link-footer"><i class="fa fa-youtube-play"></i></a><?php endif ?>
                                <?php if (config('twitter')): ?><a href="<?php echo config('twitter') ?>" class="social-link-footer"><i class="fa fa-twitter"></i></a> <?php endif ?>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>

        <script src="<?php echo STYLE_JS ?>/lib/jquery.min.js"></script>
        <script src="<?php echo STYLE_JS ?>/lib/scripts.js"></script>
        <script src="<?php echo STYLE_JS ?>/swiper.min.js"></script>

        <script src="<?php echo STYLE_JS ?>/main.js"></script>
        <script>
            $(document).ready(function () {
                var classes = ['wide', 'tall', 'tall wide'];
                $('.grid.albums .grid-item').each(function (i) {
                    $(this).addClass(
                            classes[Math.floor(Math.random() * classes.length)]);
                });
            });

        </script>
    </body>
</html>