View file Shutter/html/home-gallery.html

File size: 11.75Kb
<!doctype html>


<html lang="en" class="no-js">
<head>
	<title>Shutter</title>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<link rel="stylesheet" href="css/shutter-assets.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

	<!-- Container -->
	<div id="container">
		<!-- Header
		    ================================================== -->
		<header class="clearfix default-header gal-style">

			<nav class="navbar navbar-expand-lg navbar-light">
				<div class="container-fluid">

					<a class="navbar-brand" href="index.html">
						<img src="images/logo-grey.png" alt="">
					</a>

					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>

					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav ml-auto toogle-menu active">
							<li><a class="active" href="index.html">Home</a>
								<ul class="dropdown">
									<li><a href="index.html">Home Default</a></li>
									<li><a href="home-full-border.html">Fullwidth Border</a></li>
									<li><a href="home-grid-fullmenu.html">Grid Full Menu</a></li>
									<li><a href="home-fullscreen.html">Fullscreen</a></li>
									<li><a href="home-masonry-leftmenu.html">Left Menu Masonry</a></li>
									<li><a href="home-video.html">Home Video</a></li>
									<li><a href="home-showcase.html">Showcase style</a></li>
									<li><a href="home-gallery.html">Gallery style</a></li>
									<li><a href="home-portrait.html">Portrait</a></li>
									<li><a href="home-onepage.html">One Page</a></li>
									<li><a href="home-album.html">Album</a></li>
								</ul>
							</li>
							<li><a href="about-us.html">About</a>
								<ul class="dropdown">
									<li><a href="about-me.html">About Me 1</a></li>
									<li><a href="about-me2.html">About Me 2</a></li>
									<li><a href="about-us.html">About Us</a></li>
								</ul>
							</li>
							<li><a href="#">Features</a>
								<ul class="dropdown">
									<li><a href="services.html">Services</a></li>
									<li><a href="comming-soon.html">Comming Soon</a></li>
									<li><a href="error-404.html">Error 404</a></li>
								</ul>
							</li>
							<li><a href="gallery-col2.html">Gallery</a>
								<ul class="dropdown">
									<li><a href="gallery-col2.html">Column 2</a></li>
									<li><a href="gallery-col3.html">Column 3</a></li>
									<li><a href="gallery-col4.html">Column 4</a></li>
									<li><a href="gallery-flowing.html">Flowing</a></li>
									<li><a href="gallery-fullgrid.html">Full Grid</a></li>
									<li><a href="gallery-fullscreen.html">Fullscreen</a></li>
									<li><a href="gallery-parallax.html">Parallax</a></li>
									<li><a href="gallery-pinterest.html">Pinterest</a></li>
									<li><a href="gallery-pinterest-full.html">Pinterest Full</a></li>
									<li><a href="gallery-split.html">Gallery Split</a></li>
									<li><a href="gallery-video.html">Gallery Video</a></li>
								</ul>
							</li>
							<li><a href="blog.html">Blog</a>
								<ul class="dropdown">
									<li><a href="blog.html">Blog Grid</a></li>
									<li><a href="blog-standard.html">Blog Standard</a></li>
									<li><a href="single-post.html">Single Post</a></li>
								</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
						<a href="#" class="toogle-link">
							<span></span>
							<span></span>
							<span></span>
						</a>
					</div>

				</div>
			</nav>

		</header>
		<!-- End Header -->

		<!-- gal-style div -->
		<div id="cbp-so-scroller" class="gal-style-section cbp-so-scroller">
			<div class="gal-style-box">

				<ul class="scroller-list">
					<li><a class="active" href="#post-1"></a></li>
					<li><a href="#post-2"></a></li>
					<li><a href="#post-3"></a></li>
					<li><a href="#post-4"></a></li>
					<li><a href="#post-5"></a></li>
				</ul>

				<section class="photo-post cbp-so-section" id="post-1">
					<div class="image-box cbp-so-side cbp-so-side-left">
						<img src="upload/home-gal/1.jpg" alt="">
					</div>
					<div class="content-post cbp-so-side cbp-so-side-right">
						<div class="inner-content">
							<h2>LIGHTNING IS WHAT MATTERS</h2>
							<ul class="tags-image">
								<li><a href="#">Nature</a></li>
								<li><a href="#">Green</a></li>
							</ul>
							<p>For quality results from any camera, the basics of photography still apply no matter how an image is captured. A tripod is always important if slow shutter speeds are needed and big telephoto lenses are used. Fast shutter speeds remain a key way to stop action, and f-stops continue to affect depth of field. The important parts of a scene still need to have the focus centered on them, and dramatic light always helps make for dramatic photos.</p>
							<a href="#" class="view-gal-link">View the Gallery <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
						</div>
					</div>
				</section>

				<section class="photo-post cbp-so-section" id="post-2">
					<div class="content-post cbp-so-side cbp-so-side-left">
						<div class="inner-content">
							<h2>WALK IN THE JUNGLE</h2>
							<ul class="tags-image">
								<li><a href="#">Nature</a></li>
								<li><a href="#">Green</a></li>
							</ul>
							<p>For quality results from any camera, the basics of photography still apply no matter how an image is captured. A tripod is always important if slow shutter speeds are needed and big telephoto lenses are used. Fast shutter speeds remain a key way to stop action, and f-stops continue to affect depth of field. The important parts of a scene still need to have the focus centered on them, and dramatic light always helps make for dramatic photos.</p>
							<a href="#" class="view-gal-link">View the Gallery <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
						</div>
					</div>
					<div class="image-box cbp-so-side cbp-so-side-right">
						<img src="upload/home-gal/2.jpg" alt="">
					</div>
				</section>

				<section class="photo-post cbp-so-section" id="post-3">
					<div class="image-box cbp-so-side cbp-so-side-left">
						<img src="upload/home-gal/3.jpg" alt="">
					</div>
					<div class="content-post cbp-so-side cbp-so-side-right">
						<div class="inner-content">
							<h2>VIVID COLORS AND NATURE</h2>
							<ul class="tags-image">
								<li><a href="#">People</a></li>
								<li><a href="#">Children</a></li>
							</ul>
							<p>For quality results from any camera, the basics of photography still apply no matter how an image is captured. A tripod is always important if slow shutter speeds are needed and big telephoto lenses are used. Fast shutter speeds remain a key way to stop action, and f-stops continue to affect depth of field. The important parts of a scene still need to have the focus centered on them, and dramatic light always helps make for dramatic photos.</p>
							<a href="#" class="view-gal-link">View the Gallery <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
						</div>
					</div>
				</section>

				<section class="photo-post cbp-so-section" id="post-4">
					<div class="content-post cbp-so-side cbp-so-side-left">
						<div class="inner-content">
							<h2>HAPPY, HAPYY...</h2>
							<ul class="tags-image">
								<li><a href="#">Nature</a></li>
								<li><a href="#">People</a></li>
							</ul>
							<p>For quality results from any camera, the basics of photography still apply no matter how an image is captured. A tripod is always important if slow shutter speeds are needed and big telephoto lenses are used. Fast shutter speeds remain a key way to stop action, and f-stops continue to affect depth of field. The important parts of a scene still need to have the focus centered on them, and dramatic light always helps make for dramatic photos.</p>
							<a href="#" class="view-gal-link">View the Gallery <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
						</div>
					</div>
					<div class="image-box cbp-so-side cbp-so-side-right">
						<img src="upload/home-gal/4.jpg" alt="">
					</div>
				</section>

				<section class="photo-post cbp-so-section" id="post-5">
					<div class="image-box cbp-so-side cbp-so-side-left">
						<img src="upload/home-gal/5.jpg" alt="">
					</div>
					<div class="content-post cbp-so-side cbp-so-side-right">
						<div class="inner-content">
							<h2>BEARD AND SEA GO TOGETHER</h2>
							<ul class="tags-image">
								<li><a href="#">People</a></li>
								<li><a href="#">Nature</a></li>
							</ul>
							<p>For quality results from any camera, the basics of photography still apply no matter how an image is captured. A tripod is always important if slow shutter speeds are needed and big telephoto lenses are used. Fast shutter speeds remain a key way to stop action, and f-stops continue to affect depth of field. The important parts of a scene still need to have the focus centered on them, and dramatic light always helps make for dramatic photos.</p>
							<a href="#" class="view-gal-link">View the Gallery <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
						</div>
					</div>
				</section>

			</div>
		</div>
		<!-- end gal-style div -->

		<!-- footer 
			================================================== -->
		<footer class="footer-with-instagram">
			<a class="go-top" href="#">
				<i class="fa fa-chevron-up"></i>
			</a>
			<div class="insta-widget">
				<h1>Latest Instagram Feed</h1>
				<ul class="instagram-list">
					<li><a href="#"><img src="upload/instagram/f1.jpg" alt=""></a></li>
					<li><a href="#"><img src="upload/instagram/f2.jpg" alt=""></a></li>
					<li><a href="#"><img src="upload/instagram/f3.jpg" alt=""></a></li>
					<li><a href="#"><img src="upload/instagram/f4.jpg" alt=""></a></li>
					<li><a href="#"><img src="upload/instagram/f5.jpg" alt=""></a></li>
					<li><a href="#"><img src="upload/instagram/f6.jpg" alt=""></a></li>
					<li><a href="#"><img src="upload/instagram/f7.jpg" alt=""></a></li>
					<li><a href="#"><img src="upload/instagram/f8.jpg" alt=""></a></li>
					<li><a href="#"><img src="upload/instagram/f9.jpg" alt=""></a></li>
					<li><a href="#"><img src="upload/instagram/f10.jpg" alt=""></a></li>
					<li><a href="#"><img src="upload/instagram/f11.jpg" alt=""></a></li>
					<li><a href="#"><img src="upload/instagram/f12.jpg" alt=""></a></li>
				</ul>
			</div>
			<div class="inner-footer">
				<div class="container">
					<div class="row">
						<div class="col-sm-6">
							<p class="copyright-line">All rights reserved 2018. Made with love and passion</p>
						</div>
						<div class="col-sm-6">
							<ul class="social-icons">
								<li><a class="facebook" href="#"><i class="fa fa-facebook-square"></i></a></li>
								<li><a class="twitter" href="#"><i class="fa fa-twitter-square"></i></a></li>
								<li><a class="pinterest" href="#"><i class="fa fa-pinterest-square"></i></a></li>
								<li><a class="youtube" href="#"><i class="fa fa-youtube-play"></i></a></li>
								<li><a class="vimeo" href="#"><i class="fa fa-vimeo-square"></i></a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>

		</footer>
		<!-- End footer -->

	</div>
	<!-- End Container -->

	<div class="preloader">
		<img alt="" src="images/loader.gif">
	</div>
	
	<script src="js/modernizr.custom.js"></script>
	<script src="js/shutter-plugins.min.js"></script>
	<script src="js/popper.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/classie.js"></script>
	<script src="js/cbpScroller.js"></script>
	<script src="js/script.js"></script>
	<script>
		new cbpScroller( document.getElementById( 'cbp-so-scroller' ) );
	</script>

	
</body>
</html>