Where to Put HTML and CSS from Codepen

Design help Custom code
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.

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…

1 Like
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:

29 PM
29 PM1439×742 2.19 MB

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.

6 Likes
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:

6

I cant do that.
This is Codepen i want to add to my site. (only the left one)

How can i do that?

7

You could use a formatter, in example:
https://jsonformatter.org/scss-to-css (Paste here your SCCS code)
https://pughtml.com/ (Paste here you HTML Pug code)

I would use a Section, and inside a HTML Embed element

Let´s see an example!
This is my Codepen:

And this is my Webflow published site:
https://fernandocomet-portfolio.webflow.io/hipnotic

It is just a section, an inside it a HTML Embed, Code:

<div class="hipnotic"></div>
<div class="hipnotic"></div>
<div class="hipnotic"></div>
<div class="hipnotic"></div>
<div class="hipnotic"></div>
<div class="hipnotic"></div>
<div class="hipnotic"></div>
<div class="hipnotic"></div>

<style>
.section-hipnotic {
	 position: relative;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 width: 100%;
	 height: 100vh;
	 background-color: #161616;
	 overflow: hidden;
	 transform: translate(0, 0);
}
 .hipnotic {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
}
 .hipnotic:nth-child(1):before {
	 content: "";
	 position: absolute;
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 margin: auto;
	 width: 4.1vw;
	 height: 4vw;
	 border-radius: 49%;
	 background-color: white;
}
 .hipnotic:nth-child(1) {
	 width: 8.1vw;
	 height: 8vw;
	 border-radius: 49%;
	 animation: spin 1.2s -0.04s linear infinite;
	 border: 2vw solid #ff4967;
}
 .hipnotic:nth-child(2) {
	 width: 16.2vw;
	 height: 16vw;
	 border-radius: 49%;
	 animation: spin 2.4s -0.08s linear infinite;
	 border: 2vw solid #5562b5;
}
 .hipnotic:nth-child(3) {
	 width: 24.3vw;
	 height: 24vw;
	 border-radius: 49%;
	 animation: spin 3.6s -0.12s linear infinite;
	 border: 2vw solid #4589ff;
}
 .hipnotic:nth-child(4) {
	 width: 32.4vw;
	 height: 32vw;
	 border-radius: 49%;
	 animation: spin 4.8s -0.16s linear infinite;
	 border: 2vw solid #673ab7;
}
 .hipnotic:nth-child(5) {
	 width: 40.5vw;
	 height: 40vw;
	 border-radius: 49%;
	 animation: spin 6s -0.2s linear infinite;
	 border: 2vw solid #b9c3ff;
}
 @keyframes spin {
	 0% {
		 transform: translate(-50%, -50%) scale(1) rotate(0);
	}
	 50% {
		 transform: translate(-50%, -50%) scale(0.96) rotate(180deg);
		 opacity: 0.7;
	}
	 100% {
		 transform: translate(-50%, -50%) scale(1) rotate(360deg);
	}
}
 
</style>```

Hope it helps you