Previously, everything on my website was functioning correctly. However, upon launching it now, I noticed that the carousel, buttons, and other elements are broken. It seems like there might be an issue with the Bootstrap CDN as the buttons and sliders are visible but not working as expected.
Looking at my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Faculty of Economics, Psychology, Management</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-dark">
<div class="container text-center mt-5">
<h1>Faculty of Economics, Psychology, Management!!!</h1>
<h2>History</h2>
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slide1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/slide2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/slide3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="row mt-5">
<div class="col-md-4">
<a href="economic.html" class="btn btn-outline-warning btn-lg w-100">
<div class="card">
<img src="images/economic.jpg" class="card-img-top" alt="Economic Faculty">
<div class="card-body">
<h5 class="card-title">Economic Faculty</h5>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="international.html" class="btn btn-outline-warning btn-lg w-100">
<div class="card">
<img src="images/international.jpg" class="card-img-top" alt="International Business Faculty">
<div class="card-body">
<h5 class="card-title">International Business Faculty</h5>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="psychology.html" class="btn btn-outline-warning btn-lg w-100">
<div class="card">
<img src="images/psychology.jpg" class="card-img-top" alt="Psychology Faculty">
<div class="card-body">
<h5 class="card-title">Psychology Faculty</h5>
</div>
</div>
</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
Inspecting my styles.css:
/* styles.css */
body {
background-color: #738394;
font-family: 'Roboto', sans-serif;
}
h1 {
color: #F8F8FF;
font-family: 'Montserrat', sans-serif;
}
.carousel-item img {
height: 400px;
object-fit: cover;
}
.card {
cursor: pointer;
transition: transform 0.3s;
}
.card:hover {
transform: scale(1.05);
}
.btn {
background-color: #FF4500;
border-color: #FF4500;
color: #FFFFFF;
}
.btn:hover {
background-color: #DC370B;
border-color: #DC370B;
color: #FFFFFF;
}
.card-body {
background-color: #FFFFFF;
}
.container.text-center {
background-color: #808080;
padding: 30px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
}
Current status of the website: https://i.sstatic.net/pBDPH4Bf.png
Previous state of the website: https://i.sstatic.net/51RFvp3H.png
Update: Buttons are also malfunctioning https://i.sstatic.net/v8V482Vo.png
Checking browser console (opera, F12 - Network): https://i.sstatic.net/26xETkfM.png