naming a specific css ID for a theme with a js function

[didou038]

Hi all !

I'm trying to code a theme using a js function that animates the title of a page. until then, no worries. as I want this animation works only on the index page, I created a specific ID in my css called index-header.
My js function does make the animation as the div id = index-header.

here is my code in the theme:

Code:

<?php
    $slugindex = get_page_slug();
    if ($slugindex == 'index'){
        echo '<div id="index-header">';
        }else{
        echo '<div id="header">';
        }
    }    
?>
    <h1><?php get_site_name(); ?></h1>
</div>

so i create my ID in my css like this (not all just an example):

Code:

#header, #index-header{
    position:relative;
    width: 350px;
    top:0px;
    color: #fff;
    font-family: 'Josefin Slab', Arial, sans-serif;
    font-size: 20px;
    margin:0px;
    padding:20px;
    font-size:42px;
    color:#fff;
    text-align:left;
    font-weight:400;
    text-align:left;
}

but nothing appears on my page.

I can not find my error (I'm blind?)
I need your help,

thank you