‫OK, nous allons donc commencer et je vais juste ouvrir le projet final ici au cas où nous
‫aurions besoin de faire référence et nous allons commencer essentiellement de haut en bas.
‫Je veux d'abord faire toute l'image du héros et la barre de navigation.
‫Nous allons donc faire le HTML pour cela, puis nous passerons au style, puis nous passerons à la section
‫par section.
‫Je vais donc ouvrir le code et j'ai déjà toutes les images ici et vous pouvez les obtenir dans les ressources de
‫la section et vous pouvez voir que je les ai toutes dans des catégories.
‫Donc, si les images du blog, les cas, les images de la maison, l'équipe et nous avons ici un PMG Babakhan que nous
‫allons implémenter plus tard, nous allons en fait le convertir en un fichier d'icônes et l'utiliser comme
‫notre fabrication .
‫Alors allons-y et créons dans le Root Here Index HTML, qui est évidemment notre page d'accueil, notre page de
‫destination principale.
‫Et puis créons aussi les autres pages de courrier électronique plus tard.
‫Créons le dossier CSFs et à l'intérieur, créerons un accès par point de style.
‫Maintenant, comme je l'ai dit dans l'intro, nous allons utiliser beaucoup de classes utilitaires comme quatre boutons et des
‫arrière-plans et des trucs comme ça, presque comme un framework intégré.
‫Nous pouvons donc simplement lancer ces classes là où nous en avons besoin.
‫Je vais donc devoir utiliser des feuilles de style.
‫Je vais en créer un autre appelé utilitaires dot success et des classes qui seront réutilisées en tant qu'utilitaires iront ici pour, vous
‫savez, des boutons, des antécédents fiscaux, des trucs comme ça.
‫OK, nous devrons donc accéder aux fichiers.
‫Maintenant, créons un passe-partout dans notre HTML.
‫Alors entrez un point d'exclamation et disons bienvenue à EDG Ledger pour notre titre.
‫Et puis nous voulons lier nos deux feuilles de style.
‫Maintenant, l'accès aux utilitaires.
‫Nous voulons mettre d'abord, puis en dessous, l'accès au style principal.
‫De cette façon, si nous devons écraser l'un des styles utilitaires, nous pouvons le faire dans notre accès au style.
‫Maintenant, nous allons également utiliser la police.
‫Impressionnant.
‫Donc, nous voulons m'utiliser quand je saisis ça très rapidement, je vais aller à CDN News. com et recherchez simplement la police et
‫saisissez-la ici, cliquez sur la version CSF et saisissez le lien pour tous les fichiers d'accès de Dortmund.
‫Donc, si nous disons copier le lien, marquer, copier cela, nous pouvons fermer cela, puis coller cela directement dans la tête et
‫nous devrions être prêts pour le moment aussi loin que la tête va.
‫Donc, pour le corps, nous allons avoir une balise d'en-tête H HTML5 et je vais lui donner une classe de héros.
‫Il s'agit donc essentiellement de tout, vous savez, tout ce qui se trouve au-dessus du pli, l'image principale et la
‫barre de navigation seront dans l'en-tête.
‫Créons donc un div avec la classe de barre de navigation nous donnera également un identifiant car nous en aurons besoin pour
‫le peu de JavaScript que nous ajouterons plus tard.
‫Je veux dire que nous pourrions utiliser une classe, mais quand, lorsque je prends des éléments du DOM en utilisant JavaScript, j'aime
‫utiliser un ID.
‫Donc ici, nous voulons notre logo.
‫Ce sera donc un H1.
‫Je vais lui donner une classe de logo et nous allons avoir notre icône géniale de police de police ici pour notre logo.
‫Alors Fayaz Et puis faisons un tableau de bord, ouvrez le tableau de bord et puis juste un grand livre d'espace et de bord.
‫OK, maintenant je veux avoir l'icône ou le logo et le mot edge.
‫Je veux que ceux-ci soient verts comme vous pouvez le voir ici.
‫Nous allons donc utiliser une classe utilitaire appelée Text Primary qui sera créée plus tard.
‫Alors entourons ça d'un intervalle, d'accord ?
‫Nous voulons absolument utiliser un spin car si nous utilisons un div, qui est un élément de niveau bloc, le mot ledger va
‫être mis sur la ligne suivante et nous ne le voulons pas.
‫Donc, la durée que je vais donner à une classe de texte primaire et c'est notre logo.
‫Donc, sous l'un, nous allons avoir un NAV avec le U. S. et avoir nos éléments de liste avec des liens et ceux-ci vont
‫juste aller aux zones de la page.
‫Donc, si nous faisons du hachage à la maison ou pas de signe à la maison, cela va aller à une idée de la maison sur la page.
‫OK, alors restez chez vous.
‫Et je veux vraiment que ça aille au sommet.
‫Je vais donc donner au corps une idée de son chez-soi et ensuite nous allons simplement aller de l'avant et copier cela.
‫Nous voulons cinq liens.
‫Donc après la maison nous aurons environ et nous voulons que cela aille à l'idée d'un bateau.
‫Ensuite, nous aurons des cas.
‫Sous les cas, il y aura la section blog, qui ira sur le blog d'idées et ensuite nous aurons
‫le contact.
‫OK, donc c'est tout pour le Navar maintenant en ce qui concerne le contenu dans l'en-tête, comme vous le savez, le ciel est le cap limite et
‫tout ça, ça va aller sous cette barre de navigation d'Hiv.
‫Nous voulons donc aller en dessous et avoir une classe de contenu.
‫Et ici, notre H1 dira que le ciel est la limite et nous ferons un paragraphe ici.
‫Et disons que nous fournissons une aide financière de classe mondiale et ensuite, en dessous, nous
‫aurons un lien sous la forme d'un bouton.
‫Ce sera donc dans une balise, mais donnons-lui une classe de BTN.
‫Et cela va juste aller à la section à propos et nous dirons lire la suite.
‫Mettons en fait une icône ici, cependant.
‫Je vais donc mettre un eye tag avec la classe des FARC puis un Chevron.
‫Alors c'est quoi?
‫F un tableau de bord Chevron Dash.
‫Droit.
‫Nous allons donc simplement mettre cette petite icône là-dedans et cela devrait être aussi loin que le HTML afin que nous puissions
‫l'ouvrir avec le serveur live.
‫OK, c'est à ça que ça va ressembler maintenant, ce qui n'a pas
‫l'air très bien, donc nous allons sauter dans l'accès à l'accès au style et nous allons commencer avec juste les styles de base comme le,
‫vous savez , le corps, la longueur, des trucs comme ça, des styles fondamentalement globaux.
‫Nous allons maintenant utiliser la police open sans.
‫Nous voulons donc aller en France point Google point com et cherchons Open Sans, qui est juste ici, et je
‫vais prendre le feu 300.
‫Sélectionnez donc le style, puis le 400 normal.
‫Et puis ici, nous pouvons cliquer sur Intégrer et vous pouvez soit saisir le lien et le mettre dans votre
‫code HTML, soit dans l'importation, ce que je vais faire, puis prendre cette importation et la copier, puis nous la mettrons dans
‫notre feuille de style.
‫OK, alors ajoutons quelques styles de base ici.
‫Nous voulons donc ajouter une bordure de dimensionnement de boîte sur tout afin que la largeur ne prenne pas, vous savez, le rembourrage ne prend
‫pas la largeur.
‫Nous voulons juste réinitialiser le rembourrage dans la marge.
‫Nous allons donc mettre les deux à zéro sur tout.
‫Et puis pour le corps, ajoutons la famille de polices, qui sera ouverte sans et sans empattement, et pour que
‫l'arrière-plan le rende blanc par défaut et la couleur du texte sera gris foncé, presque noir.
‫Et puis j'aime faire une hauteur de ligne d'un virgule cinq, un virgule six pour le corps et
‫ensuite pour l'ULS.
‫Je veux Je ne veux pas de puces.
‫Nous voulons donc définir le style de liste sur aucun et sur les liens.
‫Nous allons donc simplement créer la couleur par défaut en gris foncé, puis supprimer le soulignement avec la décoration de texte.
‫Rien.
‫OK, donc cela s'applique à tous les liens, puis aux uns et aux deux.
‫Donc gros titres.
‫Je veux en faire un poids de police léger.
‫Nous allons donc définir cela à trois cents et ensuite je vais simplement réduire la hauteur de ligne pour les titres,
‫les grands titres.
‫Nous ferons un point deux de cette façon s'ils s'étendent sur plusieurs lignes, les mots ne sont pas trop éloignés verticalement.
‫Et puis pour le paragraphe, rappelez-vous que nous avons supprimé toutes les marges.
‫Je vais donc ajouter dix pixels en haut et en bas, puis des images.
‫Je veux avoir une largeur de cent pour cent de leur conteneur par défaut.
‫Ce sont donc les styles de base.
‫Maintenant, nous voulons faire la barre de navigation, nous allons donc le faire ici.
‫Mais je veux ajouter les classes de texte.
‫Nous avons cette classe primaire de texte pour nos utilitaires.
‫Mettons donc simplement un commentaire ici et disons que les styles de texte sont des couleurs de texte et que nous avons le texte principal.
‫Donc ça va juste avoir une couleur.
‫Ce sera notre couleur verte, qui est hexadécimale à huit, sept, quatre ou cinq.
‫Ce sera cette couleur.
‫Et puis nous aurons également un texte secondaire, qui sera de couleur bleue.
‫Nous allons donc définir cela sur zéro hexadécimal deux huit quatre zéro, et ce sera notre secondaire.
‫Alors maintenant, si nous jetons un œil ici, vous pouvez voir que nous avons maintenant ce vert pour la barre de navigation.
‫Nous voulons nous rappeler que la barre maintenant contient deux éléments.
‫Il a le H1 et il a le U. S. Alors on veut ça.
‫Voulons-nous définir cela sur une boîte flexible ?
‫Parce que nous voulons que ceux-ci s'alignent et nous voulons le U. S. être loin d'ici.
‫Désormais, les Émirats arabes unis eux-mêmes seront également une boîte flexible afin que ces éléments de liste puissent, vous le savez, également flotter
‫horizontalement.
‫Passons donc à notre accès au style et mettons simplement un commentaire ici, disons barre de navigation.
‫Donc, la barre maintenant est, comme je l'ai dit, une boîte flexible.
‫Nous voulons donc définir la propriété display sur flex et alignons tout puisque c'est une ligne, un élément
‫de ligne fait l'axe transversal, qui va être vertical.
‫Nous voulons donc aligner le centre.
‫Et puis, en ce qui concerne la justification du contenu, qui s'aligne sur l'axe principal, nous allons le définir sur un espace entre
‫parce que nous voulons que le H1 soit d'un côté et que le U soit de l'autre.
‫Donc, si je continue et que je sauvegarde cela maintenant, vous pouvez voir le U. S. est loin ici et le logo est
‫ici parce que nous avons un espace entre quatre justificatifs de contenu.
‫Maintenant, autant que l'arrière-plan.
‫Donc la couleur de fond pour faire trois, trois, trois, puis la couleur sera blanche et je vais le faire
‫voir un peu à travers, en ajouter.
‫Ça va être un peu translucide.
‫Nous verrons donc cette opacité à zéro virgule huit.
‫Vous n'êtes pas obligé, mais je pense que cela lui donne un bel effet.
‫Nous voulons que la largeur soit de 100 par.
‫La hauteur envoyée sera de 70 pixels, ce qui est assez courant pour un Navar, et nous voulons le positionner.
‫Nous voulons qu'il reste au sommet.
‫Nous allons donc le positionner dans une position fixe et à partir du zéro des pixels supérieurs.
‫Donc, il sera toujours collé au sommet.
‫Et puis on veut un peu de rembourrage sur les côtés pour que tout ce qui fait que le logo et le U. S.
‫ne sont pas juste contre les côtés.
‫Nous allons donc faire 30 pixels à droite et à gauche, et cela devrait le faire pour le moment.
‫Donc si je garde ça, ça va ressembler à ça.
‫Maintenant, les liens ici, vous pouvez le voir, sont toujours verticaux.
‫Nous ne pouvons pas non plus les voir car ils sont de la même couleur que le fond.
‫Alors corrigeons ça.
‫Alors tout d'abord, disons maintenant la barre et les balises, nous allons colorer ces blancs et ensuite nous avons notre vous bien, et nous voulons afficher
‫cela en tant que flex afin que les éléments de la liste s'alignent sur une ligne.
‫Et c'est à peu près tout ce dont nous avons besoin pour le U. S. Maintenant, pour les balises, nous voulons les espacer, car si
‫nous jetons un coup d'œil, vous pouvez voir qu'elles sont toutes, vous savez, écrasées les unes contre les autres.
‫Ajoutons donc du rembourrage.
‫Je vais régler le rembourrage pour faire 10 pixels, haut et bas, 20 gauche et droite, puis aussi
‫une marge à gauche et à droite, cinq pixels et oui, ça devrait le faire.
‫Donc si on regarde ça, ça a l'air plutôt bien.
‫Maintenant, je veux avoir un effet de survol.
‫Je vais ajouter une bordure, une bordure en bas au survol.
‫Allons donc ici et disons barre de navigation et survolez et nous dirons bordure en bas.
‫Et en ce qui concerne la couleur, je vais utiliser cette même couleur primaire du Texas ici et la mettre.
‫Bien sûr, nous avons besoin de la largeur, qui sera de deux pixels et du style qui sera solide.
‫Et si nous survolons ces liens, cela ne fonctionne pas.
‫Oh, j'ai mis la barre de navigation.
‫Cependant, ce devrait être la barre de navigation, un survol et c'est parti.
‫D'accord, cool.
‫Donc je pense que c'est à peu près tout pour la barre de navigation.
‫Oh.
‫Une chose que je veux faire est de mettre un peu en gras le logo, d'augmenter un peu le poids de la police.
‫Alors disons maintenant et voulons dire que chacun a une classe de logo et je vais juste régler le poids de
‫la police de 300 à 400 et maintenant c'est un peu plus gras.
‫OK, donc dans la prochaine vidéo, nous allons continuer et faire l'image du héros.
‫Nous allons ajouter le fond.
‫Nous allons en fait utiliser un pseudo sélecteur appelé avant car vous pouvez utiliser après et avant pour créer
‫une superposition car nous ne voulons pas de l'image lumineuse.
‫Nous voulons avoir cette superposition sombre dessus.
‫Nous allons donc le faire dans la prochaine vidéo.