Coucou c:

J'aimerais préciser que le niveau requis pour cette fiche est assez facile (ça n'en a pas l'air hein)

En tous cas merci d'avoir posté ça sur Epicode

Étant du même avis que Cheshire, je me permet donc de modifier le titre de ton schéma.

Si quelqu'un sait où se trouve un éventuel tutoriel sur les codes h1 h2 ect, je le supplie de m'en envoyer un lien par mp ou dans sa réponse, merci! cette remarque vous aura fait comprendre que oui, e sais que c'est pas la joie dans mon code... disons que y'a mieux écrit, quoi ;) J'en suis bien consciente, mais si vous pouvez m'aider en m'expliquant ce qui va pas, j'érigerais une statue de cookie en votre nom!
Mes excuses aux autres membres du staff: j'avais la flemme de mettreplus de lien mais je vous adore tous et toutes!

Hello !! @Dorea McH :)

Je suis pas bien certaine d'avoir compris ta question à propos des H1/H2 .. tu parles des balises ?
Dans ce cas là, je crois pas qu'il existe de tutoriel, mais c'est très simple, c'est des balises de titre; H pour hiérarchie en fait ! ;)
Le H1 c'est pour écrire les titres, soit les élements d'importance niveau 1. Ensuite, le sous titre avec le H2 etc etc... jusqu'au niveau 6 ! :)

Sinan, j'ai rien à redire sur ton code, c'est tout bon ! :D

Merci de tes éclaircicement. En fait je voulais savoir comment on peut modifier leurs valeurs. Par exemple, un titre noir, de taille 32px et de police Tahoma, et un sous titre blanc de taille 24px ;) je ne sais pas faire ça

Coucou !
Pour modifier le texte, on utilise soit :
- font-size pour modifier la taille de texte
- font-family pour définir la famille de police que tu utilises, à savoir son nom
- color pour modifier la couleur du texte.

Pour que deux texte soient de couleur et de taille différente, il faut tout simplement ouvrir deux balises différentes :)

Voici ce que j'ai fais :) ça m'a permit de voir que j'y connaissais pas grand chose en codage XD

Code:

<div style="background-color:#000000;width:600px;height:800px;"><h1 style="font-family: Georgia;color: #ffffff;font-size: 50px;text-align:center;font-weight: bold;padding-top:30px;">Titre</h1><h2 style="font-family: Georgia;color: #ffffff;font-size:30px;text-align:center;background-color: #616565;border-radius: 10px;margin-left: 150px;margin-right: 150px;font-weight: bold;margin-top: 100px;height:50px;">Titre Secondaire</h2><div style="background-color:#616565;color: #ffffff;font-size:30px;font-family: Georgia;height:200px;border-radius: 10px;margin-left: 130px;margin-right: 130px;margin-top:80px;padding-left: 10px;padding-top: 25px;text-align: center;font-weight: bold;overflow: auto;">Description</div>
 <div style="background-color: #616565;color: #ffffff;font-size:15px;font-family: Georgia;height:30px;border-radius: 10px;margin-left: 130px;margin-right: 130px;margin-top:200px;padding-top : 5px;text-align: center;font-weight: bold;"><a href="http://epicode.variousforum.com/" target="_blank"> Astriones</a></div></div>

Coucou @Astriones,

Très bon travail !

Voici quelques petites remarques:

Code:

margin-left: 130px;margin-right: 130px;

Tu peux éviter ces grandes marges en définissant une largeur au contenu, et mettre un margin auto pour centrer ton bloc. Pour ton exemple :

Code:

width: 340px; margin: auto;

( J'ai mis 340 puisque la largeur de ta fiche est de 600, tes marges 130x2 = 260 donc 600- 260 = 340 )

Je passe à la fin ici :

Code:

<div style="background-color: #616565;color: #ffffff;font-size:15px;font-family: Georgia;height:30px;border-radius: 10px;margin-left: 130px;margin-right: 130px;margin-top:200px;padding-top : 5px;text-align: center;font-weight: bold;"><a href="http://epicode.variousforum.com/" target="_blank">️ Astriones</a></div>

J'ai remarqué que tu as mis du CSS relative au texte dans la balise div, mais tu as surement remarqué que ça ne style pas ton texte. C'est normal, puisque le texte est un lien, ce CSS doit aller plutôt dans la balise du lien a (anchor)

Voilà c'est tout :3

J'me permets de tester moi aussi o/ !
J'suis pas experte mais bon, j'espère que c'est réussi

Code:

<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet"><div class="lefond"> <div class="titre">Title here</div><div class="subtitle"><span>Subtitle goes here (and you can write whatever you want babe ~)</span></div><div class="texteici">Accedat huc suavitas quaedam oportet sermonum atque morum, haudquaquam mediocre condimentum amicitiae. Tristitia autem et in omni re severitas habet illa quidem gravitatem, sed amicitia remissior esse debet et liberior et dulcior et ad omnem comitatem facilitatemque proclivior.Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset.Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque Fortuna plerumque dissidentes, quarum si altera defuisset, ad perfectam non venerat summitatem.Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt, cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde iactitant possidere, ignorantes profecto maiores suos, per quos ita magnitudo Romana porrigitur, non divitiis eluxisse sed per bella saevissima, nec opibus nec victu nec indumentorum vilitate gregariis militibus discrepantes opposita cuncta superasse virtute.Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque discrimen vitae vexatus nihil fateri conpulsus est.</div><div class="subtitlebas"><span>Important stuff goes <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">right here</a>.</span></div></div>
<div class="endcred"><a href="http://dark-and-cold.forumactif.com/">♕Myrddin</a></div>

<style>.endcred a {text-align:center;font-size:11px;color:darkgrey;margin-top:-15px;}.lefond{width:450px; height:700px; background-color: black; margin:0 auto;}.titre{margin-bottom: 50px;color:white; font-size:35px; font-family:'Kaushan Script'; text-align:center; position:relative; top:20px;}.subtitle{width:400px; height:100px; background-color:darkgrey; margin:0 auto; margin-top:15px; text-align:center; border-radius:20px 20px;}.subtitle span{color:white; font-size:25px; font-family:'Roboto Condensed'; font-style:italic; text-transform:uppercase; position:relative; top:25px;}.texteici{line-height: 13px;color:white; font-size:12px; padding:15px; position:relative; top:15px; width:380px; height:350px; text-align:justify; background-color:darkgrey; margin:0 auto; margin-top:15px; border-radius:50px 50px; overflow:auto;}.subtitlebas{width:400px; height:50px; background-color:darkgrey; margin:0 auto; margin-top:55px; text-align:center; border-radius:20px 20px;}.subtitlebas span{color:white; font-size:15px; font-family:'Times New Roman'; position:relative; top:15px;}.texteici::-webkit-scrollbar{width: 2px; height: 10px;}.texteici::-webkit-scrollbar-thumb:vertical{height: 30px; -webkit-border-radius: 10px; background-color: white;}.texteici::-webkit-scrollbar-thumb:horizontal{height: 30px; -webkit-border-radius: 10px; background-color: darkgrey;}</style>

Bonsoir @Myrddin,

C'est une belle fiche que nous a faite, bravo ♡

Ton HTML est parfait, j'ai juste quelques remarques sur le CSS.

Code:

.endcred {
 color: darkgrey;
 }

Le crédit contient un lien plutôt qu'un texte donc pour appliquer une couleur à la description, il faut sélectionner le lien ".endcred a"

Attention au CSS lié à la scrollbar qui est général, et donc sera appliqué à toute la page et non seulement à ta fiche. Il faut plutôt mettre ".texteici::-webkit-scrollbar" comme sélecteur.

Voilà c'est tout

Bonjour bon ba du coup, je me lance aussi. J'espère pas avoir fait trop de bêtise. Merci en tout cas pour cet exercice .

Code:

 <div style=" background: black; width: 500px; height: 450px">
    <h1 style="color: white; text-align: center;font-family: 'Courgette';"> Il était une fois </h1>
         <h2 style="color: white; text-align: center; background: grey; border-radius: 20px; margin-left:100px;margin-right:100px; margin-top: 5px; font-family: 'Courgette'; font-size: 28px; ">Une histoire</h2>
    <div style="background: grey; width: 300px; height: 150px; margin-left: 100px; margin-right: 20px; margin-top:25px; border-radius: 20px; padding-top: 50px; font-size: 25px; overflow: auto;text-align:center; color: white; font-weight: bold; font-family: 'Courgette'"> Description </div>
   <div style="background: grey; width: 300px; height: 50px; margin-top: 25px;margin-left: 100px; color: white; border-radius: 20px; text-align:center; padding-top:10px; font-weight: bold;font-family: 'Courgette';"> blabla <a href="http://epicode.variousforum.com/" target "_blank" style="color:white";>Lien</a>
  </div>
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">


@Belonne Bonjour,
Oui tu as fais plein de bêtises /PAF
Je plaisante, ton code est bon, bravo !
Voici néanmoins quelques petites remarques.

D'abord, tu as oublié de fermer la div parente :) il manque donc un /div à la fin avant le lien de la police.
En parlant de lien, il te manque un petit = après target (target="_blank")

Ma dernière remarque concerne le titre h1. Ce n'est pas nécessaire mais c'est une information en plus qui peut te servir après. D'ailleurs j'ai fait la même remarque à Astriones un peu plus haut.
Donc plutôt que de mettre.

Code:

margin-left: 100px; margin-right: 100px;

Tu peux définir une largeur au contenu, et mettre un margin auto pour centrer ton bloc.

Code:

width: 300px; margin: auto;

D'ailleurs ça te permet d'être sûre que ton titre et le bloc description en bas ont la même largeur.

D'accord, je note tout ça du coup, merci pour les corrections et les conseils

Je vous en prie ♡

De tous les exercices proposés, c'est celui qui me parait être le plus facile, alors j'ai tenté quelque chose. Voila mon code :

Code:

<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Patrick+Hand" rel="stylesheet">  <div style="background-color:black; padding-top:60px; padding-bottom:30px; text-align:center; color:white;"><div style="font-family: 'Indie Flower'; font-size:60px;">Blblbl voila le titre</div><div style="background-color:darkgrey; padding:10px; font-size:35px; font-family: 'Indie Flower'; width:320px; margin:auto; margin-top:15px; border-radius:40px;">et puis ici c'est le titre secondaire</div><div style="background-color:darkgrey; padding:30px; font-size:16px; font-family: 'Patrick Hand'; width:350px; height:350px; overflow:auto; margin:auto; margin-top:40px; margin-bottom:25px; border-radius:40px; text-align:justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus lectus, dignissim a fermentum vel, dictum id magna. Praesent varius, mi sit amet laoreet gravida, augue eros faucibus urna, hendrerit euismod quam mauris nec purus. Donec sed bibendum tortor. Donec sed luctus mi. Quisque porta felis dui. Pellentesque risus nibh, consequat ac luctus at, tempor tincidunt sem. Vivamus id pulvinar felis.

Suspendisse sagittis porttitor lobortis. Donec bibendum semper eros eu volutpat. Praesent efficitur nulla dolor, vel rutrum mauris cursus ac. Aliquam maximus varius tincidunt. Fusce vel leo ex. Etiam faucibus dolor non nulla finibus ultricies. Morbi volutpat imperdiet lacus, non varius felis luctus et. Proin sed elementum felis. Donec consectetur facilisis sem, pharetra gravida purus porttitor sit amet. Nullam sollicitudin ultricies ullamcorper. Etiam at est in lectus iaculis scelerisque. Cras fringilla porta massa, in ornare metus porta eget. Aliquam placerat eu libero quis aliquam.

Mauris cursus, dui vel efficitur tempor, diam magna mollis purus, nec tincidunt erat massa sit amet dolor. Ut quis volutpat ligula. Donec in porttitor nibh. Curabitur consequat hendrerit diam quis rhoncus. Donec eu fringilla sem. Aliquam lacinia sed dui sit amet sollicitudin. Nullam finibus leo ac gravida imperdiet. Mauris ac hendrerit justo. Nunc lorem ligula, efficitur vel nisl quis, consequat tincidunt augue. Ut egestas diam quis lorem laoreet laoreet. Sed feugiat massa ut sapien pulvinar venenatis. Nunc at nulla velit.</div><div style="background-color:darkgrey; padding:5px; font-size:13px; font-family: 'Verdana'; width:250px; margin:auto; border-radius:20px;"><a href="http://epicode.variousforum.com/" target="_blank" style="color:grey;">Tigrlion | Epicode</a></div></div>

Coucou miaouss, @Tigrlion

Ton code est correct, félicitations

Woooh, c'est vrai ? Y a rien à en redire ?? Brrr faut pas me dire ça moi, je vais être beaucoup trop fière et heureuse !
Merci ! Je fonce tenter de m'attaquer à plus compliqué alors !

Tu as tout à fait le droit d'être fière puisque c'est tout bon x)
Techniquement ton code est correct mais si tu veux vraiment mon avis, la seule petite chose que je peux te dire et ça reste mon avis : tu aurais pu utiliser des balises sémantiques plutôt que des div. C'est à dire h pour les titres, p pour le paragraphe etc.

J'ai un peu de mal avec ces balises là, j'obtiens pas ce que je veux quand j’essaie de les utiliser, je dois pas faire comme il faut... Ça change quoi concrètement par rapport aux div ? Je suppose qu'il y a un tuto sur ça, je vais essayer de me renseigner... Merci !

Disons qu'on remarque moins la différence si on utilise le CSS.
Par défaut la balise h1 par exemple affichera un titre de grande taille et en gras. la balise p génère un espace avant et après le paragraphe. Par contre par défaut la div nous affichera du texte normal à taille régulière et donc sans CSS on ne saura différencier un titre d'un paragraphe.
De plus les balise sémantiques décrivent leur contenu. Pour une personne qui va lire ton code ou toi-même si tu veux le modifier un peu plus tard, tu peux facilement repérer un titre, un sous-titre, une citation ou un paragraphe etc. Avec des div ça sera le bazar et toi ou la personne qui lit ton code va galérer pour s'y retrouver.

Motivation quand tu nous tiens
Voici donc mon troisième exercice...

HTML:

CSS:

Et toujours l'aperçu du code

@Meiywa

Bonjour,

Ton rendu est joli et fidèle au modèle de l'exercice, félicitations.

La première chose qu'on remarque c'est l'utilisation des id tout au long du code. Les sélecteurs CSS ont une certaine hiérarchie de spécificité. Sache que le sélecteur le moins spécifique est la balise, puis la classe et finalement l'id. Donc Le CSS de l'id peut écraser celui de la classe et le CSS de la classe peut écraser celui de la balise. C'est pourquoi les classes sont réutilisables autant de fois que nécessaire par contre les id sont très spécifiques et donc uniques et ne doivent figurer que sur un seul élément.

Dans la logique où ton code sera utiliser sur un forum, le code d'une fiche ou d'un message rp sera réutiliser dans les messages. Or l'id est un élément unique qui ne devrait figurer d'une seule fois sur une page HTML. C'est pourquoi, il sera préférable d'utiliser directement le nom des balises si c'est possible et sinon des classes plutôt.

Dans la même optique, tu aurais pu éviter de nommer description et utiliser simplement la balise p de cette façon : .presentation p {...}

Dans titre2 je vois la propriété opacity qui est mal orthographiée, tu as oublié un a.

Concernant les marges tu as :

Code:

#description {
  margin: auto;
  margin-top: 50px;
}

La propriété margin est supposée être un raccourci des 4 marges. Ici tu as la marge droite et gauche en auto, la marge haute à 50px et la marge basse à 0. Le raccourci ressemblera donc à ça :

Code:

#description {
  margin: 50px auto 0;
}

Ma dernière remarque concerne la propriété line-height. Je suis contente de voir que tu connais cette propriété par contre à 12px je trouve que ton texte est très encombré, j'aurais mis 16px ou 18px au moins. Ta font est à 15px donc une hauteur inférieure à 15px risque de rendre la lecture assez difficile et le rendu inesthétique. ça peut être acceptable pour un titre ou une citation mais pas tout le paragraphe si tu vois ce que je veux dire.

Sinon il manque juste un point virgule à la fin dans copyright / copyright a. Et juste au cas où tu ne connais pas, tu peux enlever le soulignement des liens via la propriété text-decoration : none;

En espérant que ça t'aide à progresser, bon courage !

Grand merci pour toutes ses précisions :D Je vais tenté d'appliquer tout ça au prochain ego (a)