Partagez|

[CREAPHY] Code de Présentation #1

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 Présentation #1 Sam 6 Juin - 20:45


CSS
Code:
/**FICHE DE PRESENTATION #1
PYPHILIA @CREAPHY.OLYMPE.IN
**/

#fiche_bs {
  width:480px;
  margin:auto;
  text-align:center;
  font-size:11px;
  line-height:10.5px;
}

#fiche_bs h2 {
  font-size:37px;
  letter-spacing:-3px;
  text-transform:uppercase;
  font-family: 'Source Sans Pro';
  margin:13px 0;
}

#fiche_bs h3 {
  height:0;
  position:relative;
  margin:0;
  top:-7px;
  left:8px;
  font-size:18px;
  text-transform:uppercase;
  font-family:'Source Sans Pro';
}

#fiche_bs .gif {
  margin:auto;
  position:relative;
  width:390px;
  text-align:center;
}

#fiche_bs .gif img {
  width:370px;
  border:10px #ff005e  solid;
}

#fiche_bs .gif:before{
  content:'';
  display:block;
  position:absolute;
  top:23%;
  left:-60px;
  width: 0;
height: 0;
border-style: solid;
border-width: 60px 60px 60px 0;
border-color: transparent #ff005e transparent transparent;
 
}
#fiche_bs .gif:after{
  content:'';
  display:block;
  position:absolute;
  top:20%;
  right:-60px;
  width: 0;
height: 0;
border-style: solid;
border-width: 60px 0 60px 60px;
border-color: transparent transparent transparent #ff005e;
 
}

#fiche_bs .donnees {
  margin:auto;
  width:400px;
  text-align:left;
  position:relative;
}

#fiche_bs .donnees > div {
  display:inline-block;
  vertical-align:middle;
}

#fiche_bs .donnees > div.infos {
  width:152px;
  height:266px;
  background:rgba(255,255,255,0.5);
  border:1px #d581a0  solid;
  text-align:justify;
  padding:8px;
  margin:4px;
  box-sizing:border-box;
  overflow:auto;
  position:relative;
}

#fiche_bs .donnees div > div  {
  width:230px;
  background:rgba(255,255,255,0.5);
  border:1px #d581a0  solid;
  text-align:justify;
  padding:8px;
  margin:4px;
  box-sizing:border-box;
  overflow:auto;
  position:relative;
}

#fiche_bs .donnees div > .cara {
  height:85px;
  margin:4px 4px 12px;
}


#fiche_bs .donnees div > .story {
  height:160px;
 
}

#fiche_bs div > div.perso {
  background:rgba(255,255,255,0.5);
  border:1px #d581a0  solid;
  text-align:justify;
  padding:8px;
  margin:4px;
  box-sizing:border-box;
  height:120px;
  overflow:auto;
  width:320px;
}

#fiche_bs h3.perso_t {
  margin-top:8px;
}

#fiche_bs .icon {
  display:block;
  border: #ff005e 10px solid;
  position:absolute;
  left:79%;
  bottom:-1px;
  margin:5px;
}

#fiche_bs .icon:before {
  content:'';
  position:absolute;
  bottom:-10px;
  left:-35px;
  width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 85px 30px;
border-color: transparent transparent #ff005e transparent;
}

#fiche_bs .icon img {
 
  max-height:100px;
}

HTML
Code:
<div id="fiche_bs">
<h2>Nom Prénom</h2><div class="gif"><img src="http://i.imgur.com/EgAvThA.gif"/></div>
<div class="donnees"><h3>Infos</h3><div class="infos">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget sapien ac nisl accumsan aliquam vitae eget libero. Nulla id erat ultricies, varius metus ac, aliquam erat. Integer convallis ligula eu massa tincidunt, et sodales erat pulvinar. Duis a euismod augue. Aliquam interdum est id accumsan accumsan. Integer finibus ligula et quam lacinia, vel dapibus nisl tristique. Vivamus vel ex facilisis felis feugiat luctus. Ut accumsan at enim ut lacinia. Mauris efficitur ornare arcu, ac condimentum nisi bibendum quis. Fusce porta mi et gravida scelerisque. Praesent iaculis, enim eget bibendum elementum, purus ligula vestibulum leo, sed pulvinar augue enim nec velit. Duis fermentum malesuada consectetur. Etiam pulvinar sed mauris non elementum. Nunc fermentum tempus ipsum, nec rhoncus nisl condimentum nec. Integer accumsan non justo vitae tempus. </div><div><h3>Cara.</h3><div class="cara">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget sapien ac nisl accumsan aliquam vitae eget libero. Nulla id erat ultricies, varius metus ac, aliquam erat. Integer convallis ligula eu massa tincidunt, et sodales erat pulvinar. Duis a euismod augue. Aliquam interdum est id accumsan accumsan. Integer finibus ligula et quam lacinia, vel dapibus nisl tristique. Vivamus vel ex facilisis felis feugiat luctus. Ut accumsan at enim ut lacinia. Mauris efficitur ornare arcu, ac condimentum nisi bibendum quis. Fusce porta mi et gravida scelerisque. Praesent iaculis, enim eget bibendum elementum, purus ligula vestibulum leo, sed pulvinar augue enim nec velit. Duis fermentum malesuada consectetur. Etiam pulvinar sed mauris non elementum. Nunc fermentum tempus ipsum, nec rhoncus nisl condimentum nec. Integer accumsan non justo vitae tempus.

Proin varius consectetur odio in gravida. Nunc imperdiet enim vel nulla commodo, nec porttitor eros euismod. Proin auctor commodo magna. Praesent eget quam et odio aliquam blandit. Nam lobortis tristique libero eu fermentum. Quisque interdum, urna in ultrices convallis, arcu risus faucibus magna, gravida tincidunt turpis eros sed leo. Vivamus bibendum felis at erat tincidunt porta. Etiam tincidunt enim in augue tempor, et commodo purus tempor. Nam id iaculis dolor. Sed non elementum arcu. </div><h3>Story</h3><div class="story">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget sapien ac nisl accumsan aliquam vitae eget libero. Nulla id erat ultricies, varius metus ac, aliquam erat. Integer convallis ligula eu massa tincidunt, et sodales erat pulvinar. Duis a euismod augue. Aliquam interdum est id accumsan accumsan. Integer finibus ligula et quam lacinia, vel dapibus nisl tristique. Vivamus vel ex facilisis felis feugiat luctus. Ut accumsan at enim ut lacinia. Mauris efficitur ornare arcu, ac condimentum nisi bibendum quis. Fusce porta mi et gravida scelerisque. Praesent iaculis, enim eget bibendum elementum, purus ligula vestibulum leo, sed pulvinar augue enim nec velit. Duis fermentum malesuada consectetur. Etiam pulvinar sed mauris non elementum. Nunc fermentum tempus ipsum, nec rhoncus nisl condimentum nec. Integer accumsan non justo vitae tempus.

Proin varius consectetur odio in gravida. Nunc imperdiet enim vel nulla commodo, nec porttitor eros euismod. Proin auctor commodo magna. Praesent eget quam et odio aliquam blandit. Nam lobortis tristique libero eu fermentum. Quisque interdum, urna in ultrices convallis, arcu risus faucibus magna, gravida tincidunt turpis eros sed leo. Vivamus bibendum felis at erat tincidunt porta. Etiam tincidunt enim in augue tempor, et commodo purus tempor. Nam id iaculis dolor. Sed non elementum arcu. </div></div><h3 class="perso_t">Perso.</h3><div class="perso">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget sapien ac nisl accumsan aliquam vitae eget libero. Nulla id erat ultricies, varius metus ac, aliquam erat. Integer convallis ligula eu massa tincidunt, et sodales erat pulvinar. Duis a euismod augue. Aliquam interdum est id accumsan accumsan. Integer finibus ligula et quam lacinia, vel dapibus nisl tristique. Vivamus vel ex facilisis felis feugiat luctus. Ut accumsan at enim ut lacinia. Mauris efficitur ornare arcu, ac condimentum nisi bibendum quis. Fusce porta mi et gravida scelerisque. Praesent iaculis, enim eget bibendum elementum, purus ligula vestibulum leo, sed pulvinar augue enim nec velit. Duis fermentum malesuada consectetur. Etiam pulvinar sed mauris non elementum. Nunc fermentum tempus ipsum, nec rhoncus nisl condimentum nec. Integer accumsan non justo vitae tempus.</div><span class="icon"><img src="http://i.imgur.com/8JL3Igk.gif"/></span></div>
<a href="http://creaphy.olympe.in">pyphi(lia)</a>
</div>
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

[CREAPHY] Code de Présentation #1

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

Sujets similaires

-
» Code de présentation de fiche liens
» Code de présentation de fiche RP
» Vidéos - générateur de code pour vidéo et player
» code pour inséré les anime (Fond transparent)
» manuel de code e-anim

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