Streaming live at 10am (PST)

Where to Put HTML and CSS from Codepen


#1

Folks, what should i exactly do to put this script on a page? https://codepen.io/fionnachan/pen/EvaqOB
I’m a bit confused where to put the HTML and CSS in webflow custom code settings.


Integrate code from codepen
#2

That’s a bit delicate because the HTML isn’t standard. It’s written with a preprocessor (pug).

Usually, to reproduce a HTML+CSS pen, you reproduce the HTML structure in the designer (divs and classes), reproduce as much as you can of CSS in the designer too, and add what you can reproduce as custom CSS code.

But here, there’s a bit of magic on the HTML side. It generates quite a lenghty code if you inspect the source of the frame of the codepen result. I don’t even know if it’s feasible, or advisable, to try and reproduce this in webflow…


#3

Great question @lestergonzales :smiley: and excellent points @vincent

There’s a neat CodePen feature where you can change the language settings to see compiled HTML/CSS:

HTML typically goes directly on the canvas which you would place within a code embed element, and the CSS would go in the before closing </head> area between a opening <style> and closing </style> (here is a tutorial on adding custom code in the head/body area of your Webflow site or page).

Please note that this custom code will only render on the published page and not within the Designer.


#4

WOW! Today I learn a cool thing… couldn’t really believe it wasn’t existing.

And here they are, the gazillion divs :smiley:


#5

Ok that would do the trick thanks Waldo, hope our developer will forgive me with these divs and classes :sweat_smile: