AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  
MAJ
Pour consulter les nouveautés c'est par ici Concours de codage 2020 - Votes pour l'épreuve 2 1885538628
GROUPES DE PRD
On recrute en priorité des CODEURS et des JOURNALISTES n'hésitez pas à les rejoindre au plus vite o/
Le deal à ne pas rater :
– 100€ sur les Samsung Galaxy S20, S20+ (et encore -100€ pour ...
Voir le deal

Partagez
 

 Concours de codage 2020 - Votes pour l'épreuve 2

Aller en bas 
Aller à la page : 1, 2  Suivant

Quelle PA préférez vous ?
Candidat 1
Concours de codage 2020 - Votes pour l'épreuve 2 Empty6%Concours de codage 2020 - Votes pour l'épreuve 2 Empty
 6% [ 2 ]
Candidat 2
Concours de codage 2020 - Votes pour l'épreuve 2 Empty3%Concours de codage 2020 - Votes pour l'épreuve 2 Empty
 3% [ 1 ]
Candidat 3
Concours de codage 2020 - Votes pour l'épreuve 2 Empty48%Concours de codage 2020 - Votes pour l'épreuve 2 Empty
 48% [ 15 ]
Candidat 4
Concours de codage 2020 - Votes pour l'épreuve 2 Empty6%Concours de codage 2020 - Votes pour l'épreuve 2 Empty
 6% [ 2 ]
Candidat 5
Concours de codage 2020 - Votes pour l'épreuve 2 Empty35%Concours de codage 2020 - Votes pour l'épreuve 2 Empty
 35% [ 11 ]
Total des votes : 31
 
Sondage clos

AuteurMessage

Modératrice • Modo Blablatrice • Modo Animatrice • Journaliste
_____________________

Moony
Modératrice • Modo Blablatrice • Modo Animatrice • Journaliste

Date d'arrivée sur PRD : 02/06/2009
Messages postés : 8781
Prénom : Enora
Ton âge : 30
Profession / études : suis au Chomage (Streameuse, dev, gameuse, roi du monde et pouet)
Les logiciel(s) utilisés : Photoshop CC, Sublime text 3, Notepad++, Wamp, IntelliJ, Netbeans, Atom, VS Code, Premiere CC, Audition CC, Illustrator CC...


Mon CV PRDien
Dédicaces:
My role player game characters:

Voir le profil de l'utilisateur
Concours de codage 2020 - Votes pour l'épreuve 2 Empty
Message(#) Sujet: Concours de codage 2020 - Votes pour l'épreuve 2 Concours de codage 2020 - Votes pour l'épreuve 2 EmptyVen 3 Avr - 12:30

Concours de codage

Vote de l'épreuve 2
Bonjour à tous ♥

Bon, je ne vais pas vous parler des retard, hein... Mise à part m'excuser pour ce petit passage à vide, je ne vois pas trop quoi faire... Quoi qu'il en soit, je voulais aussi vous annoncer qu'ils 'agit là de la dernière épreuve du concours et que si vous n'avez pas eu les résultats de l'autre épreuve, c'est normal. J'ai demandé une continuité au niveau du design et vous auriez su qui avait fait quoi.

Vous aurez 9 pour voter, jusqu'au 12 avril ! Je ne veux pas que les votes se prolonge durant les votes pour le concours de projet, j'ai déjà assez de retard comme ça, on va pas non plus embêter les copains.

Je vous rappelle les règles :
Spoiler:
 

Merci d'avance à tous ceux qui vont voter ! ♥

Place aux oeuvres !



Les information de la PA :

Spoiler:
 

_______________________________________________
Absence quasi totale jusqu'au 1er Juillet
Night Neko a évolué en Moony






Dernière édition par Moony le Ven 3 Avr - 17:04, édité 1 fois
Revenir en haut Aller en bas

Modératrice • Modo Blablatrice • Modo Animatrice • Journaliste
_____________________

Moony
Modératrice • Modo Blablatrice • Modo Animatrice • Journaliste

Date d'arrivée sur PRD : 02/06/2009
Messages postés : 8781
Prénom : Enora
Ton âge : 30
Profession / études : suis au Chomage (Streameuse, dev, gameuse, roi du monde et pouet)
Les logiciel(s) utilisés : Photoshop CC, Sublime text 3, Notepad++, Wamp, IntelliJ, Netbeans, Atom, VS Code, Premiere CC, Audition CC, Illustrator CC...


Mon CV PRDien
Dédicaces:
My role player game characters:

Voir le profil de l'utilisateur
Concours de codage 2020 - Votes pour l'épreuve 2 Empty
Message(#) Sujet: Re: Concours de codage 2020 - Votes pour l'épreuve 2 Concours de codage 2020 - Votes pour l'épreuve 2 EmptyVen 3 Avr - 12:31

Candidat 1




HTML :

Code:
<div class="PAprd">
                                                                                       
  <div class="Zone01">
                                                                                     
      <div class="petititre">
                                                  Le staff                                       
      </div>
                                                                                 
      <div class="sifm">
                                                                   
        <div class="staffimg">
                                                  <img src="https://i.imgur.com/T701HZz.jpg" />                                       
        </div>
                                                                               
        <div class="infostaff">
                                                <b1> Eva Donchier</b1><br /> <a href="#">MP</a> - <a href="#">Profil</a><br /> <pr>Présente </pr>                                 
        </div>
                                                                   
      </div>
                                                                       
      <div class="sifm">
                                                                   
        <div class="staffimg">
                                                  <img src="https://i.imgur.com/T701HZz.jpg" />                                       
        </div>
                                                                               
        <div class="infostaff">
                                                <b1> Seb Tike</b1><br /> <a href="#">MP</a> - <a href="#">Profil</a><br /> <ab>Absent</ab>                                 
        </div>
                                                                   
      </div>
                                                             
      <div class="sifm">
                                                                   
        <div class="staffimg">
                                                  <img src="https://i.imgur.com/T701HZz.jpg" />                                       
        </div>
                                                                               
        <div class="infostaff">
                                                <b1> Psy Kose</b1><br /> <a href="#">MP</a> - <a href="#">Profil</a><br /> <pr>Présence réduite </pr>                                 
        </div>
                                                                   
      </div>
                                                           
      <div class="petititre">
                                                Les News                                     
      </div>
                                                           
      <div class="new">
                                              ►  <strong>01/02/2020</strong> : Ouverture du concours de codage avec 8 participants <br /> ►<strong>11/02/2020</strong> : Envoie de l'épreuve 1 aux participants<br /> ►<strong>24/02/2020</strong> : Délais supplémentaire demandé et accordé <br />►<strong>29/02/2020</strong> : Retard de Moony et envoie de l'épreuve 2                       
      </div>
                                                       
  </div>
                                                                                     
  <div class="titrePA">
                                                  Les chats domineront le monde                                         
  </div>
                                                     
  <div class="zone02">
                                                       
      <div class="petititre">
                                                Contexte                                     
      </div>
                                                     
      <div class="ctxxt">
                                Une nuit, une nuit à attendre... Une longue nuit avant de savoir si le souverain ennemi acceptera un traité de paix, si fragile, si friable qu'on aurait même de la peine à le prendre au sérieux. Des solutions précaires, du rafistolage, voilà tout ce que j'ai su inventer. La Bretagne résistait quand je suis arrivé, elle résistera encore quand je partirai. Je ne saurais dire pourquoi, je conserve encore, rescapée de mon découragement, une curiosité : existe t-il quelqu'un parmi nous déjà - ou encore à naître - qui se destine à restaurer l'ordre sur l'île de Bretagne? Et s'il existe, que peut-il bien posséder que je ne possède moi-même ? D'où vient-il? Est-il romain? Quelle arme tient-il à sa ceinture ? Celui qui vaincra là où j'ai échoué, je voudrais voir son visage une fois, car je lui conserve encore, rescapé de mon découragement, ma curiosité. – Manius Macrinus Firmus Tout cela n'est rien. Absolument rien ! Il y a peu de temps quelque chose a fait « Boum ». Voila, nous sommes sur une toute petite miette expulsée par ce boum, qui dérive et tournicote sur elle-même, en attendant sa fin, proche ! Sur cette miette de tous petits organismes gesticulent ; ça nait, ça vit, ça meurt. Tout cela n'a aucune conséquence. – Méléagant Pour le Graal, j’ai bâti une forteresse, moi. Kaamelott, ça s’appelle. J’ai été chercher des chevaliers dans tout le royaume. En Calédonie, en Carmélide, à Gaunes, à Vannes, aux Pays de Galles. J’ai fait construire une grande table, pour que les chevaliers s’assoient ensemble. Je l’ai voulue ronde, pour qu’aucun d’entre eux ne se retrouve assis dans un angle, ou en bout de table. C’était compliqué, alors j’ai essayé d’expliquer ce qu’était le Graal, pour que tout le monde comprenne. C’était difficile, alors j’ai essayé de rigoler pour que personne ne s’ennuie. J’ai raté, mais je veux pas qu’on dise que j’ai rien foutu, parce que c’est pas vrai. – Arthur Mais moi, j’m’en fous des honneurs, rien à péter, le Graal aussi, rien à péter. Moi, c’est Arthur qui compte. Moi je suis pas un as de la stratégie ou du tir à l’arc, mais je peux me vanter de savoir ce que c’est que d’aimer quelqu’un. – Perceval                     
      </div>
                                                 
      <div class="suite">
                                <a href="http://www.pub-rpg-design.com/f215-petits-papiers-de-prd">- La suite - </a>                     
      </div>
                                           
  </div>
                                     
  <div class="zone03">
                                       
      <div class="lien1">
                          <a href="http://www.pub-rpg-design.com/t100052-reglement-concept-tout-sur-prd"> Règlement</a>               
      </div>
                                       
      <div class="lien1">
                          <a href="http://www.pub-rpg-design.com/f208-salon-de-parrainage"> Bottins</a>               
      </div>
                                     
      <div class="lien1">
                          <a href="http://www.pub-rpg-design.com/f118-vie-de-prd"> Annexes</a>               
      </div>
                                     
      <div class="lien1">
                          <a href="http://www.pub-rpg-design.com/t92075-guide-du-parfait-prdesien"> Guide</a>               
      </div>
                                     
      <div class="lien1">
                          <a href="http://www.pub-rpg-design.com/f208-salon-de-parrainage"> Pv et Scénarios</a>               
      </div>
                                     
      <div class="lien1">
                          <a href="http://www.pub-rpg-design.com/f230-partie-invite"> Invités</a>               
      </div>
                                     
      <div class="lien1">
                          <a href="http://www.pub-rpg-design.com/t96669-demande-de-partenariat"> Partenariats</a>               
      </div><a href="http://www.pub-rpg-design.com/t96669-demande-de-partenariat"> </a>               
  </div>
                                 
  <div class="zone4">
                         
      <div class="petititre">
                                                Top-site         
      </div>
                        <a href="http://www.pub-rpg-design.com/t96669-demande-de-partenariat"> ►</a>    <a href="http://www.pub-rpg-design.com/t96669-demande-de-partenariat"> ►</a>    <a href="http://www.pub-rpg-design.com/t96669-demande-de-partenariat"> ►</a>                 
      <div class="petititre">
                                                Top-partenaires                                     
      </div>
                        <select style="width: 200px;" onchange="location = this.value">
  <option selected="selected">top-partenaires</option>
  <option value="http://www.pub-rpg-design.com/t130125-concours-de-codage-2020-votes-epreuves-1#top">PRD</option>
  <option value="http://www.pub-rpg-design.com/t130125-concours-de-codage-2020-votes-epreuves-1#top">PRD</option>
  <option value="http://www.pub-rpg-design.com/t130125-concours-de-codage-2020-votes-epreuves-1#top">PRD</option>
  <option value="http://www.pub-rpg-design.com/t130125-concours-de-codage-2020-votes-epreuves-1#top">PRD</option>
  <option value="http://www.pub-rpg-design.com/t130125-concours-de-codage-2020-votes-epreuves-1#top">PRD</option>
  <option value="http://www.pub-rpg-design.com/t130125-concours-de-codage-2020-votes-epreuves-1#top">PRD</option>
  <option value="http://www.pub-rpg-design.com/t130125-concours-de-codage-2020-votes-epreuves-1#top">PRD</option>
  <option value="http://www.pub-rpg-design.com/t130125-concours-de-codage-2020-votes-epreuves-1#top">PRD</option>
  <option value="http://www.pub-rpg-design.com/t130125-concours-de-codage-2020-votes-epreuves-1#top">PRD</option>
  <option value="http://www.pub-rpg-design.com/t130125-concours-de-codage-2020-votes-epreuves-1#top">PRD</option>



</select>             
      <div class="credit">
                  ►Crédits: Réplique de Kaamelott d'Alexandre Astier. Images : Moi. Il est strictement interdit de copier le code si celui ci n'a pas été mis en Libre Service. Il a été fait pour le concours de codage de Février-Mars 2020. Merci de respecter les auteurs des codes.       
      </div>
                     
  </div>
                         
  <div class="zone05">
                           
      <div class="petititre">
                                              Postes vacants                               
      </div>
                    <a href="#"> <img src="https://i.imgur.com/KkEjlCO.jpg" /></a><a href="#"> <img src="https://i.imgur.com/KkEjlCO.jpg" /></a><a href="#"> <img src="https://i.imgur.com/KkEjlCO.jpg" /></a>         
  </div>
               
  <div class="zone06">
                 
      <div class="petititre">
                                              Membres du mois                           
      </div>
             
      <div class="MDD1">
              <img src="https://i.imgur.com/SFlva6I.jpg/" /><b1> Janet Ranafout </b1><br /><a href="#"> MP</a> - <a href="#">Profil    </a>
      </div>
         
      <div class="MDD2">
          <b1>  Jean Cérian</b1> <br /><a href="#"> MP</a> - <a href="#">Profil    </a> <img src="https://i.imgur.com/SFlva6I.jpg" /> 
      </div>
           
  </div>
</div>

CSS :

Code:
/*===================================================
Début page d'accueil
===================================================*/
.PAprd  /* fond général de la PA */
{height: 400px;
    position: relative;
    width: 850px;
    background-color: #f8f4f4;
    border: 1px solid #7a8f96;}

.Zone01  /* partie staff etc */
{width:200px;
  height:398px;
  background-color: #cbd0d2;
position:absolute;
    text-align: center;
}

.Zone01 img /* taille image de la zone 01 */
{clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    height: 60px;}

.petititre/* les titres */
{    text-transform: uppercase;
    letter-spacing: 1px;
  font-weight: 700;
text-align: center;
    padding: 5px;}

.sifm /* cadre  staff */
{width: 200px;
    height: 60px;
  margin-top: 10px;
    margin-bottom: 10px;}

.staffimg /* image du staff */
{float: left;
    margin-left: 10px;}

.infostaff b1 /* couleur nom staff */
{  font-weight: 800;
    text-transform: uppercase;
    color: #2c5b6e;
    font-size: 13px;}

.infostaff a /* lien mp/profil staff */
{font-weight: 800;
    text-transform: lowercase;
    color: white !important;}

.infostaff pr/* staff present */
{ color: #587783;
    text-transform: lowercase;}

.infostaff ab /* staff absent */
{color:#58778387;}

.new /* spartie news */
{    text-align: justify;
    padding: 10px;
    font-size: 11px;
    line-height: 15px;
    overflow: auto;
    height: 110px;
width:195px}

.new strong /* date news */
{    font-weight: 900;
    text-decoration: underline;}

.titrePA /* titre de la PA */
{    border-bottom: 5px solid #7a8f965c;
    color: #7a8f96;
    font-family: 'Amatic SC', cursive;
    font-size: 55px;
    line-height: 10px;
    margin-top: 20px;
    text-align: center;
    width: 648px;
    position: absolute;
    margin-left: 200px;}

.zone02 /* cadre du contexte*/
{    position: absolute;
    width: 430px;
    margin-left: 200px;
    margin-top: 50px;
    height: 230px;}

.ctxxt/* texte du contexte */
{    position: absolute;
    width: 400px;
    overflow: auto;
    height: 180px;
    text-align: justify;
    margin-left: 15px;
    line-height: 15px;
    padding: 5px;}

.suite/* lien suite du contexte*/
{    position: absolute;
    margin-top: 190px;
    margin-left: 350px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 800;}

.zone03 /* cadre lien navigation*/
{    position: absolute;
    margin-left: 630px;
    margin-top: 60px;
    width: 200px;
    height: 230px;}

.lien1 /* apparence lien navigation*/
{    text-transform: uppercase;
    text-align: center;
    background-color: #cbd0d2;
    padding: 1px;
    margin-bottom: 2px;}

.zone4 /* zone partenaire*/
{  margin-left: 630px;
    margin-top: 220px;
    position: absolute;
    text-align: center;}

.credit /* zone crédit*/
{width: 200px;
    text-align: justify;
    font-size: 10px;
    line-height: 10px;
    margin-top: 10px;}

.zone05 /* zone pv*/
{    position: absolute;
    margin-top: 280px;
    margin-left: 220px;}

.zone05 img /* taille image pv*/
{width:50px;    clip-path: polygon(25%0%,100%0%,75%100%,0%100%);}

.zone06 /* zone membre du mois*/
{    position: absolute;
    margin-left: 400px;
    margin-top: 280px;
    width: 200px;
    height: 110px;}

.zone06 img /* taille image med*/
{width:25px;
  clip-path: polygon(25%0%,100%0%,75%100%,0%100%);}


.MDD1 /* zone membre du mois 01*/
{  float: left;
    margin-top: -2px;
      width: 200px;
  text-align: center;
    background-color: #cbd0d2;}

.MDD1 img /* taille image membre du mois 01*/

{    float: left;
    margin-right: 20px;}

.MDD2 /* zone membre du mois 02*/
{    float: right;
    margin-top: 3px;
    width: 120px;    text-align: center;
    background-color: #cbd0d2;
        width: 200px;}

.MDD2 img /* taille image membre du mois 02*/
{float:right;    margin-top: -15px;}

.zone06 b1 /* couleur nom  */
{      color: #2c5b6e;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.zone06 a /* lien mp/profil  */
{font-weight: 800;
    text-transform: lowercase;
    color: white !important;}

_______________________________________________
Absence quasi totale jusqu'au 1er Juillet
Night Neko a évolué en Moony




Revenir en haut Aller en bas

Modératrice • Modo Blablatrice • Modo Animatrice • Journaliste
_____________________

Moony
Modératrice • Modo Blablatrice • Modo Animatrice • Journaliste

Date d'arrivée sur PRD : 02/06/2009
Messages postés : 8781
Prénom : Enora
Ton âge : 30
Profession / études : suis au Chomage (Streameuse, dev, gameuse, roi du monde et pouet)
Les logiciel(s) utilisés : Photoshop CC, Sublime text 3, Notepad++, Wamp, IntelliJ, Netbeans, Atom, VS Code, Premiere CC, Audition CC, Illustrator CC...


Mon CV PRDien
Dédicaces:
My role player game characters:

Voir le profil de l'utilisateur
Concours de codage 2020 - Votes pour l'épreuve 2 Empty
Message(#) Sujet: Re: Concours de codage 2020 - Votes pour l'épreuve 2 Concours de codage 2020 - Votes pour l'épreuve 2 EmptyVen 3 Avr - 12:31

Candidat 2




HTML :

Code:
<div class="blocpa">
  <div class="titrepa">Les chats domineront le monde</div>
  <div class="navpa"><div class="champs"><span><a href="http://www.pub-rpg-design.com/t100052-reglement-concept-tout-sur-prd">Règlement</a></span><span><a href="http://www.pub-rpg-design.com/f208-salon-de-parrainage">Bottins</a></span><span><a href="http://www.pub-rpg-design.com/f118-vie-de-prd">Annexes</a></span><span><a href="http://www.pub-rpg-design.com/t92075-guide-du-parfait-prdesien">Guide</a></span><span><a href="http://www.pub-rpg-design.com/f208-salon-de-parrainage">PV et Scénarios</a></span><span><a href="http://www.pub-rpg-design.com/f230-partie-invite">Invités</a></span><span><a href="http://www.pub-rpg-design.com/t96669-demande-de-partenariat">Partenariats</a></span></div></div>
  <div class="conteneurflex">
    <div class="contextepa"><div class="titrechamps">Contexte</div>Une nuit, une nuit à attendre... Une longue nuit avant de savoir si le souverain ennemi acceptera un traité de paix, si fragile, si friable qu'on aurait même de la peine à le prendre au sérieux. Des solutions précaires, du rafistolage, voilà tout ce que j'ai su inventer. La Bretagne résistait quand je suis arrivé, elle résistera encore quand je partirai. Je ne saurais dire pourquoi, je conserve encore, rescapée de mon découragement, une curiosité : existe t-il quelqu'un parmi nous déjà - ou encore à naître - qui se destine à restaurer l'ordre sur l'île de Bretagne? Et s'il existe, que peut-il bien posséder que je ne possède moi-même ? D'où vient-il? Est-il romain? Quelle arme tient-il à sa ceinture ? Celui qui vaincra là où j'ai échoué, je voudrais voir son visage une fois, car je lui conserve encore, rescapé de mon découragement, ma curiosité. – Manius Macrinus Firmus

Tout cela n'est rien. Absolument rien ! Il y a peu de temps quelque chose a fait « Boum ». Voila, nous sommes sur une toute petite miette expulsée par ce boum, qui dérive et tournicote sur elle-même, en attendant sa fin, proche ! Sur cette miette de tous petits organismes gesticulent ; ça nait, ça vit, ça meurt. Tout cela n'a aucune conséquence. – Méléagant

Pour le Graal, j’ai bâti une forteresse, moi. Kaamelott, ça s’appelle. J’ai été chercher des chevaliers dans tout le royaume. En Calédonie, en Carmélide, à Gaunes, à Vannes, aux Pays de Galles. J’ai fait construire une grande table, pour que les chevaliers s’assoient ensemble. Je l’ai voulue ronde, pour qu’aucun d’entre eux ne se retrouve assis dans un angle, ou en bout de table. C’était compliqué, alors j’ai essayé d’expliquer ce qu’était le Graal, pour que tout le monde comprenne. C’était difficile, alors j’ai essayé de rigoler pour que personne ne s’ennuie. J’ai raté, mais je veux pas qu’on dise que j’ai rien foutu, parce que c’est pas vrai. – Arthur

Mais moi, j’m’en fous des honneurs, rien à péter, le Graal aussi, rien à péter. Moi, c’est Arthur qui compte. Moi je suis pas un as de la stratégie ou du tir à l’arc, mais je peux me vanter de savoir ce que c’est que d’aimer quelqu’un. – Perceval

Lien vers la suite du contexte : http://www.pub-rpg-design.com/f215-petits-papiers-de-prd
    </div>
    <div class="lienspa"><div class="titrechamps">Staff</div><div class="pred"><img src="https://zupimages.net/up/20/11/sep1.jpg"><div class="contenustaff"><span>Eva Donchier <br> MP <br> Profil <br> Présente</span></div></div><div class="pred"><img src="https://zupimages.net/up/20/11/sep1.jpg"><div class="contenustaff"><span>Seb Tike <br> MP <br> Profil <br> Absent</span></div></div><div class="pred"><img src="https://zupimages.net/up/20/11/sep1.jpg"><div class="contenustaff"><span>Psy Kose <br> MP <br> Profil <br> Présence réduite</span></div></div></div>
    <div class="blocdroitpa"><div class="titrechamps">News</div>01/02/2020 : Ouverture du concours de codage avec 8 participants<br>
11/02/2020 : Envoie de l'épreuve 1 aux participants<br>
24/02/2020 : Délais supplémentaire demandé et accordé<br>
29/02/2020 : Retard de Moony et envoie de l'épreuve 2</div></div>
  <div class="conteneur2"><div class="blocstaffpa"><div class="titrechamps">Membres du mois</div><div class="truc"><div class="mpmdm">Mp<br>Profil<br></div><img src="https://zupimages.net/up/20/11/kqio.jpg"></div><div class="truc"><div class="mpmdm">Mp<br>Profil<br></div><img src="https://zupimages.net/up/20/11/kqio.jpg"></div><div class="truc"><div class="mpmdm">Mp<br>Profil<br></div><img src="https://zupimages.net/up/20/11/kqio.jpg"></div></div><div class="creditpa"><div class="titrechamps">Crédits</div>Contexte : Réplique de Kaamelott d'Alexandre Astier. <br>Images : [Créditez les gens si vous en avez besoin].<br> Il est strictement interdit de copier le code si celui ci n'a pas été mis en Libre Servic. Il a été fait pour le concours de codage de Février-Mars 2020. Merci de respecter les auteurs des codes.</div>
<div class="bloc3pa"><div class="titrechamps">Top sites & Partenaires</div><div class="truc2"><a href="#">TOP 1
          <span></span>
    </a><img src="https://zupimages.net/up/20/11/5tse.jpg"></div><div class="truc2"><a href="#">TOP 2
          <span></span>
    </a><img src="https://zupimages.net/up/20/11/5tse.jpg"></div><div class="truc2"><a href="#">TOP 3
          <span></span>
    </a><img src="https://zupimages.net/up/20/11/5tse.jpg"></div><div class="truc2"><a href="#">TOP 4
          <span></span>
    </a><img src="https://zupimages.net/up/20/11/5tse.jpg"></div></div>
  </div>
  <div class="partenaires">
    <FORM>
    <SELECT name="part" size="1">
      <OPTION>Top-Partenaires
        <OPTION>Part1
          <OPTION>Vous ?
              </SELECT>
  </FORM>
 </div>
</div>

CSS :

Code:
::-webkit-scrollbar {height:3px;width:4px;}
 html > ::-webkit-scrollbar {width:4px;}
::-webkit-scrollbar-thumb {background: #b34bbb}
::-webkit-scrollbar-track-piece {background-color:rgba(0,0,0,0.5);}

.blocpa {
background:url('https://i.pinimg.com/originals/88/3f/76/883f76a66cc0590b807e399c03a3d4f3.jpg');
background-size:cover;
width:850px;
height:595px;
margin:auto;
position:relative;
display:flex;
flex-direction:column;
}
.titrepa {
text-align:center;
color:white;
text-shadow: #670044 0 0 5px, #82217d 0 0 10px, #a329af 0 0 15px, #90064a 0 0 20px, #92094d 0 0 30px, #921352 0 0 40px, #8c0a4b 0 0 50px, #880c49 0 0 75px;
text-transform:uppercase;
font-family:georgia;
width:100%;
display:block;
color: #b34bbb;
font-size:25px;
margin:15px;
margin-bottom:30px;
}
.navpa {
width:100%;
}
.titrechamps {
position: absolute;
font-size: 20px;
margin-left: 40px;
margin-top: -25px;
color: #b34bbb;
font-weight: 900;
}
.champs {
position:relative;
margin-bottom:50px;
width:100%;
height:35px;
margin:5px;
margin-bottom:35px;
}
.champs span {
padding:8px;
height: 16px;
text-align: center;
margin:2px;
font-size:13px;
color:white;
margin-left:6px;
display: inline-block;
background: #000000b5;
border-radius:5px;
width: 90px;
border-left:3px solid #b34bbb;
}
.champs span a{
color:white;
text-decoration:none;
font-size:14px;
}

.champs span:hover{position:relative;
background-color:#b34bbb;
transition-duration:1s;
cursor: pointer;
border-left:3px solid white;
}
.contextepa {
padding:10px;
width:30%;
display:block;
height:200px;
color: white;
text-align:justify;
background: #000000b5;
overflow:auto;
margin:5px;
}
.conteneurflex {display:flex;justify-content:space-evenly;margin-bottom:35px;position:relative;}
.lienspa {
width:30%;
height:200px;
margin:5px;
color:white;
padding:10px;
background: #000000b5;
}
.blocdroitpa {
background: #000000b5;
padding:10px;
margin:5px;
color: white;
width:30%;
height:200px;
}
.conteneur2 {display:flex;width:100%;
}
.blocstaffpa {
background: #000000b5;
width:30%;
margin:5px;
color: white;
padding:10px;
height:100px;
}
.creditpa {width:30%;
height:100px;
background: #000000b5;
padding:10px;
margin:5px;
overflow:auto;
color:white;
text-align:justify;
}
.bloc3pa {padding:10px;
margin:5px;
background:#000000b5;
width:30%;
overflow:auto;
height:55px;
color:white;
}
.truc {
object-fit : cover;
object-position: 100% 50%;
width:80px;
height:100px;
border-radius:350px;
overflow:hidden;
background:black;
box-shadow: 0 0 6px #080808;
position:relative;
display:inline-block;
margin-left:4px;
}
.truc:hover {;transition:1s;}

.truc2 {
object-fit : cover;
object-position: 100% 50%;
width:50px;
height:50px;
border-radius:350px;
overflow:hidden;
background:black;
box-shadow: 0 0 6px #080808;
position:relative;
display:inline-block;
margin-left:10px;
}

.pred {
object-fit : cover;
object-position: 100% 50%;
width:80px;
height:200px;
border-radius:10px;
overflow:hidden;
background:black;
box-shadow: 0 0 6px #080808;
position:relative;
display:inline-block;
margin-left:3px;
}
.pred img {
 position:absolute;
 top:0;
}
.contenustaff {position:absolute;
background: #000000b5;
width:100%;
height:200px;
right:100px;
transition:1s;
overflow:hidden;}

.contenustaff:hover{
right:0px;
transition:1s;
}
.contenustaff span {
margin-top:5px;
padding:5px;
font-size:15px;
display:block;
}
.pred:hover .contenustaff {
right:0px;
}
.partenaires {
position:relative;
margin-left:575px;
width:273px;
margin-top:-35px;
height:50px;
}
select {width:100%;height:30px;background: #000000b5;border:none;color:white;}
form {width:273px;}

.truc2 a {
position:absolute;
color:white;
text-decoration:none;
width:50px;
margin-top:-5px;
margin-left:-4px;
font-size:12px;
height:50px;
background:#b34bbb;
padding:15px;
overflow:visible!important;
border-radius:3px;
box-shadow:0 0 2px rgba(0,0,0,.5);
opacity:0;
}
.truc2 a:hover{opacity:1;transition:all .25s;}
.mpmdm {
position:absolute;opacity:0;width:100%;text-align:center;height:100px;font-size:15px;margin-top:10px;
}
.mpmdm:hover {opacity:1;transition:1s;background:black;}

_______________________________________________
Absence quasi totale jusqu'au 1er Juillet
Night Neko a évolué en Moony




Revenir en haut Aller en bas

Modératrice • Modo Blablatrice • Modo Animatrice • Journaliste
_____________________

Moony
Modératrice • Modo Blablatrice • Modo Animatrice • Journaliste

Date d'arrivée sur PRD : 02/06/2009
Messages postés : 8781
Prénom : Enora
Ton âge : 30
Profession / études : suis au Chomage (Streameuse, dev, gameuse, roi du monde et pouet)
Les logiciel(s) utilisés : Photoshop CC, Sublime text 3, Notepad++, Wamp, IntelliJ, Netbeans, Atom, VS Code, Premiere CC, Audition CC, Illustrator CC...


Mon CV PRDien
Dédicaces:
My role player game characters:

Voir le profil de l'utilisateur
Concours de codage 2020 - Votes pour l'épreuve 2 Empty
Message(#) Sujet: Re: Concours de codage 2020 - Votes pour l'épreuve 2 Concours de codage 2020 - Votes pour l'épreuve 2 EmptyVen 3 Avr - 12:31

Candidat 3




HTML :

Code:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href="https://fonts.googleapis.com/css?family=Anton|Roboto+Mono&display=swap" rel="stylesheet">
<div class="pa-wrapper">
 
  <!-- Message de Bienvenue -->
  <h1>Bienvenue sur Les Chats domineront le monde</h1>
<div class="pa-wrapper2">
<div class="pa-left">
 
  <!-- Liens utiles -->
  <div class="pa-links">
    <a target="_blank" href="http://www.pub-rpg-design.com/t100052-reglement-concept-tout-sur-prd">Réglement</a>
    <a target="_blank" href="http://www.pub-rpg-design.com/f208-salon-de-parrainage">Bottins</a>
    <a target="_blank" href="http://www.pub-rpg-design.com/f118-vie-de-prd">Annexes</a>
    <a target="_blank" href="http://www.pub-rpg-design.com/t92075-guide-du-parfait-prdesien">Guide</a>
    <a target="_blank" href="http://www.pub-rpg-design.com/f208-salon-de-parrainage">PVs et Scénarios</a>
    <a target="_blank" href="http://www.pub-rpg-design.com/f230-partie-invite">Invités</a>
    <a target="_blank" href="http://www.pub-rpg-design.com/t96669-demande-de-partenariat">Partenariats</a>
  </div>
  <div class="pa-infos">
    <!-- COntexte -->
    <div class="pa-contexte">
      <span>
            Une nuit, une nuit à attendre... Une longue nuit avant de savoir si le souverain ennemi acceptera un traité de paix, si fragile, si friable qu'on aurait même de la peine à le prendre au sérieux.
            Des solutions précaires, du rafistolage, voilà tout ce que j'ai su inventer.
            La Bretagne résistait quand je suis arrivé, elle résistera encore quand je partirai.
            Je ne saurais dire pourquoi, je conserve encore, rescapée de mon découragement, une curiosité : existe t-il quelqu'un parmi nous déjà - ou encore à naître -
            qui se destine à restaurer l'ordre sur l'île de Bretagne? Et s'il existe, que peut-il bien posséder que je ne possède moi-même ? D'où vient-il? Est-il romain?
            Quelle arme tient-il à sa ceinture ? Celui qui vaincra là où j'ai échoué, je voudrais voir son visage une fois, car je lui conserve encore, rescapé de mon découragement, ma curiosité.
            – Manius Macrinus Firmus
          <br><br>
          Tout cela n'est rien. Absolument rien ! Il y a peu de temps quelque chose a fait « Boum ».
          Voila, nous sommes sur une toute petite miette expulsée par ce boum, qui dérive et tournicote sur elle-même, en attendant sa fin, proche !
          Sur cette miette de tous petits organismes gesticulent ; ça nait, ça vit, ça meurt. Tout cela n'a aucune conséquence.
            – Méléagant
          <br><br>
          Pour le Graal, j’ai bâti une forteresse, moi. Kaamelott, ça s’appelle. J’ai été chercher des chevaliers dans tout le royaume.
          En Calédonie, en Carmélide, à Gaunes, à Vannes, aux Pays de Galles. J’ai fait construire une grande table, pour que les chevaliers s’assoient ensemble.
          Je l’ai voulue ronde, pour qu’aucun d’entre eux ne se retrouve assis dans un angle, ou en bout de table. C’était compliqué, alors j’ai essayé d’expliquer ce qu’était le Graal,
          pour que tout le monde comprenne. C’était difficile, alors j’ai essayé de rigoler pour que personne ne s’ennuie.
          J’ai raté, mais je veux pas qu’on dise que j’ai rien foutu, parce que c’est pas vrai.
          – Arthur
          <br><br>
          Mais moi, j’m’en fous des honneurs, rien à péter, le Graal aussi, rien à péter. Moi, c’est Arthur qui compte.
          Moi je suis pas un as de la stratégie ou du tir à l’arc, mais je peux me vanter de savoir ce que c’est que d’aimer quelqu’un.
          – Perceval
      </span>
      <a target="_blank" href="http://www.pub-rpg-design.com/f215-petits-papiers-de-prd">la suite du contexte est par ici</a>
    </div>
  <!-- Nouveautés -->
    <div class="pa-news">
      <div>
        <strong>01/02/2020 :</strong> Ouverture du concours de codage avec 8 participants<br>
        <strong>11/02/2020 :</strong> Envoie de l'épreuve 1 aux participants<br>
        <strong>24/02/2020 :</strong> Délais supplémentaire demandé et accordé<br>
        <strong>29/02/2020 :</strong> Retard de Moony et envoie de l'épreuve 2
      </div>
      <!-- Image à côté des nouveautés -->
      <img src="https://66.media.tumblr.com/705ce1c26fa0fa39aa471106b9b5afc7/tumblr_pxq75zFVCl1xe64cko1_400.gifv">
    </div>
      <!-- Tops sites -->
    <div class="pa-top">
      <strong>Votez pour le forum</strong><br>
        <span><a target="_blank" href="http://www.root-top.com/topsite/obsession27/">♠</a>
        <a target="_blank" href="http://www.root-top.com/topsite/fallingangels/">♠</a>
        <a target="_blank" href="http://www.root-top.com/topsite/pubrpgdesign/">♠</a>
      </span>
    </div>
  </div>
  </div>
        <!-- Staff -->
  <div class="pa-right">
    <div class="pa2-infos">
    <div class="pa-staff">
      <div><img src="http://68.media.tumblr.com/6a3475ca1a9712c0d4d025fa1137dfa5/tumblr_n3s51aHp4y1qgtanjo1_r3_250.gif"><h3>Eva Donchier</h3>
        <a target="_blank" href="http://www.pub-rpg-design.com/privmsg?folder=inbox">MP</a> -
        <a target="_blank" href="http://www.pub-rpg-design.com/u12708">Profil</a><br>
        <em>Présente</em></div>
        <div><img src="https://i.servimg.com/u/f30/19/45/51/53/source10.gif"><span><h3>Seb Tike</h3>
        <a target="_blank" href="http://www.pub-rpg-design.com/privmsg?folder=inbox">MP</a> -
        <a target="_blank" href="http://www.pub-rpg-design.com/u12708">Profil</a><br>
        <em>Absent</em></div>
          <div><img src="https://i.servimg.com/u/f30/19/45/51/53/giphy_10.gif"><h3>Psy Kose</h3>
        <a target="_blank" href="http://www.pub-rpg-design.com/privmsg?folder=inbox">MP</a> -
        <a target="_blank" href="http://www.pub-rpg-design.com/u12708">Profil</a><br>
        <em>Présence réduite</em></div>
      </div>
        <!-- Partenaires -->
        <div class="pa-part">
          <strong>Nos aminous</strong>
          <a target="_blank" href="http://www.pub-rpg-design.com/"><img src="https://i.servimg.com/u/f30/19/45/51/53/gpasle10.png"></a>
          <a target="_blank" href="http://www.pub-rpg-design.com/"><img src="https://i.servimg.com/u/f30/19/45/51/53/gpasle10.png"></a>
          <a target="_blank" href="http://www.pub-rpg-design.com/"><img src="https://i.servimg.com/u/f30/19/45/51/53/gpasle10.png"></a>
          <a target="_blank" href="http://www.pub-rpg-design.com/"><img src="https://i.servimg.com/u/f30/19/45/51/53/gpasle10.png"></a>
          <a target="_blank" href="http://www.pub-rpg-design.com/"><img src="https://i.servimg.com/u/f30/19/45/51/53/gpasle10.png"></a>
            </div>
            <!-- Crédits -->
              <div class="pa-credits">
                  Contexte : Réplique de Kaamelott d'Alexandre Astier. Images : Tumblr et KoalaVolant
                  <br>Il est strictement interdit de copier le code si celui ci n'a pas été mis en Libre Servic.
                    Il a été fait pour le concours de codage de Février-Mars 2020. Merci de respecter les auteurs des codes.
                  </div> <!-- Fin PA- Credits -->
            <!-- Membres du mois -->
                <div class="pa-membres"><h3>Nos petits chats badass</h3>
          <div><img src="https://i.servimg.com/u/f30/19/45/51/53/tumblr10.gif"><span>Janet Ranafout<br>
          <a target="_blank" href="http://www.pub-rpg-design.com/privmsg?folder=inbox">MP</a><br>
          <a target="_blank" href="http://www.pub-rpg-design.com/u12708">Profil</a></span>
            </div>
            <div><img src="https://i.servimg.com/u/f30/19/45/51/53/spider10.gif"><span>Jean Cérian<br>
          <a target="_blank" href="http://www.pub-rpg-design.com/privmsg?folder=inbox">MP</a><br>
          <a target="_blank" href="http://www.pub-rpg-design.com/u12708">Profil</a></span>
            </div>
              </div><!-- Fin PA Membres du mois ->
                </div> <!-- Fin PA2 Infos -->
              </div> <!-- Fin PA -right -->
                <div class="pa-pv">
                  <a target="_blank" href="http://www.pub-rpg-design.com/f217-recherches-de-scenarios"><img src="https://i.servimg.com/u/f30/19/45/51/53/asaico10.gif"><span>PV<br>Vampire</span></a>
                  <a target="_blank" href="http://www.pub-rpg-design.com/f217-recherches-de-scenarios"><img src="https://i.servimg.com/u/f30/19/45/51/53/dioico10.gif"><span>PV<br>Loup Garou</span></a>
                  <a target="_blank" href="http://www.pub-rpg-design.com/f217-recherches-de-scenarios"><img src="https://i.servimg.com/u/f30/19/45/51/53/elchai10.gif"><span>Scénario<br>Fantôme</span></a>
                  <a target="_blank" href="http://www.pub-rpg-design.com/f217-recherches-de-scenarios"><img src="https://i.servimg.com/u/f30/19/45/51/53/margar10.jpg"><span>Scénario<br>Lorialet</span></a>
                  <a target="_blank" href="http://www.pub-rpg-design.com/f217-recherches-de-scenarios"><img src="https://i.servimg.com/u/f30/19/45/51/53/tumblr12.png"><span>Scénario<br>Humaine</span></a>
                    </div>
                    </div></div>
                </div>

CSS :

Code:
/* Couleurs et Images de fond */
 
  .pa-wrapper{ background-color:#dedede; }
 
  /* Message de bienvenue */
  .pa-wrapper h1{    text-shadow: 2px 2px 0 #A14501, 2px -2px 0 #A14501,
    -2px 2px 0 #A14501, -2px -2px 0 #A14501,
    2px 0px 0 #A14501, 0px 2px 0 #A14501,
    -2px 0px 0 #A14501, 0px -2px 0 #A14501,
    2px 2px 2px rgba(142,32,95,0);
  color:#fff;
    background-image:url('https://i.servimg.com/u/f30/19/45/51/53/bienve10.png');
}
 
  /* Couleurs des liens */
 
  .pa-wrapper a, .pa-wrapper a:visited, .pa-wrapper a:active{ color:#5F581B; }
  .pa-wrapper a:hover{ color:#752304; }

  /* Liens Utiles et les H3 */
 
  .pa-links a, .pa-staff h3{ background: #444;
background: linear-gradient(90deg, #787424 0%, #9B1F00 100%);
  color:#fff; text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5); }
 
.pa-links a:hover{ background:#444; }
 
  /* Couleur du contexte */
 
  .pa-contexte span{  background-color:#fff; }
    .pa-contexte a{  color:#fff;  background:#838383; }
    .pa-contexte a:hover{ background-color:#6A6A6A; }
 
  /* Couleurs des news */
 
  .pa-news strong{ /*Petit titre*/
  color:#9B1F00;
}
 
  /* Couleur des tops et partenariats */
 
  .pa-top, .pa-part{ background: #444;
background: linear-gradient(90deg, #787424 0%, #9B1F00 100%);  }
  .pa-top a, .pa-top strong, .pa-part strong{ color:#fff; }
 
  /* Couleurs de l'ascenseur */

.pa-wrapper ::-webkit-scrollbar {  width: 6px;  height: 6px; }
.pa-wrapper ::-webkit-scrollbar-button {  width: 0px;  height: 0px; }
.pa-wrapper ::-webkit-scrollbar-thumb {  background: #525252;  border: 0px none #ffffff;  border-radius: 50px;}
.pa-wrapper ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active{  background: #525252;}
.pa-wrapper ::-webkit-scrollbar-track {  background: #c4c4c4;  border: 0px none #ffffff;  border-radius: 50px;}
.pa-wrapper ::-webkit-scrollbar-track:hover {  background: #d2d2d2;}
.pa-wrapper ::-webkit-scrollbar-track:active {  background: #e2e2e2;}
.pa-wrapper ::-webkit-scrollbar-corner {  background: transparent;}
 
  /* Couleur des crédits */
 
.pa-credits { border-color:#787424 !important; background-color:#fff; }
 
  /* Couleur des membres */
 
 .pa-membres h3{ color:#9B1F00 !important; }
  .pa-membres span{ background-color:#fff; }
 
  /* Couleur des PVs */
 
  .pa-pv a span{ background-color:#fff; }
 
  /* Structure */
 
  /*Générale */
  .pa-wrapper{  width:800px; margin:0 auto; font-family:Verdana;
  font-size:11px; }
  .pa-wrapper *{ box-sizing:border-box; }
  .pa-wrapper a, .pa-wrapper a:hover, .pa-wrapper a:visited, .pa-wrapper a:active{ text-decoration:none; }
  .pa-wrapper2{    height: 400px; }
 
  /* Display Flex */
 
.pa-left, .pa-right, .pa-infos, .pa-wrapper2, .pa-links, .pa-news, .pa-staff, .pa2-infos, .pa-part, .pa-credits, .pa-membres{ display:flex; }
 
  /* Blocs */
 
  .pa-left{ position:relative; left:-30px; }
  .pa-infos{ width:269px; flex-wrap:wrap; }
  .pa-right{ margin-left:60px; width:300px;}
  .pa2-infos, .pa-part{ flex-wrap:wrap; }
 
  /* Message bienvenue */
  .pa-wrapper h1{
  width:800px;
  font-family: 'Anton', sans-serif; color:#fff; font-weight:normal; text-transform:uppercase;
  font-size:30px; line-height:30px; text-align:center;
  letter-spacing:2px; padding:20px; margin:10px 0px;
  background-repeat:no-repeat;
  }
 
  /* Liens Utiles */
 
  .pa-links{ flex-direction:column; align-items:center; justify-content:center; width:100px; }
  .pa-links a{ width:100px; margin: 5px 2px; padding:5px;
  font-size:11px; line-height:13px; font-family: 'Roboto Mono', monospace; text-transform:uppercase;
  display:flex; justify-content:center; align-items:center; text-align:center;}
 
  /* Contexte */
 
 .pa-contexte {    min-width: 315px;    margin: 0px 0px 10px 20px; }
  .pa-contexte span{ display:block; overflow:auto; padding:10px; height:170px; text-align:justify;}
  .pa-contexte a{ padding:3px; font-family: 'Roboto Mono', monospace; font-size:10px; position:relative;top:0px; z-index:2; display:block; }
  .pa-contexte a:after{ content:'>'; padding-left:5px; transition:500ms; }
  .pa-contexte a:hover:after{ padding-left:10px;  }
 
  /* News */
 
  .pa-news{ margin-left:20px ; min-width:280px; }
  .pa-news div{ position:relative; padding:5px; height:110px; overflow:auto; }
  .pa-news img{ min-width:110px; height:200px; object-fit:cover; clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0); position:relative; top:-28px; z-index:1;}
  .pa-news strong{ margin:0; font-family: 'Roboto Mono', monospace; letter-spacing:3px; font-size:9px; }
 
  /* Tops Sites */
 
.pa-top{ display: block; position: relative;    top: -77px;    min-width: 225px;    height: 49px;    margin-left: 20px; padding:12px; }
.pa-top strong{ font-family: 'Roboto Mono', monospace;  letter-spacing:3px; font-size:9px;  line-height:0px;}
  .pa-top span{ text-align:center; display:block; }
  .pa-top a{ font-size:25px; letter-spacing:8px;  }
 
  /* Staff */
 
  .pa-staff img{ width:70px; height:70px; object-fit:cover;  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); -moz-transform: rotate(-15deg);-webkit-transform: rotate(-15deg);-o-transform: rotate(-15deg);-ms-transform: rotate(-15deg);
transform: rotate(-15deg); display:block; margin:0 auto;}
    .pa-staff div{ width:100px; font-size:9px; line-height:10px; text-align:center; font-family: 'Roboto Mono', monospace; letter-spacing:1px; }
  .pa-staff h3{ margin: 5px 2px; padding:5px;
  font-size:9px; line-height:11px; font-family: 'Roboto Mono', monospace; text-transform:uppercase;
  display:flex; justify-content:center; align-items:center; text-align:center; font-weight:normal; margin-top:-15px; position:relative; z-index:999; letter-spacing:0px; }
.pa-staff em{ font-size:8px; }
 
  /* Partenariats */
 
  .pa-part{ padding:5px; width:300px; justify-content:center; margin-top:5px;}
  .pa-part img{ width:20px; transition:500ms; }
  .pa-part img:hover{    filter: brightness(3) ; }
  .pa-part strong{ margin:5px 0px 5px 0px; font-family: 'Roboto Mono', monospace;  letter-spacing:3px; font-size:9px;  line-height:0px; display:inline-block; width:100%; text-align:center;}

  /* Crédits */
 
.pa-credits{ border:solid 1px; padding:6px; font-size:10px; margin-top:5px;}
 
  /* Membres du mois */
 
  .pa-membres{ margin-top:5px; justify-content:center; flex-wrap:wrap;  font-family: 'Roboto Mono', monospace; width:300px; font-size:10px; }
  .pa-membres h3{ width:100%; margin: 5px 0px 0px 0px; font-size:10px; font-family: 'Roboto Mono', monospace;  letter-spacing:3px; text-align:center; }
  .pa-membres img{ width:70px; height:70px; object-fit:cover; clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); }
  .pa-membres div{ margin:0px 10px; position:relative; }
  .pa-membres div span{ transition:500ms; display:block; padding:5px; width:75px; height:75px; text-align:center; position:absolute; top:0px; -moz-transform: scale(0) rotate(-360deg);
-webkit-transform: scale(0) rotate(-360deg);
-o-transform: scale(0) rotate(-360deg);
-ms-transform: scale(0) rotate(-360deg);
transform: scale(0) rotate(-360deg);}
  .pa-membres div:hover span{ -moz-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg); }
 
  /* PVs et Scénarios */
 
  .pa-pv{ margin-left:20px; position:relative; top:-10px; }
  .pa-pv img, .pa-pv a span{ clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);  width:70px; height:70px; }
  .pa-pv img{ object-fit:cover; }
  .pa-pv a{ position:relative; display:block; margin:10px 0px; overflow:hidden;}
  .pa-pv a span{ font-size:10px;  padding:5px; position:absolute; left:-70px; top:0px; display:flex; align-items:center;
  text-align:center; justify-content:center; transition:600ms; }
  .pa-pv a:hover span{ left:0px; }

_______________________________________________
Absence quasi totale jusqu'au 1er Juillet
Night Neko a évolué en Moony




Revenir en haut Aller en bas

Modératrice • Modo Blablatrice • Modo Animatrice • Journaliste
_____________________

Moony
Modératrice • Modo Blablatrice • Modo Animatrice • Journaliste

Date d'arrivée sur PRD : 02/06/2009
Messages postés : 8781
Prénom : Enora
Ton âge : 30
Profession / études : suis au Chomage (Streameuse, dev, gameuse, roi du monde et pouet)
Les logiciel(s) utilisés : Photoshop CC, Sublime text 3, Notepad++, Wamp, IntelliJ, Netbeans, Atom, VS Code, Premiere CC, Audition CC, Illustrator CC...


Mon CV PRDien
Dédicaces:
My role player game characters:

Voir le profil de l'utilisateur
Concours de codage 2020 - Votes pour l'épreuve 2 Empty
Message(#) Sujet: Re: Concours de codage 2020 - Votes pour l'épreuve 2 Concours de codage 2020 - Votes pour l'épreuve 2 EmptyVen 3 Avr - 12:31

Candidat 4




HTML + CSS :

Code:
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8" />
  <title>En tete concours PRD</title>
        <link href="https://fonts.googleapis.com/css?family=Lobster+Two&display=swap" rel="stylesheet" />
  <style>

/******
font-family: 'Lobster Two', cursive;
font-family: Georgia;
******/
::-webkit-scrollbar {
  width: 6px; /*largeur de la scrollbar verticale*/
  height: 6px; /*hauteur de la scrollbar horizontale*/
}
::-webkit-scrollbar-track {
  background-color: #099d64 /*couleur du fond de la scrollbar*/
}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color:#032d1d /*couleur de la barre*/;
  border-radius: 10px;
}
*{
  box-sizing: border-box;
  scrollbar-color: #032d1d;
  scrollbar-width: thin;
}
#en_tete{
  width:100%;
  max-width: 900px;
  background: #099d64;
  color:#032d1d;
  border:2px #032d1d solid;
  margin:auto;
  padding:5px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  font-family: Georgia;
  font-size: 12px;
  text-align: justify;
  box-shadow: 2px 2px 5px #000;
}

#en_tete .d-flex{
  display:flex;
  flex-wrap:nowrap;
  justify-content: space-between;
}
#en_tete .d-flex-column{
  display:flex;
  flex-wrap:nowrap;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

#en_tete .d-flex > div:not(#col3),
#en_tete .d-flex > div#col3 > div
{
  box-shadow: 2px 2px 12px #000;
  border:2px #032d1d solid;
  padding:5px;
  margin:20px 10px 10px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
#en_tete .d-flex > div#col3 > div {
  height: 107px;
}
#en_tete #contexte{
  width:42%;
}
#en_tete #news,#en_tete #col3{
  width:28%;
}
#en_tete #cp{
  width:20%;
}
#en_tete #partenaires, #pv{
  width:38%;
}

/****  Mise en page  ****/
a:link {
  text-decoration:none !important;
  transition:All 1s ease-out;
  -webkit-transition:All 1s ease-out;
  -moz-transition:All 1s ease-out;
  -o-transition:All 1s ease-out;
  font-family: 'Lobster Two', cursive;
  font-size:13px;
}
a{
  color:#032d1d;
}
a:hover{
  color:#fff;
}

.titre-blocs{
  font-size:25px;
  font-family: 'Lobster Two', cursive;
  text-align: center;
  text-shadow: 1px 1px #099d64, -1px 1px #099d64,-1px -1px #099d64,1px -1px #099d64;
  padding: 0;
  margin: -26px 0 0 0 !important;
}
#titreEnTete{
  font-size:30px;
  font-family: 'Lobster Two', cursive;
  text-align: center;
  position: relative;
}
#contexte p{
  text-align:justify;
  text-indent: 12px;
  padding:0 5px;
}
#contexte > div:not(.titre-blocs){
  max-height: 200px;
  overflow: auto;
}
#contexte{
  text-align: center;
}
#cp p, #cp{
  text-align:center;
  font-size: 10px;
  padding:3px;
}
.mea{
  font-weight: bold;
  font-family: 'Lobster Two', cursive;
  font-size: 16px;
  line-height: 20px;
}
#en_tete #navRapide{
  margin:10px auto;
  justify-content: space-around;
  background: #032d1d;
 
  text-align: center;
  line-height: 35px;
  border-radius: 10px;
}
#en_tete #navRapide a{
  font-family: 'Lobster Two', cursive;
  font-size: 22px;
  color:#FAFAFA;
}
#partenaires{
  text-align: center;
}
/****  Mise en page Liste  ****/
ul{
  text-align:left;
  margin: 2px;
  padding-left: 5px;
}
li {
  list-style-type: none;
}
li:before {
  content: "~ ";
  font-weight:bold;
}
#news ul li{
  padding:2px;
}

/****  Partie "staff" et PV  ****/
.membre-staff,
.pv-scenar{
  display:flex;
  align-items:center;
  justify-content:space-around;
  flex-wrap:wrap;

}
.avatar-staff,
.avatar-pv {
  width: 60px;
  height: 60px;
  overflow: hidden;
  position: relative;
  border:1px #352e3f solid;
  margin:2px;
}
.avatar-pv{
  width: 55px;
  height:55px;
}
.avatar-staff img,
.avatar-pv img {
  width: 65px;
  margin: 0;
  opacity: 1;
  transition-duration:1s;
}
.avatar-pv img{
  width: 60px;
}
.information-staff,
.information-pv {
  position: absolute;
  top: 0;
  text-align: center;
  color:#fff;
  opacity:0;
  transition-duration:1s;
  cursor:pointer;
  font-size: 11px
}
.information-staff span:first-child,
.information-pv span:first-child{
  font-weight:bold;
}
.avatar-staff:hover img,
.avatar-pv:hover img{
  opacity: 0.3;
}
.avatar-staff:hover .information-staff,
.avatar-pv:hover .information-pv{
  opacity: 1;
}
/*******FIN DE L'EN-TETE******/

</style>
</head>
<body>

  <div id="en_tete">
      <div id="titreEnTete">
        Les chats domineront le monde
      </div>
      <div id="navRapide" class="d-flex">
        <a href="http://www.pub-rpg-design.com/t100052-reglement-concept-tout-sur-prd">Règlement</a>
        <a href="http://www.pub-rpg-design.com/f208-salon-de-parrainage">Bottins</a>
        <a href="http://www.pub-rpg-design.com/f118-vie-de-prd">Annexes</a>
        <a href="http://www.pub-rpg-design.com/t92075-guide-du-parfait-prdesien">Guide</a>
        <a href="http://www.pub-rpg-design.com/f208-salon-de-parrainage">PV et scénarios</a>
        <a href="http://www.pub-rpg-design.com/f230-partie-invite">Invités</a>
        <a href="http://www.pub-rpg-design.com/t96669-demande-de-partenariat">Partenariat</a>
      </div>
      <div class="d-flex">
        <div id="contexte"><div class="titre-blocs">Contexte</div>
        <div>
            <p>
              Une nuit, une nuit à attendre... Une longue nuit avant de savoir si le souverain ennemi acceptera un traité de paix, si fragile, si friable qu'on aurait même de la peine à le prendre au sérieux. Des solutions précaires, du rafistolage, voilà tout ce que j'ai su inventer. La Bretagne résistait quand je suis arrivé, elle résistera encore quand je partirai. Je ne saurais dire pourquoi, je conserve encore, rescapée de mon découragement, une curiosité : existe t-il quelqu'un parmi nous déjà - ou encore à naître - qui se destine à restaurer l'ordre sur l'île de Bretagne? Et s'il existe, que peut-il bien posséder que je ne possède moi-même ? D'où vient-il? Est-il romain? Quelle arme tient-il à sa ceinture ? Celui qui vaincra là où j'ai échoué, je voudrais voir son visage une fois, car je lui conserve encore, rescapé de mon découragement, ma curiosité. – Manius Macrinus Firmus
            </p>
            <p>
              Tout cela n'est rien. Absolument rien ! Il y a peu de temps quelque chose a fait « Boum ». Voila, nous sommes sur une toute petite miette expulsée par ce boum, qui dérive et tournicote sur elle-même, en attendant sa fin, proche ! Sur cette miette de tous petits organismes gesticulent ; ça nait, ça vit, ça meurt. Tout cela n'a aucune conséquence. – Méléagant
            </p>
            <p>
              Pour le Graal, j’ai bâti une forteresse, moi. Kaamelott, ça s’appelle. J’ai été chercher des chevaliers dans tout le royaume. En Calédonie, en Carmélide, à Gaunes, à Vannes, aux Pays de Galles. J’ai fait construire une grande table, pour que les chevaliers s’assoient ensemble. Je l’ai voulue ronde, pour qu’aucun d’entre eux ne se retrouve assis dans un angle, ou en bout de table. C’était compliqué, alors j’ai essayé d’expliquer ce qu’était le Graal, pour que tout le monde comprenne. C’était difficile, alors j’ai essayé de rigoler pour que personne ne s’ennuie. J’ai raté, mais je veux pas qu’on dise que j’ai rien foutu, parce que c’est pas vrai. – Arthur
            </p>
            <p>
              Mais moi, j’m’en fous des honneurs, rien à péter, le Graal aussi, rien à péter. Moi, c’est Arthur qui compte. Moi je suis pas un as de la stratégie ou du tir à l’arc, mais je peux me vanter de savoir ce que c’est que d’aimer quelqu’un. – Perceval
            </p>
        </div>
        <a href="http://www.pub-rpg-design.com/f215-petits-papiers-de-prd" target="_blank"> Lire tout le contexte</a>
      </div>
      <div id="news">
        <div class="titre-blocs">News</div>
        <ul>
            <li><span class="mea">01/02/2020 </span>: Ouverture du concours de codage avec 8 participants</li>
            <li><span class="mea">11/02/2020 </span>: Envoie de l'épreuve 1 aux participants</li>
            <li><span class="mea">24/02/2020 </span>: Délais supplémentaire demandé et accordé</li>
            <li><span class="mea">29/02/2020 </span>: Retard de Moony et envoie de l'épreuve 2</li>
        </ul>
      </div>
      <div id="col3">
        <div id="staff">
            <div class="titre-blocs">Staff</div>
            <div class="membre-staff">
              <div class="avatar-staff">
                  <img src="https://i.servimg.com/u/f86/19/47/12/29/avva10.png" alt="avatar" />
                  <div class="information-staff d-flex-column">
                    <span>Eva Donchier</span>
                    <span><a href="#">MP</a> - <a href="#">Profil</a></span>
                    <span>Présente</span>
                  </div>
              </div>
              <div class="avatar-staff">
                  <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
                  <div class="information-staff d-flex-column">
                    <span>Seb Tike</span>
                    <span><a href="#">MP</a> - <a href="#">Profil</a></span>
                    <span>Absent</span>
                  </div>
              </div>
              <div class="avatar-staff">
                  <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
                  <div class="information-staff d-flex-column">
                    <span>Psy Kose</span>
                    <span><a href="#">MP</a> - <a href="#">Profil</a></span>
                    <span>Présence réduite</span>
                  </div>
              </div>
            </div>
        </div>
        <div id="membre-mois">
            <div class="titre-blocs">Membre du mois</div>
            <div class="membre-staff">
              <div class="avatar-staff">
                  <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
                  <div class="information-staff d-flex-column">
                    <span>Pseudo</span>
                    <a href="#">MP</a> - <a href="#">Profil</a>
                  </div>
              </div>
              <div class="avatar-staff">
                  <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
                  <div class="information-staff d-flex-column">
                    <span>Pseudo</span>
                    <a href="#">MP</a> - <a href="#">Profil</a>
                  </div>
              </div>


            </div>
        </div>
      </div>
  </div>
  <div class="d-flex">
      <div id="cp">
        <div class="titre-blocs">
            Crédits
        </div>
        <p>
            Contexte : Réplique de Kaamelott d'Alexandre Astier. Images : Moi. <br />
            Il est strictement interdit de copier le code si celui ci n'a pas été mis en Libre Servic. <br />Il a été fait pour le concours de codage de Février-Mars 2020. Merci de respecter les auteurs des codes.
        </p>

      </div>
      <div id="partenaires">
        <div class="titre-blocs">Top-site & Partenaires</div>
        <a href="http://www.root-top.com/topsite/pubrpgdesign/"><img src="https://images2.imgbox.com/ff/fb/ImmtAss3_o.png" alt="logo" /></a>
        <a href="http://www.root-top.com/topsite/pubrpgdesign/"><img src="https://images2.imgbox.com/ff/fb/ImmtAss3_o.png" alt="logo" /></a>
        <a href="http://www.root-top.com/topsite/pubrpgdesign/"><img src="https://images2.imgbox.com/ff/fb/ImmtAss3_o.png" alt="logo" /></a>
        <br/><br/>

        <a href="http://www.pub-rpg-design.com/" target="_blank"><img src="https://images2.imgbox.com/e9/54/iP5D6QfR_o.png?fbclid=IwAR3Tj5HRXUlkudukNu2KQXyQ2-m8mcdle2zoUe_vlNAG1wR9AWujfSrP-Dc" alt="logo" /></a>

        <a href="http://www.pub-rpg-design.com/" target="_blank"><img src="https://images2.imgbox.com/e9/54/iP5D6QfR_o.png?fbclid=IwAR3Tj5HRXUlkudukNu2KQXyQ2-m8mcdle2zoUe_vlNAG1wR9AWujfSrP-Dc" alt="logo" /></a>

        <a href="http://www.pub-rpg-design.com/" target="_blank"><img src="https://images2.imgbox.com/e9/54/iP5D6QfR_o.png?fbclid=IwAR3Tj5HRXUlkudukNu2KQXyQ2-m8mcdle2zoUe_vlNAG1wR9AWujfSrP-Dc" alt="logo" /></a>

        <a href="http://www.pub-rpg-design.com/" target="_blank"><img src="https://images2.imgbox.com/e9/54/iP5D6QfR_o.png?fbclid=IwAR3Tj5HRXUlkudukNu2KQXyQ2-m8mcdle2zoUe_vlNAG1wR9AWujfSrP-Dc" alt="logo" /></a>

      </div>
      <div id="pv">
        <div class="titre-blocs">PV et scénarios</div>
        <div class="pv-scenar">
            <div class="avatar-pv">
              <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
              <div class="information-pv d-flex-column">
                  <span>Pseudo</span>
                  <br />
                  <span>Dispo.</span>
              </div>
            </div>
            <div class="avatar-pv">
              <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
              <div class="information-pv d-flex-column">
                  <span>Pseudo</span>
                  <br />
                  <span>Dispo.</span>
              </div>
            </div>
            <div class="avatar-pv">
              <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
              <div class="information-pv d-flex-column">
                  <span>Pseudo</span>
                  <br />
                  <span>Dispo.</span>
              </div>
            </div>
            <div class="avatar-pv">
              <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
              <div class="information-pv d-flex-column">
                  <span>Pseudo</span>
                  <br />
                  <span>Dispo.</span>
              </div>
            </div>
            <div class="avatar-pv">
              <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
              <div class="information-pv d-flex-column">
                  <span>Pseudo</span>
                  <br />
                  <span>Dispo.</span>
              </div>
            </div>
            <div class="avatar-pv">
              <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
              <div class="information-pv d-flex-column">
                  <span>Pseudo</span>
                  <br />
                  <span>Dispo.</span>
              </div>
            </div>
            <div class="avatar-pv">
              <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
              <div class="information-pv d-flex-column">
                  <span>Pseudo</span>
                  <br />
                  <span>Dispo.</span>
              </div>
            </div>
            <div class="avatar-pv">
              <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
              <div class="information-pv d-flex-column">
                  <span>Pseudo</span>
                  <br />
                  <span>Dispo.</span>
              </div>
            </div>
            <div class="avatar-pv">
              <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
              <div class="information-pv d-flex-column">
                  <span>Pseudo</span>
                  <br />
                  <span>Dispo.</span>
              </div>
            </div>
            <div class="avatar-pv">
              <img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png" alt="avatar" />
              <div class="information-pv d-flex-column">
                  <span>Pseudo</span>
                  <br />
                  <span>Dispo.</span>
              </div>
            </div>
        </div>
      </div>

  </div>
</div>
</body>
</html>

_______________________________________________
Absence quasi totale jusqu'au 1er Juillet
Night Neko a évolué en Moony




Revenir en haut Aller en bas

Modératrice • Modo Blablatrice • Modo Animatrice • Journaliste
_____________________

Moony
Modératrice • Modo Blablatrice • Modo Animatrice • Journaliste

Date d'arrivée sur PRD : 02/06/2009
Messages postés : 8781
Prénom : Enora
Ton âge : 30
Profession / études : suis au Chomage (Streameuse, dev, gameuse, roi du monde et pouet)
Les logiciel(s) utilisés : Photoshop CC, Sublime text 3, Notepad++, Wamp, IntelliJ, Netbeans, Atom, VS Code, Premiere CC, Audition CC, Illustrator CC...


Mon CV PRDien
Dédicaces:
My role player game characters:

Voir le profil de l'utilisateur
Concours de codage 2020 - Votes pour l'épreuve 2 Empty
Message(#) Sujet: Re: Concours de codage 2020 - Votes pour l'épreuve 2 Concours de codage 2020 - Votes pour l'épreuve 2 EmptyVen 3 Avr - 12:31

Candidat 5




HTML :

Code:
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,500i,600,600i,700,700i&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Infant:400,500,600,700&display=swap" rel="stylesheet">
<link href="https://lyxiae.com/codesls/concoursprd/page_accueil_style.css" type="text/css" rel="stylesheet">
<script src="https://kit.fontawesome.com/57c5edf8bb.js" crossorigin="anonymous"></script>
</head>
<body>

<div class="lyxPA">
    <div class="lyxPAColLeft">
        <h2 class="PATitle">Navigation</h2>
        <a href="http://www.pub-rpg-design.com/t100052-reglement-concept-tout-sur-prd" class="PAnavLink">Règlement</a>
        <a href="http://www.pub-rpg-design.com/f208-salon-de-parrainage" class="PAnavLink">Bottins</a>
        <a href="http://www.pub-rpg-design.com/f118-vie-de-prd" class="PAnavLink">Annexes</a>
        <a href="http://www.pub-rpg-design.com/t92075-guide-du-parfait-prdesien" class="PAnavLink">Guide</a>
        <a href="http://www.pub-rpg-design.com/f208-salon-de-parrainage" class="PAnavLink">PV et Scénarios</a>
        <a href="http://www.pub-rpg-design.com/f230-partie-invite" class="PAnavLink">Invités</a>
        <a href="http://www.pub-rpg-design.com/t96669-demande-de-partenariat" class="PAnavLink">Partenariat</a>

        <div class="PAcredits">Contexte : Réplique de Kaamelott d'Alexandre Astier. Images : Andrea Koroveshi. Il est strictement interdit de copier le code si celui ci n'a pas été mis en Libre Servic. Il a été fait pour le concours de codage de Février-Mars 2020. Merci de
            respecter les auteurs des codes.</div>

        <h2 class="PATitle titleTops">Topsites ></h2>
    </div>
    <div class="lyxPAMain">
        <div class="lyxPAMid">
            <h2 class="PATitle contexte">Les chats domineront le monde</h2>
            <div class="PABlcTxt"> Une nuit, une nuit à attendre... Une longue nuit avant de savoir si le souverain ennemi acceptera un traité de paix, si fragile, si friable qu'on aurait même de la peine à le prendre au sérieux. Des solutions précaires, du rafistolage, voilà
                tout ce que j'ai su inventer. La Bretagne résistait quand je suis arrivé, elle résistera encore quand je partirai. Je ne saurais dire pourquoi, je conserve encore, rescapée de mon découragement, une curiosité : existe t-il quelqu'un parmi
                nous déjà - ou encore à naître - qui se destine à restaurer l'ordre sur l'île de Bretagne? Et s'il existe, que peut-il bien posséder que je ne possède moi-même ? D'où vient-il? Est-il romain? Quelle arme tient-il à sa ceinture ? Celui
                qui vaincra là où j'ai échoué, je voudrais voir son visage une fois, car je lui conserve encore, rescapé de mon découragement, ma curiosité. – Manius Macrinus Firmus Tout cela n'est rien. Absolument rien ! Il y a peu de temps quelque chose
                a fait « Boum ». Voila, nous sommes sur une toute petite miette expulsée par ce boum, qui dérive et tournicote sur elle-même, en attendant sa fin, proche ! Sur cette miette de tous petits organismes gesticulent ; ça nait, ça vit, ça meurt.
                Tout cela n'a aucune conséquence. – Méléagant Pour le Graal, j’ai bâti une forteresse, moi. Kaamelott, ça s’appelle. J’ai été chercher des chevaliers dans tout le royaume. En Calédonie, en Carmélide, à Gaunes, à Vannes, aux Pays de Galles.
                J’ai fait construire une grande table, pour que les chevaliers s’assoient ensemble. Je l’ai voulue ronde, pour qu’aucun d’entre eux ne se retrouve assis dans un angle, ou en bout de table. C’était compliqué, alors j’ai essayé d’expliquer
                ce qu’était le Graal, pour que tout le monde comprenne. C’était difficile, alors j’ai essayé de rigoler pour que personne ne s’ennuie. J’ai raté, mais je veux pas qu’on dise que j’ai rien foutu, parce que c’est pas vrai. – Arthur Mais
                moi, j’m’en fous des honneurs, rien à péter, le Graal aussi, rien à péter. Moi, c’est Arthur qui compte. Moi je suis pas un as de la stratégie ou du tir à l’arc, mais je peux me vanter de savoir ce que c’est que d’aimer quelqu’un. – Perceval
                <a href="http://www.pub-rpg-design.com/f215-petits-papiers-de-prd" class="PAsuite">Voir la suite</a></div>
            <h2 class="PATitle">Nouveautés</h2>
            <div class="PABlcTxt PANews"><span>01/02/2020 :</span> Ouverture du concours de codage avec 8 participants
                <br> <span>11/02/2020 :</span> Envoie de l'épreuve 1 aux participants
                <br> <span>24/02/2020 :</span> Délais supplémentaire demandé et accordé
                <br> <span>29/02/2020 :</span> Retard de Moony et envoie de l'épreuve 2</div>
            <div class="PApv">
                <a href="lien"><img src="https://i.ibb.co/sj8yF2Q/img-poste-vacant.png"/></a>
                <a href="lien"><img src="https://i.ibb.co/sj8yF2Q/img-poste-vacant.png"/></a>
                <a href="lien"><img src="https://i.ibb.co/sj8yF2Q/img-poste-vacant.png"/></a>


                <h3 class="PApvTitle">Postes vacants</h3>
            </div>
        </div>
        <div class="lyxPAColRight">
            <h2 class="PATitle staff">Le Staff</h2>

            <div class="PAStaff">
                <img src="https://i.ibb.co/h1FKg5r/img-staff-1.png" />
                <div class="PAStaffInfo">
                    <h3>Eva Donchier</h3>
                    <a href="lien"><i class="far fa-user"></i></a>
                    <a href="lien"><i class="far fa-envelope"></i> </a><span class="green">Présente</span>
                </div>
            </div>
            <div class="PAStaff">
                <img src="https://i.ibb.co/zQhCgQR/img-staff-2.png" />
                <div class="PAStaffInfo left">
                    <h3 class="green">Seb Tike</h3>
                    <a href="lien"><i class="far fa-user"></i></a>
                    <a href="lien"><i class="far fa-envelope"></i></a>
                    <span class="red">Absent</span>
                </div>
            </div>
            <div class="PAStaff">
                <img src="https://i.ibb.co/30skDXq/img-staff-3.png" />
                <div class="PAStaffInfo">
                    <h3>Psy Kose</h3>
                    <a href="lien"><i class="far fa-user"></i></a>
                    <a href="lien"><i class="far fa-envelope"></i> </a><span class="green">Prés. réduite</span>
                </div>
            </div>

            <h2 class="PATitle" style="font-size:18px;">Membres du Mois</h2>

            <div class="PAmdm">
                <img src="https://i.ibb.co/K67TZLB/membre-du-mois-1.png" />
                <div class="PAmdmInfo">
                    <span>Janet Ranafout</span>
                    <a href="lien"><i class="far fa-user"></i></a>
                    <a href="lien"><i class="far fa-envelope"></i></a>
                </div>
            </div>
            <div class="PAmdm">
                <img src="https://i.ibb.co/TBQC1pz/membre-du-mois-2.png" />
                <div class="PAmdmInfo">
                    <span>Jean Cérian</span>
                    <a href="lien"><i class="far fa-user"></i></a>
                    <a href="lien"><i class="far fa-envelope"></i></a>
                </div>
            </div>
        </div>
        <div class="lyxPABotBar">
            <div class="PAtopsites">
                <a href="lien" class="PAtopsiteLink">1</a>
                <a href="lien" class="PAtopsiteLink">2</a>
                <a href="lien" class="PAtopsiteLink">3</a>
                <a href="lien" class="PAtopsiteLink">4</a>
            </div>
            <a href="lien" class="partLien">les rejoindre</a>
            <a href="lien" class="PAparto">
      <img src="https://i.ibb.co/4MhZ2Lk/img-parto.png"/>
    </a>
            <a href="lien" class="PAparto">
      <img src="https://i.ibb.co/4MhZ2Lk/img-parto.png"/>
    </a>
            <a href="lien" class="PAparto">
      <img src="https://i.ibb.co/4MhZ2Lk/img-parto.png"/>
    </a>
            <a href="lien" class="PAparto">
      <img src="https://i.ibb.co/4MhZ2Lk/img-parto.png"/>
    </a>
            <a href="lien" class="PAparto">
      <img src="https://i.ibb.co/4MhZ2Lk/img-parto.png"/>
    </a>

        </div>
    </div>
</div>
</body>

CSS :

Code:
/*SIMULATION DE LA LARGEUR DU FORUM*/
/*BOX SIZING*/
 * {
    box-sizing:border-box;
}
/*POUR CHANGER LES COULEURS ET LES POLICES DE LA FICHE*/
 :root {
    --colorGreen:#2a7f62;
    --colorGreen2:#3fdea8;
    --colorRed:#bf1932;
    --gradGreen:linear-gradient(90deg, rgba(71,158,129,1) 0%, rgba(42,128,98,1) 100%);
    --gradVerti:linear-gradient(180deg, rgba(71,158,129,1) 0%, rgba(42,128,98,1) 100%);
    --fontSans:Poppins, sans-serif;
    --fontSans2:Arial, sans-serif;
    --fontSerif:Cormorant Infant, serif;
}
 .lyxPA {
    width:800px;
    height:480px;
    background:#eee;
    display:flex;
    position:relative;
    background-color:#ddd;
    margin:0 auto;
}
 .lyxPA a {
    color:var(--colorGreen);
    text-decoration:none;
    font-weight:700;
    align-self: center;
}
 h2.PATitle {
    font:italic normal 700 20px/30px var(--fontSans);
    height:30px;
    text-transform:uppercase;
    text-align:center;
    padding-right:5px;
    color:var(--colorGreen);
    margin:5px 0px;
    border:none;
    width:100%;
    margin:5px 0px 0px 0px;
}
 .PABlcTxt {
    background-color:#ffffff;
    width:100%;
    height:190px;
    border-radius:5px;
    font:normal normal 400 11px/140% var(--fontSans2);
    overflow:auto;
    padding:10px;
    color:#444;
}
 .PANews {
    height:100px;
    margin-bottom:5px;
}
 .PANews span {
    color:var(--colorRed);
    font:italic normal 700 12px/16px var(--fontSans);
}
 .lyxPAMid {
    width:calc(100% - 220px);
    flex-grow:1;
    display:flex;
    flex-flow:row wrap;
    align-content:space-between;
}
 .lyxPAMid h2.PATitle {
    text-align:left;
    padding-left:10px;
    height:26px;
}
 .PApv {
    display:flex;
    height:50px;
    align-items:flex-end;
    justify-content:space-between;
    width:100%;
    align-content:flex-end;
    background:#ccc;
    border-radius:5px;
    padding:0px 5px;
}
 .PApv img {
    width:60px;
    height:40px;
    transition:0.25s ease-in-out;
}
 .PApv img:hover {
    filter:brightness(1.2);
}
 h3.PApvTitle {
    width:110px;
    height:50px;
    font:italic normal 700 16px/18px var(--fontSans);
    display:flex;
    text-transform:uppercase;
    color:var(--colorRed);
    margin:0px;
    padding:8px 5px;
    position:relative;
    z-index:5;
}
 h3.PApvTitle:before {
    content:"!";
    font:italic normal 700 50px/40px var(--fontSans);
    position:absolute;
    z-index:0;
    color:var(--colorGreen);
    right:5px;
    opacity:0.5;
}
 .lyxPAColLeft{
    width:200px;
    height:auto;
    background-image:url('https://i.ibb.co/7vyp6FY/column-left.png');
    background-color:#111;
    display:flex;
    flex-flow:row wrap;
    border-radius:0px 15px 15px 0px;
    overflow:hidden;
    z-index:10;
    padding:0px 20px 0px 20px;
}
 .PAnavLink {
    width:100%;
    height:24px;
    background-color:rgba(0,0,0,0.75);
    font:normal normal 600 14px/24px var(--fontSans);
    text-decoration:none;
    text-transform:uppercase;
    text-align:center;
    color:var(--colorGreen);
    border-radius:5px;
    transition:0.35s ease-in-out;
}
 .PAnavLink:hover {
    color:var(--colorGreen2);
    letter-spacing:1px;
}
 .PAcredits {
    font:normal normal 500 10px/12px var(--fontSans2);
    text-align:justify;
    color:var(--colorGreen2);
    opacity:0.60;
    position:relative;
    z-index:2;
    padding-top:20px;
    margin:10px 0px;
}
 .PAcredits:before {
    content:"Crédits";
    font:italic normal 700 34px/34px var(--fontSans);
    text-transform:uppercase;
    position:absolute;
    top:0px;
    opacity:0.25;
}
 .PATitle.titleTops {
    font-size:28px;
}
 .lyxPAMain {
    flex-grow:1;
    width:calc(100% - 200px);
    display:flex;
    flex-flow:row wrap;
    position:relative;
    justify-content:flex-end;
}
 .lyxPAMid {
    width:calc(100% - 220px);
    height:430px;
    padding:0px 10px 10px 10px;
}
 .lyxPAColRight {
    width:220px;
    height:430px;
    background-color:#ccc;
    display:flex;
    flex-flow:row wrap;
    padding:0px 10px;
    justify-content:space-between;
}
 .lyxPABotBar {
    width:calc(100% + 15px);
    height:50px;
    background:var(--gradGreen);
    position:absolute;
    bottom:0px;
    left:-15px;
    display:flex;
    padding-right:5px;
    align-items:center;
    justify-content:space-between;
}
 .PATitle.staff{
    text-align:right;
    color:var(--colorRed);
    width:100%;
    padding-right:10px;
}
 .PATitle.contexte {
    text-transform:initial;
}
 .PAStaff {
    width:200px;
    height:50px;
    position:relative;
    overflow:hidden;
}
 .PAStaffInfo {
    width:150px;
    height:50px;
    background:#111;
    padding:8px 10px;
    display:flex;
    flex-flow:row wrap;
    position:absolute;
    top:0px;
    right:-160px;
    border-radius:25px 0px 0px 25px;
    font:normal normal 700 10px/20px var(--fontSans2);
    text-transform:uppercase;
    justify-content:flex-end;
    transition:0.40s ease-in-out;
}
 .PAStaff:hover .PAStaffInfo {
    right:0px;
}
 .PAStaffInfo h3{
    font:normal normal 700 12px/16px var(--fontSans);
    text-transform:uppercase;
    color:var(--colorRed);
    width:100%;
    padding:0px;
    margin:0px;
    text-align:right;
}
 .PAStaffInfo .far {
    color:var(--colorGreen);
    font-size:12px;
    width:20px;
    height:20px;
    text-align:center;
    line-height:20px;
    background:#000;
    border-radius:50%;
    margin:0px 5px 0px 0px;
}
 .green {
    color:var(--colorGreen);
}
 .red {
    color:var(--colorRed);
}
 .PAStaffInfo.left {
    left:-160px;
    border-radius:0px 25px 25px 0px;
    justify-content:flex-start;
}
 .PAStaff:hover .PAStaffInfo.left {
    left:0px;
}
 .PAStaffInfo.left h3{
    text-align:left;
}
 .PAmdm {
    width:90px;
    height:160px;
    margin:0px 5px 5px 5px;
    position:relative;
}
 .PAmdmInfo {
    background-color:rgba(71,158,129,0.65);
    position:absolute;
    top:35px;
    left:-35px;
    right:0;
    bottom:0px;
    height:90px;
    width:160px;
    display:flex;
    flex-flow:row wrap;
    transform:rotate(-90deg);
    padding:10px;
    opacity:0;
    transition:0.40s ease-in-out;
}
 .PAmdm:hover .PAmdmInfo {
    opacity:1;
}
 .PAmdmInfo span {
    width:100%;
    height:20px;
    color:white;
    font:italic normal 700 14px/20px var(--fontSans);
    text-transform:uppercase;
    text-align:center;
}
 .PAmdmInfo .far {
    color:var(--colorGreen);
    font-size:12px;
    width:20px;
    height:20px;
    text-align:center;
    line-height:20px;
    background:#fff;
    border-radius:50%;
    margin:0px 5px 0px 0px;
    transform:rotate(90deg);
    margin:5px 5px 5px 10px;
}
 .PAtopsites {
    width:220px;
    height:50px;
    background:rgba(0,0,0,0.25);
    padding:0px 0px 0px 10px;
    display:flex;
    flex-flow:row wrap;
    align-items:center;
    justify-content:space-evenly;
    border-radius:0px 10px 10px 0px;
}
 .PAtopsiteLink {
    width:36px;
    height:36px;
    display:block;
    font:normal normal 700 26px/36px var(--fontSans);
    color:white!important;
    background:rgba(0,0,0,0.25);
    text-align:center;
    border:1px solid rgba(0,0,0,0.05);
    transition:0.25s ease-in-out;
}
 .PAtopsiteLink:hover {
    border:1px solid rgba(0,0,0,0.2);
}
 .partLien {
    display:block;
    height:50px;
    width:150px;
    font:italic normal 500 12px/55px var(--fontSans2);
    color:rgba(0,0,0,0.7)!important;
    padding:5px;
    text-align:right;
    position:relative;
}
 .partLien:before {
    content:"Partenaires";
    font: italic normal 500 14px/22px var(--fontSans);
    text-transform:uppercase;
    color:white;
    position:absolute;
    left:10px;
}
 .PAparto {
    width:40px;
    height:40px;
    overflow:hidden;
    transition:0.40s ease-in-out;
}
 .PAparto:hover {
    transform:scale(1.1);
}
 .PAparto img {
    width:40px;
    height:40px;
}
 

_______________________________________________
Absence quasi totale jusqu'au 1er Juillet
Night Neko a évolué en Moony




Revenir en haut Aller en bas

Projecteur/trice
_____________________

mocksens
Projecteur/trice

Date d'arrivée sur PRD : 29/10/2017
Messages postés : 925
Prénom : Marie
Ton âge : 22
Profession / études : suis biologiste et future psychologue
Les logiciel(s) utilisés : PhotoFiltre, PhotoScape, GIMP


Mon CV PRDien
Dédicaces:
My role player game characters:

Voir le profil de l'utilisateur
Concours de codage 2020 - Votes pour l'épreuve 2 Empty
Message(#) Sujet: Re: Concours de codage 2020 - Votes pour l'épreuve 2 Concours de codage 2020 - Votes pour l'épreuve 2 EmptyVen 3 Avr - 15:52

Encore de jolies choses présentées, le choix fut difficile Concours de codage 2020 - Votes pour l'épreuve 2 2819848858

_______________________________________________
Présence réduite jusqu'au 08 juin 2020
Concours de codage 2020 - Votes pour l'épreuve 2 D4xs
Bannière réalisée gracieusement par Epic ♥️
Concours de codage 2020 - Votes pour l'épreuve 2 F3aJjg8T_o
bannière par Adamantium ♥️
Revenir en haut Aller en bas

Kimi ga yo
_____________________

Torben
Kimi ga yo

Date d'arrivée sur PRD : 13/04/2017
Messages postés : 3398
Prénom : Thibault
Ton âge : 30
Profession / études : Chargé d'études marketing
Les logiciel(s) utilisés : Photophiltre Studio


Mon CV PRDien
Dédicaces:
My role player game characters:

Voir le profil de l'utilisateur http://bloody-crown.forumactif.org/
Concours de codage 2020 - Votes pour l'épreuve 2 Empty
Message(#) Sujet: Re: Concours de codage 2020 - Votes pour l'épreuve 2 Concours de codage 2020 - Votes pour l'épreuve 2 EmptyVen 3 Avr - 16:20

A voté
Revenir en haut Aller en bas

Aegukga
_____________________

Pétra
Aegukga

Date d'arrivée sur PRD : 25/11/2013
Messages postés : 837
Prénom : C.
Ton âge : 30
Profession / études : code en vert sur fond noir
Les logiciel(s) utilisés : photofiltre et ipiccy


Mon CV PRDien
Dédicaces: Oh Jaja, ohoh ma Jaja ♪
My role player game characters:

Voir le profil de l'utilisateur
Concours de codage 2020 - Votes pour l'épreuve 2 Empty
Message(#) Sujet: Re: Concours de codage 2020 - Votes pour l'épreuve 2 Concours de codage 2020 - Votes pour l'épreuve 2 EmptyVen 3 Avr - 16:37

C'est super joli ! Concours de codage 2020 - Votes pour l'épreuve 2 1885538628

_______________________________________________
Je soutiens :
Concours de codage 2020 - Votes pour l'épreuve 2 D4xs
Bannière réalisée gracieusement par Epic ♥️
Revenir en haut Aller en bas

Jana Gana Mana
_____________________

Tite-May
Jana Gana Mana

Date d'arrivée sur PRD : 19/07/2016
Messages postés : 340
Prénom : Mary
Ton âge : 27
Profession / études : suis ingénireur en informatique (c'est globale ça... ^^)

Voir le profil de l'utilisateur http://tambouille-raleuses.forumactif.com/
Concours de codage 2020 - Votes pour l'épreuve 2 Empty
Message(#) Sujet: Re: Concours de codage 2020 - Votes pour l'épreuve 2 Concours de codage 2020 - Votes pour l'épreuve 2 EmptyMar 7 Avr - 14:07

J'ai voté =)
Revenir en haut Aller en bas

Modo Projectrice • Analyste
_____________________

Agnïeszka
Modo Projectrice • Analyste

Date d'arrivée sur PRD : 30/04/2018
Messages postés : 3111
Prénom : Agnïeszka
Ton âge : 25

Voir le profil de l'utilisateur
En ligne
Concours de codage 2020 - Votes pour l'épreuve 2 Empty
Message(#) Sujet: Re: Concours de codage 2020 - Votes pour l'épreuve 2 Concours de codage 2020 - Votes pour l'épreuve 2 EmptyMar 7 Avr - 14:24

A voté

_______________________________________________
N'hésitez pas à venir visiter mon projet freeze
Bannieresoutien
Revenir en haut Aller en bas

Modératrice • Créatrice • Stagiaire
_____________________

Zuz'
Modératrice • Créatrice • Stagiaire

Date d'arrivée sur PRD : 16/09/2012
Messages postés : 15573
Prénom : Léa
Ton âge : 25
Profession / études : suis en Doctorat de Chimie des Matériaux
Les logiciel(s) utilisés : Photoshop CC


Mon CV PRDien
Dédicaces:
My role player game characters:

Voir le profil de l'utilisateur http://dracarysgot.forumactif.org/
Concours de codage 2020 - Votes pour l'épreuve 2 Empty
Message(#) Sujet: Re: Concours de codage 2020 - Votes pour l'épreuve 2 Concours de codage 2020 - Votes pour l'épreuve 2 EmptyMar 7 Avr - 17:45

J'ai eu un coup de coeur pour l'une des participations*-*
A voté I love you

_______________________________________________


Concours de codage 2020 - Votes pour l'épreuve 2 QORPv9XJ_o
merci du fond du coeur Concours de codage 2020 - Votes pour l'épreuve 2 436552

Revenir en haut Aller en bas

Contenu sponsorisé
_____________________


Concours de codage 2020 - Votes pour l'épreuve 2 Empty
Message(#) Sujet: Re: Concours de codage 2020 - Votes pour l'épreuve 2 Concours de codage 2020 - Votes pour l'épreuve 2 Empty

Revenir en haut Aller en bas
 
Concours de codage 2020 - Votes pour l'épreuve 2
Revenir en haut 
Page 1 sur 2Aller à la page : 1, 2  Suivant

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
» PUB RPG DESIGN « :: Coin Divertissement :: Animations & Concours :: Concours-
Sauter vers: