Créer un site Web responsive multi-pages : HTML, CSS, JavaScript (2024)

1. Introduction: Bonjour et bienvenue dans notre cours pratique Créez un site Web réactif multipage avec HTML, CSS et Javascript Je tiens à vous remercier d' choisi de vous inscrire à ce cours Si vous souhaitez vous lancer directement dans la création d'un site Web multi-pages réel, vous êtes au bon endroit tout au long de ce cours. Je serai votre guide pour créer un site Web complet, moderne et adaptable à partir de zéro en utilisant HTML, CSS et Javascript. Vous ne trouverez pas ici de longues discussions théoriques. Au lieu de cela, vous recevrez des instructions pratiques étape par étape pour vous doter des compétences nécessaires pour développer des sites Web impressionnants. Dans cette vidéo d'introduction, je vais donner un aperçu de notre projet et détailler ce que nous allons accomplir. Notre projet est conçu pour être un site Web de plusieurs pages et il s'adaptera à différentes tailles d'écran et à différents appareils. Nous allons commencer par créer un en-tête de site Web, suivi de la navigation, que vous pouvez ouvrir en cliquant sur l'icône du menu en haut à droite de la page. La navigation comprend deux parties. Nous avons l'image sur le côté gauche avec un effet de survol sympa et sympa pour le côté droit Vous pouvez également voir ici les éléments de navigation avec des effets de survol. Ensuite, nous passerons à la section À propos, qui sera ensuite suivie de la section livre. l'avenir, nous développerons une section de témoignages, puis vous trouverez ici un pied de page qui inclut la section contact En cliquant sur le lien retour en haut de page, nous accédons au bord supérieur du site Web. Comme mentionné précédemment, notre site Web est multipage et vous pouvez naviguer vers différentes pages en cliquant sur les liens dans la navigation. Vous découvrirez à propos de nous la page où nous avons l' en-tête comporte également une section d'équipe suivie du pied de page Ensuite, nous pouvons naviguer dans la section des livres, où vous pouvez trouver les différents livres avec des noms et des auteurs. La page suivante sera consacrée aux témoignages. Vous pouvez trouver ici le slider des témoignages. En cliquant sur les flèches, vous pouvez jouer le curseur. Également en bas, vous pouvez trouver les points. Et vous pouvez également jouer sur le curseur en utilisant ces points. Très bien, une fois que nous avons cliqué sur le lien d'accueil dans la navigation , le chargeur du site Web apparaîtra. Après quelques secondes, la page Web est chargée Chaque fois que vous rechargez la page, le chargeur démarre et la page s'affiche Soyez assuré que notre site Web s'adapte à différentes tailles d'écran. Si vous inspectez la page, passez en mode réactif et prévisualisez-la sur différentes tailles d'écran et sur différents appareils, vous constaterez qu' elle est adaptable. D'accord, j'aimerais noter que ce projet est conçu pour les très grands écrans avec une résolution de 1920 pixels et une hauteur de 1080 pixels. Si vous utilisez un écran plus petit. Je recommande de passer en mode réactif pendant les cours et de spécifier la hauteur maximale en conséquence. Cela garantira que les projets s'affichent au mieux sur écrans plus petits jusqu'à ce que nous les rendions entièrement réactifs. Très bien, j'espère que vous aimerez travailler sur ce projet autant que moi sans plus attendre. Commençons. 2. Configuration: Bonjour et bienvenue au cours. Nous sommes ravis de vous avoir parmi nous, et nous sommes convaincus que vous trouverez ce cours agréable. Avant de nous lancer dans notre projet, préparons d'abord notre environnement de travail. Si vous êtes déjà configuré et prêt à écrire du code, vous pouvez ignorer cette vidéo et passer directement au projet. Cependant, si vous n'êtes pas encore prêt , c'est parfaitement bien. Nous vous guiderons dans la configuration certains outils essentiels tout au long de ce cours. Vous aurez besoin de deux outils principaux. Un navigateur Web moderne et un éditeur de texte. Notre navigateur Web, j' utiliserai Google Chrome, mais je recommande également Mozilla, Firefox. Vous possédez probablement déjà ces navigateurs, mais voyons rapidement comment les télécharger. Au cas où vous souhaiteriez obtenir Google Chrome, il vous suffit de visiter cette URL et de télécharger le navigateur. Le processus d'installation est simple, nous n'y consacrerons donc pas beaucoup de temps. Pour Mozilla, Firefox, vous pouvez l'obtenir à partir de cette URL. Les deux liens seront inclus dans cette conférence pour votre commodité. Très bien, parlons maintenant de l'éditeur de texte. Nous utiliserons le code de Visual Studio qui est l'un des meilleurs éditeurs de texte disponibles aujourd'hui. Cependant, vous pouvez utiliser votre éditeur de texte préféré si vous en avez un. C'est toujours à vous de décider. Je vous recommande d'essayer le code Visual Studio , de télécharger le code Visual Studio, visiter ce site Web et sélectionner la version pour votre système d'exploitation, Windows, Mac ou Linux. Le processus d'installation de Visual Studio Code est également simple. Vous ne devriez rencontrer aucun problème. Une fois que vous aurez installé ces deux outils, vous serez prêt. Pour commencer le cours, allons-y. 3. Pour commencer: Très bien, nous sommes enfin prêts à commencer à construire notre projet. Dans cette conférence, je vais préparer notre environnement de travail, puis nous allons commencer à écrire le code. J'ai créé un nouveau dossier sur le bureau appelé site web réactif, dans lequel j'ai un dossier pour les images. Ce dossier contient toutes les images dont nous avons besoin pour notre projet. Je vais ouvrir ce dossier dans le code VS. La première chose à faire est de créer nos dossiers de travail. Nous avons besoin de trois dossiers différents, en fait, non pas des dossiers mais des fichiers. Nous avons besoin de trois dossiers. Le premier sera l'index HTML. Ensuite, nous aurons le style CSS. Enfin, je vais créer des scripts. Maintenant, je vais ouvrir un fichier HTML indexé, et nous devons créer la structure H tmall de base Pour cela, je vais utiliser met. Nous devons placer ici un point d'exclamation et appuyer sur le haut ou sur Entrée Allons-y. Nous avons ici le document HTML de base Je parle des éléments HTML de base. La première chose que je vais faire est de changer le titre. Voilà, site web adaptatif. Ensuite, nous devons lier les fichiers CSS et Javascript. Je vais ouvrir le lien Tac. Et il faut préciser ici le chemin du fichier. Dans ce cas, nous devons indiquer ici le nom du fichier car nous n' avons aucun autre dossier ici. Nous avons besoin de votre style CSS. Ensuite, je vais lier le fichier Javascript, nous devons ouvrir le script. Ensuite, dans l'attribut source, je vais spécifier le fichier, je veux dire le nom du fichier Java dont nous avons besoin ici, script JS. D'accord ? Une fois les fichiers CSS et Javesby connectés, je vais maintenant ouvrir le projet dans le navigateur Pour cela, je vais utiliser l'un des packages appelé Live Server. Vous pouvez soit cliquer ici, passer en direct, soit appuyer sur le bouton droit la souris, puis sélectionner Ouvrir avec Live Server. Maintenant, comme vous pouvez le voir, le projet est en ligne dans le navigateur. Je vais placer le navigateur et l'éditeur côte à côte. Donc, afin de rendre notre processus de travail plus pratique, si vous n'avez pas de serveur live, vous pouvez rechercher les packages ici et vous pouvez installer ce package ici. Bien, en plus de ces liens, nous devons également ajouter quelques liens différents. Parce que tout au long du projet, nous allons utiliser différents téléphones et icônes. Je vais créer un lien pour les téléphones Google, nous allons utiliser plusieurs téléphones Google différents. Allons-y et recherchons les téléphones Google. Je vais visiter ce lien ici. Le premier téléphone dont nous avons besoin est quelque chose comme oh ou oh, je ne sais pas comment prononcer ce mot. Le téléphone s'appelle Kohen Script. C'est ici. Cliquons sur Obtenir le téléphone, puis revenons en arrière et recherchons un téléphone appelé Molly. Cliquons à nouveau sur Obtenir la police. La troisième police dont nous avons besoin est appelée marqueur permanent. Nous avons besoin ici d'un marqueur permanent. C'est ici. Cliquez sur Obtenir la police. Ensuite, nous devons obtenir le code Ambit. Et je vais copier ces liens à partir d'ici. Collons-le dans l'élément principal. En plus de cela, je recherche un CDN JS génial pour téléphone. Nous devons récupérer ce lien à partir d'ici. Cliquons sur cette icône, copions l'URL. Ensuite, nous devons ouvrir la balise link dans Head Elements, et je vais coller ici le CDN copié OK, je pense que c'est ça. Tout est prêt pour commencer à écrire le code pour cela. Passons à la prochaine conférence. 4. Créer un balisage HTML pour l'en-tête de site Web: Dans la conférence précédente, nous avons créé notre environnement de travail. Nous avons tout préparé pour commencer à écrire le code. Nous avons trois fichiers différents ici, des fichiers pour HTML, CSS et Ile script. Dans l'index du fichier HTML, nous avons créé la structure HTML de base avec quelques liens, des liens pour les fichiers CSS et ilescopt Nous avons également ajouté différents liens pour les téléphones et les icônes. Nous devons maintenant commencer à créer le balisage HTML pour la première section du projet Si nous examinons le projet terminé, vous verrez ici l'en-tête du site Web. Dans cette conférence, je vais créer le balisage H til pour l'en-tête du site Web Il est composé de différents éléments. Nous avons ici le logo et aussi la bannière avec quelques éléments textuels Dans cette conférence, comme je l'ai dit, je vais créer le balisage H tel Revenons au code VS et je vais créer des commentaires pour le conteneur. Je vais ouvrir une balise avec un conteneur de nom de classe. À l'intérieur du conteneur, je vais créer l'en-tête. Mais avant cela, je vais insérer des commentaires pour l'en-tête. Ouvrons la balise d'en-tête H five. Le premier élément que je vais créer dans l'en-tête sera le logo. Je vais insérer vos commentaires pour le logo, puis ouvrir la balise link. Je vais insérer ici index HTML car une fois que nous avons cliqué sur le logo, nous devons accéder à la page d'accueil. C'est pourquoi j'ai inséré ici le code HTML de l'index. Ensuite, je vais ajouter ici nom de la classe et ce sera le logo. Dans les éléments du lien, je vais insérer Span avec le lecteur de texte. OK, nous avons donc ici l' élément lien avec le lecteur de texte. C'est tout à propos du logo. Ensuite, je vais créer la bannière. Ouvrons donc le commentaire pour la bannière, nous devons ouvrir le tag avec la bannière du nom de classe à l'intérieur de la bannière. Je vais créer trois éléments de titre différents. Le premier sera le titre H trois avec le texte lu. Ensuite, je vais ouvrir les éléments de titre H 1 dans lesquels nous aurons fait tourner. Je vais insérer votre lettre O. Ensuite, je vais m'immiscer dans la ligne que nous avons ici en ligne. Mais le O est placé à l'intérieur de ce panneau car nous avons besoin de styles différents pour la première lettre de ce mot Enfin, je vais interférer avec H, quatre éléments de titre, avec la bibliothèque de livres libres de texte. OK, donc je pense que c'est ça. Tous les éléments sont créés. Pour l'en-tête du site Web, nous devons styliser ces éléments. Et pour cela, passons à la prochaine conférence. 5. En-tête de site Web Stylilng: Dans la conférence précédente, nous avons créé le balisage HTML pour l'en-tête du site Web Nous avons ici tous les différents éléments. Maintenant, comme je l'ai dit, nous devons styliser ces éléments et donner à l'en-tête du site Web son apparence. Revenons donc au code VS et au style ouvert du fichier CSS. Je vais déplacer ce fichier et le placer sur le côté droit. La première chose que je vais faire est créer des styles par défaut. Je vais insérer vos nouveaux commentaires pour les styles par défaut, puis je vais sélectionner chaque élément, et pour cela nous devons utiliser un astérisque Réglons la marge par défaut et le remplissage des deux à zéro Nous avons besoin que la marge soit nulle et que le rembourrage soit également égal à zéro. Ensuite, nous devons définir la taille de la boîte de bordure. Il s'agit d'une propriété CSS qui affecte la façon dont la taille d'un élément est calculée par défaut. Lorsque vous définissez la largeur ou la hauteur d'un élément en CSS, cela s'applique à la zone de contenu de l'élément. Cependant, avec la taille de la zone de bordure, la largeur et la hauteur que vous définissez incluent le rembourrage ainsi que la bordure de l'élément plutôt que simplement le contenu C'est pourquoi nous utilisons la zone de bordure de taille de boîte comme style par défaut. Ensuite, je vais utiliser une décoration de texte avec la valeur non. Nous n'avons pas besoin de décoration de texte pour les éléments du lien. De plus, je vais définir une limite pour non. Enfin, définissons la famille du téléphone sur chaque élément du téléphone appelé mull cursive. OK, vérifions le navigateur. Comme vous pouvez le constater, tous les fichiers par défaut sont appliqués aux éléments. Nous n'avons aucune marge ici. Et la police est également modifiée pour chaque élément. Ensuite, je vais modifier la taille de police de l'élément HTML. heure actuelle, la police de l'élément HTML est égale à 16 pixels. Tout au long de ce projet, je vais utiliser le RAM comme unité de mesure. Par défaut, un RAM est égal à 16 pixels, car comme je l'ai dit, la taille de police de l'élément HTML est égale à 16 pixels. Je veux convertir un RAM et le rendre égal à dix pixels. Pour cela, nous devons diminuer la taille de police de l'élément HTML. Sélectionnons le HTML et définissons sa taille de police à 62,5 %. À l'heure actuelle, un RAM équivaut à dix pixels Si nous vérifions le navigateur, vous constaterez que tous les éléments sont devenus plus petits. OK, je pense que c'est à propos des styles par défaut pour le moment. Ensuite, je vais personnaliser le conteneur. Je vais insérer votre nouveau commentaire pour le conteneur. Ensuite, je vais sélectionner le conteneur. Tout d'abord, je vais définir la hauteur maximale. Réglons avec 100 %. Quant à la hauteur, je vais la fixer à 100 % de hauteur de fenêtre Cela signifie que le conteneur occupera 100  % du point de vue en tant que hauteur. Ensuite, je vais changer la couleur du mécène. Utilisons la couleur 212121. Comme vous pouvez le voir, nous avons ici un conteneur avec un fond de couleur foncée. Ensuite, je vais m' occuper de l'en-tête. Insérons ici de nouveaux commentaires pour l'en-tête. Ensuite, sélectionnez les éléments d'en-tête, je vais régler à 100 %. Ensuite, je vais définir la hauteur de l'en-tête, 100 % de hauteur de la fenêtre d'affichage Je vais changer la hauteur du conteneur, faisons-le à 100 % pour que comme vous pouvez le voir, rien ne soit changé ici. Ensuite, je vais sélectionner le logo, créer commentaires non sécurisés pour logo et sélectionner un élément de lien pour le logo du nom de classe Je vais définir la position du logo, comme vous vous en souvenez. Il est placé en haut à gauche de l'en-tête. Je vais définir la position du logo. Tout d'abord, nous avons besoin ici d'une position absolue. Ensuite, afin de placer les éléments en fonction de l'en-tête, nous avons besoin de la position relative de l'en-tête. Nous pouvons maintenant définir les propriétés en haut à gauche. La première place sera donc composée de trois Ram. Pour ce qui est de la position de gauche, je vais la régler à 225 Ram. Comme vous pouvez le constater, le logo est correctement positionné. Ensuite, je vais personnaliser cet élément. Je vais sélectionner Span Elements. Souvenez-vous que nous avons une portée à l'intérieur de l'élément lien. Allons-y et sélectionnons le logo, suivi de l'élément span. Changeons la famille de téléphones. Dans ce cas, je vais utiliser un téléphone appelé marqueur permanent cursif, puis augmenter la taille de la police Il y aura sept béliers. De plus, je vais mettre la police en italique. Utilisons le style de police, mettons-le en italique et changeons également la couleur La couleur sera 32 B0ce. Il est de couleur bleue. Voici le logo. Ça a l'air plutôt sympa. La dernière chose que je vais faire concernant cet élément est d'ajouter un petit effet d'ombre. Je vais utiliser l'ombre de texte avec les valeurs 0,5 Ram, un Ram. Ensuite, la couleur de l'ombre sera noire. Nous avons besoin ici de 000. Et je vais également définir l' opacité de la couleur noire 2.2 Maintenant, le logo a des effets d'ombre et je trouve qu'il est bien plus beau OK, c'est tout à propos du logo. Ensuite, nous devons prendre soin de la bannière. Nous devons styliser les éléments pour qu'ils ressemblent. Je vais donc insérer vos nouveaux commentaires pour la bannière. Ensuite, je vais sélectionner Development, qui a une bannière de nom de classe. Je parle de cette évolution ici. Tout d'abord, définissons la position. Je vais régler la position sur absolue. Ensuite, je vais définir la bonne position. Ça va faire 20 RAM. Et nous avons également besoin d'une position inférieure. Je vais le régler sur 30 RAM. Comme vous pouvez le voir, la bannière est positionnée et elle est placée sur le côté droit. Je vais placer les éléments de texte au centre en utilisant le centre de la ligne de texte. Comme vous pouvez le constater, les éléments de texte sont placés au centre. Je vais maintenant personnaliser les éléments du titre Hone. Je parle de cet élément ici. Allons-y et sélectionnons la bannière H. Changeons la taille du téléphone. Ça va faire 15 RAM. Ensuite, je vais créer un espace entre les lettres. Allons-y donc et utilisons l'espacement des lettres avec une valeur Ram. Vérifie le navigateur. Nous avons ici l'élément de titre H one. Comme vous vous en souvenez dans la version finale, nous allons ajouter une image d'arrière-plan au titre. Allons-y et faisons-le. Pour cela, je vais utiliser plusieurs propriétés d' arrière-plan différentes. La première sera une image de fond. Nous allons définir l'URL de l'image comme vous le savez, nous avons un dossier appelé images, puis nous devons sélectionner le texte G un, la première image d'ici. Ensuite, nous avons besoin d'une autre propriété d'arrière-plan appelée taille d'arrière-plan. Je vais le régler pour couvrir. Comme vous pouvez le voir, nous avons ici une image de fond, mais ce n'est pas ce dont nous avons besoin ici. Nous devons ajouter l' image comme arrière-plan du texte et non le titre entier. Pour ce faire, nous devons utiliser propriété appelée clip d'arrière-plan avec le texte de valeur. De plus, nous avons besoin de la même propriété avec Webkit, sinon elle ne sera pas appliquée Enfin, nous devons rendre la couleur transparente. Maintenant, cela devrait fonctionner. Comme vous pouvez le voir, nous avons ici une image en arrière-plan du texte. OK, je vais ajouter un effet d' ombre au texte. Supprimons l' ombre du texte à partir d'ici. Nous devons maintenant nous occuper de la première lettre, car souvenez-vous que nous avons enveloppé la première lettre avec un élément span. Je vais sélectionner la bannière H, une, suivie de l'élément span. Je vais augmenter la taille du téléphone. Disons-le, 225. OK. Vérifie le navigateur. Comme vous pouvez le constater, la taille du téléphone de la première lettre est plus grande, mais ce n'est pas ce dont nous avons besoin. Nous allons vérifier la version finale. Nous avons ici des résultats différents. Je pense que nous avons besoin ici de la majuscule et non de la petite lettre. Utilisons ici le capital , puis vérifions le résultat. OK, maintenant on dirait qu'ils ont terminé la version. Très bien, passons donc à l'élément de titre H un. Passons à autre chose et occupons-nous du reste des rubriques. Je vais personnaliser les trois éléments du titre. Sélectionnons Banner, puis les trois éléments d'en-tête H. Je vais changer de famille de téléphones. Dans ce cas, utilisons un téléphone appelé script cursif, puis augmentons la taille du téléphone Il y aura sept Ram. Nous devons modifier le poids du téléphone. Réglons-le sur 300. Nous avons ici les trois éléments de titre H. Je vais changer la couleur du texte. Et je vais aussi le déplacer vers le bas, près des éléments de titre H. Mettons-lui la couleur. Ensuite, pour déplacer l'élément vers le bas, je vais le transformer avec la fonction de traduction. Je vais traduire x en trois RAM. Quant à la translation y, nous devons la définir sur 11 RAM. Nous déplaçons l'élément horizontalement par trois. En ce qui concerne la direction verticale, nous déplaçons l'élément de 11 RAM. Comme vous pouvez le constater, il est correctement placé. La dernière chose que j'ai à faire dans cette leçon est de personnaliser le titre, je veux dire les quatre éléments d'en-tête. Allons-y et sélectionnons la bannière suivie de l'élément de titre H quatre. Réglez la taille du téléphone sur 1,8 , puis le poids du téléphone sera de 300. De plus, je vais transformer le texte en majuscules, puis augmenter l' espace entre les lettres. Réglons l' espacement des lettres à 2,7 RAM, et enfin changeons la couleur du titre. Utilisons-le ici. La couleur bleue, je veux dire, cette couleur ici. OK, c'est ça. L'en-tête du site Web est personnalisé et je le trouve plutôt joli. Ensuite, nous devons nous occuper de la navigation. Nous devons créer la navigation, je veux dire, l'icône du menu, et aussi créer cette navigation agréable et cool ici. Pour cela, passons à la prochaine conférence. 6. Créer un balisage HTML pour la navigation: Très bien, dans la conférence précédente, nous avons personnalisé l'en-tête du site Web. Comme vous pouvez le voir, ça a l'air plutôt sympa. Maintenant, comme je l'ai dit, nous devons nous occuper de la navigation. Nous allons créer l' icône du menu ainsi que les éléments de navigation. Dans cette conférence, nous allons créer le balisage HTML Ensuite, nous personnaliserons les éléments et ferons en sorte que la navigation fonctionne en utilisant Javascript. Bien, revenons au code VS. Et dans le fichier HTML juste après le conteneur, je vais insérer de nouveaux commentaires pour la navigation. Ensuite, dans Commons, je vais ouvrir la balise div, qui sera une icône de menu. L'icône du menu sera composée de trois lignes différentes. Par conséquent, je vais vous insérer trois balises P. Nous avons besoin des noms de classes, la première ligne et de la première ligne. Le premier cours sera utilisé pour le style courant. Quant à la deuxième classe, nous l'utiliserons pour un style individuel. Comme je l'ai dit, nous avons besoin de trois lignes. Par conséquent, je vais dupliquer cette ligne de code, puis modifier les noms de classe. Nous avons besoin des lignes deux et trois. Bien, après cela, je vais créer les éléments de navigation. Tout d'abord, je vais ajouter ici des commentaires pour l'icône du menu. Ensuite, nous avons besoin de l'icône du menu. Ensuite, je vais réinsérer nouveaux commentaires pour les éléments de navigation. Ouvrons HTML Five. Maintenant, balisez avec le nom de la classe de navigation. Ensuite, je vais insérer une balise avec le nom de la classe à gauche. Cet élément inclura l'image qui est placée sur le côté gauche de la navigation. Je parle ici de cette image qui a un effet de survol agréable et cool Allons-y et insérons ici l'image. Je vais sélectionner une image dans le dossier des images. Dans ce cas, nous avons besoin du livre JPG. Asseyons-nous sur le côté gauche. Allons-y et créons le bon côté. Nous avons besoin d'être au courant de ce qui n'est pas une bonne évolution. Je vais insérer une autre profondeur, qui ne comportera aucun objet. Ensuite, nous aurons cinq éléments de navigation différents. Nous devons ouvrir le link tag, je vais insérer votre page d'accueil. Le premier élément de lien sera différent des autres éléments de lien. Ouvrons un élément, puis à l'intérieur de l'élément lien, je vais insérer une plage portant le numéro 01. Ensuite, nous avons besoin de dupliquer cette ligne de code quatre fois. En fait, trois fois, car au total, nous avons besoin quatre éléments avec des éléments d'envergure. Le deuxième élément de lien sera constitué de livres. Ensuite, nous aurons le troisième élément, et ce seront les témoignages Enfin, nous avons besoin d'un contact. D'accord ? Cela concerne donc le balisage HTML Je pense que tout est créé. Vérifions-le dans le navigateur. Nous avons ici l'image et les éléments de navigation. Pour le moment, nous n'avons que le balisage HTML. C'est pourquoi les éléments semblent mauvais. Pour résoudre ce problème, passons à la prochaine conférence. 7. Icône de menu stylistique: Dans le cours précédent, nous avons créé le balisage HTML de la navigation. Pour le moment, nous n'avons ici que les éléments sans aucun style, et ils ont l'air plutôt moches. Nous devons en tenir compte dans cette conférence. Je vais personnaliser l'icône du menu. Nous allons le styliser. Je veux dire, nous allons créer ces lignes. Nous allons également créer cet effet de survol agréable et cool. Bien, revenons au code VS et trouvons le conteneur juste après le conteneur, je vais insérer de nouveaux commentaires pour la navigation de navigation. Ensuite, nous avons besoin de Commons pour l'icône du menu avant de commencer à styliser l'icône du menu. Tout d'abord, je vais masquer pendant un moment l'image et les éléments de navigation. Je vais insérer dans vos nouveaux commentaires les éléments de navigation dont nous avons besoin ici. Sélectionnons les éléments dotés la navigation par nom de classe et assignés à leur affichage. Non. OK, l'image et les éléments de navigation sont donc masqués. Nous pouvons maintenant commencer à styliser l'icône du menu. Je vais sélectionner l'icône du menu. Ensuite, définissons avec dans Hyde, je vais définir avec 24 RAM. Quant au Hyde, il y aura deux Ram. Afin de rendre l' élément visible, je vais ajouter ici une couleur de fond temporaire. Allons-y, je ne sais pas, disons rouge. Ici, nous avons l'icône du menu. Ensuite, nous devons prendre soin de sa position. Il faut le placer du bon côté. Je veux dire, dans le coin supérieur droit de la page, je vais régler la position sur fixe. Dans ce cas, la première place sera de sept Ram. Quant à la bonne position, je vais la régler à 215 Ram. Comme vous pouvez le constater, l' icône du menu est bien positionnée. Ensuite, je vais me débarrasser de la couleur d' arrière-plan temporaire à partir d'ici. Ensuite, je vais sélectionner la ligne. Je veux dire que nous sélectionnons des lignes avec une ligne de nom de classe commune. Définissons la hauteur. Ça va faire 0,2 m. Ensuite, changez la couleur de fond. Je vais utiliser ici cette couleur bleue. Nous avons ici les lignes, comme vous le savez d'après la version finale, les première et troisième lignes ont une valeur de 100 %. Quant à la deuxième ligne, elle est plus petite que le reste des lignes. Je vais sélectionner les lignes 1 et 3, définies ainsi comme 100 % . Quant à la deuxième ligne, je vais la fixer à 70 %. Comme vous le voyez, il s' agit en fait de la version finale Comme vous pouvez le constater, la deuxième ligne est devenue plus petite. Séparez les lignes les unes des autres. Pour cela, je vais utiliser des livres flexibles. Je vais ajouter ici Display Flex. Ensuite, nous devons changer de direction car les lignes doivent être alignées verticalement. La direction de flexion sera une colonne, puis nous devons séparer les éléments de flexion. Et pour cela, utilisons justify content space between. Comme vous pouvez le constater, les lignes sont séparées et en fait, avec le style de l' icône du menu, nous avons presque terminé. Je vais ajouter un pointeur de curseur. Comme vous pouvez le constater, le pointeur du curseur n' est pas appliqué à l'icône du menu. Nous devons résoudre ce problème en utilisant la propriété index. Réglons l'index à la valeur maximale, qui est de 1 000. Maintenant, le problème est résolu. OK, pour le style, c'est terminé. Ensuite, nous devons créer l'effet de survol sur le survol. Nous devons réduire la première et la troisième ligne. Quant à la deuxième ligne, il faut la déplacer vers la droite. Je vais sélectionner l'icône du menu avec le pointeur. Puis suivi de la première ligne. Nous devons également exprimer notre dissidence pour la troisième ligne. Au survol, il faut diminuer la largeur des lignes. Passons à 70% Quant à la deuxième ligne, copions ce code, changeons le nom de la classe. Nous avons besoin de la deuxième ligne. Dans le cas de la deuxième ligne, nous devons utiliser la marge gauche. La valeur sera de 30 %. Nous devons déplacer la ligne vers la droite. Si nous vérifions le résultat, comme vous le voyez, tout fonctionne bien. La seule chose dont nous avons besoin ici est d' utiliser la transition afin de rendre l'effet plus fluide. Je vais ajouter ici une transition dont la valeur et la durée seront de 0,3 seconde. Comme vous pouvez le constater, nous avons ici un survol sympa et cool avec l'élément de menu que nous avons terminé pour le moment Ensuite, nous devons nous occuper des éléments de navigation. Pour cela, passons à la prochaine conférence. 8. Styliser les éléments de navigation: Dans la conférence précédente, nous avons stylisé l'icône du menu. Nous avons créé cet effet de survol agréable et cool. Dans cette conférence, je vais m' occuper des éléments de navigation. Nous allons styliser la navigation. Dans cette conférence, je vais donner l'apparence à la navigation. Ensuite, nous allons parler du script Java. Je veux dire, nous allons ajouter des fonctionnalités à notre navigation. Nous allons faire en sorte que cela fonctionne. D'accord, passons au code VS. Pour le moment, la navigation est masquée. Je vais me débarrasser de Display None à partir d'ici. Réglons la hauteur de la navigation. Je vais régler avec 100 %. Quant à la hauteur, je vais la fixer à 100 % de la hauteur de la fenêtre d'affichage, soit 100 % de la fenêtre d'affichage Et je vais aussi changer la couleur de fond. Dans ce cas, je vais utiliser la couleur 191919. C'est une couleur gris foncé. Nous avons ici la navigation. En fait, je vais couvrir l'en-tête avec la navigation. Pour cela, nous devons utiliser une propriété d' index avec une valeur supérieure à zéro. Je vais passer à 30 ou 100. le moment, ce n'est pas couvert car nous devons définir la position de l'élément. Dans ce cas, je vais fixer la position. Je vais également définir les propriétés en haut et à gauche. Les deux devraient être nuls, d'accord ? Maintenant, l'en-tête est couvert et nous ne voyons ici que la navigation. La prochaine chose que je vais faire est d'utiliser la boîte Flex pour aligner les éléments flexibles horizontalement. Nous devons donc afficher Flex. Ensuite, je m' occuperai des côtés gauche et droit de la navigation. Comme vous vous en souvenez, nous avons deux parties, partie gauche et la partie droite. Je vais commencer par la partie gauche. Ne sélectionnons pas la gauche. Je vais définir la hauteur maximale. La largeur va être de 50 % Quant à la hauteur, je vais la faire de 100 %. Pour l'instant, rien n'est changé ici. Nous devons prendre soin de l'image. Il doit occuper la hauteur de l'élément parent, qui n'est pas à gauche. Nous devons sélectionner «   Aucune gauche », suivie l'image dont nous avons besoin ici. Avec 100 % de hauteur et 100  % de hauteur, nous devrions alimenter l'image. Pour cela, je vais utiliser object feet col. Maintenant, comme vous pouvez le voir, l'image occupe la moitié de la navigation. Ensuite, je vais créer l'effet de survol. Je parle de cet effet de survol ici. Par défaut, nous devons rendre l'image en noir et blanc, puis passer le curseur sur l'image Il doit retrouver sa couleur d'origine afin de rendre l' image en noir et blanc. Je vais utiliser un filtre avec fonction d'échelle de gris et je vais le régler sur 100%. Maintenant, comme je peux le voir, l'image est devenue en noir et blanc. En plus de cela, je vais diminuer l'opacité. Faisons en sorte que ce soit 0,5. D'accord ? Nous devons donc maintenant créer l'effet de survol. Je vais sélectionner suffisamment de gauche avec le pointeur de la souris. Ensuite, nous devons sélectionner l'image afin de retrouver la couleur d'origine. Nous devrions réutiliser l'échelle de gris du filtre et la ramener à zéro. Nous devons également augmenter l'opacité. Faisons en sorte que la transition soit à usage unique pour un effet plus fluide. Nous avons besoin de tout comme durée. Je vais utiliser 1 seconde. Maintenant, une fois que j'aurai survolé l'image, nous obtiendrons cet effet de survol agréable et cool En fait, je vais faire du pointeur le pointeur du curseur. Ajoutons ici le pointeur du curseur. Très bien, ça correspond à l'image. Allons-y et occupons-nous du côté droit de la navigation. Je vais sélectionner le bon choix, je vais définir la hauteur maximale. La largeur sera de 50 % comme celle du côté gauche. La hauteur serait de 100 % Ensuite, je vais changer la couleur de fond du côté droit. Je vais faire en sorte que ce soit 171717. Ensuite, nous devons nous occuper des éléments de navigation. Je vais les placer au centre du côté droit. Utilisons des livres flexibles. Nous avons besoin de Display Flex. Pour placer le contenu au centre, nous devons justifier un centre de contenu et également un centre d'éléments de ligne. Très bien, maintenant allons-y et occupons-nous des éléments de navigation eux-mêmes. Je ne vais sélectionner aucun élément , à savoir les éléments parents, l'emballage des éléments Nous devons placer les éléments verticalement dans la colonne. Je vais utiliser Flex Book. Nous devons exposer du flan. Nous devons changer la direction de la boîte flexible. Ce sera une chronique. Ils sont maintenant placés verticalement dans une colonne. Je vais maintenant personnaliser les éléments du lien. Allons-y et sélectionnons un autre élément suivi de l'élément lien. La taille de la police sera de 1,8 RAM. Ensuite, nous avons besoin d' une marge pour créer un espace entre les éléments flexibles. La marge sera de deux RAM en haut et en bas, puis de zéro sur les côtés gauche et droit. De plus, je vais transformer le texte en majuscules, nous avons besoin ici de transformer le texte en majuscules. Ensuite, je vais changer de couleur. Faisons en sorte que ce soit blanc. Très bien, les éléments de nos liens sont maintenant bien meilleurs. Ensuite, je vais créer l'effet de survol sur le survol. Je souhaite modifier la couleur des éléments du lien. Allons-y, sélectionnons maintenant les éléments A avec le pointeur de la souris et changeons la couleur Fais en sorte que nous ayons besoin de couleur. Utilisons ici également cette couleur bleue. Je vais utiliser la transition pour un effet plus fluide. Disons le passage à la couleur. Et puis la durée sera de 0,3 seconde. OK, donc une fois que nous avons survolé les éléments du lien, comme vous pouvez le voir, ils ont changé de couleur Bien, maintenant, nous allons nous occuper de ces chiffres ici. Comme vous vous en souvenez, nous avons créé des éléments span à l'intérieur des liens. Je vais donc personnaliser ces éléments de span. Allons-y et ne sélectionnons aucun élément suivi de l'élément A. Ensuite, nous avons besoin de Span. En fait, lorsque nous avons sélectionné les téléphones Google, j'ai oublié de sélectionner un téléphone supplémentaire. Revenons donc au site Web de Google Phone et recherchons un téléphone appelé péché. Sélectionnons le premier. Ensuite, nous devons cliquer sur Obtenir le point. Ensuite, obtenez le code M et copiez ce code à partir d'ici. Collons-le ici. Je veux dire, nous devons remplacer ces liens. Nous pouvons maintenant utiliser la police nouvellement ajoutée. Je vais changer de famille de téléphones. Utilisons Sz Sansorif. Ensuite, je vais augmenter la taille du téléphone. Ça va faire trois descentes. Je vais faire du téléphone un rocher en utilisant le poids du téléphone. Faisons en sorte que ce soit 900. Ensuite, je vais créer un espace, je veux dire, sur le côté droit. Nous avons besoin d'une marge, non ? Disons à l'un d'entre eux. Enfin, augmentons l'espace entre les lettres, soit 0,2 OK, maintenant, comme vous pouvez le voir, les chiffres sur le côté gauche des éléments du lien sont plutôt jolis et sympas. Ensuite, je vais créer les lignes sous les chiffres. Je veux dire, si nous examinons le projet terminé et que nous passons la souris sur les éléments du lien, vous verrez que nous avons ici effet sympa et cool sous les chiffres, la ligne apparaissant Je vais créer ces lignes en utilisant un élément de force. Allons-y et ne sélectionnons aucun élément, une plage. Et puis il nous faut avant. Donc, les éléments, tout d'abord, nous devons définir le contenu qui sera vide. Ensuite, nous avons besoin de respecter la hauteur, le W sera de 100 %. Ensuite, je vais régler la hauteur à 0,5 RAM. Modifiez également la couleur de fond. La couleur sera la même, je parle de cette couleur bleue ici. Ensuite, nous devons prendre soin de la position de l'élément. Réglons la position sur absolue. Je vais positionner l'élément fonction de l'élément parent, qui est l'intervalle dont nous avons besoin ici, position relative. Maintenant, si nous examinons le projet, vous verrez que les lignes s'affichent. Mais nous devons ajuster la position. Ils doivent être placés en bas. Réglons la position inférieure à zéro. Et je vais également mettre la position gauche à zéro. OK, c'est tout pour les lignes. Maintenant, nous devons les masquer et les réafficher. Une fois que nous aurons survolé les éléments du lien, je mettrai la largeur à zéro Ensuite, je vais sélectionner avant les éléments avec survol, nous devons ajouter ici le survol que nous devrions créer à 100% Et je vais également utiliser Insérons ici avec, d'une durée de 0,3 seconde. Maintenant, une fois que nous avons survolé les éléments du lien , ces lignes s' afficheront bien La seule chose que je dois faire est de occuper du premier élément de lien. Comme vous pouvez le voir, nous avons ici la ligne que je vais créer cette ligne en utilisant à nouveau avant de faire l'élément, sélectionnons les premiers éléments du lien. Pour cela, nous avons besoin de nov items a suivi du premier enfant select. Il s'agit d'un pseudo-élément. En fait, il s'agit d'une pseudo-classe, pas d'un pseudo-élément. Tout d'abord, je vais créer un espace en utilisant rembourrage gauche. Mettons-le à six. Ensuite, je vais prendre le sélecteur et je vais l'ajouter ici avant les éléments. En fait, corrigeons ce code à partir d'ici et apportons quelques modifications Le contenu doit alors être vide. La largeur sera de 4,8 RAM. La hauteur sera de 0,2 Ram. Ensuite, je vais faire en sorte que la couleur de fond soit blanche. Nous avons besoin d'une position absolue. Ensuite, nous avons besoin de la position relative. Pour l'élément parent, nous avons besoin de relatif. En plus de cela, je vais fixer première position à 50 % Nous devons le placer au centre verticalement. La position gauche sera alors zéro. Et nous devons également utiliser transform translate Y avec -50 % car nous devons parfaitement centrer l' élément Pour le moment, il n'est pas visible. Vérifie le code. En fait, nous avons besoin d'elle, Ram. Revenons au navigateur. Et comme vous pouvez le voir maintenant, avant l'élément, la ligne est visible, il ne me reste plus qu' à changer la couleur. Une fois que nous avons survolé le premier élément du lien, je vais sélectionner ce sélecteur ici, puis je vais ajouter Après le premier enfant, nous devons changer la couleur de fond. Utilisons ici cette couleur. Et puis utilisez la transition. Toutes les 0,3 secondes, d'accord ? Maintenant, tout est beau, la navigation est personnalisée. Et maintenant, nous devons faire le travail. Je veux dire, nous devons faire en sorte que le menu des hamburgers fonctionne. Une fois que nous avons cliqué sur l'icône du menu, la navigation devrait s'afficher. Pour cela, passons à la prochaine conférence. 9. Faire fonctionner la navigation: Très bien, dans la conférence précédente, nous avons fini de styliser la navigation. Je trouve que ça a l'air plutôt sympa. Maintenant, comme je l'ai dit, nous devons faire en sorte que cela fonctionne. Jetons un coup d'œil au projet terminé. Comme vous pouvez le constater, la navigation est masquée par défaut. Une fois que nous avons cliqué sur l'icône du menu, elle apparaîtra avec de jolis effets de fondu sympas. De plus, comme vous le remarquez, les éléments de navigation sont masqués. Et ils apparaissent avec des effets de fondu et avec quelques intervalles. De plus, l' icône du menu se transforme, ces lignes se transforment en flèche. Toutes ces choses que nous allons faire dans cette conférence. D'accord, la première chose à faire est de masquer la navigation par défaut. Pour cela, il faut trouver la navigation et y ajouter la capacité zéro et la visibilité lui. Comme vous pouvez le voir maintenant, la navigation est masquée. La prochaine chose que je vais faire est d'ouvrir fichier script JS et d' écrire du code de gaz. Nous allons sélectionner deux éléments. La première sera l'icône du menu. En ce qui concerne le second, nous devons sélectionner le contenant, je veux dire l'emballage du contenu Je parle de cet élément ici. Allons-y et créons une nouvelle variable. Je vais l'appeler menu. Je vais sélectionner cet élément en utilisant la méthode du sélecteur de requête Nous devons spécifier le nom de classe de l'icône du menu. Dupliquons cette ligne de code. Changez le nom multivariable. Ce sera un conteneur. Et nous devons également changer le nom de la classe. Insérons ici, Container. OK, après cela, je vais ajouter un écouteur d'événements à ajouter un écouteur d'événements icône du menu avec un événement de clic, car nous devrions afficher la navigation une fois que nous avons cliqué sur l'icône du menu Je vais donc ajouter un écouteur d'événements à l'icône du menu. Nous devons spécifier ici l'événement de clic. Nous devons spécifier ici l'événement de clic. Et nous devons également transmettre la fonction de retour. Ce sera une fonction de flèche. Cette ligne ajoute un écouteur d'événements à l'élément icône du menu Il écoute un événement de clic et, lorsque celui-ci se produit, il exécute la fonction d'erreur Je vais maintenant ajouter une nouvelle classe au conteneur avec une méthode totale, puis nous utiliserons ce nom de classe dans le fichier CSS. Je ne suis pas une liste de classes de conteneurs sécurisée. Ensuite, nous avons besoin d'une méthode complète. Je ne suis pas sûr du nouveau nom de classe. Appelons cela naviguer à l'intérieur de la fonction flèche. Cette ligne permet à la classe CSS de naviguer sur l' élément conteneur Si la classe de navigation n'est pas présente, elle l'ajoute. Et si la classe de navigation est déjà présente, elle la supprime. C'est ainsi que fonctionne la méthode toggle. Nous devons maintenant accéder au fichier CSS et sélectionner Navigation. Avec cette classe nouvellement créée, Navigate, nous devons afficher le pack de navigation. Je vais donc prendre ces deux lignes et les placer ici. Il faut que l'opacité soit égale à un. Quant à la visibilité, elle doit être visible. OK, donc maintenant si je clique sur l'icône du menu, la navigation s'affichera. Et si je clique sur l'icône du menu, elle se masquera. Tout fonctionne bien pour le moment. Je vais maintenant ajouter un petit effet fluide à la navigation. Ajoutons ici une transition avec a et dont la durée se situe entre un point et une seconde. Maintenant, la navigation s'affiche et se cache avec un effet fluide. Bien, maintenant nous devons nous occuper des côtés gauche et droit. Il faut cacher le côté gauche. Je vais n'en trouver aucun et y ajouter l' opacité zéro et la visibilité Ensuite, je vais sélectionner «  Non » à gauche de la classe. Naviguez. Alors, prenons ces deux lignes. Modifiez les valeurs. Nous avons besoin d' une capacité unique et d' une visibilité visible. Je vais ajouter une transition ici. Nous avons donc besoin de tout. La durée de la transition sera d'une seconde. Mais en plus de cela, je vais ajouter un petit délai. Réglons-le 2,7 secondes et vérifions le résultat. Si nous affichons la navigation, l'image sur le côté gauche apparaîtra avec un peu de retard. Nous avons besoin de la même transition par défaut. Je vais prendre cette ligne de code. Ajoutons-le ici et éliminons le délai. OK, donc tout fonctionne bien. Ensuite, nous devons prendre soin du côté droit. Jetons un coup d'œil au projet terminé. Comme vous le voyez sur le côté droit, je veux dire que cette partie vient du côté gauche. Allons-y et occupons-nous de ça. Je vais en trouver assez, puis je vais le déplacer vers la gauche en utilisant transform translate x comme valeur que je vais passer ici -200 % En plus de cela, je vais augmenter la largeur du nombre suffisant d'éléments de droite Par défaut, il devrait être 100%. Cela rendra notre effet plus agréable. Maintenant, nous devons utiliser la classe Navigate with enough, non ? Une fois que nous avons cliqué sur l'icône du menu, nous devons déplacer l' élément vers la droite. Nous devons transformer, traduire x et la valeur deviendra nulle. De plus, je vais faire en sorte que la largeur des éléments soit de 50 %. Ensuite, nous avons besoin d' une transition d'une seconde. OK, allons-y et vérifions les résultats. Comme vous pouvez le constater, tout fonctionne parfaitement. Maintenant, nous devons nous occuper des éléments de navigation par défaut, je vais les masquer. Ajoutons ici la capacité zéro et la visibilité. Ensuite, nous devons utiliser, à nouveau, la classe navigate. Sélectionnons suffisamment d'éléments et saisissons ces deux lignes. Nous devons rendre visibles les éléments du lien. Nous avons besoin d'une opacité unique et d'une visibilité visible. Mais en cas de transition, nous avons besoin de délais différents pour les éléments de lien, comme c'est le cas dans le projet final. Comme vous pouvez le constater, ils apparaissent à certains intervalles. Par conséquent, nous avons besoin d'un délai différent pour chaque élément de navigation. Je vais sélectionner des objets en forme de nœud. Avec class navigate, nous devons sélectionner le premier élément du nob Par conséquent, je vais utiliser un sélecteur d'enfants. Nous n'avons d'abord besoin d'aucun élément et nous devons effectuer une transition avec une opacité de 0,5 seconde Ce sera la durée. Et nous avons également besoin du temps de retard de 1 seconde. En plus de cela, il faut ajouter de la couleur ici. Parce que, comme vous le savez par défaut, aucun élément n'a de transition avec la couleur. Je vais ajouter de la couleur ici et je vais me débarrasser de cette ligne de code à partir d'ici. La durée de la couleur sera de 0,3 seconde. Maintenant, je vais dupliquer ce code quatre fois. Ensuite, je vais changer les sélecteurs de chat dont nous avons besoin ici Le deuxième élément et le délai seront de 1,2 seconde. Ensuite, nous avons besoin d'un troisième élément avec un délai de 1,4 seconde. Ensuite, nous aurons ici le quatrième élément, 1,6 seconde, et enfin le cinquième élément, 1,8 seconde. OK, allons-y et vérifions les résultats. Ouvrez la navigation. Comme vous pouvez le constater, tout fonctionne parfaitement. Bien, donc la seule chose que je dois faire est de m'occuper de l'icône du menu. Nous devons transformer ces lignes en flèches, comme dans le projet final. Allons-y et faisons-le. Je vais trouver les lignes, puis je vais sélectionner la première ligne avec la classe navigate. Donc, dans le cas de la première ligne, nous devons diminuer la largeur et la porter à 50 %. Nous devons également déplacer et faire pivoter la première ligne. Nous devons transformer puis traduire la fonction. La valeur de translate x sera de 103 %. Nous devons également déplacer les éléments selon l'axe y de 0,5 gramme De plus, nous devons faire pivoter l'élément en fonction du z x. La valeur sera de 25 degrés. OK, vérifions le résultat. Comme vous pouvez le voir, la première ligne tourne et elle a également changé de position. Faisons de même pour la troisième ligne. Je vais dupliquer ce code. Il nous faut ici la troisième ligne. Nous devons ajouter ici le signe moins. Et vous devez également ajouter le signe moins ici. Et aussi. Comme vous pouvez le constater, les troisièmes premières lignes bougent parfaitement. Il faut maintenant augmenter la largeur de la deuxième ligne. Je vais sélectionner la deuxième ligne avec classe. Naviguez et réglez avec 100% Si je clique sur l'icône du menu, nous obtiendrons ici une flèche. Nous avons ici un petit problème, une fois que l'icône est transformée en flèche. Ensuite, nous survolons l'icône. Les lignes auront toujours l'effet de survol, et nous n'en avons pas besoin pour résoudre ce problème Je vais utiliser Cloth Navigate. Ensuite, je vais utiliser le survol avec l'icône du menu, suivi de la ligne 1 Nous avons besoin de la même chose pour la troisième ligne. Au survol, je vais régler avec deux 50 %. Quant à la ligne deux, dupliquons ce code Débarrassez-vous de cette ligne de code et modifiez la ligne de classe. Nous avons besoin de la deuxième ligne. Dans le cas de la deuxième ligne, il faut ici que la marge soit nulle. Comme vous pouvez le constater, nous n' avons plus ici l'effet complet. accord ? Donc en fait c'est ça. Tout fonctionne bien. Et pour ce qui est de la navigation, c'est terminé. Nous devons maintenant passer à autre chose et commencer à créer la section suivante de notre projet. Et pour cela, passons à la prochaine conférence. 10. Créer un balisage HTML pour la section À propos de nous: Dans le cours précédent, nous avons fini de travailler sur la navigation. Tout est plutôt beau et fonctionne parfaitement. Nous devons maintenant passer à autre chose et commencer à créer la section suivante de notre page de destination, qui est la section À propos. Ici, nous avons une section à propos de. Elle a l'air plutôt jolie et elle est simple. Comme vous vous en souvenez, chaque section de la page de destination possède sa propre page. Je veux dire, si je clique ici, nous passerons à la page At. heure actuelle, je vais créer la section à propos sur la page de destination. Quant aux pages, nous nous en occuperons un peu plus tard. La section « À propos » comprend deux parties. Nous avons le côté gauche où nous pouvons voir le numéro de la section ainsi que le bouton avec un effet de survol agréable et cool Pour ce qui est du côté droit, nous avons ici quelques éléments textuels OK, tout tourne autour de la section à propos. Dans cette conférence, je vais créer le balisage HTML. Allons-y et juste après l'en-tête, insérez de nouveaux commentaires pour la section à propos de nous, je vais l'appeler à propos de. Allons-y ensuite et ouvrons la balise de section avec le nom de la classe. Ensuite, je vais insérer votre développement qui portera sur le contenu. Comme je l'ai dit, nous aurons deux parties, le côté gauche et le côté droit. Je vais ouvrir une balise avec un nom de classe concernant le contenu restant. Créons le côté droit. Je vais changer le nom de classe dont nous avons besoin ici. Juste à l'intérieur du côté gauche, nous aurons le numéro de la section et également le bouton. Je vais ouvrir le tag avec la section du nom de classe dans laquelle je vais insérer spannelement avec le numéro 01 Ensuite, je vais ouvrir le tag button avec le nom de classe main BTN. Insérons les éléments de votre lien dès maintenant. Je vais placer votre signe de hachage. En ce qui concerne le texte, je vais insérer ici, Explore. Voyons voir le côté gauche. Passons à autre chose et prenons soin du bon côté. À l'intérieur du côté droit, je vais insérer quelques éléments différents. Je vais insérer ici H quatre avec le titre de la section de nom rapide M, cela signifie petit. Insérons ici à propos de nous. Je vais dupliquer cette ligne de code. Nous avons besoin d'un élément de titre, puis le nom sera le titre de section LG large. Pour ce qui est du texte, je vais m' immiscer. Qui sommes-nous ? Ensuite, nous aurons une section qui bordera cet élément ici. Ensuite, je vais créer un paragraphe avec texte factice dont nous avons besoin ici. Lorem 30. Ensuite, je vais créer un autre paragraphe avec le texte factice Dans ce cas, je vais à l'interlum 40. OK, je pense que c'est ça. Tout est créé. Vérifie le navigateur. Nous avons ici tous les éléments. Nous devons maintenant passer à autre chose et styliser une section pour cela. Allons-y et passons à la prochaine conférence. 11. Section Styles à propos de nous: Très bien, dans la conférence précédente, nous avons créé le balisage HTML pour notre section ci-dessus, je parle de cette section ici Maintenant, comme je l'ai dit, nous devons passer à autre chose et styliser ces éléments. Revenons au code VS dans le fichier CSS. Juste après l'en-tête, je vais insérer de nouveaux commentaires pour about. Ensuite, je vais sélectionner l'élément de section avec le nom de classe About. La première chose que je vais faire est de définir la largeur. Ce sera 100%. Je vais également changer la couleur de fond. Ça va être de 20 à zéro. Ensuite, je vais régler le rembourrage à dix sur le côté supérieur. Le zéro sur le côté droit, 15 RAM sur le côté inférieur et le zéro sur le côté gauche. Comme vous pouvez le constater, l'espace est créé à l'intérieur de la section à l'aide d'un rembourrage Ensuite, je vais placer le contenu au centre à l'aide de livres Flex. Nous avons besoin de Display Flex. Ensuite, je vais justifier le contenu au centre. Et nous avons également besoin d'un centre de rubriques, le contenu est placé au centre. Ensuite, je vais m' occuper du contenu. Je parle de cet élément ici. Allons-y et sélectionnons À propos du contenu. Je vais définir en hauteur. La largeur sera de 100 % Quant à la hauteur, je vais également la régler à 100 %. De plus, je vais placer les côtés gauche et droit côte à côte horizontalement. Pour cela, je vais utiliser des livres flexibles. Nous avons besoin de Display Flex. OK, comme vous pouvez le voir, les côtés gauche et droit sont placés horizontalement, côte à côte. Ensuite, je vais m' occuper du côté gauche. Allons-y et sélectionnons à propos du contenu restant. Chaque côté, le I, le côté gauche et le côté droit occuperont 50 % de la largeur de la section. Je vais régler la largeur à 50 % Ensuite, je vais placer le texte sur le côté droit. Allons-y et mettons le texte de ligne à droite. De plus, je vais créer un rembourrage sur le côté droit à l' aide d'un rembourrage, Et la valeur sera de six rounds. OK, c'est ça. À propos du développement du wrapper, je veux dire à propos du contenu restant Ensuite, je vais m'occuper du numéro de la section. Allons-y et sélectionnons la section suivie de l'élément span. Tout d'abord, je vais changer de téléphone de façon payly. Dans ce cas, je vais utiliser un téléphone appelé sori. Ensuite, je vais augmenter la taille du téléphone. Ça va faire 25 images, je vais rendre le téléphone plus audacieux en utilisant le poids du téléphone La valeur sera de 900. Je vais maintenant définir l'image comme arrière-plan du texte tel que nous l'avons dans la version finale. Je vais utiliser la même technique que celle que nous avons utilisée dans le cas du titre dans l'en-tête du site Web. Nous avons besoin ici des propriétés suivantes. La première sera une image de fond. Il faut définir l' URL de l'image. Nous avons des images de dossiers et je vais sélectionner G deux. Ensuite, nous devons utiliser la taille de l' arrière-plan, ce sera la couverture. Nous avons également besoin d'un clip d'arrière-plan, la valeur sera du texte. Ensuite, nous avons besoin de la même propriété avec la clé Web. Enfin, je vais définir la couleur sur transparent. OK, comme vous pouvez le voir, nous avons ici une image en arrière-plan du numéro de section. La dernière chose à faire concernant cet élément est de créer un petit effet d'ombre. Je vais utiliser Tax Shadow avec les valeurs 0,5 Ram, un Ram. Et la couleur sera RTP, une couleur noire avec une opacité de 0,2 située au-dessus du numéro de section Je trouve que ça a l'air plutôt sympa. Ensuite, nous devons prendre ce qui suit en bas, je vais sélectionner Main BTN. Définissons la hauteur maximale. La largeur sera de 28 Ram, puis la hauteur sera de 6 Ram. Je vais changer la couleur de fond. Utilisons ici la couleur bleue. Ensuite, je vais me débarrasser de la bordure par défaut. Réglons-le sur aucun. Je vais arrondir le bouton. Pour cela, nous avons besoin d'un rayon de bordure, mais avec la valeur de trois Rams, je vais placer le curseur sur un point Bien, voyons voir l'élément bouton. Ensuite, nous devons nous occuper du lien, qui est placé à l'intérieur du bouton. Allons-y et sélectionnons le BTM principal suivi des éléments Je vais régler la hauteur intérieure à 100 % afin que l' élément de lien occupe la totalité de la hauteur intérieure du bouton. Passons à 100 % Ensuite, je vais changer la taille du téléphone. Ce sera 1.4 Au moment où je vais créer le téléphone, nous devons transformer le texte en majuscules. Créons également un espace entre les lettres. Réglons-le sur 0,3 RAM. Enfin, je vais faire en sorte que le texte soit blanc. Le bouton est plutôt joli. Ensuite, je vais créer l'effet de clic. Pour cela, nous devons utiliser une pseudoclasse appelée active. Et nous devons traduire pourquoi la valeur sera de 0,2 Run . Comme vous pouvez le voir, nous avons ici un effet de clic agréable et cool Bien, plaçons ce code après le BTN principal. Je vais maintenant créer l'effet de survol. Je parle de cet effet de survol agréable et cool. Pour cela, il nous faudra avant tout des pseudo-éléments. Allons-y et sélectionnons le BTN principal suivi du pseudo élément précédent Tout d'abord, nous devons définir le contenu. Il va être vide. Ensuite, je vais définir des hauteurs, toutes deux à 100 %. Ensuite, nous devons changer l'arrière-plan. Je vais utiliser un dégradé linéaire. Je vais changer le sens de la couleur. La transition se fera à deux droits, puis la première couleur sera transparente, puis nous aurons la couleur blanche. Ensuite, je vais passer à la troisième couleur, qui sera transparente. le moment, l'élément n'est pas visible car nous devons définir la position. Ça va être absolu. De plus, nous avons besoin de la position relative pour le BTN principal car il s' agit d'un élément parent Et nous allons positionner l' élément avant en fonction de l'élément parent. Je vais ajouter ici éléments relatifs absolus de position qui devraient être visibles. Nous avons ici les pseudo-éléments précédents. Allons-y et changeons de position. Je vais mettre la position à zéro. Quant à la position de gauche, elle sera de -100 %. De plus, je vais biaiser les éléments Nous devons transformer la fonction skew x. Nous devons incliner l' élément le long de l'axe X. Réglons la valeur à -30 degrés. Nous avons ici l'élément situé avant. Une fois que nous avons survolé le bouton , nous devons déplacer l' élément vers la droite. Je vais sélectionner le BTN principal, suivi de la classe hover, puis nous avons besoin des éléments Je vais déplacer l' élément vers la droite. Je vais régler la position gauche à 100 %. Maintenant, si je survole le bouton, l'élément se déplacera vers la droite avant En fait, nous devons rendre l'effet plus fluide. Nous avons besoin d'une transition. Je vais ajouter la transition avant les éléments du costume. Il faut qu'il soit parti 0,3 seconde. Comme vous pouvez le constater, l'effet est devenu plus fluide et la seule chose à faire est masquer l'élément « before to do ». Pour cela, je vais utiliser un système de chauffage par trop-plein. OK, c'est au-dessus du bas. Ici, c'est sympa et cool. Cependant, en fait, je vais maintenant m' occuper du côté droit. Allons-y et sélectionnons à propos du contenu. Hein ? Je vais définir avec, il va être de 50 % alors nous avons besoin, je vais régler le rembourrage à huit RAM en haut, puis à zéro sur le côté droit, à zéro en bas et à six RAM sur le côté droit Ensuite, je vais personnaliser les titres. Allons-y et commençons par le plus petit. Je vais sélectionner le titre de section SM. Réglons la taille du téléphone à 1,2 RAM. Ensuite, nous avons besoin du poids du téléphone, il sera de 300. Je vais transformer le texte en majuscules. Ensuite, nous avons besoin d'un espacement entre les lettres pour créer un espace entre les lettres Ce sera 0,5 RAM. Enfin, je vais changer la couleur du titre. Utilisons la couleur bleue. OK ? La première rubrique, la plus petite, est jolie. Ensuite, nous devons passer à la deuxième rubrique. En fait, je vais dupliquer ce code. Changeons le nom de la classe. Nous avons besoin ici de LG. Ensuite, la taille du téléphone sera de trois RAM. Ensuite, nous avons besoin d'un poids de police 300. De plus, je vais laisser ici la transformation du texte en majuscules. Ensuite, l'espacement des lettres sera de 0,3 RAM. Pour ce qui est de la couleur, je vais la faire blanche. Je vais ajouter ici, une marge de trois béliers en haut et en bas et zéro sur les côtés gauche et droit du deuxième titre. Ça a l'air plutôt sympa. Ensuite, nous devons prendre ici la bordure de la section. Je parle de cet album ici. Allons-y et sélectionnons la bordure de section. Je vais définir avec la hauteur. La largeur sera de 50 Ram, puis la hauteur sera de 0,1 Ram. Changeons la couleur de fond. Je vais utiliser la couleur grise, 333. Enfin, nous avons besoin d'une marge en bas, fixons-la à trois RAM. OK, nous avons donc la frontière. Si nous examinons le projet final, vous verrez les éléments bleus au début de la bordure de section. Je vais créer cet élément en utilisant after the elements. Allons-y et sélectionnons la bordure de section . En fait, nous avons besoin d'ici. Après l'élément, je vais définir le contenu. Il va être vide. Ensuite, je vais définir la hauteur maximale. La largeur sera de sept RAM. Ensuite, nous avons besoin de hauteur, ce sera 0,7 Ram. Modifiez également la couleur de fond. Utilisons ici la couleur bleue. Ensuite, nous devons définir la position des éléments. Réglons la position sur absolue. Comme vous l'avez déjà deviné, nous avons besoin d'une position relative pour l'élément parent car nous allons positionner après le positionner après l'élément en fonction de la bordure de section, qui est un élément parent Nous avons besoin ici des propriétés en haut et à gauche, toutes deux nulles. OK ? C'est ça. Nous avons ici une bordure de section avec ce bel ajout. La seule chose que nous devons faire est de personnaliser les paragraphes. Nous avons deux paragraphes, je vais sélectionner environ, fixons-le à 250. Ensuite, je vais définir la taille du téléphone. Ce sera 1,4 alors changeons la couleur, rendons-la blanche. Ensuite, je vais modifier la hauteur de la ligne. Nous avons besoin d'un peu d'espace entre les lignes. Allons-y et sélectionnons la hauteur de ligne. La valeur sera de 3,5 RAM. Et nous avons également besoin d'un espace entre les deux paragraphes. Réglons à nouveau la marge du bas pour que section assise soit plutôt belle et nous en avons terminé avec la section. Ensuite, nous devons nous occuper de la section suivante, qui sera une section de livre. Pour cela, passons à la prochaine conférence. 12. Créer un balisage HTML pour la section Livres: Dans la conférence précédente, nous avons stylisé la section À propos. Maintenant, comme je l'ai dit, nous allons créer la section suivante de notre page de destination. Jetons un coup d'œil au projet terminé. La section suivante sera la section des livres. Comme vous pouvez le voir, il s' agit d'un en-tête. Ensuite, nous avons trois livres différents et ces couvertures font un effet superflu. Par défaut, ils sont en noir et blanc. Et une fois que nous avons survolé les couvertures, elles retrouvent leur couleur d'origine bas, vous pouvez voir le nom du livre ainsi que son auteur. En bas, vous pouvez voir le bouton Afficher tout. Ce bouton est similaire au bouton que nous avons créé dans la section précédente. Si nous cliquons sur le bouton, nous accédons à la page des livres. heure actuelle, nous allons créer la section, puis nous reprendrons la page plus tard. Bien, dans cette conférence je vais créer le balisage HTML pour la section du livre Insérons de nouveaux commentaires pour les livres. Ensuite, je vais ouvrir les éléments de section avec les carnets de noms de classe dans lesquels je vais insérer des éléments profonds avec le contenu des carnets de noms de classe. Cet élément inclura l'intégralité du contenu de la section du livre. Dans l'élément de contenu du livre, nous aurons trois parties différentes. Nous aurons Bookstop, qui inclura l'en-tête de la section Ensuite, nous aurons la liste des livres. Ensuite, nous allons créer le bouton. Le premier élément que je vais créer sera bookstop Il inclura l'en-tête du livre. Je vais récupérer l'en-tête de la section précédente. Je veux dire, nous avons besoin ces deux éléments de titre ainsi que de la bordure de section. Récupérons ces trois éléments et collons-les ici. Je vais modifier le contenu dont nous avons besoin ici. Livres, les éléments de titre H One seront nos best-sellers. Nous avons besoin de ses best-sellers. Ensuite, je vais récupérer le numéro de section de la section précédente. Récupérons cet élément et le collons juste après l'en-tête. Nous devons modifier ce panneau. Il va être 02. Comme vous pouvez le voir, l'en-tête, les en-têtes et la bordure de section ainsi le numéro de section sont déjà stylisés Comme nous avons créé des styles pour les éléments de la section précédente, il suffit de les aligner correctement dans cette section. Ensuite, je vais insérer votre liste de livres dans laquelle je vais ouvrir une balise avec le carnet de noms de classe. Chaque livre inclura l'image, je veux dire l'image de couverture et trois éléments d'extension pour le nom du livre. De plus, nous aurons ici cette frontière. Et en bas, vous pouvez voir l'auteur du livre. Comme je l'ai dit, nous avons besoin de trois éléments différents. Le premier sera Image. Je vais sélectionner une image dans le dossier des images. La première image sera celle du livre 1. Ensuite, je vais instituer des éléments de plan avec le nom de la classe, le nom du livre. Je vais vous donner le titre du premier livre. Ce sera l' aventure de Tom Sawyer. Ensuite, nous aurons ici un autre élément de span avec la ligne du carnet de noms de classe. Enfin, nous avons besoin d'éléments de troisième span avec le livre de noms de classe other. L'auteur de ce livre est Mark Twain. Je vais gagner Mark Twain. OK. Dans cette section, nous aurons trois livres différents. Par conséquent, je vais dupliquer ce code deux fois et modifier les informations dont nous avons besoin ici. Livre deux. Ça va être le cas, insérons-le ici. Idiot. Et l'auteur est Fody. Ensuite, nous avons ici le livre numéro trois. Le titre du livre est Le Comte de Monte Crystal. L'auteur du livre est Alexander. Passons donc aux livres. Ensuite, nous devons créer le bouton. En fait, je vais récupérer le bouton de la section précédente. Récupérons ce code. Mets-le ici. Je vais modifier le texte des éléments du lien. Ce sera la vue A, donc je pense que cela concerne le balisage HTML de la section du livre Encore une fois, l'en-tête et le numéro de section sont déjà stylisés, tout comme le bas Ensuite, nous devons styliser le reste des éléments, et nous devons également nous occuper des alignements, des éléments de la section Pour cela, passons à la prochaine conférence. 13. Section de livres de stylisation: Très bien, dans la leçon précédente, nous avons créé le balisage HTML de la section du livre Maintenant, comme je l'ai dit, nous devons styliser cette section. Certains éléments portent déjà le style de l'en-tête, du numéro de section et du bouton principal en bas Nous devons aligner correctement ces éléments et également styliser les éléments restants. Passons au code VS et juste après la section À propos, insérons une nouvelle section Commons pour le livre. Ensuite, je vais sélectionner les éléments de section avec les neuf livres de la classe. Définissons la largeur. Ce sera 100 %. Ensuite, je vais placer le contenu au centre à l'aide de livres Flex. Nous devons afficher Flex, puis justifier le centre de contenu et le centre d'alignement des éléments. De plus, je vais créer de l'espace à l'intérieur de la section en utilisant le putting. Il y aura dix RAM en haut, puis zéro sur le côté droit, 15 RAM en bas et zéro sur le côté gauche. OK, donc l'espace à l'intérieur de la section est créé et le contenu est déplacé au centre. Ensuite, je vais m'occuper du haut de cette section. Allons-y et sélectionnons des livres. Haut. Je vais placer les éléments, je veux dire les éléments flexibles côte à côte horizontalement. Pour cela, nous avons besoin de Display Flex. Ensuite, je vais centrer le contenu à l' aide du centre de contenu Justify et du centre d'alignement des éléments. De plus, je vais créer de l'espace en bas en utilisant la marge. Les dix derniers enfants peuvent voir l'en-tête et le numéro de la section placés horizontalement, côte à côte. Ensuite, je vais passer à l'en-tête. Allons-y et sélectionnons l'en-tête des livres. Je vais aligner le texte sur le côté droit. Nous avons besoin que le texte soit bien aligné. De plus, je vais créer de l'espace sur le côté droit en utilisant la marge, n'est-ce pas ? La valeur sera de dix. OK ? Comme vous pouvez le voir, les titres sont placés sur le côté droit et il y a un espace entre l' en-tête et le numéro En fait, nous devons déplacer ces éléments bleus sur le côté droit. Pour cela, allons-y et sélectionnons l'élément suivant. Mais tout d'abord, nous devons sélectionner l'en-tête des livres. Ensuite, nous avons besoin d'une bordure de section suivie de l'élément suivant. Je vais mettre la bonne position à zéro. Si nous examinons les styles par défaut pour la bordure de section, je veux dire l'élément suivant, vous trouverez ici la position de gauche. Si nous sommes ici, juste la bonne position sans la position gauche, alors l'alignement ne le sera pas. Corrige-moi. Si nous l'enregistrons et allons dans le navigateur, vous pouvez voir que l'élément après est toujours sur le côté gauche. Il faut qu'il reste ici pour que ce soit une voiture. Comme vous pouvez le constater, l'accès à l'élément est désormais placé sur le côté droit. Bien, après ça, je vais m' occuper du numéro. En fait, nous avons besoin d'une image de fond différente pour le numéro. Je vais sélectionner l' élément span, mais tout d'abord, nous avons besoin de livres pour la section suivie de l'élément span. Changeons l'image de fond. Je vais sélectionner une image dans le dossier des images. Ce sera un texto BG Three. Jetons un coup d' œil au projet. Ici, nous avons l'image d' arrière-plan et elle est différente de l'image d'arrière-plan précédente. Je pense que nous pouvons légèrement déplacer l'image de fond afin de rendre le résultat un peu plus beau. Je vais changer la position de l'image de fond. Nous avons besoin d'une position de fond comme valeurs. Je vais investir 50 % et 75 % maintenant. L' image d'arrière-plan est positionnée à 50 % de la largeur des conteneurs à partir du bord gauche horizontalement et 75 % de la hauteur des conteneurs à partir du bord supérieur verticalement. Si vous imaginez un contenant rectangulaire, l'image d'arrière-plan sera placée de telle sorte que son centre soit aligné horizontalement avec le centre du conteneur et que son bord inférieur soit aligné 75 % de la hauteur du conteneur depuis le J'espère que c'était clair pour toi. Ensuite, nous devons prendre soin des livres. Allons-y et sélectionnons. Nous avons besoin de votre liste. Je vais utiliser Flex Box. Réglons l'affichage pour qu'il soit flexible. Ensuite, je vais modifier la largeur du livre. Sélectionnons le livre et passons à 35 images. En fait, nous devons modifier la largeur des images car elles sont trop grandes pour le moment Allons-y et sélectionnons « réserver ». Suivi de l'élément image. Je vais régler la hauteur avec 30 RAM . Réglons-le sur A. Maintenant, comme vous pouvez le voir, les images sont devenues plus petites. En fait, nous avions l'habitude d'entendre des drapeaux et, par conséquent, les livres devaient être placés horizontalement dans une rangée. Eh bien, il s'agit peut-être d'une erreur. Eh bien, nous avons besoin ici d'une liste de livres et non d'une liste de livres. Maintenant, le problème doit être résolu. Comme vous le voyez, les livres sont placés horizontalement dans une rangée. Ensuite, je vais personnaliser le livre. Je vais ajouter ici un affichage. Nous allons aligner les éléments verticalement dans la colonne. Je vais utiliser des livres flexibles. Réglons Display Flex. Ensuite, nous devons également changer la direction dans laquelle ce sera une colonne, je vais placer les éléments au centre. Je veux dire horizontalement au centre. Et vérifions le résultat. Comme vous pouvez le constater, les éléments de travée sont placés au centre. Je veux dire que les éléments de texte sont placés au centre. Ensuite, je vais fixer une marge à six RAM afin de créer de l'espace autour du livre pour qu'il puisse être assis autour des livres en ce moment. Ensuite, je vais m' occuper des images de couverture. Nous allons les faire en noir et blanc. Pour ce faire, comme vous vous en souvenez, nous devons utiliser un filtre avec la fonction d'échelle de gris. Je vais intervenir à 100 % maintenant que les images sont en noir et blanc. Ensuite, je vais les arrondir un peu, rayon d'un Ram important. Et je vais également créer l'effet d'ombre. Utilisons Book Shadow avec une valeur de 01 Ram, puis trois Ram, la couleur. Utilisons la couleur noire avec une opacité 0,4. Je vais changer le curseur, en faire un pointeur OK, les livres sont beaux. Ensuite, nous devons créer l'effet de survol. Une fois que nous avons survolé les images de couverture , nous devrions revenir à la couleur d'origine Je vais sélectionner l'image du livre. En fait, quittons le livre d' ici en survolant. Sélectionnez ensuite l'image. Nous devons utiliser un filtre avec la fonction d'échelle de gris. Nous devons le mettre à zéro, comme vous pouvez le voir. Nous arrivons maintenant à la couleur d'origine. Faisons en sorte que l'effet soit plus fluide. Filtre de transition, la durée sera de 1 seconde, accord, donc tout semble parfait. Ensuite, nous devons prendre soin de ces éléments d'envergure ici. Allons-y et commençons par le nom du livre. Je vais changer de famille de téléphones. Ce sera un co-script cursif. Ensuite, je vais changer le côté du téléphone. Ce sera 1,4 RAM. Je vais transformer le texte en majuscules. Ensuite, il faut que la couleur soit bleue. Créez un espace entre les lettres, disons 2.1 Et créez un espace en haut et en bas. Faisons de la marge 3.0 OK, donc les noms des livres sont plutôt jolis en fait. Une fois que nous avons survolé ces panneaux, l'image change de couleur En fait, je pense que ce n'est pas très bon. J'avais raison quand j' allais ajouter l'effet de survol à l' image et non au livre Ajoutons le survol à l'image. Je pense que ce serait plus correct. OK, alors maintenant, maintenant je pense que nous avons de meilleurs résultats. Une fois que nous avons survolé ces spinelements , les images conservent leur couleur noir et blanc OK, passons à autre chose et occupons-nous de la librairie. Je vais régler la largeur à dix Ram, puis la hauteur sera de 0,1 Ram. Changeons la couleur de fond. Ce sera de la couleur RGBA. Je vais utiliser la couleur blanche. Nous avons besoin de 25053 fois, puis je vais changer l'opacité Faisons en sorte que ce soit 0,1. Enfin, crée un espace en bas à l'aide d'une marge. En bas avec une valeur de trois RAM. OK, nous avons donc les lignes, elles sont plutôt jolies. Ensuite, nous devons nous occuper des auteurs des livres. Allons-y et sélectionnons l'auteur du livre. En fait, je vais récupérer ce code ici. Obtenez gratuitement un téléphone familial. Ne modifiez pas la taille du téléphone. Il va y en avoir deux. Nous avons besoin d'une transformation au cas par cas. La couleur sera également blanche. Ensuite, je vais faire en sorte que l'espacement soit 0,5 RAM. Pour ce qui est de la marge, je vais m'en débarrasser. OK ? Comme vous pouvez le constater, les auteurs sont beaux. Mais nous avons ici un petit problème. Pour cela, nous devons aligner le texte au centre. Je vais ajouter ici le centre de la ligne de texte. Cela devrait régler le problème. OK, tout a l'air bien. Ensuite, je vais m' occuper du fond principal. Nous devons le placer au centre de la section. Et nous avons également besoin d' un peu d'espace entre les livres et le bas. Je vais sélectionner les livres, le contenu suivi du BTN principal Créons de l'espace en utilisant la marge, les dix meilleurs RAM. Afin de placer le bas au centre. Je vais sélectionner le contenu des livres et utiliser simplement le texte au centre de la ligne. OK, ça y est, nous avons stylisé la section du livre. Tout a l'air plutôt sympa. Ensuite, nous devons passer à notre section suivante, qui sera la section des témoignages Pour cela, passons à la prochaine conférence. 14. Créer un balisage HTML pour la section Témoignages: Lors de la dernière conférence, nous avons fini de travailler sur la section du livre. Comme vous pouvez le voir, il est carrelé et il est plutôt joli. Maintenant, comme je l'ai dit, nous allons passer à autre chose et commencer à créer la section suivante de notre page de prêt. La section suivante sera consacrée aux témoignages. Nous avons ici la section des témoignages. Il se compose de deux éléments différents. Nous avons ici la partie supérieure, je veux dire l'en-tête et le numéro de section avec image de fond. Ensuite, vous pouvez voir les commentaires. L'un des clients, nous avons ici, noir et blanc, une photo du client. Et une fois que nous avons survolé l'image, elle aura sa couleur d'origine Nous avons utilisé cet effet quelques reprises dans ce projet. Ci-dessous, vous pouvez voir les citations tirées des commentaires du client. Et en bas, vous pouvez voir le bas, En savoir plus. Si je clique sur ce bouton, nous accèderons à la page des témoignages, où vous trouverez le curseur des Cela fonctionne. Nous avons ici quelques témoignages différents du client Très bien, dans cette conférence, nous allons créer le balisage HTML de la section des témoignages, puis nous allons le styliser comme pour la page des témoignages, nous nous en occuperons OK, allons-y et pour créer le balisage HTML, je vais insérer vos nouveaux commentaires pour la section des témoignages Ensuite, je vais ouvrir le tag de section avec le nom de la classe testimonial. La section des témoignages sera composée de trois parties différentes Nous aurons des témoignages en haut la page, qui incluront le numéro de section et l'en-tête. Ensuite, nous aurons des commentaires. Et nous aurons aussi en bas, je vais ouvrir le tag avec le nom de la classe, le témoignage, dans lequel je vais insérer une section Changeons le chiffre dont nous avons besoin ici, trois. Et je vais également insérer ici un en-tête. Insérons l'en-tête après le numéro de section. Je vais remplacer les livres par des témoignages. Nous avons également besoin de clients plutôt que de livres. Ensuite, je vais insérer ici des témoignages. OK, c'est tout à propos de Testimonial Top. Ensuite, je vais créer une balise avec le nom de la classe feedback. Dans les commentaires, je vais ouvrir une autre balise div. Il s'agira d'un haut de feedback dans lequel je vais insérer une image du client. Nous allons sélectionner Image dans le dossier des images. Nous avons besoin du nom du client. Ensuite, je vais ouvrir un tag avec le titre de feedback sur le nom de la classe dans lequel je vais insérer des éléments de titre H, nous avons besoin de ses clients. Ensuite, je vais à nouveau insérer ici les éléments Spin avec le feedback textuel. Ensuite, je vais ouvrir un autre deep tug et ce sera Feedback Bottom Dans l'élément inférieur des commentaires, je vais insérer ce qui sera le BG d'arrière-plan. Ces éléments seront vides. Ensuite, nous avons besoin ce que je vais ouvrir deep tu avec le nom de classe he. Ensuite, nous devons assurer l'icône. Utilisons des éléments avec les classes entre guillemets solides à gauche. Ensuite, après les éléments I, je vais insérer H un élément de titre. Cette rubrique sera destinée au nom du client. Interférons Robert Smith. Ensuite, après H un élément de titre, nous avons besoin d'une deuxième icône pour. Copions celui-ci. Collez-le ici. Et au lieu d'intervenir de la gauche, non ? C'est bon. La prochaine chose que je vais faire est de créer un nouveau développement avec le corps du code du nom de classe à l'intérieur de cet élément. Je vais ouvrir les éléments avec, euh, envoyons un texto lorsque vous entendez Lorem, insérons 30 mots Ensuite, après le corps, je vais insérer des étoiles. Nous avons besoin d'un divot avec le nom de la classe en étoile. Ensuite, je vais attribuer à vos éléments E la classe Solid Star Nous aurons cinq étoiles, donc je vais dupliquer ce code quatre fois. Enfin, je suis le bas assuré, je veux dire le bas principal Ajoutons ici le nom de la classe, le PTN, les éléments insure A sous forme de texte Je vais aller à Insepe, pour en savoir plus. Très bien, donc je pense que cela figure dans cette section. Nous avons de nombreux éléments HTML différents. J'espère que tout est correct. Nous verrons cela plus tard. Vérifie le navigateur. Comme vous pouvez le voir, nous avons ici tous les éléments tels que la section précédente, l'en-tête et le numéro de section qui sont déjà stylisés Ainsi que le bouton principal. Nous devons aligner ces éléments et personnaliser les éléments restants. Pour cela, passons à la prochaine conférence. 15. Section des témoignages de stylisme: Dans la conférence précédente, nous avons créé le balisage HDML pour notre section de témoignages Nous avons ici tous les éléments, certains d'entre eux sont déjà stylisés car nous avons des éléments similaires dans les sections précédentes, mais maintenant nous devons nous occuper de l'alignement de ces éléments stylisés En ce qui concerne les autres éléments que nous avons créés lors de la dernière conférence, nous devons en prendre soin et en prendre soin. Bon, passons au code VS et dans le fichier CSS juste après la section livre, je vais insérer de nouveaux commentaires pour les témoignages Ensuite, je vais sélectionner l'élément de section contenant le nom de la classe et les témoignages Tout d'abord, je vais définir la hauteur de la section. La hauteur de la fenêtre d' affichage sera de 160. Aussi, adhérons à make it 100%. Ensuite, je vais vérifier la couleur de fond. Ce sera en 202020. Nous avons ici l'élément de section avec une couleur de fond différente. Ensuite, je vais aligner les éléments à l'aide de livres flexibles. Je vais régler l' affichage sur flex. Ensuite, nous devons aligner les éléments verticalement dans la colonne. Par conséquent, nous devons utiliser la direction de flexion avec la colonne de valeur. De plus, je vais aligner les éléments au centre en utilisant le centre d' alignement des éléments. Enfin, créons un peu d'espace à l'intérieur de la section, c' est-à-dire en tapotant dix béliers en haut, puis zéro sur le côté droit, 15 béliers en bas et zéro sur le côté gauche OK, comme vous pouvez le voir, le contenu est placé au centre. Ensuite, je vais m'occuper du haut de la section, je veux dire de l'en-tête et du numéro de section. Allons-y et sélectionnons Testimonial Top. Utilisons à nouveau la boîte flexible car nous allons placer l'en-tête et le numéro de section côte à côte horizontalement. Nous avons besoin de Display Flex. Ensuite, je vais placer le contenu au en utilisant un centre d'éléments de ligne. Et nous devons également justifier ici le centre de contenu. Enfin, créons un espace en bas en utilisant la marge, cinq en bas, d'accord ? Comme vous pouvez le voir, le numéro de section et l'en-tête sont placés côte à côte. Ensuite, nous devons changer l'image de fond pour le numéro de section, et nous avons également besoin d'un espace entre ces deux éléments. Allons-y et changeons l'image de fond du numéro de section. Allons-y et sélectionnons Testimonial Stop, puis le numéro de section Ensuite, nous avons besoin d'un élément span, nous avons besoin ici d'une image de fond. Définissons l'URL. Nous avons besoin d'un dossier d'images. Et je vais sélectionner une image appelée texte G33, mais quatre. Ensuite, je vais créer un espace sur le côté droit du numéro. Je vais prendre ce sélecteur à partir d'ici et suivre le rythme, fixons la marge à droite à dix Bien, asseyons-nous en haut de la section. Ensuite, nous devons nous occuper des commentaires. Je parle de cet élément ici. Allons-y et sélectionnons les commentaires. Je vais définir avec la hauteur. La largeur sera de 50 % Quant à la hauteur, je vais la régler à 60 % Ensuite, réutilisons les livres flexibles. Nous devons aligner les éléments, les éléments flexibles verticalement dans la colonne. Nous avons besoin de la direction de flexion pour être une colonne. Nous devons également aligner les éléments au centre afin que les éléments soient alignés. Ensuite, je vais m' occuper des commentaires en haut de la page. Je parle de cet élément ici. Il inclut l'image du client ainsi que le titre. Allons-y et sélectionnons les commentaires en haut de la page. Utilisez à nouveau la boîte flexible, nous devons aligner les éléments au centre. Ensuite, je vais créer de l' espace sur le côté gauche en utilisant le rembourrage gauche, disons que c'est un Ram à sept Et nous avons également besoin d'un peu d' espace en bas en utilisant la marge, les cinq derniers Ram. Bien, ensuite je vais m'occuper de l'image parce qu'elle est trop grande pour le moment. Allons-y et sélectionnons le commentaire en haut, suivi de l'élément image. Réglons la hauteur à 30 RAM. Ensuite, nous devons ajuster l'image. Je vais utiliser object fit with the value cover. Comme vous pouvez le constater, l' image est devenue plus petite. Ensuite, je vais l' arrondir en utilisant le rayon de bordure. Réglons-le sur deux RAM. Nous avons également besoin de faire en sorte qu'il soit solide de 0,8 RAM. La couleur sera la même que celle que nous utilisons pour la couleur d'arrière-plan de la section. Je veux dire 202020. Nous avons également besoin d'un peu d'espace sur le côté droit en utilisant la marge, à droite, trois RAM. Jetons un coup d' œil aux résultats. OK, l'image est belle. Ensuite, nous devons le faire en noir et blanc. Je vais également créer le même effet de survol que celui que nous avons utilisé plusieurs fois dans ce projet Utilisons à nouveau le filtre avec la fonction d'échelle de gris, pour le faire à 100 %. Ensuite, nous avons également besoin du curseur pour pointer, d'accord. Comme vous pouvez le constater, l'image est devenue en noir et blanc. Ajoutons-y un effet de survol. Je vais sélectionner les commentaires, l'image du haut pour les pols de survol, nous avons besoin d'un filtre avec une fonction d'échelle de gris et le résultat sera nul Je vais également ajouter ici transition pour un effet plus fluide. Nous avons besoin d'un filtre d'une durée d'une seconde. OK, c'est tout à propos de l'image. Ça a l'air plutôt sympa. Et nous avons ici un effet de survol agréable et cool Ensuite, je vais m' occuper du titre. Allons-y et sélectionnons le titre des commentaires. Je vais utiliser à nouveau Flex Books. Réglons l' affichage 50 %. Ensuite, nous devons placer le centre du texte. Nous avons besoin du centre Textline. OK, pour le moment, rien n'a changé ici. Nous devons augmenter la taille des titres. Je vais donc sélectionner le premier titre. En fait, nous n'avons ici qu'un seul titre, mais à l'intérieur du titre, j'ai inséré les éléments d'envergure pour la deuxième partie du titre, c'est pourquoi je parle de titres. Je vais sélectionner le titre des commentaires suivi des éléments du titre H. Augmentons la taille du téléphone, faisons-en sept RAM. Ensuite, il nous faut de la couleur. Ça va être blanc. Ici, nous avons le titre, il a l'air bien, mais nous devons ajouter quelques styles à la deuxième partie du titre, cet élément panoramique, nous devons lui donner l'apparence. Allons-y ce sélecteur à partir d'ici et ajoutons-le à son élément Pan Tout d'abord, je vais changer de famille de téléphones. Le téléphone va être en script cursif, puis je vais augmenter la taille du téléphone Faisons en sorte qu'il y ait huit RAM. Ensuite, je vais créer un espace entre les lettres en utilisant l'espacement Lexi La valeur sera de 0,2 Ram. Et changez également la couleur, utilisez la couleur bleue. Très bien, c'est tout ce qui concerne le titre. Les deux parties du titre sont belles. Ensuite, nous devons nous occuper des devis. Tout d'abord, je vais m' occuper de l'arrière-plan. Je veux dire, cette partie bleue ici. Allons-y et sélectionnons G. Définissons la hauteur maximale. La largeur sera de 35 RAM. Ensuite, nous avons besoin de hauteur. Je vais faire 40 Ram. Modifiez également la couleur de fond. Utilisons cette couleur bleue ici. Ensuite, nous devons modifier la position de l'élément. Je vais régler la position sur absolue. Ensuite, nous avons besoin de la position relative pour le feedback. Comme il s'agit d'un élément parent, je vais aligner l'élément BG en fonction des commentaires dont nous avons besoin. Position relative. Ensuite, je vais définir les propriétés en haut et à gauche. La première place sera 26 Ram. Quant à la position de gauche, je vais la porter à 4,5 RAM. Jetons un coup d'œil au résultat que nous avons ici, l'arrière-plan du code. Je vais l'arrondir. Utilisons le rayon de bordure 3 Ram. Comme vous l'avez remarqué, nous avons ici un petit problème. Cet élément couvre partiellement l'image. Je vais placer l'image au-dessus de cet élément ici. Pour ce faire, je vais utiliser une propriété d'index. Et faisons-en un. Maintenant, le problème est résolu et tout semble bon. La prochaine chose que je vais faire est de créer ce triangle ici. Je vais le faire en utilisant after elements. Allons-y et sélectionnons BG suivi des éléments suivants. Tout d'abord, nous devons définir le contenu, qui sera vide. Ensuite, je vais régler la hauteur, les deux à zéro. Ensuite, nous devons changer de position. Réglons la position sur absolue. Je vais maintenant créer le triangle en utilisant des bordures, c'est pourquoi je me suis assise là avec les deux triangles et je les ai placés à zéro. Nous devons utiliser plusieurs propriétés de bordure différentes. La première sera celle de la frontière gauche. Les valeurs seront pour Ram solid, la couleur sera transparente. Ensuite, je vais utiliser la bordure droite. En fait, dupliquons cette ligne. Modifiez la propriété dont nous avons besoin ici, bordure, droite. Ensuite, nous avons besoin d'une autre propriété appelée border bottom. Mais dans ce cas, je vais changer la couleur dont nous n'avons plus besoin ici, transparente. Utilisons la couleur bleue. Maintenant, l'élément n'est pas visible. Changeons la couleur, rendons-la rouge. Nous avons ici le triangle. Maintenant, nous devons changer la position de cet élément. Revenons-en à la couleur bleue. Nous avons besoin que la position inférieure soit égale à moins trois. Je vais aussi dire position, faisons-en un RAM. La dernière chose que je dois faire est de faire pivoter cet élément. Je vais utiliser Transform. Avec la fonction de rotation, la valeur sera de -45 degrés. Maintenant, tout va bien avec le fond. Nous avons terminé. Ensuite, nous devons nous occuper de la citation elle-même. Je parle de cet élément ici. Passons au code VS et sélectionnons-le, définissons en hauteur. La largeur sera d'un Ram, puis la hauteur sera de 28 Ram. Je vais changer la couleur de fond. Utilisons ici les couleurs 28 à huit, à huit. Voici la citation. Je vais l'arrondir en utilisant le rayon de bordure. Faisons-en trois RAM. Je vais également modifier la position de l'élément. Disons que la position par unité absolue sera 33 Ram. Pour ce qui est de la position de gauche, je vais prendre huit RAM. Nous allons vérifier les résultats ici. Nous avons le, maintenant je vais aligner les éléments de la citation à l' aide de Flex Book. Allons-y et utilisons Display Flex. Ensuite, nous devons aligner les éléments verticalement dans la colonne. Nous devons changer de direction, ce sera la direction de flexion, colonne. Nous devons également aligner les éléments au centre. Comme vous pouvez le constater, les éléments sont alignés durablement. En ce qui concerne la citation qui va être faite pour créer l'espace à l'intérieur de l'élément, je vais utiliser du pudding Il nous faut du pudding ici. Il y aura trois béliers en haut et en bas et zéro sur les côtés gauche et droit. OK, passons au suivant. Je vais créer le triangle pour les, comme nous en avons besoin après les éléments. En fait, prenons ce code. Et puis changez le nom de classe dont nous avons besoin ici. Je vais changer de couleur. Il va être de 28 à huit ou huit. Alors je vais vraiment vérifier les résultats. Je vais déplacer ce triangle vers la gauche comme dans la version finale Je vais mettre la propriété de gauche à zéro. Ok, c'est tout pour le triangle. Ensuite, je vais m' occuper de l'en-tête de, allons-y et sélectionnons En-tête. Réutilisez le livre Flax dont nous avons besoin ici, affichez Flax. Ensuite, je vais aligner les objets au centre et créer de l' espace en bas en utilisant les deux béliers de Margot OK, après cela, je vais personnaliser ces citations. Je veux dire le téléphone, donc les icônes. Allons-y et sélectionnons l'en-tête suivi des éléments oculaires. Synchronisons la taille du téléphone, faisons-en une rampe et changeons également la couleur Ça va être de couleur bleue. OK, après cela, je vais personnaliser le titre, je veux dire le nom du client. Allons-y et sélectionnons En-tête, puis l'élément de titre H un. La taille de police sera de deux m. Ensuite, nous avons besoin de transformer le texte en majuscules. Changeons la couleur du texte qui va être blanc. Je vais également créer un espace entre les lettres Faisons en sorte que ce soit 0,2. Enfin, nous avons besoin d'espace à l'intérieur des éléments sur les côtés gauche et droit. Faisons-le en utilisant un rembourrage. Les valeurs seront nulles en haut et en bas et dix m sur les côtés gauche et droit. Encore une fois, l'en-tête de la citation semble bon. Ensuite, nous devons prendre soin du paragraphe. Allons-y et sélectionnons En-tête. Suivi par le PL. En fait, en-tête, mais corps avec l'élément. C'est la partie du, mettons-le avec 250 RAM. Ensuite, la taille du téléphone sera de 1,2 Rams. Je vais changer d'appel, faisons-le , je veux dire, il soit de couleur gris clair. Ensuite, je vais créer un espace en bas en utilisant la marge. En bas, 2,5 Rm. Jetons un coup d' œil au paragraphe. Nous devons placer le texte au centre. Et je vais également augmenter légèrement la hauteur de la ligne comme nous l'avons ici. Allons-y et utilisons le centre de la ligne de texte. Et je vais régler la hauteur de ligne à 2,5 Rm pour la caméra située autour du paragraphe. Ensuite, nous devons prendre soin des étoiles. Je vais sélectionner ces éléments oculaires ici. Allons-y et sélectionnons les étoiles, puis les éléments oculaires. Augmentons la taille du téléphone. Je vais passer à 1,8 , puis la couleur sera bleue. Nous avons besoin ici de cette couleur. Ensuite, crée de l'espace à gauche et à droite en utilisant la marge, réglons-le sur zéro et 0,5 RAM. Très bien, alors parlons-en de la citation. Le dernier élément que je dois personnaliser dans cette conférence est le bas. Je vais définir sa position. Allons-y et sélectionnons les principaux témoignages BTN. Je vais me positionner de manière absolue. Ensuite, nous avons besoin des éléments de section relatifs à la position. Afin de positionner le bas en fonction des éléments de section, nous avons besoin de la position relative. Revenons au BTN principal et ajoutons ici la position de gauche 50 %. Ensuite, le bas doit être de 15 grammes Afin de centrer parfaitement l'élément, nous devons utiliser la fonction transform translate x avec la valeur -50 % de came assise La section des témoignages est personnalisée, elle est plutôt jolie Ensuite, nous devons passer à autre chose et prendre soin du pied de page. Je parle de cette section ici. Le pied de page inclut également la section contact. Allons-y et créons cette section lors de la prochaine conférence. 16. Créer un balisage HTML pour Footer: Très bien, lors de la dernière conférence nous avons fini de travailler sur la section des témoignages, nous l'avons stylisée et, comme vous pouvez le voir, elle est plutôt jolie et cool Dans cette conférence, nous allons commencer à créer la dernière partie de la page de destination principale. Je veux dire, nous devons créer le pied de page qui inclut la section contact J'ai intégré ces deux parties. Je suis dans la section contact et dans le pied de page. Dans cette conférence, je vais créer le balisage HTM pour le pied de page Comme vous pouvez le constater, nous avons de nombreux éléments différents ici. Ensuite, dans la prochaine conférence, nous allons styliser cette section. Bien, revenons au code VS et dans le fichier HTML juste après la section des témoignages, je vais publier de nouveaux commentaires pour le pied Ouvrez ensuite les cinq éléments de pied de page HTML. Le pied de page sera composé de deux parties différentes. La première partie sera l'en-tête du pied de page, dans lequel je vais insérer les en-têtes ainsi que la bordure de section Nous avons utilisé ces éléments à quelques reprises dans notre projet. Je vais copier ces trois lignes d' ici et les coller ci-dessous. Modifions le contenu des rubriques dont nous avons besoin ici pour entrer en contact En ce qui concerne le deuxième élément d' en-tête, je vais insérer ici, Contactez-nous. Jetons un coup d' œil au projet. Comme vous pouvez le constater, nous avons ici deux rubriques et le tableau de section Très bien, la prochaine chose que je vais faire est d'insérer ici les nouveaux développements, qui seront du contenu en bas de page Cet élément inclura le reste du contenu. Je vais ouvrir les développements et ce sera focalisé. Il inclura les icônes des réseaux sociaux ainsi que l'adresse. Allons-y et assurons les développements, qui seront abordés Je vais assurer les développements qui incluront la phonémique et aussi ce panelmentsmicon ici Ouvrons les éléments dont le nom de classe est une enveloppe A normale. Ensuite, après l'élément I, je vais insérer un span avec l'adresse texte. C'est bon. Après cela, je vais ouvrir le paragraphe et ajouter ici le nom de la classe, le paragraphe PAR. Le paragraphe comprendra cinq éléments d'envergure différents. Ouvrons une bibliothèque de livres Span et non sécurisée. Ensuite, je vais dupliquer l'élément span quatre fois. Allons-y et modifions-le le contenu. La deuxième travée sera Main Street 123. C'est une adresse fictive. Ensuite, nous aurons le septième étage. La prochaine sera New York, et enfin nous avons besoin de l' État, New York, États-Unis. Bien, je vais maintenant créer les icônes des réseaux sociaux. Ouvrons le tag avec le nom de classe social media. Je vais insérer ici quatre icônes de réseaux sociaux différentes. Le premier sera FA Brands, FA, Facebook. Dupliquons-le trois fois et changeons les noms rapides. La deuxième icône des réseaux sociaux sera celle d'Instagram. Ensuite, nous aurons ici un lien. Enfin, je vais insérer ici X Twitter. Allons-y et vérifions les icônes si elles sont toutes affichées. Comme vous pouvez le voir, nous en avons ici quatre pour les icônes, tout fonctionne bien. Ensuite, je vais insérer la deuxième partie du contenu du pied de page, qui sera le formulaire Interférons avec les éléments du formulaire. Débarrassez-vous de l'attribut action, nous n'en avons pas besoin. À l'intérieur de l'élément de formulaire, je vais ouvrir la balise qui sera le groupe d'entrée. Je vais insérer ici quatre éléments d'entrée différents. Ouvrons la balise de saisie avec le texte de type. Et nous avons également besoin d' un attribut placeholder. Insérons ici le nom. Dupliquons cette ligne de code trois fois. Le deuxième élément de saisie sera destiné au courrier électronique. Modifions les attributs de l'espace réservé dans les e-mails. Ensuite, nous aurons une saisie de texte, et l'espace réservé sera le téléphone Quant au dernier élément d'entrée, ce sera l'adresse. Bien, après cela, je vais passer à la zone de texte d'introduction Ajoutons ici l'attribut placeholder. Ce sera un message après une zone de texte. Nous avons besoin du bas avec le bas serré comme valeur du bouton que je vais insérer ici. OK, alors passons éléments du formulaire. Ensuite, je vais créer un développement, qui se situera en bas du bas du pied de page Il comprendra un paragraphe, insérons ici le signe du copyright. Ce sera une entité H T cinq nous avons besoin d'un pourcentage de copies et d'une colonne Sammy suivies d'une bibliothèque de trois livres de texte Alors tous droits réservés. Après le paragraphe, je vais insérer un bouton avec le bouton de saisie à l'intérieur du bouton. Je vais insérer éléments de lien avec le texte retour en haut et je vais insérer les éléments de votre œil avec les noms des classes, un chevron plein vers le haut C'est bon. Je pense donc que c'est correct. Allons-y et vérifions-le dans le navigateur. Comme vous pouvez le constater, nous avons ici tous les éléments. J'espère que tout est correct ici car nous avons de nombreux éléments HTM différents. C'est bon. Allons-y et passons à la prochaine conférence, dans laquelle nous allons intituler le 17. Pied de page de style: Dans la conférence précédente, nous avons créé le balisage HTML pour le pied de page, et nous allons maintenant styliser ces éléments Comme vous pouvez le constater, l' en-tête est déjà stylisé. Nous devons également positionner ces éléments. Nous devons styliser les autres éléments. Nous devons faire en sorte que le pied de page ressemble à. Revenons au code VS et juste après les témoignages dans le fichier CSS, insérez de nouveaux commentaires pour le pied Ensuite, je vais sélectionner un élément de pied de page. Définissons avec 100 %. Ensuite, je vais utiliser Flex box pour aligner le contenu à l'intérieur du pied de page Nous avons besoin de Display Flex. Ensuite, je vais changer de direction. Nous allons aligner les éléments verticalement dans la colonne. Nous avons besoin que la direction de flexion soit une colonne, puis je vais aligner les éléments au centre. Enfin, créons de l'espace à l'intérieur du pied de page. Il nous faut du pudding Il y aura 15 béliers en haut, zéro sur le côté droit, trois béliers en bas et zéro sur le côté gauche. Très bien, passons aux éléments du pied de page. Comme vous pouvez le constater, le contenu est placé au centre. Ensuite, je vais m' occuper de l'en-tête. Allons-y et sélectionnons l'en-tête du pied de page. Alignons le texte au centre. De plus, je vais créer de l'espace en bas en utilisant la marge. En bas avec une valeur de 15 000 dollars. Comme vous pouvez le constater, les titres sont placés au centre. Il faut sortir de la frontière. Je vais placer cet élément bleu au centre de la bordure. Allons-y et sélectionnons l' en-tête du pied de page suivi la bordure de section dont nous avons besoin après l'élément pour le centrer Je vais définir la position gauche à 50 %. Ensuite, pour un centrage parfait, nous devons transformer la fonction translate x avec la valeur -50 %. OK, fois l'élément placé au centre de la bordure, nous devons ensuite nous occuper du contenu Je parle du contenu du pied de page, de cet élément ici. Allons-y et sélectionnons le contenu du pied de page. Je vais définir la largeur, elle sera de 60 %. Ensuite, je vais placer le contenu, les éléments flexibles côte à côte horizontalement. Par conséquent, nous devons utiliser Display Flex. Je vais également créer de l'espace en bas. Utilisons la marge, dix mètres en bas. Comme vous pouvez le voir, l'adresse et les champs de saisie sont placés côte à côte horizontalement. Ensuite, je vais m' occuper de la partie sociale. Je veux dire, pour l'élément social, allons-y, sélectionnons le social et définissons avec 30 % d'accord. Ensuite, je m' occuperai du développement au sein de l'adresse. Je parle de ce développement ici, allons-y et sélectionnons Adresse, puis le développement que je vais utiliser à nouveau, boîte en lin, nous avons besoin d'un drapeau, puis nous devons placer les éléments d'une ligne puis le développement que je vais utiliser à nouveau, boîte en lin, nous avons besoin d'un drapeau, puis nous devons placer les éléments d'une ligne au centre et créer un espace en bas. Faisons en deux. OK, comme vous pouvez le voir, les éléments sont alignés et il y a un espace entre l'adresse et ces éléments ici. Ensuite, je vais m' occuper du phonosomicum, je veux dire, de ce phonosomicum je veux dire Allons-y et sélectionnons la robe, puis les éléments. Je vais augmenter la taille du téléphone. Ça va être 3,5. Ensuite, je vais changer de couleur. Faisons en sorte qu'il soit blanc. Et créez également de l'espace sur le côté droit en utilisant la marge, n'est-ce pas ? La valeur sera de 2,3 RAM, donc l'icône est belle. Ensuite, nous devons prendre soin de ces éléments de poêle. Ce mot ici, adresse. Allons-y et sélectionnons l'adresse, puis le développement. Ensuite, nous avons besoin de Span. Réglons la taille du téléphone à 1,8 RAM. Ensuite, je vais modifier le poids du téléphone. Rendons le téléphone plus audacieux. Mettons-le en gras. Je vais transformer le texte en majuscules. De plus, nous avons besoin que l' espacement des lettres soit de 0,2 RAM. Enfin, rendons le texte blanc en utilisant la couleur blanche. OK, donc ça tourne autour de l'élément span. Ensuite, je vais m'occuper du paragraphe tel que vous vous en souvenez. Nous avons ici un paragraphe qui inclut cinq éléments d' envergure différents. Allons-y et sélectionnons Address power. En fait, nous avons ici un petit type. Nous avons besoin du double D. Maintenant, sélectionnons le paragraphe. Je vais utiliser Flex Book. Utilisons Display Flex. Ensuite, nous devons aligner les éléments verticalement dans la colonne. Direction de flexion, colonne. Ensuite, je vais créer de l'espace en bas en utilisant le bas En plus de cela, je vais créer de l'espace dans le paragraphe de gauche à l'aide du rembourrage Il reste six Ram. OK. Comme vous pouvez le voir, les éléments de la travée sont placés verticalement dans la colonne. Ensuite, nous devons personnaliser ces éléments de span. Allons-y et sélectionnons l'adresse par, puis l'élément span. Réglons avec 210 RAM. Ensuite, la taille du téléphone sera de 1,4. Je vais également changer de couleur. Faisons en sorte qu'il soit blanc. Enfin, je vais créer un espace en bas en utilisant la marge. 0,5 RAM inférieure. Très bien, les éléments des épingles sont beaux. Ensuite, nous devons prendre soin des icônes du téléphone. Je parle des icônes des réseaux sociaux. Nous avons quatre icônes de réseaux sociaux différentes. Allons-y et personnalisons ces éléments. Nous devons sélectionner les médias sociaux puis les éléments oculaires. Augmentons la taille du téléphone. Il va y en avoir trois. Ensuite, il faut que la couleur soit blanche. Nous avons également besoin d'un peu d'espace sur le côté droit. Fixons la marge directement aux Rams. Je vais changer le curseur. Faisons en sorte qu'il soit pointu. OK, donc le formulaire, certaines icônes ont l'air bien. Ensuite, nous devons nous occuper du formulaire. Allons-y et sélectionnons l'emballage, qui est en forme de pied Nous allons sélectionner le formulaire. Je vais définir la largeur, elle sera de 70 %, comme vous vous en souvenez, le côté gauche occupait 30 % de la largeur de la section. Quant au côté droit, le formulaire, il devrait occuper 70% de la largeur totale. Ensuite, je vais sélectionner les éléments du formulaire. Utilisons Flex Box. Nous avons besoin de Display Flex. Ensuite, je vais placer les éléments flexibles verticalement dans la colonne en utilisant la colonne de direction de flexion. Bien, après cela, je vais sélectionner le groupe de saisie. Je parle de cet élément ici. Il comprend quatre champs de saisie différents. Allons-y et sélectionnons Input Group. Utilisons encore une fois, Flex Books. Nous avons besoin de Display Flex. Ensuite, je vais créer un espace entre les éléments flexibles en utilisant justify content, space between. Bien, après cela, je vais personnaliser l'entrée elle-même. Allons-y et sélectionnons groupe d'entrée suivi de l'élément d'entrée. Réglons W 273, puis je vais régler la hauteur à six RAM. Créons également de l'espace en bas en utilisant la marge, les trois derniers Ram. Très bien, si nous examinons la version finale, vous verrez que les éléments d'entrée sont placés sur deux lignes. Pour ce faire, je vais ajouter ici l'une des propriétés de la boîte flexible appelée flex wrap avec la valeur p. Maintenant, comme vous pouvez le voir, elles sont placées, les casques de saisie sont placés sur deux lignes différentes. Ensuite, je vais sélectionner les entrées et la zone de texte simultanément. Parce que nous avons besoin de styles similaires, je vais prendre le sélecteur à partir d'ici Ajoutons ici une zone de texte. Je vais changer la couleur de fond. Il va y en avoir 111, puis je vais me débarrasser de la bordure pliante. Réglons-le sur non. Je vais également créer de l'espace dans champs de l'Empa en utilisant du pudding d'un mètre . Ensuite, réglons taille du téléphone sur 1,4 et changeons également la couleur Il sera de couleur gris clair. D'accord, comme vous pouvez le voir, les champs de saisie sont plutôt jolis. Rendons-les légèrement arrondis en utilisant le rayon de bordure. Mettons-le à 2.5 D'accord, il s'agit donc des champs de saisie. Ensuite, nous devons prendre soin de la zone de texte. Nous devons ajouter des styles individuels à la zone de texte. Allons-y et sélectionnons la zone de texte. Je vais régler la hauteur 215 Ram. Créons également de l'espace en bas en utilisant la marge, les trois derniers Ram. En plus de cela, je vais désactiver la fonction de redimensionnement. heure actuelle, nous pouvons redimensionner la zone de texte et, comme vous pouvez le constater, cela peut casser la mise en page Je vais désactiver cette fonction. Nous devons redimensionner pour n' en avoir aucun, d'accord ? Désormais, nous ne pouvons plus redimensionner la zone de texte. Ensuite, je vais m' occuper du bouton. Allons-y et sélectionnons le formulaire de pied de page, puis l'élément bouton Nous avons besoin de Width, ça va être 20. Ensuite, je vais régler la hauteur à cinq. Changez également la couleur de fond. Utilisons ici la couleur bleue. Ensuite, je vais placer le bouton sur le côté droit. Et nous pouvons le faire simplement en utilisant la propriété de gauche de la marge avec la valeur, maintenant elle est placée sur le côté droit. OK. Débarrassons-nous ensuite de la bordure par défaut. Je vais le régler sur non. Nous avons également besoin d'un rayon de bordure. Réglons-le à 0,5 fram, changeons le poids de la graisse. Mettons-le en gras et changeons la couleur du texte. Je vais le rendre blanc pour que le bouton soit beau. Je vais y ajouter quelques propriétés différentes. Le suivant est l'espacement entre les lettres. Nous avons besoin d'un espace entre les lettres. Faisons en sorte que ce soit 0,1 RAM. De plus, je vais placer le curseur sur le pointeur. La dernière chose que je vais faire est de créer un effet d'ombre. Réglons box shadow à 0,5 RAM, soit un RAM. Et la couleur sera R B A. L'opacité sera de 0,1 D'accord, donc je trouve que le bas est un peu joli Ensuite, je vais y ajouter un effet de clic. Pour cela, nous devons sélectionner bottom puis la pseudo-classe active. Ensuite, nous devons utiliser transform translate y avec la valeur 0,21 Si je clique, nous obtiendrons ici ce bel effet de clic Très bien, maintenant nous devons nous occuper de cette partie en bas de page Nous devons personnaliser les éléments et les aligner comme suit , alors allons-y et sélectionnons le bas. Je vais définir la largeur, elle sera de 60 %. Ensuite, nous avons besoin d'une boîte flexible pour aligner les éléments afin d'utiliser Display Flex. Je vais créer un espace entre les éléments flexibles en utilisant justify content. Espace entre. Et nous devons également les aligner verticalement au centre. En utilisant le centre d'alignement des éléments. OK, ils sont bien alignés. Ensuite, nous devons personnaliser chacun des éléments. Je parle du paragraphe et aussi du bas. Allons-y et commençons par le paragraphe. Sélectionnez le pied de page, en bas de page. Ensuite, je vais régler la taille du défaut 1,4 RAM et également changer la couleur, la rendre gris clair à l'aide de CCC Encore une fois, c'est tout, à propos du côté gauche, faut maintenant s'occuper du bas. Je vais sélectionner foot Bottom, puis l'élément bouton. Je vais régler la largeur et la hauteur. La largeur sera de 15 RAM. Ensuite, nous avons besoin de hauteur, je vais la régler à cinq RAM. Je vais obtenir la bordure par défaut de rou. Réglons-le sur none et obtenons également l'arrière-plan par défaut. Réglons-le également sur aucun. Très bien, je vais ensuite sélectionner Link Elements. N'oubliez pas que nous avons créé un élément de lien à l'intérieur du bouton. Cela inclut la flèche, je veux dire l'élément. Allons-y et sélectionnons F en bas. Ensuite, nous avons besoin d'un bouton suivi des éléments. Réglons la hauteur à 100 %. Je vais utiliser Flex Box. Réglons l'affichage pour qu'il soit flexible. Ensuite, je vais créer un espace entre le texte et les éléments. Nous devons justifier l'espace de contenu de manière uniforme. Ensuite, nous devons placer les éléments au centre verticalement à l' aide d'un centre d'éléments de ligne. Comme vous pouvez le constater, il y a un espace entre ces deux parties. Ensuite, je vais changer la taille du téléphone, disons à 1,4 RAM. Changez également la couleur. Réutilisez, CCC. Ensuite, nous devons mettre le texte en majuscules à l' aide de la transformation du texte en majuscules Enfin, créez un espace entre les legers en utilisant espacement entre les lettres de 0,1 Ram OK, tout a l'air bien, et en fait, avec le pied de page, c'est terminé Ensuite, nous devons prendre soin de la barre de défilement. Je veux dire, nous devons personnaliser la barre de défilement. Je vais également cliquer sur le lien ci-dessous. Une fois que nous avons cliqué sur ce bouton ici, de retour en haut, nous devrions faire défiler la page doucement vers le haut. Lors de la prochaine conférence, nous nous occuperons de ces choses. Passons à la vidéo suivante. 18. Barre de défilement personnalisée et défilement fluide: Très bien, lors de la dernière conférence, nous avons fini de travailler sur la page d'accueil principale de notre projet. Nous avons personnalisé le pied de page. Maintenant, comme je l'ai dit, nous devons passer à autre chose et personnaliser la barre de défilement par défaut de la page. Comme vous pouvez le voir dans le projet terminé, nous avons cette barre de défilement agréable et cool , différente de celle par défaut. Dans cette conférence, je vais personnaliser la barre de défilement. Et en plus de cela, je vais créer cet effet de défilement fluide. Je veux dire, une fois que nous avons cliqué ici, ce bouton pour revenir en haut, nous devons faire défiler la page doucement vers le haut. Allons-y, passons au code VS et prenons tout d'abord soin de la barre de défilement. Je vais créer de nouveaux commentaires, une barre de défilement personnalisée. Ensuite, je vais sélectionner la barre de défilement. Et de la manière suivante, nous avons besoin d'éléments corporels. Ensuite, suivi du kit Web, de la barre de défilement. C'est ainsi que vous pouvez sélectionner la barre de défilement. Il s'agit d'un pseudo élément. Tout d'abord, je vais définir la largeur de la barre de défilement. Passons à 1,2 m. Pour le moment, nous avons défini la largeur de la barre de défilement. Si je le fais, disons dix RAM, je veux dire 100 pixels, alors vous verrez que la largeur de la barre de défilement sera de 100 pixels. Revenons-en là, 1,2 RAM. Une fois que la largeur de la barre de défilement est définie. Ensuite, nous devons prendre cette partie de la barre de défilement ici. Allons-y et dupliquons ce code. Comme je l'ai dit, nous avons besoin d'un kit Web, d'une barre de défilement, d'un pouce. Je vais changer la couleur de fond. Ce sera la couleur bleue que nous utiliserons tout au long ce projet, comme cette couleur. En plus de cela, je vais ajouter un rayon de bordure au pouce. Je veux dire, je veux arrondir les coins de la barre de défilement comme suit : ajoutons ici le rayon de bordure et faisons-en cinq. OK, nous avons donc ici barre de défilement bleue avec un rayon de bordure agréable et cool. La prochaine chose que je vais faire est de changer de couleur. Je parle de la couleur de fond de la piste. Comme vous pouvez le voir, nous avons ici une piste avec un fond gris foncé. Allons-y et dupliquons ce code, nous devons ajouter ici une piste au lieu du pouce. Débarrassons-nous du rayon de bordure comme couleur de fond et continuons à 121 contre un. OK, c'est ça. Nous avons ici une barre de défilement agréable et cool , différente de la barre de défilement par défaut. Pour être honnête, je n'aime pas du tout la barre de défilement par défaut. Je pense que celui-ci est bien meilleur. OK, c'est situé au-dessus de la barre de défilement. Ensuite, nous devons prendre soin du défilement fluide afin de le faire défiler en douceur vers le haut. Une fois que nous avons cliqué sur ce bouton ici, suffit d'utiliser une propriété il suffit d'utiliser une propriété et de l'ajouter à l'élément HTML. Je vais utiliser le comportement de défilement, je vais le rendre fluide. Maintenant, une fois que nous aurons cliqué sur les éléments du lien ci-dessous, nous pourrons faire défiler la page en douceur vers le haut. OK. Alors c'est tout. Nous avons fini de travailler sur la page d'accueil principale. Ensuite, nous devons prendre soin des pages. La première page que nous allons créer portera sur cette page ici. Pour cela, passons à la prochaine conférence. 19. Créer un balisage HTML pour la page À propos de nous: Lors de la dernière conférence, nous avons fini de travailler sur la page d'accueil principale. Je veux dire, nous avons créé toutes ces sections. Maintenant, comme je l'ai dit, nous allons créer les différentes pages car, comme vous le savez, notre site Web est un site Web de plusieurs pages. Dans cette conférence, nous allons commencer à créer la page À propos. Nous pouvons accéder à la page À propos de différentes manières. Nous pouvons cliquer sur l'un des boutons appelés Explorer. Nous pouvons également accéder à la page à propos de S depuis la navigation. Si nous cliquons sur le lien À propos, nous accédons à la page à propos. Bien, dans cette conférence, nous allons créer le balisage HTML Tout d'abord, nous devons créer de nouveaux fichiers pour la page à propos. Disons que le premier portera sur le HTML. Nous avons également besoin d'un fichier pour CSS. Je vais préparer ce fichier sur le CSS. Très bien, déplaçons le fichier HTML vers la gauche. Ensuite, je vais accéder à l'index du fichier de courrier HT et copier la page entière. Ensuite, je vais le coller dedans, le fichier de courrier à propos de HT. Allons-y et supprimons toutes les sections. Je vais supprimer ces sections sauf le pied de page car nous avons besoin d'un pied Ensuite, je vais supprimer la bannière de l'en-tête. Pour ce qui est de la navigation, je vais insérer ici les noms des fichiers HTML que nous avons déjà créés à propos du En fait, nous devons corriger le nom du fichier, car il devrait être à peu près. Je vais insérer ici les noms des fichiers. Passons au fichier HTML d'index et insérons ici les noms des fichiers au lieu des dièse. Le premier lien sera l'index HTML. Ensuite, nous parlerons du HTML, la page suivante, qui n'a pas encore été créée pour le moment, ce sera du HTML pour les livres. Ensuite, nous aurons des témoignages en HTML. En ce qui concerne la section contact, je vais insérer ici, il suffit de contacter, car nous n'aurons pas de page séparée pour la section contact. Je vais insérer ici signe de la livre suivi du contact. Très bien, allons-y, copions ces cinq liens et collez-les ici à la place de ces liens. Bien, nous devons maintenant lier le fichier CSS que nous venons de créer. Je veux dire, le fichier à propos du CSS. Dupliquons cette ligne et changeons le nom du fichier CSS. Il s'agira de CSS. Très bien, allons-y et vérifions le navigateur. Si nous ouvrons la navigation et cliquons sur le lien À propos, nous accédons à la page à propos de S. Pour le moment, nous n'avons ici qu'un logo, l'icône du menu et le pied de page. Nous devons maintenant créer le contenu de la page à propos. Avant cela, je vais faire une chose. Passons au fichier mail index d, h, t et trouvons le bouton Explorer. Je vais définir l'attribut de référence H. Il s'agira de HTML, car une fois que nous avons cliqué sur ce bouton, nous devons accéder à la page Bods Passons au navigateur. Cliquez sur le bouton. Comme vous pouvez le constater, cela ne fonctionne pas. Si nous cliquons sur le lien, nous accédons à la page des demeures Il y a un problème avec le bas et le lien. Passons au style du fichier CSS et trouvons le bouton. Je vais changer la couleur de fond de l'élément de lien afin de voir quel est le véritable problème. Faisons en sorte que la couleur soit rouge. Comme vous pouvez le constater, l'élément lien ne couvre pas tout le bas. C'est pourquoi nous n'avons pas pu accéder à la page du mode. Pour résoudre ce problème, je vais régler l'affichage sur flex. Maintenant, comme vous pouvez le voir, l'élément lien couvre l'ensemble du bouton. Mais il faut centrer le texte. Par conséquent, nous devons utiliser ici justify, centre de contenu et un centre d'éléments de ligne. Maintenant, le problème est réglé. En bas, je veux dire, l'élément lien fonctionne bien. Débarrassons-nous de cette couleur d' arrière-plan à partir d' ici et vérifions-le encore une fois. Maintenant, tout a l'air et fonctionne bien. Bien, revenons au fichier HTML en gras. Dans l'élément d'en-tête, je vais insérer deux en-têtes, je veux dire H, quatre éléments de titre avec le titre de section du nom de classe SM Le texte va parler de nous. Dupliquons ce code. Nous avons besoin d'un élément de titre H. Je vais également changer le nom de la classe. Ce sera le titre de section LG. Quant au texte que je vais insérer ici, explorez nos valeurs. Vérifie le navigateur. Je vais accéder à la page à propos. Nous avons ici deux rubriques. Ils sont déjà stylisés car nous avons utilisé ici le titre de section de classe SM et le titre de section LG Ces classes ont été utilisées dans l'index de HTMILoPile. Ces éléments ont déjà quelques styles. Ensuite, je vais insérer les commentaires juste après l'en-tête dont nous avons besoin ici à propos de Je vais ouvrir les éléments de section avec le nom de classe About section. À l'intérieur de l'élément de section, nous aurons deux parties différentes. Le premier sera l' en-tête de la section à propos. Je vais ouvrir des éléments avec le nom de classe about section header. Dans l'en-tête, je vais ouvrir H un élément de titre. Ce seront nos fonctionnalités. Je vais ajouter ici le nom de la classe, titre de section LG parce que nous avons besoin de styles similaires. En fait, nous avons besoin de la classe ici, saisissons la valeur et collons-la dans la classe. En plus de cela, je vais utiliser la bordure de section que nous avons utilisée dans la page principale. Nous avons besoin ici d'une bordure de section. Vérifie le navigateur. Nous avons ici le titre et la bordure de section. Ensuite, je vais créer les fonctionnalités. Je veux dire, cette partie, je parle de ces fonctionnalités. Allons-y et juste après l'en-tête de section je vais ouvrir un nouveau développement. Et c'est au-dessus des fonctionnalités de la page que je vais ouvrir la fonctionnalité elle-même. Dans cette section, je vais utiliser les symboles matériels de Google. Donc, allons-y et visitons le site Material Symbols. La première icône que je vais rechercher se trouvera dans le port Contacts. J'ai besoin de cette icône ici. Copions le code et collons-le dans l'élément principal. Ensuite, je vais récupérer l'élément span et l'insérer ici. Outre les éléments d'envergure, nous aurons trois éléments de titre H et il s' agira d' une sélection blanche de livres. Au total, nous aurons huit fonctionnalités. Je vais donc dupliquer ce code sept fois. Ensuite, nous devrions changer les icônes et aussi les titres. Tout d'abord, vérifions dans le navigateur si l'icône est affichée. Comme vous pouvez le constater, l' icône s'affiche. Allons sur le site Web de Google Phone et recherchons une icône appelée Grid View. Récupérons ces éléments d'envergure et remplaçons celui-ci. Quant au titre, il sera convivial. Interface. Ensuite, nous devons rechercher des livres de bibliothèque. Reprenons les éléments de la vitre et remplaçons cet orme ici. Le titre sera composé de formats accessibles. Ensuite, je vais rechercher un formulaire d'appel à icônes. Copions cet élément de poêle et collons-le ici. Le titre sera l'engagement communautaire. Vérifie le navigateur, toutes les icônes sont affichées. Ensuite, je vais chercher une école. Prenons ces panneaux et collons-les ici. Ensuite, je vais supprimer ce contenu d'ici et insérer des ressources pédagogiques. Ensuite, je vais rechercher la langue dont nous avons besoin ici, Langue. Prenons cet élément span et remplacons-le, en fait celui-ci ici. En ce qui concerne le titre, je vais insérer le support multilingue L'icône suivante sera la fonction Wi-Fi off. Copions cet élément span et collons-le ici. En ce qui concerne l'élément d'en-tête, insérons ici la lecture hors ligne. Je vais maintenant chercher le dernier symbole. Ce sera une signature. Il nous faut une signature. Nous avons besoin ici d'un. Reprenons l'élément span et changeons également le titre. Il y aura d' autres promotions. Une caméra équipée de toutes les icônes s'affiche. Ensuite, nous devons nous occuper de la deuxième partie de la section à propos. Je parle de la partie équipe. Nous avons ici l'image de fond suivie du titre et également trois images différentes du contenu du site Web. Allons-y et ouvrons le développement avec l'équipe chargée des noms de classe. Je vais sécuriser H un élément de titre, ce sera l'équipe Ensuite, après les éléments de titre H, nous devons ouvrir tug et ce seront les membres, il enveloppera la section des membres Ensuite, je vais ouvrir le remorqueur et ce sera le membre lui-même. Chaque membre sera composé d'une image et deux éléments de rotation pour le nom et pour la position. Ouvrons la balise image. Je vais supprimer l'attribut out pour l'attribut source. Sélectionnons le dossier des images, puis nous devons sélectionner le membre. Ensuite, je vais ouvrir le tag span avec le nom de la classe, le nom du membre. Ce sera John Roberts. Dupliquons le membre deux fois car au total, nous avons trois membres de l'équipe. Je vais changer le nom de l'image. Ce sera le deuxième membre de l'image. En fait, nous avons oublié d'ajouter le poste. Ajoutons ici le poste de membre. C'est un archiviste numérique. Je vais prendre cet élément de ventilateur et l' ajouter pour les deux éléments d'envergure, je veux dire pour les deux membres. Le deuxième membre sera brun. En ce qui concerne le poste, je vais l'insérer ici, Curateur. Enfin, nous avons besoin du troisième membre. Ce sera un bail pour les hivers. Pour ce qui est du poste, insérons ici celui de community manager. accord ? Je pense que tous les éléments sont créés en ce moment. La page à propos est plutôt moche, mais nous allons nous en occuper La seule chose que je vais faire est d' ajouter un nouveau nom de classe pour le pied. Ça va être trop. Nous avons besoin de ce nom de classe pour ajouter des styles individuels au pied. Dans la page à propos, toute la balise H de la page à propos est créée Ensuite, nous devons styliser ces éléments. Et pour cela, passons à la prochaine conférence. 20. Page stylistique à propos de nous: Très bien, dans la leçon précédente, nous avons créé le balisage HTML pour la page à propos de S. Maintenant, comme je l'ai dit, nous devons styliser cette page dès maintenant. Comme vous pouvez le constater, la page est plutôt moche. Allons-y et commençons à le personnaliser. La première chose que je vais faire est d'ajouter quelques classes différentes à l'élément d'en-tête. Je vais ajouter deux classes, la première portera sur l'en-tête. Je vais utiliser ce cours pour un style individuel. Je vais également ajouter ici le nom de la deuxième classe, l'en-tête de page. Je vais également utiliser cette classe dans d'autres pages pour l'élément d'en-tête que nous allons créer dans les prochaines conférences. Encore une fois, ce nom de classe sera destiné à un style individuel. En ce qui concerne l'en-tête de page, ce sera pour un style courant. A Ensuite, je vais insérer ici quelques commentaires différents. Je vais ajouter un commentaire ici à propos de l'en-tête. Ensuite, nous avons besoin de l'en-tête end of about. En fait, nous avons besoin de la fin de l'en-tête. Déplaçons cette ligne vers le bas. Ensuite, nous avons besoin de commentaires pour les fonctionnalités. Je vais prendre cette ligne et la coller ici. Je vais également ajouter des commentaires pour l'équipe. Découpons cette ligne de code et collons-la ci-dessous. En fait, oui, c'est exact. C'est bon, c'est ça. Je vais aller au fichier CSS, je veux dire à propos du fichier CSS et je vais masquer quelques éléments. Allons-y et commençons par la section «   À propos ». Ajoutons ici l'affichage N. Ensuite, je vais aussi masquer l'équipe, je vais masquer le pied de page Je fais cela afin de rendre notre processus de création de style plus pratique et plus simple. Réglons l'affichage sur aucun. Je cache ces éléments pendant un moment. Passons au navigateur. Comme vous pouvez le voir, nous n'avons ici que l'élément d'en-tête. La prochaine chose que je vais faire est de passer au style du fichier CSS. Et dans l'élément d'en-tête, je vais personnaliser l'en-tête de page. Je parle de cet élément ici. Sélectionnons l'en-tête de page. Tout d'abord, dans vos commentaires, pour l'en-tête de page, j' écris ce code dans le fichier CSS stylisé car nous utiliserons également ce code pour d'autres pages Nous avons besoin ici de l'entête de fin de page. Sélectionnons l'en-tête de page. Tout d'abord, définissez avec en hauteur. Le with sera de 100 %. Quant aux Je vais 32, 40, alors je vais utiliser la boîte flexible pour aligner le contenu. Utilisons Display Flex, puis nous avons besoin la direction du flex soit une colonne, car je vais aligner les éléments verticalement dans une colonne. Ensuite, nous allons placer le centre de contenu à l'aide du centre contenu de justification et d'un centre des éléments de ligne. Passons au navigateur. Ici, nous avons l'en-tête. Je vais déplacer le titre un peu vers le bas. Allons-y et sélectionnons l'en-tête de page. Suivi par le titre de section SM. Je vais monter en haut de la rampe 15. Très bien, c'est tout, à propos de l'alignement. Ensuite, je vais changer le fond d'écran. Je vais définir l'image de fond. Passons au fichier CSS à propos de ce fichier CSS et je vais inspirer des commentaires pour À propos. En fait, je vais placer la fin commune ici. Je vais sélectionner À propos de l'en-tête. Ensuite, je vais définir l'arrière-plan. Utilisons la fonction de gradient linéaire. La première couleur sera RGBA 3033 fois, et l'opacité 0,9 Quant à la deuxième couleur, je vais utiliser la même couleur, mais l' opacité sera 0,7. Ensuite, je vais définir Sélectionnons l'image intitulée « À propos de PG ». Ensuite, nous avons besoin que la position soit au centre. De plus, il n'est pas nécessaire de répéter. En plus de cela, je vais ajouter ici taille de fond pour la couverture de valeur ici. Nous avons l'image comme arrière-plan de l'en-tête. Ensuite, je vais m' occuper de la section à propos. Pour le moment, il est masqué. Je vais me débarrasser de cette ligne de code. Je vais utiliser Flex box afin d' aligner les éléments display flex. Ensuite, nous devons changer la direction dans laquelle ce sera une colonne. De plus, je vais aligner les éléments au centre. Ici, nous avons les fonctionnalités. Ensuite, je vais créer de l'espace en utilisant, je vais régler le rembourrage à 15 RAM haut et en bas et à zéro sur les côtés gauche et droit Nous avons maintenant de l'espace à l'intérieur de la section. Ensuite, je vais m'occuper de l'en-tête de la section. Ajoutez ici de nouveaux commentaires pour l'en-tête « À propos ». Allons-y et sélectionnons À propos de l'en-tête de section. Je vais passer à une ligne de texte au centre. Ensuite, je vais créer de l' espace en bas à l'aide d'un rembourrage En bas, il y aura dix RAM. En plus de cela, je vais déplacer l'en-tête vers la droite tel que nous l' avons dans le projet terminé. Je parle de cet en-tête ici. Pour ce faire, je vais utiliser pour traduire avec valeurs 7 % puis 50 % . Nous déplaçons les éléments le long de l'axe x et également le long de l'axe y. OK, comme vous pouvez le voir, l'en-tête est placé sur le côté droit. En fait, nous en avons besoin ici. Ligne de texte à droite, et non au centre, car nous avons besoin que le texte soit placé sur le côté droit. OK, la prochaine chose que je vais faire est occuper de l'élément suivant. Je vais le placer ici. Allons-y et sélectionnons à propos de l'en-tête de section suivi de la bordure de section. Après l'élément, je vais régler la position gauche sur automatique. Ensuite, il faut que la bonne position soit zéro. Et je vais également utiliser transform translate x avec une valeur nulle afin placer l'élément sur le côté droit. Maintenant, tout semble aller pour le mieux. Très bien, voyons l'en-tête ci-dessus. Ensuite, je vais m' occuper des fonctionnalités. Allons-y et insérons vos nouveaux commentaires sur les fonctionnalités. Ensuite, je vais sélectionner À propos des fonctionnalités de la page. Tout d'abord, je vais régler cette plaque pour flexible, car nous allons aligner les éléments à l'aide de Flex Book. Alors je dois justifier le centre de conférence. En fait, nous avons également besoin d'un centre. Ensuite, je vais définir la largeur. Réglons-le à 60 % Jetons un coup d'œil au navigateur. Bien, après cela, je vais définir la largeur et la hauteur de la fonction. Allons-y et sélectionnons la fonctionnalité elle-même. Je vais régler la largeur à 20 m, puis la hauteur sera également de 20. Et je vais aussi changer la couleur de fond. Réglons sur 18183 fois. Ensuite, je vais créer un espace entre ces entités en utilisant une marge, disons 23 rampes. heure actuelle, je vais placer les fonctionnalités sur deux lignes différentes, comme nous l'avons fait dans le projet final. Pour cela, je vais ajouter ici, à l'élément parent, la propriété appelée flex wrap avec la valeur p. Maintenant, comme vous pouvez le voir, les entités sont placées sur deux lignes différentes. Ensuite, je vais personnaliser les fonctionnalités. Je vais ajouter ici quelques propriétés différentes. Le prochain sera le rayon de la bordure parce que nous allons créer les éléments qui l'entourent, la valeur sera de trois RAM. Ensuite, je vais créer un effet d'ombre en utilisant Box Shadow. Les valeurs seront de 0,5 à 1 gramme et la couleur sera RBA. Nous avons besoin ici d'une couleur noire avec une opacité de 0,2 Très bien, alors je vais aligner les éléments à l'intérieur des fonctionnalités Pour cela, je vais utiliser, encore une fois, des livres flexibles. Je vais changer de direction car les éléments doivent être placés verticalement. La direction sera une colonne. Ensuite, je vais aligner les éléments au centre. Ensuite, nous avons besoin d' un peu d'espace entre les éléments en utilisant même l'espace de contenu justifié. Nous allons vérifier les résultats. D'accord, comme vous pouvez le voir, les éléments sont bien alignés. Je vais créer le pointeur du curseur. Bien, avant de styliser ces deux éléments, je parle des icônes et des en-têtes Je vais modifier la position de certaines fonctionnalités Je vais aligner les fonctionnalités de cette façon ici. Allons-y et sélectionnons Fonctionnalité avec le sélecteur de graphique. Nous avons besoin de la fonctionnalité numéro deux, Nous avons besoin de la fonctionnalité numéro puis de la fonctionnalité numéro six Nous avons besoin des mêmes positions pour deux fonctionnalités. Je veux dire que dans la même position, nous devons déplacer ces deux entités à la même distance. Allons-y et utilisons Transform Translate. La valeur sera de six d. Comme vous pouvez le voir, le deuxième et les six éléments sont placés en bas. Faisons de même pour le reste des articles. Je vais dupliquer le code dont nous avons besoin ici, enfant numéro trois puis numéro sept, nous devons les déplacer de 12 RAM. Enfin, nous devons également prendre soin de ces deux éléments. Dupliquons ce code. Changez les numéros dont nous avons besoin ici. 4.8 Quant à la valeur de la fonction y traduite, elle sera de 18 Ram. OK, comme vous pouvez le voir, les fonctionnalités sont parfaitement alignées. Maintenant, nous devons créer cette partie ici, je parle de ce cercle. Je vais le faire en utilisant quatre pseudo-éléments. Sélectionnons la fonctionnalité suivie des pseudo-éléments précédents. Faisons en sorte que le contenu soit vide. Ensuite, je vais définir w et hauteur. Je vais les régler tous les deux sur 15 RAM. Ensuite, je vais changer la couleur de fond. La couleur sera 111. De plus, nous devons arrondir l'élément en utilisant un rayon de bordure d'une valeur de 50 %. Ensuite, je vais définir la position afin de rendre l'élément visible. Ensuite, nous avons besoin de la position relative. Pour les éléments parents, le parent est une fonctionnalité, nous avons besoin de la position relative. Nous allons vérifier les résultats que nous avons ici. Encerclez ensuite, car je suppose que nous devons déplacer le cercle vers le haut. Je vais régler la position supérieure à -40 %. Quant à la position de gauche, elle sera de 50 %. Ensuite, nous devons parfaitement centrer l'élément Nous devons transformer translate x avec la valeur -50 % OK, nous avons ici le cercle Nous devons diminuer l' opacité comme c'est le cas ici. Je vais régler l'opacité 2,7 puis masquer la partie extérieure du cercle Pour cela, il faut ajouter ici overflow. Bien, c'est à peu près l'élément situé avant. Ensuite, nous devons prendre soin des icônes et des en-têtes. Je vais sélectionner Feature puis l'élément span. heure actuelle, comme vous pouvez le voir, le cercle couvre l'élément span et nous devons résoudre ce problème. Fixons l'index à un. Maintenant, comme vous pouvez le voir, les icônes sont placées au-dessus des cercles. Le problème, c'est de parler ensuite. Augmentons la taille de l'icône du téléphone . Il va y en avoir six. Je vais également changer de couleur. Utilisons ici la couleur 320b. Les icônes sont donc plutôt jolies. Ensuite, nous devons nous occuper des titres. Je vais sélectionner Feature puis les trois éléments d'en-tête H. Réglons la taille de police à 1,8 tram. Ensuite, nous devons avoir un poids de 300. Je vais également changer la couleur du texte. Mettons-le en blanc. Ensuite, je vais définir la largeur. Mettons-le à 70 % Enfin, je vais utiliser le texte, le centre de ligne, d'accord Comme vous pouvez le voir, les titres sont plutôt jolis Et en fait, avec les fonctionnalités, nous en avons terminé. Ensuite, je vais m' occuper de la section des équipes. Je veux dire cette section ici en ce moment, elle est cachée. Tout d'abord, je vais ajouter ici des commentaires pour l'équipe. Ensuite, je vais me débarrasser de Display None. Et je vais réduire la taille de ces images parce qu'elles sont trop grandes. Allons-y, sélectionnons le membre IMG et réglons la hauteur de l'image sur 27 RAM. De plus, je vais les nourrir en utilisant la couleur object fit. D'accord, nous avons maintenant de bien meilleurs résultats. Ensuite, je vais m' occuper de l'équipe. Je suis dans l'élément wrapper. Allons-y, récupérons ce code, ajoutons-le ici. Définissons le poids et la taille. La largeur sera de 200 %, puis je vais régler la hauteur à 200 m. Nous devons également définir l'image comme arrière-plan de la section Utilisons l'arrière-plan. Je vais utiliser la fonction de gradient linéaire. Tout d'abord, nous devons définir le sens de la transition de couleur. Ce sera le plus bas. Ensuite, je vais utiliser trois couleurs différentes. La première sera de 3033 fois, et l'opacité de 0,7. Ensuite, nous aurons RGBA avec les valeurs 1927 L'opacité sera de 0,9 Quant à la troisième couleur, je vais réutiliser le RGBA 3033 fois, et l'opacité de 0,9 Très bien. Ensuite, nous devons Je vais sélectionner une image intitulée Team BG. Ensuite, nous avons besoin du centre, pas de répétition. D'accord, après cela, je vais utiliser la propriété de taille d'arrière-plan avec la valeur cover. Ensuite, nous allons vérifier le résultat. Ici, nous avons l'image de fond. En fait, si nous examinons le projet terminé, vous verrez que l' arrière-plan a une forme différente. Et je vais ajouter cette forme à l'élément en utilisant la propriété Clip Path. Je vais visiter l'un des sites Web. Cherchons Clip Path Property , puis visitons ce site Web. La voici, elle s'appelle Bennett Filly. Vous pouvez sélectionner ici toutes les formes que vous souhaitez. Dans notre cas, nous avons besoin d'un triangle. Je vais déplacer ces points pour obtenir le triangle. Nous avons besoin d'un triangle parfait. Il nous faut ici 100 %, 50 % et 100 % Maintenant, nous avons le triangle parfait. Récupérons ce code à partir d'ici et suivons le rythme. Si nous vérifions le résultat, vous verrez que nous avons ici le triangle. OK ? Ensuite, je vais masquer les parties extérieures, et pour cela, nous devons ajouter un titre de débordement aux éléments de la section Ajoutons ici overflow he. Maintenant, nous n'avons plus ici la barre de défilement. Ensuite, je vais ajouter quelques propriétés différentes à l'équipe. Nous devons aligner le contenu. Je vais utiliser Display Flex. Ensuite, nous devons changer de direction car nous devons aligner les éléments, en particulier nous avons besoin d'une colonne de direction flexible. Ensuite, je vais placer le contenu au centre à l'aide justify content center et d'aligner les éléments au centre. Voyons le résultat que nous avons ici, les images et aussi le titre suivant. Je vais ajouter un petit effet d' ombre au. Triangle utilisant une ombre en forme de boîte. Les valeurs seront 01, trois RAM et comme couleur, utilisons le noir avec une opacité de 0,9. Bien, nous devons maintenant prendre soin des membres Je vais sélectionner Wrapper development, c' est-à-dire Members Plaçons les éléments en ligne horizontale à l'aide de Display Flex. Maintenant, comme vous pouvez le voir, les images sont placées horizontalement, côte à côte. Ensuite, je vais m' occuper du titre. Allons-y et sélectionnons Team, puis l'élément de titre H un. Je vais changer de famille de téléphones. Utilisons ici un téléphone appelé script cursive. Ensuite, je vais augmenter la taille du téléphone. Il y en aura dix, puis changez de couleur. Utilisons la couleur bleue. Je vais également créer un effet d' ombre en utilisant l'ombre. Les valeurs seront de 0,1 m2 et la couleur RGBA sera de couleur noire avec capacité de 0,5. Enfin, nous avons besoin d'un peu d'espace entre les images et le Utilisons la marge avec les valeurs. -15 RAM en haut , puis zéro, puis 15 RAM en bas, et encore zéro sur le côté gauche Très bien, asseyons-nous au-dessus du titre. Passons à autre chose et prenons soin des membres. Je vais sélectionner un membre, puis je vais aligner les éléments en utilisant à nouveau Flax Book. Nous avons besoin de lin pour étalage. Ensuite, nous devons aligner les éléments verticalement. Nous devons changer de direction, ce sera la colonne suivante, nous devons aligner les éléments au centre. Enfin, je vais créer de l'espace en utilisant la marge. Les valeurs seront nulles en haut et en bas et six m sur les côtés gauche et droit. Allons-y et vérifions les résultats nous avons ici des images et en bas , vous pouvez voir le nom du membre ainsi que le poste à droite. Ensuite, nous devons prendre soin des images. Je vais ajouter ici quelques styles différents. Arrondissons-les en utilisant un rayon de bordure de 50 %. Ensuite, je vais les rendre en noir et blanc en utilisant une échelle de gris du filtre 100 %. Changez également le pointeur coursormkeic Je vais ajouter aux images le survol que nous avons utilisé à quelques reprises tout au long de ce projet Je vais sélectionner l' image du membre suivie du survol. Ensuite, nous devons filtrer l'échelle de gris avec la valeur zéro également. Je vais ajouter ici une transition pour un effet plus fluide, nous avons besoin d'un filtre d'une seconde. Bon, maintenant nous avons ici cet effet Who sympa et cool. Bien, passons à autre chose et personnalisons les noms et les positions des membres. Je vais sélectionner le nom du membre. Augmentons la taille de police. Ce sera 1,8 RAM. Ensuite, nous devons transformer le texte en majuscules. En fait, nous avons besoin ici de majuscules, mais transformons. Et puis majuscules. Changeons la couleur, rendons-la blanche. De plus, je vais ajouter un peu d'espace entre l' espacement du réseau Enfin, créez de l'espace dans la marge supérieure. Les deux meilleurs Ram sont devenus, les noms sont plutôt jolis. Ensuite, nous devons nous occuper des positions. Allons-y et dupliquons ce code. Je vais changer le nom de la classe, ça va être position. Ensuite, la taille du téléphone sera d'une RAM. Nous avons besoin d'une transformation du texte en majuscules, la couleur sera la couleur bleue, celle-ci. Ensuite, nous avons besoin d'un espacement de 0,1 Ram. Et débarrassons-nous de la marge supérieure. Nous allons vérifier les résultats. Les positions sont plutôt belles. OK, pour ce qui est de l'équipe, c'est terminé. Tout a l'air plutôt sympa. Ensuite, nous devons prendre soin du pied de page, qui est actuellement masqué Je vais donc ajouter ici des commentaires pour le pied de page. Déplaçons cette ligne vers le bas. Je vais me débarrasser de cette ligne de code. Ensuite, je vais déplacer les éléments en utilisant la marge, Top -50 Ram Cela déplacera les éléments vers le haut. Ensuite, je vais placer l'en-tête sur le côté droit comme nous l'avons ici. Allons-y et sélectionnons le pied de page à propos, suivi de l'en-tête du pied de Je vais utiliser le texte aligné sur la bonne valeur. Ensuite, nous devons transformer translate x avec la valeur 8% Comme vous pouvez le voir, l'en-tête est placé sur le côté droit. Maintenant, la seule chose que je dois faire est de déplacer également l'élément suivant vers la droite. Pour cela, nous devons nous emparer de ce secteur. Ajoutons-le ici également. Je vais ajouter ici une bordure de section avec élément suivant dont nous avons besoin pour définir la bonne position Pour le moment, une fois que Pdmon aura dirigé position par défaut, et je vais la configurer pour qu'elle fonctionne automatiquement afin de laisser la bonne position fonctionner De plus, nous devons ici transformer translate x avec une valeur nulle. Très bien, cela se trouve sur la page à propos. Nous avons terminé, tout semble plutôt beau. J'espère qu'il vous plaira. Ensuite, nous devons nous occuper de la page suivante de notre projet, qui sera la page des livres. Je parle de cette page ici. Pour cela, passons à la prochaine conférence. 21. Créer un balisage HTML pour la page de livres: Lors de la conférence précédente, nous avons fini de travailler sur la page à propos de laquelle nous avons stylisé cette page et elle est plutôt jolie et cool Ensuite, nous devons passer à autre chose et nous occuper de la page suivante de notre projet, qui sera la page des livres. Ici, nous avons la page du livre. Comme vous pouvez le voir, il s' agit d'un en-tête, je parle ici de cet en-tête avec une image de fond. Ensuite, nous avons neuf livres différents. En bas, vous pouvez voir le pied de page. Très bien, dans cette conférence, je vais créer le balisage HTML de cette page Revenons au code VS. Tout d'abord, je vais créer deux nouveaux fichiers. Le premier sera constitué de livres, Do HTML, puis nous aurons besoin de livres. Très bien, ouvrons le fichier HTML et récupérons l'intégralité du contenu. À partir de là, je vais copier le code en entier. Insérons le code dans le fichier HTML Books do. La première chose que je vais faire est de changer le nom du fichier CSS. Ce seront des livres, SS. Ensuite, je vais changer les titres. Nous avons besoin de livres. Ensuite, la deuxième rubrique sera consacrée à nos best-sellers. Ensuite, je vais supprimer le contenu de la page à propos. Je vais partir d'ici, changeons simplement le nom rapide dont nous avons besoin ici. Des livres. D'accord ? Donc je pense que c'est ça, en fait. Je vais faire encore une chose. Passons au fichier HTML à points d' index et à la section Rechercher des livres. En tant que. N'oubliez pas que nous avons ici le bouton principal pour tout afficher. Et je vais modifier la valeur de l'attribut de référence H. Une fois que nous avons cliqué sur ce bouton principal, nous devons accéder à la page des livres. Je vais à Institute Books, HTM. OK, vérifions le navigateur. Passons à la page principale. Cliquez ensuite sur ce bouton ici. Comme vous pouvez le constater, nous sommes redirigés vers la page des livres. heure actuelle, nous avons ici le logo, l'icône du menu, ainsi que les en-têtes et le pied de page Très bien, allons au fichier HTM industriel et récupérons la liste des livres. Je vais saisir cet élément, puis je vais revenir aux livres sur le fichier HTML et juste après la navigation, je ne suis en fait pas la navigation mais l'en-tête Je vais insérer de nouveaux commentaires pour les livres. Ensuite, je vais ouvrir les éléments de section avec la section du livre de noms de classe. Je vais insérer ici le code copié à partir de l' index de l'équipe H du fichier. Je veux dire une liste de livres. Jetons un coup d' œil au projet. Nous avons ici trois livres différents. Comme vous vous en souvenez dans cette section, nous avons également besoin de six autres livres. Je vais dupliquer le livre six fois. Ensuite, je vais changer le nom des livres et aussi celui des auteurs. Faisons-le rapidement. Le prochain livre sera War and Peace de Léon Tolstoï Ensuite, nous aurons Jane Eyre de Charlotte Ensuite, le prochain livre sera, en fait, j'ai oublié de changer le nom des images dont nous avons besoin ici. Livre quatre. Alors ce sera le livre 5. Ensuite, nous avons besoin du livre six. Le nom sera 1984. L'auteur est George Orwell. Ensuite, nous avons le livre sept. Il s'appellera Don Quichotte. Quant à l'auteur, ce sera We Kill the Servants. Ensuite, nous avons le livre numéro huit. Ce sera le Seigneur des Anneaux. En ce qui concerne l'auteur, je vais insérer ici, J R R Tolkien Quant au dernier livre de la liste, il s'agira du livre numéro neuf. Le nom est The Great Tsp. Quant à l'auteur, ce sera Scott Feral. Très bien, passons donc au balisage HTML. J'espère que tout est correct. Allons dans le navigateur et consultons les livres. Je pense que tout est correct. Passons au balisage H L. Passons à la prochaine conférence, où nous allons styliser cette page. 22. Page de livres de style: Lors de la conférence précédente, nous avons créé une nouvelle page pour la page des livres de notre projet I. Et nous avons créé le balisage HTML. Il est maintenant temps de styliser cette page. En fait, si vous regardez la page des livres, vous verrez que la plupart des éléments sont déjà stylisés Nous avons juste besoin d'ajouter une image d'arrière-plan à l'en-tête et nous devons également nous occuper de l'alignement de ces livres. Passons au code VS. La première chose que je vais faire est changer le nom de classe de l'en-tête. Nous avons besoin ici de l'en-tête des livres et non de l'en-tête « about ». Ensuite, je vais ouvrir des livres de fichiers CSS. Tout d'abord, insérons vos nouveaux commentaires pour l'en-tête. Ensuite, je vais sélectionner l'en-tête des livres. Je vais changer l'image de fond de l'en-tête du livre. Sélectionnons l'arrière-plan. Ensuite, je vais utiliser des dégradés linéaires. Utilisez ici la valeur RGBA 3033 fois et l'opacité 0,9 Ensuite, nous devons réutiliser RGBA de la même couleur mais avec une opacité 0,7 Ensuite, je vais sélectionner l' image dans le dossier image Ce sera Books BG. Il faut ensuite définir la position de l'image de fond. Ce sera au centre et nous n'avons pas besoin de nous répéter ici. Très bien, jetons un coup d'œil au projet. Donc, comme vous pouvez le voir, l'en-tête a l'arrière-plan, je veux dire l'image d'arrière-plan. Ensuite, je vais m'occuper de l' alignement des éléments. Je vais ajouter ici de nouveaux commentaires pour la section du livre. Ensuite, je vais sélectionner les éléments de section. Pour aligner les éléments, je vais utiliser du CSS, du livre Flax, nous avons besoin d'afficher Flax. Ensuite, il faut centrer les éléments. Je parle du contenu. Pour cela, nous devons justifier le centre de contenu et aligner les éléments. En fait, nous avons besoin d'une ligne. Je vais également créer l' espace à l'intérieur de la section. Réglons le rembourrage à 15 m en haut et en bas et zéro sur les côtés gauche et droit OK, après ça, je vais aligner les livres pour ça. Allons-y et sélectionnons la section des livres , suivie de la liste des livres. Je vais régler la largeur à 80 %, puis je vais réutiliser Flex Book. Nous avons besoin d'un écran Flex. Ensuite, je vais placer le conflit au centre en utilisant un centre de configuration justifié. Pour placer les livres sur différentes lignes, nous devons utiliser l'une des propriétés de Flexbox appelée flex wrap avec la valeur p. Très bien, comme vous pouvez le voir, les neuf livres sont bien placés avec la page des livres, c'est terminé Le pied de page a l'air bien. Nous devons maintenant passer à autre chose et créer la page suivante de notre projet. La page suivante sera une page de témoignage, où nous allons créer ce slider sympa et cool pour Passons à la prochaine conférence. 23. Créer un balisage HTML pour la page de témoignages: Très bien, lors de la dernière conférence, nous avons fini de travailler sur la page des livres. Comme je l'ai dit, nous devons maintenant passer à autre chose et commencer à créer la page suivante de notre projet. Cette page sera la page des témoignages. Ici, nous avons la page des témoignages. Nous avons ici l' en-tête standard avec image de fond, puis vous pouvez voir ici le slider des témoignages du client Nous avons ici deux commandes, les flèches gauche et droite. Si nous cliquons dessus, le curseur fonctionnera De plus, en dessous des points de contrôle, nous pouvons gérer le jeu du slider à partir d'ici Dans cette section, nous allons créer toutes ces choses. Tout d'abord, nous devons créer la page, puis nous occuper du balisage HTML Passons au code VS et créons de nouveaux fichiers pour la page de témoignage, nous avons besoin du code HTML des témoignages, puis je vais créer des témoignages CSS Je vais déplacer le fichier HTM vers la gauche. Ouvrons-le. D'accord ? Je vais récupérer le contenu du fichier HTML à points des livres. Je vais copier l'intégralité du contenu et le coller ici. Je vais apporter ici quelques modifications. Fermons ce panneau. Je vais changer le nom du fichier CSS dans l'élément lien. Ce seront des témoignages CSS. Ensuite, je vais changer le nom de classe de l'élément d'en-tête. Ce sera l'en-tête des témoignages. Ensuite, nous devons modifier le contenu des éléments de titre. Nous avons besoin de clients ici. Ensuite, le deuxième titre portera sur ce que diront les clients. Ensuite, je vais me débarrasser de cette section à partir d'ici et laisser le pied. Changeons le nom de classe de l'élément de pied de page. Ce seront des témoignages de pieds. En plus de cela, je vais aller dans le fichier HTML de l'index et trouver ici la section des témoignages Comme vous vous en souvenez, nous avons des boutons principaux dans la section des témoignages Et nous devrions insérer ici le code HTML des témoignages, car une fois que nous avons cliqué sur le bouton de la page principale, je veux dire dans la section des témoignages, nous devons accéder à la page des témoignages OK, nous avons ici l' en-tête et le pied de page. Nous devons maintenant créer une nouvelle section dans le fichier HTML des témoignages juste après l'en-tête Je vais passer à de nouveaux commentaires pour les témoignages. Ensuite, je vais ouvrir les éléments de section avec la section de témoignage sur le nom de la classe À l'intérieur de cet élément, je vais créer des développements avec le nom de classe ttmonials en haut Il inclura deux en-têtes et aussi Je vais ouvrir les trois éléments de titre avec le texte « Nos clients ». Ensuite, je vais créer des éléments de titre en H et le texte sera un témoignage Alors il nous faut des étoiles. Je vais ouvrir le tag avec les étoiles du nom de la classe. Ensuite, je vais insérer ici cinq phonoicons avec lesquels nous avons besoin d'éléments Le cours est une bonne étoile, nous aurons cinq étoiles. Je vais donc dupliquer cette ligne de code quatre fois. Alors allons-y et vérifions le navigateur. Comme vous pouvez le constater, nous avons ici les titres suivis des étoiles Ensuite, je vais créer des développements et ce sera un wrapper testyules À l'intérieur du wrapper, je vais créer le slider dans lequel je vais créer la diapositive elle-même Au total, nous aurons cinq diapositives, mais pour l'instant, je vais créer une diapositive car nous devons styliser la diapositive , puis nous devons faire fonctionner le curseur Nous ajouterons les diapositives restantes un peu plus tard. Je vais insérer ici, l' arrière-plan de la diapositive, je veux dire, la diapositive BG. Ce sera un élément vide. Ensuite, après un peu de contexte, je vais créer un nouveau développement avec le nom de la classe, contenu de la diapositive dans laquelle je vais insérer deux éléments. Je veux dire que les omiques téléphoniques dont nous avons besoin sont des éléments avec les classes FA solides à gauche. Ensuite, je vais dupliquer cette ligne de code et changer le nom de classe dont nous avons besoin ici, non ? Vérifie le navigateur. Comme vous pouvez le constater, nous avons ici deux citations. Ensuite, je vais m' occuper de l'image de la diapositive. Je vais insérer votre développement avec le nom de la classe dans le développement. Ouvrons l'image. Je vais sélectionner l'image dans le dossier images et ce sera celle du client. Ensuite, je vais créer un autre développement avec le nom de la classe slide text dans lequel nous avons besoin de l'élément H à trois titres. Ce sera la meilleure bibliothèque. Ensuite, après les trois éléments de titre H, je vais ouvrir un paragraphe dans lequel je vais insérer du texte factice Utilisons Lorum 20. Nous avons ici un texte factice. Après le paragraphe, nous devons créer un autre paragraphe. Et il devrait avoir le nom de classe client. Je vais insérer le nom de votre client. Disons Bob Smith , puis l'âge de 20 ans. OK. Après le paragraphe, je vais m' occuper des commandes. Je veux dire, les flèches sur les côtés gauche et droit du curseur Je parle de ces flèches. Allons-y et ouvrons les développements avec les contrôles de nom de classe intégrés au développement. Je vais ouvrir un élément avec la classe A solid A arrow left, puis nous avons besoin de la flèche right. Nous allons vérifier les résultats ici. Nous avons les flèches à gauche et à droite. Ensuite, je vais créer le développement. Ça va être un emballage pour les points. Ajoutons-y des points pour le nom de classe. À l'intérieur des points, je vais créer des fragments, qui seront des éléments vides. Dupliquons-le quatre fois, car au total, nous aurons cinq points. D'accord, c'est tout pour le balisage HTML pour le moment. Comme je l'ai dit, nous ajouterons les diapositives restantes un peu plus tard, une fois que nous aurons fini de travailler sur le curseur Je veux dire, lorsque nous ajoutons le Javascript à cette partie ici, nous avons tous les éléments. Nous devrions les styliser. En fait, les points ne sont pas visibles car nous n'avons ici que les éléments d'envergure vides. Nous nous en occuperons un peu plus tard. OK, comme je l'ai dit, nous devons styliser ces éléments. Et pour cela, passons à la prochaine conférence. 24. Page de témoignages de stylisme: Très bien, dans la conférence précédente, nous avons créé le balisage HTML pour la page des témoignages Et maintenant, nous devons styliser le slider. Et nous devons également prendre soin de l'en-tête. Ensuite, nous ferons fonctionner le curseur. Très bien, passons au code VS, et dans les témoignages du fichier CSS, je vais insérer de nouveaux commentaires pour l'en-tête Ensuite, je vais sélectionner l' en-tête du témoignage et changer d'arrière-plan Je vais utiliser la fonction de gradient linéaire. Avec la valeur RGBA, nous avons besoin de 3033 fois et l'opacité de 0,9 Ensuite, nous avons besoin une autre valeur RGBA avec les mêmes nombres, mais l'opacité sera de 0,7. Après cela, je vais sélectionner l'image dans le dossier Ce sera un témoignage PG. Ensuite, je vais définir la position de l'arrière-plan. Réglons la position à 50 % pour l'axe X et à 40 % pour l'axe Y. Nous n'avons donc pas besoin de répéter. OK, nous avons donc ici l'image de fond de l'en-tête. Ensuite, nous devons nous occuper de la section des témoignages, je veux dire du slider Allons-y donc et insérons ici, des commentaires pour les témoignages Ensuite, je vais sélectionner la section des témoignages. Et définie en hauteur, la largeur sera de 100 %. Quant à la hauteur, je vais la porter à 140 m de hauteur de fenêtre Je veux dire un 40 % de la fenêtre d'affichage. Ensuite, je vais changer la couleur de fond. Ce sera en 1919. C'est bon. Les hauteurs intérieures sont appliquées à l'élément et la couleur d'arrière-plan est également modifiée. Ensuite, je vais m'occuper du haut du témoignage. Je parle de cet élément ici, il inclut les titres et aussi les étoiles Allons-y et sélectionnons le témoignage en haut de la page. Tout d'abord, je vais définir que la position sera absolue. Ensuite, je vais ajouter ici la position relative. Parce que nous allons positionner l'élément en fonction des éléments parents. Nous avons besoin ici d'une position relative. Ensuite, je vais définir les propriétés en haut et à gauche. La position supérieure sera de 10 % Quant à la position de gauche, je vais de 30 à 50 %. Ensuite, nous devons transformer fonction translate x avec une valeur -50 % car nous allons centrer les éléments Jetons un coup d' œil au projet. Nous avons ici l'en-tête, les titres et les étoiles Ensuite, nous devons placer ces éléments verticalement dans la colonne. Pour cela, je vais utiliser Flex Box. Utilisons Display Flex. La colonne Je vais utiliser la direction de flexion, puis alignons les éléments au centre. Jetons un coup d' œil au projet. Comme vous pouvez le voir, les titres et les étoiles sont placés verticalement dans la colonne Ensuite, je vais prendre ici le premier titre qui est l'élément H à trois titres. Allons-y et sélectionnons les trois meilleurs témoignages. Réglons la taille du téléphone à deux RAM. Le poids du téléphone sera alors de 300. Et je vais aussi changer la couleur à 72 °C . Le premier titre est en mosaïque Ensuite, je vais m' occuper de la deuxième rubrique. Allons-y et dupliquons ce code. Je vais changer le sélecteur dont nous avons besoin ici, H, un élément de titre La taille de police sera de cinq RAM. Ensuite, je vais régler le poids de police à 300. Ensuite, il nous faut de la couleur, ce sera du blanc. Ensuite, je vais transformer le texte en majuscules. Créez également un espace entre les lettres en utilisant l'espacement des lettres, 0,4 RAM Ensuite, je vais créer de l' espace en utilisant la marge. Je vais régler la marge à deux m en haut et en bas et à zéro sur les côtés gauche et droit. D'accord, le deuxième titre est personnalisé. Ensuite, je vais m' occuper des étoiles. Je suis dans les icônes du téléphone. Allons-y et sélectionnons Testimonial Top, puis l'élément Je vais régler la taille du téléphone à 1,6 RAM. Ensuite, la couleur sera bleue, je veux dire 320e. Ensuite, nous avons besoin d'une marge pour créer de l'espace sur les côtés gauche et droit des étoiles. Je vais fixer la marge à zéro et à 0,5 RAM. C'est ça. Les titres et aussi les phonomiques Les étoiles sont personnalisées. Ensuite, je vais m'occuper de l'image car elle est trop grande pour le moment. Allons-y et sélectionnons diapositive G. Je vais régler la hauteur. La largeur sera de 15. Ensuite, je vais changer la hauteur réglée à 16. Ensuite, nous devons appliquer la hauteur intérieure à l' élément d'image lui-même. Nous avons besoin d'une image de diapositive suivie de l'élément d'image. Réglons la hauteur, les deux à 100 % Ensuite, nous devons ajuster l'image à l' aide de la couverture de l'objet. Nous pouvons voir que l'image est devenue plus petite. Ensuite, je vais m' occuper des commandes. Je suis dans les flèches gauche et droite. Je suis dans ces flèches. Allons-y et sélectionnons les commandes. I. Je vais définir avec et hauteurs. Mettons-les tous les deux à cinq. Ensuite, je vais changer la couleur de fond. Ce sera 78584. Créons les éléments qui l' entourent en utilisant rayon de bordure de 50 %. Jetons un coup d'œil au projet. Voici les cercles. Je vais diminuer l'opacité, elle sera de 0,6. Ensuite, je vais placer les flèches au centre de ces cercles Pour cela, nous avons besoin d'un affichage avec un centre de contenu justifié et un centre d'éléments de ligne. Maintenant, comme nous le voyons, les flèches sont placées au centre des cercles. Ensuite, changeons la taille de la police. Je vais faire 3 m. Ensuite, nous avons besoin d'une couleur d'une valeur de 444. Comme vous pouvez le constater, les flèches sont plus grandes. Ensuite, je vais modifier la position des commandes. Réglons la position sur absolue. Ensuite, je vais les placer verticalement au centre. Pour cela, nous avons besoin que la première position soit 50 %. Ensuite, je vais utiliser transform translate y avec la valeur -50 %. Comme vous pouvez le voir, ils sont placés au centre de la section, au centre verticalement Nous devons maintenant définir les positions séparément pour chaque flèche. Allons-y et sélectionnons les commandes avec le sélecteur enfant. Nous avons besoin ici d'un sélecteur d'enfants avec une valeur de un. Réglons la position gauche à 15 % Ensuite, je vais dupliquer le code dont nous avons besoin ici, enfant deux au lieu de la position gauche, je vais utiliser la position droite. OK, comme vous pouvez le voir, les flèches sont placées et positionnées ensuite, je vais m'occuper des points, de ces éléments ici. Comme vous vous en souvenez, nous avons créé des éléments de span vides. Allons-y et sélectionnons les points, les éléments parents, je veux dire le wrapper. Réglons la position sur absolue. Ensuite, nous avons besoin que la position inférieure soit 15 %, puis nous devons centrer les points pour cela, je vais utiliser la position gauche à 50 %, puis nous devons transformer la traduction x -50 %. Pour le moment, les éléments ne sont pas visibles, mais nous nous en occuperons dans une minute Sélectionnons l'étendue des points. Réglons la hauteur à un Rm. Ensuite, je vais changer la couleur de fond. Ce sera C. Jetons un coup d'œil au projet. Comme vous pouvez le constater, les éléments de span ne sont pas visibles. Je vais résoudre ce problème en utilisant des livres flexibles. Réglons l'affichage pour qu'il soit flexible. Une fois que vous avez défini la propriété d' affichage, les éléments seront visibles. Alignons-les au centre. Nous devrions maintenant voir les éléments de la portée. Nous avons ici cinq éléments de travée. Arrondissons-les en utilisant un rayon de bordure 50 % et en créant un espace entre eux en utilisant la marge 0,5 RAM. Maintenant, comme vous pouvez le voir, nous avons ici cinq points. Ensuite, je vais changer le curseur. Faisons-en un pointeur. Enfin, je vais activer l'un d'entre eux. Je veux dire, si vous regardez le projet terminé, comme vous pouvez le voir, le point est actif. Je vais ajouter la classe active au premier élément fin. Ensuite, je vais sélectionner des points, faire pivoter des éléments, puis la classe active. Réglons la hauteur à 1,5 RAM et changeons la couleur, rendons-la blanche. OK, donc le premier élément de spin pensé est actif. Ensuite, je vais m' occuper du slider, je veux dire de l'emballage des témoignages Allons-y et sélectionnons l'emballage du témoignage juste après le début du témoignage En fait, vérifions l'élément HTML. C'est exact, nous devons le sélectionner après le haut, je veux dire le haut du témoignage, définissons avec et hauteurs La largeur sera de 55 %, puis je vais régler la hauteur à 50 RAM. Changez également la position, définissons-la en absolu. Ensuite, nous devons placer l'emballage du témoignage au centre de la section Nous devons donc définir les propriétés du haut et de la gauche. Les deux seront de 50 %. Ensuite, nous devons les transformer avec la fonction de traduction. Et les valeurs seront de -50 % et encore une fois de -50 %. Très bien, jetons un coup d'œil au projet L' emballage du témoignage est centré, mais la position de ces flèches Cela signifie que nous avons une erreur dans le fichier HTML. Vérifions les commandes. Comme vous pouvez le constater, les commandes sont placées à l'intérieur de l' emballage du témoignage et doivent être placées à l'extérieur de l' emballage du témoignage Prenons les commandes d' ici et insérons-les à l'extérieur. OK, je pense que maintenant le problème devrait être résolu. Comme vous pouvez le constater, les commandes sont placées à leur place. Ensuite, je vais créer les diapositives restantes. Pour le moment, nous n'avons qu'une seule diapositive. Dupliquons-le quatre fois, car nous aurons cinq diapositives au total. Je vais modifier les détails rapidement. La deuxième diapositive est en fait l'image de la deuxième diapositive qui sera la clim 2 Ensuite, nous avons ici Mary Brown. Partons du même âge. Ensuite, nous avons ici Colin Three. Ce sera Nick Jones. Changeons le H, faisons-le 27. Ensuite, nous avons le clin quatre, ce sera Brown. Changeons l' âge, fixons-le à 22 ans. Et enfin, nous avons ici le clin 5 du nom de John Smith. 25 Vous avez donc les cinq diapositives. Ensuite, je vais sélectionner le curseur et définir la hauteur maximale. Je vais régler avec 500 %. C'est pour la hauteur, elle sera de 100 Ensuite, je vais placer les toboggans côte à côte horizontalement Pour cela, je vais utiliser Display Flex. Comme vous pouvez le constater, les diapositives sont placées côte à côte. Je vais ajouter une bordure à l'emballage des témoignages afin de voir clairement ce qui se passe ici Nous avons besoin ici de 0,1 RAM solide, et la couleur sera blanche. Nous avons ici l'emballage des témoignages, et chaque diapositive doit être placée à l'intérieur de l' Pour ce faire, je vais définir la largeur de la diapositive à 20 %. Comme vous le voyez, nous avons défini la largeur du curseur et l'avons portée à 500 %. Une fois que la largeur de la diapositive est de 20 %, elle occupera un cinquième du Maintenant, comme vous pouvez le voir à l'intérieur de la boîte, nous n'avons qu'une seule diapositive. Ensuite, je vais sélectionner un léger arrière-plan et le personnaliser. Nous avons besoin de largeur, elle sera de 70 %, puis je vais définir la hauteur. Passons à 65 % Ensuite, je vais changer la couleur de fond. Utilisons la couleur RGBA. La première valeur sera 50. Alors nous en aurons 176. Ensuite, le prochain sera 206. Et nous avons à nouveau besoin d'une opacité de 0,5. Nous avons donc ici l' arrière-plan de la diapositive. Définissons sa position. Je vais régler la position sur absolue. Ensuite, nous avons besoin de la position relative de la diapositive. Je parle de l'élément parent. Je vais placer l'arrière-plan au centre de la diapositive. Par conséquent, nous devons ici positionner 50 % puis positionner 50 % à gauche et également transformer avec la fonction de traduction -50 % à nouveau -50 % Comme vous pouvez le voir, l'arrière-plan est placé au centre de la diapositive En fait, comme vous le voyez, l'arrière-plan est légèrement pivoté. Par conséquent, je vais ajouter ici la rotation de la fonction Z, et la valeur sera de moins six degrés. L'arrière-plan de la diapositive est maintenant pivoté. Je vais arrondir les coins. Nous avons besoin ici d'un rayon de bordure avec la valeur deux Ram. Je vais également diminuer l'opacité. Réglons-le 2.7 Bien, voyons le léger arrière-plan. Ensuite, je vais m'occuper du léger contenu, je veux dire, cet élément blanc ici. Allons-y donc et sélectionnons un contenu léger. En fait, je vais choisir les styles à partir d'ici. Nous avons besoin de styles similaires pour le contenu des diapositives. La hauteur du bois sera similaire. Ensuite, je vais changer la couleur de fond. Utilisons EE. Ensuite, nous avons besoin d'une position absolue. Et nous devons censurer l'élément, mais sans la rotation Débarrassons-nous donc de la fonction de rotation Z. Nous allons vérifier le navigateur, nous avons ici le contenu de la diapositive. Nous n'avons pas besoin d'opacité pour le contenu des diapositives. De plus, je vais aligner les éléments à l'aide de Flex box. Je vais ajouter ici Display Flex. Ensuite, nous devons créer un espace entre les éléments flexibles en utilisant justify content, space between. Ensuite, je vais aligner les éléments au centre. Comme vous pouvez le constater, les éléments flexibles sont alignés. Ensuite, je vais créer de l'espace dans le contenu de la diapositive à l'aide du rembourrage Il y aura zéro en haut et en bas et cinq béliers sur les côtés gauche et droit. OK, cela concerne le contenu de la diapositive. Ensuite, je vais m' occuper de ceux-là. Je vais sélectionner la diapositive suivie des éléments. Je vais augmenter la taille du téléphone, il y aura 12 RAM. Changez ensuite la couleur utilisée ici. Couleur bleue. Nous devons également définir la position absolue pour, disons, la position absolue. Je vais définir les positions de chacun séparément. Je vais sélectionner la diapositive I avec sélecteur d'enfant. Nous avons besoin de la première icône. Réglons la position supérieure à -20 %. Ensuite, nous avons besoin de la position gauche Ça va être de 10 %. Je vais dupliquer ce code. Nous avons également besoin de la même chose pour la deuxième icône. Réglons la position inférieure à -30 % et au lieu de la position gauche, je vais utiliser la bonne position La valeur sera la même, 10 % OK, les guillemets sont bien placés et ensuite je vais m' occuper de l'image. L'image possède déjà certains styles. Je veux dire, le développement du wrapper, changeons. Je vais régler la largeur à 35 %, puis je vais créer de l' espace sur le côté droit de la diapositive. Mg, fixons la marge à droite à trois RAM. D'accord, après cela, je vais m' occuper de l'image elle-même. Ajoutons ici quelques styles différents. Je vais arrondir l'image. Utilisons le rayon de bordure. Nous devons arrondir l'image mais pas sur les quatre côtés. Je vais régler le rayon de bordure à trois dans le coin supérieur gauche. Ensuite, nous avons besoin de zéro dans le coin supérieur droit, trois dans le coin inférieur droit et de zéro dans le coin inférieur gauche. OK, donc toute l'image est plutôt jolie. Ensuite, je vais le faire en noir et blanc. En utilisant la même technique pour filtrer la fonction à grande échelle avec la valeur 100 %, définissons le curseur sur le pointeur. Créons maintenant le fait relatif au survol. Je vais sélectionner l'image de la diapositive suivie des éléments de l' image avec le pointeur de la souris. Réglons le filtre sur une échelle de gris avec une valeur de zéro. Et nous avons également besoin ici d' transition avec un filtre d'une durée de 1 seconde. Bien, passons à l'image suivante. Nous devons créer les bordures autour de l'image. Pour cela, je vais utiliser les éléments after et before. Sélectionnons la diapositive IMG, puis les éléments. Ensuite, nous avons également besoin de l' élément before, car ces éléments auront des fichiers communs. Tout d'abord, je vais définir le contenu. Il va être vide. Ensuite, nous avons besoin d'une hauteur maximale, les deux étant égales à 100 %. Ensuite, je vais régler la position sur absolue. Nous avons besoin de la position relative des éléments parents. Ensuite, je vais définir la bordure 2.2 Ram solid, et la couleur sera RGBA Nous avons besoin d' une couleur noire avec une opacité 0,4. Ici, nous avons les bordures Ensuite, je vais faire l'arrondi. Nous avons besoin du même rayon de bordure que celui que nous utilisons pour les images. Nous devons maintenant définir les positions de ces éléments séparément. Allons-y, groupe après élément, à partir de là, les deux positions seront réduites à moins un RAM. Mais alors nous avons besoin de la position gauche -0,5 Ram. Dupliquons ce code, changeons le sélecteur dont nous avons besoin ici avant les pseudo-éléments, nous avons besoin ici de la position inférieure avec la même valeur, puis nous devons nous positionner à nouveau avec la même valeur D'accord, les images sont plutôt jolies. Comme vous pouvez le constater, les bordures sont placées au-dessus de l'image. Nous devons les placer derrière l'image. Résolvons ce problème en utilisant propriété d' index avec une valeur moins un. Maintenant, le problème est résolu et avec les images, c'est terminé. Ensuite, nous devons prendre soin du côté droit de la diapositive. Allons-y, sélectionnons le texte de la diapositive et définissons largeur à 65 %. Ensuite, je vais sélectionner H trois éléments de titre. Allons-y et sélectionnons un texte léger suivi des trois éléments H. Nous avons besoin que la taille de police soit 2,5. Ensuite, je vais définir le poids de la police. Passons à 300, changeons de couleur. Je vais créer la couleur une par une. Et créez également de l'espace en bas en utilisant la marge. En bas, un RAM. OK, donc le titre semble bon. Ensuite, je vais m' occuper du paragraphe. Allons-y et sélectionnons un texte léger suivi de l'élément. Je vais régler la taille de police sur 1,4 RAM. Ensuite, nous avons besoin du poids de police. Il y en aura 300. Changeons la couleur du texte. Je vais utiliser 020 D14. Ensuite, nous devons modifier la hauteur de ligne du texte. Nous avons besoin ici de la hauteur de la ligne, faisons-en 1,6 RAM. Créez également de l'espace en bas à l'aide de la marge. Les trois derniers, Ram. Ensuite, je vais modifier la largeur du paragraphe. Mettons-le à 35, d' accord, pour que le paragraphe soit beau. Ensuite, je vais personnaliser le nom du client. Allons-y et sélectionnons le texte de la diapositive suivi par le client. Je vais régler la taille du téléphone sur 1,8, puis je vais changer la couleur. Il sera 7 h 235. OK, les diapositives sont personnalisées, elles sont plutôt jolies. Ensuite, nous devons faire fonctionner le slider en utilisant Javascript. Avant de passer à la prochaine conférence, je vais le faire sortir de cette frontière à partir de là, supprimons cette ligne de code. Bien, passons à la prochaine conférence et faisons fonctionner le slider 25. Faire fonctionner Slider: Très bien, dans la conférence précédente, nous avons personnalisé le slider des témoignages Nous avons également stylisé les diapositives les flèches et les points ici, les commandes Nous devons maintenant faire fonctionner le curseur. Ce slider s' appelle parfois Rosal. Vous pouvez également rencontrer ce nom. Jetons un coup d'œil au projet terminé. Une fois que nous avons cliqué sur les flèches, le curseur sera également activé, les points correspondants seront également actifs Et nous pouvons également gérer le fait de jouer au slider à partir d'ici. D'accord, nous allons donc faire ces choses en utilisant Javascript. Passons au code VS et ouvrons le script ou le fichier JS. La première chose que je vais faire est d' ajouter les commentaires pour ce code ici. Je vais ajouter ici la navigation. Nous utilisons Javascript pour la navigation. Déplaçons cette ligne vers le bas. Ensuite, je vais ajouter de nouveaux commentaires pour les témoignages La première chose que je vais faire est de sélectionner quelques variables différentes, je veux dire les éléments. Créons une variable et appelons-la slider. Je vais sélectionner cet élément en utilisant la méthode Document Query Select from et nous devons spécifier le nom de classe slider Je vais dupliquer cette ligne de code trois fois. La deuxième variable sera celle des diapositives. Je vais sélectionner toutes les diapositives en utilisant le sélecteur de requêtes, toutes les méthodes Et nous devons spécifier ici la diapositive du nom de la classe. Ensuite, nous devons sélectionner les flèches. Je veux dire les flèches gauche et droite. Appelons la variable flèche gauche. Ensuite, je vais spécifier ici les commandes de nom de classe. Ensuite, nous devons sélectionner des éléments. Nous avons besoin d'un sélecteur de chat ici. La flèche gauche est le premier élément. Précisons ici le numéro un. Si nous examinons le fichier HTML d'index, nous avons en fait besoin d'un fichier HTML de témoignage Nous avons ici des commandes. La flèche gauche est le premier élément à l'intérieur des commandes. Débarrassons-nous de cette ligne de code et dupliquons celle-ci. Nous avons besoin de la flèche droite. Je vais changer le numéro du sélecteur pour le nième enfant. Dans ce cas, il nous faut le numéro deux. OK, les variables sont créées. Ensuite, je vais sélectionner l'une des flèches, disons flèche droite. Et je vais ajouter un écouteur Emt à l'événement « flèche avec clic Je vais également passer ici la fonction de rappel qui sera exécutée une fois que nous aurons cliqué sur la flèche droite Une fois que nous avons cliqué sur la flèche droite, je vais déplacer le curseur dont nous avons besoin ici, curseur suivi de cette propriété de style Ensuite, je vais utiliser Transform. Ensuite, nous devons traduire la fonction x. Je vais déplacer le curseur de -20 % . Passons maintenant au navigateur Une fois que j'ai cliqué sur la flèche droite, le curseur se déplace vers la gauche En fait, pour mieux voir ce mouvement, je vais ajouter une transition au slider Adhérons tous ensuite 0,8 seconde. Je vais également utiliser la fonction Sir cubique où les valeurs sont 100,1. Cela rendra l'effet de mouvement beaucoup plus agréable Cliquons sur la flèche droite. Comme vous pouvez le constater, ce curseur se déplace bien. OK, après cela, je vais créer une nouvelle variable et ce sera un index de diapositives. Mettons-le à zéro. En fait, cette variable sera utilisée pour suivre l'affichage de la diapositive en cours. Il commence à zéro et indique la première diapositive. OK, maintenant je vais dupliquer ce code. Changeons la variable lorsque vous entendrez « gauche ». Ensuite, je vais ajouter ici index de diapositive égal à un index de diapositive moins un. Dans ce cas, nous décrémentons la variable d'index de diapositive d' une unité afin de déplacer la diapositive précédente Ensuite, nous devons mettre à jour le style de l'élément slider, en le traduisant horizontalement. Pour afficher la diapositive précédente, le montant de la traduction doit être déterminé en multipliant l'index de la diapositive par -20 % car chaque diapositive occupe 20 % de la largeur du conteneur Nous avons besoin ici de chaînes de modèles puis de la fonction translate x dans laquelle je vais insérer diapositive multiplié par -20 % En fait, nous avons besoin d'un pourcentage en dehors de l'orthèse Copions ces deux lignes, collez-les ici. Dans le cas de la flèche droite, il faut ici plus sinus. Allons dans le navigateur et cliquons sur les flèches. Comme vous pouvez le constater, les diapositives déplacent toutes les diapositives. Si nous cliquons sur les deux flèches, une fois que nous atteignons la dernière diapositive et que nous cliquons à nouveau sur la flèche, le curseur se déplace En fait, nous n'en avons pas besoin. Nous devons arrêter le curseur une fois que nous avons atteint le dernier élément, je veux dire, la dernière diapositive du curseur Revenons maintenant au code VS . Nous devons utiliser des instructions conditionnelles. Je vais définir ici la condition si l' index de la diapositive est supérieur à zéro, alors nous avons besoin de l'opérateur Tannery Nous devons maintenant interférer avec l'index de la diapositive moins un puis zéro à nouveau, il s'agit d'un opérateur tenory en Javascript Il évalue la condition, l' indice de la diapositive est supérieur à zéro Si la condition est vraie, elle évalue l' index de la diapositive moins un Dans le cas contraire, il est évalué à zéro. Nous avons également besoin de la même chose pour la flèche droite. Si l'index des diapositives est inférieur à la longueur des diapositives moins un, nous avons besoin de l'index des diapositives plus un. Dans le second cas, nous avons besoin ici longueur des points des diapositives moins un. Ici, la longueur des diapositives représente le nombre total de diapositives. La longueur des points de la diapositive moins un indique l'index de la dernière diapositive. Comme l'indexation commence à zéro, cette ligne garantit que l'index de la diapositive est inférieur à l'indice de la dernière diapositive avant de l' incrémenter Si l'index de diapositive est inférieur à l'index de la dernière diapositive, il incrémente l'index de diapositive d' une unité avec cette expression ici Dans le cas contraire, il définit l'index de la diapositive sur l'index de la dernière diapositive. OK, allons dans le navigateur et vérifions les résultats. Cliquons sur la flèche droite. Comme vous pouvez le voir, nous arrivons à la dernière diapositive, et je clique sur la flèche, mais le curseur ne fonctionne pas. Il en sera de même pour la flèche gauche. Maintenant, je clique sur la flèche gauche, mais les diapositives ne bougent pas. OK, je vais cacher les diapositives à l'extérieur de l'emballage. Faisons-le en utilisant le chauffage par trop-plein. Maintenant, ils sont cachés et tout fonctionne bien. OK, ensuite nous devons nous occuper des points. Une fois que nous avons cliqué sur les points, nous devons déplacer le curseur. De plus, une fois que nous avons cliqué sur les flèches, nous devons activer le point correspondant. Passons au code VS et je vais ajouter ici deux autres variables. Le premier sera un emballage à pois. Nous allons sélectionner cet élément à l'aide de documents, en utilisant le sélecteur de requête Et je vais spécifier ici les points du nom de la classe. Dupliquons ce code. La deuxième variable sera constituée de points. Dans ce cas, nous avons besoin d'un sélecteur de requête. Toutes les méthodes que je vais spécifier ici sont cet élément de panneau. Très bien, nous devons maintenant itérer sur chaque élément de la collection de points en utilisant la méthode forage Je vais ajouter ici « faire du fourrage ». Nous devons insérer ici la fonction de Calbeck avec deux paramètres Le premier sera un point, puis nous aurons également besoin d'un index. Nous devons maintenant ajouter un événement de clic au point. Je vais associer un écouteur pair à l'événement point with click Nous devons également insérer votre fonction de rappel qui sera exécutée une fois que nous aurons cliqué sur le point Je vais maintenant définir l'index des diapositives. Et il doit être égal à l'index, que nous avons utilisé ici comme paramètre. Lorsque vous cliquez sur un point, cette ligne met à jour cette diapositive dans cette variable en fonction de l' index du point cliqué Cela remplace efficacement la diapositive actuelle celle correspondant au point sur lequel vous avez cliqué Ensuite, nous devons supprimer la classe active du point qui était précédemment actif. Nous devons sélectionner le point avec la classe active. Je vais utiliser le sélecteur de requête de documents. Nous devons spécifier ici des points suivis de l'actif. En fait, nous avons besoin ici d'un point, puis d'une classe active. Nous devons supprimer la classe active de sa liste de classes. Nous avons besoin ici d'une liste de classes suivie de la méthode de suppression. Et nous devons indiquer ici le nom de la classe active. OK ? Après cela, je vais déplacer le curseur, nous devons donc respecter cette ligne Très bien, passons au navigateur. Cliquez sur les points. En fait, nous devons ajouter une ligne de plus. Une fois que nous avons supprimé la classe active des points actifs , nous devons ajouter la classe active aux points cliqués Avons-nous besoin ici d'une méthode d'ajout ? Je vais spécifier ici le nom de la classe active. OK, maintenant le point devrait fonctionner. Comme vous pouvez le voir, une fois que nous avons cliqué, le curseur se déplace et le point correspondant est également actif Très bien, donc tout fonctionne bien. Ensuite, nous devons nous en occuper une fois que nous avons cliqué sur les flèches. Une fois que nous avons cliqué sur les flèches et déplacé le curseur , le point correspondant devrait être actif Revenons au code VS. Je vais ajouter ici ce qui suit pour les deux flèches. Nous avons besoin d'un emballage à points, puis d'une propriété pour enfants. Et nous devons spécifier ici l'index sous forme d'index de diapositives. Et nous devons ajouter à la liste des classes. En fait, nous avons besoin de points, puis d'ajouter une méthode et de spécifier ici le nom de la classe active. Dans ce cas, children est la propriété de dot wrapper et représente une collection de tous les éléments enfants contenus dans le dot wrapper Ensuite, nous avons ici un index des diapositives qui est utilisé pour accéder à un élément enfant spécifique dans le Dot Wrapper. Chaque point de navigation doit correspondre à une diapositive du curseur, et l'index de diapositive représente l'index de la diapositive actuellement active Ensuite, nous ajoutons la classe active à la classe active, je veux dire le point correspondant. OK ? Je vais maintenant ajouter cette ligne pour les deux flèches. Allons dans le navigateur et vérifions le résultat. En fait, il faut cliquer sur les flèches. Comme vous pouvez le voir, une fois que nous avons cliqué sur les flèches et déplacé le curseur, les points correspondants deviennent actifs Tout fonctionne parfaitement. OK. Avant de terminer cette conférence, je vais réorganiser le code Je vais créer une fonction, appelons-la set index. Ensuite, je vais prendre ces deux lignes, car nous utilisons ces deux lignes partout. Je vais ajouter ces deux lignes ici. Au lieu d'eux, je vais appeler la fonction index. Supprimons add here set index, et faisons de même pour la flèche droite. Supprimez ces deux lignes et appelez la fonction set index. OK, maintenant notre code est plus propre avec juste l' ajout d'une fonction. Et nous avons ici la même chose. Quelque chose ne va pas. En fait, nous ne devrions saisir que deux lignes, ces deux lignes ici, et nous prenons également cette ligne. Alors maintenant, tout devrait fonctionner. Comme vous pouvez le constater, ce slider fonctionne parfaitement. Très bien, alors asseyons-nous avec la page des témoignages. En fait, on peut dire que le projet est presque terminé. Nous avons créé toutes les sections, toutes les pages, et nous devons maintenant adapter le projet aux différentes crises Pour cela, passons à la prochaine conférence. 26. Rendre le projet réactif - Partie 1: Très bien, dans la conférence précédente nous avons fini de construire nos projets. Je veux dire, nous avons créé toutes les sections de la page principale. Nous avons également créé, installé toutes les pages de notre projet Web. Dans cette conférence, comme je l'ai dit, je vais commencer à adapter notre projet aux différentes tailles d'écran et aux différents appareils. La conception Web est très importante dans le développement Web car elle garantit le bon fonctionnement des sites Web sur tous les types d'appareils et de tailles d'écran. Autant de gadgets différents tels que les smartphones et les tablettes, conception Web réactive aide sites Web à être beaux et faciles à utiliser partout. Cela permet d'économiser du temps et des efforts en évitant d'avoir à concevoir des modèles distincts pour chaque appareil. De plus, les moteurs de recherche tels que Google préfèrent les sites Web adaptés aux mobiles. La conception Web réactive peut améliorer la visibilité d'un site. En termes simples, la conception Web réactive est indispensable au développement Web pour garantir que les sites Web restent conviviaux et efficaces sur le large éventail d'appareils que les gens utilisent aujourd'hui. Dans mes projets Web, je me suis fixé comme priorité de rendre le site Web impressionnant sur différents appareils. Nous parlons de grands écrans de bureau, tels que 1920 pixels de largeur et 1080 pixels de hauteur, 1 600 pixels de largeur et 900 pixels de hauteur Ainsi que des modèles légèrement plus petits comme 14, 40 pixels de largeur et 900 pixels de hauteur, 13 66 pixels de largeur, 768 pixels de hauteur et 12 80 pixels et 780 pixels. Pour les tablettes, j'ai 82 000 pixels et 11 80 pixels, ainsi que 768 pixels et 1024 pixels Et bien sûr, pour ceux qui aiment naviguer sur leur téléphone, j'ai optimisé ces trois points de rupture ici. C'est bon. J'ai donc ajouté ces points de rupture à mon mode réactif. Comme vous pouvez le constater, nous avons ici des écrans, qui concernent les écrans de bureau, je veux dire les six points d'arrêt Ensuite, nous avons deux points d'arrêt pour les tablettes et trois points d'arrêt pour les téléphones portables Ce faisant, je m' assure que, quelle que soit la manière dont quelqu'un accède au site, ce soit sur un ordinateur, une tablette ou un téléphone portable, l'expérience est fluide et agréable Cette approche est essentielle aujourd'hui car les gens utilisent toutes sortes d'appareils, et je souhaite que tout le monde passe un moment positif et convivial sur mon site Web. La conception Web réactive n'est pas qu'un terme fantaisiste. Il s'agit de rendre les choses faciles et agréables pour tous, quel que soit le gadget qu'ils utilisent. Très bien, je vais inspecter la page. Sélectionnez le premier point de rupture, qui correspond à l'écran de 21 600 pixels de largeur et 900 pixels de hauteur Ensuite, je vais vérifier le projet. Presque tout semble bon sauf le pied de page de la page de destination principale Maintenant, je vais ouvrir le fichier de style CSS, puis je vais faire défiler la page vers le bas et insérer de nouveaux commentaires pour une conception Web réactive. Ensuite, je vais créer une requête multimédia CSS, où je vais définir une largeur maximale de 1 600 pixels Je vais modifier la largeur de l'entrée dans le groupe d'entrée, allons-y et sélectionnons le groupe d'entrée suivi des éléments d'entrée. Je vais régler la largeur à 31, rampe. Revenons au navigateur. Comme vous pouvez le constater, le pied de page est beau. En fait, avec la page d'accueil principale, nous en avons terminé ici car tout semble bon. Allons-y et consultons les autres pages que nous avons ici à propos de la page. En fait, les fonctionnalités de la page ne semblent pas très bonnes. Je vais les personnaliser. Quant au reste des éléments, ils ont l'air bien. Je vais parler du fichier CSS qui a fermé ce fichier pour le moment. Ensuite, je vais insérer vos nouveaux commentaires pour le mode responsive. Ensuite, je vais créer une requête multimédia une largeur maximale de 1 600 pixels. Ensuite, je vais sélectionner À propos des fonctionnalités de la page. Passons à 70 %. Maintenant, ils ont l'air bien. En fait, avec une page bonus, c'est terminé. Tout semble bon. Ensuite, allons-y et vérifions la page des livres. Ça a l'air bien, mais je voudrais changer une petite chose. Allons-y et ouvrons des livres. Fichier CSS et création de nouveaux commentaires pour le mode réactif. Créez ensuite à nouveau une requête multimédia avec une largeur maximale de 1 600 pixels Allons-y, sélectionnons le livre et modifions la marge. heure actuelle, nous avons une marge égale à six RAM sur les quatre côtés. Je vais faire une marge six en haut et en bas et trois sur les côtés gauche et droit. Maintenant, je pense que nous avons des résultats légèrement meilleurs. La page des livres semble bonne. Allons-y et consultons la page des témoignages. Je pense que d'après le témoignage à la page, tout va bien avec ce point de rupture, c'est terminé. Ensuite, nous devons rendre notre projet réactif au prochain point d'arrêt, qui dans ce cas est de 14, 40 pis de largeur et 900 pis de hauteur pour Passons à la prochaine conférence. 27. Partie 2: Lors de la dernière conférence, nous avons commencé à adapter notre projet à différentes tailles d'écran et à différents appareils. Nous avons apporté quelques modifications au premier point d'arrêt, qui était de 1 600 pixels de largeur et 900 pixels de hauteur Ensuite, nous devons rendre notre projet réactif face à ce point d'arrêt Je veux dire 14, 40 pixels de largeur et 900 pixels de hauteur. Allons-y et changeons le point d'arrêt. Je vais sélectionner celui-ci. Allons-y et consultons la page. Comme vous pouvez le constater, nous devons apporter quelques modifications aux diapositives. Allons-y, ouvrons le style du fichier CSS, puis créons une nouvelle requête multimédia CSS. Je vais spécifier une largeur maximale de 14 ou 40 pixels. La première chose que je vais faire est de réduire la taille du téléphone de l'élément HTML. Cela nous permettra de diminuer la taille de tous les éléments de la page. Allons-y, sélectionnons le HTML, puis diminuons la taille de la police. Je vais atteindre 58 %. OK, allons-y et vérifions les résultats. Tout semble bon. En fait, je vais m' occuper de la section des livres parce que je ne veux pas que cela figure ici. Je veux dire, je ne veux pas que le livre soit recouvert par l'icône principale. En fait, vérifions le point d'arrêt précédent. Nous avons ici le même problème. Par conséquent, je vais ajouter ce qui suit dans le point de rupture précédent. Il nous faut un livre. Je vais modifier la marge. Réglons la marge à six RAM en haut et en bas et à trois M sur les côtés gauche et droit. Nous allons vérifier les résultats maintenant. Ça a l'air bien. Passons au prochain point de rupture. Nous n'avons plus ce problème. D'accord, je pense que nous pouvons personnaliser les commentaires du client. Je vais changer le style par défaut. Allons-y, sélectionnons mais trouvons des commentaires. Comme vous vous en souvenez, nous avons défini la hauteur par défaut. En fait, je pense que nous pourrions omettre les deux propriétés. Je veux dire, nous pouvons les commenter et vérifier les résultats. Maintenant, comme vous pouvez le constater, nous avons ici un léger changement et je pense que cela semble beaucoup mieux. C'était une petite erreur de ma part, donc je vais me débarrasser de ces deux lignes à partir d'ici. Nous n'en avons plus besoin. C'est bon. Je trouve que la page principale semble bonne. Allons-y et consultons les autres pages. Je vais aller à la page à propos. Comme vous pouvez le constater, nous avons ici le même problème. L'icône du menu couvre l'en-tête. Nous avons le même problème ici pour le pied de page, l'en-tête du pied de Passons au fichier à propos de SS et créons une nouvelle requête multimédia CSS. Je vais marquer des points avec 14 à 40 véhicules. Ensuite, je vais sélectionner à propos de l'en-tête de section et déplacer l'en-tête à l'aide de transform translate. Je vais traduire à 60 %, ce sera pour l'axe x et 50 % pour l'axe Y. Je parle des directions horizontale et verticale, d'accord ? Le problème est donc résolu. En fait, je vais vérifier la page à propos et le point d'arrêt précédent Comme vous pouvez le constater, nous avons ici le même problème. Je vais ajouter ici ce qui suit. Sélectionnons le pied de page à peu près suivi de l'en-tête du pied de page. Ensuite, je vais déplacer l'en-tête vers la gauche en utilisant transform translate x, je vais le définir 60 %. Maintenant, le problème est résolu sur ce point d'arrêt si nous vérifions le projet au point d'arrêt suivant Donc, comme vous pouvez le voir, ça a l'air plutôt sympa. OK, je pense qu'avec la page à propos, nous sommes en bas. Passons à la page suivante, qui est la page des livres. Tout semble bon. Regardons la page des témoignages Comme vous pouvez le voir, ça a l'air bien aussi. Très bien, donc je pense qu' avec ce point de rupture, nous en avons terminé Je vais vérifier ce point d'arrêt. Le suivant est de 13 66 pixels de largeur et 768 pixels de hauteur. Je vais sélectionner l'écran quatre avec ces dimensions. Allons-y et consultons la page. Nous devons donc apporter quelques modifications ici. Allons-y, ouvrons le fichier de style CSS et créons une nouvelle requête multimédia CSS. Je vais définir la largeur maximale, elle sera de 13 68 pixels. La première chose que je vais faire est réduire à nouveau le HTML, la taille de téléphone de l'élément HTML. Je vais sélectionner le HTML, régler la taille du téléphone à 55 %, puis vérifier les résultats. Nous avons maintenant de bien meilleurs résultats. La seule chose que je vais faire est déplacer la bannière un peu vers le bas. Allons-y, sélectionnons bannière et définissons la position inférieure sur 25 RAM. OK, alors je vais augmenter la hauteur de la page des témoignages. Un tout petit peu. Allons-y et sélectionnons les témoignages. Je veux dire, la section des témoignages et la section des pages. Réglons la hauteur à 170, hauteur de vue. OK. Donc je pense que c'est ça. Tout semble bon. Allons-y et consultons les autres pages. Je vais vérifier si tout va bien. Ensuite, nous avons la page des livres. Ça a l'air bien aussi. Regardons la page « Pas de contact », mais « témoignages ». Je pense que nous n'avons pas besoin de modifications ici. Nous pouvons dire qu'avec ce point de rupture, nous en avons terminé. Allons-y et vérifions-le. Ensuite, nous avons cette pause, 0,12 80 pixels et 780 pixels. Je vais sélectionner l'écran 5. Allons-y et vérifions-le. OK, nous avons besoin de quelques modifications. Je vais créer une nouvelle requête multimédia CSS avec une largeur maximale de 12, 80 pixels. Je vais personnaliser la section à propos. Je vais modifier la largeur des deux parties. Je veux dire, la partie gauche et la partie droite. Allons-y et sélectionnons à propos du contenu restant. La largeur va être de 45 % Ensuite, je vais dupliquer ce code. Changeons le nom de classe dont nous avons besoin ici à propos du contenu, n'est-ce pas ? La valeur de la propriété de largeur va être de 55 %, d'accord ? C'est ça. Ensuite, je vais m'occuper de la liste des livres car nous avons ici le même problème. L'icône du menu couvre les livres. Allons-y et sélectionnons la liste des livres. Modifiez la largeur. Je vais dire 80 % Une fois que nous avons modifié la largeur, les livres ne sont plus placés au centre de la section. Allons-y et corrigeons cela en utilisant la marge a. Ensuite, nous devons également utiliser Flex box pour aligner le contenu au centre. Nous avons besoin de Display Flex, puis du centre de contenu Justify et du centre d'éléments Align. Maintenant, comme vous pouvez le constater, le problème est résolu. En fait, je pense que nous pouvons emballer les articles flexibles. Pour cela, nous pouvons placer les livres sur deux lignes. Je vais ajouter ici le flex wrap avec la valeur p. Maintenant, je pense que nous avons meilleurs résultats avec la section livre. Nous avons terminé. Passons à la section suivante. La section des témoignages semble bonne. Maintenant, il faut prendre soin du pied. Allons-y et sélectionnons contenu du pied de page que je vais fixer à 70 %. Maintenant, le contenu du pied de page semble bon Et nous devons également modifier la largeur de la face inférieure. Je vais sélectionner le bas. Réglons la largeur à 70 % Très bien, passons donc à la page principale. Allons-y et consultons la page. Comme vous pouvez le constater, les fonctionnalités sont foirées. Nous devons nous occuper de cela. Allons-y, ouvrons le fichier CSS et créons une nouvelle requête multimédia C. Nous avons besoin ici d'une valeur égale à 12, 80 pixels. Je vais sélectionner à propos de l'en-tête de section, je vais le déplacer légèrement vers la gauche en utilisant transform translate. Nous avons besoin ici de 50 % et encore 50 %. Ensuite, nous devons nous occuper des fonctionnalités. Allons-y, sélectionnons à propos fonctionnalités de la page et définissons avec deux 80 % OK, donc je pense que tout semble bien. En fait, nous devons déplacer l'en-tête du pied de page vers la gauche. Corrigons ce code et ajoutons-le ici. Je vais modifier la valeur de Translate Expansion. Réglons-le à 55 % OK, maintenant le problème est résolu. Allons-y et examinons la section suivante. Je veux dire, la page suivante c'est la page des livres, ça a l'air bien. Ensuite, nous avons une page de témoignages. Eh bien, vous pouvez voir que nous devons apporter quelques modifications ici. Allons-y et nous devons ouvrir ici les témoignages. Voyons ce fichier. Nous n'avons pas écrit ici de code pour le mode responsive. Insérons des commentaires responsive et de responsive. Et puis créez une requête multimédia CSS avec une largeur maximale égale à 12 80 pixels. Je vais sélectionner l' arrière-plan de la diapositive et définir sa largeur à 80 %. Nous avons également besoin de la même chose pour le contenu des diapositives. Dupliquons ce code et ajoutons ici du contenu au lieu de PG. OK ? Comme vous pouvez le constater, la diapositive est belle et, en fait, tout est réactif et correct. Passons à ce point de rupture. Nous pouvons vérifier ce point d'arrêt ici, puis nous devons passer à autre chose et rendre le projet réactif sur ce point d'arrêt I 1024 pixels de largeur et 768 pixels de hauteur Allons-y et sélectionnons l'écran six. Eh bien, nous pouvons voir que nous devons apporter les modifications au point d'arrêt Je vais accéder au fichier Style Do CS et créer une nouvelle requête multimédia CS. Ça va faire 1024 pixels. Tout d'abord, je vais à nouveau diminuer la taille de police de l'élément HDML Allons-y, sélectionnons HDML et définissons sa taille de police à 52 %. Ensuite, je vais déplacer l'icône du menu vers la droite Allons-y et sélectionnons l'icône du menu. Et réglez-le dans la bonne position sur cinq RAM. OK, je pense que la majeure partie de la page semble bonne. Je vais déplacer la bannière un peu vers le bas. Allons-y, sélectionnons la bannière et définissons-la comme points et position sur 20 RAM. Ensuite, je vais m'occuper du pied de page car tout le reste est beau Allons-y et en fait je vais récupérer ce code à partir d'ici. Je vais modifier la largeur du contenu du pied de page et du bas de page Faisons en sorte que le pied de page soit à 80 % Maintenant, le pied en bon état avec la page principale. Nous avons terminé. Passons à autre chose et vérifions la page, eh bien, nous avons besoin de quelques modifications. Découvrons le fichier CSS et créons un nouveau support CSS. Spécifiez une largeur maximale de 1024 pixels. Je vais sélectionner À propos de l'en-tête de section. Nous devons déplacer l' en-tête vers la gauche. Je vais traduire la fonction à 30 %, puis à 50 % également. Allons-y, sélectionnons les fonctionnalités de la page et définissons sa largeur à 90 %. Eh bien, je pense que c'est trop. Faisons en sorte que ce soit 40 % Eh bien, je pense que si nous nous débarrassons de cette vérification de code, nous n'aurons rien à changer concernant l'en-tête. Débarrassons-nous complètement de ce code. Ça a l'air plutôt sympa. La prochaine chose que je vais faire est occuper des images dans la section de l'équipe. Allons-y et sélectionnons membre avec des éléments d'image que je vais réduire en hauteur. Réglons les deux sur 23 rampes. OK, donc ils ont l'air bien. En fait, tout semble bon. Nous pouvons déplacer l'en-tête un peu vers la gauche. L'icône du menu ne le couvre pas, mais il est trop proche de l'en-tête. Je vais donc prendre ce code, ajoutons-le ici. Et diminuez la valeur de l'extension de traduction à 50 %. Cela semble beaucoup mieux. Allons-y et consultons la page des livres. Eh bien, tout semble bon. Ensuite, nous avons ici des témoignages. Nous devons nous occuper de ces diapositives. Allons-y, ouvrons fichier CSS des témoignages et créons de nouveaux médias CS Le xw sera de 1024 pixels. Sélectionnons la diapositive BG et définissons sa largeur à 90 %. Nous avons besoin ici 90 %. Ensuite, dupliquez ce code et modifiez le nom de classe dont nous avons besoin ici Le contenu, ça va être de 90 %, je veux dire la largeur du contenu. Ensuite, je vais changer la position des commandes. Je veux dire les flèches gauche-droite. Sélectionnons les commandes. Et puis nous avons besoin d'éléments avec un sélecteur d'enfants. Sélectionnons le premier dont nous avons besoin pour définir position gauche à 10 %. Ensuite, dupliquons ce code, changeons le numéro du énième sélecteur enfant Nous en avons besoin de deux et nous avons besoin de la bonne position. Alors maintenant, tout semble aller pour le mieux. Et le slider des témoignages, en fait je pense que nous pouvons déplacer le logo vers la gauche car nous avons ici un espace assez grand Je vais ouvrir le fichier CSS. Sélectionnons le logo et changeons la position gauche. Je vais faire 15 Ram. D'accord, en fait, réglons-le à dix m. Eh bien, je pense que maintenant c'est mieux. Jetons un coup d'œil aux pages. D'accord, cela correspond aux écrans de bureau. Nous avons terminé. Ensuite, nous devons adapter notre projet à ces points de rupture. Je veux dire, ces deux points d'arrêt sont les points d'arrêt pour les tablettes Pour cela, passons à la prochaine conférence. 28. Partie réactive 3: Très bien, allons-y et continuons à adapter notre projet aux différentes tailles d'écran et à différents appareils. Lors de la dernière conférence, nous avons fini de travailler sur les écrans de bureau. Nous devons maintenant passer à autre chose et commencer à rendre le projet adaptatif pour les tablettes. Je veux dire, nous devons faire en sorte que le projet réponde à ces deux points de rupture Commençons par le premier. Il va faire 820 pixels et 11 80 pixels. D'accord, changeons ici la taille d'écran dont nous avons besoin dans le tableau. Comme vous pouvez le constater, nous devons apporter des modifications car beaucoup de choses sont foirées Revenons au code VS dans le fichier de style CSS. Je vais créer un nouveau média CSS avec une largeur maximale de 820 pixels. La première chose que je vais faire est de diminuer à nouveau la taille de police de l'élément HTML. Sélectionnons le HTML , puis définissons la taille de police 48 %. Cela réduira la taille de tous les éléments de la page. Ensuite, je vais placer la bannière au centre de la page. Je vais donc sélectionner une bannière. Ensuite, je vais définir la bonne propriété. Ce sera 50 %. Nous avons également besoin du fond. Ce sera également 50 %. Afin de centrer parfaitement l' élément, nous utilisons dans ce cas les propriétés de droite et de bas. Nous devons utiliser transform translate avec les valeurs 50 % et encore 50 % . Lorsque vous utilisez les propriétés de gauche et du haut au lieu de droite et de bas, vous devez transformer la traduction avec -50 % et -50 % Comme vous pouvez le voir, la bannière est placée au centre. Ensuite, je vais m' occuper de la section à propos. Allons-y et sélectionnons la partie gauche. Il s' agira du contenu restant. Je vais définir la largeur. Cela va être de 40 %. Ensuite, je vais dupliquer ce code car nous devons également définir la largeur du côté droit. Nous avons donc besoin d'ici à droite plutôt qu'à gauche. Et la largeur sera de 60 %. D'accord, après cela, je vais changer la taille du téléphone pour le petit titre. Je vais sélectionner le titre de section SM et régler la taille du téléphone 1.4 Ensuite, je vais m' occuper du paragraphe. Allons-y et sélectionnons À propos de P. Tout d'abord, je vais changer la taille du téléphone. Ce sera 1,6 RAM. Ensuite, je vais diminuer la largeur. Ça va faire 45 RAM. Allons-y et vérifions le navigateur. OK, l'icône du menu ne couvre donc pas le texte du paragraphe. Ensuite, je vais passer à la section des livres. Comme vous pouvez le constater, l'icône du menu couvre le numéro de section. Je vais m' occuper de l'en-tête. Allons-y et sélectionnons Livres, puis l'en-tête des livres. Je vais définir la largeur. Il va faire 35 RAM. Comme vous pouvez le constater, la largeur de l'en-tête est modifiée, mais nous devons ajuster la taille de la bordure de section. Allons-y et sélectionnons en-tête des livres, suivi de la bordure de section. Je vais régler la largeur, 235 RAM. OK, maintenant le problème est résolu et l'icône du menu ne couvre pas le numéro de section. La section du livre semble bonne. Ensuite, nous devons nous occuper des témoignages. Je vais ajuster la hauteur de la section car elle est trop longue pour le moment. Je parle de la longueur de la section. Allons-y, sélectionnons des témoignages et fixons la hauteur à 100 pieds. À droite, cela se trouve à propos de la section des témoignages. Ensuite, nous devons prendre ici le pied de page, les champs de saisie Allons-y et sélectionnons le groupe d'entrée suivi des éléments d'entrée, et sa largeur est de 28 Rm. Vérifie le navigateur. Comme vous pouvez le constater, le pied est beau. En fait, avec la page principale, c'est terminé. Toutes les sections et tous les éléments sont plutôt jolis. Allons-y et consultons les autres pages. Je vais commencer par les pages à propos. Je peux voir que tout est foiré ici. Allons-y, abordons le fichier CSS et créons un nouveau média CS. Les repères seront de 820 pixels. Je vais commencer par l'en-tête de section. Je veux le placer au centre de la page. Allons-y et sélectionnons à propos de l'en-tête de section. Mettons le texte au centre de la ligne. Ensuite, je vais utiliser la fonction Transform Translate. Et je vais mettre les valeurs à 0.0. L'en-tête est placé au centre. Ensuite, nous devons prendre soin de cet élément bleu ici. Nous devons également le placer au centre. Allons-y et sélectionnons à propos de l'en-tête de section suivi de la bordure de section. Ensuite, après avoir vu l'élément, définissons la bonne position à 50 % Ensuite, pour placer l' élément au centre, nous devons transformer translate x avec la valeur 50 %. D'accord, asseyons-nous au-dessus de l'en-tête. Ensuite, nous devons nous occuper des fonctionnalités. Nous allons modifier l' alignement des fonctionnalités. Allons-y et sélectionnons à propos des fonctionnalités de la page. Tout d'abord, je vais changer le rembourrage en bas Réglons-le sur 25. Ensuite, je vais modifier l' alignement des photos. Allons-y et trouvons les styles par défaut. Je vais récupérer ce code d'ici. Collons-le ici et apportons les modifications. En fait, nous devons insérer le zéro partout. Vérifie le navigateur. Maintenant, comme vous pouvez le voir, les fonctionnalités sont placées différemment. Je trouve qu'ils sont plutôt jolis. Ensuite, je vais m' occuper de la section des équipes. Je vais changer la forme de l' arrière-plan et en faire un rectangle au lieu d'un triangle. Allons-y et sélectionnons l'équipe. Comme vous vous en souvenez, nous avons utilisé une propriété appelée clip path. Je vais le régler sur aucun, puis je vais ajuster la taille de l'élément. Réglons avec 100 %. Quant à la hauteur, je vais la fixer à 70 epo La forme de l' élément est modifiée. En fait, je vais me débarrasser de cette ombre en forme de boîte. Réglons l'ombre de la boîte sur aucune. Très bien, donc je trouve que la section des équipes est plutôt jolie. Ensuite, nous devons modifier la taille des images. Je vais sélectionner le membre, puis les éléments de l'image. Réglons w et hauteur, tous deux à 20 m. Ensuite, je vais modifier la taille de police de la position du membre. Réglons-le sur 1,2 m. Comme vous pouvez le voir, l'en-tête du pied de page s'est retrouvé sur le fond de la section consacrée à l'équipe Nous allons régler ce problème dans une minute. Allons-y, sélectionnons le pied de page environ et définissons la marge à zéro Maintenant, le problème est réglé. Ensuite, je vais m'occuper de l'en-tête du pied de page. Nous allons le placer au centre de la page. Je vais sélectionner le pied de page à propos, puis l'en-tête du pied de page Mettons le texte au centre de la ligne. Ensuite, nous devons transformer translate x avec une valeur nulle. OK, maintenant nous avons besoin de la même chose avec cet élément suivant. Je parle de cet élément taureau. Il faut le placer au centre. Je vais sélectionner le pied de page à propos, suivi de l'en-tête du pied de page Ensuite, je vais sélectionner la bordure de section avec après l'élément, nous avons besoin de la bonne position à 50 %, puis transformer la traduction x 50 %. D'accord, c'est tout. L'en-tête est placé au centre et tout est plutôt joli avec la page à propos. Nous avons terminé. Passons à autre chose et examinons les autres pages. La suivante est la page des livres, et je pense qu'elle devrait être belle. Nous n'avons pas besoin d'apporter des modifications ici. Ensuite, nous avons une section de témoignages. Comme vous pouvez le constater, nous devons apporter quelques modifications. Allons-y, ouvrons le fichier CSS de témoignages et créons une nouvelle requête multimédia CSS d'une largeur maximale de 820 pixels Je vais sélectionner l'élément de section, je veux dire la section des témoignages Je vais définir la hauteur. La hauteur sera de 100 pieds. Nous allons vérifier les résultats. La hauteur est diminuée. Ensuite, je vais m' occuper de la lampe. Commençons par le léger arrière-plan. Je vais définir la largeur à 95 %. Dupliquons ce code, car nous avons besoin de la même chose avec un contenu léger. Vérifie le navigateur, la largeur est augmentée. Ensuite, je vais m' occuper du paragraphe. Allons-y et sélectionnons le texte de la diapositive, puis les éléments. Et je vais me fixer à 232 m. Maintenant, nous avons de bien meilleurs résultats. Ensuite, je vais légèrement modifier la position des flèches. Allons-y et sélectionnons les commandes, puis les éléments. Ensuite, nous avons besoin du nième sélecteur d'enfants. Il nous faut le premier. Réglons la position gauche à 5 %. Ensuite, je vais dupliquer ce code et changer le numéro du sélecteur du nième enfant Il nous en faut deux. Pour ce du poste, il va être juste. OK, donc tout semble bon. En fait, avec ce point de rupture, c'est terminé. Passons à la page d'accueil. Le suivant. Le point d'arrêt suivant pour la tablette est ce point d'arrêt ici Je vais vérifier celui-ci. Ensuite, allons-y et sélectionnons le tableau deux. Je vais m' occuper des livres. Je vais les réduire légèrement. Je vais également m'occuper de la section des témoignages. OK, allons-y et créons de nouveaux médias CSS. Dans ce style de fichier CSS, la largeur maximale sera de 768 pixels. Allons-y, sélectionnons le livre et réglons-le sur 32 en largeur. Exécutez alors nous avons besoin d'un livre avec des éléments d'image. Je vais partir avec 27 r. Très bien, donc les livres sont devenus plus petits et je les trouve plutôt jolis. Ensuite, je vais m'occuper de la section des témoignages. Allons-y sélectionnons les témoignages et je vais modifier la hauteur de la section Disons 2115 points de vue sur la hauteur du pot. Bien, après cela je vais m'occuper des entrées dans le pied de page Allons-y et sélectionnons groupe d'entrée suivi des éléments d'entrée. Passons à 226 m. D'accord, je pense que c'est tout. À propos de la page principale. Regardons les autres pages. La page à propos semble bonne. Nous devons apporter ici un changement de diapositive. Je vais diminuer la largeur des images car comme vous pouvez le voir, l'icône du menu recouvre l' image du membre. Allons-y, parlons du fichier CSS et créons de nouveaux médias CS. Le maximum sera de 768 pixels. Ensuite, je vais sélectionner le membre avec des éléments d'image. Réglons la largeur de l'image à 18 RAM. Et nous devons également changer la hauteur, mais aussi 32 18 Ram. OK, cela se trouve à peu près à la page suivante, je vais vérifier la page des livres. Tout semble parfait. Ensuite, nous avons une page de témoignage, ça a l'air bien. Très bien, cela concerne les points d'arrêt. Examinons le deuxième tableau des points d'arrêt. Ensuite, nous devons rendre notre projet téléphones mobiles adaptatifs. Et pour cela, passons à la prochaine conférence. 29. Rendre le projet réactif - Partie 4: Lors de la dernière conférence, nous avons fini de rendre le projet adaptatif pour les tablettes. Nous avons eu deux points de rupture différents. Ces points d'arrêt, et le projet répond aux deux écrans de tablette Ensuite, nous devons rendre le projet adaptatif pour les téléphones portables. Je veux dire, nous avons ici trois points de rupture différents. Allons-y et sélectionnons le mobile. Donc, comme vous pouvez le constater, tout est en désordre ici Nous devons donc faire beaucoup de choses sur le point d'arrêt, passons au code VS et ouvrons le fichier CSS Je vais créer de nouveaux médias CSS. La largeur maximale sera de 413 pixels. La première chose que je vais faire est de modifier la taille de police de l'élément HTML. Nous allons sélectionner le code HTML et définir la taille de police. Je vais le mettre à 42 % Cela diminuera la taille de tous les éléments. Ensuite, je vais m' occuper du logo. Sélectionnons Logo et déplaçons-le légèrement vers la gauche. Nous avons besoin de sa position gauche avec une valeur de cinq RAM. Ensuite, je vais m' occuper de la bannière. Je vais diminuer la taille des éléments d'en-tête. Allons-y et sélectionnons la bannière H trois. Et changez la taille du téléphone. Il y aura cinq RAM. Ensuite, je vais dupliquer ce code et sélectionner H un élément de titre, la taille du téléphone sera de 12 RAM. OK, donc je pense que l'en-tête du site Web semble bon. Ensuite, nous avons à propos de la section. Je vais sélectionner « À propos de la section ». Définissons la hauteur. La hauteur de vue sera de 80. Ensuite, je vais créer de l'espace au bas de la section à l'aide d'un rembourrage En bas, la valeur sera de 25 m. Ensuite, je vais modifier l' alignement des éléments. Tout d'abord, diminuons la taille du numéro de section. Je vais sélectionner la section suivie des éléments d'envergure. Diminuez la taille du téléphone. Ça va être 16 Re. Ensuite, je vais réduire l'espace sur le côté droit du numéro. Je vais sélectionner Content Left. Réglons le rembourrage sur le côté droit à zéro. Ensuite, je vais changer le rembourrage pour le côté droit. Allons-y et sélectionnons à propos du contenu, d'accord. Définissez le rembourrage avec les valeurs suivantes. Nous avons besoin de quatre RAM en haut, zéro sur le côté droit, zéro en bas et six sur le côté gauche. Bien, après ça, je vais m'occuper du bouton principal. Je vais le placer ici. Maintenant, allons-y et sélectionnons À propos. Suivi par le PTM principal. Je vais définir la position absolue selon laquelle nous avons besoin position relative pour les éléments de section. Définissons que la position inférieure sera de 15 RAM. Ensuite, je vais placer le bouton au centre horizontalement avec la position gauche avec une valeur de 50 %, puis transformer translate x avec -50 % OK, le bouton est en position suivante, je vais m'occuper du titre sur le côté droit Allons-y, sélectionnons titre de section LG et diminuons la taille du téléphone. Faisons en sorte que ce soit 2,5 RAM. Bien, après cela, je vais m' occuper de la bordure de section. Je vais diminuer la largeur. Allons-y et sélectionnons À propos du contenu, n'est-ce pas ? Suivi de la bordure de section et réglez la largeur sur 25 D. Très bien. Je pense que c'est tout à propos de l'en-tête. Ensuite, nous devons passer au paragraphe. Je vais le placer au centre. Allons-y et sélectionnons le contenu, non ? Suivi par l'élément. Je vais régler la position sur absolue. Ensuite, nous devons positionner à 50 %. La position gauche sera de 50 % Ensuite, nous devons centrer l'élément en utilisant transform translate x -50 %. Alignons également le texte au centre Maintenant, comme vous pouvez le constater, les deux paragraphes se sont retrouvés l'un au-dessus de l'autre. Allons-y et changeons la position du deuxième paragraphe. En fait, prenons le sélecteur d' ici et ajoutons au paragraphe le dernier enfant de la classe Je vais régler la position à 50 %. D'accord, c'est tout. La section à propos est plutôt jolie. Ensuite, nous devons nous occuper de la section des livres. Allons-y et sélectionnons l'en-tête des livres. Je vais fixer la marge sur le côté droit à trois béliers. Ensuite, je vais m'occuper du numéro de section. Allons-y et sélectionnons les livres, puis le numéro de section. Je vais changer le placement sur le côté droit, réglons-le sur cinq RAM. Ensuite, je vais modifier la largeur de la bordure de la section. Allons-y et sélectionnons les livres, puis la bordure de section. Et je vais utiliser 230 RAM. En fait, nous n'en avons pas besoin ici. La largeur de la bordure est modifiée, mais comme vous pouvez le voir, elle a changé de position. Nous devons le déplacer sur le côté droit. Pour cela, je vais utiliser la marge gauche avec la valeur de. OK, c'est tout à propos de l' en-tête de la section du livre. Les livres eux-mêmes ont l'air bien et en fait, avec cette section, c'est terminé. Ensuite, nous devons nous occuper de la section des témoignages. Comme vous pouvez le constater, nous devons apporter ici de nombreux changements. Allons-y et sélectionnons les éléments de section pour les témoignages sur les noms de classe Je vais changer la hauteur, passons-la à 125. Ensuite, je vais sélectionner le numéro de section. Nous avons besoin de vos témoignages en haut, suivis la section et je vais modifier la marge sur le côté droit, disons à cinq RAM Ensuite, je vais changer le côté de la frontière. Allons-y et sélectionnons témoignages suivis de la bordure de section En fait, nous pouvons utiliser ici des témoignages sans témoignages En haut, je vais régler la largeur 229 Ram. Vérifions-le dans le navigateur. Très bien, l'en-tête avec le numéro de section semble bon. Ensuite, nous devons nous occuper des commentaires. Allons-y et sélectionnons les commentaires en haut de la page. Je vais changer le sens de flexion, mais dans ce cas, je vais utiliser inverse des colonnes car je veux les premiers éléments de la section soient des en-têtes plutôt que des guillemets. Maintenant, comme vous pouvez le voir, le titre est placé en haut du. Et sur l'image suivante, je vais me débarrasser du rembourrage sur le côté gauche. Mettons-le à zéro. Maintenant, le titre sera placé au centre de la section. Ensuite, je vais créer un espace en bas du titre. Allons-y, sélectionnons le titre des commentaires et fixons la marge en bas à cinq RAM. Ensuite, je vais m' occuper de l'arrière-plan. Allons-y et sélectionnons PG. Je vais modifier les propriétés en haut et à gauche. Je veux dire la position, fixons la première position à 250 RAM. Pour ce qui est de la position de gauche, je passe à neuf. Et augmentons également la hauteur de l'élément. Allons 32 à 50 RAM. Bien, après cela je vais m'occuper de la citation elle-même. Allons-y et sélectionnons, changeons la position de la citation. La première place sera 58 Ram. Ensuite, je vais régler la position gauche sur 12 RAM. Et modifiez également la taille des éléments. Nous avons besoin. La largeur doit être de 40. Changez également la hauteur, faisons-en 37 RAM. OK, donc la citation est plutôt jolie. Ensuite, nous devons nous occuper du contenu de la citation. Commençons par le téléphone Atomic. Allons-y et sélectionnons l'en-tête I actually. Nous avons besoin d'une taille de téléphone de cinq. Ensuite, je vais changer l' espace entre le titre, je veux dire le nom du client et le. Allons-y et sélectionnons l'en-tête suivi de l'élément de titre H un. Mettons la mise à zéro, puis à cinq RAM. Maintenant, le titre. L'en-tête semble bon. Ensuite, je vais m' occuper du paragraphe. Allons-y et sélectionnons Body, puis les éléments. La largeur du paragraphe sera de 30 RAM. Ensuite, nous avons besoin de la taille de police. Mettons-le sur 1.4 En fait, nous avons besoin 1.4 Ensuite, je vais créer de l'espace en bas en utilisant la marge. En bas avec une valeur de 3,5 RAM. OK, donc le contenu de la citation est sympa. Et en fait, avec cette section, c'est terminé. Passons à autre chose et prenons soin du pied de page. Je vais modifier l'alignement du contenu dans le pied de page Allons-y et sélectionnons le contenu du pied de page. Changeons le sens de flexion. La colonne sera inversée parce que je veux placer les champs de saisie en haut du contenu. Comme par la suite, je vais modifier la largeur du formulaire ainsi que la partie sociale. Allons-y, sélectionnons Social avec formulaire et réglons sur 100 %. Ensuite, je vais sélectionner Foot Social individuellement. En fait, avant de nous occuper du Foot Social, je vais m'occuper du formulaire parce que nous avons ici le formulaire au départ. Allons-y, sélectionnons le groupe d'entrée et définissons sa largeur à 100% Ensuite, je vais sélectionner le groupe d'entrée, puis l'élément d'entrée, définir sa largeur pour hériter Dans ce cas, l'élément d'entrée héritera de la largeur de l'élément parent Comme vous pouvez le constater, les entrées sont belles. Ensuite, je vais m' occuper du bas. Allons-y et sélectionnons le formulaire, puis le bas. Réglons avec 100 %. Ensuite, nous avons besoin d'une marge en bas, dix RAM. Comme vous pouvez le constater, le bas est plutôt joli. Ensuite, je vais m' occuper de cette partie ici. Je veux dire Foot Social. Mettons le code ici. Sélectionnez Foot Social. Je vais utiliser Flex box. Réglons display Flex car nous allons placer les éléments côte à côte horizontalement. Et puis créons de l'espace en utilisant le contenu de justification. Espace entre, comme vous pouvez le voir, l'adresse et le téléphone Les icônes Awesome sont placées côte à côte. Je vais déplacer verticalement les icônes du téléphone au centre Pour cela, nous pouvons utiliser, en fait, sélectionnons les réseaux sociaux, puis utilisons la propriété appelée Align Self avec un centre de valeur. Les asomicons du téléphone sont placés verticalement au centre. Très bien, donc en fait, avec la page de destination principale, c'est terminé. Tout semble bon. Allons-y et vérifions la navigation. Je vais supprimer complètement cette image et laisser ici les éléments de navigation. Allons-y, sélectionnons la gauche et masquons-la en utilisant ce jeu. Non, l'image est masquée. Ensuite, nous devons étendre le côté droit à toute la page. Pour cela, nous devons utiliser le nom de la classe, naviguer. Et puis il nous en faut assez, non ? Cela est dit avec 100 % OK, donc c'est tout. La navigation a l'air plutôt sympa. Très bien, avec la page principale, c'est terminé. Allons-y et consultons les autres pages. Regardons la page, nous devons vous retirer de la section équipe. Tous les autres éléments semblent bons. Allons-y, ouvrons un fichier CSS en forme de bouteille et créons une nouvelle requête multimédia CSS. Nous avons besoin d'un maximum de 430 pixels. Allons-y, sélectionnons la section de l'équipe et définissons la hauteur. Je vais atteindre une hauteur de 100 points de vue, puis je vais placer les images verticalement dans une colonne. Allons-y, sélectionnons les membres et changeons la direction du flex. Ce sera une colonne , puis je vais créer un espace entre les membres. Je vais sélectionner une marge définie par les membres à quatre M en haut et en bas et à en haut et en bas et six RAM sur les côtés gauche et droit. Très bien, les membres ont l'air bien. Nous devons prendre soin de la direction. Sélectionnons l'équipe, puis les éléments de titre H et modifions la marge. Ce sera zéro en haut, zéro sur le côté droit, Ten Ram en bas et zéro sur le côté gauche. OK, donc la section équipe a l'air bien. Et en fait, avec la page courbée, c'est terminé. Allons-y et consultons la page des livres , tout semble bon. Ensuite, nous avons une page de témoignages. Comme vous pouvez le constater, nous devons apporter quelques modifications. Le slider, les diapositives ne sont pas très beaux. Allons-y, ouvrons des témoignages de fichiers CSS et créons une nouvelle requête multimédia CSS d'une largeur maximale de 430 pixels Tout d'abord, je vais modifier la taille de l'emballage du témoignage Allons-y et sélectionnons l'emballage du témoignage. Je vais me fixer à 60 %. Quant à la taille, elle sera de 60 grammes. Ensuite, je vais modifier la taille de la diapositive elle-même. Nous avons besoin d'un léger arrière-plan. Réglons avec 80 % , puis la hauteur sera de 90 %. Nous avons également besoin du contenu de la diapositive. Réglons avec 80 %, puis nous avons besoin d'une hauteur de 90 %. D'accord. Ensuite, je m' occuperai des citations. Allons-y et sélectionnons Slide, puis les éléments. Je vais changer la taille du téléphone. Réglons-le sur sept RAM. le moment, les guillemets ne sont pas visibles car nous devons modifier les positions du téléphone. Allons-y et sélectionnons la diapositive I, puis le sélecteur N. Je vais sélectionner la première icône. Fixons la première position à -5 %. Quant aux positions actuelles, elles sont fixées à 10 %. Je ne vais donc pas la changer Allons-y et dupliquons ce code. Modifiez également le sélecteur dont nous avons besoin ici. Maintenant, je vais fixer la position inférieure à -5 % accord, nous avons donc les guillemets Ils sont bien positionnés et beaux. Ensuite, je vais modifier l'alignement de la diapositive. Je vais ajouter ici la colonne de direction du flex. Ensuite, nous avons besoin d'espace entre les éléments flexibles en utilisant l'espace de contenu de justification. Même maintenant, comme vous pouvez le constater, les éléments flexibles sont placés verticalement dans une colonne. Je vais m' occuper de l'image. Allons-y, sélectionnons l' image de la diapositive et modifions-en la taille. Nous avons besoin d'une largeur de 75 %. Quant à la hauteur, je vais la fixer à 16, puis éliminons la marge sur le côté droit. Mettons-le à zéro. Très bien, donc l'image est belle. Ensuite, je vais m' occuper du texte. Sélectionnons le texte de la diapositive et définissons sa largeur à 100 %. Maintenant je vais modifier la largeur du paragraphe. Allons-y et sélectionnons texte de la diapositive suivi de l'élément P. Je vais régler la largeur à 25 D. D'accord, donc cela se trouve à peu près sur la page de témoignage Tout semble bon. En fait, avec ce point d'arrêt, c'est terminé. Toutes ces sections et toutes les pages sont plutôt jolies. Allons-y et vérifions ce point d'arrêt ici. Et maintenant, nous devons personnaliser le projet. Au point d'arrêt, sélectionnons Mobile Two Je vais à nouveau diminuer taille du téléphone de l'élément HTML. Allons-y et créons une nouvelle requête multimédia CSS avec une largeur maximale égale à 393 pixels. Allons-y et changeons la taille de téléphone de l'élément HTML. Je vais 32, 38 %. Voyons les projets. Comme vous pouvez le constater, tout semble bon. Je vais vérifier que les pages à propos de la page sont bonnes. Ensuite, nous avons la page des livres, elle a l'air bien. Et jetons un coup d'œil à la page des témoignages. Tout a l'air plutôt sympa. Très bien, asseyons-nous sur ce point de rupture. Ensuite, je vais m'occuper du prochain point d'arrêt, qui est le dernier Allons-y et sélectionnons Mobile Three. Dans ce cas, nous devons apporter quelques modifications. Allons-y et créons de nouveaux médias S. En fait, je vais dupliquer le code dont nous avons besoin ici, largeur maximale égale à 375 pixels. Je vais diminuer la taille du téléphone. Faisons en sorte que ce soit 36 % et examinons le projet. L'en-tête du site Web semble bon. Ensuite, nous avons à propos de la section. Ça a l'air bien. La section du livre semble bonne. Nous devons personnaliser la section des témoignages. Allons-y et sélectionnons les témoignages. Je vais changer la hauteur. Faisons en sorte qu'il atteigne une hauteur de 150 pieds. Maintenant, le problème est résolu et le pied de page est également beau OK, regardons les autres pages. Nous avons ici une page de livre, qui a l'air bien. Ensuite, nous avons la page des livres. Ça a l'air bien aussi. Et enfin, nous avons ici des témoignages. Je vais augmenter la hauteur de la section des témoignages Ouvrons donc les témoignages d'un fichier CSS, créons une nouvelle requête multimédia CSS d' une largeur maximale de 375 pixels Sélectionnez ensuite la section des témoignages et modifiez la hauteur. Je vais faire en sorte que la hauteur de la fenêtre soit de 130, d'accord ? Maintenant, cette section a l'air bien, et en fait tout semble plutôt beau, d'accord ? On peut dire que le projet s'adapte différentes tailles d'écran et à différents appareils. Avant de terminer notre cours, je vais faire certaines choses. Jetons un coup d'œil au projet terminé. Je vais créer le chargeur du site Web, je parle de cette animation ici. Ensuite, nous devrions déployer le site Web et le mettre en ligne. Très bien, allons-y et passons à la prochaine conférence. 30. Créer un chargeur de site Web: Lors de la dernière conférence, nous avons fini de travailler sur le mode réactif. Notre projet est adapté aux différentes tailles d'écran et à différents appareils. Maintenant, comme je l'ai dit, nous allons créer le chargeur de site Web. Jetons un coup d'œil au projet terminé. Si nous rechargeons la page, cette jolie animation apparaîtra Et une fois l'animation terminée, la page Web sera chargée. Dans cette conférence, nous allons créer ce chargeur de site Web sympa et cool. Avant cela, je vais faire une dernière chose. Si nous ouvrons la navigation et cliquons sur le lien de contact, nous accédons à la section contact. Si nous ouvrons une autre page et que nous cliquons à nouveau sur le lien de contact, nous accédons à la section contact de cette page. Dans notre projet, nous n' avons pas cette fonctionnalité. Passons au code VS. Je vais trouver le pied de page. Je vais ajouter à l'attribut ID du pied de page la valeur contact Ensuite, je vais récupérer cet attribut. Copions-le et ouvrons tous les fichiers HTML. Nous avons besoin d'un code HTML en bouteille, puis de livres de HTML et de témoignages attestant que le HTML est ouvert partout. Nous devons transmettre l'attribut pour le serveur complet. Ouvrons des livres de fichiers HTML et ajoutons ici un identifiant. Enfin, nous avons ici un pied de page pour les témoignages, c' est-à-dire insérer C'est bon. Maintenant, si nous allons dans le navigateur et cliquons sur Lien , nous accédons à la section du contrat. Mais comme vous pouvez le constater, la navigation n'est pas fermée. Nous en sommes à la section contact, mais nous devons gérer la fermeture de la navigation. Une fois que nous avons cliqué sur le lien de contact, passons au script Java. Je vais sélectionner le lien de contact. Créons un nouveau lien de contact variable , puis sélectionnons-le à l'aide de la méthode de sélection de requête de document Nous devons spécifier ici la navigation suivie des éléments A. Et nous avons besoin ici du dernier enfant car lien de contact est le dernier lien des éléments de navigation. OK, après cela, je vais sélectionner Contact Link et y ajouter un écouteur d'événements En cliquant sur Events, je vais insérer ici la fonction de rappel, qui sera exécutée une fois que vous aurez cliqué sur le lien du contact Une fois que nous avons cliqué sur le lien de contact, nous devons supprimer le cours. Naviguez depuis le conteneur. En fait, nous n'en avons pas besoin. Récupérons cette ligne de code au lieu de togalmove, puis allons dans le navigateur Je vais aller sur n'importe laquelle des pages. Cliquez sur Lien de contact. Comme vous pouvez le constater, nous sommes redirigés vers la section contact. Passons à la page d'accueil. Cliquez sur Contact. Nous sommes redirigés vers la section de contact. Très bien, donc tout fonctionne bien. Passons à la page d'accueil. Ensuite, je vais commencer à créer le chargeur. Nous devons insérer le marquage HDMon ici à l'intérieur des éléments de carrosserie juste avant le conteneur Insérons de nouveaux commentaires dans un chargeur. Ensuite, je vais ouvrir le tag dip avec le nom de classe loader wrapper. Dans le cadre de ce développement, je vais ouvrir une autre fenêtre avec le chargeur de nom de classe qui concerne le balisage HTML Je vais ouvrir le fichier de style CSS et trouver le conteneur. Je vais masquer le conteneur en utilisant l' opacité zéro et la visibilité Ensuite, je vais insérer vos nouveaux commentaires pour le chargeur. Je vais sélectionner l'emballage. Définissons les hauteurs comprises. La largeur sera de 100 %, puis la hauteur de 100 points de vue. Changez la couleur de fond. Réglons la couleur sur 151515. Ensuite, nous devons changer de position. Ça va être réparé. Je vais également définir les propriétés en haut à gauche, toutes deux nulles. Ici, nous avons l' emballage. Ensuite, nous devons nous occuper du chargeur. Allons-y et sélectionnons le chargeur. Je vais définir la largeur. Faisons en sorte que ce soit 40 %. Ensuite, il nous faut de la hauteur. Je vais le régler sur 0,1 rampe, puis changer la couleur d'arrière-plan. Ça va être blanc. Vérifions-le dans le navigateur. Ici, nous avons le chargeur. Je vais le placer au centre de la page. Pour cela, utilisons Flex book. Nous avons besoin ici d'afficher Flex, puis de justifier le centre et d'aligner les éléments au centre. OK, nous avons donc le chargeur. Je vais maintenant créer l'animation, je veux dire les images-clés CSS. Ajoutons ici des images-clés avec le nom du chargeur. Nous allons suivre quelques étapes différentes. À 0 %, je vais diminuer l'échelle de l'élément. Utilisons la fonction scale x et mettons-la à zéro. Nous devons également modifier l'origine de la transformation. Faisons en sorte qu'il soit à gauche. Au début de l'animation, l'élément n'aura aucune largeur et sera transformé depuis le côté gauche. Ensuite, nous avons 20 %. Reprenons ces deux lignes. À 20 %, je vais augmenter l'échelle. Faisons-en un. Et l'origine de la transformation sera encore une fois, gauche. Après 20 % de progression, l'élément est entièrement visible et toujours transformé depuis le côté gauche. Dupliquons ce code. La prochaine étape est de 25 %. Nous avons besoin d'une échelle x un. Quant à l'origine de la transformation, elle sera encore une fois correcte. Avec une progression de 25 %, l'élément reste entièrement visible, mais il est désormais transformé depuis le côté droit. Dupliquons à nouveau le code. L'étape suivante est de 45 %. À cette étape, nous avons besoin d'une échelle lex zéro. L'origine de la transformation sera encore une fois, à 45 % de progression, l'élément disparaît en étant transformé de son côté droit. Ensuite, nous avons 50 % nous avons besoin de scalac zéro et de transform origin À 50 % de progression, l'élément reste invisible lorsqu'il est transformé depuis son côté droit. L'étape suivante est 70 %. À 70 %, nous devons en calculer un et transformer l'origine À 70 % de progression, l'élément réapparaît tout en étant transformé depuis le côté droit. Ensuite, nous avons 75 %. Nous devons ici calculer un et transformer l' origine à gauche. À 75 % de progression, l'élément reste visible, mais maintenant il est transformé depuis le côté gauche Enfin, nous avons besoin ici de dupliquer le code à 100 %. Nous avons besoin d'une échelle de 100 % x zéro et de la transformation de l'origine à gauche. À la fin de l'animation, l'élément disparaît alors qu'il est transformé depuis son côté gauche. Très bien, afin d'appliquer ces règles, je vais ajouter une animation au chargeur. Nous avons besoin du chargeur de noms. Ensuite, la durée sera de 5 secondes. De plus, je veux un petit délai, 0,5 seconde. OK, passons au navigateur. Comme vous pouvez le constater, l' animation fonctionne. En fait, je vais masquer par défaut Le chargeur que je vais ajouter ici transforme l'échelle x zéro. Une fois l'animation terminée, le chargeur disparaît. C'est bon, tout semble bon. Ensuite, je vais ajouter le script V au projet. Je vais ouvrir le script OJS. Insérons ici de nouveaux commentaires pour le chargeur. Ensuite, je vais sélectionner Loader Wrapper. Créons une nouvelle variable, appelons-la loader. Et sélectionnez Loader Wrapper. Nous avons besoin ici d'un chargeur et d'un emballage. Ensuite, je vais m' attacher à l'écouteur d'événements Window Object Avec l'événement, nous avons besoin ici de Window Event Listener. L'événement va être chargé. Ensuite, je vais insérer ici la fonction de rappel, qui sera exécutée une fois la fenêtre chargée Je vais maintenant utiliser l'une des fonctions intégrées à Javascript appelée set time Out. Utilisons set time Out. Je vais insérer votre fonction COBC. Après un certain temps, je vais cacher le chargeur. Et après un certain temps, je vais également exposer le contenant. Je vais maintenant ajouter une nouvelle classe au chargeur, qui sera ensuite utilisée en CSS pour masquer le chargeur. De la même manière, je vais ajouter une nouvelle classe au conteneur qui sera utilisée en CSS pour réafficher le conteneur. Je vais ajouter ici la liste des classes de chargeurs. Je vais appeler le nom de la classe Hide Next, nous devons ajouter ici, le délai sera de 6 000, je veux dire 6 secondes. Ensuite, je vais dupliquer ce code. Nous avons besoin d'un temps différent pour le conteneur. Je vais ajouter ici un conteneur. Appelons le nom de la classe, Show. Quant au temps de retard, il sera de 5 500 millisecondes OK, passons au fichier CSS et je vais ajouter ici la hauteur en chargeant le wrapper, je vais mettre ici l'opacité à zéro et Ensuite, je vais montrer le conteneur dont nous avons besoin ici, montrer suivi du conteneur. Nous avons donc besoin ici de ces deux propriétés. La capacité va être une. Quant à la visibilité dont nous avons besoin ici, elle est visible. OK, vérifions le navigateur, chargeons la page. Nous avons ici le chargeur avec animation. Une fois l'animation terminée , le conteneur apparaît. Si nous ouvrons l'une des pages, vous verrez que le conteneur n'est pas visible, mais il apparaîtra après un certain temps. En fait, nous n'en avons pas besoin. Je vais régler ces problèmes. Passons au code VS et ouvrons le fichier d'index HTM. Je vais ajouter de la classe au conteneur. Ce sera le conteneur principal. Nous devons utiliser le conteneur qui se trouve dans le HTMpile indexé. C'est pourquoi j'ajoute ici une nouvelle classe. En plus de cela, je vais utiliser le corps de l'index HTMAlpile Je vais ajouter le corps ici, puis je vais masquer la barre de défilement. Pour cela, nous avons besoin d'un chauffage du corps puis d'un chauffage par trop-plein. Ensuite, je vais sélectionner le conteneur principal. Je vais ajouter ces propriétés au conteneur principal. Ensuite, je vais ajouter ici le principal. OK, la prochaine chose que je vais faire est d'ajouter de la position au conteneur. Ça va être relatif. De plus, nous avons besoin de transitions pour le conteneur principal, Paul 0,5 seconde. Nous avons également besoin d'une transition pour le wrapper du chargeur. Ajoutons ici la transition Paul 0,5 seconde. OK, allons dans le navigateur et rechargeons la page. Nous avons maintenant ici l'animation. Une fois terminé, le conteneur s'affichera. Soyons francs, comme vous pouvez le constater, nous n'avons plus de problèmes. En fait, nous avons un petit problème. Une fois l'animation terminée, nous n'avons plus ici la barre de défilement et nous ne pouvons plus faire défiler la page vers le bas. Allons-y et réglons ce problème. Accédez au fichier Geoskhy. Je vais sélectionner ici les éléments du corps. Appelons le corps de la variable, puis sélectionnons-le à l'aide de la méthode de sélection de requête Spécifiez ici le corps du nom de classe. Ensuite, je vais ajouter ici body dot style dot overflow. Il doit être égal à auto. Une fois le contenant exposé, nous n'avons plus besoin de chauffage par trop-plein Cela nous permettra de réafficher la barre de défilement. Passons au navigateur. L'animation s'exécute. Une fois terminé, le conteneur sera affiché avec une barre de défilement et nous pourrons faire défiler l'écran vers le bas Ok. Donc tout fonctionne parfaitement, le chargeur est créé. La prochaine chose que je vais faire est mettre le site Web en ligne. Nous devons l'héberger sur la plateforme Netlify. Pour cela, passons à la prochaine conférence. 31. Déployer le site Web: Dans notre conférence précédente, nous avons créé le chargeur de site Web, et il est maintenant temps de passer à l'étape finale, le déploiement de notre site Web en ligne. Il existe de nombreuses façons d'héberger votre site Web, mais dans ce cours, je préfère utiliser Netlify Netlify est une plateforme cloud qui fournit une gamme de services pour le développement et l'hébergement Web modernes Il propose une solution de plate-forme en tant que service qui simplifie le processus de déploiement et de gestion des sites Web et des applications Web. Allons-y et visitons Netlify.com La première chose à faire est de s'inscrire, ce qui est un processus assez simple Je ne vais donc pas m'y attarder. Je suis déjà inscrit, donc je vais juste me connecter ici. Nous avons un tableau de bord de l'utilisateur. Pour déployer le site Web, vous pouvez soit importer votre dépôt Git existant, soit simplement glisser-déposer votre dossier de projet de travail. Je préfère la deuxième méthode, je vais glisser-déposer le dossier du projet. Cela prendra un certain temps. OK, donc ça marche. Allons-y et cliquons sur Open Production Deployee. Ici, nous avons notre site Web. Il est en ligne. Tout fonctionne bien. Nous avons ici le projet. Parcourons les différentes pages. Comme vous pouvez le constater, tout fonctionne bien et a l'air bien. Regardons la page des témoignages. OK, donc notre site Web est en ligne. La seule chose que je vais faire est changer le nom de domaine car nous avons ici un nom long avec quelques caractères. Passons à la configuration du site. Je vais changer le nom du site. Débarrassons-nous de ces personnages. Je vais appeler le site Web et créer une bibliothèque. Sauvegardons-le. Très bien, nous avons le lien ici. Cliquons dessus. Nous avons ici notre site Web avec un nouveau nom de domaine. Tu peux l'appeler comme tu veux. Je sais que ce n'est pas un nom parfait, mais ce n'est pas l'essentiel. C'est bon, donc ça marche. Enfin, nous pouvons dire que le projet est terminé. Félicitations, excellent travail pour avoir terminé ce cours. Vous êtes désormais doté des compétences nécessaires pour créer de superbes sites Web. J'aimerais vous dire un immense merci d'avoir participé à ce cours. Continuez à apprendre, restez curieux et profitez du voyage. En tant que développeur web, je vous souhaite bonne chance tous vos futurs projets. Bon codage et sites Web de maire. Impressionnez toujours. Bonne chance. Au revoir, au revoir.