add readme
a.ivanov
parent
1865c6700c
commit
2e21a823a2
|
|
@ -0,0 +1 @@
|
|||
<html><head><meta http-equiv="refresh" content="0; URL=http://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/"></head><body></body></html>
|
||||
|
|
@ -0,0 +1,348 @@
|
|||
html {
|
||||
box-sizing: border-box;
|
||||
height:100%;
|
||||
background:#f8f8f8;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
body {
|
||||
color: #8f8f8f;
|
||||
background: #fff;
|
||||
font-family: 'Droid Sans', sans-serif;
|
||||
font: 15px/20px 'Open Sans', sans-serif;
|
||||
}
|
||||
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
|
||||
display: block;
|
||||
}
|
||||
* {max-height: 90000px;}
|
||||
img {border-style:none;}
|
||||
a {outline:none;}
|
||||
a:hover {text-decoration: underline;}
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font:100% Helvetica , Arial, Helvetica, sans-serif;
|
||||
vertical-align:middle;
|
||||
color:#000;
|
||||
}
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
vertical-align: top;
|
||||
}
|
||||
form, fieldset {
|
||||
margin:0;
|
||||
padding:0;
|
||||
border-style:none;
|
||||
}
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
padding:0;
|
||||
border:0;
|
||||
}
|
||||
input[type=file], textarea {-webkit-appearance: none;}
|
||||
input[type="image"] {padding: 0; border: none;}
|
||||
input[type="reset"]::-moz-focus-inner,
|
||||
input[type="submit"]::-moz-focus-inner,
|
||||
input[type="button"]::-moz-focus-inner {border:0;}
|
||||
input[type="reset"]:focus,
|
||||
input[type="submit"]:focus,
|
||||
input[type="button"]:focus {outline:none;}
|
||||
input[type="password"],
|
||||
input[type="text"],
|
||||
input[type="submit"],
|
||||
input[type="reset"] {
|
||||
-webkit-border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
border-radius:0
|
||||
}
|
||||
input[type="email"], input[type="search"] {
|
||||
-webkit-border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
border-radius:0
|
||||
}
|
||||
input[type=search] {-webkit-box-sizing:content-box;}
|
||||
button,
|
||||
html input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
}
|
||||
input[type="search"] {-webkit-appearance: none;}
|
||||
input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none;}
|
||||
input[type="search"]::-webkit-search-decoration {display:none;}
|
||||
q {quotes: none;}
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {top: -0.5em;}
|
||||
sub {bottom: -0.25em;}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@-ms-viewport {width: device-width;}
|
||||
@-webkit-viewport {width: device-width;}
|
||||
@-moz-viewport {width: device-width;}
|
||||
@-ms-viewport {width: device-width;}
|
||||
@-o-viewport {width: device-width;}
|
||||
@viewport {width: device-width;}
|
||||
h1{
|
||||
color: #000;
|
||||
margin: 0 0 15px;
|
||||
font: 500 40px/50px 'Open Sans', sans-serif;
|
||||
}
|
||||
h2{
|
||||
color: #000;
|
||||
margin: 0 0 15px;
|
||||
font: 500 35px/45px 'Open Sans', sans-serif;
|
||||
}
|
||||
h3{
|
||||
color: #000;
|
||||
margin: 0 0 15px;
|
||||
font: 500 30px/40px 'Open Sans', sans-serif;
|
||||
}
|
||||
h4{
|
||||
color: #8f8f8f;
|
||||
margin: 0 0 15px;
|
||||
font: 500 25px/30px 'Open Sans', sans-serif;
|
||||
}
|
||||
h5{
|
||||
color: #8f8f8f;
|
||||
margin: 0 0 15px;
|
||||
font: 500 20px/25px 'Open Sans', sans-serif;
|
||||
}
|
||||
.container{width:1152px !important;}
|
||||
html{background: #fff;}
|
||||
#wrapper{
|
||||
position:relative;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
.top-bar{
|
||||
color: #444;
|
||||
overflow: hidden;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.top-bar p{padding: 20px 0 0;}
|
||||
.top-bar ul{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
list-style: none;
|
||||
text-align: right;
|
||||
letter-spacing: -4px;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
.top-bar ul li{
|
||||
font-size: 14px;
|
||||
letter-spacing: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.top-bar ul a{
|
||||
color: #666;
|
||||
display: block;
|
||||
padding: 20px 20px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
.top-bar ul a:hover{
|
||||
color: #222;
|
||||
background: #eee;
|
||||
text-decoration: none;
|
||||
}
|
||||
.top-banner{
|
||||
overflow: hidden;
|
||||
padding: 50px 0 20px;
|
||||
}
|
||||
.top-banner .main-title{
|
||||
color: #8f8f8f;
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
font-weight: 100;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.top-banner .main-title .add{
|
||||
color: #444;
|
||||
font-size: 40px;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Droid Sans', sans-serif;
|
||||
}
|
||||
#nav{
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 250px;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
#nav ul{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
#nav ul ul{
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
#nav .tabset{
|
||||
margin: 60px 0 0;
|
||||
background: #fff;
|
||||
border: solid #ddd;
|
||||
border-width: 1px 1px 1px 0;
|
||||
}
|
||||
#nav .tabset> li.active >ul{max-height: 999px;}
|
||||
#nav .tabset> li{
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
#nav .tabset> li a{
|
||||
display: block;
|
||||
padding: 10px 25px;
|
||||
text-decoration: none;
|
||||
-webkit-transition: all .4s ease;
|
||||
transition: all .4s ease;
|
||||
}
|
||||
#nav .tabset> li >a{
|
||||
padding: 13px 25px;
|
||||
}
|
||||
|
||||
#nav .tabset ul li >a{
|
||||
padding: 8px 40px;
|
||||
}
|
||||
#nav .tabset li a.active{
|
||||
position: relative;
|
||||
}
|
||||
#nav .tabset li a.active:after{
|
||||
top: 8px;
|
||||
right: 15px;
|
||||
display: none;
|
||||
content: "\f105";
|
||||
position: absolute;
|
||||
font-family: 'FontAwesome';
|
||||
}
|
||||
#nav .tabset> li.active >a:hover,
|
||||
#nav .tabset> li.active >a{
|
||||
color: #fff;
|
||||
background: #e74c3c;
|
||||
pointer-events: none;
|
||||
}
|
||||
#nav .tabset> li a:hover{
|
||||
color: #2a2a2a;
|
||||
background: #f8f8f8;
|
||||
text-decoration: none;
|
||||
}
|
||||
.tab-content{
|
||||
line-height: 25px;
|
||||
overflow: hidden;
|
||||
padding-left: 300px;
|
||||
}
|
||||
img{margin: 0 0 20px;}
|
||||
.show-grid [class^=col-] {
|
||||
background: #eee;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
#footer{
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
}
|
||||
#footer a{
|
||||
color: #e74c3c;
|
||||
text-decoration: none;
|
||||
}
|
||||
#footer a:hover{color: #8f8f8f;}
|
||||
|
||||
|
||||
.divider{
|
||||
width: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0 0 50px;
|
||||
padding: 50px 0 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.f-color{
|
||||
color: #e74c3c;
|
||||
}
|
||||
#header{
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
width:100%;
|
||||
}
|
||||
.tab-box .js-tab-hidden{
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
display: block !important;
|
||||
left: 0 !important;
|
||||
position: static!important;
|
||||
top: 0 !important;
|
||||
}
|
||||
.margin-zero{margin: 0 !important;}
|
||||
.margin-bottom-10{margin-bottom:10px !important;}
|
||||
.margin-bottom-20{margin-bottom:20px !important;}
|
||||
.margin-bottom-40{margin-bottom:40px !important;}
|
||||
.padding-top-20{padding-top:20px !important;}
|
||||
.padding-top-30{padding-top:30px !important;}
|
||||
.padding-bottom-30{padding-bottom:30px !important;}
|
||||
.padding-bottom-20{padding-bottom:20px !important;}
|
||||
.heading1{
|
||||
color: #000;
|
||||
margin: 0 0 20px;
|
||||
text-transform: uppercase;
|
||||
font: 600 40px/50px 'Open Sans', sans-serif;
|
||||
}
|
||||
.heading2{
|
||||
color: #000;
|
||||
margin: 0 0 20px;
|
||||
text-transform: capitalize;
|
||||
font: 35px/45px 'Open Sans', sans-serif;
|
||||
}
|
||||
.heading3{
|
||||
color: #000;
|
||||
margin: 0 0 20px;
|
||||
text-transform: capitalize;
|
||||
font: 30px/40px 'Open Sans', sans-serif;
|
||||
}
|
||||
.heading4{
|
||||
color: #000;
|
||||
margin: 0 0 20px;
|
||||
text-transform: capitalize;
|
||||
font: 25px/35px 'Open Sans', sans-serif;
|
||||
}
|
||||
.heading5{
|
||||
color: #000;
|
||||
margin: 0 0 20px;
|
||||
text-transform: capitalize;
|
||||
font: 20px/30px 'Open Sans', sans-serif;
|
||||
}
|
||||
.title{
|
||||
display: block;
|
||||
margin: 0 0 20px;
|
||||
text-transform: uppercase;
|
||||
font: 600 16px/20px 'Open Sans', sans-serif;
|
||||
}
|
||||
.bold{font-weight: 700;}
|
||||
.introduction{
|
||||
padding: 80px 0 40px;
|
||||
}
|
||||
.first-letter{
|
||||
font-size: 30px;
|
||||
line-height: 35px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,625 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- set the encoding of your site -->
|
||||
<meta charset="utf-8">
|
||||
<!-- set the viewport width and initial-scale on mobile devices -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- set the title of your site -->
|
||||
<title>ThisOne - Documentation</title>
|
||||
<!-- include the site stylesheet of bootstrap -->
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<!-- include the font awesome stylesheet -->
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css">
|
||||
<!-- include the site stylesheet -->
|
||||
<link rel="stylesheet" type="text/css" href="css/all.css">
|
||||
<!-- include the site animation stylesheet -->
|
||||
<link rel="stylesheet" href="css/animate.css" type="text/css"/>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic%7CDroid+Sans:400,700' rel='stylesheet' type='text/css'>
|
||||
<!-- include jQuery library -->
|
||||
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
|
||||
<!-- include bootstrap JavaScript -->
|
||||
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
||||
<!-- include custom JavaScript -->
|
||||
<script type="text/javascript" src="js/jquery.main.js"></script>
|
||||
</head>
|
||||
<body class="stretched">
|
||||
<div id="wrapper">
|
||||
<div class="top-bar">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<p><strong>Version:</strong> 2.0 | <strong>Dated:</strong> 15 Feb 2021</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ul>
|
||||
<li><a href="https://themeforest.net/user/alia">Get Support</a></li>
|
||||
<li><a href="https://themeforest.net/user/alia">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-banner">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<strong class="main-title"><span class="add">ThisOne - </span> Documentation</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main id="main">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<nav id="nav">
|
||||
<div class="win-height">
|
||||
<ul class="tabset">
|
||||
<li class="active">
|
||||
<a href="#tab1">Start</a>
|
||||
<ul class="smooth-links">
|
||||
<li><a class="smoothanchor" href="#docs-installation">Installation</a></li>
|
||||
<li><a class="smoothanchor" href="#docs-html">HTML Structure</a></li>
|
||||
<li><a class="smoothanchor" href="#docs-logo">Logo Settings</a></li>
|
||||
<li><a class="smoothanchor" href="#docs-fonts">Changing Fonts</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab2">Menu</a>
|
||||
<ul class="smooth-links">
|
||||
<li><a class="smoothanchor" href="#docs-h-megamenu">Main Navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab3">Page Elements</a>
|
||||
<ul class="smooth-links">
|
||||
<li><a class="smoothanchor" href="#docs-page-titles">Page Title</a></li>
|
||||
<li><a class="smoothanchor" href="#docs-page-grid">Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab4">Sliders</a>
|
||||
<ul class="smooth-links">
|
||||
<li><a class="smoothanchor" href="#docs-slider">Types & Options</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab5">Blog</a>
|
||||
<ul class="smooth-links">
|
||||
<li><a class="smoothanchor" href="#docs-b-setup">Setup</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab6">Portfolio</a>
|
||||
<ul class="smooth-links">
|
||||
<li><a class="smoothanchor" href="#docs-port-setup">Setup</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab7">Shortcodes</a>
|
||||
<ul class="smooth-links">
|
||||
<li><a class="smoothanchor" href="#docs-sc-tabs">Tabs & Accordions</a></li>
|
||||
<li><a class="smoothanchor" href="#docs-sc-lightbox">Lightbox & Notifications</a></li>
|
||||
<li><a class="smoothanchor" href="#docs-sc-gmap">Google Maps</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab8">Contact AJAX Form</a>
|
||||
<ul class="smooth-links">
|
||||
<li><a class="smoothanchor" href="#docs-wid-setup">Contact Form</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab9">Credits</a>
|
||||
<ul class="smooth-links">
|
||||
<li><a class="smoothanchor" href="#docs-c-images">Images</a></li>
|
||||
<li><a class="smoothanchor" href="#docs-c-jquery">jQuery</a></li>
|
||||
<li><a class="smoothanchor" href="#docs-c-css">CSS</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab10">Changelog</a>
|
||||
<ul class="smooth-links">
|
||||
<li><a class="smoothanchor" href="#docs-changelog-v0">Version 2.0</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tab-content">
|
||||
<div id="tab1" class="tab-box">
|
||||
<div class="introduction">
|
||||
<h1 class="heading1">introduction</h1>
|
||||
<strong class="title">Before setting up the theme, it is imperative to realize it's capabilities, scope and potential usage.</strong>
|
||||
<p>While developing this theme our main focus was to make it user friendly and easy to use for non-technical users requiring their less input or otherwise minimal expertise.</p>
|
||||
<p>This theme is 100% (highly) customizable, each block is portable and can be moved to another page hence producing a new design/layout.</p>
|
||||
<p>Also by simply adding classes in code, user can get variations in styles.</p>
|
||||
<p>We have optimized the code for load speed and extensively used CSS for effects etc.</p>
|
||||
<p>The code is 100% bug free and follows W3C standards. </p>
|
||||
<p>We have used latest tools for development e.g., HTML5/CSS3, BootStrap that will give you powerful and innovative experience for your projects. The theme is fully responsive and retina ready, compatible with all browsers and mobile-devices.</p>
|
||||
<p class="margin-bottom-40">It has passed highest standards of Quality Assurance, giving you freedom and enjoyment of a well-managed, error free code that you can use in any project.</p>
|
||||
<h2 class="heading5 margin-bottom-10"><strong><span class="first-letter">This</span>One</strong> is a multipupose Template that has following feature</h2>
|
||||
<h5 class="heading5 margin-zero">Home & Inner Pages</h5>
|
||||
<ul>
|
||||
<li><strong>25+</strong> Home Pages</li>
|
||||
<li><strong>25+</strong> Sliders</li>
|
||||
<li><strong>03 </strong> About Us Section</li>
|
||||
<li><strong>03 </strong> Services Section</li>
|
||||
<li><strong>04 </strong> Blog Section</li>
|
||||
<li><strong>01 </strong> Portfolio Section</li>
|
||||
<li><strong>01 </strong> Contact Us</li>
|
||||
</ul>
|
||||
<h5 class="heading5 margin-zero">Some Extra Feature</h5>
|
||||
<ul>
|
||||
<li><strong>15+ </strong> Revolution Slider Headers</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="docs-installation" >
|
||||
<h2 class="heading2">Setting up ThisOne - Theme</h2>
|
||||
<p>Follow these guide lines below to get started with your Site:</p>
|
||||
<ol>
|
||||
<li>Open the <code>ThisOne - /HTML</code> Folder to find all the Templates Files</li>
|
||||
<li>You will need to Upload these files to your Web Server using FTP in order to use it on your Website.</li>
|
||||
<li>Make sure you upload the required files/folders listed below:
|
||||
<ul>
|
||||
<li><code>HTML/index.html</code> - Index File/Homepage</li>
|
||||
<li><code>HTML/assets/css</code> - Required css files</li>
|
||||
<li><code>HTML/process.php</code> - Required PHP file</li>
|
||||
<li><code>HTML/assets/lib/revolution</code> - Revolution Slider</li>
|
||||
<li><code>HTML/assets/imgs</code> - Required images files</li>
|
||||
<li><code>HTML/assets/js</code> - Required Javacripts files</li>
|
||||
<li><code>HTML/assets/lib/fontawesome</code> - Required fonts files</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>The other files can be used according to your requirement.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>After adding all these folder on server you're now good to go..! just add your Content and you will have awesome Template.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div id="docs-html" >
|
||||
<h1>HTML Structure</h1>
|
||||
<p>We have Developed <strong>ThisOne - </strong> with a simple coding structure. here is the sample:</p>
|
||||
<pre><code class="language-html" data-lang="html"><!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
|
||||
<title>Hello, world!</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
|
||||
<!-- Optional JavaScript; choose one of the two! -->
|
||||
|
||||
<!-- Option 1: Bootstrap Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Option 2: Separate Popper and Bootstrap JS -->
|
||||
<!--
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
|
||||
-->
|
||||
</body>
|
||||
</html>/code></pre>
|
||||
|
||||
|
||||
<div class="divider"></div>
|
||||
<div id="docs-logo" >
|
||||
<h1>Logo Settings</h1>
|
||||
<p>The Logo can be found in the Nav Section - <code>nav</code></p>
|
||||
<pre><a class="navbar-brand black-logo" href="#"><img src="assets/imgs/logo.png" class="img-fluid" alt=""></a></pre>
|
||||
<p><span class="label label-danger">Note</span> The Logo Image's width/ height can be <strong>150px/ 30px [optional]</strong></p>
|
||||
<div class="divider"></div>
|
||||
<h2>Retina Logo</h2>
|
||||
<p>If you wish to use a Retina Logo, make sure that you use double the size of your Standard Logo.
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div id="docs-fonts" >
|
||||
<h1>Changing Fonts</h1>
|
||||
<p>Changing Fonts in ThisOne - is very easy. By default, ThisOne - uses <code>Karla & Lato</code> from the <a href="http://www.google.com/fonts" target="_blank">Google Fonts Library</a>. </p>
|
||||
<p>1- Add this code to your website, "css/all-stylesheets.css" file.</p>
|
||||
<pre><span class="f-color"><Font Poppins ></span>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
|
||||
</pre>
|
||||
|
||||
<p>2- Integrate the fonts into your CSS:</p>
|
||||
<pre>
|
||||
font-family: 'Poppins', sans-serif;
|
||||
</pre>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="tab2" class="tab-box">
|
||||
|
||||
<div class="divider"></div>
|
||||
<div id="docs-h-megamenu" >
|
||||
<h1>Main Navigation</h1>
|
||||
<p>You can start using the Menu. Try using the Following code:</p>
|
||||
<pre>
|
||||
<nav id="navigation" class="navbar navbar-expand-lg navbar-light fixed-top bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand white-logo" href="#"><img src="assets/imgs/logo-white.png" class="img-fluid" alt=""></a>
|
||||
<a class="navbar-brand black-logo" href="#"><img src="assets/imgs/logo.png" class="img-fluid" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="nav navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#home">Home </a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#about" >About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#services">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#portfolio">Portfolio</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#team">team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#pricing">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#blog">Blog</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#contact">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="ps-3 d-none d-lg-block">
|
||||
<a href="https://themeforest.net/item/this-one-one-page-responsive-website-template/7236268?ref=alia" class="btn btn-primary" target="_blank">BUY NOW</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab3" class="tab-box">
|
||||
<div id="docs-page-titles" >
|
||||
<h1>Page Titles</h1>
|
||||
<p><strong>ThisOne - </strong> has following base HTML structure for page title.</p>
|
||||
<p> Images classes, inner-banner-style, banner-img-01 </p>
|
||||
|
||||
<pre><div class="inner-banner-style banner-img-01" id="top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="info text-center">
|
||||
<h6 class="shuffletext">/ Standard Blog</h6>
|
||||
<h2>
|
||||
We Move The Digital<br class="d-none d-md-block" />
|
||||
Industry Forward
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></pre>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div id="docs-page-grid" class="content-inner">
|
||||
<h1>Columns & Grid</h1>
|
||||
<h3>Bootstrap Grid</h3>
|
||||
<div class="show-grid">
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
</div>
|
||||
<div class="show-grid">
|
||||
<div class="col-md-2">.col-md-2</div>
|
||||
<div class="col-md-2">.col-md-2</div>
|
||||
<div class="col-md-2">.col-md-2</div>
|
||||
<div class="col-md-2">.col-md-2</div>
|
||||
<div class="col-md-2">.col-md-2</div>
|
||||
<div class="col-md-2">.col-md-2</div>
|
||||
</div>
|
||||
<div class="show-grid">
|
||||
<div class="col-md-3">.col-md-3</div>
|
||||
<div class="col-md-3">.col-md-3</div>
|
||||
<div class="col-md-3">.col-md-3</div>
|
||||
<div class="col-md-3">.col-md-3</div>
|
||||
</div>
|
||||
<div class="show-grid">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
</div>
|
||||
<div class="show-grid">
|
||||
<div class="col-md-5">.col-md-5</div>
|
||||
<div class="col-md-5">.col-md-5</div>
|
||||
<div class="col-md-2">.col-md-2</div>
|
||||
</div>
|
||||
<div class="show-grid">
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
</div>
|
||||
<div class="show-grid">
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-11">.col-md-11</div>
|
||||
</div>
|
||||
<div class="show-grid">
|
||||
<div class="col-md-2">.col-md-2</div>
|
||||
<div class="col-md-10">.col-md-10</div>
|
||||
</div>
|
||||
<div class="show-grid">
|
||||
<div class="col-md-3">.col-md-3</div>
|
||||
<div class="col-md-9">.col-md-9</div>
|
||||
</div>
|
||||
<div class="show-grid">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-8">.col-md-8</div>
|
||||
</div>
|
||||
<div class="show-grid">
|
||||
<div class="col-md-5">.col-md-5</div>
|
||||
<div class="col-md-7">.col-md-7</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
</div>
|
||||
<div id="tab4" class="tab-box">
|
||||
<div id="docs-slider" >
|
||||
<h1>Slider Types & their Options</h1>
|
||||
<p><strong>ThisOne - </strong> includes 2 Unique Sliders & Pre-Built Slider Templates for you to be used on any Page with 10s of Options. The List of all the Sliders included are mentioned as follows:</p>
|
||||
<ul>
|
||||
<li>Revolution Slider</li>
|
||||
<li>Owl Slider</li>
|
||||
</ul>
|
||||
<br><br>
|
||||
<h2>Revolution Slider</h2>
|
||||
<p>You can find the Revolution Slider related Documentation here.<br><br><a target="_blank" href="Revolution%20Slider%20Documentation/documentation.html" class="btn btn-danger">Read Revolution Slider Docs</a></p>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab5" class="tab-box">
|
||||
<div id="docs-b-setup">
|
||||
<h1>Blog Setup</h1>
|
||||
<p><strong>ThisOne - </strong> Blog Post. Use the Code Sample below:</p>
|
||||
<h3 class="heading4">Blog post</h3>
|
||||
<pre><div class="col-12 col-md-6">
|
||||
<div class="blog-post pb-md-2">
|
||||
<div class="pic pb-4">
|
||||
<img src="assets/imgs/blog/1.jpg" class="img-fluid" alt="" />
|
||||
</div>
|
||||
<h4><a href="#">/TECHNOLOGY</a></h4>
|
||||
<h2><a href="single-blog-post-left-sidebar.html">3 Four-Star Resorts Bolster Costa Rica’s Luxury Reputation</a></h2>
|
||||
<p>
|
||||
Cepteur sint occaecat cupidatat proident, taken possession
|
||||
of my entire soul, like these sweet mornings of
|
||||
springCepteur sint occaecat cupidt proident, taken
|
||||
possession of my entire soul ...
|
||||
</p>
|
||||
<ul class="meta">
|
||||
<li>
|
||||
<a href=""><i class="las la-user-alt"></i> John</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-comment"></i> 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-eye"></i> 5.5K</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div></pre>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab6" class="tab-box">
|
||||
<div id="docs-port-setup" class="content-inner">
|
||||
<h1>Portfolio Setup</h1><br>
|
||||
<p><strong>ThisOne - </strong> provides a very elegant way to showcase your work.</p><br>
|
||||
<h3 class="heading3">Setting up Portfolio Item:</h3>
|
||||
<p>Following block of code is for all categories All, webdesign, branding & Videos, you can remove any category by removing its class.</p>
|
||||
<br>
|
||||
<pre><figure class="item webdesign">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/portfolio/dev-3.jpg" alt=""/>
|
||||
<!-- Picture Overlay Starts -->
|
||||
<div class="text-overlay">
|
||||
<div class="category">webdesign</div>
|
||||
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-3.jpg" title="Product Name">Product Name</a></h1>
|
||||
</div>
|
||||
<div class="icon-overlay">
|
||||
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-3.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
|
||||
</div>
|
||||
<!-- Picture Overlay Ends -->
|
||||
</div>
|
||||
</figure>
|
||||
</pre>
|
||||
|
||||
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab7" class="tab-box">
|
||||
|
||||
<div class="divider"></div>
|
||||
<div id="docs-sc-tabs" >
|
||||
<h1>Toggles & Accordions</h1>
|
||||
<p>You can use Tabs, Toggles & Accordions in Various Styles and with Different Options to display Below the Fold content.</p>
|
||||
<div class="line line-sm"></div>
|
||||
<h3>Accordion</h3>
|
||||
<p>Use this code to display accordion:</p>
|
||||
<pre><div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></pre>
|
||||
|
||||
<p ><span class="label label-danger">Note:</span> Make sure you add <strong>unique</strong> IDs for each Tab Container and Tab Items.</p>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div id="docs-sc-lightbox" >
|
||||
<h1>Lightbox</h1>
|
||||
<h3>Setting up Lightboxes:</h3>
|
||||
<p>Adding a <code>.lightbox</code> class to any Link or Button will turn it into a Lightbox Element. You can use different Types of Lightbox with an Easy Setup:</p>
|
||||
<h5>Single Image:</h5>
|
||||
<pre ><a class="image-popup-vertical-fit" href="http://dummyimage.com/480x330" title="Pellentesque habitant morbi"></a></pre>
|
||||
<h5>Images Gallery</h5>
|
||||
<pre ><ul class="popup-gallery">
|
||||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||||
</ul></pre>
|
||||
<h5>Videos:</h5>
|
||||
<pre><a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto"><i class="las la-expand-arrows-alt"></i></a></pre>
|
||||
<pre><<a class="popup-vimeo" href="https://vimeo.com/45830194"><i class="las la-expand-arrows-alt"></i></a></pre>
|
||||
|
||||
|
||||
|
||||
<p ><span class="label label-danger">Note:</span> It is recommended that you use only this Format <code>http://www.youtube.com/watch?v=kuceVNBTJio</code> for Youtube Videos.</p>
|
||||
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div id="docs-sc-gmap" >
|
||||
<h1>Google Maps</h1>
|
||||
<p>You can add Embedded Google Maps iframe to any Page using the following setup:</p>
|
||||
|
||||
<p>Add a <code>section</code> which will contain your Google Map:</p>
|
||||
<pre><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25215.625657884106!2d144.956637!3d-37.81456500000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4e793770d3%3A0x9e44d6ad0d76ba7c!2s121+King+St%2C+Melbourne+VIC+3000%2C+Australia!5e0!3m2!1sen!2sus!4v1435061406583" height="400" allowfullscreen><iframe></pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="tab8" class="tab-box">
|
||||
<div id="docs-wid-setup" >
|
||||
<h1>Contact AJAX Form Setup</h1>
|
||||
<p>Update email address. Please open “process.php” update your email address in line#2.<br>$adminemail = "youremailhere@googlemail.com";
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
</div>
|
||||
<div id="tab9" class="tab-box">
|
||||
<div id="docs-c-images" >
|
||||
<h1>Images</h1>
|
||||
<ul>
|
||||
<li><a href="http://thestocks.im/" target="_blank" title="The Stocks">The Stocks</a></li>
|
||||
<li><a href="http://unsplash.com/" target="_blank" title="Unsplash">Unsplash</a></li>
|
||||
<li><a href="http://www.imcreator.com/free" target="_blank" title="Imcreator FREE">Imcreator FREE</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div id="docs-c-jquery" >
|
||||
<h1>jQuery</h1>
|
||||
<ul>
|
||||
<li><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank">Revolution Slider</a></li>
|
||||
<li><a href="http://www.owlcarousel.owlgraphic.com/" target="_blank">Owl Carousel</a></li>
|
||||
<li><a href="http://labs.mario.ec/jquery-gmap/" target="_blank">Google Map</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div id="docs-c-css" >
|
||||
<h1>CSS & Fonts</h1>
|
||||
<ul>
|
||||
<li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a></li>
|
||||
<li><a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font-Awesome</a> (Font Icons)</li>
|
||||
<li><a href="https://icomoon.io/" target="_blank">Icomoon</a> (Font Icons)</li>
|
||||
<li><a href="http://simplelineicons.com/" target="_blank">Simple Line Icons</a> (Font Icons)</li>
|
||||
<li><a href="https://www.google.com/fonts" target="_blank">Google Fonts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab10" class="tab-box">
|
||||
|
||||
<div id="docs-changelog-v0" >
|
||||
<h1>Release V2.0</h1>
|
||||
<p>Released on <strong>15 Feb 2021</strong></p>
|
||||
|
||||
<h1>Initial Release V1.0</h1>
|
||||
<p>Released on <strong>27 Mar 2014</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer id="footer">
|
||||
<div class="copyrights">
|
||||
<div class="container-fullwidth">
|
||||
<div class="col-md-12 nopadding center">
|
||||
Copyrights © 2021 All Rights Reserved, Designed and Developed by <a href="http://themeforest.net/user/alia">alia</a><br>
|
||||
<div class="copyright-links"><a href="mailto:alia.envato@gmail.com">Support</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="gotoTop" class="icon-angle-up"></div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,78 @@
|
|||
// page init
|
||||
jQuery(function(){
|
||||
initCustomTabs();
|
||||
initCustomSmoothScroll();
|
||||
});
|
||||
|
||||
function initCustomTabs() {
|
||||
var activeClass = 'active',
|
||||
body = jQuery('html, body');
|
||||
|
||||
jQuery('.tabset').each(function() {
|
||||
var tabset = jQuery(this),
|
||||
tabItems = tabset.children('li'),
|
||||
animationActive = false,
|
||||
animSpeed = 400;
|
||||
|
||||
tabItems.each(function() {
|
||||
var tabItem = jQuery(this),
|
||||
tabOpener = tabItem.children('a'),
|
||||
tabContent = jQuery(tabOpener.attr('href'));
|
||||
|
||||
if(!tabItem.hasClass(activeClass)) {
|
||||
tabContent.hide();
|
||||
}
|
||||
|
||||
tabOpener.on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if(!animationActive) {
|
||||
var activeItem = tabset.find('.' + activeClass);
|
||||
|
||||
if(!tabItem.hasClass(activeClass)) {
|
||||
jQuery(activeItem.children('a').attr('href')).fadeOut(animSpeed, function() {
|
||||
body.scrollTop(0);
|
||||
tabContent.fadeIn(animSpeed, function() {
|
||||
animationActive = false;
|
||||
});
|
||||
});
|
||||
activeItem.removeClass(activeClass);
|
||||
tabItem.addClass(activeClass);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initCustomSmoothScroll() {
|
||||
var activeClass = 'item-active',
|
||||
animationActive = false,
|
||||
animSpeed = 600,
|
||||
body = jQuery('html, body');
|
||||
|
||||
jQuery('.smooth-links').each(function() {
|
||||
var list = jQuery(this),
|
||||
listItems = list.find('li');
|
||||
|
||||
listItems.each(function() {
|
||||
var item = jQuery(this),
|
||||
link = item.find('a'),
|
||||
section = jQuery(link.attr('href'));
|
||||
|
||||
link.on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if(!animationActive && !item.hasClass(activeClass)) {
|
||||
animationActive = true;
|
||||
|
||||
body.animate({
|
||||
scrollTop: section.offset().top
|
||||
}, animSpeed, function() {
|
||||
animationActive = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
/*Framework : Bootstrap v4.5.0*/
|
||||
@import url('../lib/bootstrap/css/bootstrap.min.css');
|
||||
|
||||
/*Icons: Font-awesome v5.13.0*/
|
||||
@import url('../lib/fontawesome/css/all.min.css');
|
||||
|
||||
/* REVOLUTION STYLE SHEETS */
|
||||
@import url("../lib/revolution/css/settings.css");
|
||||
@import url("../lib/revolution/css/layers.css");
|
||||
@import url("../lib/revolution/css/navigation.css");
|
||||
@import url("../lib/revolution/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css");
|
||||
@import url("../lib/revolution/fonts/font-awesome/css/font-awesome.css");
|
||||
|
||||
/*Website Fonts*/
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
/*Custom Style*/
|
||||
@import url('style.css');
|
||||
|
||||
/* Owl Carousel */
|
||||
@import url("../lib/owl-carousel/owl.carousel.css");
|
||||
@import url("../lib/owl-carousel/owl.theme.default.min.css");
|
||||
|
||||
/* Line Awesome Icons */
|
||||
@import url("../lib/line-awesome-1.3.0/css/line-awesome.min.css");
|
||||
|
||||
/* Magnific Popup core CSS file */
|
||||
@import url("../lib/magnific-popup/magnific-popup.css");
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 207.1 239.2" style="enable-background:new 0 0 207.1 239.2;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#D32027;}
|
||||
</style>
|
||||
<path class="st0" d="M0,0l207.1,119.6L0,239.2V0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 470 B |
|
|
@ -0,0 +1,63 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 185 186" style="enable-background:new 0 0 185 186;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
|
||||
</style>
|
||||
<g id="Page-1">
|
||||
<g id="_x30_1-home-copy" transform="translate(-1124.000000, -1167.000000)">
|
||||
<g id="about" transform="translate(0.000000, 1035.000000)">
|
||||
<g id="play" transform="translate(1124.000000, 132.000000)">
|
||||
<path id="Fill-93" class="st0" d="M96.9,175.6l0.2,10.3L90,186l0-1.1l5.7-0.1l-0.1-3.3l-5.3,0.1l0-1.2l5.3-0.1l-0.1-3.6
|
||||
l-5.8,0.1l0-1.1L96.9,175.6z M81.2,175.1l7.1,0.6l-0.8,10.2l-7.1-0.6l0.1-1.1l5.7,0.5l0.3-3.3l-5.3-0.4l0.1-1.1l5.3,0.4l0.3-3.5
|
||||
l-5.8-0.5L81.2,175.1z M106.4,174.5l1.3,10.2l-4.8,0.6c-1.9,0.3-3.2-0.6-3.4-2.3c-0.2-1.2,0.2-2.3,1.4-2.8l0,0
|
||||
c-1.2-0.1-1.6-0.9-1.8-1.9c-0.2-1-0.3-2.1-1-2.7l1.5-0.2c0.4,0.4,0.4,1.5,0.7,2.5c0.3,1,0.6,1.8,1.9,1.6l3.3-0.4l-0.6-4.4
|
||||
L106.4,174.5z M73.1,173.7l6.7,1.2L78,185l-1.3-0.2l1.6-9l-5.4-1L73.1,173.7z M105.8,180.1l-2.8,0.4c-1.3,0.2-2.3,0.6-2.1,2.1
|
||||
c0.1,1,0.8,1.7,2,1.5l3.4-0.4L105.8,180.1z M116.2,172l1.2,4l5.5,4.7l-1.6,0.5l-4.4-3.8l-1.5,5.5l-1.5,0.4l2-6.9l-1.2-4
|
||||
L116.2,172z M134.2,164.1l5,9l-1.2,0.7l-4.4-8l-4.8,2.6l-0.3-0.5l0.3,10.5l-1.4,0.6l-7.7-7.9l1.4-0.6l2.2,2.4l4-1.7l-0.1-3.3
|
||||
l1.1-0.5l0,0L134.2,164.1z M127.3,172.4l-3.2,1.4l3.4,3.7l0,0L127.3,172.4z M52.9,170l9.8,4.2l-0.5,1.1l-9.8-4.2L52.9,170z
|
||||
M141.7,159.1l5.8,8.5l-3.7,2.6c-1.7,1.2-3.2,0.9-4.3-0.7c-1.1-1.6-0.8-3.1,0.9-4.3l2.6-1.8l-2.4-3.5L141.7,159.1z M44.2,160.7
|
||||
l1.1,0.8l-6.1,8.2l-3.6-2.7c-1.7-1.2-1.9-2.8-0.7-4.3c1.1-1.5,2.7-1.8,4.3-0.6l2.5,1.9L44.2,160.7z M143.6,164.3l-2.2,1.5
|
||||
c-1.3,0.9-1.5,1.8-0.8,2.8c0.7,1,1.6,1.2,2.9,0.3l2.2-1.5L143.6,164.3z M35.9,163.5c-0.7,1-0.6,1.9,0.7,2.9l2.2,1.6l2.3-3
|
||||
l-2.2-1.6C37.6,162.4,36.7,162.6,35.9,163.5z M26.9,144.5l1,1.1l-1.6,2.9l2.9,3.2l3.1-1.2l0.8,0.8l0,0l5,4.6l-6.9,7.6l-1-0.9
|
||||
l6.2-6.7l-4-3.7l0.4-0.4l-9.8,3.6l-1-1.1L26.9,144.5z M159.4,146.7l0.9,0.8l-7.1,7.9l-0.9-0.8L159.4,146.7z M25.8,149.6
|
||||
l-2.4,4.5l0,0l4.7-1.9L25.8,149.6z M24,140.4l0.8,1.1l-3.4,2.4l-2.6,6.8l-0.9-1.3l2.2-5.3l-5.7,0.4l-0.9-1.3l7.2-0.3L24,140.4z
|
||||
M15.6,125.6l0.7,1.4c-0.2,0.5-1.3,0.8-2.1,1.5c-0.8,0.6-1.5,1.2-0.9,2.4l1.5,3l3.9-2l0.6,1.2l-9.2,4.6L8,133.3
|
||||
c-0.9-1.7-0.5-3.3,1-4c1.1-0.6,2.3-0.5,3.1,0.4l0,0c-0.3-1.2,0.4-1.8,1.2-2.3C14.2,126.9,15.3,126.5,15.6,125.6z M165.5,130.8
|
||||
l9,5l-0.7,1.2l-8-4.5l-2.7,4.7l-1-0.6L165.5,130.8z M9.8,130.5c-0.9,0.5-1.3,1.3-0.8,2.4l1.5,3l3.2-1.6l-1.3-2.6
|
||||
C11.9,130.6,11.1,129.8,9.8,130.5z M169.1,123l9.4,4.1l-2.8,6.5l-1.1-0.5l2.3-5.2l-3-1.3l-2.1,4.9l-1.1-0.5l2.1-4.9l-3.3-1.4
|
||||
l-2.3,5.3l-1.1-0.5L169.1,123z M12.7,117.8l2.5,6.7L5.5,128l-2.4-6.7l1.1-0.4l2,5.4l3.1-1.1l-1.8-5l1.1-0.4l1.8,5l3.3-1.2
|
||||
l-2-5.4L12.7,117.8z M171.7,114.9l9.8,3.1l-2.1,6.8l-1.1-0.3l1.7-5.5l-3.1-1l-1.6,5.1l-1.1-0.3l1.6-5.1l-3.4-1.1l-1.7,5.5
|
||||
l-1.1-0.3L171.7,114.9z M10.6,109.5l1.7,6.9l-10,2.5L0.6,112l1.1-0.3l1.4,5.6l3.2-0.8L5,111.3l1.1-0.3l1.3,5.2l3.5-0.9l-1.4-5.6
|
||||
L10.6,109.5z M173.7,105.6l10.1,2l-1,4.7c-0.4,1.9-1.6,2.9-3.3,2.5c-1.2-0.2-2.1-1-2.2-2.3l0,0c-0.5,1.1-1.4,1.2-2.4,1.1
|
||||
c-1-0.1-2.1-0.4-2.9,0l0.3-1.5c0.5-0.3,1.5,0.1,2.6,0.1c1,0,1.9,0,2.2-1.3l0.7-3.3l-4.3-0.9L173.7,105.6z M178.9,108l-0.6,2.8
|
||||
c-0.2,1.2-0.1,2.4,1.3,2.7c1,0.2,1.8-0.2,2.1-1.4l0.7-3.3L178.9,108z M9.4,101.3l1,6.7l-10.2,1.5L0,108.2l9-1.3l-0.8-5.4
|
||||
L9.4,101.3z M185,92l-0.1,1.6l-5,2.9l4.8,3.2l-0.1,1.6l-5.9-4.2l-4.2-0.2l0.1-1.4l4.2,0.2L185,92z M183,74.2l0.2,1.3l-9,1.6
|
||||
l0.9,5.4l-0.6,0.1l10,3.1l0.1,1.5l-10,4.7l-0.1-1.5l3-1.3l-0.3-4.3l-3.2-0.9l-0.1-1.1l0,0l-1.2-6.7L183,74.2z M5.1,81l1.1,0.1
|
||||
L5.5,91.7l-1.1-0.1L5.1,81z M178.5,85.1l0.2,3.5l4.7-2l0,0L178.5,85.1z M180.5,64.4l1.2,4.3c0.6,2-0.2,3.3-2.1,3.9
|
||||
c-1.8,0.5-3.2-0.2-3.8-2.2l-0.9-3l-4.1,1.1l-0.4-1.3L180.5,64.4z M179.7,66l-3.6,1l0.7,2.6c0.4,1.5,1.2,2,2.4,1.7
|
||||
c1.2-0.3,1.6-1.2,1.2-2.7L179.7,66z M7.3,61.7c1.8,0.6,2.6,2,1.9,3.9l-1,3l4,1.3l-0.4,1.3l-9.8-3.1l1.4-4.3
|
||||
C4.1,61.8,5.5,61.1,7.3,61.7z M4.4,64.6l-0.8,2.5l3.6,1.1L8,65.7c0.5-1.5,0.1-2.3-1.1-2.7C5.7,62.6,4.9,63.1,4.4,64.6z
|
||||
M11.1,46.7L22,48.3l-0.7,1.3L18.1,49l-2.1,3.8l2.1,2.5l-0.5,1l0,0l-2.7,6.2l-9.4-4.1l0.5-1.3l8.4,3.7l2.2-5l0.5,0.2l-6.6-8
|
||||
L11.1,46.7z M165.6,46l5.2,9.3l-1,0.6l-5.2-9.3L165.6,46z M11.8,48L11.8,48l3.3,3.9l1.7-3L11.8,48z M18.9,35l2.6,6.7l3.4,2.5
|
||||
l-0.8,1.1l-3.4-2.5l-7.3-0.3l1-1.3l5.8,0.4L18,36.3L18.9,35z M159.1,28.7l0.9,1l-6.8,6.1l3.6,4l-0.9,0.8l-4.6-5.1L159.1,28.7z
|
||||
M30.6,26.5c0.9,0.9,1.2,2,0.6,3.1l0,0c1-0.7,1.8-0.2,2.6,0.4c0.8,0.6,1.5,1.5,2.4,1.6l-1.1,1.1c-0.6,0-1.2-1-2.1-1.5
|
||||
c-0.8-0.6-1.6-1-2.5-0.1l-2.4,2.4l3.1,3.1l-1,1l-7.3-7.2l3.4-3.4C27.9,25.4,29.5,25.3,30.6,26.5z M152.1,22.1l5.2,4.8l-0.8,0.8
|
||||
l-4.2-3.9l-2.2,2.4l3.9,3.6l-0.8,0.8l-3.9-3.6l-2.4,2.6l4.3,3.9l-0.8,0.9l-5.3-4.8L152.1,22.1z M27.3,27.6L24.9,30l2.5,2.5l2-2
|
||||
c0.9-0.9,1.4-1.9,0.4-3C29.1,26.9,28.2,26.7,27.3,27.6z M36.3,18.3l0.7,0.9l-4.5,3.6l2.1,2.5l4.2-3.4l0.7,0.9l-4.2,3.4l2.2,2.8
|
||||
l4.5-3.6l0.7,0.9l-5.6,4.5l-6.5-8L36.3,18.3z M144.5,16.3l5.7,4.2l-0.7,0.9l-4.6-3.4l-1.9,2.6l4.3,3.2l-0.7,0.9l-4.3-3.2
|
||||
l-2.1,2.9l4.6,3.4l-0.7,0.9l-5.7-4.2L144.5,16.3z M44.3,13l0.6,1l-4.8,3.1l1.8,2.7l4.5-2.9l0.6,1l-4.5,2.9l1.9,3l4.8-3.1l0.6,1
|
||||
l-6,3.9l-5.6-8.6L44.3,13z M135.4,10.7l4.2,2.4c1.7,1,2.2,2.5,1.3,3.9c-0.6,1.1-1.6,1.7-2.9,1.3l0,0c0.9,0.8,0.7,1.7,0.3,2.6
|
||||
c-0.4,0.9-1.1,1.9-0.9,2.8l-1.3-0.8c-0.1-0.6,0.6-1.4,1-2.4c0.4-0.9,0.6-1.8-0.5-2.5l-2.9-1.7l-2.2,3.8l-1.2-0.7L135.4,10.7z
|
||||
M47.7,11.1l4.2,8.1l4.8-2.5l0.5,1l-6,3.1l-4.7-9.1L47.7,11.1z M136,12.4l-1.8,3.1l2.5,1.4c1.1,0.6,2.2,0.9,3-0.4
|
||||
c0.5-0.9,0.4-1.8-0.7-2.4L136,12.4z M120.9,4.6l1.5,0.6l1.1,5.7l4.6-3.5l1.5,0.6l-5.9,4.3l-1.5,3.9l-1.3-0.5l1.5-3.9L120.9,4.6z
|
||||
M103.4,0.7l1.4,0.2l-1.4,9l5.4,0.8l-0.1,0.6l6.2-8.5l1.5,0.4l1.3,11l-1.5-0.4l-0.3-3.3l-4.2-1.1l-1.9,2.7l-1.1-0.3l0,0l-6.7-1
|
||||
L103.4,0.7z M75.2,7.2l0.3,1.1l-10.3,2.7l-0.3-1.1L75.2,7.2z M93.4,0l4.5,0.2c2.1,0.1,3.1,1.3,3,3.2c-0.1,1.9-1.3,3-3.3,2.9
|
||||
l-3.1-0.2l-0.2,4.2l-1.4-0.1L93.4,0z M115.2,4.3l-2.9,4.2l3.4,0.9L115.2,4.3L115.2,4.3z M94.7,1.2L94.5,5l2.7,0.1
|
||||
c1.6,0.1,2.3-0.5,2.3-1.8s-0.6-1.9-2.1-2L94.7,1.2z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 400 KiB |
Binary file not shown.
|
|
@ -0,0 +1,206 @@
|
|||
$(document).ready(function () {
|
||||
|
||||
'use strict';
|
||||
|
||||
/************************************************************************************ PRELOADER STARTS */
|
||||
|
||||
$('body').jpreLoader({
|
||||
preMainSection: '#main-preloader',
|
||||
prePerText: '.preloader-percentage-text',
|
||||
preBar: '.preloader-bar',
|
||||
});
|
||||
|
||||
$('.navbar-collapse a').click(function () {
|
||||
$(".navbar-collapse").collapse('hide');
|
||||
});
|
||||
|
||||
|
||||
/************************************************************************************ TEAM & TESTIMONIALS CAROUSELS STARTS */
|
||||
|
||||
var owl = $('.services-carousel');
|
||||
owl.owlCarousel({
|
||||
|
||||
autoplay: false,
|
||||
autoplayHoverPause: true,
|
||||
nav: true,
|
||||
dots: false,
|
||||
mouseDrag: true,
|
||||
smartSpeed: 500,
|
||||
margin: 24,
|
||||
loop: true,
|
||||
singleItem: true,
|
||||
navText: [
|
||||
"<i class='las la-angle-left'></i>", "<i class='las la-angle-right'></i>"
|
||||
],
|
||||
responsive: {
|
||||
0: {
|
||||
items: 1
|
||||
},
|
||||
600: {
|
||||
items: 1
|
||||
},
|
||||
991: {
|
||||
items: 2
|
||||
},
|
||||
1200: {
|
||||
items: 3
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var owl = $('.team-carousel');
|
||||
owl.owlCarousel({
|
||||
|
||||
autoplay: false,
|
||||
autoplayHoverPause: true,
|
||||
nav: true,
|
||||
dots: false,
|
||||
mouseDrag: true,
|
||||
smartSpeed: 500,
|
||||
margin: 24,
|
||||
loop: true,
|
||||
singleItem: true,
|
||||
navText: [
|
||||
"<i class='las la-angle-left'></i>", "<i class='las la-angle-right'></i>"
|
||||
],
|
||||
responsive: {
|
||||
0: {
|
||||
items: 1
|
||||
},
|
||||
600: {
|
||||
items: 2
|
||||
},
|
||||
1000: {
|
||||
items: 3
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var owl = $('.testimonials-carousel');
|
||||
owl.owlCarousel({
|
||||
|
||||
autoplay: false,
|
||||
autoplayHoverPause: true,
|
||||
nav: true,
|
||||
dots: false,
|
||||
mouseDrag: true,
|
||||
smartSpeed: 500,
|
||||
margin: 24,
|
||||
loop: true,
|
||||
singleItem: true,
|
||||
navText: [
|
||||
"<i class='las la-angle-left'></i>", "<i class='las la-angle-right'></i>"
|
||||
],
|
||||
responsive: {
|
||||
0: {
|
||||
items: 1
|
||||
},
|
||||
600: {
|
||||
items: 1
|
||||
},
|
||||
1000: {
|
||||
items: 1
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/************************************************************************************ MAGNIFIC POPUPS STARTS */
|
||||
|
||||
|
||||
$('.image-popup-vertical-fit').magnificPopup({
|
||||
type: 'image',
|
||||
closeOnContentClick: true,
|
||||
mainClass: 'mfp-img-mobile',
|
||||
image: {
|
||||
verticalFit: true
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$('.image-popup-fit-width').magnificPopup({
|
||||
type: 'image',
|
||||
closeOnContentClick: true,
|
||||
image: {
|
||||
verticalFit: false
|
||||
}
|
||||
});
|
||||
|
||||
$('.image-popup-no-margins').magnificPopup({
|
||||
type: 'image',
|
||||
closeOnContentClick: true,
|
||||
closeBtnInside: false,
|
||||
fixedContentPos: true,
|
||||
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
|
||||
image: {
|
||||
verticalFit: true
|
||||
},
|
||||
zoom: {
|
||||
enabled: true,
|
||||
duration: 300 // don't foget to change the duration also in CSS
|
||||
}
|
||||
});
|
||||
|
||||
$('.popup-gallery').magnificPopup({
|
||||
delegate: 'a',
|
||||
type: 'image',
|
||||
tLoading: 'Loading image #%curr%...',
|
||||
mainClass: 'mfp-img-mobile',
|
||||
gallery: {
|
||||
enabled: true,
|
||||
navigateByImgClick: true,
|
||||
preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
|
||||
},
|
||||
image: {
|
||||
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
|
||||
titleSrc: function (item) {
|
||||
return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
|
||||
disableOn: 700,
|
||||
type: 'iframe',
|
||||
mainClass: 'mfp-fade',
|
||||
removalDelay: 160,
|
||||
preloader: false,
|
||||
|
||||
fixedContentPos: false
|
||||
});
|
||||
|
||||
/************************************************************************************ TOP NAV WHITE BACKGROUND STARTS */
|
||||
// Top Navigation White Background.
|
||||
$(window).scroll(() => {
|
||||
if ($(window).width() > 991) {
|
||||
var windowTop = $(window).scrollTop();
|
||||
windowTop > 0 ? $('nav').addClass('nav-bg') : $('nav').removeClass('nav-bg');
|
||||
}
|
||||
|
||||
});
|
||||
$(window).on('resize', function () {
|
||||
if ($(window).width() < 992) {
|
||||
$('nav').addClass('nav-bg');
|
||||
} else {
|
||||
$('nav').removeClass('nav-bg');
|
||||
}
|
||||
});
|
||||
$(document).ready(function () {
|
||||
$(window).trigger('resize');
|
||||
});
|
||||
|
||||
/************************************************************************************ SCROLL TO TOP STARTS */
|
||||
$(window).scroll(function () {
|
||||
if ($(this).scrollTop() > 100) {
|
||||
$('.back-to-top').fadeIn();
|
||||
} else {
|
||||
$('.back-to-top').fadeOut();
|
||||
}
|
||||
});
|
||||
|
||||
$('.back-to-top').fadeOut();
|
||||
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,525 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Main CSS -->
|
||||
<link href="assets/css/main.css" rel="stylesheet" >
|
||||
<title>Creative Studio</title>
|
||||
</head>
|
||||
<body data-bs-spy="scroll" data-bs-target="#navigation">
|
||||
<!-- PRELOADER STARTS
|
||||
========================================================================= -->
|
||||
<div id="main-preloader" class="main-preloader semi-dark-background">
|
||||
<div class="main-preloader-inner center">
|
||||
<h1 class="preloader-percentage center">
|
||||
<span class="preloader-percentage-text">0</span> <!-- Show Percentage Number -->
|
||||
<span class="percentage">%</span>
|
||||
</h1>
|
||||
<div class="preloader-bar-outer">
|
||||
<div class="preloader-bar"></div>
|
||||
<!-- Percentage Precess Bar -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.. PRELOADER ENDS
|
||||
========================================================================= -->
|
||||
<!-- NAVIGATION STARTS
|
||||
========================================================================= -->
|
||||
<nav id="navigation" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html"><img src="assets/imgs/logo-white.png" class="img-fluid" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="nav navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Home </a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Portfolio</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="blog.html">Blog</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="ps-3 d-none d-lg-block">
|
||||
<a href="https://themeforest.net/item/this-one-one-page-responsive-website-template/7236268?ref=alia" class="btn btn-primary" target="_blank">BUY NOW</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- INNER BANNER STARTS
|
||||
========================================================================= -->
|
||||
<div class="inner-banner-style banner-img-01" id="top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="info text-center">
|
||||
<h6 class="shuffletext">/ Standard Blog</h6>
|
||||
<h2>
|
||||
We Move The Digital<br class="d-none d-md-block" />
|
||||
Industry Forward
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /. INNER BANNER ENDS
|
||||
========================================================================= -->
|
||||
<!-- BLOG GRID STARTS
|
||||
========================================================================= -->
|
||||
<section class="blog blog-inner-page">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Left Column Starts-->
|
||||
<div class="col-12 col-lg-9 pe-3 pe-lg-5">
|
||||
<div class="row g-0 g-lg-5">
|
||||
<!-- Blog Post Starts-->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="blog-post pb-md-2">
|
||||
<div class="pic pb-4">
|
||||
<img src="assets/imgs/blog/1.jpg" class="img-fluid" alt="" >
|
||||
</div>
|
||||
<h4><a href="#">/TECHNOLOGY</a></h4>
|
||||
<h2><a href="single-blog-post-right-sidebar.html">3 Four-Star Resorts Bolster Costa Rica’s Luxury Reputation</a></h2>
|
||||
<p>
|
||||
Cepteur sint occaecat cupidatat proident, taken possession
|
||||
of my entire soul, like these sweet mornings of
|
||||
springCepteur sint occaecat cupidt proident, taken
|
||||
possession of my entire soul ...
|
||||
</p>
|
||||
<ul class="meta">
|
||||
<li>
|
||||
<a href=""><i class="las la-user-alt"></i> John</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-comment"></i> 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-eye"></i> 5.5K</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog Post Ends-->
|
||||
<!-- Blog Post Starts-->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="blog-post pb-md-2">
|
||||
<div class="pic pb-4">
|
||||
<img src="assets/imgs/blog/2.jpg" class="img-fluid" alt="" >
|
||||
</div>
|
||||
<h4><a href="#">/TECHNOLOGY</a></h4>
|
||||
<h2><a href="single-blog-post-left-sidebar.html">Imagine Losing 20 Pounds In 14 Days!</a></h2>
|
||||
<p>
|
||||
Cepteur sint occaecat cupidatat proident, taken possession
|
||||
of my entire soul, like these sweet mornings of
|
||||
springCepteur sint occaecat cupidt proident, taken
|
||||
possession of my entire soul ...
|
||||
</p>
|
||||
<ul class="meta">
|
||||
<li>
|
||||
<a href=""><i class="las la-user-alt"></i> John</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-comment"></i> 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-eye"></i> 5.5K</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog Post Ends-->
|
||||
<!-- Blog Post Starts-->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="blog-post pb-md-2">
|
||||
<div class="pic pb-4">
|
||||
<img src="assets/imgs/blog/3.jpg" class="img-fluid" alt="" >
|
||||
</div>
|
||||
<h4><a href="#">/TECHNOLOGY</a></h4>
|
||||
<h2><a href="single-blog-post-left-sidebar.html">Burberry Brings London to LA, Including the Guards</a></h2>
|
||||
<p>
|
||||
Cepteur sint occaecat cupidatat proident, taken possession
|
||||
of my entire soul, like these sweet mornings of
|
||||
springCepteur sint occaecat cupidt proident, taken
|
||||
possession of my entire soul ...
|
||||
</p>
|
||||
<ul class="meta">
|
||||
<li>
|
||||
<a href=""><i class="las la-user-alt"></i> John</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-comment"></i> 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-eye"></i> 5.5K</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog Post Ends-->
|
||||
<!-- Blog Post Starts-->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="blog-post pb-md-2">
|
||||
<div class="pic pb-4">
|
||||
<img src="assets/imgs/blog/4.jpg" class="img-fluid" alt="" >
|
||||
</div>
|
||||
<h4><a href="#">/TECHNOLOGY</a></h4>
|
||||
<h2><a href="single-blog-post-right-sidebar.html">For the First Time, Lilly Pulitzer Hosts a Resort Preview</a></h2>
|
||||
<p>
|
||||
Cepteur sint occaecat cupidatat proident, taken possession
|
||||
of my entire soul, like these sweet mornings of
|
||||
springCepteur sint occaecat cupidt proident, taken
|
||||
possession of my entire soul ...
|
||||
</p>
|
||||
<ul class="meta">
|
||||
<li>
|
||||
<a href=""><i class="las la-user-alt"></i> John</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-comment"></i> 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-eye"></i> 5.5K</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog Post Ends-->
|
||||
<!-- Blog Post Starts-->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="blog-post pb-md-2">
|
||||
<div class="pic pb-4">
|
||||
<img src="assets/imgs/blog/5.jpg" class="img-fluid" alt="" >
|
||||
</div>
|
||||
<h4><a href="#">/TECHNOLOGY</a></h4>
|
||||
<h2><a href="single-blog-post-left-sidebar.html">For the First Time, Lilly Pulitzer Hosts a Resort Preview</a></h2>
|
||||
<p>
|
||||
Cepteur sint occaecat cupidatat proident, taken possession
|
||||
of my entire soul, like these sweet mornings of
|
||||
springCepteur sint occaecat cupidt proident, taken
|
||||
possession of my entire soul ...
|
||||
</p>
|
||||
<ul class="meta">
|
||||
<li>
|
||||
<a href=""><i class="las la-user-alt"></i> John</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-comment"></i> 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-eye"></i> 5.5K</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog Post Ends-->
|
||||
<!-- Blog Post Starts-->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="blog-post pb-md-2">
|
||||
<div class="pic pb-4">
|
||||
<img src="assets/imgs/blog/6.jpg" class="img-fluid" alt="" >
|
||||
</div>
|
||||
<h4><a href="#">/TECHNOLOGY</a></h4>
|
||||
<h2><a href="single-blog-post-right-sidebar.html">For the First Time, Lilly Pulitzer Hosts a Resort Preview</a></h2>
|
||||
<p>
|
||||
Cepteur sint occaecat cupidatat proident, taken possession
|
||||
of my entire soul, like these sweet mornings of
|
||||
springCepteur sint occaecat cupidt proident, taken
|
||||
possession of my entire soul ...
|
||||
</p>
|
||||
<ul class="meta">
|
||||
<li>
|
||||
<a href=""><i class="las la-user-alt"></i> John</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-comment"></i> 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-eye"></i> 5.5K</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog Post Ends-->
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<ul class="pagination pt-0 pt-md-4 pt-lg-5">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true"><i class="las la-angle-left"></i></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">2</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true"
|
||||
><i class="las la-angle-right"></i
|
||||
></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Left Column Ends-->
|
||||
<!-- Right Column Starts-->
|
||||
<div class="col-12 col-lg-3 sidebar pt-5 pt-lg-0">
|
||||
<!-- Search Starts -->
|
||||
<div class="search">
|
||||
<h2>Search</h2>
|
||||
<div class="searchform3">
|
||||
<form id="search3">
|
||||
<input type="text" class="form-control s" id="s3" placeholder="Type your keywork">
|
||||
<button type="submit" class="sbtn3"><i class="las la-search"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search Ends -->
|
||||
<!-- Categories Starts -->
|
||||
<div class="categories">
|
||||
<h2>Categories</h2>
|
||||
<ul>
|
||||
<li class="clearfix">
|
||||
<div class="info">
|
||||
<h2><a href="">Web Development</a></h2>
|
||||
<h3>Lorem ipsum dolor sit amet</h3>
|
||||
</div>
|
||||
<div class="posts">[30]</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="info">
|
||||
<h2><a href="">Multipurpose Site</a></h2>
|
||||
<h3>Consectetur adipisicing elit sed</h3>
|
||||
</div>
|
||||
<div class="posts">[19]</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="info">
|
||||
<h2><a href="">Technology</a></h2>
|
||||
<h3>Eiusmod tempor incididunt ut</h3>
|
||||
</div>
|
||||
<div class="posts">[40]</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="info">
|
||||
<h2><a href="">Free Support</a></h2>
|
||||
<h3>Laboris nisi ut aliquip ex ea</h3>
|
||||
</div>
|
||||
<div class="posts">[28]</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Categories Ends -->
|
||||
<!-- Posts Tabs Starts -->
|
||||
<div class="posts-tabs">
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link active" id="popular-tab" data-bs-toggle="tab" href="#popular" role="tab" aria-controls="popular" aria-selected="true">Popular</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link" id="recent-tab" data-bs-toggle="tab" href="#recent" role="tab" aria-controls="recent" aria-selected="false">Recent</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="popular" role="tabpanel" aria-labelledby="popular-tab">
|
||||
<ul>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/1.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Cepteur sint occae cat cupidatat proident ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/2.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/3.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Lorem ipsum dolor sit amet consectetur ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/4.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="recent" role="tabpanel" aria-labelledby="recent-tab">
|
||||
<ul>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/5.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/6.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/7.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/8.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Posts Tabs Ends -->
|
||||
<!-- About Us Starts -->
|
||||
<div class="about">
|
||||
<h2>About Us</h2>
|
||||
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
|
||||
</div>
|
||||
<!-- About Us Ends -->
|
||||
<!-- Photos Starts -->
|
||||
<div class="photos">
|
||||
<h2>Photos</h2>
|
||||
<div class="row popup-gallery">
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/1.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/1.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/2.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/2.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/3.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/3.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/4.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/4.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/5.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/5.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/6.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/6.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/7.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/7.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/8.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/8.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/9.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/9.jpg" class="img-fluid" alt=""></a></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Photos Ends -->
|
||||
<!-- Tags Starts -->
|
||||
<div class="tags">
|
||||
<h2>Tags</h2>
|
||||
<div class="tag-list">
|
||||
<a href="#" >Website</a>
|
||||
<a href="#" >Responsive</a>
|
||||
<a href="#" >Multipurpose</a>
|
||||
<a href="#" >SEO</a>
|
||||
<a href="#" >Wordpress</a>
|
||||
<a href="#" >Clean Design</a>
|
||||
<a href="#" >Multipages</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tags Ends -->
|
||||
</div>
|
||||
<!-- Right Column Ends-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /.. BLOG GRID ENDS
|
||||
========================================================================= -->
|
||||
<!-- FOOTER STARTS
|
||||
========================================================================= -->
|
||||
<footer class="dark-grey-bg" id="contact">
|
||||
<div class="container text-center">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="herotext">
|
||||
|
||||
<h2>Let's Keep in touch</h2>
|
||||
<h5 class="email"><a href="">hello@thisone.com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class="socialmedia">
|
||||
<li><a href="#">Facebook</a></li>
|
||||
<li><a href="">Instagram</a></li>
|
||||
<li><a href="">Twitter</a></li>
|
||||
</ul>
|
||||
<div class="copyright">
|
||||
ThisOne © 2021
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- /.. FOOTER ENDS
|
||||
========================================================================= -->
|
||||
<!-- TO TOP STARTS
|
||||
========================================================================= -->
|
||||
<a href="#top" class="back-to-top"><i class="las la-angle-up"></i></a>
|
||||
<!-- /.. TO TOP ENDS
|
||||
========================================================================= -->
|
||||
<!-- INCLUD ALL JS FILES
|
||||
========================================================================= -->
|
||||
<!--JQUERY MIN JS-->
|
||||
<script src="assets/lib/jquery-1.12.4/jquery.min.js"></script>
|
||||
<!--BOOTSTRAP JS-->
|
||||
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
|
||||
<!-- PRELOADER -->
|
||||
<script src="assets/lib/preloader/sPreloader.js"></script>
|
||||
<!-- OWL CAROUSEL -->
|
||||
<script src="assets/lib/owl-carousel/owl.carousel.js"></script>
|
||||
<!-- ISOTOPE GALLERY -->
|
||||
<script src="assets/lib/isotope/jquery.isotope.min.js"></script>
|
||||
<script src="assets/lib/isotope/custom-isotope-mansory.js"></script>
|
||||
<!-- MAGNIFIC POPUP -->
|
||||
<script src="assets/lib/magnific-popup/jquery.magnific-popup.js"></script>
|
||||
<!-- CUSTOM JS -->
|
||||
<script src="assets/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,853 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Main CSS -->
|
||||
<link href="assets/css/main.css" rel="stylesheet">
|
||||
<title>Creative Studio</title>
|
||||
</head>
|
||||
<body data-bs-spy="scroll" data-bs-target="#navigation" id="home">
|
||||
<!-- PRELOADER STARTS
|
||||
========================================================================= -->
|
||||
<div id="main-preloader" class="main-preloader semi-dark-background">
|
||||
<div class="main-preloader-inner center">
|
||||
<h1 class="preloader-percentage center">
|
||||
<span class="preloader-percentage-text">0</span> <!-- Show Percentage Number -->
|
||||
<span class="percentage">%</span>
|
||||
</h1>
|
||||
<div class="preloader-bar-outer">
|
||||
<div class="preloader-bar"></div>
|
||||
<!-- Percentage Precess Bar -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.. PRELOADER ENDS
|
||||
========================================================================= -->
|
||||
<!-- NAVIGATION STARTS
|
||||
========================================================================= -->
|
||||
<nav id="navigation" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#"><img src="assets/imgs/logo-white.png" class="img-fluid" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="nav navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#home">Home </a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#about" >About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#services">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#gallery">Gallery</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#team">team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="blog.html">Blog</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#contact">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="ps-3 d-none d-lg-block">
|
||||
<a href="https://themeforest.net/item/this-one-one-page-responsive-website-template/7236268?ref=alia" class="btn btn-primary" target="_blank">BUY NOW</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- NAVIGATION ENDS
|
||||
========================================================================= -->
|
||||
<!-- SLIDER STARTS
|
||||
========================================================================= -->
|
||||
|
||||
<!-- SLIDER STARTS
|
||||
========================================================================= -->
|
||||
<section id="slider" class="p-0">
|
||||
<div id="rev_slider_1014_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="typewriter-effect" data-source="gallery" style="background-color:transparent;padding:0px;">
|
||||
<!-- START REVOLUTION SLIDER 5.4.1 fullscreen mode -->
|
||||
<div id="rev_slider_1014_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.4.1">
|
||||
<ul>
|
||||
<!-- SLIDE -->
|
||||
<li data-index="rs-2800" data-transition="slidingoverlayhorizontal" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="assets/imgs/slider/Dancing-Bulbs-100x50.jpg" data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
|
||||
<!-- MAIN IMAGE -->
|
||||
<img src="assets/imgs/slider/Dancing-Bulbs.jpg" alt="" data-bgposition="center center" data-bgfit="cover" class="rev-slidebg" data-no-retina>
|
||||
<!-- LAYERS -->
|
||||
<!-- BACKGROUND VIDEO LAYER -->
|
||||
<div class="rs-background-video-layer"
|
||||
data-forcerewind="on"
|
||||
data-volume="mute"
|
||||
data-videowidth="100%"
|
||||
data-videoheight="100%"
|
||||
data-videomp4="assets/imgs/slider/Dancing-Bulbs.mp4"
|
||||
data-videopreload="auto"
|
||||
data-videoloop="loop"
|
||||
data-forceCover="1"
|
||||
data-aspectratio="16:9"
|
||||
data-autoplay="true"
|
||||
data-autoplayonlyfirsttime="false"
|
||||
></div>
|
||||
<!-- LAYER NR. 1 -->
|
||||
<div class="tp-caption tp-shape tp-shapewrapper "
|
||||
id="slide-2800-layer-7"
|
||||
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
|
||||
data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
|
||||
data-width="full"
|
||||
data-height="full"
|
||||
data-whitespace="nowrap"
|
||||
data-type="shape"
|
||||
data-basealign="slide"
|
||||
data-responsive_offset="off"
|
||||
data-responsive="off"
|
||||
data-frames='[{"from":"opacity:0;","speed":500,"to":"o:1;","delay":0,"ease":"Power4.easeOut"},{"speed":5000,"to":"opacity:0;","ease":"Power4.easeInOut"}]'
|
||||
data-textAlign="['left','left','left','left']"
|
||||
data-paddingtop="[0,0,0,0]"
|
||||
data-paddingright="[0,0,0,0]"
|
||||
data-paddingbottom="[0,0,0,0]"
|
||||
data-paddingleft="[0,0,0,0]"
|
||||
style="z-index: 5;background-color:rgba(0, 0, 0, 0.50);border-color:rgba(0, 0, 0, 0);border-width:0px;"> </div>
|
||||
<!-- LAYER NR. 2 -->
|
||||
<div class="tp-caption tp-resizeme"
|
||||
id="slide-2800-layer-1"
|
||||
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
|
||||
data-y="['middle','middle','middle','middle']" data-voffset="['-80','-80','-130','-157']"
|
||||
data-fontsize="['130','120','90','70']"
|
||||
data-lineheight="['130','120','90','70']"
|
||||
data-width="none"
|
||||
data-height="none"
|
||||
data-whitespace="nowrap"
|
||||
data-type="text"
|
||||
data-responsive_offset="on"
|
||||
data-frames='[{"from":"y:50px;sX:1;sY:1;opacity:0;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
|
||||
data-textAlign="['center','center','center','center']"
|
||||
data-paddingtop="[0,0,0,0]"
|
||||
data-paddingright="[0,0,0,0]"
|
||||
data-paddingbottom="[0,0,0,0]"
|
||||
data-paddingleft="[0,0,0,0]"
|
||||
style="z-index: 6; white-space: nowrap; font-size: 130px; line-height: 130px; font-weight: 700; color: rgba(255, 255, 255, 1.00);font-family:Arial, Helvetica, sans-serif;border-width:0px;letter-spacing:-7px;">Creative Studio</div>
|
||||
<!-- LAYER NR. 3 -->
|
||||
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme"
|
||||
id="slide-2800-layer-3"
|
||||
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
|
||||
data-y="['middle','middle','middle','middle']" data-voffset="['16','16','-54','-89']"
|
||||
data-width="60"
|
||||
data-height="3"
|
||||
data-whitespace="nowrap"
|
||||
data-type="shape"
|
||||
data-responsive_offset="on"
|
||||
data-frames='[{"from":"y:50px;opacity:0;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
|
||||
data-textAlign="['left','left','left','left']"
|
||||
data-paddingtop="[0,0,0,0]"
|
||||
data-paddingright="[0,0,0,0]"
|
||||
data-paddingbottom="[0,0,0,0]"
|
||||
data-paddingleft="[0,0,0,0]"
|
||||
style="z-index: 7;background-color:rgba(38, 211, 105, 1.00);border-color:rgba(0, 0, 0, 0);border-width:0px;"> </div>
|
||||
<!-- LAYER NR. 4 -->
|
||||
<div class="tp-caption tp-resizeme"
|
||||
id="slide-2800-layer-2"
|
||||
data-x="['center','center','center','center']" data-hoffset="['-10','-10','-10','-10']"
|
||||
data-y="['middle','middle','middle','middle']" data-voffset="['65','65','-8','-32']"
|
||||
data-fontsize="['40','40','30','30']"
|
||||
data-width="['640','640','480','360']"
|
||||
data-height="none"
|
||||
data-whitespace="['nowrap','nowrap','normal','normal']"
|
||||
data-type="text"
|
||||
data-typewriter='{"lines":"167%20Clients%20Worldwide.,23%20Qualified%20Employees.,150%20Cups%20of%20Coffee%20per%20Day.","enabled":"on","speed":"60","delays":"1%7C100","looped":"on","cursorType":"one","blinking":"on","word_delay":"off","sequenced":"on","hide_cursor":"off","start_delay":"1500","newline_delay":"1000","deletion_speed":"20","deletion_delay":"1000","blinking_speed":"500","linebreak_delay":"60","cursor_type":"two","background":"off"}'
|
||||
data-responsive_offset="on"
|
||||
data-frames='[{"from":"y:50px;sX:1;sY:1;opacity:0;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
|
||||
data-textAlign="['center','center','center','center']"
|
||||
data-paddingtop="[0,0,0,0]"
|
||||
data-paddingright="[0,0,0,0]"
|
||||
data-paddingbottom="[0,0,0,0]"
|
||||
data-paddingleft="[0,0,0,0]"
|
||||
style="z-index: 8; min-width: 640px; max-width: 640px; white-space: nowrap; font-size: 40px; line-height: 40px; font-weight: 400; color: rgba(255, 255, 255, 1.00);font-family:Georgia, serif;font-style:italic;border-width:0px;">Dedicated. Inspired. Passionate. </div>
|
||||
<!-- LAYER NR. 5 -->
|
||||
<div class="tp-caption rev-btn tp-resizeme"
|
||||
id="slide-2800-layer-4"
|
||||
data-x="['right','right','center','center']" data-hoffset="['660','550','0','0']"
|
||||
data-y="['middle','middle','middle','middle']" data-voffset="['240','240','100','83']"
|
||||
data-width="none"
|
||||
data-height="none"
|
||||
data-whitespace="nowrap"
|
||||
data-type="button"
|
||||
data-actions='[{"event":"click","action":"scrollbelow","offset":"px","delay":""}]'
|
||||
data-responsive_offset="on"
|
||||
data-frames='[{"from":"x:-50px;opacity:0;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"},{"frame":"hover","speed":"150","ease":"Power2.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0, 0, 0, 1.00);bg:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 0);bw:2px 2px 2px 2px;"}]'
|
||||
data-textAlign="['left','left','left','left']"
|
||||
data-paddingtop="[0,0,0,0]"
|
||||
data-paddingright="[50,50,50,50]"
|
||||
data-paddingbottom="[0,0,0,0]"
|
||||
data-paddingleft="[50,50,50,50]"
|
||||
style="z-index: 9; white-space: nowrap; font-size: 15px; line-height: 46px; font-weight: 700; color: rgba(255, 255, 255, 1.00);font-family:Arial, Helvetica, sans-serif;background-color:rgba(0, 0, 0, 0);border-color:rgba(255, 255, 255, 0.25);border-style:solid;border-width:2px;border-radius:4px 4px 4px 4px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;letter-spacing:5px;cursor:pointer;">ABOUT US </div>
|
||||
<!-- LAYER NR. 6 -->
|
||||
<div class="tp-caption tp-resizeme"
|
||||
id="slide-2800-layer-6"
|
||||
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
|
||||
data-y="['middle','middle','middle','middle']" data-voffset="['237','237','158','141']"
|
||||
data-width="none"
|
||||
data-height="none"
|
||||
data-whitespace="nowrap"
|
||||
data-type="text"
|
||||
data-responsive_offset="on"
|
||||
data-frames='[{"from":"y:50px;opacity:0;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
|
||||
data-textAlign="['left','left','left','left']"
|
||||
data-paddingtop="[0,0,0,0]"
|
||||
data-paddingright="[0,0,0,0]"
|
||||
data-paddingbottom="[0,0,0,0]"
|
||||
data-paddingleft="[0,0,0,0]"
|
||||
style="z-index: 10; white-space: nowrap; font-size: 25px; line-height: 25px; font-weight: 400; color: rgba(255, 255, 255, 1.00);font-family:Georgia, serif;font-style:italic;border-width:0px;">or </div>
|
||||
<!-- LAYER NR. 7 -->
|
||||
<div class="tp-caption rev-btn tp-resizeme"
|
||||
id="slide-2800-layer-5"
|
||||
data-x="['left','left','center','center']" data-hoffset="['660','550','0','0']"
|
||||
data-y="['middle','middle','middle','middle']" data-voffset="['240','240','224','207']"
|
||||
data-width="none"
|
||||
data-height="none"
|
||||
data-whitespace="nowrap"
|
||||
data-type="button"
|
||||
data-actions='[{"event":"click","action":"scrollbelow","offset":"px","delay":""}]'
|
||||
data-responsive_offset="on"
|
||||
data-frames='[{"from":"x:50px;opacity:0;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"},{"frame":"hover","speed":"150","ease":"Power2.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0, 0, 0, 1.00);bg:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 0);bw:2px 2px 2px 2px;"}]'
|
||||
data-textAlign="['left','left','left','left']"
|
||||
data-paddingtop="[0,0,0,0]"
|
||||
data-paddingright="[50,50,50,50]"
|
||||
data-paddingbottom="[0,0,0,0]"
|
||||
data-paddingleft="[50,50,50,50]"
|
||||
style="z-index: 11; white-space: nowrap; font-size: 15px; line-height: 46px; font-weight: 700; color: rgba(255, 255, 255, 1.00);font-family:Arial, Helvetica, sans-serif;background-color:rgba(0, 0, 0, 0);border-color:rgba(255, 255, 255, 0.25);border-style:solid;border-width:2px;border-radius:4px 4px 4px 4px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;letter-spacing:5px;cursor:pointer;">CONTACT </div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END REVOLUTION SLIDER -->
|
||||
</section>
|
||||
<!-- /. SLIDER ENDS -->
|
||||
<!-- /.. SLIDER ENDS
|
||||
========================================================================= -->
|
||||
<!-- ABOUT US STARTS
|
||||
========================================================================= -->
|
||||
<section class="home-intro" id="about" >
|
||||
<div class="container">
|
||||
<div class="row pb-4 align-items-center">
|
||||
<div class="col-12 col-lg-5">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/about/pic1.jpg" class="img-fluid" style="max-width: 100%;" alt="">
|
||||
<div class="about-circle">
|
||||
<img src="assets/imgs/play-reel.svg" class="img-fluid cir" alt="">
|
||||
<div class="icon"><a class="popup-vimeo" href="https://vimeo.com/45830194"><img src="assets/imgs/play-icon.svg" class="img-fluid" alt=""></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 offset-lg-1">
|
||||
<div class="herotext">
|
||||
<h6 class="pb-2">/Who we are</h6>
|
||||
<h2>Philosophy</h2>
|
||||
<h5 class="pt-4">We strive to create incredible experiences for people by creating new opportunities for brands, technology and culture.
|
||||
<br><br>Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, , like these sweet mornings of spring taken possession of my entire soul.
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /. ABOUT US ENDS
|
||||
========================================================================= -->
|
||||
|
||||
<!-- SERVICES STARTS
|
||||
========================================================================= -->
|
||||
<section class="services text-center" id="services">
|
||||
<div class="container">
|
||||
<div class="row pb-4">
|
||||
<div class="col-12">
|
||||
<div class="herotext">
|
||||
<h6 class="pb-2">/What we do</h6>
|
||||
<h2><span style="font-weight: 200;">Creative</span> Studio</h2>
|
||||
<h5 class="pt-2">Cepteur sint occaecat cupidatat proident, taken possession of my <br>entire soul, like these sweet mornings of spring.</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="services-carousel">
|
||||
<div class="block">
|
||||
<div class="pic">
|
||||
<img src="assets/imgs/services/1.jpg" class="img-fluid" alt="">
|
||||
|
||||
<div class="info">
|
||||
<h2>Web & Digital</h2>
|
||||
<h3>Cepteur sint</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="pic">
|
||||
<img src="assets/imgs/services/2.jpg" class="img-fluid" alt="">
|
||||
|
||||
|
||||
<div class="info">
|
||||
<h2>Photography</h2>
|
||||
<h3>Cepteur sint</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="pic">
|
||||
<img src="assets/imgs/services/3.jpg" class="img-fluid" alt="">
|
||||
|
||||
|
||||
<div class="info">
|
||||
<h2>Shooting</h2>
|
||||
<h3>Cepteur sint</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="pic">
|
||||
<img src="assets/imgs/services/4.jpg" class="img-fluid" alt="">
|
||||
|
||||
|
||||
<div class="info">
|
||||
<h2>Video</h2>
|
||||
<h3>Cepteur sint</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /. SERVICES ENDS
|
||||
========================================================================= -->
|
||||
<!-- PORTFOLIO STARTS
|
||||
========================================================================= -->
|
||||
<section id="gallery" class="portfolio">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="herotext text-center">
|
||||
<h6>/Gallery</h6>
|
||||
<h2><span style="font-weight: 200;">Our</span> Work</h2>
|
||||
<h5 class="pt-2">There are three responses to a piece of design – <br class="d-none d-md-block">yes, no, and WOW! Wow is the one to aim for.</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pb-5">
|
||||
<!-- Portfolio Nav Starts -->
|
||||
<div class="col-12">
|
||||
<div id="options">
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter" data-option-value="*" class="selected">ALL</a></li>
|
||||
<li><a href="#filter" data-option-value=".category-1">Web</a></li>
|
||||
<li><a href="#filter" data-option-value=".category-2">Photos</a></li>
|
||||
<li><a href="#filter" data-option-value=".videos">Videos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Portfolio Nav Ends -->
|
||||
<div class="col-12">
|
||||
<!-- Portfolio Thumbs Starts -->
|
||||
<div class="make3columns portfolio-grid">
|
||||
<!-- Project 1 Starts -->
|
||||
<figure class="item category-2">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/portfolio/1.jpg" alt="">
|
||||
<!-- Picture Overlay Starts -->
|
||||
<div class="text-overlay">
|
||||
<div class="category">category-2</div>
|
||||
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/1.jpg" title="Product Name">Product Name</a></h1>
|
||||
</div>
|
||||
<div class="icon-overlay">
|
||||
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/1.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
|
||||
</div>
|
||||
<!-- Picture Overlay Ends -->
|
||||
</div>
|
||||
</figure>
|
||||
<!-- Project 1 Ends -->
|
||||
<!-- Project 2 Starts -->
|
||||
<figure class="item videos">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/portfolio/vid-1.jpg" alt="">
|
||||
<!-- Picture Overlay Starts -->
|
||||
<div class="text-overlay">
|
||||
<div class="category">video</div>
|
||||
<h1><a class="popup-vimeo" href="https://vimeo.com/45830194">Product Name</a></h1>
|
||||
</div>
|
||||
<div class="icon-overlay">
|
||||
<div class="icon"><a class="popup-vimeo" href="https://vimeo.com/45830194"><i class="las la-expand-arrows-alt"></i></a></div>
|
||||
</div>
|
||||
<!-- Picture Overlay Ends -->
|
||||
</div>
|
||||
</figure>
|
||||
<!-- Project 2 Ends -->
|
||||
<!-- Project 4 Starts -->
|
||||
<figure class="item category-1">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/portfolio/2.jpg" alt="">
|
||||
<!-- Picture Overlay Starts -->
|
||||
<div class="text-overlay">
|
||||
<div class="category">category-1</div>
|
||||
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/2.jpg" title="Product Name">Product Name</a></h1>
|
||||
</div>
|
||||
<div class="icon-overlay">
|
||||
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/2.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
|
||||
</div>
|
||||
<!-- Picture Overlay Ends -->
|
||||
</div>
|
||||
</figure>
|
||||
<!-- Project 4 Ends -->
|
||||
<!-- Project 3 Starts -->
|
||||
<figure class="item category-2">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/portfolio/3.jpg" alt="">
|
||||
<!-- Picture Overlay Starts -->
|
||||
<div class="text-overlay">
|
||||
<div class="category">category-1</div>
|
||||
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/3.jpg" title="Product Name">Product Name</a></h1>
|
||||
</div>
|
||||
<div class="icon-overlay">
|
||||
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/3.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
|
||||
</div>
|
||||
<!-- Picture Overlay Ends -->
|
||||
</div>
|
||||
</figure>
|
||||
<!-- Project 3 Ends -->
|
||||
<!-- Project 8 Starts -->
|
||||
<figure class="item category-1">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/portfolio/4.jpg" alt="">
|
||||
<!-- Picture Overlay Starts -->
|
||||
<div class="text-overlay">
|
||||
<div class="category">category-1</div>
|
||||
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/4.jpg" title="Product Name">Product Name</a></h1>
|
||||
</div>
|
||||
<div class="icon-overlay">
|
||||
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/4.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
|
||||
</div>
|
||||
<!-- Picture Overlay Ends -->
|
||||
</div>
|
||||
</figure>
|
||||
<!-- Project 8 Ends -->
|
||||
<!-- Project 5 Starts -->
|
||||
<figure class="item videos">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/portfolio/vid-3.jpg" alt="">
|
||||
<!-- Picture Overlay Starts -->
|
||||
<div class="text-overlay">
|
||||
<div class="category">video</div>
|
||||
<h1><a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Product Name</a></h1>
|
||||
</div>
|
||||
<div class="icon-overlay">
|
||||
<div class="icon"><a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto"><i class="las la-expand-arrows-alt"></i></a></div>
|
||||
</div>
|
||||
<!-- Picture Overlay Ends -->
|
||||
</div>
|
||||
</figure>
|
||||
<!-- Project 5 Ends -->
|
||||
<!-- Project 7 Starts -->
|
||||
<figure class="item category-1">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/portfolio/5.jpg" alt="">
|
||||
<!-- Picture Overlay Starts -->
|
||||
<div class="text-overlay">
|
||||
<div class="category">Website</div>
|
||||
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/5.jpg" title="Product Name">Product Name</a></h1>
|
||||
</div>
|
||||
<div class="icon-overlay">
|
||||
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/5.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
|
||||
</div>
|
||||
<!-- Picture Overlay Ends -->
|
||||
</div>
|
||||
</figure>
|
||||
<!-- Project 7 Ends -->
|
||||
<!-- Project 6 Starts -->
|
||||
<figure class="item category-2">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/portfolio/6.jpg" alt="">
|
||||
<!-- Picture Overlay Starts -->
|
||||
<div class="text-overlay">
|
||||
<div class="category">category-2</div>
|
||||
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/6.jpg" title="Product Name">Product Name</a></h1>
|
||||
</div>
|
||||
<div class="icon-overlay">
|
||||
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/6.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
|
||||
</div>
|
||||
<!-- Picture Overlay Ends -->
|
||||
</div>
|
||||
</figure>
|
||||
<!-- Project 6 Ends -->
|
||||
<!-- Project 1 Starts -->
|
||||
<figure class="item videos">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/portfolio/vid-4.jpg" alt="">
|
||||
<!-- Picture Overlay Starts -->
|
||||
<div class="text-overlay">
|
||||
<div class="category">video</div>
|
||||
<h1><a class="popup-vimeo" href="https://vimeo.com/45830194">Product Name</a></h1>
|
||||
</div>
|
||||
<div class="icon-overlay">
|
||||
<div class="icon"><a class="popup-vimeo" href="https://vimeo.com/45830194"><i class="las la-expand-arrows-alt"></i></a></div>
|
||||
</div>
|
||||
<!-- Picture Overlay Ends -->
|
||||
</div>
|
||||
</figure>
|
||||
<!-- Project 1 Ends -->
|
||||
<!-- Project 4 Starts -->
|
||||
<figure class="item category-1">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/portfolio/7.jpg" alt="">
|
||||
<!-- Picture Overlay Starts -->
|
||||
<div class="text-overlay">
|
||||
<div class="category">category-1</div>
|
||||
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/7.jpg" title="Product Name">Product Name</a></h1>
|
||||
</div>
|
||||
<div class="icon-overlay">
|
||||
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/7.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
|
||||
</div>
|
||||
<!-- Picture Overlay Ends -->
|
||||
</div>
|
||||
</figure>
|
||||
<!-- Project 4 Ends -->
|
||||
<!-- Project 2 Starts -->
|
||||
<figure class="item videos">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/portfolio/vid-2.jpg" alt="">
|
||||
<!-- Picture Overlay Starts -->
|
||||
<div class="text-overlay">
|
||||
<div class="category">video</div>
|
||||
<h1><a class="popup-vimeo" href="https://vimeo.com/45830194">Product Name</a></h1>
|
||||
</div>
|
||||
<div class="icon-overlay">
|
||||
<div class="icon"><a class="popup-vimeo" href="https://vimeo.com/45830194"><i class="las la-expand-arrows-alt"></i></a></div>
|
||||
</div>
|
||||
<!-- Picture Overlay Ends -->
|
||||
</div>
|
||||
</figure>
|
||||
<!-- Project 2 Ends -->
|
||||
<!-- Project 3 Starts -->
|
||||
<figure class="item category-2">
|
||||
<div class="picture">
|
||||
<img src="assets/imgs/portfolio/8.jpg" alt="">
|
||||
<!-- Picture Overlay Starts -->
|
||||
<div class="text-overlay">
|
||||
<div class="category">category-2</div>
|
||||
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/8.jpg" title="Product Name">Product Name</a></h1>
|
||||
</div>
|
||||
<div class="icon-overlay">
|
||||
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/8.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
|
||||
</div>
|
||||
<!-- Picture Overlay Ends -->
|
||||
</div>
|
||||
</figure>
|
||||
<!-- Project 3 Ends -->
|
||||
</div>
|
||||
<!-- Portfolio Thumbs Ends -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /. PORTFOLIO ENDS
|
||||
========================================================================= -->
|
||||
<!-- TEAM STARTS
|
||||
========================================================================= -->
|
||||
<section class="team dark-grey-bg mt-3" id="team">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="herotext text-center">
|
||||
<h6>/Meet Our Team</h6>
|
||||
<h2><span style="font-weight: 200;">Team of</span> Experts</h2>
|
||||
<h5 class="pt-2">Alone we can do so little; together we can do so much.</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-carousel pt-5">
|
||||
<div class="block">
|
||||
<div class="pic pb-4"><img src="assets/imgs/team/1.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="details">
|
||||
<h2>Maria</h2>
|
||||
<h6>CEO, Founder</h6>
|
||||
<ul class="socialmedia pt-3">
|
||||
<li><a href=""><i class="lab la-twitter"></i></a></li>
|
||||
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
|
||||
<li><a href=""><i class="lab la-dribbble"></i></a></li>
|
||||
<li><a href=""><i class="lab la-behance"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="pic pb-4"><img src="assets/imgs/team/2.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="details">
|
||||
<h2>Abigail</h2>
|
||||
<h6>UI/UX Expert</h6>
|
||||
<ul class="socialmedia pt-3">
|
||||
<li><a href=""><i class="lab la-linkedin-in"></i></a></li>
|
||||
<li><a href=""><i class="lab la-twitter"></i></a></li>
|
||||
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
|
||||
<li><a href=""><i class="lab la-dribbble"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="pic pb-4"><img src="assets/imgs/team/3.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="details">
|
||||
<h2>Donna</h2>
|
||||
<h6>Videograher</h6>
|
||||
<ul class="socialmedia pt-3">
|
||||
<li><a href=""><i class="lab la-twitter"></i></a></li>
|
||||
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
|
||||
<li><a href=""><i class="lab la-dribbble"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="pic pb-4"><img src="assets/imgs/team/4.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="details">
|
||||
<h2>Anderson</h2>
|
||||
<h6>Photographer</h6>
|
||||
<ul class="socialmedia pt-3">
|
||||
<li><a href=""><i class="lab la-twitter"></i></a></li>
|
||||
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
|
||||
<li><a href=""><i class="lab la-dribbble"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /.. TEAM ENDS
|
||||
========================================================================= -->
|
||||
|
||||
<!-- TESTIMONIALS STARTS
|
||||
========================================================================= -->
|
||||
<section class="testimonials parallax-2">
|
||||
<div class="container">
|
||||
<div class="row align-items-start align-items-md-center">
|
||||
<div class="col-12 col-lg-7 testimonials-block" >
|
||||
<div class="herotext">
|
||||
<h6>/testimonials</h6>
|
||||
<h2>Don’t Just Take <br class="d-none d-md-block">Our Word for It</h2>
|
||||
</div>
|
||||
<div class="testimonials-carousel pt-4">
|
||||
<div class="testimonial">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="pic"><img src="assets/imgs/testimonials/1.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="detail">
|
||||
<div class="name">John Doe</div>
|
||||
<div class="designation">UK</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="pt-3">“ Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of springCepteur sint occaecat cupidt proident ”</p>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="pic"><img src="assets/imgs/testimonials/2.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="detail">
|
||||
<div class="name">John Doe</div>
|
||||
<div class="designation">Dubai</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="pt-3">“ Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of springCepteur sint occaecat cupidt proident ”</p>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="pic"><img src="assets/imgs/testimonials/3.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="detail">
|
||||
<div class="name">John Doe</div>
|
||||
<div class="designation">Australia</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="pt-3">“ Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of springCepteur sint occaecat cupidt proident ”</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="slider-counter"></div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /.. TESTIMONIALS ENDS
|
||||
========================================================================= -->
|
||||
<!-- CLIENTS STARTS
|
||||
========================================================================= -->
|
||||
<section class="clients">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="herotext text-center">
|
||||
<h6>/our clients</h6>
|
||||
<h2>We are your Integrated<br class="d-none d-md-block"> Team Tech Pioneers</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center pt-5">
|
||||
<div class="col-6 col-md-3"><img src="assets/imgs/clients/1.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="col-6 col-md-3"><img src="assets/imgs/clients/2.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="col-6 col-md-3"><img src="assets/imgs/clients/3.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="col-6 col-md-3"><img src="assets/imgs/clients/4.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="col-6 col-md-3"><img src="assets/imgs/clients/5.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="col-6 col-md-3"><img src="assets/imgs/clients/6.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="col-6 col-md-3"><img src="assets/imgs/clients/7.jpg" class="img-fluid" alt=""></div>
|
||||
<div class="col-6 col-md-3"><img src="assets/imgs/clients/8.jpg" class="img-fluid" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /.. CLIENTS ENDS
|
||||
========================================================================= -->
|
||||
|
||||
<!-- FOOTER STARTS
|
||||
========================================================================= -->
|
||||
<footer class="dark-grey-bg" id="contact">
|
||||
<div class="container text-center">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="herotext">
|
||||
|
||||
<h2>Let's Keep in touch</h2>
|
||||
<h5 class="email"><a href="">hello@thisone.com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class="socialmedia">
|
||||
<li><a href="#">Facebook</a></li>
|
||||
<li><a href="">Instagram</a></li>
|
||||
<li><a href="">Twitter</a></li>
|
||||
</ul>
|
||||
<div class="copyright">
|
||||
ThisOne © 2021
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- /.. FOOTER ENDS
|
||||
========================================================================= -->
|
||||
<!-- TO TOP STARTS
|
||||
========================================================================= -->
|
||||
<a href="#home" class="back-to-top"><i class="las la-angle-up"></i></a>
|
||||
<!-- /.. TO TOP ENDS
|
||||
========================================================================= -->
|
||||
<!-- INCLUD ALL JS FILES
|
||||
========================================================================= -->
|
||||
<!--JQUERY MIN JS-->
|
||||
<script src="assets/lib/jquery-1.12.4/jquery.min.js"></script>
|
||||
<!--BOOTSTRAP JS-->
|
||||
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
|
||||
<!-- REVOLUTION JS FILES -->
|
||||
<script src="assets/lib/revolution/js/jquery.themepunch.tools.min.js"></script>
|
||||
<script src="assets/lib/revolution/js/jquery.themepunch.revolution.min.js"></script>
|
||||
<!-- TYPEWRITER ADDON -->
|
||||
<script src="assets/lib/revolution/revolution-addons/typewriter/js/revolution.addon.typewriter.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="assets/lib/revolution/revolution-addons/typewriter/css/typewriter.css">
|
||||
<!-- SLIDER REVOLUTION 5.0 EXTENSIONS
|
||||
(Load Extensions only on Local File Systems !
|
||||
The following part can be removed on Server for On Demand Loading) -->
|
||||
<script src="assets/lib/revolution/js/extensions/revolution.extension.actions.min.js"></script>
|
||||
<script src="assets/lib/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
|
||||
<script src="assets/lib/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
|
||||
<script src="assets/lib/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
|
||||
<script src="assets/lib/revolution/js/extensions/revolution.extension.migration.min.js"></script>
|
||||
<script src="assets/lib/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
|
||||
<script src="assets/lib/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
|
||||
<script src="assets/lib/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
|
||||
<script src="assets/lib/revolution/js/extensions/revolution.extension.video.min.js"></script>
|
||||
<script>
|
||||
var tpj=jQuery;
|
||||
|
||||
var revapi1014;
|
||||
tpj(document).ready(function() {
|
||||
if(tpj("#rev_slider_1014_1").revolution == undefined){
|
||||
revslider_showDoubleJqueryError("#rev_slider_1014_1");
|
||||
}else{
|
||||
revapi1014 = tpj("#rev_slider_1014_1").show().revolution({
|
||||
sliderType:"standard",
|
||||
jsFileLocation:"revolution/js/",
|
||||
sliderLayout:"fullscreen",
|
||||
dottedOverlay:"none",
|
||||
delay:9000,
|
||||
navigation: {
|
||||
keyboardNavigation:"off",
|
||||
keyboard_direction: "horizontal",
|
||||
mouseScrollNavigation:"off",
|
||||
mouseScrollReverse:"default",
|
||||
onHoverStop:"off",
|
||||
touch:{
|
||||
touchenabled:"on",
|
||||
swipe_threshold: 75,
|
||||
swipe_min_touches: 1,
|
||||
swipe_direction: "horizontal",
|
||||
drag_block_vertical: false
|
||||
}
|
||||
,
|
||||
arrows: {
|
||||
style:"uranus",
|
||||
enable:false,
|
||||
hide_onmobile:true,
|
||||
hide_under:768,
|
||||
hide_onleave:false,
|
||||
tmp:'',
|
||||
left: {
|
||||
h_align:"left",
|
||||
v_align:"center",
|
||||
h_offset:20,
|
||||
v_offset:0
|
||||
},
|
||||
right: {
|
||||
h_align:"right",
|
||||
v_align:"center",
|
||||
h_offset:20,
|
||||
v_offset:0
|
||||
}
|
||||
}
|
||||
},
|
||||
responsiveLevels:[1240,1024,778,480],
|
||||
visibilityLevels:[1240,1024,778,480],
|
||||
gridwidth:[1240,1024,778,480],
|
||||
gridheight:[868,768,960,600],
|
||||
lazyType:"none",
|
||||
shadow:0,
|
||||
spinner:"off",
|
||||
stopLoop:"on",
|
||||
stopAfterLoops:0,
|
||||
stopAtSlide:1,
|
||||
shuffle:"off",
|
||||
autoHeight:"off",
|
||||
fullScreenAutoWidth:"off",
|
||||
fullScreenAlignForce:"off",
|
||||
fullScreenOffsetContainer: "",
|
||||
fullScreenOffset: "0px",
|
||||
disableProgressBar:"on",
|
||||
hideThumbsOnMobile:"off",
|
||||
hideSliderAtLimit:0,
|
||||
hideCaptionAtLimit:0,
|
||||
hideAllCaptionAtLilmit:0,
|
||||
debugMode:false,
|
||||
fallbacks: {
|
||||
simplifyAll:"off",
|
||||
nextSlideOnWindowFocus:"off",
|
||||
disableFocusListener:false,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
RsTypewriterAddOn(tpj, revapi1014);
|
||||
}); /*ready*/
|
||||
</script>
|
||||
<!-- PRELOADER -->
|
||||
<script src="assets/lib/preloader/sPreloader.js"></script>
|
||||
<!-- OWL CAROUSEL -->
|
||||
<script src="assets/lib/owl-carousel/owl.carousel.js"></script>
|
||||
<!-- ISOTOPE GALLERY -->
|
||||
<script src="assets/lib/isotope/jquery.isotope.min.js"></script>
|
||||
<script src="assets/lib/isotope/custom-isotope-mansory.js"></script>
|
||||
<!-- MAGNIFIC POPUP -->
|
||||
<script src="assets/lib/magnific-popup/jquery.magnific-popup.js"></script>
|
||||
<!-- CONTACT FORM JS -->
|
||||
<script src="assets/js/contact-form/contact-form.js"></script>
|
||||
<!-- CUSTOM JS -->
|
||||
<script src="assets/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<?php
|
||||
$adminemail = "youremailhere@googlemail.com";
|
||||
|
||||
if ($_GET['send'] == 'comments')
|
||||
{
|
||||
|
||||
$_uname = $_POST['name'];
|
||||
$_uemail = $_POST['email'];
|
||||
|
||||
$_website = $_POST['website'];
|
||||
$_comments = stripslashes($_POST['comment']);
|
||||
|
||||
|
||||
|
||||
$email_check = '';
|
||||
$return_arr = array();
|
||||
|
||||
if($_uname=="" || $_uemail=="" || $_comments=="")
|
||||
{
|
||||
$return_arr["frm_check"] = 'error';
|
||||
$return_arr["msg"] = "Please fill in all required fields!";
|
||||
}
|
||||
else if(filter_var($_uemail, FILTER_VALIDATE_EMAIL))
|
||||
{
|
||||
|
||||
$to = $adminemail;
|
||||
$from = $_uemail;
|
||||
$subject = "New Contact Us Message: " .$_uname;
|
||||
|
||||
$message = 'Name: ' . $_uname . '<br><br>' . $_uemail . '<br><br> Website: ' . $_website . '<br><br> Message: ' . $_comments;
|
||||
|
||||
$headers = "MIME-Version: 1.0\r\n";
|
||||
$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
|
||||
$headers .= "Content-Transfer-Encoding: 7bit\r\n";
|
||||
$headers .= "From: " . $from . "\r\n";
|
||||
|
||||
@mail($to, $subject, $message, $headers);
|
||||
|
||||
} else {
|
||||
|
||||
|
||||
$return_arr["frm_check"] = 'error';
|
||||
$return_arr["msg"] = "Please enter a valid email address!";
|
||||
|
||||
|
||||
}
|
||||
|
||||
echo json_encode($return_arr);
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -0,0 +1,513 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Main CSS -->
|
||||
<link href="assets/css/main.css" rel="stylesheet" >
|
||||
<title>Gym | Fitness | Yoga</title>
|
||||
</head>
|
||||
<body data-bs-spy="scroll" data-bs-target="#navigation">
|
||||
<!-- PRELOADER STARTS
|
||||
========================================================================= -->
|
||||
<div id="main-preloader" class="main-preloader semi-dark-background">
|
||||
<div class="main-preloader-inner center">
|
||||
<h1 class="preloader-percentage center">
|
||||
<span class="preloader-percentage-text">0</span> <!-- Show Percentage Number -->
|
||||
<span class="percentage">%</span>
|
||||
</h1>
|
||||
<div class="preloader-bar-outer">
|
||||
<div class="preloader-bar"></div>
|
||||
<!-- Percentage Precess Bar -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.. PRELOADER ENDS
|
||||
========================================================================= -->
|
||||
<!-- NAVIGATION STARTS
|
||||
========================================================================= -->
|
||||
<nav id="navigation" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html"><img src="assets/imgs/logo-white.png" class="img-fluid" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="nav navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Home </a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Portfolio</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="blog.html">Blog</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="ps-3 d-none d-lg-block">
|
||||
<a href="https://themeforest.net/item/this-one-one-page-responsive-website-template/7236268?ref=alia" class="btn btn-primary" target="_blank">BUY NOW</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- /.. NAVIGATION ENDS
|
||||
========================================================================= -->
|
||||
<!-- INNER BANNER STARTS
|
||||
========================================================================= -->
|
||||
<div class="inner-banner-style blog-post-banner" id="top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="info text-center">
|
||||
<h6 class="shuffletext">/ TECHNOLOGY</h6>
|
||||
<h2>
|
||||
For the First Time, Lilly Pulitzer <br class="d-none d-lg-block" >
|
||||
Hosts a Resort Preview
|
||||
</h2>
|
||||
<ul class="meta">
|
||||
<li>
|
||||
<a href=""><i class="las la-user-alt"></i> John</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-comment"></i> 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-eye"></i> 5.5K</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /. INNER BANNER ENDS
|
||||
========================================================================= -->
|
||||
<!-- SINGLE BLOG POST STARTS
|
||||
========================================================================= -->
|
||||
<section class="blog blog-inner-page">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Left Column Starts-->
|
||||
<div class="col-12 col-lg-3 sidebar pt-lg-5 pt-0 pt-lg-0">
|
||||
<!-- Search Starts -->
|
||||
<div class="search">
|
||||
<h2>Search</h2>
|
||||
<div class="searchform3">
|
||||
<form id="search3">
|
||||
<input type="text" class="form-control s" id="s3" placeholder="Type your keywork">
|
||||
<button type="submit" class="sbtn3"><i class="las la-search"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search Ends -->
|
||||
<!-- Categories Starts -->
|
||||
<div class="categories">
|
||||
<h2>Categories</h2>
|
||||
<ul>
|
||||
<li class="clearfix">
|
||||
<div class="info">
|
||||
<h2><a href="">Web Development</a></h2>
|
||||
<h3>Lorem ipsum dolor sit amet</h3>
|
||||
</div>
|
||||
<div class="posts">[30]</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="info">
|
||||
<h2><a href="">Multipurpose Site</a></h2>
|
||||
<h3>Consectetur adipisicing elit sed</h3>
|
||||
</div>
|
||||
<div class="posts">[19]</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="info">
|
||||
<h2><a href="">Technology</a></h2>
|
||||
<h3>Eiusmod tempor incididunt ut</h3>
|
||||
</div>
|
||||
<div class="posts">[40]</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="info">
|
||||
<h2><a href="">Free Support</a></h2>
|
||||
<h3>Laboris nisi ut aliquip ex ea</h3>
|
||||
</div>
|
||||
<div class="posts">[28]</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Categories Ends -->
|
||||
<!-- Posts Tabs Starts -->
|
||||
<div class="posts-tabs">
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link active" id="popular-tab" data-bs-toggle="tab" href="#popular" role="tab" aria-controls="popular" aria-selected="true">Popular</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link" id="recent-tab" data-bs-toggle="tab" href="#recent" role="tab" aria-controls="recent" aria-selected="false">Recent</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="popular" role="tabpanel" aria-labelledby="popular-tab">
|
||||
<ul>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/1.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Cepteur sint occae cat cupidatat proident ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/2.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/3.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Lorem ipsum dolor sit amet consectetur ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/4.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="recent" role="tabpanel" aria-labelledby="recent-tab">
|
||||
<ul>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/5.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/6.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/7.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/8.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Posts Tabs Ends -->
|
||||
<!-- About Us Starts -->
|
||||
<div class="about">
|
||||
<h2>About Us</h2>
|
||||
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
|
||||
</div>
|
||||
<!-- About Us Ends -->
|
||||
<!-- Photos Starts -->
|
||||
<div class="photos">
|
||||
<h2>Photos</h2>
|
||||
<div class="row popup-gallery">
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/1.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/1.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/2.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/2.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/3.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/3.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/4.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/4.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/5.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/5.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/6.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/6.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/7.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/7.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/8.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/8.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/9.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/9.jpg" class="img-fluid" alt=""></a></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Photos Ends -->
|
||||
<!-- Tags Starts -->
|
||||
<div class="tags">
|
||||
<h2>Tags</h2>
|
||||
<div class="tag-list">
|
||||
<a href="#" >Website</a>
|
||||
<a href="#" >Responsive</a>
|
||||
<a href="#" >Multipurpose</a>
|
||||
<a href="#" >SEO</a>
|
||||
<a href="#" >Wordpress</a>
|
||||
<a href="#" >Clean Design</a>
|
||||
<a href="#" >Multipages</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tags Ends -->
|
||||
</div>
|
||||
<!-- Left Column Ends-->
|
||||
<!-- Right Column Starts-->
|
||||
<div class="col-12 col-lg-9 ps-3 ps-lg-5">
|
||||
<div class="blog-post-detail">
|
||||
<!-- Post Details Starts -->
|
||||
<div class="pic pb-4">
|
||||
<img src="assets/imgs/blog/big/1.jpg" class="img-fluid" alt="" >
|
||||
</div>
|
||||
<h2 class="pt-3 pb-3">Cepteur sint occaecat cupidatat proident taken possession</h2>
|
||||
<p>
|
||||
Cepteur sint occaecat cupidatat proident, taken possession
|
||||
of my entire soul, like these sweet mornings of
|
||||
springCepteur sint occaecat cupidt proident, taken
|
||||
possession of my entire soul.<br><br>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
||||
</p>
|
||||
<blockquote class="blockquote mt-4 mb-4">
|
||||
<p>Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of springCepteur sint occaecat cupidt proident, taken possession of my entire soul</p>
|
||||
</blockquote>
|
||||
<div class="row pt-4 pb-4">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="pic">
|
||||
<img src="assets/imgs/blog/big/2.jpg" class="img-fluid" alt="" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 ps-3 ps-lg-5 pt-4 pt-lg-0">
|
||||
<h3>Cepteur sint occaecat cupidatat proident</h3>
|
||||
<p>
|
||||
Cepteur sint occaecat cupidatat proident, taken possession
|
||||
of my entire soul, like these sweet mornings.
|
||||
</p>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Lorem ipsum dolor sit amet</li>
|
||||
<li class="list-group-item">Facilisis in pretium nisl aliquet</li>
|
||||
<li class="list-group-item">
|
||||
Nulla volutpat aliquam velit
|
||||
<ul class=" list-group-flush">
|
||||
<li class="list-group-item">Phasellus iaculis neque</li>
|
||||
<li class="list-group-item">Purus sodales ultricies</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="list-group-item">Faucibus porta lacus fringilla vel</li>
|
||||
<li class="list-group-item">Eget porttitor lorem</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="pt-3">Cepteur sint occaecat cupidatat proident</h3>
|
||||
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
|
||||
<!-- Tags & Share Start -->
|
||||
<div class="row pt-4 pb-4">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item"><i class="las la-tags pt-2"></i></li>
|
||||
<li class="list-inline-item"><a href="#">UI/UX</a></li>
|
||||
<li class="list-inline-item"><a href="#">Technology</a></li>
|
||||
<li class="list-inline-item"><a href="#">Graphics</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item"><i class="las la-share-alt"></i></li>
|
||||
<li class="list-inline-item"><a href="#">Facebook</a></li>
|
||||
<li class="list-inline-item"><a href="#">Twitter</a></li>
|
||||
<li class="list-inline-item"><a href="#">Linkedin</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tags & Share Ends -->
|
||||
</div>
|
||||
<!-- Post Details Ends -->
|
||||
<!-- About Author Starts -->
|
||||
<div class="dark-grey-bg p-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-3">
|
||||
<img src="assets/imgs/blog/author/author.jpg" class="img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<h3>About Author</h3>
|
||||
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item"><i class="las la-share-alt"></i></li>
|
||||
<li class="list-inline-item"><a href="#">Facebook</a></li>
|
||||
<li class="list-inline-item"><a href="#">Twitter</a></li>
|
||||
<li class="list-inline-item"><a href="#">Linkedin</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- About Author Ends -->
|
||||
<!-- Comments Starts -->
|
||||
<div class="row comments pt-5 pb-5">
|
||||
<div class="col-12">
|
||||
<h3>Comments</h3>
|
||||
<ul class="list-group list-group-flush">
|
||||
<!-- 1st Comments Starts -->
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-3 col-md-2 col-lg-1 p-0"><img src="assets/imgs/blog/comments/1.jpg" class="img-fluid" alt="..."></div>
|
||||
<div class="col-9 col-md-10 col-lg-11 ps-4">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h4 class="mb-1">John Doe</h4>
|
||||
<small>2 hours ago</small>
|
||||
</div>
|
||||
<p class="mt-2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p>
|
||||
<a href="#">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reply Starts -->
|
||||
<ul class="list-group list-group-flush ps-4">
|
||||
<!-- 1st Reply Starts -->
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-3 col-md-2 col-lg-1 p-0"><img src="assets/imgs/blog/comments/2.jpg" class="img-fluid" alt="..."></div>
|
||||
<div class="col-9 col-md-10 col-lg-11 ps-4">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h4 class="mb-1">John Doe</h4>
|
||||
<small>2 hours ago</small>
|
||||
</div>
|
||||
<p class="mt-2">Ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p>
|
||||
<a href="#">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- 1st Reply Starts -->
|
||||
</ul>
|
||||
<!-- Reply Ends -->
|
||||
</li>
|
||||
<!-- 1st Comments Ends -->
|
||||
<!-- 2nd Comments Starts -->
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-3 col-md-2 col-lg-1 p-0"><img src="assets/imgs/blog/comments/3.jpg" class="img-fluid" alt="..."></div>
|
||||
<div class="col-9 col-md-10 col-lg-11 ps-4">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h4 class="mb-1">John Doe</h4>
|
||||
<small>3 hours ago</small>
|
||||
</div>
|
||||
<p class="mt-2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p>
|
||||
<a href="#">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- 2nd Comments Ends -->
|
||||
<!-- 2nd Comments Starts -->
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-3 col-md-2 col-lg-1 p-0"><img src="assets/imgs/blog/comments/4.jpg" class="img-fluid" alt="..."></div>
|
||||
<div class="col-9 col-md-10 col-lg-11 ps-4">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h4 class="mb-1">John Doe</h4>
|
||||
<small>4 hours ago</small>
|
||||
</div>
|
||||
<p class="mt-2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p>
|
||||
<a href="#">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- 2nd Comments Ends -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Comments Ends -->
|
||||
<!-- Post Comments Starts -->
|
||||
<div class="row post-comment pb-5">
|
||||
<div class="col-12">
|
||||
<h3>Post Comment</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" id="name" placeholder="Enter your name">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="email" class="form-control" id="email" placeholder="Enter your email">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="email" class="form-control" id="website" placeholder="Enter your website" >
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<textarea class="form-control" id="comment" placeholder="Enter your comment" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<button type="submit" class="btn btn-primary">SUBMIT</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Post Comments Ends -->
|
||||
</div>
|
||||
<!-- Right Column Ends-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /.. SINGLE BLOG POST ENDS
|
||||
========================================================================= -->
|
||||
<!-- FOOTER STARTS
|
||||
========================================================================= -->
|
||||
<footer class="dark-grey-bg" id="contact">
|
||||
<div class="container text-center">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="herotext">
|
||||
|
||||
<h2>Let's Keep in touch</h2>
|
||||
<h5 class="email"><a href="">hello@thisone.com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class="socialmedia">
|
||||
<li><a href="#">Facebook</a></li>
|
||||
<li><a href="">Instagram</a></li>
|
||||
<li><a href="">Twitter</a></li>
|
||||
</ul>
|
||||
<div class="copyright">
|
||||
ThisOne © 2021
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- /.. FOOTER ENDS
|
||||
========================================================================= -->
|
||||
<!-- TO TOP STARTS
|
||||
========================================================================= -->
|
||||
<a href="#top" class="back-to-top"><i class="las la-angle-up"></i></a>
|
||||
<!-- /.. TO TOP ENDS
|
||||
========================================================================= -->
|
||||
<!-- INCLUD ALL JS FILES
|
||||
========================================================================= -->
|
||||
<!--JQUERY MIN JS-->
|
||||
<script src="assets/lib/jquery-1.12.4/jquery.min.js"></script>
|
||||
<!--BOOTSTRAP JS-->
|
||||
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
|
||||
<!-- PRELOADER -->
|
||||
<script src="assets/lib/preloader/sPreloader.js"></script>
|
||||
<!-- OWL CAROUSEL -->
|
||||
<script src="assets/lib/owl-carousel/owl.carousel.js"></script>
|
||||
<!-- ISOTOPE GALLERY -->
|
||||
<script src="assets/lib/isotope/jquery.isotope.min.js"></script>
|
||||
<script src="assets/lib/isotope/custom-isotope-mansory.js"></script>
|
||||
<!-- MAGNIFIC POPUP -->
|
||||
<script src="assets/lib/magnific-popup/jquery.magnific-popup.js"></script>
|
||||
<!-- CUSTOM JS -->
|
||||
<script src="assets/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,513 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Main CSS -->
|
||||
<link href="assets/css/main.css" rel="stylesheet" >
|
||||
<title>Creative Studio</title>
|
||||
</head>
|
||||
<body data-bs-spy="scroll" data-bs-target="#navigation">
|
||||
<!-- PRELOADER STARTS
|
||||
========================================================================= -->
|
||||
<div id="main-preloader" class="main-preloader semi-dark-background">
|
||||
<div class="main-preloader-inner center">
|
||||
<h1 class="preloader-percentage center">
|
||||
<span class="preloader-percentage-text">0</span> <!-- Show Percentage Number -->
|
||||
<span class="percentage">%</span>
|
||||
</h1>
|
||||
<div class="preloader-bar-outer">
|
||||
<div class="preloader-bar"></div>
|
||||
<!-- Percentage Precess Bar -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.. PRELOADER ENDS
|
||||
========================================================================= -->
|
||||
<!-- NAVIGATION STARTS
|
||||
========================================================================= -->
|
||||
<nav id="navigation" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html"><img src="assets/imgs/logo-white.png" class="img-fluid" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="nav navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Home </a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Portfolio</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="blog.html">Blog</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="ps-3 d-none d-lg-block">
|
||||
<a href="https://themeforest.net/item/this-one-one-page-responsive-website-template/7236268?ref=alia" class="btn btn-primary" target="_blank">BUY NOW</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- /.. NAVIGATION ENDS
|
||||
========================================================================= -->
|
||||
<!-- INNER BANNER STARTS
|
||||
========================================================================= -->
|
||||
<div class="inner-banner-style blog-post-banner" id="top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="info text-center">
|
||||
<h6 class="shuffletext">/ TECHNOLOGY</h6>
|
||||
<h2>
|
||||
For the First Time, Lilly Pulitzer <br class="d-none d-lg-block" >
|
||||
Hosts a Resort Preview
|
||||
</h2>
|
||||
<ul class="meta">
|
||||
<li>
|
||||
<a href=""><i class="las la-user-alt"></i> John</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-comment"></i> 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-eye"></i> 5.5K</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /. INNER BANNER ENDS
|
||||
========================================================================= -->
|
||||
<!-- SINGLE BLOG POST STARTS
|
||||
========================================================================= -->
|
||||
<section class="blog blog-inner-page">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Left Column Starts-->
|
||||
<div class="col-12 col-lg-9 pe-3 pe-lg-5">
|
||||
<div class="blog-post-detail">
|
||||
<!-- Post Details Starts -->
|
||||
<div class="pic pb-4">
|
||||
<img src="assets/imgs/blog/big/1.jpg" class="img-fluid" alt="" >
|
||||
</div>
|
||||
<h2 class="pt-3 pb-3">Cepteur sint occaecat cupidatat proident taken possession</h2>
|
||||
<p>
|
||||
Cepteur sint occaecat cupidatat proident, taken possession
|
||||
of my entire soul, like these sweet mornings of
|
||||
springCepteur sint occaecat cupidt proident, taken
|
||||
possession of my entire soul.<br><br>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
||||
</p>
|
||||
<blockquote class="blockquote mt-4 mb-4">
|
||||
<p>Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of springCepteur sint occaecat cupidt proident, taken possession of my entire soul</p>
|
||||
</blockquote>
|
||||
<div class="row pt-4 pb-4">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="pic">
|
||||
<img src="assets/imgs/blog/big/2.jpg" class="img-fluid" alt="" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 ps-3 ps-lg-5 pt-4 pt-lg-0">
|
||||
<h3>Cepteur sint occaecat cupidatat proident</h3>
|
||||
<p>
|
||||
Cepteur sint occaecat cupidatat proident, taken possession
|
||||
of my entire soul, like these sweet mornings.
|
||||
</p>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Lorem ipsum dolor sit amet</li>
|
||||
<li class="list-group-item">Facilisis in pretium nisl aliquet</li>
|
||||
<li class="list-group-item">
|
||||
Nulla volutpat aliquam velit
|
||||
<ul class=" list-group-flush">
|
||||
<li class="list-group-item">Phasellus iaculis neque</li>
|
||||
<li class="list-group-item">Purus sodales ultricies</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="list-group-item">Faucibus porta lacus fringilla vel</li>
|
||||
<li class="list-group-item">Eget porttitor lorem</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="pt-3">Cepteur sint occaecat cupidatat proident</h3>
|
||||
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
|
||||
<!-- Tags & Share Start -->
|
||||
<div class="row pt-4 pb-4">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item"><i class="las la-tags pt-2"></i></li>
|
||||
<li class="list-inline-item"><a href="#">UI/UX</a></li>
|
||||
<li class="list-inline-item"><a href="#">Technology</a></li>
|
||||
<li class="list-inline-item"><a href="#">Graphics</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item"><i class="las la-share-alt"></i></li>
|
||||
<li class="list-inline-item"><a href="#">Facebook</a></li>
|
||||
<li class="list-inline-item"><a href="#">Twitter</a></li>
|
||||
<li class="list-inline-item"><a href="#">Linkedin</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tags & Share Ends -->
|
||||
</div>
|
||||
<!-- Post Details Ends -->
|
||||
<!-- About Author Starts -->
|
||||
<div class="dark-grey-bg p-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-3">
|
||||
<img src="assets/imgs/blog/author/author.jpg" class="img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<h3>About Author</h3>
|
||||
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item"><i class="las la-share-alt"></i></li>
|
||||
<li class="list-inline-item"><a href="#">Facebook</a></li>
|
||||
<li class="list-inline-item"><a href="#">Twitter</a></li>
|
||||
<li class="list-inline-item"><a href="#">Linkedin</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- About Author Ends -->
|
||||
<!-- Comments Starts -->
|
||||
<div class="row comments pt-5 pb-5">
|
||||
<div class="col-12">
|
||||
<h3>Comments</h3>
|
||||
<ul class="list-group list-group-flush">
|
||||
<!-- 1st Comments Starts -->
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-3 col-md-2 col-lg-1 p-0"><img src="assets/imgs/blog/comments/1.jpg" class="img-fluid" alt="..."></div>
|
||||
<div class="col-9 col-md-10 col-lg-11 ps-4">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h4 class="mb-1">John Doe</h4>
|
||||
<small>2 hours ago</small>
|
||||
</div>
|
||||
<p class="mt-2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p>
|
||||
<a href="#">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reply Starts -->
|
||||
<ul class="list-group list-group-flush ps-4">
|
||||
<!-- 1st Reply Starts -->
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-3 col-md-2 col-lg-1 p-0"><img src="assets/imgs/blog/comments/2.jpg" class="img-fluid" alt="..."></div>
|
||||
<div class="col-9 col-md-10 col-lg-11 ps-4">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h4 class="mb-1">John Doe</h4>
|
||||
<small>2 hours ago</small>
|
||||
</div>
|
||||
<p class="mt-2">Ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p>
|
||||
<a href="#">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- 1st Reply Starts -->
|
||||
</ul>
|
||||
<!-- Reply Ends -->
|
||||
</li>
|
||||
<!-- 1st Comments Ends -->
|
||||
<!-- 2nd Comments Starts -->
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-3 col-md-2 col-lg-1 p-0"><img src="assets/imgs/blog/comments/3.jpg" class="img-fluid" alt="..."></div>
|
||||
<div class="col-9 col-md-10 col-lg-11 ps-4">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h4 class="mb-1">John Doe</h4>
|
||||
<small>3 hours ago</small>
|
||||
</div>
|
||||
<p class="mt-2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p>
|
||||
<a href="#">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- 2nd Comments Ends -->
|
||||
<!-- 2nd Comments Starts -->
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-3 col-md-2 col-lg-1 p-0"><img src="assets/imgs/blog/comments/4.jpg" class="img-fluid" alt="..."></div>
|
||||
<div class="col-9 col-md-10 col-lg-11 ps-4">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h4 class="mb-1">John Doe</h4>
|
||||
<small>4 hours ago</small>
|
||||
</div>
|
||||
<p class="mt-2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p>
|
||||
<a href="#">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- 2nd Comments Ends -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Comments Ends -->
|
||||
<!-- Post Comments Starts -->
|
||||
<div class="row post-comment pb-5">
|
||||
<div class="col-12">
|
||||
<h3>Post Comment</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" id="name" placeholder="Enter your name">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="email" class="form-control" id="email" placeholder="Enter your email">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="email" class="form-control" id="website" placeholder="Enter your website" >
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<textarea class="form-control" id="comment" placeholder="Enter your comment" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<button type="submit" class="btn btn-primary">SUBMIT</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Post Comments Ends -->
|
||||
</div>
|
||||
<!-- Left Column Ends-->
|
||||
<!-- Right Column Starts-->
|
||||
<div class="col-12 col-lg-3 sidebar pt-5 pt-lg-0">
|
||||
<!-- Search Starts -->
|
||||
<div class="search">
|
||||
<h2>Search</h2>
|
||||
<div class="searchform3">
|
||||
<form id="search3">
|
||||
<input type="text" class="form-control s" id="s3" placeholder="Type your keywork">
|
||||
<button type="submit" class="sbtn3"><i class="las la-search"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search Ends -->
|
||||
<!-- Categories Starts -->
|
||||
<div class="categories">
|
||||
<h2>Categories</h2>
|
||||
<ul>
|
||||
<li class="clearfix">
|
||||
<div class="info">
|
||||
<h2><a href="">Web Development</a></h2>
|
||||
<h3>Lorem ipsum dolor sit amet</h3>
|
||||
</div>
|
||||
<div class="posts">[30]</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="info">
|
||||
<h2><a href="">Multipurpose Site</a></h2>
|
||||
<h3>Consectetur adipisicing elit sed</h3>
|
||||
</div>
|
||||
<div class="posts">[19]</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="info">
|
||||
<h2><a href="">Technology</a></h2>
|
||||
<h3>Eiusmod tempor incididunt ut</h3>
|
||||
</div>
|
||||
<div class="posts">[40]</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="info">
|
||||
<h2><a href="">Free Support</a></h2>
|
||||
<h3>Laboris nisi ut aliquip ex ea</h3>
|
||||
</div>
|
||||
<div class="posts">[28]</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Categories Ends -->
|
||||
<!-- Posts Tabs Starts -->
|
||||
<div class="posts-tabs">
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link active" id="popular-tab" data-bs-toggle="tab" href="#popular" role="tab" aria-controls="popular" aria-selected="true">Popular</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link" id="recent-tab" data-bs-toggle="tab" href="#recent" role="tab" aria-controls="recent" aria-selected="false">Recent</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="popular" role="tabpanel" aria-labelledby="popular-tab">
|
||||
<ul>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/1.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Cepteur sint occae cat cupidatat proident ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/2.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/3.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Lorem ipsum dolor sit amet consectetur ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/4.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="recent" role="tabpanel" aria-labelledby="recent-tab">
|
||||
<ul>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/5.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/6.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/7.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="clearfix">
|
||||
<div class="picture"><img src="assets/imgs/blog/popular-posts/8.jpg" width="72" height="72" alt="" ></div>
|
||||
<div class="info">
|
||||
<div class="caption"><a href="">Nunc molestie sapien tempor placerat ...</a></div>
|
||||
<div class="date">Jan 03, 2021</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Posts Tabs Ends -->
|
||||
<!-- About Us Starts -->
|
||||
<div class="about">
|
||||
<h2>About Us</h2>
|
||||
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
|
||||
</div>
|
||||
<!-- About Us Ends -->
|
||||
<!-- Photos Starts -->
|
||||
<div class="photos">
|
||||
<h2>Photos</h2>
|
||||
<div class="row popup-gallery">
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/1.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/1.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/2.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/2.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/3.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/3.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/4.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/4.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/5.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/5.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/6.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/6.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/7.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/7.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/8.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/8.jpg" class="img-fluid" alt=""></a></div>
|
||||
<div class="col-4"><a href="assets/imgs/sidebar/gallery/9.jpg" title="Pic Caption"><img src="assets/imgs/sidebar/gallery/9.jpg" class="img-fluid" alt=""></a></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Photos Ends -->
|
||||
<!-- Tags Starts -->
|
||||
<div class="tags">
|
||||
<h2>Tags</h2>
|
||||
<div class="tag-list">
|
||||
<a href="#" >Website</a>
|
||||
<a href="#" >Responsive</a>
|
||||
<a href="#" >Multipurpose</a>
|
||||
<a href="#" >SEO</a>
|
||||
<a href="#" >Wordpress</a>
|
||||
<a href="#" >Clean Design</a>
|
||||
<a href="#" >Multipages</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tags Ends -->
|
||||
</div>
|
||||
<!-- Right Column Ends-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /.. SINGLE BLOG POST ENDS
|
||||
========================================================================= -->
|
||||
<!-- FOOTER STARTS
|
||||
========================================================================= -->
|
||||
<footer class="dark-grey-bg" id="contact">
|
||||
<div class="container text-center">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="herotext">
|
||||
|
||||
<h2>Let's Keep in touch</h2>
|
||||
<h5 class="email"><a href="">hello@thisone.com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class="socialmedia">
|
||||
<li><a href="#">Facebook</a></li>
|
||||
<li><a href="">Instagram</a></li>
|
||||
<li><a href="">Twitter</a></li>
|
||||
</ul>
|
||||
<div class="copyright">
|
||||
ThisOne © 2021
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- /.. FOOTER ENDS
|
||||
========================================================================= -->
|
||||
<!-- TO TOP STARTS
|
||||
========================================================================= -->
|
||||
<a href="#top" class="back-to-top"><i class="las la-angle-up"></i></a>
|
||||
<!-- /.. TO TOP ENDS
|
||||
========================================================================= -->
|
||||
<!-- INCLUD ALL JS FILES
|
||||
========================================================================= -->
|
||||
<!--JQUERY MIN JS-->
|
||||
<script src="assets/lib/jquery-1.12.4/jquery.min.js"></script>
|
||||
<!--BOOTSTRAP JS-->
|
||||
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
|
||||
<!-- PRELOADER -->
|
||||
<script src="assets/lib/preloader/sPreloader.js"></script>
|
||||
<!-- OWL CAROUSEL -->
|
||||
<script src="assets/lib/owl-carousel/owl.carousel.js"></script>
|
||||
<!-- ISOTOPE GALLERY -->
|
||||
<script src="assets/lib/isotope/jquery.isotope.min.js"></script>
|
||||
<script src="assets/lib/isotope/custom-isotope-mansory.js"></script>
|
||||
<!-- MAGNIFIC POPUP -->
|
||||
<script src="assets/lib/magnific-popup/jquery.magnific-popup.js"></script>
|
||||
<!-- CUSTOM JS -->
|
||||
<script src="assets/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,348 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Main CSS -->
|
||||
<link href="assets/css/main.css" rel="stylesheet" >
|
||||
<title>Creative Studio</title>
|
||||
</head>
|
||||
<body data-bs-spy="scroll" data-bs-target="#navigation">
|
||||
<!-- PRELOADER STARTS
|
||||
========================================================================= -->
|
||||
<div id="main-preloader" class="main-preloader semi-dark-background">
|
||||
<div class="main-preloader-inner center">
|
||||
<h1 class="preloader-percentage center">
|
||||
<span class="preloader-percentage-text">0</span> <!-- Show Percentage Number -->
|
||||
<span class="percentage">%</span>
|
||||
</h1>
|
||||
<div class="preloader-bar-outer">
|
||||
<div class="preloader-bar"></div>
|
||||
<!-- Percentage Precess Bar -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.. PRELOADER ENDS
|
||||
========================================================================= -->
|
||||
<!-- NAVIGATION STARTS
|
||||
========================================================================= -->
|
||||
<nav id="navigation" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html"><img src="assets/imgs/logo-white.png" class="img-fluid" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="nav navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Home </a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Portfolio</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="blog.html">Blog</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="ps-3 d-none d-lg-block">
|
||||
<a href="https://themeforest.net/item/this-one-one-page-responsive-website-template/7236268?ref=alia" class="btn btn-primary" target="_blank">BUY NOW</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- /.. NAVIGATION ENDS
|
||||
========================================================================= -->
|
||||
<!-- INNER BANNER STARTS
|
||||
========================================================================= -->
|
||||
<div class="inner-banner-style blog-post-banner" id="top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="info text-center">
|
||||
<h6 class="shuffletext">/ TECHNOLOGY</h6>
|
||||
<h2>
|
||||
For the First Time, Lilly Pulitzer <br class="d-none d-lg-block" >
|
||||
Hosts a Resort Preview
|
||||
</h2>
|
||||
<ul class="meta">
|
||||
<li>
|
||||
<a href=""><i class="las la-user-alt"></i> John</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-comment"></i> 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><i class="lar la-eye"></i> 5.5K</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /. INNER BANNER ENDS
|
||||
========================================================================= -->
|
||||
<!-- SINGLE BLOG POST STARTS
|
||||
========================================================================= -->
|
||||
<section class="blog blog-inner-page">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Right Column Starts-->
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<div class="blog-post-detail">
|
||||
<!-- Post Details Starts -->
|
||||
<div class="pic pb-4">
|
||||
<img src="assets/imgs/blog/big/1.jpg" class="img-fluid" alt="" >
|
||||
</div>
|
||||
<h2 class="pt-3 pb-3">Cepteur sint occaecat cupidatat proident taken possession</h2>
|
||||
<p>
|
||||
Cepteur sint occaecat cupidatat proident, taken possession
|
||||
of my entire soul, like these sweet mornings of
|
||||
springCepteur sint occaecat cupidt proident, taken
|
||||
possession of my entire soul.<br><br>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
||||
</p>
|
||||
<blockquote class="blockquote mt-4 mb-4">
|
||||
<p>Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of springCepteur sint occaecat cupidt proident, taken possession of my entire soul</p>
|
||||
</blockquote>
|
||||
<div class="row pt-4 pb-4">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="pic">
|
||||
<img src="assets/imgs/blog/big/2.jpg" class="img-fluid" alt="" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 ps-3 ps-lg-5 pt-4 pt-lg-0">
|
||||
<h3>Cepteur sint occaecat cupidatat proident</h3>
|
||||
<p>
|
||||
Cepteur sint occaecat cupidatat proident, taken possession
|
||||
of my entire soul, like these sweet mornings.
|
||||
</p>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Lorem ipsum dolor sit amet</li>
|
||||
<li class="list-group-item">Facilisis in pretium nisl aliquet</li>
|
||||
<li class="list-group-item">
|
||||
Nulla volutpat aliquam velit
|
||||
<ul class=" list-group-flush">
|
||||
<li class="list-group-item">Phasellus iaculis neque</li>
|
||||
<li class="list-group-item">Purus sodales ultricies</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="list-group-item">Faucibus porta lacus fringilla vel</li>
|
||||
<li class="list-group-item">Eget porttitor lorem</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="pt-3">Cepteur sint occaecat cupidatat proident</h3>
|
||||
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
|
||||
<!-- Tags & Share Start -->
|
||||
<div class="row pt-4 pb-4">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item"><i class="las la-tags pt-2"></i></li>
|
||||
<li class="list-inline-item"><a href="#">UI/UX</a></li>
|
||||
<li class="list-inline-item"><a href="#">Technology</a></li>
|
||||
<li class="list-inline-item"><a href="#">Graphics</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item"><i class="las la-share-alt"></i></li>
|
||||
<li class="list-inline-item"><a href="#">Facebook</a></li>
|
||||
<li class="list-inline-item"><a href="#">Twitter</a></li>
|
||||
<li class="list-inline-item"><a href="#">Linkedin</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tags & Share Ends -->
|
||||
</div>
|
||||
<!-- Post Details Ends -->
|
||||
<!-- About Author Starts -->
|
||||
<div class="dark-grey-bg p-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-3">
|
||||
<img src="assets/imgs/blog/author/author.jpg" class="img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<h3>About Author</h3>
|
||||
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item"><i class="las la-share-alt"></i></li>
|
||||
<li class="list-inline-item"><a href="#">Facebook</a></li>
|
||||
<li class="list-inline-item"><a href="#">Twitter</a></li>
|
||||
<li class="list-inline-item"><a href="#">Linkedin</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- About Author Ends -->
|
||||
<!-- Comments Starts -->
|
||||
<div class="row comments pt-5 pb-5">
|
||||
<div class="col-12">
|
||||
<h3>Comments</h3>
|
||||
<ul class="list-group list-group-flush">
|
||||
<!-- 1st Comments Starts -->
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-3 col-md-2 col-lg-1 p-0"><img src="assets/imgs/blog/comments/1.jpg" class="img-fluid" alt="..."></div>
|
||||
<div class="col-9 col-md-10 col-lg-11 ps-4">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h4 class="mb-1">John Doe</h4>
|
||||
<small>2 hours ago</small>
|
||||
</div>
|
||||
<p class="mt-2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p>
|
||||
<a href="#">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reply Starts -->
|
||||
<ul class="list-group list-group-flush ps-4">
|
||||
<!-- 1st Reply Starts -->
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-3 col-md-2 col-lg-1 p-0"><img src="assets/imgs/blog/comments/2.jpg" class="img-fluid" alt="..."></div>
|
||||
<div class="col-9 col-md-10 col-lg-11 ps-4">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h4 class="mb-1">John Doe</h4>
|
||||
<small>2 hours ago</small>
|
||||
</div>
|
||||
<p class="mt-2">Ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p>
|
||||
<a href="#">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- 1st Reply Starts -->
|
||||
</ul>
|
||||
<!-- Reply Ends -->
|
||||
</li>
|
||||
<!-- 1st Comments Ends -->
|
||||
<!-- 2nd Comments Starts -->
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-3 col-md-2 col-lg-1 p-0"><img src="assets/imgs/blog/comments/3.jpg" class="img-fluid" alt="..."></div>
|
||||
<div class="col-9 col-md-10 col-lg-11 ps-4">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h4 class="mb-1">John Doe</h4>
|
||||
<small>3 hours ago</small>
|
||||
</div>
|
||||
<p class="mt-2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p>
|
||||
<a href="#">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- 2nd Comments Ends -->
|
||||
<!-- 2nd Comments Starts -->
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-3 col-md-2 col-lg-1 p-0"><img src="assets/imgs/blog/comments/4.jpg" class="img-fluid" alt="..."></div>
|
||||
<div class="col-9 col-md-10 col-lg-11 ps-4">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h4 class="mb-1">John Doe</h4>
|
||||
<small>4 hours ago</small>
|
||||
</div>
|
||||
<p class="mt-2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p>
|
||||
<a href="#">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- 2nd Comments Ends -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Comments Ends -->
|
||||
<!-- Post Comments Starts -->
|
||||
<div class="row post-comment pb-5">
|
||||
<div class="col-12">
|
||||
<h3>Post Comment</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" id="name" placeholder="Enter your name">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="email" class="form-control" id="email" placeholder="Enter your email">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="email" class="form-control" id="website" placeholder="Enter your website" >
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<textarea class="form-control" id="comment" placeholder="Enter your comment" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<button type="submit" class="btn btn-primary">SUBMIT</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Post Comments Ends -->
|
||||
</div>
|
||||
<!-- Right Column Ends-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /.. SINGLE BLOG POST ENDS
|
||||
========================================================================= -->
|
||||
<!-- FOOTER STARTS
|
||||
========================================================================= -->
|
||||
<footer class="dark-grey-bg" id="contact">
|
||||
<div class="container text-center">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="herotext">
|
||||
|
||||
<h2>Let's Keep in touch</h2>
|
||||
<h5 class="email"><a href="">hello@thisone.com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class="socialmedia">
|
||||
<li><a href="#">Facebook</a></li>
|
||||
<li><a href="">Instagram</a></li>
|
||||
<li><a href="">Twitter</a></li>
|
||||
</ul>
|
||||
<div class="copyright">
|
||||
ThisOne © 2021
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- /.. FOOTER ENDS
|
||||
========================================================================= -->
|
||||
<!-- TO TOP STARTS
|
||||
========================================================================= -->
|
||||
<a href="#top" class="back-to-top"><i class="las la-angle-up"></i></a>
|
||||
<!-- /.. TO TOP ENDS
|
||||
========================================================================= -->
|
||||
<!-- INCLUD ALL JS FILES
|
||||
========================================================================= -->
|
||||
<!--JQUERY MIN JS-->
|
||||
<script src="assets/lib/jquery-1.12.4/jquery.min.js"></script>
|
||||
<!--BOOTSTRAP JS-->
|
||||
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
|
||||
<!-- PRELOADER -->
|
||||
<script src="assets/lib/preloader/sPreloader.js"></script>
|
||||
<!-- OWL CAROUSEL -->
|
||||
<script src="assets/lib/owl-carousel/owl.carousel.js"></script>
|
||||
<!-- ISOTOPE GALLERY -->
|
||||
<script src="assets/lib/isotope/jquery.isotope.min.js"></script>
|
||||
<script src="assets/lib/isotope/custom-isotope-mansory.js"></script>
|
||||
<!-- MAGNIFIC POPUP -->
|
||||
<script src="assets/lib/magnific-popup/jquery.magnific-popup.js"></script>
|
||||
<!-- CUSTOM JS -->
|
||||
<script src="assets/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
# This One - One Page Responsive Website Template
|
||||
|
||||
**Last Update** 6 October 2022
|
||||
|
||||
**Published** 27 March 2014
|
||||
|
||||
**High Resolution** Yes
|
||||
|
||||
**Compatible Browsers**IE9, IE10, IE11, Firefox, Safari, Opera, Chrome
|
||||
|
||||
**Compatible With Bootstrap** 5.x
|
||||
|
||||
**Columns** 4+
|
||||
|
||||
## One Page Website Template / Responsive / Parallax / Retina
|
||||
This One is One Page / clean & professional / 100% Responsive / Parallax Website Template.
|
||||
* 50+ Ready to use Websites
|
||||
* Built with Bootstrap 5
|
||||
* Slider Revolution Responsive jQuery Plugin
|
||||
* Isotope Gallery
|
||||
* Agax Contact Form
|
||||
|
||||
[One Page Website Template – DEMO MUST](https://alearslan.com/this-one-one-page-responsive-website-template/index.html)
|
||||
|
||||
## Main Features
|
||||
* html5 / css3
|
||||
* Build on Bootstrap
|
||||
* 100% Responsive
|
||||
* Revolution slider
|
||||
* Pictures / Videos Portfolios
|
||||
* Isotope gallery
|
||||
* Blog Pages
|
||||
* Image / Video Parallax
|
||||
* Retina Ready
|
||||
* AJAX Contact Form
|
||||
* Easy Customizable
|
||||
* Help Included
|
||||
* No Pics
|
||||
* and much more
|
||||
|
||||
[One Page Website Template](https://alearslan.com/this-one-one-page-responsive-website-template/index.html)
|
||||
Loading…
Reference in New Issue