Oblo - Creative Agency Portfolio HTML5 Template

by: beshleyua

Thank you for your purchase. If you have any questions, mail me to - beshleyua@gmail.com

File structure

After unpacking archive, you'll see this structure:

						
html/
│ 
├──doc/
├──template/	
│──│──css/
│──│──│──bootstrap.min.css
│──│──│──main.css
│──│──images/
│──│──js/
│──│──│──bootstrap.bundle.min.js
│──│──│──cursor.js
│──│──│──script.js
│──│──│──imagesloaded.pkgd.js
│──│──│──jquery.min.js
│──│──│──jquery.validate.js
│──│──│──magnific-popup.js
│──│──│──isotope.pkgd.js
│──│──│──ex-slider.js
│──│──│──full-slider.js
│──│──│──main-slider.js
│──│──│──half-slider.js
│──│──│──hero-started.js
│──│──│──jquery.scrolla.js
│──│──│──pixi.min.js
│──│──│──skrollr.js
│──│──│──splitting.min.js
│──│──│──swiper.js
│──│──│──TweenMax.min.js
│──│──mailer/
│──│──│──feedback.php
│──│──│──form_setting.php
│──│──index.html
│──│──index-half.html
│──│──index-fullscreen.html
│──│──index-onepage.html
│──│──index-carousel.html
│──│──about-us.html
│──│──about.html
│──│──contacts.html
│──│──blog.html
│──│──blog-single.html
│──│──contacts.html
│──│──gallery-2-column.html
│──│──gallery-3-column.html
│──│──work-single.html
│──│──work-single-v2.html
│──│──works-2-column.html
│──│──works-3-column.html
│──│──works-creative.html

css/ - all CSS for pages
- bootstrap.min.css - bootstrap CSS for basic styles
- main.css - CSS for Oblo template layout
js/ - all JS for Oblo template
- script.js - Main JS for template

Settings

Include of fonts

To use fonts, you must add one tag 'link' from section below to head section.

					
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Mr+De+Haviland&display=swap" rel="stylesheet">

Next step is to set the $default_font option with using settings table.

Edit Icons

In this template are defined some of classes for icons, see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free, use search and select icons.

Copy icon class (for example "fas fa-code") and add to tag in html file like this:

					
<i class="fas fa-pencil-ruler"></i>

Contact Form PHP

To modify the form is submitted, you can use the following settings, folders "/mailer/form_setting.php" and "/mailer/feedback.php"

HTML structure

					
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Oblo - Creative Portfolio HTML Template</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="HandheldFriendly" content="true">
	
	<!-- fontawesome CSS -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css">
	
	<!-- fonts googleapis CSS -->
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Mr+De+Haviland&display=swap" rel="stylesheet">
	
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	
	<!-- CSS STYLES -->
	<link rel="stylesheet" href="css/main.css">
	
	<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<!-- Favicon -->
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<link rel="icon" href="favicon.ico" type="image/x-icon">

</head>

<body>
	<div class="page">

		<!-- Preloader -->
		<div class="preloader">
			<div class="centrize full-width">
				<div class="vertical-center">
					<div class="spinner"></div>
				</div>
			</div>
		</div>
		
		<!-- Header -->
		<header class="header">
		
			...
		
		</header>
		
		<!-- Wrapper -->
		<div class="wrapper">

			...
			
		</div>

	</div>

	<!-- cursor --> 
	<div class="cursor"></div>

	<!-- Scripts -->
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery-ui.js"></script>
	<script src="js/bootstrap.bundle.min.js"></script>
	<script src="js/jquery.validate.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/splitting.min.js"></script>
	<script src="js/TweenMax.min.js"></script>
	<script src="js/pixi.min.js"></script>
	<script src="js/cursor.js"></script>
	<script src="js/magnific-popup.js"></script>
	<script src="js/imagesloaded.pkgd.js"></script>
	<script src="js/isotope.pkgd.js"></script>
	<script src="js/jquery.scrolla.js"></script>
	<script src="js/skrollr.js"></script>
	<script src="js/main-slider.js"></script>
	<script src="js/full-slider.js"></script>
	<script src="js/half-slider.js"></script>
	<script src="js/ex-slider.js"></script>
	<script src="js/hero-started.js"></script>
	<script src="js/script.js"></script>

</body>
</html>

HTML structure of "Header"

					
<header class="header">

	<!-- Navbar -->
	<div class="navbar">

		<!-- logo -->
		<div class="logo">
			<a href="index.html"><img src="images/logo.svg" alt="" /></a>
		</div>

		<!-- menu btn -->
		<a href="#" class="menu-btn full"><span></span></a>

	</div>

	<!-- Menu Full Overlay -->
	<div class="menu-full-overlay">

		<div class="menu-full-container">
			<div class="container">
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-7 offset-1">
						
						<!-- menu full -->
						<div class="menu-full">
							<ul>
								<li class="has-children">
									<a href="#" class="splitting-text-anim-2" data-splitting="chars">home</a>
									<ul>
										<li class="scrolla-element-anim-1">
											<a href="index.html" class="splitting-text-anim-1" data-splitting="chars">main slider</a>
										</li>
										<li class="scrolla-element-anim-1">
											<a href="index-half.html" class="splitting-text-anim-1" data-splitting="chars">half slider</a>
										</li>
										<li class="scrolla-element-anim-1">
											<a href="index-fullscreen.html" class="splitting-text-anim-1" data-splitting="chars">fullscreen slider</a>
										</li>
										<li class="scrolla-element-anim-1">
											<a href="index-carousel.html" class="splitting-text-anim-1" data-splitting="chars">horizontal carousel</a>
										</li>
										<li class="scrolla-element-anim-1">
											<a href="index-onepage.html" class="splitting-text-anim-1" data-splitting="chars">onepage</a>
										</li>
									</ul>
								</li>
								<li class="has-children">
									<a href="#" class="splitting-text-anim-2" data-splitting="chars">about</a>
									<ul>
										<li class="scrolla-element-anim-1">
											<a href="about-us.html" class="splitting-text-anim-1" data-splitting="chars">about us</a>
										</li>
										<li class="scrolla-element-anim-1">
											<a href="about.html" class="splitting-text-anim-1" data-splitting="chars">about me</a>
										</li>
									</ul>
								</li>
								<li class="has-children">
									<a href="#" class="splitting-text-anim-2" data-splitting="chars">work</a>
									<ul>
										<li class="scrolla-element-anim-1">
											<a href="works-2-column.html" class="splitting-text-anim-1" data-splitting="chars">works 2 column</a>
										</li>
										<li class="scrolla-element-anim-1">
											<a href="works-3-column.html" class="splitting-text-anim-1" data-splitting="chars">works 3 column</a>
										</li>
										<li class="scrolla-element-anim-1">
											<a href="works-creative.html" class="splitting-text-anim-1" data-splitting="chars">works creative</a>
										</li>
										<li class="scrolla-element-anim-1">
											<a href="gallery-2-column.html" class="splitting-text-anim-1" data-splitting="chars">gallery 2 column</a>
										</li>
										<li class="scrolla-element-anim-1">
											<a href="gallery-3-column.html" class="splitting-text-anim-1" data-splitting="chars">gallery 3 column</a>
										</li>
										<li class="scrolla-element-anim-1">
											<a href="work-single.html" class="splitting-text-anim-1" data-splitting="chars">work single</a>
										</li>
										<li class="scrolla-element-anim-1">
											<a href="work-single-v2.html" class="splitting-text-anim-1" data-splitting="chars">work single 2</a>
										</li>
									</ul>
								</li>
								<li>
									<a href="contacts.html" class="splitting-text-anim-2" data-splitting="chars">contact</a>
								</li>
								<li>
									<a href="blog.html" class="splitting-text-anim-2" data-splitting="chars">blog</a>
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
		</div>

		<!-- social -->
		<div class="menu-social-links">
			<a href="#" target="blank" class="splitting-text-anim-1" data-splitting="chars">
				Instagram
			</a>
			<a href="#" target="blank" class="splitting-text-anim-1" data-splitting="chars">
				Facebook
			</a>
			<a href="#" target="blank" class="splitting-text-anim-1" data-splitting="chars">
				Twitter
			</a>
			<a href="#" target="blank" class="splitting-text-anim-1" data-splitting="chars">
				linkedin
			</a>
		</div>

	</div>

</header>

HTML structure of "Footer"

					
<div class="footer">
	<div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-5">

				<div class="copyright-text splitting-text-anim-1 scroll-animate" data-splitting="chars" data-animate="active">
					© 2021 OBLO
				</div>

			</div>
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-7">

				<!-- titles -->
				<div class="h-titles">
					<div class="h-subtitle splitting-text-anim-1 scroll-animate" data-splitting="chars" data-animate="active">
						Say
					</div>
					<div class="h-title splitting-text-anim-2 scroll-animate" data-splitting="chars" data-animate="active">
						hello
					</div>
					<div class="h-text scrolla-element-anim-1 scroll-animate" data-animate="active">
						<p>
							Aliquam erat volutpat. Quisque vitae odio at odio congue elementum. Fusce purus nibh, bibendum non vehicula id, pretium quis sem.
						</p>
						<p>
							Pellentesque tincidAenean sollicitudin massa eget turpis pharetra
						</p>
					</div>
				</div>

				<!-- social -->
				<div class="social-links">
					<a href="#" target="blank" class="splitting-text-anim-1 scroll-animate" data-splitting="chars" data-animate="active">
						Instagram
					</a>
					<a href="#" target="blank" class="splitting-text-anim-1 scroll-animate" data-splitting="chars" data-animate="active">
						Facebook
					</a>
					<a href="#" target="blank" class="splitting-text-anim-1 scroll-animate" data-splitting="chars" data-animate="active">
						Twitter
					</a>
					<a href="#" target="blank" class="splitting-text-anim-1 scroll-animate" data-splitting="chars" data-animate="active">
						linkedin
					</a>
				</div>

			</div>
		</div>
	</div>
</div>

HTML structure of "Home" sections

					
<!-- Section Main Slider -->
<div class="section main-slider">
	<div class="swiper-container">
		<div class="swiper-wrapper">

			<div class="swiper-slide">

				<!-- image -->
				<div class="slide"><img src="images/started_slide1.jpg" class="main-slide-item__image" alt="" /></div>

				<!-- slide titles -->
				<div class="slide-titles">
					<div class="container">
						<div class="row">
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

								<!-- title -->
								<div class="titles">
									<div class="label splitting-text-anim-1" data-splitting>featured work</div>
									<div class="subtitle splitting-text-anim-1" data-splitting>Photographs are just</div>
									<div class="title">
										<div class="title-inner splitting-text-anim-2" data-splitting>
											light<br />
											<em>&</em> <strong>time.</strong>
										</div>
										<span class="author-text splitting-text-anim-1" data-splitting>- Aza Holmes</span>
									</div>
								</div>

							</div>
						</div>
					</div>
					<div class="view-btn">
						<a href="work-single.html" data-splitting class="splitting-text-anim-1">view work</a>
					</div>
				</div>

			</div>

			<div class="swiper-slide">

				<!-- image -->
				<div class="slide"><img src="images/started_slide2.jpg" class="main-slide-item__image" alt="" /></div>

				<!-- slide titles -->
				<div class="slide-titles">
					<div class="container">
						<div class="row">
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
						
								<div class="titles right dark">
									<div class="label splitting-text-anim-1" data-splitting>featured work</div>
									<div class="subtitle splitting-text-anim-1" data-splitting>Let’s</div>
									<div class="title">
										<div class="title-inner splitting-text-anim-2" data-splitting>
											have <br />
											fun. <br />
											be fit!
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
					<div class="view-btn">
						<a href="work-single-v2.html" data-splitting class="splitting-text-anim-1">view work</a>
					</div>
				</div>

			</div>

			<div class="swiper-slide">

				<!-- image -->
				<div class="slide"><img src="images/started_slide3.jpg" class="main-slide-item__image" alt="" /></div>

				<!-- slide titles -->
				<div class="slide-titles">
					<div class="container">
						<div class="row">
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
						
								<div class="titles dark center">
									<div class="label splitting-text-anim-1" data-splitting>featured work</div>
									<div class="title">
										<div class="title-inner splitting-text-anim-2" data-splitting>
											God is in the details
										</div>
									</div>
									<div class="subtitle splitting-text-anim-1" data-splitting>Let’s create beautiful world</div>
								</div>

							</div>
						</div>
					</div>
					<div class="view-btn">
						<a href="work-single.html" data-splitting class="splitting-text-anim-1">view work</a>
					</div>
				</div>

			</div>

		</div>

		<!-- pagination -->
		<div class="swiper-pagination scrolla-element-anim-1 scroll-animate" data-animate="active"></div>

		<!-- navigation -->
		<div class="swiper-buttons">
			<div class="swiper-button-prev scene-nav scene-nav--prev"></div>
			<div class="swiper-button-next scene-nav scene-nav--next"></div>
		</div>

	</div>

	<!-- slides -->
	<div class="canvas main-slider-items__image"></div>

</div>

Icons

In this template are defined some of classes for icons, your can see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free

Sourse & Credits

Scripts

Animate.css https://daneden.github.io/animate.css/
jQuery https://jquery.com/
Isotope https://isotope.metafizzy.co/
imagesLoaded http://imagesloaded.desandro.com/
jQuery Validation Plugin http://jqueryvalidation.org/
Magnific Popup http://dimsemenov.com/plugins/magnific-popup/
Swiper https://swiperjs.com/
Bootstrap https://getbootstrap.com/
Scrolla.js https://github.com/maximzhurkin/jquery-scrolla
pixi.js https://www.pixijs.com/
skrollr.js https://prinzhorn.github.io/skrollr/
splitting.js https://splitting.js.org/
TweenMax.js http://greensock.com

Fonts

Roboto
Yeseva One
FontAwesome - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free

Images

Any Images or logos used in previews are not included in this item or final purchase.

Pexels