LS For Everyone
LS for everyone

Forum de Libre Service - Codage et Graphisme


    Pages d'accueil sans iframe

    Partagez
    avatar
    Adèlys
    Admin

    Messages : 32
    Date d'inscription : 08/03/2018

    Pages d'accueil sans iframe

    Message par Adèlys le Ven 13 Avr - 10:52


    Le CSS :

    Code:
    /* ---------- PA --------- */

    .corPA {
      width:1000px;
      background-color:white;
      padding:0;
      margin-left:auto;
      margin-right:auto;
      border:1px solid grey;
      margin-left:-5px;
    }

    .titPA {
      text-transform:uppercase;
      font-size:15px;
      font-style:italic;
      color:grey;
      font-family:Arial;
      font-weight:bold;
      text-decoration:none!important;
      transition:all 0.65s linear;
    }

    .titPA:hover {
      color:lightpink;
      text-decoration:none!important;
    }

    .imgPA {
      margin:0;
      width:98%;
      background-size:cover!important;
      height:50px;
      text-align:center;
      padding:10px;
    }

    .imgPA span {
      color:white;
      font-family:'Oleo Script',cursive;
      font-size:30px;
    }

    .corprin {
    padding:10px;
    width:100%;
    text-align:center;}

    .princPA {
      text-transform:uppercase;
      font-family:Arial;
      font-weight:bold;
      color:lightpink;
      font-size:25px;
    }

    .princorPA {
      margin-top:-20px;
      width:60%;
      margin-left:auto;margin-right:auto;
      border:2px solid lightpink;
      margin-bottom:10px;
      border-radius:30px;
      text-align:justify;
      padding:2%;
      color:black;
      font-family:Arial;font-size:12px;
      border-top:none!important;
    }

    .nouvPA {
      padding:5px 10px;background-color:lightpink;
      border-radius:25px; color:white; font-weight:bold;
      font-size:12px;font-family:Arial;
    }

    /* --------- FIN PA ---------- */

    Le code :

    Code:
    <link href="https://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet" />
    <div class="corPA">
                  
       <div class="imgPA" style="background:url('https://i.pinimg.com/564x/cc/0d/6f/cc0d6ff4338f318973735fa9e0a6394c.jpg') no-repeat;">
              <br />    <span>Titre du forum</span>     
       </div>
                  
       <div class="corprin">
                      <a href=LIEN UTILE 1" class="titPA">Titre du lien utile 1</a> • <a class="titPA" href="LIEN UTILE 2">Titre du lien utile 2</a> • <a href="LIEN UTILE 3" class="titPA">Titre du lien utile 3</a> • <a href="LIEN UTILE 4" class="titPA">Titre du lien utile 4</a>    <br /><br />    <span class="princPA">Principe/Contexte du forum</span>   
       </div>
                    
       <div class="princorPA">
                  Ici vous expliquez le principe/Le contexte.
       </div>
                    
       <div class="corprin">
                  <span class="nouvPA">Nouveauté 1<a href="Lien vers la nouveuté">ici</a></span>     
       </div>
                  
    </div>

      La date/heure actuelle est Mer 19 Sep - 7:52


      Partenaires