Welcome

Halloween Fiches & Messages

Caelesti Validation

Halloween, LS codage Forumactif Fiches & Messages Autres Caelesti Validation

Toutes versions

Optimisé Une fiche de présentation/prédéfinis ainsi qu'une page d'accueil sont également disponibles.

Codage Validation Caelesti Halloween Forumactif

CSS

.validation ::-webkit-scrollbar {
        width: 7px;
        height: 14px;
        background: #cccbcb;
        border: 1px solid #a9a6a6;
}

.validation ::-webkit-scrollbar-thumb {
        border: solid 0 transparent;
        border-right-width: 2px;
        -webkit-border-radius: 5px;
        -webkit-border-top-right-radius: 9px 5px;
        -webkit-border-bottom-right-radius: 9px 5px;
        -webkit-box-shadow: inset 0 0 0 1px #000, inset 0 0 0 6px #000;
        border-left-width: 2px;
}
.validation ::-webkit-scrollbar-track-piece {
        background: transparent none;
        border: solid 4px transparent;
        border-right-width: 8px;
        margin: 4px;
        -webkit-box-shadow: inset 1px 1px 0 0 rgb(137,131,117), inset -1px -1px 0 0 rgb(224,220,210);
}

/* VALIDATION */
.validation {
        font-family: 'Quicksand', sans-serif;
        color: #000;
        width: 500px;
        margin: auto;
  	background: #f3f3f3;
        text-align: justify;
}

.validation header img {
        width: 100%;
        height: 200px;
        object-fit: cover;
}

.validation .introduction {
    border-bottom: 5px solid #000;
}

.validation .introduction::after {
  	clear: both;
  	display: block;
  	content: "";
}

.validation .introduction .img_validation {
    	float: left;
}

.validation .introduction .img_validation img {
        display: block;
        width: 100px;
        height: 100px;
        object-fit: cover;
        margin: 10% 0;
}

.validation .introduction .img_validation a img:last-child {
    	margin: 5% 0 0 0;
}

.validation .introduction .content {
        float: right;
        width: 70%;
        margin: 0 5% 0 0;
}

.validation h2 {
        font-family: 'Medula One', cursive;
        text-align: right;
        font-size: 50px;
        font-weight: normal;
        margin: 8% 0;
        color: #000;
}

.validation .introduction .content p {
        width: 100%;
        height: 120px;
        overflow: auto;
  	font-family: 'Quicksand', sans-serif;
        padding: 0 2% 0 0;
        box-sizing: border-box;
}

.validation footer a {
        margin: 1%;
        display: inline-block;
}

.validation footer img {
        width: 111.5px;
        height: 50px;
        object-fit: cover;
        margin: 0 2%;
}

HTML

Nullam venenatis ut tellus ut mattis. Pellentesque laoreet turpis ac lobortis suscipit. Etiam consequat erat eu lectus porta, ac commodo leo dignissim. Mauris dignissim faucibus ligula semper molestie. Nulla facilisi. Nullam consectetur enim quis neque venenatis condimentum. Pellentesque posuere enim sed semper tincidunt. Cras pellentesque rhoncus suscipit. Nullam eu est non lacus elementum elementum. Aenean consequat ut est a ultrices. Curabitur nec molestie magna. Etiam enim dolor, convallis et arcu ut, vehicula molestie sem.

Proin volutpat nisl eget est gravida pharetra. Proin eu lectus id lectus vulputate egestas. Curabitur finibus tincidunt luctus. Ut iaculis, lacus sit amet posuere elementum, neque lectus tempor nulla, gravida fringilla mauris metus in sem. Maecenas tempus tincidunt mauris non sodales. Integer luctus metus non massa dapibus, in accumsan velit faucibus. In hac habitasse platea dictumst. Fusce fermentum blandit interdum. Donec non nibh at metus posuere fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div></div><footer><a href="#"><img src="https://i.pinimg.com/originals/24/fd/29/24fd29b890e3fb08c944e6097c7738fd.gif" alt="" /></a> <a href="#"><img src="https://i.pinimg.com/originals/24/fd/29/24fd29b890e3fb08c944e6097c7738fd.gif" alt="" /></a> <a href="#"><img src="https://i.pinimg.com/originals/24/fd/29/24fd29b890e3fb08c944e6097c7738fd.gif" alt="" /></a> <a href="#"><img src="https://i.pinimg.com/originals/24/fd/29/24fd29b890e3fb08c944e6097c7738fd.gif" alt="" /></a></footer></div>

#caelesti #validation #forumactif #codage #libreservice

Halloween