Bootstrap 4 Modern Photography Portfolio Page Concept

An awesome, well design and modern photography portfolio page concept built with Bootstrap 4 and jQuery. This is one page portfolio template best for photographers and designer to show the photos in grid layout.


Plugin Overview

Plugin / File: photography-page-concept
Author: Ivan Grozdic
Licence: MIT Licence
Published: February 14, 2019
Official Website: Go to website
Dependencies: jQuery 1.3.1 or Latest version and Bootstrap 4.1.3 or Latest
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 6.17 KB

Main Features:

  • Fully responsive and customizable.
  • Mobile Friendly Photos Grid Layout.
  • CSS Animations.

How to Use Bootstrap 4 Modern Photography Portfolio:

1. Load the jQuery and Bootstrap framework into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2. Also, include the portfolio‘s CSS and JavaScript files.

<!-- Portfolio CSS -->
<link rel="stylesheet" href="css/style.css">

<!-- Portfolio Js -->
<script  src="js/index.js"></scrip

3. Copy the following HTML structure and add your images links in it.

  	<div class="hero-section">	
		<div class="about-text hover-target">about</div>
		<div class="contact-text hover-target">contact</div>
		<div class="section-center">
			<div class="container-fluid">
				<div class="row justify-content-center">
					<div class="col-12 text-center">
						<h1>Christian Arete</h1>
					</div>
					<div class="col-12 text-center mb-2">
						<div class="dancing">photography</div>
					</div>
					<div class="col-12 text-center mt-4 mt-lg-5">
						<p>
							<span class="travel hover-target">travel</span> 
							<span class="wildlife hover-target">wildlife</span> 
							<span class="nature hover-target">nature</span>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>	
	
	<div class="about-section">	
		<div class="about-close hover-target"></div>
		<div class="section-center">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-12 text-center">
						<img src="http://www.ivang-design.com/svg-load/portfolio/freel.jpg" alt="">
					</div>
					<div class="col-lg-8 text-center mt-4">
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
					</div>
					<div class="col-12 text-center">
						<p><span>Christian Arete</span></p>
					</div>
				</div>
			</div>
		</div>		
	</div>
	
	<div class="contact-section">	
		<div class="contact-close hover-target"></div>
		<div class="section-center">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-12 text-center">
						<a href="#" class="hover-target">arete@photography.com</a>
					</div>
					<div class="col-12 text-center social mt-4">
						<a href="#" class="hover-target">instagram</a>
						<a href="#" class="hover-target">flickr</a>
						<a href="#" class="hover-target">facebook</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="travel-section">	
		<div class="travel-close hover-target"></div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-12 text-center">
					<h3>travel</h3>
				</div>
				<div class="col-12 mt-3 text-center">
					<p><span>Canon PowerShot S95</span></p>
				</div>
				<div class="col-12 text-center">
					<p>
						focal length: 22.5mm<br>
						aperture: ƒ/5.6<br>
						exposure time: 1/1000<br>
						ISO: 80
					</p>
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
			</div>
		</div>
	</div>
	
	<div class="wildlife-section">	
		<div class="wildlife-close hover-target"></div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-12 text-center">
					<h3>wildlife</h3>
				</div>
				<div class="col-12 mt-3 text-center">
					<p><span>Canon PowerShot S95</span></p>
				</div>
				<div class="col-12 text-center">
					<p>
						focal length: 22.5mm<br>
						aperture: ƒ/5.6<br>
						exposure time: 1/1000<br>
						ISO: 80
					</p>
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
			</div>
		</div>
	</div>
	
	<div class="nature-section">	
		<div class="nature-close hover-target"></div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-12 text-center">
					<h3>nature</h3>
				</div>
				<div class="col-12 mt-3 text-center">
					<p><span>Canon PowerShot S95</span></p>
				</div>
				<div class="col-12 text-center">
					<p>
						focal length: 22.5mm<br>
						aperture: ƒ/5.6<br>
						exposure time: 1/1000<br>
						ISO: 80
					</p>
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
				<div class="col-md-6 col-lg-4">
					<img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
				</div>
			</div>
		</div>
	</div>
	
	<div class='cursor' id="cursor"></div>
	<div class='cursor2' id="cursor2"></div>
	<div class='cursor3' id="cursor3"></div>

Be the first to comment

Leave a Reply

Your email address will not be published.


*