Bought code for pricing boxes, not sure how to enter it

Site URL: https://www.aboydandhisblog.com

I'm in the process of setting up a hybrid personal site/blog that largely exists to promote my services as a freelance writer/editor/tutor/consultant, and a few days ago I purchased this code from CodeCanyon: (https://codecanyon.net/item/web-elements-services-snippets/19227593). However, getting it to work has proven more complicated than expected.

I'm a novice to coding and web design, but I've done a lot of reading and am not totally ignorant. I understand the basic concepts of CSS, Javascript, HTML, code injections at various levels, etc. I know that Code Blocks are weird in that they're HTML-only and you have to wrap JS and CSS in <script> and <style> tags, respectively.

1) What confuses me, as a beginner, is knowing which level to inject which elements.  For example, does the CSS that creates the boxes themselves go in a Code Block in the site itself, or do I put it in the site-wide "Designs-->Custom CSS"? Same with the JS: Do I put it in a Code Block, or "Setting--> Advanced-->Code Injection" and put it in the HTML?

There's just so many different files spread across so many different locations. Some require me to copy and paste the whole code; others ask me to only pull out a snippet. It's not always clear which is which.

Describing this problem is a little awkward because I'm not sure if I'm legally allowed to show the code itself, but I think it's okay to show the basic file structures themselves to give you an idea of how this is structured:

2) Another thing I find confusing is what I'm supposed to do with the HTML file. Its contents are identical to what you can find on its Preview Page here: (http://preview.codecanyon.net/item/web-elements-services-snippets/full_screen_preview/19227593?_ga=2.13092223.998479729.1644952873-112767015.1644952873) 

Am I supposed to Inspect its source code, pull out what's relevant, and paste it somewhere? If so, where? (i.e. at the Site Level or the Block Level?) 

Or am I supposed to basically use the index.html file as my framework, put all the relevant CSS and JS inside it, and then just delete everything I don't want? 

3) Then there's the fonts. I honestly have no idea where they go, or if I need all of them or only some.

The ReadMe is in mostly broken English, but he provided a block of legible HTML that he said was important (which I won't share because it's probably proprietary) and three links he said I needed to paste:



4) Again, what's "the HTML page"? Isn't every page HTML? Does he mean the index.html page?

Anyway, thanks in advance to anyone who takes the time to read and respond to this. I'm doing my best to educate myself and avoid annoying more experienced people with dumb questions, but sometimes you just need a straight answer, you know?

 

I think the fundamental issue here is that this package was not designed from the ground up to be compatible with Squarespace.

This package appears to be for someone who is designing a website from the ground up. Where you are providing your own server and have a way to get all the required elements installed on the server. SS is not that kind of service.

One big red flag was they mentioned Bootstrap Responsive Design. Bootstrap is a fundamental layout system that will conflict with SS's layout system.

I would suggest seeing if you can find a design element that SS supports that looks similar to what you like about the design of the package and try to modify the SS element to be closer to what you want. Image blocks with buttons or perhaps one of the auto layout designs could be used as a basis for your effect.