Graph'Art 4 Fun Index du Forum

 -  Forum  -   Faq  -   Recherche  -   Artistes  -   Groupes  -   S'inscrire  -   On  -  


Traduire cette page : de
Tableau D'Entête Codé 7

 
Poster un nouveau sujet   Répondre au sujet    Graph'Art 4 Fun Index du Forum Le Coin Du Codage Boîte à Outils Page D'Accueil

Sujet précédent :: Sujet suivant  


Hors ligne



Inscrit le: 09 Oct 2014
Messages: 1 408
Sexe: Féminin
Signe du Zodiaque: Taureau (20avr-20mai)
Bon à Savoir: Esprit Créative On
Facebook: URL
Crédit Avatar: PFD_Créative Attitud
Crédit Signature: Créative Attitude
Points Défis: 704
Diamants: 90


MessageCréative Attitude

Graphiste


Posté le: Sam 25 Mar - 18:41 (2017)     Sujet du message: Tableau D'Entête Codé 7

Répondre en citant




Tableau D'Entête Codé 8
-----------------------------




Le CSS

[hide3=]Un Merci Fera Apparaître Le Code

Code: Sélectionner - Agrandir / Réduire

/*****Page D'accueil crée par Créative Attitude****/
/****PA*****/
#container{background-color:#e3e3e3;width:800px;height:auto;}

/****image****/
#img-pen{margin-top:-14px;margin-left:-70px}
/* Rotation et dézoome */
#img-icon {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
#img-icon:hover  {-webkit-transition: all 0.5s ease;transition: all 0.5s ease;-webkit-transform: rotate(15deg);transform: rotate(15deg);}

/***paragraphe****/
.inline0 {width: 800px;}
.inline0 div {display: inline-block;vertical-align:top;}
.p1{width:620px;height:150px;overflow:auto;padding:0px 20px;background-color:#4f4f56;color:white;margin-right:20px;}
.p1:first-letter{text-shadow:1px 1px 2px #313e3e;font-size:40px;font-family:Reenie Beanie;padding-left:15px;color:#a2b7b7;}
.p2{width:140px;height:160px;overflow:auto;padding:0px 20px;background-color:none;color:white;}

/****titre****/
#titre1{color:#4f4f56;width:400px;font-family:arial black;font-size:50px;display:inline-block;}
.titre2{width:250px;font-family:arial black;font-size:20px;color:#4f4f56;padding-left:8px;}

.title {width: 800px;margin-top:10px;}
.title div {display: inline-block;vertical-align:top;}

/******Nav/Nouv/team****/
.nav, .nouv, .team{font-family:arial black;font-size:16px;color:#4f4f56;padding:2px;}
.nav{width:200px;MARGIN-right:26px;}
.nouv{width:300px;MARGIN-right:28px;}
.team{width:220px;}

.inline {width: 800px;}
.inline div {display: inline-block;vertical-align:top;}

.bloc1, .bloc0, .bloc2{padding:2px;color:white;background-color:#4f4f56;}
.bloc0, .bloc1{MARGIN-right:25px;}
.bloc0 {width:200px;height:150px;}
.bloc1 {width:300px;height:200px;overflow:auto;}
.bloc2{width:220px;height:240px;}

a.lien-pa{text-decoration:none;color:white;font-weight:bold;}
a.lien-pa:hover{font-variant:small-caps;color:#e3e3e3;}

.news_textenew1, .news_textenew2{display:block;width:auto;padding:3px;}
.news_textenew1{background-color:#e3e3e3;}
.news_textenew1 em .news_textenew2 em { /* Dates */
   color: #d03a40;  /* Couleur du texte */
   text-transform: uppercase; /* Transformation du texte en majuscule */
   font-style: normal; /* Enlève le italic par défaut de la balise em */
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */}

.news_textenew1 .news_textenew2 em:after {content: " ►"; }  /* Ajoute la flèche après les dates */

 /***staff effet sadie***/
*, *:after, *:before {box-sizing: border-box;}
.grid{position:relative;margin:0 auto;padding-top:10px;padding-left:45px;max-width:120px;list-style:none;text-align:center}
.grid figure{position:relative;float:left;overflow:hidden;margin:5px 1%;min-width:120px;max-width:120px;max-height:90px;width:48%;background:#3085a3;text-align:center;cursor:pointer}
.grid figure img{position:relative;display:block;min-height:100%;max-width:100%;opacity:.8}
.grid figure figcaption{padding:2em;color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.grid figure figcaption::before,.grid figure figcaption::after{pointer-events:none}
.grid figure figcaption,.grid figure figcaption>a{position:absolute;top:0;left:0;width:100%;height:100%}
.grid figure figcaption>a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}
.grid figure p{letter-spacing:1px;font-size:12px;}
@media screen and (max-width:50em){
.grid figure{display:inline-block;float:none;margin:10px auto;width:100%}
}

figure.effect-sadie figcaption::before{position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-linear-gradient(top,rgba(72,76,97,0) 0,rgba(72,76,97,0.8) 75%);
background:linear-gradient(to bottom,rgba(72,76,97,0) 0,rgba(72,76,97,0.8) 75%);content:'';opacity:0;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}
figure.effect-sadie figcaption::before,figure.effect-sadie p{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
 figure.effect-sadie p{position:absolute;bottom:0;left:0;padding:2em;width:50%;opacity:0;-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
figure.effect-sadie:hover figcaption::before,figure.effect-sadie:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

/****breakingnews****/
.breakingnews{width: 780px;padding:2px;margin-left:auto;margin-right:auto;background-color:#4f4f56;font-size: 12px;color: #f8f4ef;text-align:center;}
 
/***partenaires***/
 .partenaire{width: 800px; height: auto;background-color:#4f4f56;color:white;text-align:center;margin-top:10px;}
 
/******crédits*********/
.crédits{color:#4f4f56;font-size:10px;text-align:center;padding-bottom:2px;margin-top:10px;}






Le HTML:

Code: Sélectionner - Agrandir / Réduire

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<div id="container">

<div class="inline0">
<div id="titre1">BIENVENUE</div><img src="http://icons.iconarchive.com/icons/designcontest/vintage/72/Ink-Pen-2-icon.png" id="img-pen">
  <div class="p1">Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum,
  fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita. Qui ut huic virilem togam deditšnihil dicam hoc loco de me;
  tantum sit, quantum vos existimatis; hoc dicam, hunc a patre continuo ad me esse deductum; nemo hunc M.
  Caelium in illo aetatis flore vidit nisi aut cum patre aut mecum aut in M. Crassi castissima domo, cum artibus honestissimis erudiretur.
  Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum,
  fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita. Qui ut huic virilem togam deditšnihil dicam hoc loco de me;
  tantum sit, quantum vos existimatis; hoc dicam, hunc a patre continuo ad me esse deductum; nemo hunc M.
  Caelium in illo aetatis flore vidit nisi aut cum patre aut mecum aut in M. Crassi castissima domo, cum artibus honestissimis erudiretur.</div>
 
<div class="p2"><br><a href="#"><img src="http://icons.iconarchive.com/icons/designbolts/free-retro-style-social/64/Facebook-icon.png" id="img-icon"></a>
<br><a href="#"><img src="http://icons.iconarchive.com/icons/designbolts/free-retro-style-social/64/Twitter-icon.png" id="img-icon"></a></div>
</div><!-- inline0
-->

<div class="title"><div class="nav">Navigation Rapide</div><div class="nouv">Nouveautés</div><div class="team">La Team</div></div>
<div class="inline">
<div class="bloc0">
<ul><li><a href="" class="lien-pa">Règlement</a></li><li><a href="" class="lien-pa">Section 1</a></li><li><a href="" class="lien-pa">Section 2</a></li>
<li><a href="" class="lien-pa">Section 3</a></li><li><a href="" class="lien-pa">Section 4</a></li>
<li><a href="" class="lien-pa">Section 5</a></li><li><a href="" class="lien-pa">Section 6</a></li></ul></div>

<div class="bloc1">
<em class="news_textenew1">► xx/xx/15:***  </em><em class="news_textenew2">► xx/xx/15:***  </em><em class="news_textenew1">► xx/xx/15:***  </em>
<em class="news_textenew2">► xx/xx/15:***  </em><em class="news_textenew1">► xx/xx/15:***  </em><em class="news_textenew2">► xx/xx/15:***  </em>
<em class="news_textenew1">► xx/xx/15:***  </em><em class="news_textenew2">► xx/xx/15:***  </em></div>


<div class="bloc2"><div class="grid"><figure class="effect-sadie">
<img src="http://img11.hostingpics.net/pics/606807801.jpg" alt="img02"><figcaption><p><a href="#" class="lien-pa">name</a> rang </p></figcaption></figure></div>
<div class="grid"><figure class="effect-sadie">
<img src="http://img11.hostingpics.net/pics/606807801.jpg" alt="img02"><figcaption><p><a href="#" class="lien-pa">name</a> rang </p></figcaption></figure></div>
</div>
</div><!-- inline
-->

<div class="titre2">BREAKING NEWS</div><div class="breakingnews">
<marquee direction="left" scrollamount="3">En Ce Moment : *********************************** - </marquee></div>

<div class="partenaire"> - Logos De Nos Partenaires -
<marquee><a href="http://creativeattituvewordart.blogspot.fr/" title="blog ici" target="_blank"><img src="http://nsm08.casimages.com/img/2015/08/19//15081905480017234513519809.jpg"></a>
<a href="http://creativeattitude.wix.com/creativeattitude" target="_blank"><img src="http://nsm08.casimages.com/img/2014/10/28//14102801172717234512651947.gif"></a>
<a href="http://creativeattituvewordart.blogspot.fr/" title="blog ici" target="_blank"><img src="http://nsm08.casimages.com/img/2015/08/19//15081905480017234513519809.jpg"></a>
<a href="http://creativeattitude.wix.com/creativeattitude" target="_blank"><img src="http://nsm08.casimages.com/img/2014/10/28//14102801172717234512651947.gif"></a>
<a href="http://creativeattituvewordart.blogspot.fr/" title="blog ici" target="_blank"><img src="http://nsm08.casimages.com/img/2015/08/19//15081905480017234513519809.jpg"></a>
<a href="http://creativeattitude.wix.com/creativeattitude" target="_blank"><img src="http://nsm08.casimages.com/img/2014/10/28//14102801172717234512651947.gif"></a>
</marquee></div>

<div class="crédits">Forum Ouvert Depuis Le: **/**/**** - Design By **** - PA By <a href="http://creativeattitude.wix.com/creativeattitude" style="color: #ab0d1d;">&nbsp;© Créative Attitude</a> -
Le contexte, l'apparence, les idées sont à la propriété du staff - Tout Droit Réservé. -</div>

</div><!-- container
-->



[/hide3]





<center><iframe SRC="http://www.aht.li/2926038/CreativeAout.html" height="230" width="430" frameborder="no"></iframe></center>



Visiter le site web du posteur









MessagePublicité




Posté le: Sam 25 Mar - 18:41 (2017)     Sujet du message: Publicité




PublicitéSupprimer les publicités ?







Montrer les messages depuis:   


 
Sauter vers:  

Index | Creer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Powered by phpBB © 2001, 2005 phpBB Group Traduction par : phpBB-fr.com

Design Et Codage By ©Créative Attitude