Revenir en haut Aller en bas
Epicode
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment :
Fnac : 15% de réduction sur toutes les TV de ...
Voir le deal

Aller en bas
Artemis
Artemis
Admin & serial codeuse
  • Date d'inscription : 14/01/2017
  • Messages : 3074
Votes
Des fiches de qualité !
C'est l'heure de voter !


Bonsoir à tous !
Il est enfin temps de révéler les participations de nos codeurs en herbe ! Un tonnerre d'applaudissement pour nos trois participants s'il vous plaît  dance
Il est donc temps pour vous de voter selon le barème énoncé ci-après. Il vous faudra noter chaque création (mais promis, ça ne prend pas longtemps !), et pour un petit rappel des consignes, c'est par là que ça se passe !

Code:
[b]Esthétique du rendu : /5[/b]
[b]Originalité : /5[/b]
[b](facultatif) Propreté du code : /5[/b]  [i]commentaire pour ceux qui s'y connaissent le plus ![/i]
[b](facultatif) Un petit commentaire :[/b]

Ceci étant dit, passons maintenant aux superbes codes  Miam

Participation 1:

Lien pour voir le code

HTML :
Code:
<div class="halloween_epicode"><!--
--><div class="top"><!--
--><div class="left_bloc"><!--
--><h1>Alienor de Canterville</h1><!--
--><p><b>Métier :</b> Fantome, chevalier & féministe
  
<b>Hobby :</b> Effrayer les ploucs, lire l'art de la séduction (édition 1791) & tailler en pièces ses prétendants
  
<b>Aime :</b> Les pluies d'intestins, peindre les murs, piffer les gens, sauter d'une falaise & le schlag
  
<b>Déteste :</b> Se faire invoquer, les rimes à deux balles, les bébés chats & la possession</p>
</div><!--
--><div class="right_bloc"><!--
--><h2>Il n'est pas encore né l'homme qui me fera ployer </h2><!--
--><h3>Je pensais à une soirée toute simple : vous vider de votre sang, vous arracher le pancréas, une soupe & au dodo</h3><!--
--><div class="history"><!--
--><p>Aliénor de Canterville, femme chevalier, rebelle, féministe et… damnée depuis un peu plus de 252 ans. Habituée à provoquer ses prétendants en duels, jamais elle n'aurait pensée finir maudite à cause de cela. Pour la petite histoire, tout découle de son ultime duel avec un poète qui la courtisait. Sans vraiment le chercher elle le tua et ses derniers mots scellèrent le destin de notre insoumise. Rongée par son acte elle commit l'irréparable, sans se douter que ça ne suffirait pas à la libérer de son fardeau.
Depuis, elle doit subir sa damnation, ce qui fait que chaque soir avant minuit elle doit revivre les circonstances de sa mort. Un seul oubli et elle deviendra un spectre de 302 ans. Sa seule compagnie est son obligé Gwilherm. Ce qui explique sans doute qu'elle vire à tour de bras tout intrus. Bah oui on a tous ce pote qu'on ne veut présenter à personne parce qu'il va nous foutre le seum.
Sa routine était bien ficelée jusqu'à l'arrivée de cette famille. Attendez, des parisiens en Bretagne qu'elle est cette diablerie ?! Et non contents de squatter, voilà qu'ils refusent de plier bagage.
    Donc si elle ne réussit pas à les envoyer paitre il va falloir qu'elle arrive à pleurer... Et même penser à un bébé chat ça n'a pas marché. Roh la galère. </p><!--
--><div class="img_alienor"></div></div><!--
--></div><!--
--></div><!--
--><div class="bot"><!--
--><h4>Maudit poète</h4><!--
--><div class="img_bot"></div><!--
-->Froide comme la mort, demeurez ainsi à jamais. Que mes derniers vers vous accompagnent désormais.
Canterville jamais ne lâcha larme. D'un seul sanglot, la damnation se désarme. A la parole donnée votre âme s'enchaine. Redoutez que le traitre ne la ramène.</div><!--
--><div class=""></div><!--
--></div><!--

CSS :
Code:
@import url('https://fonts.googleapis.com/css2?family=Griffy&family=Raleway:wght@100&display=swap');

::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-thumb {
background-color: #ad54cf;
}
::-webkit-scrollbar-track {
background-color: transparent;
}

.halloween_epicode{
  width:650px;
  height:900px;
  margin: auto;
  background: linear-gradient(to left, #56416c, #000);
  padding: 5px 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
  color: #f1f1f1;
  font-family: 'Raleway', sans-serif;
  text-align: justify;
}

.top{
  height:545px;
  display:flex;
  margin-bottom: 14px;
}

.left_bloc{
  width:190px;
  border-right: 1px solid #ad54cf;
  padding:0 10px;
 }

.left_bloc p{
  height:76%;
  overflow:auto;
  padding: 0 5px;
  margin: -5px 0 0;  
  white-space:pre-wrap;
  text-align:left;
}

.left_bloc b {
  font: 18px 'Griffy', cursive;
  color:#ad8bba;
  font-weight: bold;
}

h1{
  color:#ad8bba;
  font: 40px 'Griffy', cursive;
  text-align: center;
  text-shadow: 0 0 7px #535353, 0 0 10px #535353, 0 0 21px #535353, 0 0 42px #ad54cf, 0 0 82px #ad54cf, 0 0 92px #ad54cf, 0 0 102px #ad54cf, 0 0 121px #ad54cf;
   animation: pulsate 1s infinite alternate;  
}

@keyframes pulsate {
    
  100% {
   text-shadow: 0 0 4px #535353, 0 0 11px #535353, 0 0 19px #535353, 0 0 40px #ad54cf, 0 0 80px #ad54cf, 0 0 90px #ad54cf, 0 0 100px #ad54cf, 0 0 120px #ad54cf;
    }
  
  0% {
   text-shadow: 0 0 2px #535353, 0 0 4px #535353, 0 0 6px #535353, 0 0 10px #ad54cf, 0 0 45px #ad54cf, 0 0 55px #ad54cf, 0 0 70px #ad54cf, 0 0 80px #ad54cf;
}
}

.right_bloc{
  width: 410px;
  padding:0 10px;
}

h2{
  font-size: 20px;
  color:#ad8bba;
  text-transform:uppercase;
}

h3{
  font-size:13px;
  font-weight: lighter;
  font-style: italic;
  color: #f2d8cf;
}

.history{
  overflow:auto;
  display:flex;
}

.history p{
  width:195px;
  height:400px;
  overflow:auto;
  padding:0 5px 0 0;display: inline-block;
}

.img_alienor{
  background: url(https://zupimages.net/up/21/45/l9t9.gif);
  width: 200px;
  height: 400px;
  outline-offset: 2px ;
  outline: 1px solid #ad54cf;
  margin: 18px 0 10px 7px ;
}

.bot{
  margin:auto;
  width:550px;
  height:200px;
  border-top: 1px solid #ad54cf;
  font-style:italic;
}

h4{
  text-transform:uppercase;
  text-align:center;
  color:#ad8bba;
  font: 20px 'Griffy', cursive;
  margin: 15px auto;
}

.img_bot{  background:url(https://zupimages.net/up/21/45/d17f.gif);
  width:450px;
  height:175px;
  background-position:50%;
  background-size:cover;
  margin:-10px auto 15px;
 }

Participation 2:

Lien pour voir le code

Code:
<!DOCTYPE html>
        <html lang="fr">
        <head>
          <title>Concours Codage 12 - Epicode</title>
          <meta charset="utf-8" />
          <base target="_parent" />
          <script src="https://kit.fontawesome.com/3bbe331f61.js" crossorigin="anonymous"></script>

          <style>

            @import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');
            body {
  --blue: #313372;
  --bluergb: rgb(49, 51, 114);
  --green: #2a3c3e;
  --greenrgb: rgb(42, 60, 62);
  --yellow: #b38e44;
  --yellowrgb: rgb(179, 142, 68);
  --grey: #c2d0d4;
  --greyrgb: rgb(194, 208, 212);
  --ttl: "UnifrakturMaguntia", cursive;
  margin: 0;
  font-family: "EB Garamond", serif;
  color: black;
}
            
* {
  scrollbar-color: transparent rgba(0, 0, 0, 0.3); /*track thumb*/
  scrollbar-width: 5px;
}

.wwf {
  position: relative;
  background: #f0f0f0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/*LABEL-------------------------*/
input#wwfcheck {
  display: none;
}

#wwfcheck + label {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grey);
  font-size: 25px;
  cursor: pointer;
  transition: top 0s ease 0.5s, right 0s ease 0.5s, width 0s ease 0.5s,
    height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease 0s;
  opacity: 0;
  z-index: 10;
}

#wwfcheck:checked + label {
  position: absolute;
  top: 1vh;
  right: 1vh;
  transform: unset;
  width: 50px;
  height: 50px;
  opacity: 1;
  transition: opacity 0.5s;
  transition-delay: 0.3s;
}

/*MINI-------------------------------*/

.wwfmini {
  position: absolute;
  border-radius: 100%;
  width: 200px;
  height: 200px;
  background: var(--blue);
  z-index: 1;
  overflow: hidden;
}

@keyframes miniclick {
  0% {
    transform: scale(100%, 100%);
  }
  100% {
    transform: scale(1500%, 1500%);
  }
}

@keyframes miniclick2 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#wwfcheck:checked ~ .wwfmini {
  animation: miniclick 1s cubic-bezier(0.23, -0.19, 0.71, 1) 1 forwards;
}

#wwfcheck:checked ~ .wwfmini > div {
  animation: miniclick2 0.3s ease 1 forwards;
}

.miniloup {
  position: absolute;
  left: -5%;
  top: 0;
}

.wwfhills {
  position: absolute;
  bottom: -25%;
  left: -10%;
  width: 100%;
  height: 50%;
  background: var(--green);
  border-radius: 100% 80%;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.wwfmoon {
  position: absolute;
  top: 0;
  right: 20%;
  background: var(--grey);
  width: 30%;
  height: 30%;
  border-radius: 100%;
  overflow: hidden;
}

.wwfmoon span {
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 100%;
}
.wwfmoon span:nth-child(1) {
  top: 80%;
  left: 50%;
  width: 30%;
  height: 30%;
}

.wwfmoon span:nth-child(2) {
  top: 20%;
  left: 45%;
  width: 20%;
  height: 20%;
}

.wwfmoon span:nth-child(3) {
  top: 50%;
  left: 60%;
  width: 10%;
  height: 10%;
}

.wwfmoon span:nth-child(4) {
  top: 45%;
  left: 10%;
  width: 15%;
  height: 15%;
}

/*MAXI---------------------------*/
.wwfmaxi {
  position: relative;
  border-radius: 200px;
  width: 200px;
  height: 200px;
  overflow: hidden;
  transition: 0.3s ease 0.3s, opacity 0.3s ease 0s;
  z-index: 2;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#wwfcheck:checked ~ .wwfmaxi {
  top: 0;
  left: 0;
  transform: unset;
  background: var(--blue);
  width: 90vw;
  height: 90vh;
  padding: 10vh 10vw 0 10vw;
  border-radius: 0;
  transition: 1s ease 0.6s, opacity 0.8s ease 0.7s;
  opacity: 1;
}

/*structure interne------------------------------------*/
.wwfmaxi > span {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wwfmaxi > span + span {
  width: 100vw;
  background-image: linear-gradient(0deg, var(--yellow) 25%, transparent 50%),
    linear-gradient(180deg, var(--yellow) 2%, transparent 2%),
    conic-gradient(from 90deg, var(--yellow) 25%, var(--blue) 50%);
  background-size: 100%, 100%, 5vw 200%;
  background-position: 0 0, 0 -100%, 0 -100%;
  padding-bottom: 10vh;
  flex-grow: 1;
}

h1 {
  font-family: "UnifrakturMaguntia", cursive;
  color: var(--yellow);
  text-shadow: 2px 2px var(--blue), 0 0 5px var(--yellow);
  font-size: 80px;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-2deg);
  margin: 0 0 -4vw;
  z-index: 2;
}

h1 + p {
  display: block;
  width: 50vw;
  max-width: 500px;
  min-height: 90px;
  max-height: 15vh;
  margin: 0;
  background: rgba(0, 0, 0, 0.2);
  border: solid transparent;
  border-width: 4vw 20px 40px 20px;
  padding: 10px 10px 0 10px;
  border-radius: 2vw;
  text-indent: 4vw;
  text-align: justify;
  color: #fff;
  overflow: auto;
  scrollbar-color: transparent rgba(0, 0, 0, 0.3); /*track thumb*/
  scrollbar-width: 5px;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.wwf-wolf {
  margin: -30px 0 -120px;
  z-index: 2;
}

.wwf-wolf svg {
  width: 400px;
}

dl {
  display: grid;
  grid: 4vh 20vh / 1fr 1fr 1fr 1fr;
  gap: 15px 4vw;
  padding: 120px 1vw 0 1vw;
  width: 90vw;
  justify-items: stretch;
}

dl > * {
  margin: 0;
}

dl > *:nth-child(1) {
  grid-area: 1/1/2/2;
}

dl > *:nth-child(2) {
  grid-area: 2/1/3/2;
}

dl > *:nth-child(3) {
  grid-area: 1/2/2/3;
}

dl > *:nth-child(4) {
  grid-area: 2/2/3/3;
}

dl > *:nth-child(5) {
  grid-area: 1/3/2/4;
}

dl > *:nth-child(6) {
  grid-area: 2/3/3/4;
}

dl > *:nth-child(7) {
  grid-area: 1/4/2/5;
}

dl > *:nth-child(8) {
  grid-area: 2/4/3/5;
}

dt {
  width: 100%;
  text-align: center;
  font-family: var(--ttl);
  font-size: 30px;
  color: var(--blue);
  text-shadow: 2px 2px var(--yellow);
  border-bottom: 3px double var(--blue);
}

dd {
  text-align: justify;
  overflow: auto;
  width: calc(100% - 30px);
  height: 100%;
  padding: 0 15px;
}

/*Loup SVG---------------------*/

tspan {
  white-space: pre;
}
.shp0 {
  fill: #000000;
}

/*écran + petit que 880px*/
@media (max-width: 880px) {
  .wwfmaxi > span + span {
    overflow: auto;
    border-bottom: 5vh solid var(--yellow);
    border-top: 10px solid transparent;
    padding-bottom: 0;
    background-image: linear-gradient(0deg, var(--yellow) 25%, transparent 50%),
      linear-gradient(180deg, transparent 2%, transparent 2%),
      conic-gradient(from 90deg, var(--yellow) 25%, var(--blue) 50%);
  }

  dl {
    display: flex;
    flex-direction: column;
    padding: 0px 1vw 0 1vw;
    margin: 50px 0 0;
  }

  dd {
    overflow: unset;
  }

  h1 {
    font-size: 50px;
    white-space: unset;
  }

  .wwf-wolf {
    margin: -25px 0 -10vw;
  }

  .wwf-wolf svg {
    width: 40vw !important;
  }
}

          </style>
        </head>
 
          <body><div class="wwf">
  <input type="checkbox" name="wwf" id="wwfcheck">
  <label for="wwfcheck"><i class="fas fa-times"></i></label>

  <div class="wwfmini">
    <div class="wwfhills">
      <span></span>
      <span></span>
    </div>
    <div class="wwfmoon">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="miniloup">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny-ps" viewBox="0 0 288 297" width="120px" height="297">
        <path id="Fond 1" fill-rule="evenodd" class="shp0" d="M273 0C279.63 4.93 280.52 11.77 280 24C282 22.67 284 21.33 286 20C286.67 20.33 287.33 20.67 288 21C287.6 25.64 284.24 35.82 281.76 41.05C279.28 46.28 281.21 58.47 280.38 62.6C279.55 66.73 273.98 80.71 275 86C278.67 93.67 282.33 101.33 286 109C284.33 108.33 282.67 107.67 281 107C283.33 110.67 285.67 114.33 288 118C285.67 116.67 283.33 115.33 281 114C282.67 118 284.33 122 286 126C284.33 125.33 282.67 124.67 281 124C281 125 281 126 281 127C282.33 130.33 283.67 133.67 285 137C284.67 137 284.33 137 284 137C282.67 136.33 281.33 135.67 280 135C280.67 138.33 281.33 141.67 282 145C281.67 145 281.33 145 281 145C279.33 144 277.67 143 276 142C276.33 146.67 276.67 151.33 277 156C276 155 275 154 274 153C274.33 157 274.67 161 275 165C273.33 163.33 271.67 161.67 270 160C270.33 164 270.67 168 271 172C270.67 172 270.33 172 270 172C268.67 171.33 267.33 170.67 266 170C265.23 178.58 263.47 173.85 262 178C262 181.67 262 185.33 262 189C260 188 258 187 256 186C255.86 190.94 249 237 249 237C245.33 239 241.67 241 238 243C237.67 242 237.33 241 237 240C231.37 227.87 235.34 209.25 226 201C225.67 201 225.33 201 225 201C225 203 225 205 225 207C223.33 205.67 221.67 204.33 220 203C219 204.67 218 206.33 217 208C217.67 222.67 218.33 237.33 219 252C215 254.33 211 256.67 207 259C200.98 245.49 203.18 225 202 204C198.67 204.67 195.33 205.33 192 206C192.33 204.67 192.67 203.33 193 202C189.67 202.33 186.33 202.67 183 203C183 202.67 183 202.33 183 202C184.52 199.27 185.71 198.61 185 196C182.33 197.67 179.67 199.33 177 201C177.33 199.67 177.67 198.33 178 197C161.24 200.85 165.87 216.5 159 230C143.54 260.35 124.41 236.48 132 290C128.33 291.33 124.67 292.67 121 294C120.33 293.67 119.67 293.33 119 293C119.05 277.03 114.41 266.53 113 253C119.82 247.46 125.74 239.01 127 228C114 236.67 101 245.33 88 254C81.19 263.69 80.16 294.92 67 297C63.08 295.9 61.09 296.14 59 293C58.67 292.67 58.33 292.33 58 292C58.33 291 58.67 290 59 289C62.67 280.67 66.33 272.33 70 264C70.67 256.33 71.33 248.67 72 241C80.49 226.68 95.78 222.89 100 202C99.67 202 99.33 202 99 202C89.96 208.74 82.14 212.96 70 217C70 215.67 70 214.33 70 213C54.67 222.38 11.31 214.95 0 191C0.33 191 0.67 191 1 191C18.76 199.75 57.96 196.87 71 182C70 182 69 182 68 182C70.61 177.64 114.78 146.4 120 145C127.67 144.67 135.33 144.33 143 144C155.9 139.05 159.6 126.84 171 121C181.23 115.76 202.62 115.17 199 99C205.8 98.81 208.6 97.21 213 95C212 93.67 211 92.33 210 91C216.64 88.79 221.29 84.12 225 79C225 78.67 225 78.33 225 78C223 78 221 78 219 78C222.09 70.7 228.54 65.15 233.02 58.44C237.27 52.07 239.7 45.48 245.48 36.95C251.27 28.41 253.16 32.14 255.09 27.73C257.02 21.12 268.24 11.36 273 0Z" />
      </svg>
    </div>
  </div>

  <div class="wwfmaxi">
    <span>
      <h1>La bête du Gévaudan</h1>
      <p>intro Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis urna eget vulputate pharetra. Morbi elit nisl, <b>feugiat ut vestibulum ac</b>, finibus id massa. Phasellus luctus ac mauris et molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <i>Suspendisse molestie</i>, leo vel maximus vulputate, magna nisi faucibus odio, a blandit massa dolor sed dolor. Integer ac tempor dolor. Fusce sit amet condimentum turpis. Duis maximus vel dolor et mollis.</p>
      <div class="wwf-wolf">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny-ps" viewBox="0 0 1741 954" width="40vw">
          <path id="Loup" fill-rule="evenodd" class="shp0" d="M739 319C759.2 342.96 866.19 361.03 918 352C991.93 339.12 1058.01 325.6 1137 313C1183.79 305.54 1235 316.13 1275 323C1338.75 333.95 1395.29 315.72 1407 270C1420.21 218.42 1339.23 185.07 1284 194C1210.73 205.84 1139.65 224.4 1077 250C1047.99 261.85 1020.11 272.27 1020 313C989.69 308.63 989.48 273.35 1002 252C1002 251.67 1002 251.33 1002 251C964.86 253.21 924.71 269.22 881 260C796.15 242.1 742.97 203.88 718 126C712.65 109.3 710.5 81.17 716 62C725.26 29.7 749.76 9.59 784 2C831.61 -8.55 863.25 30.52 839 62C838 62.33 837 62.67 836 63C835 63 834 63 833 63C835.16 53.8 844.07 48.16 840 36C829.31 4.07 787.57 22.45 779 44C756.59 100.36 811.97 137.51 848 149C851.64 143.48 848.28 101.85 852 90C865.05 48.47 894.34 25.82 938 14C929.44 30.54 910.71 38.2 903 58C883.77 107.39 921.2 161.57 960 168C955.73 154.06 936.43 142.9 930 121C913.53 64.9 966.97 17.1 1015 17C1015 17.33 1015 17.67 1015 18C983.24 32.2 963.06 86.7 987 124C994.07 135.02 1005.17 142.63 1015 151C1016.33 150.67 1017.67 150.33 1019 150C1029.78 144.13 1026.15 123.51 1031 112C1041.12 87.98 1084.27 52.36 1121 77C1121 77.33 1121 77.67 1121 78C1105.57 86.49 1087.13 92.44 1082 111C1074.29 138.87 1106.85 158.29 1132 154C1161.04 149.04 1181.75 134.65 1195 114C1199.87 106.41 1200.3 91.75 1208 87C1238.13 75.34 1269.15 117.34 1274 139C1274.67 139.33 1275.33 139.67 1276 140C1276.33 140 1276.67 140 1277 140C1277.06 105.93 1259.56 99.33 1244 82C1244 81.67 1244 81.33 1244 81C1293.72 69.6 1338.28 90.38 1343 133C1343.67 133.33 1344.33 133.67 1345 134C1348.64 114.7 1337.74 103.58 1332 91C1328 87 1324 83 1320 79C1327.14 77.14 1337.2 79.85 1344 81C1386.77 88.2 1406.36 103.6 1406 152C1407 151.67 1408 151.33 1409 151C1415.01 126.99 1404.68 110.76 1398 95C1396.33 93.33 1394.67 91.67 1393 90C1393 89.67 1393 89.33 1393 89C1445.44 94.92 1468.05 124.56 1464 183C1464.67 183 1465.33 183 1466 183C1482.22 141.95 1467.14 141.6 1459 110C1500.9 124.81 1514.45 147.55 1520 197C1544.11 208.12 1578.56 169.21 1584 152C1584.33 152 1584.67 152 1585 152C1585.33 152 1585.67 152 1586 152C1588 171 1590 190 1592 209C1583.49 240.08 1541.7 262.3 1509 270C1509 271 1509 272 1509 273C1541.53 272.68 1576.79 253.92 1587 231C1588 230.33 1589 229.67 1590 229C1603.47 299.55 1527.68 325.37 1462 324C1462 324.33 1462 324.67 1462 325C1490.22 350.26 1555.89 313.03 1571 303C1571.33 303 1571.67 303 1572 303C1568.68 318.16 1557.32 329.45 1549 340C1513.89 384.52 1473.84 368.35 1416 364C1416 364.33 1416 364.67 1416 365C1435.41 384.86 1477.71 378.37 1509 376C1498.44 389.12 1477.03 394.33 1459 400C1363.83 429.91 1319.09 377.42 1245 361C1206.68 352.5 1129.41 357.16 1129 394C1140.86 407.08 1157.23 405.08 1176 412C1197.69 420 1224.27 441.5 1229 466C1214.53 461.43 1203.9 455.31 1185 460C1184 461.33 1183 462.67 1182 464C1182.33 464.67 1182.67 465.33 1183 466C1200.66 462.96 1214.71 467.93 1230 470C1230.33 469.67 1230.67 469.33 1231 469C1239.22 423.61 1178.02 405.09 1144 395C1123.92 361.21 1194.22 372.84 1211 379C1240.43 389.81 1267.11 410.35 1284 434C1292.8 446.33 1305.99 474.26 1321 479C1331.38 482.28 1343.58 476.01 1350 474C1368.23 468.28 1384.87 463.01 1400 454C1416.41 444.22 1438.85 410.66 1470 427C1470.67 427 1471.33 427 1472 427C1463.34 437.66 1451.01 441.18 1449 459C1450 460.67 1451 462.33 1452 464C1470.56 461.37 1476.87 447.68 1501 454C1501.67 455 1502.33 456 1503 457C1497.22 460.81 1494.22 462.55 1491 469C1491.02 480.88 1494.2 488.25 1501 493C1516.67 503.94 1538.2 506.21 1553 517C1571.64 530.59 1585.35 550.72 1607 561C1627.47 559.31 1654.27 509.92 1674 551C1674.02 555.74 1673.88 557.65 1672 560C1668.74 565.47 1655.49 568.28 1649 570C1648 572.67 1647 575.33 1646 578C1663.6 587.04 1704.74 589.97 1696 621C1682.82 654.06 1660.53 616.2 1651 611C1649 610.67 1647 610.33 1645 610C1643 612 1641 614 1639 616C1636.29 635.84 1677.36 659.28 1655 675C1621.82 698.32 1616.66 640.51 1603 633C1582.42 626.46 1585.43 685.12 1551 667C1526.62 656.14 1551.87 624.49 1566 620C1566.33 618.33 1566.67 616.67 1567 615C1500.39 554.51 1430.39 543.25 1327 576C1301.2 584.17 1260.18 614.73 1236 615C1235.33 614.67 1234.67 614.33 1234 614C1227.64 602.94 1234.76 592.94 1232 577C1229 559.65 1222.68 547.61 1216 535C1215 534.67 1214 534.33 1213 534C1216.67 547 1220.33 560 1224 573C1223.67 585.33 1223.33 597.67 1223 610C1224.57 616.72 1229.92 620.66 1235 624C1287.98 623.4 1321.35 563.47 1388 584C1388 584.33 1388 584.67 1388 585C1381.55 589.91 1375.25 591.76 1371 599C1377.3 603.05 1397.25 594.24 1411 597C1422.02 599.21 1429.84 603.21 1439 606C1440 608 1441 610 1442 612C1433.33 615 1424.67 618 1416 621C1416 622.67 1416 624.33 1416 626C1434.46 632.93 1451.69 643.41 1456 664C1447.01 662.85 1437.43 657.16 1429 662C1425.39 663.69 1424.65 664.35 1423 668C1419.3 679.17 1431.71 687.93 1436 695C1450.16 718.3 1459.46 744.23 1471 770C1501.68 776.1 1503.63 730.64 1539 759C1540.62 764.63 1542.21 772.66 1539 778C1531.61 792.63 1507.41 789.52 1499 805C1499.09 835.12 1516 829.56 1534 841C1541.03 845.47 1544 852.39 1549 859C1545.3 908.56 1500.8 863.04 1483 862C1480.33 864.67 1477.67 867.33 1475 870C1477.05 886.75 1497.19 890.11 1492 910C1485.83 926.14 1458.29 929.97 1448 915C1443.11 907.89 1444.72 895.07 1443 886C1438.86 882.93 1433.3 877.83 1426 881C1419.49 885.47 1420.57 898.11 1411 905C1406.33 905 1401.67 905 1397 905C1339.79 883.21 1427.38 832.87 1423 814C1418 807 1413 800 1408 793C1388.14 763.35 1371.42 725.84 1336 712C1314.65 703.66 1287.57 703.9 1274 718C1272.41 726.74 1275.31 731.56 1277 739C1276.67 739.67 1276.33 740.33 1276 741C1263.47 744.48 1252.4 743.96 1239 742C1233.87 753.52 1243.42 761.8 1245 773C1225.37 771.49 1212.97 764.01 1197 762C1192.95 769.31 1193.42 776.29 1194 787C1193.67 787.33 1193.33 787.67 1193 788C1176.32 785.7 1161.6 775.98 1148 770C1083.76 741.78 1030.09 700.3 995 643C967.02 597.32 975.64 561.04 923 536C922.67 536 922.33 536 922 536C925.1 543.06 932.36 545.51 938 550C952.05 561.19 964.3 579.76 968 601C967.67 601.33 967.33 601.67 967 602C961.55 606.28 942.99 603.94 936 609C928.67 617.33 921.33 625.67 914 634C875.84 663.8 821.43 684.41 763 693C762.67 693.67 762.33 694.33 762 695C762.39 702.37 764.64 705.68 770 708C770.67 709.67 771.33 711.33 772 713C731.78 720.73 700.55 703.9 682 686C681.67 686 681.33 686 681 686C680.33 686.67 679.67 687.33 679 688C680.26 700.43 685.25 711.87 693 718C693.33 719 693.67 720 694 721C643.91 720.67 590.13 697.61 574 663C572.67 662 571.33 661 570 660C562 667.36 556.05 674.53 554 688C545.63 689.57 538.12 683.6 532 680C505.98 664.7 489.01 646.51 490 604C481.72 611.89 484.35 628.52 485 643C463.56 650.63 428.13 640.09 411 634C407.97 638.25 410.78 643.33 414 647C414 647.33 414 647.67 414 648C395.55 652.06 372.38 638.87 357 634C314.67 619.67 272.33 605.33 230 591C211.58 585 172.88 568.42 159 587C157.8 594.98 161.63 604.29 158 611C155.63 616.06 152.03 617.73 147 620C131.79 619.73 129.53 611.82 124 602C125.54 588.01 131.5 582.43 136 572C135 568.67 134 565.33 133 562C122.05 560.58 98.17 558.82 89 565C79.31 571.53 79.11 581.82 63 583C56.29 580.22 53.46 577.7 49 573C39.43 528.52 79.03 551.28 92 527C89.38 490.15 20.15 515.93 33 481C35.58 473.98 41.42 471.45 49 469C80.69 458.76 81.43 488.82 99 497C104 497 109 497 114 497C116.33 495 118.67 493 121 491C124.11 474.38 112.79 469.02 107 458C107.47 451.07 109.11 449.79 111 445C127.29 435.76 151.44 449.78 155 465C153.67 471.67 152.33 478.33 151 485C149.61 498.27 163.04 510.37 172 514C191.26 521.8 216.35 517.43 240 521C348.8 537.4 440.88 486.27 469 417C469 415.33 469 413.67 469 412C446.32 436.21 433.57 487.22 388 484C388 483.67 388 483.33 388 483C395.6 470.41 405.3 462.11 407 443C407 442.67 407 442.33 407 442C406.33 441.67 405.67 441.33 405 441C396.68 448.25 388.28 452.36 376 456C371 456 366 456 361 456C364.96 441.58 378.33 428.22 385 413C385 411.33 385 409.67 385 408C368.41 411.35 363.6 425.03 341 425C348.79 411.83 356.4 398.86 356 377C355.67 376.67 355.33 376.33 355 376C344.05 379.78 337.67 390.9 325 396C322.67 396 320.33 396 318 396C332.4 345.04 317.02 320.86 261 345C243.35 352.61 236.42 368.53 220 377C202.77 376.97 184.36 361.94 184 345C187.89 341.58 190.2 338.81 196 337C197.61 333.73 198.18 329.76 198 324C198.67 323.67 199.33 323.33 200 323C202.67 325.67 205.33 328.33 208 331C209.33 330.67 210.67 330.33 212 330C216 327.08 214.69 319.92 215 314C215.33 314 215.67 314 216 314C218.75 320 224.22 324.03 230 327C232.56 322.68 231.92 316.43 232 311C235.33 314.33 238.67 317.67 242 321C243.33 320.67 244.67 320.33 246 320C248.89 318.41 249.28 317.58 251 315C251 313 251 311 251 309C203.11 277.32 175.53 354.65 149 367C118.03 381.42 99.77 356.53 110 330C112.33 328 114.67 326 117 324C115.33 340.02 119.27 346.76 131 352C160.57 351.61 164.96 327.72 178 311C187.18 299.23 204.23 288.81 220 284C260.94 271.53 289.52 306.93 322 289C338.26 248.24 278.11 237.68 274 274C273.67 274 273.33 274 273 274C270.13 272.02 262 256 262 256C256.52 254.1 254.85 267.63 254 271C253 271 252 271 251 271C249 267 247 263 245 259C244 259 243 259 242 259C239.84 263.09 238.61 269.11 238 275C232.59 271.71 229.82 266.83 228 260C226 260.33 224 260.67 222 261C220.67 266.33 219.33 271.67 218 277C217.33 277.33 216.67 277.67 216 278C213.67 272.67 211.33 267.33 209 262C208 261.67 207 261.33 206 261C202.47 265.19 201.22 272.41 200 279C193.35 276.78 191.21 269.38 188 264C187.33 264 186.67 264 186 264C180.85 268.02 178.5 274.36 178 283C171.67 280.34 170.17 271.56 168 265C162 264.33 156 263.67 150 263C142.57 251.73 130.38 239.1 130 222C153.65 198.36 210.81 205.86 245 193C254.92 189.27 257.15 174.05 273 169C303 162 333 155 363 148C372.85 141.02 398.23 63.29 403 47C404 46.33 405 45.67 406 45C417.67 72.33 429.33 99.67 441 127C459.13 136.61 562.96 122.09 594 122C590.94 131.69 576.72 143.36 569 149C569.33 150 569.67 151 570 152C581.65 163.78 642.33 155.96 661 155C663.94 172.48 635.34 194.33 621 199C619.67 200.67 618.33 202.33 617 204C637.42 218.96 688.15 205.2 711 204C706.93 223.82 687.38 243.47 667 247C666.67 248 666.33 249 666 250C683.01 267.67 725.43 251.22 749 258C749.67 258 750.33 258 751 258C743.94 280.41 722.63 289.95 699 296C698.67 297 698.33 298 698 299C706.69 308.41 728.63 305.53 745 305C744.06 312.73 741.27 313.1 739 319ZM317 151C316.67 150.67 316.33 150.33 316 150C319.23 130.92 329.94 65.43 340 54C352.39 92.48 402.34 150.91 317 151ZM448 155C448 157.67 448 160.33 448 163C450.57 165.66 460.78 166.36 464 165C464.67 165 465.33 165 466 165C463.65 158.51 458.16 158.4 453 155C451.33 155 449.67 155 448 155ZM261 184C258.02 188.17 255.73 190.21 255 197C259.34 205.47 262.56 203.52 272 207C278.06 211.41 279.86 220.54 287 224C305.56 233.01 315.42 211.66 313 197C320.05 192.89 331.28 191.63 342 191C342.33 190.33 342.67 189.67 343 189C314.17 185.58 280.77 202.14 267 199C265.33 198 263.67 197 262 196C262.71 189.25 265.25 187.71 265 183C263.67 183.33 262.33 183.67 261 184ZM439 185C437.67 188.33 436.33 191.67 435 195C435 196 435 197 435 198C449.78 198.18 456.02 202.68 467 205C464.38 193.07 454.48 190.91 446 185C443.67 185 441.33 185 439 185ZM529 189C533.88 194.92 543.24 199.14 552 201C555.26 212.06 519.6 225.09 503 225C503 225.33 503 225.67 503 226C521.99 242.06 560.17 205.97 569 199C569 197.67 569 196.33 569 195C556.22 195.04 542.6 193.87 534 189C532.33 189 530.67 189 529 189ZM291 212C291 212.67 291 213.33 291 214C289 214.67 287 215.33 285 216C283.67 212.33 282.33 208.67 281 205C282.33 204 283.67 203 285 202C287 201.67 289 201.33 291 201C291 204.67 291 208.33 291 212ZM436 242C436 246 436 250 436 254C427.52 254.98 420.78 255.09 413 257C412.33 258 411.67 259 411 260C422.17 263.07 431.4 265.09 440 268C455.41 252.7 432.5 223.09 426 215C423.72 216.82 433.37 236.5 436 242ZM158 222C154.21 225.58 151.53 227.96 149 233C149 234.33 149 235.67 149 237C156.85 235.33 166.54 229.83 163 222C161.33 222 159.67 222 158 222ZM617 281C602.34 293.04 579.67 294.74 552 294C574.06 317.36 618.61 287.11 634 280C634.33 279.33 634.67 278.67 635 278C624.84 268.64 604.06 266.84 593 259C591.46 267.18 611.35 275.53 617 281ZM418 313C417.67 314 417.33 315 417 316C407.67 313.67 398.33 311.33 389 309C389 309.33 389 309.67 389 310C396.97 318.09 409.11 327.31 418 334C438.56 317.53 423.75 281.57 413 268C411.16 278.83 425.62 296.27 418 313ZM481 302C483.67 304.67 486.33 307.33 489 310C483.44 313.19 470.7 312.3 462 312C466.92 322.65 490.77 320.2 503 318C503.33 316.67 503.67 315.33 504 314C493.94 300.87 482.82 289.14 473 275C467.6 280.82 478.73 296.09 481 302ZM372 351C371.33 351.33 370.67 351.67 370 352C360.67 349.28 355.86 343.73 344 343C350.23 351.06 361.49 359 369 366C370.33 366 371.67 366 373 366C382.87 357.09 390.6 332.78 383 316C377.97 320.59 374.12 345.03 372 351ZM648 331C649.75 339.66 654.12 342.99 657 350C661 354 665 358 669 362C656.91 369 633.51 365.45 617 365C617 365.33 617 365.67 617 366C635.4 370.27 670.58 377.76 688 366C677.35 353.6 661.74 342.6 650 331C649.33 331 648.67 331 648 331ZM1041 356C1040.33 359.16 1040.41 360.15 1042 363C1042 363.67 1042 364.33 1042 365C1043 365 1044 365 1045 365C1050.39 362.21 1055.14 359.44 1057 353C1051.67 354 1046.33 355 1041 356ZM533 355C532.33 357.33 531.67 359.67 531 362C535.33 364.67 539.67 367.33 544 370C545 370 546 370 547 370C545.34 362.92 541.24 358.48 537 354C535.67 354.33 534.33 354.67 533 355ZM440 360C441.89 365.36 451.11 375.49 456 378C456.33 378 456.67 378 457 378C459.22 368.93 453.6 359.54 449 354C446 356 443 358 440 360ZM737 373C745.93 374.67 753.71 372.37 762 371C762.33 370.33 762.67 369.67 763 369C756.63 365.46 749.16 365.29 744 361C739.87 363.31 737.72 367.33 737 373ZM958 375C957.67 378.33 957.33 381.67 957 385C958.33 385.33 959.67 385.67 961 386C967.14 383.09 974 380.13 977 374C978.96 371.4 977.98 373.06 978 370C971.33 371.67 964.67 373.33 958 375ZM873 373C872.67 376.33 872.33 379.67 872 383C872.33 383.33 872.67 383.67 873 384C884.65 383.33 893.71 379.13 899 372C898.67 371.67 898.33 371.33 898 371C889.67 371.67 881.33 372.33 873 373ZM801 392C800.33 393.67 799.67 395.33 799 397C799 398.33 799 399.67 799 401C799.33 401.33 799.67 401.67 800 402C808.94 401.27 816.95 398.72 821 393C815.67 392.33 810.33 391.67 805 391C803.67 391.33 802.33 391.67 801 392ZM594 400C594 400.67 594 401.33 594 402C597.38 406.43 603.06 412.27 609 414C608.87 403.67 606.07 399.88 602 394C597.57 395.57 597.16 397.47 594 400ZM1083 395C1082.32 398.41 1083.08 402.45 1085 406C1088.26 409.04 1100.14 407.75 1106 408C1106.33 407.67 1106.67 407.33 1107 407C1107 406 1107 405 1107 404C1100.96 399.88 1094.56 398.45 1087 395C1085.67 395 1084.33 395 1083 395ZM521 413C523.33 418 525.67 423 528 428C528.33 428 528.67 428 529 428C533.99 423.51 534.13 411.78 531 405C527.67 407.67 524.33 410.33 521 413ZM1013 425C1022.91 427.74 1034.06 421.64 1038 415C1030 414.67 1022 414.33 1014 414C1013.67 417.67 1013.33 421.33 1013 425ZM124 433C124 433.33 124 433.67 124 434C124 435 124 436 124 437C113.95 436.27 111.77 438.03 105 442C100.09 434.76 100.02 427.44 90 425C88.78 422.25 89.28 423.37 89 421C93 420.33 96.25 418.72 101 419C105.75 419.28 116.56 427.47 124 433ZM895 423C895 426.67 895 430.33 895 434C895 435 895 436 895 437C907.26 437.08 916.87 431 920 422C910.92 422.63 904.69 423.52 895 423ZM756 429C756 428.67 756 428.33 756 428C751.45 424.69 738.67 426.06 732 425C731.67 425 731.33 425 731 425C730.33 429 729.67 433 729 437C741.67 436.69 747.4 432.5 756 429ZM1126 435C1126.47 441.43 1126.04 443.5 1124 449C1131.33 452.33 1138.67 455.67 1146 459C1146.67 458.67 1147.33 458.33 1148 458C1145.24 446.73 1136.15 441.84 1130 434C1128.67 434.33 1127.33 434.67 1126 435ZM638 441C638 441.33 638 441.67 638 442C643.5 449.35 652.61 452.5 666 452C666.33 452.33 666.67 452.67 667 453C660.7 481.47 631.02 479.51 616 498C641.36 489.96 689.92 470.08 683 437C666.79 439.01 656.41 443.82 638 441ZM474 453C473.67 453.33 473.33 453.67 473 454C473.67 457.67 474.33 461.33 475 465C476.33 466 477.67 467 479 468C481.57 463.44 484.17 457.33 483 452C480 452.33 477 452.67 474 453ZM822 463C822 464 822 465 822 466C827.34 467.99 835.39 468.72 841 466C841.67 466 842.33 466 843 466C840.44 460.55 833.72 460.09 829 457C824.5 458.65 824.88 460.19 822 463ZM945 475C951 479.33 957 483.67 963 488C964.33 488 965.67 488 967 488C964.78 475.44 959.14 470.96 953 463C948.59 464.91 946.07 469.96 945 475ZM579 471C580.33 471 581.67 471 583 471C583 468.33 583 465.67 583 463C575.88 464.28 576.92 466.09 579 471ZM1018 475C1018 476 1018 477 1018 478C1021 482 1024 486 1027 490C1028 490 1029 490 1030 490C1031.46 481.77 1028.61 474.78 1025 469C1022.67 471 1020.33 473 1018 475ZM1192 470C1191.67 470.33 1191.33 470.67 1191 471C1208.97 486.68 1237.56 494.26 1242 523C1235.01 523.42 1222.84 521.9 1215 525C1215 525.33 1215 525.67 1215 526C1228 529 1241 532 1254 535C1254.33 534.67 1254.67 534.33 1255 534C1248.95 497.07 1222.71 487.52 1197 470C1195.33 470 1193.67 470 1192 470ZM1087 473C1085 475.67 1083 478.33 1081 481C1084.18 485.28 1091.28 490.48 1097 492C1096.25 482.97 1092.87 478.64 1089 473C1088.33 473 1087.67 473 1087 473ZM29 501C18.46 497.19 13.59 493.7 0 496C0.99 482.39 13.46 477.79 25 475C26.52 483.47 26.54 494.31 29 501ZM744 490C751.5 492.25 763.55 491.06 769 488C770 487.33 771 486.67 772 486C764.91 482.09 757.35 482.3 752 477C747.53 478.94 744.74 484.51 744 490ZM543 479C542 479.67 541 480.33 540 481C540.67 484.33 541.33 487.67 542 491C543 491.67 544 492.33 545 493C549.1 488.39 551.8 483.96 551 477C548.33 477.67 545.67 478.33 543 479ZM1437 492C1437 493 1437 494 1437 495C1445.33 495.67 1453.67 496.33 1462 497C1459.3 491.54 1454.99 490.99 1450 488C1443.03 487.84 1440.1 488.5 1437 492ZM502 493C501.33 493.67 500.67 494.33 500 495C500.29 501.05 500.67 516.1 506 518C510.24 509.99 514.73 503.06 515 491C510.67 491.67 506.33 492.33 502 493ZM1127 493C1128.1 500.74 1126.9 503.51 1124 509C1124.33 509.67 1124.67 510.33 1125 511C1138.19 514.56 1147.51 521.94 1159 525C1156.43 509.04 1141.19 501.69 1131 493C1129.67 493 1128.33 493 1127 493ZM894 501C893 502.33 892 503.67 891 505C894.66 509.64 899.46 511.17 908 511C908.33 510.67 908.67 510.33 909 510C909 509 909 508 909 507C905.67 504.33 902.33 501.67 899 499C897.33 499.67 895.67 500.33 894 501ZM607 503C613.22 514.03 628.8 520.21 644 522C644 522.33 644 522.67 644 523C629.55 544.74 587.33 555.1 552 555C551.67 555.67 551.33 556.33 551 557C600.1 563.88 643.86 550.36 658 516C648.64 508.6 623.1 510.97 612 503C610.33 503 608.67 503 607 503ZM845 514C845 515 845 516 845 517C849.33 519 853.67 521 858 523C859.67 523 861.33 523 863 523C863 522.67 863 522.33 863 522C859.67 517.67 856.33 513.33 853 509C850.33 510.67 847.67 512.33 845 514ZM450 511C450.5 525.66 448.46 536.43 447 549C447.67 549.33 448.33 549.67 449 550C457.71 543.79 472.38 524.92 469 511C460.87 513.65 458.42 513.02 450 511ZM793 524C792.67 525 792.33 526 792 527C798.39 535.42 807.46 539.56 823 539C823.33 538.33 823.67 537.67 824 537C817.33 531.33 810.67 525.67 804 520C800.33 521.33 796.67 522.67 793 524ZM403 521C402.33 527 401.67 533 401 539C401 542 401 545 401 548C402 548 403 548 404 548C410.42 543.36 419.52 530.95 417 521C412.33 521 407.67 521 403 521ZM1712 547C1712 547 1691.22 543.86 1681 547C1676.67 541.67 1672.33 536.33 1668 531C1668 530.67 1668 530.33 1668 530C1674.11 526.23 1680.11 524.61 1691 525C1702.25 531.06 1707.23 534.43 1712 547ZM735 533C735 533.33 735 533.67 735 534C740.27 546.26 752.22 557.45 769 558C769.33 557.33 769.67 556.67 770 556C762.9 546.83 756.41 539.55 751 528C745.36 530.75 744.59 533.11 735 533ZM992 540C991.67 541 991.33 542 991 543C997.06 550.79 1004.15 556.76 1008 567C1009 567.33 1010 567.67 1011 568C1013.89 553.56 1009.51 540.9 1004 532C998.78 535.23 999.83 538.68 992 540ZM360 533C359.33 535.67 358.67 538.33 358 541C358 542.67 358 544.33 358 546C359.33 546 360.67 546 362 546C363.67 543.33 365.33 540.67 367 538C366.45 533.98 366.36 534.27 365 532C363.33 532.33 361.67 532.67 360 533ZM672 539C672 540 672 541 672 542C679.32 552.84 688.66 559.06 702 564C703.67 564 705.33 564 707 564C707 563.67 707 563.33 707 563C699.59 553.65 690.11 549.13 686 536C681.33 537 676.67 538 672 539ZM1062 550C1061.67 551 1061.33 552 1061 553C1066.27 557.75 1070.35 562.52 1079 564C1076 557.33 1073 550.67 1070 544C1065.89 545.45 1064.08 546.59 1062 550ZM1126 551C1124.67 555.67 1123.33 560.33 1122 565C1131.67 571.67 1141.33 578.33 1151 585C1151.67 584.67 1152.33 584.33 1153 584C1149.79 566.47 1138.43 561.73 1129 551C1128 551 1127 551 1126 551ZM567 589C549.81 603.35 526.53 603.42 498 602C522.19 627.21 570.41 597.91 584 586C584 584.67 584 583.33 584 582C565.4 576.04 552.33 574.6 542 561C533.86 571.43 561.25 583.91 567 589ZM55 585C56 586.33 57 587.67 58 589C50.84 593.56 42.95 602.54 36 605C32.86 593.73 32.86 574.97 41 569C44.34 575.47 48.25 581.91 55 585ZM1112 611C1112 612 1112 613 1112 614C1119.67 619.67 1127.33 625.33 1135 631C1135.33 631 1135.67 631 1136 631C1137.6 618.89 1129.01 607.86 1122 601C1117.57 603.45 1115.88 607.91 1112 611ZM1741 617C1737.46 633.34 1718 639.41 1699 634C1701.67 627.33 1704.33 620.67 1707 614C1716.71 620.08 1728.2 618.05 1741 617ZM143 625C143.33 625.67 143.67 626.33 144 627C139.1 632.47 128.31 642.84 117 638C116.33 638 115.67 638 115 638C116.81 633.03 122.67 619.93 127 617C130.82 621.67 135.75 623.67 143 625ZM1043 649C1045.47 645.04 1039.58 631.28 1039 622C1033.72 622.67 1030.67 623.41 1027 621C1018.76 626.64 1036.81 646.45 1043 649ZM1362 635C1359.01 637.68 1357.55 637.48 1356 642C1368.83 641.85 1374.21 644.09 1382 648C1383 648 1384 648 1385 648C1381.12 640.31 1377.54 639.04 1370 635C1367.33 635 1364.67 635 1362 635ZM1099 651C1099 652 1099 653 1099 654C1103.67 658.33 1108.33 662.67 1113 667C1114.33 667 1115.67 667 1117 667C1115.97 657.64 1112.82 651.34 1109 645C1105.67 647 1102.33 649 1099 651ZM494 653C505.76 665.77 533.16 703.49 558 697C561.77 694.21 564.8 676.48 566 672C567.67 670.67 569.33 669.33 571 668C578.08 678.9 615.51 724.62 626 729C627 730.33 628 731.67 629 733C617.33 735.67 605.67 738.33 594 741C583 741 572 741 561 741C560.33 741 559.67 741 559 741C559.93 753.13 569.16 762.78 579 766C579.67 767 580.33 768 581 769C565.06 780.28 525.76 777.71 503 775C502.67 776 502.33 777 502 778C507.17 784.68 516.83 789.51 526 792C526.33 793 526.67 794 527 795C495.46 799.7 484.54 797.38 456 793C457.42 798.97 460 800.93 463 805C441.11 819.53 390.04 814 356 814C345.33 814.33 334.67 814.67 324 815C320.93 816.02 285.8 848.16 283 852C284.64 865.71 290.58 872.88 286 887C270.64 897.01 252.98 889.32 250 872C251.67 864 253.33 856 255 848C240.33 837.19 222.16 841.28 210 851C208.67 860.33 207.33 869.67 206 879C195.82 896.72 170.87 884.07 167 869C157.62 832.5 196.48 837.26 198 810C196.67 808.33 195.33 806.67 194 805C175.53 801.12 151.81 822.23 142 798C139.51 791.99 141.73 784.88 144 781C159.69 754.2 188.3 787.57 206 777C209.15 775.19 209.38 774.2 211 771C211 769 211 767 211 765C203.65 757.55 187.14 750.77 184 740C183.28 737.69 183.64 735.55 185 733C195.9 709.94 231.64 731.53 237 746C240.06 754.27 234.65 764.51 241 771C242 771.67 243 772.33 244 773C260.82 779.04 293.7 762.3 307 757C343.98 742.27 373.41 723.66 402 701C417.33 684 432.67 667 448 650C450.33 649.67 452.67 649.33 455 649C468 650.33 481 651.67 494 653ZM1569 676C1569 676.33 1569 676.67 1569 677C1564.18 688.69 1566.19 697.23 1571 708C1557.86 708.37 1546.67 690.71 1547 674C1548 674 1549 674 1550 674C1555.12 677.41 1561.83 676.41 1569 676ZM1672 705C1672.67 706 1673.33 707 1674 708C1653.95 713.48 1638.86 703.1 1633 688C1633 687.67 1633 687.33 1633 687C1640.67 685.67 1648.33 684.33 1656 683C1659.2 693.76 1661.71 701.41 1672 705ZM1079 695C1082.01 699.74 1085.01 703.2 1090 706C1094.06 700.68 1089.85 689.76 1087 685C1083.3 687.16 1081.19 691.5 1079 695ZM176 744C169.01 742.71 163.05 742.34 155 743C157.4 731.05 169.59 724.73 182 723C179.88 730.95 176.1 733.25 176 744ZM1577 781C1577.33 782 1577.67 783 1578 784C1568 782.33 1558 780.67 1548 779C1548.67 771.12 1549.36 768.16 1549 760C1550 760 1551 760 1552 760C1561.48 767.34 1568.94 772.51 1577 781ZM137 804C132 806 127 808 122 810C119.33 812.67 116.67 815.33 114 818C108.86 800.34 121.98 786.27 133 781C135.55 786.16 134 797.51 137 804ZM1585 886C1574.42 888.14 1559 887.03 1551 883C1550.33 883 1549.67 883 1549 883C1552 875.67 1555 868.33 1558 861C1567 869.33 1576 877.67 1585 886ZM183 894C182.29 904.48 182.1 911.59 183 922C174.52 917.95 150.58 893.62 164 880C168.9 886.7 174.82 890.47 183 894ZM280 899C278.47 911.24 265.37 920.7 253 922C255.55 913.57 258.29 908.41 258 896C259 896 260 896 261 896C265.06 899.29 272.05 899.4 280 899ZM1409 913C1409.33 913.67 1409.67 914.33 1410 915C1408.67 924 1407.33 933 1406 942C1400.01 938.38 1379.57 917.15 1389 907C1393.22 911.95 1399.29 913.43 1409 913ZM1479 931C1486.1 938.31 1488.49 947.86 1500 951C1500 951.33 1500 951.67 1500 952C1482.14 960.18 1446.16 937.84 1454 926C1459.78 930.6 1467.92 931.48 1479 931Z" />
        </svg>
      </div>
    </span>
    <span>
      <dl>
        <dt>La légende</dt>
        <dd>Etiam rutrum dolor quis erat cursus vestibulum. Donec mollis lobortis lacus, at commodo tellus mattis vestibulum. <b>In hac habitasse</b> platea dictumst. Suspendisse ipsum dolor, rhoncus pharetra dui sed, fringilla bibendum sapien. Donec eget purus sed lectus venenatis sagittis quis a libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc vestibulum, erat ac efficitur dictum, nunc dolor commodo ipsum, nec facilisis risus mauris id nisl. Nunc pulvinar ex quis ex pretium, ut aliquet mi rhoncus. Curabitur sit amet cursus erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec pulvinar, urna sed mattis elementum, leo nunc imperdiet ex, eu posuere erat nisl ac lacus. Praesent euismod, nulla et laoreet malesuada, tortor orci bibendum magna, quis malesuada sem dui eget elit. Etiam at dignissim augue.</dd>

        <dt>La Bête</dt>
        <dd>Ut placerat risus a nunc ultricies egestas. Nam ornare nibh sit amet lectus feugiat rutrum. Etiam pretium velit nisl, <i>in consequat magna lobortis</i> id. Vivamus id ullamcorper nibh. Sed sodales odio non ultricies ullamcorper. Maecenas aliquam tempor lorem sed ultricies. Praesent elementum nisi turpis, in pretium justo sagittis et. Nunc ullamcorper ultrices mauris nec tincidunt. Morbi iaculis malesuada sem, sit amet mollis massa. Phasellus pellentesque iaculis orci, vitae maximus ante pellentesque accumsan. Sed vehicula orci in lobortis aliquet. Nullam vitae nisl vel ante bibendum auctor id vitae sapien. Nunc bibendum justo vel turpis tempus viverra.</dd>

        <dt>La Meute</dt>
        <dd>Duis sed turpis sit amet purus volutpat lobortis sit amet ut est. Integer molestie nibh vel diam rhoncus, quis sodales odio rhoncus. Sed quis rutrum ex. Vivamus pretium sollicitudin leo, id bibendum lorem tincidunt a. Nulla quis ante purus. Sed accumsan mauris in nisi blandit tincidunt. Morbi iaculis dictum metus, eget volutpat metus gravida in. Vestibulum eleifend, odio eu cursus consectetur, leo enim aliquet ligula, eu vestibulum odio nunc eu nisi. Vivamus rutrum, nulla et faucibus sodales, metus arcu dignissim lorem, quis convallis erat nisl sit amet felis.</dd>

        <dt>Les Chasseurs</dt>
        <dd>Donec ac felis ipsum. <u>Nam metus justo, finibus a sapien nec</u>, ultrices semper purus. Nullam sed urna non mauris laoreet gravida eget ut augue. Donec sed nibh nisi. Donec lacinia ex sit amet mauris fermentum ultricies. Etiam eget magna eu dolor dignissim semper. Proin bibendum ultrices neque, sed rhoncus tellus fermentum a. Nunc feugiat urna eu ligula tincidunt, at rutrum risus auctor. Vestibulum placerat vulputate nibh non eleifend. Suspendisse id tristique magna. Donec vestibulum non mi sed egestas. Vivamus tempus rhoncus suscipit. Ut vehicula, urna a pulvinar euismod, turpis sem porttitor lacus, non facilisis augue tellus eget dui. Mauris ac elementum dolor. Sed sapien velit, semper in nisi ut, hendrerit malesuada diam. Phasellus eu odio lectus.</dd>
      </dl>
    </span>
  </div>

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

Participation 3:

Lien pour voir le code

Code:
<!DOCTYPE html>
<html>
  <head><link href="https://fonts.googleapis.com/css2?family=Aclonica&family=Roboto&display=swap" rel="stylesheet" />
        <meta charset="utf-8" />
        <title>Concours epicode</title>
<style type="text/css">
:root{
  --grand-titre:'Aclonica', sans-serif;
  --petit-titre:'Katibeh', cursive;
  --police-normal:'Roboto', sans-serif;

  --grand-fond: #0A0A0A;
  --moyen-fond: #4e0c0c;
  --petit-fond: #1b1a1a;
  
  --color-titre: #dedede;
  --color-texte: #b5b5b5;
  --color-infos: #a41919;
}
/***********Scrollbar**************/

::-webkit-scrollbar{
background-color: none;
width: 5px;
}

::-webkit-scrollbar-button{
background-color: none;
  height: 10px;
width: 5px;
}

::-webkit-scrollbar-track{
background-color: none;
}
::-webkit-scrollbar-track-piece{
background-color: none;}

::-webkit-scrollbar-thumb{
background-color: #4e0c0c;
}

/***********Scrollbar**************/
.fondfiche_CE{width: 550px;
  height: 890px;
  margin: auto;
  background: var(--grand-fond);
  font-family: var(--police-normal);
  color: var(--color-texte);
  font-size: 13px;
}
.entetefiche_CE{width: 550px;
  height: 80px;
  background: var(--moyen-fond);
  display: flex;
}
.entetefiche_CE h1{text-align: center;
  font-family: var(--grand-titre);
  font-size: 34px;
  color: var(--color-titre);
  margin: auto;
}
.titlefiche_CE{width: 100%;
  height: 30px;
  background: var(--moyen-fond);
  margin-bottom: 10px;
  display: flex;
}
.titlefiche_CE h2{text-align: center;
  font-family: var(--grand-titre);
  font-size: 18px;
  color: var(--color-titre);
  margin: auto;
}
.corpsfiche_CE{width: 510px;
  height: 760px;
  padding: 10px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 10px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    "avatfiche_CE infofiche_CE infofiche_CE"
    "caracfiche_CE caracfiche_CE caracfiche_CE"
    "iconsfiche_CE iconsfiche_CE iconsfiche_CE"
    "histfiche_CE histfiche_CE histfiche_CE";
}
.avatfiche_CE{grid-area: avatfiche_CE;
  width: 160px;
  height: 256px;
}
.avatfiche_CE img{width: 160px;
}
.infofiche_CE{grid-area: infofiche_CE;
  height: 246px;
  background: var(--petit-fond);
  padding: 5px;
  overflow: auto;
}
.infofiche_CE span{font-family: var(--grand-titre);
  font-size: 12px;
  color: var(--color-infos);
  }
.caracfiche_CE{grid-area: caracfiche_CE;
  background: var(--petit-fond);
  padding: 5px;
  overflow: auto;
  height: 150px;
}
.iconsfiche_CE{grid-area: iconsfiche_CE;
  display: flex;
  height: 140px;
}
.iconsfiche_CE img{width: 110px;
  margin: auto;
}
.histfiche_CE{grid-area: histfiche_CE;
  background: var(--petit-fond);
  padding: 5px;
  overflow: auto;
  height: 190px;
}

</style>
    </head>

    <body>
      <div class="fondfiche_CE">
        <div class="entetefiche_CE">
          <h1>Dracula</h1>
        </div>
        <div class="corpsfiche_CE">
          <div class="avatfiche_CE"><img src="https://i.imgur.com/6NnfnhZ.png" /></div>
          <div class="infofiche_CE"><span>Prénom et Nom :</span> Vlad Tepes <br/>
            <span>Surnom :</span> Dracula, qui est devenu son nom aux yeux des gens. <br/>
            <span>Âge :</span> Trop vieux pour compter encore les années <br/>
            <span>Statut civil :</span> Veuf, il reste célibataire à profiter des plaisirs de la chair. <br/>
            <span>Passions :</span> La lecture, parcourir le monde maintenant que les nouvelles technologies le lui permettent. <br/>
            <span>Particularités :</span> C'est un excellent combattant et sa nouvelle nature lui a offert quelques petites capacités hors du commun. <br/>
          </div>
          <div class="caracfiche_CE">
            <div class="titlefiche_CE"><h2>Caractère</h2></div>
            Stratège + Rusé + Manipulateur + Intelligent + Orgueilleux + Charismatique + Fier + Guerrier dans l'âme + Aristocratique + Loyal + Aimant
          </div>
          <div class="iconsfiche_CE">
            <img src="https://64.media.tumblr.com/1d06c01c4820b366048802cf7582f047/9ca1343cc3588210-93/s250x400/30feded35b26ec622ed9f51d6d2e5b27af2baebe.png" />
            <img src="https://64.media.tumblr.com/08671feedcc7c9bfa72ee392bca2aa11/9ca1343cc3588210-5c/s250x400/e1ae859d6f5af1f755e1481fa31ea76db6173c01.png" />
            <img src="https://64.media.tumblr.com/15c992dc0b65a7951b1cd297979c4d04/9ca1343cc3588210-76/s250x400/443e0daed31cb765ffcb798d8e91ab324f768c64.png" />
            <img src="https://64.media.tumblr.com/748ba3b5d627129bafb5e98403ad2fb7/9ca1343cc3588210-f2/s250x400/63ab0366f6622c5f89483a7110ada367104649c3.png" />
          </div>
          <div class="histfiche_CE">
           <div class="titlefiche_CE"><h2>Histoire</h2></div>
            Il y a déjà très longtemps qu'il ne se souvient plus totalement de son histoire, des bribes par ci et par là menés par des sentiments encore bien trop fort malgré le temps qui a pu passer.
          </div>
       </div>
      </div>
    </body>
</html>

Vous avez deux semaines pour voter (avec bienveillance ♥), donc jusqu'au 6 décembre 2021 minuit !
A vos votes !

_______________


 
Lun 22 Nov 2021 - 18:49
Capouccino
Capouccino
Newbie
  • Date d'inscription : 25/07/2019
  • Messages : 54
Participation 1
Esthétique du rendu : 3/5
Originalité : 1/5
(facultatif) Propreté du code : /5 commentaire pour ceux qui s'y connaissent le plus !
(facultatif) Un petit commentaire : Tout comme la 3ème participation, cette fiche n'a rien d'original. Mais elle est plutôt simple à lire et on retrouve les informations assez facilement dedans. Par contre, je n'aime pas du tout le fait d'avoir un encart avec une scrollbar, mais c'est un goût personnel :)

Participation 2
Esthétique du rendu : 3.5/5
Originalité : 5/5
(facultatif) Propreté du code : /5 commentaire pour ceux qui s'y connaissent le plus !
(facultatif) Un petit commentaire : J'aime beaucoup cette fiche et j'avoue avoir été pas mal impressionnée. Mais je ne l'utiliserais absolument pas comme une fiche de présentation classique. Car elle n'a rien de pratique et je fais partie de ces personnes feignantes qui n'aiment pas trop cliquer.
J'ai également trouvé dommage la répétition de l'espèce de rectangle en dégradé bleu. il donne l'impression d'une erreur et gêne à la lecture des informations.

Participation 3
Esthétique du rendu : 5/5
Originalité : 1/5
(facultatif) Propreté du code : /5 commentaire pour ceux qui s'y connaissent le plus !
(facultatif) Un petit commentaire : C'est la fiche qui m'a tapé dans l'oeil. En soit, elle n'a rien d'original, mais je la trouve très sympathique car très simple à lire en un coup d'oeil. Les couleurs sont sobres et il n'y a rien de trop flashy qui saute aux yeux.
_______________
Lun 22 Nov 2021 - 23:06
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
Bravo aux membres participants ! Compte tenu du poil dans ma main, ça relève du tour de force que d'avoir codé tout ça, entre avoir une idée et la coder... Donc bravo, parce que moi, j'y ai pensé et je ne suis pas allée plus loin (Vous pensez que j'ai droit à 20PC pour y avoir réfléchi ?)

Participation 1 : Alienor de Canterville


Esthétique du rendu : 4/5 Si on fait abstraction du bloc déroulant qui n'a jamais été ma tasse de thé en général et qui ne sied guère à de longs textes, j'aime bien l'esthétique générale, couleurs, etc. J'ai dû aller voir sur Edge (un navigateur webkit donc) pour voir que la barre de défilement était personnalisée, et que le titre "Alienor de Canterville" avait un petit clignotement pour l'ambiance. Le tout reste lisible, donc personnellement, je vais juste retirer un point parce que respectez Firefox, nom d'une pipe ! Mais sinon le violet c'est la vie.
Originalité : 3.5/5 On sort un peu des rendus de base d'une fiche de présentation sans non plus trop s'éloigner des classiques, c'est plutôt en accord avec le thème halloweenesque, les gifs sont bien choisis et l'effet clignotant est bien pensé. J'apprécie également l'humour du texte de la fiche, un plus non négligeable quand il s'agit d'évaluer le tout ! Vu que je connais pas Alienor de Canterville parce que je n'ai pas de culture, un point de plus pour l'originalité XD
(facultatif) Propreté du code : 2.5/5  Bon alors le code c'est ma spécialité donc je vais me permettre de commenter dessus. Attendez je mets des gants parce qu'il parait que je pique.
'Christa commente du code:
- J'apprécie l'usage des commentaires pour conserver des sauts de ligne ! Par contre, le dernier commentaire HTML ouvrant <!-- risque de poser de sérieux problèmes si quelqu'un poste cette fiche sur un forum XD (vu que tout ce qui suivra sera un commentaire HTML).
- J'ai un peu de mal à comprendre pourquoi les images sont dans le CSS plutôt que dans la partie HTML
- Il y a également une balise <div> vide à la fin du code qui me plonge dans la perplexité. Un oubli ?
- Un peu dommage les largeurs fixes avec un flex, on aurait pu laisser les blocs s'ajuster tous seuls comme des grands :o
- Vu que la partie "Maudit poète" est fixée à 200px de hauteur, visiblement son contenu dépasse allègrement :/ D'ailleurs, on voit que ça créerait des problèmes si la hauteur générale de la fiche n'avait pas été fixée.
- La vraie erreur que je ne pardonne pas, c'est les titres <h1>,  <h2>, <h3> et <h4> qui sont utilisés pour avoir un rendu différent pour chaque titre alors qu'on aurait pu se contenter de balises <h1> et <h2> et les styler avec le CSS. En HTML, la numérotation des titres a un but sémantique : un titre h4 est le sous-titre d'un titre h3 qui est le sous-titre d'un titre h2 qui est le sous-titre d'un titre h1. C'est notamment utile à des fin de référencement, ou pour aider les lecteurs d'écran à comprendre ce qu'ils lisent.
(facultatif) Un petit commentaire : Je vous ai dit que le violet c'était la vie ?

Participation 2 : La bête du Gévaudan


Esthétique du rendu : 3.5/5 J'aime l'aspect moyenâgeux simple de l'ensemble. Je me dis que ça aurait gagné à être un petit peu plus recherché, mais ça rend bien.
Originalité : 4/5 Indéniablement, c'est original pour une fiche de présentation. Je regrette cependant son manque de praticité pour un forum. À la rigueur, remarque, ça le ferait bien pour des PNJ d'un forum fantastique.  [Votes] Concours de codage n°12 3313101865
(facultatif) Propreté du code : 4/5
'Christa commente du code:
- J'apprécie la présence des codes de scrollbar Firefox (avec cependant une inversion des couleurs entre la barre et le fond ^^')
- Une page HTML correctement codée, ça me fait toujours plaisir. Bien pensé pour la balise <base> :p
- Je trouve toujours les SVG très cool, mais ça rend le code HTML final assez lourd :<
- Le p'tit logo d'intro construit à grands coups de positionnement et d'aplats de couleurs m'a fait sourire, c'est vachement bien fait !
- On ne met jamais d'élément bloc dans un élément inline, donc des <h1> et autres <p> à l'intérieur d'un élément <span>, ça pique, ça pique ! [Votes] Concours de codage n°12 2596956373
- Bien pensé les définitions \o/
- J'ai ouï-dire qu'une police importée avec @import ralentissait le chargement, et qu'il valait mieux la version HTML. Bon, ce n'est pas une erreur pour autant, je voulais juste le préciser.
- C'est responsive, et ça c'est bien <3
(facultatif) Un petit commentaire : Ça ne fait pas très Halloween et ça manque de contenu rédigé (j'avais l'impression que ça faisait partie des consignes...) mais je ne peux qu'applaudir l'effort de recherche dans l'originalité.

Participation 3 : Dracula


Esthétique du rendu : 2.5/5 Lisible, quoique j'aie un peu de mal avec le contraste du texte rouge sur fond sombre. Je suis surtout dubitative sur les marges de l'ensemble, j'ai une sensation de déséquilibre qui me fait moins apprécier le rendu final de cette fiche que les autres.
Originalité : 2/5 On reste dans le traditionnel, ce n'est pas un mal, mais du coup la fiche souffre de la comparaison avec les autres.
(facultatif) Propreté du code : 4/5  
'Christa commente du code:

- Un document HTML proprement écrit, jusqu'ici tout va bien XD
- Pas de scrollbar Firefox, ce qui brise mon petit coeur tendre
- J'aime les noms de classes et de variables qui ont un sens explicite et contiennent un mot clef !
- Un usage de grid avec gridarea ! C'est fabuleux, grid, hein ?
- Quelques dimensions fixes dont on aurait pu se passer je pense [Votes] Concours de codage n°12 3313101865
- Le code est propre, mais l'usage des balises <h2> aurait pu t'épargner l'usage concomitant (j'ai dû vérifier la définition, mais j'aime placer des mots compliqués) d'un élément <div> de classe .titlefiche_CE (suffisait d'appliquer cette classe au titre lui-même). Même remarque pour <h1>, à bien y réfléchir.
- Les attributs alt des images sont manquantes :'( (Mais bon, tes concurrents ont évité cet écueil en ne mettant pas d'images)
- Dans l'ensemble, je soupçonne une certaine tendance à (trop?) favoriser les balises génériques <span> et <div>. Viens, vieeeens du côté lumineux de la sémantique !
(facultatif) Un petit commentaire : Dracula il a l'air vachement laconique dans cette fiche de présentation, on dirait presque un nouveau membre d'Epicode qui vient que pour les codes.

Conclusion


Je n'ai vu aucun positionnement avec des marges, donc tout le monde a gagné, voilà !
_______________


[Votes] Concours de codage n°12 14n2 [Votes] Concours de codage n°12 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Votes] Concours de codage n°12 7WZJTfh
Mer 24 Nov 2021 - 15:47
Dragonnier
Dragonnier
Membre timide
  • Date d'inscription : 11/04/2018
  • Messages : 153
Me voila de retour, pour vous jouer un mauvais... euh pardon ce n'est pas le but :D
Tout d'abord félicitations à toutes les participations, c'est toujours chouette de voir le boulot de codeur qui mettent toutes leur âme pour quelques pauvres PC. Et désolé en avance pour mes commentaires liés au code, j'ai un côté perfectionniste et donc à relever les "erreurs" mais c'est dans une optique d'amélioration. Tous vos codes sont déjà de grande qualité :)

Participation 1:

Esthétique du rendu : 4/5 L'esthétique n'est pas trop ma spécialité mais on peut voir qu'il y a eu un réel travail de ce côté afin d'avoir un rendu cohérent et sympathique. L'utilisation des gif et des effets donnent de la vie c'est assez chouette.
Originalité : 3/5  C'est en soit assez classique comme fiche de présentation, il n'y a rien d'extravagant dans la structure même de celle-ci. Par contre, le style l'est et permet à la fiche de dénoter d'une fiche classique qu'on verrait partout. Ou comment rester sur du simple mais efficace.
(facultatif) Propreté du code : 2/5
Ah la partie que je préfère et pour laquelle je suis là :D
Globalement le code est ok, on voit que la personne a des connaissances en code mais qu'il y a quelques problèmes au niveau des bonnes pratiques. La fiche au niveau du code est également peu pratique pour modifier son contenu.
Voici quelques remarques que j'ai :

Spoiler:


  • Utilisation de balise title (h1, h2, etc) sans class. Attention aux conflits avec d'autres règles css.
  • Les balises "b" sont globalement à éviter. Il reste mieux d'utiliser une balise "strong" et d'également styliser en gras via du css.
  • Je vois des balises "div" vides, visiblement elles servent à afficher des images. C'est généralement à éviter, autant mettre l'image dans l'html pour des raisons d'accessibilités et co.
  • Y a une petite balise qui s'est perdue à la fin :p
  • Le bloc en haut à gauche a un problème de hauteur, et ça déborde en cas de contenu plus long. Certains blocs css ont une hauteur sans trop de raison et globalement j'ai vu pas mal de soucis en cas de texte plus long que l'actuel.

(facultatif) Un petit commentaire : Fiche sympathique et totalement dans le thème imposé.


Participation 2:

Esthétique du rendu : 3/5 C'est clean visuellement. Il n'y a rien qui me choque particulièrement, mais ce n'est pas non plus ultra travaillé et je trouve la fiche assez vide. J'aurais par exemple vu une image, ou animation, en background de la partie supérieur pour égayer un peu tout ça.
Originalité : 4/5 Ah voici une fiche avec un brin d'originalité comme je les aime. Pas vraiment pratique pour un LS par exemple, mais au moins c'est une fiche qu'on ne verrait que sur un seul forum donc c'est plutôt chouette. Et l'animation d'ouverture reste fort sympathique même si peu pratique pour un usage quotidien (mais c'est une fiche qu'on ne consulte certainement qu'une seule fois donc ce n'est pas bien grave)
(facultatif) Propreté du code : 4/5 Globalement nous avons affaire à un code de qualité. Pas mal de techniques "avancées" sont dans ce code comme des variables css, des selecteurs un peu plus complexes, des media queries, une grid, etc.
Voici pour mes petites remarques que j'ai pu détecter :
Spoiler:


  • Utilisation d'une page html complète c'est chouette, mais aucune sémantique en html, c'est moins chouette :D
  • J'apprécie la façon de faire l'effet au clique. Ce n'est ceci dit pas vraiment idéal car à la limite du hack html mais bon, coder sur un forum ça revient souvent à hacker un peu le fonctionnement de base...
  • La liste de span vide m'a choqué au premier abord, mais je comprends  la raison de leur présence. J'apprécie le fait d'avoir "dessiné" en css :p
  • Par contre l'utilisation de balise "span" comme bloc de contenu d'autres balises "block" c'est non.
  • Même remarque que pour la précédente participation, c'est mieux d'utiliser des class sur les balises title pour éviter des conflits (ce n'est valable que dans l'optique de mettre ça sur forum)
  • Il y a un petit "!important" qui traine dans le css. Il pensait passer inaperçu mais je l'ai vu :D Il ne sert d'ailleurs strictement à rien pour le coup

(facultatif) Un petit commentaire : La fiche qui m'a le plus impressionné de par l'originalité et le code, chouette boulot :D


Participation 3:

Esthétique du rendu : 2/5 Je trouve la fiche globalement vide malheureusement. Peu de contenu, peu de décors, peu d'effet. Le thème couleur global est cohérent et pourrait donner quelque chose de chouette.
Originalité : 1/5 Une fiche comme on pourrait en voir partout ailleurs. Cela marcherait très bien pour du LS mais ça n'attire pas particulièrement l'œil.
(facultatif) Propreté du code : 3/5 Fiche plus simple et donc code aussi plus "simple". Il y a cependant quelques techniques chouette à mentionner comme les variables css, et la grid. Dommage par contre que toutes les valeurs de hauteurs/largeurs soient fixes.
Et mes quelques remarques o/
Spoiler:


  • Les balises de titre (h1, etc) sont à chaque fois entourée d'une balise "div" non nécessaire. Mettre la class sur la balise title suffirait :)
  • Je vois des balises "br" pour faire les sauts de lignes. C'est plutôt à éviter, on préférera généralement utiliser une balise de paragraphe "p" pour gérer cela.
  • Un grand classique pour lequel je continuerai à me battre éternellement : il manque l'attribut "alt" sur les images :p
  • Je vois du texte qui suit des balises "div" mais sans être lui même dans une balise. C'est un peu bizarre. Il vaut mieux entourer ton texte d'une balise "p".

(facultatif) Un petit commentaire : La plus simple des trois fiches mais elle reste largement efficace. Je vois pas mal de potentiel dans cette fiche mais j'ai le ressenti d'un manque de temps pour la travailler plus en profondeur :)
_______________
Jeu 25 Nov 2021 - 1:13
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
Ouah @Dragonnier qui sort de sa tanière pour copier mon swag de maniaque de la mise en forme Panique

En parlant de swag, j'aurais été d'accord quelques années plus tôt sur la balise <b> mais en fait elle apparemment tout à fait acceptée en HTML5 donc personnellement je ne la déconseillerais plus en fait. Sémantiquement ça reste correct, si j'en crois la page du MDN à ce sujet.

C'était la digression de 'Christa, à vous les studios ! [Votes] Concours de codage n°12 771475364
_______________


[Votes] Concours de codage n°12 14n2 [Votes] Concours de codage n°12 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Votes] Concours de codage n°12 7WZJTfh
Jeu 25 Nov 2021 - 10:25
Dragonnier
Dragonnier
Membre timide
  • Date d'inscription : 11/04/2018
  • Messages : 153
Et quel swag ! Tu avais fais tellement bien ça que j'ai un peu hésité à mettre mes propres commentaires, mais c'était plus fort que moi :D

Alors en effet, je suis d'accord avec toi sur le fait que ce n'est pas une erreur sémantiquement parlant d'utiliser la balise <b>. Mais à côté elle n'a aucune signification sémantique, ça revient à mettre une balise <span>. Je pense que pour le coup tout va dépendre de si le mot doit avoir une importance sémantique ou si c'est juste pour styliser le texte différemment. Dans le premier <strong> reste mieux, dans le deuxième <b> ou <span> sont ok. Cependant, ce qui me dérange vraiment c'est de se baser sur la balise html pour apporter un style à son élément. Cela devrait dans tous les cas être fait en css via un font-weight (éviter les conflits tout ça tout ça) o/
_______________
Jeu 25 Nov 2021 - 18:26
Contenu sponsorisé
    _______________
    Revenir en haut