Page d'accueil - Beige et simple

 :: La précision du codage :: Libre service de codage Voir le sujet précédent Voir le sujet suivant Aller en bas
avatar
Messages : 17
Date d'inscription : 27/08/2017
Age : 16
Dim 27 Aoû - 15:32
Bonjour !
Voici un petit libre service de page d'accueil, dont voici un aperçut : https://i.goopics.net/o9XLL.jpg
Le fond beige correspond à la page du forum. Il y a des effet hover sur les image de staff et les liens utiles.
J'espère que cela vous plaira Wink

HTML
Code:
<link href="https://fonts.googleapis.com/css?family=Noto+Sans|Volkhov" rel="stylesheet">
<div class="coh_base">
    <div class="coh_col1">
        <div class="coh_staffcont">
            <div class="coh_bloctitre">
                Staff
            </div>
            <a href="url_profil_staff"><div class="coh_infobulle"><img class="coh_staffimg" src=""/><div>Pseudo - Rôle<br/>Courte Description</div></div></a>
            <a href="url_profil_staff"><div class="coh_infobulle"><img class="coh_staffimg" src=""/><div>Pseudo - Rôle<br/>Courte Description</div></div></a>
            <a href="url_profil_staff"><div class="coh_infobulle"><img class="coh_staffimg" src=""/><div>Pseudo - Rôle<br/>Courte Description</div></div></a>
            <a href="url_profil_staff"><div class="coh_infobulle"><img class="coh_staffimg" src=""/><div>Pseudo - Rôle<br/>Courte Description</div></div></a>
            <a href="url_profil_staff"><div class="coh_infobulle"><img class="coh_staffimg" src=""/><div>Pseudo - Rôle<br/>Courte Description</div></div></a>
            <a href="url_profil_staff"><div class="coh_infobulle"><img class="coh_staffimg" src=""/><div>Pseudo - Rôle<br/>Courte Description</div></div></a>
        </div>
    </div>
    <div class="coh_col2">
            <div class="coh_context">
                <div class="coh_bloctitre">
                    Contexte :
                </div>
                <div class="coh_contextcont">
                    Aliquam tempus purus at turpis maximus finibus. Aliquam ut elementum lorem, in ultrices dui. Mauris euismod elementum ante, faucibus finibus lacus pulvinar nec. Cras sit amet leo quis turpis pharetra dignissim. In suscipit gravida fermentum. Suspendisse sed massa sodales, porta velit nec, laoreet diam. Nulla a aliquet arcu, eget cursus felis. Maecenas luctus, nisi vel pellentesque varius, felis felis lobortis velit, vel vehicula odio neque eget sem. In at elit dolor. Vestibulum ac velit ut ipsum mollis tempus eu eget neque. Curabitur sagittis, ex eu lacinia dictum, magna quam lacinia orci, vel bibendum enim nisi ut nulla. Nam auctor augue at nulla bibendum suscipit. Proin pellentesque, lacus et ultrices tristique, ex urna vestibulum lectus, eu aliquam justo magna ac massa. In vitae imperdiet justo, ac pretium mauris. Donec in tellus ac magna congue egestas. Sed a gravida velit.
                </div>
            </div>
            <a class="coh_lienspa" href="url_reglement"><div class="coh_liens">Règlement</div></a>
            <a class="coh_lienspa" href="url_annexes"><div class="coh_liens">Les Pouvoirs</div></a>
            <a class="coh_lienspa" href="url_effectif"><div class="coh_liens">Effectifs</div></a>
            <a class="coh_lienspa" href="url_presentation"><div class="coh_liens">Présentations</div></a>
    </div>
    <div class="coh_col3">
        <div class="coh_ecm">
            <div class="coh_ecmtitre">
                Dans la forêt...
            </div>
            <div class="coh_ecmcont">
                Aliquam tempus purus at turpis maximus finibus. Aliquam ut elementum lorem, in ultrices dui. Mauris euismod elementum ante, faucibus finibus lacus pulvinar nec. Cras sit amet leo quis turpis pharetra dignissim. In suscipit gravida fermentum. Suspendisse sed massa sodales, porta velit nec, laoreet diam. Nulla a aliquet arcu, eget cursus felis. Maecenas luctus, nisi vel pellentesque varius, felis felis lobortis velit, vel vehicula odio neque eget sem. In at elit dolor. Vestibulum ac velit ut ipsum mollis tempus eu eget neque. Curabitur sagittis, ex eu lacinia dictum, magna quam lacinia orci, vel bibendum enim nisi ut nulla. Nam auctor augue at nulla bibendum suscipit. Proin pellentesque, lacus et ultrices tristique, ex urna vestibulum lectus, eu aliquam justo magna ac massa. In vitae imperdiet justo, ac pretium mauris. Donec in tellus ac magna congue egestas. Sed a gravida velit.
            </div>
        </div>
            <a href="url_top1"><img class="coh_top" src="https://i.goopics.net/NpNy.gif"/></a>
            <a href="url_top2"><img class="coh_top" src="https://i.goopics.net/Pv8a.gif"/></a>
            <a href="url_top3"><img class="coh_top" src="https://i.goopics.net/4bXb.gif"/></a>
    </div>
    <div class="coh_col4">
        <div class="coh_actu">
            <div class="coh_bloctitre">
                Actu' :
            </div>
            <div class="coh_actucont">
                xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>xx.xx.xx : Lorem ispum.<br/>
            </div>
        </div>
    </div>
   <div style="text-align: right; font-family: Noto Sans; font-size: 12px;">PA codée par Ariemm d'<a href="http://orchedin.forumactif.org/">Orchedin</a></div>
</div>

CSS
Code:
.coh_base {
    width: 676px;
    height: 360px;
  margin-bottom: 12px;
}

.coh_col1 {
    display: inline-block;
    width: 170px;
    height: 360px;
    vertical-align:top;
}

.coh_col2 {
    display: inline-block;
    clear: both;
    width: 174px;
    height: 360px;
    vertical-align:top;
}

.coh_col3 {
    display: inline-block;
    width: 170px;
    height: 360px;
    vertical-align:top;
}

.coh_col4 {
    display: inline-block;
    width: 150px;
    height: 360px;
    vertical-align:top;
}

.coh_staffcont {
    width: 158px;
    height: 360px;
    background-color: #f9f6f5;
    overflow: auto;
}

.coh_bloctitre {
    height: 35px;
    background-color: #f0ecea;
    padding-top: 5px;
    text-align: center;
    font-family: Volkhov;
    font-size: 20px;
    color: #170b03;
}

.coh_staffimg {
    width: 140px;
    height: 60px;
}
   
.coh_context {
    margin-bottom: 12px;
    width: 162px;
    height: 192px;
    background-color: #f9f6f5;
}
   
.coh_contextcont {
    margin-left: 5px;
    margin-top: 5px;
    width: 132px;
    height: 122px;
    background-color: #fff;
    overflow: auto;
    padding: 10px;
    text-align: justify;
    font-family: Noto Sans;
    font-size: 12px;
    color: #170b03;
}
   
.coh_liens {
    margin-bottom: 12px;
    width: 162px;
    height: 27px;
    background-color: #f0ecea;
    padding-top: 3px;
    text-align: center;
    font-family: Noto Sans;
    color: #170b03;
    transition: all 1s;
}
   
.coh_liens:hover {
    background-color: #eb9d68;   
}
   
.coh_ecmtitre {
    height: 32px;
    background-color: #f0ecea;
    padding-top: 8px;
    text-align: center;
    font-family: Volkhov;
    font-size: 15px;
    color: #170b03;
}
   
.coh_ecm {
    margin-bottom: 12px;
    width: 158px;
    height: 298px;
    background-color: #f9f6f5;
}
   
.coh_ecmcont {
    margin-left: 5px;
    margin-top: 5px;
    width: 128px;
    height: 228px;
    background-color: #fff;
    overflow: auto;
    padding: 10px;
    text-align: justify;
    font-family: Noto Sans;
    font-size: 12px;
    color: #170b03;
}
   
 
.coh_top {
    width: 50px;
    height: 50px;
}
   
.coh_actu {
    width: 150px;
    height: 360px;
    background-color: #f9f6f5;
}
   
.coh_actucont {
    margin-left: 5px;
    margin-top: 5px;
    width: 120px;
    height: 290px;
    background-color: #fff;
    overflow: auto;
    padding: 10px;
    font-family: Noto Sans;
    font-size: 12px;
    color: #170b03;
}
   
.coh_lienspa {
    text-decoration: none !important; 
}
   
.coh_infobulle {
    position: relative;
    width: 140px;
    height: 60px;
    overflow: hidden;
}

.coh_infobulle div{
    position: absolute;
    bottom: -60px;
    left: 0px;
    z-index: 2;
    width: 140px;
    height: 55px;
    background-color: #594e44;
    padding-top: 5px;
    text-align: center;
    font-family: Noto Sans;
    font-size: 12px;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s;
}
   
.coh_infobulle:hover div {
    opacity: 0.75;
    visibility: visible;
    transform: translate(0,-60px);
    -webkit-transform: translate(0,-60px);
    -o-transform: translate(0,-60px);
    -moz-transform: translate(0,-60px);
}
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