Why is my internal CSS not loading after site deployment?-CodePudding

So I made this site using css, javascript and html. On my local system, the internal css that i've added to my html file loads perfectly. But when i deploy it online (I use netlify) that internal css seems not loaded and I cant see any content.

I even tried to remove that internal css and make another file and link to my html document, still no signs of work. It is now too brainstorming to me, as i am not able to find any solutions.

I am sharing the links of the file if anyone of you would like to help me, please?

gsap.to('#moon',{
    scrollTrigger:{
      scrub: 1
    },
    scale: 1.5,
  })
  gsap.to('#bg',{
    scrollTrigger:{
      scrub: 1
    },
    scale: 1.2,
  })
  gsap.to('#santa',{
    scrollTrigger:{
      scrub: 1
    },
    scale: 1.5,
    y: -500,
    x: 2400
  })
  gsap.to('#tree',{
    scrollTrigger:{
      scrub: 1
    },
    x: -250
  })
  gsap.to('#cloud1',{
    scrollTrigger:{
      scrub: 1
    },
    x: -150
  })
  gsap.to('#cloud2',{
    scrollTrigger:{
      scrub: 1
    },
    x: 200
  })
  gsap.to('#text1',{
    scrollTrigger:{
      scrub: 1
    },
    y: -950
  })
  gsap.to('#text2',{
    scrollTrigger:{
      scrub: 1
    },
    y: -950 
  })

@import url('https://fonts.googleapis.com/css2?family=Frijole&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Balsamiq Sans&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Frijole';
  font-weight: 200;
}

body{
  /* background: rgb(97, 0, 0); */
  height: 200vh;
}

section{
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

section::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 10, 68);
  mix-blend-mode: screen;
}

section img#bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

section img#moon{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section img#cloud1{
  position: absolute;
  top: 100px;
  left: 50px;
  max-width: 600px;
  z-index: 2;
}

section img#cloud2{
  position: absolute;
  top: 200px;
  right: 50px;
  max-width: 600px;
  z-index: 2;
}

section img#santa{
  position: absolute;
  bottom: 50px;
  left: -600px;
  z-index: 1;
  max-width: 600px;
  transform: scale(0.5);
}

section #tree{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 266px;
  background: url(../images/tree.png);
  background-position-y: 266px;
  z-index: 10;
}

section #text1{
  position: absolute;
  bottom: -500;
  left: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 12px #000;
  font-size: 5.5em;
  z-index: 9;
}

section #text2{
  position: absolute;
  bottom: -600;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: 'Balsamiq Sans', sans-serif;
  transition: .093s;
  color: #fff;
  text-shadow: 2px 2px 12px #000;
  font-size: 2em;
  z-index: 9;
}

<html>
  <head>
    <title>Merry Christmas</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Balsamiq Sans' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/css?family=Frijole' rel='stylesheet'>
    <link rel="icon" href="images/favicon.png" type="image/png" size="32x32">
    <link rel="stylesheet" type="text/css" href="css/snow.css">
    <style>
        .snow, .winter-is-coming {
          z-index: 100;
          pointer-events: none;
            }
        .winter-is-coming {
          overflow: hidden;
          position: absolute;
          top: 0;
          height: 100%;
          width: 100%;
          max-width: 100%;
          background: url(../images/bg.jpg);
        }   
        .snow {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          animation: falling linear infinite both;
          transform: translate3D(0, -100%, 0);
        }
        .snow--near {
          animation-duration: 10s;
          background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");
          background-size: contain;
        }
        .snow--near   .snow--alt {
          animation-delay: 5s;
        }
        .snow--mid {
          animation-duration: 20s;
          background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png");
          background-size: contain;
        }
        .snow--mid   .snow--alt {
          animation-delay: 10s;
        }
        .snow--far {
          animation-duration: 30s;
          background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png");
          background-size: contain;
        }
        .snow--far   .snow--alt {
          animation-delay: 15s;
        }
        @keyframes falling {
          0% {
            transform: translate3D(-7.5%, -100%, 0);
          }
          100% {
            transform: translate3D(7.5%, 100%, 0);
          }
        }
    </style>
  </head>
  <body>
    <section>
      <div >
  
        <div ></div>
        <div ></div>
        
        <div ></div>
        <div ></div>
        
        <div ></div>
        <div ></div>
      </div>


      <img src="images/bg.jpg" id="bg">
      <img src="images/moon.png" id="moon">
      <img src="images/cloud1.png" id="cloud1">
      <img src="images/cloud2.png" id="cloud2">
      <img src="images/santa.png" id="santa">

      <div id="tree"></div>

      <h2 id="text1">Merry Christmas!</h2><br>
      <h4 id="text2">And a very happy new year from us! Enjoy Holidays!!</h4>
      
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
    <script src="scripts/script.js"></script>
  </body>
</html>

CodePudding user response：

You have a class .winter-is-coming with CSS z-index:100;. Change it to z-index:1; then everthing should be fine now.