thesd5x
-
Posts
12 -
Joined
-
Last visited
thesd5x's Achievements
Level 2 (2/20)
0
Reputation
-
Yes, I do. The background isn't supposed to look like this. The custom code provided in the first post is what is needing to be applied. There is supposed to be a stagnant moon with animated clouds and stars.
-
Apologies. I've made changes to the website in the last year. The link can be found here. Below, is the code I've been trying to implement — <body> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> </body> body { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100vh; background-color: #000; overflow: hidden; } .glowing { position: relative; min-width: 750px; height: 750px; margin: 150px; transform-origin: right; animation: colorChange 5s linear infinite; } .glowing:nth-child(even) { transform-origin: left; } @keyframes colorChange { 0% { filter: hue-rotate(0deg); transform: rotate(0deg); } 100% { filter: hue-rotate(360deg); transform: rotate(360deg); } } .glowing span { position: absolute; top: calc(80px * var(--i)); left: calc(80px * var(--i)); bottom: calc(80px * var(--i)); right: calc(80px * var(--i)); } .glowing span:before { content: ""; position: absolute; top: 50%; left: -8px; width: 15px; height: 15px; background: #f00; border-radius: 50%; } .glowing span:nth-child(3n + 1):before { background: rgba(134, 255, 0, 1); box-shadow: 0 0 20px rgba(134, 255, 0, 1), 0 0 40px rgba(134, 255, 0, 1), 0 0 60px rgba(134, 255, 0, 1), 0 0 80px rgba(134, 255, 0, 1), 0 0 0 8px rgba(134, 255, 0, 0.1); } .glowing span:nth-child(3n + 2):before { background: rgba(225, 214, 0, 1); box-shadow: 0 0 20px rgba(225, 214, 0, 1), 0 0 40px rgba(225, 214, 0, 1), 0 0 60px rgba(225, 214, 0, 1), 0 0 80px rgba(225, 214, 0, 1), 0 0 0 8px rgba(225, 214, 0, 0.1); } .glowing span:nth-child(3n + 3):before { background: rgba(0, 226, 255, 1); box-shadow: 0 0 20px rgba(0, 226, 255, 1), 0 0 40px rgba(0, 226, 255, 1), 0 0 60px rgba(0, 226, 255, 1), 0 0 80px rgba(0, 226, 255, 1), 0 0 0 8px rgba(0, 226, 255, 0.1); } .glowing span:nth-child(3n + 1) { animation: animate 10s alternate infinite; } .glowing span:nth-child(3n + 2) { animation: animate-reverse 3s alternate infinite; } .glowing span:nth-child(3n + 3) { animation: animate-reverse 8s alternate infinite; } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate-reverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } Thank you in advance!
-
Hi Yes! I still need assistance.
-
Site URL: https://www.thehabituallyelevated.com/creations Hi There! Ideally what I'm trying to do is have the below code applied to the entirety of page as a background. I've attempted the following and ran into these issues — I've added the code to a code block inside of a section that includes text. Doing so, everything disappears. Adding the code block to its own section still makes everything disappear. However, when I move this section to the top of the page, I can see my text in the second section; just not image gallery in the third section. When I the page edit, I'm then able to see the gallery for myself. I've also went to Design → Custom CSS and tried applying my collection ID and nothing has changed. The code — <div class="background"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt=""> <div class="stars"></div> <div class="twinkling"></div> <div class="clouds"></div> <style> @keyframes move-background { from { -webkit-transform: translate3d(0px, 0px, 0px); } to { -webkit-transform: translate3d(1000px, 0px, 0px); } } @-webkit-keyframes move-background { from { -webkit-transform: translate3d(0px, 0px, 0px); } to { -webkit-transform: translate3d(1000px, 0px, 0px); } } @-moz-keyframes move-background { from { -webkit-transform: translate3d(0px, 0px, 0px); } to { -webkit-transform: translate3d(1000px, 0px, 0px); } } @-webkit-keyframes move-background { from { -webkit-transform: translate3d(0px, 0px, 0px); } to { -webkit-transform: translate3d(1000px, 0px, 0px); } } .background { position: fixed; top: 0; left:0; bottom: 0; right: 0; } .stars { background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; z-index: 0; } .twinkling { width: 10000px; height: 100%; background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat; background-size: 1000px 1000px; position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; -moz-animation: move-background 70s linear infinite; -ms-animation: move-background 70s linear infinite; -o-animation: move-background 70s linear infinite; -webkit-animation: move-background 70s linear infinite; animation: move-background 70s linear infinite; } .clouds { width: 10000px; height: 100%; background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat; background-size: 1000px 1000px; position: absolute; right: 0; top: 0; bottom: 0; z-index: 3; -moz-animation: move-background 150s linear infinite; -ms-animation: move-background 150s linear infinite; -o-animation: move-background 150s linear infinite; -webkit-animation: move-background 150s linear infinite; animation: move-background 150s linear infinite; } img { height: 80vh; width: 30vh; position: sticky; z-index: 3; right: 20px; } </style> Please see attached for what the page should ideally look like minus the code. Thank you in advance!
-
thesd5x changed their profile photo -
thesd5x reacted to a post in a topic:
Custom Footer on Single Page
-
-
Site URL: https://www.thehabituallyelevated.com/modeling-portfolio Hi There! I'm needing some assistance with inserting custom css on a singular page on my website. The end result is to change the footer background color to #CC9900 Thank you in advance!
-
No thank you, I figured this out myself. Thanks for reaching out!
-
Site URL: https://www.thehabituallyelevated.com/about-me I'm trying to add a custom text block below the yellow line underneath my image. Everything under the red line, is what I'm trying to include in the mentioned block. I equally do not want this to look wonky on the desktop or mobile view. I'm unsure of how to accomplish this. Please see attached for reference.
-
Site URL: https://www.thehabituallyelevated.com/clipx Hiya! Just as the title states is exactly what I'm looking to do. Currently, I have a video uploaded as a background for one of my text blocks. Looks fine on desktop however it stretches past the container on mobile view. I feel like this extends the realm of HTML & CSS (media query that you would use for images) into JavaScript which I am still trying my hand at. How would I go about resize this? Please see attachment for example. Thank you in advance!
-
Site URL: https://www.thehabituallyelevated.com/clipx This is my second attempt at trying to implementing this piece of code. I'm wanting to apply this to one specific page (link provided). So far, I've ran into one of these two issues: 1) being unable to scroll with the custom code added (assuming that this is due to the viewport) 2) the custom css is limited to one block on a specific page. I have attached the code from my CodePen to this thread as a reference. The concept I'm going for is the old PlayStation 2 startup screen if you're familiar. HTML: — <body> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> </body> CSS — * { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100vh; background-color: #000; overflow: hidden; } .glowing { position: relative; min-width: 750px; height: 750px; margin: 150px; transform-origin: right; animation: colorChange 5s linear infinite; } .glowing:nth-child(even) { transform-origin: left; } @keyframes colorChange { 0% { filter: hue-rotate(0deg); transform: rotate(0deg); } 100% { filter: hue-rotate(360deg); transform: rotate(360deg); } } .glowing span { position: absolute; top: calc(80px * var(--i)); left: calc(80px * var(--i)); bottom: calc(80px * var(--i)); right: calc(80px * var(--i)); } .glowing span:before { content: ""; position: absolute; top: 50%; left: -8px; width: 15px; height: 15px; background: #f00; border-radius: 50%; } .glowing span:nth-child(3n + 1):before { background: rgba(134, 255, 0, 1); box-shadow: 0 0 20px rgba(134, 255, 0, 1), 0 0 40px rgba(134, 255, 0, 1), 0 0 60px rgba(134, 255, 0, 1), 0 0 80px rgba(134, 255, 0, 1), 0 0 0 8px rgba(134, 255, 0, 0.1); } .glowing span:nth-child(3n + 2):before { background: rgba(225, 214, 0, 1); box-shadow: 0 0 20px rgba(225, 214, 0, 1), 0 0 40px rgba(225, 214, 0, 1), 0 0 60px rgba(225, 214, 0, 1), 0 0 80px rgba(225, 214, 0, 1), 0 0 0 8px rgba(225, 214, 0, 0.1); } .glowing span:nth-child(3n + 3):before { background: rgba(0, 226, 255, 1); box-shadow: 0 0 20px rgba(0, 226, 255, 1), 0 0 40px rgba(0, 226, 255, 1), 0 0 60px rgba(0, 226, 255, 1), 0 0 80px rgba(0, 226, 255, 1), 0 0 0 8px rgba(0, 226, 255, 0.1); } .glowing span:nth-child(3n + 1) { animation: animate 10s alternate infinite; } .glowing span:nth-child(3n + 2) { animation: animate-reverse 3s alternate infinite; } .glowing span:nth-child(3n + 3) { animation: animate-reverse 8s alternate infinite; } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate-reverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } Any help would be appreciated! Thanks in advance!
-
thesd5x reacted to a post in a topic:
change the background color of a section 7.1
-
Site URL: https://www.thehabituallyelevated.com/habitually-gaming Below is the custom code I'm trying to list on my website: Glowing Animated Dots I've since made minor tweaks to try and adjust the appearance on the website but nothing as of yet. There is a full screen screenshot of my issue attached for reference. My website is The Habitually Elevated. I've watched several YouTube videos and have read several forums regarding what I thought was going to resolve my issue. Nothing has seemed to work so far... Maybe I'm simply confused or overlooking a small detail? The glowing dots are supposed to float around the page. My issue (as you can see) is how incredibly long the code block is that's on the page. Doesn't matter where on the page or which section the code itself is listed, same affect. Can some please help me to get my desired results? Thanks in advance!
