avatar
Sexe : Féminin
Date d'inscription : 16/02/2016
Messages : 683

Fiche Membre
Lots gagnés:
Codeur
Voir le profil de l'utilisateurhttp://lgdcnocturnalterrors.f-orum.com/
# [Facile] Fiche #3 - Izusale Lun 18 Avr 2016 - 12:37
Hey ! Si je poste ici c'est pour vous proposer un schéma  d'une fiche plus ou moins complexe. Voici le schéma !





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




Merci Boraaaaaaaaaaaaaaa
Mes cadeaux de ouf:




avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3811

Fiche Membre
Lots gagnés:
Administratrice - Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: [Facile] Fiche #3 - Izusale Lun 18 Avr 2016 - 12:41
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
avatar
Sexe : Féminin
Date d'inscription : 26/12/2013
Messages : 2933

Fiche Membre
Lots gagnés:
Very Important People
Voir le profil de l'utilisateur
# Re: [Facile] Fiche #3 - Izusale Ven 13 Mai 2016 - 18:22
Étant du même avis que Cheshire, je me permet donc de modifier le titre de ton schéma.
avatar
Sexe : Féminin
Date d'inscription : 08/01/2017
Messages : 58

Fiche Membre
Lots gagnés:
Newbie
Voir le profil de l'utilisateur
# Re: [Facile] Fiche #3 - Izusale Jeu 24 Aoû 2017 - 17:11
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!


avatar
Sexe : Féminin
Date d'inscription : 31/10/2013
Messages : 2924

Fiche Membre
Lots gagnés:
Modératrice - Maxi-codeur
Voir le profil de l'utilisateur
# Re: [Facile] Fiche #3 - Izusale Jeu 24 Aoû 2017 - 19:38
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


< I would love to [change] the world, but they won't give me the source {code}… >
avatar
Sexe : Féminin
Date d'inscription : 08/01/2017
Messages : 58

Fiche Membre
Lots gagnés:
Newbie
Voir le profil de l'utilisateur
# Re: [Facile] Fiche #3 - Izusale Jeu 24 Aoû 2017 - 20:00
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
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3811

Fiche Membre
Lots gagnés:
Administratrice - Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: [Facile] Fiche #3 - Izusale Mar 5 Sep 2017 - 12:27
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 :)
avatar
Sexe : Féminin
Date d'inscription : 01/10/2017
Messages : 194
Membre timide
Voir le profil de l'utilisateur
# Re: [Facile] Fiche #3 - Izusale Dim 1 Oct 2017 - 18:43
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.bbactif.com/" target="_blank">©️ Astriones</a></div></div>
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 707

Fiche Membre
Lots gagnés:
Maxi-Codeur en stage
Voir le profil de l'utilisateur
# Re: [Facile] Fiche #3 - Izusale Jeu 12 Oct 2017 - 19:46
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.bbactif.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




Merci à Aed pour la zoulie signa ♥️ Et à Bora. pour le beau vava ♥️


Merci à Eskimo pour le joli vava :
Spoiler:
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 731

Fiche Membre
Lots gagnés:
Accro au forum
Voir le profil de l'utilisateurhttp://dark-and-cold.forumactif.com/
# Re: [Facile] Fiche #3 - Izusale Sam 14 Oct 2017 - 0:41
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{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;}::-webkit-scrollbar{width: 2px; height: 10px;}::-webkit-scrollbar-thumb:vertical{height: 30px; -webkit-border-radius: 10px; background-color: white;}::-webkit-scrollbar-thumb:horizontal{height: 30px; -webkit-border-radius: 10px; background-color: darkgrey;}</style>

avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 707

Fiche Membre
Lots gagnés:
Maxi-Codeur en stage
Voir le profil de l'utilisateur
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



Merci à Aed pour la zoulie signa ♥️ Et à Bora. pour le beau vava ♥️


Merci à Eskimo pour le joli vava :
Spoiler:
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum