Test template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,400italic'/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <link rel="stylesheet" type="text/css" href="css/ekko-lightbox.min.css"/>
<!--    <link rel="stylesheet" type="text/css" href="css/ekko-lightbox-dark.css"> -->
  <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css"/>
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <title>pebn</title>
</head>

<body>

<header id="top">

	<div class="container-fluid">

        <div class="row">

            <div class="col-lg-4 col-md-12 site-title">
                <h1>Sigma</h1>
                <h2>Image Gallery built on Bootstrap 4.0</h2>

            </div>

            <div class="col-lg-8 col-md-12 main-menu">

                <nav class="navbar navbar-light">
                  <ul class="nav navbar-nav single-page-nav">
                    <li class="nav-item">
                      <a class="nav-link" href="#home">Home <!-- <span class="sr-only">(current)</span> --></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#gallery">Gallery</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#contact">Contact</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link external" href="http://www.google.com" target="_parent">External</a>
                    </li>
                  </ul>
                </nav>

            </div>

        </div>

      <div class='row'/>
        <div class='col-md-12'/>
            <hr class='sigma-hr'/>
            </div>


</header>

<section id="home">

	<div class="container-fluid">

        <div class="row sigma-home single-page-nav">

        	<div class="col-md-offset-2 col-lg-offset-3 col-lg-6 col-md-8 col-sm-12 text-center">
            	<h1>Bootstrap 4.0 Theme</h1>
            	<p>Sigma is free Bootstrap 4 (alpha 2) theme designed for a metro-style image grid gallery.
                Download, modify and use this layout for your websites.</p>
                <a href="#gallery" class="btn btn-danger sigma-start">Our Gallery</a>
                <a href="#about" class="btn btn-success sigma-start">Learn More</a>
            </div>

        </div>

        <div class="row">
        	<div class="sigma-content col-lg-3 col-md-6 sigma-bg-lightgray text-center">
            	<span class="sigma-icon fa fa-power-off"></span>
                <h2>Design</h2>
            	<p>Praesent lorem dui, suscipit eu volutpat id, sollicitudin ut mi. Praesent ornare massa vehicula.</p>
            </div>
            <div class="sigma-content col-lg-3 col-md-6 sigma-bg-gray text-center">
            	<span class="sigma-icon fa fa-bolt"></span>
            	<h2>Implement</h2>
            	<p>Praesent lorem dui, suscipit eu volutpat id, sollicitudin ut mi. Praesent ornare massa vehicula.</p>
            </div>
            <div class="sigma-content col-lg-3 col-md-6 sigma-bg-darkgray text-center">
            	<span class="sigma-icon fa fa-thumbs-up"></span>
            	<h2>Enhance</h2>
            	<p>Praesent lorem dui, suscipit eu volutpat id, sollicitudin ut mi. Praesent ornare massa vehicula.</p>
            </div>
            <div class="sigma-content col-lg-3 col-md-6 sigma-bg-black text-center">
            	<span class="sigma-icon fa fa-bar-chart"></span>
            	<h2>Monitor</h2>
            	<p>Praesent lorem dui, suscipit eu volutpat id, sollicitudin ut mi. Praesent ornare massa vehicula.</p>
            </div>
        </div>

	</div>

</section>

<section id="gallery">

	<div class="container-fluid">

        <div class="row">

			<a href="images/tm-sigma-01.jpg" data-toggle="lightbox" data-gallery="sigma-gallery" data-title="Image Title 01">
            <img src='images/tm-sigma-01.jpg" alt="Image 1" class="img-fluid sigmapad col-lg-4 col-md-6 col-sm-6'/></a>

			<a href="images/tm-sigma-02.jpg" data-toggle="lightbox" data-gallery="sigma-gallery" data-title="Image Title 02"
            	data-footer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non nunc dictum.">
            <img src='images/tm-sigma-02.jpg" alt="Image 2" class="img-fluid sigmapad col-lg-4 col-md-6 col-sm-6'/></a>

        </div>

    </div>

</section>

<section id="about">

	<div class="container-fluid">

    	<div class="row sigma-section-header">
        	<div class="col-md-offset-2 col-lg-offset-3 col-lg-6 col-md-8 col-sm-12 text-center">
        		<h1>About Us</h1>
                <p>Sed elit elit, dictum eu turpis non, fringilla efficitur ipsum. Phasellus ultrices, nunc et tempus porta, tellus purus elementum ex, volutpat lobortis orci dolor in tortor.</p>
            </div>
        </div>

        <div class="row single-page-nav">

        	<div class="sigma-content col-lg-4 col-md-6 sigma-bg-lightgray">
            	<h2>01 Design</h2>
            	<p>Praesent lorem dui, suscipit eu volutpat id, sollicitudin ut mi. Praesent ornare massa vehicula.</p>
            </div>
            <div class="sigma-content col-lg-4 col-md-6 sigma-bg-gray">
            	<h2>02 Coding</h2>
            	<p>Praesent lorem dui, suscipit eu volutpat id, sollicitudin ut mi. Praesent ornare massa vehicula.</p>
            </div>
            <div class="sigma-content col-lg-4 col-md-12 sigma-bg-darkgray">
            	<h2>03 Mobile Ready</h2>
            	<p>Praesent lorem dui, suscipit eu volutpat id, sollicitudin ut mi. Praesent ornare massa vehicula.</p>
            </div>

        	<div class="sigma-content col-lg-6 col-md-6 sigma-bg-pink">
            	<h2>Left Column</h2>
            	<p>Praesent lorem dui, suscipit eu volutpat id, sollicitudin ut mi. Praesent ornare massa vehicula.</p>
                <a href="#about" class="btn btn-primary btn-lg">Read Detail</a>
            </div>
            <div class="sigma-content col-lg-6 col-md-6 sigma-bg-lightblue">
            	<h2>Right Column</h2>
            	<p>Praesent lorem dui, suscipit eu volutpat id, sollicitudin ut mi. Praesent ornare massa vehicula.</p>
                <a href="#contact" class="btn btn-danger btn-lg">Learn More</a>
            </div>

        	<div class="sigma-content col-lg-3 col-md-6 sigma-bg-red">
            	<h2>Our Team</h2>
            	<p>Praesent lorem dui, suscipit eu volutpat id, sollicitudin ut mi. Praesent ornare massa vehicula.</p>
            </div>
            <div class="sigma-content col-lg-3 col-md-6 sigma-bg-blue">
            	<h2>History</h2>
            	<p>Praesent lorem dui, suscipit eu volutpat id, sollicitudin ut mi. Praesent ornare massa vehicula.</p>
            </div>
            <div class="sigma-content col-lg-3 col-md-6 sigma-bg-green">
            	<h2>Management</h2>
            	<p>Praesent lorem dui, suscipit eu volutpat id, sollicitudin ut mi. Praesent ornare massa vehicula.</p>
            </div>
            <div class="sigma-content col-lg-3 col-md-6 sigma-bg-yellow">
            	<h2>Career</h2>
            	<p>Praesent lorem dui, suscipit eu volutpat id, sollicitudin ut mi. Praesent ornare massa vehicula.</p>
            </div>

        </div>

	</div>

</section>

<section id="contact">

	<div class="container-fluid">

        <div class="row sigma-section-header">
        	<div class="col-md-offset-2 col-lg-offset-3 col-lg-6 col-md-8 col-sm-12 text-center">
        		<h1>Contact</h1>
                <p>You may <a rel="nofollow" href="http://www.templatemo.com/contact" target="_parent">contact</a> templatemo if you have any question. Suspendisse dolor purus, malesuada ut luctus quis, consectetur vel ante. Integer a pulvinar orci.</p>
            </div>
        </div>

  </div>

 </section>

<footer>

  <div class='container-fluid'>

      <div class='row'>
          <div class='col-md-12'/>
              <hr class='sigma-hr'/>
            </div>
        </div>

        <div class="row">
        	<div class="sigma-copyright col-lg-8">
            	<p>Copyright © 2016 Sigma Bootstrap 4 Theme

                    | design: <a rel="nofollow" href="http://www.templatemo.com" target="_parent">templatemo</a></p>
            </div>

            <div class="sigma-copyright col-lg-4 single-page-nav text-right">
            	<p><a href="#top">Go to top</a></p>
            </div>
        </div>


</footer>

		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
        <script src="js/ekko-lightbox.min.js"></script>
        <script src="js/jquery.singlePageNav.min.js"></script>
        <script>

            // Prevent console.log from generating errors in IE for the purposes of the demo
            if ( ! window.console ) console = { log: function(){} };

            // The actual plugin
            $('.single-page-nav').singlePageNav({
                offset: $('.single-page-nav').outerHeight(),
                filter: ':not(.external)',
                updateHash: true,
                beforeStart: function() {
                    console.log('begin scrolling');
                },
                onComplete: function() {
                    console.log('done scrolling');
                }
            });

			$(document).ready(function ($) {

				// delegate calls to data-toggle="lightbox"
				$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
					event.preventDefault();
					return $(this).ekkoLightbox({
						always_show_close: true
					});
				});

			});

        </script>

</body>
</html>