<!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">

    <style>
    
        /* Carousel and pictures */
        .view:not(.hm-zoom) {
            overflow:visible;
        }
    
    </style>
    
</head>

<body class="fixed-sn mdb-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">
                    <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
                </div>
            </li>
            <!--/. Logo -->
            <!--Social-->
            <li>
                <ul class="social">
                    <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
                    <li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
                    <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
                    <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
                </ul>
            </li>
            <!--/Social-->
            <!--Search Form-->
            <li>
                <form class="search-form" role="search">
                    <div class="form-group waves-light">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                </form>
            </li>
            <!--/.Search Form-->
            <!-- Side navigation links -->
            <ul class="collapsible collapsible-accordion">
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-futbol-o"></i> Sports<i class="fa fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#" class="waves-effect">Football</a>
                            </li>
                            <li><a href="#" class="waves-effect">Volleyball</a>
                            </li>
                            <li><a href="#" class="waves-effect">Tennis</a>
                            </li>
                            <li><a href="#" class="waves-effect">Rugby</a>
                            </li>
                            <li><a href="#" class="waves-effect">Golf</a>
                            </li>
                            <li><a href="#" class="waves-effect">Athletics</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-line-chart"></i> Football scores<i class="fa fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#" class="waves-effect">Premier league</a>
                            </li>
                            <li><a href="#" class="waves-effect">FA Cup</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-film"></i> Audio and Video<i class="fa fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#" class="waves-effect">The newest</a>
                            </li>
                            <li><a href="#" class="waves-effect">Archive</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tv"></i> Features<i class="fa fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#" class="waves-effect">Formula 1</a>
                            </li>
                            <li><a href="#" class="waves-effect">Cycling</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-newspaper-o"></i> England News<i class="fa fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#" class="waves-effect">English Rugby</a>
                            </li>
                            <li><a href="#" class="waves-effect">Country Cricket</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-thumbs-o-up"></i> Subscribe<i class="fa fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#" class="waves-effect">Newsletter</a>
                            </li>
                            <li><a href="#" class="waves-effect">Write to us!</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!--/. 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 Magazine Homepage</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" href="#" id="navbarDropdownMenuLink" 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-menu-right" aria-labelledby="navbarDropdownMenuLink">
                        <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: Main carousel-->
            <section>
                <div class="row">
                    <div class="col-md-12">

                        <!--Carousel Wrapper-->
                        <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
                            <!--Indicators-->
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-example-2" data-slide-to="1"></li>
                                <li data-target="#carousel-example-2" data-slide-to="2"></li>
                            </ol>
                            <!--/.Indicators-->

                            <!--Slides-->
                            <div class="carousel-inner" role="listbox">
                                <!--First slide-->
                                <div class="carousel-item active">
                                    <!--Mask color-->
                                    <div class="view hm-black-slight">
                                        <img src="https://mdbootstrap.com/images/slides/slide%20(28).jpg" class="img-fluid" alt="">
                                        <div class="full-bg-img">
                                        </div>
                                    </div>
                                    <!--Caption-->
                                    <div class="carousel-caption">
                                        <div class="animated fadeInDown">
                                            <h3 class="h3-responsive">American Football</h3>
                                            <p>Monday's match between Chicago Bears and Houston Texans</p>
                                        </div>
                                    </div>
                                    <!--Caption-->
                                </div>
                                <!--/First slide-->

                                <!--Second slide-->
                                <div class="carousel-item">
                                    <!--Mask color-->
                                    <div class="view hm-black-strong">
                                        <img src="https://mdbootstrap.com/images/slides/slide%20(29).jpg" class="img-fluid" alt="">
                                        <div class="full-bg-img">
                                        </div>
                                    </div>
                                    <!--Caption-->
                                    <div class="carousel-caption">
                                        <div class="animated fadeInDown">
                                            <h3 class="h3-responsive">Fashion & Lfestyle</h3>
                                            <p>Check out the most fashionable models of jeans this summer</p>
                                        </div>
                                    </div>
                                    <!--Caption-->
                                </div>
                                <!--/Second slide-->

                                <!--Third slide-->
                                <div class="carousel-item">
                                    <!--Mask color-->
                                    <div class="view hm-black-light">
                                        <img src="https://mdbootstrap.com/images/slides/slide%20(30).jpg" class="img-fluid" alt="">
                                        <div class="full-bg-img">
                                        </div>
                                    </div>
                                    <!--Caption-->
                                    <div class="carousel-caption">
                                        <div class="animated fadeInDown">
                                            <h3 class="h3-responsive">Parenting</h3>
                                            <p>Top 5 ideas for spending Mother's Day with your kids</p>
                                        </div>
                                    </div>
                                    <!--Caption-->
                                </div>
                                <!--/Third slide-->
                            </div>
                            <!--/.Slides-->

                            <!--Controls-->
                            <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                            <!--/.Controls-->
                        </div>
                        <!--/.Carousel Wrapper-->

                    </div>
                </div>
            </section>
            <!--/Section: Main carousel-->

            <div class="divider-new">
                <h2 class="h2-responsive">What's new?</h2>
            </div>

            <!--Section: Magazine v.1-->
            <section class="section magazine-section">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Magazine newsfeed v.1</h1>

                <!--Section description-->
                <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-6">

                        <!--Featured news-->
                        <div class="single-news wow fadeInLeft" data-wow-delay="0.3s">

                            <!--Image-->
                            <div class="view overlay hm-white-slight">
                                <img src="https://mdbootstrap.com/images/regular/city/img%20(6).jpg">
                                <a>
                                    <div class="mask"></div>
                                </a>
                            </div>

                            <!--Excerpt-->
                            <div class="news-data">
                                <h5 class="teal-text"><i class="fa fa-mortar-board"></i> Education</h5>
                                <p><strong><i class="fa fa-clock-o"></i> 20.06.2016</strong></p>
                            </div>
                            <h3><a>Top 5 Universities in New York</a></h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti provident eius consequuntur perspiciatis quis cupiditate ratione at perferendis, cum, iusto dolores, omnis obcaecati alias reprehenderit neque vero culpa ab
                                voluptatibus!
                            </p>

                        </div>
                        <!--/Featured news-->

                        <!--Small news-->
                        <div class="single-news wow fadeInUp" data-wow-delay="0.4s">

                            <div class="row">
                                <div class="col-md-3">

                                    <!--Image-->
                                    <div class="view overlay hm-white-slight">
                                        <img src="https://mdbootstrap.com/images/regular/city/img%20(23).jpg">
                                        <a>
                                            <div class="mask"></div>
                                        </a>
                                    </div>
                                </div>

                                <!--Excerpt-->
                                <div class="col-md-9">
                                    <p><strong>19.06.2016</strong></p>
                                    <a>Course Structure & Entry Requirements.
                                    <i class="fa fa-angle-right"></i>
                                </a>
                                </div>

                            </div>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news wow fadeInUp" data-wow-delay="0.5s">

                            <div class="row">
                                <div class="col-md-3">

                                    <!--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>

                                <!--Excerpt-->
                                <div class="col-md-9">
                                    <p><strong>18.06.2016</strong></p>
                                    <a>World University Rankings 2015/2016.
                                    <i class="fa fa-angle-right"></i>
                                </a>
                                </div>

                            </div>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news wow fadeInUp" data-wow-delay="0.6s">

                            <div class="row">
                                <div class="col-md-3">

                                    <!--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>

                                <!--Excerpt-->
                                <div class="col-md-9">
                                    <p><strong>17.06.2016</strong></p>
                                    <a>See how to cope on university campus.
                                    <i class="fa fa-angle-right"></i>
                                </a>
                                </div>

                            </div>
                        </div>
                        <!--/Small news-->

                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-6">

                        <!--Featured news-->
                        <div class="single-news wow fadeInRight" data-wow-delay="0.3s">

                            <!--Image-->
                            <div class="view overlay hm-white-slight">
                                <img src="https://mdbootstrap.com/images/regular/city/img%20(22).jpg">
                                <a>
                                    <div class="mask"></div>
                                </a>
                            </div>

                            <!--Excerpt-->
                            <div class="news-data">
                                <h5 class="red-text"><i class="fa fa-money"></i> Business</h5>
                                <p><strong><i class="fa fa-clock-o"></i> 20.06.2016</strong></p>
                            </div>

                            <h3><a>How to start investing?</a></h3>

                            <p>Sed ut perspiciatis unde voluptatem 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.
                            </p>

                        </div>
                        <!--/Featured news-->

                        <!--Small news-->
                        <div class="single-news wow fadeInUp" data-wow-delay="0.4s">

                            <div class="row">
                                <div class="col-md-3">

                                    <!--Image-->
                                    <div class="view overlay hm-white-slight">
                                        <img src="https://mdbootstrap.com/images/regular/city/img%20(1).jpg">
                                        <a>
                                            <div class="mask"></div>
                                        </a>
                                    </div>
                                </div>

                                <!--Excerpt-->
                                <div class="col-md-9">
                                    <p><strong>19.06.2016</strong></p>
                                    <a>Find the best office in Manhattan.
                                    <i class="fa fa-angle-right"></i>
                                </a>
                                </div>

                            </div>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news wow fadeInUp" data-wow-delay="0.5s">

                            <div class="row">
                                <div class="col-md-3">

                                    <!--Image-->
                                    <div class="view overlay hm-white-slight">
                                        <img src="https://mdbootstrap.com/images/regular/city/img%20(13).jpg">
                                        <a>
                                            <div class="mask"></div>
                                        </a>
                                    </div>
                                </div>

                                <!--Excerpt-->
                                <div class="col-md-9">
                                    <p><strong>18.06.2016</strong></p>
                                    <a>Top 6 startups from NY.
                                    <i class="fa fa-angle-right"></i>
                                </a>
                                </div>

                            </div>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news wow fadeInUp" data-wow-delay="0.6s">

                            <div class="row">
                                <div class="col-md-3">

                                    <!--Image-->
                                    <div class="view overlay hm-white-slight">
                                        <img src="https://mdbootstrap.com/images/regular/city/img%20(14).jpg">
                                        <a>
                                            <div class="mask"></div>
                                        </a>
                                    </div>
                                </div>

                                <!--Excerpt-->
                                <div class="col-md-9">
                                    <p><strong>17.06.2016</strong></p>
                                    <a>How to choose a bank with the best offer?
                                    <i class="fa fa-angle-right"></i>
                                </a>
                                </div>

                            </div>
                        </div>
                        <!--/Small news-->

                    </div>
                    <!--/Second column-->

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

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

            <hr class="between-sections">

            <!--Section: Magazine v.2-->
            <section class="section magazine-section">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Magazine newsfeed 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-6">

                        <!--Featured news-->
                        <div class="single-news wow fadeInDown" data-wow-delay="0.2s">

                            <!--Image-->
                            <div class="view overlay hm-white-slight">
                                <img src="https://mdbootstrap.com/images/slides/slide%20(7).jpg">
                                <a>
                                    <div class="mask"></div>
                                </a>
                            </div>

                            <!--Excerpt-->
                            <div class="news-data">
                                <h5 class="blue-text"><i class="fa fa-car"></i> Travels</h5>
                                <p><strong><i class="fa fa-clock-o"></i> 27.06.2016</strong></p>
                            </div>

                            <h3><a>Top 10 directions on holiday by car</a></h3>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti provident eius consequuntur perspiciatis quis cupiditate ratione at perferendis, cum, iusto dolores, omnis obcaecati alias reprehenderit neque vero culpa ab
                                voluptatibus!
                            </p>

                        </div>
                        <!--/Featured news-->

                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-6">

                        <!--Small news-->
                        <div class="single-news wow fadeInDown" data-wow-delay="0.6s">

                            <div class="row">
                                <div class="col-md-3">

                                    <!--Image-->
                                    <div class="view overlay hm-white-slight">
                                        <img src="https://mdbootstrap.com/images/regular/nature/img%20(13).jpg">
                                        <a>
                                            <div class="mask"></div>
                                        </a>
                                    </div>
                                </div>

                                <!--Excerpt-->
                                <div class="col-md-9">
                                    <p><strong>26.06.2016</strong></p>
                                    <a>How to pack a suitcase on holidays?
                                    <i class="fa fa-angle-right"></i>
                                </a>
                                </div>

                            </div>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news wow fadeInDown" data-wow-delay="0.5s">

                            <div class="row">
                                <div class="col-md-3">

                                    <!--Image-->
                                    <div class="view overlay hm-white-slight">
                                        <img src="https://mdbootstrap.com/images/regular/food/img%20(2).jpg">
                                        <a>
                                            <div class="mask"></div>
                                        </a>
                                    </div>
                                </div>

                                <!--Excerpt-->
                                <div class="col-md-9">
                                    <p><strong>25.06.2016</strong></p>
                                    <a>Top 5 restaurants in Madrid.
                                    <i class="fa fa-angle-right"></i>
                                </a>
                                </div>

                            </div>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news wow fadeInDown" data-wow-delay="0.4s">

                            <div class="row">
                                <div class="col-md-3">

                                    <!--Image-->
                                    <div class="view overlay hm-white-slight">
                                        <img src="https://mdbootstrap.com/images/regular/city/img%20(13).jpg">
                                        <a>
                                            <div class="mask"></div>
                                        </a>
                                    </div>
                                </div>

                                <!--Excerpt-->
                                <div class="col-md-9">
                                    <p><strong>24.06.2016</strong></p>
                                    <a>How to protect against theft?
                                    <i class="fa fa-angle-right"></i>
                                </a>
                                </div>

                            </div>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news wow fadeInDown" data-wow-delay="0.3s">

                            <div class="row">
                                <div class="col-md-3">

                                    <!--Image-->
                                    <div class="view overlay hm-white-slight">
                                        <img src="https://mdbootstrap.com/images/regular/nature/img%20(38).jpg">
                                        <a>
                                            <div class="mask"></div>
                                        </a>
                                    </div>
                                </div>

                                <!--Excerpt-->
                                <div class="col-md-9">
                                    <p><strong>23.06.2016</strong></p>
                                    <a>Where to go for the weekend?
                                    <i class="fa fa-angle-right"></i>
                                </a>
                                </div>

                            </div>
                        </div>
                        <!--/Small news-->

                    </div>
                    <!--/Second column-->

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

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

            <hr class="between-sections">

            <!--Section: Magazine v.3-->
            <section class="section magazine-section multi-columns">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Magazine newsfeed 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-lg-4 col-md-6 mb-r wow fadeInRight" data-wow-delay="0.3s">

                        <!--Featured news-->
                        <div class="single-news">

                            <!--Image-->
                            <h5 class="orange-text"><i class="fa fa-coffee"></i> Health</h5>

                            <div class="view overlay hm-white-slight">
                                <img src="https://mdbootstrap.com/images/regular/people/img%20(8).jpg">
                                <a>
                                    <div class="mask"></div>
                                </a>
                            </div>
                            <a><strong>6 Big Myths About Hydration</strong>
                                    <i class="fa fa-angle-right"></i>
                                </a>

                        </div>
                        <!--/Featured news-->

                        <!--Small news-->
                        <div class="single-news">
                            <a>24 Food Swaps That Slash Calories.
                            <i class="fa fa-angle-right"></i>
                        </a>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news">
                            <a>How to Make a Beet Cocktail?
                            <i class="fa fa-angle-right"></i>
                        </a>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news">
                            <a>8 Sneaky Reasons You're Always Hungry.
                            <i class="fa fa-angle-right"></i>
                        </a>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news">
                            <a>5 Pressure Cooker Recipes You Need to Try.
                            <i class="fa fa-angle-right"></i>
                        </a>
                        </div>
                        <!--/Small news-->

                    </div>
                    <!--/First column-->

                    <hr>

                    <!--Second column-->
                    <div class="col-lg-4 col-md-6 mb-r wow fadeInRight" data-wow-delay="0.4s">

                        <!--Featured news-->
                        <div class="single-news">

                            <!--Image-->
                            <h5 class="indigo-text"><i class="fa fa-camera"></i> Lifestyle</h5>

                            <div class="view overlay hm-white-slight">
                                <img src="https://mdbootstrap.com/images/regular/people/img%20(2).jpg">
                                <a>
                                    <div class="mask"></div>
                                </a>
                            </div>

                            <a><strong>Top 5 places for photographs</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>

                        </div>
                        <!--/Featured news-->

                        <!--Small news-->
                        <div class="single-news">
                            <a>Trends in the blogosphere for 2016.
                            <i class="fa fa-angle-right"></i>
                        </a>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news">
                            <a>Where you eat the best lunch in Warsaw?
                            <i class="fa fa-angle-right"></i>
                        </a>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news">
                            <a>What camera take for holidays?
                            <i class="fa fa-angle-right"></i>
                        </a>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news">
                            <a>Why you should visit Lisbon?
                            <i class="fa fa-angle-right"></i>
                        </a>
                        </div>
                        <!--/Small news-->

                    </div>
                    <!--/Second column-->

                    <hr>

                    <!--Third column-->
                    <div class="col-lg-4 col-md-6 mb-r wow fadeInRight" data-wow-delay="0.5s">

                        <!--Featured news-->
                        <div class="single-news">

                            <!--Image-->
                            <h5 class="pink-text"><i class="fa fa-heart"></i> Fashion</h5>

                            <div class="view overlay hm-white-slight">
                                <img src="https://mdbootstrap.com/images/regular/people/img%20(67).jpg">
                                <a>
                                    <div class="mask"></div>
                                </a>
                            </div>

                            <a><strong>Choose best swimsuit for summer</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>

                        </div>
                        <!--/Featured news-->

                        <!--Small news-->
                        <div class="single-news">
                            <a>Top models in Poland.
                            <i class="fa fa-angle-right"></i>
                        </a>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news">
                            <a>London Fashion Week - see online.
                            <i class="fa fa-angle-right"></i>
                        </a>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news">
                            <a>Best bags designers in Italy.
                            <i class="fa fa-angle-right"></i>
                        </a>
                        </div>
                        <!--/Small news-->

                        <!--Small news-->
                        <div class="single-news">
                            <a>What colors fit to blonde girl?.
                            <i class="fa fa-angle-right"></i>
                        </a>
                        </div>
                        <!--/Small news-->

                    </div>
                    <!--/Third column-->

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

            </section>
            <!--/Section: Magazine 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">
                © 2017 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>