javascripthtmlcss

CSS not working properly. Blank text and no appearance. Tried clearing cache, didn't work. Might have to do with repository

I recently made a website for a project in a club at my school, it was for marketing a movie. But the problem is, it's not loading properly. It works and looks as its supposed to on my VSCODE live server, but in the web server domain, it's appearing weirdly. I attached two images, one shows how its supposed to look, the other shows what it actually looks like.

Supposed to look like: (https://i.sstatic.net/3r8f1.png). How it looks (with live server): (https://i.sstatic.net/T8k9A.png).

I'm also linking my repository (with domain): https://github.com/olivecatoil/bpa-moviewebsite. And if the code needs to be seen, please let me know how I could share it efficiently.

I tried clearing cache and I expected it to load properly but it didn't change anything. I may have uploaded to the repository the wrong way, and if so, could somebody tell me how to do it?

The errors in my VS didn't seem to affect the live server, but it might've done something. It had to with the button styling: overflow, cursor, transition properties and webkit mask were having an error over their colons and the closing bracket for the button said "at-rule or selector expected":

<style>
.button {
  position: relative;
  padding: 24px 64px;
  margin-bottom: 20px;
  border-radius: 100vw;
  background-color: transparent;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  color: #fafafa;
  border: solid 1px rgba($color: #fafafa, $alpha: 0.3);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-mask-image: -webkit-radial-gradient(white, black);

a:link {
  color: white;
}

a:link, a:visited {
  color: white;
}

  .button-text{
    position: relative;
    z-index: 2;
  }

  .fill-container{
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    padding-bottom: 100%;
    transform: translateY(-50%) rotate(180deg);

    &::after{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: blue;
      border-radius: 50%;
      transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
      transform: translateY(-100%);
    }
  }

  &:hover{
    border-color: blue;
    transform: translateY(-4px);

    .fill-container{
      transform: translateY(-50%) rotate(0);

      &::after{
        transform: translateY(0);
      }
    }
  }
}
</style>
<button class="button">
  <span class="button-text">
    <a href="https://forms.gle/GwLqYaqXitFbYD9cA" target="_blank" style="text-decoration: none;">
  Support
    </a>
  </span>
  <div class="fill-container"></div>
</button>

<button class="button">
  <span class="button-text">
    <a href="tu.html" target="_blank" style="text-decoration: none;">
      Terms of Use
    </a>
  </span>
  <div class="fill-container"></div>
</button>

<button class="button">
  <span class="button-text">
    <a href="pu.html" target="_blank" style="text-decoration: none;">
      Privacy Policy
    </a>
  </span>
  <div class="fill-container"></div>
</button>

<button class="button">
  <span class="button-text">
    <a href="cn.html" target="_blank" style="text-decoration: none;">
      Contact Organization
    </a>
  </span>
  <div class="fill-container"></div>
</button>

In my site dev tools, it said that my css linking was somehow an issue: (https://i.sstatic.net/YyjOK.png). In the console, it said all of this: (https://i.sstatic.net/u4Yz0.png).

Where I import assets and stylesheets: (https://i.sstatic.net/Flvbw.png)

Solution

  • Your main issue appears to be the file structure: enter image description here

    You are linking your resources in assets/img/... or assets/js/...

    But according to your repo all files are flat & not nested in directories, either create the directories or change the location. You should start the link with a forward slash imho, <img src="/bpa-logo-removebg-preview (1).png" alt="Global" width="50px" height="50px"> or <img src="/assets/img/bpa-logo-removebg-preview (1).png" alt="Global" width="50px" height="50px"> if you nest your resources.