AccueilAccueil  
  • PortailPortail  
  • RechercherRechercher  
  • Dernières imagesDernières images  
  • S'enregistrerS'enregistrer  
  • ConnexionConnexion  
    • Le Deal du moment : -29%
    PC portable – MEDION 15,6″ FHD Intel i7 ...
    Voir le deal
    499.99 €

    PA #1 :: Libre Service Codage :: Autre
     
    A-Delta LørdAdmin
    # PA #1Lun 19 Oct - 19:37
    Code:
    <style>

    .fondpa {
    width: 780px;
    height: 550px;
    margin: auto;
    padding : 10px;
    }

    .titre {
    margin-bottom: 20px;
        text-transform: uppercase;
        font-family: arial;
        font-size: 70px;
        color: #b5b5b5;
    }

    .titre span {
    color: #ff00ff;
    }

    .PA{
      display: grid;
      grid-gap: 20px;
    }

    .contextefond {
    width: 370px;
        height: 400px;
        background-image: url(https://media.discordapp.net/attachments/759819125387427840/759877549181370388/unknown.png);
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .contexte{
    width: 280px;
        height: 310px;
        margin: 25px;
        background: rgba(0, 0, 0, 0.7);
        text-align: justify;
        font-size: 10px;
        font-family: arial;
        line-height: 15px;
        color: lightgrey;
        padding: 20px;
        overflow: auto;
    }

    .contexte span {
    font-size: 23px;
        margin: 40px;
        letter-spacing: 10px;
        text-transform: uppercase;
    }

    .staffpa{
        width: 370px;
        height: 200px;
      grid-column: 3;
      grid-row: 1;
    }
    #PA-admins {
        display: grid;
        grid-template-rows: 2fr 1fr;
        grid-gap: 1em 0;
    }

    #PA-staff {
        display: grid;
        grid-template-rows: repeat(2,94px);
        grid-template-columns: repeat(2,179px);
        grid-gap: 1em;
    }

    .PA-admin:hover tooltip {
        display: block;
    }

    .PA-admin.first {
        background: url('https://zupimages.net/up/20/43/stz4.png');
    width: 175px;
    height: 90px;
    }

    .PA-admin.second {
        background: url('https://zupimages.net/up/20/43/8kso.png');
    width: 175px;
    height: 90px;
    }

    .PA-admin.third {
        background: url('https://zupimages.net/up/20/43/btnf.png');
    width: 175px;
    height: 90px;
    }

    .PA-admin.fourth {
        background: url('https://zupimages.net/up/20/43/btnf.png');
    width: 175px;
    height: 90px;
    }

    .staffpa p {
        position: absolute;
        margin: 10px;
        width: 135px;
        height: 50px;
        background: rgba(255, 255, 255, 0.6);
        text-align: center;
        padding: 10px;
        font-family: Arial;
        text-transform: uppercase;
        font-size: 13px;
        opacity: 0;
        -webkit-transition: all 0.55s linear;
    }
    .staffpa div:hover p {
    opacity:1;
    }

    .staffpa span {
    display: block;
        font-size: 10px;
        padding-bottom: 10px;
    }

    .staffpa p a {
        display: block;
        color: #ff00ff;
        text-decoration: none;
    }

    .parto{
    width: 370px;
        height: 50px;
        margin-top: -10px;
        text-align: center;
        grid-column: 1;
        grid-row: 2 / 5;
    }

    .parto img{
    width: 50px;
        height: 50px;
        padding: 5px;
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    }

    .parto img:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    }

    .predefini{
        grid-column: 3;
        grid-row: 2;
        width: 350px;
        height: 70px;
        text-align: center;
        margin-top: -210px;
        padding: 10px;
    }

    .predefini img{
        width: 55px;
        height: 55px;
        border-radius: 100%;
        border: solid 1px white;
        padding: 10px;
        margin: -5px 5px;
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    }

    .predefini img:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    }

    .boxnews {
    display:inline-block; vertical-align:top;
    background-color: purple;
        grid-column: 3;
        grid-row: 2;
        width: 370px;
        height: 150px;
        margin-top: -105px;
    }
    /* ACTUALITES PA */
    #news{
    margin-bottom:10px;
    width:370px; height:150px;
    }
    .news{
    width:370px; height:150px; text-align:left;
    }
    .news ul {
    position:relative; margin:0 auto;
    width:370px; height:150px; padding:0; overflow:hidden;
    font-size:0; line-height:0; white-space:nowrap;
    }
    .news ul li {
    position:relative; display:inline-block; vertical-align:top;
    width:100%; height:100%; overflow:hidden;
    line-height:normal; white-space:normal; font-size:10px; text-transform:uppercase;
    transition:all 0.35s linear; -webkit-transition:all 0.35s linear;
    }
    .news ul li img {
    width:370px; height:150px;
    }
    .news .nav{
    margin-top:-110px; margin-left:15px; width:20px; text-align:center; 
    font-size:0; line-height:0; text-align:center;
    }
    /* CARRES NAVIGATION ACTUALITES PA */
    .news .nav label {
    position:relative; display:inline-block; margin:3px 0;
    padding:9px; background: lightgrey;
    }
    .news .nav label:after {
    content:''; position:absolute; left:50%; top:50%; margin-left:-10px; margin-top:-10px;
    padding:10px; opacity:0;
    }
    .news .nav label:hover:after {
    opacity:1;
    }
    .news > input:nth-of-type(1):checked ~ .nav label:nth-of-type(1):after,
    .news > input:nth-of-type(2):checked ~ .nav label:nth-of-type(2):after,
    .news > input:nth-of-type(3):checked ~ .nav label:nth-of-type(3):after {
    opacity:1;
    }
    .news > input {
    display:none;
    }
    .news > input:nth-of-type(3):checked ~ ul li:first-of-type {
    margin-left:-200%;
    }
    .news > input:nth-of-type(2):checked ~ ul li:first-of-type {
    margin-left:-100%;
    }
    .news > input:nth-of-type(1):checked ~ ul li:first-of-type {
    margin-left:0%;
    }

    }
    </style> 
    <div class="fondpa">
                                                                                    
       <div class="titre">
                                                  Hellcome to <span>Rikers</span>                                       
       </div>
                                                                                    
       <div class="PA">
                                                                                               
          <div class="contextefond ">
                                                                  
             <div class="contexte">
                                            <span>Contexte</span>                   
                <div style="margin: 15px 0px 15px 0px; border-bottom : solid white 1px;">
                                                        
                </div>
                                    Il faudrait plutôt essayer de mettre un résumé ou un texte assez court ici pour donner l'idée générale et ensuite mettre un lien qui éventuellement redirige vers le contexte. Parce qu'il y a un scroll mais c'est quand même vachement plus sexy sans. Genre, je dirais que cette longueur rend bien.<br />Si besoin, je peux te rajouter une div pour que tu puisses mettre un lien like "plus par ici" à la fin du résumé, qui redirige vers le contexte dans sa globalité. Genre qu'il soit rose par exemple comme dans le titre, ou alors tu peux juste mettre une couleur normale en corps hexadécimale autour, ça fonctionne aussi/                   
             </div>
                                                                  
          </div>
                                                                                               
          <div class="staffpa">
                                                                
             <div id="PA-admins">
                                                                 
                <div id="PA-staff">
                                                                    
                   <div class="PA-admin first">
                                                <tooltip></tooltip>                       
                      <p style="">
                                                 Admin/Fonda<span>present</span><a href="https://rikersjsp.forumactif.com/spa/Miguel%20Galvez" target="_blank">MP</a>                       
                      </p><tooltip> </tooltip>                         
                   </div>
                                                                    
                   <div class="PA-admin second">
                                                <tooltip></tooltip>                       
                      <p style="">
                                                 Admin/Textes<span>present</span><a href="https://rikersjsp.forumactif.com/spa/Ares" target="_blank">MP</a>                       
                      </p><tooltip> </tooltip>                         
                   </div>
                                                                    
                   <div class="PA-admin third">
                                                <tooltip></tooltip>                       
                      <p style="">
                                                 Libre<span>absent</span><a href="..." target="_blank">MP</a>                       
                      </p><tooltip> </tooltip>                         
                   </div>
                                                                    
                   <div class="PA-admin fourth">
                                                <tooltip></tooltip>                       
                      <p style="">
                                                 Libre<span>absent</span><a href="..." target="_blank">MP</a>                       
                      </p><tooltip> </tooltip>                         
                   </div>
                                                                    
                </div>
                                                                   
             </div>
                                                              
          </div>
                                                                                               
          <div class="parto">
                                                       <a href="https://rikersjsp.forumactif.com/"><img src="https://zupimages.net/up/20/43/rd8o.png" /></a><a href="https://rikersjsp.forumactif.com/"><img src="https://zupimages.net/up/20/43/rd8o.png" /></a><a href="https://rikersjsp.forumactif.com/"><img src="https://zupimages.net/up/20/43/rd8o.png" /></a><a href="https://rikersjsp.forumactif.com/"><img src="https://zupimages.net/up/20/43/rd8o.png" /></a><a href="https://rikersjsp.forumactif.com/"><img src="https://zupimages.net/up/20/43/rd8o.png" /></a><a href="https://rikersjsp.forumactif.com/"><img src="https://zupimages.net/up/20/43/rd8o.png" /> </a>     
          </div><a href="https://rikersjsp.forumactif.com/">                                                                          </a>     
          <div class="predefini">
                   <a href="https://rikersjsp.forumactif.com/">                </a><a href="https://rikersjsp.forumactif.com/t12-predefinis-du-forum-les-detenus"><img src="https://zupimages.net/up/20/43/0ek1.png" /></a><a href="https://rikersjsp.forumactif.com/t10-predefinis-du-forum-les-employes"><img src="https://zupimages.net/up/20/43/0w6j.png" /></a><a href="https://rikersjsp.forumactif.com/t12-predefinis-du-forum-les-detenus"><img src="https://zupimages.net/up/20/43/l8bl.png" /></a><a href="https://rikersjsp.forumactif.com/t10-predefinis-du-forum-les-employes"><img src="https://zupimages.net/up/20/43/gmiq.png" /></a>             
          </div>
                                                                                                                                 
          <div class="boxnews">
                            
             <div id="news">
                               
                <div class="news">
                           <input type="radio" name="nav" id="nav_1" checked="" /><input type="radio" name="nav" id="nav_2" /><input type="radio" name="nav" id="nav_3" />       
                   <!--          3 ACTUALITES - IMAGES EN 500*150          -->       
                   <ul>
                                     
                      <!--          I          -->       
                      <li>
                                        
                         <!--          LIEN I          --><a href="https://rikersjsp.forumactif.com/" target="_blank">       
                            <!--          IMAGE I          --><img src="https://zupimages.net/up/20/43/qqda.png" /></a>       
                      </li>
                                     
                      <!--          II          -->       
                      <li>
                                        
                         <!--          LIEN II          --><a href="https://rikersjsp.forumactif.com/t25-intrigue-1-le-vide" target="_blank">       
                            <!--          IMAGE II          --><img src="https://zupimages.net/up/20/43/vfhu.png" /></a>       
                      </li>
                                     
                      <!--          III          -->       
                      <li>
                                        
                         <!--          LIEN III          --><a href="https://discord.gg/n5cex8" target="_blank">       
                            <!--          IMAGE III          --><img src="https://zupimages.net/up/20/43/zmxq.png" /></a>       
                      </li>
                                     
                   </ul>
                                  
                   <!--          NAVIGATION ACTUALITES          -->       
                   <div class="nav">
                                     
                      <div>
                                 <label for="nav_1"> </label><label for="nav_2"></label><label for="nav_3"></label>       
                      </div>
                                     
                   </div>
                                    
                </div>
                                 
             </div>
                                                                                          
          </div>
                         
       </div>
    </div>
    A-Delta Lørd
    en brefhttps://a-deltalord.forumgaming.fr
    Messages : 45
    Date d'inscription : 15/07/2016

    Permission de ce forum:
    Vous ne pouvez pas répondre aux sujets dans ce forum