Welcome

Halloween Publicité

Morsmordre

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

Toutes versions

Optimisé Une navigation, un footer, un index complet, une liste des sujets, un profil, une liste des membres, une fiche de présentation, une fiche administrative, une fiche de relation et un listing sont également disponibles.

Retour

Codage publicité Morsmordre Halloween Forumactif

Créer une page HTML

<html lang="fr" class="no-js">
<head>
    <meta charset="UTF-8" />
    <title>Morsmordre</title>
  <link href="https://fonts.googleapis.com/css?family=Alegreya|Parisienne|Vollkorn" rel="stylesheet" />
      
    <style>
      .clear {
      clear: both;
      }
      /*********************************** PRESENTATION ***********************************/
.fond_pres {
        background: url(https://i.imgur.com/4MLFN8w.png) no-repeat bottom right, url(https://i.imgur.com/q46je9p.jpg);
        width: 550px;
        margin: auto;
        box-sizing: border-box;
        border-left: 5px solid #183d23;
        position: relative;
        color: #d9d9d9 !important;
        font-family: Vollkorn, serif;
      	font-size: 12px;
}
      
      .fond_pres a {
      color: #568A25 !important;
      text-decoration: none !important;
      font-family: 'Alegreya Sans SC', sans-serif !important;
      text-transform: uppercase;
      }
      
      a.morsmordre_credits {
    color: #d9d9d9 !important;
    display: block;
    font-family: Helvetica;
    font-size: 10px;
    font-style: italic;
    letter-spacing: -1px;
    margin: 4% 0 0;
    text-align: center;
    text-decoration: none;
    text-transform: lowercase;
    padding: 0 0 1%;
}

/* GRANDE IMAGE */
img.header_pres {
        display: block;
        margin: auto;
        padding: 5% 0 0;
        width: 500px;
        height: 277px;
        object-fit: cover;
}

/* NOM PRENOM */
.fond_pres h2 {
        background: url(https://i.imgur.com/f2Gmrxf.png) center no-repeat;
        display: block;
        font-family: times new roman;
        font-size: 35px;
        font-style: italic;
        letter-spacing: -2px;
        margin: -15% 0 0 0;
        padding: 9% 0;
        text-align: center;
        text-transform: lowercase;
        position: relative;
  	font-weight: normal;
}

/* ACCROCHE */
.fond_pres h3 {
        font-family: 'Alegreya Sans SC', sans-serif;
        letter-spacing: 2px;
        text-align: center;
        position: relative;
        font-weight: normal;
        margin: -11% 0 0 0;
}

.fond_pres h3::before {
        background: url(https://i.imgur.com/JMQCncn.png);
        content: "";
        width: 10px;
        height: 10px;
        display: inline-block;
        margin: 0 2% 0 0;
}

/* CONTENU */
.pres_interne {
    	padding: 2% 4%;
}

/* MINIATURES */
img.image_footer, img.minipres {
        border: 1px solid #d9d9d9;
        float: left;
        margin: 0 3%;
        padding: 1%;
        width: 100px;
        height: 100px;
        object-fit: cover;
}

/* BLOCS INTRO */
.pres_b1 {
        background: rgba(0,0,0,.2);
        float: left;
        width: 31%;
        padding: 2%;
        height: 95px;
        overflow: auto;
}

.pres_b1 span {
        text-transform: uppercase;
        font-family: 'Alegreya Sans SC', sans-serif;
        font-weight: bold;
}

/* TITRES */
.pres_interne h4 {
        font-size: 20px;
        font-family: Vollkorn, serif;
        margin: 5% 0 0 0;
        padding: 0;
        text-align: center;
        text-transform: uppercase;
        font-weight: normal;
}

.pres_interne h4::before {
        background: url(https://i.imgur.com/uvFlIUJ.png);
        content: "";
        width: 10px;
        height: 15px;
        display: inline-block;
        margin: 0 2% 0 0;
}

/* FOND DES BLOCS */
.contenu_pres {
    background: rgba(0,0,0,.2);
    padding: 5%;
    line-height: 1.5;
}

.contenu_pres span {
        text-transform: uppercase;
        font-family: 'Alegreya Sans SC', sans-serif;
        font-weight: bold;
  	color: #568A25;
}

/* HISTOIRE */

/* PSEUDO PRES */
.fond_pres h2.footer {
    	margin: 0;
}

/* FOOTER */
.informations_footer {
        background: rgba(0,0,0,.2);
        border-left: 2px solid #568A25;
        padding: 2% 5%;
        float: left;
        width: 60%;
        height: 90px;
        overflow: auto;
}

.informations_footer span {
        font-family: 'Alegreya Sans SC', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
}
      
      h2.footer {
      margin: 2% 0 0 !important;
      }
      
      h3.footer_pres {
    margin: -11% 0 8% 0 !important;
}
    </style>
</head>
	
<body><div id="top"></div>
  <div class="fond_pres">
    	<img src="https://i.imgur.com/jAgHpAm.jpg" class="header_pres" alt="" /><h2>Morsmordre</h2>
  	<h3>RPG Harry Potter</h3><br />

<div class="pres_interne">
          	<h4>Histoire</h4>
  		<div class="contenu_pres histoire">
                        1970, le monde magique tremble de nouveau. Après la chute de Grindelwald, un nouveau mage noir du nom de Lord Voldemort a révélé au grand 
                        jour ses intentions de prise de pouvoir et causé un accident de train, tuant et blessant des moldus. Cet acte qui prit de court le ministère, 
                        n’est que le premier d’une sombre série... Quel rôle allez-vous choisir dans ce monde en ébullition ? 
                        <a href="http://felixdix-neuf.forumactif.org/t46-contexte">Lire le contexte en entier ?</a>
          	</div>

<h4>Généralités</h4>
  		<div class="contenu_pres histoire">
                  	Morsmordre est un forum roleplay game sur lequel vous pouvez interpréter une étudiant de Poudlard ou un sorcier actif dans les années 70. 
                	Il reprend assez fidèlement le contexte de l'époque. Les personnages existants de la saga sont présents. Les avatars des joueurs sont dessinés. 
                	Il n'y a aucune restriction au niveau du nombre de lignes et de la fréquence des RPs. C'est un forum évolutif. Des événements sont organisés régulièrement afin d'égayer le 
                	quotidien de vos personnages.
          	</div>

<h4>Statistiques</h4>
  		<div class="contenu_pres histoire">
                  	Morsmordre compte 28 sorciers recensés. Ces derniers ont échangé 495 messages dans le monde des sorciers. Le dernier arrivé est Linoa Walsh.
    			Nouveautés.<br />
    			Depuis le 12 mars 2018, le forum est enfin ouvert ! <br />
    			<a href="http://morsmordre.forumactif.com/t47-petit-guide-a-l-usage-des-moldus">Retrouvez le guide du débutant par ici.</a>
          	</div>

<h2 class="footer">Event</h2>
		<h3 class="footer_pres">Comme une ambiance de fête</h3>

<img src="https://i62.servimg.com/u/f62/19/84/41/07/tese10.png" alt="" class="image_footer" />
          	<div class="informations_footer">
                  	Il y a comme une ambiance de fête, à Poudlard. Est-ce à cause de Noël ? Nope. D’Halloween ? Toujours pas. De l’annonce du renvoi du concierge Appolyon Pringles ? 
                  	Pas davantage. Non, si les couloirs du vénérable château bruissent de murmures excités des dortoirs à la salle des professeurs, c’est à cause de la nouvelle qu’a 
                  	claironnée le Pr. Delavey (Cynn Delavey, Soins aux Créatures aux Magiques, pas Lior Delavey, Défense contre les Forces du Mal, ouais, je sais, on s’y perd) dans la Grande 
                  	Salle quelques jours plus tôt : Poudlard va accueillir, le temps d’un week-end, une petite foire de magizoologie ! Mais à Poudlard, rien ne se passe vraiment comme on 
                  	l'espère. 
                  	<a href="http://morsmordre.forumactif.com/t163-premier-event?tid=979708e68564f9592e162d3ff0c7601f">La suite par ici.</a>
          	</div>

<div class="clear"></div>
          
          	<br />
          	<a style="display: block; margin: 2% 0; text-align: center;" href="http://morsmordre.forumactif.com" target="_blank">
          		<img src="https://i.imgur.com/bYvrdwM.jpg" alt="" />
    		</a>
          
    		<br />
	</div>
    	<a href="http://ls-halloween.fr/" class="morsmordre_credits">Halloween</a>
  </div>
</body>

A mettre dans votre message

Copier le lien de votre page HTML

#morsmordre #publicites #forumactif #codage #libreservice

Halloween