Page d'accueil n°9

Code:

<link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

Code:

<div class="PAheroes">
            <div class="PAheroes_head">
                <img src="https://via.placeholder.com/180x180"/>
                <b>Alors, graine de super-héros, prêt à réagir ?</b>
                <span>Forum chill - inclusif - City Super Héros - 200*320 avatars illustrations<br/>On est prêts à vous accueillir !</span>
            </div>
            <div class="PAheroes_body">
                <div class="PAheroes_context">
                    <b>Un grand pouvoir implique de grandes responsabilités</b>
                    <p>
                        Nam a nulla diam. Maecenas varius purus ipsum, sed euismod velit accumsan in. Cras blandit vitae lectus eget accumsan. Fusce vel velit venenatis, tristique lorem eu, posuere est. Etiam pretium, ipsum sit amet lacinia vehicula, orci odio pharetra nisi, et ultricies nibh erat ac lorem. Suspendisse vitae auctor ligula, eget malesuada ex. Curabitur quam massa, lobortis quis sapien at, porta fringilla enim. Phasellus bibendum cursus sem. Maecenas fringilla, ligula et faucibus pharetra, lacus purus vulputate odio, vitae dapibus turpis purus eu tortor. Nullam vulputate tincidunt feugiat. Fusce eget diam et nibh malesuada scelerisque. Curabitur pretium, nisl ac vulputate varius, felis augue interdum nisl, a volutpat eros leo vel nisl. Aliquam porttitor eros sed augue elementum tristique. Curabitur mattis elementum tortor ac placerat.
                    </p>
                    <a href="#">+ de contexte</a>
                </div>
                <div class="PAheroes_center">
                    <div class="PAheroes_links">
                        <a href="#">Lien</a>
                        <a href="#">Lien</a>
                        <a href="#">Lien</a>
                        <a href="#">Lien</a>
                        <a href="#">Lien</a>
                        <a href="#">Lien</a>
                        <a href="#">Lien</a>
                        <a href="#">Lien</a>
                    </div>
                    <div class="PAheroes_staff">
                        <div class="PAheroes_staff_info">
                            <img src="https://via.placeholder.com/110x150"/>
                            <div>
                                <a href="#">Pseudo</a>
                                <span>rôle</span>
                                <a href="#">MP</a>
                            </div>
                        </div>
                        <div class="PAheroes_staff_info">
                            <img src="https://via.placeholder.com/110x150"/>
                            <div>
                                <a href="#">Pseudo</a>
                                <span>rôle</span>
                                <a href="#">MP</a>
                            </div>
                        </div>
                        <div class="PAheroes_staff_info">
                            <img src="https://via.placeholder.com/110x150"/>
                            <div>
                                <a href="#">Pseudo</a>
                                <span>rôle</span>
                                <a href="#">MP</a>
                            </div>
                        </div>
                    </div>
                    <div class="PAheroes_partos">
                        <a href="#"><img src="https://via.placeholder.com/45x45"/></a>
                        <a href="#"><img src="https://via.placeholder.com/45x45"/></a>
                        <a href="#"><img src="https://via.placeholder.com/45x45"/></a>
                        <a href="#"><img src="https://via.placeholder.com/45x45"/></a>
                        <a href="#"><img src="https://via.placeholder.com/45x45"/></a>
                        <a href="#"><img src="https://via.placeholder.com/45x45"/></a>
                        <a class="PAheroes_plus" href="#">+</a>
                    </div>
                    <div class="PAheroes_topsite">
                        <span>Rendez nous <br/><b>célèbre →</b></span>
                        <div>
                            <a class="top1" href="#">1</a>
                            <a class="top2" href="#">2</a>
                            <a class="top3" href="#">3</a>
                            <a class="top4" href="#">4</a>
                        </div>
                    </div>
                </div>
                <div class="PAheroes_predef">
                    <a href="#"><img src="https://via.placeholder.com/80x80"/></a>
                    <a href="#"><img src="https://via.placeholder.com/80x80"/></a>
                    <a href="#"><img src="https://via.placeholder.com/80x80"/></a>
                    <a href="#"><img src="https://via.placeholder.com/80x80"/></a>
                    <a href="#"><img src="https://via.placeholder.com/80x80"/></a>
                    <a href="#"><img src="https://via.placeholder.com/80x80"/></a>
                    <a href="#"><img src="https://via.placeholder.com/80x80"/></a>
                    <a href="#"><img src="https://via.placeholder.com/80x80"/></a>
                    <div>
                        <b>On les cherche !</b>
                        <a href="#">Autres recherchés</a>
                    </div>
                </div>
            </div>
            <div class="PAheroes_foot">
                <span>KoalaVolant & void_invaders ▬ <a href="https://pisrale.forumactif.com/">Pisrale</a></span>
            </div>
        </div>

Code:

.PAheroes {
    width: 900px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Public Sans", sans-serif;
}

.PAheroes a {
    text-decoration: none;
}

.PAheroes_head {
    position: relative;
    width: 100%;
    height: 200px;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
}

.PAheroes_head::after {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #b84080;
    clip-path: polygon(5% 10%, 95% 25%, 98% 85%, 10% 95%);
}

.PAheroes_head img {
    position: absolute;
    bottom: 10px;
    background-color: blueviolet;
    width: 180px;
    height: 180px;
    transform: rotate(-15deg);
}

.PAheroes_head b, .PAheroes_head span {
    text-align: right;
    display: block;
    color: #fff;
}

.PAheroes_head b {
    font-size: 28px;
    padding: 15px 50px 0 190px;
}

.PAheroes_head span {
    letter-spacing: 1px;
    font-weight: lighter;
    font-size: 18px;
    padding-right: 40px;
    padding-left: 200px;
}

.PAheroes_body {
    margin-top: -50px;
    width: 93%;
    height: 500px;
    display: flex;
    background-color: #fff;
}

.PAheroes_context {
    width: 30%;
    background-color: #3cb6b5;
    padding: 50px 20px 20px;
    text-align: justify;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.PAheroes_context b {
    font-size: 24px;
    line-height: 24px;
    padding-top: 10px;
}

.PAheroes_context p {
    overflow: auto;
    scrollbar-color: #fff #3cb6b5;
    scrollbar-width: thin;
    padding-right: 5px;
    font-family: "Public Sans", sans-serif;
    font-weight: lighter;
    line-height: 16px;
    margin-block-start: 0;
    margin-block-end: 0;
}

.PAheroes_context a {
    text-align: center;
    font-size: 24px;
    color: #fff!important;
    font-weight: bold;
}

.PAheroes_context a:hover {
    color: #b84080!important;
}

.PAheroes_center {
    width: 45%;
    padding: 40px 0 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.PAheroes_links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 8px;
}

.PAheroes_links a {
    width: 49%;
    background-color: #fdeef6;
    padding: 5px 0;
    text-align: center;
    color: #b84080!important;
    font-weight: bold;
    font-size: 20px;
}

.PAheroes_links a:hover {
    color: #3cb6b5!important;
    background-color: #e4ffff;
}

.PAheroes_staff {
    display: flex;
    justify-content: space-between;
}

.PAheroes_staff_info {
    position: relative;
    width: 110px;
    height: 150px;
}

.PAheroes_staff_info img, .PAheroes_staff_info div {
    width: 100%;
    height: 100%;
}

.PAheroes_staff_info div {
    position: absolute;
    top: 0;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f5ffff;
}

.PAheroes_staff_info div:hover {
    opacity: 1;
    transition: all ease-in-out 0.5s;
}

.PAheroes_staff_info div a {
    color: #3cb6b5!important;
    font-weight: bold;
}

.PAheroes_staff_info div a:hover {
    color: #b84080!important;
}

.PAheroes_partos {
    display: flex;
    justify-content: space-between;
}

.PAheroes_partos a {
    display: block;
    width: 45px;
    height: 45px;
    background-color: #3cb6b5;
}

.PAheroes_partos a img {
    width: 100%;
    height: 100%;
}

.PAheroes_plus {
    display: flex;
    align-content: center;
    text-align: center;
    color: #fff!important;
    font-weight: bolder;
    font-size: 35px;
}

.PAheroes_plus a {
    color: #fff!important;
}

.PAheroes_plus:hover {
    background-color: #b84080;
}

.PAheroes_topsite {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px;
    gap: 15px;
}

.PAheroes_topsite span {
    color: #b84080;
    font-weight: bolder;
    letter-spacing: 1px;
    font-size: 20px;
    text-align: center;
}

.PAheroes_topsite span b {
    font-size: 25px;
    letter-spacing: 0px;
}

.PAheroes_topsite div {
    display: flex;
    gap: 10px;
}

.PAheroes_topsite div a {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #fff!important;
    font-weight: bolder;
}

.top1 {
    background-color: #3cb6b5;
}
.top2 {
    background-color: #9ae7e7;
}
.top3 {
    background-color: #e67eb5;
}
.top4 {
    background-color: #b84080;
}

.PAheroes_predef {
    display: flex;
    width: 25%;
    padding-top: 45px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.PAheroes_predef a {
    display: block;
    width: 80px;
    height: 80px;
}

.PAheroes_predef a img {
    width: 100%;
    height: 100%;
}

.PAheroes_predef div {
    display: flex;
    font-weight: bolder;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 25px;
    margin-top: 15px;
}

.PAheroes_predef b {
    font-size: 20px;
    color: #b84080;
}

.PAheroes_predef div a {
    width: 100%;
    height: auto;
    border: 2px solid #3cb6b5;
    border-radius: 10px;
    padding: 5px;
    color: #3cb6b5!important;
    font-size: 14px;
    text-align: center;
}

.PAheroes_predef div a:hover {
    color: #b84080!important;
    border-color: #b84080;
}

.PAheroes_foot {
    z-index: 1;
    position: relative;
    width: 100%;
    height: 80px;
    margin-top: -20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.PAheroes_foot::after {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #b84080;
    clip-path: polygon(2% 20%, 98% 10%, 96% 100%, 5% 80%);
}

.PAheroes_foot span {
    color: #fff;
    font-weight: lighter;
    padding-bottom: 5px;
    font-size: 12px;
    letter-spacing: 1px;
}

.PAheroes_foot span a {
    font-weight: bold;
    color: #fff !important;
}

.PAheroes_foot span a:hover {
    color: #9ae7e7 !important;
}

Page d'accueil n°9

Page d'accueil n°9

Nos amis proches