JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<header>
    <img src="." alt="logo de site"/>
</header>
 
<div class="banniere_defillante">
<div id="sliderFrame">
        <div id="slider">    
            <img src="image/paysage1.jpg" alt="Bienvenue" />
            <img src="image/paysage2.jpg" alt="" />
            <img src="image/paysage3.jpg" alt="Youhou" />
            <img src="image/paysage4.jpg" alt="ok" />
        </div>
         
    </div>
     
</div>
 
<nav class="menu">
<ul>
    <a href="#"><li id="accueil">Accueil</li></a>
    <a href="#"><li id="a_propos">A propos de nous</li></a>
    <a href="#"><li id="contenu">Contenu</li></a>
    <a href="#"><li id="gallery">Gallery</li></a>
</ul>
</nav>
<style>
#accueil
{
    background-color:#6B6B6B;
}
 
#accueil:hover
{
    background-color:#aaaaaa;
}
</style>
 
<div class="bienvenue">
    <h1>Bienvenue sur notre site !</h1>
    <h3>Vous y trouverez des informations concernant la transmission d'énergie électrique sans fil</h3>
    <div id="animaux">
        <div id="animal1">
         
            <img src="image/animal1.jpg" alt="animal"/>
            <h4>Un animal</h4>
            <p>Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.</p>
            <a href="#"><h5>Plus</h5></a>
        </div>
        <div id="animal2">
            <img src="image/animal2.jpg" alt="animal"/>
            <h4>Un animal</h4>
            <p>Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.</p>
            <a href="#"><h5>Plus</h5></a>
        </div>
        <div id="animal3">
            <img...

CSS

body
{
    padding: 0px;
    margin: 0px;
    background-color:#969696;
    overflow-x:hidden;
}
 
header
{
    height: 100px;
}
 
.menu
{
    position: relative;
    top: -660px;
    left: auto;
    padding: 0;
    margin: 0;
}
 
.menu ul, footer ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    text-align: center;
}
 
.menu ul li
{
    max-width: 30px;
    display: inline;
    padding: 30px;
    margin: -1.5px;
    background-color:#ef3b2d;
}
 
.menu a
{
    text-decoration: none;
}
 
.menu a:visited, .menu a:link
{
    color: white;
}
 
.menu ul li:hover
{
    background-color: #aaaaaa;
}
 
.bienvenue
{
    background-color: #4F4F4F;
    height: auto;
}
 
.bienvenue h1, .bienvenue h3
{
    text-align: center;
    position: relative;
    top: 30px;
    color: white;
}
 
.bienvenue h3
{
    color: #AFAFAF;
}
 
 
 
#animaux img
{
    width: 100%;
}
 
#animaux div
{
    display: inline-block;
    width: 15%;
    margin: 4.5%;
    height: 300px;
    height: auto;
}
 
#animaux
{
    position: relative;
    left: 1.2%;
}
 
#animaux h4
{
    background-color: #f33e23;
    position: absolute;
    text-align: center;
    top: 85px;
    opacity:0;
    color:white;
    width: 15%;
    font-size: 1.4em;
    -webkit-transition:ease-in-out .4s;
    -moz-transition:ease-in-out .4s;
    transition:ease-in-out .4s;
}
   
#animaux img:hover+h4
{
    top: 75px;
    background-color: #f33e23;
    opacity:1;
    -webkit-transition:linear .4s;
    -moz-transition:linear .4s;
    transition:linear .4s;
    top:
}
  
#animaux p
{
    text-align: center;
    color: white;
}
 
#animaux h5
{
    position: relative;
    left: 36%;
    line-height: 38px;
    text-align: center;
    background-color: #f33e23;
    width: 80px;
    height: 40px;
}
 
#animaux a
{
    text-decoration: none;
}
 
#animaux a:visited, #animaux a:link
{
    color: white;
}
 
.presentation
{
    position: relative;
    top: -30px;
    background-color: #FFFFFF;
    height: 500px;
}
 
.text
{
    width:...

JavaScript

var sliderOptions=
{
    sliderId: "slider",
    startSlide: 0,
    effect: "series1",
    effectRandom: false,
    pauseTime: 2600,
    transitionTime: 500,
    slices: 12,
    boxes: 8,
    hoverPause: 1,
    autoAdvance: true,
    captionOpacity: 0.3,
    captionEffect: "fade",
    thumbnailsWrapperId: "thumbs",
    m: false,
    license: "b6t80"
};
 
var imageSlider=new mcImgSlider(sliderOptions);