avatar
Messages : 17
Date d'inscription : 27/08/2017
Age : 16
Dim 27 Aoû - 15:35
Bonjour !
Voici une PA que je met à votre disposition en libre service. J'espère qu'elle vous plaire. Voici un aperçut : https://i.goopics.net/8dA9x.jpg
Il y a un effet de changement de couleur au survol des liens.

HTML :
Code:
<link href="https://fonts.googleapis.com/css?family=Oswald|Oxygen" rel="stylesheet"> 
<div class="haut_lafo">
Bienvenue sur Forum !
</div>
<div class="corps_lafo">
    <div class="col1_lafo">
        <div class="bloctitre_lafo">Staff :</div>
        <a href="liens_contact_staff"><img class="staffimg_lafo" src="URL_IMGAGE_257*150"/></a>
        <a href="liens_contact_staff"><img class="staffimg2_lafo" src="URL_IMGAGE_257*150"/></a>
    </div>
    <div class="col2_lafo">
        <div class="bloctitre_lafo">Contexte :</div>
        <div class="bloc_lafo">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis mauris sed nunc finibus commodo vel nec ante. Aenean pharetra lectus sed lorem congue, sit amet convallis justo malesuada. Integer vel est sed tortor tristique commodo. Aenean vestibulum, sem at pretium aliquam, nibh augue suscipit enim, at accumsan enim sapien at tortor. Mauris in ante egestas, eleifend quam sit amet, ultricies nulla. Morbi a eros sed nunc pretium egestas. Quisque a interdum eros.

Etiam ornare arcu ac varius hendrerit. Etiam laoreet metus non elit cursus mattis. Vestibulum odio enim, tincidunt et orci et, viverra consequat arcu. Nulla at bibendum elit. Etiam condimentum velit mi, sed posuere massa luctus ut. Vivamus consequat ultrices pellentesque. Integer ac commodo nibh, eu imperdiet sem. Aenean pulvinar auctor porttitor. Mauris commodo mauris lacinia egestas molestie.

Vestibulum a sapien odio. In sit amet ultricies massa. Cras cursus, purus rhoncus ultricies molestie, massa sapien fringilla ante, et dignissim arcu felis et odio. Nam malesuada, nisl quis finibus vulputate, neque risus interdum massa, eget volutpat sem ex vestibulum odio. Ut lacinia consequat purus vel ornare. Donec rutrum libero id justo vehicula, a molestie odio tempus. Curabitur augue purus, imperdiet id volutpat vel, vulputate id eros. Ut imperdiet leo sed libero tincidunt egestas. Ut varius posuere ipsum ac varius.

Phasellus ac felis ut magna condimentum tincidunt. Pellentesque finibus, mauris ut lobortis condimentum, sapien ante rhoncus nibh, sed fringilla ipsum ipsum ut turpis. Sed erat felis, ultricies eu enim nec, iaculis dapibus nulla. Donec et elementum justo. Nulla id iaculis risus. Praesent quis pharetra felis. In sed justo sit amet dolor porta molestie vitae sed arcu. Morbi malesuada, orci porttitor faucibus feugiat, nisi erat venenatis ex, a euismod metus urna nec quam. Fusce at blandit lectus. Praesent lacinia tortor a vestibulum cursus. Phasellus rutrum velit id interdum accumsan. Suspendisse eget maximus lacus. Maecenas scelerisque metus lacus, quis varius mi accumsan vel.

Sed porta cursus convallis. Aliquam id finibus nulla, non aliquam quam. Nulla a ipsum et est egestas lacinia. Proin efficitur tristique hendrerit. Mauris magna sapien, faucibus sit amet molestie eget, egestas sed dui. Suspendisse luctus, arcu at lacinia vestibulum, sem purus convallis risus, semper facilisis lacus diam non ante. In cursus mi urna, nec luctus sem pulvinar ac. Morbi et efficitur tortor. Maecenas ultricies facilisis eros, sed ullamcorper nunc placerat ut. Sed gravida aliquet augue, quis lacinia magna congue ac. Duis et metus ut ex ornare luctus id nec quam. Morbi ultrices, risus in interdum commodo, sem est semper orci, accumsan varius turpis sem eget nulla.
        </div>
    </div>
    <div class="col3_lafo">
    <div class="bloctitre_lafo">Actualité :</div>
        <div class="bloc_lafo">
        Phasellus ac felis ut magna condimentum tincidunt. Pellentesque finibus, mauris ut lobortis condimentum, sapien ante rhoncus nibh, sed fringilla ipsum ipsum ut turpis. Sed erat felis, ultricies eu enim nec, iaculis dapibus nulla. Donec et elementum justo. Nulla id iaculis risus. Praesent quis pharetra felis. In sed justo sit amet dolor porta molestie vitae sed arcu. Morbi malesuada, orci porttitor faucibus feugiat, nisi erat venenatis ex, a euismod metus urna nec quam. Fusce at blandit lectus. Praesent lacinia tortor a vestibulum cursus. Phasellus rutrum velit id interdum accumsan. Suspendisse eget maximus lacus. Maecenas scelerisque metus lacus, quis varius mi accumsan vel.
        </div>
    </div>
</div>
<div class="fond_lafo">
<div class="liensbloc_lafo"><a class="liens_lafo" href="">Règlement</a></div><div class="liensbloc_lafo"><a class="liens_lafo" href="">Annexes</a></div><div class="liensbloc_lafo"><a class="liens_lafo" href="">Fonctionnement du forum</a></div><div class="liensbloc_lafo"><a class="liens_lafo" href="">Prédéfinis</a></div>
</div>
<div style="text-align: right; font-family: Oxygen; font-size: 12px;">PA codée par Ariemm d'<a href="">Orchedin</a></div>

CSS:
Code:
.haut_lafo {
width: 870px;
height: 70px;
padding-left: 30px;
overflow: hidden;
background-color: #999999;
font-family: Oswald;
font-size: 40px;
color: #333333;
letter-spacing: 3px;
}

.corps_lafo {
width: 900px;
background-color: #f2f2f2;
height: 410px;
}

.col1_lafo {
vertical-align: top;
display: inline-block;
width: 297px;
height: 410px;
background-color: #f2f2f2;
}

.bloctitre_lafo {
margin-left: 20px;
margin-top: 20px;
margin-bottom: 15px;
width: 257px;
height: 40px;
overflow: hidden;
font-family: Oswald;
font-size: 30px;
color: #333333;
}

.staffimg_lafo {
margin-left: 20px;
margin-bottom: 15px;
width: 257px;
height: 150px;
}

.staffimg2_lafo {
margin-left: 20px;
margin-bottom: 20px;
width: 257px;
height: 150px;
}

.col2_lafo {
vertical-align: top;
display: inline-block;
width: 297px;
height: 410px;
background-color: #f2f2f2;
}

.bloc_lafo {
margin-left: 20px;
margin-bottom: 20px;
width: 237px;
height: 295px;
padding: 10px;
background-color: #fff;
overflow: auto;
text-align: justify;
font-family: Oxygen;
font-size: 12px;
color: #333333;
}

.col3_lafo {
vertical-align: top;
display: inline-block;
width: 298px;
height: 410px;
background-color: #f2f2f2;
}

.fond_lafo {
width: 900px;
height: 40px;
background-color: #999999;
}

.liensbloc_lafo {
display: inline-block;
width: 225px;
height: 30px;
background-color: #999999;
padding-top: 10px;
text-align: center;
font-family: Oxygen;
font-size: 12px;
transition: all 0.5s ease;
}

.liensbloc_lafo:hover {
background-color: #ccc;
}

a.liens_lafo {
color: #333333;
text-decoration: none!important;
}
Revenir en haut Aller en bas
Voir le sujet précédent Voir le sujet suivant Revenir en hautPage 1 sur 1
Sujets similaires
-
» [ABANDON] Une page d'accueil à onglets
» [Lixyr Yrna] Une page d'accueil pour rainbow style
» [Akino] Un page d'accueil pour New Day :)
» Message de page d'accueil pour Amplificatum[Phantasmagoria]
» Ou se trouve le message sur la page d'accueil