Up Remember the OnirismDown Remember the Onirism
Forum d'entraide à la création de projets & de Libre service

Code mon dialogue !

Sondage

Votre codage préféré est ...

[ 2 ]
67% [67%] 
[ 1 ]
33% [33%] 

Total des votes: 3
le 28.01.18 17:32

Code mon dialogue !


Épreuve #1




Pas de blabla avant cette épreuve, on n'a pas le temps /PAN/ Cette première épreuve de codage se veut volontairement assez accessible : vous allez devoir coder une fiche de RP.

Pas de couleurs imposées, pas d'images imposées, pas de taille imposée. Sachez seulement que certaines informations devront apparaître :

- Au moins une illustration ;
- Le titre du RP ;
- Le nom du compagnon de jeu ;
- Le contenu du RP (si si) ;
- Un lien vers la présentation & la fiche de liens du personnage.

Dans l'ordre et la configuration de votre choix. Dernière contrainte : vous devrez accentuer la différence entre la narration et le dialogue. Par un fond, une taille plus importante, une police différente, un écart, un positionnement différent, plusieurs de ces options ... il y a de nombreux moyens d'y arriver. La difficulté réside dans la lisibilité du texte et l'harmonie de la fiche.

Vous avez jusqu'au 11 février pour m'envoyer vos participations par MP. Les critères de votes seront basés sur les consignes données, la propreté du code (donc évitons les tableaux \o/) sans aller dans l'excès, son fonctionnement (quand même) et les goûts de chacun.

Vous pouvez poster vos questions à la suite, si questions il y a \o/

Épreuve graphique Épreuve écriture



Dernière édition par Halloween le 18.02.18 14:06, édité 1 fois

avatar
Mon projet : Aucun

Messages : 817

LS Graphiques : 0

LS Codage : 75

LS Projets : 4

Songes : 2197

Spécialité : Codage

Fondatrice


le 06.02.18 15:05
Et alors ? Je n'ai reçu qu'une participation x)

avatar
Mon projet : Aucun

Messages : 817

LS Graphiques : 0

LS Codage : 75

LS Projets : 4

Songes : 2197

Spécialité : Codage

Fondatrice


le 18.02.18 14:05
Voici les rendus proposés :

CODAGE 1
Post hanc adclinis Libano monti Phoenice, regio plena gratiarum et venustatis, urbibus decorata magnis et pulchris; in quibus amoenitate celebritateque nominum Tyros excellit, Sidon et Berytus isdemque pares Emissa et Damascus saeculis condita priscis.

- Sidon et Berytus isdemque pares Emissa.

Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.

Constituendi autem sunt qui sint in amicitia fines et quasi termini diligendi. De quibus tres video sententias ferri, quarum nullam probo, unam, ut eodem modo erga amicum adfecti simus, quo erga nosmet ipsos, alteram, ut nostra in amicos benevolentia illorum erga nos benevolentiae pariter aequaliterque respondeat, tertiam, ut, quanti quisque se ipse facit, tanti fiat ab amicis.




Code:
<div class="dox"><div class="dox-header"><img src="https://i.servimg.com/u/f62/19/41/51/11/header10.jpg"/><div class="dox-title">Titre du RP<br /><span>Feat Cette Personne</span></div><div class="dox-links"><div class="dox-linkbox"><a href="fiche de presentation">Fiche de présentation</a></div><div class="dox-linkbox"><a href="ficheperso">Fiche de personnage</a></div><div class="credits">@Morrigan</div></div></div><div class="dox-body">Post hanc adclinis Libano monti Phoenice, regio plena gratiarum et venustatis, urbibus decorata magnis et pulchris; in quibus amoenitate celebritateque nominum Tyros excellit, Sidon et Berytus isdemque pares Emissa et Damascus saeculis condita priscis.

<div class="dox-speech1">- Sidon et Berytus isdemque pares Emissa. </div>
Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.

Constituendi autem sunt qui sint in amicitia fines et quasi termini diligendi. De quibus tres video sententias ferri, quarum nullam probo, unam, ut eodem modo erga amicum adfecti simus, quo erga nosmet ipsos, alteram, ut nostra in amicos benevolentia illorum erga nos benevolentiae pariter aequaliterque respondeat, tertiam, ut, quanti quisque se ipse facit, tanti fiat ab amicis.
</div></div>

<style type="text/css">.dox {border: 2px solid white; box-shadow: 0px 0px 4px silver; width: 550px; margin: auto; background: url('https://i.servimg.com/u/f62/19/41/51/11/dust_s10.png');} .dox-header {border-bottom: 2px solid white; width: 550px; height: 200px; overflow: hidden; } .dox-header img {position: relative; z-index: 1; -webkit-filter: grayscale(90%); filter: grayscale(90%); transition: 1s;} .dox-title {height: 200px; text-align: center; text-transform: uppercase; color: black; text-shadow: 0px 0px 4px white; font-size: 30px; line-height: 27px; padding-top: 65px; position: relative; z-index: 2; top: -200px; font-family: 'Raleway'; transition: 1s;} .dox-title span {font-size: 13px;} .dox-links {position: relative; z-index: 3; background: black; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 230px; height: 200px; padding: 10px; top: -465px; float: right; right: -230px; transition: 1s;} .dox-header:hover img {-webkit-filter: grayscale(10%); filter: grayscale(10%); transition: 1s;} .dox-header:hover .dox-title {opacity: 0; transition: 0.5s;} .dox-header:hover .dox-links {right: 0px; transition: 1s;} .dox-linkbox {padding: 10px; border: 1px solid whitesmoke; text-align: center; margin-bottom: 7px;} .dox-linkbox a {color: whitesmoke; font-family: 'Raleway';} .credits {color: whitesmoke; font-weight: bold; position: relative; bottom: -70px; font-size: 10px; text-align: center;} .dox-body {padding: 10px; text-align: justify; font-family: 'Open Sans';} .dox-speech1 {color: royalblue; font-family: 'Alegreya Sans SC'; font-size: 14px;}</style><link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:700|Open+Sans|Raleway" rel="stylesheet">


CODAGE 2


Titre de notre RP
with NOM + NOM


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque ex ac leo vehicula lacinia. Nullam sed auctor lorem. Maecenas pretium facilisis diam, vel viverra elit pharetra in. Proin nibh est, rhoncus ut eleifend eget, vulputate a turpis. Vivamus ac ipsum scelerisque elit venenatis blandit convallis ut elit. Nulla enim ligula, faucibus eu orci vitae, condimentum imperdiet tellus. Nullam eget justo et justo gravida semper vitae eu lectus. Curabitur suscipit arcu in condimentum finibus. Fusce sed sem quis tortor faucibus vestibulum. Suspendisse eu pharetra odio. Vestibulum lectus augue, finibus non consectetur sed, congue id diam. In ac rhoncus augue.

Dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue

Donec efficitur leo ex, vel aliquam justo tempor ac. Aliquam sagittis erat eget congue bibendum. Aliquam a varius ligula. Sed pellentesque lorem ut tellus molestie semper. Vivamus ultrices lacus sed dui commodo, sed pulvinar metus volutpat. Mauris quis ornare ligula, et condimentum quam. Integer odio ligula, varius sodales auctor quis, malesuada et justo. Nulla mattis velit rhoncus libero vulputate, et tempor quam vestibulum. Quisque efficitur sit amet libero ac malesuada. Proin hendrerit nunc sit amet nibh ornare, in gravida lacus porttitor.

Phasellus porta, arcu ut dictum porta, mi ex iaculis metus, eu maximus ligula dui ut ipsum. Nam sed luctus lorem. Sed tempor neque eget aliquet malesuada. Phasellus porttitor finibus ante, quis vulputate velit suscipit vel. Aliquam porta, tortor in rhoncus luctus, lacus urna varius erat, at egestas erat dolor sed lectus. Etiam accumsan quis nunc non mattis. Quisque ac augue nec erat iaculis fermentum vel id ex. Quisque lacinia ac quam in viverra. Nulla laoreet vel quam vitae convallis.

Copyright


Code:
<div style="margin: auto;"><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<div style="height: 710px; background-image: url(http://up4u.free.fr/images/a9lrvy3g2ue29meoa75.png); width: 500px; border-radius: 300px 300px 0px 0px; margin: auto;"><img style="border-radius: 300px 300px 0px 0px;" src="https://s-media-cache-ak0.pinimg.com/originals/21/3e/1a/213e1abdda53813addacc003d83395c9.jpg" />
<div style="border-radius: 300px; border: 2px solid white; width: 100px; margin-left: -3px; margin-top: 5px;"><img style="border-radius: 300px;" src="http://i.imgur.com/Vo54ZTs.png" /></div><div style="border-radius: 300px; border: 2px solid white; width: 100px; margin-top: -50px; margin-left: 20px;"><img style="border-radius: 300px; z-index: 1; position: relative;" src="https://redcdn.net/hpimg15/pics/492987RobertpIc26.png" /></div><div style="background-color: white; opacity: 0.7; margin-top: -195px; position: absolute; width: 495px; text-align: center; color: #8E3557; font-family: 'Lobster', cursive; font-size: 25px; padding: 3px;">Titre de notre RP</div><div style="color: #B78178; letter-spacing: 1px; text-transform: lowercase; margin-top: -150px; text-align: center; ">with NOM + NOM</div>
<div style="text-align: justify; text-transform: uppercase; font-size: 8px; float: left; margin-top: 130px; width: 110px; padding: 5px; background-color: #FFF5EF; opacity: 0.5;"><a style="display: inblock;" href="">+ ma présentation</a><br /><a style="display: inblock; " href="">+ mes liens</a></div>
<div style="margin-top: -185px; background-color: white; line-height: 12px; text-align: justify; width: 350px; margin-left: 115px; padding: 15px; border-radius: 0px 30px 30px 0px; height: 400px; overflow: auto; opacity: 0.9px; float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque ex ac leo vehicula lacinia. Nullam sed auctor lorem. Maecenas pretium facilisis diam, vel viverra elit pharetra in. Proin nibh est, rhoncus ut eleifend eget, vulputate a turpis. Vivamus ac ipsum scelerisque elit venenatis blandit convallis ut elit. Nulla enim ligula, faucibus eu orci vitae, condimentum imperdiet tellus. Nullam eget justo et justo gravida semper vitae eu lectus. Curabitur suscipit arcu in condimentum finibus. Fusce sed sem quis tortor faucibus vestibulum. Suspendisse eu pharetra odio. Vestibulum lectus augue, finibus non consectetur sed, congue id diam. In ac rhoncus augue. <p style="letter-spacing: 1px; margin-left: 5px; color: #C44C51; font-style: italic;">Dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue dialogue</p> Donec efficitur leo ex, vel aliquam justo tempor ac. Aliquam sagittis erat eget congue bibendum. Aliquam a varius ligula. Sed pellentesque lorem ut tellus molestie semper. Vivamus ultrices lacus sed dui commodo, sed pulvinar metus volutpat. Mauris quis ornare ligula, et condimentum quam. Integer odio ligula, varius sodales auctor quis, malesuada et justo. Nulla mattis velit rhoncus libero vulputate, et tempor quam vestibulum. Quisque efficitur sit amet libero ac malesuada. Proin hendrerit nunc sit amet nibh ornare, in gravida lacus porttitor.

Phasellus porta, arcu ut dictum porta, mi ex iaculis metus, eu maximus ligula dui ut ipsum. Nam sed luctus lorem. Sed tempor neque eget aliquet malesuada. Phasellus porttitor finibus ante, quis vulputate velit suscipit vel. Aliquam porta, tortor in rhoncus luctus, lacus urna varius erat, at egestas erat dolor sed lectus. Etiam accumsan quis nunc non mattis. Quisque ac augue nec erat iaculis fermentum vel id ex. Quisque lacinia ac quam in viverra. Nulla laoreet vel quam vitae convallis.</div></div><p style="color: grey; opacity: 0.5; font-size: 7px; text-align: center;">Copyright</p></div>

Vous avez jusqu'au 4 mars pour voter et commenter \o/

avatar
Mon projet : Aucun

Messages : 817

LS Graphiques : 0

LS Codage : 75

LS Projets : 4

Songes : 2197

Spécialité : Codage

Fondatrice


le 18.02.18 21:13
Hey !

J'ai voté pour la première, je la trouve plus belle visuellement et plus simple, et le code est plus simple aussi puisque le CSS n'est pas dans les balise HTML, donc plus facile de s'y retrouver, et le fait de placer le CSS à la fin du code et non pas en haut plus pratique je trouve ^^ Bref j'adore ce codage xD

J'aime bien le deuxième code aussi, mais je suis moins fan des codes de RP qu'on doit défiler, j'aime quand on peut voir tout le texte dès le début x) Et la bande vide sur le côté me perturbe :v Et puis elle part un peu dans tous les sens... J'aime moins, mais le codeur a quand-même fait un beau travail :3






avatar
Mon projet :

Messages : 164

LS Graphiques : 12

LS Codage : 3

LS Projets : 1

Songes : 639

Membre



Vous ne pouvez pas répondre aux sujets dans ce forum

Partenaires