Why is my internal CSS not loading after site deployment?
Question
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 class="winter-is-coming"> <div class="snow snow--near"></div> <div class="snow snow--near snow--alt"></div> <div class="snow snow--mid"></div> <div class="snow snow--mid snow--alt"></div> <div class="snow snow--far"></div> <div class="snow snow--far snow--alt"></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>
1 answers
solution1
1 2021-12-28 15:30:51
You have a class .winter-is-coming with CSS z-index:100; . Change it to z-index:1; then everthing should be fine now.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
After css and js minified why my wordpress site is slow?
CSS and JS not loading after transferring site
Materialize css loading after my styles
Why is my page loading without any css?
Why are my CSS background images not loading in electron?
why my page is not loading after calling redirect?
Why I can not load CSS into my Github hosted site?
Simple CSS or JavaScript loading screen for Avada wordpress site while loading a large video file that goes away after the page is finished loading
Why isn't CSS loading consistently in my printing iframe?
Why isn't my page loading when I use css?
Related Tags