Partagez|

[CREAPHY] Code Relations - Marques Pages

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 Relations - Marques Pages Mer 1 Jan - 1:09



NOTE: Ce code-là n'est pas particulièrement maniable, mais je le mets quand même n libre-service. Si besoin, je peux aider à changer les couleurs. Ce code s'installe obligatoirement avec un iframe depuis une page html d'un autre forum (Modules > Gestion des pages html). Envoyez-moi un mail pour plus de renseignements.

Sur le forum voulu
Code:
<iframe src="URL" style="border:none;height:520px;width:600px;"></iframe>

HTML
Code:
<meta charset="utf-8" /><style>
@import url(http://fonts.googleapis.com/css?family=Parisienne);
   #relation a, #relation a:hover {text-decoration:none !important;color:#56771e !important;}
   #relation {margin:30px auto;text-align:center;
font-family:arial;
   }
  
   #image {   background:url(http://img11.hostingpics.net/pics/467544wow.gif);
      height:200px;
      width:470px;
      margin:20px auto -30px auto;
      border:#c0d07b 0px solid;
      border-width:10px 15px;
      border-radius:7px 0px;
   }
   #name {font-size: 40px;
         font-family:'Parisienne';
         text-shadow:0 0 1px #56771e;
         color:#56771e;
         margin-bottom:5px;
         }
        
   #onglet{display:inline-block;
               vertical-align:middle;}
              
                    
         .bande {display:block;
               font-size: 21px;
               font-family:'Parisienne';
               width:130px;
               padding-right:10px;
               text-align:right;
               height:15px;
               margin:13px 0;
               line-height:15px;
               border-radius:0 0 0 50px;
               cursor:crosshair;
               color:#56771e;
               text-shadow:0 0 1px #56771e;
               }
  
   #box{   display:inline-block;
         vertical-align:middle;
         width:400px;
         height:150px;
         position:relative;}
  
      .boite {height:140px;
            width:380px;
            opacity:0;
            position:absolute;
            left:0;
            display:block;
            font:13px georgia;
            border-radius:12px 0px;
            color:#689024;
            opacity:1;
            overflow:auto;
            padding:5px 12px;}
            
         #un {background:#cfde93;}
         #deux {background:#c5de93;}
         #trois {background:#b8d38c;}
            
            .boite span {text-align:left;
                     display:block;}
            
            .boite span.gras {font-size:14px;
                     text-shadow: 1px 1px 0 white;
                     text-transform:uppercase;
                     letter-spacing:-1px;
                     word-spacing:10px;
                     text-align:center;
line-height:13px;
}
              
            .boite strong {color:#e7f0c4;
                        text-shadow:1px 1px 0px grey;}
            
            .boite img {padding:3px 5px;}
              
                  .story {font-size:33px !important;
                        font-style:italic;
                        font-family:'Parisienne';
                        float:right;
                        text-shadow: 1px 1px 0 white;
                        padding-right:20px;}

</style>
<div id="relation">
   
   <div id="image">
   </div>
   
   <div id="name">
       Nom Prénom
   </div>
   
   <div id="onglet">
       <span id="un" class="bande">Caractère</span> <span id="deux" class="bande">Looking for</span> <span id="trois" class="bande">Icones <span style="font-size:13px;">100*100</span></span>
   </div>
   
   <div id="box">
      
      <div id="un" class="boite">
          <span class="gras">Caractère Caractère Caractère Caractère Caractère Caractère Caractère</span><br /> <span><strong>XX</strong> années de vie<a href="URLDEPRESENTATION" class="story">My Story</a> <br />né(e) le <strong>date</strong><br />vit à <strong>ville/pays</strong><br /><strong>travaille/étudie</strong> actuellement <br />passionnée par <strong>XX</strong> <br />son <strong>♥</strong> est pris par <strong>XX</strong></span>
      </div>
      
      <div id="deux" class="boite" style="text-align:justify;line-height:11px;">
          <strong>UC</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor 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 style="color:green;">LIBRE</span><br /><br /><strong>UC</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor 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 style="color:green;">LIBRE</span><br /><br />
      </div>
      
      <div id="trois" class="boite">
          <img src="http://img15.hostingpics.net/pics/984134eunji.png" /><img src="http://img15.hostingpics.net/pics/562858eunji1.png" /><img src="http://img15.hostingpics.net/pics/591634eunji2.png" /><img src="http://img15.hostingpics.net/pics/474780eunji3.png" /><img src="http://img15.hostingpics.net/pics/193070eunji5.png" /><img src="http://img15.hostingpics.net/pics/858309eunji4.png" />
      </div>
      
   </div>
    <br /><br />
<div style="font-family:arial;font-size:9px;text-transform:uppercase;text-align:center;"><a style="text-decoration:none;color:rgba(0,0,0,0.5);" href="http://creaphy.olympe.in">@pyphi(lia)</a></div>
</div>
 <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><script type="">
$(document).ready(function (){
   $(".boite").not("#un").css({opacity:0, zIndex:"-1",});
  
      $("#onglet").on("click", ".bande", function () {
         var  $bande = $(this).attr("id");
         var $id = "#"+$bande;
         var $box = $("#box").find($id);
         var $otherbox = $("#box").find(".boite").not($box);
            $otherbox.animate({
               opacity:0,
               marginTop:"-5px",
               zIndex:0,
               }, 270);
            $box.animate({
               opacity:1,
               marginTop:"5px",
               zIndex:1,
               }, 270);
         }
      );
      
   });</script>


Dernière édition par Pyphilia le Mer 26 Nov - 10:52, édité 1 fois
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

avatar

I am Pyphilia

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

MessageSujet: Re: [CREAPHY] Code Relations - Marques Pages Mer 1 Jan - 1:34



NOTE : De nouveau, celui-ci est aussi peu maniable, à utiliser avec un iframe et une page html annexe. Aussi, il y a un léger bug qui fait apparaître des barre de défilement sous Chrome (peut-être sous d'autres, je n'ai pas essayé), mais je ne comprends pas pourquoi. Bon, si quelqu'un trouve, qu'il m'appelle !

HTML
Code:
<meta content="text/html; charset=utf-8" http-equiv="content-type" /> <style>
 @import url(http://fonts.googleapis.com/css?family=Parisienne);
 a, a:hover {text-decoration:none !important;color:#ae906d !important;}
 #relation {margin:130px auto;text-align:center;
 //border:1px black solid;
 }
 #box {height:400px;
 position:relative;
 z-index:444;
 //background:#ead5bd;
 background: radial-gradient(ellipse at center top, #f3e0a4, #fad762);
 width:250px;
 display:inline-block;
 vertical-align:bottom;
 font:20px georgia;
 letter-spacing:-2px;
 border-radius:12px 0px;
 color:#c7a645;
 }
 #box img {margin:12px 0;
 border:6px #e6c050 solid;
 box-shadow: 0 0 2px #e6c050;}
 
#onglet{display:inline-block;
 vertical-align:bottom;
 //border:1px blue solid;}
 
.perso {//border:1px blue solid;
 
transform-origin:100% 100%;
 transition:all 1s;
 -webkit-transition:all 1s;
 -moz-transition:all 1s;
 -o-transition:all 1s;
 -ms-transition:all 1s;}
 
.pair .name, .pair .content {background:#e6cc50;color:#b1851c;}
 .pair .name{text-shadow:0 0 1px #b1851c;}
 .impair .name, .impair .content {background:#d0cc63;color:#827f35;}
 .impair .name{text-shadow:0 0 1px #827f35;}
 
.name, .content {background:lightgrey;
 //border:1px red solid;
 }
 
.name {display:inline-block;
 vertical-align:top;
 font-size: 21px;
 font-family:'Parisienne';
 width:160px;
 padding-right:10px;
 text-align:right;
 height:15px;
 margin:0 0 -4px 0;
 line-height:15px;
 border-radius:0 0 0 50px;
 
}
 .name {cursor:crosshair;}
 
.content {position:absolute;
 opacity:0;
 vertical-align:top;
 background:lightgrey;
 width:200px;
 height:250px;
 padding:5px;
 font-family:times new roman;
 font-size:14px;
 text-align:justify;
 line-height:10px;
 overflow:auto;
 margin:-25px 0px 0px 25px;
 box-shadow:1px -2px 0px grey;
 border-radius:0 0 10px 0;
 
transform:rotate(90deg);
 -moz-transform:rotate(90deg);
 -webkit-transform:rotate(90deg);
 -o-transform:rotate(90deg);
 -ms-transform:rotate(90deg);
 z-index:-1;
 transition:all 1s;
 -webkit-transition:all 1s;
 -moz-transition:all 1s;
 -o-transition:all 1s;
 -ms-transition:all 1s;}
 
.content img {padding:5px;
 float:left;}
 
.perso.hovered {
 transform:rotate(-90deg);
 -moz-transform:rotate(-90deg);
 -webkit-transform:rotate(-90deg);
 -o-transform:rotate(-90deg);
 -ms-transform:rotate(-90deg);
 transform-origin:0% 100%;
 -ms-transform-origin:0% 100%;
 -moz-transform-origin:0% 100%;
 -o-transform-origin:0% 100%;
 -webkit-transform-origin:0% 100%;
 margin-bottom:-200px;
 margin-top:200px;
 margin-left:-32px;
 }
 .content.hovered{opacity:1;}
 

</style>
<div id="relation">
 
<div id="onglet">
 
<div class="perso pair">
 <span class="name">Nom Prénom</span><span class="content"><a href="URLDUPROFIL"><img style="width: 175px;" src="http://img11.hostingpics.net/pics/729579btobirr.gif" /></a>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor 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>
</div>
 <br />
<div class="perso impair">
 <span class="name">Nom Prénom</span><span class="content"><a href="URLDUPROFIL"><img style="width: 175px;" src="http://img11.hostingpics.net/pics/729579btobirr.gif" /></a>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor 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>
</div>
 <br />
</div>
 
<div id="box">
 <img style="width: 200px;" src="http://img15.hostingpics.net/pics/212909bounce.gif" /> <img style="width: 200px;" src="http://img15.hostingpics.net/pics/240826bounce2.gif" /><br /> ► Citation <br />
<div style="font-family:arial;font-size:9px;text-transform:uppercase;text-align:center;"><a style="text-decoration:none;color:rgba(0,0,0,0.5);" href="http://creaphy.olympe.in">@pyphi(lia)</a></div>
</div>
 
</div>
 <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> <script>
 $(document).ready(function (){
 
$("#onglet").on("click", ".perso", function () {
 var  $perso = $(this);
 var  $content = $(this).find(".content");
 $perso.toggleClass("hovered");
 $content.toggleClass("hovered");
 }
 )
 });
 </script>
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

[CREAPHY] Code Relations - Marques Pages

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

Sujets similaires

-
» photo non copiable
» 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

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