Bonjour tout le monde,
Je vous propose une Page d'Accueil suite à la Demande de Lilith Aube
Merci de laisser le crédit vert Never-Utopia.
Code HTML à mettre dans Panneau d'Administration > onglet Affichage > à gauche dans le cadre Page d'Accueil : Généralité
Le code CSS à mettre dans Panneau d'Administration > onglet Affichage > à gauche dans le cadre Images et Couleurs : Couleurs > onglet Feuille de Style CSS
Je vous propose une Page d'Accueil suite à la Demande de Lilith Aube
Merci de laisser le crédit vert Never-Utopia.
Code HTML à mettre dans Panneau d'Administration > onglet Affichage > à gauche dans le cadre Page d'Accueil : Généralité
- Code:
<div class="pa_totale">
<div class="cadre_gauche">
<div class="cadre_membremois">
<div class="membremois">
<img src="http://nsa37.casimages.com/img/2015/07/28/150728123047870391.png" /> <span>Infos 1</span>
</div>
<div class="membremois">
<img src="http://nsa37.casimages.com/img/2015/07/28/150728123047870391.png" /> <span>Infos 2</span>
</div>
<span>Membres du mois</span>
</div>
<div class="cadre_lienutile">
<div class="titre_lienutile">
Liens Utiles
</div>
<div class="lien_utile">
<a href="###">Lien Utile</a> <br /><a href="###">Lien Utile</a> <br /><a href="###">Lien Utile</a> <br /><a href="###">Lien Utile</a> <br /><a href="###">Lien Utile</a> <br /><a href="###">Lien Utile</a> <br /><a href="###">Lien Utile</a> <br /><a href="###">Lien Utile</a> <br /><a href="###">Lien Utile</a> <br /><a href="###">Lien Utile</a> <br /><a href="###">Lien Utile</a> <br /><a href="###">Lien Utile</a> <br /><a href="###">Lien Utile</a> <br />
</div>
</div>
</div>
<div class="cadre_milieu">
<div class="cadre_contexte">
<div class="titre_contexte">
Résumé du contexte
</div>
<div class="texte_contexte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra ut nulla vitae tincidunt. Phasellus sagittis ligula risus, eget sagittis ante varius sit amet. Vivamus feugiat pulvinar porttitor. Sed accumsan faucibus ultricies. Morbi et bibendum lacus. Nunc facilisis massa at dolor laoreet auctor. Nam dictum eros maximus justo scelerisque, sit amet imperdiet nisi aliquet. Vivamus ultrices sollicitudin tempus. Donec lacus metus, vulputate a diam sed, bibendum eleifend nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra ut nulla vitae tincidunt. Phasellus sagittis ligula risus, eget sagittis ante varius sit amet. Vivamus feugiat pulvinar porttitor. Sed accumsan faucibus ultricies. Morbi et bibendum lacus. Nunc facilisis massa at dolor laoreet auctor. Nam dictum eros maximus justo scelerisque, sit amet imperdiet nisi aliquet. Vivamus ultrices sollicitudin tempus. Donec lacus metus, vulputate a diam sed, bibendum eleifend nibh.
</div>
</div>
<div class="cadre_partenaire">
<div class="titre_partenaire">
Top Partenaires
</div>
<div class="lien_part">
<a href="http://www.never-utopia.com/" target="_blank"><img class="partenairetop" src="http://img4.hostingpics.net/pics/213378miniban3.jpg" title="Never-Utopia" alt="Never-Utopia" /></a><a href="http://www.never-utopia.com/" target="_blank"><img class="partenairetop" src="http://img4.hostingpics.net/pics/213378miniban3.jpg" title="Never-Utopia" alt="Never-Utopia" /></a><a href="http://www.never-utopia.com/" target="_blank"><img class="partenairetop" src="http://img4.hostingpics.net/pics/213378miniban3.jpg" title="Never-Utopia" alt="Never-Utopia" /></a><a href="http://www.never-utopia.com/" target="_blank"><img class="partenairetop" src="http://img4.hostingpics.net/pics/213378miniban3.jpg" title="Never-Utopia" alt="Never-Utopia" /></a><a href="http://www.never-utopia.com/" target="_blank"><img class="partenairetop" src="http://img4.hostingpics.net/pics/213378miniban3.jpg" title="Never-Utopia" alt="Never-Utopia" /></a><a href="http://www.never-utopia.com/" target="_blank"><img class="partenairetop" src="http://img4.hostingpics.net/pics/213378miniban3.jpg" title="Never-Utopia" alt="Never-Utopia" /></a>
</div>
</div>
</div>
<div class="cadre_droite">
<div class="cadre_nouveau">
<div class="titre_nouveau">
Nouveauté/Event
</div>
<div class="texte_nouveau">
Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per omnia diffuso propinqua, magnis undique praesidiis conmunitam.
</div>
</div>
<div class="cadre_top">
<div class="titre_top">
Top Sites & A Savoir
</div>
<a rel="nofollow" href="###" target="_blank"><img src="http://img15.hostingpics.net/pics/236519voter2.png" title="Top Site 1" alt="Top Site 1" /></a> <a rel="nofollow" target="_blank" href="###"><img src="http://img15.hostingpics.net/pics/142965voter3.png" title="Top Site 2" alt="Top Site 2" /></a> <a rel="nofollow" href="###" target="_blank"><img src="http://img15.hostingpics.net/pics/236519voter2.png" title="Top Site 3" alt="Top Site 3" /></a>
<div class="texte_top">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra ut nulla vitae tincidunt. Phasellus sagittis ligula risus, eget sagittis ante varius sit amet. Vivamus feugiat pulvinar porttitor. Sed accumsan faucibus ultricies. Morbi et bibendum lacus. Nunc facilisis massa at dolor laoreet auctor. Nam dictum eros maximus justo scelerisque, sit amet imperdiet nisi aliquet. Vivamus ultrices sollicitudin tempus. Donec lacus metus, vulputate a diam sed, bibendum eleifend nibh.
</div>
</div>
</div>
<div class="cadre_staff">
<div class="staff">
<img src="http://nsa37.casimages.com/img/2015/07/28/150728123048171810.png" /> <span>Staff 1</span>
</div>
<div class="staff">
<img src="http://nsa37.casimages.com/img/2015/07/28/150728123048171810.png" /> <span>Staff 2</span>
</div>
<div class="staff">
<img src="http://nsa37.casimages.com/img/2015/07/28/150728123048171810.png" /> <span>Staff 3</span>
</div>
<div class="staff">
<img src="http://nsa37.casimages.com/img/2015/07/28/150728123048171810.png" /> <span>Staff 4</span>
</div>
</div>
<a href="http://www.never-utopia.com/">(c) Never-Utopia</a>
</div>
Le code CSS à mettre dans Panneau d'Administration > onglet Affichage > à gauche dans le cadre Images et Couleurs : Couleurs > onglet Feuille de Style CSS
- Code:
/* PA */
.pa_totale {
position: relative;
height: 580px;
width: 860px;
border: 2px solid #335C84;
background: #9BC4EB;
border-radius: 4px;
margin: auto;
}
.cadre_gauche {
display: inline-block;
vertical-align: top;
width: 249px;
}
.cadre_membremois {
position: relative;
height: 180px;
width: 230px;
margin: 15px 0 0 15px;
text-align: center;
background: #82A3C2;
}
.cadre_membremois:before, .cadre_membremois:after {
position: absolute;
display: block;
height: 180px;
width: 230px;
border: 2px solid #3F5A73;
content:"";
}
.cadre_membremois:before {
left: -5px;
top: -5px;
}
.cadre_membremois:after {
right: -5px;
bottom: -5px;
}
.membremois {
position: relative;
height: 90px;
width: 90px;
margin: 20px 0 0 5px;
display: inline-block;
cursor: pointer;
z-index: 2;
}
.membremois img {
position: relative;
height: 90px;
width: 90px;
border-radius: 50px;
z-index: 2;
}
.membremois span {
position: absolute;
height: 80px;
width: 80px;
right: -5px;
bottom: -5px;
border-radius: 50px;
background: #000;
font-size: 11px;
color: #fff;
padding: 5px;
overflow: hidden;
transition: 0.5s all;
z-index: 1;
}
.membremois:hover span {
right: 0;
bottom: 0;
z-index: 3;
}
.cadre_membremois > span {
display: block;
margin-top: 15px;
font: 24px'Vivaldi';
}
.cadre_lienutile {
height: 340px;
width: 230px;
background: #82A3C2;
border: 2px solid #3F5A73;
margin: 15px 0 0 15px;
padding-top: 10px;
border-radius: 4px;
}
.titre_lienutile {
height: 25px;
width: 180px;
border-bottom: 2px dotted #465D73;
margin: auto;
text-align: center;
}
.lien_utile {
height: 280px;
width: 185px;
overflow: auto;
margin: 10px 0 0 25px;
text-align: center;
}
.cadre_milieu {
display: inline-block;
vertical-align: top;
}
.cadre_contexte {
height: 250px;
width: 230px;
background: #82A3C2;
border: 2px solid #3F5A73;
margin: 10px 0 0 5px;
padding-top: 10px;
border-radius: 4px;
}
.titre_contexte {
height: 25px;
width: 180px;
border-bottom: 2px dotted #465D73;
text-align: center;
margin: auto;
}
.texte_contexte {
height: 200px;
width: 175px;
overflow: auto;
margin: 10px 0 0 25px;
text-align: justify;
padding-right: 15px;
}
.cadre_partenaire {
height: 267px;
width: 230px;
background: #82A3C2;
border: 2px solid #3F5A73;
margin: 10px 0 0 5px;
padding-top: 10px;
text-align: center;
border-radius: 4px;
}
.titre_partenaire {
height: 20px;
width: 180px;
border-bottom: 2px dotted #465D73;
margin: 0 auto 5px;
}
.lien_part a{
display: inline-block;
vertical-align: middle;
}
.lien_part img{
width: 88px;
height: 31px;
}
.cadre_droite {
display: inline-block;
vertical-align: top;
}
.cadre_nouveau {
height: 250px;
width: 225px;
background: #82A3C2;
border: 2px solid #3F5A73;
margin: 10px 0 0 5px;
padding-top: 10px;
padding-right: 5px
border-radius: 4px;
}
.titre_nouveau {
height: 25px;
width: 180px;
border-bottom: 2px dotted #465D73;
text-align: center;
margin: auto;
}
.texte_nouveau {
height: 200px;
width: 185px;
overflow: auto;
margin: 10px 0 0 20px;
padding-right: 5px;
text-align: justify;
}
.cadre_top {
height: 267px;
width: 230px;
background: #82A3C2;
border: 2px solid #3F5A73;
margin: 10px 0 0 5px;
padding-top: 10px;
text-align: center;
border-radius: 4px;
}
.titre_top {
height: 20px;
width: 180px;
border-bottom: 2px dotted #465D73;
margin: 0 auto 5px;
}
.texte_top {
height: 170px;
width: 175px;
overflow: auto;
margin: 10px 0 0 25px;
text-align: justify;
padding-right: 15px;
}
.cadre_staff{
display: inline-block;
height: 584px;
width: 120px;
}
.staff{
position: relative;
height: 100px;
width: 100px;
margin: 30px 0 0 5px;
cursor: pointer;
}
.staff img{
width: 100px;
height: 100px;
border-radius: 60px;
box-shadow: 5px 5px 0 #000;
transition: 1s all;
}
.staff span{
position: absolute;
height: 90px;
width: 90px;
top: 0;
left: 0;
border-radius: 60px;
background: #000;
opacity: 0;
padding: 5px;
font-size: 11px;
color: #fff;
text-align: center;
overflow: hidden;
transition: 1.5s all;
}
.staff:hover img{
transform: rotate(360deg);
box-shadow: none;
}
.staff:hover span{
opacity: 1;
}
.pa_totale *::-webkit-scrollbar{
width: 5px;
}
.pa_totale *::-webkit-scrollbar-thumb{
background: #1F4971;
border-radius: 5px;
}
.pa_totale *::-webkit-scrollbar-track{
background: #A3B6C7;
border-radius: 5px;
}
.pa_totale > a {
position: absolute;
right: 5px;
bottom: 5px;
}
Vos commentaires et remerciements sont toujours bienvenus ^^
Si vous avez des problèmes avec ce LS, venez poster ici.
