Développement Web NextJs, React et TailwindCss : sites Web de portefeuille réactifs et animés

1. Intro: Dans ce cours, vous apprendrez à créer un site Web à l'aide de NextGS. Bienvenue. Ce cours s' adresse à tous ceux qui souhaitent apprendre par eux-mêmes la conception de bâtiments de ce type. Nous allons styliser tous les composants avec le CSS Tailwind Cela ressemble à une grande bibliothèque de classes CSS prédéfinies que vous pouvez utiliser directement dans votre code HTML pour styliser des éléments sans écrire de CSS personnalisé à chaque fois Contrairement au CSS traditionnel, où vous pouvez écrire des styles dans un fichier séparé, tailwind vous permet d'appliquer des styles directement à vos éléments HTML à l'aide de petites classes à usage unique Pourquoi utilisez-vous Next JS pour le site Web, où il s' agira principalement du front-end C'est bien d'avoir préparé le site Web au cas où vous ajouteriez également une fonctionnalité principale plus tard et aussi à cause du système d'exploitation, qui est quelque chose où Next Jess brille Nous apprendrons comment structurer le dossier, comment créer et inclure des composants sur votre page, comment définir correctement la mise en page avec une police et comment créer efficacement un site Web. Dans cet exemple, il s'agira d'un site Web de portfolio, car après ce cours, vous pourrez conserver tout ce que vous venez de coder. Je vous recommande également d' essayer le projet de classe, car vous pourrez y affiner vos compétences, et si vous avez quelque chose, je me ferai plaisir de répondre à toute question ou commentaire Voyons à quoi ressemblera la page une fois que nous aurons codé tous les composants. Après ce cours, vous saurez comment créer un site Web comme celui-ci, comment utiliser les classes Tailwind, comment créer des composants réutilisables, comment travailler avec la structure de dossiers de NextGS et utiliser certains de ses avantages J'ai hâte de voir les leçons. 2. Configuration: Dans notre projet, nous allons commencer par exécuter cette commande, et comme nous avons déjà créé un dossier, nous pouvons y faire juste un point car cela installera tout dans le dossier où nous nous trouvons actuellement. Là, nous allons faire Y, cliquer sur oui jusqu'à la fin, sur non, oui, non et non. Cela bloquera l'installation toutes les dépendances dont nous aurons besoin, nous attendrons donc un peu. Maintenant, notre dossier ressemble à ceci et nous allons créer un dossier d'actifs en public. Nous y ferons des actifs. Nous y mettrons les photos. Vous pouvez les obtenir via le lien de démarrage et le Nap. Nous allons également créer un nouveau dossier que nous appellerons composants. Nous y conserverons des éléments tels que la section Hero, la barre de navigation, etc. Nous pouvons réellement le créer dès maintenant. Faisons Navbar, faisons TS six. Et passons également à la section des héros, le TA Six. Ce sont les deux premiers composants lesquels nous allons commencer, et plus tard, nous en ajouterons de plus en plus. Pour que ces composants apparaissent réellement sur notre page, nous devons créer l'exportation. Cela signifie que nous y trouverons quelque chose comme export const, hero et là nous ouvrirons le corps À l'intérieur, nous y retournerons pour le moment, nous pouvons simplement y mettre les fragments vides, puis nous passerons à notre page TS six. Là, nous pouvons supprimer tout le contenu et n'y laisser que le diff Même avec l'import, nous ne pouvons y faire qu'un fragment vide, et à l'intérieur, nous commencerons à taper hero, et il nous proposera automatiquement d'importer ce composant. Nous allons donc entrer. Je serai automatiquement importé, puis tout ce que nous y mettrons figurera sur notre page . Comme nous exécuterons le serveur avec NPM run Def, puis que nous arriverons sur notre hôte local, vous pourrez voir que le contenu s'y trouvera 3. Héro: Dans la section héros, nous allons commencer par les importations, puis nous allons importer le mouvement à partir d'un cadre ou d'un mouvement, ainsi que de la photo de profil. Nous allons également importer l'image à partir de l'image suivante et définir ce composant en tant que composant client. Nous allons donc y mettre un client d'utilisation. Nous devons d'abord créer un arrière-plan dégradé linéaire sur le fond de notre section consacrée aux héros. Nous allons commencer par la classe relative car nous y aurons l'effet planétaire, et elle occupera une place absolue. Ensuite, nous allons continuer avec le clip Overflow car nous ne voulons pas que du contenu sorte de notre composant Ensuite, nous parlerons de hauteur d'écran minimale, ce qui signifie qu'il prendra au moins la hauteur de l'écran que l'utilisateur regardera. Ensuite, nous allons mettre le texte en blanc, et maintenant nous allons définir le fond du dégradé linéaire. Nous allons commencer par BG, c'est-à-dire l'arrière-plan, et là nous allons définir le dégradé linéaire dans le dégradé linéaire, nous allons définir cela en bas et là nous allons commencer par la couleur noire. Ensuite, nous continuerons avec la couleur grisâtre. 35 % indiquent la part de cette échelle que doit prendre la couleur grise. Ensuite, nous allons continuer avec une autre couleur grise. Nous modifierons cela ultérieurement. Nous pouvons mettre cela à peu près 67 %. Pour l'instant, si je mets la couleur blanche, vous pouvez voir comment elle se divise, et puis la dernière, nous pouvons aussi essayer avec la couleur blanche, régler 85 % et vous pouvez voir que ce sera la couleur du bas. Celui-ci devrait être le plus brillant. Pour l'instant, on peut y mettre une couleur grisâtre. Comme ça et nous changerons cela un peu plus tard. Pour l'instant, nous allons le garder comme ça, puis nous y ajouterons les couleurs car nous voulons toujours coder le contenu de cette section consacrée aux héros. Ce que nous allons également faire, c' est prendre soin de la planète , car nous allons ensuite coder et adapter notre design en fonction de celle-ci Ajoutons-y donc un div. Il peut en fait s'agir d'un div vide. Nous n'ajouterons aucun contenu à l'exception des noms des classes. Pour les cours, nous définirons cette position comme une position absolue avec un arrière-plan noir. Nous allons définir sa largeur. Je vais faire 2 400 pixels. Nous allons régler sa hauteur. Je dirais qu'il y a 1 000 pixels. Ensuite, nous allons créer ce cercle. Donc, arrondissez-le à 50 %, puis nous fixerons cette position à 50 % et nous traduirons X de 50 %. C'est donc au milieu. Ensuite, nous allons commencer. Je vais le faire sur une autre ligne pour que vous puissiez le voir. Avec un autre arrière-plan, nous y mettrons un dégradé radial et nous le réglerons à vue de plus près, puis nous réglerons, encore une fois, la couleur noire à 85 %. Et puis une couleur à laquelle on aimerait bien y figurer. Par exemple, si je dis qu'il y a du blanc, vous pouvez voir que cela prendra la forme de la planète sur notre page. Je peux en fait le laisser là et nous pouvons le changer en une couleur qui nous plaira un peu plus tard. Disons également ceci pour les 450 pixels supérieurs. C'est comme si nous pouvions voir en bas maintenant, disons qu'il y a une bordure. Je vais créer une bordure d'un pixel , puis une couleur de bordure que nous pouvons à nouveau définir pour le moment en blanc avec une opacité de 0,3 Avec cela, nous aurons cet effet de planète sur notre page. dessous de cette planète div, nous pouvons commencer à créer le conteneur de contenu. Je vais créer le div et à l'intérieur de ce div, j'en créerai un autre, puis en dessous de cet autre dif, nous créerons un div de mouvement Maintenant, pour ce contenant de contenu, Dave, nous allons placer les classes de contenants par mixage afin de le centrer , de la literie pour une litière horizontale, literie du haut à 12 et du rembourrage du bas à 24 Maintenant, nous allons également ajouter quelques classes à son div interne. Nous y placerons la disposition de la boîte flexible , la colonne de direction du flex, sorte que les éléments soient placés les uns en dessous des autres, les éléments à centrer et à justifier de centrer à centre les éléments horizontalement et verticalement Le texte doit être centré pour avoir le texte centré et également l'index jusqu'à dix. ce conteneur div et dans le div interne, nous allons créer un div animé pour l'image de profil. Je vais faire le mouvement sur div et à l'intérieur de ce div, nous mettrons un div qui sera là en tant qu'élément de design. Nous mettrons donc la position absolue à l'intérieur d'un Nous mettrons donc la position absolue à l'intérieur dégradé d'arrière-plan nul vers le bas et du gris 500 avec une opacité de 0,2 à Excel transparent, arrondi, complet et flou Maintenant, en dessous de cet élément de design, nous allons mettre une image et dans cette image, nous allons mettre la source de notre photo de profil ou de notre photo de profil et les noms de classe d'un certain esprit. Je vais utiliser les 250 pixels relatifs et l' index défini sur dix, là nous utiliserons la balise image du prochain JS. Nous l'avons maintenant sur notre page. Nous pouvons y voir que nous allons définir les attributs du motion dip, donc celui-ci est réellement animé. Pour l'initiale, nous allons régler l'opacité à zéro, afin qu'elle ne soit pas visible et redimensionnée, nous allons également définir 0,5 comme état initial L'état final sera entièrement visible. Donc, opacité à un, 100 % et mise à l'échelle à un, cela donne l'effet d'animation qu'elle augmente à grande échelle Pour la transition, nous fixerons la durée à 0,8. Nous allons donc définir le temps que cela prendra. De plus, nous y définirons certains noms de classes, à savoir la marge relative en bas et la marge en haut. Nous pouvons maintenant continuer avec le contenu du texte qui se trouvera en dessous de ce div. Cela signifie qu'en dessous de celui-ci, nous en créerons un autre, motion to div. Dans celui-ci, nous allons mettre un titre, et là nous y mettrons une haute messagerie instantanée , nous pouvons mettre de la technologie de rupture, John, bien que nous puissions mettre des technologies dépensées et en dessous de H, nous mettrons une technologie de paragraphe. Nous pouvons y mettre une phrase à notre sujet. Je suis un développeur complet qui se concentre sur la création de sites Web offrant la meilleure expérience aux utilisateurs Par exemple, nous pouvons également le formater comme suit. Ensuite, en dessous de ce paragraphe, nous pouvons créer un div dans ce div, nous allons mettre deux boutons. Un pour me contacter ou un autre pour le travail, ou nous pouvons mettre le téléviseur à télécharger, quelque chose comme ça. Nous allons créer le bouton à points animés pour me contacter, copier-coller et pour le second, nous pourrons visualiser le travail. Maintenant, pour ce qui est de la différence de mouvement, nous allons à nouveau définir leurs états initiaux, qui seront l'opacité à zéro et la position Y à 20, puis animer et les états finaux opacité à un et Y à Nous allons donc passer à sa position finale. la transition, encore une fois, pour la durée de 20,8 secondes, 0,8 seconde et pour les noms de classe , nous y mettrons une largeur maximale de deux Excel Passons au style de l'ancienne. Nous y mettrons du texte au format Excel, du texte large avec une opacité de 0,8, largeur maximale grande, puis un mélange pour le centrer, en le relâchant pour modifier la hauteur de sa ligne, et également une marge vers le bas est important de mener la relaxation à cet égard, car nous y parvenons sur deux fronts avec cette technologie de rupture. D'ailleurs, pour le Spentek pour la pâte, on peut y mettre du texte gris 600, peut-être 400 Ajoutons maintenant un style à la balise de paragraphe elle-même. Nous y mettrons du texte Excel, du texte blanc avec une opacité de 0,8, également un poids maximum élevé car il doit avoir un poids maximum Sinon, cela peut être difficile à lire. et mixdo Menons également détendu pour la hauteur de la ligne et le bas de la marge Nous pouvons maintenant accéder aux boutons correspondant au div qui les tient. Mise en page Flexbox, Gap 24 et centre de justification. Pour l'animation du bouton de mouvement, nous allons mettre Wilho dont nous aimerions augmenter l'échelle de 1,05 Et pour les noms des classes, nous allons mettre les brindilles, première étant pour le rembourrage horizontal second concerne le gris vertical, puis le fond gris 500, arrondissez-le, la police complète, moyenne et survolez le gris de fond, 700 et les couleurs de transition Comme nous utilisons les animations en couleur, cela apportera de la fluidité. Pour le bouton ci-dessous, nous pouvons le copier-coller et le mettre là, et c'est tout. La seule différence, c'est que nous n' y mettrons pas l'arrière-plan, mais uniquement la bordure. Supprimons cet arrière-plan et n'y plaçons que la bordure blanche avec une opacité de 0,2 Nous devons maintenant mettre à jour les couleurs et nous allons également mettre à jour la mise en page pour ajouter la police S et le CSS global. Passons à la mise en page. Ce que nous devrons faire en termes de mise en page, c'est que nous devrons importer ce DMSN depuis Next Font Google Ensuite, dans variable, nous devrons définir son poids et ses sous-ensembles, puis nous l'utiliserons dans un nom de classe dans notre body tech C'est emballer les enfants. C'est notre page. Et nous y mettrons dmsans point Class Name, et il chargera cette police Je mettrais également à jour ces métadonnées. Nous pouvons définir le titre, nom de notre portefeuille et une description. Une fois cela fait, notre police sera chargée. Ensuite, nous allons passer au CSS à points de Globals, et nous ne laisserons que ces trois directives tailwiner, et nous ne laisserons ces trois directives tailwiner, puis la technologie corporelle où nous définirons la fond sur le noir et la couleur du texte Et maintenant, nous pouvons revenir à la section des héros, et là nous pouvons la colorier. Vous pouvez y mettre toutes les couleurs que vous voulez, mais si vous voulez utiliser les miennes, vous pouvez les utiliser comme je l'ai fait. Pour le fond, celui en dégradé linéaire, j'ai remplacé les couleurs grisâtres par des couleurs violettes. Vous pouvez donc utiliser ces codes, et là vous allez définir quelle partie de l'espace de cet arrière-plan doit occuper chaque couleur ? Celui-ci est le plus brillant, vous pouvez donc le voir derrière la planète. Cela produit un effet brillant, puis il devient de plus en plus foncé et se penche sur la couleur noire. Il y a le gradient radial, et c'est la planète elle-même. Vous pouvez voir si je vais y mettre de la couleur blanche, comment la planète va changer. J'y ai donc mis cette couleur violette, et elle redonnera l'effet brillant à la planète. Ensuite, pour la bordure, je vais y mettre une couleur violette un peu différente, puis je vais ajouter 0,3 opacité. Cela façonne donc un peu la forme de la planète. Ensuite, j'ai changé toutes les couleurs grises en violettes, et j'ai également légèrement mis à jour cette couleur pour l'effet brillant qui se cache derrière notre photo de profil. Ensuite, j' abaisse également le chiffre correspondant à la couleur violette de la technologie Spen que nous utilisons sur notre nom de famille La prochaine chose que j'ai faite, c'est que pour le bouton, j'ajouterai un nouvel arrière-plan. Nous allons le changer en dégradé d'arrière-plan à droite. Nous allons le faire en violet. Faisons 700 avec une opacité de 0,8, deux violets avec une opacité de 5 000,6 Voyons maintenant à quoi ressemble le bouton, et peut-être pouvons-nous mettre à jour les couleurs, alors allons-y pour un violet un peu plus foncé. Utilisons simplement 700. Et là, nous opterons pour un modèle plus léger. Utilisons 400. C'est peut-être trop. Utilisons 500. Voyons maintenant à quoi ressemble le bouton. Oui, je pense que c'est bon. De plus, ce que nous allons faire, c'est que le code ne comporte pas de bordure pour la classe tailen Ajoutons-y donc une bordure. Sinon, la bordure violette n'y sera pas active car la bordure elle-même sera absente. Maintenant, ce sera pour la section des héros et nous pouvons passer à la section à propos. 4. À propos: Vous allez évaluer un composant. Nous pouvons commencer par Expo const renvoyer des fragments vides y renvoyer des fragments vides et les mettre à la page 1 à 6. Pour le composant at, nous allons importer Progress, mais nous n'avons pas encore ce composant, comment allons-nous l'obtenir ? Cela vient de Shed CN et nous devrons écrire une commande dans notre terminal NPX Shed CN au plus tard sur Progress Nous aurons Enter et il téléchargera et installera ce composant pour nous. Voilà, oui, nous pouvons choisir New York, deux variables CSS neutres. Là-bas, nous utiliserons la force, ancien homologue Deep et ce sera tout. Nous allons également importer leur image à partir de l'image suivante, et nous pouvons commencer. Nous allons commencer par transformer ces fragments vides en section. Pour la section, nous allons définir l'ID sur about, et nous y définirons également des noms de classes. Nous pouvons faire du texte blanc et Bedding à huit. Dans cette section, nous allons créer le titre deux. Et dans cette deuxième rubrique, nous parlerons de Spen tech M. Pour ce H deux, nous ajouterons le style du texte six Excel, la police, les deux, et la marge au huit inférieur Pour le Spen tact, nous allons changer un peu de couleur. Ajoutons le texte gris 300. Ci-dessous, nous allons créer un div, et pour ce div, nous allons définir une disposition en grille avec trois colonnes de grille, mais c'est suffisant si nous le faisons depuis un écran moyen. Sur l'écran mobile, par défaut, il n'utilisera qu' une seule colonne car il s'agit certainement d'une colonne de grille Nous n'avons même pas besoin de le définir. Faisons également une petite pause à cet égard. Et maintenant, nous pouvons continuer dans cette division. Nous allons créer un autre div. Et dans ce div, nous allons créer le titre trois avec 0.1, arrière-plan. Et dans ce contexte, nous allons également créer une technologie de paragraphe et ci-dessous, nous allons également créer un autre div. Et dans ce div, nous allons effectivement mettre du code. Nous allons donc faire un code tag. Pour cette balise de code, nous allons définir des noms de classes pour la rendre un peu différente. Niveau de texte 200 avec une opacité de 0,5. Pour cette différence, nous allons le faire arrondi en grand, avec quatre lits, une marge jusqu'au bas quatre, bordure et une bordure blanches avec une opacité de 0,2 maintenant au titre trois, ou commençons par ce div qui contiendra ces informations pour le premier bloc de notre disposition en grille. Nous y définirons également le nom de la classe et définirons la bordure, la bordure blanche avec un point d'opacité Nous utiliserons beaucoup cette couleur pour les bordures, arrondies et misons sur six. Il commence à prendre forme maintenant et ce sera encore mieux. Maintenant, pour l'arrière-plan ou pour le titre, nous allons définir le texte sur Excel. Police de caractères, gras et marge jusqu'aux deux derniers. Maintenant, pour ce qui est de la technologie des paragraphes, nous allons définir la largeur du texte avec une opacité de 0,5 et une marge aux six derniers, et je vais maintenant ajouter du texte pour cette section J'y ai mis celui-ci. Je suis un développeur passionné de flutech avec de solides bases en informatique , etc. Ensuite, ci-dessous, il y aura cet extrait de code. Et dans cet extrait de code, nous allons maintenant créer une constante du ciel où nous allons créer un tableau de ce code, où nous allons répertorier nos compétences Nous y mettrons ces panneaux qui seront là pour l'espacement. Si nous ne l'avons pas, vous pouvez voir comment, par exemple, JavaScript se déplacera au début de la ligne. Restons-en là et vérifions également la page. Je vais vous montrer à quoi cela ressemble. Nous ajouterons d'autres blocs, ce qui créera une mise en page courbée où nous mettrons toutes les informations nous concernant. Continuons avec le second. Et pour le second, nous allons commencer en dessous de ce div. Il y a donc la fermeture du premier bloc qui s'y trouvera alors. Nous pouvons également le faire. Là, nous pouvons ouvrir un nouveau fichier et à l'intérieur, nous pouvons commencer. Nous y ajouterons un style, bordure, bordure blanche, 0,2 obésité, arrondie large, et literie à six. À l'intérieur, nous nous occupons de la troisième rubrique avec une expertise du deuxième bloc. Et là, nous mettons pour les classes du texte dans Excel, des polices de caractères à la fois et une marge jusqu'aux deux derniers. En tant que paragraphe, nous y mettons la phrase. Je me spécialise dans le développement applications Web robustes et évolutives. Laissez-moi le formater comme ceci. Nous y ajouterons du texte blanc avec une opacité de 0,5, et nous pourrons passer à y mettre un div, et à l'intérieur de ce div, nous mettrons une image avec notre projet Définissons d'abord leur marge par le haut, bordure relative avec une bordure blanche de 0,2 opacité, arrondie en grand, avec un rembourrage de quatre, puis réglons la hauteur à 220 pixels et le trop-plein Rien ne sort de ce quartier. Formatons-le encore une fois comme ceci et à l'intérieur, nous pouvons mettre l'image et là la source du projet 1 ou du projet 1, puis la mise en page à remplir, puis l'objet ajusté à la couverture. Et pour les cours, nous mettrons des grands arrondis. Maintenant, nous avons une erreur parce que je suppose que nous avons mal mappé notre dossier d'actifs. Maintenant, c'est réglé, et il va enchérir pour le deuxième bloc, afin que nous puissions passer au troisième. Pour le troisième, nous y noterons à nouveau un div. Dans ce div, nous allons créer un titre trois avec 0,3 compétences, puis un paragraphe tech avec une phrase, puis un div qui contiendra désormais deux listes de certaines de nos compétences. Je vais y mettre une phrase. Je maîtrise un large éventail de technologies et je développe constamment mes compétences Ensuite, pour le titre, nous le laisserons tel quel. Nous pouvons vous coiffer. Donc, pour le Div, nous allons ajouter la bordure et la bordure blanches avec une opacité de 0,2, l' arrondir largement et le rembourrer à six comme pour tous nos blocs Ensuite, pour les compétences, nous ajouterons du texte dans Excel, boulon de police et un fond de marge. Et maintenant, au DIV lui-même, nous pouvons ajouter la grille, puis passer à quatre. Nous avons donc un certain espacement entre les deux, et maintenant nous pouvons commencer par un div à l'intérieur de ce creux, nous allons faire le titre quatre pour le front-end et la liste non ordonnée Dans cette liste désordonnée, nous allons créer un élément de liste, et nous y mettrons, par exemple, react On peut y mettre du tapuscrit. On peut y mettre du vent arrière, du CSS ou du frame motion Passons maintenant au style, puis copiez-collez ce di ci-dessous et remplacez-le par le backend. Nous y ajouterons une bordure blanche à deux points pour l'opacité, arrondirons largement et un peu de rembourrage Pour le titre, nous ajouterons du texte gris, 300, une police moyenne et une marge en bas. Pour la liste non ordonnée, nous utiliserons texte large avec une opacité de 0,5, l'espace Y un et le texte petit Maintenant, nous pouvons simplement copier cette différence, mettre en dessous, la changer en backend Et pour les éléments de la liste, nous y mettrons, par exemple, aucun JS, puis nous pourrons faire Python, puis Postgress et AWS À titre d'exemple. Vous allez maintenant consulter la page. Voilà à quoi ressemble le troisième. Maintenant, nous avons deux options. Si nous n'aimons pas la mise en page actuelle, nous pouvons également mettre leurs colonnes de grille. Ce sera donc l'un à côté de l' autre comme ça. Ou nous pouvons, au lieu de cela, placer leur texte au centre. Ce sera donc comme ça. Je pense que je vais le laisser comme du texte au centre, donc il occupe le bloc complet, mais il peut être modifié facilement. Passons aux trois derniers blocs. Cela signifie que nous allons revenir à l'IDE. Nous allons vérifier où se termine ce div, et ci-dessous, nous en ouvrirons un nouveau. Dans cette nouvelle section, nous allons présenter des classes de mise en page en grille. Nous serons assis sur les deux colonnes de la grille d'écran de taille moyenne, l'écart allant de huit à huit et la marge supérieure à huit. Ensuite, à l'intérieur, nous allons créer un autre div. Nous avons la largeur de la bordure avec 0,2 d'opacité, arrondie et la largeur de la bordure est de six À l'intérieur, nous allons créer à nouveau un div, ce div contiendra un autre div. Adare l'espace Y quatre. Nous avons un certain espacement entre eux et nous aurons un div qui contiendra une étiquette Front end et progression, c' est-à-dire la barre de progression ou le composant het CN que nous y avons importé. Nous y attribuerons une certaine valeur aux progrès réalisés. Je vais y mettre 90 pour 90 %. Pour le nom de la classe, je vais définir un arrière-plan gris, 300 avec 0,2 d'obésité, et pour la couleur de la barre de progression, nous utiliserons la syntaxe TilIntSS qui touchera un élément div enfant direct Nous vous y retrouverons donc avec un fond gris supérieur à DI 100 avec une opacité de 0,8 Nous devons également clôturer cette progression. Maintenant, tu vas l'enregistrer. Et si vous consultez notre page, la barre de progression ressemblera à ceci. Nous allons maintenant le copier et le coller deux fois de plus. Nous allons modifier les valeurs de la barre de progression et des libellés. Le deuxième, je m'occuperai du back-end, le troisième, du DevOps. Pour la progression du backend, je vais mettre 85 % pour le DevOps, je peux en faire 75. Par exemple, nous ajoutons désormais un titre sous ces barres de progression avec un paragraphe et je vais mettre la quatrième approche par blocs. J'y mettrai ces classes comme pour les titres et paragraphes précédents avec également une opacité de 2,5 % sur la largeur du texte Je crois en l'écriture d'un code propre et maintenable et en suivant les meilleures pratiques, quelque chose comme ça C'est maintenant l'heure de la cinquième Div. Créons-la ci-dessous. Div où nous pouvons ouvrir un autre DIV et y mettre juste une image. Et nous indiquerons la source du projet deux, puis la mise en page en cas d'échec, l'objet adapté à la couverture et le nom de la classe arrondi en gros. Maintenant, nous devons également ajouter un style pour les deux différences d'emballage. Mettons leur bordure blanche, pointons du doigt l'obésité, arrondies et larges, couchettes jusqu'à six. Ensuite, pour le div intérieur, nous allons définir une certaine hauteur. Faisons 200 pixels. Débordons cachés, Bedding à quatre, nous pouvons ajouter une bordure supplémentaire et nous définissons également la classe relative, enregistrez-la Maintenant, cela ressemblera à ceci et nous devrons apporter quelques corrections. Mais d'abord, finissons-en avec le div suivant et le dernier bloc. Créons un div qui aura un titre de trois paragraphes, mon objectif est de continuer à grandir en tant que développeur. Encore une fois, pour le titre trois, nous ajouterons quelques classes comme text to Excel, phone both et margin bottom six. Voyons maintenant où nous devons corriger sur notre page. Et je pense que je vois le problème. Ce que nous devons faire, c'est mettre cinquième bloc et augmenter ce bloc avec ce contenu également. Nous allons maintenant le formater. Allons voir les développeurs. Cela devrait être comme ça. Sauvegardons-le. L'autre point que nous devons corriger est que nous allons utiliser cette balise de fermeture de cette division pour la grille qui contient la grille qui actuellement uniquement les devops du front-end, le backend, la barre de progression, et nous allons prendre la balise de fermeture de cette div, couper, et nous la placerons après la balise de fermeture du div qui contient ces objectifs Donc, ici et maintenant nous devons prendre l'une des dernières différences en bas, et nous devons en fait la placer au-dessus de ce div qui définit cette disposition en grille Nous allons le mettre là. Nous allons maintenant obtenir une page comme celle-ci. Permettez-moi de vous le montrer dans le navigateur que j'utilise pour le contrôle de réactivité Voici donc à quoi cela ressemblera sur la version de bureau. Et voilà, à quoi ressemblerait la version mobile ? Nous ajoutons maintenant des couleurs à notre section À propos. Cela signifie que nous passerons à l'IDE, et là, si vous faites la suture F et que vous y trouvez une couleur grise, vous pouvez la remplacer par une couleur probablement violette car pour couleur probablement violette car les couleurs que j'ai créées dans la section héros, nous devrons les aligner. Cela signifie que nous devons remplacer ces couleurs grises par des couleurs violettes. Si vous ne souhaitez pas utiliser l'outil de remplacement pour toutes les couleurs de gris, vous pouvez simplement les vérifier manuellement voir s'il est possible d' ajouter une couleur grise à un endroit que vous ne souhaitez pas remplacer. Sinon, remplacez simplement ces couleurs grises par des couleurs violettes. Maintenant, il n'y a plus de couleur grise, si vous l'enregistrez et vérifiez la page, elle ressemblera à ceci. Nous pouvons également vérifier à nouveau sa réactivité avec les couleurs. Vérifions-le pour mobile. Une autre correction que nous allons apporter à notre section À propos est de le supprimer tel quel dans GAPD car il s'agissait d'une Maintenant, avec Gabbid, cela fonctionnera, et cela fera l'espacement entre les blocs de la première rangée Et ce sera pour la section A. Nous pouvons maintenant passer à la suivante, qui sera l'animation du logo. 5. Animation de logo: allez créer le composant d'animation du logo dans des composants, puis vous l'importerez sur la page Vous allez créer le composant d'animation du logo dans des composants, puis vous l'importerez sur la page T six de la page d'accueil. Nous pouvons maintenant passer au codage du composant d'animation du logo. Pour l'animation du logo, nous déclarerons d' abord utiliser le client pour ce composant, car nous aurons leurs mises à jour dynamiques de l'interface utilisateur pour l'animation infinie du logo. Nous allons poursuivre les importations. Lors des importations, nous allons importer l'image à partir de l'image suivante, puis le mouvement à partir du cadre ou du mouvement et en dessous les images des actifs. Si vous n'avez pas encore la bibliothèque d'images ou de mouvements, vous allez ouvrir le terminal et exécuter NPMiFramr Alors ça marchera. Nous allons continuer avec la création d'un tableau qui s' appellera images. Et à l'intérieur, nous aurons la source et la source de l' image importée que nous avons là, qui ne sera que le nom du logo. J'ai déjà mangé du figma. Maintenant, j'ai l'uremi pour que cela puisse être corrigé. Dans l'animation du logo, nous commencerons par un div et à ce div, nous ajouterons un rembourrage vertical à huit, arrière-plan que nous pourrons modifier ultérieurement ou mettre à jour pour adapter notre design Nous allons également définir l'opacité à 0,8, ce qui signifie que nous n'avons pas nécessairement besoin d'appliquer l' opacité de 0,1 à notre couleur Nous allons continuer avec un autre div et ce div aura une classe de container et mix auto pour le centrer. Ensuite, à l'intérieur, il y aura une autre avec une classe de débordement masquée et une autre classe qui créera l'effet selon lequel l' animation de notre logo s'estompe depuis la gauche et réapparaîtra à l'écran sur la droite avec le réglage d'un transparent Vous verrez l'effet juste après avoir ajouté les éléments eux-mêmes. À l'intérieur de ce div, nous allons ajouter un div de mouvement pour l'animation. Nous y définirons quelques classes de longueur de queue pour la mise en page Flexbox, écart à 14, le flex à zéro et la literie à droite à Nous allons ajouter l' animation pour traduire X -50 % pour définir les propriétés de l' animation Cela signifie que cette propriété d'animation déplacera le contenu horizontalement et -50 % signifie qu'il se déplacera vers la gauche de la moitié de sa largeur, ce qui créera un effet de défilement continu lorsqu'il est combiné répétition infinie de la propriété de transition que nous avons juste en propriété de transition que nous avons Nous y avons également fixé la durée à 35. Maintenant, comme mentionné, la répétition à l' infini est linéaire et de type boucle de répétition. Peut-être vous demandez-vous également pourquoi nous avons autant d'éléments et d' éléments dupliqués dans notre gamme d'images. C'est parce que nous avons besoin de nos logos, d'une largeur spécifique. S'il n'y a que quatre objets, nous ne pouvons pas rendre cette boucle infinie car il n'y aura quatre objets qui circuleront et il semblerait qu'il n'en manque que quelques. C'est pourquoi nous pouvons simplement dupliquer ces éléments, disons, deux fois, et cela créera cette animation en boucle infinie. Si vous avez autant de logos que vous souhaitez saisir dans cette animation de logo, vous n'avez pas besoin de le dupliquer. À l'intérieur, nous effectuerons le mappage sur le tableau d' images où l' image est l'élément actuel du tableau et l'index sa position. Ensuite, nous ajouterons la balise image, et nous définirons la clé comme index, la source comme source de points d'image, ancienne telle que imagée que nous avons dans notre tableau Et aussi de la hauteur jusqu'à la salissure. Nous allons l'enregistrer et nous verrons que le composant fonctionne désormais. Vous pouvez également y voir le transparent de gauche à droite et voir comment cela donne l' impression que l'animation s'estompe vers la gauche et apparaît lentement depuis le côté droit Pour vérifier cette réactivité, en gros, il n'y a pas grand-chose à vérifier Sur le petit écran, il affichera simplement moins de logos en même temps. Maintenant que nous l'avons, nous allons prendre ce nous allons prendre ce composant d'animation du logo et placer entre la section héros et la section à propos. Ouvrons maintenant le composant, et nous y mettrons la marge Y 224. Cela signifie que nous allons créer un espacement vertical supplémentaire autour de l' animation de notre logo De plus, ce que nous pouvons faire là-bas, c'est augmenter cette couleur violette à, disons, 300 et maintenant nous pouvons consulter la page. Et nous aurons l'animation de leur logo comme celle-ci. Si vous voulez que cela soit un peu différent, vous pouvez ajouter le Y trois oblique, par exemple, l'enregistrer, puis l' animation du logo ressemblera à ceci Si tu veux le mettre d'un autre côté, mettons le tiret, enregistrons-le, et ça changera. Mon option serait donc sans biais, puis nous pourrons passer à une autre section, qui sera un portfolio. 6. Le portfolio: Nous allons créer un composant de portefeuille et mettre sur notre page d'accueil sous le composant à propos. Nous allons d'abord activer les fonctionnalités côté client avec use client. Ensuite, nous allons importer React et utiliser State Hook avec use effect hook, puis nous importerons l'image de l'image suivante. Nous allons importer les images du projet à partir du dossier Assets que nous allons afficher. Je vais créer des projets const, et pour chaque projet, je vais créer un identifiant Je vais créer ici. Je vais créer un titre. Je vais créer une courte description, et je vais également mettre l'image. Maintenant, ci-dessous, je vais ajouter d'autres projets, et cela ressemblera à ceci. J'utiliserai trois projets dans le volet portefeuille. J'initialiserai l'état des projets sélectionnés en passant au premier projet Nous allons donc faire des projets et être les premiers dans le tableau avec zéro. Ce sera la variable d'état, et avec elle, nous la définirons. Maintenant, nous pouvons passer directement au retour. Nous allons commencer par la section. Dans celui-ci, nous pouvons faire l'identification du portefeuille. Dans le nom d'une classe, nous allons faire PY 32 et texter en blanc. Dans cette section, nous allons commencer par le titre deux. titre deux contiendra le titre des projets sélectionnés. Nous pouvons mettre les projets dans Spen tech au cas où nous voudrions y ajouter une couleur différente De plus, pour le style du titre deux, nous allons utiliser le texte six Excel, boulon de police et la marge du bas à dix. dessous de cette deuxième rubrique, nous allons cartographier le tableau du projet pour créer les éléments du projet. Je vais faire des projets point Map. Le nom de l'élément dans l' itération sera project. Là, nous pouvons ouvrir notre recherche dans ce div, nous allons définir une clé comme identifiant de point du projet. Nous allons définir la fonction onclick. Et la fonction onclick sera le réglage de la variable d'état Nous y définirons le projet sélectionné. Pour projeter. Nous allons maintenant faire des cours de fin de gamme. s'agira du curseur, du pointeur, de la marge vers le bas et du groupe. Nous allons continuer à afficher le projet ici. Nous allons faire la technologie des paragraphes avec le point du projet ici. Nous allons maintenant y ajouter un style et ce sera une couleur de texte différente. De plus, le texte est grand et la marge en bas et en dessous, nous pouvons continuer avec le titre trois. Ce titre trois contiendra le titre du projet à point. Le style que nous y ajouterons sera Excel sans texte, police semi-boulon, groupe, notre texte gris 400, couleurs de transition, durée, 300, et nous allons le faire encore une chose. Remettons là des guillemets avec les bretelles bouclées. Parce qu'à l'intérieur, nous allons vérifier si ce projet est celui sélectionné, et si oui, nous allons afficher la couleur différente du texte. Faisons en sorte que l' ID de point du projet sélectionné soit égal à la vérification de l'identifiant du projet, opérateur Turner , et si oui, nous ferons le texte gris 200 dans le cas contraire, nous ne ferons rien. La fausse position sera donc vide. Nous utiliserons des couleurs de transition car elles permettront une transition fluide, spécifiquement pour les propriétés liées aux couleurs. Donc, comme nous utilisons ce groupe, ce sera pratique. Maintenant, nous pouvons déjà voir sur notre page que nous arrivons quelque part, et nous allons maintenant continuer à afficher la ligne de séparation au cas où le projet serait sélectionné Je vais m'occuper de leur condition. Ce point ID est donc égal à l'identifiant du projet, essentiellement le même que celui que nous avons utilisé là-bas, mais nous n'avons pas besoin d' utiliser un opérateur de rotation. Nous ne ferons que du rendu conditionnel. Donc, au cas où cela serait vrai, nous afficherons un DIV vide. Et à ce div, nous ajouterons classe border bottom two avec border grey 200 et aussi MI, marge verticale à quatre. Vous pouvez maintenant voir sur notre page que nous avons sélectionné le premier projet qui s'y trouve. Si je mets le deuxième ou le troisième, il bougera. Un autre rendu conditionnel que nous allons faire, nous pouvons donc simplement le copier-coller il figurera sur la description du projet. Si le projet est sélectionné, nous vous montrerons la description du projet. Je vais simplement ouvrir ce div, y mettre la description du point du projet, et je vais changer cette balise div en balise de paragraphe. De plus, je vais ajouter des classes un peu différentes. Je n'ai pas besoin de la frontière. J'ajouterai du texte gris, 400, une transition de toute durée, 500 et un assouplissement pour que l'affichage soit fluide. Nous allons maintenant faire défiler la page en haut de cette déclaration, et là, dans la section, nous allons créer un div et nous allons enrouler ce div autour de ce mappage. Maintenant, pour ce div, nous allons ajouter quelques classes. Commençons par une largeur maximale de sept Excel, puis mélangeons Audio, px quatre, ça devrait être tout pour le moment. Nous allons nous déplacer vers le bas et en dessous de cette division. Nous y mettrons une balise d'image à l'intérieur de cette balise d'image. Nous allons définir la source sur le point d'image à points du projet sélectionné SRS. Pour tous, nous choisirons le titre à point du projet sélectionné. Pour le nom de la classe, nous allons l'arrondir, Excel, ombre large, opacité de transition, durée 500 et ceci pour créer une animation fluide De plus, nous réglerons la largeur à 800 et la hauteur à 450. Nous allons le sauvegarder. Maintenant, ça devrait aller. Maintenant, nous devons jouer un peu avec les différences qui s'y trouvent. Permettez-moi d'ajouter le div supplémentaire pour regrouper les informations de projet que nous y avons créées. Passons maintenant à la deuxième division. Nous ajouterons des classes de disposition en grille, et sur grand écran, nous utiliserons deux appels de grille avec Gap 212. Maintenant, cela devrait prendre cette division et, bien sûr, la clôture de la deuxième division que nous allons mettre ci-dessous. Maintenant sur la page, tout ira bien. Maintenant, nous allons également formater le code. Vous verrez mieux la structure de la division. Cela devrait aller encore plus loin. Cela devrait également aller encore plus loin, nous allons le déplacer, et cela devrait aller. Nous commençons donc la section technique, en continuant avec DIV. Dans ce div, nous avons un div qui contient les informations du projet ainsi que l'image avec le projet lui-même. Et maintenant, nous allons également le changer en une couleur différente ou en la couleur de votre choix. Alors, sortons un violet. Passons ensuite à une autre couleur grise où nous voulons la modifier. Ce sera ça pour moi. Voyons maintenant à quoi cela ressemblera, et je ne veux certainement pas y changer une seule couleur grise, et ce sera celle avec la description. Alors laissez-moi vérifier lequel c'est, et c'est celui-ci, celui-ci devrait rester gris. Ensuite, nous pouvons consulter la page. 7. Métriques clés: Nous allons maintenant passer à la création d'un composant matriciel clé. Cela signifie qu'il faut le créer là, puis l'importer dans HT six comme pour chaque composant, puis l'importer dans HT six comme pour chaque composant, et passer au codage. Nous allons commencer par déclarer utiliser le client pour indiquer que ce composant utilisera les fonctionnalités du site en ligne. Ensuite, nous importerons React et Motion, puis utiliserons et visualiserons depuis la bibliothèque de mouvements Framer Et nous allons définir un tableau d'objets métriques, chacun contenant des informations sur une métrique spécifique. Et à l'intérieur, nous commencerons par le premier élément qui aura un identifiant, une valeur, une étiquette et une description. Maintenant, je vais ajouter quelques éléments métriques supplémentaires. Tu peux t'inspirer. J'ai plus de cinq ans d'expérience, plus de 50 projets terminés, 50 projets terminés, puis la qualité du code et les commentaires sur Github Dans le composant des métriques clés, nous allons commencer par créer un R que nous utiliserons dans View Hook. Nous allons créer un tour en utilisant le crochet de rotation réactif qui sera attaché à l'élément de section. La référence est saisie en tant qu'élément HTM, car elle sera utilisée sur la balise de section valeur initiale est nulle car la référence n'a encore été attachée à aucun élément et cette référence sera utilisée avec viewHok pour détecter le moment où la section entre dans la fenêtre Ensuite, nous utiliserons le hook us in view pour déterminer si le composant se trouve dans la fenêtre d'affichage Nous utiliserons l'arbitre et ceux en cas de chute. La référence est la référence à l'élément que nous voulons observer et une fois fausse, cela signifie que nous allons configurer que le crochet suivra en permanence la visibilité de l'élément. En retour, nous allons créer une section dédiée aux mouvements. Nous y définirons la référence, l'état initial sera invisible et 50 pixels en dessous. Animate utilisera un opérateur dix et vérifiera si cela est vrai dans la vue Je vais régler la visibilité ou l'opacité sur un et dernier état Et si c'est faux, il le définira sur invisible, avec une opacité nulle, et encore une fois, sur 50 pixels en dessous. La durée de l'animation sera de 0,8 seconde, et les classes sont un conteneur et un mélange pour centrer le conteneur car le conteneur a une certaine largeur, puis un peu de literie et du texte en blanc. Nous allons ajouter le mouvement H deux pour l'utiliser comme titre des indicateurs clés. L'état initial sera l' opacité zéro et Y 220. Animate utilisera à nouveau l'opérateur Turno en position réelle visible en position forcée invisible, transition avec un délai de 0,2 seconde et une durée de 0,6 Et pour les noms de classe, nous définirons la taille du texte à texte, six , Excel, la police en gras et la marge aux 12 derniers. Nous allons continuer avec une autre profondeur qui utilisera une disposition en grille. Nous allons définir les colonnes de la grille pour le moyen et le grand écran. Et nous y fixerons également un écart de huit. Il y a donc un certain écart entre les éléments. À l'intérieur, nous allons commencer par le mappage du tableau matriciel. métrique sera le nom de l'élément et indexera la position. Nous allons créer le disque de mouvement et la clé sera l'identifiant du point métrique. Nous allons définir l' état initial, et aussi, encore une fois, nous allons définir l' animation dans laquelle nous utiliserons l'opérateur de rotation, comme avant, car nous aimerions déclencher cette animation encore et encore chaque fois que nous l' aurons dans la fenêtre d'affichage Transition Pour que toutes les métriques soient affichées à un moment différent, nous ajouterons également une nouvelle valeur d'indice, et nous la multiplierons. Cela signifie que chaque indice aura une valeur plus élevée, ce qui créera un effet de vague où le premier indice sera affiché plus rapidement que le précédent. De plus, il utilisera une disposition flexbox avec un volume de direction flexible pour placer les éléments les uns en dessous des autres Ensuite, nous allons créer le titre trois. Dans cette troisième rubrique, nous allons afficher la valeur du point métrique. Nous allons définir l'animation et la transition initiales exactement comme je l' ai indiqué dans le Div ci-dessus Et les noms des classes, nous y définirons pour notre valeur métrique un texte de cinq Excel, boulon de police et un peu de couleur. Nous avons également défini les deux derniers de la marge. dessous de ce titre, nous allons passer à la motion B pour la technologie des paragraphes. Nous allons définir l'étiquette à points métriques. Encore une fois, nous allons définir l' animation et la transition initiales, et les noms de classe seront le texte Excel, police semi-volte et la marge inférieure deux Ensuite, nous allons créer un autre point de mouvement B pour la balise de paragraphe qui contiendra la description du point métrique. Nous pouvons simplement le copier-coller et modifier les classes de vent arrière pour Text Gray 400. Ce sera pour nos indicateurs clés Et pour les couleurs, ce sera simple. Encore une fois, nous allons simplement le changer pour un titre violet, l' enregistrer, et nous pouvons également changer le titre pour un titre violet. En fait, celui-ci devrait rester gris car c'est un texte. Celui-ci doit être violet. Et pour la matrice clé, on peut la laisser blanche. Il n'y a donc pas de couleur violette partout sur notre page. 8. Pile: Passons maintenant au composant stack, nous allons à nouveau créer SC DTS six dans components et l'importer dans notre page DTS six, et nous le placerons sous la section portfolio Pour le composant stack, nous allons effectuer ces importations. Si vous n'avez pas encore ces bibliothèques, ouvrez un terminal, faites NPM, I, et copiez-y ces bibliothèques Par exemple, cet observateur d' intersection React. Que nous utiliserons pour que l' animation réapparaisse pour obtenir en utilisant la vue lorsque nous ferons défiler la page vers le haut ou vers le bas, cette animation de pile réapparaîtra Puis le mouvement du cadreur. Encore une fois, si vous ne l' avez pas encore, suffit de NPM, moi et mettez-le là, icônes de réaction. Nous pouvons également y mettre. Cela signifie que nous aurons accès à ces bibliothèques avec les icônes que nous utiliserons pour notre pile. Maintenant, si nous essayons et que nous installons les bibliothèques, je les ai déjà, mais je peux juste recommencer. Maintenant, avant de définir le composant de pile, nous allons y créer un tableau d'éléments de pile. Avec des objets C Stack. Et là, pour chaque article, nous aurons un identifiant, puis un nom. La première sera le cadreur, puis l'icône, la première icône sera le cadreur avec une taille allant jusqu'à 100 Ensuite, pour ce qui est de la couleur, je peux rester là pour l'instant en texte vert 200, puis nous pouvons mettre la virgule et la coller autant de fois que nous le voulons Je vais mettre à jour les noms et les icônes, et j'ai également sélectionné des icônes différentes pour les quatre autres icônes car il y avait des icônes réservées. Nous allons maintenant utiliser Framer Figma, React Note, Mongo Di B Ensuite, nous allons passer en dessous, et là nous allons commencer à définir des variantes d'animation pour les éléments de la pile. Je vais commencer par la variance de Cs ou la variance d'article, et là je mettrai la variante pour hidden qui prendra le numéro d'index, et là, l' opacité sera nulle et pour X, nous prendrons le reste de l'index, et si c'est zéro, alors ce sera -100 position vraie et en fausse position, ce sera C'est ce qu'on appelle l'opérateur Turner. Nous ferons ainsi en sorte que les éléments de la pile partent de gauche et de droite selon que c' est vrai ou faux. Ensuite, ci-dessous, nous en aurons un autre qui sera visible entre guillemets. Et pour celui-ci, nous allons régler l'opacité à un, X à zéro et passer à la durée trois J'ai commencé avec le mauvais support Je dois en faire un à Carl. Changeons-le pour le carré, et ci-dessous, nous pouvons commencer à définir le composant de la pile lui-même. À l'intérieur, nous allons commencer par configurer les commandes d'animation. Je vais effectuer des contrôles constants, et j'utiliserai l'animation. Ensuite, nous allons configurer l'observateur d' intersection. Cela signifie que nous allons maintenant régler le problème, nous l'y importons. Et avec cela, cette animation réapparaîtra lorsque nous ramènerons ce composant dans notre fenêtre d'affichage Là, je vais faire une constante, et j'utiliserai le ref et in view pour utiliser in view. À l'intérieur, je vais faire le seuil 2.1. Ensuite, je vais continuer à définir le crochet d'effet Use pour déclencher l'animation en fonction de l'état de la vue. Je vais utiliser l' effet puis à l'intérieur, je vais le conditionner, et si c'est le cas, nous ferons des contrôles qui commencent par visible. Et si ce n'est pas visible, je vais faire des contrôles qui commenceront par être masqués. Quelles sont ces deux variantes d' articles ? Ensuite, nous y dirons que cet effet s'exécutera chaque fois que les contrôles seront en vue, les dépendances changeront. Cela signifie qu'il déclenchera le démarrage de l'animation lorsque les composants seront visibles, et qu'il arrêtera également l'animation lorsqu'elle sortira de la vue. Là, nous allons créer une balise de section et à l'intérieur de cette balise de section, nous allons commencer par Div et laissez-moi vous expliquer pourquoi je fais la balise Div supplémentaire et non dans la section. Pour ce div, je souhaite définir un poids maximum. Pour l'instant, nous allons faire quelque chose comme 250 pixels parce que nous voulons simplement que ce soit vertical, pas horizontal, mais nous pouvons également l'ajouter plus tard, le changer en horizontal et le configurer pour mélanger Ado avec le texte au centre. Nous avons donc ce centre. Pour la section. Si je veux mettre un arrière-plan spécial pour la section, peut-être un dégradé linéaire, je pourrais le faire là, et ce sera sur toute la largeur. Par exemple, arrière-plan sur fond blanc. Nous devons y mettre du contenu. Et permettez-moi d' y mettre du contenu et de mettre leur arrière-plan en vert. Vous allez maintenant voir les différences. Si je vais sur notre page, vous pouvez voir que le fond blanc cette balise de section d'emballage occupe toute la largeur et que le contenu que je souhaite utiliser avec ce fond vert se trouve à l'intérieur, et il a ce poids maximum que j'ai fixé à 250 pixels et que je l'ai centré. Si je veux le faire dans la section d'emballage, il faudra la section murale et le fond réel que je souhaite avoir ressemblera à ceci. Permettez-moi alors de l'utiliser comme ça. Pour l'instant, débarrassons-nous des arrière-plans. Là, je peux commencer par le titre deux. Dans le titre deux, je vais mettre ma pile. Ci-dessous, je vais faire une plongée. Et dans ce div, je vais itérer sur les éléments de la pile Dans cette itération d' éléments de pile, je vais faire une division de mouvement. Et avant de commencer à faire ce div, je vais juste styliser le titre et le div qui l'enveloppe. Pour ma pile, j' utiliserai le texte sept, Excel, le texte gris, 200, le boulon de police et une marge vers le bas. Pour ce div, je vais simplement utiliser disposition en grille et passer à huit par défaut. Il n'y en aura qu'un seul sur le réseau. Cela signifie que tous ces écarts de mouvement seront placés les uns en dessous des autres et qu'ils se trouveront dans une seule colonne Voyons à quoi cela ressemblera. Mettons simplement en mouvement div l'ID du point d'index. Pour la valeur clé, puis pour la valeur personnalisée, nous allons mettre un index. Dans un premier temps, cela sera masqué. Et bien sûr, pas l'identifiant de l'index, mais l' identifiant du point de l'article. Ensuite, nous allons continuer à animer deux contrôles, puis des variantes aux variantes d'éléments . Et pour le nom de la classe, nous définirons le fond blanc à 0,1 opacité Nous allons continuer avec la disposition de la boîte flexible et centrer avec le centre de justification et les éléments à centrer horizontalement et verticalement Ensuite, flex raw, ce qui signifie que les éléments situés à l'intérieur du rigide seront côte à côte. Ensuite, nous utiliserons un Excel arrondi, une ombre large, un peu de literie. Et sur Her, nous pouvons simplement faire de l'ombre à Excel. Maintenant, dans ce mouvement dip, nous allons créer un div pour l'icône. Nous y ferons une icône en forme de point. Nous pouvons y ajouter un peu de classe, et à l'intérieur, je vais faire leur marge inférieure et le signe du dollar, la couleur du point m. Cela signifie qu'il y définira nom de classe de la couleur du point de l'article, et nous y avons défini le texte vert 200. Ensuite, nous avons l'icône elle-même, et ci-dessous, nous allons faire le texte où nous allons afficher le nom du point m. Là, je vais faire du texte blanc avec une opacité de 0,2, du texte trois Excel, le transformer et le faire pivoter de 90 degrés. Maintenant, pour la plongée qui termine cette itération, je vais mettre la référence sur rev . Cela signifie que cela permet à notre animation de savoir quand ce conteneur est visible à l'écran Nous pouvons voir l' animation, comment elle se déroule. Il y a juste une chose que je dois corriger. nous manque t pour notre rotation de -90 degrés et je vais l'actualiser Vous pouvez voir comment fonctionne l' animation. La seule chose que nous allons changer pour les couleurs de notre pile est changer la couleur des icônes des éléments de cette pile de tableaux. Je mettrai leur violet pour chacune des icônes. Alors je vais le sauvegarder. Et sur la page, ça ressemblera à ça. Et si vous souhaitez répéter l'animation, nous allons simplement nous éloigner de la section. Nous y retournerons et nous pourrons voir l'animation passer en douceur à son état final 9. Services: Créons maintenant un autre composant qui sera services.t6 Nous allons à nouveau modifier notre page.t6, et nous allons passer au codage Pour le composant services, nous allons créer à l'intérieur du composant un ensemble d'objets de service contenant les informations sur chaque service que nous aimerions offrir. Chaque objet aura une propriété d'identifiant, de titre et de description. Faisons leurs services constants. Et à l'intérieur, nous pouvons faire le premier élément où nous définirons l'identifiant, puis le titre et aussi la description. Maintenant, je vais ajouter d'autres services, et au final, le tableau ressemblera à ceci. En retour, au lieu des fragments vides, nous créerons une balise de section, et à l'intérieur de la section, nous ajouterons d'autres éléments. Pour la section elle-même, nous utiliserons le nom de classe du texte blanc et du PY 20. Pour y avoir un peu de literie verticale, nous allons ajouter une division, et nous y ajouterons des classes de vent arrière avec conteneur, et nous mélangerons Auto pour le centrage et la disposition Flexbox pour utiliser Flex Direction Colume pour placer nos articles les uns en dessous des Sur un écran moyen et supérieur, nous définirons la ligne de direction du flex. Cela signifie que les objets seront côte à côte. Ensuite, nous ajouterons deux divs. L'un portera sur le titre des services et le second sur les éléments de notre gamme. Le premier jour, les classes d'écran moyen au-dessus utiliseront un quart de largeur, rembourrage à droite sera réglé sur huit, marge vers le bas sera réglée sur 12 et sur l'écran moyen, nous remettrons cette marge du bas à zéro À l'intérieur, nous allons faire le titre deux avec les services et nous y définirons du texte, six boulons supplémentaires ExxcelFont, une position adhésive et le top 20, position où vous souhaitez Que signifie « position collante » ? Cela signifie que chaque fois que nous faisons défiler la page, l'en-tête des services défile avec nous. Nous ajouterons un autre div, et nous resterons là pour un écran moyen au-dessus de 75 % de largeur. À l'intérieur, nous allons commencer à cartographier la gamme de services. Là, l'article sera servi. Nous n'avons pas besoin d' utiliser l'index car nous utiliserons l'ID de service comme clé. Et pour le nom de la classe, nous utiliserons la marge inférieure à 16 et disposition flexbox pour utiliser le début des éléments , car nous aimerions y aligner nos éléments Ensuite, nous ajouterons deux autres difs. L'un servira à contenir le numéro, qui sera l'identifiant, et le second à contenir les deux autres champs, le titre et la description. Pour le premier dif, nous utiliserons boulon de police de 200 couleurs, texte Excel de cinq et une marge allant de droite à six Pour la deuxième division, nous n'avons rien à faire. Dans le premier div, nous ajouterons également un numéro de point de service. Maintenant, si nous voulons l'enregistrer, vous pouvez voir que nous avons leurs numéros pour tous nos services. Ce qui reste, c'est que dans la deuxième division, nous ajouterons les deux autres champs, puis la section ressemblera à ceci. Pour le titre 3, nous avons défini le titre du point de service, et pour la technologie du paragraphe, nous avons défini leur description du point de service. Pour le titre, nous ajoutons également ce texte dans Excel, à partir du boulon et de la marge situés en bas. Et ce que nous devons également faire, c'est prendre ce tableau et le mettre en dehors de la définition du composant car nous voulons éviter de le recréer à chaque rendu. Maintenant, voici à quoi ressembleront ces services sur d'autres appareils, et ce sera tout pour ce composant. Jouons avec les couleurs. Donc pour la description, nous allons laisser une couleur grise. Pour l'identifiant, nous allons mettre une couleur violette et ce sera tout, et nous arrivons à la fin de ce portfolio, et ce sera une section de contact avec le pied 10. Contact: Créons maintenant également un contact et un pied de page. Ajoutons-le ensuite à la page. Maintenant, nous pouvons continuer à le coder. Nous allons commencer par déclarer que ce composant est un client d'utilisation pour les effets de survol interactifs, les déclenchées par port ou les animations de mouvements d' images Nous importons également le mouvement à partir du mouvement du cadreur. Si vous n'avez pas encore cette bibliothèque, ouvrez un terminal, faites NPM I frame motion, entrer, et que nous l'installons Juste à côté du composant , nous allons commencer par une section. Et à cette section, nous ajouterons l' identifiant du contact, et pour les classes, nous ajouterons un rembourrage vertical à 32 caractères blancs, et nous allons faire en sorte que cette largeur maximale soit de 1 200 pixels avec un mixdo pour la centrer Nous y ajouterons également un rembourrage vertical à quatre. Nous allons commencer par le premier mouvement dip. Ce mouvement dip débutera de manière invisible à 20 pixels en dessous de la position finale. Pendant que cela sera visible, il s'animera jusqu'à ce qu'il soit complètement visible et en position finale L'animation prendra 0,8 seconde, nous allons donc régler la durée à 0,8 pour effectuer la transition. Cela ne s'animera qu'une seule fois lors du défilement dans la vue. Cela signifie que nous définirons la fenêtre une fois vraie. Pour le nom de la classe, nous allons définir une disposition en grille, et sur grand écran, nous utiliserons deux colonnes de grille et nous fixerons cet écart à 16. Dans ce mouvement dip, nous allons créer un autre div et pour les éléments à l'intérieur, nous utiliserons l'espace 12. Cela signifie qu'il y aura un certain espacement entre eux. Nous allons créer un mouvement H deux, où nous allons définir les animations. Nous allons commencer par l'initiale. Cela commencera de manière invisible et 20 pixels à gauche de la position finale. Pendant que cela sera visible, nous le rendrons visible, et pour la transition, nous réglerons l' animation pour qu'elle et pour la transition, dure 0,6 seconde avec un délai de 0,2 seconde. Pour les classes, nous allons définir la taille du texte sur sept Excel, police sur les deux et le gris du texte sur 300. À l'intérieur, nous saisirons le titre « entrer en contact » et le mot tactile que nous mettrons dans le Spentex pour le mot tactile et la balise span, nous ajouterons une couleur de texte différente Je vais maintenant mettre le texte 500 en gris. Nous allons passer à une autre division de motion. Ce mouvement div débutera avec une opacité nulle. Cela signifie qu'il démarrera de manière invisible et qu'il restera 20 pixels à gauche de la position finale. Pendant que cela sera visible, nous allons le rendre visible en réglant opacité sur un et pour la transition, cela prendra à nouveau 0,6 seconde avec un délai de 0,4 Pour les classes finales, nous utiliserons la couche huit, arrondirons à Excel et l'espacerons Y huit. Cela signifie que nous allons à nouveau créer de l'espace entre les éléments que nous aurons présents dans ce motion diff Et ce que nous y aurons, nous aurons essentiellement les coordonnées, et la première portera sur le numéro de téléphone portable. Nous aurons leur technologie de paragraphe de téléphone et leur technologie d'ancrage du numéro lui-même. Pour le div, nous utiliserons à nouveau l'espace par deux pour avoir leur espacement entre la technologie du paragraphe et la technologie d'ancrage Nous définirons la taille et couleur du texte pour la technologie du paragraphe, puis pour la technologie Anchor, nous réglerons HF sur le nombre réel des classes. Nous ajouterons du texte à Excel, un semi-bot téléphonique, une couleur différente au survol et une durée de transition de 300 Également une mise en page Flexbox avec des éléments pour le centrer et Gap 22. Ensuite, nous avons également Spentec car nous aimerions ajouter une flèche à côté de ce numéro à des fins de style Nous pouvons y définir une couleur pour la flèche, et ce sera tout. Ci-dessous, nous allons continuer avec une autre division. Dans cette section, nous conserverons le courrier électronique. Ce sera essentiellement le même style que celui que nous avions sur le mobile, mais nous remplacerons également HRF par Mail et par e-mail lui-même, ce qui déclenchera l'e-mail Lorsque quelqu'un clique sur le lien du courrier électronique, il s'ouvre, par exemple, sur Windows Outlook pour lui avec la possibilité de nous écrire un e-mail. Il y a vraiment les mêmes classes de queue que le téléphone, donc je ne les reparlerai pas. Passons au div suivant avec l'adresse, et il y a le tag de paragraphe avec le bureau et l'adresse réelle. Pour l'adresse, nous utilisons également le style du texte Excel, et Leading Relax définit l'espacement entre les lignes de texte Ci-dessous, nous aurons un autre div commençant par opacité zéro et X 20 comme les divs précédents. Cela signifie invisible et dans une position différente. Pendant que vous êtes en vue, cela sera visible et en position finale, la transition prendra 0,6 seconde avec un délai de 0,6. Et pour les noms de classes, nous allons définir la largeur sur toute la hauteur jusqu'à hauteur moyenne totale de 400 pixels arrondie à Excel et le trop-plein masqué Je n'ai aucun contenu en dehors de cette division. Ce div contiendra l' iframe avec Google Map, où nous définirons la position de notre adresse Dans cette source iframe, nous allons mettre cette URL Google Maps Nous réglerons la largeur et la hauteur à 100 % pour régler la largeur et la hauteur totales du conteneur. Pour le style, nous utiliserons la bordure zéro pour supprimer la bordure de l' iframe Et nous allons également autoriser plein écran pour activer le mode plein écran. Le chargement du laser signifie que nous chargerons paresseusement le cadre de l'œil pour de meilleures performances. Ce ne sont que les attributs que nous devons définir dans notre technologie iframe Voici à quoi ressemblera notre section de contact. Nous pouvons également vérifier la réactivité. Le voilà sur ordinateur de bureau, petite tablette ou iPhone. Là, je vais appuyer sur Actualiser pour voir l'animation, et colorions-la. Trouvons donc les couleurs grises. Pour la technologie Spen, je vais y mettre une couleur violette. Ensuite, je vais continuer, et j'ajouterai également de la couleur violette pour le texte du paragraphe. Modifions-le donc ici. Et là et là , modifions-le également pour les flèches qui sont là et là. Alors ça ressemblera à ça. Passons maintenant au composant de pied de page. 11. Pied de page: Composant de pied de page, nous allons importer ces icônes depuis la bibliothèque d'icônes React Ensuite, nous définirons le tableau, le tableau de liens sociaux que nous allons afficher dans notre pied de page, et nous définirons ce tableau en dehors du composant, car le définir à l'intérieur du composant signifie qu'il est recréé à chaque rendu Ses données statiques ne dépendent pas accessoires ou de l'état des composants, nous pouvons donc les laisser là Dans ce texte de pied de page, nous allons créer des noms de classe relatifs car nous utiliserons des éléments positionnés en position absolue Nous allons effectuer un rembourrage vertical à huit, une largeur maximale à 1 200 pixels, le centrer avec Mix auto et régler rembourrage horizontal sur, puis nous créerons une différence Et à l'intérieur de ce div, nous allons créer trois autres divs. Ces trois divs seront vides. Le div qui enveloppe ces trois sera en position absolue. Nous utiliserons l'encart zéro, et le trop-plein est masqué L'encart zéro mettra les quatre côtés à zéro. Sur un écran moyen, nous allons le masquer car nous allons afficher une baisse différente, absolue, qui contiendra ces éléments de style ou de design pour écran mobile Comment fonctionnent ces différentiels, c'est qu'ils sont positionnés en haut et à gauche Ensuite, ils ont une largeur et une hauteur différentes. Ensuite, ils ont une couleur différente ou ils peuvent avoir une couleur différente. Alors le premier est un cercle, le second, et le troisième est simplement arrondi. Ils peuvent alors avoir une opacité différente et la translation déplacera le div de 50 % verticalement et horizontalement Nous allons copier-coller ceci, et en fait, ce sera la version de bureau, et la première était mobile car maintenant nous la cachons et sur écran moyen et supérieur, nous l'affichons sous forme de bloc. Il a les mêmes classes, mais nous y définissons différentes positions, différentes largeurs, différentes hauteurs, puis nous pouvons également définir une opacité différente, etc. Ci-dessous, vous allez créer un autre creux avec une classe relative, index de dix et du texte au centre avec également une marge du haut à huit. À l'intérieur, nous allons créer une étiquette de titre avec John Doe. Comme John Doe a un prénom et un nom de famille très courts, vous pouvez peut-être y mettre simplement votre nom de famille ou votre prénom. Cela dépend vraiment de toi. Nous allons masquer et à partir de l'écran moyen, nous l'afficherons à nouveau. Nous réglerons le texte à dix RAM sur moyen, grand, nous augmenterons la taille du texte Nous allons définir le texte en gras trouvé sur blanc et l'opacité sur dix Ce texte ne devrait pas non plus être visible. Je sais que la taille du texte est énorme, mais il devrait prendre tout le poids et nous diminuons l'opacité, nous sommes donc légèrement visibles Pour l'écran mobile, nous allons le refaire, mais je vais utiliser la technologie de rupture pour mettre John et Doe sur une autre ligne. Ce que je pourrais aussi faire, c'est simplement diminuer la taille du texte. Nous allons continuer avec une autre division qui organisera les réseaux sociaux. Nous allons définir la marge en partant du haut, disposition de la boîte flexible, sur un écran plus petit, nous y définirons la justification entre les deux, ce qui signifie que nous n'aurons aucun espacement entre les éléments Sinon, nous utiliserons centre Justify et le centre de l'article pour centrer les éléments horizontalement et verticalement. Nous y fixerons un certain écart, puis après ce point d'arrêt, nous définirons la direction de flexion coolum Cela signifie que les éléments seront placés les uns en dessous des autres. Nous y définirons la technologie des paragraphes avec tous droits réservés, et nous définirons le texte avec une note de 200 Ensuite, nous créerons une liste ordonnée avec Flexbox Layout, Gap 25 et Flex Wrap Cela signifie que si les articles dépassent la ligne, ils seront enroulés en dessous. À l'intérieur, nous cartographierons les liens sociaux. Notre gamme, nous l'avons créée là-bas. Et là, nous structurons l'icône et l' étiquette Hf dans notre tableau Cela signifie que désormais, au lieu d'avoir à écrire icône ou une étiquette Hf soclinks point dans la fonction, nous pouvons accéder directement icône et à l'étiquette Hf en tant que variables individuelles Nous allons créer un pont d'ancrage et nous définirons la clé comme étiquette HF, l'étiquette de zone HF comme étiquette et le nom de la classe, nous définirons le texte gris 200, la disposition de la boîte flexible, centre des éléments et le centre de justification pour centrer cette largeur et cette hauteur verticalement et horizontalement sur dix, arrondir au complet, et OnHver, nous ferons du texte gris 100 avec À l'intérieur, nous allons créer un icontec avec une taille définie à 30. Voici à quoi ressemblera notre pied de page au final, et nous pouvons également vérifier la réactivité Et maintenant, nous pouvons ajuster l'opacité des couleurs pour chaque élément et modifier le design selon nos besoins Et maintenant, le pied de page dépend également un peu de vous. Vous pouvez le laisser avec ces couleurs grisâtres comme celles que nous avons là, ou vous pouvez y mettre les couleurs violettes Ensuite, nous allons simplement y coller le violet sur les couleurs grises que nous utilisons dans ces deux éléments de design. 12. Barre de navigation: Commençons maintenant par coder la barre de navigation. Nous devrons importer les dépendances requises. Next Jz lie les composants pour la navigation côté client, réagit et utilise State Hook pour la gestion des états, et les icônes des icônes de la bibliothèque React Icônes Nous pouvons voir que cette bibliothèque d'icônes React nous montre une erreur. C'est parce que cette bibliothèque n'est pas installée. Copions-en le nom, ouvrons un terminal, faisons NPM I et y collons le nom de la bibliothèque Maintenant, nous allons appuyer sur Entrée pour installer la bibliothèque, et quand nous reviendrons à notre composant, il n'affichera plus d'erreur. Comme nous utilisons use state, qui est une fonctionnalité du site client, nous devrons définir ce composant comme use client pour indiquer que ce composant s' affiche sur le site client. Nous allons continuer à définir un tableau de liens de navigation avec le titre et le chemin de chaque lien. Cela permettra de garder les éléments de navigation organisés et facilitera l' ajout de nouveaux liens chaque fois que nous le souhaiterons. Nous pouvons maintenant accéder directement au composant Navbar. Ce que nous devons faire, c'est initialiser l' état du menu de navigation mobile Ce NAF sera un boolin permettant de savoir si le menu mobile est ouvert ou fermé, et Set NAF sera une fonction permettant de mettre à jour l'état du Dévotement, cela sera réglé sur des chutes. Nous déclarerons ensuite une fonction permettant d'activer ou de fermer la navigation mobile, et elle définira le NAF à une valeur différente de celle qu'il sera Ainsi, chaque fois que vous cliquerez sur le bouton, la valeur sera modifiée, et nous l'utiliserons ensuite sur notre élément pour fermer et ouvrir le menu Nous créons également une fonction de fermeture du NAF, qui sera utilisée chaque fois que vous cliquerez sur le lien pour nous assurer que notre navigation se En retour, au lieu de fragments vides, nous allons commencer par DIF. Pour les cours, nous utiliserons l'indice Z 250. Nous utiliserons une position fixe, ce qui signifie que chaque fois que nous ferons défiler la barre de navigation, la disposition Flexbox, afin que nous puissions utiliser centre de justification pour centrer les éléments de navigation Nous définirons la largeur en entier, le texte en blanc et la police en gras. Ensuite, nous allons créer un identifiant pour la navigation sur le bureau. Pour la navigation sur le bureau, nous utiliserons également une bordure et la définirons pour qu'elle soit blanche avec une opacité de 0,2 Ensuite, nous allons créer une marge à partir du haut et un flou de fond car lorsque nous ferons défiler la page, nous aimerions que notre barre de navigation soit bien visible Faisons également en sorte qu'il soit arrondi avant Excel. Ajoutez-y quelques radios frontalières. Sur l'écran mobile, cela sera masqué et sur l'écran moyen et supérieur, il sera affiché de manière flexible. Encore une fois, parce que nous aimerions centrer les éléments avec le centre des éléments et justifier centre horizontalement et verticalement. Nous y ajouterons de la literie et nous fixerons également une largeur maximale à 400 pixels. Si vous ajoutez d'autres éléments à votre barre de navigation, vous pouvez l'augmenter Ensuite, vous allez configurer un Mixto pour qu'il soit également centré. Maintenant, si vous y ajoutez quelque chose et que vous l'enregistrez, vous pouvez voir notre barre de navigation sur la page Mais pour n'y ajouter que quelques lettres, cartographions les éléments et ajoutons-les là. Avant de les cartographier, nous allons créer une liste non ordonnée pour eux. Cette liste non ordonnée utilisera la mise en page Flexbook et Flexaw. Cela signifie que les objets seront côte à côte. Nous allons à nouveau en ajouter quelques en attente et SpaceX huit. Cela signifie que nous aurons un certain écart entre tous les éléments horizontalement. Pour le mappage, nous utiliserons Nablink point Map. Et nous utiliserons un lien qui sera le nom de chaque élément de cette carte et de cet index. À l'intérieur d'une liste ordonnée et de ce mappage, nous allons créer l' élément de liste avec un index clé, Reactive utilise cette clé pour optimiser les performances de rendu, puis nous assignons l'index du tableau en tant que clé À l'intérieur de cet élément de liste, nous ajouterons une balise link avec href setting point pv, que nous avons dans notre tableau ici Cela signifie qu'une fois que nous aurons ajouté des identifiants à nos autres sections, nous arriverons à la section souhaitée. Et puis un nom de classe dans lequel nous allons transformer son texte en blanc avec une opacité de 0,5 Cela signifie que lorsque nous survolerons les éléments de notre liste, nous verrons lequel nous survolons actuellement ensuite la transition avec une durée définie sur 300 et ralentissez pour rendre cette animation de survol plus fluide De plus, vous pouvez maintenant voir sur notre page que nous avons la mise en page avec la navigation, mais qu'il n'y a aucun élément. Ce que nous devons faire, c'est accéder au titre du point de lien que nous avons dans notre tableau. Lions le titre, enregistrons-le, et nous pouvons maintenant voir que notre barre de navigation est sur la page Nous pouvons nous déplacer ci-dessous et coder la version mobile de cette barre NAF. Nous allons y créer un div et ajouter à cette fonction DIF onclick Cette fonction OnClick que nous allons ajouter est Toggle NAF, qui signifie que chaque fois que vous cliquez sur ce div, elle exécute cette fonction Toggle Nav. Nous y sommes. Et dans cette fonction toge, vous pouvez voir qu'elle changera la variable NAF Cela signifie que chaque fois que nous cliquons sur ce div, l'état du NAF passe à vrai ou à faux Nous allons maintenant utiliser ce qu'on appelle un opérateur ternaire. Nous vérifierons la valeur de notre NAF et si elle est vraie, il exécutera cette icône fermée en plan, et si elle est fausse, quelle est la valeur par défaut, nous verrons icône de menu sur notre mobile Sauvegardons-le maintenant. Et je vais également changer la mise en page pour une version mobile. Vous pouvez maintenant voir notre icône de menu. Et si je clique dessus, vous pouvez voir comment il est modifié pour passer et revenir au menu Hamburger Nous ajouterons un nouveau DIV, et à ce div, nous ajouterons un nom de classe, et à l'intérieur de ce signe dollar entre accolades, nous utiliserons un autre opérateur Turner Si notre variable Np est vraie, nous définirons la translation X zéro, et si elle est fausse, nous définirons la traduction négative X complète. Cela signifie que nous allons déplacer nos éléments de menu vers l'extérieur et les faire revenir sur l'écran. Les autres classes que nous ajouterons ont une position fixe à gauche et en haut à zéro. Nous réglerons la largeur à pleine et la hauteur à pleine. Fond noir avec une opacité de 0,9, transformation de transformation et de transition et une durée de 300 pour l'animation elle-même. Nous allons l'enregistrer maintenant et nous pouvons le tester. Tu peux voir comment ça bouge. Bien sûr, il nous manque toujours des éléments, mais nous allons les ajouter maintenant. Nous pouvons laisser cette navigation ouverte et à l'intérieur, nous pouvons commencer à ajouter les éléments. Comme précédemment, nous devons créer une liste non ordonnée et nous ajouterons disposition flexbox avec direction flexible. Les éléments de la liste Columo sont situés les uns en dessous Nous les centrerons verticalement et horizontalement, et nous utiliserons l'espace par huit. Cela signifie que nous allons créer un espace vertical entre eux. Nous y avons également réglé la hauteur deux fois complète. Comme auparavant, vous pouvez simplement copier-coller ceci. Nous ajouterons ce mappage sur le tableau Nablks avec Link étant le nom de l'élément actuel et l' index étant la position, puis nous utiliserons cet index dans Après avoir créé la balise link, nous y définirons le chemin du point Hf toolink et le titre Link Dot pour le nom de l'élément de navigation Nous allons maintenant l'enregistrer et nous pouvons le voir sur notre page. Nous éditons également leur fonction « on click » pour fermer la navigation. Cliquons, par exemple, sur le portfolio. Avec cela, nous pouvons encapsuler le composant Navbar. 13. Tests et réparations: Il est maintenant temps de tester notre site Web. Vérifions donc la barre de navigation, et le portfolio et le stack ne fonctionnent pas Pour y remédier, nous passerons au code, à l' open portfolio et à l'open stack. Vous pouvez accéder à la page dotix, maintenir Satorlo enfoncé et cliquer dessus sur l'élément Je vais cliquer sur le portfolio contenant Sadolo. Il va ouvrir celui-ci. Et là, je peux facilement ajouter un identifiant au portfolio. Et pour Stack, je peux facilement ajouter à la place de ce nom de classe l'ID de pile. Maintenant, cela devrait fonctionner. Mais bien sûr, ce serait super si nous avions une animation de défilement fluide. Maintenant, modifions-le facilement. Nous allons accéder à notre fichier CSS à points globaux, et là, en HDML, nous allons définir le comportement du défilement pour Et nous allons également le désactiver au cas où l'utilisateur préfèrerait le réglage des mouvements réduits, le comportement de défilement ou le mode automatique, parce que quelqu'un ne veut peut-être pas ce comportement de défilement fluide et a ce mouvement réduit. Nous allons donc également l' examiner avec ceci. Passons ensuite à notre page et écrivons. Passons donc à une section. Passons à la section portfolio, section stack et à la section contact. Vous pouvez voir toutes les animations. Passons donc maintenant en revue le portfolio mural. Et aussi, nous allons maintenant vérifier la réactivité de l'écran mobile Et écrivons la barre de navigation mobile. Et je vois que c'est quelque chose à corriger. Alors allons-y et réparons-le. Définissons l'index du menu. Faisons cet index à 40. Fais attention. Pour l'icône, nous avons un index de 50, il ne peut donc pas être identique ou même supérieur. Maintenant, cela va fonctionner. Et il fera également la navigation si vous cliquez sur tous les éléments. Mais ce que nous voulons y ajouter, c'est la navigation fermée chaque fois que nous cliquons sur un élément de menu. Allons-y. Cela signifie que pour ce lien, nous ajouterons également un clic, puis nous ajouterons Fermer le NAF, qui est une fonction que nous avons déjà là, Fermer le NAF Au cas où vous cliqueriez sur ce bouton, nous mettrons NAF sur Falls. Nous allons maintenant le tester. J'y ouvrirai la navigation. Je vais cliquer sur À propos et ça marche. Nous sommes redirigés et la navigation est également fermée. Il y a une autre chose que je ferais, à savoir régler ce bouton de la position absolue à une position fixe. Cela signifie qu'au fur et à mesure que nous allons faire défiler la page, le bouton nous accompagnera Maintenant, pour ce qui est de la barre de navigation, si vous cliquez sur l'un des éléments, la navigation se fermera et nous dirigera vers l'élément de liste sélectionné 14. 1introCLOUDS: Nous créerons et déploierons un portefeuille de développeurs avec Next JS ou un site Web rapide et convivial pour le référencement qui bénéficiera de performances optimales et préparera également notre site Web au cas où nous souhaiterions ajouter des fonctionnalités phares à l'avenir. Cadre ou mouvement pour créer des animations hautement personnalisables qui donneront à notre site Web une sensation professionnelle et dynamique. Une fois ce projet terminé, vous pourrez facilement ajuster ces animations pour les rendre exactement comme vous l'imaginez Tailing CSS nous aidera à garder les choses simples et puissantes en termes de style Qui veut écrire des tonnes de CSS personnalisés ? Eh bien, ce ne sera pas nous. Nous allons créer ce projet à partir de zéro, et à la fin, nous le déploierons afin que vous puissiez accéder à votre page de n'importe où. Mais ce didacticiel ne se limite pas à la création d'un site Web. Il s'agit d'apprendre le processus, acquérir de nouvelles compétences, de pratiquer et de renforcer l'ensemble des compétences. Vous devrez créer vous-même une page comme celle-ci. Et tout ça, c'est juste pour plaisanter. Tout est gratuit. Et aussi, si vous êtes bloqué, vous pouvez demander dans les commandes. Faisons un bref aperçu du projet. Vous avez déjà vu la section des héros avec les nuages, et vous allez maintenant consulter la section du portfolio. Nous allons afficher certains de nos projets et, au fur et à mesure que l'utilisateur fait défiler la page, ils créeront un effet de carte adhésive Vous serez surpris de voir à quel point il est facile d'y parvenir. En gros, il ne s'agit que d'une classe de fin de gamme, qui rend tout cela possible. Avec Framer, nous pouvons régler l'opacité et contrôler la façon dont la carte de projet s'estompe lentement à l'écran. Vous pouvez maintenant voir la section mastec, mais regardez suffisamment de barre, qui est dans une position fixe et se déplace avec l' utilisateur tout le temps Il est doté d'une porte dérobée et est, bien entendu, réactif avec une icône Hamburger pour les écrans mobiles En revenant à la section Mastec, vous remarquerez que les piles s' animent de gauche à droite Il ne s'agit pas d'une animation ponctuelle. Chaque fois que vous revenez à cette section, l'animation recommence. Vous pouvez donc faire défiler la page vers le haut et vers le bas toute la journée, et cela continuera à se déclencher. La section des services utilise une autre astuce simple avec une classe Tailwind C'est juste là pour fournir des informations supplémentaires sur les services que nous proposons, et c'est une section rapide à coder. La section contact offre aux utilisateurs la possibilité de nous contacter par e-mail, téléphone ou même par adresse physique si vous décidez de l'inclure. Si ce n'est pas le cas, vous pouvez simplement le supprimer. Nous ajouterons également un formulaire de contact fonctionnel lorsque l'utilisateur remplira son e-mail, objet et son message, et qu'il est envoyé un e-mail nous sera envoyé sur notre formulaire Gt IO. Je vais vous aider à le configurer et cela ne prendra que quelques minutes, puis nous collecterons facilement les messages. Enfin, il y a un pied de page. Au lieu de me contenter de liens et d'icônes ennuyeux, je modifie un élément de design portant notre nom. Votre nom de famille est probablement plus long que Dog. Ainsi, au lieu d'utiliser à la fois le prénom et le nom de famille, vous pouvez simplement utiliser le nom de famille ou réduire la taille si nécessaire. Ce que j'aime dans ce pied de page, ce sont les trois éléments de position absolus, lesquels nous allons définir la couleur de notre portefeuille, qui sera étonnamment bleue Mais si vous créez à l'avenir un portfolio dont la couleur principale est le vert, vous pouvez le remplacer par une teinte émeraude ou verte et ajuster le style de ces éléments absolus afin que le design des couleurs de votre portefeuille soit parfaitement fluide de haut en bas. Cela dit, il est enfin temps de commencer. Et maintenant, plongeons-nous dans le vif du sujet. 15. 2heroCLOUDS: Dans notre IDE, commençons par ouvrir le terminal et y coller cette commande pour créer une application suivante Si nous sommes déjà dans le dossier souhaité, nous pouvons remplacer ce projet Mi par un point, qui créera cette prochaine application dans le dossier dans lequel nous nous trouvons actuellement. Maintenant, je vais régler leur problème, non au répertoire source, oui à un routeur, non à cet Aas et maintenant il fonctionnera, je vais installer l'application, et ce sera en gros tout Ce que nous allons faire ensuite, c'est aller dans ce dossier d'application, et là nous en créerons un nouveau, appelé composants. Ensuite, nous allons créer la nouvelle interface utilisateur du dossier pour le moment, je vais commencer à ajouter les composants réels. Je vais commencer par la section des héros. Nous allons créer des cercles, et nous allons également créer leurs nuages. Ces cercles seront un élément de design dans notre section héros, et ces nuages seront également un élément de design dans notre section héros. Commençons par les cercles, car ce sera plus facile. Là, nous allons commencer par exporter des bagues pour exporter des bagues et pour pouvoir les utiliser dans notre section héros Finissons-en avec ça. Retournons les fragments vides. Et à l'intérieur de ces fragments vides, nous aurons plusieurs creux, ce qui créera des cercles autour de la zone réservée aux héros Nous allons commencer par la position absolue, l'opacité jusqu'à 30, haut jusqu'à la moitié, la gauche jusqu'à la moitié, avec environ 60 béliers Puis entourez-le, complétez et traduisez également X en une moitié, traduisez Y en une moitié. Je vais vous montrer ce que j'ai fait là-bas. Je l'ai fait en traduisant X et en traduisant Y à moitié. Ensuite, je vais copier cette ligne et je l'y collerai. Au final, nous aurons six de ces creux et nous ne ferons que changer la largeur Pour le premier, j'aurai 60 RAM, pour le second, j'en aurai 50, pour le troisième, j'en aurai 30. Cinq, disons que pour le prochain, j'en aurai 20 ou 70 et pour le dernier, j'en aurai 80. Maintenant, je vais le sauvegarder, et au cas où celui-ci correspondrait à notre design, nous y reviendrons plus tard fixer la largeur ou les positions. Maintenant, si nous voulons passer à Clouds Dsix , nous devons disposer des actifs et des images du cloud Ce dossier, vous pouvez l'obtenir à partir des fichiers de démarrage et vous obtiendrez également les images Cloudimages que j'ai Il suffit de consulter le Gita Blink que vous avez dans la description et vous pourrez le prendre et le charger dans le dossier de votre application Pour ces clouds Dasix, nous allons d'abord les importer. Réagissez avec l' effet d'utilisation, l'état et également l'objet ref de React, puis nous continuerons à importer la parallaxe de la souris À partir de la bibliothèque appelée React Just Parallax que nous devons installer Importons d'abord les cercles à partir des cercles ainsi que les images du cloud. Cloud 1, et maintenant nous devons accéder aux actifs et là, nous allons sélectionner Cloud one point PNG. Maintenant, nous pouvons le copier et nous avons les cinq nuages. Faisons-le comme ça, deuxième, troisième, quatrième et cinquième. Et pour la parallaxe React Just, nous devons l'installer. Ouvrons le terminal, faisons NPM, je réagis juste en parallaxe Il installera la bibliothèque. Nous pouvons fermer le terminal. Nous allons maintenant le faire fonctionner et nous pouvons continuer dans ce composant cloud. Ce que nous allons faire dans un premier temps, c'est définir l'interface. arrière-plan couvre les accessoires, et nous y ferons la représentation de parallaxe avec un objet v vers un élément HTML div Nous venons ainsi de créer la référence pour le conteneur de parallaxe Ensuite, nous allons définir ce composant, exporter const Clouds, react point FC Accessoires pour nuages de fond. Là, nous allons définir le régime de parallaxe et nous y retournerons cette fonction jusqu'à présent avec des fragments vides À l'intérieur, nous allons définir l'état à suivre si le composant est monté. Nous allons commencer par mount there avec set mounted, et la valeur par défaut sera false. Ensuite, nous utiliserons un crochet d'effet pour définir Mounted to Draw après le rendu initial. Je vais commencer par l'effet d'usage. Et configurez le montage à deux après le rendu initial. Maintenant, au lieu des fragments vides, nous allons commencer par DIP et ce sera le conteneur principal pour ces nuages sur notre arrière-plan. Je mettrai leur position absolue parmi les deux premiers. Utilisons -45 % pour la gauche deux, 50 % pour la largeur deux. Utilisons 78 RAM et traduisons X à la moitié. Maintenant, je vais mettre les cercles. Maintenant, pour les cercles, j'ai mis leur nom bronc, pas des anneaux, mais des cercles Maintenant ça devrait aller. Si je veux le mettre entre crochets, pour l'instant, exportons les C vers O avec le retour de fragments vides et à l'intérieur, nous allons faire le cloud Okay Pour les nuages, nous devons saisir parallaxe dans une référence de parallaxe, et nous devons définir cette référence de parallaxe Nous allons le définir ici en haut de la constante de parallaxe ref pour utiliser Rf Maintenant, j'espère qu'il importera également cet URF. J'ai une faute de frappe, utilisez exactement ref. Si nous modifions, nous pouvons effectuer quelques importations supplémentaires pour la section des héros. Indiquons qu'il s'agit d'un composant client et qu'il sera rendu côté client. Importons également l' image de l'image suivante. Importons une photo de profil à partir des actifs. Importons l'animation de type depuis la bibliothèque d'animation de type React que nous devrons installer et là aussi React. Maintenant, prenons cette bibliothèque. Ouvrons un terminal, NPM, et collons-le Cela installera la bibliothèque d'animation de type React que nous utiliserons dans notre section héros. Regardons notre page que nous pouvons ouvrir à nouveau dans le terminal, et nous allons faire NPM Run Death Maintenant que nous ouvrons cette page, nous devons passer à la page point TSX Là, nous devons supprimer tout ce que nous avons comme espace réservé, et nous pouvons commencer par y placer la section héros . Il a été importé. De plus, nous l'avons là. Maintenant, il sera transféré sur notre hébergeur local, il n'y aura rien car nous n'y avons toujours pas de contenu. Passons au composant Clouds, et là en dessous des cercles, nous allons commencer par y placer également la parallaxe de la souris Nous y mettrons la force, 2.1, puis la référence du conteneur Parallax à PerlXRF. Nous pouvons fermer la technologie, et cette technologie enveloppera À l'intérieur, nous pouvons commencer par le premier nuage, en fait. Pour le premier nuage, nous allons également définir l'image à l'intérieur. Pour l'image, il y aura la source de Cloud, une source, toutes peuvent être Cloud One et la classe peut avoir une largeur maximale de 64. Et si cela est monté, si vous tournez un opérateur, la vraie position sera traduite par Y zéro avec une opacité à 100 Et en cas de fausse position, nous traduirons Y, dix avec opacité à zéro Nous allons définir la position de ce nuage dans ce creux qui enveloppe cette image Nous y établirons une position absolue avec un minimum de 17 %. Jusqu'à 50 % de l'origine vers le bas, transition vers la transformation, durée 500 et assouplissement. Maintenant, avec cela, nous pouvons simplement le prendre et le copier pour le cloud deux, trois, quatre et cinq. Nous allons simplement changer la source. Je vais le remplacer par deux, trois, quatre et cinq. Sauvegardez-le. Maintenant, je vais également modifier les positions. Faisons 55 pour le second, écrivons deux, et c'est quelque chose que nous changerons peut-être plus tard au cas où cela ne correspondrait pas au design. Celui-ci à 35 et écris jusqu'à moins huit, puis celui-ci jusqu'à 45. Maintenant, au lieu de droite, nous allons faire la gauche à -5 %. Et pour le dernier, la valeur sera 45 % avec droit à 7 %. Nous allons maintenant l'enregistrer et nous pourrons y revenir plus tard dans ce composant Clouds et mettre à jour les positions, largeur OPCD, la hauteur des nuages, etc. Pour afficher cela, nous devons en fait ajouter un composant dans les nuages, là dans le Div principal, également un carré d'aspect, et nous allons maintenant voir les nuages comme ceci. De plus, il bouge. Nous devons maintenant corriger les lignes que nous avons là et ce que seules ces lignes peuvent être. Bien sûr, c'est notre composant circulaire, et nous devons également y ajouter ce carré d'aspect. Copions-le. Mettons-le là. Nous pouvons tenir le coup, sélectionner toutes les lignes, mettre là, les enregistrer. Avec cela, cela fonctionnera et le code ressemblera à ceci. Nous allons commencer par le div principal. Au lieu de ces fragments empl, nous allons les créer ici. Nous allons intégrer le composant cloud. Et nous pouvons commencer par les cours. Tout d'abord, nous allons mettre leur clip Overflow X. Cela signifie qu'à l'horizontale, cela ne débordera pas notre section de héros Ou si l'image sort de notre fenêtre d'affichage, cela ne créera pas d'espace vide sur le côté gauche ou droit de notre page C'est important parce que si nous l'avions là, les utilisateurs pourraient faire défiler l'écran dans l'espace vide à droite ou à gauche pour l' expliquer très simplement. Maintenant, la prochaine chose que nous allons faire est de définir une hauteur minimale pour l'écran. Cela signifie que la section ne prendra pas moins que la hauteur de la fenêtre d'affichage de notre écran Et nous pouvons continuer avec la literie de haut en bas. Cela signifie que le contenu sera légèrement déplacé vers le bas. Continuons à définir la disposition de la boîte flexible et à placer les éléments au centre et au centre Justify, ce qui signifie que nous centrons les éléments verticalement et horizontalement Je vais y mettre un fond dégradé linéaire, et vous pouvez également utiliser cette couleur, ou vous pouvez aller sur Figma ou tout autre site en ligne où vous pouvez créer dégradés et jouer avec les couleurs, trouver quelque chose que vous aimez Par exemple, pour la couleur du ciel, je vais utiliser celui-ci que vous pouvez voir ici. De plus, au lieu de 180, si nous en mettons 90, vous pouvez voir ce qui se passe. Donc 360 signifie essentiellement que nous allons simplement le faire pivoter, et je n'y mettrai aucun identifiant , car pour cette section, nous n'aurons aucune barre de navigation qui nous ramènerait dans la section des héros. Nous le ferons plus tard pour les autres sections, mais pour celle-ci, nous n'en avons pas besoin. Passons à la division suivante. Nous allons faire cette division parce que nous aimerions créer ce conteneur. À côté du conteneur, je vais également le centrer sur MMC Auto, et je vais le mettre par rapport car nous y trouverons des éléments absolus Et je mettrai également la référence à la parallaxe Rf. Quelle est la représentation de l' effet de parallaxe que nous y avons défini. Dans ce dif, commençons par l'image pour l'image. Nous l'avons importé à partir de l'image suivante, et nous allons également fermer la pile. Et à l'intérieur, nous allons commencer. La source sera la photo de profil. Il s'agit de cette importation. Ensuite, nous allons continuer à définir leur d. Si l'image ne peut pas être chargée, je mettrai leur photo de profil Vous continuerez également avec un nom de classe. Nous allons régler le mixage automatiquement, pour qu'il soit centré, et la largeur que je vais régler ici 250 fonctionne bien. Nous pouvons le mettre à jour ultérieurement si nous avons besoin de l'ajuster. La prochaine chose que nous allons continuer, c' est en fait l'ajout, et là nous mettrons Let's create. Je peux aussi le styliser. Mettons la marge en bas car ci-dessous nous aurons le texte de l'animation. Faisons donc un peu d'espace entre les deux. Ce que nous pourrions également faire, c' est y mettre de l'espace, Y et une valeur, par exemple six. En fait, je vais peut-être le faire. Nous n'avons pas besoin d'eux pour faire cette marge en bas car cela garantira qu'il y a espacement entre tous ces éléments image, un espacement entre tous ces éléments image, titre 1 et le type animation, je vais le faire juste là, tapez animation Passons à la technologie de fermeture. Bien entendu, nous devons y définir les valeurs. Pour le titre, je vais maintenant continuer. Je vais mettre leur texte Blue 200, la police Extra Bolt et le texte sept Excel. Bien sûr, c'est dû à une erreur maintenant, mais c'est parce que nous n'avons pas défini les valeurs nécessaires pour ce type d'animation. Nous devons mettre leur séquence. Pour la séquence, nous devons mettre les valeurs réelles, nous voulons que ce type d'animation soit écrit pour nous. Je vais vous faire part de leur expérience. Je mettrai leurs sites Web et leurs designs. Ce que cela créera, c'est qu' il ne fera qu' écrire ce texte. Maintenant, je peux mettre le nom de leur classe. J'y mettrai également le texte Seven Excel et le texte blanc. Et maintenant tu peux voir à quoi ça ressemble. Créons des designs, des sites Web, des expériences, ajoutons-y tout ce que vous voulez. Je vais le faire comme ça parce que dans les derniers portefeuilles, nous avons mis ces mots à la place de ces mots, un peu comme si je travaillais en tant que développeur boursier à part entière, consultant, etc. Et peut-être que cela peut aussi être plus intéressant, plus original là-bas. Nous allons définir le bloc en ligne, et nous allons continuer avec le wrapper Et ce que sera ce wrapper de ce type d'animation est également Heading One Mettons-le là. Ensuite, nous allons continuer avec le curseur. C'est vrai, nous répétons à l'infini. Cela signifie que cela fonctionnera en boucle infinie. J'aimerais également prendre Fontextrablt, en dessous, je mettrai un paragraphe technique, et j'y mettrai des informations vraiment basiques Je m'appelle John Doe. Je suis un développeur de Costac chez Then we'll stylet it Mettons-le en style et laisse-moi le déplacer comme ça. Vous pouvez donc voir le code. Je vais le styliser avec texte Essayons le blue 200 et voyons à quoi cela ressemblera. Envoyez du texte vers Excel à partir du poids semi-maximal. Utilisons 500 pixels. Je veux être sur deux lignes, pas sur une seule longue ligne. Maintenant, ce que je vais faire, c'est placer sur ce plat d'emballage un centre d'éléments de mise en page flexible et un centre Justify Et colonne de direction flexible. Cela signifie que nous allons l' avoir comme ça. Maintenant, je vais rafraîchir la page. Et je mettrai également le texte au centre. Maintenant, c'est encore mieux, nous pouvons y aller, prendre ces nuages et les mettre dans cette zone ci-dessus. Maintenant, l'animation fonctionne. Maintenant, nous avons cette animation dans ce div, et ce que nous allons changer, c'est que nous allons prendre cette classe relative à partir de là et la placer dans le div principal ou dans le div d'encapsulation. Maintenant, nous aurons des nuages comme celui-ci. Et ce que nous ferons si nous voulons ajuster la position des nuages, c'est aller dans notre dossier. Là, nous irons dans les nuages. Ensuite, nous jouons avec la position inférieure ou la position droite ou la position gauche. Nous y avons tous nos nuages. Il suffit d' ajuster les positions. Permettez-moi maintenant de jouer avec les valeurs. J'ai également augmenté la durée d'attente de 64 à 72 pour certains nuages. Je change de position. Si vous voulez utiliser mes positions, je vais maintenant suivre ce cours et vous pouvez les vérifier. Oui, alors jouez avec, réglez le bas ou la gauche et la droite sur une position différente. Utilisez également une valeur négative, par exemple, là, et vous pourrez alors accéder à différentes positions. Ce que nous allons faire ensuite, c'est continuer dans d'autres sections car pour le moment, je pense que la section des héros est terminée. L'animation fonctionne. Ça bouge comme ça. La seule chose que nous pourrions affiner ici est simplement la taille du nuage, sa position, etc. Mais je pense que, comme nous savons maintenant comment le faire, il est facile de l'ajuster à notre guise. 16. 3navbarCLOUDS: Nous allons continuer avec la barre de navigation. abord, nous allons indiquer que ce composant sera rendu sur le site du client. Ensuite, nous poursuivrons les importations. Nous allons commencer par importer le lien à partir du lien suivant, puis nous continuerons à importer l'état React with us que nous utiliserons pour la gestion des états. Nous allons également importer deux icônes menu AI Outline et AI Outline se ferme. À partir de React Icones AI, nous importerons également mouvement depuis l'image ou le mouvement pour les animations que nous utiliserons. Ce que nous devons faire, c'est ouvrir le terminal, et là nous pouvons le coller. Nous allons faire du NPM, je fais réagir des icônes et des cadres ou des mouvements. Nous ferons un appel d'offres, puis nous installerons ces deux bibliothèques, et nous pourrons continuer. Nous allons d' abord définir le tableau de nos liens de navigation, puis nous les utiliserons dans notre navigation. Faisons donc une constante de liens de navigation. Et là, nous allons commencer par le titre. Pour le premier, il s' agira de section et de chemin. Pour le sujet, il s' agira du hashtag about. Ensuite, nous pouvons le copier autant de fois que nécessaire. Je vais donc l'utiliser pour about portfolio. Également pour le stack and contact, peut-être aussi un peu d'expérience, mais nous verrons ce dont nous aurons besoin pour développer notre portefeuille. Pour l'instant, je vais travailler avec ces quatre éléments de menu. Ensuite, je peux accéder à la fonction de la barre de navigation, et là je vais commencer par régler l'état pour gérer la visibilité du menu de navigation mobile. Je vais commencer par la constante NAF Set NA et utiliser l'état par défaut false Cela signifie que l'état par défaut de notre navigation sera faux. Ensuite, nous allons créer la fonction du couteau à bascule. Et cette fonction tog env changera l' état du NAF. Là, j'appellerai le set NAF, et je changerai la valeur du NAF La fonction suivante sera de fermer la navigation mobile. Nous l'appellerons close NaF. Et nous allons définir suffisamment de valeurs sur false. Cela sera appelé chaque fois que vous fermerez la navigation. Ensuite, nous allons créer les variantes d'animation pour le menu mobile. Commençons par les variantes du menu const. Le menu ouvert sera en position normale. Nous y mettrons x à zéro et passerons la rigidité à 20 et l'amortissement à 15 Quand il sera fermé, nous fixerons la position -100% Cela signifie qu'il sera retiré de l'écran, et pour la transition, nous ajouterons une rigidité à 20 et un amortissement à 215 Et la rigidité y domine. La valeur la plus faible de rebondissement signifie moins de rebondissement. Et l'amortissement définit la rapidité avec laquelle l'animation s'installe. Avec ces paramètres, nous allons créer une animation fluide pour notre menu mobile. Maintenant, nous pouvons aller directement au retour. Je vais y créer un div. Et à l'intérieur de ces différences, nous aurons la navigation sur ordinateur, la navigation mobile et le tableau qui s'ouvrira et provoquera la navigation mobile lorsqu'un utilisateur sera sur Commençons par donner notre indice de navigation 250. Ensuite, nous le réparerons et nous le ferons en sorte qu'il reste 40 %. Ensuite, nous mettrons le texte en blanc sur notre navigation et notre bateau de police. Commençons par la navigation sur le bureau. Là, nous allons créer un div et dans le DIF, nous allons entrer les noms des classes Pour notre navigation, comme nous n'avons pas encore de contenu, commençons par le contenu afin de mieux le styliser que dans une liste désordonnée, nous allons itérer sur les liens de navigation Donc, carte Nablinks, index. Et chacun d'eux figurera dans la liste. Dans la liste, l'élément technique figurera le paragraphe, et Insight sera le titre du point du lien. Maintenant, si je veux le sauvegarder, je peux voir sur la page que les liens sont là. Nous allons maintenant styliser la liste non ordonnée ainsi que le DIF. Pour le dif, nous allons créer la bordure, et nous allons mettre la couleur de la bordure blanche avec une opacité de 0,2 Nous allons le faire avec ce 20. Ensuite, nous ferons une certaine marge par le haut. Nous allons créer un flou de fond. Cela signifie que lorsque nous ferons défiler la page avec cette barre Naug à position fixe, nous verrons toujours un arrière-plan, mais il sera Cela signifie que nos articles en quantité suffisante seront bien lisibles. Sauvegardons-le. Faisons de cet arbre Excel arrondi. En fait, Background Blur, créons Tree Excel. Ensuite, sur l'écran du mobile, cela sera masqué et sur support, nous le ferons fléchir. Nous allons centrer les éléments, donc nous les centrons verticalement et horizontalement . Nous allons ajouter un peu de pédicure. Nous y avons également mis une largeur de mixage de 400 pixels, et nous allons la centrer avec Mix Auto. maintenant à la liste non ordonnée, nous allons mettre la disposition Flexbox, Flex row Cela signifie que nos articles seront côte à côte. Nous ajouterons également peding et SpaceX huit. Passons maintenant à notre itération, et là, dans la liste, nous allons mettre un index clé Ensuite, nous passerons à la technologie des paragraphes. Nous aimerions y faire de l'animation. Chaque fois que l'utilisateur passe le pointeur de la souris sur un élément de la liste, nous y plaçons la classe de transformation sur notre inclinaison X 12, sur notre texte blanc avec une opacité de 0,5 et transition, le tout avec une certaine durée et uniquement pour la fluidité Maintenant, sauvegardons-le et essayons-le. Vous pouvez voir les éléments changer lorsque je les survole, et ce sera tout pour la navigation sur le bureau Nous allons maintenant créer un autre div destiné au bouton de navigation mobile Trouvons où se termine le premier div pour la navigation sur le bureau, et c'est ci-dessous, je vais créer un autre div et à l'intérieur de ce div, je vais créer un opérateur ternaire qui sera sur le NAF Je vais faire leur point d'interrogation, et comme c'est le cas pour les opérateurs ternaires, chaque fois que c'est vrai, première position est exécutée et chaque fois que c'est faux, deuxième position est exécutée Par défaut, le menu AI Outline sera toujours exécuté. Supposons qu'il y ait aussi une certaine taille, et une fois qu'elle aura été modifiée, nous aimerions que leur plan d'IA soit fermé, également avec une certaine taille, car lorsque nous cliquerons à nouveau sur, il sera remplacé par un menu. De plus, en affichant nos éléments de menu sur la page, cela créera la navigation mobile que nous souhaitons. Pour la division de ces boutons de balises de menu, nous ajouterons également quelques classes. Il sera masqué sur le bureau. Sinon, ce sera la position absolue, cinq en haut, cinq à gauche, bordure aux coins arrondis, texte sur blanc avec une opacité de 0,7 et une bordure sur blanc, également avec une opacité de 0,7, puis un peu Maintenant, je vais changer la fenêtre en navigation mobile. Nous pouvons voir que rien ne se passe encore car nous devons également y ajouter des fonctions de clic. Modifions-le en cliquant et en cliquant, j'appellerai Toggle Navigation Maintenant, lorsque je cliquerai sur la fenêtre, vous verrez qu'elle est modifiée. Mais bien sûr, les éléments de notre menu ne sont toujours pas affichés car nous devons maintenant coder le menu de navigation mobile. Je vais y créer un nouveau div, mais pas un div normal. Il s'agira d'un mouvement d'inclinaison par rapport au cadre ou d'un mouvement. Et pour ce plongeon, nous utiliserons ces animations. Commençons par là. Je vais le faire comme ça. Et je vais commencer par les deux premières chutes. Et maintenant, je vais y mettre une animation en fonction de la valeur NAB. Encore une fois, il s'agit d'un tourneur. Nous l'utiliserons en position vraie, celle-ci sera ouverte en position de force, elle sera fermée. Et ce que signifie « ouvert et fermé » correspond à ce que nous y avons défini. À l'ouverture, il fera cette animation à la fermeture, il fera celle-ci. Pour les variantes, nous y mettrons les variantes du menu car c'est ainsi que nous les avons nommées. Nous pouvons maintenant continuer avec le nom de la classe lui-même, où nous allons placer les classes de largeur de queue et je mettrai le zéro gauche fixe, zéro supérieur, la largeur au complet, hauteur au complet et le fond noir d'opacité 0,9 Nous pouvons même copier cette liste non ordonnée, la mettre là. Et juste à partir de la ligne flexible, nous allons la remplacer par une colonne flexible. Les éléments à centrer justifient les centres. Cela signifie que nous allons centrer les éléments horizontalement et verticalement. Alors nous n'avons pas besoin de literie. Nous n'avons pas besoin de l'espace X. Mais nous aimerions l'espace Y. Cela signifie que nous aurons l'espacement vertical entre les éléments. Maintenant, vérifions-le. Si on l'ouvre, on l'a là. Cela n'a pas l'air mal du tout, mais nous devons quand même y faire. Continuons avec la hauteur jusqu'au maximum. Nous pouvons maintenant voir que l'icône se trouve derrière notre navigation. Allons-y et définissons-y un index à 50. Et maintenant ça marche bien. Si je veux bien le mettre là, vous pourrez voir comment cela fonctionne pour la navigation mobile. Et comme nous sommes sur mobile, nous n'avons besoin de rien de ce Haring. Nous allons simplement y mettre du texte dans Excel. Cela signifie que nous allons augmenter la taille de nos éléments de menu. Peut-être que je n'aurais pas peur d'y mettre ne serait-ce que cinq Excel. Oui, je pense que c'est bon. On peut le garder comme ça. Maintenant, si nous allons accéder à cette page pour mobile, elle ressemblera à ceci. Et c'est tout pour la navigation mobile. 17. 4portfolioCLOUDS: Dans la section Portfolio, nous commencerons par les importations, puis nous continuerons à créer une constante de projet. Dans cette constante, nous chargerons nos projets, puis nous les passerons en revue et les afficherons dans nos cartes que nous coderons Pour les projets, je mettrai leur identifiant. Pour le premier, il y en aura un. Ensuite, je mettrai leur titre, puis leur catégorie. Et le dernier sera la source de l'image. Pour le premier projet, il ne s' agira que de celui-ci. Maintenant, je vais faire le coma, et je vais le copier trois fois de plus car j'ai les quatre projets je vais afficher au total Je vais simplement mettre à jour les identifiants. Je vais mettre à jour la source de l'image du projet. Maintenant, je vais trouver une description, et je vais utiliser ces quatre sites Web que j'ai trouvés sur Framer, maintenant dans notre composant fonctionnel, là dans le retour, nous allons supprimer ces fragments vides, et nous allons commencer par la section Et pour cette section, nous allons définir BY sur 16. Nous avons donc un peu de rembourrage par le haut et aussi par le bas. Ensuite, à l'intérieur, nous poursuivrons la cartographie de nos projets. Faisons en sorte que leurs projets pointent l'index du projet MAP, et à l'intérieur, nous allons commencer par le mouvement Div. Passons maintenant au début, et là nous allons importer le mouvement à partir d'une image ou d'un mouvement. Maintenant, nous allons utiliser motion div et maintenant nous allons utiliser motion Div. Dans ce motion div, nous allons mettre tout le contenu. Nous allons maintenant définir la première technologie de démarrage de Motion Div, et là nous allons définir la clé comme identifiant de point du projet. Nous allons maintenant définir le nom de la classe. Nous utiliserons une bordure avec une bordure blanche d'opacité de 0,2, puis une disposition flexbox avec une colonne de direction flexible qui signifie que les éléments à l'intérieur de cette différence seront placés les uns en dessous Ensuite, nous continuerons sur écran moyen sur la version test cop, nous ferons du flex raw. Cela signifie que les éléments seront côte à côte. Nous allons mettre le texte en blanc, et nous y mettrons également un Excel arrondi. Faisons Tree Excel. Maintenant, nous allons déjà voir quelque chose sur notre page. Ensuite, nous allons continuer avec arrière-plan dont nous allons définir le dégradé à droite, et nous allons définir ses couleurs à partir de deux. Maintenant, comme il s'agit de certains codes que j'ai définis dans Figma plus tôt, je vais simplement les copier-coller ici, et cela devrait créer une couleur grisâtre. Nous y ferons de la literie. Ensuite, nous y définirons la justification entre les deux. Cela signifie que nous aurons un espacement uniforme entre nos éléments dans cette différence : du début de la marge vers le bas Pour le moment également, nous allons définir la largeur. Définissons une largeur initiale sur l'écran du mobile. Il y aura 300 pixels, et sur un écran moyen ou supérieur , utilisons environ 1 100 pixels, mais nous pourrons ajuster ces valeurs ultérieurement Nous pouvons enfin voir la forme de nos cartes. Nous voudrons que cela soit collé sur le dessus. Utilisons une classe autocollante avec les 28 meilleurs. Cela signifie que lorsque nous ferons défiler la page, ces objets se colleront les uns sur les autres, ce qui créera l'effet d' empilement de cartes Maintenant, si nous passons à la section d'emballage, nous pouvons y mettre un récipient et un mix auto. Cela signifie que nos projets seront centrés. Si je mets quelque chose comme hauteur principale à 300 viewportet, je pourrai faire défiler ma page vers le bas Et vous pouvez voir qu'il y a la première carte, et je fais défiler la page vers le bas, elles se superposent. Ensuite, comme cela fonctionnera il y aura une autre section, et ce composant du portfolio sortira simplement de la fenêtre d'affichage, donc nous ne le verrons pas Et lorsque nous ferons défiler la page vers le haut, nous verrons à nouveau toutes les cartes les unes en dessous des autres Je vais maintenant définir leur état initial de notre animation. Cela signifie que nous allons commencer par zéro d'opacité. Cela signifie que les éléments commenceront de manière invisible et que ce Y sera également inférieur de 50 pixels à sa position finale. Pour la prochaine, ce sera pendant la vue, et celle-ci est la définition de l' animation lorsque les éléments apparaîtront. Là, nous allons définir opacit à un et Y à zéro. Ensuite, ce sera la transition. Cela signifie que la durée sera pour nous d'une demi-seconde. Et le délai sera indexé par 0,2. Cela signifie qu'il y aura un certain retard dans l'animation, ce qui signifie que tous les éléments ne seront pas affichés sur notre page, mais avec l'index, cela sera plus retardé. quoi cela ressemblera, c'est que la première carte sera affichée en premier, puis que le reste de la carte s'affichera lentement après celle-ci, car cela créera cet effet de vague lorsque le premier élément sera affiché, puis lentement, tous les autres éléments seront également affichés. Maintenant, nous allons également définir un port d'affichage que nous définirons une fois True. Cela signifie que cette animation se déclenchera une fois que l'élément sera visible. Ce sera pour la définition du mouvement, nous allons commencer par la balise de paragraphe à l'intérieur de cette balise de paragraphe, nous aurons une catégorie de points du projet Ci-dessous, ce sera le titre deux. Il y aura un point sur le titre du projet. Ensuite, nous aurons une liste ordonnée à l'intérieur de cette liste non ordonnée Nous aurons un élément de liste, et à l'intérieur de ces éléments de liste, nous aurons une liste à puces. Ce que nous avons réalisé avec le projet se trouve dans la section « technologie des paragraphes » dans notre liste Je vais améliorer l'expérience utilisateur de 40 %. Pour la catégorie de projet, je vais faire quelque chose comme du texte en gris, 200, puis du texte en petit. Pour le titre du projet, je vais créer du texte dans Excel, en police, les deux, et sur un écran moyen, nous pouvons l' augmenter en texte pour Excel. Pour la liste désordonnée, nous allons faire un espace Y deux. Cela signifie que tous ces points sanguins sont séparés par un certain espacement et non par des arches empilées les unes sur les Pour l'élément de liste, je vais faire le plex, disposition des boîtes et les éléments à centrer. Et puis à côté de ce point Blot, je vais créer une icône de réaction Nous pouvons vérifier les contours de l'IA. Pour cette icône, nous utiliserons React Icones AI. Permettez-moi de créer des icônes NBMiract. Maintenant, si nous faisons cette vérification, nous avons cette option pour cette bibliothèque. Je vais entrer. De cette façon, il sera importé. Maintenant, si je le sauvegarde, cela fonctionnera. Sur notre page, nous avons cette icône. Nous ajouterons le nom de la classe avec une largeur 25 et une hauteur de 25 et le texte Emerald 400. Maintenant, regardons la page. Nous ne l'avons pas augmenté, mais voici quelques valeurs que vous pouvez augmenter au cas où vous souhaiteriez augmenter ce contrôle. Je vais le laisser comme ça. Et je vais également y placer cet élément de liste X quatre . Je vais prendre cet élément de liste, et je vais le coller deux fois de plus. Ensuite, pour améliorer l'expérience utilisateur, je vais simplement le remplacer par un autre texte. Nous pouvons améliorer la vitesse latérale de 50 %. Et pour le dernier, le trafic mobile a augmenté de 35 %. Bien entendu, voici quelques exemples de valeurs qui peuvent s'y trouver. Et aussi, actuellement, nous l' avons codé en dur. Ce que nous pouvons faire, c'est y créer un nouveau champ. Je vais faire le point 0.1. Ensuite, je vais le copier, le coller, faire le point 0.2 et trois. Ensuite, même si je suis dans le coma, je pourrai l'appliquer à d'autres projets. Ensuite, je vais prendre ces valeurs. Mets-le là. Également, ce point. Et même le dernier. Et au cours de l'itération, je vais faire le projet bullet 0.1, coller pour les autres, faire le bullet 0.2 et trois Et maintenant, par exemple, si c'est pour le quatrième projet, je vais le remplacer par quelque chose de aléatoire. Sur notre page, vous pouvez voir que tout va bien, mais juste pour le premier, nous avons une valeur différente. Nous avons maintenant un problème avec la première carte. Est-ce que j'ai oublié quelque chose ? Oui, j' oublie d'y mettre les valeurs. Permettez-moi de le mettre comme ça, de l'enregistrer, et nous continuerons en dessous la liste non ordonnée avec l'image Et pour cette image, nous allons définir la source du projet, source de l'image, puis nous allons mettre le titre du projet en point, puis nous allons mettre 500 en hauteur, nous en mettrons 300 et au nom de la classe, nous mettrons un point arrondi en gros. Maintenant, nous allons le sauvegarder. Vous pouvez voir à quoi ressemblent nos fiches de projet et quelques mesures que nous devrions prendre. La première est que nous devons prendre la valeur arrondie de même valeur que celle que nous avons dans le mouvement div. Nous utilisons leur arbre Excel. Cela signifie que nous le mettrons également pour la photo. n'y a alors aucun problème dans cette rangée de flexibilité moyenne qui devrait être comme ça. Il y a un problème où il manque un div. cette ligne flexible, nous voulons maintenant avoir un div pour le texte, Sur cette ligne flexible, nous voulons maintenant avoir un div pour le texte, puis l' élément image fonctionne bien tout seul car il sera placé sur le côté droit. Comme il s'agit d'une ligne flexible, cela signifie que si nous voulons mettre ce texte dans un div et me laisser également y faire un onglet. Ces deux éléments seront côte à côte, et sur l'écran mobile, et sur l'écran mobile, ils seront placés l'un en dessous de l'autre avec cette colonne de direction de flexion. Ce que nous pouvons maintenant faire dans ce div qui contient les informations de notre projet, nous allons y placer un espace de Y à quatre. Ensuite, nous allons entrer dans cette division de mouvement d'emballage, j'y mettrais un espace de X à quatre. Et je ferais même leur espace de Y à six. Maintenant, si nous allons vérifier la page, nous devrons augmenter la marge vers le bas. Portons ce chiffre à 24 et nous allons également passer à ce mouvement di et nous allons mettre le Mx auto. Maintenant, elle est centrée, et nous pouvons maintenant tester notre section portfolio, et lorsque nous faisons défiler la page vers le bas, elles se chevauchent Ce sera pour la section du portfolio. 18. 5stackCLOUDS: Pour le composant stack, nous allons le faire dans les ports. Si vous n'avez pas encore ces bibliothèques, ouvrez un terminal, utilisez NPM, I, et copiez ces bibliothèques Par exemple, cet observateur d' intersection React. Que nous utiliserons pour que l' animation réapparaisse pour obtenir en utilisant la vue lorsque nous ferons défiler la page vers le haut ou vers le bas, cette animation de pile réapparaîtra Puis le mouvement du cadreur. Encore une fois, si vous ne l' avez pas encore, suffit de NPM, moi et mettez-le là, icônes de réaction. Nous pouvons également y mettre. Cela signifie que nous aurons accès à ces bibliothèques avec les icônes que nous utiliserons pour notre pile. Maintenant, si nous essayons et installons les bibliothèques, je les ai déjà, mais je peux juste recommencer. Maintenant, avant de définir le composant de pile, nous allons y créer un tableau d'éléments de pile avec des éléments de pile C. Et là, pour chaque article, nous aurons un identifiant, puis un nom. La première sera le cadreur, puis l'icône, la première icône sera le cadreur avec une taille allant jusqu'à 100 Ensuite, coloriez, je peux rester là pour l'instant en texte vert 200, puis nous pouvons mettre leur virgule et le coller là autant de fois que nous le voulons Je vais mettre à jour les noms et les icônes. J'ai également sélectionné des icônes différentes pour les quatre autres icônes car il y avait des icônes réservées. Nous allons maintenant utiliser Framer Figma, React Note, Mongo Di B Ensuite, nous allons passer en dessous, et là nous allons commencer à définir des variantes d'animation pour les éléments de la pile. Je vais commencer Cs variance ou item variance. Et je vais mettre une variante pour hidden, qui prendra un numéro d'indice, et là, l'obésité sera nulle, et pour x, nous prendrons le reste de l'indice et si c'est zéro, alors ce sera -100 en position vraie et en fausse position, ce sera 100 C'est ce qu'on appelle Turner Operator. Nous ferons ainsi en sorte que les éléments de la pile partent de gauche et de droite selon que c' est vrai ou faux. Ensuite, ci-dessous, nous en aurons un autre qui sera appelé visible, et pour celui-ci, nous réglerons l'opacité sur un x à zéro et passerons à la durée trois J'ai commencé avec le mauvais support, je dois en faire un Carl. Remplaçons-le par le carré, et ci-dessous, nous pouvons commencer à définir le composant de la pile lui-même. À l'intérieur, nous allons commencer par configurer les commandes d'animation. Je vais utiliser les commandes constantes et l'animation. Ensuite, nous allons configurer l'observateur d' intersection. Cela signifie que nous allons maintenant régler le problème, nous l'y importons. Et avec cela, cette animation réapparaîtra lorsque nous ramènerons ce composant dans notre fenêtre d'affichage Là, je vais faire une constante, et j'utiliserai le ref et in view pour utiliser in view. À l'intérieur, je vais faire le seuil 2.1. Ensuite, je vais continuer à définir le crochet d'effet Use pour déclencher l'animation en fonction de l'état de la vue. Je vais utiliser l' effet puis à l'intérieur, je vais le conditionner, et si c'est le cas, nous ferons des contrôles qui commencent par visible. Et si ce n'est pas visible, je ferai en sorte que les commandes commencent à être masquées. Quelles sont ces deux variantes d' articles ? Ensuite, nous y dirons que cet effet s'exécutera chaque fois que les contrôles seront en vue, les dépendances changeront. Cela signifie qu'il déclenchera le démarrage de l'animation lorsque les composants seront visibles, et qu'il arrêtera également l'animation lorsqu'elle sortira de la vue. Là, nous allons créer une balise de section. Et dans cette balise de section, nous allons commencer par DIV et laissez-moi vous expliquer pourquoi je fais le Div supplémentaire et ne le fais pas dans la section. Pour ce div, je souhaite définir un poids maximum. Pour l'instant, nous allons faire quelque chose comme 250 pixels parce que nous voulons simplement que ce soit vertical, pas horizontal, mais nous pouvons également l'ajuster ultérieurement, le changer simplement en horizontal et le configurer pour mélanger Oddo avec le texte au centre Nous avons donc ce centre. Pour la section. Si je veux mettre un arrière-plan spécial pour la section, peut-être un dégradé linéaire, je pourrais le faire là, et ce sera sur toute la largeur. Par exemple, arrière-plan sur fond blanc. Nous devons y mettre du contenu. Et permettez-moi d' y mettre du contenu et de mettre leur arrière-plan en vert. Vous allez maintenant voir les différences. Si je vais sur notre page, vous pouvez voir que le fond blanc cette balise de section d'emballage occupe toute la largeur et que le contenu que je souhaite utiliser avec ce fond vert se trouve à l'intérieur, et il a ce poids maximum que j'ai fixé à 250 pixels et que je l'ai centré. Si je veux le faire dans la section d'emballage, il faudra la section murale et le fond réel que je souhaite avoir ressemblera à ceci. Permettez-moi alors de l'utiliser comme ça. Pour l'instant, débarrassons-nous des arrière-plans. Je peux commencer par le titre deux. Dans cette deuxième rubrique, je vais mettre ma pile. Blow, je vais faire une plongée. Et dans ce div, je vais itérer sur les éléments de la pile Dans cette itération d' éléments de pile, je vais faire une division de mouvement. Et avant de commencer à faire ce div, je vais juste styliser le titre et le div qui l'enveloppe. Pour ma pile, j' utiliserai le texte sept, Excel, le texte gris, 200, le boulon de police et une marge vers le bas. Pour ce div, je vais simplement utiliser disposition en grille et passer à huit par défaut. Il n'y en aura qu'un seul sur le réseau. Cela signifie que tous ces écarts de mouvement seront placés les uns en dessous des autres et qu'ils se trouveront dans une seule colonne Voyons à quoi cela ressemblera. Mettons simplement en mouvement div, l'identifiant du point d'index. Pour la valeur clé, puis pour la valeur personnalisée, nous allons mettre un index. Dans un premier temps, cela sera masqué. Et, bien sûr, pas l'identifiant de l'index, mais l' identifiant du point de l'article. Ensuite, nous allons continuer à animer deux contrôles, puis à modifier les variantes des éléments. Et pour un nom de classe, nous définirons le fond blanc à 0,1 opacité Nous allons continuer avec la mise en page Flexbox et centrer avec le centre de justification et les éléments à centrer horizontalement et verticalement Ensuite, fxraw, cela signifie que éléments à l'intérieur du rigide seront côte à côte Ensuite, nous utiliserons un Excel arrondi, une ombre large, un peu de literie. Et sur Haar, nous pouvons simplement faire de l'ombre à Excel. Maintenant, dans ce mouvement dip, nous allons créer un div pour l'icône. Nous y ferons une icône en forme de point. Nous pouvons y ajouter un peu de classe, et à l'intérieur, je vais faire leur marge vers bas et le signe du dollar avec la couleur du point m. Cela signifie qu'il y définira nom de classe de la couleur du point de l'article, et nous y avons défini le texte vert 200. Ensuite, nous avons l' icône elle-même, et ci-dessous, nous allons faire le texte où nous allons afficher le nom du point de l'article. Là, je vais faire du texte blanc avec une opacité de 0,2, du texte trois Excel Transformez et faites pivoter de 90 degrés. Et maintenant, pour le Dave qui termine cette itération, je vais mettre la référence à rev. Et cela signifie que cela permet à notre animation savoir quand ce conteneur est visible à l'écran Nous pouvons voir l' animation, comment elle se déroule. Il y a juste une chose que je dois corriger. nous manque T pour notre rotation de -90 degrés et je vais l'actualiser Vous pouvez voir comment fonctionne l' animation, et ce sera tout pour ce composant de pile. 19. 6servicesCLOUD: Nous allons maintenant créer une section assez simple nommée services avec les services que nous proposerons. Ce que je vais faire là-bas, c'est que je n'ai même pas besoin d'importer quoi que ce soit et je vais simplement créer leur constante avec les services, et là, dans cette constante, je mettrai les services proposés. Je vais commencer par le champ ID, qui sera zéro, un. Vous pouvez n'en mettre qu'un, mais pour des raisons de conception, je vais également y mettre zéro. Ensuite, je mettrai leur titre. Ensuite, je mettrai leur description. Et ce sera tout. Maintenant, je vais le remplir avec le contenu que j' aimerais y mettre. Si vous voulez vous inspirer, je vais y aborder le développement Web Full Stack, le développement APA, la conception de bases de données, l'intégration dans le cloud, le DevOps et le CICD, ainsi que l'optimisation des performances Puis aussi une description. Ensuite, je vais entrer dans ce retour, et là je vais créer un DIFF sur ce div, je mettrai le texte PI 20 en blanc Je peux également mettre la classe de conteneur, Mix audio flex et la colonne flex direction. Et sur un écran moyen, nous allons mettre une ligne de direction flexible. Cela signifie que nous devrons créer deux divs. La première portera sur le titre. Cela signifie que pour nous, ce seront les services, et la deuxième division sera celle de la liste des services. Cela signifie que nous y échangerons nos services que nous avons créés, entretenus et internes, nous ferons Ce div aura une clé, et ce sera l'identifiant du point de service. De plus, il y aura un cours avec un cours allant de la marche à la fin. Il y aura 16 configurations de boîtes flexibles, et nous placerons les éléments de manière à ce qu'ils ne soient pas réellement centrés Nous allons le mettre au point de départ. Il est maintenant affiché sur notre page. Nous pouvons continuer avec prochaine division qui aura une couleur de texte différente. Mettons le texte en gris 400. Bateau de police, texte, cinq , Excel et marge pour écrire six. Nous y mettrons un numéro de point de service. Nous allons le sauvegarder. Nous pouvons maintenant le voir sur notre page. Pour le titre des services, nous mettrons 25 % de largeur et 8 lits pour écrire. Maintenant, il est en meilleure forme. Ce que nous allons faire, c'est que pour notre titre, nous allons mettre du texte dans six fichiers Excel, police Extra boot, le stick et le top 20. Cela aura pour effet que chaque fois que nous ferons défiler la page, celle-ci sera collée en haut de la hauteur de notre fenêtre d'affichage Pour les services, nous y mettrons le reste des 75 % de largeur. Nous y ajouterons également un autre div, et ce div reprendra le titre 3 pour le titre du point de service Et aussi une balise de paragraphe pour la description du point de service. classe du titre du service sera le texte dans Excel, police, les deux, et la marge des deux derniers. Description, nous allons saisir le texte gris 400, et vous pourrez voir comment se situent les services sur la position fixe. Et au fur et à mesure que nous faisons défiler la page, ces services se déplacent, et ce sera tout pour notre section des services Nous pouvons maintenant passer à la suivante. 20. 7contactCLOUDS: Pour la section contact, nous allons accéder au div principal, mettre une classe de PY à 16, y définir une largeur maximale. Utilisons 1 200 pixels et centrons le tout avec un ordre de mixage. Pour cette division, il contiendra le texte avec notre adresse e-mail et également un appel à l'action, comme entrer en contact. Nous allons placer les éléments de mise en page Flexbox au centre et les justifier au centre pour les centrer verticalement et horizontalement Nous allons également placer le volume de direction de flexion et sur un écran moyen, nous allons placer une ligne de direction de flexion Ensuite, à l'intérieur, nous allons créer un autre div pour séparer l'action à froid de l'adresse réelle. Nous y mettrons la codection. Nous allons créer une technologie de rubrique 2, et nous y mettrons pour entrer. Et nous pouvons mettre la main sur Spentex. Pour le toucher dans Spentex, nous ajouterons plus tard Mettons maintenant le texte gris 400. Pour le titre deux lui-même, nous allons le faire sur écran moyen, texte sept Excel. Texte pour Excel sur police d'écran mobile, la fois marge jusqu'au dix inférieur et texte blanc avec une opacité de 0,5 Vous pouvez maintenant le voir sur notre page. Ci-dessous, nous allons continuer avec la technologie d'ancrage, et dans cette technologie d'ancrage, nous aurons notre e-mail, qui se trouvera sur dow.com Je peux le dire comme ça et là, pour Anchorteg, je vais créer une classe Et dans ce cours, j'utiliserai également sur écran moyen du texte sur sept fichiers Excel. Sur le texte mobile pour Excel, police, texte semi-gras sur blanc, souligné avec un peu de décoration. Pour l'instant, utilisons le gris 400. Ensuite, nous ferons la décoration deux et soulignerons le set quatre, et sur Elle, nous changerons la décoration en gris 200. Nous utiliserons également la transition et la durée 300. Sauvegardons-le. Maintenant, sur notre page, vous pouvez voir quand je vais le survoler, comment le soulignement change ou la décoration Ce que nous ajouterons également à cette étiquette d'ancrage est le HRF, et le HRF sera envoyé par courrier à Nous aurons toujours le formulaire pour remplir l'e-mail avec un message et le faire fonctionner, afin que l'utilisateur puisse nous envoyer un e-mail via le formulaire, et là nous créerons un autre DIV. À l'intérieur de ce div, nous aurons une classe de texte blanc avec une opacité de 0,5, marge allant du haut à 12, et maintenant nous aurons leur téléphone avec le numéro et l'adresse Cela signifie que nous allons faire un autre div pour le téléphone. Nous y créerons une technologie de paragraphe avec téléphone et également une technologie d'ancrage avec le numéro de téléphone réel. Disons quelque chose comme +99 078-897-9999 . Sauvegardons-le. Là, dans la technologie Anchor, nous ferons le HRF, et dans le HRF, nous mettrons ce numéro de téléphone sans espacement Et nous pouvons également nous occuper du stylisme. Cela signifie que pour le DIF, ce sera la marge jusqu'aux huit derniers, pour le téléphone Ce sera du texte sur l'arc et la marge du bas. Pour la balise d'ancrage, il s' agira du texte vers Excel, téléphone semi-boulon, du soulignement, la décoration grise 400, de la décoration deux. Soulignez le set quatre sur sa décoration grise 400, transition et durée 300. Nous pouvons maintenant le mettre sur une autre ligne et également cette balise d'ancrage ci-dessous. Maintenant, en dessous de cette profondeur, nous allons en créer une autre. Ensuite, nous allons créer une pile de paragraphes avec Office. Nous allons le copier et le baser encore trois fois. Ensuite, nous mettrons Street. Nous y mettrons Berlin et l' Allemagne pour le nom de la classe, nous pouvons mettre un boulon de police. Nous y placerons le texte en grand et la marge du bas à huit. Voyons cela sur notre page. Passons maintenant au formulaire. Cela signifie que nous devons descendre en dessous de ce div. Nous allons créer une technologie de formulaire. Et dans cette technologie de formulaire, nous allons créer un autre div qui sera là pour les entrées, puis un autre qui sera là pour le message d'entrée, puis un troisième qui sera là pour le bouton. Maintenant, pour le formulaire, nous allons ajouter des classes, et nous allons commencer par une largeur maximale de 1 200 pixels, Mx, auto, flex flex wrap, et justifier entre les deux. Mais avec justify between, cela signifie qu'il y aura un espacement égal entre ces trois divs Passons maintenant aux divs. Pour le premier, nous ajouterons de la largeur à 50 %, l'espace Y à six, et à l'intérieur, nous mettrons un div qui contiendra l'étiquette avec entrée, et nous le copierons et le collerons car second creux contiendra également l'étiquette et l'entrée. Dans l'étiquette, nous aurons un e-mail, et dans le second, nous aurons le sujet. Pour la saisie, fermons également la technologie comme ceci. Commençons par le style de ces étiquettes pour l'étiquette. Le style sera le bloc d'affichage, le texte trop petit, la police trop moyenne, le texte gris 300 avec une marge inférieure de deux, ainsi que le HTML pour les e-mails. Nous pouvons simplement copier cette ligne et la mettre là, changer en sujet. Et le HTML 4 sera également sujet. Maintenant, pour ce qui est de la saisie, nous allons également mettre notre type d'identifiant e-mail, également un espace réservé à email.com Cela sera également nécessaire. Et pour le nom de la classe, nous y ajouterons le Bedding X Four complet, Bedding y23, fond transparent Bordure et bordure blanches avec une opacité de 0,2, arrondies en grand et focalisation pour ne pas en souligner. L'accent est mis sur le Ring two et l' accent sur le ring gray 200. Nous pouvons maintenant tester l'entrée. En gros, il suffit de copier-coller cette entrée et de changer ce type en texte. Changez cet identifiant en fonction de la place réservée, nous allons indiquer de quoi il s' agit . Passons maintenant à la deuxième division. Pour le deuxième div, nous mettrons leur nom de classe à pleine largeur. Sur écran moyen, nous mettrons la largeur à 50 %. La marge à partir du haut sera de six, et sur un écran moyen, cette marge sera ramenée à zéro. À l'intérieur de ce div, nous allons mettre l'étiquette du message. Dans cette étiquette, nous allons mettre une classe de bloc, le texte en petit, polices en moyen, le texte en gris 300 et la marge en bas. Et aussi pour cette étiquette, nous mettrons le code HTML quatre, et ce sera pour le message. En dessous de cette étiquette, nous allons mettre une zone de texte. Et pour cette zone de texte, nous allons en faire des lignes de message d'identification 28. Cela signifie que le produit est défectueux, il sera affiché sur notre page avec huit lignes. Maintenant tu peux le voir. Nous le rendrons également obligatoire. Nous y mettrons un espace réservé pour votre message. Et maintenant c'est l'heure des cours. Nous mettrons la largeur à la literie complète X quatre, par 23, fond transparent. Bordure blanche avec une opacité de 0,2, arrondie large, contour de mise au point, aucun, et anneau de focalisation deux avec anneau de mise au point gris, 300 ou 200, comme nous le faisions auparavant Maintenant c'est mieux. Regardons la page. Nous devons faire un certain espacement entre ces deux creux. Faisons-le, et faisons-le en réglant cette largeur à 48 % pour celui-ci, et également à 48 % pour celui-ci. Maintenant, si nous allons vérifier la page, elle ressemblera à ceci, ce qui, à mon avis, est très bien. Maintenant, il ne reste plus qu'à appuyer sur le bouton. Cela signifie là, en bas. Nous allons faire le tag du bas. Nous pouvons simplement y saisir cette ligne. Pour le style du dif, il sera de la largeur au maximum sur un écran moyen, ce sera de la largeur. Encore une fois, utilisez cette marge de 48 % depuis le haut Sur le support moyen, la marge du haut sera de quatre et le texte de droite sur le support également. Nous allons maintenant styliser le bouton lui-même, et nous allons également ajouter le type de bouton à soumettre. Comme nous utilisons ce formulaire pour le nom de la classe, nous allons mettre leur bloc en ligne. Largeur et hauteur jusqu'à 16. De l'arrière-plan au transparent. Donc, frontière. Permettez-moi d'utiliser Border Gray 400. Et Text Gray 400. C'est donc de la même couleur. Ensuite, j'opterai pour une police moyenne, arrondie, grande. Oh, je vais changer le fond en gris 700 sur Elle, le texte sera changé en blanc. transition et la durée 300 étant terminées, nous créons une animation fluide et transformons et survolons l'échelle à un sur cinq Maintenant, si vous l'enregistrez et que nous allons essayer de survoler ce bouton, vous pouvez voir l'échelle changer un peu, couleur, ainsi que la couleur de la flèche Maintenant, si vous souhaitez que ce formulaire de contact fonctionne, nous devons ajouter une méthode et la configurer pour qu'elle soit publiée. Passons à cette page, atgtfm point IO slash Login. Ensuite, nous nous inscrirons, cliquez sur Créer ici. Mettez-y un nom et indiquez-y le fuseau horaire. Copiez ce point de terminaison, mais nous ajouterons son action, et dans cette action, nous mettrons ce point de terminaison que nous obtiendrons de GetFMTIO et nous pouvons également mettre l'ID du formulaire Et en regardant notre section, nous devrons également y changer de centre pour justifier entre les deux. Voici à quoi ressemblera le formulaire de contact. Nous allons maintenant essayer sa réactivité, nous pouvons voir que nous avons un problème Passons à notre code, et là, définissons cette largeur ou cette taille à partir de la taille moyenne. Je vais également le mettre là, qui fonctionne déjà. Mettons-y également toute la largeur. Mettons également la literie X à 12. Copions maintenant ceci et allons-y pour envoyer un message. On peut le mettre là. Nous pouvons également le mettre sur le bouton, et ce sera pour la section contact. 21. 8footerCLOUDS: Maintenant, la dernière section et ce sera Footer. Pour le futur, nous devrons importer quelques icônes. Faisons-le maintenant. Nous allons importer AI fail Gita AI Outline X, AI fail Facebook, et AI fail Instagram Nous allons commencer par la technologie Putter et à l'intérieur de cette balise de pied de page, nous mettrons le contenu Faisons un peu de coiffage. Ce sera relatif à la classe car nous aurons également des éléments absolus. Cela ajoutera un peu de style à ce texte. Laisse-moi t'expliquer plus tard. Passons maintenant au texte en gros caractères. Nous allons commencer par la classe relative. Ensuite, nous allons continuer avec cet index à dix, le texte au centre, la marge allant du haut à huit. Dans ce plongeon, nous allons faire H one avec John. Mais restons-le comme ça avec des majuscules. Le style sera masqué sur le téléphone portable et sur un écran moyen, il sera affiché en bloc. Maintenant, faisons dix RAM. Texte de grande taille. Faisons 15 RAM. Et n'oublions pas Medium. Faisons-le envoyer des SMS à 12 RAM. Mettons également leur boulon de police, texte est blanc avec une opacité de 0,1 Et ci-dessous, nous ferons de même pour la version mobile. Copier-coller cette technologie H one. Et voilà, cachons-nous sur un écran moyen. Et définissez-y également la classe relative. Maintenant, nous allons le garder comme ça. Théoriquement, nous n'en avons pas besoin parce qu'il est masqué et qu'il n'est affiché que depuis le support Cela signifie qu'à partir de celui-ci, il commence par un texte à 12 prim. Et je suppose que c'est ça. Maintenant, allons-y et plus haut, nous allons créer les éléments d'arrière-plan de notre texte. Nous allons également le dupliquer et d'abord, nous le créerons pour ordinateur de bureau, puis nous le créerons pour mobile. Maintenant, dans ce creux, créons trois autres creux, et je vais d'abord en coder un, puis nous allons simplement copier-coller abord, le verre de cette profondeur d' emballage sera masqué en position moyenne, en position absolue, en encastrement zéro et en trop-plein Maintenant, pour la première différence, elle aura une largeur de position absolue de haut à 30 %, de gauche à un quart, de largeur de 100 pixels, de fond à 300 pixels, par exemple, maintenant arrondie à l'opacité totale à 40, transformera et traduira X à -50 % et traduira également Y à -50 % Laissez-moi le mettre là. Et la seule chose que j'y ai mise, c'est ça. Traduire Y -50 %. Je ne le mettrai pas sur une autre ligne. Souvenons-nous simplement de ceci. Et maintenant, copiez-collez cette ligne deux fois de plus. Je vais le laisser comme ça. Nous ne modifierons aucune valeur issue de ces traductions. La seule chose que nous allons changer, ce sont les arrière-plans. Permettez-moi de mettre la note de fond à 906 cents. Maintenant, changeons également l'opacité. Je vais changer ce deuxième à 20 et le troisième à 30. Maintenant, je vais également changer le poids. Permettez-moi de changer le deuxième à 150, et le troisième, nous pouvons encore en garder 100. De plus, nous avons oublié de créer leur hauteur. Pour la hauteur, je vais faire leurs 100 pixels. Je peux le copier et le coller ici. Pour le second, nous allons faire 70 pixels, et pour le troisième, nous pouvons à nouveau conserver les 100 pixels. Maintenant, ce que nous devons faire, c'est dans ce pied de page, placer les classes relative et PI 28 avec un poids maximum de 1 200 pixels et un mix Auto Nous pouvons également mettre le rembourrage x24. Nous allons le copier et le coller ci-dessous. Mais ci-dessous, nous supprimerons ce qui est masqué de taille moyenne. Nous garderons cela caché pour la taille du mobile, et sur Medium, nous créerons ce bloc d'affichage. Une fois que nous l'aurons fait, vous pourrez voir quelque chose s'est affiché sur notre écran. Ce que nous devons faire, c'est jouer avec ces positions. Cela signifie que nous ne ferons que 50 % et 33 %. Maintenant, vous pouvez voir, encore une fois, que cela change. Maintenant, changeons le haut. Nous allons y mettre 35 %, et nous allons faire 50 %. Je pense que nous allons également changer la couleur de celui-ci car il n'est pas visible. Et augmentons également les tailles. Les premiers sont parfaits pour les téléphones portables. ceux de bureau, nous devons augmenter à 200, 250, et encore une fois, 200, la hauteur à 200, 150 pour la hauteur du second, et nous pouvons en garder 100 pour le troisième. Nous pouvons à nouveau jouer un peu avec les valeurs. Permettez-moi de vous donner leur top, par exemple, 40 %. Faisons 60, puis 45, et nous pouvons également y attribuer une valeur différente, par exemple 20 %. 60 % là-bas et 40 % là-bas. Pour l'instant, continuons avec le pied de page normal, comme vous le savez Nous allons créer le DIV et à l'intérieur de ce div, mais vous pouvez d'abord y mettre également des classes. Nous allons rendre cette disposition en grille, mise en page par défaut mobile, ce sera Grid Comes one, partant du petit écran, nous la changerons en grille coms three. De plus, nous allons y mettre un écart, le texte est gris 200. Et à l'intérieur, nous allons commencer à mettre les Divs. Dans la première section, nous aurons un titre intitulé Contactez-moi. Ensuite, avec le texte du paragraphe, il y aura le numéro et ensuite l'e-mail. Nous y ajouterons un peu de style pour me contacter. Nous pouvons mettre le bot de police, et aussi y mettre l'espace Y deux, deux. Voyons à quoi cela ressemblera. Je pense que c'est bon. Ce que nous allons faire maintenant est ci-dessous, nous allons créer un autre dif, et dans ce div, nous allons créer le titre trois, encore une fois, des liens utiles, et en dessous de ce titre, nous allons créer une liste non ordonnée, et dans cette liste non ordonnée, nous allons créer l'élément de liste, et à l'intérieur de cet élément de liste, nous allons créer une balise d'ancrage avec, par exemple, une page d' accueil, quatre pages ou Nous pouvons le mettre là pendant quatre pages, sous forme de licence. Ajoutons-y également un peu de style. Des liens utiles auront donc formé les deux. Eh bien, pour ce plongeon, nous avons un espace Y quatre, ou gardons-en deux. Pour la liste non ordonnée, rien pour l'élément de liste. En fait, rien non plus. Pour la balise d'ancrage, nous mettrons peu de HRF et un nom de classe soulignés Nous pouvons maintenant ajouter cette balise d'ancrage à tous les articles. Vérifiez à quoi cela ressemble sur la page. Et pour nous assurer que tout est beau, nous allons vérifier où se termine le dif Nous allons le prendre, le copier une fois de plus. Nous pouvons y mettre encore une fois, quelque chose comme socials, get up, X et Linkedin et en dessous de ce disque, nous pouvons en créer un autre qui aura une pile de paragraphes et à l'intérieur de la pile de paragraphes, nous aurons 2024, tous Nous allons y ajouter un peu de style. Faisons la marge supérieure 212, le conteneur, mise en page Flexbox sur petit écran et au-dessus, nous ferons Justify entre les deux Il y a donc un espacement uniforme entre nos éléments, justifiez le centre des éléments par un certain écart entre eux. Et c'est tout. Nous ajouterons également du style au paragraphe. Faisons le texte gris 200, puis en dessous de ce paragraphe, nous ajouterons une liste non ordonnée À l'intérieur de cette liste non ordonnée, nous ajouterons l'élément de liste Et dans cet élément de liste, nous ajouterons la technologie Anchor, et dans cette technologie Anchor, nous ajouterons les icônes. Je vais commencer par AI hL Git up. J'ajouterai également la taille 30. Cela signifie que pour la technologie Anchor, nous devons ajouter le HRF du lien pour démarrer et nous devons également ajouter un peu de style J'aurai leur note de texte 200. Maintenant, je vais le copier-coller quatre fois de plus, et je vais ajouter le reste des icônes, Outline C, Facebook et Instagram, Outline s, Facebook. Et Instagram, je pourrais en ajouter un autre, mais supprimons le dernier. Restons-en à ces quatre points. Ensuite, si je regarde la page, je peux voir que je dois la mettre en ligne. Pour la liste non ordonnée, j'ajouterai du lin et du flex row comme ceci Ensuite, je peux voir sur la page que je devrais peut-être y ajouter une petite lacune. De plus, je vais prendre ce dif mural, couper et le placer à l'extérieur du qui contient les colonnes de la grille Celui-ci, nous pouvons voir où il s'arrête. Mais en gros, vous aurez le div avec les icônes juste au-dessus du pied de page ou à la fin de la balise de pied de page Je pense que nous pouvons le retirer de l'étiquette d'ancrage. Et nous pouvons le définir là dans le div qui enveloppe le texte de ce paragraphe avec cette liste non ordonnée Je vais mettre le texte en gris 400. Je vais également le supprimer de là, il sera donc de même pour ce paragraphe et cette liste désordonnée Sur la page, cela ressemblera à ceci. C'est notre pied de page maintenant Maintenant, si vous le vérifiez sur un téléphone portable, nous pouvons voir que nous avons un problème avec le texte. Allons là où cela sera caché au médium. Nous pouvons supprimer la taille du texte. De plus, nous allons mettre le texte huit Excel. Mais ce que nous allons faire, c'est y aller, et nous allons également partir du réseau. Ensuite, ce que nous allons faire, c'est mettre une marge de 12 à 12. Ensuite, nous y irons. Et pour les éléments ty link, nous allons créer des positions différentes. Nous allons donc changer le premier élément à 20, le second à 20 également et le troisième à 25. Maintenant, les positions, commençons par la première, 20 %. La deuxième, faisons 60 %, et la troisième, 35 %. Peut-être même plus de 65 pour celui-ci, 50. Pour celui-ci, nous allons augmenter l'opacité, et pour la diminuer pour le premier, notre section de pied de page fonctionne désormais 22. 9uiFixesCLOUDS: Je vais faire maintenant, c'est que dans un dossier, je vais créer un nouveau dossier que je vais appeler sections, et je vais déplacer toutes ces sections là et dans les composants, je vais juste garder ces deux composants que j'ai là. Je peux même le déplacer hors de l'interface utilisateur. Permettez-moi de le dire comme ça. Je peux faire la mise à jour là-bas. Je peux supprimer ce dossier d'interface utilisateur, et peut-être y ai-je aussi une erreur. Mais plus probablement, ce n'est pas cas si vous obtenez parfois une erreur comme celle-ci, il suffit de fermer et d'ouvrir l'IDE, et vous pouvez voir que l'erreur a disparu. Nous avons maintenant les composants, où seront ces cercles et nuages et les sections que j'ai là. Vérifions le design de la page murale et effectuons les dernières mises à jour de l'interface utilisateur. Et d'ailleurs, voici à quoi ressemblera notre page dans un dossier. Nous n'avons pas besoin du port d'imagerie là-bas. Oui, juste dans un dossier. Je vais juste le supprimer et une fois sécurisé, ça devrait aller. Il y a donc la section des héros. Il y a la section portfolio. Il y a maintenant la pile avec les animations. Maintenant, il y a les services, et il y a la section contact et le pied de page Voyons maintenant à quoi cela ressemble réellement pour un téléphone portable. Et tout semble parfait. Même là-bas et même là. Je pense que le premier point sera dans la différence de couleur, on le voit bien. Si nous allons passer au CSS à points Globus, l'arrière-plan est actuellement de cette couleur Supposons, et la façon dont nous pouvons facilement résoudre ce problème est de passer à la section des héros, et là, au lieu de la couleur noire à la fin, nous insérerons cette couleur. Et maintenant, vous pouvez voir que la différence de couleur a disparu. Ensuite, nous pouvons passer à la section portfolio, et là, pour la catégorie de projet, nous pouvons mettre du texte bleu 400, peut-être aussi en gros. Et aussi en le mettant en gras. Et je vais le changer en 300 avec une opacité de 0,3. OK, peut-être sept. Je pense que c'est mieux. Pour le portfolio, pour la catégorie de projet, je vais utiliser cette couleur. Ensuite, pour la pile, nous pouvons conserver cette couleur verte ou nous pouvons accéder au composant Stack et définir le texte vert ou le texte en ciel 200. Voyons à quoi cela ressemblera. Essayons peut-être 300. Je pense que c'est bon. Mettons-le vraiment partout. Je vais juste prendre ce ciel de texte, le coller. Je l'ai foiré là-haut. Je vais simplement supprimer le T supplémentaire, le sauvegarder. Et ce que je vais faire, je vais simplement le prendre et le mettre également dans la catégorie des projets. Peut-être que je supprimerai même l'opacité. Nous allons maintenant faire défiler la page vers le haut. Et la pile est également belle. Maintenant, les services, je vais prendre cette couleur du ciel, passer aux services. Pour l'identifiant, je vais envoyer un texto à Sky , je pense que 300 est plus décent. Et nous pouvons même mettre ce texte Sky 300 dans la rubrique services. Cela signifie que je vais mettre notre texte Sky 300. Et maintenant, pour la section contact, nous allons y mettre le texte Sky. Et aussi pour la décoration, faisons-en 300 et voilà pour cette décoration. Et nous pouvons simplement le changer pour cette couleur grise. Ce n'est pas grave de le faire. Je vais juste le coller là pour le gris, le sauvegarder. Et pour le pied de page, ma partie préférée, nous allons en mettre un peu Commençons par le ciel. Et je pense que c'est bien parce que nous avons déjà des nuances différentes de la couleur du ciel. Au final, cela ressemblera à ceci. Nous pouvons actualiser ce faux et un autre faux. Nous allons consulter notre section consacrée aux héros. Nous pourrions également y aller sur les nuages. Et au lieu de -45 %, nous ferons le 35 Et avec cela, nous allons avoir ces cercles centrés autour de notre image de profil. Vous allez maintenant accéder à la barre de navigation. La barre de navigation, nous voyons que nous avons besoin ces instructions pour ce qui est de la pile de portefeuille et du contact Apparemment, cela devrait fonctionner, mais ce n'est pas parce que nous n'avons pas défini les identifiants de nos sections. Ce que nous allons faire, c'est supprimer cette section à propos ou nous la supprimerons et nous la mettrons en dessous la section du portfolio et nous aurons réellement des services. Passons maintenant à chacune de nos sections. Commençons par le portfolio. Ensuite, nous ajouterons un identifiant. Services de portefeuille, nous ajouterons des services d'identification. Ensuite, contactez, nous ajouterons un identifiant. Contacter. Et pour la pile, nous ajouterons leur identifiant. il y a une pile dans notre barre de navigation, nous allons y aller et ce que nous devrions ajouter c'est qu'elle devrait être remplacée par une technologie d'ancrage. Nous devrions ajouter le HRF, et pour ce HRF, nous allons régler le chemin par points Nous allons maintenant le copier. Nous allons le mettre là. Changez-le également en Anchor tech, enregistrez-le. Maintenant, si vous allez sur notre page, nous verrons que cela fonctionnera pour nous. Voyons maintenant la version mobile de notre site Web. Essayons de passer aux différentes sections. Et nous voyons que nous devons également faire une dernière mise à jour, qui ajoutera notre navigation fermée, celle-ci. Trouvons la navigation mobile, qui est celle-ci. Et à la balise d'ancrage qui s'y trouve, nous ajouterons un clic sur Fermer le NAF Ainsi, chaque fois que nous cliquons sur cet élément, navigation fermée appelle cette fonction de navigation fermée qui met le NAF en position de chute Cela signifie que cela provoquera la navigation. 23. 10deploymentCLOUDS: Maintenant, comment déployer ce site sur Verso et avoir cette durée de vie. Nous allons exécuter Utero Shift B et initialiser le dépôt. Le portefeuille DevCloud est le nom de mon dépôt. Je peux maintenant vérifier ce contrôle de source. J'y mettrai tout en scène. Je vais faire un premier message. Nous pouvons nous engager. Je vais cliquer sur Publier la branche. Ce sera privé pour moi. Le portefeuille Def Cloud est bon. Appuyez sur Entrée. Maintenant, ça devrait aller. Je peux cliquer sur Ouvrir sur GTA. Là, je peux voir le code. Je vais maintenant aller sur sal.com et je vais cliquer sur Ajouter un nouveau projet Je vais cliquer sur Importer sur ce portfolio Death Cloud. Je vais cliquer sur Déployer. Maintenant, nous pouvons voir que nous avons les deux erreurs. Le premier dans la barre de navigation avec Link et le second dans Stack avec icône Nous allons revenir au code et dans la barre de navigation, il suffit de supprimer ce lien dans une pile, et intc, il suffit de simplement supprimer cet amonicon. Maintenant, procédez aux modifications . Mettez-en un à jour, validez les modifications synchronisées. Et maintenant, passez à nouveau aux projets sur Varsel Nous allons cliquer dessus , puis sur Déploiements Vous pouvez voir que lorsque vous faites pression pour apporter de nouvelles modifications, la version est automatiquement relancée Maintenant, j'espère que cela sera adopté. Et à l'avenir, si nous ajoutons quelque chose à votre page, cette version sera réexécutée encore et encore Et notre page est en ligne. Si je clique ici, le lien vers ma page s' ouvrira. Je peux copier ce lien sur mon mobile n'importe où. Il est désormais accessible sur Internet. Il est important de garder à l'esprit que si vous apportez d'autres modifications à votre site Web et que vous les publiez, il reconstruira ce site Web et, au cas où vous auriez de nouvelles erreurs, il pourrait échouer à nouveau. Vous devez donc faire attention à ce que vous insérez dans votre dépôt. Et après le redéploiement, vous verrez probablement quelque chose comme ça Ce que nous devons faire, c'est simplement prendre ce mode sombre et le mettre également dans un mode que nous avons défini comme mode clair. Et c'est quelque chose que vous pouvez ensuite définir si vous souhaitez utiliser le mode léger pour votre site Web. Actuellement, la solution la plus simple et aussi pour le préparer, nous pouvons simplement y définir la même couleur que pour le mode sombre. Donc, dans Global Z CSS, prenons simplement ces deux lignes, mettons-les à la racine , enregistrons-les. Ensuite, nous le déploierons également en tant que mise à jour. Cliquez sur le système d'exploitation pour synchroniser les modifications, et maintenant il va reconstruire la double page et elle devrait être corrigée 24. Composant réutilisable : contact: Nous allons commencer par déclarer ce composant comme client d'utilisation pour les effets de survol interactifs, les animations déclenchées par port ou les animations de mouvements d' images Nous importons également le mouvement à partir d'un cadre ou d'un mouvement. Si vous n'avez pas encore cette bibliothèque, ouvrez un terminal, faites NPM I frame motion, entrer, et que nous l'installons Juste à côté du composant , nous allons commencer par une section. Et à cette section, nous ajouterons l' identifiant du contact, et pour les classes, nous ajouterons un espacement vertical à 32 caractères blancs, et nous allons faire en sorte que cette largeur maximale soit de 1 200 pixels avec un Mito pour la centrer Nous y ajouterons également un rembourrage vertical à quatre. Nous allons commencer par le premier mouvement dip. Ce mouvement dip débutera de manière invisible à 20 pixels en dessous de la position finale. Pendant que cela sera visible, il s'animera jusqu'à ce qu'il soit complètement visible et en position finale L'animation prendra 0,8 seconde, nous allons donc régler la durée à 0,8 pour effectuer la transition. Cela ne s'animera qu'une seule fois lors du défilement dans la vue. Cela signifie que nous définirons la fenêtre une fois vraie. Pour le nom de la classe, nous allons définir une disposition en grille, et sur grand écran, nous utiliserons deux colonnes de grille et nous fixerons l'écart à 16. Dans ce mouvement dip, nous allons créer un autre div. Et pour les éléments à l'intérieur, nous utiliserons l'espace Y 12. Cela signifie qu'il y aura un certain espacement entre eux. Nous allons créer un mouvement H deux, où nous allons définir les animations. Nous allons commencer par l'initiale. Cela commencera de manière invisible et 20 pixels à gauche de la position finale. Pendant que cela sera visible, nous le rendrons visible, et pour la transition, nous réglerons l' animation pour qu'elle et pour la transition, dure 0,6 seconde avec un délai de 0,2 seconde. Pour les classes, nous allons définir la taille du texte sur sept Excel, police sur les deux et le gris du texte sur 300. À l'intérieur, nous saisirons leur titre « get in touch » et le mot tactile que nous mettrons dans le Spenex pour le mot tactile et la balise span, nous ajouterons une couleur de texte différente Je vais maintenant y mettre le texte gris 500. Nous allons passer à une autre division de motion. Ce mouvement div débutera avec une opacité nulle. Cela signifie qu'il démarrera de manière invisible et qu'il restera 20 pixels à gauche de la position finale. Pendant que cela sera visible, nous allons le rendre visible en réglant opacité sur un et pour la transition, cela prendra à nouveau 0,6 seconde avec un délai de 0,4 Pour les classes finales, nous utiliserons la couche huit, arrondirons à Excel et l'espacerons Y huit. Cela signifie que nous allons à nouveau créer de l'espace entre les éléments que nous aurons présents dans ce motion diff Et ce que nous y aurons, essentiellement les coordonnées, et la première portera sur le numéro de téléphone portable. Nous aurons leur technologie de paragraphe de téléphone et leur technologie d'ancrage du numéro lui-même. Pour le div, nous utiliserons à nouveau l'espace par deux pour avoir leur espacement entre la technologie du paragraphe et la technologie d'ancrage Nous définirons la taille et couleur du texte pour la technologie du paragraphe, puis pour la technologie Anchor, nous réglerons HF sur le nombre réel des classes. Nous ajouterons du texte à Excel, un semi-bot téléphonique, une couleur différente au survol et une durée de transition de 300 Également une mise en page Flexbox avec des éléments pour centrer et Gap 22 Ensuite, nous avons également le Spentek car nous aimerions ajouter une flèche à côté de ce numéro à des fins de style Nous pouvons y définir une couleur pour la flèche, et ce sera tout. Ci-dessous, nous allons continuer avec une autre division. Dans cette section, nous conserverons le courrier électronique. Ce sera essentiellement le même style que celui que nous avions sur le mobile, mais nous remplacerons également HRF par Mail et par e-mail lui-même, ce qui déclenchera l'e-mail Lorsque quelqu'un clique sur le lien de l' e-mail, celui-ci s'ouvre, par exemple, sur Windows Outlook pour lui avec la possibilité de nous écrire un e-mail. Il y a vraiment les mêmes classes de queue que le téléphone, donc je ne les reparlerai pas. Passons au div suivant avec l'adresse, et il y a le tag de paragraphe avec le bureau et l'adresse réelle. Pour l'adresse, nous utilisons également le style du texte Excel, et l'interligne détendue définit l'espacement entre les lignes de texte Ci-dessous, nous aurons un autre div commençant par Opacity zéro et X 20 comme les divs précédents. Cela signifie invisible et dans une position différente. Pendant que vous êtes en vue, cela sera visible et en position finale, la transition prendra 0,6 seconde avec un délai de 0,6. Et pour les noms de classes, nous allons définir la largeur sur toute la hauteur jusqu'à hauteur moyenne totale de 400 pixels arrondie à Excel et le trop-plein masqué Je n'ai aucun contenu en dehors de cette division. Ce div contiendra l' iframe avec Google Map, où nous définirons la position de notre adresse Dans cette source iframe, nous allons mettre cette URL Google Maps Nous réglerons la largeur et la hauteur à 100 % pour régler la largeur et la hauteur totales du conteneur. Pour le style, nous utiliserons la bordure zéro pour supprimer la bordure de l' iframe Et nous allons également autoriser plein écran pour activer le mode plein écran. Le chargement du laser signifie que nous chargerons paresseusement le cadre ee pour de meilleures performances. Ce ne sont que les attributs que nous devons définir dans notre technologie iframe Voici à quoi ressemblera notre section de contact. Nous pouvons également vérifier la réactivité. Le voilà sur ordinateur de bureau, petite tablette ou iPhone. Là, je vais appuyer sur Actualiser pour voir l'animation et pour le composant de contact, ce sera tout. 25. Composant réutilisable : pied de page: Pour le composant de pied de page, nous allons importer ces icônes depuis la bibliothèque d'icônes React Nous allons définir le tableau, le tableau de liens sociaux que nous allons afficher dans notre futer et nous allons définir ce tableau en dehors du composant, car le définir à l'intérieur du composant signifie qu'il est recréé à chaque rendu Ses données statiques ne dépendent pas accessoires ou de l'état des composants, nous pouvons donc les laisser là Dans ce texte de pied de page, nous allons créer des noms de classe relatifs car nous utiliserons des éléments positionnés en position absolue Nous allons effectuer un remplissage vertical à huit, une largeur maximale à 1 200 pixels, centrer avec Mix auto et régler rembourrage horizontal sur, puis nous créerons un div Et à l'intérieur de ce div, nous allons créer trois autres divs. Ces trois divs seront vides. Le div qui enveloppe ces trois sera en position absolue. Nous utiliserons l'encart zéro et le trop-plein sera masqué. L'encart zéro mettra les quatre côtés à zéro. Sur un écran moyen, nous allons le masquer car nous allons afficher un div de position absolue différent qui contiendra ces éléments de style ou de design pour l'écran mobile. Comment fonctionnent ces différentiels, c'est qu'ils sont positionnés en haut et à gauche Ensuite, ils ont une largeur et une hauteur différentes. Ensuite, ils ont une couleur différente ou ils peuvent avoir une couleur différente. Alors le premier est un cercle, le second, et le troisième est simplement arrondi. Ils peuvent alors avoir une opacité différente et la translation déplacera le div de 50 % verticalement et horizontalement Je vais copier-coller ceci, en fait, ce sera la version de bureau, et la première était mobile parce que maintenant nous la cachons et sur écran moyen et supérieur, nous l'affichons sous forme de bloc. Il a les mêmes classes, mais nous y définissons différentes positions, différentes largeurs, différentes hauteurs, puis nous pouvons également définir une opacité différente, etc. Ci-dessous, vous allez créer un autre creux avec une classe relative, un index de dix et du texte au centre avec également une marge du haut à huit. À l'intérieur, nous allons créer une étiquette de titre avec John Doe. Comme John Doe a un prénom et un nom de famille très courts, vous pouvez peut-être y mettre simplement votre nom de famille ou votre prénom. Cela dépend vraiment de. Nous allons masquer et à partir de l'écran moyen, nous l'afficherons à nouveau. Nous allons définir le texte sur dix RAM. En taille moyenne ou grande, nous augmenterons la taille du texte. Nous allons définir le texte en gras trouvé sur blanc et l'opacité sur dix Ce texte ne devrait pas non plus être visible. Je sais que la taille du texte est énorme, mais elle devrait en supporter tout le poids. Et nous diminuons l'opacité. Nous sommes donc légèrement visibles. Pour l'écran mobile, nous allons le refaire, mais je vais utiliser la technologie de rupture pour mettre John et Doe sur une autre ligne. Ce que je pourrais aussi faire, c'est simplement diminuer la taille du texte. Nous allons continuer avec une autre division qui organisera les réseaux sociaux. Nous allons définir la marge par le haut, la disposition de la boîte flexible sur un écran plus petit, nous y définirons la justification entre les deux Cela signifie que nous n'aurons aucun espacement entre les éléments. Sinon, nous utiliserons le centre Justify et le centre de l'article pour centrer les éléments horizontalement et verticalement. Nous y définirons un certain écart, puis après ce point d'arrêt, nous définirons la colonne de direction de flexion Cela signifie que les éléments seront placés les uns en dessous des autres. Nous y définirons la technologie des paragraphes avec tous droits réservés, et nous définirons le texte avec une note de 200 Ensuite, nous créerons une liste ordonnée avec Flexbox Layout, Gap 25 et Flex Wrap Cela signifie que si les articles dépassent la ligne, ils seront enroulés en dessous. À l'intérieur, nous cartographierons les liens sociaux, notre tableau, nous le créerons là. Et là, nous structurons l'icône et l' étiquette HRF dans notre tableau Cela signifie que désormais, au lieu d'avoir à écrire une icône ou une étiquette HRF à point sur les liens sociaux dans la fonction, nous pouvons accéder directement à icône et à l'étiquette Hf en tant que variables individuelles Nous allons créer un pont d' ancrage et définir l'étiquette clé HRF comme étiquette de zone Hf comme étiquette, et le nom de la classe, nous définirons le texte gris 200, la disposition de la boîte flexible, centre des éléments et le centre de justification pour centrer cette largeur et cette hauteur verticalement et horizontalement sur dix, l' arrondir au complet, et au survol, nous ferons du texte gris 100 avec À l'intérieur, nous allons créer une technologie d'icônes avec une taille définie à 30. Voici à quoi ressemblera notre pied de page au final, et nous pouvons également vérifier la réactivité Et maintenant, nous pouvons ajuster les couleurs, opacité de chaque élément et modifier le design selon nos besoins 26. Composant réutilisable : paramètres clés: Nous allons maintenant passer à la matrice des clés. Nous allons commencer par déclarer utiliser le client pour indiquer que ce composant utilisera les fonctionnalités du site client. Ensuite, nous importerons React et Motion, puis utiliserons et visualiserons depuis la bibliothèque de mouvements Framer Et nous allons définir un tableau d'objets métriques, chacun contenant des informations sur une métrique spécifique. Et à l'intérieur, nous commencerons par le premier élément qui aura un identifiant, une valeur, une étiquette et une description. Maintenant, je vais ajouter quelques éléments métriques supplémentaires. Tu peux t'inspirer. J'ai plus de cinq ans d'expérience, plus de 50 projets terminés, 50 projets terminés, puis la qualité du code et les commentaires sur Github Dans le composant Kemetric, nous allons commencer par créer une référence que nous utiliserons dans View Hook Nous allons créer une référence en utilisant le hook react use rep qui sera attaché à l'élément de section La référence est saisie en tant qu'élément HTM, car elle sera utilisée sur la balise de section valeur initiale est nulle car la référence n'a encore été attachée à aucun élément, et cette référence sera utilisée avec le hook using view pour détecter le moment où la section entre dans la fenêtre d'affichage Ensuite, nous utiliserons le hook using view pour déterminer si le composant se trouve dans la fenêtre d'affichage Nous utiliserons l'arbitre et une fois il tombera. La référence est la référence à l'élément que nous voulons observer et une fois fausse, cela signifie que nous allons configurer que le crochet suivra en permanence la visibilité de l'élément. En retour, nous allons créer une section dédiée aux mouvements. Nous y définirons l'état initial de ref à ref qui sera invisible et 50 pixels en dessous. Animate utilisera un opérateur de tour et vérifiera si cela est vrai dans la vue Il définira la visibilité ou l'opacité à un et à l'état final Et si c'est faux, il le définira sur invisible, avec une opacité nulle, et encore une fois, sur 50 pixels en dessous. La durée de l'animation sera de 0,8 seconde, et les classes sont container et mixdo pour centrer le conteneur parce que le conteneur a une certaine largeur, puis un décor de mariage et du texte en blanc Ajoutera le mouvement H deux pour l'utiliser comme titre de métrique clé. L'état initial sera égal à zéro et Y à 20. Animate utilisera à nouveau l'opérateur Turno en position réelle visible en position forcée invisible, transition avec un délai de 0,2 seconde et une durée de 0,6 Pour les noms de classe, nous allons définir la taille du texte sur six Excel, police sur le gras et la marge sur les 12 derniers. Nous allons continuer avec une autre profondeur qui utilisera une disposition en grille. Nous allons définir les colonnes de la grille pour le moyen et le grand écran. Et nous y fixerons également un écart de huit. Il y a donc un certain écart entre les éléments. À l'intérieur, nous allons commencer par le mappage du tableau matriciel. métrique sera le nom de l'élément et indexera la position. Nous allons créer le disque de mouvement, et la clé sera l'identifiant du point métrique. Nous allons définir l'état initial, et aussi, encore une fois, nous allons définir l'animation, où nous utiliserons l' opérateur Turner, comme avant, car nous aimerions déclencher cette animation encore et encore chaque fois que nous l' aurons dans la fenêtre d'affichage Transition Pour que toutes les métriques soient affichées à un moment différent, nous ajouterons également une nouvelle valeur d'indice, et nous la multiplierons. Cela signifie que chaque indice aura une valeur plus élevée, ce qui créera un effet de vague où le premier indice sera affiché plus rapidement que le précédent. De plus, il utilisera une disposition flexbox avec un volume de direction flexible pour placer les éléments les uns en dessous des autres Ensuite, nous allons créer le titre trois. Dans cette troisième rubrique, nous allons afficher la valeur du point métrique. Nous allons définir l'animation et la transition initiales exactement comme je l' ai indiqué dans le Div ci-dessus Et les noms des classes, nous y définirons pour notre valeur métrique un texte de cinq Excel, boulon de police et un peu de couleur. Nous avons également défini les deux derniers de la marge. dessous de ce titre, nous allons passer à la motion B pour la technologie des paragraphes. Nous y définirons une étiquette à points métriques. Encore une fois, nous allons définir l' animation et la transition initiales, et les noms des classes seront le texte Excel, la police semi-volt et la marge inférieure deux Ensuite, nous allons créer un autre point de mouvement B pour la balise de paragraphe qui contiendra la description du point métrique. Nous pouvons simplement le copier-coller et modifier les classes de vent arrière pour Text Gray 400, et ce sera pour nos indicateurs clés 27. Composant réutilisable : animation de logo: Pour l'animation du logo, nous déclarerons d' abord utiliser le client pour ce composant, car nous aurons leurs mises à jour dynamiques du QI pour l'animation infinie du logo. Nous allons poursuivre les importations. Lors des importations, nous allons importer l'image à partir de l'image suivante, puis le mouvement à partir du cadre ou du mouvement et en dessous les images des actifs. Si vous n'avez pas encore la bibliothèque d'images ou de mouvements, vous allez ouvrir le terminal et exécuter NpMiFramr Alors ça marchera. Nous allons continuer avec la création d'un tableau qui s' appellera images inside, nous aurons la source et la source de l' image importée que nous avons là, qui ne sera que le nom du logo. J'ai déjà mangé Figma. Maintenant, j'ai l'uremi pour que cela puisse être corrigé. Dans l'animation du logo, nous commencerons par un div et à ce div, nous ajouterons un rembourrage vertical à huit, arrière-plan que nous pourrons modifier ultérieurement ou mettre à jour pour adapter notre design Nous y avons également défini l' opacité à 0,8, ce qui signifie que nous n'avons pas nécessairement besoin d'appliquer l'opacité de 0,1 à notre couleur Nous allons continuer avec un autre div et ce div aura une classe de container et mix auto pour le centrer. Ensuite, à l'intérieur, il y en aura une autre , avec une classe de débordement masquée et une autre classe qui créera l'effet selon animation de notre logo s'estompe depuis la gauche et réapparaîtra à l'écran sur la droite avec le réglage d'un transparent Vous verrez l'effet juste après avoir ajouté les éléments eux-mêmes. À l'intérieur de ce div, nous allons ajouter un div de mouvement pour l'animation. Nous y définirons quelques classes favorables pour la mise en page Flexbox, écart à 14, le flex à aucun et la literie à droite jusqu'à Nous allons ajouter l' animation pour traduire X -50 % afin de définir les propriétés de l' animation Cela signifie que cette propriété d'animation déplacera le contenu horizontalement et que -50 % signifie qu'il se déplacera vers la gauche sur la moitié de sa largeur, ce qui créera un effet de défilement continu lorsqu'elle est combinée la répétition infinie de la propriété de transition que nous avons juste en la propriété de transition que nous avons juste Nous y avons également fixé la durée à 35. Maintenant, comme mentionné, la répétition à l' infini est linéaire et de type boucle de répétition. Peut-être vous demandez-vous également pourquoi nous avons autant d'éléments et d' éléments dupliqués dans notre gamme d'images. C'est parce que nous avons besoin de nos logos, d'une largeur spécifique. S'il n'y a que quatre objets, nous ne pouvons pas rendre cette boucle infinie car elle ne sera réservée qu' aux objets qui circulent et il semblerait qu'il n'en manque que quelques. C'est pourquoi nous pouvons simplement dupliquer ces éléments, disons, deux fois, et cela créera cette animation en boucle infinie. Si vous avez autant de logos que vous souhaitez saisir dans cette animation de logo, vous n'avez pas besoin de le dupliquer. À l'intérieur, nous effectuerons le mappage sur le tableau d'images, où l'image est l'élément actuel du tableau et l'index sa position. Ensuite, nous ajouterons la balise image, et nous définirons la clé comme index, source comme point source d'image, Alt comme point d'image ancien que nous avons dans notre tableau. Et aussi de la hauteur jusqu'à la salissure. Nous allons l'enregistrer et nous verrons que le composant fonctionne désormais. Vous pouvez également y voir le transparent de gauche à droite et voir comment cela donne l' impression que l'animation s'estompe vers la gauche et apparaît lentement depuis le côté droit Pour vérifier cette réactivité, en gros, il n'y a pas grand-chose à vérifier Sur le petit écran, il affichera simplement moins de logos en même temps. 28. Composant réutilisable : barre de navigation: Commençons maintenant par coder la barre de navigation. Nous devrons importer les dépendances requises. Next Jz lie les composants pour la navigation côté client, réagit et utilise State Hook pour la gestion des états, et les icônes des icônes de la bibliothèque React Icônes Nous pouvons voir que cette bibliothèque d'icônes React nous montre une erreur. C'est parce que cette bibliothèque n'est pas installée. Copions-en le nom, ouvrons un terminal, faisons NPM I et y collons le nom de la bibliothèque Maintenant, nous allons appuyer sur Entrée pour installer la bibliothèque, et quand nous reviendrons à notre composant, il n'affichera plus d'erreur. Comme nous utilisons use state, qui est une fonctionnalité du site client, nous devrons définir ce composant comme use client pour indiquer que ce composant s' affiche sur le site client. Nous allons continuer à définir un tableau de liens de navigation avec le titre et le chemin de chaque lien. Cela permettra de garder les éléments de navigation organisés et facilitera l' ajout de nouveaux liens chaque fois que nous le souhaiterons. Nous pouvons maintenant accéder directement au composant Navbar. Ce que nous devons faire, c'est initialiser l' état du menu de navigation mobile Ce NAF sera un boolin permettant de savoir si le menu mobile est ouvert ou fermé, et Set NAF sera une fonction permettant de mettre à jour l'état du Dévotement, cela sera réglé sur des chutes. Nous déclarerons ensuite une fonction permettant d'activer ou de fermer la navigation mobile, et elle définira le NAF à une valeur différente de celle qu'il sera Ainsi, chaque fois que vous cliquerez sur le bouton, la valeur sera modifiée, et nous l'utiliserons ensuite sur notre élément pour fermer et ouvrir le menu Nous créons également une fonction de fermeture du NAF, qui sera utilisée chaque fois que vous cliquerez sur le lien pour nous assurer que notre navigation se En retour, au lieu de fragments vides, nous allons commencer par DIF. Pour les cours, nous utiliserons l'indice Z 250. Nous utiliserons une position fixe, ce qui signifie que chaque fois que nous ferons défiler la barre de navigation, la disposition Flexbox, afin que nous puissions utiliser centre de justification pour centrer les éléments de navigation Nous définirons la largeur en entier, le texte en blanc et la police en gras. Ensuite, nous allons créer un identifiant pour la navigation sur le bureau. Pour la navigation sur le bureau, nous utiliserons également une bordure et la définirons pour qu'elle soit blanche avec une opacité de 0,2 Ensuite, nous allons créer une marge à partir du haut et un flou de fond car lorsque nous ferons défiler la page, nous aimerions que notre barre de navigation soit bien visible Faisons également en sorte qu'il soit arrondi avant Excel, y ajoutant des radios de bordure. Sur l'écran mobile, cela sera masqué et sur l'écran moyen et supérieur, il sera affiché de manière flexible. Encore une fois, parce que nous aimerions centrer les éléments avec le centre des éléments et justifier centre horizontalement et verticalement. Nous y ajouterons de la literie et nous fixerons également une largeur maximale à 400 pixels. Si vous ajoutez d'autres éléments à votre barre de navigation, vous pouvez l'augmenter. Ensuite, vous allez configurer Mito pour qu'il le centre également. Maintenant, si vous y ajoutez quelque chose et que vous l'enregistrez, vous pouvez voir notre barre de navigation sur la page Mais pour n'y ajouter que quelques lettres, cartographions les éléments et ajoutons-les là. Avant de les cartographier, nous allons créer une liste non ordonnée pour eux. Cette liste non ordonnée utilisera une mise en page flexible du livre et une ligne flexible Cela signifie que les objets seront côte à côte. Nous allons à nouveau en ajouter quelques en attente et SpaceX huit. Cela signifie que nous aurons un certain écart entre tous les éléments horizontalement. Pour la cartographie, nous utiliserons la carte à points de Nablns. Et nous utiliserons un lien qui sera le nom de chaque élément de cette carte et de cet index. À l'intérieur d'une liste ordonnée et de ce mappage, nous allons créer l' élément de liste avec un index clé, Reactive utilise cette clé pour optimiser les performances de rendu, puis nous assignons l'index du tableau en tant que clé Dans cet élément de liste, nous ajouterons une balise link avec hrefsetlin point Pav que nous avons dans Cela signifie qu'une fois que nous aurons ajouté des identifiants à nos autres sections, nous arriverons à la section souhaitée. Et puis un nom de classe dans lequel nous allons transformer son texte en blanc avec une opacité de 0,5 Cela signifie que lorsque nous survolerons les éléments de notre liste, nous verrons lequel nous survolons actuellement ensuite la transition avec une durée définie sur 300 et ralentissez pour rendre cette animation de survol plus fluide De plus, vous pouvez maintenant voir sur notre page que nous avons la mise en page avec la navigation, mais qu'il n'y a aucun élément. Ce que nous devons faire, c'est accéder au titre du point de lien que nous avons dans notre tableau. Lions le titre, enregistrons-le, et nous pouvons maintenant voir que notre barre de navigation est sur la page Nous pouvons nous déplacer ci-dessous et coder la version mobile de cette barre de navigation. Nous allons y créer un div et ajouter à cette fonction DIF onclick Cette fonction OnClick que nous allons ajouter est Toggle NAF, qui signifie que chaque fois que vous cliquez sur ce div, elle exécute cette Nous avons et dans cette fonction tognav, vous pouvez voir qu'elle modifiera la variable NAF Cela signifie que chaque fois que nous cliquons sur ce div, l'état du NAF passe à vrai ou à faux Nous allons maintenant utiliser ce qu'on appelle un opérateur ternaire. Nous vérifierons la valeur de notre NAF, et si elle est vraie, il exécutera cette icône fermée en plan, et au cas où elle serait fausse, quelle est la valeur par défaut, nous verrons icône de menu sur notre mobile Sauvegardons-le maintenant. Et je vais également changer la mise en page pour une version mobile. Vous pouvez maintenant voir notre icône de menu. Et si je clique dessus, vous pouvez voir comment il est modifié pour passer et revenir au menu Hamburger Nous ajouterons un nouveau DIV, et à ce div, nous ajouterons un nom de classe, et à l'intérieur de ce signe dollar entre accolades, nous utiliserons un autre opérateur Turner Si notre variable NP est vraie, nous définirons la traduction X zéro, et si elle est fausse, nous définirons la traduction négative X complète. Cela signifie que nous allons déplacer nos éléments de menu vers l'extérieur et les faire revenir sur l'écran. Les autres classes que nous ajouterons ont une position fixe à gauche et en haut à zéro. Nous réglerons la largeur à pleine et la hauteur à pleine. Fond noir avec une opacité de 0,9, transformation de transformation et de transition et une durée de 300 pour l'animation elle-même. Nous allons l'enregistrer maintenant et nous pouvons le tester. Et tu peux voir comment ça bouge. Bien sûr, il nous manque toujours des éléments, mais nous allons les ajouter maintenant. Nous pouvons laisser cette navigation ouverte, et à l'intérieur, nous pouvons commencer à ajouter les éléments. Comme précédemment, nous devons créer une liste non ordonnée et nous ajouterons la disposition Flexbox avec Flex Direction Colum afin que nos éléments de liste soient placés les uns en dessous Nous les centrerons verticalement et horizontalement, et nous utiliserons l'espace par huit. Cela signifie que nous allons créer un espace vertical entre eux. Nous y avons également réglé la hauteur deux fois complète. Comme auparavant, vous pouvez simplement copier-coller ceci. Nous ajouterons ce mappage sur le tableau Nablks avec Link étant le nom de l'élément actuel et l' index étant la position Ensuite, nous utiliserons cet index dans la clé. Après avoir créé la balise Link, nous y définirons le chemin du point Hf toolink et le titre du point Link pour le nom de l'élément de navigation Nous allons maintenant l'enregistrer et nous pouvons le voir sur notre page. Nous éditons également leur fonction « on click » pour fermer la navigation. Cliquons, par exemple, sur le portfolio. Avec cela, nous pouvons encapsuler le composant Navbar. 29. Composant réutilisable : portfolio: Une section de portefeuille, nous allons commencer par les importations, puis nous continuerons à créer une constante de projet. Dans cette constante, nous chargerons nos projets, puis nous les passerons en revue et les afficherons dans nos cartes que nous coderons Pour les projets, je mettrai leur identifiant. Pour le premier, il y en aura un. Ensuite, je mettrai leur titre, puis leur catégorie. Et le dernier sera la source de l'image. Pour le premier projet, il ne s' agira que de celui-ci. Maintenant, je vais faire le coma, et je vais le copier encore trois fois parce que j'ai les quatre projets je vais afficher au total, ou je vais simplement mettre à jour les identifiants. Je vais mettre à jour la source de l'image du projet. Maintenant, je vais trouver une description, et je vais utiliser ces quatre sites Web que j'ai trouvés sur Framer dans notre composant fonctionnel, puis dans le retour, nous supprimerons ces fragments vides, et nous allons commencer par la section Et pour cette section, nous allons définir BY sur 16. Nous avons donc un peu de rembourrage par le haut et aussi par le bas. Ensuite, à l'intérieur, nous poursuivrons la cartographie de nos projets. Faisons leurs projets à la carte des points. Index du projet, et à l'intérieur, nous allons commencer par le mouvement Div. Passons maintenant au début, et là nous allons importer le mouvement à partir d'une image ou d'un mouvement. Maintenant, nous allons utiliser motion div et maintenant nous allons utiliser motion Div. Dans ce motion div, nous allons mettre tout le contenu. Nous allons maintenant définir la première technologie de démarrage de Motion Div et y définir la clé comme identifiant de point du projet. Nous allons maintenant définir le nom de la classe. Nous utiliserons une bordure avec une bordure blanche d'opacité de 0,2, puis une disposition flexbox avec une colonne de direction flexible qui signifie que les éléments situés à l'intérieur cette profondeur seront placés les uns Ensuite, nous allons poursuivre sur un écran moyen le test de conversion Nous allons faire du flex raw. Cela signifie que les éléments seront côte à côte. Nous y mettrons le texte en blanc, et nous y mettrons également un Excel arrondi. Faisons Tree Excel. Maintenant, nous pouvons déjà voir quelque chose sur notre page. Ensuite, nous allons continuer avec arrière-plan dont nous allons définir le dégradé à droite, et nous allons définir ses couleurs à partir de deux. Maintenant, comme il s'agit de certains codes que j'ai définis dans Figma plus tôt, je vais simplement les copier-coller et cela devrait créer une couleur grisâtre. Nous y ferons de la literie. Ensuite, nous y définirons la justification entre les deux. Cela signifie que nous aurons un espacement uniforme entre nos éléments dans cette différence , de la marge au bas des éléments Pour le moment également, nous allons définir la largeur. Définissons une largeur initiale sur l'écran du mobile. Il y aura 300 pixels, et sur un écran moyen ou supérieur, utilisons quelque chose comme 1 100 pixels, mais nous pourrons ajuster ces valeurs ultérieurement Nous pouvons enfin voir la forme de nos cartes. Nous voudrons que cela soit collé sur le dessus. Utilisons un verre autocollant avec le top 28. Cela signifie que lorsque nous ferons défiler la page, ces objets se colleront les uns sur les autres, ce qui créera l'effet d' empilement de cartes Maintenant, si nous passons à la section d'emballage, nous pouvons y mettre un récipient et un mix auto. Cela signifie que nos projets seront centrés. Si je mets quelque chose comme hauteur principale à 300 viewporteit, je pourrai faire défiler ma page vers le bas Et vous pouvez voir qu'il y a la première carte, et je fais défiler la page vers le bas, elles se superposent. Ensuite, comme cela fonctionnera il y aura une autre section, et ce composant du portfolio sortira simplement de la fenêtre d'affichage, donc nous ne le verrons pas Et lorsque nous ferons défiler la page vers le haut, nous verrons à nouveau toutes les cartes les unes en dessous des autres Je vais maintenant définir leur état initial de notre animation. Cela signifie que nous allons commencer par zéro d'opacité. Cela signifie que les éléments commenceront de manière invisible et que ce Y sera également inférieur de 50 pixels à sa position finale. Pour la prochaine, ce sera pendant la vue, et celle-ci est la définition de l' animation lorsque les éléments apparaîtront. Là, nous allons régler l'opacité à un et Y à zéro. Ensuite, ce sera la transition. Cela signifie que la durée sera pour nous d'une demi-seconde et que le délai sera indexé par 0,2. Cela signifie qu'il y aura un certain retard dans l'animation, ce qui signifie que tous les éléments ne seront pas affichés sur notre page, mais avec l'index, cela sera plus retardé. quoi cela ressemblera, c'est que la première carte sera affichée en premier , puis que le reste de la carte affichera lentement après celle-ci, car cela créera cet effet de vague lorsque le premier élément sera affiché, puis lentement, tous les autres éléments seront également affichés. Maintenant, nous allons également définir un port d'affichage que nous définirons une fois True. Cela signifie que cette animation se déclenchera une fois que l'élément sera visible. Ce sera pour la définition de la motion. Nous allons commencer par analyser la technologie du paragraphe contenue dans cette balise de paragraphe, nous aurons une catégorie de points du projet. Ci-dessous, ce sera le titre deux. Il y aura un point sur le titre du projet. Ensuite, nous aurons une liste ordonnée à l'intérieur de cette liste non ordonnée Nous aurons un élément de liste, et à l'intérieur de ces éléments de liste, nous aurons des puces. Ce que nous avons réalisé avec le projet se trouve dans la section « technologie des paragraphes » dans notre liste Je vais améliorer l'expérience utilisateur de 40 %. Pour la catégorie de projet, je vais faire quelque chose comme du texte en gris, 200, puis du texte en petit. Pour le titre du projet, je vais créer du texte dans Excel, en police, les deux, et sur un écran moyen, nous pouvons l' augmenter en texte pour Excel. Pour la liste désordonnée, nous allons faire un espace Y deux. Cela signifie que tous ces points sont séparés par un certain espacement et non par des arches empilées les unes sur les Pour l'élément de liste, je vais faire une mise en page flexible et des éléments à centrer. Et puis à côté de ce point, je vais créer une icône de réaction. Nous pouvons vérifier les contours de l'IA. Pour cette icône, nous utiliserons React Icones AI. Laissez-moi faire des icônes NPM I React. Maintenant, si nous faisons cette vérification, nous avons cette option pour cette bibliothèque. Je vais entrer. De cette façon, il sera importé. Maintenant, si je le sauvegarde, cela fonctionnera. Sur notre page, nous avons cette icône, et nous allons ajouter le nom de la classe avec 25 de largeur et 25 de hauteur et le texte Emerald 400. Maintenant, regardons la page. Nous ne l'avons pas augmenté, mais voici quelques valeurs que vous pouvez augmenter au cas où vous souhaiteriez augmenter ce contrôle. Je vais le laisser comme ça. Et je vais également y placer cet élément de liste X quatre . Je vais prendre cet élément de liste, et je vais le coller deux fois de plus. Ensuite, pour améliorer l'expérience utilisateur, je vais simplement le remplacer par un autre texte. Nous pouvons améliorer la vitesse latérale de 50 %. Et pour le dernier, le trafic mobile a augmenté de 35 %. Bien entendu, voici quelques exemples de valeurs qui peuvent s'y trouver. Et aussi, actuellement, nous l' avons codé en dur. Ce que nous pouvons faire, c'est y créer un nouveau champ. Je vais faire le point 0.1. Ensuite, je vais le copier, coller, faire le point 0.2, puis le troisième. Ensuite, je vais l'utiliser même avec la virgule, et je pourrai l'appliquer à d'autres projets Ensuite, je vais prendre ces valeurs. Mets-le là. Et aussi ce point. Et même le dernier. Et au cours de l'itération, je vais faire le projet bullet 0.1, coller pour les autres, faire le bullet 0.2 et trois Et maintenant, par exemple, si c'est pour le quatrième projet, je vais le remplacer par quelque chose de aléatoire. Sur notre page, vous pouvez voir que nous l'avons bien compris, mais juste pour le premier, nous avons une valeur différente. Nous avons maintenant un problème avec la première carte. Est-ce que j'ai oublié quelque chose ? Oui, j'oublie d'y mettre les valeurs. Permettez-moi de le dire comme ça, de le sauvegarder. Et nous allons continuer ci-dessous la liste non ordonnée avec l'image Et pour cette image, nous allons définir la source du projet, source de l'image, puis nous allons mettre le titre du projet en point, puis nous allons mettre 500 en hauteur, nous en mettrons 300 et au nom de la classe, nous mettrons un point arrondi en gros. Maintenant, nous allons le sauvegarder. Vous pouvez voir à quoi ressemblent nos fiches de projet et quelques mesures que nous devrions prendre. La première est que nous devons prendre la valeur arrondie de même valeur que celle que nous avons dans le mouvement div. Nous utilisons leur arbre Excel. Cela signifie que nous le mettrons également pour la photo. n'y a alors aucun problème dans cette rangée de flexibilité moyenne qui devrait être comme ça. Il y a un problème où il manque un div. cette ligne flexible, nous voulons maintenant avoir un div pour le texte, Sur cette ligne flexible, nous voulons maintenant avoir un div pour le texte, puis l' élément image fonctionne bien tout seul car il sera placé sur le côté droit. Comme il s'agit d'une ligne flexible, cela signifie que si nous voulons mettre ce texte dans un div et me laisser également y faire un onglet. Ces deux éléments seront côte à côte, et sur un écran mobile, et sur un écran mobile, ils seront placés l'un en dessous de l'autre avec cette colonne de direction flexible. Ce que nous pouvons maintenant faire dans ce div qui contient les informations de notre projet, nous allons y placer un espace allant de Y à quatre. Ensuite, si nous voulons entrer dans cette division de mouvement d'emballage, j'y mettrais un espace de X à quatre. Et je ferais même leur space y26. Maintenant, si nous allons vérifier la page, nous devrons augmenter la marge vers le bas. Maintenant, augmentons ce chiffre à 24. Nous passerons également à cette division de mouvement et nous mettrons le Mx Auto. Maintenant, elle est centrée et nous pouvons maintenant tester notre section portfolio, et lorsque nous faisons défiler la page vers le bas, elles se chevauchent Ce sera pour la section du portfolio. 30. Composant réutilisable : portfolio 2: Nous allons d'abord activer les fonctionnalités côté client avec use client. Ensuite, nous allons importer React et utiliser State Hook avec l'effet d'utilisation Hook. Ensuite, nous allons importer l'image à partir de l'image suivante. Nous allons importer les images du projet à partir du dossier Assets que nous allons afficher. Je vais créer des projets const, et pour chaque projet, je vais créer un identifiant Je vais créer ici, je vais créer un titre, je vais créer une courte description, et je vais également mettre l'image. Maintenant, ci-dessous, je vais ajouter d'autres projets, et cela ressemblera à ceci. J'utiliserai trois projets dans le volet portefeuille. J'initialiserai l'état des projets sélectionnés en passant au premier projet Nous allons donc faire des projets et être les premiers dans le tableau avec zéro. Ce sera la variable d'état, et avec elle, nous la définirons. Maintenant, nous pouvons passer directement au retour. Là, nous allons commencer par la section. Dans celui-ci, nous pouvons faire l'identification du portefeuille. Dans un nom de classe, nous allons faire du PY 32 et du texte en blanc. Dans cette section, nous allons commencer par le titre deux. titre deux contiendra le titre des projets sélectionnés. Nous pouvons placer les projets dans une technologie Spen au cas où nous souhaiterions y ajouter une couleur différente De plus, pour le style du titre deux, nous allons au texte six Excel, boulon de police et la marge du bas à dix. dessous de cette deuxième rubrique, nous allons cartographier le tableau du projet pour créer les éléments du projet. Je vais faire des projets point Map. Le nom de l'élément dans l' itération sera project. Là, nous pouvons ouvrir notre recherche dans ce div, nous allons définir une clé comme identifiant de point du projet. Nous allons définir la fonction OnClick. fonction Onclick sera le réglage de la variable d' état Nous y définirons le projet sélectionné. Pour projeter. Nous allons maintenant faire des cours de fin de gamme. s'agira du curseur, du pointeur, de la marge vers le bas et du groupe. Nous allons continuer à afficher le projet ici. Nous allons faire la technologie des paragraphes avec le point du projet ici. Nous allons maintenant y ajouter un style, et ce sera une couleur de texte différente. Le texte est également grand et la marge vers le bas, et en dessous, nous pouvons continuer avec le titre trois. Ce titre trois contiendra le titre du projet à point. Le style que nous y ajouterons sera un Excel sans texte, groupe de polices semi-boulons, notre texte gris, 400, couleurs de transition, une durée, 300, et nous allons le faire encore une chose. Remettons là des guillemets avec les bretelles bouclées. Parce qu'à l'intérieur, nous allons vérifier si ce projet est celui sélectionné, et si oui, nous allons afficher la couleur différente du texte. Faisons en sorte que l' ID de point du projet sélectionné soit égal à la vérification de l'identifiant du projet, opérateur Turner , et dans le cas contraire, nous ferons le texte gris 200 dans le cas contraire, nous ne ferons rien. La fausse position sera donc vide. Nous utiliserons des couleurs de transition car elles permettront une transition fluide, spécifiquement pour les propriétés liées aux couleurs. Cependant, comme nous utilisons ce groupe, ce sera pratique. Maintenant, nous pouvons déjà voir sur notre page que nous arrivons quelque part, et nous allons maintenant continuer à afficher la ligne de séparation au cas où le projet serait sélectionné Nous nous occupons de leur condition. Donc, ce projet, point ID est égal à l'identifiant du projet, essentiellement le même que celui que nous avons utilisé là-bas, mais nous n'avons pas besoin d' utiliser un opérateur de tournage. Nous ne ferons que du rendu conditionnel. Donc, au cas où cela serait vrai, nous afficherons un DIV vide. Et à ce div, nous ajouterons la classe border bottom two avec border grey 200 et aussi la marge verticale MI à quatre. Nous pouvons voir sur notre page que nous avons sélectionné le premier projet qui s'y trouve. Si je mets le deuxième ou le troisième, il bougera. Un autre rendu conditionnel que nous allons faire, nous pouvons donc simplement le copier-coller il figurera sur la description du projet. Si le projet est sélectionné, nous vous montrerons la description du projet. Je vais simplement ouvrir ce dif, y mettre la description du projet par point, et je vais changer cette balise div en balise de paragraphe De plus, je vais ajouter des classes un peu différentes. Je n'ai pas besoin de la frontière. J'ajouterai du texte gris, 400, une transition de toute durée, 500 et un assouplissement pour que l'affichage soit fluide. Nous allons maintenant faire défiler la page en haut de cette déclaration, et là, dans la section, nous allons créer un div et nous allons enrouler ce div autour de ce mappage. Maintenant, pour ce div, nous allons ajouter quelques classes. Commençons par une largeur maximale de sept Excel, puis mélangeons Audio, px quatre, ça devrait être tout pour le moment. Nous allons nous déplacer vers le bas et en dessous de cette division. Nous y mettrons une balise d'image à l'intérieur de cette balise d'image. Nous définirons la source pour le projet sélectionné point mag point SRS. Pour tous, nous choisirons le titre à point du projet sélectionné. Pour le nom de la classe, nous allons l'arrondir, Excel, ombre large, opacité de transition, durée 500 et ceci pour créer une animation fluide De plus, nous réglerons la largeur à 800 et la hauteur à 450. Nous allons le sauvegarder. Maintenant , ça devrait aller. Maintenant, nous devons jouer un peu avec les différences. Permettez-moi d'ajouter le div supplémentaire pour regrouper les informations de projet que nous y avons créées. Passons maintenant à la deuxième division. Nous ajouterons des classes de disposition en grille, et sur grand écran, nous utiliserons deux appels de grille avec Gap 212. Maintenant, cela devrait prendre cette division, et bien sûr, la fin de la deuxième division que nous allons mettre ci-dessous. Maintenant sur la page, tout ira bien. Maintenant, nous allons également formater le code. Vous verrez mieux la structure de la division. Cela devrait aller encore plus loin. Cela devrait également aller encore plus loin, nous allons le déplacer, et cela devrait aller. Nous commençons donc la section technique et nous poursuivons avec le DIF. Dans ce div, nous avons un div qui contient les informations du projet ainsi que l'image avec le projet lui-même. 31. Composant réutilisable : services: Composant de services, nous allons créer à l'intérieur du composant un ensemble d'objets de service contenant les informations sur chaque service que nous aimerions offrir. Chaque objet aura une propriété d'identifiant, de titre et de description. Faisons leurs services constants. Et à l'intérieur, nous pouvons faire le premier élément où nous définirons l'identifiant, puis le titre et aussi la description. Maintenant, je vais ajouter d'autres services, et au final, le tableau ressemblera à ceci. En retour, au lieu des fragments vides, nous créerons une balise de section, et à l'intérieur de la section, nous ajouterons d'autres éléments. Pour la section elle-même, nous classerons le nom du texte blanc et le PY 20. Pour y avoir une couche verticale, nous allons ajouter une division, et nous y ajouterons des classes de vent arrière avec conteneur, et nous mélangerons Auto pour le centrage et la disposition Flexbox pour utiliser la direction flexible Colum pour placer nos articles les uns en dessous des autres Sur un écran moyen et supérieur, nous y définirons la ligne de direction du flex. Cela signifie que les objets seront côte à côte. Ensuite, nous ajouterons deux divs. L'un portera sur le titre des services et le second sur les éléments de notre gamme. Le premier jour, les classes d'écran moyen au-dessus utiliseront un quart de largeur, la touche droite sera réglée sur huit, marge vers le bas sera réglée sur 12 et sur l'écran moyen, nous remettrons cette marge du bas à zéro À l'intérieur, nous allons faire le deuxième titre avec les services et nous y définirons du texte, six fichiers Excel, une police supplémentaire, position adhésive et le top 20. Quelle est la position dans laquelle vous aimeriez le placer. Que signifie « position collante » ? Cela signifie que chaque fois que nous faisons défiler la page, l'en-tête des services défile avec nous. Nous ajouterons un autre div, et nous resterons là pour un écran moyen et au-dessus d'une largeur de 75 %. À l'intérieur, nous allons commencer à cartographier la gamme de services. Là, l'article sera servi. Nous n'avons pas besoin d' utiliser l'index car nous utiliserons l'ID de service comme clé. Et pour le nom de la classe, nous utiliserons la marge inférieure à 16 et disposition flexbox pour utiliser le début des éléments , car nous aimerions y aligner nos éléments Ensuite, nous ajouterons deux autres difs. L'un servira à contenir le numéro, qui sera l'identifiant, et le second à contenir les deux autres champs, le titre et la description. Pour le premier dif, nous utiliserons boulon de police couleur de grade 300, du texte Excel de cinq et une marge allant de droite à six Pour la deuxième division, nous n'avons rien à faire. Dans le premier div, nous ajouterons également un numéro de point de service. Maintenant, si nous voulons l'enregistrer, vous pouvez voir que nous avons leurs numéros pour tous nos services. Ce qui reste, c'est que dans la deuxième division, nous ajouterons les deux autres champs, puis la section ressemblera à ceci. Pour le titre 3, nous avons défini le titre du point de service, et pour la technologie du paragraphe, nous avons défini leur description du point de service. Pour le titre, nous ajoutons également du texte dans Excel, boulon de police et une marge inférieure. Ce que nous devons également faire, c'est prendre ce tableau et le mettre en dehors de la définition du composant car nous voulons éviter toute recréation à chaque rendu. Maintenant, voici à quoi ressembleront ces services sur d'autres appareils, et ce sera tout pour ce composant. 32. Composant réutilisable : pile: Le composant stack, nous le ferons dans les ports. Si vous n'avez pas encore ces bibliothèques, ouvrez un terminal, utilisez NPM, I, et copiez ces bibliothèques Par exemple, cet observateur d' intersection React. Que nous utiliserons pour que l' animation réapparaisse pour obtenir en utilisant la vue lorsque nous ferons défiler la page vers le haut ou vers le bas, cette animation de pile réapparaîtra Puis le mouvement du cadreur. Encore une fois, si vous ne l' avez pas encore, suffit de NPM, moi et mettez-le là, icônes de réaction. Nous pouvons également y mettre. Cela signifie que nous aurons accès à ces bibliothèques avec les icônes que nous utiliserons pour notre pile. Maintenant, nous allons entrer et installer les bibliothèques, je les ai déjà, mais je peux tout simplement recommencer. Maintenant, avant de définir le composant de pile, nous allons y créer un tableau d'éléments de pile avec des éléments de pile. Et là, pour chaque article, nous aurons un identifiant, puis un nom. La première sera le cadreur, puis l'icône, la première icône sera le cadreur avec une taille allant jusqu'à 100 Ensuite, pour ce qui est de la couleur, je peux m'asseoir là pour l'instant en texte vert 200, puis nous pouvons mettre leur virgule et le coller là autant de fois que nous le voulons Je vais mettre à jour les noms et les icônes. J'ai également sélectionné des icônes différentes pour les quatre autres icônes car il y avait des icônes réservées Nous allons maintenant utiliser Framer Figma, React Note, Mongo Di B Ensuite, nous allons passer en dessous, et là nous allons commencer à définir des variantes d'animation pour les éléments de la pile. Je vais commencer Cs variance ou item variance. Et là, je mettrai une variante pour hidden, qui prendra le numéro d'index. Là, l'opacité sera nulle et pour X, nous prendrons le reste de l'indice, et si c'est zéro, alors il sera de -100 position vraie et en position de force, il sera C'est ce qu'on appelle Turner Operator. Nous ferons ainsi en sorte que les éléments de la pile partent de gauche et de droite selon que c' est vrai ou faux. Ensuite, ci-dessous, nous en aurons un autre qui sera appelé visible, et pour celui-ci, nous réglerons l'opacité à un, x à zéro et passerons à la durée trois J'ai commencé par le mauvais décomposer pour en faire une à Carl. Remplaçons-le par le carré, et ci-dessous, nous pouvons commencer à définir le composant de la pile lui-même. À l'intérieur, nous allons commencer par configurer les commandes d'animation. Je vais rétablir les commandes constantes, et j'utiliserai l'animation. Ensuite, nous allons configurer l'observateur d' intersection. Cela signifie que nous allons maintenant régler le problème, nous l'y importons. Et avec cela, cette animation réapparaîtra lorsque nous ramènerons ce composant dans notre fenêtre d'affichage Là, je vais faire une constante, et j'utiliserai le ref et in view pour utiliser in view. À l'intérieur, je vais faire le seuil 2.1. Ensuite, je vais continuer à définir le crochet d'effet Use pour déclencher l'animation en fonction de l'état de la vue. Je vais utiliser l' effet puis à l'intérieur, je vais le conditionner, et si c'est le cas, nous ferons des contrôles qui commencent par visible. Et si ce n'est pas visible, je vais faire des contrôles qui commenceront par être masqués. Quelles sont ces deux variantes d' articles ? Ensuite, nous y dirons que cet effet s'exécutera chaque fois que les contrôles seront en vue, les dépendances changeront. Cela signifie qu'il déclenchera le démarrage de l'animation lorsque les composants seront visibles, et qu'il arrêtera également l'animation lorsqu'elle sortira de la vue. Là, nous allons créer une balise de section. Et dans cette balise de section, nous allons commencer par Div et laissez-moi vous expliquer pourquoi je fais le Div supplémentaire et ne le fais pas dans la section. Pour ce div, je souhaite définir un poids maximum. Pour l'instant, nous faisons quelque chose comme 250 pixels parce que nous voulons simplement que ce soit vertical, pas horizontal, mais nous pouvons également l'ajuster ultérieurement, le changer en horizontal et le configurer pour mélanger Oddo avec le texte au centre Nous avons donc ce centre. Pour la section. Si je veux mettre un arrière-plan spécial pour la section, peut-être un dégradé linéaire, je pourrais le faire là, et ce sera sur toute la largeur. Par exemple, arrière-plan sur fond blanc. Nous devons y mettre du contenu. Et permettez-moi d' y mettre du contenu et de mettre leur arrière-plan en vert. Vous allez maintenant voir les différences. Si je vais sur notre page, vous pouvez voir que le fond blanc cette balise de section d'emballage occupe toute la largeur et que le contenu que je souhaite utiliser avec ce fond vert se trouve à l'intérieur, et il a ce poids maximum que j'ai fixé à 250 pixels et que je l'ai centré. Si je veux le faire dans la section d'emballage, il faudra la section murale et le fond réel que je souhaite avoir ressemblera à ceci. Permettez-moi alors de l'utiliser comme ça. Pour l'instant, débarrassons-nous des arrière-plans. Là, je peux commencer par le titre deux. Dans cette deuxième rubrique, je vais mettre ma pile. Ci-dessous, je vais faire une plongée. Et dans ce div, je vais itérer sur les éléments de la pile Dans cette itération d' éléments de pile, je vais faire une division de mouvement. Et avant de commencer à faire ce div, je vais juste styliser le titre et le div qui l'enveloppe. Pour ma pile, j' utiliserai le texte sept, Excel, le texte gris, 200, le boulon de police et une marge vers le bas. Pour ce div, je vais simplement utiliser disposition en grille et passer à huit par défaut. Il n'y en aura qu'un seul sur le réseau. Cela signifie que tous ces écarts de mouvement seront placés les uns en dessous des autres et qu'ils se trouveront dans une seule colonne Voyons à quoi cela ressemblera. Mettons simplement le mouvement div dans l'ID du point d'index. Pour la valeur clé, puis pour la valeur personnalisée, nous allons mettre un index. Dans un premier temps, cela sera masqué. Et, bien sûr, pas l'identifiant de l'index, mais l' identifiant du point de l'article. Ensuite, nous allons animer deux contrôles, puis des variantes aux variantes d'éléments et pour un nom de classe, nous définirons le fond blanc à 0,1 opacité Nous allons continuer avec la disposition de la boîte flexible et centrer avec le centre de justification et les éléments à centrer horizontalement et verticalement Ensuite, flex raw, ce qui signifie que les éléments situés à l'intérieur du rigide seront côte à côte. Ensuite, nous utiliserons un Excel arrondi, une ombre large, un peu de literie. Et sur Her, nous pouvons simplement faire de l'ombre à Excel. Maintenant, dans ce mouvement dip, nous allons créer un div pour l'icône. Nous y ferons une icône en forme de point. Nous pouvons y ajouter un peu de classe, et à l'intérieur, je vais faire leur marge vers bas et le signe du dollar avec la couleur du point m. Cela signifie qu'il y définira nom de classe de la couleur du point de l'article, et nous y avons défini le texte vert 200. Ensuite, nous avons là l' icône elle-même, et ci-dessous, nous allons faire le texte où nous allons afficher le nom du point de l'article. Là, je vais faire du texte blanc avec une opacité de 0,2, du texte trois Excel Transformez et faites pivoter de 90 degrés. Maintenant, pour ce qui est de la plongée qui termine cette itération, je vais mettre la référence à Rev Cela signifie que cela permet à notre animation savoir quand ce conteneur est visible à l'écran Nous pouvons voir l' animation, comment elle se déroule. Il y a juste une chose que je dois corriger. nous manque T pour effectuer notre rotation de -90 degrés et je vais l'actualiser Vous pouvez voir comment fonctionne l' animation, et ce sera tout pour ce composant de pile.