Bon, comment ça marche un sondage... *se tire les cheveux*
Il n'y a pas eu beaucoup de participants, mais ceux qui ont essayés m'ont l'air d'avoir fait de magnifiques codage, alors venez voter en nombre ^^
Shoki
PA n°1 :
PA en action !
Onyx
PA n°2 :
PA en action !
Il n'y a pas eu beaucoup de participants, mais ceux qui ont essayés m'ont l'air d'avoir fait de magnifiques codage, alors venez voter en nombre ^^
Shoki
PA n°1 :
PA en action !
- code:
- HTML :
- Code:
<link href="https://fonts.googleapis.com/css?family=Meie+Script|Marck+Script|Seaweed+Script|Aguafina+Script|Clicker+Script" rel="stylesheet" type="text/css" />
<h1 class="bienvenue">
Bienvenue sur Nom Forum !
</h1>
<table>
<tbody>
<tr>
<td>
<div class="blocs_4">
<h2 class="titres_blocs">
Liens utiles
</h2>
<div class="navigation_block">
<a href="#">Un lien</a>
</div>
<div class="navigation_block">
<a href="#">Un lien</a>
</div>
<div class="navigation_block">
<a href="#">Un lien</a>
</div>
<div class="navigation_block">
<a href="#">Un lien</a>
</div>
<div class="navigation_block">
<a href="#">Un lien</a>
</div>
<div class="navigation_block">
<a href="#">Un lien</a>
</div>
</div>
</td>
<td rowspan="2">
<div class="bloc_img">
<img src="http://zupimages.net/up/16/05/3gpd.png" class="img_contexte" />
<div class="contexte" style="margin-top: -390px;">
<div class=" contexte_contenu" style="margin-top: 50px;">
Contexte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at enim justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent placerat feugiat interdum. Nam molestie viverra tincidunt. Vivamus consectetur tempor porta. Proin dapibus, mi dapibus ultrices viverra, tellus arcu tempus velit, at efficitur justo erat non lacus. Duis vestibulum blandit ante, fermentum facilisis sapien convallis sed. Vestibulum ut ipsum venenatis, interdum risus eget, sagittis felis. Donec blandit lectus consectetur pretium tempor.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at enim justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent placerat feugiat interdum. Nam molestie viverra tincidunt. <br /> Blablablablabla
</div>
</div>
</div>
</td>
<td>
<div class="blocs_4">
<h2 class="titres_blocs">
Staff
</h2>
<div class="staff">
<div class="staff_img">
<img src="http://zupimages.net/up/16/06/41ee.png" />
</div>
<div class="staff_content">
PSEUDO<br />- Rang
</div>
</div>
<div class="staff">
<div class="staff_img">
<img src="http://zupimages.net/up/16/06/41ee.png" />
</div>
<div class="staff_content">
PSEUDO<br />- Rang
</div>
</div>
<div class="staff">
<div class="staff_img">
<img src="http://zupimages.net/up/16/06/41ee.png" />
</div>
<div class="staff_content">
PSEUDO<br />- Rang
</div>
</div>
<div class="staff">
<div class="staff_img">
<img src="http://zupimages.net/up/16/06/41ee.png" />
</div>
<div class="staff_content">
PSEUDO<br />- Rang
</div>
</div>
<div class="staff">
<div class="staff_img">
<img src="http://zupimages.net/up/16/06/41ee.png" />
</div>
<div class="staff_content">
PSEUDO<br />- Rang
</div>
</div>
<div class="staff">
<div class="staff_img">
<img src="http://zupimages.net/up/16/06/41ee.png" />
</div>
<div class="staff_content">
PSEUDO<br />- Rang
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="blocs_4">
<h2 class="titres_blocs">
Prédéfinis
</h2>
<div class="predefs">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="predefs">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="predefs">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="predefs">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="predefs">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="predefs">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="predefs">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="predefs">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div><br /><a href="#" style="display: block; font-family: 'Clicker Script', cursive; text-align: center; font-size: 20pt;" class="a">Plus ?</a>
</div>
</td>
<td>
<div class="blocs_4">
<h2 class="titres_blocs">
Partenaires
</h2>
<div class="partenaires">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="partenaires">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="partenaires">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="partenaires">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="partenaires">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="partenaires">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="partenaires">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
<div class="partenaires">
<a href="#"><img src="http://zupimages.net/up/16/06/41ee.png" /></a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
CSS :
- Code:
/***************************PA***************************/
.bienvenue {
display: block;
font-size: 30pt;
font-family: 'Marck Script', cursive;
font-weight: normal;
margin-bottom: -5px;
margin-top: -3px;
color: #73044A;
text-shadow: 0px 0px 3px #D25FA8;
transition: all 700ms ease;
-webkit-transition; all 700ms ease;
}
.bienvenue:hover {
color: #D25FA8;
text-shadow: 0px 0px 6px #73044A;
}
/***BLOC CONTEXTE***/
.contexte {
width: 390px;
height: 390px;
border-radius: 390px;
margin: auto;
overflow: hidden;
text-align: center;
background-color: pink;
}
.contexte_contenu {
width: 280px;
height: 280px;
margin: auto;
overflow: auto;
font-size: 12px;
font-size: 'Verdana', sans-serif;
color: #86115B;
}
.bloc_img {
width: 390px;
height: 390px;
border-radius: 390px;
}
.img_contexte {
position: relative;
transition: all 1s ease;
visibility: visible;
}
.bloc_img:hover .img_contexte {
position: relative;
transform: rotate(1080deg);
transition: all 1s ease;
visibility: hidden;
opacity: 0;
z-index: 0;
}
/***END***/
.blocs_4 {
width: 240px;
height: 198px;
background-color: pink;
overflow: auto;
}
/***NAVIGATION/LIENS RAPIDES***/
.navigation_block {
width: auto;
height: auto;
padding : 5px;
background: transparent;
text-align: center;
font-size: 14px;
transition: all 300ms ease;
-webkit-transition: all 300ms ease;
text-decoration: none;
font-family: 'Verdana', sans-serif;
color: #D409BF;
}
.navigation_block:hover {
background: #FFF;
text-transform: uppercase;
}
.navigation_block a {
color: #D409BF;
text-decoration: none;
transition: all 100ms ease;
-webkit-transition: all 100ms ease;
}
.navigation_block a:hover {
color: #E956DA;
text-decoration: underline;
}
/***FIN NAVIGATION***/
.titres_blocs {
display: block;
text-align: center;
font-family: 'Clicker Script', cursive;
font-size: 20pt;
font-weight: normal;
margin-bottom: -1px;
margin-top: 1px;
color: #6E0949;
}
.predefs {
display: inline-block;
width: 55px;
height: 55px;
overflow: hidden;
background-color: #FFF;
margin-left: 4px;
margin-right: -4px;
margin-bottom: 2px;
transition: all 1s ease;
-webkit-transition: all 1s ease;
}
/***STAFF***/
.staff {
position: relative;
display: inline-block;
width: 70px;
height: 70px;
overflow: hidden;
background-color: pink;
margin-left: 12px;
margin-right: -12px;
margin-bottom: 2px;
}
.staff_img {
position: relative;
z-index: 2;
width: 70px;
height: 70px;
overflow: hidden;
margin-top: 0px;
transition: all 1s ease;
-webkit-transition: all 1s ease;
}
.staff:hover .staff_img {
margin-top: -70px;
}
.staff_content {
position: relative;
z-index: 1;
font-size: 13px;
color: #86115B;
margin-bottom: 65px;
text-align: center;
overflow: auto;
}
/***END***/
.partenaires {
display: inline-block;
width: 100px;
height: 35px;
overflow: hidden;
background-color: #FFF;
margin-left: 18px;
margin-right: -18px;
margin-bottom: 2px;
}
.a {
color: #D409BF !important;
text-decoration: none;
transition: all 100ms ease;
-webkit-transition: all 100ms ease;
}
.a:hover {
color: #E956DA !important;
text-decoration: underline;
}
Onyx
PA n°2 :
PA en action !
- code:
- HTML :
- Code:
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script" />
<div id="pa_bloc">
<div id="pa_title_bloc">
<div id="pa_title">
Should we not cherish it?<span id="pa_subtitle">As love is as rare as
thruth</span>
</div>
</div>
<div class="pa_inbloc" id="pa_contexte">
<div class="pa_subtitles">
Contexte
</div><img src="http://img15.hostingpics.net/pics/742357amour.png">
<div class="pa_insidebloc">
<div class="pa_inline">
Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat
eum vita et imperio spoliari, itineribus interiectis permutatione
iumentorum emensis venit Petobionem oppidum Noricorum, ubi reseratae
sunt insidiarum latebrae omnes, et Barbatio repente apparuit comes, qui
sub eo domesticis praefuit, cum Apodemio agente in rebus milites
ducens, quos beneficiis suis oppigneratos elegerat imperator certus nec
praemiis nec miseratione ulla posse deflecti. Pandente itaque viam
fatorum sorte tristissima, qua praestitutum erat eum vita et imperio
spoliari, itineribus interiectis permutatione iumentorum emensis venit
Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebrae
omnes, et Barbatio repente apparuit comes, qui sub eo domesticis
praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis
suis oppigneratos elegerat imperator certus nec praemiis nec
miseratione ulla posse deflecti.
</div>
</div>
</div>
<div class="pa_inbloc" id="pa_news">
<div class="pa_subtitles">
Nouvelles
</div><img src="http://img15.hostingpics.net/pics/647001amour2.png">
<div class="pa_insidebloc">
<div class="pa_inline">
<strong>01/01/15 :</strong> Nouvelle de la semaine.<br>
<strong>01/01/15 :</strong> Nouvelle de la semaine.<br>
<strong>01/01/15 :</strong> Nouvelle de la semaine.<br>
<strong>01/01/15 :</strong> Nouvelle de la semaine.<br>
<strong>01/01/15 :</strong> Nouvelle de la semaine.<br>
<strong>01/01/15 :</strong> Nouvelle de la semaine.
</div>
</div>
</div>
<div class="pa_inbloc" id="pa_liens">
<div class="pa_subtitles">
Liens Utiles
</div><img src="http://img15.hostingpics.net/pics/782546amour3.png">
<div class="pa_insidebloc">
<div class="pa_inline">
<br>
- <a href="#">Règlement</a><br>
<br>
- <a href="#">Contexte</a><br>
<br>
- <a href="#">Guide d'utilisateur</a><br>
<br>
- <a href="#">Présentations</a><br>
<br>
- <a href="#">FAQ</a><br>
<br>
- <a href="#">Partenaires</a>
</div>
</div>
</div>
<div class="pa_inbloc" id="pa_staff">
<div class="pa_subtitles">
Staff
</div><img src="http://img15.hostingpics.net/pics/843755amour4.png">
<div class="pa_insidebloc">
<div class="pa_inline">
<img src="http://img15.hostingpics.net/pics/830555ichigo.png"><br>
<strong>Nom Prénom</strong><br>
Admin<br>
<a href="#">Contacter</a><br>
<br>
<img src="http://img15.hostingpics.net/pics/830555ichigo.png"><br>
<strong>Nom Prénom</strong><br>
Admin<br>
<a href="#">Contacter</a>
</div>
</div>
</div>
<div class="pa_inbloc" id="pa_partenaires">
<div class="pa_subtitles">
Partenaires
</div><img src="http://img15.hostingpics.net/pics/913707amour6.png">
<div class="pa_insidebloc">
<div class="pa_inline">
<a href="#"><img src="http://www.tourismeplus.com/images/bckg_t_l.png"></a><a href="#"><img src="http://www.tourismeplus.com/images/bckg_t_l.png"></a><a href="#"><img src="http://www.tourismeplus.com/images/bckg_t_l.png"></a><a href="#"><img src="http://www.tourismeplus.com/images/bckg_t_l.png"></a><a href="#"><img src="http://www.tourismeplus.com/images/bckg_t_l.png"></a><a href="#"><img src="http://www.tourismeplus.com/images/bckg_t_l.png"></a><a href="#"><img src="http://www.tourismeplus.com/images/bckg_t_l.png"></a>
</div>
</div>
</div>
<div class="pa_inbloc" id="pa_topsites">
<div class="pa_subtitles">
Top-Sites
</div><img src="http://img15.hostingpics.net/pics/299569amour5.png">
<div class="pa_insidebloc">
<div class="pa_inline">
<a href="#"><img src="http://img15.hostingpics.net/pics/274211303074114613XzcYtG2b.png"></a><a href="#"><img src="http://img15.hostingpics.net/pics/274211303074114613XzcYtG2b.png"></a><a href="#"><img src="http://img15.hostingpics.net/pics/274211303074114613XzcYtG2b.png"></a>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
CSS :
- Code:
#pa_bloc {
margin: 20px;
width: 800px;
height: 400px;
color: #1F0518;
background-color: #c4afbe;
background-image: url('http://img15.hostingpics.net/pics/616369rosePNG639.png');
border: 2px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-radius: 30px;
position: relative;
}
#pa_bloc a {
color: #470b37;
}
#pa_bloc a:hover {
color: #77135c;
}
#pa_title_bloc {
position: absolute;
bottom: 385px;
left: 0px;
width: 800px;
}
#pa_title {
display: block;
font-size: 36px;
color: #ffffff;
text-shadow: 0px 0px 3px #1F0518;
font-family: 'Dancing Script', cursive;
}
#pa_subtitle {
margin-top: -15px;
display: block;
font-family: 'Dancing Script', cursive;
font-size: 20px;
text-shadow: 0px 0px 3px #ffffff;
color: #1F0518;
}
.pa_subtitles {
position: absolute;
z-index: 2;
left: 5px;
top: -25px;
font-size: 28px;
color: #ffffff;
text-shadow: 0px 0px 3px #1F0518;
font-family: 'Dancing Script', cursive;
}
#pa_contexte {
margin-top: 45px;
margin-left: 25px;
height: 330px;
width: 200px;
}
.pa_inbloc {
position: relative;
float: left;
box-shadow: 0px 0px 10px #353535;
border-radius: 5px;
text-align: justify;
}
.pa_inbloc > img {
border-radius: 5px;
}
.pa_insidebloc {
display: block;
top: 0px;
position: absolute;
border-radius: 5px;
z-index: 1;
padding: 5px;
left: 0px;
opacity: 0;
background-color: rgba(255,255,255,0.6);
transition: 0.5s;
-webkit-transition: 0.5s;
}
.pa_inbloc:hover .pa_insidebloc {
opacity: 1;
}
.pa_inline {
overflow: auto;
margin-right: -5px;
padding-right: 5px;
}
#pa_contexte .pa_inline {
height: 320px;
width: 190px;
}
#pa_news, #pa_liens {
margin-top: 45px;
margin-left: 25px;
height: 200px;
width: 150px;
}
#pa_news .pa_inline, #pa_liens .pa_inline {
height: 190px;
width: 140px;
}
#pa_staff {
margin-top: 45px;
margin-left: 25px;
height: 220px;
width: 175px;
}
#pa_staff .pa_inline {
height: 205px;
width: 165px;
padding-bottom: 0px;
padding-top: 5px;
text-align: center;
}
#pa_staff .pa_inline > img {
width: 150px;
height: 50px;
opacity: 0.8;
}
#pa_partenaires {
margin-top: 10px;
margin-left: 25px;
height: 100px;
width: 325px;
}
#pa_partenaires .pa_inline {
height: 90px;
width: 315px;
text-align: center;
}
#pa_partenaires .pa_inline > a {
display: inline-block;
height: 90px;
width: 40px;
margin-left: 2px;
margin-right: 2px;
}
#pa_partenaires .pa_inline > a > img {
display: inline-block;
height: 90px;
width: 40px;
opacity: 0.6;
transition: 0.5s;
-webkit-transition: 0.5s;
}
#pa_partenaires .pa_inline > a > img:hover {
opacity: 1;
}
#pa_topsites {
margin-top: 30px;
margin-left: 25px;
height: 80px;
width: 175px;
}
#pa_topsites .pa_inline {
height: 70px;
width: 165px;
text-align: center;
}
#pa_topsites .pa_inline > a:nth-child(2) {
margin-left: 5px;
margin-right: 5px;
display: inline-block;
}
#pa_topsites .pa_inline > a > img {
display: inline-block;
height: 70px;
width: 50px;
opacity: 0.6;
transition: 0.5s;
-webkit-transition: 0.5s;
}
#pa_topsites .pa_inline > a > img:hover {
opacity: 1;
}
Dernière édition par Onyx le Mar 23 Fév 2016 - 16:17, édité 2 fois