I have a problem with the intersection observer API. I'm trying to trigger an animation when the intersectionRatio is at least 40%, so I'm using the code below:
if(entry.intersectionRatio > 0.40){
DO SOMETHING
}
However I keep getting intersection ratios of "0.0xxxx" or even less at "0.00xxxx". For example right now I'm getting a intersection ratio printed to the console of 0.007672634441405535. I could try to use this values to trigger my animations instead but the value are very unpredictables and also the element never get fully into view since the element never gets a intersectionRatio of 1, even when I can see the element completely, so I want to know where the error is and learn to fix it.I'm using bootstrap and I have deleted the scripts that the framework uses and that have no solved the problem.
Here is the website, the section that I'm talking about is the cards below the "Meet the team" title. Also my script will print to the console the intersection ratio of the cards element when you scroll to that section.
Thank you for you help.
let cards = document.querySelectorAll(".card");
let container = document.querySelector("#cards");
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
console.log("The intersectionRatio is: " + entry.intersectionRatio);
if (entry.intersectionRatio > 0.40) {
cards.forEach(card => {
card.classList.add("animate");
});
}
});
});
cards.forEach(card => {
observer.observe(card);
});
html,
body {
font-family: "Poppins", sans-serif;
color: #222;
}
.site-wrapper {
width: 100%;
padding: 0;
margin: 0;
}
/*Navbar*/
#navbar .navbar-brand>img {
height: 3rem;
}
/*End Navbar*/
/*Welcome*/
.welcome hr {
border-top: 2px solid #b4b4b4;
width: 95%;
}
.welcome {
width: 65%;
padding: 3rem;
}
/*End Welcome*/
/*Showcase Icons*/
#showcase .row {
padding: 3rem;
}
#showcase .icon {
padding: 2rem;
}
#showcase .icon {
display: flex;
justify-content: center;
}
#showcase .icon>svg {
height: 6rem;
width: 6rem;
}
#showcase .icon0 {
color: #e54d26;
}
#showcase .icon1 {
color: #563d7c;
}
#showcase .icon2 {
color: #2163af;
}
/*End Showcase*/
/*Section 1*/
#section1 {
padding: 4rem
}
#section1 img {
height: 100%;
width: 100%;
}
#section1 .btn {
margin-bottom: 2rem;
}
/*End Section 1*/
/*Paralax*/
figure {
height: 30rem;
width: 100%;
}
figure .fixed-wrap {
height: 100%;
width: 100%;
}
#fixed {
height: 100%;
width: 100%;
background-image: url(http://lorempixel.com/output/animals-q-c-640-480-4.jpg);
background-attachment: fixed;
background-size: cover;
}
/*End Paralax*/
/*Emoji*/
#emoji-container {
padding: 3rem;
overflow: hidden;
}
#emoji-container .btn {
width: 100%;
}
#emoji img {
width: 200px;
}
#emoji {
overflow: hidden;
}
/*End Emoji*/
/*Section 2*/
/*TODO*/
#section2 {
padding: 2rem;
}
#section2 hr {
border-top: 2px solid #d5d5d5;
width: 75%;
padding: .8rem;
}
#section2 h1 {
padding: 1.5rem;
}
/*End Section 2*/
/*Cards*/
#cards {
padding: 3rem;
}
/*End Cards*/
/*Section 3*/
#section3 {
padding: 3rem;
}
#section3 .row {
padding: 1rem;
}
/*End Section 3*/
/*Social-media*/
#social-media {
padding-bottom: 4rem;
margin-bottom: 3rem;
text-align: center;
}
#social-media h2 {
padding: 2rem;
}
#social-media a {
text-decoration: none;
padding: 3rem;
}
#social-media .icon {
height: 4.5rem;
width: 4.5rem;
display: inline-block;
}
#social-media .icon0 {
color: #3b5998;
}
#social-media .icon1 {
color: #00aced;
}
#social-media .icon2 {
color: #dd4b39;
}
#social-media .icon3 {
color: #517fa4;
}
#social-media .icon4 {
color: #bb0000;
}
#social-media .icon0:hover,
#social-media .icon1:hover,
#social-media .icon2:hover,
#social-media .icon3:hover,
#social-media .icon4:hover {
color: #d5d5d5;
}
/*End Social-media*/
/*Footer*/
footer {
background-color: #3f3f3f;
color: #d5d5d5;
padding-top: 2rem;
padding-bottom: 1rem;
}
footer a {
color: #d5d5d5;
}
hr.light {
border-top: 1px solid #d5d5d5;
width: 75%;
margin-top: .8rem;
margin-bottom: 1rem;
}
hr.light-100 {
border-top: 1px solid #d5d5d5;
width: 100%;
margin-top: .8rem;
margin-bottom: 1rem;
}
/*End Footer*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="slider.css">
<link rel="stylesheet" type="text/css" href="Showcase.css">
<link rel="stylesheet" type="text/css" href="Jumbotron.css">
<link rel="stylesheet" type="text/css" href="animation.css">
<link rel="stylesheet" type="text/css" href="slider.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500" rel="stylesheet">
</head>
<body>
<div class="site-wrapper">
<!--Navbar-->
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light" id="navbar">
Placeholder
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">Placeholder</li>
<li class="nav-item">Placeholder</li>
<li class="nav-item">Placeholder</li>
<li class="nav-item">Placeholder</li>
<li class="nav-item">Placeholder</li>
</ul>
</div>
</nav>
<!--End Navbar-->
<!--Slider-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://lorempixel.com/output/nightlife-q-c-640-480-7.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://lorempixel.com/output/food-q-c-640-480-3.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://lorempixel.com/output/food-q-c-640-480-4.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--End Slider-->
<!--Jumbotron-->
<div class="jumbotron">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">A web design agency that allows individuals and organizations to make their brand accessible via the World Wide Web.
</p>
</div>
<div class="col-xs-12 col sm-12 col-md-3 col-lg-3 col-xl-2">
<button class="btn btn-secondary">
Learn more
</button>
</div>
</div>
</div>
<!--End Jumbotron-->
<!--Welcome-->
<div class="container-fluid welcome">
<div class="row text-center">
<div class="col-12">
<h1>Built with ease</h1>
</div>
<hr class="my-4">
<div class="col-12">
<p class="lead">Welcome to my Portafolio website. It is free. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas eos itaque velit odit repudiandae!</p>
</div>
</div>
</div>
<!--End Welcome-->
<!--Showcase Icons-->
<div class="container-fluid showcase" id="showcase">
<div class="row text-center">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="icon icon0">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="html5" class="svg-inline--fa fa-html5 fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"></path>
</svg>
</div>
<h2>HTML5</h2>
<p>Built with the latest version of html, HTML5.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="icon icon1">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="bootstrap" class="svg-inline--fa fa-bootstrap fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M292.3 311.93c0 42.41-39.72 41.43-43.92 41.43h-80.89v-81.69h80.89c42.56 0 43.92 31.9 43.92 40.26zm-50.15-73.13c.67 0 38.44 1 38.44-36.31 0-15.52-3.51-35.87-38.44-35.87h-74.66v72.18h74.66zM448 106.67v298.66A74.89 74.89 0 0 1 373.33 480H74.67A74.89 74.89 0 0 1 0 405.33V106.67A74.89 74.89 0 0 1 74.67 32h298.66A74.89 74.89 0 0 1 448 106.67zM338.05 317.86c0-21.57-6.65-58.29-49.05-67.35v-.73c22.91-9.78 37.34-28.25 37.34-55.64 0-7 2-64.78-77.6-64.78h-127v261.33c128.23 0 139.87 1.68 163.6-5.71 14.21-4.42 52.71-17.98 52.71-67.12z"></path>
</svg>
</div>
<h2>BOOTSTRAP</h2>
<p>Built with the latest version of html, HTML5.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="icon icon2">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="css3" class="svg-inline--fa fa-css3 fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M480 32l-64 368-223.3 80L0 400l19.6-94.8h82l-8 40.6L210 390.2l134.1-44.4 18.8-97.1H29.5l16-82h333.7l10.5-52.7H56.3l16.3-82H480z"></path>
</svg>
</div>
<h2>CSS3</h2>
<p>Built with the latest version of html, HTML5.</p>
</div>
</div>
<hr class="my-4">
</div>
<!--End Showcase-->
<!--Section 1-->
<div class="container-fluid section1" id="section1">
<div class="row">
<div class="col-lg-6">
<h2>If you built it...</h2>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat excepturi quibusdam quisquam rerum dolorem nam saepe fuga iusto error nemo? </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quia officia delectus aliquid magni assumenda dolorem eligendi, cumque reiciendis, ad incidunt ut fuga expedita commodi dolorum minima. Accusantium maxime, magni necessitatibus
itaque esse modi corrupti, facilis commodi vero ratione illo est neque impedit. Illum, repellat. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dolorum placeat quas vel veniam at consequatur libero pariatur? Commodi suscipit accusamus sequi animi excepturi atque esse debitis, ipsam autem in cumque maxime, nesciunt, minus
iusto libero rerum optio eveniet quia eum ullam soluta labore fugiat consequuntur. Neque, tenetur. Excepturi perspiciatis placeat dolorum accusantium molestiae autem eaque ut, sint veniam, iusto qui tempore repellat, optio voluptatem alias
libero eligendi facilis laudantium quam. Error omnis officiis nulla eius at fuga dolorem! Similique facere nesciunt numquam ad distinctio. </p>
<br>
<button class="btn btn-primary">
Learn more
</button>
</div>
<div class="col-lg-6">
<img src="http://lorempixel.com/output/food-q-c-640-480-8.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
<hr class="my-4">
<!--End Section 1-->
<!--Paralax-->
<figure id="uno">
<div class="fixed-wrap">
<div id="fixed">
</div>
</div>
</figure>
<!--End Parallax-->
<!--Emoji-->
<div class="container-fluid emoji-container" id="emoji-container">
<button class="btn btn-primary fun" data-toggle="collapse" data-target="#emoji">
Click for fun.
</button>
<div class="collapse" id="emoji">
<div class="container-fluid">
<div class="row text-center">
<div class="col-sm-6 col-md-3">
<img src="http://lorempixel.com/output/people-q-c-640-480-4.jpg" alt="" class="gif">
</div>
<div class="col-sm-6 col-md-3">
<img src="http://lorempixel.com/output/technics-q-c-640-480-4.jpg" alt="" class="gif">
</div>
<div class="col-sm-6 col-md-3">
<img src="http://lorempixel.com/output/abstract-q-c-640-480-10.jpg" alt="" class="gif">
</div>
<div class="col-sm-6 col-md-3">
<img src="http://lorempixel.com/output/animals-q-c-640-480-9.jpg" alt="" class="gif">
</div>
</div>
</div>
</div>
</div>
<!--End Emoji-->
<!--Section 2-->
<div class="container-fluid section2" id="section2">
<div class="row text-center">
<div class="col-12">
<h1 class="display-4">Meet the Team</h1>
</div>
<hr>
</div>
</div>
<!--End Section 2-->
<!--Cards-->
<div class="container-fluid cards" id="cards">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="http://lorempixel.com/output/technics-q-c-640-480-1.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Johnn Doe1</h4>
<p class="card-text">John is an Internet entrepreneur with almost 20 years of experience.</p>
<button class="btn btn-primary">See profile</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="http://lorempixel.com/output/technics-q-c-640-480-3.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Johnn Doe2</h4>
<p class="card-text">John is an Internet entrepreneur with almost 20 years of experience.</p>
<button class="btn btn-primary">See profile</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="http://lorempixel.com/output/fashion-q-c-640-480-7.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Johnn Doe3</h4>
<p class="card-text">John is an Internet entrepreneur with almost 20 years of experience.</p>
<button class="btn btn-primary">See profile</button>
</div>
</div>
</div>
</div>
</div>
<!--End Cards-->
<!--Section 3-->
<div class="container-fluid section3" id="section3">
<div class="row">
<div class="col-md-12 col-lg-6">
<h2>Our Philosofy</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, eum saepe? Quisquam, dolores. Consectetur soluta ad voluptatum magnam eveniet ipsa! </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel maxime similique culpa doloremque debitis unde accusamus, dolores explicabo laboriosam ratione quos, recusandae doloribus. Voluptates non iusto modi quae quam! </p>
</div>
<div class="col-lg-6">
<img src="img/05.jpg" alt="" class="img-fluid">
</div>
</div>
<hr class="my-4">
</div>
<!--End Section 3-->
<!--Social Media-->
<div class="container-fluid social-media" id="social-media">
<div class="row">
<div class="col-12">
<h2>Connect</h2>
</div>
<div class="col-12">
<a href="#">
<div class="icon icon0">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="svg-inline--fa fa-facebook-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path>
</svg>
</div>
</a>
<a href="#">
<div class="icon icon1">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</div>
</a>
<a href="#">
<div class="icon icon2">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google-plus-g" class="svg-inline--fa fa-google-plus-g fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M386.061 228.496c1.834 9.692 3.143 19.384 3.143 31.956C389.204 370.205 315.599 448 204.8 448c-106.084 0-192-85.915-192-192s85.916-192 192-192c51.864 0 95.083 18.859 128.611 50.292l-52.126 50.03c-14.145-13.621-39.028-29.599-76.485-29.599-65.484 0-118.92 54.221-118.92 121.277 0 67.056 53.436 121.277 118.92 121.277 75.961 0 104.513-54.745 108.965-82.773H204.8v-66.009h181.261zm185.406 6.437V179.2h-56.001v55.733h-55.733v56.001h55.733v55.733h56.001v-55.733H627.2v-56.001h-55.733z"></path>
</svg>
</div>
</a>
<a href="#">
<div class="icon icon3">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" class="svg-inline--fa fa-instagram fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
</svg>
</div>
</a>
<a href="#">
<div class="icon icon4">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
</svg>
</div>
</a>
</div>
</div>
</div>
<!--End Social Media-->
<!--Footer-->
<footer>
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-4">
<img src="img/logo.svg" alt="">
<hr class="light">
<p>555-555-555</p>
<p>email#myemail.com</p>
<p>505 Street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our hours</h5>
<hr class="light">
<p>Monday:9am-5pm</p>
<p>Saturday:10am-4pm</p>
<p>Sunday:colsed</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Service Area</h5>
<hr class="light">
<p>City, State, 0000</p>
<p>City, State, 0000</p>
<p>City, State, 0000</p>
<p>City, State, 0000</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>© Juan Pedro Erbetta</h5>
</div>
</div>
</div>
</footer>
<!--End Footer-->
</div>
<!-- /.site-wrapper -->
<script src="animation.js"></script>
<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>
</body>
</html>
You are missing the OPTIONS for the IntersectionObserver, without that you will be just using the defaults.
See: https://developer.mozilla.org/es/docs/Web/API/Intersection_Observer_API
So, for your example, try the following:
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
console.log("The intersectionRatio is: " + entry.intersectionRatio);
if (entry.intersectionRatio > 0.40) {
cards.forEach(card => {
card.classList.add("animate");
});
}
});
}, {
root: null,
rootMargin: '0px',
threshold: 1.0
});
Hope that helps.
Related
How I can store all my price values into an empty array so I can sort them with my "sort: low to high button"? Most examples of sort() I see online have an array with integers already in them and then are sorted, But my issue is I would like to store all my <h4> class price values into an array and then sort. Am I going about this the wrong way?
function filterItems(e) {
const items = document.querySelectorAll(".item"); //selects all menu items
let filter = e.target.dataset.filter; //grabs value in the event target's data-filter attribute
// if filter all button is clicked, loop through all items and remove the hidden class
if (filter === "*") {
items.forEach(item => item.classList.remove("hidden"));
} else {
//loops through all items
items.forEach(item => {
item.classList.contains(filter) //does item have the same data-filter in its class list
? item.classList.remove('hidden') //if true ?, make sure css class .hidden is NOT applied
: item.classList.add('hidden'); // if false : does not have same filter tag, apply .hidden css class
});
};
};
*{
box-sizing:border-box;
}
body {
background:#e5e5e5;
color:#14213d;
font-family: 'Montserrat', sans-serif;
margin:0;
}
/* everything in the middle */
.container {
margin:auto;
max-width:1170px;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
align-items:center;
}
h1{
margin-bottom:12px;
}
hr.solid {
width:150px;
border-top: 3px solid #fca311;
}
/* button styles */
button {
padding: 6px 15px;
font-weight:bold;
border: 2px solid #14213d;
color:#14213d;
background-color:#e5e5e5;
margin: 4px 2px;
border-radius: 8px;
transition-duration: 0.4s;
cursor: pointer;
}
button:hover{
color:#fff;
background-color:#14213d;
}
#flex-buttons {
margin-top:10px;
}
/*CSS GRID Menu Section */
.food-items-container {
width: 90vw;
/* it aligns the items inside their grid areas on the inline axis */
justify-items: center;
display:grid;
gap: 1rem 2rem;
grid-template-columns:1fr 1fr;
margin-top:50px;
}
.food-items-container img {
width:220px;
height:200px;
object-fit:cover;
border: 2.8px solid #fca311;
}
hr.border {
width:100%;
border:none;
border-bottom: 1px solid #fca311;
}
/* Item Content */
.item {
display: grid;
gap: 1rem 2rem;
max-width: 25rem;
}
.item-info header {
display: flex;
/* Indents Price */
justify-content: space-between;
}
.item-info h4 {
margin-top:5px;
}
.item-text {
text-align:left;
}
.price {
color:#fca311;
}
.hidden {
display:none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e5e5e5;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #14213d;
padding: 6px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.checked {
color: orange;
}
.stars {
text-align:left;
margin-top:-10px;
}
#media screen and (min-width: 768px) {
.item {
grid-template-columns: 225px 1fr;
gap: 0 1.25rem;
max-width: 40rem;
}
.food-items-container img {
height: 175px;
}
}
#media screen and (min-width: 1200px) {
.food-items-container {
width: 95vw;
grid-template-columns: 1fr 1fr;
}
.food-items-container img {
height: 150px;
}
}
<!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.0">
<title>Restaurant-Menu-App</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" href= "style.css">
</head>
<body>
<div class ="container">
<h1>Our Menu</h1>
<hr class="border">
<!--Filter Buttons -->
<!--adding event listener to each of filters to call function, passing filter value -->
<div id ="flex-buttons">
<button type ="button" class="filter" data-filter="*" onclick=filterItems(event)>All</button>
<button type ="button" class="filter" data-filter="breakfast" onclick=filterItems(event)>Breakfast</button>
<button type ="button" class="filter" data-filter="lunch" onclick=filterItems(event)>Lunch</button>
<button type ="button" class="filter" data-filter="drink" onclick=filterItems(event)>Drinks</button>
<button type ="button" class="filter" data-filter="dinner" onclick=filterItems(event)>Dinner</button>
<div class="dropdown">
<button type ="button" class="dropbtn">Sort</button>
<div class="dropdown-content">
<button type ="button" role ="btn" id="sort-price-low" onclick=>Sort: Price Low to High</button>
<button type ="button" role ="btn" id="sort-price-high">Sort: Price High to Low</button>
Sort: Rating
</div>
</div>
</div>
<!-- Menu Section -->
<div class="food-items-container">
<div class="item breakfast">
<img src="/img/avocado.jpg">
<div class="item-info">
<header>
<h4>Avocado Toast</h4>
<h4 class="price">$16.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Nesciunt ipsum dolor sit amet excepturi adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi!
</p>
</div>
</div>
<div class="item lunch">
<img src="/img/burger.jpg">
<div class="item-info">
<header>
<h4>Big Burger</h4>
<h4 class="price">$25.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem consectetur dolor sit laboriosam elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt.
</p>
</div>
</div>
<div class="item drink">
<img src="/img/gentleman.jpg">
<div class="item-info">
<header>
<h4>The Gentleman</h4>
<h4 class="price">$10.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem reprehenderit dolor sit elit reprehenderit. Repudiandae, sint quam. Et reprehenderit fugiat.
</p>
</div>
</div>
<div class="item drink">
<img src="/img/marg.jpg">
<div class="item-info">
<header>
<h4>Silly Margarita</h4>
<h4 class="price">$12.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis.
</p>
</div>
</div>
<div class="item drink">
<img src="/img/mojito.jpg">
<div class="item-info">
<header>
<h4>Clean Mojito</h4>
<h4 class="price">$13.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi.
</p>
</div>
</div>
<div class="item drink">
<img src="/img/old.jpg">
<div class="item-info">
<header>
<h4>Old Fashioned</h4>
<h4 class="price">$13.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</div>
<div class="item breakfast">
<img src="/img/om.jpg">
<div class="item-info">
<header>
<h4>Cheddar Omelette</h4>
<h4 class="price">$17.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam.
</p>
</div>
</div>
<div class="item breakfast">
<img src="/img/pancakes.jpg">
<div class="item-info">
<header>
<h4>The Stacked Pancake</h4>
<h4 class="price">$17.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</p>
</div>
</div>
<div class="item dinner">
<img src="/img/pasta.jpg">
<div class="item-info">
<header>
<h4>Meat Pasta</h4>
<h4 class="price">$28.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</div>
<div class="item dinner">
<img src="/img/pizza.jpg">
<div class="item-info">
<header>
<h4>Spinach Pizza</h4>
<h4 class="price">$20.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<hr class="border">
<p class="item-text">
Vivamus elementum semper nisi.
</p>
</div>
</div>
<div class="item lunch">
<img src="/img/salad.jpg">
<div class="item-info">
<header>
<h4>Salad</h4>
<h4 class="price">$12.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</div>
<div class="item dinner">
<img src="/img/salmon.jpg">
<div class="item-info">
<header>
<h4>Atlantic Salmon</h4>
<h4 class="price">$30.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex
</p>
</div>
</div>
<div class="item lunch">
<img src="/img/sandwhich.jpg">
<div class="item-info">
<header>
<h4>BLT Sandwhich</h4>
<h4 class="price">$20.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</div>
<div class="item dinner">
<img src="/img/steak.jpg">
<div class="item-info">
<header>
<h4>Steak Filet</h4>
<h4 class="price">$38.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</div>
<div class="item breakfast">
<img src="/img/waffle.jpg">
<div class="item-info">
<header>
<h4>Strawberry Waffle</h4>
<h4 class="price">$17.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</div>
<div class="item lunch">
<img src="/img/wrap.jpg">
<div class="item-info">
<header>
<h4>Thai Chicken Wrap</h4>
<h4 class="price">$21.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.
</p>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Here is how you can use JavaScript to store the values of the h4 elements with class "price" in an array, and then sort the array:
//Select all h4 elements with class "price"
const priceElements = document.querySelectorAll("h4.price");
//Create an empty array to store the prices
let prices = [];
//Loop through the h4 elements and push the text content to the prices array
priceElements.forEach(price => {
prices.push(parseFloat(price.textContent)); //parsing the float value
});
//Sort the prices array in ascending order
prices.sort((a, b) => a - b);
//For descending order
prices.sort((a, b) => b - a);
I was trying to make my navbar sticky with jqueries the style of the className ".sticky" is in the css/styles.css folder
i am unable to achieve the sticky nav function... I don't know what I am doing wrong in my main.jss file
//html file ------->
<body>
<!-- HEAD SECTION WITH BG-IMAGE AND NAVBAR -->
<header class="masthead head" style="background-image: url('./images/back.jpg ');">
<!-- <div class="container-fluid p-0"> -->
<!-- NAVIGATION BAR WITH NAVBRAND AND TICKET -->
<nav class="navbar navbar-expand-lg navbar-light p-0">
<a class="navbar-brand" href="#"><img src="images/brand.png" alt="brand"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa-regular fa-align-right"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- <div class="mx-auto"></div> -->
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<!-- <div class="container">
<button type="button" class="btn btn-outline-dark btn-lg ticket">
<i class="fa-solid fa-ticket"></i>
<span>Tickets</span></button>
</div> -->
<div class="container ticket"><img src="images/ticket.png" alt="ticket"></div>
</div>
</nav>
<!-- </div> -->
<div class="container text-center">
<!-- BACKGROUND IMAGE WITH LOGO IMAGE AND CAPTION TEXT -->
<div class="row">
<!-- CAPTION TEXT -->
<div class="col-md-6 col-sm-12">
<span class="top">Experience</span>
<h1>The Ada Calypso</h1>
<span>'Dec 16<sup>th</sup>-17<sup>th</sup></span>
</div>
<!-- LOGO IMAGE -->
<div class="col-md-6 col-sm-12 h-25">
<img src="images/banner.png" alt="logo image">
</div>
</div>
</div>
</header>
<!-- MAIN PAGE WITH SECTIONS -->
<main>
<!-- EXPERIENCE SECTION WITH IMAGES AND CAPTION -->
<section class="experience">
<div class="container align-center">
<h2>The Experience</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row">
<div class="col-md-6 col-sm-12">
<img src="images/fireside.jpg" alt="fireside at treasure island">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/relax.jpg" alt="couples enjoying a drink">
</div>
</div>
<h2>The Culture</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bubble">
<div class="col-md-6 col-sm-12">
<img src="images/samba.jpg" alt="samba dancers">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/masqu.jpg" alt="masqueraders paroding the streets">
</div>
</div>
<h2>The Arts</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bg">
<div class="col-md-6 col-sm-12">
<img src="images/art.jpg" alt="arts">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/creativity.jpg" alt="arts">
</div>
</div>
<h2>The River</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bg">
<div class="col-md-6 col-sm-12">
<img src="images/ada_port.jpg" alt="yatch on ada">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/ada_beach.jpg" alt="ada beach">
</div>
</div>
</div>
</section>
<!-- THE MEDIA PARTNERSHIP SECTION -->
<section id="sponsor">
<div class="container">
<h2>Media Partners</h2>
<img class="sponsor_logo" src="images/ghone.png" alt="Gh one Tv">
<img class="sponsor_logo" src="images/4syte.png" alt="4syte tv">
<img class="sponsor_logo" src="images/gbafrica.png" alt="Gb Africa">
<img class="sponsor_logo" src="images/kobby.png" alt="kobby kyei">
<img class="sponsor_logo" src="images/sheldon.png" alt="Kwadwo sheldon">
<img class="sponsor_logo" src="images/ronnie.png" alt="Ronnie is everywhere">
<img class="sponsor_logo" src="images/sammykay.jpg" alt="sammy kay">
<img class="sponsor_logo" src="images/starr.png" alt="Starr fm">
</div>
</section>
<!-- EMBED GOOGLE MAP -->
<section id="map">
<div class="container">
<h3>Locate Us</h3>
<div class="gmap_canvas">
<iframe width="100%" height="468"
src="https://maps.google.com/maps?q=Camp%20tsatse%20resort&t=&z=15&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section class="about">
<div class="container text-center">
<!-- ABOUT CONTENT -->
<div class="about-content text-right">
<h2>About RiverFest</h2>
<p class="pt-4">RiverFest22” is an annual festival curated to celebrate and propagate the
socioeconomic and cultural affairs of Ghana. It aims at creating a networking and
entertaining environment for all our revelers. Our target is the energetic individual
who wants to experience nature whiles having fun.This maiden edition will be organized
in Ada Foah at the Camp Tsatse Resort. The Resort is located on the amazing banks of the
Volta River.</p>
<p class="pt-4">#RiverFest22, which is also themed “The Ada Calypso”, is a 3-day fun-packed
event, which is scheduled to take place from Friday, 16 to Sunday, 18 December 2022. The
festival is designed to have an action-packed programme of activities with exciting
exhibitions of talents and products from vendors.</p>
<p class="pt-4">
The event promises patrons with an amazing experience of art and creativity from the
local creative and art industry and a taste of calypso in the Ghanaian environment.
There will be a street carnival with samba dancers and masquerades from the town to the
event venue. There will also be a special canoe boat race on the river to help promote
the need to protect the water bodies as well as create an ecological awareness of the
place.
</p>
<p class="pt-4">
The festival is set for both residential and non-residential participation. Residential
patrons arrive on Friday and leave on Sunday. All non-residential revelers will be
welcome on Saturday for the full day event.
</p>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER SECTION WITH CONTACTS AND COPYRIGHT -->
<footer>
<div class="container-fluid p-0">
<div class="row text-left">
<!-- FIRST COLUMN -->
<div class="col-md-5 col-md-5">
<h2 class="text-light">Presented By</h2>
<img class="footer_image" src="images/riverfest.png" alt="RiverFest logo">
<p class="pt-4 text-muted">
All rights reserved © Copyright 2022 Developed by <span>WolfeTech Devs Inc.</span> | Powered by
<span>Lono Concepts</span>
</p>
</div>
<!-- SECOND COLUMN -->
<div class="col-md-5">
<h4 class="text-light">Tickets Available On sale</h4>
<a class="ticket-image" href="#"><img src="images/ticket.png" alt="Ticket"></a>
</div>
<!-- THIRD COLUMN -->
<div class="col-md-2">
<h4 class="text-light">Follow Us</h4>
<p class="text-muted">Let's go social</p>
<div class="column">
<i class="social-icon fab fa-facebook-f"></i>
<i class="social-icon fab fa-twitter"></i>
<i class="social-icon fab fa-instagram"></i>
<i class="social-icon fa-brands fa-tiktok"></i>
<i class="social-icon fa-brands fa-youtube"></i>
</div>
</div>
</div>
</div>
</footer>
<!-- BOOTSTRAP JAVASCRIPT PLUGIN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<!-- JQUERY PLUGIN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Personal JAVASCRIPT -->
<script src="js/main.js"></script>
</body>
//CSS FILE --------------->
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
header,
section {
overflow-x: hidden;
}
:root {
--Slackey: 'Slackey', cursive;
--Rock-Salt: 'Rock Salt', cursive;
--light-black: #2e2c2caf;
--bggradient: linear-gradient(to bottom, #FEB101, #FE7435);
--light-gray: rgba(255, 255, 255, 0.877);
}
header {
opacity: rgba(0, 0, 0, 0.2);
}
/* NAVBAR STYLES */
header .navbar a {
font-family: var(--Slackey);
font-size: 0.9em;
color: black;
}
.masthead {
background-size: cover;
min-height: 100vh;
position: relative;
color: white;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
header .nav-item:last-child {
padding-right: 5.5em;
}
header .nav-item {
padding: 1.5em;
}
header .navbar-brand {
padding-left: 3rem;
}
header .navbar .navbar-brand img {
width: 40%;
}
.ticket img{
width: 30%;
}
.ticket i {
padding-right: 0.1rem;
}
header .nav-link:hover {
color: whitesmoke;
}
header .nav-link {
transition: all 0.3s ease-in-out;
}
.ticket span {
font-family: var(--Slackey);
}
header .row .col-md-5 {
padding: 4.2vmin 1vmin;
}
header .row .col-md-6 {
padding: 22vmin 1vmin;
padding-bottom: 35vmin;
font-family: var(--Rock-Salt);
}
header .row .col-md-5 img {
width: 90%;
}
header .container .col-md-6 span {
padding: 1vmin;
letter-spacing: 4px;
font-size: 3.5vmin;
}
header .container .col-md-6 h1 {
font-size: 8vmin;
font-weight: bold;
padding: 0.1em 0em;
}
/*/*//*/*//* MAINPAGE SECTIONS *//*/*//*/*/
/* EXPERIENCE SECTION */
.experience{
background: linear-gradient(to bottom
white, #FE7435
);
}
.experience .container {
padding: 3% 0%;
}
.experience .col-md-6 img {
opacity: 0.8;
width: 100%;
border-radius: 0.2em;
border: 1px solid #000000;
}
.experience .container h2 {
font-size: 3.5vmin;
font-weight: bold;
font-family: var(--Rock-Salt);
padding: 3.5em 0em .5em;
}
/* MEDIA PARTNERS */
#sponsor h2 {
font-family: var(--Rock-Salt);
font-weight: bold;
text-align: left;
font-size: 2rem;
padding: 25px;
}
.sponsor_logo {
width: 9%;
margin: 30px 20px 50px;
}
#sponsor .container {
padding: 7% 0%;
}
/* ABOUT SECTION */
.about{
padding: 8vmin 0;
}
.about .container .about-content{
background: white;
border-radius: 3px;
text-align: left;
padding: 13vmin 5vmin 20vmin 10vmin;
box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.about .container .about-content h2{
font-size: 3.5vmin;
font-weight: bold;
font-family: var(--Rock-Salt);
padding: 1.5em 0em 1.2em;
text-align: center;
}
.about.about-content p{
font-size: 0.9em;
color: rgba(0, 0, 0, 0.5);
}
/* MAP */
.gmap_canvas {
overflow: hidden;
background: none !important;
}
#map .container h3{
font-family: var(--Rock-Salt);
font-weight: bold;
text-align: left;
font-size: 2rem;
padding: 25px;
}
/* FOOTER */
footer{
background: rgba(0, 0, 0, 0.815);
overflow-x: hidden;
padding: 14vmin 18vmin;
}
footer h2, h4{
font-family: var(--Slackey);
padding: 20px;
font-weight: bold;
font-size: 1.5rem;
}
footer .column i{
color: #dd2476
}
footer .column i+i{
padding: 0 0.5em;
}
footer p>span a{
text-decoration: none;
}
footer p>span a{
color: #FE7435;
}
/* STICKY CLASS */
.sticky{
position: fixed;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.815);
z-index: 9999;
transition: all 1.5s ease;
}
//MAIN.JS FILE --------------------------->
let navigationbar = $(".navbar");
$(window).scroll(function () {
let topOfSect = $(".experience").offset().top - window.innerHeight;
if ($(window).scrollTop() > topOfSect) {
navigationbar.addClass("sticky")
}
else {
navigationbar.removeClass("sticky")
}
});
Maybe you can try with position: sticky;
sorry if this is a fairly vague question, I have a grid with two rows ontop of one another with content expanding below either of the two rows when the panel is clicked. This works fine on desktop and tablet sized devices but for mobile I'd like the panels to span vertically, with the expanding content opening directly beneath each panel. Any pointers on a starting point for this would be great, I know I can use media queries but really unsure how to structure my code to make it a reality.
Working fiddle here: https://jsfiddle.net/simoncunningham/a3e6514r/3/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
<script src="index.js"></script>
</head>
<body>
<div style="text-align: center">
<h2>Expanding Grid</h2>
<p>Click on the boxes below:</p>
</div>
<!-- Four columns -->
<div class="row">
<div class="column" onclick="openTab('b1');">
<img src="./Icons/Banking.svg" />
<p>Banking</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onClick="openTab('b2');">
<img src="./Icons/Regtech.svg" />
<p>RegTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onClick="openTab('b3');">
<img src="./Icons/InsurTech.svg" />
<p>InsurTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onClick="openTab('b4');">
<img src="./Icons/Lending.svg" />
<p>Lending</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
</div>
<!-- Full-width columns: (hidden by default) -->
<div id="b1" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h3>Banking</h3>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b2" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>RegTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b3" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>InsurTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b4" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Lending</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<!-- Bottom four columns -->
<div class="row">
<div class="column" onclick="openTab('b5');">
<img src="./Icons/Accounting.svg" />
<p>Accounting</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onclick="openTab('b6');">
<img src="./Icons/Payments.svg" />
<p>Payments</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onclick="openTab('b7');">
<img src="./Icons/Quote.svg" />
<p>Quote Aggregators</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onclick="openTab('b8');">
<img src="./Icons/WealthTech.svg" />
<p>WealthTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
</div>
<div id="b5" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Accounting</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b6" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Payments</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b7" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Quote</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b8" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>WealthTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
</body>
</html>
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName('containerTab');
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
document.getElementById(tabName).style.display = 'block';
}
// Get all the tabs into a collection
// (don't use .getElementsByClassName()!)
let tabs = document.querySelectorAll('.column');
// Set up a click event handler on each of the tabs
tabs.forEach(function (tab) {
tab.addEventListener('click', function (event) {
// Loop over all the tabs and remove the active class
tabs.forEach(function (tab) {
tab.classList.remove('active-column');
});
// Set the background of the clicked tab
this.classList.add('active-column');
});
});
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* The grid: Four equal columns that floats next to each other */
.column {
background-color: black;
float: left;
width: 25%;
height: 226px;
padding: 50px;
text-align: center;
font-size: 16px;
cursor: pointer;
color: white;
}
.active-column {
background-color: green;
float: left;
width: 25%;
height: 226px;
padding: 50px;
text-align: center;
font-size: 16px;
cursor: pointer;
color: white;
}
.containerTab {
padding: 20px;
color: white;
}
/* Clear floats after the columns */
.row:after {
content: '';
display: table;
clear: both;
}
/* Closable button inside the container tab */
.closebtn {
float: right;
color: white;
font-size: 35px;
cursor: pointer;
}
.arrow-down {
width: 25px;
height: 25px;
}
you can add this code to your css:
#media screen and (max-width: 768px) {
.column{
width:100%
}
}
You can a #media in css to make it so it responds really well on mobile devices
If you want my advice, you should use bootstrap for a base of your css. It will really help you when you'll organise your page. There is a lot of good documentation in their. You only need to add classes in your elements. It's really easy to use.
link: https://getbootstrap.com/docs/4.0/layout/grid/
Your page is separated by 12 pieces. You can say, if my page is large, take 3/12 of the space for each elements. If the page is medium size, take the half of the page and if it's small, take all the horizontal space. So in my class, I'll write class="col-lg-3 col-md-6 col-sm-12". I'm sorry if it's not clear. But for real it's really simple.
I am using Gentelella bootstrap template and I have a problem with the height of one of my panels.
The problem is that the left x_panel has smaller height than the right one. The different between these panels is that the left one contains svg element, while the right one contains canvas with chart.js. How can I set the heights equal?
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Title of the chart<small>Sub-title</small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<svg class="company"></svg>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Title of the chart <small>Sub-title</small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<canvas id="mybarChart"></canvas>
</div>
</div>
</div>
</div>
UPDATE:
Using your code
.row {
display: flex;
justify-content: space-around;
width: 100%;
}
.row>div {
background-color: lightblue;
border: thin solid black;
}
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Title of the chart<small>Sub-title</small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<svg class="company"></svg>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Title of the chart <small>Sub-title</small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<canvas id="mybarChart"></canvas>
</div>
</div>
</div>
</div>
Try this
fiddle link with your code
You also use
.child {
width:50%;
border: 1px solid;
}
.box {
display: flex;
width: 100%;
}
.child {
flex: 1 0 50%;
/*width:50%;*/ /* You can use width instead of flex */
border: 1px solid;
}
<div class="box">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea temporibus officia vel, placeat quisquam ipsum a perspiciatis ex sit nobis adipisci ab ipsam vitae esse fugit accusamus eum iure provident.
</div>
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi tempore nihil
</div>
</div>
With Bootstrap and your code.
.box {
display: flex;
width: 100%;
}
.child {
border: 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="box">
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="child">
<div class="x_panel">
<div class="x_title">
<h2>Title of the chart<small>Sub-title</small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<svg class="company"></svg>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="child">
<div class="x_panel">
<div class="x_title">
<h2>Title of the chart <small>Sub-title</small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<canvas id="mybarChart"></canvas>
</div>
</div>
</div>
</div>
Visit this link for code snippet https://codepen.io/arunkayathi/pen/dRPYzz
html
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>
<body>
<section id="projects">
<div class="content-box">
<div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
<h3>My Projects</h3>
<div class="content-title-underline"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="my-projects" class="owl-carousel owl-theme">
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1-NNfLpNtsFQY25z7A4u9pp2D_vJHTNU70RDupydx4i7BrMKYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus voluptatibus obcaecati temporibus, eligendi harum in iusto quasi dicta. Sunt tempora magnam eveniet, adipisci modi quos maxime sint expedita repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit Website</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid consequuntur . </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" target="_blank">visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQAOoZwRkgQ3KDjCJ2-GRtjKDc88iUqU6mJva17ym63D2W0XwnYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, omnis, </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint similique earum labore quos quidem ab! Quibusdam fugit consectetur tenetur odit, fuga amet aliquam architecto modi sequi ea, delectus, quisquam atque.</p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#projects" role="button">Visit site</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<body>
css
#projects {
background-color: #f65d52;
/* background-color: #2098D1;*/
}
#projects .content-title h3 {
color: #fff;
}
.project-info {
padding: 25px 0 25px 0;
color: #fff;
}
.project-info h5 {
font-size: 25px;
font-weight: 700;
}
.project-image img {
max-width: 480px !important;
max-height: 480px !important;
margin: 0 auto;
object-fit: contain;
}
.project-info-text {
line-height: 170%;
letter-spacing: 1px;
color: #fff !important;
font-weight: 500;
width: 70%;
margin: 0 auto;
}
.project-btn {
padding-top: 30px;
}
js
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true
});
});
Hello all,
I am having a problem with arranging divs in a carousel slider. As you can see from the above link the position of project title in each slid is changing.So can somebody help me in fixing the width and height of each divs, so that text and images will not overflow and in every slide all divs starts at same position instead of going up or down.
Your images need a fixed height otherwise things will get pushed down or up.
if you can't set a fixed height on the images then I suggest just a fixed position of the project title and description div. Maybe make it absolute of its parent.
Just simply use a fixed height for images:
.project-image img {
width: 100%;
max-width: 480px;
height: 480px;
margin: 0 auto;
}
Try this, set fixed height to your images.
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true
});
});
#projects {
background-color: #f65d52;
/*background-color: #2098D1;*/
}
#projects .content-title h3 {
color: #fff;
}
.project-info {
padding: 25px 0 25px 0;
color: #fff;
}
.project-info h5 {
font-size: 25px;
font-weight: 700;
}
.project-image img {
max-width: 480px !important;
max-height: 480px !important;
margin: 0 auto;
object-fit: contain;
height: 340px;
}
.project-info-text {
line-height: 170%;
letter-spacing: 1px;
color: #fff !important;
font-weight: 500;
width: 70%;
margin: 0 auto;
}
.project-btn {
padding-top: 30px;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>
<body>
<section id="projects">
<div class="content-box">
<div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
<h3>My Projects</h3>
<div class="content-title-underline"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="my-projects" class="owl-carousel owl-theme">
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1-NNfLpNtsFQY25z7A4u9pp2D_vJHTNU70RDupydx4i7BrMKYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus voluptatibus obcaecati temporibus, eligendi harum in iusto quasi dicta. Sunt tempora magnam eveniet, adipisci modi quos maxime sint expedita repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit Website</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid consequuntur . </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" target="_blank">visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQAOoZwRkgQ3KDjCJ2-GRtjKDc88iUqU6mJva17ym63D2W0XwnYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, omnis, </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint similique earum labore quos quidem ab! Quibusdam fugit consectetur tenetur odit, fuga amet aliquam architecto modi sequi ea, delectus, quisquam atque.</p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#projects" role="button">Visit site</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</body>
Add responsiveClass for set all slide responsive.
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true,
responsiveClass:true
});
});