<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap Template</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="../../../css/mdb.min.css" rel="stylesheet">

</head>

<body class="fixed-sn navy-blue-skin">

    <!--Double navigation-->
    <header>
        <!-- Sidebar navigation -->
        <ul id="slide-out" class="side-nav fixed sn-bg-1 custom-scrollbar">

            <!-- Logo -->
            <li>
                <div class="logo-wrapper waves-light sn-avatar-wrapper">
                    <a href="#">
                        <img src="https://mdbootstrap.com/images/avatars/img%20(8)" class="rounded-circle">
                    </a>
                </div>
            </li>
            <!--/. Logo -->

            <!--About-->
            <li>
                <div class="about">
                    <p>Quae ad, vel pariatur non voluptates nam quaerat.</p>
                </div>
            </li>
            <!--/.About-->

            <!--Social-->
            <li>
                <ul class="social">
                    <li><a href="https://twitter.com/MDBootstrap" target="_blank" class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
                    <li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
                    <li><a href="https://dribbble.com/mdbootstrap" target="_blank" class="icons-sm drib-ic"><i class="fa fa-dribbble"> </i></a></li>
                    <li><a href="https://www.linkedin.com/in/michal-szymanski-9228918a" target="_blank" class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a></li>
                    <li><a href="https://www.instagram.com/material_design_for_bootstrap/" target="_blank" class="icons-sm ins-ic"><i class="fa fa-instagram"> </i></a></li>
                </ul>
            </li>
            <!--/Social-->

            <!-- Side navigation links -->
            <li>
                <ul class="collapsible collapsible-accordion">
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-bus"></i> Travels<i class="fa fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="#" class="waves-effect">It's all about passion</a>
                                </li>
                                <li><a href="#" class="waves-effect">Europe travels</a>
                                </li>
                                <li><a href="#" class="waves-effect">Americas trip</a>
                                </li>
                                <li><a href="#" class="waves-effect">Australia journey</a>
                                </li>
                                <li><a href="#" class="waves-effect">India adventure</a>
                                </li>
                                <li><a href="#" class="waves-effect">Join our crew!</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-camera"></i> Photography<i class="fa fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="#" class="waves-effect">Travel pictures</a>
                                </li>
                                <li><a href="#" class="waves-effect">The best shots</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-forward"></i> Videos<i class="fa fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="#" class="waves-effect">Short videos</a>
                                </li>
                                <li><a href="#" class="waves-effect">Editing tutorials</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-paw"></i> Environment<i class="fa fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="#" class="waves-effect">How to protect?</a>
                                </li>
                                <li><a href="#" class="waves-effect">'Plant a tree' action</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="#" class="waves-effect">Blog's author</a>
                                </li>
                                <li><a href="#" class="waves-effect">Our crew</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope"></i> Contact us<i class="fa fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="#" class="waves-effect">FAQ</a>
                                </li>
                                <li><a href="#" class="waves-effect">Write a message</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
            <!--/. Side navigation links -->
            <div class="sidenav-bg mask-strong"></div>
        </ul>
        <!--/. Sidebar navigation -->

    <!--Navbar-->
    <nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar double-nav">

        <!-- SideNav slide-out button -->
        <div class="float-left">
            <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
        </div>

        <!-- Breadcrumb-->
        <div class="breadcrumb-dn mr-auto">
            <p>MDB Blog Home Page</p>
        </div>


        <ul class="nav navbar-nav nav-flex-icons ml-auto">

            <li class="nav-item ">
                <a class="nav-link"> <span class="badge red z-depth-1">2</span> <i class="fa fa-shopping-cart"></i> <span class="hidden-sm-down">Cart</span></a>
            </li>
            <li class="nav-item ">
                <a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
            </li>
            <li class="nav-item ">
                <a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
            </li>
            <li class="nav-item ">
                <a class="nav-link"><i class="fa fa-sign-in"></i> <span class="hidden-sm-down">Register</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> <span class="hidden-sm-down">Profile</span></a>
                <div class="dropdown-menu dropdown-primary dd-right" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
                    <a class="dropdown-item" href="#">Logout</a>
                    <a class="dropdown-item" href="#">My account</a>
                </div>
            </li>
        </ul>

    </nav>
    <!--/.Navbar-->
    </header>
    <!--/Double navigation-->

    <!--Main layout-->
    <main>
        <div class="container-fluid">

            <!--Section: Blog v.4-->
            <section class="section section-blog-fw">

                <!--First row-->
                <div class="row">
                    <div class="col-md-12 wow fadeIn" data-wow-delay="0.2s">
                        <!--Featured image-->
                            <img src="https://mdbootstrap.com/images/slides/slide%20(16).jpg">

                        <!--Post data-->
                        <div class="jumbotron wow fadeIn" data-wow-delay="0.4s">
                            <h2><a>How I've started my adventure with surfing?</a></h2>
                            <p>Written by <a>John Doe</a>, 26.03.2016</p>

                            <!--Social shares-->
                            <div class="social-counters ">

                                <!--Facebook-->
                                <a class="btn btn-fb">
                                    <i class="fa fa-facebook left "></i>
                                    <span class="hidden-md-down ">Facebook</span>
                                </a>
                                <span class="counter ">35</span>

                                <!--Twitter-->
                                <a class="btn btn-tw">
                                    <i class="fa fa-twitter left "></i>
                                    <span class="hidden-md-down ">Twitter</span>
                                </a>
                                <span class="counter ">23</span>

                                <!--Google+-->
                                <a class="btn btn-gplus">
                                    <i class="fa fa-google-plus left "></i>
                                    <span class="hidden-md-down ">Google+</span>
                                </a>
                                <span class="counter ">27</span>

                                <!--Comments-->
                                <a class="btn btn-default">
                                    <i class="fa fa-comments-o left "></i>
                                    <span class="hidden-md-down ">Comments</span>
                                </a>
                                <span class="counter ">18</span>

                            </div>
                            <!--/.Social shares-->

                        </div>
                        <!--/Post data-->

                        <!--Excerpt-->
                        <div class="excerpt wow fadeIn" data-wow-delay="0.4s">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ut tempore, cum minus perspiciatis, blanditiis tempora molestias dolorem pariatur deserunt laudantium, reprehenderit! Sed accusamus vitae qui, perferendis
                                minus.
                            </p>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa expedita quia animi placeat repudiandae, eius quos. Modi nulla, nisi itaque ullam ab, aliquam velit facilis, explicabo, eius saepe maxime quod.Lorem ipsum dolor
                                sit amet, consectetur adipisicing elit. Ipsa expedita quia animi placeat repudiandae, eius quos. Modi nulla, nisi itaque ullam ab, aliquam velit facilis, explicabo, eius saepe maxime quod.</p>
                        </div>
                    </div>
                </div>
                <!--/First row-->

                <hr>

                <!--Second row-->
                <div class="row">
                    <div class="col-md-12 wow fadeIn" data-wow-delay="0.2s">
                        <!--Featured image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/slides/slide%20(17).jpg">
                            <a>
                                <div class="mask "></div>
                            </a>
                        </div>

                        <!--Post data-->
                        <div class="jumbotron wow fadeIn" data-wow-delay="0.4s">
                            <h2><a>5 tips before you go by the sea.</a></h2>
                            <p>Written by <a>Maria Kate</a>, 25.03.2016</p>

                            <!--Social shares-->
                            <div class="social-counters ">

                                <!--Facebook-->
                                <a class="btn btn-fb ">
                                    <i class="fa fa-facebook left "></i>
                                    <span class="hidden-md-down ">Facebook</span>
                                </a>
                                <span class="counter ">42</span>

                                <!--Twitter-->
                                <a class="btn btn-tw ">
                                    <i class="fa fa-twitter left "></i>
                                    <span class="hidden-md-down ">Twitter</span>
                                </a>
                                <span class="counter ">29</span>

                                <!--Google+-->
                                <a class="btn btn-gplus ">
                                    <i class="fa fa-google-plus left "></i>
                                    <span class="hidden-md-down ">Google+</span>
                                </a>
                                <span class="counter ">35</span>

                                <!--Comments-->
                                <a class="btn btn-default ">
                                    <i class="fa fa-comments-o left "></i>
                                    <span class="hidden-md-down ">Comments</span>
                                </a>
                                <span class="counter ">22</span>

                            </div>
                            <!--/.Social shares-->

                        </div>
                        <!--/Post data-->

                        <!--Excerpt-->
                        <div class="excerpt wow fadeIn" data-wow-delay="0.4s">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ut tempore, cum minus perspiciatis, blanditiis tempora molestias dolorem pariatur deserunt laudantium, reprehenderit! Sed accusamus vitae qui, perferendis
                                minus.
                            </p>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa expedita quia animi placeat repudiandae, eius quos. Modi nulla, nisi itaque ullam ab, aliquam velit facilis, explicabo, eius saepe maxime quod.Lorem ipsum dolor
                                sit amet, consectetur adipisicing elit. Ipsa expedita quia animi placeat repudiandae, eius quos. Modi nulla, nisi itaque ullam ab, aliquam velit facilis, explicabo, eius saepe maxime quod.</p>
                        </div>
                    </div>
                </div>
                <!--/Second row-->

            </section>
            <!--/Section: Blog v.4-->

            <hr class="between-sections">

            <!--Section: Blog v.1-->
            <section class="section extra-margins">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Blog listing v.1</h1>
                <!--Section sescription-->
                <p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

                <!--First row-->
                <div class="row">

                    <!--First column-->
                    <div class="col-md-5 mb-r wow fadeInLeft" data-wow-delay="0.2s">
                        <!--Featured image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/regular/people/img%20(47).jpg">
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>
                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-7 mb-r wow fadeInRight" data-wow-delay="0.2s">
                        <!--Excerpt-->
                        <h5 class="red-text "><i class="fa fa-fire "></i>Lifestyle</h5>
                        <h4>Top 5 cities for romantic weekend for two.</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
                        <p>by <a><strong>Maria Kate</strong></a>, 23.06.2016</p>
                        <a class="btn btn-primary ">Read more</a>
                    </div>
                    <!--/Second column-->

                </div>
                <!--/First row-->

                <hr>

                <!--Second row-->
                <div class="row">

                    <!--First column-->
                    <div class="col-md-7 mb-r wow fadeInLeft" data-wow-delay="0.3s">
                        <!--Excerpt-->
                        <h5 class="blue-text "><i class="fa fa-trophy "></i>Sport</h5>
                        <h4>What you need to know before begin workout.</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
                        <p>by <a><strong>John Doe</strong></a>, 22.06.2016</p>
                        <a class="btn btn-primary ">Read more</a>
                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-5 mb-r wow fadeInRight" data-wow-delay="0.3s">
                        <!--Featured image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/regular/people/img%20(48).jpg">
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>
                    </div>
                    <!--/Second column-->

                </div>
                <!--/Second row-->

                <hr>

                <!--Third row-->
                <div class="row">

                    <!--First column-->
                    <div class="col-md-5 mb-r wow fadeInLeft" data-wow-delay="0.4s">
                        <!--Featured image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/regular/people/img%20(49).jpg">
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>
                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-7 mb-r wow fadeInRight" data-wow-delay="0.4s">
                        <!--Excerpt-->
                        <h5 class="teal-text "><i class="fa fa-television "></i>Entertainment</h5>
                        <h4>My best summer adventure - Glastonbury Festival.</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
                        <p>by <a><strong>Maria Kate</strong></a>, 21.06.2016</p>
                        <a class="btn btn-primary ">Read more</a>
                    </div>
                    <!--/Second column-->

                </div>
                <!--/Third row-->

            </section>
            <!--/Section: Blog v.1-->

            <hr class="between-sections">

            <!--Section: Blog v.2-->
            <section class="section extra-margins text-center">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Blog listing v.2</h1>
                <!--Section sescription-->
                <p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

                <!--First row-->
                <div class="row">

                    <!--First column-->
                    <div class="col-md-4 mb-r wow fadeInUp" data-wow-delay="0.2s">
                        <!--Featured image-->
                        <div class="view overlay hm-white-slight mb-3">
                            <img src="https://mdbootstrap.com/images/regular/people/img%20(51).jpg" >
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>

                        <!--Excerpt-->
                        <h5 class="blue-text"><i class="fa fa-map "></i>Adventure</h5>
                        <h4>Life travel - 2 weeks in Amazon Jungle.</h4>
                        <p>by <a><strong>John Doe</strong></a>, 23.06.2016</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
                        <a class="btn btn-primary ">Read more</a>
                    </div>
                    <!--/First column-->

                    <hr class="p-col">

                    <!--Second column-->
                    <div class="col-md-4 mb-r wow fadeInUp" data-wow-delay="0.3s">
                        <!--Featured image-->
                        <div class="view overlay hm-white-slight mb-3">
                            <img src="https://mdbootstrap.com/images/regular/people/img%20(59).jpg" >
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>

                        <!--Excerpt-->
                        <h5 class="red-text"><i class="fa fa-heart "></i>Friendship</h5>
                        <h4>6 ideas for journey with your friend in summer.</h4>
                        <p>by <a><strong>Maria Kate</strong></a>, 22.06.2016</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
                        <a class="btn btn-primary ">Read more</a>
                    </div>
                    <!--/Second column-->

                    <hr class="p-col">

                    <!--Third column-->
                    <div class="col-md-4 mb-r wow fadeInUp" data-wow-delay="0.4s">
                        <!--Featured image-->
                        <div class="view overlay hm-white-slight mb-3">
                            <img src="https://mdbootstrap.com/images/regular/people/img%20(66).jpg" >
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>

                        <!--Excerpt-->
                        <h5 class="teal-text "><i class="fa fa-fire "></i>Animals</h5>
                        <h4>You're the best friend for your dog.</h4>
                        <p>by <a><strong>John Doe</strong></a>, 21.06.2016</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
                        <a class="btn btn-primary ">Read more</a>
                    </div>
                    <!--/Third column-->

                </div>
                <!--/First row-->

            </section>
            <!--/Section: Blog v.2-->

            <hr class="between-sections">

            <!--Section: Blog v.3-->
            <section class="section extra-margins">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Blog listing v.3</h1>
                <!--Section sescription-->
                <p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

                <!--First row-->
                <div class="row">

                    <!--First column-->
                    <div class="col-md-5 mb-r wow fadeIn" data-wow-delay="0.3s">
                        <!--Featured image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/regular/city/img%20(24).jpg">
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>
                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-7 mb-r wow fadeIn" data-wow-delay="0.3s">
                        <!--Excerpt-->
                        <h5 class="teal-text "><i class="fa fa-money "></i>Business</h5>
                        <h4>Top 5 polish technology startups.</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
                        <p>by <a><strong>John Doe</strong></a>, 23.06.2016</p>
                        <a class="btn btn-primary ">Read more</a>
                    </div>
                    <!--/Second column-->

                </div>
                <!--/First row-->

                <hr>

                <!--Second row-->
                <div class="row">

                    <!--First column-->
                    <div class="col-md-5 mb-r wow fadeIn" data-wow-delay="0.3s">
                        <!--Featured image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/regular/city/img%20(25).jpg">
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>
                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-7 mb-r wow fadeIn" data-wow-delay="0.3s">
                        <!--Excerpt-->
                        <h5 class="blue-text"><i class="fa fa-map "></i>Travels</h5>
                        <h4>6 reasons why you need to visit San Francisco.</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
                        <p>by <a><strong>Maria Kate</strong></a>, 22.06.2016</p>
                        <a class="btn btn-primary ">Read more</a>
                    </div>
                    <!--/Second column-->

                </div>
                <!--/Second row-->

                <hr>

                <!--Third row-->
                <div class="row">

                    <!--First column-->
                    <div class="col-md-5 mb-r wow fadeIn" data-wow-delay="0.3s">
                        <!--Featured image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/regular/city/img%20(26).jpg">
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>
                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-7 mb-r wow fadeIn" data-wow-delay="0.3s">
                        <!--Excerpt-->
                        <h5 class="red-text "><i class="fa fa-fire "></i>Lifestyle</h5>
                        <h4>Dubai - is this city of dreams?</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
                        <p>by <a><strong>John Doe</strong></a>, 21.06.2016</p>
                        <a class="btn btn-primary ">Read more</a>
                    </div>
                    <!--/Second column-->

                </div>
                <!--/Third row-->

            </section>
            <!--/Section: Blog v.3-->

        </div>
    </main>
    <!--/Main layout-->
    
    <!--Footer-->
    <footer class="page-footer center-on-small-only">

        <!--Footer Links-->
        <div class="container-fluid">
            <div class="row wow fadeIn" data-wow-delay="0.3s">

                <!--First column-->
                <div class="col-md-3 offset-md-1">
                    <h5 class="title">Footer Content</h5>
                    <p>Here you can use rows and columns here to organize your footer content.</p>
                </div>
                <!--/.First column-->

                <hr class="hidden-md-up">

                <!--Second column-->
                <div class="col-md-2 offset-md-1">
                    <h5 class="title">Links</h5>
                    <ul>
                        <li><a href="#!">Link 1</a></li>
                        <li><a href="#!">Link 2</a></li>
                        <li><a href="#!">Link 3</a></li>
                        <li><a href="#!">Link 4</a></li>
                    </ul>
                </div>
                <!--/.Second column-->

                <hr class="hidden-md-up">

                <!--Third column-->
                <div class="col-md-2">
                    <h5 class="title">Links</h5>
                    <ul>
                        <li><a href="#!">Link 1</a></li>
                        <li><a href="#!">Link 2</a></li>
                        <li><a href="#!">Link 3</a></li>
                        <li><a href="#!">Link 4</a></li>
                    </ul>
                </div>
                <!--/.Third column-->

                <hr class="hidden-md-up">

                <!--Fourth column-->
                <div class="col-md-2">
                    <h5 class="title">Links</h5>
                    <ul>
                        <li><a href="#!">Link 1</a></li>
                        <li><a href="#!">Link 2</a></li>
                        <li><a href="#!">Link 3</a></li>
                        <li><a href="#!">Link 4</a></li>
                    </ul>
                </div>
                <!--/.Fourth column-->

            </div>
        </div>
        <!--/.Footer Links-->

        <hr>

        <!--Call to action-->
        <div class="call-to-action wow fadeIn" data-wow-delay="0.3s">
            <ul>
                <li>
                    <h5>Register for free</h5></li>
                <li><a href="" class="btn btn-danger">Sign up!</a></li>
            </ul>
        </div>
        <!--/.Call to action-->

        <hr>

        <!--Social buttons-->
        <div class="social-section wow fadeIn" data-wow-delay="0.3s">
            <ul>
                <li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                <li><a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                <li><a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                <li><a href="https://pl.linkedin.com/in/dawid-adach-97435534/pl" target="_blank" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                <li><a href="https://pl.pinterest.com/materialdesignf/" target="_blank" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                <li><a href="https://www.instagram.com/material_design_for_bootstrap/" target="_blank" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
            </ul>
        </div>
        <!--/.Social buttons-->

        <!--Copyright-->
        <div class="footer-copyright">
            <div class="container-fluid">
                © 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>

            </div>
        </div>
        <!--/.Copyright-->

    </footer>
    <!--/.Footer-->


    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>

    <!-- Tooltips -->
    <script type="text/javascript" src="../../../js/tether.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="../../../js/bootstrap.min.js"></script>

    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="../../../js/mdb.min.js"></script>

    <script>
        // SideNav init
        $(".button-collapse").sideNav();
        var el = document.querySelector('.custom-scrollbar');
        Ps.initialize(el);
    </script>

    <script>
        new WOW().init();
    </script>

</body>

</html>