Titre de l'annonce numéro 1

Contenu de l'annonceici
TITRE ANNONCE 2

Contenu annonce 2

Page d'accueil

FoTest :: La vie du forum :: Invités et partenariat
Aller en bas
avatar
Invité
Invité

Page d'accueil Empty Page d'accueil

Ven 2 Avr - 18:36
Code:
<!DOCTYPE html>
<html lang="fr">

  <head>
    <meta charset="utf-8" />
    <title>Page d'accueil (c) AD</title>

    <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Roboto+Condensed&display=swap" rel="stylesheet" />

    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script src="https://www.jqueryscript.net/demo/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick/js/slick.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      //<![CDATA[
      $(document).ready(function() {
        $(".regular").slick({
          dots: true,
          infinite: true,
          slidesToShow: 1,
          slidesToScroll: 1
        });
      });
      //]]>

    </script>
    <script type="text/javascript">
        $(function(){
    /* recuperer l'avatar pour chaque personne */
    $('.js-replace-avatar').each(function(){
        var $this = $(this);
        var lienProfil = $this.attr('href'); /* trouve le lien du profil*/
   
        /* verifie qu'il s'agit bien d'un lien de profil */
        if (! /^\/u\d+$/.test(lienProfil)) return;
     
        /* recupere l'avatar sur la page /uXXX */
        $.get(lienProfil, function(a){
            $("img", $this).attr("src", $("#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img", a).first().attr("src") || "https://i.servimg.com/u/f48/16/78/05/90/myster10.png");
        });
    });
});
    </script>
    <link rel="stylesheet" type="text/css" href="pageaccueil.css" />
    <style type="text/css">
 .blockPA {
    background: url(https://nsa40.casimages.com/img/2021/02/25/210225014720300043.png);
    width: 700px;
    height: 500px;
    color: #2d2f28;
    }
  .blockPA em {
      text-shadow: 1px 1px 0px #e6e6e691;
      font-size: 11.5px;
      letter-spacing: 1px;
      color: #b2615f;
      }
  .blockPA strong {
      letter-spacing: 1px;
      }
/**********************************************************
               SLIDES
***********************************************************/
.carousel-wrapper {
      position: relative;
      bottom: 74px;
      left: 177px;
      width: 377px;
      height: 382px;
      text-align: justify;
      font: 11px/1.8 'Montserrat', sans-serif;
      color: #774f4c !important;
      }
.carousel-wrapper .carousel-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  padding: 25px 50px;
  transition: all 0.5s ease-in-out;
}
.carousel-wrapper .carousel-item .arrow {
  position: absolute;
  top: 0;
  display: block;
  width: 50px;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  background: url("../arrow.png") 50% 50%/20px no-repeat;
}
.carousel-wrapper .carousel-item .arrow.arrow-prev {
  left: 0;
}
.carousel-wrapper .carousel-item .arrow.arrow-next {
  right: 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.carousel-wrapper .carousel-item.light {
  color: white;
}
.carousel-wrapper .carousel-item.light .arrow {
  background: url("../arrow.png") 50% 50%/20px no-repeat;
}
.carousel-wrapper [id^="target-item"] {
  display: none;
}
.carousel-wrapper .item-1 {
  z-index: 2;
  opacity: 1;
}
.carousel-wrapper .item-2 {
  color: #774f4c !important;
  overflow: auto;
  left: 20px;
} 
.carousel-wrapper .item-3 {
  color: #774f4c !important;
  text-align: center !important;
  font-size: 15px !important;
  background: transparent;
  background-size: cover;
}
.carousel-wrapper a {
  color: #8d434a !important;
  font-style: italic;
  text-decoration: none !important;
  transition: 0.5s all;
}
.carousel-wrapper a:hover {
  color: #ffffff !important;
  text-shadow: 2px 1px 0px #8d434a;
      }
.carousel-wrapper *:target ~ .item-1 {
  opacity: 0;
}
.carousel-wrapper #target-item-1:target ~ .item-1 {
  opacity: 1;
}
.carousel-wrapper #target-item-2:target ~ .item-2,
.carousel-wrapper #target-item-3:target ~ .item-3 {
  z-index: 3;
  opacity: 1;
}
.carousel-wrapper #target-item-4:target ~ .item-4 {
  z-index: 5;
  opacity: 1;
}
      @media (max-width: 480px) {

.carousel-wrapper .carousel-item .arrow,
.carousel-wrapper .carousel-item.light .arrow {
  background-size: 10px;
  background-position: 10px 50%;
}

}
/***************************************************
               FIN
****************************************************/
  .ADfriends {
      position: absolute;
      bottom: 165px;
      left: 585px;
      text-align: center;
      font-family: 'Times New Roman', serif;
      font-size: 14px;
      text-transform: lowercase;
      letter-spacing: -1px;
      font-style: italic;
      font-weight: bold;
      }
  .ADfriends a {
      color: #8d434a !important;
      line-height: 1.526;
      text-decoration: none !important;
      text-shadow: 0px 1px #ffffff4d;
      transition: 0.5s all;
      }
    .ADfriends a:hover {
  color: #ffffff !important;
  text-shadow: 2px 1px 0px #8d434a;
      }
  .ADstaff img {
      position: relative;
      top: 100px;
      left: 25px;
      height: 55px;
      width: auto;
      margin-bottom: -10px;
      }
  .ADstaff span{
      display: block;
      width: 140px;
      background-color: #bb9d83;
      box-shadow: inset 0px 0px 8px #a8805842;
      border-left: double #297a3f;
      border-radius: 25px;
      text-align: center;
      font-weight: 700;
      font-family: 'Montserrat', sans-serif !important;
      font-size: 12px;
      opacity: 0;
      position: absolute;
      top: 155px;
      left: 5px;
      transition: 0.5s all;
      transform:scale(0) rotate(-12deg);
      z-index: 5;
      }
  .ADstaff strong {
      letter-spacing: 1px;
      font-weight: bolder;
      color: #814b34;
      text-shadow: 2px 1px 0px #807e7d36;
      }
  .ADstaff em {
      color: #b2615f;
      text-shadow: 1px 1px 0px #e6e6e691;
      letter-spacing: 1px;
      padding-bottom: 2px;
      }
    .ADstaff {
      z-index: 1;
      }
    a:hover span {
      opacity: 1;
      z-index: 999;
      transform: scale(1) rotate(0);
      }
    .ADwinners {
      position: relative;
      bottom: 230px;
      right: 268px;
      text-align: center;
      font-family: 'Times New Roman', serif;
      font-size: 14px;
      text-transform: lowercase;
      letter-spacing: -1px;
      font-style: italic;
      font-weight: bold;
      }
  .ADwinners a {
      color: #8d434a !important;
      line-height: 1.526;
      text-decoration: none !important;
      text-shadow: 0px 1px #ffffff4d;
      transition: 0.5s all;
      }
    .ADwinners a:hover {
  color: #ffffff !important;
  text-shadow: 2px 1px 0px #8d434a;
      }
  .ADwinners span {
      position: relative;
      left: 40px;
      display: block;
      opacity: 0;
      text-transform: uppercase;
      margin-bottom: -25px;
      transition: 0.5s all;
      transform:scale(0) rotate(-12deg);
      }
    .OPC {
      bottom: 400px !important;
      }
    .ADhelp img {
      position: relative;
      height: 90px;
      width: auto;
      margin-bottom: 10px;
      }
  .ADhelp span{
      display: block;
      width: auto;
      background-color: #bb9d83;
      box-shadow: inset 0px 0px 8px #a8805842;
      border-left: double #297a3f;
      border-radius: 25px;
      text-align: center;
      font-weight: 700;
      font-family: 'Montserrat', sans-serif !important;
      font-size: 12px;
      opacity: 0;
      position: absolute;
      top: 178px;
      left: 85px;
      transition: 0.5s all;
      transform:scale(0) rotate(-12deg);
      z-index: 5;
      }
  .ADhelp strong {
      letter-spacing: 1px;
      font-weight: bolder;
      color: #814b34;
      text-shadow: 2px 1px 0px #807e7d36;
      }
  .ADhelp em {
      color: #b2615f;
      text-shadow: 1px 1px 0px #e6e6e691;
      letter-spacing: 1px;
      padding-bottom: 2px;
      padding: 10px;
      }
    .ADhelp {
      z-index: 1;
      }
    a:hover span {
      opacity: 1;
      z-index: 999;
      transform: scale(1) rotate(0);
      }
      .prof {
      font-family: 'Montserrat', sans-serif !important;
      font-size: 12px;
      font-weight: normal !important;
      }
          </style>
  </head>

  <body>
  <div class="blockPA">
    <div class="ADstaff"><a href="/u1" class="js-replace-avatar"><img class="useravatar" /><span><strong>Blondinette</strong><br /><em>◆ Modératrice ◆</em></span></a> <a href="/u3" class="js-replace-avatar"><img class="useravatar" /><span><strong>TyphaineO</strong><br /><em>◆ Modératrice ◆</em></span></a> <a href="/u4" class="js-replace-avatar"><img class="useravatar" /><span><strong>Elewings</strong><br /><em>◆ Modératrice ◆</em></span></a><br /><br /><br />
      <a href="/u5" class="js-replace-avatar"><img class="useravatar" /><span><strong>Khaym</strong><br /><em>◆ Webmiss ◆</em></span></a> <a href="/u1" class="js-replace-avatar"><img class="useravatar" /><span><strong>Memories</strong><br /><em>◆ Webmiss ◆</em></span></a> <a href="/u1" class="js-replace-avatar"><img class="useravatar" /><span><strong>Serah</strong><br /><em>◆ Webmiss ◆</em></span></a></div>
    <div class="carousel-wrapper">
  <span id="target-item-1"></span>
  <span id="target-item-2"></span>
  <span id="target-item-3"></span>
  <span id="target-item-4"></span>
  <div class="carousel-item item-1">
    <p>Nous sommes une communauté de <em>passionnés</em> qui se retrouvent autour du <em>graphisme</em>, dans un esprit de partage et de convivialité. <strong>Que tu sois débutant ou confirmé</strong>, c’est ici que tu pourras <em>partager tes créations pour progresser </em>, participer à des concours variés, apprendre des choses nouvelles, apporter ton aide et poser tes questions…et, bien sûr, <span style="text-decoration: underline;">flooder !</span> AD est un endroit unique, où chacun peut trouver sa place, quel que soit son niveau, son logiciel, ou son <em>style graphique</em>. Nous aimons apprendre à mieux nous connaître, en partageant nos autres passions dans les galeries des curiosités et dans les mini-blogs. <strong>N'hésite pas à nous faire découvrir les tiennes ! </strong>Alors n’attends plus et <span style="text-decoration: underline;">inscris-toi sur AD,</span> tu seras accueilli à bras ouverts !  </p>
    <a class="arrow arrow-prev" href="#target-item-4"></a>
    <a class="arrow arrow-next" href="#target-item-2"></a>
  </div>
  <div class="carousel-item item-2 light">
    <h2>Les concours</h2>
    <p>Sur le forum, tu peux <em>te mesurer aux autres membres</em> à travers de <strong>nombreux concours</strong>.<br />• <span style="text-decoration: underline;">Concours du mois</span> : Chaque mois, un concours est organisé sur le forum et les participations sont à envoyer par message privé pour être ensuite soumises aux votes des membres. Le gagnant du concours verra sa création affichée et sa galerie mise en avant sur la page d'accueil le mois suivant.<br />• <span style="text-decoration: underline;">Your Style</span> : A partir d'une base imposée pour tous les participants, tu pourras nous montrer ton propre style ! Les créations seront ensuite soumises à un jury composé par le staff. Les 5 créations du podium verront leurs créations affichées sur le compte Instagram du forum !<br />• <span style="text-decoration: underline;">One Pack Challenge</span> : Tu devras composer une création sur un format imposé avec toutes les ressources fournies dans le pack, et uniquement ces ressources, c'est donc un véritable challenge à relever ! Le gagnant du concours verra sa création affichée et sa galerie mise en avant sur la page d'accueil.<br />• <span style="text-decoration: underline;">Battles</span> : Si tu as besoin de plus de défis, les battles sont faites pour toi ! Tu peux t'inscrire à des battles prédéfinies ou chercher des adversaires en te mettant d'accord sur les contraintes ou le thème que vous voulez faire ! </p>
    <a class="arrow arrow-prev" href="#target-item-1"></a>
    <a class="arrow arrow-next" href="#target-item-3"></a>
  </div>
  <div class="carousel-item item-3">
    <h2>Suivez-nous sur nos réseaux sociaux !</h2>
    <p><a href="https://www.facebook.com/artdesign.forum/" target="_blank" title="Facebook" class="facebook">Facebook</a> et <a id="Instagram" title="Instagram" target="_blank" href="https://www.instagram.com/artdesign.forum/">Instagram</a>  !<br /> Rejoignez-nous sur le <a href="https://discord.gg/NzABT9W" target="_blank" title="Discord" class="discord">Discord</a> ☺</p>
    <a class="arrow arrow-prev" href="#target-item-2"></a>
    <a class="arrow arrow-next" href="#target-item-4"></a>
  </div>
  <div class="carousel-item item-4">
    <h2>Ils nous aident</h2>
    <div class="ADhelp"><center><a href="/u1" class="js-replace-avatar"><img class="useravatar" /><span style="left: 115px;"><strong>Blake</strong><br /><em>◆ Aide-Concours ◆</em></span></a> <a href="/u3" class="js-replace-avatar"><img class="useravatar" /><span style="left: 115px;"><strong>Pizi</strong><br /><em>◆ Aide-Concours ◆</em></span></a><br/><br /><br />
      <a href="/u4" class="js-replace-avatar"><img class="useravatar" /><span><strong>SKAB</strong><br /><em>◆ Professeur Photofiltre ◆</em></span></a> <a href="/u5" class="js-replace-avatar"><img class="useravatar" /><span><strong>Elewings</strong><br /><em>◆ Professeur Photoshop ◆</em></span></a> <a href="/u1" class="js-replace-avatar"><img class="useravatar" /><span><strong>Celest'</strong><br /><em>◆ Professeur Photoshop ◆</em></span></a><br />
      </center></div>
    <a class="arrow arrow-prev" href="#target-item-3"></a>
    <a class="arrow arrow-next" href="#target-item-1"></a>
  </div>
</div>
        <div class="ADfriends"><a target="_blank" href="http://www.letempsdunrp.com/">Le temps d'un RP</a><br /><a target="_blank" href="http://www.walkingdead-rpg.com/">Walking Dead RPG</a><br />  <a target="_blank" href="https://wyvartem.fr/">Wyvartem</a><br /><a target="_blank" href="https://cocktail-graph.forumactif.com/">Cocktail Graph</a><br /> <a target="blank" href="https://www.worldanim.net/home">World Anim</a><br /><a target="blank" href="https://referencium.forumactif.com/">Référencium</a><br /><a href="https://la-vitrine.forumactif.com/" target="_blank">La Vitrine</a></div>
    <div class="ADwinners"><a href="http://art-design.forumactif.fr/t1200-poupees-russes-p-17" target="blank">Concours du Mois n° 120<span>Blake<br /><img src="https://zupimages.net/up/21/02/ps91.png" width="200px;" /></span></a><br />
    <a href="http://art-design.forumactif.fr/t2854-galerie-de-serah" target="blank">One Pack Challenge 6<span class="OPC">Serah<br /><img src="https://nsa40.casimages.com/img/2021/01/30/210130113906363456.png" width="200px;" /></span></a></div>
    </div>
  </body>

</html>
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
Toute copie totale ou partielle est interdite.
▸ Version 174 par Deer. ▵ Codage par Pizi, Khaym, Memories et Serah