• GoDaddy Community
  • Websites + Marketing | Website Builders
  • Websites + Marketing | Website Builders

    cancel
    Showing results for 
    Show  only  | Search instead for 
    Did you mean: 
    Go to solution
    Highlighted

    custom code in free builder

    hi im adding custom code in the free site builder HTML and CSS the html works fine but the CSS is show as plan text or raw code and showing the intended result ive run the code through a few different checkers and it comes back with no errors and it works fine on code pen which is where i wrote it heres the code its self please let me know if anyone has any ideas of what im doing wrong

     

     

     

    <!DOCTYPE html>
    <html lang="en" >
    <head>
    <meta charset="UTF-8">
    <title>Sliding Logo</title>
    <link rel="stylesheet" href="./style.css">
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <span class="logo firstName">Run🐾</span>
    <span class="logo lastName">Fetch🐾</span>
    <span class="logo firstName">Play☀️</span>
    <span class="logo lastName">🐕</span>
    <!-- partial -->

    font-family: Jazz LET, fantasy;
    color: #83caff;
    background-color:#white;
    }

    .logo {
    font-size: 6em;
    padding: 0 0.3em;
    display: block;
    float: left;
    }

    .firstName {
    background-color: #83caff;
    color: #000;
    }

    .lastName {
    background-color: transparent;
    color: #83caff;
    }

    /* Set vendor-specific animation name and duration on .logo class */

    .logo {
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 4s;
    -moz-animation-name: fadein;
    -moz-animation-duration: 4s;
    -ms-animation-name: fadein;
    -ms-animation-duration: 4s;
    -o-animation-name: fadein;
    -o-animation-duration: 4s;
    animation-name: fadein;
    animation-duration: 4s;
    }

    /* Set vendor-specific keyframes for animation on load
    Position and opacity are animated */

    @-webkit-keyframes fadein {
    0% { opacity: 0; margin-left: -250px; }
    100% { opacity: 1; margin-left: 0; }
    }

    @-moz-keyframes fadein {
    0% { opacity: 0; margin-left: -250px; }
    100% { opacity: 1; margin-left: 0; }
    }

    @-ms-keyframes fadein {
    0% { opacity: 0; margin-left: -250px; }
    100% { opacity: 1; margin-left: 0; }
    }

    @-o-keyframes fadein {
    0% { opacity: 0; margin-left: -250px; }
    100% { opacity: 1; margin-left: 0; }
    }

    @keyframes fadein {
    0% { opacity: 0; margin-left: -250px; }
    100% { opacity: 1; margin-left: 0; }
    }

    </body>
    </html>

    2 REPLIES 2
    Super User III Super User III
    Super User III
    Solution

    Re: custom code in free builder

    That is valid as plain text, but it needs to be wrapped in <style> </style> tags to work as CSS.

    Re: custom code in free builder

    Omg Smiley Frustrated thank you...