[Codage] Volière/Papier à lettre - Theya Alomora [Terminé - Matt Deliers]

Informations générales
______________________________________

► Une préférence pour un codeur ? Artemis ou Matt
► La commande est-elle urgente ? Non

Détail de la commande
______________________________________

► Célébrité utilisée :
► Liens des images à utiliser :

Spoiler:

► Police à utiliser : Calligraphique pour "titre" classique pour contenu
► Citations :

► Description précise du contenu : Codage de volière avec le contenu classique, quelques choses dans les tons clair
Pour le papier à lettre j'aimerai que ça soit une enveloppe qui s'ouvre

► Ambiance recherchée : Féminin et classe, on va dire ça comme ça

► Détails supplémentaires :

Hey Theya,

Je suis extrêmement touché d'être sollicité. A noter que tu seras ma première demande ! Et ça c'est ... beaaaaaau !
Bref si tu n'y vois aucun inconvénient je me charge de répondre à tes attentes. Quelques idées en tête, je reviendrai souvent vers toi pour les confirmer ou les réorienter. J'ai pas de questions pour l'instant, ça risque de changer.

Tu sais où me trouver (Discord, etc.) !

Des bisous et du lait,

amour

Hello Matt,

Ravie que tu sois mon codeur ! Sache que j'adore tes créations, j'avais bugué en voyant ta fiche personnage quand je suis arrivée tant elle était bien faite. Alors je suis ravie que tu t'occupes de ma volière !

Merci beaucoup et n'hésites pas à me contacter sur discord également ou par MP !

Des cookies pour accompagner le lait,

Theya

Hey Theya,

Ouaiiiiis, désolé pour cette fausse joie.
Je voulais tester dans ma fiche de personnage le rendu du code mais... Raté ! J'ai répondu dans ta demande, «Shit, le coup est parti tout seul.». Donc tu as du recevoir la notification un peu plus vite que prévue.

- Gngngngnngngrbllbl pour l'effet de surprise je repasserai. -
:mm:

Bref je te propose la volière et le papier à lettre suivants. J'espère avoir pris en considération tes souhaits.
De toute façon si j'ai fait fausse route, que tu vois des corrections, évolutions, améliorations, changements à apporter ; je reste entièrement à ton écoute. J'attends tes retours, avec du lait. Si si.

Pour des raisons de facilité sur l'affichage, j'ai mis les codes .css sur un site externe.
En revanche dans les spoiler contenant les codes, il y a bien tout les lignes (html + css).

Du lait, des cookies et de la musique !
amour

Theya

Alomora

✗ Lettre
✗ Beuglante
✗ Patronus

Adresses des habitations :

- Salle commune Poufsouffle,

Académie de Poudlard, Ecosse.

- Association L.E.G.I.T.,

Académie de Poudlard, Ecosse.

- Maison familiale,

37 Featherstone Street, Londres, United Kingdom.

Nom de l'animal « facteur » :

Loredana, chouette hulotte. Toute cette partie peut être dédiée au messager. Description physique. Description morale. Habitudes, manies, envies, fonctionnement, friandises, sentiments, que sais-je ? Enjoy.
Si vraiment la description est trop longue, cela risque de dépasser. A la manière d'un vase que l'on remplirait constamment de gouttes d'eau. A un moment précis, il y en a une qui va finir par faire déborder le vase.

Nom de l'émetteur : Theya Alomora

Support du message : o Beuglante X Lettre o Patronus

Description du support : Lettre envoyée depuis la BAM. Bim, BAM, boum ? LeDeliers adore boire du lait.

Matt Deliers,

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Theya Alomora

Code volière:

Code:: <link href="https://fonts.googleapis.com/css?family=Rochester|Oregano|Italianno|Montez" rel="stylesheet"> <style>.header { position: relative; width: 600px; height: 534px; margin: auto; background-color: black; color: #20B2AA; background-image: url('http://img110.xooimage.com/files/c/c/7/bckgrnd_voliere_v2-55ea779.jpg'); background-size: cover; background-position: center; font-family: 'Italianno'; overflow: hidden; } .header .tawny_owl { position: relative; top: 12px; left: 12px; width: 576px; height: 510px; background-image: url('http://img110.xooimage.com/files/1/2/f/tawny_owl-55ea77d.jpg'); background-size: cover; background-position: center; transition: all 0.5s ease-in-out; z-index: 1; } .header:hover .tawny_owl { transform: scale(5) translate(500px); opacity: 0; } .header .mini_tawny_owl { position: absolute; bottom: 45px; right: 65px; width: 80px; height: 80px; border: 1.5px solid #9B9B9B; border-radius: 105px; background-image: url('http://img110.xooimage.com/files/1/2/f/tawny_owl-55ea77d.jpg'); background-size: cover; background-position: center; animation: spin 10.7s linear infinite; } .header .subject { position: absolute; left: 385px; top: 122px; width: 130px; height: 120px; font-family: 'Italianno'; font-size: 32px; letter-spacing: 0.3px; color: #F4AD06; } .header .content { position: absolute; top: 25px; bottom: 25px; left: 25px; right: 25px; height: 484px; margin: 5px 10px; font-family: 'Oregano'; font-size: 16px; letter-spacing: 0.7px; color: black; } .header .content .kinds { margin-bottom: 50px; } .header .content .title cbox { font-family: 'Georgia'; font-size: 19px; } .header .content .kinds ~ div { margin-top: 25px; padding-right: 8px; width: 65%; height: 160px; overflow-y: auto; z-index: 2; } .header .content .kinds ~ div .title { font-family: 'Montez'; font-size: 20px; font-weight: bold; color: #9B9B9B; } .header .content .item { padding-left: 15px; color: #383C4B; text-align: justify; } .header .content .subitem { padding-left: 15px; padding-bottom: 5px; font-size: 13px; font-style: italic; color: #6C7491; text-align: justify; } .header .content .names::-webkit-scrollbar { width: 4px; height: 4px; } .header .content .names::-webkit-scrollbar-track { border-radius: 8px; } .header .content .names::-webkit-scrollbar-thumb { border-radius: 21px; background: #9B9B9B; } @-moz-keyframes spin { 100% { -moz-transform: rotateY(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } } @keyframes spin { 100% { -webkit-transform: rotateY(360deg);transform: rotateY(360deg); } }</style> <div class="header"> <div class="tawny_owl"></div> <div class="mini_tawny_owl"></div> <div class="subject"> Theya<br/><br/>Alomora </div> <div class="content"> <div class="kinds"> <cbox>✗</cbox> Lettre<br/> <cbox>✗</cbox> Beuglante<br/> <cbox>✗</cbox> Patronus </div> <div class="targets"> <div class="title">Adresses des habitations :</div> <div class="item">- Salle commune Poufsouffle,</div> <div class="subitem">Académie de Poudlard, Ecosse.</div> <div class="item">- Association L.E.G.I.T.,</div> <div class="subitem">Académie de Poudlard, Ecosse.</div> <div class="item">- Maison familiale,</div> <div class="subitem">37 Featherstone Street, Londres, United Kingdom.</div> </div> <div class="names"> <div class="title">Nom de l'animal « facteur » :</div> <div class="item">Loredana, chouette hulotte. Toute cette partie peut être dédiée au messager. Description physique. Description morale. Habitudes, manies, envies, fonctionnement, friandises, sentiments, que sais-je ? Enjoy.<br/> Si vraiment la description est trop longue, cela risque de dépasser. A la manière d'un vase que l'on remplirait constamment de gouttes d'eau. A un moment précis, il y en a une qui va finir par faire déborder le vase. </div> </div> </div> </div>

Code papier à lettre:

Code:: <link href="https://fonts.googleapis.com/css?family=Rochester|Oregano|Italianno|Montez" rel="stylesheet"> <style>.box-envelope { cursor: pointer; text-align: center; margin: 75px auto; position: relative; display: block; width: 580px; } .envelope { width: 580px; height: 280px; background-color: #73A292; display: block; display: inline-block; position: relative; margin: 0 auto; } .envelope:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 155px 290px 0 290px; border-color: #56857B transparent transparent transparent; position: absolute; z-index: 1; top: 0; left: 0; transform-origin: top center; transition: 0.8s; transition-delay: 0.4s; } .envelope:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 290px 140px 290px; border-color: transparent transparent #517D74 transparent; position: absolute; z-index: 2; bottom: 0; left: 0; } .box-envelope .letter { position: relative; margin: auto; top: 0; width: 550px; height: 0; background-image: url('http://img110.xooimage.com/files/8/6/3/bckgrnd_letter-55ea75f.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top center; z-index: 0; transition: height 0.4s; } .box-envelope .letter .content { text-align: justify; color: #950000; height: 0%; overflow-y: hidden; transition: height 0.8s; } .box-envelope .letter .content .text { padding: 0 50px; margin: 50px 0 0 0; height: 340px; overflow-y: auto; } .box-envelope .letter .content .text hr { width: 55%; color: #950000; } .box-envelope .letter .content .text p { padding: 3px 0; font-family: 'Rochester'; font-size: 14px; } .box-envelope .letter .content .text p:last-child { padding: 3px 0 50px 0; text-align: right; } .box-envelope:hover .envelope:before { border-color: #689B8C transparent transparent transparent; transform: rotateX(180deg); transition: 0.8s; } .box-envelope:hover > .letter { height: 380px; z-index: 2; transition: height 1.2s, opacity 1.6s; transition-delay: 0.4s; } .box-envelope:hover .letter .content { height: 100%; transition: height 0.8s; } .box-envelope .letter .content .text::-webkit-scrollbar { width: 6px; height: 6px; margin-right: 50px; } .box-envelope .letter .content .text::-webkit-scrollbar-track { border-radius: 8px; } .box-envelope .letter .content .text::-webkit-scrollbar-thumb { border-radius: 21px; background: #950000; }</style> <div class="box-envelope"> <div class="letter"> <div class="content"> <div class="text"> <p><b>Nom de l'émetteur :</b> Theya Alomora</p> <p><b>Support du message :</b> o Beuglante X Lettre o Patronus</p> <p><b>Description du support :</b> Lettre envoyée depuis la BAM. Bim, BAM, boum ? LeDeliers adore boire du lait.</p> <hr/> <p>Matt Deliers,</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Theya Alomora</p> </div> </div> </div> <div class="envelope"></div> </div>

Hello Mr Distributeur de Cookies,

Alors alors... J'aime PAS DU TOUT.

Bien sûr c'est faux, J'ADORE ! Deux petits trucs qui me dérangent néanmoins :

Sur la volière, je trouve l'animation trop rapide, et le fond qui apparait après j'aime bof... Mais ça je pense que je pourrais le changer dans le background:url ?

Pour la lettre c'est parfait, j'en demandais pas plus !

Merci miiiiiiiille fois pour ce code hyper rapide en plus !

J'attend ton retour pour l'animation rapide,

Theya

Hey Theya,

Merci de tes compliments. amour

Ravi que cela te plaise. J'ai essayé de coller au mieux avec tes attentes.
On en a parlé déjà sur Discord, une conversation instantanée est de loin infiniment plus pratique. Du coup j'ai modifié le fond pour mettre celui dont on a parlé. Egalement j'ai ralenti la durée de la transition ; l'image de la chouette hulotte met plus de temps à s'envoler. Encore une fois, cette valeur est modifiable dans le code « transition: all 1.1s ease-in-out; ».

Du coup cela donne cette nouvelle version. J'ai modifié le nom des classes .css pour éviter que cela interfère avec la première version. J'attends tes retours.

Juste du lait, parfait pour rester concentré (sans jeu de mot, quoique...).

Theya Alomora

✗ Lettre
✗ Beuglante
✗ Patronus

Adresses des habitations :

- Salle commune Poufsouffle, Académie de Poudlard, Ecosse.

- Association L.E.G.I.T., Académie de Poudlard, Ecosse.

- Maison familiale, 37 Featherstone Street, Londres, UK.

- Boutique de la BAM, 28 Chemin de Traverse, Londres, UK.

Nom de l'animal « facteur » :

Loredana, chouette hulotte. Toute cette partie peut être dédiée au messager. Description physique. Description morale. Habitudes, manies, envies, fonctionnement, friandises, sentiments, que sais-je ? Enjoy.

Si vraiment la description est trop longue, cela risque de dépasser. A la manière d'un vase que l'on remplirait constamment de gouttes d'eau. A un moment précis, il y en a une qui va finir par faire déborder le vase.

Cela arrive uniquement dans les cas extrêmes. Cela dit, il vaut mieux être prévoyant.

Code volière:

Code:: <link href="https://fonts.googleapis.com/css?family=Rochester|Oregano|Italianno|Montez" rel="stylesheet"> <style>.v2header { position: relative; width: 600px; height: 534px; margin: auto; background-color: black; color: #20B2AA; background-image: url('https://cdn.discordapp.com/attachments/446774066041585664/557553093441486858/dustin-lee-19667-unsplash.jpg'); background-size: cover; background-position: center; font-family: 'Italianno'; overflow: hidden; } .v2header .v2tawny_owl { position: relative; top: 12px; left: 12px; width: 576px; height: 510px; background-image: url('http://img110.xooimage.com/files/1/2/f/tawny_owl-55ea77d.jpg'); background-size: cover; background-position: center; transition: all 1.1s ease-in-out; z-index: 1; } .v2header:hover .v2tawny_owl { transform: scale(5) translate(500px); opacity: 0; } .v2header .v2mini_tawny_owl { position: absolute; bottom: 12px; right: 131px; width: 80px; height: 80px; border: 1.5px solid #9B9B9B; border-radius: 105px; background-image: url('http://img110.xooimage.com/files/1/2/f/tawny_owl-55ea77d.jpg'); background-size: cover; background-position: center; animation: spin 10.7s linear infinite; } .v2header .v2subject { position: absolute; left: 4px; top: 171px; width: 120px; font-family: 'Italianno'; font-size: 24px; letter-spacing: 0.3px; color: #F4AD06; transform: rotate(-33deg); } .v2header .v2content { position: absolute; top: 5px; bottom: 5px; left: 5px; right: 5px; text-align: justify; font-family: 'Oregano'; font-size: 16px; letter-spacing: 0.7px; color: black; } .v2header .v2content .v2kinds { position: absolute; top: 120px; right: 14px; height: 60px; width: 90px; transform: rotate(33deg); } .v2header .v2content .v2title cbox { font-family: 'Georgia'; font-size: 19px; } .v2header .v2content .v2names { position: absolute; top: 45%; left: 12.5%; width: 75%; height: 32%; overflow-y: auto; padding-right: 15px; } .v2header .v2content .v2kinds ~ div .v2title { font-family: 'Montez'; font-size: 20px; font-weight: bold; color: black; } .v2header .v2content .v2item { padding-left: 15px; color: #282B35; text-align: justify; } .v2header .v2content .v2names::-webkit-scrollbar { width: 4px; height: 4px; margin-left: 15px; } .v2header .v2content .v2names::-webkit-scrollbar-track { border-radius: 8px; } .v2header .v2content .v2names::-webkit-scrollbar-thumb { border-radius: 21px; background: #9B9B9B; } @-moz-keyframes spin { 100% { -moz-transform: rotateY(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } } @keyframes spin { 100% { -webkit-transform: rotateY(360deg);transform: rotateY(360deg); } }</style> <div class="v2header"> <div class="v2tawny_owl"></div> <div class="v2mini_tawny_owl"></div> <div class="v2subject">Theya Alomora</div> <div class="v2content"> <div class="v2kinds"><cbox>?</cbox> Lettre<br/> <cbox>?</cbox> Beuglante<br/> <cbox>?</cbox> Patronus</div> <div class="v2names"> <div class="v2title">Adresses des habitations :</div> <div class="v2item">- Salle commune Poufsouffle, Académie de Poudlard, Ecosse.</div> <div class="v2item">- Association L.E.G.I.T., Académie de Poudlard, Ecosse.</div> <div class="v2item">- Maison familiale, 37 Featherstone Street, Londres, UK.</div> <div class="v2item">- Boutique de la BAM, 28 Chemin de Traverse, Londres, UK.</div> <br/> <div class="v2title">Nom de l'animal « facteur » :</div> <div class="v2item">Loredana, chouette hulotte. Toute cette partie peut être dédiée au messager. Description physique. Description morale. Habitudes, manies, envies, fonctionnement, friandises, sentiments, que sais-je ? Enjoy.<br/><br/> Si vraiment la description est trop longue, cela risque de dépasser. A la manière d'un vase que l'on remplirait constamment de gouttes d'eau. A un moment précis, il y en a une qui va finir par faire déborder le vase.<br/><br/> Cela arrive uniquement dans les cas extrêmes. Cela dit, il vaut mieux être prévoyant. </div> </div> </div> </div>

Hello,

MAIS CEST SUBLIMISSIME

Ecoute j'ai plus rien à dire, genre c'est PARFAIT ! Vraiment parfait je déconne pas ! Tu sais à quel point j'idolâtre le travail des codeurs !

Juste petit détail, pour la lettre on avait parlé en pv de changer la couleur de l'enveloppe, que pense-tu d'une couleur comme celle de la machine à écrire ?

J'attend ton retour,

Merci mille fois Matt, tu as fais un travail de fou !

Un milliard de cookies,

Theya

Hey again Theya,

J'ai changé les couleurs pour les faire dans le style de la machine à écrire.
J'ai simplement édité dans le message où il y a la lettre et mis à jour le code en conséquence bien sûr. Si tu ne vois aucune modif, c'est que ta page est sûrement en cache avec l'ancien CSS, et auquel cas il faut que tu le vides [le cache].

Je te laisse me redire si les couleurs te conviennent ou s'il faut encore adapter.
Sache que je te remercie pour tes compliments [et les cookies], et qu'ils me vont en effet droit au cœur.

Du lait, et des bisous,
amour

Re-coucou,

Alors aloooooors !

Excuse moi j'avais pas vu du coup et je te remercie encore pour le lait !

Du coup, est-ce que par la suite je pourrais changer la police donc ça tu m'as dis ok et la taille ? (j'ai trouvé le font-size) et la couleur ? (Tu peux me répondre sur discord)

Si non pour moi tout est bon, et on peut cloturer cette demande dès à présent

Je te remercie énormément pour tout le travail que tu as fourni, sache que tu es nommé mon Dieu du Code c'est officiel. Et j'te réserve pour mes futures commandes !

Plein de bisous et de cookie pour remplir ton petit ventre,

Theya

Re Theya,

Le lait c'est la Vie. En plus paraît que ça fait grandir et tout et tout.
On en a parlé mais effectivement tu peux changer tous les paramètres souhaités (police, couleur, taille, emplacement, délai des transitions, etc.). C'est l'avantage du CSS.

En gros je viendrai te parler sur Discord, ce sera plus simple.

- changer la durée d'une transition : « transition: all 1.1s ease-in-out; »
- changer la taille de la police de caractères : « font-size: 16px; »
- changer la police de caractères : « font-family: Georgia; »
(il faut que la police soit connue sur l'ordinateur ou disponible sur Internet et donc potentiellement l'inclure au début du fichier dans la ligne link href="https://fonts.googleapis.com/css?family=Rochester|Oregano|Italianno|Georgia" rel="stylesheet" ; polices dispos sur Google Fonts)
- changer la couleur de la police de caractères : « color: #012345; »

Si tout est bon alors d'accord pour la clôture.
Au pire tu me trouves sur Discord si tu as des questions ou des problèmes.

Voili voilou,
Des bisous et à très vite !
amour

Coucou ici !

Apparemment ce beau travail est terminé, donc je clôture la demande.

Bise,
Lolly