JSFiddle - React, Tailwind, and code Playground

by arianededulle

HTML

<script src="http://arianededulle.free.fr/diapo.swf"></script>
<script src="http://arianededulle.free.fr/diapo.xml"></script>
<script src="http://arianededulle.free.fr/mail.php"></script>
<body>
    <div id="GrandeIntro"></div>
    <div id="siteWrapper">
        <header>
            <div id="headerTop"></div>
            <div id="Grandenavigation">
                <nav>
                    <div style="font-size: 10px;">
                        <br/>
                    </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#quisuisje"><big>Q</big>ui suis-je ?</a>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#competences"><big>C</big>ompétences</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#dessins"><big>D</big>essins</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#autres"><big>A</big>utres&nbsp;travaux</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#contact"><big>C</big>ontact</a>

                </nav>
            </div>
            <br/>
        </header>
        <div id="diapo">
            <object type="application/x-shockwave-flash" data="diapo.swf?xml=diapo.xml&amp;timer=5&amp;showtitles=1" width="900" height="600">
                <param name="movie" value="diapo.swf?xml=diapo.xml&amp;timer=5&amp;showtitles=1" />
            </object>
        </div>
        <section id="content" class="centercolumn">
            <div>
                <section id="quisuisje"></section>
                <br/>
                <section id="titre"> <big>Q</big>ui suis-je ?</section>
                <center>
                    <img height="6" width="100%" src="http://nsm08.casimages.com/img/2015/08/14//1508141016259048913509325.png" />
                </center>
                <img src="http://nsm08.casimages.com/img/2015/09/04//1509040324599048913555704.png" border="0" style="border-color:#5dbd9c; float:left; margin:8px;" height="146" />Passionnée par l'expression artistique depuis l'enfance, je passe beaucoup de...

CSS

html, body {
    height:100%;
    margin:0;
    background:url(http://nsm08.casimages.com/img/2015/09/04//1509040325069048913555705.png) no-repeat center bottom;
    background-attachment:fixed;
    -webkit-background-size: cover;
    /* pour Chrome et Safari */
    -moz-background-size: cover;
    /* pour Firefox */
    -o-background-size: cover;
    /* pour Opera */
    background-size: cover;
    /* version standardisée */
    font-family: Helvetica, sans-serif;
    font-size: 13px;
    color: white;
    text-align:center;
}
body a:link, a:visited {
    color: white;
    text-decoration: underline;
}
body a:hover, a:focus, a:active {
    text-decoration: none;
    color:#5dbd9c;
}
.centercolumn {
    width:60%;
    margin: auto;
    /*centrer la colonne*/
    padding:00px;
    /*margin interne*/
    text-align:justify;
}
header a:link, a:visited {
    color: white;
    text-decoration: none;
    font-size: 17px;
    font-family: Times New Roman, serif;
}
header a:hover, a:focus, a:active {
    text-decoration: underline;
    color: white;
}
ul {
    margin:0px;
    padding:0px 0px 0px 50px;
}
li {
    margin:2px 0px 3px 0px;
    padding:0px 0px;
}
table {
    font-family: Helvetica, sans-serif;
    font-size: 13px;
    color: white;
    text-align:justify;
}
#GrandeIntro {
    height:210px;
    ) no-repeat;
    background : url(http://nsm08.casimages.com/img/2015/09/06//1509060751039048913560913.png)no-repeat center top;
    background-size: 989px 180px;
    ;
}
#siteWrapper {
    margin-top:-80px;
}
#siteWrapper header {
    height:80px;
    font-variant: small-caps;
    text-align:center;
    color: white;
}
#siteWrapper header.fixed {
    position:fixed;
    top:0;
    left: 0;
    right: 0;
    /* center all inline content */
    text-align: center;
    background:url(http://nsm08.casimages.com/img/2015/09/06//1509060751019048913560912.png)no-repeat center top;
    background-size:1920px 56px;
}
#diapo {
    width:830px;
    margin: auto;
    /*centrer la...

JavaScript

var header = document.querySelector("#siteWrapper header");

function scrolled() {
    var windowHeight = document.body.clientHeight,
        currentScroll = document.body.scrollTop || document.documentElement.scrollTop;

    header.className = (currentScroll >= 132) ? "fixed" : "";
}

addEventListener("scroll", scrolled, false);