Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Code par Tanguy Genier. https://wabers.ch/membre/tanguy/ -->
<!DOCTYPE html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="Nous créons vos sites avec passion et programmation. Nous sommes Wabers et nous pouvons vous aidez à la création de votre siteweb.">
    <meta name="keywords" content="site internet, création site web, soutien informatique, programmation, progra, programmeur, html, css, javascript, js" />
    <link rel="icon" type="image/png-icon" href="images/logow.png">
    <link rel="stylesheet" href="css/unloaded.css">
    <!-- Great load CSS -->
	<link id="pagestyle" rel="stylesheet" type="text/css" href="">
    <title>WΛBΞRS</title>
</head>
<body id='body'style="overflow: hidden;">
    <section class="first-body">
        <h1 class="theTitle"style="display:none"></h1>
        <div class="localizer">
            <h2>Chargement...</h2>
            <div class="explains">Si cette page ne charge pas, vous n'avez probablement pas activé JavaScript.
                <br>
                <a href="https://www.enable-javascript.com/fr/" target="_blank">Cliquez ici</a> pour obtenir le guide d'activation.
            </div>
        </div>
    </section>
<div class="two-body" style="display: none;">
    <div id="hrContainer">
        <hr id="closedHr">
        <span id="spanMenu">Menu</span>
    </div>
    <header id='header' class="closed">
        <div class="grid-container">
            <ul>
                <li><a href="#Acceuil"class="header-link" id="headerLink1">Accueil</a></li>
                <li><a href="#Présentation"class="header-link"id="headerLink2">Présentation</a></li>
                <li><a href="#Commandes"class="header-link"id="headerLink3">Commandes</a></li>
                <li><a href="#Membres"class="header-link"id="headerLink4">Membres</a></li>
                <li><a href="#Contact"class="header-link"id="headerLink5">Contact</a></li>
                <!-- 1er Backgrounds -->
                <div id="background"class="backgroundAccueil">Accueil</div>
                <div id="background"class="backgroundPresentation">Présentation</div>
                <div id="background"class="backgroundCommandes">Commandes</div>
                <div id="background"class="backgroundMembres">Membres</div>
                <div id="background"class="backgroundContact">Contact</div>
                <!-- 2eme Backgrounds -->
                <div id="background"class="backgroundWabers">WΛBΞRS</div>
                <div id="background"class="backgroundMail">Do it!</div>
                <!-- Reseaux soc. -->
                <div id="background"class="backgroundInsta">Instagram</div>
                <!-- <div id="background"class="backgroundFacebook">Facebook</div> A faire dans le js-->
            </ul>
            <hr class="hr-middle">
            <ul>
                <li><h3 id="headerTitle">WΛbΞrs</h3></li>
                <a href="mailto:info@wabers.ch"type="email"id="headerMail"><span>info@wabers.ch</span></a>
                <li><div class="copyr">
                    Borex - Crassier
                    <br>
                    <div class="resSoc">
                        <!-- <a href="https://www.facebook.com/wabers.sa.1" target="_blank">Fb</a>  -->
                        <a target="_blank"href="https://www.instagram.com/we.are.wabers/">Instagram</a>
                    </div>
                </div></li>
            </ul>
        </div>
    </header>
<div class="first-main">
    <section class='sect1' id="Acceuil">
        <div class="h1-container">
            <div class="background addAnimation"style="color: #0000;">WΛBΞRS</div>
            <h1 id="h1" class="theTitle"data-text="WΛbΞrs"></h1>
            <hr class="h1-line left">
            <hr class="h1-line right">
            <div class="message-box">
                <div class="message">PDG: David Auger et Tanguy Genier.</div>
            </div>
        </div>
        <img class="h1-wallpaper"id="randomWallpaper1"src=""alt="">
        <img class="h1-wallpaper"id="randomWallpaper2"src=""alt="">
    </section>
    <div class="main">
    <section class='sect2'id='Présentation'>
        <div class="container">
            <div class='separate un'>
                    <div class='presentation text'id='presentationText1'>
                        <span class="text">
                            <h4><span class="colored">Hey! </span>Nous sommes Wabers.</h4>
                            <br>
                            <span class="thin">La <span class="colored">solution</span> la plus simple pour votre <span class="colored">site web</span>.</span>
                            <br><br>
                            <div class="story">
                                Nous avions décidé d'apprendre la programmation comme simple hobby au départ, puis l'un de nous eu une idée: créer un agenda connecté pour notre classe qui, plus tard, eu un immense succès. C'est avec ce projet en tête que nous avons découvert tout le potentiel de cette discipline.
                                <br>
                                Depuis, nous perfectionnons nos compétences afin de proposer un service de bonne qualité.
                                <br><br>
                                Pour le moment, nous avons créé quelques sites pour nos clients.
                            </div>
                        </span>
                    <div class='presentation text'style="margin: 10% 0 0% 0;">
                        <span class="text">Nous <span class="colored">créons </span>vos sites avec passion et <span class="colored">programmation</span>.</span>
                        <br>
                        <a href="#Commandes" style="font-size: 70%;opacity: .5;color: black;">Voir ?</a>
                    </div>
                    <div class='presentation text'style="transform: translateY(62.24px);"id='presentationText3'>Un service simple, efficace et rentable.</div>
                    <div id="bgGoX">Wabers</div>
                    <div class="rotated"id='backgroundRotatedText2'style="transition: all 1s ease-out;transform: translateY(311.4px);"><div style="transform:rotate(270deg);">Wabers</div></div>
                </div>
            </div>
        </div>
    </section>
    <section class='sect3'>
        <div class="container-exp">
            <h1 class='big-h1'id='Commandes'>Commandes</h1>
            <div class="text-exp">Voici les commandes que nous avons réalisées.<br>Nos services incluent  un soutien technique au site internet en tout temps, ainsi que n'importe quelle aide de votre choix qui peut être négociée.
                <br>
                <div class='border-top n1'>
                    Nos services commencent à 130.- par an.
                    <br>
                    Pour une question ou un devis, <a href="#Contact">cliquez ici</a>.
                    <br>
                    Le code source de cette page est disponible <a href="https://codepen.io/Wabers/pen/MWwMvmX" target="_blank">ici</a>.
                </div>
            </div>
        </div>

        <!-- Projets  -->
        <div class="container" id='container'>

            <!-- Case départ -->
            <!-- Projet DealJ -->
            <div class="project-container dealj">
                <h1 class="dealj">
                    <a href="http://dealj.ch"target="_blank">DealJ</a>
                </h1>
                <div class="text">
                    4 jeunes DJs passionnés pour animer vos soirées.
                    <br><br>
                    Ayant appris seuls, leur première fête était une simple boom à un banal camps d'école. 
                    <br>
                    Mais à présent, ils souhaiteraient partager avec davantage de monde cette art qui les unis.
                    <!-- <div class="statu">Voir</div> -->
                </div>
                <div class="project-box">
                    <div class="statu-see">
                        <div class="a-box Dealj">
                            <a href="http://dealj.ch"target="_blank">Voir</a>
                        </div>
                    </div>
                    <a href="http://dealj.ch"target="_blank"class="project deux enligne">
                        <div class="container">
                            <!-- <div class="text"> -->
                            <!-- </div> -->
                        </div>
                        <!-- <img class="h1-wallpaper"id="projectWallpaper2"src="images/field-sunset-skyline-flowers-clouds-free-stock-photo-image-wallpaper.jpg"alt=""> -->
                    </a>
                </div>
            </div>
            <div class="project-container case-depart">
                <div class="introduction">
                    <h1 class="case-depart">
                        <a href="http://case-depart.ch"target="_blank">Case départ</a>
                    </h1>
                    <div class="text">
                        Case départ est un club de théâtre fièrement mené par Mme. Penseyres.
                        <br><br>
                        Cette endroit propose des cours conduits avec bonne humeur qui permettront à votre enfant la découverte d'un nouveau monde, celui de la scène.
                        <br><br>
                        Une équipe pleine de joie prépare déjà en ce moment un nouveau spectacle.
                    </div>
                </div>
                <div class="project-box">
                    <div class="statu-see">
                        <div class="a-box CaseDepart">
                            <a href="http://case-depart.ch"target="_blank">Voir</a>
                        </div>
                    </div>
                    <a href="http://case-depart.ch"target="_blank"class="project un enligne">
                        <div class="container">
                            <div class="text"></div>
                        </div>
                    </a>
                </div>
            </div>
            <!-- <div class="project trois developpement">
                <div class="container">
                    <h1>MyClass</h1>
                    <div class="text">
                        Votre agenda sur votre téléphone.
                        <div class="statu">En développement.</div>
                    </div>
                </div>
            </div> -->
            <div class="project-container gym-crassier">
                <div class="introduction">
                    <h1 class="gym-crassier">
                        <a href="http://gymcrassier.ch"target="_blank">Gym de Crassier</a>
                    </h1>
                    <div class="text">
                        La gym de Crassier est une organisation à but sportif pour laisser vos enfants bouger.
                        <br><br>
                        Des moniteurs pourront occuper vos enfants en leur faisant faire des activités sportives grâce au matériel à disposition.
                    </div>
                </div>
                <div class="project-box">
                    <div class="statu-see">
                        <div class="a-box gym-crassier">
                            <a href="http://gymcrassier.ch"target="_blank">Voir</a>
                        </div>
                    </div>
                    <a href="http://gymcrassier.ch"target="_blank"class="project quatre enligne">
                        <div class="container">
                            <div class="text"></div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <!-- MEMBRES -->
        <div class="container-exp">
            <h1 class='big-h1'id='Membres'>Membres</h1>
            <div class="text-exp">Nous sommes quatre. <br>Certains sont spécialisés en design. D'autres font le travail que vous ne voyez même pas: le 'Back-end'.
                <br>
                <div class="border-top">
                    <!-- Des cours de programmation seront disponibles à l'école ESEP de Borex dès l'ouverture de la bibliothèque. -->
                </div>
            </div>
        </div>

        <!-- Membre -->
        <div class="container deux" id='container'>
            <!-- <div class="categorie">Back-end</div>
            <div class="categorie">Designer</div> -->
        <div class="sizer">

            <!-- David -->
            <a href="http://wabers.ch/membre/david"target="_blank"class="cv David enligne">
                <h1>David</h1>
                <div class="text">
                    <!-- Co-fondateur de Wabers. -->
                    <div class="statu">Voir</div>
                </div>
            </a>

            <!-- Tanguy -->
            <a href="http://wabers.ch/membre/tanguy"target="_blank" class="cv Tanguy enligne">
                <h1>Tanguy</h1>
                <div class="text">
                    <!-- Co-fondateur de Wabers. -->
                    <div class="statu">Voir</div>
                </div>
                <!-- <div class="background">Click it!</div> -->
            </a>

            <!-- Luiza -->
            <div class="cv Luiza developpement">
                <h1>Luiza</h1>
                <div class="text">
                    <div class="statu">En développement.</div>
                </div>
            </div>

            <!-- Enzo -->
            <div class="cv Enzo developpement">
                <h1>Enzo</h1>
                <div class="text">
                    
                    <div class="statu">En développement.</div>
                </div>
            </div>
        </div>
        </div>
    </section>

    <!-- Contact  -->
    <section class="sect4"id='Contact'>
        <div class="sizer">
            <h1 class='big-h1'>Contact</h1>
            <a href="mailto:info@wabers.ch" type="email">
                <span>info@wabers.ch</span>
                <div class="underline"></div>
            </a>
            <div class="copyr">
                Borex - Crassier
                <br>
                <div class="resSoc">
                    <!-- <a href="https://www.facebook.com/wabers.sa.1" target="_blank">Fb</a>  -->
                    <a target="_blank"href="https://www.instagram.com/we.are.wabers/">Instagram</a>
                </div>
                <div class="sponsors">
                    Hébergé par <a href="https://www.likuid.com/"target="blank">Likuid</a>.<br>
                    Programmé par <a href="membre/tanguy">Tanguy Genier</a>.
                </div>
            </div>
        </div>
    </section>
    </div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15.0.0/dist/smooth-scroll.polyfills.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="style.js"></script>
<!-- <script>
    var i = 0;
    var txt = 'WΛBΞRS';
    var speed = 350;
    function typeWriter() {
        if (i < txt.length) {
            window.scrollBy(0, 1);
            document.getElementById("h1").innerHTML += txt.charAt(i);
            document.querySelector('.theTitle').innerHTML += txt.charAt(i);
            i++;
            setTimeout(typeWriter, speed);
        }
        else{
            window.scrollBy(0, -6);
        }
    };
    if (screen.width < screen.height) {
        var myPix = new Array("IMG_9623.jpg","20190424_090918118_iOS.jpg", "20200307_101037563_iOS.jpg", "20200307_100906531_iOS.jpg");
    }
    else {
        var myPix = new Array("20190714_090757345_iOS.jpg", "IMG_8626.JPG", "IMG_8819.jpg", "IMG_8837.jpg", "IMG_9814.jpg" , "normal/20190608_182159971_iOS.jpg", "normal/IMG_9894.jpg", "normal/20190512_113130677_iOS.jpg", "normal/20190706_191609417_iOS.jpg", "normal/IMG_1237.jpg", "normal/IMG_8649.JPG")
    }
    function choosePic() {
        var randomNum = Math.floor(Math.random() * myPix.length);
        document.getElementById("randomWallpaper1").src = "images/wallpaper/" + myPix[randomNum];
        document.getElementById("randomWallpaper2").src = "images/wallpaper/" + myPix[randomNum];
        // document.getElementById("randomWallpaper3").src = "images/wallpaper/" + myPix[randomNum];
        // document.getElementById("randomWallpaper4").src = "images/wallpaper/" + myPix[randomNum];

        // document.getElementById("projectWallpaper1").src = "images/wallpaper/" + myPix[randomNum];
        // document.getElementById("projectWallpaper2").src = "images/wallpaper/" + myPix[randomNum];
        
    }
</script> -->
<html>

              
            
!

CSS

              
                /* Code par Tanguy Genier. https://wabers.ch/membre/tanguy/ */
@font-face{
  font-family: "OpenSans";
  src: url(fonts/Roboto/Roboto-Regular.ttf) format("truetype");
}
@font-face{
  font-family: "bold";
  src: url(fonts/Roboto/Roboto-Bold.ttf) format("truetype");
}
@font-face{
  font-family: "light";
  src: url(fonts/light.ttf);
}
@font-face {
  font-family: 'montserrat';
  src: url(fonts/montserrat/Montserrat-Regular.ttf);
}
@font-face {
  font-family: 'Bungee';
  src: url(fonts/Roboto/Roboto-Medium.ttf);
}
.sect1 h1::selection, .theTitle::selection, .sect1 .background::selection, .h1-wallpaper::selection, .big-h1::selection,  
.h1-wallpaper, .sect1 h1, .theTitle, .sect1 .background, .h1-wallpaper, .big-h1, .statu-see a{
  background: none;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}
.first-body{
  display: none!important;
}
.two-body{
  display: block!important;
}
html{
  /* scroll-behavior: smooth; */
  transition: all 3s ease-in-out .5s;
  overflow-x: hidden!important;
}
body{
    font-family: "OpenSans", sans-serif;
    font-size: 180%;
    background: #000;
    color:#fff;
    max-width: 100%;
    margin: 4px 4px 4px 4px;
    transition: transform 0s ease-out 5s;
    overflow-x: hidden!important;
}
*::-webkit-scrollbar{
    width:0em;
    background: transparent;
}
/* *::selection, span::selection{
  background: #0000;
} */
.big-h1::selection{
  background: transparent;
}
/* HEADER */
header.closed{
  visibility: hidden;
  opacity: 0;
}
header.opened{
  visibility: visible;
  opacity: 1;
}
#hrContainer{
  mix-blend-mode: difference;
  padding: 1.5% 0 !important;
  cursor: pointer;
  /* background: #000; */
  position:fixed;
  /* display: flex; */
  top: 0;
  left: 0%;
  width: 100%;
  z-index: 1000;
}
#hrContainer span{
  position:fixed;
  margin-block-start: 0.05em;
  margin-top: 1em;
  top: 0em;
  left: 2.5%;
  /* transform: translateX(-50%); */
  opacity: 0;
  font: 100 70% 'montserrat';
  z-index: 1100;
  transition: all .5s;
  width: 100%;
}
#hrContainer span.overed{
  opacity: 1;
}
#closedHr, .closedHr{
  mix-blend-mode:difference;
  position:fixed;
  top: .5em;
  left: 2.5%;
  align-items: center;
  width: 95%;
  /* padding: 5% 0;
  box-sizing: content-box; */
  border-radius: 50px;
  z-index: 1100;
  transition: width .5s;
  margin-block-start: 0em;
  margin-block-end: 0em;
  /* padding-block-start: 0.5em;
  padding-block-end: 0.5em; */
  transition: all .3s ease-in-out;
}
/* .closedHr{
  margin-block-start: 0.5em;
} */
#closedHr.overed{
  /* width: 91.2%; */
  opacity: .3;
}
#hrContainer.closing{
  transform: translateY(-100px);
  display: none;
}
header{
  width: 100%;
  height: 100%;
  margin: -14px -0;
  padding: 8px 0;
  transform: translateY(-5px);
  /* display: none; */
  /* justify-items: center; */
  position: fixed;
  background: #0000;
  transition: ease-in-out 0.5s;
  z-index: 1000;
}
.grid-container{
  /* margin: auto; */
  /* height: 50%; */
  width: 100%;
  position: absolute;
  left: 0;
  top: 45%;
  z-index: 200;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  grid-template-columns: 48% 2% 48%;
}
/* header.scroll{  margin-top: -10%;opacity: 0;transform: translateY(-10px);} */
/* header.srolled{  margin-top: 0%;opacity: 1;transform: translateY(-10px);} */
header h3{
  text-transform: uppercase;
  padding: 5% 0 7% 0;
  text-align: center;
  justify-items: center;
  text-align: left;
  font-size: 150%;
  margin-block-start: 0em;
  margin-block-end: 0em;
  cursor: default;
}
/* header ul{
  width: fit-content;
  margin: 0 0 0 15%;
} */
header ul li{
  list-style-type: none;
  padding: 1.75% 0%;
}
header ul li a{
  padding: 1.75% 0%;
  font-size: 125%;
  text-align: left;
}
header a:hover{
  text-decoration: underline;
}
header a[type="email"]{
  font-size: 100%;
  padding: 5% 0;
  letter-spacing: normal;
}
header #background{
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: -70%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 600%;
  font-family: "bold";
  font-weight: bolder;
  font-style: italic;
  transition: 1s ease;
}
header #background.show{
  visibility: visible;
  opacity: .1;
}
header .copyr{
  margin-top: 0%;
  font: lighter normal 50% 'OpenSans', sans-serif;
}
h1{
  font-weight: bolder;
  /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
}
a{
  color: #fff;
  text-decoration: none;
}
section{
  width: 100%;
  z-index: 2;
}
.first-main{
  transition: all 1s;
}
.first-main.darker{
  opacity: 0.2 !important;
}
/* .main.less{animation: none;} */
.main{
  transition: filter 1s;
  /* filter: blur(0px); */
  opacity: 1;
}
.first-main.blured{filter: blur(20px);opacity: .7;}
/* .main{
  animation: start 2s ease-out 12s both;
}
@keyframes start{
  0%{
      margin-top: 0vh;
  }
  100%{
      margin-top: -5vh;
  }
} */
@keyframes start-opacity{
  0%{
    opacity: 0;
  }
  75%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
/* .two-body{
  animation: start 2s ease-out 1500ms both;
} */
.sect1{
    animation:none;
    /* min-height: 93vh; */
    height: 100vh;
    max-width: 100vw;
    transition: 1s all;
    overflow: hidden;
    /* filter: blur(0px);
    opacity: 1;
    z-index: -1; */
}
.sect1.scrolled{opacity: 0;}
/* .h1-wallpaper-box{
  position: fixed;
  top: 0;
  left: 0%;
} */
.h1-wallpaper{
  /* position: fixed; */
  position: relative;
  top: -3%;
  left: -5%;
  width: 110%;
  z-index: -2;
  transition: margin 1s ease-out;
  filter: blur(2.5px);
}
.sect1 #randomWallpaper2{
  transform: rotate(180deg);
}
/* .sect1::after{
  content: "";
  display: block;
  position: static;
  background:linear-gradient(to bottom, #0000 1%, #fff 40%);
  min-height: 1%;
  min-width: 100%;
  z-index: 1;
} */
section, .h1-wallpaper, #hrContainer{
  animation: start-opacity 6s normal both;
}
.h1-container{
  position: fixed;
  top: 50%;
  left:0%;
  width: 100%;
  /* transform: translate(0%, -100%); */
}
.sect1 h1, .theTitle{
  font-size: 520%;
  line-height: 0;
  color: #fff;
  width: 100%;
  text-align: center;
  z-index: -1;
  /* transition: margin .1s ease-out, opacity .5s; */
  transition: all .25s ease-out, opacity .5s;
  font-family:"Bungee", sans-serif;
  text-transform: uppercase;
  margin-block-start: 0;
  margin-block-end: 0;
  cursor: default;
}
.sect1 .message-box{
  text-align: center;
  font-size: 50%;
  position: fixed;
  bottom: 2%;
  left: 0;
  width: 100%;
  animation: start-opacity 10s reverse both;
}
.sect1 .message{
  opacity: .1;
}
.sect1 .background{
  position: fixed;
  top: 40%;
  left:50%;
  font-size: 520%;
  padding: 3%;
  height: 100%;
  color: transparent;
  z-index: -2;
  transform: translate(-50%, -50%);
}
.sect1 .background.addAnimation{
  animation: start-h1-line-bg 4s normal both;
}
@keyframes start-h1-line-bg{
  0%{
    background-color: #000;
  }
  90%{
    background-color: #000;
  }
  100%{
    background-color: transparent;
    visibility: hidden;
  }
}
.sect1, body, html{
  animation: none;
}
.h1-line{
  position: fixed;
  top:50%;
  z-index: -3;
  /* width: 25%; */
  /* transform: translateY(-50%); */
  border-color: white;
  animation: start-h1-line 4s normal both .5s;
  opacity: 0;
}
.h1-line.left{
  left: 5%;
}
.h1-line.right{
  right: 5%;
}
@keyframes start-h1-line{
  0%{
    width: 0%;
    opacity: 0;  
  }
  30%{
    opacity: 1;  
  }
  70%{
    width: 27%;
    opacity: 1;  
  }
  100%{
    width: 0%;
    opacity: 0;  
  }
}
#h1::before, #h1::after{
    /* content: attr(data-text); */
    /* content: "WΛbΞrs"; */
    animation: redblue alternate infinite;
    animation-delay: 3.5s;
    animation-duration: 5s;
    z-index: -5;
    filter: brightness(200%);
    opacity: 0;
    position: fixed;
    top: 50%;
    left:0%;
    text-align: center;
    width: 100% !important;
  }
  #h1::before{
    color: rgba(130, 0, 0, .5);
  }
  #h1::after{
    color:rgba(0, 0, 130, .5);
    animation-direction: alternate-reverse;
  }
  @keyframes redblue{
    0%{
      top:-4px;
      left: 0px;
      opacity: 0;
    }
    15%{
      top:4px;
      left: -2px;
      opacity: 1;
    }
    25%{
      top:-4px;
      left: -4px;
      opacity: 1;
    }
    37%{
      top:-1px;
      left: -3px;
      opacity: 1;
    }
    50%{
      top: -4px;
      left: 8px;
      opacity: 1;
    }
    62%{
      top:-4px;
      left: -4px;
      opacity: 1;
    }
    75%{
      top: 2px;
      left: -2px;
      opacity: 1;
    }
    90%{
      top:2px;
      left: -3px;
      opacity: 1;
    }
    100%{
      top: 6px;
      left: -10px;
      opacity: 0;
    }
  }
.sect2{
  background: #000;
  /* margin: 102vh 0 0 0; */
}
.sect2 .container{
  width: 100%;
  overflow: hidden;
}
.sect2 .container .separate.un{
  min-height: 60vh;
  background: #fff;
  display: grid;
  align-items: center;
  overflow: hidden;
}
.sect2 h4{
  margin-block-start: 0;
  margin-block-end: 0;
  /* font: 700 100% 'monserrat'; */
}
#presentationText1{
  z-index: 15;
  text-align: center;
  padding: 0;
  position: relative;
  top: 0%;
  left: 0;
  margin: 22.5vh auto;
  display: grid;
  justify-items: center;
  width: 80%;
  max-width: 80%;
}
#presentationText3 {
  border-radius: 2px;
  padding: 1%;
  background: #000;
  z-index: 99;
  mix-blend-mode: difference;
  margin: 10% 0 0% 0;
  /* width: 105%; */
}
.story{
  position: relative;
  top: -5%;
  left: 0%;
  text-align: justify;
  color: #000000aa;
  /* background: #fff7; */
  padding: 2%;
  border-radius: 50px;
}
.rotated, #bgGoX{
  position: absolute;
  width: fit-content;
}
.rotated, .rotated div, #bgGoX{
  transition: all 2.5s ease-out;
}
#bgGoX{
  opacity: .3;
  display: inline;
  font: normal bolder 800% "Bungee";
  background: linear-gradient(90deg, rgb(0, 13, 130), rgb(110, 0, 150)95%);
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  z-index: -1;
  top: 110%;
  left: 40%;
}
#backgroundRotatedText2{
  transition: transfrom .4s ease-out;
  top: 0;
  left: -20%;
}
.sect2 .container .rotated div{
  display: inline-block;
  font: normal bolder 400% "Bungee";
  color:rgb(110, 0, 150);
  /* background: linear-gradient(90deg, rgb(0, 13, 130), rgb(110, 0, 150)95%);
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent; */
  opacity: .4;
  z-index: -1;
}
.colored{
  background: linear-gradient(90deg, rgb(0, 26, 255), rgb(183, 0, 255)95%);
  background-size: 200%;
  background-position: center;
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  mix-blend-mode: normal!important;
  display: inline;
}
.separate .presentation.text{
  text-align: center;
}
.separate.un .presentation.text span.text{
  color: #000;
  z-index: 99;
}.separate.deux .presentation.text span.text{
  mix-blend-mode: difference;
  padding: 15% 0;
  z-index: 99;
}
.presentation span.thin{font-family: "light", sans-serif;color: #000;z-index: 99;}
/* .separate:nth-child(2) .presentation span{
    background: rgba(0, 110, 255, 0.85);
} */
/* SECTION N*3 */
.sect3{
  background:#000;
  /* opacity: 0; */
  transition: opacity 0.5s;
  /* overflow: hidden; */
  z-index: 15;
}
/* .sect3.scrolled{
  opacity: 1;
} */
/* h1 sect3 */
.big-h1{
  text-align: center;
  margin-left: 10px;
  margin-block-start: 0em;
  font-size: 250% !important;
  /* padding-top: 0.5em; */
  margin-block-end: 0.5em;
  background-clip: text;
  background: linear-gradient(135deg, rgb(255, 0, 234), rgb(0, 4, 255));
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
}
  /* Section n*3 h1, expliquations... ect */

  .sect3 .container-exp{
    margin: 0% 0 5% 10%;
    padding: 5% 0 0 0;
  }
  .sect3 .container-exp .big-h1{
    text-align: left;
    margin-left: 0;

    /* margin-left: 10px; */
    margin-block-start: 0em;
    font-size: 200%;
    padding-top: 0.5em;
    margin-block-end: 0.5em;
  }
  .sect3 .container-exp .text-exp{
    line-height: 130%;
    width: 90%;
    /* font-size: 150%; */
    /* font-weight: bolder; */
  }
  .border-top, .border-bottom{
    font-size: 70%;
    padding-top: 10px;
    line-height: 110%!important;
  }
  .border-top{border-top: #fff solid 1.5px;width: 100%;}
  .border-bottom{border-bottom: #fff solid 1.5px;width: fit-content;}
.sect3 .container{
  scroll-snap-type: both proximity;
  overflow: hidden;
  width: 100vw;
}
/* Project: Général */
  .project-container{
    width: 70%;
    margin: 0 auto;
  }
  .project-container .introduction{
    max-height: fit-content;
    overflow: hidden;
  }
  .project-container h1{
    font-size: 200%;
  }
  .project-container h1.case-depart{
    background: linear-gradient(135deg, rgb(255, 0, 0), rgb(0, 0, 0));
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
  }
  .project-container h1.dealj{
    background: linear-gradient(45deg, rgb(0, 153, 255), rgb(255, 0, 149));
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
  }
  .project-container h1.gym-crassier{
    background: linear-gradient(45deg, rgb(255, 136, 0), rgb(251, 255, 0));
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
    /* salledegym_003-2-1200x824.2.png */
  }
  .project-container .text{
    font-size: 90%;
    font-style: italic;
    position: relative;
    left: 40%;
    width: 60%;
    padding: 0 0 6% 0;
  }
  .project-box{
    display: flex;
    height: 100%;
    overflow: hidden;
  }
  .statu-see{
    display: grid;
    align-items: center;
    text-align: center;
    height: 60%;
  }
  .statu-see .a-box{
    opacity: .25;
    transition: .75s ease;
    /* transform: rotate(270deg); set in js */
    font-size: 300%;
    line-height: 225%;
    text-align: center;
    width: 100%;
    height: min-content;
    /* margin: 50% 0 0 0; */
  }
  .statu-see .a-box:hover{opacity: .5;}
  .sect3 .project{
    scroll-snap-align: start;
    display: block;
    padding: 5% 0;
    width: 100%;
    /* transform: translateX(0%); */
    height: 65%;
    display: grid;
    grid-template-rows: 100%;
    align-items: center;
    margin: 10px .25% 10px .25%;
    background-size: 115%!important;
    filter: sepia(80%);
    transition: filter .7s ease, transform 1s ease .2s;
  }
  .sect3 .project:hover{
    filter: sepia(0%);
  }
  .sect3 .project h1{
    position: relative;
    padding-bottom: 25px;
    margin-top: 0;
    margin-bottom: 0;
  }
  .sect3 .project .text{
    padding:0 2.5% 0 25px;
    max-width: 80%!important;
    position: relative;
    width: fit-content;
    mix-blend-mode: difference;
  }
  .sect3 .text .statu, .border-top{
    margin-block-start: 5px;
    border-top: #fff solid 1.5px;
    line-height: 225%;
  }
  .sect3 .h1-wallpaper{
    z-index: 0;
  }
/* SITES = PROJECT UN/DEUX/TROIS/QUATRE */
  /* Project un: Case départ*/
  .sect3 .project.un{
    background: url(images/897104.jpg);
    /* background-position-x: right; */
  }
  .sect3 .project.un h1,.sect3 .project.un .text{
    /* top: 0%;
    left: 10%; */
    text-align: center;
    margin: 0 auto;
  }
  /* Project deux: DealJ */
  .sect3 .project.deux{
    background: url(images/soirée.png);
    background-position: top;
    background-size: cover;
  }
  .sect3 .project.deux h1,.sect3 .project.deux .text{
    text-align: center;
    margin: 0 auto;
  }
  /* Project trois: MyClass */
  .sect3 .project.trois{
    background: linear-gradient(90deg,#000 49.9%, #fff 50%);
    margin-left: -25.5px;
    background-size: 100%!important;
  }
  .sect3 .project.trois h1,.sect3 .project.trois .text{
    transform: translateX(25.5px);
    text-align: center;
    margin: 0 auto;
    mix-blend-mode: difference;
  }
  /* Project quatre: Gym de Crassier */
  .sect3 .project.quatre{
    background: url(images/salledegym_003-2-1200x824.2.png);
    background-position: top;
    background-size: cover;
  }
  .sect3 .project.quatre h1,.sect3 .project.quatre .text{
    text-align: center;
    margin: 0 auto;
  }

/* MEMBRES */
  .container.deux{
    /* transform: rotate(270deg); */
    /* display: grid; */
    /* width: 80%; */
    /* height: 100vw; */
    /* grid-template-columns: 33.333% 33.333% 33.333%; */
    /* grid-template-columns: 50% 50%; */
    /* grid-gap: 5%; */
    max-width: 50%;
    width: fit-content;
    margin: 0 auto;
    overflow: visible;
  }
  .sect3 .container-exp{
    z-index: 20;
  }
  .sizer{
    width: fit-content;
    /* transform: translateY(-55%); */
    z-index: 1;
  }
  .categorie{
    text-align: center;
    background: linear-gradient(135deg, rgb(255, 0, 234), rgb(0, 4, 255));
  }
  /* .cv.Enzo{
    margin: 0 auto !important;
    display: block;
  } */
  .cv{
    display: inline-block;
    border-radius: 2.5px;
    width: 48.2%;
    margin: 1% .5%;
    height: 230px;
    overflow: hidden;
    /* background: linear-gradient(to bottom, #111 70%, #000); */
    background-size: 300%;
    background: #111;
    transition: background-color .2s ease-out;
    /* margin: .5%; */
  }
  .sect3 .cv h1{
    text-align: center;
    /* margin-left: 3%; */
  }
  .sect3 .cv .text{
    font-size: 90%;
    text-align: center;
  }
  .cv.enligne:hover{
    background: #333;
  }
  .cv.developpement{
    filter:grayscale(100%);
  }.cv.developpement:hover{
    background: rgb(19, 19, 19)
  }

/* CONTACT */
  .sect4{
    height: 100vh;
    background: url(images/macbookpro2.jpg) #000 repeat;
    background-size: cover;
    transition: background-position 1s;
    background-position:30% 50%;
    overflow: hidden;
    /* box-shadow: #000 0 0 1000000000em inset; */
    z-index: 0;
  }
  .sect4::after{
    content: "";
    display: block;
    position: relative;
    top: -100%;
    left: 0;
    background:linear-gradient(to top, #0000 1%, #000 40%);
    min-height: 30%;
    min-width: 100%;
    z-index: 1;
  }
  .sect4 h1{
    display: block;
    text-align: center;
    background-clip: text;
    background: linear-gradient(135deg, rgb(255, 0, 0)1%,rgb(255, 255, 255) 5%, rgb(0, 89, 255) 50%);
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
  }
  .sect4 .sizer{
    height: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-40%);
    display: grid;
    text-align: center;
    z-index: 2;
    grid-template-rows: 30% 10% 50%;
  }
  a[type="email"]{
    /* font-weight: bolder; */
    font: normal 300% 'Archivo Narrow', arial;
    letter-spacing: -5px;
    transition: margin .01s;
  }
  a[type="email"] .underline{
    width: 0%;
    height: 5px;
    margin: -5px 0 0 0;
    background: white;
    transition: 1s ease-in-out;
  }
  a[type="email"]:hover .underline{
    width: 100%;
  }
  .copyr{
    margin-top: 40%;
    position: relative;
    bottom: 10%;
    font: 100 normal 70% 'OpenSans', sans-serif;
    color: #fff5;
  }
  .resSoc{
    color: #fff9;
    word-spacing: 1em;
  }
  .sponsors{
    font-size: 70%;
    padding: 2% 0 0 0;
    opacity: .6;
    transition: all .3s;
    cursor: default;
  }
  .sponsors:hover{
    opacity: 1;
  }
  .sponsors a{
    text-shadow: black 0px 1.5px 1px;
  }
/* Iphone 6/7/8 enfin plus pour le moment parce que c'est tard et pi flemme un peu. 375px*/
@media only screen and (min-width:0px) and (max-width:735px){
  body{
    font-size: 120%;
  }
  /* HEADER */
      /* #randomWallpaper1{
        transform: rotate(90deg);
        top: -10%;
        left: -35%;
        width: 220%;
      } */
      /* #randomWallpaper2,  */
      #randomWallpaper3, #randomWallpaper4{
        display: none;
      }
    .sect1 h1{
      font-size: 400% !important;
      /* top: 30%; */
    }
    .sect1 div hr{
      display: none;
    }
    /* .big-h1{
      font-size: 150% !important;
    } */
    #hrContainer span{
      opacity: 1;
    }
    header #background{
      display: none!important;
    }
    .first-main.darker{
      opacity: 1 !important;
    }
    .grid-container{
      grid-template-columns: 100%;
    }
    header ul{
      padding-inline-start: 0px;
      text-align: center;
    }header ul li{
      padding-inline-start: 0px;
      text-align: center;
    }header .hr-middle{
      width: 40%;
    }

  /* Sect2 */
    .sect2 .container .rotated{
      /* display:none; */
      opacity: .25;
      margin-left: auto;
      margin-right: auto;
    }
    .rotated{
      display: none;
    }
    #bgGoX{
      font: normal bolder 500% "Bungee";
    }

  /* Sect3 */
    /* Projets */
      .project-container .text{
        left: 0%;
        width: 100%;
      }
      .project-box {
        height: 70%;
      }
      .statu-see {
        display: none;
    }
    /* Membres */
      .container.deux{
        max-width: initial;
        width: 80%;
      }
      .container.deux .sizer{
        width: 120%;
        padding: 0 0 50% 0;
        /* transform: translateY(-20%); */
      }
      .container.deux .cv{
        width: 80% !important;
        height: 150px;
        text-align: center;
        padding: 0 0 3% 0;
      }
    .sect3 .container h1{
      width: initial;
    }
    /* H1 */
    /* Sect3 */
      /* .sect3 h1{
        font-size: 150% !important;
      } */
    .border-top.n1{
      padding: 10% 0 10% 0;
      text-align: center;
      font-size: 80%;
    }
    .sect3 .project.trois h1, .sect3 .project.trois .text {
      transform: translateX(0px);
    }
    /* Sect4 */
    .sect4 .big-h1{
      text-align: left;
    }
    .sizer{
      height: 100%;
      width: fit-content;
      /* transform: translateY(-12%); */
    }

  /* Sect4 */
    a[type="email"] {
      font: normal 220% 'Archivo Narrow', arial;
      letter-spacing: 0px;
      transition: margin .01s;
    }
}
@media only screen and (min-width:667px) and (max-width:1000px){
  body{
    font-size: 150%;
  }

  /* HEADER */
  .grid-container{
    grid-template-columns: 48% 2% 48%;
    margin: 5% 0 0 0;
  }
  header .hr-middle{
    width: initial;
  }
  /* SECT1 */
    /* H1 */
    .sect1 h1{
      font-size: 350% !important;
      /* top: 30%; */
    }
    .sect1 div hr{
      display: initial;
    }
    @keyframes start-h1-line{
      0%{
        width: 0%;
        opacity: 0;  
      }
      30%{
        opacity: 1;  
      }
      70%{
        width: 17%;
        opacity: 1;  
      }
      100%{
        width: 0%;
        opacity: 0;  
      }
    }  

  /* Sect3 */
    /* Membres */
    .container.deux{
      max-width: initial;
      width: 80%;
    }
    .container.deux .sizer{
      width: 120%;
      height: 200%;
      /* padding: 0 0 50% 0; */
      /* transform: translateY(-20%); */
    }
    .container.deux .cv{
      width: 80% !important;
      height: 150px;
      text-align: center;
      padding: 0 0 3% 0;
    }
  }
/* ------------------------------ Uploading CSS File ------------------------------------- */
.first-body{
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    height: 100%;
    width: 100%;
    background: rgb(0, 0, 0);
    animation: none 2s;
  
    font-style: italic;
    color: #fff;
    font-family: sans-serif;
  }
  @keyframes opacity{
    0%{opacity:0};
    100%{opacity: 1;}
  }
  .first-body .localizer{
    position: fixed;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: 100%;
    color: #fff;
  }
  .first-body h2{
    text-align: center;
    animation: changeShadow .3s alternate infinite linear;

    color: #fff;
    font-size: 130%;
    font-size: 200%;
    font-family: sans-serif;
  }
  @keyframes changeShadow{
    0%{
      text-shadow: blueviolet 0px 4px 1px;
    }
    100%{
      text-shadow: rgb(226, 43, 119) 0px 4px 1px;
    }
  }
  .first-body h1{
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 100%;
    margin-block-start: 0;
    margin-block-end: 0;
    width: fit-content;
  
    font-style: normal;
  }
  .first-body .explains{
    text-align: center;
    color: #fff;
    width: 100%;
    opacity: .3;
  
    padding-top: 10%;
  }
  .first-body .explains a{
    text-decoration: underline;
    color: #fff;
  }
  
              
            
!

JS

              
                /* Code par Tanguy Genier. https://wabers.ch/membre/tanguy/ */
// BODY
    const body = document.getElementById('body');
// MAIN
    const firstMain = document.querySelector('.first-main');
    const main = document.querySelector('.main');
// HEADER
    const spanMenu = document.getElementById('spanMenu');
    const mouseMoveParallax = document.getElementById('mouseMoveParallax');
    const header = document.getElementById('header');

// SECTION1
    const sect1 = document.querySelector('.sect1');
    const theTitle = document.getElementById('h1');
    const h1Line = document.querySelector('.h1-line');
// SECTTION2
// Separate
    const presentationText3Span = document.querySelector('#presentationText3 span');
    const presentationText1 = document.getElementById('presentationText1');
    const presentationText2 = document.getElementById('presentationText2');
    const presentationText3 = document.getElementById('presentationText3');
    const story = document.querySelector('.story');
    const backgroundRotatedText2 = document.getElementById('backgroundRotatedText2');
    const bgGoX = document.getElementById('bgGoX');

// Images
    const sect2Img1 = document.getElementById('img1');
    const sect2Img2 = document.getElementById('img2');
    const sect2Img3 = document.getElementById('img3');

// Sect2
    const sect2 = document.querySelector('.sect2');

// Sect3
    const sect3 = document.querySelector('.sect3');
    const container = document.getElementById('container');

    const projectUn = document.querySelector('.project.un');
    const projectDeux = document.querySelector('.project.deux');
    const projectTrois = document.querySelector('.project.trois');
    const projectQuatre = document.querySelector('.project.quatre');

    const aBoxCaseDepart = document.querySelector('.a-box.CaseDepart');
    const aBoxDealj = document.querySelector('.a-box.Dealj');
    const aBoxMyClass = document.querySelector('.a-box.myclass');
    const aBoxGymCrassier = document.querySelector('.a-box.gym-crassier');

    const cvTanguy = document.querySelector('.cv.Tanguy');
    const cvDavid = document.querySelector('.cv.David');
    const cvLuiza = document.querySelector('.cv.Luiza');
    const cvEnzo = document.querySelector('.cv.Enzo');

// SECT4
    const sect4 = document.querySelector('.sect4');
    const bodyW = body.clientWidth;

// Hauteurs:
    let sect1Height = sect1.clientHeight;
    let sect2Height = sect2.clientHeight;
    let sect3Height = sect3.clientHeight;
    let containerWidth = container.clientWidth;

    // TITRE
    body.onLoad = setTimeout(function opacitySect1(){
        window.addEventListener('scroll', () => {
            if(window.scrollY > sect1Height + 600) {
                sect1.classList.add('scrolled');
            }
            else{
                sect1.classList.remove('scrolled');
            }
        });
    }, 4000);
// PRESENTATION: text 'inversé' (dispensable)
    if('CSS' in window && 'supports' in window.CSS) {
        var support = window.CSS.supports('mix-blend-mode','difference');
        // tests for mix-blend-mode support
        support = support?'mix-blend-mode':'no-mix-blend-mode';
        document.documentElement.className += support;
        }
    
// EFFETS Parralax
    window.addEventListener('scroll', function () {
            let offset = window.pageYOffset;
            // sect1
               
            // Sect2
            setTimeout(function(){
                backgroundRotatedText2.style.transform = "translateY(" + (offset * 0.2) + "px)";
                bgGoX.style.transform = "translateX(-" + (offset * 0.08) + "px)";
            }, 200);
            presentationText3.style.transform = "translateY(" + (offset * 0.02) + "px)";
            story.style.transform = "translateY(" + (offset * 0.04) + "px)";
            
            // Sect3
                    projectUn.style.backgroundPositionY = offset * 0.1 + "px";

                    projectUn.style.transform = "translateY(" + (offset * 0.02) + "px)";
            projectDeux.style.backgroundPositionY = offset * 0.1 + "px";
            projectDeux.style.transform = "translateY(" + (offset * 0.02) + "px)";

            aBoxCaseDepart.style.transform = "translateY(" + (offset * 0.04) + "px) rotate(270deg)";
            aBoxDealj.style.transform = "translateY(" + (offset * 0.04) + "px) rotate(270deg)";
            // aBoxMyClass.style.transform = "translateY(" + (offset * 0.04) + "px) rotate(270deg)";
            aBoxGymCrassier.style.transform = "translateY(" + (offset * 0.04) + "px) rotate(270deg)";

            cvTanguy.style.backgroundPositionY = offset * 0.1 + "px";
            cvDavid.style.backgroundPositionY = offset * 0.1 + "px";
            cvLuiza.style.backgroundPositionY = offset * 0.1 + "px";
            cvEnzo.style.backgroundPositionY = offset * 0.1 + "px";

        });

    window.addEventListener('scroll', () => {
        if(window.scrollY > sect1Height + sect2Height + (sect3Height / 2 )) {
            setTimeout(function(){
                let offset = window.pageYOffset / 10;
                sect4.style.backgroundPositionY = offset * 0.2 + "px";    
            }, 300);
        }
        else{
            let offset = window.pageYOffset;
            sect4.style.backgroundPositionY = offset * 0 + "px";
        }
    });

    // Parralax mouseMove
    // (need extern script)
if (screen.width > 960) {
        // alert('more than 960');
    
    var windowWidth = $(window).width();
    $(body).mousemove(function(event) { 
        var moveX = (($(window).width() / 2) - event.pageX) * -0.011111111111111111111;
        var moveY = (($(window).height() / 2) - event.pageY) * -0.03;
        // H1
        $('.sect1 h1').css('margin-left', moveX+ 'px');
        $('.sect1 h1').css('margin-top', moveY + 'px');
        // h1Line
        $('.h1-line').css('margin-left', moveX+ 'px');
        $('.h1-line').css('margin-top', moveY + 'px');

        // H1-WALLPAPER
        
        // "la solution simple efficace..."
        $('#presentationText3').css('margin-left', moveX + 'px');

        var moveX = (($(window).width() / 100) - event.pageX) * -0.01;
        var moveY = (($(window).height() / 100) - event.pageY) * -0.01;

        var moveXless = (($(window).width() / 100) - event.pageX) * -0.001;
        var moveYless = (($(window).height() / 100) - event.pageY) * -0.001;        

        // setTimeout(function(){
            $('.sect1 .h1-wallpaper').css('margin-left', moveX * 2 + 'px');
            $('.sect1 .h1-wallpaper').css('margin-top', moveY + 'px');

        // Mail de fin 
        $('.sect4 a[type="email"]').css('margin-left', moveX + 'px');
        $('.sect4 a[type="email"]').css('margin-top', moveY + 'px');
        $('ul').css('margin-left', moveX + 'px');
        $('ul').css('margin-top', moveY + 'px');

    });
}
    // SMOOTH SCROLL
    const scroll = new SmoothScroll('a[href*="#"]');
        speed: 800;
    const html = document.querySelector('html');

    // VERIFICATION D'ACTIVATION DE JAVASCRIPT
    const twoBody = document.querySelector('.two-body');
    twoBody.style.display = "block";
    const firstBody = document.querySelector('.first-body');
    firstBody.style.display = "none";
    const hrContainer = document.getElementById('hrContainer');
    hrContainer.style.display = "block";
    body.style.overflow = "visible";
    
    // MENU
    // HEADER
    header.onclick = function() {
        body.style.overflow = 'visible';
        hrContainer.classList.remove('closing');
        closedHr.classList.remove('closing');
        header.classList.remove('opened');
        header.classList.add('closed');
        firstMain.classList.remove('blured');
    }
    hrContainer.onclick = function() {
        firstMain.classList.add('blured');
        hrContainer.classList.add('closing');
        closedHr.classList.add('closing');
        header.classList.add('opened');
        body.style.overflow = 'hidden';
    };
    hrContainer.onmouseover = function() {
        firstMain.classList.remove('blured');
        spanMenu.classList.add('overed');
        closedHr.classList.add('overed');
    };
    hrContainer.onmouseout = function() {
        spanMenu.classList.remove('overed');
        closedHr.classList.remove('overed');
    };
    const headerLink = document.querySelectorAll('.header-link');

    const background = document.getElementById('background');
    const backgroundAccueil = document.querySelector('header .backgroundAccueil');
    const backgroundPresentation = document.querySelector('header .backgroundPresentation');
    const backgroundCommandes = document.querySelector('header .backgroundCommandes');
    const backgroundMembres = document.querySelector('header .backgroundMembres');
    const backgroundContact = document.querySelector('header .backgroundContact');
    
    headerLink.onclick = function () {
        closedHr.classList.remove('closing');
        header.classList.remove('opened');
        header.classList.add('closed');
    };
    headerLink5.ontouchstart = function () {
        firstMain.classList.remove('darker');
        background.classList.remove('show');
    }

    // headerLink1
    headerLink1.onmouseover = function () {
        firstMain.classList.add('darker');
        backgroundAccueil.classList.add('show');
    };
    headerLink1.onmouseout = function () {
        firstMain.classList.remove('darker');
        backgroundAccueil.classList.remove('show');
    };

    // headerLink2
    headerLink2.onmouseover = function () {
        firstMain.classList.add('darker');
        backgroundPresentation.classList.add('show');
    };
    headerLink2.onmouseout = function () {
        firstMain.classList.remove('darker');
        backgroundPresentation.classList.remove('show');
    };

    // headerLink3
    headerLink3.onmouseover = function () {
        firstMain.classList.add('darker');
        backgroundCommandes.classList.add('show');
    };
    headerLink3.onmouseout = function () {
        firstMain.classList.remove('darker');
        backgroundCommandes.classList.remove('show');
    };
    // headerLink4
    headerLink4.onmouseover = function () {
        firstMain.classList.add('darker');
        backgroundMembres.classList.add('show');
    };
    headerLink4.onmouseout = function () {
        firstMain.classList.remove('darker');
        backgroundMembres.classList.remove('show');
    };
    // headerLink5
    headerLink5.onmouseover = function () {
        firstMain.classList.add('darker');
        backgroundContact.classList.add('show');
    };
    headerLink5.onmouseout = function () {
        firstMain.classList.remove('darker');
        backgroundContact.classList.remove('show');
    };
    // 2eme rangée
    const headerTitle = document.getElementById('headerTitle');
    const backgroundWabers = document.querySelector('header .backgroundWabers');
    // Titre
    headerTitle.onmouseover = function () {
        firstMain.classList.add('darker');
        backgroundWabers.classList.add('show');
    };
    headerTitle.onmouseout = function () {
        firstMain.classList.remove('darker');
        backgroundWabers.classList.remove('show');
    };
    // Mail
    const headerMail = document.getElementById('headerMail');
    const backgroundMail = document.querySelector('header .backgroundMail');

    headerMail.onmouseover = function () {
        firstMain.classList.add('darker');
        backgroundMail.classList.add('show');
    };
    headerMail.onmouseout = function () {
        firstMain.classList.remove('darker');
        backgroundMail.classList.remove('show');
    };
    // Reseaux Soc.
    const ResSoc = document.querySelector('.ResSoc a');
    const backgroundInsta = document.querySelector('header .backgroundInsta');

    ResSoc.onmouseover = function () {
        firstMain.classList.add('darker');
        backgroundInsta.classList.add('show');
    };
    ResSoc.onmouseout = function () {
        firstMain.classList.remove('darker');
        backgroundInsta.classList.remove('show');
    };
              
            
!
999px

Console