Welcome

Halloween Publicité

Wicked

Halloween, LS codage Forumactif Fiches & Messages Publicités Publicité Wicked

Toutes versions

Optimisé Une liste des sujets, un profil & message, un index complet, des fiches de contexte, validation, présentation, règlement et groupes sont disponibles.
Réalisé pour le forum Wicked.

Retour

Codage publicité Colby Lake Halloween Forumactif

Créer une page HTML

<!DOCTYPE html>
<html lang="fr">
<head>
        <meta charset="UTF-8" />
        <title>Wicked</title>
  
  	<style>
          	.wicked ::-webkit-scrollbar {
    			width: 4px;
		}

.wicked ::-webkit-scrollbar-thumb {
    			background: #c84a6f;
		}

.wicked ::-webkit-scrollbar-track {
    			background: #cfcbcc;
		}
          
          	body {
    			margin: 0;
		}
          
          	.wicked {
                        background: #cecbcc;
                        width: 500px;
                        margin: auto;
                        font-family: Calibri;
          		overflow: hidden;
                        font-weight: bold;
                        font-style: italic;
                        text-align: center;
                        font-size: 12px;
                        color: #666;
                        position: relative;
                        padding: 0 0 1.5%;
		}
          
          	.wicked header {
                      background: url(https://i.servimg.com/u/f26/19/99/69/81/fond_f11.png);
                      text-align: center;
                      padding: .3% 0;
		}
          
          	.wicked header h2 {
                      font-size: 100px;
                      margin: -4% 0 0 0;
                      padding: 0;
                      text-transform: uppercase;
		}
          
          	.wicked header h3 {
                      margin: -4% 0 0 0;
                      padding: 0;
                      text-transform: uppercase;
                      letter-spacing: 1px;
                      font-size: 10px;
		}
          
          	.wicked .separation span {
                      color: #de4f7f;
                      margin: 0 3%;
		}
          
          	.wicked section {
    			position: relative;
		}
          
          	.wicked .trapeze_gauche, .wicked .trapeze_droit {
                      width: 1px;
                      height: 40px;
                      border: 1px solid #de4f7f;
                      border-color: transparent transparent transparent #de4f7f;
                      border-width: 40px;
                      transform: rotate(-180deg);
                      position: absolute;
                      left: -8.2%;
                      top: 7%;
		}
          
          	.wicked .trapeze_droit {
    			right: -8.2%;
          		transform: inherit;
          		left: auto;
		}
          
          	.wicked .content {
                      background: #e9e7ec;
                      width: 85%;
                      margin: 2% auto;
                      border: 1px solid #b6b5b7;
                      line-height: 1.5;
                      box-sizing: border-box;
                      position: relative;
                      z-index: 3;
		}
          
          	.wicked .content p {
                      width: 90%;
                      margin: 2% auto;
                      height: 120px;
                      overflow: auto;
          		font-size: 11px;
                      text-align: justify;
                      padding: 0 2% 0 0;
		}
          
          	.wicked a, .wicked a:hover {
                      color: #666;
                      text-decoration: none;
                      transition: .5s all;
		}
          
          	.wicked .liens_utiles {
                      margin: 0 0 2%;
          		text-transform: uppercase;
		}
          
          	.wicked .liens_utiles a:hover {
    			color: #de4f7f;
		}
          
          	.wicked .liens_utiles a::after {
                        content: " • ";
                        color: #de4f7f;
                        margin: 0 1%;
		}
          
          	.wicked .liens_utiles a:last-child::after {
    			content: "";
		}
          
          	.wicked .lien_fofo {
                        font-weight: normal;
                        margin: 1% 0 0;
                        display: block;
		}
          
          	.wicked .img_footer_gauche {
                        position: absolute;
                        bottom: 0;
                        left: 0;
		}
          
          	.wicked .img_footer_droite {
                        position: absolute;
                        bottom: 0;
                        right: 0;
		}
  	</style>
</head>
	
<body><div id="top"></div><div class="wicked">
  	<header>
          	<h2>
                  	Wicked
          	</h2>
          	<h3>
                  	RPG basé sur la série The 100
          	</h3>
          	<div class="separation">
                  	• <span>•</span> • <span>•</span> • <span>•</span> • <span>•</span> • <span>•</span> • <span>•</span>
          	</div>
  	</header>
  
  	<section>
          	<div class="trapeze_gauche">
                </div>
          
                <div class="content">
                        <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis orci, semper vel posuere faucibus, porttitor nec tellus. Nam vitae ante efficitur, iaculis nunc eget, facilisis erat. Donec consectetur sapien a scelerisque tristique. Aliquam sodales leo nunc, ornare lacinia arcu egestas sed. Quisque elementum, ante sed condimentum eleifend, erat nunc semper mi, et accumsan ipsum metus eu risus. Aliquam tincidunt risus sollicitudin, tristique eros sagittis, euismod urna. Sed eget vulputate augue. Morbi sit amet mi fringilla, sodales magna nec, mattis ex. Curabitur nec augue et elit placerat ornare vitae dapibus purus. Pellentesque id elit id diam dapibus scelerisque. Donec id dapibus est.
                                <br /><br />
                                Nulla ac maximus sem. Suspendisse potenti. Nulla leo nisi, ultrices sit amet ipsum quis, mattis mollis justo. Sed tristique augue velit, vel ultrices tellus aliquam ac. In hac habitasse platea dictumst. Sed vitae turpis ligula. Nunc congue id justo a rhoncus. Sed quis consequat nunc. Proin elementum, purus a vestibulum tristique, nibh nunc aliquam erat, ut viverra sem lectus semper arcu.
                                <br /><br />
                                Suspendisse a massa eget felis pretium egestas at a orci. Nulla imperdiet ornare magna, nec porttitor sapien varius vitae. Morbi laoreet dolor sed justo sollicitudin, et lobortis felis sollicitudin. Etiam felis purus, tempor sit amet semper eget, facilisis sit amet enim. Suspendisse scelerisque faucibus turpis, at auctor lectus posuere a. Curabitur tempus felis non diam sollicitudin, eget tincidunt est fringilla. Nunc lectus diam, condimentum ut dui nec, euismod faucibus quam.
                        </p>
                </div>
          
                <div class="trapeze_droit">
                </div>
  	</section>
  
  	<div class="clear">
  	</div>
  
  	<div class="liens_utiles">
          	<a href="#" target="_blank">
                  	Règlement
          	</a>
          
          	<a href="#" target="_blank">
                  	Contexte
          	</a>
          
          	<a href="#" target="_blank">
                  	Annexes
          	</a>
          
          	<a href="#" target="_blank">
                  	Chronologie
          	</a>
          
          	<a href="#" target="_blank">
                  	Scénarios
          	</a>
  	</div>
  
  	<a href="http://wickedrpg.forumactif.com" target="_blank">
          	<img src="https://i.servimg.com/u/f26/19/99/69/81/bannie10.png" alt="Wicked forum RPG basé sur la série The 100" />
  	</a>
  
  	<span class="lien_fofo">
          	<a href="http://ls-halloween.fr" target="_blank">halloween</a>
  	</span>
  
  	<img src="https://i.imgur.com/7YZWmOe.png" alt="" class="img_footer_gauche"/>
  	<img src="https://i.imgur.com/2pvVQrf.png" alt="" class="img_footer_droite"/>
           
  </div></body>
</html>

A mettre dans votre message

Copier le lien de votre page HTML

#wicked #publicites #forumactif #codage #libreservice

Halloween