Terrible

Bienvenue sur Terrible, le forum de libre-service pour vos codages de forums. Venez trouver ici toutes sortes de codes pour agrémenter aussi bien vos templates que vos messages, sans avoir besoin d'inscription !


Terrible :: Code forum :: PA
avatar
le Dim 5 Aoû - 22:12


PA conçue pour l'index complet Meitha. Peut nécessiter des ajustements pour être utilisée hors de cet index.
Créditez-moi quelque part sur votre forum si vous utilisez ce code


Codes et explications

Pour installer votre page d'accueil, je vous conseille de créer une iframe et de l'installer dans l'emplacement réservé aux pages d'accueil.

Dans votre panneau d'administration, Modules > HTML & Javascript > Gestion des pages HTML. Cliquez sur le bouton "CRÉATION EN MODE AVANCÉ (HTML)" puis copiez et collez le code suivant dans le contenu de la page :
Code:
<head>
    <meta charset="utf-8">
    <title>PA</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:900|Cousine" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <style>
      body {
         margin: 0;
         padding: 0;
    }
     #pa {
         width: 825px;
         box-sizing: border-box;
         padding: 5px;
         display: flex;
         font-family: 'Roboto', sans-serif;
         flex-wrap: wrap;
    }
     #pa a {
         text-decoration: none!important;
    }
     .pa-liens {
         flex: 100%;
         display: flex;
         margin-bottom: 10px;
         flex-wrap: wrap;
    }
     .pa-liens a {
         height: 20px;
         background: #C3A7CC;
         border: 1px solid #b28eb9;
         margin-bottom: 5px;
         text-align: center;
         text-transform: uppercase;
         line-height: 20px;
         color: #fff;
         margin-right: 5px;
         box-sizing: border-box;
         text-shadow: 1px 0px 0px #b28eb9, -1px 0px 0px #b28eb9, 0px 1px 0px #b28eb9, 0px -1px 0px #b28eb9;
         font-family: 'Cousine', monospace;
         font-size: 8px;
         letter-spacing: 1px;
         flex: 1;
         transition: background 0.3s;
    }
     .pa-liens a:hover {
         background: #DDBDE7;
    }
     .pa-liens a:last-child {
         margin-right: 0px;
    }
     #pa > div:nth-child(2) {
         height: 258px;
         width: 420px;
         display: flex;
         flex-wrap: wrap;
         align-content: flex-start;
    }
     #pa h1 {
         margin: 0;
         font-family: 'Montserrat', sans-serif;
         color: #fff;
         width: 200px;
         font-size: 30px;
         line-height: 1;
         text-shadow: 1px 1px 0px #b28eb9;
    }
     #pa h2 {
         margin: 0 0 10px;
         font-family: 'Cousine', Monospace;
         color: #000;
         font-size: 8px;
         text-shadow: 1px 0px 0px #fff, -1px 0px 0px #fff, 0px 1px 0px #fff, 0px -1px 0px #fff;
         letter-spacing: 1px;
         text-transform: uppercase;
         font-weight: normal;
         border-bottom: 1px solid #ccc;
         padding-bottom: 3px;
    }
     .contexte {
         flex: 1;
         background: #f9f9f9;
         box-sizing: border-box;
         border: 15px solid #f9f9f9;
         border-right: 5px solid #f9f9f9;
    }
     #pa > div:nth-child(2) .contexte {
         height: 198px;
    }
     .contexte > div {
         height: 100%;
         overflow: auto;
         text-align: justify;
         padding-right: 10px;
         box-sizing: border-box;
         font-size: 11px;
         line-height: 14px;
    }
     #pa > div:nth-child(3) {
         width: 200px;
         margin: 0 10px;
         display: flex;
         flex-direction: column;
    }
     .pa-staff {
         margin: 10px 0px 0px;
         display: flex;
         justify-content: space-between;
         flex: 100%;
    }
     .pa-staff > div {
         height: 50px;
         width: 100px;
         position: relative;
         overflow:hidden;
    }
     .pa-staff > div > div {
         height: 100%;
         width: 100%;
         background: #f9f9f9;
         display: flex;
         flex-direction: column;
         justify-content: center;
         font-size: 9px;
         text-align: center;
         text-transform: uppercase;
         transform: translate(0,0);
         transition: all 0.3s;
    }
     .pa-staff > div > div a {
         color: #b28eb9;
         transition: color 0.3s;
    }
     .pa-staff > div > div a:hover {
         color: #C3A7CC;
    }
     .pa-staff > div > div b {
         font-family: 'Montserrat', sans-serif;
         font-size: 8px;
    }
     .pa-staff > div:hover > div {
         transform: translate(0,-50px);
    }
     .pa-staff .statut {
         color: green;
         font-family: 'Cousine', monospace;
         font-size: 8px;
         letter-spacing: 1px;
    }
     .pa-staff .statut.absent {
         color: red;
    }
     #pa > div:nth-child(3) .contexte {
         height: 234px;
    }
     date {
         display: block;
         height: 15px;
         line-height: 15px;
         background: #C3A7CC;
         border: 1px solid #b28eb9;
         margin-bottom: 3px;
         text-transform: uppercase;
         color: #fff;
         text-shadow: 1px 0px 0px #b28eb9, -1px 0px 0px #b28eb9, 0px 1px 0px #b28eb9, 0px -1px 0px #b28eb9;
         font-family: 'Cousine', monospace;
         font-size: 8px;
         letter-spacing: 1px;
         padding-left: 10px;
         border-radius: 2px;
    }
     .pa-partenaires {
         align-content: flex-start;
         flex: 1;
         display: flex;
         justify-content: space-between;
         flex-direction: column;
    }
     .pa-partenaires > div:first-of-type {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         min-height: 170px;
         align-content: space-between;
    }
     .pa-partenaires > div:first-of-type a {
         height: 50px;
         width: 50px;
    }
     .pa-partenaires > a {
         flex: 1;
         text-transform: uppercase;
         color: #000;
         background: #f7f7f7;
         margin-top: 10px;
         box-sizing: border-box;
         border: 1px solid #e1e1e1;
         display: flex;
         flex-direction: column;
         justify-content: center;
         text-shadow: 1px 0px 0px #fff, -1px 0px 0px #fff, 0px 1px 0px #fff, 0px -1px 0px #fff;
         font-family: 'Cousine', monospace;
         font-size: 8px;
         letter-spacing: 1px;
         position: relative;
         padding-left: 40px;
    }
     .pa-partenaires > a::before {
         content:"\f005";
         font-family: "Font Awesome 5 Free";
         font-weight: 900;
         height: 100%;
         width: 30px;
         position: absolute;
         top: -1px;
         left: -1px;
         background: #C3A7CC;
         border: 1px solid #b28eb9;
         text-align: center;
         color: #fff;
         text-shadow: 1px 0px 0px #b28eb9, -1px 0px 0px #b28eb9, 0px 1px 0px #b28eb9, 0px -1px 0px #b28eb9;
         font-size: 8px;
         letter-spacing: 1px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         transition: background 0.3s;
    }
     .pa-partenaires > a:hover::before {
         background: #DDBDE7;
    }
    </style>
</head>

<body>
    <div id="pa">

        <!-- BLOC LIENS -->
        <div class="pa-liens">
            <a href="#">Un lien</a>
            <a href="#">Un lien</a>
            <a href="#">Un lien</a>
            <a href="#">Un lien</a>
            <a href="#">Un lien</a>
            <a href="#">Un lien</a>
        </div>

        <div>
            <!-- TITRE DE LA PA -->
            <h1>Bienvenue sur les chroniques de Meitha</h1>

            <!-- BLOC CONTEXTE -->
            <div class="contexte">
                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie condimentum tortor, a porttitor tellus mollis at. Ut gravida ex mi, id vehicula lorem pharetra vitae. In hac habitasse platea dictumst. Morbi et nulla tempor, tristique
                    libero vel, volutpat sem. Nam vel purus ultricies, pellentesque arcu nec, ullamcorper velit. Suspendisse pulvinar orci sed ipsum tincidunt, sit amet cursus felis interdum.
                </div>
            </div>

            <!-- STAFF -->
            <div class="pa-staff">
                <div>
                    <img src="http://via.placeholder.com/100x50" />
                    <div>
                        <b>Pseudo</b>
                        <div><a href="#" target="_blank">Profil</a> & <a href="#" target="_blank">MP</a></div>
                        <div class="statut">Présent</div>
                    </div>
                </div>
                <div>
                    <img src="http://via.placeholder.com/100x50" />
                    <div>
                        <b>Pseudo</b>
                        <div><a href="#" target="_blank">Profil</a> & <a href="#" target="_blank">MP</a></div>
                        <div class="statut">Présent</div>
                    </div>
                </div>
                <div>
                    <img src="http://via.placeholder.com/100x50" />
                    <div>
                        <b>Pseudo</b>
                        <div><a href="#" target="_blank">Profil</a> & <a href="#" target="_blank">MP</a></div>
                        <div class="statut">Présent</div>
                    </div>
                </div>
                <div>
                    <img src="http://via.placeholder.com/100x50" />
                    <div>
                        <b>Pseudo</b>
                        <div><a href="#" target="_blank">Profil</a> & <a href="#" target="_blank">MP</a></div>
                        <div class="statut absent">Absent</div>
                    </div>
                </div>
            </div>

        </div>

        <!-- BLOC ANNONCES -->
        <div>
            <h2>Annonces</h2>
            <div class="contexte">
                <div>
                    <div>
                        <date>24 juin 2018</date>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </div>
                </div>

            </div>
        </div>

        <!-- PARTENAIRES -->
        <div class="pa-partenaires">
            <h2>Partenaires</h2>
            <div>
                <a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
                <a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
                <a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>

                <a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
                <a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
                <a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>

                <a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
                <a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
                <a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
            </div>
            <a href="#" target="_blank">Devenir partenaire ?</a>
        </div>

    </div>

</body>

Puis dans Affichage > Page d'accueil > Généralités, collez le code suivant :
Code:
<iframe frameborder="0" src="VOTRE URL" scrolling="no" style="width: 825px; height: 307px;"></iframe>

Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum