Partagez|

[CREAPHY] Code de PA #4

Voir le sujet précédent Voir le sujet suivant Aller en bas

avatar

I am Pyphilia

Messages : 325
Points : 613
Date d'inscription : 03/02/2011
Age : 20

MessageSujet: [CREAPHY] Code de PA #4 Sam 14 Mar - 23:04


Ceci est une PA à 2 onglets.

PA
Code:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script><script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><link rel="stylesheet" type="text/css" href="boys_test.css" />
<div id="pa_any">
      <span id="1" class="onglets">▸ news & video</span> <span id="2" class="onglets active">▸ Staff & partenaires</span>      
 <div id="1" class="contenu">
      <span class="news"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span> <iframe src="https://www.youtube.com/embed/efK-S_R1tfk" allowfullscreen="" frameborder="0"></iframe>      
 </div>
          
 <div id="2" class="contenu active">
      <span class="staff"> <a href=""><span style="background-image:url(http://i.imgur.com/r7NBvUU.png)"></span></a> <a href=""><span style="background-image:url(http://i.imgur.com/oXlq2PC.png)"></span></a> <a href=""><span style="background-image:url(http://i.imgur.com/ucs7sSZ.png)"></span></a> <a href=""><span style="background-image:url(http://i.imgur.com/r7NBvUU.png)"></span></a> </span> <span class="part"> <a href=""><img src="http://i.imgur.com/YVsibb8.png" /></a> <a href=""><img src="http://i.imgur.com/YVsibb8.png" /></a> <a href=""><img src="http://i.imgur.com/YVsibb8.png" /></a> <a href=""><img src="http://i.imgur.com/YVsibb8.png" /></a> <a href=""><img src="http://i.imgur.com/YVsibb8.png" /></a> <a href=""><img src="http://i.imgur.com/YVsibb8.png" /></a> </span>      
 </div>
      <a class="credits" href="http://creaphy.olympe.in/">@pyphi(lia)</a>
</div>

CSS
Code:

/*PA BY PYPHI(LIA) @ CREAPHY*/

@font-face {
  font-family: 'Aguafina Script';
  font-style: normal;
  font-weight: 400;
  src: local('Aguafina Script Regular'), local('AguafinaScript-Regular'), url(http://fonts.gstatic.com/s/aguafinascript/v5/65g7cgMtMGnNlNyq_Z6CvJ6NrsdC0qWyfM-y9kwQ5jk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

#pa_any { /*PA*/
  padding: 0 25px;
  text-align: center;
  border-radius: 5px;
  font-family: arial;
  font-size: 12px;
  color: grey; }

  #pa_any .onglets { /*TITRES DES ONGLETS*/
    display: inline-block;
  margin-top:-20px;
    vertical-align: middle;
    width: 49.2%;
    height:35px;
    font-size: 34px;
    text-transform: lowercase;
  font-family:"Aguafina Script",cursive;
        -moz-transition: all 0.6s;
        -ms-transition: all 0.6s;
        -o-transition: all 0.6s;
        -webkit-transition: all 0.6s;
        transition: all 0.6s;
  opacity:0.5;
}

#pa_any .onglets:hover {
  cursor:crosshair;
  opacity:1;
  color:#3f4891;
}

#pa_any .onglets.active {
  color:#3f4891;
  opacity:1;
}
  #pa_any .contenu { /*BOITES DES CONTENUS*/
    display: none;
    background: #edf2f2;
    margin: 3px;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
    min-height: 200px;
    border-radius: 5px; }

    #pa_any .contenu.active {
      display: block; }

    #pa_any .contenu .news { /*NOUVEAUTES*/
      display: inline-block;
  padding-top:5px;
      vertical-align: top;
      width: 40%;
      margin-right: 40px;
      text-align: justify; }

    #pa_any .contenu iframe {
      width: 40%; }

    #pa_any .contenu .staff { /*STAFF*/
      display: inline-block;
      vertical-align: top;
      position: relative;
      width: 45%; }

      #pa_any .contenu .staff span {
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 2px 0;
        width: 35%;
        height: 100px;
        overflow: hidden;
        filter: grayscale(100%);
        background-size: 100%;
        background-position: center center;
        -moz-transition: all 0.6s;
        -ms-transition: all 0.6s;
        -o-transition: all 0.6s;
        -webkit-transition: all 0.6s;
        transition: all 0.6s;
}

        #pa_any .contenu .staff span:hover {
          filter: grayscale(0); }

    #pa_any .contenu .part { /*PARTENAIRES*/
      width: 54%;
  padding-top:10px;
      display: inline-block;
      vertical-align: top; }

      #pa_any .contenu .part img {
        width: 70px; }

  #pa_any .credits {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    font-family: arial; }
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

[CREAPHY] Code de PA #4

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» code pour inséré les anime (Fond transparent)
» manuel de code e-anim
» J'ai 2 code pour avoir 6 razoirs Shick Induition DÉJÀ DONNÉ
» Vidéos - générateur de code pour vidéo et player
» [Nocturne] Demande d'aide pour code css complet s'il vous plait.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Essai-Fond-Pyphilia :: Créaphy :: Codages-