Site Web de portefeuille personnel réactif - à l'aide de HTML, de CSS et de JavaScript

1. Introduction: Salut les gars, Mon nom est Peter et bienvenue dans le cours dans lequel nous allons construire un site Web de portefeuille responsive moderne et ce président convertir au monde numérique. Il est vraiment important de se démarquer de la foule et d'être unique. Si vous postulez pour un emploi ou approchez incliné, vous devriez avoir quelque chose qui est unique ou distinctif, qui se définit à votre bot. Cela dit, avoir un site Web de portefeuille qui met en valeur qui vous êtes, quelles sont les différentes compétences que vous traitez cette affligeant les différents projets qui ont que toutes ces choses peuvent créer une meilleure impression de vous. Bon, maintenant en parlant de ce cours particulier, ce cours est organisé pour les débutants. Mais ce sera mieux si vous avez une connaissance de base du HTML et du CSS. Et maintenant, parlons de la structure du cours. Donc, tout d'abord, je vais vous donner un aperçu de base de notre site Web. Expliquer qu'il est conçu et fonctionnalités pour que vous puissiez mieux comprendre ce que nous allons construire. Deuxièmement, je vais partager quelques meilleures pratiques que vous pouvez implémenter tout en apprenant, surtout en apprenant à coder, afin que je puisse obtenir le maximum de potentiel de ces dieux particuliers. Après cela, nous obtenons sous la partie principale. Donc, tout d'abord, nous allons mettre en place le projet. Et dans le cadre du projet, nous créons les différents fichiers et dossiers requis. Le sélectionner ou choisir les différentes couleurs que nous utilisons ce site particulier. Et nous importons aussi toutes les majors nécessaires sur un projet. Après cela, nous commençons à coder un site Web. Nous allons donc coder le site web section par section et RB commencer par la section héros, suivie par la section avorter, la section de compétences, section projet, la section blog et la section contact. Et une fois que nous avons complètement codé le site Web, il est maintenant temps pour nous de rendre notre site web réactif. Et comme nous le savons aujourd'hui, presque tous les utilisateurs naviguent sur Internet via leur smartphone. Il est donc très important d'avoir un site Web capable de s'adapter à différents rapports d'écran. Donc, nous avons deux vidéos différentes dans lesquelles je vais étape par étape et expliqué comment nous pouvons rendre un site web réactif. Donc c'est à propos de la structure du cours. Et comme je l'ai déjà dit, c'est bien sûr dans lequel je parle choses de base ainsi que de la partie de développement de la manière la plus simple possible. C' est ça les gars, merci beaucoup d'avoir regardé et j' espère vraiment vous voir dans la prochaine leçon. 2. Aperçu du site: Salut les gars, bienvenue à la vidéo. Et dans cette vidéo en particulier, je vais vous donner un aperçu de base de notre site Web. Et en ce moment, qu'est-ce que vous voyez facilement produit final. Et en ce moment, nous sommes dans la section des héros. Et dans la partie supérieure ici, vous pouvez voir cette barre de navigation ESR. Et à l'intérieur de la barre de navigation, nous avons un logo, différents liens, et un bouton. Et ces liens sont complètement fonctionnels. Donc, par exemple, si je voulais aller à la section blog à nouveau, cliquez sur la section blog et meurt veulent nous emmener directement à la section blog avec une animation lisse. Et ici, dans la section héros, dans la deuxième section, nous avons tau, l'image du héros, comme avec le dernier texte avec le bouton. Et la partie inférieure, nous avons une structure nette. Donc, cette structure est faite en utilisant clip-path, et nous avons également défini la courbure en utilisant la fonction polygone. Donc les gars, si vous ne comprenez pas ces termes, ne vous inquiétez pas, j'ai expliqué toutes ces choses en profondeur dans les prochaines sections. Donc, si vous ne comprenez pas ces termes, ne vous inquiétez pas, à la fin de chaque section, tout sera complètement clair. Passons maintenant à la section à propos. Donc, dans la section du tableau, nous avons une image, et dans le côté droit, nous avons une section de texte qui a un frapper une petite introduction. Et ici, nous avons nos icônes de médias sociaux. Et ces icônes ont un appel à l'action. Donc, si je clique sur l'un de ces, ceux-ci, je veux nous emmener à l'envers respectif et maintenant laissez-nous passer à la section des compétences. Donc, dans la section des compétences de nouveau, nous avons la courbure ici. Nous avons le titre comme un dernier polygraphe. Et c'est la section des voitures. Donc, nous avons un total de six cartes différentes et chaque carte a un effet de vol stationnaire. Donc, nous avons essentiellement utilisé des grilles CSS pour atteindre cette structure de dieu. Donc, cette vidéo dans laquelle nous allons construire la section de compétences est pack de valeur a commencé à apprendre sur les grilles CSS, comment nous pouvons définir une grille, comment nous pouvons fournir un écart entre les dieux et beaucoup plus. Donc, chaque garde a une image et une information textuelle. Et c'est tout. C' est tout au sujet de la section des compétences. Passons maintenant à la section du projet. C' est donc la section du projet. Nous avons un titre et ici nous avons un curseur. Donc, ce briquets fait essentiellement en utilisant une bibliothèque JavaScript externe connue sous le nom Slick slide it. Donc, dans cette vidéo, nous allons apprendre comment nous pouvons utiliser une bibliothèque externe, comment nous pouvons accéder à des propriétés spécifiques de la bibliothèque et plus encore. Et ici, vous pouvez voir que cela se compose soit d'une image et d'un paragraphe. Et dans la partie inférieure, vous pouvez voir que nous avons attrapé des portes et ces points indiquent la diapositive actuelle. Donc, vous allez voir qu'un maintenant nous sommes dans la première diapositive, sorte que la couleur de l'écran et il est plus lourd, peu plus large. Maintenant, si je vais au second, le second est essentiellement mis en évidence avec une couleur différente et une largeur plus large. Donc, tout est à propos de la section du projet. Et maintenant passons à la section de bloc. Voici la section du blog, et nous avons un biographe Hibbing, un fond sombre, et trois cartes différentes. Et à l'intérieur de chaque carte, nous avons l'image et les informations textuelles. Donc colorants ou labo ou à la section bloc. Et maintenant passons à la dernière section qui est la section médiane du maïs. Donc, nous avons un cap. On a deux cartes différentes. Et à l'intérieur de chaque carte, nous avons une image et quelques informations textuelles. Et la partie inférieure, nous avons obtenu à la section d'entrée où nous avons obtenu l'entrée du nom d'utilisateur, e-mail dans le message d'objet ainsi qu'un bouton. Donc, tout cela est à propos de ça. La section Conduite Me et la section pied de page, nous avons juste un logo comme nous l'avons vu la dernière fois, quelques informations. C' est donc le bureau de base ou la vue de notre site Web. Et cet avantage régulier est complètement réactif. Donc, si je passe à l'outil de développement ici, vous pouvez le voir et je diminue la largeur de la fenêtre d'affichage. Vous pouvez voir cette barre de navigation particulière être désactivée. Et au lieu de cela, nous avons un menu hamburger. Et si je clique dessus, nous avons à la fin du menu désastreux ici. Donc encore une fois, je peux cliquer sur n'importe quelle dissection particulière et les choses fonctionnent parfaitement bien. Et le menu hamburger est bien aménagé. Nous avons tous les liens en tant qu'icône de clause élastique. Et en ce moment, nous sommes dans un peu de 1988 en 1949. Donc je vais aller à l'iPhone 678. Donc c'est comme ça que notre site va ressembler sur un téléphone portable. Ça a l'air très bien. Les choses sont bien disposées, les choses sont lisibles. Et le site Web est complètement sponsee pour une vue mobile. C' est également bon pour une vue iPad. Et comme vous pouvez le voir ici aussi, l'envers est bien aménagé. Et pour presque tous les ratios d'écran, notre site va s'adapter en fonction du ratio d'écran. Donc, nous pouvons conclure que notre site Web est complètement réactif et nous avons obtenu une vidéo approfondie de deux parties vu dans laquelle je vais aller étape par étape et expliquer chaque étape de faire un site web aspirine responsive. Et à partir de cela, nous avons aussi un prototype. J' ai donc fait ce prototype particulier dans Figma, et lors de la construction du site, nous prendrons ce prototype particulier comme référence. Donc c'est ça les gars, voici un aperçu de base saoudien de notre site Web. Et j'espère que vous avez une idée de base de ce que nous allons construire dans cette vidéo en particulier. C' est tout, les gars, merci d'avoir regardé, et je vous verrai dans les prochaines vidéos. 3. Meilleures pratiques de apprentissage: Salut les gars. Dans cette vidéo, je vais partager quelques bonnes pratiques que vous pouvez mettre en œuvre tout en apprenant afin que je puisse tirer le maximum de potentiel de ce cours particulier. Et les conseils que je suis sur le point de partager ont été mis en œuvre dans mon propre processus d'apprentissage. Et je pense qu'ils valent la peine d'être partagés. Tout d'abord, comme vous le savez, ce cours particulier est divisé en plusieurs sections et il a besoin d'une section. Nous construisons essentiellement une partie particulière du site Web. Et ce que je vous suggère, c'est de commencer, tout d' abord, vous devriez regarder une section complètement. Et les mensonges, pourquoi nous construisons, observer la structure du cours et l'approche de résolution de problèmes. Et une fois que vous avez terminé votre action de montres, alors vous devriez essayer de construire un site web par vous-même. Lorsque vous essayez de construire un site Web sur l'Iran plutôt que de simplement répliquer ce que fait l'instructeur. Vous pensez à des compétences, à vos compétences en résolution de problèmes, tout va grandir d'une manière bien meilleure. Donc, c'est ce que je veux suggérer, c'est de regarder cela en fait complètement et ensuite essayé de construire un site web par vous-même. Deuxièmement, les utilisateurs ont fixé de petits objectifs et m' ont demandé de savoir de nos jours beaucoup de la combinaison Duolingo cours, mais il n'y a qu'une petite fraction de personnes qui complètent le cours. Donc, afin de terminer le cours avec succès fixé de petits objectifs. Dans notre cas, vous pouvez essentiellement fixer un objectif de, Je veux compléter une section tous les jours. Et si vous pouviez constamment atteindre ce petit objectif particulier ou votre plus grand objectif, c'est de compléter l'ensemble du parcours, devenir gonflé avec une grande facilité. Et enfin, il est temps pour nous d'éliminer toutes sortes de distractions. Et des études ont montré que même quelques secondes de destruction, ce soit une notification sur un smartphone, peut complètement ruiner votre concentration principale. Donc, quand vous étudiez, il est vraiment important d'éviter tout Destruction Set ou si ce peut être un téléphone intelligent ou toute autre chose, vous devriez essayer d'éviter toutes sortes de distractions et de se concentrer complètement sur le processus d'étude. Ce sont donc quelques petits changements qui divisent et mettent en œuvre votre processus d'apprentissage, que vous aurez un meilleur impact sur votre processus d'apprentissage, ce qui peut le rendre plus efficace et plus efficace. Alors c'est tout, les gars. Merci beaucoup d'avoir regardé et je vous verrai dans la prochaine vidéo. 4. Créer le projet: Salut les gars. Dans cette vidéo, nous allons mettre en place notre projet dans VSCode. Donc Visual Studio Code est les données de texture que je vais utiliser dans cette construction Web particulière. Et vous pouvez utiliser n'importe quel éditeur de texte préféré. Donc, la première chose que je vais faire est que je vais créer un nouveau dossier sur mon bureau. Et je vais nommer ce dossier particulier comme portfolio. Après cela, je vais ouvrir VS Code. Et je vais glisser dans le dossier du portefeuille nouvellement créé sur le VS Code. Et maintenant, nous avons compris que le dossier du portefeuille s'est ouvert ici. Et le maintenant nous allons créer tous les fichiers de base qui sont nécessaires. Donc, je vais cliquer sur un bouton Nouveau fichier juste ici. Et le premier fichier que nous allons créer ISA, le fichier index.html. Bon, maintenant créons un autre dossier, et je veux nommer ce dossier particulier comme CSS. Et à l'intérieur de ce dossier particulier, créons notre fichier style.css. Ok, maintenant créons un autre dossier pour stocker toutes nos images. Et enfin, créons un fichier pour cela. Notre JavaScript. Ou les gars Lai savent que nous avons créé tous les fichiers de base pour se taire. Et maintenant, allons dans notre fichier index.html et générons une table ronde de base. Grâce à cela, je suis un NDR, le point d'exclamation et suivi par le robinet. Et cela génère la chaudière de base. Donc la première chose que je veux faire est que je veux changer le nom de l'envers en portfolio. Et après cela, je veux lier le HTML et CSS ensemble. Pour ce faire, je veux taper lien. Et dans le temps supplémentaire, je vais entrer slash point, sélectionnez le dossier CSS. A l'intérieur de cela, je veux choisir ce fichier Tyler CSS pour confirmer si le fichier HTML et CSS est lié ensemble, je n'irai pas au fichier CSS. Et je veux dire comme le corps de notre site et je veux changer l'arrière-plan en rouge. Je vais le sauver. Après cela, je vais faire un clic droit sur le fichier index.html et cliquez sur ouvrir avec le serveur en direct. Et comme vous pouvez le voir que le site fonctionne parfaitement bien. Les deux fichiers HTML et CSS sont parfaitement liés. Donc maintenant, nous avons terminé avec la tâche de base de la mise en place du projet. Passons maintenant à la deuxième étape, les gars, moment nous allons choisir toutes les différentes couleurs données que nous allons utiliser sur ce site particulier. Et nous allons stocker dans ces couleurs en tant que variables. Donc, tout en construisant le côté DevOps, le processus de sélection des couleurs va être beaucoup plus facile et cela peut nous aider à gagner beaucoup de temps. Alors maintenant, allons à notre prototype. Et ici, j'ai énuméré toutes les différentes couleurs que nous allons utiliser. Autrement dit, nous allons utiliser trois couleurs différentes. Et sélectionnons la première couleur. Sélectionnez la couleur dans l'option de champ et copions le code hexadécimal. Et retour au code VS. Allons au fichier CSS. Et pour initialiser fondamentalement ces couleurs en tant que variables, utilisons la fonction racine. Et maintenant, nous allons entrer le nom de la variable. Donc, pour la première couleur, je vais le nommer comme primaire, suivi de deux-points. Et le hashtag que je vais coller dans le code hexadécimal. C' est donc la première couleur. Maintenant, copions le code hexadécimal pour la deuxième couleur. Et je veux nommer cette couleur particulière comme pure. Et je vais coller le code hexadécimal juste ici. Et la couleur suivante est nommée comme sombre. Et copions le code hexadécimal et collez-le ici. Donc, ce sont des couleurs assez différentes qui sont, nous gagnons un an depuis webgl site en initialisant ces cours disponibles. Ainsi, nous pouvons facilement nous rappeler le nom de la couleur et sont directement appliquer la couleur en spécifiant le nom de la variable. Et cela peut en fait économiser beaucoup de temps et il est beaucoup plus facile de se souvenir des kilo-octets, donc le nom de la variable plutôt que le code hexadécimal. Et maintenant, nous avons fini avec le processus de sélection de couleurs. Et maintenant passons à l'étape suivante dans laquelle nous ne sommes pas fondamentalement ce que toutes les différentes images et autres actifs sur le VS Code. Très bien, maintenant il est temps pour nous d'importer toutes les différentes images et icônes sur notre projet. Avant cela, permettez-moi de vous montrer les différentes icônes et images que nous utiliserons sur ce site web particulier. Donc maintenant, je suis dans le prototype que j'ai fait à Figma. Et comme vous pouvez le voir, nous avons l'image du héros juste ici. Et si je fais défiler ici, nous avons toutes les icônes des médias sociaux. En descendant ici, vous allez voir toutes les différentes icônes. Dans la section des compétences. Nous avons obtenu les icônes du projet, images du projet, les différentes images du blog. Ils ne m'aiment pas, les icônes et bien plus encore. Ce sont donc les différentes images et icônes que nous allons utiliser dans ce site particulier. Et apprenez où vous les gars, j'ai tout ça dans la section des ressources et je peux télécharger tout ça à partir de là. Alors maintenant, importons fondamentalement toutes ces choses sur notre projet. À ça. J' ai toutes ces images ici, et je vais les copier. Donc, après cela, je vais aller dans le dossier de portefeuille que nous avons créé. Et comme vous pouvez le voir, nous avons accédé au dossier images, puis ouvrez-le. Et je vais les coller tous ici. Maintenant, si je retourne à l'éditeur de code VS et à l'intérieur des majors, comme vous pouvez le voir, nous avons toutes les différentes images prêtes à être utilisées. Donc maintenant, nous avons enfin fini avec les images et la partie icône. Je transpire. Et maintenant, nous avons le projet complètement mis en place pour être codé. Alors c'est tout, les gars. Nous avons terminé avec la configuration de base du projet. Et je vous verrai la prochaine vidéo où nous allons commencer à construire notre site web. 5. Codage de la section héros: Salut les gars. Dans cette vidéo, nous allons construire la section héros de notre site Web. Et dans la vidéo précédente, nous avons essentiellement créé ou protéger avec tous les différents fichiers. Nous avons choisi toutes les différentes couleurs que nous allons utiliser ce site particulier. Et nous avons aussi importé toutes les images différentes sur un projet. Alors maintenant, allons à notre prototype juste ici. Et comme vous pouvez le voir, cette dissection de fin est principalement appelée section de héros. Et c'est ce que nous allons construire dans cette vidéo particulière. Donc, divisons fondamentalement la section du héros en deux parties différentes. Donc, tout d'abord, construisons la section de navigation. Donc c'est la barre de navigation. Et vous pouvez considérer cette barre de navigation comme une boîte. Et à l'intérieur de cette boîte, nous avons différents éléments comme le logo sont différents liens et le bouton arrière. Donc, tout d'abord, créons la structure de base de la boîte. Pour ce faire, revenons au fichier d'index et à l'intérieur du fichier de corps, ou créons un en-tête. Et à l'intérieur de l'en-tête, je vais créer une balise de navigation. Donc, en revenant au prototype, vous allez voir que nous avons créé la boîte. Et à l'intérieur de la boîte, nous avons nos différents éléments. Je vais donc classer ces éléments comme partie gauche et partie droite. Donc, dans la partie gauche, nous avons le logo et les différents liens. Et la bonne partie, nous avons le bouton de retour. Donc, créons un div pour la partie gauche. Et je vais lui donner un cours à gauche. Juste comme ça, je vais créer un autre div. Et je vais nommer cette div particulière avec la classe comme un droit ? Bon, maintenant, passons à la partie gauche. Donc ici vous verrez que dans la partie gauche, nous avons Dao, le logo comme le dernier, l'élément différent. Nous avons donc besoin d'avoir séparé pour le logo et pour tous ces liens différents. Donc, je veux créer un div et je vais lui donner une classe nommée comme image de marque. Et à l'intérieur de cette div particulière, je vais ouvrir la balise image. Et dans la source, je vais entrer la barre oblique de l'organisation. Allons dans le dossier des images et je terminerai le logo. Donc le logo nav pointillé est le logo que nous allons utiliser. Et créons un autre div pour les différents liens. Donc, pour cela, nous allons utiliser la balise d'ancrage. Donc, je vais annuler un et appuyer sur Tab. Donc je vais juste mettre fin au hachage juste ici. Donc, nous avons à la maison un projet de compétences en bateau et bloquer. Alors entrons à la maison d'abord. Et maintenant ce que je vais faire, c'est que je vais choisir le teinturier, Dyer juste ici. Et j'appuie sur Alt, Maj et flèche vers le bas quatre fois de plus. Donc, ça va dupliquer exactement la même chose. Et après la maison, nous avons environ quatre ou par les compétences, les projets et le bloc. Bon, maintenant nous avons créé toutes ces taxes d'angle différentes. Passons maintenant à la bonne partie. Donc, comme vous pouvez le voir sur la partie droite, nous avons un bouton nommé comme contact. Donc, je vais juste créer une balise de bouton et un nom. Il conduit. Bon, Maintenant, nous avons fini, mais la barre de navigation, nous avons créé une boîte et à l'intérieur de la boîte, nous avons deux parties différentes. Sur la partie gauche, nous avons le logo. Il y a différents liens et sur la partie droite nous avons le bouton. Alors sauvegardons, et maintenant stylisons cet en-tête particulier. Pour ce faire, je veux aller dans ce fichier CSS de Tyler. Et juste ici, je vais sélectionner l'en-tête. Et je vais changer l'arrière-plan trop sombre. Donc, pour accéder à la variable, je vais mettre fin à la guerre à l'intérieur du crochet rond. Je vais entrer en double tiret. Alors maintenant, sauvegardons ça. Et regardons essentiellement notre site Web. Et comme vous pouvez le voir, c'est ici. Et si vous remarquez en haut à droite et en haut, nous avons un peu d'espacement. C' est à cause de la feuille de style de navigateur Web par défaut. Revenons donc à notre fichier CSS et commençons ici. Ainsi, l'étoile indique la sélection entière, sorte qu'elle sélectionne l'élément entier. Et nous allons taper la marge 0. Et rembourrage 0. Et la taille de la boîte, border-box. Bon, maintenant, si tu reviens, tu peux voir qu'il n'y a pas d'espace dans le coin. Il est parfaitement affleurant avec la partie dot-dot-dot du navigateur. Donc les gars, si c'est une entreprise ou un type ici, vous pouvez voir que ce n'a pas nav bar est fondamentalement situé au centre du rythme. Donc, afin d'amener notre barre de navigation au centre de la page, nous devons créer un conteneur. Donc je vais retourner à notre fichier style.css. Et ici, je vais créer une classe nommée comme contenir. Et dans cette classe particulière, je vais donner un esprit Mac de 11 52 pixel. Et épisodique pour le haut et le bas va être 0, et pour la gauche et la droite va être 15 pixel. Et aussi je vais donner une marge de haut et de bas de 0 et de faire le non diagnostiqué avant l'expéditeur, la gauche et la droite devraient être auto. Donc, si je le garde et si nous arrivons à notre portefeuille ici, vous pouvez voir que rien ne s'est essentiellement passé. C' est parce que nous n'avons pas appliqué ce verre particulier nouvellement créé sur notre HTML. Donc je vais simplement copier le nom de la classe ici. Allons dans notre fichier HTML et écrivons à la fois le nav retour ou juste en dessous de la balise d'en-tête. Je vais créer un div avec un nom de classe de conteneur. Et plaçons la balise div de fin juste en dessous de la balise de glossing nav et sauvegardons. Alors laissez-moi rapidement l'arranger maintenant ou le sauver. Et si je viens vérifier, vous pouvez voir qu'il est au centre en ce moment. Maintenant, modifions fondamentalement la couleur de tous ces liens différents. Donc, les liens évidemment situés juste à l'intérieur de la div gauche. Et donc BIPAP, nous pouvons dire que c'est l'en-tête, le nav, puis la Div gauche à l'intérieur que nous pouvons accéder fondamentalement à la balise d'ancrage. Donc je vais aller au style de notre CSS. Ici. Je vais terminer l'en-tête, nav point gauche et la balise d'ancrage. Donc ici je vais changer la couleur pour votre, disons qu'on prend un chien, on peut voir que la couleur a été changée en blanc ou pur. Et maintenant il y a supprimer tous ces soulignements. Donc, nous allons taper dans la décoration de texte, aucun. Et cela va essentiellement supprimer tous les soulignements. Donc, fondamentalement, nous avons apporté la barre de navigation à l'expéditeur et la couleur de ces liens au blanc, ainsi que nous avons supprimé leur sous-jacent. Donc les gars, si nous vérifions notre prototype ici, vous pouvez voir que la barre de navigation est fondamentalement alignée sur une seule ligne. Autrement dit, nous avons maintenant le logo, les différents liens suivis par le bouton. Mais l'avantage est fondamentalement d'avoir tous ces différents éléments sont disposés de manière verticale. Donc, afin de les faire d'une manière alignée ou linéaire lorsqu'ils utilisent la propriété flex. Et nous allons faire usage de la flexbox ou D développé lot dans ce site particulier construit. Il est donc préférable de créer fondamentalement une classe d'utilité afin qu'elle puisse économiser beaucoup de temps pour nous à l'avenir. Donc, pour ce faire, allons à notre code et à notre intérieur dans le dossier CSS, je vais créer un autre fichier. Et je veux le nommer comme Udemy déformer CSS et vers le bas et copier le nom du fichier. Et finissons juste. Donc, avant de passer à autre chose, passons à notre fichier style.css. Et tout d'abord, embarquons dans notre nouvelle classe d'utilité ici. Donc, je veux importer suivi de deux accords simples. Et nous allons entrer le nom du fichier point css et un deux-points. Donc maintenant, nous avons importé la classe des utilitaires. Maintenant, allons dans le fichier utilitaires et créer une classe nommée Flex. Et ici, nous allons sous affichage flex. Bon, donc maintenant sur une copie le nom de la classe juste ici. Allons à notre fichier d'index et écrivez à l'intérieur de notre Nasdaq. Je vais créer une classe et je vais coller le nom de notre flex de classe utilitaire. Et sauvegardons ça. Et si je vérifie le site Web ici, vous pouvez voir que le bouton de contact a été déplacé sur la droite. Donc, si une base de la même classe flex à l'intérieur de notre classe div gauche et enregistrez-le. Vous allez voir que la fin des liens désastreux et le bouton de conduite ont été disposés de manière légère. Donc les gars, si vous vérifiez ici, vous pouvez voir que les liens et le bouton similaire n'est pas aligné avec le logo. C' est un peu égaré. Donc, pour les faire en une seule ligne, créons une autre classe d'utilité. Et je vais le nommer comme expéditeur d'article. Et nous allons mettre un autre expéditeur d'élément de ligne et vies. Il suffit de copier le nom de la classe. Et tout d'abord, mettons-le à l'intérieur de la classe de navigation. Sauvegardons-le et vérifions-le. Et vous pouvez voir que le bouton de retour de la pièce et le logo est en une seule ligne maintenant. Et appliquons la même formule sur div gauche. Collons-le. Et nous avons tous ces éléments en une seule ligne. Maintenant, la tâche suivante est d'avoir une vidéo basée sur la dose plus faible lorsque sont des éléments différents de sorte que, qui a l'air agréable. Donc pour ce faire, je veux créer une autre classe d'utilitaire et je la nommerai comme espace entre. Justifions le contenu, l'espace entre. Sauvegardons ça. Copions donc le nom de la classe. Allons au fichier d'index et allons le coller à l'intérieur de la classe nav, enregistrez-le. Et comme vous pouvez le voir que le bouton retour de la pièce est allé tout le chemin vers la gauche du conteneur. Et maintenant ajoutons un peu d'espace entre ce logo en Alaska entre ces liens. Donc les gars, si nous prenons nos prototypes, commencez à voir qu'il y a en fait un peu d'espace au-dessus de la barre de navigation. Il y a donc une sorte de séparation entre le haut du débat, la diarrhée de fin, la barre de navigation, l'affaire bar Dinah. Nous n'avons pas suffisamment d'espacement entre le haut de la page et la barre de navigation. Donc, pour ce faire, passons à ce fichier Tyler CSS. Et ici, je vais essentiellement sélectionner l'en-tête et le nav. Et je vais essentiellement fournir un peu de rembourrage. Donc, du haut et du bas vont leur donner. Et pour gauche et droite va être 0. Donc, si je l'enregistre, vous pouvez voir qu'il y a suffisamment d'espace entre le haut et le bas. Donc maintenant, je veux donner un peu d'espacement entre le logo et le lien. Donc, pour ce faire, encore une fois, nous pouvons sélectionner l'en-tête et le nav. Et si je vais à mon fichier index.html, nous avons un nom de classe qui est la marque à l'intérieur duquel réside notre logo. Donc, je peux essentiellement sélectionner le verre de marque. Et je peux donner une marge, non ? Bouge dix grammes. Voyons voir. Très bien, c'est une sorte de centre. Et maintenant ajoutons aussi un peu d'espacement entre tous ces différents liens. Nous avons donc déjà sélectionné notre lien ici, c'est-à-dire la balise d'ancrage. Donc je peux fournir la montagne juste ici. Voyons donc avec Durham. Ouais, ça a l'air bien, donc quand on ajoute un peu plus de style va être encore mieux. Donc, pour l'instant, nous avons essentiellement aligné la barre de navigation désastreuse dans une ligne, le nombre de sous-région d'espacement. Passons maintenant à l'étape suivante. Alors les gars, maintenant, changeons le téléphone que nous utilisons. Actuellement, nous utilisons le téléphone de base de notre navigateur. Mais dans notre prototype ici, vous pouvez voir que nous utilisons essentiellement la police Poppins. Donc, ils ont essentiellement fait usage de téléphone Google pour extraire cette forme particulière. Allons donc à Google Fonts. Et laissez-nous, donc c'est pour Poppins juste ici. Choisissons ici. Et nous allons voir la lumière dans le 400 régulier ainsi que le 600 semi-gras. Et copions simplement le lien d'ici. Allons dans notre fichier d'index et collons-le juste en dessous du titre. Sauvegardons ça. Allons à notre style.css. Et je vais sélectionner la famille Barbie et étrangère. Il va y avoir des Poppins. Et si Poppins ne fonctionne pas pour quelque raison que ce soit, nous utiliserons sensibles. Donc, si vous consultez notre site Web, nous pouvons voir que la faute a été modifiée et que cela semble beaucoup mieux maintenant. Et aussi je vais les convertir en majuscules. Donc, pour dy, faisons défiler vers le bas et à l'intérieur de la balise, tapons dans la transformation de texte en majuscules. Donc maintenant, nous avons tous ces liens différents en majuscules, et il semble beaucoup mieux que de les avoir en minuscules. Donc riz, maintenant ajoutons un état de mot entier à tous ces boutons de lien différents. Donc, quand on les survole, la couleur change. Donc, à travers cela, Allons à un fichier de style et nous allons copier le lien entier d'ici et alerter un deux-points et taper couloir. Donc, ce que nous devons faire, c'est que nous devons changer la couleur. Et la couleur est fondamentalement la couleur primaire. Donc, si vous regardez ici, vous pouvez voir que lorsque j'ai survolé ces différents liens, la couleur change en couleur primaire. Mais c'est un peu rapide d'avoir un effet de fondu et de fondu en douceur. Revenons au fichier de style et à l'intérieur de notre en-tête et nav étiquette d'ancrage gauche, je vais ajouter une transition. Transition. Pour tous les éléments 0.3 millisecondes et c'est 0s. Donc maintenant, si je passe au-dessus d'eux, vous pouvez voir qu'il a un fondu en douceur et s'estomper. Et ça a l'air bon. Donc maintenant, nous avons soit l'effet d'ordre à tous ces différents liens aussi bien. Donc les gars, maintenant laissez-nous styler notre bouton et le noeud droit, mais il semble assez basique. Donc, si chaque compte, notre prototype ici, vous pouvez voir que notre bouton ici est assez stylé. Et nous avons deux boutons différents, un juste ici et un autre juste ici. Il est donc temps pour nous d'utiliser à nouveau la classe d'utilité. Revenons à notre code. Et blanc ici sur le fichier index.html sur la section bouton, je vais créer une classe. Donc, je vais avoir deux classes différentes ici, c'est btn, btn-primaire. Donc, la raison pour laquelle j'ai deux classes différentes ici est que, donc la première classe, c'est-à-dire la classe btn, aura les propriétés basiques ou communes. Donc, si vous vérifiez ces deux boutons, ces deux violons ont la même largeur, le même rembourrage. Donc, ces propriétés de base seront arrêtées dans la classe btn. Et si vous regardez cette zone particulière, mais il a des propriétés différentes comme un fond solide. Et celui-ci a un émetteur, Baïkonour. Donc, ces propriétés seront avec l'ordonné dans la classe btn-primaire pour le premier fardeau. Et nous allons créer une autre classe qui est secondaire médiane pour cette classe particulière. Ainsi, le verre battant aura toutes les propriétés de base et pour personnaliser ou pour avoir des propriétés individuelles, vous allez ajouter les classes comme btn-primaire et btn secondaire. Et j'espère que vous avez une compréhension de base de pourquoi avoir deux lignes différentes. Alors allons vers vous pendant cette classe et créons la classe btn en premier. Donc, il aura un rembourrage de 0,8 courses de haut en bas et trois rhum de gauche et de droite. Donc, laissez-moi enregistrer le fichier index.html. Et comme vous pouvez le voir que nous avons un point a de, de haut en bas et 3 eux de gauche et de droite. Donc, modifions également le poids de la police à 600. Oui. Et nous allons également changer la taille de la police pour une pièce. Et nous aurons aussi une bordure qui va être de deux pixels, solide, transparente. Donc, la raison pour laquelle nous avons un arrière-plan transparent parce que deuxièmement, mais cela va avoir une frontière, mais le premier ne va pas avoir. Mais comme ils ont les mêmes propriétés, nous allons avoir une frontière, mais ce sera du temps passé par défaut. Et nous allons aussi changer le curseur pour le pointer. Donc, lorsque vous amenez votre curseur près du bouton, va changer pour le curseur du pointeur. Et maintenant, ciblons essentiellement la classe primaire BTN spécifique. Et changeons l'arrière-plan à la couleur primaire. Bon, maintenant nous avons le premier modèle prêt. Et je vais diminuer légèrement l'attente du téléphone parce que je pense qu'il fait un peu trop sombre. Mettons-le comme 400. Ils sont maintenant, il est prédéfini et aussi je vais changer le texte en majuscules. Donc, c'est la transformation de texte en majuscules. Donc, notez que ça a l'air assez bien. Donc maintenant, nous allons essentiellement appliquer un état de survol de ce bouton particulier aussi. Donc, quand ils fondamentalement Harvard ou ce bouton particulier, ce bouton particulier devrait essentiellement ressembler à celui-ci. Quand je survolerai celui-ci, celui-ci devrait ressembler à celui-ci. Donc, pour ce faire, copions fondamentalement le bouton primaire juste ici. Et appliquons un couloir. Alors maintenant, changeons l'arrière-plan en transparent. Et appliquons une couleur de bordure de primaire. Sauvegardons-le et vérifions-le. Oui, changeons aussi la couleur du texte en pure. Ok, et rendons ça un peu plus lisse. Donc, pour ce faire, passons au primaire et soit la transition de tous les éléments, 0,3 seconde, c'est oui, cela semble beaucoup mieux. Donc maintenant, nous avons ajouté une surestimation ou conduite mesquinerie. Nous allons maintenant nous sommes essentiellement fait avec la barre de navigation de notre site Web. Donc, en regardant notre prototype, nous avons la deuxième section bouteille pour héros, qui comprend l'image du héros comme nous l'avons vu pour la dernière fois, le côté droit. On peut donc avoir deux divs différents. L' un peut contenir l'image et l'autre peut contenir tous ces textes et le bouton. Revenons à notre fichier d'index. Et juste en dessous de la balise de fermeture du nav, créons un autre div avec un nom de classe de héros. Et à l'intérieur de cette div particulière, avons fondamentalement deux diff différents, un joli nommé comme gaucher, l'autre est nommé comme droit. Donc div, le nom de classe de gauche. Et un autre div, un nom de classe de droit. Bon, maintenant, passons à la div gauche. Et à l'intérieur de la div gauche, nous avons cette image particulière. Ouvrons une balise d'image. Et à l'intérieur de la source, je vais entrer slash point. Et naviguons vers le dossier des images et laissez-moi sous l'homme héros. Bon, maintenant nous avons la section principale. Et maintenant passons à la div droite. Et à droite, nous avons deux textes différents. premier comprend le nom, alors copions cela. Et je vais ouvrir et il est six ici. Et je vais coller le nom. Et deuxièmement, nous avons des titres de développeurs créatifs AMA, donc c'est un titre principal. Alors laissez-moi le copier et créons une balise H1 et collez-la à l'intérieur. Désolé, je n'ai pas copié et je possède. Je suis donc un développeur créateur. Et si vous remarquez, vous pouvez voir que développer par mot est fondamentalement avoir une couleur différente. Donc nous devons placer ça dans une travée. Alors laissez-moi le copier et l'intérieur du sac, et nous allons créer une travée et coller dans le mot du développeur. Bon, maintenant, regardons notre site web. On peut voir l'image juste ici. C' est ce qui permet la, Je suis un directeur créatif par titre. Et comme vous pouvez le voir, nous avons aussi besoin d'un bouton. Revenons à notre code VS. Et dans le droit div, créons un autre div, qui tout le bouton. Et le bouton est nommé comme téléchargement CB. Sauvegardez-le et regardons le site Web. Oui, on a le bouton ici aussi. Alors maintenant, vérifions notre prototype. Et comme vous pouvez le voir que le texte entier et le bouton est vers la droite des contraintes et aussi le texte et le bouton est situé exactement dans le centre vertical de l'image. Et comme vous pouvez le voir, nous avons tout le texte et le bouton en bas de l'image. Donc, pour faire le texte et le bouton vers la droite des mates et revenons à notre fichier d'index. Et comme nous avons déjà une classe utilitaire, tout ce que j'ai à faire, c'est des données à l'intérieur de la classe Héros. J' ai juste besoin de mettre dans la classe utilitaire flex. Sauvegardons ça. Et puis nous vérifions. Juste comme ça. Nous avons le texte de régime final vers la droite des viandes. Et pour le faire dans le centre vertical de l'image, encore une fois, nous avons une autre classe d'utilité qui est articles descender. Appliquons cette classe particulière. Et dans un intervalle nous contre cela, nous avons le texte de régime final dans le côté droit ainsi que dans le centre vertical de l'image. C' est donc la beauté d'avoir une classe d'utilité. Cela nous a aidés à gagner beaucoup de temps. Et maintenant il y a fondamentalement modifier notre image aussi. Donc, en vérifiant le chemin de l' image, l'image est située en héros à l'intérieur de la div gauche. Alors passons à notre fichier de style et la cible ou l'image qui est Dodd héros point gauche et l'image. Donc, donnons fondamentalement un peu d'un pixel de 100 et un rayon de bordure de 500 pixels. Sauvegardez-le et vérifions le site Web. Et comme vous pouvez le voir que l'image est suffisamment grande. Et aussi, nous avons une légère courbure dans le bas de l'image, tout comme ça off ou prototype. Maintenant, nous allons essentiellement styliser notre texte et le bouton et aussi avoir un nombre suffisant d'espacement entre l'image et les différents textes, ainsi que BDB dans le texte aussi. Donc, tout d'abord, mourons tout le texte ici. Donc, si nous vérifions notre site Web, vous pouvez voir qu'à la fin par Texas essentiellement en couleur noire. Alors, changeons tout d'abord cela. Et comme nous le savons que l'Inditex est situé dans la div droite de la classe des héros. Alors allons à notre fichier de style, et je vais pointer le héros à droite point. Et à l'intérieur de la div droite, je vais changer la couleur de tous les éléments en blanc ou pur. Sauvegardons ça. Et comme vous pouvez le voir que la couleur est devenue blanche. Maintenant, fondamentalement plus défini le nom. Encore une fois, le nom est une balise H6 située à droite de la classe de héros. Alors copions à nouveau le point de héros de points, non ? Et ciblons la pile. Et je vais changer la taille de la police à 1,6 pièce. Sauvegardons ça. Ouais, ça a l'air parfaitement bien. Et aussi maintenant modifions la balise H1 ici. Donc encore une fois, il est situé dans la div droite de la classe de héros, donc il est copié. Ciblez la balise H1, changez la taille de la police à 4 rem, Voyons voir. Et nous allons également changer le poids de la police à 100. Sauvegardons ça. Oui. C' est bien sur nous contre vous qu'il y a beaucoup d' espace entre la première et la deuxième ligne. C' est donc à cause d'une plus grande hauteur de ligne. Donc, diminuons également la hauteur de la ligne à 1,5. Voyons voir, 1.2. Ouais, ça a l'air parfaitement bien. Donc maintenant, nous avons suffisamment d'espace entre la première, la deuxième ligne. Maintenant, si chacun se produit par temps, nous pouvons voir que le mot de développeur Dalit est dans une autre couleur. Donc, comme nous le savons, nous avons fait une durée spécifique pour le développeur. Alors nous allons cibler ça. Donc, c'est à nouveau dans la div droite. Et nous allons cibler la portée. Et je vais changer la couleur en primaire. Oui. Et je vais également ajouter un peu de fond de marge de sorte que, qui, c'est une bonne séparation entre le bouton et ce particulier, Je suis un créé un pervers. Et je peux le faire dans le héros point écrire X1. Donc, Margin-bottom. Donnons un tambour. Ouais, maintenant on est organisé la séparation et je veux aussi fournir un gramme de marge entre le nom et le mot du développeur Hammerklavier. Donc, pour cela, passons à la 86 et fournissons un bas de marge d'un rem. Ouais, maintenant ça marche parfaitement bien. Alors maintenant passons à l'étape suivante dans laquelle nous allons styler notre bouton. Donc, si vous vérifiez notre prototype, nous pouvons voir que le bouton a essentiellement un fond transparent et une bordure solide. Revenons à notre fichier d'index. Et nous avons déjà créé une classe d'utilitaire pour un boutons de base. Alors ajoutons une classe au bouton. Donc ça va être btn. Et aussi nous devrions avoir un autre dernier spécifique pour ce bouton particulier, et ce sera btn secondaire. Donc btn secondaire. Alors sauvegardons et vérifions le site Web. Oui, maintenant, on a le bouton. Maintenant, nous devons le personnaliser. Et comme nous le voulons. Donc, pour ce faire, allons à notre classe d'utilitaires et créons fondamentalement une classe secondaire ici, c' est-à-dire le tiret PTEN secondaire. Donc ici, nous avons besoin de l'arrière-plan pour être transparent, et nous avons besoin que la couleur soit primaire. Et nous avons aussi besoin de la frontière. Nous avons donc déjà créé la frontière, comme vous pouvez le voir. Mais pour le premier cas, nous l'avons rendu transparent. Mais ici, nous pouvons fournir une couleur pour que ce soit la bordure. La couleur du tiret est, encore une fois, rendre la couleur primaire. Enregistrez-le et vérifiez votre site. Oui, ça a l'air très bien. Maintenant, nous devons également fournir un état hôte. Donc, quand on survole, ça devrait ressembler à ce bouton particulier ici. C' est donc un joli symbole. Copions toute la clause secondaire du week-end ici. Et fournissons un vol stationnaire. Donc, nous avons besoin de l'arrière-plan pour être primaire, et nous avons besoin d'une couleur du texte pour être sombre. Sauvegardons ça et voyons. Et nous allons également fournir un délai de transition. Allons donc à nos huiles secondaires Btn. Copions simplement ce code particulier d'ici et collez-le juste ici. Et oui, maintenant ça a l'air prédéfini. Donc maintenant, nous avons fini avec la section droite NDI. Nous avons donc notre design, le texte d'accusation ainsi que le bouton de l'année dernière. Maintenant, il est temps pour nous d'ajuster l'ensemble de la mise en page et de faire apparaître la section héros. Donc les gars ont besoin de quatre battements ou le prototype, vous pouvez voir qu'il y a en fait assez d' espace entre l'image et le texte. Mais sur notre site, nous n'avons pas cela. Pour ce faire, revenons à notre fichier d'index. Et juste à l'intérieur de la classe Héros, je vais ajouter une de nos classes utilitaires précédemment créées qui est l'espace entre. Sauvegardons ça, et allons-y. Maintenant, rien ne s'est passé et s'est terminé. La chose que vous pouvez remarquer est que la poupée qu'ils texte et les images en fait ne prennent pas. Quantité égale d'espace. Ce texte prend beaucoup plus d'espace que l'image. Et nous devons les égaliser sous l'espace pris par l'image et le texte. Donc vrai que tau indique une autre classe d'utilité. Et la classe peut être appliquée sur la gauche Div. Et le nom de la classe est flex tiret 1. Permettez-moi de le copier et nous devons également l'appliquer sur le bon appareil. Eh bien, sauvegardons et passons à une classe d'utilité et créons fondamentalement cette classe particulière qui est enseignée flex one. Et tout ce que nous faisons, c'est d'appliquer un flux d'un. Sauvegardons ça. Allons sur un site web. Et vous pouvez voir que maintenant l'image et le texte prennent la même quantité d'espace. Et une autre chose que vous pouvez voir que l'image devrait être légèrement vers la droite. Fondamentalement, les images notent dans la position centrale de son conteneur, comme vous le savez, l'image et le texte est à l'intérieur de leur div respectif, mais il a fait n'est pas au centre de son div. Donc, pour ce faire, revenons à notre fichier index.html. Et juste à l'intérieur de la gauche, Dave, créons une autre classe d'utilitaire qui est juste de différer, expéditeur, expéditeur de cendres justifié. Laisse-moi copier le nom ici. Allons à la classe utilitaires et collons-la. Et tout ce que nous avons à faire est de justifier le centre de contenu. Sauvegardons ça. Et sauvegardons également le fichier d'index. Et maintenant, nous avons légèrement obtenu l'image vers la droite, ce qui la rend vers le centre de sa propre perspective div. Donc maintenant, nous avons une autre section de héros aménagée. Et l'autre chose qui annule que je vais fournir un peu plus de marge entre ce particulier, je suis un développement créatif et le bouton. Ça semble être beaucoup plus proche du mot. Alors passons au fichier style.css. Et ici, nous avons le tag H1. Je vais fournir un bas de marge du tourisme. Oui, maintenant nous avons une bonne séparation entre tous les différents textes. Donc les gars, maintenant il est temps de descendre à la partie intéressante où nous allons faire cette conception de boutique particulière dans le bas de notre site Web. Donc, pour que cela se produise, vous devez avoir une compréhension de base du polygone. Maintenant, si vous regardez un site Web, vous pouvez voir que la partie supérieure, c'est le premier site. Celui-ci est le deuxième côté, le troisième côté, le quatrième site et la cinquième diapositive. Donc, ce point particulier, c'est le premier, nous allons avoir la combinaison de coordonnées x et y. Ici. X et y seront 0. Et quand j'ai voyagé d'ici jusqu'à droite ici, x va être un 100 et y sera 0. La raison pour laquelle x est un 100, c'est parce que X a voyagé horizontalement de ce point jusqu'à ce point. Donc c'est un 100 et y change quand il y a un mouvement vertical, mais jusqu'à maintenant il n'y a pas de mouvement vertical, donc y est 0. Maintenant, si je me déplace de haut en bas jusqu'ici, et à ce point particulier, x va être un 100 et y sera aussi un 100 parce qu'il y a à la fois un mouvement horizontal, bien moins vertical. Donc, les deux coordonnées x et y seront un cordon de 100 nerfs essentiellement jusqu'à ce point. Revenons à notre fichier de style et faites défiler jusqu' à ce que nous trouvions l'étiquette d'en-tête où nous avons appliqué le sac ici, je vais entrer un chemin de clip. Et sélectionnons un polygone. Donc, dans la première étape, le point initial où nous avons obtenu à la fois x et y comme 0, donc c'est 00. Et dans la seconde, x a atteint ce point particulier où x est un 100 et y est 0. Donc x va être un 100 pour cent chacun, et y va être 0. Et dans la prochaine étape, X va voyager d'ici jusqu'au bas où x et y, tous deux vont être un 100 pour cent a besoin d'un 100 pour cent, d est 100 pour cent chacun. Donc, à ce point particulier, les gars organiques de deviner quel sera le pourcentage de x et y. Donc x va voyager d'ici à ici. Donc jusqu'ici, ce sera un rendez-vous à 100 pour cent. Donc, si c'est pour le dire jusqu'à ce stade, ça va être d'environ 70 pour cent chacun. Et pour le cas du Y, il va voyager d'ici jusqu'au fond. Si elle atteint ici, elle sera à 100 pour cent H. Et si elle doit atteindre jusqu'ici, elle sera d'environ 80 pour cent chacun. Donc, écrivons cette valeur ici, c'est-à-dire presque 70 pour cent chacun pour x et 80 pour cent H pour y. Et puis x et y est à ce point particulier, x va être 0 et y va être un 100 parce que X n'a pas tout mouvement horizontal, mais pourquoi a un mouvement vertical ? Donc x est 0 et y va être un 100 pour cent H, c' est-à-dire 0 coma 100 pour cent chacun. Sauvegardez-le et vérifions le site Web. Ouais, comme vous pouvez voir que nous avons Tau, les spécifiés se produisent qui juste ici. Mais nous devons apporter une légère modification. Autrement dit, la propagation des bords tranchants trop haut. Donc, nous allons le réduire et que nous pouvons le faire en ajustant la valeur y. Alors augmentons le y à 87 et voyons. Ouais, maintenant il est devenu un peu bas et aussi légèrement vers la droite. Maintenant, faisons aussi quelques légères modifications pour le rendre un peu meilleur. Donc les gars, on peut avoir un peu plus d' espace entre le contenu du héros NDI et le cœur. Il est si vrai que nous choisissons fondamentalement le héros, le div de héros entier. Et nous allons essentiellement fournir une patty acheté terme de 5 eux. Désolé. Sauvegardons ça. Maintenant, nous avons une quantité suffisante d'espacement entre le contenu de n désastreux héros et le plus net. Et laissez-nous aussi voir ce qui va se passer si vous essayez de bouger la fin, techniciens de régime peuvent alerter un peu vers le haut. Alors pour ce faire, sélectionnons le héros de fin, non ? Donc, ici, nous avons la NDA ici ou à droite, et donnons une marge, en haut. Donc, si vous voulez l'amener au sommet, vous devez fournir une valeur négative. Essayons avec moins d'urine phi. Oui. Maintenant, il est devenu légèrement sur le site supérieur et il a l'air agréable. Donc maintenant, nous avons appelé tau, le texte de fin Dyer et l'image parfaitement aligné. Et aussi nous avons une courbure D forte et globalement la section héros semble assez agréable. Donc les gars, on a fini avec la section héros de notre site Web. Et notre section héros ressemble assez à celle de notre prototype. Et donc l'acide. Et j'espère vraiment que vous avez compris le développement de base Tarde que j'ai fait dans cette vidéo particulière. Et les gars de la Nasa dans la prochaine vidéo, nous allons construire la section héros. Et je vous verrai là-bas. 6. Concevoir la section à propos: Salut les gars, bienvenue dans une autre vidéo. Et dans cette vidéo particulière, nous allons créer la section À propos de notre site Web. Donc, dans la vidéo précédente, nous avons complètement construit la section héros, qui comprend la barre de navigation et la section condensée de héros désastreux. Alors maintenant, nous allons construire la section avorter. Et comme vous pouvez le voir, nous avons une boîte. Et à l'intérieur de la boîte, nous avons deux éléments différents qui est sur le côté gauche, nous avons l'image, et sur le côté droit, nous avons tout le texte, qui comprend le titre, le contenu principal, comme un dernier différent icônes de médias sociaux. Donc on devrait avoir deux divs différents. Un degré va tenir la viande et l'autre a disparu. J' ai entendu tous ces éléments de textes différents. Alors passons à notre fichier index.html. Et laissez-moi zoomer. Donc, juste après la balise de fin de l'en-tête, je vais créer une nouvelle section avec une classe d'environ. Et à l'intérieur de cette section, nous devons créer une boîte. Donc, je vais créer un div avec une classe de conteneur. Et à l'intérieur de la boîte, comme vous pouvez le voir, aura deux éléments différents, l'élément image et l'élément texte. Alors créons le premier live. Et je vais donner une classe de droit. Et je vais avoir la deuxième div, qui va avoir la classe de gauche. Donc je vais placer le div gauche sur le dessus. Donc, à l'intérieur de la gauche, si nous avons la pile d'images, alors ouvrons cela et à l'intérieur de la source, naviguons vers le dossier images. Et je vais utiliser l'homme du héros. Cela signifie exactement la même image que nous avons utilisée dans la section héros. Nous avons donc fini avec la bonne partie, c'est-à-dire la partie image. Passons maintenant à l'endroit suivant. Donc, tout d'abord, nous avons le H1, qui est la viande du clavier et le mot moi est en fait une couleur différente. Nous devons donc utiliser une travée. Alors revenons en arrière et entrons dans le bon div. Tout d'abord, nous aurons la balise H1, qui va avoir le sujet. Et à l'intérieur de la travée, nous aurons le mot moi. Et après cela, nous avons eu l'introduction. Alors copions ça. Alors mettons cela dans une balise h3, et collons-le juste ici. Et après cela, nous avons un peu de texte aléatoire rempli de texte. Donc, nous allons fondamentalement créer un paragraphe ici. Désolé. Et nous allons Ender Lauren 10, juste pour un texte rempli. Ou pour le moment, il est temps pour nous d' ajouter toutes ces différentes icônes de médias sociaux. Et faisons ça. Donc, les gars, pour inclure toutes ces différentes icônes de médias sociaux, je vais créer un autre div juste à l'intérieur la droite Div et ne lui donne pas une classe comme sociale. Et à l'intérieur de cette div, nous allons utiliser la balise d'ancrage pour contenir toutes ces icônes différentes parce que toutes ces icônes ont un appel à l'action. Donc, quand j'appuie dessus, ça devrait nous emmener sur un autre site Web. Il est donc préférable d'utiliser une balise d'ancrage. Donc, je vais créer une balise d'ancrage et la surface va rester nulle maintenant. Et la perspicacité daga, daga va placer une image. Allons donc dans le dossier des images. Et le premier de tout, nous avons le logo du site, qui est le monde entier, mais le tiret B et G. Donc, nous allons en fait copier les excites un tag manga pour quatre fois de plus. Alors, sélectionnons-le. Et tout en appuyant et en maintenant sur Alt et Shift, je vais appuyer sur la flèche vers le bas quatre fois de plus. Et cela peut nous aider à copier facilement le texte particulier que nous voulons. Et maintenant, choisissons la deuxième image, et c'est le logo. Ensuite, nous avons celui Instagram , LinkedIn, et GitHub. moment, nous avons ce que tous les majors en place. Sauvegardez-le et laissez-moi l'ouvrir et revivre le serveur une fois de plus. Et comme vous pouvez le voir, nous avons toute l'image et toutes les différentes icônes, et je vais introduire une légère modification pour la rendre plus petite. Bon, donc avant de passer à autre chose, je vais fournir un peu d'espacement entre la partie supérieure, c' est-à-dire la partie Héros sous la partie avortée, car vous pouvez voir que c'est assez proche. Donc, pour ce faire, sélectionnons fondamentalement cette section ici, parce que le code entier est enfermé dans la section about. Alors passons au style. Et je vais renvoyer le cours sur le sujet. Et je vais donner un rembourrage de trois ans viennent du haut et le bas est 0 de gauche et de droite. Oui, maintenant nous avons un cours officiellement monospace du haut. Et maintenant, nous allons fondamentalement réduit la taille et les rendre alignés dans le bébé ne sera pas. Donc la première chose que je veux faire est de commencer à l'intérieur de la classe sociale. Nous avons déjà la classe utilitaire flex et appliquer mort ici. Sauvegardons ça. Et comme vous pouvez le voir, maintenant tout est aligné sur une seule ligne. Et maintenant, nous allons le rendre un peu plus petit. Donc, il est situé dans la section environ à l'intérieur de la bonne classe. C' est la bonne division. Et nous avons un autre div à l'intérieur connu asocial. Alors allons à notre fichier de style et je vais cibler la section A propos. Et à l'intérieur, nous avons le social. Notre div. Et à l'intérieur, nous avons l'étiquette d'ancrage et les images et le brillant à l'intérieur de l'étiquette d'ancrage. Alors sélectionnons l'image. Et je vais fondamentalement changer la hauteur, 250 pixels. Les 25 devraient avoir l'air bien. Ouais, néanmoins, en gros, le rendre plus petit et le style WWL plus tard. Et puis aussi fournir une marge, n'est-ce pas ? Marge à droite de 10 pixels. Maintenant, nous avons la scie logo dans ma plus petite taille et aussi nous avons suffisamment d'espacement entre eux. Et je me sens comme un prototype. Nous pouvons voir que le texte saison à droite de l'image. Donc, pour ce faire, revenons à notre index.html. Et juste dans le conteneur, je vais à nouveau jouer la classe utilitaire flex et bogue en vedette. Nous pouvons voir que la texture n'est pas le droit de l'image. Et nous allons aussi en faire le centre vertical. Donc, nous avons attrapé une autre classe d'utilité qui est éléments que je l'envoie et maintenant ce n'est pas descendant. Et nous allons également appliquer le flex tiret un à gauche et le def droit, sorte que l'image et le texte Basel prennent autant d'espace. Appliquons donc un flex Dash un sur la gauche si impeccable pour le diff droit. Ouais, maintenant ces deux-là prennent la même quantité d'espace. Et maintenant, faisons quelques légères modifications pour les rendre plus beaux. Alors les gars, maintenant, nous allons changer la taille de notre image. Ce genre de regard un peu petit. Donc, laissez-nous essentiellement sélectionner l'image. Donc l'image est située dans la classe gauche, c'est-à-dire la division gauche. Alors passons à un fichier de style et ciblons la section à propos. Nous avons attrapé la Div gauche à l'intérieur de la gauche si nous avons l'image, et je vais changer la hauteur à 500 pixels. Aussi, je veux changer le rayon de la frontière. Rayon de bordure jusqu'à 1000 pixels. Sauvegardons ça. Et voyons voir. Oui, maintenant il est beaucoup mieux. Et aussi connu comme faire quelques légères modifications à notre image. Alors maintenant, modifions fondamentalement le About Me et appliquons la couleur qui est la couleur spécifique au mot moi, comme ça dans notre prototype. Donc, le sujet de moi où il est situé à l'intérieur de la bonne division de la classe. Donc point, point, point, point, droit. Et ils m'abandonnent est une étiquette H1. Et nous allons changer la taille de la police, 250 pixels. Et changeons aussi la couleur en primaire, c'est la plage. Donc, changeons la couleur en primaire variable. Vérifions le site. Oui. Maintenant, l'avortement m'a été modifié. Maintenant, nous allons cibler le H3. Voilà l'introduction. Laisse-moi le copier. Donc, modifions la taille de la police à 20 pixels. Et il y a aussi ajouter une hauteur de ligne de trois. Sauvegardons ça. Oui, maintenant ça a l'air plutôt mieux. Et ils vont également ajouter quelques paragraphes ou phrases supplémentaires à cette zone d' introduction particulière parce qu'il est une sorte de MD à la recherche. Alors passons à notre index.html. Et ici, je vais ajouter beaucoup de Dundee. Sauvegardons ça. Et évidemment d'avoir suffisamment d'espace au-dessus de ce logo particulier. Alors passons au style de notre CSS. Vous avez déjà sélectionné le logo ici. Alors ajoutons une marge. En haut d'un rem. Oui. Bien sûr, quantité suffisante d'espacement entre le logo ainsi que la fin diastolique assez. Donc les gars, maintenant je vais augmenter la taille de notre paragraphe parce que je sens que c'est un peu difficile à lire. Alors, allons dans notre style.css. Encore une fois, permettez-moi de sélectionner les divisions à propos et à droite. Et je vais cibler le polygraphe et je veux augmenter la taille du téléphone à 20 pixels. Ouais, maintenant il est beaucoup lisible et aussi je veux augmenter légèrement la taille de ces icônes. Nous avons donc déjà sélectionné les différentes icônes des médias sociaux, et je vais augmenter leur hauteur à 30 pixels. Sauvegardons ça. Ouais, maintenant ça a l'air beaucoup mieux. Donc les gars, on en a fini avec la section du conseil d'administration aussi. Et il ressemble assez à celui de notre prototype. Et à cette courbure particulière, nous allons essentiellement atteindre I dub et BR sur lequel vous travaillez, Tuons section parce qu'il doit être facile de modifier la partie supérieure de la section de compétence sur terre, la partie inférieure de la à propos de moi section. Nous le ferons dans la prochaine vidéo lorsque nous construisons la section des compétences. Donc c'est ça les gars avec la section Libor, nous avons terminé avec succès la construction. Et je vous verrai la prochaine vidéo. Merci. 7. Codage de la section Compétences: Salut les gars, bienvenue dans une autre vidéo. Et dans cette vidéo particulière, nous allons construire la section des compétences de notre site Web. Donc, dans les vidéos précédentes, nous avons construit la section héros ainsi que l'abandon tel dans. Et maintenant, nous avons le temps de passer à la troisième partie dans laquelle nous allons construire la section des compétences. Donc, en parlant de notre processus de conception, tout d' abord, nous allons créer la balise H1. Après cela, w0 aura un paragraphe en avant par tous ces dieux différents. Donc nous avons nos six cartes différentes ici, et chaque dieu a quelques informations à l'intérieur, comme un logo, un titre intelligent et un paragraphe. Et nous allons utiliser des grilles CSS pour obtenir ce look de carte. Donc ça va être une vidéo très instructive. Et maintenant, allons sur notre fichier d'index. Donc, la première chose que je veux faire est que je veux nettoyer légèrement notre code. C' est notre indice. Et comme vous pouvez le voir qu'il est en fait à la recherche de grandes données collectées et je vais être à jour identifier effectivement une section qui facilement. Donc ce que je vais faire, c'est que cette section désastreuse ici est essentiellement notre section héros. Alors écrivez une balle, notre en-tête. Je vais créer un commentaire qui est un commentaire de fichier d'index. Donc, pour ce faire, je vais ouvrir une balise MD suivie d'un point d'exclamation et de deux tirets. Donc, cela va créer une balise vide, et ceci est essentiellement appelé comme un commentaire. Et tout ce que vous écrivez à l'intérieur d'un commun usé être exécuté. Donc ici, je vais écrire dans la section de héros commence et je vais le copier. Et l'espace de piste à la fin de l'en-tête, et je veux le renommer. Est-ce que la section de héros se termine. Faisons la même chose pour la section avorter. Collons-le ici et laissez-moi le renommer en section A propos. Et laissez-moi le copier. Et nous allons coller la même chose à la fin de notre section d'abandon aussi. Donc, en faisant cela, notre code semble beaucoup plus propre. Et aussi si à l'avenir, si vous êtes sous debug ou Dieu, nous pouvons facilement identifier les différentes sections dans le fichier d'index aussi. Alors maintenant, passons à notre section des compétences. Encore une fois, je vais créer une matrice juste ici. Et je veux le nommer comme la section des compétences commence. Donc tout d'abord ici et je vais créer une section. Laisse-moi zoomer. Créons une section avec une classe de compétences. Et à l'intérieur de cette section, j'aurai un div avec un conteneur de classe afin que nous puissions placer tous les éléments au centre du conteneur de page. Donc, à l'intérieur de ce conteneur particulier aura un titre et le paragraphe. Le titre se compose donc de deux parties différentes. La partie principale et le point de compétence. Et le point de compétence est dans une couleur différente, donc nous devons mettre fin aux coups que dans une plage. Alors créons un tag H1 ici, et des souris et des compétences d'écoute à l'intérieur de l'intervalle. Suivi par nous avons un paragraphe, donc je vais sous un texte de remplissage. Bon, maintenant nous avons le titre ainsi que le paragraphe. Donc maintenant, si nous vérifions la section de la carte, comme vous pouvez le voir que nous avons six guides différents et comme je l'ai déjà dit, nous allons utiliser des grilles CSS. Donc, nous avons réellement besoin d'une boîte et à l'intérieur de la boîte aura toutes ces cartes différentes. Alors créons un wrapper ou une boîte. Laisse-moi le créer ici. Mais une classe d'emballage de cartes, garde en pointillé wrapper. À l'intérieur de cet emballage particulier, nous aurons notre carte unique. Donc, créons un div avec la classe de carte. Donc, afin d'ouvrir la carte, et comme vous pouvez le voir à l'intérieur de la garde VR hyping un logo. Donc, nous allons créer une balise image juste ici. Donc, à l'intérieur de la source, je vais faire une barre oblique. Allons dans notre dossier images et sélectionnons l'image de code. Maintenant, nous avons le logo en place. Ensuite, nous avons besoin d'un coup pour pouvoir utiliser une balise H2. Et je vais en cours de développement. Et nous avons un graphique à secteurs. Quand j'entre en lorem, ne vous remplissez pas ensuite. Donc maintenant, nous avons tous les éléments de base qui sont à l'intérieur d'une voiture. Alors les gars, avant de passer à autre chose, laissez-nous rapidement faire un léger style à notre compétence, style de l'espace. Notre titre a élastique, polygonale, et aussi nous allons cadran est une carte unique afin que nous puissions copier la même chose pour toutes les autres cartes différentes. Alors allons à notre fichier d'index. Et la première chose que je veux faire est que je veux fournir une classe à notre étiquette H1. C' est le cap des compétences parce que nous n'en avons pas donné auparavant. Donc je vais le nommer comme section Dash mal. Je veux le sauver. Allons à notre style.css. Donc la première chose que je vais faire est d'alimenter ce fond sombre particulier. Donc, comme vous pouvez le voir que nous avons tous ces cours de compétences pour cette section. Donc je vais cibler ça, c'est des compétences stockées. Et je veux donner un fond de couleur sombre qui est point. Sauvegardons ça. Et maintenant, nous allons fondamentalement le style sont en tête, donc cap comme CTO, différentes parties. Donc, ciblons essentiellement la rubrique. Nous avons donc donné une classe de tiret de section. Copions. Et je vais entrer les compétences, puis la section tiret de direction. Donc, tout d'abord, changeons la couleur en pure. C' est la couleur blanche. Et nous permet de changer fondamentalement la taille du téléphone 2, 3 chambre. Et nous faisons également le texte au centre de la page en fournissant un centre d'alignement de texte. Et gardons ça et voyons à quoi ça va ressembler dans le navigateur. Oui, il a l'air prédéfini. Et nous allons aussi fournir un peu de fond de marge afin qu'il soit bien séparé du paragraphe. Donc, un fond de marge d'émerveillement, devrait faire le bien. D' accord, pas de compétences. Le cap a l'air bien. Et aussi changeons la couleur du mot de compétences parce que nous l'avons en vert ici. Nous avons donc déjà appliqué une étendue à l'ensemble des compétences afin que nous puissions facilement y accéder via notre section qui efface. Alors copions-le. Et ciblons la portée et changez la couleur en primaire. Oui. Assez bien. Alors les gars, maintenant, lions notre paragraphe. Autrement dit, changeons sa couleur en blanc et amenons-la vers le centre de la page. Donc ce que je vais faire, il a dit que je vais copier ce tiret de section en direction juste ici. Ensuite, je vais faire plus v. Donc la chose cool à propos de CSS est que WEF a obtenu ce titre de tiret de section, qui est fondamentalement une classe pour cette balise H1 particulière. Et en spécifiant plus b, cela signifie que je veux dire comme n'a pas l'élément suivant. Et l'élément suivant que je veux sélectionner est fondamentalement un paragraphe. Donc, en spécifiant plus p, cela signifie que je veux sélectionner l'élément suivant après cette balise S1 particulière. Et c'est essentiellement l'épigraphe. Donc, à l'intérieur de ce paragraphe particulier, je veux changer la couleur en blanc que ces combustibles. Et aussi je veux le faire au centre de la base, donc l'expéditeur de ligne supplémentaire. Donc, je veux aussi un fond de marge de huit chambres. Le paragraphe et les articles sont donc bien séparés. Sauvegardons ça et voyons. Et j'ai l'air parfaitement bien. Donc, si nous faisons défiler vers le bas, vous pouvez voir qu'à la fin cette section de voiture est un morse. Et maintenant, essayons de réparer ça. Alors les gars, maintenant commençons notre processus de coiffage de garde. Donc, nous allons sauter sur la porte HTML. Et comme vous pouvez le voir qui sont à l'intérieur de notre emballage de Dieu, soyez quatre. Maintenant, nous n'avons qu'une seule carte. Quoi, comme vous pouvez le voir dans la conception, ils ont essentiellement besoin de six cartes. Alors maintenant, créons six d'entre eux. Je vais donc sélectionner la carte entière ici. Et tout en appuyant et en maintenant sur Alt et Maj, je vais appuyer sur la touche fléchée vers le bas pendant cinq fois de plus. Et cela a fait un total de six cartes différentes. Sauvegardons ça et disons en bordure de trottoir maintenant. Et comme vous pouvez le voir, nous avons six cartes différentes. Alors maintenant, passons au processus de coiffage. Et avant cela, permettez-moi de réduire rapidement la taille de cette icône particulière afin qu'elle semble mieux pendant le processus de conception. Donc, laissez-nous simplement cibler l'emballage de la carte et les images à l'intérieur. Alors passons à un fichier de style. Et ici, je vais sous le papier de carte à points et tous les majors à l'intérieur de cette div particulière. Et je vais changer sa hauteur à 100 pixels. Sauvegardons ça. Ouais, maintenant on a juste l'air bien et on va le modifier plus loin pendant le processus de conception. Donc maintenant ce que je vais faire est cette poupée, il est fondamentalement sélectionné emballage de carte. Donc, le garde Bradbury spécifiquement à l'intérieur des compétences. Et sélectionnons l'emballage de la carte. Donc ici, je vais taper dans l'affichage. Prends-le. Donc, comme je l'ai déjà dit, vous allez utiliser une grille pour atteindre le chariot comme si bon. C' est un outil absolument puissant et je peux vous aider à réaliser n'importe quelle sorte de mise en page complexe comme vous le souhaitez. Donc, si je la sauvegarde et que nous allons sur notre site, vous pouvez voir que rien ne s'est essentiellement passé. C' est parce que nous n'avons pas défini la grille. Donc, nous présentons, définissons la guilde, ah, combien de lignes ou de colonnes que Dhabi veut. Donc, ici, dans notre prototype, nous pouvons voir que nous avons deux rangées différentes et trois colonnes différentes. Nous devons donc spécifier le nombre de colonnes ici. Donc, je vais taper des colonnes de modèle de grille. Et ici, je vais taper dans un espace FR, un espace FR, un FR. Donc, si chaque séance d'entraînement, comme vous pouvez le voir. J' ai trois colonnes différentes et chaque colonne nous avons deux éléments différents. Et c'est la magie de l'inaction de la grille. Et maintenant, nous allons plus loin styliser ces cartes. Donc les gars ont vu savoir si elle dit pré-prototype, vous pouvez voir que la carte est fondamentalement avoir un fond blanc. Et maintenant, nous allons fondamentalement changer la carte d'offre de fond. Donc, avant cela, comme je l'ai déjà dit, vous devez spécifier ou définir une grille. Et nous avons spécifié la grille en tapant 1543 fois. Nous avons donc trois colonnes différentes. Mais ce sera un long processus. Et si nous avons plus de cinq ou six colonnes différentes. Il y a donc une autre façon de le faire. Autrement dit, vous pouvez simplement spécifier une répétition. Le rythme. Et le premier paramètre sera combien de temps cette cravate veut répéter un élément particulier. Donc, dans notre cas, c'est trois. Et le paramètre suivant est que voulez-vous répéter trois fois ? Dans notre cas, il s'agit d'un F5. Et si je l'enregistre et si vous consultez notre site Web et le rafraîchissez, vous pouvez voir que rien ne s'est passé. Cela signifie que la fonction de répétition fonctionne parfaitement bien. Et maintenant, changeons la couleur de fond de la voiture. Et comme nous le savons que Dieu est fondamentalement situé à l'intérieur de l'enveloppe de la carte. Donc, copions alors ce noyau d'ici et collez-le ici. Et ajoutons aussi une carte à points et changeons l'arrière-plan en blanc. Donc note de retour à pure. Enregistrez-le et voyons comment le diagramme a été modifié. Et comme vous pouvez le voir que toutes ces cartes sont encombrées ensemble. Nous devons donc avoir suffisamment d'espace entre eux, comme ça dans notre prototype. Donc, puisque nous utilisons la grille, C'est un processus facile, est un processus simple. Ou nous devons faire est que nous devons spécifier l'écart, c' est-à-dire la grille, le tiret, l'écart de tiret de colonne. Précisons un espace de Turin. Sauvegardons ça. Et comme vous pouvez le voir que nous avons un espace à distance F2 entre toutes ces cartes. Et comme vous pouvez le voir, nous avons aussi besoin d'un peu d'espace dans le fond, mais dans cette partie particulière. Donc, spécifions un écart de ligne. Maintenant, nous avons spécifié un écart de colonne. Maintenant, copions-le. Et je vais changer la colonne en rangée. Et fournissons un espace de flèche de 67. Sauvegardons ça. Et comme vous le voyez, maintenant nous avons bien sûr assez d'espace entre ces cartes. Et comme vous pouvez le voir que la, tous ces éléments à l'intérieur de la carte Sartre congestionné. Et si vous vérifiez votre prototype, vous pouvez voir que tout est en train d'avoir ainsi entre eux ou pas d'espace à partir de la frontière de la garde. Laissez-nous donc fournir un peu de rembourrage au panier. Alors allons à notre carte ici et fournissons un rembourrage de liberté du haut et du bas et deux pièces de gauche et de droite. Sauvegardons ça. Et comme vous le voyez, je sais que notre carte est plutôt belle. Nous avons bien sûr une quantité suffisante de rembourrage et quantité de soumission d'espacement entre les cartes. Maintenant, comme fondamentalement marcher à l'intérieur de la carte et de faire ces éléments dans leur position respective. Donc les gars, si nous avons pris notre prototype, vous pouvez voir que le logo est en quelque sorte flottant au-dessus de la carte. Et maintenant, il est temps pour nous de réaliser ce genre de regard. Donc, si nous vérifions le fichier d'index, nous pouvons voir que l'étonnement est fondamentalement situé à l'intérieur de la carte. Dieu est complètement enroulé autour de la division de l'emballage de cartes. Donc, si nous allons au fichier de style, donc la première chose que je veux faire est que je veux essentiellement couper le sélecteur d'image pour simple, parce que précédemment nous avons changé la hauteur de l'image. Et je l'ai collé juste ici pour que nous puissions facilement relier l'image et la garde. Donc la première chose que je veux faire est que je vais changer la position de l'image en absolu. Et je veux changer la position de la carte pour la relier. Sauvegardons ça. Et maintenant, nous pouvons voir que l'image est fondamentalement à l'intérieur de la carte. Et en spécifiant div absolu et retardé, cela signifie que le dieu va essentiellement agir comme le parent et l'image va agir comme un type. Donc, par exemple, à l'intérieur de l'incroyable, si je spécifie top 0, vous pouvez voir que annoncé les majors vont à la partie supérieure de la carte. Par exemple, si je veux spécifier 0 gauche. Maintenant, vous pouvez voir que l'image est allé tout le chemin à gauche de la voiture, pas à gauche de la page. Maintenant, le garde va agir comme le parent et les images peuvent agir comme l'enfant. Maintenant, si c'est comme si le proton pouvait voir que les images flottent sur le dessus de la carte. Donc nous devons sortir l'image des gardes, donc nous devons utiliser une valeur négative. Donc ce que je vais faire, c'est que je vais changer le sommet à moins 3,5 M. et qu'on le sauve. Et si vous vérifiez l'avantage contre vous que maintenant il est autiste dehors. Et maintenant, nous devons l'amener vers le centre de cette voiture particulière. Pour ce faire, changeons la gauche. Donc maintenant à gauche est 0. C' est pourquoi les images tout le chemin à gauche de l'intestin. Donc si je parle de 50 pour cent de date. Maintenant, le principal devrait être au centre, mais il n'est pas dans l'expéditeur de la garde. C' est parce que le bord gauche peut voir que le bord gauche est fondamentalement au centre de la carte. Le descendant NOR des images au 50 pour cent de la carte, l'extrémité gauche de cette image particulière est à D 50 pour cent de la carte. Maintenant, nous devons amener l'expéditeur du compagnon vers le centre ou le 50 pour cent de la carte. Pour ce faire, revenons à notre image. Et nous allons utiliser Transform Time solide. Donc, le temps select est essentiellement utilisé pour déplacer le principal en ligne pour l'axe des x, l'axe des y, comme encore une fois, le déplacer horizontalement, verticalement comme vous le souhaitez. Maintenant, nous utilisons seulement Translate X parce que nous voulons déplacer l'image dans le chemin horizontal. Donc, si je mets simplement alors 50 pour cent va déplacer l'image vers la droite. Mais nous voulons déplacer la masse vers la gauche parce que nous devons apporter cela dans une partie des servantes dans cette fin sur la carte. Alors mettons-nous un moins 50%. Et si je l'enregistre, vous pouvez voir que maintenant l'image est au centre exact ou le 50 pour cent de la tasse, 50% de la voiture et 50% de l'image est exactement alignée dans le bord horizontal supérieur de la colonne. C' est ainsi que nous réalisons ce genre de look flottant pour l'icône. Et maintenant, la section voiture a l'air prédéfinie. Et comme vous pouvez le voir que nous avons un espace de travail entre les paragraphes et un Dieu, je vais légèrement diminuer le bas de la marge de notre sac assez. Donc si on fait défiler vers le haut, on peut voir le tag p et on va le réduire à six d'entre eux. Et voyons à quoi ça va ressembler. Maintenant, il est en fait beaucoup mieux. Passons maintenant à la partie suivante. Donc les gars, maintenant laissez-nous le style détecte à l'intérieur de la carte. Donc, tout d'abord, allons à notre styles.css. Et à l'intérieur des cartes, je vais faire la ligne supplémentaire en tant qu'expéditeur. Donc, écrire le texte est fondamentalement aligné au centre. Deuxièmement, je voudrais également laisser un espace entre les deux et le paragraphe. Donc encore une fois, copions ensuite la section de la carte directe d'ici. Collons ici et sélectionnons la balise H2. Et je vais donner une marge inférieure d'un tambour. Sauvegardons ça. Oui, non, ça a l'air prédéfini. Donc, enfin, ajoutons également un état de survol. Donc quand je suis du tout, à cette carte en particulier, on fait jouer papa avec la couleur. Alors, sélectionnons à nouveau la section de la carte d'ici, et je vais la coller ici. Donnons une heure entière. Et je veux que l'arrière-plan joue avec la couleur. C' est si bon à voir. Oui, ça l'est. Nous pouvons définir aussi nous avons besoin de ce fondu lisse et fondu ou défaut. Allons donc à nouveau à notre carte ici et fournissons une transition de tous les éléments, 0,3 millisecondes. Et c'est, oui, ça a l'air plutôt bien maintenant. Maintenant, nous allons changer toutes ces différentes icônes ici aussi. Il est assez facile de les changer. Et passons à notre index.html. Alors changeons la deuxième carte. Donc celle-ci est la carte postale. Et maintenant, allons au deuxième jardin, changez l'image. Donc nous avons Dui, Yu x, puis nous avons l'iPhone, je suppose, puis la vidéographie. Et enfin, nous avons un GitHub. Donc si je l'enregistre, Voyons notre site Web. Comme vous pouvez le voir que toutes les différentes icônes sont à sa place et il a l'air assez bien. Donc la dernière chose que nous devons faire est cette courbure particulière juste ici. Donc, nous l'avons déjà fait dans la vidéo précédente, un assaillant demande vous les gars de simplement essayer si vous pouvez réaliser cela par vous-même parce que nous l'avons déjà fait dans la section précédente, juste radios éléphant. Voyez si nous pouvons comprendre comment nous pouvons maintenant faire cette époque particulière une courbure forte que je fais ici. Donc, ils abandonnent la recherche minute et essaient de comprendre vous-même. J' espère que vous l'avez essayé. Et si vous n'étiez pas en mesure de comprendre comment nous pouvons le faire, veuillez regarder la vidéo précédente dans laquelle j'ai expliqué le processus de conception en profondeur. Donc, en ce moment, essayons fondamentalement d'atteindre cette courbure particulière sur notre site Web. Alors allons à notre fichier d'index. Et comme vous pouvez le voir que toute la section des compétences réside à l'intérieur de cette section particulière, qui est d'avoir une classe de compétences. Donc, si nous allons au fichier de style dans la partie chien à nouveau, voir la partie compétences où nous avons appliqué l'arrière-plan. Donc, juste ici, je vais taper dans le polygone de chemin d'accès Clip. Et j'ai déjà testé diverses valeurs. Et Dy est finalement sorti avec quelques valeurs et je vais le coller. Je vais ici et gardons ça. Donc, si nous vérifions notre site, vous pouvez voir que nous avons une légère courbure. Mais vous pouvez voir que notre logo a été remplacé par cette courbure particulière. On a fait un peu de rembourrage sur le dessus de la tête. Donc, nous avons notre conteneur. Donc, à l'intérieur du conteneur, nous avons tous les autres trucs. Donc, si vous pouviez fournir un peu de rembourrage sur le dessus du conteneur, BOB sera en mesure de faire tomber cette rubrique particulière. Donc, je vais aller à un fichier de style et juste en dessous comme tue, je vais à nouveau cibler ou compétences et le conteneur. Et je vais donner un haut rembourrage de 100 pixels. Et cela fait baisser puis dissection EBIT vers le bas, et maintenant tout est clairement visible. Et nous avons également été en mesure d'atteindre cette courbure particulière selon notre prototype. Alors c'est ça les gars. Nous avons donc beaucoup appris dans cette vidéo particulière. Être complètement construit sur la, la section des compétences. Et c'est tout. J' espère que vous avez compris les choses de base que nous avons de la dette dans cette vidéo. Alors c'est tout, les gars. Dans la vidéo suivante, passons à la partie suivante de notre site Web. 8. Créer la section Projets: Salut les gars, bienvenue à la vidéo. Et dans cette vidéo particulière, v vont construire la section projet de notre site Web. Donc, dans les vidéos précédentes, nous devons construire la section héros, la section À propos et la section Compétences. Et maintenant, il est temps pour nous de sauter dans la section projet. Et si vous analysez une section de projet, vous pouvez voir que nous avons un titre principal juste ici. Et sous le titre ici, vous pouvez voir l'image. C' est essentiellement l'image du projet. Et nous avons aussi un petit paragraphe qui va définir ce qu'est le projet. Et ici, vous pouvez voir différents points. Ces portes dépendent donc du nombre de diapositives que vous avez. Et ce point vert ici indique la diapositive actuelle que vous avez déjà. Donc, fondamentalement, nous avons un cap. Et la deuxième partie est cette diapositive à part. Nous pouvons donc classer la diapositive en deux sections différentes. Ainsi, la première section peut être l'image et la biographie, et la deuxième section peut être cette différents points particuliers. C' est donc tout au sujet de la participation. Et maintenant, il est temps pour nous de coder et d'apporter la section des produits sur votre vie. Alors du riz, non ? Non, allons à notre fichier d'index et c'est encore une fois, voir cette section de compétences secondaires E. Donc, si nous faisons défiler vers le bas juste en dessous de la balise de fermeture de notre section, je vais placer un commentaire qui indique que notre section de peau est terminée et qu'elle est à mi-ligne. Et ici, je ne crée pas un autre commentaire qui indique que la section du projet a commencé. Et là, je vais zoomer. Et créons une section avec une classe de projets. Et à l'intérieur de la section, je veux créer un autre div avec une classe de conteneur à l'intérieur de ce div particulier. Tout d'abord, nous en avons un pouce qui porte le nom des projets. Alors faisons semblant que c'est un, et nous allons taper les projets. Bon, maintenant nous avons le tag H1 en place. Maintenant, revenons à la diapositive principale à part. Donc, les gars, nous avons fondamentalement besoin d'un wrapper pour contenir toutes les différentes diapositives que nous allons créer afin que le wrapper enferme toutes les diapositives différentes. Alors créons 1 d'abord. Donc, pour ce faire, allons dans notre fichier d'index. Et juste en dessous de notre tag H1, je vais créer un autre div avec une classe de curseur. Et à l'intérieur de cette diapositive particulière, une division, nous allons créer notre première diapositive. Donc encore une fois, je vais créer un autre div avec une classe de diapositive. Donc, à l'intérieur de la diapositive, comme vous pouvez le voir, nous avons d'abord une image. Donc, créons une balise d'image. Et à l'intérieur de la source, je vais entrer dorsolateral. Allons dans le dossier de l'image. Et j'ai créé une image avec un nom de visualisation de données. Alors sélectionnons le premier. Et deuxièmement, nous avons également un paragraphe ici. Donc, créons une balise de paragraphe et je vais entrer du texte. Sauvegardons ça. Donc maintenant, nous avons l'image comme paragraphe de vitesse dans leurs positions respectives. Donc les gars, à partir de maintenant nous avons le zeste est simple diapositive, mais nous avons besoin d'un couple de plus de diapositives. Donc, pour ce faire, je veux sélectionner nos singles light. Et tout en appuyant sur Alt et Maj sur mon clavier, je vais appuyer trois fois sur la flèche vers le bas. Et cela crée un total de quatre diapositives différentes. Alors sauvegardons et vérifions notre site Web. Et comme vous pouvez le voir, nous avons maintenant quatre images différentes et pour différents paragraphes. Donc, la première chose que je veux faire est que je veux réduire la taille de l'image. Donc, pour ce faire, allons dans notre fichier d'index. Donc, fondamentalement, le major situé dans cette division de leader, à l'intérieur de cette division de diapositives, ils peuvent accéder au second. Donc, allons dans le fichier style.css. Ici, je vais sélectionner le curseur. Donc, dans le curseur cellulaire, nous pouvons accéder à cette diapositive, la vision, et en satisfaire division en plus de notre image. Alors sélectionnons l'image et je vais fournir une largeur de 500 pixels et une hauteur d'environ 280 pixels. Très bien, maintenant cette glace est bien meilleure. Donc maintenant, il est temps pour nous de marcher sur notre curseur, parce que maintenant nous avons juste une image et un paragraphe. Alors maintenant, faisons ça. Donc les gars, pour créer notre curseur, nous allons utiliser une bibliothèque appelée un curseur lisse. Donc, pour obtenir cela, allons sur Google et chercher curseur lisse. Et nous allons choisir la première option ici. Et naviguons vers la section d'utilisation. Et si vous faites défiler jusqu'ici, vous pouvez voir le script. Donc, nous allons copier puis meurt clip d'ici. Et après ça, allons dans notre fichier d'index. Et juste au-dessus de l'étiquette de clôture de son corps, plaçons tout le score. Laisse-moi l'aligner. Et gardons ça. Donc maintenant, nous avons un JavaScript, mais nous avons aussi besoin du CSS pour notre curseur. Donc, pour obtenir cela, revenons sur le site et cliquez sur l'option Obtenir maintenant juste ici. Et copions le CSS. Donc, c'est fondamentalement un CDN. Il est copié. Revenons à notre fichier d'index et faites défiler tout le chemin vers le haut et écrivez un bot, notre liaison CSS, plaçons cette diapositive particulière est CSS, et sauvegardons. Donc, si nous vérifions notre site en ce moment, vous pouvez voir que rien ne s'est essentiellement passé. C' est parce que nous n'avons pas défini le curseur et maintenant faisons ça. Alors les gars, avant de passer à vous pour faire une légère modification. Donc, disons que dans l'ouverture de ces slicks site de bibliothèque, Allons sur ce site et nous allons cliquer sur l'option Obtenir maintenant ici. Donc, nous allons copier le JavaScript ici c'est parce que nous utilisons un CD et CSS. Nous avons donc également besoin d'utiliser un JavaScript CDN. Alors copions-le d'ici. Revenons à notre fichier index.html. Et si vous faites défiler tout le chemin vers le bas, c'est donc le code que nous avons précédemment copié à partir du curseur lisse à l'envers. Nous allons donc remplacer la dernière ligne de code d' ici et coller le nouveau code. Et gardons ça. Et comme vous le savez, nous avons déjà créé le fichier app.js lors de la première vidéo où nous avons mis en place le projet. Nous avons donc également besoin de lier notre index ou fichier HTML à JavaScript. Ici, je vais rendre la source du point de script, et au lieu de la source, je vais sous la barre oblique de point. Et sélectionnons le fichier app.js. Donc maintenant, nous avons lié ou le fichier inutile. Alors maintenant, passons à notre fichier app.js. Donc, ici, je vais utiliser jQuery. Alors laissez-moi entrer dollar et B vont sélectionner le document. Et je vais choisir la porte prête. Et ici, à l'intérieur du crochet rond, je vais créer une fonction de rappel. Et ce code particulier signifie que document.ready indique que lorsque les pages sont essentiellement chargées, je ne vais pas le code à l'intérieur de cette fonction particulière à exécuter. C' est pourquoi ce code particulier signifie. Donc, ici, nous devons sélectionner l'enveloppe de notre diapositive. Donc, ici, vous pouvez voir que le fichier index.html, le wrapper est nommé comme diapositive il. Laissez-moi le copier et revenons à notre fichier JavaScript. Donc, dans jQuery Biao va sélectionner un élément en utilisant le signe du dollar, suivi du nom de la classe. Donc, je vais entrer point suivi du nom de la classe qui curseur. Donc ici, je vais entrer Dot Slick. Ouvrons un support ouvert et ouvrons cette fonction lisse. Alors quand j'ai voulu le sauver. Et si nous vérifions le site ici, vous pouvez voir que maintenant nous avons une diapositive, mais nous n'avons pas beaucoup de style maintenant. Mais comme vous pouvez le voir que les fonctionnalités de base sont appliquées comme nous avons ce qu'un bouton suivant qui fondamentalement satellites à la diapositive suivante. Vous avez également un bouton précédent juste ici. Donc, en ce moment, nous avons un look assez basique pour une diapositive il. Et maintenant, nous concevons pour nous de modifier et personnaliser glissé et de le faire comme nous le voulons. Alors les gars, avant de coiffer notre lumière du soleil, ça nous a permis de faire des trucs de base comme le style du projet. Et aussi je veux un peu de fond de rembourrage à notre section afin que le chariot soit si bien séparé de ce fond blanc particulier. Alors terminons d'abord ces tâches de base. Donc, la première chose que je veux faire, il a dit que je vais aller au style.css. Et si vous vérifiez le fichier d'index, nous pouvons voir que la section de compétences a une section de compétences. Donc, nous fournissons essentiellement un fond de rembourrage à la section des compétences. Alors passons au fichier de style. Et si vous faites défiler jusqu'ici, vous pouvez voir que nous avons déjà sélectionné les compétences et la classe de conteneur. Donc, nous allons fournir un fond de rembourrage d'un 100 pixels. Sauvez-le. Et vous demande que maintenant nous avons à revenir dans l'ancien et la partie inférieure de la carte et la page suivante ou la section suivante ne se heurte pas. Maintenant, ça a l'air bien. Maintenant, laissez-nous les projets Tyler se diriger. Donc, si nous vérifions le fichier d'index, vous pouvez voir que le H1 est fondamentalement à l'intérieur de la section du projet. Allons donc à notre fichier CSS. Ici, je vais finir aux projets DOT. Et je veux sélectionner la balise H1. Tout d'abord, je vais changer la taille de la police à trois rem, je veux amener le texte au centre de la page. Donc, tapez text-align centre, et fournissons également une marge. En haut d'un rem. Et gardons ça. Bon, maintenant l'en-tête du projet est au centre de la page. Et maintenant on en a fini avec ça. Maintenant, passons à ce but de carrelage ou pour le curseur, la première chose que je veux faire est que je vais fournir un peu d'espace dans la partie inférieure et supérieure de l'image pour qu'elle ressemble à celle de notre prototype. Donc, pour ce faire, allons à notre style.css et nous avons déjà sélectionné les moyens. Donc ici, je veux donner une marge supérieure de trois rem, et un bas de marge de 38, je suis aussi bien. Sauvegardons ça. Et maintenant, si vous allez sur notre site, vous pouvez voir qu'il y a suffisamment de monospace. Le haut et le bas. Et si vous vérifiez le prototype, vous pouvez voir que l'image entière et le paragraphe sont au centre de cette section particulière. Donc, pour ce faire, laissez-nous sélectionner ou un curseur. Et à l'intérieur du curseur, nous avons les diapositives. Et tout d'abord, fournissons le centre d'alignement du texte. Donc, si vous l'enregistrez, et si vous vérifiez le site Web, vous pouvez voir que le texte est fondamentalement dans l'expéditeur. Et maintenant, nous devons apporter l'image à l'expéditeur. Pour ce faire, je vais fournir un flex d'affichage. Maintenant, nous avons maintenant l'élément die d'une manière horizontale. Maintenant, nous allons fournir aligner les éléments, le centre, les éléments de ligne, l'expéditeur. Donc maintenant ce texte particulier est dans le centre vertical de l'image. Maintenant, nous pouvons fournir une colonne de direction flexible pour enlever ce sac particulier dans la partie inférieure de l'image. Donc, voici, nous allons fournir une direction flexible de la colonne. Maintenant, si je l'enregistre, vous verrez que maintenant ce paragraphe particulier est dans les bouteilles du bas de l'image. Et je veux diminuer légèrement le bas de la marge de l'image. Et je vais l'amener à deux ou mètres maintenant ça a l'air bien. Nous avons donc apporté quelques légères modifications à notre image, et nous avons également apporté le labyrinthe et paragraphes au centre de cette section particulière du projet. Donc comme maintenant, supprimons ces boutons. Donc, pour supprimer ces boutons, Allons à notre fichier app.js. Et ici, à l'intérieur de notre fonction select, je vais taper des flèches, deux-points faux. Je vais le sauver. Donc maintenant, si nous vérifions le site et voyons que les boutons ne sont plus visibles, mais nous avons réellement besoin de points, tout comme celui de notre prototype. Donc, comme une première étape ou un indu est qu'ici je vais taper des points selon vrai. Et si vous l'enregistrez ici, vous pouvez voir que maintenant nous avons les points de base, mais ce ne sont pas les points que nous voulons réellement. Donc, ce sont une liste non ordonnée. Donc, afin de créer un point personnalisé, vous devez réellement créer une division personnalisée. Alors allons à notre fichier index.html, juste ici, juste en dessous de la fin de notre curseur. Donc, vous pouvez voir que c'est là que se termine notre division de curseur. Ici, je vais créer un autre div avec une classe de tiret curseur. Donc maintenant, nous avons créé un div vide. Mais à partir de maintenant, notre JavaScript ne sait pas que nous avons réellement besoin d'un point personnalisé, donc nous devons sélectionner ces points particuliers. Donc je vais copier le nom de la classe. Sauvegardez-le, et allons à notre fichier JavaScript. Et ici, je vais créer des points d'ajout, suivis de deux-points, créer une seule citation à l'intérieur. Je vais sélectionner notre point de tiret curseur. Alors assurez-vous que vous placez dans un chien avant cela. Et nous allons placer le nom de la classe qui est Slider Dash dot. Maintenant, nous avons essentiellement créé ou point personnalisé. Et si vous l'enregistrez, alors vérifiez DFE. A partir de maintenant, nous ne pouvons pas voir beaucoup de gènes. Maintenant, nous devons faire quelques modifications supplémentaires pour le faire comme nous le voulons. Alors les gars, la prochaine chose que je vais faire est de commencer. Modifions cette section de contrôle désastreux de fin particulière. Donc, quand on le fait ressembler à celui d'un prototype. Donc la première chose que je veux faire, c'est que les Hylton voient tous ces points différents. Et comme je l'ai déjà dit, ces portes sont liste non ordonnées. Donc, en ce moment, créons une classe personnalisée pour tous ces différents points. Et en utilisant cette classe personnalisée, nous pouvons fondamentalement modifier alors système de régime juste ici. Donc, pour ce faire, revenons à notre fichier JavaScript une fois de plus. Et ici, nous allons utiliser une autre propriété qui est classe de portes. Et nous voulons créer une classe nommée en points et nous assurer que vous n'ajoutez pas de point. C' est parce que nous ne sélectionnons pas un élément, nous déclarons simplement une classe. Donc, je vais taper des points et sauvegardons. Maintenant, si vous revenez sur le site, il n'y aura pas de changement. Alors pourquoi non, et sont ouverts les outils de développement Chrome. Donc, pour l'ouvrir, cliquez avec le bouton droit de la souris et cliquez sur l'option Inspecter juste ici. Et si je fais défiler vers le bas et que je clique sur l'option de sélection et je me bats, choisissez notre liste non ordonnée ici. Ici vous pouvez voir que la liste non ordonnée en ce moment va avoir la classe de points que nous avons spécifiée dans notre fichier JavaScript. Et ici, vous pouvez voir tous les différents alliés. Donc ce sont toutes les différentes listes. Donc ce que nous allons faire, c'est que w0, je veux appliquer un flex à ces points particuliers pour que tous ces différents contrôles viennent en une seule ligne, comme nous le voulons dans notre prototype. Et aussi nous pouvons désactiver ces points. Donc c'est ce qu'on va faire en ce moment. Donc, pour ce faire, revenons à notre style.css. Donc ici, je vais sélectionner les projets. Au lieu de cela, les projets que nous avons obtenu le tiret Slider, point. Et maintenant, nous allons également sélectionner notre classe de points personnalisés. Et la première chose que je veux faire, c'est que je vais désactiver ce point noir ici. Donc, pour ce faire, Tapons dans la liste, style, le type, et passons cela à zéro. Si je le garde. Donc, vous pouvez voir que les points noirs ont disparu. Et maintenant, faisons-le en une seule ligne. Maintenant, il est empilé l'un ni l'autre qui est en position verticale. Maintenant, nous devons le rendre horizontal. Pour ce faire, appliquons simplement un flex d'affichage. Flex d'affichage. Et si je le garde ici, tu verras que rien ne s'est passé. C' est à cause de, il est vraiment difficile de remplacer ou la diapositive lisse est un code. Donc, pour ce faire, nous devons entrer un point d'exclamation et taper important. Maintenant, si je le garde, vous pouvez voir que maintenant nous l'avons en une seule ligne. Donc les gars, c'est comme ça que nous pouvons modifier un élément particulier comme vous le souhaitez. Donc, dans notre cas, nous avons créé une classe personnalisée. Vous voyez cette diapositive est une propriété. Ensuite, en utilisant cette classe, nous avons modifié notre système de contrôle ici. Maintenant, modifions tout ce système. Donc, pour le faire au centre de notre section, je vais appliquer le centre de justify-contenu. Et maintenant, nous avons un descendant. Maintenant, nous allons plus styles système de contrôle particulier. Donc les gars, si nous vérifions notre prototype ici, vous pouvez voir que ce contrôleur particulier ou ce contrôleur de diapositives, est essentiellement affiché en termes de points. Mais actuellement de notre côté, nous avons le nombre à l'intérieur de ces différents points. Donc, si je clique avec le bouton droit de la souris et ouvrez nos outils de développement Chrome. Et si nous sélectionnons nos points à partir d'ici, vous pouvez voir que c'est la liste non ordonnée. Donc, la liste non ordonnée se compose de toutes les diapositives différentes. Et si j'ai ouvert la liste non ordonnée, vous pouvez voir les quatre alliés différents. Donc, si je passe à travers ces alliés dans la partie supérieure à nouveau, voir la sélection. Donc ces quatre alliés indiquent les quatre diapositives différentes que nous avons. Et maintenant, si j'ouvre un de ces alliés, il, vous pouvez voir un bouton et le bouton a essentiellement une valeur d'un. Donc maintenant, j'ai besoin de supprimer cette valeur particulière. Alors faisons ça. Revenons donc à notre style.css. Et ici, je vais copier ce code particulier d'ici. Maintenant, nous avons essentiellement sélectionné le wrapper que c'est curseur tiret point. Donc, ce wrapper se compose de toutes les différentes diapositives. Donc, je vais le sélectionner bouton de toutes les différentes diapositives. Et je vais changer la taille de la police à 0. Donc, si je change la taille de la police à 0, les éléments, cette plaque sera nulle. Les éléments ne seront pas visibles. Donc je vais changer la taille de la police à 0. Maintenant, si je l'enregistre, vous ne pouvez pas vraiment voir l'élément. Laisse-moi zoomer un peu. Nous pourrions en fait voir une petite marque de l'élément, mais ils sont toujours présents ici. Maintenant, modifions ces différents boutons plus loin. Donc la première chose que je vais faire est que je vais fournir un peu de largeur et de hauteur à nos points. Je vais donc fournir une largeur de près de huit pixels et une hauteur de 50 pixels. Sauvegardons ça. Et maintenant ceux-ci sont légèrement visibles. Et la prochaine chose que je vais faire est que je ne vais pas fournir un peu d'espace entre ces différents points. Alors fournissons une marge, droite, de cinq pixels. Sauvegardons ça. Maintenant, ils ont le nombre d'options de cours d'espace entre eux. Maintenant, supprimons leur bordure et leur contour. Donc, je vais fournir une frontière nulle. Et notre lignée d'hommes aussi. Sauvegardons ça. Et maintenant, ce sont des éléments simples. Alors changeons leur arrière-plan, colorions-le, alors retirez-le. Et je vais coller le code hexadécimal. Sauvegardons ça et vérifions. Oui, la couleur de fond a été appliquée. Et je vais fournir un rayon de frontière pour que ces regards dans l'homme survenu, comme celui de notre prototype. Nous allons donc fournir un rayon de bordure de 50 pixels. Et maintenant, ils ont un look incurvé. Et aussi je vais changer le curseur pour le pointer pointeur de curseur. Donc, quand nous apportons notre curseur au-dessus de ces torts, ils ont changé au point que l'apparence, et ces points ont réellement fonctionné parfaitement bien. Maintenant, nous devons faire une légère modification à ces points afin que R, cet affichage d'une couleur verte dans la diapositive actuelle, il est assis. Maintenant, faisons ça. Donc la chose que nous devions faire maintenant, c'est que je dois différencier la diapositive active. Donc, ici, vous pouvez voir que la lumière a une couleur différente comme un peu plus large. Alors, non, Allons sur notre site Web et je vais faire un clic droit et cliquer sur l'option Inspecter ici. Maintenant, si je fais défiler vers le bas et si nous avons sélectionné des points ici, ici, je vais ouvrir toute la liste. Et une chose que je veux que vous remarquiez, c'est cette classe active. La classe active sélectionnée n'est présente qu'à la 1ère date limite. Maintenant, je veux sélectionner le deuxième vivant. Et vous pouvez voir que c'est la classe active lisse a déplacé vers la deuxième illumination. Maintenant, je vais le sélectionner troisième et léger, et il est passé à la troisième liste. Donc, cet activiste slick particulier appliqué dynamiquement au point actuel ou à la liste actuelle que nous sélectionnons. Utilise donc une classe active slick particulière. Nous pouvons fondamentalement modifier notre point actuel. Alors maintenant, faisons ça. Laissez-moi fermer l'outil de développement et revenons à notre style.css. Ici, je vais sélectionner les projets. A l'intérieur des projets, nous avons les points. Et maintenant, je vais choisir l'allié. Et ils vivants que je veux les sélectionner. Donc, l'actif et la lumière qui est lisse tableau de bord actif. Et ce que je veux modifier, c'est le bouton. Et la chose que je voulais changer que je vais changer l'arrière-plan était 24. Et le motif que je veux appliquer est la couleur primaire. Sauvegardons-le et vérifions-le. Comme vous pouvez le voir maintenant, nous avons une couleur verte pour la diapositive actuelle ou la diapositive active. Laisse-moi passer à la première. Oui, le coloriste se tient parfaitement bien. Et aussi je veux que la largeur soit augmentée pour le point actif. Donc, je veux augmenter la largeur à près de 16 pixels. Sauvegardons ça. Oui, le point actuel a un mot plus élevé et la couleur est également en train de changer. Permettez-moi donc d'augmenter rapidement le bas de la marge de nos projets. Donc, je vais simplement sélectionner la section du projet et le conteneur à l'intérieur. Et je vais fournir une marge inférieure de 100 pixels. Sauvegardons ça. Donc maintenant, nous avons la réception en plaçant le fond et vous pouvez voir les différentes portes clairement. Donc, selon notre type de partenaire, nous avons les points. Et aussi pour le point actif, nous avons un différentiateur de couleur différente et un plan plus large. Donc, tout ce que nous avons fait ici, c'est que nous avons essentiellement sélectionné la liste actuelle ou la liste active. Vous avez une classe active de tiret de glissement. Et nous modifions simplement les propriétés de ce particulier vivant qui est actuellement actif. Alors c'est ça les gars. Nous avons entièrement construit la section projet. Autrement dit, nous avons une fin bientôt et entièrement fonctionnel diapositive et vous pouvez facilement voir ces images. Donc, si vous allez dans le fichier d'index, nous pouvons simplement changer l'image ici. Et l'autre je vais directement le vendre dans cette diapositive particulière aussi bien. Donc, nous pouvons maintenant aussi cliquer sur ces différents boutons pour naviguer autour de la diapositive il. Et nous avons aussi quel que soit le paragraphe pour chaque diapositive il aussi. Alors c'est ça les gars. Et j'espère vraiment que vous avez compris le concept de base de glissement et comment nous pouvons accéder à des propriétés différentes d'une bibliothèque et plus encore. Merci d'avoir regardé et je vous verrai dans la prochaine vidéo. 9. Créer la section Blog: Salut les gars, bienvenue à la vidéo. Et dans cette vidéo particulière, nous allons construire la section MyBlock de notre site Web. Et Eve, nous analysons cette section particulière. Vous pouvez voir que nous avons un titre de mon blog et un paragraphe. Et dans la barre inférieure, nous avons trois cartes différentes. Et à l'intérieur de chaque garde, nous avons quelques informations, comme une image, un titre. Nous avons obtenu la date que le contenu principal et lire plus de texte. Donc, ces autres différents condensent à l'intérieur de la carte. Donc, fondamentalement, nous avons obtenu la partie de tête comme Alaska à trois dieux différents. Et maintenant, frappons notre fichier d'index et commençons à construire la section mon blog. Donc, dans le fichier d'index, tout d'abord, permettez-moi de copier ce commentaire particulier et de le coller juste en dessous de la fermeture de la section et renommons il protège les extrémités de section. Et encore une fois, je vais ouvrir un autre commentaire qui indique que la section MyBlock a commencé. Et ici, fondamentalement, je vais zoomer et nous allons créer une section avec une classe de mon bloc. Et à l'intérieur de cette section particulière, Créons une autre division avec la classe de conteneur. Et à l'intérieur de ce conteneur particulier, nous avons essentiellement notre titre et le paragraphe. Donc, je vais créer un H1 et je veux nous le donner, mon blog. Et comme vous le verrez que le mot blog est dans une couleur différente. Donc fenêtre et enfermer cela dans une travée. Et allons le coller à l'intérieur de la travée. Très bien, et après qu'ils supposent que nous avons où le paragraphe, alors mettons un texte aléatoire à l'intérieur. Bon, maintenant nous avons créé le H dès que le paragraphe élastique. Et maintenant, il est temps pour nous de descendre à la section des cartes. Donc, fondamentalement, nous avons besoin d'un emballage de cartes. Donc, à l'intérieur de l'emballage de cartes réside toutes nos cartes. Donc, tout d'abord, juste, dessous de la balise de paragraphe, je ne crée pas un autre div avec une classe de tiret de carte pour APA. Donc, à l'intérieur de cet emballage de cartes particulier, nous avons nos cartes. Donc je veux créer notre premier Dieu. Donc, pour cela, créons un div avec une classe de carte et intérieur carte particulière. Tout d'abord, nous avons notre image. Donc, pour l'image, je veux créer une autre division avec une classe d'emballage de tiret d'image. Donc, à l'intérieur de son emballage d'image particulier, nous avons notre image. Donc, je vais ouvrir une balise d'image et à l'intérieur de la source je veux entrer une barre oblique de point. Et faisons déjà des majors. Et ici, j'ai attrapé l'article pH une photo et je veux sélectionner cela. Et c'est pour la section image juste ici. Passons maintenant à la section du contenu. Donc pour le contenu, je vais créer une autre division ici avec une classe de contenu de tiret de carte. Et à l'intérieur de ce tableau de bord de Dieu particulier la Division B aura tous les différents matériaux de textes. Donc, tout d'abord, nous avons notre H1. Donc je vais créer un électron ici. Et ici. Je vais copier ce coup particulier d'ici. Et je vais le coller juste ici. Sauvegardons ça. Et en dessous de la H1 nous avons la date contre C. Donc je veux finir brille une date dans une période. Et laissez-moi copier la date d'ici. Et collons-le juste ici. Et après cela, nous sommes devenus assez profonds. Alors laissez-moi créer une balise p pour du texte de remplissage. Et enfin, nous avons aussi une lecture plus de texte. Donc, ce coin du Texas particulier, j'ai un appel à l'action, donc je vais joindre cela à l'intérieur d'une balise d'ancrage et je veux le nommer comme lu pour. Sauvegardez-le, et vérifions notre site Web. Donc, dans la barre inférieure, nous avons le titre, le paragraphe que Dieu image et les différents matériaux. Alors maintenant, nous allons styler tous ces éléments. Donc les gars, si nous prenons notre prototype, vous pouvez voir que nous avons appris trois cartes différentes. Et pour dupliquer cette carte particulière, Deux fois de plus, passons à notre index.html. Et comme vous le savez, cette division N dy particulière se compose d'une seule carte. Donc, tout en appuyant et en maintenant sur Alt et Maj, je vais appuyer deux fois sur la flèche vers le bas pour créer un total de trois cartes différentes. Sauvegardons ça. Et si nous vérifions le site, vous pouvez voir que maintenant nous avons un total de trois cartes différentes. Dans le prototype. Vous pouvez voir que la, ma section blog a un fond sombre. Donc, disons en arrière-plan aussi. Et ici vous pouvez voir qu'à la fin désastreuse, ma section de blog réside dans cette section particulière avec une classe de mon blog. Alors copions ça. Allons à notre style.css ici. Je le veux. Ender dot mon blog et changer l'arrière-plan trop sombre. Sauvegardez-le et voyons si c'est Eclipse IDE. Vous pouvez voir que l'arrière-plan est devenu sombre. Et maintenant, stylisons fondamentalement notre titre et le paragraphe. Donc ça a explosé ça. Allons à notre fichier d'index. Et je veux donner un cours à notre H1. Donc, je vais le nommer Us section tiret, enregistrez-le, puis copiez aussi le nom de la classe et ici, mais je veux interter le titre de section de porte MyBlock. Et je vais changer la couleur en pure. Donc, si vous vérifiez à nouveau l'envers, voir que la couleur blanche a été appliquée non seulement à la jointure, mais aussi à notre paragraphe et aussi la zone H et le paragraphe a automatiquement été aligné au centre de la section. Pouvez-vous deviner pourquoi c'est arrivé ? Donc, la raison pour laquelle cela est arrivé est que Dhabi ont k1, la section nom de classe, titre néerlandais faire notre région comme indiqué dans ma section de blog. Et si vous vous souvenez, nous avons donné le même nom à notre s1 dans cette section de compétence, comme vous pouvez le voir. C' est pourquoi ce titre de tiret de section est en fait devenu une classe d'utilité. Donc, lorsque nous appliquons le même nom à notre section mon blog, les propriétés qu'ils sont activés à ce paragraphe particulier, j'ai orthographié. Donc notre travail est devenu un peu plus facile. Maintenant, nous allons fondamentalement changer la couleur de ce blog particulier. Donc, comme vous le savez, vous avez déjà une travée. Alors laissez-nous choisir, puis des choses désastreuses d'ici. Collez-le, et ciblez la plage et modifiez l'arrière-plan. Désolé, changez la couleur en primaire. Sauvegardons ça. Et voilà. Nous avons l'ETC1 et le paragraphe tous ensemble. Alors maintenant, faisons ces cartes en une seule ligne comme ça dans notre prototype. Donc, comme, vous le savez, nous pouvons utiliser des grilles CSS pour obtenir ce look. Alors passons à notre style.css. Et ici, je vais sélectionner l'emballage de la carte. Donc dot mon espace blog emballage de carte point. Sélectionnons cela et je vais appliquer une grille d'affichage. Et maintenant, nous redéfinissons la grille comme bon modèle de tiret, colonnes Nash. Donc, utilisons la fonction de répétition. Je veux répéter cela trois fois et le paramètre est merveilleux. Donc si je le garde, vous pouvez voir que maintenant nous avons toutes ces trois cartes en une seule ligne. Et comme vous pouvez le voir, tous ces gardes sont rassemblés ensemble. Nous avons besoin d'un espace entre eux. Alors revenons en arrière. Et ici, je vais parler de la colonne de tiret Gap. Colonne tiret écart de 30 théorème. Sauvegardons ça. Et maintenant, nous avons un espace de trois lemmas entre toutes ces différentes cartes. Et si nous vérifions le protocole, nous pouvons voir que la section condensée, la section condom du tableau de bord de voiture a essentiellement un sac blanc vers le bas. Et maintenant, faisons ça. Donc ici, je vais copier ce code à partir d'ici. Et maintenant, nous allons également sélectionner le tableau de bord de carte kanban condensé. Et ici, changeons l'arrière-plan à pur. Sauvez-le. Comme vous pouvez le voir que nous avons une petite division juste ici, c'est parce que nous avons juste appliqué à l'arrière-plan à notre tableau de bord de voiture condamné, mais nous avons appliqué le sac à la fin directement Dieu, donc c'est mon mauvais. Revenons ici et laisse-moi copier tout le noyau d'ici. Collons-le. Et nous allons aussi cibler puis diriger la carte et changer l'arrière-plan en pur. Et si nous l'enregistrons, vous pouvez voir que maintenant pour l'arrière-plan s'étend tout le chemin jusqu'à l'image et au bas de la carte. Alors maintenant, nous allons fournir un peu de rembourrage. Comme vous pouvez le voir, le texte entier est encombré à l'intérieur. Donc maintenant, nous avons déjà sélectionné le tableau de bord de voiture condamné. Alors laissez-moi fournir un rembourrage de 20 de ce diagramme sera appliqué à la fois en haut et en bas et à gauche et à droite. Alors sauvegardons ça. Et comme vous pouvez le voir que maintenant nous avons suffisamment d'espacement à l'intérieur de la carte aussi. Donc les gars, tout d'abord, donnons un peu de marge à ce coup particulier ici. Revenons donc à notre style.css et les administrateurs zooment un peu. Et juste ici, je vais sélectionner notre section mon, mon blog. Et à l'intérieur de ma section livre, nous devons laisser le contenu de la carte de bord et à l'intérieur du tableau de bord de voiture Condon, nous avons le tag H1. Donc je vais sélectionner ça et je vais fournir une marge inférieure d'un rem. Sauvegardons ça. Et comme vous pouvez le voir, nous avons entendu un fond de marge d'émerveillement. Et ensuite, fondamentalement, nous pouvons styler ce paragraphe particulier. Encore une fois, je vais copier ce code particulier à partir d'ici. Collons-le. Et au lieu de H1, ciblons le paragraphe. Et je vais fournir une marge supérieure d'un rem et une marge inférieure d'un rem aussi bien. Donc, maintenant, nous avons suffisamment d'espace au-dessus du paragraphe et dans la partie inférieure du paragraphe. Et maintenant, attachons cette étiquette d'ancrage particulière. Donc encore une fois, je vais copier ce code particulier à partir d'ici. Et ciblons la balise d'ancrage. Et je vais changer la couleur pour notre couleur foncée. Et aussi nous enlevons la décoration de texte. Décoration de texte aucun. Et ça a l'air très bien. Donc maintenant, nous en avons fini avec notre section de garde. Donc, si vous remarquez que vous pouvez voir les autres beaucoup d'écart dans ce domaine particulier. Et c'est parce que nous avons beaucoup de marge inférieure à notre paragraphe. Donc ici, je vais sélectionner la section mon blog et la section mon livre. Nous avons notre H1. Donc, le H1 a une classe de titre de tiret de section. Laisse-moi copier ça. Et ici, nous allons définir les cibles section fait ombrage. Et après ce titre de tiret de section, nous avons les paragraphes. Donc, nous allons simplement utiliser plus, plus b. Et quel que soit le code que je vais écrire à l'intérieur ce bloc particulier va écraser n'importe quel code là-dedans, un titre de tiret de section. Donc je vais fournir une marge inférieure de 30. Si je le garde. Comme vous pouvez le voir maintenant, nous avons obtenu adéquat et Moldavie marge bas deux sont très paragraphe et il n'y avait pas aussi fournir un peu de rembourrage au bas de ce particulier ma section de blog. Défilons tout le chemin vers le haut. Ici vous pouvez voir la section mon blog. Ici, je vais fournir un fond de rembourrage d'un pixel 100. Donc maintenant, nous avons l'espace de soumission de cours numéro 2 dans la partie inférieure de notre section de mon blog. Et si vous faites défiler vers le haut, vous pouvez voir que le titre, mon blog est vraiment proche de notre section projet. Alors donnons un peu de dessus de rembourrage. Donc, ici, je vais essentiellement copier le tiret de ma section blog frapper parce que cette section maintenant ombrage est une classe pour votre H1. Donc ici, je vais fournir un haut de rembourrage d'un rem. Et si nous économisons, et maintenant nous avons notre solution quantité d'espace et laissez-nous voir avec le tourisme. Oui. air plutôt bien maintenant. Alors c'est tout, les gars. Nous en avons fini avec la section mon blog et c'était assez facile parce que nous avions déjà la connaissance des grilles. Et nous avons le frapper le paragraphe et les différentes cartes et ils peuvent facilement changer ces images particulières à partir du fichier d'index. Et nous avons aussi une fonction de lecture plus qui pour l'instant ne nous mène nulle part. Et c'est tout. Et j'espère vraiment que vous les gars et détruisez cette vidéo en particulier aussi. Et merci d'avoir regardé, et je vous verrai dans la prochaine vidéo. 10. Codage de la section de contact: Salut les gars, bienvenue à la vidéo. Et dans cette vidéo particulière, nous allons construire la section contact de notre site Web. Et si nous analysons il y a dissection, vous pouvez voir que nous avons un cap juste ici. Et en dessous, nous avons deux dieux différents. Et à l'intérieur de chaque Dieu, nous avons tous les moyens, un titre et un texte d'information. Donc, tout d'abord, construisons la première partie ici. Alors allons à notre fichier d'index. Et la première chose que je vais faire est que je veux copier ce Coleman en particulier d'ici. Et je vais le coller juste ici à la fin d'une section, et je vais le nommer comme ma section de blog se termine. Encore une fois ici, je vais ouvrir un autre commentaire et je vais le nommer comme la section de contact commence. Et là, je vais ouvrir une section avec une classe de conduite. Et passons à la section. Et avant ça, laissez-moi zoomer un peu. Et ici, je vais créer une division avec une classe de conteneur. Et à l'intérieur de ce conteneur, tout d' abord, nous avons notre cap. C' est conduire moi et le mot moi est dans une autre couleur. Laisse-moi le copier. Donc, ici dans une étiquette ouverte et H1 et inséré vu Dieu Dao la conduite. Et à l'intérieur de la travée, nous avons le mot. Donc c'est tout pour la sécheresse, la partie de tête. Et maintenant, passons à la section des cartes. Donc, fondamentalement commencé à créer un wrapper de carte. Et à l'intérieur de l'emballage de cartes, nous pouvons stocker ces deux cartes. Donc, je vais créer un autre div avec une classe de tableau de bord de voiture, arpa. Et à l'intérieur de cet emballage de cartes particulier, nous avons fondamentalement toutes nos cartes. Donc je vais créer une autre division avec une classe de Dieu. Donc, à l'intérieur du Dieu, tout d' abord, nous avons l'image. Donc, je vais ouvrir une balise d'image et à l'intérieur de la source je vais faire une barre oblique de points. Et allons dans le dossier des images. Et cherchons l'iPhone. Et voici l'image. Donc fondamentalement en dessous de l'image, nous n'avons pas de titre. Je vais donc enfermer la viande froide x dans un H2. Alors ouvrons une balise H2 et laisse-moi coller le texte ici. Et en dessous, nous avons un certain nombre d'informations. Alors laissez-moi copier ça et je vais le coller à l'intérieur et H4. Bon, maintenant nous avons ça, toute la section des cartes est prête. Et comme vous pouvez le voir, nous avons deux cartes différentes. Et à partir de maintenant, nous n'avons qu'une seule voiture. Donc, je vais copier cette division ici, et nous allons la coller une fois de plus. Et maintenant, nous avons 12 dieux différents. Alors sauvegardons et vérifions notre site Web. Et si vous faites défiler tout le chemin vers le bas, maintenant nous avons deux cartes différentes, mais leurs informations supplémentaires respectives. Donc ici, je vais changer l'image du second Dieu pour moi. Et aussi copions cette information particulière d'ici et collez-la ici. Enregistrez-le et consultez notre site web une fois de plus. Bon, maintenant, passons à la simplification supplémentaire de toutes ces cartes différentes. Et organisons également la mise en page. Donc, les gars, comme première étape, appelons notre H1 juste ici. Revenons donc à notre fichier d'index et écrivons à l'intérieur de notre balise H1. Je veux donner une classe de titre de tiret de section. Et gardons ça. Et si vous consultez le site, ils peuvent voir qu'on peut me diriger là où il manque réellement. Mais il manque en fait. Il est toujours là. Donc, si vous ne savez pas dans la vidéo précédente, je vous ai dit que la dissection, que l'ombrage est une classe utilitaire. Et par défaut, les classes d'utilitaires ayant une couleur d'un pur ou blanc. Donc nous devons changer cette couleur. Donc, il y a aller à index.html. Et ici, je vais appeler P le titre de tiret de section, nom de classe. Et maintenant je suis dans style.css. Donc, nous allons sélectionner la section de conduite ainsi, section d'actif, tableau de bord en verre. Et je vais changer la couleur en noir. Sauvons ça. Et aussi changeons la couleur de notre, MON mot, c'est ce pan. Et changez sa couleur à la couleur primaire. Alors sauvegardons ça. Et quand nous revenons à la vente incitative, vous pouvez voir que maintenant la rubrique semble parfaitement bien. Alors maintenant, allons, ne fais pas nos cartes. Donc, la première chose que je vais faire est que je vais fournir une grille d'affichage. Ainsi, comme vous pouvez le voir, que Dieu est fondamentalement aligné d'une manière horizontale. Alors faisons usage de pour la grille d'affichage. Et ici, je vais sélectionner la section conduite. A l'intérieur de la dissection du cône. On a l'emballage du tableau de bord de voiture. Et ici, je vais fournir notre grille d'affichage. Et maintenant, définissons la grille, c' est-à-dire le modèle de tiret, les colonnes de tiret. Donc ici, je vais utiliser la fonction de répétition. Et je veux que ça répète deux fois. Et le second paramètre est merveilleux. Et si vous l'enregistrez, et si nous revenons au site Web, vous pouvez voir que ces deux sont alignés de manière horizontale. Et maintenant, nous allons sur la carte de la porte et modifions la taille de nos icônes. Et laissez-nous également styliser notre contenu texte à l'intérieur de la carte également. Donc les gars, la première chose que je vais faire est réduire la taille de ces icônes. Revenons donc à notre style.css. Et si vous pouvez voir les images essentiellement situées à l'intérieur de la division de la voiture, qui est fondamentalement à l'intérieur de la carte tableau de bord wrap-up. Donc, quand nos copays code particulier d'ici, et nous allons coller et laissez-nous sélectionner la carte et l'immédiat à l'intérieur. Et je vais lui fournir un TOEFL élevé, presque 100 pixels. Et nous allons aussi fournir une marge. En bas 04 plus une chambre. Et gardons ça. Et si chaque site actif, et vous pouvez voir que la taille est fondamentalement avocat et le texte n'est pas fondamentalement dans le centre. Comme vous pouvez le voir, il est égaré. Donc, pour apporter les textures et Dulles revenir au style.css. Et ici, je vais sélectionner la carte. Donc, à l'intérieur de la carte, nous avons le texte et nous allons aligner le texte à l'expéditeur. Et maintenant, nous avons parcouru l'ensemble du contenu au centre de l'écran. Et aussi, nous avons le texte également aligné centre à l'intérieur de la voiture ainsi. Et comme vous pouvez le voir, nous n'avons pas beaucoup d'espace sous notre zone H. Ces cartes sont trop proches de notre int1, donc nous avons besoin d'un peu de fond de rembourrage et juste ici dans le titre de section, je vais fournir un rembourrage plus thermique avant tout pour rem, sauver. Et maintenant, nous avons suffisamment d'espace. Et comme vous pouvez le voir, nous n'avons pas beaucoup d'espace pour cette section arrière de cône particulière. Donc, nous fournissons également un peu de rembourrage. Donc ici, je vais sélectionner la conduite comme un dernier conteneur. Et fournissons un fond de rembourrage de près de 100 pixels. Laisse-moi le sauver. Et ça me laisse l'aligner. Et maintenant étant bien sûr des options basées sur le fond aussi bien. Donc maintenant, nous avons la fin désastreuse première partie de la section me contacter. C' est le dieu ainsi que l'information en place. Et maintenant, il est temps pour nous de construire la section de formulaire ou la section d'entrée. Et maintenant, passons à ça. Donc les gars, dans le prototype, vous pouvez voir que cette dissection finale est connue sous le nom de section d'entrée. Donc, dans la première ligne, nous avons deux entrées différentes. Et la deuxième ligne, au nom de dieu et d'autres entrées. Et à la troisième ligne, nous avons une zone de texte suivie d'un bouton d'envoi. Donc, cette dissection finale est notre section d'entrée. Alors maintenant, allons à notre fichier d'index et concevons la structure de la section d'entrée. Donc, juste ici, à l'étiquette de fermeture de notre emballage de cartes, qui est juste ici. Je vais créer un formulaire. Et à l'intérieur du formulaire, je vais créer une division avec une classe de tableau de bord d'entrée. Donc, dans cette division de saisie de tableau de bord d'entrée aura les deux premières entrées, les médias solaires, la première entrée juste ici. Laisse-moi supprimer les trucs. Donc, nous avons pour le texte des fautes de frappe et nous avons aussi besoin d'un détenteur de place. Et ça va être ton nom. Laissez-moi le copier et le coller ici. Alors laissez-moi copier ce code particulier. Et je vais le coller ici. Et deuxièmement, nous avons reçu l'entrée par e-mail. Alors laissez-moi copier le texte de l'espace réservé à partir d'ici. Et ici, je vais remplacer notre espace réservé par votre email, et je vais changer le type en email aussi. C' est donc notre première dans Bootstrap. Maintenant, nous avons ces deux entrées et je veux joindre les données dans une autre division. Donc, I2 et moi voulons créer notre deuxième division avec une classe de tableau de bord d'entrée T2. Et à l'intérieur de cette division particulière, je vais avoir une autre entrée, qui va avoir le type comme texte et le détenteur comme sujet. Et enfin, nous avons aussi x données ici. Et laissez-moi copier l'espace réservé. Et ici, je vais ouvrir une zone de texte. Et je vais fournir une place pour votre message. Et enfin, nous avons aussi un bouton. Et pour le bouton, je vais créer une autre division juste en dessous du directeur final de notre entrée, Dash Rad 2. Et à l'intérieur de cette division particulière, nous aurons notre bouton. Et le bouton est nommé « cent ». Laisse-moi le copier et le coller. Donc, nous avons déjà une classe d'utilitaire pour l'instant bouton. Alors ouvrons une étiquette de verre et btn et btn primaire. Alors sauvegardons et vérifions notre site web. Donc, comme vous pouvez le voir maintenant, nous avons tous les éléments définis comme le votrenom dans les deux millions d'URI, mais la section du message, cet objet a le plus grand bouton Envoyer. Maintenant, il est temps premier style, toute la section d'entrée. Donc, dans un premier temps, revenons à notre fichier d'index. Et ici, je vais appeler P l'entrée, le nom de la classe Grab Azure, et allons à notre CSS. Et ici, je vais sélectionner la classe de conduite, ainsi que la façon dont le rappeur de tiret d'entrée. Et je vais fournir une grille d'affichage. Et le modèle de grille est colonne. Et je veux que ça répète quatre fois et que tu le sauves. Et si vous consultez le site Web et vous pouvez voir que votre nom et votre e-mail sont dans une seule ligne et vous avez également besoin d'un peu d'espace entre eux. Pour ce faire, fournissons un espace de grille de presque à la place. Sauvons ça. Et maintenant, nous avons un peu d'espace entre eux et aussi être besoin d'espace dans le fond, Bartlesville. Donc ici, je vais fournir une marge. Fond d'un tambour. Sauvons ça. Maintenant, nous avons reçu la soumission, mais les FAI dans la partie inférieure aussi. Et comme vous pouvez le voir que le sujet et les messages en une seule ligne, mais dans le prototype, nous pouvons voir que ceux-ci sont en deux lignes différentes. Donc pour ce faire, ce que je vais faire, c'est que je vais sélectionner la deuxième application VR d'entrée, qui enferme essentiellement la seconde au Bhoutan, l'idée suivante. Et là encore, je vais sélectionner la section conduite ainsi que dans Burdash R2. Et je vais fournir un flex d'affichage. Donc maintenant, si je le garde, vous pouvez voir que ces deux-là sont dans la même ligne. Maintenant, j'ai besoin de changer la direction de flexion en colonne. Donc la colonne de direction flexible. Et maintenant, nous avons ces deux-là en deux lignes distinctes. Et maintenant, nous avons besoin des ILD les plus éloignés dans Boots. Donc, si nous vérifions la bordure, vous pouvez voir que l'entrée a essentiellement beaucoup de rembourrage à l'intérieur. Mais notre, n'importe qui n'a pas la même chose. Les espaces réservés sont vraiment proches de la bordure de l'entrée. Et maintenant, réparons ça. Donc, pour ce faire, revenons à notre style.css et blanc ici, je vais sélectionner notre maïs en arrière et à l'intérieur du conducteur et sélectionner les balises d'entrée entières. Et je vais fournir un rembourrage de presque un rêve pour le haut, bas et la gauche et la droite. Et maintenant, nous avons un nombre suffisant de rembourrage en haut, bas et à gauche, juste après notre entrée. Et ici, vous pouvez voir que le bateau sujet et l'entrée du message ou le texte du message UDL vraiment proche les uns des autres. Et maintenant, il est de fournir un peu de marge bas à notre sujet ou vraiment peut fournir marge top deux sont SARM aussi bien. Donc ici, je vais faire face à cet accord particulier. Et je veux sélectionner l'entrée. Et fournissons un fond de marge de presque une pièce. Et maintenant, nous avons bien sûr quelle pièce de chiffres. Et aussi vous pouvez voir que l'ordre de lieu de message de wor est vraiment proche de la frontière. Et même si je tape quelque chose qui est vraiment proche de la frontière, nous avons donc besoin d'un peu de remplissage à l'intérieur de la zone de texte. Donc, ici encore, je vais copier ce code particulier. Et ciblons notre ADR et fournissons un rembourrage de près d'une jante. Et aussi il fournit un fond de marge d'un ou peut-être deux d'entre eux, sorte que les données textuelles et les batteries bien séparées. Et maintenant, il a l'air parfaitement bien. Nous devons donc également fournir un peu de marge inférieure à ces cartes. Comme vous pouvez le voir, la morue et le bouddhiste vraiment proche les uns des autres ou libérer. Nous pouvons fournir un peu de marge dopé avec cette loi particulière dans Bootstrap possible. Donc, je vais faire, c'est que je vais copier ce code particulier d'ici. Et nous allons le coller ici et sélectionner l'entrée et fournir une marge. En haut d'eux. Ou peut-être que trois d'entre eux devraient paraître bien. Oui, maintenant nous avons une bonne séparation de ce que les cartes aussi. Et maintenant, sur la section inverse est à la recherche prédéfinie désélectionnez celle de notre prototype. Et maintenant, faisons un peu de texture plus fine pour le rendre encore meilleur. Et si vous remarquez, vous pouvez voir que le modèle est fondamentalement égaré. Et dans le prototype, nous avons le bouton au centre. Donc, pour entrer dans ça, NLS, retournez à notre fichier d'index. Et pour la division ici, fournissons une classe de Btn Dash Harappa. Et laissez-moi copier ce nom de classe particulier. Sauvons ça. Alors laissez-moi aller à notre style.css. Et ici, je vais sélectionner la conduite, ainsi que notre bouton Dash Rapa. Et laissez-nous fournir text-align centre. Donc, si je l'enregistre, vous pouvez voir que le modèle est maintenant au centre. Mais il y a un petit problème qui quand je survolais à nouveau et voir qu'il prend cela ni visible. Donc, dans le fichier d'index, vous pouvez voir que j'ai donné une propriété de BTN primaire. Donc, dans les services publics voir à nouveau que nous avons la plage et la classe primaire de dés. Et dans le couloir ou l'effet, nous avons fondamentalement changé la couleur de notre texte à pure. Et je vais changer un peu ça en primaire. Je le sauve. Maintenant, nous pouvons voir que le texte est clairement visible et il y a aussi un changement. Donc ici, auparavant cette doctrine régulière de maïs était blanche quand nous planons dessus maintenant il a changé ou vert Asbell. Et je pense que cela semble beaucoup mieux que le texte de point de conduite blanc lorsque le hall où il est appliqué. Donc, pas de diabète aussi fixé. Je peux voir que la section Conduite Me est en fait très bien. Et nous avons également besoin d'un peu de rembourrage à la rubrique aussi. Alors faisons ça. Alors passons à notre styles.css. Et ici, je vais fournir un rembourrage, en plus de presque un rem. Et augmentons cela aux Romains. Voyez ce qui fait la différence. Et maintenant, nous avons une bonne séparation. Alors les gars, c'est tout. Nous avons enfin construit la section Conduite Me, et elle ressemble à celle de notre prototype. Et encore une fois, j'espère que vous avez compris le développement de base que nous avons fait dans cette vidéo particulière. C' est ça, les gars, merci d'avoir regardé et je vous verrai dans la prochaine vidéo. 11. Concevoir le pied de page: Salut les gars, bienvenue à la vidéo. Et dans cette vidéo particulière, v vont construire jour par défaut sur notre site Web. Donc, finalement, nous avons atteint la partie inférieure de notre site Web. Donc, si vous analysez la bordure, vous pouvez voir que B a un logo et un sommet juste ici. Et nous avons aussi un fond sombre à notre dossier. Alors allons à notre fichier d'index et laissez-moi cliquer sur Ouvrir ce texte particulier à partir d'ici, et laissez-nous le coller à la fin de notre section conduite. Et là encore, je vais ouvrir un autre Coleman qui indique que la section pied de page a commencé. Ici. Laisse-moi zoomer et ouvrons une balise de pied de page. Et à l'intérieur de cette étiquette particulière, tout d' abord, nous avons le logo. Donc, je vais ouvrir une étiquette d'image. Et à l'intérieur du médius, nous avons attrapé que le logo nav gars vers le bas et sélectionnez cela. Deuxièmement, nous avons ce x particulier ici. Laisse-moi le copier. Et ici, je vais ouvrir une autre division qu'une classe de texte de tiret de pied de page. Et à l'intérieur de cette division, nous pouvons simplement coller dans le code. Et sauvegardons ça. Laissez-nous visiter notre site Web. Et ici, vous pouvez voir que nous avons le logo ainsi que le texte juste ici. Donc maintenant, nous devons fournir un fond sombre. Alors passons à style.css. Et ici, je vais sélectionner le pied de page entier. Et fournissons un fond d'obscurité. Et nous avons aussi besoin que le SQL local ait vu le texte pour être au centre du pied de page. Donc, il ya aussi fournir ligne supplémentaire centrée. Maintenant, si je garde et retourne sur le site, vous pouvez voir que nous avons le logo trimestriel ainsi que le X ici. Alors maintenant, nous fournissons le rembourrage ainsi que changer la couleur de nos pieds de page. Donc, pour ce faire, revenons à notre style.css d'abord nous permettre ici, je vais sélectionner l'image. Et fournissons une marge supérieure de presque l'urine. Et le menton leur a acheté presque un tambour. Et vous allez voir que maintenant nous avons notre espace de solution en haut et en bas. Et je vais réduire légèrement le haut de la marge parce qu'il est un peu trop élevé. Et maintenant, il regarde prédéfini. Et changeons aussi la couleur de notre texte ici. Donc je vais copier le pied de page. Donc, nous allons cibler le texte du pied de page. Et à l'intérieur, nous avons notre texte de pied de page. Donc je vais changer la couleur en pure. Sauvegardons ça. Oui. Et vous pouvez voir que nous n'avons pas beaucoup de rembourrage bas deux sur x critères. Il est vraiment proche de la partie inférieure de ce dossier particulier. Donc, nous allons fournir un fond de rembourrage de presque à la pièce afin qu'il y ait une séparation de la lumière. Maintenant, nous avons une assez bonne séparation pour la lecture des textes aussi. Alors c'est ça les gars. Maintenant, le photon fonctionne prédéfini, comme celui de notre prototype. Merci d'avoir regardé, et je vous verrai dans la prochaine vidéo. 12. Attribuer l'animation défiler l'animation: Salut les gars, bienvenue à la vidéo. Et dans cette vidéo particulière, nous allons fournir une animation de défilement à notre site Web. Donc, ici, sur la barre de navigation, vous pouvez voir que nous avons fourni différents liens. Et à partir de maintenant, si vous appuyez sur un lien, vous pouvez voir que rien ne se passe fondamentalement. Mais après avoir fourni une animation de défilement, lorsque vous appuyez sur l'un de ces fardeaux, il va vous emmener à l'emplacement respectif. Donc, par exemple, si je clique sur une planche, il va me conduire automatiquement à bord 16. Et si j'appuie sur la section projet, cela va automatiquement m'emmener à la section projet. C' est ce qui est l'animation de soulignement. Et maintenant, appliquons le défilement et la dimension à notre site Web. Alors allons à notre fichier d'index. Et tout d'abord, permettez-moi de copier ce commentaire et fermons aussi notre commentaire de pied de page. Et maintenant, si on va jusqu'au sommet jusqu'à notre section héros. Dans la section héros voir à nouveau tous les liens que nous avons spécifiés et à l'intérieur il est Shift drag, vous pouvez voir que nous avons fourni un hachage et il n'y a pas d'emplacement spécifié ou pot. Alors maintenant, allons à notre section d'un boulon et faisons fondamentalement quelques modifications. Donc en ce moment, nous sommes dans la section du conseil d'administration et dans cette section particulière, je vais fournir une pièce d'identité. Donc ID est fondamentalement un mot-clé unique. Donc, par exemple, dans cette section particulière, je vais donner une idée d'environ. Cela signifie que je peux créer un autre ID avec un ID d'un bateau n'importe où ailleurs dans ce fichier particulier. Les ID sont donc des éléments uniques. Comme vous pouvez le voir, nous avons créé un ID pour notre section À propos. Et je vais copier cette pièce d'identité. Et juste ici, à l'intérieur de la balise d'ancrage, à l'intérieur de ce graphique particulier, je vais coller l'ID d'un bout. Nous avons donc le hachage et le nom de l'ID qui est un bot. Donc maintenant, si je sauvegarde et je, si nous retournons à votre site Web et si je clique sur le lien à propos ici ou l'étiquette d'ancre d'un bateau et voir que vers le haut sur les preneurs à la section à propos. Mais comme vous pouvez le voir qu'il n'y a pas d'animation. Donc fournir de l'animation est un joli symbole. Donc, l'animation du programme, passons à notre fichier CSS. Et si je fais défiler tout le chemin vers le haut du fichier CSS ici, je vais sélectionner le HTML et je vais fournir un comportement de défilement lisse si je l'sauvegarde. Et si je clique une fois de plus sur la balise À propos de l'ancre, vous pouvez voir que maintenant nous avons une animation de défilement lisse. Il s'agit donc de fournir une animation de défilement à notre site Web. Et maintenant faisons la même chose pour tous ces autres liens. Et allons à notre fichier d'index. Et ici, à l'intérieur de notre tête, je vais vous fournir une carte d'identité de la maison. Copions ça et collez-le juste ici dans la balise d'ancrage. Et allons à notre section de compétences. À l'intérieur de cette section, je vais fournir une autre pièce d'identité avec des compétences comme nom. Et allons aussi à la section des produits et faisons de même. La diversité des projets. Et enfin, il est aussi aller à ou ma section livre et fournir un identifiant de mon blog. Et faisons de même pour la dissection du maïs avec un identifiant de conduite. Alors c'est tout. Maintenant, revenons à notre balise d'ancrage et spécifions l'ID ici aussi. Maintenant, nous avons acquis des compétences. Pour votre section de compétences. Mettez six pour la section projet et mon blog pour la section blog. Et sauvegardons et vérifions notre site web. Donc sur nos projets personnels. Et ça va nous emmener à la section projet. Si j'appuie sur un blog, c'est un. Emmenez-nous à la section blog. Quel bateau. Oui, tout fonctionne parfaitement bien. C' est ainsi que nous pouvons nous fournir développer notre animation à notre site Web. Ainsi, toute personne qui est avec le nouveau site Web peut directement aller à de ces sections respectives en un simple clic. Et ils sont traités avec une animation lisse. Donc c'est tout pour ce cambriolage, les gars. Dans la prochaine vidéo, nous allons rendre notre site web complètement réactif pour toutes sortes de tailles d'écran. Et c'est tout. Je vous verrai la prochaine vidéo. Merci d'avoir regardé. 13. Site Web réactif - Menu de navigation Partie 1: Salut les gars, bienvenue à la vidéo. Et dans cette vidéo particulière, nous allons rendre notre site web réactif. Donc, c'est la première partie de celui-ci. Et dans cette vidéo particulière, nous allons construire une navigation mobile. Avant d'entrer dans la vidéo, je voulais vous donner une compréhension de base d' un mot que nous allons faire dans cette vidéo. Donc, pour ce faire, je vais cliquer avec le bouton droit de la souris et ouvrons l'outil de développement. C' est ainsi que l'outil de développement, et comme vous pouvez le voir, cette dissection de fin est connue sous le nom de section de port de vue. Et nous pouvons fondamentalement je juste la largeur et la hauteur de la fenêtre ainsi. Donc maintenant, je vais diminuer le bit lui-même, la fenêtre. Et comme vous pouvez le voir quand je vais jusqu'à la gauche, voyez, puis plongez jusqu'à Cyclopses. Nous pouvons voir beaucoup d'espaces blancs. Et si vous remarquez la barre de navigation, nous avons des liens godaddy dans différentes lignes et il est en fait assez mauvais. Donc, si une personne se connecte à votre site Web avec ce genre de rapport d'écran comme 9018949. C' est ce qu'ils vont voir. Donc on doit réparer tout ça. Ainsi, vous pouvez voir que lorsque nous lisons autour de 998, vous pouvez voir que la barre de navigation ou les liens se divisent en deux. Donc, nous devons réparer ça. Et au lieu de ce diagnostic de fin particulier, Barbie va créer un menu de navigation. Donc, pour une petite taille d'écran, nous allons désactiver la barre de navigation. Au lieu de cela, nous vous fournirons un hamburger. Ainsi, lorsque l'utilisateur clique sur hamburger, la barre de navigation de fin est morte sera affichée. C' est donc ce que nous allons faire dans cette vidéo particulière. Donc ça va être vraiment intéressant. Nous allons apprendre beaucoup sur la façon de rendre un site web réactif parce que notre version de bureau est assez impressionnante. Mais comme le disent les tendances actuelles, presque toutes les utilisations vont utiliser un smartphone et ils vont visiter votre site web via un smartphone. Donc, notre point de vue intelligent est assez mauvais et maintenant il est temps pour nous de le réparer. Alors commençons. Donc les gars, si vous remarquez que je vais diminuer la taille de la fenêtre. C' est la largeur de la fenêtre d'affichage. Et à ce point particulier, lorsque les parenthèses autour de 988 voient à nouveau que les liens se sont divisés en deux lignes différentes. Et ce dont nous avons besoin, c'est qu'à ce stade particulier, les liens vont se diviser en deux différents plus sains désactiver l'ensemble du nav obtenu. Donc, pour que cela se produise, nous allons utiliser la requête média. Donc, la requête média, nous allons spécifier un seuil de rentabilité, ou dans notre cas, c'est une largeur de la fenêtre d'affichage. Donc, quand ce seuil Comme atteint v, je veux désactiver la barre de navigation. Et vous allez voir que nous avons entendu beaucoup d'espaces blancs et nous allons bouger ça. Donc je suis en ce moment dans le fichier CSS et blanc ici, je vais sélectionner HTML et le corps. Et je vais fournir débordement x comme caché. Maintenant, si je le garde, vous pouvez voir que l'espace y est parti. Et maintenant, identifions le seuil de rentabilité ou la largeur dans laquelle nous voulons que la barre de navigation soit désactivée. Donc encore une fois, je vais diminuer la largeur de la fenêtre. Et là, vous allez voir qu'autour de ce point particulier, vers 1988, c'est là que la section des liens est divisée en deux parties. Je ne vais pas le prendre avant ce point particulier parce que vous pouvez voir que la conduite et les liens sont assez proches. Et je vais aller avec la valeur sûre de notre plus autour de ceux qui sont 204. Et la question de prendre tout cela ligne libérale 88 est que si une personne avec ce genre d'axe de fenêtre, vous êtes bouleversé et voir la conduite et les liens de régime final sont assez proches. Et ça n'a pas l'air si génial. Donc, si c'est 1024, c'est un peu agréable même dans ce genre de largeur et de hauteur de la fenêtre. Donc, ce que nous allons faire est que nous allons à notre styles.css. Et je vais faire défiler jusqu'au bas. Et ici, la requête des médias américains que je vais entrer au rythme des médias. Et l'aperçu sur le support, je veux spécifier la largeur, c' est-à-dire la largeur maximale. Et comme nous l'avons discuté, nous allons même avec 1024 pixel. Et là, je vais ouvrir le corps. Donc, tout ce que je vais spécifier dans ce bloc particulier sera applicable lorsque le sommet ici traverse 1024. Donc, ici, laissez-nous désactiver la barre de navigation. Alors passons au fichier d'index. Et à l'intérieur du NAV, je vais fournir un ID de tableau de bord principal. Laissez-moi le copier et sauvegardons. Revenons à style.css. Et ici, laissez-nous sélectionner notre barre de navigation. Donc c'est à l'intérieur de l'en-tête, nous allons sélectionner la barre de navigation. Nous allons donc sélectionner la barre de navigation via l'ID. Nous devons donc fournir un hashtag pour sélectionner l'ID. Et ici, je ne vais en montrer aucun. Maintenant, si je l'enregistre, et vous pouvez voir que la barre de navigation est manquante. Laissez-moi le démontrer. Donc maintenant, la richesse actuelle est presque 1054. Et vous pouvez vérifier cette valeur particulière quand elle est presque 10 à 4. Quand il traverse 10 à quatre, vous pouvez voir que la barre de navigation est désactivée. C' est ce que je voulais dire par seuil de rentabilité. Donc, lorsque le seuil de rentabilité de 1024 est atteint, à ce stade particulier, notre code à l'intérieur de notre requête média avec Ebert 0, 1, 0 à quatre pixels est activé. Et à l'intérieur de la requête média, nous désactivons la barre de navigation, et c'est essentiellement arrivé. Donc les gars, la première chose que je vais faire, c'est qu'on doit construire notre hamburger. Donc nous sommes dans un endroit ou des hamburgers quelque part juste ici. Donc, pour ce faire, allons dans notre fichier d'index et copions le code entier à l'intérieur du corps. Nous allons donc sélectionner les sections entières. Alors laissez-moi diminuer la taille et désélectionner le code entier qui est à l'intérieur du corps jusqu'à la photo. Alors coupons ça. Donc, si vous êtes sur Windows, vous pouvez contrôler et x, et si vous êtes un Mac, vous pouvez recommander et x. maintenant laissez-moi zoomer un peu. Et ici, à l'intérieur du corps, je vais créer une division avec une classe de tableau de bord, Dash Harappa. Et à l'intérieur de cette division particulière, collons le code. Donc tout ce que nous avons fait, c'est que nous avons essentiellement créé une nouvelle division qui est nommée comme notre site dash principal wrapper. Et à l'intérieur de ce Rapa particulier, nous avons collé le code entier qui est dans le corps désastreux. Et maintenant, laissez-moi l'aligner. D' accord, la prochaine chose que je vais faire, c'est qu' à l'intérieur de nos dés secondaires, c'est l'emballage. Nous allons créer une autre division avec une classe de hamburger. Et à l'intérieur de cette division, je veux créer un bouton. Et ce bouton va avoir une image qui est nommé comme hamburger dot SVG. Maintenant, si je le garde et si vous allez sur notre site, ici dans la partie supérieure à nouveau, voir notre hamburger je doute ici. Et maintenant, nous devons le styliser et nous devons changer de position et nous devons le transporter quelque part ici. Donc, pour ce faire, sélectionnons fondamentalement notre tiret de site, dash wrapper. Allons à notre style.css. Et ici, disons comme ça, je défile Mendes wrapper et change sa position pour relier dv. Et maintenant, sélectionnons notre hamburger. Donc, le hamburger est à l'intérieur de notre site dash Mendes wrapper. Alors d'abord, sélectionnons ça, suivi par notre fille de hamburger. Et ici, je vais changer sa position en absolu. Et je serai nouveau à localiser quelque part ici. Alors laissez-nous lui fournir un haut de presque 40 pixels. Et tout de suite autour de 40 pixels. Et si je le garde, et vous pouvez voir que maintenant le hamburger est absent par rayon ici, mais derrière le sac. Maintenant, nous devons le ramener devant le sac. Pour ce faire, fournissons un index d'insertion de 11. Si je le garde. Ici, vous pouvez voir que maintenant nous avons une icône de hamburger par ici. Donc, le hamburger est fondamentalement un enfermé à l'intérieur d'un bouton. Donc, par défaut, il va avoir un arrière-plan que j'ai aligné et une bordure. Et maintenant on va faire pour le stylet. Donc, juste ici sur le style.css, je vais copier le code entier d'ici, qui sélectionne la division hamburger. Donc, à l'intérieur de la division des hamburgers, nous avons le bouton. Donc ici, je vais fournir un contexte quant à aucun. Maintenant, si je l'enregistre, vous allez voir que l'arrière-plan est fondamentalement le désactivé, mais encore une fois, voyez la frontière juste ici. Donc ce que je viens de fournir une frontière, aucune. Maintenant, si je le sauvegarde, la frontière est fondamentalement désactivée. Mais si je clique dessus, il va essentiellement fournir un aperçu dessus. Alors donnons aussi un aperçu de rien. Maintenant, si je le garde, le hamburger est parti et a l'air parfaitement bien. Donc, il y a aussi un peu en Grèce la taille du hamburger. Donc, pour ce faire, nous allons copier puis diriger le port à partir d'ici. Collons et sélectionnons l'image. Et nous allons fournir un très dur presque 30 pixels. Sauvegardons ça. Et maintenant, vous pouvez voir que le hamburger est clairement visible et que c'est aussi changer le curseur pour pointer le bouton de pliage et l'enregistrer. Maintenant, le hamburger est complètement bien. Fermons l'outil de développement. Et maintenant, vous pouvez voir que le hamburger est fondamentalement visible dans la vue normale aussi. Et nous devons réparer ça, et ça va le faire dans une seconde. Et ici, vous pouvez voir que toutes les autres propriétés du hamburger fonctionnent parfaitement bien. C' est dans la bonne position et ça a l'air très bien aussi. Maintenant, passons à reporter la personnalisation du hamburger. Donc les gars, en ce moment je suis dans ma section Outils de développement. Et ici vous pouvez voir que nous n'avons pas ce menu de hamburger juste ici. Et je crois en moi la presse dessus. Nous avons besoin d'un menu pour sortir et que Meno devrait afficher tous les liens comme la maison sur les compétences et non. C' est donc ce que nous allons construire en ce moment. Alors allons à notre fichier d'index. Donc ici, c'est notre division de hamburger, et juste en dessous que je veux créer une autre division, mais un verre de mobile, beau nav. Et puis décider de cette division particulière, je vais créer une liste non ordonnée. Donc, à l'intérieur de cette liste particulière non ordonnée, je vais créer une autre liste. Et cette liste se compose d'une balise d'ancrage. Donc, en gros, quand on appuie sur la maison ou sur une planche, c'est pour nous emmener dans cette section supérieure, à droite, donc nous avons besoin d'une étiquette d'ancrage pour ça. Et ici, je vais nommer cette étiquette d'ancrage comme maison, tout comme celle de notre barre de navigation. Et nous avons besoin d'un total de quatre autres liens différents. Donc je vais copier ça quatre fois de plus. Et je vais juste renommer ça. Donc ici, je vais copier de la section héros et nous allons le coller ici. Ce copieux tue et le coller ici. Projets. Et enfin le bloc. Et maintenant, sauvegardons ça. Et si nous vérifions notre site ici dans la partie du chien à nouveau, voir la fin de la diarrhée. Les meurtres mobiles ne se divisent jamais avec tous les liens différents. Et maintenant, appelons-le. Donc les gars, en ce moment, notre hamburger peut faire est en fait de prendre de l'espace sur un site web. Comme vous pouvez le voir affiché en haut de notre site Web, ce que nous avons réellement besoin de ces données, cette section particulière devrait être cachée sur le côté gauche. Et puis nous cliquons sur le menu hamburger. Ceci et la dissection devraient apparaître et afficher tous ces menus. Et le menu hamburger devrait également prendre toute la largeur et la hauteur de l'écran. C' est donc notre exigence de base, et maintenant commençons à construire cela. Donc, avant cela, laissez-moi aller au fichier index.html. Et ici, vous pouvez voir que le mot mobile est mal orthographié. Donc je vais le renommer en mobi allèle et gardons ça. Et il peut également copier ce nom de classe particulier à partir d'ici. Après cela, il est aller à notre style.css. Et ici, laissez-nous sélectionner la classe de navigation mobile. Donc, tout d'abord, je vais donner la position comme fixe. Et je vais donner un top de 0 et une gauche de 0 aussi. Donc ça va être aussi laissé à l'écran que possible. Maintenant, si je l'enregistre ici, vous pouvez voir que le menu des hamburgers n'est plus visible. C' est parce que nous n'avons pas fourni d'index défini. Il est maintenant derrière notre site Web. Maintenant, nous devons le mettre en avant. Donc, voici un index. Nous devons donc fournir une valeur plus élevée, par exemple, sur un 1001. Et voyons voir. Et maintenant, nous pouvons voir que notre menu hamburger est visible. Alors, donnons-le à lui. Donc, il ya fournir un fond de pur. Sauvegardons ça. Et comme vous pouvez le voir maintenant, le menu hamburger est visible. Et j'ai déjà dit que le menu des hamburgers devrait prendre tout l'écran. Nous devons donc fournir une largeur de 100 pour cent ainsi qu'une hauteur de 100 pour cent. Maintenant, si je l'enregistre ici, vous pouvez voir que le hamburger prend tout l'écran. Étant donné que nous lui avons fourni une valeur d'indice plus élevée, elle est au-dessus de toutes les différentes couches et sections du site Web. Et maintenant, vous pouvez voir qu'à la fin, liens désastreux sont vraiment proches de la frontière. Nous allons donc fournir un rembourrage de deux rems à gauche, à droite, et en haut et en bas. Désolé. Gardez-le pour le moment, nous avons fourni un rembourrage de deux REM. Donc les gars, à partir de maintenant, nous n'avons rien pour fermer notre menu hamburger. Nous l'avons ouvert, mais nous devons aussi le fermer, non ? Donc nous avons besoin de créer un corbeau que je peux écrire ici sur la droite pour que Darwin nous cliquons dessus, le menu hamburger disparaît et va sur le côté gauche. Pour le faire, revenez à notre fichier d'index et écrivez à l'intérieur de notre division de navigation mobile. Je vais ouvrir un bouton avec une classe de fois. Et à l'intérieur de ce bouton particulier, je vais ouvrir une image et nous allons sous barre oblique point, allez dans le dossier Images et sélectionnez une image avec le nom de fois 30 SVT. Sauvegardons ça. Et si vous allez à l'envers, vous voyez que nous avons une icône en croix, mais nous avons besoin que ça soit du bon côté. Donc, pour ce faire, copions fondamentalement le nom de la classe d'ici, allez à style.css. Et voici, sélectionnons cette division particulière. Et tout d'abord, je vais donner la position comme fixe. Et nous fournissons également haut que 30 pixels. Et portons tout le chemin vers la droite. C' est exact. Pour la plupart un pixel de 100. Donc si je l'enregistre, vous allez voir que maintenant l'icône est presque à droite. Et c'est essentiellement un bouton. Donc, par défaut, il va avoir un contour d'arrière-plan et une bordure. Et désactivons toutes ces choses. Donc ici, je vais fournir un arrière-plan de aucun, désolé, connu comme fournir un aperçu de zéro comme une frontière. Aucun. Maintenant, si je l'enregistre, vous pouvez voir une icône de croix d'avion. Et nous allons également fournir le curseur comme point vers le haut afin que NOUS apportions nos bouches. Ça va ressembler à celui d'un curseur. Et maintenant, nous avons une icône de clause ici aussi. Donc les gars ici, vous pouvez voir que notre icône de croix est beaucoup plus petite et sauver propre graisse de sa taille. Donc, pour ce faire, je vais copier le cours du temps. Et ici, je vais sélectionner l'image et la changer à 1,5 m. Laisse-moi la sauvegarder. Et comme vous pouvez le voir maintenant, il est suffisamment grand et inadmissible. Maintenant, appelons tous ces liens différents. Donc, pour ce faire, je vais sélectionner notre division More pi, Dash NADPH. Et laissez-nous sélectionner toute la liste non ordonnée tout d'abord, et vous pouvez voir que nous avons quoi ? Des points juste ici. Désactivons ça. Donc vrai que je ne tape pas dans le style de tiret de liste, type de tiret comme aucun. Maintenant, si je le garde, vous pouvez voir que les points ne sont plus visibles. Deuxièmement, permettons également de styliser ces différents liens. Donc, le texte. Donc ici, je vais sélectionner la liste non ordonnée, la liste et la balise d'ancrage à l'intérieur. Donc, tout d'abord, je vais changer sa couleur en sombre. Donc maintenant, nous avons la couleur foncée juste ici. Et vous pouvez voir que nous avons ce qui souligne. Donc, désactivons cela en spécifiant la décoration de texte. Aucun. Maintenant, nous avons pas de soulignements ainsi que je vais augmenter leur taille de téléphone pour eux afin qu'ils soient clairement visibles. Maintenant, nous avons les liens stylés, et comme vous pouvez le voir, ces anneaux sont vraiment proches les uns des autres, donc nous devons fournir un peu de marge inférieure. Donc, pour cela, je vais copier le lien. C' est l'alignement. Et je vais leur fournir un bas de marge ou la plupart. Maintenant, nous avons un écart de perception entre eux. Donc ici vous pouvez voir que la liste Enlil est vraiment proche du haut de la page. Donc, c'est fournir un peu de rembourrage. Donc, pour ce faire, allons à notre navigation mobile. Et ici, je vais fournir un haut de rembourrage de cinq rem. Et maintenant, nous avons des options de cours basées sur le sommet. Et aussi je vais apporter cette liste désastreuse au centre de la page. Donc, ici, laissez-nous fournir text-align centre. Maintenant, nous avons l'ascender thème Inditex. Donc, les gars, maintenant nous avons fini avec la navigation de base peut savoir conception. Et maintenant, fournissons les fonctionnalités de base à notre menu de navigation. Comme lorsque nous cliquons sur le bouton Fermer, cette navigation particulière devrait se fermer et ensuite nous cliquons sur l'icône hamburger. fenêtre de navigation verticale doit s'ouvrir. Et maintenant, fournissons ces fonctionnalités de base. Donc, pour cela, nous allons utiliser notre app.js pour fournir la fonctionnalité. Avant cela, allons à notre fichier d'index et donnons une classe à notre bouton, qui est le bouton hamburger. Laisse-moi copier le nom d'ici. Et nous allons fournir une classe de bouton Hamburger Dash. Et ici, je vais copier ce nom particulier de classe asphalte, et gardons ça. Maintenant, allons à notre app.js. Et ici, je vais créer une variable. Ainsi, nous pouvons créer une variable en utilisant du plomb, du watt ou des cônes. Et je vais donner un nom variable de hamburger. Donc, ici, je vais résélectionner, c'est le point de document QuerySelector. Et à l'intérieur du support rond, je vais spécifier la classe du citron que je veux sélectionner. Donc, dans notre cas, nous voulons sélectionner le bouton. Nous devons donc spécifier le fournisseur de classe au bouton, c' est-à-dire le bouton Hamburger Dash. Et n'oubliez pas de fournir le point puisque VR accède essentiellement à l'élément. Donc maintenant, nous avons sélectionné le bouton hamburger et aussi nous avons besoin de sélectionner l'icône de croix aussi bien. Donc ici, je vais créer une autre variable avec le nom du temps. Et là encore, je vais documenter et sélectionner sur croix icône. Et si je ne me trompe pas, nous avons donné une classe de fois. Alors vérifions ça. Donc, ici, nous avons un temps donné de classe à notre bouton. Alors copions-le et collons-le. Donc les gars, maintenant nous avons sélectionné ces deux éléments, et en ce moment il est temps pour nous de fournir un écouteur d'événement. Nous avons donc sélectionné le bouton, et maintenant nous devons dire au bouton ce qu'il faut faire lorsque nous cliquons dessus. Donc, pour ce faire, je vais copier le nom de la variable hamburger d'ici. Et nous allons ajouter un écouteur d'événement. Et le prix si l'auditeur de l'événement écoute, c'est essentiellement un clic. Et quand une personne clique sur l'icône de hamburger, cette fonction particulière, cette fonction particulière va être exécutée. Donc, en résumant le code, quand quelqu'un clique sur l'icône de hamburger, cette fonction particulière est déclenchée et le code à l'intérieur est exécuté. C' est donc la base fondamentale derrière cet écouteur d'événement particulier. Et nous avons besoin de la même chose pour notre temps I ou le bouton Times aussi. Donc, je vais dupliquer le code et je veux changer le nom de la variable 2 fois 0. Droit ? Maintenant, nous spécifions simplement ce qui devrait arriver lorsque nous allons cliquer sur cette icône de hamburger particulier. Alors les gars, avant de passer à autre chose, laissez-nous visiter notre site Web. Et comme vous pouvez le voir dans le scénario actuel lorsque BB Zeta site Web, la seule chose que nous pouvons voir le menu de navigation Est, mais par défaut, et quand nous avons reçu notre site Web, nous devons noter voir le menu de navigation. Cela ne devrait être visible que lorsque nous cliquons sur le menu hamburger. Nous devons donc cacher le menu de navigation. Ce que nous allons faire, c'est que nous allons transporter le menu de navigation NDI vers la gauche. Donc, quand nous cliquons sur le menu hamburger, il devrait arriver. Donc, pour ce faire, passons à notre style.css. Et juste ici dans le point mobile, appliquons fondamentalement un X. Donc, pour ce faire, je vais ouvrir transformée. Et ici, je vais préciser. Traduire X. Donc traduire X ou traduire est essentiellement utilisé pour déplacer des objets. Et nous avons déjà utilisé traduire dans la section de compétence où nous devons apporter le logo et la carte dans l'expéditeur et traduire spécifie que nous devons déplacer l'élément dans l'axe horizontal. Et si j'entre une valeur positive, cela va prendre l'élément diversifié, non ? Mais en ce moment, nous ne serons pas ce menu de navigation particulier pour être sur la gauche. Donc nous devons fournir une valeur négative, et je vais fournir moins 100 pour cent. Donc moins un 100 pour cent va sortir l'élément de l'écran. Donc, si je l'enregistre, le menu de navigation n'est plus visible. En fait, il n'est pas parti. C' est quelque part dans le côté droit. Donc, si je change la valeur à près de 80 pour cent, vous pouvez voir la moitié. Donc c'est en fait dans le côté gauche, mais on peut vraiment le voir. Donc je vais ramener ça à 100%. Ou comme maintenant, nous avons par défaut fait un menu de navigation caché. Donc la prochaine chose que nous allons faire est que Darwin me clique sur l'icône de hamburger juste ici. Le menu de navigation doit revenir à sa position d'origine. Donc, pour ce faire ici, je vais créer une autre classe qui s'appelle US dot open. Et ici, je vais copier ce code particulier à partir d'ici. Collons-le. Et ici, je vais spécifier le translate x comme 0. Donc, en spécifiant translate x 0, il va ramener notre menu de navigation à sa position d'origine. Donc, si je l'enregistre, et si je retourne à notre site Web ici, je vais augmenter la largeur de cette section particulière. Et si je sélectionne notre hamburger. Et ici, nous allons voir la classe de navigation pointillée mobile et ensuite nous l'ouvrirons. Et E Fi fournit la classe ouverte juste ici. Donc, ici, l'ouverture va ramener notre menu de navigation à sa position d'origine. Donc, si je spécifie simplement open dans la classe nav, nous allons voir que nous avons tau, le menu de navigation retour à sa position. Et si je l'enlève, vous pouvez voir qu'il est caché. Donc, avec l'aide de JavaScript, nous devons dynamiquement, je localise notre classe à ce mobile particulier pointillé NADPH. Donc c'est assez facile de le faire. Revenons à notre app.js. Et ici, dans le fichier d'index, vous pouvez voir que c'est le Nav mobile Lord. A l'intérieur, c'est là que nous avons le menu de navigation de fin de diarrhée. C' est pourquoi nous allons ajouter ouvert ici dans cette classe particulière. Donc je vais copier le nom de la classe. Tout d'abord, nous devons sélectionner notre classe de navigation mobile. Donc, ici dans le app.js, je vais créer une autre variable connue sous le nom de nav. Et encore une fois, je vais copier ce code particulier. Et ici, je vais sélectionner notre navigation mobile plus 4, n'est-ce pas ? Donc, ici, nous avons essentiellement sélectionné notre classe de navigation mobile. Et maintenant, lorsque nous cliquons sur notre bouton hamburger, nous avons besoin de notre menu de navigation pour être visible. Pour ce faire, je vais taper nav mobile, liste de classe de points, point add. Et quelle classe que nous devons ajouter, c'est la classe ouverte. Donc, incitant au glucose, je vais spécifier l'ouvrir et le fermer. Donc, ce code particulier dit que lorsque nous cliquons sur le bouton hamburger, nous avons besoin de cette fonction particulière pour exécuter. Donc, le corps de la fonction dit que lorsque nous cliquons sur le bouton hamburger, nous devons ajouter une classe particulière à notre navigation mobile plus, que nous sommes sélectionnés ici. Donc, si nous revenons à notre code et si je clique sur cette icône de hamburger brut particulière, nous pouvons voir que maintenant nous avons notre fenêtre de navigation ouverte. Et ici, vous pouvez voir que l'opérande a automatiquement été ajouté dynamiquement à l'application mobile. Donc, si je rafraîchis à nouveau, et ici vous pouvez voir que maintenant nous n'avons pas de classe ouverte avec le nav mobile. Mais l'élan, et je vais cliquer sur le bouton hamburger ici, vous pouvez voir que notre JavaScript ajoute dynamiquement cette classe ouverte particulière, qui est la liste de classe dot add open fait ce travail particulier. C' est ainsi que nous réalisons essentiellement la fonctionnalité d'ouvrir le menu de navigation lorsque nous cliquons sur l'icône de hamburger. Donc maintenant, nous devons également fournir des fonctionnalités à notre clause que je peux, donc quand nous cliquons dessus, nous avons besoin d'autres menus de navigation particuliers pour aller sur le côté gauche. Donc, ici vous pouvez voir que le moment où je supprime la classe ouverte, nous allons voir ce dow, le menu de navigation est caché. Donc, en enlevant le verre de l'opérande, nous pouvons fondamentalement supprimer le menu de navigation. Donc, ici, nous avons déjà sélectionné notre icône croix, et ici à l'intérieur de notre écouteur d'événement pour votre icône croix. Et je vais copier est particulier pour accord d'ici. Et je vais le coller. Et au lieu d'ajouter le verre ouvert, je vais enlever le verre opératoire. C' est la liste de classe point remove open. Maintenant, si je l'enregistre et l'autre, retournez sur le site Web. Ici, je veux cliquer sur le menu hamburger, qui ouvre notre menu de navigation. Et ici, vous pouvez voir maintenant nous avons la classe ouverte dans le tableau de bord mobile Na plus, et je vais cliquer sur l'icône de croix qu'ils ont ouvert dernière a été supprimé, et que les peaux ont un menu de navigation. Donc maintenant, nous avons essentiellement atteint les deux fonctionnalités de base. Autrement dit, lorsque nous cliquons sur le bouton hamburger, nous avons le menu de navigation ouvert et ensuite nous cliquons sur l'icône en croix. Le menu de navigation a été désactivé ou masqué. Donc, les gars, quand on clique sur le bouton hamburger, vous pouvez voir que dans le menu de navigation il clignote juste et s'éteint. n'y a pas d'animation fluide à elle. Donc, pour fournir une animation coulissante, Revenons à notre style.css et blanc à l'intérieur de notre point mobile. Maintenant, fournissons une transition pour tous les éléments et ça va prendre 0,5 seconde et c'est facile à entrer et à sortir. Maintenant, si je le garde. Et maintenant, quand je clique sur le bouton hamburger, vous pouvez voir qu'il y a une animation lisse et lisse. Donc maintenant, nous avons le bouton hamburger comme bouton Elastic Clause et puis est mort fonctionnalité avec animation, tout ensemble. 14. Site Web réactif - 2: Salut les gars, bienvenue à la vidéo. Et dans cette vidéo particulière, nous allons rendre notre site web complètement réactif. Donc, dans la vidéo précédente, comme première étape vers la réactivité de notre site Web, nous avons fait notre menu de navigation. C' est donc l'une des vidéos les plus importantes de notre site Web. Parce que faire une réponse de site Web à utiliser vraiment important à ce stade de la personne en particulier. Parce que notre site Web devrait être parfait dans presque toutes les tailles d'écran. Donc, si je sous f, L sur mon clavier, qui va ouvrir notre outil de développement. Vous allez voir que maintenant nous sommes dans presque 13, 25 bits par 949 hauteur. Et maintenant, si je produis un mot, ici, vous pouvez voir que maintenant nous avons notre menu hamburger. La barre de navigation a été désactivée. Mais maintenant, si je sélectionne une hauteur de 10 jours d'un iPhone tour ici, vous pouvez voir que notre site est complètement cassé. Les choses ne sont pas à la recherche de conclusions ou non visibles. Certains d'entre eux se chevauchent et est complètement cassé. Et maintenant, il est temps pour nous de résoudre tous ces problèmes et de rendre notre site Web parfait dans presque toutes les tailles d'écran. Et commençons. Donc les gars, si nous vérifions notre style.css ici, nous pouvons voir un conteneur. Donc, cette condition a un expert en mathématiques, un rembourrage et la marge. Donc, ce conteneur est essentiellement pour notre bureau. Donc, ce conteneur assurez-vous que notre avantage semble bon sur la version de bureau. Mais nous avons vraiment besoin de beaucoup de commodité comme celui-ci pour rendre notre site Web bien paraître dans un rayon ou une taille d'écran aussi bien. Donc, si nous faisons défiler ici, vous pouvez voir que nous avons essentiellement appliqué une requête multimédia ici. Donc je vais couper ça et le coller en bas. Et nous avons fondamentalement toutes les requêtes des médias à la fin du fichier. Donc, ici, vous pouvez voir que ce média particulier, il est activé lorsque les chutes en dessous de 1024 pixel. Et maintenant, pour l'instant, nous n'avons qu'une seule modification. C' est que nous faisons ou désactivons l'affichage de notre barre de navigation. Donc Eve fonctionnalité côté trottoir en ce moment, laissez-nous fondamentalement rendre la version iPad de notre site web responsive. Mais elle a une facture à 768 et une hauteur de 1024. Donc la première chose que je vais faire, c'est que vous n'avez pas vu que l'image et le texte ici sont assez grands. Donc, réduisons fondamentalement leur taille. Donc ici, je vais cliquer sur le sélecteur d'élément, et je vais sélectionner l'image. Permettez-moi d'augmenter légèrement la largeur de la section. Et la chose cool est qu'ici vous pouvez voir que w0 ont le chemin vers cette image particulière. Nous n'avons pas besoin d'aller index de porte par terre trouver manuellement l'emplacement de notre image de l'époque. Le sélecteur d'image fournit automatiquement la partie de cette image particulière. Donc, je vais simplement copier ce chemin particulier d'ici et juste ici à l'intérieur de notre requête multimédia, collez-le. Et je vais diminuer sa largeur à 260 pixels. Si je l'enregistre, vous pouvez voir que la taille a été réduite et maintenant il y a aussi changer la taille de notre radiographie ici. En fait, il a l'air assez grand. Encore une fois, je veux sélectionner notre texte à partir d'ici. Et ici, vous pouvez voir que nous avons tout le chemin vers ce texte de zone particulière. Je vais le copier. Revenons au style.css. Et je vais le coller. Et je vais réduire la taille de la police à presque à la chambre. Et si je l'enregistre ici, vous pouvez voir que la taille du nœud est assez amusant. Mais vous pouvez voir que l'image et le texte sont vraiment proches de la partie supérieure de la page. Nous devons fournir un B dit haut rembourrage, haut. Donc, nous savons que cette fin particulière désastreuse côtés élémentaires à l'intérieur de la section héros. Donc, de même, nous pouvons fournir un peu de rembourrage section héros de porte supérieure. Donc ici, je vais sélectionner la section héros et qui est de fournir un haut de rembourrage de 10 rem. Sauvegardons ça. Et maintenant, je peux voir que nous avons suffisamment d'espace dans la partie supérieure de notre image et du texte. Donc, les gars, vous pouvez voir que l'image et le texte est clause 3D sur le bord gauche de notre page. Et nous allons également fournir un peu de rembourrage à gauche à notre section héros afin qu'au moins deux éléments résident au centre de cette page particulière. Donc ici, je vais fournir un rembourrage. La gauche a failli le virer. Et si je l'enregistre, nous pouvons voir que maintenant l'image et le texte sont à l'expéditeur du lit de cette section particulière. Et maintenant passons à la deuxième section qui est donc la section À propos de moi. Et ici, je vais réduire légèrement la taille de l'image. Donc encore une fois, je veux sélectionner l'image. Et ici vous pouvez voir ce chemin, je vais le copier. Alors, juste ici, allons nous séparer. Donc ici, je vais réduire la hauteur à près de 400 pixels. Et je veux aussi apporter légèrement cette image particulière le droit parce qu'il y a beaucoup d'espace libre ici. Donc je vais fournir un rembourrage laissé demain. Oui. Maintenant, si l'image a l'air parfaitement bien et que le texte a déjà l'air bien, elle est lisible et elle est aussi dans la position appropriée. Et nous en avons fini avec la section avorter, l'aspirine. Donc les gars, maintenant passons à ma section de compétences juste ici. Dans la section tue les souris, vous pouvez voir que nous avons trois cartes dans une seule rangée, donc les gardes n'ont pas suffisamment d'espace. Essayons donc de faire deux cartes en une seule ligne. Donc avant tout, je veux dire comme l'endocarde ici. Et ici, vous pouvez voir que nous avons fourni une grille et WAS a spécifié trois éléments dans une seule ligne. Et essayons de l'utiliser aussi et de voir. Et comme vous pouvez le voir maintenant, il a l'air assez bien. C' est deux cartes sur une seule ligne. Et avis d'appliquer cela. Donc nous allons copier le code d'ici, c'est le chemin. Collons-le ici. Encore une fois. Je vais également copier les colonnes du modèle de grille, et l'espace pour l'enregistrer. Oui. Maintenant, la section des compétences est à la recherche d'une fine clé. Et maintenant passons à la section projet. Pour cette section est également à la fois aussi bien. Maintenant, si vous allez à la section blog à nouveau, voir que nous avions essentiellement trois cartes, mais maintenant seulement deux cartes qui sont visibles. Encore une fois, je vais sélectionner ces gardes de zone en particulier d'ici. Et je vais spécifier les colonnes du modèle de grille comme une. Parce qu'on n'a pas vraiment trois cartes. Et si je spécifie, on aura un seul Dieu d'affilée. C' est encore une fois, tu vois, c'est comme ça que ça regarde maintenant. Donc, en fait, nous devons apporter quelques légères modifications à ce domaine particulier, ma section blog. Donc, tout d'abord, je vais appeler P le chemin d'ici. Laissez-nous le coller ici. Et c'est aussi une copie. La colonne du modèle est copiée et collée. Et nous fournissons également un écart de grille de près de quatre rem. Sauvegardons ça. Et comme il a les données, l'image ne s'étire pas jusqu'à la fin du pH. Nous devons donc apporter une légère modification à notre CSS pour y parvenir. Alors les gars, maintenant allons à notre fichier CSS et laissez-moi défiler tout le chemin vers le haut sur la feuille trouver ma section blog. C' est donc là que commence la section MyBlock. Et si nous vérifions notre index pendant que vous pouvez voir que l'image est située à l'intérieur de l'emballage de tableau de bord de voiture. Laisse-moi le copier. Et ici, je veux essentiellement sélectionner mon bloc, l'emballage de la carte, la carte et l'image à l'intérieur. Et je vais fournir une largeur de 100 pour cent et un creux haut 100 pour cent. Et si je l'enregistre ici, vous pouvez voir que maintenant le problème est résolu. Nous avons l'image s'étirant jusqu'à la fin de cette carte particulière. Donc, cela rend la section MyBlock aussi parfaitement bien. Maintenant, nous avons la section me contacter, ce qui est aussi parfait. Et les résultats par défaut ont l'air parfaitement bien. Donc maintenant, nous avons terminé la conception responsive de notre fenêtre iPad, qui a un peu de près de 768 et une hauteur de 12 à 24. Ça a l'air parfaitement bien. Le menu de navigation fonctionne parfaitement. Et dans l'ensemble, le site est vraiment bon dans ce rapport d'aspect particulier. Et maintenant, passons à la réactivité de nos ratios discrets. Alors les gars, passons maintenant à la conception réactive de notre appareil mobile. Ici, je vais choisir iPhone 6, 7 et 8. Et ici, vous pouvez voir que notre site est à nouveau, un mythe complet. Les choses sont tout autour. Côté garde, égaré. moitié du plus dur, fondamentalement même pas visible. Et maintenant, nous allons essentiellement styliser ce port de vue mobile particulier de notre site Web. Alors maintenant, allons à notre style.css. Et juste à la fin de notre première requête média. Et nous allons créer notre deuxième requête multimédia, qui aura une largeur maximale de près de 576 pixels. Et ouvrons la requête multimédia. Donc, chaque fois que notre port de vue atteint un burritos inférieur à 576, cet accord particulier est déclenché, alors sauvegardons-le. Et si nous vérifions notre site Web, vous pouvez voir que l'image du héros et le texte est en une seule ligne. Et si je sélectionne l'image ici, vous pouvez voir que la division héros a une propriété flex appliquée. Donc, si nous pouvions changer la direction de flexion en colonne, nous pouvons apporter ce texte particulier dans la partie inférieure de l'image. Donc ce que je vais faire, c'est que je vais sélectionner toute la section héros. Et je vais fournir une direction flexible de la colonne. Maintenant, si je l'enregistre, maintenant, le texte est dans la partie inférieure de l'image. Et ici, vous pouvez voir que dans la partie chien, nous avons beaucoup d'espace libre. Laissez-nous légèrement apporter cette image un peu sur le côté supérieur. Je vais donc sélectionner l'image. Donc, ici, vous voyez que l'image est située dans la division gauche. Donc notre copie, ce code particulier d'ici, cette base l'a fait. Et je veux donner une marge supérieure de presque moins 5 rem. Et si je l'enregistre ici, vous pouvez voir que l'image est légèrement connue du haut. Et maintenant, laissez-nous essentiellement styliser ce texte particulier. Donc, tout d'abord, je vais sélectionner le texte. Donc, ici, vous pouvez voir que le texte est fondamentalement situé dans la bonne division. Donc, je vais copier le code d'ici, et allons le coller. Donc la première chose que je veux faire est de commencer. Vous allez voir que le texte est vraiment proche de l'image. Je veux donner un peu de rembourrage. Donc je vais donner un darpa rembourrage avant tout, Den tambour. Maintenant, le texte a un peu d'espace entre l'image. Et je vais aligner le texte dans l'expéditeur afin qu'il semble beaucoup mieux. Dans ce cas, vous pouvez voir que le texte est suicide et le fond a besoin de l'autre côté. Donc, si je fournit le centre d'alignement du texte, cela devrait vraiment paraître bien. Oui. Maintenant, pour le texte et le bouton est tout décrit dans une minute de l'expéditeur avec vouloir ni la totalité de DC et la division désastreuse genoux vers cette droite de l'écran. Et laissez-nous réellement fournir un peu de rembourrage droit, pour le rendre au centre de cette section. Donc, il est fourni en ajoutant le droit par défaut le plus à exécuter. Et si je l'enregistre, vous verrez cette valeur nulle si le texte est au centre de la section. Et il a également été l'appliquer à une intégration à l'image aussi bien. Donc, je vais fournir une lumière de guidage jusqu'à presque la RAM. Bon, maintenant pour l'image et le texte est en quelque sorte au centre. Maintenant, vous pouvez voir que ce chemin de clip particulier, nous avons besoin d'abaisser légèrement la valeur. Donc, si je sélectionne cette section particulière, et si je sélectionne l'en-tête ici, vous pouvez voir que c'est le pot de clip. Essayons donc essentiellement vos différentes valeurs. Je vais donc augmenter cette valeur particulière. Donc ce que vous allez voir que 95 fournit essentiellement une bonne courbure. Donc, nous allons sélectionner l'en-tête et je vais copier cette valeur particulière. Donc, ici, laissez-nous sélectionner l'en-tête et laissez-nous fournir le chemin du clip. Si je le garde. Maintenant, nous avons la courbure parfaite. Maintenant, passons à la section de l'aéroport. Donc ici, vous pouvez voir que encore une fois, nous avons un flex et que la direction flex n' est pas pousser dans sont les gènes qu'une colonne. Donc encore une fois, je vais sélectionner cette section particulière. Et ici, vous pouvez voir que nous avons un flex appliqué. Donc, quand je sélectionne le conteneur d'ici, revenons à notre style.css. Et nous allons sélectionner le conteneur et nous allons changer la direction de flexion en colonne. Sauvez-le. Vous pouvez voir que nous avons l'image sur le dessus et l'aéroport peut texte et le bas. Mais maintenant, nous devrions aligner ces textes au centre. Alors sélectionnons-le d'ici. Donc, le texte est situé dans la division droite de ce qui précède. Donc je vais copier ce code particulier d'ici. Et collons-le ici. Et je veux notre centre d'alignement de texte. Maintenant, si les textes doivent être au centre, oui. Maintenant, nous avons le texte au centre. Et une autre chose à noter est que nous avons ces icônes sociales vers la gauche. Nous devrions aussi le faire au centre. Maintenant, sélectionnons ça. Et tu vas voir qu'on a une classe de social. Encore une fois, les icônes désastreuses sont situées dans la bonne division. Donc, copions simplement ce code particulier à partir d'ici, collez-le, et aussi électionnons l'aspirine de division sociale. Et nous allons fournir cette définition centrée sur le contenu. Maintenant, ils sont centrés. Bon, maintenant si la section Me du conseil est à la recherche d'un cordon VM prédéfini, l'image, le texte z est vers le centre. Les icônes sont également très bien. Passons maintenant à la section Compétences juste ici. Et la première chose que je vais faire est sans doute de réparer cette courbure particulière. Donc encore une fois, je veux sélectionner les compétences plus, et ici encore pour voir le chemin de clip-path NDI. Et tout d'abord, copions ce code particulier à partir d'ici. Et nous allons sélectionner les compétences. Donc, ici, sélectionnons les compétences et basées sur, et maintenant essayons quelques valeurs ici et voyons comment nous pouvons fondamentalement aligner la courbure. Donc fascicule, je veux sélectionner la première valeur ici. Cela réduit fondamentalement à 70. Et changeons aussi la deuxième valeur à presque deux. D' accord, non, ça ne marche pas très bien. Donc c'est 70 N2 pour les deux premières valeurs, 70. Et pour le sauver, et la courbure a l'air parfaitement bien. Maintenant, dans la section des compétences, vous pouvez voir que nous devons faire différentes couleurs en une seule ligne. Bartleby ne peut pas voir le second Dieu. Donc, ce que nous pouvons faire, c'est que nous pouvons sélectionner une carte et si nous pouvions changer le modèle de grille en un, il devrait vraiment paraître bien. Essayons un. Oui, Il a l'air parfaitement bien. Donc encore une fois, sélectionnons cette partie particulière. Et ici que la portée soit les colonnes de modèle de grille. Et la répétition pour seulement un centime. Donc, pour le sauver. Et ça a aussi l'air parfaitement bien. Donc, la section des compétences est terminée. Maintenant, si vous allez au bloc, désolé, la section du projet, nous devons fondamentalement redimensionner l'image. Encore une fois, je vais sélectionner l'image. Donc, l'image est située à l'intérieur des curseurs lumière ET moi. Copiez ça et collez-le juste ici. Je vais donc changer la hauteur à 200 pixels. Et passons ça à 300 pixels. Ça le sauve, et ça a l'air très bien. Donc, la section produit est également fait essentiellement. Maintenant, allons à la section mon blog. Que ma section de blog est également prédéfinie maintenant. Et que la pièce de retour au milieu de la section. C' est là que nous devons faire quelques légères modifications. Vous pouvez voir que l'e-mail n'est pas complètement visible. Donc, nous avons essentiellement fourni une excellente formule. Ces deux soldats ont tous reçu des billets. Laisse-moi le sélectionner. Et vous allez voir que nous avons fourni à FOR, c' est-à-dire que ça va se répéter deux fois. Et si je supprime, et donc, maintenant, nous pouvons voir que les données URI Milhouse est allé à la deuxième ligne et faisons une légère modification pour corriger cet écart particulier ici. Alors laissez-moi copier ça, collez-le ici. Et je vais copier ce code d'ici ainsi que collé. Et aussi moins réduire l'écart de tiret de groupe à 0. Sauvez-le. Et si je sélectionne le deuxième élément ici, vous pouvez voir que nous avons une marge supérieure de près de trois fois. Donc il suffit de copier ce pot particulier collé. Et réduisons le haut de la marge à un rem. Et si je l'économise, maintenant nous avons accordé suffisamment d'espace à nos gars savent que nous avons fini avec la construction responsive complète de notre version mobile. Et c'est en fait très bien à mon avis. Donc, vous pouvez aussi faire quelques petits ajustements pour le faire comme vous le souhaitez. Ainsi, vous pouvez également réduire la taille de ces images que vous pouvez fournir enchères. On peut faire beaucoup d'autres choses pour le rendre encore meilleur. Donc c'est à vous de choisir. Et c'est encore une fois, voir l'envers est assez bien. Les choses sont en place. Nous avons le pire nombre moyen d'espacements. Tout le texte peut être facilement visible, n qui peut être facilement lu. Et les yeux ont l'air très bien. Donc, si je clique sur le hamburger juste ici, vous pouvez voir que cette icône particulière est beaucoup sur le côté gauche. Donc, ajustons aussi légèrement sa position. Donc, dans notre sélectionné. Donc, je vais sélectionner les fois juste un centime magasin de l'image. Donc, je vais le déplacer vers la droite à presque 30 pixels. Je le sauve. Ouais, maintenant il est dans la position parfaite, bien que les gars, il est en fait parfaitement bien. Passons maintenant à l'étape suivante. Donc les gars, en ce moment, je suis dans la vue de bureau de notre site et vous pouvez voir que nous avons le bouton hamburger visible, mais il ne devrait pas être ici. Je sais que le bouton hamburger doit être désactivé ou doit être caché par défaut, cela devrait être visible ou lib et la largeur de la fenêtre kurtosis 1024 pixel. Donc, pour réparer ce bug, passons à style.css. Et juste à l'intérieur de notre site tableau de bord, dash rappeur dot hamburger, je vais fournir affichage aucun. Si je le garde, vous allez voir que tous les hamburgers ne sont plus visibles. Et je vais copier ce pot particulier. Allons à notre requête média où le maximum est 1024. Et ici, collons à part. Et cela change l'affichage pour bloquer. Maintenant, si je l'enregistre et je, si j'ouvre l'outil de développement ici, vous pouvez voir que le budget actuel est 12 57 et le moment où le plus proche 1024. Et encore voir que le hamburger , mais alors est spécifique juste comme ça et il ne sera pas visible. Linda inhiber les données alors quand 0 à quatre pixels. Notez donc que le bug est également corrigé et tout fonctionne parfaitement bien. Et la prochaine chose que nous devons réparer, c'est attaché. Lorsque nous ouvrons le menu de navigation, puis nous cliquons sur l'un de ces liens. Rien ne se passe essentiellement. Maintenant lieu la toison, cette question particulière aussi. Alors, non, allons à index.html. Et ici, vous pouvez voir que ce sont les menus de navigation, les liens. Et vous n'avez pas d'emplacement dans notre HF. Et si vous faites défiler ici, vous pouvez voir ce sont les liens des barres de navigation. Et si vous vous en souvenez, nous avons fourni une pièce d'identité à travers ces différentes sections. Et nous allons simplement copier ces ID à ce lien particulier dans le menu de navigation aspirine. Laisse-moi le copier. Sauvegardons ça. Et maintenant, si nous allons sur notre site Web et si j' ouvre le menu Navigation et si je clique sur les compétences, rien ne s'est essentiellement passé. Mais si je ferme cette fenêtre de navigation particulière, vous pouvez voir que nous sommes dans la section des compétences. Et c'est en fait un petit problème. Autrement dit, quand je clique sur l'un de ces liens que les maires de navigation ou de fermeture sur son propre, mais que l'envers nous emmène effectivement à l'endroit désiré. Maintenant, résolvons ce problème particulier aussi. Donc, pour réparer ce shoeing régulier, faites usage de JavaScript fonctionne à nouveau. Donc, avant cela, donnons une classe à tous ces différents liens afin que nous puissions sélectionner ces différents liens, angles d' Euler, balises, façon I JavaScript. Donc ici, je vais donner un verre de clic. Et maintenant, deuxièmement, dans ce particulier et obtenir des données, je vais donner un verre de Glick tiret un. Laisse-moi le copier. Faisons la même chose pour le troisième nom de classe DAG faim du tiret de clic T2 pour la balise emmêlée avec la classe de tiret Glick trois, et la dernière balise d'ancrage avec la classe de tableau de bord de clic. Maintenant, sauvegardons, et maintenant allons à notre JavaScript et sélectionnons toutes les balises d'ancrage. Alors passons à app.js. Et juste ici, je vais créer un sous-ventre en dessous de quatre clics. Et nous allons documenter et QuerySelector. Nous allons sélectionner notre classe était de tomber. Et deuxièmement, je vais créer une autre variable pour notre deuxième étiquette d'ancrage pour toujours deuxième. Alors plaçons ça, ça, renommez-le vers le bas. Donc, je vais cliquer sur le tiret T2 pour peut-être cliquer sur le tiret un. Et ils veulent remplacer le verre juste ici. Et je vais faire exactement la même chose pour tous ces liens différents. Nous avons donc fait une petite faute de frappe ici. Je vais renommer cette classe a clic tableau de bord. Et maintenant, sauvegardons ça. Sauvegardez le JavaScript comme nous le savons, laissez-moi apporter ceci à ce domaine particulier. Et ici, ce que nous voulons faire, c'est que lorsque nous cliquons sur ce lien particulier, nous voulons que ce menu de navigation soit brillant. Et nous avons une pondération bleue, exactement la même feuille, Alberta brut par décennie aussi. C' est quand nous cliquons sur le bouton croix, nous supprimons fondamentalement le verre ouvert de la liste de classe maintenant sombre mobile. Il y a donc un équilibre, le même concept pour toutes ces cliques différentes. Donc, je vais copier ce code particulier à partir d'ici. Collons-le. Et je vais sélectionner le premier élément. Collons-le là, obtenant une copie du code. Donc l'amour vénial 1234 plus Bon. Donc, ils sont sélectionnés et tout en appuyant et en tenant et tous les temps démo de décalage, Placido pas se permettre quatre fois de plus. Et maintenant, nous allons simplement changer. Nom de la variable. Est cliqué sur le tiret un. Maintenant, nous devons cliquer pour choisir trois et la semaine quatre. Maintenant, si je l'enregistre, revenons à notre site Web et ouvrons ensuite le menu Navigation. Et si je vais cliquer sur les projets, vous pouvez voir que la fenêtre de navigation se ferme automatiquement et nous sommes dans la section projet. Faisons ça pour notre section blog. Et cela fonctionne parfaitement bien. Alors c'est tout, les gars. Nous avons enfin terminé notre site web. Il est complètement réactif pour toute sorte de tailles d'écran, et ils peuvent fondamentalement ajouter plus de requête multimédia et personnaliser ce site ainsi. J' ai daté formule essentiellement deux conditions différentes. Maintenant, la hauteur du port ADB est inférieure à 1024 pixels et inférieure à l'ISMB, six pixels. Donc, si vous avez des bottes spécifiques, ils peuvent essentiellement implémenter le même concept. Et vous pouvez personnaliser votre avantage et finalement rendre votre site Web réactif pour n'importe quel type de rapports d'écran. Je vous ai essentiellement donné une idée de base de la façon dont vous pouvez rendre vos applications réactives ou une largeur de fenêtre particulière. Alors c'est tout, les gars. Merci d'avoir regardé et je vous verrai dans la prochaine vidéo. 15. Rendre le bouton de téléchargement fonctionnel: Bonjour les gars, bienvenue dans la vidéo. Dans cette vidéo, nous allons faire fonctionner notre bouton Télécharger. Ainsi, comme vous pouvez le constater maintenant, si nous cliquons sur le bouton Télécharger, rien ne se passe fondamentalement. Mais dans cette vidéo particulière, nous allons ajouter fonctionnalités à notre bouton vers le bas pour qu'un numéro de débit, nous cliquons dessus, je reprenne, il soit automatiquement téléchargé. C'est essentiellement un symbole de pulsations. La première chose que je vais faire, c'est que je vais ajouter mon CV à fréquence de mon projet c'est essentiellement mon projet. Nous avons appelé le fichier d'index, les images de fichiers CSS, JavaScript et tout ça. Ce que je vais faire, c'est que je veux simplement faire glisser et déposer mon CV. Il s'agit essentiellement d'un fichier PDF sur mon projet. En ce moment, j'ai obtenu mon CV ou mon projet, et je peux le redéfinir ici. Nous avons mon PDF décimètre ici. Nous sommes maintenant dans notre fichier d'index. Maintenant, si vous jetez un coup d'œil, nous sommes en ce moment dans notre section héros et la baisse fiscale. Au sein de notre division droite, nous avons notre bouton de téléchargement CPE. Nous allons réaliser notre processus de téléchargement à l'aide de la balise ancre. Ce que je vais faire, c'est commencer au sein de la division, je veux créer une balise d'ancrage. Je vais donc entrer un onglet et appuyer sur l'onglet dans l'extra, je vais fournir le nom de mon fichier PDF car il se trouve dans le même répertoire. Il me suffit donc de spécifier le nom du fichier. Le nom de mon PDF est donc mon adresse. Vous pouvez PDF. J'ai donc déjà reçu une sédition, donc 100% de mon corps mon dossier a été sélectionné. La prochaine chose que je vais faire, c'est que je veux utiliser une balise de téléchargement de diagnostic, désolé, télécharger une balise. La balise de téléchargement est donc essentiellement une balise HTML5. Tout ce que je spécifie à l'intérieur du dollar die sera le nom affiché au téléchargement du fichier, par exemple, et rendu en supposant que chaque fois que je clique sur le bouton dollar, le nom du fichier que ce WOW, nous sommes en supposant que celui de cette semaine devienne plus clair lorsque l'on voit sa mise en œuvre pratique. Maintenant, à l'intérieur de notre étiquette d'ancrage et je vais coller notre bouton w dot cv. Supprimons l' espace vide et sauvegardons le. Maintenant, si je reviens le site Web et que je double-clique sur un bouton de commande, vous pouvez voir que notre fichier a été surchargé. Et comme je l'ai déjà dit, nous avons repris le nom du téléchargement. Ainsi, le nom du fichier téléchargeable doit être soumis à nouveau ou PDF. C'est aussi simple que cette fonction de bouton de téléchargement de domaine. C'est donc les gars, merci d'avoir regardé et je vous verrai dans la prochaine vidéo. 16. Conclu: Salut les gars. Merci beaucoup pour le réglage dans l'ordre jusqu'à la fin. Si vous n'avez pas rencontré toutes ces vidéos pour cette vidéo finale particulière, elle montre votre dévouement et votre passion pour la technologie est louable. Et tout d'abord, j'espère vraiment que vous avez apprécié ce cours particulier. Et plus que cela, j'ai pensé que j'étais capable de fournir la valeur désirée. Encore une fois, merci beaucoup d'avoir regardé, et j'espère vraiment vous voir dans une autre vidéo sous la signature rapide Onsen.