Code-Pen Help, urgent

I am currently in the process of submitting my first set of projects, and due to small text window on code-pen online editor, I decided to use Atom editor offline to create my projects. I have a style.css file as well as an index,html file on my atom, along with bootstrap cdn linked within the html file.

When I copy the contents of both the files to the respective sections at code-pen, the webpage does not load up the way it is supposed to. As I refresh, it shows everything ( all styling, background image, colors, etc properly for a second and suddenly changes such that most of the styling is missing.

:frowning:

I tried creating a new pen but same result. Can someone help me out? Am I missing something?

Thank you in advance.

EDIT: Code-Pen Link – https://codepen.io/cryptographicfool/pen/rEOmwL
(Just a heads up that there is an autoplay soundcloud embed on the page, so you might want to lower your volume/mute.)

Thanks for the reply, here is the link https://codepen.io/cryptographicfool/pen/rEOmwL
(Just a heads up that there is an autoplay soundcloud embed on the page, so you might want to lower your volume/mute.)

I have updated the same in OP as well

Here is a full page grab of how it appears on localhost.

It looks like some of the css styling and bootstrap is not loading on code-pen. :frowning: I even tried adding bootstrap style links and jQuery, Popper.js, BootstrapJS scripts via the pen settings but it made no difference.

I removed the bootstrap link you had in the HTML section and just added:

https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

via the CSS module settings.

Not really sure if the cdn you were using does allow links from Codepen or if Codepen is blocking the cdn.

1 Like

Yay! Removing the link from HTML file made it work. :slight_smile:
Thanks a lot for your help.
Cheers!