Avada KedagraphConnexion

description[en pause, phase de conceptualisation du projet en cours] Myths of Shadows - MOS - Alpha Kombo

more_horiz
Myths of Shadows

Le type du code :

- QEEL
- PA
- Navigation
- Catégorie
- Listing des sujets

Largueur forum = 800px.

Indication pour Navigation:
Sur toute la largeur, sans effet spéciaux, propre, net, comme forum d'exemple (en bas).

Le schéma PA:



Le schéma catégorie:



QEEL:



Acceptez-vous que le code soit mis en LS sur AK ? Vous avez le droit de dire non, mais le partage c'est beau ! Je peux également le poster en LS à retardement, genre dans 1 ou 2 mois pour que vous gardiez l'exclusivité pour votre MAJ et ensuite, quand il n'est plus utilisé, le laisser à la disposition d'autres Smile Sachant que mon idée est "inédite", j'ai pas trop envie que l'idée se repende et vole la vedette. Donc non.

Les éléments : Textes/url/couleur/images/police ... N'hésitez pas à écrire vos dimensions et tout ce qui m'aidera à intégrer.

#505164
   
#a3deec

   
#285daf
     #a3deec
    #8ea3a4
   

   
 
#65c0d9

   #a3deec
    #8ea3a4

 
Un lien vers votre forum/site/Autre: (en hide)
Autre chose? Si vous avez besoin de plus d'info etc, je vous laisse aussi l'URL d'un fo' qui a fermé dont j'ai envie de m'inspirer pour le design. (en hide également)

fiche réalisée par laxy

descriptionRe: [en pause, phase de conceptualisation du projet en cours] Myths of Shadows - MOS - Alpha Kombo

more_horiz
Déjà, code pour navigation et PA Smile

CSS :

Code:

/* FONT FACE */
@font-face { /* title */
  font-family: 'Jim Nightshade';
  font-style: normal;
  font-weight: 400;
  src: local('Jim Nightshade'), local('JimNightshade-Regular'), url(https://fonts.gstatic.com/s/jimnightshade/v5/PlIkFlu9Pb08Q8HLM1PxmB0g-NS_XXuoa9xC.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face { /* sub title */
  font-family: 'Josefin Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Josefin Slab Regular'), local('JosefinSlab-Regular'), url(https://fonts.gstatic.com/s/josefinslab/v8/lW-5wjwOK3Ps5GSJlNNkMalnqg6vBMjoPg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* NAVIGATION - Jamy, sur AvadaKedagraph  */
a.mainmenu {
  color: #a3deec;
  font-family: time new roman;
  font-size: 14px;
  font-weight: 700;
}

a.mainmenu img {
    display: none;
}
/* FIN navigation */


/* arrêter soulignement des liens */
A:link {text-decoration: none !important;}
A:visited {text-decoration: none !important;}
A:active {text-decoration: none !important;}
A:hover {text-decoration: none !important;}



/* PA - Jamy, sur AvadaKedagraph */

/* enlever le fond de la PA & padding */
.forumline, .forumline .row1{
  padding:0px;
  background: #505164;
}

.pa{
  padding: 5px;
  color: #fff;
  width: 800px;
  box-sizing: border-box;
}
   
.pa h2{
  font-size: 50px;
  line-height: 40px;
  color: #285daf;
  font-family: 'Jim Nightshade', cursive;
  text-shadow: 1px 1px 1px black;
  margin: 0;
}

.fioriture{
  width: 63px;
}

.fioriture img{
  width: 100%;
  display: block;
}

/* liens importants */

.pa .important-link{
  margin: 0 0 20px;
  border-top: 1px solid grey;
  width: 80%;
  border-bottom: 1px solid grey;
}

.pa a.i-link{
  border-radius: 4px;
  color: #fff;
  font-family: 'Josefin Slab', serif;
  display: inline-block;
  margin: 4px;
  padding: 6px 10px;
  transition: .5s;
  font-size: 16px;
}

.pa a.i-link:hover{
  background: #808080;
  transition: 0.5s;
}


.pa h3{
  font-size: 25px;
  color: #65c0d9;
  margin: 0;
  font-family: 'Josefin Slab', serif;
}
 
.pa .content{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
   
   
/* COL 1 : staff + PV-scéna */

.pa .first{
  box-sizing: border-box;
  width: 297px;
  /* border: 1px solid red; */
}

.pa .staff p{
  display: inline-block;
  position:relative;
  width: 80px;
  height: 80px;
  overflow: hidden;
  transition: 1s;
  /* border:1px solid green; */
  margin: 0;
  padding-top:20px;
}

.pa .staff p img{
  position: absolute;
  top: 0;
  left:0;
}

.pa .staff p:hover img{
  top:-100px;
  transition: 1s;
}

.pa .s-pv{
  margin: 10px 0;
  text-align:center;
}

.pa .s-pv a img{
  display: inline-block;
  width: 40px;
  height: 50px;
  transition: 0.5s;
}

.pa .s-pv a:hover img{
  border-radius: 10px;
  transition: 0.5s;
}

/* COL 2 : contexte */

.pa .content .mid{
  width:200px;
  height: 320px;
  overflow:hidden;
  /* border:1px solid red; */
  box-sizing: border-box;
}

.pa .content .mid img{
  width:200px;
  height: 320px;
  display: block;
  transition: 1s;
}

.pa .content .mid p{
  height: 300px;
  overflow: auto;
  text-align:justify;
  padding: 10px;
  box-sizing: border-box;
}

.mid:hover .context-img{
  margin-top:-320px;
  transition: 0.5s;
}


/* COL 3 : news + partner */

.pa .last{
  width: 224px;
  /* border: 1px solid red; */
}

.pa .news{
  height: 150px;
  overflow:auto;
}

.pa .news ul{
  padding-left: 10px;
  height: 100px;
  /* border: 1px solid green; */
  overflow: auto;
}


.pa .news ul li{
  list-style-type: none;
  text-align: left;
  font-size: 11px;
}

.pa .partner p{
  height: 145px;
  /* border: 1px solid orange; */
  overflow: auto;
  margin-bottom: 0;
}

/* END PA */



N'oublies pas d'enlever les images + CSS pour ton ancienne navigation.

HTML PA :

Code:

<div class="pa">
                                                            
   <h2>
                                    Bienvenue {USERNAME}                             
   </h2>
                      
   <div class="important-link">
                    <a href="#" class="i-link">Règlement</a> <a href="#" class="i-link">Groupes</a> <a href="#" class="i-link">Lieux</a>          <a href="#" class="i-link">Les bottins</a> <a href="#" class="i-link">Les PVs & scénarios</a>           
   </div>
                                                                    
   <div class="content">
                                                                           
      <div class="first">
                                                                
         <div class="staff">
                                                                                     
            <h3>
                                             le staff                             
            </h3>
                                                                                     
            <p>
                                                           <img src="http://via.placeholder.com/80x80" /> <br />              Pseudo                <br /> Dispo              <br /><a href="#">MP</a>                                         
            </p>
                                                                                                 
            <p>
                                                           <img src="http://via.placeholder.com/80x80" /> <br />              Pseudo                <br /> Dispo              <br /><a href="#">MP</a>                                         
            </p>
                                                                                                 
            <p>
                                                           <img src="http://via.placeholder.com/80x80" /> <br />              Pseudo                <br /> Dispo              <br /><a href="#">MP</a>                                         
            </p>
                               
            <p>
                                                           <img src="http://via.placeholder.com/80x80" /> <br />              Pseudo                <br /> Dispo              <br /><a href="#">MP</a>                                         
            </p>
                                                                                                 
            <p>
                                                           <img src="http://via.placeholder.com/80x80" /> <br />              Pseudo                <br /> Dispo              <br /><a href="#">MP</a>                                         
            </p>
                                                                                                 
            <p>
                                                           <img src="http://via.placeholder.com/80x80" /> <br />              Pseudo                <br /> Dispo              <br /><a href="#">MP</a>                                         
            </p>
                                                                           
         </div>
                                                                            
         <div class="s-pv">
                                                                                     
            <h3>
                                             Scénarii & PV                             
            </h3>
                                                                  <a href="#"><img src="http://via.placeholder.com/50x50" /></a>            <a href="#"><img src="http://via.placeholder.com/50x50" /></a>            <a href="#"><img src="http://via.placeholder.com/50x50" /></a>            <a href="#"><img src="http://via.placeholder.com/50x50" /></a>            <a href="#"><img src="http://via.placeholder.com/50x50" /></a>            <a href="#"><img src="http://via.placeholder.com/50x50" /></a>                                     
         </div>
                                                                                                            
      </div>
                                                                                   
      <div class="mid">
                                                     <img src="http://via.placeholder.com/200x320" class="context-img" />                       
         <p>
                                          Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker. Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.                             
         </p>
                                                                            
      </div>
                                                                     
      <div class="last">
                                                                                                    
         <div class="news">
                                                                                     
            <h3>
                                             news               
            </h3>
                                                 
            <ul>
                                                  
               <li>
                                    <strong>../../..</strong> tadam tadam                   
               </li>
                                                  
               <li>
                                    <strong>../../..</strong> tadam tadam                   
               </li>
                                                  
               <li>
                                      <strong>../../..</strong> tadam tadam                   
               </li>
                                                  
               <li>
                                    <strong>../../..</strong> tadam tadam                   
               </li>
                                                  
               <li>
                                      <strong>../../..</strong> tadam tadam                   
               </li>
                                                  
            </ul>
                                                                     
         </div>
                                                                                                          
         <div class="partner">
                                                                                     
            <h3>
                                             nos amis                             
            </h3>
                          <a class="more" href="">vous?</a>     
            <p>
                         <img src="http://via.placeholder.com/90x30" />              <img src="http://via.placeholder.com/90x30" />              <img src="http://via.placeholder.com/90x30" />              <img src="http://via.placeholder.com/90x30" />              <img src="http://via.placeholder.com/90x30" />  <img src="http://via.placeholder.com/90x30" />              <img src="http://via.placeholder.com/90x30" />                 
            </p>
                                                                                                                       
         </div>
                                                                    
      </div>
                                                     
   </div>
</div>


Je planche sur le QEEL à présent Smile
reply Répondre avec l'éditeur complet.
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum