doctype html
html(lang='en')

    head

        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
        meta(name='description', content='')
        meta(name='author', content='')

        title Clean Blog - Start Bootstrap Theme

        link(rel='icon', type='image/x-icon', href='assets/favicon.ico')

        // Font Awesome icons (free version)
        script(src='https://use.fontawesome.com/releases/v5.15.3/js/all.js', crossorigin='anonymous')

        // Google fonts
        link(href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic', rel='stylesheet', type='text/css')
        link(href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800', rel='stylesheet', type='text/css')

        // Core theme CSS (includes Bootstrap)
        link(href='css/styles.css', rel='stylesheet')

    body

        // Navigation
        nav#mainNav.navbar.navbar-expand-lg.navbar-light.fixed-top
            .container
                a.navbar-brand(href='index.html') Start Bootstrap
                button.navbar-toggler.navbar-toggler-right(type='button', data-toggle='collapse', data-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
                    | Menu
                    i.fas.fa-bars
                #navbarResponsive.collapse.navbar-collapse
                    ul.navbar-nav.ml-auto
                        li.nav-item
                            a.nav-link(href='index.html') Home
                        li.nav-item
                            a.nav-link(href='about.html') About
                        li.nav-item
                            a.nav-link(href='post.html') Sample Post
                        li.nav-item
                            a.nav-link(href='contact.html') Contact
        // Page Header
        header.masthead(style="background-image: url('assets/img/about-bg.jpg')")
            .overlay
            .container
                .row
                    .col-lg-8.col-md-10.mx-auto
                        .page-heading
                            h1 About Me
                            span.subheading This is what I do.
        // Main Content
        .container
            .row
                .col-lg-8.col-md-10.mx-auto
                    p
                        | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
                    p
                        | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus!
                    p
                        | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur magnam, excepturi aliquid ex itaque esse est vero natus quae optio aperiam soluta voluptatibus corporis atque iste neque sit tempora!
        hr
        // Footer
        footer
            .container
                .row
                    .col-lg-8.col-md-10.mx-auto
                        ul.list-inline.text-center
                            li.list-inline-item
                                a(href='#!')
                                    span.fa-stack.fa-lg
                                        i.fas.fa-circle.fa-stack-2x
                                        i.fab.fa-twitter.fa-stack-1x.fa-inverse
                            li.list-inline-item
                                a(href='#!')
                                    span.fa-stack.fa-lg
                                        i.fas.fa-circle.fa-stack-2x
                                        i.fab.fa-facebook-f.fa-stack-1x.fa-inverse
                            li.list-inline-item
                                a(href='#!')
                                    span.fa-stack.fa-lg
                                        i.fas.fa-circle.fa-stack-2x
                                        i.fab.fa-github.fa-stack-1x.fa-inverse
                        p.copyright.text-muted Copyright &copy; Your Website 2021

        // Bootstrap core JS
        script(src='https://code.jquery.com/jquery-3.5.1.min.js')
        script(src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js')

        // Core theme JS
        script(src='js/scripts.js')
