How to add Codepen background custom css to Squarespace home page?

Site URL: https://codepen.io/saransh/pen/BKJun

Hello, I want to add this background to the first section of any page: https://codepen.io/saransh/pen/BKJun 

I also would like to reverse the particle direction to go down instead of up. Is there a way to do this?

I've tried to create a code block on the home page with the HTML code and then in the Custom CSS part, I would wrap the CSS code in <style> </style> but I get nothing. 

I'm very new to web development. I thought I could just build a custom website with a few point and clicks 😔

Any help is much appreciated.

Thanks!

Hello,

This pen uses two different "preprocessors" that probably prevent you from getting a working version of it on your website. The two being used here are Haml and CSS Sass. Codepen is great for building pens that work within the online environment but requires a high learning curve for transitioning them to other websites, especially to Squarespace. You can try converting these two formats to standard HTML and CSS using online tools but you may find that the animations no longer work.  Also, embedded within this Pen is a plugin script called "modernizr", be sure to include plugin that after you've converted the pen.

In the Custom CSS menu for Squarespace, you cannot use "<style>" tags in the manner that you mentioned. You don't need style tags when writing CSS in the Custom CSS tab. Instead, use the Block Identifier extension for Mozilla or Chrome to target the elements you want to apply custom CSS to.

20 hours ago, Wolfsilon said:

Hello,

This pen uses two different "preprocessors" that probably prevent you from getting a working version of it on your website. The two being used here are Haml and CSS Sass. Codepen is great for building pens that work within the online environment but requires a high learning curve for transitioning them to other websites, especially to Squarespace. You can try converting these two formats to standard HTML and CSS using online tools but you may find that the animations no longer work.  Also, embedded within this Pen is a plugin script called "modernizr", be sure to include plugin that after you've converted the pen.

In the Custom CSS menu for Squarespace, you cannot use "<style>" tags in the manner that you mentioned. You don't need style tags when writing CSS in the Custom CSS tab. Instead, use the Block Identifier extension for Mozilla or Chrome to target the elements you want to apply custom CSS to.

So is it possible? How would I get started? Sorry, just not sure what to do here.