I’ve created an owl carousel and I wanted to add some external links to my repositories that the user can click.
I cannot seem to click the links inside the body. I have played around with the z-index but still no luck. can anyone take a look at my code and css and let me know if I am missing anything obvious?
return (
<div className="projects-container">
<ScreenHeading
title={"Projects"}
subHeading={"My Projects I have Worked On"}
/>
<section className="projects-section" id={props.id || ""}>
<div className="container mt-5">
<OwlCarousel
className="owl-carousel"
id="projects-carousel"
{...options}
>
<div className="ms-2 me-2">
<div className="card">
<img
src="img/projects/tweets.jpg"
className="card-img-top"
></img>
<div className="card-body">
<h5 className="card-title">
{" "}
COVID-19 Twitter Misinformation NLP Machine Learning
Research Project
</h5>
<p>
Developed multiple ML algorithms to classify 31,000 tweets
related to COVID-19 as factual/false. Tweets scraped using
Twitter API.
</p>
{/* <div class="box-btn">
<span>
<a href="#">Repo Link</a>
</span>
</div> */}
</div>
</div>
</div>
<div className="ms-2 me-2">
<div className="card">
<img
src="img/projects/vet-app.jpg"
className="card-img-top"
></img>
<div className="card-body">
<h5 className="card-title"> Veterinary App</h5>
<p>
Full stack Application developed for the Veterinary School
of Medicine to help manage and care for animals. Multiple
user roles utilizing Restful API This project involved
database design, API creation and authentication.
</p>
<div className="box-btn">
<span>
<a href="">Repo Link</a>
</span>
</div>
</div>
</div>
</div>
<div className="ms-2 me-2">
<div className="card">
<img
src="img/projects/movie-ticket.jpg"
className="card-img-top"
></img>
<div className="card-body">
<h5 className="card-title">
{" "}
Movie-Theatre-Ticket-Reserveration-App
</h5>
<p>
Full stack Java application using utlizing MVC design
pattern that simulates reserving seats and movie tickets at
a theatre. The design of this project focused on JDBC, and
Swing
</p>
<div className="box-btn">
<span>
<a href="">Repo Link</a>
</span>
</div>
</div>
</div>
</div>
<div className="ms-2 me-2">
<div className="card">
<img
src="img/projects/capstone.jpg"
className="card-img-top"
></img>
<div className="card-body">
<h5 className="card-title"> Capstone Project</h5>
<p>
Developed a proof-of-concept machine learning application
used to predict an aircraft engine's ​performance.​
Developed front-end client application to make inferences
through deployed model.
</p>
{/* <div class="box-btn">
<span>
<a href="#">Repo Link</a>
</span>
</div> */}
</div>
</div>
</div>
<div className="ms-2 me-2">
<div className="card">
<img
src="img/projects/pippa.jpg"
className="card-img-top"
></img>
<div className="card-body">
<h5 className="card-title">
{" "}
Hackathon - 2022 (PIPPA)
</h5>
<p>
Application developed for 2022 Hackathon. Developed to
educate and provide insight to common pressure point related
injuries for bed-restricted patients. Functional log-in
feature.
</p>
<div class="box-btn">
<span>
<a href="">Repo Link</a>
</span>
</div>
</div>
</div>
</div>
<div className="ms-2 me-2">
<div className="card">
<img
src="img/projects/portfolio-website.jpg"
className="card-img-top"
></img>
<div className="card-body">
<h5 className="card-title"> Personal Website</h5>
<p>
My personal website designed to showcase my work and
experience. Created utilizing ReactJS, Boostrap, Rxjs, and
NodeJS.
<br></br>
<br></br>
<br></br>
</p>
<div className="box-btn">
<span>
<a href="">Repo Link</a>
</span>
</div>
</div>
</div>
</div>
</OwlCarousel>
</div>
</section>
<div className="footer-image">
<img src={shape} alt="check your internet!" />
</div>
</div>
);
}
css file
.projects-section {
padding: 80px 0 55px;
background-image: url("../../../src/assets/Projects/bg-1.jpg");
background-position: center;
background-attachment: fixed;
position: relative;
z-index: -1;
}
.owl-dots {
text-align: center
}
.
card-img-top{
height: 20vh;
width: 100%;
}
.card-body{
z-index: 500;
height: 250px;
width:100%;
object-fit: cover;
}
.card-title{
font-weight: bold;
}
.box-btn {
z-index: 1000;
display: block;
width: 100%;
height: 100%;
position: relative;
}
.owl-item > div {
pointer-events: auto !important;
}
.footer-image {
width: 100%;
height: 100%;
max-width: 1920px;
overflow: hidden;
display: flex;
justify-content: center;
margin-top: -110px;
z-index:-1;
}
.footer-image img {
max-width: 100%;
height: 130px;
z-index: -1
}