<!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">
            <div class="row">

                <!--Post column-->
                <div class="col-md-8">

                    <!--Section: Post-->
                    <section class="section section-blog-fw">

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

                                <!--Post data-->
                                <div class="jumbotron wow fadeInUp" data-wow-delay="0.2s">
                                    <h2>How I've started my adventure with surfing?</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-->

                                <!--Post text-->
                                <div class="post-text">
                                    <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>
                                <!--/Post text-->

                                <hr>

                                <div class="text-center">
                                    <h3 class="h3-responsive">Do you want to share?</h3>
                                    <!--Facebook-->
                                    <a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a>
                                    <!--Twitter-->
                                    <a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a>
                                    <!--Google +-->
                                    <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>
                                </div>
                                
                            </div>
                            
                        </div>
                        <!--/First row-->
                        
                    </section>
                    <!--/Section: Post-->

                    <!--Section: About author-->
                    <section class="mb-4">
                        <!--Author box-->
                        <div class="author-box">
                            <!--Name-->
                            <h3 class="h3-responsive text-center">About author</h3>
                            <hr>
                            <div class="row">
                                <!--Avatar-->
                                <div class="col-12 col-sm-2">
                                    <img src="https://mdbootstrap.com/images/avatars/img%20(8).jpg" class="img-fluid rounded-circle z-depth-2">
                                </div>
                                <!--Author Data-->
                                <div class=" col-12 col-sm-10">
                                    <p><strong>Larry Smith</strong></p>
                                    <div class="personal-sm">
                                        <a class="email-ic"><i class="fa fa-home"> </i></a>
                                        <a class="fb-ic"><i class="fa fa-facebook"> </i></a>
                                        <a class="tw-ic"><i class="fa fa-twitter"> </i></a>
                                        <a class="gplus-ic"><i class="fa fa-google-plus"> </i></a>
                                        <a class="li-ic"><i class="fa fa-linkedin"> </i></a>
                                        <a class="email-ic"><i class="fa fa-envelope-o"> </i></a>
                                    </div>
                                    <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
                                    <p class="hidden-md-down">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint esse nulla quia quam veniam commodi dicta, iusto inventore. Voluptatum pariatur eveniet ea, officiis vitae praesentium beatae quas libero, esse facere.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!--/.Author box-->
                    </section>
                    <!--/Section: About author-->

                    <!--Section: Comments list-->
                    <section>
                        <div class="comments-list text-left">
                            <div class="section-heading">
                                <h3>Comments <span class="badge blue">3</span></h3>
                            </div>
                            <!--First row-->
                            <div class="row">
                                <!--Image column-->
                                <div class="col-sm-2 col-12">
                                    <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg">
                                </div>
                                <!--/.Image column-->
                                <!--Content column-->
                                <div class="col-sm-10 col-12">
                                    <a><h3 class="user-name">John Doe</h3></a>
                                    <div class="card-data">
                                        <ul>
                                            <li class="comment-date"><i class="fa fa-clock-o"></i> 05/10/2015</li>
                                        </ul>
                                    </div>
                                    <p class="comment-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
                                </div>
                                <!--/.Content column-->
                            </div>
                            <!--/.First row-->
                            <!--Second row-->
                            <div class="row">
                                <!--Image column-->
                                <div class="col-sm-2 col-12">
                                    <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg">
                                </div>
                                <!--/.Image column-->
                                <!--Content column-->
                                <div class="col-sm-10 col-12">
                                    <a><h3 class="user-name">Marta Tev</h3></a>
                                    <div class="card-data">
                                        <ul>
                                            <li class="comment-date"><i class="fa fa-clock-o"></i> 08/10/2015</li>
                                        </ul>
                                    </div>
                                    <p class="comment-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.</p>
                                </div>
                                <!--/.Content column-->
                            </div>
                            <!--/.Second row-->
                            <!--Third row-->
                            <div class="row">
                                <!--Image column-->
                                <div class="col-sm-2 col-12">
                                    <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg">
                                </div>
                                <!--/.Image column-->
                                <!--Content column-->
                                <div class="col-sm-10 col-12">
                                    <a><h3 class="user-name">Anna Maria</h3></a>
                                    <div class="card-data">
                                        <ul>
                                            <li class="comment-date"><i class="fa fa-clock-o"></i> 17/10/2015</li>
                                        </ul>
                                    </div>
                                    <p class="comment-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia.
                                    </p>
                                </div>
                                <!--/.Content column-->
                            </div>
                            <!--/.Third row-->
                        </div>
                    </section>
                    <!--/Section: Comments list-->

                    <hr class="between-sections">

                    <!--Section: Leave a reply (Logged In User) -->
                    <section>
                        <!--Leave a reply form-->
                        <div class="reply-form">
                            <h1 class="section-heading">Leave a reply </h1>
                            <p class="text-center">(Logged In User)</p>
                            <!--Third row-->
                            <div class="row">
                                <!--Image column-->
                                <div class="col-sm-2 col-12">
                                    <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg">
                                </div>
                                <!--/.Image column-->
                                <!--Content column-->
                                <div class="col-sm-10 col-12">
                                    <div class="md-form">
                                        <textarea type="text" id="form8" class="md-textarea"></textarea>
                                        <label for="form8">Your message</label>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button class="btn btn-primary">Submit</button>
                                </div>
                                <!--/.Content column-->
                            </div>
                            <!--/.Third row-->
                        </div>
                        <!--/.Leave a reply form-->
                    </section>
                    <!--/.Section: Leave a reply (Logged In User)-->

                    <hr class="between-sections">

                    <!--Section: Leave a reply (Not Logged In User)-->
                    <section>
                        <!--Leave a reply form-->
                        <div class="reply-form">
                            <h1 class="section-heading">Leave a reply </h1>
                            <p class="text-center">(Not Logged In User)</p>
                            <h4>Sign up with: <span>
                        <!--Facebook-->
                    <a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
                    <!--Twitter-->
                    <a type="button" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"></i></a>
                    <!--Google +-->
                    <a type="button" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"></i></a>

                    </span> <br><br>or:</h4>
                            <div class="text-left">
                                <div class="md-form">
                                    <i class="fa fa-user prefix"></i>
                                    <input type="text" id="form22" class="form-control">
                                    <label for="form22">Your name</label>
                                </div>
                                <div class="md-form">
                                    <i class="fa fa-envelope prefix"></i>
                                    <input type="text" id="form32" class="form-control">
                                    <label for="form32">Your email</label>
                                </div>
                                <div class="md-form">
                                    <i class="fa fa-home prefix"></i>
                                    <input type="text" id="form33" class="form-control">
                                    <label for="form33">Your website</label>
                                </div>
                                <div class="md-form">
                                    <i class="fa fa-pencil prefix"></i>
                                    <textarea type="text" id="form18" class="md-textarea"></textarea>
                                    <label for="form18">Your message</label>
                                </div>
                                <div class="text-center">
                                    <button class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </div>
                        <!--/.Leave a reply form-->
                    </section>
                    <!--/Section: Leave a reply (Not Logged In User)-->

                </div>
                <!--/Post column-->

                <!--Right sidebar-->
                <div class="col-md-4">

                        <!--Section: Sidebar widget-->
                        <section>

                            <!--Card-->
                            <div class="card card-cascade wider">

                                <!--Card image-->
                                <div class="view overlay hm-white-slight wow fadeInDown" data-wow-delay="0.2s">
                                    <img src="https://mdbootstrap.com/images/regular/people/img%20(33).jpg" class="img-fluid" alt="">
                                    <a>
                                        <div class="mask"></div>
                                    </a>
                                </div>
                                <!--/.Card image-->

                                <!--Card content-->
                                <div class="card-block text-center wow fadeInDown">
                                    <!--Title-->
                                    <h4 class="card-title">How to travel cheaply?</h4>
                                    <!--Text-->
                                    <p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat sunt in culpa nulla pariatur.</p>
                                    <a class="btn btn-primary">Read more</a>
                                </div>
                                <!--/.Card content-->

                            </div>
                            <!--/.Card-->

                        </section>
                        <!--/Section: Sidebar widget-->

                    </div>
                <!--/Right sidebar-->
            </div>
        </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>