When i try access the links in the navbar, it gives error despite those links showing up when using a command in console to find other pages. when i click on the other pages through console, it still gives error
in addition to the above, remember to always do this:
Clear the browser cache by pressing a few times Ctrl + F5 while viewing your website.
If that doesn’t help (because some browsers are stubborn) then follow these instructions
It’s quite simple: the URLs on your web page reference files that don’t exist. The “RSS Feed” link refers to a file rss.html, but there is no file rss.html on your website. Same with the script.js file being used.
If the website works on your own computer, please make sure those files are uploaded too.
here is the code for the entire index.html
and you add CSS and JS code also in pro.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soapy's Cave</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin=" anonymous">
<link rel="stylesheet" href="style.css">
<style>
/* Common styling for all corner divs */
.corner-div {
position: fixed; /* Fixed position for each div */
left: 0; /* Align to the left */
bottom: 0; /* Align to the bottom */
transform-origin: bottom left; /* Scale from the bottom left */
border-radius: 10px; /* Rounded corners */
opacity: 0.8; /* Optional: for layering transparency */
}
/* Different sizes for each div */
.scale-1 {
width: 200px;
height: 200px;
background-color: #62ff00; /* Color for scale 2 */
margin-bottom: 10px; /* Space between divs */
margin-left: 10px; /* Space to the left */
}
.scale-2 {
width: 300px;
height: 300px;
background-color: #41f755 ; /* Color for scale 2 */
margin-bottom: 10px; /* Space between divs */
margin-left: 10px; /* Space to the left */
}
.scale-3 {
width: 400px;
height: 400px;
background-color: #20efaa; /* Color for scale 3 */
margin-bottom: 10px; /* Space between divs */
margin-left: 10px; /* Space to the left */
}
.scale-4 {
width: 500px;
height: 500px;
background-color: #00e7ff ; /* Color for scale 4 */
margin-bottom: 10px; /* Space between divs */
margin-left: 10px; /* Space to the left */
}
</style>
</head>
<body style="background-color: #7DE2D1;">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="/index.html">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="pro.html">Project Gallery</a>
</li>
</ul>
<span class="nav-item">
<a class="nav-link" href="rss.xml">RSS Feed</a>
</span>
</div>
</div>
</nav>
<!-- Main Content -->
<div style="margin-top: 50px; background-color: #CEF9F2; padding: 20px; border-radius: 15px; width: 80%; max-width: 600px; margin: auto; z-index: 5;">
<h1>Hi, I'm Soapy</h1>
<h2>Passionate About Electronics & Programming (:</h2>
</div>
<!-- Corner Divs -->
<div class="corner-div scale-1" style="z-index: 4;"></div>
<div class="corner-div scale-2" style="z-index: 3;"></div>
<div class="corner-div scale-3" style="z-index: 2;"></div>
<div class="corner-div scale-4" style="z-index: 1;"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
to repeat
wherever you have a call for the bootstrap 5.3.2 .js version, delete it and put the code I gave you for the 5.3.3 js version
(put it at the bottom before you have a closed </body>)
and put the bootstap.5.3.3.blahblah…min.css calls above in <head>
Sorry, Im still quite new to this. So i’ve replaced all the boostrap links with 5.3.3, and in each file there is the css in head and js in body. I’m getting no more errors in console.