Welcome

Halloween Présentation & Prédéfinis

Caelesti

Halloween, LS codage Forumactif Fiches & Messages Présentations & Prédéfinis Caelesti

Toutes versions

Optimisé Une fiche de validation ainsi qu'une page d'accueil sont également disponibles.

Retour

Codage prédéfinis Caelesti Halloween Forumactif

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><h4>Histoire</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae elit gravida, posuere lorem sit amet, hendrerit nunc. Mauris sit amet gravida nisl. Ut a enim eget orci tristique bibendum. Sed tempus egestas est, non pulvinar ante sodales at. Morbi condimentum molestie nulla, at eleifend velit faucibus in. Integer rutrum magna at libero rutrum faucibus id eu erat. Quisque semper venenatis ligula, eu ultrices mi pharetra eu.

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 class="separation"></div><div class="liens"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae elit gravida, posuere lorem sit amet, hendrerit nunc. Mauris sit amet gravida nisl. Ut a enim eget orci tristique bibendum. Sed tempus egestas est, non pulvinar ante sodales at. Morbi condimentum molestie nulla, at eleifend velit faucibus in. Integer rutrum magna at libero rutrum faucibus id eu erat. Quisque semper venenatis ligula, eu ultrices mi pharetra eu.

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><img src="https://i.pinimg.com/originals/24/fd/29/24fd29b890e3fb08c944e6097c7738fd.gif" alt="" /></div><div class="liens"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae elit gravida, posuere lorem sit amet, hendrerit nunc. Mauris sit amet gravida nisl. Ut a enim eget orci tristique bibendum. Sed tempus egestas est, non pulvinar ante sodales at. Morbi condimentum molestie nulla, at eleifend velit faucibus in. Integer rutrum magna at libero rutrum faucibus id eu erat. Quisque semper venenatis ligula, eu ultrices mi pharetra eu.

CSS

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

.predef ::-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;
}
.predef ::-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);
}

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

/* FOND NOM PRENOM CITATION */
.predef header {
        width: 100%;
        height: 200px;
        background-size: cover;
        box-sizing: border-box;
        text-align: center;
        color: #fff;
  	position: relative;
}

.predef .introduction::after, .predef .liens::after {
        content: "";
        clear: both;
        display: block;
}

/* NOM CITATION */
.predef h2 {
        color: #fff;
        font-family: 'Medula One', cursive;
        font-size: 50px;
        background: rgba(255,255,255,.5);
        width: 90%;
        position: absolute;
        display: block;
        padding: 2% 0;
        bottom: -3.5%;
        left: 5%;
        font-weight: normal;
        text-shadow: 1px 1px #000;
}

.predef h3 {
        background: rgba(255,255,255,.5);
        color: #fff;
        position: absolute;
        bottom: 8%;
        width: 90%;
        left: 5%;
        font-weight: normal;
        margin: 0;
}

.predef header .libre {
        background: green;
        padding: 0 1%;
}

.predef header .pris {
        background: darkred;
        padding: 0 1%;
}

.predef header .reserve {
        background: purple;
        padding: 0 1%;
}

/* PREMIER BLOC */
.predef .introduction {
    	border-bottom: 5px solid #000;
}

.predef .img_intro {
        float: left;
        margin: 0 5% 0 0;
}

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

.predef .introduction img:nth-child(5n+2) {
    	margin: 15% 0 0 0;
}

.predef .introduction p {
        width: 70%;
        height: 201px;
        overflow: auto;
        padding: 0 2% 0 0;
        box-sizing: border-box;
        margin: 3%;
}

/* ANECDOTES */
.predef h4 {
        color: #f3f3f3;
        font-family: 'Medula One', cursive;
        font-size: 50px;
        font-weight: 400;
        padding: 8% 0;
        text-align: center;
        margin: 0 0 4%;
        background: url(https://i.imgur.com/pekFNaZ.png);
}

.predef p {
        font-family: Calibri, sans-serif;
        margin: 0 auto;
        width: 80%;
        font-size: 12px;
}

.predef .separation {
        border-top: 5px solid #000;
  	width: 100%;
  	margin: 5% 0 0 0;
}

/* LIENS */
.predef .liens {
        margin: 5% 0 0 0;
}

.predef .liens img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        float: right;
}

.predef .liens p {
        width: 70%;
        float: left;
        margin: 2% 5%;
        height: 90px;
        overflow: auto;
        padding: 0 2% 0 0;
        box-sizing: border-box;
}

#Caelesti #Prédéfinis #forumactif #codage #libreservice

Halloween