Créer 10 modèles de conception d'interface utilisateur complets et modernes

1. Introduction: Bienvenue dans ce tout nouveau cours, où vous apprendrez à créer des modèles de conception modernes et esthétiques pour vos sites Web. Si vous souhaitez créer et personnaliser votre portefeuille, devenir un développeur expérimenté et être embauché, ce cours est fait pour vous. Nous allons créer ensemble dix méga sites Web, des sites Web de conflit et réactifs aide de trois technologies de base , à savoir HTML, CSS et Java. Si vous avez des connaissances de base sur ces technologies et que vous rencontrez toujours des difficultés pour créer leurs sites Web. Ou si vous souhaitez améliorer vos compétences de développeur et de designer, vous êtes au bon endroit. Nous avons créé ce cours afin de donner aux étudiants la meilleure expérience possible dans trois technologies de base et leur donner la possibilité de créer les meilleurs modèles de conception qui leur permettront d' enthousiasmer leurs clients Nous allons créer Tangy pour les sites Web incomplets et pas toutes les parties de ceux-ci à partir de zéro Ils seront pleins d' effets et de designs modernes, jolis et beaux. Nous commencerons par des projets relativement simples et nous passerons également en revue certaines parties avancées. Nous pouvons vous garantir que vous maîtriserez le développement web frontal après avoir terminé ce cours. Grâce à ce cours, vous pouvez trouver l'inspiration qui vous aidera à améliorer vos projets et à les intégrer à votre portfolio. Maîtriser uniquement ces technologies de base du développement Web frontal Vous pouvez créer des thèmes géniaux et modernes et simplement vous faire embaucher. De plus, vous aurez suffisamment de connaissances pour passer à autre chose et apprendre d'autres technologies, comme certains frameworks et bibliothèques frontaux, qui sont aujourd'hui très populaires et très demandés Le parcours n'est certainement pas restreint. Soyez donc patient et essayez de tirer le meilleur parti de ce cours sans vous contenter copier-coller le code Si j'étais à votre place, je rêverais certainement d'un tel cours. Alors rejoignez-nous 2. Configuration: Bonjour et bienvenue au cours. Nous sommes heureux que vous soyez ici et nous espérons que vous apprécierez le cours avant d' approfondir et de commencer à créer nos projets. Tout d'abord, nous devons préparer notre environnement de travail. Je suis sûr que la plupart d'entre vous sont déjà prêts à écrire le code. Si c'est le cas, n'hésitez pas à ignorer cette vidéo et à vous lancer immédiatement dans les projets. Mais si ce n'est pas le cas, ce n'est pas le problème. Allons-y et configurons quelques outils. Tout au long de ce cours, nous aurons besoin de deux outils principaux , à savoir un navigateur Web moderne et un éditeur de texte. En tant que navigateur Web, je vais utiliser principalement Google Chrome. Et dans certains cas, nous aurons également besoin de l'aide de Mozilla Firefox. Je suis sûr que vous savez déjà comment installer ce navigateur Web, et je pense que vous les possédez déjà tous. Quoi qu'il en soit, voyons comment les télécharger. Pour accéder à Google Chrome, nous devons accéder à cette URL ici et télécharger le navigateur Web. Le processus d'installation est assez simple, je ne vais donc pas le parcourir. En ce qui concerne Mozilla Firefox, vous devez utiliser cette URL et télécharger le navigateur Web à partir d'ici. Les deux liens seront joints à cette conférence. Très bien, passons à autre chose et parlons de l'éditeur de texte. Nous allons utiliser Visual Studio Code car c'est actuellement l'un des meilleurs éditeurs de texte au monde. Bien sûr, vous pouvez vous sentir libre et utiliser votre éditeur de texte préféré. C'est à vous de décider, mais je recommande d'utiliser le code VS. Pour télécharger le code VS, vous devez visiter ce site Web et obtenir l'éditeur de texte pour Windows, Mac ou Linux. Ce lien sera également joint à cette conférence. Le processus d' installation Visual Studio Code est également très simple, donc je suis sûr que cela ne posera aucun problème. Très bien, donc une fois que vous aurez installé les deux outils, vous serez prêt à partir Passons donc directement aux projets 3. Projet 1 - Aperçu du projet: Très bien, une fois que nous avons configuré tous les outils nécessaires, nous sommes maintenant prêts à commencer à créer notre premier projet Le projet portera sur certains aliments. Je veux dire, quelque chose comme la vente de différents aliments. Et il se composera de deux sections différentes. Avant de commencer à écrire le code, je vais parcourir le projet et décrire chaque section. La première section sera le diaporama de différentes icônes Font, Awesome Vient ensuite la section des cartes dans laquelle nous aurons trois cartes différentes avec des formes 3D et également avec un bel effet de survol Vient ensuite la galerie. Il se compose de six articles de galerie différents. Nous avons ici des images avec des effets d'ombre à plusieurs niveaux. Si nous les survolons, certaines informations s' afficheront avec des effets plutôt sympas Ensuite, nous aurons un filtre simple avec des éléments de texte et un champ de saisie avec un bouton. Très bien, ce sont donc toutes les sections que nous allons créer Mais en plus de cela, nous avons ici une belle barre de navigation. Vous pouvez voir ici l'icône du menu. Si je clique dessus, le numéro l' affichera en haut de la page Web. Et les éléments de navigation apparaîtront avec de jolis effets de fondu. Si je clique à nouveau sur l'icône, Albert ne se cachera pas. OK, donc c'est tout pour les projets. Nous le construirons en utilisant une approche basée sur la force de bureau. Je veux dire, il sera construit sur une très grande taille d'écran, mais nous le rendrons ensuite réactif à différentes tailles d'écran. Si j'inspecte la page et vérifie le projet sur différentes tailles d'écran, vous verrez qu'il est réactif et qu'il a une belle apparence. Une dernière chose à noter, comme nous l'avons dit, le projet est construit sur une très grande taille d'écran. Donc, si vous utilisez taille d'écran relativement plus petite que celle du projet, il se peut que cela ne soit pas beau pendant les cours. Mais vous n'avez pas à vous inquiéter à la fin de la journée, nous le rendrons réactif. En attendant, vous pouvez utiliser le mode réactif, régler la largeur et la hauteur sur 1920 pixels et 1080 pixels et suivre les vidéos. La dernière chose que je veux mentionner est que vous pouvez télécharger ces fichiers source de départ et de fin. Ils sont joints à cette conférence. Passons à autre chose. 4. Projet 1 - Créer un balisage HTML pour l'atterrissage et définir les styles communs: Très bien, nous sommes donc prêts à commencer à construire nos projets. J'ai créé un nouveau dossier sur le bureau appelé foods, dans lequel j'ai un autre dossier pour les images. Allons-y et ouvrons ce dossier dans le code VS. La première chose que je vais faire est de créer nos fichiers de travail pour HTML, CSS et JavaScript. Je vais les appeler index.html, style.css, script.js. Ouvrez ensuite le fichier index.html et créez un document HTML de base. Pour cela, je vais utiliser un package de code VS intégré appelé image. Nous devons placer un point d' exclamation urinaire et appuyer sur Tab ou Enter Alors on y va. Nous avons ici les balises HTML de base. Tout d'abord, allons-y et changeons le titre. Je vais insérer ici Foods. Ensuite, relions les fichiers CSS et JavaScript. Je vais donc ouvrir la balise de lien. Ensuite, nous devons spécifier ici le chemin du fichier. Nous avons juste besoin du nom du fichier, style.css. En ce qui concerne le JavaScript, je vais ouvrir la balise script juste au-dessus de la balise body de fermeture. Et dans l'attribut source, nous devons spécifier script.js. En plus de cela, je vais ajouter ici un lien supplémentaire pour Font, Awesome icons. Allons donc sur Google et recherchons Font Awesome, CDN, JS, et récupérons le premier lien à partir d'ici Ouvrez ensuite une balise de lien dans les éléments d'en-tête et collez le lien en tant que valeur de l'attribut de référence h. D'accord, les trois fichiers sont connectés et il est maintenant temps d'exécuter le projet dans le navigateur. Pour cela, je vais utiliser l'un des packages de code VS appelé serveur live, qui nous permet d' exécuter le projet en direct sur le navigateur et d'apporter des mises à jour et des modifications sans actualiser la page à chaque fois. Enfin, je vais placer l'éditeur de texte et le navigateur, comme ça. Et lancez-vous. Nous allons construire le projet section par section. Nous allons créer le balisage pour chaque section, puis styliser chacune d'elles. Je vais commencer par la première section. Il se compose du titre et de quelques icônes Font Awesome qui, comme vous pouvez le constater, s'animent bien Allons-y donc et commençons à créer le balisage HTML. Dans un premier temps, ouvrons les éléments div, qui seront le conteneur Attribuons-lui un nom de classe, un événement conteneur. Je vais insérer la section 1 de vos commentaires. Et la première section. Ouvrez ensuite l'élément de section avec une classe, Section 1. Comme nous l'avons dit, cet élément de section inclura le titre et quelques icônes Font Awesome. Ouvrons donc la balise d'en-tête H1 avec le titre de la section de classe. En tant que contenu. Insérons une variété d'aliments. Ensuite, nous devons insérer vos icônes Font, Awesome. Mais d'abord, ouvrons la balise div, qui va être l' enveloppe de ces icônes Je vais lui attribuer des icônes de la section 1 de la classe. Donc, dans l'ensemble, nous aurons dix icônes différentes. Alors allons-y et créons-les rapidement. Je vais ouvrir, je tague avec les classes FAS, FAA egg. Dupliquons ensuite cette ligne de code neuf fois et changeons rapidement les noms des classes. La seconde sera une gaufre Stroop. Ensuite, nous mangerons du fromage, du hot dog. Le prochain sera Drumstick Byte. Ensuite, nous mangerons des pommes et de la glace. Ensuite, nous mangerons du poisson, des biscuits et un frère ou une sœur. Très bien, c'est donc tout à propos du balisage HTML de la première section Nous devons maintenant commencer à écrire du CSS. Tout au long de ce projet, je vais utiliser l'un des téléphones Google appelé non métallique Allons donc sur le site Web de Google Fonts et recherchons Nieto Ensuite, je vais récupérer ici tous les styles sauf Italica Alors vérifions-les. Alors. Je vais récupérer l'URL. Pour ça. Nous devons cliquer sur Importer , puis copier cette URL ici. Collons-le dans un fichier CSS. Très bien. Ensuite, je vais créer quelques styles courants et par défaut Je vais donc insérer vos commentaires. Styles courants. Puis fin des styles courants. Sélectionnez ensuite tous les éléments correspondants. Je vais utiliser un astérisque. Donc, dans un premier temps, je vais supprimer la marge et le rembourrage par défaut de chaque élément Mettez-les tous les deux à zéro. Ensuite, je vais définir la taille de la boîte. Borderbox. Supprimez également les valeurs par défaut sur les lignes à partir des éléments de lien. Pour cela, nous devons utiliser la décoration texte. Nous n'en obtiendrons aucune valeur. Supprimez ensuite le contour par défaut. Nous devons le régler sur aucun. Modifiez également la famille de polices. Mettons-le sur le nouveau sans-serif Nieto. Enfin, modifiez l'épaisseur de la police. Je vais en faire 400. Très bien, comme vous pouvez le voir, certains des styles courants sont appliqués aux éléments La prochaine chose que je vais faire est de définir la taille de la police. Donc, tout au long de ce projet, je vais utiliser une rampe comme unité de mesure. Par défaut, une mémoire vive équivaut à 16 pixels, car la taille de police de l'élément HTML est égale à 16 pixels. Je vais convertir un run en dix pixels. Pour ce faire, nous devons réduire la taille de police de l'élément HTML. Nous devons le porter à 62,5 %. Donc, dans ce cas, une RAM sera égale à dix pixels. D'accord ? Comme vous pouvez le constater, les éléments sont devenus plus petits et ont en fait adopté un style commun et un style par défaut. Nous avons terminé. Allons-y et commençons à styliser la première section 5. Projet 1 - Style de page d'atterrissage et créer un diaporama: Je vais donc personnaliser l'élément de section lui-même. Mais dans un premier temps, insérons ici nouveaux commentaires, section 1. Et hors de la section 1. Sélectionnez ensuite Éléments de section. Donc, tout d'abord, je vais régler la largeur et la hauteur. Faisons avec la façon dont j'ai présenté. C'est probablement la hauteur. Je vais le faire apparaître à 100  % de la fenêtre d'affichage. Par conséquent, réglons-le sur 200 VH. Changez ensuite la couleur d'arrière-plan. Utilisons votre couleur 333. OK, on peut donc voir que cette section 1 est étendue à la page entière et que sa couleur d' arrière-plan est modifiée. Ensuite, je vais placer le contenu au centre. Et pour cela, je vais utiliser Flexbox. Nous devons définir la propriété d'affichage sur flex. À l'heure actuelle. Les éléments sont placés horizontalement dans une rangée et, en fait, nous n'en avons pas besoin. Nous devons donc modifier la direction de flexion et la colonne Make It. Suivant. Pour placer les éléments horizontalement au centre, nous devons utiliser Aligner les éléments au centre. Les éléments sont donc placés au centre. Et maintenant je vais ajouter un peu d'espace entre eux. Pour cela, utilisons uniformément la propriété de contenu justify avec un espace de valeurs. Très bien, asseyons-nous en ce qui concerne l'élément Section. Passons à autre chose et personnalisons le titre. Je vais le sélectionner. Tout d'abord, définissons la taille de police à 12 RAM. Modifiez également l'épaisseur de la police. Je vais mettre le titre en gras. Réglons-le à 900. Changez également la couleur, rendez-la blanche. Et je vais aligner le texte au centre. Ensuite, mettons vos mots en majuscules à l' aide de la transformation de texte en majuscules Je vais également créer un espace entre les lettres en utilisant un espacement comptable d' une valeur de 0,5 loyer OK, Enfin, créons un petit effet d'ombre. Je vais utiliser une ombre de texte avec une valeur de 0,3 RAM trois fois. Et comme couleur, je vais ajouter ici 000, qui est le bonjour noir. Très bien, le titre est donc personnalisé et nous devons maintenant passer à autre chose et nous occuper des icônes Allons-y donc et sélectionnons-les. Tout d'abord, augmentons la taille de la police, lui donnons 35 RAM, puis changeons la couleur. Je vais utiliser votre couleur, une 7982d. D'accord, nous avons donc ici nos icônes, elles sont beaucoup plus grandes et appelez-les comme vous le savez, ces icônes doivent être placées au centre et nous devons les animer D'abord. Attribuons-leur la position absolue. Donc en ce moment je suis placée l'une au-dessus de l'autre. Cela se produit parce que, par défaut, la position absolue fait sortir les éléments du flux normal de la page En plus de cela, nous devons corriger la position des icônes. Je pense que pour le moment, il serait préférable de masquer toutes les icônes sauf une, car cela facilitera notre processus de travail. Je vais donc commenter toutes les icônes sauf la première. Juste après. Fixons la position de l'icône. Nous devons le placer au centre. Nous devons donc le déplacer un peu vers le haut et vers la gauche. Pour cela, utilisons la propriété transform avec la fonction translate. En fait, le dysfonctionnement nous permet de déplacer les éléments selon les directions horizontale ou verticale. Je veux dire, selon l'axe X et l'axe Y. Comme les valeurs. Instituons -50  % dans les deux sens. Très bien, c'est tout à propos de la position de l'icône. Enfin, je voudrais ajouter à son effet d'ombre. Utilisons donc à nouveau l'ombre du texte. Inscrivez votre point à la RAM ou trois fois. Utilisez à nouveau la couleur noire. D'accord ? Comme vous pouvez le voir, les icônes sont personnalisées et il est maintenant temps de créer le diaporama Tout d'abord, récupérons toutes les icônes. Nous allons donc masquer et afficher les icônes à l'aide de la fonction d' échelle. Dans un premier temps, masquons toutes les icônes. Par défaut, la valeur de la fonction d'échelle est définie sur un. Et pour masquer les éléments, nous devons mettre l'échelle à zéro Maintenant, l'icosaèdre Ensuite, je vais afficher la première icône car le diaporama commencera par la première Pour cela, je vais attribuer la première icône et un changement de classe supplémentaire. Ensuite, sélectionnez le premier que je peux utiliser ce nom de classe. Nous avons besoin des icônes de la section 1. Je change. Pour rendre l'icône visible. Nous devons régler l'échelle à un. Mais en plus de cela, nous devons utiliser à nouveau la fonction de traduction car sinon elle serait remplacée et la position de l'icône changerait D'accord ? La première icône est visible et toutes les autres, je les conserve, chauffez-les. Nous devons maintenant créer le diaporama, et pour cela je vais utiliser JavaScript Allons-y et ouvrons le fichier script.js. Pour passer d'une icône à l'autre. Nous devons supprimer une modification de classe Edge apportée à toutes les icônes dans l'ordre et avec un certain intervalle. La première chose à faire est de sélectionner toutes les icônes. Alors allons-y et créons une nouvelle variable. Je vais appeler les icônes. Que pour les sélectionner, je vais utiliser l'une des méthodes appelées sélecteur de requêtes Il suffit de spécifier ici le nom de la classe, les icônes Section 1, suivies de l'ion. Donc, en général, dans le sélecteur de requête, toutes les méthodes renvoient un objet semblable à un tableau appelé note least Ses éléments ont des numéros d' index basés sur zéro, comme un tableau. De plus, cet objet possède une propriété de longueur que nous utiliserons un peu plus tard. Comme nous l'avons dit, nous allons faire glisser les icônes avec quelques intégrales. Je vais utiliser l'une des méthodes intégrées appelée setInterval Cela nous permet d'exécuter la fonction encore et encore avec certains intervalles. Cette méthode prend donc deux arguments. La première sera une fonction de rappel, qui sera exécutée encore et encore. Quant au deuxième argument, il s'agira de la durée et il doit être exprimé en millisecondes Dans notre cas, je vais définir l'intervalle à 4 000 millisecondes Très bien, comme vous vous en souvenez, à l'heure actuelle, la première icône indique un changement de classe Nous devons sélectionner cette icône pour en supprimer le changement de classe, puis ajouter la classe à l'icône suivante. Alors allons-y et créons une nouvelle variable. Je vais l'appeler icône. Ensuite, utilisez la requête, sélectionnez une méthode pour sélectionner l'élément. Nous allons sélectionner cet élément en utilisant le changement de classe. Ensuite, pour supprimer le changement de classe, nous avons dû accéder aux classes de cette icône. Je vais donc utiliser l'une des propriétés appelée liste de classes. Il nous donne toutes les classes de l'élément. Nous devons l' attacher à l'icône. Et maintenant, nous devons utiliser l'une des méthodes appelées removed. Précisons ici le changement de classe. Alors maintenant, après 4 s, l'objet sera masqué car le changement de classe sera supprimé. D'accord, nous devons ensuite afficher et masquer d'autres icônes. Pour cela, nous devons accéder à l'icône suivante. Pour ce faire, je vais utiliser l'une des propriétés appelées next element sibling Attachons-le à l'icône. Encore une fois, nous devons accéder aux classes de ces éléments. Enfin, nous devons ajouter à chaque changement de classe. En fait, je veux montrer le cycle complet du diaporama et je veux le faire rapidement Alors changeons 4 s en 1. Donc, comme je le vois, les icônes changent après chaque seconde. Si j'inspecte la page et que j' affiche les éléments, vous verrez comment changement de classe est ajouté et à distance de chaque icône. Une fois qu'elle est supprimée de la dernière icône, nous obtenons un message d'erreur indiquant qu'il impossible de lire la liste des classes de propriétés null. Cela se produit parce que la dernière icône n'a aucun frère suivant Pour résoudre ce problème, nous devons effectuer un travail supplémentaire en une manière ou d'une autre chaque interrupteur de l'icône. Pour cela, je vais créer une nouvelle variable. Dans ce cas, je vais le déclarer avec un mot-clé principal car la valeur de cette variable sera modifiée. Cette variable va être un compteur et je vais la définir sur un par défaut. Ainsi, à chaque exécution de la fonction, à chaque modification, ce commentaire doit être augmenté d'une unité. Une fois qu'elle est supérieure à la longueur des icônes, nous devons remettre le compteur à un. Et nous devons également afficher la première icône rétroéclairée. Ainsi, pour augmenter la valeur d'une unité, nous devons utiliser l'opérateur d' incrémentation, qui est exprimé par deux signes plus Ensuite, nous devons créer une instruction if. Et comme condition, nous devons vérifier si I est supérieur à la longueur en points de l'icône. Donc, si cette condition est vraie, cela signifie qu'un cycle du diaporama est Nous devons donc réafficher la première icône et régler le compteur sur un. Pour accéder à la première icône, je vais utiliser les icônes de la liste des nœuds. Ensuite, nous devons spécifier le numéro d'index de la première icône, qui sera zéro. Ensuite, nous avons besoin à nouveau d' une classe inférieure à la méthode add. Et nous devons spécifier ici le changement de nom de classe. En outre, nous devons définir la variable IBEC sur un. D'accord ? Donc, si cette condition n'est pas vraie, nous devons exécuter cette ligne de code. Créons donc d'autres instructions et insérons ici cette ligne de code. D'accord ? Donc, une fois que le cycle est terminé, il recommence. Vous pouvez le voir ici dans Dev Tools. Très bien, nous avons presque terminé le diaporama. La seule chose à faire est ajouter un effet de transition. Utilisons donc la transition. Alors. Nous devons spécifier ici la transformation. Et comme durée, je vais ajouter ici 0,3 s. En plus de cela, nous devons également ajouter la transition ci-dessous. Parce qu'une fois que l'échelle de l'ICD-10s aura diminué, la prochaine icône devrait attendre 4,3 s. Nous avons donc besoin d'un certain délai Instituons donc votre 0,3 s. Maintenant, comme vous pouvez le constater, nous avons un effet bien meilleur Et la seule chose que je vais faire est de changer l'heure et de la faire 4 s. Très bien, c'est Nous en avons terminé avec la première section. Passons à autre chose et occupons-nous de la suivante. 6. Projet 1 - Créer et styliser des cartes 3D: La prochaine section que nous allons créer sera la section des cartes. Nous aurons un titre de section et trois coûts différents. Ils représenteront certains plats populaires. Les cartes auront des formes 3D et incluront également quelques éléments différents tels que des images, des noms et des boutons. Une fois que nous survolons les cartes, elles se déplacent légèrement vers le haut avec un effet d'ombre Très bien, voyons à propos de cette section. Allons-y et commençons à créer un balisage HTML. Insérons de nouveaux commentaires, section deux et section deux. Ouvrez ensuite les éléments de section. Je vais lui attribuer la classe section 2. Ensuite, je vais créer un élément de titre H1. En fait, cette rubrique va être similaire à la précédente. Ils auront les mêmes styles. Je vais donc lui attribuer le même nom de classe, le même titre de section. En ce qui concerne le contenu, mettons ici les plats populaires. Je vais donc récupérer ces serviettes de ce titre de section et les coller dans des styles courants. Très bien, comme nous l'avons dit, nous aurons trois cartes différentes Je vais les emballer avec un élément div, qui sera un conteneur de cartes Ensuite, je vais ouvrir une autre balise div, qui sera la véritable carte Il est donc affecté à sa carte de classe. Comme je l'ai dit, la carte sera composée de trois éléments différents. La première sera une image. Il s'agit donc d'une balise d'image ouverte. Ensuite, dans l'attribut source, sélectionnons l'image dont nous avons besoin ici, carte IMG une. Et je vais aussi attribuer une classe d'image appelée IMG. D'accord, nous aurons ensuite le nom de la carte, qui sera représenté par le titre. Ouvrons la balise d'en-tête h3 avec une classe appelée name. En ce qui concerne le contenu, insérons-le ici. Disons du poisson. Enfin, créons ici en bas. Je vais lui attribuer une classe appelée BTN. En ce qui concerne le contenu, faisons-en une bordure maintenant. Très bien, nous avons donc ici notre première carte. Vous pouvez également remarquer que le titre est présent partout dans ce style car nous l'ajoutons au même nom de classe, titre de section. Comme nous l'avons dit, nous aurons trois cartes. Je vais donc dupliquer la carte deux fois et changer les noms des images ainsi que les noms des cartes. Il nous faut donc ici img2, cake, puis IMG 3, homard D'accord, voyons donc le balisage HTML. Allons-y et personnalisons cette section. Je vais insérer de nouveaux commentaires, section deux et section deux. Sélectionnez ensuite l'élément de section. Je vais donc tout d'abord définir la largeur et la hauteur. Je vais le fixer bien trop fort pour le moment. Pour la hauteur. Je vais le faire correspondre à cent pour cent de la fenêtre d'affichage. Alors partons de 3 200 vh. Et changez également la couleur d'arrière-plan. Je vais aussi utiliser une nouvelle couleur. Très bien, ensuite, je vais aligner les éléments à l'aide de Flexbox. Je parle du titre des éléments et du contenant des cartes. Nous avons donc besoin ici de Display Flex. Comme vous le savez, il place les éléments côte à côte. Dans ce cas, nous devons donc changer de direction. Faisons-en une colonne. Je vais également créer un espace entre les éléments flexibles en utilisant le contenu de justification. Espace entre. Enfin, créez de l'espace à l'intérieur de cette section à l'aide d'un rembourrage Réglons-le à dix rem en haut et en bas et à zéro sur les côtés gauche et droit. Très bien, voyons à propos de cet élément de section. Ensuite, je vais m' occuper des cartes. Tout d'abord, sélectionnons le conteneur. Je vais placer les cartes côte à côte. C'est pour ça. Encore une fois, je vais utiliser Flexbox. Ensuite, afin de créer de l'espace entre les éléments, je vais utiliser la justification du contenu avec un espace de valeurs uniforme. D' je vais utiliser la justification du contenu avec un espace de valeurs uniforme accord, les cartes sont placées horizontalement dans une rangée, et maintenant je vais personnaliser la carte elle-même Sélectionnons-le. Dans un premier temps. Je vais définir la largeur. Faisons en sorte qu'il fonctionne. Et puis changez la couleur de fond. Je vais utiliser votre couleur de A à 79, A à D. Pour l'instant, comme vous pouvez le voir, les images sont trop grandes. Alors allons-y et réglons ce problème. Je vais sélectionner Image. Réglons ensuite sa largeur à 100 %. Dans ce cas, l'image occupera 100  % de la vague de ses éléments parents , à savoir la carte. D'accord, nous avons maintenant un bien meilleur résultat. Passons à autre chose et continuons à styliser la carte. Je vais créer de l'espace à l'intérieur de la carte à l'aide d'un rembourrage Réglons-le pour la RAM sur les quatre côtés. Ensuite, je vais aligner les éléments à l'aide de Flexbox. Définissons la propriété d'affichage sur flex. Nous devons également modifier la direction car, par défaut, display flex aligne les éléments horizontalement sur une ligne Créons ensuite un espace entre les éléments à l'aide du contenu de justification. Espace entre. Enfin, pour aligner horizontalement les éléments au centre, utilisons le centre d'alignement des éléments. Très bien, enfin, je vais créer un effet d'ombre. Utilisons Box Shadow avec les valeurs une RAM trois fois et avec une couleur noire. Pour l'instant, c'est tout pour la carte. Allons-y et personnalisons son nom et le bouton. Dans un premier temps, sélectionnons le nom de la carte. Je vais augmenter la taille de la police. Faisons-en trois RAM. Modifiez également l'épaisseur de la police. Je vais mettre le texte en gras. Attribuons-lui un 900. Transformez également le texte en majuscules et créez un espace entre les lettres à l'aide espacement électrique avec la valeur 0,5 rampe Après cela, je vais changer sa couleur. Utilisons ici 111. Et créez également de l'espace en haut et en bas à l'aide de la marge. Je vais mettre la marge à zéro en RAM. Très bien, enfin, créons un petit effet d'ombre en utilisant l'ombre du texte. Interférons. 0,15 a couru trois fois. Et puis encore la couleur noire. Très bien, c'est tout à propos du nom de la carte. Passons à autre chose et personnalisons le bouton. Sélectionnons appelé btn. Tout d'abord, je vais régler sa largeur à 70 %. Ensuite, je vais changer la couleur de fond. Utilisons ici 111, changeons également la couleur du texte. Dans ce cas, je vais utiliser la couleur ou 888. Ensuite, je vais arrondir les coins de la boîte en utilisant le rayon de bordure avec la valeur cinq points. Droite. Après ça. Je vais m' occuper du texte du bouton. Changeons la taille de la police, faisons-en 1,5 RAM. Je vais également augmenter le poids de la police. Réglons-le sur 800. Créez ensuite un espace entre les lettres. Réglons-le pour qu'il pointe vers le bélier. Ensuite, je vais mettre les mots en majuscules à l'aide du texte, transformer en majuscules et supprimer la bordure par défaut Mettons-le à zéro. Hein ? Le bouton a donc l'air bien, mais nous devons y ajouter quelques styles supplémentaires. Je vais créer de l'espace à l'intérieur du bouton à l' aide d'un rembourrage Réglons-le à 0,5 rem en haut et en bas et à zéro sur les côtés gauche et droit. Ensuite, je vais changer le type du curseur, faire pointer et créer une ombre. Dans ce cas, je vais le créer sur le côté gauche. Pour cela, je vais insérer u -0,2 RAM, puis encore une fois moins point par rapport à la RAM plutôt que point par rampe Et la couleur noire. Lorsque vous souhaitez créer une ombre sur le côté gauche, vous devez utiliser les valeurs négatives. Très bien, le bouton est donc personnalisé et il est maintenant temps de donner à la carte une forme 3D Pour cela, je vais utiliser des pseudo-éléments avant et après. Allons-y et commençons par le côté gauche. Je vais utiliser avant les pseudo-éléments. Tout d'abord, nous devons définir le contenu qui va être vide. Ensuite, je vais modifier la hauteur et la largeur. Je vais régler la hauteur à 100 %. Pour la largeur, créons-en une seule RAM puis changeons la couleur de fond. Je vais utiliser votre couleur 817824. OK, donc pour l'instant l' élément n'est pas visible. Et pour y remédier, je vais définir sa position sur absolue. En outre, nous devons définir la position de la carte par rapport à un parent. Nous en avons besoin pour positionner le pseudo-élément before en fonction de son élément parent. Maintenant, l'élément est visible, mais nous devons changer sa position. Nous devons le placer sur le côté gauche de la carte. Allons-y donc et définissons la propriété principale. Mettons-le à zéro. Nous devons également définir la propriété gauche. Faisons en moins un point. Maintenant, la position de l'élément est fixe, mais comme vous pouvez le voir, nous devons l'incliner légèrement Utilisons la propriété de transformation avec la fonction skew. Dans ce cas, nous devons incliner les éléments verticalement. Nous devons donc utiliser ici l'axe Y. Tuons les éléments à 45 degrés. D'accord, donc l' élément est asymétrique, mais sa position n' est toujours pas correcte Par défaut, lorsque nous utilisons la propriété de transformation, cela ne permet pas à l'élément de se déplacer en fonction de son centre. L'origine de la transformation est donc définie au centre. Mais dans ce cas, nous devons le modifier et le corriger. Alors maintenant, considérons que le problème est résolu. L'élément est parfaitement positionné. Et la dernière chose que je vais faire est d'y ajouter un petit effet d' ombre. Utilisons box-shadow avec les valeurs -0,1 RAM. Encore une fois -0,1 RAM dont nous avons besoin pour 0,1 rem et la couleur noire OK, c'est tout pour le côté gauche. Maintenant, je vais m' occuper du premier. Et pour cela, utilisons des pseudo-éléments. En fait, nous devons également utiliser les mêmes propriétés pour le pseudo-élément, mais avec des valeurs différentes. Je vais donc dupliquer ce code ici, puis je vais apporter quelques modifications. Nous devons donc créer une RAM pour la hauteur. Quant à la largeur, elle sera de 100 %. Ensuite, changeons la couleur d'arrière-plan. Dans ce cas, je vais utiliser 8f83, 17. Alors vivons la position absolue telle qu'elle est. Comme c'est à la fois la propriété supérieure et la propriété gauche, nous avons besoin de moins une RAM comme valeur de la propriété supérieure. Quant à la propriété de gauche, elle sera nulle. Très bien, vient ensuite la propriété de transformation avec cette fonction Q. Dans ce cas, nous devons redimensionner l'élément horizontalement. Par conséquent, nous devons utiliser ici l'axe x. En ce qui concerne l'origine de la transformation, nous devons la placer en bas. Laissons également l'ombre de la boîte telle qu'elle est en ce qui concerne la forme des cartes. Nous avons terminé. Enfin, je vais créer un effet de survol. Avant cela, je vais faire pivoter et redimensionner légèrement le code. Utilisons donc la propriété transform. Je vais effectuer une rotation verticale selon l'axe Y. Insérez vos 20 degrés. En ce qui concerne la fonction d'inclinaison, je vais incliner les éléments horizontalement Nous avons donc besoin ici de l'axe X. Interférons de moins deux degrés. Très bien, maintenant je vais créer un effet de survol. Donc, une fois que nous survolons la carte, nous devons la déplacer légèrement vers le haut. Nous avons besoin de nous transformer. Encore une fois avec les fonctions de rotation et de mise à l'échelle. Nous avons besoin ici de 20 degrés puis de moins deux degrés. Et nous devons également ajouter ici fonction Translate avec l' axe Y et comme valeur, Let's interviewer moins trois En plus de cela, je vais modifier les effets d'ombre lors du survol. Utilisons donc une ombre deux rampes trois fois et avec une couleur noire OK, donc une fois que nous survolons la carte, elles se déplaceront vers le haut et l'ombre changera également En fait, ces choses se produisent sans aucun effet de douceur. Et pour résoudre ce problème, utilisons la transition. Nous devons spécifier ici une transformation d'une durée 0,5 s. Et nous avons également besoin d'une ombre de boîte de même durée. Très bien, donc l' effet de transition fonctionne bien, et en fait, nous en avons terminé avec cette section Passons à autre chose et occupons-nous de la suivante. 7. Projet 1 - Créer et styliser la galerie d'aliments: La section suivante sera la galerie dans laquelle nous aurons six images de plats différentes avec de jolis effets. Chaque image comportera plusieurs ombres colorées. Lorsque nous survolons l'image, certaines informations s' affichent, comme le nom de l'aliment, une description et deux lignes différentes L'image elle-même aura un effet flou. De plus, l'ombre de l' image s'étendra bien. Et tous ces défauts se produiront sans problème. Très bien, allons-y et commençons à créer le balisage HTML Comme d'habitude, insérons de nouveaux commentaires, section 3. Et de la section 3. Cet élément de section ouverte affecté à chaque classe, section trois. La minute suivante, voici le titre de cette section, qui sera similaire aux autres titres de section Je vais donc le copier à partir de la section précédente , puis je vais modifier le contenu. Insérons ici la galerie. Très bien, donc dans l'ensemble, nous aurons six éléments caloriques. Ils seront représentés par les éléments de lien. Et avant de les créer, je vais ouvrir la balise div, qui sera l' enveloppe de ces liens Je vais l'assigner à la galerie de cours. Ensuite, je vais ouvrir la balise de lien, qui contiendra un lien vers la galerie de classes. Outre l'attribut class, je vais également utiliser l'attribut title. Cela nous permet d'afficher du texte une fois que nous avons survolé le lien Insérons votre commande maintenant Très bien, donc chaque élément de lien sera composé d'un titre d'image et d'un paragraphe Ouvrons la balise image, puis sélectionnons Gallery IMG one dans le dossier images. Je vais également attribuer à la classe d'image food IMG. Viennent ensuite les éléments de titre h3. Attribuons à la classe le nom de l' aliment comme contenu. Insérez vos crêpes. Enfin, je vais insérer votre paragraphe avec une description complète de la classe. Et comme contenu, je vais mettre ici un texte fictif D'accord, nous avons donc ici le premier élément. Comme nous l'avons dit, au total, nous en aurons six. Je vais donc dupliquer l'élément de lien cinq fois, puis apporter quelques modifications. Nous avons besoin ici d'img2. Et le nom sera «   cupcakes ». Ensuite, nous aurons AMG ou trois. Inoffensif Ensuite, pour le quatrième article, je vais insérer ici le hamburger Le prochain sera Sahlman. Pour ce qui est du sixième point, je vais manger tes légumes. Très bien, c'est donc tout à propos du balisage HTML. Nous sommes maintenant prêts à commencer à écrire du CSS. Je vais créer de nouveaux commentaires, section 3. Et la troisième section. Sélectionnez ensuite les éléments de section. Dans un premier temps, je vais changer la couleur de fond. Nous allons le rendre gris foncé en utilisant la couleur 333. Je vais également créer de l'espace à l'intérieur de cette section en haut et en bas de celle-ci. Utilisez un rembourrage avec la valeur cinq, rem et zéro. D'accord ? Avant de commencer à personnaliser la galerie, je voudrais m'occuper de la taille des images car elles sont trop grandes pour le moment. Nous allons donc sélectionner Image. Je vais régler avec 220, soit 4 % de la largeur du port d'affichage Pour ce qui est de la hauteur, je vais lui donner une largeur de fenêtre d'affichage de 15 Je veux dire 15 % de la largeur de la fenêtre d'affichage. Je vais également utiliser la couverture du flux d'objets, ce qui nous permettra de maintenir la qualité de l'image. Il ne sera pas étiré. Très bien, puis sélectionnez Galerie, je veux dire le conteneur des liens Donc, dans l'ensemble, nous aurons six liens et je vais les placer en rangées. Je vais le faire en utilisant Flexbox. Nous devons définir la propriété d'affichage sur flex. De plus, pour placer les images sur deux rôles, nous devons utiliser un habillage flexible avec un habillage des valeurs Maintenant, les images sont placées sur deux rangées. Ensuite, je vais les placer au centre et créer un espace entre les images. Ainsi, pour les placer au centre, nous devons aligner les éléments au centre, et pour créer un espace entre les images, nous devons justifier l'espace du contenu de manière uniforme. Enfin, je vais créer un espace entre le titre et la galerie. Utilisons la marge supérieure avec la valeur dix rampe. Très bien, donc avec la mise en page, nous avons terminé. Allons-y et personnalisons les éléments du faire. Allons-y et commençons par les noms des pieds. Le nom du pied doit donc être joué dans le coin supérieur gauche de l'image Je vais donc définir sa position sur absolue. Ensuite, nous devons définir la position des éléments du lien sur relative car il s'agit d'un élément parent et nous devons positionner le titre en fonction du lien. Ensuite, définissez les propriétés supérieure et gauche du nom de l'aliment sur trois rampes. Je veux dire, les deux propriétés. Très bien. Les titres sont donc positionnés de la bonne manière. Allons-y et personnalisons-les. Je vais modifier la taille de la police. Allons jusqu'à Ram. Augmentons donc le poids de la police. Je vais le régler à 700. Transformons ensuite le texte en majuscules. Créez un espace entre les lettres en utilisant l' espacement des lettres, 0,1 RAM. Et enfin, changez la couleur, faites-la blanche. OK, c'est tout à propos du titre. Ensuite, je vais personnaliser le paragraphe. Allons-y donc et sélectionnons-le. Tout d'abord, je vais définir sa position comme absolue. Ensuite, je vais définir les propriétés du bas et de la gauche. Je vais définir la propriété deux ou trois du bouton , la largeur de la fenêtre d'affichage Pour ce qui est de la propriété de gauche, je vais la rendre aléatoire. Le paragraphe est donc positionné. Mais comme vous pouvez le constater, la mise en page de la galerie est foirée. Je vais régler ça. Allons-y et créons un espace entre les liens en utilisant la marge. Je vais le faire pour un rem en haut et en bas et un rem sur les côtés gauche et droit. Très bien, maintenant le problème est résolu. Passons à autre chose et ajoutons d'autres styles au paragraphe. Ensuite, je vais définir la largeur et la porter à 70 %. Ensuite, changeons la taille de la police, réduisons-la à 1,5 RAM et modifions également l'épaisseur de la police. Je vais le rendre un peu plus léger. Réglons-le sur 300. Après cela, créons un espace entre les lettres, faites-en 0,1 RAM. Je vais aussi transformer le texte en majuscules N. Enfin, changer la couleur, le rendre blanc Très bien, avec un paragraphe, c'est terminé. Il est stylé. Et maintenant je vais créer deux lignes. L'un sous le titre et le second sur le côté droit du paragraphe. Je vais créer ces lignes en utilisant des pseudo-éléments avant et après. commencer, créons une ligne sur le côté droit du paragraphe. Utilisons les pseudo-éléments précédents. Tout d'abord, nous devons définir le contenu. Faisons en sorte qu'il soit vide. Ensuite, je vais définir la position sur absolue. Et pour rendre la ligne visible, définissons une largeur, faisons-en un point vers la RAM. De plus, nous devons régler la hauteur à 80 % , puis changer la couleur de fond, la rendre blanche. La ligne est donc réalisable, mais nous devons modifier sa position. Nous devons le placer sur le côté droit du paragraphe. Définissons donc la position supérieure sur, sur la largeur de la fenêtre d'affichage. Pour ce qui est de la propriété de gauche, je vais la porter à 80 %. Très bien, voyons voir en ce qui concerne les pseudo-éléments précédents. Maintenant, je vais créer une deuxième ligne. En fait, les deux lignes auront les mêmes propriétés. Allons-y, dupliquons ce code, puis apportons quelques modifications. Je vais changer la première place. Portons-le à 30 %. Également. Nous devons modifier la propriété de gauche. Réglons-le sur, pour l'exécuter, je vais modifier la largeur. Portons-le à 90 %. Pour ce qui est de la hauteur, ce sera de la pointe à la rampe. D'accord ? Les lignes sont donc créées et en fait tous les éléments sont presque personnalisés. La seule chose que je vais faire avant de créer un effet de survol est de créer un effet d'ombre à plusieurs niveaux Pour ce faire, il suffit d'utiliser la propriété box shadow avec plusieurs valeurs, comme ceci. Je vais créer le premier Shadow. Insérez votre 0,3, 0,3 RAM plutôt que 0,1 RAM et la couleur E9 entre neuf et neuf La première ombre est donc créée, puis créez la suivante. Je vais insérer ici 0,5 rem, 0,5 rem 0,1 RAM et la couleur A2 e946 Ensuite, le suivant sera 0,7 rem, 0,7 rem, 0,1 RAM. Et ils appellent jusqu'au 97 CE 9. C'est probablement le dernier. Faisons en sorte que la rampe soit de 0,9. La version 0.9 exécutait 0,1 RAM et la couleur e92 999. Très bien, nous avons les ombres, et maintenant nous sommes prêts à créer un effet de survol Par défaut, ces éléments doivent être masqués. Commençons donc par le titre. Je vais réduire sa largeur à zéro. Nous devons également utiliser votre propriété de débordement avec la valeur masquée Le titre est donc masqué. Ensuite, je vais masquer le paragraphe. Dans le cas d'un paragraphe, je vais utiliser l' opacité du jus avec une valeur nulle et également une visibilité masquée Comme vous pouvez le constater, le paragraphe est également masqué. Et maintenant je vais masquer ces deux lignes. Je vais mettre la hauteur à zéro pour la ligne verticale. En ce qui concerne la ligne horizontale, définissons sa largeur à zéro. Très bien, donc tous les éléments sont cachés, et nous pouvons maintenant créer un effet de survol Je vais commencer par les lignes car elles doivent apparaître en premier. Nous allons donc sélectionner le lien de la galerie avec le pointeur de la souris, suivi du pseudo-élément précédent Nous devons ici fixer la hauteur à 8 %. Dupliquons ce code. Je vais me changer avant et après. De plus, au lieu de la hauteur, nous avons besoin de la largeur avec une valeur de 9 %. De plus, pour rendre l'effet plus intelligent, nous devons utiliser la transition. Nous avons besoin ici d'une hauteur de 0,5 s. Et aussi dans une transition de 0,5 s. D'accord, donc une fois que nous survolons l'image, lignes tangentes apparaîtront Ensuite, je vais afficher le titre. Allons-y et sélectionnons le lien de la galerie avec le pointeur de la souris, suivi du nom de l'aliment Comme vous vous en souvenez, nous avons réduit la taille du titre à zéro. Nous devons donc fixer à 200 %. Toujours pour rendre l' effet plus fluide, encore une fois, nous avons besoin d'une transition avec les valeurs de 1,5 s. Et en plus de cela, nous avons besoin d'un certain délai car les lignes doivent d'abord apparaître, puis nous devons afficher le titre. Réglons donc le délai de 2,5 s. En fait, cet effet de transition se produira une fois que nous survolerons l'image Comme vous le voyez, le titre commence à s' afficher une fois que les lignes apparaissent. Mais lorsque nous sortons la souris , le cap s' élève immédiatement. Et pour y remédier, nous avons besoin d'une autre transition, qui devrait faire partie du titre lui-même. Passons à 2,3 s. D'accord, donc maintenant tout fonctionne correctement. Passons à autre chose et faisons de même pour le paragraphe. Sélectionnez le lien de la galerie avec le pointeur de la souris, suivi de la description du plat Donc, à l'heure actuelle, le paragraphe a une opacité nulle et la visibilité est masquée Et maintenant, nous avons besoin d'opacité avec la valeur un. Visibilité visible. De plus, nous avons besoin ici de l'opacité de la transition plutôt que de la durée d'une seconde et du temps de retard, mais dans ce cas, de 1 s. Et exactement de la même manière nous devons utiliser la seconde transition Nous allons passer à une opacité d'une durée de 0,3 s. Très bien, donc le pouvoir du groupe fonctionne Et maintenant, nous devons passer à autre chose et prendre soin de l'image. Dans un premier temps, changeons l'ombre lorsque vous survolez. Allons-y et sélectionnons à nouveau le lien de la galerie avec le pointeur de la souris. Ensuite, nous avons besoin d'une image alimentaire. En fait, je vais copier ce code à partir d' ici et simplement modifier les valeurs. Nous avons besoin ici de 1 g deux fois. Ensuite, pour la deuxième ombre, nous devons courir. Ensuite, le suivant sera composé de trois RAM. Ensuite, pour le dernier, nous avons besoin de RAM. En plus de cela, encore une fois, nous devons utiliser la transition. Interférons tout et la durée est de 0,5 s. D'accord, comme vous pouvez le voir, l'ombre change une fois que nous survolons l'image Bien sûr, ce n'est pas tout ce dont nous avons besoin pour ajouter quelques éléments supplémentaires à l'image. Nous devons le rendre flou. Et pour cela, nous devons utiliser l'une des propriétés appelées filtre avec la fonction de soufflage. Utilisons le bleu et la valeur, je vais placer votre rampe de 0,5. Comme vous pouvez le constater, l' image devient floue. Et une fois que nous le survolons, nous pouvons rendre cet effet beaucoup plus agréable si nous diminuons l' opacité de l' Mettons-le à 0,5. Très bien, nous avons maintenant de bien meilleurs résultats. Et la seule chose que nous devons faire est d'augmenter légèrement l'échelle de l'image en survolant. Pour cela, utilisons Transform. Avec la fonction d'échelle. Je vais augmenter l' échelle de l'image à 1,1. Très bien, nous avons presque terminé. Tout fonctionne parfaitement. Mais nous avons ici un petit problème. Comme vous pouvez le constater, la ligne verticale n'est pas tout à fait visible car elle s'est retrouvée derrière l'image. Pour résoudre ce problème, nous devons utiliser la propriété z-index Rendons-le supérieur à zéro, qui est la valeur par défaut. Je vais en faire dix. Très bien, alors c'est ça. Nous en avons terminé avec la galerie. Je trouve que c'est vraiment beau. Nous avons utilisé ici quelques effets sympas, donc je pense que vous allez les aimer. Bon, il est maintenant temps de passer à la section suivante. 8. Projet 1 - Créer et personnaliser le pied de page: La section suivante sera le pied de page, qui sera simple Nous aurons un paragraphe d' en-tête, champ d'entrée avec un bouton et du texte de copyright en Allons-y et commençons à écrire le balisage HTML. Je vais insérer votre nouvelle section de commentaires fin de la section quatre. Ouvrez ensuite l'élément de section avec une classe, section quatre. Donc, dans l'ensemble, nous aurons trois parties différentes et le pied de page, la première étant le titre et le paragraphe qui seront placés sur le côté gauche Ouvrons l'élément div, qui sera l' enveloppe de ces deux Je vais lui attribuer une section de classe pour le texte. Ouvrez ensuite les éléments de titre H2 avec la section de classe pour le titre Et pour ce qui est du contenu, je vais demander à m'inscrire au paragraphe. Il doit avoir une section de classe pour le paragraphe. Et en ce qui concerne le contenu, je vais vous indiquer d'être le premier à être informé des nouveaux produits Très bien, c'est tout pour la première partie. Les éléments suivants seront les éléments formés, qui incluront l' élément d'entrée et le fond. C'est donc un formulaire ouvert avec le formulaire d'inscription au cours. Ensuite, je vais insérer votre saisie avec le type e-mail. Ensuite, je vais insérer les entrées de votre formulaire d'inscription à la classe. Et utilisons également un attribut d'espace réservé avec une valeur, entrez votre e-mail Très bien, c'est tout à propos du bouton « Colonnes suivantes ». Définissons son type à soumettre et attribuons également à chaque attribut de classe un formulaire d' inscription de valeur BTN. En fait, le bouton sera représenté par l'icône Font Awesome. Ouvrons donc les éléments I avec les noms de classe , FAA, flèche, OK, c'est tout pour les éléments du formulaire. Enfin, je vais créer le paragraphe pour le texte de copyright. Il s'agit donc d'un élément open p avec le copyright de la classe. Et puis comme contenu, insérons du code et créons, suivi du signe du copyright. Je vais utiliser ici HTML5, entité, esperluette, copie, point-virgule, puis Insecure Tous droits réservés. Très bien, avec le balisage HTML, nous avons terminé et nous pouvons personnaliser cette section Insérons de nouveaux commentaires dans le fichier CSS. Nous devons passer à la section 4. Section quatre. Sélectionnez ensuite les éléments de section. Dans un premier temps, je vais définir la largeur et la hauteur. Mettons-nous à 200 %. Pour ce qui est de la hauteur, je vais la faire passer à 30 % de la fenêtre d'affichage Et changez également la couleur d'arrière-plan. Utilisons ici le nom 222. Bon, maintenant je vais m' occuper de la mise en page des trois parties. Je vais utiliser Flexbox. Définissons la propriété d'affichage sur flex. Ensuite, afin de créer de l'espace autour des éléments, je vais utiliser la fonction de justification du contenu avec un espace de valeur autour. Et en plus de cela, je vais créer de l'espace en haut et en bas de cette section. Pour cela, utilisons un rembourrage avec les valeurs trois, rem et zéro D'accord ? heure actuelle, les trois parties sont placées horizontalement dans une rangée, mais en fait, nous n'en avons pas besoin. Je vais placer le paragraphe sur les droits d'auteur au bas de cette section. Alors occupons-nous de l'exposition. Je vais attribuer à chaque position un absolu. Ensuite, afin d'aligner le paragraphe en fonction de son élément parent, je vais définir la position de l'élément de section par rapport à un élément relatif. Ensuite, définissons la position inférieure du paragraphe et faisons en trois tours. OK, avec la mise en page, nous avons terminé. Allons-y et commençons à personnaliser chacun des éléments. Je vais sélectionner les éléments div du wrapper. Attribuons-lui la transformation du texte en majuscules car nous avons besoin des deux éléments, je veux dire que le titre et le paragraphe doivent être en majuscules Ensuite, je vais m' occuper du Alors sélectionnons-le. Je vais augmenter la taille de la police. Faisons en sorte qu'il soit plein de RAM. Et mettez également le texte en gras ou utilisez une épaisseur de police avec une valeur de 900. Et enfin, changez de couleur. Je vais utiliser votre couleur H7N9, A2. Ils se dirigent donc. Ça a l'air bien. Passons à autre chose et commençons le paragraphe. Sélectionnons-le. Changez la taille de la police, arrondissez-la à 1,5 tour. Pour ce qui est de la couleur, je vais utiliser 888. Très bien, c'est tout pour la première partie. Passons à autre chose et prenons soin de l'élément de formulaire. À l'intérieur de l'élément de formulaire, nous avons une entrée et un bouton, et je vais les placer côte à côte. Pour cela, je vais utiliser Flexbox. Et aussi pour centrer les deux éléments, en particulier, utilisons aligner les éléments au centre. Nous avons donc un petit problème en ce moment. Comme vous pouvez le constater, l'élément de formulaire s'est retrouvé un peu plus bas. Et pour résoudre ce problème, je vais attribuer aux éléments de la section, aligner la propriété des éléments sur la valeur flex, commencer. Dans ce cas, les deux articles flexibles se retrouveront en haut du conteneur. Très bien, allons-y et personnalisons l'élément d'entrée. Sélectionnons-le. Tout d'abord, je vais définir la largeur et la hauteur. Commençons avec 235 points. Pour ce qui est de la hauteur, je vais lui donner cinq RAM. Créez de l'espace à l'intérieur de l'entrée à l'aide d'un rembourrage. Réglons-le sur un rem sur les quatre côtés et changeons également la bordure. Je vais interférer avec le point de RAM Solid Color sur un 7982d. OK, ensuite, occupons-nous du texte. Changeons la taille de la police, faisons-en 1,6 RAM. Rendez également les textes légèrement plus gras en utilisant une épaisseur de police d'une valeur de 700 Ensuite, je vais créer un espace entre les lettres en utilisant un espacement des lettres de 0,1 RAM. Et changez également la couleur. Refaites un 79 a à D. Très bien, c'est tout pour les éléments de saisie Et avant de personnaliser le bouton, je vais modifier la couleur de l' attribut d'espace réservé Nous allons donc sélectionner l' élément d'entrée suivi l'espace réservé et lui attribuer la couleur H7N9, A à D. Très bien, maintenant il est temps de nous occuper du bouton dans un premier temps, changeons Je vais définir sa position sur relative. Nous utilisons ici la position relative car nous devons utiliser la propriété de gauche. Et en cas de position statique, qui est la position par défaut, nous pouvons accéder à cette propriété. Définissons la propriété de gauche sur -4,5 au hasard. OK, le bouton est positionné et nous devons maintenant le personnaliser. Tout d'abord, définissons la largeur et la hauteur. Je vais les faire tous les deux pour la RAM. Changez ensuite la couleur d'arrière-plan, faites-la 333. Et changez également la couleur. Vous utilisez à nouveau le H7N9 a à D. D'accord, donc le bouton semble déjà bon, mais nous devons y ajouter quelques styles supplémentaires Je vais supprimer la bordure par défaut. Mettons-le donc à zéro. Augmentez ensuite la taille de la police, faites-en 1,8 RAM. Et changez également le type du plus grossier, faites-le pointer. Très bien, c'est tout pour les éléments du formulaire. Nous devons maintenant personnaliser le dernier élément de cette section , à savoir le paragraphe. Changeons donc la taille de la police, faisons en sorte qu'elle s'exécute en version 1.7. De plus, je vais alléger le téléphone en utilisant font-weight avec la Changez ensuite la couleur, faites-en un e. Et créez également un espace entre les lettres. Faisons en sorte qu'il fonctionne à 0.1. Très bien, je vais maintenant créer la bordure en haut du paragraphe Utilisons donc la propriété supérieure de la bordure avec les valeurs point 1 g, solide. Et comme couleur, utilisons 888. Et créons également de l'espace en utilisant rembourrage sur le dessus avec la valeur six points. La bordure est créée, mais comme vous le voyez, elle est étendue en fonction de la largeur du paragraphe. Nous avons besoin que la bordure occupe toute la largeur de la page. Je vais donc augmenter la largeur du paragraphe. Réglons-le à cent pour cent. La taille de la bordure est maintenant augmentée, mais le paragraphe s' est retrouvé sur le côté gauche. Et pour résoudre ce problème, utilisons le centre d'alignement du texte. Très bien, avec le pied de page, nous avons terminé. Ensuite, nous devons nous occuper de la navigation. Alors passons à autre chose. 9. Projet 1 - Créer et styliser la barre de navigation fixe: La navigation va être assez intéressante. Comme vous pouvez le voir par défaut, il est masqué et l'icône Menu s'affiche dans le coin supérieur gauche de la page. Il a une position fixe. Une fois que j'ai cliqué dessus, le numéro s'affichera bien en haut. Et tous les éléments de navigation apparaîtront avec un effet de fondu. De plus, si je les survole, ils changeront de couleur Si je clique à nouveau sur l'icône du menu Alberta se masquera à nouveau. Voyons ce que nous allons créer. Commençons donc par le balisage HTML. Je vais l'écrire avant le conteneur. Insérons de nouveaux commentaires. Maintenant bar. Et de Navarre. Ouvrez ensuite les éléments de navigation HTML5 avec la classe désormais normale. Dans l'ensemble, nous aurons donc cinq éléments de navigation différents. Ils seront représentés par les icônes de liens, et chacun d'entre eux inclura une icône Font Awesome avec des textes. OK, ouvrons maintenant les éléments de lien avec la classe par lien. Ensuite, ici, l'élément avec une classe est FAS une page d'accueil, alors l'icône Font Awesome sera suivie des éléments span Insérons ici la page d'accueil. D'accord, donc dans l'ensemble, nous aurons cinq éléments de navigation. Allons-y et dupliquons l'élément de lien quatre fois, puis changeons les noms des classes ainsi que le contenu des éléments de la plage. Le second sera constitué d'ustensiles. Et comme contenu, écrivons des repas. Ensuite, nous mangerons un hamburger. Le plat va être un hamburger. Ensuite, la prochaine sera une pizza en tranches. Et le dernier élément sera fade ou un contact téléphonique. Très bien, nous avons donc ici les éléments de navigation. La seule chose à faire est de créer un élément div pour l'icône de menu associée au menu de classe En fait, cet élément va être vide. Nous allons le personnaliser à partir du CSS. Cela dit, en ce qui concerne le balisage HTML, allons-y et commençons à écrire du CSS Je vais insérer de nouveaux commentaires juste après les styles courants dont nous avons besoin ici, à savoir la barre de navigation et ceux de Navarre Sélectionnez ensuite suffisamment d'éléments. Et tout d'abord, définissez la largeur et la hauteur. Je vais régler la largeur à 100 %. Quant à la hauteur, faisons-en 14 RAM, et changeons également la couleur d'arrière-plan, rendons-la noire. OK, nous avons donc ici la barre de navigation. En fait, cela devrait être corrigé. Nous devons donc définir sa position sur fixe et également mettre à zéro la propriété supérieure. Très bien, donc si je fais défiler la page vers le bas, le numéro conservera sa position fixe Comme vous pouvez le voir, une fois que nous avons fait défiler certains éléments vers le bas, puis vers le haut de la barre de navigation Et pour résoudre ce problème, je vais utiliser la propriété d'index avec une valeur plus élevée, disons 100. Maintenant, le problème est résolu. Passons à autre chose et prenons soin de la mise en page des éléments de navigation. Pour cela, je vais utiliser Flexbox. Définissons la propriété d'affichage de manière à fléchir puis centrer les éléments horizontalement et donc verticalement à l'aide de justify-content center et d'aligner les éléments Très bien, donc les objets sont placés au centre. Et la dernière chose que je veux faire à propos de l'élément de navigation est de créer un petit effet d'ombre. Utilisons Box Shadow. Cela semble pointer trois fois vers la RAM et comme couleur. Utilisons le noir. OK, donc avec cet élément, nous avons terminé. Passons à autre chose et personnalisons les éléments du lien. Sélectionnons maintenant par lien. Tout d'abord, je vais changer la couleur. Rendons-le gris clair en utilisant la couleur AAA. De plus, je vais créer de l'espace sur les côtés gauche et droit en utilisant une marge avec une valeur de 0,4 rampe. Très bien. Ensuite, personnalisons les éléments I et aussi la portée Je veux les agrandir. Donc tout d'abord, je vais sélectionner Police, icône géniale. Augmentons sa taille de police, faisons-en sept RAM. En ce qui concerne l'élément span, modifions sa taille de police. 2,5 RAM. Ensuite, je vais rendre les articles plus audacieux. Réglons l'épaisseur de la police à 900. De plus, je vais créer un espace entre les lettres en utilisant l'espacement des lettres, la valeur 0,5 RAM. Ensuite, créez de l'espace en haut en utilisant la marge supérieure de 0,5 rond. Très bien, considérons que les éléments de navigation sont bien meilleurs, mais nous devons modifier la mise en page Je veux dire, nous devons placer éléments de travée l'un sur l'autre. Pour cela, utilisons flexbox. Alors. Pour placer des éléments dans la colonne, nous devons changer de direction. Faisons-en une colonne. Et puis placez les objets au centre. Je veux dire à la fois verticalement et horizontalement. Utilisez le centre de contenu justify-et alignez le centre des éléments. Les éléments de navigation sont beaux. Avant de continuer et de personnaliser l'icône du menu, je souhaite créer un petit effet de survol Une fois que nous avons survolé les éléments, je souhaite modifier légèrement la couleur Nous allons donc sélectionner un lien Albert avec le pointeur souris et changer de couleur, le rendre blanc En plus de cela, afin de rendre l'effet plus fluide, utilisons la transition avec les valeurs color et 0,3 s. Très bien, c'est tout. À l'heure actuelle, dans les éléments de navigation, nous avons terminé. Passons à autre chose et personnalisons l'icône du menu. Tout d'abord, je vais définir la largeur et la hauteur. Définissons la largeur en fonction de la quantité de RAM requise. Pour ce qui est de la hauteur, je vais lui faire six RAM. Et changez également la couleur d'arrière-plan, rendez-la noire. Pour le moment, l'icône du menu n'est pas visible car elle est placée derrière la barre de navigation. Je vais donc le placer un peu vers le bas, comme si l'icône du menu de la barre de navigation devait également avoir une position fixe Définissons donc la position à corriger. Définissez ensuite la propriété supérieure, faites-en 15 RAM. Pour ce qui est de la propriété de gauche, je vais en faire cinq rampes. Très bien, comme vous pouvez le voir, l'icône du menu est visible. Ensuite, je vais m' occuper de sa forme, vais la modifier en utilisant border-radius En fait, vous pouvez définir un rayon de bordure différent sur différents côtés. Utilisons border-radius. La première valeur se trouve dans le coin supérieur gauche. Je vais en faire 30 RAM. Ensuite, le suivant est pour le coin supérieur droit. Passons aussi à Ram. Ensuite, nous aurons le coin inférieur droit. Je vais faire 15 RAM d' asphalte dans le coin inférieur gauche. Faisons-en également 15 RAM. D'accord, comme vous pouvez le voir, la forme de l' icône du menu a été modifiée. Ensuite, je vais y ajouter un petit effet d'ombre. Utilisons donc box-shadow. C'est Institute 0,13 fois avec une couleur noire. Et en plus de cela, je vais ajouter ici une autre ombre, mais sur le côté gauche. Je vais donc utiliser ici 0.1 exécuté deux fois avec le signe moins, puis 0,1 RAM, et encore une fois la couleur noire. Enfin, changeons le type du curseur, faisons-le pointer. Très bien, c'est tout, à propos de l'icône du menu. Ensuite, je vais créer une ligne qui fera partie de l'icône. Et nous allons le créer à l'aide du pseudo-élément before. Utilisons-les donc avant. Tout d'abord, définissez le contenu, rendez-le vide. Alors je vais m'asseoir , on peut se cacher. Faisons avec 0,3 RAM. Pour ce qui est de la hauteur, je vais lui donner 15 rampes, puis changer la couleur de fond, la rendre noire. Et réglez également la position sur absolue. La ligne est donc visible. Comme vous pouvez le constater, nous devons corriger sa position. Réglons la position supérieure, deux asphaltes de -15 RAM en position de gauche, nous devons placer la ligne au centre La largeur de la ligne est égale à 0,3 RAM. Nous devons le déplacer de 50 % vers la gauche. Mais nous devons également prendre en compte la largeur de la ligne afin de la centrer parfaitement. Pour ce faire, je vais utiliser la fonction calc, où nous devons calculer 50 % -0,15 RAM, soit la moitié de la largeur de la ligne Encore une fois, dans ce cas, la ligne sera parfaitement centrée . Enfin, ajoutons un effet d' ombre à la ligne. Utilisez box-shadow avec les valeurs 0,1 RAM, zéro, puis 0,1 RAM et la couleur noire D'accord ? Donc, avec ce style, nous en avons terminé. Maintenant, il faut faire la sieste ou travailler. Et pour cela, je vais utiliser un peu de JavaScript. Avant cela, je vais placer la barre maintenant et l'icône du menu dans leurs positions par défaut. Je veux dire, quand ils sont maintenant masqués et que l'icône du menu est placée un peu plus haut. Changeons la position supérieure de Naropa et la rendons à -14 RAM En ce qui concerne l'icône du menu, nous devons changer sa position, la position supérieure, et en faire un tour. Très bien, donc tout est prêt pour notre travail. Nous allons associer un événement de clic à l'icône du menu. Passons donc au fichier JavaScript et sélectionnons le menu à l' aide de la méthode QuerySelector Ensuite, nous devons y attacher un écouteur d'événements. Il faut deux arguments. Le premier concerne le type d'événement. Dans ce cas, nous avons besoin d'une clique. Quant au deuxième argument, il s' agira de la fonction de rappel, qui sera exécutée une fois que nous aurons cliqué sur l'élément Nous devons maintenant le sélectionner dans le pore et l'icône Menu. En fait, nous pouvons le faire séparément, mais serait-il préférable d'attribuer la même classe aux deux éléments, puis de les sélectionner simultanément Attribuons-leur donc une cible de classe. Maintenant, pour sélectionner dans Napa et dans l'icône du menu, je vais utiliser la méthode all du sélecteur de requêtes Ensuite, entre parenthèses comme nom de classe, je vais spécifier des cibles Nous allons donc ajouter de nouveaux styles aux deux éléments une fois que nous aurons cliqué sur l'icône, puis nous nous débarrasserons de ces styles au clic suivant. Pour cela, nous devons parcourir la liste des nœuds renvoyée par la méthode all du sélecteur de requêtes Nous devons ajouter à chaque élément une nouvelle classe en utilisant la méthode toggle Ensuite, nous définirons nouveaux styles en utilisant cette classe de CSS. Donc, pour parcourir la liste des nœuds, je vais utiliser l'une des méthodes d'aide au tableau appelées pour chacune En fait, la méthode forEach prend un argument, qui est une fonction de rappel. Et cette fonction sera exécutée pour chaque élément de la liste des nœuds. Insérons donc ici une fonction de flèche. Cette fonction de rappel elle-même prend un argument, qui est l' élément actuel de la liste Tout au long de la boucle, je vais l'appeler item. Alors maintenant, comme nous l'avons dit, nous devons ajouter aux deux éléments une nouvelle classe en utilisant la méthode toggle Pour cela, utilisons l'une des propriétés appelées liste de classes. Nous devons l' attacher à l'article. Il nous donne toutes les classes de l'élément. Cela nous permet également d'accéder à différentes méthodes afin de manipuler les classes de l'élément. Dans ce cas, nous devons utiliser une méthode toggle, qui nous permet d'ajouter classe à l'élément s'il n'en possède pas, et de supprimer une classe si l' élément en possède OK, maintenant nous devons passer ici le nom de la classe, appelons-le changement. C'est tout à propos de JavaScript. Nous devons maintenant écrire du CSS. Mais avant cela, je vais montrer que les deux éléments subissent un changement de classe OnClick Donc, si j'inspecte la page et que j'affiche les éléments, puis que je clique sur l'icône, vous verrez que les deux éléments obtiennent des classes. Si je clique à nouveau, ils seront supprimés. D'accord, nous devons maintenant définir de nouveaux styles en utilisant le changement de classe. Sélectionnons le menu avec modification. Donc, une fois que nous avons cliqué sur l'icône, nous devons la déplacer vers le bas. Changeons sa position supérieure, faisons-en 15 RAM. Donc, si je clique sur l'icône, elle se déplacera vers le bas. Et la semaine prochaine, il augmentera à nouveau. Rendons cet effet plus fluide. Transition. Avec une valeur maximale et 0,4 s. Maintenant, nous pouvons voir que nous avons un bien meilleur résultat. Ensuite, je vais afficher la barre de navigation. Sélectionnons-le donc en utilisant le changement de classe. Je vais définir la première position. Mettons-le à zéro. Et utilisez également la transition pour un effet fluide Les valeurs top et 0,4 s. Donc, si nous cliquons sur l'icône, le roman s'affichera correctement, puis il se masquera au clic suivant. Afin de rendre cet effet un peu plus agréable, je vais ajouter un délai à l'icône du menu Ajoutons ici 0,2 s. Maintenant, l'icône se déplace avec un certain retard, mais ce n'est pas ce que nous voulons. Nous n'avons pas besoin de ce délai pour la clique suivante. Je vais donc utiliser une autre transition, mais avec un changement de classe et sans délai. Bon, maintenant nous avons un meilleur résultat, mais ce n'est toujours pas ce que nous voulons. Nous avons également besoin d' un délai de retard dans le port actuel. Allons-y et ajoutons une nouvelle transition dont la valeur est 0,4 s et 0,2 s maximum, qui est le temps de retard. D'accord ? Comme vous pouvez le constater, tout fonctionne parfaitement. La seule chose à faire était d'afficher les éléments de navigation avec un effet de fondu. Tout d'abord, nous devons masquer toutes les icônes. Réglons donc l'opacité à zéro. Ensuite, nous devons afficher les éléments au clic, mais avec un délai différent Nous devons donc sélectionner le lien numérique avec le changement de classe. Réglons l'opacité à un. Ensuite, nous devons définir une propriété de transition pour chaque élément de navigation avec un délai différent. Allons-y et commençons par le premier point. Nous avons besoin de. Encore une fois, changez. Ensuite, mettez maintenant le lien suivi du nième sélecteur enfant comme valeur Interviewons-en un. Cela signifie que nous avons sélectionné le premier lien Nobel. Comme nous l'avons dit, nous avons besoin ici d'une transition avec opacité de 0,4 s. Et comme temps de retard, insérons votre 0,5 s. Au total, nous avons cinq éléments Dupliquons donc ce code quatre fois et changeons les valeurs. Pour le deuxième élément, nous avons besoin de 0,6 s. Ensuite, le suivant sera de 0,7 s. Pour le quatrième élément, je vais passer ici 0,8 s. Et pour le dernier élément, réduisons le délai à 0,9 s. Donc, si je clique sur l'icône, les éléments de navigation apparaîtront correctement avec un léger effet de fondu. En fait, nous avons presque terminé. Nous avons ici de petits problèmes. Si je survole les éléments, nous n'aurons plus d'effet de survol fluide Et aussi lorsque nous réduisons la hauteur des objets du roman sans transition. La raison du premier problème est que l'ancien lien de transition vers la Navarre a été remplacé Allons-y donc et ajoutons une transition, je veux dire, une couleur à tous les éléments ci-dessous. Fixons la durée à 0,3 s. En ce qui concerne le second problème, nous devons ajouter de l'opacité au lien Navajo par défaut Réduisons les points de durée à 2 s. Très bien, maintenant tout fonctionne parfaitement Enfin, nous en avons fini avec la construction de ce projet. La seule chose à faire est de le rendre réactif aux différentes tailles d'écran. 10. Projet 1 - Rendre le projet réactif: Ainsi, comme nous l'avons dit au début de ce projet, il est construit sur un écran de très grande taille. Je suis dans la taille de l'écran avec 1920 pixels de largeur et dix ADB, ceux de hauteur Nous allons maintenant le rendre réactif sur différentes tailles d'écran. Nous devons créer deux points de rupture différents. Et nous allons rendre le projet réactif l'aide de requêtes multimédia CSS. J'ai déjà préparé les points de rupture sur lesquels nous devons apporter des modifications, donc je ne vais pas perdre de temps à les trouver. OK, allons-y et inspectons la page. Et passez ensuite en mode réactif. Comme vous pouvez le voir, la largeur et la hauteur sont réglées sur 1920 pixels et dix ADP. D'accord, donc le premier point d'arrêt sur lequel nous devons apporter des modifications sera de 1 400 pixels Nous devons donc créer une requête multimédia CSS d'une largeur maximale de 1 400 pixels. Mais dans un premier temps, je vais insérer de nouveaux commentaires, réactifs et non réactifs Créez ensuite une requête multimédia CSS et spécifiez la largeur maximale de 1 400 pixels. Donc, le point d'arrêt, je vais diminuer la taille de police de l'élément HTML Portons-le à 50 %. Cela diminuera la taille des éléments pour lesquels nous avons utilisé la RAM comme unité de mesure. Très bien, donc la première section semble bonne. Nous n'avons rien à faire ici. En ce qui concerne la deuxième section où nous avons les chariots, je vais augmenter l'espace en bas à l'intérieur de cette section Mais pour ce faire, nous devons d'abord régler la hauteur de notre rangée. Nous allons donc sélectionner la section pour régler la hauteur sur automatique, car sinon le rembourrage en bas ne sera pas appliqué Nous avons donc besoin ici d'un rembourrage, dix rem en haut, zéro, plus de 12 RAM en bas, puis encore zéro Ensuite, nous devons créer un espace entre le titre et les cartes. Nous allons donc sélectionner le conteneur de cartes et lui attribuer la marge supérieure avec la valeur dix. Très bien, c'est tout pour la section 2. Passons à autre chose et personnalisons la section suivante, qui est la galerie. heure actuelle, la largeur et la hauteur de chaque lien de galerie sont définies dans la largeur de la fenêtre d'affichage Cela les réduit lorsque nous diminuons la largeur de la fenêtre du navigateur. Je vais donc modifier la largeur de la fenêtre d'affichage en RAM. Sélectionnez le lien de la galerie , puis définissons la largeur et la hauteur. Je vais régler la largeur à quatre pour le bélier. Quant à la hauteur, faisons-la 25 rem. Et en plus de cela, nous devons également définir la largeur et la hauteur des images. Nous devons les régler tous les deux à 100 %. D'accord, nous avons donc changé la largeur et la hauteur. Je veux dire l'unité de mesure. Une autre chose que je veux faire ici est de créer une petite marge autour des bâtiments. Parce qu'une fois que nous aurons réduit la taille du navigateur , les images se rapprocheront trop les unes des autres. Et pour l'éviter, fixons la marge à cinq points. Très bien, en fait, avec ce point d'arrêt, nous en avons terminé. Toutes ces sections ont l'air bien. Et maintenant, nous devons passer à autre chose et trouver le point d'arrêt suivant, qui sera de mille pixels Allons-y et créons une nouvelle requête multimédia CSS d'une largeur maximale de mille pixels Au point d'arrêt, je vais modifier la taille des titres de cette section Sélectionnons cet élément et définissons la taille de police à neuf RAM. De plus, nous devons utiliser votre marge sur les côtés gauche et droit car sinon les titres se termineront plus tard et ce ne sera pas agréable Réglons donc la marge à zéro en haut et en bas et à cinq rem, sur les côtés gauche et droit. Très bien, donc le titre est plus petit. Maintenant, je vais également réduire l'icône. Allons-y, sélectionnons-les et réglons leur taille de police à 25 rem. Très bien, c'est tout à propos de la première section. Passons à autre chose et personnalisons le second. Je vais emballer les cartes et les placer sur différentes lignes. Allons-y et sélectionnons les cartes. Container Et à qui l'on a attribué l'une des propriétés flexibles, je veux dire Flex Wrap avec une valeur rab. Ensuite, je vais sélectionner la carte elle-même car je veux créer de l' espace autour de chaque carte. Utilisons la marge et définissons-la à cinq rem. OK, alors c'est ça. Les cartes ont l'air bien. Et la seule chose que je souhaite faire sur le point d'arrêt est d'augmenter légèrement la hauteur du pied de page Nous allons donc sélectionner la section quatre et lui attribuer sa hauteur avec la valeur jusqu'à la rampe. Hein ? Donc, avec des milliers de pixels, nous avons terminé. Passons à autre chose et occupons-nous du prochain point d'arrêt, qui sera en fait de 900 pixels Alors allons-y et créons de nouveaux médias CSS. Spécifiez ensuite une largeur maximale de 900 pixels. En ce qui concerne le point d'arrêt, je vais prendre ici la valeur nulle où toutes les autres sections semblent bonnes Allons-y et sélectionnons maintenant le lien de la barre. Je vais régler la marge sur la RAM. Alors. Donc, comme l'élément I, parce que je veux le diminuer légèrement. Donc, la taille de la police. Mettons-le sur forum. Et sélectionnons également l'élément span. Je suis dans les valeurs du texte et je définis la taille de la police pour qu'elle s'exécute. C'est bon, c'est ça pour l' instant, mais ça a l'air bien. Et nous devons passer à autre chose et trouver le point d'arrêt suivant, qui, je pense, sera de 700 pixels Créons donc un nouveau média CSS et spécifions une largeur maximale de 700 pièces Donc, au point d'arrêt, je vais réduire la taille de ce titre de section Allons-y et sélectionnons le titre de la section. Réglez la taille de police sur sept RAM. Et en plus de cela, je vais augmenter la marge de gain sur les côtés gauche et droit. Il est donc affecté à zéro et à tan run. OK, maintenant occupons-nous des icônes. Je vais également réduire leur taille. Sélectionnons-les donc et réglons leur taille de police sur 20 rampes. Très bien, avant de passer à la section suivante, je vais déplacer légèrement l'icône du menu vers l' œil gauche Nous allons donc sélectionner le menu et définir sa position à gauche. Fais-le courir. Très bien, donc l'icône est belle et en fait toutes les autres sections sont belles sauf le pied de page Alors allons-y et prenons-en soin. Tout d'abord, je vais augmenter la hauteur. Section quatre, réglez la hauteur sur quatre pour courir. Ensuite, je vais placer les éléments de la colonne les uns sur les autres. Pour cela, nous devons modifier la direction de la flexion. Faisons-en une colonne. Ensuite, nous devons placer les articles flexibles en haut à l'intérieur du conteneur. Utilisez ici la commande Justify Contents Flex Start. Et nous devons également les centrer horizontalement en alignant les éléments au centre. Comme vous pouvez le voir, les éléments sont placés verticalement dans une colonne, mais nous devons créer un espace entre ces textes et le champ de saisie. Nous allons donc sélectionner la section pour les textes et définir la marge inférieure avec la valeur huit Ran. C'est bon, c'est au point de rupture. Nous devons maintenant personnaliser notre projet sur le dernier point d'arrêt, qui sera de 550 pixels Nous allons donc créer un nouveau média CSS et spécifier une largeur de 550 pixels. Allons-y et diminuons à nouveau la taille de police des éléments HTML. Je vais le porter à 40 %. Ensuite, nous devons réduire l'espace entre les éléments de navigation. Sélectionnons donc maintenant par lien et définissons la marge sur zéro et 0,7 rampe. Très bien, en fait, nous avons presque terminé. Mais je vois ici un petit problème. Vous pouvez remarquer que l'icône du menu se trouve derrière les liens de la galerie. Cela peut également poser problème sur d'autres points d'arrêt. Alors allons-y et réglons ce problème. Je vais lui attribuer une propriété z-index par défaut. Portons-en à 100. Très bien, donc le problème est réglé. Enfin, nous avons fini de travailler sur notre projet. Je pense qu'il s'affiche bien sur différentes tailles d'écran, donc on peut dire qu' il est réactif. D'accord, alors j'espère que ce projet était intéressant. Cela vous a plu et vous avez appris de nouvelles choses. Nous devons maintenant passer à autre chose et commencer à construire le prochain projet. 11. Projet 2 - Aperçu du projet: Très bien, il est maintenant temps de commencer à construire notre deuxième projet J'appelle cela du design créatif, car tout au long de ce projet, nous utiliserons des effets sympas et sympas. Avant de commencer à écrire le code. Allons-y et décrivons le projet. Il sera composé de deux sections différentes. Passons donc en revue chacune d'elles. heure actuelle, vous examinez la première section, qui comprend deux parties différentes. Nous avons ici quatre éléments de navigation différents. Ils sont alignés verticalement et une fois que nous les survolons , ils commencent à se placer horizontalement et ils obtiennent également l'arrière-plan Ensuite, nous avons ici une belle rubrique. Ci-dessous, vous pouvez voir le logo du site Web. Et nous avons aussi ici un fond flottant qui ressemble à des vagues. Et je trouve que c'est plutôt beau. Très bien, nous avons ensuite les chariots des clients. Chaque voiture inclut des icônes Font, Awesome. Nous avions également des images des clients et des évaluations. Les cartes ont un bel effet de survol. Vient ensuite la section des équipes. Cela inclut également les cartes, mais ces cartes sont différentes et représentent les membres de l'équipe. Ils incluent également des histoires sur les membres que nous pouvons afficher en cliquant sur ce bouton. Droite. Ensuite, nous avons une section de contact. Il inclut l'image et quelques champs de saisie. Ils sont placés dans un environnement 3D et ont également un bel effet de survol Ci-dessous, nous avons un pied de page simple avec du texte de copyright OK, c'est donc tout pour ces sections du projet. Les éléments de navigation nous permettent d' accéder aux sections appropriées. Si je clique dessus, nous passerons facilement aux sections pertinentes. De plus, nous avons ici un bouton fixe en bas à droite de la page. Si je clique dessus, il défilera jusqu'à la page deux, la première section. Très bien, c'est tout pour le projet. Il sera réactif à toutes les tailles d'écran. Si j'inspecte la page, que je passe en mode réactif et que je vérifie le projet, vous verrez qu'il s'affiche bien sur différentes tailles d'écran. Très bien, nous sommes donc prêts à commencer à construire ce projet. Vous pouvez télécharger le fichier source de départ et le fichier source final. Ils sont joints à cette conférence 12. Projet 2 - Créer un balisage HTML pour l'atterrissage et définir les styles communs: Très bien, nous sommes donc prêts à commencer à construire nos projets. J'ai créé un nouveau dossier sur le bureau appelé Creative Design, dans lequel j'ai un autre dossier pour les images. Allons-y, ouvrons ce dossier dans le code VS et créons nos fichiers de travail pour HTML, CSS et JavaScript. Je vais les appeler index.html, style.css et script.js. Ouvrez ensuite le fichier index.html et créez un document HTML de base. Pour cela, je vais l'utiliser, insérons ici un point d'exclamation puis appuyons sur Tab ou Entrée Très bien, nous avons donc ici des balises HTML de base. Tout d'abord, je vais changer le titre. Insérons votre design créatif. Après ça. Lions les fichiers CSS et JavaScript. Je vais ouvrir la balise de lien et spécifier le chemin du fichier CSS. En ce qui concerne le JavaScript, je vais ouvrir la balise script juste au-dessus de la balise body de fermeture. Ensuite, nous devons spécifier le chemin du fichier dans l'attribut source. En plus de cela, je vais ajouter un lien supplémentaire pour les icônes de Font Awesome. Allons donc sur Google, recherchez Font Awesome, CDN, JES Récupérez ensuite le premier lien, ouvrez la balise de lien dans les éléments d'en-tête et collez le lien copié ici. OK, Enfin, lançons le projet dans le navigateur. Pour cela, je vais utiliser l'un des packages de code VS appelé serveur live. Cela nous permet d'exécuter le projet en direct sur le navigateur et effectuer des mises à jour et des modifications sans actualiser la page. OK, allons-y et plaçons l'éditeur et le navigateur. Comme ça. Et lancez-vous. Nous allons construire le projet section par section. Nous allons créer le balisage HTML pour chaque section , puis le styliser. Allons-y et créons le balisage HTML pour la première section Tout d'abord, je vais ouvrir une balise div, qui sera le conteneur Ouvrez ensuite l'élément de section avec une section de classe 1. La première section comprendra donc deux parties différentes. Nous aurons une barre de navigation la place du titre suivi du logo Et nous aurons également ce fond flottant. Allons-y et créons la barre de navigation. Je vais maintenant ouvrir l' élément de navigation HTML5 avec la classe pour cet élément de lien qui interfère avec la classe maintenant par lien. Et comme premier élément, insérons votre dessin. Au total, nous aurons donc quatre éléments de navigation. Dupliquons cette ligne de code trois fois, puis modifions le contenu. Le second sera celui des clients. Ensuite, nous aurons l'équipe et le contenu. OK, c'est tout pour l'instant. Pour la suite, je vais insérer une balise div, qui sera l'arrière-plan flottant Je vais attribuer à chaque cluster un PG flottant. Ensuite, je vais créer un titre. Il s'agit donc d'une balise de titre H1 ouverte avec un titre de section de classe Et comme le contenu qui se trouve ici, le design créatif. Enfin, créons un logo qui sera l'icône Font Awesome. Tout d'abord, ouvrons la balise div avec le logo de la classe. Ce sera l' enveloppe de l'icône. Ensuite, insérez votre élément oculaire avec une classe FAS. J'ai une courbe de Bézier. C'est bon, c'est ça. En ce qui concerne cette section, l' un des éléments est préparé. Et maintenant, nous devons commencer à écrire du CSS. Dans un premier temps, je vais créer des styles courants et par défaut. En fait, tout au long de ce projet, nous allons utiliser deux polices Google Fonts différentes. Nous devons donc introduire le lien. Allons sur le site Web de Google Fonts. Ensuite, je vais rechercher une police appelée monotone. En plus de cela, nous avons besoin du texte de type ci-dessous. En fait, je vais sélectionner ici quelques styles. Sélectionnons tous ces styles sauf l'italien. Ensuite, récupérez le lien à partir d'ici et collez-le dans le fichier CSS. Très bien, comme nous l'avons dit, nous allons créer des styles communs Par conséquent, je vais sélectionner chaque élément à l'aide d'un astérisque Tout d'abord, éliminons les paramètres par défaut, marges et le remplissage de chaque élément Mettons-les tous les deux à zéro. Ensuite, je vais définir la taille de la boîte borderbox. Supprimez également le sous-jacent par défaut des éléments de lien en utilisant la décoration du texte. Aucune. Le suivant sera de type list-style Aucune. Cela supprimera les puces par défaut des éléments LI Je veux dire les éléments de la liste. Après cela, je vais supprimer le contour par défaut de chaque élément. Définissons donc le plan sur aucun. Ensuite, je vais définir la famille de polices. Utilisons ici la tonalité ci-dessous, des textes, en cursive. Enfin, définissons l'épaisseur de la police à 400. D'accord, comme vous pouvez le voir, tous les styles sont appliqués. Je vais donc simplement projeter, je vais utiliser la RAM comme unité de mesure. heure actuelle, une mémoire vive est égale à 16 pixels car, par défaut, la taille de police de l'élément HTML est égale à 16 pixels. Je vais convertir une mémoire vive en dix pixels car je pense que ce sera plus pratique et plus simple à utiliser. Pour ce faire, nous devons donc réduire la taille de police du code HTML et la porter à 62,5 %. Comme vous pouvez le voir, les éléments sont devenus plus petits et maintenant 1 g équivaut à dix pixels 13. Projet 2 - Créer un effet de vagues en utilisant l'arrière-plan flottant: Très bien, nous pouvons enfin commencer à styliser la première section Avant cela, je vais ajouter quelques commentaires parce que je l'ai oublié. Insérons des commentaires dans le fichier HTML. Nous avons besoin ici de la première section, de la fin de la première section. Ensuite, dans le fichier CSS, je vais insérer ici styles courants et des styles courants. Ensuite, nous devons passer à la section 1 et à la section 1. OK, allons-y et sélectionnons les éléments de section. Tout d'abord, je vais définir la largeur et la hauteur. Mettons-nous à 200 %. Pour ce qui est de la hauteur, je vais la faire correspondre à 100 % de la fenêtre d'affichage Ensuite, je vais définir l' arrière-plan sur blanc. En fait, par défaut, l' arrière-plan est blanc, mais de toute façon, définissons-le. Bon, maintenant je vais m' occuper de l'arrière-plan flottant et vous montrer comment cela fonctionne. Dans un premier temps, je vais le réduire et vous montrer comment il fonctionne, puis il augmentera sa taille. Allons-y et sélectionnons les éléments div, l'arrière-plan flottant de la classe Tout d'abord, définissons la largeur et la hauteur. Je vais faire en sorte qu'ils soient tous les deux à 70 RAM. Changez ensuite la couleur d'arrière-plan. Je vais utiliser la valeur RGBA. Insérons votre 50231255 puis l'opacité 0,8. D'accord, nous avons donc ici un aperçu. Ensuite, je vais le placer au centre. Réglons la position sur absolue. Que pour positionner l'élément en fonction de son élément parent, je vais définir la position relative de l'élément de section. Ensuite, nous devons définir les propriétés du haut et de la gauche. Configurons jusqu'à 15 %. En ce qui concerne la propriété de gauche, afin de centrer parfaitement l' élément, je vais utiliser la fonction calc Nous devons soustraire la moitié de la largeur des éléments à 50 %. Dans ce cas, l'élément sera centré horizontalement. Nous avons donc besoin ici de calc et le calcul sera de 50  % à 35 rampes OK, donc pour l'instant, c'est tout à propos du premier arrière-plan. Ensuite, nous devons en créer un second. Et je vais le faire en utilisant le pseudo-élément before. Allons-y et sélectionnons le PG flottant suivi des pseudo-éléments précédents. Tout d'abord, définissons le contenu, rendons-le vide. Ensuite, je vais définir la largeur et la hauteur. Faisons en sorte qu'ils soient tous les deux à 100 %. Modifiez également la couleur d'arrière-plan. Je vais utiliser la même couleur mais avec une opacité différente Nous avons donc besoin du RGBA 50231255 et de l'opacité 0,1. Après cela, je vais définir la position sur absolue. Ensuite, nous devons définir les positions supérieure et gauche. Je vais les mettre à zéro pour les deux. l'heure actuelle, l'élément n' est pas visible car il est placé derrière le premier arrière-plan. Et pour le prouver, nous pouvons simplement changer la position de gauche , disons 20 %. Maintenant, vous pouvez le voir clairement. Maintenant, avant, l'élément dans lequel je me trouve dans le second arrière-plan est visible. OK, revenons à zéro. Ensuite, nous devons modifier la forme de ces éléments. Nous devons les contourner en utilisant border-radius, mais nous utiliserons des valeurs différentes pour chaque élément Donc, pour l'arrière-plan principal, je vais définir le rayon de la bordure à 45 %. En ce qui concerne le deuxième élément, faisons en sorte que le rayon de bordure soit de 40 % Bon, maintenant tout est prêt. Il suffit d' animer les deux éléments. Ensuite, je vais utiliser des images-clés CSS. Cela nous permet de créer des règles CSS, puis les appliquer aux éléments à l' aide de la propriété d'animation. Créons des images-clés CSS. Nous devons ajouter le signe, puis les images-clés du mot-clé, puis le nom de l'animation Je vais l'appeler Rotation. Nous allons définir deux étapes différentes, le point de départ et le point d'arrivée. Je veux dire 0 % et 100 %. Et nous devons faire pivoter l' élément de 360 degrés. Donc à 0 %, je veux dire qu' au point de départ, nous devons effectuer une transformation avec la fonction de rotation et avec la valeur zéro. Quant au 100 %, comme point final. Nous devons transformer, faire pivoter à 360 degrés. Ainsi, pendant l'animation, l'élément pivote une fois de 360 degrés. Très bien, donc pour appliquer ce style aux arrière-plans, nous devons utiliser la propriété d'animation pour les deux éléments Dans un premier temps, nous devons définir le nom de l'animation, qui est rotation. Il faut ensuite définir la durée. Ça va prendre trente secondes. Et nous devons également rendre l'animation infinie. Insérons donc votre infini. Comme vous pouvez le voir, les éléments tournent et nous avons un bel effet d'animation. Nous devons maintenant modifier la taille et la position de ces arrière-plans. D'ailleurs, nous utiliserons la largeur de la fenêtre d' affichage comme unité de mesure car elle nous permettra de rendre l'élément réactif aux différentes tailles d'écran Pour montrer pourquoi nous allons utiliser la largeur de la fenêtre d'affichage, changeons la mémoire vive, augmentons la largeur de la fenêtre d'affichage et réduisons également la taille Faisons-le, disons 40 largeur de fenêtre d'affichage. Et changez également ici, 35 enfoncements pour 20 de largeur de fenêtre d'affichage Donc, si je fais en sorte que la fenêtre soit plus petite que l'arrière-plan, modifierai leurs tailles en conséquence. D'accord ? En fait, nous devons augmenter la largeur et la hauteur. Faisons les deux. Largeur de la fenêtre d'affichage : 150. Changez également la largeur de la fenêtre d'affichage de 20 en 75. En plus de cela, nous devons corriger la situation. Réglons la position supérieure à -125 pour la largeur de la fenêtre d'affichage. D'accord ? L'arrière-plan est donc correctement placé. Nous n'avons ici qu'un seul problème. Nous n'avons pas besoin de cette barre de défilement ici. Donc, pour résoudre ce problème, je vais attribuer à body element overflow x hidden Très bien, asseyons-nous en ce qui concerne le fond flottant. Il a l'air plutôt beau et moderne, alors j'espère qu'il vous plaira. Nous devons maintenant nous occuper du reste des éléments. Je veux dire, maintenant pour le titre et le logo 14. Projet 2 - Personnaliser la page d'atterrissage: Allons-y et commençons par la barre maintenant. Nous avons quatre éléments de navigation différents, et je vais les placer horizontalement d'affilée, mais chaque élément sera aligné verticalement. Allons-y et sélectionnons la barre de navigation. l'heure actuelle, la barre de navigation est placée derrière l'arrière-plan flottant Donc, pour le rendre visible, je vais utiliser la propriété z-index Mais avant cela, nous devons définir la position car sinon la propriété z-index ne fonctionnera pas Réglons donc la position sur relative. Ensuite, utilisez l'indice dont la valeur sera supérieure à zéro. Portons à 20. Bon, alors, maintenant quatre est faisable et je vais changer de position. Placez-le un peu plus bas. Je vais donc placer la première position sur quatre rampes. Ensuite, je vais créer un espace entre les éléments de navigation et les aligner à l'aide de Flexbox. Allons-y et définissons la propriété d'affichage sur flex. Ensuite, afin de créer de l'espace entre les éléments, je vais simplement justifier propriété du contenu avec la valeur espacée de manière uniforme. Très bien, c'est tout à propos de la barre de navigation. Allons-y et personnalisons le lien dans Alba. Sélectionnons-le. Et tout d'abord, l'augmentation la taille de police la fait pointer vers la RAM. De plus, je vais rendre les liens gras que de créer un espace entre les lettres Faites-le pointer vers la RAM. Et change de couleur. Réglons la couleur sur le blanc. OK, donc les articles sont beaux. Comme il ressort du projet terminé, l'élément doit être une ligne verticale, et une fois que nous le survolons, il doit être replacé horizontalement Et ils devraient aussi avoir une couleur de fond, non ? Afin de les placer verticalement, je vais réduire la largeur du lien nanopore Et en plus de cela, je vais utiliser l'une des propriétés appelées Word Wrap avec la valeur break word. Réglons donc la largeur à 1,5 RAM. Ensuite, utilisez le mot de fin de mot avec le mot de rupture de valeur. Très bien, c'est tout pour la liaison avec Napal. Il est maintenant temps de créer un effet de survol. Une fois que nous survolons l'élément, nous devons augmenter la largeur et également changer la couleur d'arrière-plan Allons-y et sélectionnons Noble Link avec le pointeur de la souris. Ensuite, configurez avec 215 RAM. En ce qui concerne la couleur d'arrière-plan, je vais utiliser la valeur RGBA Je veux dire, la couleur blanche. Et l'opacité pointe vers. Ainsi, une fois que nous survolons les objets, ils les joueront horizontalement et obtiendront également une nouvelle couleur d'arrière-plan Comme vous pouvez le constater, les éléments ne sont pas alignés au centre de la boîte. Et nous avons également besoin d'une transition pour obtenir cet effet fluide. Alors tout d'abord, alignons-les au centre. Utilisation du centre d'alignement du texte. Nous avons besoin de deux transitions différentes, l'une lors du survol et la seconde pour le lien lui-même. Utilisons donc la transition avec les valeurs toutes les 2,5 s. Et nous devons également faire transition toutes les 0,5 s. Cette deuxième transition nous permettra d' aligner les éléments verticalement un peu plus rapidement. Très bien, donc tout fonctionne bien. Nous avons ici un bel effet de survol. En fait, vous remarquerez peut-être que nous avons une barre de défilement sur le côté droit. Mais ce n'est pas un problème. Cela sera corrigé une fois que nous aurons poursuivi et ajouté une autre section au projet. OK, je vais maintenant styliser un élément de titre. Allons-y donc et sélectionnons-le. Au début. Augmentons sa taille de police, réduisons-la à huit RAM, puis changeons la famille de polices. Dans ce cas, je vais utiliser téléphone appelé Monotone Corrosive Ensuite, je vais m' occuper de la position du titre. Nous devons le placer au centre. Pour cela, je vais utiliser la position absolue plutôt que la position supérieure. Réglons-le sur une largeur de fenêtre d' affichage de 18. Et je vais également définir une position gauche avec une valeur de 50 %. À l'heure actuelle, le titre n' est pas centré. Nous devons le déplacer vers la gauche de 50 % de sa largeur. Et pour cela, nous devons utiliser la propriété de transformation avec la fonction Translate. Dans ce cas, nous devons traduire avec la direction x. Et comme valeur que je vais insérer ici, -50 %. Maintenant, l'élément est parfaitement centré. OK, après cela, créons un effet d'ombre. Je vais utiliser l'ombre du texte. Nous avons besoin de 0,33 fois et de la couleur 888. Ensuite, je vais changer la couleur. Faisons en sorte qu'il soit blanc. Également. Je vais également définir la couleur d'arrière-plan sur le blanc. Puis augmentez la largeur de l'élément. Passons à 85 rem. Bon, maintenant le titre semble bien meilleur. Nous devons le centrer à l' intérieur de la boîte. Et pour cela, utilisons le centre d'alignement du texte. Permet également de créer de l'espace à l'intérieur de la boîte. Je vais régler le rembourrage à 0,8 rem en haut et en bas pour les côtés gauche et droit, soit 1,6 RAM Et je vais aussi arrondir légèrement les coins de la boîte en utilisant un rayon de bordure avec une valeur de 0,8 arrondi avec une valeur de 0,8 arrondi La dernière chose que je vais faire est de réduire légèrement l'opacité Mettons-le à 0,9. Très bien, nous avons terminé avec le titre Passons à autre chose et personnalisons le dernier élément de cette section , à savoir le logo. Tout d'abord, prenons soin de sa position. Je vais le placer en bas , au centre de la page. Utilisons à nouveau la même technique qui a défini la position sur absolue. Définissez ensuite la position supérieure, faites-la à 70 %. En ce qui concerne la propriété de gauche, nous devons la régler à 50 %. Ensuite, nous devons effectuer la transformation à l' aide de la fonction Translate X. Insérons ici -2%. Le logo est donc positionné, et maintenant allons-y et personnalisons-le. Sélectionnons les éléments I et augmentons sa taille de police, lui donnons 15 RAM. Ensuite, je vais changer de couleur. Utilisons ici la valeur RGBA 50 231 255,8. Et je vais aussi utiliser l'ombre du texte. Dans ce cas, je vais utiliser une ombre de texte à plusieurs niveaux. Donc, premier instinct pour votre 0,1 RAM, 0,1 point rem pour RAM. Et ils ont appelé ou D, d, D S pour la seconde ombre. Faisons-le sur le côté gauche. Nous avons besoin ici de valeurs négatives, -0,1 RAM, -0,1 RAM, puis pointons vers Et le même appel. C'est bon, c'est ça Le logo est personnalisé et en fait, avec la première section, nous avons terminé. Passons à la section suivante. 15. Projet 2 - Créer et personnaliser la section clients: La section suivante sera la section réservée aux clients. Il sera composé du titre et de trois cartes différentes. Chacune des cartes comportera quelques éléments différents. Je veux dire, les citations, puis le paragraphe suivi ces visites et l'image du client avec son nom. Très bien, allons-y et commençons à créer le balisage HTML Insérons de nouveaux commentaires, section deux et section deux. Ensuite, ouvrez également l'élément de section avec une section de classe. Je vais créer des éléments de titre H1 avec le titre de la section de classe et avec le contenu Clients. Ouvrez ensuite l'élément div, qui sera l'enveloppe des cartes que je vais attribuer à l' clients de la classe Ensuite, nous avons besoin d'un autre tag DIV, qui sera la carte elle-même attribuée au client de votre classe OK, donc comme nous l' avons dit, nous aurons ici quelques éléments différents. La première sera celle des guillemets, qui seront représentés par l' icône Font Awesome. C'est donc ouvert. L'élément avec une classe est FAS, FAA, guillemet à gauche. Ensuite, nous avons besoin d'un paragraphe avec les textes des clients de la classe. Et puis utilisons plutôt du texte fictif. Ensuite, je vais créer une évaluation client. Nous aurons cinq étoiles. Quatre d'entre eux seront pourvus. Quant à la dernière, seule sa moitié sera remplie. Donc, dans un premier temps, je vais ouvrir la balise div, qui va être l'enveloppe de la note qui lui est attribuée Évaluation des clients par rapport aux éléments ouverts I et attribution d'une classe FAS, d'une étoile Je vais le dupliquer quatre fois. Modifiez ensuite le nom de classe pour le dernier élément. Nous avons besoin d'ici, f k star, à moitié dehors. OK, c'est tout à propos de la note. Ensuite, je vais insérer ici une image. Sélectionnons l'image dans le dossier d' images dont nous avons besoin ici costumer IMG one, et attribuons également un attribut de classe à l'image avec la valeur customer IMG Ensuite, ouvrons la balise d' en-tête H4 avec le nom d'un client de classe Et insérez ici le nom du client. Disons Jane Lee. Très bien, c'est tout pour la première carte. Au total, nous en aurons trois. Allons-y, dupliquons la carte deux fois, puis apportons quelques modifications. Donc ici, pour la cinquième étoile, nous avons besoin d'une étoile de classe A car elle sera également pleine, comme les quatre autres étoiles. Changez ensuite le nom de l' image dont nous avons besoin ici, img2, et modifiez également le nom du client C'est l'Institut, Bob Smith. En ce qui concerne la troisième carte, la cinquième étoile sera vide. Je vais donc changer ici le nom de la classe au lieu de FAS, nous avons besoin ici de FAR Puis d'une étoile, puis j'ai changé le nom de l'image. Nous en avons besoin ici de trois, et aussi comme nom du client, Let's Institute et Brown. Très bien, les trois cartes sont créées et nous devons maintenant personnaliser cette section Créons un nouveau commentaire, section deux et section deux. Sélectionnez ensuite les éléments de section. Et tout d'abord, définissez la largeur et la hauteur. Je vais me fixer à 200 %. Quant à la hauteur, faisons en sorte qu'elle corresponde à 100 % de la fenêtre d'affichage. Avant de commencer cet élément de section, allons-y et diminuons la taille des images car elles sont actuellement deux plus grandes. Allons-y et sélectionnons le client IMG. Je vais les placer en hauteur jusqu'à dix rampes. Je vais également utiliser ici couverture du flux d' objets afin de maintenir la qualité de l'image. OK, après cela, alignons les éléments à l'intérieur de cette section dans des livres de flux. Je vais définir la propriété d'affichage sur flex. Ensuite, nous devons placer des éléments dans la colonne, nous devons donc changer de direction. Faisons une colonne. Ensuite, afin de créer de l'espace autour des éléments flexibles, je vais utiliser la fonction de justification du contenu, Space around. C'est bon, c'est ça. Section 1, elle est personnalisée. Ensuite, je vais m'occuper de l'élément de titre. Sélectionnons-le donc avec le titre de la section de classe. Tout d'abord, je vais augmenter la taille de la police. Faisons-en dix RAM Modifiez également le poids de la police. Je vais faire preuve d'audace. Ensuite, je veux transformer le texte en majuscules N. Enfin, changez la couleur, passez à 999 Ensuite, nous devons placer le titre au centre. Et pour cela, je vais utiliser le centre d'alignement du texte. Diminons également l' opacité, mettons-la à 0,1. Enfin, ajoutez au titre un effet d'ombre en utilisant ombre de texte avec les valeurs en RAM, à exécuter pour la RAM et la couleur AAA. Très bien, donc le titre est stylé. Je trouve que c'est très beau. Alors allons-y et prenons soin des cartes. Tout d'abord, je vais sélectionner l'élément wrapper div, qui possède un wrapper ClassName, Je vais donc placer les cartes horizontalement dans une rangée. Et pour cela, utilisons Flexbox. Ensuite, afin de créer un espace entre les éléments flexibles, utilisons le contenu de justification. Nous dévaluons à intervalles réguliers. Ensuite, pour aligner les éléments au centre, utilisons puis centrons les éléments. D'accord, les éléments sont alignés et nous devons maintenant démarrer la voiture elle-même. Sélectionnons-le. Au début, définissez la largeur, faites-en 35 RAM. Ensuite, je vais régler la hauteur à 50 RAM. Et changez également la couleur de fond, faites-la e. OK, ensuite je vais aligner les éléments à l'intérieur de la carte à l' aide de Flexbox Utilisons donc Display Flex. Ensuite, nous devons placer les éléments dans une colonne. Changeons donc la direction, faisons-en une colonne. Ensuite, centrons les éléments horizontalement en utilisant le centre des éléments. Très bien, à part ça, je vais arrondir les coins de la carte Utilisez border-radius avec une valeur de 0,5 RAM. Je vais également créer de l'espace à l'intérieur de la carte à l' aide d'un rembourrage Réglons-le sur deux RAM sur les quatre côtés. Et enfin, utilisez Box Shadow. Je vais créer une ombre à plusieurs niveaux. Insérons ici une mémoire vive, une mémoire vive plutôt que vers la mémoire vive. Et la couleur ou D, d, D. Et créez également une ombre sur le côté gauche. Nous avons besoin ici de moins d'une pièce, puis encore de moins un rem en mémoire vive et en couleur E. Très bien, donc avec les cartes, nous avons presque terminé Nous devons simplement les aligner d'une manière différente. Ensuite, nous allons personnaliser les éléments à l'intérieur de la carte. Je vais donc modifier la position de la première et de la troisième carte. Je vais placer la première carte légèrement vers le bas. Et pour cela, utilisez, encore une fois, des livres sur les flux. Je vais sélectionner la première carte. Nous avons donc besoin ici de costumer, suivi de la pseudo-classe appelée premier enfant Il sélectionnera la première carte. Et puis, pour placer un peu plus bas, nous devons aligner self avec Value Flex End. Il placera la carte au fond du contenant. Donc, pour l'instant, rien n'est changé car nous devons définir la hauteur de l'enveloppe Attribuons-lui donc la hauteur avec la valeur 70 %. Maintenant, la première carte est placée un peu plus bas. Allons-y et déplaçons également la troisième carte. En fait, je vais dupliquer ce code, puis modifier le premier enfant, le dernier enfant Et aussi, au lieu de suivre le flux, et nous devons faire preuve de flexibilité, commencer. Très bien, donc les cartes sont alignées. Allons-y et commençons à personnaliser les éléments à l'intérieur de la carte. Commençons par les citations. Je vais le sélectionner, mais c' est la classe FA, citation à gauche. Augmentons la taille de la police, adaptons-la à la RAM et changeons également la couleur. Je vais utiliser ici la couleur f080f. Très bien, je vais maintenant m' occuper du paragraphe. Augmentons sa taille de police, faisons-en 1,8 RAM. Ensuite, je vais créer de l'espace en haut et en bas en utilisant la marge. Mettons-le à 2,5 rem et à zéro. Et je vais aussi justifier le texte en utilisant text-align OK, avant de passer à autre chose et de styliser les notes, je vais créer une petite indentation Je vais donc sélectionner la première lettre du paragraphe. Sélectionnons le paragraphe lui-même , puis attachons à celui-ci la première lettre , à savoir les pseudo-éléments. Ensuite, marge définie sur le côté gauche. Faites-en une course. OK, c'est tout à propos du paragraphe. Passons à autre chose et commençons les évaluations. Sélectionnez des éléments, augmentez la taille de la police, faites-la fonctionner. En ce qui concerne la couleur, utilisons à nouveau f080f OK, donc les évaluations semblent bonnes et nous devons passer à l'image. Créons un espace en haut et en bas de l'image et arrondissons-la également. Nous avons besoin d'une marge avec des valeurs à exécuter et zéro. Ensuite, pour arrondir l'image, nous avons besoin d'un rayon de bordure avec une valeur de 50 %. OK, c'est stupide à propos des images. Enfin, nous devons personnaliser le nom du client. Nous allons donc sélectionner cet élément. Augmentez la taille de la police, atteignez-la au format Ram et augmentez légèrement la police à l'aide de font-weight 700 Très bien, alors c'est ça. Nous avons presque terminé cette section. La seule chose que je veux faire est de créer un petit effet de survol Une fois que nous avons survolé les cartes, je veux changer l'ombre Nous allons donc sélectionner la carte avec le pointeur de la souris. Définissez ensuite box-shadow. Nous avons besoin ici des valeurs suivantes pour les exécuter deux fois, puis trois rem, et nous les appelons d d t. Ensuite, nous avons besoin de moins deux REM. Encore une fois moins deux, puis trois rem et la couleur II. En plus de cela, utilisons transition avec l'ombre de la boîte de valeurs et la durée de 0,5 s. Très bien, nous avons donc ici de jolis effets de survol Et en fait, avec cette section, nous en avons terminé. Nous pouvons maintenant passer à autre chose et nous occuper de la suivante. 16. Projet 2 - Créer et style la section d'équipe: Dans la section suivante, nous aurons à nouveau des cartes. Cette section sera consacrée à l'équipe. Il sera composé du titre et trois cartes représentant les membres de l'équipe. Ainsi, chaque courbe inclura l'image du membre de l'équipe. Ensuite, nous aurons un nom complet avec le poste du membre de l'équipe, suivi de ces compétences. Et nous aurons également un bouton au bas de la voiture. En plus de cela, vous pouvez voir ici un autre bouton dans le coin supérieur droit de la voiture. Et si je clique dessus, cette ligne tournera et certaines informations s'afficheront correctement. OK, c'est tout pour cette section. Allons-y et commençons à créer le balisage HTML. Je vais insérer vos nouveaux commentaires, section 3. Et la troisième section. Ouvrez ensuite l'élément de section avec la section 3 de la classe et créez la balise de titre H1 Je vais l'attribuer à la même classe que celle que nous avons utilisée pour le titre de la section précédente. Parce que les deux auront les mêmes styles. Attribuons donc à chaque titre de section le contenu. Je vais insérer votre équipe. D'accord ? Ensuite, nous devons créer des cartes. Alors tout d'abord, ouvrez une balise div, qui sera le wrapper Je vais attribuer un wrapper d'équipe de classe. Ouvrez ensuite un autre div, qui sera la carte elle-même. Désignons-y un membre de l'équipe de classe. La carte sera composée de deux éléments différents. La personne sera l'image. Ouvrons donc l'élément image et sélectionnons le membre de l'équipe au format JPG d'un point. Je vais également attribuer IMG à un membre de l'équipe de classe. Très bien, je vais maintenant ouvrir la balise de titre H2, qui inclura le nom complet et le poste du membre Je vais donc attribuer un nom à un membre de l'équipe de classe. Insérez votre Nick Smith. Ensuite, je vais ouvrir la balise span et insérer ici la position du membre de l'équipe. Écrivons designer. Après cela viennent les compétences. Je vais créer une liste. Attribuons des compétences aux membres de l'équipe de classe. Donc, dans l'ensemble, nous aurons cinq éléments de liste. Créons donc le premier. Ce sera Photoshop. Écrivons ici l' abréviation P, S, puis dupliquons l'élément LI quatre fois et changeons le contenu. Le second sera Figma. Ensuite, nous aurons HTML5, CSS3, puis Ai, qui signifie Très bien, ensuite je vais créer un bouton pour les projets. Ce sera l'élément de lien. Attribuons à la classe des projets btn et, comme contenu ici, des projets Bon, maintenant je vais m' occuper de l'histoire du membre de l'équipe. Dans un premier temps, je vais créer un bouton. Ouvrons donc la balise div avec une histoire de classe btn. En plus de cela, je vais utiliser un autre attribut appelé title. Certains textes apparaîtront une fois que nous survolerons le bouton. Insérons donc mon histoire. Ensuite, nous avons besoin d'une autre balise div, qui sera la ligne attribuée à chaque ligne btn de l'histoire du cluster Et laissez cet élément div vide. D'accord, et donc cette partie sera composée de deux éléments différents, elle aura un titre et un paragraphe. Créons un élément div avec class story. Ce sera l'emballage. Ouvrez ensuite H4 en masquant les éléments avec un titre d'histoire de classe et le contenu me concernant. Ensuite, nous avons besoin d' un paragraphe avec le paragraphe conservateur de la classe. Ensuite, c'est à vous de décider, un faux texte. Très bien, donc la première carte est prête, comme nous l'avons dit, au total, nous en aurons trois. Je vais donc le dupliquer deux fois , puis apporter quelques modifications. Je vais changer le nom de l'image. Ce sera aussi un membre de l'équipe. Modifiez ensuite le nom complet dont nous avons besoin ici. Disons Bob Brown. Pour ce qui est des compétences, insérons ici After Effects, puis PR, qui signifie Premiere Pro. Laissons ensuite le HTML et CSS tels qu'ils sont pour le dernier élément Insérons-les ici, disons Inkscape OK, c'est tout pour le deuxième membre de l'équipe. Apportons quelques modifications. Pour le troisième, nous avons besoin d'un membre de l'équipe qui s'appelle John Doe ? Ensuite, je vais changer la position dont nous avons besoin ici. Développeur. En ce qui concerne les compétences, insérons votre JavaScript. Alors React est. Le prochain ne sera pas JS mais MongoDB. Et pour le dernier élément, insérons Python. D'accord, le balisage HTML est donc prêt, et nous pouvons maintenant commencer à personnaliser cette section Allons-y et créons de nouveaux commentaires. Troisième section. Et la troisième section. Définissez ensuite la largeur et la hauteur. Je vais régler la largeur à 100 %. Quant à la hauteur, faisons en sorte qu'elle corresponde à 100 % de la fenêtre d'affichage. Ensuite, je vais aligner le titre et le rappeur à l'aide de Flexbox. Nous devons régler l'affichage pour qu'il soit flexible. Alors. Nous devons placer les éléments flexibles verticalement dans deux points, nous devons donc changer de direction. Faisons-en une colonne. Ensuite, afin de créer un espace entre les éléments, nous devons justifier le contenu avec l'espace entre les valeurs. Enfin, créez de l'espace en haut et en bas de cette section. Utilisons du rembourrage. Réglons-le sur cinq RAM et zéro. Très bien, voyons les éléments de cette section. Ensuite, nous aurons un titre qui est déjà stylé. Et avant de passer à l'élément suivant, je vais récupérer les styles de la section précédente et les coller dans des styles courants. Nous allons rendre le code plus clair et plus compréhensible. OK, allons-y et sélectionnons Team Wrapper. Je vais aligner les cartes horizontalement. Utilisons donc Flexbox. Alors. Je vais créer un espace entre les cartes en utilisant de manière uniforme l' espace de contenu de justification. Et aussi, je vais placer les cartes verticalement au centre en alignant les éléments au centre. En plus de cela, je vais également définir la taille du rappeur car nous allons aligner les cartes comme c'était le cas dans la section précédente. Réglons donc la hauteur à 70 %. D'accord ? Après cela, sélectionnons la carte elle-même. Je veux dire, un membre de l'équipe. Tout d'abord, définissons cette largeur, lui donnons 35 RAM, puis changeons la couleur d'arrière-plan. Je vais utiliser votre couleur F, F, F, E, E. OK, ensuite je vais créer l' espace à l'intérieur de la carte. Utilisons donc un rembourrage avec les valeurs suivantes. Nous avons besoin d'un run, puis d'une RAM. Ensuite, faites en sorte que le rembourrage se trouve en bas. Encore une fois, utilisez une seule course. En plus de cela, utilisons Box Shadow. Je vais utiliser Box Shadow à plusieurs niveaux. Insérez donc votre 1RM, puis encore une fois, une RAM plutôt que deux, et ils l'appelleront t, t, t. Quant à la deuxième ombre, elle sera placée sur le côté gauche Utilisons donc vos valeurs négatives moins une RAM, puis encore une fois moins une RAM pour RAM et la couleur E. accord ? Donc, avant de poursuivre, je pense qu'il serait préférable de cacher l'histoire pendant un certain temps Cela rendra notre processus de travail plus pratique. Sélectionnons donc l'histoire et assignons à n'en afficher aucune. D'accord ? L'histoire est donc cachée. Je vais maintenant styliser chacun des éléments de la voiture. Allons-y et commençons par l'image. Je vais définir sa largeur. Faisons-le à 100 %. De plus, je vais arrondir légèrement les coins de l'image en utilisant rayon de bordure avec la valeur 0,5 rampe OK, je vais maintenant personnaliser le nom du membre. Alors sélectionnons-le. D'abord. Augmentons la taille de la police, faisons-en 2,3 RAM. Ensuite, je vais rendre le téléphone plus audacieux en utilisant font-weight Changez également la couleur. Je vais utiliser votre couleur 796717. Et créez également de l'espace en haut en utilisant la marge supérieure avec une valeur à exécuter. OK, donc le nom semble bon. Passons à autre chose. Et aux clients, la position du membre. Sélectionnons le nom suivi de la plage. Et puis modifiez la taille de la police, faites-en 1,7 rem. Très bien, passons à autre chose et prenons soin des compétences. Je vais placer les éléments de la liste horizontalement dans une rangée. Donc, dans un premier temps, sélectionnez les éléments UL. Je vais utiliser à nouveau Flexbox. Nous devons définir la propriété d'affichage sur flex. Il placera les éléments flexibles dans une rangée Ensuite, pour créer un espace entre les éléments, utilisez le contenu de justification avec un espace entre les valeurs. En plus de cela, je vais créer l'espace en haut et en bas. Utilisons donc la marge, réglons-la sur un rem en haut plutôt que sur zéro, plutôt que sur un ram en bas. Et puis à nouveau zéro. Très bien, les éléments de la liste sont alignés et maintenant je vais les styliser Sélectionnons l'élément LI, changeons la taille de la police, ramenons à 1,5 RAM, puis changeons la couleur. Je vais utiliser votre couleur 5050, puis à nouveau 50. OK, allons-y et allons vers le bas. Sélectionnons-le. Tout d'abord, je vais changer la couleur de fond. Utilisons ici F, un b348. Changez ensuite la couleur du texte, faites-le blanc. Je vais également créer de l' espace à l'intérieur du bouton. Utilisons le rembourrage et réglons-le à 0,5 rem en haut et en bas, puis à 1,5 rem sur les côtés gauche et droit En plus de cela, je vais arrondir le bouton en utilisant le rayon de bordure avec une valeur de cinq rem Donc, comme vous pouvez le voir, le bouton « Tout ou D » semble bon. Allons-y et augmentons la taille de la police. Faites-en 1,5 RAM. Je vais aussi créer un espace entre les utilisant le point d' espacement des lettres pour les enrouler. Bon, c'est tout pour la première partie de la carte. Ensuite, je vais personnaliser le bouton, qui sera placé dans le coin supérieur droit de la carte. Alors allons-y et sélectionnons story btn. Et tout d'abord, définissez sa largeur et sa hauteur. Je vais les régler tous les deux sur Fall Run, puis changer la couleur d'arrière-plan, le faire aussi. Nous avons donc ici le bouton. Tout d'abord, nous devons fixer sa position. Réglons donc sa position sur absolue. Ensuite, afin de l'aligner en fonction de l'élément parent, nous devons définir la position relative de la carte. Ensuite, définissez les propriétés supérieures et appropriées. Je vais les régler tous les deux à moins un représentant. D'accord ? Le bouton est donc positionné de la bonne manière. Faisons en sorte qu'il soit arrondi. Utilisez le border-radius. Nous dévaluons cinq tours. OK, donc pour l'instant, c'est tout à propos du bouton. Maintenant je vais m' occuper de la ligne. Allons-y donc et sélectionnons-le. Définissons sa largeur et sa hauteur. Fabriquez avec 100 %. Quant à la hauteur, je vais la régler à 0,1 RAM. Et changez également la couleur d'arrière-plan et rendez-la blanche. Donc, pour le moment, la ligne n'est pas visible car elle est placée en haut du bas. Nous devons donc fixer sa position. En fait, je vais le placer au centre du bouton. Et pour cela, utilisons Flexbox. Maintenant, la ligne est visible et la prochaine chose que je veux faire est de créer un petit espace à l'intérieur du bouton. Utilisons un rembourrage avec la valeur 0,5 RAM. Et changez également le type du plus grossier, faites-le pointer. Très bien, avec un bouton, c' est enfin terminé. Maintenant, je vais m' occuper de ces tori, qui sont cachés pour l'instant. Donc, dans un premier temps, rendons-le visible. Je vais me débarrasser de tout affichage à partir d'ici. Comme vous pouvez le voir maintenant, il est visible et nous devons le personnaliser. Définissons sa largeur et sa hauteur. Je vais les faire tous les deux à cent pour cent. Et puis changez la couleur de fond. Utilisons votre valeur RGBA. Insérons ici 2536969, puis l' Ensuite, je vais m' occuper de sa position. Il doit être étendu à l'ensemble de la carte. Réglons donc la position sur absolue. Ensuite, définissez les propriétés de gauche et de haut, toutes deux nulles. Ensuite, alignons les éléments de cette histoire à l' aide de flexbox. Je vais les placer au centre. Définissons donc la propriété d'affichage sur flex. Ensuite, nous devons changer de direction, en faire une colonne. Ensuite, pour placer les éléments flexibles au centre, à la fois horizontalement et verticalement, fois horizontalement et verticalement, je vais utiliser justify-content center et aligner les éléments au centre et aligner Enfin, créons de l' espace dans l'histoire. Utilisons le rembourrage et réglons-le sur Ram Alright. Avec ce Tory, je veux dire, avec l' emballage, Allons-y et personnalisons le titre et le paragraphe. Sélectionnons ce titre tori et augmentons sa taille de police faire une RAM pleine. Ensuite, je vais créer le dossier de polices en utilisant font-weight 700 Changez la couleur et faites-la blanche. De plus, je vais créer de l'espace en bas en utilisant la marge inférieure, que nous dévaluons pour courir OK, après cela, sélectionnons le paragraphe. Augmentez la taille de la police, faites-la 1,8 gramme. Ensuite, je vais changer de couleur. Disons-le e. De plus, je vais justifier le texte en utilisant text-align, justify Ensuite, créez un espace entre les lettres en utilisant une rampe d' espacement des lettres de 0,1. Très bien, le paragraphe est donc également personnalisé. La seule chose que je vais faire est de créer une petite empreinte Et pour cela, je vais utiliser du texte. La propriété d'indentation serait dévaluée pour être exécutée. D'accord, cela étant dit en ce qui concerne l'histoire, nous devons maintenant la faire fonctionner. Mais avant cela, nous avons ici un petit problème. Le bouton est placé derrière ce tori. Donc, pour résoudre ce problème, je vais utiliser la propriété z-index Nous devons le régler sur une valeur supérieure à zéro, disons 50. Très bien, nous sommes donc prêts à faire fonctionner ce bouton. Alors je vais utiliser JavaScript. Au début. Cachons les histoires pour ça. Je vais utiliser Transform avec la fonction d'échelle. Pour masquer l'élément, nous devons mettre l' échelle à zéro. D'accord, comme vous pouvez le voir, le stockage ou le masquage Passons au fichier JavaScript et tout d'abord aux boutons sélectionnés. Pour cela, je vais utiliser le sélecteur de requêtes, toutes les méthodes. Nous devons spécifier ici le nom de la classe, l'histoire, le BTN. En fait, la méthode all du sélecteur de requêtes renvoie la liste des nœuds, qui est un objet semblable à un tableau. Chaque élément possède son numéro d' index ainsi que la liste elle-même en tant que propriété de longueur. OK, nous devons donc parcourir ces boutons et les attacher à chacun d'eux et à l' écouteur d'événements avec l'événement Click Pour parcourir la liste, je vais utiliser l'un des appels de méthodes auxiliaires du tableau pour chacune Cela nous permet d' exécuter une fonction pour chaque élément de la liste séparément. Allons-y et utilisons forEach. Il prend un paramètre qui va être la fonction de rappel Et cette fonction sera exécutée pour chaque élément de la liste. Cette fonction de rappel elle-même prend un paramètre, qui sera l'élément actuel de la liste, je veux dire le bouton Nous allons donc insérer votre btn. Ensuite, nous devons associer un écouteur d'événements au bouton. Précisons ici le type d'événement qui sera une clique. Et en plus de cet écouteur d'événements à l'exception du deuxième paramètre, qui est la fonction flèche, je veux dire la fonction de rappel Et il sera exécuté une fois que nous aurons rapidement intégré. OK, maintenant allons-y et testons si l'événement de clic fonctionne, je vais courir vers la console. Disons que vous avez cliqué. Donc, si j'inspecte la page, que je passe à l'onglet Console, puis que je clique sur le bouton, on cliquera sur nous dans la console Cela signifie donc que tout fonctionne bien et nous devons maintenant faire en sorte que l'histoire fonctionne. Je veux dire, nous devons l' afficher, le décliquer et nous devons également faire pivoter le bouton Laissez-moi donc vous expliquer ce que nous allons faire. Nous allons créer une nouvelle classe et du CSS, et nous allons définir des styles avec cette classe. Ensuite, nous ajouterons ce nom de classe à l'histoire et au bouton lui-même. Nous allons le faire en utilisant la méthode de bascule car nous devons afficher l'histoire dès le premier clic et la masquer lors du suivant Donc, comme nous l'avons dit pour cela, nous devons utiliser une méthode appelée toggle Allons-y donc et ajoutons une nouvelle classe en bas. Nous avons besoin de BTN. Et maintenant, nous devons utiliser l'une des propriétés appelées liste de classes. Cela nous donne tous les cours que suit la femme. Cela nous permet également d'accéder aux différentes méthodes telles que le basculement, l'ajout et la suppression Nous avons besoin d'une liste de classes suivie de la méthode toggle. À l'intérieur de la parenthèse, nous devons spécifier le nom de la classe Disons que c'est du changement. Alors maintenant, si j'affiche des éléments et une histoire fine, BTN Et puis cliquez dessus Vous verrez qu'il obtient le changement de classe au clic. Et puis sur la couche suivante, elle est supprimée. OK, maintenant nous pouvons faire pivoter le bouton Onclick. Passons au fichier CSS et nous devons sélectionner story btn avec le changement de classe Utilisez ensuite Transform avec la fonction de rotation. Je vais faire pivoter les éléments de 405 degrés. Ensuite, utilisez la transition avec transformation et d'une durée 0,5 s. Donc, si je clique sur le bouton, il pivotera bien. Maintenant, de la même manière, nous devons présenter l'histoire. Revenons au fichier JavaScript et ajoutons également des modifications à cette histoire. En fait, cette Tori est la sœur du bouton. Je vais donc utiliser l'une des propriétés appelées next element sibling Nous avons besoin de btn suivi de l'élément frère suivant. Encore une fois, nous devons utiliser la liste des classes suivie de la méthode toggle Et comme nom de classe, nous devons insérer votre modification. OK, passons au fichier CSS et sélectionnons l'histoire avec modification. Utilisez ensuite transform. Afin de rendre l'histoire visible, je vais réduire la taille à un. Et utilisez également la transition avec les valeurs toutes et 0,5 s. Très bien, maintenant si je clique sur le bouton, l'histoire s'affichera Cela fonctionne donc bien, mais ce n'est pas ce que nous voulons qu'on prenne en compte. L'échelle augmente à partir du centre. Mais dans notre cas, nous devons l'augmenter à partir du coin supérieur droit de la carte. Pour y parvenir, nous devons modifier la propriété d'origine de la transformation. Par défaut, il est placé au centre et, dans notre cas, il sera placé en haut à droite. OK, maintenant ça vient du coin supérieur droit, mais ce n'est quand même pas ce que nous voulons. Afin de rendre l' effet beaucoup plus agréable. Je vais manipuler avec Border-Radius. Par défaut, je vais définir le rayon de bordure sur 50 RAM. Il appartient au coin supérieur gauche. Ensuite, nous avons besoin de zéro pour le coin supérieur droit. Et puis 50 ont couru pour le coin inférieur droit et pour le coin inférieur gauche également. De plus, je vais définir le rayon de la bordure à zéro avec le changement de classe. Bon, maintenant tout fonctionne parfaitement et avant de terminer cette section, je vais faire quelques autres choses. Je vais aligner les voitures différemment. Je vais placer la première carte en haut du rappeur. Pour ce qui est de la troisième carte, je vais la placer au bas de l'emballage Allons-y et sélectionnons la première carte en utilisant l'une de ces pseudo-classes appelées premier enfant Pour placer la carte en haut de l'emballage, utilisons une ligne self avec la valeur flex start Ensuite, dupliquons ce code. Je vais changer le premier enfant, le dernier enfant. De plus, au lieu d'un démarrage flexible, nous devons faire preuve de flexibilité. Comme vous pouvez le voir, les cartes sont alignées. Enfin, je vais créer un petit effet de survol. En fait, je vais réduire l'opacité par défaut. Mettons-le à 0,7. Augmentez ensuite de huit en survolant. Nous allons donc sélectionner un membre de l'équipe avec le pointeur de la souris. Réglez l'opacité sur un , puis utilisez la transition avec les valeurs opacité 0,5 s. OK, donc enfin, nous avons terminé Nous avons terminé de travailler sur cette section. Passons donc à autre chose et occupons-nous de la suivante. 17. Projet 2 - Créer et styliser la section de conception et le pied de page: La section suivante sera la section de contact. Jetons un coup d'œil au projet terminé. Comme vous pouvez le constater , la section de conduite comprend trois parties différentes. Nous avons une image sur le côté gauche et deux champs de saisie sur le côté droit. Et en bas, nous avons un petit pied de page avec quelques textes de copyright Les deux premières parties, je suis dans l'image et les champs de saisie sont placés dans un environnement 3D et ils produisent un bel effet de survol En fait, je tiens à mentionner ici une chose pendant que nous travaillions sur le projet, j'ai remarqué que parfois, pour une raison quelconque la page entière passe sur le côté gauche, et cela se produit dans Google Chrome. La solution à laquelle j' ai pensé était donc d' attribuer le trop-plein caché au conteneur plutôt qu'au corps En plus de cela, je vais définir la largeur. Faisons-le à 100 %. C'est bon, c'est ça. Allons-y et commençons à créer le balisage HTML. Je vais insérer votre nouvelle section de commentaires fin de la section quatre. Ensuite, ouvrez l'élément de section avec une section de classe car cet élément de section sera composé de deux parties différentes. La première partie que je vais créer est le titre, qui sera similaire aux titres des sections précédentes Ouvrons donc l'élément de titre H1 avec un titre de section de classe Et en tant que contenu, insérons votre contact. Suivant. Je vais m' occuper du formulaire. Mais tout d'abord, créons une balise div qui sera le conteneur du formulaire Utilisons ici un récipient en mousse de classe. Insérez ensuite une image. Je vais sélectionner Form IMG point PNG dans le dossier des images. Et attribuons également à la classe d'éléments d'image le formulaire IMG. D'accord ? Ensuite, je vais créer le formulaire lui-même. Attribuons-lui le formulaire de contact de classe. La formule se compose donc de quatre éléments différents. Nous aurons deux champs de saisie plus de la zone de texte et également du bouton d'envoi. Créons donc un élément d'entrée avec du texte de type. Je vais également utiliser votre attribut d'espace réservé avec la valeur de votre nom Ensuite, je vais dupliquer cette ligne de code. Modifiez l'attribut de type lorsqu'il s'agit d'un e-mail. En ce qui concerne l'espace réservé, je vais insérer ici votre e-mail Vient ensuite la zone de texte. Je vais lui attribuer un attribut d'espace réservé avec la valeur de votre message D'accord ? Ensuite, je vais créer un bouton de soumission, et je vais le faire en utilisant des éléments de saisie, mais avec le type submit. Et nous avons également besoin d'une valeur ici, qui va être envoyée. D'accord, le dernier élément que nous devons créer est le pied de page Je suis dans le paragraphe. Insèrons-le en dehors de l'élément de formulaire avec le copyright de classe. Ensuite, insérez des textes tels que le copyright, suivi du signe du copyright, qui sera l'entité HTML5 Nous avons besoin ici d'une esperluette, d'une copie, d'un point-virgule, puis de coder et de créer Et également tous droits réservés. C'est bon, c'est ça. Tout est prêt pour démarrer, pour démarrer cette section. Allons-y et insérons de nouveaux commentaires dans le fichier CSS. Nous avons besoin de la section 4. Puis fin de la section quatre. Sélectionnez ensuite les éléments de la section et définissez sa largeur et sa hauteur. Je vais régler la largeur à 100 %. Quant à la hauteur, faisons en sorte qu'elle représente 130 % de la fenêtre d'affichage. D'accord. Ensuite, je vais aligner le titre de la section, le conteneur du formulaire et le pied de page à l'aide de flexbox Nous avons besoin de display flex Ensuite, nous devons placer les éléments verticalement dans une colonne. Je vais donc changer de direction. Faisons passer l'appel. Également. Afin de créer de l'espace autour des éléments flexibles, utilisons Justify Content Space around. Et puis pour placer les éléments horizontalement au centre, utilisons aligner les éléments au centre. D'accord, c'est tout à propos de cet élément de section. Passons à autre chose et personnalisons le conteneur du téléphone. Dans un premier temps, définissons cette largeur et hauteur. Faisons huit pour cent de largeur. Pour ce qui est de la hauteur, je vais la fixer à 40 %. Et changez également la couleur d'arrière-plan. Utilisons votre couleur ou E5, E9, F, F. D'accord, F. D'accord, nous devons maintenant placer l'image et les champs de saisie côte à les champs de saisie Et pour cela, je vais utiliser à nouveau Flux Books. Nous avons besoin de Display Flex. Ensuite, pour placer verticalement les éléments au centre, utilisons le centre d'alignement des éléments. Ensuite, créez un espace entre les éléments en utilisant l'option Justifier l'espace de contenu de manière uniforme. Très bien, enfin, créons une petite ombre et arrondissons légèrement le récipient Je vais donc utiliser box-shadow. Ce sera l'ombre à plusieurs niveaux. Insérons donc ici 0,3 RAM deux fois, puis pointons vers la RAM et la couleur CCC Pour ce qui est de la deuxième ombre, je vais la placer sur le côté gauche. Nous devons donc utiliser des valeurs négatives, -0,1 gramme deux fois plus que zéro pour la RAM et la même couleur Et utilisez également border-radius avec la valeur 0,5. Rampe. Très bien, nous pouvons maintenant personnaliser l'image. Allons-y donc et sélectionnons-le. Et définissons d'abord sa largeur. Je vais faire 55 rem. Ensuite, je vais changer la couleur de fond. Dans ce cas, utilisons la valeur RGBA. Nous avons besoin ici de 50231255 et de l'opacité 0,8. Et créez également de l'espace à l'intérieur des éléments à l'aide d'un rembourrage Faisons cinq rem sur les quatre côtés. Bien, passons à autre chose et ajoutons quelques styles supplémentaires à l'image. Je vais réduire son opacité. Mettons-le à 0,8, créons également un effet d'ombre. Ce sera sur le côté gauche. Nous avons donc besoin ici de moins trois RAM que de trois RAM pour la RAM et la couleur AAA. Et créez également un petit rayon de bordure. Réglons-le à 0,5 tour. Très bien, passons à l'image maintenant, je vais personnaliser un élément de formulaire Sélectionnons-le et définissons sa largeur. Je vais faire 45 RAM. Maintenant, changez la couleur d'arrière-plan, rendez-la blanche. OK, ensuite, je vais aligner les éléments à l'intérieur du formulaire. Et pour cela, simplifions à nouveau Flexbox. Réglez l'affichage pour qu'il soit flexible, puis changez de direction, placez-le en colonne afin d' aligner les éléments verticalement. On considère donc que les éléments sont placés verticalement dans une colonne. Allons-y et ajoutons quelques styles supplémentaires au formulaire. Je vais créer de l'espace à l'intérieur de l'élément à l' aide d'un rembourrage Faisons-en trois RAM. Définissez ensuite le rayon de bordure de 2,5 RAM. Et je vais aussi créer une ombre. Les valeurs sont trois fois pour la RAM, puis pour la RAM avec la couleur AAA. Très bien, c'est tout à propos de l'élément de formulaire. Passons à autre chose et personnalisons les champs de saisie. En fait, nous avons ici deux entrées la zone de texte et également le bouton d'envoi, qui est représenté par l'élément de saisie. Tous ces éléments auront quelques styles communs. Allons-y et sélectionnons saisie ainsi que la zone de texte. Tout d'abord, je vais définir la marge et le rembourrage. Nous devons créer de l'espace autour des éléments et également à l'intérieur de ceux-ci. Réglons donc la marge à une RAM. En ce qui concerne le rembourrage, je vais également le régler sur un rem Ensuite, je vais changer la taille de la police, en faire 1,3 RAM. Je vais également créer un espace entre les lettres. Réglons-le à 0,1 RAM. Débarrassez-vous ensuite de la bordure par défaut. Je vais le régler sur aucun. Je vais arrondir les coins. Configurons border-radius pour qu'il s'exécute. Enfin, je vais créer Box Shadow. Dans ce cas, nous avons besoin d'une ombre du côté intérieur. Je vais donc insérer votre encart. La valeur est 0,1, rem, 0,1 RAM, puis pointez sur RAM et la couleur di, di, di. Et je vais aussi créer la même ombre sur le côté gauche. Il me semble donc que vous avez inséré -0,1 RAM, -0,1 RAM plutôt que 0,2 rem, et de la Très bien, c'est tout pour les styles courants. Maintenant, je veux personnaliser la zone de texte Le bouton séparément. Commençons par une zone de texte. Comme vous le savez, nous pouvons modifier la taille de la zone de texte manuellement, mais cela gâchera alors la mise en page. Je souhaite donc limiter sa largeur et sa hauteur. Allons-y et sélectionnons la zone de texte. Je vais définir la hauteur maximale et aussi la hauteur minimale. Réglons la hauteur maximale à 15 RAM. Quant à la hauteur moyenne, je vais la régler à dix RAM. En plus de cela, je vais définir la largeur maximale et la largeur minimale Définissons donc une largeur maximale à 100 %. En ce qui concerne la largeur minimale, faisons-la faisons-la Maintenant, cela fonctionne beaucoup mieux. Passons à autre chose et lançons le bouton d'envoi. Sélectionnons-le à l'aide de l'attribut type. Dans ce cas, je vais sélectionner le formulaire de contact suivi des éléments de saisie. Et entre crochets, nous devons spécifier le type comme Soumettre. Changeons la couleur de fond. Utilisons ici RGBA, 50231255 et 0.8 pour changer également la couleur, la rendre blanche Maintenant, le bouton est bien meilleur. Allons-y et ajoutons-y d'autres styles. Je vais rendre la police plus audacieuse. Réglons donc l'épaisseur de la police sur Boulder. Créez également un espace entre les lettres. Faites-le 0,5 rem. Et enfin, changez le type du plus grossier, indiquez-le Très bien, le bouton est donc personnalisé et avant de continuer, je vais y ajouter un petit effet de survol Prenons donc ce sélecteur à partir d'ici. Et survolez-le. Je vais changer la couleur de fond. Passons à 327ff. Ensuite, utilisez une transition avec couleur de fond et une durée de 0,5 s. Très bien, la formule est donc personnalisée Et avant de poursuivre et de commencer le paragraphe ci-dessous, je vais créer quelques effets 3D. Tout d'abord, pour créer un environnement 3D, nous devons utiliser l'une des propriétés appelées perspective. Nous devons l'attribuer à l'élément parent, qui est le récipient en mousse. Définissons donc la perspective 200 fois. En général, une propriété potentielle définit la distance entre l'élément et l'utilisateur. Maintenant, nous devons faire pivoter les deux éléments. Je suis dans l'image et dans la forme. Je vais donc utiliser Transform. Avec fonction de rotation. Nous devons faire pivoter les éléments verticalement selon l'axe y. Instituons 20 degrés. Ensuite, nous avons besoin de la même rotation de transformation pour le formulaire. Mais dans la direction opposée, il nous faut -20 degrés. Très bien, comme vous pouvez le voir, les éléments sont pivotés et la seule chose que nous avons à faire est de créer un effet de survol. Je vais déplacer les éléments légèrement vers le haut une fois que nous les survolerons Et je vais aussi changer l'ombre. Allons-y et sélectionnons Form IMG avec le pointeur de la souris. Ensuite, utilisez Transform. Nous avons besoin ici de la fonction Traduire avec la direction y. Donc, pour déplacer l'élément vers le haut, nous devons insérer votre valeur négative, disons moins deux rampes. Et nous devons également faire pivoter à nouveau y de 20 degrés. Ensuite, je vais changer l'ombre de la boîte. C'est Institute ou moins cinq RAM plutôt que cinq RAM. Bélier. Et la couleur AAA. Utilisons également la transition avec une valeur de 0,5 s. Ensuite, nous avons besoin du même effet de survol avec l'élément de formulaire Nous allons donc sélectionner le formulaire de contact avec le pointeur de la souris. Ensuite, je vais récupérer ces styles à partir d'ici. Nous devons ici changer 20 degrés en -20 degrés. Et aussi, au lieu de moins cinq RAM, nous avons besoin de cinq disques. Utilisons également la transition avec les valeurs 0 et 0,5 s. Très bien, donc tout semble plutôt bien Et la seule chose que nous avons à faire est de personnaliser ce paragraphe ici. Nous allons donc le sélectionner avec le nom de classe copyright. Augmentez ensuite la taille de la police, passez à Ram. Modifiez l'espacement des lettres. Faites-le pointer vers la RAM. Je vais également définir la couleur sur 444 et créer un espace en haut en utilisant la marge supérieure avec la valeur cinq rampes. Très bien, c'est donc tout à propos de la section contact. Nous en avons terminé et nous avons déjà créé toutes les sections de ce projet. Maintenant, la prochaine chose que je vais faire est de faire en sorte que le NEP fonctionne Et je vais aussi créer un bouton qui nous permettra de défiler vers le haut en douceur 18. Projet 2 - Créer un bouton de défilement vers le haut et faire fonctionner la barre de navigation: Très bien, allons-y et commençons par la navigation. Nous avons ici quatre éléments de navigation différents et leurs sections appropriées. Donc, une fois que j'ai cliqué sur les éléments de navigation, nous devrions accéder facilement à la section correspondante. Pour ce faire, nous devons connecter les liens de navigation à ces sections à l'aide des attributs h reference et ID. Les valeurs de ces attributs doivent correspondre. Allons-y donc et attribuons des attributs de référence à tous les liens nofollow Le premier va rentrer chez lui. Ensuite, nous aurons des clients. La prochaine sera l'équipe en tant que corps. Le dernier sera le contact. Ensuite, nous devons attribuer aux quatre éléments de la section des attributs id avec les mêmes valeurs. Assignons donc à la première section, insérez votre domicile. Ensuite, pour la deuxième section, ce seront les clients. Ensuite, nous aurons une équipe. Et enfin, le contact. D'accord, alors maintenant si je clique sur les éléments de navigation, nous allons accéder à la section appropriée. Mais pour l'instant, sans aucun effet fluide. Pour résoudre ce problème, nous devons utiliser l'une des propriétés appelées comportement de défilement, et nous devons l'attribuer à l'élément HTML. La valeur va être uniforme. Maintenant, si nous cliquons sur les liens de navigation, nous naviguerons en douceur. Très bien, passons maintenant à la navigation. Comme je l'ai promis, nous allons créer un bouton fixe qui nous permettra de faire défiler la page jusqu'à la première section. Je veux dire chez moi. Tout d'abord, créons un bouton dans le fichier HTML. Ce sera l'élément de lien. Attribuons-lui une classe, faites défiler BTN vers le haut. Ensuite, je vais insérer ici l'icône Font Awesome. Attribuons aux classes FAS, FAA, flèche vers le haut. Ensuite, sélectionnez-le dans le fichier CSS. Tout d'abord, définissons la largeur et la hauteur. Je vais leur faire cinq rem à tous les deux. Changez ensuite la couleur d'arrière-plan. Je vais utiliser ici la valeur RGBA. Cela semble correspondre au niveau 50231255 et à l'opacité 0,8. Le bouton va donc être corrigé. Il doit être placé dans le coin inférieur droit. Définissons donc la position sur fixe, puis définissons les propriétés du bas et de la droite, toutes deux sur cinq lignes. Encore une fois. Nous avons donc ici le bouton qui a une position fixe. Ajoutons-y quelques styles supplémentaires. Je vais l'arrondir. Disons que le rayon de bordure est égal à 50 %. Cela a augmenté la taille de police. Réglons-le sur 1,6 RAM. Changez également la couleur, rendez-la blanche. Enfin, je vais placer l'icône au centre. Nous allons donc utiliser Flexbox. Nous avons besoin de flexibilité d'affichage, justifications du centre de contenu et d'alignement des éléments au centre. Très bien, le bouton est donc personnalisé et avant de le faire fonctionner, ajoutons-y un petit effet de survol Sélectionnons le bouton avec le pointeur de la souris. Une fois que nous survolons le bouton, je vais légèrement modifier sa couleur d'arrière-plan Utilisons donc votre couleur trois-deux e7ff, puis utilisons la transition avec la couleur de fond et avec une durée de 0,5 s. Très bien, donc tout est prêt. donc Il ne nous reste plus qu'à faire fonctionner ce bouton. Et pour cela, nous devons spécifier l'attribut de référence h. Nous devons insérer votre domicile. Maintenant, si je fais défiler la page vers le bas puis que je clique sur le bouton, il reviendra à la première section. Très bien, alors c'est ça. Nous avons terminé la construction de notre projet. La seule chose que nous devons faire est de le rendre réactif aux différentes tailles d'écran. 19. Projet 2 - Rendre le projet réactif: Très bien, comme vous le savez, ce projet est construit sur la très grande taille d'écran J'y suis. Cela correspond à 1920 pixels de largeur et 1080 pixels de hauteur Nous devons maintenant le rendre réactif aux différentes tailles d'écran. Allons-y, inspectons la page et passons en mode réactif. J'ai donc tous déjà préparé différents points de rupture auxquels nous devons apporter certaines modifications Je ne vais donc pas perdre de temps à les trouver. Le premier point d'arrêt sur lequel je vais apporter quelques modifications sera de 1 400 pixels Comme vous le voyez, le projet a besoin de quelques modifications. Allons-y donc et insérons nouveaux commentaires, réactifs et non réactifs Créez ensuite une nouvelle requête multimédia CSS et spécifiez une largeur maximale de 1 400 pixels Donc, la première chose que je vais faire est de déplacer légèrement l'arrière-plan flottant vers le bas. Allons-y, sélectionnons-le et changeons sa première position. Je vais faire en sorte que la largeur de la fenêtre d'affichage soit de -120. Ensuite, occupons-nous du titre. Allons-y donc et sélectionnons-le. Dans un premier temps. Je vais réduire la taille de la police. Faisons-en six RAM. Modifiez également sa position. Définissons la largeur de la fenêtre d' affichage supérieure à 225. Et je vais aussi changer sa largeur. Faisons-en sept pour courir. Très bien, comme vous pouvez le voir, le titre de la section semble bon Ensuite, je vais réduire légèrement la taille de police des éléments de navigation. Allons-y, sélectionnons maintenant par lien et définissons sa taille de police pour qu' elle s'exécute. OK, c'est tout à propos de la barre de navigation. Passons à autre chose et prenons soin du logo, qui est actuellement trop grand. Et je vais aussi le déplacer légèrement vers le bas. Nous allons donc sélectionner Logo. Fixez sa première position à 75 %. Ensuite, je vais sélectionner l'icône Font Awesome. Diminons la taille de sa police. Fais-le tourner. Bon, c'est tout pour la première section. Ensuite, je vais m' occuper de la deuxième section. Dans un premier temps, personnalisons le titre. Je veux dire, tous les titres de section. Sélectionnons-les. Je vais réduire la taille de la police, lui donner huit RAM. Modifiez également la marge inférieure, faites-la pivoter. D'accord ? Le titre semble donc bon pour le moment, chaque section a la hauteur définie dans la hauteur de la fenêtre d'affichage Et je vais le modifier et augmenter la hauteur. Bien que dans ce cas, cette section occupera la hauteur requise pour afficher le contenu. Très bien. Ensuite, je vais m'occuper des cartes. Je veux les placer sur des lignes différentes. Je vais aussi créer de l' espace autour de chaque carte. Alors tout d'abord, sélectionnons l'emballage. Je veux dire l'emballage du client. Pour placer les cartes sur différentes lignes, nous devons utiliser la propriété Flex Wrap et nous devons la configurer pour qu'elle s'enroule. Après cela, sélectionnons le cordon lui-même. Nous avons besoin du client et définissons la marge comme étant de cinq rem en haut et en bas et de dix RAM sur les côtés gauche et droit. OK, c'est tout à propos de la deuxième section. Passons à autre chose et faisons de même pour le troisième. Sélectionnons la section 3 et disons bonjour à Auto. Ensuite, nous devons sélectionner un rappeur, je veux dire un wrapper d'équipe et régler Flex Wrap par Wrap Enfin, sélectionnez la carte elle-même, je veux dire membre de l'équipe, et définissez la marge comme cinq rem comme cinq rem en haut et en bas essayant de ramper sur les côtés gauche et droit. Enfin, je vais m' occuper de la section des contacts. Augmentons la taille de l'arrière-plan. Sélectionnez le conteneur Form et réglez sa hauteur sur 60 %. Ensuite, je vais complètement masquer l'image. Nous allons donc sélectionner Form IMG Assigned pour afficher la valeur, aucune. Il peut donc voir que l' image est cachée. De plus, je pense que nous n'avons plus besoin de faire pivoter le formulaire lui-même. Nous allons donc sélectionner le formulaire de contact. Utilisez ensuite la propriété de transformation avec la fonction Translate. Nous devons le mettre à zéro. Enfin, modifions l'effet de survol. l'heure actuelle, le formulaire se déplace par deux rampes et je vais le modifier pour en faire une seule. Nous allons donc sélectionner le formulaire de contact avec le pointeur de la souris. Ensuite, récupérez cette ligne de code et au lieu de zéro, insérons ici moins une exécution. Enfin, créons un espace au bas du paragraphe. À l'heure actuelle, il a une marge supérieure avec une valeur de cinq rem. Je vais également y ajouter une marge en bas. Nous allons donc sélectionner le paragraphe et la marge définie avec les valeurs suivantes. Nous avons besoin de cinq rem en haut, de zéro sur le côté droit pour la RAM en bas et de zéro sur le côté gauche. C'est bon, c'est ça. Je pense que le projet semble bon sur ce point d'arrêt. Passons donc à la suivante, qui, je pense, sera de 1 150 pixels Nous allons donc créer un nouveau média CSS et spécifier une largeur maximale de 1 150 pixels Dans un premier temps, déplaçons l'arrière-plan flottant vers le bas. Sélectionnons-le et configurons-le fenêtre d' affichage de -110 Après ça. Comme vous pouvez le constater, nous devons personnaliser l'élément de titre. Nous allons donc le sélectionner. Je vais régler sa taille de police sur cinq RAM. Changez ensuite la position supérieure, passez à 30. Rapport. Pour ce qui est de la largeur, je vais réduire le nombre de tours H.263 Très bien, enfin, diminuons légèrement la taille du logo Sélectionnez l'icône Font Awesome et définissons la taille de police sur neuf rampes. Très bien, comme vous pouvez le voir, la première section semble bonne et en fait, toutes les autres sections sont également belles Je vais donc m'occuper du prochain point d'arrêt. Le prochain sera de 950 pixels. Créons donc un nouveau média CSS et spécifions ici une largeur maximale de 950 pixels. Sur ces points d'arrêt. Je vais à nouveau m'occuper de la première section. Nous allons donc sélectionner l'arrière-plan flottant et changer à nouveau sa position. Je vais le déplacer. Ce sera en baisse. Réglons donc la largeur de la fenêtre d'affichage maximale à -100. Et aussi vous éloigner du cap. Je vais changer sa position. Définissons les deux premiers pour la largeur de la fenêtre d'affichage. Hein ? La seule chose que je vais faire au point de rupture est d'augmenter l'espace entre les éléments de navigation. Nous allons donc sélectionner maintenant Power et utiliser la propriété de justification du contenu au fur et à mesure que les valeurs évoluent. OK, donc c'est au point d'arrêt. Passons à autre chose et trouvons le suivant. Je pense que ce sera 750 pixels. Encore une fois, je vais créer une nouvelle requête multimédia CSS avec une largeur maximale de 750 pixels La première chose que je vais faire au point de rupture est de réduire la taille de police de l'élément HTML. Réglons-le à 50 %. En fait, cela affectera tous les éléments. Comme vous pouvez le constater, la taille des éléments est diminuée. Ensuite, je vais déplacer à nouveau l'arrière-plan flottant légèrement vers le bas. Alors sélectionnons-le et mettons-le en première position. Dans ce cas, deux moins neuf pour la largeur de la fenêtre d'affichage. Ensuite, je vais également déplacer le titre légèrement vers le bas. Nous allons donc le sélectionner. Nous trouvons la meilleure propriété, soit 48 de largeur de fenêtre d'affichage Enfin, je vais réduire l'espace au bas de ce titre de section. Réglons la marge inférieure à cinq points. Très bien, alors c'est ça. Sur un point d'arrêt, toutes ces sections semblent bonnes. Nous devons maintenant passer à autre chose et apporter quelques modifications au dernier point d'arrêt, qui sera de 550 pixels D'accord, créons un nouveau média CSS et spécifions la largeur maximale à 550 Diminons à nouveau la taille de police de l'élément HTML. Dans ce cas, je vais le fixer à 45 %. Après cela, prenons également soin de l'arrière-plan flottant et du titre. Je vais changer la première place. Faisons en sorte que la largeur de la fenêtre d' affichage soit de -70. Sélectionnez ensuite le titre Section 1. Je vais changer sa première position. Portons-en 65. Largeur de la fenêtre d'affichage Modifiez également la largeur, faites-en 42 RAM, puis diminuez la taille de la police, faites-la 3,5 Ran. OK, donc la première section est jolie. Ensuite, je vais réduire la taille de police des titres de section Sélectionnons-les donc et réglons la taille de la police sur six RAM. Ensuite, je vais personnaliser les cartes. Comme vous pouvez le constater, nous devons augmenter la largeur des cartes. Mais en réalité, chaque carte a déjà une largeur suffisante. Et le problème ici, c'est la marge sur les côtés gauche et droit. Nous allons donc sélectionner le client. Je vais définir la marge comme cinq rem en haut et en bas et zéro sur les côtés gauche et droit. Faisons de même pour les membres de l' équipe. Réglons la marge à cinq rem et à zéro. Très bien, c'est tout pour les deuxième et troisième sections Les cartes ont l'air bien. Passons à autre chose et personnalisons la quatrième section. J'ai créé la section contact. Dans un premier temps, je vais modifier la hauteur et la régler sur la valeur globale. Ensuite, je vais masquer l'arrière-plan. Nous allons donc sélectionner le conteneur de formulaires. Je vais définir la couleur d'arrière-plan sur transparent. Et débarrassez-vous également de Box Shadow. Mettons-le à zéro. Très bien, on considère donc que l' arrière-plan est masqué. Ensuite, prenons soin du formulaire lui-même. Je vais réduire l'ombre de la boîte. Sélectionnez Contact Form et définissons l'ombre de la boîte à 1 g deux fois plutôt que pour utiliser la couleur AAA. Ensuite, je vais également modifier l'ombre de la boîte lorsque vous survolez le pointeur. Dupliquons ce code ici en passant la souris sur le formulaire de contact et modifions les valeurs Utilisons ici la RAM deux fois. Puis trois Ran. OK, c'est tout à propos de l'élément de formulaire. Enfin, je vais personnaliser le paragraphe et je souhaite également déplacer le bouton de défilement vers le coin. Donc, dans un premier temps, sélectionnons paragraphe avec le copyright de la classe. Je vais réduire légèrement la taille de la police. Faisons-en 1,8 RAM. Réglez ensuite la marge sur cinq rem. Et utilisez également le centre d'alignement du texte. Pour le bouton. Je vais définir les deux positions. Je suis en bas et à droite pour courir. C'est bon, c'est ça. Toutes ces sections semblent bonnes et nous avons fini de travailler dessus. J'espère que cela vous a plu et que vous avez appris quelque chose de nouveau et d'intéressant. Passons à autre chose. 20. Projet 3 - Aperçu du projet: Très bien, il est donc temps de créer notre prochain projet, qui sera le clone de l'un des les plus populaires et les plus sites Web les plus populaires et les plus utilisés, appelé Paypal, créera l'interface utilisateur des différentes pages Je suis sur la page principale, les pages de connexion et d'inscription. Bien entendu, ce ne sera pas le clone exact avec toutes les fonctionnalités. Comme je l'ai dit, nous allons créer simplement une interface utilisateur avec HTML, CSS et JavaScript. Paypal a une apparence différente selon les pays. L'interface utilisateur change fréquemment de temps à autre. Ne vous inquiétez donc pas s'il ne s'agit pas du clone exact de l'interface utilisateur actuelle. Très bien, donc avant de passer directement à l'écriture du code, décrivons d'abord à quoi ressemble le projet Comme je l'ai dit, nous allons créer trois pages différentes, connexion principale et l'inscription. Nous allons commencer par la page principale. Il se composera de deux sections différentes. La première section sera la bannière avec navigation. Nous avons ici plusieurs éléments de navigation. Si je les survole, le menu déroulant s'affiche Il changera lorsque nous passerons souris sur un autre élément de navigation De plus, nous aurons ici deux boutons différents pour la connexion et l'inscription. Si je clique dessus, nous accéderons à la page appropriée. La bannière sera donc suivie de la deuxième section. Il comprendra trois parties différentes avec une police, icônes géniales, des éléments de texte et des boutons. Ensuite, nous aurons cette section bleue avec quelques paragraphes différents. Ensuite, nous allons créer cette petite section ici avec une image et trois étapes différentes. bas de page, vous trouverez un bouton pour vous inscrire, suivi du pied de page Très bien, alors voyons à propos de la page principale. Jetons un coup d'œil à la page de connexion. Elle sera assez similaire à la page de connexion d'origine. Nous aurons ici deux champs de saisie avec des boutons. C'est probablement la page d'inscription. Il sera composé de deux parties. Sur le côté gauche, nous aurons plusieurs images des clients. Quant au côté droit, il inclura deux options différentes. Que nous souhaitions créer un compte personnel ou professionnel. Très bien, c'est tout pour le projet. Comme d'habitude, nous allons le rendre réactif aux différentes tailles d'écran. Si j'inspecte la page et que je passe en mode réactif, vous verrez qu' elle est réactive. Une chose à noter ici, sur les tailles d'écran plus petites, nous n' aurons plus de listes déroulantes Ils s'afficheront alors dans le menu de cette façon. OK, alors c'est ça. Nous sommes prêts à commencer à construire le projet. Passons donc à autre chose. 21. Projet 3 - Créer et personnaliser l'atterrissage: Très bien, une fois que nous avons décrit notre prochain projet, nous pouvons maintenant commencer à le construire J'ai créé un nouveau dossier sur le bureau appelé Business Agency, dans lequel j'ai un autre dossier pour les images. Allons-y, ouvrons ce dossier dans VS Code et créons nos fichiers de travail pour HTML, index ou HTML. Ensuite, pour le CSS, appelons-le style.css et script.js. Ouvrez ensuite le fichier index.html et créez un document HTML de base. Pour cela, comme d'habitude, je vais utiliser un ou deux packages de code de vues qui s'appellent emmet Nous devons insérer ici un point d'exclamation, puis appuyer sur Tab ou Enter Nous y voilà. Nous avons ici les balises HTML de base. Tout d'abord, je vais changer le titre. Insérons une agence commerciale annuelle , puis relions les fichiers CSS et JavaScript. Ouvrons la balise de lien et spécifiez la partie du fichier. C'est probablement du JavaScript. Je vais ouvrir la balise de script juste au-dessus de la balise body de fermeture. Ensuite, nous allons spécifier la partie du fichier dans l'attribut source. Les trois fichiers sont donc connectés. Ensuite, je veux ajouter un autre lien. Tout au long du projet, je vais utiliser les icônes Font Awesome. Allons-y et recherchons Font Awesome, CDN, js. Ensuite, récupérez le lien à partir d'ici, ouvrez la balise de lien dans les éléments d' en-tête et collez le lien en tant que valeur des attributs de référence h. Très bien, nous pouvons maintenant exécuter le projet dans le navigateur pour cela Comme vous l'avez déjà deviné, je vais utiliser l'un des packages de code VS appelé serveur live Cela nous permet de lancer la vie du projet pour le navigateur et d'apporter les modifications sans actualiser la page. Très bien, enfin, plaçons le navigateur et l' éditeur de texte, comme ça Et lancez-vous. Nous allons donc construire le projet section par section. Nous allons créer le balisage HTML pour chaque section, puis nous le personnaliserons à l'aide du CSS La première partie que nous allons construire sera le palier. Ouvrons l'étiquette cadeau, qui sera le contenant. Ajoutez ensuite de nouveaux commentaires pour la première section. Ensuite, ouvrez l'élément de section avec une section de classe 1. La première section inclura donc la bannière, qui sera elle-même composée du titre, du paragraphe et d'un bouton. Ouvrons donc la balise div avec la bannière de la classe. Ensuite, à l'intérieur de cet élément, je vais ouvrir les éléments de titre H1 avec une bande de classe que nous dirigeons Comme vous le savez, le titre comportera l'animation CSS. Il sera composé de quatre éléments de texte différents et ils seront représentés par les éléments de span. Je vais donc insérer période d' année avec un titre de classe 1. Et avec le contenu, les idées commerciales. Dupliquons ce code trois fois et changeons les noms des classes ainsi que le contenu. La seconde sera une consultation. Ensuite, nous aurons le marketing numérique. Et la dernière sera la stratégie. Très bien, c'est tout à propos du titre. Ensuite, nous devons créer le paragraphe. Il s'agit donc d'ouvrir les éléments p avec le paragraphe de la bannière de la classe, puis d'interférer avec du texte factice Enfin, nous devons créer un bouton Il s'agit donc d'ouvrir la balise button avec la bannière de classe btn. Ensuite, insérez votre contenu Discover. Maintenant. Très bien, le balisage HTML est donc créé pour la première section, et nous devons maintenant commencer à écrire du CSS. Tout d'abord, je vais créer des styles communs et réinitialiser les styles. Insérons de nouveaux commentaires, des styles courants. De styles courants. Sélectionnez ensuite chaque élément à l'aide d'un astérisque. Donc, tout d'abord, je vais supprimer la marge et le rembourrage par défaut de chaque élément Mettons-les donc tous les deux à zéro Ensuite, je vais définir la taille de la boîte borderbox Débarrassons-nous du contour par défaut. Mettons-le à zéro. Ensuite, je vais me débarrasser du soulignement par défaut des éléments du lien. Utilisons donc une décoration de texte avec la valeur none. Enfin, je vais supprimer les puces par défaut des éléments de la liste Utilisons list-style-type, aucun. D'accord, comme vous pouvez le voir, tous les styles courants sont appliqués aux éléments. Ensuite, je vais m' occuper des polices. Tout au long du projet, nous utiliserons plusieurs polices différentes. Certaines d'entre elles seront des polices Google, mais en plus de cela, nous utiliserons également d'autres formulaires. Allons-y et visitons le site Web de Google Fonts. Et puis recherchez le dA2 ci-dessous. Je vais sélectionner les différents styles ici. Ensuite, je vais partir à la recherche d'Oswald. Sélectionnons également tous ces styles. Ensuite, je vais récupérer le lien et le coller dans la tête. Les polices Google sont donc liées. Mais en plus de cela, je vais utiliser d'autres téléphones appelés Made Saul Maize, ce que je trouve très bien Ce téléphone est utilisé à plusieurs endroits du projet. Je veux dire, par exemple, le logo de la page Web. J'ai déjà installé cette police. Il est joint à cette conférence. Vous pouvez donc le télécharger et l'installer. Très bien, la dernière chose que je vais faire ici, les styles de chaque élément sont de est que les styles de chaque élément sont de définir la famille de polices Par défaut, je vais définir la famille de polices pour acheter deux cours à Lu Da. Comme vous pouvez le constater, la famille de police a été modifiée. Tout au long du projet. Nous allons utiliser la RAM comme unité de mesure. heure actuelle, 1 g équivaut à 16 pixels car par défaut, taille de police de l'élément HTML est égale à 16 pixels. Je veux convertir un run en dix pixels. Et pour cela, nous devons diminuer la taille de police des éléments HTML. Mettons-le à 62,5 %. D'accord, comme vous pouvez le voir, tous les éléments sont devenus plus petits. Et maintenant, une RAM équivaut à dix pics. Allons-y et occupons-nous de la première section. Je vais insérer vos nouveaux commentaires, section 1. Et la première section. Sélectionnez ensuite l'élément de section. Tout d'abord, définissons la largeur et la hauteur. Je vais régler la largeur à 100 %. Quant à la hauteur, faisons en sorte qu'elle corresponde à 100 % de la fenêtre d'affichage. En plus de cela, je vais définir l'image comme arrière-plan en plein écran Précisons donc ici l'URL de l'image. Nous avons donc le dossier Images et nous devons sélectionner Dark BG dot jpeg. De plus, insérons ici aucune répétition. En plus de cela, je vais définir la taille de l'arrière-plan pour couvrir. Comme vous pouvez le constater, cet élément de section possède une image d' arrière-plan en plein écran Voilà donc tout à propos de cet élément de section. Passons à autre chose et prenons soin de la bannière. Je vais tout d'abord définir sa position et la placer au centre de la page. Alors sélectionnons la bannière et définissons sa largeur, faisons-la à 100 %. Ensuite, je vais définir sa position sur absolue. Ensuite, afin de le positionner en fonction de ses éléments parents, je vais définir la position relative pour cet élément de section. Et puis définissez la propriété principale, faites-la 20 %. Pour ce qui est de la gauche, je vais la régler à 50 %. Maintenant, pour un centrage parfait, nous devons déplacer l'élément de 50 % vers la gauche Utilisons donc Transform, puis traduisons avec la direction x, et nous devons placer ici -50 Enfin, alignons le texte au centre en utilisant le centre d' alignement du texte Très bien, considérons que la bannière est centrée et nous devons maintenant personnaliser chaque élément J'ai créé le paragraphe d'en-tête et le bouton. À l'heure actuelle, le titre inclut quatre éléments de travée différents. Finalement, nous allons créer de belles animations avec ces éléments de span. Mais il ne nous reste plus qu'à personnaliser les éléments. Je vais donc commenter les éléments de ce panneau et ne laisser qu'un seul d'entre eux. Sélectionnez ensuite le titre et créez un espace en bas. En utilisant Margin-Bottom. Pour la RAM. Je vais également définir la hauteur du titre. Réglons-le sur 20 rampes. Ensuite, sélectionnons cet élément de plage lui-même. Donc, tout d'abord, je vais définir la famille de polices. Dans ce cas, utilisons une police appelée Oswald san-serif qui augmente la taille de la police, soit Et aussi, je vais définir le poids de la police comme 400. D'accord, ajoutons quelques styles supplémentaires. Les éléments de span, je vais transformer le texte en majuscules Changez également la couleur et rendez-la blanche. Et en plus de cela, je vais utiliser un petit effet d'ombre. Utilisons du texte. Une ombre avec une valeur est égale à 0,3 tour deux fois plus qu'à 0,6 RAM. Et comme couleur, je vais utiliser la valeur RGBA avec une couleur noire et une opacité de 0,5 Très bien, alors voyons le titre tout de suite. Passons à autre chose et prenons soin du paragraphe. Je vais sélectionner le dernier paragraphe. Tout d'abord, définissons une taille de police, en faisons un classement complet. Modifiez ensuite l'épaisseur de la police. Je vais en faire 400. Transformez également le texte en majuscules. Changez ensuite la couleur, faites-la blanche. Et je vais également définir la couleur d' arrière-plan sur la valeur RGBA Utilisons ici la couleur noire et l'opacité 0,6. Bien, passons à autre chose et ajoutons un peu plus de style au paragraphe. Dans la mesure où je vais réduire la largeur. Portons-le à 30 %. Ensuite, je vais créer de l'espace en bas. Et nous devons également centrer le paragraphe pour cela. Utilisons la marge. Je vais le mettre à zéro en haut. Ensuite, nous avons besoin d'aldol sur les côtés droit et gauche. Et pour la RAM en bas. Ensuite, je vais créer de l'espace en haut et en bas du paragraphe à l'aide d'un rembourrage Rembourrage à un rem et à zéro, et crée également un effet d'ombre Utilisons box-shadow avec les valeurs « un » exécuté deux fois plus que cinq « RAM » Et utilisez à nouveau la valeur RGBA avec une couleur noire et une opacité de 0,5 Très bien, le paragraphe est donc personnalisé. Ensuite, nous devons prendre ici le bas. Sélectionnons-le. Tout d'abord, définissons la largeur et la hauteur. Je vais me mettre à 23 pour courir. Quant à la hauteur, faisons-en six RAM. Changez ensuite la couleur d'arrière-plan. Je vais utiliser ici la fonction de gradient linéaire. Il sera composé de deux couleurs différentes. Et je veux que la direction de la transition des couleurs soit celle de l'écriture. Pour ce qui est des couleurs, insérons ici la première, elle sera 90 e0e Pour le second, je vais vous interrompre 71010, puis changer la couleur du texte, le rendre blanc Nous avons donc ici le bouton. Passons à autre chose et ajoutons d'autres styles. Je vais augmenter la taille de la police. Faisons en sorte qu'il s'exécute et transformons également le texte en majuscules Ensuite, je vais arrondir le bouton en utilisant border-radius Définissons-la sur trois marques et modifions également la bordure par défaut. Je vais définir la rampe de Border 2.1 comme solide. Et comme couleur, utilisons 800505. OK, après cela, je vais créer des effets d'ombre. Je veux créer une ombre pour le bouton et pour le texte également. Utilisons donc box-shadow pour les valeurs d'une exécution, puis pour exécuter trois RAM et la valeur RGBA avec la couleur noire et l' opacité Ensuite, je vais créer une ombre de texte. Définissons les valeurs de 2,6 RAM par rapport à 0,3, 0,2 RAM. Et utilisez à nouveau le RGBA avec une couleur noire et avec une opacité de 0,4 Enfin, positionnons le curseur pour qu'il pointe. Très bien, donc le bouton est stylé et il est plutôt joli Nous devons maintenant ajouter l'animation et certains effets aux éléments de la bannière. Passons donc à autre chose. 22. Projet 3 - Ajouter des animations à l'atterrissage: Très bien, nous avons donc personnalisé la page de destination, et nous devons maintenant passer à autre chose et ajouter des animations aux éléments de la bannière Allons-y et commençons par le titre. Comme vous le savez, il se compose de quatre éléments de travée différents. À l'heure actuelle, trois d'entre eux ont reçu l'ordre de sortir et de se cacher. Alors tout d'abord, rendons-les visibles. Nous voyons donc ici les quatre rubriques. Ensuite, nous devons les placer les uns sur les autres. Et pour cela, nous devons définir leur position comme absolue. Maintenant, les titres sont placés les uns sur les autres, mais nous devons les placer au centre Pour cela, utilisons Flexbox. Tout d'abord, je vais régler la largeur à 100 %. Ensuite, nous avons besoin d'un centre de contenu Display Flex et Justify. Très bien, alors c'est ça. Les titres sont positionnés et nous devons maintenant passer à autre chose et commencer à travailler sur les animations CSS Laissez-moi donc vous expliquer ce que nous allons faire. Nous allons déplacer les titres au plus près de l'utilisateur en traduisant la fonction dans l'environnement 3D. Et nous les cacherons également. Ce sera l' état par défaut du titre. Ensuite, nous afficherons les titres dans ordre avec quelques intervalles Tout d'abord, créons un environnement 3D. Pour cela, nous devons utiliser l'une des propriétés appelées perspective. Cela nous montre à quelle distance se trouve l' élément de l'utilisateur. Je vais l'attribuer aux éléments de titre. Réglons donc la perspective sur 50 rampes. Ensuite, déplaçons les titres et aussi vers le haut. Utilisons ensuite la fonction Transform with Translate Z. Je vais utiliser ici huit RAM. Et puis pour masquer les titres, utilisons l'opacité zéro Et en plus de cela, afin de rendre l'effet plus agréable, je vais augmenter l' espace entre les lettres Réglons cet espacement à trois rampes. Très bien, les titres sont donc masqués, mais pour l'instant nous avons un petit problème Cette barre de défilement est apparue ci-dessous. Donc, pour résoudre ce problème, je vais utiliser overflow hidden et nous devons l'attribuer à l'élément de titre Comme vous pouvez le constater, nous n'avons plus ici la barre de défilement. Il est maintenant temps de créer les animations CSS. Et pour cela je vais utiliser des keyframes CSS. Nous devons ajouter un signe suivi des images-clés du mot-clé. Ensuite, nous devons définir le nom des images-clés. Appelons cela un titre animé. Nous allons donc suivre quelques étapes. Jetons un coup d'œil au projet terminé. Dans un premier temps, de 0 % à 3 %, les titres seront masqués Ils auront exactement les mêmes propriétés que celles que nous leur avons attribuées par défaut. Je suis dans ces trois propriétés. Ensuite, de 3 % à 25 %, nous l'afficherons à nouveau dans sa position par défaut. Dans la position par défaut, je suis dans la position où le titre est visible. Alors allons-y et définissons la première étape. Zéro pour cent. Nous avons besoin ici de Transform, Translate Z de huit RAM plutôt que d'opacité à zéro Egan, espacement latéral, trois bras. Ensuite, nous avons besoin de 3 %. Donc, à 3 %, nous avons besoin de Transform Translate Z avec zéro. Ensuite, nous devons rendre l'élément visible. Réglons l'opacité un et réduisons également l'espacement latéral Faites-en 1,5 loyer. Après cela, de 3 % à 25 %, le titre sera visible. Puis de 25  % à 28 %. Pendant ces 3 %, il se cachera à nouveau. Nous avons besoin ici de 25 %. Reprenons ces trois valeurs et collons-les ici. En ce qui concerne les 28 %, nous devons apporter certains changements. Nous devons traduire une fonction par une rampe, puis une opacité nulle et un espacement latéral par trois rampes Enfin, de 28 % à 100 %, le titre sera masqué. Ainsi, à 100 %, nous avons besoin de Transform Translate Z, d'un tram, d'une opacité nulle et d'un espacement des lettres de trois rampes. Nous allons donc ajouter ce cycle à toutes les rubriques, mais avec des délais différents Par conséquent, ils s' afficheront en hauteur dans l'ordre. Encore une fois, tous les titres effectueront le cycle, je veux dire les masquer plutôt que les afficher Et puis encore une fois en se cachant. Mais ils le feront avec des délais différents. Très bien, il est donc temps d' exécuter cette animation. Nous devons sélectionner tous les titres séparément et leur attribuer des propriétés d'animation. Commençons par le premier titre. Attribuons-lui une animation, suivie du nom de l'animation, qui est le titre de l'animation Ensuite, nous avons besoin d'une durée de 12 s. Ensuite, le temps de retard sera de 3 s pour le premier titre. Et nous devons également exécuter l'animation à l'infini. Ajoutons donc ici l'infini. D'accord ? Dupliquons ce code trois fois et changeons les noms des classes. Et aussi le temps de retard. Nous avons besoin de la rubrique 2.6 s. Ensuite, pour la troisième rubrique, nous avons besoin de 9 s. Pour le recrutement par faute, nous avons besoin de 12 s. Comme vous pouvez le voir, nous avons ici un effet d'animation plutôt sympa. Très bien, c'est donc tout pour les éléments de titre. Ensuite, je vais créer des animations pour le paragraphe et le bas, et je vais également créer un effet de survol agréable et cool avec le bouton Donc, une fois que nous aurons rechargé la page, je vais afficher le paragraphe et le bouton avec quelques faux défauts dans l'ordre Encore une fois, nous devons définir les images-clés CSS et exécuter ces règles CSS avec des propriétés d'animation Allons-y et commençons par un paragraphe. Tout d'abord, je vais masquer le paragraphe par défaut. Réglons l'opacité à zéro et masquons la visibilité. Comme vous pouvez le voir, le paragraphe est masqué et nous devons maintenant créer les images-clés CSS Appelons cela une animation en fondu. En fait, nous allons utiliser cette animation pour les deux éléments. Je suis dans le paragraphe et Boston aussi. Dans l'ensemble, nous allons donc avoir deux étapes différentes. Le 0,0 pour cent de départ et le 0,100 % final. La seule chose que nous devons faire est de masquer l'élément à zéro pour cent et de le rendre visible à cent pour cent. Nous avons donc besoin d'une opacité nulle et d' une visibilité masquée à 0 %. Pour ce qui est du 100 %, nous avons besoin d'une opacité 1 et d'une visibilité visible. Les images-clés sont donc prêtes. Nous devons maintenant exécuter ce code à l'aide de la propriété animation. Assignons-le donc au paragraphe avec les valeurs « fondu » (durée de l' animation : 1 s), puis nous avons besoin d'un temps différé, 1,5 s. Maintenant, comme vous pouvez le voir, l'animation fonctionne. Le paragraphe s'affiche avec un effet de fondu. Mais nous avons ici un problème. Une fois l'animation terminée, le paragraphe reprend de la hauteur. Il obtient, encore une fois, ses styles par défaut. Je veux dire opacité à zéro et visibilité cachée. Nous n'en avons pas besoin. Nous avons besoin du paragraphe pour conserver les styles définis à la deuxième étape. Je veux dire, cela signifie que les 100 %, pour y parvenir, nous devons ajouter ici une autre valeur, qui est la valeur de la propriété du mode film d'animation, et elle est appelée vers l'avant. Alors maintenant, si je recharge la page, tout fonctionnera parfaitement D'accord. C'est donc tout à propos du paragraphe. Faisons de même pour le bouton. Comme nous l'avons dit, nous avons besoin de la même animation, nous n'avons donc pas besoin de redéfinir les images-clés Il suffit de l'attribuer à Bateson et à la propriété d'animation. Mais avant cela, masquons le bouton. Nous avons besoin d'une opacité nulle et d'une visibilité cachée. Ensuite, utilisez l'animation. Avec les valeurs suivantes. Nous avons besoin d'une animation en fondu d'une durée de 1 s comme temps de retard. Je vais utiliser 2 secondes puis il nous faudra à nouveau avancer. Très bien, maintenant tout fonctionne bien et nous avons ici de jolis effets d'animation Très bien, ensuite je vais créer un bel effet de survol pour le bouton Jetons un coup d'œil au projet terminé. Une fois que nous survolons le bouton, il brillera. Cet effet brillant sera créé avec un pseudo élément, créera ces petits éléments blancs, et nous passerons au survol Allons-y et sélectionnons le bouton avec un pseudo élément avant. Tout d'abord, en tant que contenu défini, rendez-le vide. Ensuite, je vais régler la largeur et la hauteur, toutes deux à 200 %. En ce qui concerne l'arrière-plan, je vais utiliser la fonction de gradient linéaire. La direction de la transition des couleurs sera donc de gauche à droite. Et je vais utiliser trois couleurs différentes. Le premier sera transparent. Ensuite, nous aurons la couleur blanche. Et le troisième sera à nouveau transparent. Donc, pour l'instant, l' élément n'est pas visible car nous devons définir la position. Réglons la position sur absolue. Alors. Pour le positionner en fonction de son élément parent, qui est le bouton, nous devons définir la position du bouton comme relative. Ensuite, utilisez la position supérieure, mettez-la à zéro. En ce qui concerne la propriété de gauche, je vais la régler à -100 % D'accord, nous avons donc ici les pseudo-éléments précédents. Avant de le faire fonctionner, je vais l'incliner légèrement horizontalement Utilisons donc la transformation avec la fonction skew x. Et comme valeur, réglons-la à 30 degrés. Très bien, donc tout est prêt pour créer un effet de survol. Je vais déplacer le pseudo-élément avant vers la droite lorsque vous passez la souris. Nous allons donc sélectionner le bouton avec le pointeur de la souris, suivi du pseudo-élément précédent Ensuite, réglez la propriété gauche à 100 %. En outre, nous devons faire la transition. Nous avons des valeurs à gauche, 0,5 s. D'accord ? Tout fonctionne donc parfaitement. La seule chose que nous devons faire est de masquer cet élément par défaut. Pour cela, utilisons overflow hidden. Très bien, alors c'est ça. Avec la première section, nous en avons terminé. Maintenant, je vais passer à autre chose et créer le napa 23. Projet 3 - Créer et personnaliser la barre de navigation: Très bien, nous devons maintenant commencer à travailler sur la barre de navigation. Allons-y et jetons un coup d'œil au projet terminé. Nous avons donc ici le Napa avec un logo et l'icône du menu. Si je clique dessus, la navigation apparaîtra avec quelques éléments de navigation. Ils auront un petit effet de survol. Nous allons changer la couleur des objets sur Harvard. De plus, l'icône du menu se transformera ici en cette flèche. Si je clique dessus, alors pour faire une sieste ou je fermerai. Maintenant, Paul aura également l' animation. Si nous rechargeons la page, par défaut, elle sera masquée puis elle apparaîtra en haut Très bien, allons-y et commençons à créer le balisage HTML Je vais placer la barre de navigation à l'extérieur du conteneur. Insérons donc vos commentaires, votre barre de navigation et ceux de Navarre Ouvrez ensuite les éléments de navigation HTML5 avec la barre de navigation des classes. Le numéro sera donc composé d' un logo et des éléments de navigation. Allons-y et créons un logo. Je vais ouvrir le tag div. Le logo va être le code texte et créer. La seule chose que je vais faire est d' utiliser un style différent pour trois lettres. Je vais donc les envelopper à l'aide d'éléments span. Dans un premier temps, insérons une balise de lien. Ensuite, nous avons besoin de code texte et de création. Je vais emballer la première lettre avec des éléments d'espacement. Insérez ensuite ODE. Encore une fois, je vais emballer la lettre A puis envelopper la lettre C avec span. Ensuite, ouvrons une balise div, qui inclura les éléments de navigation. Attribuons à la liste de navigation des classes. Ouvrez ensuite la balise link avec le lien de navigation de classe et avec le contenu. Dans l'ensemble, nous aurons donc cinq éléments de navigation différents. Dupliquons les éléments du lien quatre fois, puis modifions le contenu. Le second portera sur la période à laquelle nous aurons les prix. Le prochain sera un blog. C'est probablement le dernier. Insérons ici le contact. Très bien, c'est tout pour le Napa. L'autre chose que je vais faire est créer une icône de menu. Insérons de nouveaux commentaires pour le menu. Ouvrez ensuite la balise div avec le menu de classe. L'icône du menu sera composée de trois lignes différentes. Je vais les créer en utilisant les développements assignés à la ligne de chaque classe, qui sera le nom de classe commun. Et nous avons également besoin ici de la première ligne. Dupliquons cette ligne de code deux fois et changeons les noms des classes. Nous avons besoin de la ligne deux, de la ligne trois. Très bien, c'est tout à propos du balisage HTML. Nous devons maintenant commencer à écrire le roman. Allons-y et insérons de nouveaux commentaires dans le fichier CSS. Navbar alors. Et de la barre de navigation. Sélectionnez ensuite les éléments de navigation. Je vais définir la largeur et la hauteur. Mettons-nous à 200 %. En ce qui concerne la hauteur, je vais lui faire huit RAM et aussi changer la couleur de fond. Utilisons ici la valeur RGBA avec une couleur noire et une opacité de 0,9. D'accord ? Le numéro aura donc une position fixe. Il sera placé en haut de la page. Réglons donc la position sur fixe. Et je vais aussi mettre la première position à zéro. Maintenant, la barre de navigation est masquée car elle s'est retrouvée derrière la bannière Pour résoudre ce problème, je vais utiliser la propriété z-index à laquelle on attribue une valeur supérieure à zéro, disons dix Ensuite, créons de l'espace à l'intérieur de la barre de navigation à l' aide d'un rembourrage Réglons-le à trois rem sur les quatre côtés. OK, donc pour l'instant, c'est tout à propos de la barre de navigation. Passons à autre chose et personnalisons le logo. Tout d'abord, je vais m' occuper de sa position. Sélectionnons-le et définissons sa position sur absolue. Ensuite, je vais définir les propriétés du haut et de la gauche. Je vais mettre la première position à 1,5 RAM. En ce qui concerne la propriété de gauche, définissons-la sur quatre lignes. OK, ensuite, je vais styliser le logo. Nous allons donc sélectionner les éléments de lien , puis définir la famille de polices. Dans ce cas, je vais utiliser une police appelée May Seoul Maze. San-Serif. Augmentez ensuite la taille de la police, faites-en 2,5 RAM. Changez la couleur. Je vais utiliser you call ou E. Et aussi, créons un espace entre les lettres. Utilisez l'espacement du registre avec la valeur 0,1 ran. Très bien, le logo est maintenant bien meilleur, mais comme vous pouvez le voir, nous devons personnaliser ces trois lettres Allons-y et sélectionnons l'élément span. Définissons la famille de polices. Je vais utiliser, encore une fois, des âmes sœurs, du San-Serif Augmentez ensuite la taille de la police. Je vais en faire 3,5 RAM. Rendons également le téléphone plus audacieux. Utiliser l'épaisseur de la police, cela dévaloriserait le gras. Ensuite, je vais changer de couleur. Utilisons que tu appelles neuf E 0, E 09. Très bien, donc c'est une syllabe, le logo. Passons à autre chose et personnalisons l'icône du menu. Avant cela, je vais masquer les éléments de navigation pendant un moment Allons-y et sélectionnons le romancier chargé de n' en afficher aucun Comme vous pouvez le constater, les éléments de navigation sont masqués. Passons à autre chose et personnalisons l'icône du menu, qui n'est pas visible pour le moment car nous avons ici qu'un élément div vide Allons-y donc et insérons de nouveaux commentaires pour le menu. Sélectionnez ensuite les éléments du wrapper div avec le menu des classes. Tout d'abord, je vais définir la largeur et hauteur ainsi que la couleur de fond. Réglons donc la largeur et la hauteur, toutes deux en RAM. Pour ce qui est de la couleur de fond, je vais utiliser ici une couleur de fond temporaire. Faisons en sorte que ce soit le cas. heure actuelle, l' icône du menu n'est pas tout à fait visible car elle s'est retrouvée derrière le napa Je vais corriger cela en utilisant la propriété z-index. Mais comme vous le savez, pour utiliser la propriété z-index dans un premier temps, nous devons définir la position de l'élément L'icône du menu doit avoir une position fixe. Définissons donc sa position à corriger. Définissez ensuite la propriété d' index. Je vais lui attribuer une valeur plus élevée, disons cent. Très bien, nous avons donc ici l'icône du menu. Nous devons le placer en haut à droite de la page. Allons-y donc et définissons les propriétés supérieures et droites. Et je vais régler la position sur, bélier. Pour ce qui est de la bonne position, faisons-en quatre rampes. Très bien, l' icône du menu est donc positionnée. Maintenant je vais m' occuper des lignes. D'abord. Débarrassons-nous de cet arrière-plan temporaire. Ensuite, sélectionnez la ligne. Définissons sa largeur et sa hauteur. Je vais régler la largeur à 100 %. Pour ce qui est de la hauteur, indiquons la rampe. Et utilisez également la couleur de fond E. E. Maintenant, les lignes sont visibles, mais comme vous pouvez le voir, nous devons créer un espace entre elles et les séparer. Je vais le faire à l'aide de Flexbox. Réglons donc l'affichage sur Flex. Ensuite, pour placer les lignes verticalement dans une colonne, nous devons changer de direction. Faisons-en une colonne. Afin de créer un espace entre les éléments dont nous avons besoin, justifiez l'espace de contenu de manière uniforme. Et aussi, je veux changer le type de plus grossier une fois que nous survolons Attribuons donc au pointeur du curseur de menu. Très bien, comme vous pouvez le voir, les lignes sont séparées Ensuite, je vais modifier la taille des première et troisième lignes car elles sont plus petites que la deuxième ligne. Nous allons donc sélectionner la première ligne. Réglez sa largeur à 50 %. Ensuite, je vais dupliquer ce code, changer la ligne 1 en ligne 3. Et en plus de la largeur, je vais ajouter ici, margin-left auto, cela nous permettra de placer la ligne sur le côté droit Très bien, c'est tout à propos de l'icône du menu. Il est personnalisé et positionné. Et maintenant je vais m' occuper des éléments de navigation. Jetons un coup d'œil au projet terminé. Par défaut, les éléments de navigation sont donc masqués. Une fois que nous avons cliqué sur l' icône du menu, le numéro s' étend à toute la page et les éléments de navigation apparaissent avec un effet de fondu. Tout d'abord, je vais personnaliser les éléments de navigation. Nous allons les faire ressembler à ça. Ensuite, nous allons programmer l'icône du menu. Alors, dans un premier temps, étendons un aéroport à la page entière. l'heure actuelle, sa hauteur est fixée à huit RAM et je vais la modifier et créer une hauteur de cent fenêtres d'affichage Très bien, il est maintenant temps de personnaliser les éléments de navigation dès qu'ils sont masqués Débarrassons-nous donc de n'afficher aucun. La première chose que je vais faire est de positionner les objets. Je vais les placer au centre. Réglons donc la position sur absolue. Ensuite, je vais définir la propriété principale. Portons-le à 25 %. La position de gauche sera de 50 %. Et puis pour centrer les éléments, comme vous le savez, nous devons utiliser Transform avec la fonction translate x. Et nous devons déplacer les éléments de -50 %. Très bien, la liste est donc positionnée. Je vais maintenant aligner les éléments de navigation verticalement dans une colonne. Utilisons Display Flex. Ensuite, je vais placer les éléments verticalement dans une colonne. Changeons la direction, transformons-en une colonne. De plus, nous devons aligner les éléments au centre en utilisant l'option Aligner les éléments au centre. Très bien, c'est tout pour la liste. Je vais maintenant personnaliser les éléments de navigation. Sélectionnons les éléments du lien. Tout d'abord, changeons la famille de polices. Je vais utiliser ici la police créée. Donc du maïs, San-Serif. Augmentez ensuite la taille de la police, créez-la pour la RAM. Créez également un espace entre les lettres en utilisant un espacement des lettres de 0,3 RAM et pour changer la couleur, rendez-la blanche. Comme vous pouvez le constater, les éléments de navigation sont bien meilleurs. Ensuite, je vais créer un espace entre eux. Utilisons la marge et définissons-la à deux rem en haut et en bas et à zéro sur les côtés gauche et droit. C'est bon, c'est ça. Les éléments de navigation sont stylisés et je vais maintenant créer un effet de survol. Je souhaite modifier la couleur des éléments lorsque vous survolez le pointeur. Sélectionnez donc le lien de navigation avec le pointeur de la souris et changeons la couleur. Vous voyez votre couleur 99. Et nous devons également utiliser la transition pour un effet fluide. Attribuons à la couleur et à la durée 0,4 s. D'accord ? L'effet de survol fonctionne donc bien. Et maintenant, nous devons faire en sorte que le napa fonctionne 24. Projet 3 - Faire fonctionner la barre de navigation: Très bien, une fois que nous avons personnalisé le verseur Now, nous devons maintenant le faire fonctionner Tout d'abord, je vais masquer la barre de navigation par défaut, je veux dire, pour en diminuer la hauteur Ensuite, une fois que nous avons cliqué sur l'icône du menu, il devrait s'étendre. De plus, nous devons transformer ces lignes en flèche. Tout d'abord, masquons les éléments de navigation. Je vais utiliser l'opacité zéro et la visibilité cachée. Ensuite, je vais diminuer la hauteur du nanopore et lui donner la forme par défaut Réglons la hauteur à un gramme. Bon, maintenant il est temps de programmer l'icône du menu pour cela, je vais utiliser JavaScript. Une fois que nous avons cliqué sur l'icône, la barre de navigation doit s'étendre à toute la page et les éléments de navigation doivent s'afficher Passons donc au fichier JavaScript et sélectionnons d'abord l'icône du menu. Je vais insérer de nouveaux commentaires. Maintenant, loin de la barre, puis créez une nouvelle variable, je vais l'appeler menu. Nous allons sélectionner l'icône du menu à l' aide de la méthode QuerySelector. Nous devons spécifier ici le menu du nom de la classe. En plus de cela, je vais également sélectionner ce port maintenant. Créons donc une autre variable, appelons-la maintenant bar et sélectionnons le numéro en utilisant à nouveau la méthode QuerySelector Insertons votre classe maintenant. OK, il est maintenant temps d' associer un écouteur d'événements à l'icône du menu Spécifions ici l'événement de clic et passons également une fonction de flèche, qui sera exécutée une fois que nous aurons cliqué sur l'icône. Laissez-moi donc vous expliquer ce que nous allons faire. Nous allons ajouter une nouvelle classe appelée change à la barre de navigation. À l'aide de cette classe, nous allons créer de nouveaux styles et CSS, qui seront appliqués à la barre de navigation au clic. Ensuite, au clic suivant, le changement de classe sera supprimé et, par conséquent, les nouveaux styles seront également supprimés. Nous allons gérer cela à l'aide d'une méthode à bascule. En général, la méthode toggle ajoute une nouvelle classe à l'élément s'il n'en possède pas et supprime la classe si l'élément en possède une Donc, pour ajouter une nouvelle classe à l'élément, je vais utiliser l'une des propriétés appelées liste de classes. Il nous donne toutes les classes de l'élément. Cela nous permet également d'accéder à différentes méthodes telles que l' ajout, la suppression et le basculement Attachons donc la liste des classes au numéro, puis utilisons la méthode toggle Précisons ici le changement de nom de classe. Très bien, donc c'est tout à propos de JavaScript. Allons-y et écrivons du CSS. Nous devons donc étendre le napa OnClick. Nous avons donc besoin d'un changement de classe dès maintenant. Ensuite, nous devons spécifier la hauteur. Faisons en sorte que la hauteur de la fenêtre d' affichage soit de 100. Et en plus de cela, je vais utiliser la transition. Nous sommes chargés de masquer la durée 0,5 s. D'accord, donc maintenant, si je clique sur l'icône du menu, la barre de navigation s'agrandira et se fermera au clic suivant Très bien, je vais maintenant afficher les éléments de navigation. Utilisons cette technique. Nous avons besoin de changement. Pas des moindres. Dans ce cas, nous avons besoin d'espace ici car c'est notamment le fils de la barre de navigation. Réglons donc l'opacité sur un, puis nous avons besoin d'une visibilité visible. En plus de cela, je vais utiliser transition avec les valeurs 0.7. S est la durée. Et en plus de cela, je vais utiliser un peu de temps de retard. Insérons donc ici 0,5 s. Donc, si je clique sur l'icône, les éléments de navigation afficheront que la semaine suivante, ils seront masqués. Mais dans ce cas, sans aucun effet de décoloration. Pour résoudre ce problème, nous avons besoin d'une nouvelle transition, mais dans ce cas uniquement pour le nœud Nous allons donc spécifier ici toute la durée de 0,2 s. Très bien, maintenant tout fonctionne correctement Ensuite, nous devons nous occuper de l'icône du menu. N'oubliez pas que nous devons le transformer en flèche déclic La première ligne doit se déplacer vers le bas vers la droite, puis pivoter. Nous n'avons pas du tout besoin de toucher la deuxième ligne. Quant à la troisième ligne, nous devons la faire pivoter. Commençons par la première ligne. Au début, je vais créer la flèche, puis nous allons faire fonctionner l'icône. Utilisons Transform avec la fonction de traduction. Donc, pour déplacer les éléments vers la droite, je vais passer l'année à 100 % comme valeur de la direction X. En ce qui concerne la direction y, réglons-la sur une pente La ligne s'est déplacée vers le bas vers la droite. À l'heure actuelle, les deux lignes, je suis dans la première et la troisième sont placées l'une au-dessus de l'autre. Et maintenant je vais faire pivoter la première ligne de -35 degrés Nous devons donc faire pivoter la fonction en tant que valeur. Faisons une pause ici à -35 degrés. Comme vous pouvez le voir, la ligne pivote mais elle n'est pas placée correctement. La ligne pivote à partir de son centre car, comme vous le savez, l'origine de la transformation est définie sur le centre par défaut Dans ce cas, je vais le modifier et le créer, non ? Enfin, la première ligne est jouée correctement. Passons à autre chose et occupons-nous de la troisième ligne. Nous devons le déplacer vers le haut et le faire pivoter. Nous devons donc nous transformer. Traduisez ensuite la fonction avec la direction y. Insérons ici moins une RAM. Et nous devons également faire pivoter la fonction avec la valeur 45 degrés. Comme pour la première ligne, nous devons changer l'origine de la transformation. Mettons-le sur, non ? Nous avons donc ici la flèche parfaite. Très bien, maintenant il est temps de faire fonctionner le menu. Nous avons besoin que toutes ces choses se produisent. Une fois que nous aurons cliqué sur l'icône, je vais utiliser à nouveau le changement de classe. Nous devons l'ajouter à l' icône du menu en utilisant la méthode de bascule Passons donc au fichier JavaScript et à la liste des classes de points du menu de densité U, point toggle Et le nom de la classe a changé. Ensuite, nous devons sélectionner les première et troisième lignes en utilisant le changement de classe. Reprenons ces deux lignes et insérons-les ici. Sélectionnez ensuite la troisième ligne et faites de même. Comme vous pouvez le voir, une fois que nous avons cliqué sur l'icône, les lignes se transforment en flèche. La seule chose que nous devons faire est de rendre cet effet plus fluide. Et pour cela, utilisons la transition avec transformation et la durée de 0,3 s. OK, donc tout fonctionne bien. Nous avons ici un effet sympa et cool. Avant de passer à la prochaine partie de notre projet, je vais faire une dernière chose. Je vais déplacer toute la barre à ongles vers le haut et la cacher. Ensuite, une fois la page rechargée, je veux qu'elle apparaisse en douceur depuis le haut de la page, comme si c'était le cas dans le projet terminé Donc, tout d'abord, je vais masquer la partie nulle. Je veux dire, je vais le déplacer vers le haut. Réglons la première position à moins huit RAM. Ensuite, nous devons créer des images-clés CSS. Je vais l'appeler Animate Navbar. Dans l'ensemble, nous aurons donc deux étapes différentes. Nous descendrons ensuite Albert de 0 % à 100 %. Donc, à zéro pour cent, nous devons utiliser la position par défaut. Définissons deux moins huit RAM. Pour ce qui est du 100 %, il faut le compléter par zéro. OK, donc les images-clés sont prêtes. Utilisons la propriété d'animation. Nous devons spécifier ici le nom des images-clés qui animeront la barre de navigation plutôt que la durée de l'animation (1 s) . Et je vais également utiliser un petit délai Faisons 0,5 s. Si je recharge page, la barre de navigation se déplacera vers le bas en douceur. Mais elle finira par se cacher à nouveau. Nous devons maintenir la position que nous avons spécifiée à 100 %. Pour ce faire, nous devons utiliser l'une des valeurs de la propriété du mode film d'animation appelée forward. Comme vous pouvez le constater, tout fonctionne parfaitement et nous avons fini de travailler sur le napa Passons à l'antique partie suivante de notre projet 25. Projet 3 - Créer et styliser la section À propos de nous: Très bien, nous avons fini de travailler sur la barre de navigation, et il est maintenant temps de passer à la deuxième section de notre projet, qui sera la section À propos de nous Jetons un coup d'œil aux projets terminés et rappelons-nous à quoi ressemble cette section. Comme vous pouvez le constater, nous avons ici trois parties différentes. Sur le côté gauche de cette action. Le titre y est placé avec une ligne. Ensuite, nous avons ici la vidéo avec le costume, le contrôle des pauses. Et en bas, nous avons un paragraphe avec du texte fictif. Encore une fois, allons-y et commençons à créer le balisage HTML Je vais également insérer une nouvelle section de commentaires. Et hors section pour ouvrir ensuite la balise de section avec une section de classe 2. Comme nous l'avons dit, cette section sera composée de deux parties différentes. Le premier sera le titre. Ouvrons donc l'élément de titre H1 avec le titre de la section de classe Et avec le contenu qui nous concerne. Ensuite, nous aurons la ligne qui va être placée sur le côté gauche du titre. Ouvrons la balise div avec une ligne de titre de section de classe. OK, après cela, lançons la vidéo. Je vais ouvrir une balise div, qui sera l' enveloppe de la vidéo Attribuons à la classe Video Wrapper. Insérons ensuite la balise vidéo HTML 5 avec une vidéo de classe. Ensuite, nous devons spécifier la partie de la vidéo. Il est placé dans le dossier Images. Sélectionnons la vidéo À propos de nous. Ainsi, en général, vous pouvez créer les contrôles à partir du code HTML à l'aide de l'attribut appelé contrôles. Mais dans ce cas, je vais créer les contrôles personnalisés, qui seront ensuite programmés avec JavaScript. Je pense donc que ce sera plus intéressant. Ouvrons une balise div, qui sera l' enveloppe des contrôles Il inclura la barre de durée de la vidéo et le bouton Play. Ouvrons donc une autre balise div. Ce sera l' emballage du bar. Attribuons-lui une classe vidéo sur le wrapper. Ensuite, instituez un nouvel élément de division, qui sera le bar lui-même. Très bien, nous devons ensuite créer les boutons. Je suis sur les boutons Play Pause. Il sera créé à l'aide des icônes Font Awesome. Commençons par ouvrir une balise div, qui sera le wrapper Attribuons aux boutons de classe. Insérez ensuite ici une étiquette de bouton dans laquelle je vais passer l'icône Font Awesome. Par défaut, je vais insérer ici uniquement le bouton Play. Nous le transformerons en bouton pause plus tard en utilisant JavaScript. Assignons donc à l'Irlande le cercle de jeu de la FAR FAA. Très bien, voyons voir la vidéo. La seule chose que nous devons faire est de créer le paragraphe. Il s'agit donc d'ouvrir la balise P avec la section de classe de deux paragraphes. À l'intérieur du paragraphe, nous aurons le texte ainsi que les icônes Font Awesome pour les citations. Ouvrons la balise I avec une classe FAS, une citation à gauche. Ensuite, je vais créer un faux texte. Et enfin, passons ici à la seconde icône de Font Awesome. Nous avons besoin de cours, du FIS, d'un devis, non ? Très bien, le balisage est donc créé dès maintenant. Cela a l'air vraiment désordonné, nous devons donc nous en occuper La première chose que je vais faire est de réduire la taille de la vidéo car elle est trop grande pour le moment. Insérons de nouveaux commentaires dans le fichier CSS pour la deuxième section. Sélectionnez ensuite l'emballage vidéo largeur et la hauteur définies Je vais me mettre à 200 rampes. En ce qui concerne la hauteur, faisons-en une rampe de 50. Sélectionnez ensuite la vidéo elle-même et définissez sa largeur et sa hauteur sur 100 %. Et en plus de cela, je vais utiliser un couvre-pieds pour objets. Comme vous pouvez le voir maintenant, la taille de la vidéo est plus petite et nous pouvons commencer à personnaliser cette section. Allons-y et sélectionnons l'élément de section. Tout d'abord, je vais définir la largeur et la hauteur de cette section. Mettons-nous à 200 %. Pour ce qui est de la hauteur, je vais faire correspondre à 100 % de la fenêtre d'affichage Et aussi, définissons la couleur de fond. Je vais le rendre gris foncé. Utilisons la couleur jusqu'en 2020. OK. Ensuite, je vais aligner les éléments à l' aide de Flexbox. Réglons l'affichage pour qu'il soit flexible. Il alignera les éléments horizontalement. Ensuite, je vais les placer verticalement au centre. Utilisez donc l'alignement des éléments au centre et créez également de l'espace sur les côtés gauche et droit à l'aide d'un rembourrage Mettons-le à zéro et bronzons sur la rampe. C'est bon, c'est ça. En ce qui concerne l'élément section, passons à autre chose et personnalisons les éléments de titre. Nous allons sélectionner le titre de la section. Tout d'abord, je vais définir la famille de polices. Mettons le Sans-serif en gras. Cela augmente la taille de la police. Fais-le tourner. Et modifiez également l'épaisseur de la police pour la rendre plus légère. Réglons-le sur 300 et changeons de couleur, D. D. Comme vous pouvez le voir, le titre est stylé, mais il ne semble pas très bien pour le moment car il n'y a pas assez d'espace Je vais m' occuper de l'alignement de la vidéo et du paragraphe. Je vais régler la position sur absolue pour l'emballage vidéo Ensuite, nous avons besoin de la position relative pour cet élément de section car il s'agit de l'élément parent. Et nous devons positionner l'emballage vidéo fonction de la section Ensuite, définissez les propriétés supérieures et droites. Je vais attribuer la meilleure propriété à la fibrine. Pour ce qui est de la bonne position, faisons-en 15 rampes. D'accord. La vidéo est donc positionnée. Je vais maintenant m' occuper du paragraphe. Allons-y et sélectionnons cet élément. Définissons la largeur à 200 mètres. Ensuite, je vais définir la position sur absolue. Ensuite, définissez les propriétés du bas et de la droite. Je vais mettre la position inférieure à huit, courir comme pour trouver la bonne position, faisons 15 rampes. Le paragraphe est donc également une question de position. Et maintenant, le titre semble bon. Passons à autre chose et personnalisons la ligne qui sera placée sur le côté droit du titre. Nous allons donc sélectionner la ligne de titre de la section. Je vais définir sa largeur et sa hauteur, définies avec 215 RAM. Pour ce qui est de la hauteur, je vais me faire une idée de rampe. Et changez également la couleur d'arrière-plan, faites-la di, di, di. Bon, nous avons ici la ligne, comme vous pouvez le voir, nous devons créer un espace entre le titre et la ligne. Utilisons donc margin-right. Je vais l'attribuer à l'élément de titre. Mettons-le à la location. Très bien, nous avons maintenant un meilleur résultat. Ensuite, je vais ajouter un effet d'ombre à l'emballage vidéo Utilisons box-shadow avec les valeurs trois, exécutons trois fois. Et puis la valeur RGBA avec une couleur noire et une opacité de 0,7 En plus de cela, diminuons l'opacité de la vidéo. Mettons-le à 0,3. Très bien, c'est tout pour la vidéo pour le moment. Il est temps de passer à autre chose et de personnaliser les commandes vidéo. Tout d'abord, je vais m' occuper de leur position. Sélectionnons les éléments div du wrapper. Définit d'abord ce qui le rend 100 %. Définissez ensuite la position sur absolue, puis définissez la propriété inférieure, mettez-la à zéro. En plus de cela, je vais changer la couleur de fond. Utilisons à nouveau la valeur RGBA avec une couleur noire et une opacité de 0,7 OK, donc l'enveloppe des commandes est personnalisée. Ensuite, prenons soin du bouton. Ensuite, nous allons personnaliser la barre de durée de la vidéo. Choisissons le développement rapide et créons de l' espace à l'intérieur de celui-ci. Je vais créer de l' espace en utilisant du rembourrage. Réglons-le sur deux rem en haut, puis une RAM. Trois fois. Après cela, je vais arrêter le schéma lui-même. Je vais me débarrasser des paramètres par défaut, de l'arrière-plan et de la bordure. Mettons-les tous les deux à zéro. Et changez également le type du plus grossier, faites-le pointer. Juste après, personnalisons l'icône elle-même. Je vais augmenter la taille de sa police. Faisons-en 2,8 RAM , puis changeons la couleur. Faites-le blanc. OK, donc le bouton est personnalisé, il a l'air bien. Et maintenant je vais m' occuper de la barre vidéo. Sélectionnons la vidéo sur le wrapper, qui sera une sorte d' arrière-plan de la barre vidéo Je vais donc définir sa largeur. Faisons-le à 100 %. Réglez ensuite la hauteur de deux points de 0,7, puis modifiez la couleur d'arrière-plan en le rendant noir. Après cela, je vais m' occuper de sa position. Réglons la position sur absolue. Ensuite, nous trouvons les propriétés en haut et à gauche. Je vais les mettre tous les deux à zéro. Très bien, c'est tout pour le contexte. Maintenant, je vais styliser le bar lui-même. Réglons sa hauteur à 100 %. Donc par défaut, la largeur de la barre vidéo sera nulle, puis nous la ferons fonctionner en utilisant JavaScript. Mais pour l'instant, je vais lui donner une certaine largeur, disons 20 %. Et changez également la couleur d'arrière-plan. Faites-le D3, 0819. Très bien, la barre vidéo est donc personnalisée. Avant de le faire fonctionner, je vais commencer par le premier paragraphe ci-dessous. Réglons donc la taille de la police sur la RAM et changeons également la couleur. Utilise ta couleur D, D, D. Ensuite, je vais créer les bordures en haut et en bas. Utilisons donc la bordure supérieure, définissons-la sur 0,3, exécutons le double et la couleur AAA. Ensuite, je vais dupliquer cette ligne de code. Passons du haut au bas. Ensuite, je vais créer de l'espace à l'intérieur du paragraphe à l' aide d'un rembourrage Réglons-le sur deux RAM sur les quatre côtés. Très bien, après cela, je vais aligner les guillemets et le texte à l'aide de Flexbox Je veux les placer verticalement au centre. Réglons donc l'affichage sur Flex. Ensuite, je vais utiliser la direction flexible. Faisons-en une colonne. Pour centrer les éléments verticalement et horizontalement, nous devons utiliser justify-content center et aligner les éléments au centre Comme vous pouvez le constater, les éléments sont alignés. Ensuite, je vais justifier le texte du paragraphe. Utilisons donc des textes alignés sur la valeur justify. Et créons également un petit effet d'ombre en utilisant une ombre de texte dont les valeurs sont exécutées deux fois par rapport à exécuter. Et la valeur RGBA avec la couleur noire et l'opacité 0,7 Très bien, il est maintenant temps de s'occuper des codes. Je vais placer le premier sur le côté gauche. Quant au second, il sera placé sur le côté droit. Nous allons donc sélectionner la citation de gauche. Pour le placer sur le côté gauche, nous devons utiliser align self avec une valeur flex start. En plus de cela, je vais ajouter ici la taille de police 5 rem, et créer également de l'espace en bas. Définissons la marge inférieure à, pour courir. Très bien, allons-y et occupons-nous du deuxième élément Je veux dire, écrire du code. Dans ce cas, nous devons l'aligner pour qu'il soit flexible, puis augmenter la taille de la police, jusqu' flexible, puis augmenter la taille de la police, ce qu'elle soit cinq lignes. Les citations sont donc personnalisées et le paragraphe semble globalement bon. Enfin, je vais réduire légèrement la hauteur de la ligne. Mettons-le donc à 1,5. Très bien, le paragraphe sera terminé aussi. Il est personnalisé. Et maintenant je vais m' occuper de la vidéo. Je veux dire, je vais le faire fonctionner en utilisant JavaScript. 26. Projet 3 - Faire fonctionner les commandes vidéo personnalisées: Très bien, nous avons donc personnalisé la section À propos de nous et je vais maintenant faire en sorte que la vidéo fonctionne Cette partie sera créée à l'aide de JavaScript. Avant cela, je vais faire quelques choses en CSS. Je veux déplacer les commandes un peu vers le bas, et je vais aussi les masquer partiellement. Une fois que nous survolons la vidéo, les commandes apparaîtront Pour déplacer les commandes, je vais utiliser la fonction Transformer avec Translate. Dans ce cas, nous avons besoin de la direction Y. Comme je l'ai dit, je vais masquer partiellement les commandes. Nous n'avons donc pas besoin de déplacer l'élément de 100 %. Pour y parvenir, je vais utiliser la fonction de calcul Je vais soustraire le point pour la RAM à 100 %. Dans ce cas, une petite partie des commandes sera donc visible. Supposons donc que les commandes sont placées vers le bas et que pour les masquer, je vais utiliser overflow hidden Très bien, les commandes sont donc masquées. Ensuite, je vais les afficher une fois que nous aurons survolé la vidéo Nous allons donc sélectionner Video Wrapper avec le pointeur de la souris, puis les commandes Et je vais mettre transform translate y à zéro. Utilisons également la transition. Nous devons transformer 0,4 s. D'accord ? L'effet de survol fonctionne donc bien. Ensuite, je vais faire en sorte que les commandes fonctionnent. Passons au fichier JavaScript. Tout d'abord, associons votre nouvelle section de commentaires à une vidéo. Puis fin de la deuxième section de la vidéo. Ensuite, je vais créer quelques variables différentes pour sélectionner plusieurs éléments. La première sera la vidéo. Créons donc une nouvelle variable et sélectionnons la vidéo à l'aide de la méthode de sélection de requêtes Le prochain sera un bouton. Créons donc une nouvelle variable, btn, et sélectionnons Hi Elements Sélectionnons-le à l'aide de la méthode QuerySelector. Et je vais aussi sélectionner une barre vidéo. Nous nous en occuperons un peu plus tard. Quoi qu'il en soit, sélectionnons-le également. Créons une nouvelle variable, je vais l'appeler barre, puis sélectionnons les éléments en utilisant à nouveau la méthode de sélection de requête Très bien, donc tous les éléments nécessaires sont sélectionnés. Ensuite, je vais créer une fonction dans laquelle nous allons programmer la lecture de la vidéo ou la mettre en pause. Et nous exécuterons cette fonction une fois que nous aurons cliqué sur les boutons. Créons donc une nouvelle fonction. Je vais l'appeler Play Pose. Ainsi, lorsque nous cliquons sur le bouton Play, nous devons le passer au bouton Pause. Et nous devons également lire la vidéo. Pour lire la vidéo, nous pouvons utiliser l'une des méthodes intégrées appelées Play. Nous avons donc besoin de Video Dot Play. Maintenant, pour voir les résultats, nous devons appeler cette fonction, mais nous devons l'appeler une fois que nous avons cliqué sur l'icône. Je vais donc associer un écouteur d'événements au bouton à l'aide d'un événement de clic De plus, nous devons passer ici la fonction flèche, qui sera exécutée une fois que nous aurons cliqué sur le bouton. Nous devons maintenant appeler les fonctions playbooks. Donc, si nous cliquons sur le bouton, la vidéo se lancera. Pour le moment, le bouton ne change pas. Alors allons-y et occupons-nous de cela. Comme vous le savez, le bouton est représenté par une icône Font Awesome. Donc, une fois que nous avons cliqué dessus, nous devons changer le nom de la classe pour qu'il se transforme en bouton de pause. Je vais changer le nom de classe du bouton en utilisant l'une des propriétés appelées nom de classe. Nous avons besoin du nom de la classe btn point. Et nous devons passer ici les cours FAR, FAA, Pose, Circle Maintenant, si je clique sur le bouton, il passera au bouton de pause et la vidéo sera lue. Mais au clic suivant, rien ne se passera. Donc, une fois que nous avons cliqué sur le bouton Pause, nous devons mettre la vidéo en pause. Et nous devons également remettre le bouton sur la plaque. Nous devons donc utiliser une instruction if else dans laquelle nous devons définir si la vidéo est en pause ou non, puis nous devons définir les noms de classe des icônes en conséquence afin vérifier si la vidéo est en pause ou non Je vais utiliser l'une des propriétés appelée post Nous avons donc besoin d' un point vidéo comme condition. Donc, si c'est vrai, cela signifie que la vidéo n'est pas lecture et que l' icône de lecture s'affiche. Nous devons donc lire la vidéo et placer l'icône sur le bouton de pause. Nous devons instituer ces lignes. Si cette condition est fausse, cela signifie que la vidéo est en cours de lecture. Nous avons donc dû le poser et faire passer l' icône à la pièce. Mais créons une instruction else Copiez ensuite ces deux lignes et collez-les dans l'instruction else. Donc, au lieu de jouer avec la méthode, nous devons prendre la pose. Et nous devons également changer le nom de la classe au lieu des posts, nous avons besoin de Clay. Maintenant, si je clique sur le bouton Play, la vidéo commencera à jouer et le bouton changera. Et puis au clic suivant, la vidéo s' interrompt et l'icône redevient le bouton Play. Tout fonctionne donc bien jusqu'à présent. Ensuite, je vais modifier l'opacité de la vidéo selon qu'elle est en cours de lecture ou non S'il s'agit d'un post, nous garderons l'opacité telle qu'elle est. Mais s'il fonctionne, nous l'augmenterons. À l'heure actuelle, l'opacité est réglée sur 0,3. Nous devons donc l'augmenter dans les instructions if car nous disons ici que nous devons lire la vidéo, avec une opacité des points de style vidéo égale, disons, à 0,7 Ensuite, nous devons définir l'opacité à 0,3 dans l'instruction else, car nous allons mettre la vidéo en pause Je vais donc récupérer cette ligne de code. Collons-le ici et modifions l'opacité. Nous avons besoin de 0,3. Comme vous pouvez le constater, tout allait bien. La seule chose que nous devons faire est de rendre l'effet plus fluide en utilisant la transition. Utilisons la transition avec une opacité de 0,3 s. Très bien, nous avons maintenant un bien meilleur résultat Maintenant, il est temps de prendre soin de la barre vidéo. À l'heure actuelle, il a une largeur fixe. Alors dans un premier temps, mettons-le à zéro. Nous devons donc augmenter la largeur de la barre vidéo fonction de la mise à jour de la durée de la vidéo. Je vais utiliser l'un des événements DOM appelé time update. Cet événement se produit une fois que la vidéo ou l'audio est en cours de lecture. Attachons donc à la vidéo et à l' écouteur d'événements une mise à jour de l'heure Évènements. Passez également ici la fonction flèche. À chaque mise à jour de l' heure de la vidéo. Cette fonction sera exécutée. Très bien, nous devons maintenant définir la largeur de la barre vidéo. Pour cela, je vais utiliser deux propriétés différentes. Ils sont actuels, temporels et de durée. Dans un premier temps, je vais vous les montrer dans la console. Passons en revue la console. Points vidéo, heure actuelle et durée des points vidéo. Inspectons la page et passons à l'onglet console. Donc, une fois que j'aurai cliqué sur le bouton Play, nous aurons le temps de lecture actuel ainsi que la durée de la vidéo. Pour définir la largeur de la barre vidéo, nous devons diviser l'heure actuelle de la vidéo par la durée. Et nous devons exprimer ce montant en pourcentage. Créons donc une nouvelle variable, je vais l'appeler bar. La largeur sera égale aux doutes de la vidéo, heure actuelle divisée par la durée des points vidéo. Maintenant, nous devons multiplier ce montant par 200 et l'exprimer en pourcentage. Le résultat de ce calcul sera la largeur de la barre. Insérons donc la largeur du point de votre style de barre égale à la largeur de la barre multipliée par 100, suivie du signe de pourcentage. OK, alors maintenant si nous lisons la vidéo, la barre vidéo commencera à se charger. Donc tout fonctionne bien pour le moment, l'effet de chargement n' est pas très fluide. Nous devons utiliser la transition. Instituons donc ici la largeur plutôt que la durée 0,2 s. Et je vais également rendre la transition linéaire. D'accord ? Nous avons donc maintenant de meilleurs résultats. En fait, nous avons presque terminé cette section. Nous avons juste besoin d'ajouter quelques éléments à la vidéo. Une fois qu'il est joué. Je veux dire, une fois que c'est terminé, je veux replacer l'icône sur le bouton de lecture. Je vais également réduire l'opacité afin de déterminer si la vidéo est terminée ou non Je vais utiliser l'une des propriétés appelées cellule terminée Créons une instruction if dans laquelle nous devons vérifier si la vidéo est terminée ou non. Donc, comme condition dont nous avons besoin ici, video point Android. Donc, si cette condition est vraie, nous devons changer l'icône. Nous avons besoin du nom de la classe btn point. Ce sera loin d'être un terrain de jeu. Et nous devons également réduire l'opacité. Nous avons besoin d'une opacité des points de type vidéo, 0,3. Donc, si je lance la vidéo et que j'attends qu'elle le soit, vous verrez que l'icône est modifiée et que l'opacité diminue Très bien, nous avons enfin fini de travailler sur la deuxième section Passons à la suivante. 27. Projet 3 - Créer et personnaliser la section cartes de tarification: D'accord, nous avons donc fini de travailler sur la deuxième section, qui était une section À propos de nous. Et maintenant, nous devons passer à autre chose et commencer à construire le suivant. La section suivante sera la section des prix. Rappelons-nous à quoi ressemble cette section. Nous avons donc ici un titre et pour différentes fiches de prix avec différentes offres de prix pu les faire glisser avec une souris, allons créer cet effet en utilisant l'un des plugins JavaScript appelé swipe ou JS Tout d'abord, je voulais créer et personnaliser les cartes. Ensuite, nous allons utiliser le plugin et les faire fonctionner. Allons-y et commençons à créer le balisage HTML. Je vais insérer de nouveaux commentaires, section 3. Et la troisième section. Ouvrez ensuite l'élément de section avec la section de classe trois. Donc, comme nous l'avons dit, cette section comprendra le titre et la tarification des voitures. Le titre avec sa ligne sera similaire au titre que nous avons créé dans la section précédente. Et il sera également similaire au titre des sections suivantes. Je vais donc ouvrir la balise d' en-tête H1 et lui attribuer un nom de classe similaire, un titre de section En ce qui concerne le contenu, je vais vous faire part de vos tarifs plutôt que d'ouvrir une balise div avec le titre de la section de classe. Comme vous pouvez le constater, le titre comporte déjà certains styles. Très bien, passons à autre chose et créons les cartes. Ouvrons une étiquette div, qui va être l' enveloppe des cartes Je vais l'attribuer à l'emballage des cartes de prix de classe. Ensuite, nous avons besoin d'une autre balise div pour l'appel lui-même. Ainsi, chaque voiture sera composée d' une face avant et d'une face arrière. Ouvrons le tag div, qui sera le recto attribué au recto de la carte de tarification du cluster La face avant sera composée de deux éléments différents. Il comportera deux rubriques pour le nom de l' auteur et le prix Ensuite, ils seront suivis de la liste dans laquelle vous aurez des offres d'articles avec des icônes Font, Awesome. Enfin, nous aurons un bouton. En ce qui concerne le verso, nous n'aurons qu'un seul élément de lien. Très bien, allons-y et insérons ici tous ces éléments Je vais commencer par les titres. Ouvrons le titre H1, le tag, le titre de la carte de tarification de classe Ce sera le nom de classe courant , mais en plus de cela, je vais y ajouter une autre classe pour le tuilage de certaines personnes La première colonne portera sur une offre gratuite. On lui assigne donc un titre de classe libre. OK. Ensuite, nous avons besoin d' un autre élément de titre pour le prix ouvert. Étiquette d'en-tête H3 avec la fiche de prix de la classe, le prix. Et pour le prix, je vais vous indiquer zéro. C'est la syllabe des titres. Passons à autre chose et créons la liste. Je vais ouvrir l'étiquette UL avec la liste des cartes de prix des cours. Et je vais aussi utiliser une autre classe pour le style individuel. Insertons votre moins libre. Ouvrez ensuite la balise LI. Je suis dans l'élément de la liste. Ainsi, chaque élément de la liste sera composé d'une icône Font Awesome et de quelques textes. Ouvrons le tag I avec une classe FAS, FA, vérifiez. Ce sera la case à cocher. Ouvrez ensuite la balise span. En fait, je ne vais pas spécifier ici différents éléments. Insérons simplement l'élément de la carte de prix. Vous pouvez vous sentir libre et utiliser différents objets, mais je ne vais pas perdre de temps là-dessus. Ainsi, dans la première carte, nous aurons cinq éléments de liste. Dupliquons l' élément LI quatre fois. La seule chose que je vais faire est de changer les icônes Font Awesome pour les trois derniers éléments, les deux premières icônes seront des coches. Quant aux trois dernières icônes, elles seront accessibles. Nous avons donc besoin de FIS f a fois. Très bien, donc le dernier élément sur la face avant sera un bouton attribué à la carte de prix du cluster, btn Et nous avons également besoin ici d' une autre classe pour les styles individuels, gratuite. Et comme contenu que je vais insérer ici, choisissez le plan. OK, donc c'est tout pour la face avant. Passons à autre chose et sortons de l'arrière. Ouvrons le div tag avec le dos d'une fiche de prix de classe. Et nous avons également besoin d' un autre cours gratuit. Nous allons maintenant insérer les éléments du lien dans l'ordre du contenu. D'accord ? Nous avons donc ici la première carte. Au total, nous aurons quatre cartes, donc je vais dupliquer le code trois fois. Ensuite, nous devons apporter quelques modifications La deuxième carte sera donc basique. Ensuite, je vais changer la classe du titre pour en faire un titre base par rapport à ce dont nous avons besoin ici. Prix différent, disons 299$. Modifiez également la classe des éléments de liste dont nous avons besoin ici, au moins de manière basique. En ce qui concerne les icônes Font Awesome. Dans ce cas, les quatre premiers éléments seront des cases à cocher Quant au dernier, il devrait s'agir de x. Changeons également la classe du bouton. Nous avons besoin ici, de base. Ensuite, nous avons besoin que vous retrouviez les bases. Très bien, voyons ce qu'il en est de la deuxième carte. Passons à la troisième carte qui va être standard. Modifiez également la classe du titre. Nous avons besoin d'un cap standard. Le prix va être de 699$. Modifiez ensuite la classe des éléments UL. Nous avons besoin au moins de normes. Donc, dans ce cas, nous aurons tous les éléments avec une icône en forme de coche Ensuite, je vais modifier les classes pour le bouton et pour le verso. Nous avons besoin de normes dans les deux cas. Bon, passons au dernier accord. Ça va être premium. Modifiez la classe du titre. We need heading premium a également modifié les prix. Nous avons besoin ici de 999$. Alors nous avons besoin ici d' au moins une prime. Donc, dans le cas d'une offre premium, nous aurons six articles. Dupliquons donc les demandes de l'élément LI. Cochez toutes les icônes. Ensuite, changeons les classes du Bateson et du backside Nous avons besoin d'une prime. Très bien, en ce qui concerne le balisage HTML, tous les éléments sont créés et nous sommes maintenant prêts à commencer Insérons de nouveaux commentaires dans le fichier CSS de la section 3. Sélectionnez ensuite un élément de section. Tout d'abord, définissez en hauteur et je vais régler la largeur à 100 %. Quant à la hauteur, elle représentera cent pour cent de la fenêtre d'affichage Et changez également la couleur d'arrière-plan. Je vais donc utiliser la couleur 0, 3o7oe. OK, ensuite je vais aligner les éléments horizontalement dans une rangée à l'aide de Flexbox. Réglons l'affichage pour qu'il soit flexible. Et placez également les éléments au centre verticalement. Pour cela, nous devons aligner les éléments au centre. Enfin, je vais créer un espace sur le côté gauche à l'intérieur de cette section, utilisant le rembourrage laissé avec la valeur Tan ramp OK, donc comme nous l'avons déjà dit, nous n'avons pas à toucher le titre et la ligne. Ce sont tous ces onglets. La seule chose que je vais faire est de récupérer le code CSS des deux éléments et de le placer dans les styles courants. OK, ensuite je vais sélectionner l'emballage des courts. Je vais placer les cartes côte à côte horizontalement. Dans un premier temps, définissons la largeur de l'enveloppe. Je vais y arriver à 100 %. Réglez ensuite l'affichage pour qu'il soit flexible et créez également un espace entre les cartes en utilisant Justify Content Space de manière uniforme. Bien, comme vous pouvez le voir, les cartes sont alignées et je vais maintenant commencer à les styliser. Nous allons sélectionner la carte et définir sa largeur et sa hauteur. Je vais régler la largeur à 28 RAM. Comme c'est assez élevé, ce sera 45 RAM. Et changez également la couleur d'arrière-plan. Je vais utiliser ici la couleur 181, B1. Très bien, maintenant les cartes sont déjà bien visibles Ensuite, je vais les arrondir et je veux aussi leur ajouter un effet d'ombre. Réglons donc le rayon sur une RAM. Ensuite, utilisez box-shadow avec des valeurs en RAM, deux fois plus que six RAM Et comme couleur, utilisons le RGBA avec une couleur noire et avec une opacité de 0,7 OK, donc c'est tout pour la carte. Ensuite, je vais m' occuper de la face avant. Sélectionnons-le et définissons-le en hauteur. Je vais les faire tous les deux à 100 % Ensuite, je vais aligner les éléments en utilisant à nouveau Flexbox. Réglons l'affichage pour qu'il soit flexible. Que pour placer les éléments verticalement dans une colonne, nous avons besoin que la direction de flexion soit une colonne. Ensuite, je vais les placer horizontalement au centre. Pour cela, utilisons l' alignement des éléments au centre, puis créons un espace entre eux à l'aide du contenu de justification. Espace entre. OK, donc c'est tout pour la face avant. Ensuite, je vais prendre ici le titre. Je suis dans le premier élément de titre de la voiture. Sélectionnons-le. Tout d'abord, définissons sa taille de police, faisons en sorte qu'elle s'exécute. Ensuite, je vais rendre la police plus claire. Réglons la taille de police sur 300. Et changez également la couleur, rendez-la blanche. Bon, je vais maintenant définir la largeur et la hauteur du titre. Et je vais également légèrement modifier la position des textes. Alors, fixons-nous à 200 %. Pour ce qui est de la hauteur, faisons-en cinq Ram. Ensuite, je souhaite placer le texte verticalement au centre à l'aide de Flexbox. Je vais donc régler l'affichage pour qu'il fléchisse, puis aligner les éléments au centre. Enfin, créons un espace sur le côté gauche du texte à l'aide d'un rembourrage Rembourrage à gauche. Réglons-le pour qu'il fonctionne. Bon, il est maintenant temps d'ajouter la couleur d'arrière-plan aux éléments de titre. Comme vous vous en souvenez, ils ont des couleurs de fond différentes. Je leur ai attribué un nom de classe individuel. Allons-y, sélectionnons-les séparément et définissons les couleurs d'arrière-plan. Je vais commencer par un troisième titre. La couleur de fond aura donc un certain dégradé. Utilisons un dégradé linéaire. La transition va se faire de gauche à droite. En ce qui concerne les appelants, utilisons ici le 087285 Et nous avons également besoin de l'APD 5, D3. Le premier titre a la couleur de fond. Mais pour l'instant, nous avons ici un petit problème. Dans les coins en haut à gauche et en haut à droite. Nous n'avons plus le rayon de la frontière. Alors allons-y et réglons ce problème. Je vais utiliser Border-Radius. Utilisons jusqu'à vous les valeurs suivantes. Nous avons besoin de 1 g deux fois, je veux dire, une RAM comme valeur des coins en haut à gauche et en haut à droite En ce qui concerne le reste des valeurs, cela doit être zéro. Très bien, maintenant le problème est résolu. Passons à autre chose et changeons les couleurs d'arrière-plan pour le reste des titres. Je vais dupliquer ce code trois fois, puis apporter quelques modifications. La deuxième rubrique va être basique. Et comme couleurs, utilisons 946809. Ensuite, le prochain sera bd, AOE. Ensuite, nous aurons la norme. En ce qui concerne les couleurs qui vont être un 1014. Ensuite, nous aurons de a0 à a3. Sois gratuit. Car le dernier titre sera premium avec les couleurs suivantes. 0748 puis trois be286. D'accord ? Ainsi, tous les éléments de titre ont les couleurs d'arrière-plan appropriées. Et en fait, avec les premières rubriques, nous en avons terminé. Passons à autre chose et réglons le prix. Sélectionnons le prix de la carte de tarification. Tout d'abord, je vais définir la famille de polices. Utilisons vos appels téléphoniques passés avec du maïs sans empattement plutôt que d' augmenter la taille de la police, faire sept RAM Allégez la police. Réglons-le sur 300. Et puis changez la couleur, faites-la blanche. Très bien, donc le prix semble bon. Ensuite, nous devons nous occuper des éléments de la liste 28. Projet 3 - Faire fonctionner les cartes de tarification à l'aide de Swiper: Très bien, passons à autre chose et personnalisons le reste des éléments de la carte Ensuite, nous avons la liste, qui comprend la police, icônes Awesome et quelques valeurs de texte. Tout d'abord, sélectionnons l'île et augmentons sa taille de police, faites-la 1,8. Courez. Ensuite, prenons ici les éléments de la plage. Sélectionnons-les. Je vais définir la taille de la police, en faire 1,8 RAM. Réglez ensuite l'épaisseur de police sur 300. Et créez également un espace entre les lettres. Faites-le 0,1 rem. Très bien. Je vais maintenant créer le même espace entre les icônes et les éléments de texte. Pour cela, définissons la largeur des éléments I. Je vais en faire trois rampes. D'accord, il est maintenant temps de changer les couleurs des éléments de la liste. À titre indicatif, je vais définir une couleur différente pour chaque liste. heure actuelle, chaque élément de la liste porte le nom de classe individuel. Allons-y donc et sélectionnons les éléments de la liste séparément. Nous en avons besoin d'au moins trois, suivis de l'élément LI. Dans ce cas, nous allons changer la couleur des deux éléments. Je suis dans l'icône Font Awesome, ainsi que dans l'élément span. Mettons la couleur à zéro, d Phi d trois. Dupliquons ce code trois fois , puis changeons les noms des classes et les appelants. Nous avons donc besoin du minimum de base. Et la couleur va être BD BA II. Ensuite, nous aurons la liste standard. Et la couleur va être comprise entre a0 et a3. Sois gratuit. Enfin, il faut au moins du premium avec la couleur 3286. Très bien, donc les éléments de la liste sont beaux. La seule chose que je vais faire est d' augmenter légèrement l'espace entre eux. Sélectionnons donc les éléments LI et définissons la rampe inférieure à 2,5 de la marge. OK, donc c'est tout pour la liste, ils ont l'air bien. Nous devons maintenant passer à l'élément suivant, qui sera un Batson Nous allons donc le sélectionner. Je vais d'abord définir sa largeur et sa hauteur. Allons-y avec 218 RAM. Quant à la hauteur, faisons-en cinq RAM. Créez ensuite un espace en bas en utilisant la marge inférieure avec la valeur trois Ran. Bien, passons à autre chose et ajoutons d'autres styles au bouton. Arrondissons-le en utilisant border-radius avec une valeur de trois RAM Je vais également me débarrasser de la bordure par défaut. Mettons-le à zéro. Augmentez ensuite la taille de police du texte. Faisons-en une RAM 1.6, et mettons-la également en majuscules Très bien, donc les boutons sont jolis. Maintenant, comme pour les autres éléments, nous devons définir différentes couleurs de fond pour les boutons. Ils ont également les noms des classes individuelles. Allons-y donc et sélectionnons-les séparément. Je vais commencer par un BTN gratuit. Réglons la couleur sur zéro, DA cinq, D3. La couleur d'arrière-plan du premier bouton est modifiée. En fait, nous devons changer la couleur du texte. Et je vais aussi y ajouter un petit effet d'ombre. Réglons la couleur sur le blanc. Utilisez ensuite une ombre de texte avec une valeur de 0,3. Exécutez deux fois plus que ce dont nous avons besoin de 0,6 RAM. Et la valeur RGBA avec la couleur noire et l'opacité 0,5 D'accord, nous avons maintenant un bien meilleur résultat. Allons-y et changeons les couleurs d'arrière-plan pour le reste des boutons. Je vais dupliquer ce code trois fois, puis changer les noms des classes et les couleurs. Le deuxième bouton sera btn basic. En fait, nous avons besoin des mêmes couleurs que celles que nous avons utilisées pour la liste. Je vais donc les récupérer d'ici. Le bouton suivant sera standard. Copions la couleur. Et le dernier sera BTN Premium avec ces couleurs Bien, cela dit en ce qui concerne les boutons et en fait avec le recto de la carte, nous avons terminé Ensuite, je vais personnaliser le verso. Ensuite, nous utiliserons le plugin JavaScript appelé swipe ou dot js Tout d'abord, je vais faire pivoter la carte de 180 degrés Afficher le verso de la carte. Nous devons donc effectuer une rotation dans la direction y et comme valeur l' infini ici, 180 degrés. Ensuite, je vais sélectionner le verso. Tout d'abord, définissons cette position. Je vais le régler sur Absolu. Définissez ensuite les propriétés du haut et de la gauche. Je vais les mettre tous les deux à zéro. Ensuite, pour étendre le verso à l'ensemble de la carte, nous devons régler la largeur et la hauteur, toutes deux à 200 %. Ensuite, utilisez une couleur d'arrière-plan temporaire. Mettons-le en blanc. Nous avons donc ici le verso. Je vais placer le contenu au centre à l'aide de Flexbox. Comme vous le savez, nous devons utiliser Display Flex, puis le centre Justify-content et le centre Align Items Comme vous pouvez le constater, l'élément de lien s'affiche dans la direction opposée. Nous devons donc le faire pivoter. Utilisons Transform, Rotate Y comme valeur moins Institute 180 degrés. Et en plus de cela, je vais arrondir le dos. Nous avons besoin de border-radius avec la valeur 1 exécutée. Très bien, il est maintenant temps de personnaliser l'élément de lien. Mais avant cela, je vais changer les couleurs de fond. Les quatre cartes doivent avoir des couleurs d'arrière-plan différentes. Ils seront similaires à la couleur de fond que nous avons utilisée pour les premiers éléments de titre de la carte. Sélectionnons donc sans bogues , puis reprenons la couleur d' arrière-plan de l'élément de titre Dupliquons ce code trois fois. Nous devons changer les noms des classes. Le second va revenir à la base. Ensuite, remontez et saisissez la couleur d'arrière-plan. Ensuite, nous aurons le standard. Enfin, nous devons soutenir le premium. Et je vais aussi me débarrasser de la couleur de fond blanc temporaire. OK, il peut donc voir toutes les faces arrière des cartes ont une couleur de fond différente. Enfin, je vais commencer par les éléments du lien. Sélectionnons-le. Je vais augmenter la taille de sa police. Faisons en sorte que 2,5 rimes. Et réglez également la couleur sur le blanc. Très bien, les cartes sont donc personnalisées. Je veux dire des deux côtés, devant et derrière. Et maintenant, il est temps d'utiliser le plugin Java appelé swipe ou JS Avant cela, je vais retourner les cartes. Débarrassons-nous donc transformation avec la fonction Rotate à partir d'ici. Allons-y et visitons le site Web. Je vais rechercher swipe ou dot js. Voici donc le site Web de ce plugin. Allons-y et cliquez sur les démos. Nous pouvons donc consulter ici différentes versions de démonstration de ce slider. Sur le côté gauche de la page Web, nous avons une barre latérale où vous pouvez trouver de nombreuses versions différentes de ce curseur Je ne vais pas perdre de temps là-dessus. Vous pouvez vous sentir libre et les essayer. Je vais utiliser un curseur appelé effet 3D Cover Flow. Alors le voici. Pour utiliser ce curseur, il existe différentes manières Vous pouvez soit télécharger les fichiers source et les lier au projet, soit nous pouvons simplement utiliser les liens CDN. Passons à la première page. Je veux dire, commencez. Nous avons donc ici les liens CDN pour CSS et JavaScript. Vous pouvez trouver ici deux versions du plugin. Le premier est irrégulier. Quant à la seconde, il s'agit de la version réduite. Je vais récupérer les premiers liens. Nous devons donc coller le lien CSS dans les éléments de tête. En ce qui concerne le JavaScript, le lien sera placé ci-dessous. Très bien, ensuite, revenons aux démos et cliquez sur le code source Nous allons accéder à une page GitHub où vous trouverez le code source pour HTML, CSS et JavaScript Jetons un coup d' œil au code HTML. Nous avons donc ici un swipe par conteneur et un swipe un rappeur, suivi de ces diapositives Wipro Ces swipe ou slides seront nos cartes de prix. Ensuite, ce y par conteneur va être créé. En ce qui concerne le swipe ou l'emballage, ce sera notre emballage de cartes de prix Allons-y donc et attribuons au wrapper des cartes de prix une nouvelle classe, un nouveau swipe ou Créez ensuite un nouvel élément div en dehors du swipe, un Nous avons besoin de ClassName swipe par conteneur. Terminons par cet élément, l'ensemble du contenu. En plus de cela, nous avons dû attribuer à chaque fiche de prix le nom de la classe, swipe slide Comme vous pouvez le constater, tout est foiré ici car dans les coulisses , d'autres codes fonctionnent à partir du plug-in Nous allons régler ces problèmes dans une minute. À l'heure actuelle, les cartes sont trop grandes. La largeur et la hauteur ne leur sont plus appliquées en conséquence. Pour résoudre ce problème, je vais ajouter les deux valeurs. Important. Alors maintenant, le problème est résolu. Ensuite, je vais récupérer le code JavaScript de la page GitHub Accédez au fichier script.js et insérez vos nouveaux commentaires. Section 3 : cartes de prix. Section 3 cartes de prix et collez-les ici. Le code JavaScript. En fait, nous n'avons pas besoin de la pagination, alors débarrassons-nous de ces propriétés Alors maintenant, comme vous pouvez le constater, tout fonctionne bien. Avant de terminer de travailler sur cette section, je voudrais faire deux choses. Comme vous pouvez le voir, nous avons ici un objet appelé effet de débordement Il existe différentes propriétés ici. L'un d'eux est la rotation. instant, il est fixé à 50 et je vais augmenter a. Passons à sept. Maintenant, je pense que nous avons un meilleur résultat. La dernière chose que je vais faire est de créer de l'espace à l'intérieur de l'emballage Allons-y et réglons le rembourrage à cinq rem. Très bien, alors c'est ça. Enfin, nous avons terminé de travailler sur cette section. Passons à autre chose. 29. Projet 3 - Créer et styliser la section de conception: Très bien, étape par étape, nous avançons et il est maintenant temps de créer l'une des dernières sections de ce projet, appelée contextes Jetons un coup d'œil au projet terminé. La section de contact se compose donc de deux parties différentes. Nous avons un cap sur le côté gauche. En ce qui concerne le côté droit, vous pouvez voir ici quelques coordonnées et quelques champs de saisie avec un bouton d'envoi. Allons-y et commençons à créer le balisage HTML. Comme d'habitude, insérons de nouveaux commentaires pour la section 4. Ouvrez ensuite la balise de section, la section Nom de la classe. Pour la suite, je vais créer le titre et la ligne. Ouvrons donc la balise de titre H1 avec le titre de la section de classe Et avec le contact du contenu. Ensuite, nous avons besoin de la ligne. Ouvrons donc la balise div avec une ligne de titre de section de classe. OK, ensuite je vais ouvrir la balise div, qui sera l' enveloppe du contenu Le contenu sur le côté droit de cette section, je vais l' appeler contact wrapper Cet élément comprendra donc trois parties différentes, mais nous aurons les coordonnées, titre et le formulaire lui-même. Ouvrons une autre balise div pour les informations de contact. Cet élément inclura donc les numéros de téléphone, les adresses et les e-mails avec les icônes Font, Awesome. Ouvrons une balise div avec le téléphone de la classe. Nous aurons donc ici une icône Font Awesome menant aux paragraphes. Ouvrons l'élément I dont la classe est un s, un Alt mobile. Ensuite, je vais ouvrir la balise d'en-tête h3 avec le téléphone de contenu Créez ensuite un paragraphe avec un numéro de téléphone fictif. Et puis créez à nouveau un autre paragraphe avec un domino. Ensuite, nous aurons des adresses. Ouvrons donc la balise div avec une adresse de classe. Ensuite, nous avons besoin de l'icône Font Awesome. C'est donc un élément I ouvert avec les classes FAS, une carte, un marqueur, ALT Ensuite, nous avons besoin de la balise d'en-tête h3 avec l'adresse du contenu. Enfin, créez deux paragraphes avec deux adresses fictives différentes OK, donc la prochaine partie sera un e-mail contenant la balise open div avec l'e-mail de la classe Encore une fois, nous avons besoin d'éléments IS dont la classe est FAR FA, enveloppe alors que l'en-tête sera un e-mail. Enfin, instituons deux paragraphes avec deux adresses e-mail différentes. Le premier sera supported@gmail.com. Et puis appelons cette deuxième adresse e-mail sales@gmail.com. Très bien, c'est tout pour les coordonnées. Ensuite, je vais créer un titre. Ouvrons la balise d'en-tête H1 avec un contenu. Entrez en contact. Et maintenant, nous devons créer la dernière partie de la section du contrat, qui va être déformée Ouvrons la balise de formulaire avec le formulaire de contact de la classe. Je vais donc vous insérer dans les éléments de saisie, zone de texte et dans le bouton d' envoi. Ouvrons la balise de saisie avec le texte saisi avec l'attribut placeholder Insérez votre nom. Dupliquez ensuite cette ligne de code, modifiez le type. Ce sera un e-mail. Quant à la valeur de l'attribut d' espace réservé, il s'agira de votre e-mail Ensuite, nous avons besoin de la zone de texte, qui contiendra l'attribut d' espace réservé, valorisera votre message Enfin, nous avons besoin du bouton Soumettre. Il va être créé à l'aide d'une entrée. Élément. Le type va être soumis. Et nous devons également valoriser le message envoyé. Très bien, nous avons donc ici le balisage HTML, le titre et la ligne sont déjà Quant au reste des éléments, ils ont l' air vraiment moches. Alors allons-y et occupons-nous de cela. Je vais insérer de nouveaux commentaires dans le fichier CSS, section quatre. Et hors section 4. Sélectionnez ensuite les éléments de cette section et définissez sa largeur, hauteur ainsi que la couleur de fond. La largeur sera de 100 %. Ensuite, nous avons besoin que la hauteur soit égale à 100 % de la fenêtre d'affichage, probablement comme couleur d'arrière-plan Utilisons votre couleur 171718. Ça va être gris foncé. OK, ensuite je vais aligner les éléments horizontalement dans une rangée, et je veux aussi les placer verticalement au centre. Pour ça. Comme d'habitude, je vais utiliser Flexbox. Réglons l'affichage pour qu'il soit flexible Ensuite, nous devons aligner les éléments au centre. Je vais également créer de l'espace au lieu de cette section sur les côtés gauche et droit Utilisons un rembourrage avec une valeur de zéro et faisons demi-tour OK, passons à autre chose et occupons-nous du rappeur de contact. Il se compose de trois parties. Nous avons les coordonnées, la rubrique et le formulaire. Je vais les aligner à l'aide de Flexbox. Nous allons donc sélectionner l'élément wrapper div. Je suis en contact avec le rappeur. Tout d'abord, je vais régler la largeur à 80 %. Utilisez ensuite flexbox. Nous avons besoin de Display Flex. Ensuite, nous devons placer les éléments verticalement dans les colonnes afin de changer la direction dans laquelle nous créons la colonne. Ensuite, utilisez Aligner les éléments au centre. OK, donc pour l'instant les trois parties sont alignées. Ensuite, je vais m' occuper de chacun d'eux. Commençons par les coordonnées, comme l'emballage. Je vais donc placer les trois parties horizontalement d'affilée. Réglons donc l'affichage pour qu'il soit flexible, puis créons de l'espace en bas en utilisant la marge inférieure à huit Ran. En fait, nous n'avons pas ici l'icône de l'adresse. Vérifions le code. Comme vous pouvez le constater, nous devons nous débarrasser du tableau de bord à partir d'ici. Très bien, après cela, je vais séparer les détails Nous allons donc sélectionner les éléments div. Réglez sa largeur à 25 RAM. Ensuite, je vais placer le texte au centre et créer cet espace autour des éléments en utilisant la marge. Mettons-le à louer. D'accord, donc chaque élément div se compose d'un titre d'icône Font Awesome et de paragraphes vides Allons-y et personnalisons-les. Je vais commencer par les icônes. Sélectionnons les éléments I. Augmentez sa taille de police, faites-lui cinq RAM, puis changez la couleur, faites-en 781010 Les icônes sont stylisées. Ensuite, je vais personnaliser les titres. Sélectionnons les éléments de titre h3. Tout d'abord, je vais changer la famille de polices. Utilisons ici made Soul Maze San-Serif plutôt que d'augmenter la taille de la police, de la faire Je vais également créer de l'espace en haut et en bas du hareng Réglons la marge sur RAM et zéro et changeons également la couleur. Je vais utiliser votre couleur ccc. Très bien, c'est tout à propos des titres. Passons à autre chose et prenons soin des paragraphes. Sélectionnons p éléments. Je vais définir la taille de la police. Faisons-en 1,6 RAM, puis changeons la couleur. Dans ce cas, je vais utiliser la couleur ou AAAA. OK, comme vous pouvez le voir avec les coordonnées, nous avons terminé. Il est maintenant temps de commencer le titre. Et puis le formulaire lui-même. Nous allons sélectionner les éléments de titre H1. Je vais augmenter la taille de la police. Faisons en sorte qu'il soit plein de RAM. Changez ensuite la couleur. Utilisons ici call ou CCC. Ensuite, je vais transformer le texte en majuscules. Et crée enfin de l'espace en bas. Utilisez la marge inférieure avec la valeur 3 comme rampe. D'accord ? Comme vous pouvez le voir, le titre est stylisé et nous devons maintenant passer à autre chose et nous occuper du formulaire Nous allons donc sélectionner le formulaire de contact. D'abord. Je vais régler sa largeur à sept en RAM. Ensuite, je vais aligner les éléments à l'aide de Flexbox. Réglons l'affichage pour qu'il fléchisse et changeons de direction. Fais-le les appeler. D'accord, donc les champs de saisie sont placés verticalement dans une colonne. Comme vous le savez, nous avons ici deux champs de saisie, une zone de texte. Ils auront des styles communs. Allons-y et sélectionnons à la fois la zone de saisie et la zone de texte. Donc, tout d'abord, je vais créer de l'espace à l'intérieur des champs. Réglons le rembourrage sur 1,5 run, puis changeons la couleur d'arrière-plan Je vais le rendre gris foncé en utilisant pour quatre. Changez ensuite la couleur du texte. Faisons en sorte que ce soit e. De plus, je vais me débarrasser de la bordure par défaut. Mettons-le à zéro. Et puis créez de l'espace bas dans la marge en bas pour exécuter. Maintenant, les éléments sont bien meilleurs et nous devons nous occuper des polices. Définissons la famille de police sur Oswald san-serif. Ensuite, je vais augmenter la taille de la police. Réglons-le sur 1,8 RAM. Allégez également la police. Réglons l'épaisseur de la police à 300 et augmentons l'espace entre les lettres. Réglons-le sur 0,1 rampe. Très bien, donc les entrées et la zone de texte, ou un style, ont une belle apparence Nous avons utilisé certains styles courants pour les entrées et la zone de texte, mais nous avons besoin de quelques autres styles pour la zone de texte et le bouton Soumettre. Comme vous le savez, vous pouvez modifier manuellement la largeur et la hauteur de la zone de texte à partir du coin inférieur droit. Si nous le faisons, cela va gâcher la mise en page. Nous devons donc limiter la largeur et la hauteur de la zone de texte d'une manière ou d'une autre. Pour cela, je vais utiliser des propriétés telles que la largeur maximale, hauteur maximale et la hauteur moyenne Nous allons donc sélectionner la zone de texte. Je vais définir la largeur maximale à 100 %. Définissons ensuite la hauteur maximale, définissons-la à 15 RAM. En ce qui concerne la hauteur minimale, je vais la régler sur une rampe de 5,5. Maintenant, comme vous pouvez le voir, nous pouvons augmenter légèrement la taille de la zone de texte. Très bien, le dernier élément que nous devons personnaliser est le bouton d'envoi. Alors occupons-nous de ça. Et je vais sélectionner le bouton Soumettre en utilisant l'attribut de type dont nous avons besoin ici Soumettre. Changeons la couleur de fond. Je vais utiliser votre couleur 781010, puis transformer le texte en majuscules et modifier le type de cours en créant un pointeur Le bouton d'envoi est donc stylé, il est joli. Enfin, je vais créer un petit effet de survol. Je souhaite modifier légèrement la couleur d' arrière-plan du bouton lorsque vous passez la souris. Nous allons donc sélectionner le bouton d'envoi avec le pointeur de la souris. Changez la couleur d'arrière-plan. Utilisons votre couleur 50303. Ensuite, utilisez la transition avec la couleur d'arrière-plan. Et avec une durée de 0,3 s. Très bien, c'est tout La section de contact est créée et mise en forme. Passons donc à autre chose. 30. Projet 3 - Créer et styliser le pied de page: Très bien, nous avons donc presque terminé la construction de nos projets Il est temps de créer la dernière partie, qui sera le pied de page Ce sera simple. Nous aurons les éléments de navigation sur le côté gauche. En ce qui concerne le côté droit, nous placerons ici le paragraphe avec quelques textes de copyright. De plus, nous ferons en sorte que ces liens fonctionnent. Si je clique dessus, nous accéderons facilement à la section appropriée. OK, allons-y et commençons à créer le balisage HTML. Je vais créer de nouveaux commentaires. Pied de page et pied de page. Ouvrez ensuite l' élément de pied de page HTML5 avec un pied de page de classe. La photo sera donc composée de deux parties différentes. Nous aurons le pied de page, navigation et le paragraphe Créons donc des éléments div avec le menu de navigation du pied de page de la classe plutôt que d' instituer des liens avec la page d'accueil du contenu Donc, dans l'ensemble, nous aurons quatre liens différents. Dupliquons-le trois fois et changeons le contenu. Le second portera sur nous plutôt que sur les prix. Et le dernier sera le contact. C'est tout pour la première partie. Ouvrons une balise p avec un copyright de classe, puis insérons du texte de copyright. Nous avons besoin ici d'une entité HTML5, je veux dire le signe du copyright, suivi du code et de la création Tous droits réservés. Très bien, c'est tout à propos du balisage HTML. Allons-y et personnalisons le pied de page. Je vais créer de nouveaux commentaires dans le fichier CSS pour le pied de page Sélectionnez ensuite le pied de page et définissez sa largeur et sa hauteur. Je vais régler la largeur à 100 %. Pour la hauteur. Faisons-en 12 environ. Et changez également la couleur d'arrière-plan. Je vais utiliser ta couleur de 0 à 1 à 2. Ensuite, je vais aligner les éléments à l'aide de Flexbox. Réglons l'affichage pour qu'il soit flexible. Ensuite, je vais créer un espace entre les éléments flexibles dont nous avons besoin pour justifier l'espace entre les contenus. Ensuite, afin de placer les éléments au centre, alignez verticalement les éléments au centre. Et je vais aussi créer de l'espace sur les côtés gauche et droit. Utilisons un rembourrage avec la valeur 0,10 rampe. Très bien, les éléments sont donc alignés et nous devons maintenant les styliser Commençons par un lien de navigation en bas de page. Je vais modifier la famille de polices. Faisons en sorte que ce soit du maïs sans serif. Augmentez ensuite la taille de la police, mettez-la en RAM et changez la couleur. Je vais utiliser ici les couleurs C, C, C. Comme vous pouvez le voir, nous devons créer un espace entre les éléments du lien. Utilisons donc la marge, à droite, avec une valeur de trois rem. Et augmentez également l' espace entre les lettres. Utilisez un espacement entre les lettres, une rampe de 0,1. OK, donc pour les éléments du lien ou le style, avant de passer au paragraphe, je vais créer un petit effet de survol Je vais changer la couleur en survolant. Nous allons donc sélectionner les éléments du lien avec le pointeur de la souris. Changez ensuite la couleur que je vais utiliser ici couleur entre six et trois ans. Et utilisez également la transition avec les valeurs de couleur 0,3 s. Très bien, donc c'est tout pour les éléments de navigation Passons au paragraphe. Je vais augmenter la taille de sa police. Réglons-le sur deux RAM. Et changez également la couleur. Faites-le d, d, d. OK, alors c'est tout. Le pied de page est personnalisé. Et avant de terminer, je vais faire en sorte que ces éléments de navigation fonctionnent. Une fois que nous avons cliqué dessus, nous devons accéder à la section appropriée. Pour y parvenir, nous devons relier les sections aux liens. Pour ce faire, nous utiliserons les attributs h reference et ID. Comme vous le savez, l'élément de lien H possède un attribut de référence H. Nous devons attribuer à chaque section un élément et un attribut ID. Ensuite, les valeurs des deux attributs doivent correspondre. Insérons donc une nouvelle maison. Puis À propos de nous, tarification et contact. Ensuite, attribuons à chaque section les éléments et l'attribut ID avec les valeurs appropriées. La première section doit comporter un identifiant indiquant la valeur de la maison, alors que la seconde ne portera que sur nous. Ensuite, nous aurons les prix. Quant à la dernière section, elle sera consacrée au contenu. Alors maintenant, si je clique sur les liens, vais accéder à la section des propriétés, mais sans aucun effet fluide. Pour résoudre ce problème, nous devons utiliser l'une de ces propriétés CSS appelée comportement de défilement. Nous devons l'attribuer à l'élément HTML et le configurer pour qu'il soit fluide. Maintenant, le problème est résolu. Enfin, nous avons terminé. Le projet est terminé. Toutes ces sections sont créées et personnalisées. Nous devons maintenant passer à la dernière partie. Je veux dire, nous devons créer un projet adapté à différentes tailles d'écran. Alors passons à autre chose. 31. Projet 3 - Rendre le projet réactif: Très bien, nous avons donc terminé la construction de nos projets. Et comme je l'ai dit, il est maintenant temps de le rendre réactif aux différentes tailles d'écran. Comme d'habitude, nous avons construit ce projet avec le bureau. La première approche est conçue pour les écrans de très grande taille. Taille d'écran avec 90 pixels, 20 pixels de largeur et 1080 pixels de hauteur. Et maintenant, nous devons le rendre réactif à des tailles d'écran plus petites. Inspectons la page et passons en mode réactif. Comme vous pouvez le voir, la largeur et la hauteur sont réglées à 1 920,10, Nous devons donc trouver les points d'arrêt sur lesquels le projet nécessite des modifications et des ajustements J'ai déjà préparé les points de rupture, donc je ne vais pas perdre de temps à les trouver. Le premier point d'arrêt sur lequel nous devons apporter des modifications sera donc nous devons apporter des modifications de 1 800 pixels Parce que, comme vous le voyez, la deuxième section n'a pas l'air bien. Allons-y et créons une requête multimédia CSS. Avant cela, je vais insérer de nouveaux commentaires, réactifs ou non Créez ensuite la requête multimédia CSS. Je vais spécifier qui a une largeur maximale de 1 800 pixels. Donc, au point d'arrêt, je vais réduire la largeur du wrapper vidéo et du paragraphe Et je vais aussi légèrement modifier leurs positions. Nous allons donc sélectionner Video Wrapper. Je vais régler sa largeur pour qu'elle s'exécute. Ensuite, la hauteur sera de 45 marques. Pour ce qui est de la bonne position, faisons-en dix rampes. Voilà pour l'emballage vidéo. Passons au paragraphe. Sélectionnons-le. Je vais définir sa largeur. Faisons-en 90 RAM. Et puis changez la bonne position, faites-en une rampe de bronzage. OK, donc la deuxième section semble bonne. La seule chose que je vais faire est de créer un petit espace sur le côté droit de la ligne dans la section des aliments. Comme vous le savez, les lignes ont le nom de classe commun, la ligne de titre de section. Ainsi, pour sélectionner la ligne de la section du pied, nous devons utiliser la combinaison de ces électrodes de cette manière. Dans un premier temps, nous devons spécifier ici la section 3 et le titre de la section. Définissons la marge sur la rampe 23 du côté droit. Très bien, avec ce point de rupture, nous en avons terminé car toutes les autres sections semblent bonnes Le prochain point d'arrêt sera de 1 650 pixels. Nous allons donc créer une nouvelle requête multimédia CSS et spécifier à qui appartient la largeur maximale. Donc, en ce qui concerne le point d'arrêt, nous devons à nouveau nous occuper de la deuxième section Mais avant cela, je vais réduire la taille de police de l'élément HTML. Cela réduira la taille des éléments. Je suis dans les éléments mesurés en RAM. Réglons donc la taille de police à 57 %. Les éléments sont donc devenus plus petits. Je vais maintenant m'occuper de la deuxième section. Récupérons ce code d' ici et collez-le ci-dessous. Ainsi, la largeur de l'emballage vidéo, qui va être de 85 mètres, change ensuite la valeur de la hauteur Faisons-en quatre pour le percuter. Pour ce qui est de la bonne position, je vais faire cinq points. Modifiez ensuite la largeur du paragraphe, faites-en 85 RAM par rapport à ce dont nous avons besoin, position correcte. Fais cinq rem. Et je vais aussi ajouter que ai acheté une propriété d'une valeur de dix dollars. Très bien, c'est tout à propos de ce point d'arrêt. Le prochain sera de 1 500 pixels. Sur le point d'arrêt, je vais juste masquer les lignes de titre Nous allons donc créer une nouvelle requête multimédia CSS et spécifier la largeur maximale à 1 500 pixels Sélectionnez ensuite les lignes de titre et attribuez-leur. N'en afficher aucun. Très bien, les lignes sont donc cachées. Passons à autre chose et trouvons le point d'arrêt suivant. Le prochain point d'arrêt sera donc de 1 400 pixels. Comme vous pouvez le constater, nous avons beaucoup de choses à faire car le projet est presque foiré sur un écran si petit. Créons une nouvelle requête multimédia CSS largeur maximale de 1 400 pixels Tout d'abord, je vais réduire à nouveau la taille de police de l'élément HTML. Mettons-le à 45 %. Comme vous pouvez le constater, nous avons déjà obtenu un bien meilleur résultat. La manipulation de la taille de police de l'élément HTML est vraiment très utile lorsque vous essayez de rendre le projet réactif Ensuite, je vais réduire la taille de police du titre de la bannière. Nous devons donc sélectionner l'élément span. Réglons sa taille de police pour qu'elle change. OK, après cela, je vais m'occuper du paragraphe. Nous devons en augmenter la largeur. Sélectionnez B9 ou le paragraphe. Augmentez sa largeur, 45 RAM, puis modifiez la taille de la police, faites-en une rampe 3D. Le paragraphe semble bon. Je vais maintenant m'occuper du reste des sections. À partir de ce point de rupture, je souhaite modifier légèrement la mise en page. ce moment, je décapiterai un endroit sur le côté gauche, , au En ce moment, je décapiterai un endroit sur le côté gauche, et je vais les placer en haut des sections Pour y parvenir, sélectionnons les trois sections. Section par section trois et section quatre, et modifiez la direction de la disposition du flux. Je vais lui demander de les appeler. Très bien, les titres sont maintenant placés en haut de cette section Passons à autre chose et personnalisons la deuxième section. Je vais augmenter sa hauteur. Réglons-le à une hauteur de 120 fenêtres d'affichage. Ensuite, je vais placer la vidéo et le paragraphe au centre de la page. Sélectionnons Video Wrapper et définissons deux positions, soit 20 %. Ensuite, nous avons besoin de la position gauche. Je vais le porter à 50 %. Et pour centrer parfaitement l'élément, nous avons besoin d'une translation par transformation avec la direction X. Et comme valeur que je vais instituer, soit -50 %. Et réduisez également probablement la largeur de l'emballage vidéo. Faisons-en une rampe à deux voies. Bien, passons à autre chose et faisons de même pour le paragraphe. Sélectionnons-le. Dans ce cas, je vais définir uniquement la position de gauche. Portons-le à 50 %. Encore une fois, nous devons transformer, traduire dans la direction x et avec une valeur de -50 Enfin, modifiez la largeur, faites-en 80 RAM. Très bien, c'est donc tout à propos de la deuxième section. Passons à la section suivante. Je vais régler la hauteur de la troisième section oral et définir également le rembourrage Je vais le régler à cinq rem en haut, puis à zéro sur le côté droit. Ensuite, nous avons besoin de dix rampes en bas et de zéro sur le côté gauche. Ensuite, je vais créer un espace au bas du titre. Pour sélectionner spécifiquement le titre de la troisième section, nous devons sélectionner la troisième section de la première, suivie du titre de cette section. Définissons le mois de mars comme important avec la valeur sept rampes. OK. Enfin, augmentons la largeur du swipe par conteneur à 100 % Sélectionnons-le et définissons la largeur à 100 %. OK, donc avec la troisième section, nous avons terminé. Passons à autre chose et personnalisons la section de contact. Je vais également régler sa hauteur sur automatique. Ensuite, j'ai défini le rembourrage, je vais le régler à cinq rem en haut et en bas et à zéro sur les côtés gauche et droit Très bien, donc c'est tout pour 1 400 pixels ou ces sections ont l'air Passons à autre chose et trouvons le point d'arrêt suivant. Je pense que ce sera 900 pixels. Nous allons donc créer une nouvelle requête multimédia CSS et spécifier la largeur maximale à 900 pixels. La première chose que je vais faire est donc de réduire la taille de police des éléments HTML. Réglons-le à 40 %. Alors. Je vais réduire la taille de police du titre de la bannière. Nous allons sélectionner cet élément de chemin et sa taille de police à huit lignes. Je pense donc qu'il y a un grand espace entre le titre et le paragraphe. Et il serait également préférable baisser légèrement la bannière. Donc, dans un premier temps, sélectionnons la bannière et changeons sa position supérieure. Je vais faire 25 % , puis je vais diminuer la hauteur du titre de la bannière. Réglons-le sur 15 runs. Alors maintenant, le binaire semble bien mieux. De plus, nous n'avons pas besoin de toucher aux deuxième, troisième et quatrième sections. Passons au pied de page. Sélectionnons-le et nous trouvons le rembourrage. Je vais réduire l'espace sur les côtés gauche et droit. Réglons le rembourrage à 0,5 ran. Sélectionnez ensuite les éléments du lien et modifiez la taille de la police. Je vais faire 1,8 Ran. Très bien, voyons donc ce point de rupture de ces sections Ayez l'air bien. Passons à autre chose et trouvons le suivant. Le prochain point d'arrêt sera de 700 pixels. Allons-y et créons une nouvelle requête multimédia CSS avec une largeur maximale de 700 pixels Dans un premier temps, je vais réduire la taille de police des éléments HTML. heure actuelle, il est fixé à 40 % Il faut donc le réduire et le porter à 35 %. Les éléments sont donc devenus plus petits. En fait, la première section semble bonne. Passons à la seconde. Je pense que nous devons diminuer la hauteur de cette section. Faisons en sorte que la hauteur de la fenêtre d' affichage soit de 100. La deuxième section a l'air bien. Nous n'avons donc pas besoin de toucher à la section des prix. En ce qui concerne la section de contenu, je vais probablement réduire l'espace entre les coordonnées. Nous allons donc sélectionner les éléments div et spécifier marge avec les valeurs trois rem en haut et en bas et deux rem sur les côtés gauche et droit Très bien, enfin, occupons-nous du pied de page. Je vais placer les éléments de navigation et le paragraphe verticalement l'un sur l'autre. Alors changeons de direction. Je vais en faire une colonne. Ensuite, je vais les placer verticalement au centre. Pour cela, utilisons le centre de contenu justify-content. Enfin, créez de l' espace sous les liens. Sélectionnons la navigation du pied et attribuons-lui la marge inférieure avec la valeur à exécuter Très bien, le mandat complet s'annonce bien et en fait, au point de rupture, c'est terminé Il est maintenant temps de donner à notre projet une belle apparence sur le dernier point d'arrêt, qui sera de 500 pixels Nous allons donc créer une nouvelle requête multimédia CSS et spécifier la largeur maximale à 500 pixels. Encore une fois, dans un premier temps, je vais réduire la taille de police des éléments HTML. Réglons-le à 30 %. En fait, avant de personnaliser la première section, je vais supprimer les espaces blancs que nous avons sur le côté droit de la page Cela est dû à la seconde section et à la section de conduite. Nous allons donc sélectionner Video wrapper et régler sa largeur sur 60 RAM Sélectionnez ensuite Paragraphe, réglez également sa largeur sur six dram. La deuxième section semble bonne. Occupons-nous de la section contact. Je vais sélectionner un élément div. Je veux dire la division des coordonnées. Réglons sa largeur à 18 RAM. Modifiez également la marge. Je vais le régler à trois rem en haut et en bas et à un rem sur les côtés gauche et droit. Et réduisez également la largeur du formulaire de contact. Réglons-le sur 60 runs. Très bien, donc la section de contact semble également bonne. Enfin, nous devons nous occuper de la première section. Sélectionnons le titre de la bannière, la plage. Je vais réduire la taille de sa police. Faisons-en 4,5 RAM. Et je vais aussi réduire l'espace entre les lettres. Faisons en sorte qu'il fonctionne. En fait. Comme vous le savez, les éléments de plage d'un titre modifient l'espacement des lettres au cours de l'animation. Nous devons donc également le réduire dans les images-clés CSS. Sinon, vous pouvez constater que certains de ces éléments de travée sont divisés sur deux lignes et qu'ils ne sont pas beaux. Je vais copier l' intégralité des images-clés CSS. Collons-les ici et modifions l' espacement des lettres dont nous avons besoin pour exécuter. Et puis une RAM au lieu de 1,5 g. Maintenant, tout fonctionne très bien et nous avons terminé. Le projet s'adapte à différentes tailles d'écran. Nous avons donc fini de travailler là-dessus. J'espère que c'était intéressant et que vous l'avez apprécié. Il faut maintenant passer à autre chose et commencer à construire le prochain projet. 32. Projet 4 - Aperçu du projet: Très bien, il est donc temps de commencer à construire notre prochain projet, qui sera l'un des plus importants et des plus intéressants. Nous allons créer quelque chose comme le site Web de commerce électronique APL. Avant de commencer à écrire le code comme d'habitude, allons-y et décrivons le projet. Il se composera de deux sections différentes. Nous allons commencer par l'atterrissage. Il comportera plusieurs parties. Nous aurons ici un logo et la navigation avec des effets de survol Ensuite, nous allons construire ces jolis boîtiers ici avec des contrôleurs. Nous pouvons déplacer la boîte à l'aide ces contrôleurs dans un environnement 3D. Nous allons gérer cela à l'aide de CSS et de JavaScript. De plus, nous aurons ici quelques éléments de texte et ces belles parties qui, comme vous pouvez le voir, ont un bel effet de survol En plus de cela, le prêt comportera des images d' arrière-plan animées. Ils changeront avec Fade Effects. Très bien, la section suivante inclut le titre et les images de l'iPhone 12s Si nous survolons l'image, elle changera avec un bel effet de survol En plus de cela, nous avons ici deux boutons, et une fois que nous les survolons, certains liens s'afficheront-ils ? Ensuite vient la section sur le MacBook Air. Une fois que nous faisons défiler la page vers le bas, le MacBook ouvre le logo et la barre de progression du chargement apparaît. Ensuite, Mark Wu s' allumera, créera toutes ces choses en utilisant uniquement du CSS et du JavaScript. Bien, passons à la section suivante où vous pouvez trouver les montres Apple. Dans cette section, vous pouvez choisir vos étuis préférés ainsi que les bracelets utilisant ces manettes. OK, nous aurons ensuite une section sur aéroports suivie du pied de page, où nous aurons les icônes et le texte du copyright Et en fait, ces icônes sont connectées aux sections appropriées. Si je clique dessus, nous accéderons à la section correspondante. De plus, la navigation fonctionne également. Si je clique sur les éléments de navigation, nous accéderons à la section appropriée. Très bien, c'est tout pour ce projet. Bien entendu, nous allons le rendre réactif aux différentes tailles d'écran. Il est maintenant temps de commencer à créer un projet. Passons donc à autre chose. 33. Projet 4 - Créer et personnaliser la page d'atterrissage: Très bien, allons-y et commençons à construire un projet. J'ai créé un nouveau dossier sur le bureau appelé pool e-commerce, dans lequel j'ai un autre dossier pour les images. Allons-y, ouvrons ce dossier dans Visual Studio Code, puis créons nos fichiers de travail. Je vais les appeler index.html, style.css et script.js. Ouvrez ensuite le fichier index.html et préparez le document HTML de base. Pour cela, je vais utiliser l'un des packages de code VS qui s' appelle Ahmed. Nous devons placer ici un point d'exclamation et appuyer sur Tab ou Entrée D'accord, nous avons donc ici toutes les balises HTML de base. Tout d'abord, je vais changer le titre. Voyons voir, instituez le commerce électronique en avril. Ensuite, relions les fichiers CSS et JavaScript. Je vais ouvrir la balise de lien. Ensuite, nous devons spécifier le chemin du fichier dans l'attribut de référence h. En ce qui concerne le fichier JavaScript, ouvrons la balise de script juste au-dessus de la balise body de fermeture. Ensuite, dans l'attribut source, nous allons spécifier le chemin du fichier. En plus de cela, je vais ajouter un lien supplémentaire car tout au long du projet, je vais utiliser les icônes Font Awesome. Allons-y et recherchons Font Awesome, CDN, js. Récupérez ensuite le lien, ouvrez la balise de lien dans les éléments d'en-tête et collez le lien en tant que valeur de l'attribut de référence h. Très bien, enfin, je vais exécuter le projet sur le navigateur à l' aide d'un serveur live Cela nous permet d'exécuter le projet dans le navigateur et d'apporter les modifications sans actualiser la page à chaque fois. Avant de poursuivre, plaçons le navigateur et l'éditeur de texte, comme suit. Et lancez-vous. Comme d'habitude, nous allons construire le projet section par section. La première section comprend deux parties différentes, comme le diaporama des images d' arrière-plan, ainsi que le cube Je suis dans cette boîte. Ces parties seront assez complexes. Alors tout d'abord, je vais m' occuper du reste des pièces. Ensuite, nous les créerons également. Allons-y et commençons à créer le balisage HTML. Je vais ouvrir la balise div, qui sera le conteneur Insérez ensuite vos nouveaux commentaires, section 1 et section 1. Ensuite, ouvrez la balise de section avec la section de classe 1. Je vais donc commencer par un logo. Insérons vos nouveaux commentaires, votre logo et votre logo. Je vais donc créer un logo en utilisant le lien et l'icône Font Awesome. Ouvrons donc une étiquette avec le logo de la classe, puis insérons vos éléments oculaires avec les classes FAB, FA, apple D'accord, nous avons donc le logo. Allons-y et créons la navigation. Instituons de nouveaux commentaires, barre de navigation. Et maintenant, poire. Ensuite, je vais ouvrir les éléments de navigation HTML5 avec la barre de navigation de classe Et puis insérez ici le premier élément de navigation, ouvrez la balise de lien avec la classe maintenant par lien. Et comme contenu, insérons votre iPhone 12. Dans l'ensemble, nous aurons donc quatre éléments de navigation différents. Je vais donc dupliquer cette ligne de code trois fois. Puis modifiez le contenu. Je vais insérer votre MacBook Air. Ensuite, le prochain sera Watch AirPods. OK, c'est tout pour la navigation. Ensuite, je vais créer une bannière. Je veux dire les éléments du texte et le bas. Créons donc de nouveaux commentaires, bannière et une bannière. Ouvrez ensuite la balise div avec la bannière de la section 1 de la classe. La bannière comportera quatre éléments différents. Je veux dire le paragraphe de titre, l'élément de portée et le bas. Il s'agit donc d'une balise de titre H1 ouverte. Et nous allons insérer ici l'entité HTML5, qui sera la flèche gauche Nous avons donc besoin d'une esperluette, puis du signe dièse 8592, d'un point-virgule, point-virgule Ensuite, je vais ouvrir la balise p, le paragraphe avec le texte suivant. La créativité consiste simplement à relier les choses Ensuite viennent les éléments. Insérons ici l'auteur de ces mots, Steve Jobs. Et enfin, le bouton Créer avec le bouton de saisie et avec le contenu maintenant. OK, donc c'est tout à propos du balisage pour le moment. Comme nous l'avons dit, nous nous occuperons de ce diaporama et de la boîte un peu plus tard Il est temps de commencer à écrire du CSS. Tout d'abord, je vais créer des styles communs et réinitialiser. En fait, tout au long de ce projet, nous allons utiliser l'une des polices Google. Allons-y et introduisons le lien. Allons visiter le site Web de Google Fonts. Recherchez ensuite les téléphones appelés exons. Je vais sélectionner toutes ces tuiles sauf Italica. Sélectionnons-les , puis importons l'URL. À partir d'ici. Nous devons coller cette URL dans le fichier CSS. OK, après cela, créons des commentaires, des styles communs. Et de styles courants. Sélectionnez ensuite chaque élément à l'aide d'un astérisque. Donc, tout d'abord, je vais me débarrasser de la marge et du rembourrage par défaut de chaque élément Alors allons-y et mettons-les à zéro. Ensuite, je vais créer une borderbox de la taille d'une boîte. Supprime ensuite les puces par défaut de l'élément de liste en utilisant list-style-type De plus, nous n'avons pas besoin du plan par défaut. Mettons-le à zéro. Ensuite, je vais me débarrasser du sous-jacent par défaut des éléments de lien en utilisant aucune décoration de texte. Enfin, définissons la famille de polices de manière à ce que les sons fonctionnent. Sans-serif. Comme vous pouvez le constater, tous les styles courants sont appliqués à tous les éléments de ce projet. Comme les autres, je vais utiliser la mémoire vive comme unité de mesure. heure actuelle, une mémoire vive équivaut à 16 pixels car la taille de police de l' élément HTML est égale à 16 pixels. Je veux convertir 1 g en dix pixels. Et pour cela, nous devons diminuer la taille de police de l'élément HTML. Mettons-le à 62,5 %. D'accord ? Comme vous pouvez le constater, tous les éléments sont devenus plus petits et maintenant 1 g est égal à des pics de bronzage. Ensuite, je vais créer quelques variables CSS pour les couleurs car nous allons utiliser plusieurs couleurs fréquemment. Je pense qu' il serait préférable d' utiliser des variables CSS. En général, les variables CSS peuvent avoir une portée globale ou locale. Dans ce cas, nous avons besoin de variables globales car elles sont accessibles via l'ensemble du document. Quant aux variables locales, elles ne peuvent être utilisées qu' à l'intérieur du sélecteur Pour créer des variables ayant une portée globale, nous devons les déclarer dans le sélecteur racine Le sélecteur racine correspond à l'élément racine du document. Ensuite, nous devons spécifier les noms des variables et des valeurs. Les noms des variables doivent comporter des traits d'union doubles. Je vais appeler la première variable couleur primaire. Et comme valeur, utilisons ici six, e, d e six. Ensuite, je vais créer une couleur blanche. Et le troisième sera de couleur noire. Très bien, c'est tout pour les styles courants. Allons-y et commençons à personnaliser cet élément de section. Insérez vos nouveaux commentaires, section 1. Et la première section. Dans un premier temps, définissons sa largeur et sa hauteur. Je vais me fixer à 200 %. Quant à la hauteur, faisons en sorte qu'elle corresponde à 100 % de la fenêtre d'affichage. Ensuite, je vais changer la couleur de fond. Dans ce cas, nous allons utiliser une couleur d'arrière-plan temporaire, puis nous allons créer le diaporama Je vais maintenant utiliser l' une des variables. Et pour ce faire, nous devons utiliser une fonction appelée var, qui signifie variable. Ensuite, nous devons spécifier le nom de la variable entre parenthèses Utilisons ici la couleur primaire. D'accord ? Comme vous pouvez le constater, la couleur d'arrière-plan est modifiée. Ensuite, je vais aligner les éléments à l'aide de Flexbox. Réglons donc l'affichage sur Flex. Ensuite, je vais placer verticalement les éléments au centre. Pour cela, nous devons utiliser aligner les éléments au centre. Et afin de créer de l'espace entre les éléments, définissons le contenu de justification comme étant espacé de manière uniforme. Comme vous pouvez le constater, les éléments sont placés horizontalement au centre. La dernière chose que je souhaite faire concernant cet élément de section est de modifier légèrement sa forme. Jetons un coup d'œil à la version finale du projet. Comme vous pouvez le constater, la partie de cette section est coupée dans le coin inférieur droit. Pour y parvenir, nous devons utiliser l'une des propriétés appelées clip-path avec fonction polygonale Pour choisir la forme et obtenir les valeurs appropriées. Nous pouvons visiter l'un des sites Web. Cherchons le CSS clip-path. Cliquez ensuite sur le premier lien. Voici donc le site Web, ou vous pouvez choisir la forme de votre choix et récupérer les valeurs appropriées à partir d'ici. Dans notre cas, je vais utiliser un pentagone car nous avons ici cinq points différents et nous pouvons définir différentes formes à l'aide de ceux-ci. Donc, dans notre cas, nous avons besoin d'une forme comme celle-ci. Nous devons couper le coin inférieur droit. Récupérez ensuite le code à partir d' ici et attribuez-le à l'élément de section. Très bien, on considère donc que la forme a changé. Et en fait, avec cet élément de section, nous en avons terminé. Passons à autre chose et personnalisons le logo. Je vais insérer de nouveaux commentaires pour le logo. Sélectionnez ensuite Logo. Tout d'abord, je vais m'occuper de la position du logo. Il sera placé dans le coin supérieur gauche de la page. Allons-y donc et définissons sa position sur absolue. Ensuite, afin de définir sa position en fonction de son élément parent, je dois attribuer à cet élément de section une position relative. Définissez ensuite les propriétés du haut et de la gauche. Je vais les régler à trois tours pour les deux. OK, on considère donc qu' un logo est positionné. Ensuite, je vais personnaliser l'icône elle-même. Nous allons donc sélectionner les éléments I. Tout d'abord, augmentons la taille de la police, faisons en sorte qu'elle s'affiche dix fois, puis changeons la couleur. Je vais utiliser votre valeur RGBA avec la couleur noire et avec une opacité de 0,8 OK, c'est tout pour le logo. Allons-y et occupons-nous de la Navbar. Insérons de nouveaux commentaires pour la barre de navigation. La barre va maintenant être placée dans le coin supérieur droit. Sélectionnons-le et définissons sa position sur absolue. Ensuite, je vais définir les positions supérieures et droites. Définissons la propriété supérieure à trois RAM. Quant à la bonne position, faisons-la à 10 %. OK, donc la barre de navigation est positionnée, elle est placée dans le coin supérieur droit Personnalisons le lien, sélectionnons un lien supérieur et augmentons sa taille de police, puis redirigeons-le vers Ram. Ensuite, je vais créer un espace entre les éléments de navigation en utilisant la marge. En général, l'élément de lien est un élément intégré et marge ne sera donc pas appliquée Nous devons donc créer des liens dans des éléments de blocs de ligne. Réglons l'affichage sur un bloc en ligne. Ainsi, lorsque l'élément est un niveau de bloc intégré, vous pouvez lui attribuer une hauteur, une marge et un rembourrage Et ils se comporteront toujours comme un élément intégré. Je veux dire qu'ils n'occuperont pas toute la largeur à l'intérieur du conteneur et ils ne seront pas placés sur des lignes différentes. Réglons la marge à zéro en haut et en bas et trois rem sur les côtés gauche et droit. OK, après cela, changeons la couleur des liens. Et je vais aussi créer un effet de survol. Je vais augmenter la taille des éléments en survolant. Alors tout d'abord, changeons la couleur. Je vais utiliser ici une couleur noire variable. Ensuite, sélectionnez maintenant par lien avec le pointeur de la souris. Donc, pour augmenter la taille des éléments, utilisons Transform avec la fonction d'échelle car si nous augmentons la taille de la police, cela va pousser d'autres éléments et casser la mise en page. Réglons donc l'échelle à 1,5 et utilisons également la transition pour un effet fluide. Nous avons besoin ici de nous transformer. Et comme durée, insérons 0,5 s. Très bien, c'est tout pour le Napa Passons à autre chose et personnalisons la bannière. Insérons vos nouveaux commentaires pour la bannière. Sélectionnez ensuite la bannière avec la bannière de la section 1 de la classe. Je vais donc aligner les éléments verticalement et les placer également au centre. Pour cela, je vais utiliser Flexbox. En fait, nous utiliserons fréquemment cette technique tout au long de ce projet. Et afin d'éviter d'utiliser les mêmes propriétés et valeurs encore et encore, je vais créer une nouvelle classe et des styles communs. Appelons-le centre et attribuons-lui display flex. Justifiez ensuite le centrage horizontal du centre de contenu et alignez également le centre des éléments pour le centrage vertical Assignez ensuite cette classe pour créer une bannière dans le document HTML. La seule chose que nous devons faire est donc de changer de direction car nous devons placer les éléments verticalement dans une colonne. Nous devons donc définir la direction de flexion par rapport à la colonne. Considérons donc que les éléments sont alignés. Passons à autre chose et personnalisons chacun d'entre eux. Je vais commencer par un titre. Sélectionnons-le. Tout d'abord, je vais augmenter la taille de la police. Faisons 13 RAM plutôt que de rendre la police plus claire. Réglez l'épaisseur de la police à 300. Transformez également le texte en majuscules et créez un espace entre les lettres en utilisant l'espacement des lettres 0,5 rem. OK, voyons le titre. Passons à autre chose et personnalisons le paragraphe. Changeons la taille de la police, créons-la pour la RAM. De plus, je vais régler l'épaisseur de la police à 400, puis créer un espace entre les lettres, pour obtenir 0,1 RAM Enfin, je vais créer de l' espace en haut et en bas en utilisant la marge. Réglons-le à six rem en haut, zéro sur le côté droit, l' avant-bras en bas et zéro sur le côté gauche D'accord, considérons donc que le paragraphe est également stylé. Ensuite, je vais personnaliser cet élément de span. Sélectionnons-le. Je vais augmenter la taille de la police. Faisons-en trois RAM, puis créons de l'espace au bas de l'élément. Réglons la marge inférieure à cinq rimes. Très bien, donc le seul élément que nous allons personnaliser est ce bouton ici Allons-y donc et sélectionnons-le. Tout d'abord, je vais créer de l'espace à l'intérieur du bouton à l'aide d'un rembourrage Réglons-le sur deux rem en haut et en bas et sur le forum sur les côtés gauche et droit. Ensuite, je vais augmenter la taille de la police, l' adapter à Ram. Modifiez également la couleur d'arrière-plan. Utilisons ici la couleur noire. Ensuite, je vais changer la couleur du texte. Utilisons votre couleur principale. Et puis modifiez l'épaisseur de la police , faites-la 400. OK, allons-y et ajoutons quelques styles supplémentaires en bas. Ensuite, je vais créer un espace entre les lettres. Réglons-le à 0,1 RAM. De plus, je vais me débarrasser de la bordure par défaut. Mettons-le à zéro. Ensuite, arrondissez légèrement les coins du Bateson en utilisant le rayon de bordure avec la valeur 0,5 RAM Enfin, modifiez le type du curseur, faites-le pointer vers. Nous devons maintenant changer la forme du motif. Si nous examinons le projet fini, vous verrez qu'il a une forme différente. Et sa forme change. Une fois que nous aurons survolé le bouton, je vais à nouveau utiliser une propriété de chemin de clip Mais je ne vais pas créer la forme manuellement car cela risque de prendre trop de temps. J'ai déjà préparé les valeurs nécessaires. Il suffit de les copier et de les coller. Ici. Je vais joindre ce fichier à cette conférence afin que vous puissiez facilement trouver ces valeurs. Comme vous pouvez le constater, la forme a été modifiée. Nous devons maintenant créer un effet de survol. Sélectionnons le bouton qui survolera. Ensuite, récupérez à nouveau les valeurs à partir d'ici. Et enfin, utilisez la transition. Nous avons besoin ici du clip-path et d'une durée de 0,5 s. D'accord ? Comme vous pouvez le constater, nous avons ici un bel effet de survol et avec une bannière, c'est terminé Maintenant, prenons soin de ce diaporama 34. Projet 4 - Créer un diaporama d'images d'arrière-plan: Très bien, certaines parties de la page de destination sont terminées Nous devons maintenant nous occuper de ce diaporama de l'image d' arrière-plan la plupart des diaporamas dans lesquels je joue, les fonctionnalités seront créées à l'aide Dans le document HTML, vous ne créerez qu'un seul élément div qui représentera le diaporama Allons-y donc et insérons de nouveaux commentaires. Diaporama et hors diaporama. Et créez un élément div avec un diaporama de classe. OK, c'est tout à propos du HTML. Passons à autre chose et passons au fichier JavaScript. Il permet également d'instituer les commentaires, en diaporama et hors diaporama Donc, dans l'ensemble, nous allons créer cinq développements et nous allons définir pour chaque développement une image de fond. Nous pourrions le faire en utilisant HTML et CSS. Je veux dire, nous pourrions créer cinq développements différents. Ensuite, nous pourrions attribuer à chacune d' elles une image de fond à partir du CSS. Mais nous ferons de même de manière plus pratique et dynamique avec JavaScript. Très bien, allons-y et créons une fonction. Je vais l'appeler Slideshow Deeds. Comme nous l'avons dit, nous allons créer cinq éléments div Et pour cela je vais utiliser for-loop. Nous allons passer en boucle de 1 à 5. Et à chaque itération, nous créerons un élément div en utilisant l'une des méthodes du dôme appelée create element Créons donc une boucle. Nous avons alors besoin ici du compteur I, qui va être égal à un. Alors, comme condition, nous avons besoin je sois inférieur ou égal à cinq. Et enfin, je plus, plus. Ensuite, je vais créer une nouvelle variable. Appelons ça div Comme nous l'avons dit, nous allons utiliser l'une des méthodes du dôme appelée create element. Utilisons-le, puis spécifions le nom de la balise entre parenthèses. Nous avons besoin de profondeur. OK, il s'agit de créer de nouveaux éléments. Nous devons maintenant attribuer aux éléments nouvellement créés une image de fond appropriée. Pour cela, utilisons la propriété style. Nous devons l'attribuer à la division. Ensuite, il doit être suivi de l'image d' arrière-plan du nom de la propriété. Nous devons l'écrire dans un étui en forme de chameau. Nous devons maintenant définir le chemin de l'image. Si nous consultons notre dossier d'images, vous trouverez ici un autre dossier appelé diaporama, dans lequel nous avons cinq images d'arrière-plan différentes Comme vous le voyez, la seule différence entre les noms réside dans les chiffres ici. Nous devons donc définir dynamiquement toutes ces images d'arrière-plan sur les éléments div nouvellement créés Nous avons besoin de votre URL, puis des images du nom du dossier. Ensuite, nous avons un autre dossier, un diaporama. Ensuite, nous devons spécifier le nom de l'image, qui sera Section 1, B, g. Et au lieu du numéro, nous devons passer la variable i, suivie de l'extinction JPG. Ainsi, lors de la première itération, je serai égal à un et la première image de fond sera utilisée Ensuite, lors de la deuxième itération, la deuxième image sera utilisée, et ainsi de suite boucle For continuera à fonctionner jusqu'à ce que les cinq images soient utilisées. D'accord ? Ainsi, pour ajouter des éléments div nouvellement créés, pour créer un élément div wrapper que nous avons créé dans le document HTML, nous devons utiliser une autre méthode de dôme appelée Tout d'abord, nous devons sélectionner l'emballage. Utilisons la méthode de sélection de la requête et spécifions ici le diaporama du nom de la classe Ensuite, attachez à cette fonction une méthode appelée append child et en tant qu'arguments dans votre D. Très bien, donc pour exécuter cette fonction, nous devons l'appeler Donc, si nous inspectons la page et vérifions l'onglet Éléments, vous constaterez que nous avons ici cinq développements différents. Et chacun d'eux possède une propriété d'image d'arrière-plan avec l'image appropriée. OK, donc tout fonctionne bien jusqu'à présent. Maintenant, nous devons faire fonctionner ce diaporama. À l'heure actuelle, les images d'arrière-plan ne sont pas visibles. Alors tout d'abord, occupons-nous de cela et écrivons du CSS. En fait, je vois ici que je manque les commentaires de fin de la bannière pour une raison ou une autre. Et nous n'avons pas non plus besoin ici ce commentaire de style commun de fin. Alors allons-y et réparons ces choses. Insérez ensuite vos nouveaux commentaires pour le diaporama. Ensuite, sélectionnez les éléments du wrapper div. Tout d'abord, je vais définir la largeur et la hauteur. Mettons-les tous les deux à cent pour cent, puis réglons sa position sur absolue. Nous devons également définir les propriétés du haut et de la gauche. Les deux doivent être égaux à zéro. heure actuelle, les images ne sont toujours pas visibles car elles n' ont ni largeur ni hauteur. Allons-y, sélectionnons la base de données elle-même et définissons sa largeur et sa hauteur, elle-même et définissons sa largeur et sa hauteur, toutes deux à 200 %. OK, alors maintenant l'une des images s'affiche. Les autres sont placés ici, mais ils ne sont pas visibles. Nous devons placer toutes les images les unes sur les autres. Et pour cela, utilisons la position absolue. En plus de cela, je vais utiliser quelques propriétés d'arrière-plan. Le premier sera la taille de l'arrière-plan. Nous devons le régler pour couvrir. Ensuite, comme position de l'arrière-plan, je vais utiliser Center. Et nous avons également besoin ici d'une répétition en arrière-plan avec valeur, pas de répétition. OK, alors maintenant nous avons un problème. Le contenu de la page de destination s'est retrouvé derrière les images , ce qui n'est pas faisable. Pour résoudre ce problème, utilisons la propriété z-index avec une valeur inférieure à zéro Faisons donc moins un. Très bien, maintenant le problème est résolu et nous devons passer à autre chose et faire en sorte que ce diaporama Nous allons donc masquer toutes les images par défaut, puis nous les afficherons en utilisant l'opacité Nous allons utiliser une nouvelle classe en CSS, dans laquelle nous allons définir l' opacité avec la valeur un Et nous ajouterons cette nouvelle classe aux développements dans l' ordre à partir de JavaScript. Allons-y et masquons tous les éléments div en utilisant l'opacité zéro Comme vous pouvez le constater, les images sont masquées. Ensuite, je vais afficher la première image par défaut. Pour cela, nous utiliserons la nouvelle classe mentionnée ci-dessus. Donc pour l'attribuer à la première classe de développement, qui sera appelée changement, nous avons besoin ici d'une petite déclaration conditionnelle. Donc, lorsque I est égal à un, cela signifie qu'il s' agit de la première itération. Le premier élément div est en train de créer. C'est le moment où nous devons attribuer un changement de classe. Pour cela, nous avons besoin d'un opérateur ET. Ensuite, nous devons apporter une modification à la classe de développement. Pour cela, je vais utiliser l'une des propriétés appelées class list, qui nous donne toutes les classes de l'élément. Et cela nous permet également d'y accéder par différentes méthodes. L'un d'eux est à. Précisons donc ici le changement de classe. Donc, si nous vérifions à nouveau l'onglet Eléments, vous constaterez que le premier élément a changé de classe. Maintenant, pour afficher l'image, nous devons accéder au fichier CSS, sélectionner l' élément div avec un changement de classe Et nous devons définir l' opacité sur un. D'accord, comme vous pouvez le voir la première image d'arrière-plan est visible. Enfin, nous devons faire en sorte que ce diaporama fonctionne. Nous devons donc supprimer et ajouter un changement de classe aux éléments div dans l'ordre avec certains intervalles Et nous devons le rendre infini. Passons donc au fichier JavaScript et sélectionnons tous les éléments div Je vais créer une nouvelle variable, appelons-la d, dz. Et puis pour sélectionner tous les éléments du div, je vais utiliser le sélecteur de requêtes, toutes les méthodes Nous devons spécifier ici la classe slideshow, suivie du nom de la balise D. OK, ensuite je vais créer une nouvelle fonction appelée slideshow, dans laquelle nous devons utiliser l'une des méthodes intégrées appelée set interval, nous permet d'exécuter la fonction et encore avec certains Cette méthode utilise deux arguments. La première est la fonction de rappel, qui sera exécutée à intervalles réguliers Quant au second argument ce sera l'intervalle lui-même. Et il doit être exprimé en millisecondes. Insérons donc votre fonction flèche. Et comme durée de l'intégrale, insérons 1 000 millisecondes Nous finirons par le modifier et l'augmenter. Nous devons maintenant sélectionner le développement dont la classe change. Ensuite, nous devons supprimer la classe de cet élément et l'ajouter à l'élément div suivant Créons donc une nouvelle variable. Je vais l'appeler div, puis sélectionner le développement à l' aide de la méthode QuerySelector Nous devons spécifier ici le diaporama en verre suivi du changement de classe. Ainsi, une fois que l'élément div avec le changement de classe est sélectionné, nous devons supprimer la classe de cet élément Nous avons donc à nouveau besoin d'une propriété de liste de classes. Mais dans ce cas avec la méthode appelée remove, nous allons spécifier ici le changement de classe. Enfin, nous devons l' ajouter aux éléments div suivants. Pour cela, je vais utiliser l'une des propriétés appelées next element sibling Nous devons l'attacher aux éléments div Encore une fois, nous devons utiliser la moindre propriété de classe et nous devons ajouter un changement de classe. Pour exécuter ce code, nous devons donc appeler la fonction slideshow Très bien, comme vous pouvez le voir, après chaque seconde, l'image d' arrière-plan change Une fois que les cinq images sont affichées, nous obtenons une erreur et ce diaporama cesse de fonctionner. Cela se produit parce qu'une fois que nous avons atteint le dernier élément , le moteur JavaScript ne peut pas trouver d'autre frère Elle n'existe pas. Donc, une fois que nous avons atteint la dernière image d'arrière-plan, nous devons recommencer ce diaporama à partir de la première image d'arrière-plan. Alors allons-y et faisons-le. Nous devons créer une nouvelle variable qui sera le compteur. Dans ce cas, je vais utiliser Let's declaration car sa valeur va changer. Appelons cette variable a et par défaut, la rendons égale à un. Nous devons donc augmenter le compteur d'un. Et une fois qu'elle est supérieure à la longueur des éléments div, cela signifie que nous devons recommencer ce diaporama avec la première image Et nous devons redevenir égaux à un. Ainsi, pour augmenter a par un, nous devons utiliser l'opérateur d' incrémentation, qui est exprimé par des signes doubles plus Ensuite, nous devons créer des instructions IF dans lesquelles nous devons comparer si a est inférieur à deux la longueur des éléments div Donc, si c'est vrai, cela signifie qu'il reste encore d'autres développements. Nous devons donc exécuter cette ligne de code. Si c'est faux, cela signifie que nous n'avons plus d' autre frère ou sœur Et nous devons commencer le diaporama avec la première image. Nous avons donc besoin d'une autre instruction dans laquelle nous devons accéder au premier développement et y ajouter un changement de classe. Et nous devons également faire un égal à un. Ainsi, pour sélectionner les premiers éléments div, nous avons besoin de devs suivis du numéro d'index zéro Ensuite, nous avons à nouveau besoin propriété de la liste de classes avec la méthode add. Et nous devons préciser votre changement de classe. En plus de cela, nous devons faire un égal à un. Vous pouvez maintenant voir que le diaporama fonctionne à l' infini sans aucune erreur Et nous devons créer un effet de fondu pour cela. Utilisons la transition. Attribuons à l'opacité et à la durée de 1 s. Maintenant, tout fonctionne parfaitement La seule chose que je vais faire est d' augmenter la durée de l'intervalle. Faisons 20 secondes au lieu d'une. Et aussi une augmentation de la durée de la transition. Ça fait 5 s. D'accord, c'est tout. Ce diaporama est créé, il fonctionne bien. Passons donc à autre chose. 35. Projet 4 - Créer et personnaliser le cube: Très bien, donc une fois que nous en aurons terminé avec ce diaporama , nous devons passer à autre chose et nous occuper de la dernière partie de la page de destination, qui va battre ce boîtier pour iPhone Je vais l'appeler le cube. En fait, en mathématiques réelles, cela s'appelle cuboïde, mais pour simplifier, je vais l' appeler simplement Comme vous pouvez le voir, il a une forme 3D. Par défaut, il est rotatif. En bas. Nous avons des contrôleurs. Une fois que nous les survolons, le cube s'arrête Ensuite, nous pouvons le faire pivoter en utilisant ces manettes sur différents côtés. Asseyons-nous pour savoir ce que nous allons faire. Toutes ces choses seront créées l'aide de CSS et de JavaScript purs. Tout d'abord, allons créer un balisage HTML. Nous devons l'écrire avant la bannière car elle sera placée sur le côté gauche du prêt. Tout d'abord, allons-y et créons de nouveaux commentaires, cubes et hors cube. Ouvrez ensuite les éléments, qui seront l'emballage Je vais donc lui attribuer la classe Cube Wrapper. Ensuite, nous avons besoin d'un autre div, qui sera le cube lui-même. Ensuite, je vais créer un autre élément div, qui sera la face avant Et il inclura une image de l'iPhone 12. Insérons donc votre image et sélectionnons iPhone point PNG dans le dossier images. Ensuite, nous devons créer un verso. Ouvrons donc une autre balise div avec le verso de la classe. Au verso, nous aurons une icône de la pomme. Insérons donc votre élément oculaire dont la classe est FAB, FA, apple Très bien, c'est tout pour le balisage du cube. Nous nous occuperons des commandes un peu plus tard car pour l'instant je vais styliser le cube. Allons-y et insérons vos nouveaux commentaires. Cube et de cube. Sélectionnez ensuite le cube et définissez sa largeur et sa hauteur. Je vais régler la largeur à lancer sur le bélier. Pour ce qui est de la hauteur, je vais lui donner 55 rampes. Et je vais aussi lui attribuer une couleur de fond temporaire. Faisons en sorte qu'il soit rouge. Nous avons donc ici le fond rouge. le moment, l'image est trop grande, alors allons-y et prenons-en soin. Je vais sélectionner la première face avant et régler sa largeur et sa hauteur, toutes deux à 200 %. Ensuite, créez de l'espace à l'intérieur de la face avant à l'aide d'un rembourrage Faisons-le 2,5 rem sur les quatre côtés. Après cela, je vais sélectionner l'image. Définissons sa largeur et sa hauteur. Je vais régler les deux à 200 %. Ensuite, je vais également utiliser les pieds de l'objet avec la valeur contenue. Bon, alors maintenant l'image est devenue plus petite et nous voyons ici le fond rouge du cube. Ensuite, je vais m' occuper de la face avant. Allons-y donc et changeons sa couleur d'arrière-plan. Utilisons votre couleur F E. Ensuite, je vais créer un environnement 3D afin de mieux voir comment le cube va être construit. Pour créer un environnement 3D, nous devons utiliser l'une des propriétés appelées prospective, et nous devons l'attribuer à l'enveloppe du cube Sélectionnons-le puis utilisons la perspective avec la valeur 100 ramp. En général, la perspective des propriétés définit la distance entre l' élément et l'utilisateur. Nous devons maintenant nous déplacer avec la face avant dans un environnement 3D. Et pour cela, nous avons également besoin d'espace pour la face avant. Pour cela, nous devons utiliser l'une des propriétés appelées style de transformation avec la valeur preserve 3D. Nous devons l' attribuer au cube. Ensuite, il partagera l'environnement 3D avec ses éléments enfants. Très bien, après cela, nous devons déplacer la face avant et légèrement vers l'avant Donc pour cela, je vais utiliser Transform où ils traduisent la fonction et comme valeur, Let's entity or five run. instant, rien n' est visible ici, nous avons juste un fond blanc. Donc, pour voir clairement ce qui se passe, je vais faire pivoter le cube. Faisons-le pivoter selon l'axe Y. Et comme valeur, insérons, disons 72 degrés. Hein ? Vous pouvez maintenant voir clairement la face avant du cube dans l'espace 3D. Allons-y et prenons soin de l'arrière. Je vais régler sa largeur et sa hauteur, toutes deux à 200 %. Modifiez également la couleur d'arrière-plan. Utilisez ici les couleurs F, E. Et encore une fois, nous devons déplacer la face arrière comme la face avant Dans ce cas, nous devons traduire fonction avec la valeur moins cinq tours Nous avons donc ici le verso, mais sa position n'est pas correcte Nous devons régler ce problème. Et pour cela, définissons les positions des deux côtés comme absolues. En fait, comme vous pouvez le constater, la plupart des propriétés et des valeurs sont les mêmes pour les deux côtés. Nous pouvons donc ajouter ici le verso. Ensuite, nous pouvons sélectionner la face avant séparément. Attribuons des propriétés de remplissage et de transformation 2D. En ce qui concerne le verso, laissez-vous simplement transformer la propriété Bon, maintenant les deux côtés semblent en bon état. Pour mieux le voir, je vais inspecter la page et utiliser l'onglet Éléments. Nous allons sélectionner le cube. Ensuite, en bas, concentrez-vous sur la valeur de la fonction Rotation. Et puis en utilisant la flèche supérieure, changeons la valeur. On peut donc voir que le cube tourne et que les deux côtés sont beaux. OK, avant de passer aux autres côtés, je vais personnaliser l'icône du mois d'avril au verso Tout d'abord, prenons-en soin. Position de l'icône. Je vais le placer au centre du dos. Alors allons-y et utilisons le centre de classe. En fait, changeons la valeur de la fonction de rotation afin de voir l'icône. Eh bien, faisons 140 degrés. OK, allons-y et stylisons l'icône. Sélectionnons-le. Dans un premier temps. Augmentons la taille de la police, faisons-en 12 rimes. Changez ensuite la couleur. Dans ce cas, je vais utiliser la couleur primaire. En plus de cela, utilisons l'ombre du texte. Je vais créer une ombre à plusieurs niveaux. Le premier va être égal à 0,1 rem deux fois, puis pointer vers la RAM. Et la couleur AAA. Quant à la deuxième ombre, ce sera l'ombre gauche. Insérons donc ici -0,1 gramme deux fois, puis pointons vers la RAM de la même couleur L'icône est donc stylisée, mais comme vous pouvez le voir, nous devons la faire pivoter de 180 degrés. Utilisons donc Transform avec la fonction de rotation y et, comme valeur, insérons vos 180 degrés. C'est tout pour le dos. Nous devons maintenant nous occuper des autres parties. Ensuite, je vais m'occuper des côtés supérieur et inférieur et nous les créerons en utilisant des pseudo-éléments avant et après. Tout d'abord, je vais faire pivoter le cube différemment afin de l' afficher des deux côtés. Changeons donc, faisons pivoter y vers, pivoter x en tant que valeur positive. Insérons ici 91 degrés. Donc, pour l'instant, la partie inférieure est proche de nous. Et je vais vous enlever la partie supérieure, vais le créer en utilisant le pseudo élément before. Nous allons donc sélectionner la face avant les pseudo-éléments. Tout d'abord, définissons le contenu, rendons-le vide. Ensuite, je vais définir, nous pouvons masquer cette largeur d' ensemble à 100 %. Pour ce qui est de la hauteur, je vais la faire tourner. Et changez également la couleur d'arrière-plan. Make it F E. Pour le moment, l' élément n'est pas visible. Nous devons définir sa position. Réglons donc sa position sur absolue. Ensuite, définissez les propriétés du haut et de la gauche Mettons les deux à zéro. D'accord ? Comme vous pouvez le constater, l' élément n'est toujours pas visible. Cela se produit parce que l'environnement 3D n' est pas partagé pour le pseudo-élément antérieur. Et pour résoudre ce problème, nous devons à nouveau utiliser le style transform preserve 3D, et nous devons l'attribuer à l'élément parent. Ensuite, en bas, faites pivoter les éléments selon l'axe X de -90 degrés L'élément est maintenant visible, mais il n'est pas placé correctement car il est pivoté en fonction du centre Il s'agit de l'origine par défaut de la transformation. Nous devons donc le changer et le placer au sommet. Nous devons transformer l' origine en valeur supérieure. Très bien, donc c'est à peu près tout sur le dessus. Passons à autre chose et occupons-nous de la partie inférieure. En fait, la plupart des propriétés et des valeurs seront les mêmes pour les deux côtés. Je vais donc ajouter ici après les pseudo-éléments , puis les sélectionner séparément avant les pseudo-éléments. Prenez ces quatre propriétés et collez-les ici. Ensuite, je vais dupliquer ce code. Passez de l'avant à l'après. Ensuite, nous avons besoin du bas plutôt que du haut. Ensuite, éliminons le signe moins à partir d'ici. Comme il est probable que l'origine de la transformation sera la plus basse. D'accord ? Donc, si nous faisons pivoter le cube, vous verrez que les côtés supérieur et inférieur sont prêts. Passons à autre chose et prenons soin des côtés gauche et droit. Je vais les créer en utilisant les pseudo-éléments avant et après du verso. Faisons donc à nouveau pivoter le cube selon l'axe y. Avec la valeur -91 degrés. Nous allons créer ces côtés. De même, commençons par le côté gauche. Je vais le créer en utilisant le pseudo-élément before. Nous allons donc sélectionner le verso avec le pseudo-élément avant comme contenu Je vais insérer votre iPhone. Définissez ensuite la largeur et la hauteur. Je vais régler la largeur pour qu'elle fasse demi-tour. Quant à la hauteur, faisons-la à 100 %. Changez ensuite la couleur de fond, mettez-la F. Donc pour l' instant, le côté gauche n'est pas visible car encore une fois, nous devons utiliser les positions et la fonction de rotation. Réglons donc la position sur absolue. Définissez ensuite les propriétés du haut et de la gauche. Je vais les mettre tous les deux à zéro. Et après cela, nous devons transformer avec la fonction de rotation y avec la valeur -90 degrés. Maintenant, l'élément est visible, mais comme vous pouvez le constater, nous devons à nouveau modifier l'origine de la transformation. Mettons-le sur la gauche. OK, maintenant l' élément est positionné, et nous devons maintenant nous occuper de son contenu. Je vais envoyer un SMS à l'iPhone. Tout d'abord, faisons à nouveau pivoter le cube. Débarrassons-nous du signe moins à partir d'ici. Ensuite, personnalisez le texte. Je vais le placer au centre. Pour cela, utilisons Flexbox. Nous avons besoin de Display Flex. Et pour un centrage parfait, nous devons utiliser le centre de contenu de justification, suivi du centre d' alignement des éléments Après cela, augmentons la taille de la police, passons à Ram. De plus, je vais réduire l'épaisseur de la police à 300, un peu plus légère. Et comme couleur, utilisons votre couleur EC 1919. Très bien, c'est à propos du côté gauche. Maintenant, de la même manière, nous devons créer le côté droit, qui sera similaire au côté gauche. Je vais donc ajouter ici des pseudo-éléments. Sélectionnez ensuite séparément avant les pseudo-éléments. Et récupérez ces quatre lignes à partir d'ici. , sélectionnez après les pseudo-éléments et insérez les propriétés et valeurs suivantes dont nous avons besoin en haut à zéro, puis écrivez zéro. Ensuite, nous devons transformer la rotation y de 90 degrés. Enfin, nous devons transformer l' origine en valeur, non ? OK, donc c'est tout pour le cube. Tous les côtés sont préparés. Si je le fais pivoter dans les deux sens, vous verrez que tous les sites sont créés. Maintenant, je vais supprimer la couleur de fond rouge du cube. Supprimons-le. Et en plus de cela, je vais créer une ombre en forme de boîte afin d'afficher les bords de ces côtés Donc, dans un premier temps, créez une ombre pour les côtés avant et arrière. Ce sera une ombre à plusieurs niveaux. Tout d'abord, nous avons besoin que l'encart soit ombre intérieure avec les valeurs 0,1 RAM trois fois, et la couleur D, D, D. Ensuite, copiez cette valeur, collez-la ici Et insérez le signe moins, où se trouvent les deux premières valeurs. Nous avons également besoin de la même ombre pour les pseudo-éléments avant et après. Nous allons donc récupérer ce code et le coller pour eux. D'accord ? Si nous faisons à nouveau pivoter le cube, vous verrez que tout semble bon. Hein ? Ensuite, je vais personnaliser les commandes et faire fonctionner le cube 36. Projet 4 - Créer et personnaliser les commandes cube: Très bien, une fois que nous avons créé les clients finaux, le cube, je vais maintenant m' occuper des contrôles Allons-y et créons un balisage HTML. Les contrôles feront partie de l'enveloppe du cube, nous devons donc les insérer à l'intérieur de celui-ci Créons vos commentaires, vos contrôles ou vos contrôles. Ouvrez ensuite les éléments div avec les commandes de classe. Donc, dans l'ensemble, nous aurons six contrôles différents. Ils seront représentés par les icônes Font Awesome et seront encadrés par les éléments de lien. Allons-y et ouvrons la balise de lien. Ensuite, l' élément IS de l'institut avec une classe est FAS, une flèche vers le haut. En plus de cela, je vais y ajouter un autre cours. En fait, nous allons faire pivoter le cube selon la direction X avec cette icône Je vais donc insérer votre commande X supérieure. Donc, comme nous l'avons dit, nous aurons six flèches. Dupliquons donc l'élément de lien cinq fois, puis changeons les noms des classes. La seconde sera une flèche vers bas, celle dont nous avons besoin ici, avec la touche X en bas. La suivante sera la flèche vers la gauche. Gauche. Pourquoi contrôler alors que nous avons besoin de vous ? Flèche droite et droite ? Pourquoi contrôler ? Le suivant devrait être réduit. Contrôle Top Z. Et pour le dernier, nous avons besoin de la flèche vers le haut en bas en Z. OK, nous avons donc nos commandes. Allons-y et personnalisons-les. Je vais insérer ici de nouveaux commentaires, contrôles et de nouveaux contrôles. Sélectionnez ensuite les éléments wrapper div. Alors tout d'abord, je vais m' occuper de la position des commandes. Réglons sa position sur absolue. En fait, les contrôles doivent être positionnés en fonction de l'élément parent, qui dans ce cas est une enveloppe cubique Vous pensez peut-être que nous avons besoin d'une position relative pour l'emballage, mais de ce fait, il s'agit d'un élément flexible Comme n'oubliez pas que l' élément de section possède une flexibilité d'affichage, nous n'avons plus besoin de position relative pour l'enveloppe du cube car vous pouvez montrer que nous serons positionnés en fonction de l'enveloppe du cube Définissons donc les positions inférieure et gauche. Je vais régler le minimum à -15 RAM. Quant à la gauche, ce sera 50 %. Ensuite, pour envoyer vers les éléments, nous devons en déplacer huit vers la gauche de -50 %. Nous devons donc ici transformer, traduire X avec la valeur -50 pour cent. L'enveloppe des commandes est donc correctement positionnée. Passons à autre chose et personnalisons-le. Je vais le définir en hauteur. Réglons les deux sur dix RAM et changeons également la couleur d'arrière-plan. Dans ce cas, je vais utiliser la valeur RGBA avec la couleur noire et l'opacité 0,9 Après cela, je vais créer l'arrière-plan entoure et également créer la bordure. Nous avons donc besoin ici d'un rayon frontalier d'une valeur de 50 %. Et puis créez une bordure avec les valeurs d'une RAM, solide. Et comme couleur, je vais utiliser à nouveau la valeur RGBA, la couleur noire et l'opacité 0,8 Très bien, asseyons-nous à propos de l'emballage. En fait, nous avons besoin d'un espace entre le cube et les commandes. Alors allons-y et déplaçons le cube vers le haut. Je vais attribuer à chaque poste un parent. Et puis réglez la position supérieure sur moins deux RAM. Ainsi, en cas de position relative, l'élément remontera de deux rampes par rapport à sa position actuelle. OK, allons-y et personnalisons les flèches. Tout d'abord, je vais m' occuper de leurs positions. Sélectionnons l'élément de lien , puis définissons la position sur absolue. Ensuite, je vais définir la position de chaque flèche séparément. Commençons donc par les premiers éléments du lien. Je vais le sélectionner en utilisant le nième sélecteur d'enfants. Nous devons en spécifier un ici pour le premier élément de lien. Cette flèche va donc être placée au centre en haut de l'emballage Mettons donc la première position à zéro. Et puis nous avons encore besoin de la position gauche de 50 %. Et puis transformez la traduction x -50 %. OK, donc la première flèche est positionnée, mais comme vous pouvez le voir en ce moment, elle n'est pas tout à fait visible. Alors allons-y et réglons ce problème. Je vais sélectionner les éléments I. Augmentons sa taille de police, faisons-en 1,5 RAM. Changez ensuite la couleur. Vous voyez votre couleur principale. Et en plus de cela, je vais diminuer l'opacité. Mettons-le à 0,5. Ok, maintenant, comme tu peux le voir, ça a l'air bien mieux. Allons-y et positionnons la deuxième flèche. Il va être placé au centre, mais en bas de l'emballage Dupliquons donc ce code ici. Changez un en deux. Et nous avons également besoin ici position inférieure avec la valeur zéro. Bon, passons à autre chose et positionnons la troisième flèche. Il va être placé au centre, mais sur le côté gauche de l'emballage Nous allons donc sélectionner le troisième élément de liaison , puis définir la position difficile. Faites-en 50 %. La position de gauche va être nulle. Et puis pour envoyer aux éléments, nous devons à nouveau transformer. Mais dans ce cas, nous devons traduire la fonction selon la direction Y avec la valeur -50 % La flèche suivante sera également placée au centre, mais sur le côté droit. Allons-y donc et dupliquons ce code. Ce sera un quatrième élément de lien. Et nous devons entendre la bonne position avec la valeur zéro. D'accord ? Comme vous pouvez le voir, quatre flèches ou position, il en reste seulement deux. Passons à autre chose et sélectionnons la cinquième flèche. En fait, il va être placé au milieu de ces deux flèches. Nous avons donc besoin ici des positions les plus élevées et les plus appropriées, toutes deux de dix pour cent. Ensuite, nous devons nous transformer. Mais dans ce cas, je vais utiliser la fonction de rotation. Je vais faire pivoter l' élément de 45 degrés. D'accord ? Nous devons donc positionner la dernière icône. Dupliquons ce code ici. Ce sera le sixième article. Au lieu du haut et de la droite, nous avons besoin ici de Boltzmann Comme vous pouvez le voir, les six flèches sont prêtes, elles sont positionnées. La seule chose que nous devons faire est de créer un petit effet de survol Je vais augmenter l'opacité des icônes à une Nous allons donc sélectionner les contrôles. Un survol, suivi des éléments I. Réglons l'opacité sur un. Ensuite, utilisez la transition avec les valeurs opacité 0,5 s. OK, voyons voir, les contrôles sont personnalisés et nous devons maintenant les faire fonctionner. Alors passons à autre chose. 37. Projet 4 - Faire fonctionner un cube: Très bien, donc tout est prêt pour commencer à programmer le cube et les commandes Tout d'abord, je vais faire tourner le cube automatiquement, puis nous programmerons les commandes. heure actuelle, le cube pivote de 91 degrés dans la direction y Je vais donc commenter cette phrase. Suivant. Passons au fichier JavaScript et insérons de nouveaux commentaires pour le cube. Sélectionnez ensuite le cube. Je vais créer une nouvelle variable. Nous allons sélectionner le cube à l'aide de la méthode QuerySelector. Nous devons spécifier ici le nom de la classe q. Nous allons donc faire pivoter le cube un degré selon l' axe Y Et nous allons le faire pivoter avec très peu d'intervalles. Je veux dire, juste cent millisecondes. Je vais donc créer une nouvelle fonction. Appelons ça Play Pose. Créons une nouvelle variable et attribuons-lui une fonction de flèche. Nous devons maintenant utiliser une méthode appelée set interval. Comme vous le savez, il faut deux arguments. La première est une fonction de rappel, qui sera exécutée à intervalles réguliers Quant au second, il s'agit du montant de l' intervalle lui-même. Donc, comme nous l'avons dit, l'intervalle sera de 100 millisecondes Très bien, nous devons maintenant faire pivoter le cube selon l'axe Y. Nous devons donc utiliser la propriété style. Attachons-le au cube et il sera suivi du transport. Nous devons maintenant spécifier la valeur de la fonction de rotation. Comme nous l'avons dit, nous devons faire pivoter le cube d' un degré après chaque intervalle. Pour ce faire, je vais d'abord créer une nouvelle variable. Appelons-le y et, par défaut, mettons-le à zéro. Ensuite, nous devons passer ici, faire pivoter la fonction Y. Ainsi, après chaque intervalle, nous devons augmenter la valeur d'une unité. Nous avons donc besoin ici du signe du dollar. Ensuite, nous avons besoin de la variable y. Et pour l' augmenter d'une unité, nous devons utiliser ici l'opérateur d' incrémentation, qui est exprimé par des signes doubles plus Ça va être suivi de diplômes. D'accord ? Appelons maintenant la fonction. Comme vous pouvez le voir, le cube tourne. Si nous inspectons la page et vérifions le cube dans l'onglet Éléments, vous verrez qu'après cent millisecondes, la valeur de la fonction de rotation augmente d'une unité la valeur de la fonction de rotation augmente heure actuelle, l' effet de rotation ne semble pas très bon car nous devons utiliser la transition. Insérons donc votre transformation et la durée de 0,5 s. Très bien, nous avons maintenant un bien meilleur effet Ensuite, je vais m' occuper des commandes. En fait, nous allons utiliser une technique similaire. Nous allons faire pivoter le cube dans différentes directions. Mais dans ce cas, nous le ferons une fois que nous aurons cliqué sur les commandes Allons-y et attachons à chaque flèche l'écouteur d'événements contenant l'événement de clic Commençons par le contrôle supérieur. Nous devons associer un événement de clic aux éléments du lien. Dans la vidéo précédente, nous avons ajouté des classes supplémentaires aux éléments I et il serait en fait préférable attribuer ces classes à la création d'éléments de liens. Parce que là encore, nous devons sélectionner les éléments du lien et non l'icône. Désignons donc ces classes comme des éléments allégés. Rapidement. Je vais les découper et les coller en tant que valeurs des attributs de classe. Très bien, après cela, sélectionnons les premiers éléments du lien Je vais utiliser à nouveau la méthode de sélection de requêtes. Et puis spécifiez ici le contrôle X supérieur de la classe et la paranthèse Ensuite, je vais y attacher un écouteur d'événements avec un événement de clic Et nous devons également passer ici la fonction flèche, qui sera exécutée une fois que nous aurons cliqué sur l'icône. Ainsi, une fois que nous avons cliqué sur le contrôle supérieur, nous devons faire pivoter le cube dans la direction X. Je vais donc récupérer cette ligne de code à partir d'ici. Changez ensuite y en x. Ici. Nous n'avons pas besoin du signe plus car nous allons augmenter la valeur d'un, mais de 20 degrés. Nous pouvons donc écrire ici que x est égal à x plus 20. Dans ce cas, la valeur augmentera de 20 à chaque clic. Ou nous pouvons simplement écrire ici signe Plus égal. Ces expressions sont les mêmes. D'accord ? En outre, nous devons créer une nouvelle variable. Appelons-le x et mettons-le à zéro. En fait, avant de programmer toutes les commandes, je vais suspendre cette fonction pendant un certain temps afin de mieux voir les résultats. Donc, si nous cliquons sur la commande supérieure, le cube pivotera dans la direction X de 20 degrés. OK, allons-y et faisons de même pour le contrôle du bas. Dupliquons ce code. Remplacez le haut par le bas. Et au lieu du signe plus, nous avons besoin ici du signe moins, car nous devons faire pivoter le cube dans la direction opposée. OK, donc tout fonctionne bien. Passons à autre chose et programmons la commande de gauche. Dupliquons à nouveau ce code. Nous avons besoin ici de la gauche y. Changez également de direction. Nous avons besoin de l'axe Y. Maintenant, si je clique sur la commande de gauche, le cube va pivoter. Mais nous avons ici un petit problème si nous cliquons sur la flèche gauche puis si nous cliquons sur le contrôle supérieur, au début le cube retrouvera sa position par défaut , puis il tournera. Nous n'en avons pas besoin. Nous devons conserver la position précédente du cube. Pour ce faire, nous devons définir les trois directions, quelle que nous devons définir les trois directions soit la direction dans laquelle nous changeons. Nous devons donc ajouter ici la rotation y. Insérons vos degrés y. Ensuite, nous devons faire pivoter Z. Avec Z degrés En fait, nous devons créer une variable pour la direction z. Créons-le et mettons-le à zéro. D'accord, ajoutons également la fonction de rotation ici. Nous avons besoin de faire pivoter x puis de faire pivoter z. D'accord ? Alors maintenant, si nous vérifions, vous verrez que tout fonctionne parfaitement. Très bien. Allons-y et occupons-nous du reste des contrôles. Dupliquons ce code et modifions-le de gauche à droite. Et aussi, au lieu du signe moins ici, plus. Très bien, donc le bon contrôle fonctionne bien. Passons à autre chose et programmons ces deux flèches. Dupliquons à nouveau ce code. Nous avons donc besoin ici du sommet Z. Dans ce cas, nous devons donc faire pivoter le cube dans la direction z. Je vais donc vivre ici juste y. Pour ce qui est de la fonction de rotation Z, nous avons besoin ici de z moins égal à 20. D'accord ? Ce contrôle fonctionne donc bien. Passons à autre chose et occupons-nous de la dernière. Dupliquons ce code ici. Changez ensuite de haut en bas. Et aussi, au lieu du signe moins, insérons ici le plus. Très bien, donc toutes les commandes fonctionnaient parfaitement. Nous en avons presque fini avec le cube. Nous devons simplement y ajouter quelques éléments supplémentaires. Débarrassons-nous des commentaires à partir d'ici. Comme vous le voyez, la propriété de transformation possède uniquement la fonction de rotation y ici. Nous devons donc également ajouter ici d'autres directions. Sinon, cela ne fonctionnera pas correctement. Nous avons donc besoin ici de faire pivoter x puis de faire pivoter Z. Très bien, maintenant tout fonctionne bien La seule chose que je vais faire est d'empêcher le cube de tourner. Une fois que nous avons survolé les commandes. Pour cela, nous devons créer une nouvelle variable qui aura la valeur booléenne Mettons cela sur vrai. Ensuite, nous devons créer une instruction if-else dans la fonction Comme condition, je vais insérer votre piscine. Donc, si c'est vrai, nous devons exécuter cette fonction. Nous allons donc récupérer ce code et le coller ici. Et ensuite, si c'est faux, nous avons besoin d'une instruction else dans laquelle nous devons arrêter d' exécuter cette fonction en utilisant la méthode de l'intervalle clair. Donc, pour effacer l'intervalle dans un premier temps, nous devons le stocker dans la variable, puis nous devons passer cette variable dans la fonction intégrale claire. Allons-y et créons une nouvelle variable. Nous devons le déclarer sans aucune valeur. Ensuite, stockez et vendez la fonction intégrale de cette variable. Enfin, passez-le dans la fonction intégrale claire de l'instruction else. Donc, pour l'instant, tout fonctionne bien. Le cube tourne. Mais si nous modifions la valeur de la variable de démarrage et lui attribuons la valeur false par défaut, le cube cessera de tourner. OK, revenons ici aussi. Nous devons maintenant utiliser l'événement de survol de la souris. Allons-y et sélectionnons les commandes. Je vais utiliser à nouveau la méthode QuerySelector. Spécifions ici les contrôles de classe , puis appliquons l'écouteur d'événements en passant la souris sur l'événement Donc, une fois que nous passons la souris sur les commandes, nous devons arrêter la rotation. Par conséquent, nous devons définir le booléen vrai, faux. Nous devons également appeler à nouveau la fonction pour effacer l'intervalle et arrêter la rotation. Alors maintenant, si je passe la souris sur les commandes, le cube cessera de tourner Mais une fois que nous aurons retiré la souris, elle ne continuera pas à tourner Nous devons donc y remédier. Dupliquons ce code et modifions l'événement. Il faut que la souris sorte. Et au lieu d'être faux, nous avons besoin que vous le fassiez. OK, maintenant tout fonctionne parfaitement. La seule chose que je vais faire est de modifier la valeur de la variable y. Passons à 20, car une fois la page rechargée, je veux que le cube soit légèrement pivoté au point de départ Et en plus de cela, nous devons modifier cette valeur par défaut par rapport au CSS. Supprimons donc le commentaire à partir d'ici et ajoutons ici les fonctions rotation x et rotation Z. Nous devons les mettre à zéro pour les deux . Quant à la rotation y, elle sera de 20 degrés. D'accord ? C'est donc ça. Tout fonctionne parfaitement. Et en fait, nous avons fini de travailler sur le cube. Passons à la section suivante. 38. Projet 4 - Créer et personnaliser la section iPhone: Très bien, une fois que nous avons terminé la première section, il est temps de passer à autre chose et de créer la suivante Jetons un coup d'œil à la version finale du projet. Cette section va être relativement simple. Nous aurons quelques éléments tels que le titre. Ensuite, les images qui changent du temps survolent avec un effet de fondu. Et ces deux boutons sont également dotés d'un effet de survol. OK, c'est donc ça que nous allons créer. Allons-y et commençons à créer un balisage HTML. Je vais insérer de nouveaux commentaires, section deux et section deux. Ensuite, ouvrez l'élément de section avec une section de classe deux. Ensuite, nous aurons le titre. Et en fait, je vais à nouveau séparer toutes les parties de cette section par des commentaires. Insérons donc un énorme titre de section deux dans le titre de section deux. Ensuite, ouvrez la balise H1 avec un titre de section 2 de classe avec le contenu iPhone 12 D'accord. Ensuite, nous aurons les images. Insérons à nouveau de nouveaux commentaires, section deux images. Puis fin de section pour les images. Et ouvrez la balise div, qui sera l'enveloppe que je vais attribuer à la classe Je vais donc vous insérer pour différer les éléments de l'image. Ouvrons le premier et sélectionnons l'image. Nous avons un dossier appelé images. Ensuite, dans ce dossier, nous avons un autre dossier appelé iPhones, lequel nous devons sélectionner l'un des iPhones, Im2 point PNG Je vais également attribuer à l' attribut de classe d'élément d'image une valeur iPhone IMG one. Dupliquons l'élément d'image et changeons le nom de l'image. Nous avons besoin ici d'iPhones pour IMG. Et je vais aussi changer le nom de la classe. Nous avons besoin ici d'img2. OK, c'est tout pour les images. Ensuite, nous devons créer la dernière partie de cette section. Je veux dire les boutons. Créons donc de nouveaux commentaires. Boutons de section deux, puis boutons de fin de section deux. Ouvrez ensuite la balise div, qui sera le wrapper Je vais lui attribuer la classe iPhone BTS. Nous aurons donc deux boutons différents et ils seront présentés par les éléments de lien. Ouvrons donc un tag avec la classe iPhone btn. En plus de cela, nous avons besoin d' un élément span pour chaque bouton. Ils s'afficheront une fois que nous passerons la souris sur les boutons en tant que contenu, insérons Vous allez apprendre bien plus que dupliquer des éléments et modifier le contenu de l'élément span. Nous avons besoin d'une boutique ici. D'accord, c'est donc tout à propos du balisage HTML. Passons à autre chose et commençons à écrire du CSS. Insérons vos nouveaux commentaires pour la section 2. Tout d'abord, je vais définir la largeur et la hauteur. Sélectionnons deux éléments d'une section et définissons la largeur à 100 %. Pour ce qui est de la hauteur, je vais la faire passer à 120 % de la fenêtre d'affichage En outre, créons de l'espace en haut et en bas de cette section à l'aide d'un rembourrage Réglons-le à 10 % de la fenêtre d'affichage en haut et en bas et zéro sur les côtés gauche et droit La hauteur de cette section correspond donc à 120 % de la fenêtre d'affichage. Mais la constante elle-même occupe une hauteur de 100  % dans la fenêtre d'affichage. Un rembourrage en haut et en bas nous laisse de l'espace entre les sections Parce que la propriété de taille de la boîte est définie sur border-box dans les Juste après, je vais aligner les éléments à l' aide de Flexbox. Réglons donc l'affichage sur Flex. Ensuite, nous devons aligner les éléments verticalement dans une colonne afin de changer la direction du flux. Faisons-en une colonne. Ensuite, je vais aligner les éléments au centre horizontalement en utilisant l'option Aligner les éléments au centre. Enfin, afin de créer de l'espace autour des éléments flexibles, utilisons la fonction de justification du contenu avec l'espace autour des valeurs. D'accord, c'est tout à propos de cet élément de section. Passons à autre chose et personnalisons le titre. Instituons de nouveaux commentaires. Titre de la section 2. Du titre de la section 2. Sélectionnez ensuite les éléments de titre et augmentez la taille de la police, faites-en dix RAM. Ensuite, je vais alléger la police en utilisant font-weight. Portons-en à 200. Et aussi, définissons la couleur du texte en noir. Très bien, c'est tout à propos du titre pour le moment, passons à autre chose et prenons soin des images Insérons de nouveaux commentaires. Images de la section 2. Ensuite, et hors section deux images. Et sélectionnez le wrapper div elements, qui appartient à la classe iPhones Je vais définir la largeur et la hauteur. Réglons la hauteur à 60 % de la fenêtre d'affichage. C'est pour la largeur. Je vais en faire 50 % de la fenêtre d'affichage Nous avons besoin d'une largeur de fenêtre de 50. OK, ensuite je vais sélectionner l'image elle-même. Et nous devons définir la largeur et la hauteur. Dans ce cas, je vais hériter des deux valeurs. Nous devons donc hériter de la largeur et de la hauteur. Et je vais également utiliser object contains. La taille des images est désormais plus petite. Ensuite, je vais les placer l'un sur l'autre. Pour cela, utilisons la position absolue. OK, pour l'instant, c'est tout pour les images. Passons à autre chose et personnalisons les boutons. Je vais insérer de nouveaux commentaires. Boutons de la section 2. Et des boutons de la section 2. Sélectionnez ensuite les éléments div du wrapper. Je vais donc m'aligner. Mais comme nous utilisons flexbox, nous avons besoin ici de display flex Ensuite, je vais personnaliser le bouton lui-même. Nous allons donc le sélectionner. Mais avant cela, masquons les éléments de la plage pendant un certain temps Sélectionnons-les et définissons la propriété d'affichage sur aucune. Ensuite, commencez à personnaliser les boutons. Tout d'abord, je vais régler la largeur et la hauteur, toutes deux à six RAM. Changez ensuite l'arrière-plan. Je vais utiliser votre dégradé linéaire. Tout d'abord, définissons la direction de la transition. Je vais aller à droite. Ensuite, utilisez la première couleur. Dans ce cas, je vais utiliser la valeur RGB. Insérez vos 5013 fois. Je vais également insérer une valeur supplémentaire, 60 %, ce qui signifie que la transition des appelants commencera après 60 % de la première couleur Ensuite, je vais insérer la deuxième couleur. Réutilisez la valeur RGB. Insérons ici deux à trois fois. Ensuite, créons un espace entre les boutons et arrondissons-les. Utilisez la marge. Je vais le mettre à zéro en haut et en bas, puis à trois rem sur les côtés gauche et droit. En ce qui concerne le rayon de bordure, définissons-le à 50 % OK, pour l'instant, c'est tout pour les boutons. Ensuite, je vais créer ces cadres à l'intérieur des boutons en utilisant les pseudo-éléments after. Nous allons donc sélectionner iPhone btn, suivi des pseudo-éléments suivants Tout d'abord, nous devons définir le contenu. Faisons en sorte qu'il soit vide. Ensuite, je vais définir la largeur et la hauteur. Réglons les deux à 50 %. De plus, je vais régler l'affichage sur bloc afin de rendre les éléments réalisables. Enfin, créez une bordure avec la valeur 0,1 RAM solide. Et comme couleur, utilisons six E D a, E6. Nous avons donc ici les cadres, mais comme vous pouvez le voir, nous devons fixer leurs positions. Ils doivent être placés au centre des boutons. Et je vais aussi les arrondir légèrement. Alors tout d'abord, utilisons border-radius avec une RAM de valeur 1 Pour centrer les cadres à l'intérieur des boutons, nous devons utiliser Flexbox. Comme vous le savez, nous avons tous déjà créé un centre de clusters avec certaines propriétés de flexbox Je vais donc attribuer aux deux boutons le centre de classe. Très bien, c'est tout à propos du pseudo-élément after. Je vais maintenant m'occuper des éléments de ce panneau. Par défaut, ils doivent être masqués et nous devons les afficher lorsque nous survolons les boutons Avant de créer l'effet de survol, je vais d'abord personnaliser les éléments de la plage Rendons-les donc visibles et éliminons tout affichage à partir d'ici. Comme vous pouvez le constater, une fois que les éléments de la plage sont visibles, ils ont altéré la mise en page Nous devons donc tout d'abord prendre soin de leurs positions. Je vais les placer en haut des boutons. Réglons donc leur position absolue plutôt que pour positionner les éléments de la plage en fonction de leur élément parent, qui est le bouton, nous devons attribuer une position par rapport au bouton Ensuite, je vais définir la position supérieure. Faisons en moins trois rampes. Très bien, les éléments de cette casserole sont donc positionnés. Ensuite, je vais les personnaliser. Changeons la taille de la police, mettons-la à 1,6 RAM. De plus, je vais régler le poids de la police à 400. Transformez ensuite le texte en majuscules. Créez également un espace entre les lettres. Faisons en sorte qu'il fonctionne à 0.1. Et puis changez de couleur. Je vais utiliser ici la couleur primaire. Maintenant, les éléments sont personnalisés. Mais comme vous le voyez, nous avons ici un petit problème. Le premier élément de travée est divisé sur deux lignes différentes. Et pour résoudre ce problème, définissons une largeur avec une valeur maximale de contenu. Dans ce cas, comme le nom de cette valeur l'indique, l'élément occupera la largeur requise pour afficher le contenu de l'élément. Très bien, les éléments de la plage sont personnalisés et nous devons maintenant créer un effet de survol Tout d'abord, je vais masquer ces éléments de span par défaut. Et pour cela, je vais utiliser propriété de transformation avec la fonction scale. Pour masquer les éléments, nous devons mettre l' échelle à zéro. L'élément est donc masqué. Ensuite, sélectionnons un bouton avec le pointeur de la souris, suivi de l'élément span Donc, pour rendre l'animal visible, nous devons régler l'échelle sur un. Et utilisons également la transition avec la valeur transform 0.5 s. accord ? Ainsi, une fois que nous survolons les boutons, les éléments de la fenêtre apparaîtront correctement. La majeure partie de cette section est donc terminée, mais nous devons faire encore quelques choses. Nous devons ajouter un arrière-plan au titre et aux images. Et nous devons également créer un autre effet de ligne complet pour les images. Allons-y et commençons par l'arrière-plan du titre qui va être créé en utilisant le pseudo élément before. Allons-y donc et sélectionnons-le. Tout d'abord, nous devons définir le contenu. Faisons en sorte qu'il soit vide. Définissez ensuite la largeur et la hauteur. Je vais faire en sorte que la largeur de l'arrière-plan soit de 130 %. Pour la hauteur, fixons la largeur de la fenêtre d'affichage à 30. En plus de cela, nous avons besoin d' un arrière-plan avec une fonction de gradient linéaire. Je vais insérer tes deux couleurs. La première sera la couleur principale. Car le second sera de couleur blanche. Donc, pour l'instant, l' élément n'est pas visible. Nous devons définir sa position. Mettons-le donc sur l'absolu. En outre, nous devons positionner le titre de manière relative car il s'agit d'un élément parent et nous devons positionner arrière-plan en fonction de l'élément parent. Nous avons donc ici le contexte. Ensuite, je vais définir les propriétés du haut et de la gauche. Mettons-les tous les deux à zéro. De plus, nous devons incliner l'élément dans la direction x. Utilisons donc Transform, puis la fonction appelée skew X. Et comme valeur, je vais insérer ici -50 degrés Maintenant, l'arrière-plan est bien meilleur, mais nous devons encore y ajouter quelques styles supplémentaires. À l'heure actuelle. Elle est biaisée en fonction du centre, car comme vous le savez par défaut, l'origine de la transformation est le centre Dans ce cas, nous devons le changer et créer un haut à gauche. Allons-y et définissons l'origine de la transformation en haut à gauche. L'arrière-plan est donc correctement positionné. Mais nous avons ici un petit problème. Ils ne s'étaient pas retrouvés en arrière-plan. Et pour résoudre ce problème, utilisons la propriété z-index Je vais le régler sur une valeur inférieure à zéro. Faisons donc moins un. Et en plus de cela, je vais définir les coins de l' arrière-plan en utilisant border-radius avec la valeur one rep. Très bien, voyons le contexte Avant de passer aux images, je souhaite augmenter l'espace entre le titre et les images. On lui a donc attribué la marge la plus basse avec la valeur cinq fois. Hein ? Maintenant, nous pouvons nous occuper des images. Tout d'abord, je vais créer l'arrière-plan. Je vais utiliser à nouveau dégradé linéaire avec deux couleurs différentes. La première sera la couleur primaire. Quant au second, il doit être de couleur blanche. Ensuite, utilisez border-radius avec la valeur 0,5 rant. D'accord, nous avons donc l'arrière-plan et la seule chose que nous devons faire est de créer un effet de survol Par défaut, je vais masquer la deuxième image et l' afficher en survolant. Allons-y et cachons cette deuxième image. Sélectionnons-le et réglons l'opacité à zéro. Nous devons maintenant créer un effet de survol. Sélectionnez les iPhones à enveloppe avec le pointeur de la souris, suivi de la première image Réglons l'opacité à zéro. Ensuite, je vais dupliquer ce code. Nous avons besoin ici du G2 et de celui de l'opacité. Et enfin, utilisez la transition avec les valeurs opacité 3 s. Donc maintenant, si nous survolons les images, vous verrez que tout fonctionne parfaitement Avec cette deuxième section, nous en avons terminé. Passons à autre chose et occupons-nous de la suivante. 39. Projet 4 - Créer et styliser la section MacBook - Partie 1: Très bien, donc une fois que nous avons terminé la deuxième section il est temps de passer à autre chose et de commencer à travailler sur la section suivante, qui sera la section MacBook Tout d'abord, examinons les projets terminés et voyons à quoi ressemble cette section. Ainsi, une fois que nous faisons défiler la page vers le bas, le MacBook s'ouvre, le logo et la barre de progression apparaissent. Après cela, le magma s' allumera et certains contenus s'afficheront Voyons donc ce que nous allons créer. Allons-y et commençons par le balisage HTML. Je vais insérer de nouveaux commentaires pour la section 3. Ouvrez ensuite les éléments de section avec la section 3 de la classe. Cet élément de section sera composé de deux parties principales. Nous aurons le titre et le contenu, qui lui-même comprendra deux parties différentes. Insérons donc vos nouveaux commentaires pour le titre de la section 3. Ouvrez ensuite la balise de titre H1 avec le titre de la section 3 de la classe Et comme contenu, insérons votre MacBook Air. Ensuite, nous devons créer le contenu. Insérons donc de nouveaux commentaires. Contenu de la section 3 du contenu de la section 3. Ouvrez ensuite la balise div avec le contenu de la section 3 de la classe. Dans cette partie, nous aurons des images. Je suis sur les images des parties supérieure et inférieure du MacBook. Au départ, il s'agissait d'une seule image et je l'ai séparée en deux parties pour créer un effet d'ouverture sur MacBook. Insérons de nouveaux commentaires. Images de la section 3. Puis à la fin de la section trois images. Je vais ouvrir la balise d'image , puis spécifier ici la partie de l'image. Nous avons un dossier Images. Ensuite, nous devons sélectionner le dossier MacBook et l'image (point d' écran du MacBook PNG). En plus de cela, utilisons l' attribut de classe avec une valeur MacBook IMG one. Dupliquons cette ligne de code et changeons le nom de l'image dont nous avons besoin ici : clavier multiple, lot PNG comme nom de classe public. Ce sera un MacBook img2. OK, je vais maintenant créer votre logo et la barre de progression du chargement. Instituons donc de nouveaux commentaires. Section 3 : Chargement. Puis fin du chargement de la section 3. Instituez ensuite la balise div avec un wrapper de chargement de classe. Ensuite, je vais créer une autre balise div. Avec une classe en cours de chargement. Il sera composé de deux éléments différents. Le premier sera le logo. Je suis dans la police, icône Awesome, qui est ouverte. L'élément I avec une classe est FAB, FA, apple. Quant au deuxième élément , ce sera div, qui sera la barre de progression. Très bien, après cela, je vais créer que la dernière partie du contenu sera consacrée aux informations de la section 3 Nous allons insérer vos commentaires. Je vais donc ouvrir la balise div, qui sera le wrapper Attribuons à sa classe les informations MacBook. À l'intérieur de cet élément, nous aurons trois éléments différents. Je veux dire le paragraphe d'en-tête et le bas. Ouvrons la balise d'en-tête H2 avec un titre de classe MacBook Info comme contenu Insérons ici la vitesse de la lumière. Ensuite, je vais ouvrir la balise P avec prix d'un MacBook de classe comme contenu. Insérons ici à partir de 999$. Après cela, nous devons créer un bouton. Attribuons-lui la classe MacBook, btn, puis interférons maintenant Très bien, le balisage HTML est donc créé et nous devons maintenant écrire du CSS. Allons-y et insérons vos nouveaux commentaires pour la section 3. Je vais ensuite sélectionner les éléments de la section. Et tout d'abord, définissons que nous pouvons masquer, je vais les régler à 200 % et également changer la couleur de fond. Mettons-le en noir. OK. Ensuite, je vais aligner les éléments au centre à l'aide de Flexbox. Utilisons le centre du cluster, que nous avons préparé dans les styles courants, et attribuons-le à l'élément de section. De plus, nous devons changer de direction afin d' aligner les éléments verticalement dans une colonne. Définissons donc la direction de flexion pour les appeler. Enfin, je vais créer un petit espace en haut et en bas de cette section. Utilisons du rembourrage. Réglez-le sur 15 RAM en haut et en bas et à zéro sur les côtés gauche et droit. Très bien, c'est tout à propos de cet élément de section. Passons à autre chose et personnalisons le titre, qui n'est pas visible pour le moment car l' arrière-plan est noir. Insérons donc vos nouveaux commentaires, titre de la section 3. Fin du titre de la section 3. Sélectionnez ensuite cet élément de section. Tout d'abord, je vais augmenter la taille de la police. Faisons-en dix RAM. Ensuite, je vais rendre la police plus claire. Réglons l'épaisseur de la police à 200. Changez également la couleur. Je vais utiliser ta couleur principale. Enfin, créons de l'espace en bas en utilisant la marge inférieure à 15 points. Très bien, voyons le titre. Suivant. Je vais m' occuper du contenu. Jetons un coup d'œil au projet terminé. Donc, dans un premier temps, je vais personnaliser le MacBook cette manière, sans aucun effet d'ouverture et de chargement, nous ajouterons l' image d'arrière-plan à l'emballage de chargement Et nous allons également personnaliser les informations du MacBook. Tout d'abord, je vais probablement réduire la taille des images du MacBook. Insérons vos nouveaux commentaires pour le contenu des sections. Ensuite, je vais sélectionner le contenu de la section 3 et régler sa largeur à 80 %. Ensuite, je vais créer de nouveaux commentaires pour les images. Nous avons besoin des images de la section 3 des images de la section 3. Dans ce cas, je veux que l'image hérite de la largeur de l'élément parent Instituons donc avec héritage. Alors maintenant, comme vous pouvez le voir, le MacBook est plus petit. Ensuite, je vais aligner les éléments du contenu à l'aide de Flexbox. Ajoutons un centre de classe au contenu et changeons également la direction, le colorons. En outre, je vais utiliser votre propriété appelée perspective, car nous finirons par créer des effets 3D. Je veux dire, nous allons ouvrir le Mac Book dans un environnement 3D. Je vais définir la perspective 2000 fois. Très bien. Ensuite, je vais ajouter l'arrière-plan au wrapper de chargement, mais avant cela, nous devons l'envoyer à l'écran Insérons donc de nouveaux commentaires pour la section 3, en cours de chargement. Sélectionnez ensuite wrapper et définissez sa position sur absolue. Ensuite, afin de le positionner en fonction de son élément parent, définissons la position sur relative pour le contenu de cette section. Ensuite, je vais définir la largeur et la hauteur de l'emballage Réglons la largeur à 60 %. Quant à la hauteur, faisons-la à 85 %. J'ai choisi ces valeurs manuellement afin d'adapter l'emballage de chargement à l'écran du MacBook. Je les utilise pour vos valeurs en pourcentage afin de rendre l'image d'arrière-plan réactive aux différentes tailles d'écran Définissons une image comme arrière-plan. Tout d'abord, je vais utiliser un dégradé linéaire. Insérons ici la valeur RGBA. Je veux dire la couleur blanche et régler l'opacité sur 0,4. Ensuite, utilisez ici la même couleur. Ensuite, je vais définir le chemin de l'image. Nous avons un dossier d'images plutôt qu' un autre dossier, MacBook, puis sélectionnez MacBook one desktop point PNG. En plus de cela, je vais définir le centre de position. Et nous avons également besoin ici de ne pas répéter. D'accord, nous avons donc ici l'image d'arrière-plan, mais pour le moment, elle ne convient pas à l'écran car nous avons du contenu en dessous. Je vais le placer au centre. Instituons donc de nouveaux commentaires. Nous avons besoin des sections que nous informons plutôt que des informations de fin de la section 3 et sélectionnez Informations sur le MacBook. Je vais définir sa position comme absolue. Maintenant, considérons que nous avons de bien meilleurs résultats, mais nous devons tout de même masquer cette petite partie de l'image d'arrière-plan. Et nous devons également le déplacer légèrement haut afin de masquer la partie inférieure de l'image. Je vais le placer derrière l'écran. Et pour cela, utilisons la propriété z-index. Je vais le régler sur une valeur inférieure à zéro. Faisons moins un. Ensuite, je vais déplacer l'image légèrement vers le haut en utilisant la position supérieure. En général, lorsque vous utilisez la position absolue, positions supérieure et gauche sont définies sur zéro par défaut. Mais dans ce cas, l' emballage de chargement est un élément flexible. Il est centré à l'aide de Flexbox. La position est donc modifiée et le sommet n'est plus égal à zéro Allons-y et fixons la position maximale à 6 %. Cela déplacera légèrement les éléments vers le haut. Très bien, voyons voir, l'arrière-plan est correctement positionné. Ensuite, je vais personnaliser les informations du MacBook 40. Projet 4 - Créer et styliser la section MacBook - Partie 2: Très bien, nous devons maintenant personnaliser les informations du MacBook, mais avant cela, je vais masquer le logo pendant un certain temps. Sélectionnons donc le chargement et assignons à n'en afficher aucun. OK, ensuite je vais m' occuper des informations sur le MacBook. Je vais définir la largeur. Mettons-le à sept pour qu'il fonctionne. Et je vais également placer les éléments au centre en utilisant le centre d'alignement du texte Très bien, ensuite, allons-y et stylisons le titre. Sélectionnons le titre MacBook Info. Tout d'abord, je vais augmenter la taille de la police. Faisons-en six RAM. Ensuite, je vais rendre la police un peu plus claire. Réglons donc la police sur 400 et changeons également la couleur. Dans ce cas, je vais utiliser la colonne principale. Donc le titre semble bon, mais je pense qu'il n'est pas tout à fait visible. Je vais donc légèrement augmenter l'opacité des couleurs du dégradé linéaire À l'heure actuelle, ils sont de 0,4. Augmentons-les donc et faisons-les 0,6. OK, maintenant je pense que c'est mieux. Passons au paragraphe. Sélectionnons le prix du MacBook. Augmentez ensuite la taille de la police, faites-la 2,5 rem. De plus, je vais alléger la police. Réglons l'épaisseur de la police à 200. Et en plus de cela, je vais créer de l' espace en haut et en bas en utilisant la marge. Réglons-le à trois rem en haut et en bas et à zéro sur les côtés gauche et droit. Très bien, c'est tout à propos du paragraphe. Passons à autre chose et personnalisons le bouton. Je vais sélectionner MacBook BTN. Réglons la largeur à 25 RAM. Ensuite, je vais définir la hauteur. Faisons cinq rem. Ensuite, je vais changer l'arrière-plan. Utilisons l' image d'arrière-plan puis fonction de dégradé linéaire avec deux couleurs différentes. Le premier sera D, D, D. Je suis en gris clair. Quant à la seconde, elle sera de couleur blanche. Ensuite, je vais supprimer la bordure par défaut. Réglons la bordure sur aucune. De plus, je vais arrondir les coins du bouton en utilisant le radius de la bordure Nous valorisons 0,5 rem. En plus de cela, utilisons box-shadow. Je vais utiliser un box-shadow à plusieurs niveaux. Le premier sera égal à 0,1 round trois fois. Et la couleur blanche. Quant à la seconde, ce sera la même ombre mais sur le côté gauche. Nous avons donc besoin ici de -0,1 pièce deux fois, puis de 0,1 RAM et de la même couleur blanche OK, on considère donc que le bouton est bien plus esthétique, mais je vais y ajouter quelques styles supplémentaires. Définissons donc la taille de la police, faisons-en 1,5 RAM. Ensuite, je vais régler la taille de la police sur 500. Créez également un espace entre les lettres. Passons à la RAM. Modifiez également la couleur du texte. Utilisons ici la couleur primaire. Et enfin, changez le type du plus grossier, indiquez-le Très bien, voyons les informations sur le MacBook. Il est personnalisé et je vais maintenant m'occuper de la partie chargement. l'heure actuelle, l'icône Apple est masquée, alors rendons-la visible. Je vais me débarrasser de n'en afficher aucun à partir d'ici. Réglez ensuite la largeur et la hauteur, toutes deux à 200 %. Ensuite, je vais m' occuper de sa position. Réglons la position sur absolue. Définissez ensuite les propriétés du haut et de la gauche. Je vais les mettre tous les deux à zéro. En plus de cela, changeons la couleur de fond. Je vais le rendre noir. On voit donc que nous devons nous cacher dans les informations du MacBook. Je vais le faire en utilisant l'opacité. Mettons-le à zéro. Très bien, passons à autre chose et personnalisons le logo. Sélectionnez l'icône Font Awesome. Augmentons sa taille de police, faisons-en dix RAM. Et changez également la couleur. Faisons en sorte qu'il soit blanc. Nous avons donc ici le logo, mais nous devons corriger sa position. Je vais placer le logo ainsi que la barre de progression au centre. Pour cela, je vais ajouter un centre de cluster au chargement. Et nous devons également changer de direction. Mettons-la en colonne car nous devons placer les éléments verticalement. Nicole. OK, occupons-nous de la barre de progression. Pour le moment, il n'est pas visible car nous avons juste ici l'élément div vide Allons-y et sélectionnons-le. Et tout d'abord, définissez sa largeur et sa hauteur. Je vais régler avec 222 RAM. Quant à la hauteur, faisons-en 0,3 RAM. Et changez également la couleur d'arrière-plan, faites-la 888. Maintenant, la barre de progression est faisable, mais elle est placée trop près du logo. Allons-y et corrigeons ce problème en utilisant la marge. Je vais placer la marge du bas vers la rampe. Très bien, donc la seule chose que je vais faire avec une barre de progression est de l'arrondir Utilisons donc le rayon de la bordure avec une valeur de cinq rem. Très bien, c'est tout pour la barre de progression. Comme vous vous en souvenez, lorsque nous faisons défiler la page vers Comme vous vous en souvenez, le bas et que le MacBook s'ouvre, la barre de progression devrait donner l'impression que nous allons créer cet effet en utilisant les pseudo-éléments après Alors sélectionnons-le. Tout d'abord, définissez le contenu. Nous devons le vider. Ensuite, je vais définir la position sur absolue. Ensuite, afin de positionner l'élément en fonction de son parent, attribuons à la barre de progression une position relative. Ajoutez ensuite d'autres styles aux pseudo-éléments suivants. Je vais définir les propriétés du haut et de la gauche. Mettons-les tous les deux à zéro. Ensuite, je vais définir la largeur et je vais la porter à 50 % pendant un certain temps Finalement, il sera nul et augmentera une fois que nous ferons défiler bas et que la barre de progression apparaîtra. Ensuite, fixons la valeur maximale à 200 % et changeons également la couleur d'arrière-plan. Faites-le blanc. Tout est donc prêt. Et maintenant, nous devons ajouter des effets au MacBook. Passons au fichier Java et insérons vos nouveaux commentaires, section 3. Et la troisième section. Nous devons donc créer des effets et les afficher une fois que nous avons fait défiler la page jusqu'à la section 3. Nous allons donc utiliser un scroll events. Et en plus de cela, je vais ajouter une nouvelle classe. Il s'agit du contenu de la section 3. Ensuite, en utilisant cette nouvelle classe, nous allons définir différents styles CSS. Tout d'abord, sélectionnons le contenu de la section 3. Je vais créer une nouvelle variable, puis sélectionner ces éléments à l'aide de la méthode QuerySelector Nous devons spécifier ici le nom de la classe, le contenu de la section 3. Ensuite, je vais me connecter à l' écouteur d'événements d' objet de la fenêtre avec un événement de défilement En fait, la fenêtre est l'objet global. Précisons ici qu'ils font défiler les événements et qu'ils transmettent également ici la fonction flèche, qui sera exécutée une fois que nous aurons fait défiler la page vers le bas. Ensuite, nous devons créer des instructions IF dans lesquelles nous devons définir si nous faisons défiler la page vers le bas jusqu'à cette section Trois contenus ne correspondent pas à l'état de l'instruction if. Nous allons utiliser quelques propriétés différentes. En un coup d'œil. Cela peut sembler un peu difficile, mais je vais essayer de l'expliquer. La première propriété que je vais utiliser s' appelle page Y offset. Nous devons l'attacher à l'objet de la fenêtre. Cette propriété renvoie les pixels. Le document actuel a été parcouru depuis le bord supérieur de la fenêtre En d'autres termes, il s' agit de la longueur de la partie de la page Web qui a été parcourue vers Ensuite, nous devons utiliser une autre propriété, appelée hauteur intérieure. Cette propriété renvoie la hauteur de la fenêtre d'affichage de la fenêtre. Et nous devons ajouter cette propriété au décalage de page. Cette expression nous donnera donc la distance totale par rapport au bord supérieur de la page Web. Je veux dire, la partie qui a été défilée haut plus la hauteur de la fenêtre d'affichage Nous devons comparer cette distance à la position du contenu de cette section 3 afin de déterminer si nous faisons défiler la page vers le bas jusqu'à la partie requise de la page Web ou non. Nous avons donc besoin ici d'un signe supérieur ou égal. Et maintenant, nous devons utiliser une autre propriété qui s'appelle offset top. Mais dans ce cas, nous avons besoin ici de décaler le contenu en haut de la section trois. Cette propriété nous donne donc la position des éléments en pixels. Je veux dire, il mesure la distance depuis le bord supérieur de la page Web. Donc, si cette condition est vraie, cela signifie que nous faisons défiler vers le bas jusqu'au contenu de cette section 3. Mais en fait, cela ne suffit pas , car je veux créer des effets lorsque nous faisons défiler la page vers le bas et atteignons la moitié du contenu de la section 3. Et pour définir ce point, je vais utiliser une autre propriété appelée hauteur de décalage. Elle nous donne la hauteur de l'élément en pixels. Et nous devons le diviser par deux D'accord, donc si cette condition est vraie, cela signifie que nous devons afficher les effets. Avant cela, je vais tester si cela fonctionne bien. Je vais donc parcourir la console, griffonnée. Inspectons la page et passons à l'onglet console. Ainsi, une fois que nous aurons fait défiler la page vers le bas et que nous aurons atteint la moitié de cette section pour le contenu, nous serons griffonnés dans la console Très bien, tout fonctionne bien. Nous devons maintenant ajouter une nouvelle classe au contenu de la section 3. Utilisons ici l'une des propriétés appelées liste de classes. Comme vous le savez, il nous donne toutes les classes de l'élément. Cela nous permet également d' accéder aux différentes méthodes telles que l'ajout, la suppression, l'activation dont nous avons besoin ici sur Et je vais spécifier ici le changement de nom de classe. Très bien, c'est tout à propos du JavaScript. Revenons au CSS. Nous devons donc faire deux choses. Tout d'abord, je vais masquer l'enveloppe de chargement. Attribuons-lui donc une opacité nulle. Ensuite, nous devons fermer le MacBook. Pour cela, je vais faire pivoter la première image, qui est l'écran. Sélectionnons donc la première image puis utilisons Transformer, Rotation. Nous devons le faire pivoter en fonction de l'axe X. Comme valeur, je vais insérer vos -80 degrés. Comme vous pouvez le voir, l'image est pivotée, mais bien sûr, ce n'est pas ce que nous voulons Comme vous le savez, par défaut, l'élément est transformé à partir de son centre. Mais dans notre cas, nous devons le transformer par le bas. Allons-y donc et changeons l'origine de la transformation. Faites-le Watson. OK, maintenant le MacBook est partiellement fermé et nous devons l'ouvrir une fois que nous avons fait défiler la page vers le bas. Et c'est à ce moment que nous devons utiliser le changement de classe. Sélectionnons MacBook IMG One. Ensuite, nous devons transformer, faire pivoter x et le mettre à zéro. En plus de cela, passons à la transformation et à la durée de 3 s. Donc, si je fais défiler la page vers le bas et que j' atteins le contenu de la section 3, le MacBook s'ouvre. OK, donc c'est tout pour le premier effet. Nous devons maintenant afficher le logo et la barre de progression. Utilisons à nouveau le changement de classe, suivi du chargement du rappeur. l'heure actuelle, son opacité est nulle et nous devons la régler à un Ensuite, nous devons utiliser la transition avec les valeurs opacité plutôt que la durée de 1 s. Et en plus de cela, nous devons entendre un petit délai car au début, le MacBook doit s'ouvrir et nous devons attendre Ajoutons donc ici 2 s. D'accord, donc une fois que nous faisons défiler la page vers le bas, le MacBook s'ouvre. Ensuite, le logo et la barre de progression s'afficheront. Pour le moment, la barre de progression ne fonctionne pas. La moitié de sa largeur est un champ. Alors allons-y et occupons-nous de cela. Je vais réduire sa largeur à zéro. Utilisez ensuite à nouveau le changement de classe, suivi des pseudo-éléments après. Ainsi, une fois que la barre de progression apparaît, nous devons augmenter la largeur du pseudo-élément after. Réglons-le sur 100 % , puis utilisons la transition. Nous devons faire face à cette durée d'une seconde. Et encore une fois, nous avons besoin d'un certain délai. Mettons-le à 3 s. Donc maintenant, si je fais défiler la page vers le bas, vous verrez que tout fonctionne parfaitement. Très bien. Ensuite, nous devons masquer le logo et la barre de progression et afficher les informations du MacBook. Utilisons donc à nouveau le changement. Alors. Sélectionnez le chargement et réglez l'opacité sur zéro. Utilisez à nouveau la transition de 1 s, puis le délai de 5 s. OK, donc une fois que nous avons fait défiler la page vers le bas, le logo et la barre de progression se masqueront. L' image d'arrière-plan s'affichera. Après cela, nous devons afficher les informations du MacBook. Utilisons donc à nouveau le changement. Avec des informations sur le MacBook. Nous devons régler l'opacité sur un. Et encore une fois, nous devons utiliser l' opacité de transition de 1 s et le temps de retard de 6 s. D'accord ? Il peut donc voir que tout fonctionne parfaitement et nous avons presque terminé cette section. La seule chose que je vais faire est de modifier la forme de l'arrière-plan de cette section à l'aide de la propriété clip path. En fait, j'ai déjà préparé les valeurs Je vais donc les copier à partir de ce fichier texte et les joindre à cette conférence. Vous pouvez donc le télécharger et copier les valeurs correctement manuellement. Très bien, nous en avons enfin terminé avec cette section. J'espère que c'était intéressant car nous avons créé quelques effets sympas et sympas. Allons-y et occupons-nous de la section suivante. 41. Projet 4 - Créer et styliser la section montres: Très bien, j'ai fini travailler sur la section MacBooks, et maintenant il est temps de passer à la section suivante, qui sera la section Apple Watch Jetons un coup d'œil au projet terminé. Nous avons donc ici les montres Apple. Je veux dire que le client peut essayer différents boîtiers et bandes à l'aide de ces commandes afin de choisir la combinaison préférée créera ces effets à l'aide de CSS et de JavaScript. Tout d'abord, nous devons commencer par le balisage HTML. Allons-y donc et insérons vos nouveaux commentaires pour la section quatre. Cet élément de section ouverte avec une section de classe quatre. Ensuite, nous devons créer une étiquette div, qui servira d' emballage aux Je joue dans les bagues et les étuis. Mais avant cela, insérons de nouveaux commentaires. Section pour les montres et section extérieure pour les montres. Et puis ouvrez le div tag avec une classe de montres. Cet élément comprendra deux parties différentes, je veux dire les bracelets et les étuis. Insérons de nouveaux commentaires pour les bracelets de montre. Ouvrez ensuite la balise div, qui encapsulera les images des groupes Je vais donc lui attribuer un pantalon de montre de classe. Ouvrez ensuite la balise d'image et sélectionnez l'image. Nous avons besoin d'images de dossiers. Ensuite, un autre dossier s'affiche. Et nous devons sélectionner un bracelet de montre JPG. En outre, je vais attribuer à l'attribut de classe d'élément image un bracelet de valeur, IMG. Au total, nous aurons donc neuf images différentes. Je vais dupliquer cette ligne de code huit fois , puis changer rapidement les noms des images. Nous avons besoin de chiffres de deux à neuf. OK, c'est tout pour le groupe. Ensuite, nous devons surveiller les boîtiers. Nous allons donc insérer vos nouveaux commentaires. Des boîtiers de montres alors et de boîtiers de montres. Ensuite, je vais récupérer tout ce code à partir d'ici, coller, et d'abord changeons de classe. Je veux dire, quand il faut transformer des bandes en étuis, nous avons besoin de boîtiers au lieu de les interdire partout. Et aussi, je vais modifier l'extension. Nous avons besoin de PNG au lieu de JPG. Très bien, voyons ce qu'il en est des groupes et des étuis. Ensuite, je vais créer les commandes. Nous aurons quatre commandes différentes. Nous allons donc insérer vos nouveaux commentaires. Contrôles de la montre plus que n des commandes de la montre. Ensuite, je vais ouvrir la balise de lien avec le contrôle de la classe. En fait, ce sera le nom de classe courant. Mais en plus de cela, nous avons besoin d' surveillance de classe individuelle, d'un contrôle de haut niveau. Et puis à l'intérieur de l'élément de lien, je vais passer l'icône Font Awesome avec la classe FAS , FAA, angle Dans l'ensemble, nous aurons donc quatre commandes différentes. Je vais dupliquer l'élément de lien trois fois, puis nous devons changer les classes. La seconde va donc être la montre, le bon contrôle. Quant à l'icône Font Awesome, elle sera inclinée vers la droite. Ensuite, nous avons besoin de la commande inférieure de la montre, inclinée vers le bas. Et enfin, regardez Left Control. Quant à l'icône, elle sera inclinée vers la gauche. OK, enfin, nous devons créer le fond. Insérons à nouveau de nouveaux communs, regardons Batson et sortons le bouton de la montre. Ensuite, créez des éléments de bouton avec la montre de classe, btn et avec le contenu actuel Très bien, c'est tout à propos du balisage HTML. Passons à autre chose et commençons à personnaliser cette section. Dans un premier temps, nous allons le styliser, puis nous allons le faire fonctionner en utilisant JavaScript. Allons-y donc et insérons votre nouvelle section de commentaires à la fin de la quatrième section. Sélectionnez ensuite les éléments de section et définissez la hauteur de cette section. Je vais le faire passer à 140 % de la fenêtre d'affichage. En outre, je vais créer de l'espace en haut et en bas de cette section à l'aide d'un rembourrage Réglons la hauteur de la fenêtre d'affichage à 20 en haut et en bas, puis à zéro sur les côtés gauche et droit Avant de poursuivre, je vais réduire la taille des images Je veux dire à la fois des bracelets et des étuis. Insérons donc une nouvelle section de commentaires pour les montres plutôt que pour les montres de fin de section quatre. En plus de cela, je vais insérer ici un autre commentaire pour les pantalons de montre. Sélectionnez ensuite le bracelet de montre IMG. Je vais définir la largeur et la hauteur. Réglons les deux à 35 RAM. Et je vais aussi utiliser object fit contain. Ensuite, il en va de même pour les boîtiers de montres. Je vais donc dupliquer ce code ici, puis transformer les bandes en cases. Et aussi, au lieu d'un bracelet de montre, IMG, utilisons simplement un boîtier IMG. Très bien, comme vous pouvez le voir, les images sont devenues plus petites et nous devons maintenant nous occuper de leur alignement Je vais utiliser Flexbox. Nous devons donc ajouter un centre de classe aux éléments de la section, y compris aux montres, puis aux virages et aux boîtiers Ensuite, nous devons modifier la direction de flexion des éléments de section ainsi que des boîtiers. Sélectionnons les boîtiers de montre et définissons la direction de flexion par rapport à la colonne. Donc, pour l'instant, les coudes sont placés horizontalement. Quant aux boîtiers, ils sont placés verticalement, mais la disposition est tout de même confuse. Nous devons maintenant manipuler les positions. Je vais attribuer deux éléments de division, la position absolue, je veux dire, enveloppes des bandes et les Et je vais utiliser l'un de ces combinateurs CSS appelé Child selector, qui sélectionne les éléments enfants directs, en l'occurrence les éléments directs div Réglons la position sur absolue. Ensuite, nous avons besoin de la position relative des éléments parents dans lesquels je me trouve dans les montres. Sélectionnons-le et définissons la position sur relative. Et en plus de cela, je vais définir la largeur et la hauteur. Réglons les deux à 100 %. OK, maintenant les images sont bien alignées et il ne nous reste plus qu'à en masquer certaines car comme vous le voyez, nous avons ici une barre de défilement et certains étuis sont également placés dans la section MacBooks Donc, pour résoudre ce problème, nous devons utiliser overflow hidden Très bien, attardons-nous sur les montres maintenant. Je vais m' occuper des commandes. Insérons vos nouveaux commentaires pour les commandes de la montre. Tout d'abord, je vais m' occuper de leurs positions. Comme vous le savez, ils sont des enfants directs de l'élément section. Je vais donc les positionner en fonction de cette section. Sélectionnons la commande de la montre et attribuons-lui la position absolue. Ensuite, nous avons besoin de la position relative pour cet élément de section. Je vais maintenant définir les positions de chaque contrôle séparément. Allons-y et commençons par le premier. Définissons d'abord les positions supérieure et gauche. Je vais définir la hauteur de la fenêtre d'affichage supérieure à 222 comme étant probablement la position gauche Je vais le porter à 50 %. Et en plus de cela, nous devons envoyer la commande verticalement. Et pour cela, nous devons le déplacer. Je veux dire, vous devez utiliser ici fonction translate x avec la valeur -50% Nous avons donc ici le meilleur contrôle. le moment, il est vraiment petit et difficile à voir, alors je vais le styliser. Définissons sa largeur et sa hauteur. Je vais les configurer tous les deux pour la RAM. Changez ensuite la couleur d'arrière-plan. Utilisons votre valeur RGBA. Insérons ici 22013 fois, puis l'opacité 0,4, puis arrondissons-les à l'aide du Mettons-le à cinq rem. Ensuite, je vais placer l'icône au centre. Et pour cela, utilisons le centre de classe. Je vais l'attribuer à tous les éléments. Ensuite, personnalisons l'icône elle-même. Nous allons donc sélectionner les éléments. Tout d'abord, je vais augmenter la taille de sa police. Faisons-en trois RAM, puis changeons la couleur. Faisons en sorte que ce soit le principal. OK, donc le contrôle est stylé. Je vais passer à autre chose et positionner la deuxième commande. Je veux dire le bon contrôle. Définissez la position supérieure comme 50 %. Ensuite, je vais définir la bonne position pour courir De plus, nous devons envoyer la commande verticalement. Nous avons donc besoin ici de Transform, Translate, Y -50%. OK, vient ensuite la commande inférieure. Sélectionnons-le. Je vais définir la position gauche. Portons-le à 50 %. Ensuite, nous avons besoin du bas. Je vais le régler à une hauteur de 20 fenêtres d'affichage. Et encore une fois, nous devons transformer avec la fonction Translate. Dans ce cas, nous avons besoin de la direction X avec une valeur de -50 %. Très bien, considérons que la commande inférieure est positionnée En fait. Nous avons ici le bouton qui s'est retrouvé derrière la commande. Et nous nous en occuperons un peu plus tard. Avant cela, positionnons le dernier contrôle, qui est celui de gauche. Sélectionnons-le et définissons les propriétés en haut et à gauche. Je vais fixer la première position à 50 %. Pour ce qui est de la propriété de gauche, je vais me rendre à Ram. Et en plus de cela, nous devons à nouveau transformer avec la fonction Translate, dans ce cas avec l'axe y et avec la même valeur -50 pour cent. OK, voyons les commandes. Allons-y et prenons soin du bouton. Insérons de nouveaux commentaires pour le bouton de la montre. Sélectionnez ensuite le bouton et définissez la position. Je vais le régler sur Absolu. Et en plus de cela, nous devons définir les positions inférieure et droite. Je vais définir la propriété inférieure à 30 pour la hauteur de la fenêtre d'affichage. Pour ce qui est de la bonne position, mettons-la à 25 %. Le bouton est donc bien positionné, et maintenant je vais lui donner une belle apparence. Tout d'abord, définissons en hauteur, je vais définir la largeur à 13 RAM. Quant à la hauteur, faisons-en cinq RAM. Changez ensuite la couleur d'arrière-plan. Je vais le mettre en noir. Et en plus de cela, nous devons changer la couleur du texte. Faisons en sorte que ce soit le principal. OK, après cela, je vais modifier la bordure par défaut. Utilisons ici une bordure avec des valeurs de 0,1 pièce. Je vais le faire en pointillés et aussi changer la couleur, le rendre blanc Ensuite, arrondissons le bouton à l'aide de border-radius avec une valeur pour Ran OK, donc le bouton a l'air bien. Ajoutons-y quelques cellules supplémentaires. Je vais m' occuper du texte. Changeons sa taille de police, faisons-en 1,6 RAM. De plus, je vais alléger la police. Allons-y, nous n'attendrons pas 200. Enfin, changez le type du plus grossier, indiquez-le Très bien, alors c'est ça. Toute la section est personnalisée et maintenant comment la faire fonctionner ? 42. Projet 4 - Faire fonctionner la section montres: Très bien, une fois que nous avons personnalisé la section montre, nous devons maintenant la faire fonctionner Nous avons ici quatre commandes différentes. Et une fois que nous aurons cliqué dessus, l'image se déplacera et vous pourrez choisir votre étui et votre bracelet préférés. Nous allons donc créer ces choses à l'aide de JavaScript. Passons au fichier script.js et insérons une nouvelle section de commentaires à la fin de la section . Tout d'abord, je vais sélectionner tous les éléments nécessaires. Je porte des bracelets, des étuis et tout pour des commandes différentes. Créons une nouvelle variable. Je vais appeler ça des bracelets de montre. Sélectionnez ensuite l'élément à l'aide de la méthode QuerySelector. Nous devons spécifier ici les bracelets de classe. Dupliquons cette ligne de code et transformons les bandes en majuscules. Ensuite, je vais sélectionner les commandes. Commençons par le contrôle supérieur. Créez une nouvelle variable et appelez-la watch top control. Sélectionnons-le en utilisant à nouveau la méthode de sélection de requête. Je vais spécifier ici le nom de la classe, le contrôle de l'onglet de surveillance. Allons-y, dupliquons cette ligne de code trois fois et changeons les noms et les noms de classe dont nous avons besoin ici, n'est-ce pas ? Ensuite, le suivant sera en bas. Enfin, il nous faut partir. Ainsi, tous les éléments sont préparés Comme vous le savez, les contrôles sont créés à l'aide des éléments de lien. Et une fois que nous aurons cliqué dessus, nous naviguerons vers le haut de la page par défaut. Et en fait, nous avons également le même problème avec les commandes du cube. Si nous cliquons dessus, nous naviguerons vers le haut de la page. Sélectionnons tous ces contrôles. Je vais écrire ce code en haut. Insérons vos nouveaux commentaires, commonJS plutôt que n de common JS Ensuite, je vais sélectionner tous les contrôles en utilisant la méthode QuerySelector Tout d'abord, précisons ici le nom de la classe. Regardez le contrôle, alors nous avons besoin des contrôles du cube pour séparer ces classes par une virgule. Et enfin l'entier a. Pour résoudre ce problème, nous devons parcourir la liste des nœuds renvoyée par la méthode all du sélecteur de requêtes Il s'agit d'un objet semblable à un tableau. Ensuite, nous devons associer un événement de clic aux contrôles et utiliser l'une des méthodes appelées prevent default. Donc, pour parcourir la liste, je vais utiliser l'une des méthodes d'aide au tableau appelées pour chacune Elle prend un argument, qui est la fonction de rappel. Cette fonction de rappel elle-même aura un argument. Ce sera le contrôle actuel de la liste. Ensuite, nous devons nous connecter à l'écouteur d'événements de contrôle avec des événements de clic Nous avons également besoin ici de la fonction de rappel. Je vais transmettre ici un objet événementiel. Ensuite, nous devons nous attacher à la méthode de l'objet de l'événement appelée prevent default. Maintenant, si je clique sur les commandes, elles ne feront rien et nous ne naviguerons pas vers le haut de la page. D'accord ? Ainsi, une fois que nous avons cliqué sur les commandes, nous devons déplacer les éléments de l' enveloppe Je veux dire des bracelets et des boîtiers de montre. Et nous allons le faire en utilisant la marge. Donc la largeur et la hauteur de chaque image sont égales à 35 rem. Et pour déplacer une image et l'adapter à la bande, nous devons déplacer l' élément entier de sept pour l'adapter à une rampe. Donc, pour contrôler la distance, je veux dire le mouvement des éléments, je vais créer deux variables différentes. Un pour le sens vertical, je veux dire pour les boîtiers, et le second pour le sens horizontal pour les bandes. Appelons donc la variable x c'est pourquoi elle correspond à la direction verticale. Je vais le mettre à zéro. Et puis nous avons également besoin de x is x avec une valeur de zéro. Ces valeurs augmenteront ou diminueront donc de sept pour cent selon la direction. Je vais commencer par la commande supérieure. Une fois que nous avons cliqué dessus, nous devons déplacer les boîtiers de montre vers le haut. Allons-y donc et attachons-nous à l'écouteur d'événements de contrôle Nous devons passer ici l' événement de clic et la fonction flèche. Nous devons maintenant déplacer les éléments en utilisant la marge supérieure. Cela signifie que nous devons réduire la valeur de la marge supérieure de sept par rapport à la RAM. Et nous devons le faire à chaque clic. Nous avons donc besoin que le boîtier de la montre soit suivi de l'attribut style. Ensuite, nous devons utiliser la marge supérieure comme valeur. Je vais soustraire sept à la RAM à la valeur actuelle de l'axe Y. Nous avons donc besoin ici de x est y égal à x est y -70. Courez. Ou nous pouvons simplement écrire cette expression ainsi. X est y moins 70. Courez, non ? Si je clique sur le contrôle supérieur, les cases changeront. Mais pour l'instant, sans aucun petit défaut. Donc, pour résoudre ce problème, je vais utiliser la transition. Nous avons besoin de 1 % de marge maximale . Nous avons donc maintenant un bien meilleur effet. OK, donc nous avons besoin de la même chose pour le reste des commandes. Dupliquons ce code. La commande suivante sera celle du bas. Et aussi, au lieu de moins égal, nous avons besoin ici de plus égaux. Ensuite, nous aurons le bon contrôle. Dupliquons donc ce code. Dans ce cas, nous devons déplacer le pantalon de la montre. Transformons donc les boîtiers en bracelets de montre. Alors, au lieu de la marge en haut, nous avons besoin de la marge, non ? Dans le cas des bandes également, nous devons changer la direction dont nous avons besoin ici, l'axe x. Dupliquons ce code. Changez de droite à gauche. Et nous avons également besoin ici du signe moins. D'accord ? À l'instar des boîtiers de montres, nous devons également effectuer une transition pour les bracelets de montre. Nous allons donc sélectionner les bracelets affectés à la transition. La marge des valeurs, non ? 1 s. Maintenant, si nous les testons tous, les contrôles fonctionneront correctement. Comme vous pouvez le voir, des bandes au cas où certaines bougeraient bien. Mais une fois que nous aurons atteint la dernière image, je veux dire que dans les deux sens l'élément continuera à se déplacer à l'infini Nous n'en avons donc pas besoin. Une fois que nous avons atteint la dernière image, nous avons dû masquer le contrôle. Pour cela, je vais créer une nouvelle fonction. Appelons cela le contrôle de la hauteur. Nous devons donc vérifier si nous atteignons la dernière image ou non. Cela va se produire. Veut que la valeur de l'axe y ou de l' axe x passe à 280 RAM selon la direction. Je veux dire, parfois nous aurons besoin 280 RAM ou parfois c'est -280 RAM Pour prouver que nous avons besoin de cette quantité, je vais lancer l' axe Y vers la console Ainsi, à chaque clic, la valeur diminuera de 70 RAM. Et une fois que nous aurons atteint la dernière image, la valeur sera égale à -280 rampes. Nous devons donc masquer le contrôle qui veut que la valeur de l'axe Y soit égale à -280 RAM Créons une instruction if dans laquelle nous devons vérifier si x est y est égal à -280 RAM Afin de masquer le contrôle, je vais créer une nouvelle classe et du CSS, lesquels nous allons définir des styles CSS pour masquer les éléments. Je vais appeler cette classe hide control, puis lui attribuer l'opacité zéro et la visibilité cachée Donc, si cette condition est vraie, nous devons ajouter cette classe nouvellement créée au contrôle. Nous avons donc besoin de la commande watch top, suivie de la propriété class list. Ensuite, nous devons utiliser l'une des méthodes appelées Ajouter. Et nous devons spécifier le nom de la classe entre parenthèses Et si la condition est fausse, nous devons réafficher le contrôle. Nous devons donc supprimer le contrôle élevé de classe. Utilisons les déclarations L. Ensuite, je vais copier cette ligne de code. Nous devons modifier, ajouter ou supprimer. Hein ? Enfin, appelons cette fonction onclick Donc, si nous cliquons sur le contrôle supérieur puis que nous atteignons la dernière image, elle se masquera. Nous avons besoin de la même chose pour le reste des contrôles. Allons-y et dupliquons les déclarations if. Supprime ensuite le signe moins et change également le haut en bas. Ensuite, nous aurons le bon contrôle. Dans ce cas, nous avons besoin de l'axe X. Et nous devons également modifier le contrôle. Nous en avons besoin ici, non ? Vient ensuite le contrôle gauche. Ajoutons ici le signe moins. Et aussi, au lieu d' un contrôle droit, c'est l'entité ici, le contrôle gauche. La seule chose que nous devons faire est donc d'appeler cette fonction ci-dessous pour chaque contrôle. Maintenant, si je teste et clique sur tous les contrôles, vous verrez que tout fonctionne correctement. C'est bon, c'est ça. Nous avons terminé de travailler sur cette section. Passons à autre chose et occupons-nous de la suivante. 43. Projet 4 - Créer et styliser la section AirPods: Très bien, nous avons terminé de travailler sur la section consacrée à la surveillance et nous devons maintenant passer à autre chose et prendre un an pour que la section suivante, qui portera sur les aéroports, soit une section assez simple mais agréable Nous aurons ici le titre avec deux images différentes et également avec deux boutons différents. Allons-y et, comme d'habitude, commençons par le balisage HTML Insérons de nouveaux commentaires. Section cinq de la section cinq. Ouvrez ensuite les éléments de section avec la classe. Section 5. Ensuite, je vais insérer un gars dans Nouveaux commentaires pour le contenu de cette section cinq. Ouvrez ensuite le tag div avec une classe d'aéroports. Cet élément inclura l'intégralité du contenu de cette section. Nous aurons donc ici un titre, des images et des boutons. Créons de nouveaux commentaires pour le titre. Nous avons besoin du titre de la section 5 du titre de la section 5. Ensuite, ouvrez la balise de titre H1 avec un titre de section 5 de classe avec le contenu, aéroports D'accord, après cela, nous aurons les images. Créons donc de nouveaux commentaires pour la section 5. Des images. Ouvrez ensuite la balise image et sélectionnez Images du dossier d'images. Ensuite, un autre dossier, aéroports, puis sélectionnez aéroports, un PNG. Dupliquons cette ligne de code et changeons le nom de l'image dont nous avons besoin ici, les aéroports en PNG. Très bien, enfin, je vais créer les boutons. Créons de nouveaux commentaires. Boutons de la section 5. Puis fin des boutons de la section 5. Je vais ouvrir la balise div, qui va être l' enveloppe des boutons Attribuons au nom de classe les aéroports Watson's. Et puis ouvrez la balise du bouton avec la classe Airports btn. Et grâce au contenu, apprenez-en plus. Dupliquons le bouton et modifions le contenu. Je vais l'insérer ici par. D'accord, le balisage HTML est donc préparé, tous les éléments sont créés et je vais maintenant personnaliser cette section en utilisant CSS Allons-y et insérons de nouveaux commentaires pour la section 5. Sélectionnez ensuite l'élément de section et définissez sa largeur et sa hauteur. Je vais régler à 200 %. Quant à la hauteur, faisons en sorte qu'elle corresponde à 100 % de la fenêtre d'affichage. OK, ensuite je vais m' occuper des éléments div du wrapper Je veux dire l'emballage du contenu. Instituons vos nouveaux commentaires. Contenu de la section 5 du contenu de la section 5. Ensuite, sélectionnez les éléments div avec la classe airports. Tout d'abord, je vais définir la largeur et la hauteur. Mettons-en avec deux 90 %. Pour ce qui est de la hauteur, je vais la porter à 80 %. Ensuite, je vais aligner les éléments horizontalement dans une rangée. Pour cela, réglons l' affichage sur Flex. Droite. Ensuite, je vais m' occuper de l'alignement des éléments. Commençons par le titre. Je vais le placer horizontalement au centre. Insérons de nouveaux commentaires pour le titre. Nous avons besoin de la section 5, titre. Du titre de la section 5. Sélectionnez ensuite les éléments de titre et définissez leur position sur absolue. OK, pour nous positionner en fonction de ses éléments parents, nous avons tout ce que nous devons souvent attribuer à la position relative de l' élément parent. Ensuite, définissons les positions supérieure et gauche. Je vais mettre le top à zéro. Pour ce qui est de la gauche, faisons-la à 50 %. Ensuite, afin de centrer parfaitement les éléments, nous devons les déplacer vers la gauche. Nous devons donc transformer, puis traduire la fonction avec la direction x. Et nous devons passer ici -50 % OK, donc le titre est positionné ensuite Je vais m' occuper des Batson's, qui sont actuellement placés sur le côté droit de cette section Je vais les placer au centre. Créons donc de nouveaux commentaires pour les boutons de la section 5. Sélectionnez ensuite les éléments du wrapper div, qui contiennent les boutons des aéroports pour le nom de la classe Tout d'abord, je vais m' occuper de leurs positions. Réglons la position sur absolue. Ensuite, je vais placer les boutons parfaitement au centre pour cela, je vais régler les propriétés du haut et de la gauche, toutes deux à 50 %. Ensuite, nous devons transformer, traduire et spécifier les deux directions. Nous devons les fixer à -50 %. Très bien, les éléments sont donc alignés et nous pouvons maintenant les styliser. Revenons aux éléments du titre. Je vais augmenter la taille de sa police. Réglons-le sur 15 rampes. Ensuite, éclaircissez la police. Je vais régler la taille de la police sur 300. Changez ensuite la couleur. Utilisons ici la couleur blanche. Enfin, je vais créer un effet d'ombre. Utilisons une ombre de texte avec les valeurs 0,1, 0,1, une mémoire vive différente de zéro et le froid ou 999 OK, donc ils ont du style. Passons à autre chose et prenons soin des images. Je vais créer de nouveaux commentaires, la section 5 ou des images de la section 5. Ensuite, sélectionnez les éléments de l'image. Je vais réduire leur taille. Mettons-nous à 250 %. Ensuite, atteignez la hauteur de 100 %. Et utilisez également des pieds d'objets, contenez-les. L'image est de plus en plus petite. Et maintenant, comme vous pouvez le constater, ils ne sont pas parfaitement placés au centre de cette section. Pour résoudre ce problème, je vais utiliser le centre de classe. Attribuons-le à l'élément de section. Très bien, nous avons maintenant un meilleur résultat. La seule chose que je souhaite faire concernant les images est de changer la couleur de fond de la deuxième image. Tout d'abord, je vais assigner un cours à manger. Appelons cela les aéroports img2. Ensuite, sélectionnez-le et modifiez la couleur d'arrière-plan. Dans ce cas, je vais utiliser la colonne principale. OK, c'est tout pour les images. Passons à autre chose et prenons soin des boutons. Je vais créer de l'espace en haut des boutons. Utilisons donc ici la marge supérieure avec une valeur de cinq rem. Sélectionnez ensuite le bouton lui-même. Tout d'abord, je vais m' occuper de la largeur et de la hauteur. Je vais régler la largeur à 15 RAM. Pour la hauteur. Faisons-le pour la RAM. Et changez également la couleur d'arrière-plan. Utilisez votre couleur principale. Ensuite, je vais créer un espace entre les boutons. Et je vais aussi me débarrasser de la bordure par défaut. Créons donc de l' espace en utilisant la marge. Je vais le mettre à zéro en haut et en bas et à deux rem sur les côtés gauche et droit. Et définissez également la bordure sur aucune. Très bien, allons-y et ajoutons quelques styles supplémentaires aux boutons Je vais les arrondir. Définissons un rayon de bordure de 2,5 rem. Modifiez également la couleur du contenu. Faites-le blanc. Et enfin, changez le type du plus grossier, faites-le pointer OK, donc pour l'instant, le premier bouton sur D semble bon. En ce qui concerne le second, nous devons changer sa couleur de fond, ainsi que la couleur du texte. Donc, pour sélectionner le second bouton, je vais utiliser l'une des pseudo-classes appelées enfant perdu Changez ensuite la couleur d' arrière-plan, mettez-la en blanc comme couleur du texte. Je vais en faire une priorité. Dans ce cas, la couleur d'arrière-plan commune et la couleur du texte seront remplacées OK, alors c'est ça. Tout semble bon. Et avec cette section, nous en avons terminé. Passons à autre chose et occupons-nous de la suivante. 44. Projet 4 - Créer et personnaliser le pied de page: Il est donc temps de créer la dernière partie de nos projets, qui sera le pied de page Il s'agira d'un filtre simple comportant cinq icônes différentes correspondant aux cinq sections différentes. Et ils nous permettront de naviguer vers les sections appropriées. En outre, il y aura un paragraphe avec du texte de copyright. OK, alors allons-y et commençons à créer le balisage HTML Je vais insérer de nouveaux commentaires pour la section 6. Ouvrez ensuite la balise de section avec un nom de classe, section six. Ainsi, à l'intérieur de cet élément de section, nous aurons deux parties différentes. Le premier sera le développement, qui va encapsuler toutes les icônes. Attribuons à chaque section de classe six icônes. Dans l'ensemble, nous aurons donc cinq icônes différentes et elles seront représentées à l'aide d'éléments de lien. Je vais donc ouvrir une balise de lien avec la classe. Je peux créer un lien. L'icône elle-même sera une image. Arrêtons donc ici la balise d'image, puis sélectionnons l'image appropriée. Nous avons besoin d'un dossier d'images, puis d'icônes, et nous devons sélectionner l'icône Accueil point PNG. Très bien, donc comme nous l'avons dit, dans l'ensemble, nous aurons cinq icônes différentes Dupliquons les éléments du lien quatre fois et changeons le nom des images. Le second sera l'iPhone. Ensuite, nous aurons un MacBook plutôt qu'une montre. Et la dernière image sera celle des AirPods. OK, Enfin, allons-y et créons le paragraphe. Il aura un droit d'auteur de classe. Ensuite, je vais insérer pour utiliser un copyright de texte plutôt qu'une entité HTML5 non sécurisée Le signe du copyright d'Emily, nous avons besoin d'une copie en esperluette. Le point-virgule va être suivi d'un code et créé. Tous droits réservés. Très bien, c'est tout à propos du balisage HTML. Allons-y et personnalisons cette section. Je vais insérer vos nouveaux commentaires, section 6. De la section 6. Sélectionnez ensuite les éléments de la section et définissez sa largeur et sa hauteur. Je vais régler la largeur à 200 %. Quant à la hauteur, faisons en sorte qu'elle représente 40 % de la fenêtre d'affichage. Bon, passons à autre chose et stylisons les éléments. En fait, nous n'aurons pas beaucoup de styles dans cette section. Diminons la taille des images. Sélectionnez-les et configurez-les avec deux tonnes de RAM. Ensuite, je vais augmenter l'espace entre les icônes. Je peux lier et utiliser une marge avec les valeurs 0,5 rem. D'accord ? Donc, pour le moment, les éléments sont placés sur le côté gauche de cette action et nous devons les placer au centre. Allons-y donc et attribuons le centre de classe aux éléments de la section. Très bien, je vais maintenant personnaliser le paragraphe. Tout d'abord, prenons soin de sa position. Sélectionnons-le et définissons sa position sur absolue. Ensuite, nous devons définir la position de cet élément de section car il s'agit du parent. Réglons donc la position sur relative. Ensuite, définissons la position inférieure du paragraphe. Mettons-le sur cinq rampes. OK, le paragraphe est donc positionné. Et enfin, allons-y et stylisons-le. Je vais augmenter la taille de la police. Faisons-en 1,5 RAM, puis créons un espace entre les lettres. Réglons l' espacement des lettres à 0,1 rampe. Très bien, donc tous les éléments sont stylés. Et maintenant, comme je l'ai dit, je vais faire en sorte que ces icônes fonctionnent. Une fois que nous avons cliqué dessus, nous devons accéder à la section appropriée. Pour cela, nous devons ajouter à chaque élément de section un identifiant , puis connecter attributs de référence h des éléments de lien à ces identifiants. Attribuons donc aux atriums pour nous des attributs, des noms de section appropriés Nous devons transmettre les noms de vos sections de la section 1 à la section 5. Ensuite, attribuez à chaque section les éléments id, attribut avec les mêmes valeurs. Commençons par la première section. Ensuite, je vais récupérer ce code et le coller pour chaque élément de section et également modifier les noms des sections. Nous devons passer à la section 5. OK, alors maintenant si je clique sur l'icône en forme de cuillère, accédez à la section appropriée. Mais ce n'est pas ce que nous voulons. Nous voulons naviguer de manière fluide. Pour ce faire, nous devons utiliser l'une de ces propriétés CSS appelée comportement de défilement avec la valeur smooth. Et en fait, nous devons l'attribuer à l'élément HTML. Bon, comme tu peux le voir, tout fonctionne bien. Une fois que nous avons cliqué sur le I, nous accédons aux sections pertinentes avec un petit défaut. En fait, avant de poursuivre, je vais faire de même pour les éléments de navigation. Nous avons ici quatre liens différents et nous devons spécifier les sections appropriées, commençant par la section deux jusqu'à la section cinq. Passons donc ici les noms des sections. Ainsi, une fois que nous aurons cliqué sur les éléments de navigation, nous accéderons aux sections pertinentes. OK, donc nous avons presque terminé. Mais je vais faire encore quelques choses ici. Comme vous pouvez le constater, l'icône Apple apparaît dans la barre de titre du projet terminé . Ajoutons-le donc également à notre projet de travail. Nous devons ouvrir la balise de lien dans l'élément principal. Ensuite, nous devons transmettre votre icône de raccourci. Ensuite, nous devons spécifier le chemin du fichier. Ce sera l'icône d'accueil, qui sera placée dans le dossier de l'icône. OK, nous avons maintenant le logo dans la barre de titre. La dernière chose que je vais faire est d' empêcher les actions par défaut de ces deux éléments de lien dans la section iPhones Parce qu'une fois que nous avons cliqué dessus, nous naviguons vers le haut de la page. Pour ce faire, il suffit d'ajouter leurs noms de classe ici dans le sélecteur de requêtes Toutes les méthodes doivent transmettre votre iPhone btn. Très bien, maintenant le problème est résolu et l' ensemble du projet est créé La seule chose que nous devons faire est de le rendre réactif aux différentes tailles d'écran. 45. Projet 4 - Rendre le projet réactif: Très bien, une fois que nous avons fini de créer notre projet, il est maintenant temps de passer à autre chose et de le rendre réactif aux différentes tailles d'écran Comme vous le savez, le projet repose sur un écran de très grande taille. Nous utilisons l'approche du bureau d' abord, et nous devons maintenant l'adapter aux différents points de rupture Inspectons la page et passons en mode réactif. l'heure actuelle, la largeur et la hauteur sont définies pour une taille d'écran très grande. J'ai déjà préparé les points de rupture dans lesquels je vais apporter quelques modifications Je ne vais donc pas perdre de temps à les trouver. En général, il n'existe pas de règles strictes concernant les points d'arrêt. Certains développeurs ont défini des points de rupture en fonction des appareils populaires. Mais il est préférable de définir les points de rupture sur chaque site Web individuellement afin de lui donner une belle apparence sur tous les appareils. OK, allons-y et définissons le premier point d'arrêt. Je pense que nous devons apporter quelques modifications une fois que la taille de l'écran est inférieure à 1 500 pixels. Allons-y et créons une requête multimédia CSS. Mais je vais d'abord insérer vos nouveaux commentaires, responsive et responsive. Créez ensuite une requête multimédia CSS et spécifiez la largeur maximale de 1 500 pixels. Au point d'arrêt, je vais réduire la taille de police des éléments HTML Cela diminuera la taille des éléments mesurés en RAM. Réglons donc cette taille de police à 45 %. Comme vous pouvez le constater, toutes les sections semblent bonnes. Et maintenant, nous devons trouver le prochain point d'arrêt, qui, je pense, sera de 1 100 pixels Allons-y et créons un nouveau média CSS avec une largeur maximale de 1 100 pixels Dans un premier temps, je vais réduire la taille de police de l'élément HTML et la porter à 40 %. Ensuite, je vais rendre ces éléments de navigation plus gras car ils ne sont pas tout à fait visibles Sélectionnons-le maintenant par lien et définissons l'épaisseur de la police à 700. D'accord, après cela, je vais réduire la taille du titre sur la bannière et nous devons également réduire la taille du paragraphe. Allons-y donc et commençons par le titre. Sélectionnons-le et réglons sa taille de police sur huit RAM. En ce qui concerne le paragraphe, je vais faire en sorte que sa taille de police soit triangulaire. Bon, c'est tout pour la première section. La seule chose que je vais faire au point d'arrêt est de déplacer le bouton de la section des montres vers la droite Nous allons donc sélectionner la montre btn et régler sa bonne position à 25 % Très bien, c'est tout pour ce point d'arrêt, toutes les autres sections semblent Passons à la suivante, qui sera de 900 pixels. Nous allons donc créer à nouveau une nouvelle requête multimédia CSS et spécifier la largeur maximale à 900 pixels. Donc, en ce qui concerne les points d'arrêt, je vais augmenter la taille du MacBook Nous devons donc sélectionner le contenu de la section 3. Et je vais régler la largeur à 90 %. Ensuite, nous devons augmenter la taille de l'enveloppe de chargement car, comme vous pouvez le constater, elle n'est pas très bien adaptée Sélectionnons donc l'enveloppe de chargement et définissons sa largeur à 70 %. Enfin, je vais réduire la taille du logo. Sélectionnez l'icône Font Awesome et définissons sa taille de police sur six rampes. OK, c'est tout pour cette section. La seule chose que je vais faire en ce qui concerne le point d'arrêt est de réduire la taille du titre dans la section aéroport Allons-y, sélectionnons le titre de la section 5 et définissons sa taille de police sur 12. Courez. OK, donc avec 900 pixels, c'est terminé. Passons à autre chose et trouvons le point d'arrêt suivant. Ça va faire 700 pixels. Nous allons donc créer un nouveau média CSS et spécifier la largeur maximale à 700 pixels. À ce point d'arrêt, je vais complètement masquer les commandes du cube Utilisons l'option Afficher aucun. Comme vous pouvez le voir, les commandes sont masquées et nous devons maintenant déplacer le cube légèrement vers le bas. Nous allons donc le sélectionner. Je vais le déplacer en utilisant la position supérieure. À l'heure actuelle, il est réglé sur moins deux r1. Et je vais en faire une rampe 3D. Suivant. Je vais réduire la taille du logo et aussi changer sa position. Je vais donc le déplacer dans le coin. Mettons donc la première position à zéro. Pour ce qui est de la gauche, je vais atteindre la rampe. En plus de cela, je vais sélectionner l'élément et définir sa taille de police à huit Ran. OK, c'est tout pour le logo. Ensuite, je vais modifier la disposition de la bannière et du cube. Je vais placer la file d'attente derrière la bannière. Pour cela, je vais définir la position de la bannière comme absolue. On considère donc que le cube s'est retrouvé derrière la bannière. À l'heure actuelle, le texte de la batterie n'est pas tout à fait lisible. Et pour résoudre ce problème, je vais réduire l' opacité de l'enveloppe du cube Allons-y, sélectionnons-le et réglons l'opacité sur 0,7. Nous avons donc maintenant un bien meilleur résultat. Ensuite, je vais cacher cette flèche ici. Comme vous vous en souvenez, il s' agit d'une entité HTML5, qui fait partie des éléments de titre Et pour le sélectionner, je vais utiliser l'un de ces pseudo-éléments appelé la première lettre. Commençons par sélectionner les éléments de titre H1, suivis de la première lettre Pour masquer l'élément, je vais utiliser la visibilité cachée et l'opacité nulle D'accord ? La flèche est donc masquée, mais l'élément de titre n' est plus placé au centre. Nous devons le déplacer légèrement vers la gauche. Pour cela, utilisons des positions. Nous allons sélectionner les éléments de titre H1. Et au début, je vais régler sa position relative, puis définir la propriété de gauche sur moins cinq rampes. Dans ce cas, nous allons déplacer l'élément de sa position actuelle. Ok, maintenant ça a l'air beaucoup mieux. Avant de passer à la section suivante, je vais m'occuper du bouton des bannières publicitaires. N'oubliez pas qu'une fois que vous passez la souris dessus, le bouton change de forme Nous n'en avons plus besoin car le cube est placé derrière la bannière. Ainsi, une fois que nous avons survolé le bouton et que nous devons conserver sa forme par défaut, sélectionnons le bouton avec le pointeur de la souris Ensuite, remontez et recherchez la propriété du chemin du clip avec ses valeurs. Je vais le copier puis le coller ici. OK, c'est tout à propos de la première section. Passons à la seconde. Je vais augmenter la taille des iPhones. Je veux dire l'élément wrapper div. Sélectionnons-le et définissons sa hauteur et sa largeur. Je vais régler la hauteur à 70 pour la hauteur de la fenêtre d'affichage. Quant à la largeur, elle sera de 70 dans la fenêtre d'affichage. OK, c'est tout pour cette section. Vient ensuite la section MacBook, qui semble bonne. En ce qui concerne la section montre, je vais déplacer le bouton vers la droite. Sélectionnons-le et définissons sa bonne position à 15 %. OK, donc la section des montres semble bonne. Passons à autre chose et occupons-nous des aéroports. Je vais masquer la première image sur. Très bien, maintenant la première image n'a aucun nom de classe. Allons-y et assignons-nous à classe avec une valeur aéroports, IMG one. Ensuite, sélectionnez-le et masquez-le en utilisant Afficher aucun. Pour ce qui est de la deuxième image, je vais augmenter sa largeur et la porter à 100 %. Nous allons donc sélectionner la deuxième image et régler sa largeur à 100 %. Comme vous pouvez le constater, ce code ne fonctionne pas car au départ, lorsque nous avons défini la largeur des images, nous aimions toujours qu'elles utilisent le nom de la classe des éléments parents, suivi du nom de la balise. Et en fait, elle a une priorité plus élevée. Nous devons donc ajouter ici la classe de l' élément parent, les AirPods Très bien, maintenant le problème est résolu et la largeur de l' image est passée à 100 % Ensuite, je vais changer la couleur d'arrière-plan du premier bouton et le rendre blanc. Sélectionnons le bouton. Changez sa couleur de fond, rendez-la blanche. Pour ce qui est de la couleur elle-même, je vais utiliser ici la couleur primaire. C'est donc considéré comme un arrière-plan et la couleur a changé. En plus de cela, je vais ajouter un petit effet d'ombre aux boutons. Utilisons donc box-shadow et instituons 0,1 RAM trois fois. Et comme couleur, je vais utiliser le D. OK, c'est tout pour la section de l' aéroport. La dernière chose que je vais faire sur le point d'arrêt est de m' occuper des icônes et du pied Nous devons réduire l' espace qui les sépare. Allons-y et sélectionnons Je peux lier et utiliser la marge. Je vais le mettre à zéro en haut et en bas et à deux RAM sur les côtés droit et gauche. C'est bon, c'est ça. À propos de ce point de rupture des sections. Ayez l'air bien. Passons à la suivante, qui sera de 550 pixels. Allons-y et créons une nouvelle requête multimédia CSS avec une largeur maximale de 550 pixels La première chose à faire est donc de réduire l'espace entre les éléments de navigation. Sélectionnez donc Number Link et définissons la marge sur zéro en haut et en bas et 1,5 RAM sur les côtés gauche et droit. La première section semble donc bonne. Passons à la suivante. Je vais réduire la taille de police du titre. Sélectionnons donc le titre de la section 2 et la taille satisfaisante à huit Ran. Bien, passons à la section suivante. Diminons également la taille de police de ce titre de section. Sélectionnons le titre de la section 3. Réglez sa taille de police sur huit. Courez. Ensuite, je vais réduire la taille de police du titre MacBook Info. Et je vais aussi réduire la taille du bouton. Allons-y, sélectionnons le titre MacBook Info et définissons sa taille de police sur fibrine Sélectionnez ensuite le bouton du MacBook et définissez sa largeur et sa hauteur. Je vais régler la largeur à 15 RAM. Quant à la hauteur, faisons-en trois RAM. Et réduisez également la taille de la police. Faites-en une rampe de 1,3. OK, c'est tout à propos de la section MacBook. Passons à la section suivante. Ça a l'air bien. Nous devons donc passer à la section de l'aéroport. Comme vous pouvez le constater, les boutons sont placés les uns sur les autres. Nous devons les séparer. Sélectionnons donc un rappeur, les boutons des aéroports et définissons sa largeur, soit 50 RAM. Ensuite, pour placer le contenu au centre, nous avons besoin du centre d'alignement du texte OK, donc c'est tout pour la section des aéroports. La dernière chose que nous devons faire sur ce point d'arrêt est de réduire la taille des icônes et du pied Restons donc verrouillés le lien de l'icône suivi de l'image. Et réglez la largeur sur huit RAM. Très bien, alors c'est ça. Nous en avons terminé avec ce point d'arrêt. Nous devons maintenant passer à autre chose et occuper du dernier point d'arrêt, qui sera de 450 pixels Créons donc une nouvelle requête multimédia CSS et spécifions la largeur maximale à 450 pixels. Tout d'abord, je vais réduire la taille de police des éléments HTML. Mettons-le à 35 %. Maintenant, je vais m'occuper du logo et de la barre de navigation. Je veux les placer verticalement les uns sur les autres, et je veux aussi les placer au centre. Allons-y, sélectionnons Logo et définissons ses positions. Je vais placer la première position à dix RAM par rapport à la position gauche, 50 %. Et pour centrer l'élément horizontalement, utilisons Transform Translate avec la direction x. Et cette valeur, je vais passer l'année à -50 %. Le logo est donc correctement positionné. Ensuite, occupons-nous d'une quantité suffisante de bar. Je vais fixer sa position de décalage à 50 %. Encore une fois, nous devons transformer, traduire X avec -50 %. Le numéro est donc placé au centre, mais nous devons définir sa largeur car l'alignement des éléments de navigation est perturbé Je veux maintenant utiliser la barre pour utiliser le maximum disponible avec. Commençons donc avec deux contenus de multiplexage. OK, c'est tout pour la navigation. Comme vous pouvez le voir, nous avons ici l'espace blanc sur le côté droit de la page Web Et en fait, cela est dû aux informations du MacBook. heure actuelle, il a une grande largeur et nous devons la réduire. Nous allons donc sélectionner les informations du MacBook et régler la largeur sur 40 rampes. OK, alors maintenant le problème est résolu. Revenons à la première section. Nous devons placer le paragraphe au centre. Nous allons donc sélectionner p éléments et leur attribuer le centre d' alignement du texte Voilà pour la première section. Passons à la seconde. Je vais augmenter la largeur de l'enveloppe des images Nous allons donc sélectionner les iPhones et régler sa largeur sur 75 pour la largeur de la fenêtre d'affichage Maintenant, ça a l'air mieux. Passons à autre chose et diminuons la taille de police du titre de la troisième section. Sélectionnons-le et définissons la taille de police sur six rampes. En plus de cela, je vais modifier la taille du titre et du paragraphe des informations sur le MacBook. Commençons par le titre. Je vais régler sa taille de police sur trois RAM par rapport au prix du MacBook en silicium. Définissez la taille de la police, indiquez-la à Ram. Et aussi, je vais rendre la police légèrement plus audacieuse. l'heure actuelle, le poids de la police est fixé à 200 et je vais le porter à 300. OK, c'est tout à propos de la section MacBook. Ensuite, nous devons prendre soin des montres. Passons à nouveau au bouton situé sur le côté droit, sélectionnons la montre BTN et réglons la bonne position sur 5 % D'accord ? Enfin, je vais réduire la largeur des icônes et du pied de page Nous allons donc sélectionner le lien de l'icône suivi de l'image. Et définissez la largeur. Ça fait six Ran. OK, c'est tout pour notre projet. Il répond à différentes tailles d'écran. Et en fait, nous en avons fini avec ça. J'espère que vous avez aimé ces projets car nous utilisons beaucoup de choses intéressantes et intéressantes. Passons donc au projet suivant. 46. Projet 5 - Aperçu du projet: Très bien, il est donc temps de créer notre prochain projet, qui sera le clone de l'un des les plus populaires et les plus sites Web les plus populaires et les plus utilisés, appelé Paypal, créera l'interface utilisateur des différentes pages Je suis sur la page principale, les pages de connexion et d'inscription. Bien entendu, ce ne sera pas le clone exact avec toutes les fonctionnalités. Comme je l'ai dit, nous allons créer simplement une interface utilisateur avec HTML, CSS et JavaScript. Paypal a une apparence différente selon les pays. L'interface utilisateur change fréquemment de temps à autre. Ne vous inquiétez donc pas s'il ne s'agit pas du clone exact de l'interface utilisateur actuelle. Très bien, donc avant de passer directement à l'écriture du code, décrivons d'abord à quoi ressemble le projet Comme je l'ai dit, nous allons créer trois pages différentes, connexion principale et l'inscription. Nous allons commencer par la page principale. Il sera composé de deux sections différentes. La première section sera la bannière avec navigation. Nous avons ici plusieurs éléments de navigation. Si je les survole, le menu déroulant s'affiche Il changera lorsque nous survolerons un autre élément de navigation De plus, nous aurons ici deux boutons différents pour la connexion et l'inscription. Si je clique dessus, nous accéderons à la page appropriée. La bannière sera donc suivie de la deuxième section. Il comprendra trois parties différentes avec une police, icônes géniales, des éléments de texte et des boutons. Ensuite, nous aurons cette section bleue avec différents paragraphes. Ensuite, nous allons créer cette petite section ici avec une image et trois étapes différentes. bas de page, vous trouverez un bouton pour vous inscrire, suivi du pied de page Très bien, alors voyons à propos de la page principale. Jetons un coup d'œil à la page de connexion. Elle sera assez similaire à la page de connexion d'origine. Nous aurons ici deux champs de saisie avec des boutons. C'est probablement la page d'inscription. Il sera composé de deux parties. Sur le côté gauche, nous aurons plusieurs images des clients. Quant au côté droit, il inclura deux options différentes. Que nous voulions créer un compte personnel ou professionnel. Très bien, c'est tout pour le projet. Comme d'habitude, nous allons l' adapter aux différentes tailles d'écran. Si j'inspecte la page et que je passe en mode réactif, vous verrez qu' elle est réactive. Une chose à noter ici, sur les tailles d'écran plus petites, nous n' aurons plus de listes déroulantes Ils apparaîtront dans le menu comme suit. OK, alors c'est ça. Nous sommes prêts à commencer à construire le projet. Alors passons à autre chose. 47. Projet 5 - Créer et personnaliser la page d'atterrissage: Très bien, je pense que nous sommes prêts à commencer. J'ai créé un nouveau dossier sur le bureau appelé portfolio website, dans lequel j'ai un autre dossier pour les images. Allons-y, ouvrons ce projet dans le code VS et créons nos fichiers de travail. Dans l'ensemble, nous aurons donc trois fichiers différents pour HTML, CSS et JavaScript. Créons-les. Après cela, je vais ouvrir le fichier index.html et insérer un document HTML de base. Pour cela, utilisons Emirates. Nous devons placer un point d' exclamation puis appuyer sur Entrée ou sur la touche Tab. Changeons le titre. Je vais insérer le site Web de votre portfolio. Ensuite, je vais lier les fichiers CSS et JavaScript au code HTML. Spécifiez ici que le chemin de la série est fichier. Ensuite, je vais ouvrir la balise de script juste au-dessus de la balise body de fermeture. Et insérons ici une partie du fichier JavaScript dans l'attribut source. En plus de cela, nous devons ajouter quelques liens. Tout au long du projet, nous allons utiliser Font, icônes Awesome et également l' une des polices Google. Allons-y et recherchons Font Awesome, CDN js. Ensuite, allez sur le premier lien et sélectionnez ici CSS. Ensuite, récupérez le lien. Ensuite, je vais ouvrir une balise de lien dans les éléments de tête. Collez ensuite l'URL ici. Ensuite, je vais me rendre sur le site Web de Google Fonts. Donc, tout au long du projet, je vais utiliser une police appelée geost. Sélectionnez ensuite tous les styles à l'exception de l'italica. Prenez le lien et collez-le dans la tête. OK, Enfin, lançons le projet dans le navigateur. Pour cela, je vais utiliser l'un des packages de code VS appelé Live Server. Cela nous permet d'exécuter le projet dans le navigateur et d' apporter des modifications et des mises à jour sans actualiser la page à chaque fois. Je recommande donc d' utiliser ce package. Très bien, la dernière chose que je vais faire est de placer l'éditeur et le navigateur, comme ça Et ensuite, lancez-vous. Nous allons construire le projet section par section. premier temps, nous allons créer le balisage HTML , puis nous allons personnaliser cette section à l'aide du CSS Allons-y et commençons par la page de prêt. Ouvrons les développements, qui seront le conteneur. En fait, je souhaite utiliser les commentaires pour définir le début et la fin de chaque section. Ce sera donc la première section. Ensuite, nous avons besoin ici de N de la section 1 qui ouvre l' élément de section avec une classe. Section 1. Comme nous l'avons dit, la première section sera la page de destination. Nous aurons ici les titres, l'image et le bouton. Ouvrons l'élément de titre H1 avec une section de classe, un titre avec le développeur Web de texte Ensuite, nous aurons une image. Je vais sélectionner Image, le nom John Smith point JPG dans le dossier des images. Ensuite, en tant que valeur de l'attribut alt, je vais passer ici, John Smith. Et nous avons également besoin d'un attribut de classe, d'une valeur, d'une personne, d'IMG. L'image est donc suivie d'un autre titre dans lequel nous aurons le nom complet de la personne. Ouvrons donc l'élément de titre h3 avec le nom de la personne de classe et inventons John Smith Enfin, nous avons besoin d'un bouton qui sera représenté par l'élément de lien. Attribuons-lui. La classe dont la valeur est la section 1, btn. Et insérez également vos projets de texte. Très bien, le balisage HTML est donc créé pour la première section Il est maintenant temps de commencer à écrire du CSS. Ouvrons le fichier style.css et ajoutons-le d'abord, créons des styles réinitialisés et communs. Avant cela, je vais insérer vos commentaires, réinitialiser et styles courants. Et puis n de styles de réinitialisation et courants Ensuite, je vais sélectionner chaque élément à l'aide d'un astérisque Je vais donc me débarrasser de la marge et du rembourrage par défaut. Mettons-les tous les deux à zéro. Ensuite, je vais supprimer le contour par défaut avec le contour aucun. Définissons également la taille de la boîte borderbox. Ensuite, je vais me débarrasser des styles par défaut pour le lien et également pour les éléments de liste. N'utilisons aucune décoration de texte. Et type de style de liste, aucun. Ensuite, définissons la famille de polices Joseph sans-serif, à Google Fonts Enfin, je vais régler l'épaisseur de la police à 400. Très bien, voyons donc que la rosace et les styles courants sont appliqués. Comme d'habitude Je vais utiliser une RAM comme unité de mesure pour le moment, une RAM est égale à 16 pixels car la taille de police du HTML est égale à 16 pixels par défaut, je veux convertir une RAM en dix pixels. Et pour cela, nous devons réduire la taille de police du code HTML. Mettons-le à 62,5 %. Comme vous pouvez le constater, les tailles de police des éléments ont diminué. Allons-y et commençons à personnaliser les éléments de cette section. Je vais insérer vos commentaires, section 1. Et puis fin de la première section. Sélectionnez ensuite les éléments de section. Tout d'abord, je vais définir la largeur et la hauteur. Réglons la largeur à 100 %. Pour ce qui est de la hauteur, je vais la régler à 100 % de la fenêtre d'affichage Nous avons donc besoin de 100 vh. Ensuite, je vais définir l'image comme arrière-plan en plein écran Utilisons donc d'abord le dégradé linéaire. Je vais utiliser votre valeur RGBA avec une couleur blanche et une opacité pointant Ensuite, nous avons à nouveau besoin d'un RGBA avec une couleur blanche et une opacité de 0,3 Ensuite, définissons l'URL de l'image. Nous avons besoin ici du chemin de l'image. Le nom de l'image va être bg dot JPG. L'URL sera suivie du centre et ne sera pas répétée. OK, Enfin, définissons la taille de l'arrière-plan à couvrir. Comme vous pouvez le voir, cette section a un arrière-plan en plein écran Ensuite, je vais placer ces éléments au centre de la page. Pour cela, utilisons Flexbox. Nous avons besoin de Display Flex. Ensuite, je vais changer de direction car nous devons placer les éléments dans la colonne. Nous avons donc besoin d'une colonne à direction de flexion. Ensuite, pour envoyer les éléments flexibles à l'intérieur du conteneur, nous devons justifier le centre de contenu et aligner le centre des éléments. Hein ? Voilà donc tout à propos de cet élément de section. Allons-y et personnalisons les différents éléments. Je vais commencer par la première rubrique. Sélectionnons-le. Augmentez la taille de la police. Je vais en faire six RAM. Modifiez également l'épaisseur de la police, mettez-la à 700. Ensuite, je vais définir la couleur du texte sur le blanc. Et changez également la couleur d'arrière-plan. Je vais utiliser ici l' appel ou E pour 1c6f. Le titre semble bon, mais nous devons y ajouter d'autres styles. Je vais créer de l'espace à l'intérieur des éléments à l'aide d'un rembourrage Mettons le rembourrage à zéro en haut et en bas. Et trois ont couru sur les côtés gauche et droit. Je vais également créer de l'espace en bas des éléments en utilisant la marge inférieure Five ran. Ensuite, je vais transformer le texte en majuscules. Je vais aussi créer un espace entre les lettres. Nous avons donc besoin d'un espacement entre les lettres majuscules pour transformer le texte avec une valeur d' une répétition. Ensuite, créons une bordure en bas du titre et créons également un effet d'ombre. Passons à la RAM 2.3 inférieure, solide et blanche. Ensuite, définissez l'ombre du texte avec les valeurs pointant vers RAM Point vers RAM plutôt qu'une RAM. Et la couleur 555. Très bien, la dernière chose que je vais faire avec le titre est de le fausser légèrement Pour cela, utilisons Transform ou cette fonction Q. Je vais incliner les éléments de moins dix degrés. OK, alors on y va, c'est terminé. Passons à l'image. Sélectionnons-le. Tout d'abord, une largeur et une hauteur définies. Je vais les régler tous les deux à 25 RAM. Que pour maintenir la qualité de l'image, nous avons besoin d'une couverture du flux d'objets. Et aussi pour faire en sorte que sa forme soit circulaire, utilisons le radius de la bordure, la valeur 50 % D'accord ? Ensuite, je vais créer une bordure. Réglons sa taille à 2,7 mètres, puis le style sera pointillé, et la couleur sera E pour un, C6, f. Changez également la couleur de fond. Changez également la couleur de fond Je vais utiliser la valeur RGBA avec une couleur blanche et une opacité de 0,7 Et puis créez de l' espace en utilisant du rembourrage, faites-en 0,5 RAM Enfin, diminuez légèrement l'opacité. Mettons-le à 0,9. Très bien, c'est tout à propos de l'image. Ensuite, je vais personnaliser d'autres éléments de titre. Alors sélectionnons-le, augmentons sa taille de police, faisons-le ramper. Changez ensuite la couleur, faites-la blanche. Et changez également la couleur d'arrière-plan. Utilisez à nouveau la couleur E4 un, c, six. Ensuite, je vais créer un espace en haut du titre et également à l'intérieur de celui-ci. Utilisez la marge et réglez-la sur cinq rem en haut et en bas et sur zéro sur les côtés gauche et droit. En ce qui concerne le rembourrage, je vais le régler à 0,5 rem en haut et en bas, et à trois rem sur les côtés gauche et droit Ensuite, créons un espace entre les lettres en utilisant un espacement des lettres de 0,3 RAM. Et je vais aussi légèrement fausser le titre comme dans le premier titre Utilisez le biais de transformation avec la valeur moins dix degrés. Très bien, avec le deuxième titre, nous avons terminé et il est maintenant temps de personnaliser le dernier élément de cette section, qui sera le bouton Allons-y et sélectionnons cet élément. Tout d'abord, changeons la taille de la police, faisons en sorte qu'elle s'exécute à 1,7 et définissons également l'épaisseur de la police à 700 Ensuite, je vais changer la couleur. Passons à 333 et définissons la couleur d'arrière-plan sur le blanc. Après cela, créons une bordure. La valeur est 0,3 et nous l'appelons 333. De plus, je souhaite créer de l' espace à l'intérieur du bouton en utilisant un rembourrage Réglons-le à 0,5 rem en haut et en bas, et à un rem sur les côtés droit et gauche. Transformez ensuite le texte en majuscules et créez un espace entre les lettres Faisons un tour de 0,3. Très bien, avec la première section, c' est terminé. Ça a l'air bien. Et maintenant, nous devons passer à autre chose et nous occuper de la partie suivante, qui sera la barre de navigation 48. Projet 5 - Créer et styliser la navigation: Tout d'abord, je vais le créer et le styliser , puis nous ferons fonctionner la barre de navigation plus tard Allons-y et créons le balisage HTML. Je vais insérer votre nouvelle barre de navigation pour les commentaires. Alors n ne fonctionne pas. Ouvrons ensuite les éléments de navigation HTML5 avec la classe maintenant séparée Donc, dans l'ensemble, nous aurons pour les éléments de navigation, ils seront représentés sous forme de liens. Il s'agit donc d'un élément de lien ouvert avec le numéro de classe, d' un lien avec le texte d'accueil. Allons-y, dupliquons l'élément du lien trois fois et modifions le contenu. Le deuxième point va porter sur. Ensuite, nous aurons un portefeuille. Enfin, nous devons prendre contact. Très bien, pour le moment le numéro est placé à la fin de la page Ce n'est donc pas tout à fait faisable. J'ai besoin d'espace au bas du nanopore pour vous montrer les choses clairement Je vais donc utiliser quelques balises B are. Utilisons Emmet. Nous devons être notre astérisque et 50. Maintenant, nous avons un peu d'espace. C'est ce qui est dit à propos du HTML. Allons-y et commençons à écrire le CSS. Allons-y et insérons de nouveaux commentaires. Navbar puis n sont plus nobles que certains éléments de navigation. Tout d'abord, je vais définir la largeur et la hauteur. Réglons la largeur à 100 %. Quant à la hauteur, faisons-la pour la RAM. Et changez également la couleur de fond. Utilisons ici les éléments appelés ou E pour un, C, F. Bon , je vais maintenant positionner les éléments de navigation dans le sens du Napa Et pour cela, je vais utiliser Flexbox. En fait, nous avons déjà utilisé cette technique et nous allons l'utiliser plusieurs fois au cours du projet. Et pour éviter de l' écrire encore et encore, je vais créer une nouvelle classe dans des styles courants. Disons que c'est le centre. Ensuite, insérez ici, affichez Flex, justifiez le centre du contenu et alignez les éléments au centre. Ensuite, pour appliquer ces tuiles, nous devons attribuer un centre de classe aux éléments. Nous utilisons ces tuiles avec la section 1. Allons-y donc et attribuons-lui un centre de cluster. Alors débarrassez-vous de ces styles à partir d'ici. Ensuite, attribuez également le centre de classe à l'élément de navigation. D'accord ? Comme vous pouvez le constater, rien n' est changé en ce qui concerne le prêt. En ce qui concerne la barre de navigation, les éléments sont placés au centre. heure actuelle, la dernière chose à faire concernant le Napa est de créer un petit effet d' ombre Utilisons donc Box Shadow avec les valeurs pointant vers Ram. Indiquez une RAM supérieure à 0,5 RAM. Et la couleur 555. OK, c'est tout à propos de l'élément de navigation de la barre de navigation. Personnalisons les éléments des liens. Donc, tout d'abord, je vais modifier la taille de la police. Passons à 1,7 rem. De plus, je vais régler l'épaisseur de la police sur 600, puis changer la couleur du texte, le faire 333 OK, ensuite, nous avons besoin d'espace entre les objets. Créons cet espace en utilisant la marge. Je vais définir la marge zéro en haut et en bas. Et puis trois RAM sur les côtés droit et gauche. En plus de cela, créons un espace entre les lettres. Utilisons l' espacement des lettres avec une valeur de 0,3 RAM et transformons également le texte en majuscules Très bien, donc la dernière chose que je vais faire concernant la barre de navigation est de créer un effet de survol. Jetons un coup d'œil au projet terminé. Ainsi, une fois que nous survolons les éléments, ils changent de couleur La ligne est également affichée sous l'article. Cette ligne va être créée en utilisant des pseudo-éléments antérieurs. Allons-y et sélectionnons l'élément de lien avec les pseudo-éléments avant. Tout d'abord, définissons le contenu. Je vais le vider. Ensuite, je vais définir la largeur à 130 %. Définissez également la hauteur, faites-la pointer vers la RAM et modifiez la couleur d'arrière-plan. Faisons en sorte qu'il soit blanc. Donc, pour l'instant, l' élément n'est pas visible. Et pour résoudre ce problème, définissons la position sur absolue. Ensuite, nous devons positionner le lien supérieur par rapport à l'élément parent, qui est une sieste ou un lien. Les lignes sont visibles, mais elles ne sont pas placées correctement. Je vais définir les positions droite et inférieure. Je vais donc fixer la bonne position à -15 % car la largeur de la ligne est égale à 130 Et quand il s' affichera , les objets seront placés au centre. Quant à la position inférieure, réglons-la à -0,3 tour Très bien, donc tout est prêt pour créer un effet de survol. Par défaut, je vais masquer les lignes. Allons-y et réduisons leur largeur à zéro. Sélectionnez ensuite le lien numérique avec le pointeur de la souris, suivi du pseudo-élément précédent et définissez la largeur sur 130 % Utilisons également la transition. Nous avons besoin ici d'une largeur et de 0,2 s. D'accord ? Comme vous pouvez le voir, effet de survol fonctionne bien. Enfin, je vais changer la couleur des objets en survolant. Allons-y et sélectionnons maintenant Berlin avec le pointeur de la souris. Puis change de couleur, fais-la blanche. Et utilisez également la transition avec les valeurs color et 0,2 s. Très bien, donc tout fonctionne parfaitement Le roman est personnalisé et il est maintenant temps de passer à la section suivante. 49. Projet 5 - Créer et personnaliser les barres de progression: La section suivante sera la section À propos de moi. Il se composera d'un titre, de quelques barres de progression montrant les différentes compétences du développeur et plusieurs icônes de réseaux sociaux avec certains services. Allons-y et commençons à créer le balisage HTML. Insérons de nouveaux commentaires, section deux et section deux. Cette section ouverte, section de classe d'éléments, aussi. Ainsi, à l'intérieur de la section , l'élément comportera trois parties principales. Le premier sera le titre. Ouvrons le titre H1 gouvernement avec le titre de la section 2 de la classe et insérons ici à propos de moi. Ensuite, nous aurons des barres de progression. Je vais donc ouvrir un élément div, qui sera le wrapper, y signer des barres de progression de classe, signer des barres de progression de classe Donc, au total, nous aurons sept barres de progression. Allons-y et créons le premier, puis nous le dupliquerons six fois. Donc affecté à la barre de progression du développement. Insérez ensuite votre paragraphe avec le texte de progression du cours. Nous aurons ici différentes technologies. Le premier sera HTML, puis l'élément open span, qui inclura le nombre du pourcentage. Écrivons ici 97, suivi du signe de pourcentage. Enfin, nous avons besoin de l' élément div pour progresser. Présent. La première barre de progression est créée. Dupliquons-le six fois, puis modifions le contenu. Le second sera donc du CSS avec 89 %. Nous aurons alors du JavaScript à 85 %. Ensuite, le prochain sera Sass, 87 %. Alors React est à 80  % , NodeJS Enfin, nous aurons Mongo DB avec 50 %. D'accord ? Nous avons donc ici des barres d'en-tête et de progression. Ensuite, nous devons créer la troisième partie de la deuxième section. Ce sera Services. Ouvrons donc les développements avec les services du cluster. Dans l'ensemble, nous aurons donc quatre services différents. Créons le premier, un développement ouvert avec le service de classe. Il comportera deux éléments différents. La première sera Font, Awesome icon. Ouvrez donc l'élément I avec les classes, FAR, une ampoule. Ensuite, nous avons besoin de l'élément de titre H2 avec le titre de service de classe Insérons ici créé. Le premier service est prêt. Dupliquons-le trois fois, changeons les noms des classes et les titres. Le deuxième sera la résolution des problèmes liés à la FASFA. Ensuite, nous aurons le FAS, un compteur à tacos, et le cap sera rapide Et pour le dernier service, je vais utiliser des classes d'économie avancée, le FAS, une fusée Et comme titre, insérons ici la dynamique. Très bien, le balisage HTML est donc prêt. Ensuite, nous devons passer à autre chose et personnaliser ces éléments. Allons-y et insérons de nouveaux commentaires. Section deux et section deux. Sélectionnez ensuite les éléments de section. Et tout d'abord, une largeur et une hauteur définies. Je vais les configurer tous les deux. 200 %. Permet également de créer de l'espace grâce au rembourrage Je vais régler le rembourrage à 15 RAM haut plutôt qu' à zéro sur le côté droit. Dix couraient en bas et zéro sur le côté gauche. De plus, je vais définir la couleur d'arrière-plan sur le blanc. Par défaut, il est blanc. Quoi qu'il en soit, je vais le définir. Très bien, ensuite je vais centrer les éléments horizontalement. Utilisons Flexbox. Dans ce cas, nous n'avons pas besoin de Cluster Center car nous n'allons pas utiliser tous les styles de cette classe. Nous avons donc besoin de la flexibilité de l'affichage, puis nous devons changer la direction de la flexion. Faisons-en une colonne. Placez ensuite les éléments horizontalement au centre en alignant les éléments au centre accord, voyons l'élément À propos de la section Passons à autre chose et personnalisons le titre. Sélectionnez le titre de la section 2. Augmentons sa taille de police, faisons-en cinq RAM. Changez également la couleur dont nous avons besoin ici. 333. Transformez ensuite le texte en majuscules et créez un espace entre les lettres en utilisant l'espacement des lettres, la valeur 0,5 rem Ensuite, nous avons besoin d'espace au bas du titre. De plus, je vais ajouter une bordure en bas et un peu d'ombre. Réglons donc la marge inférieure à 15 rampes. Créez ensuite une bordure en bas avec les valeurs 0,3 RAM fixe et la couleur 333. Et utilisez également une ombre de texte avec les valeurs point to ram, point to ram 0,5 rem et la couleur 555. Très bien, c'est donc tout à propos de l'élément de titre. Passons à autre chose et personnalisons les barres de progression. Je vais sélectionner le wrapper, qui a le nom de la classe, le wrapper de barres de progression Et créez de l'espace en bas en utilisant la marge, la valeur inférieure Tan around. Ensuite, je vais sélectionner la barre de progression elle-même. Tout d'abord, définissons la largeur et la hauteur. Je vais régler la largeur à 60 RAM. Quant à la hauteur, faisons-en trois RAM. Et changez également la couleur d'arrière-plan. Utilise ton C.C C.C . D'accord. Nous avons maintenant deux barres de progression distinctes, nous avons donc besoin d' espace entre elles. Créons de l'espace en utilisant la marge. Je vais le régler sur 1,5, haut et en bas et zéro sur les côtés gauche et droit. De plus, je vais arrondir légèrement les coins. Utilisez border-radius avec la valeur 0,3 RAN. Enfin, utilisez box-shadow avec les valeurs point to ram, point to ram, une RAM et la couleur 555 OK, c'est tout à propos de la barre de progression. Passons à autre chose et personnalisons le texte. Sélectionnez donc Paragraphe et définissez sa position sur Absolue. Nous devons également nous positionner par rapport à l'élément parent. Réglez ensuite la propriété de gauche sur une seule exécution. Après cela, je vais augmenter la taille de la police. Faisons-le 1,5 rem et rendons également le texte blanc. Très bien, après cela, je vais personnaliser les éléments de span Je parle de ces chiffres. Allons-y donc et sélectionnons-le. Tout d'abord, je vais créer de l'espace sur les côtés gauche et droit en utilisant la marge. Mettons-le à zéro en haut et en bas. 0,5 rem sur les côtés gauche et droit. Cette taille de police accrue, fait 1,8 Ran. Et modifiez également l'épaisseur de la police. Je vais le régler à 700. Très bien, nous en avons terminé avec le texte. Passons à autre chose et stylisons les éléments div en pourcentage de progression. Pour le moment, je vais définir le pourcentage manuellement. Je veux dire, toutes les barres de progression auront le même pourcentage, mais nous finirons par le modifier avec JavaScript. Nous allons donc sélectionner la progression présente. Réglez sa largeur à 9 %. C'est probablement la hauteur. Faisons-le à 100 %. Ensuite, je vais changer la couleur de fond. Utilisons votre couleur, E4, e1, voir six F. Et arrondissons également les coins en utilisant le rayon de bordure avec la valeur Très bien, voyons donc la barre, les barres de progression. Passons à la troisième partie de cette section, qui portera sur les services. Choisissons le développement rapide. Tout d'abord, définissez la largeur et la hauteur. Je vais régler la largeur à 100 %. Quant à la hauteur, faisons-la 30 % de la fenêtre d'affichage. Ensuite, je vais placer les services horizontalement dans une rangée avec un peu d'espace. Et pour cela, je vais utiliser Flexbox. Utilisons ici Display Flex. Cela afin de créer de l'espace. Je veux dire un espace uniforme entre les objets. Utilisons l'espace de contenu de justification de manière uniforme. Ensuite, pour le centrage vertical, utilisez l'option Aligner les éléments au centre Très bien, donc avec l' emballage, nous en avons terminé. Allons-y et personnalisons le service lui-même. Je vais placer les éléments au centre. Utilisons donc le centre d'alignement du texte. Bien, passons à autre chose et personnalisons les icônes de Font Awesome. Donc, tout d'abord, je vais augmenter la taille de la police. Faisons-en dix RAM. Changez ensuite la couleur. Utilise ta date, mange, mange. Créez également de l'espace en bas. Utilisez Margin-bottom pour exécuter. Et puis créez un effet d'ombre. Utilisez du texte. L'ombre dont la valeur est 0,11, 0,1, 0,5 rem et la couleur 555 Très bien, voyons en ce qui concerne les icônes Font, Awesome. Après cela, nous devons nous occuper des titres. Nous allons donc sélectionner le service H2, augmenter la taille de police, passer à Ram Changez de couleur. Faites-le blanc. Je vais également changer la couleur de fond. Je vais utiliser la couleur ou le 777. Et puis définissez la largeur, faites-en 25 points. Ensuite, je vais créer un espace entre les lettres en utilisant l' espacement des lettres avec la valeur 0,3 RAM. Cela va également légèrement fausser le titre. Utilisons donc le biais de transformation avec une valeur de moins dix degrés. Enfin, je vais créer une ombre en utilisant box shadow avec les valeurs point à ram, points pour exécuter 0,5 RAM, et nous l'appellerons 555. Très bien, donc les services sont stylés. Nous avons presque terminé cette section. La seule chose que je vais faire est de modifier légèrement les positions du premier et du dernier service. Je vais les déplacer vers le haut. Nous allons sélectionner ces éléments l'aide de pseudo-classes « premier enfant » et «   dernier enfant » Je vais sélectionner les deux simultanément. Ensuite, utilisez align self, flex, start. Bon, enfin, nous en avons terminé avec cette deuxième section. Il est personnalisé. Ça a l'air bien, et nous devons maintenant passer à la section suivante. 50. Projet 5 - Créer et personnaliser la section Projets: La section suivante sera la section du projet. Il se compose d'un titre et de deux projets différents. Si nous les survolons, certains détails s' afficheront avec de jolis effets de transition Nous avons ici aussi un bouton, passez à la vidéo. Il inclut le lien de la vidéo appropriée sur notre chaîne YouTube. Très bien, allons-y et, comme d'habitude, commençons à créer le balisage HTML Nous allons insérer vos nouveaux commentaires. Troisième section. Puis fin de la section 3. Ouvrez ensuite l'élément de section avec la section de classe 3. Dans cette section, nous aurons deux parties principales. Le premier sera le titre. Pour ce qui est de la deuxième partie, ce sera le projet. Ouvrons les éléments de titre H1 avec la classe, section 3 avec le texte, mes projets Ensuite, je vais ouvrir un élément div, qui sera l' enveloppe des projets Vous devriez avoir un wrapper de projets de classe. Au total, nous aurons donc neuf projets similaires. Je vais créer le premier , puis nous le dupliquerons huit fois. Ouvrons donc une balise div avec un projet de classe. Chaque projet comportera trois parties différentes. Le premier concerne les textes du projet, dans lesquels nous aurons deux rubriques différentes Le premier sera le nom du projet. Ouvrons l'élément de titre H2 avec nom d'un projet de classe et insérons le site Web de votre architecte Les éléments du titre suivant indiqueront les technologies utilisées pour créer un projet. Je vais donc ouvrir les éléments de titre H4 avec les technologies du projet de classe Insérons votre code HTML, CSS et JavaScript. Très bien, passons à la première partie. Ensuite, nous avons une image, des éléments d'image ouverts. Précisons ici le chemin de l'image. Nous avons besoin de. Projetez un point au format JPG depuis le dossier des images. Et je vais également attribuer à l'attribut de classe d' image avec la valeur du projet IMG. Quant à la troisième partie, il s'agira d'un bouton qui sera représenté sous forme de lien. Attribuons-lui donc un lien de projet de classe. En outre, je vais utiliser l' attribut cible avec une valeur de soulignement vide Cela nous permettra d'ouvrir le lien dans un nouvel onglet. Enfin, insérons ici le texte pour accéder à la vidéo. Bon, le premier projet est prêt. Je vais le dupliquer huit fois, puis y apporter quelques modifications. La première chose que je vais faire est d'insérer le lien de la vidéo. En fait, j'ai préparé ces liens dans un fichier texte. Je vais donc les récupérer et les insérer ici. En fait, vous pouvez inclure ces liens ou non. C'est à vous de décider. Le deuxième projet va être budgétisé, créé par React js. Ensuite, nous avons besoin d' un projet au format JPEG. Et insérez également le lien. D'accord, la prochaine sera la Maison Blanche, qui est créée sur la base du HTML, du CSS et du JavaScript. Laissons-les donc tels qu'ils sont. Modifiez ensuite le nom de l'image. Nous devons projeter un JPG à trois points et insérer ici le lien YouTube. D'accord, nous avons ensuite le gestionnaire de tâches avec React js. Nous avons également besoin ici du projet 4. Et puis le lien. Le prochain projet sera la route avec le HTML, le CSS et le JavaScript. Ensuite, nous avons besoin du projet 5. Et aussi le lien. Ensuite, nous avons la recette de la nourriture. Il est créé à l'aide de React js. Nous avons besoin ici d'en projeter six. Et le lien. Ensuite, nous avons le diaporama Il est créé sur la base de HTML, CSS et JavaScript Changez le nom de l'image, nous avons besoin du projet 7 , puis créez le lien. Le prochain projet sera un menu de hamburgers. Il est créé à l'aide de HTML, CSS et JavaScript. Modifiez également le nom de l'image. Nous avons besoin du projet 8 et avons établi le lien. Et le dernier projet sera le menu CSS Grid, créé à nouveau avec HTML, CSS et JavaScript. Et le nom de l'image va être Project Night. Collez également ici le dernier lien. Très bien, le balisage HTML est donc préparé et nous devons maintenant commencer à écrire du CSS. Insérons de nouveaux commentaires. Troisième section. Puis fin de la section 3. Sélectionnez ensuite les éléments de section. Définissez sa largeur et sa hauteur. Je vais régler les deux à 200 %. De plus, je vais créer de l'espace à l'intérieur de cette section en utilisant du rembourrage Réglons-le à dix rem en haut et en bas et mettons-le à zéro sur les côtés droit et gauche. Et changez également la couleur d'arrière-plan. Je vais utiliser ici la couleur E, F. Ensuite, je vais placer le contenu au centre de cette section. Pour cela, utilisons Flexbox. Nous avons besoin de montrer les faits. Alors je vais changer de direction. Vous voyez votre colonne de direction de flexion. Enfin, utilisez l'option Aligner les éléments au centre. Très bien, le contenu est donc placé au centre, et maintenant je vais personnaliser le titre En fait, ce sera similaire au titre de la section précédente. Ainsi, au lieu d'écrire les mêmes styles encore et encore, je vais attribuer aux deux titres les mêmes noms de classe, et les styles seront appliqués aux deux en même temps Utilisons donc le titre de la section de classe et changeons également la classe dans le fichier CSS. Ensuite, placez ces tuiles dans les statistiques communes. Comme vous pouvez le constater, le titre de la troisième section est stylisé Passons aux projets. Je vais sélectionner la balise wrapper div. Définissons la largeur, faisons-la à 80 %. Je vais donc placer les projets au centre de l'emballage Et pour cela, je souhaite utiliser Flexbox. Et en fait, au lieu d' écrire ces serviettes ici, utilisons simplement le cluster center, que nous avons préparé précédemment. Et en plus de cela, je vais utiliser Flex Wrap avec le Value Wrap. Comme vous pouvez le constater, les projets sont bien placés côte à côte. Allons-y et personnalisons le projet lui-même. Tout d'abord, je vais placer le contenu du projet au centre. Pour cela, nous devons utiliser à nouveau les flux books. Nous pouvons soit l'attribuer à chaque centre du cluster de projets soit le définir à nouveau, comme indiqué ici. Dans ce cas, utilisons les propriétés flexbox ici dans CSS car l'attribution d'un cluster à chaque projet prendra plus Nous avons donc besoin de la flexion d'affichage, puis de la direction de la flexion, de la colonne. Nous devons justifier le centre de contenu et aligner le centre des éléments. Ensuite, je vais créer un espace entre les projets. Faisons-le en utilisant la marge. Je vais le régler sur une seule RAM. Également en tant que couleur d'arrière-plan définie. Faites-le blanc. Et enfin, utilisez box shadow avec les valeurs 0,3, 0,3 RAM plutôt que 0,5 rem. Et nous les appelons 777. Très bien, c'est tout pour le projet en ce moment. Passons à autre chose et personnalisons les éléments du projet. Ensuite, nous allons créer un effet de survol. Je vais sélectionner les textes du projet. Attribuons à un centre d' alignement du texte Et j'ai également besoin d' espacement latéral pour tout ce qui y est, y compris Faisons en sorte qu'il fonctionne à 0.1. Ensuite, sélectionnons le nom du projet. Modifiez la taille de sa police, arrondissez-la en trois tours. Ensuite, je vais régler le poids de la police à 700. Définissez également la couleur, faites-la 333. Enfin, je vais mettre les noms de projets en majuscules à l'aide de la transformation de texte Capitaliser. Le titre semble bon. Passons à autre chose et personnalisons les technologies sélectionnées. Je vais modifier la taille de la police. Faisons-en 1,8 RAM, puis définissons la couleur sur E4, e1 Voir six F. Très bien , je vais maintenant diminuer la largeur de l'image sélectionnée et lui donner une largeur en dram. OK, donc enfin, nous devons personnaliser le lien. Allons-y donc et sélectionnons-le. Dans un premier temps. Définissons la taille de la police, faisons en sorte qu'elle s'exécute. Modifiez ensuite l'épaisseur de la police, faites-en 500. Je vais appeler a2, a3, a3, a3. Et crée également un espace entre les lettres. Faisons en sorte qu'il fonctionne à 0.1. Ensuite, je vais créer une bordure. Attribuons des valeurs de vérité à un point, nous avons utilisé un point plein et la couleur E4, e1, voir six F. Ensuite, je vais créer de l'espace à l'intérieur du lien à l'aide d' Mettons-le à zéro en haut et en bas et à un rem sur les côtés droit et gauche. Enfin, définissez la couleur d'arrière-plan sur le blanc. Très bien, tous les éléments sont personnalisés et nous devons maintenant créer un effet de survol Allons-y et commençons par le texte d'un projet. Je vais définir cette position. Faisons en sorte que ce soit absolu. Ensuite, nous avons besoin de la position relative du projet, qui est l'élément parent. Ensuite, définissez une propriété supérieure sur moins dix rampes. Comme vous pouvez le constater, la position de la taxe de projet est modifiée. Sélectionnez le projet avec le pointeur de la souris, suivi des textes du projet Disons la première position avec cinq RAM. Ensuite, utilisez la transition avec une valeur égale à 0,3 s. D'accord ? Ainsi, une fois que nous survolons les projets , la taxe sur les projets se déplace du haut vers le bas Je veux maintenant faire de même pour l'élément de lien. Changeons sa position. Je vais le régler sur Absolu. Ensuite, nous avons besoin de la position inférieure moins cinq RAM. Ensuite, je vais sélectionner les projets avec le pointeur de la souris, puis le lien du projet Donc, en survolant, je vais régler le bouton sur la fibrine. Et je vais également utiliser la transition avec des valeurs partisanes 0.37 Très bien, alors maintenant, si je passe la souris sur l' élément de lien standard du projet, il se déplacera également Ensuite, je vais diminuer l' opacité de l'image Allons-y et sélectionnons le projet à survoler , suivi de l'image du projet Je vais donc régler l' opacité sur 0,2. Utilisons également la transition avec les valeurs d'opacité 0,3 s. Maintenant, l'effet est meilleur Ensuite, je vais masquer le contenu par défaut. Pour cela, attribuons le débordement masqué au projet. Le contenu est désormais masqué par défaut. Et une fois que nous aurons survolé les projets, ils s'afficheront. Nous avons ici un petit problème. Les textes du projet se retrouvent derrière l'image et nous ne sommes pas en mesure de la sélectionner. Je vais donc utiliser l'indice Z avec une valeur, disons dix. D'accord ? Alors maintenant, le problème est résolu. La prochaine chose que je veux faire est d'ajouter un certain délai aux textes du projet ainsi qu'au lien. Une fois que nous avons d'abord survolé le projet, je souhaite réduire l'opacité de l'image, puis afficher le contenu Mais une fois que nous en avons fini avec la souris, nous n'avons plus besoin de délai. Par conséquent, nous devons utiliser la transition avec la pseudo-classe hover Utilisons votre sommet avec une durée de 0,3 s. Ensuite, il est spécifié le temps de retard de 0,3 s. Ensuite, nous devons faire transition avec le bas et avec une durée de 0,3 s et un temps de retard de 0,3 s. Très bien, nous avons maintenant un bien meilleur effet. La dernière chose que je souhaite faire avec cette section est créer un effet d'ombre lors du survol Nous allons donc sélectionner le projet avec transporteur et régler Box Shadow sur une seule exécution Puis un rem, puis à nouveau une RAM avec la couleur 777. Enfin, utilisons la transition avec l' ombre de la boîte de valeurs, 0,5 s. D'accord ? L'effet d'ombre fonctionne donc bien. Et en fait, nous en avons terminé avec cette section. Nous devons maintenant passer à autre chose et créer la section de contenu 51. Projet 5 - Créer et styliser la section de conception: La section de contact va être simple. Nous aurons un titre et quelques champs de saisie avec ce bouton de soumission. Allons-y et commençons à créer le balisage HTML. Insérons de nouveaux commentaires. Section quatre, puis n de la section quatre. Et ouvrez l'élément de section avec une fourche de section de classe. Dans l'ensemble, nous aurons donc deux parties différentes. Le premier sera le titre. Il s'agit donc d'éléments de titre H1 ouverts. Je vais attribuer au titre deux classes différentes. Le premier sera le titre de la section du nom de classe commun. Quant à la seconde, il s'agira de la section de classe individuelle à utiliser comme titre de texte. Insérons-le ici, contactez-moi. OK, donc c'est tout à propos du titre. La deuxième partie de cette section sera consacrée aux éléments formés. Ouvrons-le avec le formulaire de contact de la classe. Ainsi, l'élément de formulaire comprendra deux entrées, zone de texte et le bouton d'envoi. Ouvrons l'élément d'entrée avec le type de texte. Et où se trouve l'attribut placeholder, qui aura pour valeur le nom je vais dupliquer cet élément Changez le type. Je vais utiliser votre adresse e-mail, puis modifier la valeur de l'attribut d' espace réservé. Faisons en sorte que ce soit un e-mail. Ensuite, nous aurons une zone de texte. Je vais lui attribuer un attribut d' espace réservé avec un message de valeur Enfin, nous avons besoin d'un bouton de soumission qui sera créé à l'aide des éléments de saisie. Dans ce cas, le type va être soumis. Ensuite, nous avons besoin de soumettre une valeur. Et je vais également utiliser votre contact de classe pour BTN. D'accord, le balisage HTML est donc préparé. Comme vous pouvez le constater, le titre comporte certains styles, mais il ne semble pas très bon pour le moment. Nous allons régler ce problème dans une minute. Allons-y et insérons de nouveaux commentaires dans la section du fichier CSS pour la fin de la section quatre. Sélectionnez ensuite les éléments de section. Et tout d'abord, définissez la largeur et la hauteur. Je vais régler la largeur à 200 %. Pour la hauteur. Faisons-en 70 % de la fenêtre d'affichage. Et changez également la couleur d'arrière-plan. Faites-en 333. OK, maintenant je vais placer le contenu au centre. Et pour cela, utilisons Flexbox. Nous avons besoin de la flexion de l'écran, de la colonne de direction de la flexion. Ensuite, je vais centrer le contenu horizontalement. Pour cette utilisation, alignez les éléments au centre. Enfin, afin de créer de l'espace entre les éléments flexibles, utilisons l' espace de contenu de manière uniforme pour justifier. Très bien, c'est donc tout à propos de cet élément de section. Allons-y et occupons-nous du titre. heure actuelle Il possède certains styles par défaut issus de cette classe de titre de section. Et je vais changer sa couleur. Nous allons donc sélectionner la section pour le titre et rendre la couleur blanche. Puis se débarrasse de Box Shadow. Je vais le définir sur aucun et également changer la couleur de la bordure à l'aide de la propriété de couleur de la bordure. Faisons en sorte qu'il soit blanc. D'accord, le titre est donc personnalisé et nous devons maintenant passer aux éléments du formulaire. Allons-y, sélectionnons-le et définissons la largeur. Je vais le régler à 50 rem. Ensuite, je vais placer les éléments verticalement dans une colonne, et je vais également les placer au centre. Nous devons donc utiliser Flexbox. Et dans ce cas, attribuons à l'élément de formulaire la classe center. Et puis changez la direction de flexion, faites-en une colonne. Les champs de saisie et les boutons sont alignés, et je vais maintenant les styliser. Sélectionnons ensemble les entrées et la zone de texte. Définissez ensuite la largeur, faites-la à 100 %. Créez ensuite de l'espace à l'intérieur des champs à l'aide d'un rembourrage Faisons-le 0,5 rem sur les quatre côtés. Et en plus de cela, je vais créer l'espace en haut et en bas des champs en utilisant la marge Mettons-le à 0,5 rem en haut et en bas et à zéro sur les côtés droit et gauche. Ensuite, je vais changer la couleur de fond. Utilisons votre couleur E F. Modifiez également la taille de la police, passez-la à 1,5 g. Créez ensuite une bordure avec les points de valeurs pour qu'elle soit continue. Et la couleur E4, E1, C6, F. Et enfin, changez la couleur du texte, faites-en Très bien, ensuite, je vais personnaliser la zone de texte. Comme vous le savez, vous pouvez augmenter ou diminuer sa largeur et sa hauteur manuellement. Et en fait, nous n'en avons pas besoin car cela casserait la mise en page. Nous allons donc sélectionner la zone de texte. Tout d'abord, définissons cette hauteur, faisons-en dix rampes. Ensuite, je vais définir une hauteur maximale et une largeur maximale. Réglons le maximum à 15 RAM. En ce qui concerne la largeur maximale, faisons-la faisons-la OK, donc c'est tout à propos de la zone de texte. Le dernier élément que je vais styliser est le bouton d'envoi. Allons-y donc et sélectionnons-le. Nous devons ici sélectionner ce premier formulaire de contact, suivi du formulaire de contact BTN. Changeons la couleur de fond. Tu vois ta couleur. Si c'est pour 1c6f, changez la couleur du texte, faites-le blanc Je vais également transformer le texte en majuscules. Créez ensuite un espace entre les lettres. Faisons en une seule RAM. Et enfin, changez le type du plus grossier, faites-le pointer Tous les éléments sont donc stylisés et avec la section de contenu, nous avons terminé Ensuite, nous devons passer à autre chose et personnaliser la dernière section du projet, qui sera le pied de page 52. Projet 5 - Créer et styliser le pied de page: En fait, avant de passer au pied de page, je souhaite réduire l'espace entre le titre et les champs de saisie car je pense qu'il est trop grand Réglons donc la marge inférieure à cinq Ran. Ok, maintenant c'est mieux. Le pied de page sera donc simple, comme la section contact, où nous aurons quelques icônes de réseaux sociaux et le texte du copyright Allons-y et commençons à créer le balisage HTML. Insérez votre nouvelle section 5 pour les commentaires. Section 5. Ouvrez ensuite l'élément de pied de page HTML5 avec la section 5 de la classe Nous aurons deux parties différentes. La première sera celle des icônes des réseaux sociaux. Ouvrons l'élément div avec un réseau social de classe. Dans l'ensemble, nous aurons quatre icônes différentes. Ouvrons l'élément de lien avec un lien vers un réseau social de classe. Et insérez votre icône Font Awesome. Les classes seront FAB, a, GitHub, square. Dupliquez ensuite l'élément de lien trois fois et modifiez les noms de classe. Le second sera f a b, f a YouTube. Ensuite, nous aurons f a b, f a square Facebook. Et enfin, le dernier sera Instagram Square Root. OK, c'est tout pour la première partie. Ensuite, je vais créer un paragraphe qui inclura du texte de copyright. Attribuons à la classe le copyright et insérons un nouveau copyright, suivi du signe du copyright. Ce sera l'entité HTML5. Nous avons besoin d'une esperluette, d'une copie, d'un point-virgule, puis d'écrire du code et point-virgule, puis Tous droits réservés. Très bien, avec le balisage HTML, nous avons terminé. Allons-y et personnalisons cette section. Insérons ici de nouveaux commentaires, section 5. Et toute la section 5. Sélectionnez ensuite les éléments du pied de page et définissez la largeur et la hauteur La largeur va être de 100 %. Quant à la hauteur, je vais la régler à 30 % de la vue. Enfin, changez la couleur d'arrière-plan. Ça va être 222. OK. Ensuite, je vais placer le contenu au centre à l'aide de Flexbox. Attribuons donc à élément de pied de page le centre de la classe , puis changeons la colonne de direction de flexion Avec un élément de pied de page. Nous avons terminé. Passons à autre chose et personnalisons les icônes des réseaux sociaux. Allons-y et sélectionnons les éléments de la division wrapper, qui ont une classe de réseaux sociaux et une marge en bas à cinq tours Ensuite, je vais sélectionner les éléments du lien. Je vais donc créer un espace sur les côtés gauche et droit des liens en utilisant la marge. Mettons-le à zéro en haut et en bas et à deux rem sur les côtés droit et gauche. En plus de cela, je vais créer de l'espace à l'intérieur du lien en utilisant du rembourrage Réglons-le à 0,7. Rem sur les quatre côtés. Changez également la couleur d'arrière-plan. Je vais utiliser ici la couleur E pour 1c6f. Enfin, utilisons border-radius avec une valeur de 0,5 g. Bien, passons à autre chose, stylisons les icônes, sélectionnons les éléments Augmentons la taille de la police, faisons-la en trois parties, et changeons également la couleur, rendons-la blanche. Comme vous pouvez le constater à l'heure actuelle, les éléments de lien ne sont pas très beaux. Par défaut, ce sont des éléments intégrés et nous devons les transformer en blocs intégrés. Maintenant, ils ont l'air bien mieux. OK, donc avec les icônes des réseaux sociaux, c'est terminé. Enfin, nous devons personnaliser le texte du copyright. Allons-y et sélectionnons un paragraphe. Changeons la couleur, faisons-en un. Ensuite, je vais augmenter la taille de la police, la faire passer à Ram. Créez un espace entre les lettres en utilisant les points d'espacement des lettres vers la RAM. Je vais également alléger la police. Réglons l' épaisseur de la police à 300. Et enfin, du texte aligné au centre. Très bien, avec le pied de page, nous avons terminé et en fait toutes ces sections sont Nous sommes maintenant prêts à ajouter des fonctionnalités à notre site Web à l'aide de JavaScript 53. Projet 5 - Faire fonctionner la barre de navigation et les barres de progression en utilisant JavaScript: OK, donc la première chose que je vais faire est de faire défiler la barre de navigation fixe tous les mois vers le bas et d'y accéder Nous allons donc créer une nouvelle classe et du CSS, je vais l'appeler sticky. Définissons la position, fixons-la. Et définissez également la propriété supérieure sur zéro. Nous ajouterons donc ce numéro de cluster une fois que nous aurons fait défiler la page vers le bas et que nous atteindrons huit. Ouvrons le fichier script.js et tout d'abord, sélectionnons suffisamment d'éléments. Créez une nouvelle variable, appelez-la maintenant barre et sélectionnez l'élément de navigation à l'aide de la méthode de sélection de requête Encore une fois, une fois que nous avons fait défiler la page vers le bas et que nous avons atteint le numéro, nous devons lui attribuer une nouvelle classe stick. Nous devons donc utiliser un scroll events. Nous devons nous attacher à la méthode d'objet de fenêtre globale appelée event listener, qui prendra deux arguments Le premier sera le défilement des événements. Quant à la seconde, il s'agira de la fonction de rappel, qui sera exécutée une fois que l'événement de défilement sera déclenché Je vais donc maintenant utiliser deux propriétés différentes. Ils sont appelés décalage de page et décalage de haut de page. Je vais donc parcourir les deux consoles et vous montrer comment elles fonctionnent réellement. Passons à la page à points de la fenêtre de la console, décalage et à la partie supérieure décalée. Inspectons la page. Passez à l' onglet Console, commencez à faire défiler la page. Ainsi, la première propriété, je veux dire le décalage de la page Y, renvoie également la distance en pixels qui ont été défilés verticalement vers le haut La seconde propriété indique la distance entre le bord supérieur de la page et l'élément, dans ce cas le Naropa Une fois que ces valeurs sont égales, cela signifie que vous avez maintenant atteint le bord supérieur de la page. Et pour le prouver, je vais utiliser une instruction if, Let's Institute, la condition que le décalage de la page Y de la fenêtre des points est supérieur ou égal à. Maintenant, la barre est décalée sur le dessus. Et puis lancez vers la console un texte, disons du stick. Une fois que nous commencerons à faire défiler la page vers le bas et à enrichir la barre de navigation, nous resterons fidèles à la constante Donc, si cette condition est vraie, nous devons ajouter à la classe de barre de navigation sticky Et si c'est faux, nous devons le supprimer. Débarrassons-nous donc d'un journal de console et insérons-le ici. Maintenant, la liste des classes Upwork point. En fait, les propriétés de la liste des classes que possède l'élément sont stockées. Ensuite, nous avons besoin d'une méthode appelée add, et je dois spécifier le clusterisé sticky entre parenthèses En ce qui concerne la déclaration else, comme nous l'avons dit, nous devons supprimer le stick de la barre de navigation Nous avons maintenant besoin de la liste des classes de points à barres, de la suppression des points. Et puis le cours se complique. Donc, si nous faisons défiler la page vers le bas, le numéro deviendra collant. Mais nous avons ici quelques problèmes. Il finit par se retrouver derrière les éléments. De plus, si nous faisons défiler la page vers le haut, le numéro restera collé page vers le haut, le numéro restera en haut de la page. Donc, pour résoudre ce problème, nous devons maintenant stocker le décalage de la barre dans la variable. Créons donc une nouvelle variable et appelons-la maintenant plus offset top, assignée à cette variable maintenant, et non offset top. Passez également la variable ici. Nous le faisons donc parce que nous allons comparer le décalage de page à la position initiale de la barre de navigation De plus, nous devons définir l'indice Z pour le moment. Tout d'abord, définissons la position sur absolue. Ensuite, vous utilisez l'indice Z avec une valeur plus élevée, disons 300. OK, donc la barre de navigation fonctionne bien. Ensuite, je vais mettre en évidence les liens de la barre de navigation lorsque nous atteindrons la section appropriée Mais cela dans un premier temps, sélectionnons toutes ces sections ainsi que tous les liens de la barre de navigation Créons une nouvelle variable et des sections pour les collègues. Je vais sélectionner toutes les sections en utilisant la méthode all du sélecteur de requêtes Nous devons spécifier ici la section du nom du tag. Ensuite, sélectionnons maintenant Bar Links. Je vais utiliser à nouveau la méthode all du sélecteur de requêtes. Précisons ici le nom de la classe. Maintenant, barre de liens. Nous allons créer une nouvelle classe en CSS appelée Change, dans laquelle nous définirons les mêmes styles que ceux que nous avons utilisés lors du survol Allons-y donc et insérons ici. Plus le changement suivi du lien Navajo. Comme vous le voyez, nous n' utilisons pas cet espace ici. Réglons la couleur sur le blanc. Ensuite, je vais sélectionner à nouveau le lien Modifier avec Navarre, suivi du pseudo élément précédent Réglez la largeur à 130 %. Très bien, après cela, nous devons parcourir ces sections et vérifier si nous atteignons la bonne section Nous devons donc attacher deux sections pour chaque méthode auxiliaire du tableau Passons une fonction de rappel avec une section de paramètres, qui sera la section en cours tout au long de la boucle Nous devons maintenant vérifier si nous avons fait défiler la page vers le bas jusqu'à la section appropriée Nous avons donc besoin de chaque déclaration avec la condition suivante. Fenêtre Décalage de la page Y supérieur ou égal au décalage de section en haut. En fait, je voudrais mettre en évidence Berlin Ink un peu plus tôt, une fois que nous aurons fait défiler la page vers le bas. Je vais donc soustraire dix pixels à la propriété offset Donc, si cette condition est vraie, nous devons mettre en évidence le lien de la barre de navigation Et pour ce faire, nous devons ajouter à la fonction de rappel un nouveau paramètre I, qui va être l'index Et maintenant, nous devons ajouter deux nouveaux liens, le changement de classe. Nous avons maintenant besoin de Bar Links. Ensuite, nous devons spécifier le numéro d' index entre crochets. Ensuite, elle doit être suivie la propriété de liste de classes avec la méthode ADD. Et nous devons spécifier le changement de classe entre parenthèses. Donc, si nous faisons défiler le bas, le nombre de liens sera mis en évidence. Mais comme vous pouvez le constater, nous avons ici un petit problème lorsque nous continuons à faire défiler la page vers le bas alors que les sections précédentes sont surlignées, alors que nous n'en avons pas besoin. Pour résoudre ce problème, nous devons parcourir les nouveaux liens et supprimer le changement de classe de chacun d'entre eux. Ensuite, nous devons ajouter le changement de classe au lien nécessaire. Nous devons donc nous attacher à de nouveaux liens pour chaque méthode auxiliaire du tableau Passez ensuite ici la fonction de rappel avec le paramètre qui sera l' élément actuel tout au long de la boucle Donc, comme nous l'avons dit, nous devons supprimer le changement de classe des liens de la barre de navigation Nous avons donc maintenant besoin d'un lien de barre, d'une liste de classes de nœuds, suppression de points, d'un changement de classe. D'accord ? Le problème est maintenant résolu et nos liens sont correctement mis en évidence. Très bien, il y a donc encore une chose concernant la barre de navigation. Lorsque nous cliquons sur le nombre de liens, nous devons accéder à la section appropriée avec un effet de défilement fluide Pour ce faire, nous devons d'abord attribuer à la propriété de l'élément HTML appelée comportement de défilement la valeur smooth. Ensuite, nous devons attribuer à chaque section des éléments et un attribut ID. Je vais utiliser le curseur multiple. Encore une fois, nous avons besoin de l'attribut ID, et chacun d'eux doit avoir la valeur appropriée. Je suis dans ce nom de section dont nous avons besoin dans la section 1, la section 2, la section 3 et la section 4. Ensuite, nous devons attribuer aux attributs de référence h des liens de la barre de navigation les valeurs appropriées Ces valeurs doivent correspondre aux valeurs des attributs. Nous avons donc besoin ici de la section 1, la section 2, de la section 3 et de la section 4. Enfin, je vais attribuer à l' attribut de référence h de la section inférieure du projet la troisième section, car lorsque nous cliquons sur le bouton des projets, nous devons accéder à la section des projets. Si je clique sur le bouton ou le lien, nous accéderons aux différentes sections De plus, si je clique sur le bouton des projets, nous irons à la section des projets. En fait, nous avons ici un petit problème. Si je clique sur les icônes des réseaux sociaux et sur le pied de page, nous naviguerons vers le haut de la page avec un défilement fluide En fait, nous n'en avons pas besoin. Je vais donc n'en insérer aucun comme valeur des attributs de référence h. Maintenant, le problème est réglé et en fait, en Alberta, c'est terminé. Ensuite, je vais m' occuper des barres de progression. Nous devons donc sentir les barres de progression une fois qu'elles apparaissent sur la page. Et pour le gérer, encore une fois, nous avons besoin de l'aide des propriétés supérieures de la page Y, du décalage et Je vais d' abord sélectionner le wrapper des barres de progression Créons une nouvelle variable. Je vais appeler ça du progrès. Et puis sélectionnez le wrapper de barres de progression l'aide de la méthode QuerySelector Spécifions ici le wrapper de barres de progression du nom de classe. Ensuite, nous avons besoin d'une instruction if dans laquelle nous avons besoin de la condition suivante. Décalage du point de la fenêtre en Y et hauteur intérieure du point de la fenêtre. Cette somme doit donc être supérieure ou égale pour compenser le haut de la progression. Nous avons utilisé ici la hauteur intérieure des points de fenêtre, et nous l'avons ajoutée à la fenêtre, le décalage de page. Ainsi, la fenêtre, la hauteur intérieure renvoie la hauteur de la fenêtre, la hauteur du contenu visible sur la page. Si cette condition est vraie, cela signifie que des barres de progression commencent à apparaître et que nous devons les remplir en fonction de leurs valeurs en pourcentage. Je vais créer un tableau dans lequel nous allons stocker ces valeurs de pourcentage. Créons une nouvelle variable et appelons-la «   barres de progression » : presents. Passons ici les valeurs suivantes. Nous avons besoin de 90, 780-985-8780 Ensuite, je vais définir la largeur des éléments div de la personne de progression à zéro À l'heure actuelle, cela équivaut à 90 %. Je vais donc sélectionner les progrès, présenter les développements. Ensuite, je vais les parcourir et définir leur largeur à partir de ce tableau. Nous allons donc sélectionner la progression présente à l'aide de la méthode QuerySelector all C'est la progression du nom de la classe de l'institut. Elle doit être suivie de la méthode forEach. Passons votre fonction de rappel, qui prendra deux paramètres Le premier sera l' élément actuel de la liste. Disons que c'est des éléments, je veux dire EL. Et nous avons également besoin d'un index afin de définir la largeur appropriée du tableau pour chaque élément. Donc, en tant que bloc de code, nous devons insérer ici le style de point de l'élément, la largeur du point. Ouvrez ensuite les tiques arrières. Récupérez les valeurs du tableau de présentation de la barre de progression. Nous devons indiquer le numéro d'indice entre crochets sous la forme i, suivi du présent. Comme vous pouvez le constater, les barres de progression sont remplies en fonction des valeurs en pourcentage. Allons-y et ajoutons-leur un effet de transition. Voici la transition avec la largeur des valeurs. Ensuite, nous avons besoin d'une durée de 0,5 s. Ensuite, du temps de retard de 0,5 s. Et utilisez également l'une des fonctions de synchronisation de transition appelée ease in, out. Maintenant, les barres de progression apparaissent avec un bel effet de transition. La dernière chose que je souhaite faire est d'afficher dynamiquement ces valeurs de pourcentage à partir de JavaScript. À l'heure actuelle, ce sont des valeurs codées en dur dans un document HTML. Nous devons donc avoir accès à ces éléments de span pour cela, dans un premier temps, accéder au paragraphe. Nous devons donc écrire ici que les éléments parsèment les éléments précédents du frère ou de la sœur Une fois que nous avons accès au paragraphe , nous devons trouver ses éléments secondaires , à savoir la plage. Nous devons donc utiliser la propriété appelée premier élément enfant. Et nous devons modifier son contenu à l'aide de texte. Propriété du contenu. Elle doit être égale à la barre de progression présentée avec le numéro d' index i. Afin de voir clairement que nous affichons les valeurs de l'indice glycémique d'une personne à partir de JavaScript, supprimons-les du fichier HTML contenant des points d' index. Bien, comme vous pouvez le voir, tout était parfait et avec les barres de progression, c' tout était parfait et avec les est terminé Avant de passer à autre chose et de commencer à rendre le projet réactif, je dois faire quelques choses en JavaScript. Donc toutes ces choses, je veux dire, tout ce bloc de code s'exécute ici. Une fois que nous avons fait défiler la page. En fait, je veux exécuter ce code une fois par défaut avant de le faire défiler. Afin d'éviter un comportement inattendu et étrange de la page Web. Pour cela, je vais créer une fonction, appelons-la main F, puis récupérer tout ce bloc de code et le coller ici. Je vais donc appeler cette fonction deux fois. Dans un premier temps, appelons cela des événements en dehors de ce défilement à l'échelle mondiale. Et la deuxième fois, il doit être appelé dans le cadre d'un événement de défilement. Je veux dire à l'intérieur de la fonction de rappel. D'accord ? C'est pourquoi l'ensemble du code JavaScript fonctionne sur la base de propriétés telles que le décalage de page et le décalage en haut. Nous pourrions alors rencontrer des problèmes lorsque nous modifions la taille de la fenêtre. Nous devons donc recharger la page. Une fois que nous aurons redimensionné la fenêtre, je vais utiliser l'événement de redimensionnement Attachons l'écouteur d'événements à l'objet global de la fenêtre. Spécifiez ensuite le type d'événement. Il va être redimensionné. De plus, nous avons besoin ici d'une fonction de rappel. Donc, pour recharger la page, nous avons besoin de l' emplacement des points de la fenêtre, du rechargement des points Donc si je change la taille de la fenêtre, la page va se révolter. OK, donc c'est tout à propos de JavaScript. Il est maintenant temps de passer à la dernière partie de notre projet. Je vais adapter le projet à différentes tailles d'écran. 54. Projet 5 - Rendre le projet réactif: En fait, avant de commencer à écrire le code, je vais suspendre le dernier code que nous avons écrit en JavaScript car nous devrons redimensionner la fenêtre de nombreuses fois Ensuite, je vais inspecter la page et passer en mode réactif. Comme nous l'avons dit au début de ce tutoriel, nous avons construit ce projet sur un grand écran d'une largeur de 1920 pixels et d'une hauteur de 1080 pixels. J'ai déjà préparé les points de rupture sur lesquels nous devons apporter les modifications Je ne perdrai donc pas de temps là-dessus Le premier point d'arrêt sur lequel nous devons apporter des modifications sera donc de 1 200 pixels Insérons donc de nouveaux commentaires, réactifs et non réactifs Ensuite, je vais créer une requête multimédia CSS, où nous devons spécifier la largeur maximale. Comme je l'ai dit, ce sera 1 200 pixels. Nous devons personnaliser la deuxième section. Je vais placer les services sur deux lignes. Allons-y donc et sélectionnons-les. Je veux dire, l'élément wrapper div. Réglons la hauteur sur oral. Et je vais aussi configurer Flex Wrap pour envelopper. En outre, sélectionnons le service lui-même et affinons la marge. Je vais le régler sur trois rem en haut et en bas et deux RAM sur les côtés droit et gauche. La deuxième section semble bonne. Passons à autre chose et personnalisons la section contact. La seule chose que je vais faire est de modifier la hauteur de cette section. Mettons la hauteur de la fenêtre d' affichage à 80. Je pense donc que c'est au point d'arrêt. Le prochain sera de 800 pixels. Allons-y et créons une nouvelle requête multimédia CSS. Spécifiez la largeur maximale comme étant de 800 pixels. Sur ce point d'arrêt, je vais réduire la taille du titre de la page de destination Et je vais également réduire la largeur des barres de progression. Allons-y et sélectionnons le titre de la section 1. Définissez la taille de police 2 pour la RAM. Sélectionnez ensuite la barre de progression et faites courir sa largeur de 50. Toutes les autres sections semblent donc bonnes et nous devons passer au point d'arrêt suivant Le prochain point d'arrêt sera de 600 pixels. Nous allons donc créer une nouvelle requête multimédia CSS et spécifier la largeur maximale. Faites-le 600 pixels. Allons-y et réduisons la taille de la rubrique sur le prêt. Sélectionnez le titre de la section 1 et définissez sa taille de police sur trois rampes. Ensuite, nous devons personnaliser la barre de navigation. Nous allons donc sélectionner la marge définie par Number Link. Je vais le mettre à zéro en haut et en bas et à deux rem sur les côtés gauche et droit. Modifiez également la taille de la police, faites-en sorte qu'elle s'exécute à 1,5. Sud de l'Alberta. Ça a l'air bien. Passons à la section pour la sélectionner et plaçons le rembourrage sur les quatre côtés pour qu' il fasse demi-tour Je vais sélectionner le titre de la section 2. Ce chiffre a diminué. Marge en bas. Fais demi-tour. Ensuite, je vais réduire la largeur de la barre de progression. Passons à 45 rem. Ensuite, je vais définir la largeur de l'image du projet à 200 %. Diminuez également la largeur des éléments du formulaire. Réglez la largeur sur 40 RAM. Enfin, je vais réduire la largeur du texte du copyright. Portons-en 70 %. Très bien, donc tout semble bon au point d'arrêt. Passons à autre chose et commençons à travailler sur le suivant, qui sera de 500 pixels. En fait, au point d'arrêt, je vais maintenant réduire la taille de police du code HTML à 62,5 %. Et je vais le porter à 55 %. D'accord, nous n'avons donc rien à faire d'autre sur 500 pixels. Passons au point d'arrêt suivant, qui sera le dernier Créons un nouveau média CSS et définissons la largeur maximale à 450 pixels. Je vais à nouveau diminuer la taille de la police du code HTML. Portons-le à 45 %. Diminuez ensuite la taille du titre de cette section. Je vais en faire 2,5 RAM. Après cela, je vais réduire l'espace entre les liens de la barre de navigation Sélectionnons maintenant le lien frère et réglons la marge à zéro en haut et en bas et 1,5 rem sur les côtés droit et gauche. OK, maintenant alignons le titre de cette deuxième section vCenter Utilisez le centre d'alignement du texte et réduisez également la largeur de la barre de progression. Fais-le pour courir. Très bien, donc je pense que nous terminé parce que tout va bien On peut donc dire que notre projet est réactif à différents sites. Nous avons fini de travailler sur notre projet. Enfin, je vais me débarrasser de ces commentaires à partir d'ici. Très bien, le projet est donc terminé. J'espère que c'était intéressant et utile et que vous apprendrez de nouvelles choses. Nous pouvons maintenant poursuivre et construire le prochain projet. 55. Projet 6 - Aperçu du projet: Très bien, il est donc temps de commencer à créer notre prochain projet Il s'agira de quelque chose comme les voitures classiques. Dans cette vidéo, je vais passer en revue le projet et vous montrer de quoi il s'agit. Le projet comprend deux sections. La première section est simple. Nous avons ici juste le titre et l'image de la voiture. Ensuite, nous avons une section intitulée Cours populaire, qui comprend trois cartes différentes du cours populaire. Les cartes ont un léger effet de survol. Ensuite vient la galerie vidéo. Nous avons ici deux rangées de vidéos. Par défaut, ils ne jouent pas, mais une fois que nous les survolons, ils commencent à jouer Très bien, donc après la galerie vidéo, nous aurons une galerie d'images ce sera une section intéressante Comme vous pouvez le constater, nous avons ici deux étagères différentes avec trois images sur chacune d'elles. Les images ont de jolis effets de survol. Dans cette section, vous allez découvrir comment créer des éléments 3D à l'aide du CSS. Vient ensuite la section contact avec quelques champs de saisie et le bouton d'envoi. Et en bas, nous avons le paragraphe avec un texte de copyright. D'accord, ce sont donc les cinq sections de ce projet. En plus de cela, vous voyez ici l'icône du menu fixe. Si je clique dessus, les lignes se transformeront en x. Le nombre s'affichera. Ces actions pivoteront correctement dans l'environnement 3D. Si je clique sur les différents liens de navigation, nous naviguerons vers les sections appropriées avec un effet fluide. Hein ? C'est donc le projet que nous allons construire tout au long de cette section. En outre, le projet s'adapte à différentes tailles d'écran. Si j'inspecte la page, passe en mode réactif et que je vérifie le projet, vous constaterez qu'il est réactif et qu'il s'affiche bien sur différentes tailles d'écran. OK, comme les projets précédents, je tiens à vous rappeler une chose, le projet est construit en utilisant une approche axée sur le bureau. Il est conçu pour une très grande taille d'écran. Taille d'écran avec 1920 pixels de largeur et 1080 pixels de hauteur. Donc, si vous utilisez une taille d'écran relativement petite et que le projet risque de ne pas s' afficher correctement pendant les cours. Mais vous n'avez pas à vous inquiéter à la fin de la journée, nous ferons en sorte qu'il soit réactif. En attendant, vous pouvez utiliser le mode réactif, spécifier la largeur et la hauteur de l'écran extra large et suivre le projet 56. Projet 6 - Créer un balisage HTML pour l'atterrissage et définir les styles communs: Très bien, donc une fois que nous serons prêts à commencer à créer les projets, je vais commencer par créer le balisage HTML de la navigation et des cinq sections Je veux dire, seuls les éléments de cette section permettront de faire fonctionner l'argent. Ensuite, nous personnaliserons cette section eux-mêmes. Allons-y et ouvrons notre dossier de travail dans VS Code. Comme vous le voyez, nous avons ici juste un dossier pour les images. Créons trois fichiers différents pour HTML, CSS et JavaScript. Je vais les appeler index.html, style.css et script.js. Accédez ensuite au fichier index.html et créez tout d'abord un document HTML de base. Pour cela, je vais utiliser l'un des packages appelé Emmet, qui est un package intégré dans le code VS Je vais placer ici un point d'exclamation. Et après avoir appuyé sur Entrée ou sur la touche Tab, il générera les balises HTML de base. Allons-y et changeons le titre. Je vais insérer ici des voitures classiques. Ensuite, je vais lier les fichiers CSS et JavaScript. Ouvrons donc la balise link et indiquons ici le chemin du fichier style.css. En ce qui concerne le fichier JavaScript, je vais ouvrir une balise de script juste au-dessus de la balise body de fermeture. Ensuite, je vais spécifier le chemin du fichier et l'attribut source. Très bien, allons-y et ouvrons le projet dans le navigateur. Pour cela, je vais utiliser l'un des packages de code VS appelé serveur live. Cela nous permet d'exécuter le projet dans le navigateur et d' effectuer des mises à jour et des modifications sans actualiser la page à chaque fois. Je vais donc venir installer et utiliser ce package. OK, Enfin, jouons à l'éditeur et au navigateur, comme ça. Et lancez-vous. Comme nous l' avons dit, nous allons créer la navigation et les cinq sections. Commençons par l'icône du menu. Je vais insérer votre menu de commentaires , puis la fin du menu. Ouvrez ensuite la balise div, qui comportera deux classes différentes Le premier sera le menu. Asphalt est un nom de seconde classe. Je vais insérer votre cible. Nous allons utiliser cette classe et le fichier JavaScript. L'icône du menu sera donc composée de deux lignes différentes. Ouvrons la balise div avec deux classes, la ligne de menu, qui sera le nom de classe courant Et puis, quand ma nouvelle ligne sera consacrée au style individuel, dupliquons cette ligne de code et changeons le nom de la classe. Nous avons également besoin d'une ligne de menu ici. OK, donc pour le moment, l'icône du menu n'est pas visible car nous n'avons ici que les éléments div vides Passons à autre chose et créons la barre de navigation. Nous allons insérer vos commentaires. Barre de navigation. Puis fin de la barre de navigation. Ouvrez ensuite l'élément de navigation HTML5 avec la barre de navigation des classes, puis utilisez à nouveau les cibles de classe. Dans l'ensemble, nous aurons donc cinq éléments de navigation différents. Ouvrons la balise link avec le lien de la barre de navigation de la classe. Insérez ensuite Q home. Je vais dupliquer l'élément du lien quatre fois, puis modifier le contenu. Le deuxième élément sera celui des voitures populaires. Ensuite, nous aurons une galerie de vidéos, puis une galerie d'images. Pour ce qui est du dernier point, ce sera le contact. Très bien, c'est tout à propos du numéro que nous avons ici, des éléments de navigation Passons à autre chose et créons les sections. Réinsérons ici les commentaires dans la section 1, puis la fin de la section 1. Chaque section aura donc son emballage. Il s'agit donc d'une balise div ouverte avec le wrapper de classe. Et puis interfère, l' élément de section avec une classe est la section 1, puis la cible D'accord, donc dans l'ensemble, nous aurons cinq sections différentes. Allons-y et dupliquons ce code quatre fois. Et puis modifiez les chiffres. En conséquence. Nous devons modifier les numéros des commentaires ainsi que les noms des classes accord, voyons ce qu'il en est du marché dès maintenant Passons à autre chose et commençons à écrire du CSS. Tout d'abord, je vais créer quelques styles courants et par défaut. Interviewons les commentaires, les styles courants alors, et les styles courants. Ensuite, nous devons sélectionner tous les éléments. Et pour cela, je vais utiliser un astérisque. Ensuite, donnez-lui quelques styles. Tout d'abord, éliminons par défaut, les marges et le rembourrage Je vais les mettre tous les deux à zéro. Supprimons ensuite le contour par défaut de chaque élément en utilisant outline none. De plus, je vais définir la taille de la boîte borderbox. Ensuite, éliminons le soulignement par défaut éléments du lien en utilisant text-decoration Et supprimez également les styles par défaut des éléments de la liste en utilisant le list-style-type Très bien, après cela, je vais définir une famille de polices pour chaque élément de ce projet, nous utiliserons deux polices Google différentes Passons donc au site Web de Google Fonts. Ensuite, je vais chercher une élite spéciale. Sélectionnez ce style unique ici. Ensuite, partons à la recherche de Joséphine Sans. Je vais sélectionner ici quelques styles. Epaisseur des caractères : 400 à 700. Prenez le lien et collez-le dans l'élément principal. Très bien, après cela, je vais définir la famille de polices. Par défaut. Je vais définir la famille de polices sur une police spéciale, coercitive et également définir le poids de la police Portons-en à 400. Très bien, voyons donc que les styles courants et par défaut sont appliqués aux éléments Tout au long de ce projet, nous allons utiliser la RAM comme unité de mesure. heure actuelle, une rampe équivaut à 16 pixels, car par défaut, la taille de police de l'élément HTML est égale à 16 pixels. Je vais convertir un run en dix pixels. Et pour cela, nous devons réduire la taille de police de l'élément HTML, porter à 62,5 %. D'accord, comme vous pouvez le voir, la taille des éléments a diminué. Ensuite, je vais changer la couleur de fond des éléments du corps. Allons-y, sélectionnons cet élément et définissons sa couleur d'arrière-plan, gris clair en utilisant la couleur ccc Très bien, pour l'instant, c'est tout en ce qui concerne les styles courants Ensuite, nous devons prendre soin de l'icône du menu. Et maintenant aussi 57. Projet 6 - Créer et faire fonctionner la navigation: Très bien, donc dans un premier temps, nous allons faire en sorte que le menu fonctionne. Je veux dire, une fois que nous avons cliqué sur l'icône du menu, nous devons afficher la barre de navigation et également faire pivoter ces sections Une fois que nous y serons parvenus, nous donnerons du style à l'ensemble du projet et lui donnerons une belle apparence. Allons-y et insérons les commentaires ici. Nous avons besoin d'un menu. Puis et hors menu. Je vais rendre l'icône du menu visible. Allons-y, sélectionnons-le et définissons sa largeur et sa hauteur, toutes deux en RAM. Et utilisez également entendre une couleur d'arrière-plan temporaire, disons le rouge. Ensuite, prenons soin de sa position. Je vais le réparer. Et définissons également les propriétés supérieure et gauche, toutes deux à exécuter. Très bien, l' icône du menu est donc positionnée. Ensuite, occupons-nous du heurtoir. Je vais insérer ici les nouveaux commentaires, maintenant quatre, puis n de Navarre Alors maintenant, la Corée va être placée sur le côté gauche de la page et cela devrait être corrigé. Allons-y donc et sélectionnons-le. Dans un premier temps, je vais définir sa largeur. Faisons en sorte que la largeur de la fenêtre d'affichage soit de 15. Dans ce cas maintenant, mais nous allons occuper 15 % de la largeur de la fenêtre d'affichage Hauteur. Je vais le faire correspondre à 100 % de la fenêtre d'affichage Mettons-le donc sur h Et changeons également la couleur d'arrière-plan, rendons-le blanc. Après cela, je vais corriger sa position. Et aussi, définissons les propriétés du haut et de la gauche, toutes deux à zéro. Comme vous pouvez le constater, une fois que nous avons corrigé la barre de navigation , l'icône du menu s'est retrouvée derrière elle Cela s'est produit parce que la barre de navigation est placée après l'icône du menu dans le document HTML et qu'elle a donc une priorité plus élevée Allons-y et résolvons ce problème à l'aide de la propriété d'indice Z. Je vais le régler sur une valeur supérieure à zéro, disons dix. L'icône du menu est maintenant visible, mais nous devons changer sa position lorsque le numéro est affiché. L' icône du menu doit donc être placée sur le côté droit de celui-ci. Mettons donc sa position de gauche. 15, largeur de la fenêtre d'affichage. OK, je vais maintenant placer les éléments de navigation, en particulier dans une colonne. Et pour cela, utilisons Flexbox. Nous avons besoin de Display Flex. Ensuite, nous devons modifier la direction de la flexion et la transformer en colonne car le flex d'affichage aligne les éléments sur une ligne Enfin, créons de l'espace à l'intérieur du heurtoir à l' aide d'un rembourrage Je vais régler le rembourrage sur un rem complet haut plutôt que sur zéro sur le côté droit, zéro en bas et sur un rem complet sur le côté gauche Comme vous vous en souvenez, nous avons défini la taille des boîtes, la zone de bordure et les styles courants C'est pourquoi la taille de la barre de navigation n'est pas augmentée. Lorsque vous utilisez un borderbox de la taille d'une boîte avec un rembourrage. Qu'il déplace les éléments à l'intérieur de la boîte sans augmenter la taille de la boîte. Très bien, passons à autre chose et occupons-nous de ces sections. Je vais insérer ici les nouveaux commentaires, styles de section. Et puis fin des styles de section courants. Sélectionnez ensuite le wrapper de cette section. instant, je vais lui attribuer une propriété d'une valeur de cent pour cent. En fait, vous vous demandez peut-être pourquoi nous avons vraiment besoin de cet élément ? En gros, nous allons l'utiliser pour créer un environnement 3D pour les sections. Très bien, allons-y et sélectionnons cet élément de section. Tout d'abord, je vais définir sa largeur et sa hauteur. Je veux régler sa largeur sur la largeur de la fenêtre d'affichage A25, car à l'heure actuelle, nous avons la barre de navigation sur le côté gauche et sa largeur est égale à 15 Je veux les placer côte à côte. Quant à la hauteur, faisons-la correspondre cent pour cent de la fenêtre d'affichage Et changez également la couleur d'arrière-plan. Je vais utiliser ici les sections appelées ou E F, E, F, E F. OK, donc maintenant ces sections se sont retrouvées derrière le Napa Et pour y remédier, nous devons changer leur position. Mettons-le sur relatif. Ensuite, je vais définir la propriété de gauche sur une largeur de 15 fenêtres d'affichage. Maintenant, le problème est résolu. Ensuite, séparons les sections en utilisant la marge Je vais utiliser la marge inférieure avec la valeur trois rampes. Comme vous pouvez le voir, ces sections sont séparées et maintenant, il commence à les faire pivoter et à créer un environnement 3D. Dans un premier temps, utilisons la propriété de transformation avec la fonction de rotation. En fait, nous devons ici faire pivoter y. Parce que nous devons faire pivoter l'élément selon la direction verticale, je veux dire l'axe y. Pour l'instant, cette section a tellement pivoté, mais nous ne voyons aucun effet 3D ici Pour créer un environnement 3D, nous devons donc utiliser l'une de ces propriétés CSS appelée perspective. Nous devons l'attribuer à l'élément parent, qui est un wrapper Réglons-le sur 50 rampes. Ainsi, en général, la propriété de perspective définit la distance entre l'élément l'utilisateur et crée finalement l'environnement 3D. Nous avons maintenant un bien meilleur résultat, mais en fait, ce n'est pas ce que nous voulons. À l'heure actuelle. Ces sections sont pivotées en fonction du centre car, par défaut, l'origine de la transformation est définie sur le centre En fait, nous devons le changer et le laisser de côté. Dans ce cas, les éléments sont pivotés en fonction du côté gauche. C'est pourquoi les sections et le roman sont placés côte à côte Très bien, allons-y et augmentons la largeur de ces sections Faites-le à cent pour cent. Et créez également un effet d'ombre. Utilisez votre ombre de boîte avec une valeur de 0,5 rem. Encore une fois, 0,5 rem, une RAM et la couleur AAA. Avant de commencer à rentabiliser l'argent, je voudrais faire encore une chose. Comme vous pouvez le voir, l'ombre est superposée à la barre de navigation. Et pour résoudre ce problème, je vais utiliser à nouveau la propriété z-index avec une valeur de dix Dans ce cas, le numéro aura priorité la plus élevée et l'ombre se retrouvera derrière lui D'accord ? Voici donc la situation après le clic, l'icône du menu. Par défaut, nous devons masquer la barre de navigation et remettre ces sections en position normale Allons-y et cachons le numéro qui lui est attribué. Largeur de la fenêtre d'affichage gauche de -15. Modifiez ensuite la position de l'icône du menu dont nous avons besoin ici à gauche avec une valeur de deux rem. Ensuite, nous devons modifier la position de cette section. Mettons-le à zéro. Et commentez également cette ligne. Nous sommes donc prêts à programmer l'icône du menu. Mais avant cela, je vais faire encore une chose. Je vais créer de l'espace sur le côté droit à l'intérieur de l'élément de carrosserie. Pour cela, utilisons du rembourrage, non ? Avec une valeur de trois rampes. D'accord ? Les styles que nous venons de modifier doivent donc être appliqués aux éléments une fois que nous avons cliqué sur l'icône du menu. Et ils doivent également être supprimés une fois que nous avons cliqué sur ces sections elles-mêmes. Je vais donc créer ces styles avec une nouvelle classe appelée change. Ensuite, nous ajouterons cette classe en tant qu' éléments et la supprimerons à l'aide de JavaScript. Allons-y et commençons par l'icône du menu. Nous devons sélectionner un menu avec le changement de classe. Comme vous pouvez le voir ici, nous n'avons pas utilisé d'espace entre ces classes car nous devons ajouter cette classe au menu lui-même. Réglons la position gauche à 15 pour la largeur de la fenêtre d'affichage. Ensuite, nous devons modifier la position de la barre de navigation. Alors sélectionnons maintenant bert avec modification et mettons la position de gauche à zéro. En ce qui concerne les sections, nous devons modifier leur position et également les faire pivoter. Nous allons donc sélectionner la section avec un changement de classe. Réglez ensuite la propriété de gauche sur une largeur de 15 et utilisez ici la fonction Transform, Rotate Très bien, donc tout est prêt. Accédez au fichier JavaScript et sélectionnez l'icône du menu. Pour cela, je vais utiliser la méthode de sélection de requêtes. Nous devons spécifier ici la classe du menu. Ensuite, nous devons y attacher un écouteur d'événements. Cette méthode utilise deux arguments. Le premier est le clic. La seconde sera la fonction de rappel, qui sera exécutée une fois que nous aurons cliqué sur l'élément Ainsi, une fois que nous avons cliqué sur l'icône, nous devons ajouter un changement de classe au réseau de menus. Et n'oubliez pas que ces sections ont tous la même cible de classe. Nous allons donc les sélectionner en utilisant cible de classe et ajouter un changement de classe Je vais utiliser ici la méthode all du sélecteur de requêtes Et nous devons spécifier ici la cible de la classe. En fait, le sélecteur de requêtes renvoie toutes les méthodes et un objet semblable à un tableau appelé Nous devons parcourir cette liste et ajouter à chaque élément de la liste un changement de classe. Pour parcourir la liste des nœuds, je vais utiliser l'une des méthodes d' aide au tableau appelées H. Elle prend un paramètre qui sera la fonction de rappel Cette fonction sera exécutée pour chaque élément de la liste. La fonction de rappel prendra un argument et ce sera l'élément actuel de la liste pendant la boucle Nous devons maintenant ajouter à la modification de la classe d'objets. Et pour cela, je vais utiliser l'une des méthodes appelées toggle Dans le cas de la méthode toggle, nous ajoutons une classe à l'élément s'il n'existe pas et nous le supprimons s'il existe Ainsi, au premier clic, l'élément changera de classe et le suivant , il sera supprimé. Nous devons donc utiliser item suivi de la propriété appelée class list, qui stocke toutes les classes de l'élément. Ensuite, lorsque vous changez de méthode. Et nous devons spécifier le changement de classe à l'intérieur de la parenthèse Alors maintenant, si je clique sur l'icône du menu, tout fonctionnera correctement. Afin de rendre cet effet plus agréable, utilisons la transition. Pour l'icône du menu. Nous devons effectuer la transition avec les valeurs restantes, 0,5 s. Ensuite, nous avons également besoin de la même transition pour la barre de navigation Asphalter le tronçon. Nous devons effectuer la transition là où la valeur est laissée, 0,5 s, puis la transformer avec la même durée. D'accord, nous avons maintenant un effet bien meilleur et plus fluide. Très bien, avec l'icône du menu, c'est terminé. Nous devons maintenant fermer le menu. Une fois que nous aurons cliqué sur les sections, nous utiliserons une technique similaire. Dans un premier temps, sélectionnons tous ces wrappers d'action et y attachons des auditeurs d' événements. Nous avons à nouveau besoin du sélecteur de requêtes pour toutes les méthodes. Passez ensuite ici le wrapper de nom de classe. Pour attacher un écouteur d'événements à chaque wrapper, nous devons d'abord les parcourir car, dans le sélecteur de requêtes, toutes les méthodes renvoient une Utilisons à nouveau pour chaque méthode. Transmettez ensuite votre fonction de rappel avec l'élément d'argument. Ensuite, nous devons associer l'écouteur d' événements à l'élément à l' aide de l'événement click et d' une autre fonction de rappel Nous devons maintenant supprimer le changement de classe des trois éléments. En fait, je vais récupérer ce code à partir d'ici puis modifier le basculement pour le supprimer Alors maintenant, si je clique sur l'icône du menu puis que je clique sur le menu de sélection, la clause s'affichera. Tout fonctionne donc parfaitement et avec le menu, nous avons terminé. Ensuite, je vais faire en sorte que ces liens fonctionnent. Je veux dire, une fois que nous avons cliqué dessus, nous devrions accéder aux sections appropriées. Pour cela, nous devons faire plusieurs choses. Dans un premier temps, augmentons la taille des liens sélectionnés. Maintenant, Berlin, définissez sa taille de police sur 1,5 RAM. Et je vais aussi séparer les liens en utilisant la marge. Mettons-le à deux rem en haut et en bas et à zéro sur les côtés gauche et droit. Très bien, passons ensuite au fichier index.html et attribuons à chaque élément de section l'attribut id Ainsi, pour accéder aux sections appropriées, les valeurs des attributs de référence id et h doivent correspondre. Allons-y donc et attribuons-leur ces valeurs similaires à l'aide d'un curseur multiple. Pour le premier article, je vais passer devant ton domicile. Ensuite, pour le deuxième article, nous avons besoin de voitures populaires. Vient ensuite la galerie vidéo. Ensuite, nous aurons une galerie d'images. Enfin, nous avons besoin de contenu. Maintenant, si je clique sur les liens , nous allons accéder à la section appropriée. En un coup d'œil, c'est difficile à remarquer. Mais si vous regardez cette barre de défilement, vous verrez que nous naviguons vers les sections pertinentes Pour rendre cet effet plus fluide, nous pouvons utiliser l'une de ces propriétés CSS appelée comportement de défilement. Et nous devons l'attacher à l'élément HTML avec la valeur small. Alors maintenant, comme vous pouvez le voir, nous naviguons facilement entre les différentes sections 58. Projet 6 - Style et faire fonctionner le menu hamburger: Très bien, donc une fois que nous avons réussi à faire fonctionner la navigation, il est maintenant temps de styliser l'icône du menu ainsi que les éléments de navigation Jetons un coup d'œil au projet terminé. Comme vous pouvez les voir n'importe où. Vous pouvez être composé de deux lignes. Une fois que nous avons cliqué dessus, ils pivotent et se transforment en x. C'est donc ce que nous allons faire maintenant. Nous n'avons ici qu'une boîte rouge. Allons-y et sélectionnons des lignes avec une ligne de menu de classe commune. Dans un premier temps, définissons la largeur et la hauteur. Je vais définir la largeur de la présentation. Pour ce qui est de la hauteur, faisons-en un point de rampe. Modifiez également la couleur d'arrière-plan. Faites-le blanc. Ensuite, je vais créer de l'espace en haut et en bas des lignes en utilisant la marge. Mettons-le à 0,3 rem et à zéro. Ensuite, créez un effet d'ombre en utilisant Box Shadow dont la valeur est 0,1, 0,1 RAM plutôt que 0,3 rampe. Et la couleur aussi. OK, nous avons donc les lignes. Ensuite, je vais aligner ces lignes. Et pour cela, je souhaite utiliser Flexbox. Définissons la propriété d'affichage sur flex. Changez également de direction. Créons une colonne dans laquelle pour placer les lignes au centre du menu, utilisons la justification du centre de contenu et alignons les éléments au centre. OK, comme vous pouvez le voir, les lignes sont alignées et il est temps de supprimer ce fond rouge et modifier le type du pointeur du parcours. Comme nous l'avons dit, nous allons faire pivoter ces lignes pour en faire un X. Et cela devrait se produire une fois que nous aurons cliqué sur l'icône, ajouté une forêt, transformons les vies et en x, sélectionnons. La première ligne se trouve dans la première ligne du menu de la classe. En fait, nous allons transformer les lignes en croix, puis nous allons faire pivoter le menu lui-même. Utilisons donc Transform avec la fonction de rotation. Je vais faire pivoter la première ligne de 270 degrés. Dupliquons ce code. Changez le nom de la classe. En ce qui concerne la valeur, je vais faire pivoter cette deuxième ligne de 360 degrés. Donc, pour l'instant, nous n'avons pas ici la croix parfaite. Et pour y remédier, bougeons un peu les lignes. Je vais le faire en utilisant la fonction de traduction, qui nous permet en fait de déplacer l'élément à la fois verticalement et horizontalement selon les axes x et y. Donc, dans le cas de la première ligne, nous devons traduire X avec la valeur moins le point pour la RAM. En ce qui concerne la deuxième ligne, nous avons besoin de Translate Y avec une valeur moins un point pour la RAM. Nous avons donc ici le x parfait. Et enfin, nous devons faire pivoter l'icône du menu elle-même. Utilisons donc à nouveau la transformation, où ils font pivoter la fonction comme valeur. Passons ici à 45 degrés. Très bien, nous avons finalement transformé les lignes en x. Mais cela devrait se produire une fois que nous aurons cliqué sur l'icône Pour cela, encore une fois, je vais utiliser le changement de classe, qui est ajouté à l'élément OnClick à l'aide de JavaScript Ajoutons la classe modifiée aux deux lignes. Dans ce cas, nous avons de l'espace entre les classes car les lignes sont les enfants du menu. Enfin, récupérons cette ligne de code et collez-la. Si je clique sur l'icône, nous obtiendrons un x. Très bien, pour rendre cet effet plus fluide, utilisons la transition avec transformation et 0,5 s. Pour ce qui est du menu, nous avons déjà ici la transition, nous avons déjà ici la transition, mais où se trouve la propriété de gauche Je vais donc le changer et tout créer. Très bien, avec le menu, c'est terminé. Allons-y et personnalisons ces liens. Nous avons tous les sélectionnés. Maintenant par lien. Ajoutons ici quelques styles. Nous avons besoin d'une épaisseur de police d'une valeur de 600. Changez également la couleur, mettez-la en 777. Ensuite, je vais créer un espace entre les lettres en utilisant un espacement latéral, 0,3 RAM, puis transformer le texte en majuscules Comme vous pouvez le constater, les liens sont personnalisés. Enfin, je vais créer un petit effet de survol. Je vais changer la couleur en survolant. Allons-y et sélectionnons, maintenant je vais créer un lien avec le pointeur de la souris, changer de couleur, passer à 111 Et utilisez également la transition pour un effet fluide avec la valeur de couleur et le point de durée. Très bien, donc dans la navigation, nous avons terminé et il est maintenant temps de personnaliser les sections 59. Projet 6 - Créer et personnaliser la page d'atterrissage: Je vais commencer par la première section. Jetons un coup d'œil au projet terminé. Comme vous pouvez le constater, la première section va être assez simple. Nous aurons un fond sombre et deux éléments différents, le titre et l'image. Allons-y et créons le balisage HTML. heure actuelle, nous avons ici le wrapper et juste l'élément de section vide Insérons donc votre élément de titre H1. Il doit comporter deux classes différentes. Le premier sera intitulé « Paul ». Le second sera le titre de la section 1 en tant que contenu. Insérons ici des voitures classiques. Ensuite, je vais insérer ici l'image. Sélectionnons l'image le dossier des images qui sera la section 1. Adhérons également que la valeur de l'attribut de classe est l'image de la section 1. Voilà pour le balisage HTML. Passons au fichier style.css et insérons de nouveaux commentaires, section 1. Et la première section. En fait, les cinq sections auront des titres similaires Sur le premier, nous aurons quelques styles individuels supplémentaires. Je pense donc qu'au lieu d'écrire les mêmes styles encore et encore, il serait préférable de créer des styles communs. Utilisons la classe, le titre de section et appliquons quelques styles. Je vais augmenter la taille de la police. Faisons-en dix RAM. Rendez ensuite l'épaisseur de police plus audacieuse. Changez également la couleur, rendez-la blanche. Ensuite, je vais ajouter de l'espace en bas des éléments en utilisant la marge inférieure. Dix rampes. Créez également un espace entre les lettres en utilisant l' espacement des lettres. Une rampe. Alignons le texte au centre. Enfin, utilisez une ombre de texte dont la valeur est 0,3, 0,3 autour de 0,5 rampe pour l'appelant 555. Très bien, après cela, je vais aligner ces deux éléments et m' occuper de l'arrière-plan Allons-y et sélectionnons l'élément de section avec la première section de classe. Pour aligner les éléments au centre de cette section, je vais à nouveau utiliser des livres de flux. En fait, nous devons utiliser des propriétés et des valeurs similaires à celles que nous avons utilisées dans le cas du menu. Donc, afin d'éviter d'écrire les mêmes styles Flexbox ici, je vais créer une nouvelle classe et les styles courants, appelons-la centre et lui attribuer la flexibilité d'affichage plutôt que de justifier le centre de contenu et d'aligner les éléments au centre Ensuite, je vais ajouter cette classe au menu. Et la section 1 également. Débarrassez-vous également de ces trois lignes. Viens ici et ne laisse que la colonne de direction de flexion. En plus de cela, nous devons également fléchir la colonne de direction pour la première section. Très bien, les éléments sont donc alignés et je vais maintenant m' occuper de l'arrière-plan Précisons ici l'URL. Je vais sélectionner la section BG à un point JPG dans le dossier des images. En plus de cela, ajoutons ici le centre et je vais répéter. Et définissez également la taille de l' arrière-plan. Faites-en une couverture qui tient compte de l'arrière-plan et en fait de cet élément de section. Allons-y et ajoutons quelques étoiles au titre sélectionné. Utilisons ici la section 1. Titre de la section 1. J'ai utilisé ici la section 1. Et si je ne l'avais pas fait, Dan, cette tâche ne serait pas appliquée car nous avons tous déjà créé des styles communs pour les titres de section Dans ce cas, certains des styles définis seront remplacés Ajoutons donc ici marge en bas avec une valeur de trois RAM. Transformez ensuite le texte en majuscules. Et utilisez également l'ombre du texte avec les valeurs une RAM, trois fois. Et la couleur noire. En fait, je vais ajouter ici des ombres supplémentaires, ce qui finira par créer un effet d'ombre à plusieurs niveaux Essayons donc de courir trois fois. Et la couleur 111. Ensuite, je vais ajouter trois rem, encore trois fois avec une couleur à deux. Comme vous pouvez le voir, nous avons ici un bel effet d'ombre. Enfin, je vais définir la largeur de l'image sélectionnée et définir sa largeur à sept pour cent. J'avais l'habitude d'entendre la valeur en pourcentage car elle permet à l'image de s'adapter à différentes tailles d'écran. Très bien, voyons voir en ce qui concerne la première section, passons à la suivante 60. Projet 6 - Créer et personnaliser la section voitures populaires: La section suivante sera consacrée aux voitures populaires. Allons-y et jetons un coup d'œil au projet terminé. Dans cette section, nous aurons donc un titre et trois cartes différentes. Chaque carte comprendra l'image, voiture, le nom, le prix et le bouton. Allons-y et créons le balisage HTML. Je vais commencer par un titre. Ouvrons les éléments de titre H1 avec le titre de la section de classe et avec le contenu Voitures populaires. Insérons ici div, qui va être l' enveloppe des cartes Ensuite, je vais créer la carte elle-même. Ouvrons donc la balise div avec la carte de classe. Je vais vous insérer quelques éléments. Le premier sera un élément de titre H2 avec le nom de la classe Car comme contenu Je vais mettre ici juste du carbonate. Ensuite, nous aurons une image. Sélectionnez car one dot JPEG dans le dossier des images. Et je vais également attribuer à la classe d'éléments d'image appelée IMG. Ensuite, nous aurons l'élément de titre h3, qui sera le prix de la voiture Mettons ici 200 000. Enfin, je vais créer un bouton avec le bouton type avec une classe appelée btn. Vous permet également d'en voir plus. Très bien, c' est donc notre première carte. Au total, nous en aurons trois. Allons-y donc, dupliquons-le deux fois , puis apportons quelques modifications. La deuxième image va être appelée au format JPG. Modifiez également le prix. Ensuite, nous aurons la troisième voiture. Et le prix va être de 150 000$. Très bien, c'est tout pour le balisage HTML. Allons-y et stylisons cette deuxième section. Insérons ici un nouveau commentaire, section deux et section deux. Sélectionnez ensuite l'élément de section. En fait, je vais aligner les éléments à l'aide de Flexbox, mais avant cela, plaçons les cartes côte à côte Pour cela, je vais l'affecter au centre de classe Carts Wrapper, que nous avons déjà défini précédemment Ensuite, faisons de cet élément de section un conteneur flexible à l'aide de Display Flex. Ensuite, nous devons changer de direction. Mettons-le en colonne. Enfin, créons un espace autour des éléments flexibles en utilisant le contenu de justification en fonction du rythme des valeurs. Très bien, cela est dit à propos des éléments de cette section. Passons à autre chose et personnalisons le flic. Je vais régler sa largeur à 50 rampes. En fait, avant d'ajouter d'autres styles à la voiture, définissons la largeur de l'image. Sélectionnons-le et ajustons sa largeur à 100 %. Dans ce cas, l'image occupera 100 % de la largeur de son élément parent, qui est le COD. Bien, passons à autre chose et ajoutons d' autres styles à la carte. Je vais créer de l'espace sur les côtés gauche et droit en utilisant une marge avec une valeur de 0,3 rampe. Changez également la couleur d'arrière-plan, rendez-la blanche. Ensuite, je vais régler le rembourrage sur une RAM sur les quatre côtés. Enfin, créons une ombre en utilisant box-shadow avec les valeurs 0,6 RAM trois fois, puis la couleur BBB Ensuite, je vais créer un effet de survol. Je veux changer l' ombre pendant le survol. Allons-y et sélectionnons la carte avec le pointeur de la souris. Ensuite, j'ai défini l'ombre de la boîte, où les valeurs sont 0,8 RAM trois fois et la couleur BBB Et utilisons également la transition. Nous avons besoin ici de box shadow, dont la durée est de 0,5 s. OK, donc c'est tout pour la carte Passons à autre chose et personnalisons les éléments du titre, qui est le nom actuel Sélectionnons-le et changeons la taille de la police, mettons-le en RAM. Ensuite, je vais régler le poids de la police à 600. Transformez également le texte en majuscules. Changez ensuite la couleur et faites-la blanche. heure actuelle, le titre n'est plus visible car il est de couleur blanche. Je vais le placer un peu plus bas. Allons-y donc et définissons sa position sur absolue. Ensuite, afin de le positionner en fonction de son élément parent, qui est la carte, nous devons définir cette position sur relative. Définissez ensuite les propriétés du haut et de la gauche du titre. Je vais les faire courir tous les deux. De plus, afin que le nom de la voiture figure toujours en haut de l'image, je vais utiliser la propriété z-index avec une valeur relativement plus élevée, disons dix Très bien, maintenant le titre est visible. Ensuite, je vais créer un effet de survol. Je souhaite augmenter l'opacité de l'image lorsque vous survolez l'image. Dans un premier temps, mettons-le sur, disons, 0,8. Sélectionnez ensuite la carte avec le pointeur de la souris. Elle sera suivie de l'image de la voiture. Ensuite, réglez l'opacité sur un. De plus, je vais utiliser transition avec les valeurs opacité et 0,5 s. D'accord ? L'effet de survol fonctionne donc bien. Passons à autre chose et personnalisons le prix. Sélectionnons cet élément et, dans un premier temps, changeons la taille de la police, faites-en 1,8 RAM. Ensuite, je vais régler la couleur sur 777. Et crée également de l'espace en haut et en bas à l' aide d'une marge avec les valeurs point fibrine et zéro OK, donc le dernier élément dont nous avons besoin pour styliser va être le bouton. Sélectionnons-le. Au début. Je vais régler sa largeur à 100 %. Changez ensuite la couleur d'arrière-plan, rendez-la blanche. De plus, je vais définir la taille de la police sur 1,7 rem. Créez ensuite un espace entre les lettres. Rendons le texte à 0,3 arrondi, puis transformons le texte en majuscules OK, donc le bouton a l'air bien, mais nous devons y ajouter quelques styles supplémentaires. Supprimons la bordure par défaut. N'utiliser aucune bordure. Ensuite, je vais créer un espace en haut du bouton en utilisant la marge, le haut, un rang. Ensuite, créons de l'espace à l'intérieur du bouton à l' aide d'un rembourrage Je vais le régler sur 0,5 rem, puis changer la couleur, le rendre blanc. Enfin, je vais créer des effets d'ombre. Dans un premier temps, utilisons l'ombre du texte, où la valeur est 0,1, 0,1 rampe, puis point, nous avons utilisé la couleur noire. Ensuite, je vais utiliser Box Shadow avec les valeurs 0,1, 0,1 run, puis pointer de la fibrine et la couleur BB Enfin, changeons le titre du cours ou mettons-le en évidence. Très bien, avec le bouton, nous avons terminé. Et en fait, c'est tout pour cette section. Il est stylé et joli. Allons-y et passons à la section suivante. 61. Projet 6 - Créer et styliser la galerie vidéo: La section suivante sera la galerie de vidéos. Nous avons ici un titre de section et six vidéos différentes. Par défaut, ils sont publiés et une fois que nous les survolons , ils seront joués Très bien, allons-y et, comme d'habitude, créons le balisage HTML Je vais commencer par le titre de la section. Ouvrons l'élément de titre H1 avec un titre de section de classe Et comme il le prévoit, insérez ici la galerie vidéo Ensuite, ouvrons les développements. Ce sera l' emballage des vidéos. Dans l'ensemble, nous aurons deux de ces enveloppes et chacune d' elles comprendra trois vidéos Ouvrons la balise vidéo avec une classe vidéo et spécifions le chemin du fichier. Nous avons la vidéo intitulée voiture, vidéo 1 dans le dossier Images. En plus de cela, je vais utiliser deux attributs différents. Le premier va être désactivé. Cela désactivera le son de la vidéo. Pour ce qui est du second, ce sera la boucle. Cela nous permet de lire la vidéo à l'infini. Et en plus de cela, nous pouvons utiliser un autre attribut appelé contrôles. Définissons également la largeur de la vidéo. Faites-le 500 pixels. Nous avons donc ici une vidéo avec des commandes. Comme vous le voyez, ce son est celui de Mildred, et il est joué encore et encore à cause de cet attribut. OK, en fait, je vais me débarrasser des commandes. Je ne vais pas les utiliser. Utilisons simplement Hear, Muet et Loop. Nous aurons trois vidéos dans cet emballage. Dupliquons-le deux fois et changeons les noms des vidéos. Nous avons besoin ici de 2.3. Ensuite, je vais dupliquer le wrapper lui-même et changer à nouveau les noms des vidéos Nous avons besoin ici de 45,6. Très bien, le balisage HTML est prêt dès maintenant Tout est foiré ici parce que les vidéos sont de haute qualité et trop volumineuses. Allons-y et personnalisons cette section. Insérons vos nouveaux commentaires, section 3. Et la troisième section. Avant de commencer à personnaliser cette section, réduisons d'abord la taille des vidéos. Allons-y, sélectionnons-les et réglons la largeur à 25 %. D'accord, maintenant les vidéos sont plus petites et vous pouvez personnaliser l'élément de section. Sélectionnons-le. Je vais en faire un conteneur flexible en utilisant des drapeaux d'affichage. Ensuite, nous devons changer de direction. Faisons-en une colonne. Également. Je vais créer un espace autour des éléments flexibles. Utilisons l'espace de contenu de justification autour. Et changez également la couleur d'arrière-plan, faites-la gris foncé en utilisant deux. C'est tout pour cet élément de section. Ensuite, je vais aligner les vidéos que je souhaite réutiliser, Flexbox. Passons donc au fichier HTML et attribuons-le centre de classe du wrapper de vidéos D'accord, comme vous pouvez le voir sur les vidéos, elles sont alignées, mais nous devons y ajouter quelques styles. Tout d'abord, créons de l' espace sur les côtés gauche et droit des vidéos en utilisant une marge dont les valeurs sont nulles. Et pour exécuter, je vais arrondir les coins des vidéos en utilisant border-radius avec la valeur 0,5 rem Diminons également légèrement l'opacité . Mettons-le à 0,8. Enfin, je vais créer un petit effet d'ombre en utilisant Box Shadow avec les valeurs 0,3, 0,3 rem. La suivante sera 0,5 RAM et la couleur 111. Très bien, nous avons presque terminé. Il suffit de créer des effets de survol. Et nous devons également lire les vidéos en survolant. Pour cela, nous allons utiliser un peu de JavaScript. Dans un premier temps, augmentons l'opacité et changeons l'ombre lors du survol. Sélectionnons la vidéo avec la pseudo-classe de survol qui augmente l'opacité, faisons-en Et modifiez également l'ombre de la boîte. Je vais insérer les valeurs comme 0,5, 0,5 RAM par rapport à une RAM, et la couleur, une par une Et utilisez également la transition. La valeur est de 0,5 s. Très bien, comme vous pouvez le voir, les effets de survol fonctionnent correctement, et il est maintenant temps de lire les vidéos en Allons-y et passons au fichier JavaScript. Et dans un premier temps, sélectionnez toutes les vidéos. Je vais créer une nouvelle variable, appelons-la les vidéos, puis sélectionner toutes les vidéos en utilisant la méthode du sélecteur de requête Nous devons spécifier ici la vidéo du cours. Ainsi, pour lire les vidéos en survolant, nous devons utiliser les événements de passage de la souris et de sortie de la souris Et la méthode s'appelle Play and Pulse. Avant cela, nous devons parcourir les vidéos et y associer Event Listener Je vais donc utiliser l'une des méthodes d' aide au tableau appelées for-each Il doit prendre un paramètre. Ce sera la fonction de rappel. Nous devons passer un argument qui sera la vidéo en cours pendant la boucle. Ensuite, nous devons nous connecter à l'écouteur d'événements vidéo. Insérez votre souris sur l'événement. Et passez également ici la fonction de rappel, qui devrait être exécutée une fois que nous survolons la vidéo Maintenant, pour lire la vidéo, nous devons utiliser l'une des méthodes des API vidéo HTML5 appelée play Alors maintenant, si je passe la souris sur la vidéo, elle va jouer. Mais une fois la souris sortie, elle continuera à jouer. En fait, nous n'en avons pas besoin. Nous devons mettre la vidéo en pause une fois que nous aurons parcouru la distance. Nous devons donc utiliser un autre événement appelé miles out. Attachons-nous à l'écouteur vidéo de l'événement avec des kilomètres à parcourir. Ensuite, utilisez une méthode appelée pulsation. OK, alors maintenant tout fonctionne bien. Et en fait, avec cette section, nous en avons terminé. Allons-y et passons à la suivante. 62. Projet 6 - Créer et styliser la galerie d'images: Très bien, il est donc temps de créer la section suivante, qui sera la galerie d'images Cette galerie va être un peu différente et intéressante. Un. Nous aurons deux étagères, chacune avec trois photos différentes des voitures. Dans cette section, vous allez découvrir comment créer des éléments 3D à l'aide du CSS. Allons-y et créons le balisage HTML. Je vais commencer par le titre de la section. Ouvrons l'élément de titre H1 avec le titre de la section de classe avec la galerie d'images de contenu Ensuite, je vais ouvrir une balise div, qui sera l' enveloppe de la galerie Il est affecté à la galerie de classe. Au total, nous aurons donc deux rappeurs, comme ce n'était pas le cas dans la section précédente Chacun d'eux encodera l'étagère et trois images. Allons-y et ouvrons une balise div, qui sera l'étagère que je vais attribuer à l'étagère de la galerie de classes Il doit s'agir de l'élément vide. La coque va donc être suivie des images. Ouvrons la balise d'image et spécifiez ici la partie de l'image. Nous avons besoin. Galerie de voitures en format JPG à partir d'un point du dossier d'images. Et je vais également attribuer à l'attribut de classe d'élément image une galerie de valeurs IMG one. Dupliquons-le deux fois et changeons les noms des images ainsi que les noms des classes. Nous devons en ajouter trois. Ensuite, je vais dupliquer la galerie elle-même. Ensuite, je vais à nouveau changer les noms des images. En ce qui concerne les noms des classes, nous devons les laisser tels quels. Très bien, c'est tout en ce qui concerne le balisage HTML, allons-y et commençons à personnaliser cette section Dans un premier temps, je vais placer les images côte à côte dans une rangée Pour cela, utilisons Flexbox. Je vais attribuer un cours aux deux galeries. Très bien, allons-y et insérons de nouveaux commentaires dans le fichier CSS Ce sera une section pour eux. Et hors section 4. Sélectionnez ensuite l'élément de section. Je vais en faire un conteneur flexible en utilisant Display Flex. Je vais également placer les éléments dans la colonne. Allons-y et changeons la colonne de direction de flexion. Je vais également créer un espace entre les éléments en utilisant la fonction de justification de l' espace entre les éléments. La prochaine chose que je veux faire est de réduire la taille des images car elles sont trop grandes pour le moment. Allons-y, sélectionnons-les et définissons-les avec deux 15 %. Maintenant, c'est beaucoup mieux. Passons à autre chose et sélectionnons Galerie. Je veux créer de l'espace en haut et en bas. Faisons-le en utilisant la marge. Je vais le régler à dix rem en haut et en bas et à zéro sur les côtés gauche et droit. Très bien, il est maintenant temps de créer l'étagère et je pense qu'il serait préférable de masquer les images pendant un certain temps. Utilisons donc votre écran. Aucune. Sélectionnez ensuite l'étagère. Tout d'abord, je vais définir sa largeur et sa hauteur. Mettons-nous à 280 %. Pour ce qui est de la hauteur, je vais en faire une rampe 3D. Définissez ensuite la couleur d'arrière-plan. Je vais utiliser ici la valeur RGBA. Insérons ici 38126199 et l'opacité 0,8. Enfin, pour placer l'étagère au centre de cette section, utilisons la marge, la valeur R0 Très bien, c'est donc la partie avant de l'étagère. Pour le reste de la pièce, nous allons la créer à l'aide d'un pseudo-élément before. Allons-y et sélectionnons étagère Galerie avec le pseudo élément avant. Tout d'abord, rendons la colonne vide. Ensuite, je vais définir sa position sur absolue. Et pour positionner cet élément en fonction de son parent, qui est l'étagère de la galerie, nous devons l'attribuer à la position parent relative. Ensuite, ajoutons quelques étoiles avant le pseudo-élément, je vais définir sa largeur et sa hauteur. Donnons la largeur à cent pour cent. Pour ce qui est de la hauteur, je vais la régler sur dix rampes. Et changez également la couleur d'arrière-plan. Je vais utiliser ici la couleur avec la valeur RGBA. Insérons ici 34152248 et l'opacité 0,7. D'accord ? Donc, pour le moment, il n'est pas correctement positionné. Je vais le déplacer vers le haut Définissons donc la première position. En fait, nous devons le placer en haut de la partie avant. Sa hauteur est égale à dix rampes. Nous avons donc besoin ici propriété supérieure avec la valeur moins dix répétitions. Hein ? Après cela, nous devons faire pivoter pseudo-élément horizontalement selon l'axe X. Je vais donc utiliser la propriété Transform avec la fonction rotate x. Et je vais mettre 20 degrés ici. L'élément est donc pivoté, mais ce n'est pas ce que nous voulons Le problème est que par défaut, l'élément est pivoté en fonction de son centre Je veux dire que l'origine de la transformation est centrée et que nous devons la modifier et la transformer en bouton. Utilisons donc Transform Origin et faisons-le acheter. Le problème est maintenant résolu et l'élément est correctement pivoté. La seule chose à faire était de créer un environnement 3D et de faire en sorte que ces étagères ressemblent à de vraies étagères. Pour créer un environnement 3D, comme vous le savez déjà, nous devons utiliser une propriété appelée perspective. Réglons-le sur dix runs. Très bien, comme vous pouvez le voir, nous avons maintenant un bien meilleur résultat avec un cri Nous avons presque terminé. La seule chose que je souhaite faire est de créer un effet d'ombre. Allons-y et utilisons l' ombre de la boîte avec les valeurs suivantes : un run, une rampe, de la fibrine et la couleur pour quatre Très bien, enfin, avec l'étagère, nous en avons terminé. Allons-y et affichons à nouveau les images. Débarrassons-nous de n'afficher aucun. Comme vous pouvez le voir en ce moment, la mise en page est foirée, alors nous allons nous en occuper Je vais définir la position sur Absolue. À présent, les images sont placées l'une derrière l'autre. Dans un premier temps, déplacons-les vers le haut et placons-les sur les étagères. Je vais définir la position inférieure où la valeur est de six RAM. Ensuite, je vais sélectionner chaque image séparément et définir la position de gauche. Allons-y et commençons par la galerie IMG one. Je vais régler sa position gauche à 50 %. Alors allons-y et dupliquons ce code deux fois. Changeons le nom de la classe. Nous avons besoin de calories img2. En ce qui concerne la position de leader, nous allons utiliser ici 30 %. Pour ce qui est de la troisième image, positionnons-la à gauche à sept pour cent. Nous voyons maintenant toutes les images, mais elles ne sont pas positionnées correctement. Pour résoudre ce problème, je vais les déplacer vers la gauche. Et pour cela, utilisons Transform avec la fonction Translate X, qui place la plupart des éléments horizontalement. Je vais mettre ici -50 %. Et en plus de cela, je veux faire pivoter l'image horizontalement, je veux dire, selon l'axe X. Utilisons donc Rotate X avec la valeur 0,5 degré. En plus de cela, créons un petit effet d'ombre et arrondissons les images. Utilisons l'ombre de la boîte avec des dévaluations d'un point à l'autre. Ensuite, je vais utiliser un point de valeur négative pour la RAM afin de changer la direction de l'ombre. Ensuite, on va utiliser 0,5 comme couleur. Utilisons 888. Et aussi, arrondissons l'image à l' aide du rayon de bordure avec une valeur de 0,5 run. Très bien, donc la dernière chose à faire est de créer un effet de survol Une fois que nous avons survolé les images, nous devons les faire pivoter pour revenir à leur position normale Et nous devons également changer l'ombre. Allons-y et sélectionnons l'image de la galerie avec la pseudo-classe hover plutôt que d'utiliser Transform En fait, nous devons à nouveau utiliser la fonction Translate car si nous la manquons, la position des images changera. Nous devons donc traduire x par -50 %. Ensuite, nous devons faire pivoter la fonction x jusqu'à la valeur zéro. En outre, utilisons Box Shadow avec les valeurs 0,2, 0,3 RAM et la couleur 888. Pour rendre l'effet plus fluide, utilisons toutes les valeurs de transition et 0,3 s. Nous avons donc ici un effet de survol Mais en fait, cela ne semble pas très beau car les images tournent à partir du centre et nous devons les faire pivoter à partir du bas. Encore une fois, nous devons changer, transformer l'origine, lui faire emprunter. Très bien, maintenant le problème est réglé et nous avons ici un joli creux Ou en fait, avant de terminer cette section, j'ai remarqué que nous avions besoin d' espace en haut et en bas de cette section parce que le titre n' est pas bien positionné. Et en plus de cela, je pense que nous avons également besoin d' espace pour les autres sections. Je vais donc accéder aux commentaires, aux styles de section et attribuer à l'élément de section. Rembourrage La valeur est la fibrine et zéro. D'accord, nous avons maintenant de bien meilleurs résultats. Et en fait, avec la galerie d'images, c'est terminé. Passons à autre chose et commençons à travailler sur la section suivante, qui sera la dernière 63. Projet 6 - Créer et personnaliser la section de conception et le pied de page: Très bien, il est donc temps de créer une cinquième section, qui sera la section de contact Nous allons terminer la construction du projet avec cette section. Ensuite, nous l' adapterons à différentes tailles d'écran. Jetons un coup d'œil au projet terminé. Cette section va donc être simple. Nous aurons une image d' arrière-plan en plein écran avec un titre de section, élément de formulaire et un petit texte de copyright Allons-y et créons un balisage HTML. Insérons ici un élément de titre H1 avec un titre de section de classe Et où le contenu nous contacte. Ensuite, nous avons besoin d'éléments de formulaire avec le formulaire de contact de la classe. Le formulaire sera donc composé de quatre éléments différents. Nous aurons deux entrées pour le nom complet et l'adresse e-mail. Ensuite, nous aurons la zone de texte et le bouton d'envoi. Interférons donc l'élément d'entrée avec une classe pour les entrées. Et aussi avec l'attribut placeholder, qui aura pour valeur votre nom complet Ensuite, je vais dupliquer cette ligne de code. Modifions ici, saisissons, créons un e-mail et définissons également la valeur de l'attribut d' espace réservé Insérez votre e-mail. Ensuite, nous avons besoin d'une zone de texte avec une classe d'entrées de formulaire. Et utilisez également à nouveau l' attribut d' espace réservé avec un message de saisie de valeur Enfin, créons un bouton, qui sera représenté à l'aide d'un élément d'entrée attribué au formulaire de cluster BTN en tant que type que je vais utiliser pour soumettre Et nous avons également besoin de Value Submit. Très bien, c'est tout pour les éléments du formulaire. Ensuite, nous devons créer un paragraphe avec la classe copyright. Insérons ici un texte de copyright. Je vais l'utiliser ici. Le signe de copyright avec l'entité HTML5. Il doit s'agir d'une esperluette, d'un point-virgule. Ensuite, je vais insérer votre code et créer tous les droits réservés. Très bien, c'est tout pour le balisage. Tout est prêt pour commencer à personnaliser cette section. Allons-y et insérons de nouveaux commentaires dans le fichier CSS. Nous avons besoin de la section 5 et hors de la section F5. Sélectionnez ensuite les éléments de cette section. Donc, la première chose que je veux faire est d' ajouter l'image en tant qu'arrière-plan plein écran Tout d'abord, utilisons un dégradé linéaire. Nous avons besoin ici de la valeur RGBA, soit la couleur noire et l'opacité 0,6 Ensuite, nous avons besoin de la même couleur. Mais avec une opacité de 0,8. Très bien, après cela, définissons le chemin URL de l'image Ce sera un JPG à cinq points de la section BG. Insérez également votre centre et ne recommencez pas. Enfin, je vais définir la taille de l'arrière-plan. Faisons en sorte qu'il couvre. Nous avons donc ici une image. Ensuite, je souhaite aligner les éléments à l'aide de Flexbox. Créons le conteneur flexible de l'élément de section à l'aide de Display Flex. Ensuite, nous devons aligner les éléments d'une colonne verticalement. Changeons donc la direction, faisons-en une colonne. Créez ensuite de l'espace autour des éléments en utilisant Justify Content Space Around. Enfin, je vais placer les éléments au centre en utilisant Aligner les éléments, au centre. Très bien, les éléments sont alignés et je vais maintenant passer à autre chose et personnaliser les éléments formés Allons-y et sélectionnons-le. Tout d'abord, je vais définir sa largeur et sa hauteur. Commençons avec 260 RAM. Pour ce qui est de la hauteur, je vais la porter à 45 rem. Ensuite, je vais changer la couleur de fond. Utilisons votre RGBA avec la couleur blanche avec le point d'opacité À. Enfin, je vais créer la bordure avec des valeurs à enfoncer. Et puis utilisez à nouveau la valeur RGBA avec la couleur blanche. Et avec l'opacité 0,8 Ensuite, je vais aligner les éléments à l'intérieur du formulaire. Pour cela, utilisons à nouveau Flexbox Dans ce cas, je vais créer le conteneur Form Flex à l' aide de Display Flex. Encore une fois, changez de direction. Je vais placer les éléments dans une colonne à la verticale. Ensuite, je vais placer les éléments au centre verticalement. Utilisez le centre de contenu justify-. Enfin, créez de l'espace à l'intérieur de l'élément de formulaire l'aide d'un rembourrage d'une valeur de cinq rem sur les quatre côtés Très bien, c'est tout à propos de l'élément de formulaire. Il faut maintenant personnaliser la zone de texte des entrées et le Bateson Dans un premier temps, je vais sélectionner les éléments de saisie et la zone de texte car ils auront des styles communs. Nous allons donc sélectionner les deux éléments. Tout d'abord, définissons la largeur et la hauteur. Mettons-nous à 200 %. Pour la hauteur. Je vais le préparer pour la rampe. Ensuite, créons de l' espace en haut et en bas à l'aide de la marge. Mettons-le à Ram et à zéro. Je vais également rendre la couleur d'arrière-plan des transparente la couleur d'arrière-plan des éléments de saisie et de la zone fiscale. Très bien, passons à autre chose et ajoutons quelques styles supplémentaires à ces éléments Créons de l'espace à l'intérieur à l'aide d'un rembourrage. La valeur 0,5 RAM sur les quatre côtés. Modifiez ensuite la bordure. Je vais attribuer 2.1 run solid et la couleur blanche. Ensuite, je vais modifier la taille de la police. Faisons-en 1,5 RAM. Créez ensuite un espace entre les lettres en utilisant un espacement des lettres de 0,1 RAM. Et enfin changez la couleur, faites-la blanche. Très bien, donc les entrées et la zone de texte ou le style. Et avant de passer au style du bouton, je vais ajouter quelques styles supplémentaires à la zone de texte. À l'heure actuelle. Il n'a que de la largeur et de la hauteur, ce qui peut poser problème au niveau de la mise en page car nous pouvons modifier manuellement la taille de la zone de texte. Nous devons donc définir la largeur et la hauteur maximales. Nous allons donc sélectionner la zone de texte et définir la largeur maximale. Faites-le à 100 %. Pour ce qui est de la hauteur minimale, je vais faire huit descentes. Très bien, le problème avec la zone de texte est maintenant résolu. Mais nous avons ici un autre problème. La hauteur des éléments de saisie a diminué et cela s'est produit parce que la zone de texte s'est agrandie et a repoussé le reste des éléments. Pour éviter ce genre de situation, nous pouvons utiliser l'une des propriétés de l' élément flexible appelée flex shrink et nous devons la mettre à zéro. D'accord ? La prochaine chose que je veux faire est de changer la couleur d'arrière-plan des entrées et de la zone de texte une fois que nous les avons focalisées. Sélectionnons donc les entrées et la zone de texte avec un nom de classe commun pour un put, qui doit être suivi de la pseudo-classe Defocus Changeons la couleur de fond. Je vais utiliser le RGBA avec la couleur blanche et avec une opacité de 0,5 Nous avons également besoin d'une transition avec la couleur de fond et la durée de 0,5 s. OK, donc enfin, nous pouvons personnaliser le bouton. Allons-y et sélectionnons-le. Nous devons d'abord utiliser la classe de l'élément de formulaire car sinon certains de ces styles ne seront pas appliqués au bouton. Comme vous le savez, le bouton est créé à l'aide de l'élément de saisie, et nous avons probablement tous des styles pour le mois d'avril. Changeons la couleur de fond. Je vais utiliser le format RGBA, avec une couleur blanche et une opacité de 0,8 Ensuite, modifions l' épaisseur de la police, faites-la 600. Créons donc un espace entre les lettres en utilisant une rampe d' espacement des lettres de 0,3. Changez ensuite la couleur, faites-la 444. Et modifiez également le type du curseur. Faites-le comprendre. Très bien, avec le bouton, c'est terminé. Et maintenant, nous devons nous occuper du dernier élément, qui est le paragraphe. Allons-y donc et sélectionnons-le. Tout d'abord, augmentons sa taille de police, faisons en sorte qu'elle s'exécute. Modifiez également l'épaisseur de la police. Je vais en faire 300. Ensuite, mettons-le en blanc. Et alignez également l'ensemble de textes. Très bien, le paragraphe est donc personnalisé et en fait, nous en avons presque terminé avec cette section et avec le projet lui-même. Avant de passer à autre chose et de rendre le projet réactif, je voudrais faire encore un cochon. La section contact est la dernière section du projet et je souhaite supprimer l'espace en bas. Allons-y donc et attribuons-lui une marge inférieure avec une valeur de zéro. Très bien, nous avons enfin terminé. Le projet est construit avec succès et nous devons maintenant passer à la dernière étape et rendre le projet réactif aux différentes tailles d'écran. 64. Projet 6 - Rendre le projet réactif: Très bien, donc avant de commencer à créer des requêtes multimédia CSS sur différents points d'arrêt et à rendre le projet réactif Jetons à nouveau un coup d'œil au projet terminé. Donc, si j'inspecte la page, passe en mode réactif et je vérifie que les projets sont sur des tailles d'écran différentes. Ensuite, vous constaterez qu'il a l'air bien et que les publicités sont réactives. Très bien, nous devons donc atteindre ce résultat. Allons-y et inspectons la page. Comme vous le savez, le projet est construit sur un écran de très grande taille. Je suis dans la taille de l'écran avec 1920 pixels de largeur et 1080 pixels de hauteur. J'ai déjà préparé différents points de rupture sur lesquels nous devons apporter quelques modifications, donc je ne vais pas perdre de temps à les trouver. Le premier point d'arrêt sera de 1 500 pixels. Comme vous pouvez le voir sur le point d'arrêt, nous devons nous occuper de la barre de navigation Certaines de ces sections nécessitent également des modifications. Allons-y et insérons de nouveaux commentaires. Réactif et non réactif. En fait, avant d'écrire du code ici, divisons la fenêtre du code VS en deux parties. Et affichez le fichier style.css des deux côtés. Je pense que cela facilitera notre travail en cours, car nous trouverons rapidement les styles actuels, puis nous créerons une nouvelle requête multimédia CSS Je vais spécifier ici la largeur maximale. Faisons-le à 1 500 pixels. La première chose à faire est augmenter la barre de navigation. Je veux dire la largeur de la barre de navigation. Allons-y et sélectionnons-le. Réglons sa largeur à 20, largeur de la fenêtre d'affichage. Et je vais aussi réduire légèrement le rembourrage. Passons à la RAM plutôt qu'à la rampe 0,02. La largeur du roman est donc augmentée, mais l'icône du menu est maintenant masquée. Et aussi, une fois que nous sommes suffisamment proches ou que c'est partiellement visible. Nous devons donc changer la position de gauche. Faisons en sorte que la largeur de la fenêtre d' affichage soit de -20. Et nous devons également changer la position de icône du menu lorsque vous cliquez. Sélectionnez le menu avec le changement de classe. Et fixons sa position de leader à 20. Largeur de la fenêtre d'affichage. Très bien, c'est tout pour Navbar Occupons-nous des sections. Une fois le numéro affiché, alors cette section est partiellement masquée. Alors occupons-nous de ça. Je vais sélectionner la section avec le changement de classe. Et je vais régler sa position gauche sur 20 largeurs de fenêtre En plus de cela, je vais modifier la valeur de la fonction de rotation. Faisons 15 degrés. D'accord, c'est tout à propos de cet élément de section. Passons à autre chose et occupons-nous de la première section. Je pense que nous devons ajouter un espace entre le titre et l'image. À l'heure actuelle. La première section contient le centre du cluster. Ils justifient donc que la propriété du contenu est placée au centre et que je vais la modifier, ainsi que Megan Space, de manière uniforme D'accord. Passons à autre chose et prenons soin de ce titre de section. Je souhaite réduire légèrement la taille de sa police. Nous allons donc sélectionner cet élément et définir la taille de police à sept. Courez. Très bien, c'est tout à propos de la première section. Passons à autre chose et occupons-nous de la seconde. Je vais aligner les cartes sur plusieurs lignes. Et pour cela, nous devons définir la propriété flex wrap sur wrap. Nous allons donc sélectionner les cartes, les enveloppes et les attribuer à Flex Wrap avec le Value Wrap Comme vous pouvez le constater, les cartes sont emballées et placées sur des lignes différentes, mais il faut tenir compte de la hauteur de cette section. Je vais le régler sur automatique et augmenter le rembourrage en bas Je vais régler le rembourrage à cinq rem en haut plutôt qu'à zéro sur le côté droit. Tan a couru en bas et zéro sur le côté gauche. Très bien, la prochaine chose que nous devons faire est de créer un espace entre les cartes Et je vais aussi réduire leur largeur. Alors sélectionnons la carte et définissons sa largeur à quatre pour qu'elle s'exécute. Et je vais également fixer la marge à trois rounds. Très bien, c'est tout à propos de la deuxième section. Passons à autre chose et personnalisons ce troisième. Je vais augmenter la largeur de la vidéo. Allons-y et sélectionnons-le. Je vais donc définir la largeur deux, pour présenter. Et je vais également modifier la marge. Passons à la RAM des quatre côtés. Je vais également augmenter le rembourrage sur les côtés gauche et droit de cette section Sélectionnons la section 3 et réglons le rembourrage à cinq rem. Et puis trois rampes sur les côtés gauche et droit. Avec une galerie vidéo. Nous en avons terminé avec le point d'arrêt. Passons à autre chose et personnalisons la galerie d'images. La première chose que je vais faire est d' augmenter l'espace entre les étagères. Nous allons donc sélectionner Galerie et définir marge à 12 rem en haut et en bas et à zéro sur les côtés gauche et droit. Voyez-le maintenant, la mise en page est foirée car la hauteur de cette section n'est plus suffisante Nous devons donc le rendre R0. Nous allons sélectionner la section 4 et régler la hauteur sur automatique. Très bien, la prochaine chose que je veux faire est d'augmenter la taille de l'étagère Sélectionnons-le et définissons sa largeur à 90 %. Je vais également augmenter la taille de l'image. Nous allons donc sélectionner Gallery IMG et définir sa largeur à 20 %. Les images sont devenues plus grandes, mais elles sont placées trop près les unes des autres. Pour résoudre ce problème, je vais modifier la position des deuxième et troisième images. Nous allons donc sélectionner la galerie dans laquelle deux. Réglons sa position gauche à 25 %. Pour ce qui est de la troisième image, je vais la placer à gauche à 75 %. Très bien, maintenant ils ont l'air bien et voici la galerie d'images terminée Passons à la dernière section, qui sera la section des contacts. La première chose à faire est de modifier la hauteur de la section. Allons-y, sélectionnons la section 5 et fixons sa hauteur à R0 Ensuite, prenons soin des éléments du formulaire. Sélectionnez le formulaire de contact. Je vais modifier sa taille au set avec 255 runs. Pour ce qui est de la hauteur que je vais atteindre pour courir. Et changez également le rembourrage. Allons jusqu'à la rampe. Enfin, nous devons créer un espace en haut du paragraphe. Sélectionnons-le avec le copyright de la classe et définissons la marge supérieure à cinq tours. Très bien, donc je pense que nous en avons terminé avec ces sections. Ayez l'air bien. Passons donc au point d'arrêt suivant, qui sera de mille pixels Je vais créer une nouvelle requête multimédia CSS. Spécifiez la largeur maximale, faites-la en milliers de pixels. La première chose que je vais faire au point de rupture est de me débarrasser du rembourrage du côté droit Nous allons donc sélectionner le corps et régler le rembourrage à zéro. Très bien, ensuite personnalisons suffisamment ou parce que ça n'a pas l' air très bien En fait, je vais récupérer le code du point d'arrêt précédent Et changeons la largeur de la fenêtre d'affichage de 20 en 25. Largeur de la fenêtre d'affichage Je vais également augmenter la valeur de la fonction de rotation. Faisons 20 degrés et débarrassons-nous de ce rembourrage à partir d'ici Très bien, donc le chiffre semble bon. Passons à autre chose et occupons-nous de la première section. Je vais augmenter la largeur de l'image. Nous allons donc sélectionner Section 1, IMG et définir sa largeur à 90 %. Je pense que la première section semble bonne et que nous n'avons pas besoin de changer quoi que ce soit d'autre. On peut en dire autant de la deuxième section. Quant à la galerie vidéo, allons-y et personnalisons-la. Je vais placer les vidéos verticalement dans une colonne. Allons-y, sélectionnons l'emballage des vidéos , puis changeons la direction de la flexion, appelons-le Les vidéos sont placées dans une colonne, mais la hauteur de cette section n'est plus suffisante. Je vais donc tout arranger. Sélectionnons la section 3 et définissons sa hauteur par rapport à notre ligne. Augmentez ensuite la largeur des vidéos. Portons-en 70 %. Et je vais également modifier la marge. Disons qu'il y en a trois en haut et en bas et zéro sur les côtés gauche et droit. Très bien, donc la galerie vidéo est jolie. Si nous vérifions les autres sections, vous constaterez qu' elles sont également belles. Il est donc temps de passer au point d'arrêt suivant, qui sera de 750 pixels Créons donc une nouvelle requête multimédia CSS dont la largeur maximale est de 750 pixels Encore une fois, nous devons personnaliser la barre de navigation. Allons-y et récupérons le code du point d'arrêt précédent Je vais modifier la largeur de 25 fenêtres d'affichage. Troisième en termes de largeur de la fenêtre d'affichage. En ce qui concerne la fonction de rotation, fixons sa valeur à 25 degrés. D'accord ? Alors, maintenant, le bar a l'air bien. Ensuite, je vais m' occuper des titres. Nous allons sélectionner le titre de la section. Réglez la taille de police à 5,5 g. Très bien, pour que les trois premières sections soient également belles La galerie d'images, nous devons apporter quelques modifications. Je pense que nous devons amincir les étagères. Nous allons donc sélectionner l'étagère Galerie. Faisons en sorte que sa hauteur soit 1,5 RAM en largeur du polyéthylène. Je vais le régler à 95 %. Ensuite, je vais m'occuper de la seconde partie des étagères, qui se trouve avant le pseudo élément. Nous allons donc sélectionner l'étagère Galerie, suivie du pseudo-élément précédent. Faisons en sorte que sa hauteur soit cinq RAM. Pour ce qui est de la première position, je vais la mettre à moins cinq. A couru. Les étagères sont belles, mais nous devons maintenant prendre soin des images. Et sélectionnons l'image de la galerie. Je vais définir sa largeur comme étant de 25 %. Pour ce qui est de la position inférieure, faisons-la tomber. Enfin, nous devons modifier la position des images. Nous allons donc sélectionner la galerie dans laquelle deux. Je vais faire en sorte que sa position gauche 22 soit présente. En ce qui concerne la troisième image, faisons en sorte qu'elle occupe la première place à 78 %. En fait, nous avons presque terminé cette section. Et avant de poursuivre, je pense à la réduction de la taille de l'espace au bas de cette section. Nous allons donc sélectionner la section quatre. Et le remplissage défini avec une valeur est de six fois la RAM exécutée, puis de nouveau de zéro C'est bon, c'est ça. En ce qui concerne ce point d'arrêt, allons-y et créons le suivant, qui sera de 600 pixels Créons donc une nouvelle requête multimédia CSS et spécifions une largeur maximale de 600 pixels. Tout d'abord, je vais réduire la taille de police de l'élément HTML car cela diminuera la taille de tous les éléments. Réglons donc la taille de police à 55,5 %. Ensuite, réduisons la taille de police de tous les titres de section Nous allons donc sélectionner le titre de la section et faire en sorte que sa taille de police soit 4,5 Ram. Ensuite, je vais m' occuper de la première section. Sélectionnez l'image de la section 1 et définissons sa largeur à 200 %. Passez ensuite à la galerie vidéo. Je souhaite augmenter la largeur de la vidéo. Réglons donc la largeur à 100 %. Pour ce qui est de la marge, je vais atteindre Ram en haut et en bas et zéro sur les côtés gauche et droit. Très bien, passons à la galerie de vidéos. Ensuite, je vais personnaliser la galerie d'images. Nous allons donc sélectionner Galerie et régler la marge sur neuf RAM et zéro. C'est tout pour la galerie d'images. Passons à autre chose et personnalisons les éléments formés. Sélectionnez-le. Pour ce qui est de changer la largeur, faisons-en quatre pour la RAM. Et je vais aussi définir la bordure sur une couche solide. Et la couleur blanche avec une opacité de 0,8. Très bien, toutes ces sections sont personnalisées et nous devons maintenant nous occuper de la barre de navigation Je vais encore augmenter de taille. Reprenons donc le code du point d'arrêt précédent. En fait, je vais modifier la largeur et la position de l'icône Napa et de l'icône Menu Faisons-en quatre pour la largeur de la fenêtre d'affichage. En ce qui concerne les éléments de cette section, nous ne voulons plus les faire pivoter. Mettons donc la position let à zéro. En ce qui concerne la fonction de rotation, mettons sa valeur à zéro. Très bien, c'est tout à propos de ce point d'arrêt. Passons à autre chose et créons le dernier, qui sera de 400 pixels. Créons une nouvelle requête multimédia CSS et spécifions la largeur maximale. Faites-le 400 pixels. Sur ce point d'arrêt, je vais réduire la taille de police de l'élément HTML Portons-le à 40 %. Enfin, réduisons la largeur du texte du copyright. Faisons en sorte qu'il soit de 2 %. Très bien, enfin, nous avons terminé. Le projet s'adapte à différentes tailles d'écran, et en fait nous avons fini de travailler dessus 65. Projet 7 - Aperçu du projet: Très bien, il est donc temps de passer à autre chose et de commencer à construire le prochain projet, qui sera l'un des plus importants Comme d'habitude, avant d' approfondir notre projet et de commencer à le construire, commençons par le décrire. Donc, si je recharge la page, nous arriverons à ce que ce peintre affiche pendant quelques secondes. Ensuite, le projet est chargé. La première chose que vous voyez ici est une page de destination avec une bannière animée et l'icône Menu. Une fois le projet affiché, la bannière se déplace du bas avec une transition fluide et agréable. En plus de cela, nous avons ici un fond d'écran animé L'échelle de l'image diminue avec une transition. Très bien, comme je l'ai dit, nous avons ici l'icône du menu qui est placée dans le coin supérieur droit Si je clique dessus, la barre latérale s'affichera du côté droit. L'icône du menu se transformera également en X. La navigation va être simple, mais nous avons ici un effet sympa et cool. Si je survole les éléments de navigation, ils changeront de couleur de gauche à droite En plus de cela, nous avons ici quelques icônes de réseaux sociaux en fin de décembre avec des effets d'horreur Si je passe la souris sur le bouton de fermeture x, l'info-bulle s' affichera avec un texte Et si je clique sur le X, la barre latérale se ferme OK, voyons ce qu'il en est du prêt et de la barre latérale. Passons à la section suivante, qui sera consacrée à nous. Nous avons ici le titre souligné suivi de quelques textes et icônes Au centre de cette section, nous avons une petite image de la maison. Cette section va être construite sur la base du module de mise en page CSS appelé grille CSS. Vient ensuite la section du code. Nous avons ici trois cartes avec un effet de survol sympa Il sera créé avec l'un des plugins JavaScript appelé tilde point js Vous pourrez ainsi apprendre à utiliser ces plug-ins. Après la section des cartes, nous allons créer la section des contacts. Comme vous pouvez le voir, nous avons ici l'image de fond sur le côté gauche de cette boîte. En ce qui concerne le côté droit, il y a quelques éléments. J'ai créé les titres, plusieurs entrées et le bouton Soumettre, chacun des champs de saisie faisant office d'étiquette Et si je concentre l'entrée, l' étiquette se déplacera vers le haut avec une certaine transition. Cet effet est très populaire et couramment utilisé aujourd'hui. Vous allez donc pouvoir apprendre à le créer. Juste après la section contact, nous allons créer ce pied de page simple où se trouvent texte du copyright et quelques icônes de réseaux sociaux Donc, la dernière chose que je veux mentionner ici est ce bouton jaune fixe avec l'icône en forme de flèche vers le haut. Si je clique dessus, la page défilera doucement vers le haut à droite. Le projet va donc être réactif à toutes les tailles d'écran. Si j'inspecte la page, passe en mode réactif et je vérifie le projet sur différentes tailles d'écran. Ensuite, vous constaterez qu' il est réactif et a l'air bien. Comme d'habitude. Je tiens à te rappeler une chose. Le projet est construit sur la base d'une approche axée sur l'ordinateur de bureau, et nous l'avons construit sur une taille d'écran plus grande. Je suis dans la taille de l'écran avec des véhicules des années 1920 de largeur et une grande source de hauteur de dix ans après Jésus-Christ. Donc, si vous utilisez une taille d'écran relativement petite, le projet risque de ne pas s'afficher correctement pendant les cours, mais ce n'est pas un problème. Nous finirons par le rendre réactif. En attendant, vous pouvez utiliser le mode réactif et régler la largeur sur 1920 pixels et la hauteur sur pixels et travailler ainsi 66. Projet 7 - Créer et personnaliser la page d'atterrissage: Très bien, donc je pense que nous sommes prêts à partir. Nous allons commencer. J'ai créé un nouveau dossier sur le bureau appelé Architect Website, dans lequel j'ai un autre dossier pour les images. Allons-y et ouvrons le dossier dans le code VS. Je vais créer trois fichiers différents pour HTML, CSS et JavaScript. Appelons-les index du HTML, puis style.css et script.js. Ensuite, je vais insérer le document HTML de base dans le fichier index.html. Utilisons-la moi. Nous devons placer ici un point d'exclamation puis appuyer sur Entrée ou sur la touche Tab. Alors on y va. Très bien, veut que le document HTML de base soit prêt. Il est temps d'exécuter le projet dans le navigateur. Pour ce faire, je vais utiliser l'un des packages de code VS appelé Live Server. Ce package permet également d'exécuter le projet jusqu'à la vie du navigateur et d'apporter des modifications ou des mises à jour sans recharger la page à chaque fois Je recommande donc d'installer et d'utiliser ce package. OK, le projet est donc opérationnel. Nous devons mettre en place quelques autres choses. Tout d'abord, relions ces trois fichiers. Je vais ouvrir la balise de lien. Ensuite, dans les attributs de référence h, je vais spécifier le chemin du fichier CSS. En ce qui concerne le JavaScript, ouvrons une balise de script juste au-dessus de la balise body fermante et dans l'attribut source pour spécifier le chemin du fichier de script. En plus de cela, changeons le titre. Je vais insérer le site Web de votre architecte. Très bien, donc les trois fichiers sont connectés. Ensuite, je vais ajouter quelques liens. Tout au long du projet. Je vais utiliser des polices, icônes géniales et aussi quelques polices Google. Prenons d'abord soin du lien Font Awesome. Je vais rechercher Font Awesome, CDN, js. Passons à ce lien. Sélectionnez CSS et récupérez le lien. Je vais ouvrir une balise de lien ici et coller le lien en tant que valeur de l'attribut de référence h. Hein ? Ensuite, je vais rechercher des polices Google. Voici donc le site Web de Google Fonts. Dans l'ensemble, je vais utiliser trois polices différentes. Cherchons Lu dA2 et sélectionnons certains de ces différents styles Ensuite, nous avons besoin de la dalle de Joséphine. Je vais également sélectionner quelques styles ici. Et enfin, recherchez un film. Ensuite, je vais récupérer le lien et coller dans l'élément principal. Très bien, donc je pense que nous sommes prêts à partir. Je vais construire le projet section par section. Dans un premier temps, nous allons préparer les balises HTML, puis écrire Jetons un coup d'œil au projet terminé. La première partie de notre projet qui va être construite est donc un en-tête. Il comporte une bannière avec un titre, un paragraphe et un bouton. Une fois que nous aurons rechargé la page. le chargement terminé , la bannière apparaîtra avec une belle animation De plus, nous avons ici une image en plein écran qui a également un effet d'animation En plus de cela, je vais créer une icône de menu. Techniquement, cela ne fait pas partie de l'en-tête. Il a une position fixe. Quoi qu'il en soit, je vais le créer. Très bien, assez pour parler, commençons. Je vais ouvrir une balise div, qui sera le conteneur Ensuite, ouvrons la balise d'en-tête HTML5. Avec un en-tête de classe. L'en-tête sera composé de deux parties principales. La première sera l'image. Quant à la deuxième partie, ce devrait être la bannière. Je vais ouvrir la balise div avec le wrapper de classe IMG. Ce sera l' enveloppe de l'image. Et puis à l'intérieur de cet élément div, ouvrons la balise image et les attributs source Je vais spécifier le chemin de l'image. Nous avons besoin d'un gros point JPG dans le dossier des images. D'accord, nous aurons ensuite une bannière. Il s'agit donc d'ouvrir la balise div avec la bannière de la classe. Il sera composé de trois éléments différents. Le premier sera constitué d'éléments de titre H1 avec le texte, l' architecture et la décoration intérieure Ensuite, nous aurons un paragraphe avec un texte factice et aussi un bouton avec une taxe à découvrir maintenant D'accord, nous avons donc ici l' en-tête avec ses éléments. Ensuite, je vais créer le balisage pour l'icône du menu. Ouvrons donc la balise div avec un menu de hamburgers de classe. Les lignes de l'icône seront donc représentées par des éléments div Ouvrons la balise div avec la ligne de classe, qui sera le nom de classe courant Mais en plus de cela, nous avons besoin ici de la première ligne pour un style individualiste Dupliquez ensuite cette ligne de code deux fois et modifiez les noms des classes. Nous avons besoin de la ligne deux et de la ligne trois. Très bien, c'est tout à propos du balisage HTML pour l'en-tête Il est maintenant temps de commencer à écrire du CSS. Tout d'abord, je vais vous parler de quelques styles classiques et courants. Supprimons la marge et le rembourrage par défaut pour tous les éléments Pour sélectionner chaque élément, nous devons utiliser un astérisque, puis définir la marge et le remplissage des deux à zéro. En plus de cela, je vais supprimer le contour par défaut des éléments. Nous n'avons pas besoin d'en décrire un. Définissons également la taille de la boîte, la zone de bordure. Ensuite, je vais me débarrasser des styles par défaut. Pour la liste. Je veux dire, nous n'avons besoin d'aucune forme de liste. Et je vais également me débarrasser des styles par défaut pour les éléments de lien. Passons la décoration de votre texte. Aucune. Bien, comme vous pouvez le constater, tous les styles courants et réinitialisés sont appliqués tout au long de ce projet Je vais utiliser la RAM comme unité de mesure heure actuelle, une mémoire vive est égale à 16 pixels car, par défaut, la taille de police de l'élément HTML est égale à 16 pixels. Je souhaite convertir une RAM en dix pixels car je pense que ce sera plus pratique et plus facile à calculer. Pour ce faire, nous devons donc réduire la taille de police de l'élément HTML. Portons-le à 62,5 %. Maintenant, une mémoire vive est égale à dix pixels. Vous pouvez voir que la taille des éléments a diminué. Allons-y et personnalisons l'en-tête. Sélectionnons-le. Tout d'abord, je vais définir sa largeur et sa hauteur. Ce set avec une hauteur probable de 200  %. Je vais faire en sorte que la hauteur de la fenêtre d'affichage soit de 100. Cela signifie que nous définissons la hauteur de l'en-tête à 200 % de la fenêtre d'affichage Ensuite, je vais m' occuper de l'image. Choisissons son emballage et définissons la largeur et la hauteur, toutes deux à 200 %. Et en plus de cela, je vais définir couleur de fond pour que l'image soit belle. Utilisons votre valeur RGBA avec une couleur noire et une opacité Enfin, je vais personnaliser l'image elle-même. Nous allons donc le sélectionner. Réglez ensuite la largeur et la hauteur, toutes deux à 200 %. De plus, nous avons besoin ici d'un couvre-pieds pour maintenir la qualité de l'image. Enfin, je vais réduire l'opacité. Mettons-le à 0,5. Comme vous pouvez le voir, l'image est belle. Nous n'avons plus ici les barres de défilement, et il est maintenant temps de personnaliser cette bannière. Tout d'abord, je vais modifier la position de la bannière. Sélectionnons-le et définissons la position sur absolue. Afin de définir la position de la bannière en fonction de l'en-tête, qui est son élément parent. Nous devons définir la position de l'en-tête par rapport à un parent. Ensuite, je vais placer la bannière 30 % S en haut de la bannière pour la position. Portons-le à 15 %. La bannière est donc positionnée et je vais maintenant personnaliser ses éléments. Commençons par le titre. Sélectionnons-le. Tout d'abord, je vais définir cette famille de fontes. Utilisons une police appelée ci-dessous dA2, le serif du groupe de polices Ensuite, je vais augmenter la taille de la police. Faisons-en huit RAM. Également. Je vais rendre la police un peu plus légère en utilisant font-weight 300 Et puis changez la couleur, faites-la blanche. Le titre semble donc bon. Je vais réduire sa largeur afin de la diviser sur deux lignes différentes. Rendons sa largeur à 50 % De plus, nous devons diminuer la hauteur de la ligne car il y a deux grands espaces entre les lignes. Faisons donc courir la hauteur de ligne 9. D'accord ? Maintenant, ça a l'air beaucoup mieux. Ajoutons ici quelques styles supplémentaires. Je vais créer un espace entre les lettres en utilisant l' espacement des lettres et en pointant vers la RAM. Et créez également un petit effet d'ombre en utilisant une ombre de texte avec les valeurs 0,3, 0,5 RAM et le RGBA avec une couleur noire et une opacité Très bien, c'est tout à propos de l'élément de titre. Passons au paragraphe. Sélectionnons-le. Je vais définir la famille de police sur Josephine Slab Serif. Cette taille de police accrue, rend étrangère et change de couleur. Faites-le blanc. Très bien, ensuite, je vais également réduire la largeur du paragraphe Portons-en 70 %. Et créez également un espace entre les lettres en utilisant un espacement latéral avec la valeur 0,1 run. Ensuite, créons un espace au bas du paragraphe et ajoutons également de l'ombre. Nous avons donc besoin d'une marge inférieure d'une valeur de trois rem. Et aussi une ombre de texte. La valeur est 0,3, 0,5 rampe et RGBA avec une couleur noire et une opacité C'est tout à propos du paragraphe. Passons au bas de l'échelle. Sélectionnons-le. Et tout d'abord, je vais définir sa largeur et sa hauteur. Mettons-nous en place avec 225 RAM. Pour ce qui est de la hauteur, je vais faire sept descentes. Et changez également la couleur de fond. Je vais utiliser ici la couleur, voir 29525. OK, passons à autre chose et ajoutons d'autres étoiles en bas. Je vais supprimer la bordure par défaut. Utilisons Border None. Modifiez également la famille de polices. Dans ce cas, je vais utiliser la police Molly. Augmentez ensuite la taille des os, atteignez Ram. Transformez également le texte en majuscules et changez de couleur. Faites-le blanc. Très bien, étape par étape, le ballon devient de plus en plus beau Je vais y ajouter quelques effets d'ombre. Utilisons d'abord une ombre de texte avec une valeur de 0,2 ram, point pour RAM. Et le RGBA de couleur noire et dont l'opacité pointe vers Dupliquons cette ligne de code, changeons l'ombre du texte en ombre de boîte De plus, au lieu de 0,2, nous avons besoin de 0,3, puis de 0,5 et d'une opacité de 0,4 Enfin, définissons le type du pointeur du curseur. OK, donc ça y est le Batson est personnalisé et je le trouve plutôt sympa Ensuite, je vais styliser l'icône du menu. Ensuite, nous nous occuperons de l'animation. Allons-y, sélectionnons menu hamburger et définissons sa largeur et sa hauteur Je vais régler les deux à 23 RAM. Et utilisez également pour entendre un arrière-plan temporaire. Faisons en sorte qu'il soit rouge. Nous devons donc prendre soin de la position de l'icône. Il sera placé dans le coin supérieur droit de la page. Je vais donc définir la position de l'icône sur fixe. Définissez ensuite les propriétés supérieures et droites. Je vais les régler tous les deux à cinq points. L'icône est positionnée. Comme vous pouvez le constater, ce n'est pas tout à fait visible. Corrigons ce problème à l'aide de la propriété z-index. Et je vais aussi rendre les lignes visibles. Utilisons donc ici l' indice Z avec une valeur plus élevée, disons 200. Sélectionnez ensuite la ligne. Comme vous le savez, c'est le coût commun à toutes les lignes. Tout d'abord, définissons la largeur et la hauteur. Je vais me fixer à 200 %. Pour ce qui est de la hauteur, faisons en sorte de courir. Changez également. La couleur d'arrière-plan est ici, le blanc Ensuite, utilisez l'ombre de la boîte avec les valeurs 0,1 RAM plutôt que de pointer vers la RAM. Et le RGBA avec trois zéros et une opacité de 0,2. Très bien, maintenant les lignes sont visibles, mais elles sont placées les unes sur les autres Nous avons besoin d'un peu d'espace entre eux. Et je vais le créer à l'aide de Flexbox. Faisons donc du menu des hamburgers un conteneur flexible. Ensuite, nous devons changer la direction de la flexion. Faisons-en une colonne. Afin de créer un espace uniforme entre les lignes, utilisons le contenu de justification avec les valeurs espacées de manière uniforme. Modifiez ensuite le type du pointeur du curseur. Et je vais aussi me débarrasser de la couleur de fond rouge. Très bien, avec l'icône du menu, c'est terminé. Il est personnalisé et il a l'air bien. Comme je l'ai dit, je vais créer des animations. Je vais commencer par l'animation d'image en plein écran. Ça va être assez simple. J'augmenterai l'échelle de l'image puis je la diminuerai pendant l'animation. Je vais donc créer des images-clés CSS comme nom de l'animation Utilisons l'échelle. Dans l'ensemble, nous aurons donc deux étapes, point de départ et le point d'arrivée. Nous allons augmenter l' échelle de l'image à 1,3 et la réduire à 1 pendant l'animation. Donc, à zéro pour cent, nous devons effectuer la transformation à l' aide de la fonction d'échelle. Je vais insérer ici la version 1.3. Et tous les cent pour cent. Nous devons, encore une fois, transformer, redimensionner la valeur à un. L'animation est donc prête. Il suffit de l' appliquer à l'image. Pour cela, nous devons utiliser quelques propriétés d'animation. Je veux dire le nom de l'animation et la durée de l'animation. Donc, comme nom de l'animation, nous devons utiliser une échelle. En ce qui concerne la durée de l'animation. Passons à 25 s. Nous avons utilisé ici deux propriétés différentes, mais en fait, nous ne pouvons utiliser ici que la propriété d'animation. Et évitez d'écrire deux propriétés différentes. Nous devons spécifier ici le nom de l'animation, suivi de la durée, 25 s. Comme vous pouvez le voir, l'animation fonctionne. L'échelle de l' image diminue. Mais nous avons ici un petit problème. Souhaite que l'échelle de l' image soit augmentée. Nous voyons ici ces barres de défilement. Et pour résoudre ce problème, nous avons dû utiliser overflow hidden et l'attribuer au wrapper d'image Maintenant, on considère que le problème est résolu. Très bien, donc la première animation fonctionne bien. Passons à la seconde. Je vais animer la bannière. Elle doit se déplacer depuis le bas, veut que la page soit chargée. Je vais donc créer d' autres images-clés CSS. Disons que c'est une bannière déplacée. Comme dans l'animation précédente, nous allons commencer par deux étapes . Je vais déplacer les éléments vers le bas et les faire légèrement pivoter. Ensuite, pendant l'animation, ils apparaîtront par le bas et pivoteront vers l'arrière. Tout d'abord, masquons les trois éléments de la bannière par défaut. Utilisons l'opacité zéro. En fait, l' effet de rotation va être 3D. Nous devons donc créer un environnement 3D. Pour cela, nous devons utiliser l'une de ces propriétés CSS appelée Perspective. Je vais l'attribuer à l'en-tête. Faisons-en cent dram, puis ajoutons quelques styles aux images-clés Donc, à zéro pour cent, nous devons nous transformer. Avec la fonction Translate Y. Il déplacera les éléments en fonction de l'axe Y. Insérons ici pour 2M. Et nous devons également faire pivoter y. Cela fera pivoter les éléments en fonction de l'axe Y ainsi que de -20 degrés l'année dernière Cent pour cent. Nous devons mettre les deux fonctions à zéro. Nous devons donc transformer, traduire Y zéro et également faire pivoter y zéro. Et en plus de cela, nous devons rendre les éléments visibles en utilisant Opacity One OK, donc les images-clés sont prêtes. Nous devons maintenant définir les propriétés d'animation pour chaque élément de bannière. Ils doivent avoir le même nom et la même durée, mais un délai différent. Attribuons donc aux trois éléments. Propriété d'animation. Dans une bannière de déplacement. La durée sera de 1 s. Ensuite, je vais définir différents délais pour le titre dont nous avons besoin de 0,5 s. Ensuite, pour le paragraphe, je vais utiliser 0,7 s. En ce qui concerne le bouton, fixons le délai à 0,9 s. accord ? Comme vous pouvez le constater, les éléments sont masqués par défaut. Si je recharge la page , ils apparaîtront en bas Une fois l'animation terminée les éléments disparaissent à nouveau. Pendant l'animation, nous voyons également la barre de défilement. Nous devons donc résoudre ces problèmes. Une fois l'animation terminée, les éléments de la bannière doivent conserver ces vignettes de la deuxième étape des images-clés Je veux dire des fonctions de translation et de rotation avec des valeurs nulles et une opacité de un Pour y parvenir, nous pouvons ajouter à ces valeurs une valeur supplémentaire appelée « forward ». Il appartient à la propriété du mode film d'animation. Et aussi pour se débarrasser de cette barre de défilement, nous avons besoin de overflow hidden Très bien, maintenant tout fonctionne parfaitement. Et avec un en-tête, nous avons terminé 67. Projet 7 - Créer et faire fonctionner la barre latérale: Passons à autre chose et commençons à travailler sur la partie suivante des projets. Je vais créer la barre latérale et faire fonctionner le menu des hamburgers. Jetons un coup d'œil au projet terminé. Ainsi, une fois que j'ai cliqué sur l'icône du menu, puis sur la barre latérale que nous allons afficher, elle se déplace de droite à gauche Nous avons ici quelques éléments du menu. Si je les survole, ils changeront bien de couleur De plus, nous avons ici plusieurs icônes de réseaux sociaux en bas de la barre latérale. Si je passe la souris sur le bouton de fermeture x, une petite info-bulle apparaîtra avec le texte fermé Et quand je clique sur le X, la barre latérale, nous fermons Cela dit, ce que nous allons créer dans cette partie. Tout d'abord, créons le balisage HTML. Je vais ouvrir la balise de section juste après l'en-tête. Attribuons-lui une barre latérale de classe. La barre latérale sera composée de deux parties différentes. Nous aurons les éléments de navigation et quelques icônes de réseaux sociaux. Ouvrons donc l'élément UL avec le menu de classe. Ensuite, nous avons besoin d'un élément LI avec un élément de menu contenant un nom de classe, suivi des éléments de lien, qui doivent contenir un lien de menu de classe. Et comme premier élément de menu, je vais insérer ici la page d'accueil. Dans l'ensemble, nous aurons donc cinq éléments de menu différents. Dupliquons donc l'élément LI quatre fois et changeons le contenu. Le second sera consacré à nous. Ensuite, nous aurons les prix et les contextes des équipes. Comme vous pouvez le voir ici, nous avons les liens. Ensuite, ajoutons quelques icônes de réseaux sociaux à la barre latérale. Je vais ouvrir l'élément div avec une classe, les réseaux sociaux. Ensuite, je vais transmettre vos éléments de lien, qui incluront la police, l'icône Awesome. Le premier sera Facebook. Nous avons donc besoin ici de la classe FAB, a, Facebook, F. Dupliquons l'élément du lien deux fois Et pour changer les noms des classes, nous avons besoin ici de FAB, FAA, Instagram Et le troisième sera f a b, f a tweeter. Très bien, avec le balisage HTML, nous avons terminé. Allons-y et commençons à personnaliser la barre latérale. Je vais le sélectionner et définir sa largeur et sa hauteur. Faisons sa largeur pour deux RAM. Quant à la hauteur, elle sera de cent fenêtres d'affichage Je vais également définir la position qui va être fixée. Ensuite, nous devons placer les propriétés de haut en haut à droite. Les deux sont égaux à zéro. D'accord ? La barre latérale est donc placée de la bonne manière. Et pour mieux le voir, changeons la couleur de fond. Utilisons ici la couleur blanche. Bien, passons à autre chose et commençons à personnaliser les éléments du menu. Je vais sélectionner le menu lui-même et le positionner quelque part au centre de la barre latérale Définissons donc sa position, rendons-la absolue. Réglez ensuite la propriété supérieure à 40 %. Ensuite, nous devons laisser une valeur de 50 %. Et également pour centrer l'élément, utilisons Transform, Translate et faisons passer l'année à 50 % deux fois Le menu est positionné. Ensuite, je vais personnaliser les objets. Allons-y et sélectionnons les éléments LI, qui comportent un élément de menu de classe et sont affectés au centre d'alignement du texte. Ensuite, je vais sélectionner les liens. Tout d'abord, définissons la famille de polices. Dans ce cas, je vais utiliser une police appelée value dA2. Serif. Augmentez ensuite la taille de la police, créez-la pour la RAM. Et changez également la couleur. Faites-le gris foncé en utilisant 555. OK, c'est tout pour les éléments du menu pour le moment, passons à autre chose et occupons-nous des icônes des réseaux sociaux Je vais sélectionner l'élément div, qui est l'enveloppe des Tout d'abord, définissons la position, rendons-la absolue. Comme vous le savez, les icônes des réseaux sociaux doivent être placées en bas de la barre latérale. Je vais donc définir la propriété inférieure avec une valeur de trois rem et également attribuer la largeur à cent pour cent. OK, ensuite, je vais placer l'œil constamment au centre de cela. Utilisons Flexbox. Nous avons besoin d'un centre de contenu Display Flex et Justify. Très bien, passons à autre chose et personnalisons les icônes. Je vais sélectionner des éléments. Tout d'abord, augmentons la taille de la police, faisons en sorte qu'elle pointe vers la RAM. Et créez une marge. Trois ont couru. Ensuite, définissons la largeur et la hauteur. Je vais les régler tous les deux sur 4,5 RAM. Modifiez également la couleur d'arrière-plan. Faites-le gris foncé en utilisant 777. Et puis changez de couleur. Faites en sorte que les icônes soient blanches. Je vais donc placer les icônes au centre de ces cases. Et nous allons aussi faire des cercles dans les boîtes. Afin de centrer les icônes. Je vais utiliser Flexbox. Utilisons Display Flex , puis justifions le centre de contenu. Et alignez les objets au centre. En ce qui concerne la création de cases, des cercles sous forme de rayon de bordure avec la valeur 50 % D'accord ? Les icônes sont donc belles. Et la dernière chose que je souhaite faire à leur sujet est de créer un simple effet de survol Je vais changer la couleur d'arrière-plan en survolant. Allons-y, sélectionnons les éléments avec souris et changeons la couleur d'arrière-plan Je vais utiliser la couleur C2 9525. En plus de cela, nous avons besoin de valeurs de transition , d'une couleur d' arrière-plan et de 0,3 s. Très bien, donc avec les icônes des réseaux sociaux, c'est terminé Revenons aux éléments du menu et créons. L'effet de survol va être différent. Ce ne sera pas ce simple survol que nous avons utilisé il y a une minute. Ainsi, une fois que nous survolons les éléments, ils devraient changer de couleur de gauche à droite Laissez-moi vous expliquer ce que nous allons faire. Nous allons créer les pseudo-éléments précédents pour chaque élément de menu avec exactement le même contenu, mais avec une couleur différente. Par exemple, la page d'accueil contiendra le pseudo-élément before avec le texte Home About Us will have about us, etc. Ils seront placés sur les éléments de menu proprement dits, mais leur largeur sera de zéro pixel. Une fois que nous survolons les éléments, la largeur du pseudo-élément précédent augmente à 100 %. Et cela créera l'effet de changement de couleur. Très bien, écrivons le code et il deviendra plus clair Sélectionnons-le avant les pseudo-éléments. La première chose à faire est de définir le contenu. Comme nous l'avons dit, chaque pseudo-élément aura le même contenu. Nous pouvons donc sélectionner les pseudo-éléments pour tous les liens du menu séparément à l'aide du nième sélecteur enfant Ou nous pouvons utiliser une petite astuce. Je vais attribuer à tous les liens du menu l'attribut appelé contenu des données. Ensuite, je vais spécifier le contenu de chaque lien de menu séparément. Pour le premier, nous avons besoin de l'OMS. Alors à propos de nous ? Alors nous avons besoin d'une équipe. Tarifs et contact. Ensuite, il suffit d'attribuer à la propriété de contenu une fonction appelée attribut, qui est exprimée sous la forme d'un TTR. Et nous devons spécifier ici le nom de l'attribut, qui est le contenu des données. D'accord ? Ensuite, je vais définir la position. Faisons en sorte que ce soit absolu. Nous avons besoin d'une position relative pour le lien du menu car il s' agit des éléments parents. Et nous devons positionner avant le pseudo-élément en fonction du lien du menu. Ensuite, définissons les propriétés du haut et de la gauche. Nous devons les mettre tous les deux à zéro et changer la couleur It, C2 9525 Très bien, donc ce que nous voyons ici sont les pseudo-éléments précédents Maintenant, je vais mettre sa largeur à zéro par défaut et l'augmenter de 200 % en survolant. Donc, pour le moment pseudo-éléments antérieurs sont toujours visibles. Et le deuxième élément est également divisé en deux lignes. Pour résoudre ces problèmes, nous devons utiliser overflow hidden, qui le masquera avant les pseudo-éléments Et pour éviter d'envelopper le texte, nous avons besoin d'espaces blancs avec une valeur no rep. Très bien, maintenant nous sommes prêts à partir Utilisons l'effet de survol. Je vais sélectionner le lien du menu avec le pointeur de la souris, suivi des pseudo-éléments précédents Et nous devons le faire à cent pour cent. Je vais également utiliser la transition avec des valeurs d'une largeur de 0,3 s. Et en plus de cela, je vais utiliser l'une des fonctions de synchronisation des transitions appelée ease in, out. Comme vous pouvez le constater, le survol fonctionne parfaitement et crée un effet vraiment sympa et cool Très bien, donc avec les éléments du menu, nous avons terminé. Ensuite, nous devons faire en sorte que le menu des hamburgers fonctionne. Je vais masquer cette barre latérale par défaut et l'afficher une fois que nous cliquons sur l'icône du menu Nous devons également transformer les lignes en X et afficher l'info-bulle une fois que nous survolons le x. Tout d'abord, je vais réussir à afficher en masquant la Et nous allons le faire en utilisant un peu de JavaScript. Nous allons donc créer une nouvelle classe et un nouveau CSS appelés change, qui incluront certains styles pour la barre latérale Nous ajouterons ce nom de classe au conteneur lorsque nous cliquerons sur l'icône du menu. Passons donc au fichier script.js et sélectionnons d'abord l'icône du menu. Je vais le faire en utilisant la méthode de sélection de requêtes. Nous devons spécifier ici le nom de la classe, qui est menu hamburger. Ensuite, nous devons attacher aux éléments l'écouteur d'événements l'aide de la méthode add event listener, qui prendra deux arguments Le premier sera le type d'événement. Cliquez. Quant au deuxième argument, il s' agira de la fonction flèche, qui sera exécutée une fois que nous aurons cliqué sur les éléments. Après cela, nous devons sélectionner le conteneur. Utilisons à nouveau la méthode de sélection de requêtes et transmettons votre conteneur de nom de classe Encore une fois, nous devons ajouter la classe au conteneur lorsque nous cliquons sur l'icône, puis nous devons la supprimer au clic suivant. Nous devons donc utiliser une méthode de bascule. Dans un premier temps, je vais utiliser ici la propriété de la liste de classes. Cette propriété renvoie toutes les classes de l'élément. Ensuite, nous devons y associer une méthode appelée toggle. Et nous devons spécifier ici le nom de la classe. Changer. Très bien, c'est donc tout à propos du JavaScript. Revenons au CSS. Je vais masquer la barre latérale par défaut. Pour cela, changeons sa bonne position. heure actuelle, c'est égal à zéro et nous avons besoin ici de -40 rampes, car la largeur de la barre latérale est égale à A couru. Ensuite, nous devons sélectionner un changement de classe, suivi de la barre latérale. Nous devons mettre la bonne position à zéro. Enfin, utilisons la transition avec les valeurs correctes et 0,5 s. Donc, si je clique sur l'icône, la barre latérale s'affichera avec une transition fluide et elle se fermera une fois que barre latérale s'affichera avec une transition fluide et elle se fermera une nous cliquerons à nouveau sur l'Eigen Très bien, la barre latérale se déplace, mais l'icône du menu ne change pas Comme vous le savez, nous avons dû le transformer en x. Mais avant cela , je vais faire en sorte que icône du menu se déplace lorsque vous cliquez. Je veux dire, il doit se déplacer dans la même direction que la barre latérale. Pour cela encore, nous devons utiliser un nouveau changement de classe, suivi du menu des hamburgers Et je vais changer sa bonne position. Faisons-en 33 rampes. Utilisez également la transition. Nous en avons besoin ici, non ? Et la durée de 0,7 s va être légèrement supérieure à la durée de la transition de la barre latérale Cela créera un bel effet Considérons donc que l'icône bouge avec une belle transition. Très bien, enfin, passons à la transformation de l'icône en x. Nous devons transformer les première et troisième lignes Quant à la deuxième ligne, nous devons d'abord la masquer. Changeons la couleur de fond car la barre latérale a un fond blanc et l'icône n'est pas tout à fait visible Je vais sélectionner à nouveau la ligne, car nous finirons par y ajouter le changement de classe. Changeons donc sa couleur de fond. Je vais utiliser ici valeur RGBA avec une couleur noire et une opacité de 0,8 Ensuite, je vais sélectionner les lignes avec les noms des classes individuelles. Nous allons sélectionner la première ligne. Ainsi, une fois que nous avons cliqué sur l'icône, la première ligne doit pivoter et légèrement bouger dans les deux sens Je suis sur les axes x et y. Nous devons donc effectuer une transformation avec la fonction de rotation. Je vais faire pivoter les lignes de 45 degrés. En ce qui concerne la fonction de traduction, je vais passer ici 0,3 RAM puis 0,8 rampe. Comme nous l'avons dit, la deuxième ligne va être masquée. Sélectionnons-le et attribuons-lui opacité nulle et une visibilité masquée OK, c'est tout à propos de la deuxième ligne. Ensuite, nous avons la ligne 3. Je vais copier ce code à partir d'ici. Changeons le nom de la classe. Nous avons besoin de la ligne 3. Et nous avons également besoin de -45 degrés et de -0,8 RAM. D'accord ? Comme vous pouvez le voir, nous avons ici le x. Et pour que cela fonctionne, nous devons ajouter aux trois lignes le changement de classe. Très bien, donc le menu des hamburgers fonctionne parfaitement. Et en fait, nous décidons où nous avons presque terminé. La seule chose que je souhaite créer est l'info-bulle, qui devrait s'afficher une fois que nous survolons le x. Tout d'abord, je vais ajouter un élément span dans le menu hamburger Insérez vos vêtements. Comme vous le voyez à l'heure actuelle, cela a un peu embrouillé les lignes Nous devons le styliser. Alors allons-y et sélectionnons les os de la colonne vertébrale. Tout d'abord, définissons sa position, rendons-la absolue. Et puis définissez la propriété gauche sur cinq runs. L'élément de travée est positionné. Allons-y et définissons sa largeur et sa hauteur. Je vais régler sa largeur à dix RAM. En ce qui concerne la hauteur, adaptons-la à la RAM et changeons également la couleur d'arrière-plan. Je vais utiliser ici la couleur E pour être 646. OK, ensuite je vais placer le texte au centre et le personnaliser. Utilisons Flexbox. Nous avons besoin de Display Flex puis de Justify Contents Center. Alignez également les objets au centre. Changeons la couleur du texte et prenons également soin de la police. Je vais créer de la couleur blanche. En ce qui concerne la famille de polices, je vais utiliser le serif dA2 ci-dessous Modifiez ensuite la taille de la police, faites-en 1,6 RAM. Et créez également un espace entre les lettres en utilisant un espacement entre les mailles avec la valeur 0,1 ran Très bien, l'info-bulle est presque prête. Nous devons y ajouter une petite flèche sur le côté gauche. Et je vais le créer en utilisant un pseudo-élément antérieur. Nous allons donc sélectionner l'élément span avec les pseudo-éléments précédents. Vidons le contenu. Et position définie. Faites-le absolument. Pour le moment, le pseudo-élément n'est pas visible, mais nous allons corriger ce problème. Je vais créer sa forme l' aide des bordures. Nous devons donc définir la bordure sur les quatre côtés. Commençons par le côté gauche. Nous avons besoin d'une bordure gauche avec les valeurs que l'on a affichées en couleur unie et transparente. Ensuite, je vais utiliser la bordure, n'est-ce pas ? Valorise un RAM, solide, et l'appelant e est 646 Ensuite, je vais utiliser le bas de la bordure. Récupérons ces valeurs à partir d'ici et collons-les. Dupliquez ensuite cette ligne de code et déplacez-la du bas vers le haut. Maintenant, l'élément est visible, mais nous devons définir sa position. Portons sa première position à 50 %. Ensuite, je vais définir la position gauche. Supprimons deux RAM et utilisons également Transform. Traduisez y avec la valeur -50 %. Très bien, alors c'est ça. L'info-bulle est prête. Je vais le masquer par défaut. Et une fois que nous avons survolé l'icône, elle devrait s'afficher. Nous avons donc besoin ici d'une opacité nulle, d'une visibilité cachée. Ensuite, je vais sélectionner l'icône avec le pointeur de la souris, suivie de cet élément de plage Rendons l'opacité 1 et la visibilité visibles. Je vais également utiliser la transition avec toutes les valeurs et 0,2 s. Très bien, donc une fois que nous avons survolé l'icône, une info-bulle Mais en fait, nous avons ici un petit problème. Si je survole l'icône alors que la barre latérale est masquée, l'info-bulle s' affichera Nous n'en avons pas besoin, nous devons l'afficher une fois que l'icône est transformée en X. Et pour y parvenir, nous devons utiliser à nouveau le changement de classe. Très bien, maintenant tout fonctionne parfaitement de ce côté, mais c'est terminé 68. Projet 7 - Créer et styliser la section À propos de nous en utilisant la grille CSS: Il est temps de passer à la section suivante, qui sera la section À propos de nous. Jetons un coup d'œil au projet terminé et voyons à nouveau clairement ce que nous allons construire Voici donc la section À propos de nous. Il se compose d'un en-tête qui inclut le titre, le sous-jacent. Ensuite, en bas, nous avons quelques paragraphes avec des titres et des icônes Font Awesome Au centre de cette section, nous pouvons voir l'image de la maison. Cette section va être un peu simple, mais en même temps intéressante, car nous allons créer la mise en page à l'aide d'une grille CSS. Très bien, allons-y et commençons à créer le balisage HTML Je vais ouvrir cette balise de section juste après la barre latérale avec le nom de la classe qui nous concerne Ensuite, je vais insérer ici l'en-tête. En fait, nous aurons également le même en-tête dans une autre section. Je vais donc utiliser ici quelques noms de classe courants, disons un en-tête de section. Ainsi, comme nous l'avons dit, l'en-tête sera composé d'un titre et de l'autre ligne. Je vais donc instituer un élément de titre H1 avec le titre de la section de classe avec le contenu qui nous concerne Et en bas, ouvrez la balise div avec la classe sous-jacente. Très bien, nous devons ensuite nous occuper des services. Au total, nous en aurons six. Chaque service sera composé d'un titre, d'une police, d'une icône Awesome et d'un paragraphe. Tout d'abord, je vais ouvrir une balise div, qui sera l' enveloppe des services Ouvrez ensuite une balise div pour le service lui-même. Nous aurons donc deux parties principales dans chaque service. Le premier sera l'en-tête du service, qui inclura l'icône Font Awesome et le titre. Ensuite, à l'intérieur, ouvrez les éléments I avec les noms des classes, FAS, un stylo, une plume Ensuite, je vais ouvrir l' élément de titre h3 avec l'intérieur du contenu Et nous avons également besoin d'un paragraphe avec les textes du service de classe et avec du texte fictif Très bien, comme nous l'avons dit, au total, nous aurons six surfaces. Je vais donc dupliquer ce code cinq fois et modifier les noms de classe des éléments I ainsi que les titres. Le second sera donc du FAS, un rouleau à peinture qui se dirige probablement Faisons-le à l'extérieur. Ensuite, nous aurons le FAS, une sortie au crayon et le dessin des titres Ensuite, la prochaine sera la peinture FASFA, la décoration au pinceau. Ensuite, nous allons combiner la règle FASFA. Et le titre sera la planification. En ce qui concerne le dernier service , utilisons la classe FAR comme bâtiment et l'exécution du titre. Très bien, nous avons donc ici les services. La seule chose à faire en ce qui concerne le balisage HTML est d'ajouter l'image Je vais donc ouvrir la balise div, qui sera l' enveloppe de l'image Attribuons à la classe About Us une enveloppe d'image qui ouvre la balise d'image elle-même. Dans l'attribut source. Spécifiez le chemin de l'image. Nous avons besoin de House point PNG dans le dossier des images. D'accord, c'est donc tout à propos du balisage HTML. Tout est prêt pour commencer à écrire le CSS. Comme je l'ai dit, la mise en page de la majeure partie de cette section sera créative à l'aide d'une grille CSS. Je vais donc passer le projet à Mozilla Firefox pendant un certain temps Parce qu'aujourd'hui, Mozilla Firefox dispose des meilleurs outils de développement pour le module de grille CSS. Cela rendra notre processus de travail plus pratique et plus flexible. Si vous ne connaissez pas le module de grille CSS, vous pouvez consulter notre tutoriel rapide sur le CSS sur YouTube. Vous trouverez le lien dans la description. Très bien, allons-y et commençons à écrire le CSS. Tout d'abord, je vais sélectionner les éléments de cette section. Définissons sa largeur. Faites-le à 100 pour cent Changez également la couleur d'arrière-plan. Je vais utiliser une couleur gris clair, F5, F5, F5. Et créez également de l' espace en bas en utilisant le rembourrage du bas avec la valeur 15 rampe OK, alors maintenant je vais personnaliser l'en-tête. Nous allons sélectionner l'en-tête de section. Dans un premier temps, nous devons centrer les éléments. Et pour cela, je vais utiliser Flexbox. Créons donc un conteneur Flex pour l'en-tête de section. Ensuite, nous devons changer de direction. Faisons-en une colonne. Et pour centrer les éléments flexibles, nous devons aligner les éléments au centre. En plus de cela, je vais créer de l'espace à l'intérieur de l' en-tête en utilisant du rembourrage Faisons du rembourrage sur les sept premiers RAM plutôt que zéro sur le côté droit, bronzage de Rome en bas et du zéro sur le côté gauche Très bien, donc l'en-tête est centré et je vais maintenant personnaliser le titre puis le soulignement Allons-y et commençons par le titre. Sélectionnons-le. Et tout d'abord, définissez la famille de polices. Dans ce cas, je vais utiliser une police appelée movie serif. Ensuite, augmentez la taille de la police, faites-en cinq rems. De plus, je vais alléger la police en utilisant font-weight 300 Changez ensuite la couleur. Je vais utiliser la couleur pour B, pour B, pour B. Et créer de l'espace bas en utilisant la marge, en arrondissant les six cercles du bas. Très bien, donc le titre est joli. Passons à autre chose et prenons soin du sous-jacent. Nous allons sélectionner les éléments. Définissez sa largeur et sa hauteur. Je vais régler la largeur à 12 RAM. Pour ce qui est de la hauteur, faisons-la courir à 0,3. De plus, afin de rendre le sous-jacent réalisable, nous devons définir la couleur de fond. Utilisons ici le C2 9525. Très bien, donc avec l' en-tête, nous avons terminé. Passons à autre chose et prenons soin de ces services. Comme je l'ai dit, je vais les aligner sur la grille CSS. Allons-y et sélectionnons le wrapper avec les services de classe Tout d'abord, définissons la largeur et la hauteur, les deux à cent pour cent, puis transformons les services en conteneur de grille à l' aide de la grille d'affichage. Donc, pour l'instant, rien n' est changé ici car nous n'avons pas encore défini de lignes et de colonnes. Au total, nous aurons donc 16 colonnes et six lignes. Nous devons donc définir les colonnes du modèle de grille. Utilisons la fonction de répétition et indiquons ici le numéro de la colonne 16 puis la taille de la colonne, une unité fractionnaire Ensuite, nous avons les lignes du modèle de grille. Nous aurons donc six rouleaux. Utilisez à nouveau la fonction de répétition, où l'argument six, en ce qui concerne la taille, je vais utiliser six RAM. Enfin, je vais créer un espace entre les lignes en utilisant l'écart entre les lignes de la grille avec une valeur pour R1 D'accord ? Comme vous pouvez le constater, les éléments ont changé de position. Cela s'est fait automatiquement et nous devons maintenant définir leurs positions manuellement et créer la mise en page. Avant cela, je vais inspecter la page et afficher la disposition de la grille. Sur le côté droit des outils de développement, nous avons une section de mise en page où nous pouvons trouver un élément div avec le service de classe Donc, si je coche ici, la petite case, la disposition de la grille s'affichera. Vous pouvez trouver ici les colonnes et les lignes avec les numéros de ligne appropriés. Mozilla, Firefox devront donc également afficher la disposition de la grille de cette manière. Très bien, je vais réduire la taille de l'image pendant un moment car je pense qu' elle est trop grande pour le moment Allons-y, sélectionnons Image et définissons sa largeur à 50 RAM. Ensuite, définissons les positions des services séparément. Pour les sélectionner séparément, je vais utiliser le sélecteur de nième enfant Commençons donc par le premier service. Sélectionnons-le avec le nième sélecteur d'enfant. Et comme numéro du service, spécifions-en un. Nous devons maintenant définir les numéros des lignes des colonnes de la grille et les numéros des lignes de la grille. Commençons par la colonne de la grille. Je vais placer le Service des forêts entre 4,7 lignes. Utilisons donc ici la barre oblique sept. En ce qui concerne la ligne de la grille, le service va être placé entre les première et troisième rangées. Passons au deuxième service. Je vais dupliquer ce code, modifier le numéro du service ainsi que le nombre de colonnes et de rangées de liquides. Donc, en cas de deuxième service, nous avons besoin des lignes de colonne de la grille numérotées 3.6. En ce qui concerne la ligne de la grille, ce sera 3,5. En fait, je vais définir rapidement les numéros de ligne pour le reste des services car vous l'êtes tous. Donc, la méthode que je vais utiliser pour les aligner. Ainsi, pour le troisième service, nous avons besoin d'une colonne de grille pour sept et d'une ligne de grille cinq moins un. Le suivant compte pour le service. Nous avons besoin d'une colonne de grille, avec les numéros de ligne 11,14. Asphaltez la ligne de la grille. Nous avons besoin de la version 1.3. Pour le cinquième service. Je vais définir la colonne de la grille comme 12, 15, S4, la ligne de grille dont nous avons besoin de trois et 5.4, le dernier élément Pour le sixième service, nous avons besoin des colonnes de la grille numérotées 11.14 En ce qui concerne la ligne de la grille, nous avons besoin de cinq moins un. D'accord ? Les six services sont donc alignés, mais ce n'est pas ce que nous voulons car l'image a perturbé la mise en page. Allons-y et définissons également sa position. Je vais définir la position de l'emballage. Utilisons la colonne de la grille et définissons-la sur 7.11. En ce qui concerne la ligne de la grille, je vais la régler sur 2.6. Nous avons maintenant une bien meilleure situation, mais nous devons ajouter quelques styles supplémentaires à l'emballage de l'image et à l'image elle-même afin de rendre la mise en page parfaite Je vais donc définir la largeur de l'enveloppe d'image à 200 %. En ce qui concerne l'image, réduisons également sa largeur à cent pour cent. De plus, nous avons besoin d'une couverture d'alimentation d'objets afin de maintenir la qualité de l'image. Et en plus de cela, je vais réduire légèrement l'opacité. Mettons-le à 0,8. Très bien, maintenant l'image est parfaitement placée et nous en avons terminé Occupons-nous des services. Je veux qu'ils occupent 100 % des cellules de leur grille. Choisissons donc le service et fabriquons à 100 %. Et crée également de l'espace en bas. Utiliser la marge inférieure pour courir. Ensuite, personnalisons les différents éléments du service. Commençons par l'en-tête du service, où se trouvent la police, l'icône Awesome et le titre. Nous allons donc sélectionner cet élément. Je vais en faire un conteneur flexible en utilisant Display Flex. Alignons également les éléments au centre et créons l' espace en bas en utilisant la marge inférieure d'une rampe. En fait, quelque chose ne va pas ici parce que le « là » doit être placé en haut du paragraphe. Vérifions le balisage HTML. Comme vous pouvez le voir, le paragraphe est placé à l'intérieur de l'en-tête et c'est une erreur. Il doit se trouver en dehors de l'en-tête. Nous allons donc rapidement résoudre ce problème pour tous les services. Hein ? Ensuite, je vais styliser l'icône Font Awesome. Allons-y et sélectionnons cet élément. Tout d'abord, augmentons la taille de la police, adaptons-la à la RAM. Changez ensuite de couleur. Je vais utiliser B trois fois. Et créez également de l'espace sur le côté droit de l'icône en utilisant la marge droite pour exécuter. Très bien, les icônes s'affichent bien et vient ensuite le titre Allons-y donc et sélectionnons ces éléments. Tout d'abord, je vais définir la famille de polices. Utilisons ici de Lou Da2. Serif. Modifiez ensuite la taille de la police, faites-en 2,6 RAM. Et définissez également la hauteur de ligne avec la même valeur, 2,6 RAM. En plus de cela, je vais alléger la police en utilisant une épaisseur de police de 400. Et crée un espace en bas en utilisant la marge inférieure pour exécuter. Très bien, le style de titre aussi. Enfin, nous devons nous occuper des paragraphes, sélectionner les textes de service. Dans un premier temps, définissez la famille de polices. Et dans ce cas, je vais utiliser Joséphine Slab Serif. Définissez ensuite la taille de la police, faites-en 1,6 RAM. Et je vais également utiliser la propriété d' alignement du texte avec une valeur de justification. Très bien, donc les paragraphes ont l'air bien. Et en fait, nous avons fini de travailler sur la section À propos de nous. Il est maintenant temps de passer à autre chose et de commencer à travailler sur la section suivante, qui sera la section d'équipe 69. Projet 7 - Créer et personnaliser les cartes avec Tilt: Tout d'abord, je vais vous rappeler ce que nous allons construire. Jetons donc un coup d'œil au projet terminé. Nous avons donc ici la section des équipes. Il se compose de l' en-tête et de trois cartes. Si je passe la souris sur les cartes, certaines informations avec un bouton apparaîtront Et on peut également voir que nous avons ici un effet de survol agréable et cool Le courant se déplace en fonction de la direction du curseur. Cet effet sera créé à l'aide de l'un des plugins JavaScript appelés JS. Très bien, alors voyons ce que nous allons construire. Comme d'habitude, commençons par le balisage HTML. Je vais ouvrir un tag de section juste en dessous de la section À propos de nous. Assignons-le à l'équipe de classe. Dans l'ensemble, nous aurons donc deux parties dans cette section. Le premier sera l'en-tête. En fait, je vais récupérer le code de la section précédente. Collons-le ici et changeons simplement le titre dont nous avons besoin ici, notre équipe. La deuxième partie de cette section sera consacrée à l'emballage des cartes, qui inclura les trois cartes Il s'agit donc d'une étiquette div ouverte avec un emballage de cartes de classe. Ensuite, nous avons besoin d'un autre div, qui sera la carte elle-même. Chaque carte sera donc composée de deux parties différentes. La première sera l'image. Ouvrons une balise div, qui sera l'enveloppe de l'image que je vais lui attribuer (class card image wrapper lui attribuer (class card image Ouvrez ensuite dans quelle cible elle-même. Spécifiez les parties de l'image. Nous avons besoin d'une image appelée Person one dot JPEG dans le dossier des images. Et je vais également attribuer à l'attribut alt la valeur, disons CEO. La deuxième partie de la carte contiendra les informations de la carte où nous aurons des informations sur la personne. Je vais donc passer ici les éléments du titre H2, qui incluront le nom complet de la personne Ensuite, nous aurons un autre titre, je veux dire, éléments de titre h3, qui préciseront la position de la personne Insérons votre PDG. Ensuite, nous aurons un petit paragraphe avec du texte fictif. Enfin, je vais insérer votre bouton avec le texte, en savoir plus. Très bien, nous avons donc ici la première carte, qui pour l'instant est plutôt moche parce que nous n'avons ici que du HTML pur Au total, nous aurons donc trois cartes. Dupliquons donc la première carte deux fois, puis apportons quelques modifications. Je vais changer le nom de l'image qui va être personne en JPG. Modifiez également l'attribut alt dont nous avons besoin ici designer. Le nom complet de la personne sera n Brown. Et le concepteur de positions. Ensuite, nous devons changer le nom de l'image pour la troisième carte, ce sera une personne au format JPG à trois points. L'attribut alt sera également architecte. Ensuite, je vais changer le nom complet, vais être mariée à. Et enfin, changez de position, non ? Architecte. Le balisage HTML est créé et tout est prêt pour commencer à écrire le CSS premier temps, je vais personnaliser l'ensemble de la section, puis nous allons passer à autre chose et utiliser le tilde J comme plugin Allons-y donc et sélectionnons les éléments de cette section. Je vais en faire un conteneur flexible en utilisant Display Flex. Changez également la direction dont nous avons besoin dans cette colonne. Ensuite, pour centrer les éléments flexibles horizontalement et verticalement, utilisons Justify Content Center et alignons les éléments au centre. Enfin, je vais créer de l'espace à l'intérieur de cette section à l' aide d'un rembourrage Faisons du rembourrage en haut. Zéro, puis cinq rem sur le côté droit, 20 sur la rampe en bas et cinq rem sur le côté gauche. Droite. Ensuite, je vais m' occuper de l'emballage des cartes. Allons-y et sélectionnons cet élément. Faites-en un conteneur flexible. Ensuite, je vais créer un espace entre les cartes en utilisant de manière uniforme l'espace de contenu de justification. Enfin, créons un espace en haut des cartes en utilisant la marge supérieure avec la valeur huit Ran. D'accord, comme vous pouvez le voir, les cartes sont placées horizontalement dans une rangée. Allons-y et personnalisons-les. Je vais jouer aux cartes en solo. Définissons sa largeur et sa hauteur. Je vais régler avec 237 RAM Quant à la hauteur, faisons-la 45 rem. Donc, pour l'instant, comme vous pouvez le voir, chacune des cartes a une largeur et une hauteur différentes parce que nous avons agrandi les images. Nous devons donc définir leurs tailles. Sélectionnons Image wrapper et définissons la largeur et la hauteur. Je vais régler les deux à 200 %. Sélectionnez ensuite l'image elle-même et définissez la largeur et la hauteur. Fabriquons les deux à cent pour cent et utilisons également un couvre-pieds pour objets. Comme vous pouvez le voir, nous n'avons pas ici l'espace entre les cartes car nous n'avons pas défini la largeur du wrapper Keras Attribuons-lui donc une largeur et mettons-la à 100 %. Très bien, nous avons maintenant de bien meilleurs résultats. Toutes les images ont la même taille. Allons-y et utilisons quelques styles supplémentaires. Je vais ajouter une ombre en utilisant box shadow avec les valeurs 01 exécutées pour la RAM. Et puis la valeur RGBA avec la couleur noire et le point d'opacité Pour. Ensuite, je vais ajouter des étoiles à l'enveloppe de l'image et à l'image elle-même. Donc, pour l'emballage, je vais définir la couleur de fond Faisons-en 262626. Et nous avons également besoin d' un rayon de bordure pour arrondir les coins Faisons en sorte que ce soit 0,5 rampe. Ensuite, je vais ajouter quelques étoiles à l'image. Je vais réduire légèrement l'opacité. Mettons-le à 0,8. Et nous devons également utiliser border-radius avec la valeur 0,5 rem Et en plus de cela, nous avons également besoin d' un rayon de bordure pour le panier afin de créer un rayon parfait pour la carte Faisons donc également une rampe de 0,5. Très bien, nous devons maintenant nous occuper des informations de la carte. Comme vous le savez déjà, il va être placé en bas et doit être caché. Et puis, une fois que nous survolons la carte, elle devrait s'afficher. Je vais maintenant le placer sur la carte. Et une fois que nous l'aurons personnalisé, nous nous occuperons de l'effet de survol Allons-y et sélectionnons les informations de la carte. Et que sa position soit absolue. Ensuite, nous avons besoin de la position relative de la carte car je vais positionner les informations de la carte en fonction de la carte, qui est l'élément parent. Définissez ensuite la propriété inférieure des informations sur la voiture et transmettez-la à Ram. Et créez également de l' espace à l'intérieur des éléments en utilisant du rembourrage, de la valeur à la rampe Très bien, allons-y et personnalisons les éléments individuels des informations de la carte Je vais commencer par un titre. Allons-y donc et sélectionnons-le. Définissez sa famille de polices. Je vais utiliser la police appelée ci-dessous, le serif A2. Changez ensuite la taille de la police, faites-la deux points par Ram. De plus, nous devons utiliser votre hauteur de ligne avec la même valeur 2,5 runs Alignez la police en utilisant une épaisseur de police de 300 et modifiez également la couleur. Disons que c'est bon, pour que le premier titre soit bon. pour que le premier titre soit bon Je voudrais y ajouter une petite ombre. En fait, je veux aussi l'ombre pour le reste des éléments. Je vais donc l'attribuer aux informations de la carte elle-même. Définissons donc l' ombre du texte avec les valeurs 0,2, 0,5 RAM et la valeur RGBA avec une couleur noire et une opacité Très bien, passons à autre chose et personnalisons le deuxième titre. Sélectionnons-le. Famille de polices définie. Je vais utiliser ici Moly Serif. Changez ensuite la taille de la police, convertissez-la en Ram. Allégez également la police en utilisant une épaisseur de police de 500, modifiez la couleur du texte. Je vais utiliser ici les huit appelés ou A5 à A12. Enfin, créons de l'espace en bas des éléments en utilisant la marge inférieure avec la valeur 1 run. Bon, c'est tout pour le deuxième titre, passons au paragraphe. Sélectionnons-la et définissons la famille de polices. Utilisons ici le serif dA2 ci-dessous. Ensuite, je vais modifier la taille de la police. Soulignons un point pour la RAM. Je vais également définir la hauteur de ligne. Dans ce cas, passons à 1,6 RAM. Modifiez l'épaisseur de la police. Utilisez ici 300. Ensuite, je vais également changer la couleur du texte. Allons-y, par exemple. Ensuite, je vais réduire légèrement la largeur du paragraphe. Portons-le à 80 %. Et créez également de l'espace en bas en utilisant la marge, du bas vers le bélier. Très bien, donc le paragraphe semble bon. Et le dernier élément que nous devons personnaliser ici est le bouton. Nous allons donc le sélectionner. Définissez sa largeur et sa hauteur. Je vais régler la largeur sur dix RAM. Quant à la hauteur, faisons-en trois RAM. Et changez également la couleur de fond. Passons à C29, 525. OK, ajoutons quelques étoiles supplémentaires au bouton. Je vais me procurer une bordure réductrice en volts. Utilisons la bordure aucune. Modifiez ensuite la famille de police. Utilisons ci-dessous le serif A2. Ensuite, je vais définir la taille de la police. Soulignons un point pour la RAM. Et définissez également la hauteur de ligne. Faites-le 1,5 rem. Pour ce qui est de la couleur. Allons-y. Très bien. Enfin, je vais arrondir légèrement les boutons et créer un petit effet d'ombre Utilisons border-radius avec la valeur 0.3 ramp. Et utilisez également box-shadow avec les valeurs 0,1 rem, 0,8 RAM, et la valeur RGBA avec une couleur plate et le point d'opacité du bouton est personnalisée et nous sommes prêts à créer un effet prêts à créer un Dans un premier temps, changeons la position des informations sur la voiture et masquons-les. Nous avons besoin ici que la propriété de Watson soit égale à zéro. Et nous avons également besoin d'une opacité nulle et d'une visibilité cachée. Ensuite, je vais sélectionner une carte avec toutefois, suivie des informations de la carte. Une fois que nous avons survolé la carte, nous devons déplacer les informations de la carte vers le haut et les rendre visibles Nous devons donc acheter une propriété avec une valeur RAM plutôt qu'une opacité nulle et une visibilité visible Et en plus de cela, utilisons transition avec les valeurs toutes et 0,3 s. Très bien, comme vous pouvez le voir, l'effet de survol fonctionne En fait, je voudrais ajouter une dernière chose. Une fois que nous avons survolé la carte, je veux la rendre légèrement plus foncée Nous allons donc sélectionner la carte avec. Ensuite, il doit être suivi de l'image. Diminons l' opacité, mettons-la à 0,5. Et utilisez également les valeurs de transition, opacité et 0,3 s. D'accord, comme vous pouvez le voir, tout fonctionne parfaitement et en fait, nous sommes prêts à utiliser le plugin appelé tilde J S. Tout d'abord, je vais visiter son site Web rechercher tilde Voici donc le site web du plugin Tildes JS. Vous trouverez ici différentes informations. Je suis dans les différents usages du plugin avec différentes options. Nous avons également ici les instructions pour utiliser ce plug-in. Je vais cliquer sur le lien de téléchargement. Nous allons accéder au référentiel GitHub où nous pouvons trouver différents fichiers et dossiers Nous devons aller dans le dossier source. Vous pouvez trouver le dossier ici. Ouvrons-le. Voici donc le code complet de ce plug-in. Je vais le copier. Cliquez sur le bouton Modifier ici, sélectionnez le code dans son intégralité et copiez-le. Accédez ensuite au code VS et créez un nouveau fichier appelé tilde point js et collez ici le code Ensuite, nous devons lier ce fichier au document HTML. Ouvrons donc la balise de script. Et dans l'attribut source, spécifiez le chemin du fichier. En plus de cela, nous devons également intégrer le jQuery. Allons-y donc et recherchons jQuery CDN. Accédez au premier lien. En fait, vous pouvez choisir ici différentes versions de jQuery. Je vais cliquer sur la version décompressée et récupérer le lien Collons-le ici. Très bien, c'est tout pour la configuration de Tilt JS. Revenons au site Web. Donc, comme je l'ai dit, ici, nous avons des effets différents avec les instructions. Vous pouvez utiliser un effet de parallaxe, des reflets, continuer à voter, etc. Dans notre cas, je vais utiliser le modèle de base. Donc, si nous souhaitons utiliser différentes options, vous pouvez trouver les instructions ici. La seule chose que nous devons faire est d'attribuer à toutes les cartes l'attribut appelé data tilde Allons-y, utilisons le curseur multiple et insérons pour toutes les cartes un attribut appelé inclinaison des données. Très bien, donc si je passe la souris sur les cartes, l'effet fonctionnera Je trouve que c'est plutôt sympa et cool. Enfin, nous en avons terminé avec la section consacrée à l'équipe et nous pouvons passer à la section suivante. 70. Projet 7 - Créer et styliser la section de conception: Jetons un coup d'œil à la version finale du projet. La section suivante sera donc la section de contact. Il a un fond sombre et le formulaire de contact lui-même est placé au centre de cette action. Il se compose de deux parties. Sur le côté gauche, nous avons une image en arrière-plan. Sur le côté droit, vous pouvez voir ici le titre, quelques champs de saisie et le bouton d'envoi. Chaque champ de saisie possède l'étiquette qui se déplace facilement vers le haut une fois que nous nous concentrons sur les champs. C'est donc ce que nous allons créer avant de commencer à créer le balisage HTML Je vais corriger un petit problème Si je clique sur l'icône du menu et que j'affiche la barre latérale, vous remarquerez qu'elle se retrouve derrière les cartes Donc, pour résoudre ce problème, je vais utiliser la propriété z-index avec une valeur plus élevée, disons 100 D'accord, maintenant le problème est résolu et nous pouvons commencer à écrire le balisage HTML pour la section contact Ouvrons les éléments de section avec le contact de classe. Ensuite, je vais ouvrir la balise div, qui sera l' enveloppe du formulaire de contact Donc comme nous l'avons dit, le formulaire de contact aura deux faces, gauche et droite. Ouvrons donc la balise div, qui se trouvera sur le côté gauche. Attribuons à la classe le contact de gauche. Ensuite, nous avons besoin de la balise div ouverte sur le côté droit avec le contexte de la classe, Le côté droit sera donc composé de deux parties principales. Le premier sera le titre. Quant au second, il doit être déformé. Ouvrons donc les éléments de titre H1 avec le titre de contact de classe Et en tant que contenu ici, contenu. Après cela, ouvrons les éléments formés. Le formulaire inclura trois groupes de saisie différents et le bouton d'envoi, qui est une balise div ouverte avec le groupe d'entrée de la classe Le premier groupe de saisie qui contiendra l'élément de saisie pour le nom complet et l'étiquette. Ouvrons donc la balise de saisie avec un type de texte et un champ de classe. Ensuite, nous devons étiqueter. Attribuons-lui une entrée de classe, une étiquette et instituons également le nom complet du texte. OK, dupliquons ce code. Changez ensuite le type de taxé en e-mail. Et aussi, au lieu du nom complet, insérons votre e-mail. Très bien, le troisième groupe de saisie va être différent car au lieu de l'élément de saisie, nous aurons une zone de texte. Ouvrons la balise div avec un groupe d'entrées de classe. Insérez ensuite. Nous avons besoin d' une zone de texte où se trouve le champ du nom de la classe. Ensuite, je vais créer une étiquette. Attribuons-lui un message de classe et instituons également le message de contenu. OK, enfin, je vais créer le bouton d'envoi. Faisons-le en utilisant l' élément d'entrée avec le type submit. Nous avons également besoin ici de class submit, btn et en tant que valeur que vous avez à l'intérieur, soumettez Très bien, c'est tout en ce qui concerne le balisage HTML de la section contact Nous devons maintenant commencer à écrire CSS et à personnaliser ces éléments. Allons-y et sélectionnons les éléments de cette section. Tout d'abord, définissez la largeur et la hauteur. Je vais me fixer à 200 %. Quant à la hauteur, faisons en sorte qu'elle corresponde à 100 % de la fenêtre d'affichage. Utilisez ici 100 vh puis changez la couleur de fond. Je vais utiliser ici la couleur à sept, à sept, à sept. Très bien, je vais maintenant placer le contenu au centre Et pour cela, utilisons Flexbox. Tout d'abord, je vais créer le conteneur flexible de l'élément de section à l'aide de Display Flex. Ensuite, pour centrer le contenu verticalement et horizontalement, utilisez justify-content center et alignez les éléments au centre Très bien, le contenu est donc centré et avec cette section, nous avons terminé Passons à l'emballage des contacts. Tout d'abord, définissons la largeur et la hauteur. Je vais faire en sorte que sa largeur soit 60 % S pour la hauteur. Faisons-en 75 rampes. Je vais également placer les parties gauche et droite côte à côte à l' aide de Display Ensuite, utilisons une couleur d' arrière-plan temporaire afin de rendre le contexte proprement dit visible. Utilisons la couleur blanche. Enfin, je vais créer un petit effet d'ombre. Utilisons Box Shadow avec les valeurs 03 RAM Sudden run et la valeur RGBA, la couleur noire et l'opacité 0,5 D'accord, c'est donc à ça que ressemble le rappeur de contact en ce moment Allons-y et commençons à personnaliser le côté gauche. Sélectionnez Contact. Il a ri. Dans un premier temps, définissons sa largeur. Je vais le porter à 35 %. Ensuite, je vais définir l' image comme arrière-plan. Mais tout d'abord, utilisons le gradient linéaire. Ensuite, je vais vous transmettre la valeur RGBA. Insérons ici 153 fois et l'opacité 0,6. Ensuite, je vais utiliser une autre valeur RGBA. Insérez ici 2023 fois et l'opacité 0,9. Ensuite, nous allons spécifier l'URL de l'image. Nous avons besoin de. Contactez PG dot JPG depuis le dossier des images. Mettons-le également au centre et ne répétons pas. Enfin, nous devons définir la taille de l'arrière-plan. Couvercle. Très bien, donc c'est à propos du côté gauche. Passons à autre chose et prenons soin du côté droit. Sélectionnez le contrat, non ? Il doit occuper le reste de la largeur. Nous allons donc changer la couleur d'arrière-plan à 65  %. Je vais utiliser votre couleur E. Et aussi définir le rembourrage. Je vais faire du rembourrage pour les trois premiers tours. Et puis faites bronzer la RAM sur le reste des sites. Débarrassons-nous également du fond blanc temporaire du rappeur de contact. Très bien, je vais maintenant personnaliser les éléments individuels sur le côté droit. Allons-y et commençons par le titre. D'abord. Définissons cette famille de polices. Je vais utiliser ici le serif dA2 ci-dessous plutôt que d'augmenter la taille de police, d'en faire six RAM Allégez également la police. En utilisant une épaisseur de police de 300. Changez la couleur, passez à sept, à sept à sept. Ensuite, je vais créer de l'espace en bas en utilisant la marge inférieure à cinq points. Enfin, placons-le au centre en utilisant le centre d'alignement du texte. Le titre est donc stylisé. Cela semble bon et je vais passer aux éléments du formulaire. Allons-y donc et sélectionnons-le. Tout d'abord, définissons sa largeur, faisons-la à 100 %. Créons le conteneur Form Flex à l'aide de Display Flex. Changez ensuite la direction, faites-en une colonne. Et alignez les éléments au centre en utilisant l'option Aligner les éléments au centre. Très bien, c'est ce qui est dit à propos des éléments formés. Ensuite, je vais personnaliser les champs de saisie. Je veux dire les entrées et la zone de texte. Ils ont le champ de classe commun. Allons-y donc et sélectionnons-le. Définissons la largeur, faisons-la 45 rem. Rendez ensuite la couleur d'arrière-plan transparente. Supprime également la bordure par défaut. Et puis définissez le bas de la bordure avec des points de valeurs. Pour courir. Je vais définir le style de la bordure en deux pointillés Définissez ensuite la couleur 636363. D'accord, ajoutons quelques étoiles supplémentaires aux champs. Je vais créer de l' espace haut et en bas en utilisant la marge. Faisons trois RAM et zéro. En plus de cela, je vais utiliser du rembourrage. Réglons le rembourrage sur un rem en haut. Sur le côté droit, en bas. Sur le côté gauche, mettons-le à zéro. Ensuite, je vais définir la famille de polices. Dans ce cas, utilisons une police appelée Molly serif. Définissez ensuite la taille de la police, faites-en 1,6 RAM. Et change de couleur. Utilisez-le ici pour b trois fois. Très bien, les champs de saisie semblent donc assez bons. Je vais maintenant définir la hauteur des entrées et de la zone de texte séparément. Donc, d'abord, sélectionnons les entrées et disons bonjour à la RAM. Sélectionnez ensuite la zone de texte. Donc, dans le cas de la zone de texte, je vais définir la hauteur maximale et la largeur maximale. Parce que comme vous le savez, nous pouvons modifier la taille du champ manuellement et cela casserait la mise en page. Nous devons donc désactiver cette option. Réglons la hauteur maximale à sept rampes Quant à la largeur maximale, faisons-la 45 Brand. Très bien, voyons les entrées et la zone de texte. Ensuite, nous devons nous occuper des étiquettes. Ils doivent être placés dans les champs de saisie par défaut. Sélectionnons l'étiquette et définissons la position. Je vais le rendre absolu. Ensuite, nous devons nous positionner par rapport au groupe d'entrée. Parce que c'est l'élément parent. Définissez ensuite la propriété de gauche comme zéro. Selon la position inférieure. Nous allons le définir séparément pour les entrées et la zone de texte. Alors dans un premier temps, définissons ici la famille de polices. Faites-en un serif dA2 agréable au lieu d'augmenter la taille de police. Faites-le fonctionner en 1.8. Changez la couleur. Je vais utiliser ici la couleur pour B, pour B, pour B. Et ensuite transformer le texte en majuscules Comme vous le savez, les étiquettes doivent être placées à l'intérieur des éléments d'entrée. Et nous ne pourrons pas nous concentrer sur les entrées. Par conséquent, je vais utiliser ici des événements de type pointeur, aucun. Très bien, sélectionnons les étiquettes des entrées et de la zone de texte séparément et définissons la position inférieure Je vais commencer par l'étiquette d'entrée. Faisons la position la plus basse. Nous avons couru. En ce qui concerne la zone de texte. Je veux dire l'étiquette de la zone de texte, qui contient un message de classe. Passons à la sixième position inférieure. Très bien, donc tout est prêt pour créer des effets de focus Je vais faire deux choses différentes. Lorsque je me concentre sur les champs de saisie, je souhaite transformer la bordure en pointillés en une bordure pleine ainsi que plusieurs libellés et la réduire légèrement Je vais donc sélectionner le champ avec la pseudo-classe focus et définir le style du bouton de bordure Rendez-le solide. Donc, une fois que je me suis concentré sur les champs de saisie, la bordure changera et se transformera en résolution. Bon, passons maintenant à l'étiquette. Je vais sélectionner le champ sur lequel se concentre le focus. Nous devons maintenant sélectionner l'étiquette. Et dans ce cas, nous devons utiliser l'un de ces combinateurs CSS appelé sélecteur général de frères et sœurs, qui est exprimé par le Je vais donc passer à l'étiquette en utilisant la fonction Transform Translate. Nous devons donc traduire la valeur de Y. Let's Institute moins trois points Je vais également réduire la taille de police de l'étiquette. Faisons en sorte de courir. Enfin, utilisez la transition avec les valeurs 0 et 0,3 s. Ainsi, si je clique à nouveau et que je me concentre sur les champs de saisie, les étiquettes se déplaceront correctement. Très bien, nous en avons presque terminé avec la section contact. La dernière chose à faire est de styliser le bouton d'envoi. Allons-y donc et sélectionnons ces éléments. Tout d'abord, définissez la largeur et la hauteur. Je vais régler la largeur à 45 RAM. Pour ce qui est de la hauteur. Faisons cinq rem. Changez ensuite la couleur d'arrière-plan. Utilisons ta couleur. Voir 2955 Changez ensuite la couleur du texte, faites-le blanc. Supprime la bordure par défaut en utilisant le port ou aucun. Et créez de l'espace en haut en utilisant la marge supérieure pour courir. Le bouton est bien plus beau, mais nous devons y ajouter d'autres styles. Définissons la famille de polices. Je vais utiliser ici la police appelée Moly serif. Changez ensuite la taille de la police, convertissez-la en Ram. Allégez également la police à l' aide de font-weight 300. Transforme le texte en majuscules. Ensuite, je vais créer un espace entre les lettres en utilisant l' espacement des lettres avec la valeur point à arrondir. Ensuite, pointez le curseur Enfin, je vais créer des effets d'ombre pour le texte et pour le bouton lui-même. Utilisons donc l'ombre du texte avec les valeurs 0,1 rem, 0,3 rem et la valeur RGBA avec une couleur noire et une opacité de Ensuite, je vais dupliquer cette ligne de code, modifier le texte et la boîte et également définir l'opacité à 0,3 Très bien, alors c'est ça. La section contact est prête et nous pouvons maintenant passer à la partie suivante de notre projet, qui est le pied de page Le pied de page sera simple. Nous avons ici juste le texte du copyright et quelques icônes de réseaux sociaux. Une fois que nous aurons créé un filtre, nous créerons ce bouton de défilement fixe, qui nous permettra de faire défiler la page jusqu'en haut Très bien, allons-y et commençons à créer le balisage HTML Et je vais ouvrir la balise de pied de page avec le pied de page de la classe. Ensuite, je vais ouvrir la balise div, qui va encapsuler le contenu de la photo Attribuons donc le contenu du pied de page de cette classe. À l'intérieur de l'élément div, nous aurons deux parties Le premier sera le paragraphe avec un texte de copyright. Ouvrons donc l'élément p avec un copyright de classe. Et puis Insérez, utilisez du texte. Je veux dire copyright suivi du signe copyright, qui doit être exprimé par l'entité HTML5 Nous devons écrire ici l' esperluette, le copier, le point-virgule, puis le code 2020 et le créer puis Tous droits réservés. Quant à la deuxième partie, ce sera la liste des icônes des réseaux sociaux. Ouvrons la balise div avec la liste sociale de la classe. Et passez ici quelques éléments de lien avec les icônes Font, Awesome. Le premier sera Facebook. Utilisons donc les noms de vos classes. Fab, FA dash, Facebook, dash F. Dupliquons cette ligne de code deux fois et changeons les noms des classes Pour le second, nous avons besoin d'un BFA, Instagram. Pour ce qui est du troisième, ce sera Twitter. Très bien, le balisage HTML est donc prêt pour le pied de page. Allons-y et personnalisons-le rapidement. Sélectionnez le pied de page et définissons sa largeur et sa hauteur. Je vais me fixer à 200 %. Quant à la hauteur, faisons-en 15 RAM. Changez ensuite la couleur d'arrière-plan. Je vais utiliser ici la couleur 17181. Ensuite, je vais placer le contenu du filtre au centre. Et pour cela, utilisons Flexbox. Nous avons besoin de Display Flex. Justifiez ensuite le centre de contenu et alignez le centre des éléments. Très bien, passons à autre chose et personnalisons le contenu du pied de page. Sélectionnons ces éléments et définissons la largeur. Je vais le porter à 60 %. Créez ensuite le conteneur flexible du contenu du pied de page à l'aide de Display Flex Ensuite, créez un espace entre les éléments flexibles. Je veux dire que le paragraphe et les icônes des réseaux sociaux utilisant le contenu de justification, l' espace entre les éléments est aligné correctement. Allons-y et stylisons-les. Je vais commencer par un paragraphe sélectionné et, tout d'abord, définir la famille de police. Je vais utiliser ici le serif dA2 ci-dessous. Définissez ensuite la taille de la police, faites en sorte qu'elle soit exécutée à 1.6 pour la couleur. Je vais le faire A7, A7, A7. Comme vous pouvez le constater, le paragraphe est stylisé. Passons maintenant aux icônes des réseaux sociaux. Je vais sélectionner l'élément de lien dont la marge est définie. Je vais le mettre à zéro en haut et en bas. En ce qui concerne les côtés gauche et droit, faisons-le courir. Sélectionnez ensuite les ions, augmentez la taille de la police, faites-la fonctionner. Et change de couleur. Ici. Colorez l'A7 trois fois, non ? Donc, avec le pied de page, nous avons terminé. Il est personnalisé et nous devons maintenant nous occuper de ces boutons d' exploration. Tout d'abord, créons le bouton dans le fichier index.html. En fait, le bouton sera représenté sous forme de lien. Assignons-lui donc la classe scroll, BTN Puis insérons ici les éléments I avec les classes FAS, flèche vers le Très bien, allons-y et stylisons le bouton. Sélectionnez-le. Il doit avoir une position fixe. Ensuite, définissez les droits et les propriétés inférieures. Je vais leur faire cinq rem à tous les deux. Réglez ensuite la largeur et la hauteur. Je vais les régler tous les deux à 4,5 rem. Et définissez également la couleur de fond. Utilisez votre couleur E2, B64 six. Très bien, nous avons donc ici le bouton et nous devons maintenant styliser l'icône Font Awesome Il doit être placé au centre de la boîte. Utilisons Flexbox. Nous devons ici justifier le centre de contenu et également aligner le centre des éléments. Cette taille de police accrue, parviendra à Ram. Changez la couleur, faites-la blanche. Je vais également créer un petit effet d'ombre en utilisant Box Shadow avec les valeurs 0,11, 0,6 RAM et le RGBA avec une couleur noire et l'opacité pointant Et enfin, utilisez la valeur du rayon de bordure 0,3 ran. Hein ? Le bouton est donc prêt, ne reste plus qu'à le faire fonctionner. Pour cela, je vais utiliser quelques lignes de JavaScript. Donc, une fois que nous aurons cliqué sur le bouton, nous attribuerons aux éléments HTML une propriété appelée comportement de défilement. Et nous allons le régler pour qu'il soit fluide. Ensuite, au bout d'une seconde, nous le retirerons. Parce que si nous ne le faisons pas , le défilement fluide fonctionnera. Si nous cliquons sur l'un des liens de la page. Allons-y et tout d'abord, sélectionnez le bouton de défilement avec la méthode de sélection de requêtes Attachez-y ensuite un écouteur d'événements. Je vais transmettre votre événement de clic et la fonction flèche. Ensuite, nous devons sélectionner les éléments HTML. Utilisons à nouveau la méthode de sélection de requêtes. Utilisez ensuite le style et la propriété appelée comportement de défilement. Comme nous l'avons dit, nous devons le régler pour qu'il soit fluide. Ensuite, afin de supprimer la propriété des éléments HTML. Après 1 s, je vais utiliser la méthode appelée setTimeout, qui prendra un argument sera la fonction de rappel Et il sera exécuté après 1 s. Une fois que nous aurons cliqué sur le bouton. Reprenons cette ligne de code à partir d'ici. Collez-le. Et au lieu de lisse, utilisons onset. Et nous devons également utiliser le deuxième argument, mille, qui correspond à mille millisecondes Donc, si je clique sur le bouton, nous naviguerons facilement vers le haut de la page. Très bien, alors c'est ça. Nous avons créé toutes les sections de nos projets, et il est maintenant temps de le rendre réactif aux différentes tailles d'écran. 71. Projet 7 - Rendre le projet réactif et créer le spinner de chargement: Allons-y et inspectons la page. Passez ensuite en mode réactif. En fait, j'ai déjà préparé différents points de rupture. Où allons-nous apporter des modifications ? Nous ne perdrons donc pas de temps là-dessus. Le premier point d'arrêt sur lequel nous devons apporter des modifications sera de 1 500 pixels Nous allons donc créer une requête multimédia CSS et spécifier une largeur maximale de 1 500 pixels Au point d'arrêt, je vais légèrement modifier la position de l'image dans la section À propos de nous Allons-y, sélectionnons l'enveloppe de l'image et définissons ses numéros de ligne de grille comme trois, n moins un Ensuite, je vais réduire légèrement la largeur de la carte. Nous allons donc le sélectionner et définir la largeur. Pour la RAM. Ensuite, je vais m' occuper du rappeur de contact. Je vais augmenter sa largeur et diminuer sa hauteur. Alors sélectionnons Contact Rapper. Réglez sa largeur à 8 %. Pour ce qui est de la hauteur, je vais lui donner 65 rampes. Très bien, donc la dernière chose que je vais faire est d'augmenter la largeur du contenu du pied de page Allons-y, sélectionnons cet élément et définissons sa largeur à 8 %. OK, alors c'est ça. Nous n'avons pas besoin d'autres modifications sur 1 500 pixels. Allons-y et travaillons sur le prochain point de rupture, qui sera de 1 400 pixels Je vais donc créer une nouvelle requête multimédia CSS d' une largeur maximale de 1 400 pixels La première chose que je vais faire est donc de personnaliser les éléments de la bannière. J'ai créé le paragraphe d'en-tête et le Bateson. Allons-y donc et commençons par le titre. Je vais modifier la taille de la police. Faisons-en six RAM. Diminuez ensuite la hauteur de ligne. Faites-en sept. Courez. Ensuite, je vais sélectionner le paragraphe de la bannière. Diminons la taille de sa police, faisons-en trois rampes. Et sélectionnez également le bas. Diminons sa largeur, faisons-en 20 RAM. Changez ensuite la hauteur. Je vais le régler à cinq rem. En ce qui concerne la taille de la police, arrondissons-la à 1,6. Très bien, donc l' en-tête semble bon. Vérifions la barre latérale. Comme vous pouvez le constater, nous devons réduire légèrement la taille de police des éléments de menu. Allons-y, sélectionnons le lien du menu et réduisons sa taille de police à trois rampes. Hein ? Ensuite, occupons-nous de la section À propos de nous. Je vais modifier légèrement la disposition des services. Allons-y, récupérons le code à partir d'ici, collez-le et modifiez les numéros de ligne des colonnes de la grille. En fait, nous devons supprimer la ligne de grille de chaque service. Modifiez ensuite les numéros des lignes des colonnes de la grille. Donc, pour le Service des forêts, il nous en faut 37. Alors ça va être 26. Pour le troisième élément, il nous en faut 37. Ensuite, pour le prochain, ce sera 11, 15, puis 16. Encore une fois, 11, 15. Très bien, donc la section À propos de nous semble bonne. Et en fait, nous n'avons pas besoin d'autres modifications sur ce point d'arrêt Passons à la suivante, qui sera de 1 300 pixels. Allons-y et créons une nouvelle requête multimédia CSS d' une largeur maximale de 1 300 pixels Nous devons nous occuper de l'équipe et de la section des conflits à ce point de rupture Toutes les autres sections ont l'air bien. Commençons par la section consacrée à l'équipe. Sélectionnons-le et réduisons le rembourrage en bas Faisons-en cinq rampes. Sélectionnez ensuite l'emballage des cartes. Donc, au point d'arrêt, je vais changer de direction. Faisons-en une colonne. De plus, pour placer les cartes au centre, utilisez Aligner les éléments au centre et modifiez la marge en haut. Allons-y pour Ran. D'accord, nous devons ensuite créer un espace entre les cartes. Sélectionnons-le et définissons la marge inférieure avec la valeur huit arrondis. OK, alors après ça, occupons-nous de la section contact. Sélectionnons Contact Rapper. Je vais augmenter sa largeur. Portons-le à 90 %. Et diminuez également la hauteur. Je vais le régler à 55 cartouches. Ensuite, sélectionnons le titre du contact et changeons l'espace en bas. Réglons la marge inférieure sur la rampe. Ensuite, je vais sélectionner le champ. Je veux dire les entrées, la zone de texte et la marge de modification. Faisons deux rem en haut et en bas et zéro sur les côtés gauche et droit. D'accord ? Comme vous pouvez le voir, avec 1 300 pixels, nous avons terminé Passons au point d'arrêt suivant, qui sera de mille pixels. Alors allons-y et créons un nouveau média. Spécifiez ici la largeur maximale en milliers de pixels. Je vais donc dans un premier temps personnaliser la bannière. Sélectionnons l'élément de titre. Changez la taille de la police, faites-en cinq rampes. Diminuez ensuite la hauteur de ligne. Faites-en six. A couru. Ensuite, je vais sélectionner le paragraphe. Diminons la taille de sa police et faisons en sorte qu'elle fonctionne à 2.5. Après cela, nous avons besoin d'un bouton. Je vais réduire sa taille. Faisons en sorte que sa largeur de rampe soit 18. Réglez ensuite sa hauteur sur quatre RAM. Et modifiez également la taille de la police, faites-en 1,5 tour. Très bien, donc le binaire semble bon. Passons à la section À propos de nous. Ainsi, sous le point d'arrêt, nous n'avons plus besoin de la disposition en grille Je vais utiliser Flexbox. Je vais placer tous les services et l'image verticalement dans une colonne. Allons-y, sélectionnons les services et transformons-en un conteneur flexible. Changez ensuite la direction, faites-en une colonne. Et utilisez également aligner les éléments au centre. Hein ? Comme vous pouvez le constater, nous devons réduire la largeur des services. Nous allons donc sélectionner le service. Faites sa largeur pour deux RAM. Et définissez également la marge inférieure comme six lignes. Ensuite, nous devons prendre soin de l'image car elle est deux fois plus grande pour le moment. Donc, dans un premier temps, sélectionnons le wrapper et définissons la largeur à quatre pour qu'il s'exécute Ensuite, nous devons sélectionner l'image elle-même et définir sa largeur à 200 %. Très bien, avec la section À propos de nous, c'est terminé. Ça a l'air bien. De plus, nous n' avons rien à faire avec la section des équipes. Passons donc à autre chose et personnalisons la section contact. En fait, je vais complètement cacher le côté gauche. Nous allons donc sélectionner la conduite à gauche et régler sa largeur à zéro. Conformément au contrat, non ? Nous devons faire en sorte que sa largeur soit de 100 %. Très bien, occupons-nous des entrées et de la zone de texte. Je vais sélectionner un champ. Donnons une largeur de 55 rem. Ensuite, je vais sélectionner la zone de texte car nous devons définir la largeur maximale de la zone de texte. Mettons-le à 55 rem. Et modifiez également la largeur du bouton d'envoi. Faisons également 55 rem. Très bien, c'est donc tout à propos de la section contact. Passons à autre chose et personnalisons le pied de page. Je vais placer le paragraphe et les icônes des réseaux sociaux verticalement dans une colonne. Sélectionnons le contenu du pied de page et changeons de direction, transformons-en une colonne Ensuite, nous devons aligner les éléments au centre Également centre d'alignement du texte. Et je vais régler la largeur à 50 %. Après ça. Sélectionnons le paragraphe parce que je souhaite modifier l'emplacement du paragraphe et les icônes des réseaux sociaux. Je veux placer des icônes en haut. Changeons donc l'ordre du paragraphe, faisons-en un seul. Et définissez également la marge sur les trois premiers rangs. Très bien, c'est tout pour le pied de page et nous avons fini de travailler sur les milliers Passons à autre chose et créons le point d'arrêt suivant. Ça va faire 700 pixels. Nous allons donc créer un nouveau média et spécifier la largeur maximale. Faites-le 700 pixels. En fait, nous n'avons pas à faire grand-chose sur un point d'arrêt. Il suffit de personnaliser plusieurs éléments. Nous allons donc sélectionner le titre de la bannière. Je vais changer sa taille. Faisons en sorte que ce soit la taille de police pour la RAM. Et la hauteur de ligne 5. Rem. Sélectionnez ensuite Paragraphe et définissez sa taille de police sur, pour exécuter. Très bien, ensuite, occupons-nous de la section contact. Je vais sélectionner un champ. Faisons en sorte que la largeur de la RAM soit 35. Sélectionnez également la zone de texte. Parce que là encore, nous devons définir sa largeur maximale. Faisons-en 35 RAM. Puis modifiez la largeur du bouton Soumettre. Je vais également le régler à cinq rem. Très bien, c'est tout pour les points d'arrêt. Enfin, nous devons personnaliser le projet. Au dernier point d'arrêt, il y aura 500 pixels. Nous allons donc créer un nouveau média et spécifier la largeur maximale à 500 pixels. Dans un premier temps, je vais réduire la taille de police du code HTML car cela se répercutera sur la taille de tous les éléments. Faisons donc en sorte que cette taille de police soit 45 %. Ensuite, prenons soin de la barre latérale. Je souhaite l'étendre à l'ensemble de la page. Rendons donc sa largeur à cent pour cent. En fait, nous avons ici un petit problème car une fois la barre latérale fermée, elle est toujours visible Nous devons donc définir sa position correcte et la ramener à moins cent pour cent. Maintenant, le problème est résolu. Ensuite, je vais modifier la position de l'icône du menu car elle est trop éloignée du bord. Nous devons donc sélectionner le menu des hamburgers, mais avec le changement de classe, définissons la bonne position à 38 tours Très bien. Ensuite, réduisons la largeur des services Sélectionnez le service et réglez sa largeur pour qu'il soit lancé au bélier. La dernière chose que je vais faire est d' augmenter légèrement la hauteur du pied de page Portons-en à 18. Courez. Très bien, enfin, nous avons terminé. Nous avons fait en sorte que le projet s'adapte à toutes les tailles d'écran. Si vous le vérifiez, vous constaterez qu'il s'affiche bien sur toutes les tailles d'écran. D'accord, nous avons donc presque terminé notre projet. La dernière chose que je vais faire est de créer un spinner qui apparaît avant de charger le projet Allons-y donc et commençons à créer le balisage HTML. Mais dans un premier temps, je vais cacher tout le contenant. Allons-y, sélectionnons le conteneur et attribuons-lui , n'en affichons aucun. Le conteneur est donc masqué. Mais en fait, nous voyons ici le bouton de défilement. Je suppose que je l'ai placé à l'extérieur du conteneur. Allons-y et insérons-le à l'intérieur OK, nous sommes donc prêts à créer le balisage HTML pour le spinner Je vais le créer en dehors du conteneur. Ce sont des développements ouverts, qui seront le conteneur rotatif Ensuite, nous avons besoin d'un élément div avec un cercle de classe dans lequel je vais placer huit éléments div vides heure actuelle, nous ne voyons ici qu'une page blanche car les développements sont vides et ils n'ont aucun style. Allons-y et commençons à écrire du CSS. Je vais sélectionner ces conteneurs pour peintres. Rendons sa position absolue. Ensuite, définissez les propriétés supérieures et manquantes, les deux à zéro. Je vais également définir la largeur et la hauteur. Faisons-le à cent pour cent. Pour ce qui est de la hauteur, je vais la faire correspondre à 100 % de la fenêtre d'affichage Après cela, je vais changer la couleur de fond. Faisons le noir en utilisant le 262626. Et je vais aussi placer le contenu au centre. Et pour cela, utilisons Flexbox. Nous devons ici justifier le centre de contenu et aligner les éléments au centre et aligner Très bien, ce que nous voyons ici n'est que le fond sombre Nous commençons maintenant à créer les cercles, puis nous allons les faire fonctionner. Les cercles seront représentés comme les pseudo-éléments ultérieurs des développements. Dans un premier temps, sélectionnons nos cercles d'emballage et définissons sa largeur et sa hauteur Faites-leur huit RAM. Et changez également la couleur d'arrière-plan. Je vais utiliser ici un arrière-plan temporaire. Faisons en sorte qu'il soit blanc. Je vais maintenant créer les cercles. Sélectionnons les éléments div. Est-ce qu'ils recherchaient des pseudo-éléments ? Tout d'abord, définissons le contenu. Je vais le vider. Changez ensuite la position, rendez-la absolue. Et je vais également attribuer aux cercles une position relative parce que je veux les positionner après les pseudo-éléments en fonction des cercles. Ensuite, je vais définir la largeur et la hauteur. Faisons en sorte que les deux rampes soient de 0,7. Ensuite, pour modifier la forme de l' élément et lui donner le rayon de la bordure américaine, encerclez le rayon de la bordure américaine avec la valeur 50 pour cent. Et changez la couleur de fond. Faites-en C2 955. Très bien, maintenant vous pouvez voir les cercles. En fait, ils sont placés l'un sur l'autre parce qu'ils ont tous la position définie sur absolue. Allons-y et définissons leurs positions manuellement. Je vais sélectionner les premiers pseudo-éléments à l' aide du nième sélecteur d'enfants Passons à 6,3 RAM. C'est probablement ce qui reste. Je vais aussi en faire 6.3 Rama. Passons à autre chose et positionnons le deuxième cercle. Je vais dupliquer ce code. Nous avons besoin d'un nième enfant pour créer une position difficile de 6,8 RAM Pour ce qui est de la gauche, ça va faire 5,6 tours. Très bien, allons-y et définissons rapidement les positions du reste des cercles Pour les troisièmes éléments, nous avons besoin de 7.1 RAM en première position. Quant à la position du laboratoire, elle sera de 4,8 RAM. Ensuite, pour les éléments suivants, je vais régler le top à sept points pour percuter. Comme je l'ai probablement laissé. Ce sera pour la RAM. Ensuite, pour le cinquième élément, la première position sera de 7.1 RAM. Comme il est probable que la position de gauche sera à trois points pour courir. Vient ensuite le sixième élément. Faisons en sorte qu'il arrête la position 6.8 de la RAM. Pour ce qui est de la gauche, ce sera 2.4. Et puis pour les septièmes éléments, prenons la position stricte 6.3 de la RAM. Et à gauche, 1,7 point. Pour le dernier article. Je vais régler la position sur 5,6 rampe et la position gauche sur 1,2 rampe. Hein ? Voici donc les positions de départ des cercles. En fait, nous n'avons plus besoin de ce fond blanc. Je vais donc m'en débarrasser. D'accord ? Nous devons maintenant créer les images-clés CSS. Dans les images-clés, nous devons définir une seule règle CSS. Les cercles doivent pivoter de 360 degrés. Créons donc des images-clés que je vais appeler cercles Donc, à zéro pour cent, au point de départ, nous devons transformer, faire pivoter pour atteindre zéro. Pour les 100 %. Je vais faire pivoter la transformation à 360 degrés. Les images-clés sont prêtes. Sélectionnons les éléments div et attribuons-leur la propriété d'animation afin de faire fonctionner ces styles CSS Nous avons donc besoin du nom de l' animation, qui est des cercles, suivi de la durée 1,2 s. Maintenant, comme fonction de chronométrage de l'animation, je vais utiliser Cubic Bezier, qui nous permet de créer des effets d'animation personnalisés En fait, vous pouvez visiter le site web de Cubic Bezier où vous pouvez définir manuellement les différents effets d'animation Et une fois que vous avez défini celui-ci, vous pouvez récupérer les valeurs à partir d'ici. Très bien, dans notre cas, je vais utiliser un Bézier cubique avec les valeurs suivantes C'est plus facile pour vos 0,50, 0,5, puis un Et je vais également utiliser ici une autre valeur appelée infini, qui nous permettra de lancer l'animation à l'infini. Comme vous pouvez le constater, les cercles bougent, mais ce n'est évidemment pas ce que nous voulons. La prochaine chose que je vais faire est de définir l'origine de la transformation. Lorsque nous utilisons la propriété transform, par défaut, l'élément se déplace en fonction du centre. Par défaut, l'origine de la transformation est définie sur le centre. Vous pouvez définir l'origine comme gauche ou droite. Vous pouvez également définir des origines séparées pour les axes X et Y. Pour obtenir plus d'informations sur la propriété d'origine de la transformation, vous pouvez rechercher l' origine de la transformation MTN et consulter cette page Nous avons donc ici quelques exemples qui montrent comment fonctionne la propriété d'origine de la transformation. Dans notre cas, je vais utiliser la troisième approche dans laquelle nous définissons séparément l'origine de l'axe X et de l'axe Y. Je vais donc utiliser l' origine de la transformation avec les valeurs suivantes. C'est une chute brutale de RAM. Et encore une fois pour RAN. Maintenant, comme vous pouvez le constater, nous avons un bien meilleur résultat, mais pas parfait. Nous devons légèrement modifier l'alignement du cercle. Et pour cela, je vais utiliser la marge. Réglons la marge à moins quatre rem en haut, puis à zéro sur le côté droit, à zéro en bas et à moins quatre rem sur le côté gauche. D'accord ? Maintenant, les cercles bougent assez bien. Mais encore une fois, ce n'est pas ce que nous voulons. Je vais ajouter des effets à l'animation en utilisant la propriété animation delay. J'ajouterai séparément aux développements différents délais. Ces valeurs vont être négatives. Lorsque nous utilisons les valeurs négatives avec la propriété de délai d'animation l'animation démarre comme si elle était déjà en cours de lecture depuis un certain temps. Par exemple, si l'animation doit être exécutée pendant, disons, 5 s. Et si vous définissez la propriété de délai de l'animation comme -2 s, l'animation démarrera dès la troisième. Deuxième. Cela omettra les 2 premières s. Très bien, sélectionnons donc l' élément div séparément et définissons la propriété de délai d'animation pour chacun Je vais commencer par la première division. Utilisons le sélecteur f child et définissons la propriété du délai d'animation sur -0,036 s. Ainsi si vous regardez de plus près les cercles, vous remarquerez que le premier se déplace différemment Allons-y et définissons également le délai d'animation pour le reste des cercles. Copions ce code, collez-le ici. Donc, pour le deuxième développement, je vais régler le délai d'animation à -0,072 s. Ensuite, pour la troisième division, nous avons besoin de -0,108 s. Ensuite, pour le suivant, je vais régler le délai d'animation à moins un pendant 4 s. Donc le cinquième élément. je vais régler le délai d'animation à -0,072 s. Ensuite, pour la troisième division, nous avons besoin de -0,108 s. Ensuite, pour le suivant, je vais régler le délai d'animation à moins un pendant 4 s. Donc le cinquième élément. Mettons-le à -0,18 s. Le prochain sera à -0,216 s. Pour l'objet Simons. Utilisons -0,252 s. Pour la dernière. Je veux dire, pour le huitième élément, réglons le délai d'animation à -0,288 s. Bon, maintenant le spinner fonctionne parfaitement et crée un effet vraiment sympa et cool Très bien, nous avons presque terminé. La seule chose que nous avons à faire est de réafficher le conteneur après quelques secondes. Je vais donc utiliser une technique similaire à celle que nous avons utilisée précédemment avec le nom de la classe de modification. Nous allons ajouter une nouvelle classe composée d'éléments du corps à l'aide de JavaScript. Ouvrons le fichier script.js. Une fois la page chargée, le spinner bougera pendant 4 secondes , puis le conteneur devrait s'afficher Donc, une fois la page chargée, après 4 s, nous devons ajouter deux corps, une nouvelle classe, disons display. En CSS, nous parviendrons à afficher le conteneur en utilisant cette nouvelle classe. Nous avons donc besoin de l'objet global de la fenêtre et nous devons y associer le gestionnaire d'événements OnLoad Elle doit être égale à une fonction de flèche. Cette fonction sera exécutée une fois la page chargée. Pour exécuter la fonction après un certain délai, nous pouvons utiliser la méthode appelée setTimeout Passons ici la fonction de rappel. Sélectionnez ensuite les éléments du corps à l'aide de la méthode QuerySelector. Comme nous l'avons dit, nous devons y ajouter un nouveau nom de classe. Nous devons donc classer les propriétés de liste, puis ajouter une méthode. Nous devons spécifier ici la classe. Disons affichage. La méthode setTimeout prend le deuxième argument, qui est la Dans ce cas, nous avons besoin de 4 000 millisecondes. Très bien, nous devons maintenant sélectionner un affichage de classe avec ce conteneur pénal et aussi le conteneur Commençons donc par ce contenant de cacahuètes. Nous devons le cacher. Nous avons donc besoin ici d' opacité nulle et d' une visibilité cachée De plus, je vais utiliser la transition avec les valeurs en une seconde. Et en plus de cela, pour que la transition fonctionne, je vais utiliser la propriété z-index avec la valeur la plus élevée, disons 300 Après cela, nous devons sélectionner à nouveau la classe d'affichage, suivie du conteneur. l'heure actuelle, sa propriété d'affichage est définie sur aucune et nous devons créer un bloc d'affichage. Alors maintenant, si je recharge la page, le spinner s' affichera pendant 4 s, puis le conteneur apparaîtra Pour que ces effets soient parfaits, je vais créer une petite animation pour les cercles. Je souhaite afficher et masquer les cercles avec un effet de fondu. Dans un premier temps, masquons les cercles par défaut. Utilisons ici l'opacité zéro et la visibilité cachée. Ensuite, je vais créer de nouvelles images-clés CSS. Appelons cela des cercles d'affichage. Nous allons donc passer de 0 % à 25 % en quelques étapes. Je vais utiliser l'opacité zéro et la visibilité cachée. Les cercles seront donc masqués pendant 1 s. Ensuite, de 25 % à 90 %, les cercles s'afficheront. Nous avons donc besoin d'opacité 1 et d'une visibilité visible. Et puis de 9 % à 100 %, les cercles commenceront à se cacher. Nous avons donc besoin ici d'une opacité 1 et d'une visibilité visible. Et puis à 100 %, nous avons besoin d'une opacité à zéro et d'une visibilité masquée Très bien, donc les images-clés sont prêtes. Attribuons aux cercles la propriété d'animation. Précisons les cercles d'affichage du nom et la durée de 4 s. Maintenant, nous pouvons voir que nous avons ici un bien meilleur effet. Très bien, nous avons enfin fini de travailler sur le projet J'espère que c'était intéressant et utile. vous a plu et vous avez appris quelque chose de nouveau. Passons à autre chose. 72. Projet 8 - Aperçu du projet: Très bien, il est donc temps de créer notre prochain projet, qui sera le clone de l'un des les plus populaires et les plus sites Web les plus populaires et les plus utilisés, appelé Paypal, créera l'interface utilisateur des différentes pages Je suis sur la page principale, les pages de connexion et d'inscription. Bien entendu, ce ne sera pas le clone exact avec toutes les fonctionnalités. Comme je l'ai dit, nous allons créer simplement une interface utilisateur avec HTML, CSS et JavaScript. Paypal a une apparence différente selon les pays. L'interface utilisateur change fréquemment de temps à autre. Ne vous inquiétez donc pas s'il ne s'agit pas du clone exact de l'interface utilisateur actuelle. Très bien, donc avant de passer directement à l'écriture du code, décrivons d'abord à quoi ressemble le projet Comme je l'ai dit, nous allons créer trois pages différentes, connexion principale et l'inscription. Nous allons commencer par la page principale. Il se composera de deux sections différentes. La première section sera la bannière avec navigation. Nous avons ici plusieurs éléments de navigation. Si je les survole, le menu déroulant s'affiche Il changera lorsque nous survolerons un autre élément de navigation De plus, nous aurons ici deux boutons différents pour la connexion et l'inscription. Si je clique dessus, nous accéderons à la page appropriée. La bannière sera donc suivie de la deuxième section. Il comprendra trois parties différentes avec une police, icônes géniales, des éléments de texte et des boutons. Ensuite, nous aurons cette section bleue avec différents paragraphes. Ensuite, nous allons créer cette petite section ici avec une image et trois étapes différentes. bas de page, vous trouverez un bouton pour vous inscrire, suivi du pied de page Très bien, alors voyons à propos de la page principale. Jetons un coup d'œil à la page de connexion. Elle sera assez similaire à la page de connexion d'origine. Nous aurons ici deux champs de saisie avec des boutons. C'est probablement la page d'inscription. Il sera composé de deux parties. Sur le côté gauche, nous aurons plusieurs images des clients. Quant au côté droit, il inclura deux options différentes. Que nous voulions créer un compte personnel ou professionnel. Très bien, c'est tout pour le projet. Comme d'habitude, nous allons le rendre réactif aux différentes tailles d'écran. Si j'inspecte la page et que je passe en mode réactif, vous verrez qu' elle est réactive. Une chose à noter ici, sur les tailles d'écran plus petites, nous n' aurons plus de listes déroulantes Ils apparaîtront dans le menu comme suit. OK, alors c'est ça. Nous sommes prêts à commencer à construire le projet. Passons donc à autre chose. 73. Projet 8 - Créer un balisage HTML pour l'atterrissage et définir les styles communs: J'ai créé un nouveau dossier sur le bureau appelé Wine House, dans lequel j'ai un autre dossier pour les images. Allons-y et ouvrons ce dossier dans le code VS. Je vais créer trois fichiers différents. Index.html, style.css et les scripts point js. Cela ouvre le fichier index.html et génère le document HTML de base. Je vais m'en servir. Mettons ici le point d' exclamation et appuyons sur Entrée ou sur Tab. Ensuite, je vais relier ces trois fichiers. Ouvrons donc la balise link et spécifions ici le chemin du fichier CSS. Ensuite, je vais ouvrir la balise de script en bas, au-dessus de la balise body de fermeture. Et dans l'attribut source, nous allons spécifier le chemin du fichier script.js. D'accord, en plus de cela, je vais utiliser l'une des polices Google tout au long de ce projet. Alors allons-y et récupérons le lien. Allons sur le site Web de Google Fonts et recherchons la police appelée cormorant Sélectionnons ici deux épaisseurs de police différentes , puis récupérons le lien. Je vais le coller dans l'élément principal. Ensuite, je souhaite modifier le logo dans la barre de titre. Nous devons ouvrir la balise de lien en tant que valeur de l'attribut REL. Nous avons besoin de cette icône. Ensuite, je vais spécifier le type. Il va être imagé en PNG. Enfin, nous devons spécifier le chemin de l'image et les attributs de référence H. Nous avons ici un dossier d'images, puis nous devons sélectionner un point de logo PNG. Enfin, modifiez le titre. Nous avons besoin de Wine House. Allons-y et exécutons le projet dans le navigateur. Pour cela, je vais utiliser l'un des packages de code VS appelé serveur live. Cela nous permet d'exécuter le projet dans le navigateur et d' apporter des modifications sans actualiser la page à chaque fois. Vous pouvez donc installer et utiliser cette extension. Le projet est donc en ligne dans le navigateur. Vous pouvez également voir ici le logo dans la barre de titre. Enfin, organisons un peu nos environnements de travail, plaçons l'éditeur et le navigateur, comme ça, et commençons. Très bien, nous allons donc créer et personnaliser chacune des pages séparément. Ensuite, nous allons programmer l'effet de défilement et d' autres choses. Allons-y et commençons à créer la balise open div du balisage HTML, qui sera le conteneur Ensuite, nous aurons d' autres éléments div. Ce sera l'emballage. Donc, dans l'ensemble, nous aurons cinq pages différentes, je veux dire, cinq sections différentes. Allons-y donc et créons les éléments de cette section pour chacun d'entre eux. Je vais lui attribuer la première section de classe. Ensuite, dupliquons-le quatre fois et changeons les noms des classes. Nous avons besoin de noms de classe de deux à cinq. Très bien, je vais donc commencer par la première section. Je veux dire la page d'accueil. Il inclut le titre souligné et l'arrière-plan en plein écran. Vous voyez ici les flèches de navigation et la barre de progression. Ils sont fixes et s' affichent sur toutes les pages. Nous nous occuperons d' eux un peu plus tard. OK, allons-y et ouvrons les éléments profonds de la première section. Cet élément aura deux classes différentes. Le premier sera le wrapper de section de classe commun Pour le second, ce sera le cours individuel. Je vais rapidement l'appeler section 1. En fait, nous avons également besoin de ce wrapper de section pour le reste des sections Copions donc cet élément et collez-le pour chacun d'entre eux. Nous devons également modifier les noms des classes. Nous avons besoin de deux nombres de deux à cinq. Bon, revenons à la première section. Nous devons insérer une balise div qui enveloppera le titre. Attribuons-lui un nom de classe, section, une enveloppe de titre Et passez ici les éléments de titre H1. Je vais lui attribuer un titre de section 1 de la classe. Et aussi, plaçons ici le texte suivant. Les meilleurs vins du monde. Voilà pour la première section. Maintenant, je vais commencer à écrire du CSS. Tout d'abord, je vais créer des styles communs. Sélectionnons chaque élément à l'aide d'un astérisque et mettons ici quelques styles courants et réinitialisés Je vais supprimer la marge et le rembourrage de chaque élément Mettons-les tous les deux à zéro. De plus, je vais créer un format de boîte, un border-box. Ensuite, je vais me débarrasser de certains styles par défaut. Je veux dire, définissons le plan sur non. Je vais également définir la décoration du texte à apprendre. Supprime ensuite les styles par défaut des éléments de la liste. Faisons en sorte que list-style-type n'existe pas. Enfin, je vais définir la famille de police pour qu'elle s'appelle Moran caramel Désolée Tout au long de ce projet, nous allons donc utiliser la RAM comme unité de mesure. heure actuelle, 1 g est égal à 16 pixels car la taille de police de l' élément HTML est égale à 16 pixels. Par défaut, je souhaite convertir 1 g en dix pixels. Et pour cela, nous devons réduire la taille de police de l'élément HTML, et nous devons la porter à 62,5 % La taille du titre a été réduite. Après cela, prenons soin de l'emballage. Je vais régler sa largeur et sa hauteur, toutes deux à 200 % de la fenêtre d'affichage Attribuons donc à la propriété width une largeur de cent fenêtres Pour ce qui est de la hauteur, je vais la mettre à cent pour la hauteur de la fenêtre d'affichage Ensuite, sélectionnons un élément de section lui-même et définissons la largeur et la hauteur, toutes deux à 200 %. Ensuite, je vais rendre sa position absolue. Et en plus de cela, nous devons rendre la position du wrapper relative car je veux positionner les sections fonction de leur élément parent, qui est le rappeur Ensuite, réduisons la position de décalage de la section à zéro. Après cela, je vais sélectionner la section wrapper. Définissons sa largeur et sa hauteur. Nous devons les hériter tous les deux de l'élément section. Définissons donc la largeur et la hauteur à hériter. Donc, à l'heure actuelle, la première section s'est retrouvée derrière les autres sections raison de la position absolue. Comme je l'ai dit, je vais d' abord le personnaliser, la première section. Donc, pour le placer en haut des autres sections, utilisons la propriété d'indice Z. Sélectionnez la première section et définissez l'index sur 50. Après cela, je vais définir l'image comme arrière-plan en plein écran Sélectionnons le wrapper de la section 1. Ensuite, je vais utiliser ici un dégradé linéaire. Mettons ici la couleur noire. Je veux dire RGBA avec trois zéros et une opacité de 0,5. Ensuite, nous avons à nouveau besoin de RGBA, couleur noire, mais avec une opacité différente. Mettons-le à 0,4. Ensuite, nous devons spécifier l'URL de l'image, le chemin de l'image. Nous avons un dossier appelé images, et nous devons sélectionner la section 1, PG point JPG. Ensuite, nous avons besoin de Center et également de no-repeat. Enfin, définissons la taille de l'arrière-plan, recouvrez-le. Très bien, comme vous pouvez le voir, nous avons ici une image d' arrière-plan en plein écran pour la première Maintenant, occupons-nous du titre de sortie, sélectionnons sa division d'emballage Tout d'abord, je vais vous faire sortir de la position de l'emballage Je vais placer le titre près du bas de la page. Rendons donc sa position absolue. Définissez ensuite la propriété supérieure et attribuez-la à 70 %. Pour ce qui est de la propriété de gauche, je vais la porter à 50 %. Et nous devons également transformer avec la fonction de traduction. Nous devons vous dépasser à -50  % dans les deux sens. Je veux dire, pour les axes x et y. Le titre est donc placé correctement, mais pour le moment, il n'est pas tout à fait visible. Alors allons-y et réglons ce problème. Je vais sélectionner le titre lui-même. Définissons sa taille de police. Dix RAM. Modifiez également l' épaisseur de la police, mettez-la à 300 et changez la couleur. Je vais utiliser ici, du blanc. OK, je vais maintenant transformer le texte en majuscules. Et créez également un espace entre les lettres en utilisant l'espacement des lettres. Avec la valeur 0,1, exécuté. Ensuite, ajoutons une bordure au bas du titre. Utilisez donc le bas de la bordure avec des points de valeur pour enfoncer. Et comme couleur, je vais utiliser le D5 avec quatre zéros Très bien, donc le titre est joli. Enfin, je souhaite l'aligner sur le côté droit et désactiver la sélection de l'utilisateur. Nous devons donc aligner le texte sur la valeur, n'est-ce pas ? Ensuite, l'utilisateur n'en sélectionne aucune. Très bien, voyons à propos de la première section. Ça a l'air sympa et nous pouvons passer à la seconde. Tout d'abord, nous allons créer le balisage HTML. La deuxième section inclura donc deux images différentes et le bouton. Allons-y et ouvrons une balise div avec la classe sale. Nous aurons donc une image et un bouton dans ce développement qui ouvriront l'élément IMG. Les attributs de la source. Je vais spécifier la partie de l'image. Nous devons sélectionner bag dot PNG dans le dossier des images. De plus, je vais attribuer à l'attribut alt la navigation arrière. Et nous devons également classer l'attribut avec une valeur pour revenir en arrière. Ensuite, insérons ici un bouton avec un nom de classe, sale, btn. Et pour ce qui est de la taxe, je vais passer votre commande. À présent. En plus de cela, je vais insérer ici une autre image, mais elle sera placée en dehors du div Précisons ici le chemin de l'image. Nous avons besoin d'une bouteille de vin au format PNG. Attribuons également à l'attribut alt la valeur de la bouteille de vin. Et en plus de cela, je vais ajouter un attribut de classe avec une bouteille de vin d'un bon rapport qualité-prix. D'accord, c'est donc tout à propos du balisage de la deuxième section heure actuelle, la deuxième section s'est retrouvée derrière la première. C'est pourquoi nous ne voyons pas ici certains éléments. Je vais résoudre ce problème en utilisant à nouveau la propriété index. Je vais changer ici le nom de la classe. Utilisons la section 2. instant, je voulais utiliser cette méthode, mais nous finirons par définir différentes valeurs de la propriété d'index pour toutes ces sections. Très bien, nous devons maintenant définir l'arrière-plan de la deuxième section Allons-y et récupérons ce code à partir d'ici. Ensuite, apportez quelques modifications. Nous avons besoin de l'emballage de la section 2. Modifiez ensuite les opacités. Faisons-les 0,8 et 0,9. Et modifiez également le nom de l'image. Nous avons besoin de la section 2, PG. D'accord ? C'est donc à cela que ressemble actuellement la deuxième section telle que nous l'avons ici, les barres de défilement. Et je veux m'en débarrasser. Pour cela, nous devons assigner à faire en sorte que le wrapper overflow soit masqué. Après cela, nous allons nous occuper de la disposition de ces éléments. Je vais utiliser Flexbox. Utilisons ici Display Flex. Ensuite, nous avons besoin d' aligner les éléments au centre pour centrer les éléments verticalement. Et je vais également utiliser le contenu de justification avec l'espace de valeurs de manière uniforme. Très bien, allons-y et commençons à styliser chacun des éléments la mesure où je vais sélectionner l' élément div avec la classe Sale Utilisons à nouveau les livres sur les flux. Je veux en faire un conteneur flexible. Ensuite, nous devons changer la direction du flux. Faisons-en une colonne. Ensuite, pour le centrage vertical et horizontal, utilisons aligner les éléments au centre et justifier le centre de contenu Très bien, après cela, nous allons personnaliser la première image Diminons légèrement l'opacité, la ramenons à 0,9. Et je vais aussi changer la largeur de l'image. Faisons en sorte que ce soit 45 rem par rapport au bouton sélectionné. Il y a une vente en classe, d'ailleurs. Tout d'abord, définissons la largeur et la hauteur. Je vais régler la largeur à 20 RAM. Quant à la hauteur, faisons-en cinq rampes. Ensuite, je vais m' occuper du texte. Augmentons la taille de la police. Va jusqu'à Ram. Modifiez également l'épaisseur de la police. Rendez-le plus léger. Transformez ensuite le texte en majuscules et créez un espace entre les lettres Faisons en 0,1 rep. D'accord, après cela, je vais définir la couleur d'arrière-plan sur transparent. Changez également la couleur, rendez-la blanche. Créez ensuite de l'espace en haut du bouton en utilisant la marge supérieure avec la valeur de la RAM. Enfin, créons une bordure avec les valeurs 0,1, une rampe continue et utilisons la couleur blanche. Très bien, donc le Buxton est personnalisé. Enfin, je souhaite créer un petit effet de survol. Je vais changer la couleur d'arrière-plan en survolant. Bouton sélectionné avec le pointeur de la souris. Changez la couleur d'arrière-plan. Utilisez ici à nouveau cette couleur rouge. Ensuite, pour rendre l'effet un peu plus fluide, utilisez la transition avec une valeur de couleur de fond et une durée de 0,2 s. Très bien, le bouton est stylisé et le dernier élément que je souhaite personnaliser est la deuxième image Allons-y donc et sélectionnons-le. Je vais modifier l'opacité. Je veux dire, je veux le réduire à 0,6 et aussi changer la largeur. Faites-en une rampe à deux voies. Très bien, nous avons terminé cette deuxième section. Il est stylé et nous devons passer à autre chose et nous occuper de la troisième section Ça va être, encore une fois , assez simple. Nous aurons l'image d'arrière-plan en plein écran. De plus, nous aurons d'autres images au centre de la page et ces textes ici. Alors tout d'abord, allons de l'avant et créons à nouveau le balisage HTML Nous aborderons ici trois éléments différents. La première sera la balise H1 ouverte avec le titre de la section 3 de la classe Et passez ici le texte, de la meilleure qualité. Ensuite, nous aurons l'image. Spécifiez le chemin de l'image dans l'attribut source. Nous devons sélectionner le point du cadre PNG. Ajoutez également ici la valeur de l'attribut alt, disons Grapes Frame. Ajoutez ensuite un attribut de classe avec un tiret IMG dans le cadre de valeur. Dupliquons cette ligne de code. Changez le nom de l'image dont nous avons besoin ici, grapes dot PNG. Également comme valeur de l'attribut alt. Je ne vais laisser ici que des raisins. L'événement a changé de classe. Nous avons besoin ici de raisins et de G. D'accord ? Donc pour le moment, cette section n'est pas visible et la raison est la même. Il s'est retrouvé derrière la deuxième section. Corrigeons donc à nouveau ce problème en utilisant la propriété z-index. Je vais changer ici le nom de la classe. Nous avons besoin de la section 3. Les éléments sont maintenant visibles. Allons-y et personnalisons cette section. Tout d'abord, définissons l'image comme arrière-plan en plein écran Sélectionnons l'emballage de la section 3. En fait, nous avons également besoin du code similaire pour la section des trois rappeurs. Récupérons donc ce code à partir d'ici. Collez-le pour le wrapper de la troisième section et apportez quelques modifications Changeons les opacités. Nous avons besoin ici de 0,3, 0,9, puis changez le nom de l'image. Il nous en faut trois. Enfin, nous devons ici justifier le contenu avec le centre de valeur plutôt que l'espace de manière uniforme. Très bien, c'est tout à propos de l'emballage. Allons-y et personnalisons chacun des éléments séparément. Je vais commencer par les images. Sélectionnons la première image, qui possède le cadre de classe IMG. Réglons la largeur à 100 rampes. Également. Je vais rendre sa position absolue. Et enfin, diminuez l' opacité, mettez-la à 0,5. OK, ensuite, je vais sélectionner cette deuxième image, Graphes IMG. En fait, nous avons également besoin de styles similaires pour la deuxième image. Allons-y, récupérons ce code à partir d'ici et changeons simplement les valeurs. Je vais régler la largeur sur quatre pour courir. En ce qui concerne l'opacité, faisons-la 0,7. Enfin, je vais m' occuper des éléments de titre. Allons-y donc et sélectionnons ces éléments. Tout d'abord, augmentons la taille de la police porter à 20 RAM. Changez ensuite la couleur. Je vais utiliser ici la couleur gris clair, je veux dire CCC, et aussi transformer le texte en majuscules Ensuite, nous devons faire pivoter le titre. Utilisons donc Transform avec la fonction de rotation. Je vais faire pivoter l'image de 20 degrés. Utilisez également votre centre d'alignement du texte. Le titre est donc beau. Je veux y ajouter un petit effet d'ombre et je vais également désactiver la sélection de l'utilisateur. Allons-y et utilisons l'ombre du texte avec les valeurs 0,5 RAM plutôt que 1,5 RAM. Et comme couleur, je vais utiliser 000, qui est la colonne noire. Enfin, utilisez vos utilisateurs, n'en sélectionnez aucun. 74. Projet 8 - Personnaliser et faire fonctionner la page d'atterrissage: Ouvrons les développements, qui seront des conteneurs. En fait, il inclura l'intégralité du contenu du projet. Nous allons donc créer le balisage de l'en-tête, puis nous y ajouterons du CSS Nous allons donc construire notre projet section par section. Ouvrons les éléments d'en-tête et attribuons-les à l'en-tête de classe. L'en-tête sera composé de trois parties différentes. Le premier sera le texte, qui a été placé sur le côté gauche. Ouvrons donc un élément div avec un texte d'en-tête de classe. Le texte sera représenté par un titre dans le paragraphe. Nous devons donc ouvrir l'élément de titre H1 avec le titre la classe et avec du texte du monde entier Ensuite, je vais ouvrir les éléments p avec le nom de la classe, le paragraphe d'en-tête. Instituons ensuite quelques textes. Voyager. Cela vous laisse sans voix Il fait ensuite de vous un conteur d'histoires. D'accord ? Ensuite, je vais insérer ici une image. Je suis à l'image de la montgolfière. Précisons ici le chemin de l'image. Nous avons les images du dossier, puis nous devons sélectionner un point de montgolfière au format PNG. Ensuite, je vais insérer ici l'image d'en-tête du texte, je veux dire en tant que valeur de l'attribut alt. Enfin, attribuons à l'attribut de classe d'élément d'image l' image d'en-tête value. Nous avons donc ici l'image de la montgolfière, et enfin, nous devons créer un logo. Comme vous vous en souvenez, nous utiliserons un texte animé comme logo. Ouvrons donc un développement avec le logo de la classe. Ensuite, je vais instituer les éléments de titre H1. Ainsi, chaque lettre et le titre seront représentés par cet élément du panneau. Parce que nous devons créer des animations avec un délai différent pour chaque lettre. Ouvrons donc l'élément span et insérons ici la première lettre T. Ensuite, dupliquons-le six fois et changeons les lettres. Pour le second, nous avons besoin de h, puis de E, puis de R, 0, a et D. La route. Très bien, c'est donc tout ce qui concerne le marché de l'en-tête Il est maintenant temps de personnaliser cette section. Avant cela, je veux m' occuper du contenant. Allons-y et sélectionnons-le. Je vais changer la couleur de fond. Comme vous le savez, nous avons créé quelques variables pour les couleurs. Et pour les utiliser, nous devons utiliser ici la fonction var, qui représente en fait la variable en tant qu'argument. Nous devons passer ici le nom de la variable, dans ce cas, la couleur secondaire. Au fur et à mesure que la couleur d'arrière-plan du conteneur change. Ensuite, je vais créer un espace autour de celui-ci en utilisant la marge. Passons à 3,5 rem. En plus de cela, créons un effet d'ombre. Utilisons box shadow avec les valeurs suivantes. Nous avons besoin de zéro, puis d'une RAM, de trois RAM. Et comme couleur, utilisons à nouveau la fonction var, la couleur. Génial. Très bien, alors pour l'instant, c'est tout pour le conteneur Ensuite, nous devons commencer à travailler sur l'en-tête. Tout d'abord, définissons la largeur et la hauteur. Je vais définir la largeur comme étant 100 % asphalte et la hauteur. Je vais faire quelques calculs. Jetons un coup d'œil au projet terminé. Comme je le vois en haut et en bas de l'en-tête, nous avons la même quantité d'espace. Chacun d'eux est égal à 3,5 RAM, car la taille de la marge est égale à 3,5 rem. Maintenant, afin de créer le même espace à la fin de l'en-tête, je vais utiliser le calcul suivant. Nous devons utiliser la fonction calc, qui signifie calculer Ensuite, nous devons soustraire 200 à la hauteur de la fenêtre d' affichage et à sept RAM. En fait, 100 % de la hauteur de la fenêtre d'affichage sont égales à 100 % de la fenêtre d'affichage Et les sept RAM sont la somme de l'espace en haut et en bas . Comme vous pouvez le voir, maintenant, nous avons le même espace autour de l'en-tête. D'accord ? Définissons ensuite l' arrière-plan de l'en-tête. Je vais définir l' image comme arrière-plan. Tout d'abord, utilisons un dégradé linéaire. Je vais utiliser deux couleurs similaires, mais avec des opacités différentes La couleur va donc être 1811455 et l'opacité Ensuite, nous avons besoin de la même couleur. Mais avec une opacité de 0,3. Ensuite, je vais spécifier le chemin de l'image à l'aide de la fonction URL. Nous avons donc un dossier appelé images, et nous devons sélectionner le header dash BG point JPG. Au centre de la minute suivante et pas de répétition. Enfin, définissons la taille de l'arrière-plan. Je vais le colorier. Très bien, comme vous pouvez le voir, l'image est définie comme arrière-plan et elle a déjà l'air bien La prochaine chose à faire concernant l'en-tête est d'aligner ses éléments enfants. Je vais utiliser flexbox. En fait, je ne lui attribuerai pas de propriétés de flux manuellement. Comme vous le savez, nous avons tous déjà créé un centre de clusters, et je vais simplement attribuer à ce nom de classe un en-tête dans le code HTML. Les trois parties de l'en-tête sont donc centrées à l'intérieur de celui-ci. Allons-y et personnalisons le texte de l'en-tête. Nous avons donc besoin de styles communs pour le titre et le paragraphe également. Et pour cela, nous pouvons ajouter des styles à leurs éléments parents. Je veux donc centrer le texte à l'intérieur de la boîte. Insérez votre texte, alignez-le au centre. Transformez ensuite le texte en majuscules et créez un espace entre les lettres Réglons l' espacement des lettres à 0,1 point. Et maintenant, nous pouvons personnaliser le titre du paragraphe séparément. Commençons par le titre. Je vais augmenter la taille de sa police. Faisons-en un tram. Et puis changez de couleur. Je vais utiliser ta colonne blanche. OK, c'est tout à propos du titre. Ensuite, prenons soin du paragraphe. Allons-y et sélectionnons ces éléments. Augmentez la taille de la police, faites-en trois RAM. Modifiez ensuite l'épaisseur de la police. Je vais en faire 500. Et enfin, changez de couleur. Dans ce cas, je vais utiliser la colonne secondaire, non ? Le paragraphe est donc également stylisé. Mais je pense qu'il est trop tendu. Je vais donc définir la largeur maximale du paragraphe. Utilisons la propriété max-width et lui donnons sept pour la ramper. Enfin, afin de centrer le texte, utilisons la marge R0 Donc non, je pense que c'est beaucoup mieux en fait avec les textes de Heather, nous avons presque terminé La seule chose que je veux faire est d' ajouter un effet d'ombre aux deux éléments. Ajoutons donc une ombre de texte à l'élément parent avec les valeurs 0,3, 0,5 RAM. Et comme couleur, utilisons la couleur grise. Très bien, nous avons enfin terminé le texte de l'en-tête, et nous devons maintenant passer à autre chose et commencer à travailler sur le logo Il doit être placé dans le coin supérieur droit de l'en-tête. Pour cela, nous devons utiliser la position. Sélectionnons le logo et rendons sa position absolue. Ensuite, je vais rendre la position de l'en-tête relative car nous devons définir la position du logo en fonction de son élément parent. Et après cela, définissons les meilleures et les bonnes positions. Je vais les louer tous les deux. Le logo est donc placé dans le coin supérieur droit et nous devons maintenant le personnaliser. Comme vous le savez, chaque lettre est entourée par cet élément de plage. Allons-y et sélectionnons-le. Augmentons la taille de la police, mettons-la en RAM. Modifiez ensuite l'épaisseur de la police. Je vais les rendre plus audacieux. Attribuons donc à 900, puis changeons de couleur. Dans ce cas, je vais utiliser la couleur primaire. Transformez ensuite le texte en majuscules Et enfin, changez la couleur de fond Faites-le blanc. Nous devons maintenant définir la largeur et la hauteur de chaque lettre. Faisons en sorte que les deux soient de marque 3.5. Comme vous pouvez le constater, la largeur et la hauteur ne s'appliquent pas aux lettres. La raison en est que cet élément span est un élément en ligne Nous ne pouvons donc pas en définir la largeur et la hauteur. Pour résoudre ce problème, je vais en faire un élément au niveau du bloc pour l'instant, car nous utiliserons éventuellement flexbox Utilisons donc votre bloc d'affichage. La largeur et la hauteur sont maintenant appliquées aux lettres. Ils sont également placés verticalement dans une colonne car c'est le comportement par défaut des éléments au niveau du bloc. Très bien, maintenant pour les placer côte à côte horizontalement, utilisons Flexbox L'élément de titre Select H1 est l'élément parent de ce pan qui lui est affecté Display Flex D'accord. Maintenant, nous avons besoin d'un espace entre les lettres et nous les arrondissons. Utilisez une marge avec la valeur 0,5 rem. Et puis 50 % du rayon de la frontière. En outre, je vais supprimer le bloc d'affichage à partir de là, car pour le moment, ces éléments de span sont des éléments flexibles et nous n'avons plus besoin de cette propriété. D'accord ? La dernière chose dont nous avons besoin ici est de placer lettres au centre de ces cercles. Pour cela, utilisons à nouveau le centre du cluster et attribuons-le à tous les éléments du span. Hein ? Le logo est donc personnalisé. Il est maintenant temps de créer l'animation. Pour cela, nous allons utiliser des images-clés CSS. Nous devons ajouter des images-clés de signes, qui doivent être suivies du nom de l'animation En fait, vous pouvez donner à l' animation le nom que vous voulez. À l'intérieur des images-clés. Nous pouvons définir certaines règles CSS en quelques étapes. Ensuite, nous pouvons appliquer ces règles aux éléments à l' aide de la propriété d'animation. Nous allons donc avoir cinq étapes différentes. Ils seront représentés par des valeurs en pourcentage. Je vais commencer par zéro pour cent et passer à 100 pour cent. 0 à 10 % voudront que les lettres ne bougent pas. Nous avons donc besoin ici de ce qui suit. Nous devons indiquer ici un taux de 0 %. Ensuite, à l'intérieur des accolades, je vais utiliser la fonction Transform with Translate Y, qui doit avoir la valeur zéro Parce que nous n'avons pas besoin de déplacer les lettres. La prochaine étape sera de dix pour cent. Et en fait, nous avons besoin ici de la même transformation pour traduire Y zéro. Après cela, de 10 % à 15 %, je vais faire passer les cours à un niveau supérieur. La prochaine étape sera donc de 50 %. Et nous devons ici transformer, traduire y avec la valeur -100% Ensuite, de 15 % à 20 %, nous devons renvoyer les lettres à leur position. Donc, sur 20 %, nous devons à nouveau transformer traduire Y zéro. Enfin, de 20  % à 100 %, lettres devraient rester inchangées. Nous devons donc à nouveau transformer, traduire Y zéro. Très bien, ce sont donc les règles que nous devrions appliquer aux lettres, mais avec un délai différent Nous avons besoin d'un délai différent pour les déplacer dans l'ordre. Nous devons sélectionner chaque élément de travée séparément. Et pour cela, je vais utiliser la pseudo-classe du nième enfant Supposons donc le logo H1, puis span, suivi du nième sélecteur enfant Et nous devons spécifier ici le premier élément de span. Nous devons maintenant attribuer à l'élément différentes propriétés d'animation. Le premier sera le nom de l'animation. Ensuite, il doit être suivi la durée de l'animation. Pour cela, nous devons utiliser la propriété appelée durée de l'animation. Mettons-le à 5 s. Ensuite, nous avons besoin du délai de retard pour la première lettre. Je vais utiliser 0,1 s. Pour définir le délai, nous devons utiliser le délai d'animation. Attribuons-lui 0,1 s. Enfin, nous devons spécifier la valeur de la propriété de nombre d'itérations de l'animation Dans notre cas, nous devons exécuter l'animation à l'infini. Nous avons donc besoin ici de l'infini. Très bien, nous avons donc défini l'animation pour la première lettre Pour cela, nous avons utilisé ici quelques propriétés d'animation. En pratique, nous pouvons essentiellement utiliser une méthode abrégée. Nous avons juste besoin d'une propriété CSS appelée animation, au lieu d'utiliser plusieurs propriétés d'animation. Nous pouvons donc l'utiliser ici. Animation et valeurs suivantes. Le premier sera le nom Ensuite, nous avons besoin d'une durée de 5 s, suivie du point de retard de 1 s. Et enfin, nous avons besoin d'une durée infinie. Nous pouvons simplement nous débarrasser de toutes ces propriétés à partir d'ici. Allons-y et dupliquons ce code six fois. Parce que nous avons sept lettres. Modifiez ensuite le nombre de délices et modifiez également le temps de retard Pour la seconde, nous avons besoin de 0,2 s. Ensuite nous avons besoin de 0,3 s. Ensuite, pour la quatrième lettre , où 0,4 s, 0,5 s. La suivante sera de 0,6 s. Et enfin, nous avons besoin de 0,7 s. D'accord ? Comme vous pouvez le voir, l'animation fonctionne et nous avons ici de jolis effets sympas. En fait, nous en avons terminé avec le logo et nous devons maintenant passer à autre chose et prendre soin de l'image. Je veux dire la montgolfière. Allons-y et sélectionnons une image. Tout d'abord, diminuons sa taille. Faites en sorte que sa largeur soit 35 %. Jetons à nouveau un coup d'œil à la version finale du projet. Comme vous pouvez le voir, montgolfière se déplace à travers l'arrière-plan de l'en-tête. Pour y parvenir, nous devons créer un environnement 3D Et pour cela, en CSS, nous avons une propriété appelée perspective , que nous devons attribuer à l'en-tête. En général, la propriété de perspective définit la distance entre l'objet et l'utilisateur. La valeur la plus faible créera un effet 3D plus intense. Donc, dans notre cas, nous avons besoin d'une valeur un peu plus élevée. Alors attribuons-lui 100 000 dollars, non ? Comme pour le logo, nous devons également utiliser des images-clés CSS ici. Je vais nommer l' animation « image flottante ». Dans l'ensemble, nous aurons donc cinq étapes différentes. Nous allons déplacer la bulle dans l'image à l'aide de la transformation avec la fonction translate z. Cela nous permet de déplacer l'objet dans l'espace 3D. Ainsi, entre 0 % et 40 %, nous avons besoin des propriétés et des valeurs suivantes. Nous avons besoin ici de Transformer, Translate Z avec une valeur pour exécuter. Dans ce cas, nous utilisons une valeur positive qui déplace en fait l'objet à proximité de l'utilisateur. Pour le montrer, je vais l'attribuer directement à l'image. C'est ainsi que fonctionne la fonction Translate Z. Si nous donnons une valeur négative, disons -400 tours, l'image sera placée profondément dans l'en-tête Au premier coup d'œil, vous pouvez penser que la taille de l' image est diminuée, mais en fait, l'image est éloignée de l'utilisateur. Très bien, débarrassons-nous de cette ligne de code d'accueil ici. Donc, outre la propriété de transformation, je vais utiliser l'opacité pendant l'animation modifier légèrement l'opacité à zéro pour cent. Faisons en un. En fait, vous pouvez complètement omettre cette propriété ici, car par défaut, l'opacité de chaque élément est définie sur Mais je l'utilise de toutes les manières possibles pour rendre le processus de travail plus clair. Très bien, c'est ça, à peu près les 0 %. La prochaine étape sera de 40 %. De 0 à 40 %, nous devons déplacer la montgolfière au plus profond de l'image Par conséquent, nous avons besoin ici d'une valeur Transform, Translate Z de -500 g. Et en plus de cela, nous devons déplacer légèrement le motif vers la droite Je vais donc utiliser la fonction translate x. La valeur 150 a été exécutée. Nous en avons besoin car le bâton se déplace par défaut vers le centre de l'image Enfin, utilisons l'opacité. Je vais le diminuer légèrement. Mettons-le à 0,8. Très bien, la prochaine étape sera de 70 %. Dupliquons cette étape ici. Je vais modifier les valeurs. Nous avons besoin de 70 %. De 40 % à 70 %. Nous devons déplacer le ballon encore plus profondément dans l'image. Je vais donc passer ici par la rampe -1 500. En ce qui concerne la direction x, nous devons modifier la direction du ballon de manière explicite en même temps. Je vais donc augmenter la valeur de la fonction Translate X. Faisons-en une rampe de 800. Et enfin diminuez l' opacité, faites-la 0,6. OK, la prochaine étape sera de 80 %. Donc, encore une fois, dupliquons ce code de 70 % à 80 %. Nous devons déplacer le ballon arrière et le rapprocher de l'utilisateur. Changeons donc les valeurs. Insérons ici -50 RAM. Ensuite, nous avons besoin de 100 rampes et d'une opacité de 0,8. Enfin, à 100 %, nous devons rendre la valeur de la fonction de propriété Translate Z égale au point de départ. Ainsi, lorsque vous transformez Z en une valeur pour t, exécutez celle d'opacité Très bien, avec les images-clés, c'est terminé. Nous devons maintenant appliquer ces règles à l'image à l'aide de la propriété animation. Attribuons-lui le nom image fold. instant, je vais définir la durée comme étant de 5 s. Afin de voir rapidement l'ensemble du processus d'animation. De plus, nous devons ici rendre l'animation infinie. Comme vous pouvez le voir, le ballon se déplace dans le bon sens. Le seul problème que nous avons ici, ce sont les barres de défilement. Et en fait, nous pouvons résoudre ce problème simplement en utilisant overflow hidden, qui doit être affecté au conteneur Très bien, donc tout fonctionne bien. Augmentons simplement la durée de l'animation. Je vais le faire 1/52. Très bien, c'est tout à propos de l'en-tête. Tout fonctionne parfaitement et nous devons maintenant passer à la section suivante. 75. Projet 8 - Créer et styliser la section de visites les plus populaires: En fait, étape par étape, le code agrandit parce que le projet lui-même est volumineux. Par conséquent, avant de commencer à créer la section suivante, je pense qu'il serait préférable d'ajouter des commentaires dans nos fichiers HTML et CSS. Nous avons ici un en-tête. Insérons un en-tête. Puis de l'en-tête. La section suivante portera sur les visites populaires. Ajoutons donc ici des visites populaires. Et puis fin des outils populaires. Pour le CSS. Au début, nous avons quelques styles communs. Je vais donc mettre ici des styles courants. Et puis à la fin, non ? Et de styles courants. Ensuite, nous avons l'en-tête, puis n d'en-tête. Enfin, je vais ajouter ici des visites populaires et des outils populaires. Très bien, jetons à nouveau un coup d'œil au projet terminé Nous allons donc créer la deuxième section intitulée «   Les visites populaires ». Il se compose d'un titre et de trois cartes différentes. Chaque carte possède deux faces, recto et verso. Sur la face avant, nous avons une image de bouton, image d'arrière-plan avec un titre. Et ci-dessous, nous avons quelques conditions concernant H2. Si nous collectons le bouton de prix, le verso s'affichera avec le prix et le bouton de réservation Si je clique sur le bouton de retour ici , le recto s'affichera en arrière. Très bien, donc c'est dingue ce que nous allons faire. Allons-y et commençons à créer le balisage HTML. Je vais ouvrir la section élément avec classe, touriste populaire. Ensuite, je vais insérer ici le titre H1 avec le nom de la classe, titre touristique populaire Et avec le texte le plus populaire. Vers. Ensuite, nous avons besoin du développement, qui sera l' emballage des cartes Attribuons-lui donc un wrapper de cartes nominatives de classe. Ensuite, je vais créer la carte elle-même. Allons-y et ouvrons une balise div avec la carte de classe. Nous allons donc créer une carte , puis nous la dupliquerons deux fois. Comme nous l'avons dit, chaque carte est composée de deux parties différentes, le recto et le verso. Insérons donc un autre développement avec le nom de classe au recto. Ainsi, dans cet élément div, nous aurons un titre d'image, liste et le bouton Nous allons donc insérer votre élément IMG, l'attribut source. Spécifiez la partie du fichier. Nous avons un dossier d'images. Ensuite, je vais sélectionner forest point JPEG. Et l'attribut alt. Je vais mettre de la forêt. Et je vais également ajouter ici attribut de classe avec une image de carte de valeur. Ensuite, nous avons besoin des éléments de titre H1 avec un nom de classe Insérons ici le nom du Tor, qui va être la forêt sauvage. Les conditions du couple seront donc représentées par la liste. Ouvrons l'élément UL avec la liste des cartes nominatives de classe. Donc, dans l'ensemble, nous aurons cinq éléments de liste différents. Ouvrons l'élément LI avec une carte de nom de classe, un élément de liste. Et insérez ici la première condition, sept jours Ensuite, je vais la dupliquer quatre fois. Et nous devons également modifier le contenu. Le deuxième élément va accueillir jusqu'à 20 personnes. Ensuite, nous aurons des guides touristiques. Glissez également au privé. Enfin, je vais vous parler de difficulté. Moyen. Le dernier élément de la face avant sera le bouton. Ouvrons donc la balise bouton avec un nom de classe, le bouton de navigation. J'utilise votre navigation car nous allons naviguer entre le recto et le verso à l'aide de ce bouton. Insertons-le ici. Prix. En plus de cela, je vais utiliser des entités HTML5 Je veux afficher les plus grands signes. Pour cela, nous devons insérer ici et présenter GT, qui signifie supérieur à. Que. Nous avons besoin d'un point-virgule Encore une fois, les mêmes personnages. Très bien, c'est tout pour la face avant. Allons-y et créons le verso. Il va être plus petit car nous n' aurons que trois éléments différents. Allons-y et ouvrons balise div avec un nom de classe au verso. Alors allons-y et copions ce bouton à partir d'ici. Donc, au lieu du prix, nous devons le remettre ici, mais nous devons l'écrire après les entités HTML5 De plus, au lieu de signes supérieurs, nous avons besoin de moins de Donc, au lieu de GT, nous avons besoin de U, L, T. OK, ensuite vient le cap. Ouvrons donc la balise d'en-tête h3 avec le nom de la classe en fonction du prix Je vais mettre 399$ ici. Enfin, nous avons besoin d' un autre bouton pour la réservation. Il s'agit donc d'ouvrir l'étiquette avec le bouton de la carte de classe. Et puis insérez ici, réservation. Très bien, c'est tout pour la première carte. Au total, nous en aurons trois. Allons-y et dupliquons la carte entière deux fois. Et puis changez deux ou trois choses. Nous devons sélectionner ici. Point de rivière JPG. Modifiez également l'attribut alt. Nous avons besoin de River ici. Ensuite, comme cap, je vais placer ici le long de la rivière. Ensuite, je vais modifier les conditions dont nous avons besoin ici. Neuf jours ont rassemblé 30 personnes et sept guides touristiques. La condition suivante sera la même. Je vais donc laisser les choses telles quelles, compte tenu de la difficulté. Faisons en sorte que ce soit difficile. Et modifiez également le prix. Faisons-en 499$. D'accord. Allons-y et changeons également ces choses pour la troisième carte. Nous avons besoin ici de C point JPG. Modifiez également la valeur de l'attribut alt. Je vais le mettre ici, vous voyez, le titre va être la plage de l'île. Modifiez ensuite les conditions. Nous avons besoin de cinq jours de torr ici. La prochaine étape accueillera jusqu'à 40 personnes, mangera, guidera les touristes, puis se glissera à l'hôtel. Ensuite, je vais faciliter la tâche. Et enfin, changez le prix, faites-le 599$ accord, la vente, le balisage HTML heure actuelle, les cartes ont l'air moches parce que nous n'avons ici que du HTML pur. Allons-y et commençons à écrire du CSS. Tout d'abord, je vais créer de l'espace en haut et en bas. Sélectionnons donc l'élément de section, qui contient les visites populaires de la classe et auquel est attribué un rembourrage Je vais faire du rembourrage sur le dessus, fibrine, puis du zéro sur le côté droit Tan a couru en bas. Et enfin zéro sur le côté gauche. Ensuite, je vais m'occuper du titre de cette section. Nous allons sélectionner cet élément. Alors tout d'abord, augmentons la taille de la police, faisons-en huit RAM. Ensuite, je vais placer le titre au centre en utilisant le centre d'alignement du texte. Ensuite, je vais créer un espace au bas du titre en utilisant la marge, en bas. Mettons-le à huit. A couru. Changez la couleur. Utilisons votre couleur principale. Enfin, je vais créer un effet d'ombre en utilisant l' ombre du texte avec les valeurs suivantes. Nous avons besoin ici de zéro, puis de 0,1 RAM, de pointer vers la RAM et la colonne principale. OK, comme vous pouvez le voir, le titre est stylé et il a l'air bien Ensuite, je vais m' occuper des cartes. Tout d'abord, alignons-les côte à côte horizontalement. Pour cela, je vais sélectionner l'emballage de cartes qui lui est attribué, Display Flex Ensuite, afin de créer un espace uniforme entre les cartes, utilisons l'espace de justification de manière uniforme. Les cartes sont donc placées côte à côte, mais pour l'instant nous n'avons pas cet espace entre La raison en est la largeur des images. Alors allons-y et prenons soin d'eux. Tout d'abord, sélectionnez la carte elle-même et définissez sa largeur. Je vais le régler à 35 runs. Sélectionnez ensuite une image avec l'image de la carte de classe et définissez sa largeur, atteignez-la à 100 %. Dans ce cas, l'image héritera de la largeur de l'élément parent Maintenant, comme vous pouvez le voir, les images sont plus petites et nous avons cet espace entre les cartes. Très bien, maintenant allons-y et commençons à travailler sur la face avant. Je vais le sélectionner. Dans un premier temps. Placons la taxe et le centre en utilisant le centre d' alignement du texte Changez ensuite la couleur d'arrière-plan. Je vais utiliser ici un col blanc. Ensuite, je vais arrondir légèrement la face avant en utilisant réexécution du point Borderradius. D'accord ? Donc, pour l'instant, nous voyons un rayon de bordure uniquement en bas à cause de l'image Nous devons donc également arrondir les coins supérieurs de l'image. Attribuons donc à l' image un rayon de bordure. Lorsque vous souhaitez définir les angles individuels des éléments qui l'entourent, vous pouvez attribuer plusieurs valeurs à la propriété border-radius Le premier se trouve dans le coin supérieur gauche. Mettons-le à 0,3. Rem. Vient ensuite le coin supérieur droit. Je vais le mettre à la même valeur, 0,3 RAM. Ensuite, nous avons le coin inférieur droit. Mettons-le à zéro. Enfin, nous devons spécifier le coin inférieur gauche. Mettons-le à zéro également. Très bien, maintenant nous avons un rayon frontalier aux quatre coins de la voiture Allons-y et personnalisons l'élément de titre. Tout d'abord, je vais augmenter la taille de la police. Faisons-en 2,5 environ. Modifiez l'épaisseur de la police, définissez-la sur 700 et transformez également le texte en majuscules Ensuite, je vais modifier la position du titre. Je veux le placer dans le coin inférieur droit de l'image. Rendons donc sa position absolue. Ensuite, pour le positionner en fonction de son élément parent, qui est la face avant, nous devons l'attribuer à la position parent relative Ensuite, définissons les propriétés supérieures et droites. Je vais le régler à 30 %. Pour ce qui est de la bonne position, faisons-la 1,5. Exécutez la cellule, le titre est positionné. Ensuite, je vais changer sa couleur. Faisons en sorte qu'il soit blanc. Et ajoutez-y également un effet d'ombre. Utilisez une ombre de texte avec les valeurs 001 run et la colonne noire. Très bien, c'est tout à propos du titre. Allons-y et passons à la liste. Nous allons sélectionner les éléments de la liste à l'aide de la liste de cartes. Je vais définir sa largeur. Je veux dire, je veux réduire sa largeur. Supposons donc que ce soit 80 %. Pour centrer la liste, nous devons utiliser la marge automatique. Enfin, créons un espace à l'intérieur de la liste. Je vais mettre du rembourrage sur le dessus pour courir. Puis zéro sur le côté droit. Trois rem en bas et zéro sur le côté gauche. Très bien, il est maintenant temps de personnaliser les éléments de la liste. Allons-y et sélectionnons-les. Tout d'abord, définissons la taille de la police. Faites-en 1,6 RAM, puis modifiez l'épaisseur de la police, réglez-la sur 500 et changez la couleur. Dans ce cas, je vais utiliser une colonne gris clair. D'accord, donc les articles sont plus beaux, mais nous devons leur ajouter d'autres styles. Créons un espace en haut et en bas de l' élément en utilisant la marge avec les valeurs en RAM et zéro. Ensuite, je vais créer une bordure en bas. Utilisons donc la propriété appelée border bottom avec les valeurs 0.1 run solid et la colonne principale. Comme vous pouvez le constater, chaque élément de la liste possède une bordure en bas, mais ils sont trop proches les uns des autres. Nous devons donc ajouter de l'espace. Et créons l' espace à l'aide d'un rembourrage. En bas avec la valeur 1,5 rampe. Très bien, donc tout est stylé sauf le bouton de prix. instant, nous n'allons pas le styliser parce que les deux boutons, le bouton I'm only price et le bouton arrière, ont la même classe. Et je pense qu'il serait préférable de commencer par l'arrière puis de nous occuper des boutons Allons-y et sélectionnons le verso. Tout d'abord, je vais m' occuper du poste. Faisons en sorte que ce soit absolu. Ensuite, pour le positionnement en fonction de la carte, attribuons à la position relative de la carte. Définissez ensuite la position supérieure. Mettons-le à zéro et changeons la couleur d'arrière-plan. Réglons-le sur la couleur primaire. Très bien, c'est donc à ça que ressemble le dos en ce moment Je vais l'étendre à l'ensemble de la carte. Pour cela, définissons la largeur et la hauteur à 200 %. Très bien, ensuite, arrondissons-le et ajoutons-y un effet d'ombre Je vais utiliser le rayon de la bordure avec la valeur 0,3 rampe. Et puis encadrez l'ombre avec les valeurs de zéro à Ram. Pour la RAM. Et la couleur 777. OK, maintenant nous devons aligner les éléments à l'intérieur de la face arrière, puis nous devons les personnaliser. Je vais placer les éléments au centre pour cela. Utilisons flexbox et ajoutons simplement le centre du nom de classe au verso. Au format HTML. Les éléments sont placés au centre. Ils sont placés côte à côte et en fait nous n'en avons pas besoin Nous devons changer la direction de flexion et en faire une colonne. Hein ? Ensuite, personnalisons le prix et le bouton de réservation. Sélectionnez Prix total. Augmentons sa taille de police. Fais cinq rem. Modifiez l'épaisseur de la police. Je vais le régler sur 300 , puis rendre la couleur blanche et créer l'espace en bas en utilisant la marge inférieure à trois rampes. Très bien, donc le prix semble bon. Allons-y et passons au bouton. Sélectionnons-le. Je vais changer de couleur. Faisons en sorte que ce soit le principal. Changez ensuite la couleur d'arrière-plan. Je vais le rendre blanc. Supprimez la bordure par défaut en utilisant Border None. Et puis changez la taille de la police, arrondissez-la à 2,5. Très bien, allons-y et ajoutons d'autres styles. Je vais créer de l'espace à l'intérieur du bouton à l' aide d'un rembourrage Réglons-le sur un rems en haut et en bas et deux rems sur les côtés droit et gauche Je vais également augmenter l'espace entre les lettres en utilisant des points d' espacement latéraux pour courir. Faites ensuite le tour du bouton en utilisant border-radius. Mettons-le à cinq rem. Et enfin, changez le type du plus grossier, faites-le pointer Très bien, le prix et le bas sont donc personnalisés, et il est maintenant temps de personnaliser les boutons de navigation Je suis sur le bouton arrière et sur le bouton du prix, qui se trouve sur le devant. Nous allons donc sélectionner le bouton de navigation. Tout d'abord, je vais le placer dans le coin supérieur gauche de la carte Réglons donc sa position sur absolue. Définissez ensuite les propriétés du haut et de la droite. Je vais régler les deux rampes à 2,5. OK, donc le bouton est positionné. Allons-y maintenant et personnalisons-le. Je vais régler le rembourrage sur 0,5 RAM, puis changer la couleur d'arrière-plan Et dans ce cas, je vais utiliser la valeur RGBA. Je veux dire la couleur blanche avec une opacité de 0,8. Changez ensuite la couleur. Je vais utiliser ta couleur gris clair. Arrondissez ensuite le bouton à l'aide de la RAM border-radius 0.3. Et supprimez la bordure par défaut en utilisant border none. OK, Enfin, personnalisons le texte. Définissez la taille de la police, faites-en 1,5 RAM. Réglez ensuite l'épaisseur de la police sur 600. Transformez également le texte en majuscules. Créez ensuite un espace entre les lettres en utilisant l'espacement des lettres. Pointez sur RAM. Et enfin, pointez le curseur. OK, donc les deux côtés, je suis à l'avant et à l' arrière, sont stylés Tout est prêt pour que la carte fonctionne. Tout d'abord, nous devons afficher le recto verso. Pour cela, utilisons la propriété index. Mettons-le à dix. Ensuite, nous devons créer un environnement 3D car, comme vous le savez, la face avant et la face arrière doivent se déplacer dans l'espace 3D Pour créer l'environnement 3D, nous devons donc utiliser une propriété appelée prospective. Réglons-le sur la rampe 150. Ensuite, nous devons déplacer le verso où se trouve la fonction translate Z. Utilisons donc Transform. Traduisez Z par une valeur de moins cinq points. Et en plus de cela, nous devons le déplacer un peu vers la droite. Pour cela, utilisons la fonction Translate X avec la valeur trois rampes. Très bien, donc les deux côtés sont placés dans le bon sens. Ensuite, je vais diminuer l'opacité des deux côtés, mais avec des valeurs différentes Je vais ajuster l'opacité de la face avant à 0,9. Quant au verso, attribuons-lui une opacité de Très bien, nous sommes maintenant prêts à créer l'événement de clic et nous atteler sérieusement à l' utilisation de JavaScript Ainsi, une fois que nous avons cliqué sur le bouton, le verso devrait s'afficher et les opacités et les ombres devraient également Passons donc au fichier script.js. Tout d'abord, nous devons sélectionner les deux boutons. Les deux ont le même nom de classe, bouton de navigation. Et pour les sélectionner, je vais utiliser une méthode de sélection de requêtes Entre parenthèses, nous devons spécifier le nom de la classe, qui est le bouton de navigation Cette méthode renvoie une liste de nœuds, qui est un objet de type tableau. Nous devons le transformer en tableau. Ensuite, nous devons parcourir les boutons et les associer au gestionnaire d'événements OnClick Pour transformer la liste des nœuds en tableau, nous devons utiliser la méthode du tableau ES6 plutôt que de parcourir les éléments et de leur attacher le gestionnaire d'événements onclick Utilisons l'une des méthodes d'aide au tableau appelées for-each En fait, cette méthode nous aide à exécuter la fonction pour chaque élément du tableau séparément. Nous devons passer une fonction de rappel, qui doit prendre un argument Et ce sera l'élément actuel du tableau. Et maintenant, nous devons nous connecter au gestionnaire d'événements item onclick Nous avons donc besoin de l'article point onclick. Nous devons lui attribuer une fonction de flèche. Très bien, alors laissez-moi vous expliquer ce que nous allons faire. En fait, nous allons créer une nouvelle classe et un nouveau CSS, qui seront ensuite affectés à la carte à partir de JavaScript. Cette classe nous aidera à définir de nouveaux styles CSS, qui devraient être appliqués au recto et au verso de Onclick Nous devons donc maintenant attribuer une modification rapide au jeu de cartes. Ce sera le nom de la nouvelle classe. Pour sélectionner la carte, je vais utiliser la navigation DOM. Dans ce cas, l'élément fait référence au bouton de navigation. Ensuite, nous devons monter d'un niveau en utilisant la propriété de l' élément parent. Ensuite, nous devons passer à nouveau d'un niveau. Et enfin, nous allons accéder à la carte. Nous devons maintenant utiliser une propriété appelée liste de classes, qui stocke toutes les classes de l'élément. Ensuite, nous devons utiliser la cellule de la méthode de basculement. méthode toggle ajoute le nom de la classe à l'élément s'il n'existe pas et le supprime de l'élément s'il existe Enfin, insérons ici le nom de la classe. Changer. Très bien, c'est donc tout à propos du JavaScript Revenons au fichier CSS et sélectionnons le changement de nom de classe. Il doit être suivi par la face avant. Mais nous devons utiliser ici l'un de ces combinateurs CSS appelé Child selector, qui est exprimé par le signe plus grand que En fait, le sélecteur d'enfants sélectionne tous les éléments qui sont les enfants d'un élément spécifié Ainsi, une fois que nous aurons cliqué sur le bouton, la voiture changera de classe et toute cette sélection sera valide. Nous devons maintenant définir les styles que nous voulons attribuer à la face avant. Les deux côtés échangeront leurs positions, leurs ombres, leurs opacités et la propriété z-index de la face avant. Nous avons besoin ici de la valeur de la fonction Transform, Translate Z moins cinq RAM Nous devons également traduire la valeur X de trois RAM. Vient ensuite Box Shadow, où les valeurs sont de zéro à ram, foreign et à la couleur 777. Ensuite, je vais régler l'opacité sur 0,5. Quant à l'indice Z, il doit être égal à zéro. Très bien, ensuite, nous avons besoin de la même chose pour la face arrière. Je vais copier ce code d' ici et le coller ci-dessous. Avec le dos. Nous avons besoin de la face arrière plutôt que de la face avant. Modifiez les valeurs ici. Il nous faut zéro. Et Stan, encore zéro. Quant à la box shadow, elle devrait avoir 0,5 rem en RAM. Et la couleur AAA. Ensuite, je vais régler l'opacité sur 0,9. En ce qui concerne l'indice Z. Je vais m'en débarrasser. D'accord ? Si je clique sur le bouton, carte standard fonctionnera correctement. La seule chose que nous devons faire est de rendre l' effet plus fluide. Pour cela, nous devons utiliser la transition. Insérons ici une opacité d'une durée de 0,4 s. Ensuite, nous devons effectuer la transformation avec la même durée Et aussi box-shadow 0.4 s. En fait, nous pourrions utiliser toutes ces propriétés à la place de ces propriétés Mais dans ce cas, nous inclurions également l'indice et cela annulerait l'effet. OK, copions cette ligne de code et collez-la également pour le verso Très bien, maintenant tout fonctionne parfaitement. Nous avons de jolis effets de transition sympas. En fait, nous avons terminé cette section et il est temps de passer à autre chose et de commencer à créer la suivante. 76. Projet 8 - Créer et personnaliser la section de témoignages: La section suivante portera sur les histoires, les histoires des clients. Jetons un coup d'œil au projet terminé. Nous avons donc deux clients avec leurs histoires et l'arrière-plan de la vidéo. Donc 12, dans cette partie, vous allez pouvoir apprendre à définir la vidéo comme arrière-plan. Très bien, comme d'habitude, allons-y et commençons à créer du balisage HTML En fait, nous allons d'abord construire ce tore, puis nous nous occuperons de l'arrière-plan de la vidéo Insérons de nouveaux commentaires, histoires. Puis d'histoires. Et ouvrez l' élément de section Histoires de classe. Ensuite, nous avons besoin d'un div elements qui embellira les deux histoires. Attribuons-lui donc un wrapper d'histoires de classe. Donc, dans l'ensemble, nous aurons deux histoires. Ouvrons les développements qui seront utilisés pour créer et manipuler l' arrière-plan de l'histoire. Alors attribuez-lui une histoire de classe, soyez G. Et puis placez ici cette tour elle-même. Je vais ouvrir une autre balise div avec une histoire de classe. Ainsi, chaque histoire sera composée d' un titre d'image, le paragraphe. Insérons ici des éléments IMG. Dans l'attribut source. Je vais spécifier le chemin de l'image à l'intérieur du dossier images. Je vais sélectionner une histoire, IMG one point JPEG. Ensuite, comme valeur de l'attribut alt, je vais mettre ici l'image du client. Enfin, je vais ajouter ici l'attribut de classe qui dévaluerait l'image de l'histoire L'image doit donc être suivie du texte de l'histoire. Comme nous l'avons dit, ce sera le titre et le paragraphe. Ils seront complétés par le développement. Créons donc avec un récit de classe des textes qui insèrent votre balise de titre H1 avec le titre du récit du nom de classe Je vais mettre ici quelques textes. Disons que c'étaient les meilleurs jours de cette année. Ensuite, je vais créer un paragraphe avec le paragraphe de l'histoire de classe. Et je vais mettre ici un faux texte. Très bien, c'est donc la première histoire. Nous en avons besoin de deux, alors dupliquons-les une fois, puis apportons quelques modifications. Je vais changer le nom de l'image qui va stocker du format img2 point JPG Également. Changez le titre ici, non ? Je les ai bien aimés. Génial. Très bien, alors pour l'instant, c'est tout à propos du balisage HTML Allons-y et commençons à écrire du CSS. Je vais insérer de nouveaux commentaires, de nouvelles histoires. Et des histoires. Sélectionnez ensuite les éléments de cette section et créez de l'espace en haut et en bas à l' aide d'un rembourrage Nous avons besoin ici de tan ran puis de zéro sur les côtés gauche et droit. Après cela, sélectionnons l'emballage des histoires. Je vais donc placer les histoires au centre de cette action. Et ils doivent être placés verticalement. Pour cela, utilisons Flexbox. Je veux dire Display Flex. En général, Display Flex aligne les éléments côte à côte horizontalement Par conséquent, nous devons changer de direction et nous devons en faire une colonne. Nous avons donc besoin d'une colonne à direction de flexion. Ensuite, afin de centrer les éléments horizontalement, nous devons aligner les éléments au centre. Ensuite, sélectionnons l' arrière-plan de l'histoire. Il contient ClassName, story PG. Finalement, l'arrière-plan de l'histoire sera similaire à la couleur blanche. Mais pour l'instant, avant de nous occuper de l'arrière-plan de la vidéo, rendons la couleur de fond des histoires en gris clair afin de la rendre visible. Avant de passer à autre chose et d' ajouter d'autres styles à l'arrière-plan, prenons soin des images car elles sont actuellement deux plus grandes. Je vais donc sélectionner l'image. Tout d'abord, définissons la largeur et la hauteur. Faisons en sorte qu'ils courent tous les deux à 20 points. Je vais également les arrondir en utilisant le rayon de bordure avec la valeur 50 pour cent. Et en plus de cela, nous devons utiliser un objet. Nous aborderions OK, revenons à l'arrière-plan. Je vais créer de l' espace à l'intérieur. Pour cela, je vais utiliser du rembourrage. Mettons-le à cinq rem. Ensuite, nous avons besoin d'un peu d'espace autour de l'arrière-plan. Pour ça. Utilisons la marge et réglons-la également sur cinq RAM. Hein ? Après cela, augmentons la largeur de l'arrière-plan pour en faire 70% de cette section. Ensuite, créez un effet d'ombre en utilisant Box Shadow avec les valeurs zéro pour exécuter cinq rem. Et comme couleur, je vais utiliser la valeur RGBA. Plaçons ici 5013 fois, puis l'opacité, 0,4. Très bien, étape par étape, l'histoire s'annonce meilleure. Jetons à nouveau un coup d'œil au projet terminé. Comme vous pouvez le constater, la forme de l'arrière-plan est différente. Elle est biaisée. Et nous allons y parvenir en utilisant fonction transform with skew x. En fait, cela nous permet de redimensionner l'élément en fonction de l'axe x. Nous devons donc nous transformer. Ensuite, faussez la fonction x. Et entre parenthèses, je vais insérer 20 degrés. Comme vous pouvez le constater, le fond est biaisé, mais nous avons ici un petit problème Le contenu de l'histoire est également biaisé. Pour y remédier, nous pouvons fausser l'histoire elle-même dans la même mesure Nous allons donc sélectionner l'histoire. Et je vais passer ici Transform Skew x. Et comme valeur, je vais passer -20 degrés Très bien, maintenant le problème est résolu. Ensuite, je vais placer l'image et le texte côte à côte Pour cela, utilisons Display Flex. Ensuite, personnalisons le titre et un paragraphe. Mais en plus de cela, je pense que nous devons ajouter de l'espace entre l' image et le texte. Utilisons donc margin-right. Cinq. Allons-y et sélectionnons les éléments de titre. Son nom de classe est Tori Heading. Tout d'abord, prenons soin de la taille de la police. Je vais le mettre en fibrine pointue, puis le transformer en majuscules Changez également la couleur. Dans ce cas, je vais utiliser la couleur grise. Enfin, créons de l' espace en bas en utilisant la marge inférieure avec la valeur 1 rampe. C'est tout à propos du titre. Allons-y et sélectionnons le paragraphe, le paragraphe de l'histoire de ClassName Augmentons sa taille de police, faisons-la 1,8 rem. Changez ensuite la couleur. Vous voyez votre colonne gris clair. Très bien, donc le titre et le paragraphe semblent bons. Je voudrais ajouter deux autres choses. Indentons légèrement le paragraphe et créons également un légèrement le paragraphe et créons également espace entre les lettres, je veux dire, entre les lettres du titre et le paragraphe également Je vais donc sélectionner leur élément parent, qui est div avec un texte d'histoire de classe Utilisons ici l'espacement des lettres 0,1. Exécutez cette commande afin d' indenter le paragraphe, je vais sélectionner sa première lettre Pour cela, nous devons utiliser un pseudo-élément appelé première lettre. Donc, dans un premier temps, sélectionnons Paragraphe, puis ajoutons ici des pseudo-éléments. Première lettre. Nous devons créer de l' espace sur le côté gauche. Utilisez donc la marge gauche avec la valeur d'un tour. D'accord ? C'est donc tout pour les histoires. Tout est prêt pour commencer à fonctionner sur l'arrière-plan de la vidéo. Tout d'abord, passons au fichier index.html et appliquons le balisage HTML à la vidéo Je vais ouvrir la balise div avec un conteneur vidéo de classe. Ensuite, nous devons utiliser une balise vidéo, ce qui est en fait nouveau dans HTML5 Je vais lui attribuer une vidéo ClassName. Nous devons également ajouter ici quelques attributs. Le premier sera en mode autoplay Cet attribut nous permet de lire la vidéo automatiquement. Le suivant va être désactivé. Il va lire la vidéo sans émettre de son. Enfin, nous avons besoin d'une boucle qui va lire la vidéo sans arrêt. Ensuite, nous devons spécifier la source de la vidéo à l'aide d' une balise source qui est en fait la balise à fermeture automatique Ensuite, nous avons besoin ici d'attributs de source dans lesquels nous devons spécifier le chemin de la vidéo. Il est placé dans le dossier Images. Outre l'attribut source, nous devons également utiliser un attribut type, dans lequel nous devons spécifier le type de la vidéo. Je vais le régler sur Video Slash MP4. Bien, comme vous pouvez le voir, la vidéo est en cours de lecture et nous devons maintenant prendre soin de sa position Allons-y, sélectionnons le conteneur et définissons sa position sur absolue. Nous devons le positionner en fonction de l'élément parent, qui est cette section. Ajoutons donc à cela la position relative. Comme la vidéo est omniprésente en arrière-plan, définissons le haut et les propriétés manquantes. Je vais les mettre tous les deux à zéro. Nous devons également définir la largeur et la hauteur. Réglez les deux à 200 %. Et en plus de cela, diminuons l'opacité, faisons-la 0,4 Très bien, la dernière chose à faire est d'ajouter quelques styles, la vidéo elle-même, afin de maintenir la qualité de la vidéo Je veux dire, pour éviter de l'étirer ou des choses comme ça, nous devons utiliser les styles suivants. Sélectionnons la vidéo PG et attribuons-lui la largeur et la hauteur. Les deux se sont fixés à 100 %. Et en plus de cela, nous avons besoin ici de la vitesse de l' objet avec couverture des valeurs. Très bien. Enfin, changeons la couleur de fond de ces histoires. Je vais me débarrasser du contexte actuel. Ensuite, je vais définir la couleur d'arrière-plan sur RGBA. Arrêtons-nous ici 2383 fois. Et l'opacité de 0,85. D'accord ? Comme vous pouvez le constater, tout a l'air vraiment bien. Et en fait, nous avons fini de travailler sur cette section. Si vous voulez trouver des vidéos gratuites, vous pouvez vous rendre sur le site Web Cover with two rs.co, où nous pouvons trouver de nombreuses vidéos gratuites différentes Très bien, c'est tout à propos de ces histoires. Allons-y et passons à la section suivante. 77. Projet 8 - Créer et personnaliser la section de conseils avec l'arrière-plan animé: Tout d'abord, jetons un coup d' œil au projet terminé. Après cette section réservée aux touristes, nous allons créer la section contact. Au centre de cette section, nous avons quelques champs de saisie avec un bouton d'envoi. En haut du formulaire, nous avons une rubrique « Nous contacter ». Et en plus de cela, une section possède un arrière-plan en plein écran avec quelques effets d'animation Comme vous pouvez le constater, la couleur change et cela crée un effet semblable à celui du jour et de la nuit. Très bien, alors c'est ça, ce que nous allons construire. Allons-y et insérons de nouveaux commentaires dans les contacts du fichier HTML, puis fin du contrat. Ensuite, je vais ouvrir l' élément de section avec un nom de classe contact. Ainsi, à l'intérieur de cet élément de section, nous aurons deux parties différentes. Le premier sera un titre. Quant au second, il devrait s'agir des éléments formés. Allons-y et ouvrons la balise d'en-tête H1, qui contiendra le nom de la classe et l'en-tête du contact Ensuite, insérez-vous, contactez-nous. Ensuite, nous avons besoin d'éléments de formulaire avec le formulaire de contact de la classe. Ainsi, dans ce formulaire, nous aurons trois groupes d' entrées différents et un bouton d'envoi. Allons-y et ouvrons la balise div avec le groupe d'entrée de classe Le premier groupe qui aura une étiquette et une entrée. Insérez votre nom complet avec les astérisques. Ensuite, je vais ouvrir la balise de saisie avec du texte. Ensuite, je vais ajouter ici l'attribut de classe avec une entrée de conflit de valeur. Et nous avons également besoin d'un espace réservé avec un texte. Entrez votre nom. Très bien, donc le deuxième groupe va être légèrement différent. Il sera composé de deux groupes d'entrées différents. Je vais ouvrir la balise div avec un groupe de saisie de classe. Remarquez que j'utilise un groupe au pluriel. Nous devons maintenant créer ici deux groupes d'entrées différents. Récupérons ce code à partir d' ici et collez-le deux fois. Je vais modifier les libellés, les types et également les attributs des espaces réservés Nous avons besoin de votre e-mail. Ils saisissent ensuite un e-mail. Je vais également modifier la valeur de l'attribut d' espace réservé Nous devons saisir votre adresse e-mail. Quant au deuxième groupe d'entrées, il sera destiné au téléphone. Changeons ici. La valeur de l'espace réservé qui permet de répondre au numéro de téléphone. Très bien, il est maintenant temps de créer le troisième groupe de saisie Il sera composé d'une étiquette et d'une zone de texte. Et une fois que vous avez ouvert la balise div avec le groupe d'entrées de la classe, insérez votre étiquette avec le message texte insérez votre étiquette avec L'étiquette va donc être suivie de la zone de texte. Je vais y ajouter un attribut de classe avec une zone de texte sous forme de valeur. Et nous avons également besoin d'un espace réservé. Votre message ici. Très bien, donc la dernière chose que nous voulons faire est de créer le bouton d'envoi Je vais le faire en utilisant un élément d'entrée. Nous devons taper submit, puis la valeur submit. Et je vais aussi ajouter ici l'attribut de classe pour btn. Très bien, le balisage HTML est donc prêt. Tous les éléments sont créés et nous devons maintenant passer à autre chose et commencer à écrire du CSS. Je vais insérer de nouveaux commentaires pour le contact. Et du contrat. Sélectionnons l'élément de section et créons de l'espace en haut et en bas à l'aide d'un rembourrage Je vais faire en sorte que le rembourrage soit 15 RAM en haut plutôt que zéro sur le côté droit, 20 RAM en bas et zéro sur le côté gauche De plus, je vais placer le contenu au centre en utilisant le centre d' alignement du texte OK, je vais maintenant définir l'image comme arrière-plan. Spécifiez la partie de l' image dans la fonction URL. Je vais sélectionner une sorcière appelée Contactez-nous G point PNG. Ensuite, nous avons besoin du centre et de la non-répétition En plus de cela, je vais définir la taille de l'arrière-plan. Faisons en sorte qu'il couvre. OK, donc pour l'instant, c'est tout à propos de l'élément section. Allons-y et personnalisons le titre. Sélectionnons-le. Tout d'abord, augmentons la taille de la police. Faites-en sept RAM. Ensuite, je vais rendre le texte un peu plus gras en utilisant une épaisseur de police d'une valeur de 700, transformer le texte en majuscules Et créez également un espace entre les lettres en utilisant l'espacement des lettres, 0,5 rem. Ensuite, je vais changer la couleur. Utilisons ta couleur blanche. Ensuite, je vais ajouter une ombre au texte en utilisant une ombre de texte avec les valeurs suivantes, 01 RAM pour RAM et couleur noire. Enfin, créez de l'espace en bas en utilisant la marge, en bas, un tramway. D'accord, le titre est donc personnalisé. le moment, ce n'est pas tout à fait faisable, mais une fois que nous aurons ajouté une animation à l'arrière-plan, rendu sera bien meilleur. Ensuite, nous devons nous occuper de l'élément de formulaire. Allons-y donc et sélectionnons-le. Et tout d'abord, définissons sa largeur et sa hauteur. Je vais régler sa largeur à sept pour courir. En ce qui concerne la hauteur, faisons-en 50 RAM, puis changeons la couleur de fond. Dans ce cas, je vais utiliser la couleur blanche. Mais avec la valeur RGBA, nous devons placer ici 5053 fois Et je vais également ajouter ici l'opacité 0,95. D'accord, considérons que le formulaire est placé sur le côté gauche et que nous devons le centrer. Pour ça. Je vais utiliser la marge. Très bien, ensuite, je vais centrer le contenu à l'intérieur du formulaire. Pour cela, je vais attribuer au centre de classe des éléments de formulaire. Le contenu est centré, mais les groupes de saisie sont placés côte à côte Et pour y remédier, changeons la direction du flux et faisons en sorte qu'il refroidisse. D'accord ? Après cela, je vais arrondir légèrement le formulaire. Pour cela, je vais utiliser border-radius avec une valeur de 0,5 rem Ajoutons également un peu d'ombre en utilisant box shadow avec les valeurs 01, RAM, trois rem et la colonne noire. OK, c'est tout à propos du formulaire. Pour l'instant, allons-y et sélectionnons le groupe de saisie. Tout d'abord, définissons sa largeur à 200 %. Ensuite, je vais utiliser Flexbox. Nous devons créer un conteneur flexible pour les groupes d'entrées à l' aide de Display Flex Et nous devons également changer de direction. Faisons-en une colonne. D'accord ? Donc, à l'heure actuelle, la première entrée et la zone de texte sont étirées et occupent toute la largeur du formulaire. Quant aux deuxième et troisième éléments d'entrée, ils font partie de l'élément des groupes de saisie. Sélectionnons donc les groupes de saisie et augmentons sa largeur à 100 %. Bien, maintenant toutes les entrées et la zone de texte sont étirées, nous avons besoin d'un peu d'espace à l'intérieur du formulaire Et cela a permis de créer de l'espace en utilisant un rembourrage d'une valeur de cinq tours D'accord ? Nous avons donc maintenant un meilleur résultat, mais en fait, ce n'est pas ce que nous voulons. Nous devons placer l'e-mail et le téléphone que vous avez mis côte à côte Et pour cela, je vais utiliser à nouveau Display Flex. Maintenant, nous avons besoin d'un espace entre les champs de saisie pour cela Ajoutons d'abord, diminuons leur largeur. Je vais donc sélectionner les groupes de sortie, puis le groupe d'entrée. Allons-y et fixons-nous à 248,5 %. Ensuite, je vais attribuer aux groupes de saisie, justifier l' espace de contenu entre les deux. Très bien, les entrées sont donc alignées et nous devrons ensuite les personnaliser. Tout d'abord, créez un espace entre les groupes de saisie. Attribuons à la marge du groupe d'entrée avec des valeurs un rem en haut et en bas et zéro sur les côtés droit et gauche OK, allons-y et personnalisons les entrées ainsi que la zone de texte. Je vais sélectionner les deux. Dans un premier temps. Sélectionnons les entrées. Dupliquez ensuite cette ligne de code et modifiez la saisie dans la zone de texte. Tout d'abord, je vais créer de l'espace à l'intérieur des champs. Utilisons-en pour ce rembourrage. En fait, nous avons besoin d'un peu plus d'espace en haut parce que nous allons y placer les étiquettes. Nous avons donc besoin ici des valeurs de la manière suivante. La première sera composée de trois rampes et les autres valeurs seront d'un run. OK, ensuite, changeons la couleur de fond. Utilisons votre couleur secondaire. Également. Définissez la bordure. Ajoutons ici 0,1 rem solide, et à nouveau la couleur secondaire. Très bien, donc les champs sont bien plus beaux. De quoi avons-nous besoin pour y ajouter d'autres styles ? Diminons la taille de la police. Faites-en un point pour la RAM. Changez également la couleur. Utilisons ici la couleur gris clair. Ensuite, je vais créer un espace entre les lettres. Faisons-en 0,1 RAM. Enfin, créons la saisie et la zone de texte qui l' entoure en utilisant le rayon de bordure 0,5 Très bien, nous en avons presque terminé avec les champs de saisie. Je vais les personnaliser en fonction de la focalisation. Je veux dire, une fois que nous nous sommes concentrés sur les champs, je veux afficher la bordure. Nous devons donc sélectionner une entrée de gain et la zone de texte, mais avec une pseudo-classe de focus Ajoutons ici les points de bordure, un trait plein. Et le col C.C. vous permet également de voir votre petite transition afin de rendre l' effet plus fluide. Bordure droite et durée 0,3 s. Très bien, c'est les champs de saisie et la zone de texte Nous devons maintenant nous occuper des étiquettes. Je vais les personnaliser et les placer dans les champs. Alors sélectionnons-les d'abord, définissons la taille de la police, faisons en sorte qu'elle pointe vers la RAM. Modifiez également l'épaisseur de la police . Faites-en 600. Ensuite, je vais transformer le texte en majuscules. Utilisez ensuite l' espacement des lettres, 0,1 pièce. Et enfin, changez de couleur. Fais en sorte que ce soit génial. Très bien, les étiquettes sont donc belles, et maintenant je dois les placer dans les champs dont nous avons besoin pour que leur position soit absolue Ensuite, nous devons positionner le libellé de manière relative pour le groupe d'entrée, car nous devons positionner l'étiquette en fonction de l'élément parent. Ensuite, définissons les propriétés supérieures et gauches. Tous les deux à un round. Très bien, c'est tout pour les étiquettes. Ils ont l'air sympa et il ne reste en fait qu'un seul élément à personnaliser, qui est un bouton de soumission. Allons-y donc et sélectionnons ces éléments. Tout d'abord, je vais définir sa largeur. Réglons-le à 100 %. Créez ensuite de l'espace à l'intérieur de l' élément en utilisant un rembourrage d'une valeur d'une RAM Ensuite, je vais définir la taille de la police comme 1,6 RAM. Créez également un espace entre les lettres dont nous avons besoin en haut en utilisant la marge, le haut, une rampe. Et puis changez la couleur d'arrière-plan, rendez-la gris clair. Très bien, c'est donc à cela que ressemble le bouton d'envoi en ce moment Nous devons y ajouter d' autres styles. Changeons la couleur du texte. Je vais le rendre blanc. De plus, nous devons arrondir le bouton en utilisant la RAM border-radius 0.5 Supprimez ensuite la bordure par défaut en utilisant border none. Et enfin, modifiez le type du cours en pointeur. Très bien, donc la dernière chose à faire concernant le bouton est de créer un effet de survol Je vais légèrement changer la couleur d'arrière-plan en survolant. Nous allons donc sélectionner Form btn avec le pointeur de la souris. Et pour changer la couleur d'arrière-plan, mettez-la en gris. Utilisons également ici la transition. Nous avons besoin de la couleur de fond et durée de 0,4 s. Bon, maintenant nous avons presque terminé avant passer à la création de l' animation en arrière-plan. Je voudrais évoquer ici un petit problème. Comme vous le savez, par défaut, vous pouvez augmenter la taille de la zone de texte. Et si je le fais, la mise en page de l' élément de formulaire sera perturbée. Pour éviter cela, je vais définir la hauteur maximale et largeur maximale de la zone de texte. Allons-y et sélectionnons-le. Réglons la hauteur maximale à 15. Courez. Quant à la largeur maximale, faisons-la à 100 %. Très bien, maintenant tout fonctionne parfaitement avec le style. Nous avons terminé, et nous devons maintenant créer une animation. En fait, l'animation va être simple. Dans l'ensemble, nous aurons cinq étapes différentes et nous allons changer la couleur de fond à chaque étape. Alors allons-y et créons des images-clés. Je vais nommer l' animation contact PG. Donc, sur 0 %, je vais créer une couleur de fond en 3D, 3D, 3D. Ensuite, à 25 %, je vais faire en sorte que ce soit c e, d h e. Pour. Ensuite, nous en aurons 50 %. Quant à la valeur, elle sera de 181. À trois heures. Viennent ensuite 75 %. Je vais créer la couleur de fond ff78, 42. Et à la dernière étape, je veux dire, à 100 %, je vais refaire la couleur de fond. 3D, 3D, 3D. OK, donc c'est tout pour les images-clés. Ils sont prêts. Attribuons la propriété d'animation aux éléments de cette section. Dans un premier temps, nous devons spécifier le nom de l'animation, qui est contact BG. Définissons ensuite la durée. À l'heure actuelle. Je vais le régler sur 10 s, mais nous le changerons plus tard. De plus, nous devons exécuter l'animation à l'infini. Il faut donc écrire ici l'infini. Bien, comme vous pouvez le voir, l'animation fonctionne bien. Il fonctionne un peu plus vite. Modifiez donc la durée. Ça fait 35 s. Très bien, passons à la section contact Nous avons fini de travailler dessus et nous devons maintenant passer à autre chose et prendre soin du filtre 78. Projet 8 - Créer et styliser le pied de page: Tout d'abord, insérons de nouveaux commentaires en HTML. Pied de page et de pied de page. Et puis ouvrez le pied de page HTML5, élément sémantique avec nom de classe Le pied de page sera composé de deux parties différentes. La première sera une liste de quelques éléments de navigation. Quant à la deuxième partie, elle devrait être paragraphe pour certains textes protégés par le droit d'auteur. Si nous survolons les objets, ils pivoteront et nous obtiendrons un effet 3D en utilisant l'ombre À première vue, il semble que les articles progressent. Allons-y et créons une liste. Il doit être représenté par élément div et quelques liens Ouvrons la balise div et attribuons-la à la liste de bas de page de la classe. Insérez ensuite ici l'élément de lien avec lien du pied de page de classe et avec un texte Donc, dans l'ensemble, nous aurons cinq articles différents. Dupliquons-le quatre fois et changeons le contenu. Le deuxième élément sera destiné à. Ensuite, nous aurons à notre sujet l'offre et le contenu. OK, c'est tout pour la première partie. Allons-y et créons un paragraphe. Attribuons à la classe d'élément p un paragraphe de pied et mettons ici du contenu Droits d'auteur. Ensuite, pour le signe du copyright, je vais utiliser l'entité HTML5 Nous avons besoin d'une esperluette, d'une copie, d'un point-virgule, puis de code et de création Tous droits réservés. Très bien, c'est tout à propos du balisage. Allons-y et ajoutons-y du CSS. Tout d'abord, je vais insérer de nouveaux commentaires. Pied de page, pied de page. Sélectionnez ensuite l'élément de pied de page. Et tout d'abord, changeons la couleur de fond. Je vais utiliser la couleur grise. Et je veux aussi créer de l'espace à l'intérieur du filtre en utilisant du rembourrage Mettons-le à quatre, courons en haut de zéro sur le côté droit jusqu'à Ram en bas et zéro sur le côté gauche. Très bien, ensuite je vais placer le moins au centre. Et pour cela, allons-y et sélectionnons la liste de bas de page. Je vais en faire un conteneur flexible en utilisant Display Flex. Et puis pour placer les éléments au centre, utilisons justify-content Très bien, les éléments de la liste sont placés au centre et nous pouvons maintenant les personnaliser. Allons-y et sélectionnons le lien. Au début. Augmentons la taille de la police, modifions-la. Changez ensuite la couleur. Faites-le blanc. De plus, je souhaite créer l'espace sur les côtés droit et gauche des éléments en utilisant une marge avec une valeur de 0,2 rampe. Ensuite, nous allons créer de l'espace à l'intérieur des ailes à l'aide d'un rembourrage Mais avant cela, afin de rendre cet espace visible, changeons la couleur de fond des liens pendant un certain temps Faisons en sorte qu'il soit rouge. Et puis créez de l' espace. Utilisez du rembourrage Définissons l'espace entre la RAM 2.3 en haut et en bas. Et puis trois rem sur les côtés droit et gauche. Et augmentez également l'espace entre les lettres en utilisant l'espacement des lettres. rampe 0,3. Très bien, c'est tout pour les liens Changeons la couleur de fond. Fais en sorte que ce soit génial. Bien, avant de passer au paragraphe, je vais ajouter un effet de survol aux liens Je vais les faire pivoter et les ajouter à la boîte une ombre lorsque vous passez la souris. Allons-y et sélectionnons le lien du pied de page avec le pointeur de la souris. Ensuite, je vais utiliser la fonction Transform, Rotate. Faisons pivoter les liens de moins dix degrés. Et collez également une ombre de boîte avec les valeurs zéro pour exécuter trois rem et la couleur noire. Enfin, utilisons la transition. Nous avons besoin ici de toute la durée de 0,2 s. D'accord ? Donc, si nous survolons les liens, nous obtiendrons un effet agréable et cool Très bien, c'est tout pour les liens. Allons-y et prenons soin du paragraphe. Sélectionnons-le. D'abord. Je vais aligner le texte au centre. Ensuite, pour trouver la taille de police, exécutez-la à 1,5. Changez la couleur. Dans ce cas, je vais utiliser une couleur secondaire. Créons ensuite un espace entre les lettres. Indiquez-le vers la rampe. Enfin, je vais créer l'espace en haut en utilisant la marge des cinq premiers ou n. OK, nous en avons terminé avec le pied C'était assez simple, mais je trouve que ça a l'air sympa En fait, étape par étape, nous arrivons à la fin de ce projet, mais nous avons encore du travail à faire. Ensuite, nous devons commencer à travailler sur la navigation 79. Projet 8 - Créer et faire fonctionner la navigation: Tout d'abord, jetons un coup d' œil au projet terminé. Comme vous pouvez le voir dans le coin supérieur gauche de la page Web, nous avons une icône de menu fixe. Si je clique dessus, la sortie s'affichera. Les liens vont du haut vers le bas avec de jolis effets de transition. Ils changent d'opacité au moment du survol. Et maintenant, quatre ont leur arrière-plan en plein écran ou sont présentés par l'image. En plus de cela, nous avons le bouton de fermeture x dans le coin supérieur droit du nanopore Et si je clique dessus, nous reviendrons à la page principale. OK, alors c'est ça, ce que nous allons construire. Je vais insérer cette partie juste au-dessus de l'en-tête. Insérons donc de nouveaux commentaires. Elle fait maintenant partie de Napa. Ouvrez ensuite un élément div et attribuez-lui deux classes La première va être ouverte en tant qu'icône. Quant au second, il devrait l'être. Passons maintenant à l'icône. Les icônes du menu seront composées de trois lignes. Ils seront représentés par les développements. Ouvrons-le avec class line, puis dupliquons cette ligne deux fois. Ensuite, nous devons ouvrir un autre élément div, qui serait le wrapper Ainsi affecté à chaque cluster. Maintenant pour le wrapper, nous avons ensuite besoin d'un élément de navigation avec la classe. Maintenant, pour ce qui est de l'intérieur de l'élément de navigation, nous allons avoir deux parties différentes. Le premier sera également le bouton de fermeture x. La seconde, ça devrait être la liste de navigation. Allons-y et ouvrons les éléments div. Et on lui a assigné des croix à proximité. Maintenant par icône et maintenant par acre. Instituez ensuite deux lignes, ouvrez le développement et attribuez-lui deux classes. La première sera la ligne de classe commune. Quant au second, qui devrait être un vin. Dupliquez ensuite cette ligne de code et modifiez le nom de classe dont nous avons besoin ici, ligne deux. Très bien, allons-y et insérons la deuxième partie, je veux dire la liste des éléments de navigation Ouvrons les développements et attribuons-les à la liste de navigation des classes. Ensuite, vous transmettez quelques éléments de lien. Attribuons-lui un nom de classe, un lien de navigation. Et insérez ici le premier élément de navigation d'accueil. Dupliquons l'élément de lien quatre fois et modifions les éléments. Le second va être dirigé vers. Ensuite, nous parlerons de nous et nous contacterons. Très bien, c'est tout à propos du balisage HTML. Je vais commencer à écrire du CSS. Allons-y et insérons de nouveaux commentaires juste après les styles courants dont nous avons besoin ici, navbar Puis fin de la barre de navigation. Sélectionnez ensuite l'icône « Non pour ». En fait, ce nom de classe appartient aux deux boutons. Définissons la largeur et la hauteur. Je vais les régler tous les deux sur la rampe 5,5. Et changez également la couleur d'arrière-plan. Faites-le blanc. heure actuelle, les deux boutons sont visibles, il est difficile de les distinguer. Il serait donc préférable de masquer le deuxième bouton ainsi que la liste. Parce que pour l'instant nous allons travailler sur la première partie. Sélectionnons donc nap ou wrapper et attribuons-lui, n'affichons aucun Très bien, allons-y et positionnons l'icône. Je vais le sélectionner avec sa classe individuelle, qui est maintenant ouverte pour l'icône. Allons-y et définissons sa position à corriger. Définissez ensuite les propriétés du haut et de la gauche. Je vais les régler tous les deux sur 6.5 run. D'accord, comme je le vois actuellement, l'icône n'est pas visible car elle s'est retrouvée derrière l'en-tête. Et pour résoudre ce problème, utilisons la propriété z-index et définissons-la sur 200 Très bien, maintenant le problème est réglé. Ensuite, je vais arrondir l'icône. En fait, nous avons besoin que les deux boutons soient arrondis. Attribuons donc au NAACP ou au rayon de bordure de l'icône, 50 %. Et changez également le curseur, faites-le pointer. OK, ensuite, je vais m' occuper des lignes. Tout d'abord, allons-y et affichons-les. Je vais sélectionner les lignes en utilisant la classe commune. Passons maintenant au vin Icone. Définissons sa hauteur, mettons-la en position de course, puis fixons la largeur à 3,5 rem. Et changez également la couleur d'arrière-plan, gris clair. Donc, pour l'instant, les objets sont placés les uns sur les autres. Nous avons besoin d'un peu d'espace entre eux et nous devons également les placer au centre de l'œil. Pour cela, je vais utiliser notre centre de classes prédéfini. Nous avons besoin de cette classe pour les deux icônes Nous devons également changer la direction de flexion et en faire une colonne. Parce que Display Flex aligne les éléments Flex horizontalement sur une ligne par défaut Enfin, nous avons besoin d'espace entre les lignes pour cela. Sélectionnons à nouveau en ligne, mais maintenant avec Open, maintenant pour la classe Icone et créons l'espace en utilisant la marge avec les valeurs point 3.0. Très bien, la première sieste ou icône est personnalisée et nous devons maintenant passer à autre chose et commencer à travailler sur la navigation Donc, pour l'instant, c'est caché. Débarrassons-nous donc de n'afficher aucun. Le wrapper occupera la totalité de la fenêtre d'affichage. J'ai fait 100 % de la largeur et de la hauteur de la fenêtre d'affichage. Configurons donc avec une largeur de fenêtre de 200. En ce qui concerne la hauteur, fixons-la à 100 pour la hauteur de la fenêtre d'affichage. Et changez également la couleur d'arrière-plan. Je vais utiliser ici la valeur RGBA avec la couleur blanche. Mettons-le ici 253 fois. Et l'opacité le souligne également. Très bien, pour l'instant, c'est à ça que ressemble la sieste ou l'emballage Nous devons définir la position dans laquelle il aurait dû être positionné de manière fixe. Et je vais aussi mettre la gauche, les robots et les propriétés à zéro. Donc pour l'instant, maintenant, le wrapper s'est retrouvé derrière l'en-tête. Et maintenant, utilisons à nouveau la propriété d'index pour résoudre ce problème. Réglons l'indice à 300. OK, passons à autre chose et commençons à travailler sur le napa lui-même. Je veux dire l'élément de navigation. Sélectionnons-le et définissons la largeur et la hauteur. Je vais les régler à 200 % et aussi changer la couleur de fond. Utilisons votre bleu royal. À présent, le port actuel occupe toute la largeur et la hauteur de la fenêtre d'affichage Nous devons ajouter un espace autour de celui-ci, comme c'est le cas pour l'en-tête. N'oubliez pas que la quantité d'espace de chaque côté est égale à 3,5 rampes. Définissons donc le rembourrage et attribuons-lui la première valeur, 3,5 rem L'espace est créé. Mais comme vous pouvez le constater, nous avons un petit problème du côté droit. Nous avons ici une barre de défilement. Maintenant, car le rappeur s'est positionné, a défini un correctif, et cela ne prend pas en compte la barre de défilement. Nous devons augmenter l' espace sur le côté droit. La taille de la barre de défilement est égale à 20 pixels. Nous devons donc faire le rembourrage du côté droit, 5,5 rem Ensuite, nous avons besoin de 3,5 tours deux fois. Le problème est résolu. Allons-y et occupons-nous de la clôture. Maintenant, l'icône, elle sera placée dans le coin supérieur droit du Napa Sélectionnons-le et rendons sa position absolue. Pour placer l'icône en fonction de son élément parent, attribuons à Napa une position relative Définissez ensuite les propriétés supérieures et droites. Je vais régler la propriété supérieure sur 2,5 RAM. Pour ce qui est de la bonne position, faisons-en trois tours. OK, donc l'icône est positionnée. Placons ces lignes la bonne manière et affichons le x. Tout d'abord, sélectionnons-les avec nom des coûts courants, fermez maintenant pour Icone line et rendons la position absolue. Nous devons maintenant faire pivoter chacune des lignes de 40 degrés, mais dans des directions opposées. Allons-y et sélectionnons la première ligne. Avec la ligne 1 en croix. Nous devons utiliser la fonction Transform, Rotate. Mettons ici quatre degrés. Ensuite, je vais dupliquer tout ce code, changer la classe dont nous avons besoin ici, ligne deux. Et au lieu de 40 degrés -40 degrés. Très bien, l' icône du vivaneau est personnalisée et il est temps de passer à autre chose et de changer l'arrière-plan pour le moment Nous n'avons plus besoin de ce fond bleu. Débarrassons-nous donc de cela et insérons-le ici. Dégradé linéaire avec valeurs RGBA. Je vais utiliser la couleur noire deux fois, mais avec des opacités différentes Et dans le premier cas, l' opacité sera de 0,5. Comme Paul, la deuxième valeur RGBA. Nous avons besoin de l'opacité 0,3. Ensuite, je vais spécifier l'URL. Je vais sélectionner une image appelée Napa, PNG ou JPEG. C'est une classe dans le dossier des images. Ensuite, nous avons besoin du centre et de la non-répétition et définissons également la taille de l'arrière-plan. Faisons en sorte qu'il couvre. Très bien, l'image est définie comme arrière-plan et il est maintenant temps de s'occuper de la liste de navigation À l'heure actuelle, les liens ne sont pas tout à fait visibles. Alors tout d'abord, sélectionnons-les en utilisant la classe naphtalène Augmentez la taille de la police, faites-en trois rampes. Modifiez ensuite l'épaisseur de la police. Je vais créer un dossier de liens. Réglons la taille de la police à 700. Changez la couleur, mettez-la en blanc et transformez le texte en majuscules Bon, maintenant nous pouvons voir les liens. Et la prochaine chose que je veux faire est de définir la couleur d'arrière-plan pour chaque élément de navigation. Nous pouvons le faire à partir du CSS. Je veux dire, nous sommes capables de sélectionner chacun des éléments avec la nième pseudo-classe enfant et attribuer à chacun d'eux une couleur de fond différente. Mais je ne vais pas le faire depuis CSS. Utilisons JavaScript. Tout d'abord, je vais créer une gamme de couleurs. Mettons ici cinq couleurs différentes. Le premier sera le 6495 ED. Ensuite, le suivant sera sept, f, f, f, D4 Ensuite, je vais utiliser F fa078. Ensuite, nous avons besoin de f08, 080. Et la dernière couleur sera un f, e, e, e. accord ? Que nous devons sélectionner tous les liens. Ensuite, nous devons les parcourir et attribuer la couleur d'arrière-plan à chacun des éléments. Allons-y et sélectionnons-les à l'aide la méthode all du sélecteur de requêtes Précisons ici le nom de classe naphtalène. Dans ce cas, la méthode all du sélecteur de requêtes renvoie des objets de type tableau, appelés « aucune liste Je vais transformer la liste des nœuds en un tableau. Ensuite, nous allons parcourir le tableau en utilisant la méthode foreach Pour transformer la liste des nœuds en tableau, nous devons utiliser la méthode array from. Ensuite, nous pouvons utiliser la méthode forEach. Car chacune nous permet de parcourir un tableau et d'exécuter une fonction. Pour chaque élément du tableau, nous devons transmettre une fonction de rappel, qui prendra un paramètre et ce sera l'élément actuel Ensuite, nous devons définir la couleur de fond. Pour cela, je vais utiliser le style et les propriétés de texte CSS. Nous avons besoin d'un texte CSS de style point point point. Nous devons donc maintenant passer ici du code CSS. C'est pour ça. Je vais utiliser les chaînes de modèles ES6. Nous devons ouvrir les backticks. Insérez ensuite ici la couleur de fond. Nous devons maintenant utiliser les valeurs du tableau de couleurs séparément. À chaque itération, nous devons définir le numéro d'index des couleurs Et pour cela, je vais créer une nouvelle variable appelée I. remarqué que j'ai utilisé ici let declaration. Cette variable va être quelque chose comme un compteur. Par défaut, il doit être égal à zéro. Maintenant, en bas, nous devons utiliser le signe de 1$ avec des bretelles bouclées. Maintenant, nous devons transmettre votre palette de couleurs. Et entre crochets, nous devons indiquer le numéro d'indice. Nous devons donc passer ici i, suivi de l'opérateur d' incrémentation, qui est exprimé par des signes doubles plus Lors de la première itération, le numéro d'index sera zéro et la première colonne sera utilisée Ensuite, à la deuxième itération, le compteur deviendra un, et la deuxième colonne sera utilisée et ainsi de suite Comme vous pouvez le constater, chaque élément de navigation possède sa propre couleur d'arrière-plan. Ensuite, je vais étendre les liens jusqu' au bas du nanopore Alors allons-y et sélectionnons un romancier. Faites en sorte que sa hauteur soit de 100 %. Et en plus de cela, je vais en faire un conteneur flexible en utilisant Display Flex. Maintenant, les articles sont étirés de haut en bas et ils occupent 100 % de la hauteur. Ensuite, nous devons prendre soin de la largeur. Ces articles doivent également occuper toute la largeur. Définissons donc la largeur et fixons-la à 100 %. Très bien, donc pour l'instant, tout va bien. Je veux placer ces éléments au centre de ces colonnes. Pour cela, attribuons à chacun des éléments de lien le centre de classe OK, après cela, diminuons l'opacité, faisons-la 0,8 C. L'opacité a également été affectée sur le bouton. Définissons donc la propriété d'index Z pour le bouton et lui donnons la valeur 300. Très bien, ensuite je vais créer un effet de survol. Je souhaite changer la couleur des éléments et augmenter l'opacité au survol. Allons-y et sélectionnons Ne pas créer de lien avec le pointeur de la souris. Faites en sorte que son opacité soit une. Et changez également la couleur, rendez-la primaire. En plus de cela, je vais utiliser transition où les valeurs sont toutes et 0,3 s. D'accord ? L'effet de survol fonctionne donc bien. Et maintenant je vais faire fonctionner les icônes. Donc, par défaut, je vais maintenant placer le wrapper ci-dessous et le masquer Pour cela, changeons la valeur du bas pour une valeur supérieure, supérieure et fixons-la à -100 %. Et réduisez également l'opacité à zéro. Le wrapper de la barre de navigation est donc masqué. Ensuite, je souhaite placer les éléments de navigation vers le haut car une fois que nous avons cliqué sur l'icône du menu, ils doivent se déplacer de haut en bas. Pour cela, attribuons au néant une position relative. Et puis définissez la première position. Faites-le -100 %. Hein ? Nous devons maintenant utiliser JavaScript. En fait, nous allons créer un changement de classe en CSS, qui sera ajouté au conteneur à partir de JavaScript. Créons donc une variable dans laquelle je vais stocker le conteneur. Appelons ce conteneur variable, puis sélectionnons ces éléments à l'aide de la méthode de sélection de requêtes Nous devons maintenant sélectionner l'icône du menu et y associer un événement de clic. Sélectionnons à nouveau l'élément à l' aide de la méthode QuerySelector Je vais spécifier le nom de la classe, ouvrir suffisamment l'icône de la barre. Et puis c'est attaché à cela. Auditeur d'événements. Nous avons besoin ici de cliquer sur l'événement et de la fonction flèche. Ainsi, une fois que nous avons cliqué sur l'icône du menu, nous devons ajouter au changement de classe de conteneur. Par conséquent, nous devons insérer votre liste de classes de points de conteneur. Comme vous le savez, la liste des classes stocke toutes les classes de l'élément. Elle doit être suivie de la méthode add, qui ajoute une classe à la liste des classes. Et la parenthèse que je spécifie change de nom de classe. OK, c'est tout pour le premier élément. Passons au deuxième point. Je veux dire le bouton de fermeture X. Une fois que nous avons cliqué dessus, nous devons supprimer le changement de classe du conteneur. Allons-y donc et dupliquons ce code. Changez ensuite le nom de classe dont nous avons besoin ici, fermez. Maintenant par icône. Et aussi, au lieu d'ajouter une méthode, utilisez, supprimez. Très bien, asseyez-vous à propos de JavaScript. Revenons au CSS. Nous devons maintenant créer le changement de classe. Ensuite, nous devons sélectionner Napa Wrapper. Pour afficher le rappeur en arrière, nous devons régler sa position inférieure sur zéro. Et nous devons augmenter l'opacité. Nous devons en faire un. Encore une fois, nous devons changer de classe. Mais pour le lien de navigation, maintenant, comme vous le savez, les liens sont placés au-dessus et nous devons mettre la première position à zéro. Nous allons donc sélectionner Changer, suivi d'un lien substantif et placer la première position à zéro Donc, si je clique sur l'icône du menu, puis sur l'écran inutilisable, et si nous cliquons sur le X, il devrait se masquer Donc, en fait, nous avons presque terminé. Nous devons légèrement personnaliser les effets. Nous devons également afficher les éléments de navigation dans l' ordre avec quelques retards. Attribuons à Napa une transition rapide. Avec les valeurs suivantes. Nous avons besoin de 0,5 s au plus bas, puis d'opacité, 0,2 s. Nous avons besoin de la même transition ici, mais avec un certain retard Prenons donc cette ligne de code, collez-la ici, et ici, attendez 0,25 s. Maintenant, si je clique sur l'icône, le nombre s'affichera avec une transition fluide Mais en fait, ce n'est pas ce que nous voulons. Nous devons afficher les éléments de navigation dans la commande. Nous devons donc effectuer des transitions pour chacun des éléments, mais avec des délais différents. Allons-y et sélectionnons à nouveau Modifier. Suivie d'un lien avec la pseudo-classe F enfant. Spécifiez ici le premier élément, un, et insérez votre transition avec les valeurs suivantes. Nous avons besoin de la propriété supérieure avec une durée de 1 s et un temps de retard de 0,4 s. Puis une opacité de 0,3 s. La couleur de 0,3 s également Dupliquons ce code quatre fois et changeons les numéros des articles et le délai. Pour le deuxième article, nous avons besoin de 0,6 s. Ensuite, pour le troisième élément, vous pouvez voir votre 0,8 s. Pour le quatrième article, nous avons besoin de 1 s. Pour ce qui est du dernier article, j'ai créé le cinquième article, nous avons besoin d'un délai de 1,2 s. Très bien, donc voyons les éléments à afficher dans l'ordre Et en fait, nous avons presque terminé. La seule chose à faire est de masquer les objets pendant qu'ils sont placés. Pour cela, je vais utiliser overflow caché, mais selon la direction y. Très bien, maintenant tout fonctionne parfaitement. Et en fait, nous avons terminé notre projet. Toutes ces sections sont construites et personnalisées. Enfin, nous devons adapter le projet à différentes tailles d'écran. 80. Projet 8 - Rendre le projet réactif: Très bien, tout d'abord, inspectons la page et activons le mode réactif. Comme vous le savez, nous avons construit ce projet sur la base de cette résolution. Et maintenant je vais trouver différents points de rupture sur lesquels nous devrons apporter quelques modifications. Tout au long de cette partie, nous utiliserons des requêtes multimédia CSS. Alors allons-y et trouvons le premier point d'arrêt. Je pense que nous devons apporter quelques modifications une fois que nous aurons la largeur de la fenêtre à moins de 1 200 pixels. Sur les points d'arrêt, je vais placer des cartes, en particulier dans une colonne Vérifions la partie nulle. Ça a l'air bien. La seule chose que nous voyons ici est un petit espace sur le côté droit. Nous voyons cet espace car en mode réactif, la barre de défilement n'est pas visible. Et c'est la raison de ce problème. Vous pouvez donc simplement l'ignorer car sur les petits appareils, il aura une belle apparence. Créons une requête multimédia CSS. Je vais spécifier la largeur maximale à 1 200 pixels. Sélectionnez ensuite l'emballage des cartes. Modifiez la direction de flexion. Je vais en faire une colonne. Et nous avons également besoin d'un centre d'alignement des objets afin de placer les cartes au centre. Très bien, les cartes sont donc placées verticalement, et nous devons maintenant ajouter de l'espace entre elles. Sélectionnons donc la carte elle-même et ajoutons une marge énorme. Trois rem en haut et en bas, et zéro sur les côtés gauche et droit. Très bien, enfin, je vais augmenter la largeur des arrière-plans de ces histoires Sélectionnez donc story BG et augmentez sa largeur à 85 %. OK, donc à ce point d'arrêt, nous en avons terminé. Tout le reste semble bien. Passons à autre chose et trouvons le suivant. Je pense que le prochain devrait être de mille pixels, car à ce point d'arrêt, certains éléments doivent être personnalisés Utilisons donc contre les médias CSS et spécifions la largeur maximale en milliers de pixels Vérifions-les maintenant car je pense qu'il serait préférable de placer les éléments de navigation verticalement dans une colonne. Pour cela, nous devons modifier la direction de la flexion. Nous allons donc sélectionner la liste et modifier la colonne de direction de flexion. Donc, pour l'instant, ils sont placés verticalement, mais ont ici un espace vide. Ces articles devraient occuper de l'espace. Et pour y parvenir, utilisons l'une des propriétés de flexbox appelée flex grow Sélectionnons le lien de navigation et définissons Flex Grow sur un. Cette propriété permet aux éléments flexibles d' occuper l'espace disponible à l'intérieur du conteneur. Bon, passons à autre chose et prenons soin de l'en-tête. Je vais placer le titre et paragraphe au centre de la page. Nous allons donc sélectionner le texte de l'en-tête et définir sa position, le rendre absolu. Ensuite, nous devons définir les propriétés supérieure et gauche, toutes deux à 50 %. Afin d'envoyer parfaitement à l'élément. Nous devons utiliser la fonction Transform with Translate. Et il faut passer ici -50 % dans les deux sens. Je veux dire l'axe X et l'axe Y. Le titre et la progression sont placés au centre. Mais comme vous pouvez le voir, ils se sont retrouvés derrière la montgolfière. Pour résoudre ce problème, définissons l'indice à dix. OK, ensuite je vais réduire la taille de police du titre et du paragraphe. Nous allons donc sélectionner le titre. Changez la taille de la police, faites-en six Ram. Ensuite, je vais sélectionner le paragraphe d'en-tête. Faisons fonctionner sa taille de police 2,5. Très bien, nous avons reçu nos textos, c'est terminé. Passons à la section suivante. Nous devons ici réduire la taille du titre. Sélectionnons-le et définissons sa taille de police. Six rounds. OK, c'est tout pour cette section. Vient ensuite la section des histoires. Je pense qu'à partir de ce point d'arrêt, nous n'avons plus besoin de fausser le contexte Je vais donc leur donner la forme du rectangle. Allons-y et sélectionnons Story BAG. Utilisez ensuite Transform Skew x et mettez-le à zéro. Ensuite, nous avons besoin de l'histoire elle-même. Reprenons cette ligne de code et collez-la. Vous. D'accord ? De plus, je vais placer le contenu verticalement. Pour cela, nous devons modifier la direction de la flexion. Faisons donc une colonne et alignons également les éléments au centre. Très bien, donc la dernière chose à faire concernant le stockage est de créer de l'espace sous les images Allons-y et sélectionnons l'image. Et on lui a attribué la marge inférieure avec une valeur de trois rampes. OK, c'est tout à propos de cette section d'histoires. Enfin, je vais m' occuper du filtre. Je vais réduire l' espace à l'intérieur des liens et je vais également réduire l'espace entre eux. Allons-y et sélectionnons le lien qui a défini le rembourrage comme 0,3 RAM en haut et en bas et deux RAM sur les côtés droit et gauche Et nous devons également utiliser une marge de 0,1 rem. Très bien, donc je pense que nous en avons terminé au point d'arrêt. Tout a l'air bien. Allons-y et trouvons le suivant. Il devrait donc être de 800 pixels. Allons-y et créons nouveaux médias avec une largeur maximale de 800 pixels À ce point d'arrêt, je vais complètement masquer le paragraphe. Allons-y, sélectionnons-le et attribuons-lui , n'en affichons aucun. Ensuite, diminuons la taille de l'en-tête de la section de la carte. Sélectionnons donc le titre des outils populaires et faisons en sorte que sa taille de police soit de cinq points. Très bien, donc en fait, tout semble aller bien sauf pour la section contact et le pied de page Je vais réduire la largeur des éléments du formulaire. Allons-y, sélectionnons-le et réglons sa largeur à 90 %. En ce qui concerne le pied de page, je vais placer les liens verticalement dans une colonne Allons-y et sélectionnons la liste de bas de page. Modifiez la colonne de direction de flexion. De plus, nous devons aligner les éléments au centre. Enfin, ajoutons un espace entre les liens. Sélectionnez le lien du pied de page et ajoutez-y une marge. Un rem en haut et en bas et zéro sur les côtés droit et gauche. Très bien, en fait, c'est tout à propos de ce point d'arrêt. Allons-y et trouvons le suivant. Le prochain sera donc, je pense, de 650 pixels. Nous allons donc créer une nouvelle requête multimédia et spécifier la largeur maximale à 650 pixels. À la pause, au point d'arrêt, je vais étendre ces sections à l'ensemble de la page Nous allons donc sélectionner le conteneur et supprimer la marge. Mets-le à zéro Ensuite, je vais m' occuper de la barre de navigation. Commençons par les icônes. Sélectionnez, ouvrez notre icône et changez les positions en haut et à gauche. Je vais les régler tous les deux à 2,5 runs. Avant de passer à l'icône suivante, je voudrais supprimer l' espace autour du napa Nous allons donc sélectionner maintenant le wrapper et mettre le rembourrage à zéro. Sélectionnez ensuite la deuxième icône, qui comporte une icône de vivaneau fermée, et modifiez la bonne position Faites-le 4M. Très bien, c'est tout à propos de la barre de navigation. Allons-y et sélectionnons l'en-tête. Je vais régler sa hauteur à 200 vh. Très bien, nous en avons terminé avec l'en-tête. Passons à la section contact. Je vais réduire la taille du titre. Allons-y, sélectionnons l' en-tête du contact et arrondissons sa taille de police à six. Je vais également ajouter des styles au formulaire de contact. Modifiez la quantité de rembourrage. Dirigez-vous vers la rampe. Pour ce qui est de la hauteur, faisons-en quatre pour monter en rampe. Très bien, c'est ça, environ 650 pixels. Enfin, nous devons personnaliser le projet sur les derniers points d'arrêt, qui, je pense, seront de 500 pixels Allons-y et créons nouveaux médias avec une largeur maximale de 500 pixels C'est donc le moyen le plus simple de donner belle apparence aux éléments sur ce point d'arrêt J'ai pensé à diminuer la taille de police des éléments HTML. Comme vous le savez, à l'heure actuelle, cela équivaut à 62,5 % Et je vais réduire le H2 de 45 %. Ce code aura un effet sur la taille de chaque élément car tout au long de ce projet, nous avons utilisé la RAM comme unité de mesure. OK, donc je trouve que tout semble plutôt bien. Enfin, nous avons terminé. Nous avons terminé la construction de ce projet. Alors félicitations, j' espère que cela vous a plu. J'ai appris plein de choses intéressantes et intéressantes. Si vous avez aimé ce projet, cliquez sur le pouce levé, commentez ci-dessous, partagez la vidéo, abonnez-vous à notre chaîne et cliquez sur la cloche pour être informé des projets à venir OK. À la prochaine. 81. Projet 9 - Aperçu du projet: Très bien, il est donc temps de créer notre prochain projet, qui sera le clone de l'un des les plus populaires et les plus sites Web les plus populaires et les plus utilisés, appelé Paypal, créera l'interface utilisateur des différentes pages Je suis sur la page principale, les pages de connexion et d'inscription. Bien entendu, ce ne sera pas le clone exact avec toutes les fonctionnalités. Comme je l'ai dit, nous allons créer simplement une interface utilisateur avec HTML, CSS et JavaScript. Paypal a une apparence différente selon les pays. L'interface utilisateur change fréquemment de temps à autre. Ne vous inquiétez donc pas s'il ne s'agit pas du clone exact de l'interface utilisateur actuelle. Très bien, donc avant de passer directement à l'écriture du code, décrivons d'abord à quoi ressemble le projet Comme je l'ai dit, nous allons créer trois pages différentes, connexion principale et l'inscription. Nous allons commencer par la page principale. Il se composera de deux sections différentes. La première section sera la bannière avec navigation. Nous avons ici plusieurs éléments de navigation. Si je les survole, le menu déroulant s'affiche Il changera lorsque nous survolerons un autre élément de navigation De plus, nous aurons ici deux boutons différents pour la connexion et l'inscription. Si je clique dessus, nous accéderons à la page appropriée. La bannière sera donc suivie de la deuxième section. Il comprendra trois parties différentes avec une police, icônes géniales, des éléments de texte et des boutons. Ensuite, nous aurons cette section bleue avec différents paragraphes. Ensuite, nous allons créer cette petite section ici avec une image et trois étapes différentes. bas de page, vous trouverez un bouton pour vous inscrire, suivi du pied de page Très bien, alors voyons à propos de la page principale. Jetons un coup d'œil à la page de connexion. Elle sera assez similaire à la page de connexion d'origine. Nous aurons ici deux champs de saisie avec des boutons. C'est probablement la page d'inscription. Il sera composé de deux parties. Sur le côté gauche, nous aurons plusieurs images des clients. Quant au côté droit, il inclura deux options différentes. Que nous voulions créer un compte personnel ou professionnel. Très bien, c'est tout pour le projet. Comme d'habitude, nous allons le rendre réactif aux différentes tailles d'écran. Si j'inspecte la page et que je passe en mode réactif, vous verrez qu' elle est réactive. Une chose à noter ici, sur les tailles d'écran plus petites, nous n' aurons plus de listes déroulantes Ils apparaîtront dans le menu comme suit. OK, alors c'est ça. Nous sommes prêts à commencer à construire le projet. Passons donc à autre chose. 82. Projet 9 - Créer et personnaliser les première, deuxième et troisième sections: Bonjour et bienvenue sur notre nouvelle vidéo YouTube. Dans ce tutoriel, nous allons créer le site Web appelé Wine House. Le projet va être créé sur la base HTML, CSS et JavaScript. Vous apprendrez comment créer de jolis effets sympas. J'espère donc que le projet sera intéressant et utile. Comme nous l'avons dit tout au long de ce didacticiel, nous allons utiliser le HTML, le CSS et le JavaScript. Je m'attends donc à ce que tous connaissent déjà les bases de ces trois technologies. Très bien, allons-y et commençons par décrire le projet Il se compose de cinq pages différentes et elles sont alignées différemment. La plupart du temps, vous pouvez rencontrer des sites Web sur lesquels vous pouvez faire défiler les différentes sections de la page Web vers le haut et vers le bas. Mais dans notre cas, vous pouvez faire défiler la page horizontalement. Je veux dire, une fois que vous aurez fait défiler la page, vous naviguerez vers les différentes pages avec des effets de transition sympas. De plus, vous pouvez voir que nous n' avons pas ici la barre de défilement. En plus de cela, vous pouvez voir ici les manettes, je veux dire, ces petites flèches. Si vous cliquez dessus, vous accéderez aux différentes pages. Vous trouverez également ci-dessous une barre de progression qui nous indique sur quelle page nous nous trouvons actuellement. De plus, nous avons ici une navigation fixe. Et les éléments de navigation ont de jolis effets de survol. D'accord, le projet va donc répondre à différentes tailles d'écran. Si j'inspecte la page, passe en mode réactif et je vérifie le projet sur différents points de rupture. Vous verrez qu' il est réactif. Sur des écrans de plus petite taille. Nous n'avons plus de navigation fixe. Il est transformé en menu de hamburgers. Très bien, en fait, tout tourne autour de notre projet. Allons-y et commençons. J'ai créé un nouveau dossier sur le bureau appelé Wine House, dans lequel j'ai un autre dossier pour les images. Allons-y et ouvrons ce dossier dans le code VS. Je vais créer trois fichiers différents. Index.html, style.css et les scripts point js. Cela ouvre le fichier index.html et génère le document HTML de base. Je vais utiliser Emmet. Mettons ici le point d' exclamation et appuyons sur Entrée ou sur Tab. Ensuite, je vais relier ces trois fichiers. Ouvrons donc la balise link et spécifions ici le chemin du fichier CSS. Ensuite, je vais ouvrir la balise de script en bas, au-dessus de la balise body de fermeture. Et dans l'attribut source, nous allons spécifier le chemin du fichier script.js. D'accord, en plus de cela, je vais utiliser l'une des polices Google tout au long de ce projet. Alors allons-y et récupérons le lien. Allons sur le site Web de Google Fonts et recherchons la police appelée cormorant Sélectionnons ici deux épaisseurs de police différentes, puis récupérons le lien. Je vais le coller dans l'élément principal. OK, ensuite je veux changer le logo et la barre de titre. Nous devons ouvrir la balise de lien en tant que valeur de l'attribut dont nous avons besoin ici. Ensuite, je vais spécifier le type. Il va être imagé en PNG. Enfin, nous devons spécifier le chemin de l'image et les attributs de référence H. Nous avons ici un dossier d'images, puis nous devons sélectionner un point de logo PNG. Enfin, modifiez le titre. Nous avons besoin de Wine House. Allons-y et exécutons le projet ou le navigateur. Pour ça. Je vais utiliser l'un des packages de code VS appelé serveur live. Cela nous permet d'exécuter le projet dans le navigateur et d' apporter des modifications sans actualiser la page à chaque fois. Vous pouvez donc installer et utiliser cette extension. Le projet est donc en ligne dans le navigateur. Vous pouvez également voir ici le logo dans la barre de titre. Enfin, organisons un peu nos environnements de travail en plaçant l' éditeur et le navigateur, comme ça, et commençons. Très bien, nous allons donc créer et personnaliser chacune des pages séparément. Ensuite, nous allons programmer l'effet de défilement et d' autres choses. Allons-y et commençons à créer la balise open div du balisage HTML, qui sera le conteneur Ensuite, nous aurons d' autres éléments div. Ce sera l'emballage. Donc, dans l' ensemble, nous aurons cinq pages différentes, je veux dire cinq sections différentes Allons-y donc et créons les éléments de cette section pour chacun d'entre eux. Je vais lui attribuer la première section de classe. Ensuite, dupliquons-le quatre fois et changeons les noms des classes. Nous avons besoin de noms de classe de deux à cinq. Très bien, je vais donc commencer par la première section. J'ai créé la page d'accueil. Il inclut le titre souligné et l'arrière-plan en plein écran. Vous voyez ici les flèches de navigation et la barre de progression. Ils sont fixes et s' affichent sur toutes les pages. Nous nous occuperons d' eux un peu plus tard. OK, allons-y et ouvrons les éléments div dans la première section Ces éléments auront deux classes différentes. Le premier sera le wrapper de section de classe commun Pour le second, ce sera le cours individuel. Je vais rapidement l'appeler section 1. En fait, nous avons également besoin de ce wrapper de section pour le reste des sections Copions donc ces éléments et collons-les pour chacun d'entre eux. Nous devons également modifier les noms des classes. Nous avons besoin de deux nombres de deux à cinq. Bon, revenons à la première section. Nous devons insérer une balise div qui enveloppera le titre. Attribuons-lui un nom de classe, section, une enveloppe de titre Et passez ici les éléments de titre H1. Je vais lui attribuer un titre de section 1 de la classe. Et aussi, plaçons ici les textes suivants. Les meilleurs vins du monde. Voilà pour la première section. Maintenant, je vais commencer à écrire du CSS. Tout d'abord, je vais créer des styles communs. Sélectionnons chaque élément à l'aide d'un astérisque et mettons ici quelques styles courants et réinitialisés Je vais me débarrasser de la marge et du rembourrage de chaque élément Mettons-les tous les deux à zéro. De plus, je vais créer un format de boîte, un border-box. Ensuite, je vais me débarrasser de certains styles par défaut. Je veux dire, disons un aperçu pour personne. De plus, je vais définir la décoration du texte sur Aucune. Supprime ensuite les styles par défaut des éléments de la liste. Faisons en sorte que le type de style de liste soit nul. Enfin, je vais définir la famille de police pour appeler Garamond, abruti Désolée. Tout au long de ce projet, nous allons donc utiliser la RAM comme unité de mesure. heure actuelle, 1 g est égal à 16 pixels car la taille de police de l' élément HTML est égale à 16 pixels. Par défaut, je souhaite convertir un remède en dix pixels. Et pour cela, nous devons réduire la taille de police de l'élément HTML, et nous devons la porter à 62,5 % La taille du titre a été réduite. Après cela, prenons soin de l'emballage. Je vais régler sa largeur et sa hauteur, toutes deux à 200 % de la fenêtre d'affichage Attribuons à la propriété width la largeur cent fenêtres d'affichage Pour ce qui est de la hauteur, je vais la mettre à cent pour la hauteur de la fenêtre d'affichage OK, ensuite, sélectionnons cet élément de section lui-même et définissons la largeur et la hauteur, toutes deux à 200 %. Ensuite, je vais rendre sa position absolue. Et en plus de cela, nous devons rendre la position du wrapper relative car je veux positionner les sections fonction de leur élément parent, qui est le rappeur Ensuite, réduisons la position de décalage de la section à zéro. Après cela, je vais sélectionner la section wrapper. Définissons sa largeur et sa hauteur. Nous devons les hériter tous les deux de l'élément section. Définissons donc la largeur et la hauteur à hériter. Donc, à l'heure actuelle, la première section s'est retrouvée derrière les autres sections raison de la position absolue. Comme je l'ai dit, je vais le personnaliser pour la première section. Donc, pour le placer en haut des autres sections, utilisons la propriété d'indice Z. Sélectionnez la première section et définissez l'index sur 50. Après cela, je vais définir l'image comme arrière-plan en plein écran Nous allons donc sélectionner l'enveloppe de la section 1 Ensuite, je vais utiliser ici un dégradé linéaire Mettons ici la couleur noire. Je veux dire RGBA avec trois zéros et avec une opacité de 0,5. Ensuite, nous avons à nouveau besoin de RGBA, couleur noire, mais avec une opacité différente. Mettons-le à 0,4. Ensuite, nous devons spécifier l'URL de l'image, la partie de l'image. Nous avons un dossier appelé images, et nous devons sélectionner la section 1, PG point JPG. Ensuite, nous avons besoin de Center et également de no-repeat. Enfin, définissons la taille de l'arrière-plan, recouvrez-le. Bien, comme vous pouvez le voir, nous avons ici une image d' arrière-plan en plein écran pour la première Maintenant, occupons-nous du titre de sortie, sélectionnons sa division d'emballage Tout d'abord, je vais vous faire sortir de la position de l'emballage Je vais placer le titre près du bas de la page. Rendons donc sa position absolue. Définissez ensuite la propriété supérieure et attribuez-la à 70 %. Pour ce qui est de la propriété de gauche, je vais la porter à 50 %. Et nous devons également transformer avec la fonction de traduction. Nous devons passer ici à -50  % dans les deux sens. Je veux dire, pour les axes x et y. Le titre est donc placé correctement, mais pour le moment, il n'est pas tout à fait visible. Alors allons-y et réglons ce problème. Je vais sélectionner le titre lui-même. Définissons sa taille de police. Dix RAM. Modifiez également l'épaisseur de la police , mettez-la à 300. Et change de couleur. Je vais l'utiliser ici. blanc. Ensuite, je vais transformer le texte en majuscules. Et créez également un espace entre les lettres en utilisant espacement comptable avec une valeur de 0,1 run. Ensuite, ajoutons une bordure au bas du titre. Utilisez donc la bordure inférieure avec les valeurs pointant vers le bélier. Solide. Et comme couleur, je vais utiliser le D5 avec quatre zéros Très bien, donc le titre est joli. Enfin, je souhaite l'aligner sur le côté droit et désactiver la sélection de l'utilisateur. Nous devons donc utiliser un texte aligné sur la valeur, n'est-ce pas ? Ensuite, l'utilisateur n'en sélectionne aucune. Très bien, voyons à propos de la première section. Ça a l'air sympa et nous pouvons passer à la seconde. Tout d'abord, nous allons créer le balisage HTML. La deuxième section inclura donc deux images différentes et le bouton. Allons-y et ouvrons une balise div avec la classe Sale. Nous aurons donc une image et un bouton dans leur développement qui ouvriront l'élément IMG. Et les attributs de la source. Je vais spécifier le chemin de l'image. Nous devons sélectionner bag dot PNG dans le dossier des images. Je vais attribuer à l'attribut alt la navigation arrière. Et nous avons également besoin de votre attribut de classe avec une valeur de retour en arrière. Ensuite, créons un bouton avec un nom de classe, sale, btn. Et pour ce qui est de la taxe, je vais passer votre commande. Maintenant. En plus de cela, je vais insérer ici une autre image, mais elle sera placée en dehors du div Précisons ici le chemin de l'image. Nous avons besoin d'une bouteille de vin en PNG. Attribuons également à l'attribut alt la valeur de la bouteille de vin. Et en plus de cela, je vais ajouter un attribut de classe avec une bouteille de vin d'un bon rapport qualité-prix. D'accord, c'est donc tout à propos du balisage de la deuxième section heure actuelle, la deuxième section s'est retrouvée derrière la première. C'est pourquoi nous ne voyons pas ici certains éléments. Je vais résoudre ce problème en utilisant à nouveau la propriété index. Je vais changer ici le nom de la classe. Utilisons la section 2. En ce moment. Je voulais utiliser cette méthode, mais nous finirons par définir différentes valeurs de la propriété d'index pour toutes ces sections. Très bien, nous devons maintenant définir l'arrière-plan de la deuxième section Allons-y et récupérons ce code à partir d'ici. Ensuite, apportez quelques modifications. Nous avons besoin de l'emballage de la section 2. Modifiez ensuite les opacités. Faisons en 0,8 et 0,9 Et changeons également le nom de l'image. Nous avons besoin que la section soit G. D'accord ? C'est donc à cela que ressemble la deuxième section en ce moment, car je vois que nous avons ici les barres de défilement, et je veux m'en débarrasser. Pour cela, nous devons attribuer au wrapper overflow hidden Après cela, nous allons nous occuper de la disposition de ces éléments. Je vais utiliser Flexbox. Utilisons ici Display Flex. Ensuite, nous avons besoin d' aligner les éléments au centre pour centrer les éléments verticalement. Et je vais également utiliser le contenu de justification avec l'espace de valeurs de manière uniforme. Très bien, allons-y et commençons à styliser chacun des éléments Dans un premier temps, je vais sélectionner l' élément div avec la classe sale Utilisons à nouveau les livres de flux. Je veux en faire un conteneur flexible. Ensuite, nous devons changer la direction du flux. Faisons-en une colonne. Ensuite, pour le centrage vertical et horizontal, utilisons aligner les éléments au centre et justifier le centre de contenu Très bien, après cela, nous allons personnaliser la première image Là où elle est légèrement diminuée, l'opacité est portée à 0,9. Et je vais aussi changer la largeur de l'image. Passons à 45 au lieu de sélectionner le bouton. Il y a une vente en classe, d'ailleurs. Tout d'abord, définissons la largeur et la hauteur. Je vais régler la largeur à 20 RAM. Quant à la hauteur, faisons-la cinq rem. Ensuite, je vais m' occuper du texte. Augmentons la taille de la police. Va jusqu'à Ram. Modifiez également l'épaisseur de la police. Rendez-le plus léger. Transformez ensuite le texte en majuscules et créez un espace entre les lettres Faisons en 0,1 rep. D'accord, après cela, je vais définir la couleur d'arrière-plan sur transparent. Changez également la couleur, rendez-la blanche. Créez ensuite de l'espace en haut du bouton en utilisant la marge supérieure avec une valeur pour la RAM. Enfin, créons une bordure avec des valeurs de 0,1 RAM, solide, et utilisons la couleur blanche. Très bien, le bouton est donc personnalisé. Enfin, je souhaite créer un petit effet de survol. Je vais changer la couleur d'arrière-plan en survolant. Bouton sélectionné avec le pointeur de la souris. Changez la couleur d'arrière-plan. Utilisez ici à nouveau cette couleur rouge. Ensuite, pour rendre l'effet un peu plus fluide, utilisez une transition avec une valeur de couleur de fond et une durée de 0,2 seconde. Très bien, donc le bouton est stylé et le dernier élément que je souhaite personnaliser est la deuxième image Allons-y et sélectionnons-le. Je vais modifier l'opacité. Je veux dire, je veux le réduire à 0,6 et aussi changer la largeur. Faites-en une rampe à deux voies. Très bien, nous avons terminé avec la deuxième section. Il est stylé et nous devons passer à autre chose et nous occuper de la troisième section Ça va être, encore une fois , assez simple. Nous aurons l'image d'arrière-plan en plein écran. De plus, nous aurons d'autres images au centre de la page et ces textes ici. Alors tout d'abord, allons de l'avant et créons à nouveau le balisage HTML Nous aborderons ici trois éléments différents. La première sera la balise H1 ouverte avec un titre de section 3 de classe Et passez ici le texte, de la meilleure qualité. Ensuite, nous aurons l'image. Spécifiez le chemin de l'image dans l'attribut source. Nous devons sélectionner le point du cadre PNG. Ajoutez également ici la valeur de l'attribut alt, disons Grapes Frame. Ajoutez ensuite un attribut de classe avec un tiret IMG dans le cadre de valeur. Dupliquons cette ligne de code. Changez le nom de l'image dont nous avons besoin ici, grapes dot PNG. Également comme valeur de l'attribut alt. Je ne vais laisser ici que des raisins. L'événement a changé de classe. Nous avons besoin ici des raisins Dash et G. D'accord, donc pour l'instant cette section n'est pas visible et la raison est la même. Il s'est retrouvé derrière la deuxième section. Corrigeons donc à nouveau ce problème en utilisant la propriété z-index. Je vais changer ici le nom de la classe. Nous avons besoin de la section 3. Les éléments sont maintenant visibles. Allons-y et personnalisons cette section. Tout d'abord, définissons l'image comme arrière-plan en plein écran Sélectionnons l'emballage de la section 3. En fait, nous avons également besoin du code similaire pour le rappeur de la section 3. Récupérons donc ce code à partir d'ici. Collez-le pour le wrapper de la troisième section et apportez quelques modifications Changeons les opacités. Nous en avons besoin ici. 0.3, 0.9, puis modifiez le nom de l'image. Il nous en faut trois. Enfin, nous devons ici justifier le contenu avec le centre de valeur plutôt que l'espace de manière uniforme. Très bien, c'est tout à propos de l'emballage. Allons-y et personnalisons chacun des éléments séparément. Je vais commencer par les images. Sélectionnons la première image, qui possède le cadre de classe IMG. Réglons la largeur à 100 rampes. Également. Je vais rendre sa position absolue. Et enfin, diminuez l' opacité, mettez-la à 0,5. OK, ensuite, je vais sélectionner cette deuxième image, Graphes IMG. En fait, nous avons également besoin de styles similaires pour la deuxième image. Allons-y, récupérons ce code à partir d'ici et changeons simplement les valeurs. Je vais régler avec 240 RAM. En ce qui concerne l'opacité, faisons-la 0,7. Enfin, je vais m' occuper des éléments de titre. Allons-y donc et sélectionnons ces éléments. Tout d'abord, augmentons la taille de la police, faisons-en 20 RAM. Changez ensuite la couleur. Je vais utiliser ici la couleur gris clair, je veux dire CCC, et aussi transformer le texte en majuscules Ensuite, nous devons faire pivoter le titre. Utilisons donc Transform avec la fonction de rotation. Je vais faire pivoter l'image de 20 degrés. Vous pouvez également utiliser votre centre d'alignement du texte. Le titre est joli. Je veux y ajouter un petit effet d'ombre et je vais également désactiver la sélection de l'utilisateur. Allons-y et utilisons l'ombre du texte avec les valeurs 0,5 RAM plutôt que 1,5 RAM. Et comme couleur, je vais utiliser 000, qui est la colonne noire. Et enfin, utilisons ici, l'utilisateur n'en sélectionne aucun 83. Projet 9 - Créer et personnaliser les quatrième et cinquième sections: Très bien, c'est tout à propos de la troisième section. Nous devons maintenant passer à autre chose et commencer à travailler sur la section car cette partie se compose uniquement du titre et de l'image. Et nous avons également une image d'arrière-plan en plein écran. En fait, c'est la même image avec un effet de flou. Très bien, donc cette section va être simple. Allons-y et commençons à créer le balisage HTML. Ouvrons les éléments div avec la section de classe quatre, b, g. Nous allons utiliser cet élément div créer un effet de flou pour l' Ensuite, nous avons besoin du titre. Ouvrons la balise H1 avec la section de classe pour insérer le texte des vins récemment publiés Enfin, je souhaite insérer ici une image. Spécifiez la partie de l'image. Nous devons sélectionner une section pour le JPG à gros points dans le dossier des images, puis l'attribuer à l'attribut alt, la valeur des nouveaux vins. Et je vais également ajouter ici de nouveaux vins de classe. Img. Très bien, donc avec la maquette, nous avons terminé Mais comme d'habitude, nous devons afficher une nouvelle section sur la page car elle s' est retrouvée derrière la troisième section. Allons-y et utilisons à nouveau la propriété z-index. Je vais changer le nom de la classe de section en section. Car cette section est visible. Allons-y et commençons à le personnaliser. La première chose que je vais faire est de réduire la largeur de l'image pour faciliter notre processus de travail. Allons-y, sélectionnons de nouveaux vins, IMG, et réglons sa largeur à sept pour courir. Très bien, après cela, plaçons les éléments au centre de la page Et pour cela, nous devons utiliser Flexbox. Je vais donc sélectionner la section pour l'emballage. Faisons en un conteneur flexible. Alors je vais changer de direction. Faisons-en une colonne. Suivant. Pour centrer les éléments horizontalement et verticalement, nous devons utiliser justify-content center et aligner les éléments au centre Les éléments sont donc placés au centre de la page. Et maintenant je vais m' occuper de l'arrière-plan. Comme vous vous en souvenez, nous avons créé un élément div vide pour l'arrière-plan Allons-y et sélectionnons les éléments. Tout d'abord, je vais définir sa largeur et sa hauteur. Mettons-les tous les deux à cent pour cent et rendons également la position absolue. Ensuite, je vais définir l'arrière-plan. Je suis dans une image en plein écran. Dans les sections précédentes, nous avons attribué l'arrière-plan aux rappeurs de cette section Mais dans ce cas, nous allons utiliser un effet de flou. Et si nous faisons cela pour le wrapper de section , tous les éléments inclus seront flous C'est pourquoi nous utilisons un élément supplémentaire. Allons-y et définissons l'arrière-plan. Je vais utiliser un dégradé linéaire. Avec des valeurs RGBA. Je veux dire la couleur noire, mais l'opacité, 0,8 et la première couleur, puis 0,7 et la seconde Ensuite, nous allons spécifier la partie de l'image. Je vais sélectionner une image appelée section pour PNG ou JPEG. Ensuite, nous avons besoin du centre et de la non-répétition. Également. Définissons la taille de l'arrière-plan à couvrir. Nous avons donc ici l' image d'arrière-plan, mais comme vous pouvez le voir, les autres éléments sont cachés car ils se sont retrouvés derrière l'arrière-plan. Pour résoudre ce problème, allons de l'avant et utilisons la propriété z-index Je vais le régler sur une valeur négative, disons moins un. D'accord ? Enfin, nous devons brouiller l'arrière-plan. Pour ça. Je vais utiliser l'une de ces propriétés CSS appelée filtre. Ensuite, nous devons lui attribuer une fonction appelée bluer. Et puis comme valeur, instituons des points par rampe. D'accord ? Comme vous pouvez le constater, l' arrière-plan a un effet de flou. Mais nous avons ici un petit problème. Si vous regardez les bords de cette action, vous verrez qu' ils ne sont pas flous Je vais donc augmenter légèrement la largeur et la hauteur de cette section. À l'heure actuelle. Ils sont égaux à 100 % et je vais les faire passer à 110 % Très bien, alors voyons le contexte. Allons-y et passons au titre. Nous allons sélectionner ces éléments. Tout d'abord, je vais augmenter la taille de la police. Faisons-en dix RAM , puis allégeons légèrement la taxe en utilisant font-weight 300 Alignons également le texte au en utilisant le centre d' alignement du texte Ensuite, je vais créer un espace en bas du titre en utilisant la marge inférieure avec la valeur sept RAM. Changez également la couleur. Vous voyez ici la couleur rouge. Je suis en D5 avec quatre zéros. Enfin, je vais désactiver la sélection de l'utilisateur. Utilisons l'option user select avec la valeur none. Le titre semble donc bon. Et avant de terminer cette section, je vais légèrement personnaliser l'image. Créons une bordure autour de l'image qui lui est attribuée, arrondie à 0,1, unie et de couleur blanche. Ensuite, je vais créer de l'espace à l'intérieur de la boîte en utilisant du rembourrage Faisons en un seul rem sur les quatre côtés. Je vais également réduire légèrement l'opacité de l'image. Mettons-le à 0,7. Très bien, c'est donc tout à propos de la quatrième section. Il est stylé Et maintenant, nous allons devoir passer à la dernière section, qui sera la photo. Il s'agit donc d'une image. Nous avons également quelques informations de contact et il y a un texte de copyright en bas de page. Allons-y donc et commençons à créer un balisage HTML. Je vais créer la liste avec les plats de la classe ou ceux publiés. Je vais vous transmettre quelques éléments de LI. Le premier élément va être le contact. Ensuite, nous aurons New York plutôt qu'une adresse, disons le 1049 Stanley Avenue Ensuite, je vais ouvrir ici tous les jours. C'est pour le dernier article. Nous vous insérerons uniquement sur rendez-vous. Juste après la liste. Je vais insérer ici une image. Nous allons sélectionner l'image dans le dossier des images. Ce sera l'image avec le nom Footer, dash IMG point PNG Et je vais également ajouter un attribut de classe avec une valeur en pied de page, IMG Ensuite, nous devons créer une autre liste. En fait, je vais copier la première liste à partir d'ici, la coller et modifier les éléments. Passons ici, connectez ensuite le numéro de téléphone. Je vais mettre ici un numéro de téléphone fictif, disons 516 448,2 De plus, je vais mettre ici le numéro de téléphone portable, disons 63 174 Vient ensuite l'e-mail. Mettons ici un exemple sur whitehouse.com. Enfin, insérons ici, rejoignez notre liste de diffusion. Très bien, enfin, créons le paragraphe pour le texte du copyright, ouvrons p éléments avec la classe copyright Placez ensuite votre copyright, suivi de l'entité HTML5, qui sera le signe du copyright Nous avons besoin d'une esperluette et d' une copie, d'un point-virgule. Ensuite, écrivons votre code et créons-le. Et tous droits réservés. Cette section n' est pas visible pour le moment. Allons-y et utilisons à nouveau la propriété d'index. Changez le nom de la classe 4-5. Voilà à quoi ressemble notre nouvelle section. Allons-y et personnalisons-le. Tout d'abord, je vais définir l'image d' arrière-plan en plein écran Nous allons donc sélectionner l'emballage, puis définir l'arrière-plan. En fait, je vais copier ce code à partir d'ici. Modifiez les valeurs RGBA. Je veux dire les valeurs de l' opacité dont nous avons besoin ici, 0,7 puis 0,5 Modifiez également le nom de l'image. Nous devons utiliser la section 5, BG. Très bien, je vais maintenant placer tous les éléments au centre de la page Nous allons donc utiliser Flexbox. Je vais fabriquer le conteneur Wrapper Flex. Ensuite, afin de centrer parfaitement les éléments horizontalement et verticalement, utilisons un centre d'élément linéaire et justifions le centre de contenu. Très bien, allons-y et personnalisons le moins possible. Je veux dire les éléments de la liste. Nous allons donc sélectionner les éléments LI. Tout d'abord, je vais augmenter la taille de la police. Faisons en sorte qu'il fonctionne. Modifiez ensuite l'épaisseur de la police. Utilisons ici 700. Ensuite, je vais créer un espace entre les lettres avec la valeur 0,1 RAM. Changez la couleur, éclaircissez-les en utilisant les couleurs d, d, d. Et enfin créez cet espace en haut et en bas des éléments en utilisant la marge avec les valeurs une RAM et zéro cellule, les éléments de la liste sont personnalisés. Je souhaite modifier légèrement le style des premiers éléments de la liste. Et pour les sélectionner, je vais utiliser l'une des pseudo-classes CSS s' appelle first-child Sélectionnons-la donc d'abord, les éléments LI qui y sont attachés , la première pseudo-classe enfant Je vais donc mettre le texte en majuscules et aussi changer la couleur Utilisez-le ici, blanc. C'est tout pour la liste. Allons-y et personnalisons l'image. Sélectionnez-le. Tout d'abord, définissons la largeur, faisons-en 60 RAM. Ensuite, je vais créer de l'espace sur les côtés gauche et droit de l'image en utilisant une marge dont les valeurs sont de 0,20 RAM Enfin, l'opacité a légèrement diminué , la portant à 0,9 Très bien, voyons voir l'image. Et le dernier élément dont nous aurons besoin pour styliser sera le paragraphe. Nous allons donc le sélectionner. Tout d'abord, rendez sa position absolue et placez-la également au bas de la page utilisant une propriété achetée que nous avons dévaluée au En plus de cela, je vais augmenter la taille de la police, l'adapter à Ram. Modifiez également l'épaisseur de la police. Je vais le régler sur 600. Ensuite, nous avons le centre d'alignement du texte. Changez également la couleur du texte, éclaircissez-le à l'aide de E. Enfin, créez un espace entre les lettres en utilisant l' espacement entre les lettres avec le point de valeur à placer. Très bien, donc cette section 5 est prête et passons à la partie suivante de notre projet. 84. Projet 9 - Créer et styliser la barre de navigation et faire des barres de progression: Ensuite, nous allons créer une navigation. Également la barre de progression et les flèches à gauche et à droite de la page. Tous ces éléments auront une position fixe et seront affichés sur les cinq pages. Allons-y et commençons à créer le balisage HTML. Je vais placer ces éléments au début dans le conteneur. Ouvrons donc les éléments div avec une barre de navigation de classe. Barre de navigation : nous aurons un logo et la liste des éléments de navigation. Insérons donc un élément de lien avec le lien du logo de la classe que je vais insérer ici et l'image. Sélectionnez le point du logo PNG dans le dossier des images. Je vais également attribuer au logo de l'attribut alt. Enfin, ajoutons un attribut de classe avec un logo de valeur. Après cela, je vais ouvrir la balise de navigation avec le nom de la classe au moins maintenant. Dans l'ensemble, nous aurons donc cinq éléments de navigation différents. Ouvrons la balise link avec le lien de navigation de classe. Le premier élément de navigation sera la page d'accueil. Dupliquons ensuite cet élément quatre fois, puis modifions le contenu. Le second sera celui des vignobles. Du raisin plutôt que du vin. Et pour le dernier élément, je veux insérer du contenu. Très bien, nous avons donc ici un logo et les éléments de navigation. Avant de créer le reste des éléments, ajoutons d'abord un style à la navigation. Je vais sélectionner l'élément div avec la barre de navigation des classes Comme nous l'avons dit, ça va être corrigé. Pour le moment, la barre de navigation n'est plus visible car elle s' est retrouvée derrière le filtre Je vais résoudre ce problème en utilisant la propriété z-index Maintenant que c'est faisable, allons-y et ajoutons-y d'autres styles. Je vais augmenter sa largeur à cent pour cent. En fait, je pense qu'il serait préférable de réduire la taille de l'image. Elle est bien plus grande. Maintenant, définissons la hauteur et faisons en sorte qu'elle soit à six rampes. Maintenant, ça a l'air beaucoup mieux et je vais placer la barre de navigation légèrement vers le bas. Je vais le faire en utilisant la meilleure propriété. Configurons-le à un représentant. Et en plus de cela, je vais utiliser Flexbox ici Créons le conteneur flexible de la barre de navigation à l'aide de Display Flex. Je vais également créer un espace entre le logo et la liste en utilisant uniformément l'espace de contenu de justification. Enfin, utilisons l'alignement des éléments au centre afin de les centrer verticalement. Très bien, c'est ça, à peu près assez de bar. Allons-y et personnalisons le romancier. Nous allons sélectionner cet élément. Je vais en faire un conteneur flexible en utilisant Display Flex. Ensuite, nous avons besoin de Justify-Content Center. OK, allons-y et stylisons les éléments de navigation. Je vais sélectionner l'élément de lien, qui contient le lien de navigation ClassName Tout d'abord, réduisons la taille de la police à 1,5 RAM, et changeons également la couleur, rendons-la blanche. Ensuite, augmentons la largeur. Faisons-en 15 RAM. Créez également de l'espace sur les côtés gauche et droit à l'aide de la marge. Je vais le mettre à zéro en haut et en bas. En ce qui concerne les côtés gauche et droit, faisons de la marge. Nous rampons. De plus, je vais mettre le texte en majuscules. Très bien, donc les articles sont beaux. Ensuite, je vais y ajouter les bordures. Utilisons donc une bordure dont les valeurs sont le point 1 g, solide, et vous les appelez blanches. Comme vous le voyez, nous devons placer les objets au centre. Pour cela, je vais utiliser le centre d'alignement du texte. Créez également un petit espace à l'intérieur de la boîte à l'aide d'un rembourrage. Je vais me faire un devoir d' enfoncer le haut et le bas. En ce qui concerne les côtés gauche et droit, mettons-le à zéro. Enfin, créez un espace entre les lettres en utilisant l' espacement des lettres avec la valeur 0,1 rep. Très bien, les éléments de navigation sont donc stylisés Ensuite, je vais créer un effet de survol. Jetons un coup d'œil à la version finale du projet. Donc, une fois que nous survolons les éléments cette petite boîte rouge se déplace de gauche à droite En fait, ce sera le pseudo élément précédent Allons-y et sélectionnons lien de navigation avec les pseudo-éléments précédents. Tout d'abord, je vais vider son contenu, puis rendre sa position absolue. De plus, je vais attribuer à l'élément de lien un positionnement relatif car nous devons positionner élément en fonction de son parent, qui dans ce cas est le lien. Après cela, rendons l'élément visible. Je vais définir la largeur et la hauteur. Réglons la largeur à 150 %. Pour ce qui est de la hauteur, je vais la porter à cinq mètres. Et changez également la couleur d'arrière-plan. Je vais l'utiliser ici. Couleur rouge. Je veux dire, D5 avec quatre zéros Voilà à quoi ressemblait l'élément avant voir l'élément en ce moment, changeons sa position à gauche. Je vais le porter à -20 %. Et nous devons également le faire pivoter et le déplacer légèrement, horizontalement, je veux dire, selon l'axe X. Je vais donc utiliser Transform avec les fonctions de rotation et de translation x. Je vais utiliser ici -40 degrés comme valeur de la fonction de tension Comme probablement la fonction translate x. Je vais déplacer les éléments avec moins 4 M. D'accord ? Les éléments sont donc pivotés, mais ce n'est pas la position idéale En ce moment. Ils sont transformés à partir du centre. J'y suis, l'origine de la transformation est centrée. Et je vais le modifier et le placer en bas à gauche. Nous avons donc dû utiliser l'une de ces propriétés CSS appelée origin de la transformation. Et nous devons l' assigner en bas à gauche. Enfin, diminuons l'opacité. Je vais le faire 0,8. D'accord ? C'est donc à peu près tout avant le pseudo-élément pour le moment. Ensuite, je vais créer l'effet de survol. Je veux le déplacer de gauche à droite. Allons-y et sélectionnons l'élément de lien avec le pointeur de la souris et également avec les pseudo-éléments précédents Définissons la position de gauche et fixons-la à 110 %. De plus, pour créer le modèle d'effets, utilisons la transition avec la valeur de 0,3 s. Ainsi, une fois que nous survolons l'élément, le support avant pseudo-élément se déplace de gauche à droite La dernière chose à faire est de masquer la partie extérieure des éléments. Et en fait, je vais le faire en utilisant overflow hidden. Très bien, maintenant tout fonctionne parfaitement. Et en fait, avec la barre de navigation, c'est terminé. Passons à autre chose et prenons soin des flèches. Tout d'abord, je vais créer le balisage HTML. Ouvrons la balise button avec la page de classe btn. Ce sera la classe commune aux deux boutons. Et je vais aussi utiliser ici une autre classe laissée btn pour certaines personnes qui carrelent Ensuite, je vais insérer votre image. Sélectionnez le point fléché PNG dans le dossier des images. Ensuite, je vais dupliquer le bouton. Changeons le nom de classe dont nous avons besoin ici, non ? Btn. Tirons l'image que je vais utiliser ici, la même image. Nous allons simplement faire pivoter les deux images dans la bonne direction. OK, nous avons donc les flèches. Allons-y et personnalisons-les. Je vais sélectionner les deux boutons avec la page de classe Como, BTN. Fixons la position du bouton. Et aussi, nous devons utiliser ici l' indice Z afin de rendre les flèches réalisables. À l'heure actuelle, les boutons sont placés dans le coin supérieur gauche de la page Je vais les placer au centre de la page. Je veux dire, pour les centrer verticalement. Pour cela, utilisons la première position et la fixons à 50 %. Et je vais également utiliser Transform avec la fonction translate y. Insérons ici -50 %. Cela nous permettra d' envoyer à l'élément parfaitement en fonction de la direction verticale. Très bien, après cela, débarrassons-nous de l' arrière-plan par défaut et de la bordure du bouton Rendons donc la couleur d'arrière-plan transparente. Et aussi pour se débarrasser de la bordure par défaut, nous devons utiliser la bordure aucune. OK, c'est tout pour le bouton. Passons à autre chose et personnalisons les images. Sélectionnons-les. Tout d'abord, définissons la largeur, définissons-la pour la RAM. De plus, je vais diminuer l'opacité, la rendre 0,4. Enfin, faisons en sorte que le pointeur du curseur correct, afin que les images soient personnalisées. Nous devons maintenant les placer sur les côtés gauche et droit. Nous allons donc d'abord sélectionner une flèche vers la gauche. Je vais définir sa position gauche. Faisons-le pour la RAM. Ensuite, je vais sélectionner l'image elle-même. Je veux dire l'image de gauche. Nous devons faire pivoter l' image de 90 degrés. Nous devons donc transformer, faire pivoter. Et passons ici à -90 degrés. Comme vous pouvez le voir, la flèche gauche est placée dans le bon sens. Allons-y et faisons de même pour la flèche droite. En fait, je vais dupliquer ce code ici, puis changer les noms de classe dont nous avons besoin, non ? Nous avons également besoin ici de la position droite au lieu de la position gauche. Enfin, modifiez la valeur de la fonction de rotation. Nous avons besoin de 90 degrés au lieu de -90 degrés. Très bien, avec les flèches, nous avons presque terminé. La seule chose que je vais faire est de créer un petit effet de survol En fait, je veux augmenter l'opacité au survol. Allons-y et sélectionnons Image avec le pointeur de la souris. Puis assigné à son opacité avec la valeur un. De plus, je vais utiliser la transition avec une opacité de 0,2 s. Très bien, donc avec les flèches, nous avons terminé Ensuite, nous devons passer à autre chose et créer une barre de progression. Dans un premier temps, comme d'habitude, créez un balisage HTML Ouvrons le développement avec le wrapper de progression des classes. Ensuite, je vais ouvrir une autre balise div, qui inclura les numéros de page. Attribuons-lui une progression de classe. Et puis à l'intérieur, insérons l'élément de titre H2. Par défaut, je vais utiliser ici une barre oblique cinq. D'accord ? Ensuite, je vais créer les cercles. Ouvrons la balise div, qui sera le wrapper Il est attribué à chaque classe Circle Wrapper. Et ensuite, mangeons. Et ici, un élément div vide avec classe est un cercle et un cercle Dupliquez ensuite cette ligne de code quatre fois et modifiez les classes. Nous avons besoin des numéros 2 à 5. OK, le balisage de la barre de progression est donc prêt, et nous devons maintenant le personnaliser Je vais commencer par l'emballage. Sélectionnons l' enveloppe de progression et, tout d'abord, fixons sa position La barre de progression n'est donc pas visible car, comme les éléments précédents, elle s'est retrouvée derrière le pied de page Corrigeons à nouveau ce problème en utilisant la propriété d'indice Z. Portons-en à 100. OK, maintenant c'est visible. Définissons cette position. Je vais le placer en bas, dans le coin inférieur gauche de la page. Nous avons donc besoin ici de la propriété bottom avec la valeur deux rem. Et j'ai également laissé une propriété avec la valeur trois tours. Très bien, après cela, personnalisons le titre. Sélectionnons-le. Tout d'abord, je vais modifier la taille de la police. Faisons-en 2,5 RAM. De plus, je vais alléger un peu le titre en utilisant une épaisseur de police d'une valeur de 300. Et puis changez la couleur, faites-la blanche. Très bien, donc le titre est stylé. Allons-y et passons aux cercles. Sélectionnons-les à l'aide d'un cercle de classe commun. Tout d'abord, définissons la largeur et la hauteur. Je vais en faire une seule RAM pour les deux. Ensuite, je vais leur attribuer une bordure avec les valeurs 0,1 RAM solide et la couleur blanche. Bon, maintenant les éléments sont visibles, mais ils n'ont pas la forme d'un cercle. Pour en faire des cercles, utilisons un rayon de bordure avec une valeur de 50 %. D'accord ? Nous avons maintenant des cercles. À l'heure actuelle, ils sont placés verticalement dans une colonne. Nous devons les aligner horizontalement. Et pour cela, utilisons Flexbox. Je vais sélectionner Circle Wrapper puis lui attribuer Display Flex Ensuite, nous allons créer un espace entre les cercles. Je vais utiliser la marge. Mettons-le à zéro en haut et en bas. Et puis 0,3 rampe sur les côtés gauche et droit. Ensuite, je vais créer un espace haut et en bas des éléments de titre. Et je veux aussi le placer au centre. Allons-y et sélectionnons It's wrapper div avec la progression de la classe Attribuez-lui ensuite une marge, réglez-la sur un rem en haut et en bas, puis utilisez zéro pour les côtés gauche et droit. Et aussi, je vais utiliser l' alignement du texte avec le centre des valeurs. Très bien, maintenant avec une barre de progression, nous avons terminé. Nous le ferons fonctionner à l'aide de JavaScript ultérieurement. 85. Projet 9 - Créer un effet de défilement horizontal avec JavaScript: OK, donc avec le style, nous avons terminé les cinq pages ou une page personnalisée, et maintenant il est temps d'utiliser JavaScript et de dynamiser notre projet. heure actuelle, le filtre s' affiche sur la page et les autres sections sont placées derrière celui-ci. Je vais placer les pages dans l' ordre à partir de la première page, puis jeter la dernière. Et je vais le faire en utilisant la propriété z-index. Changeons le nom de la classe. Nous avons besoin de la section 1 au lieu de cette section 5. Copiez ensuite ce code et collez-le pour le reste des sections. Pour la deuxième section, je vais définir la propriété z-index 40 Ensuite, pour la troisième section, il en sera ainsi. Ensuite, nous avons la quatrième section. Il nous en faut 20 ici. Enfin, pour la section cinq, faisons en sorte que l' indice soit égal à dix. Tout est donc en ordre et nous pouvons commencer à écrire du JavaScript. Avant cela, je vais vous rappeler ce que nous allons faire et comment fonctionne le projet fini. Ces sections sont donc placées les unes sur les autres dans l'ordre. Nous voyons ici la première section par défaut. Et une fois que nous aurons fait défiler la page vers le bas, nous passerons à la section suivante. Nous allons passer par le filtre. Ensuite, si nous faisons défiler à nouveau la page vers le bas, nous arriverons à la première page. Outre le défilement, nous pouvons également accéder aux différentes sections à l'aide de ces commandes Très bien, donc toutes ces choses seront programmées avec JavaScript Et la première chose que je vais faire est associer un écouteur d'événements à l'objet global de la fenêtre et utiliser l'un des événements appelé la roue Cet événement sera déclenché une fois que nous aurons déplacé la volonté de la souris. Attachons-nous donc à la fenêtre. Auditeur de l'événement. Il doit prendre deux arguments. Le premier sera l'événement. Comme nous l'avons dit, nous devons utiliser une roue. Quant au deuxième argument, ce sera la fonction de rappel Je vais vous transmettre l'objet de votre événement. Ensuite, exécutons-le sur la console. Une fois que nous aurons fait défiler la page, nous obtiendrons l' événement Wheel dans la console. Si je l'ai fait défiler, vous trouverez ici quelques propriétés différentes. En fait, nous nous intéressons à la propriété appelée delta y. heure actuelle, elle est égale à cent. Cela signifie que nous faisons défiler la page vers le bas. Et si je fais défiler le haut et que je vérifie la valeur de la propriété delta y, elle doit être égale à -100 Nous allons donc utiliser cette propriété pour gérer la navigation entre les différentes pages lorsque nous faisons défiler la page vers le haut ou vers le bas. Très bien, donc si la valeur de la propriété delta y est positive, nous devons passer à la page suivante Et si c'est négatif, il faut revenir à la page précédente. Je veux dire, en faisant défiler la page vers la droite ou vers la gauche. Nous devons vérifier si le delta y est supérieur à zéro. Ensuite, je vais créer une nouvelle variable qui sera le compteur. Cela nous aidera à définir quelle section est actuellement affichée. Par défaut, je vais le mettre à zéro. Donc, si cette condition est vraie, nous devons augmenter le compteur d'une unité. Pour cela, je vais utiliser l'opérateur d'incrémentation, qui est exprimé par des signes doubles plus Si la condition est fausse, nous devons diminuer le compteur d'une unité. Nous devons donc utiliser d'autres déclarations. Nous devons passer votre compteur avec le double signe moins. Enfin, lançons le compteur jusqu'à la console. Donc, une fois que nous faisons défiler la page vers le bas, le compteur augmente d'un. Et si je fais défiler la page vers le haut, elle diminuera d'une unité. Très bien, selon cette logique, nous pouvons naviguer vers les différentes sections Et pour cela, nous devons sélectionner des éléments de section. Je vais utiliser la méthode du sélecteur de requête comme valeur du nom de classe Je vais transmettre ici ce qui suit. Utilisons des backticks. Alors je vais passer votre section. Comme vous vous en souvenez, chaque section possède un nom de classe avec le numéro approprié Section 1, section 2, et ainsi de suite. Et comme numéro de cette section, nous devons utiliser un compteur OK, donc une fois cette section sélectionnée, nous devons changer son style. Je veux dire, nous devons déplacer cette section vers la gauche de cent fois la largeur de la fenêtre d'affichage Nous devons donc styliser le point gauche et le régler sur une largeur de fenêtre d'affichage de -100 OK, donc si je fais défiler la page vers le bas, nous allons accéder aux différentes pages. Une fois que nous atteignons le pied de page et que nous faisons défiler à nouveau la page, nous obtenons le fond blanc En fait, c'est le conteneur. Et au prochain défilement, nous recevrons une erreur car nous n'avons pas de section dans le numéro six. En outre, je vois ici la partie de la section quatre, comme vous le savez, la largeur de son fond flou est égale à 110 % Donc, pour masquer cette partie, ici, nous devons utiliser overflow hidden, et nous devons l'affecter à cette section De plus, pour créer ce modèle d'effets de couleur, utilisons la transition avec les valeurs restantes et 1,5 s. Nous avons donc maintenant un effet de défilement beaucoup plus agréable Très bien, pour l'instant, nous pouvons faire défiler la page vers le bas, mais nous ne pouvons pas la faire défiler vers le haut. Pour y parvenir, je vais utiliser une certaine logique. Si la valeur de la propriété delta y est 100, nous devons faire défiler la page vers le bas. Et s'il est égal à -100, nous devons faire défiler la page vers le haut. Donc, au lieu d'une largeur de fenêtre d'affichage de moins de cent, ouvrons les backticks Utilisez ensuite le signe du dollar avec les accolades. Nous devons donc vérifier si le delta y est positif ou négatif. Nous avons besoin de la même condition ici. Je suis dans l'état que nous avons utilisé dans l'instruction if. Et en fait, il serait préférable de stocker cette condition dans la variable puis d'utiliser cette variable. Créons donc un delta y constant auquel on attribuera E point delta y supérieur à zéro. Qui utilisent cette variable dans l'instruction if. Et transmets-le aussi ici. Donc, si c'est vrai, nous devons déplacer cette section vers la gauche de -100 % de largeur de fenêtre Et si c'est faux, alors il nous faut zéro. Donc, si je fais défiler la page vers le bas puis que j'essaie de faire défiler la page vers le haut, cela fonctionnera. Mais avec un petit problème. Comme vous pouvez le constater, nous ne pouvons pas accéder à la page précédente. Lorsque nous faisons défiler la page vers le haut, la page précédente est omise. Cela se produit parce que lorsque nous faisons défiler la page vers le bas, le compteur est augmenté d'une unité. Et une fois que nous faisons défiler la page vers le haut, elle diminue. Nous devons conserver sa dernière valeur. Donc, avec un seul compteur, nous ne pouvons pas y parvenir. Je vais donc créer un autre compteur. Eh bien, allons-y et changeons le nom de ce compteur, faisons-en le compteur 1. Dupliquez ensuite cette ligne de code. Je vais appeler ce compteur de variables à. Et ensuite, mettons-le sur un. Ensuite, utilisons également ce compteur et l'instruction FL. OK, parcourons compteur 1 de la console et trouvons le deuxième. Et au lieu de nous contenter du compteur, nous devons vérifier le même état. Je veux dire, si le delta y est positif ou négatif. Donc, si c'est vrai, nous devrions utiliser le premier compteur. Et si c'est faux, ce qui signifie que nous avons fait défiler la page vers le haut, nous devons utiliser counter to Alors maintenant, si je fais défiler la page vers le bas ou vers le haut, tout fonctionnera correctement jusqu'à ce que nous atteignions le pied de page et que nous défilions à nouveau vers le haut. De plus, nous avons atteint la première page et nous avons fait défiler la page vers le haut. Très bien, nous allons maintenant résoudre ces problèmes avec deux instructions if différentes Une fois que nous avons atteint le filtre et que nous faisons défiler la page vers le bas, nous devons afficher la première page. De plus, toutes les autres sections doivent être alignées les unes sur les autres, comme c'est le cas par défaut. Tout d'abord, allons-y et sélectionnons toutes ces sections. Je vais les stocker dans une variable, appelons-la sections. Pour sélectionner toutes ces sections, je vais utiliser la méthode all du sélecteur de requêtes Passons ici la section des noms de balises. Donc, si le compteur 1 est égal à cinq, cela signifie que le pied de page s'affiche et que nous n'avons plus besoin de faire défiler cette page Nous devons parcourir ces sections et leur position gauche à zéro. De plus, nous devons réinitialiser les deux compteurs. Je veux dire, nous devons régler les deux sur leurs valeurs par défaut. Allons-y et créons l' instruction if comme condition. Nous devons contrer un triple égal à cinq Ensuite, nous devons parcourir ces sections. Comme vous le savez, lorsque nous utilisons la méthode all du sélecteur de requêtes, elle renvoie une liste de nœuds et nous devons la transformer en tableau Pour cela, utilisons la méthode array from. Pour parcourir le tableau de ces sections, je vais utiliser l'une des méthodes d' assistance du tableau appelées pour chacune Ensuite, nous devons passer une fonction de rappel, qui prendra un paramètre et ce sera l' élément actuel du tableau Je suis dans la section actuelle. Comme nous l'avons dit, nous devons placer à gauche la position zéro pour toutes les sections. Nous devons donc utiliser votre style de point de section (point à gauche), et nous devons le mettre à zéro. Nous devons également réinitialiser les deux compteurs. Je veux dire, nous devons mettre le compteur un à zéro et le compteur à un. Enfin, je vais utiliser une instruction return qui nous permettra de mettre fin à l'exécution de tout autre code dans cette fonction. Très bien, donc si je fais défiler la page vers le bas et que j'atteins le pied de page, vous verrez que le compteur 1 est égal à Et lors du prochain défilement, la condition de l' instruction if sera vraie. Nous allons accéder à la première page et toutes les autres pages seront alignées comme c'est le cas par défaut. OK, donc le premier problème est résolu. Ensuite, nous devons nous occuper du deuxième problème. Je veux dire, lorsque la première page s' affiche et que nous faisons défiler la page vers le haut, nous obtenons un message d'erreur indiquant qu'il impossible de lire le style de propriété nul. Bon, nous devons maintenant vérifier le cas où le compteur un est égal à moins un. Dans ce cas, nous devons déplacer toutes ces sections vers la gauche de -100 % de largeur de fenêtre, nous devons afficher la photo Créons donc une autre instruction if. Nous devons donc vérifier si le compteur un est égal à moins un. Si c'est vrai, nous devons parcourir la liste de ces sections. Ensuite, nous devons attribuer à toutes les sections sauf cette section cinq, une position à gauche avec la valeur -100 pour la largeur de la fenêtre d'affichage Donc, dans un premier temps, je vais transformer des sections en un tableau en utilisant la méthode array point from. Passons vos sections. Utilisez ensuite la méthode forEach. Nous devons transmettre votre fonction de rappel avec la section d'arguments, qui sera l'élément actuel, je veux dire la section actuelle Comme nous l'avons dit, nous devons définir la dernière position largeur de fenêtre d'affichage de 100 % pour toutes ces sections à l' exception des cinq secondes Utilisons ici une autre instruction if dans laquelle nous devons vérifier si le nom de première classe de l'élément actuel du tableau est égal à la section cinq, nous avons besoin de la liste des classes de points de section Et nous devons spécifier ici que le numéro d'index zéro fait référence au nom de la première classe. Ensuite, nous avons besoin du triple égal à la section 5. Donc, si cette condition est vraie, nous devons mettre fin à l'exécution de cette fonction en utilisant l'instruction return. Dans tous les autres cas, nous devons définir la position gauche de cette action avec une largeur de fenêtre de 100 % Nous devons donc couper le point de style point à gauche égal à -100 de largeur de fenêtre d' affichage Et en plus de cela, nous devons régler le compteur un à quatre, N à deux à cinq car dans ce cas, le pied de page s'affichera sur la Donc, si nous testons, vous verrez que tout fonctionne bien. 86. Projet 9 - Faire fonctionner la barre de progression avec JavaScript: Très bien, donc une fois que nous aurons réussi à faire défiler les pages suivantes, je vais passer à autre chose et commencer à travailler sur la barre de progression, qui se trouve dans le coin inférieur gauche Et pour l'instant, il ne fait rien. Ainsi, la barre de progression doit indiquer quelle page s' affiche actuellement et le cercle approprié doit également être surligné. Allons-y et créons une fonction. Je vais appeler ça un compteur de progression. Nous devons donc faire deux choses. Nous devons dynamiser ce titre et nous devons également prendre soin de ces cercles. Je vais d'abord travailler sur le titre. Allons-y et sélectionnons ces éléments. Je vais le stocker dans la variable appelée progress. Sélectionnons les éléments à l'aide de la méthode QuerySelector. Indiquez la progression de votre classe suivie du nom du tag H2. Nous devons donc modifier le contenu du titre en le plaçant du côté droit de celui-ci. Je vais utiliser counter to parce qu' il commence par un et passe par cinq. Quant à la deuxième partie, ce sera la longueur de la liste de ces sections. Pour modifier le contenu de l'élément, je vais donc utiliser l'une des propriétés appelées contenu du texte. Nous avons besoin ici de progrès. Ajoutez des points au contenu du texte avant de l'ouvrir ici. barres arrières, suivies du signe du dollar et des accolades colorées Comme nous l'avons dit, nous allons utiliser un compteur puis une barre oblique. Et passons ici à la longueur des points des sections. Nous devons donc appeler cette fonction à l'intérieur d'ici. Au lieu de cela, compteur de progression. Et nous devons également l'appeler dans les instructions if. Comme vous pouvez le constater, la première partie de notre barre de progression fonctionne parfaitement. Très bien, voyons le titre. Passons aux cercles. Tout d'abord, je vais les sélectionner. Créons des cercles variables , puis sélectionnons tous les cercles à l' aide de la méthode QuerySelector Je vais passer ici le cercle ClassName. Nous allons donc parcourir ces cercles et leur attribuer une couleur de fond transparente. Ensuite, une fois que nous faisons défiler la page, le cercle approprié aura un arrière-plan différent. Dans ce cas, nous utiliserons, encore une fois, comptez jusqu'à deux. Tout d'abord, il transforme les cercles en tableau à l'aide de la méthode array from. Passons ici des cercles puis utilisons-les pour chaque assistant de tableau. Nous avons deux chemins ici, fonction de rappel avec l'élément actuel du tableau, je veux dire un cercle Ensuite, en tant que bloc de code, nous devons changer la couleur d'arrière-plan et la rendre transparente. Nous avons donc besoin d'un point circulaire, d'un style, point, d'une couleur de fond transparente. D'accord, nous devons ensuite changer la couleur de fond du cercle approprié. Allons-y et sélectionnons le cercle. Nous avons besoin d'une requête par points du document, d'un sélecteur. Ensuite, ouvrez ici les backticks. Parce que nous devons définir le numéro du cercle. Il nous faut le symbole du dollar, des bretelles frisées. Et encore une fois, contrairement à. Après cela, allons-y et changeons la couleur d'arrière-plan. Nous avons besoin de la couleur de fond des points de style. Faisons en sorte qu'il soit gris clair à l'aide du D. Très bien, donc si je fais défiler la page, la couleur d'arrière-plan sera modifiée pour les cercles Mais en fait, nous avons ici un petit problème. Si je recharge la page, le premier cercle n' aura aucun arrière-plan Nous devons donc le définir manuellement. Passons au fichier style.css, sélectionnons le premier cercle et définissons sa couleur d'arrière-plan. En plus de cela, je vais utiliser la transition avec couleur de fond et avec une la couleur de fond et avec une durée de 0,3 s. Très bien, donc maintenant tout fonctionne correctement Et avec la barre de progression, c'est terminé. Ensuite, je vais passer à autre chose et m' occuper des commandes. Tout d'abord, sélectionnons les deux boutons et associons-y , des écouteurs d' événements avec un événement en un clic Je vais commencer par le bouton gauche. Utilisons à nouveau la méthode QuerySelector avec un nom de classe laissé btn et attaché à celui-ci Ajouter un événement, un écouteur avec événement clic Je vais dupliquer ce code et le modifier de gauche à droite. Très bien, donc une fois que nous avons cliqué sur le bouton gauche, nous devons réduire les deux compteurs d' Et dans le cas du bouton droit, nous devons les augmenter d'un. Nous devons donc ici compter un, moins, moins, puis un compteur à avec à nouveau des signes doubles moins. Dans le cas du bouton droit, nous avons besoin des deux compteurs avec le signe plus Pour accéder aux différentes pages, nous devons modifier la position principale pour ces actions. Ainsi, dans le cas du bouton gauche, nous allons définir les numéros de section en utilisant le compteur à. En ce qui concerne le bouton droit, nous aurons besoin du compteur 1. Écrivons donc un sélecteur de requêtes par points du document. Ouvrez ensuite les coches et section non sécurisée en tant que numéro de cette section Utilisons le compteur à. Ensuite, nous devons définir position gauche et la mettre à zéro. Récupérons ce code, collez-le ici, et changeons le compteur en compteur un. Et définissez également la position gauche avec une largeur de fenêtre d'affichage de 100 %. Très bien, donc si je clique sur les flèches, nous naviguerons vers différentes sections Et une fois que nous aurons atteint le pied de page et que nous aurons cliqué à nouveau, nous serons confrontés aux mêmes problèmes que ceux que nous avons rencontrés en cas d'accident de roue La même chose se produira si nous cliquons sur la flèche gauche lorsque la première page s'affiche. Pour résoudre ces problèmes, nous devons donc utiliser à nouveau les instructions IF. Et pour éviter de les utiliser deux fois, je vais créer une fonction que nous appellerons plusieurs fois. Créons donc une fonction dans un contrôleur de page. Ensuite, je vais récupérer les deux instructions if à partir d' ici et les coller dans la fonction du contrôleur de page. Nous devons également appeler la fonction de compteur de progression. Nous pouvons maintenant appeler cette fonction dans un testament events. Et nous pouvons nous débarrasser des deux déclarations IF. Comme vous pouvez le constater, tout fonctionne toujours bien. En fait, si nous faisons défiler la page vers le bas, je veux dire, si nous utilisons la molette et que nous atteignons le pied de page, alors au prochain défilement, alors au prochain défilement, nous obtiendrons une erreur disant que le style de propriété «  Impossible de lire le style de propriété nul Cela se produit parce que lors du dernier appel, si l'instruction a été exécutée dans la fonction du contrôleur de page, le compteur a été mis à zéro. Nous n'avons pas de section avec ce numéro et nous avons donc reçu une erreur. Donc, lorsque cela se produit, je veux dire, lorsqu'une des instructions if est exécutée, nous ne voulons pas exécuter ce code. Très bien, donc pour résoudre ce problème, nous devons renvoyer une valeur booléenne à partir de la fonction du contrôleur de page Pour cela, créons une nouvelle variable en dehors de la fonction. Je vais l'appeler Bu. Et c'est ce qui lui est assigné par. Ensuite, nous devons définir cette variable sur true dans la fonction. Dans ce cas, à chaque exécution de la fonction, la booléenne prend la valeur true Mais si l' instruction if est exécutée, nous devons définir Boolean sur false Nous devons le faire dans les deux déclarations. Enfin, nous devons renvoyer le booléen lui-même. Donc, comme nous l'avons déjà dit, nous devons exécuter ce code, le booléen est vrai Nous avons donc besoin ici du pool suivi du logique et de l'opérateur. Alors maintenant, si nous faisons défiler la page, vous verrez que tout fonctionne correctement et que nous n' avons plus d'erreurs. Très bien, revenons aux commandes. Nous devons appeler la fonction du contrôleur de page à chaque clic. Mais nous avons besoin ici d'une déclaration conditionnelle. Si la fonction du contrôleur de page renvoie la valeur true, nous devons exécuter ce code ici. Et si elle renvoie false, alors seule cette fonction sera exécutée, qui est tout à fait suffisant. Nous avons donc besoin ici du contrôleur de page, suivi du logique et de l'opérateur OK, vérifions si tout fonctionne correctement. Nous pouvons donc constater que les commandes fonctionnent parfaitement. Très bien, donc avec les commandes, un x a été fait. Je vais m' occuper de la troisième section Si vous regardez le projet fini, vous constaterez que nous avons ici un bel effet de survol Nous allons créer cet effet à l'aide de CSS et de JavaScript. Passons donc au fichier style.css et attribuons à la section trois la couleur de fond noire. Ensuite, je vais sélectionner l'image de la tombe avec le pointeur de la souris. Et je vais faire en sorte que son opacité soit la même. Nous devons également augmenter la taille de l'image à l'aide de Transform Scale. Et insérons ici aussi. En plus de cela, nous devons effectuer la transition avec une valeur est tout et 1,5 s. OK, voyons comment cela fonctionne. Donc, si je passe la souris sur l'image, elle s'agrandira et son opacité augmentera OK, maintenant nous devons nous occuper de l'arrière-plan et nous devons le faire en utilisant JavaScript. Je vais utiliser les événements de passage de la souris et de sortie de la souris. Allons-y et sélectionnons l'image du raisin. Utilisez à nouveau la méthode de sélection de requêtes. Passe-toi les tombes IMG. Attachez-le ensuite à un écouteur d' événements. Donc, une fois que nous passons la souris sur l'image, nous devons diminuer l' opacité du wrapper de section Et lorsque nous retirons la souris, nous devons le ramener à un. Passons donc votre souris sur événement pour lequel nous avons besoin de la fonction flèche. Et en tant que bloc de code, je vais sélectionner le wrapper de la section 3 en utilisant la méthode QuerySelector Ensuite, nous devons faire en sorte que l'opacité soit de 0,5. Nous devons donc définir un style d' opacité égal à 0,5. Dupliquons ce code et modifions les événements dont nous avons besoin ici, à des kilomètres. Et nous devons également modifier l'opacité. Faisons en un. Enfin, je vais utiliser transition pour ce wrapper de la section 3, qui valorise l'opacité et 1,5 s. Très bien, comme vous pouvez le voir, tout Nous avons ici un bel effet de survol. En fait, cette section s' assombrit car nous avons attribué aux éléments de cette section une couleur de fond noire 87. Projet 9 - Rendre le projet réactif: Très bien, donc la majeure partie de notre projet est terminée. Ensuite, je souhaite adapter notre projet à différentes tailles d'écran. En fait, ce ne sera pas la dernière partie de ce tutoriel car nous allons ajouter quelques éléments supplémentaires au projet. Allons-y et passons au mode réactif. Le projet est conçu pour une taille d'écran plus grande. Je suis dans l'écran avec 1920 pixels de largeur et 1080 pixels de hauteur. Le premier point d'arrêt sur lequel je souhaite apporter des modifications sera donc je souhaite apporter des modifications de 1 600 pixels J'ai déjà vérifié ces points d'arrêt, donc je ne perdrai pas de temps là-dessus dans la vidéo Au point de rupture, je souhaite personnaliser en sections. Ce devrait être le pied de page et la deuxième section. Allons-y et créons une requête multimédia CSS. Spécifiez ensuite une largeur maximale de 1 600 pixels. Alors d'abord, je vais personnaliser la deuxième section. Sélectionnons l'image renvoyée et changeons sa largeur, faites-en une rampe de 35 Sélectionnez ensuite la deuxième image, qui porte le nom de la classe (bouteille de vin et définissez sa largeur comme 65 marques. Cette syllabe. La deuxième section, Passons au pied de page Je vais réduire la largeur de l'image ainsi que la taille de la marge sur les côtés gauche et droit. Nous allons donc sélectionner Footer IMG défini avec 245 RAM. En ce qui concerne la marge, faisons en sorte qu'elle soit de 0,12 RAM sur les côtés gauche et droit Très bien, le pied de page semble bon et nous en avons terminé avec le point d'arrêt Le prochain sera de 1 300 pixels. À ce point d'arrêt, nous nous occuperons nouveau de ces deux sections. Je vais donc dupliquer ce code et simplement modifier les valeurs. Faisons de la largeur maximale de 1 300 pixels la largeur de l'image de retour de la voile Insérez ici dans la RAM. Ensuite, faites la largeur de la bouteille de vin Image 60 RAM. En ce qui concerne l'image de pied de page, faisons en sorte que sa largeur soit 35 RAM Quant à la marge, faisons-la dix sur les côtés gauche et droit. Bon, ça y est, environ 1 300 pixels. Les deux sections ont l'air bien. Passons au point de rupture suivant. Nous allons juste atteindre 1 200 pixels. Allons-y et créons une nouvelle requête multimédia avec eux, largeur maximale, 1 200 pixels La première chose que je veux faire est donc de réduire l'espace entre les éléments de navigation. Allons-y, sélectionnons le lien de navigation et définissons la marge sur 0,1, 0,5 Go de RAM sur les côtés gauche et droit. Occupons-nous ensuite du titre de la première section. Donc, tout d'abord, je vais sélectionner ce wrapper dont le nom de classe est Section 1, intitulé rubber C'est Make with 80 %. Ensuite, sélectionnez le titre lui-même. Changez sa taille de police, faites-en un terrane OK, donc c'est tout pour la première section. Passons à la seconde. Je vais réduire la taille de ces trois éléments. Je veux dire les images et le bas. Commençons donc par le retour en bateau. Faisons sa largeur. 25 RAM que je vais sélectionner Sale BTN. Je vais modifier sa largeur. Faisons 15 runs. Modifiez ensuite la hauteur, réglez-la sur forum. Et je vais aussi changer la taille de la police. Faisons-en une rampe de 1,7. Enfin, je vais sélectionner une bouteille de vin. Faisons sa largeur. 50 roubles. Ok, c'est ça. À propos de la deuxième section. Ça a l'air sympa. Et la seule page que nous allons personnaliser sur le point d'arrêt sera le pied de Allons-y et sélectionnons Image de pied de page. Changez sa largeur, faites-en 25 RAM Quant à la marge, je vais la faire tourner à 0,7. Très bien, donc avec 1 200 pixels, c'est terminé. Ces sections ont une apparence et fonctionnent correctement. Nous devons donc passer au point d'arrêt suivant, qui sera de mille pixels Nous allons donc créer un nouveau média et spécifier une largeur maximale en milliers de pixels En ce qui concerne le point d'arrêt, nous devons faire deux choses. Je vais d'abord personnaliser toutes ces sections sauf la première. Ensuite, nous nous occuperons de la navigation. Je vais transformer la Navbar en menu Hamburger Commençons également par cette section. Je vais sélectionner Section Two Rubber. l'heure actuelle, les images sont placées horizontalement dans une rangée et je souhaite changer la direction d'une ligne à l'autre. Nous devons donc faire preuve de flexibilité. Et nous devons le configurer pour les appeler. Je vais également modifier l'ordre de la vente qui lui est attribuée. Un. C'est ça. À propos de la deuxième section. Passons à la suivante. Comme vous pouvez le constater, nous devons réduire la taille des éléments car ils sont deux plus grands. Je vais commencer par le titre de la section 3. Changeons sa taille de police, faisons-la tourner à 12. Je vais également sélectionner l'image du cadre. Changeons sa largeur et faisons-en sept pour qu'il s'exécute. En ce qui concerne l'image des raisins. Je vais régler sa largeur à 25 mètres. Très bien, avec cette troisième section, nous avons terminé. Passons à la section suivante. Je vais réduire la taille du titre ainsi que la taille de l'image. Nous allons donc sélectionner le titre de la section 4 et arrondir sa taille de police à huit. Quant à l'image du nouveau vin, faisons en sorte que sa largeur soit de 60 Ran. Bien, passons au pied de page. À l'heure actuelle, les éléments sont placés horizontalement dans une rangée. Et je veux changer de direction et les placer dans une colonne. Et je veux aussi changer l'ordre des éléments. Je veux placer l'image en dessous de ces listes. Allons-y et sélectionnons l' enveloppe Section 5 et la colonne Make It's flex direction Sélectionnez également Footer IMG. Réglons sa largeur à 20 RAM. Et modifiez également l'ordre. Je vais le mettre à une extrémité. Enfin, je vais au moins sélectionner le pied de page. Définissons sa largeur comme 20 RAM. Et je vais également utiliser la marge. Réglons-le sur deux REM en haut et en bas, puis sur R0 sur les côtés gauche et droit Très bien, le pied de page est donc personnalisable et il est temps de créer un menu Hamburger Tout d'abord, jetons un coup d' œil aux projets terminés. Je vais inspecter la page et passer en mode réactif. Ainsi, après des milliers de pixels, les éléments de navigation ne sont plus visibles. Et nous avons ici une icône de menu. Si je clique dessus, ces lignes seront transformées en X et décideront où nous serons affichés à partir du côté droit dans les éléments de navigation. Voyons donc ce que nous allons faire. Tout d'abord, allons dans le fichier index.html et créons le balisage HTML Ainsi, l'icône du menu sera représentée comme le lien dans lequel nous aurons trois départements sous forme de lignes de l'icône. Ouvrons donc un élément avec la classe Menu. Ensuite, je vais insérer le développement à l'intérieur du lien. Il doit comporter deux classes différentes. La première sera la ligne de menu pour le style courant. Quant à la seconde, ce sera la première ligne de menu. Il sera utilisé pour le coiffage individuel. Dans l'ensemble, nous aurons donc trois lignes différentes. Dupliquons cette ligne de code deux fois et changeons les noms des classes. Nous avons besoin ici de la ligne de menu deux et de la ligne de menu trois. D'accord, nous devons d'abord masquer l'icône par défaut car nous ne voulons pas l'afficher tant que taille de l'écran ne sera pas inférieure à mille pixels. Sélectionnons donc Menu et assignons à n'en afficher aucun. Très bien, avant de commencer à styliser l'icône du menu, occupons-nous de la navigation elle-même. Je vais créer la barre latérale. Allons-y, sélectionnons liste de navigation et rendons sa position absolue Définissez également les propriétés du haut et de la droite. Je vais passer à la fibrine. Pour ce qui est de la droite, elle sera nulle. Changez également de direction. Je vais placer les éléments dans une colonne. Nous devons donc fléchir la colonne de direction. Donc, comme je le vois, les éléments de navigation sont placés sur le côté droit dans une colonne. Ensuite, je vais définir la hauteur de la liste. Je vais utiliser ici quelques calculs. Comme vous le savez, nous avons fixé la première position à cinq points de RAM et je veux que la hauteur de la liste soit égale à cent fois la hauteur de la fenêtre d'affichage moins cinq points. Pour effectuer ce calcul, utilisons la fonction de calcul Nous avons besoin ici de cent hauteurs de fenêtre moins cinq R&. Modifiez également la couleur d'arrière-plan. Je vais le rendre gris foncé en utilisant 333. OK, c'est donc à cela que ressemble la barre latérale en ce moment. Les éléments de navigation se sont retrouvés au centre, et je vais les déplacer vers le haut pour cela Utilisons le contenu de justification. Démarrez. Et en plus de cela, je vais créer de l' espace dans la liste en utilisant la valeur de remplissage pour l'exécuter Très bien, cela permet de créer un espace entre les objets. Et je vais aussi arrondir légèrement le coin supérieur gauche de la barre latérale Utilisons donc border-radius avec des valeurs de 0,5 g, suivies de trois zéros Sélectionnez ensuite le lien de navigation et définissez la marge sur un run. La liste de navigation est Personnaliser et il est maintenant temps de vous occuper de l'icône du menu. Mais avant cela, je souhaite placer le logo dans le coin supérieur gauche de la page Pour cela, sélectionnons la barre de navigation et attribuons-la à la justification du contenu Démarrez. Et créez également l' espace en utilisant un rembourrage laissé avec de la valeur pour ramper. Très bien, c'est tout pour le logo. Passons à autre chose et commençons à travailler sur l'icône du menu. Alors sélectionnons-le. Tout d'abord, je vais le configurer pour qu'il affiche le bloc, car comme vous le savez, pour le moment, dans ce masqué, utilisez display none. Ensuite, je vais définir sa largeur et sa hauteur. Commençons par deux pour la RAM. En ce qui concerne la hauteur, faisons-en une rampe de 2,5. Et enfin, faites en sorte que la couleur d'arrière-plan soit blanche. J'utilise cette couleur pour rendre l'icône du menu visible. Comme vous le voyez, l'icône du menu s'est retrouvée dans le coin supérieur gauche de la page Nous devons donc définir sa position. Faisons en sorte que ce soit absolu. Ensuite, utilisez les positions supérieure et droite. Je vais placer la première position sur une RAM. Pour ce qui est de la bonne position, faisons-en une rampe. OK, alors maintenant l'icône est placée de la bonne façon. Ensuite, nous devons afficher les lignes. Allons-y et sélectionnons la ligne de menu. Il s'agit du nom de classe commun aux trois lignes. Mettons-nous à 200 %. Alors. Je vais définir la hauteur comme rampe de 0,3 et également définir la couleur d'arrière-plan. Je vais le rendre rouge en utilisant D5 et quatre zéros. Comme vous pouvez le voir, les lignes sont visibles, mais elles sont placées les unes sur les autres. Nous avons besoin d'un peu d'espace entre eux. Alors allons-y et utilisons flexbox. Je vais définir la propriété d'affichage sur flex. Ensuite, nous devons changer de direction. Faisons-en une colonne. Et afin de créer de l'espace entre les lignes, utilisons la méthode de justification du contenu avec un espace entre les valeurs. Et débarrassez-vous également du fond blanc. Nous avons donc ici l'icône du menu. Tout est personnalisé et prêt à faire fonctionner cette barre latérale et le menu Hamburger. Ainsi, une fois que nous avons cliqué sur ces lignes, la première et la troisième ligne doivent être transformées en X. Quant à la deuxième ligne, elle doit descendre en dessous du X. Tout d'abord, sélectionnons des lignes et personnalisons-les. Et après cela, nous ferons fonctionner l'icône du menu en utilisant JavaScript. Je vais sélectionner la première ligne en utilisant la première ligne du menu ClassName Nous devons donc faire pivoter la ligne et la déplacer légèrement. Je vais donc utiliser la fonction Transform with Rotate. C'est passé ici à 40 degrés. Et je vais également utiliser la fonction Translate, qui nous permettra de déplacer les éléments selon les axes X et Y. Je vais donc passer ici 0,5 RAM, puis une rampe. Juste après cela, je vais sélectionner la deuxième ligne de menu Dans le cas de la deuxième ligne, nous n'avons pas besoin de faire pivoter la fonction, nous devons simplement utiliser la fonction de traduction. Utilisez donc transform translate avec les valeurs moins le point vers la RAM. Ensuite, à R& S pour la troisième ligne, copions ce code à partir d'ici et collez-le vers le bas. Je vais changer le nom de la classe. Nous avons besoin d'un menu à trois au lieu d'un. Nous devons également faire pivoter la troisième ligne de -40 degrés. Lors de la fonction de traduction, nous avons besoin de Q moins une RAM au lieu d'une rampe. Très bien, nous avons ici X par défaut, mais nous n'en avons pas besoin Nous avons dû transformer l'icône en X une fois que nous avons cliqué dessus. Je vais donc définir une nouvelle classe en CSS qui sera ajoutée à la Navbar avec une méthode de bascule Dans cette nouvelle classe, nous allons définir nouveaux styles qui seront appliqués aux éléments. Une fois que nous avons cliqué sur l'icône , ils seront supprimés une fois que nous cliquons à nouveau sur l'icône. Passons donc au fichier script.js. Et tout d'abord, il manquait encore l'icône du menu. Je vais créer une variable, appelons-la Menu. Sélectionnez ensuite l'élément à l' aide de la méthode QuerySelector. Nous devons transmettre le nom de votre classe Menu. Après ça. Attachons-y un écouteur d'événements Nous devons utiliser la méthode add event listener, qui doit prendre deux arguments Le premier sera l'événement de clic. En ce qui concerne le second, arrêtons ici la fonction flèche. Ensuite, à l'intérieur des bretelles bouclées, nous devons sélectionner Navbar Utilisons à nouveau la méthode de sélection de requêtes. Comme nous l'avons dit, nous devons ajouter une nouvelle classe à la barre de navigation. Pour cela, je vais utiliser l'une des propriétés appelée class list, qui inclut toutes les classes des éléments, dans ce cas Navbar Ensuite, nous devons changer de méthode. Enfin, nous devons vous transmettre ClassName, qui doit être modifié OK, c'est tout à propos de JavaScript. Nous devons maintenant ajouter un changement de classe aux lignes. Utilisons le curseur multiple et insérons ici. Pour les trois lignes, changement de classe. Ensuite, je vais masquer la barre latérale par défaut, dès maintenant. Sa position droite est réglée sur zéro et nous avons besoin de -21 points. Enfin, nous devons l'afficher une fois que vous avez cliqué sur l'icône. Nous devons donc à nouveau changer. Suivi par un romancier. Nous devons placer la bonne position à zéro. D'accord ? Donc, si je clique sur l'icône, elle sera transformée en X. Et je déciderai également où nous serons affichés à partir du côté droit. La seule chose que nous devons faire est de rendre ces effets plus fluides à l'aide de transitions. Nous avons notamment besoin d' une transition avec les bonnes valeurs. Et 0,5 s. En ce qui concerne la ligne Menu, nous avons besoin d'une transition avec transformation durée de 0,5 s. Donc tout fonctionne correctement. Et avec la navigation, c'est terminé. Nous devons passer au point d'arrêt suivant, qui sera de 800 pics Créons donc un nouveau média avec une largeur maximale de 800 pixels. Tout d'abord, je vais modifier la position des commandes. Placez-les près des bords de la page. Sélectionnons le bouton manquant et définissons sa position gauche pour qu'il s'exécute. Ensuite, je vais sélectionner le bon BTN et le placer dans la bonne position pour l'exécuter également Ensuite, je vais réduire la taille du titre de la première page. Allons-y et sélectionnons-le en utilisant le titre de la classe Section 1. Faisons en sorte que sa taille de police soit arrondie à six. OK, c'est tout pour la première section. Passons à la deuxième section. Je vais réduire la taille de ces images. manquait donc encore une voile et une largeur de 20 RAM. Je vais aussi sélectionner une bouteille de vin. Définissons sa largeur pour qu'elle puisse courir. Très bien, donc la section 2 semble bonne. Passons à la suivante. Je vais modifier la taille du titre et son opacité Et je vais également réduire la taille de l'image du cadre. Allons-y donc et commençons par le titre. Sélectionnons-le. Changez sa taille de police, faites-en 11 RAM. Ensuite, réglez l'opacité 2,7. Ensuite, sélectionnons l' image du cadre et arrondissons sa largeur à 60. Très bien. Ensuite, nous avons la section quatre dans laquelle nous devons réduire la taille de l'image. Allons-y donc, sélectionnons une nouvelle image de vin et faisons en sorte que sa largeur soit de 45 % la section 4 et que les photos soient également belles. Et la seule chose que je vais faire sur le point d'arrêt est de changer la position de la barre de progression Je veux le placer en haut de la page. Allons-y et sélectionnons Progress wrapper. Réglez ensuite sa position supérieure sur zéro. De plus, nous avons besoin de 50 % de gauche. Et pour centrer parfaitement les éléments, utilisons Transform, Translate X et insérons -50 %. Bon, ça y est avec 800 pixels, c'est terminé, et il est temps de passer au point d'arrêt suivant, qui sera de 600 pixels Nous allons donc sélectionner Nouveau média et définir la largeur maximale à 600 pixels Commençons par la première page. Je vais réduire la taille du titre. Allons-y, sélectionnons le titre et arrondissons la taille de police à quatre. Passons ensuite à la deuxième section et réduisons à nouveau ces images et ces boutons. Commençons par Sail Back. Réglez sa largeur sur 15. Courez. Ensuite, je vais sélectionner une bouteille de vin. Faisons sa largeur. Donc pour courir et largement. Prenez soin du bouton, sélectionnons-le. Faites en sorte que sa largeur soit de 12 RAM plutôt que de définir sa hauteur comme trois RAM. Et modifiez également la taille de la police. Marquez un point pour Ran. Vient ensuite la section 3. Je vais réduire la taille du titre ainsi que celle de l'image du cadre. Sélectionnons le titre et réduisons sa taille de police à dix RAM. En ce qui concerne l'image du cadre, je vais lui faire une rampe de 35 mm de largeur. OK, donc cette section 3 semble bonne. Ensuite, nous avons une section quatre. Je vais réduire la taille du titre et je veux aussi réduire l'image. Allons-y et sélectionnons le titre de la section 4. Arrondissez sa taille de police à six. En ce qui concerne la nouvelle image, je vais régler sa largeur à 35 g. Très bien, donc je pense que c'est tout pour ce point d'arrêt Nous devons maintenant définir les derniers points d'arrêt, qui seront de 500 pixels Créons donc un nouveau média avec une largeur maximale de 500 pixels. Donc, tout d'abord, je souhaite réduire la taille de police des éléments HTML. heure actuelle, N est égal à 62,5 %, et je veux le réduire à 45 % Faisons donc en sorte que la taille de police du code HTML soit 45 %. Modifiez ensuite légèrement la position des commandes. Il manquait donc le bouton gauche. Positionnez-le à gauche. 0,5 RAM. En ce qui concerne le bouton droit, je vais régler sa bonne position, 2,5 également. OK, après cela, je vais légèrement modifier la position de la barre latérale. Sélectionnons notamment et placons-la en première position. 6,5 g. Très bien. Ensuite, nous allons nous occuper de cette section 3 Je vais commencer par le titre de la section 3. Définissons sa taille de police. Huit RAM Tout comme l'image des raisins, font en sorte que sa largeur soit de 15 points. Et en plus de cela, je vais modifier la largeur de l'image en survolant. Sélectionnons l'image du raisin avec plus et réglons avec 225 rampes. Très bien, nous avons finalement rendu notre projet réactif à différentes tailles d'écran. Je trouve que ça a l'air sympa. Nous pouvons donc dire que nous en avons presque terminé avec les projets. Mais avant de terminer ce tutoriel, je voudrais ajouter un autre bel effet au projet. OK, allons-y et jetons un coup d'œil aux projets terminés. Donc, si je fais défiler la page l'échelle de ces sections sera modifiée en douceur. Par défaut, la taille de ces sections est plus grande et une fois que nous faisons défiler ou cliquons sur les commandes, l'échelle diminue globalement, ce qui crée un effet agréable et cool. Le seul problème que nous avons avec cet effet est que les navigateurs ont un peu de mal à réaliser cet effet. Vous pouvez donc parfois dire que cela ne fonctionne pas parfaitement. Quoi qu'il en soit, je vais créer cet effet et vous pouvez l' ajouter au projet ou non. C'est à vous de décider. D'accord ? La première chose que je dois faire est donc d' augmenter l'échelle des rappeurs de cette section par défaut Attribuons-leur donc, transformons-les avec cette fonction d' échelle et rendons l'échelle 1,5. Je vais également utiliser la transition avec les valeurs all et 2 s. Rappelez-vous que nous attribuons la transition au wrapper de cette section 3 Et je vais m'en débarrasser car cela écrasera la transition que nous venons d'attribuer à ce wrapper de section Comme vous pouvez le constater, la taille de toutes les pages a augmenté. En fait, lorsque nous chargeons le projet, nous devons le redimensionner pour qu'il en soit un par défaut pour la première page. Et je vais le faire à partir de JavaScript. Sélectionnons le rappeur de Section 1. Je vais créer une nouvelle variable. Appelons-le le wrapper Section 1 , puis sélectionnons éléments à l'aide de la méthode QuerySelector Faisons une pause ici, classe 1 : rappeur. Ensuite, faisons en sorte que ce soit à l'échelle 1. Nous avons donc besoin d'une transformation par points de style égale à la fonction d'échelle avec la valeur un. D'accord ? Nous devons donc modifier l'échelle des pages, faire défiler et une fois que nous avons cliqué sur les commandes. Mais avant tout, occupons-nous de l'épreuve des roues. Nous avons ici de petites déclarations conditionnelles nous permettent de vérifier si le taureau est vrai ou faux. Donc, si c'est vrai, nous devons diminuer l' échelle de la section appropriée. Nous devons donc transformer cette instruction conditionnelle en instruction if. Passons un an, Bu en était la condition. Je vais d'abord écrire le code , puis je vais expliquer comment il fonctionne. Nous devons donc sélectionner ce wrapper de section. Utilisons QuerySelector plutôt que d'ouvrir ici des backticks et de transmettre votre nom de classe Section dash Nous devons maintenant définir le numéro de cette enveloppe de section. Et pour ce faire, nous devons utiliser à nouveau le conditionnel pour vérifier si Delta Y est vrai ou faux. Si c'est vrai, alors nous avons besoin d'une contre-attaque. Et si c'est faux, alors nous avons besoin du compteur deux suivi du wrapper OK, donc une fois que le bon habillage de section est sélectionné, nous devons diminuer l' échelle ou la laisser telle quelle Nous avons donc besoin ici de Style dot transform that again, d' ouvrir des backticks Utilisez la fonction d'échelle. Et comme valeur, je vais à nouveau passer ici les déclarations conditionnelles où l'on vérifie si Delta Y est vrai ou faux. Si c'est vrai, alors comme valeur de la fonction d'échelle, nous devons passer 1,5. Et si le Delta Y est faux, il nous en faut un. Ainsi, lorsque nous faisons défiler la page vers le bas, le numéro de cette section wrapper deviendra le contre-un Supposons que nous parlions de la première page. Nous allons donc sélectionner la première page et son échelle deviendra 1,5. Parce que encore une fois, Delta Y est vrai. Si nous faisons défiler la page vers le haut, le delta Y sera faux. Le nombre de ces enveloppes de section deviendra un compteur, mais en revanche, diminuera d'une unité Et nous allons sélectionner à nouveau la première page. Et dans ce cas, il est évolutif avec diminution car Delta Y est faux du sens ? Très bien, donc l'effet d' échelle fonctionne partiellement Je veux dire, les pages à venir n' augmentent pas. Et pour résoudre ce problème, je vais dupliquer ce code. cause de cela, nous devons manipuler la page suivante. Nous devons augmenter les deux compteurs d'un. Ajoutons donc ici plus un. Et en plus de cela, nous devons changer la place de ces valeurs. OK, alors maintenant, si nous faisons défiler la page vers le bas, les pages à venir changeront également les échelles. Et il en sera de même si nous faisons défiler la page vers le haut. Tout fonctionne donc bien jusqu'à ce que nous atteignions le pied de page, puis que nous fassions défiler à nouveau. Ainsi, comme vous le voyez, la première page s' affiche à plus grande échelle. Cela se produit parce que le booléen est faux et si les instructions fonctionnent dans la fonction du contrôleur de page Nous devons également définir les échelles dans les instructions if. heure actuelle, nous devons travailler sur les enveloppes des sections 1 et 5 Nous avons tous ces wrapper sélectionnés pour la section 1. Faisons de même pour cette section 5 également. Je vais dupliquer cette ligne de code et en changer une en cinq. Donc, si la condition de la première instruction if est vraie, je veux dire que si nous naviguons du pied de page à la première page, nous devons réduire l'échelle du wrapper de la première section Et en même temps, nous devons augmenter l'échelle du pied de page Nous avons donc besoin de la section 1, d'une transformation de points de style rappeur, échelle avec la valeur un. Dupliquons cette ligne de code. Changez l'enveloppe de la section 1 en l'enveloppe de la section 5. Et comme valeur de la fonction d' échelle, nous avons besoin de 1,5. D'accord, nous avons besoin de la même chose dans la seconde instruction if, mais avec des valeurs d'échelle opposées Récupérons ce code, collez-le ici et modifions les valeurs. Nous avons besoin de 1,5 et moins d'un. Maintenant, si nous faisons défiler la page vers le haut et vers le bas, tout fonctionnera correctement. D'accord ? Donc, je veux dire, avec le défilement, c'est terminé Enfin, nous devons nous occuper des contrôles. Nous avons besoin des mêmes effets de transition une fois que nous cliquons sur les flèches blanches latines. Donc, si le booléen est vrai, nous devons définir échelles pour les enveloppes de cette section S'il est faux, la fonction du contrôleur de page le gérera automatiquement. Nous avons besoin de déclarations vérifier si le taureau est vrai ou faux. Si c'est vrai que dans le cas du bouton gauche, nous devons sélectionner cette section wrapper avec le compteur deux Utilisons donc QuerySelector. Ouvrez ensuite les backticks et insérez votre section. Comme le numéro de cette action. Nous devons passer votre deuxième comptoir, puis l'emballage Nous devons réduire son échelle à un. Nous avons donc besoin de Style et non transformation égale à l'échelle avec la valeur 1. Ce code fait donc référence à la page à venir. Quant à la page de départ, dupliquons ce code. Dans ce cas, nous avons besoin du compteur deux plus un et nous devons augmenter l'échelle à 1,5. OK, voyons le bouton À propos du bouton gauche. Copions l' intégralité des instructions if et collez-les également pour le bouton droit. Nous devons donc laisser la première partie telle qu'elle est en tant que partie de la seconde au lieu du compteur deux plus un, nous avons juste besoin du compteur un. Donc, si nous vérifions et cliquons sur Contrôles, cela fonctionnera parfaitement. Très bien, alors félicitations. Enfin, nous avons terminé le projet. J'espère que c'était intéressant et utile. C'était peut-être un peu difficile, mais j'espère que tu l'as fait 88. Projet 10 - Aperçu du projet: Très bien, il est donc temps de créer notre prochain projet, qui sera le clone de l'un des les plus populaires et les plus sites Web les plus populaires et les plus utilisés, appelé Paypal, créera l'interface utilisateur des différentes pages Je suis sur la page principale, les pages de connexion et d'inscription. Bien entendu, ce ne sera pas le clone exact avec toutes les fonctionnalités. Comme je l'ai dit, nous allons créer simplement une interface utilisateur avec HTML, CSS et JavaScript. Paypal a une apparence différente selon les pays. L'interface utilisateur change fréquemment de temps à autre. Ne vous inquiétez donc pas s'il ne s'agit pas du clone exact de l'interface utilisateur actuelle. Très bien, donc avant de passer directement à l'écriture du code, décrivons d'abord à quoi ressemble le projet Comme je l'ai dit, nous allons créer trois pages différentes, connexion principale et l'inscription. Nous allons commencer par la page principale. Il se composera de deux sections différentes. La première section sera la bannière avec navigation. Nous avons ici plusieurs éléments de navigation. Si je les survole, le menu déroulant s'affiche Il changera lorsque nous passerons souris sur un autre élément de navigation De plus, nous aurons ici deux boutons différents pour la connexion et l'inscription. Si je clique dessus, nous accéderons à la page appropriée. La bannière sera donc suivie de la deuxième section. Il comprendra trois parties différentes avec une police, icônes géniales, des éléments de texte et des boutons. Ensuite, nous aurons cette section bleue avec différents paragraphes. Ensuite, nous allons créer cette petite section ici avec une image et trois étapes différentes. bas de page, vous trouverez un bouton pour vous inscrire, suivi du pied de page Très bien, alors voyons à propos de la page principale. Jetons un coup d'œil à la page de connexion. Elle sera assez similaire à la page de connexion d'origine. Nous aurons ici deux champs de saisie avec des boutons. C'est probablement la page d'inscription. Il sera composé de deux parties. Sur le côté gauche, nous aurons plusieurs images des clients. Quant au côté droit, il inclura deux options différentes. Que nous souhaitions créer un compte personnel ou professionnel. Très bien, c'est tout pour le projet. Comme d'habitude, nous allons le rendre réactif aux différentes tailles d'écran. Si j'inspecte la page et que je passe en mode réactif, vous verrez qu' elle est réactive. Une chose à noter ici, sur les tailles d'écran plus petites, nous n' aurons plus de listes déroulantes Ils s'afficheront alors dans le menu de cette façon. OK, alors c'est ça. Nous sommes prêts à commencer à construire le projet. Passons donc à autre chose. 89. Projet 10 - Créer et styliser la page d'atterrissage - Partie 1: Très bien, nous sommes donc prêts à commencer à construire les projets. J'ai créé un nouveau dossier sur le bureau appelé Papal Clone, dans lequel j'ai un autre dossier pour les images Allons-y, ouvrons-le dans le code VS et créons nos fichiers de travail pour HTML, CSS et JavaScript. Je vais les appeler index.html, style.css et script.js. Ouvrez ensuite le fichier index.html et créez le document HTML de base. Pour cela, je vais utiliser l'un des packages intégrés de VS Code appelé image. Nous devons placer votre point d' exclamation puis appuyer sur Tab ou Enter. Alors on y va. Nous avons ici les balises HTML de base. La première chose que je vais faire est de changer le titre. allez lui envoyer de l'argent, payer en ligne ou créer un compte marchand. Ensuite, nous devons lier les fichiers CSS et JavaScript au code HTML. Ouvrons donc une balise de lien et spécifions la partie du fichier CSS dont nous avons besoin, style.css. En ce qui concerne le JavaScript, je vais ouvrir la balise script juste au-dessus de la balise body de fermeture. Ensuite, nous devons spécifier le chemin du fichier JavaScript dans l'attribut source. Très bien, donc les trois fichiers sont liés. Ensuite, je vais ajouter un autre lien CDN. Tout au long du projet. Je vais utiliser Font, Awesome icons. Allons donc sur Google et recherchons Font Awesome CDN js. Ensuite, récupérez le premier lien. À partir de là, ouvrez une balise de lien dans les éléments d'en-tête et collez le lien en tant que valeur des attributs de référence h. Enfin, je vais exécuter le projet sur le navigateur à l'aide de l'un des packages de code Views, appelé serveur live. Il nous permet d'exécuter le projet dans la vie du navigateur et d'apporter les modifications et les mises à jour sans actualiser la page. À chaque fois. Placons l' acteur et le navigateur. Comme ça. Et lancez-vous. Nous allons construire le projet section par section. Dans chaque section, nous allons créer le balisage HTML. Ensuite, nous allons écrire du CSS. Je vais commencer par la première section, qui inclura suffisamment de pores et la bannière. Tout d'abord, ouvrons la balise div, qui sera le conteneur Il va emballer tout le contenu. Ensuite, je vais ouvrir une autre balise div qui inclura le contenu de la page d'accueil Mais d'abord, insérons vos commentaires pour la première page. Ouvrez ensuite la balise div avec la page d'accueil d'une classe. Ensuite, je vais insérer de nouveaux commentaires, section 1. Et la première section. Ouvrez ensuite un élément de section avec une classe, la section 1. Comme nous l'avons dit, la première section sera composée de deux parties principales. Nous aurons une barre de navigation et une bannière. Alors allons-y et commençons à créer le napa. Tout d'abord, je vais ouvrir une balise div, qui sera l' enveloppe de la navigation Je vais l'appeler Napa Wrapper. Ensuite, je vais ouvrir la balise HTML5, qui s'appelle nef, avec la barre de navigation des classes Nous aurons donc deux parties différentes dans la barre de navigation. Nous aurons un logo, puis quelques éléments de liste avec des menus déroulants. Et nous aurons également deux boutons. Allons-y et créons un logo. Je vais ouvrir la balise div avec la classe. Passons maintenant au logo. Ensuite, je vais vous transmettre votre étiquette Span, qui embellira la première lettre du pape. s'agit essentiellement de la classe P1 et insérez ici P. De plus, nous avons besoin ici d' autres éléments de span avec une classe P2 Et puis encore une fois, un insecte sur votre site de travail. Nous allons donc utiliser ces deux éléments de span pour personnaliser le logo. Pour ce qui est du reste des lettres, interrompons simplement ici. Papier. Très bien, voyons le logo. Maintenant, je vais créer des listes. Nous aurons la liste principale avec trois éléments de liste. Et ces éléments de liste auront leurs propres menus déroulants. Ouvrons une balise de liste avec la liste de navigation des classes. Ensuite, nous avons besoin des éléments LI avec un nom de classe, un élément de liste de navigation. Il doit être suivi de l'élément de lien, qui contiendra la navigation ClassName, le lien de liste Et comme contenu, je vais insérer votre message personnel. Donc, pour les deux premiers éléments de la liste, nous aurons une flèche sur le côté droit. Je vais donc vous transmettre l'icône Font Awesome. Ouvrons l'élément I dont la classe est FAS. Fa, Chevron vers le bas Dupliquons l'élément LI deux fois et apportons quelques modifications Le deuxième point sera celui des affaires. En ce qui concerne le troisième élément, il y aura les partenaires et les développeurs. Et ici, nous n'avons pas besoin d'une flèche car cet élément ONE possède un menu déroulant. Très bien, donc pour l'instant je ne vais pas insérer vos menus déroulants Nous nous occuperons d' eux un peu plus tard. Ensuite, nous devons nous occuper des boutons. Ouvrons la balise div avec les boutons de la barre de navigation des classes. Insérez ensuite ici un élément de bouton avec la classe now pour btn. Et nous avons également besoin ici d'une autre classe pour les styles individuels, Login btn. En ce qui concerne le contenu, insérons votre identifiant. Ensuite, dupliquons le bouton, changeons le nom de la classe. Nous devons nous inscrire et également modifier le contenu Inscription à l'Institut. C'est vrai, donc nous n'avions pas de pauvres, c'est fini. Passons à l' image de la bannière. Vous voulez ouvrir une balise div qui sera l' enveloppe de la bannière La bannière comportera donc trois éléments différents. Le premier sera le titre. Ouvrons la balise d'en-tête H1 avec le titre de la bannière de classe contenant le contenu Nous avons ce qu'il vous faut. Ensuite, nous avons besoin d'un paragraphe. Ouvrons la balise P avec le paragraphe de la bannière de la classe et créons un texte fictif Après cela, je vais ouvrir la balise button avec la classe blue btn. Et grâce au contenu, apprenez-en plus. J'ai utilisé ici la classe blue btn. Ce sera une sorte de nom de classe courant car nous aurons quelques boutons bleus similaires. Très bien, c'est tout en ce qui concerne le balisage HTML de cette première section Nous pouvons maintenant commencer à écrire du CSS. Avant cela, je vais ajouter un lien supplémentaire pour la police. Tout au long du projet. Je vais utiliser l'une des polices Google. Allons donc sur le site Web de Google Fonts et recherchons la police appelée ci-dessous L'A2. Je vais sélectionner tous les styles. Ensuite, saisissez le lien et collez-le dans la tête. Très bien, nous pouvons maintenant écrire le CSS. Tout d'abord, je vais créer quelques styles communs et réinitialiser. Nous allons insérer vos commentaires. Styles courants de styles courants. Ensuite, je vais sélectionner tous les éléments correspondants. Nous devons utiliser un astérisque. Alors tout d'abord, éliminons par défaut, les marges et le rembourrage Je vais les mettre tous les deux à zéro. Ensuite, je vais créer une borderbox de la taille d'une boîte. De plus, afin de supprimer sous-jacent par défaut des éléments du lien, nous n'avons besoin d'aucune décoration de texte. Le prochain sera le type de style de liste aucun. Cela supprimera les puces par défaut des éléments de la liste. Après cela, je vais me débarrasser du plan par défaut. Mettons-le à zéro. Et enfin, en tant que famille de polices définie, utilisons ici dA2, coercitif . Très bien. Comme vous pouvez le constater, tous les styles courants et réinitialisés sont appliqués aux éléments tout au long du projet. Je vais utiliser la rampe comme unité de mesure. Par défaut, une pièce est égale à 16 pixels, car la taille de police de l'élément HTML est égale à 16 pixels. Je souhaite convertir 1 g en dix pixels car je pense que ce serait plus pratique et facile à utiliser. Pour ce faire, nous devons donc réduire la taille de police de l'élément HTML et la porter à 62,5 %. Vous pouvez donc voir que tous les éléments sont devenus plus petits. Très bien, nous sommes enfin prêts à commencer à personnaliser la première section Allons-y et insérons vos commentaires pour la première section. Sélectionnez ensuite la section 1 et définissez sa largeur et sa hauteur. Je vais régler avec 200  % de hauteur probable. Faisons-en 65 % de la fenêtre d'affichage. Ensuite, je vais définir l'image comme arrière-plan de la première section. Pour ce que je vais utiliser ici, une fonction de dégradé linéaire, qui nous permettra d'assombrir légèrement l'arrière-plan La direction de la transition de couleur va donc se faire du bas vers le haut. Utilisons ici deux valeurs RGBA différentes. Et le premier, je vais l'insérer 3083 fois avec une opacité de 0,7 Quant au second , il sera de la même couleur mais avec une opacité différente Passons à 0,6. Ensuite, je vais spécifier l' URL de l'image. Nous avons un dossier appelé images et nous devons sélectionner PG point JPG. Je vais également définir la position de l'image d' arrière-plan. Mettons-le au centre. Ensuite, nous n'avons pas besoin de répéter. Enfin, définissons la taille de l' arrière-plan à couvrir. Très bien, considérons donc que l'image est définie comme arrière-plan de cet élément de section Ensuite, je vais m' occuper de la Navbar. Choisissons son rappeur. Je veux dire, Napa Wrapper. Je vais définir sa largeur. Faisons-le à 100 %. Ensuite, je vais régler la hauteur à huit RAM. Ensuite, nous avons besoin d' une bordure en bas. Attribuons des valeurs de vérité de 0,1, exécutons une valeur solide et appelons AAA. Très bien, ensuite, je vais le sélectionner pour lui-même. Définissez-le en hauteur. Je vais régler la largeur à 120 RAM. Quant à la hauteur, elle sera de 100 %. Après cela, je vais aligner les éléments sur une ligne linéaire horizontale. Et pour cela, utilisons Flexbox. Nous avons besoin de la flexibilité d'affichage dont nous avons besoin pour créer un espace entre les éléments flexibles en utilisant espace de contenu justifié entre eux. Pour aligner verticalement les éléments au centre, nous devons aligner les éléments au centre. Très bien, suffisamment d'articles de bar vendus sont placés horizontalement. Et maintenant je vais placer la navigation elle-même au centre. Pour cela, utilisons à nouveau flexbox. Nous avons besoin de Display Flex puis de Justify-Content Center. Très bien, la navigation est alignée et je vais maintenant personnaliser chaque élément de la barre de navigation Commençons par le logo. Sélectionnez l'emballage. Je vais définir la taille de police 3,5 RAM. Ensuite, je vais créer la police. Italique. Rendez-le également plus audacieux. Je vais régler la police sur 800, puis changer la couleur, la rendre blanche. Très bien, le logo semble déjà bien, mais nous devons le personnaliser un peu plus Comme vous le savez, nous avons ajouté un élément span à la première lettre. Nous l'avons fait parce que la première lettre va être différente. Sélectionnons-le avec la classe P1. Je vais régler la taille de la police sur 4,5 RAM. Ensuite, créez de l' espace sur le côté droit en utilisant la marge droite, une fois. OK, donc on considère que la première lettre est devenue un peu plus grosse que les autres lettres. Ensuite, je vais personnaliser le deuxième élément de la plage. Sélectionnons-le avec la classe P2. Je vais faire en sorte que la taille de la police soit de 4,5 RAM. Et puis changez la couleur, mettez-la BBB. Très bien, après cela, je vais changer la position du deuxième élément de travée Je vais définir sa position comme absolue. Ensuite, afin de l'aligner en fonction de son élément parent, qui est le logo, je vais attribuer la position relative du logo. Ensuite, définissons les propriétés supérieure et gauche de la deuxième travée. Je vais régler l'asphalte avec 2,4 RAM. La position de gauche sera de 0,5 point. La position du second élément span est donc fixe, mais comme vous pouvez le voir, il s'est retrouvé au-dessus du premier P. Je vais corriger cela en utilisant la propriété z-index Mais dans un premier temps, nous devons définir la position du premier élément de travée. Sinon, la propriété z-index ne fonctionnera pas. Allons-y donc et définissons sa position sur relative. Ensuite, utilisez la propriété z-index avec une valeur supérieure à zéro. Portons-en dix. Très bien, avec le logo, c'est terminé. Il est maintenant temps de vous occuper des éléments de navigation 90. Projet 10 - Créer et styliser la page d'atterrissage - Partie 2: Très bien, passons donc à la mise en mosaïque continue de la première section Nous avons tous déjà personnalisé le logo et il est maintenant temps de nous occuper des éléments de navigation Sélectionnez la liste de navigation. Je vais placer les éléments de navigation horizontalement dans une rangée. Nous devons donc afficher Flex. On considère que les éléments de navigation sont placés côte à côte Ensuite, je vais personnaliser les éléments LI. Nous allons donc sélectionner un élément de liste. Je vais faire de la hauteur fine. Faisons huit RAM, puis créons de l' espace dans la liste. Nous avons besoin d'un rembourrage pour ramper. Bon, ensuite, je vais les centrer verticalement. Pour cela, je vais utiliser à nouveau Flux Books. Réglons l'affichage pour qu'il fléchisse, puis alignons les éléments au centre. Très bien, après cela, je vais styliser les liens. Nous allons donc sélectionner au moins le lien. Tout d'abord, je vais définir la largeur et la hauteur. Faisons en sorte qu'ils soient tous les deux à 100 %. Cela augmente la taille de la police, soit 1,7 rem. Je vais également modifier le poids de la police. Réglons-le à 400. Mettez ensuite le texte en majuscules. Et enfin changez la couleur, faites-la blanche. En fait, les flèches doivent également être stylisées car elles font partie des éléments du lien Vérifions le code HTML. Comme vous pouvez le constater, ils sont placés en dehors des liens. Ce n'est pas correct. Alors allons-y et réglons ce problème rapidement. Bon, maintenant les liens sont bien meilleurs. Ils sont placés un peu plus haut à l'intérieur des éléments de la liste afin de les centrer verticalement Utilisons à nouveau la flexbox Nous devons afficher les éléments fléchis et les aligner au centre. Très bien, passons à autre chose et personnalisons ces flèches. Je vais les réduire un peu. Et nous avons également besoin d'un peu d'espace sur le côté gauche. Nous allons donc sélectionner l'élément I. Je vais régler sa taille de police sur 1,5 rem, puis créer un espace sur le côté gauche utilisant margin-left avec la valeur 0,5 rampe Très bien, alors voyons les liens et les flèches. Ils ont l'air bien. Avant de passer à autre chose et de démarrer les boutons, je vais créer un effet de survol Je souhaite afficher une ligne blanche à la fin des éléments de navigation. Et je vais aussi faire pivoter ces flèches. Commençons par les lignes blanches. Ils seront créés en utilisant le bas de la bordure. Sélectionnons donc un élément de la liste en y affectant le pointeur de la souris, la bordure en bas avec les valeurs pointant vers le bélier, plein et la couleur blanche Et utilisez également le bas de la bordure de transition. Ensuite, utilisez une petite durée, 0,1 s. Très bien, nous avons donc ici de jolis effets de survol Comme je l'ai dit, nous allons également faire pivoter les flèches en mode survol Allons-y et sélectionnons l'élément de la liste avec le pointeur de la souris, suivi de l'élément I. Nous devons transformer puis faire pivoter la fonction avec la direction z comme valeur. Je vais passer ici à 180 degrés. Et encore une fois, utilisez la transition avec des valeurs transformées de 0,3 s. Ainsi, une fois que vous passez le pointeur de la souris sur la tige de l'élément, les flèches pivotent Très bien, nous pouvons enfin passer à autre chose et personnaliser les boutons de la barre de navigation. Nous avons deux boutons différents. Ils auront des styles communs. Donc, dans un premier temps, sélectionnons-les en utilisant le nom de classe commun navbar, btn Je vais définir la largeur. Faisons-en un tram. Créez ensuite de l'espace à l'intérieur des boutons à l'aide d'un rembourrage Réglons-le à 0,7 rem. Nous avons également besoin de marge. Réglons-le sur 0,3 RAM, puis arrondissons les boutons en utilisant border-radius avec valeur. Si on rampe. Très bien, passons à autre chose et ajoutons d' autres styles aux boutons Définissons la bordure. Je vais le régler pour qu'il pointe vers un rem, solide et la couleur blanche. Définissez ensuite la taille de police. Soulignons un point pour la RAM. Et changez également le type du plus grossier, indiquez-le. Très bien, alors voyons quels sont les styles courants. Nous avons maintenant besoin de styles individuels pour les deux boutons. Sélectionnons le premier à l' aide du nième sélecteur d'enfant. Je vais régler sa couleur de fond sur transparent. Quant à la couleur, faisons-la blanche. Ensuite, je vais dupliquer ce code. Nous en avons besoin ici. Neuvième enfant avec le numéro deux. Ensuite, la couleur de fond sera blanche. En ce qui concerne la couleur du texte, je vais le rendre gris foncé en utilisant la couleur 62626 Très bien, les boutons sont donc personnalisés et en fait, de notre côté, nous avons terminé Passons à la bannière personnalisée. Sélectionnons-le. Tout d'abord, je vais définir sa largeur. Faisons-le à 100 %. Après ça. Faisons attention à sa position. Je vais définir sa position comme absolue. Ensuite, nous avons besoin d'un positionnement relatif pour cette section elle-même, car il s'agit de l'élément parent. Ensuite, définissons la première position. Je vais le fixer à 25 %. Et lit également le contenu au centre en utilisant le centre d'alignement du texte. Très bien, la bannière est donc positionnée. Commençons par personnaliser ses éléments. Je vais commencer par un titre de bannière. Augmentons sa taille de police. Faites six RAM. Réglez ensuite l'épaisseur de la police sur 300. Changez également la couleur, rendez-la blanche. Et créez de l' espace en bas en utilisant la marge et les trois rampes inférieures. Très bien, le titre est donc personnalisé. Passons au paragraphe. Je vais sélectionner le paragraphe de la bannière. Augmentons sa taille de police, faisons-en 1,8 RAM. Et changez également la couleur, rendez-la blanche. Après cela, je vais réduire sa largeur. Portons-le à 50 %. En fait, le paragraphe doit être placé au centre de la bannière. Faisons-le donc en utilisant la marge. Je vais le mettre à zéro. Ensuite, nous avons besoin d'une ligne 0 sur les côtés gauche et droit. Cela placera l' élément au centre. Pour ce qui est du bas, ce sera pour n. C'est tout pour le paragraphe. Enfin, nous devons prendre soin du fond. Sélectionnons le btn bleu. Je vais régler sa largeur à 35 mètres plutôt que sa hauteur à cinq mètres. Modifiez également la couleur d'arrière-plan. Faites-le 036, B0, B1. Et change la couleur, fais-la blanche. Allons-y et ajoutons un peu plus de style au bas. Je vais le contourner en utilisant un rayon de bordure. Nous avons couru. Débarrassez-vous ensuite de la bordure par défaut, définissez-la sur aucune. Et enfin, prenez soin des polices. Je vais augmenter la taille de la police. Faisons-en 1,6 RAM, et rendons-la légèrement plus audacieuse en utilisant font-weight Très bien, le Buxton a été installé, et en fait, nous en avons terminé avec Il est maintenant temps de passer à autre chose et d'ajouter les menus déroulants à la navigation 91. Projet 10 - Créer et faire fonctionner les menus déroulants: Très bien, nous avons presque terminé la première section. La seule chose que je vais faire est de créer un menu déroulant. Une fois que je passe la souris sur les deux premiers éléments de navigation, le menu déroulant apparaîtra et je pourrai changer de menu Dans un premier temps, nous devons créer le balisage HTML. le premier menu déroulant, nous allons accéder au premier élément LI. Créons ici une autre liste avec la liste déroulante de navigation des classes. Ainsi, chaque liste déroulante comportera quatre éléments de liste différents. Et chaque élément de la liste lui-même comportera deux liens différents. Ouvrons donc la balise LI avec l'élément déroulant de navigation de classe. Ensuite, je vais passer ici la balise de lien avec la navigation de classe, la liste déroulante, le lien. Un. Nous allons expliquer comment fonctionne Paypal. Dupliquez ensuite ce code, modifiez le nom de la classe et modifiez également le contenu. Ça va être le cas, que pouvez-vous faire avec un compte personnel ? Très bien, dupliquons l'élément de la liste trois fois et changeons le contenu. Nous en avons besoin ici. Payez en ligne. Puis en ligne, paiement sans frontières. Ensuite, la prochaine sera d' envoyer des paiements, ce dont nous avons besoin pour envoyer des paiements à l'étranger. En ce qui concerne les deux derniers éléments de lien, nous avons besoin ici d'une recherche d' offres, puis de payer avec PayPal et d'envoyer de l'argent. Très bien, c'est tout pour le premier menu déroulant. Je vais le copier. Ensuite, collons-le dans le deuxième élément LI de la navigation principale. Je vais rapidement modifier le contenu. Nous avons donc besoin ici de toutes les solutions commerciales. Ensuite, nous aurons C ou une gamme de produits. Ensuite, nous avons sauf les paiements en ligne. Ensuite, faites-vous payer sur votre site Web, envoyez des factures. La prochaine sera de créer un e-mail de factures en ligne. Enfin, nous devons vendre à l'international. Et Paypal soutient votre croissance mondiale. OK, nous avons donc ici les listes déroulantes. Ils ont modifié la disposition du nanopore, mais nous allons nous en occuper . Au début. Je vais créer des menus déroulants , puis nous les ferons fonctionner en survolant. Avant cela, je vais masquer le deuxième menu déroulant pendant un certain temps Attribuons-lui un prénom temporaire. Maintenant, dans le menu déroulant, sélectionnez-le dans le fichier CSS et attribuez-le. afficher aucun. Très bien, après cela, je vais sélectionner suffisamment de listes déroulantes Définissons sa largeur et sa hauteur. Je vais régler la largeur à 100 %. Quant à la hauteur, réglons-la sur 20 RAM et changeons également la couleur d'arrière-plan. Je vais utiliser un dégradé linéaire. Tout d'abord, définissons la direction de la transition qui va être de gauche à droite. Ensuite, je vais passer trois couleurs. Le premier sera le 066399. Ensuite, nous avons besoin de f, f, df. Pour ce qui est de la troisième couleur, ce sera la première. Je vais donc le copier et le coller. Vous pouvez voir que nous devons prendre soin de la position du menu déroulant. Réglons donc sa position sur absolue. Je vais positionner le menu en fonction de l'élément de section. Cet élément de section est déjà positionné de manière relative. Nous avons besoin ici du top 8 de la RAM car la position gauche sera nulle. Le menu déroulant est donc positionné. Mais nous avons ici un petit problème. La bannière est placée en haut du menu. Allons-y et corrigeons ce problème à l'aide de la propriété z-index. Mettons-le à 200. Très bien, le problème est maintenant résolu et nous pouvons commencer à personnaliser les éléments du menu déroulant Sélectionnons-les. Tout d'abord, je vais configurer avec 225 RAM, puis créer de l'espace en utilisant la marge. Je vais régler la marge à deux rem en haut et en bas et à Tanner M sur les côtés gauche et droit Comme vous le savez, chaque élément se compose de deux liens différents. Ils doivent être placés l'un sur l'autre. Faisons-le en utilisant Flexbox. Je vais régler l' affichage pour qu'il soit flexible. Et puis nous avons besoin d'une colonne à direction de flexion. Très bien, ensuite, je vais personnaliser les liens. Commençons par le premier lien. Nous devons sélectionner Nafta ou Downlink One. Réglons sa taille de police à 1,6 RAM. Quant à la couleur, faisons-la blanche. Ensuite, je vais dupliquer ce code. Nous avons besoin ici d'un lien vers. En ce qui concerne la taille de police, elle sera de 1,3 rampe. D'accord, donc les liens semblent bons, mais comme vous pouvez le voir, nous devons nous occuper de leur alignement Ils doivent être placés au centre sur deux lignes. Je vais donc définir le rembourrage. Mettons-le à zéro en haut et en bas et à zéro à RAM sur les côtés gauche et droit. Et encore une fois, je vais aligner les éléments à l'aide de flexbox. Nous avons besoin de Display Flex. Et pour placer les éléments flexibles dans le capteur, nous avons besoin du centre de contenu justify-content Alors maintenant, les objets sont placés au centre, mais nous devons les placer sur deux lignes. Je veux dire, il faut les détruire pour ça. Utilisons un emballage flexible avec un emballage économique. Très bien, donc les éléments du menu déroulant sont placés correctement. Et maintenant, nous pouvons créer un effet de survol. Par défaut, le menu déroulant doit être masqué. Une fois que nous avons survolé l'élément, il devrait s'afficher Et en plus de cela, nous devons également changer la couleur d'arrière-plan de la barre de navigation Nous pouvons créer le fichier suralimenté avec du CSS pour la liste déroulante, mais nous ne pouvons pas le créer en le pliant maintenant pour wrapper Parce que si nous sélectionnons l'élément de la liste avec le pointeur de la souris, nous aimons toujours son élément parent ou l'un de ses grands-parents Le survol ne fonctionnera pas. J'ai donc décidé de créer des effets d'horreur en utilisant JavaScript. À l'heure actuelle, le deuxième menu déroulant n'affiche aucun. Alors allons-y et débarrassons-nous de ce code à partir d'ici. Et je vais également supprimer le nom de classe temporaire que nous ajoutons à la deuxième liste déroulante. Après cela, je vais masquer les menus déroulants. Pour ça. Utilisons l'opacité zéro et la visibilité cachée. Très bien, comme vous pouvez le voir, les menus déroulants sont masqués Passons au fichier JavaScript et à l' interview, aux commentaires, à la navigation. Puis n de navigation. Ensuite, nous devons sélectionner simultanément le premier et le deuxième élément de navigation. Pour y parvenir, je vais affecter les deux éléments. Les noms de classe courants. Disons que c'est déroulant, passez la souris. Ensuite, créons une nouvelle variable. Je vais appeler cela des éléments déroulants. Ensuite, sélectionnez les premier et deuxième éléments LI l'aide de la méthode QuerySelector all Nous devons spécifier ici le nom de la classe, passez la souris dans la liste déroulante. Nous avons donc sélectionné les deux éléments de navigation. En général, la méthode all du sélecteur de requêtes renvoie un objet de type tableau appelé liste de Nous devons donc parcourir la liste et l'attacher à chaque élément de navigation et à chaque écouteur d'événements la souris sur l'événement Pour parcourir la liste, je vais utiliser l'une des méthodes d'aide au tableau appelées h. Nous devons donc associer à chaque méthode deux éléments de liste déroulante Cette méthode prend un argument, qui est une fonction de rappel. Cette fonction sera exécutée pour chaque élément de navigation. La fonction de rappel elle-même aura un paramètre, qui sera l'élément actuel de la liste pendant la boucle, je vais l'appeler élément déroulant. Nous devons maintenant associer un écouteur d'événements à une liste déroulante. Nous devons spécifier ici l' On va passer la souris dessus. Et nous avons également besoin ici de la fonction flèche. Cette fonction sera exécutée une fois que nous survolerons l'élément Nous avons donc besoin de deux choses. En survol. Nous devons afficher le menu déroulant, et nous devons également changer la couleur d'arrière-plan de l'emballage Napa Commençons par les menus déroulants. Nous avons donc deux éléments de navigation et deux menus déroulants. Nous devons afficher le menu déroulant approprié une fois que nous survolons l'élément de navigation Nous devons donc accéder au menu déroulant à partir de l'élément déroulant de cette manière Nous avons besoin d'un élément déroulant. Ensuite, nous devons accéder au menu déroulant, qui est le dernier élément enfant de l'élément de liste. Nous devons donc utiliser ici la propriété appelée last element child. Donc, une fois que nous avons accès au menu déroulant, nous devons maintenant le rendre visible. Pour cela, utilisons l'une des propriétés appelées texte CSS. Je vais passer votre niveau d'opacité 1 et votre visibilité visible. Donc, si je passe la souris sur le premier élément de navigation, le premier menu déroulant apparaîtra Et si je passe la souris sur le deuxième élément de navigation, le deuxième menu déroulant apparaîtra Après cela, l'effet de survol cessera de fonctionner car nous venons définir l'événement de passage de la souris et non l'événement de sortie de la souris. Avant cela, je vais changer la couleur de fond de l'emballage Napa Sélectionnons-le à l'aide de la méthode de sélection de requêtes. Spécifiez ici le nom de classe Napa wrapper. Ensuite, nous avons besoin d'une propriété appelée Style, suivie de l'arrière-plan. Je vais utiliser ici la fonction de gradient linéaire. La direction va être d'écrire. Ensuite, je vais passer ici en trois couleurs. Le premier sera le 066399. Ensuite, nous avons besoin de f8f, le F, puis nous avons à nouveau besoin Alors maintenant, si nous survolons la couleur de fond du roman, l'emballage changera Très bien, nous devons maintenant utiliser l'événement de sortie de la souris. Une fois que nous avons passé la souris, nous devons masquer les listes déroulantes Et nous devons également nous débarrasser de la couleur de fond de l'emballage du roman En fait, je vais dupliquer ce code, puis modifier l'événement, ça va passer la souris. Alors nous avons besoin d'une opacité nulle. Visibilité cachée. En ce qui concerne le contexte, il n'y en aura aucun. Très bien, maintenant tout fonctionne parfaitement et avec les menus déroulants, nous avons terminé OK, donc cette syllabe, la première section, passons à autre chose et personnalisons la suivante 92. Projet 10 - Créer et personnaliser la section Services: Très bien, avec la première section, nous avons terminé, et maintenant il est temps de passer à la suivante Dans un premier temps, jetons un coup d' œil au projet terminé. Nous allons donc créer la section Services. Il sera simple, comportera le titre et trois parties qui incluront les icônes, les titres, les paragraphes et les boutons de Font Awesome titres, les paragraphes et les boutons OK, allons-y et créons le balisage HTML. Je vais insérer vos nouveaux commentaires, section 2. Et la section 2. Ouvrez ensuite une balise de section avec une classe, la section 2. Comme nous l'avons dit, cette section sera composée de deux parties principales. Le premier sera le titre. Ouvrons la balise de titre H1 avec le titre de la section 2 de la classe Et comme contenu, je vais insérer que votre compte paypal est destiné à tous ceux qui payent ou sont payés. Ensuite, nous avons besoin des services ouverts, d'une balise div, qui servira de wrapper Dans l'ensemble, nous aurons donc trois services différents. Ouvrons la balise div avec le service de classe. Chaque service sera composé d'une icône Font Awesome, titre, d'un paragraphe et d'un bouton. Ouvrons le tag I avec une classe FAS, un lien utilisateur. Alors nous devons partir. Je vais ouvrir la balise de titre h3 avec le titre du service de classe avec les utilisateurs du contenu. Ensuite, l'élément suivant sera le paragraphe. Il est affecté à une classe, à un paragraphe de service. Et insérez ici du texte factice. Enfin, nous avons besoin d'un bouton avec un service de classe, btn. Et grâce au contenu, apprenez-en plus. OK, donc c'est tout pour le premier service. Je vais le dupliquer deux fois, puis apporter quelques modifications. Je vais changer le nom de classe de l' icône Font Awesome. Ce sera probablement une mallette de la FASFA. Je vais insérer vos entreprises. Ensuite, la police suivante, l'icône Awesome, sera loin d'être une poignée de main Quant à la rubrique « Partenaires ». Très bien, donc c'est une syllabe, le balisage HTML. Nous devons maintenant commencer à styliser cette section. Insérons de nouveaux commentaires dans le fichier CSS pour la deuxième section. Sélectionnez ensuite l'élément de section. Définissons sa largeur, soit 100 %, puis créons de l'espace à l'intérieur de cette section. Nous avons besoin d'un rembourrage Mettons-le à dix rem en haut. Puis zéro sur le côté droit puis 15 RAM en bas et zéro sur le côté gauche. Très bien, ensuite, je vais aligner les éléments à l' aide de Flexbox Je veux dire, je vais placer le titre et les services verticalement dans la colonne. Réglons l'affichage pour qu'il soit flexible. Ensuite, nous devons changer de direction. Faisons-en une colonne. Ensuite, placez les éléments au centre en utilisant Aligner les éléments, au centre. Très bien, donc les éléments sont alignés. Ensuite, je vais personnaliser le titre. Sélectionnons-le. Tout d'abord, augmentons la taille de la police, faisons-en cinq RAM. Ensuite, allégez la police en utilisant une épaisseur de police égale à 100, puis changez la couleur et faites-la 333 Enfin, je vais créer de l'espace bas en utilisant la marge inférieure que nous avons exécutée. Comme vous pouvez le constater, le titre semble bon. Passons à autre chose et occupons-nous des services. Je vais les placer horizontalement dans une rangée. Nous allons sélectionner les services et régler l'affichage sur Flexible. Très bien, après cela, je vais sélectionner le service lui-même. Tout d'abord, définissons la largeur. Je vais faire 35 RAM ce dont nous avons besoin pour aligner les textes au centre. Et créez également de l'espace sur les côtés gauche et droit en utilisant la marge. Mettons-le à zéro et à la fibrine. Très bien, c'est tout pour le service. Nous devons maintenant commencer à personnaliser ses éléments individuellement. Commençons par les icônes Font Awesome. Sélectionnez-les, augmentez la taille de la police, faites-en six RAM. Changez ensuite la couleur. Je vais utiliser votre couleur ou deux à neuf F E7. Ensuite, créez de l'espace en haut et en bas à l'aide de la marge. Mettons-le à deux rampes et à zéro. Très bien, donc les icônes Font Awesome semblent bonnes. Passons à autre chose et commençons les titres. Sélectionnons l'intitulé du service. Réglez sa taille de police sur trois RAM. Ensuite, je vais régler l'épaisseur de la police à 300 et créer l'espace en bas en utilisant la marge inférieure d'une rampe. Les titres sont donc personnalisés. Passons aux paragraphes. Donc, comme le paragraphe de service. Réglez ensuite la taille de police sur 1,5 RAM. Je vais rendre la police légèrement plus audacieuse. Réglons-le sur 600 et créons également de l'espace en bas. Réglons la marge inférieure sur la rampe. OK, donc le paragraphe semble bon. La seule chose que je veux faire, est de réduire légèrement la hauteur de ligne du paragraphe. Réglons-le sur 1.2. Très bien, avec un paragraphe, c'est terminé. Passons au dernier élément des services, qui est un bouton. Tout d'abord, définissons sa largeur. Je vais en faire 20 RAM. Ensuite, faites de l'espace la place des pièces et en utilisant du rembourrage, réglons-le à 1,5 RAM Je vais également rendre la couleur d'arrière-plan transparente. Créez ensuite les boutons qui l' entourent en utilisant border-radius. Trois rampes. Ajoutons quelques styles supplémentaires au bouton. Je vais changer la bordure. La version 2.1 fonctionne bien. Et comme couleur, utilisons O365, B0, B1. Ensuite, nous devons changer la couleur. Utilisons ici à nouveau les couleurs R36, b0, b1. Je vais également augmenter la taille de la police. Mettons 1,5 RAM plutôt que de mettre la police en gras. Et modifiez également le pointeur de la méthode du curseur. Très bien, donc les boutons ont l'air bien. Et en fait, avec cette section, nous en avons terminé. Ça a l'air sympa. Et maintenant, nous devons nous occuper de la section suivante. 93. Projet 10 - Section de création et de style: OK, donc une fois que nous aurons fini de travailler sur la deuxième section, il est temps de passer à autre chose et de commencer à construire. La section suivante portera sur des sujets tels que les fonctionnalités. Et ce sera une section assez simple qui aura un titre de section et six fonctionnalités différentes avec un joli fond bleu Allons-y donc et commençons à créer le balisage HTML. Créons de nouveaux commentaires pour la section 3. Ouvrez ensuite une balise de section avec une classe, la section 3. Dans cette section, nous aurons donc deux parties différentes. Le premier sera le titre. Ouvrons la balise de titre H1 avec le titre de la section 3 de la classe Le contenu sera payant selon les préférences du monde entier. Pour ce qui est de la deuxième partie, ce seront les fonctionnalités. Donc, dans l'ensemble, nous aurons six fonctionnalités différentes. Ouvrons la balise div avec la fonctionnalité de classe. Chaque fonctionnalité inclura le titre et le paragraphe. Ouvrons la balise d'en-tête h3 avec le titre de la fonctionnalité de classe. Et grâce à une protection avancée du contenu. Ensuite, nous avons besoin d'un paragraphe avec le paragraphe d'entités de classe comme contenu. Je vais insérer ici un texte factice. OK, c'est donc tout pour la première fonctionnalité. Au total, nous en aurons six. Allons-y, dupliquons-le cinq fois, puis affichons le contenu des éléments de titre. La seconde concerne les paiements rapides. Nous aurons alors une portée mondiale. La prochaine sera une intégration facile plutôt que simple et pratique. Et le dernier sera un service 24 heures sur 24, 7 jours sur 7. Très bien, alors c'est ça. Le balisage HTML est prêt, et nous devons maintenant styliser cette section Allons-y et créons de nouveaux commentaires dans le fichier CSS. Nous avons besoin ici de la section trois et de la section trois. Ensuite, sélectionnez les éléments de cette section. Tout d'abord, je vais définir sa largeur. Faisons-le à 100 %. Ensuite, je vais créer un espace haut et en bas de cette section Utilisons le rembourrage, définissons-le sur cinq rem et zéro, puis définissons l'arrière-plan Je vais utiliser un dégradé linéaire avec trois couleurs différentes. Mais dans un premier temps, je vais définir la direction de la transition des couleurs. Cela va se faire de gauche à droite, puis utiliser la valeur RGBA Le premier sera trois, puis 303129, et l'opacité Cette deuxième couleur sera 967153. Et l'opacité de 0,8. Pour ce qui est de la troisième couleur, faisons 4321 à quatre Et l'opacité pointe la nuit et change également la couleur du texte. Faites-le blanc. OK, après cela, je vais aligner les éléments à l' aide de Flexbox. Le contenu va être placé horizontalement au centre. Réglons l'affichage pour qu'il soit flexible. Ensuite, pour placer le titre et le contenu l' un sur l'autre, utilisons une colonne à direction flexible. Ensuite, pour placer le contenu au centre, utilisons aligner les éléments au centre. Très bien, donc les éléments sont alignés. Allons-y et personnalisons le titre de cette section. Tout d'abord, je vais définir la taille de la police. Faisons cinq RAM. Ensuite, allégez la police, réglez l'épaisseur de la police sur 300 Enfin, crée de l' espace en bas en utilisant la marge inférieure à cinq rem. Très bien, passons à autre chose et personnalisons les fonctionnalités. Sélectionnons les éléments div d'un wrapper et définissons la largeur à 70 %. Ensuite, je vais placer les fonctionnalités côte à côte horizontalement. Pour cela, nous devons utiliser Display Flex. D'accord, nous devons maintenant placer les fonctionnalités sur deux lignes différentes. Mais avant cela, je vais définir la largeur de chaque entité. Je veux que chaque fonctionnalité occupe un tiers de la largeur de l'emballage Nous allons donc sélectionner la fonction, puis définir la largeur. Alors maintenant, je vais utiliser la fonction calc car nous devons diviser 100 % par trois Dans ce cas, chaque fonctionnalité occupera un tiers de la largeur de l'enveloppe Et après cela, utilisons du Flex Wrap. Pour emballer. Cela nous permettra de placer les contrats à terme sur deux lignes différentes. D'accord, nous devons maintenant résoudre la fonctionnalité elle-même. Mettons les textos des compagnies aériennes au centre. Ensuite, je vais créer de l'espace sur les côtés gauche et droit à l'intérieur de la fonctionnalité à l'aide d'un rembourrage Réglons-le sur 0,5 RAM. Et enfin, crée de l'espace au bas de l'échelle en utilisant la marge des cinq derniers loyers. D'accord, nous avons maintenant de bien meilleurs résultats. Ensuite, nous devons styliser le titre et le paragraphe. Passons à la direction future. Tout d'abord, je vais définir une largeur. Réglons-le au contenu maximum. Dans ce cas, l'élément occupera la largeur requise pour afficher le contenu. Ensuite, nous avons besoin de la taille de police. Faisons-en trois RAM. Réglez également l'épaisseur de la police sur 300. Ensuite, nous devons définir la marge. Mettons-le à zéro en haut. Ensuite, afin de centrer les éléments, nous devons régler la marge sur automatique sur les côtés gauche et droit. Pour ce qui est du bas de l'échelle, ce sera un loyer. OK, Enfin, prenons soin du paragraphe. Sélectionnez le paragraphe suivant. Trouvez la taille de la police, faites en sorte que ce soit 1,5 RAM dont nous avons besoin pour la taille de police. Portons-en 500. Enfin, je vais réduire la hauteur de la ligne. Réglons-le sur 1.2. Très bien, enfin, nous sommes à la troisième section. Nous avons terminé. Ça a l'air sympa. Passons à la section suivante. 94. Projet 10 - Créer et style de la section de démarrage: Nous avons déjà créé quelques sections de la page d'accueil. Il est temps de passer à autre chose et de procéder à la création de la section suivante. Nous devons créer une quatrième section de la page d' accueil, probablement les sections précédentes Celle-ci sera également une section simple. Nous aurons un titre suivi de l'image et de la liste. Allons-y, commençons à créer le balisage HTML et à nouveaux commentaires pour la section quatre Ouvrez ensuite une étiquette de section avec la classe section quatre. Nous allons donc avoir deux parties principales dans cette section : les éléments. Le premier sera le titre de cette section. Ouvrons la balise H1 avec la section de classe pour le titre. Le contenu va être lancé avec Paypal. Ensuite, nous avons besoin d'une balise div qui enveloppera l'image et la liste Je vais attribuer le contenu à la section de classe. Je vais maintenant insérer une image, mais créons d'abord une balise div, qui sera l' enveloppe de l' Je vais l'attribuer à la section cluster pour le wrapper IMG Et puis insérez ici sur l'image. Je vais sélectionner MacBook point PNG le dossier des images. Très bien, après cela, nous devons créer une liste Ouvrons la balise UL avec une section de classe car au moins elle inclura trois éléments de liste différents. Ouvrons la balise LI avec la section de classe pour l'élément de liste. Ainsi, chaque élément de liste sera composé de deux éléments de plage. Le premier sera le numéro. En ce qui concerne le second, il doit s'agir du contenu de l' élément qui est une balise open span avec la classe numéro un. Ensuite, nous avons besoin d'une autre balise Span. En fait, à l'intérieur de cette balise span, nous aurons un lien. Insérons ici un compte professionnel. Dupliquons l'élément LI deux fois et apportons quelques modifications. Ainsi, dans les deuxième et troisième éléments de la liste, nous aurons du texte fictif D'accord ? Le balisage HTML est donc préparé et nous devons maintenant commencer à personnaliser cette section Insérons les nouveaux commentaires et la section du fichier CSS pour la fin de la quatrième section. Sélectionnez ensuite un élément de section et définissez la largeur, jusqu'à 100 %. Ensuite, je vais créer un espace en haut et en bas de cette action à l'aide d'un rembourrage Mettons-le à dix RAM zéro. Ensuite, je vais aligner le titre et le contenu à l'aide de flexbox. Nous avons besoin de Display Flex. Ensuite, nous devons changer de direction. Faisons-en une colonne. Et aussi pour placer le contenu au centre, utilisons aligner les éléments au centre. Très bien, donc les éléments sont alignés. Ensuite, personnalisons le titre de cette section, sélectionnons-le, la taille de police définie, en lui donnant cinq RAM. Ensuite, je vais modifier l'épaisseur de la police. Portons-en à 400. Changez également la couleur. Je vais en faire 44 , puis créer un espace en bas, utiliser la marge, les cinq rampes du bas. Très bien, passons à autre chose et occupons-nous du contenu de cette section Je vais placer l'image et le moins côte à côte. Nous allons donc sélectionner le wrapper div et lui attribuer display flex Les dettes. Personnalisons l'image. En fait, c'est trop gros pour le moment. Sélectionnons l'emballage. Je vais définir la largeur. Faisons-en 50 RAM. Sélectionnez ensuite l'image elle-même. Je vais me fixer à 200 %. Dans ce cas, l'image occupera la largeur de son élément parent, qui est l'enveloppe Ensuite, je vais réduire légèrement l'opacité de l'image Mettons-le à 0,8. Très bien, donc l'image semble bonne. Allons-y et personnalisons la liste. Sélectionnez les éléments UL. Tout d'abord, je vais définir la largeur. Portons-le à 55 %. Créez ensuite de l'espace en haut en utilisant la marge supérieure pour courir. Nous devons maintenant travailler sur les éléments de la liste. Sélectionnons les éléments LI et définissons la taille de police. Je vais en faire 1,6 RAM. Rendez ensuite la police légèrement plus audacieuse. Réglons la taille de police sur 600. Ensuite, je vais placer les chiffres et les éléments de texte côte à côte Utilisons Display Flex et plaçons également les éléments au centre. Enfin, créez de l'espace en bas en utilisant la marge inférieure pour exécuter. Très bien, maintenant je vais m' occuper des chiffres. Sélectionnons-les. Tout d'abord, définissons la largeur et la hauteur. Je vais créer 3,5 RAM pour les deux. Ensuite, nous devons créer la bordure avec la valeur 0,1 RAM solide. La couleur 555. De plus, nous devons les contourner. Utilisons le rayon de bordure avec une valeur de 50 %. Et créez également cet espace sur le côté droit avec emoji write 1.5 ramp D'accord ? Ensuite, nous devons placer les chiffres au centre des cercles. Pour cela, je vais utiliser Flexbox. Nous avons besoin de Display Flex. Et pour le centrage, nous devons utiliser justify-content center et aligner les éléments au centre Très bien, nous avons presque terminé. La seule chose que je vais faire est de changer la couleur du lien dans le premier élément de la liste et de le rendre légèrement plus audacieux Sélectionnons les éléments du lien. Je vais changer de couleur. Faisons en sorte que ce soit o36, b0, b1. Et modifiez également l'épaisseur de la police . Faites preuve d'audace. Très bien, alors c'est ça. La quatrième section semble bonne. Passons à autre chose. 95. Projet 10 - Créer et styliser le pied de page: Très bien, étape par étape, nous allons de l'avant. Il est maintenant temps de créer la dernière section de la page d'accueil. Ce sera la cinquième section. Il sera composé de deux parties principales. La première partie comprendra un titre et j'en ai acheté. Quant à la deuxième balle, elle sera le pied de page, elle inclura le bail et un texte de copyright Allons-y et commençons à créer le balisage HTML. Je vais insérer de nouveaux commentaires pour la section 5. Ouvrez ensuite une étiquette de section avec une section de classe 5. Comme nous l'avons dit, nous aurons donc deux parties principales. La première sera la section 5. Haut. Nous n'aurons ici que deux éléments, le titre et Bateson Ouvrons le titre H2, étiquetons avec une section de classe 5, le titre supérieur En ce qui concerne le contenu, laissez-vous aller si vous vous inscrivez et commencez. Quant au bouton, il sera similaire au bouton que nous avons créé dans la première section. Je suis sur le bouton bleu. Utilisons donc la classe. bleu. Btn. Le contenu commence. Comme vous pouvez le constater, c'est déjà du style. Très bien, c'est tout pour la première partie. Allons-y et créons le pied de page. Je vais utiliser un élément de pied de page HTML5 avec un pied de page de classe Le pied de page lui-même sera composé de deux parties. Nous aurons un filtre en haut et un pied de page en bas. La partie supérieure inclura donc deux listes différentes. Ouvrons la balise UL avec une liste de bas de page de classe. Ensuite, je vais insérer votre balise LI, suivie de la balise de lien avec le conflit d'aide au contenu. Ainsi, dans les deux listes, nous aurons cinq éléments de liste. Dupliquons donc l'élément LI quatre fois, puis apportons quelques modifications. Pour le deuxième élément de la liste, il y aura les frais liés aux fonctionnalités de sécurité. Et le dernier va être tourné. D'accord ? Je vais dupliquer tous les éléments de la liste , puis apporter à nouveau quelques modifications. La deuxième liste sera composée de quatre langues. Insérez votre anglais. Alors. Le prochain sera en espagnol, français, italien, S4. Le dernier élément sera l'image. Donc, au lieu du texte, instituons un élément IMG. Sélectionnez FLAC point PNG dans le dossier des images. Ce sera le drapeau national géorgien. Très bien, c'est tout à propos du fruit ou du dessus. Maintenant, nous avons besoin de Footer Bottom, qui ne comportera qu' un seul paragraphe, sera la classe copyright Et avec les textes suivants, nous avons besoin du copyright, suivi de l'entité HTML5, qui sera le signe du copyright Et nous allons également vous insérer. Tous droits réservés. Enfin, le balisage HTML est prêt et nous sommes prêts à personnaliser cette section Allons-y et créons de nouveaux commentaires et un nouveau fichier CSS. Nous avons besoin de la section 5. De la section 5. Sélectionnez ensuite les éléments de la section et définissez-les en faisant 100 %. Ensuite, je vais sélectionner la partie supérieure des éléments de cette section. Définissons sa largeur, faisons-la à 100 %. Et je vais aussi changer la couleur de fond. Utilisons ta couleur. F3, F7, F8. OK, après cela, je vais placer les éléments au centre. Et je veux aussi créer de l'espace en haut et en bas au lieu de l'élément. Utilisons le centre d'alignement du texte. Pour ce qui est de ce rythme, je vais le faire avec du rembourrage. Mettons-le à sept rem. Et puis zéro. Ensuite, je vais m' occuper du titre. Sélectionnons-le. Tout d'abord, augmentons la taille de la police, faisons-la 3,5 grammes. Ensuite, éclaircissez légèrement la police. Réglez l'épaisseur de la police à 400. Et crée également de l'espace en bas en utilisant la marge inférieure avec une valeur pour R1 OK, donc c'est tout à propos du titre. Selon le bouton bleu. Il y en a partout sur ces carreaux. Nous aurons quelques boutons bleus dans le projet. Je vais donc récupérer le code CSS du pasteur et le mettre dans les styles courants De plus, je souhaite ajouter ici un autre style. Changeons le type du plus grossier. Faites-le pointer vers Donc, avec la première partie, la partie supérieure, nous avons terminé. Passons à autre chose et commençons à travailler sur le pied de page. Tout d'abord, définissons sa largeur et sa hauteur. Je vais régler la largeur à 100 %. Pour ce qui est de la hauteur, faisons-la 15 mètres. Ensuite, je vais aligner les éléments à l'aide de Flexbox. Utilisons Display Flex. Je vais placer les éléments verticalement dans une colonne, et je veux aussi les aligner au centre. Alors allons-y et changeons de direction. Faites-en une colonne. Ensuite, je vais créer un espace entre les éléments flexibles. Utilisez Justifier le contenu, espacez les deux. Ensuite, pour placer les éléments au centre, utilisez aligner les éléments au centre. Enfin, créez de l'espace à l'intérieur du pied de page. Utilisez du rembourrage Je vais le régler sur quatre courses haut plutôt que zéro sur le côté droit, trois RAM en bas et zéro sur le côté gauche. D'accord, donc avant de poursuivre, je voudrais modifier la taille de l'image. C'est trop grand en ce moment. Faisons en sorte que sa largeur soit 3,8 RAM. Et je vais aussi diminuer l'opacité, la faire 0,6. Très bien, maintenant, c'est beaucoup mieux. Allons-y et prenons soin du haut de page. Réglons sa largeur à 70 %. Ensuite, je vais placer les deux pistes côte à côte. Réglons donc l'affichage sur Flexible et créons également un espace entre les listes en utilisant Justifier l' espace de contenu entre les listes. OK, après cela, je vais créer une bordure en bas du pied ou en haut. Assouplissons les valeurs inférieures de la bordure à 0,1 RAM avant que cette vignette ne soit pointillée En ce qui concerne la couleur, utilisons 262626 et créons également l'espace en bas à l'aide Un point en bas. Très bien, nous pouvons maintenant personnaliser les liens. Je souhaite placer les éléments de la liste horizontalement dans une rangée. Nous allons sélectionner une balise UL. Je vais utiliser Flexbox. Réglons l'affichage pour qu'il soit flexible, puis plaçons les éléments au centre en utilisant l'option Aligner les éléments au centre. Ensuite, je vais styliser les éléments de liste des deux listes. Et utilisez la marge, n'est-ce pas ? Avec la valeur 2,5. Courez. Ensuite, sélectionnons les liens. Tout d'abord, changeons la taille de la police, faisons-en 1,5 RAM. Rendez ensuite le téléphone plus audacieux. Epaisseur de la police à 600 et modification de la couleur. Dirigez-vous vers le 62626. Très bien, enfin, nous devons personnaliser le paragraphe sur les droits d'auteur. Sélectionnons-le. Faites en sorte que sa taille de police soit d'un point pour la RAM. Réglez ensuite l'épaisseur de la police sur 600. Et créez également un espace entre les lettres en utilisant l' espacement des lettres, une rampe de 0,1. Très bien, nous avons terminé la cinquième section et nous avons fini de travailler sur la première page Maintenant, il ne vous reste plus qu'à accéder à la page de connexion. Passons donc à autre chose. 96. Projet 10 - Créer et styliser la page d'ouverture: Très bien, nous avons fini travailler sur la première page du projet, et il est maintenant temps de nous occuper de cette deuxième page, qui sera la page de connexion Jetons un coup d'œil au projet terminé. Nous avons donc ici la page de connexion. Nous n'avons pas beaucoup de contenu. Nous allons créer le logo suivi champs de saisie et de deux boutons. Avant de commencer à créer le balisage HTML de la page de connexion Tout d'abord, je vais complètement masquer la première page. Sélectionnons-le et attribuons-lui, n'affichons aucun. OK, maintenant, en bas, juste après la page d'accueil, je vais insérer de nouveaux commentaires pour la page de connexion. Ouvrez ensuite une balise div avec une page de connexion de classe. Ce sera l'emballage. Ensuite, je vais ouvrir une autre balise div qui encapsulera le contenu Appelons cela le contenu de la page de connexion. Le contenu sera composé de deux parties principales. Nous aurons le logo et des éléments de formulaire. En fait, le logo sera similaire à la valeur nulle pour le logo. Il suffit de changer la couleur des lettres. En outre, nous créerons également un logo similaire sur la page d'inscription Donc, afin d'éviter d'utiliser le même code encore et encore, je vais procéder comme suit. Attribuons au logo de la barre de navigation une autre classe, je veux dire logo Ce sera le nom de classe commun aux trois logos que nous utiliserons tout au long de ce projet. Que je vais récupérer le code, coller et y apporter quelques modifications. Nous n'avons pas besoin du nom de la classe, du logo de la barre de navigation à sa place Ajoutons ici le logo de la page de connexion. Ensuite, je vais envelopper la moitié du mot paypal avec un élément span. Et enveloppez également la deuxième partie avec un élément de travée. En fait, je le fais parce que les deux parties auront des couleurs différentes. En plus de cela, je vais également changer le nom de la classe dans le fichier CSS. Appelons cela logo et mettons également ce code dans les actions ordinaires. Comme vous pouvez le constater, le logo contient déjà les styles. En fait, il n'est pas visible pour le moment car il est de couleur blanche. Bien, passons à autre chose et créons le reste des éléments. Le prochain sera le formulaire de page de connexion à une classe. Ainsi, à l'intérieur de l'élément de formulaire, nous aurons deux éléments différents. Tout d'abord, nous devons saisir des éléments. Il s'agit de la classe scientifique, du formulaire de connexion. Nous avons également besoin d' un attribut d'espace réservé, d' un e-mail ou d'un numéro de téléphone portable Dupliquons les éléments d'entrée et changeons le type qui sera le mot de passe. Et supprimez également l'attribut d' espace réservé. Après cela, je vais créer le bouton de connexion. Ouvrons la balise d'entrée avec une classe du formulaire Login btn. Ce type va être Barton. Quant à la valeur , elle sera log n. Le Buxton est donc Ensuite, nous avons besoin d'un élément de lien affecté à son lien de connexion sous forme de formulaire réduit. Et comme contenu, je vais insérer que vous rencontrez des difficultés pour vous connecter. Ensuite, je vais créer un élément span en tant que contenu. Nous allons vous l'insérer. Ou enfin, créons un deuxième bouton pour vous inscrire. En fait, je vais le copier. Le premier bouton, changer le nom de la classe, va être créé, inscrivez-vous btn. En ce qui concerne la valeur, insérons-le, inscrivez-vous. Très bien, c'est tout en ce qui concerne le balisage HTML. Nous devons maintenant styliser la page de connexion. Mais d'abord, insérons de nouveaux commentaires dans la page de connexion du fichier CSS. Puis et hors de la page de connexion. En plus de cela, je vais ajouter des commentaires pour la page d'accueil. En fait, je l' ai oublié au début. Sélectionnez ensuite les développements rapides et définissez la largeur et la hauteur. Je vais régler la largeur à 100 %. C'est ce que la hauteur sera égale à 100 % de la fenêtre d'affichage Très bien. Ensuite, sélectionnons le contenu et définissons sa position Je vais le mettre en valeur absolue. Nous devons nous positionner par rapport à l'élément parent. Ensuite, définissons les propriétés du haut et de la gauche. Je vais fixer la valeur maximale à 12 %. Quant à la propriété de gauche, elle sera de 50 %. Ensuite, je vais parfaitement centrer l'élément. Pour cela, nous devons transformer la fonction dans la direction x et avec une valeur de -50 %. Ensuite, je vais aligner le logo et le formulaire à l'aide de Flexbox. Réglons l'affichage pour qu'il soit flexible. Ensuite, nous devons placer les éléments verticalement dans une colonne. Nous devons donc changer la direction, la placer en colonne et également utiliser l'alignement des éléments au centre. Très bien, créons ensuite la bordure autour du contenu Mettons-le à 0,1 rem solide, et comme couleur, utilisons CF, CF, CF. Enfin, je vais créer de l'espace à l'intérieur de la boîte. Faisons-le en utilisant du rembourrage. Faites-en trois RAM sur les quatre côtés. Hein ? C'est une syllabe du contenu. Nous devons maintenant personnaliser le logo. Tout d'abord, créons un espace en bas, je vais sélectionner le logo de la page de connexion. Définissons le bas de la marge. Fais en sorte de courir. Ensuite, je vais changer la couleur des lettres. Commençons par une lettre P. Nous avons besoin ici de la page de connexion, du logo, suivis de la classe P1 Créons la couleur oh, 64699. Dupliquez ensuite ce code et modifiez le nom de classe dont nous avons besoin ici, P2, car ce sera la deuxième lettre P. En ce qui concerne la couleur, utilisons ici trois à quatre de 0. OK, donc les lettres P sont colorées. Passons à autre chose et occupons-nous du reste des lettres. Comme vous vous en souvenez, nous avons séparé le mot PayPal en deux parties. Nous allons sélectionner la première partie. Je vais utiliser le logo de la page de connexion de la classe alors que nous avons besoin de span suivi du nième sélecteur d'enfant Ce sera le troisième élément. Changeons la couleur, faisons-la 064699. Dupliquez ensuite ce code. Modifiez le numéro dont nous avons besoin ici. Le quatrième enfant aussi. La couleur va être de trois à quatre pieds. Très bien, donc avec le logo, nous avons terminé Passons à autre chose et prenons soin des éléments formés. Sélectionnez-le. D'abord. Je vais aligner les éléments verticalement dans une colonne pour cela. Utilisons flexbox. Nous devons afficher la flexion, puis la colonne de direction de flexion et aligner les éléments au centre. Bien, passons à autre chose et commençons à styliser les éléments d'entrée. Comme vous le savez, nous avons deux champs de saisie et deux boutons, qui sont créés à l'aide des balises de saisie. Les quatre éléments auront des styles communs. Sélectionnons-les donc à l'aide d'un nom de tag. Tout d'abord, nous devons remplir le formulaire de la page de connexion suivi de la saisie. Donc, dans un premier temps, définissons la largeur et la hauteur. Je vais régler la largeur sur 37. Courez. Disons que la hauteur sera de 4,5 grammes. Crée ensuite un espace autour des entrées à l'aide de la marge. Faites-en une seule course. Et arrondissez également les entrées en utilisant le radius de la bordure. Une rampe de 0,5 est arrivée par la suite. Sélectionnons les deux premiers champs de saisie à l' aide de la saisie de connexion du formulaire ClassName Créons un espace à l'intérieur des entrées sur les côtés gauche et droit à l'aide d'un rembourrage, en le faisant 0,1, 0,5 g. Ensuite, je vais changer la bordure, faire 0,1, la placer en continu et la couleur 777 Et enfin, augmentez la taille de la police, faites-la tourner à 1.6. Hein ? Voilà pour les champs de saisie, passons à autre chose et personnalisons le bouton de connexion. Sélectionnons-le. D'abord. Je vais définir la couleur de fond. Vous permet de voir votre couleur. Oath we 6P1 Changez ensuite la couleur du texte et faites-le blanc De plus, nous avons besoin d'une bordure avec les valeurs 0,1 pièce solide. Et comme couleur, utilisons à nouveau o36, B0, B1. Ensuite, je vais m' occuper de la police. Augmentons la taille, faisons-la à 1,8 Ran. Rendez-le également plus gras, définissez l'épaisseur de la police sur 600 et, enfin, modifiez le type du plus grossier, faites-le pointer Très bien, le bouton de connexion est donc personnalisé. Ensuite, je vais personnaliser l'élément de lien. Sélectionnons-le, augmentons sa taille de police, faisons-en 1,6 RAM, puis changeons la couleur. Utilisons votre couleur ou deux à neuf FC7. Ensuite, créez de l'espace en haut et en bas à l'aide de la marge Je vais le régler à 1,2 rem en haut, puis à zéro sur le côté droit, à une pièce en bas et à zéro sur le côté gauche. Très bien, donc l' élément de lien semble bon. Et maintenant, nous devons prendre soin de ces éléments de travée. Je suis dans le mot que nous avons ici. fait, outre ce mot, nous devons créer deux lignes sur les côtés gauche et droit telles que nous les avons dans le projet fini. Allons-y et sélectionnons les éléments de la plage. Dans un premier temps, je vais définir sa largeur. Faisons-le courir. Réglez ensuite la taille de police sur 1,8. Ran, change de couleur. Vous voyez votre couleur 888, puis vous créez un espace en haut et en bas en utilisant la marge qui lui est attribuée. Une course, puis zéro. OK, donc cet élément de plage est stylisé et nous devons maintenant créer vos lignes Je vais les créer en utilisant des pseudo-éléments avant et après. Commençons par les pseudo-éléments précédents. Il sera placé sur le côté gauche des éléments de la travée. Tout d'abord, définissons le contenu, rendons-le vide. Ensuite, je vais définir la largeur à 16 RAM. Quant à la hauteur, elle sera de 0,1 RAM. Et changez également la couleur de fond, mettez-la en C, C, C. Donc pour le moment, la ligne n'est pas visible. Nous devons définir cette position. Faisons en sorte que ce soit absolu. Ensuite, nous devons nous positionner par rapport aux éléments parents, c' est-à-dire la plage. Ensuite, définissons la première position. Ce sera 50 %. Ensuite, nous avons besoin, d'accord, de 3,5 RAM. Ensuite, pour centrer les éléments verticalement, utilisons Transform. Traduisez Y avec la valeur -50 %. Très bien, donc c'est un péché en ce qui concerne la première ligne. Nous avons besoin de la même chose sur le côté droit. Dupliquons donc ce code. Changez avant et après. Ensuite, au lieu de la position droite, utilisez la gauche. Très bien, maintenant que nous avons terminé les lignes, passons à autre chose et personnalisons le dernier élément de la page de connexion, qui est un parson J'ai créé cette inscription BTN. Changeons la couleur de fond. Utilisons votre couleur, D, B, E, D, C. Ensuite, je vais modifier la bordure. Attribuons deux à 0,1 RAM, solides et de même couleur, DBE ATC Ensuite, je vais augmenter la taille de la police, en faire 1,8 RAM. Modifiez ensuite l'épaisseur de la police. Rendez-le plus audacieux. Utilise 600. Enfin, modifiez le type du curseur, pointez-le. Très bien, alors c'est ça. Nous avons terminé de travailler sur la page de connexion. Maintenant, il est temps de passer à autre chose et de quitter cette page d'inscription 97. Projet 10 - Créer et styliser la page d'inscription: Très bien, nous avons créé la page de connexion, et il est maintenant temps de créer la dernière page de notre projet, qui sera la page d'inscription Jetons un coup d'œil au projet terminé. Comme vous pouvez le constater, la page d'inscription se compose de deux parties différentes Nous avons la face supérieure, qui inclut le logo et le bouton de connexion. Ensuite, en bas, nous avons deux parties différentes du contenu. Sur le côté gauche, nous avons quelques images des clients. Quant au côté droit, il se compose de deux options et d'une boîte. D'accord. Tout tourne donc autour de la page d'inscription. Allons-y et commençons à créer le balisage HTML. Nous allons insérer vos nouveaux commentaires. Après la page de connexion. Nous avons besoin d'une page d'inscription et d'une page d'inscription. Ouvrez ensuite une balise div avec la page d'inscription au cours. Comme nous l'avons déjà dit, nous aurons donc deux parties principales, la partie supérieure et le contenu. Il s'agit donc d'ouvrir la balise div avec le haut de la page d'inscription à la classe. Nous devons créer le logo et le bouton de connexion. Comme sur la page précédente, je suis sur la page de connexion, nous aurons besoin du même logo que celui que nous avons utilisé sur la page d'accueil. Nous allons donc le récupérer dans la première section et le coller ici. Je vais changer le nom de la classe. Nous devons utiliser le logo de la page d'inscription. En plus de cela, nous devons créer un bouton comme contenu. Connectez-vous à Let's Institute. Très bien, voyons ce qu'il en est de la partie supérieure. Passons à autre chose et créons le reste du contenu. Je vais ouvrir la balise div, qui sera le contenu de la page d'inscription Le contenu sera composé de deux parties. Nous aurons le côté gauche et le côté droit. Ouvrons la balise div avec le contenu d'une page d' inscription à la classe contenu d'une page d' inscription Le côté gauche inclura trois images et le titre, Let's open div tag, qui servira d' enveloppe aux Je vais attribuer au contenu de la classe les images laissées. Insérez ensuite ici les éléments IMG et sélectionnez la personne à un point JPEG dans le dossier des images. Ensuite, je vais dupliquer un élément d'image deux fois et changer les noms de l'image. Très bien. Ensuite, nous avons besoin du titre. Ouvrons la balise d'en-tête H1 avec un contenu. Découvrez par vous-même pourquoi des millions de personnes se moquent du papier. Très bien, donc c'est à propos du côté gauche. Nous devons maintenant créer le côté droit. Je vais ouvrir la balise div avec le contenu de la page d' inscription à la classe contenu de la page d' inscription à la Hein ? Cette partie inclura donc deux éléments de titre et un formulaire ouvert. Balise d'en-tête H3 avec le contenu. Inscrivez-vous à PayPal. C'est gratuit. En ce qui concerne le deuxième titre, il s'agira d'une balise de titre H4 où le contenu choisira parmi deux types de comptes OK, alors maintenant je vais créer un élément de formulaire. Attribuons-lui le formulaire de page d'inscription à la classe. Dans les éléments du formulaire, nous devrons saisir des groupes et un bouton. Ouvrons donc la balise div avec la classe input-group. Le groupe de saisie sera composé d'un bouton radio et de certains éléments de texte tels que le titre et le paragraphe. Ouvrons la balise d'entrée, un type radio. Nous devons également utiliser un attribut appelé nom avec une case à cocher pour dévaloriser Et en plus de cela, je vais utiliser un autre attribut appelé checked. Cela signifie que le premier bouton radio sera coché par défaut. OK, ensuite je vais ouvrir la balise div avec une option de classe. Il comprendra un titre et un paragraphe. C'est open h3, balise d'en-tête avec le contenu, compte personnel Ensuite, je vais ouvrir une balise p avec du texte fictif. Allons-y et dupliquons ce code. Une fois. Je vais me débarrasser de l'attribut coché et également transformer le compte personnel en compte professionnel. Enfin, je vais créer un bouton qui sera similaire aux boutons bleus que nous avons créés sur la page d'accueil. Ouvrons la balise button avec une classe btn bleue. Et puis, comme le contenu se trouve ici, continuez. OK, donc avant de commencer à styliser la page d'inscription, je vais masquer la page de connexion Attribuons-lui, n' affichons rien pendant un certain temps D'accord, nous sommes maintenant prêts à commencer à démarrer la page d'inscription Insérons de nouveaux commentaires dans le fichier CSS. C'est une page d'inscription. Et hors page d'inscription. Sélectionnez ensuite les éléments div du wrapper. Je vais régler sa largeur à 100 %. Quant à la hauteur, faisons en sorte qu'elle corresponde à 100 % de la fenêtre d'affichage. En fait, je pense que ce serait mieux si nous réduisions ces images parce qu'elles sont trop grandes pour le moment. Nous allons donc sélectionner les images et faire en sorte que leur largeur soit 18. Ok, maintenant c'est beaucoup mieux. Revenons aux développements rapides. Ensuite, je vais modifier l'arrière-plan de la page. Jetons un coup d'œil au projet terminé. Comme vous pouvez le voir, la face supérieure a un arrière-plan différent. Nous allons créer ce type d'arrière-plan aide d'une fonction de dégradé linéaire. Définissons donc l'arrière-plan avec le dégradé linéaire. La direction de la transition va se faire du haut vers le bas. En ce qui concerne les couleurs, je vais utiliser les valeurs RGBA. La première va être 1123 fois. Et ici aussi, opacité 0,9. Quant à la deuxième valeur RGBA, elle sera la couleur blanche, l'opacité, 0,8 Je veux donc que la couleur blanche commence à apparaître après dix pour cent de la transition. Nous devons donc interroger dix pour cent. Comme vous pouvez le voir, nous avons ici une couleur de fond plus foncée pour la face supérieure. Très bien, ensuite, occupons-nous de la mise en page. Pour ça. Je vais utiliser à nouveau Flexbox. Réglons l'affichage pour qu'il soit flexible. Ensuite, je vais aligner les éléments flexibles verticalement dans la colonne Nous devons donc changer de direction. Mettons-le en colonne et alignons également les éléments au centre. Très bien, maintenant je vais m' occuper du haut de la page Sélectionnons le développement. Tout d'abord, je vais définir la largeur et la hauteur. Réglons la largeur à 120 RAM. Pour ce qui est de la hauteur, faisons-en dix rampes. De plus, je vais utiliser à nouveau Flexbox. Réglons l'affichage pour qu'il soit flexible. Ensuite, je vais créer un espace entre les éléments flexibles en utilisant l'espace de justification de l'espace entre les éléments et en alignant les éléments verticalement au centre. Enfin, créons de l'espace en bas à l' aide de la rampe Margin Bottom Five. Très bien, donc les éléments sont bien alignés. En fait, le logo est joli. Nous avons juste besoin de changer une chose. Nous devons changer la couleur de la deuxième lettre P. Nous allons donc sélectionner le logo de la page d'inscription, suivi de la classe P2. Réglons la couleur sur E9. E9, E9. Très bien, voyons voir, en ce qui concerne le logo, passons à autre chose et personnalisons le bouton Sélectionnons-le. Dans un premier temps. Définissons cette largeur, faisons-en huit rampes. Ensuite, je vais créer de l'espace à l'intérieur du bouton à l' aide d'un rembourrage Faisons-le 0,7 rem sur les quatre côtés. Ensuite, je vais changer la couleur de fond. Faisons en sorte que ce soit transparent. Créez la bordure, fixez-la à 0,1 rem. Et comme couleur, utilisons le blanc. Et je vais aussi arrondir le bouton en utilisant border-radius avec une valeur de trois rampes. OK, après ça, occupons-nous du texte. Réglons la taille de police à 1,3 RAM. Ensuite, je vais rendre le téléphone plus audacieux. Réglons l' épaisseur de la police à 600, changeons la couleur du texte pour le rendre blanc Enfin, je vais changer le type de plus grossier, faire ressortir le Très bien, enfin, avec la partie supérieure, nous en avons terminé. Passons à autre chose et occupons-nous du contenu. Sélectionnez les développements. Et d'abord, définissons la largeur, faisons-en 120. Ensuite, je vais aligner les éléments en utilisant à nouveau Flexbox, régler l'affichage sur flex, puis créer un espace entre les éléments flexibles à l'aide du contenu de justification L'espace entre, d'accord, donc les deux côtés, je veux dire que les côtés gauche et droit sont placés côte à côte Et maintenant, nous devons les personnaliser. Commençons par le côté gauche. Sélectionnez le développement du wrapper. Le côté gauche occupera donc 60 % du contenu. Réglons donc la largeur à 60 %. Ensuite, je vais créer une bordure sur le côté droit avec la valeur 0,1 RAM solide Comme couleur, utilisons B1, B1, B1. Et en plus de cela, je vais créer de l'espace à l'intérieur des éléments. Réglons le rembourrage à trois mètres, en haut, à droite et en bas Quant au côté gauche, mettons-le à zéro. OK, après ça, je vais m'occuper des images. Je vais sélectionner un emballage pour les images. Utilisons à nouveau Flexbox. Ensuite, créez de l'espace en bas à l'aide de la marge inférieure à cinq rampes. Très bien, ensuite je vais personnaliser l'image elle-même. Tout d'abord, arrondissons-les en utilisant un rayon de bordure de 50 %. Créez également une bordure. Nous allons vous insérer 1,5 gramme de solide. Et comme couleur, utilisons C, C, C, puis créons de l'espace sur le côté droit en utilisant la marge droite de cinq rem OK, donc les images sont belles. Passons à autre chose et commençons par les éléments de titre. Sélectionnons-le. D'abord. Je vais augmenter la taille de la police. Faisons-le pour la RAM. Ensuite, allégez la police, réglez la police sur 300. Également. Changez la couleur, faites-en 333. Enfin, je vais réduire la hauteur de ligne du titre. Passons à la version 1.1. Très bien, donc c'est à propos du côté gauche. Passons à autre chose et personnalisons la bonne. Sélectionnons le développement. En fait, il occupera 40 % de la largeur du contenu. Ensuite, je vais définir le rembourrage. Mettons-le à trois rem en haut. Puis zéro sur le côté droit. En ce qui concerne les côtés inférieur et gauche, faisons-en une rampe 3D, puis changeons la couleur, faisons-en 555. En fait, je vois ici que les titres et les groupes de saisie sont placés côte à côte Ils doivent être alignés verticalement l'un sur l'autre. Il se peut donc que nous ayons une erreur dans le fichier HTML. Vérifions-le. Comme vous pouvez le voir, le formulaire est placé à l'extérieur de l'emballage. Nous devons donc régler ce problème. Mettons-le dans le rappeur. OK, maintenant je vais commencer. Dans l'ensemble, les rubriques comporteront deux rubriques différentes. Sélectionnons le premier, qui correspond aux éléments de titre h3 Réglons la taille de police à 2,4 RAM. Ajustez ensuite l'épaisseur de la police à 300. Ensuite, je vais dupliquer ce code. Changeons H3 et H4. De plus, en ce qui concerne la taille de la police, je vais utiliser 1,6 RAM. En ce qui concerne l'épaisseur de la police, fixons-la à 500. OK, les titres sont donc personnalisés. Nous avons ici un petit problème, qui n' est en fait pas vraiment le problème. Les titres des groupes de saisie sont des balises h3 et leur taille est également modifiée. Réglons ça. Je vais sélectionner l' option H trois, puis définir la taille de police sur 1,7. Courez. En ce qui concerne le poids de la police, je vais le porter à 600. Très bien, maintenant le problème est résolu. Allons-y et sélectionnons le groupe de saisie. Je vais placer les éléments côte à côte. Utilisons donc Display Flex. Alors. Je vais créer un espace autour de l'emballage en utilisant une marge avec une valeur de 1,5 tour Ensuite, personnalisons les paragraphes. Sélectionnez l'option P. Je vais régler la taille de police à 1,5 g. Très bien, nous devons enfin nous occuper des boutons radio Sélectionnons-les à l'aide de l'attribut type. Tout d'abord, augmentons leur taille. Je vais régler la largeur à 30 %. Quant à la hauteur, faisons-la courir. Ils sont donc maintenant plus gros, mais nous devons légèrement ajuster leur position. Faisons-le en utilisant la marge. Je vais régler la marge à 0,5 rem en haut plutôt qu'à un rem sur le côté droit. Au bas de la page, ce sera zéro. Pour ce qui est du côté gauche, faisons une rampe de -1,5 Très bien, comme vous pouvez le voir, nous avons enfin terminé La page d'inscription est créée et personnalisée. Et en fait, l'ensemble du projet est construit. Nous devons maintenant le rendre réactif aux différentes tailles d'écran. Avant de partir, je voudrais faire deux choses. Par défaut, nous devons afficher la page d'accueil. Ensuite, une fois que nous avons cliqué sur les boutons de connexion et d'inscription, nous devons accéder aux pages appropriées. De plus, une fois que nous avons cliqué sur les logos des personnes, nous devons accéder à la page d'accueil. Pour ça. Je vais utiliser un peu de JavaScript. Avant cela, je vais attribuer aux boutons de connexion et d'inscription certaines classes communes qui seront utilisées dans le JavaScript pour sélectionner les éléments simultanément. Les trois logos ont le logo de classe commun, nous n'avons donc pas besoin de les toucher. Attribuons aux boutons de connexion et d'inscription. Dans le Napa, les cours suivants. Nous avons besoin de vous connecter pour le bouton de connexion et de vous inscrire pour le bouton d'inscription Ensuite, nous avons un bouton ci-dessous dans la cinquième section. Attribuons-y, inscrivez-vous. Donc en fait, c'est tout pour la première page. Sur la page de connexion, nous avons un bouton d'inscription. En ce qui concerne la page d'inscription, nous avons un bouton pour vous connecter Très bien, le code HTML est prêt. Avant de l'utiliser pour écrire le JavaScript, je vais masquer les pages de connexion et d'inscription. En fait, la page de connexion est déjà masquée. Attribuons à la page d' inscription aucun affichage. Pour ce qui est de la page d'accueil, débarrassons-nous de n'en afficher aucune. Très bien, donc je pense que nous sommes prêts à commencer à écrire du JavaScript Je vais insérer de nouveaux commentaires, des pages de pages. Ensuite, je vais sélectionner tous les logos. Utilisez ici, query, sélecteur, all, puis spécifiez ici le logo du nom de la classe Nous devons maintenant parcourir la liste renvoyée par la méthode all du sélecteur de requêtes Et nous devons ajouter un tel auditeur d' événements à chaque logo. Cliquez sur Événements. Utilisons l' une des méthodes d'aide au tableau appelées for-each Cela nous aidera à parcourir la liste. La méthode forEach prend donc argument la fonction de rappel, qui sera exécutée pour chaque élément de la liste La fonction de rappel elle-même prend un argument et il s'agit de l'élément actuel, la liste, pendant la boucle Nous devons maintenant associer un écouteur d'événements au logo avec des événements de clic et une fonction de flèche, qui sera exécutée sur la clique Donc, en cliquant, nous devons afficher la page d'accueil et la hauteur, les pages de connexion et d'inscription Sélectionnons la page d'accueil à l' aide de la méthode QuerySelector. Nous avons donc besoin de la propriété de style suivie de l'affichage. Il doit être égal à un bloc. Dupliquons cette ligne de code deux fois. La deuxième page va être consacrée à la connexion. Nous devons le cacher. L'affichage ne sera donc pas affiché. Pour ce qui est de la troisième page, il s'agira de s'inscrire. Et encore une fois, nous n'avons besoin d'en afficher aucun. D'accord, nous avons ensuite besoin de la même chose pour les boutons de connexion et d'inscription. Dupliquons ce code deux fois, puis apportons quelques modifications. Nous avons donc besoin ici de la connexion à la classe. Je vais donc modifier ici l'argument. Faisons-le Connectez-vous btn. Donc, en cas de boutons de connexion, nous devons masquer les pages d'accueil et d'inscription. Bitulez la page de connexion. Nous devons le rendre visible. Nous avons donc besoin d'un bloc ici. D'accord ? En ce qui concerne le signe des boutons, changeons ici le nom de la classe. Également. Nous avons besoin de vous inscrire ici btn Donc, dans le cas du sinus des boutons, nous devons masquer la page d'accueil et la page de connexion En ce qui concerne la page d'inscription, vous devez la rendre flexible car par défaut, elle est dotée d'une flexibilité d'affichage Très bien, allons-y et testons si tout fonctionne bien. Comme vous pouvez le constater, tout fonctionne bien. La dernière chose que je souhaite faire est de faire pointer le curseur une fois que nous avons survolé les logos Attribuons-lui donc un point plus grossier. Très bien, nous avons enfin terminé le projet. La seule chose que nous avons à faire est de le rendre réactif aux différentes tailles d'écran. Passons donc à autre chose. 98. Projet 10 - Rendre le projet réactif - Partie 1: Très bien, nous avons donc terminé la construction de nos projets. Je veux dire, toutes ces sections et pages sont créées. La seule chose que nous devons faire est de rendre le projet réactif aux différentes tailles d'écran. l'heure actuelle, le projet est conçu pour une très grande taille d'écran. J'y suis. Cela correspond à 1920 pixels de largeur et de hauteur. Nous utilisons une approche basée sur la force de bureau. Inspectons la page et passons en mode réactif. Comme vous pouvez le voir, la largeur et la hauteur sont réglées sur 90, 20 pixels et 1080 pixels. Nous devons maintenant trouver les points de rupture sur lesquels nous devons apporter des modifications. En fait, je ne vais pas commencer à vous trouver les points de rupture parce que je les ai déjà préparés, donc je ne vais pas perdre de temps là-dessus Le premier point d'arrêt sera de 1 500 pièces. Parce que comme vous pouvez le constater, le menu déroulant est foiré. Et nous devons également personnaliser légèrement la troisième section. Allons-y donc et insérons de nouveaux commentaires et le fichier CSS pour le code réactif. Ensuite, je vais créer une nouvelle requête multimédia CSS. Nous devons spécifier ici la largeur maximale. Réglons-le à 1 500 pixels. Comme je l'ai dit, nous devons nous occuper des listes déroulantes. Nous allons donc sélectionner la liste déroulante et réduire le rembourrage sur les côtés gauche et droit Faisons 25 runs. Après cela, je vais sélectionner l'élément déroulant. Définissons la marge. Je vais le régler à deux rem en haut et en bas et à six rem sur les côtés gauche et droit. Très bien, examinons donc les menus déroulants. Ayez l'air bien. Passons à la troisième section. Sélectionnons le wrapper avec les fonctionnalités de la classe. Je vais modifier sa largeur. Portons-le à 80 %. Ensuite, sélectionnez la fonctionnalité elle-même. Changeons le rembourrage. Je vais le mettre à zéro en haut et en bas, puis à trois rem, sur les côtés gauche et droit. Très bien, donc la troisième section a l'air sympa. Et en fait, toutes les autres sections sont bonnes. Vérifions les pages de connexion et d'inscription. Comme vous pouvez le constater, ils n'ont pas besoin de se toucher pour le moment. OK, alors voyons ce point d'arrêt. Passons à autre chose et occupons-nous de la suivante. Le prochain point d'arrêt sera donc de 1 400 pixels. Créons une nouvelle requête multimédia CSS d' une largeur maximale de 1 400 pixels Donc, tout d'abord, je vais réduire la taille de police de l'élément HTML. Réglons-le à 55 %. Cela rendra les éléments relativement plus petits. Comme vous pouvez le constater, nous avons obtenu de bien meilleurs résultats. Mais nous devons encore apporter quelques modifications. Je vais modifier la largeur de la barre de navigation. Faisons-le à cent rans. Après cela, je pense que nous devons augmenter légèrement la hauteur de la première section. Sélectionnons-le et définissons la hauteur à 70 pour la hauteur de la fenêtre d'affichage Ensuite, je vais augmenter la largeur du paragraphe de la bannière. Sélectionnons-le et définissons sa largeur à 70 %. Je trouve donc que c'est stupide à propos de la première section. Passons à autre chose et personnalisons la section Services. Choisissons un développement rapide et définissons-le à 90 % La section Services semble donc bonne. Ensuite, nous avons la section des fonctionnalités. En fait, ça a l'air bien, mais je pense qu' il serait préférable d'augmenter la largeur de l'emballage Nous allons donc sélectionner les fonctionnalités et définir la largeur à 90 %. Bon, passons à la quatrième section. Je vais modifier la largeur du contenu. Sélectionnons la section pour le contenu et définissons sa largeur à 80 %. Je vais également réduire la taille de l'image. Sélectionnons le développement de wrapper. Définissez sa largeur comme étant 40 %. Et modifiez également la quantité d'espace sur le côté droit à l'aide de la marge droite, avec une valeur de six points. Très bien, c'est donc tout à propos de la quatrième section. Et en fait, avec la première page, c'est terminé. Passons à autre chose et vérifions les autres pages. La page de connexion sera-t-elle bonne ? Quant à la page d'inscription, elle a besoin de quelques modifications. Je vais augmenter la taille de la couleur d'arrière-plan en haut. Nous allons donc sélectionner la page d'inscription. Alors. Afin d'éviter d'écrire la fonction de gradient linéaire, je vais la copier depuis le haut. Collons-le et modifions la valeur en pourcentage dont nous avons besoin ici, 12 %. Très bien, donc je pense qu'avec ce point d'arrêt, nous en avons terminé. Les trois pages s'affichent correctement jusqu'à ce que la taille de l'écran atteigne 1 200 pixels, car la page d'inscription doit être modifiée. Pour le reste des deux pages. Nous n'avons pas besoin de les toucher sur 1 200 pixels. Nous allons donc créer une nouvelle requête multimédia CSS et spécifier une largeur maximale de 1 200 pixels. Au point d'arrêt, je vais modifier la mise en page de la page d'inscription Tout d'abord, diminuons la largeur de la face supérieure. Je vais faire 90 runs. Suivant. Je vais modifier l' alignement du contenu. heure actuelle, ils sont placés côte à côte, et je vais les placer verticalement l'un sur l'autre Nous allons donc sélectionner le contenu de la page d' inscription. Tout d'abord, définissons sa largeur, faisons-en une nuit de Ram. Ensuite, nous devons changer la direction de la disposition du flux. Faisons une colonne. Enfin, alignez les éléments au centre. Bien, comme vous pouvez le voir, la mise en page a été modifiée, mais le contenu lui-même ne semble pas bon Alors occupons-nous de ça. Je vais sélectionner la partie gauche. Nous avons besoin de laisser le contenu de la page d'inscription. Réglons sa largeur à 100 %. Et je vais aussi me débarrasser de la bordure sur le côté droit. Réglons le bleu-blanc sur aucun. OK, ensuite, je vais placer les éléments au centre pour cela. Utilisons Flexbox. Lorsque vous affichez Flex. Ensuite, nous devons changer la direction de la mise en page. Faisons-en une colonne , puis plaçons les éléments flexibles au centre. Nous devons aligner les éléments au centre et également aligner le texte au centre. Très bien, nous avons maintenant de bien meilleurs résultats. Ensuite, je vais créer la bordure en bas. Utilisons la bordure inférieure avec les valeurs de 0,1 RAM solide. Et comme couleur, utilisons B1, B1, B1. OK, donc c'est à propos du côté gauche. Passons à l'EQ du côté droit. Sélectionnez le contenu de la page d'inscription, n'est-ce pas ? Je vais le définir avec faisons-le à 100 % et modifions également la quantité de rembourrage Je vais en faire trois sur les quatre côtés. Hein ? Ensuite, je vais m' occuper des boutons de la radio. Je vais diminuer comme la largeur nucléaire et aussi changer leurs positions. Sélectionnons les entrées avec l'attribut type. Ce sera une radio. Fixons-nous à 210 %. Modifiez ensuite légèrement la marge. Nous avons besoin de 0,5 rem en haut plutôt que de zéro sur le côté droit, le bas sera également égal à zéro. Pour ce qui est du côté gauche. Je vais faire moins trois points. Très bien, enfin je vais m'occuper du bouton. Je veux augmenter sa largeur de 200 %. En fait, comme vous le savez, le bouton possède un nom de classe commun, bleu btn. Donc, si nous sélectionnons cet élément en utilisant uniquement le nom de classe blue btn, nous affecterons tous les boutons bleus Pour sélectionner ce bouton en particulier, nous avons d'abord besoin de son élément parent, le contenu de la page d'inscription, n'est-ce pas ? Suivie par la classe blueback t n. Passons à 200 % Et modifiez également la marge en haut et en bas. Je vais le régler sur trois points , puis sur zéro sur les côtés gauche et droit. Très bien, donc tout semble bon. Et avec ce point d'arrêt, nous en avons terminé. Passons à autre chose et trouvons le suivant. Le prochain point de rupture sera de 1 100 pizzas. Parce que comme vous pouvez le constater, les menus déroulants sont foirés. En fait, en ce qui concerne le point d'arrêt, nous devons résoudre ce problème uniquement parce que le reste des pages des sections semble bon Allons-y et créons une nouvelle requête multimédia CSS. Avec eux, largeur maximale, 1 100 pixels. Sélectionnez ensuite l' élément déroulant et modifiez la marge. Je vais le régler à deux rem en haut et en bas et à 3,4 rem sur les côtés gauche et droit. Très bien, alors c'est ça. Allons-y et adaptons le projet au prochain point d'arrêt 99. Projet 10 - Rendre le projet réactif - Partie 2: Très bien, nous avons donc rendu notre projet réactif sur quelques points de rupture différents Le dernier était de 1 100 pixels. Allons-y et continuons. Le prochain point d'arrêt auquel nous devrons apporter certaines modifications sera celui des milliers de pixels Ce point d'arrêt va être complexe car nous devons apporter des changements importants Au point d'arrêt. Nous allons modifier le menu de navigation. l'heure actuelle, les éléments de navigation sont placés en haut de la page. Si nous les survolons, les menus déroulants apparaîtront Après mille pixels, nous n'aurons plus un tel menu, placerons et le masquerons sur le côté gauche de la page. Nous allons également créer une icône de menu. Et une fois que nous avons cliqué, l'icône du menu affichera le menu du côté gauche. En plus de cela, nous aurons également des menus hautement déroulants. Et ils s'afficheront une fois que nous aurons cliqué sur les éléments de navigation appropriés. C'est donc ce que nous allons faire avec des milliers de pixels. Nous allons créer une nouvelle requête multimédia CSS et spécifier une largeur maximale en milliers de pixels La première chose que je vais faire est donc de réduire la taille de police de l'élément HTML. heure actuelle, il est de 55 %, et je vais le réduire à 50 %. Les éléments sont donc devenus plus petits et nous avons maintenant un meilleur résultat. Ensuite, je vais masquer le roman pendant un certain temps, car nous devons créer l'icône du menu et modifier l'alignement en haut de la page Web Attribuons à deux romanciers aucun. OK, les éléments de navigation sont donc masqués. Nous n'avons ici que le logo et les boutons. Allons-y et créons une icône de menu dans le document HTML. Je vais ouvrir la balise div avec le menu de la classe. Ensuite, nous avons besoin d'un autre div avec l'icône du menu de classe. Il comportera trois lignes. Ouvrons donc la balise div avec une classe cette ligne et de la première ligne Le premier sera un nom de classe courant. En ce qui concerne le second, nous l'utiliserons pour des styles individuels. Dupliquons cette ligne de code deux fois et changeons les noms des classes. En plus de cela, je vais ouvrir Span Tag parce que nous avons besoin d'un menu de récompenses. L'icône du menu est créée et nous devons maintenant la personnaliser Commençons par créer de l'espace sur les côtés gauche et droit de la barre d'ongles. Sélectionnons-le. Définissez sa largeur, augmentez-la à 100 %, puis créez de l'espace à l'aide d'un rembourrage Je vais le régler sur 0,5 plutôt que de sélectionner l'icône du menu. Définissez sa largeur et sa hauteur. Je vais me mettre à courir 211. Quant à la hauteur, ce sera pour la RAM. En plus de cela, définissons la couleur de fond. Ce sera une couleur de fond temporaire. Utilisons ici e. Ensuite, arrondissons l' icône en utilisant border-radius avec une valeur de 3 RAM Modifiez ensuite la bordure. Vous voyez votre 0,1 RAM fixe et la couleur blanche. Ensuite, je vais également changer le type de cours pour le rendre pointu. Très bien, comme vous le savez, l'icône du menu se compose de deux parties Nous avons les lignes et nous traversons l'élément. Ils doivent être placés côte à côte. Et ils doivent également être alignés verticalement au centre. Pour cela, comme d'habitude, je vais utiliser Flexbox. Réglons l'affichage pour qu'il soit flexible. Ensuite, nous devons aligner les éléments au centre et justifier l'espace de contenu de manière uniforme. Donc pour le moment, la première partie n'est pas visible, mais une fois que nous l' aurons affichée, elle sera placée sur le côté gauche. Allons-y et affichons les lignes. Sélectionnez-les à l'aide de la ligne de nom de classe courante. Dans un premier temps, définissez sa largeur. Je vais passer à la RAM. Ensuite, la hauteur sera de 0,1 RAM. Et changez également la couleur d'arrière-plan. Fais-le aussi. Nous avons donc ici les lignes, mais pour l'instant elles sont placées les unes sur les autres. Nous devons les séparer. Allons-y, sélectionnons l'icône du menu et définissons sa hauteur. Je vais en faire 1,5 RAM. Ensuite, utilisez à nouveau Flexbox. Nous avons besoin de Display Flex. Ensuite, nous devons changer de direction car les lignes doivent être placées verticalement dans une colonne Enfin, pour créer de l'espace entre les lignes, nous devons justifier l'espace entre les lignes. Très bien, maintenant les lignes semblent bonnes. Prenons soin de cet élément de portée. Nous allons augmenter la taille de la police. Passons à 1,8 Ran. OK, en fait, avec l'icône du menu, nous avons terminé. Je veux juste changer ces couleurs temporaires. Supprimons la couleur d'arrière-plan du menu. Modifiez ensuite les couleurs de la ligne et de l'élément de travée. Nous avons besoin que votre couleur d' arrière-plan soit blanche pour la couleur de ce panneau, puis elle sera blanche également. Très bien, enfin, l'icône du menu est prête, et nous devons maintenant commencer à travailler sur la navigation Jetons un coup d'œil au projet terminé. La première chose que je vais faire est de faire apparaître les éléments de navigation. Donc je veux dire, nous allons aligner les éléments, en particulier dans une colonne. Nous allons changer l' arrière-plan et déplacer l' icône du menu vers la droite. Alors tout d'abord, déplaçons l'icône à l'aide fonction transform, translate x. Insérons 16 rampes. L'icône est donc déplacée. Ensuite, je vais afficher la navigation de retour, mais sans les menus déroulants. Débarrassons-nous donc de ne rien afficher à partir d'ici. En ce qui concerne les listes déroulantes, je vais les masquer en utilisant display none Les éléments de navigation sont donc réalisables, mais sans listes déroulantes heure actuelle, la disposition de la barre de navigation est complètement foirée, mais nous nous en occuperons dans une minute Il est maintenant temps de déplacer la navigation vers la gauche de la page. Je vais régler sa position sur fixe. Définissez ensuite les propriétés supérieures et manquantes. Je vais les mettre à zéro pour les deux. Définissez également la largeur et la hauteur. La largeur sera de 20 RAM. Pour ce qui est de la hauteur, je vais la faire correspondre à 100 % de la fenêtre d'affichage C'est ça. Passons à l'arrière-plan. Je vais utiliser la fonction de gradient linéaire. La direction de la transition de couleur va se faire du haut vers le bas. Ensuite, je vais insérer ici trois couleurs différentes. Le premier sera le 032181, nous aurons le 094399 C'est pour la troisième couleur. Il va être 04207. Tu vois ? La navigation est déplacée vers la gauche, mais les éléments de navigation ne sont pas placés correctement. Réglons ça. Je vais changer la direction de la mise en page flexible. Faisons-en une colonne. Et crée également de l'espace en haut à l'aide d'un rembourrage. Faisons en sorte qu'il fonctionne. Nous avons maintenant un meilleur résultat. Comme vous pouvez le constater, la bannière couvre un peu la navigation. Cela signifie qu'en utilisant la propriété d'indice Z, je vais créer l'indice 200. Très bien, le problème est réglé. Occupons-nous des éléments de navigation. Je vais sélectionner un élément de la liste de navigation. Réglons sa largeur à 100 %. Pour ce qui est de la hauteur, je vais la rendre automatique. Créez également de l'espace en utilisant du rembourrage. Attribuons à 0,1 run. Et je vais aussi créer de l'espace en haut et en bas en utilisant la marge. Mettons-le au point 4.0. Très bien. Ensuite, je vais réduire la taille de police des éléments du lien Sélectionnons le lien de la liste de navigation et définissons sa taille de police sur un point. À louer. Ensuite, je vais réduire la taille des flèches et aussi les faire pivoter. Sélectionnons l'élément de la liste de navigation, suivi de l'élément I. Définissons sa taille de police, mettons-la à un point pour le bélier. En ce qui concerne la rotation, je vais utiliser Transform avec la fonction de rotation comme valeur que je vais insérer ici -90 degrés. Très bien, donc la navigation semble bonne. En fait, si nous survolons les éléments , ils obtiendront la bordure en bas Et le roman changera également la couleur de fond. Ce sont les effets par défaut que nous avons définis pour la très grande taille d'écran. Pour l'instant, je vais me débarrasser de l'effet de bordure. En ce qui concerne la barre de navigation, nous nous en occuperons un peu plus tard. Pour le savoir, sélectionnons la navigation, listons les éléments avec le pointeur de la souris listons les éléments avec le pointeur de la souris et définissons la bordure en bas Très bien, cette syllabe, la plus petite. Pour l'instant Ensuite, je vais m'occuper des menus déroulants. Au début. Jetons un coup d'œil au projet terminé et affichons le menu déroulant. Comme vous pouvez le constater, le menu déroulant est légèrement différent du menu par défaut. Nous avons ici un élément supplémentaire comme le titre. De plus, les seconds liens déroulants ne sont plus visibles. Nous devons donc apporter quelques modifications au document HTML. Tout d'abord, je souhaite ajouter noms de classes individuels aux listes déroulantes car nous devons les styliser et nous avons également besoin ces classes pour JavaScript. Le premier élément sera donc le menu déroulant personnel du NEF. Pour ce qui est du second, ce sera suffisant pour les activités déroulantes. Ensuite, je vais personnaliser les listes déroulantes. Je pense qu'il serait préférable de masquer l'une des listes déroulantes, cela facilitera notre travail en cours. À l'heure actuelle, nous avons ici une liste déroulante naff avec aucun affichage. Changeons le nom de la classe et faisons en sorte qu'il ne soit pas déroulant. Disons affaires. le moment, rien n' est changé ici Pour le moment, rien n' est changé ici car par défaut, le menu déroulant est masqué. Et ils apparaissent uniquement en survol. Je vais afficher et personnaliser le premier menu déroulant tel que nous l'avons dans le projet terminé. En fait, nous avons besoin de styles similaires à ceux que nous avons utilisés pour la liste de navigation elle-même. Je vais donc ajouter un autre nom de classe. Maintenant, liste déroulante personnelle. Ensuite, sélectionnez-le séparément et attribuez-lui une opacité 1 et une visibilité visible. Nous avons donc ici le menu déroulant, mais il n'a pas l'air sympa. Nous devons le personnaliser. Tout d'abord, je vais réduire le rembourrage. Je suis dans l'espace sur le côté gauche. Réglons donc le rembourrage sur une seule RAM. Après cela, je vais masquer le deuxième élément du lien. Nous allons donc sélectionner le lien déroulant naff vers un lien assigné pour n'en afficher aucun OK, ensuite, je vais déplacer le contenu vers le haut. Pour ça. Je vais simplement modifier la valeur de la propriété justify content. Réglons-le pour qu'il fléchisse. Démarrez. Très bien, le menu déroulant est maintenant placé en haut de la navigation Comme nous l'avons dit, nous allons ajouter un élément aux menus déroulants. Ce seront en quelque sorte des titres pour eux. Ajoutons donc la balise LI à la liste. Je vais attribuer suffisamment aux classes, liste déroulante, élément, titre déroulant Insérez ensuite votre balise de lien, qui inclura l'icône Font Awesome avec la classe FAS, FA, Chevron vers le bas, suivie du texte personnel Copions les éléments LI et collez-les également pour la deuxième liste déroulante Je vais modifier le contenu. Faisons en sorte que ce soit une affaire. Très bien, allons-y et personnalisons le nouvel élément de la liste d' édition Tout d'abord, je vais sélectionner l'élément déroulant naff. Réglons sa largeur à 100 %. Et définissez également la marge. Je vais faire un point de marge sur les quatre côtés sauf celui du bas. Le fond va être nul. Après cela, je vais sélectionner la balise de lien. Nous devons donc entendre le titre de la liste déroulante a. Définissons la taille de la police, faisons-en 1,6 RAM. Transformez également le texte en majuscules. Changez la couleur, faites-la blanche. Comme vous pouvez le constater, l'élément de lien semble bon. Nous devons prendre soin de l'icône. Sélectionnons le titre de la liste déroulante, I, taille de police définie, soit 1,5 gramme Nous devons également effectuer une transformation avec la fonction de rotation. La valeur va être de 90 degrés. Ensuite, créez de l'espace sur le côté droit en utilisant la rampe Margin-Right One Très bien, enfin, diminuons la taille de police de ces éléments de lien Sélectionnons-en suffisamment pour créer un lien en haut de la page et définissons la taille de police à 1,4 rond Très bien, le menu déroulant est donc personnalisé dès maintenant sur le premier style de liste déroulante. Mais vous pouvez partir du principe que les deux listes déroulantes sont prêtes. Nous allons simplement ajouter l' actrice soul dans la liste déroulante. Et tous ces styles seront également appliqués à la deuxième liste. OK, maintenant nous devons faire en sorte que l'argent fonctionne. Pour ça. Nous utiliserons JavaScript 100. Projet 10 - Rendre le projet réactif - Partie 3: Très bien, il est maintenant temps de faire fonctionner la navigation. Tout d'abord, je vais masquer toute la navigation. Je veux dire le romancier avec des listes déroulantes. Et je vais également appliquer les styles au deuxième menu déroulant Comme vous le savez, il a été caché jusqu'à présent. Donc, afin de masquer la navigation, je vais changer la position de gauche. Réglons-le sur -20 RAM. Ajoutons également ici le nom de la classe pour le deuxième menu déroulant. Je veux dire Nafta Uptown Business. Ensuite, faites de même ci-dessous. Et supprimez également ce code à partir d'ici. OK, donc la navigation est masquée. Nous devons également déplacer les pièces et les remettre à leur position par défaut. Débarrassons-nous donc de cette ligne de code à partir d'ici. Très bien, donc tout semble bon. Nous pouvons maintenant ajouter un événement de clic au bouton et afficher la navigation. Regardons à nouveau le projet terminé. Donc, en plus d'afficher la navigation, nous devons déplacer rapidement l'icône vers la droite, changer son style et le corriger. Si nous faisons défiler la page vers le bas, l'icône du menu doit avoir une position fixe. Dans un premier temps, occupons-nous du bouton. Nous devons y associer un écouteur d'événements avec un événement de clic Ensuite, une fois que nous avons cliqué dessus, nous devons lui attribuer des styles. Je veux dire, nous devons transformer les lignes en x. Nous allons également changer les couleurs. Et en plus de cela, nous devons le déplacer vers la droite. Laissez-moi vous expliquer comment nous allons gérer toutes ces choses. Nous allons définir les styles CSS mentionnés à l'aide d'une nouvelle classe. Nous allons ajouter cette classe à la barre de navigation. Ensuite, en CSS, nous utiliserons les combinaisons des sélecteurs pour que les nouveaux styles soient appliqués aux éléments Passons au fichier JavaScript. Je vais créer de nouvelles variables. Appelons la première icône de menu variable et sélectionnons-la l'aide de la méthode de sélection de requêtes Spécifions ici le menu des noms de classe. Ensuite, je vais dupliquer ce code, changer le nom de la variable. Ce sera la barre de navigation. Et je vais aussi changer le nom de la classe dont nous avons besoin ici. Maintenant, pour d'accord, après cela, je vais attribuer à l'icône du menu et à l' écouteur d'événements avec des événements en cliquant sur des événements et avec une fonction de flèche Comme nous l'avons dit, nous devons donc ajouter une nouvelle classe à effectuer dès maintenant pour unclick En fait, nous devons ajouter une nouvelle classe au roman, puis la supprimer au prochain, car lorsque nous cliquons d'abord sur l'icône, nous afficherons la navigation Mais dans la prochaine ligue, nous devrions le cacher. Nous devons donc utiliser une méthode de bascule. En général, la méthode toggle ajoute une classe à l'élément s'il n'en possède pas et la supprime si l' élément en possède une Nous devons donc sélectionner suffisamment de barres. Ensuite, nous devons utiliser l'une des propriétés appelées liste de classes, qui inclut toutes les classes de l'île. Et puis nous avons besoin de changer de méthode. Nous devons spécifier ici le nom de la classe, l'appeler change. Très bien, c'est donc tout à propos du JavaScript. Revenons au fichier CSS. Nous pouvons maintenant appliquer les nouveaux styles en un clic. La première chose que je vais faire est de déplacer l'icône du menu vers la droite. Nous devons donc sélectionner le changement suivi du menu. Et pour déplacer l'icône, je vais utiliser à nouveau la transformation avec fonction Translate X comme valeur. Insérons ici 16 rampes. Comme vous pouvez le voir, l'icône se déplace vers la droite sur la première clique. Il revient à son emplacement par défaut au clic suivant. OK, donc avant de passer à la navigation, je veux terminer de travailler avec le bouton. Nous devons attribuer différents styles et cliquer. Comme nous l'avons dit, nous devons le corriger une fois que la navigation s'affichera. Nous avons donc besoin ici d'une position fixe. Nous devons également définir les propriétés du haut et de la gauche. La meilleure position sera de courir aussi loin que la gauche. Ça va faire six descentes. Maintenant, une fois que nous aurons cliqué sur l'icône, elle sera corrigée. Mais nous avons là le problème. Comme vous vous en souvenez, l' icône du menu est un élément flexible. Une fois qu'il est fixé, il saute hors du contenant flexible et du logo, le deuxième article flexible prend sa place Nous devons régler ce problème. Nous devons définir la position du logo manuellement. Nous allons donc sélectionner le logo de la barre de navigation. Je vais définir cette position comme absolue. Ensuite, nous avons besoin de la première position. Faisons-le pour la RAM. Ensuite, nous devons le centrer parfaitement. Je vais donc régler la position gauche à 50 %. Et nous devons également transformer, traduire avec les valeurs -50 %. Et encore une fois -50 %. OK, donc le logo est beau, mais nous avons le même problème que celui que nous avons maintenant pour Batson's Alors allons-y et réglons ce problème. Sélectionnons les boutons de la barre de navigation et attribuons-leur une ligne dans la marge gauche Très bien, maintenant tout semble bon. Revenons à l' icône du menu et personnalisons-la. Nous devons transformer les lignes en x. Nous devons donc sélectionner chaque ligne avec un changement de classe. Allons-y et commençons par le premier. Donc, comme le changement, suivi de la première ligne. Je vais donc faire pivoter la première ligne. Nous avons besoin ici de transformer, faire pivoter avec la valeur 45 degrés. Ensuite, dupliquons ce code. Changez le nom de classe dont nous avons besoin ici, ligne trois. En ce qui concerne la valeur de la fonction de rotation, nous avons besoin de -45 degrés. Et en plus de cela, nous devons masquer la deuxième ligne. Sélectionnons donc la ligne deux avec modification et attribuons-lui une opacité nulle et une faisabilité masquée D'accord ? Donc pour le moment, nous n'avons pas le x. La raison en est que par défaut les lignes sont transformées à partir du centre car l'origine de la transformation est centrée par défaut, nous devons la modifier et tourner à gauche. Nous devons donc transformer l' origine de cette valeur. Très bien, maintenant le problème, ce sont les geeks . Et nous avons ici le x. Ensuite, nous devons changer les couleurs, les couleurs de fond des lignes. Passons à 444. Nous devons également changer la couleur d'arrière-plan de l'icône du menu elle-même. Faisons-le par exemple. Et enfin, changeons la couleur des éléments de la plage. Nous devons sélectionner la plage de menu avec les modifications. Réglons la couleur sur 555. Très bien, donc la dernière chose que je vais faire est de passer à l'icône Nous devons donc effectuer une transformation de transition d'une durée de 0,6 s. Et en plus de cela, je vais utiliser une fonction appelée Cubic Bézier Cela nous permet de créer une transition personnalisée. Donc, dans notre cas, je veux que la transition plus lente au début, puis rapide à la fin. Pour y parvenir, je vais passer ici les valeurs suivantes. Il nous en faut 100. Et encore une fois. En fait, vous pouvez jouer avec différentes valeurs, mais je pense que cette transition semble vraiment bonne. Très bien, enfin, avec l'icône du menu, nous avons terminé. Nous devons maintenant nous occuper de la navigation. Nous devons donc utiliser à nouveau le changement de classe, puis le romancier. Et pour afficher la navigation, nous devons mettre la position gauche à zéro. En plus de cela, utilisons à nouveau la transition avec le même fait. Dans ce cas, il nous faut laisser 0,6 s et la même fonction de Bézier cubique avec les valeurs 1001 Très bien, donc tout fonctionne bien. Nous devons maintenant afficher les menus déroulants. Une fois que nous avons cliqué sur les liens, je parle des liens personnels et professionnels. Avant cela, je veux m'occuper d'une chose. heure actuelle, qu'il s'agisse de l'effet de survol, aciéries ou des éléments de navigation au-delà des milliers de pixels, nous n'avons plus besoin de l'effet de survol car nous modifions l'ensemble de la Donc, pour annuler l'effet de survol, je vais procéder comme suit Nous devons utiliser une instruction if else pour définir la taille de l'écran. Si la taille de l'écran est inférieure à 1 000 pixels, nous devons appliquer ce code ici. Et si ce n'est pas le cas, alors nous devons exécuter ce code, en entier. Créons donc une instruction if dans laquelle nous devons définir la largeur de la taille de l'écran. Nous avons donc besoin d'une largeur intérieure du point de fenêtre. Elle doit être inférieure à mille pixels. Donc, si cette condition est vraie, nous devons récupérer ce code et l'insérer ici. Et si c'est faux, alors nous avons besoin d'une autre instruction où nous devrions mettre tout ce code Maintenant, la couleur de fond du Napa ne change plus Mais nous avons ici un petit problème. Comme vous pouvez le voir, la flèche tourne. Nous n'en avons pas besoin non plus. Nous avons créé cet effet de survol à partir du CSS. Nous pouvons donc le supprimer dans le fichier CSS et créer le même effet dans le JavaScript. Comme vous le savez, nous avons tous déjà un effet de survol ici dans la déclaration d'autre Il suffit donc d'ajouter le code des flèches. Mais d'abord, supprimons-le du CSS. Je vais donc accéder aux flèches depuis l' élément de liste dont nous avons besoin ici, élément déroulant. Ensuite, nous devons accéder aux éléments du lien, qui sont le premier élément enfant de l'élément de liste. Ainsi, lorsque vous entendez la propriété appelée premier élément enfant, la flèche est représentée par l'icône Font Awesome, qui est l'enfant de l'élément de lien. Encore une fois, nous avons besoin d'un enfant du premier élément. Ensuite, nous avons besoin de la propriété de style, suivie de la transformation. Comme valeur dont nous avons besoin ici, faites pivoter de 180 degrés. Copions ce code et collez-le ci-dessous. Une fois que nous avons passé la souris, nous devons rendre la valeur de la fonction de rotation nulle. D'accord ? Comme vous pouvez le constater, nous n'avons plus ici l'effet de survol Nous pouvons maintenant passer à autre chose et vous retirer des menus déroulants. Une fois que nous avons cliqué sur les liens, nous avons dû afficher le menu déroulant approprié. Ainsi, au lieu d'ajouter les écouteurs d'événements à la construction séparément, je vais utiliser à nouveau la méthode forEach Mais avant cela, nous devons attribuer aux deux éléments de lien les noms de classe communs. Appelons-les, affichons la liste déroulante. Ensuite, sélectionnez-les à l'aide de la méthode du sélecteur de requêtes. Spécifions ici le nom de la classe dans la liste déroulante. Ensuite, nous devons parcourir les liens et les attacher à ceux-ci et à l'écouteur d'événements Nous avons donc besoin pour chacun d' entre eux d'une fonction flèche avec le paramètre, appelons-la lien. Puis attachez-y un écouteur d'événements à l'aide de l'événement de clic et d'une fonction de flèche Nous devons maintenant afficher les menus déroulants. En fait, ce sont les frères et sœurs des éléments de lien. Nous devons donc entendre le lien suivi la propriété appelée next elements sibling Ensuite, nous devons définir la propriété de style avec la position gauche. Mettons-le à zéro. Donc, si j'affiche la navigation puis que je clique sur le lien, le menu déroulant approprié s'affichera. Très bien, nous allons de l' avant, mais nous avons ici un petit problème. Si nous cliquons sur l'icône du menu, l'icône disparaîtra, mais le menu déroulant ne se fermera pas. Nous devons régler ce problème. Nous devons donc masquer les menus déroulants. veut que le changement de classe soit supprimé du pôle Nord. Je vais donc utiliser une instruction if où nous allons définir si la barre de navigation a changé de classe ou non Créons donc une instruction if avec la condition suivante. Nous devons d'abord placer ici l'opérateur logique NOT. Ensuite, nous avons besoin de la liste des classes de la barre de navigation. Et nous devons utiliser une méthode appelée contains. Cette méthode nous montre si l'élément contient la classe spécifique ne se trouve pas entre parenthèses, nous devons placer la modification Donc, si cette condition est vraie, cela signifie que le changement de classe est supprimé de la barre de navigation. Nous devons donc masquer les menus déroulants. Sélectionnons-les en utilisant la méthode QuerySelector all. Spécifiez ensuite ici le nom de la classe nafta uptown. Nous devons maintenant utiliser pour chaque méthode. Insérons ici le paramètre que je vais appeler liste déroulante. Ainsi, pour masquer les menus déroulants, nous avons besoin du style déroulant, suivi de la propriété left Et nous devons le régler sur -20 run. Maintenant, tout fonctionne parfaitement. La dernière chose que je vais faire en ce qui concerne le menu est de masquer les listes déroulantes et, une fois que nous aurons cliqué sur les en-têtes des listes déroulantes , je vais tout d' abord attribuer des classes communes aux liens Appelons cela un lien vers un titre déroulant. Nous avons besoin de cette classe pour les deux éléments de lien. Revenez ensuite au fichier JavaScript et sélectionnez-les à l' aide de la méthode QuerySelector all Nous devons spécifier ici le nom de la classe, la liste déroulante, le lien d' en-tête que nous devons parcourir pour parcourir ces liens. Nous avons donc besoin, pour chaque méthode. Insérons ici une fonction de rappel avec un paramètre. Je vais l'appeler lien d'en-tête. Ensuite, nous devons attacher aux éléments du lien des écouteurs d'événements avec des événements de clic Et nous avons également besoin ici d'une fonction de flèche. Nous devons donc masquer les menus déroulants. Et nous devons accéder à ces menus déroulants à partir des éléments de lien. Nous devons donc utiliser le lien d'en-tête. Ensuite, nous devons accéder aux éléments parents. Et pour cela, nous devons utiliser l'une des propriétés appelées éléments parents. Nous avons donc maintenant accès à l'élément de la liste. Ensuite, nous devons accéder au moindre élément lui-même. Encore une fois, nous avons besoin l'élément parent suivi de ces propriétés de tuile. Alors il faut partir. Et la valeur sera de -20 run. D'accord, donc si nous cliquons sur l'élément de navigation puis sur le lien de la liste déroulante, la liste déroulante se masquera. En fait, nous avons ici un problème avec la deuxième liste déroulante car nous avons deux rubriques Il se peut donc que nous ayons une erreur dans le fichier HTML. Allons-y et vérifions-le. Comme vous pouvez le constater, pour une raison ou une autre, j'ai inséré ici deux rubriques. Peut-être n'avez-vous pas ce problème dans votre propre fichier HTML. Alors débarrassons-nous de ça à partir d'ici. Bien, comme vous pouvez le voir, tout fonctionne parfaitement. Et en fait quel est le menu, nous avons presque terminé. J'ai dit presque parce que si nous reprenons la taille de l'écran à très grande, nous aurons des problèmes. Comme vous pouvez le voir, nous avons l'icône du menu dans le coin supérieur gauche. De plus, si nous survolons les éléments de navigation, nous verrons les deux rubriques en haut de la ville que nous avons ajoutées à la liste Nous devons donc les masquer par défaut. Sélectionnons le menu et attribuons-lui. N'en afficher aucun. Ensuite, nous avons besoin d'un titre déroulant. Encore une fois, nous ne devons en afficher aucun. Et puis en bas, je veux dire, dans le code réactif, nous devons sélectionner l'en-tête de la liste déroulante. Nous devons attribuer un bloc d'affichage afin de terminer le travail avec des espaces. Hein ? Enfin, avec l'ammoniaque, nous en avons terminé. Continuons et rendons le projet réactif 101. Projet 10 - Rendre le projet réactif - Partie 4: Très bien, passons à autre chose et continuons à rendre notre projet réactif heure actuelle, nous travaillons sur écran d'une largeur maximale de mille pics Nous avons modifié la navigation et je vais maintenant personnaliser un peu les autres sections. La première section semble bonne. Passons à la section suivante. Cela semble bon également, mais je pense que nous pouvons réduire légèrement la taille de police du titre. Sélectionnons le titre de la section 2 et définissons la taille de police à utiliser. Très bien, je vais ensuite personnaliser la section des fonctionnalités Sélectionnez le développement rapide avec des caractéristiques transversales et définissez sa largeur à 95 %. Je vais également sélectionner la fonctionnalité elle-même. Changeons le rembourrage, mettons-le à zéro en haut et en bas et à 1,5 rem sur les côtés gauche et droit Il y a eu cette syllabe, la section consacrée aux longs métrages. Ça a l'air bien. Après cela, je vais m' occuper de la section suivante. Je souhaite modifier la direction de l'alignement du contenu. l'heure actuelle, l'image et les listes sont placées côte à côte, et je souhaite les placer l'une sur l'autre Nous allons donc sélectionner la section pour le contenu et changer la direction, créer chaque colonne et aligner les éléments au centre. Ensuite, je vais parfaitement centrer l'image. Sélectionnons son emballage. Donc, pour centrer l'image, je vais utiliser la marge où la valeur est auto. OK, personnalisons la liste. Sélectionnons la section car je vais au moins régler sa largeur à 100 %. Et je vais également placer les éléments de la liste au centre pour cela. Utilisons Flexbox. Nous devons régler l'affichage pour qu'il soit flexible. Ensuite, nous devons changer de direction. Faisons-en une colonne. Enfin, nous devons aligner les éléments au centre. Voilà pour la quatrième section. Passons à autre chose et prenons soin du pied de page. Je vais aligner les éléments verticalement dans une colonne. Allons-y et sélectionnons le filtre en haut. Changez de direction, faites-les appeler. Et alignez également les éléments au centre. OK, créons un espace en bas de la liste. Sélectionnons la liste des pieds de page et définissons la marge inférieure sur une mémoire vive Je vais également sélectionner le paragraphe sur les droits d'auteur. Modifiez la quantité d' espace en haut et en bas. Réglons la marge à 1,5 RAM, puis à zéro. Très bien, c'est tout pour la première page. Regardons le reste des pages. Comme vous pouvez le constater, tout semble bon et nous pouvons passer à autre chose et trouver le point de rupture suivant. Le prochain point d'arrêt sera donc de 800 pixels. Nous allons créer une nouvelle requête multimédia CSS et spécifier une largeur maximale de 800 pixels Donc, tout d'abord, je vais réduire la taille de police des éléments HTML. Réglons-le à 45 %. Ensuite, je vais m' occuper de la deuxième section. Réglons le rembourrage en haut et en bas à dix RAM, puis à zéro sur les côtés gauche et droit Je vais également sélectionner le titre de la section 2. Personnalisons-le un peu. Je vais me fixer à 280 %. Nous devons également aligner le texte au centre. Et en plus de cela, je vais définir la hauteur de la ligne. Passons à la version 1.2. Très bien, ensuite, je vais personnaliser les services. Sélectionnons donc l'élément wrapper div avec une classe services et définissons la largeur, jusqu'à 95 % Ensuite, je vais sélectionner le service lui-même. Définissons sa largeur et transmettons-la à la RAM. Et modifiez également la quantité d' espace sur les côtés gauche et droit. Assignez la marge à zéro, puis exécutez. Très bien, nous avons maintenant un bien meilleur résultat. Ensuite, je souhaite réduire la taille de police de la police. Des icônes géniales. Sélectionnons le service. Je change la taille de la police, je la fais pour la RAM. Et je vais aussi personnaliser les boutons. Sélectionnez le service btn, modifiez la largeur et faites-en 15 RAM. Et réglez également le rembourrage sur une RAM sur les quatre côtés. OK, donc c'est tout pour la deuxième section. Ensuite, je vais personnaliser la section des fonctionnalités. Je souhaite placer les fonctionnalités sur trois lignes. Alors sélectionnons les entités et définissons sa largeur à 100 % Ensuite, je vais sélectionner la fonctionnalité elle-même. Réglons sa largeur à 50 % et changeons également le rembourrage, mettons-le à zéro Et pour courir. Très bien, donc je pense que c'est tout à propos de la première page. Toutes les autres sections ont l'air bien. Vérifions la page de connexion. Ça a l'air bien aussi. En ce qui concerne la page d'inscription, nous devons apporter quelques modifications ici Allons-y et sélectionnons le haut. Nous devons nous inscrire en haut de la page et définir sa largeur à 50. Rem. Ensuite, je vais vous en retirer le contenu. Sélectionnez le contenu de la page d'inscription, définissez sa largeur sur 85 % Et définissez également le rembourrage. C'est zéro en haut et en bas et trois rem sur les côtés gauche et droit. Ensuite, je vais sélectionner la partie gauche du contenu. Nous devons donc nous inscrire au contenu de la page laissée. Réglons sa largeur à 200 %. Modifiez également le rembourrage, passez-le à trois RAM. Ensuite, je vais sélectionner les images. Définissons la largeur et faisons en sorte qu'elle soit 14 RAM. La marge a également été modifiée. Je vais le régler sur 0,1, 0,5 g et également diminuer la largeur de la bordure. Je vais le régler à 1 g de solide. La couleur CCC est entrée. Ensuite, je vais sélectionner les éléments de titre H1. Changeons sa taille de police, faisons-en trois lignes. Très bien, donc la partie gauche semble bonne. Passons à la bonne. Sélectionnez le contenu de la page d'inscription, n'est-ce pas ? Donc, tout d'abord, je vais aligner les éléments à l'aide de Flexbox. Réglons l'affichage sur Flex, puis modifions la colonne de direction de flexion. Ensuite, je vais aligner les éléments au centre. Et enfin, changez le rembourrage, faites-en trois tours. Enfin, je vais personnaliser les boutons radio. Sélectionnons-les à l'aide de l'attribut type ou de la radio. Je vais modifier sa largeur. Portons-le à 20 %. Alors. Modifiez la marge. Je vais le régler à 0,5 rem en haut plutôt qu'à 1,5 rem sur le côté droit. En ce qui concerne les côtés inférieur et gauche, ils seront tous deux nuls. Très bien, disons qu'en ce qui concerne ce point d'arrêt, passons à autre chose et travaillons sur le suivant Le prochain point d'arrêt sera de 550 pixels. Créons une nouvelle requête multimédia CSS d' une largeur maximale de 550 pixels. Sur le point d'arrêt, je vais masquer complètement logo de la barre de navigation Sélectionnons le bouton ou le logo et assignons à n'en afficher aucun. Ensuite, je vais m'occuper des éléments de la bannière. Sélectionnons le titre du panneau, changeons sa taille de police, 4,5 rimes. Sélectionnez ensuite une bande ou un paragraphe et définissez la hauteur de ligne, passez C'est tout à propos de la première section. Passons à la seconde. Je vais placer les services verticalement dans la colonne. Nous allons donc sélectionner le développement rapide et modifier la colonne de direction de flexion. Et je vais aussi aligner les éléments au centre. Passons maintenant au service lui-même. Réglons sa largeur à 60 %. Et aussi, je vais définir la marge en bas. Faisons quatre n. Très bien, c'est ça. En ce qui concerne la deuxième section, passons à la troisième. Je vais modifier la taille de police de l'élément de titre. Nous allons donc sélectionner le titre de la section 3 et définir sa taille de police 2. Pour la RAM. Je vais également placer les entités verticalement dans une colonne. Sélectionnons donc l'enveloppe et la direction scientifique de la flexion dans la colonne des valeurs Et nous devons également aligner les éléments au centre. OK, alors sélectionnons la fonctionnalité. Définissons cette largeur, faisons-la à 80 %. Bien, passons à la section suivante. Je parle de la quatrième section. Je vais sélectionner les éléments du titre. Changeons la taille de la police, faisons-la varier. Ensuite, je vais sélectionner le contenu. Réglons la largeur à 100 %. Changez également le rembourrage, mettez-le à zéro en haut et en bas et à trois rampes sur les côtés gauche et droit En ce qui concerne l'image, je vais la masquer du tout Sélectionnons donc le wrapper et définissons l'affichage sur aucun. Enfin, je vais aligner les éléments sur le côté gauche. Nous allons donc sélectionner le moins affecter aux éléments d'alignement avec une valeur flexible. Commencez par cette section. Nous avons terminé. Passons à autre chose et personnalisons le pied de page Choisissons le haut du pied de page et définissons « doux », soit 90 %. OK, donc c'est tout pour la première page. Regardons le reste des pages. La page de connexion n'a donc pas besoin de modifications. Quant à la page d'inscription, nous devons la personnaliser Nous allons vous faire sortir du haut. Je vais régler sa largeur sur quatre pour courir. Ensuite, sélectionnons le contenu de la page d'inscription et définissons sa largeur à 100 %. Très bien, ensuite je vais masquer complètement la partie gauche du contenu Sélectionnons donc à gauche et assignons à ne rien afficher. Enfin, augmentons la largeur de la partie large. Je vais le régler pour qu'il gère les cadeaux. Très bien, c'est tout à propos de ces points d'arrêt. Et maintenant, je dois personnaliser le projet sur le dernier point d'arrêt, qui sera de 400 pixels Créons une nouvelle requête multimédia CSS et spécifions une largeur maximale de 400 pixels. Donc, tout d'abord, je vais réduire la taille de police de l'élément HTML. Portons-le à 40 %. Donc tout semble bon. Mais je vais personnaliser l'icône du menu et nous l'avons affichée en alpha. Ensuite, l'icône couvrira le bouton de connexion et ne s'affichera pas correctement. Je vais donc masquer le menu Word à partir de l'icône. Sélectionnez la plage de menu et définissons-la pour qu'elle n'en affiche aucune. Je vais donc réduire la largeur du menu que je peux résoudre. Sélectionnons-le et définissons sa largeur sur cinq marques. Maintenant, je peux voir que nous avons un bien meilleur résultat. La seule chose que je n'aime pas ici, c'est le deuxième élément de la liste de la quatrième section. Parce que le nombre est en quelque sorte réduit. Je vais donc régler ce problème. Sélectionnons le nombre et définissons sa largeur minimale. Faites-en 3,5 g. Très bien, donc enfin, le projet s'adapte aux différentes tailles d'écran. Avant de terminer le projet, je voudrais faire une dernière chose. En fait, si nous agrandissons la taille de l'écran puis que nous survolons les éléments de navigation, les listes déroulantes ne s'afficheront pas Nous devons actualiser la page pour cela. Donc, afin d'éviter d' actualiser la page manuellement, je vais créer une fonction automatique une fois que nous aurons redimensionné la taille de l'écran Pour cela, je vais attacher l'écouteur d'événements à l'objet de la fenêtre avec le redimensionnement de l'événement. De plus, nous avons besoin ici de la fonction flèche, qui sera exécutée une fois que nous aurons redimensionné la fenêtre Donc, pour recharger la page, nous avons besoin de la fenêtre suivante, de l'emplacement des points, du rechargement des points Donc, si nous testons, vous verrez que tout fonctionne parfaitement. Très bien, nous avons donc fini de travailler sur notre dixième projet, le clone de Paypal C'était le clone de l' interface utilisateur de ce site Web. J'espère que le projet vous a plu et que vous avez appris de nouvelles choses. Maintenant que nous avons terminé de travailler sur ce projet, notre cours est également terminé. J'espère que c'était intéressant et utile. Nous avons créé dix sites Web modernes et réactifs différents à partir de zéro. J'espère donc que vous vous êtes beaucoup entraîné dans le développement Web frontal et que vous apprendrez beaucoup de choses différentes en HTML, CSS et JavaScript Ce sont trois technologies de base du développement Web frontal. Il est donc très important de les apprendre et de les pratiquer aujourd'hui. Très bien, je voudrais donc vous remercier d'être parmi nous. Je te souhaite tout le meilleur. Nous prévoyons de publier prochainement un nouveau cours, toujours avec des projets. Alors restez à l'affût. Bonne chance Au revoir.