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 : -20%
Super Mario 3D-All Stars – Jeu Nintendo Switch
Voir le deal
35.99 €

Aller en bas
Izusa
Izusa
Ancien.ne du staff
  • Date d'inscription : 16/02/2016
  • Messages : 1236
Hey ! Si je poste ici c'est pour vous proposer un schéma  d'une fiche plus ou moins complexe. Voici le schéma !

[Facile] Exercice 3 - Fiche - Izusa Sans_t10



Explication :
Base sur page noire puis création de trois surface grises. Ensuite il faut un titre, un titre secondaire, un bloc description avec overflow puis en bas, Un mot  qui, quand on clique, nous dirige vers une autre page. En gros, un mot lien.

Bonne chance à vous ! :D
_______________
Lun 18 Avr 2016 - 12:37
Cheshire Cat
Cheshire Cat
Vieille admin - Briseuse de nuques
  • Date d'inscription : 15/12/2012
  • Messages : 4814
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 Coeur 2
_______________
Lun 18 Avr 2016 - 12:41
Azalée
Azalée
Accro au forum
  • Date d'inscription : 26/12/2013
  • Messages : 4200
Étant du même avis que Cheshire, je me permet donc de modifier le titre de ton schéma.
_______________
Ven 13 Mai 2016 - 18:22
Dorea McH
Dorea McH
Membre timide
  • Date d'inscription : 08/01/2017
  • Messages : 182
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!


_______________
Jeu 24 Aoû 2017 - 17:11
Jamy
Jamy
Very Important People
  • Date d'inscription : 31/10/2013
  • Messages : 2717
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
_______________
Jeu 24 Aoû 2017 - 19:38
Dorea McH
Dorea McH
Membre timide
  • Date d'inscription : 08/01/2017
  • Messages : 182
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
_______________
Jeu 24 Aoû 2017 - 20:00
Cheshire Cat
Cheshire Cat
Vieille admin - Briseuse de nuques
  • Date d'inscription : 15/12/2012
  • Messages : 4814
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 :)
_______________
Mar 5 Sep 2017 - 12:27
Invité
Anonymous
Invité
    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>
    _______________
    Dim 1 Oct 2017 - 18:43
    Reine des Ténèbres
    Reine des Ténèbres
    Ancien.ne du staff
    • Date d'inscription : 15/08/2017
    • Messages : 3183
    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

    _______________
    Jeu 12 Oct 2017 - 19:46
    Jawn
    Jawn
    Ancien.ne du staff
    • Date d'inscription : 24/03/2016
    • Messages : 3494
    J'me permets de tester moi aussi o/ !
    J'suis pas experte mais bon, j'espère que c'est réussi [Facile] Exercice 3 - Fiche - Izusa 2691722282

    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>

    [Facile] Exercice 3 - Fiche - Izusa 3775839356
    _______________
    Sam 14 Oct 2017 - 0:41
    Reine des Ténèbres
    Reine des Ténèbres
    Ancien.ne du staff
    • Date d'inscription : 15/08/2017
    • Messages : 3183
    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 [Facile] Exercice 3 - Fiche - Izusa 3775839356
    _______________
    Mer 18 Oct 2017 - 18:20
    Belonne
    Belonne
    Membre timide
    • Date d'inscription : 17/10/2017
    • Messages : 152
    Bonjour plz 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 [Facile] Exercice 3 - Fiche - Izusa 3775839356 .

    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">
    _______________
    Jeu 19 Oct 2017 - 10:41
    Reine des Ténèbres
    Reine des Ténèbres
    Ancien.ne du staff
    • Date d'inscription : 15/08/2017
    • Messages : 3183
    @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.
    _______________
    Jeu 19 Oct 2017 - 11:57
    Belonne
    Belonne
    Membre timide
    • Date d'inscription : 17/10/2017
    • Messages : 152
    D'accord, je note tout ça du coup, merci pour les corrections et les conseils [Facile] Exercice 3 - Fiche - Izusa 3488708190
    _______________
    Jeu 19 Oct 2017 - 12:18
    Jawn
    Jawn
    Ancien.ne du staff
    • Date d'inscription : 24/03/2016
    • Messages : 3494
    Ahw merci pour la petite correction ! C'est modifié du coup, histoire que ça reste clair ♥️ !
    J'avais pas pensé au
    .endcred a {
    }
    En effet ><' ! Rahw, j'vais le retenir maintenant xD !
    _______________
    Jeu 19 Oct 2017 - 12:22
    Reine des Ténèbres
    Reine des Ténèbres
    Ancien.ne du staff
    • Date d'inscription : 15/08/2017
    • Messages : 3183
    Je vous en prie ♡
    _______________
    Jeu 19 Oct 2017 - 12:46
    Tigrlion
    Tigrlion
    Fidèle au poste !
    • Date d'inscription : 22/11/2017
    • Messages : 309
    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>
    _______________
    Jeu 23 Nov 2017 - 20:16
    Reine des Ténèbres
    Reine des Ténèbres
    Ancien.ne du staff
    • Date d'inscription : 15/08/2017
    • Messages : 3183
    Coucou miaouss, @Tigrlion

    Ton code est correct, félicitations [Facile] Exercice 3 - Fiche - Izusa 3775839356
    _______________
    Ven 24 Nov 2017 - 18:10
    Tigrlion
    Tigrlion
    Fidèle au poste !
    • Date d'inscription : 22/11/2017
    • Messages : 309
    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 ! dance
    Merci ! Je fonce tenter de m'attaquer à plus compliqué alors !
    _______________
    Ven 24 Nov 2017 - 19:55
    Reine des Ténèbres
    Reine des Ténèbres
    Ancien.ne du staff
    • Date d'inscription : 15/08/2017
    • Messages : 3183
    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.
    _______________
    Sam 25 Nov 2017 - 0:07
    Tigrlion
    Tigrlion
    Fidèle au poste !
    • Date d'inscription : 22/11/2017
    • Messages : 309
    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 !
    _______________
    Sam 25 Nov 2017 - 0:40
    Reine des Ténèbres
    Reine des Ténèbres
    Ancien.ne du staff
    • Date d'inscription : 15/08/2017
    • Messages : 3183
    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.
    _______________
    Sam 25 Nov 2017 - 1:26
    Meiywa
    Meiywa
    Newbie
    • Date d'inscription : 19/01/2018
    • Messages : 43
    Motivation quand tu nous tiens [Facile] Exercice 3 - Fiche - Izusa 3775839356
    Voici donc mon troisième exercice...

    HTML:
    Code:
    <div id="presentation">
      <div id="titre">Titre</div>
      <div id="titre2">Second titre</div>
      <p id="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat magna at aliquam bibendum. Maecenas tempor semper libero. Vivamus id dapibus sem, non aliquet justo. Quisque tellus lectus, sagittis quis nibh quis, tristique faucibus libero. Aliquam quis odio tortor. Nunc vitae massa consequat, consequat quam at, venenatis turpis. Nulla augue felis, porttitor in aliquet eu, mattis quis ipsum.

    Aenean cursus porta arcu, vitae elementum dui accumsan vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis molestie semper enim, a accumsan velit sodales ac. Cras at cursus nunc, et tristique neque. Maecenas quis nunc ullamcorper, porttitor ex sit amet, aliquam turpis. Nullam risus ligula, aliquam nec felis nec, aliquam consequat lectus. Aliquam libero dui, tincidunt nec consectetur non, porttitor quis augue. Phasellus nec nisi a purus molestie ultricies ac id lacus. Maecenas id nibh semper, vehicula mauris vitae, ultrices erat.</p>
      <p id="copyright">by meiywa pour <a href="http://epicode.variousforum.com">epicode</a></p>
    </div>
    CSS:
    Code:
    #presentation {
      background-color: black;
      border-radius: 30px;
      height: 600px;
      width: 400px;
      margin: auto;
    }

    #titre {
      text-align: center;
      font-size: 70px;
      color: white;
    }

    #titre2 {
      background-color: grey;
      opcity: 0.5;
      text-align: center;
      width: 200px;
      margin: auto;
      padding: 5px;
      border-radius: 5px;
      margin-top: 50px;
      color: white;
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    #description {
      text-align: justify;
      margin: auto;
      color: white;
      width: 300px;
      background-color: grey;
      padding: 10px;
      height: 250px;
      overflow: auto;
      margin-top: 50px;
      font-size: 15px;
      line-height: 12px;
    }

    #copyright {
      text-align: center;
      color: white;
      font-size: 10px;
      margin-top: 50px
    }

    #copyright a {
      color: white;
      font-size: 10px;
      margin-top: 50px
    }

    Et toujours l'aperçu du code [Facile] Exercice 3 - Fiche - Izusa 1066248963
    _______________
    Lun 29 Jan 2018 - 23:16
    Reine des Ténèbres
    Reine des Ténèbres
    Ancien.ne du staff
    • Date d'inscription : 15/08/2017
    • Messages : 3183
    @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 !
    _______________
    Mer 31 Jan 2018 - 14:36
    Meiywa
    Meiywa
    Newbie
    • Date d'inscription : 19/01/2018
    • Messages : 43
    Grand merci pour toutes ses précisions :D Je vais tenté d'appliquer tout ça au prochain ego (a)
    _______________
    Ven 2 Fév 2018 - 15:06
    Contenu sponsorisé
      _______________
      Revenir en haut