epsilon
forum de libre service de codage,
possibilité de commander des designs,
aucune inscription
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment : -31%
Jabra Elite 65t à 59€ + 4,98€ de ...
Voir le deal
59 €
-30%
Le deal à ne pas rater :
JBL LIVE 300TWS – Écouteurs intra-auriculaires sans fil
105 € 149 €
Voir le deal

Sherlock
Sherlock
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
RENDU:
Page d'accueil 03 — THE COMPASS POINTS NORTH C34t

page d'accueil #05

— Hope is missing —
Fiche technique
Version(s) des navigateurs : Chrome, Mozilla, Safari, Brave.
Dimensions : 960px de large et 200px de haut.
Version(s) du forum : Toutes les versions.
Couleurs proposées :
#131d34; /* bleu foncé presque noir */
#3e4658; /* bleu tirant sur le gris */
#8594a6; /* bleu clair */
rgba(19, 29, 52, 0.9); /* la 1ère couleur bleu foncé avec une opacité)
 #f1f1f1; /* couleur blanche de la font */
Police(s) utilisée(s) : Playfair Display SC & Roboto Condensed
Effet(s) particulier(s) : Hover sur les liens + quand on clique sur un staffeux, son nom s'affiche.
Images : Les icônes de GoT peuvent être changées : https://saturnicons.suiomi.com/

Autre(s) détail(s)
Les codes sont disponibles uniquement dans une page HTML pour une meilleure optimisation et être disponible sur toutes les versions ainsi que tous les navigateurs. Ça inclue le HTML, le CSS et le JavaScript (pour les onglets du staff).

Les images s'adaptent toutes automatiquement.
Me créditer n'est pas une option.
Sherlock | www.


Sherlock
Sherlock
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
Page HTML :

Code:
<meta charset="utf-8" /><link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet" /><link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC&family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet" />
<div class="TCPN_pa_blockgeneral">
      
   <div class="TCPN_pa_blockcontext">
          <img src="https://via.placeholder.com/240x70" />   
      <div>
          Chapitre 1
      </div>
           
      <p>
          Suspendisse tempus pretium urna. Proin tincidunt luctus fermentum. Donec facilisis luctus porta. Donec arcu nulla, rhoncus vel nisi sit amet, varius fermentum leo. Phasellus consequat auctor arcu, vel vehicula ex convallis a. Ut tempus, risus nec aliquet elementum, odio ante porta nisl, quis rutrum lorem nibh sit amet eros. Vivamus pretium vehicula lorem quis vestibulum. Pellentesque commodo massa in velit iaculis, ut ultricies tellus rhoncus. Fusce id ipsum et velit tincidunt molestie. Pellentesque vitae justo finibus, mattis dolor vel, auctor ex. Cras consequat lectus in massa porta, nec convallis risus vehicula. Nam nec nulla condimentum, auctor mi venenatis, euismod felis. In sollicitudin felis non tortor hendrerit aliquet.
      </p>
         
   </div>
      
   <div class="TCPN_pa_background">
           
      <div class="TCPN_pa_backgroundinfo">
                
         <div class="TCPN_pa_blockgauche">
                     
            <div class="TCPN_pa_blocklien">
                          
               <div>
                   <a target="_blank" href="URL">Règlement</a>
               </div>
                          
               <div>
                   <a target="_blank" href="URL">Annexes</a>
               </div>
                          
               <div>
                   <a target="_blank" href="URL">Zone invitée</a>
               </div>
                          
               <div>
                   <a target="_blank" href="URL">Questions & réponses</a>
               </div>
                          
               <div>
                   <a target="_blank" href="URL">Bottins</a>
               </div>
                          
               <div>
                   <a target="_blank" href="URL">Partenariat</a>
               </div>
                        
            </div>
                     
            <div class="TCPN_pa_topsite">
                         <span class="sf sf-tyrell"></span><span class="sf sf-targaryen"></span><span class="sf sf-martell"></span>       
            </div>
                      <select onchange="location=this.value" class="TCPN_pa_partenaires">
          <option selected="selected">partenaires particuliers</option>
          <option value="http://">NOM FORUM</option>
          <option value="http://">NOM FORUM</option>
          <option value="http://">NOM FORUM</option>
        </select>       
         </div>
                
         <div class="TCPN_pa_blockdroite">
                     
            <div class="TCPN_pa_blockmembres">
                          
               <div style="background-image:url('https://via.placeholder.com/70x75');width:70px;height:75px;background-size: cover;border:2px #BCCBD8 solid;margin-right:10px;" onclick="openCity('Grp1')">
                  
               </div>
                          
               <div style="background-image:url('https://via.placeholder.com/70x75');width:70px;height:75px;background-size: cover;border:2px #BCCBD8 solid;" onclick="openCity('Grp2')">
                  
               </div>
                          
               <div class="TCPN_pa_blockpseudo">
                               
                  <div id="Grp1" class="TCPN_pa_pseudo">
                                    
                     <div>
                         Pseudo du staffeux 1 — Rôle
                     </div>
                                  
                  </div>
                               
                  <div id="Grp2" class="TCPN_pa_pseudo" style="display:none">
                                    
                     <div>
                         Pseudo du staffeux 2 — Rôle
                     </div>
                                  
                  </div>
                             
               </div>
                        
            </div>
                     
            <div class="TCPN_pa_blocknews">
                           <span style="padding-left:5px;color:#f1f1f1;font: 13px 'Playfair Display SC', serif;font-style:italic;">29 Mars </span> : Une news ici plus ou moins longue, enfin bref vous écriver ce que vous voulez sur la longueur que vous voulez, c'est pas gênant et en plus ça scroll.<br />          <span style="padding-left:5px;color:#f1f1f1;font: 13px 'Playfair Display SC', serif;font-style:italic;">29 Mars </span> : Une news ici<br />          <span style="padding-left:5px;color:#f1f1f1;font: 13px 'Playfair Display SC', serif;font-style:italic;">29 Mars </span> : Une news ici<br />          <span style="padding-left:5px;color:#f1f1f1;font: 13px 'Playfair Display SC', serif;font-style:italic;">29 Mars </span> : Une news ici<br />         
            </div>
                     
            <div class="TCPN_pa_predefini">
                          
               <div>
                   <img src="https://via.placeholder.com/50x60" />
               </div>
                          
               <div>
                   <img src="https://via.placeholder.com/50x60" />
               </div>
                          
               <div>
                   <img src="https://via.placeholder.com/50x60" />
               </div>
                          
               <div>
                   <img src="https://via.placeholder.com/50x60" />
               </div>
                          
               <div>
                   <img src="https://via.placeholder.com/50x60" />
               </div>
                          
               <div>
                   <img src="https://via.placeholder.com/50x60" />
               </div>
                        
            </div>
                   
         </div>
              
      </div>
         
   </div>
     <style>.TCPN_pa_blockgeneral {
  width: 960px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 0 auto;
}

.TCPN_pa_blockcontext {
  width: 250px;
  height: 200px;
  border-bottom: 1px #131d34 solid;
}

.TCPN_pa_blockcontext img {
  width: 240px;
  height: 70px;
  object-fit: cover;
  border: 5px #3e4658 solid;
}

.TCPN_pa_blockcontext > div {
  width: 240px;
  margin: 10px auto;
  height: 20px;
  background-color: #131d34;
  font: 20px "Playfair Display SC", serif;
  color: #8594a6;
  line-height: 0;
}

.TCPN_pa_blockcontext p {
  width: 230px;
  margin: 0 auto;
  height: 70px;
  text-align: justify;
  color: #111;
  font: 12px "Roboto Condensed", sans-serif;
  overflow: auto;
}

.TCPN_pa_background {
  background-image: url("https://zupimages.net/up/21/03/h5jg.png");
  width: 700px;
  height: 200px;
}

.TCPN_pa_backgroundinfo {
  background-color: rgba(19, 29, 52, 0.9);
  width: 690px;
  height: 190px;
  margin: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.TCPN_pa_blockgauche {
  width: 280px;
  height: 170px;
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
}

.TCPN_pa_blocklien {
  width: 200px;
  height: 142px;
}

.TCPN_pa_blocklien > div {
  width: 170px;
  height: 12px;
  padding: 5px;
  background-color: #bccbd8;
  color: #131d34;
  margin: 0px 0 2px 0;
  font: 11px "Roboto Condensed", sans-serif;
  border-right: 20px #3e4658 solid;
  transition: width 2s, height 2s, background-color 2s, transform 2s;
  text-transform: lowercase;
}

.TCPN_pa_blocklien > div a {
  color: #fff;
  text-decoration: none;
}

.TCPN_pa_blocklien > div:hover {
  border-left: 20px #bccbd8 solid;
  background-color: #131d34;
  color: #bccbd8;
  text-align: right;
  transition: width 2s, height 2s, background-color 2s, transform 2s;
  border-right: none;
}

.TCPN_pa_topsite {
  width: 80px;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
}

.sf-tyrell {
  width: 80px;
  font-size: 40px;
  margin: 5px 0 0 25px;
  color: #bccbd8;
}

.sf-targaryen {
  width: 80px;
  font-size: 40px;
  margin: 5px 0 0 25px;
  color: #bccbd8;
}

.sf-martell {
  width: 80px;
  font-size: 40px;
  margin: 5px 0 0 25px;
  color: #bccbd8;
}

.TCPN_pa_partenaires {
  margin-top: 10px;
  background-color: #3e4658;
  width: 280px;
  height: 20px;
  border-left: 20px #bccbd8 solid !important;
  border-top: none;
  border-bottom: none;
  border-right: none;
  color: #bccbd8;
  font: 11px "Roboto Condensed", sans-serif;
  padding: 2px;
  text-transform: lowercase;
}

.TCPN_pa_blockdroite {
  width: 380px;
  height: 170px;
  margin: 10px 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.TCPN_pa_blockmembres {
  width: 160px;
  height: 90px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.TCPN_pa_blockpseudo {
  width: 160px;
  height: 20px;
  margin-top: 5px;
}

.TCPN_pa_blockpseudo > div {
  font: 10px "Roboto Condensed", sans-serif;
  text-align: center;
  color: #fff;
  height: 20px;
  line-height: 20px;
  background-color: #8594a6;
}

.TCPN_pa_blocknews {
  width: 190px;
  height: 100px;
  border-left: 5px #3e4658 solid;
  font: 12px "Roboto Condensed", sans-serif;
  color: #f1f1f1;
  overflow: auto;
  text-align: justify;
  padding-left: 10px;
}

.TCPN_pa_blocknews > div {
  font: 15px "Playfair Display SC", serif;
  color: #f1f1f1;
  padding: 10px;
}

.TCPN_pa_predefini {
  width: 380px;
  margin-top: 9px;
  display: flex;
  justify-content: space-between;
}

.TCPN_pa_predefini > div img {
  width: 50px;
  height: 60px;
  object-fit: cover;
  border: 2px #8594a6 solid;
  margin: 0 5px 0 0;
}
            </style>                        <script>function openCity(cityName) {
  var i;
  var x = document.getElementsByClassName("TCPN_pa_pseudo");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(cityName).style.display = "block";
}
            </script>
</div>

iFrame à coller dans vos généralités :

Code:
<center>
   <iframe style="width: 1000px; height: 210px; border: 0px; margin-top:0px" src="URL DE VOTRE PAGE HTML"> </iframe>
</center>
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum