Unable to access subdomains

Website URL

codingsoapy.42web.io

Error Message

404

Other Information

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

404 for http://codingsoapy.42web.io/script.js

404 for menu RSS http://codingsoapy.42web.io/rss.html

hash

img image

src
image



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

6 Likes

I think i fixed the space issue, but im still dont understand why the other pages dont work,

Thanks for your help

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.

4 Likes


I see where i went wrong with rss.html which is meant to be .xml, but why pro.html?

3 Likes

Just checked on another browser, looks like its the cache problem, thanks again for your help!

2 Likes

What worries me is that the hash doesn’t pass (pro.html → bs…JS)

It may mean that someone hacked cdn.jsdelivr.net and modified it
or someone messed up the integrity=sha384 values ​​somewhere

@SashaG use this code instead of the existing one as soon as possible

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

4 Likes

done thanks

1 Like

you deleted css and put JS instead :upside_down_face:

You should have left the JS at the bottom, just change the code

and put this css up in the head

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin=" anonymous">




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>

5 Likes

I’ll repeat it to you one more time
you still haven’t done the necessary thing

if something is not clear to you, ask questions here.
In short:

  • you must have bootstrap CSS in the <head> section

  • and down in the <body> section have bootstrap JS


And wherever you have that menu (in whatever html file) for example like
pro.html

you have to call that CSS and JS external files

and using the code I gave you so that SHA hash be valid

3 Likes

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.

1 Like

Everything related to Bootstrap looks good except that there must be no spaces here

in index.html (BT CSS)

Screenshot 2024-11-10 120435


in pro.html you are still calling the file http://codingsoapy.42web.io/script.js
which does not exist

4 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.