<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./owl.carousel.css">
<link rel="stylesheet" href="./owl.theme.default.min.css">
<link href="https://fonts.googleapis.com/css?family=Asap:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 p-0 dummy-section">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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="navbar-nav mr-auto mt-2 mt-lg-0">
</ul>
<ul class="navbar-nav my-2 my-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
</div>
</nav>
<!-- <nav class="navbar navbar-expand-lg cus-nav sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Core.WRITE</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
</ul>
<ul class="navbar-nav my-2 my-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav> -->
<div class="content-wrap">
<h3>Do Well</h3>
<p>Et et consectetur ipsum labore excepteur <br> est proident excepteur ad.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 ">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link active" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade " id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt
irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit
do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex. Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim
pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt
tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex. Et et consectetur ipsum labore excepteur est proident
excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur
nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit
occaecat anim ullamco ad duis occaecat ex.
</div>
<div class="tab-pane fade show active" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<h3 class="text-center">Services</h3>
<p style="text-align: center;">Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing
aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi
culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex. Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat
veniam incididunt anim aliqua enim pariatur veniam</p>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt
irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit
do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex. Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim
pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt
tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex. Et et consectetur ipsum labore excepteur est proident
excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur
nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit
occaecat anim ullamco ad duis occaecat ex.
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-6 box-1">
<h3>Data & Analyst</h3>
<h6>Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam.</h6>
</div>
<div class="col-12 col-md-6 col-lg-5 box-2">
<h3>Data & Analyst</h3>
<h6>Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat </h6>
<div class="overlay">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<img src="./images/image1@2x.png" alt="">
</div>
<div class="item">
<img src="./images/image2@2x.png" alt="">
</div>
<div class="item">
<img src="./images/image3@2x.png" alt="">
</div>
<div class="item">
<img src="./images/image4@2x.png" alt="">
</div>
<div class="item">
<img src="./images/image5@2x.png" alt="">
</div>
<div class="item">
<img src="./images/image6@2x.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<!-- <div class="col-12 icon-col">
<div class="row">
<div class="icon col-lg-2 col-12">
<i class="fas fa-user"></i>
</div>
</div>
</div> -->
<div class="box-custom">
<i class="fas fa-user"></i>
</div>
<div class="box-custom">
<i class="fas fa-user"></i>
</div>
<div class="box-custom">
<i class="fas fa-user"></i>
</div>
<div class="box-custom">
<i class="fas fa-user"></i>
</div>
<div class="box-custom">
<i class="fas fa-user"></i>
</div>
<div class="box-custom">
<i class="fas fa-user"></i>
</div>
<div class="box-custom">
<i class="fas fa-user"></i>
</div>
<div class="box-custom">
<i class="fas fa-user"></i>
</div>
<div class="box-custom">
<i class="fas fa-user"></i>
</div>
<div class="box-custom">
<i class="fas fa-user"></i>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="./owl.carousel.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="./scripts.js"></script>
</body>
</html>
body {}
a {
color: #fff;
text-decoration: none;
}
.dummy-section {
min-height: 1000px;
background-image: url(./images/Monkey.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.content-wrap {
background-color: #d65f5f9c;
padding: 20px;
width: 26%;
position: absolute;
margin: 0 25%;
top: 25%;
}
.content-wrap h3 {
color: #fff;
}
.content-wrap p {
color: #fff;
}
nav>.nav.nav-tabs {
border: none;
color: #000;
border-radius: 0;
}
nav>div a.nav-item.nav-link,
nav>div a.nav-item.nav-link.active {
border: none;
padding: 18px 25px;
color: #000;
border-radius: 0;
}
.nav-link {
color: #fff !important;
}
.navbar-brand {
color: #fff !important;
font-weight: 700;
}
/* .navbar-light .navbar-toggler-icon {
background: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http: //www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5');
} */
.nav-link:active {
border-bottom: 2px solid #e74c3c;
}
nav>div a.nav-item.nav-link.active:after {
/* content: "";
position: relative;
bottom: -60px;
left: -10%;
border: 15px solid transparent;
border-top-color: #e74c3c; */
}
.tab-content {
background: #fdfdfd;
line-height: 25px;
padding: 30px 25px;
}
nav>div a.nav-item.nav-link:hover,
nav>div a.nav-item.nav-link:focus {
border: none;
border-bottom: 2px solid #e74c3c;
color: #000;
border-radius: 0;
transition: background 0.20s linear;
}
.box-1 {
background-image: url(./images/pic3.jpeg);
background-repeat: no-repeat;
background-position: unset;
min-height: 400px;
margin: 20px 10px;
padding: 20px;
background-size: cover;
background-position: bottom;
}
.box-2 {
background-image: url(./images/pic2.jpeg);
background-repeat: no-repeat;
background-position: unset;
min-height: 400px;
margin: 20px 10px;
padding: 20px;
background-size: cover;
background-position: bottom;
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
/* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity: 0;
background-image: url(./images/pic3.jpeg);
background-repeat: no-repeat;
background-position: unset;
min-height: 400px;
margin: 0px -20px;
background-size: cover;
background-position: bottom;
}
.box-2:hover .overlay {
opacity: 1;
}
#owl-demo .item {
padding: 30px 0px;
margin: 10px;
}
/* .mybox1 {
background-image: url(./images/image5@2x.png);
background-repeat: no-repeat;
background-position: unset;
min-height: 400px;
margin: 20px 10px;
padding: 20px;
background-size: cover;
}
.mybox2 {
margin: 20px 10px;
padding: 20px;
background-image: url("./images/image2@2x.png");
background-repeat: no-repeat;
background-position: center;
min-height: 400px;
}
.mybg1 {
background-color: darkslategray;
}
img {
height: auto;
width: 100%;
}
.overlay-col {
position: relative;
width: 100%;
max-width: 100%;
} */
.owl-next {
position: absolute;
right: -25px;
bottom: 36px;
top: 0;
background: none !important;
outline: none;
}
.owl-next span {
font-size: 68px;
}
.owl-next span:hover {
color: #000;
}
.owl-next {
outline: none !important;
}
.owl-prev {
position: absolute;
left: -25px;
bottom: 36px;
top: 0;
background: none !important;
outline: none;
}
.owl-prev span {
font-size: 68px;
}
.owl-prev span:hover {
color: #000;
}
.owl-prev {
outline: none !important;
}
.icon-col i {
font-size: 48px;
}
.icon {
height: 100px;
width: 157px;
border: 1px solid #ccd0d459;
background: #ccd0d459;
margin: 20px 20px;
display: flex;
align-items: center;
}
.box-custom {
width: 20%;
height: 200px;
background-color: lightgray;
border: 1px solid gray;
position: relative;
}
.box-custom i {
position: absolute;
font-size: 60px;
top: calc(50% - 30px);
left: calc(50% - 30px);
}
/* Media Query */
@media (max-width:376px) {
.box-1 {
margin: 0px 0px 15px 0px;
}
.box-2 {
margin: 0px 0px 15px 0px;
}
.content-wrap {
background-color: #d65f5f9c;
padding: 20px;
width: 61%;
position: absolute;
margin: 0 17%;
top: 11%;
}
.owl-next span {
font-size: 38px;
}
.owl-prev span {
font-size: 38px;
}
}
@media (max-width:576px) {
.box-1 {
margin: 0px 0px 15px 0px;
}
.box-2 {
margin: 0px 0px 15px 0px;
}
.content-wrap {
background-color: #d65f5f9c;
padding: 20px;
width: 61%;
position: absolute;
margin: 0 17%;
top: 11%;
}
.owl-next span {
font-size: 38px;
}
.owl-prev span {
font-size: 38px;
}
.owl-prev {
position: absolute;
left: -19px;
bottom: 38px;
top: 0;
background: none !important;
outline: none;
}
.owl-next {
position: absolute;
right: -19px;
bottom: 38px;
top: 0;
background: none !important;
outline: none;
}
}
@media (max-width:768px) {
.box-1 {
margin: 0px 0px 15px 0px;
}
.box-2 {
margin: 0px 0px 15px 0px;
}
.content-wrap {
background-color: #d65f5f9c;
padding: 20px;
width: 39%;
position: absolute;
margin: 0 17%;
top: 21%;
}
.owl-next span {
font-size: 38px;
}
.owl-prev span {
font-size: 38px;
}
.owl-prev {
position: absolute;
left: -15px;
bottom: 28px;
top: 0;
background: none !important;
outline: none;
}
.owl-next {
position: absolute;
right: -15px;
bottom: 28px;
top: 0;
background: none !important;
outline: none;
}
.box-custom {
width: 100%;
}
}
@media (max-width:992px) {
.owl-prev {
position: absolute;
left: -10px;
bottom: 44px;
top: 0;
background: none !important;
outline: none;
}
.owl-next {
position: absolute;
right: -10px;
bottom: 44px;
top: 0;
background: none !important;
outline: none;
}
.box-custom {
width: 50%;
}
}
$(document).ready(function() {
$('.burgermenu').on('click', function() {
$('.mob-nav').toggle();
})
$("#owl-demo").owlCarousel({
items: 3, //10 items above 1000px browser width
itemsDesktop: [1000, 3], //5 items between 1000px and 901px
itemsDesktopSmall: [900, 3], // betweem 900px and 601px
itemsTablet: [768, 2],
itemsMobile: [479, 1],
// Navigation
navigation: true,
navigationText: ["prev", "next"],
pagination: true,
paginationNumbers: true,
autoPlay: true,
nav: true,
loop: true
});
});
