<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header1{
width:100%;
background: darkblue;
}
.header{
width:100%;
height:100vh;
background: darkblue;
}
.header1 nav{
width:100%;
min-height:80px;
background: darkblue;
color:white;
}
.header1 a{
color:white;
}
.carousel-item .d-block{
height:91vh;
}
.deep-txt{
margin-top: 100px;
width:100%;
min-height:400px;
}
.deep-img{
width:100%;
min-height:400px;
align-items: center;
justify-content: center;
display: flex;
}
.deep-img{
width:250px;
height: 250px;
}
.demo{
margin-top:20px;
}
.post-slide{
margin: 0 15px;
}
.post-slide .post-img{
overflow: hidden;
}
.post-slide .post-img img{
width: 100%;
height: auto;
transform: scale(1);
transition: all 1s ease-in-out 0s;
}
.post-slide:hover .post-img img{
transform: scale(1.08);
}
.post-slide .post-content{
background: #fff;
padding: 20px;
}
.post-slide .post-title{
font-size: 17px;
font-weight: 600;
margin-top: 0;
text-transform: capitalize;
}
.post-slide .post-title a{
display: inline-block;
color: #808080;
transition: all 0.3s ease 0s;
}
.post-slide .post-title a:hover{
color: #3d3030;
text-decoration: none;
}
.post-slide .post-description{
font-size: 15px;
color: #676767;
line-height: 24px;
margin-bottom: 14px;
}
.post-slide .post-bar{
padding: 0;
margin-bottom: 15px;
list-style: none;
}
.post-slide .post-bar li{
color: #676767;
padding: 2px 0;
}
.post-slide .post-bar li i{
margin-right: 5px;
}
.post-slide .post-bar li a{
display: inline-block;
font-size: 12px;
color: #808080;
transition: all 0.3s ease 0s;
}
.post-slide .post-bar li a:after{
content: ",";
}
.post-slide .post-bar li a:last-child:after{
content: "";
}
.post-slide .post-bar li a:hover{
color: #3d3030;
text-decoration: none;
}
.post-slide .read-more{
display: inline-block;
padding: 10px 15px;
font-size: 14px;
font-weight: bold;
color: #fff;
background: #e7989a;
border-bottom-right-radius: 10px;
text-transform: capitalize;
transition: all 0.30s linear;
}
.post-slide .read-more:hover{
background: #333;
text-decoration: none;
}
.deepbody{
width:100%;
height:300px;
margin-top:10px;
background: linear-gradient(rgba(0,0,0,.3),rgba(20,220,20,.3)),url('a1.jpg');
background-attachment: fixed;
background-size: 100%;
background-position: center;
align-items: center;
justify-content:center;
display: flex;
color:white;
}
.dee-footer{
align-items: center;
justify-content:center;
display: flex;
}
</style>
<title>Demo</title>
</head>
<body>
<section class="header1">
<div class="container">
<nav class="navbar navbar-expand-lg ">
<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 ml-auto">
<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="#">About us</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Registe</a> </li>
<li class="nav-item"> <a class="nav-link" href="#"><span class="fa fa-search 5x"></span></a> </li>
</ul>
</div>
</nav>
</div>
</section>
<section class="header">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="a1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="a2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="a3.jpg" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<section class="deep-txt">
<div class="container">
<h1 class="text-center p-4">Lorem ipsum dolor sit amet.</h1>
<div class="row">
<div class="col-md-6 deep-img stylesheetmargo">
<img class="img-fluid" src="4.png" alt="">
</div>
<div class="col-md-6 deep-img">
<img class="img-fluid" src="4.png" alt="">
</div>
</div>
<h3 class="text-center p-4">Lorem ipsum dolor sit amet.</h3>
</div>
</section>
<section class="deep-txt">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Lorem ipsum dolor, sit, amet consectetur adipisicing elit.</h1>
<p>Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Quas natus repellat laborum! Eligendi, nesciunt, ad.</p>
<ul>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
</ul>
</div>
<div class="col-md-4 deep-img1">
<img class="img-fluid" src="a2.jpg" alt="">
</div>
</div>
</div>
</section>
<section class="deep-txt">
<div>
<div class="bg-light p-5" style="width:100%;padding:10px;">
<h1>Lorem ipsum dolor, sit, amet consectetur adipisicing elit.</h1>
<p>Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Quas natus repellat laborum! Eligendi, nesciunt, ad.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<ul>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
<li>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Pariatur, repellendus.</li>
</ul>
</div>
</div>
</div>
</section>
<div class="demo">
<div class="container">
<h1 class="text-center p-3">Our Testimonials</h1>
<div class="row">
<div class="col-md-12">
<div id="news-slider" class="owl-carousel">
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="deepbody">
<h1>Lorem ipsum dolor sit </h1>
</div>
<div class="container-fluide bg-light p-5">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, voluptates.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro dolores quidem numquam laboriosam cupiditate sapiente magnam iure placeat earum quos, dolorem possimus aut fuga nostrum adipisci, amet quis magni molestiae labore. Vel, necessitatibus, corrupti. Ratione tenetur laborum ullam veritatis, aliquam.</p>
</div>
<div class="demo">
<div class="container">
<h1 class="text-center p-3">Our Testimonials</h1>
<div class="row">
<div class="col-md-12">
<div id="news-slider2" class="owl-carousel">
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="deepbody">
<h1>Lorem ipsum dolor sit </h1>
</div>
<div class="container-fluide bg-light p-5">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, voluptates.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro dolores quidem numquam laboriosam cupiditate sapiente magnam iure placeat earum quos, dolorem possimus aut fuga nostrum adipisci, amet quis magni molestiae labore. Vel, necessitatibus, corrupti. Ratione tenetur laborum ullam veritatis, aliquam.</p>
</div>
<div class="demo">
<h1 class="text-center p-3">Our Testimonials</h1>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="news-slider1" class="owl-carousel">
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="footer p-5 bg-dark text-white">
<div class="container">
<div class="row">
<div class="col-md-4 dee-footer">
<div>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum, dolor sit amet consectetur.</p>
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
</ul>
</div>
</div>
<div class="col-md-4 dee-footer">
<div>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum, dolor sit amet consectetur.</p>
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
</ul>
</div>
</div>
<div class="col-md-4 dee-footer">
<div>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum, dolor sit amet consectetur.</p>
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
$("#news-slider").owlCarousel({
items:3,
itemsDesktop:[1199,2],
itemsDesktopSmall:[980,2],
itemsMobile:[600,1],
pagination:false,
navigationText:false,
autoPlay:true
});
}); $(document).ready(function() {
$("#news-slider1").owlCarousel({
items:3,
itemsDesktop:[1199,2],
itemsDesktopSmall:[980,2],
itemsMobile:[600,1],
pagination:false,
navigationText:false,
autoPlay:true
});
});$(document).ready(function() {
$("#news-slider2").owlCarousel({
items:3,
itemsDesktop:[1199,2],
itemsDesktopSmall:[980,2],
itemsMobile:[600,1],
pagination:false,
navigationText:false,
autoPlay:true
});
});
</script>
</body>
</html>
0 Comments