<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="http://lacodeid.com/">LACODEID WEBDESIGN</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#page-top">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#services">Service</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- header -->
<header class="bg-primary text-white">
<div class="container-background-header bg-container-header">
<div class="container text-center">
<h3>Welcome to Portfolio</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore. For Bootstrap 4</p>
</div>
</div>
</header>
<section id="about" class="section">
<div class="container container-setting">
<div class="row">
<div class="col-lg-3 mx-auto text-center">
<div class="background-setting backgorund-default margin-setting">
<img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/1.jpg" class="img-responsive img-setting">
<h2>LACODEID</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
<div class="line-dash"></div>
<div>
<i class="fa fa-facebook fa-style fa-style-facebook"></i>
<i class="fa fa-twitter fa-style fa-style-twitter"></i>
<i class="fa fa-instagram fa-style fa-style-instagram"></i>
<i class="fa fa-google-plus fa-style fa-style-google-plus"></i>
</div>
</div>
</div>
<div class="col-lg-3 mx-auto text-center">
<div class="background-setting backgorund-default margin-setting">
<img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/2.jpg" class="img-responsive img-setting">
<h2>LACODEID</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
<div class="line-dash"></div>
<div>
<i class="fa fa-facebook fa-style fa-style-facebook"></i>
<i class="fa fa-twitter fa-style fa-style-twitter"></i>
<i class="fa fa-instagram fa-style fa-style-instagram"></i>
<i class="fa fa-google-plus fa-style fa-style-google-plus"></i>
</div>
</div>
</div>
<div class="col-lg-3 mx-auto text-center">
<div class="background-setting backgorund-default margin-setting">
<img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/5.jpg" class="img-responsive img-setting">
<h2>LACODEID</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
<div class="line-dash"></div>
<div>
<i class="fa fa-facebook fa-style fa-style-facebook"></i>
<i class="fa fa-twitter fa-style fa-style-twitter"></i>
<i class="fa fa-instagram fa-style fa-style-instagram"></i>
<i class="fa fa-google-plus fa-style fa-style-google-plus"></i>
</div>
</div>
</div>
<div class="col-lg-3 mx-auto text-center">
<div class="background-setting backgorund-default margin-setting">
<img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/4.jpg" class="img-responsive img-setting">
<h2>LACODEID</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
<div class="line-dash"></div>
<div>
<i class="fa fa-facebook fa-style fa-style-facebook"></i>
<i class="fa fa-twitter fa-style fa-style-twitter"></i>
<i class="fa fa-instagram fa-style fa-style-instagram"></i>
<i class="fa fa-google-plus fa-style fa-style-google-plus"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="work" class="section">
<div class="container container-setting-default">
<div class="row">
<div class="col-md-3 mx-auto text-center margin-setting">
<h2 style="text-align: center;">WORK</h2>
<i class="fa fa-2x fa-users fa-style-cricle"></i>
</div>
</div>
<div class="row">
<div class="col-lg-3 mx-auto text-center">
<div class="background-setting backgorund-default margin-setting">
<img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/1.png" class="img-responsive img-setting">
<h2>LACODEID</h2>
</div>
</div>
<div class="col-lg-3 mx-auto text-center">
<div class="background-setting backgorund-default margin-setting">
<img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/2.png" class="img-responsive img-setting">
<h2>LACODEID</h2>
</div>
</div>
<div class="col-lg-3 mx-auto text-center">
<div class="background-setting backgorund-default margin-setting">
<img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/3.png" class="img-responsive img-setting">
<h2>LACODEID</h2>
</div>
</div>
<div class="col-lg-3 mx-auto text-center">
<div class="background-setting backgorund-default margin-setting">
<img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/4.png" class="img-responsive img-setting">
<h2>LACODEID</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 mx-auto text-center">
<div class="background-setting backgorund-default margin-setting">
<img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/5.png" class="img-responsive img-setting">
<h2>LACODEID</h2>
</div>
</div>
<div class="col-lg-3 mx-auto text-center">
<div class="background-setting backgorund-default margin-setting">
<img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/6.png" class="img-responsive img-setting">
<h2>LACODEID</h2>
</div>
</div>
<div class="col-lg-3 mx-auto text-center">
<div class="background-setting backgorund-default margin-setting">
<img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/7.png" class="img-responsive img-setting">
<h2>LACODEID</h2>
</div>
</div>
<div class="col-lg-3 mx-auto text-center">
<div class="background-setting backgorund-default margin-setting">
<img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/8.png" class="img-responsive img-setting">
<h2>LACODEID</h2>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Your Website lacodeid 2017</p>
</div>
<!-- /.container -->
</footer>
</body>
</html>
body {
font-size: 14px;
font-family: 'Rubik', sans-serif;
font-weight: 500px;
}
h2 {
margin-top: 10px;
margin-bottom: 10px;
}
p {
padding: 10px;
line-height: 1.7;
}
/*main header*/
@media (min-width: 992px) {
header {
padding: 220px 0 139px!important;
}
}
header {
padding: 220px 0 139px!important;
}
@media (min-width: 992px) {
header {
padding: 156px 0 100px;
}
}
.bg-container-header {
background: #000;
background: -webkit-linear-gradient(to left, #000 , #000);
background: linear-gradient(to left, #000 , #000);
opacity: .7;
}
.container-background-header.bg-container-header {
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 0;
margin-bottom: 0;
max-width: 100%;
height: 100%;
color: #ffffff;
}
.container-background-header.bg-container-header {
padding: 95px 0 135px;
overflow: hidden;
}
/*container*/
.container-setting-default {
background-color: #ffffff;
padding: 25px;
margin-top: -75px;
}
.container-setting {
background-color: #ffffff;
padding: 25px;
border-top: 2px solid #0193df;
}
@media (min-width: 992px) {
.container-setting {
position: relative;
display: block;
margin-top: -45px;
margin-left: 119px;
}
.container-setting-default {
margin-left: 119px;
}
.container-background-header.bg-container-header {
padding: 160px 0 135px!important;
}
.fa-style-home {
margin-top: -20px!important;
}
}
/*section*/
section {
padding: 150px 0;
}
.section {
padding: 25px 0!important;
}
.bg-light-default {
background-color: #ffc107!important;
}
.bg-primary {
position: relative;
background-image: url('../img/header.jpg');
background-color: transparent!important;
overflow: visible;
}
/*background*/
.background-setting {
display: block;
margin: 0 auto;
padding: 10px 0 10px 0;
color: #000;
}
.background-setting.backgorund-default {
background-color: #f9f9f9;
}
.backgorund-default:focus,
.backgorund-default:hover {
transition: all 0.4s ease-in-out;
cursor: default;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
}
/*margin*/
.margin-setting {
margin-top: 0;
margin-bottom: 25px;
}
.mx-auto {
margin-right: auto!important;
margin-left: auto!important;
}
.line-dash {
border: 1px solid #ccc;
border-style: dashed;
margin-top: 5px;
margin-bottom: 5px;
}
.fa-style {
color: #ffffff;
padding: 10px;
text-align: center;
border-radius: 25px;
font-size: 16px!important;
width: 35px;
}
.fa-style-facebook {
background: #343a40;
}
.fa-style-twitter {
background: #343a40;
}
.fa-style-instagram {
background: #343a40;
}
.fa-style-google-plus {
background: #343a40;
}
.fa-style-facebook:hover {
background: #0b5fb3;
}
.fa-style-twitter:hover {
background: #82c0ff;
}
.fa-style-instagram:hover {
background: #ff35ae;
}
.fa-style-google-plus:hover {
background: #ff3535;
}
.fa-style-cricle {
display: block;
margin: 0 auto;
margin-top: 15px;
overflow: visible;
background-color: #343a40;
border-radius: 35px;
border: dotted;
padding: 15px;
width: 65px;
height: auto;
color: #fff;
text-align: center;
}
.fa-style-home {
background-color: #ffc107;
color: #fff;
padding: 10px;
border-radius: 25px;
}
.fa-style-home {
margin-top: 5px;
}
.fa-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.fa-5x {
font-size: 5em;
}
.fa-inverse {
color: #ffffff;
}
.fa-stack-1x {
line-height: inherit;
}
.fa-stack-1x, .fa-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.fa-text-cs {
color: #ffc107;
}
.style-text {
font-weight: bold;
color: #ffc107;
}
.lacodeid-jarak-colum-content.background-deafult {
background-color: #f9f9f9;
line-height: 1.7;
color: #000;
overflow: hidden;
}
.img-cricle {
border-radius: 80px;
border: dotted;
}
.panel-body {
margin-bottom: 15px;
}
.img-setting {
width: 93%;
height: 175px;
}
.img-setting {
visibility: inherit;
}
