3 résultats trouvés pour fff

Et voici la maquette entière :


Le fond peut rester gris (#e3e0db) ou alors tu peux mettre un fond de ton choix mais personnellement, je n'ai pas réussi à me décider pour mettre un fond.

Voici également les autres couleurs utilisées :#2a2521 et #000 ainsi que le #fff pour les textes.

Les profil et messages :

Je n'ai pas mis "Nouveau sujet" "Répondre au sujet", mais ils se situent bien évidemment au dessus du "Titre du sujet".

Message officiel :


Présentation :


Je t'ajoute les images pour les fonds de titre de catégories : www.

& pour les tops sites du footer : www.

C'est la même qui est utilisée pour la navigation, en plusieurs fois.

Bonjour ma petite citrouille ♥

Alors je suis bien embêtée et j'aurai besoin de tes talents pour m'aider à réaliser une jolie barre de navigation toute simpliste si le coeur t'en dit évidemment :3

Forum : www
Version : PHPBB2
Taille du forum : 900 pixels en largeur
Elément(s) demandé(s) : Navigation
Maquette : https://i.imgur.com/U3O7aZa.png
Description (peut remplacer la maquette ou la compléter) : Alours j'aimerai un truc tout sobre, un fond blanc et le texte avec un petit effet d'ombre d'une autre couleur que je mettrai ci-dessous. Toutefois si tu es prise d'une envie de créativité, je te laisse champ libre du moment que ce soit tout simpliste et que ça colle aux couleurs du fofo :3
Couleurs (si pas de maquette graphique) :
Pour le marron : #d2a789
Pour le vert : #5b6d5f
Pour le bleu : #e3ebec
Et le blanc c'est le classique #fff
Polices à utiliser : Oswald https://fonts.google.com/specimen/Oswald
Images à utiliser : Et bien ce qui est cool avec ma commande c'est qu'il n'y en a pas
Acceptez-vous que le code finisse en LS ? Avec grand plaisir si ça peut aider du monde
Mode de rendu : via le sujet :3
Autre chose à ajouter ? Un immense merci à toi :)

Merci beaucoup ♥

ET VOILA comme promis j'ai pu tout faire ce week-end.

D'abord la previem pour la rs (jsp pourquoi les couleurs ne fonctionnent pas sur ce forum mais normalement c'est bon) :

Pseudo

info. info. info. info.

Lui/Elle

Texte de description ici

Liens souhaités

Texte de description ici

Journal des rps

www. nom du rp ft. nom du personnage X ou V
www. nom du rp ft. nom du personnage X ou V
www. nom du rp ft. nom du personnage X ou V
www. nom du rp ft. nom du personnage X ou V

Code:

/* Images */
/* fond image présentation */
.img-presentation {
  background: url('http://i.imgur.com/Vpr6tUN.png');
}

/* Couleurs */
/* fond vert + texte blanc */
/* bordure bas post, survie, irl, titre de la rs */
.bordure, .survie-presentation, .irl-presentation, .fond-nom-rs {
  background: #79b088;
  color: #FFF;
}

/* fond gris foncé + texte gris clair */
/* titre d'un post, caractère, description rs, texte d'un lien */
.titre, .psychologie-presentation, .description-rs, .texte-lien {
  background: #2c2c2c;
  color: #d8d8d8;
}

/* fond gris clair */
/* fond d'un post, de la présentation, de la rs, des liens */
.post-contenu, .presentation, .rs, .liens {
  background: #d8d8d8;
}

/* fond foncé + texte vert */
/* fond du titre de la présentation */
.haut-presentation {
  background: #2c2c2c;
  color: #79b088
}

/* bordure verte */
/* bordure sous le titre de la présentation */
.haut-presentation {
  border-bottom: 5px solid #79b088;
}

/* texte gris foncé */
/* histoire */
.histoire-presentation {
  color: #2c2c2c;
}

/* texte blanc */
.titre-liens {
  color: #FFF;
}

/* texte vert */
/* liens vers rps, survol avatar d'un lien */
.journal-rp a, .survol-lien {
  color: #79b088;
}

/* Polices */
/* titre d'un post */
.titre {
  text-transform: lowercase;
  font: 900 30px/1.2 Arial, sans-serif;
}

/* titre de la rs, des liens, pseudo d'un lien */
.titre-nom-rs, .titre-liens, .pseudo-lien {
  text-transform: uppercase;
  font: 900 30px/1.2 Arial, sans-serif;
}


/* titre de la présentation */
.haut-presentation {
  text-transform: uppercase;
  font: 900 20px/1.2 Arial, sans-serif;
}

/* sous-titre d'un post */
.sous-titre {
  text-transform: uppercase;
  font: italic 700 15px/1.2 Arial, sans-serif;
}

/* sous titre de la présentation, de la rs */
.titre-presentation, .sous-titre-rs {
  font: italic 900 12px/1 Arial, sans-serif;
  text-transform: uppercase;
}

/* Posts */
.post1 {
  width: 500px; margin: 0 auto !important;
}
.titre {
  text-align: center;
  padding: 20px;
}
.post-contenu {
  padding: 15px 10px 30px;
  text-align: justify;
}
.sous-titre {
  padding-bottom: 3px;
  border-bottom: 2px solid;
  text-align: right;
}
.post-contenu p {
  font: 11px/1.3 Arial, sans-serif;
  margin: 0;
  text-indent: 1cm;
}
.post-contenu p + br {
  display: none;
}
.bordure {
  height: 20px;
}

/* Présentation */
.presentation {
  width: 575px;
  margin: 0 auto;
  font: 11px/1.2 Arial, sans-serif;
  text-align: justify;
}
.haut-presentation {
  padding: 100px 50px 20px;
  text-align: right;
}
.post-presentation {
  display: flex;
}
.img-presentation {
  width: 200px;
  height: 495px;
  overflow: hidden;
}
.img-presentation + div {
  flex: 1;
}
.identite-presentation {
  margin-right: 20px;
  padding: 15px;
}
.identite-presentation p {
  height: auto;
  max-height: 260px;
  overflow: auto;
  padding: 0 5px;
}
.titre-presentation {
  text-align: right;
  padding-bottom: 3px;
  border-bottom: 3px solid;
}
.survie-presentation {
  padding: 15px 35px 15px 15px;
}
.presentation- b {
  text-transform: lowercase;
  font-weight: 700;
}
.survie-presentation p {
  height: auto;
  max-height: 115px;
  overflow: auto;
  padding: 0 5px;
}
.psychologie-presentation {
  padding: 15px 35px;
}
.histoire-presentation {
  padding: 15px 35px;
}
.irl-presentation {
  padding: 15px 35px;
}

/* Rs */
.rs {
  width: 550px;
  margin: 0 auto;
  text-align: justify;
}
.nom-rs {
  display: flex;
}
.image-rs {
  width: 300px;
  height: 100px;
  overflow: hidden;
}
.fond-nom-rs {
  padding: 10px 20px;
  flex: 1;
  height: 80px;
}
.titre-nom-rs {
  border-bottom: 2px solid;
  text-align: right;
  margin: 0;
  font-style: italic;
}
.info-rs {
  text-align: center;
  font-weight: 700;
}
.description-rs {
  padding: 20px;
}
.sous-titre-rs {
  margin: 0 0 10px;
  border-bottom: 2px solid;
  text-align: right;
  margin-top: 10px;
  padding-bottom: 3px;
}
.journal-rp {
  padding: 20px;
}

/* Messages liens */
.liens {
  width: 550px;
  margin: 0 auto;
}
.titre-liens {
  margin: 0;
  padding: 20px;
  text-align: center;
}
.lien {
  display: flex;
}
.image-lien {
  width: 240px;
  height: 240px;
  overflow: hidden;
  position: relative;
}
.image-lien img {
  min-width: 240px;
  min-height: 240px;
  transition: all 1s;
}
.image-lien:hover img {
  filter: grayscale(1);
}
.survol-lien {
  transition: all 1s;
  width: 160px;
  height: 160px;
  padding: 20px;
  top: 20px;
  left: 20px;
  position: absolute;
  background: rgba(255,255,255,.7);
  text-align: center;
  display: flex;
  opacity: 0;
}
.image-lien:hover .survol-lien {
  opacity: 1;
}
.survol-lien div {
  margin: auto;
}
.pseudo-lien {
  border-bottom: 2px solid;
  margin: 0 0 10px;
}
.survol-lien span {
  font-weight: 700;
}
.texte-lien {
  flex: 1;
  padding: 20px;
}
.texte-lien p {
  height: 200px;
  overflow: auto;
  margin: 0;
  padding: 0 5px;
  font-size: 11px;
  text-align: justify;
}
.lien:nth-child(odd) .image-lien {
  order: 2;
}

Code:

<div class="post1"><div class="titre">Titre</div><!--
--><div class="post-contenu"><div class="sous-titre">sous-titre</div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p></div><!--
--><div class="bordure"></div></div>

Code:

<div class="presentation"><div class="haut-presentation">Prénom Nom</div><!--

--><div class="post-presentation"><div class="img-presentation"></div><div><!--

--><div class="identite-presentation"><div class="titre-presentation">Identité</div>
<p><b>Surnom(s) ;</b> écrire ici.</p></div><!--

--><div class="survie-presentation"><div class="titre-presentation">Survie</div>
<p><b>Intitulé ;</b> réponse</p></div><!--

--></div></div><div class="psychologie-presentation"><!--
--><div class="titre-presentation">Psychologie</div>
<p>Le texte ici</p><!--
--></div><!--
--><div class="histoire-presentation"><!--
--><div class="titre-presentation">Histoire</div>
<p>Le texte ici</p><!--
--></div><!--
--><div class="irl-presentation"><!--
--><div class="titre-presentation">Pseudo</div>
<p>le texte ici</p><!--
--></div><!--
--></div>

Code:

<div class="rs"><!--

--><div class="nom-rs"><!--
--><div class="image-rs"><img src="http://placehold.it/300x100" alt="" /></div><!--
--><div class="fond-nom-rs"><div class="titre-nom-rs">Pseudo</div>
<div class="info-rs">info. info. info. info.</div></div><!--
--></div><!--

--><div class="description-rs"><div class="sous-titre-rs">Lui/Elle</div>
Texte de description ici

<div class="sous-titre-rs">Liens souhaités</div>
Texte de description ici</div><!--

--><div class="journal-rp"><div class="sous-titre-rs">Journal des rps</div>
<a href="">www.</a> nom du rp ft. <em>nom du personnage</em> [color=#ff0000]X[/color] ou [color=#00cc66]V[/color]
<a href="">www.</a> nom du rp ft. <em>nom du personnage</em> [color=#ff0000]X[/color] ou [color=#00cc66]V[/color]
<a href="">www.</a> nom du rp ft. <em>nom du personnage</em> [color=#ff0000]X[/color] ou [color=#00cc66]V[/color]
<a href="">www.</a> nom du rp ft. <em>nom du personnage</em> [color=#ff0000]X[/color] ou [color=#00cc66]V[/color]</div><!--

--></div>

Code:

<div class="liens"><div class="titre-liens">Hommes</div><!--

--><div class="lien"><div class="image-lien"><!--
--><img src="http://i.imgur.com/o9QhbJ9.png" alt="" !><!--
--><div class="survol-lien"><div><!--
--><div class="pseudo-lien">Pseudo</div><!--
--><span>info. info. info. info.</span><!--
--></div></div><!--
--></div><!--
--><div class="texte-lien"><p>Le texte ici</p></div><!--
--></div><!--

--><div class="lien"><div class="image-lien"><!--
--><img src="http://i.imgur.com/o9QhbJ9.png" alt="" !><!--
--><div class="survol-lien"><div><!--
--><div class="pseudo-lien">Pseudo</div><!--
--><span>info. info. info. info.</span><!--
--></div></div><!--
--></div><!--
--><div class="texte-lien"><p>Le texte ici</p></div><!--
--></div><!--

--></div>

Code:

--><div class="lien"><div class="image-lien"><!--
--><img src="http://i.imgur.com/o9QhbJ9.png" alt="" !><!--
--><div class="survol-lien"><div><!--
--><div class="pseudo-lien">Pseudo</div><!--
--><span>info. info. info. info.</span><!--
--></div></div><!--
--></div><!--
--><div class="texte-lien"><p>Le texte ici</p></div><!--
--></div><!--