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