Help with transferring a codepen to a repl

How can I transfer this codepen to a repl? I have tried to and failed, and the animation simply doesn’t appear.

Repl link:


Wow it lets you embed stuff :0

You don’t seem to have linked your stylesheet in thehead. But also that’s like SCSS our something right? Not generic CSS, because of the nested structure, so you need to configure that correctly too, which I don’t know how to do. Bodily someone else will, or if not I’ll look into it

1 Like

ok thanks! I will try to look into scss

edit: i used the uncompiled css and it still doesn’t work :confused:

You need to link the stylesheet to the HTML page

Wrap the content of index.html in a <body> element, then wrap it in a <html> element.
Add this before the body element:

  <link rel="stylesheet" href="style.css" />

The final page should look something like this:

<!DOCTYPE html>
    <link rel="stylesheet" href="style.css" />
      Existing index.html content goes here

To counteract the browser’s default styles (AFAIK Codepen does this for you automatically) add this to your stylesheet:

body {
  margin: 0;

Oh god I’m stupid why didn’t I do that lmao…

I am embarrassed that I know html/css decently and I didn’t see this :skull:

The text is put properly now but the animation still doesn’t work/isn’t visible @GrimSteel

1 Like

Uh try linking the script file too

EDIT: It’s actually because there’s a duplicated closing curly bracket in the stylesheet on line 10:

body {
  display: grid;
  grid-template-rows: 1fr 10rem auto;
  grid-template-areas: "main" "." "footer";
  overflow-x: hidden;
  background: #3370cc;
  min-height: 100vh;
  font-family: "Open Sans", sans-serif;

oh ok wow i’m so dumb, thanks so much for your help!
I still have an error with the margin being weird, but ill try to fix that by myself xD

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.