PA Arrondie, par Sieben

1 Favori

Sieben le 17 Déc 2021 à 11h35

PA prévue pour une largeur de 880px. N'hésitez pas à la tripatouiller si vous voulez l'adapter à une autre largeur.

- Code par Sieben, d'après une maquette de Sherlock.

Pour la partie CSS, pensez bien à vérifier que, tout en bas de la page, l'option "Optimiser votre CSS" est réglée sur "Non".

Si vous conservez les typos utilisées sur ce LS, il s'agit des polices ABeeZee et Aguafina Script sur Google Fonts. Pour les installer, rendez-vous dans votre panneau d'administration, allez dans la section Affichage → Templates → Général et éditez le template overall_header.

Cherchez la balise fermante </head>, et juste avant ajoutez le code suivant :

<link href="https://fonts.googleapis.com/css?family=ABeeZee" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Aguafina+Script" rel="stylesheet">

HTML

                        <div id="PA">
    <h1>Once upon a midnight dreary</h1>

    <div id="PAhaut">
        <div id="PAcontexte">
            <h2>Contexte</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit perspiciatis optio ratione sit. Doloremque
                nam impedit vel eum! Quasi quae laboriosam illum ipsam unde quo praesentium eius libero inventore
                quaerat.
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem nobis sed nesciunt nam culpa! Officiis
                minus iure, laboriosam et repellat quae odit laborum officia unde natus illo saepe! Eligendi,
                recusandae.</p>
        </div>

        <div id="PAimg">
            <img src="https://via.placeholder.com/190x190" alt="ILLUSTRATION">
            <ul>
                <li>Info</li>
                <li>Info</li>
                <li>Info</li>
                <li>Info</li>
                <li>Info</li>
            </ul>
        </div>

        <div id="PAnews">
            <h2>29/07/21</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia aspernatur quisquam odio ipsam quidem
                impedit sit repellendus tempore, magnam ea quasi explicabo veniam deleniti asperiores maiores recusandae
                consectetur exercitationem dolore?</p>

            <h2>29/07/21</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia aspernatur quisquam odio ipsam quidem
                impedit sit repellendus tempore, magnam ea quasi explicabo veniam deleniti asperiores maiores recusandae
                consectetur exercitationem dolore?</p>

            <h2>29/07/21</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia aspernatur quisquam odio ipsam quidem
                impedit sit repellendus tempore, magnam ea quasi explicabo veniam deleniti asperiores maiores recusandae
                consectetur exercitationem dolore?</p>
        </div>
    </div>

    <div id="PAbas">
        <ul id="PAstaff">
            <li>
                <img src="https://via.placeholder.com/85x85" alt="PSEUDO_STAFF">
                <h3>Staffeux</h3>
                <p>pnj - <a href="/">mp</a></p>
            </li>
            <li>
                <img src="https://via.placeholder.com/85x85" alt="PSEUDO_STAFF">
                <h3>Staffeux</h3>
                <p>admin - <a href="/">mp</a></p>
            </li>
            <li>
                <img src="https://via.placeholder.com/85x85" alt="PSEUDO_STAFF">
                <h3>Staffeux</h3>
                <p>admin - <a href="/">mp</a></p>
            </li>
        </ul>

        <div>
            <div id="PAtop">
                <a href="/" target="_blank"><img src="https://www.zupimages.net/up/21/30/lu5v.png" alt="TOP_SITE"></a>
                <a href="/" target="_blank"><img src="https://www.zupimages.net/up/21/30/lu5v.png" alt="TOP_SITE"></a>
                <a href="/" target="_blank"><img src="https://www.zupimages.net/up/21/30/lu5v.png" alt="TOP_SITE"></a>
                <a href="/" target="_blank"><img src="https://www.zupimages.net/up/21/30/lu5v.png" alt="TOP_SITE"></a>
                <a href="/" target="_blank"><img src="https://www.zupimages.net/up/21/30/lu5v.png" alt="TOP_SITE"></a>
            </div>
            <div id="PAmdm">
                <img src="https://via.placeholder.com/250x60" alt="MEMBRE_DU_MOIS">
                <div>
                    <h3>Nom Prénom</h3>
                    <span><a href="/">mp</a> - <a href="/">fiche</a> - <a href="/">liens</a></span>
                </div>
            </div>
        </div>

        <ul id="PApredefs">
            <li>
                <img src="https://via.placeholder.com/73x140" alt="PREDEFINI">
                <div>
                    <h3>Nom Prénom</h3>
                    <p><a href="/">fiche</a></p>
                </div>
            </li>
            <li>
                <img src="https://via.placeholder.com/73x140" alt="PREDEFINI">
                <div>
                    <h3>Nom Prénom</h3>
                    <p><a href="/">fiche</a></p>
                </div>
            </li>
            <li>
                <img src="https://via.placeholder.com/73x140" alt="PREDEFINI">
                <div>
                    <h3>Nom Prénom</h3>
                    <p><a href="/">fiche</a></p>
                </div>
            </li>
            <li>
                <img src="https://via.placeholder.com/73x140" alt="PREDEFINI">
                <div>
                    <h3>Nom Prénom</h3>
                    <p><a href="/">fiche</a></p>
                </div>
            </li>
        </ul>
    </div>

    <div id="PApartos">
        <a href="/" target="_blank"><img src="https://via.placeholder.com/60x60" alt="PARTENAIRE"></a>
        <a href="/" target="_blank"><img src="https://via.placeholder.com/60x60" alt="PARTENAIRE"></a>
        <a href="/" target="_blank"><img src="https://via.placeholder.com/60x60" alt="PARTENAIRE"></a>
        <a href="/" target="_blank"><img src="https://via.placeholder.com/60x60" alt="PARTENAIRE"></a>
        <a href="/" target="_blank"><img src="https://via.placeholder.com/60x60" alt="PARTENAIRE"></a>
        <a href="/" target="_blank"><img src="https://via.placeholder.com/60x60" alt="PARTENAIRE"></a>
        <a href="/" target="_blank"><img src="https://via.placeholder.com/60x60" alt="PARTENAIRE"></a>
        <a href="/" target="_blank"><img src="https://via.placeholder.com/60x60" alt="PARTENAIRE"></a>
        <a href="/" target="_blank"><img src="https://via.placeholder.com/60x60" alt="PARTENAIRE"></a>
        <a href="/" target="_blank"><img src="https://via.placeholder.com/60x60" alt="PARTENAIRE"></a>
        <a href="/" target="_blank"><img src="https://via.placeholder.com/60x60" alt="PARTENAIRE"></a>
        <a href="/" target="_blank"><img src="https://via.placeholder.com/60x60" alt="PARTENAIRE"></a>
    </div>

    <div id="PAcredits"><a href="https://www.epicode-entraide.com/">(c) Sieben & Sherlock</a></div>
</div>

CSS

                            /*********** PAGE D'ACCUEIL PAR SIEBEN *******/

/* Aspect général */
#PA {
    width         : 855px;
    color         : #ffffff;
    /* Couleur des textes */
    border        : 1px solid #192727;
    /* Bordure de la PA */
    background    : #051414;
    /* Fond de la PA */
    margin        : auto;
    padding       : 0 12px;
    display       : flex;
    flex-direction: column;
    font-size: 11px;
}

/* Cache la scrollbar sous chrome */
#PA ::-webkit-scrollbar {
    display: none;
}

#PA a,
#PA a:visited {
    color: #ffffff;
    /* Couleur des liens */
}

#PA a:hover {
    color: #AAA59B;
    /* Couleur des liens au survol */
}

#PA p {
    margin: 0;
}

#PA ul {
    list-style-type: none;
    margin         : 0;
    padding        : 0;
}

#PA h3 {
    margin     : 0;
    font-weight: unset;
    font-size  : 16px;
    text-align: center;
    width: 100%;
}

#PA img {
    object-fit: cover;
}

/* Titres */
#PA h1,
#PA h2,
#PA h3 {
    font-family: 'Aguafina Script', cursive;
    /* Typo des titres */
    color      : #ffffff;
    /* Couleur des titres (sauf citation) */
}

#PA h1,
#PA #PAhaut {
    background   : #0B110F;
    /* Fond citation & bloc haut */
    border       : 1px solid #ffffff;
    /* Bordure citation & bloc haut */
    border-radius: 10px;
}

/* Citation de début */
#PA h1 {
    color         : #345C4E;
    /* Couleur citation */
    text-align    : center;
    font-size     : 40px;
    letter-spacing: 4px;
    padding       : 6px;
}

/*** Partie haute ***/
#PA #PAhaut {
    display        : flex;
    justify-content: space-evenly;
    height         : 170px;
    text-align     : justify;
}

#PA #PAhaut h2 {
    font-size: 30px;
    margin   : 5px 0 0;
}

#PA #PAhaut #PAcontexte,
#PA #PAhaut #PAnews {
    width          : calc(107%/3);
    overflow-y     : scroll;
    scrollbar-width: none;
    padding-bottom : 10px;
}

#PA #PAhaut #PAcontexte h2 {
    margin-left: 10px;
}

/* Image centrale */
#PA #PAhaut #PAimg {
    border       : 3px solid #ffffff;
    /* Couleur bordure */
    overflow     : hidden;
    border-radius: 100px;
    top   : -10px;
    position     : relative;
}

#PA #PAhaut #PAimg,
#PA #PAhaut #PAimg img,
#PA #PAhaut #PAimg ul {
    width : 190px;
    height: 190px;
}

/* Infos au survol de l'image */
#PA #PAhaut #PAimg ul {
    background     : rgba(20, 21, 23, .4);
    /* Fond sur l'image au survol */
    position       : absolute;
    top            : 0;
    text-align     : center;
    display        : flex;
    flex-direction : column;
    justify-content: space-evenly;
    opacity        : 0;
    transition     : all .5s ease-in-out;
}

#PA #PAhaut #PAimg:hover ul {
    opacity: 0.8;
}

#PA #PAhaut #PAimg ul li {
    font-family   : 'ABeeZee', sans-serif;
    /* Typo */
    color         : #DCDCDC;
    /* Couleur texte */
    text-transform: uppercase;
    transition    : all .5s ease-in-out;
}

#PA #PAhaut #PAimg ul li:hover {
    background: #141517;
    /* Couleur de fond des infos au survol*/
}

#PA #PAhaut #PAnews h2 {
    text-align   : right;
    padding-right: 10px;
}


/*** Partie basse ***/
#PA #PAbas {
    display        : flex;
    justify-content: space-between;
    margin-top     : 15px;
}

#PA #PAbas p {
    border-top: 1px solid #ffffff;
    /* Couleur séparation nom / rang */
    width     : 80%;
    text-align: center;
}

#PA #PAbas>div:nth-child(2) #PAmdm div,
#PA #PAbas #PApredefs li div {
    position  : absolute;
    top       : 0;
    width     : 100%;
    opacity   : 0;
    transition: all .5s ease-in-out;
}

#PA #PAbas>div:nth-child(2) #PAmdm:hover div,
#PA #PAbas #PApredefs li:hover div {
    opacity: 1;
}

#PA #PAbas>div:nth-child(2) #PAmdm div,
#PA #PAbas #PApredefs li div {
    background: rgba(20, 21, 23, .4);
    /* Couleur fond pour assombrir les img au survol */
}

/* Img staff & membre mois */
#PA #PAbas #PAstaff img,
#PA #PAbas>div:nth-child(2) #PAmdm img,
#PA #PAbas>div:nth-child(2) #PAmdm div {
    border       : 3px solid #ffffff;
    /* Couleur bordure */
    border-radius: 10px;
}

/* Img predefs */
#PA #PAbas #PApredefs img,
#PA #PAbas #PApredefs li div {
    border       : 1px solid #ffffff;
    /* couleur bordure */
    border-radius: 10px;
}

/* Staff */
#PA #PAbas #PAstaff {
    display        : flex;
    justify-content: space-around;
    align-items    : center;
    width          : calc(97%/3);
}

#PA #PAbas #PAstaff img {
    width : 85px;
    height: 85px;
}

/* TS & membre du mois */
#PA #PAbas>div:nth-child(2) {
    display        : flex;
    flex-direction : column;
    justify-content: space-around;
}

#PA #PAbas>div:nth-child(2) #PAtop {
    display        : flex;
    justify-content: space-between;
}

#PA #PAbas>div:nth-child(2) #PAmdm {
    position: relative;
}

#PA #PAbas>div:nth-child(2) #PAmdm img {
    width : 250px;
    height: 60px;
}

#PA #PAbas>div:nth-child(2) #PAmdm div,
#PA #PAbas #PApredefs li div {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-content: center;
    flex-flow: wrap;
    justify-content: center;
}

/* Predefs */
#PA #PAbas #PApredefs {
    display        : flex;
    justify-content: space-around;
    width          : calc(107%/3);
}

#PA #PAbas #PApredefs li {
    position: relative;
}

#PA #PAbas #PApredefs li img,
#PA #PAbas #PApredefs li div {
    width : 73px;
    height: 140px;
    box-sizing: content-box;
}

/* Partenaires */
#PA #PApartos {
    margin         : 15px 0;
    display        : flex;
    justify-content: space-between;
}

#PA #PApartos img {
    border       : 3px solid #ffffff;
    /* Bordure images */
    border-radius: 100px;
    width        : 60px;
    height       : 60px;
    opacity      : 0.7;
    transition   : all .5s ease-in-out;
}

#PA #PApartos img:hover {
    opacity: 1;
}

#PA #PAcredits {
    margin-bottom: 10px;
    font-size    : 8px;
    font-family  : 'georgia';
}

#PA #PAcredits a {
    color: darkslategrey !important;
}

/*********** FIN PAGE D'ACCUEIL *******/

Commentaires

VIP depuis le 06/03/2020

Lawrage le 17 Déc 2021 à 15h03

J'aime les fiches avec pleins de petits recoins et animations partout héhé. Je sens que je vais beaucoup aimer ton travail en codage 8)

Sieben le 17 Déc 2021 à 19h39

Merci beaucoup !

Planquer des trucs c'est une de mes grandes passions aussi c:
Malheureusement je suis absolument immonde question maquettes/sens esthétique, donc cette partie-là est à l'honneur de mes maquetteurs.ices :D (Ici Sherlock)

Vous devez être inscrit et connecté pour pouvoir poster un commentaire.