Ive been trying to figure out how to replace the blue background on my front page the with this css code https://codepen.io/P1N2O/pen/pyBNzX but I cant figure it out!
First of all let me thank you for helping me out bud.
I cloned it and it created a new project. I tried to compy the body but it didnt let me so i just copied the Hero Section element to my own project. Where do I put it?
Also I want to add more colors to it, how can I do that?
Hey, @Shine-On - happy to help! You can see @aaronocampo has you covered with a purely Webflow based option.
But if you want to use the codepen version, I simplified it to make it easier. Just copy this code and paste it into the custom code header of the home page where you want the effect:
Hey, Ben! This is Mike Albright from Down In Front; I’ve tried to contact you about my website that you host several times in the past week alone by email, your website, Twitter, Facebook, and a mutual friend and you haven’t responded, and I’ve tried repeatedly to get in touch with you with nothing from you since December of 2016. Please respond to any of the messages I’ve sent you.
Hi, @Shine-On! This is how I accomplished it. It would be better if there was one class that used this code so you didn’t have to repeat it. But, this will do it and will allow you to customize gradient colors across the different instances.
Ok, so the easiest way to approach this for me was just to build it and make it cloneable. Then you can copy and paste and use it, but also, you can inspect everything and see how it was setup. Go grab it here:
@Shine-On - so glad you feel that way. This forum is filled with awesome and helpful people! So to answer your questions: Yes, there is. And it looks like you have it set up to do so. Infinitely loop, that is. If you want a constant horizontal scroll, that’s a doozy of an animation to set up and loop! I read a great discussion on this topic not too long ago. Granted this wasn’t horizontal scrolling, but the same concepts would apply:
To get rid of the navigation dots at the bottom, follow along with this video: