Utilisateur:Capucine

De Pratiques en milieux numériques
Aller à : navigation, rechercher

L'invasion des scrolls

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <title>scrollstylethiebaut</title>
        <link rel="stylesheet" href="scrollstylethiebaut.css">
    </head>
    

<body>
    <div id="bloc1">
        <div id="bloc2">
            <div id="bloc3">
                <div id="bloc4">
                    <div id="bloc5">
                        <div id="bloc6">
                            <div id="bloc7">
                                <div id="bloc8">
                                    <div id="bloc9">
                                        <div id="bloc10">
                                            <div id="bloc11">
                                                <div id="bloc12">
                                                    <div id="bloc13">
                                                        <div id="bloc14">
                                                            <div id="bloc15">
                                                                <div id="bloc16">
                                                                    <div id="bloc17">
                                                                        <div id="bloc18">
                                                                            <div id="bloc19">
                                                                                <div id="bloc20">
                                                                                    <div id="bloc21">
                                                                                        <div id="bloc22">
                                                                                            <div id="bloc23">
                                                                                                <div id="bloc24">
                                                                                             
                                                        

                                                                                                </div>
                                                        

                                                                                            </div>
                                                        

                                                                                        </div>

                                                                                    </div>

                                                                                </div>

                                                                            </div>

                                                                        </div>

                                                                    </div>

                                                                </div>

                                                            </div>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</body>

</html>
html, body{
    width:100%;
    height:100%;
    margin:0; 
    
 }
 div{
     padding-top:1700px;
 }

#bloc1 {
    overflow: auto;
    width:100% ;
    height: 100%;
    background-color: black;
 }
#bloc2 {
    overflow: auto;
    width:110%;
    height:100%;
    background-color: darkred;
}
#bloc3 {
    overflow: auto;
    width:100%;
    height:110%;
    background-color: crimson;
}
#bloc4 {
    overflow: auto;
    width:110%;
    height:100%;
    background-color: coral;
}
#bloc5 {
    overflow: auto;
    width:100%;
    height:110%;
    background-color: yellow;
}
#bloc6 {
    overflow: auto;
    width:110%;
    height:100%;
    background-color: yellowgreen;
}
#bloc7 {
    overflow: auto;
    width:100%;
    height:110%;
    background-color: green;
}
#bloc8 {
    overflow: auto;
    width:110%;
    height:100%;

}
#bloc9 {
    overflow: auto;
    width:100%;
    height:110%;
    background-color: darkolivegreen;
}
#bloc10 {
    overflow: auto;
    width:110%;
    height:100%;
    background-color: darkgreen;
}
#bloc11 {
    overflow: auto;
    width:100%;
    height:110%;
    background-color:blue;
}
#bloc12 {
    overflow: auto;
    width:110%;
    height:100%;
    background-color: darkblue;
}
#bloc13 {
    overflow: auto;
    width:100%;
    height:110%;
    background-color: darkslateblue;
}
#bloc14 {
    overflow: auto;
    width:110%;
    height:100%;
    background-color: rgb(45, 6, 82);
}
#bloc15 {
    overflow: auto;
    width:100%;
    height:110%;
    background-color: rgb(128, 53, 199);
}
#bloc16 {
    overflow: auto;
    width:110%;
    height:100%;
    background-color: rgb(187, 134, 248);
}
#bloc17 {
    overflow: auto;
    width:100%;
    height:110%;
    background-color: rgb(118, 26, 141);
}
#bloc18 {
    overflow: auto;
    width:110%;
    height:100%;
    background-color: rgb(213, 91, 250);
}
#bloc19 {
    overflow: auto;
    width:100%;
    height:110%;
    background-color: rgb(226, 24, 182);
}
#bloc20 {
    overflow: auto;
    width:110%;
    height:100%;
    background-color: rgb(245, 147, 212);
}
#bloc21 {
    overflow: auto;
    width:100%;
    height:110%;
    background-color: rgb(248, 193, 239);
}
#bloc22 {
    overflow: auto;
    width:110%;
    height:100%;
    background-color: rgb(247, 243, 210);
}
#bloc23 {
    overflow: auto;
    width:110%;
    height:100%;
    background-color: rgb(146, 144, 126);
}