<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Business Mind</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://skytemplates.com/resources/skytemplates-portfolio-module/css/font-awesome.min.css">
<link rel="stylesheet" href="http://skytemplates.com/resources/skytemplates-portfolio-module/css/bootstrap.min.css">
<link rel="stylesheet" href="http://skytemplates.com/resources/skytemplates-portfolio-module/css/animate.min.css">
<link rel="stylesheet" href="http://skytemplates.com/resources/skytemplates-portfolio-module/css/magnific-popup.css">
<link rel="stylesheet" href="http://skytemplates.com/resources/skytemplates-portfolio-module/css/style.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="home" data-spy="scroll" data-target=".navbar" data-offset="0">
<div class="container">
<div class="row">
<h1>This is PORTFOLIO module free for all</h1>
</div>
</div>
<!-- Extra code for easy download, do not imcluded with portfolio code -->
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4 margin-bottom-50 text-center">
<a href="http://goo.gl/C0sfEr" class="btn text-center btn-primary" data-wow-delay="0.7s" target="_blank">Live Preview</a>
<a href="http://goo.gl/IBnn1h" class="btn text-center btn-success" data-wow-delay="0.7s" target="_blank">Download The Source Code</a>
</div>
</div>
</div>
<br><br><br>
<!-- Extra code finished -->
<!-- Main portfolio code start from here -->
<section id="portfolio" class="section gap portfolio">
<div class="container">
<div class="row">
<div class="col-md-4 portfolio-block wow fadeInUp">
<div class="col-inner">
<a href="http://skytemplates.com/resources/skytemplates-portfolio-module/img/portfolio-1.jpg" class="p-folio-pop">
<img src="http://skytemplates.com/resources/skytemplates-portfolio-module/img/portfolio-1.jpg" alt="" class="full-width-img">
<span class="full-view">Full View</span>
<span class="vertical-line"></span>
<span class="horizontal-line"></span>
</a>
</div>
</div>
<div class="col-md-4 portfolio-block wow fadeInUp">
<div class="col-inner">
<a href="http://skytemplates.com/resources/skytemplates-portfolio-module/img/portfolio-2.jpg" class="p-folio-pop">
<img src="http://skytemplates.com/resources/skytemplates-portfolio-module/img/portfolio-2.jpg" alt="" class="full-width-img">
<span class="full-view">Full View</span>
<span class="vertical-line"></span>
<span class="horizontal-line"></span>
</a>
</div>
</div>
<div class="col-md-4 portfolio-block wow fadeInUp">
<div class="col-inner">
<a href="http://skytemplates.com/resources/skytemplates-portfolio-module/img/portfolio-3.jpg" class="p-folio-pop">
<img src="http://skytemplates.com/resources/skytemplates-portfolio-module/img/portfolio-3.jpg" alt="" class="full-width-img">
<span class="full-view">Full View</span>
<span class="vertical-line"></span>
<span class="horizontal-line"></span>
</a>
</div>
</div>
<div class="col-md-4 portfolio-block wow fadeInUp">
<div class="col-inner">
<a href="http://skytemplates.com/resources/skytemplates-portfolio-module/img/portfolio-4.jpg" class="p-folio-pop">
<img src="http://skytemplates.com/resources/skytemplates-portfolio-module/img/portfolio-4.jpg" alt="" class="full-width-img">
<span class="full-view">Full View</span>
<span class="vertical-line"></span>
<span class="horizontal-line"></span>
</a>
</div>
</div>
<div class="col-md-4 portfolio-block wow fadeInUp">
<div class="col-inner">
<a href="http://skytemplates.com/resources/skytemplates-portfolio-module/img/portfolio-5.jpg" class="p-folio-pop">
<img src="http://skytemplates.com/resources/skytemplates-portfolio-module/img/portfolio-5.jpg" alt="" class="full-width-img">
<span class="full-view">Full View</span>
<span class="vertical-line"></span>
<span class="horizontal-line"></span>
</a>
</div>
</div>
<div class="col-md-4 portfolio-block wow fadeInUp">
<div class="col-inner">
<a href="http://skytemplates.com/resources/skytemplates-portfolio-module/img/portfolio-6.jpg" class="p-folio-pop">
<img src="http://skytemplates.com/resources/skytemplates-portfolio-module/img/portfolio-6.jpg" alt="" class="full-width-img">
<span class="full-view">Full View</span>
<span class="vertical-line"></span>
<span class="horizontal-line"></span>
</a>
</div>
</div>
</div>
</div>
</section>
<!--end section-->
<!-- scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
</body>
</html>
/************************************************************
Custom Fonts
************************************************************/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,800,800italic,700italic,700,600italic,600,400italic,300italic);
/************************************************************
Variables
************************************************************/
/*color*/
/*font*/
/*units*/
/************************************************************
Mixins
************************************************************/
/************************************************************
Functions
************************************************************/
/************************************************************
General / Reset Settings
************************************************************/
body {
font-family: "Open Sans", sans-serif;
font-size: 14px;
overflow-x: hidden;
line-height: 2.143em;
}
img {
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
font-family: "Open Sans", sans-serif;
color: #060606;
}
a {
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
a:hover {
text-decoration: none;
}
/************************************************************
Helper classes
************************************************************/
/*typography*/
.text-white {
color: #fff;
}
.text-grey {
color: #a1a1a1;
}
.text-black {
color: #a1a1a1;
}
.text-light {
font-weight: 300;
}
.text-normal {
font-weight: 400;
}
.text-semi-bold {
font-weight: 600;
}
.text-bold {
font-weight: 700;
}
.text-extra-bold {
font-weight: 800;
}
.block-title-normal {
font-size: 34px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 50px;
}
.block-title-large {
font-size: 66px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 40px;
line-height: 71px;
}
.text-60 {
font-size: 60px;
}
.section-title {
font-size: 30px;
color: #04528e;
text-align: center;
text-transform: uppercase;
font-weight: 700;
padding-bottom: 60px;
background-image: url(../img/section-title-bg.png);
background-repeat: no-repeat;
background-position: center bottom;
margin-bottom: 40px;
}
.section-inner-title {
font-size: 30px;
font-weight: 800;
color: #04528e;
text-transform: uppercase;
}
/*background*/
.bg-none {
background: none !important;
}
.bg-cover {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.white-bg {
background-color: #fff;
}
.golden-bg {
background-color: #EEC156;
}
/*img*/
.full-width-img {
width: 100%;
height: auto;
}
/*display / block*/
.center-block {
float: none !important;
margin-left: auto;
margin-right: auto;
}
.inline-block {
display: inline-block;
}
.block {
display: block;
}
/*position*/
.absolute {
position: absolute;
}
.relative, .section {
position: relative;
}
.section {
overflow: hidden;
}
/*button*/
.btn-bg-none {
background: none;
border-radius: 0;
}
.btn-bg-green {
background: #38c86f;
border-radius: 0;
padding: 15px 40px;
font-weight: 700;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.custom-white-btn {
border: 5px solid #fff;
padding: 20px 40px;
display: inline-block;
color: #fff;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.custom-white-btn:hover {
text-decoration: none;
background-color: #fff;
}
.btn-transparent {
background-color: transparent;
border-radius: 3px;
border: 2px solid #04538f;
font-size: 22px;
font-weight: 800;
color: #04528e;
padding-left: 40px;
padding-right: 40px;
text-transform: uppercase;
margin-top: 30px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btn-transparent:hover {
background-color: #04528e;
color: #fff;
}
/*border*/
.no-radius {
border-radius: 0;
}
/*carousel slider*/
.owl-carousel {
margin-left: 0;
}
.center-arrow .owl-buttons .owl-prev, .center-arrow .owl-buttons .owl-next {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: transparent !important;
opacity: 1 !important;
font-weight: 400;
padding: 0 !important;
margin: 0 !important;
}
.center-arrow .owl-buttons .owl-prev .fa, .center-arrow .owl-buttons .owl-next .fa {
font-size: 30px;
color: #04528e;
}
.center-arrow .owl-buttons .owl-prev {
left: -15px;
}
.center-arrow .owl-buttons .owl-next {
right: -15px;
}
/*Go to top arrow*/
#to-top {
z-index: 99999;
background-color: #141414;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
cursor: pointer;
display: none;
height: 40px;
width: 40px;
margin-top: -20px;
position: fixed;
right: 50px;
bottom: 50px;
text-align: center;
}
#to-top .fa {
color: #fff;
line-height: 40px;
}
/*padding*/
.pt0 {
padding-top: 0 !important;
}
.pb0 {
padding-bottom: 0 !important;
}
.ptb0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.horizontal-no-padding {
padding-left: 0;
padding-right: 0;
}
.verticle-no-padding {
padding-top: 0;
padding-bottom: 0;
}
.all-no-padding {
padding: 0;
}
.pt10 {
padding-top: 10px;
}
.pb10 {
padding-bottom: 10px;
}
.ptb10 {
padding-top: 10px;
padding-bottom: 10px;
}
.pt20 {
padding-top: 20px;
}
.pb20 {
padding-bottom: 20px;
}
.ptb20 {
padding-top: 20px;
padding-bottom: 20px;
}
.pt30 {
padding-top: 30px;
}
.pb30 {
padding-bottom: 30px;
}
.ptb30 {
padding-top: 30px;
padding-bottom: 30px;
}
.pt40 {
padding-top: 40px;
}
.pb40 {
padding-bottom: 40px;
}
.ptb40 {
padding-top: 40px;
padding-bottom: 40px;
}
.pt50 {
padding-top: 50px;
}
.pb50 {
padding-bottom: 50px;
}
.ptb50 {
padding-top: 50px;
padding-bottom: 50px;
}
.pt60 {
padding-top: 60px;
}
.pb60 {
padding-bottom: 60px;
}
.ptb60 {
padding-top: 60px;
padding-bottom: 60px;
}
.pt70 {
padding-top: 70px;
}
.pb70 {
padding-bottom: 70px;
}
.ptb70 {
padding-top: 70px;
padding-bottom: 70px;
}
.pt80 {
padding-top: 80px;
}
.pb80 {
padding-bottom: 80px;
}
.ptb80 {
padding-top: 80px;
padding-bottom: 80px;
}
.pt90 {
padding-top: 90px;
}
.pb90 {
padding-bottom: 90px;
}
.ptb90 {
padding-top: 90px;
padding-bottom: 90px;
}
.pt100 {
padding-top: 100px;
}
.pb100 {
padding-bottom: 100px;
}
.ptb100 {
padding-top: 100px;
padding-bottom: 100px;
}
/*margin*/
.mt0 {
margin-top: 0 !important;
}
.mb0 {
margin-bottom: 0 !important;
}
.mtb0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.horizontal-no-margin {
margin-left: 0;
margin-right: 0;
}
.verticle-no-margin {
margin-top: 0;
margin-bottom: 0;
}
.all-no-margin {
margin: 0;
}
.mt10 {
margin-top: 10px;
}
.mb10 {
margin-bottom: 10px;
}
.mtb10 {
margin-top: 10px;
margin-bottom: 10px;
}
.mt20 {
margin-top: 20px;
}
.mb20 {
margin-bottom: 20px;
}
.mtb20 {
margin-top: 20px;
margin-bottom: 20px;
}
.mt30 {
margin-top: 30px;
}
.mb30 {
margin-bottom: 30px;
}
.mtb30 {
margin-top: 30px;
margin-bottom: 30px;
}
.mt40 {
margin-top: 40px;
}
.mb40 {
margin-bottom: 40px;
}
.mtb40 {
margin-top: 40px;
margin-bottom: 40px;
}
.mt50 {
margin-top: 50px;
}
.mb50 {
margin-bottom: 50px;
}
.mtb50 {
margin-top: 50px;
margin-bottom: 50px;
}
.mt60 {
margin-top: 60px;
}
.mb60 {
margin-bottom: 60px;
}
.mtb60 {
margin-top: 60px;
margin-bottom: 60px;
}
.mt70 {
margin-top: 70px;
}
.mb70 {
margin-bottom: 70px;
}
.mtb70 {
margin-top: 70px;
margin-bottom: 70px;
}
.mt80 {
margin-top: 80px;
}
.mb80 {
margin-bottom: 80px;
}
.mtb80 {
margin-top: 80px;
margin-bottom: 80px;
}
.mt90 {
margin-top: 90px;
}
.mb90 {
margin-bottom: 90px;
}
.mtb90 {
margin-top: 90px;
margin-bottom: 90px;
}
.mt100 {
margin-top: 100px;
}
.mb100 {
margin-bottom: 100px;
}
.mtb100 {
margin-top: 100px;
margin-bottom: 100px;
}
@media screen and (min-width: 1367px) {
.container {
width: 90%;
max-width: 1600px;
}
}
@media screen and (max-width: 1366px) {
.pt10 {
padding-top: 7px;
}
.pb10 {
padding-bottom: 7px;
}
.ptb10 {
padding-top: 7px;
padding-bottom: 7px;
}
.pt20 {
padding-top: 14px;
}
.pb20 {
padding-bottom: 14px;
}
.ptb20 {
padding-top: 14px;
padding-bottom: 14px;
}
.pt30 {
padding-top: 21px;
}
.pb30 {
padding-bottom: 21px;
}
.ptb30 {
padding-top: 21px;
padding-bottom: 21px;
}
.pt40 {
padding-top: 28px;
}
.pb40 {
padding-bottom: 28px;
}
.ptb40 {
padding-top: 28px;
padding-bottom: 28px;
}
.pt50 {
padding-top: 35px;
}
.pb50 {
padding-bottom: 35px;
}
.ptb50 {
padding-top: 35px;
padding-bottom: 35px;
}
.pt60 {
padding-top: 42px;
}
.pb60 {
padding-bottom: 42px;
}
.ptb60 {
padding-top: 42px;
padding-bottom: 42px;
}
.pt70 {
padding-top: 49px;
}
.pb70 {
padding-bottom: 49px;
}
.ptb70 {
padding-top: 49px;
padding-bottom: 49px;
}
.pt80 {
padding-top: 56px;
}
.pb80 {
padding-bottom: 56px;
}
.ptb80 {
padding-top: 56px;
padding-bottom: 56px;
}
.pt90 {
padding-top: 63px;
}
.pb90 {
padding-bottom: 63px;
}
.ptb90 {
padding-top: 63px;
padding-bottom: 63px;
}
.pt100 {
padding-top: 70px;
}
.pb100 {
padding-bottom: 70px;
}
.ptb100 {
padding-top: 70px;
padding-bottom: 70px;
}
.mt10 {
margin-top: 7px;
}
.mb10 {
margin-bottom: 7px;
}
.mtb10 {
margin-top: 7px;
margin-bottom: 7px;
}
.mt20 {
margin-top: 14px;
}
.mb20 {
margin-bottom: 14px;
}
.mtb20 {
margin-top: 14px;
margin-bottom: 14px;
}
.mt30 {
margin-top: 21px;
}
.mb30 {
margin-bottom: 21px;
}
.mtb30 {
margin-top: 21px;
margin-bottom: 21px;
}
.mt40 {
margin-top: 28px;
}
.mb40 {
margin-bottom: 28px;
}
.mtb40 {
margin-top: 28px;
margin-bottom: 28px;
}
.mt50 {
margin-top: 35px;
}
.mb50 {
margin-bottom: 35px;
}
.mtb50 {
margin-top: 35px;
margin-bottom: 35px;
}
.mt60 {
margin-top: 42px;
}
.mb60 {
margin-bottom: 42px;
}
.mtb60 {
margin-top: 42px;
margin-bottom: 42px;
}
.mt70 {
margin-top: 49px;
}
.mb70 {
margin-bottom: 49px;
}
.mtb70 {
margin-top: 49px;
margin-bottom: 49px;
}
.mt80 {
margin-top: 56px;
}
.mb80 {
margin-bottom: 56px;
}
.mtb80 {
margin-top: 56px;
margin-bottom: 56px;
}
.mt90 {
margin-top: 63px;
}
.mb90 {
margin-bottom: 63px;
}
.mtb90 {
margin-top: 63px;
margin-bottom: 63px;
}
.mt100 {
margin-top: 70px;
}
.mb100 {
margin-bottom: 70px;
}
.mtb100 {
margin-top: 70px;
margin-bottom: 70px;
}
}
@media screen and (max-width: 1024px) {
body {
line-height: 1.5em;
}
.h2, h2 {
font-size: 25px;
}
/*helper classes*/
.btn-transparent {
font-size: 17px;
padding-left: 25px;
padding-right: 25px;
}
.section-title {
padding-bottom: 40px;
margin-bottom: 25px;
}
/*********Service section*********/
.services-title {
font-size: 17px;
margin-bottom: 15px;
}
}
@media screen and (min-width: 768px) {
/*header*/
.site-main-header {
padding-bottom: 120px;
min-height: 100vh;
}
}
/************************************************************
Home Page
************************************************************/
/**************portfolio section****************/
.portfolio-block {
margin-bottom: 30px;
}
.portfolio-block .col-inner .p-folio-pop {
display: block;
position: relative;
text-align: center;
}
.portfolio-block .col-inner .p-folio-pop:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(1, 25, 43, 0.9);
-webkit-transition: all 0.8s;
transition: all 0.8s;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.portfolio-block .col-inner .p-folio-pop .full-view {
color: #e5c287;
text-transform: uppercase;
font-weight: 600;
display: inline-block;
vertical-align: middle;
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
text-decoration: none;
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(0);
-ms-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.portfolio-block .col-inner .p-folio-pop:hover .full-view {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
.portfolio-block .col-inner .p-folio-pop .vertical-line:before,
.portfolio-block .col-inner .p-folio-pop .vertical-line:after,
.portfolio-block .col-inner .p-folio-pop .horizontal-line:before,
.portfolio-block .col-inner .p-folio-pop .horizontal-line:after {
content: '';
display: block;
position: absolute;
background-color: #465e80;
z-index: 1;
}
.portfolio-block .col-inner .p-folio-pop .vertical-line:before,
.portfolio-block .col-inner .p-folio-pop .vertical-line:after {
width: 1px;
top: 10%;
bottom: 10%;
}
.portfolio-block .col-inner .p-folio-pop .vertical-line:before {
left: 20%;
}
.portfolio-block .col-inner .p-folio-pop .vertical-line:after {
right: 20%;
}
.portfolio-block .col-inner .p-folio-pop .horizontal-line:before,
.portfolio-block .col-inner .p-folio-pop .horizontal-line:after {
height: 1px;
left: 10%;
right: 10%;
}
.portfolio-block .col-inner .p-folio-pop .horizontal-line:before {
top: 20%;
}
.portfolio-block .col-inner .p-folio-pop .horizontal-line:after {
bottom: 20%;
}
.portfolio-block .col-inner .p-folio-pop:after,
.portfolio-block .col-inner .p-folio-pop .vertical-line,
.portfolio-block .col-inner .p-folio-pop .horizontal-line {
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.portfolio-block .col-inner .p-folio-pop:hover:after, .portfolio-block .col-inner .p-folio-pop:hover .vertical-line, .portfolio-block .col-inner .p-folio-pop:hover .horizontal-line {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/*# sourceMappingURL=style.css.map */
