How can I correctly implement an Advent Calendar code in CSS?

[Toptoys2uHS]

Hello All,

I would like to implement a different type of Advent Calendar into this website, however after copy and pasting the code, it unfortunately displays the code as text on the webpage, rather than being implemented as an asset.

The line of code is quite long so I will be sharing the links to the code rather than pasting the CSS and HTML itself.

I have added this line of code into custom-html.liquid underneath here:

<div class="html rte">
{{ section.settings.html }}
</div>
</div>
</section>

https://github.com/johnnyfekete/CSSChristmasCalendar/blob/main/index.html

I have also added this line of code into theme.liquid underneath the </head> tag

https://github.com/johnnyfekete/CSSChristmasCalendar/blob/main/styles.css 

I am not sure if any other code needs to be implemented anywhere else, but I tried a different Advent Calendar and it worked just with these two files so I am unsure why this one is not displaying correctly.

Please see the screenshots attached for reference on what is showing now.

Furthermore, despite adding a line of code to specify which page of the site this code should be implemented on, it still seems to make its way into the home page at the bottom, and causes issues with other sections.

  {% if page.handle == "advent-calendar" %}
{% endif %}

Does anyone know how to implement this code correctly and how any code from CodePen/Github can be added into Shopify without issues?

Please see the website here:

https://toptoys2u.co.uk/pages/advent-calendar

Preview the code implemented in here : 

https://7037dsna0uis1i9w-17792423.shopifypreview.com

I appreciate any help.