Html code
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=2, minimum-scale=1">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" media="all">
<link rel="stylesheet" href="css/owl.theme.default.css" type="text/css" media="all">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all">
</head>
<body>
<section class="thumnailSlider">
<div class="container-fluid">
<div class="row">
<div class=" col-md-12">
<h1 class="headingone"> Instagram </h1>
</div>
</div>
<div class="row">
<div class=" col-md-12">
<div id="imageGallary" class=" loop owl-carousel owl-theme">
<div class="item">
<img src="./images/beach-1854076_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/bouquet-of-flowers-1149099_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/beach-1854076_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/bouquet-of-flowers-1149099_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/beach-1854076_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/beach-1854076_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/bouquet-of-flowers-1149099_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/beach-1854076_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/bouquet-of-flowers-1149099_960_720.jpg" alt=""> </div>
<div class="item">
<img src="./images/beach-1854076_960_720.jpg" alt=""> </div>
</div>
</div>
</div>
</div>
</section>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('#imageGallary').owlCarousel({
items: 2,
loop: true,
margin: 10,
responsive: {
600: {
items: 5
}
}
});
});
</script>
</html>
CSS CODE
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
body {
font-family: 'Open Sans', sans-serif;
color: #292929;
}
.thumnailSlider {
padding: 80px 0px;
position: relative;
}
.headingone {
text-align: center;
margin-bottom: 40px;
font-size: 45px;
}
.thumnailSlider .owl-carousel .owl-item img {
height: 200px;
object-fit: cover;
}
No comments:
Post a Comment