Le méga cours Webflow pour les débutants - Construire un site Web de portfolio à partir de zéro dans Webflow.

1. Aperçu du cours: Et si je vous disais que vous pouvez construire un site entièrement fonctionnel à partir de zéro sans utiliser une seule ligne de cour et complètement gratuitement ? Vous pouvez le concevoir comme vous le souhaitez. Vous pouvez ajouter des animations. Vous pourriez avoir des interactions. Vous pourriez faire un responsive pour d'autres appareils, gros points et même hébergé venir à moi gratuitement. Hé, je suis champion et bienvenue à ma Magal. Mais bien sûr, pour la gentillesse dans ce cours, je vais vous apprendre comment prendre ce site web de portefeuille d'une page que j'ai conçu à partir de zéro dans fig MMA et nous construire à l'intérieur. Eh bien, coule complètement de zéro à nouveau. N' hésitez pas à utiliser son design pour vos propres quatre pour votre site web. Allez-y et faites des changements. Comme vous le souhaitez, si vous en avez besoin. D' accord. Alors parlons de ce que je vais t'enseigner dans ce cours dans la partition va t'apprendre les bases et les fondamentaux hors développement. Et qu'est-ce que vous devez savoir avant de commencer à construire un site web et je vais vous apprendre des choses sur box Réactivité moderne, grilles, grilles, mise en page, éléments, animations, interaction, poignarde les composants et bien plus encore et que vous voulez bouleverser est prêt, vous pourriez même hébergé complètement gratuitement, mais même attaché. Domaine personnalisé. Mais la fin des scores. Vous savez tout ce que vous devez savoir pour aller de l'avant et construire n'importe quelle sorte de site Web à partir de zéro à l'intérieur. Alors j'espère que vous êtes excité et prêt à apprendre leur grippe. Si vous êtes un costume, les gars dans la prochaine vidéo. 2. Télécharger des actifs et des liens de prévisualiser: D' accord, les gars. Donc avant de commencer, juste un orteil partager quelques choses avant la main et vous laisser savoir quelques informations. Maintenant, c'est le dernier site que j'ai conçu à l'intérieur. Où, Flo Et ce que je vais faire, c'est que je vais partager un lien d'aperçu dans la description où vous pouvez réellement consulter ce site dans le flux de travail. Maintenant, vous ne serez pas en mesure d'apporter des modifications ou des modifications car, comme vous le voyez ici, il dit que c'est seulement comme vous pouvez le voir. Il dit que seulement lire seulement plus de modifications ne seront pas enregistrées. Mais n'hésitez pas à aller ou comment faire le tour et voir comment j'ai construit cela. Vous pouvez vérifier toute ma structure que j'ai mieux. Vous pouvez consulter nos informations sur les cours, toutes les choses que vous devez savoir. Si jamais vous êtes coincé, allez-y et revenez avec ça et vérifiez. Si vous êtes coincé n'importe où, c'est ce qui prévaut. Donc, si vous, même si vous allez de l'avant et apportez des modifications, cela n'aura pas d'effet car il s'agit uniquement de l'aperçu. Et si vous voulez vraiment voir le site dans toute sa gloire pleinement fonctionnel. Vous pouvez vérifier ça. Tu l'es encore. Lien sera dans la description où vous pouvez faire défiler et vérifier et jouer autour. On a beaucoup d'interactions. J' ai beaucoup d'animations qu'on va faire des trucs super amusants. Vous pouvez vérifier cela aussi. Et enfin, j'ai conçu tout ce site sur la Fig MMA, donc vous pouvez aller au Lincoln la description de la vidéo et vérifier et Donna les actifs qui vont avoir les images qui vont avoir les icônes sur elle va pour avoir le fichier de stigmatisation, qui a conçu et nous faisons vraiment référence à ce fichier de chiffres. Et puis nous construirons cette conception à l'intérieur du flux de travail. Donc, trois choses sont le lien d'aperçu, puis vous avez le site Web lui-même, et ensuite vous avez les ressources que vous devez télécharger, alors assurez-vous de vérifier tous ces éléments pour que vous soyez prêt. Et dans la semaine prochaine, on va commencer. Donc je vous vois dans la prochaine vidéo 3. Comprendre le modèle de boîte: D' accord, mec. Il est donc enfin temps de commencer. Maintenant, avant de sauter dans le flotteur Web et de commencer à le construire, il y a beaucoup de bases et de principes fondamentaux qui doivent être compris. Donc ce que je vais faire, c'est que je vais diviser ces principes fondamentaux en différentes parties et les expliquer quand le besoin est quand on construit une certaine section à l'envers . Donc, tout d'abord, dans cette vidéo, nous allons parler de quelque chose appelé le modèle Box, qui est le concept le plus basique et fondamental que vous devez comprendre sur le web design et le développement web. D' accord, comment les sites Web sont-ils réellement construits ? D' accord, comment sont-ils structurés ? Est-ce qu'il y a une mode particulière ou est-ce juste un hasard ou comment tout fonctionne ? Et nous avons tellement de types différents hors intelligence de l'appareil. On a des pros de Mac Book. On a des écrans de rétine. Nous avons des ordinateurs portables ou Windows. Tu as des tablettes. On a des moniteurs Foca. Comment fonctionne le site dans ces trois tailles différentes ? On va en parler. Donc, dans le figment, classé comme une page appelée est la boîte mortelle. Et si tu cliques dessus, tu verras quelque chose qui ressemble à ça. D' accord, alors laissez-moi vous expliquer ce que nous avons. Vous êtes quelqu'un de venir ici à ce, hum, cadre, qui est de 14 40 pixels de large. Et la norme générale de l'industrie est de toujours concevoir et d'interfacer sur la plus petite taille d'écran . Très bien, Et quand vous concevez un site Web, vous voulez toujours commencer avec la plus petite taille d'écran, qui est à peu près le Mac Book pro cet endroit. Donc si j'y vais et que vous savez, cliquez sur l'icône du cadre, vous pouvez voir qu'on en a 14. 40. On a un Mac book, qui fait 11 50 pieds. J' ai un Mac Book pro salope. 14 40. Nous devons vendre Facebook, qui est 1500 de plus sur I'm moyennes 12 80 Maintenant, Même si le livre Mac et le Mac sont plus petits que 14 40 il est toujours un bon standard pour réellement concevoir sur un 14 40 pixel avec des dimensions, parce que ce n'est pas le gros, c'est pas un petit, c'est la taille optimale, accord. Et c'est une base que vous devez comprendre. La prochaine chose est cette structure sur un site web. Bon, donc si regarde par ici, on a des couleurs d'arbre, on a cette orange, et ensuite on a cette orange plus claire. Et puis nous avons une couleur jaune. La même chose ici et quelque chose par ici. Mais la note différente ici est que cette orange est en fait plus large sur un affichage, ce qui signifie qu'elle prend tout le Brit. Mais ce contenu qui est à l'intérieur. Disons que celui-là, c'est 1311 pixels de large. Ceci est 1311 pixels tandis que. Et c'est 131 sur les pixels tandis que. Et cela signifie à peu près que le contenu va rester au centre de l'écran, quelle que soit la taille de l'écran. D' accord. Et pour ce faire, nous devons définir un mouillé particulier. Donc ici, je suis en train de définir conscient de dire 1319 pixels de large et respectif, hors de la taille de l'écran, l'écran va être 1311 correctifs. Bon, maintenant, maintenant, qu'en est-il des autres tailles d'écran ? Que nous avions les 1152 et 120 Maintenant, ils sont plus petits, vous savez. Alors 1311 Oui, c'est vrai. Alors comment va ce beau regard, ça va avoir l'air bizarre ? Eh bien, non. Si vous avez dirigé votre bâtiment, votre site Web, vous pouvez définir dire cela. Ecoute, je veux un maximum. Devaient être 1311 Mais si les peaux a de plus en plus petit, vous pouvez aller de l'avant et rétrécir l'esprit. D' accord, mais au maximum. Je voulais être 1311 Je ne veux pas qu'il aille au-delà de 1311. C' est une condition que vous pouvez définir lorsque vous construisez une arme. Et c'est à quel point ont des livres en développement. Donc, laissez-moi vraiment venir du côté gauche et nous pouvons voir une sorte et un index. Donc, la chose des ordres que nous voyons cet appel est une section qui signifie qu'il prend tout l' écran vaut bien. Il touche les bords de l'écran. Et puis nous avons quelque chose appelé comme un rappeur qui définit cette taille finale de notre contenu, le mot final de notre contenu. D' accord. Et le suivant est les blocs internes est où nous avons du contenu qui peut être du texte ou des images, et ils peuvent être structurés de n'importe quelle façon ils veulent et ceux-ci vont tenir à l'intérieur du rappeur, accord. Et enfin, nous avons une image, et c'est pour le deuxième exemple. Donc, disons, par exemple, que vous avez une image ou que vous avez une certaine texture. Vous avez des informations que vous voulez afficher, mais vous voulez prendre la totalité de la valeur hors de l'écran, n'est-ce pas ? Tu peux le faire. Tu peux vraiment le faire. Vous voudriez le mettre dans une section et vous ne le faites pas. Et vous n'avez pas à le mettre dans un rappeur parce que si vous le mettez dans un rappeur, il finira par se confiner. Le travail que vous avez donné de sorte que vous ne pouvez pas réellement utiliser le rappeur et le contenu couvrira le monde entier. D' accord. Maintenant, il y a une autre chose que vous pouvez faire dans ce cas, si vous avez Regardez, c'est 1035 qui est plus petit que 1311 Maintenant, vous pouvez avoir plusieurs paris, non ? Disons que vous ne voulez pas que cela prenne 1311 place. Peut-être que tu ne réduiras pas un peu ça. Eh bien, vous pouvez certainement le faire de sorte que vous pouvez réellement avoir plusieurs Ritz à plusieurs éléments. Et quelle que soit la taille de l'écran, ce sera toujours le même. 1035 ici, 1035 ici et 1035 ici. Donc, c'est comme ça que les sites Web un peu. Donc juste pour récapituler, vous avez toujours une section qui est le conteneur le plus extérieur, et ça va prendre tout le monde de l'écran. Et puis vous avez quelque chose appelé un rappeur, où vous définissez un certain Brit et la prochaine chose que vous avez des blocs internes où tout est à l'intérieur de ce rappeur et cette coupe et cela défini avec tout droit. Et si vous voulez changer le monde pour un autre rappeur, vous pouvez certainement aller de l'avant et faire ça. Donc c'est à peu près tout sur le modèle de boîte. Dans la semaine prochaine, nous allons parler des trois principaux types d'éléments de mise en page, que nous allons utiliser pour construire tout notre contenu à l'intérieur des armes. Alors je vous vois dans la prochaine vidéo 4. Types d'éléments de mise en page: Hé, les gars, bienvenue. Donc, dans cette vidéo, nous allons jeter un oeil aux trois types principaux hors des éléments de mise en page. Cette arme, Oh, fournit. Maintenant, il y en a un peu plus. Je dirai que c'est 6 à 7. Mais ce sont ceux auxquels nous devons prêter une attention particulière, parce que c'est ce que nous allons utiliser la plupart du temps maintenant, il y a trois choses principales section conteneur et une impasse. Donc, comme je l'ai mentionné dans la vidéo précédente que la partie orange de l'écran qui prend toute la largeur est appelée comme une section et c'est exactement cette section. Il prend le tout avec hors de l'écran. Le suivant est un conteneur. Maintenant, la deuxième étape était de créer ah, conteneur ou un wrapper de certaines sortes qui sorte hors fournit une définition avec où, Flo, Flo, Vous avez un conteneur de qualité d'élément. Mais le problème est, le conteneur se limite à un maximum de lecture 9 40 pixels sur le bureau et pour d'autres points de rupture, qui s paysage mobile tablette et plus rapporté. Il prend le 100%. Donc c'est à peu près des actes comme une section. Maintenant, nous allons avoir un autre élément appelé le bloc de la mort. Maintenant, un bloc div, si vous savez, vous savez, considéré en termes vraiment. C' est un peu comme un ballon. Très bien, quand on regarde un ballon, quand il n'y a pas d'air, ondirait juste on un objet complètement plat. Mais plus vous soufflez d'air à l'intérieur du ballon, plus le ballon sera grand. Et vous pouvez réellement définir la taille qu'il veut être. Si tu souffles plus, ça va devenir plus grand. Si tu souffles moins, ça sera plus petit, non ? Alors ne regarde pas, c'est quelque chose qui est vraiment, vraiment flexible. Um, quand tu construis un site web, donc ma préférence personnelle est de ne jamais utiliser de conteneur, c'est pour ça que je ne le fais pas. J' ai mis un point d'exclamation à côté du conteneur. Maintenant, il n'y a rien de mal et en utilisant un conteneur, Mais je pense que conteneur enlève juste ce contrôle complet de vous en tant que concepteur et en tant que personne qui brûle sur où coulent. Donc, je préfère m'en tenir aux sections et développer parce que vous avez une flexibilité totale. ce moment. Il y a aussi un autre appel d'élément est le bloc de liaison. Maintenant, le bloc de liaison est fondamentalement le même que le bloc de la mort. Mais la différence est que vous ne pouvez pas cliquer sur un bloc de diff, mais vous pouvez cliquer sur un bloc de lien, est-ce pas ? Donc, ce point de marque du monde aussi. Alors maintenant que nous comprenons en quelque sorte le modèle de boîte et que nous savons quels sont les trois principaux types d'éléments , nous pouvons maintenant enfin commencer à construire notre site Web et qui a pleuré flotteur. Donc, comme vous les gars dans la prochaine vidéo 5. Tarification de Webflow et informations d'hébergement: Une dernière chose à nos gars avant de sauter dans ce flux, je veux en quelque sorte expliquer comment les prix fonctionnent là où, Flo. Donc, évidemment, vous allez construire un site Web et vous pourriez vouloir l'héberger plus tard. Ce sera un portefeuille ou un site web de votre entreprise, notre page d'accueil, peu importe ce que je pensais être intéressant d'expliquer comment le prix fonctionne. Donc, lorsque vous commencez et que vous créez un flux Canada, vous obtenez des projets gratuits, et c'est ce que vous pouvez voir ici. Ça dit que vous commencez avec deux projets gratuits, accord ? Et vous pouvez faire ce que vous voulez avec ces deux projets. Maintenant, il y a trois options. Un, vous pouvez soit l'héberger sur les flux Web sous domaine, qui se termine avec l'Ohio de la Floride, et cela est complètement gratuit, accord. Le 2ème 1 est que vous pouvez réellement l'héberger avec votre propre domaine personnalisé sur un flux Web Silverware flux utilise Amazon Web services de sorte que vous pouvez hébergé, complètement démêler et est pur, et lui et ses amis. Et c'est un très sûr de sorte que vous pouvez lier votre domaine personnalisé. Mais cela nécessite un plan payé. Et le 3ème 1 est, vous pouvez réellement exporter le cordon de flux Web que vous avez et hébergé sur une autre plate-forme ou ensemble. Alors jetons un coup d'oeil à ce sujet. Jetez un oeil à cela beaucoup plus en détail. Il existe donc deux types de plantes. L' un est le plan du site et l'autre le plan du compte. Commençons par le plan de compte. Donc, comme je l'ai dit, le plan de démarrage est le plan gratuit, où vous arrivez à trois projets et si vous voulez plus de deux projets et quand je dis projet, je veux dire site Web individuel et si vous voulez, si vous voulez plus de deux, vous pouvez mettre à niveau cela à 10 projets avec 16$ USD par mois si vous construisez annuellement ou 24$ par mois. Si vous choisissez. Comme un mois sage, vous pouvez également aller de l'avant et exporter cordon, accord, et si vous voulez l'exporter vers une plate-forme d'hébergement différente, vous pouvez réellement exporter belle Cordoba. Le flux fournit. Vous pouvez faire des transferts de projet et à peu près. Et si vous voulez aller pour plus de 10 projets, vous pouvez opter pour le plan pro. Bon, maintenant passons à la sont payés, décider usine. Et quand je dis plantes secondaires, cela signifie le plan pour chaque site Web individuel ou chaque projet individuel dans votre compte . Bon, alors voyons vraiment quelle est la différence. Maintenant, si vous optez pour le plan de base et quand vous arrivez au plan de base, évidemment, vous pouvez lier coûteux votre domaine personnalisé que vous achetez à partir d'une autre plate-forme d'hébergement , et vous pouvez connecter ce domaine. Pour ce faire, vous devrez utiliser un plan payant que vous pouvez avoir 100 pages. Vous pouvez avoir des visites mensuelles de 25 000 et vous pouvez avoir zéro objet CMS. Très bien, semble un sens pour le système de gestion de contenu, qui est à peu près une chose de niveau avancé ou intermédiaire où vous créez une sorte de retour dans le tableau de bord hors. Tout votre contenu et votre flux humide prend automatiquement ce contenu et le met sur votre site Web avec moins d'efforts sur Ben, vous avez un niveau d'entreprise si vous voulez votre site Web. Si vous êtes Si vous êtes contrarié, a plus que vous savez un million de visites ou si vous voulez 10.000 articles CMS ou que vous voulez sur le formulaire de Madrid, soumettez puisque vous pourriez avoir à vérifier ces plans en fonction des sites de cour exigences. Très bien, donc c'est comme ça que la différenciation est entre le plan du site sur le plan du compte. J' espère que vous avez une idée de base. Mais pour ce cours, évidemment, vous pouvez commencer complètement gratuitement sans aucune restriction. Alors maintenant que nous le savons, allons de l'avant et mettre en place un projet de reptile dans lequel Flo et commencer. Donc, c'est vous dans la prochaine vidéo. 6. Configurer votre projet de Webflow: D' accord, les gars. Donc dans cette vidéo, on va mettre en place notre projet de flux. Assurez-vous que nous avons tout ce dont nous avons besoin avant de commencer à construire chaque élément à l'intérieur du flux web. Donc, évidemment, vous pouvez créer un nouveau compte sur quel flux, et vous allez obtenir deux projets gratuits avec lesquels vous pouvez travailler. Et une fois que vous avez ces 23 projets, où vous pouvez faire est que vous pouvez commencer avec le nouveau projet. Et je vais choisir ce vide quand vous avez aussi beaucoup de modèles gratuits et de modèles de paiement que vous pouvez choisir. Mais on va commencer. C' est un gros vide, parce que nous voulons évidemment commencer à partir de zéro. Donc je vais aller de l'avant et choisir sur Select, et vous pouvez choisir n'importe quel nom que vous voulez. Un buffle vous donne un nom très cool et bizarre. Je vais appeler ça, euh, partage scolaire. Je vais appeler ce conseil pour toi. Bien sûr. D' accord. Juste au nom aléatoire. Ah, d'accord. On y va. Ok, alors maintenant on est à l'intérieur. Nous sommes pleins maintenant. Ils interface ne semble pas assez intimidant et effrayant. Et que beaucoup d'options, mais nous allons nous amuser. Regardez ceci un par un au fur et à mesure que nous progressons dans le cours, et j'espère que vous comprendrez en quelque sorte tous les éléments qui en sortent. Mais pour l'instant, nous voulons juste aller de l'avant et mettre en place notre projet. Assure-toi juste qu'on ait tout, non. Donc la première chose à faire est que je vais aller ici en haut, à gauche. Vous avez le logo de l'arme, et je vais aller de l'avant et choisir les paramètres du projet. Très bien, donc nous allons revoir cela un peu plus tard vers la fin du cours est bien, mais il y a juste quelques choses que nous voulons mettre en place. Donc, la première chose, évidemment le nom du cours, c'est le sous-Dominion où vous pouvez l'héberger sur des flux web, sous-domaine libre. Et, tu sais, juste faire ça va être comme une zone de mise en scène où tu peux juste vérifier comment ça bouleverse. Ecoute, je vais juste supprimer ce pari supplémentaire, parce que ça va être plus facile. D' accord. Hum, et on peut dire cours de portefeuille, euh, 01 ou quelque chose comme ça. Euh, la suivante est. Vous avez ces Farrakhan mon pays, Israël. Mettez plus tard. Tout est que vous voulez choisir votre fuseau horaire. Assurez-vous que c'est ça, euh et oui, c' est à peu près tout. La prochaine chose, c'est que nous voulons aller à la que nous voulons aller à lasection des fonds parce qu'on va utiliser un front maintenant qu'on va utiliser, il y a trois façons d'avoir des téléphones. section des fonds parce qu'on va utiliser un front maintenant qu'on va utiliser, Vous avez un fonds Google, vous avez des téléphones personnalisés et j'ai des téléphones Adobe. Si vous avez un abonnement Adobe, vous pouvez évidemment obtenir la clé de jeton du FBI. Il sera là dans les paramètres de votre compte. Tout ce que vous pouvez venir ici et trouver comment obtenir ça et juste mettre la clé A P I et vous êtes dans les téléphones de démarrage, c'est ça à Buffalo. Ensuite, vous pouvez télécharger des fichiers de police personnalisés. Tu sais quoi. Vous savez, bacon télécharge des profils TTF ou f d r, et ils devraient fonctionner très bien. Le suivant utilise un téléphone Google. Maintenant, pour ce cours, nous allons utiliser un téléphone Google. C' est un très beau coup de fil. Ascension et tout ce qu'il faut faire est juste d'aller à la liste déroulante. Vous avez tous les téléphones de règle disponibles. Alberto est juste à la recherche de la 40 veulent que nous voulons quelque chose appelé un parfum. Donc, c'est bon. Et c'est le plaisir. Cela n'a que trois milliards. Donc on va choisir tout l'arbre juste pour l'instant. Hum, et tu connais la langue sur le saut. Si tu ne l'inclues pas ou non, je vais juste me laisser. Je vais juste choisir celui sans extension latine. Peu importe. Et des chaussures à quatre heures. Ok, donc maintenant vous pouvez voir que ce sont les fonds qui ont été ajoutés, et c'est plutôt bon. La prochaine chose, c'est que nous voulons aller au tribunal des douanes. Maintenant, Veteran vous donne aussi la possibilité d'agir dans une sorte de tribunal des douanes. Si vous voulez vraiment personnaliser certains éléments, quel plancher de lit ne vous permet pas de le faire ? Maintenant, c'est tout à fait pour les utilisateurs avancés, donc nous n'utiliserons aucun tribunal personnalisé du tout. Mais la seule chose que je noterai correctif ici est que dans les paramètres avancés, je serais que je voudrais ajouter la voiture de langue, donc je vais dire e en pour l'anglais. Eh bien, c'est ce qui va arriver, c'est quand quelqu'un ouvrira son site dans la région comme Allemagne ou tout autre pays étranger. Votre navigateur va identifier qu'il s'agit d'un site en anglais, et il va vous demander si vous voulez le traduire de l'anglais vers la langue respective de ce pays. Et vous voulez que Google fournisse ce genre de fonctionnalité. Donc, vous voulez juste vérifier cela et nous allons choisir enregistrer les modifications, accord. Et la prochaine chose à faire, c'est que nous retournerons dans notre designer et designer, c'est notre espace de travail où nous allons concevoir et construire le site web, accord. Et ce que je vais faire, c'est que je vais aller à ce panneau de navigation, qui est le navigateur où nous avons beaucoup de couches. Ce que je vais faire, c'est que je vais choisir cet élément appelle le corps et le corps est l'élément parent énorme qui, qui sorte que tout est puisque tout est à l'intérieur d'une boîte et tout est dans un corps de conteneur est payé en La plupart des éléments, ou je vais faire, c'est que je vais cliquer sur le corps et je vais descendre dans la section téléphonique et je vais aller de l'avant et choisir la police que nous avons choisie, et ça va être envoyé d'accord, et c'est tout . Ainsi, chaque fois que nous téléchargeons, chaque fois que nous entrons un texte à l'intérieur de la zone de canevas, la police sera choisie pour envoyer. Donc on n'a pas besoin de changer de téléphone à chaque fois. Très bien, donc c'est une chose que tu veux faire. Donc maintenant, c'est à peu près tout. Dans la prochaine minute, nous pouvons enfin aller de l'avant et commencer à construire notre premier composant et commencerons par construire la barre de navigation. Je vous vois dans la prochaine vidéo. 7. Créer la barre de navigation: Bon, donc nous sommes enfin prêts à commencer à construire le premier composant, et nous allons commencer à créer avec la barre de bidon, la barre de navigation que nous avons juste ici dans cette vidéo. Bon, donc c'est en fait sauter à FTL et voir comment ça se passe. Bon, donc, donc, comme vous pouvez le voir, la première chose que nous avons est ce grand écran blanc qui est le corps de tout le site. Donc ne fait défiler que vers le bas jusqu'à ce que nous trouvions la section d'arrière-plan et à partir de la section d'arrière-plan, je vais changer ça du blanc au noir. Et ne cliquez pas sur cette icône plus, qui va ajouter une nuance globale, qui signifie que chaque fois que j'applique l'érudit à un élément, je peux changer la couleur de tous les éléments qui ont la même couleur appliquée, droite  ? Je vais aller de l'avant et cliquer sur Créer. Et maintenant, chaque élément que j'ai ajouté a une couleur noire va changer au respect de la couleur. Si je change la couleur de l'échantillon global. D' accord. Super. Maintenant où Flo ne vous donne qu'une sorte d'éléments prédéfinis, accord ? Et vous condamnez finement, utilisez-les comme ils sont, tout ce que vous pouvez personnaliser à votre goût. Donc, si je clique sur l'icône plus, vous pouvez voir que ce sont tous les éléments. Ce propriétaire. Et comme je vous l'ai dit, nous avons cette section. Nous avons un conteneur et nous avons le bloc. Maintenant, nous avons aussi des choses comme le bloc de liens et les boutons et les colonnes et grand, qui va probablement jeter un oeil un peu plus tard. Mais pour l'instant, ce que nous voulons est un appel d'élément comme barre de navigation. Très bien, on a le bar de bidon par ici. D' accord. Maintenant, dans la section de gauche, vous avez aussi une sorte d'éléments pré-définis tels que la barre collante ici, sur le lac principal appel de contenu à des trucs d'action. Oiseau en cuir. Pour ce cours pour enfants, nous n'allons pas utiliser tout cela parce que nous voulons tout construire à partir de zéro. Mais si vous le souhaitez, vous pouvez certainement aller de l'avant et utiliser les mises en page personnalisées. D' accord, donc quand tu seras descendu et que je choisirai cet élément de Nabbout, et je le traiterai et je laisserai tomber ça à l'intérieur, accord ? Maintenant, toujours que vous voulez faire est de faire attention. à cette navigation que nous avons sur la gauche. Bon, maintenant, si j'ouvre ça, tu vois, on a quelques articles. D' accord ? On a une grande liste d'objets, alors laissez-moi vous expliquer. une grande liste d'objets, Expliquez comment c'est ce qui se passe maintenant. Eh bien, vous voyez, ici est le corps, et puis à l'intérieur que nous avons un élément couleurs n'avait pas mais et à l'intérieur de la main. Mais nous avons quelque chose qui s'appelle le conteneur. Et à l'intérieur d'un conteneur, nous avons trois éléments. On a la marque. Nous avons le menu de navigation, et vous avez le menu en bas. Et à l'intérieur du menu de la main, nous avons trois éléments, qui est le lien de la main. Tu veux que Ling fasse claquer le Lien 3. Et nous avons aussi une icône de menu. D' accord, alors où Flo utilise cette terminologie, le parent et l'enfant, dans ce cas, le corps est le parent, et la barre de serment est l'enfant. Le conteneur est un enfant hors de la nab. Notre sur le bar est un parent hors du conteneur. Maintenant, le conteneur a trois enfants menu de navigation de marque et beaucoup, mais à droite. Le menu du bidon est évident. Il y a trois enfants. Tout droit maintenant Il ya une autre chose que vous pourriez regarder le menu de la marque et de nombreux boutons sont tous frères et sœurs parce qu'ils sont enfants hors du conteneur et frères et sœurs est en fait un terme qui est utilisé lorsque vous construisez des choses flux web entier. Donc, enfant parent et Sibley, ces trois choses dont vous avez besoin orteil soit attention, orteil. Donc, comme je l'ai mentionné précédemment, la première chose que nous voulons faire est de créer la section droite qui prend le tout droite de l'écran. Et qu'est-ce qu'on voit ici, c'est que cette barre de talent prend tout le travail hors de l'écran. Bon, donc le maintenant. Mais si vous voyez si je clique dessus, vous pouvez voir qu'il prend la totalité de la valeur hors de l'écran. Donc, ce que vous voulez faire est que vous pouvez jouer avec ce nombre qui est fondamentalement définit. Vous savez à quoi ressemblera un design particulier sur un travail d'écran particulier. Donc, si je change ça à 14 40, vous pourriez voir que tout est au centre comme nous l'avons discuté , d'accord, mais tout sauf la barre de talent, qui agit comme notre section, prend le monde entier. Si je change cela en 1920, vous pouvez voir que cela reste au centre, mais la section prend toute la valeur. Passons à 38 40, ce qui est notre résolution de quatre K. C' est à ça que ça va ressembler et c'est au centre. Donc tu veux toujours coller ça à 14. 40 afin que nous ayons une bonne représentation visuelle de la façon dont il correspond à notre design et à la figue MMA. Donc, parce que nous l'avons conçu sur 14 40, il est assez juste de toujours garder cela dans 14 40 aussi . Le truc, c'est que nous avons ce conteneur comme une cellule qui a un rappeur, et c'est avoir une semaine de congé. 940 picks est et nous ne voulons pas l'utiliser, parce que si vous voyez, nous avons un maximum de travail sur 1920 pixels, accord. Et nous avons une séparation entre 40 et 72. Donc ce que je vais faire est que je vais vraiment aller de l'avant et créer un élément a causé le bloc de mort en ce moment, quand vous plaisantez des éléments, assurez-vous que vous sélectionnez l'élément apparent de sorte que l'élément enfant que vous êtes créer des chutes en tant qu'enfant à partir de l'élément parent. Regardez, comme sur l'ALENA, et je vais appuyer sur le contrôle E qui est un raccourci ou une commande e sur un Mac pour effacer la barre de recherche où vous pouvez rechercher des éléments. Ou vous pouvez simplement cliquer sur l'icône plus et rechercher le travail élémentaire. Je veux utiliser ces coupes aiguës, donc c'est beaucoup plus facile et beaucoup plus rapide. Tellement impressionné. Contrôle E. Et je vais choisir leur bloc, chérie. Et nous avons cette impasse, et je vais mettre ce bloc de mort à l'intérieur, ok ? Et je vais prendre cet élément de marque. Je vais mettre ça dans le bloc de la mort que je veux prendre le menu de navigation. Mettez ça dans le bloc de la mort et le bouton de menu et mettez-le dans le bloc de la mort. D' accord, alors assurez-vous qu'ils sont tous des chillin, que vous puissiez les effacer pour voir si tout est à l'intérieur du parent. Je ne prends pas le conteneur et je le supprime. Ok, maintenant nous avons un coup d'oeil. Vous pouvez voir que tout se déplace à gauche et à droite. Ils s'étirent. D' accord. Donc, si je change cela en 1920, vous pouvez voir qu'ils touchent en quelque sorte les bords de l' écran parce que nous n'avons pas défini ce grain maximum. Bon, alors allons-y et faisons-le. Donc ce qu'on fait, c'est que je vais renvoyer ça à 14 ans. 40 correctifs, d'accord ? Et je vais choisir cette impasse qu'on a créée. Vous pouvez également cliquer ici dans la navigation du bas et la première immunité va donner une classe. Qu' est-ce qu'un cours ? D' accord. Ah. La classe est un nom qui est donné, et vous pouvez réellement appeler n'importe quel élément que vous voulez. Mais ce qui se passe est lorsque vous donnez une classe particulière à quelque chose, vous pouvez lui attribuer certaines propriétés, et cette classe sera nommée sur cette classe sera spéciale car elle a une certaine quantité de propriétés. Et qu'est-ce que tout cela veut dire ? Eh bien, en fait, créez-en un, et nous comprenons ça un par un. Ok, alors ce que je vais faire, c'est que je vais appeler ça comme rappeur, ok ? Tu peux appeler ça tout ce que tu veux, mais je vais l'appeler Rappeur pour l'instant. D' accord ? Et dans le travail, ce que je vais dire, c'est que je vais dire à 100%. D' accord. Qu' est-ce que ça veut dire ? Je vous le dis, et aussi dans la valeur maximale. Je vais dire 1920. Super. Maintenant ce qui se passe ici, c'est que je dis au flux de travail que Hey, regarde ce rappeur. D' accord ? Je veux que ce rappeur prenne 100% de la largeur. D' accord ? 100 % sur le mouillé, hors de la taille de l'écran. Mais je veux que vous le limitiez à 1920 picks est ce qui signifie que si je vais à 12 40 pixels, accord, ça satisfait les deux conditions. Le travail est 100% ce qui explique pourquoi les éléments touchent les bords de l'écran et le maximum avec son 9 20 Ce qui signifie que si je vais à 38. 40 vous pouvez voir que c'est un peu restreint ou, vous savez, disons que jusqu'à 2000 pour le rendre plus facile à comprendre. Très bien, vous pouvez voir que cela touche le bord gauche de l'écran, mais ici, cela est limité à 1920 pixels. Nous avons cet écart supplémentaire sur 80 choix est juste pour répondre à la question de refonte dans 14. 40. Mais comment cela va regarder sur les points de rupture plus petits. Nous utilisons cette condition. Donc on va dire, prenez 100% de la mouillée, mais limité à 1920. Maintenant, je sais ce que tu penses. Nous avons cet espace supplémentaire à gauche et à droite, même sur le 14. 40 pixels. Comment on obtient ça ? C' est assez simple. Alors passons au 14. 40 correctifs. D' accord. Et qu'est-ce qu'il y a avec le sélecteur de rappeur ? Je vais ajouter de l'espacement à gauche et à droite. Donc, si je sélectionne cet élément, vous pouvez voir que vous pouvez réellement sélectionner l'élément Vous pouvez maintenir sur le contrôle et cliquer sur un élément si c'est à l'intérieur d'un groupe et aussi tenir l'option ou l'art et juste survolé pour voir la distance. Donc nous avons 72 pixels à gauche, accord, et 72 picks à droite. Donc ce qu'on fait, c'est que je vais sélectionner la barre de Knave, qui agit comme une section, et je vais lui donner un cours. Carlos de Navarre. D' accord. Et je vais lui donner un rembourrage intérieur. Alors quoi ? Rembourrage ? Ça pousse les éléments à l'intérieur. Vous voulez toujours donner du remplissage à l'élément parent afin qu'il pousse les éléments à l'intérieur. Donc, la planification va être 72 photos à ce sujet. Donc, vous pouvez voir que si je survole, vous pouvez voir cette section verte, qui est assez éloignée du rembourrage, qui est la distance entre l'élément gauche et l'élément droit. Et aussi, je pourrais faire la même chose du côté droit et le dire 72. Donc, cela pousse cela aussi. Donc vous pouvez voir que nous avons cet espacement intérieur que nous voulions. Alors, comment ça va ressembler sur un écran plus petit ? Regardons 12. 46, c'est bon. Vous pouvez voir ça. C' est en se basant sur 72 choix. Nous sommes également respectés sur un écran plus petit. Maintenant, si tu vas en 1920, comment ça va ressembler ? Il y a une 1920 sur 1920 aussi. On a ces 72 choix supplémentaires pour une fête. Ok, si tu y vas, disons 2500. On a ce rembourrage de 72 pixels à gauche et à droite. Mais ici, vraiment, cela n'a pas d'importance parce que notre esprit était limité à 1920 pixels. Maintenant vous voyez, nous avons un problème ici où les éléments sont gentils vers la gauche, mais ils sont vous savez qu'ils doivent être au centre. Comment on fait ça ? Très simple. Alors, électionnons le rappeur. Bon, pourquoi devons-nous choisir le rappeur ? Très bien, parce que nous pouvons sélectionner le rappeur seulement parce que nous pouvons définir ceci comme le centre. Donc, si je clique sur ce bouton, vous pouvez dire que l'élément central nécessite horizontalement un travail fixe. Donc, nous avons réellement défini une valeur fixe sur 1920 pixel, ce qui est notre maximum avec donc tout après faire est de cliquer sur ce bouton, et cela va centrer cela sur tout l'écran. Donc, si j'ai dit ça à 2000 pixels, vous pouvez voir qu'il est au centre de l'écran, d' accord, et c'est ce que nous voulons. Donc ce bouton peut être appliqué sur Lee lorsque nous avons défini une certaine largeur. Fantastique. Alors revenons en arrière et dit ça à 14 40. Super. Maintenant, allons de l'avant et personnalisons ces liens. Mais avant cela, sélectionnons réellement cette navigation. Mais parce que nous voulons rendre cela transparent parce que maintenant c'est Vous pouvez voir qu'il est transparent. Cette barre de navigation est en cours de transfert. Je vais descendre et ici dans les paramètres de fond, il y a une sorte de couleur aléatoire en fait. Je vais aller de l'avant et cliquer sur ce bouton Faire en sorte qu'on ne voit rien. D' accord ? Et maintenant, nous avons ces trois éléments. Donc ce que je veux faire, c'est mon fils dans la 1ère 1ère. Je vais lui donner un cours et appeler ce lien. C' est un nom que je lui donne, d' accord ? Et maintenant tu vas comprendre l'importance de ce qu'un cours rencontre. Ok, alors allons-y et personnalisons cela avec nos paramètres. Donc ils viennent ici, vous pouvez cliquer sur l'un des éléments que nous avons, et vous pouvez voir que nous avons une certaine valeur d'ici. Quelqu' un clique sur ce bouton lien orteil, et ah, J'ai oublié d'installer les téléphones parce que je travaillais sur le Mac Book Pro, Donc je vais quand même le faire dans la prochaine vidéo. Donc, mais pour l'instant, vous pouvez voir que la taille de la police est de 16 et nous avons ah, hauteur de 1 50%. Bon, donc on va faire, je vais changer la taille de police à 16. Ok, la hauteur va être de 1 50% pour être sûr d'ajouter la valeur de pourcentage, et ensuite nous allons aussi changer la couleur de ceci en blanc. Mais il a une capacité de 70%, comme vous pouvez le dire ici. Donc je vais cliquer sur ce bouton et puis cliquer dessus pour le rendre blanc. Et je vais aussi cliquer sur Plus pour en faire une nuance, puis cliquer sur Créer. Et puis nous allons changer l'Alfa, qui est huit, qui est aussi appelée capacité à 70%. Maintenant, nous avons quelque chose. On dirait ça. Et évidemment, c'est de l'expérience. Nous devons travailler, nous avons de la photographie et vous avez le contact. Donc, nous le ferons. Est-ce que je veux double-cliquer sur cela et juste changer cela à l'expérience. Ok, super. Maintenant, vous pouvez également voir que nous avons ce genre de distance, qui est 24 pixel sur le haut, et Tito pixel étude 24 pixels sur la gauche et la droite, et 32 pixels sur le haut. Donc je vais ajouter le repérage de quelqu'un ici. Et comme vous pouvez le voir, nous voulons mettre cela à 32 en haut 32 en bas, 24 à gauche et 24 à droite. Ok, donc maintenant, si vous voyez qu'on a une sorte de structure comme ça ressemble vraiment à ça. Ok, super. Maintenant, nous avons aussi ces deux éléments. Qu' est-ce qu'on fait de nous ? Nous devons aussi les faire ressembler à ça. Donc ce que je peux faire, c'est que vous pouvez voir que nous lui donnons notre classique, c'est un lien de bidon. Je vais le vendre ce lien de talent et lui donner une classe appelée Knave Link et vous pouvez voir les classes existantes. Nous avons aussi les classes que nous nommons avec votre entrée de presse. Et ça va s'appliquer. C' est la même chose ici. Knave lien et fantastique. Allons de l'avant et renommons cela pour travailler pour la géographie, donc le travail et la photographie. D' accord. Et puis je vais aller de l'avant et dupliquer ça, accord ? Et ça va être contacté Greater maintenant. Comme vous pouvez le voir, le contact a l'air différent, non ? Donc, si je change la couleur de ça pour être autre chose. Très bien, donc si vous allez à l'arrière-plan, chacun est une couleur de fond que vous considérez qu'il applique également cette autre couleur. Mais ce n'est pas ce que nous voulons si dur. Nous faisons cela de deux façons, nous pouvons soit créer une nouvelle classe. D' accord ? Donc je peux supprimer ce cours, et je peux créer une nouvelle classe, mais ça va prendre beaucoup de temps, non ? Ça va prendre beaucoup de pas en plus. Donc ce que je peux faire, c'est que je peux et vous pouvez appuyer sur le contrôle Z, au fait , vous savez, pour annuler et rétablir le contrôle. Pourquoi le contrôle de redo des orteils Z est deux sous ? Ce que je peux faire est que je peux ajouter quelque chose appelé Est-ce une classe combo ? Donc, si je clique ici, je peux ajouter quelque chose qui a une nouvelle classe combo. Et quoi ? Je vais le dire. Je vais appeler ce bouton, accord ? N' importe quel nom, ce que vous voulez. Tu peux appeler ça n'importe quoi d'autre. Donc, quand je vais cliquer sur le fond, ce qui va se passer, c'est que je vais descendre à l'arrière autour des couleurs et qu'on va choisir cette couleur que nous avons cette couleur pourpre. Je vais juste copier la cour de couleur, d' accord ? Et, euh, un couple ici, et je vais batiler ça. D' accord ? Et aussi, je vais juste ajouter ça à une nuance, et ça s'appelle Blue ici, mais peu importe, ça devrait aller. Ok, maintenant, ce qui s'est passé ici, c'est qu'à cause de cette classe combo, vous pouvez voir que ces trois sont les narc, ça n'a affecté que ce facteur Carter. Et si vous voyez la couleur ici, c'est orange. Et c'est bleu. Parce que cette classe de combo a seulement cette propriété sur cette valeur de couleur supplémentaire que nous avons ajoutée. Donc, si je vais à l'opportunité et probablement disons que je change la taille étrangère, vous pouvez voir que la taille de la police change aussi pour cela, parce que cela a cette classe basée appelée lien knave. D' accord, je vais aller de l'avant et juste mettre cet orteil arrière 16 à droite ? Et parce qu'il a un lien de base, il change. Mais parce que nous avons ajouté une classe de combat, ce qui est un effet supplémentaire, c'est cela affecte uniquement l'élément qui a cette classe de combo. Maintenant, l'autre chose que nous devons noter ici est que c'est en fait dans garçon rxf un regard par ici. C' est à Boyd. Donc ce que je peux faire, c'est ici pour le bouton. Je peux changer la police. Attendez. Aussi pour s'ennuyer, d'accord ? Et ça va être blanc pur. Je vais changer ça aussi en blanc pur. Ok, donc c'est Element, en fait, a trois nouvelles propriétés sont différentes. Poids sont de couleur différente sur une couleur de fond différente ainsi. Donc, c'est la signification d'un combo close. D' accord. L' étape suivante est que nous allons aller de l'avant et ajouter un autre logo que nous avons ici, et ce que vous pouvez faire, c'est que vous cautionnez, ou les actifs qui sont là dans les fichiers du projet et que vous pouvez venir ici et cliquer sur le bouton et vous pouvez réellement importer tous les actifs. Donc je vais le faire maintenant. D' accord. Comme vous pouvez le voir, je suis allé de l'avant et j'ai importé toutes les images sur toutes les ressources dont nous avons besoin. , Ce qu'on va faire,c'est observer cette section, non ? Donc, nous avons quelque chose appelé comme la marque, et la marque a ce lien comme sur, qui signifie que c'est un bloc de lien droit. Comme vous pouvez le voir, c'est un bloc. C' est un bloc de liens. Donc ça va aller de l'avant et appeler cette marque. D' accord ? Maintenant, ce que nous allons faire, c'est nous allons aller de l'avant et sélectionner ce logo que nous avons, qui est un SVG et qui a été traîné, et je veux laisser tomber cela dans la marque. D' accord ? Il devrait être à l'intérieur du brun. D' accord ? Je ne sais pas. Appelez ce logo. D' accord. Maintenant, défions la hauteur et la largeur. Maintenant, ici, c'est un stand de 24 pixels. Et ici, vous pouvez réellement voir que les valeurs qui définissent ce qui est 79 pixels avec et 24 choix de style, qui est exactement ce dont nous avons besoin. Et c'est de toute façon et svg donc nous n'avons pas à nous soucier trop de la mise à l'échelle, donc nous allons laisser cela tel quel. Super. , c' Le problème, c'est qu'il est ici que tout est au centre, mais c'est en quelque sorte aligné sur le haut, donc dépêche-toi, genre de centre, Linus. Donc ce que nous pouvons faire, c'est que si vous voyez ou entendez, nous avons une marge supérieure de 30 pieds. Je peux en fait aller et ajouter une marge de 30 orteil. Faites cet élément particulier. Maintenant, vous allez faire attention à l'élément que vous ajoutez, déplaçant pour écrire. Parce que ce que nous voulons faire, c'est, vous savez, l' ajouter. Est-ce que ce lien bloque correctement ? Nous voulons ajouter au bloc de lien parce que lui-même contient tout ce Robin local. Je vais y aller ajouter une marge en haut et l'appeler 32. Donc maintenant la marque, tout droit et au logo sont à l'intérieur sur le logo est à l'intérieur de la marque et la marque, L'étude deux images loin du haut. Et ça a l'air à peu près, tu sais, au centre. Et ça a l'air assez bien. Donc, c'est à peu près tout sur la façon dont nous créons cette barre de navigation. Si vous allez le changer à un point de rupture différent, comme 1920, vous pouvez voir qu'il se développe en quelque sorte, mais maintient la marge de 72 pixels que nous avions gardée. Et ça a l'air fantastique. Super. Donc, dans la prochaine vidéo, nous allons aller de l'avant et ajouter des interactions de vol stationnaire à cela et peut-être même rendre cela réactif pour les pièces de frein de tablette et mobile. Donc c'est vous les gars dans la prochaine vidéo 8. Ajouter des interactions de survol à la barre de navigation: à droite. Donc, dans cette vidéo, ce que nous allons faire, c'est nous allons aller de l'avant et ajouter un peu d'interactions amusantes de vol stationnaire à chacun de ces éléments. Nous sortons un peu plus ludique et animé. Alors comment on fait ça maintenant ? Ce sont deux types d'interactions à Napa. Il s'agit d'interactions simples et d'interactions complexes. Si vous deviez créer des interactions et des animations complexes, vous devrez probablement aller à l'interaction, poignarder et le faire ici, ce que nous ferons un peu plus tard. Mais pour l'instant, ce que nous allons créer est une interaction de vol stationnaire très simple. Donc on n'a pas besoin d'aller à l'étape. Comment faisons-nous cela est en utilisant des classes et voyons comment le faire. Je vais aller de l'avant et choisir la première fille que nous avons, et je vais descendre à la liste déroulante que j'ai, et je vais choisir une université d'État. L' état du vol stationnaire. Maintenant, vous avez quatre états différents survolent, pressé, concentré et visité ST Maintenant, Parfois, vous voudriez l'utiliser pour les boîtes de saisie ou les boutons ou l'échelle de trucs. Mais dans ce cas, nous nous inquiétons juste utiliser le survol, cliquez sur le survol. Je veux dire, si tu peux avoir ce qui va se passer, ça va créer un plus de combat, ce qui veut dire que tout effet que tu crées notre annonce ne sera affecté que sur cette classe combo , non ? Juste la façon dont nous avons créé une classe combo pour ce bouton de navigation, quelqu'un descend et nous allons faire est dans les paramètres de couleur. Je vais en fait effacer une nouvelle couleur, sont en physique, vous savez, comme Harvard un peu et probablement choisir une belle couleur et peut-être dit la capacité à 100%. ce moment, ça ressemble à une très belle couleur vive. Et peut-être que vous pourriez avoir quelque chose coule sur le côté bleu et je vais aller de l'avant et créer une nuance de couleur, droit et correctement peut créer. Fantastique. Et maintenant ce que je vais faire, c'est que je vais revenir à l'état non pour que nous nous assurions que c' par défaut et que nous vérifions directement si ce travail ce que nous pouvons faire, c'est que vous pouvez cliquer sur cette bouteille de prévisualisation qui donne des commentaires sur la façon dont notre site Web a vraiment l'air . Et si je survole, vous pouvez voir que la couleur change correctement et je peux aussi passer la souris dessus. Mais comment cela fonctionne-t-il pour cela ? Ça marche parce que ces trois ont la même classe. Droit ? Et comment va-t-il venir ici ? Cela ne fonctionne vraiment pas car il y a une classe de virgules. C' est en quelque sorte le remplacer. Ok, alors c'est vrai. Et le truc, c'est que, non, c'est un combat de travail, mais on peut avoir envie d'avoir un peu d'assouplissement. Nous ne voulons pas que ça change immédiatement. On va avoir une scie. Petite transition entre les couleurs. Alors comment on fait ça ? Donc je vais choisir ça. Et dans le non-état, je vais descendre à la section où nous avons quelque chose appelé Transitions. Et où vous c'est là que vous pouvez ajouter l'assouplissement. Donc la première chose à faire est que je vais sélectionner la propriété, qui est deux, qui est la couleur de la police. Et le second est la durée. Maintenant, certains. Je préfère généralement une plage comprise entre 304 100 millisecondes. Donc pour l'instant, je vais juste choisir 350. Vous pouvez également au type d'accélération. Et vous avez beaucoup de différents types d'assouplissement. Je préfère habituellement celui qui dit qu'il est hors cour. C' est un peu de style. Et j'aime ce que vous pouvez choisir ce que vous voulez, et vous pouvez jouer avec, et c' est à peu près tout. Donc maintenant, si vous allez vérifier cela, vous pouvez voir que, vous savez, vous pouvez voir la légère transition entre l'ancienne couleur et la nouvelle couleur. Très bien, et c'est beaucoup mieux. Ok, maintenant, qu'est-ce que tu fais pour celle-là ? Donc ce qu'on peut faire, c'est faire quelques choses que je veux faire, c'est que je vais aller de l'avant et ajouter un vol stationnaire. Et cette fois, je vais juste aller à l'arrière-plan, et je vais rendre ça un peu sombre, accord ? Juste un peu sombre, d'accord. Et puis je vais juste laisser ça comme ça. On va revenir au non-Etat et on peut ajouter une nouvelle transition. Et ici, dans la transition, je vais choisir la couleur de fond et régler cela à 350 millisecondes. Et aussi, l'assouplissement va être facilement tribunal. Bon, alors maintenant jetons un coup d'oeil. Très bien, vous pouvez voir que ça a l'air assez bien. fantastique. Donc, en fait, ce que nous allons faire c'est que nous allons aller de l'avant et faire de cela un réactif pour d'autres points de rupture tels que le scape de byline plus établi et le portrait mobile. Donc c'est vous dans la prochaine vidéo. 9. Rendre la barre de navigation réactive: D' accord, les gars. Donc, dans cette vidéo, nous allons aller de l'avant et apprendre à rendre cette barre de Naff réactive. Cela pourrait être assez amusant parce que la réactivité est un sujet très important sur le concept que vous connaissez quand vous devez apprendre quand vous construisez un site Web, donc c'est probablement comment le faire. Maintenant, nous avons trois points de rupture différents. Vous avez tablette, vous avez plus par paysage et vous avez mobile Portrait petite tablette d'abord. Maintenant, ce que nous voyons ici, c'est que nous avons cette nouvelle icône de menu qui est là. Alors, d'où est cet argent que je peux vraiment venir ? Si vous regardez la navigation, nous avons la marque. le On alemenu de la Naff. Je n'ai jamais eu le bouton du menu. Maintenant, sur le point de pause du bureau, nous avions le menu de la main et le bouton de menu n'était pas là. Donc, si vous regardez réellement ce qui ici dans le paramètre déplacé, vous pouvez réellement voir que l'affichage est réellement défini ou non. Mais j'ai besoin d'un autre point de pause. Nous pouvons voir que le bouton de menu, accord, est en fait dans le bloc. affichage sur le menu de la bibelade est en fait masqué. Très bien, donc c'est heureux que Buffalo ait fait automatiquement. Maintenant, si vous voulez vraiment vous assurer que vous voulez avoir les liens de navigation sur la tablette aussi , comment pouvons-nous faire cela ? C' est assez simple. Si vous sélectionnez la barre de Knave et nous arrivons ici au panneau Eléments, qui est le deuxième haut, vous pouvez voir que nous avons la possibilité d'afficher l'icône de menu pour la tablette et ci-dessous. Ce que je vais faire, c'est que je vais dire montrer beaucoup d'icône pour le paysage par paysage mobile et ci-dessous. Ok, ce qui signifie que quand je vais au paysage mobile, nous avons l'icône du menu. Quand je viendrai de la main, c'est bon, génial. Maintenant, vous pouvez voir qu'il y a ça. Nous pensons que c'est qu'il y a trop d'espace ou ici sur le bureau. J' avais l'air bien, mais sur une tablette, impression que , tu sais, ça regarde et tu peux aussi voir qu'on a plusieurs points d'arrêt ici, non ? Et quand je dis point de rupture, je veux dire dans ce contexte point de rupture pour différents appareils tablettes. Donc, nous avons l'iPad Pro, qui est 7 68 et puis nous avons 808 34 puis, vous savez, 912 et vous savez ainsi de suite et ainsi de suite. Donc on va commencer par le plus petit parce que ça va avoir du sens. Maintenant je vais faire est que je vais venir ici et sélectionner le NAB notre et nous avons ajouté 72 ou je veux le faire déjà. C' est à 40 ans ? Ok, donc ça a l'air beaucoup mieux. On a changé, les 40 étaient là. Mais quand tu reviendras ici, tu peux non plus. Il reste encore 72. Comment ça marche ? Parce que c'est ce qu'un CSS feuilles de style en cascade. Que se passe-t-il ici ? Est-ce des changements que vous faites en cascade vers le bas dans le point de rupture ? Donc, ce qui signifie que le 72 va être appliqué orteil ceci et ceci. Mais maintenant, une fois que nous avons fait un changement à la tablette off 40 ce 40 va être transmetteur vers le paysage aussi, où vous pouvez voir qu'il est 40 et pas 72. Et pour le portrait mobile, qui est 40 ce qui n'était pas 72 avant. Donc, nous avons effectivement ce contrôle où nous pouvons changer les propriétés d'un point de rupture et ne pas affecter les autres points de rupture. Et c'est fantastique. Et cela rend beaucoup plus facile de concevoir et de construire des choses en ce moment. Allons au point de rupture du paysage. Mais il maintenant, si vous voyez réellement que nous avons le design pour le mobile ainsi. Maintenant, le portrait mobile et le paysage mobile se comportent à peu près de la même manière. Donc, nous pouvons réellement utiliser les mêmes paramètres pour le portrait mobile. Droit ? Donc si vous voyez ou entendez, je suis allé de l'avant et je change la distance. Les éléments doivent être 16 picks est sur la gauche et 16. Je suis jolie pour d'accord. Cela doit en fait être 20 sur. Cela doit être 20 aussi. Donc je vais m'assurer que j'ai les bons numéros, accord ? Et en haut, vous avez 24 qu'il avait aussi dans le haut de la voiture 24. Nous pouvons voir que le top ici est 24 choix est notre marge. Donc je vais régler ça. C' est deux des 24 ? Ok, ça a l'air bien. Et en bas. Aussi en bas. Vous pouvez le laisser tel qu'il est. , Et ce qu'on peut faire ici,c'est pour autant, mais j'allais appeler ça un bouton de menu. Bon, maintenant, puisque nous avons déjà ce pixel 2020 sur la gauche, ce que je veux faire est assez merveilleux, mais je vais l'enlever sur le côté gauche, sur le côté droit. Donc, la façon dont nous allons créer un espacement de 20 pixels est en ajoutant un remplissage de 20 pixels au bouton de menu et aussi 20 ici et 24 en haut et 24 en bas. Bon, donc maintenant, ça a l'air loin. Maintenant, la prochaine chose est que nous avons en fait une icône différente ici, accord, et ici nous avons une icône différente. Maintenant, c'est la valeur par défaut. Je réalise des cadeaux de flux d'air et nous pouvons appeler cette icône de menu, et vous pouvez réellement aller de l'avant et jouer avec cela en ajoutant vos propres paramètres personnalisés . Donc si j'y vais, je peux changer la couleur pour qu'elle soit blanche. Et ce qui va se passer, c'est que ça va le changer. Le blanc. Maintenant, la prochaine chose est, comment voyez-vous réellement l'élément de menu ? Si vous allez à un aperçu cible, vous pouvez effectivement cliquer dessus et cela va ouvrir ce genre de A Vous savez, beaucoup où vous pouvez réellement passer et taper sur chacun des liens. C' est là que se trouvent nos liens de navigation. C' est le menu de la Naff , mais pour l'instant, ce que je vais faire, c'est que je vais aller de l'avant et remplacer cette icône que nous avons. Donc je vais importer cette icône de menu que j'ai à partir des actifs pour que vous puissiez voir que j'ai l'icône ici, donc je ne veux pas aller au Navigator, en fait, et nous allons ouvrir ce bouton de menu maintenant . C' est le bouton de menu que nous avons. Je vais aller de l'avant et faire glisser ça et mettre ça à l'intérieur de beaucoup, mais je peux vraiment aller de l'avant et supprimer l'autre parce que nous n'en avons pas besoin. D' accord ? Et maintenant c'est dans un grand et ça a l'air assez bon. D' accord. Si vous regardez plus par paysage, c'est à peu près à quoi il ressemble dans le design. Et quand nous cliquons dessus, il ouvre ce menu. Fantastique. ce Évidemment, menu a aussi besoin d'un peu de travail, donc on va arranger ça. Alors venons au paysage mobile sur. Est-ce que vous pouvez réellement basculer cela en choisissant cette sélection dans le bouton de menu, et vous pouvez choisir les paramètres de barre naff et vous pouvez choisir le menu ouvert. Et maintenant tu as ça. Et maintenant, tous les changements que vous apportez à cela, c'est en quelque sorte aller à l'effet du style visuel. Donc, la première chose à faire est que je veux faire ce bouton de menu et l'arrière-plan. Je vais changer ça pour être noir, non ? C' est le numéro un. Le suivant est le lien de navigation sont en fait transparents. Mais le menu Knave est celui qui a une sorte de couleurs. Je vais d'abord donner un cours à ça et appeler ce menu Naff, accord ? Et je vais changer la couleur. C' est l' une des couleurs que nous avons dans le fichier des figurations, qui est celle-ci. D' accord. Le genre d'une couleur pourpre foncé. Je vais juste copier ce code couleur. D' accord. Et je vais revenir ici et juste basé ça, et ensuite je vais aller de l'avant et ajouter ça à la nuance de couleur, et je vais appeler ce niveau un. D' accord. C' est que c'est parce que nous appelons à peu près ce niveau un, accord ? Et peut-être que ce que nous pouvons faire, c'est pour le menu de la main pour 30 pour le lien de la main. Ce que je peux faire est d'ajouter une sorte de bordure inférieure. Je vais donc cliquer sur dans la section de la bordure et cliquer sur ce bouton, qui va ajouter une bordure inférieure. Et je vais en parler un, accord ? Et que je vais changer la couleur du noir à une sorte de off. Ah, tu sais, comme une lumière. Ou nous allons actrice rédactrice White. Et c'est l'opacité de, genre, 12% ou quelque chose comme ça. Ouais, ça a l'air beaucoup mieux. Et, ah, c'est à peu près ce que ça va ressembler et le contact. Mais ça va être un mot complet, donc ça a l'air génial. Donc si vous ouvrez le sous-marin, c'est ce qu'on aura. Ça a l'air bien. Et on peut fermer ça. Bon, voyons pour mobile semble fantastique. Super. Maintenant qu'une autre chose que vous pouvez faire maintenant, vous pouvez également choisir d'ouvrir le menu comme une liste déroulante ou écraser ou sur la gauche Si vous choisissez plus. D' accord, Onda, on ouvre ça. Vous pouvez voir qu'il vient de la droite là beaucoup de façons différentes que vous pouvez garder cela où je préfère choisir une liste déroulante. Et si vous regardez un autre lien, vous pouvez jouer avec l'assouplissement, n'est-ce pas ? Quelques fonctionnalités ou fonctionnalités. Alors, ici. Mais on va rester simple. Donc, si vous regardez notre paysage, les choses semblent très bien. Et oui, ça a l'air plutôt bien. Très bien, super. Donc maintenant, la seule chose que nous avons quitté le studio est d'ajouter des liens à chacun d'eux, parce que de toute façon, ce sont des liens. Comment pouvons-nous aller ? pense que nous allons comprendre cette option de paramètres de lien que nous avons ici. Donc, comme vous les gars dans la prochaine vidéo 10. Ajouter des liens vers des éléments de lien: Très bien, donc il va y avoir une très courte vidéo parce qu'ils vont juste comprendre rapidement comment ajouter des liens. Maintenant, lorsque vous cliquez sur un élément de lien et comment savez-vous si quelque chose est lien ou non est en regardant cette icône de lien. S' il a quelque chose comme ça, cela signifie que c'est un élément de lien. Vous pouvez lui appliquer des propriétés. Donc, vous pouvez soit cliquer sur cette icône d'engrenage vraiment, comme, six propriétés. Tout ce que vous êtes, vous avez, euh, vous savez, vous pouvez vérifier dans le réglage des éléments qui s'étend ici. Donc, un couple de choses est évidemment chaque élément peut avoir un lien vers un site Web externe . Et vous pouvez cliquer sur la case à cocher si vous voulez l'ouvrir d'un nouveau robinet. D' accord, alors vous avez une page. Donc, si votre site Web a plusieurs pages ou vous pouvez faire est que vous pouvez vous pouvez en quelque sorte de lien, faire cela payé. Donc, dans ce cas, nous n'avons pas plusieurs pages. Donc ce que je vais faire, c'est que je vais laisser ça tel quel. On va utiliser la prochaine, qui est une section, mais en venir au discours où on peut le faire. Si vous sélectionnez ce logo et nous pouvons choisir l'élément de marque, droite, si vous sélectionnez l'élément de marque, nous pouvons effectivement aller à la page et dans la page. Vous pouvez choisir la page d'accueil. Donc tous ceux qui tapent sur qui cliqueront sur ce logo Robin vont atterrir sur la page d'accueil , et on peut s'assurer de l'avoir seulement sur ce dessus. Ne l'ouvrons pas dans un nouvel onglet qui revient. Donc, ici, nous avons quelque chose qui est une section de page. C' est quelque chose que nous mettrons en œuvre un peu plus tard. Mais fondamentalement ce qui va se passer, c'est quand je clique sur la section expérience, c'est un peu hors de la page va faire défiler vers la section expérience hors du site afin que nous puissions réellement définir cela. Ça va être plutôt cool. La prochaine, c'est si tu veux que quelqu'un sorte, hum, milieu. Donc, quand vous cliquez sur ce bouton, il va ouvrir le client de messagerie de cette personne en particulier, et vous pouvez avoir ah, vous pouvez. Vous pouvez entrer votre immunité et aussi, vous savez, au sujet du préfixe si vous voulez. Suivant est un numéro de téléphone, comme vous pouvez voir des liens de téléphone étrangers, seuls les appareils de travail qui peuvent placer un appel téléphonique. Donc, c'est quelque chose que vous pouvez faire uniquement sur un point de rupture mobile. Et le dernier est la pièce jointe, ce qui signifie que vous pouvez joindre n'importe quelle image que vous voulez à partir du panneau d'actifs, et lorsque vous cliquez dessus, elle va ouvrir cette image. Vous savez, soit sur un nouvel onglet si vous cliquez sur le bouton, soit il va ouvrir leur qui là où l' Amérique a raison. Donc c'est vraiment ce qu'il y a à propos des liens de navigation ? La chose doit le faire. N' importe quel élément de lien va avoir ces options ou si vous utilisez un bloc de lien, il va avoir ces options, donc c'est à peu près tout. Et la semaine prochaine, nous allons sauter dans la section de chauffage et construire la section de héros. Alors je vous vois dans la prochaine vidéo 11. Créer la section de l'héros: D' accord, les gars. Donc, dans cette vidéo, on va aller de l'avant et construire la section héros, qui est cette section. Et avant de le faire, nous comprenons toujours comment les éléments sont structurés et comment ils sont construits. Donc ce qu'on va faire, c'est regarder combien d'éléments on a. Toi, si petite image sur la gauche. Nous avons des éléments de texte et ensuite nous avons ces décorations de bordure de fond ou quelque chose comme ça. Droit ? Alors, comment nous les constructeurs ? J' ai donc créé ce genre à partir d'un simple cadre de fil de modèle de boîte où nous pouvons comprendre comment cela fonctionne. On va commencer par créer une section qui est l'Orange Party, non ? Je vais créer une grande section, puis à l'intérieur, je vais créer un rappeur. Comme vous pouvez le voir ici, c'est notre couleur d'emballage sur la gauche, nous avons une image, et à droite, nous allons créer un bloc qui va tenir faire les éléments suivants. C' est ainsi que vous ne pouvez pas vouloir la structure des orteils, tout et beaucoup de composants. Maintenant, nous pouvons voir que ce texte chevauche l'image ce qui est bien. Mais c'est juste pour expliquer comment structurer et quels composants utiliser. Et comment ça ressemble vraiment à l'arrière ? C' est juste. Et l'autre chose à noter ici est que la hauteur de l'image va avoir Ah, hauteur de 45 v hetch sur l'imagerie va être 55 www. Bon, donc on est un peu méchants. Donc, nous allons en fait sauter dans le sol humide et puis voir comment tout cela fonctionne. Très bien, donc ici, je veux dire Rep low et quoi le faire à nouveau. Je vais commencer par créer une section et m'assurer que vous sélectionnez le corps parce que la section doit être un enfant du corps. Je suis une presse contrôlée manger et chercher la section. Et c'est l'élément que nous étions. Donc, nous avons un élément de section. Je vais laisser tomber cette idée. Et la première chose que tu as toujours voulu, c'est donner un cours. Donc je vais appeler cette chaleur ou section. Ok, c'est un Maintenant ce qu'on veut faire est d'ajouter un rappeur, donc je vais créer un autre bloc div, ok ? Et ça va être notre emballage. On a déjà un cours qui dit Rapper, donc on peut ajouter ça, accord. Et si vous voyez ou entendez cela, il n'y a à peu près rien sur la gauche et vous savez, la taxe ou ici a dépensé 40 pixels sur le côté droit. Donc nous allons faire est que je vais aller à la section parce que si vous regardez la main, mais nous avons ajouté cela dans une marge sur la Nabaa, qui accède à la section nous avons ajouté 72 pixels parce que les pixels à gauche et 72 pixels à droite . Je me demande la même chose pour cette section de chauffage est, mais alors laissez-moi aller et saisir cette section ici et pour la section héros, je vais ajouter un rembourrage de 40 pixels sur la droite. D' accord, c'est tout. Juste 40 choix est sur la droite. Maintenant. La raison pour laquelle nous sommes actuellement quelque chose est parce que le moment où nous sommes des propriétés, le genre d'effondrement parce qu'il n'y a pas de contenu à l'intérieur, non ? Donc, ajoutons réellement du contenu. Donc nous avons ajouté la section nous avons ajouté le rappeur, et maintenant nous devons ajouter ces deux éléments, non ? Donc, idéalement, vous voudriez ajouter un bloc pour cela et une impasse pour cela, n' est-ce pas ? Mais avant de faire ça, on va faire quelque chose de nouveau. Et quelque chose de différent, je vais aller de l'avant et choisir le rappeur qu' on a, OK ? Et je vais ajouter un combo proche. D' accord. Et pourquoi j'entends cette classe de virgules ? Permettez-moi de vous expliquer. Donc je suis juste de taper la grille, accord ? qui signifie maintenant que tous les changements que je fais effet, seul ce combo plus et tout le reste restent les mêmes. Ce que je vais faire, c'est chaque regard, venir ici aux propriétés d'affichage, et nous avons six propriétés d'affichage, d' accord ? Et nous allions en quelque sorte comprendre ce que ces +21 par un. Mais pour l'instant je vais faire est que je vais cliquer sur le 3ème 1 qui dit Bon vous permet de placer des éléments de celui-ci dans des rangées et des colonnes. Je vais cliquer sur cette animation. Vous pouvez voir que nous avons cette structure de grille que nous avons. D' accord. Et nous allons faire, c'est que je vais choisir et personnaliser les grilles hors des colonnes et des rangées d'harmonie . Je veux évidemment que j'ai besoin d'un seul dro, donc je vais supprimer ici en planant ici et vous pouvez y croire. Et nous avons besoin de colonnes, ce qui est très bien. C' est ce dont nous avons besoin. Très bien, super. Quelqu' un va de l'avant et clique sur. Fait. Donc maintenant, nous avons une sorte de grande couche, et tout ce que nous avons à faire maintenant est des éléments d'entrée. Bon, donc nous allons commencer par créer un bloc pour l'image et un blocage pour le texte. Ok, donc je vais appuyer sur le contrôle E, et je vais apporter un élément qui a causé le bloc, accord ? Et ce qui se passe réellement si vous regardez la navigation, nous avons la chaleur ou la section, et ensuite nous avons le rappeur, qui est maintenant sous la forme d'une grille, qui était auparavant un bloc de colombe. Et maintenant à l'intérieur, nous avons ce bloc. Ok, je vais dupliquer ça en appuyant sur le contrôle, Say country. Et ce que ça va faire, c'est que ça va aller dans une deuxième cellule parce que c'est le deuxième enfant. Et le 1er 1 va occuper le premier parce que le premier voyage, je vais sauver le 1er 1 et je vais ajouter un cours, et je vais appeler ce rappeur d'images de héros Ok, eh bien, eh bien, on pourrait juste appeler cette boîte d'images de héros. Je pense que ce serait un meilleur nom. D' accord. Et pour le 2e 1, je vais laisser ça comme ça et beaucoup de cours plus tard, et je vais te dire pourquoi. Commençons par cette boîte d'images de héros. Maintenant qu'on a créé cette boîte d'images de chauffage, ce que je vais faire, c'est que je vais aller chercher l'image du héros, qui est par ici, ok ? Et je vais choisir ça, et je vais aller de l'avant et déposer ça à l'intérieur. Maintenant, le problème, c'est que ça ne va pas tomber exactement dans l'élément que nous voulons. Donc, la meilleure façon d'y aller est d'aller ici dans la navigation sur. Laisse-le là-bas. D' accord. Maintenant, il ne marchait toujours pas assez bien vite. Donc, nous nous assurons juste que nous l'avons fait de la bonne façon. Donc ce que je vais faire, c'est que je vais sélectionner cette image et mettre ça à l'intérieur de cette image de héros pour bloquer juste là. Allez maintenant. Cette image est assez grande et énorme, non ? Alors, qu'est-ce que tu vas faire ? Un truc bizarre est la première chose est de cliquer sur l'icône d'engrenage et je vais aller de l'avant et ne pas sur cette image. Il dit que l'image est H I D p. Je vais lancer dessus. Ok, et rien ne change. Et je vais expliquer ce que ce h je v p je veux dire dans la prochaine vidéo. Alors, vous avez le contexte. Mais pour l'instant, on ne va pas sur h I D p I Ok, et c'est génial. Et maintenant, nous allons avoir cette impasse, et je ne vais pas encore donner de classe. Je vais y aller. Et je n'ai pas fait d'éléments de texte. Bon, donc un va être ce cap, et un sera ça. Nous avons donc quelques éléments suivants. Si vous regardez le panneau des éléments dans la typographie, nous avons le paragraphe d'en-tête, le lien de texte, le bloc de texte, citation de bloc et le texte enrichi. Donc, dans ce cas, nous allons utiliser et 11 qualité titre. D' accord, je vais faire glisser ça et laisser tomber cette idée. Et pourquoi devons-nous utiliser une rubrique ? Donc, la chose avec les sites Web est que la façon dont ils sont classés sur Google est par le fait que si votre site Web a des mots qui correspondent à la recherche de description faite par l'utilisateur naviguant sur Google, alors vous êtes contrarié va obtenir classé en haut. Alors, comment définissez-vous ces mots-clés dans un site Web ? Et c'est en utilisant cet élément taxe de rubrique qualité. Donc, je clique sur cette icône d'engrenage. J' ai six balises d'en-tête d'aide différentes, et celles-ci doivent être placées en fonction de la hiérarchie de niveau hors hiérarchie. Dans ce cas, nous avons Robin Williams, un designer de produits basé en Italie. C' est assez grand, et c'est l'information la plus importante sur le site. Très bien, c'est le plus important en termes de hiérarchie. Donc ça va être chacun. Ok, donc ce que je vais faire, c'est que je vais aller de l'avant et appeler celui-là, accord ? Um, ou on peut juste l'appeler. Tu sais, aller et souligner. Hum, et on nous a donné des valeurs, comme 76 picks est donc je vais dire, en direction de l'école 76 pixels. D' accord. Et allons de l'avant et ajoutons réellement ces valeurs. Donc on a Oh, j'ai oublié d'installer les téléphones. Je recommencerai. Donc, nous avons sen bowled 76 100% hauteur de ligne. Ok, alors allons faire ça. Nous avons donc aussi cette marge sur le dessus. Je vais en fait enlever ça et dire que 20 en haut dans le bas parce que nous n'avons pas besoin de ça. Hum, 76. D' accord, hauteur va être 100% couleur va être blanche. D' accord ? Et, euh, je pense que je vais fixer ce 210%. D' accord, ça devrait aller. Et ça a l'air bien. Tout après les nouvelles va copier ça. Donc je vais dire que je suis Robin Williams, il concepteur de produits basé en Italie de celui-ci. Maintenant, ça a l'air prêt, différent de la façon dont nous l'avons. Donc la première chose que tu fais est de régler ça à 14 40 pixels. Donc maintenant vous pouvez voir ça, et ensuite on va faire, c'est que je vais sélectionner, vous savez, l'élément de grille, qui est le rappeur dans ce cas. Et si je clique sur cette icône, nous pouvons éditer le grand. Ce que nous allons faire, c'est d'abord, je vais supprimer l'écart de colonne et dire que zéro parce que nous voulons qu'ils soient coupés, touchant les uns les autres. Et ça a l'air assez bien. Ce qui ne se passe pas ici, c'est que cette image est en fait assez longue. D' accord ? C' est, genre, assez gros si tu le regardes, c' est qu'il rampe beaucoup. Droit ? Mais par ici, ça va la limiter à Ah, hauteur de 45 V écoutille. D' accord. Et c'est quelque chose que nous pouvons définir, , parce que nous ne voulons pas que ce soit si énorme, et vous pourriez avoir une image qui est plus longue que ça, ou qui ne l'est pas. Et comment allez-vous faire pour que ça marche ? Droit. Donc ce qu'on fait, c'est que je vais choisir le premier, donner un cours à ça, et je vais appeler l'image l'image du héros, d' accord ? Et je vais choisir l'élément parent, qui est la boîte d'image du héros. Et je vais vous dire que je veux que vous preniez une hauteur de 45. On éclosent. D' accord. Maintenant, on pouvait encore voir qu'à peu près rien ne s'est passé, et ça ne fait aucune différence. Donc, comme, donc la première chose à faire est de favoriser la chute contre ce retour à 14. 40. D' accord. Et puis ce que je vais faire, c'est que ça se chevauche. Ce que je peux faire, c'est que je peux réellement sélectionner le bloc de développement. D' accord ? Ce qui est ici et dans le bloc de la mort. Je vais en fait maintenant, donnez-lui une classe et appelez ce bloc de texte de héros. D' accord ? Et je vais donner une marge négative. chirurgie chevauche celui-là. Et combien devons-nous lui donner ? Je pense que je vais le donner quelque part autour de 64 pixels. Droit. Donc je vais dire marge négative. 64 picks est tellement maintenant que c'est une sorte de chevauchement. Il ne chevauche pas encore complètement l'image, car l'image ne prend pas en fait toute la largeur. Très bien, donc si vous regardez le bloc d'image du héros, vous pouvez voir que c'est combien il prend, mais l'image ne prend pas vraiment autant. Droit ? Donc on va faire, c'est que je vais supprimer l'image du héros. Croisons ça. Et j'écoute la boîte d'images du héros. Et plutôt que d'ajouter un élément d'image, ce que je vais faire, c'est que je vais descendre dans les arrière-plans et l'ingrédient de l'image sectionnelle ici, et je vais cliquer sur le plus et je vais choisir l'image et puis je vais aller et choisissez ma chaleur ou mon image. Donc maintenant, cela agit comme un arrière-plan. Maintenant, la prochaine chose à faire, c'est que je vais régler ça pour couvrir, et je vais le mettre aux pieds Thaïlande aucun. Et aussi la position de plus au centre. Donc maintenant ce que ça va faire, c'est que ça va aller de l'avant et va mettre l'image au centre. Maintenant, vous pouvez évidemment jouer avec ces valeurs pour voir ce que vous voulez, mais cela semble plutôt bien en ce moment. Il n'a toujours pas l'air parfait. Il a l'air assez grand et grand par ici. Mais, tu sais, on va arranger ça lentement. La prochaine chose à faire est d'ajouter dans cette image. Désolé. Ajoutons dans cet élément de texte. Donc maintenant je vais aller de l'avant et copier ça, donc je vais créer ce paragraphe 18 pixels, une copie. Et maintenant, maintenant cette importante, cette information pourrait ne pas être très importante parce qu'elle est faible en termes de hiérarchie, vous savez, si vous regardez toute la page donc je vais utiliser un appelé comme les paragraphes et réprimé le contrôle profond et la recherche d'un paragraphe. Ok, et je vais double-cliquer et coller ça en vue. Et nous allons appeler ce graphique PATA soulignement 18 pixels. Parce que c'est notre paragraphe 18 pixels. Si vous regardez le réglage, nous en avons 18 réguliers et 1 50%. Ok, donc je vais mettre la police de couleur en blanc. Bon, euh, manger des pics, c'est 1 50%. Ok, donc c'est comme ça que ça va ressembler. Et nous avons aussi un peu d'espacement, vous savez, au-dessous du cap profond. C' est autour des pixels de Toledo. Donc, ce que nous faisons est de sélectionner ce titre de héros et dans la marge inférieure. Je vais dire 32 mélangeurs et ça a l'air assez bon. Maintenant, les choses ne sont toujours pas parfaites comme elles sont censées l'être. Donc ce qu'on va faire maintenant, c'est que je vais aller sélectionner, en fait, laissez-moi mettre ça juste ici, et je vais ajouter une autre ligne, et je vais dire que cette section cacher est 100 Veatch. Ok, alors qu'est-ce que ça veut dire encore ? Jetons un coup d'oeil. Je vais aller dans ces sections, accord ? Et dans la section des héros, je vais dire, prenez une hauteur de 100. Nous attelons. Ok, donc maintenant si vous pouvez voir que je suis capable de faire défiler parce qu'il prend 100 de la hauteur du port de vue . Où est-ce que ça veut dire ? Attends. Laissez-moi expliquer ceci un par un. , La seule chose qui s'est passé,c'est que la hauteur a changé. Mais, tu sais, c'est toujours au sommet, tu sais, ce n'est pas au centre. Donc ce que je peux faire, c'est si je sélectionne le rappeur, accord. Et ce que je vais faire maintenant, c'est que je ne veux pas apporter de changements à ce rappeur de grille de héros. Donc je vais aller cliquer sur ce qui dit, hériter de trois sélecteurs, et je vais choisir le niveau inférieur un, donc je vais cliquer sur le rappeur. Donc maintenant, tout changement Emmick n'affecte que le rappeur. Et ici, dans la hauteur, je vais voir pourquoi tu ne prends pas 100% juste ? 100% sur le parent et 100% du parent est 100 v hachure. La raison pour laquelle je ne dis pas de haies de 100 V ici, c'est parce qu'on va utiliser ce rappeur plusieurs fois et je ne veux pas que tout soit 100. La raison pour laquelle je ne dis pas de haies de 100 V ici, c'est parce qu'on va utiliser ce La haie, d'accord. Seulement dans ce cas, je voulais être 100 v hedge, donc je suis en fait l'application. réparation des orteils et élément, qui est cette section. Ok, donc je vais dire 100%. Et maintenant ça va, vous pouvez voir que le rappeur prend aussi, vous savez, tout l'espace. Mais si vous voyez que les choses ne s'alignent pas correctement à nouveau, nous avons besoin qu'elles soient au centre. Droit ? Alors pourquoi ne sont-ils pas au centre ? C' est parce que nous sommes entièrement automatisés, pousse tout vers le haut et le côté supérieur gauche. Et de penser que nous devrions faire manuellement quelques changements. Donc la première chose est ici dans cette impasse, que nous appelons la chaleur ou le bloc supplémentaire. Lorsque vous créez un grand lorsque vous créez un grand, vous pouvez réellement définir à quoi ressembleront les éléments enfants . Donc c'est un enfant génial, non ? Donc je vais dire un centre de ligne pour ça et on fait la même chose ici, est que le héros Image Block est un grand enfant, accord, parce que c'est un enfant hors de la grille, ok ? Et je veux dire le centre de l'alliance. Donc maintenant, c'est à peu près à quoi ça ressemble. D' accord, mais si tu le regardes, ça ne ressemble vraiment mais si tu le regardes, çane ressemble vraimentpas à ça. Donc je peux faire est ici pour cette boîte d'image de héros, plutôt que de définir une hauteur de 45 que je peux changer pour quelque chose de plus grand. Donc quelque chose comme 65 ans d'accord, sur qui semble beaucoup mieux. D' accord. Et maintenant, cette valeur peut être modifiée. Donc, à partir de 45, vous pourriez faire 65 ans, selon la façon dont vous voulez que ce soit. Maintenant, laissez-moi vous expliquer ce qui se passe réellement. Si je vais cliquer sur ce projet publié et que je peux choisir publié pour sélectionner les domaines, je peux cliquer sur le site Web réel et voir à quoi cela ressemble. Bon, donc maintenant c'est comme ça que ça a l'air bien. Et nous avons cette section qui prend 100% de la hauteur du port de vue. Et dans mon cas, ma hauteur de port de vue est puisque je suis sur un écran Windows, c'est 10 IGP. Mais comment faites-vous le vérifier pour d'autres points de rupture, est-ce pas ? Donc, vous Ce que vous pouvez faire est que vous pouvez faire un clic droit. Et elle a été inspectée, d'accord ? Et j'allais avoir ce genre de chose. Et ce qu'il faut cacher ici est, à mesure que j'augmente la hauteur, vous pouvez voir que la hauteur de ce changement aussi parce que nous avons défini une propriété disant 100 v haie, ce qui signifie qu'il reste de 100% sur le tableau de vue hauteur. D' accord ? Et nous voyons que nous avons tant d'espace et d'espace sur le dessus. Alors pourquoi ça se passe ? C' est parce que, tout d' abord, je pense que la hauteur de l'image du héros est trop petite. Alors peut-être qu'on pourrait faire cette couverture TV et aussi la section plutôt que de dire 100 qu'on a frappé. C' est vraiment utiliser ça jusqu'à 90 v haie, non ? Et cela nous rapproche un peu plus de ce qu'il ressemble dans notre design. Je pense qu'on devrait faire beaucoup plus, plutôt que de dire 70 qu'on se dirige, je vais prendre 85 ans et que ça a l'air un peu mieux. Peut-être que je pense qu'une haie de télévision serait un bon travail, alors je vais aller de l'avant et définir cette hauteur d'image pour être une trappe de T V. Ok, ça a l'air bien. Et ça a l'air beaucoup plus proche. Fais ce que nous avons. Nous pouvons effectivement cliquer sur Publier les domaines sélectionnés à nouveau. Ça va le publier dans notre sous-domaine, ce qui est gratuit. Et je peux aller de l'avant et juste recharger ça et vous pouvez voir que ça a l'air un peu mieux. Comme je dirais, beaucoup mieux s'il disait ça à 14. 40 correctifs. Hum et, tu sais, ramenons ça à 25%. C' est à ça que ça va ressembler. D' accord ? 14 40 photos. Ça a l'air plutôt bien. D' accord, très bien. Maintenant, la dernière chose que nous voulons faire est d' ajouter cet d' élémentd' arrière-plan. D' accord ? Et je vais ajouter quelques propriétés à ça ici aussi. Donc, tu sais, il suffit de créer une copie, accord ? Et je vais appeler ça Hito BG Oh, nous devons dupliquer un héros d'élite BG et nous nous sommes demandé qui est pour la hauteur. Très bien, je vais dire 100 v hatch. Ok, peut-être qu'on changera ça un peu plus tard, mais on n'est pas très sûrs. Et pour l'image qui vaut la peine d'être armée pour le monde, je vais dire 65%. Ok, ce qui est 65 VW et nous allons enlever cette hauteur de section. Ok, c'est ce qu'on va faire. Alors allons-y et faisons-le. Donc maintenant, c'est lui-même un élément. C' est un bloc parce que c'est juste une forme aléatoire. Donc ce qu'on va faire, c'est que je vais aller de l'avant et m'assurer que nous sommes à l'intérieur de la section des héros , accord ? Et je vais appuyer sur le contrôle de n'importe qui. Adam a mangé le bloc. Maintenant cette impasse, je vais l'appeler Keitel BG Ok. Et je vais ajouter cette couleur que nous avons. D' accord ? Nous avons déjà ajouté cette couleur. Donc je vais aller au radiateur BG et dans le Grady dans les réglages, je vais choisir un érudit. Et ici, dans les paramètres de couleur choisirait celui-ci, qui est notre niveau un. Et parce que ça a l'air assez bien. Super. Maintenant, comment on fait pour que ça s'adapte au sommet, non ? Comment on fait ça maintenant ? Ici, nous définissons 19 900 par 900 qui, qui semble ok dans la conception. Mais peut-être, mais nous voulions suivre ces propriétés, qui est 100 contre Hatch et 65 VW. Donc je vais commencer par voir Tito. Pourquoi ne pas prendre 100 % de la hauteur du port de vue et je vais dire 100 V écoutille, OK. Et maintenant cela va prendre 100% de la hauteur du port de vue et pour le Mais je vais dire 65 nous w droite, Et c'est 65%. Maintenant, cela doit vraiment aller grandir sur le dessus. Maintenant, voici une nouvelle fonctionnalité que nous allons comprendre. Nous allons comprendre quelque chose sur l'absolu et relatif. Maintenant, quand nous avons des éléments qui se chevauchent, comme vous pouvez le voir ou l'entendre, c'est sur le dessus. Ceci est en bas, mais ensuite nous avons le texte et l'image sur le dessus. Mais vous savez, cet élément est en bas. Donc, nous avons des couches, à peine définir des couches dans les sites Web. Donc on va faire ça va aimer ce héros, B g, et je vais venir ici pour se positionner, ok ? Et je vais choisir la position. Absolu. Ok, maintenant, rien ne s'est passé, mais si j'ai vraiment plané dessus. Vous pouvez voir qu'il y a un texte qui dit positions absolues un élément par rapport au parent de position le plus proche, faire le corps si aucun parent n'est sélectionné, Alors que signifie tout cela ? Donc, si je vais choisir l'un de ces presets et que je vais dire cet endroit, qui est le haut, droite, il va aller et se pendre en haut à droite de tout le site, qui est tout le corps dans cette affaire. OK, mais le problème, c'est que vous pouvez voir qu'il chevauche tout. Donc, ce que je vais faire, c'est ici que nous avons quelque chose appelé indice Z, qui définit un nombre, et ce nombre est le niveau hors hiérarchie se chevauchent ou l'espace de la maladie. Et on va aller de l'avant et juste dire ça à moins un. Ok, donc maintenant que j'ai le sénateur moins un, c'est derrière tout le reste parce que tout commence ce niveau zéro. Je reviens d'un niveau et je le mets à moins un. Ok, super. Maintenant, une autre chose que je voudrais expliquer est à propos d'ici. La position est définie sur absolue et elle est relative au corps, ce qui signifie qu'elle est positionnée en haut à droite du corps. Bon, voyons ce qui se passe quand je le change. Il fait autre chose. Quoi ? Je veux dire la même chose est ici. Si je viens à la section héros, qui est le parent, et si je vais de l'avant et dit la position de ce parent, vous pouvez voir que cette boîte Tout droit, qui est ce héros B g est une position absolue qui est positionné en haut à droite de la section héros. Ok, maintenant, c'est la différence entre relatif et absolu, et vous voulez aller de l'avant. Et si je change cela en haut à gauche, il va aller en haut à gauche de la section héros parce qu'en ce moment il est relatif à la section héros. Donc, si je veux supprimer cela et le rendre par défaut, ce que je peux faire, c'est que je peux revenir à la section héros, qui est le parent, et en le réparant, je vais définir la valeur par défaut du gardien statique. Alors maintenant ça. Donc maintenant cet élément, qui est le héros BG BG est relatif au corps et nous voulons qu'il soit en haut à droite . Donc je vais dire ça en haut à droite. Et maintenant, allons de l'avant et rapidement donner à cela une publication et voir à quoi cela ressemble. Bon, allons-y et fermons ça et rafraîchissons. D' accord. Je viens de recharger. Et c'est comme ça que ça ressemble. Ça a l'air plutôt bien. Maintenant, vous pouvez aussi voir ici que vous connaissez l'espace par ici. C' est assez grand. Jouer avec ces valeurs un peu plus alors ici nous avons dit, la hauteur de 100 v haie ou je peux faire est probablement dit cela à 100 10 v h. la hauteur de 100 v haie ou je peux faire est probablement dit cela à 100 10 v h. Donnons-lui un coup de feu. Voyons voir à quoi ça ressemble. Nous pouvons sélectionner l'image d'arrière-plan que nous avons. Ah, le héros BGE. Et ici, dans le Heideman a dit que 110 v attelage et qui donne un peu plus d'espace. Je pense que ça a l'air plutôt bien. Ça a l'air assez juste. Euh, alors jetons un coup d'oeil. D' accord ? Et rechargeons ça. D' accord ? Et on y va, oui, ça a l'air beaucoup mieux. On a cet espace supplémentaire en bas, accord ? Vous pouvez aussi voir que ce texte ici est gentil, vous savez, s'éloigner du côté droit. Eso ce que nous pouvons faire Vous n'avez pas de bon moyen de réparer que nous pouvons en fait juste, euh, section 40 et 40. Et ce que nous pouvons faire, c'est que nous pouvons réellement casser ça en une autre ligne. Bon, donc maintenant s'il a dit que c'était le cas en 1920 Très bien, vous pouvez voir que ça se casse dans une autre ligne que nous pourrions faire. La même chose est ici aussi, pourrait-on dire, basé en Italie dans une ligne différente. D' accord, donc, tu sais, ça a l'air mieux. Super. Maintenant, une dernière chose que nous voulons faire est de voir ou d'entendre le texte qui dit basé en Italie est un peu moins opacité. Alors, comment pouvons-nous aller de l'avant et faire ça maintenant ? Évidemment, vous pouvez aller de l'avant et créer un autre élément de texte lui-même et lui donner une classe différente et changer la couleur, mais nous allons rendre cela un peu plus simple. Donc ce qu'on fait, c'est que je reviendrai à 14 ans. 40 et je vais aller de l'avant et sélectionner toute cette section qui dit basé en Italie. Et lorsque nous sélectionnons cela, nous obtenons ces cinq options, qui sont en italique gras, portée des liens et la mise en forme claire. Ce que nous voulons faire, c'est choisir rapidement avec span. D' accord ? Et une fois que vous choisissez la plage rapide, voyons à quoi elle ressemble dans la navigation. Alors on a commencé avec la chaleur. Oh, section. Et puis nous avons eu un rappeur de héros. C' était quoi notre grille ? Et à l'intérieur, à gauche, on avait la boîte d'images du héros. Et sur le côté droit, nous avons ce bloc de blocs, qui est appelé la chaleur ou bloc de texte. Je ne sais pas pourquoi il ne met pas à jour ce nom ici. Ah, bien. Il orteil bloc texte. D' accord, de toute façon. Et à l'intérieur de ce bloc de texte de héros, nous avons un titre, qui est le principal, et puis nous avons un paragraphe. Maintenant, l'en-tête, qui est un élément de texte, a un autre enfant, qui est la plage de texte de Carla. Bon, maintenant à ça, je vais donner un cours, et comme c'est en fait 50 % de capacité, je suis qu'on appellera ce cinquième blanc souligné 50. D' accord ? Et puis je vais aller radios la police à la couleur de la police à 50 % de capacité, donc ça change juste la couleur de la police. Maintenant, tout le reste reste le même. Si j'augmente cela ou diminue à 24, vous pouvez voir qu'il diminue également à 24. Mais la seule chose est que parce que nous avons ajouté une classe différente à cela, toutes les propriétés restent les mêmes sauf la couleur de la police. Bon, donc c'est à peu près comme ça qu'on fait. Super. Donc, dans la prochaine vidéo, nous allons aller de l'avant et faire de ce point de pause mobile réactif. Un autre point de rupture, et ça va être assez amusant. Je vous vois dans la prochaine vidéo. 12. Rendre la section de héros réactive: D' accord, les gars. Il est donc temps de rendre cela réactif pour les points de rupture. Alors voyons comment faire ça. Si vous regardez la conception dans la fig mob, je vous ai fait savoir, le point de rupture seulement de Mobile, droite, parce que à peu près paysage mobile sur mobile portrait sont similaires et bureau et tablette sont assez similaire. C' est pourquoi j'ai décidé de ne faire que deux et pas plus de deux. Alors allons faire ça. Donc, nous allons en fait sauter dans le point de rupture de tablette et nous voyons que nous avons quelque chose qui ressemble à ça et si vous jouez avec, ça ressemble un peu à ça. Et honnêtement, je pense que ça a l'air bien. Ça n'a pas l'air si mal, mais une chose qu' on pourrait faire, ce que je saurais probablement, c'est faire, c'est une sorte de radios de la taille du téléphone un peu. Bon, donc ce qu'on peut faire est probablement juste insérer la 76. C' est ce qu'on réduit à quelque chose comme 56. D' accord ? Et ça devrait, tu sais, être beaucoup mieux. Peut-être qu'on pourrait aussi aller faire des radios dans l'espacement. Donc, à partir de 40, nous pourrions définir cela sur 32 sur la gauche et 32 sur la droite afin que nous puissions faire la même chose ici dans la section ici aussi. Devant les radios. Ce 32 peut être que ça va faire une différence. Peut-être pas, mais je pense que ça a l'air assez OK, euh et je veux dire, ça a l'air beaucoup mieux, tu sais, si on le regarde sur un grand écran, mais, tu sais, les plus courtes aussi, vous savez, air assez bien, à mon avis. Bon, maintenant, allons au paysage mobile. D' accord ? Alors, paysage immobile, c'est ce que nous avons. Et ce que j'ai fait ici est en fait changé toute la mise en page de ceci pour paraître différente, non ? Donc nous avons l'image et le haut, et nous avons quelques informations ici en bas. Donc, la fertilité ne change pas la taille de police de ce à 32 quelqu'un pour sélectionner le titre . Et je vais mettre ça à 32. D' accord. Et ça devrait être assez bon même sur les distances. 16. Je me demande, c'est de 32 à 60. Super. Maintenant, la prochaine chose que je vais faire est que je vais vraiment sélectionner l'arrière-plan BG l' élément BG héros que nous avons, ce qui est OK, et ce que je vais faire, c'est que je vais vraiment cacher ça. D' accord ? Je ne veux pas voir ça sur le point de rupture du paysage. Donc, pour ce faire, ce que je peux faire qui peut cliquer sur cette icône qui cache les éléments qui affichent mis à zéro. D' accord. Et quand je fais ça, c'est complètement parti. Mais quand je reviens au point de rupture de tablette, il est toujours là, et nous arrivons au point de rupture de bureau. C' est toujours là, non ? Donc, assurez-vous que, vous savez que les choses fonctionnent bien. Donc ici, ce que je vais faire, c'est que je vais aller et maintenant sélectionner le héros ou le rappeur, et maintenant on va changer la structure hors de la grille. Ok, donc ce qu'on va faire, c'est que je vais aller cliquer sur Modifier. D' accord ? Et maintenant, entrez hors de faire ces deux colonnes et une goutte. On va en faire une colonne et des félicitations, accord. Et la seconde est automatiquement générée automatiquement, donc c'est bien. Et nous cliquons sur terminé. Nous avons également l'espacement sur la gauche, dont nous n'avons pas vraiment besoin. Donc je vais mettre cet orteil zéro, ok ? Et c'est à peu près comme nous voulons. D' accord ? Et la prochaine chose est cet élément. Maintenant, j'ai donné une hauteur de 288. Maintenant, ce qu'on peut faire, c'est qu'on peut lui donner la hauteur de 50 picks, 50 Veatch ou pour TV Hitch. Nous pouvons réellement définir cela. Donc je vais aller à l'image de l'appareil de chauffage ici. Nous en avions donné 80. Je suis probablement que ça va déjà s'en aller. C' est pour avoir 50 ans ? Um, ou peut-être même 45. Je ne sais pas. Tout ce qui fonctionne, accord. air bien. La prochaine chose que nous allons faire, c'est pour la section héros. On a dit neuf télé Hitch. Je vais en fait supprimer cela et dit cela à l'auto parce que je ne veux pas qu'il prenne 90 v hedge. Je vais mettre cette auto orteil, et ça a l'air beaucoup mieux. Ok, alors. La prochaine chose, c'est qu'on a un peu d'espacement à gauche et à droite, accord ? Et l'espacement est de 20 picks, donc je vais aller sélectionner le bloc de mort, qui est le bloc de chaleur ou de texte. Et ici, nous avions donné une marge négative. 64. Je vais dire ça pour être un Zito, accord ? Nous voulions être normaux. Et ensuite, je vais donner un orteil de rembourrage intérieur de 20 pixels, donc ça pousse les choses, tu sais, comme, donc. Bon, on y va. Quelle est la prochaine ? Nous avons donc une distance de 48 pixels en haut et de 48 pixels en bas. Donc ce que je vais faire, c'est si tu regardes la grille. Très bien, on a ce coup de fond de 16 correctifs. Je vais aller de l'avant et mettre ça à zéro, parce que je veux qu'ils se touchent. Je ne veux pas d'écart. Et pour donner cet écart de 48 pixels, je vais aller sélectionner. Ça a bloqué, et sur le dessus, je vais dire 48 le rembourrage inférieur, je vais dire 48 ok ? Et la prochaine chose est, nous avons aussi cette image de fond, la couleur de fond, donc je vais aller à la section d'arrière-plan et juste Adam, cette couleur que nous avions des rituels de niveau 1, accord. Et c'est à peu près à quoi ça va ressembler, Revenons à la tablette pour voir tout va bien et ça a l'air parfaitement bien. n'y a rien de mal à la même chose ici, mais pour le paysage, c'est très différent, accord. Et si je veux, je peux aller de l'avant et montrer ceci pour voir à quoi il ressemble sur d'autres points de rupture, ce qui semble bien. D' accord. Et maintenant, allons sur mobile. Et il semble assez bon sur mobile aussi bien. Il s'adapte parfaitement et a l'air fantastique. Nous sommes donc descendus sur un écran de résolution de 3 60. Donc c'est à peu près à quoi ça va ressembler. Et je pense que ça a l'air super. Bon, vérifions si tout va bien. On clique sur le menu déroulant, on obtient ce menu déroulant, juste à l'école, et, oui, ils ont l'air plutôt bien. Très bien, donc c'est beaucoup sur la façon dont vous rendez la section héros réactive. Si vous vous êtes confus, je vous recommande de regarder la vidéo à nouveau et je vous vois dans la prochaine vidéo 13. Créer la section de l'expérience: D' accord, les gars. Donc, dans cette vidéo, on va aller de l'avant et créer la section suivante. Cela devrait être très simple et très simple à faire. Ce n'est pas compliqué du tout. Et je vais de l'avant et juste créateur, comme un cadre métallique pour expliquer comment ça marche. Donc, évidemment, nous commençons avec la section riche, prend tout l'espace, et puis nous avons un conteneur à l'intérieur qui va suivre les mêmes propriétés que ceci Où nous avons soit 40 ou 72 picks est tapotant de chaque côté et ils sont va marge 1920 pixels, la même chose qui a refait pour la naff mais aussi pour la section de chauffage. Et puis nous avons deux ensembles d'éléments. L' un est la partie supérieure, et ensuite on en a une est la partie inférieure. Donc, je vais créer un bloc pour le dessus sur va avoir à des éléments de texte. Laissez-moi juste dupliquer ceci maintenant, donc il va y avoir notre élément de texte numéro un et va être notre élément de texte numéro deux et fait assez gros. Donc ça va ressembler et ensuite on en a un pour le fond et ça va être ça va tenir trois qu'ils ont bloqué. Donc le bloc un bloc pour bloquer trois. Donc c'est fondamentalement la structure de la façon dont ça va fonctionner. Alors allons-y et faisons-le. Nous voici donc à Buffalo et Leicester en créant une nouvelle section. Donc, chaque fois que vous voulez créer une nouvelle section, sélectionnez l'élément du corps, puis appuyez sur le contrôle e et à une section Donc maintenant que la section est un enfant du corps afin que vous puissiez réellement voir maintenant nous avons le claquement notre nous avons la section héros et puis nous avons cette section. Donc, pour cette section, Ramadan, appelez cette voiture de section de travail. Disons une section opportune, d' accord, ça a plus de sens. Section utile euh, l'appel de Dieu, cette section tout d'abord, le 14 va faire va ajouter cet espacement à gauche et à droite, qui est d'environ 72 pixels à gauche et 72 pixels à droite. Je vais aller à la section et dire, rembourrage 72 corrections et rembourrage 72 photos. Bon, on y va. La prochaine chose que je vais faire est d'ajouter un rappeur dans un nouveau développement, et nous appellerons ce rappeur, d'accord. Et juste pour s'assurer qu'un rappeur paramètres nous avons 100% avec et un maximum avec off 1920 pixels, je vais aller de l'avant et dit cela à 14. 40 D'accord ? Et maintenant, nous voulons aussi ajouter cette marge en haut du bas. Donc, 1 20 pixels en haut et environ 1 20 pixels en bas pour que je puisse aller et sélectionner la section, accord ? Et dans la section, je vais dire, rembourrage 1 20% sur le haut et le bas 1 20%. D' accord, donc ça ressemble à ça, non ? Ça a l'air bien. Et maintenant, nous avons l'intérieur. On a le rappeur. Ok, comme vous pouvez le voir, cette pomme est au milieu, vous savez, vous savez, le 1 20 en haut et le 1 21 en bas. D' accord. Et nous allons tout en créant notre premier bloc sourd, non, et ce bloc de bloc va tenir nos éléments de texte, donc je vais commencer par créer une impasse, non ? Et je ne vais pas le nommer pour le moment parce que je veux commencer à donner un nouveau type à la structure de nommage . Deux éléments. Donc, nous regardons comment faire cela. La 40 minute était à l'intérieur. Ce jour Bloc. Je vais créer un bloc de texte. C' est un nouvel élément que nous ajoutons. Bon, Now, Text Block est quelque chose que j'utilise quand ce n'est pas un paragraphe, mais c'est juste une seule ligne de texte. Et ici, c'est l'expérience de travail. Je vais copier ça. Et je vais venir ici et le baser. Maintenant, allons-y et mettons-en fin de compte. Donc, c'est ceci est au-dessus de 16 pixels afin que nous puissions voir les propriétés. 16 photos, 1 50 % garçon. D' accord, donc je vais aller de l'avant et appeler cette overline soulignement 16 correctifs. D' accord. Et allons de l'avant dans les propriétés de sorte que la taille va être de 16. La hauteur va être de 150%. Le taux du fonds va être audacieux, et la couleur est ici. C' est ça ? La couleur ici dit poignée légère sur le vert clair ? Est-ce que ce nouveau terrain de couleur ? Je vais copier ça. D' accord. Et, euh, je vais venir ici à la couleur, et je vais le faire entrer. D' accord. Et nous pouvons également ajouter cela comme une nuance de couleur. Donc nous avons cette lumière Grande. Vous savez, vous savez, il suffit de cliquer sur créer et a été assez bon. Ok, donc maintenant j'ai l'impression de voir ou d'entendre que cette superposition de 16 pixels est une sorte de prendre tout ce grand droit, mais ce n'est pas ce que nous voulons. Ce que nous pouvons faire est si nous allons ici aux propriétés d'affichage, nous avons quelque chose appelé dans le bloc de ligne, et nous avons quelque chose de couleurs en ligne. Je vais cliquer sur en ligne, bloqué, et tout ce qui va aller, c'est que ça va restreindre cela pour prendre seulement l' espace de l'élément Déjà l'espace, la longueur du texte dans ce cas. D' accord. Et maintenant, en introduisant, Vous savez, ajouter dans cette section suivante. Maintenant, ce sera un titre parce que c'est la deuxième information la plus importante en termes de hiérarchie. C' était chacun. Ce serait aussi hte. Donc je vais appuyer sur le contrôle, manger et prendre un cap, ok ? Et je vais cliquer ici, ce qui va le faire et couvrir. Et encore une fois, je vais aller de l'avant et à un cours et appeler ce cap. Um, soulignement. Il y aura 55 choix, alors on va appeler ce cap. Souligner 55 corrections. Ok, maintenant nous avons ce rembourrage en haut et en bas. Je veux seulement le rembourrage inférieur, qui est 40. Je ne veux pas le rembourrage supérieur. Ok, maintenant que ça va signifier que ça va rester ensemble. Donc plutôt, je vais ajouter la marge de remplissage inférieure à cela, qui est de huit pixels. Alors nous venons ici et nous disons Marge. Ok, donc maintenant ça donne cet espacement. Et allons de l'avant et copions cette information, ce texte et base que nous sommes ici et allons de l'avant et voir les paramètres. Donc on en a 50. Nous avons 55 pixels et tableau. C' est tout à fait exact. Donc, allons de l'avant et définissons la taille de la police à 55. La hauteur va être de 100% et nous pourrions aller de l'avant et définir la couleur de l'orteil étranger pour être blanc. Droit ? C' est plein. Réfléchissez bien. Ce que nous voulons faire, c'est que vous pouvez voir ici que cela est limité à une certaine limite. Et je vais aller de l'avant et prendre ces informations et en faire une copie. Je vais appeler ça plus serré, et je vais dire que ça vaut 60 %. Ok, donc ce que je veux dire, c'est ce texte. Ok, donc maintenant je vais aller de l'avant et dire que ça est dans le bloc de ligne, ce qui signifie que ça prend toute la place et la lecture de fixe. C' est qu'on va utiliser Flex. Bon, alors qu'est-ce que Flex ? Donc si je sélectionne l'impasse, accord. Et ce que je me demande, c'est que je vais cliquer sur cette deuxième option d'affichage qui dit flex. Et quand je clique dessus, quelque chose se passe. Très bien, nous avons ce nouvel ensemble de propriétés et flex vous permet d'organiser les éléments de n'importe quelle manière que vous voulez de manière très flexible. Donc, regardons en fait 33 propriété que nous avons avec votre direction. On a un alignement et on est justifiés, ou je vais dire que je veux l'élément, Toby l' un en dessous de l'autre. Et une chose que vous devez remarquer ici est que la propriété est éteinte. L' attribution de deux flacons doit être à l'élément parent. D' accord. Et comme vous pouvez le voir, De Block ici est l'élément parent, et nous avons des éléments de texte à l'intérieur. Lorsque vous soulevez le parent, vous pouvez alors réorganiser l'arrangement à partir des enfants, accord ? Et c'est ce que je vais faire. Je veux que la direction de l'alignement les soit verticale parce que je veux que leséléments soient l'un en dessous de l'autre. Donc je vais prendre la verticale, d' accord ? Et j'ai quelques réglages. Il nous reste de la ligne. Ah, le centre de la ligne est aligné, à droite. Si je clique sur un centre de ligne, c'est comme ça qu'il va chercher un clic sur un lecteur de ligne. C' est à ça que ça va ressembler si je choisis l'espace entre ça, quoi ça va ressembler. Bon, donc ce que je vais faire, c'est que je vais à celle qui dit une ligne à gauche ou à droite, parce qu'on veut que les éléments soient alignés à gauche. Et aussi, nous pouvons dire, justifié au sommet, comme vous pouvez choisir, justifier au centre, justifier le fond. Dans ce cas, il est vraiment n'a pas d'importance parce qu'il n'y a pas assez d'espace pour qu'il soit plus. Donc on va juste le laisser pour justifier top et entendre. Ce que je vais faire, c'est que je vais donner ce bloc de porte si un nouveau cours et que je vais appeler ce flex vertical, accord ? Et je vais voir le soulignement gauche et souligner Top. Ok, donc c'est le cours que je vais donner maintenant va arriver. Est chaque fois que je veux flexibles éléments de cette certaine manière, je peux juste appliquer cette classe que nous avons et qui le rend facile pour l'organisation. Quand vous construisez un site web, nous avons en fait cette valeur inférieure de 40 que je donne au Mexique pour supprimer ça pour l'instant. Oui, parce que ce titre n'a peut-être pas toujours 40 pixels espacement entre les autres éléments sur lesquels va dire que zéro pour l'instant. D' accord. Et maintenant, le problème ici est que vous pouvez voir qu'ici le avec est en fait 60% de réduction sur l' ensemble du travail que nous avons. Donc, ce que nous faisons, c'est sélectionner cette rubrique 55 corrections et dans le travail, je vais dire 60%. Ok, donc maintenant ça n'arrivera pas. Il va aller de l'avant et limité à 60% de réduction sur le port View avec Ok, Donc si je l'ai dit à 12 40 ça va être 60% de cela. Et s'il l'a dit à un plus petit nombre, disons 1100, ce sera 60% de cela. Ils l'ont dit à 1920. Ça va être 60% de ça maintenant. Évidemment, cela semble un peu bizarre car en 1920, il prend 60% mais ça n'a pas l'air bien . Donc, ce qu'on peut faire, c'est , vous savez, plutôt que d'avoir ça pour être 61e personne, nous allons en fait cliquer dessus et réinitialiser. Ce que nous pouvons faire est en fait affaiblir. Brisez la ligne ici et on pourra s'en débarrasser. Alors allons-y. Et, euh mais je dis que parce que j'ai regardé, je peux enlever la ligne pour et mettre une ligne séparée. Ok, ça semble beaucoup mieux maintenant, je pense que pour le titre, je voudrais ajouter un peu de Heizo Nets 110%. Parfois, la hauteur de la ligne dans le développement Web fonctionne à la liberté qu'à la Fig Marceau sur la fig. Mon si ça a l'air bien. On voudra peut-être l'augmenter un peu ici. Super. Maintenant, vous pouvez voir que nous avons un problème maintenant dans cette section de l'expérience, même si nous avons ajouté une séparation supérieure de 1 20 Très bien, c'est en fait commencer à partir de la fin de cette ligne, parce qu'ici, c'est en fait commencer. Cette section commence à partir de la fin de ceci, mais ici ce n'est pas le cas. Et la raison est que ce corps BG que nous créateur est en fait derrière tout le reste. Cela n'affecte pas l'espacement entre la section appropriée sur la chaleur. Oh, section la section de chauffage et les sections d'expérience sont, vous savez, proches les uns des autres. Ils se touchent et ce fond de corps que nous créons n'a aucun effet. Donc, la seule façon de corriger cela est que nous pouvons effectivement cliquer dessus et maintenir ou pour voir la distance. Et c'est autour de 245 choix, parce que cette section se termine en quelque sorte ici. Bon, donc on peut vraiment choisir ça et plutôt que 20, on pourrait dire 240. Je pense que c'est probablement un bon nombre ou 200 nous pourrions ne pas connaître la taille exacte en raison du fait que cette section est basée sur 90% port de vue, est-ce pas ? Et vous savez, qui diffère de chaque point de rupture faire la conception parce que nous l'avons conçu à 14. 40. Donc, ce que je peux faire est de faire, la section de l'expérience et de lui donner un numéro, Disons, 265 et je pense que ça semble assez bon. Alors ramenons ça à 14. 40 et oui, ça a l'air bien. D' accord. Ok, donc la prochaine étape est d'aller de l'avant et de créer Thies second jour bloc et à l'intérieur on va avoir trois éléments. Donc ce qu'on fait, c'est que je vais aller de l'avant et m'assurer que nous avons sélectionné le rappeur. Je vais presser manger contrôlé, et je vais dire le bloc. Et cette fois, je vais en fait obtenir un élément de grille. Donc je vais juste obtenir un bon accord et définissons donc on veut trois colonnes et se demander. Oh, alors enlevez Andro et laissez nos trois colonnes Nous avons trois colonnes. Fantastique. Et nous pouvons également voir que ici cette semaine a ajouté une recherche de grille cliquez sur le cadre et, vous savez, bascule look sur vous pouvez voir que nous avons. Ah, grand espacement de 24 pixels. Droit. Nous voulons donc nous assurer d'ajouter cela. Donc je vais aller de l'avant et dans le trou de colonne. Je vais dire que 24 choix sont et ça devrait être bon. Maintenant, ce gars touche la partie supérieure, donc je vais ajouter une marge supérieure sur 40. Et ici, dans ce grand. Maintenant, nous ne réutiliserons peut-être pas la peur de mes temps plus profonds, donc nous pouvons juste lui donner un cours, et nous pouvons appeler cette expérience génial. D' accord. Et bien. Donc maintenant tout ce que nous avons à faire est que nous devons Adam il a développé pour chaque boîte, puis commencer à ajouter les éléments à l'intérieur. Donc je vais créer un bloc, OK. Et ici, à l'intérieur de ce bloc, je vais appeler ça. On peut lui donner un autre nom plus tard. D' accord ? Je vais commencer en ajoutant celui-là. Maintenant, ce n'est pas important pour la hiérarchie, mais c'est juste une étiquette douloureuse, donc je vais ajouter un bloc de texte, accord ? Et je vais appeler ce numéro d'accord. Et voyons les propriétés. Sa hauteur de ligne 117 et 1 20%. Donc je vais juste double-cliquer dessus. Change ce 201 Très bien. Et ici, dans les propriétés, la taille va être 117 La hauteur de la ligne va être de 1 20%. D' accord, tu sais, on pourrait juste dire ça à 100%. Dans ce cas, ça devrait être bien. Et on pourrait probablement dire ça trop audacieux. Ok, est-ce que je pense que c'est normal. Alors, restons à la normale. Donc je vais aller de l'avant et faire de ça un régulier, et la couleur va être notre degré de lumière. Droit ? Super. La prochaine chose, c'est que nous avons ça. Maintenant, ça va être notre h 3, non ? Parce qu'on a chacun une heure deux et ça sera sur la huitième rue. Bon, donc je vais ajouter un nouvel élément de titre, accord ? Et ici, dans l'élément de titre, je vais dire que je vais aller de l'avant et copier ça. D' accord ? Et coller. Et nous allons nous assurer que c'est un trois chacun, accord ? Et je vais voir le trait de soulignement et ceci est 24 choix de droits ou 24 gras. Ok, donc ça va se diriger souligné 24 correctifs, et ça devrait être bon. Alors allons de l'avant et changez la taille à 24 qui est déjà masquer la ligne. Weaken a dit que le faire. Peut-être que 1 20% ne devrait vraiment pas avoir d'importance, parce que c'est juste une ligne et la couleur va être blanche. Et pourtant, ça a l'air assez bien. Maintenant, si vous allez de l'avant et sélectionnez le nombre et les radios qui doivent être dans le bloc de ligne, il semble bien. Ok, est-ce qu'on pourrait le laisser bloquer dans cette affaire. Vraiment n'a pas d'importance. D' accord. Et maintenant pour que ça bloque, allons-y et donnons-lui un cours, et on peut appeler ce bloc d'expérience, accord ? Et maintenant on va aller de l'avant, et on a beaucoup d'espacement ici en haut dans le bas. Donc c'est tout d'abord, nous n'avons pas d'espacement. Et en bas, nous avons, genre, 16 pixels. Donc ici, ce que je vais faire, c'est que je vais radios ça à partir de 22 B zéro. D' accord ? Et peut-être qu'on pourrait obtenir un peu, même si ça a l'air un peu différent. Et le design que nous pourrions probablement ajouter en huit pixels sur le dessus. En bas, vous pouvez voir 16 photos. Ok, je pense que je vais faire, c'est que je vais supprimer cette marge sur le haut Century a dit ça et pour le numéro, je vais lui donner une marge inférieure. Je pense que ça devrait réserver. Et pour ça va remettre ça au PDG. Ok, ça a l'air beaucoup mieux. Et maintenant, on va ajouter un paragraphe et c'est 16. Correction d'un certain ardent dans le nouveau paragraphe. D' accord ? Et copiez ceci et collez. Maintenant, avons-nous déjà un paragraphe 16 ? correctifs ? Non, on n'en a pas. Nous avons un paragraphe de 18 pixels. Donc, ce que nous faisons est d'assurer votre nouveau truc. Je vais appliquer ce paragraphe de 18 pixels, d' accord ? Et puis je vais vraiment venir ici sur cette liste déroulante. Je vais choisir un cours en double. Donc maintenant, il fait une copie de cette classe, et il a exactement les mêmes propriétés, mais un nom différent, accord. Et puis je vais en fait aller de l'avant et renommer cela à 16 choix est et toutes les propriétés sont déjà là. Donc, ça me fait juste quelques clics, et je peux aller et mettre la marge de fond à zéro. Et aussi, je peux changer la taille de police à 18 à 16. D' accord, ça a l'air plutôt bien. Maintenant, nous avons aussi le mot Google, qui est en vert. Alors comment on fait ça ? Comme j'ai mentionné que nous changeons la couleur ici en utilisant une plage rap. Nous pouvons faire la même chose ici, quelqu'un ou double-cliquer sur Google. Sélectionnez cette modification à étendre. Et nous pouvons sélectionner ceci. Appliquer une classe coalesce vert, et nous pouvons appliquer une couleur verte simple que nous avons. Je vais copier ce cordon de couleur, accord. Et je vais venir ici et changer la couleur de ça pour être verte. Et, tu sais, on peut ajouter ça comme échantillon si on ne l'était pas. Et ça a l'air assez bien. Super. Maintenant, ce que nous pouvons faire est que nous pouvons sélectionner ce bloc d'expérience et je vais appuyer sur le contrôle C contrôle V et contrôler nous pour le coller deux fois. Et c'est ce qu'on va avoir. Et ce que j'allais sélectionner ceci et dire cela à et sélectionner ceci et changer cela à trois. Et on peut y aller et vite. Allez-y. Copiez ces éléments. Très bien, bête et ah, copie bête et copie bête et copie et découpe. Attends. Mais le problème ici est que vous savez, nous avons appliqué un autre billet de classe. Donc, si vous regardez la navigation, nous voyons que les choses sont un peu gâtées. Donc ce que je vais faire, c'est que je vais aller de l'avant et supprimer ceci et cela. Et nous pouvons sélectionner cette rubrique 24 que nous créons et réveillons le rythme ici. Donc nous n'avons pas de confusion, et ensuite nous pouvons juste aller de l'avant et changer ceci en concepteur de conduits de prod. Et maintenant, nous pouvons appeler ici et nous pouvons dire graphiste, ok. Et cela, nous pouvons changer notre dribble. Et ici, nous pouvons changer ça à B. Facebook. Ok, maintenant, l'année prochaine ou deux est là. On a dit vert, non ? Donc, plutôt que de voir vert, nous pouvons appliquer cette nouvelle cour de couleur. Donc je vais copier ce cordon de couleur. D' accord ? Et je vais enlever cette étiquette verte. Je vais appeler ça bleu, et je vais venir ici à la couleur. Et à ce col bleu les animaux font la même chose ici pour dribble. Je vais supprimer ce cours, et je veux dire que je pense, d' accord, accord, et une copie de ce noyau de couleur rose que nous avons. Et je vais venir ici à la couleur et changer ce rose et aussi peut-être à une nuance. Mais je ne pense pas que nous utiliserons ces couleurs contre pour que nous puissions les laisser tel quel. Donc maintenant, c'est à peu près à quoi ça ressemble. Ok, la prochaine chose que je veux faire est si vous voyez ou entendez, même si les distances 24 que j'ai ajouté un peu d'espacement par ici, ce qui est sur 48 correctifs, accord ? Et c'est quelque chose que j'ai fait intentionnellement. Parce que si je le pousse à droite, tu sais, tu sais, ça a l'air un peu bizarre parce qu'il y a beaucoup moins de distance. J' ai donc intentionnellement ajouté que 48 pixels. Donc je vais sélectionner cette expérience, bloquer que nous créateur, et je vais aller de l'avant à la mordure et dit que je presque 40 il. Alors quoi ? Ça va perdre qui va aller de l'avant et notre 48 pixels battant. Et cela va s'appliquer à tous les autres t comme les deux autres aussi parce qu'ils ont la même classe qui dit Experience Block. Donc 48 0 ici aussi et ça a l'air assez bien. C' est exactement ce que nous avions en tête. Ah, affaiblir, je veux penser qu'on peut aller à 1920 pixels et voir à quoi ça ressemble et ça a l'air assez bon. Maintenant, dans la prochaine vidéo, nous allons aller de l'avant et rendre ça réactif, donc je vous vois dans la prochaine vidéo. 14. Rendre la section d'expérience: d' accord. Donc, il devrait y avoir une vidéo assez simple et une voie radio très rapide. On va juste rendre ça réactif, alors voyons comment faire ça. Allons au point de rupture de la tablette et voir ce qui se passe ? Mini tablette, Brick Boynes. Les choses ont l'air bien. Ils ont l'air bien. Mais le problème, c'est que nous pouvons le voir. Vous savez, l'espacement est souvent qu'il avait l'air. Ça n'a pas l'air parfait. Donc on répare ça maintenant. Ce qu'on a fait ici, c'est qu'on a franchi cette ligne ici, non ? Nous avons donc déplacé le mot loin dans le passé dans une deuxième ligne. Et c'est la raison en est que quand cela se rétrécit, vous savez, puisque dans le passé est déjà sur une deuxième ligne, nous avons cet espace inutile. Alors, comment pouvons-nous réparer ça pour que ça paraisse bien ? Maintenant, la première chose que vous avez essayé était d'ajouter une valeur fixe sur 60 v hatch ou quelque chose d'autre préférerait ce que nous pouvons faire est de faire en fait aller de l'avant et, vous savez, assurez-vous que c'est dans une ligne, et pour rendre cela un peu meilleur, nous pouvons vraiment y aller. Et dans le fichier figment. Vous pouvez réellement définir une certaine valeur. J' ai donc défini la valeur de 778 correctifs. Je peux arrondir ça 7 80 D'accord ? Et nous pouvons réellement définir une valeur de 7 80 pixels comme une valeur maximale hors. 7 80 picks est Donc maintenant ce qui va se passer est que si je vais point de pause tablette, il va être 7 80 picks est Le problème est que vous pouvez voir que je suis capable de faire défiler vers la gauche parce que hors de cela donc ce que nous pourrions ce que nous devrions faire est de ne pas le mettre à 70 correctifs . On va mettre une valeur à 100 % et une valeur maximale. 7 80 picks, c'est bon. Donc maintenant, le maximum va être de 7 80 pixels, accord, mais ça va être limité à 100% de l'espace. Et ici, vous pouvez voir que, vous savez, l'espace est un peu trop. Donc, de 70 à Mexico, ramenez ça à quelque chose comme 40 à gauche et 40 à droite. Et aussi, l'espace sur le dessus est aussi assez trop quelque part. Les radios jusqu'à un peu plus petites. Dis quelque chose comme 150. Ça a l'air plutôt bien. Et la prochaine chose ici est que nous avons ajouté ce rembourrage intérieur sur 40 Il, Je dirais juste faire zéro, parce que ça devrait aller bien. Et ça a aussi l'air assez bien. Ça n'a pas l'air si mal. Et maintenant c'est le plus petit coïncide avec l'échelle de celui-ci, vous regardez encore mieux. Donc oui, je pense que ce qu'on peut faire est à la place de rayonner complètement. Peut-être qu'on pourrait lui donner une petite valeur de 16 choix est sur DA. Ouais, je pense que ça devrait être vraiment bon, non ? Ça a l'air plutôt bien. Passons maintenant au paysage mobile dans le paysage mobile. Je vais opter pour une approche complètement différente. Tout d'abord, cet espacement que nous avons en haut en bas va être différent, et c'est en fait 64 pixels. Donc, c'est la marge ou au départ que nous allons utiliser tout à travers un dit le haut à 64 le bas aussi à 64. Et comme vous pouvez le voir sur les côtés, nous l'avons fixé à 20. Donc je vais mettre ça à 20 et le vent. Et la prochaine chose ici est que cette taille étrangère doit également être réduite à 32 pixels. Donc je vais choisir ça. Ça va devenir de 55 radios. Ceci à 32 choix est tout droit. Ça a l'air plutôt bien. Et maintenant, pour cette grille, je ne veux pas que ce soit l'un à côté de l'autre. Je veux qu'ils soient l'un en dessous de l'autre, donc je vais aller enlever les colonnes, d'accord ? Et cela crée automatiquement des grilles automatiques pour nous. D' accord, donc ça ressemble à ça, et ensuite on va venir ici et cet espacement, on va augmenter ça à 40. Nous pouvons voir que l'espacement ou entendre ce 40. Donc, le Ro Ro Gap va être de 40 pixels, et cela semble beaucoup mieux. Allons à la vue portrait mobile, et réglons ça sur 3 60 D'accord ? Et je pense que ça a l'air bien. J' aime ça. Oui, c'est intéressant. Vérifions ça. Et pourtant, ça a l'air assez bien. Et je pense qu'une autre chose que nous pouvons faire est que nous avons ajouté ce genre de rembourrage sur la gauche 16 mélanges. Je suis en quelque sorte déjà cette 20 parce que je voulais prendre le contrôle de tout l'espace. Bon, donc je pense que ça a l'air bien, et on est là aussi. Ce qu'on peut faire c'est, euh ouais, on pourrait faire en sorte que zéro se fasse photographier ici, et je pense que ça a l'air très bien. D' accord. Um, ouais, je pense que ça a l'air vraiment intéressant. Donc c'est à peu près tout pour cette vidéo basée. Et je vous verrai dans la prochaine. 15. Créer la section moyenne: dans cette vidéo. On va aller de l'avant et créer cette section, et ça va être très simple et direct et ah, un couple off spat omis qui ont défini. Et ce sont des décisions conçues que j'ai prises. Mais je dis que je veux que la hauteur soit de 600 pixels. Je veux que le avec off chaque élément prenne 50% vous savez, très simple. Alors allons lire, couler et faire ça. Ça va commencer par cliquer sur le corps et créer une nouvelle section et appeler cette section et nous avons une section ici, et ce qu'on va appeler cette section médiane. Et comme je l'ai dit, je veux que la hauteur de ceci soit de 600 pixels, donc je vais lui donner une hauteur de 600 corrections. Bon, donc on a une grande taille. Ensuite, je veux juste effacer les rappeurs sur une presse contrôlée manger et ajouter un cerceaux et évidemment le prochain épisode à un rapide quelqu'un de contrôle e et 1/2 bloc et ajouté, La classe de rappeur que nous avons créé, donc maximum de 1920 hauteur est 100% Et avec ces 100 personnes. Fantastique. D' accord. Maintenant, nous voulons aussi ajouter un grand ici. D' accord ? Maintenant, la chose est, si vous y allez maintenant, si vous vous souvenez, nous avons ajouté un appel de classe virgule est génial. Et ce que nous pouvons faire, c'est appliquer la même chose, accord. Et même le nombre de colonnes, les règles et tout ce que nous voulons est à peu près le même. Donc c'est parfait, est-ce pas ? Donc on va faire maintenant, c'est que je vais ajouter une impasse. D' accord ? Un pour celui-là. Et l'autre sera pour celle-là, qui sera là pour les images. Donc, pour le 1er 1 le premier du bloc, je vais lui donner une classe un peu plus tard parce que je veux orteil appliquer une propriété flex à cela. Mais d'abord on va faire, je vais ajouter une couleur de fond. Donc je vais aller de l'avant et ajouter une couleur, qui est cette couleur que nous avons la couleur du discours avec une copie. C' est bon, sur mon visage que sur toi ? Fantastique. Ensuite, nous allons ajouter trois éléments. 12 et trois le 1er 1 sera notre H 2, ce qui est le même en termes de hiérarchie. Est-ce que ça pendant un repas contrôlé par la presse, on va ajouter dans le cap. On va changer ça à l'âge de deux ans, accord ? Et puis nous allons ajouter dans la rubrique que nous classons chaque créateur, qui est en tête de 55 photos. Bon, maintenant, le problème est que parce que ça a été utilisé ici, je veux dire, ici, où c'était sur un fond noir et les textures correctes, même chose se passe ici parce qu'ils ont la même classe. Donc ce qu'on peut faire, c'est qu'on peut ajouter une classe combo, et on peut juste appeler ça noir, accord ? Et la seule chose à faire est que nous pouvons changer la couleur de ceci, et nous choisirons la couleur de niveau 1 que nous créons. Et maintenant, les deux ont les mêmes propriétés. Mais cela a une classe de virgule supplémentaire de noir , c'est pourquoi il est en noir. Alors allez-y et copiez cette philosophie et ces valeurs Allez-y et basez cela. D' accord. La prochaine chose, c'est que nous avons ce texte, ce paragraphe, donc je vais aller de l'avant et en fait copier le même parce que c'est à peu près la même chose. Copiera cela. Et coller ici avec un problème ici est que c'est une couleur différente. C' est une couleur gris foncé. Et encore une fois, ce que nous voudrions faire, c'est la vendre et ajouter une nouvelle classe de combat. Appelez ça sombre, génial, ou ça et nous copierons le squelette que nous avons. Copier. Et on va venir ici pour la couleur et une pâte. Bon, maintenant on peut aussi ajouter cette montre. Je pense que je l'ai déjà ajouté, donc nous pouvons l'ajouter. Donc on a ça ici, et ça reste blanc. Fantastique. Je vais copier ce texte sur la base. Cette perspicacité. Maintenant, le fait est, nous avons cet espacement, qui est sur 24 picks est maintenant. Soit nous pouvons ajouter une marge inférieure à cela, soit nous pouvons ajouter un rembourrage supérieur ou une marge supérieure à cela. Ce que je veux faire, c'est que je veux l'ajouter à la rubrique elle-même. Donc je vais aller ajouter une nouvelle classe de combat. Nous pouvons ajouter 1/3 classe de virgule et nous pouvons appeler ce vidage 24 Fixer. Ok, désolé. Bordure de 24 pixels. Et en bas, je vais ajouter une nouvelle valeur sur 24. Donc maintenant ce nouveau de 24 s'applique à seulement 24 pixel bas. Dicle un noir est seulement pour ce retour. En plus et tout le reste est à la tête de 55 correctifs, non ? Super. Maintenant, je vais aller de l'avant et j'ai choisi ça et ensuite on va ajouter un discours. Nous allons ajouter des taches à l'intérieur parce que, comme vous pouvez le voir, c'est 1 20 pixels du haut et 72 photos de la gauche et de la droite, alors allons-y et faisons-le. Je vais aller de l'avant et dans la marge dans le rembourrage pour cela a bloqué. Je vais aller de l'avant et dire 1 20 en haut, 1 20 en bas, 72 pixels à gauche, et donc vous êtes des pixels à droite. Droit ? J' étais assez bien. Maintenant, nous avons cet élément, est-ce pas ? Et ça va être un élément très cool parce qu'on va ça va être un très bel élément animateur. Donc ce qu'on va faire, c'est qu'on va aller de l'avant et créer un lien texte, OK ? Donc, nous appuyons sur le contrôle et créons un texte à lier parce que nous voulons que ce soit un animateur sur ce sujet et parce que nous voulons que ce soit un lien que vous pouvez, sur lequel on peut cliquer donc fondamentalement ne peut pas entrer. Et ça va ajouter ce petit lien texte, OK, et je vais appeler ce lien animé en bas. Ok, Maintenant, allons de l'avant et ajoutons les paramètres. On a 16 choix, c'est, euh tu sais, et la couleur noire et tu sais, l'esthétique régulière. Donc je vais aller sélectionner ce lien texte. Je veux définir la taille de la police à 60. Je vais mettre la hauteur à quelque chose d'intéressant, mais laissez-moi expliquer ce que je vais faire d'elle. Je vais mettre la hauteur à quelque chose d'intéressant, Nous voulons que la couleur soit ce niveau une couleur noire, qui est un peu comme un bon Et puisque c'est un lien où pour automatique ajoute ce soulignement. Mais nous pouvons supprimer cela en venant ici dans les paramètres de décoration sur. On peut régler ça à zéro. D' accord. Ça a l'air plutôt bien. Très bien. Et la prochaine chose est que nous voulons ajouter ce genre de sous-couche. Donc ce que je vais faire, c'est qu'ils veulent mettre la hauteur à un grand nombre. Bon, alors disons quelque chose comme, tu sais, 40, non ? Et aussi, je vais venir ici ou ici en haut et dans les options d'affichage. Je vais choisir celui qui dit dans le bloc de ligne, droit, droit, la valeur de bloc. Et peut-être que je pourrais aller de l'avant et dire ça à quelque chose comme 50. D' accord. Et puis je peux venir à la section des bardos et m'assurer que vous vérifiez d'abord la bordure inférieure. D' accord ? Et puis vous ajoutez une valeur de couleur sur celle que nous voulons. D' accord. Et il ordre sont automatiquement ensembles de celui-ci à un. Donc c'est à peu près ce que nous avons maintenant, peut-être 50, c'est trop, donc je peux probablement réduire ça à 40. Je pense que 40 est un nombre assez décent, accord. Et on peut aller de l'avant et appeler ça. Qu' est-ce que tu veux ? On peut appeler ça ah, plus sur vous. Et la meilleure partie est que la ligne change en fonction de la hauteur de la selon le avec hors du texte. Maintenant, la prochaine chose est que ce n'est pas noir en fait. C' est un gris foncé. Donc, je veux changer rapidement la couleur de ce niveau au niveau un pour ancrer, raisin. Très bien, c'est fantastique. Maintenant, ce bouton est en fait vers le bas. moment, En cemoment, le moyen idéal est de sélectionner cet élément et, vous savez, déplacer. 133 pixels ci-dessous en bas. La marge sur ça vient ici. Mais tu veux faire quelque chose de différent, d'accord ? Maintenant, la raison est, parce que si je vais de l'avant et que ça change probablement en deux lignes, je veux toujours que ça soit en bas ici. D' accord ? Je veux que ça touche le bord inférieur. Maintenant, quand je dis à propos de l'image, je dis, après que nous avons ajouté cette marge de 1 20 pixels. Comme vous pouvez le voir, nous avons ajouté une marge de 1 20 pixels en bas. Je voulais m'en tenir à ce fond. Bon, alors comment on fait ça ? Assez simple. Ce qu'on va faire, c'est d'aller de l'avant et de créer cette impasse, et je veux ajouter une propriété flex. D' accord. Maintenant, évidemment, nous ne voulons pas que les choses soient horizontales. Nous voulons qu'ils soient verticaux. Quelqu' un choisit la direction à être verticale. Aujourd'hui, la prochaine chose est que nous voulons que tout soit aligné vers la gauche. Similaire. Choisissez une ligne à gauche. Le suivant est que je veux choisir cette bobine comme espace entre. Ok, maintenant, ce qui va se passer, c'est que ça va aller dans l'espace, ces trois éléments également. Mais ce n'est pas ce que je veux. Je veux que ces deux-là soient ensemble, et je voulais que ce soit un moyen. Donc, ce qu'on va faire, c'est choisir ce bloc de jour, et d'abord lui donner un cours et on peut appeler ce bloc de gauche du milieu gauche. D' accord. Et à l'intérieur, quelqu'un est dans le bloc New Dev, non ? Et cette impasse va contenir cette rubrique et cette sous-rubrique. Très bien, en fait, réparons dans le navigateur, d' accord ? Et nous voulons que le haut du bloc soit sur le dessus et que celui-ci soit sur le bas. Donc maintenant, si vous voyez ce qui se passe est ce bloc intermédiaire, qui est que le parent est espacement. Le premier développé vers le haut du conteneur sur l'animé vers le bas du conteneur. On a mis ces deux-là. Nous mettons ces deux éléments dans un développé parce que nous voulons que cela affecte ces deux éléments comme un séparé ces deux éléments parce que nous voulons que ces deux éléments soient effectués comme, ah, un seul bloc. Et nous voulons que ce soit comme un bloc séparé. Bon, donc c'est comme ça qu'on l'a fait. Et pour cela, le bloc. Je peux juste appeler ce rappeur normal parce qu'il ajoute simplement comme un conteneur ou un trappeur normal . Et nous ne définissons aucune valeur à cela, est-ce pas ? Ça va être comme ça. Et c'est à peu près comme ça que tu fais ça. Maintenant, la prochaine est celle où nous allons ajouter l'image de l'annonce dans le bloc D, accord ? Et que le bloc va s'asseoir ici et que je vais appeler cette image médiane, d' accord ? Et on va faire va aller de l'avant et sélectionner une image de fond. Ok, alors on va couvrir et ensuite choisir l'image et on va faire, c'est qu'on va ajouter l' image, ce qui est bon ? Et bien dit la position au centre et qui a l'air assez bon. Super. Alors maintenant, comment ça ressemble quand on va aux correctifs 1920 ? D' accord. Ça, j'aurais l'air plutôt bien. Voyons à quoi ça ressemble quand il va à 38. 40. D' accord, ça a aussi l'air très bien. C' est le genre de look qu'on va chercher, non ? C' est le genre de look qu'on va chercher, Et ça a l'air assez bien, à mon avis. Super. Donc maintenant, c'est fait. On va aller de l'avant et animer ce fond pour qu'il ait l'air super génial. Je vous vois dans la prochaine vidéo. 16. Créer un bouton de lien animé: D' accord, les gars. Donc, dans ce cas, moi ou ce qu'on va faire, ça va se passer, coéquipez ce bouton pour le rendre super amusant et intéressant. Alors voyons comment faire ça. Maintenant, ça va être une simple interaction à nouveau. Donc on va tout coller. On va tenir les orteils dans cette section, et on n'ira pas encore à la patte. Donc ce que je vais faire, c'est évidemment qu'on veut que ça soit déclenché, et je passe la souris dessus, accord. Alors je vais y aller, et dans le menu déroulant, je vais choisir le vol stationnaire. Et maintenant, nous sommes en état stationnaire. Donc, tous les changements que nous faisons affectent seulement l'état creux. Ok, donc ce que nous voulons faire pour commencer par ajouter une couleur d'arrière-plan et celui sur un choisir Est-ce une sorte d'alerte publique que nous avons ? Ok, maintenant, vous pouvez choisir ça à n'importe quelle couleur, mais je vais mettre ça en violet pour l'instant, parce qu'on utilise le violet pour tous nos autres boutons. Et c'est notre couleur primaire. Et la prochaine chose à faire,c'est que je vais changer la couleur du texte pour qu'ilsoit blanc c'est que je vais changer la couleur du texte pour qu'il . Et ah, je veux faire est de lui donner un peu d'espacement à gauche ou à droite. Je vais venir ici au batteur, et je vais dire une séparation de 24 pixels à gauche et 24 pixels à droite. D' accord, et ensuite on peut vraiment revenir dans notre état nul. Droit ? Assurez-vous de revenir dans l'état non et voyons à quoi cela ressemble. Très bien, donc ça peut paraître bien, mais ça n'a vraiment pas l'air sympa. Je veux dire, l'interaction fonctionne, mais ça n'a pas l'air sympa. Alors comment on va ? Ce que nous allons faire, c'est évidemment que nous allons venir ici à la section de transition, et nous avons ajouté trois propriétés. L' un était la couleur du texte. L' un était la couleur de fond, et l'autre était le rembourrage de chaque côté. Donc, nous allons appliquer des propriétés à chacun pour recommencer les transitions, et le 1er 1 sera la couleur d'arrière-plan. Et je vais faire 3 15 millisecondes, et que nous allons choisir c'est notre cour. D' accord. Et sélectionnons un autre. Allons-y. Et choisissez la couleur de la police cette fois 3 50 millisecondes et assouplissement va être facile sur la cour. Allons un autre mot. Et cette fois, ce sera le rembourrage de batteur, et nous allons choisir 3 50 millisecondes à nouveau. Et l'assouplissement va être plus facile tribunal. Droit ? Donc maintenant, nous avons pris toutes les trois propriétés et également ajouté les mêmes animations d'assouplissement, donc il devrait être assez bon. Très bien, voilà. D' accord. Et ça a l'air super mignon. Maintenant, je pense que le rembourrage peut être trop. Alors, qu'est-ce que je peux faire ? Trop comme si je pouvais faire ça. Revenons à l'état de vol stationnaire et peut-être le réduire de 24 à 16 et vous en savez 16 pour qu' il ait l'air bien. Et maintenant, allons-y. Reviens à l'état de nonne. Bon, vérifions ici à droite, c'est qui a l'air assez bien. Bon, donc c'est à peu près tout sur la façon dont tu as effacé ce beau bouton. C' est très amusant et interactif de jouer avec. Donc, dans la semaine prochaine, on va aller de l'avant et faire en sorte que ça soit réactif. Je vous vois dans la prochaine vidéo. 17. Rendre la section moyenne réactive: Bon, donc dans cette vidéo, va aller de l'avant et rendre ça réactif. Donc, si vous pouviez regarder la conception du point de rupture mobile, quoi il ressemble est assez simple comme ça, Et il aurait défini est que j'ai défini, Ah, hauteur de 450 picks est donc c'est la hauteur que nous allons pour. Et nous voulons que tout cela soit pour de jolies photos, et nous voulons que ce soit aussi 4 50 pixels. Bon, donc c'est la valeur que nous concevons et que nous pouvons réellement aller de l'avant et obtenir rapidement cela. Et, vous savez, mettez ça ici aussi pour que nous ayons le contexte, accord. Et je vais dire que la hauteur est de 50 Xers chacun. D' accord, allez-y et que nous pouvons gouverner cette section. Alors, nous allons dans une arme et allons au point de rupture de la tablette. Maintenant, le point de rupture des talibans est que c'est bon, je dirais , euh, pas beaucoup de problème ici regarde. D' accord. D' accord. Maintenant, nous avons un problème où, vous savez, parce que même si nous disions 50 %, nous avons trop d'espacement à gauche et à droite, et c'est la raison pour laquelle cela diminue. Donc, ce que nous pouvons faire, c'est pour eux, car le bloc gauche est inter d'avoir un rembourrage de 70. Nous pouvons probablement réduire cela à 40 sur la gauche et un drôle sur la droite. Et maintenant ça devrait le faire. Vous devriez nous donner beaucoup plus de place pour respirer, et vous devriez le faire paraître beaucoup mieux. Et peut-être même sur le battement sur le sujet est probablement que jusqu'à, genre, genre, 80 et euh, 80. Je pense que c'est un numéro qui fonctionne très bien, mais on va aller par paysage. Donc, dans le paysage du moment, nous voulons en quelque sorte le changer. Et ça a déjà changé, d'accord. C' est tellement bizarre que cela ait déjà changé à cause du fait que nous avions utilisé ce même grand élément, juste, juste, parce que si vous regardez ici, vous savez, nous avons ajouté le rappeur et il a ajouté la grille et que Grid Orderly est dans ce format , et il semble déjà assez génial. Maintenant, nous voulons évidemment définir la hauteur de ces deux pour 50 pixels. Donc j'ai dit les deux hauts pour 50 photos et ça a l'air assez bon. D' accord ? Comme si j'allais au paysage mobile une urgence, ça a l'air bien. Mais ici, on ne saura pas. Genre. Assurez-vous que c'est également pour 50. Mais avant de faire ça, je vais aller de l'avant et m'assurer que le départ à gauche et à droite est 20. D' accord. Et au sommet il y a, hum, il est environ 64 ans. C' est sur 46 choix. Est-ce que je pense que ça doit être 48 de toute façon. Donc, quand je mets le rembourrage supérieur à 48 le rembourrage inférieur à 48 tout droit. Et vous sur la hauteur d'être 450 pixels étaient la hauteur et a dit que faire 450 picks est et qui semble assez bon pour 50. Oui, ça a l'air bien. Et passons au portrait mobile. Et ça a l'air fantastique aussi. L' air a l'air génial. Donc, si tu dis que ça fait 3 60 Um, d' accord, accord, est à ça que ça va ressembler. Et je pense que ça a l'air super, non ? Et vous savez, les mêmes interactions fonctionnent ici aussi. Donc rien à craindre Donc la semaine prochaine, on va aller à la section suivante du site et on va apprendre quelque chose de nouveau. Donc, comme vous dans la prochaine vidéo, 18. Créer la section des compétences: D' accord, les gars. Donc, dans cette vidéo, on va aller de l'avant et créer cette section. On va apprendre un nouveau concept en ce qui concerne la grille. Ça va assez simple. Maintenant, comment on construit ça ? Très simple. Nous commençons par une section comme d'habitude, puis nous commençons par un rappeur et un initié. Mais nous avons une grille et nous allons avoir une à trois colonnes et avoir fait un et deux, d' accord, accord, si vous regardez que cette section, qui est la chemise de l'école, l'ensemble des compétences et la description est en quelque sorte de prendre cette colonne entière. Mais ces deux-là prennent, vous savez, sont quatre par quatre colonnes. Alors, comment organisons-nous ça à Buffalo ? Ça va assez intéressant. Sautons lentement dans le web. Donc, je vais commencer par définir ça sur 14 40 pixels. Donc, nous voulons commencer par ça. Nous allons créer sélectionner le corps et c'est une nouvelle section. Alors sélectionnons dans votre section et nous allons aller de l'avant et nous allons appeler cette section des compétences, et nous allons aller de l'avant et ajouter du rembourrage en haut et en bas. Donc sur le dessus. On a, genre, 1 20 pixels. Même ici en bas 1 20 photos et 72 à gauche et à droite. Donc, avec le Sénat avec le sélecteur de section, je vais aller de l'avant et dire, en battant 1 20 pixels du haut sur 20 pixels en bas et 70 pixels de porte gauche et 72 pixels à droite. D' accord. J' ai l'air de faire un Ito contrôlé par la presse. Ajoutez un bloc de diff. Et c'est là qu'on va ajouter un rappeur. Alors je vais aller de l'avant et choisir Rapper. Ok, donc nos paramètres de rappeur par défaut sont leurs 100 % avec 1920 pixels, max avec et une hauteur de 100 %. Des trucs assez simples. D' accord, ensuite on va faire, c'est que tu crées un super Maintenant, on a déjà une classe de virgules appelée Grid. Maintenant, c'est bon, mais le problème est, ce génial n'est que deux colonnes, mais nous voulons une grille à trois colonnes, donc je vais créer une nouvelle classe et appeler cette grille à trois colonnes. D' accord. Je vais juste dire « bien ». Trois C o l doux. Vous savez, trois colonnes, je dirais peut-être souligné. Faites en sorte que ça paraisse mieux. Ok, donc c'est mon nouveau cours. Et maintenant je vais transformer cette enveloppe en grille en cliquant sur ce bouton. D' accord ? Et maintenant on va avoir trois colonnes et je vais devoir me lever, c'est ce qu'on a. Très bien, super. Donc maintenant, nous ne pouvons presque rien voir parce qu'il n'y a pas de contenu, mais nous allons commencer à ajouter du contenu un par un. Maintenant, l'autre chose que je veux faire est de m'assurer que la marge est de 24 pixels parce que c'est une sorte d' alignement. Faire les 24 choix de marge que nous avons sur notre grand Quelqu'un a dit cela à 24 nous pouvons mettre le bas aussi au fond est en fait donc l'écart de ligne est en fait 40 il. Donc nous pouvons définir l'écart de la rangée inférieure à 48 pixels, et ça devrait être assez bon dès le début, un sourd normal, un contrôle de pression e et créé le bloc, et ça va prendre, vous savoir, la première section. Et nous pourrions simplement appeler ce rappeur normal nominatif, je dirais, parce qu'il n'a pas de propriétés assignées. Ce qu'on va faire, c'est aller de l'avant et appuyer sur le contrôle, manger et ajouter vont bien. Et ce sera le même titre que cet ensemble de compétences. Donc je vais choisir ça. C' était pour être une histoire, et on va dire Désolé, chacun ne fait pas trois. Et je vais dire que la rubrique 55 picks va bien, et on va appeler cette secte des compétences. Ensuite, nous allons ajouter ce paragraphe, qui est 18 choix, c'est que quelqu'un sélectionne le rappeur normal parce que nous voulons que les informations textuelles sur un contrôle de presse mangent, et nous allons choisir une photo, ok ? Et nous allons aller de l'avant et choisir les choix du paragraphe 18 est celui que nous avons, Créateur. D' accord, ça a l'air bien. Je vais copier ça et je vais vendre comme ça et bête. Maintenant, la couleur de ceci est différente. C' est en fait un accord léger. Donc je vais aller ajouter une classe de virgule gris clair. Nous avons un doctorat, virgule proche. Nous n'avons pas de complexe gris clair. Quelqu' un crée une nouvelle virgule plus et appelle cette lumière. Super. Donc, nous pouvons ajouter seulement cette couleur gris clair. Donc je vais aller de l'avant, copier la valeur et venir ici et on va aller de l'avant et changer. Oh, vraiment ? Avoir le gris clair. Alors je le suis. Il suffit de remplacer ça. Maintenant, nous avons une marge du fond, qui est 24 image. Donc ce que je peux faire, c'est pour le titre. Je peux ajouter une nouvelle classe de combat sont pour le paragraphe. Je peux ajouter un nouveau venu Close. Alors je pense que je vais aller avec le cap. D' accord ? Et je vais dire 24 pixels. Um, marge inférieure. Tu vas rester ? 24 choix de frontière. D' accord. Et tout ce que vous avez à faire est d'ajouter ce 24 pixel en bas. Donc, cela affecte seulement cet élément particulier. Parce que c'est le seul élément qui a cette classe change rapidement pour être X grand , pourriez-vous ? La prochaine chose va créer ce bloc, donc impressionner le contrôle, Mange. On va ajouter un bloc, et on appellera ça un rappeur normal. D' accord. Et là, on va ajouter une icône, tu vas ajouter un sous-texte. N' importe qui à un paragraphe, c'est ça. Donc on va aller au panneau des actifs, et on a nos icônes, donc je vais commencer par les 100 premiers jours. L' icône du design du produit, je vais suivre ça et déposer ça à l'intérieur. D' accord ? Maintenant, si vous regardez la largeur et la hauteur, ils sont à peu près les mêmes. C' est 70 do pixels par 72. Et je les ai exportés en tant que SPG à ce format lui-même, donc ça devrait être totalement bien. Oh, la prochaine chose est, on va appeler ça, hum, hum, icône de compétence, accord ? Et nous allons ajouter une marge inférieure de 24 pixels, donc c'est comme l'icône et va dire 24 pixels. D' accord. Et maintenant, nous allons ajouter notre élément, qui est le contrôle de chaque trois petites pressions E. Et à un titre, il y a trois points. D' accord. Et ça va être ce que nous avons, c'est 24 choix, je pense que c'est un nouveau. Donc nous allons choisir h 3 et dirons cap ou nous avons seulement ah, cap 24 pixels. Donc c'est bien. D' accord. Et nous allons aller de l'avant et copier ça et affaiblir Faster et ah, ici, les distances. 12. Mais ici, nous avons déjà la marge inférieure de 16 et je pense que c'est OK. Nous n'avons pas à le changer à 12, vous pouvez le garder tel qu'il est. Donc je vais copier ça, et on va créer un nouveau paragraphe 16. Droit ? Donc, créez un nouveau texte. Oh, on peut appeler un paragraphe lui-même, d' accord. Et je vais accélérer cette information, et ça va être des correctifs du paragraphe 16, et il y aura un accord de lumière. Donc je vais ajouter un nouveau cours de combat, et je vais appeler cette lumière. Super. Juste pour la couleur. Je veux changer la couleur pour être légèrement. D' accord, on. Ça a l'air plutôt bien. moment, nous avons aussi cette marge intérieure de 48 pixels. Nous pouvons le faire aussi maintenant. Mais le problème est que si je fais ça au rappeur normal, il va tout ajouter. Donc ce que je vais faire, c'est que je vais aller de l'avant et supprimer ce cours, et je vais créer une nouvelle classe, et je vais juste appeler ça des compétences. Ah, boîte. D' accord. Et faites ça. Je vais ajouter un battement intérieur sur 40 it Great. Maintenant ce que je fais, je vais copier ça et le coller et on peut aller de l'avant et changer les informations. Conception visuelle de conception visuelle, et vous pouvez copier toutes ces informations et cas ici et aussi va changer l'icône de sorte que vous pouvez effectivement cliquer sur l'icône elle-même et cliquez sur l'icône d'engrenage et choisissez remplacer l'image. Et vous pouvez cliquer dessus pour remplacer l'image, d' accord. Et super. Donc maintenant ce qu'on peut faire, c'est s'il duplique la seconde, ça va aller dans cette boîte, accord ? Et on ne peut pas déplacer ça dans une autre boîte, non ? Et c'est parce que vous pouvez voir ici que la position est une sorte de jeu, orteil ou orteil, et nous pouvons mettre en place le manuel. Mais ce qu'on va faire, c'est supprimer ça. Ce que nous faisons, c'est qu'il faut choisir ce rappeur normal que nous avons, accord ? Et je vais vraiment mettre à l'échelle ça pour qu'il ramasse deux boîtes. Bon, donc maintenant si vous regardez certaines valeurs ici, la portée de la colonne est une, ce qui signifie qu'elle couvre une colonne, mais elle prend deux de la rose. Bon, donc si je clique sur cette icône, vous pouvez le voir maintenant. Tu ne peux toujours pas le voir. Ce qu'on va faire est d'aller sélectionner ça, de le copier et de le coller. Bon, maintenant ça se trouve dans la troisième boîte. Mais ici, vous pouvez voir que ce rappeur normal prend en fait tout ce bloc. C' est donc une flexibilité très cool que le flux de travail vous donne. D' accord. Je vais copier ça et le baser à nouveau ici. Et tout ce que nous avons à faire, c'est d'aller de l'avant et de changer le texte ici. Très bien, copiez ça. Et collez et copiez ce Pieced. Copiez cela et basé. Droit ? Et aussi, évidemment, évidemment, nous voulons aller de l'avant et changer l'icône. Donc on va aller de l'avant et changer ça pour être un design de mouvement. On va changer celle-là pour être de la photographie, et d'accord, celle-ci n'a pas été changée. Pour une raison quelconque, quelqu'un va copier cela, bête Copie et basé. Et ça, on va aller de l'avant et changer ça pour être celui-là. Droit ? Donc maintenant, c'est comme ça que ça ressemble, et ça a l'air assez bon. Maintenant, nous avons également une séparation interne de 48 pixels. Ce que je veux faire, c'est l'évaporation normale. Donc ce que nous pouvons faire maintenant, puisque nous allons l'utiliser plusieurs fois, je vais ajouter une classe combo de 48 pixels. Ok, hum, fête, ça répare, non ? Et puis on va ajouter un rembourrage normal de 48 pixels pour qu'on puisse faire la même chose ici. Donc, plutôt que d'utiliser la classe de boîte de compétences, nous pouvons en fait ajouter le même qui est notre rappeur normal et aussi à la classe Kama sur 48 pixels. Droit. Et on pourrait faire la même chose. Nous sommes ici afin que nous puissions appeler ce rappeur normal et 48 pixels combo classe pour déplacer cela à droite appeler ce rappeur normal et 48 pixels classe commune vers la droite. Même chose. Ici, nous appelons ce rappeur normal et à une séparation de 48 pixels à diriger. Bon, donc ça a l'air plutôt bien. Um, ouais, c'est à peu près tout. Dans la prochaine vidéo, on va aller de l'avant et faire en sorte que ça soit réactif pour d'autres points de rupture. Alors je vous vois dans la prochaine vidéo 19. Rendre la section des compétences réactives: D' accord, les gars. Donc, dans cette vidéo, nous allons aller de l'avant et rendre cette partie du côté web, la section réactive. Alors commençons. Donc sûrement super simple. C' est hors de la vue de la tablette. Et dans la tablette, tout a l'air bien. Et nous voulons juste nous assurer que nous utilisons les mêmes paramètres. Donc nous avons 80 pixels sur le dessus. Hum, et ah, accord, donc on a 1 51 20 Je pense que je vais aller de l'avant et ramener ça à 80 aussi, juste pour être sûr que tout est cohérent et que faire la même chose que nous sommes ici. On va faire les 80 et 80 en bas et à gauche on va mettre ça à 40 et sur le côté droit, aussi à 40. D' accord, ça a l'air plutôt bien. Maintenant, une chose que nous pouvons faire est de pouvoir jouer un peu avec la disposition. Et ce que je veux vraiment faire, c'est changer un peu. Ce que je veux, c'est que je veux que la section supérieure prenne en charge. Vous savez, toute cette section pour l'ensemble des compétences et ce paragraphe et ensuite nous en voulons un aussi, et nous voulons le faire. Donc, en gros, j'essaie de dire que si j'y vais, je n'aurai que deux colonnes, accord ? Et on aura trois rangées, non ? Donc 12 et trois et que je veux faire est que je veux sélectionner ce rappeur normal, qui couvre maintenant deux lignes. Je voulais passer deux colonnes, mais enjamber un dro. Bon, alors, couteau, regarde-le. Nous avons en quelque sorte cet ensemble une belle mise en page et l'écart de rouleau est de 48 pixels, ce qui est totalement bien et a un peu hors du style que nous allons pour. Et je pense que ça a l'air plutôt bien après. Allons au paysage et aux choses ici. C' est un peu bizarre, mais on va essayer de le réparer. Le premier, c'est que je veux tout faire en une rangée. Je ne veux pas de colonnes, donc je vais commencer par réduire le rembourrage supérieur et inférieur à 40 en raison d'être 64 parce que c'est le nombre que nous utilisons. Donc 64 en haut et la ville en bas et 20 à gauche et 20 à droite, à droite en allant sélectionner le rappeur normal et nous allons faire ça va être une colonne chacun, d'accord. Et on veut aller à la grille et on veut s'assurer qu'on n'a qu'une seule colonne. Donc maintenant tout ressemble à ça en ce moment, les problèmes. Nous pouvons voir que quelque chose ne va pas. Nous voyons que quelque chose se chevauche. Donc, si vous voulez vérifier, quel est le problème ? Ce que nous pouvons faire, c'est commencer par cacher ces sections. Donc, si je sélectionne la section médiane et que je la cache pour l'instant, nous pouvons réellement voir que tout fonctionne assez bien. Tout a l'air super. Mais tout a l'air super. Donc quelque chose ne va pas avec la section médiane. Et s'il commence en regardant ces parties une par une, on peut voir que la section médiane a en fait une hauteur de 600 pixels. Mais ce n'est pas le cas ici. 600 pixels waas pour le point de rupture de la tablette. Nous sommes donc là pour la section, nous allons supprimer cette hauteur en la définissant sur auto. D' accord. Et quand on fait ça maintenant, ça se répare, non ? Parce que nous étions en train de définir 600 picks est hors de la section, Toby ça. Mais ce contenu était en fait plus de 600 pixels. C' est donc un petit changement que nous avons dû faire. D' accord. Et ça a l'air un bon début à l'aimer. On peut aller au point de rupture loin du mobile sur la seule chose que je veux faire, c'est que je veux changer. Euh, vous savez, cette section ici, qui est cette extra, vous savez, dans ce fort 48 semaines de combats que je ne veux pas prêt. C' est à zéro ? D' accord. Et maintenant tout a l'air assez bien. Revenons ici et vérifions. Et ah, ça a l'air bien. Bon, donc c'est à peu près tout pour cette vidéo. Et dans la prochaine vidéo, nous allons aller de l'avant et concevoir ce chat est en haut de cette barre horizontale des logos, et nous allons aussi ajouter une interaction et une animation supercool à cela. Alors je vous vois dans la prochaine vidéo 20. Créer la carousal de logo: Nos gars. Donc, dans cette vidéo, nous allons aller de l'avant et créer cette section sur le site, qui est cette barre de logo et de trouver quelques valeurs ici. J' ai donc défini que la hauteur de cela va être de 140 pixels, et l'esprit va en fait être 24 VW. Maintenant. J' aurais pu utiliser, vous savez, le avec et dire que Toby 3 40 Mais la raison pour laquelle j'ai commencé orteil 24 VW, vous savez, ce qui dépend du travail du port de vue est parce que l'interaction que nous allons créer fait pas vraiment travailler. Eh bien, si on ajoute des valeurs de pixel, accord. Et vous ne pouvez pas expliquer pourquoi quand je vais de l'avant et sur l'interaction. Mais pour l'instant, dans cette vidéo, allons de l'avant et nous construire dans le flux web. Donc je suis à Ruffalo, et je vais commencer par créer de nouvelles sections sur Sélectionner le corps et impressionner Contrôle Eat et je vais ajouter une section. D' accord. Et maintenant qu'on a une section, je vais appeler cette section la section de la barre de logo. D' accord. Maintenant, dans ce cas, je ne vais pas utiliser de rappeur parce qu'il y en a. Nous ne voulons pas que rien soit limité au poids hors du port de vue. Ce que nous voulons faire, c'est simplement s'assurer qu'il touche les bords. Donc je vais juste aller de l'avant et commencer par créer un élément de grille parce que nous voulons que tout ça soit super et je vais avoir six colonnes. Donc parce qu'on a six habitants, alors quand je clique dessus et je vais choisir six, hum, hum, six colonnes et me demander. Bon, on y va. Et je vais appeler ça la lecture d'un rêve. Bien. Je vais appeler ce logo. Super. D' accord. Et on va commencer. Une autre chose que je veux faire est que je veux réduire la colonne. Gap a dit ça à zéro parce qu'on veut qu'ils se touchent. Je vais commencer par créer ma première année. D' accord, je vais ajouter un bloc A d, et, et, euh, à l'intérieur, je vais appeler cette boîte locale. D' accord ? Vous pouvez l'appeler comme vous voulez et seulement commencé en lui donnant une hauteur de 140 pixels. C' est la valeur que nous pouvons avoir définie. Et le avec va être 24 v W, qui est 24 vue Port Worth. D' accord, monsieur, dit 24 b W. qui est vue ennuyé avec elle. D' accord, ça a l'air plutôt bien. Maintenant, je vais prendre le logo de notre panneau d'actifs. Quelqu' un a été attrapé le premier plus bas. Je vais mettre ça dans le bloc de logo, ok ? Et on pourrait juste appeler ce logo client. D' accord ? Maintenant, afin de le faire au centre, nous pouvons sélectionner l'élément parent, qui est la boîte locale, et ah, là. On va aller de l'avant et choisir l'affichage pour être flexible, et ensuite je vais dire un centre de ligne et justifier le milieu, sorte que le logo entre dans le centre exact. , Ce que je vais faire,c'est que je ne suis pas une copie et c'est tout ça, et on peut aller de l'avant et choisir le logo du client. Ou une chose que nous voulions faire, c'est que je vais sélectionner la boîte locale et vous pouvez voir que nous avons ce genre de frontière, non ? Quelqu' un va descendre et ici, dans la section frontière, je vais juste changer la couleur pour être celle qu'on veut, qui est le niveau 1 qui est la couleur et le médecin. L' Amérique. Nous nous assurons que la largeur est un sur le style est, vous savez, avec la ligne pleine. D' accord. Une copie nominale ceci et base et un Sélectionnez le logo. Et ici, je peux cliquer sur cette icône d'engrenage où je peux aller de l'avant et remplacer une image, et je vais choisir le 2e 1 Copier ceci à nouveau. Très bien, sélectionnez le logo et changez-le pour celui-ci. Copier coller. Sélectionnez celui-ci. Changez le logo en un autre, puis copiez en fonction. D' accord. Et maintenant, vous pouvez voir que nous sommes en mesure de faire défiler et, vous savez, en dehors de la zone réelle de notre Uber. Et c'est une mauvaise expérience. Mais on va arranger ça. Je vais sélectionner cette image choisir remplacer, et nous allons choisir celui-ci et un dernier logo. Copier coller. Il doit sélectionner cette image de lieu sur celui-ci. Ok, donc si vous ne pouvez pas regarder que notre site Web tousse défiler horizontalement, ce qui n'est jamais une bonne expérience, vous ne devriez jamais faire ça alors ce que nous allons faire c'est quand nous ajouterons une nouvelle propriété, non, Donc on va faire, c'est que je vais sélectionner la section du bar local, pas vrai ? La section inférieure de la barre prend tout le mouillé hors de l'orifice de vue. D' accord, donc ça prend. S' il a dit ça à 14 40, c'est en fait prendre. 14. 40 choix, c'est en ce moment. Il y a un débordement de couleurs de propriété, et en ce moment le dépassement est défini sur visible, ce qui signifie visible montre le contenu qui déborde son conteneur. Ok, donc maintenant l'élément enfant, qui est ce logo génial, est assez déborde la section de barre locale parce qu'ils le secteur de débordement visible. Mais si vous allez de l'avant et définissez ces deux frappeurs, ce qui signifie masquer le contenu débordant sans ajouter de barre de défilement, il va cliquer dessus. Et maintenant, si vous essayez de faire défiler horizontalement, vous ne pouvez pas le faire parce que tout ce qui est débordé, c'est caché et il est nécessaire et coupé directement au vétérinaire hors de l'écran. Donc, si je vais de l'avant et dit ceci à 1920, vous pouvez voir qu'il est coupé, et le il prend la taille, et chaque élément prend la taille du port de vue. Il calcule le travail en fonction de la taille du port de vue. Donc nous avons dit 24 VW. Donc, c'est fondamentalement 1920 en 24%. Très bien, crédit pour la personne du port de vue avec tout droit. Et pourtant, à peu près sur la façon dont vous construisez cela en référence et dans la prochaine vidéo, nous allons aller de l'avant et à l'interaction pour le rendre très amusant et divertissant. Donc je vous vois dans la prochaine vidéo. 21. Animer la carousal de logo: D' accord, les gars. Donc dans cette vidéo, on va aller de l'avant et animer ce beau bar et ça va être super amusant. Et c'est très agréable quand vous interagissez avec elle. Donc, ils sont super excités. Alors commençons maintenant. La chose à noter que c'est une interaction complexe dont il a besoin. Ce n'est pas aussi simple que vous le savez, aller ici et faire l'un de ces parce que ceux-ci n'aident vraiment pas. Nous devons utiliser l'onglet Interactions. Ok, Maintenant, vous voulez faire, c'est quand vous commencez, vous devez identifier le déclencheur avec lequel vous voulez avoir l'animation. Quand je dis trigger, je veux dire, quel genre d'action va commencer ou commencer l'animation ? Et si vous voyez ici, nous avons deux types. Nous avons un déclencheur d'élément. Et sur cette page, déclencher maintenant dans le déclencheur de l'élément, nous avons quelques options telles que la plupart stop, presque cliquez, La plupart survolent. La plupart se déplacent sur l'élément Moskal interview tout en faisant défiler en vue, vous savez, ainsi de suite et ainsi de suite. Et nous avons aussi des choses comme les déclencheurs de page et page Lord page déplacer Vieux Port payé défilement et pages sauvages défilant maintenant en fonction du type d'animation ou d'interaction que vous voulez créer. Vous devez choisir le déclencheur approprié. Dans notre cas, nous allons choisir celui qui dit, plupart se déplacent dans le port de vue. Si vous regardez les informations que vous savez qu'il dit animer pendant que la souris se déplace sur le port de vue le long de l'accès X et blanc, alors va arriver est commence. Cliquez dessus et nous allons commencer par créer une nouvelle animation. Ok, donc je vais cliquer sur Démarrer Une nouvelle animation choisira jouer l'animation de la souris. D' accord. Et maintenant, j'avais déjà créé une fois que je vais le croire. Donc on va en créer un à partir de zéro, ok ? Et nous allons commencer par créer le plastique en cliquant sur la seconde plus, et je vais dire animation de la barre de logo. Ok, donc maintenant fondamentalement, nous avons quatre propriétés que nous pouvons définir. L' axe X a deux propriétés. Celui vers la gauche et le désir est sur la droite et pourquoi l'accès est un en haut et un en bas. Dans notre cas, nous voulons juste faire bouger l'animation le long de l'axe X. Nous ne nous soucions pas vraiment de l'axe Y dans cette animation particulière. Donc ce que je vais faire, c'est que je vais cliquer sur plus droit, et je vais choisir la propriété que je veux ? Deux ennemis que je veux animer le mouvement, l'échelle, la rotation, la capacité, le filtre. Qu' est-ce que je veux, Animal ? Dans ce cas, je veux animer la propriété move. Alors cliquez sur déplacer. D' accord. Et maintenant, nous voyons que nous avons cherché ces deux cadres clés. L' autre chose note est que nous avons ce point d'exclamation en ce moment qui ne reçoit pas le exclamation est parce que nous n'avons pas encore défini de valeurs à cela. Combien devrait-il bouger ? Droit. C' est ce qu'on veut. Mais avant de le faire, la première chose que vous voulez faire est de vous assurer que vous déplacez le bon élément. Dans ce cas, nous ne voulons pas déplacer la zone d'élément. Nous voulons déplacer cette grille de logo à droite. Toute cette grille, nous voulons qu'on bouge, vous savez, de l'extérieur et de l'intérieur de l'écran. Donc ce que je vais faire, c'est que dans ce cas, nous avons choisi la boîte locale. En fait, c'est faux. Donc ce qu'on peut faire, c'est faire un clic droit, et on peut dire changer de cible et je viens. Je vais aller au navigateur et je vais choisir la grille du logo. Ok, donc maintenant vous pouvez voir que le grand local est maintenant l'élément qui va être déplacé quand j' ajouterai des valeurs fera la même chose ici, non ? Cliquez sur Changer, tigre et grille de logo. Donc parfois, si ça ne marche pas, ce qu'on peut faire c'est qu'on peut fermer ça, et on peut le sélectionner ici, quelqu'un clique dessus , et ensuite ça va s'appliquer à ça, droit ? Il y a donc deux façons de le faire. Et ici, commençons à définir les valeurs Maintenant, à un point zéro quand elles quand la souris est sur la gauche de l'écran, nous aurions pu vouloir regarder exactement comme il le sait. Donc je vais aller et définir une valeur sur le X pour être zéro. D' accord ? Parce que nous voulions être ce que nous ne voulons pas de mouvement. Où avez-vous déménagé ? Quand on bouge les 100 quand tu viendras sur le côté, on voulait changer, donc je ne sais pas si je vais aller de l'avant et me mettre. Déplacez ce curseur. Bon, donc maintenant vous pouvez voir que tout le logo génial est en mouvement. Mais combien on le déplace ? Droit ? Parce que si je fixe une valeur de pixel, que va-t-il se passer ? Cet inspecteur vaut la peine ? Il ne va bouger que 500 pixels, et ce n'est peut-être pas correct. Ok, laisse-moi te donner un exemple. Alors allons de l'avant et continuons à augmenter. Alors disons ça à moins 800. Ok, donc maintenant c'est sur le bon bord de l'écran, non ? Donc s'il va à 14 40 choix, c'est bon et tu regardes, accord, et jouons celui-ci. Vous le considérez à gauche. On dirait bien, mais sous l'écriture, il n'est pas, vous savez, parce que nous avons cet espace supplémentaire parce que le tout se déplace 500 choisir 800 pixels, indépendamment de l'écran mouillé. Alors, comment pouvons-nous nous assurer qu'il s'aligne correctement, vous savez, à l'ouest de l'écran. Donc voici un truc cool. Ce que je veux faire, c'est plutôt que de voir 800 photos. Je vais définir un pourcentage. Alice, je vais dire, faisons moins 30%. Ok, c'est l'élection qui a défilé. Je vais nous augmenter un peu jusqu'à ce que la glace s'aligne parfaitement. Et je pense qu'à 44% ça a l'air assez bien. Ok, Maintenant, l'autre chose que nous devons faire est que vous pouvez voir que le point d'exclamation est toujours là, même si nous définissons des valeurs. Et la raison de taper est que l'un est en termes de pourcentage sur l'autre est en termes de pixels. Donc celui-là, je vais le mettre en pourcentage. Ok, super. Alors maintenant, jetons un coup d'oeil. Très bien, alors nous allons en quelque sorte le retrait 40. La plus petite taille d'écran et tout droit. Il a l'air plutôt bien, non ? Ça a l'air super. Vous pouvez voir ça. C' est le respect des valeurs de pourcentage. Bon, passons ça à 14. 40. D' accord ? Oui. On dirait la même chose. On dirait qu'il a l'air. Ça a l'air très bien. Essayons en 1920. D' accord. Et pourtant, cela semble aussi assez bon, et cela fonctionne très bien. Impressionnant. Donc c'est à peu près tout. Maintenant, si vous voulez, vous pouvez aller de l'avant et changer ça pour 38 44 2 graines Ana, Focus. Résolution sur DA. Ouais, ça va avoir l'air plutôt bien. C' est si vrai. Um, ouais, ça a l'air super. Impressionnant. Droit. Donc, revenons à 1914 40 comme si C'est beaucoup sur la façon dont vous allez de l'avant et créer cette belle interaction pour ce bar local Et pour ce local, mais c'est super simple. Si vous ne l'avez pas compris, je vous suggère de regarder la vidéo à nouveau lentement, un par un. Et ah, ça va marcher pour vous les gars. Donc c'est à peu près tout pour cette vidéo, et je vous verrai dans la prochaine vidéo. 22. Rendre la carrosserie de logo réactive: D' accord, les gars. Donc, dans cette vidéo, nous allons aller de l'avant et faire en sorte que cette section de barre de logo réponde aux risques pour d'autres points de rupture . Maintenant que nous allons y penser, c'est que si vous le regardez réellement, l'interaction que nous avons créée dans la vidéo précédente se produisait, vous savez, parce que nous utilisions une souris et un curseur, non ? Et c'est pour ça que je travaillais. Mais sur une tablette et sur un paysage et un portrait mobile, point de rupture, ce genre d'interaction ne serait pas possible. Nous aurions donc malheureusement à supprimer cette interaction pour les autres points de rupture. Mais vous pouvez toujours l'avoir sur le bureau parce que c'est super amusant d'avoir, n' est-ce pas ? Alors allons-y et faisons-le. Ce que je vais faire, c'est ici dans les paramètres d'animation. Est-ce que cela déclenche des options juste là ? Je peux choisir. Ne décider déclencheur sur l'arrêt ci-dessus tablette pour paysage Important. Je vais décocher les trois autres parce qu'il voulait seulement pour le bureau et au-dessus, non ? C' est ce qu'on veut. Maintenant, si je vais à la partie de pause tablette, ce qu'on va faire, c'est aller de l'avant et changer ça et on va le rendre semblable à ce qu' on a ici. Bon, alors allons-y. Donc on va prendre le logo. Super. Et ici dans le bas, fondamentalement. Mais nous voulons est aux colonnes. D' accord, je vais supprimer toutes les colonnes supplémentaires, alors assurez-vous que je suis sûr qu'on a juste des colonnes, accord. Et, euh, vous savez, on peut juste aller de l'avant et on peut aussi ajouter Ah, donc l'écart peut être nul sur même la rose. Nous pouvons dire cela à zéro et conduire. Maintenant, la raison est de ne pas prendre tout l'espace, c'est à cause du fait que nous avions mis un, euh si elle était hors 24 nous w Ce que je vais faire, c'est que je vais aller de l'avant et juste dit ça pour ou faire tout droit, donc ça prend le entier avec ce qu'il est donné. Donc c'est à peu près à quoi ça va ressembler, et c'est à peu près le style que nous allons pour l'instant. Si vous regardez le point de rupture du paysage, il devrait à peu près ressembler à la même chose. Et je pense que ça a l'air jolie fille et pour la pause tablette et pour le point de pause mobile, ça va ressembler à ça. Et je pense que c'est aussi plutôt bon, non ? Ils y vont, donc c'est à peu près tout. Mais si vous revenez à nos morts Tropic Point, nous pouvons toujours avoir l'effet d'animation qui se passe sur. Ça a l'air fantastique. Donc c'est à peu près tout pour cette vidéo. Et dans la prochaine vidéo, nous allons aller de l'avant et créer la prochaine section hors sont bouleversés, donc nous vous verrons dans la prochaine vidéo. 23. Créer la section des projets: D' accord, les gars. Donc, dans cette guerre vidéo, Granado va créer cette section. Maintenant, ça a l'air un peu compliqué à construire, et vous pouvez voir que cet officier garde une sorte de fil d'ici pour expliquer comment c'est. Mais c'est assez simple, pour être honnête. Alors, nous allons comprendre comment cela fonctionne. La première chose, c'est que vous voulez commencer évidemment, en créant une section qui est notre étape habituelle. On a commencé par une section, et à l'intérieur de cette section, je vais créer un rappeur, accord ? Et ce tour, ça va être ma grille, accord, parce que je vais devoir prendre la colonne. Et comme vous pouvez le voir, j'ai créé un bloc Dad, qui est cette couleur jaune le bloc pour l'intérieur gauche veut, et ce sera pour l'intérieur droit. Donc nous avons deux colonnes dans la première colonne, je vais ajouter Wonder Block pour ce texte, non ? Et pour cette image et le sous-texte, je vais créer un autre développement et mettre l'image ici et les éléments de texte. Ou ici. Droit. Donc, en gros, on a 1232 blocs sur le côté gauche, et on a 123 sur le côté droit, et celui-ci sera pour notre bouton. Et ça va être pour notre texte, et vous avez une image texte, image, texte, image, texte et image et texte. Je pense que ce serait peut-être beaucoup plus facile si je vais de l'avant et que je change la couleur de ceci à une autre couleur là-bas. Vas-y. Je pense que cela a beaucoup plus de sens. Donc c'est comme ça qu'on va aller de l'avant et structurer. Alors commençons. Je suis donc ici à Buffalo. Je vais aller de l'avant et fermer ça, et nous allons sélectionner le corps et nous commencerons par créer une toute nouvelle section de contrôle de la presse et taper la section. Et il y aura une nouvelle section où on appellera ça notre section projets. Bon, maintenant, ça va commencer, évidemment, évidemment, en créant un empilement sur la gauche et à droite sur 72 photos et 72 corrections, accord ? Et leur nucléaire un bloc div, qui va être notre rappeur, va créer une impasse, et nous appellerons ce rappeur droit voleur a les mêmes propriétés que d'habitude avec le avec off 100 hauteur off 100 Maxwell off 1926 est en ce moment. Nous voulons créer une grille. Nous voulons transformer cette intégration rapide et taper dans. Super. Maintenant, nous avons déjà deux types de grande cette année. à C' est un painàdeux colonnes, mais je pense que c'est peut-être différent quand on le rend réactif. Donc, de préférence ce que je vais faire, c'est que je vais enlever ça super, et je vais dire des projets. Super. Je vais créer une nouvelle classe, et je vais juste en faire un tout nouvel élément de grille pour qu'on ne fasse aucune erreur. Et je vais aller de l'avant et cliquer sur super, et on va aller de l'avant et on va avoir seulement deux colonnes et se demander. Ok, je ne décroche pas maintenant. Nous ne pouvons toujours rien voir parce que nous avons défini des valeurs et à tout, son genre, vous savez, vous savez, s'effondre ensemble. Mais c'est bon. Nous allons commencer par créer notre premier élément de texte, qui est développé. Donc je vais créer un premier développé, et on pourrait juste appeler ce bloc normal. Très bien, parce que nous n'avons pas de propriétés qui s'y rattachent. C' est juste pour servir de conteneur pour tous les autres articles que nous avons ici, non ? Rappeur si normal. Ok, maintenant, à l'intérieur de ça, je vais créer un nouveau bloc, ok ? Et ça va aussi être normal, trappeur. D' accord ? Et il y aura pour l'argent de la prochaine zone d'arrêt et on va faire, c'est qu'on va aller avant et ah, chercher cette section qu'on a créée, non ? Donc on va copier ce texte. Copie ça et basé ici, et on va copier ça et basé ça ici. Bon, donc maintenant ça va ressembler à ça, et tout ce que je vais faire, c'est aller de l'avant et double-cliquer, copier et coller ça. D' accord. Plutôt bien. Maintenant, en ce qui concerne le grand, l'autre chose que nous voulons faire est de dire l'écart de colonne à 24. Désolé. Pas à 40 24 chien africain. Laisse-le comme ça. Maintenant, on va aller de l'avant et dire ça à 14. 40 pixels. Eso maintenant que nous pouvons réellement voir à quoi il ressemble dans le design, et il ressemble à peu près à ceci. Je suis allé de l'avant et donné une certaine distance sur 48 pixels de la gauche. Maintenant, c'est un 72. Mais ce 72 est après avoir considéré le 24 pixel battant ici. Donc 70 à 70 à moins. Le stagiaire quatre est 48. Donc je vais ajouter Non, nous avons déjà une classe plus calme, mais nous avons 48 pixels à droite. Je vais appliquer ça. Donc maintenant, ça a l'air parfait. Et aussi, vous pouvez voir que, vous savez, nous avons une certaine distance sur le dessus, ce qui est autour de 1 20 choix est et ici nous n'avons pas de distance. Donc je vais sélectionner la section projets de section, vous savez, l'élément le plus patient. Et pour la section, je vais dire sous toutes les corrections sur le haut et 1 20 pixels sur le bas. Donc nous donnons ça, nous obtenons ce bel espacement. Parfait. Maintenant, pour le rappeur normal, il suffit de trouver. Et on va avoir un rembourrage inférieur de 80 pixels ? A propos de la marge de 80 choix est donc nous allons faire est que je vais créer un nouveau calme à travers, d' accord, accord, parce que nous ne le faisons pas, parce que nous ajoutons plusieurs nouvelles propriétés que la même classe existante, donc nous créons un nouveau un. Appeler s 80 choisit un fond et je dirai soulignement M pour les marges. Et je viendrai ici et je vais mettre ça au fond, ok ? Et vous pouvez réellement renommer cela de 48 pixels, droit à 48 Picks est bon rythme pour tapoter. Très bien, donc c'est beaucoup plus compréhensible. Très bien, et super. Ce qu'on peut faire, c'est créer un autre bloc, ce qui va être notre travail. Bloquer un contrôle réprimé. Mangez en ajoutant un bloc. D' accord. Et juste pour s'assurer que c'est le bloc est l'enfant de ce rappeur normal Donc celui-ci est pour tout le bloc gauche. C' est pour le texte, et c'est pour, vous savez, la zone de travail. Droit ? Super. Donc ce qu'on fait, c'est que je vais aller de l'avant et nous appeler de nouveau normalement, rappeur. D' accord ? Parce que nous n'avons aucune propriété que nous allons attribuer à ça. Ok, maintenant je vais apporter l'image un peu aller de l'avant et commencer par entrer dans notre élément image , donc je vais aller de l'avant et prendre une image. Maintenant, jusqu'à maintenant quoi ? Nous avons vu que nous avons utilisé une image d'arrière-plan pour créer un bloc Duke, et nous avons ajouté une image. Fais ça. Maintenant, c'est certainement une façon de le faire. Mais il y a plusieurs façons de le faire. Cela va jamais utiliser un élément image. Donc, une presse contrôlée E et la recherche d'image. Vous pouvez voir que l'image est un élément réel. Donc c'est ce que je vais faire, c'est que je vais aller de l'avant et ajouter l'image pour qu'elle s' appelle comme Project One va faire glisser ça et laisser tomber cette idée. Très bien, plutôt bien. Maintenant, je vais activer cette option A dit h I I P I. Et ce que ça va faire, c'est que ça va empêcher les picks. L' exaltation sur une écriture sont déplacés. Donc, si vous avez un fichier, ce que nous avons défini ici, c'est que nous sommes partis mais moi, une certaine hauteur de 626 va bien, je vais aller de l'avant et m'assurer que ça parle parfaitement. Mais plus tard, Mais maintenant, la hauteur est réglée à 620 pixels. Alors quoi ? Il allait vendre cette image, et je vais appeler ce projet une image de projet, et je vais aller à la hauteur. 610 corrections 620. Ok, si vous voyez, le problème est que c'est un peu pixellisé, non ? C' est une sorte d'étirement, et ça a l'air bizarre. Donc le vrai correctif qui est que nous avons une option d'ici. Appelez-nous en forme. ce moment. C' est super utile. Ce que nous pouvons faire est juste. Cliquez dessus. J' ai cinq options, Phil, j'ai de la contenir. J' ai une couverture sur laquelle j'ai fini. On a réduit l'échelle. Je vais aller de l'avant et choisir la couverture. Ce que la couverture va faire, c'est qu'elle va aller aux pieds. Allez-y et couvrez tout l'espace du conteneur en anarchiste. C' est la hauteur de 6 20 photos, accord. Et le travail qui est défini sur la base de notre wrapper. Donc, quel que soit l'espace qu'il a, il va le couvrir. Donc ça va augmenter, mais ça va le rendre magnifique. D' accord ? Il va le recadrer, s' assurer que les proportions sont les mêmes. Mais c'est comme ça que ça va marcher. Super. Maintenant, c'est fait. Donc, la prochaine chose que vous faites est que vous voulez créer un autre bloc pour celui-ci OK, alors allons de l'avant et créons un nouveau bloc. Donc, je vais appuyer sur pays e pour dire qu'ils ont bloqué. D' accord ? Pour ça, je ne vais pas lui donner un cours normal. Nous allons lui donner une classe différente parce que nous avons des gens qui ajoutent et nous allons actualiser les interactions sur les animations à cet eso Allons en fait de l'avant. Et avec ça pour bloquer, hum, je vais lui donner un cours, et je vais appeler cette description de projet. D' accord ? Description du projet. Et allons de l'avant et commençons par ajouter un peu de rembourrage à gauche et à droite. On a donc 40 pixels sur le dessus. On en a 32 à gauche et à droite, donc je vais commencer par ajouter 32 pixels à gauche. 32 choix est sur la droite. 40 choix sont en haut, et 40 choix sont sur la droite. Ok, donc c'est ce que nous avons maintenant. La prochaine chose est, les femmes ont ajouté une image d'arrière-plan pour la couleur d'arrière-plan. Donc je vais sélectionner le Sculler, et je vais choisir le niveau 1. Donc nous avons cette couleur. La prochaine chose va ajouter ça, qui va être notre élément H 3. Donc je vais appuyer sur le contrôle. E. Je suis désolé d'être parti en ce moment. Nous voulons utiliser la rubrique parce que c'est notre titre hors du titre du site Web du projet. Et cela pourrait être important à des fins de référencement. Alors allez-y et dit ceci à chacun des trois et ici. Je vais choisir la rubrique 24. Droit. Ça a l'air super. Quelqu' un copie ça sur ta tête et fais face à ça. D' accord. Maintenant, voyons la distance entre ces deux-là, nous avons environ 18 choix, c'est que je pense qu'ils devraient avoir 16 ans. D' accord, donc tu t'es vraiment changé à 2h16 d'accord ? Et ah, ce moment nous avons 16 choix, est en bas, ce qui est parfait. Et fantastiques sur une presse contrôlée manger. D' accord. Et je vais ajouter un paragraphe, et ce paragraphe sera notre description, donc il y aura des paragraphes de 18 pixels. Je vais copier ça et le baser. Donc, par ici. Mais nous pouvons faire est d'appliquer le paragraphe 18 correctifs Cela semble bon. Et la police est aussi la couleur du téléphone est la lumière. Super. Alors ajoutons cela aussi. Donc, nous avons déjà la classe combo existante que nous avons utilisée pour appliquer sur cela. C' est ça. Et ça a l'air plutôt bien en ce moment. Tout ce que nous avons à faire est d'aller de l'avant et de sélectionner ce trappeur normal ou huit, qui contient l'image. Donc, fondamentalement, je sélectionne celui qui contient l'image et la description du projet. Je vais sélectionner ça, accord ? Et je vais ajouter un peu de rembourrage en bas, qui est d'environ 24 pixels. Donc je vais ajouter un rembourrage de fond sur 24 maintenant, parce que c'est le rappeur normal. Nous ne pouvons pas vouloir être prudents avec cela parce que nous avons déjà trop de classes combo. Donc je vais ajouter un nouveau combat plus et appeler ce fixateur 24, le bloquer M pour marge. Donc, nous avons une nouvelle classe combo pour cela, et je veux dire 24 pixels du bas. Bon, maintenant je vais aller de l'avant et choisir le rappeur normal. Je vais faire une copie du contrôle pressant, voir Contrave, et ça va le faire tomber. Maintenant, la seule chose qu'on doit faire sélectionner cette image. Nous pouvons cliquer sur l'icône d'engrenage. On peut choisir. Remplacer l'image et nous pouvons choisir notre projet numéro deux, qui est par ici. D' accord, d'accord. Et nous pourrions rapidement aller de l'avant et changer les détails. Copiez ça et fragmenté. Maintenant, je ne suis pas allé de l'avant et je me suis changé. Je sais que je n'ai pas changé les textes de ces, mais quand je quand vous aurez le nouveau fichier, vous aurez les nouvelles descriptions afin que vous puissiez vous référer cela dans ma version. Je ne sais pas, c'est la même chose, donc je n'ai rien changé. D' accord, ça a l'air plutôt bien. Droit ? Ok, donc le prochain ne sera pas Oh, ici nous avons ce rembourrage supplémentaire de 24 maintenant, nous ne le voulons pas pour ce bloc. D' accord ? Nous le voulions seulement pour ça. Donc je vais venir choisir le rappeur normal pour cette section, accord ? Et je vais y aller et y croire, non ? Parce que nous ne le voulons pas pour cet élément. On voulait juste cet élément, non ? On voulait juste ça pour ça. On n'a pas besoin de ce fond. Je vais supprimer cette classe de combat A Z peut voir qu'il y a juste un rappeur normal, non ? Donc je vais sélectionner ça l'ensemble pas normal rapide, qui agit comme un qui est celui qui est sur la gauche. Je vais copier ça, et je vais le goûter pour qu'il arrive sur la droite. Ok, maintenant, très simple. Ce que je vais faire, c'est que je vais sélectionner le rappeur normal stop et le supprimer pour que cette étoile au début et que je veux la vendre. Je suis la même image Remplacer, et je vais descendre et choisir le projet numéro trois, OK ? Et je ne vais pas changer Thetacticsroom. Copiez ceci et allez-y et énervé ceci et ah, nous grandissons, sélectionnons, copions et rythmé. Je vais changer l'image de ceci aussi pour que vous puissiez obtenir l'icône, choisir, remplacer l'image et nous allons choisir le projet numéro quatre, qui est par ici. Alors regardons vite ça. Comment cela ressemble sur mobile sur d'autres points de rupture. Donc, c'est à ça que ça ressemble sur 1920 picks est et je pense que ça a l'air assez bon. Ça n'a pas vraiment l'air si mal. J' aime bien ça. Super. Revenons à un 14 40. Génial. Maintenant, nous en avons un autre, qui est la vue. Tous les projets beurre. Donc on va faire, c'est que je vais aller de l'avant et créer un nouveau bloc, ok ? Et je vais appeler ce rappeur bouton. Ok, donc on a un bouton, trappeur. Ce que je vais faire, c'est dans cette bouteille. Lâchez-le. Je vais dire, pourquoi ne pas prendre 100% de la hauteur, Ok, Ok, que vous que vous qui est gauche. Bon, maintenant ça prend 100 %. Mais le problème, c'est qu'il prend 100% de toute la page, qui n'est pas ce que nous voulons. Alors plutôt que de dire 100% je vais aller de l'avant et calculer le manuel que je vais appuyer sont sur mon clavier pour saisir, euh, la porte de la colère du docteur, et je vais vite aller de l'avant et juste essayer de trouver la hauteur. Donc on est sorti sur 244 picks est la hauteur, donc je vais dire ce rappeur bouton. Je voulais faire 244 pieds x pour les photos, et on a quelque chose. On dirait ça. Peut-être que tu veux réduire un peu ça. D' accord, donc ça a l'air parfait. Euh oui. D' accord. Je pense que ça a l'air bien. Maintenant, évidemment, ce sera parfait pixel quand vous aurez le design. Mais pour l'instant, je dois m'assurer que c'est parfait pixel. J' ai fait quelques erreurs, euh, quand je le conçois. Bref, c'est notre rappeur de boutons. Maintenant, dans ça, je vais ajouter ce bouton pour qu'il soit au centre, hors de l'écran, au centre, au centre hors de cette boîte, peu importe le tableau. Donc situé dans le nouveau composant sur un nouvel élément colliers boutons sur un pays de presse et tapez dans le bouton. Vous avez donc trois types d'armes dans la normale, mais un bouton radio sur le fond de la ferme choisira la normale. Mais dans ce cas, d'accord. Et je vais appeler ce CD, non ? Ce sera notre nom au fond, qui va être appelé à l'action. D' accord. Et ce que je vais faire, c'est que je vais sélectionner le trappeur inférieur. Et puisque nous voulons que l'élément enfant soit au centre, je suis comme le parent, et je vais fléchir le parent, et je vais dire notre centre de ligne et justifier le milieu. Alors maintenant, c'est au centre de cette zone. Ok, allons-y et vérifions les propriétés. Donc le 1er 1 est que Regardons le devant. C' est le bouton 18 pixels et son bateau. D' accord, donc je vais mettre augmenter la taille du bac. 18 photos ont commencé à bouillir. Ah, la couleur de la police va être blanche, noire sur blanc, et nous ne voulons pas d'arrière-plan. Donc je vais enlever ça et dire que 20 la capacité ou l'Alfa sera nulle. Au contraire, on va avoir une valeur, et la couleur sera de niveau 1. Laisse-moi vérifier la couleur. Oh, c'est de la bulle. Donc on va sélectionner ça et changer la couleur de ça pour la couleur violette que nous avons. D' accord. Et maintenant regardons l'espacement. Donc, si nous sélectionnons l'élément de la boîte, nous pouvons voir qu'il a 2032 pixels sur la gauche et la droite et 24 dans le haut et le bas. Donc, nous allons ajouter ce rembourrage ici sur une sélection de la ville et ici au lieu de 15 analystes à l'étude, aussi. Et que vous faites et 24 et 24. Et maintenant, nous pouvons aller vous sauver tous les projets. Donc je vais double-cliquer sur ça et appeler cette vue. Tous les projets, non ? D' accord. Donc maintenant, si vous allez regarder cela dans un autre point de rupture, entrons dans l'entraînement 19. Vous pouvez toujours voir ça, vous savez, c'est un peu au centre, et ça a l'air vraiment sympa. Oh, peut-être vous, allons au 38. 40 à droite ? Les choses ont l'air assez bien, et j'aime vraiment ça. Bon, donc c'est à peu près tout pour cette vidéo. Dans la prochaine vidéo, nous allons aller de l'avant et ajouter des interactions de vol stationnaire aux éléments. Donc, comme vous les gars dans la prochaine vidéo 24. Animer la section des projets: Bon, donc dans cette vidéo, nous allons aller de l'avant et ajouter quelques interactions sympa et amusantes pour faire ces éléments maintenant, il y a à peu près tout ce que vous pouvez faire, mais je vais vous montrer juste quelques-uns d'entre eux pour que vous obteniez un idée off. Qu' est-ce qu'on cherche ? Donc on va commencer avec la ville maintenant. L' animation que nous allons faire ça va être sur le vol stationnaire va aller de l'avant et ne pas en vol stationnaire, ce qui va être un combo proche. Maintenant, voici quelques choses que je veux avant tout. Je veux changer la couleur, ça va faire de la bulle. Le suivant est que je veux aller de l'avant et ajouter un peu d'ombre portée ont été activés sur ce paramètre d' ombres de boîte . Et ici, je vais mettre la direction à 1 80 pour que l'ombre soit vers le bas. Je changerais la couleur. C' est une bulle. D' accord. Les animaux ont dit que la distance était quelque chose comme 50 et peut-être que c'est trop. Peut-être que nous avons considéré à 20 et le sang que nous pouvons dire à 60. Maintenant, ça a l'air assez fort. Donc ce que nous pouvons faire, c'est nous pouvons aller à la couleur et réduire l'opacité pour en dire quelques-uns, comme 50% peut-être encore plus peut-être, genre, 30%. Je pense que c'est un bon nombre. L' autre chose que je veux faire, c'est que je peux vouloir le déplacer un peu quand je l'ai dessus . Donc, ce que nous pouvons faire, c'est ici que nous avons l'effet des propriétés transformées. Locanda. Nous avons quatre propriétés déplacer, compétence, rotation et compétence. Je vais aller de l'avant et choisir White, qui est la position blanche, et je vais lui donner un nombre négatif de dire négatif, Fife. D' accord. Et ça va bouger ça. Cinq correctifs, et c'est à peu près tout. Donc, ce que nous devons faire est de nous assurer que nous appliquons les transitions qui s'assouplit, faire l'ombre de la boîte de couleur et transformer. Revenons à l'État non étatique. Droit ? Et ici, nous allons à la transition va commencer par choisir la transformation. D' accord, quand j'ai dit ça à 3 50 millisecondes, on va dire qu'il est hors cour et ils vont aller de l'avant et choisir la suivante, qui est la couleur de fond, la couleur de fond réglée sur 3 50 et l'assouplissement est vont être Ce sont les tribunaux. Et la prochaine chose sera, hum, hum, l'ombre de la boîte. D' accord, donc je vais mettre ça aussi à 3 50 et l'assouplissement des orteils est notre cour. Donc, si vous allez de l'avant et jetez un oeil à la plupart stationnaire Oh, non. Donc maintenant, si vous allez de l'avant et regardez l'interaction, on peut voir que ça a l'air assez bien, non ? Ça a l'air bien. Oui. Super. Maintenant, je vais aller de l'avant et ajouter quelques interactions. Faites également cette section. Très bien, faites ces sections. Donc on va le faire maintenant. Une chose que j'ai oublié de faire est que je voulais rendre chacun de ces éléments liés bloc parce que le moment, vous pouvez voir que le rappeur normal comme celui-ci est un bloc div, ce qui signifie que je ne peux pas réellement cliquer dessus en ce moment. Ça va être un problème pour moi parce que je veux cliquer sur chacun de ces actifs. Donc ce que je vais faire est un clic mexicain ou droit, et je vais changer, disons, ce convertir en bloc de lien. Bon, donc maintenant ce rappeur normal est maintenant en fait un bloc de liens sur lequel je peux cliquer, droit est la même chose. Nous sommes là, nous allons sélectionner le rappeur normal. Je vais faire un clic droit, et je vais dire convertir en lien Block. D' accord. Sous la même chose ici. Je veux dire rappeur normal. Je vais aimer cliquer et je dois dire, bloc de lien converti sur la même chose ou ici vendre le rappeur. Ok, c' est ça. Cliquez et dites convertir en bloc de lien. Super. Maintenant ce que je veux faire, c'est que je veux changer le nom de ça. Je veux en quelque sorte l'enlever et lui donner une classe différente parce que seuls ces quatre éléments vont avoir une interaction particulière sur. Je vais le faire en fonction de la classe. Donc, chaque classe, chaque élément qui a une classe particulière va orteil ont sur l'animation. Et nous avons utilisé ce rappeur normal de classe dans tellement d'endroits différents, donc je ne veux pas affecter tous ces différents éléments. Quelqu' un enlève ça et je vais créer un nouveau numéro de classe. Appelez ce projet bloc notre rappeur de projet. Je pense que c'est un bon nom. Donc ça va être le rappeur du Projet. D' accord ? Celui-ci va aussi être le crappeur de projet. Ok, ici. Ce qu'on a fait, c'est qu'on a une classe de combat, donc je vais supprimer les deux. Je veux voir Project le laisser tomber et je vais créer une nouvelle classe de combat, et je vais appeler ce 24 fixateur bas souligné m pour marge. Et je vais dire 24 correctifs ou ici donc on a ces 24 choix est et l'autre chose que je veux faire est sélectionné celui-là, le rappeur normal. Faites-le sortir de cet appel ce rappeur de projet et était 24 pixel partie de mars. ce moment, ils veulent faire, c'est que vous pouvez voir que nous avons ce genre de droit sous-jacent. Et si vous regardez le texte réel juste, nous ne le faisons pas. Nous avons le genre de pour la décoration, et si vous cliquez dessus, vous pouvez dire que c'est dire que la valeur est héritée de tous les liens. Maintenant, si je décoche cela, il ne le supprime toujours pas. D' accord ? Parce que ce qui se passe, c'est que ça ne vient pas de ça. Si je sélectionne le lien bloque notre rappeur de projet religieux qui a ce soulignement et qui est transmis par-dessus le piment, qui est le texte. Donc je vais aller voir le parent lui-même, qui est le rappeur du projet, et je vais décocher. Et maintenant que ça va de l'avant et enlever qui sont en ligne tous les autres endroits vont nous ramener à 14. 40 pixels. Je pense qu'une chose que je veux vraiment faire est que je pense que je le ferais déjà était la taille de cela. Je sens que 620 pixels est assez long. Donc, on va de l'avant et on change ça. Fais quelque chose comme 400. Je pense que c'est plus facile pour la glace de scanner et de regarder. Je pense, oui, c'est un meilleur numéro. D' accord. Pourrait donc vous n'avez pas, Allons-y et ajouter l'interaction. Donc, nous allons commencer par sélectionner le rappeur de projet parce que quand je passe la souris sur le rappeur de projet, je veux que des orteils d'interaction se produisent. Je vais aller à l'interaction et je vais cliquer sur l'élément plus grand et je vais choisir le plus stationnaire. Nous devons donc définir ce qui se passe lorsque nous choisissons sur le vol stationnaire. Et ce qui se passe quand il mâche sur survol vol en choisissant ce qui se passe en vol stationnaire. Je vais vraiment commencer une animation claire dans une nouvelle animation, et je vais appeler ce projet hover. Ok, donc une chose que je fais est de mettre à l'échelle ce bloc entier. Ça va être le numéro un. Et l'interaction du cycle est que je veux changer la couleur de ça. C' est le numéro deux. Et le numéro trois, c'est que je veux déplacer cela légèrement vers la droite. D' accord ? Juste pour donner, genre, un bel effet amusant. Bon, alors allons-y et faisons-le. Ça va commencer par choisir la propriété qu'on veut déménager. Nous voulons donc mettre à l'échelle parce que nous voulons mettre à l'échelle le projet. Rappeur. Ok, maintenant, ici, nous avons trois propriétés sélection, classe d' élément ou interaction déclenchée dans ce cas. La classe et le déclencheur d'interaction sont à peu près la même chose, parce que le déclencheur d'interaction est Project Rapper Et la classe est aussi projet Rapper. Parce que nous voulons que cette animation soit appliquée à toutes les trois autres classes également. D' accord. Et nous choisirons le déclencheur d'interaction. D' accord. Et ce que je vais faire, c'est que je vais aller de l'avant et juste augmenter l'échelle de 1.2 Ok, maintenant, l'échelle est évidemment en fait, nous hors d'un. Donc ça ne commence pas par zéro. Ça ne commence pas. Il se fixe sous la forme de pour le port positif. Donc l'un est notre normal, et 1.2 est, vous savez, 2% plus grand que quoi de ça. Donc on va laisser ça tel quel. La prochaine chose que nous faisons est d'aller de l'avant et de choisir la couleur du texte. Et maintenant, nous ne voulons pas changer la couleur du texte du projet de rappeur car il n'y a pas de texte. Nous voulons écrire, comme le changement, comme le changement, cibler n'importe qui pour choisir la rubrique 24. Il s'agit du tableau de bord mobile. Maintenant, on veut aller de l'avant et dire la classe des effets, d'accord ? Et vous voulez aussi dire effet que les enfants avec cette classe. Quoi ? Je veux dire que quand ça devient un déclencheur, accord, on n'a pas besoin de créer une nouvelle animation. Nous pouvons appliquer la même animation à cela, et il va aller de l'avant et animer ce titre parce que c'est un enfant de cet élément particulier qui planait sur. Bon, donc on va dire seulement Chillin avec ce cours, ok ? Et maintenant, nous devons définir la couleur. Donc je vais choisir ce genre sur une couleur cyan que nous avons. Ok, vous pouvez voir ça par ici. Le prochain tueur va aller de l'avant et choisir de bouger. D' accord. Et maintenant, je vais y aller, non ? Cliquez sur, modifiez la cible et choisissez-la pour cela. Et ici, dans le mouvement, je vais juste le déplacer à travers le X de quelques pixels. Donc, disons que juste acheter 10 picks, c'est bon ? Et maintenant ce qui va se passer, c'est que si on joue ça, tu peux voir qu'ils se sont tous produits trois fois différents. D' accord ? Mais nous voulons qu'ils se produisent tous en même temps. Donc ce que je vais faire, c'est sélectionner celui-là que tu aurais pu traîner et le combiner avec celui-là . Sélectionnez celui-ci et combinez-le pour s'attaquer. Maintenant, vous pouvez également voir que vous pouvez ajouter un mortel à chacun des éléments. Et vous avez également une option où vous pouvez commencer par ou commencer après une action précédente. Dans ce cas, nous voulons que cela commence par l'action précédente. Nous voulions également que cela commence par l'action précédente et nous ne voulons pas que cela soit mené en retard. Ok, Donc si je vais de l'avant et dire après l'action précédente, vous pouvez voir que cela pousse en quelque sorte cela dehors parce que cela commence après l' action précédente et pas avec l'action précédente. Donc on veut envoyer ça à l'action précédente, d' accord ? Et vous pouvez sélectionner tous ces trois en maintenant le quart de travail, et ensuite nous pouvons venir à l'assouplissement et vous pouvez dire qu'il est hors cour. Je ne veux pas que les orteils fassent ce point de cèdre quatrième secondes. Maintenant, jetons un coup d'oeil. Donc, quand je survole, vous pouvez voir qu'il se met à l'échelle et que la couleur change. Mais quand un vol stationnaire, rien ne se passe vraiment. Ok, donc nous devons définir ça aussi. Donc, ici, nous avons défini le plané dans. Je vais choisir survolée, et je vais dire que ça commence dans l'animation et nous avons déjà ce projet couvert. Ce que je vais faire, c'est que je vais venir et dupliquer ça, ok ? Parce que je ne veux pas aller de l'avant et créer et commencer à partir de frais. Je suis capable de dupliquer ça. Je vais sélectionner le 2ème 1 donc habiter. Vous vendez le 2ème 1 et sur Hovered dans. Tu as dit d'accord. 1ère 1 Ok, je veux sélectionner ceci. Et on m'a changé de nom juste pour m'assurer qu'on ne soit pas confus. Je veux dire, cependant, sur OK, et maintenant renvoyons les valeurs. Deux de l'original. Donc ça va être un. La couleur du texte sera blanche, et le mouvement sera nul. Ok, donc tu y vas. Donc maintenant, si vous regardez à droite, vous pouvez voir que nous avons cette belle animation d'habitude et, vous savez, cause de ça maintenant, ça ne marche pas pour les autres. Très bien, parce que je ne suis pas vraiment défini. Maintenant. On n'a pas besoin d'aller de l'avant et de le faire pour chacun de ces. Tout ce que nous avons à faire, c'est si vous allez de l'avant et sélectionnez le rappeur de projet parent. Ok, nous pouvons en fait venir ici aux paramètres de déclenchement et dire trigger seulement sur l' élément sélectionné , non ? C' est ce qui se passe. On veut dire déclencher la classe. Et qu'est-ce qu'un rappeur de projet de classe ? Ok, donc maintenant chaque élément qui a la classe appelée Project Rapper va démarrer l' animation. Donc, si je l'ai là-dessus, ça marche dessus. Ça marche la même chose ici, non ? Plutôt cool. Et c'est beaucoup sur la façon dont vous créez cette belle interaction amusante. J' espère que vous apprécierez ça. Et dans la prochaine vidéo ne serait pas aller de l'avant et vraiment prochaine section. Je vous vois dans la prochaine vidéo. 25. Rendre la section des projets: D' accord, les gars. Donc l'industrie, on va aller de l'avant et faire de ça un fonds réactif. Ce serait super rapide, super facile et super. Alors allons-y et faisons-le. Je vais aller au point de rupture de tablette, et les points de pause de tablette semblent un peu entassés. Le père va faire, c'est que je vais aller de l'avant et mettre ça à 80 en haut et à 80 en bas. Pas de changement à 40 à gauche et 40 à droite, non ? Et 40 ans, c' est ce qu'on veut. Maintenant, cela semble bien, mais je pense qu'à mon avis, il serait beaucoup mieux qu'il les mette séparément. Donc ce que je vais faire, c'est que je vais aller de l'avant et que nous ayons le rappeur, non ? Et le rapide n'est pas un grand Je vais aller de l'avant et supprimer deux colonnes pour qu'il devienne une seule colonne et maintenant cela semble beaucoup mieux. Donc vous savez, nous avons une bonne théorie de distinction et de différenciation chose que nous pouvons faire est que si vous allez avant et sélectionnez le trappeur, nous pouvons aller de l'avant et augmenter l'écart de croissance à 48 ou 32. Tout ce que tu penses. Ça a l'air bien. Ok, euh, je ne pense pas qu'on ait fait ça. Oui, 48. Cela ne vaut que pour cela. Mais nous aimerions l'augmenter ici aussi, car en ce moment, dans le Project Rapper, nous avons l'éditeur 24. Nous ne pouvons pas porter ce chiffre à 40. Ça et, euh, ça a l'air plutôt bien. Et je pense que c'est à peu près correct. Et, ah, allons au point de rupture du paysage dans la pause paysage quand nous voulons faire des radios ce 2 42 64 en haut, 64 en bas et 20 à gauche et 20 à droite. Droit ? Andi ? Ouais, ça a l'air plutôt bien. Très bien, donc c'est beaucoup sur la façon de rendre ça réactif. Et comme vous les gars dans la prochaine vidéo 26. Les bases de la résolution des images: moment, dans ce propriétaire même, expliquer un concept simple en ce qui concerne les résolutions d'image. Très bien, maintenant, faites attention à cela, parce que c'est un concept très important à comprendre. Donc, vous n'avez pas d'écran, qui est 1920 par 10 80 pixels sur ce est à peu près ce que vous obtenez sur un ordinateur portable Windows. Et la plupart des écrans ne sont pas rétine. Vous obtenez des moniteurs et des ordinateurs portables Windows, qui ont un écran de rétine. Mais prenons ah, situation où la plupart des ordinateurs portables qui sont là-bas ont non retour sont déplacés ou un écran non rétine. Maintenant, ici, j'ai une image. Et maintenant, la taille de ce cadre est 1920 par Kennedy. Et j'ai une image ici, qui est 1002 100 par 600. En ce moment, c'est ainsi que cette image va ressembler sur cet écran. Ok, maintenant, si je regarde la même image sur un écran de livre Mac ? Bon, donc si je viens ici à gauche, on voit qu'on a un pro de Mac Book. Laisse-moi juste passer sur le côté. D' accord ? L' écran du livre Mac a en fait un côté de 14 40 par 909 100 est la hauteur, mais le nombre d'images sont en fait deux fois droit. C' est parce que ça s'appelle notre écran de rétine, ce qui signifie qu'il doit x la quantité d'images. Maintenant, même si la taille est plus petite, vous savez, même le 14 40 est plus petit que 1920. Le nombre de pixels a est deux fois. Donc, si nous prenons réellement cette image et la regardons là-dessus, cela sera en fait la taille de celle-ci. Ça va être très petit. Il ne va pas être de la même taille de 1200 par 600 parce que ceux-ci ont deux fois le nombre photos off. Cela va en fait être la moitié de la taille, qui est 600 par 300 l'original est 1002 100 par 600. Mais si vous allez de l'avant et qu'on l'agrandit à cette taille, d' accord, on étire les photos, d'accord ? Parce qu'en réalité, il ne peut prendre que ces nombreux choix, c'est parce que c'est combien c'est ça. Le nombre de pixels est en fait double. Donc, si vous comprenez le point, donc si je vais de l'avant et faire un tableau d'art, qui est aussi grand que vous savez, qui est 28 80 par 1800 qui a toutes les photos, alors cette image sera la même taille, qui est de 1200 par 600. D' accord. écrans Retina ont toujours deux fois plus de photos. Et c'est la raison pour laquelle toute image qui se trouve sur un écran Windows sera la moitié de la taille d'un MacBook. Autre affichage de la rétine, non ? Donc, quand vous ajoutez toujours des images, vous voulez vous assurer que votre tour sur H I. D P I pour que le lancer de rep sache que cela est censé être la moitié de la taille sur l'écran de la rétine. Donc, à la fin, la ligne de fond est chaque fois que vous ajoutez une image, assurez-vous que l'image est H I D P I . Et si cela ne fonctionne pas bien ou si cela ne semble pas bon, cela signifie probablement que votre image n'est pas assez grande. Votre image n'est pas, n'a pas une bonne résolution, n' est-ce pas ? Donc H I V p. Je l'ai allumé pour chaque image, donc c'est à peu près tout ce que j'avais à expliquer sur la résolution de l'image. Et je vous vois dans la prochaine vidéo 27. Créer la section Dribbble: D' accord, les gars. Dans cette ville, on va recréer la section dribble. Mais nous avons aussi cette section instagram, et la seule chose que nous devons faire est juste de faire une copie basée sur cela et cela devrait fonctionner. Donc nous pouvons rapidement finir ça et ensuite aller à la section dribble va être, ah, ah, interaction très amusante. Et je vais te montrer comment faire ça parce que ce qu'on allait faire défiler cette image va avoir une très belle interaction amusante en faisant défiler la page. Donc, ici, je suis dans le flux de travail. Et, bien sûr, évidemment, je suis à flot. Et ce que nous faisons, c'est que je vais aller de l'avant et commencer par dupliquer cette section, alors assurez-vous d'abord, ajoutons ceci à 14. 40 d'accord ? Et assurez-vous que nous sélectionnons toute la section médiane. Je vais copier cette section, et je vais venir ici fermer tout et ah, que j'allais de l'avant et juste basé. Et puis je prendrai cette section médiane et je la déplacerai en quelque sorte vers le bas. Donc nous en avons un ici, et nous allons aller de l'avant et juste remplacer le texte et les images. Donc je vais dire, euh d'accord, je vais dire copier ce double clic sur cet Instagram et je veux copier ça et le bête . D' accord. Et là, on va dire Suivez-moi sur Instagram. Donc je vais dire, suivez-moi sur I G ok. Et nous allons changer cette image aussi. Ce quiva se passer, c'estque je vais te montrer ce qui va se passer quand tu changeras d'image, non ? , c'est va se passer, c'estque je vais te montrer ce qui va se passer quand tu changeras d'image, Donc ils viennent ici à la philosophie de la photographie, et je choisis changer d'image sur je vais de l'avant et changer l'image à celle-ci, qui est celle que nous voulons. Vous pouvez voir que cela change ici aussi, parce que techniquement, ils ont tous les deux la même classe. Et l'image d'arrière-plan est une propriété désactivée. Donc plutôt, je vais appuyer sur le contrôle Z pour le réinitialiser. D' accord ? Et ça, je vais aller de l'avant et ajouter une classe combo, et je vais dire cet Instagram d'accord ? Ou vous pouvez aller de l'avant et créer une toute nouvelle classe elle-même. D' accord ? Mais je vais aller de l'avant et le cours d'Atacama, parce que c'est un peu plus facile, accord ? Et maintenant je peux aller de l'avant et changer ça et on peut choisir ça, OK ? Et je vais choisir de renverser, , parce que je ne veux pas voir cette partie. Donc, si nous faisons défiler vers le haut, nous pouvons voir que cela reste tel qu'il est. L' autre chose est que cela a une couleur différente. Donc je vais aller de l'avant et copier ce court de couleurs, copier ça et venir ici et ici. On va ajouter un nouveau cours, et je vais appeler ça Instagram parce qu'on change encore les valeurs. Alors je vais aller de l'avant et accélérer ça. Ok, ils y vont. Ne le fais pas. Maintenant, allons de l'avant et créer les prochains déjeuners sont section dribble. Donc je vais commencer par sélectionner le corps et une presse contrôlée e. Je veux dire section. Ok, donc on a je ne veux pas de photos en haut, et on a environ 30 photos en bas. Ok, donc je vais appeler cette section de dribble, accord, donc il y aura 20 corrections en haut et je me demande des pixels en bas. Très bien, super. Je vais ajouter un rappeur dire un bloc, ce qui va être notre rapide. Ok, donc je veux dire un rappeur, et on sait quoi faire. Maintenant, c'est en fait, si vous regardez cela, cela a en fait un esprit différent. Très bien, c'est un petit conteneur alors que ce n'est pas bien. Maintenant, c'est le régulier, qui s'étend à 1920 72. Mais c'est une section que je veux dire et définir en disant que je veux que cette section soit au centre tout le temps. Je n'ai pas besoin de m'étendre. Je voulais être de cette taille. Alors, quelle est la taille ? En fait, vérifions ça. C' est en fait 1076 six, et je vais aller de l'avant et prendre, vous savez, le Colorado ici, et je vais dire dribble. Je vais voir avec Ok, quelle était la valeur ? C' était 1076 C une graine ou 76 pixels. D' accord. Super. Donc ce que ça veut dire, c'est que je vais aller de l'avant et dupliquer ce rappeur, accord ? D' accord. Je vais aller de l'avant et appeler ce rappeur version 2, ok ? Et ça va être Maxwell sur 1076 Ok. Maintenant, quelle que soit la taille de l'écran, ce sera 1076 Maintenant, c'est une décision de conception que j'ai prise, et j'ai choisi quelqu'un Allez-y et faites ça. Donc maintenant on va avoir ces trois éléments, et je pense qu'on a déjà ça quelque part par ici. Donc je pense que je pourrais aller de l'avant et juste copier toutes ces informations. Commençons par ajouter un bloc, et ça va être pour notre conteneur. Et je vais aller de l'avant et appeler ça normal. Et ici, nous allons commencer par ajouter notre texte sont la rubrique Ah, paragraphe. Et vous savez, le lien de l'animateur en bas a commencé par ajouter le titre que ça va être vont se diriger vers Ok. Et je veux dire que diriger nos 55 choix est correct, et nous allons juste copier ça et appeler ça mon dribble. Le prochain sera ces paragraphes et réprimer la recherche E de contrôle pour un paragraphe. D' accord. Et je vais copier ça et la base ici. Et c'est 18 choix est donc nous pouvons ajouter la classe de paragraphe de 18 pixels. Donc, le paragraphe 18 nous choisit bien. Et l'autre chose que nous voulons faire est que nous voulons avoir un espacement de 24 pixels sur le fond. Donc, vous sélectionnez le titre, et nous allons ajouter cette classe combo que nous avons déjà. Créateur. Donc ça va bouger ça. Nous avons aussi celui-ci, qui est 18 pixels et légèrement. Donc je vais ajouter la lumière. Super classe combo. Ça a l'air bien. Et nous avons aussi, genre, 40 picks est à cheval sur la marge du fond. Donc, allons sélectionner ceci et nous allons ajouter une nouvelle classe cette fois et nous appelons cette marge inférieure de 40 fixateurs . D' accord, je vais bien, et on va dire ça à 40. Super. Et maintenant nous avons besoin de ces boutons animés. Donc je vais juste aller de l'avant et copier ça et basé sur, je vais dire, suivez-moi sur conduit. Ok, maintenant, on ne peut rien voir, tu sais, parce que c'est sur une surface noire. Donc je vais aller de l'avant et ajouter une nouvelle classe de combat et appeler ça blanc, d'accord, parce qu'on veut que ce soit de couleur blanche, alors on va changer la couleur pour qu'elle soit blanche, accord ? Et ça devrait être assez bon. D' accord, ces livres. Maintenant, si vous regardez par ici que c'est en fait un peu divisé en deux lignes pour que je puisse aller avant et par ici, je peux juste passer à une deuxième ligne, ok ? Et ça a l'air assez bien. Super. On n'est là que maintenant. La prochaine chose est de créer cette section. Ok, maintenant, laissez-moi vous expliquer ce qui va se passer ici. On a une image. D' accord. Vous pouvez voir qu'il s'agit d'une image. Et nous avons aussi ce genre de choses. Vous savez, comme cette illustration de navigateur. moment, on va construire ça à partir de zéro à l'intérieur d'une arme. Oh, d' accord. Alors comment allons-nous le faire maintenant ? Pas une condition que je veux. Ah, il est question de la hauteur. Maintenant, c'est 6 40 choix, donc je vais aller de l'avant et ici dans le avec. Maintenant, vous pouvez réellement ajouter Ah, hauteur basée sur l'état comme 77 TV, haie ou une tête de télévision sont 50. On éclore. Mais dans ce cas, je vais choisir quelque chose comme ça et tu sais ? Ah, une valeur fixe, une valeur absolue. Et je vais aller de l'avant et copier ça, et je vais dire 6 40 choix, c'est que je vais faire ça la hauteur. Ok, donc c'est ce qu'on va remorquer maintenant pour ça. Nous allons aller de l'avant et construire rapidement ce flux de travail à l'intérieur. On peut ajouter ces trois boutons, ces trois fléchettes. Ça va être amusant. Alors allons-y et faisons-le, accord ? Donc quand vous commencez, nous avons déjà un lapin normal. Je vais créer un nouveau bloc, accord ? Et ça va aussi être notre film d'emballage, aussi. Ok, maintenant, nous voulons ajouter un peu d'espacement ici, ce qui est ces 120 corrections. Donc je vais choisir ce rapide normal que nous avons. Et dans le je vais créer dans une nouvelle classe et je vais appeler ce 60 pixel bas soulignement M pour la marge sont bien, c'était 1 20 Ok, alors faisons ça 1 20 et puis nous allons aller de l'avant et donner une marge inférieure de 120. Ok, donc on a ça et je vais créer maintenant et maintenant on a le deuxième rappeur normal que nous avons . Donc nous avons une section à laquelle nous avons rappeur, qui est pour ça. Et puis nous avons un autre rappeur ici, qui est un orteil rappeur, et qui va tenir cette illustration, donc nous allons commencer par créer ceci. Maintenant, c'est un bloc très simple, et il a une hauteur de 37 pixels. Donc je vais créer un nouveau bloc, et je vais appeler cette barre de navigateur, ok ? Et je vais régler la hauteur de ça à 37 points le jour. On va aller de l'avant et changer la couleur de fond pour être un, ok ? Et nous ajoutons aussi le rayon maintenant avec la dernière. Ce que je peux faire est que je peux cliquer sur ce bouton orteil ajouter individuellement rayon en haut à gauche et en haut. droite. D' accord. Alors, électorat au couteau, nous avons ce beau milieu, qui a l'air vraiment sympa. Et nous avons été ajoutés que l'arrondi de huit pixels ici aussi. Donc c'est plutôt bon. Et maintenant vous ajoutez ces trois points, donc je vais créer un nouveau bloc de jour, non ? Et cette impasse, on va appeler ça des points. D' accord ? D' accord. Et ici, les tailles sombres 12 pixels par 12 pixels. Donc je vais aller la largeur et la hauteur et dit que les 12 pixels par 12 pixels et je vais aller dans le rayon et donné, genre, un grand nombre sur 100. Donc ça devient complètement autour et on va utiliser la lumière de couleur. Super. Quelqu' un va à l'arrière-plan et int gourmand et que nous pourrions choisir la couleur. Oh. Oh, désolé. On va choisir cette couleur, et ça va être, genre, super. Ok, alors on y va. Bon, maintenant pour ça. Mais j'étais à propos de ce que je veux faire, c'est que je veux en faire un élément flexible, et je veux dire flex center tout droit. Et justifier à gauche, à droite, pour que nous ayons tout au centre. Maintenant, il y a un peu d'espacement sur la gauche, qui est autour de 16 corrections. Donc, je vais donner un rembourrage intérieur à la barre du navigateur de 16 pixels pour que les médecins ici et aussi le point aient un espacement de six images, donc je vais donner une marge latérale droite de six pixels, et je veux dupliquer ce point deux fois. Donc maintenant ça va ressembler à ça et maintenant, on a une sorte de section parfaite. Suivant. Nous voulons créer ce bloc de jour, et ce bloc de bloc va être notre conteneur pour l'image. Donc ce qu'on va faire, c'est créer de nouveaux blocs. Je vais appeler ça le bloc, d' accord ? Et ça, nous voulions être à nouveau dans le rappeur. Donc, nous le signalons, assurez-vous qu'il est à l'intérieur du rappeur. Bon, donc on va pousser ça en vue. Maintenant, il est entré dans le rappeur. Maintenant, ça va être notre image de dribble. D' accord ? Et maintenant la hauteur est de 6 40 picks, donc on va aller de l'avant à la hauteur et dire que 6 40 picks sont et c'est ce que nous avons en ce moment. Je veux aller de l'avant et important l'image de ce double plan. Donc, si vous allez à notre panneau d'actifs, nous avons notre image, qui est notre image dribble. Maintenant, il y a deux façons. Soit nous pouvons importer cela comme un élément d'image pourrait déjà l'utiliser comme une image d'arrière-plan. Ce que je vais faire, c'est que je vais aller de l'avant et cliquer dessus, et je vais dire, choisir une image de fond. Donc quand tu dis choisir l'image, et je vais choisir Ah, l'image dribble que nous avons. D' accord. Et je vais aller de l'avant et dire : Ne fais pas de style. Ok, on. Je veux dire double. Ok, super. Maintenant, jetons un coup d'oeil et voyons comment cela fonctionne. D' accord ? Donc, quand vous faites défiler, ça a l'air bien. Ça a l'air parfait. Ça a l'air tout à fait normal, accord. Ça n'a pas l'air différent du tout. Une chose que je veux faire est de sélectionner ce bas de la double image inférieure a bloqué. Et ce que je veux faire, c'est que je vais aller de l'avant et ah, donner un arrondi en bas. Alors faites ça, genre, huit pixels et huit pixels sur le fond. Donc, tu sais, c'est un peu 400. Joli. D' accord. Et maintenant, voici un truc cool. Ce qu'on va faire est là. Nous avons une option qui dit fixe. D' accord, je vais cliquer dessus, d' accord ? Et quand je ferai ça, ce qui va arriver, c'est que tu peux voir que ça donne cet effet. Bon, Street, ça va être réparé. D' accord. Et ce que nous voulons faire est de nous assurer que nous allons effectivement dire cela à 40 40 et nous pouvons effectivement aller et dire que c'est haut, donc il s'aligne au sommet. OK, mais le seul problème est qu'il est en quelque sorte recadré ici à gauche et à droite parce qu' il est corrigé à toute la page. Et cela change également, en fonction de la taille de l'écran. Donc, tu sais, ça va aussi être un problème. Donc si j'ai dit ça en 1920, ça aura l'air un peu différemment. Ça va ressembler un peu différemment pour qu'on répare. C'est ce qu'on peut faire ici . Plutôt que de dire couverture, je vais dire coutume, et je vais lui donner une valeur fixe. Dans ce cas, c'est 1076 qui vaut la peine. Et je vais dire que je veux que tu sois 1076 choix est blanc, accord ? Et je vais dire haut pour que ça s'aligne vers le haut, ou on peut choisir le centre ou le haut ce que tu veux, non ? Dans ce cas, nous pouvons le mettre au centre si vous voulez. Ça devrait être correct. Et maintenant, si tu jettes un coup d'oeil, accord. Ça a l'air beaucoup mieux. Ça a l'air vraiment cool et intéressant. D' accord ? Et l'autre chose est que si vous allez de l'avant et changez la taille, disons, 1920, il est en quelque sorte goto s'adapter à un plusieurs, 76 pixels. D' accord, ça va se changer en 1076 si tu vas probablement à 12. 40 vous pouvez voir qu'il s'adapte en quelque sorte à ce pixel 1076 avec tout droit, et c'est fantastique. Super. Donc c'est à peu près tout sur la façon dont nous créons cette animation très amusante, non ? Et dans la prochaine vidéo, on va aller de l'avant et en faire un sponsor pour d'autres points de pause. Donc, c'est vous dans la prochaine vidéo. 28. Rendre la section Dribbble réactive: Donc, dans cette vidéo, nous allons aller de l'avant et rendre ça réactif. Allons donc au point de rupture de la tablette dans l'enregistrement de la tablette, nous pouvons voir que les choses s'éteignent. Donc nous allons commencer par sélectionner la section dribble. Je vais réduire la hauteur de ceci à 80 pixels sur les 80 pixels supérieurs en bas et vais également ajouter du rembourrage à gauche, qui est autour de 40. Picks est et 40 choix est juste maintenant. Nous voyons un petit problème, c'est que vous savez, quand vous augmentez cela, nous sommes gentils. Tu sais, changer ça maintenant. En fait, on a défini une valeur, vous savez, 1076, mais, vous savez, sur les points de pause comprimés, ils semblent être un peu différents. Donc je pense qu'une chose qu'on pourrait faire est de le mettre en place pour contenir Andi. Je pense que ce que ça va faire est gentil. Je veux dire, contenir ne fonctionne pas vraiment à nouveau. Nous voulons choisir la couverture, et je pense que la couverture fait un travail assez décent. Je ne dirais pas que c'est la meilleure, mais je pense que c'est la meilleure alternative que nous ayons. Et peut-être que je pense que pour la tablette, nous pourrions utiliser la hauteur de ceci parce que cela pourrait être trop . Donc, à partir de sélections, mettre à 6 40 peut-être que vous pourriez le réduire à 4 80 Et je pense que ça ressemble Ah, un peu mieux. D' accord, ça a l'air plutôt bien. Allons dans le paysage mobile. Point de rupture. Et ici, dans le paysage mobile, vous voulez changer ça de nos 80 à 64 sur le top 64 en bas, , 30 20 sur la gauche et 20 sur la droite. Et oui, je pense que même cette distance, je pense que c'est trop. Donc Internet 1 20 que nous pourrions préparer est ceci jusqu'à 64. Et je pense que ça a l'air bien. Revenons ici aussi. Et je pense que, euh, tu sais, ils devraient aller bien. Maintenant, ce n'est vraiment pas un moyen parfait de réparer ça. Donc je suppose que ça devrait être assez décent. Ça devrait l'être. Ça devrait aller. Pas vraiment si mal. D' accord, on. Mais ça devrait être assez juste. Ça devrait être plutôt bon. Très bien, donc c'est à peu près tout pour cette vidéo et vous voir dans la prochaine vidéo 29. Créer la section des témoignages: D' accord, les gars. Donc dans cette vidéo, on va aller de l'avant et créer cette section sur le site et ce sera assez amusant parce que quoi ? Parce que ce que nous allons faire c'est que nous allons faire coller cette partie en haut de la page pendant que celle-ci fait défiler de sorte que le côté gauche de la page ne défile pas alors que le côté droit de la page fait défiler. C' est une interaction vraiment amusante que nous ne pouvons pas voir dans de nombreux types de sites Web différents. Alors allons-y et faisons-le. Maintenant. Je suis allé de l'avant et j'ai fait une démonstration rapide et un cadre métallique de ce que ça va ressembler , donc on va commencer par une section comme d'habitude, et puis je vais créer un rappeur à l'intérieur qui va prendre toute la hauteur ici et à l'intérieur, je vais le faire. Je vais en faire un super pour qu'on ait deux colonnes. Donc on en a un ici et un par ici et dans la première colonne. Je vais juste m'assurer que ça prend tout l'espace et je vais y aller et ajouter un bloc ici. Ceci est pour le texte et les informations sur les liens. Et on est là. On va créer trois blocs D, un pour chacun. Les compositions ont une image. On a un texto et tu sais qu'il a un sous-texte ou ici. Donc c'est comme ça qu'on va faire. Alors nous allons sauter dans le flux de rép, non ? Si vous voulez commencer par sélectionner le corps sur, nous commencerons par créer une nouvelle section, Appuyez sur le contrôle e. Et nous sommes tapés dans la section. D' accord. Et je vais aller de l'avant et appeler ça le métro. Quoi ? C' est en fait que tout va bien. Donc, c'est un surfeur comme des témoignages. M. Allez-y et appelez cette Allez-y et appelez cettesection d'ammoniac, et nous avons du rembourrage en haut du bas. section d'ammoniac, Nous avons donc environ 1 20 pixels en haut et environ 1 30 en bas. Donc je vais commencer par créer un tapotement de 1 20 en haut, 1 20 en bas, 72 à gauche, 72 à droite. Je suppose qu'on a cette grande section et je vais commencer par créer notre premier bloc div, qui va être un rappeur, bloc créatif. Et je vais dire Rappeur, alors prenez un autre rappeur. D' accord ? Et maintenant quoi ? Classes combo. Donc on est super. Nous avons trois grandes colonnes et vous avez des projets créés. Je pense qu'on va aller de l'avant et créer un nouveau grand pour ça parce que je ne veux pas m'assurer que je ne gâche rien. Donc, on va y aller et, hum, donner un cours et l'appeler, hum, collant. Bien. D' accord. Si collant. Super. Donc je vais en faire une grille en cliquant sur ce bouton. Et maintenant, nous allons commencer par avoir un écart de colonne sur 24 sur Just Wonder. D' accord, on a juste besoin d'une goutte. Maintenant, nous allons commencer par créer un nouveau bloc, qui va être notre rappeur gauche. Donc ça va juste appeler ce trappeur normal, parce que ça va être à gauche, et ici on peut créer ces trois éléments, donc on a un h 2. On a un paragraphe, et on l'a. Donc je pense que ce que je vais faire c'est que je vais aller de l'avant et prendre, tu sais, tout ce que je vais attraper tout ce bloc, qui dit rappeur normal. Je vais copier ça et amener ici et le baser. Ok, plutôt bien. Cela dit cela à 14. 40. D' accord. Et je vais aller de l'avant et copier ces informations. Copiez ceci et basé et copiez et basé. Et ici, nous pouvons le voir. Dit, vois, tout le témoignage va copier ça et coller. Très bien, donc ce n'est pas le cas Ah, c'est fantastique. Et ce que nous allons maintenant sélectionner le prochain, et je vais créer un bloc div, et je vais appeler ce rappeur normal parce que ce sera notre côté droit du bloc. Et voici ce qu'on va faire, c'est créer Wonder Block pour chacun d'entre eux. OK, je vais créer dans le bloc de New Delhi et je veux donner ceci sur le nom spécifiquement pour cela parce que je ne veux pas le confondre avec autre chose, et nous pouvons créer notre propre classe pour cela. Quelqu' un appelle ce bloc de Testi Mony. D' accord. Et alors voyons comment le construire. Donc on a une image, et ensuite on a un autre bloc. Donc fondamentalement, nous avons deux éléments Quand va être une image et quand ça va être un bloc sourd avec cette information et ce que je peux faire est aussi haut que 3 60 Et c'est quelque chose que je ne peux pas définir l'été. Non, attrape ça fait tomber ça. Ça doit être trois lettres, non ? Droit. Ah, je vais appeler. Je vais juste dire image, et je vais dire que la hauteur de l'image va être de 3 60 Picks est sur reconnaissance parce que c'est terminé. Ok, tellement hype. Ah, vous pouvez voir que c'est 3 60 correctifs. Alors allons de l'avant et importons notre image d'abord. Donc on a déjà créé un bloc poussiéreux du matin sur une presse contrôlée ou on peut juste aller de l'avant et l'attraper dans le panneau des actifs, donc ça va être un témoignage. Je vais prendre ça, et je vais laisser tomber ça à l'intérieur, et je vais allumer h I P. Et je vais appeler cette image grincheuse de Monia, d' accord ? Et je vais ajouter une hauteur de 3 60 pixels. Maintenant, cela va aller de l'avant et écraser ce que nous ne voulons pas aller de l'avant et définir ceci pour couvrir de sorte que tout droit, il prend en quelque sorte 3 60 pixels de la hauteur sur elle couvre combien d'un espace qui a sorte. C' est plutôt bien. Non, la prochaine chose que je vais faire est de supprimer cette marge inférieure que nous avons. Donc je ne veux pas ça parce que nous sommes finaux. Ça ne va pas bientôt. Allez-y et supprimez cette classe. Quelqu' un recule dans l'espace, et ça devrait être tout. Ok, maintenant nous avons ce bloc de témoignages à l'intérieur. Je vais créer un nouveau bloc, et je vais appeler cette monia de l'heure d'été ensuite. D' accord ? Maintenant, ce que nous avons ici, c'est un peu hors texte. Et si vous regardez de ce côté, nous avons 64 pixels sur les deux sites. Donc je vais aller de l'avant et ajouter un rembourrage de 64 pixels des deux côtés. NYT 64 sur le dessus. Gauche droite, en bas. Duh. Droit. Ok, super. Maintenant, nous allons ajouter ce texte. Maintenant, cela peut être un bloc de texte parce qu'il n'a pas besoin, vous savez que cela n'a pas d'importance pour le problème, donc je vais juste utiliser un bloc de texte plutôt qu'un en-tête. Et je pense que nous avons déjà un cap à ça donc c'est la rubrique 24 choix, c'est, euh, c'est vrai. On y va. Je vais juste copier ça, et, et, euh, coller ça. Ok, on ne le fera pas. Nous allons aller de l'avant et nous assurer que ce soit 24 heures. Il y a eu un problème, je suppose. Quoi qu'il en soit, Onda, on veut y aller et faire ce bol. D' accord ? Donc, il a l'air beau et audacieux. D' accord ? Et maintenant, si vous observez ce que nous faisons ici, c'est que la distance entre ceci est droite si 64 picks est et c'est le genre de style que je suis en train de suivre indépendamment. Donc, ce que cela signifie fondamentalement, c'est que la hauteur change en fonction de la hauteur du conteneur. Ce n'est pas une hauteur fixe, est-ce pas, parce que nous sommes tellement pour expliquer, dans ce cas, non ? C' était Vous savez, même si c'est 56 lignes, la hauteur de ceci va être la même sur 600 parce que je l'avais défini pour être 600 pixels de haut. Mais dans ce cas, je ne veux pas que ce soit une hauteur définie. Je veux cacher le changement en fonction de la taille off. Vous connaissez ce texte. Donc ce qu'on fait, c'est depuis qu'on a 64 choix, c'est Onda. On en a déjà 16. Je vais créer une nouvelle classe de virgules et appeler ce 64 fixateur bas Underscore m. Et je vais dire que c'est 64 pixels. Maintenant, nous en avons 64. Donc la prochaine fois que tu seras ce petit morceau de vie alors je vais ajouter un nouveau bloc de texte, non ? Et ce bloc de texte va être en tête de 18 pixels. Je vais juste dire que n'avons pas de rubrique 18 choix, c'est bon, donc c'est une nouvelle classe. Alors allons de l'avant et créons celui-ci. A peine 24 1 et puis nous allons dupliquer la classe afin que toutes les propriétés restent les mêmes . Et je vais juste aller de l'avant et renommer ça en 18 correctifs, et puis je vais vraiment être la taille étrangère jusqu'à elle en pixels. Et sommes-nous aussi besoin d'une couleur. Et je pense que cette couleur, je crois iss raisin léger. Donc je vais créer un nouveau cours et appeler ce raisin léger, et ils allaient appliquer la lumière. La grande classe devrait être très bien. Super. Ça va être le paragraphe 16. Donc il va aller de l'avant et copier ça. Et ça va être Ah, au paragraphe 16, c'est et encore une fois, ça va être, genre, super couleur. Allez-y et copiez l'information et la bête sur et une copie et la bête. Maintenant, la distance est à peu près beaucoup moins, ce qui est comme quatre picks est. Mais ici, cela a environ 16 pixels. Donc je vais créer une nouvelle classe de virgules et appeler cette marge inférieure de quatre pixels, ok ? Et qu'est-ce qui se passe déjà, c'est à, tu sais, pour des correctifs ? Et ici, nous avons aussi rien, dont nous avons zéro marge de pixel. Donc c'est plutôt bon. Vous pouvez aussi voir que nous avons cette frontière, vous savez, et nous voulons aussi l'appliquer. Donc, cette bordure est en fait de couleur gris plus foncé. Donc quand il allait sélectionner le bloc de texte de témoignage et ah, je vais descendre à la section des frontières et je vais choisir ces trois la gauche, le bas ou allons-y à la gauche. Et j'ai changé la couleur de ça pour être gris foncé, c'est ça ? D' accord. Je vais cliquer sur ça aussi et changer ça pour Dr et je vais choisir le bon et vendre trop sombre. Donc, en gros, je fais, c'est que j'applique des frontières seulement sur vous savez, ces trois côtés, accord, et pas sur le dessus en ce moment. Vous pouvez aller de l'avant et ajouter sur le dessus de votre propre, mais je vais juste le laisser tel quel, n'est-ce pas ? Et c'est à peu près tout. Maintenant, nous avons besoin de cet espacement de 1 20 pixels. Donc ce que je peux faire, c'est que je vais choisir le bloc de témoignage lui-même, tout ça. Je vais ajouter une nouvelle classe de virgules et appeler ce trait de soulignement de 1 20 pixels. Je me demande aussi si les correctifs bas soulignement m pour la marge, et je vais venir ici et je vais mettre ça à 1 20 picks c'est bien. Et maintenant, nous avons ce 1 26 est. Donc la seule chose que je vais faire, c'est que je vais choisir ce témoignage de rock et le fonder trois fois. Donc 123 basiques deux fois, en fait. Et je vais venir ici et changer rapidement cette information va sélectionner cela et coller et , comme vous pouvez le voir parce que nous n'avons pas défini une certaine hauteur. La hauteur prend, la hauteur est définie par le contenu. D' accord. Et je vais commencer par sélectionner cette Emily Parker. Copiez ce basé du tout ici. Et ça va être la compagnie numéro deux. D' accord. Et descendons. Ou ici. Ah, copions cette copie et découpée. Et il y aura Vin cent Rod, et ça sera la compagnie numéro trois. D' accord. Et maintenant on va aller de l'avant et juste changer les images pour sélectionner l'image. Cliquez sur l'icône d'engrenage, choisissez remplacer l'image, et je vais descendre et ce choix, hum, Témoignage trois, qui est par ici. D' accord. Et ça va être un témoignage. Juste un. Sélectionnez que remplacer l'image et, ah, témoignage à Tout droit, donc c'est beaucoup. Maintenant, jetons un coup d'oeil et voyons comment ça se sent, comme, accord, je vais mettre comme 40 et 40 correctifs. Et maintenant, si je merde, accord. Hum, c'est ça. Et ça marche. Très bien. Maintenant, l'idée est de coller ça au sommet. Maintenant, avant que je fasse ça, je veux juste m'assurer que nous avons obtenu Donc, comme vous pouvez le voir, j'ai un peu d'espacement à gauche et vous savez, parce que je ne veux pas que ce soit aussi proche. Donc, et aussi l'espacement de 64 en fait. Donc je vais rapidement changer ça en 64. Sélectionnez ceci. Et dans le Gapen a dit cela à 64. Ok, donc c'est à peu près là qu'on cherche maintenant. Ce que nous faisons n'est pas seulement sélectionné ce rappeur normal que nous avons, accord ? Et en fait, ce que je vais faire, c'est que je vais aller de l'avant et donner à ça un nouveau cours, parce que c'est le seul élément qui va être coincé, il va être collant. Et comme beaucoup d'autres éléments ont le rappeur normal de classe, nous ne voulons pas appliquer de propriétés. Nous n'appliquerons pas seulement cela. Donc je vais aller de l'avant et juste enlever cette classe et donner une nouvelle classe et appeler ce test. Le bloc plus collant Nhial, d' accord ? Et ce qu'on sait, je vais venir ici. Ne fais pas de positions maintenant. Ici, dans les positions, nous avons statique. Nous avons un parent. Nous avons absolu. Nous avons réparé et nous avons collant. Ce que je vais faire, c'est que je vais dire collant. Et si vous regardez réellement Il dit sticky fixe un élément à la toile seulement après que l'utilisateur défile un emplacement spécifique sur la page. Ce qui se passe, c'est quand je joue ça, rien ne se passe. Tout est toujours le même, non ? Mais ce que je veux faire est si je vais de l'avant et dire collant et fixer une valeur de zéro. Ce que je veux dire, c'est que lorsque la distance entre cet élément sur le dessus de l'écran est zéro bâton. Ok, donc ce que je vais faire, c'est que tu peux voir qu'il y a une distance. Droit ? Mais quand cette distance qui utilise 20 ça se bloque dans le schéma, non ? Parce que la distance est maintenant zéro. Et maintenant, je peux continuer à défiler et continuer à faire défiler. Celui de gauche va rester là. Ok, maintenant, je ne veux pas toucher toute la partie supérieure. Donc ce que je vais faire, c'est que je vais lui donner un peu d'espacement. Faisons 100 et 20 picks, c'est bon, donc ce 120 picks est de cette distance, et maintenant ce n'est pas. Maintenant, ça va ressembler à ça quand je fais défiler, ça va rester coincé. Et c'est à ça que ça va ressembler en ce moment. Nous pourrions réduire cela à 64, 48 ou 18. Je vais le mettre à 64. Je pense que 64 est un bon nombre. Ouais, c' est à peu près tout. Droit. Et c'est ainsi que vous créez un bel effet collant. Donc, la prochaine, on va aller de l'avant et faire en sorte que ça soit réactif. Je vous vois dans la prochaine vidéo. 30. Rendre la section Rédiger la section: D' accord. Donc, dans ce cas, on va aller de l'avant et en faire un sponsor pour d'autres points de pause. Donc, commençons en fait par sauter dans la vue tablette maintenant dans la tablette, vous voulez évidemment commencer par sélectionner, vous savez, les éléments, et ils utilisent le rembourrage sur le dessus. C' était fini. 80 pixels vont faire la même chose ici. 80 pixels en haut, vous savez, 80 pixels en bas et à gauche. Et juste ici, vous pouvez déjà est que à 40 et 40. Et aussi l'espacement ici est peut-être un peu trop. Donc, nous pouvons radios que de 64 à 24 ça devrait aller. Même le rembourrage ici est un peu trop, donc on ne sera probablement pas prêts. Est-ce à 32 32 32 et ah, 30. Ne menez pas. Ça a l'air assez mauvais. Même la distance par ici, mi pourrait vouloir orteil, vous savez, changer ça. Donc si j'ai dit comme le bloc de témoignages, on en a déjà 21. C' est à 64 ans ? Et je pense que c'est un bon nombre. Et oui, je pense que j'étais assez bien. Maintenant, le problème est que quand il s'agit du point de rupture du paysage, il n'a pas vraiment l'air bien. Donc ce que nous devons faire, c'est nous devons nous débarrasser de l'élément collant, de la fonctionnalité. Donc ce que vous faites avec le premier de tout, c'est que le rappeur de Cynthia est une colonne à deux. Super. Ok, je vais supprimer cette suppression d'une colonne et en faire une grille de colonne unique. Donc maintenant, ça ressemble à ça, et je vais aussi aller changer l'écart ici. L' écart routier de 16 à 48. Ok, donc on a quelque chose. On dirait ça, et ah, on peut le faire c'est que ce ne sera plus un bloc collant. Je vais définir la position de ce trop collant de collant à statique. Donc c'est normal et nos rouleaux normalement et nous voulons aussi que la distance soit 64 sur le top 64 en bas et, vous savez, vous savez, sur la gauche et la droite. On ne peut pas vouloir que ça soit, um 20 corrections à gauche et 20 choix à droite et ce sera un bloc très simple, direct, non ? La même chose s'applique pour plus par paysage, pour point de rupture mobile. Et oui, je pense que pour les plantes mobiles, pauvres, je pense que pour le portrait mobile ou nous pouvons faire est probablement des radios vers le bas de 30 à 24 sur la main gauche. Sur la droite sur ce que nous pouvons garder 32 au sommet ne devrait pas être un problème. Et je pense que ça a l'air assez bien, non ? C' est beaucoup. Rien de trop compliqué. Est-ce que ah complexe à ce sujet ? Donc, à moins que vous les gars dans la prochaine vidéo 31. Créer la section des Tabs: D' accord, les gars. Donc, dans cette vidéo, nous allons aller de l'avant et créer cette section et ce sera très amusant parce que nous allons utiliser un nouveau composant appelé un coup de couteau parce que nous voulons que ce soit une structure d'onglets et comprendre comment tapoter vieux travail. Donc, avant de commencer, comprenons rapidement la structure. Donc nous allons commencer par une section et ensuite nous aurons un rappeur à l'intérieur, et ensuite nous allons avoir un bloc def, qui sera pour le titre et le texte, et l'autre développé sera pour les onglets eux-mêmes. Droit ? Donc tout ça va être la structure des onglets, et c'est à peu près tout. Et j'ai également défini la hauteur de 420 picks est pour chacun de ces images. Alors, nous allons sauter dans le flux d'air. Donc ici, je vais commencer par sélectionner le corps, et je vais commencer par lire dans la nouvelle section Animal appeler cette section onglet section parce qu'il poignarde Aziz vraiment vouloir empiler 1 20 pixels de chaque côté pour commencer avec rembourrage mettre avec ah planification sur la gauche et rembourrage sur la droite. Droit ? Commençons donc par créer une impasse. Et cette impasse va être notre emballage qu'on a si point Ah, la prochaine chose va aller de l'avant et créer cette section. Alors, qu'est-ce que impressionner contrôle e obtenir dans un bloc ? Ça va être mon rappeur normal. Et ce que nous pouvons faire, c'est que nous pouvons ramasser ces choses aussi la même chose. Copiez ça. Basé sur la copie et le meilleur. Très bien, ça devrait être le même. Et je vais aller de l'avant et changer ça en photographie, et on peut avoir du Dexter ici. Je vais copier ça et un de baseball ici et ce que je peux faire, c'est que je peux briser la ligne et dire en voyage pour que je puisse aller de l'avant et briser ça en deux lignes, et ça devrait être plutôt bon. Maintenant, nous avons ajouté ce rappeur normal à l'intérieur, mais je ne pense pas vraiment que nous ayons besoin de la partie supérieure normale. Donc ce que je peux faire est en fait, fermons tout cela et nous pourrions effectivement avoir le titre seul et le paragraphe sur son propre et vous savez, affaiblir supprimer le rappeur normal parce que tout va être dans une ligne verticale droite là, parce que oui et ensuite, nous avons une marge de frappe ici et ici. On voulait avoir 64 ans. Alors quoi ? Ça allait aller de l'avant et dupliquer ce cours, ok ? Et plutôt que de l'appeler 40 pixels en bas, je vais l'appeler 64 picks de Baden et j'ai changé ça pour 64. D' accord. Et maintenant, on va utiliser un nouvel élément. Tout à fait onglet. Donc, si vous allez dans le panneau des éléments, vous pouvez réellement voir que nous avons. Et Lemon appelait des coups de couteau ne prenait pas ça traîné et le mettait à l'intérieur du rappeur, est-ce pas ? Donc maintenant c'est ce qu'on a, et je vais aller de l'avant et appeler ça des coups de couteau, ok. Maintenant, avant de modifier ou de faire quoi que ce soit qui a compris la structure de ce Ok, donc quand vous ouvrez les onglets, nous voyons que nous avons, genre, le parent principal, qui est appelé robinets. Et puis pour que nous ayons deux enfants. Un menu d'onglets d'escorte. Et quand les coups de couteau entrent en contact, où est-il ? Un menu d'onglets vert complet et intervient le menu des onglets de contenu. Ce sont trois boutons ? Droit ? Et si vous regardez ici, si vous ouvrez, nous voyons que vous avez un bloc de lien de tabulation, et vous avez un onglet. Texte. Vous avez un bloc de lien onglet, et vous avez un texte, puis vous avez un bloc de lien, puis vous avez un texte. Droit ? Donc, cet élément ou ce parent, est fondamentalement le conteneur pour trois robinets, non ? Il a juste fallu avoir plus haut. Donc, dans ce cas, nous voudrions plus de fois parce que nous avons quatre chats quand une descente de copie basé il. Droit. Et cela ajoute un nouveau top. Bon, donc c'est ce que nous avons maintenant. Onglets. Continent est la zone où nous avons quatre enfants. Ok, maintenant, ceux-ci définissent fondamentalement ce qui se passe Toby dans un onglet particulier. Tout droit sur. Dans notre cas, nous avons ces quatre images. Donc quatre images sont ce qui va être ici dans cette cabine. Droit ? Donc c'est ce qui est ce que c'est comme sa structure. Commençons donc par personnaliser ces coups de couteau. D' accord ? Maintenant, quand je cliquerai sur l'arrêt, ce que je vais faire, c'est aller de l'avant et appeler cet onglet, ok ? Vous pouvez le voir dans l'ordre. Il ajoute automatiquement un appel de classe combo s courant. D' accord ? Mais si je viens ici et que je vais aller de l'avant et appeler le coup de couteau, accord ? Rien ne va se passer. n'y a pas de classe de virgules, mais quand je clique ici, il y a une classe de virgules. La raison en est que lorsque vous regardez une page qui a des coups de couteau un haut va être automatiquement sélectionné à droite, Cela va être un moment qui va être sélectionné. Il ne peut pas y avoir d'attaque qui n'est pas sélectionnée, non. C' est donc la raison pour laquelle nous sommes en flux ajoute automatiquement un état actuel à cela. Maintenant, quand vous voulez modifier ceci maintenant, nous savons que nous voulons évidemment aller de l'avant et éditer le Stein parce que cela semble complètement différent de ce que nous avons par défaut. Donc, si vous voulez aller de l'avant et personnaliser cela, ne commencez pas avec l'onglet qui a cet état actuel ok, ne pas, parce que tous les changements que vous faites effet le droit de l'état actuel, nous voulons commencer par cela, qui n'est pas dans l'état actuel, et ensuite nous voulons aller de l'avant et personnaliser l'état actuel. Ok, Maintenant, si vous allez à ces paramètres lorsque vous pouvez également voir beaucoup de paramètres où vous pouvez décider quel est le tableau actif. Évidemment, vous pouvez choisir aucun aussi comme onglet actif. Mais cela n'a vraiment pas de sens. Ainsi, vous pouvez aller de l'avant et choisir poignardé un ou appuyez sur ou sur trois ou appuyez sur pour choisir entre . Tu ne seras pas le premier. Dans mon cas, je vais juste préparer le premier pour être le quatrième arrêt, non ? Assez simple. Bon, alors allons de l'avant et renommons cela maintenant, Renommer n'a rien à voir avec la classe. Alors je vais aller de l'avant et appeler ça l'Italie. Je vais appeler ça l'Australie. Ça va être l'Inde et le Dieu du Brésil, non ? Ça va être l'Inde et le Dieu du Brésil, Correct. Maintenant, je vais mettre l'élément poignard. Je vais aussi avoir une classe appelée un coup de couteau, accord, parce que c'est notre texte haut, et je vais commencer par le dernier élément et m'assurer que nous appliquons les mêmes classes à tout. Donc le parent va être l'onglet, et ensuite le texte sera le texte du robinet. Ça va être Tab et ensuite Celle-ci sera tamponné ensuite. Oh, saoudien quand ce serait cet onglet. Ensuite, hum, ça va être tamponné, et un autre sera ensuite dob, et il y aura encore une fois tamponner la prochaine fois. Très bien, maintenant que si on coupe ça, on a le coup de couteau. Et ce que tu fais, c'est que tu peux voir qu'on a une frontière ici, accord ? Et c'est violet, et c'est juste quoi ? C' est très simple. Alors allons-y. Et avec le sélecteur supérieur, vous pouvez voir que nous avons cette image et backer et il a une couleur de fond. Je n'ai pas besoin de tout ça. Je vais aller de l'avant et dire l'AL loin à zéro parce que nous voulons que la capacité soit zéro  ? Et comme vous pouvez le voir, il change pour tous les onglets sauf le coup de couteau, car cela a un combo close. On va s'occuper de ça plus tard et aussi de la prochaine à l'intérieur. Mais d'abord, allons de l'avant et ajoutons une bordure. Alors allez-y et changez la couleur de ces deux violet. Donc on a une belle frontière. C' est bien. Et maintenant nous avons la structure à l'intérieur, qui est de 6 à 18 picks, donc je vais aller de l'avant et changer la taille de police pour être à 18 correctifs. Et j'ai dit ça trop audacieux. Et aussi la couleur va être blanche. Ok, Maintenant, nous avons aussi un peu d'espacement en haut et en bas, qui est Dr Pixels en haut et 16 picks à gauche et à droite. Même un sélectionnez l'onglet ici dans le rembourrage. Je vais mettre cela à 12 et twas et ah, vous savez, gauche et à droite est 16 et 16 une fois dit cela à 16 sur 60. D' accord. Plutôt cool. Nous avons aussi une distance ici entre deux onglets, qui est, comme 24 picks est donc je vais aussi sélectionner l'onglet sur le côté droit. Je vais lui donner un cours. Je vais lui donner une marge de 24 pixels, donc ce genre de repousse les choses. Bon, maintenant, ça a l'air plutôt bien. Maintenant, nous voulons sélectionner ce truc, qui a la classe combo appelée actuelle, et maintenant nous voulons le personnaliser pour regarder à quoi il va ressembler quand il est sélectionné. Quand il est dans l'état actif ou ils coupent en état. Nous allons commencer par aller de l'avant et changer la couleur de fond de ça pour Papa. Désolé, pas le texte. changement urbain, la couleur de fond est pourpre, , et c'est à peu près tout. Donc maintenant, si nous allons et prévisualiser, vous pouvez effectivement cliquer dessus, et vous pouvez voir que vous savez, ils ont cet effet et il vous a regardé. Avoir l'air parfait. Maintenant, si vous voulez, vous pouvez également aller de l'avant et passer à un niveau supérieur. Disons qu'on a un robinet. Allons de l'avant et ajouter un état du port droit dans l'avoir un état. Je vais y aller et on a cette couleur. Je vais choisir violet, et je suis déjà la capacité d'aimer 20%. Donc on a juste, genre, un léger effet de vol stationnaire. D' accord ? Sur ça, je vais retourner à l'état de nonne, et évidemment on veut la transition. Donc je vais faire les transitions vers le haut et nous allons choisir autour de la couleur, et nous allons régler la durée à 3 50 millisecondes et l'assouplissement va être un chevalet court. Bon, alors maintenant jetons un coup d'oeil. Donc maintenant, vous pouvez voir que lorsque vous l'avez sur les onglets, vous obtenez ce bel effet, puis vous cliquez sur votre droite, Vous pouvez voir que cela sorte de changements, et il semble assez bon. Oui. Ok, euh, je veux rapidement des changements. L' orthographe de police de ce e l I Tout en ce moment le menu des onglets. Nous avons, comme, espacement de 40 pixels, va sélectionner le menu des onglets. Droit ? Allons appeler ce menu à onglets, d' accord ? Et on va aller de l'avant et se casser à la marge inférieure de 40 pixels, sorte que ça pousse la portée. On va aller de l'avant et appeler ce contenu d'onglet, parce que ce sera notre pays de robinet. On va aller de l'avant et appeler ce contenu d'onglet, Et ce qu'on va faire, c'est aller de l'avant et créer un nouveau bloc, non ? Et cette impasse, on va appeler cette grille de tabulation. Ok, donc ce qu'on sait c'est que je vais aller de l'avant et faire un battage médiatique, non ? Nous voulons que ce soit une hauteur de 4 20 pixels. Vous voulez aller de l'avant dans les deux hauts pour 20 pixels ? Ça a l'air bien. Et je ne cliquerai pas dessus pour en faire une grille. D' accord. Et nous allons aller de l'avant et ajouter 232 colonnes et supprimer merveille. Oh, ok, alors ça va ressembler à ça. Et aussi, l'espacement sera de 24 entre les deux. Donc l'écart de colonne va être de 24 sorties, et ça a l'air assez bien. Maintenant, tout ce qu'on a à faire, c'est aller aux images, et tu veux prendre nos images pour qu'on puisse commencer par celles qui ont marqué le voyage. Il va y en avoir un, glisser ça et laisser tomber cette idée. Et tu l'as dit à h I D p. Je vais bien, et choisirai le suivant, et choisirai le suivant, qui sera par ici, qui sera voyagé. Do dit cela faire h i d p i. Et puis le suivant va être voyagé. Trois. Ok, sauf pour H i v p i o. donc on a eu la mauvaise image. Je vais aller de l'avant et remplacer ça par le bon, qui est, hum, a voyagé trois, qui est par ici. Il a dit H i d b I. Et le prochain sera l'image de voyage numéro quatre. Et Dieu a dit ça à h i d. Maintenant, le problème est que vous savez, il ne prend pas toute la hauteur. Et aussi, le fait que décide est différent. Alors, comment on répare ça ? Très simple. Pour aller de l'avant et sélectionner l'image. Je vais lui donner un cours et appeler cette image de couteau. Ok, maintenant, ce que je vais faire, c'est qu'on a déjà défini la hauteur, qui est de 4 20 pixels. Donc, ici, dans l'ajustement, je vais le changer de Phil. Et j'ai dit ça pour couvrir. D' accord ? Et il a également dit que la hauteur d'être 100% de sorte que prend toute la hauteur. Si je contrôle cela, vous pouvez voir que c'est la mise à l'échelle tout en maintenant le rapport d'aspect. Donc c'est vraiment bon. Donc, nous voulions maintenir la question de l'aspect, et pour l'image sera bougie est que nous pouvons appeler la même chose. Alors appelons cet onglet image Alors que les compétences et maintient le rapport d'aspect. Appelez cette image de poignard. Là, nous allons et construit aussi et appelons cette image de l'onglet droit. Ils ont un assez bon Maintenant, allons de l'avant et voyons comment cela et ça l'air assez bon. Et si je tape sur l'Australie. Vous pouvez voir qu'il s'effondre parce qu'il n'y a pas de contenu dans le top australien et le président indien . Ça arrive. Alors quoi ? Nous avons l'Australie ici, et allons voir ça. À quoi il ressemble sur un écran 1920 semble plutôt bon. Ça a l'air sympa et intéressant. OK, maintenant vous pouvez voir que sur un écran de 1920, vous pouvez voir que la hauteur est désactivée, vous savez, il devient comme un rapport carré presque. Et bien que c'est bon, mais en supposant que nous ayons toujours voulu être, vous savez, comme cette hauteur verticale. Ce que nous pouvons faire, c'est que nous pouvons réellement sélectionner l'onglet. Super. Et ici, nous définissons la hauteur off pour 20 pixels. Maintenant, nous voulons que le haut change en fonction du port de vue avec lui. Très bien, vue sur le tableau. Nous ne sommes pas voir la hauteur du port. Ok, donc je vais voir 30 V W. Ok, maintenant ce qui va faire, c'est qu'il va aller aux pieds. Définissez la hauteur en fonction du port de vue avec, Donc, si le poids du port de vue augmente, la hauteur augmente également. Je vais probablement dire ça à 35 ou 30. 30 à, Je suppose que je pense que c'était un bon nombre. Et maintenant, si vous allez de l'avant et regardez ça, passons à 14 40. Vous pouvez voir qu'il est encore vertical, vous savez, comme le taux de sport de vous, parce que la hauteur dépend du port de vue Worth. Ok, si je viens ici en avant-première, on peut le voir. Et si je vais à 1920, vous pouvez maintenant voir que le bâton de hauteur est la hauteur est basée sur le mot hors de l'écran, et c'est exactement ce que vous voulez. Et si vous allez de l'avant et dit cela à 38 40, vous pouvez voir que nous obtenons cela, ce qui est énorme. Donc nous ne voulons pas que ce soit bien. On ne veut pas que ce genre d'orteil arrive. Donc, ce qu'on peut faire, c'est de dire, OK, je ne veux pas que tu ailles si grand. Je veux que vous sachiez Max à une valeur de pixel particulière. Donc disons que nous disons que 500 correctifs sont Disons être, disons que 600 correctifs sont Disons que nous disons que 6 40 picks est ou moi 600 est un bon nombre, donc nous allons dire, Continuez à augmenter la hauteur, mais arrêtez quand il atteint 600 pixels, considère peut-être à 620 0 R. 630. Ok, donc c'est ce qu'on veut faire. Je vais aller de l'avant et dire ça à 14. 40 à nouveau. Donc c'est ce que nous avons, et ça a l'air plutôt bon. Maintenant, ce que nous avons agi, il peut faire est si je viens ici pour les images, commencé au navigateur, et allons au contenu des onglets pour que vous puissiez voir cela dans le contenu des onglets. On a un onglet. Bien. Et à l'intérieur de ce que nous avons. Ces quatre images que nous pouvons faire sont que nous pourrions simplement copier ceci et affaiblir basé cela dans toutes les autres aussi. Et nous pouvons aller de l'avant et changer les images plus tard. Et aussi, je vais aller de l'avant et rapidement nommer ça et appeler ça du contenu, du contenu du travail et de la conduite du travail. Droit. Et il va passer en revue ça. Donc, s'il voit cela, si vous cliquez simplement sur les différents onglets, vous pouvez voir que les images changent en quelque sorte. Et en ce moment, toutes les images sont les mêmes. Donc ça va être pareil, donc tu peux aller de l'avant et le changer et ça va vraiment bien paraître. Bon, donc il y a quelque chose qui a l'air vraiment cool et vraiment génial. Alors maintenant, dans la prochaine vidéo, nous allons aller de l'avant et rendre ce spectacle réactif et montrer à quel point cela semble réactif. Comme vous dans la prochaine vidéo. 32. Rendre la section des Tabs réactives: C' est vrai, les gars. Donc, dans la vidéo précédente, où je suis allé de l'avant et fait cette section onglet et dans ce nous ne allons pas de l'avant et rendre cela réactif pour le point de rupture. Alors faisons ça. Allons partout sur le point de rupture de tablette sur def. Vous avez du local ici. Cela dépend en quelque sorte de la façon dont vous voulez mettre en valeur est maintenant. Puisque ce sont des images, nous aimerions avoir Ah, bonne quantité d'espace pour cela. Donc, évidemment, va commencer par utiliser la taille de police de cette étude ? Le dans une séparation de ceci à 80 80 vous savez, 40 et 40. Um, n'importe quoi. Ce que je voudrais faire, c'est, puisque c'est une tablette, je peux vouloir changer la grille. Donc, pour en faire un grade de deux par deux colonnes, donc pour acheter des nuances de turo si gentil, mettre en place comme ça sur DA Vous savez, nous pourrions peut-être même réduire augmenter l'écart de cadeau de la route à 24 fait. Et maintenant ce genre a l'air bizarre. Mais pensez que puisque nous avions défini l'étude de la hauteur, regardons la grille. La hauteur de ce pour être 32 VW sur une maxime il off 6 30 Nous voulons en quelque sorte changer cela, à droite, parce que maintenant la tablette va être plus petite. Ce ne sera pas assez grand, et donc on peut définir une valeur fixe. Donc je vais aller de l'avant et enlever le maximum humide. Je vais juste dire aucun. D' accord ? Et pour la hauteur, je vais le définir en termes de pixels. Donc probablement quelque chose comme 3 60 correctifs. Euh, peut-être que je suppose qu'on pourrait faire ça jusqu'à 6 40 choix, c'est même si tu voulais être un peu plus, on pourrait aller de l'avant et sauter ça jusqu'à, tu sais, 808 100 quelque chose. C' est quelque chose que vous devez décider. 8 40 Droite. Donc, cela semble assez bon et assez décent. Nous pourrions atteindre le point de rupture du paysage, et ce sera Can faire est d'utiliser la marge supérieure de ce à 64. Rembourrage inférieur jusqu'à 64. 20 à gauche et 20 à droite. Et ça a l'air plutôt bien. Maintenant, une chose que nous pouvons faire ici quelque chose d'intéressant est que nous pouvons réellement enlever le batting que nous avions pour chacun de ces éléments, non ? Donc on peut régler le batteur sur auto. Et maintenant ce que nous pouvons faire, c'est que c'est un menu à onglets, on peut changer ça en une boîte flexible, accord ? Et une fois que je le change ou flex box, je peux effectivement dire justifier l'espace entre de sorte que les éléments sorte hors de l'espace ceux-ci. Maintenant, la raison maintenant, la raison pour laquelle ce n'est pas le Brésil n'est pas en train de toucher le bord, c'est parce que nous l'avons mis à l'auto. On veut mettre cet orteil zéro, et c'est comme ça que ça va ressembler. Donc, nous avons maintenant ces onglets qui prennent un espace égal, et ces images regardent aussi, Mais je pense que cela semble un peu bizarre parce que ce n'est pas je veux dire, ça correspond trop espacé. Donc je pense que quand un contrôle de presse Z juste pour, vous savez, ramener à son état d'origine, accord, similaire. Comme ça. Je pense que c'est ce que ça avait l'air assez bien. Donc je vais juste laisser ça comme ça. Nous avons un petit problème où ce genre de passe à la ligne suivante. Donc, ce que nous pourrions faire est probablement de réduire le avec. Je veux dire, le rembourrage de 24 à 20 peut-être même 16 le sont. Essayons. Je suppose qu'on a des radios à zéro. Est-ce que ça marche ? D' accord, donc ça marche avec des zéros de peut-être, disons à notre plein, je suppose, hum ou six. Ok, on l'a mis à plein. Ouais, peu près comme ça. Et, euh, je pense que ce serait une bonne option est de sélectionner le menu des onglets et effectivement dit cela dans une grille. Et puis nous devons acheter pour collaborer, et c'est ce que nous obtenons. Et je pense que c'est une meilleure façon de le représenter. Et ce que nous pourrions faire est cet onglet que nous pourrions dire flexion, nous disons un centre de ligne et justifier milieu de sorte que le texte soit au centre. Je pense que c'est une bien meilleure représentation. Et si vous allez au portrait mobile, nous obtenons ceci. Et je pense que cela semble aussi assez bon à 40 est trop petit. Donc, je pense que nous pouvons rester avec 3 60 qui est celui par défaut. Et nous devons pour la meilleure note, c'est parce que c'est trop bourré. Je vais aller de l'avant et enlever ces deux colonnes et en faire une seule colonne, et ils devraient avoir l'air plutôt bien. Et nous pouvons sauter la hauteur de chacun des éléments de manière significative et plutôt que , vous savez, vous savez, ajouter une hauteur à la grille de tabulation. Et ici aussi, je pense que nous avons ajouté une hauteur à la nuance de tabulation. Ce que je vais faire, c'est que je vais enlever la hauteur de la tablette sur dit que l'auto et nous allons faire, c'est que je vais venir à chacun des éléments. C' est l'image de l'onglet et donnez à cela une hauteur. Maintenant, nous l'avions donné 100% mais 100% de réduction. Quoi ? En ce moment, c'est 100% de Zito, n'est-ce pas ? Parce que nous n'avons pas de hauteur donnée à l'onglet. Super. Donc on peut dire qu'on peut dire que 840 nous choisit bien ? Et peut-être que c'est trop. Disons que 6 40 choix, c'est juste. Ou peut-être que c'est vrai, mais disons 6 30 pixels, non ? Je pense que c'est un bon nombre, et maintenant nous donnons une hauteur à l'onglet individuel et pas le grand. Et revenons à la vue mobile, et je pense que cela semble aussi assez bon. Et je pense que ça a l'air vraiment sympa. Donc, c'est à peu près tout sur la façon de rendre cela réactif. Je pense qu'une chose cool qu'on pourrait faire, c'est peut-être pour le paysage. On pourrait enlever l'écart pour qu' ils se touchent. D' accord. Et peut-être que c'est une direction cool que nous pouvons prendre. Pas vraiment sûr, mais je pense que je vais aller de l'avant et les garder comme d'habitude. Et oui, ça a l'air plutôt bien. Donc c'est tout pour cette vidéo et un PSA. Vous êtes dans la prochaine vidéo ? 33. Créer la section des formes: D' accord, les gars. Donc, dans cette vidéo, nous allons de l'avant et créer cette section de formulaire. Fondamentalement, ce qui se passe est que les personnes qui visitent votre site Web peuvent réellement entrer le nom, adresse e-mail et un message et ils peuvent vous envoyer un formulaire. Et quand cela s'est terminé, vous recevez un e-mail et vous obtenez des informations à ce sujet. Il est stocké dans le flux web Silver, et je vais vous montrer où il va être stocké et comment vous pouvez le mettre en place et arrêter maintenant. Une fois de plus chose à noter ici, est que la taille de ce que le conteneur est en fait plus petit que celui que nous avons utilisé similaire à celui que nous utilisons sur dribble, droite, Donc il l'autre avec est 1076 C'est le avec lequel est différent de tous les autres que nous avons créé jusqu'à présent, parce que tous ceux-ci ont un peu de 1920 max, mais c'est limité 21076 Donc la forme va aussi être dans ce format, non ? Alors allons de l'avant et le sang coule dans le sang, non ? Donc, tout d'abord, allons de l'avant et dit cela à 14 40. Et je vais sélectionner le corps et appuyer sur le contrôle E et taper dans la section et sera la section des formulaires. D' accord. Je vais avoir un rembourrage de 1 20 en haut, 1 20 en bas. Maintenant, le tapotement gauche et droit. OK, allons de l'avant et ajouter ça, Mais vraiment pas d'importance. Dans ce cas, disons 72. D' accord. Et ce qu'on peut faire, c'est que je suis dans un E contrôlé par la presse on va avoir une impasse, qui va être un rappeur. Et je vais dire rappeur V 2 parce que le V 2 a un maximum avec un 1076 parce que c'est ce qu'on veut. Ok, donc maintenant, gros, c'est très simple. Tout ce que vous avez à faire est de créer une grande colonne de deux. Super. Donc il y aura la première colonne et elle sera colonne à, et nous avons une distance de 24 pixels de la colonne. Sogard Spacing 24 picks est entre ces deux, donc nous pouvons aller de l'avant et l'utiliser aussi. Droit ? Alors commençons par créer. Donc ce qu'on peut faire c'est en fait un bon et je vais appeler cette grille de formulaires, ok ? et je vais dire, vous savez, vous savez, transformer cela en une grille et nous allons supprimer deux lignes parce que nous avons seulement besoin de se demander et aura deux colonnes. Très bien, plutôt bien. Et on va aller de l'avant et je vais copier ce bloc normal. Ou on pourrait simplement copier cette rubrique. Copiez cela et notre lexical affaiblir ici et sélectionnez le rappeur. Et en cours, Tout d'abord, mon bloc créatif. Oui, parce que nous avons besoin que ce soit le premier bloc de gauche et que nous voulons appeler ce crapeur normal et impressionner le contrôle de la pâte de veto. Donc ils ont ça, et je vais copier ce texte de paragraphe, et nous allons aller de l'avant et placer ça aussi. Donc c'est à ça que ça ressemble. Bon, maintenant on a beaucoup de cours de combat. Je vais juste supprimer tout ça. On n'a pas besoin de tout ça. Nous avons juste besoin de celui qui dit comme raisin parce que la couleur de la police est probable. Et copiez ce texte, et je vais aller de l'avant et le baser, et je vais copier ceci et un aller de l'avant et basé sur ça aussi. Droit ? Donc, la prochaine chose est de s'assurer que nous savons que la grille doit être 24 picks est blanche. Quelqu' un dit colonnes 24 colonne Gap pecan fait. Et là, nous allons aller de l'avant et ajouter un nouvel élément collège, les fermes, la presse à lire, pays et la recherche de formulaires. Nous avons donc un bloc de réforme de Nicholas. Je vais aller de l'avant et traîner ça à l'intérieur, et maintenant c'est comme ça que ça va ressembler. Ok, donc la première chose est que nous allons de l'avant et, vous savez, appelons ce bloc de ferme, ok ? Et nous pouvons aller de l'avant et commencer à personnaliser cela immédiatement. Donc ce genre de avec le nom et, euh, si vous regardez les paramètres, un paragraphe de 16 pixels, accord. Donc je vais sélectionner le nom et je vais dire 16 choix de paragraphe. C' est comme ça que nous allons faire la même chose pour l'email et le message, donc je vais dire l'adresse e-mail 16 choix de paragraphe. Et la chose ici est que la couleur est raisin clair, mais nous voulons que ce soit blanc. Je vais aller de l'avant et ajouter une classe combo et nous a appelés blancs. On voulait que ça soit blanc. Vas-y et dis ça, Dwight, et vas-y. Et j'ai dit ça pour attendre. Droit ? Excellent. Maintenant, il y a un peu de distance, qui est d'environ huit pixels. Donc je vais aller sélectionner le champ de texte. Je vais juste appeler chacun de ces champs de texte, et je vais avoir une marge supérieure de huit pixels. Donc on a un espacement qui fera la même chose ici. On appelle ce champ de texte, d'accord ? Et ce champ de texte a une couleur différente. Donc je vais sélectionner ceci et ajouter la couleur que nous voulons, qui est L un. D' accord. Et cela vous change finalement. Il y a aussi une frontière. Vous pouvez voir ça ici. Rien n'est là donc parfois comme un bug. Donc, tout ce que vous avez à faire est de sélectionner le champ de texte et d'en ajouter un, puis il suffit de le supprimer ainsi Et, vous savez, nous pouvons définir la largeur de ceci à zéro, Donc il suffit de supprimer cela et ça a l'air assez bon. Maintenant, nous avons le thé, qui est le nom email, et nous avons le message et la distance entre e-mail et messages est de 40 pixels. Je vais vendre le champ de texte, et je vais ajouter une marge inférieure sur 40 choix est juste. C' est comme ça que ça va se passer et je vais sélectionner le paragraphe ah. Je vais le copier et le coller. Et quand je bougerai ça et que je choisirai celle-là aussi, copiez-le et collez-le et nous allons déplacer celui-ci, accord ? Et il va y avoir un message, d'accord ? Et nous sommes un SMS ci-dessous avec Gordon. Personnalisez ceci et ajoutez les propriétés. Donc, nous avons un champ de texte ici, et quand je viens ici dans les paramètres, nous avons quelques options. Alors, tout d'abord, quel est le nom que nous allions laisser ça ? On va appeler ça un nom de personne . Et si vous voulez ajouter un steaks d'espace réservé, vous pouvez l'ajouter afin que vous puissiez voir des choses comme entrer votre nom afin qu'il puisse être un texte d'espace réservé . Et quel type de texte se sentent c'est c'est un simple mot de passe e-mail pour le numéro de numéro. Nous pourrions simplement dire que c'est une rate et que vous voulez décider de leur Ceci est un champ de texte obligatoire et vous pouvez dire oui. Nous voulons que ce soit un expert requis. Assez simple. Allons à la suivante. Ah, ici, nous pouvons voir entrer l'email de cour et nous pouvons aller de l'avant et visiblement exiger à nouveau. Nous pouvons voir le type de texte pour être e-mail. Il va y avoir un message, et ça va être un message. Et, euh, ce que nous allons faire, c'est que nous allons aller de l'avant et changer ça en texte brut parce que cesera, genre,un sera, genre, genre, texte énorme et simple où les gens peuvent taper des trucs et nous pouvons en fait allez-y et faites ce assez grand, qui est sur 100 pixels. Donc je vais ajouter une classe de virgules et dire ça 100 pixels juste au cas où, et puis on ira à l'intérieur de la hauteur de ces 200 pixels, non ? Ah, c'est à peu près tout. Maintenant, nous avons ce bouton, qui est assez grand et grand, donc nous avons le bouton de soumission et je vais ajouter la classe de bouton. Je pense que nous l'appelons CD, et quand je le fais, c' est ce que nous obtenons. Mais ce que je vais faire, c'est que je vais aller de l'avant et créer une nouvelle classe et appeler ce bouton de formulaire parce que c'est assez différent de tous les autres boutons qui sont morts. Eso le 1er 1 Je vais dire le avec ce hors à 100%. Donc, il prend tout l'esprit, puis nous avons le texte, qui est de 18 pixels. Donc je vais sélectionner le texte et on va aller régler ça à 18 choix, c'est qu'on va mettre le poids avant bouilli. Et aussi on va dire : Commençons pour qu'on puisse cliquer dessus. Et lorsque vous cliquez sur le bouton, vous devez en fait modifier les informations ici. Donc on va dire, Commençons et quand tu seras sur le bouton, tu pourras avoir un état de seigneurie et affaiblir. Donc maintenant, il est dit, s'il vous plaît, attendez, nous pouvons ce truc comme soumettre tout droit. Et les trois points qui devraient marcher. Et aussi, nous avons un rembourrage supérieur et inférieur de 24 afin que nous puissions sélectionner la ferme. Burton et Weaken disent 24 en haut et 24 en bas. Droit. Et aussi, la couleur, bien sûr, doit être changée pour notre celle-là en ce moment semble plutôt bon pour cette affaire. Ce que je vais faire, c'est que je vais juste supprimer le texte de l'espace réservé parce que le design n' en a pas, donc je veux juste aller de l'avant et supprimer cela pour l'instant. Et c'est à peu près à quoi ça ressemble. Et si vous allez de l'avant et appuyez sur le bouton d'aperçu et cliquez dessus, vous pouvez voir qu'il est dit, s'il vous plaît remplir les champs et il va aller de l'avant et entrer aléatoirement du texte. Maintenant, vous pouvez voir ça quand je au hasard jusqu'à ce que vous puissiez voir qu'il y a du texte qui est par ici . Donc il va aller de l'avant et dire Chilton, KBS et maintenant on a formé modifier cette technologie. Donc, ce que vous voulez faire est de taper le texte, puis vous voulez revenir au flux Web. Donc ce qu'on va faire, c'est qu'on va aller de l'avant et juste changer la couleur de ce blanc. Et c'est la couleur de la typographie. Et maintenant ça devrait marcher. Donc on va aller de l'avant et dire « Enfants, KBS et travaille ». C' est que dans l'e-mail, j'ai raison et pas tout à fait sûr de ce que ce statut et ajoutons dans un message, Je vais juste dire bonjour maintenant si vous voyez ici, le problème ici est que ce texte se sent son genre de partir d'ici et ce que voulons faire, c'est que nous allons aller de l'avant et utiliser un nouveau composant qui est la zone de texte enroulée, non ? On va prendre ça et on l'amène ici. Et je pense que c'est une bien meilleure représentation. Et ici, nous pouvons voir à un texte réservé et nous pouvons dire qu'il est nécessaire. Et nous pouvons supprimer ce champ de texte. Et pour cela, je vais juste dire, Ah, Ah, champ de texte et donner à cela une hauteur de 100 pixels classe de dicamba rituel que nous avons ajouté. Et ça devrait être bien. Et le texte de l'espace réservé aller de l'avant et le leader que nous n'avons pas besoin de texte d'espace réservé si rapidement. Allons de l'avant et ajoutons quelques informations. Je vais juste dire que même je vais dire abc à Gmail dot com ? Et je veux dire bonjour est le message. Et quand je vais de l'avant et appuyez sur que commencer, vous considérez qu'il dit essayer le formulaire sur votre côté publié. Alors je l'ai fait. J' ai oublié de mentionner que Allons de l'avant et publions ceci dans les domaines sélectionnés et son aller avant et prévisualiser ce droit. Allons vite pour le sujet. va dire des trucs aléatoires ABC au repas et on peut dire bonjour, non ? Alors maintenant, allons de l'avant et commencer à contenir dit soumission. Et ça dit, merci. Votre soumission a été reçue par Bean. ce moment, il y a une autre chose. Quelques choses que nous pouvons faire est que nous pouvons aller sélectionner le bloc de formulaire et nous allons cliquer sur. Donc, quand vous cliquez sur l'icône d'engrenage, nous obtenons trois états, nous sommes devenus normaux. Nous obtenons du succès et nous obtenons un meilleur clic sur le succès et nous pouvons en quelque sorte personnaliser l'apparence de toute cette chose. Donc, par exemple, nous pouvons ajouter une nouvelle classe et appeler ce succès et ce que je voudrais faire avec les yeux que je veux en quelque sorte ajouter une couleur verte à l'arrière-plan. Donc, il ressemble à ceci et même le texte que je peux dire texte de succès. Et on pourrait aller de l'avant et faire ça, tu sais, comme, tu sais, 18 correctifs et tu sais, audacieux et que tu peux dire ce que tu veux et même changer la couleur pour ça comme quelque chose comme ça devrait fonctionner maintenant. Nous pouvons aussi aller de l'avant et aller à l'autoroute et l'autoroute ressemble à ceci . Donc, ici encore, vous pouvez aller de l'avant et ajouter la classe personnalisée comme vous le souhaitez. Peut-être qu'on pourrait aller de l'avant et faire ça. Sélectionnez le message de l'éditeur. Et disons qu'on est comme une sorte de couleur rouge foncé. Très bien, quelque chose comme ça. Et nous pouvons définir le texte et changer la couleur de ceci en blanc. Donc quelque chose comme ça maintenant vous pouvez revenir à l'état normal. Et c'est à peu près à quoi ça ressemble. Donc, pour cette vidéo dans la prochaine vidéo, on va aller de l'avant et faire en sorte que ça soit réactif. Donc c'est vous dans la prochaine vidéo. 34. Rendre la section des formulaires réactives: à droite. Donc, dans cette vidéo, nous devons aller de l'avant et rendre ce formulaire réactif, sûrement super simple. Alors commençons. Alors allez à la vue de la tablette, et c'est ce qu'on a. Et, ouais, alors commencez. Évidemment, en réduisant la taille d'ici. Donc je vais mettre ça à 60 ou 80 sur le top 80 en bas, 40 sur la gauche et 40 sur la droite. Je pense que cela devrait être correct pour la vue de la tablette. Je pense que c'est le plus petit, et à mesure que nous augmentons, je pense qu'ils devraient être très bien, je suppose, à mon avis. Allons donc dans le paysage. Et c'est là que nous pouvons. Je veux changer des choses. Tout d'abord, nous allons prêts c'est à 64 sur le top 64 sur le bas 20 sur la gauche et tourner sur la droite. Maintenant, je veux personnellement en faire une seule colonne. Plus grand. Je vais aller de l'avant et enlever la colonne pour qu'on ait tout en une seule goutte. On va avoir un écart ? 48 picks est pour la rose pour que vous savez, nous avons une bonne distance et je pense que cela semble assez bien déjà. Toujours regarder un portrait mobile. Et, euh, je pense que ça a l'air super. Rien de trop à craindre. C' est à peu près tout pour cette vidéo dans le prochain avenir. Quand vous allez de l'avant et concevez, construisez le pied, donc c'est vous les gars dans la prochaine vidéo. 35. Créer le pied de: C' est vrai, les gars. Donc, dans cette vidéo, on va aller de l'avant et construire le pied de page. Maintenant, ce n'est pas la fin du cours, parce que vous allez créer beaucoup d'interactions amusantes et rendre ce site très animé. Donc c'est la dernière partie où nous allons construire des choses et probablement dans les prochains va vraiment aller de l'avant et ajouter des interactions et des animations et rendre le site plus amusant. Alors, comment structurer ça ? Commençons par les bases. Évidemment, nous allons avoir une section, et dans cette section nous allons avoir un pied de page et il y aura un rappeur qui sera à nouveau notre rappeur par défaut. Et l'autre chose qui n'est pas ici, c'est que si vous activez les bonnes notes, cela a été structuré d'une certaine manière. Droit ? Donc nous avons 123456789 10 11 12 Nous avons 12 colonnes maintenant. Cinq de ces colonnes prennent de la place pour, vous savez, les liens de navigation et le reste est pour le nom Et vous savez, les icônes et certains textiles ici en ce moment, nous pourrions aller de l'avant et construire cette 12 colonne. Super. Très bien, ce qui est totalement possible. Ou ce que nous pouvons faire, c'est que vous pouvez avoir deux colonnes, mais changer le ratio si c'est juste donc nous avons 12 et cinq par 12 est autour de 40% ? C' est 41.6, mais c'est comme 40%. Donc, nous pouvons dire que cela peut prendre jusqu'à 46 40% et ce kit peut prendre jusqu'à 60%. Il y a donc deux façons de le faire. Soit utiliser 12 colonnes ou utiliser deux colonnes et lui donner un rapport différent, est-ce pas ? Alors allons de l'avant et construisons notre flux de travail intégré. Donc je vais aller sur un flotteur Web et revenons en arrière. Alors disons ça à 14. 41e, d'accord ? Et choisissons Oussama exigeant, en créant une nouvelle section appelée cette section, et je vais aller de l'avant et appeler ça fota. Ok, maintenant, l'autre chose à noter, c'est que je suis allé de l'avant et vu ça une hauteur fixe ou 422 picks , c'est bon, donc je vais aller chercher un serrage fixe de 422 picks, c'est bon. Et nous voulons aussi un rembourrage sur le dessus et le bas. Donc c'est 80 sur le dessus. La même chose. Ce n'est pas 20 ans, c'est 80 sur le dessus. Il est encore 80 sur le fond. 72 à gauche, 72 à droite. En outre, la couleur est différente. La couleur de fond est, euh,vous savez que c'est une euh, couleur violette de niveau 1 que nous avons utilisé. Et maintenant on va aller de l'avant et créer un rappeur pour les préservatifs intérieurs. Donc, vous créez un bloc. Quelqu' un appelle ce rappeur, il y aura notre rappeur régulier, pas vrai ? Ça a l'air fantastique. Et maintenant on va aller de l'avant et transformer ça en grille, non ? Quelqu' un crée une nouvelle classe et appelle cette photo. Bon, donc dans le pied, d' accord. Je vais aller de l'avant et en faire une carotte, et on veut évidemment juste Wonder Off Deux colonnes et se demander et l'espacement des colonnes sera de 24. Maintenant, tu entends ça ? Nous avons quelque chose appelé fr, qui est fondamentalement fraction. Ce que je peux faire, c'est que je peux changer cela de 0.1 fr et dit ceci à 0.4 effort. Très bien, Et quand je dis zéro point pour cela signifie que c'est un f r et 0,4. Mais je veux en quelque sorte que ce soit 0.6 fr afin que ce soit là un point pour un loin à la fin, F r signifie fraction, et à la fin, nous voulons que tout soit un. Donc 0.6 plus 0.4 est un. Donc, en gros, nous le divisons dans le rapport 40 60. D' accord ? Pourrait faire. Maintenant, allons de l'avant et créons un bloc, accord ? Et on va juste appeler ce rappeur normal de Brock normal. Et là, nous allons commencer par apporter le logo que nous avions. Donc je vais attraper le logo sur ce SVG local. Maintenant, nous voulons que ce logo soit à l'intérieur d'un bloc de liens, parce que quand je clique dessus, je veux en quelque sorte naviguer vers le haut de la hauteur. Donc je vais appuyer sur le contrôle, manger et créer un bloc. Désolé. Bloc de lien et je vais mettre cette image à l'intérieur du bloc de lien. D' accord ? Et je veux sélectionner le bloc de liens, et je vais appeler ce logo photo. D' accord ? Maintenant, voyons la taille de ceci dans la figure MMA, il fait environ 40 pixels de haut. Donc je vais mettre, hum, hum, la hauteur de l'image faire 40 picks, c'est bon. Ça a l'air plutôt bien. On a aussi ces icônes en bas, donc je vais créer un nouveau bloc, accord ? Et il y en aura pour l'appeler normal, Rapid. Et ça va être pour les icônes. Alors allons de l'avant et attrapons les icônes. Nous avons donc à Witter. On a LinkedIn et on a un dribble. Allons de l'avant et faisons dribble. Voilà, tu y vas. Maintenant, allons-y. Et rapidement, je vais appeler ça des icônes sociales. Maintenant, il y a un espacement par ici, qui est autour sont en train de manger, qui est sur 16 photos. Donc, je vais aller ajouter une marge de 16 pixels, et j'étais dans la même classe aux deux autres aussi bien pour appeler ces icônes sociales et aller avant et sélectionner n'est pas appelé icônes sociales. Bon, maintenant, maintenant, par ici, nous avons aussi un peu d'espacement du bas, qui est sur 32 pixels du logo. Je vais donc sélectionner le bloc de liens, qui est le logo de la photo et sur une marge inférieure des pixels Reto. Droit ? Et ça a l'air assez bien. Bon, maintenant nous allons ajouter ce texte aussi, donc je vais créer d'abord en créant un nouveau bloc de texte. Donc je vais créer un nouveau bloc de texte, et ici nous allons juste copier cette information, et ensuite nous allons aller de l'avant et la baser et entendre ce que je vais faire, c'est des paragraphes de 16 pixels . Je vais dire le paragraphe 16 pixels, et nous voulons que ce soit la couleur, pour être comme le raisin, et cela ressemble à peu près à ça. D' accord. Une autre chose est que nous pourrions voir que ces deux sections sont forcées au sommet, et ces deux sont, heureusement, en bas. Donc, nous allons utiliser la propriété flex pour un peu espacé uniformément demain. Donc, évidemment vouloir sélectionner l'élément parent, qui est le rappeur normal. Et maintenant, je veux lui donner une classe flexible. Donc, si je dis flex, vous pourriez voir que nous avons flex vertical haut gauche. C' est la seule chose que nous ayons fait. Mais on va en utiliser un autre. On va en utiliser un autre. Quelqu' un a appelé ce flex vertical génial. Et je vais dire à gauche et je vais dire l'espace entre, non ? Qu' est-ce que tout ça veut dire ? Donc je vais commencer par aller de l'avant et changer ça en flex box, ok ? Et nous voulons que la direction soit verticale, d' accord ? Et évidemment, nous voulons que l'alignement vers la gauche sur la justification soit l'espace entre, ce qui signifie qu'il va dans l'espace. Chacun des éléments, vous savez, vers le bord de la peau va le pousser au bord de l'écran. Maintenant, le fait est nous ne voulons pas que ces icônes soient aussi poussées. Donc on a une sorte de club ces deux-là. Donc un autre club, ces deux-là, je vais créer un nouveau bloc de Dev, accord ? Et il y aura unrappeur simple et normal, rappeur simple et normal, et on va prendre Regardons la navigation pour mieux comprendre ça. Donc, vous avez un pied, qui est une section, et puis nous avons un rappeur normal, et ensuite nous avons à l'intérieur que nous avons le rappeur gauche, qui est le rappeur normal, et qui a l'espace entre propriété flex et vers le bas contre. Nous avons donc le logo de la photo. Maintenant, puisque ce rappeur normal sieste a un flex entre la propriété, il va fléchir les enfants immédiats et les enfants immédiats que nous voulons est le logo alimentaire A  ? Très bien, sur les icônes des médias sociaux dans un et paragraphe pour être le deuxième enfant. Donc, nous sommes normaux. Rappeur. Le immédiatement aux enfants est le rapide normal ici. qui a ces deux-là. Vous pouvez voir l'un sur l'autre L'un est ceci. Et maintenant ce qui se passe, c'est que depuis ces deux autres enfants médias, il pousse ces deux enfants immédiats vers le bord du conteneur. Droit ? C' est à peu près ce que nous voulons. Super. Donc un autre ceci est fait. Nous voulons également nous assurer que ces icônes sont cliquables. Donc ce qu'on doit faire à nouveau, c'est qu'on doit ajouter un bloc de liens, accord ? Et on va mettre ces icônes dans le bloc de liens. Droit ? Hum, et créons un nouveau bloc de liens. Mettons cette icône dans le bloc de liens et nous avons besoin d'un autre bloc de liens. Et on met ça, euh, Linda Nikon à l'intérieur, et on peut sélectionner chacun de ces blocs de liens et donner une classe, on peut dire bloc de liens sociaux. Et pour cela, nous pouvons dire que le lien social bloque les efforts. En outre, nous pouvons dire bloc de lien social juste pour nous assurer que nous avons un nom pour tout. Ok, plutôt bien. Donc maintenant tout ce que vous avez à faire est si vous ne lui donnez pas de lien, vous pouvez simplement cliquer sur les paramètres de l'élément, et vous pouvez ajouter le lien après que vous êtes seul ici. Bon, donc pour le prochain, on , a deux éléments maintenant. La précieuse instruction va aller 50 % d'espace pour ça et 50 % d'espace pour ça. Ok, maintenant, si vous regardez le lien, vous pouvez voir que ce lien prend tout cet espace. Et ce qui se passe, c'est que lorsque je survolais cette zone, je voudrais que le lien soit actif aussi. Je ne veux pas qu'il soit actif quand je l'ai sur le texte. Je ne veux pas qu'il soit actif. Et j'ai plané sur toute cette section. Droit. Donc, ce que nous pouvons faire est que nous pouvons créer plusieurs blocs de liens et mettre le texte à l'intérieur. Droit ? Alors allons-y et faisons-le. Ils vont commencer par créer un nouveau bloc, ce qui sera la bonne section. Et je vais dire Rapid normal, parce que c'est un cours normal que nous donnons. Et à l'intérieur, je vais créer un bloc de liens. D' accord ? Et ça va être un bloc de lien photo. D' accord ? Et qu'est-ce qui va faire, c'est que je vais commencer par ajouter un lien texte. Tout d'abord, quelqu'un appuie sur le contrôle E et ajoute un lien texte. Oh, on peut juste dire un bloc de texte dans cette affaire parce que, euh, ok, et là ce que je vais faire, c'est que je vais appeler ce lien photo, ok ? Ceci est un pied un lien, donc nous pouvons sélectionner afin que nous puissions voir que nous avons un rembourrage en haut et en bas, qui est d'environ huit pixels pour que nous puissions aller et régler le remplissage de ceci à huit pixels en haut sur huit pixels en bas . Je pense qu'on va aller de l'avant et en faire un 12. Allons faire un 16 sur le haut et 16 sur le bas 16 sur le haut et 16 sur le bas. Ça a l'air plutôt bien. Et aussi pour le bloc de lien photo ce que nous pouvons faire est que nous pouvons supprimer cette déclaration ou ici pour qu'il ne ressemble pas à ceci. Et aussi pour le pied un lien. Allons de l'avant et voyons ce réglage. Donc c'est blanc. 16 pixels, prêt pour le paragraphe, Simple. Donc, nous pouvons aller de l'avant et changer la taille de la police de ce pour être 16 sur, nous pouvons aller de l'avant et faire cela pour être blanc, droite Ils vont, allons de l'avant et juste faire quatre copies pour que nous puissions sélectionner le pied un lien pour que nous puissions dire copier Coller basé et basé, n'est-ce pas ? Alors, allons de l'avant et changeons ça. On va voir la maison. Il va y en avoir à propos de ça va marcher. Et ensuite, nous avons le processus. Super. Donc, si vous regardez la structure, ce que nous avons est de sorte que vous avez un rappeur normal et à l'intérieur que nous avons ces quatre liens moment, le problème ici est que nous voulons définir. Donc ce que je vais faire, c'est que je vais aller de l'avant et sélectionner ce bloc de lien et dupliqué maintenant . C' est ce qu'on a maintenant pour moi. Je ne veux pas être le dernier Link Block quelqu'un Allez de l'avant et supprimez cela pour l'instant. Nous avons seulement besoin de bloc de magasin et de la liste de lecture. Je vais dire magasin que je vais voir en blawg. Je vais voir la liste de lecture. Ok, maintenant on voit quelques problèmes, non ? Alors allons-y et réparons ça. La première chose, c'est que nous avons ce bloc photo, qui a, vous savez, vous savez, quatre liens qu'on va faire, c'est que je vais aller de l'avant et lui donner un peu de 50 %, non ? qui veut dire que ça va prendre 50% de l'espace. Et la même chose va arriver ici, c'est que ça va prendre 50% de réduction sur l'espace, qui est exactement ce qu'on veut. Maintenant, le truc c'est que c'est un peu au centre, accord ? Mais nous voulons que ce soit au sommet. Donc, ce que je peux faire est que je peux ajouter une classe de virgules et nous pouvons voir des sélections. Bon, maintenant nous avons cette clause commune qui dit flex vertical gauche vers le haut, mais nous voulons une nouvelle classe de combat parce que flex vertical va les mettre l'un en dessous de l' autre. On a besoin qu'ils soient l'un à côté de l'autre, non ? Je vais en commencer un nouveau et appeler ce flex horizontal d'accord ? Et souligné. On veut que Toby quitte et qu'on veut être top, non ? Alors allez-y et fléchissez ça. D' accord ? Et puis on va dire que Flex horizontal va dire en ligne haut et va dire justifier gauche, droite, c'est ce qu'on veut. Et maintenant, c'est à peu près fait. Donc, ce que j'essaie de dire, c'est que si je vais à l'aperçu et si je passe la souris sur l'une de ces zones, , vous pouvez voir que même si je n'arrive pas sur le texte parce que toute cette section est une zone de lien, Je suis capable d'activer ça. Ok, maintenant, une chose rapide que nous pouvons faire est de pouvoir ajouter un état de vol stationnaire à cela. Donc, nous allons réellement sélectionner le pied un lien. D' accord ? Allons dans un état de vol stationnaire et dans la prévision. Ce que je vais faire, c'est que je vais aller de l'avant, faire la couleur et changer qui font cette couleur cyan que nous avons, non ? Et on va aller de l'avant et je vais revenir au non-Etat et aller rapidement aux transitions, régler ça à 3 50 et dans l'assouplissement, je vais aller de l'avant et régler ça pour être facile ou tribunal. Et aussi on va aller à l'opacité. Onda, change cette propriété. La couleur de la police, n' est-ce pas ? Et maintenant, il devrait regarder ce que nous étions parfaitement. Donc, quand je survole, vous pouvez voir que ceux-ci ne peuvent pas être mis en évidence. Droit ? Et, euh, c'est vraiment cool, non ? Donc nous avons maintenant quelque chose qui ressemble à ça. Donc, dans la prochaine vidéo, nous allons aller de l'avant et rendre cela réactif. Je vous vois dans la prochaine vidéo. 36. Rendre la page réactive: à droite. Donc, dans cette vidéo, nous allons aller de l'avant et rendre ce pied réactif pour d'autres points de rupture. Alors commençons. Va au point de rupture de la tablette en premier, et c'est ce que nous avons. Maintenant, cela semble assez OK, je dirais, mais peut-être que nous pourrions aller de l'avant et nous assurer que nos modèles réguliers des deux côtés sont les mêmes. Euh, quatre-vingt. Très bien pour cela devrait être assez bon. Je pense que ce que je voudrais faire est, dans ce cas, le rappeur qu'on avait, genre, une grille de 60 40. Je pense que ce que je voudrais faire est, dans ce cas, dans ce cas, le rappeur qu'on avait, genre, Puis-je faire cela un fr et un fr ou désolé, un loin et l'Europe ou six fr pour que nous obtenions un peu d'espacement comme celui-ci. Thea, une autre chose que nous pourrions faire est probablement dit ça à quelqu'un de loin. Donc on a en quelque sorte mis ça en 1/2. Droit ? Si vous allez de l'avant et que cela s'adapte aux autres gros clients, nous voyons que nous avons quelque chose comme ça, nous allons très bien. Je suppose que selon la façon dont nous voulons que cela soit, vous pourriez aller de l'avant et le structurer. Tu pourrais le garder pareil. Un rapport de 60 40 lui-même toucher travail. Allez au point de paysage mobile ici. Nous voulons faire quelque chose de différent. Nous allons créer quelque chose qui ressemble au point de rupture mobile que nous avons créé, qui ressemble à ceci est parce que la section supérieure et ensuite nous avons des liens, et puis nous avons cette information. Alors, allons-y et disons ça ici, ou ce que nous pouvons faire est censé tomber. Allons de l'avant et supprimons le rappeur et en faisons une grille de colonne unique. D' accord. Et c'est ce que nous obtenons. Et maintenant, l'ici, si vous regardez. Mais aussi, nous voulons nous assurer que l'est pas de hauteur fixe parce que nous avons donné une hauteur quelque part Teoh le je pense que nous le donnons au pied, je crois. Je vais enlever cette hauteur et dire que Do auto. D' accord, donc on se porte bien sur l'espace maintenant. Le problème ici, c'est que ces trois clubs sont ensemble, ce qui signifie probablement que nous voulons que l'ordre soit différent. Droit ? Alors comment on va arranger ça ? Alors que nous devons le réparer est à travers la structure hors des éléments. Donc, si vous regardez la navigation ici, nous avons le rappeur normal, ce qui est le rapide normal. Et puis nous avons ceci, qui va être pour tous les liens en ce moment, ici, Ces trois sont ensemble, mais cela doit être un élément séparé. Droit ? Donc, ce que nous pouvons faire, c'est que nous pouvons revenir au point de rupture du bureau, parce que nous voulons nous assurer que nous apporterons les changements là-bas. Ici, nous avons cette enveloppe normale en ce moment. Incident hors de ça. Il est hors de mettre cet élément dans le rappeur normal. On peut le mettre dehors, non ? Et quand on le met dehors, je veux dire, laisse-moi aller de l'avant et faire ça correctement si je prends le Romero normal ici. Donc, nous avons le terrain fertile. On a un texto. Je vais faire sortir ça, d' accord ? Et je vais mettre ça dehors aussi. D' accord ? Et maintenant, ce qui s'est passé, c'est qu'on a créé ce grade 22 par deux colonnes. Maintenant. Ça a l'air parfait, non ? Ça a l'air bien. Donc, vous revenez au point de rupture de tablette, vous pouvez voir qu'il semble bien. On a un point de rupture de paysage, accord. Et maintenant on voit qu'on a ce qu'on voulait, non ? Parce que la chose est, c'est un élément. Tout ça est un autre élément. Et c'est un autre élément, non ? C' est ce qu'on devait faire. Et quand vous allez à la réactivité, quand vous allez quand vous apportez des modifications, cette réactivité, ils n'affectent pas la structure hors de la navigation. La structure de navigation reste la même. Et ce quelque chose que tu gardais mon Maintenant, regardons l'espacement. Nous avons donc un peu d'espacement sur les sujets qui sont 40 pixels en haut et 40 pixels en bas. Donc je vais le faire avec l'aide hors de la colonne sont les Roberts. Je vais mettre ça à 40 et on va avoir quelque chose qui ressemble à ça. D' accord, ça a l'air bien dessus. Évidemment, nous voulons changer cela. Fais 20 à gauche, entraînement à droite, hum, 64. Ou on peut dire 48 en haut et tous les 30 64 en haut. J' ai oublié ce qu'on utilisait. Oui, on utilisait 64 64 en haut et 64 en bas. Et cela semble à peu près être à peu près la même chose sur le point de rupture mobile aussi bien. Une autre chose que nous pourrions faire est en fait d'aller de l'avant et d'ajouter tous ces liens en une seule ligne. C' est une préférence personnelle au baiser, si vous voyez ou entendez ici, nous ne l'avons pas fait. Mais au cas où vous vouliez tout avoir l'un en dessous de l'autre, tout ce que vous avez à faire c'est que nous n'avons que cette classe supplémentaire, je peux aller de l'avant et dire le tabouret vertical. Tu sais, on devrait avoir quelque chose qui ressemble à ça, et ça va ressembler à peu près à tous les autres points de rupture parce qu'on fait les changements seulement pour digérer le grand point de rupture du portrait mobile. Mais je vais juste le garder. En ce qui concerne la conception et le contrôle Z, c'est qu'on va avoir quelque chose qui ressemble à ça, non ? Donc c'est à peu près tout pour ça, tu sais ? Et je vous vois dans la prochaine vidéo 37. Créer une animation de défilement de section: Très bien, donc nous sommes allés de l'avant et avons construit le site entier, et ça a l'air phénoménal. Et ça a l'air génial. On a des interactions cool ici et là, et on va rendre ça encore plus amusant et interactif, et il va y avoir vraiment super. Donc, comme vous pouvez le voir, ça a l'air fantastique. Vous pouvez en fait, vous savez, publier ceci dans le domaine sélectionné. Et, vous savez, vous pouvez même le voir sur votre appareil mobile. Ou si vous avez un iPad ou une tablette, vous pouvez le voir et le vérifier, à quoi il ressemble, parce que c'est un vrai site Web. Très bien, c'est un site Web fantastique. Maintenant. Ce qu'on va faire, c'est qu'on va aller de l'avant et commencer à ajouter des interactions et des animations pour le rendre amusant. La première chose à faire est d'ajouter des liens, faire ces liens afin qu'ils fassent défiler vers une section particulière du site Web. Qu' est-ce que je veux dire par là ? Donc on va faire, c'est qu'on a trois liens ou ici, non ? Nous étions de l'expérience. On a du travail, et ensuite on a de la photographie. Ce qui va se passer, c'est quand je clique sur l'expérience, à droite la page va faire défiler cette section, accord ? Et je vais sélectionner cette section d'opportunité que nous avons, accord, et je vais venir ici et ici. J' ai quelque chose qui s'appelle l' I.D. I.D. . C' est comme un consensus pour les liens de page. Je suis juste d'aller de l'avant et d'appeler ce E X p pour l'expérience, ok ? Et je veux entrer dans le lien de navigation de l'expérience, et ici nous allons choisir celui qui dit grande section, et je vais choisir une section payante et je vais choisir E XP. Donc, ce qui va se passer, c'est quand je vais à l'aperçu plus et quand je tape sur l'opportunité, vous pouvez voir que la page écoles à la section opportune. Droit ? Et c'est et c'est plutôt cool. Faisons la même chose pour le travail et la photographie. Donc pour le travail, je vais aller ici et choisir la section des projets, et je vais juste appeler ça au travail, ok ? Et je vais venir ici à la section de la photographie et sélectionner cette section et appeler cette photo juste sortie de la photo de la fac. ce moment. Revenons en arrière et nous allons sélectionner le lien de travail et venir à la section de la page, et ici, dans la section payante, je vais choisir le travail et pour la photographie. Je vais aller de l'avant et choisir la photographie pour le contact. Vous pourriez avoir une idée d'email, un numéro de téléphone qui les prend, ou vous pourriez les faire bousiller tout le chemin. Faites la section Parlons affaires. Alors allons de l'avant et faisons cela dans la section de formulaire. Allons appeler ce contact d'accord, et nous pouvons revenir en arrière et nous pouvons aller à la section contact, et ici nous pouvons cliquer sur la section payante et vous pouvez enregistrer le contact Paige et ensuite nous allons à droite. Donc, si vous allez de l'avant et prévisualisez cela, vous pouvez voir que lorsque je clique sur l'opportunité, il peut aller à la section appropriée. Lorsque je clique sur le travail, il est proche de la section de travail sur. Quand je clique sur Fort of Photography, il est proche de la section photographie à moins que ce soit assez cool et génial. Vous pouvez également aller de l'avant et faire la même chose pour ces liens inférieurs aussi bien. Donc, quand je clique sur la page d'accueil, cela va m'emmener à l'écran d'accueil pour le sujet du processus de travail de section à propos. Mais je vais le laisser tel quel, parce que quand tu construiras ça, tu pourrais avoir tes propres pages. Vous pourriez avoir vos propres liens différents et sections de votre site Web, donc je veux laisser que comme IHS Maintenant, l'autre chose est que nous avons ce logo sur ce Évidemment, Je veux orteil re lord toe la page d'accueil. Donc, je vais aller et cliquer sur un lien sont donc je vais cliquer sur les pages et je vais dire Choisir page et je vais choisir la maison. Donc, chaque fois que je clique sur cela, vous pouvez voir qu'il recharge sorte qu'il rafraîchit le navigateur et vous ramène à la page d'accueil . Droit ? C' est ce qu'on veut, non ? C' est donc beaucoup sur l'ajout de la page de section comme des sections, liens crédules. Dans la vidéo suivante, nous allons sortir, aller de l'avant et faire quelques éléments. Animateur. Donc c'est vous les gars dans la prochaine vidéo 38. Comment utiliser créer et utiliser des Symbols: D' accord, les gars, avant d'entrer dans les interactions, je veux juste expliquer un nouveau concept rapidement. Ça va prendre quelques minutes et il s'agit de créer des composants. Maintenant, par exemple, disons que vous avez plusieurs pages sur un site Web et que vous avez, genre, 10 pages différentes sur votre site Web. Et tout d'abord, la façon d'ajouter une page est d'aller à la page ici et vous pouvez cliquer sur la page Créer une nouvelle page et cela va créer toutes les pages que vous avez. Disons que vous avez cette barre de navigation et même, vous savez, le pied de page en bas, vous savez, ce qui sera le même sur tout le site Web. Mais au cas où vous décidiez de faire un changement particulier, le problème est que vous devrez aller de l'avant et faire ce changement sur toutes les 10 autres pages. Et c'est vraiment un gros tracas. Et c'est un gros problème. Alors où Flo a quelque chose appelé en tant que composants et nous pouvons aller de l'avant et créer quelque chose en tant que composant, je vais entrer dans comme ça maintenant, mais oh, ici et je vais aller de l'avant et faire un clic droit et je vais dire créer en ce moment, simple et composant sont à peu près des termes qui sont interchangeables. Mais je vais juste dire créer un symbole et ça va faire est qu'il va nous dire à Neymar similaire. On va appeler ce bar Na'vi Gatien, et je vais aller de l'avant et cliquer sur Créer un symbole. Donc maintenant, vous pouvez voir que nous sommes à l'intérieur du composant plus où nous pouvons aller de l'avant et apporter les changements que nous voulons. Donc je vais aller de l'avant et cliquer sur Terminé, et ça va créer ça dans la sorte de barre de couleur verte, qui signifie que c'est un symbole et je vais faire la même chose ici aussi. Je vais aller de l'avant et je vais aller de l'avant et faire un clic droit, et ça dira, créer un symbole et on appellera ce pied et tu sais qu'on a un symbole. Maintenant, tous vos symboles sont accessibles dans le , panneau publicitaire, où nous avons des éléments, mises en page, et ensuite nous avons des symboles. C' est là que tous vos symboles sortent. Et il vous montre également le nombre d'instances qu'un symbole particulier a été utilisé, donc c'est assez bon. Je vais honnêtement, je ne peux pas le faire maintenant. Ce n'est pas non plus une sorte de boîte verte. Donc, la prochaine fois que vous créez une nouvelle page, toute votre photo est simplement glisser-déposer ce symbole que vous avez dans la page et vous savez que vous êtes prêt à partir. Donc c'est beaucoup sur les symboles, et je vous verrai dans la prochaine vidéo. 39. Créer une animation de charge: D' accord, les gars. Donc, dans ce être en mesure d'aller de l'avant et d'animer la section héros à quelques animations amusantes vraiment cool . Alors commençons. Et le fait est que c'est super simple à faire. Tout ce qu'ils ont à faire, c'est comprendre la logique du fonctionnement des interactions. Je vais commencer par m'assurer que c'est 14 40 pixels parce que j'aimerais le garder à 14. 40 correctifs. Et ce qu'on va faire maintenant c'est qu'on va commencer par décider comment l'animation veut se produire. La première chose est cette barre de navigation que nous avons je veux aller de l'avant et a échoué cette capacité de 0 % à 100 % de capacité. Et au fait, nous faisons ça quand le Seigneur de la Page. Alors ce qui va se passer quand les Lords de la page, quand les Lords de la page, je veux que la barre de navigation s'estompe de 0 % de capacité à 100 %. Je veux que cette boîte d'image de héros se déplace du côté gauche de l'écran vers le côté droit de l'écran et je veux ce texte qui dit que je suis Robin Williams et nous avons les graphismes espagnols pour se déplacer du côté droit de l'écran vers le côté gauche de ceci. C' est ainsi que nous voulons aller de l'avant et structurer notre animation. Alors commençons maintenant. On pourrait faire beaucoup avec le top de l'interaction, et j'espère que vous aurez la logique juste et sur la façon dont tout fonctionne. Tout d'abord, nous devons déclencher sélecteur savoir ce qui est un article de déclenchement est fondamentalement une action qui déclenche l'animation principale, à droite. Et dans ce cas, nous voulons le chargement de la page de déclenchement Toby. Donc, quand les seigneurs de la page allaient déclencher une sorte d'animation que nous avons avec nous quand payés, commence le chargement. Et quand la page finit l'apprentissage, nous allons maintenant choisir la page d'événement se termine le chargement. Je vais aller de l'avant, sélectionner l'action et dire : Commencez une animation, OK. Et maintenant, nous dépassons déjà l'animation existante que nous avons. Je vais aller de l'avant et cliquer sur l'icône plus, qui va orteil créer une nouvelle animation. Je vais appeler cet âge, Lord Animation. D' accord. Et voici ce que je vais faire, c'est que je vais commencer à définir les éléments. Le 1er 1 va choisir l'élément dans ce cas. Nous voulons prendre la navigation, mais et cliquez sur le plus. Mais ce qui est malheureux, c'est que nous ne pouvons pas ajouter d'animations aux symboles pour le moment. Donc ce que vous auriez à faire, c'est qu'il faudrait double-cliquer pour aller à l'intérieur, puis cliquer sur l'icône plus et ensuite je vais choisir la capacité pour l'ALENA, accord ? Et nous pouvons juste aller de l'avant et cliquer sur le symbole principal terminé de l'édition afin que nous puissions revenir. Revenons donc à notre page, notre animation. Donc, nous avons eu notre capacité maintenant sur les autres interactions. Ce qu'on a fait, c'est qu'on a créé un état, c' est-à-dire l'instant où on est dans ce cas. Nous devons créer deux états. L' un est l'état de départ et l'autre est le huit suivant. Pourquoi devons-nous faire ça ? La raison en est que dans ce cas, puisque mon premier état initial va être 0% opacité, ce knave sont sur l'écran est déjà 100%. Donc, j'ai orteil remplacer cette propriété en voyant le flux web. Écoute, quand j'ai abaissé le site, je veux que ce soit 0% d'opacité quand je commence. Droit ? Donc ce que je vais faire, c'est que je vais sélectionner cette nouvelle capacité, et je regarde l'interrupteur qui dit que c'est réglé comme état initial. Donc, même si sur le concepteur c'est 100% d'opacité quand les armes des seigneurs de page vont supposer que c'était 0% de capacité tout le temps, non ? Gravement. Allez-y et définissez cette capacité à zéro. Maintenant, vous ne pouvez pas voir la modification car la modification n'affecte pas les symboles, mais lorsque nous rechargeons la page, vous pouvez la voir. Ok, donc on va aller de l'avant et fixer l'état initial à zéro. Maintenant, nous allons aller de l'avant et dupliquer ça, ok ? Et ici, nous allons aller de l'avant et a dit la capacité à 100% parce que nous voulions passer de 0% à 100% sur. Nous pouvons aller de l'avant et changer la durée pour dire quelque chose comme trois secondes et aussi changer l'orteil d'assouplissement est notre cour, non ? C' est à peu près ce que nous voulons. Maintenant, si vous allez de l'avant et jouez ça, vous pouvez voir qu'il faut trois secondes pour s'évanouir. Droit. On y va. Maintenant. La prochaine chose est, nous voulons animer la boîte d'image de chauffage. Alors, tristement, il boîte de dégâts. Allons ici aux actions. Cliquez sur l'icône plus et nous voulons choisir Déplacer. OK, maintenant, je pourrais avoir un lien avec ça parce que je veux que ces deux-là commencent même temps, non ? Et la première chose que nous faisons, c'est pour le déménagement. Je vais ajouter la valeur X en ce moment la valeur X essentiellement la position gauche et droite parce que c'est sur l'axe gauche. Maintenant, je ne vais pas utiliser une valeur de pixel parce que le truc est avec la valeur de pixel, ça va sembler bizarre sur différents points de rupture. Parce que si je dis, par exemple, 100 pixels va être 100 photos sur 14 40 picks de pause 400.1920 pixels rapport et les autres grands points, ce qui n'est pas quelque chose que nous voulons. Donc ce que je veux faire, c'est aller de l'avant et mettre la valeur X à 100 % négatif, non ? Donc, quand je dis posit, il s'éloigne à 100% de sa position initiale. Droit ? Donc ça bouge deux fois plus que ça, et on va le régler à 100% pour qu'il soit exactement à l'extérieur du port de vue hors de l'écran. Et j'allais de l'avant et dupliquais cette fois un duplicata. Et je vais fusionner ça avec ça. Très bien, parce que nous voulions que les NAB sont les et la boîte d'image pour commencer en même temps. Et vous le voulez aussi et en même temps ce que tout le monde a besoin d'être animé en même temps. Maintenant, pour la boîte d'images du héros, ce qui va se passer, c'est que je vais revenir en arrière et définir ça comme personne nulle parce que nous voulons soit l'état par défaut. Ok, donc zéro personne et la durée, je vais probablement la mettre à 1,5. D' accord. Et aussi changer d'assouplissement pour soulager la cour. Bon, maintenant, jetons un coup d'oeil. Droit. Ça a l'air cool, non ? Ça a l'air fantastique. Allons-y et rejouons ça. Fantastique. Ça a l'air bien. Maintenant, l'autre chose que je veux faire, c'est que je vais aller de l'avant et j'ai également ajouté de la capacité. J' aurais pu vouloir s'estomper et bouger en même temps. Donc, sur moniteur va commencer par sélectionner le numéro un clic sur l'icône plus et je vais choisir la capacité. Ok, maintenant, je vais fusionner ça avec ça parce que nous voulons que le mouvement et la capacité commencent même temps. Et évidemment, on va nous définir l'état initial, et je vais lire utiliser l'opacité jusqu'à 0 %. D' accord ? Et je vais aller de l'avant et dupliquer ça. Ça va être beaucoup avec ça, et ça va être l'état final, mais je vais dire opacité, ça va à 100% ? Et aussi la durée. Cette fois, je vais revenir à une. Je ne veux pas que ce soit 11,5 et l'assouplissement sera facile à la cour, comme d'habitude. Alors maintenant, jouons vite ça et jetons un coup d'oeil. Droit. Donc ça a l'air super. Pourrait-il s'estomper et bouger ? Et le même jour, on va faire la même chose pour eux aussi. Rapidement. Kilomètres, allez-y et dit cela à 14. 40. Maintenant, on va aller de l'avant et changer ça aussi. Alors maintenant tout est déjà défini, est-ce pas ? Mais la seule chose, c'est que nous devons changer le mouvement. Donc, plutôt que de créer votre atout. Je vais aller de l'avant et sélectionner ces deux éléments, qui est la boîte d'image du héros. Je vais de l'avant et je dupliquerai ça, et je vais le fusionner avec ça, ok ? Et la seule chose qu'on doit faire, c'est aller de l'avant et à partir de 100 % je vais faire le résultat positif à 100 % et je vais aller de l'avant, non ? Cliquez sur Cible et modifiez l'en-tête. D' accord. Maintenant, le fait est que ça a bougé exactement à 100%, mais on voulait bouger un peu plus, ce qui est 110 plus. Ok, donc c'est un peu dehors, ok ? Et aussi, on va aller de l'avant et changer l'opacité. La cible a bien construit ? Cliquez sur Changer, tigre. Maintenant, c'est en dehors de mes ports de vue. Je ne suis pas en mesure de le sélectionner, donc je peux aller dans le navigateur et cliquer sur le titre. Et ça va changer ça aussi. Super. Parfait. Maintenant, je vais les sélectionner pour faire un clic droit en double et le fusionner avec cela. Et toutes les propriétés sont les mêmes. La seule chose après faire est d'aller de l'avant et de changer les cibles ou de changer de clic droit. Cible en-tête clic droit, changement, cible et lourd. Ok, alors maintenant, allons de l'avant et croyons ça, n' est-ce pas ? Donc c'est ce qu'on obtient, non ? Ça a l'air cool maintenant. Nous voulons aussi que ce soit aussi animateur. Donc la seule chose que nous perdons, je vais aller de l'avant et les sélectionner pour essayer de cliquer sur Dupliquer combiné. Ceci et les propriétés sont à nouveau les mêmes. La seule chose est, l'est de changer l'élément quelqu'un clic droit, changer la cible et le changer au paragraphe 18. Cliquez avec le bouton droit sur Modifier la cible Maintenant, le paragraphe 18 a disparu parce qu'il est en dehors de l'écran. Je vais aller de l'avant et cliquer ici, accord ? C' est la même chose ici. Rubrique. Cliquez avec le bouton droit sur Dupliquer. Apportez cela et faites un clic droit sur Changer de cible. Paragraphe 18. Cliquez avec le bouton droit de la souris Modifier le paragraphe 80 ce moment, jouons ça. ce moment, il est un peu en retard parce que c'est parce que hors du naufrage et de l' Internet Mais si vous allez de l'avant et publiez ceci et le visualisez ici, vous pouvez voir la différence, et nous allons le faire. Maintenant. Une chose que je veux changer, vous savez, pour le rendre un peu plus amusant, c'est que tout ça s'anime exactement en même temps , pas vrai. Mais prenons un peu de retard. Donc ce que je veux faire, c'est combattre ce cap. D' accord ? Maintenant, nous Il dit qu'il commence par l'action précédente, qui est celle-ci. Mais même si cela commence par l'action précédente, nous voulons un peu de retard. Je vais lui donner un délai de 0,2. D' accord. Et pour le paragraphe. D' accord, je vais lui donner un délai de 0,4. Droit. Donc ça commence par ici. Donc d'ici à là, il y a un retard de 0,4. Et puis ces animations se produisent. Et pour le titre, nous commençons zéro et il y a un délai de 20,2 secondes. Et puis l'animation s'est produite. Donc maintenant, si vous jouez ça, vous voyez que les éléments viennent l'un après l'autre, et c'est vraiment cool. Donc, nous pouvons aller de l'avant et publier ceci à notre présage sélectionné et allons sur le site Web et le contrôle de la presse sont ou commande art de recharger. Et jetons un coup d'oeil à ce que cela a l'air correct. Ça a l'air super lisse. Et Sivarasa, allons-y et rechargeons ça à nouveau. Et ça a l'air phénoménal, non ? Ça a l'air vraiment, vraiment génial. Maintenant, une chose que je veux mentionner est dans ce cas, tous les éléments que nous animateurs ne faisaient que s'animer quand le Seigneur de la Page En ce moment sont les seuls éléments qui sont en train de s'animer. Maintenant, des éléments comme la rubrique 76 pixel et le paragraphe 18 pixel sont utilisés à plusieurs endroits hors du site Web. Donc, nous ne voulons pas qu'ils soient aussi efficaces. Donc, nous voulons faire est de sélectionner tout cela et de s'assurer que votre effet est l' élément sélectionné . Parce que si nous allons de l'avant et, par exemple , des changements à la classe, cela va affecter tous les éléments qui étaient là sur la page qui ont la même classe. Mais ce n'est pas ce que nous voulons. Nous voulons animer uniquement ces éléments sélectionnés. Donc, je vais aller de l'avant et choisir l'élément sélectionné. Assurez-vous que c'est ça, accord, et c'est à peu près tout. Et dans la prochaine vidéo, on va aller de l'avant. Et si vous revenez au designer dit, tout devient normal et ce que nous allons faire est dans la prochaine vidéo, nous allons aller de l'avant et animer cette section. Donc, quand j'ai fait défiler cette section. Nous avons ces, vous savez, ce genre d'animation. Donc c'est vous dans la prochaine vidéo. 40. Animer la section l'expérience: C' est vrai, les gars. D' accord, les gars. Donc, dans cette vidéo, nous allons aller de l'avant et animerons cette section du site Web. Donc, évidemment, je vais commencer par une gâchette. Quel est le déclencheur pour nous ? Nous avons un déclencheur que si je viens ici à l'élément déclencheur, euh, j'ai une option qui dit défiler dans la vue. Donc pour expliquer ça. Donc, quand je fais défiler et que cette section d'expérience arrive en vue, je veux que vous alliez à animer quelque chose, n'est-ce pas ? C' est le déclencheur. Ainsi, lorsque la section Expérience fait défiler l'entrevue, vous voulez animer des éléments, donc nous allons continuer et choisir défilé dans la vue. Maintenant, nous avons deux options lors de l'entrevue de défilement et une a été défoncée de vous, d' accord, donc nous sommes à travers le 1er 1 qui est quand défilé dans la vue. Donc, nous allons cliquer sur démarrer une animation, et nous avons toute notre animation. Lister va créer une toute nouvelle animation, et nous appellerons ce défilement de section d'opportunité. Ok, donc on va faire, c'est que tu veux animer ces trois boîtes, qui est ce bloc d'expérience. Nous voulons qu'ils s'animent, vous savez, de gauche à droite. Comme on l'a fait, mais ça va avoir l'air. Ça va avoir l'air amusant. Donc ce que je vais faire, c'est que je vais aller de l'avant et commencer une animation. Donc nous allons commencer avec le 1er 1 est le mouvement, évidemment. Et nous allons commencer par mettre ça à l'état initial parce que ce n'est pas l' état initial , non ? C' est l'état final. Donc je vais choisir le 1er 1 et dire les nations du samedi ici. Et pour ça, ce que je vais faire, c'est qu'on va utiliser des valeurs de pixels pour ça, non ? Parce que pour moi, je ne veux pas que ça sort de l'écran. Totalement. Parce que je veux que cela s'anime sur la base d'un peu de valeur de pixel, pas quelque chose qui devrait dépendre de l'écran avec. Mais avant de le faire, allons-y et disons ça à 14. 40 et seulement faire, c'est évidemment que nous allons déplacer ça vers la sortie. On va ajouter une valeur négative. Ok, maintenant, qu'est-ce que tu vois ici ? Est-ce que tous les éléments sont en mouvement et la raison est parce que ici les ont été en train d'effectuer la classe en ce moment, devrions-nous utiliser ceci ? ne devrait pas l'être. Voyons voir ça. Mais pour l'instant, je vais aller de l'avant et dit ceci pour sélectionner l'élément. Et je vais aller de l'avant et je vais aller de l'avant, déplacer ça sur le côté. Donc, dites quelque chose comme négatif 70 pixels. D' accord ? D' accord. Et ce qu'on va faire, c'est peut-être que tu pourrais aller de l'avant et dire que peut-être faire ces 100 choix négatifs , c'est tout à fait bien. Allons de l'avant et dupliquons ceci. Et ça va être notre Interstate où nous allons fixer la durée de ça à une seconde. Et ça va être plus facile de quart comme d'habitude. Et la valeur va être zéro, à droite, droite, parce que nous sommes retournés à l'état de l'attention. Ça a l'air bien. Maintenant, nous allons aller de l'avant et la capacité d'animation aussi. Alors allons de l'avant et ajoutons l'opacité. Je vais ajouter l'opacité avec la première. Je vais définir ça pour l'état initial et ils laissent la capacité à zéro, puis le clic droit IQ a changé un duplicata, et nous allons combiner celui-ci avec le deuxième set. Il y aura 100 % et la durée sera d'une seconde et le préréglage sera mangé au tribunal. Droit. Alors maintenant, jetons rapidement un coup d'oeil. Donc je vais revenir au début et on a cette animation. Allons de l'avant et faisons défiler. Droit. Donc quand je fais défiler, on ne voit rien. Droit ? Parce que ce qui se passe est laissez-moi vous montrer Si je joue à nouveau et si je fais défiler un peu plus vite, vous pourriez voir que les animations résultantes, est-ce pas ? Où ? Le truc, c'est que la section qui est là, ça commence juste ici. Comme un peu de parchemin. Ça commence, droite, Et l'animation est déjà commencée. Mais nous ne le voyons pas, parce que par le temps est défiler vers le bas l'animation sur. Alors, comment pouvons-nous nous assurer de voir l'animation ? Donc ce qu'on va faire, c'est qu'on va aller de l'avant, on remonte à la fin . Et ici, nous avons quelque chose de Torres décalé. Droit ? Donc je vais aller de l'avant et a dit le décalage à quelque chose comme 50%. Donc, ce qui signifie que, même si ces sections ont été visibles, qui a défilé dans le port de vue, je veux que l'animation commence après avoir défilé 50% après que l'élément est cruel. dans la vue, par Donc, ce que je veux dire est que maintenant, si nous allons de l'avant, et si nous allons lentement vers le bas en ce moment, vous pouvez voir l'animation se produit réellement. Parce qu'après avoir défilé 50% nous avons pu le voir. Maintenant, nous pourrions aller de l'avant et faire monter ça un peu. On pourrait aller de l'avant et faire ce 75%. D' accord, et voyons à quoi ça ressemble. D' accord, donc on a ça et je vais tout foirer. Et tu y vas, Dave. Oh, on peut voir ça, non ? Si vous voulez le rendre encore plus meilleur, allons-y et rendons cela à 85%. Bon, allons-y et jetons un coup d'oeil maintenant. Voilà, tu y vas. Maintenant, peut-être que si j'ai tant de choses, je vais probablement dire ça à 75%. C' est un numéro que j'aime. Super. Maintenant, l'autre chose est que nous voulons qu'ils soient aussi animés. Donc ce qu'il pourrait faire, Nous pouvons sélectionner le premier à et nous pouvons sélectionner le 1er 1 sur affaiblir dire classe d'effet. Et ça devrait marcher. Droit ? Alors allons de l'avant et jetons un coup d'oeil tout de suite. Mais le problème ici, c'est que je veux que ces derniers aient son propre retard. Droit. Je veux que ça commence un peu après l'autre. Comme si je voulais que ça arrive. Et puis je veux qu'on vienne. Et puis je voulais venir. Ça le rend un peu plus amusant. Donc ce qu'on va faire, c'est qu'on peut utiliser la classe, non ? Parce que tous vont être déclenchés en même temps. Donc je vais aller de l'avant et dire, élément sélectionné, et je vais aller les dupliquer pour dire changer de cible. Ok, je vais combiner ces deux-là et je vais dire changer de cible, et je vais choisir cet ensemble, qui est l'expérience Bloc numéro deux. Droit. Et nous devons choisir le mauvais. Donc, je vais écrire, comme, comme, changer de cible sur DA choisir bloc Experience. le moment encore, Pourle moment encore, nous ne voulons pas que cela affecte la classe. Nous voulons affecter uniquement cet élément sélectionné. Ok, cool. Allons de l'avant et reproduisons ça, d'accord ? Et ces deux-là vont être pour le 3ème 1 qui est son bloc d'expérience, non ? Et encore une fois, nous ne voulons pas que ce soit une classe. Nous voulons qu'il soit sélectionné élément en ce moment. Donc, fondamentalement, nous avons défini l'état initial pour tout cela. Maintenant, nous devons définir l'état final pour tout cela. Quelqu' un sélectionne en double. Combinez cela et allez-y et dupliquez et combinez cela. Ok, donc je vais les sélectionner pour faire un clic droit changer la cible et choisir ce bloc d'expérience, les sélectionner pour changer les cibles de clic droit et sélectionner ce bloc d'expérience. Maintenant, tout ça, nous ne voulons pas qu'ils soient classe. Je vais aller de l'avant et dire élément sélectionné. Celle-ci va aussi être un élément sexuel. OK, maintenant, allons de l'avant et jouons ça. Vous pouviez voir qu'ils se produisent tous en même temps. Ce que nous devons faire, c'est créer un délai plus petit. Donc quand je sélectionne cette opacité mobile et que je dirai DeLay zéro point faire et le troisième set, qui sont ces deux-là, non ? Je vais mettre ça pour qu'on voie un point pour Ok, donc maintenant si tu joues ça, c'est l'animation qu'on obtient. D' autres regards super pourrait. Maintenant, allons de l'avant et publions ceci sur notre site et voyons ça la vie. Ok, alors allons à notre portefeuille. Bien sûr. Et c'est recharger la plage. Droit ? Ça a l'air fantastique. Je vais faire défiler lentement. D' accord, on a ça. Et maintenant cela va commencer. Nuit. Ça a l'air incroyable. En ce moment, remontons, d' accord ? Et ne redescendez que. L' animation s'est déjà produite, non ? Tout est arrivé. Mais disons que vous voulez le réinitialiser de sorte que chaque fois que vous faites défiler, vous savez, l'animation remplace. Comment on fait ça ? Droit. Donc c'est avec nous avons cette chose, cette autre option avec un clic sur fait, vous pouvez voir qu'il dit quand Faites défiler hors de vous. Que se passe-t-il quand je défile de toi ? Ok, on peut y aller et réinitialiser toute cette animation, donc je vais commencer par commencer une animation, OK ? Et maintenant nous avons déjà ce 1er 1 droit ? En fait, je vais juste dupliquer ça, accord ? Donc nous n'avons pas à tout effacer à nouveau. Assurez-vous que vous avez sélectionné le 2ème 1 Parce que pour le 1er 1 nous avons sélectionné le top et pour celui-ci vendant le 2ème 1 Et ici, nous allons aller de l'avant et dire défiler. D' accord ? maintenant, nous en avons déjà beaucoup. Maintenant, nous allons faire est une sorte de réinitialiser tout maintenant, puisque tout ce sont ceux que nous ne pouvons pas justifier la réinitialisation des orteils. Comme parce que tout cela est 0% de capacité et, vous savez, déplacer 100 correctifs vers la gauche. On aurait pu vouloir le ramener à la disposition. Alors, que faire ? Je vais aller de l'avant et sélectionner tous ces effacements répressifs. Ok, maintenant on est toujours un état initial. Je vais enlever ça de l'état initial. D' accord ? Et pour celui-ci, durée du centre est désactivée. Zéro. Parce que je voulais immédiatement devenir 0% opacité et déplacer 100 pixels vers la gauche dès que je fais défiler hors de vous. Ok, alors qu'est-ce que je veux dire par là ? Allons de l'avant et publions ceci et ensuite nous pouvons comprendre. Donc, vous avez vraiment cours de portefeuille. Allons recharger le discours. Ok, donc maintenant c'est arrivé, non ? Donc quand tu reviendras ici et qu'on aura cette animation, c' est parfait. C' est fantastique. Maintenant, dans un défilement hors de vous. Alors maintenant, il est un défilement hors de vous. Qui signifie maintenant que tous les éléments auraient dû être 0% de capacité et auraient dû être 100 pixels avec gauche sont-ils ? Vérifions. Parce que quand je fais défiler à nouveau dans la vue, ils sont visibles. Droit ? Donc, vous faites défiler un nouveau défilement dans ce que tout ce que vous faites défiler la réinitialisation, revenir, ils font défiler vers la droite. Retournons en arrière. Qui ici ? Droit. C' est de ça qu'on parle, non ? Alors revenons en arrière et vous pouvez voir ça. Ça a l'air fantastique. Droit ? Donc, c'est à peu près comme ça que vous réinitialisez l'animation. Donc, passer aux sections suivantes du parcours, nous, c'est bien. Nous ne voulons pas ajouter d'interaction parce que nous avons déjà cette belle interaction qui est là. Nous pourrions également ajouter une interaction similaire à la section de l'ensemble de compétences. Ok, mais pour l'école a dit, je vais ajouter un autre type d'animation hors. Donc, dans la prochaine vidéo, nous allons aller de l'avant et animer ça. Donc c'est vous les gars dans la prochaine vidéo 41. Animer la section des compétences: Ok, donc dans cette vidéo, on va aller de l'avant et simplement ajouter une interaction très simple à ce pas trop fantaisie. Alors commençons. Revenons à notre Oh, voici un peu de retour à l'endroit où nous étions au départ et nous sommes arrivés ici. Ce que je veux faire, c'est quand je survolerai cet élément, accord ? Je veux déclencher une animation à l'échelle simple pour l'icône que nous avons ici, non ? Donc je vais aller de l'avant et commencer par sélectionner le candidat. Rappeur. Donc une autre chose est que ce rapide normal a été utilisé sur tout le site, et nous ne voulons pas désactiver le déclencheur, vous savez, aucun autre élément. Donc juste pour être du côté sûr de ce que je vais faire, je suis honoré, en fait, en fait, juste vite aller de l'avant et dupliquer la classe, et c'est de couleur normale, mais je vais appeler ce rappeur rare, Ok, Juste pour être sur le coffre-fort, une taille deux que nous nous assurons que nous ne faisons pas les modifications nécessaires aux animations sur les autres composants. Droit ? Donc on va choisir ce manque de compétences, et je vais passer à l'étape de l'interaction et maintenant on va avoir besoin d'une simple interaction en vol stationnaire . Donc, si vous appelez l'icône plus et choisissez et la souris Bonjour, Donc je vais cliquer sur sélectionner Action sur Aller pour démarrer une nouvelle animation Et ce sont tous l' animation existante Ne cliquez pas, créer un nouveau Et nous appelons cette échelle icône excuse dans OK et cliquez sur Plus et nous sommes juste cliquer sur la propriété de la compétence Et évidemment, nous ne voulons pas déclencher le rappeur d'échelle que nous voulons faire droit Cliquez, Changer la cible et vous êtes effet l'icône de la compétence. Ok, et maintenant ce que tu veux faire, c'est t'assurer que tu affectes la classe, accord ? Et quelle est l'icône de la compétence de la classe, n'est-ce pas ? Et vous voulez également affecter uniquement les enfants avec cette classe. Donc, fondamentalement, si cette icône de kill est un enfant de n'importe quel élément parent, alors allez-y et affectez cela dès maintenant. Ici, nous ne voulons pas aller de l'avant et ajouter un état initial parce que l'état initial sur l'état original de l'animation va être le même. Je vais aller de l'avant et juste cliquer dessus et je vais taper un. Donc tu sais, un est normal, et je vais aller de l'avant et changer ça de 1 à 0,2. Ok, peut-être même 0,1. Allons de l'avant et disons 0,2. Ok, donc ça fait un peu peur, et je vais cliquer sur la droite. C' est à peu près tout. D' accord ? Et je ne sais pas pourquoi tu n'as pas pris le nom de quelqu'un. D' accord. Voilà, tu y vas. Et pour passer le vol stationnaire, ce que je veux faire c'est que je vais aller de l'avant et choisir de démarrer une animation, et nous allons aller de l'avant et dupliquer ça parce que nous ne voulons pas répéter la même étape nouveau. Assurez-vous de sélectionner le 2ème 1 Ensuite, allez-y et définissez cette option sur l'échelle. D' accord ? Et il avait l'habileté que je peux. Je vais retourner et utiliser ça pour quoi ? D' accord. Maintenant, une fois que je veux que j'ai oublié va changer la durée. Donc je vais mettre ça à 0.4 et dire ça pour soulager le quart. Revenons en arrière et faisons la même chose pour l'échelle aussi. Donc, comme cela dit la durée à zéro point plein. Et aussi l'assouplissement va être facile ou tribunal. Ok, alors maintenant, allons-y et jetons un coup d'oeil. D' accord ? Donc quand tu as un, on obtient une interaction Howard amusante, accord ? Comme un fou, ça marche. Maintenant, je pense que l'assouplissement a besoin d'un peu plus réparé. Quelqu' un a dit que la durée à zéro point faire. Oh, ça doit être atténué. Cour. On y va. C' est ça le problème. Donc ceci au rapport pour encore une fois est hors cour Onda pour l'échelle. Nous voulons nous assurer que ce soit plus facile tribunal. Bon, alors jetons un coup d'oeil. Ouais, regarde, ça a l'air super. Ok, maintenant, le truc c'est que ça n'affecte pas tout ça, accord ? Parce que nous l'avons fait. Donc, si vous regardez réellement, l' animation Ok, cette animation de vol stationnaire est un facteur. Seulement orteil cet élément particulier si vous allez de l'avant et changez cette classe d'orteil, ce qui signifie que cela va affecter chaque élément et nous allons choisir des compétences Rappeur, non ? C' est la classe de base, non ? Pas plus que celui avec une classe combo. Eh bien, ça va affecter seulement ceux qui ont la classe combo, mais nous ne voulons pas qu'il fasse ça. Nous voulions mettre en œuvre des compétences. Le rappeur, non ? C' est la classe de base. Donc, si je vais de l'avant et plané sur l'un des autres éléments encore rien ne se passe. C' est parce que cela a une classe complètement différente. On appelle encore ça des rappeurs normaux. Donc je vais me débarrasser de ça et je vais aller de l'avant et dire Compétences, Trapper. Et nous voulons également ajouter les 48 pixels. Droit ? La séparation. C' est comme ça. Allons de l'avant et appelons cette compétence rapide, puis allez-y et disons 48 pixels, marge droite et sélectionnez également celui-ci et appelez ce rappeur de compétences sur Aller de l'avant et sur les 40 pixels. Le batteur droit en ce moment. Jetons un coup d'oeil aux bureaux. Oui, ça marche maintenant sur tout le reste. C' est une interaction très simple, cool et amusante. n'y a rien de génial à porter. Il le rend juste plus vivant et amusant à continuer avec. Donc, oui, donc c'est à peu près tout pour cette vidéo. Et dans la prochaine vidéo, on va aller de l'avant. Et nous l'avons déjà fait, ce qui est très bien. Ah, on les a déjà animés aussi. Ok, euh, mais ce que je vais faire c'est que je veux quand je fais défiler ici , je veux ajouter une animation de fondu simple à chacun d'entre eux. Donc on va le faire dans l'année prochaine. Donc, c'est vous dans la prochaine vidéo. 42. Animer la section des projets: Très bien les gars, donc on pourrait créer une interaction cool pour ça. Lorsque ce qui se passe, c'est quand chacune de ces cartes est visible dans le port de vue ou quand elles sont en entrevue scolaire, nous allons en quelque sorte les mettre à l'échelle de petites à grandes. On n'a fait qu'une interaction similaire ici, non ? On n'a fait qu'une interaction similaire ici, Où ? Quand cette section fait défiler l'interview, on va animer ça, ça et ça, non ? Mais que se passe-t-il s'il y a un meilleur moyen est un moyen plus facile de le faire ? Parce que chaque fois que je vais de l'avant et que je choisis un élément, je ne veux pas qu'il soit basé sur la section. Et s'il y a un élément qui est juste là et quand il fait défiler l'interview, je veux animateur, je peux réellement définir cela sans même ajouter le déclencheur. Faites la section droite. Alors quoi ? Je veux dire, allons-y et comprenons ça. On va aller de l'avant et on a dit ça à 14. 40. D' accord ? Juste pour comprendre et ce que je vais faire, il doit sélectionner le projet Thebe enveloppé. Ok, Donc pour le rappeur Project, qui est tout ce bloc, je vais aller de l'avant et créer une interaction et ça va être une interview de défilement Donc quand l'interview Project Rapper Scrolls, nous sommes va créer une animation. Je vais aller de l'avant et dire, Commencez une animation super. Maintenant partout et créer une nouvelle animation. Et je vais appeler ça dans Global. Ok, maintenant je vais faire est un must sélectionner la propriété de l'échelle, OK ? Et nous voulons que l'échelle de cette échelle ait un état initial. D' accord ? Et je vais dire quelque chose comme 0,7. Ok, peut-être allons-y et faisons-en un 0.85 Ok, quelque chose comme ça. Ok, on va de l'avant et on duplique ça, et je vais aller de l'avant et remettre ça à un. Maintenant, ça va être n'importe quel bâton et que ça va être qu'on fasse ce petit 0,5 et qu'on dit qu'il est hors cour. D' accord ? Maintenant, nous voulons aussi animer l'opacité parce que ça va avoir l'air bizarre si c'est très petit quand ça commence. Donc je vais choisir ça. Je vais aller de l'avant et je vais dire capacité. D' accord. Nous allons aller de l'avant et appliquer cette porte ici. Maintenant, ça va évidemment être un état de problème, donc je vais revenir à zéro. Je vais aller de l'avant et dupliquer ça et je vais apporter l'opacité. Et, euh, la balance va être dans un seul. L' opacité sera de 100% et le préréglage sera. Il est sorti quart et 0,5. Ok, alors maintenant regardons et comprenons. Si vous voyez ici que chacun de ces éléments affecte le déclencheur d'interaction en ce moment, c'est le projet rapide. Mais qu'entendez-vous par déclencheur d'interaction ? qui signifie que si j'ajoute cette échelle et cette propriété globale à l'élément lui-même, et que j'anime l'élément, je n'ai pas besoin d'effacer plusieurs copies. Je dois juste faire ça une fois, juste une fois, et ça va affecter n'importe quel élément. J' ajoute cet orteil d'interaction parce que ce qui s'est passé avant était ici Le déclencheur était la section droite, mais l'élémentaire, si être infecté ou autre chose, mais ici, le déclencheur et le qui est infecté sont exactement les mêmes choses. Jetons donc rapidement un coup d'oeil et voyons comment cela fonctionne. D' accord, donc quand j'évolue l'entrevue, vous pouvez voir que ce genre de compétences est correct, mais ça ne marche pas ici parce qu'on ne s'est pas appliqué à ça. Donc ce qu'on peut faire, c'est tout ce que j'ai à faire maintenant, puisque c'est la même classe, non ? Parce que tout ce sont des rappeurs de projet. Ok, je vais y aller. Et dans l'interview de défilement, je vais dire classe d'effets. Ok, donc maintenant chaque élément, Ok, qui a ce cours, accord ? Et nous pouvons dire que le rappeur de projet, parce que c'est la classe de base va devenir efficace avec cette échelle et l' animation globale . Ok, donc tout cet élément va faire peur ? Parce que c'est lui-même le déclencheur sur ce lui-même est l'élément qui est affecté. Bon, maintenant allons de l'avant et jetons un coup d'oeil à ça. Donc maintenant tu peux voir que cette peur et ce gamin maintenant je vais baiser un peu plus loin. Vous pouvez voir cela aussi effrayé. Et cela a aussi peur que ça a commencé. Maintenant, même si vous regardez ici que nous définissons Project Rapper, je peux effectivement sélectionner même cet élément. Très bien, le rappeur de compétences Ok. Et je peux ajouter Allons de l'avant et sélectionnez cela à nouveau. Rappeur de compétences. Je peux sélectionner défilé dans la vue, d' accord ? Et quand je dis défilement interview, commencez une animation. Je peux choisir ça. même, non ? Et maintenant, quand je vais à l'intérieur, vous pouvez voir que la classe a changé. Il l'a automatiquement changé parce que j'affecte le déclencheur d'interaction. Bon, donc cela change automatiquement. C' est un moyen vraiment cool de dupliquer des animations sur l'ensemble de votre site Web. Donc maintenant, si je vais de l'avant et que je jette un coup d'oeil, ok. Et l'autre chose, c'est que je veux aussi faire la classe. Ok, alors faisons défiler vers le bas, et vous pouvez voir que ce genre de droit animé, Rejetons un coup d'oeil à nouveau. Je vais remonter et je vais revenir en avant-première, et vous pouvez voir que c'est une sorte de mise à l'échelle. Mais nous voulions appliquer tous les autres comme mais juste. Nous aussi. Faites cela assez simple. On a la souris Howard. Cependant, désolé. Pas la plupart de ce que nous voulons à l'interview de l'école. Et je ne suis même pas une compensation libérale. Ok, je vais aller avec un décalage, dire 20% d'accord ? Et je peux aller dire des cours d'effets. Donc maintenant et je peux choisir une classe pour être rappeur de compétences maintenant chacun de ces éléments va s' animer. C' est lui-même un déclencheur, et c'est l'animation qui va être affectée. Alors allez-y et prévisualisez ce droit. Vous pouvez voir que cela est affecté en ce moment. Même si lors de la mise en place de l'animation, nous avons ajouté cette classe, n'est-ce pas ? Mais maintenant cela affecte toujours cette classe parce que le déclencheur d'interaction est le même que l' élément qui est animé, est-ce pas ? Droit. Maintenant, que se passe-t-il si on se défile de toi, non ? Nous voulons aussi avoir une animation pour cela. Alors allons-y et faisons-le. Donc quand on fait défiler, si vous voulez dire, commencer une animation et ici, je vais dupliquer ça Ok on, je vais dire échelle, et je vais vendre le 2ème 1 et je vais dire échelle dans global et il va être étendu à l'échelle mondiale, n' est-ce pas ? D' accord. Et maintenant, nous voulions par défaut à son état d'origine, qui va être celui-ci, qui est 0,85 et zéro. Ok, donc je vais aller de l'avant et supprimer ces deux-là. Et pour ces deux-là, je vais enlever l'état initial, et je vais aller de l'avant et mettre la durée à zéro. Parce que dès que ces parchemins sortent de toi, je veux qu'ils soient orteils. Je veux qu'ils orteils instantanément. Allez-y et revenez à 85 % et revenez à l'opacité de 0 %. Droit. Alors jetons un coup d'oeil. Ok, alors on y va. OK, Cela anime dans cette animation dans Fantastique. D' accord. Je veux dire, je m'éloigne de toi. Rien ne se passe. Je ne suis pas sûr de quel élément. Je l'ai ajouté pour le faire Waas pour cet élément, non ? Donc on va y aller et je vais dire cours, ce qui est très bien. Je vais aussi venir ici et sélectionner le projet Rapid. Et voici, faites défiler vers vous. Je vais dire commencer une animation et nous allons choisir l'échelle hors global. Et maintenant, cela devrait parfaitement fonctionner. Droit. Alors maintenant ces travaux, Quand je reviens et je reviens dans l'animation à nouveau, Je reviens et reviens et ne se rencontre plus jamais. Même chose avec ça. Donc maintenant nous demander ces arrivant au port de vue qu'ils se mettent à l'échelle dans Ok. Et si je reviens, il y aura encore un meurtre. à droite. Donc je vais là-bas, réinitialiser, et ils reviennent maintenant. Une chose que je veux faire ici est que pour cela je veux contre le set 20 comme le décalage et encore ici. Je veux probablement en mettre 10 en tant qu'officier pour l'extension. Aussi pour la mise à l'échelle. Je voulais être zéro, , parce que je voulais me déclencher instantanément pour ça. On peut le vendre pour 20. Alors reprenons rapidement un coup d'oeil. Bon, on y va. Fantastique. Remontons. Oui. On y va. À droite sur ça. Mais dans cette trouvaille encore ? D' accord. Donc, c'est à peu près fait. Ensuite, nous avons cela aussi, ce qui a été fait à peu près. Nous avons encore cela, qui est aussi à peu près fait. Je ne veux pas ajouter d'animations à cela. Tu sais quoi ? On pourrait faire ça. Allons de l'avant et sélectionnons l'image du témoignage, d' accord ? Je veux dire, le bloc de témoignage et allons de l'avant et ajouter le déclencheur de l'entrevue de défilement. Et nous allons sélectionner l'échelle dans Global, et nous allons régler ça pour être 20 et je vais descendre. Peut-être que je vais mettre ce 1 à 10 en fait. D' accord. Et le défilement pour vous dans une sélection, sélectionnez l'animation et choisissez l'échelle globale. Et nous n'affecterons pas la classe aussi. Pour que tous les autres éléments avec le témoignage de type de classe dans le bloc obtiennent un facteur. Alors voyons à quoi ça ressemble. Droit. Donc je vais faire défiler, et vous pourriez voir ça visible juste sur. Celui-ci est également en vue. Port et son étui. Droit. Fantastique. Maintenant, on veut orteil. Assurez-vous que cela fonctionne correctement. Je ne sais pas pourquoi cela n'est pas affecté. Oh, nous avons besoin de la raison pour laquelle ça ne marche pas parce que nous devons choisir la classe de base. Et maintenant ça va marcher parce que cela n'a pas le combo Plus Donc, allons rapidement jeter un coup d'oeil à nouveau. Donc on va faire défiler, et c'est visible. C' était visible. Et cela devient également visible en ce moment pour la photographie. Je pense que je ne veux rien changer. Ça a l'air très bien. Cela a aussi l'air assez génial. Et cela a aussi l'air assez génial. Maintenant que nous avons fait ceux qui sont là va créer un peu plus interactions et d'animations, et nous allons ajouter plus d'éléments pour le rendre beaucoup mieux. Je vous vois dans la prochaine vidéo. 43. Créer une animation de la barre de progression: D' accord, les gars. Donc, de cette façon, vous allez aller de l'avant et créer sont vraiment cool et amusant progrès. Mais ce qui se passe essentiellement est que les défilements payés que vous pouvez voir une partie de progression en haut de l'écran qui se déplace de gauche à droite. Droit. Alors allons de l'avant et construisons. Alors donnons d'abord la barre de progrès et le progrès, mais est-ce un bloc sourd très simple, non ? C' est ça. Il n'y a rien. Les mortiers veulent aller de l'avant et choisir le vous savez, le corps. D' accord, je vais tout effondrer et je vais créer un nouveau bloc div, non ? Et je vais juste déplacer cette impasse vers le haut parce que je voulais être au-dessus de tout, en fait, vraiment, n'a pas d'importance. Très tous hors américain juste même par dessous de la barre de navigation, parce que nous allons le déplacer dans la base ZIS. Donc d'abord, je vais aller de l'avant et appeler cette barre de progrès, et je vais lui donner une réduction à 100%. Donc, il prend un 100% sur la valeur hors de l'écran et ils donnaient une hauteur de cinq picks est juste une très petite valeur de pixel et je vais aller de l'avant et ajouter une couleur. Et dans ce cas, je vais ajouter cette couleur CNN. Si c'est 2$, tu pourrais aller pour le gris clair ou le doctorat. Quoi que tu penses, Werksman, c'est tout. Une barre de progression est faite. Maintenant, ce que je vais faire, c'est que je vais y aller et que je vais choisir la position. Et nous avons cinq propriétés. On a regardé Sticky. Jetons un coup d'oeil aux positions fixes et à l'élément par rapport à la fenêtre du navigateur. Donc, il reste en place que les pages vissé un peu bon avant et seulement dire fixe. Ok, donc j'allais le faire, c'est qu'il va enlever ça de la surface et qu'il va mettre sur un avion à trois D. Très bien, ce qui veut dire que c'est au-dessus des autres éléments. Mais avant de le faire, nous devons définir où il sera placé. Maintenant, le flux d'air nous donne huit préréglages. Je vais choisir celui qui dit sur le dessus. Donc maintenant, le ceci va aller au-dessus de la hauteur droite sur, comme le dit une bonne action, la position est fixe par rapport au corps. D' accord. Et ce qui veut dire cette adresse, Cruel. Vous pouvez voir que leurs progrès. Mais est-ce sur le dessus pour le rendre beaucoup plus visible ? Ce que je vais faire, c'est aller de l'avant et changer la couleur Teoh cette couleur publique pour qu'on puisse mieux la voir. Vous pouvez aussi ajouter des ingrédients si vous voulez, mais dans ce cas, je vais juste en faire une couleur unie, ok ? Et oui, ça semble plutôt bien. Maintenant, qu'est-ce que tu as à faire, c'est qu'on doit ajouter un déclencheur. D' accord ? Nous devons nous ennemir. Allons donc à l'équipe d'interaction. Et puis je dirai le déclencheur de page, accord ? Et je vais choisir celui qui dit pendant que la page est en train de défiler. Donc, pendant que cette page défilant, je veux que la barre de progression s'anime. OK, donc quand je clique sur les pages sauvages défilant maintenant, nous allons choisir une action sur Étaient défiler animation en toute sécurité sur. Nous n'avons pas d'animation de défilement. Alors allez-y et choisissez-en un, et je vais dire compétence. Ok, donc évidemment, comme vous pouvez le voir, nous avons 0% de réduction sur la page et ensuite nous avons 100% de la page. Vous pouvez aller de l'avant, aller de l'avant et en ajouter au milieu si vous le voulez vraiment. Mais ce que je vais faire, c'est que je vais aller de l'avant et choisir zéro et 100 parce que c'est peu près ce dont nous avons besoin pour le progrès. Mais 0%. Comment ça va être ainsi ? Comme vous pouvez le voir Oh, ici nous avons le X et y et Z sur le X et y sont souvent liés, droit, droit, Parce que nous avons ce lien, le premier réutilisable non lié. D' accord. Et puis je vais aller à la valeur X, accord ? Et je vais mettre ça à zéro et pour les progrès. Mais je vais le vérifier à nouveau, et je vais mettre la valeur X à quoi ? Ok, alors maintenant voyons à quoi ça ressemble. Donc quand je commence, rien n'est là. Et en tant qu'école, vous pouvez voir que nous avons ce progrès, mais, vous savez, c'est un peu ça. Mais le truc, c'est vous pouvez voir que la promesse, mais c'est un peu caché, non ? C' est que c'est une sorte d'être caché par les éléments ou que, comme vous pouvez le voir, c'est derrière cette image. Donc c'est un problème qu'on doit régler. La deuxième chose est qu'il est à l'échelle à partir du centre. Mais comment faire une échelle de gauche à droite. Droit. Comment on fait ça ? OK, comme vous pouvez le voir, ici il va derrière tous ces éléments. Ok, alors comment tu arrêtes ça ? Donc, continuons et fixons d'abord la valeur Z. La première chose que tu veux faire, c'est ici dans les propriétés. Nous avons cette option appelée Valeur Z. En ce moment, il est défini Index. Ce que nous voulons faire, c'est vraiment lui donner un nombre très élevé. Il est donc au-dessus de tous les éléments. Disons qu'on l'a dit orteil 100. heure actuelle, 100 est un nombre de valeur Z, ce qui est assez élevé, et il est tout à fait au-dessus de tous les autres éléments. Ce bâton. Regarde. Bon, donc il a commencé ça, et maintenant vous pouvez voir que ça chevauche l'image parce qu'elle est sur le dessus, accord. Et il chevauche tous les autres éléments parce qu'il est assez élevé dans la nuit de valeur Z . Alors on y va. Ça a l'air parfait. Maintenant. On voulait le mettre à l'échelle de la gauche, non ? Nous ne voulons pas qu'elle s'échelonne à partir du centre. Alors comment on fait ça ? On va y aller, c'est qu'on peut venir ici, faire les options, transformer Corliss. Et je peux cliquer sur cette icône et dans l'esthétique de l'origine de la transformation je vais choisir celui qui dit à gauche, d' accord, accord, parce que je veux le point d'ancrage Toby gauche. Et maintenant ce qui va se passer, c'est que ça va commencer à partir du bord gauche de l' écran, non ? On y va, et ça va baiser jusqu'au bas de l'écran, d' accord ? Et ça va continuer à bouger, accord ? Et on a quelque chose comme ça, non ? Et c'est à peu près sur la façon dont on a effacé cette belle partie de progrès, non ? L' année prochaine, on va ajouter une autre interaction. Donc c'est vous les gars dans la prochaine vidéo 44. Créer une interaction de survol sur la pièce du projet: D' accord, les gars. Donc, dans cette vidéo, ce qu'on va faire, c'est comprendre un concept très important. Maintenant, faites ce design. Je suis allé de l'avant et fait un changement plus petit où je viens de localiser cette interaction où quand j'ai plané sur chacune de ces cartes, cette boîte de tri apparaît et il a cette flèche. J' ai bien compris. Et on veut avoir ça pour n'importe quel élément. On pourrait l'avoir sur toutes ces cartes. On peut l'avoir aussi sur cette carte. Je ne sais pas vraiment où vous voulez l'utiliser, mais je l'ai juste mis ici juste au cas où. droite. Et nous allons vous expliquer un concept très simple. Maintenant. Une chose que vous avez annoncé une chose que nous ne sommes pas ici, c'est que, comme vous pouvez le voir, ces éléments de texte qui sont là à l'intérieur ont un, vous savez, un espacement approprié de 40 pixels sur l'ordinateur portable et 32 sur le bas. Mais cet élément, ou ne défie tout cela. D' accord. Il va à l'encontre de tout cela contre les règles qui ont été appliquées à la boîte. , ce C' est quoi, cebattement si dur ? En fait, nous allons de l'avant et défions cela et décidons aussi où jamais décider où nous voulons placer cela, est-ce pas ? Donc on va aller de l'avant et comprendre, et on va apprendre un tout nouveau concept, ce qui est super important. Alors entrons là-dedans. Donc un buffle romain et ce qu'on fait c'est que je vais sélectionner cette boîte de description de projet que nous avons, non ? Et c'est là que nous voulons mettre dans cet élément. Tellement impressionné. Contrôle, Ian. Le créateur a bloqué d'abord. D' accord. Et c'est le bloc est 48 par 48. Le système de sélection va dire, vous savez, mort d' Adul, accord ? Et je vais faire cette largeur et cette hauteur 48 par 48 ok ? Et je vais aller de l'avant et changer la couleur de fond pour être ceci. Ok, donc maintenant on a ça, Adam. Maintenant, cette boîte suit clairement les valeurs sur les propriétés de cette off, vous savez, ayant ce batting bas et supérieur. Et maintenant je vais aller de l'avant et prendre l'icône de la flèche, qui est que j'ai une chambre qui va attraper cet art adulte svg et pour ça à l'intérieur. Évidemment, nous voulons centrer ça, donc je vais aller de l'avant et sélectionner l'adulte sourd, et je vais fléchir ça pour que tout soit au centre et que le look soit plutôt bon. Maintenant on va faire, c'est que je vais sélectionner la flèche, Dev. D' accord ? Et je vais venir ici pour positionner maintenant je vais créer sur la position d'abord, et ensuite je vais aller de l'avant et expliquer ce que cela signifie. Donc, je vais aller de l'avant et sélectionner Absolute ok, Quand je dis absolument peut voir quelque chose qui s'est passé que cet adulte de bloc est maintenant dans l'espace Z , qui signifie qu'il ne se limite pas à aucune des propriétés de cette boîte. Ok, maintenant, ce que je vais faire, c'est que je vais choisir une de ces propriétés à 1/2. Maintenant, je veux que ça soit sur le fond, non ? Fond significatif. droite. Ok, maintenant que s'est-il passé ? Il a complètement disparu. En fait, il ne l'a pas fait. Voyons où c'est, non ? Donc on va y aller et on va voir qu'il est allé quelque part. C' est tout ce qu'il est là, comme s'il le faisait ici ? Si je dis en haut à gauche, il va en haut à gauche. Si je dis en bas à gauche, ça vient en bas à gauche. Ce qu'on va faire, c'est que j'irai voir l'information ou ici. Donc, comme vous pouvez le voir, il est dit position. Donc, la flèche sourd ok, est positionné en bas à gauche du corps parce qu'il dit par rapport au corps. Ok, maintenant, ce qu'on veut faire, c'est qu'on veut changer ça. Un objet relatif. Donc ce qu'on va faire, c'est aller à l'élément de période, qui est la description du projet, et je vais changer la position de ça de statique à relative. Maintenant, cette flèche def est maintenant positionnée au bas absolu à gauche du bloc de description du projet car elle dit qu'il est relatif à. Et comment on a fait ça ? En rendant la description du projet relative nuit. Donc, le parent devrait toujours être parent sur l'enfant. Dans ce cas, qui est ce bloc narratif doit être absolu. Maintenant, on veut que ça soit sur le dessus en bas, non ? Cliquez en bas, à droite ? droite. statut que je vais faire est que je vais juste aller de l'avant, copier ceci et le baser sur chacun de ces éléments. Très bien, va le badigeonner et le baser. ce moment. Le fait est que nous ne voulons pas voir cet adulte sourd dedans tout le temps. Nous voulions être là quand nous survolons dessus. Alors, comment créer l'animation ? On peut aller à l'interaction, non ? Donc l'interaction a vraiment plané. Maintenant, si vous jetez un oeil au rappeur normal Désolé, pas au rappeur normal, le rappeur de projet. Nous avons ajouté, vous savez, quelques animations à ce sujet. Ok, maintenant, allons avoir une nouvelle animation. C' est un survol de la souris. Ok, alors voici que quand on va choisir et dire, commencer une animation, ok ? Et je vais en créer un nouveau. Je vais appeler cette animation de l'adresse. Ok, tu dois plus Icône. Et maintenant, je vais dire bouger parce que je veux déplacer cela de sorte qu'ils bougent. Et évidemment, nous ne voulons pas animer le rappeur du projet. Nous voulons écrire, comme, changer de cible, et nous voulons animer la flèche, def. Ok, Maintenant, nous allons créer un orteil pour les enlever parce qu'on va être hors de toi et un va être à l'intérieur de ce droit, Donc l'état initial va être différent, donc nous devons aller de l'avant et dire défini comme initial état et je veux faire est que je vais déplacer le X par 48 correctifs ok, sur le Y aussi par 48 picks est maintenant correct, et je vais aller de l'avant et dupliquer ça, ok ? Et ça va être normal, ça va être zéro, et ça va être zéro, accord ? Et on va ajouter une transition. Il est sorti du quart, d'accord ? Et, vous savez, juste donné un décalage de rayon normal en ce moment. Jouons à ça. D' accord ? Vous pouvez voir que c'est 48 picks, c'est bon, et ça s'enclenche à l'intérieur. droite. Rejetons un coup d'oeil. D' accord, donc c'est dehors, par ici. C' est dehors, par ici. Alors, comment vous assurez que ce n'est pas le cas ? Ce n'est pas visible. Si vous vous souvenez, nous avons utilisé un débordement de l'université que nous allons faire, c'est que je vais sélectionner ce projet. Rappeur, viens ici et ici. Nous voulons voir l'orteil de débordement. Frappe-le. Ok, maintenant, le truc c'est qu' on a cette classe combo, non ? Et nous voulons affecter uniquement le rappeur du projet. Nous ne voulons pas que le tir pour le bas de pixel soit séparé. Avoir cette propriété de débordement. Donc, quand je clique sur ce bouton qui dit hériter de quatre sélecteurs et que je vais choisir Project Rapper Et maintenant, tous les changements que je fais affectent seulement le rappeur de projet. Donc, nous allons aller de l'avant et dire Overflow caché. D' accord, et puis nous reviendrons à l'arrière. Et maintenant, ce rappeur de projet n'a que le flux d'huile sur 24 pixels de fond. Arjun n'a que ça en ce moment. Allons jeter un coup d'oeil. Alors maintenant, c'est vraiment Dieu. Je vais l'avoir dedans. Vous pouvez voir que ce bouton arrive magnifiquement. Super. Maintenant, nous allons aller de l'avant et inverser cela également. Donc je vais aller à la souris stationnaire et je vais choisir survoler et je vais dire que ça a commencé l'animation. Et ici à Hubbard, je ne fais pas d'animation à Amman pour dupliquer cette animation. D' accord. Et maintenant on va aller de l'avant et supprimer celui-ci, accord ? Et on va retirer ça comme état initial. Maintenant, ça encore. Nous voulions réinitialiser à 48 48 Je veux définir la durée de ceci à zéro, parce que je veux que vous animiez instantanément à 48 40 qui est en dehors de la boîte. Donc maintenant, si vous regardez bien, quand vous l'avez et que vous pouvez voir ça, et quand vous partez, il sort maintenant, il sort maintenant, je pense que ce qu'on a fait c'est, euh je n'aurais pas dû faire ce zéro point zéro. Je devrais encore faire un 0,5 et dire qu'il est notre cour. Ok, maintenant, jetons un coup d'oeil. D' accord ? D' accord. Ça a l'air génial. Maintenant, le fait est que ça ne marche sur aucun des autres, parce que nous devons définir ça. Donc ce qu'on va faire, c'est que je vais continuer depuis qu'on a défini ça. On veut changer cette classe d'orteils, accord ? Et la classe devrait être le rappeur Project. Et maintenant, si vous jetez un coup d'oeil, ça devrait fonctionner sur la droite. Droit ? Et c'est vraiment, vraiment cool, une émission. Maintenant, ce qu'on pourrait faire, c'est sélectionner cette flèche, bloc Dev, à droite. Et on peut aller de l'avant et passer ça au sommet, non ? Aussi, si tu veux. vrai, donc ça va être sur le dessus, non ? Tout ce dont vous avez besoin. Mais dans ce cas va dire en bas à droite, droite, et ce genre de mouvement tout vers le bas, non ? Donc c'est à peu près tout sur l'absolu et relatif. Et allons de l'avant et publions rapidement ceci. Et jetons un oeil à ce que cela ressemble sur votre site complètement chargé. Je veux aller au port pour votre cours et le contrôle est de re seigneur droit et de descendre. Et puis on y va. Donc, quand je survole, vous pouvez le voir magnifiquement, entre et sort, et il semble super cool, comme si vous pouviez juste sentir les animations et c'est super génial. Bon, donc c'est tout pour cette vidéo, et je vous vois dans la prochaine vidéo. 45. Réaliser le site Web: D' accord, les gars. Donc, dans cette vidéo, nous allons enfin terminer le projet. Je vais vous montrer quelques choses que vous avez ratées ou quelque chose que vous pourriez avoir besoin d'utiliser lorsque vous construisez votre site web. Donc je vais aller de l'avant et je ne peux pas expliquer et juste terminer cette vidéo. Donc la première chose ici, c'est qu'on a quatre robinets, non ? On a les propriétés. Lequel de l'onglet de style ? Ensuite, nous avons ces paramètres et puis nous avons celui-ci qui s'appelle un gestionnaire de style, qui a fondamentalement une liste de toutes vos classes, accord. Et certains jours dans la création, vous n'avez peut-être pas utilisé quelques classes pour quelques éléments. C' est pourquoi nous avons ce bouton où vous pouvez nettoyer. Donc, comme vous pouvez le voir, avoir 12 classes que je n'ai pas utilisées. Et combien de ces différentes, je n'ai pas utilisé donc vous voulez faire, va aller de l'avant et d'abord supprimer toutes ces classes parce que vous pourriez ne pas utiliser ces écritures va de l'avant et choisir de supprimer classe, D' accord, et maintenant tout va bien se passer. parce que les arbitres vont finalement voir ce qui n'a pas ajouté. Et quelle est la classe supplémentaire et il va supprimer tout ce grand génial. Donc c'est le numéro un. Le numéro deux est là. On peut dire « publier ». Et si vous voulez ajouter un domaine personnalisé, vous canalisez un domaine personnalisé et vous disposez également de paramètres avancés et ce sont les paramètres par défaut . Je vous suggère de le laisser tel qu'il est et pas ce que vous avez trop à ce sujet. Mais assurez-vous que si vous voulez un domaine personnalisé, nous allons cliquer ici. Allons en fait à ça et voyons comment la de boîtedesection de domaine va bien. Le suivant est Vous pouvez partager votre projet, qui signifie que si vous voulez montrer ce projet particulier à quelqu'un, accord, d' accord, et qu'ils veulent voir à quoi il ressemble, vous pouvez en fait leur envoyer un lien, droit ? Si vous activez cette option, vous pouvez copier ce flux web. Maintenant, ils seront capables d'autres choses. Mais les changements qu'ils font ne seront pas sauvés, est-ce pas ? Toutes les modifications que vous apportez sur votre projet seront partagées. Tout le reste n'est pas si vous voulez montrer que votre travail sont les progrès que vous pouvez réellement partager ce lien avec eux. D' accord. Ensuite, si vous finissez par monter pour le plan d'appât et que j'ai un plan d'aide profonde, vous pouvez aller de l'avant et exporter le coin. flux Web vous donne de beaux HTML CSS, JavaScript et les actifs , qui , qui sont , vous savez, soigneusement mis ensemble et vous pouvez réellement préparer, est-ce combat que vous obtenez un zip et vous pouvez l'héberger sur n'importe quelle autre plate-forme de votre choix. Si vous ne voulez pas accueillir sur les niveaux que c'est très vous exporter la cour. D' accord. En arrivant à la suivante, nous avons plusieurs points de rupture maintenant. Nous avons regardé quatre point de rupture, qui est juste arrêter paysage mob tablette par paysage et plus quart partout où vous donne également trois points de rupture supplémentaires pour la vadrouille pour le point de rupture de bureau lui-même. droite. Donc tu as pour 10 ans. 80 tu as à 12. 80. On a une fin 14 40 du jardin 1920. Maintenant, vous pouvez aller de l'avant et personnaliser le look de chacun de ces points de rupture, même s'ils sont tous la même partie de pause de bureau, est-ce pas ? Parce que les changements que nous n'avons pas apportés jusqu'à présent affectent tous ces trois points de rupture. Oui, parce que ce sont des points de rupture d'ordinateur portable. Mais si vous voulez aller de l'avant et les changer pour ces deux points de rupture, peut-être 1920 14 40 vont avoir un style particulier, mais 1920 va avoir une différence de temps. Peut-être que vous avez cinq colonnes en 1920 14 40 où vous êtes. 10 colonnes sur 1920. Tu peux faire ça, non ? Donc c'est une autre chose cool. Super. Maintenant, l'autre chose est qu'ici dans le panneau d'actifs, si vous cliquez sur l'icône, notre icône d'engrenage, nous allons voir que nous avons quelque chose appelé ou texte Maintenant les enseignants Aleka ont terminé une description cette image pour les lecteurs d'écran ou si l'image ne parvient pas à attirer. Donc, fondamentalement, ce qui se passe est parfois il y a des gens qui sont aveugles et ne seraient pas en mesure de lire le site Web. Il y a donc une technologie appelée les lecteurs d'écran, qui va lire ce texte que vous attribuez afin que les gens comprennent ce que cet objet ou ce que cet élément ou ce que cette image est. Donc, vous voulez toujours ajouter nos techniciens, et c'est extrêmement bon pour un PDG a également aller de l'avant et ajouter dans tous les Donc, par exemple, je dirais que je dirais projet à un lien. C' est là que j'appellerais ça. D' accord. Et pour cela, je dirais logo épique, accord. Donc, vous savez, allez de l'avant et ajoutez un texte huilé à chaque image que vous avez et qui va améliorer votre site Web en termes de PDG et en termes de convivialité ainsi. Très bien, Fantastique. Maintenant, vous avez toutes vos pages. Maintenant, on ne va pas couvrir les pages CMS ou commerce électronique. Donc on va vivre ça pour l'instant, et tu peux choisir. Et si vous cliquez sur l'icône des paramètres, vous obtiendrez beaucoup de paramètres. Et c'est ce que tu veux faire, non ? Donc, ici dans ASIO, la définition de l'ordre spécifié informations, Donc les balises titre. Donc je vais appeler ce Robin Williams Robin Williams et dire, concepteur de produit, est à ça que ça va ressembler sur votre site Web sur Google et quelqu'un de si désespéré, et vous pouvez ajouter une méta description disant que Robin Williams est un concepteur de produits de Milan, Italie, et vous savez que vous pouvez dire ce que vous voulez, juste là nous allons. Ensuite, nous avons des titres open graph image open graph sont nous pourrions. Si vous ne savez pas ce que c'est, c'est tout à fait bien. Vous pouvez l'avoir, vous pouvez dire la même chose que le titre du PDG, et vous pouvez dire Samos comme description de votre sujet. Donc, fondamentalement, ce que signifie les paramètres de graphique ouvert, c'est que lorsque vous devriez, quand quelqu'un partage cela sur WhatsApp, Facebook ou Instagram ou quoi que ce soit, ce formulaire, comme un lien avec l'image d'une entreprise, droit ? Et nous avons cette image graphique ouverte. Assurez-vous que vos images sont de 1200 pixels par 6 30 pixels et qu'elles ont un rapport d'aspect de 19.1 est à un . Maintenant, je suis allé de l'avant et en ai créé un, mais vous pouvez aller de l'avant et créer tout ce que vous voulez. Laisse-moi te montrer à quoi ça a l'air rectal. Ici. Je suis dans la figue MMA, et voici l'image graphique ouverte que j'ai faite. Nous allons aussi avoir besoin de ces tissus sur les icônes et les icônes de clic Web, mais je vais en parler plus tard, mais pour Maintenant, c'est l'image de graphique ouvert que vous voulez, évidemment, comme vous pouvez le voir taille 6200 par 630 donc nous voulons faire est une fois que vous l'exportez, vous pouvez mettre ce que vous voulez dans ce. Vous voulez revenir au flux Web et vous venez ici à la section images, puis cliquez sur télécharger et nous allons aller de l'avant et télécharger l'image graphique ouverte. Et comme vous pouvez le voir, il est en train d'être téléchargé. Maintenant, nous allons faire est de cliquer sur l'icône de roue dentée et ici à côté du nom. Vous avez un lien, est-ce pas ? C' est exactement là que l'image est stockée. Donc, vous savez, copiez ça et revenez aux paramètres de la page. Et ici, dans les paramètres d'image de graphique ouvert que vous voulez, allez-y et basez cela à droite. Et maintenant, vous avez également les paramètres de recherche de site, qui, et si vous le souhaitez, vous pouvez exclure la bêche des résultats de recherche. Donc, Google va exclure ce pitch particulier si c'est quelque chose que vous avez besoin. Mais je ne pense pas qu'il ferait ça. Et vous avez aussi un code personnalisé, dont nous ne parlerons pas. Donc tout ce que je vais faire, c'est concevoir, et ça va aller de l'avant et le sauver. Non, allons rapidement jeter un coup d'oeil. Howard, regarde. C' est ainsi que les aperçus du graphique ouvert étaient. Regardez où vous avez des SMS ou des informations et vous en avez trois. Vous êtes bas ici. Et, vous savez, vous avez aussi l'image du graphique ouvert, non ? Donc, c'est à peu près tout sur les paramètres de la maison. Maintenant, une fois que cela est fait, nous n'allons pas dans la section avancée, allons aller à l'intérieur des paramètres du projet, est-ce pas ? Et là, on va faire quelques autres trucs. Bon, donc nous avons le 1er 1 c'est tout, Général, j'ai décidé de me changer de sujet en cours de portefeuille R w pour Robin Williams . Et tu peux le changer à ce que tu veux. Et vous pouvez l'héberger sur le sol et également obtenu tissu sur et répliquants Award. Quoi ? Fondamentalement, ce sont ces petites icônes que vous voyez ici, non ? Et ce sont la pile d'icônes. Tu veux avoir. Donc, je vais aller de l'avant et exporter ces aussi et téléchargé, et je suis allé de l'avant et juste téléchargé ces droite et Évidemment, vous avez des temps. Et ici maintenant, vous avez également cette image de marque de flux de travail. Et quoi de mieux brûler est fondamentalement cette étiquette qui dit fait à Buffalo. Maintenant, une fois que tu auras un plan payé, tu peux éteindre ça ? Et ça ne sera plus là. Mais si vous utilisez le Web à proximité de l'abdomen que ce sera là, n' est-ce pas ? Excellent. Ok, maintenant allons à l'hébergement vers le bas Maintenant, ici dans l'onglet hébergement. Évidemment, où vous voulez faire est d'aller de l'avant et de choisir votre plan particulier que vous voulez une CMS de base ou d'entreprise. Et une fois que cela est fait, vous obtiendrez beaucoup de paramètres ici. Maintenant, je recommande en fait de vérifier chacun de ces liens qui ne sont pas là, parce que chaque service, chaque plate-forme d'hébergement a une question différente de liaison avec le flux de puits. Donc, vous voulez en quelque sorte vérifier la documentation ou cela et vérifier la documentation ici où Flo a quelques tutoriels et je suis sûr que ces liens vont certainement vous aider à les obtenir optronique ou certainement vérifier cela si cela est un regard et si vous avez des questions sur l'hébergement, alors vous avez l'éditeur est un endroit où vous pouvez ajouter des collaborateurs afin que deux personnes puissent avoir accès à un seul projet. Rien de plus à ça. Et puis tu dois construire. ce moment. C' est quelque chose que nous ne voulons vraiment pas examiner parce que cela n'a rien à voir avec notre portefeuille. Oui, vous en tant que votre est important en ce moment. Maintenant, nous avons fait beaucoup de choses en ce qui concerne le PDG, et je veux que vous soyez hors de vue plan. Vous pouvez avoir quelques paramètres et vous pouvez simplement les remplir. Ça va être très simple par ici. Et comme vous pouvez le voir, vous pouvez définir des balises méta et des descriptions que nous avons déjà faites et ouvrir des images graphiques, ce que nous avons déjà fait. Donc, c'est à peu près fait. La prochaine chose, c'est les fermes. ce moment, Ence moment, nous sommes allés de l'avant et avons créé une ferme. C' est vrai ? Et vous pouvez réellement ajouter tous les paramètres sont ici maintenant vous concéder dit quand une batterie est soumis à un site Web de l'éditeur où le flux collecte automatiquement la soumission et l' affiche ici, e-mail ou défécation est peut éventuellement être activer et viendra d'une marque lui beaucoup courrier électronique. Ce qui veut dire quand quelqu'un soumet quelque chose sur votre site Web, vous recevez un e-mail ou une défécation afin que vous puissiez choisir de définir toutes ces informations ici, non ? Et tu as plein d'autres choses que tu peux faire maintenant. Ce sont des choses assez avancées, sorte que vous pouvez consulter toutes les vidéos qui sont liées aux fermes. D' accord. Tous les liens seront là dans la description de la vidéo afin que vous puissiez vérifier ceux sur . Vous avez aussi dessoumissions de formulaires où vous pouvez cacher les soumissions agricoles et toutes les soumissions qui signifient vontvenir ici. soumissions de formulaires où vous pouvez cacher les soumissions agricoles et toutes les soumissions qui signifient vont Donc, comme vous pouvez le voir, nous avons fait quelque chose où nous avons ajouté un nom de poste que l'humilité et la sensation particulière qui dit salut lumière. Donc, toutes ces informations sont l'abbé que vous et vous tolérez ou le C. Nous éteignons tout cela si vous en avez besoin. Donc toutes ces soumissions de formulaire vont être ici. Vous pouvez cliquer sur Afficher plus, mais nous n'en avons pas. Donc, c'est beaucoup. Non, on va déjà regarder le fonds pour ne pas y aller. Revenons aux sauvegardes dans les sauvegardes. On est au sol automatiquement. C' est beaucoup de renforts. Donc, au cas où vous avez fait des erreurs, vous pouvez aller de l'avant et en prévisualiser ou les restaurer. Ensuite, vous avez des intégrations et des intégrations est assez complexe. Au cas où vous utilisiez des choses qui attrapent le pape A que j'accède à des montants et à des trucs assez avancés. Donc on ne va pas s'embêter à ce sujet aussi. Et si Dieu, tu t'es habitué. Donc, une fois, tu as presque fait tout ça, tu l'as fait. Tout ce que vous avez à faire est juste d'aller à publier et dire, Publier sur le domaine ref Low sur un domaine personnalisé et vous êtes assez bon pour aller. Donc c'est beaucoup pour cette vidéo. Et c'est vous dans la prochaine vidéo. 46. Que faire ensuite ?: Oh, hé, salut. L' étude ne vous a pas vraiment vu qui ne s'attendait pas à ce que personne atteigne la fin. Bien sûr. Ok, tu es là. C' est génial. C' est fantastique. Tu as traversé tout le parcours. Je sais que ça a été un long voyage. Ça a été un long trajet sur Enfin est arrivé à la fin. Peu de gens le font. Tellement bon travail. Parlons de ce qui se passe ensuite. Maintenant, nous sommes à travers des offres bien plus que juste de l'eau à court dans le cours. Il y a tellement de choses que je n'ai pas parlé d'une telle boîte lumineuse, comme des vidéos à la vidéo YouTube. Beaucoup de choses. L' animation, une tonne de choses qui étaient des chlorures de flux, qui ne sont pas couvertes dans cette figure parce que je ne voulais pas faire sentir comme une sorte de manuel à couler. Plutôt, cela vous donnerait une bonne compréhension des bases et, vous savez, assurez-vous que votre fondation solide. Chaque fois que vous voulez construire quelque chose qui est différent de ce que vous devriez être capable d'aller de l'avant et de le faire, vous devriez comprendre comment cela fonctionne. Maintenant. Je recommande fortement de vérifier l'obscurité de l'Université de Floride. Je Oh, désolé, docteur universitaire sur Flora je lien serait dans la description du cours de toute façon. Vous pouvez l'extraire, et Web slow vous fournit des didacticiels pour chaque aspect et composant désactivé. peu près tout sur le flux de travail est terminé que c'est beaucoup comme un manuel massif, et je vous recommande fortement de le vérifier si jamais vous le voulez. Vous savez, le design est très quelque chose qui a vraiment su que quelque chose que je n'ai pas couvert dans le cours. ce moment, nous sommes la grippe a aussi le genre. Beaucoup de cours, qui sont comme 5 à 6 vidéos et ils facture numérique, un site Web d'une seule page sont très simples, vous savez, qui sont très complexes et des choses, sorte que vous pouvez vérifier ceux aussi. Et, bien sûr, qu'une tonne de tutoriels YouTube en ligne où leur grippe vous apprend à faire beaucoup de choses amusantes . J' ai quelques Pretoria régulières de mon propre, relativement difficile de créer certains types d'animations et d'interactions très stressé, réparé de sorte que vous pouvez vérifier ceux sur mon site plus tard. Donc c'est à peu près tout pour cette base vidéo. 10 ans. Autant d'être venu et de regarder tout mon parcours. Félicitations encore une fois pour la fin du cours sur Est-ce que vous les gars dans ma prochaine vidéo asseyez-vous dans la garderie et au revoir ?