EXTRAS

Coller ce code dans un élémént HTML

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
                                                                  <style type="text/css">
                                                                    #days{
                                                                      font-family: 'Raleway', sans-serif;
                                                                      font-size: 20px;
                                                                      display: table;
                                                                      width:100%;
                                                                      padding-left: 10px;
                                                                      padding-right: 10px;
                                                                    }
                                                                    .day__row{
                                                                      display: table-row;
                                                                    }
                                                                    .day__label{
                                                                      font-weight: normal;
                                                                      text-align: left;
                                                                      vertical-align: top;
                                                                      display:table-cell;
                                                                      padding-top: 10px;
                                                                      padding-bottom: 20px;
                                                                      border-bottom: solid 1px;
                                                                    }
                                                                    .hours__slots{
                                                                      text-align: right;
                                                                      vertical-align: top;
                                                                      display:table-cell;
                                                                      padding-top: 10px;
                                                                      padding-bottom: 20px;
                                                                      border-bottom: solid 1px;
                                                                    }
                                                                    .open-style {
                                                                      font-weight: bold;
                                                                      color:#3f9118;
                                                                    }
                                                                  
                                                                  </style>
                                                                  
                                                                  </head>
                                                                  
                                                                  <div id="days" > 
                                                                    <div id="day_monday" class="day__row"> 
                                                                      <div class="day__label">Lundi : </div> 
                                                                      <div class="hours__slots"> </div> 
                                                                    </div> 
                                                                    <div  id="day_tuesday" class="day__row"> 
                                                                      <div class="day__label">Mardi : </div>
                                                                      <div class="hours__slots"> </div> 
                                                                      </div> 
                                                                    <div  id="day_wednesday" class="day__row"> 
                                                                      <div class="day__label" >Mercredi : </div>
                                                                      <div class="hours__slots"> </div> 
                                                                    </div> 
                                                                    <div id="day_thursday" class="day__row"> 
                                                                      <div class="day__label" >Jeudi :</div> 
                                                                      <div class="hours__slots"> </div> 
                                                                    </div> 
                                                                    <div id="day_friday" class="day__row"> 
                                                                      <div class="day__label" >Vendredi : </div> 
                                                                      <div class="hours__slots"> </div>
                                                                    </div> 
                                                                    <div id="day_saturday" class="day__row">
                                                                      <div class="day__label" >Samedi : </div> 
                                                                      <div class="hours__slots"> </div> 
                                                                    </div> 
                                                                    <div id="day_sunday" class="day__row"> 
                                                                      <div class="day__label" >Dimanche : </div> 
                                                                      <div class="hours__slots"> </div> 
                                                                    </div> 
                                                                  </div>
                                                                  
                                                                  <script>
                                                                  
                                                                    const closedText = "Fermé";
                                                                
                                                                    const openTimes = 
                                                                    [
                                                                      { day: "monday", openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:15, minutes: 0}},{start: {hours:18, minutes: 0}, stop: {hours:22, minutes: 0}}]},
                                                                      { day: "tuesday",openTimes: []},
                                                                      { day: "wednesday",  openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:15, minutes: 0}},{start: {hours:18, minutes: 0}, stop: {hours:22, minutes: 0}}]},
                                                                      { day: "thursday",  openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:15, minutes: 0}},{start: {hours:18, minutes: 0}, stop: {hours:23, minutes: 0}}]},
                                                                      { day: "friday",  openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:15, minutes: 0}},{start: {hours:18, minutes: 0}, stop: {hours:22, minutes: 0}}]},
                                                                      { day: "saturday",  openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:15, minutes: 0}},{start: {hours:18, minutes: 0}, stop: {hours:22, minutes: 0}}]},
                                                                      { day: "sunday",   openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:15, minutes: 0}},{start: {hours:18, minutes: 0}, stop: {hours:22, minutes: 0}}]},
                                                                    ];
                                                                  
                                                                    //  jour fériés et jours fermé 
                                                                
                                                                    /* 
                                                                
                                                                    commentaires
                                                                    */
                                                                    const closeDates = ["2023/07/31"];
                                                                  
                                                                  
                                                                    const date = new Date();
                                                                  
                                                                    $(document).ready(function() {
                                                                      const dayOfWeek = getDayOfWeek(date);
                                                                  
                                                                      openTimes.forEach(day => {
                                                                        let html = '';
                                                                        let open = false;      
                                                                  
                                                                        if(dayOfWeek == day.day && isClosedDate(date)){
                                                                          html = closedText;
                                                                        }
                                                                        else if(day.openTimes.length > 0) {  
                                                                          for (let i = 0; i < day.openTimes.length; i++) {
                                                                            const time = day.openTimes[i];
                                                                            if(dayOfWeek == day.day){
                                                                              var startTime= new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.start.hours, time.start.minutes, 0 );
                                                                              var stopTime= new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.stop.hours, time.stop.minutes, 0 );
                                                                              if(date >= startTime && date<stopTime){
                                                                                open = true;
                                                                              }
                                                                            }
                                                                            html+= (open ?'<div class="open-style">': '<div>') + getTime(time)+ '</div>';
                                                                          }
                                                                        }
                                                                        else{
                                                                          html = closedText;
                                                                        }
                                                                        
                                                                        if(open){
                                                                          $("#day_"+day.day+ " .day__label").addClass("open-style");
                                                                        } else {
                                                                          $("#day_"+day.day+ " .day__label").removeClass("open-style");
                                                                        }
                                                                        $("#day_"+day.day+ " .hours__slots").html(html);
                                                                      });    
                                                                    });
                                                                  
                                                                    function getTime(val) {
                                                                      return format(val.start.hours)+ ':'+ format(val.start.minutes) + ' - ' + format(val.stop.hours)+':'+ format(val.stop.minutes);
                                                                    }
                                                                  
                                                                    function format(val) {
                                                                      if(val<10){
                                                                        return '0'+val;
                                                                      }
                                                                      return ''+val;
                                                                    }
                                                                  
                                                                    function isClosedDate(date){
                                                                      for (let i = 0; i < closeDates.length; i++) {
                                                                        const closedDate = new Date(closeDates[i]);
                                                                  
                                                                        if(closedDate.getFullYear() == date.getFullYear()
                                                                          && closedDate.getMonth() == date.getMonth()
                                                                          && closedDate.getDate() == date.getDate()){
                                                                          return true;
                                                                        }
                                                                      }
                                                                      return false;
                                                                    }
                                                                  
                                                                    function getDayOfWeek(date) {
                                                                      const day = date.getDay();
                                                                      switch (day){
                                                                        case 1: return "monday";
                                                                        case 2: return "tuesday";
                                                                        case 3: return "wednesday";
                                                                        case 4: return "thursday";
                                                                        case 5: return "friday";
                                                                        case 6: return "saturday";
                                                                        case 0: return "sunday";
                                                                      }
                                                                    }
                                                                  </script>

Coller ce code dans un élémént HTML

<div id="container">
                                                                                
                                                                                <div  id="hora" class="suport" style="trans form:rotate(45deg)">
                                                                                <div class="suportBroca" >
                                                                                    <div class="broca"></div>
                                                                                    </div>
                                                                                </div>
                                                                                
                                                                                   <div id="minut"  class="suport">
                                                                                <div class="suportBroca" >
                                                                                    <div class="broca"></div>
                                                                                    </div>
                                                                                </div> 
                                                                                   <div id="segon"  class="suport">
                                                                                <div class="suportBroca">
                                                                                    <div></div>
                                                                                    </div>
                                                                                </div>  
                                                                                <div id="center"  class="suport">
                                                                                <div class="suportBroca">
                                                                                    <div></div>
                                                                                    </div>
                                                                                </div>  
                                                                                </div>

coller ce code dans : Popriétes de page > Code HTML personalisé > Html du bloc Head de la page

<style>
                                                                                #container{
                                                                                   background-color: white;
                                                                                    height: 30vmin;
                                                                                    margin:auto;     
                                                                            		 width: 30vmin;
                                                                                    position:relative;
                                                                                    overflow: hidden;
                                                                                    border-radius: 50%;
                                                                                    background-image: url(wa_res/icons/CADRAN01.jpg?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325);
                                                                                    background-size: 100%;
                                                                                    min-height: 100px;
                                                                                    min-width: 100px;
                                                                                }
                                                                                .suport{
                                                                                    position: absolute;
                                                                                    width: 100%;
                                                                                    height: 100%;
                                                                                    
                                                                                }
                                                                                .suportBroca{
                                                                                    height: 100%;
                                                                                    overflow: hidden;
                                                                                }
                                                                                #hora>div>div{
                                                                                    width: 3%;
                                                                                    height: 40%;
                                                                                     margin: auto;
                                                                                    margin-top:20%;
                                                                                    background-color: black;
                                                                                 
                                                                                }
                                                                            
                                                                                 #minut>div>div{
                                                                                    width: 2%;
                                                                                    height: 50%;
                                                                                     margin: auto;
                                                                                    margin-top:10%;
                                                                                    background-color: black;
                                                                                   
                                                                                } 
                                                                                .broca{
                                                                                    border-radius:   5em 5em 0 0;
                                                                                    border:.1em solid lightgray;
                                                                                   
                                                                                }
                                                                                
                                                                                #segon>div>div{
                                                                                    width: .6%;
                                                                                    height: 52%;
                                                                                     margin: auto;
                                                                                    margin-top:8%;
                                                                                    background-color: red;
                                                                                   
                                                                                } 
                                                                                #center>div>div{
                                                                                    width: 8%;
                                                                                    height: 8%;
                                                                                     margin: auto;
                                                                                    margin-top:46%;
                                                                                    background-color: rgba(0,0,0,.9);
                                                                                    border-radius: 50%;
                                                                                    border:.15em solid red;
                                                                                    box-sizing: border-box;
                                                                                }
                                                                                
                                                                            @keyframes clock {
                                                                              0% {
                                                                                -webkit-transform: rotate(0deg);
                                                                                        transform: rotate(0deg);
                                                                              }
                                                                              100% {
                                                                                -webkit-transform: rotate(360deg);
                                                                                        transform: rotate(360deg);
                                                                              }
                                                                            }
                                                                            #hora,#minut,#segon{        
                                                                                    transition: 2s ease;        
                                                                                }
                                                                             </style>

Coller ce code dans : Popriétes de page > Code HTML personalisé > Code Html à la fin du bloc BODY

 <script>
                                                                            function set(id, deg, timeAnimation) {
                                                                              var el = document.getElementById(id)
                                                                              rotation = 'rotate(' + deg + 'deg)'
                                                                              el.querySelector("DIV").style.animation ="clock linear "+timeAnimation+"s infinite"
                                                                              el.style.transform = rotation;
                                                                              el.style.webkitTransform = rotation;
                                                                            }
                                                                            
                                                                            setTimeout(function(){
                                                                                var now = (new Date)
                                                                                set('hora', 30*(now.getHours()+now.getMinutes()/60), 60*60*24)
                                                                                set('minut', 6*(now.getMinutes()+now.getSeconds()/60), 60* 60)
                                                                                set('segon', 6*(now.getSeconds()+now.getMilliseconds()/1000), 60)
                                                                            },20)
                                                                            
                                                                             </script>

Coller ce code dans un élémént HTML

<div class="content-slider">
                                                                  <div class="slider">
                                                                    <div class="mask">
                                                                      <ul>
                                                                        <li class="anim1">
                                                                          <div class="quote">“Tout est drôle, dès l'instant que ça arrive aux autres.”</div>
                                                                          <div class="source">- Stephen Hawking</div>
                                                                        </li>
                                                                        <li class="anim2">
                                                                          <div class="quote">“La vie serait tragique si elle n’était pas drôle.”</div>
                                                                          <div class="source">- Robin Williams</div>
                                                                        </li>
                                                                        <li class="anim3">
                                                                          <div class="quote">“C’est drôlement bien les rides, j’ai l’air moins con avec.”</div>
                                                                          <div class="source">- Peter Sellers</div>
                                                                        </li>
                                                                        <li class="anim4">
                                                                          <div class="quote">“La mémoire est un drôle de brouillard.”</div>
                                                                          <div class="source">- Edmond Baudoin</div>
                                                                        </li>
                                                                        <li class="anim5">
                                                                          <div class="quote">““Si tu as le choix entre deux théories, choisis la plus drôle.””.</div>
                                                                          <div class="source">- Georges Wolinski</div>
                                                                        </li>
                                                                      </ul>
                                                                    </div>
                                                                  </div>
                                                                </div>

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

.$ body {
                                                                  font-family: 'Raleway', serif;
                                                                  font-size: 40px;
                                                                  text-align: center;
                                                                }
                                                                
                                                                .content-slider {
                                                                  width: auto;
                                                                  height: 300px;
                                                                }
                                                                
                                                                .slider {
                                                                  height: 300px;
                                                                  width: auto;
                                                                  margin: 0px auto 0;
                                                                  overflow: visible;
                                                                  position: relative;
                                                                }
                                                                
                                                                .mask {
                                                                  overflow: hidden;
                                                                  height: 320px;
                                                                }
                                                                
                                                                .slider ul {
                                                                  margin: 0;
                                                                  padding: 0;
                                                                  position: relative;
                                                                }
                                                                
                                                                .slider li {
                                                                  width: auto;
                                                                  height: 300px;
                                                                  position: absolute;
                                                                  top: -320px;
                                                                  list-style: none;
                                                                }
                                                                
                                                                .slider .quote {
                                                                  font-size: 40px;
                                                                  text-align: center;
                                                                  font-style: italic;
                                                                  text-align: center;
                                                                }
                                                                
                                                                .slider .source {
                                                                  font-size: 20px;
                                                                  text-align: right;
                                                                }
                                                                
                                                                .slider li.anim1 {
                                                                  animation: cycle 10s linear infinite;
                                                                }
                                                                
                                                                .slider li.anim2 {
                                                                  animation: cycle2 10s linear infinite;
                                                                }
                                                                
                                                                .slider li.anim3 {
                                                                  animation: cycle3 10s linear infinite;
                                                                }
                                                                
                                                                .slider li.anim4 {
                                                                  animation: cycle4 10s linear infinite;
                                                                }
                                                                
                                                                .slider li.anim5 {
                                                                  animation: cycle5 10s linear infinite;
                                                                }
                                                                
                                                                .slider:hover li {
                                                                  animation-play-state: paused;
                                                                }
                                                                
                                                                @keyframes cycle {
                                                                  0% {
                                                                    top: 0px;
                                                                  }
                                                                  4% {
                                                                    top: 0px;
                                                                  }
                                                                  16% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                    z-index: 0;
                                                                  }
                                                                  20% {
                                                                    top: 305px;
                                                                    opacity: 0;
                                                                    z-index: 0;
                                                                  }
                                                                  21% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                    z-index: -1;
                                                                  }
                                                                  50% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                    z-index: -1;
                                                                  }
                                                                  92% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                    z-index: 0;
                                                                  }
                                                                  96% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                  }
                                                                  100% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                  }
                                                                }
                                                                
                                                                @keyframes cycle2 {
                                                                  0% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                  }
                                                                  16% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                  }
                                                                  20% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                  }
                                                                  24% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                  }
                                                                  36% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                    z-index: 0;
                                                                  }
                                                                  40% {
                                                                    top: 305px;
                                                                    opacity: 0;
                                                                    z-index: 0;
                                                                  }
                                                                  41% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                    z-index: -1;
                                                                  }
                                                                  100% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                    z-index: -1;
                                                                  }
                                                                }
                                                                
                                                                @keyframes cycle3 {
                                                                  0% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                  }
                                                                  36% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                  }
                                                                  40% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                  }
                                                                  44% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                  }
                                                                  56% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                    z-index: 0;
                                                                  }
                                                                  60% {
                                                                    top: 325px;
                                                                    opacity: 0;
                                                                    z-index: 0;
                                                                  }
                                                                  61% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                    z-index: -1;
                                                                  }
                                                                  100% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                    z-index: -1;
                                                                  }
                                                                }
                                                                
                                                                @keyframes cycle4 {
                                                                  0% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                  }
                                                                  56% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                  }
                                                                  60% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                  }
                                                                  64% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                  }
                                                                  76% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                    z-index: 0;
                                                                  }
                                                                  80% {
                                                                    top: 305px;
                                                                    opacity: 0;
                                                                    z-index: 0;
                                                                  }
                                                                  81% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                    z-index: -1;
                                                                  }
                                                                  100% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                    z-index: -1;
                                                                  }
                                                                }
                                                                
                                                                @keyframes cycle5 {
                                                                  0% {
                                                                    top: -305px;
                                                                    opacity: 0;
                                                                  }
                                                                  76% {
                                                                    top: -325px;
                                                                    opacity: 0;
                                                                  }
                                                                  80% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                  }
                                                                  84% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                  }
                                                                  96% {
                                                                    top: 0px;
                                                                    opacity: 1;
                                                                    z-index: 0;
                                                                  }
                                                                  100% {
                                                                    top: 305px;
                                                                    opacity: 0;
                                                                    z-index: 0;
                                                                  }
                                                                }

Coller ce code dans un élémént HTML

<svg class="editorial"
                                                                 xmlns="http://www.w3.org/2000/svg"
                                                                 xmlns:xlink="http://www.w3.org/1999/xlink"
                                                                 viewBox="0 24 150 28 "
                                                                 preserveAspectRatio="none">
                                                             <defs>
                                                             <path id="gentle-wave"
                                                             d="M-160 44c30 0 
                                                                58-18 88-18s
                                                                58 18 88 18 
                                                                58-18 88-18 
                                                                58 18 88 18
                                                                v44h-352z" />
                                                              </defs>
                                                              <g class="parallax1">
                                                               <use xlink:href="#gentle-wave" x="50" y="3" fill="#ac38e2"/>
                                                              </g>
                                                                <g class="parallax2">
                                                               <use xlink:href="#gentle-wave" x="50" y="0" fill="#4b2cdd"/>
                                                                </g>
                                                                  <g class="parallax3">
                                                               <use xlink:href="#gentle-wave" x="50" y="9" fill="#ac38e2"/>
                                                               </g>
                                                                <g class="parallax4">
                                                               <use xlink:href="#gentle-wave" x="50" y="6" fill="#ffffff"/>  
                                                              </g>
                                                            </svg>

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

.editorial {
                                                              display: block;
                                                              width: 100%;
                                                              height: 90px;
                                                              max-height: 90px;
                                                            position:relative;
                                                              margin: 0;
                                                              z-index:5;
                                                              bottom:0;
                                                              left:0px;
                                                              float:left;
                                                            }
                                                            
                                                            .parallax1 > use {
                                                              animation: move-forever1 10s linear infinite;
                                                              &:nth-child(1) {
                                                                animation-delay: -2s;
                                                              }
                                                            }
                                                            .parallax2 > use {
                                                              animation: move-forever2 8s linear infinite;
                                                              &:nth-child(1) {
                                                                animation-delay: -2s;
                                                              }
                                                            }
                                                            .parallax3 > use {
                                                              animation: move-forever3 6s linear infinite;
                                                              &:nth-child(1) {
                                                                animation-delay: -2s;
                                                              }
                                                            }
                                                            .parallax4 > use {
                                                              animation: move-forever4 4s linear infinite;
                                                              &:nth-child(1) {
                                                                animation-delay: -2s;
                                                              }
                                                            }
                                                            @keyframes move-forever1 {
                                                              0% {
                                                                transform: translate(85px, 0%);
                                                              }
                                                              100% {
                                                                transform: translate(-90px, 0%);
                                                              }
                                                            }
                                                            @keyframes move-forever2 {
                                                              0% {
                                                                transform: translate(-90px, 0%);
                                                              }
                                                              100% {
                                                                transform: translate(85px, 0%);
                                                              }
                                                            }
                                                            @keyframes move-forever3 {
                                                              0% {
                                                                transform: translate(85px, 0%);
                                                              }
                                                              100% {
                                                                transform: translate(-90px, 0%);
                                                              }
                                                            }
                                                            @keyframes move-forever4 {
                                                              0% {
                                                                transform: translate(-90px, 0%);
                                                              }
                                                              100% {
                                                                transform: translate(85px, 0%);
                                                              }
                                                            }

Coller ce code dans un élémént HTML

<a href="https://wa-fusion.fr/wa_contact.html">
                                          <span>BOUTON</span>
                                          <div class="liquid"></div>
                                        </a>

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                        .$ a {
                                          position: relative;
                                          padding: 10px 20px;
                                          display: block;
                                          text-decoration: none;
                                          text-transform: uppercase;
                                          width: 200px;
                                          overflow: hidden;
                                          border-radius: 5px;
                                        }
                                        
                                        .$ a span {
                                          position: relative;
                                          color: #fff;
                                          fot-size: 8px;
                                          font-family: Ropa Sans;
                                          letter-spacing: 0px;
                                          z-index: 1;
                                        }
                                        
                                        a .liquid {
                                          position: absolute;
                                          top: -80px;
                                          left: 0;
                                          width: 200px;
                                          height: 200px;
                                          background: #4b2cdd;
                                          box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
                                          transition: .5s;
                                        }
                                        
                                        a .liquid::after,
                                        a .liquid::before {
                                          content: '';
                                          width: 200%;
                                          height: 200%;
                                          position: absolute;
                                          top: 0;
                                          left: 50%;
                                          transform: translate(-50%, -75%);
                                          background: #000;
                                        }
                                        
                                        a .liquid::before {
                                          
                                          border-radius: 45%;
                                          background: rgba(20, 20, 20, 1);
                                          animation: animate 5s linear infinite;
                                        }
                                        
                                        a .liquid::after {
                                          
                                          border-radius: 40%;
                                          background: rgba(20, 20, 20, .5);
                                          animation: animate 10s linear infinite;
                                        }
                                        
                                        a:hover .liquid{
                                          top: -120px;
                                        }
                                        
                                        @keyframes animate {
                                          0% {
                                            transform: translate(-50%, -75%) rotate(0deg);
                                          }
                                          100% {
                                            transform: translate(-50%, -75%) rotate(360deg);
                                          }
                                        }

TITRE 1	TITRE 2	TITRE 3	TITRE 4	TITRE 5
Contenu	Contenu	Contenu	Contenu	Contenu
Contenu	Contenu	Contenu	Contenu	Contenu
Contenu	Contenu	Contenu	Contenu	Contenu
Contenu	Contenu	Contenu	Contenu	Contenu

Coller ce code dans un élémént HTML

.<table class="table-style">
                                    
                                    
                                    
                                            <thead>
                                    
                                                <tr>
                                    
                                                    <th>TITRE 1</th>
                                    
                                                    <th>TITRE 2</th>
                                    
                                                    <th>TITRE 3</th>
                                    
                                                    <th>TITRE 4</th>
                                    
                                                    <th>TITRE 5</th>
                                    
                                                </tr>
                                    
                                            </thead>
                                    
                                            
                                    
                                    
                                    
                                            <tbody>
                                    
                                                <tr>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                </tr>
                                                <tr>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                </tr>
                                                <tr>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                </tr>
                                                <tr>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                    <td>Contenu</td>
                                    
                                                </tr>
                                    
                                    
                                            </tbody>
                                    
                                    
                                    
                                        </table>

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                    .$ .table-style  {
                                    
                                        border-collapse: collapse;
                                    
                                        box-shadow: 0 5px 50px rgba(0,0,0,0.15);
                                    
                                        cursor: pointer;
                                    
                                        margin: 0px auto;
                                    
                                        border: 2px solid #6102a1;
                                    
                                    }
                                    
                                    
                                    
                                    .$ thead tr {
                                    
                                        background-color: #6102a1;
                                    
                                        color: #fff;
                                    
                                        text-align: left;
                                    
                                    }
                                    
                                    
                                    
                                    .$ th, td {
                                    
                                        padding: 15px 20px;
                                    
                                        text-align: center;
                                    
                                    }
                                    
                                    
                                    
                                    .$ tbody tr, td, th {
                                    
                                        border: 1px solid #ddd;
                                    
                                    }
                                    
                                    
                                    
                                    .$ tbody tr:nth-child(even){
                                    
                                        background-color: #f3f3f3;
                                    
                                    }
                                    
                                    
                                    
                                    .$ @media screen and (max-width: 550px) {
                                    
                                      body {
                                    
                                        align-items: flex-start;
                                    
                                      }
                                    
                                      .table-style  {
                                    
                                        width: 100%;
                                    
                                        margin: 0px;
                                    
                                        font-size: 10px;
                                    
                                      }
                                    
                                      th, td {
                                    
                                        padding: 10px 7px;
                                    
                                    }
                                    
                                    
                                    
                                    }

Coller ce code dans un élémént HTML

<logo-slider>
                                    <div>
                                    <img src="wa_res/icons/logo-01.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-02.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-03.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-04.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-05.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-06.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-07.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-08.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    </div>
                                    <div>
                                    <img src="wa_res/icons/logo-01.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-02.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-03.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-04.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-05.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-06.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-07.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    <img src="wa_res/icons/logo-08.png?t=a3b8b5cb_9565_4ac9_9b37_a4056a946325">
                                    </div>
                                    </logo-slider>

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

logo-slider {
                                    --image-size: 150px;
                                    border: 0px solid #575757;
                                    padding: 20px;
                                    width: 100%;
                                    overflow: hidden;
                                    max-width: 900px;
                                    margin: 0 auto;
                                    position: relative;
                                    display: flex;
                                    }
                                    logo-slider:hover div {
                                    animation-play-state: paused;
                                    }
                                    logo-slider div {
                                    display: flex;
                                    position: relative;
                                    animation: marquee 10s linear infinite;
                                    justify-content: space-around;
                                    }
                                    logo-slider img {
                                    display: block;
                                    min-width: var(--image-size);
                                    height: var(--image-size);
                                    margin: 0 1vw;
                                    }
                                    logo-slider:after {
                                    content: "";
                                    position: absolute;
                                    width: 100%;
                                    height: 100%;
                                    left: 0;
                                    top: 0;
                                    background: linear-gradient(to right, white, rgba(255, 255, 255, 0) 80px, rgba(255, 255, 255, 0) calc(100% - 80px), white);
                                    }
                                    @media (max-width: 900px) {
                                    logo-slider {
                                    --image-size: 50px;
                                    --image-size: min(max(50px, 10vw), 150px);
                                    }
                                    }
                                    @keyframes marquee {
                                    0% {
                                    transform: translateX(0%);
                                    }
                                    100% {
                                    transform: translateX(-100%);
                                    }
                                    }

CODES Html, Css, JS

Tutoriel vidéo

HEURES D'OUVERTURE

HORLOGE

SLIDER VERTICAL TEXTES

VAGUES

BOUTON LIQUIDE

TABULATION

CAROUSEL LOGOS

Soutenez mon travail.