Partagez | 
 

 PA (1)

Aller en bas 
AuteurMessage
Azuriel
Admin
avatar

Messages : 254
Date d'inscription : 05/03/2016

MessageSujet: PA (1)   Sam 27 Jan - 20:51

Exemple de rendu :
Spoiler:
 
Code:
  .credou {
    color: grey;
    font-size: 11px;
    height: 14px;
    margin: 45px;
    position: relative;
}
.credou a {
    color: #d09f01!important;
    text-decoration: none;
}
.partenaires_pa {
    background-color: #000;
    background-image: url(https://www.textures.com/system/gallery/photos/Landscapes/Skies%20Partial/19586/Skies0258_2_download600.jpg);
    left: 0;
    margin: -59px auto 0;
    position: relative;
    width: 1001px;
}
.hoverparto {
    display: inline-block;
    height: 40px;
    padding: 10px;
    width: 40px;
}
.noireuh {
    height: 70px;
    margin: 90px 5px 5px 32px;
    width: 970px;
}
#boutons_vote_pa {
    display: block;
    text-align: center;
    margin-top:20px;
    position:relative;
    width: 219px;
    float: right;
}
.etwal2 {
    float: right;
    height: 0;
    margin-right: 100px;
    margin-top: 0;
    position: relative;
    top: -83px;
    width: 0;
}
.predefinis {
    right: 45px;
    position: absolute;
    top: 300px
}
.predefini {
    width: 50px;
    height: 50px;
    padding: 10px;
    display:inline-block;
    margin:10px;
}
.hover_predef{
  position: absolute;
  min-width:40px;
  margin-left:15px;
  margin-top:-10px;
  background-color:#f5edd5;
  border:1px solid #d09f01;
  padding:3px 5px;
  height:15px;
  color:#d09f01;
  opacity:0;
  transition:all 900ms;
}
.predefini:hover .hover_predef{
  opacity: 0.8;
}
.hover_predef_text{
  text-align:center;
  font-size:10px;
  font-family:'Roboto';
  font-style:italic;
  text-transform:uppercase;
}
.lesrectangles {
margin:5px;
display:inline-block;
float:right;
  text-align:justify;
  position:relative;
}
.authors {
  height:15px;
  width: 200px;
  border: solid 5px #9E5423;
}
.colorinside1 {
  height:15px;
  width: 80px;
  background-color: #9E5423;
  text-align:justify;
}
.colorinside1 span {
  color:white;
  font-size:15px;
  font-family:Economica;
}
.colorinside2 span {
  color:white;
  font-size:15px;
  font-family:Economica;
}
.colorinside3 span {
  color:white;
  font-size:15px;
  font-family:Economica;
}
.colorinside4 span {
  color:white;
  font-size:15px;
  font-family:Economica;
}
.creations {
  height:15px;
  width: 200px;
  border: solid 5px #87262A;
  margin-top:5px;
}
.colorinside2 {
  height:15px;
  width: 160px;
  background-color: #87262A;
}
.indep {
  height:15px;
  width: 200px;
  border: solid 5px #3B4B8C;
  margin-top:5px;
}
.colorinside3 {
  height:15px;
  width: 150px;
  background-color: #3B4B8C;
  text-align:justify;
}
.colorinside4 {
  height:25px;
  width: 40px;
  background-color: #388553;
  text-align:justify;
}
.colonne_milieu_pa {
    display: inline-block;
    float: left;
    height: 165px;
    width: 330px;
    position: relative;
  z-index:99;
}
#rotator1492882490182 {
    height: 165px;
    width: 330px;
}
#rotator1492882490182 a {
    border-radius: 5px;
    margin-left: -155px;
    position: absolute;
}
#rotator1492882490182 img {
  height: 165px;
  width:330px;
}
.clear {
  clear: both;
}
.endu {
  display:inline-block;
  float:right;
  margin-top:25px;
}
.jambon {
  background-color: white;
  border: solid 1px lightgrey;
  width: 558px;
  height: 100px;
  display: inline-block;
  left: 5px;
  float: left;
  position: relative;
}
.infobulle{
position:relative;
display:inline-block;
width:70px;
height:70px;
vertical-align: middle;
margin-top: 15px;
margin-left: 10px;
border-radius: 50%;
background-color: black;
border: solid 1px #d09f01;
}
.infobulle img{
  border-radius:100%;
  height:70px;
  width:70px;
}
.infobulle .ici{
position:absolute;
top:0px;
left:0px;
z-index:2;
width:70px;
height:70px;
opacity:0;
visibility: hidden;
background:rgba(200, 200, 200, 0.5);
border-radius:100%;
transition: all 1s;
}
.infobulle:hover .ici{
opacity:1;
visibility: visible;
}
.staff_pseudo {
    text-align: center;
    font-size: 11px;
    font-family: 'Roboto';
    font-style: italic;
    text-transform: uppercase;
    margin-top:20px;
    color: black;
}
.staff_text {
    color: black;
    font-family: 'Open Sans Condensed', serif;
    font-size: 9px;
    text-align: center;
    margin-left: 0px;
}
  #cadrouh {
    background-color:white;
    width:1000px;
    height:700px;
    position:relative;
  }
  .contexte {
    width: 510px;
    height: 150px;
    background: #eaeaea;
    float: left;
    padding: 25px;
    padding-top: 15px;
    padding-bottom: 35px;
    text-align: justify;
    font-size: 11px;
    line-height: 12px;
    margin:5px;
    font-family: 'Times New Roman';
    color: #0f0f0f;
}
.contexte p {
    color: #0f0f0f;
    font-size: 12px;
    font-weight: bold;
    line-height: 12px;
    margin: 5px;
    text-align: justify;
    font-family: 'Poiret One';
    text-transform:uppercase;
}
.contexte span {
    font-family: vibur;
    text-transform: uppercase;
    color:#d09f01;
    font-size:25px;
    text-align:justify;
}
.linku {
  text-align:center;
  margin-top:15px;
  color:lightgrey;
}
.banniereuh {
  height:678px;
  display:inline-block;
  float:left;
  width:420px;
  background-color:pink;
  background-image:url('http://via.placeholder.com/420x678');
  margin:5px;
}
.news_credits {
    width: 190px;
    display: inline-block;
    vertical-align: top;
    margin-top: 42px;
    margin:5px;
}
.news {
    background-color: #eaeaea;
    color: #181818;
    padding: 5px;
    font-size: 11px;
    height: 185px;
    line-height: 13px;
    overflow: auto;
    padding: 0px;
    text-align: justify;
    width: 190px;
}
.news span {
    font-family: 'Poiret One';
    text-transform: uppercase;
    font-weight: 900;
    font-size: 12px;
    background-color: #d09f01;
    color: #fff;
  margin-left:5px;
}
.liensutiles {
  width:360px;
  height:68px;
  background-color:#eaeaea;
  float:right;
  display:inline-block;
  position:relative;
  margin:5px;
}
#padd {
margin:5px;
float:left;
display:inline-block;
}
.baton {
    display: inline-block;
    float: left;
    height: 26px;
    min-width: 172px;
    border:solid 1px lightgrey;
    background: rgba(249, 249, 249, 0.95);
    margin-right: 1px;
    margin-bottom: 1px;
    text-align: center;
    line-height: 32px;
    font-family: lato;
    font-weight: 700;
    text-transform: uppercase;
    color: #0f0f0f;font-size: 11px;
}
Code à insérer dans Affichage > Page d'accueil > Généralités :
Code:
      <script src="https://use.fontawesome.com/c9dc62c48f.js"></script>
      <link rel='stylesheet' href='http://www.aht.li/3031956/font-awesome.css' />
      <link rel='stylesheet' href='http://www.aht.li/3031957/font-awesomemin.css' />
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet">

<div id="cadrouh"><div class="banniereuh"></div>
<div class="contexte"><span>C</span>contexte <p>La petite phrase qui met bien.</p>
<div class="linku"><a href="http://dark-and-cold.forumactif.com/t2-contexte">Lire la suite <i class="fa fa-star" aria-hidden="true"></i></a></div></div>
<div class="news_credits"><div class="news"><p> <span>date</span> News</div></div>
<div class="liensutiles"><div id="padd">
<div class="baton"><a href="/">Lien</a></div>
<div class="baton"><a href="/">Lien</a></div>
<div class="baton"><a href="/">Lien</a></div>
<div class="baton"><a href="/">Lien</a></div></div>  </div>
<div class="predefinis">
<div class="predefini">
<img src="http://via.placeholder.com/70x70"/>
<div class="hover_predef">
<div class="hover_predef_text">Prédéfini</div>
</div></div>
<div class="predefini">
<img src="http://via.placeholder.com/70x70"/>
<div class="hover_predef">
<div class="hover_predef_text">Prédéfini</div>
</div></div>
<div class="predefini">
<img src="http://via.placeholder.com/70x70"/>
<div class="hover_predef">
<div class="hover_predef_text">Prédéfini</div>
</div></div></div>

<div class="jambon">
<div class="infobulle">
<img src="https://imgur.com/lnnr4wO.png"/>
<div class="ici">
<div class="staff_pseudo">Staffeux</div>
<div class="staff_text"><a href="/">MP</a> ♕ <a href="/">Profil</a></div>
</div>
</div>
<div class="infobulle">
<img src="https://imgur.com/lnnr4wO.png"/>
<div class="ici">
<div class="staff_pseudo">Staffeux</div>
<div class="staff_text"><a href="/">MP</a> ♕ <a href="/">Profil</a></div>
</div>
</div>
<div class="infobulle">
<img src="https://imgur.com/lnnr4wO.png"/>
<div class="ici">
<div class="staff_pseudo">Staffeux</div>
<div class="staff_text"><a href="/">MP</a> ♕ <a href="/">Profil</a></div>
</div>
</div>
<div class="infobulle">
<img src="https://imgur.com/lnnr4wO.png"/>
<div class="ici">
<div class="staff_pseudo">Staffeux</div>
<div class="staff_text"><a href="/">MP</a> ♕ <a href="/">Profil</a></div>
</div>
</div>
<div class="endu"><img src="https://imgur.com/j7rIMmV.png"></div></div>

<div class="colonne_milieu_pa">
<div id="rotator1492882490182"> <a id="" style="opacity: 0;" href="/" title="Diaporama deux" target="_blank"><img src="http://via.placeholder.com/330x165" alt="Diaporama deux"></a>
<a href="/" title="Diaporama trois" target="_blank" style="opacity: 0;" id=""><img src="http://via.placeholder.com/330x165" alt="Diaporama trois"></a>
<a href="/" title="Diaporama trois" target="_blank" style="opacity: 1; z-index: 999;" id="itemActif1492882490182"><img src="http://via.placeholder.com/330x165" alt="Diaporama trois"></a>                                          
</div><script type="text/javascript">(function(){var r = document.getElementById("rotator1492882490182"), l = r.getElementsByTagName("A"), rotate = window.setInterval(function() {var a = document.getElementById("itemActif1492882490182"), n = jQuery(a).next()[0] || l[0]; if (!a) return window.clearInterval(rotate); n.style.opacity = 1;n.style.zIndex = 998;jQuery(a).animate({"opacity":0},800,"linear",function() {a.id = "";a.style.zIndex = "";n.id = "itemActif1492882490182";n.style.zIndex = 999})},3500)})();</script> </div>
<div class="lesrectangles">
<div class="authors"><div class="colorinside1"><span>groupe</span></div><img class="pourcentage"></div>
<div class="creations"><div class="colorinside2"><span>groupe</span></div><img class="pourcentage"></div>
<div class="indep"><div class="colorinside3"><span>groupe</span></div><img class="pourcentage"></div></div>
<div id="boutons_vote_pa"><a href="h/" target="_blank"><img class="votes_pa" src="http://via.placeholder.com/50x50"></a>
<a href="/" target="_blank"><img class="votes_pa" src="http://via.placeholder.com/50x50"></a>
<a href="/" target="_blank"><img class="votes_pa" src="http://via.placeholder.com/50x50"></a>
<a href="/" target="_blank"><img class="votes_pa" src="http://via.placeholder.com/50x50"></a></div></div>
<div class="partenaires_pa"><div class="noireuh">
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div></div>
<div class="etwal2"><img src="https://imgur.com/zFfKHjW.gif" /></div></div>
<div class="credou">©️️️ Copyright : Code réalisé <a href="http://epicode.bbactif.com/">Myrddin</a>.</div
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://chapeauazuriel.forumactif.com
 
PA (1)
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Le Chapeau d'Azuriel :: Libre-service :: Codage :: Structures-
Sauter vers: