<!DOCTYPE html> <html lang=“en-US”> <head>

{% include head.html %}

<script>
    $(document).ready(function(){
        $(function(){
            // Check the initial Poistion of the Sticky Header
            var stickyHeaderTop = $('#mainSlider').offset().top;

            $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#mainSlider').addClass("navbar-fixed");
                    $('#mainSlider').css("margin-top", "-70vh");
                } else {
                    $('#mainSlider').removeClass("navbar-fixed");
                    $('#mainSlider').css("margin-top", "");
                }
            });
        });

        $('.mainSlider').each(function() {
            var $this = $(this);
            var $target = $('#' + $(this).attr('data-target'));
            $this.pushpin({
                top: $target.offset().top,
                bottom: $target.offset().top + $target.outerHeight() - $this.height()
            });
        });
    });

</script>

</head>

<body>

{% include go2top.html %} {% include pageloginpoper.html %}

<div class=“white navbar-fixed”>

<nav>
    <div class="nav-wrapper">
        <div class="container">
            <a href="/index.html" class="brand-logo black-text">Home</a>
            <a href="#!" class="brand-logo black-text center">
                <div id="spinkit">
                    <div class="col s12 center">

                        <div class="preloader-wrapper big active">
                            <div class="spinner-layer spinner-blue">
                                <div class="circle-clipper left">
                                    <div class="circle"></div>
                                </div><div class="gap-patch">
                                <div class="circle"></div>
                            </div><div class="circle-clipper right">
                                <div class="circle"></div>
                            </div>
                            </div>

                            <div class="spinner-layer spinner-red">
                                <div class="circle-clipper left">
                                    <div class="circle"></div>
                                </div><div class="gap-patch">
                                <div class="circle"></div>
                            </div><div class="circle-clipper right">
                                <div class="circle"></div>
                            </div>
                            </div>

                            <div class="spinner-layer spinner-yellow">
                                <div class="circle-clipper left">
                                    <div class="circle"></div>
                                </div><div class="gap-patch">
                                <div class="circle"></div>
                            </div><div class="circle-clipper right">
                                <div class="circle"></div>
                            </div>
                            </div>

                            <div class="spinner-layer spinner-green">
                                <div class="circle-clipper left">
                                    <div class="circle"></div>
                                </div><div class="gap-patch">
                                <div class="circle"></div>
                            </div><div class="circle-clipper right">
                                <div class="circle"></div>
                            </div>
                            </div>
                        </div>

                    </div>
                </div>
            </a>
            <ul class="right hide-on-med-and-down">
                <li><a href="/">Blog</a></li>
                <li><a href="/videos.html">Videos</a></li>
                <li><a href="/about.html">About</a></li>
            </ul>
        </div>
    </div>
</nav>

</div>

<div class=“container”>

<main>
    {{ content }}
</main>

</div>

<footer class=“page-footer”>

<div class="container">
    <div class="row">
        <style>
            .footerInfo h6{
                display: inline;
            }
        </style>
        <div class="col l6 s12 footerInfo">
            <p class="white-text" style="font-size: 2rem; margin: 2px 0">সাধারণ তথ্য</p>

            <span style="display:block;"> ব্লগ চলছে <h6><a href="https://jekyllrb.com/">জ্যাকেল</a></h6> এ, </span>
            <span> <h6><a href="https://github.com/">গিটহাব</a></h6>  এ হোস্ট করা । </span> <br/>
            <span> ডিজাইন ও ডেভেলপমেন্ট : <h6><a href="https://github.com/jubayed">জুবায়েদ</a></h6>।</span>
        </div>
        <div class="col l4 offset-l2 s12">
            <p class="white-text" style="font-size: 2rem; margin: 2px 0" >সামাজিক যোগাযোগ মাধ্যম</p>
            <ul>
                <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
                <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
                <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
                <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="footer-copyright">
    <div class="container">
        © 2017 Jubayed Hossain
        <a class="grey-text text-lighten-4 right" href="#!">jubayed</a>
    </div>
</div>

</footer> {% include footer.html %} </body> </html>