Créer un site Web méga réactif : HTML, CSS, JavaScript (2024)

1. Introduction: Bonjour et bienvenue sur notre site Web méga-réactif créé par des cours pratiques avec HTML, CSS et Javascript. Je tiens à vous remercier d'avoir choisi de vous inscrire à ce cours Si vous êtes enthousiaste à l'idée de vous lancer directement dans la création d'un site Web multi-pages réel, vous êtes au bon endroit. Tout au long de ce cours, je serai votre guide pour créer un site Web complet, moderne et adaptable à partir de zéro en utilisant HTML, CSS et chavscript Vous ne trouverez pas ici de longues discussions théoriques. Au lieu de cela, vous recevrez des instructions pratiques étape par étape pour vous doter des compétences nécessaires pour développer des sites Web impressionnants. Dans cette vidéo d'introduction, je vais donner un aperçu de notre projet et détailler ce que nous allons accomplir. Notre projet est conçu pour être un site Web de plusieurs pages et il s' adaptera à différentes tailles d'écran et à différents appareils. Nous allons commencer par créer un en-tête de site Web, suivi la barre de navigation avec des menus déroulants conviviaux pour chaque élément de navigation. Ensuite, nous allons passer à la section Services, qui sera suivie la section des projets comportant un filtre dynamique pour les catégories de projets Cliquez sur l'un des liens afficher les projets correspondants. À l'avenir, nous développerons une section de modèles composée de deux parties. La première partie est visible ici, et la seconde prend vie en cliquant sur un bouton Play. Le lecteur vidéo est entièrement fonctionnel. Il permet de contrôler le volume de lecture. Vous pouvez passer en arrière ou en avant. Nous pouvons également choisir la vitesse. Vous pouvez également trouver ici l'image en mode image et la lecture en plein écran. Après la section des modèles, nous allons créer une section de contact, qui sera suivie d'un pied de page pour résumer le site Web Comme je l'ai dit, notre site Web est multipage et vous pouvez naviguer vers différentes pages en cliquant sur les liens dans la barre de navigation Vous découvrirez la page d'un client avec des témoignages Ensuite, nous aurons une page de projet présentant une méthode engageante. Ensuite, la page suivante sera une page de contact équipée de formulaires et d'options de chat. Nous avons également ici une page de compte pour vous connecter, et enfin, une page de tarification. Comme je l'ai mentionné plus tôt, le site Web s' adapte à différentes tailles d'écran. Si vous inspectez la page, passez en mode réactif et que vous la prévisualisez sur différentes tailles d'écran et sur différents appareils, vous constaterez qu'elle est adaptable et qu'elle est plutôt jolie. Très bien, j'aimerais noter que ce projet est conçu pour les très grands écrans avec une résolution de 1920 pixels et une hauteur de 1080 pixels. Si vous utilisez un écran plus petit, je vous recommande de passer en mode réactif pendant les cours et de spécifier la largeur et la hauteur en conséquence. Cela garantira que le projet s'affiche sous son meilleur jour sur les petits écrans jusqu'à ce que nous le rendions totalement réactif. OK, j'espère que vous aimerez travailler sur ce projet autant que moi. Sans plus attendre, commençons. 2. Configuration: Bonjour et bienvenue au cours. Nous sommes ravis de vous avoir parmi nous, et nous sommes convaincus que vous trouverez ce cours agréable. Avant de nous lancer dans notre projet, préparons d'abord notre environnement de travail. Si vous êtes déjà configuré et prêt à écrire du code, vous pouvez ignorer cette vidéo et passer directement au projet. Cependant, si vous n'êtes pas encore prêt , c'est parfaitement bien. Nous vous guiderons dans la configuration certains outils essentiels tout au long de ce cours. Vous aurez besoin de deux outils principaux un navigateur Web moderne et un éditeur de texte. Pour notre navigateur Web, j'utiliserai Google Chrome, mais je recommande également Mozilla, Firefox. Vous possédez probablement déjà ces navigateurs, mais voyons rapidement comment les télécharger. Au cas où vous souhaiteriez obtenir Google Chrome, il vous suffit de visiter cette URL et de télécharger le navigateur. Le processus d'installation est simple, nous n'y consacrerons donc pas beaucoup de temps. Pour Mozilla, Firefox, vous pouvez l'obtenir à partir de cette URL. Les deux liens seront inclus dans cette conférence pour votre commodité. Très bien, parlons maintenant de l'éditeur de texte. Nous utiliserons le code de Visual Studio qui est l'un des meilleurs éditeurs de texte disponibles aujourd'hui. Cependant, vous pouvez utiliser votre éditeur de texte préféré si vous en avez un. C'est toujours à vous de décider. Je recommande de saisir le code Visual Studio a. Essayez de télécharger le code Visual Studio, visitez ce site Web et sélectionnez la version pour votre système d'exploitation, Windows, Mac ou Linux. Le processus d'installation du code Visual Studio est également simple. Vous ne devriez rencontrer aucun problème. Une fois que vous aurez installé ces deux outils, vous serez prêt à commencer le cours. Plongeons-nous directement dans le vif du sujet. 3. Pour commencer: Bonjour et bienvenue dans notre nouvelle section dans laquelle nous allons commencer à construire notre projet. J'ai créé un nouveau dossier sur le bureau. C'est ce qu'on appelle un site web adaptatif. Si je l'ouvre, vous trouverez ici deux dossiers différents. La première concerne les images dans lesquelles j' ai toutes les différentes images que nous allons utiliser tout au long du projet. Quant au second dossier, il s'appelle vidéos. J'ai ici une seule vidéo. OK, allons-y et ouvrons ce dossier dans le code VS. Outre ces deux dossiers, je vais également créer d'autres dossiers. Comme vous le savez, notre projet est un site Web de plusieurs pages, nous aurons donc quelques fichiers HTM, CSS et Jas différents. Je vais les stocker dans des dossiers séparés. Le premier dossier sera, en fait, nous avons besoin du dossier et du fichier. Le premier dossier sera HTML, dans lequel je vais créer un fichier HTML à points d'index. Ensuite, le dossier suivant sera, en fait, nous devons le créer en dehors du dossier HTML. Le deuxième dossier sera CSS. Je vais créer ici un fichier de style SS. Ensuite, nous devons créer un dossier pour le script v, lequel je vais insérer un fichier de script. Très bien, ouvrons un fichier HTML et créons le document HTML de base. Pour cela, je vais utiliser un package intégré du code VS. Ça s'appelle Amet. Si j'insère un point d' exclamation et que j'appuie sur Entrée, nous obtiendrons ici la taxe HTML de base La première chose que je vais faire ici est de changer le titre plutôt que le document. Je vais insérer un site web adaptatif. La prochaine chose que je vais faire est de lier les fichiers CSS et Jovscp Pour cela, nous devons ouvrir la balise link dans l'élément principal. Ensuite, dans l'attribut de référence H, nous devons spécifier le chemin du fichier. Tout d'abord, nous devons quitter le dossier actuel, qui est HTML. Pour cela, je vais instituer deux points. Ensuite, nous pouvons maintenant choisir le dossier nécessaire. Ce sera du CSS, puis nous aurons besoin du style SS. Très bien, de la même manière je vais lier le fichier Jovsc Tout d'abord, nous devons ouvrir la balise script juste au-dessus de la balise body de fermeture. Ensuite, je vais insérer votre attribut source dans lequel nous devons spécifier la partie du fichier. Encore une fois, nous devons quitter le dossier actuel. Nous avons besoin ici de deux points suivis de l'avant. Ensuite, nous devons choisir le dossier JS et sélectionner le script ou le fichier JS. Bien, les trois fichiers sont connectés. Je vais maintenant ouvrir le dossier dans le navigateur en utilisant Live Server. Comme vous pouvez le constater, le projet est en cours d'exécution dans le navigateur. En fait, si vous n'êtes pas familier avec le package Live Server, vous pouvez le trouver dans le code VS. Fermons ces messages. Vous pouvez rechercher un serveur live ici dans les packages. Vous pouvez installer ce package et exécuter le projet dans le navigateur. Lorsque vous utilisez le package Live Server et que vous apportez des modifications et des mises à jour au projet, vous n'avez pas à actualiser page chaque fois qu'il recharge automatiquement la page et exécute les modifications et mises à jour de votre projet Bien, la prochaine chose que je vais faire est de placer l'éditeur et le navigateur côte à côte, comme ça. Afin de rendre notre processus de travail plus pratique et plus simple, vous pouvez changer de navigateur et d'éditeur. Donc, la prochaine chose que je vais faire est d'ajouter d'autres liens CDN tout au long du projet Nous allons utiliser le téléphone, quelques icônes. Pour les utiliser, nous devons aller de l'avant et rechercher des téléphones CDN JS. Ensuite, nous devons copier le premier lien à partir d'ici. Ensuite, nous devons ouvrir balise de lien dans l' élément principal et coller le lien CDN ici dans l'attribut de référence H. De plus, je vais utiliser les téléphones Google tout au long du projet. Allons-y et visitons le site Web de Google Phones. Je vais chercher des téléphones ici. Le premier téléphone que je vais utiliser tout au long du projet sera le Croson One Allons-y et sélectionnons ce style. Ensuite, je vais rechercher un téléphone appelé Uli. Je ne sais pas si je le prononce correctement, ce téléphone, sélectionnons ce style Le dernier téléphone que j' utiliserai sera Ta. Allons-y et sélectionnons quelques styles différents. Ensuite, je vais récupérer ce lien à partir d' ici et le coller dans l'élément principal. C'est bon, alors c'est tout. Notre environnement de travail est prêt et nous devons maintenant commencer à créer la marge HT correspondante. Passons à la prochaine conférence. 4. HTML d'en-tête : créer la structure de balisage: Très bien, dans la conférence précédente nous avons préparé notre environnement de travail. Nous avons créé différents fichiers et dossiers. Nous avons également créé le document HTML de base dans lequel nous avons les liens pour la phonosomique, également pour les Il est maintenant temps de commencer à créer le balisage HTML de notre première section Si nous examinons le projet terminé, vous verrez ici l'en-tête du site Web avec la navigation. Dans cette conférence, nous allons créer le balisage HTML. Balisage pour la bannière et également pour les arrière-plans. Pour ce qui est de la navigation, nous nous en occuperons un peu plus tard. Allons-y et commençons à créer le balisage HTM. En fait, je vais zoomer un peu sur le code. La première chose que je vais faire est de créer les commentaires pour le conteneur dont nous avons besoin ici, la fin du conteneur, je vais séparer toutes les sections et parties les unes des autres avec les commentaires. Ouvrons le tag avec la classe container. Ensuite, nous allons créer l'en-tête. Mais avant cela, je vais réinsérer ici les commentaires pour l'en-tête. Insérons ici une balise d'en-tête HTML à cinq. Ensuite, nous devons créer la bannière. Mais encore une fois, insérons ici le commentaire de la bannière dont nous avons besoin ici. Fin de la bannière. Ouvrons la balise p avec la bannière du nom de la classe. La bannière comprendra trois fichiers différents. Nous aurons deux en-têtes et aussi le bas, le premier sera composé d'éléments de titre en H avec le texte Créer Ensuite, nous avons besoin de trois éléments de titre. Les textes seront des thèmes modernes et magnifiques. Maintenant, en bas, je vais placer le bouton avec l'élément lien car à la fin de la journée, une fois que nous avons cliqué sur le bouton, nous devons passer à une autre page. Nous avons besoin d'éléments. Pour l'instant, je vais en signe de livre sterling. Créons ensuite le type de bouton qui sera un bouton. Alors je vais m'inscrire aujourd'hui. C'est vrai, c'est à propos de la bannière. Ensuite, nous devons nous occuper des arrière-plans. Je vais insérer vos commentaires pour les arrière-plans. Ensuite, je vais ouvrir le tag avec les arrière-plans du nom de classe. Dans l'ensemble, nous aurons trois arrière-plans différents. Le premier sera le contexte principal. Je vais ouvrir le tag BG main. Dupliquons cette ligne de code deux fois. Changez les noms de classe dont nous avons besoin ici, G un puis G deux. accord, je pense que c'est tout à propos du balisage du tableau de l' en-tête. Jetons un coup d'œil. Nous n'avons ici que trois éléments visibles, les en-têtes et le bouton Ces arrière-plans ne sont pas visibles parce que nous avons ici que des éléments vides et profonds. Bien, il est maintenant temps de styliser ces éléments. Et pour cela, passons à la prochaine conférence. 5. Créer des styles CSS par défaut: D'accord, dans la dernière conférence, nous avons créé le balisage HTM pour notre première section, qui sera l' en-tête du site Web, cette partie du site Web. Nous devons maintenant commencer à écrire du CSS. Je vais ouvrir le fichier de style CSS. En fait, je vais placer le fichier sur le côté droit de l'éditeur de code. Dans ce cas, les deux fichiers sont visibles, ce qui est plus pratique pour nous. Dans cette conférence, nous allons créer des styles par défaut qui seront utilisés pour chaque élément dont nous avons besoin ici. Fin des styles par défaut, ensuite je vais sélectionner tous les éléments, et pour cela il faut utiliser un astérisque Dans ce cas, tous les éléments sont sélectionnés. La première chose que je vais faire est de me débarrasser de la marge et du rembourrage par défaut des éléments Si nous vérifions le navigateur, vous pouvez voir ici l'espace entre les éléments. Cela signifie donc que les éléments ont une certaine marge par défaut. Fixons la marge à zéro. De plus, je vais également mettre le rembourrage à zéro. Maintenant, si nous vérifions les éléments, vous pouvez voir que l' espace est supprimé. OK, ensuite je vais régler la taille de la boîte sur la zone de bordure. En fait, la zone de bordure est un moyen indiquer au navigateur Web de faciliter le dimensionnement des éléments d'une page Web lorsque vous définissez la hauteur intérieure d'un élément zone de bordure permet au navigateur d'inclure la bordure et le rembourrage dans ces mesures Si vous dites qu'un élément doit avoir une largeur de 100 pixels, ces 100 pixels incluent la bordure et le rembourrage, et le contenu réel à l'intérieur la boîte s'ajuste pour s'adapter à cet espace Cela vous permet de contrôler plus facilement la taille d'un élément. OK, je vais maintenant mettre la décoration sur N. Dans ce cas, nous supprimons le soulignement des liens. Ensuite, je vais également l'utiliser et le régler sur non. Avec ce code, nous supprimons les contours par défaut des éléments tels que les entrées ou les boutons. Enfin, je vais définir la famille de téléphones pour chaque élément. Comme vous le savez, nous récupérons quelques téléphones différents sur le site Web de Google Phones. Je vais utiliser l'un des téléphones, appelons-le Ut. C'est bon. Comme vous pouvez le voir, la police est modifiée pour chaque élément. Ensuite, je vais définir la taille de police de l'élément H mal à 62,5 %. Ce code définit la taille de police de l' ensemble du document HTML à 62,5 % de la taille par défaut Par défaut, la plupart des navigateurs ont une taille de police standard pour le texte, qui est généralement d' environ 16 pixels. Lorsque vous définissez la taille du téléphone sur 62,5 %, cela signifie que tout le texte de votre page Web sera 62,5 % de la taille par défaut Ceci est souvent utilisé comme ajustement dans la conception Web. 62,5 % de 16 pixels correspondent à dix pixels, ce qui est un joli chiffre rond Cela facilite le travail avec des unités relatives telles que M. Nous allons utiliser le RAM comme unité de mesure tout au long du projet. C'est pourquoi j'ai défini la taille de police du code HTML à 62,5 %. Par exemple, si vous définissez une largeur de deux RAM, elle sera de 20 pixels de large car chaque RAM fait dix pixels Il est ainsi plus pratique et plus simple de travailler avec les tailles de votre conception Web. Si nous vérifions les résultats, vous pouvez voir que les éléments sont devenus plus petits. Cela est dû à la taille de police de l'élément HTML, qui est désormais fixée à 62,5 %. C'est tout ce qui concerne les styles par défaut Passons à la prochaine conférence. 6. Arrière-plans de coiffure dans l'en-tête: Très bien, lors de la dernière conférence nous avons commencé à écrire du CSS. Nous avons créé des styles par défaut, et maintenant nous devons passer à autre chose et nous occuper de l'en-tête. Tout d'abord, je vais créer commentaires non sécurisés pour le conteneur, puis je vais sélectionner le conteneur Allons-y et définissons la hauteur maximale. La largeur sera de 100 % Quant à la hauteur, elle sera également de 100 %. Je vais également changer la couleur de fond. Réglons la couleur de fond sur le blanc. Pour le moment, rien n'a changé ici. Ensuite, passons à autre chose et prenons soin de l'en-tête. Je vais créer des commentaires pour l'en-tête. Allons-y ensuite et sélectionnons En-tête avec un nom de tag. Je vais définir avec la hauteur. La largeur sera de 100 %. Quant à la hauteur, je vais étudier jusqu' à 100 m de hauteur de fenêtre Cela signifie que l' en-tête occupera 100 % de la hauteur de la fenêtre d'affichage. Très bien, maintenant je vais styliser les arrière-plans puis nous passerons à autre chose et nous occuperons de la bannière. Allons-y et insérons ici de nouveaux commentaires pour les arrière-plans. Ensuite, je vais sélectionner les développements dans les arrière-plans dans les trois développements dont nous avons besoin ici, les arrière-plans, puis le sélecteur et je vais définir la position absolue pour les trois développements Tout d'abord, nous devons positionner les éléments. Dans ce cas, je vais positionner les éléments en fonction des éléments parents, qui dans ce cas sont des en-têtes. Afin de positionner un élément fonction de son élément parent, nous devons attribuer une position à l'élément parent mais avec une valeur relative. Ensuite, je vais sélectionner le premier arrière-plan qui, dans notre cas, est arrière-plan principal I ground , que vous voyez ici, celui-ci. Allons-y et sélectionnons la moyenne d'arrière-plan. Tout d'abord, selon la définition des hauteurs, je vais définir 150 % pour les hauteurs, 150 % également Dans ce cas, l' élément occupera 150 % de la hauteur de son élément parent Dans ce cas, l' élément parent est l'arrière-plan. Mais comme vous pouvez le constater, les arrière-plans n'ont aucune hauteur intérieure. L'arrière-plan principal occupera 150 % du w et de la hauteur de l'élément d'en-tête À l'heure actuelle, nous avons les mêmes résultats. Rien n'est visible, je parle de l'arrière-plan. Je vais maintenant définir l'arrière-plan avec la fonction de dégradé linéaire. La direction va être à droite. Ensuite, nous avons besoin de trois couleurs différentes. La première est qu'il nous faut en fait deux à gauche et non deux à droite. La première couleur sera transparente. Ensuite, nous avons besoin d'une deuxième couleur qui sera la couleur violette. La plus foncée, il nous faut ici 4400 pi. De plus, nous avons besoin ici de la deuxième couleur, elle sera à nouveau violette. Mais le plus léger, je vais utiliser ici le 4400b Laissez-moi vous expliquer ce que fait ce code ici. Comme vous pouvez le voir, ce code crée un arrière-plan pour l'en-tête. Il utilise un dégradé qui commence sur le côté gauche et passe du violet transparent au violet foncé en passant par un violet légèrement plus clair. Il donne à l'arrière-plan une transition de couleur fluide de gauche à droite, passant du violet foncé au violet plus clair , puis transparent. Très bien, ensuite je vais définir la position des éléments pour qu'elle soit -95 %. Je vais également définir la position de gauche, elle sera de -10 %. Vérifie le navigateur L'élément est positionné et nous devons maintenant faire pivoter cet élément en utilisant la propriété de transformation. Je vais utiliser ici deux fonctions, rotate z et skew x. Je vais expliquer chacune d'elles séparément La fonction de rotation Z aura une valeur de -15 degrés. De plus, nous avons besoin ici d'une inclinaison de x avec la valeur de 30 degrés. La première fonction, je veux dire la fonction de rotation Z, fait pivoter ou incliner un élément de la page Web de 15 degrés dans le sens antihoraire Cela donne à l'élément une légère inclinaison vers la gauche, comme si vous tourniez un cadre photo légèrement sur le côté Quant à la deuxième fonction skew, x, elle fait en sorte qu'un élément d' une page Web soit incliné ou incliné vers la droite Cela revient à incliner l' élément d'un côté pour le faire ressembler à un sol parallèle Comme vous pouvez le constater, nous avons ici de tels résultats. Nous devons maintenant arrondir le coin de l'arrière-plan, et pour cela je vais utiliser propriété appelée rayon, elle aura quatre valeurs différentes. Les trois premières valeurs sont également nulles. La dernière valeur qui indique le coin inférieur gauche de l'élément sera de dix m. Maintenant, comme vous pouvez le voir, le coin de l'élément est arrondi. Enfin, je vais diminuer légèrement l'opacité. Disons 2.9 Très bien. Comme vous pouvez le constater, nous avons ici une barre de défilement. En fait, nous n'en avons pas besoin. Afin de supprimer la barre de défilement, je vais attribuer au conteneur une propriété appelée overflow hidden, qui nous permet de masquer la barre de défilement OK, donc tout semble bon. Ensuite, je vais m'occuper du deuxième arrière-plan, je veux dire de l'arrière-plan. Celui-ci est placé sous le fond principal. Allons-y et sélectionnons celui d'arrière-plan. Définissez dans les hauteurs. Dans ce cas, je vais régler avec 50 %, puis la hauteur sera de 100 %. Encore une fois, je vais utiliser un arrière-plan avec une fonction de dégradé linéaire. Dans ce cas, nous avons besoin ici de la direction par défaut. Je ne vais pas en insérer deux à gauche ou deux à droite ou quoi que ce soit d'autre. La première couleur sera transparente. Ensuite, je vais ajouter ici la valeur en pourcentage que je vais expliquer très bientôt. Insérons ici la deuxième couleur. Ce sera F 26 C. Alors nous avons besoin de la troisième couleur. Ce sera le F724b. Ici, la valeur en pourcentage, je veux dire 60 %, indique la position où la transition de couleur se produit dans le dégradé linéaire. En termes simples, cela signifie que l'arrière-plan commence par être transparent, puis passe à la première couleur lorsque 60 % du dégradé est terminé et continue à passer à la deuxième couleur pour les 40 % restants du dégradé Dans ce code, 60 % du dégradé sera transparent, puis il passera progressivement à la première couleur, créant ainsi une transition de couleur fluide sur l'arrière-plan. OK, occupons-nous de la position. Je vais régler la position à -40 %. Nous avons également besoin de la bonne position L' élément sera positionné à -10 %. Maintenant, à titre de supposition, nous devons le faire pivoter comme le premier arrière-plan que je vais utiliser. En fait, nous avons besoin ici des mêmes propriétés et valeurs. Copions ce code, collez-le ici. L'arrière-plan est pivoté et c'est joli. ce cas, arrondissons le coin de l'arrière-plan en utilisant un rayon de bordure. Nous avons besoin d'ici 000.5 run. Le fond est plutôt joli, mais nous avons ici un petit problème. Nous devons placer ce contexte dans le contexte principal. Pour cela, je vais utiliser la propriété d'index Z. Par défaut, chaque élément possède une propriété d'index Z dont la valeur est zéro. Mais si nous ajoutons ici un index avec la valeur, disons une valeur supérieure à zéro, alors l'arrière-plan se retrouvera derrière moi sous l'arrière-plan dans. Très bien, à propos du deuxième arrière-plan, nous devons maintenant nous occuper du troisième arrière-plan, qui dans notre cas est le deuxième arrière-plan. En fait, je pense qu' il vaudrait mieux dupliquer ce code ici. Changeons le nom de la classe. La largeur et la hauteur seront similaires, 50 % et 100 %. Quant au dégradé linéaire, je vais le modifier légèrement. Nous avons besoin ici de 70% Nous avons également besoin de couleurs différentes. La deuxième couleur sera une 5995. Pour ce qui est de la troisième couleur, je vais instituer E. Alors nous avons besoin de la 9458 En ce qui concerne les positions, je vais définir deux positions à 60 %. La bonne position sera de 10 %. Nous avons besoin de la même propriété de transformation ici. Le rayon de la bordure sera à nouveau le même. Nous allons vérifier les résultats maintenant. Comme vous pouvez le constater, l' arrière-plan s'est retrouvé derrière l'arrière-plan principal. Pour résoudre ce problème, nous avons encore une fois besoin de la propriété d'index Z. Mais dans ce cas, la valeur de la propriété d'index z doit être supérieure à celle de l'index z. Mettons-le à deux. Maintenant, l'arrière-plan doit être visible, et oui, il est visible. La seule chose que je vais faire est d'ajouter de l'opacité. Je veux dire diminuer l' opacité 2.4 Je vais également ajouter à l'arrière-plan certains effets d'ombre dont nous avons besoin ici Ombre de boîte avec les valeurs sept et quatre Ram. Les six RAM, et la couleur sera RGBA 000 et l'opacité 0,9. Ce code ajoute une ombre à un élément de la page Web Permettez-moi de vous expliquer à quoi servent ces valeurs. Le premier chiffre sept, Ram, détermine la distance horizontale entre l'ombre et l'élément. La deuxième valeur, quatre RAM, détermine la distance verticale entre l'ombre et l'élément. Le troisième chiffre 6, Ram, contrôle la taille ou la barre de l'ombre. Quant à la couleur, elle indique la couleur de l'ombre. Dans ce cas, il s'agit d'une ombre très foncée, presque noire car nous avons trois zéros ici, ce qui indique la couleur noire Mais nous avons ici une opacité de 0,9 qui rend le noir foncé légèrement plus clair Finalement, nous avons ici cet effet d'ombre agréable et cool. D'accord, en fait, c' est une question d'arrière-plan. Je vais m'arrêter ici et passer à la prochaine conférence, dans laquelle nous allons styliser la bannière de l'en-tête. 7. Créer une bannière dans l'en-tête: Très bien, dans la dernière conférence, nous avons stylisé les arrière-plans de l'en-tête Comme vous pouvez le voir, nous avons ici trois arrière-plans différents qui sont positionnés et qui sont plutôt jolis. Nous devons maintenant nous occuper de la bannière, qui est actuellement placée dans le coin supérieur gauche de la page. En fait, il est placé derrière le fond. Maine. Allons-y et insérons de nouveaux communs pour la bannière. Ensuite, je vais sélectionner Banner et définir sa position, qui sera absolue. Comme vous le savez, lorsque nous utilisons la position absolue, nous avons besoin de la position relative pour l'élément parent. Comme vous pouvez le voir, la dame d'en-tête a une position relative. Ensuite, je vais régler les deux positions à 18 %. Ensuite, nous aurons la position de gauche. Ce sera 20 % Comme vous pouvez le voir, la bannière a changé de position. Il est placé sous le fond principal. Nous devons donc corriger cela en utilisant la propriété index. Je vais définir l'indice 24. Maintenant, comme vous pouvez le constater, le problème est résolu. Bien, il est maintenant temps de personnaliser chacun des éléments séparément. Je vais commencer par le premier élément d'en-tête, qui est H. Allons-y et sélectionnons Banner, puis l'élément d'en-tête H. Tout d'abord, je vais changer de famille de téléphones. Dans ce cas, utilisons un téléphone appelé Mull. Ça va être cursif. Ensuite, je vais augmenter la taille du téléphone, en faire 13 RAM. Vérifie le navigateur. La taille du téléphone est modifiée, et nous avons également ici une famille de téléphones différente. Ensuite, je vais changer de couleur, ce sera le blanc. Je vais ajouter ici un effet d'ombre. Dans ce cas, utilisons l'ombre du texte. Il fonctionne de la même manière que l'ombre de la boîte. Je vais interférer avec les valeurs 01 Ram, alors nous aurons trois Ram. Quant à la couleur que je vais utiliser , elle doit être noire, mais dans ce cas avec une opacité plus faible, soit 0,3. Comme vous pouvez le voir, l'en-tête est plutôt joli Ensuite, je vais vous parler du deuxième élément d'en-tête, qui est trois. Allons-y et sélectionnons Bender, puis les trois éléments de titre H. Je vais changer la taille de la police, dans ce cas, ce sera trois RAM. Ensuite, je vais modifier le poids de la police. Allègons le poids des polices et fixons-le à 300. Ensuite, je vais transformer le texte en majuscules. Je vais maintenant changer la couleur du titre. Ça va être blanc. Encore une fois, utilisez Tech Shadow. Prenons cette ligne de code. La seule chose que je vais faire ici est de diminuer l'opacité Ce sera 0,1 Enfin, je vais créer de l' espace en utilisant la marge. La marge en haut sera nulle. Alors nous aurons zéro sur le côté droit. Ensuite, nous avons le fond, il y aura trois RAM. Pour ce qui est du côté gauche, je vais le régler sur un Ram. Très bien, ça y est, à propos du deuxième titre. Il est maintenant temps de personnaliser le bas. Allons-y et sélectionnons Bannière puis bouton. Tout d'abord, je vais m'asseoir en hauteur. Réglons avec 215 RAM. Ensuite, la hauteur sera de cinq cadres. Je vais également changer le fond. Utilisons à nouveau les dégradés linéaires. La direction de la transition de couleur va être deux, non ? Ensuite, nous avons besoin de la première couleur qui sera A trois EC, c'est une couleur violette. Ensuite, nous avons besoin d'une autre couleur violette, qui sera 84, puis 30. C'est encore une fois une couleur violette, mais la plus foncée. Vérifie le bouton que nous avons ici. Fond sympa et cool avec dégradé. Ensuite, je vais me débarrasser de la bordure par défaut. Réglons-le sur aucun, car je vais arrondir le bouton en utilisant le rayon de bordure. Envoyons-le au RAM et vérifions le navigateur étape par étape ou par bouton. Ça a l'air super. Ensuite, je vais régler la taille du téléphone à 1,6 RAM. De plus, je vais faire monter le poids du téléphone. Transformons ensuite le texte en majuscules. Le texte est plutôt joli, mais nous devons y ajouter un peu plus de style. Nous devons créer un espace entre les lettres en utilisant l'espacement des lettres Ce sera un 0,1 RAM et cela changera également de couleur. Nous avons besoin d'une couleur plus claire. Je vais régler la couleur sur le blanc. Maintenant, le bouton est plutôt joli et cool. Ensuite, je vais ajouter un effet d' ombre à l'élément en utilisant Pox Shadow d'une valeur de 01 Ram, trois Ram. Et la couleur sera RTB A avec la plus faible opacité 0,1 Comme vous pouvez le voir, le bouton a l'effet d' ombre Ensuite, je vais créer un espace sur le côté gauche en utilisant la marge gauche. Ce sera une rampe. Et changez également le type du curseur, faites-en un pointeur. Bien, avant de terminer cette conférence, je voudrais ajouter une dernière chose à notre bouton. Je vais créer un effet de survol. Une fois que nous avons survolé le bouton, nous devons le déplacer vers le haut à l'aide de la fonction transform translate Allons-y et sélectionnons Bannière, puis bouton. Et nous avons besoin ici de la pseudoclasse Hover. Utilisons la fonction transform translate y. Cela nous permet de déplacer les éléments selon l'axe y. Je veux dire verticalement. Je vais ajouter ici une valeur négative. Ce sera -0,2 Ram. Si je vérifie le navigateur, comme vous pouvez le voir, une fois que nous avons survolé le bouton, il se déplacera légèrement vers le haut Faisons en sorte que cet effet soit plus fluide en utilisant la transition. Je vais ajouter ici la transformation. Et la durée de l'effet sera de 0,3 seconde. Maintenant, si je passe le curseur sur le bouton , nous obtiendrons cet effet sympa et cool Très bien, en fait, c' est à propos de la bannière. Ensuite, nous allons nous occuper de la navigation, logo et de la barre de navigation, ces éléments de navigation avec leurs menus déroulants Passons à autre chose et occupons-nous de cela. 8. Créer le balisage HTML de la navigation: Bonjour et bienvenue dans votre nouvelle section, dans laquelle nous allons créer une barre de navigation pour notre projet. Dans la dernière section, nous avons créé l'en-tête du site Web, qui consiste en une bannière. Il est placé sur le côté gauche de la page. Et nous avons également ici trois arrière-plans différents qui, mon avis, sont plutôt jolis. Jetons un coup d'œil au projet terminé. La barre de navigation sera composée d'un logo. Il est placé dans le coin supérieur gauche de la page. Et nous aurons également ces éléments de navigation placés horizontalement dans une rangée. Chaque élément de navigation possède un menu déroulant, à l'exception du bouton. Dans cette conférence, nous allons créer un balisage HTML pour le logo ainsi que pour les éléments de navigation En ce qui concerne les listes déroulantes, nous nous en occuperons un peu plus tard OK, allons-y, ouvrons le code VS et commençons à créer le balisage HTML Tout d'abord, je vais insérer ici des commentaires pour la navigation. Ensuite, je vais ouvrir HTML Five Novelment avec l'offre de nom de classe Ensuite, nous devons créer le logo. Dans un premier temps, je vais insérer les commentaires pour le logo. Ensuite, je vais ouvrir le lien Elements. Nous utilisons ici l'élément Link, car lorsque nous cliquons sur le logo, nous devons passer à la page principale, l'index HTML. Si je vais sur l'une des pages ici puis que je clique sur le logo, nous devrions revenir à la page principale I, l'index du fichier HTM. Dans l'attribut de référence H, je vais indiquer l'index HTML. Ensuite, nous avons besoin ici d' un développement avec le logo de la classe. Le logo sera composé de deux éléments d' envergure différents. Ouvrons la balise span et insérons le code. Et puis nous devons à nouveau, étendre les éléments avec le texte Create. Ensuite, je vais ouvrir une autre balise span. Je vais insérer vos modèles. OK, c'est ça, à propos du logo. Ensuite, nous devons créer les éléments de navigation. Je vais insérer vos commentaires pour les articles. Ensuite, je vais ouvrir la liste de tous les éléments avec le nom de la classe, aucun élément. La liste sera composée de six éléments de liste différents. Nous avons besoin ici d'éléments LI et il aura la classe no item. Ensuite, à l'intérieur de l'élément LI, je vais ouvrir le lien comme le logo, nous devons spécifier ici les noms des pages. Au début, je suis en classe, il n'y aura aucun lien et ensuite le premier article sera à la maison. Une fois que nous avons cliqué sur le premier élément, nous devrions revenir à la page principale. Je veux dire l'index du fichier HTML. Jetons un coup d'œil à la version finale. Si je vais sur l'une des pages et que je clique sur Accueil, nous reviendrons à la page principale. Je vais recommencer, indexer le HTML dans son ensemble. Nous aurons six éléments de liste différents. Par conséquent, je vais dupliquer l'élément LI cinq fois, puis modifier les éléments. Le deuxième élément sera celui des clients. Nous devons changer le nom du fichier HTML. En fait, ces fichiers ne sont pas encore créés. Nous nous occuperons d'eux dans les prochaines sections. Dans ce cas, je précise simplement les noms des fichiers HTML. Nous les créerons plus tard. D'accord, le troisième article sera constitué de produits. Changez le fichier HTML, nous devons ensuite entendre les produits. Nous vous contacterons, puis je vais consulter vos comptes Enfin, nous avons besoin de connaître les prix. Comme je l'ai dit, ce sera le bouton et non le lien. Je vais changer le nom de classe dont nous avons besoin ici maintenant, PTN. Modifiez également le nom du fichier HL. Il va fixer le prix du HTML. C'est bon. Je pense que c'est tout à propos du balisage HTML Jetons un coup d' œil aux projets. Comme vous pouvez le constater, les éléments de navigation ainsi que le logo sont placés derrière le fond. De plus, la disposition des arrière-plans est légèrement modifiée. Nous devons prendre soin d'eux et régler ces problèmes. Allons-y et passons à la prochaine conférence. 9. Créer le logo du site Web: Très bien, dans la dernière conférence, nous avons créé le balisage HTML pour la barre de navigation de notre projet Et maintenant, il est temps de styliser cet élément. Dans cette conférence, nous allons styliser le logo. Revenons au fichier CSS et commençons à écrire le code CSS. Nous devons ajouter ici de nouveaux commentaires pour la navigation. Je vais sélectionner les éléments de navigation, qui ont un nom de classe. Non, tout d'abord, je vais définir sa position. Ça va être réparé. Nous devons également définir les propriétés du haut et de la gauche. Les deux seront nuls en ce moment, rien n'a changé ici. Comme vous pouvez le constater, les éléments de navigation sont placés en arrière-plan et nous devons corriger cela. Pour résoudre ce problème, nous devons utiliser une propriété d'index et je vais lui attribuer une valeur plus élevée. Disons dix. Maintenant, comme vous pouvez le constater, les éléments ne sont plus placés derrière l'arrière-plan. Ensuite, je vais définir la largeur et la hauteur de la navigation définie avec, elle sera de 100 %. Quant à la hauteur, je vais la régler sur 12 RAM. De plus, je vais ajouter ici une couleur d'arrière-plan temporaire afin de mieux voir où se trouve la barre de navigation. Réglons la couleur. Disons gris clair. Ça va être CC. Nous avons fait notre sieste. Il est placé en haut de la page Web. Ensuite, je vais créer de l'espace à l' aide d'un rembourrage. Le rembourrage en haut et en bas sera nul. Pour ce qui est du côté gauche et droit, je vais le régler sur 15 rapides. Comme vous pouvez le voir, nous avons ici un espace sur le côté gauche à droite. Ensuite, je vais utiliser Flex Box pour aligner les éléments. Comme vous le savez maintenant, une partie se compose de deux parties différentes. Nous avons le logo et les éléments de navigation. Nous devons placer les deux éléments dans une rangée horizontalement sur les côtés gauche et droit. Pour cela, nous devons utiliser Display Flex. Comme vous pouvez le constater, le logo et les éléments de navigation sont placés côte à côte. Pour les placer à gauche et à droite, je vais utiliser le contenu de justification avec l'espace de valeurs entre les deux. Maintenant, comme vous pouvez le voir, le logo est placé sur le côté gauche. Quant aux éléments de navigation, ils sont placés sur le côté droit du No. OK. Ensuite, je vais placer les éléments, je veux dire, les éléments de la barre de navigation au centre verticalement. Et pour cela, je vais utiliser une autre propriété du CSS, Flexbox, qui s' appelle Align Items Et je vais le mettre au centre. Les éléments sont maintenant placés verticalement au centre. Très bien, c'est tout pour le Now Bar en ce moment. Ensuite, je vais m' occuper du logo. Nous devons ajouter de nouveaux commentaires pour le logo. Ensuite, je vais sélectionner Developments qui porte le logo du nom de classe. Encore une fois, je vais utiliser des livres Flex pour aligner les éléments. Réglons l'affichage pour qu'il soit flexible. Dans ce cas, je vais placer les objets verticalement les uns sur les autres. Pour cela, nous devons changer la direction de Flex Book et ce sera une colonne. Maintenant, comme vous pouvez le voir, les éléments sont placés verticalement. Ensuite, je vais sélectionner le premier élément de span du logo. Je parle de celui-ci. Pour cela, nous avons besoin du logo. Ensuite, répartissez les éléments. Nous devons maintenant utiliser l'une des pseudo-classes appelée nth child selector Ici, nous devons préciser le numéro. Comme je l'ai dit, nous devons sélectionner le premier élément de span. Je vais donc t' en faire une. Tout d'abord, je vais changer de famille de téléphones. Utilisons ici un téléphone appelé les taupes. Augmentons également la taille du téléphone. Je vais le régler sur trois RAM. Jetons un coup d'œil ici, nous avons les premiers éléments d'envergure. Modifions le poids de la police. Je vais faire preuve d'audace. Transformons le texte en majuscules et changeons la couleur. Je vais utiliser la couleur blanche. Nous avons ici le premier élément d' envergure du logo. En fait, allons-y et débarrassons-nous de ce contexte temporaire. Je pense que nous n'en avons plus besoin maintenant. Le logo est bien plus beau. Ensuite, je vais sélectionner l'élément span qui est placé dans le premier élément du volet, celui-ci est créé par le texte. Pour cela, nous avons d'abord besoin du logo suivi de l'élément span avec le sélecteur de graphique Et encore une fois, nous avons besoin d'un élément span. Changeons la taille du téléphone. Ce sera 1,8 RAM. La taille de cette partie, cet élément panoramique, est modifiée à mesure que le texte devient plus petit. Nous devons déplacer l'élément vers le haut comme le texte ici. Pour cela, je vais utiliser transform. Avec la fonction translate y, elle déplace l'élément selon l'axe y. Je veux dire qu'il déplace l'élément verticalement. Pour déplacer l' élément vers le haut, nous devons utiliser une valeur négative. Dans ce cas, ce sera 0,8 Comme vous pouvez le voir, l'élément n'a pas été déplacé vers le haut. Le problème est que Spanelon est un élément intégré. Et une fois que vous avez l'élément en ligne, propriété de transformation n' est pas appliquée Nous devons donc transformer les éléments d'un bloc en ligne en un bloc en ligne afin d' appliquer la propriété de transformation Maintenant, le problème doit être résolu. Bien, comme vous pouvez le voir, l'élément est placé vers le haut et la propriété de transformation fonctionne correctement. Ensuite, je vais sélectionner le deuxième élément de span. Je veux dire que ce modèle nous permet de copier ce sélecteur à partir d'ici Et modifiez le sélecteur ni. Il nous en faut deux. Changeons la famille de polices. Ce sera Croson One Cosi. Ensuite, nous avons besoin d'une taille de police, elle sera de 1,5 Rams Je vais changer de couleur. Ajoutons-le au DDT, qui est de couleur gris clair Nous avons ici le deuxième extrait. Ensuite, je vais créer un espace entre les lettres en utilisant l'espacement des lettres, et ce sera 0,1 RAM Je vais également placer les éléments sur le côté droit. Et pour cela, utilisons la propriété line avec la valeur, droite, le texte est placé sur le côté droit. Mais en fait, ce n'est pas ce dont nous avons besoin ici. Si nous examinons la version finale, vous verrez que le deuxième élément de rotation est bien placé sur le côté droit. Nous devons le déplacer légèrement vers la droite et aussi vers le haut, je vais utiliser la propriété transform. Nous devons ici traduire fonction comme les valeurs auxquelles je vais passer ici. 0,2 Ram, également ligne ici, moins un Ram. La première valeur, 2,2 Ram, déplace l'élément vers la droite horizontalement de 22 pixels. Quant à la deuxième valeur, moins un RAM, elle déplace l'élément verticalement de dix pixels vers le haut. Le signe négatif, dans le cas où c'est la direction, est vers le haut. Quant aux valeurs positives, elles les déplaceraient vers le bas. Nous avons maintenant le même problème ici. Affectons également un bloc d'affichage en ligne au deuxième élément Maintenant, comme vous pouvez le constater, le problème est résolu. Nous avons ici des résultats intéressants et intéressants. Enfin, je souhaite ajouter un petit effet d'ombre au logo. Je parle des éléments de portée. Allons-y et sélectionnons tous les éléments de span dans la propriété d'ombre du texte du logo avec les valeurs 0,5 Ram, un Ram. Ensuite, la couleur sera RGBA, couleur noire avec une opacité plus faible, et ce sera 0,2. D'accord, nous avons donc le logo C'est plutôt joli avec le logo. Nous avons maintenant terminé, il est temps de passer à autre chose et de personnaliser les éléments de navigation. Allons-y et faisons-le lors de la prochaine conférence. 10. Éléments de navigation de coiffage: Très bien, lors de la dernière conférence, nous avons conçu le logo du site Web. Il est maintenant temps de passer à autre chose et continuer à personnaliser la barre de navigation. Dans cette conférence, je vais styliser les éléments de navigation. Passons au code VS. Tout d'abord, avant de commencer à styliser les éléments de navigation, je souhaite déplacer la navigation vers le haut. Je veux dire en dehors de l'en-tête. Découpons le code d' ici et collons-le ici. OK, après le logo, je vais voir de nouveaux commentaires pour les éléments de navigation. Ensuite, je vais sélectionner l' élément UL qui porte le nom de classe Now items. Tout d'abord, je vais définir la largeur. Ce sera 50 % Ensuite, je vais placer les éléments de navigation côte à côte, horizontalement dans une rangée. Parce qu'à l'heure actuelle, ils sont placés verticalement. Pour ce faire, je vais utiliser Flex box. Nous avons besoin de Display Flex. Maintenant, si nous vérifions les résultats, vous verrez que les éléments sont placés horizontalement dans une rangée. Ensuite, je vais créer un espace entre les éléments et pour cela je vais utiliser l'une des propriétés de boîte flexible appelée justify content. Et je vais lui attribuer une valeur appelée space even. Cela créera un espace uniforme entre les objets. Bien, après cela, allons-y et sélectionnons éléments LI dont le nom de classe est l'élément. Je vais me débarrasser des puces par défaut pour cela. Utilisons le style de liste et attribuons-lui la valeur none. Comme vous pouvez le constater, les balles ont disparu. Ensuite, je vais sélectionner les éléments de lien dont nous avons besoin ici. Aucun lien. Augmentons la taille du téléphone. Je vais passer à Ram, puis je vais transformer le texte en majuscules. En fait, nous avons besoin ici de la transformation du texte et du case value appl. Et changez également la couleur. La couleur sera le blanc. Nous allons vérifier le résultat. Comme vous pouvez le constater, les éléments de navigation sont plutôt jolis. Ensuite, je vais créer un espace entre les lettres. Faisons en sorte que ce soit 0,1 RAM. Ensuite, je vais ajouter un petit effet d'ombre aux éléments du lien en utilisant Tech Shadow. Les valeurs seront de 0,5 gramme par RAM. Et la couleur noire RGBA avec une opacité de 0,2 Très bien, donc je trouve que les boutons sont plutôt jolis Nous devons maintenant nous occuper du dernier élément qui sera le bouton, je veux dire le bouton de tarification. Allons-y et sélectionnons cet élément en utilisant le nom de classe maintenant, PTN. Définissons la hauteur maximale. Je vais régler la largeur à 13 RAM. Pour ce qui est de la hauteur, je vais faire cinq béliers. Modifiez également la couleur de fond. Mettons-le en blanc. Comme vous pouvez le constater, les hauteurs ne sont pas appliquées aux éléments et nous avons ici le même problème. Je veux dire que l' élément de lien par défaut est un élément en ligne et que, par conséquent , les hauteurs intérieures ne sont pas appliquées à l'élément, nous devons le modifier Dans ce cas, je vais utiliser Display Flex car nous aurons également besoin d'autres propriétés de boîte flexible. C'est pourquoi j'utilise ici du lin et non un bloc ou un bloc en ligne. Maintenant, si je vérifie le résultat, vous verrez que la hauteur intérieure est appliquée à l'élément qui placera le contenu au centre de la boîte. Et pour cela, je vais utiliser le code de justification du contenu avec le centre de valeur. Et nous avons également besoin d' un centre d'éléments, centre de contenu justifié. Alignez l'élément au centre horizontalement. Quant au centre de l'élément de ligne, il place l'élément au centre verticalement. Nous avons maintenant ici le centrage parfait. En fait. Je vais placer les éléments de lien ainsi que le bas au centre verticalement. Pour cela, nous pouvons ajouter ici centre des éléments de ligne et le problème sera résolu. Maintenant, les éléments du lien et le bouton sont bien placés au centre. Passons à autre chose et ajoutons ici quelques styles supplémentaires. Ensuite, je vais arrondir le bouton en utilisant le rayon, ça va être une forme, maintenant le bouton est arrondi. De plus, je vais ajouter en bas un effet d' ombre en utilisant Box Shadow avec des valeurs 01 Ram. Alors nous aurons ici trois Ram. La couleur sera RTP A avec une opacité 0,1. Nous avons ici un bel effet d'ombre Ensuite, je vais retirer le téléphone. Augmentons la taille du téléphone. Il y aura deux béliers. Je vais utiliser l'espacement des lettres. Ce sera une RAM de 0,1. Changeons la couleur. Je vais utiliser la couleur F88 344. Il sera de couleur orange, comme les boutons. Je vais mettre le texte en majuscules. Utilisons les texans en majuscules. Très bien, les boutons avec le bouton sont plutôt jolis Je vais ajouter un effet de survol au bouton. En fait, je vais utiliser le même effet de survol. Sélectionnons le bouton PTN. Avec Hover, nous devons nous transformer. La valeur Translate Y sera de -0,2 n. Si je survole le bouton, il se déplacera vers Mais comme vous le voyez, nous avons besoin d' une transition harmonieuse. Utilisez la propriété de transition dont nous avons besoin ici pour transformer. La durée de l' effet sera de 0,3 seconde. Nous avons maintenant ici un effet de survol agréable et cool. Bien, en fait, il s'agit des n éléments. Nous devons maintenant ajouter à chaque élément de navigation le menu déroulant, comme dans le projet terminé. Pour cela, allons-y et passons à la prochaine conférence. 11. Créer le balisage HTML du premier menu déroulant: Très bien, dans la dernière conférence, nous avons personnalisé les éléments de navigation ainsi que le bouton. Il est maintenant temps de passer à autre chose et de commencer à créer le menu déroulant. Je parle du menu déroulant du premier élément de navigation. Jetons un coup d'œil au projet terminé. Si je survole le premier élément de navigation, le menu déroulant apparaît Comme vous pouvez le constater, le premier menu déroulant se compose de deux parties principales. Nous avons le côté gauche et nous avons également le côté droit. Sur le côté gauche, nous avons la liste des fonctionnalités. Comme vous pouvez le constater, une fois que nous survolons les éléments de la liste, peu d'effet de survol Le côté droit est plus complexe. Nous avons ici les icônes des téléphones avec effet de survol. De plus, nous avons des éléments textuels de différentes couleurs. Et en bas, vous pouvez voir le bouton. bon, c'est ça. Ce que nous allons créer dans cette conférence. Je vais créer le balisage HTML, puis nous allons concevoir le menu du haut de la ville Très bien, passons au code VS et commençons à créer le balisage HTML Nous devons insérer les commentaires juste après l'élément lien, à l'intérieur de l'élément LI. Insérons vos commentaires dans le menu déroulant. Ce sera le premier menu déroulant dont nous avons besoin ici, le menu déroulant. Ensuite, dans la première liste déroulante, je vais ouvrir les éléments profonds qui auront deux classes différentes. Le premier sera un nom de classe commun, menu déroulant. En plus de cela, nous en avons besoin ici, d'un menu déroulant. Ensuite, je vais insérer ici un autre élément profond qui se trouvera à gauche de la liste déroulante dont nous avons besoin ici. Déposez-en un vers la gauche. Créons également le côté droit. Dupliquons cette ligne de code et changeons le nom de la classe. Nous avons besoin que vous en fassiez une liste déroulante, d'accord. Très bien, dans un premier temps, occupons-nous du côté gauche. Je vais insérer ici H, trois éléments de titre avec les fonctionnalités du texte. Ensuite, après le départ, nous avons besoin d'un autre développement qui sera le moins important, je veux dire l'enveloppe à l'intérieur du développement Je vais en créer un autre qui sera l'élément des fonctionnalités. Je vais donc ajouter ici le nom de la classe, l'élément de fonctionnalités. Chaque élément de la liste sera composé de deux éléments. Le premier sera un phonosomicon. Pour le second, nous aurons ici un élément si nous examinons le projet terminé et que nous vérifions le côté gauche Comme vous pouvez le voir, nous avons les phonosomicons ainsi que le panelement avec du texte Sécurisons les éléments I avec les classes FA solid A solid A star et puis, à la place, span element, le texte sera entièrement composé de fonctionnalités Bien, au total, nous aurons 11 éléments de liste différents. Par conséquent, je vais dupliquer dix fois l'élément de la liste des fonctionnalités. Ensuite, nous devons modifier les noms de classe des téléphones ainsi que le contenu des éléments span Le deuxième élément sera un solide, des boîtes A empilées Quant à cet élément de ventilateur, il y aura plus de 100 éléments. Ensuite, le troisième phonosomicon sera un solide, un fichier A. En ce qui concerne cet élément de ventilateur, je vais insérer plus de 1 000 mises en page Le prochain phonosomicon sera un solide, une plume de stylo. Nous devons également modifier ce panneau. Je vais insérer votre design sans code. Ensuite, le micon du téléphone deviendra une clé solide En ce qui concerne ce panneau, je vais insérer votre générateur de thèmes Ensuite, l'icône suivante sera un solide, un achat de voiture. Comme nous devons modifier ce panel qui sera le commerce électronique. Ensuite, nous ferons également câbler un réseau pour changer ces panneaux. Nous allons avoir ici le flux de travail. Ensuite, la prochaine sera un solide, une ampoule. En ce qui concerne ce panel, insérons ici le marketing Ensuite, nous aurons ici une phase solide pour les développeurs de code. L'icône suivante sera un bureau solide. En ce qui concerne ce panneau, je vais insérer des exemples secondaires. Enfin, nous avons besoin de la dernière icône indiquant quels solides le spanelment sera intégré OK, passons à la première partie, je veux dire le côté gauche du menu déroulant. Ici, nous avons tous les phonicons et les extraits. Ensuite, nous devons prendre cet endroit du côté droit. Tout d'abord, nous avons besoin de la troisième rubrique qui sera consacrée aux services. Ensuite, après avoir dirigé, je vais ouvrir ce menu déroulant. Ensuite, dans le cadre du développement, je vais ouvrir un autre D qui sera le service déroulant lui-même. Il comprendra des éléments et également un développement qui inclura lui-même, deux éléments de travée. Insérons ici l'élément I, qui sera une clé Aa solida Ensuite, comme je l'ai dit, nous avons besoin d'un développement avec le service de liste déroulante des noms de classe. Je vais instituer deux éléments d'envergure. Le premier sera Thin Builder. Dupliquons cette ligne de code. Le deuxième élément de span sera le Thin Builder numéro un. Maintenant, je vais dupliquer le service de liste déroulante. Au total, nous aurons sept services déroulants. Dupliquons ce code six fois. Nous devons maintenant modifier la phonétique ainsi que le contenu des éléments span Le deuxième phonsomicon sera un solide. En fait, nous devons ici supprimer ce T, sinon l'icône ne s'affichera pas. Débarrassons-nous de ça. Comme je l'ai dit, le phonoomicon sera un solide, une ampoule En ce qui concerne la place de marché de panelmentse. En ce qui concerne le deuxième élément du panneau, je vais insérer ici des modules, des mises en page et des thèmes Le phonosomicon suivant sera alors un solide, un nuage. Pour ce qui est de ces éléments généraux, entrons dans le cloud. Ensuite, le second sera le stockage dans le cloud pour les concepteurs. Le prochain phosmicon sera un solide, un cerveau. Nous allons changer les panneaux. Ai Spanel va créer des sites Web avec l'IA Ensuite, l'icône suivante sera un groupe de personnes solide. En ce qui concerne les éléments généraux, nous avons besoin d'équipes. Ensuite, le second sera la collaboration pour les agences. Nous avons alors besoin d'un globe solide. En ce qui concerne l'hébergement de panelmentseed, le second sera l' hébergement rapide des sites Web Nous devons maintenant modifier le dernier service de haut en bas. Nous avons besoin d'une couronne solide. En ce qui concerne les éléments span, interférons IP et le second sera le support 2047 et tout compte Très bien, tous les services déroulants sont prêts. La dernière chose à faire est de créer le bouton qui doit être placé ici. Ouvrons le type de bouton qui sera bouton. En ce qui concerne le contenu, je vais m'inscrire aujourd'hui. C'est bon. J'espère que tout est correct. Nous verrons cela dans les prochaines conférences. Nous allons vérifier les résultats que nous avons ici. Services, toutes les icônes sont affichées. Nous devons maintenant passer à autre chose et styliser la première liste déroulante pour cela Passons à la prochaine conférence. 12. Fonctions de coiffure dans le premier menu déroulant: Très bien, dans la dernière conférence, nous avons créé le balisage HTML pour notre premier menu déroulant Je veux dire le menu déroulant du lien d'accueil. Il est maintenant temps de commencer à personnaliser le menu déroulant. Passons au fichier CSS et juste après navlink, insérons de nouveaux commentaires pour le menu déroulant Ce sera le premier menu déroulant dont nous aurons besoin ici. Un menu déroulant, puis un menu déroulant. Très bien, allons-y et sélectionnons une liste déroulante. Tout d'abord, je vais définir sa position en valeur absolue. Nous allons positionner cet élément en fonction de l'élément parent, qui n'est pas un élément. Je ne vais attribuer à aucun élément une position relative. Nous en avons besoin pour positionner les éléments enfants. Dans ce cas, déposez-en un en fonction de l'élément parent, qui n'est pas un élément. Très bien, définissons les propriétés top et let. La position la plus haute sera de 4,9 m. Quant à la position de gauche, je vais la porter à -24 m. Voyons le résultat Comme vous pouvez le constater, le menu déroulant est positionné. Maintenant, je vais définir la couleur de fond et elle sera blanche. Très bien, nous avons ici le menu déroulant. Nous devons maintenant définir le, avec la hauteur de l'élément. Je vais régler avec 96 RAM. Quant à la hauteur, elle sera de 60 Ram. Ensuite, je vais placer les fonctionnalités et les services côte à côte, horizontalement. Et pour cela, je vais utiliser Flex box, nous devons afficher Flex. Si nous vérifions le résultat, vous verrez que les fonctionnalités et les services, je veux dire les côtés gauche et droit du menu du haut vers le bas, sont placés côte à côte horizontalement. Bien, après cela, je vais arrondir légèrement le menu du haut vers le bas en utilisant le rayon de bordure. Je vais le régler sur un Ram. Je vais également créer un petit effet d'ombre en utilisant Po Shadow. Les valeurs seront 01 Ram, puis trois Ram comme couleur. Je vais utiliser la valeur RGBA. La couleur sera le noir avec une opacité plus faible, 0,2 comme vous pouvez le voir dans les coins du menu déroulant qui l'entoure Et nous avons également ici des effets d'ombre sympas et sympas. Ensuite, je vais créer un espace dans le menu déroulant pour cela. Utilisons du pudding Je vais le régler sur deux RAM. C'est bon, c'est ça. À propos du drop one, je parle de l'élément wrapper. Ensuite, je vais m'occuper des côtés gauche et droit. Je vais choisir d'en faire une liste déroulante vers la gauche et de définir sa largeur. Ce sera 30 %. De plus, je vais créer de l'espace sur le côté droit de l'élément à l'aide d' un rembourrage, n'est-ce pas ? La valeur sera de quatre m. Maintenant, dans la première partie dans laquelle je me trouve , le côté gauche a la largeur, et nous avons également un peu d' espace après le côté gauche. Ensuite, je vais dupliquer ce code et faire de même pour le côté droit. La largeur du côté droit sera de 70 %. Nous avons également besoin d'un rembourrage à gauche Et ce sera pour courir. Très bien, ensuite je vais m'occuper des titres des deux côtés Nous avons besoin des mêmes styles pour les deux rubriques. Je vais les sélectionner tous les deux. Il faut en descendre un à gauche, le H trois. Dupliquons le code et changeons la gauche en droite. Ajoutons ici des styles pour le titre. Tout d'abord, je vais changer de famille de téléphones. Ce sera Molly Cursive. Ensuite, je vais régler la taille du téléphone à 1,8 RAM. Il nous faut de la couleur. Ce sera la couleur 86987 Donc, comme vous pouvez le constater, les titres sont jolis. Ensuite, je vais créer de l'espace en bas à l'aide d'un rembourrage En bas, il y aura un Ram. Nous avons également besoin d'une marge. En bas, il y aura trois RAM et une bordure sera créée en bas. Nous avons besoin ici en bas, la largeur sera de 0,2 Ram. Ensuite, nous avons besoin du solide comme couleur que je vais utiliser ici, RGBA, 134-15-2167 et l'opacité sera de 0,5. J'ai utilisé Vérifions-le. Comme vous pouvez le voir, nous avons ici une jolie bordure cool en bas. Et en fait, les titres des côtés gauche et droit sont plutôt jolis C'est bon. Ensuite, allons-y et sélectionnons un élément de la liste des fonctionnalités. Cette partie comprend les deux éléments placés dans l'élément de la liste des fonctionnalités. Je vais sélectionner un élément de la liste des fonctionnalités, définissons la marge. Nous avons besoin de 1,5 image en haut et en bas et de zéro sur les côtés gauche et droit Ensuite, je vais placer les éléments horizontalement, côte à côte à l'aide de la boîte flexible. Nous avons également besoin d'un article. Il alignera les éléments au centre verticalement , puis changera le type du curseur, en fera un pointeur. OK, maintenant nous avons un peu d'espace entre les éléments et le curseur est également modifié. Ensuite, je vais personnaliser les icônes , puis les éléments span. Commençons par les icônes. Je vais sélectionner l' élément des fonctionnalités suivi des éléments. La taille de la police sera de deux RAM. Je vais régler la largeur sur quatre RAM, puis changer la couleur. La couleur sera le gris, que nous avons utilisé récemment. Vérifions-le. Comme vous pouvez le constater, les icônes sont plutôt jolies. Allons-y et personnalisons les éléments du ventilateur. Je vais sélectionner à nouveau l'élément de la liste des fonctionnalités suivi des éléments du ventilateur. Je vais augmenter la taille du téléphone, il y aura 1,8 RAM. Pour ce qui est de la couleur, je vais utiliser la même couleur. Je parle de la couleur grise. Comme vous pouvez le constater, les panelements sont plutôt jolis. La seule chose que nous devons faire dans cette conférence est créer un petit effet de survol Une fois que nous avons survolé l' icône ou l'élément span, ils devraient changer de couleur Allons-y et faisons-le. Je vais sélectionner Fonctionnalités, un élément de liste survolé. Nous avons également besoin de ses éléments. Nous devons sélectionner les éléments d'envergure. Une fois que nous avons survolé les éléments, nous devons changer de couleur La couleur sera de deux à deux. C'est de couleur gris foncé. Maintenant, si je survole le, vous voyez que la couleur est modifiée Mais nous avons besoin d'une transition harmonieuse. Ajoutons aux deux éléments la propriété de transition. Nous avons besoin de votre couleur. Et la durée sera de 0,3 seconde. Maintenant, si je passe le curseur sur les articles, ils changeront de couleur en douceur. Je trouve que ça a l'air plutôt sympa. Ensuite, nous devons prendre soin du côté droit. Et pour cela, je vais passer à la prochaine conférence. 13. Services de coiffure dans le premier menu déroulant: OK, dans la dernière conférence, nous avons stylisé le côté gauche du menu déroulant, je veux dire la liste des fonctionnalités Et maintenant, nous devons nous occuper de la deuxième partie de notre menu déroulant. Je veux dire, la partie services, le côté droit. Passons au code VS et sélectionnons Dropdown Services. Je vais définir la hauteur, ça va être 45 landau De plus, je vais aligner les éléments en utilisant à nouveau S Flax Book. Nous avons besoin de Display Flex. Nous devons changer de direction car nous devons aligner les éléments verticalement. Nous avons donc besoin que la direction de flexion soit une colonne. Très bien, maintenant je vais sélectionner à nouveau le service déroulant lui-même. Utilisons Flex Box. Nous avons besoin de Display Flex. Ensuite, nous devons créer un espace en bas de l' élément en utilisant la marge inférieure. Ce sera un 3,5 RAM. Ensuite, je vais changer le curseur et le faire pointer. Très bien, maintenant je vais aligner les éléments au centre verticalement. Je vais ajouter ici un centre de rubriques. Comme vous pouvez le constater, les icônes et les éléments textuels sont placés au centre Ensuite, je vais personnaliser les icônes. Allons-y et sélectionnons le service déroulant, puis l'élément. Je vais augmenter en hauteur. Je vais les régler tous les deux sur 5,5 RAM. Il en va de même pour la hauteur. Changeons ensuite l'arrière-plan. Changeons l'arrière-plan. Je vais utiliser la fonction de gradient linéaire. La direction de la transition de couleur va être deux, non ? En ce qui concerne les couleurs, la première couleur sera la B1501. Pour ce qui est de la deuxième couleur, je vais utiliser le 723 Ce sont les couleurs violettes. Le plus clair et le plus foncé peuvent voir la phonétique. Je veux dire que ces boîtes ont un gradient linéaire. Ensuite, je vais passer aux articles flexibles. Nous devons les placer sur deux colonnes. Je vais utiliser flex wrap pour la valeur p. Maintenant, les éléments sont placés dans deux colonnes. Nous avons ici de bien meilleurs résultats. Après cela, j'ajoute ici quelques styles supplémentaires. Nous devons arrondir les cases, et pour cela, utilisons un rayon de bordure d'une valeur de 50 %. Maintenant, les éléments sont arrondis et nous devons placer les icônes au centre de ces cercles. Pour cela, je vais utiliser X Book. Nous avons besoin d'exposer du lin, puis de justifier un centre de conférence et un centre de produits de gamme. Maintenant, comme vous pouvez le constater, les icônes sont parfaitement centrées. Ensuite, personnalisons les icônes. Nous devons augmenter la taille du téléphone. Ce sera 2,5 RAM. Ensuite, je vais changer de couleur. Faisons-le blanc. De plus, je vais régler Po Shadow à 0,5 m, soit deux RAM. En fait, nous avons besoin ici de m. En ce qui concerne la couleur, je vais utiliser la valeur RGBA, mais dans ce cas, nous devons utiliser la couleur violette La première valeur sera comprise entre un et six. Alors nous en aurons ici 35. Ensuite, la prochaine sera 218 pour l'opacité. Je vais dire 2.3 D'accord, les icônes sont plutôt jolies. Ensuite, j'ajoute un petit espace sur le côté droit de chaque icône. Ajoutons ici une marge. À droite et dirigez-vous vers la rampe. OK, après cela, je vais créer un petit effet de survol Une fois que nous avons survolé les services, nous devons augmenter la taille des icônes Je vais sélectionner le service déroulant avec le pointeur. Ensuite, nous avons besoin d'éléments. Pour augmenter la taille de l'élément, je vais utiliser la fonction d'échelle. Nous avons besoin de transformation, nous avons besoin de transformer l'échelle. Et je vais insérer ici 1.1 Maintenant, si je survole les icônes, elles augmenteront, je veux dire la taille de l'icône Faisons en sorte que cet effet soit plus fluide. Utilisez la transition. Nous avons besoin ici de nous transformer. Et la durée sera de 0,3 seconde. Nous avons maintenant de bien meilleurs résultats. La taille de l'icône augmente avec un effet lisse. Très bien, je vais maintenant m' occuper du service déroulant. Je parle de ces éléments textuels, nous avons ici deux éléments différents et nous devons les placer verticalement. Allons-y et sélectionnons l'élément de service dans le menu déroulant. Utilisez Flex box. Nous avons besoin de lin pour étalage. Ensuite, nous devons changer de direction. Ce sera une chronique. Maintenant que vous pouvez voir les éléments textuels, les éléments de span sont placés verticalement Comme vous pouvez le voir maintenant, toutes les icônes ont la même couleur de fond. Si nous examinons le projet terminé, vous verrez que chaque élément a une couleur de fond différente. Nous devons nous occuper de cela. Je vais sélectionner le premier service déroulant dont nous avons besoin ici, le sélecteur d'enfants Et nous devons préciser ici le numéro un. Ensuite, nous avons besoin d'éléments. Corrigeons également l'arrière-plan, nous devons récupérer l' ombre de la boîte à partir d'ici Maintenant, comme vous pouvez le voir sur le premier phomicon, la couleur de fond est violette En fait, je vais dupliquer ce code six fois car au total, nous avons sept icônes. Nous avons ici sept éléments. Modifions les sélecteurs du graphique. Nous devons entendre les chiffres 1 à 7 Maintenant, nous devons changer les couleurs de fond La deuxième icône sera celle des couleurs de fond. 31 DCA. Un. Pour ce qui est de la deuxième couleur, je vais créer le 23683 et également changer l'ombre de la boîte dont nous avons besoin ici 35214131. Vérifie le navigateur. Comme vous pouvez le voir, le deuxième phonique a maintenant une couleur verte Je parle de la couleur de fond. Passons au troisième point. Nous avons besoin ici de couleurs, 351, EC. Pour le deuxième appelant, ce sera 22 DCF Changez également l' ombre de la boîte dont nous avons besoin ici, 45, puis encore une fois, 45207 La troisième phonémique est prête. Passons à autre chose et occupons-nous du quatrième point. La couleur sera 0030. C'est le deuxième dont nous avons besoin ici, 03. 48. Ensuite, je vais changer l' ombre de la boîte dont nous avons besoin ici. 3180216. Vérifie le navigateur. Le quatrième téléphone, Atomican, est personnalisé. Passons à la cinquième. Nous avons besoin ici du F9625. Quant au deuxième appelant, ce sera le FA 751 Et puis changez l'ombre de la boîte dont nous avons besoin ici, 250, puis 11728 Nous avons ici la couleur de fond orange. Passons au micro du téléphone suivant, qui est le sixième ici. Trois à 93 pieds. Ensuite, la deuxième couleur sera 2371f, tandis que l'ombre sera 35, puis Nous avons ici la sixième icône, et maintenant nous devons nous occuper de la dernière icône des polices. La première couleur sera 28235. Pour ce qui est de la deuxième couleur, nous avons besoin ici, 202, 52c, d'une ombre en forme de boîte Insérons ici 32, puis 3744. OK, donc toutes les omiques téléphoniques sont prêtes. Ils sont plutôt jolis. Et maintenant, nous devons nous occuper des éléments de travée. Je veux dire, ces éléments textuels. Tout d'abord, je vais m' occuper du premier élément de span. Sélectionnons l'élément de service dans le menu déroulant, puis nous devons sélectionner l'enfant. Nous avons besoin du premier élément d'envergure. Changeons la famille de téléphones. Ce sera Molly Cursive. Ensuite, je vais définir la police. Trop d'audace. La couleur sera 150f1. Ensuite, je vais régler l'espacement des lettres à 0,1 m. Transformons le texte en majuscules Nous avons besoin ici de transformer le texte et non de le rendre, la valeur sera en majuscules. Comme vous pouvez le constater, les styles sont appliqués au premier élément du volet. heure actuelle, ils ont la même couleur, il faut changer cela. Et nous devons également augmenter la taille des éléments du moule. Sélectionnons ici, déroulons l'élément de service, suivons le panneau Réglez la taille du téléphone sur 1,6 RAM. La police des deux éléments de rotation est maintenant augmentée. En ce qui concerne les couleurs, je vais sélectionner le premier service. Ensuite, nous devons faire défiler l'élément de service suivi des éléments de rotation. Encore une fois, nous avons besoin d'ici et d'un sélecteur de chi. Nous avons besoin du premier élément de rotation. Reprenons la couleur d'ici et insérons-la ci-dessous. Désormais, seul le premier élément d'envergure est de couleur violette. Ensuite, nous devons faire de même pour le reste des éléments. Je vais dupliquer ce code six fois. Changeons les sélecteurs. Nous avons besoin de chiffres de un à sept, comme nous l'avons fait pour les micros phono, la deuxième couleur Ça va être 31c1. C'est une couleur verte. Ensuite, le troisième clou sera 3f51c. Changeons toutes les couleurs, puis vérifions le navigateur. Ensuite, nous avons besoin de 0030. Ensuite, le cinquième élément sera le f9625. Ensuite, nous avons besoin de 3293 FF. En ce qui concerne les derniers éléments de span dont nous avons besoin ici, 28 à 35. Très bien, vérifions le navigateur. Comme vous pouvez le constater, tous les éléments de span ont les bons appels. Nous devons maintenant personnaliser les éléments de la deuxième travée. Pour cela, sélectionnons le menu déroulant Service Item Span, et nous avons besoin d'un sélecteur de chat avec le numéro deux Je vais régler le téléphone à 300 et aussi changer de couleur. Utilisons ici 66, nous avons besoin du signe de la livre, puis du 6672 C'est une couleur grise. Comme vous pouvez le constater, les couleurs sont modifiées pour les éléments de la deuxième plage. Enfin, nous devons personnaliser le bouton. Allons-y et sélectionnons un bouton déroulant avec le bouton droit de la souris. Tout d'abord, définissons la largeur. Il sera de 100 % et la hauteur sera de quatre béliers. Et changez également la couleur de fond. Utilisons ici la couleur 3776. Ici, nous avons le fond. Nous devons nous débarrasser de la bordure pliante. Réglons-le sur neuf et arrondissons également les coins en utilisant le rayon de bordure. Il y aura deux Ram. Maintenant, le bas est beaucoup plus beau. Occupons-nous de la police. Je vais régler la taille de police sur un point du forum. Ensuite, le poids de la police sera en gras. Comme je vais transformer le texte en majuscules, changer les couleurs, la couleur sera le blanc Ensuite, j'ajoute un espace entre les lettres. Et enfin, changez le curseur, faites-le pointer. Très bien, la deuxième partie du menu déroulant est donc préparée et stylisée Ça a l'air plutôt sympa. Nous devons maintenant faire fonctionner le menu déroulant. Je veux dire, nous devons le masquer par défaut, puis l'afficher une fois que nous avons survolé le noveling, je veux dire, la première maison de noveling, nous devons également créer ce C'est pour ça. Passons à la prochaine conférence. 14. Faire fonctionner le menu déroulant: Très bien, dans la dernière conférence, nous avons fini de styliser le menu déroulant. Maintenant, nous devons faire en sorte que cela fonctionne. Par défaut, le menu déroulant doit être masqué, et une fois que nous avons survolé l'élément de navigation, il devrait apparaître avec une transition fluide Jetons un coup d'œil au projet terminé. Comme vous pouvez le constater, le menu déroulant est masqué par défaut. Une fois que j'ai survolé l'élément de navigation, il apparaît Vous pouvez également voir ici ce triangle que nous devons créer dans cette conférence. Allons-y et revenons au code VS. Tout d'abord, je vais créer le triangle que je vais utiliser après le pseudo élément. Le triangle fera partie de l'élément de navigation, avons donc besoin ici d' aucun élément suivi du sélecteur enfant Nous avons besoin du premier élément de navigation. Et puis je vais utiliser après le pseudo élément, le contenu va être vide. Ensuite, je vais définir le poste. Ça va être absolu. Je vais positionner l'élément en fonction de l'élément parent. Dans ce cas, l' élément parent n'est pas un élément. Mais à l'heure actuelle, comme vous pouvez le voir, il a déjà la position relative. Ensuite, je vais définir les propriétés en haut et à gauche. Les deux positions seront de 2,9 RAM. Quant à la position de gauche, je vais la porter à 50 %. Le triangle doit être placé au centre de l'élément de navigation. Pour centrer l'élément, je vais utiliser la fonction transform translate x avec la valeur -50%. Le triangle sera créé avec une petite astuce en utilisant des bordures Je vais utiliser la bordure gauche avec les valeurs unies et la couleur sera transparente. Ensuite, je vais dupliquer ce code deux fois. Passons de la gauche à la bordure droite, les valeurs seront les mêmes. Ensuite, nous avons besoin d'une bordure inférieure. Au lieu de transparent, je vais utiliser le blanc. Comme vous pouvez le voir, le triangle est créé et il est placé au centre du feu de navigation. Je vais maintenant masquer cet élément ainsi que le menu déroulant. Pour masquer l'élément, je vais utiliser l'opacité zéro et la visibilité masquée Nous avons également besoin de la même chose pour le menu déroulant. Maintenant, comme vous pouvez le constater, les deux éléments sont masqués. Maintenant, nous devons faire appel d'eux. Une fois que nous avons survolé l'élément no I ici, aucun élément avec survol suivi du F pour voir les éléments, nous avons besoin de ces deux propriétés pour afficher l' Nous avons besoin d'une opacité unique et d'une visibilité visible. De plus, je vais également ajouter ici le menu déroulant. Mettons ici une opacité et une visibilité possibles. Maintenant, si je passe le curseur sur le point « aucun élément » sur le triangle, c'est « oui », nous devons en faire une liste déroulante Les deux éléments s'affichent maintenant. La seule chose que je dois faire est de rendre cette apparence un peu plus lisse. Et pour cela, je vais utiliser la transition. Les valeurs seront toutes de 0,3 seconde. Maintenant, si je passe le curseur sur le bouton, nous obtiendrons cette apparence agréable, cool et plus fluide du menu déroulant et du triangle D'accord, c'est tout à propos du premier menu déroulant. Maintenant, nous devons nous occuper de la seconde. Et pour cela, passons à la prochaine conférence. 15. Créer le balisage HTML pour le deuxième déroulant: D'accord, lors de la dernière conférence, nous avons fini de travailler sur le premier menu déroulant, qui fonctionne bien et qui a l'air plutôt sympa et cool. Il est maintenant temps de passer au deuxième menu déroulant. Allons-y et jetons un coup d'œil au projet terminé. Si nous survolons le deuxième élément , à savoir les clients, le deuxième menu déroulant apparaîtra Comme vous pouvez le constater, il se compose de quatre parties différentes. Chacun d'eux a une couleur de fond agréable et cool avec des effets de dégradé linéaires. De plus, chaque partie est composée d'un P. Ensuite, nous avons ici le titre et du texte. OK, c'est tout à propos du deuxième menu déroulant. Comme d'habitude, nous allons créer le balisage HTM, puis nous nous occuperons du style Nous devons trouver le deuxième élément de navigation , à savoir les clients. Juste après les éléments du lien, je vais insérer des commentaires pour le deuxième menu déroulant. Ensuite, je vais ouvrir des développements avec des classes. Liste déroulante également, nous avons besoin de la liste déroulante deux. Ensuite, je vais passer à Open Development qui aura un élément client de nom de classe. Comme je l'ai dit, chaque article sera composé d'un asomicon téléphonique. Ensuite, nous aurons le titre et le paragraphe. Ouvrons les éléments I, qui auront pour classes une enveloppe normale, puis une enveloppe A. Après cela, nous avons besoin ici de H, de trois éléments d'en-tête. Le texte sera destiné aux agences de conception Web. De plus, nous avons besoin d'un paragraphe avec un peu de salaud pour mettre ici une dame, je vais taper du terreau Ensuite, il faut préciser ici le nombre de mots. Dans ce cas, je vais insérer vos 15 mots factices. Maintenant, je vais appuyer sur Entrée. Comme vous pouvez le constater, nous avons ici un texte factice de 15 mots Très bien, passons au premier point. Comme vous le savez, nous aurons quatre articles au total. Je vais reproduire ce développement trois fois. Ensuite, il faut changer ici les icônes et aussi les titres. Le deuxième élément, je veux dire que la deuxième icône sera un solide. Ensuite, nous avons besoin de FA Earth America. En ce qui concerne le titre, je vais insérer ici, les propriétaires de boutiques en ligne. Ensuite, nous devons changer le troisième élément. En fait, il y a une petite erreur ici, d'habitude. Changeons les classes de la troisième icône. Ce sera FA Brands, puis A sketch. En ce qui concerne l'élément d'en-tête, je vais instituer le design web, les free lanceurs. Nous devons maintenant nous occuper du dernier point. Nous devons changer les classes de l' icône, nous avons besoin de FA solid FA store. En ce qui concerne l'élément d'en-tête, je vais insérer les propriétaires de votre petite entreprise. Très bien, donc je pense que cela concerne le balisage H tel. Jetons un coup d'œil. Comme vous pouvez le voir, nous avons ici le deuxième menu déroulant. Je veux dire, le balisage H Tl. Il est maintenant temps de styliser ces éléments. Et pour cela, passons à la prochaine conférence. 16. Mettre en forme le deuxième menu déroulant: Très bien, dans la leçon précédente, nous avons créé le balisage HTML pour notre deuxième menu déroulant. Et maintenant, il est temps de le styliser et de le faire fonctionner. Revenons au code VS et je vais utiliser New Commons pour le deuxième menu déroulant dont nous avons besoin ici. Liste déroulante deux, puis fin de la liste déroulante deux. Comme vous le savez, nous aurons cinq menus déroulants différents et tous auront les mêmes styles. Au lieu d'écrire les mêmes styles encore et encore, je vais tous les sélectionner en utilisant un nom de classe commun, que nous avons attribué aux listes déroulantes. Ce nom de classe ici, dans le menu déroulant. Je vais tous les sélectionner. Retrouvez certains de ces styles ici dans les styles courants. Eh bien, ces deux lignes de code, je place, en position absolue et en première position. Nous aurons également ici la couleur de fond. Ensuite, ces trois lignes de code, le rayon de bordure, la navette entre boîtes et le rembourrage Je vais également récupérer ces styles et les ajouter ici également. Ensuite, je vais changer la liste déroulante au lieu de la liste déroulante, celle dont nous avons besoin ici, la liste déroulante. En fait, je vais récupérer ce code et le coller ici. En plus de cela, je vais supprimer la sélection par enfant à partir d'ici car nous avons besoin d'un triangle pour chaque élément de navigation. En fait, je pense que tout est prêt. Allons dans le navigateur et vérifions si tout fonctionne bien. Comme vous pouvez le constater, certains de ces styles sont appliqués au menu déroulant, le second est déjà présent. Passons au code VS, sélectionnons la deuxième liste déroulante et ajoutons-y également des styles. Nous devons ici définir la largeur comme 90 Ram. Ensuite, nous avons besoin de hauteur, ce sera 37 béliers Je vais définir la position de gauche, elle sera de -27 RAM Ensuite, nous devons utiliser des livres flexibles. Réglons l'affichage pour qu'il soit flexible et vérifions les résultats. Comme vous pouvez le constater, nous avons maintenant de bien meilleurs résultats. Les objets sont bien placés horizontalement dans une rangée. Il faut maintenant les sélectionner. Personnalisez. Sélectionnons l' article du client que je vais régler à 100 %. Ensuite, nous avons besoin que la marge soit nulle. Et puis 0,5 RAM. Nous avons besoin ici de 0,5 RAM. Je vais également définir le rembourrage, réglons-le sur 0,7 RAM Nous avons maintenant un peu d'espace entre les objets. Ensuite, je suis à nouveau Flex Books, afin d'aligner les éléments à l'intérieur de l'article du client. Réglons l'affichage pour qu'il soit flexible. Ensuite, nous devons changer de direction car nous devons aligner les éléments verticalement. Et pour cela, nous devons définir le sens de flexion de la colonne. Je vais également utiliser le centre Align Items. D'accord ? Comme vous pouvez le constater, les éléments contenus dans les articles sont placés au centre à l'aide de livres flexibles. Réglons le curseur sur le pointeur. OK, la prochaine chose que je vais faire est de changer la couleur de fond pour chaque élément client. Comme vous vous en souvenez, chaque élément a une couleur de fond différente avec un dégradé linéaire. Allons-y donc et faisons-le pour chaque article. Je vais sélectionner le premier à l'aide du sélecteur d'enfant. Je vais préciser ici le numéro un. En ce qui concerne l'arrière-plan, comme je l'ai dit, nous devons utiliser un dégradé linéaire. La première chose que nous devons faire ici est de définir la direction. Je vais le régler à 135 degrés. Ensuite, je vais définir la première couleur, qui sera un sept. Quant à la deuxième couleur, ce sera un sept. Nous allons vérifier les résultats. Comme vous pouvez le constater, le premier élément a une couleur de fond. Je vais arrondir les coins de l'article. Pour cela, utilisons ici le rayon de bordure avec la valeur une rampe. Nous avons maintenant un beau rayon de bordure ici. Changeons également la couleur du reste des éléments. Je vais dupliquer ce code trois fois, puis je vais changer les chiffres. Nous avons besoin de chiffres de un à quatre. Pour ce qui est des couleurs, je vais les changer. La première couleur du deuxième article sera F 2f6ff Quant au second, il coûtera neuf dollars canadiens F. Voyons le deuxième article que nous avons ici en bleu ciel. Ensuite, nous devons changer les couleurs du troisième élément. La première couleur sera F1fd, F sept. Quant à la deuxième couleur, faisons-la F, F , F. C'est la couleur verte. Maintenant, nous devons changer les couleurs du dernier article, nous allons insérer ici FFF four ED. Pour la deuxième couleur, ajoutons ici 87c5. Très bien, les quatre éléments ont donc couleur de fond agréable et cool avec un effet de dégradé linéaire. Nous devons maintenant prendre soin des éléments qui se trouvent à l'intérieur des objets. Allons-y et commençons par les atomes du téléphone. Tout d'abord, je vais augmenter la taille des objets. Sélectionnons ici les éléments et réglons la taille du téléphone à dix RAM. Comme vous pouvez le constater, la taille des icônes est plus grande. Nous devons maintenant changer les couleurs de chaque article séparément. Nous devons sélectionner le premier élément suivi de l'icône du téléphone. Réglons la couleur sur AC 63 A. Si l'on considère que la première icône du téléphone a changé de couleur, faisons de même pour les autres icônes. Je vais dupliquer ce code trois fois, modifier les numéros du sélecteur de graphique et également changer les couleurs La deuxième couleur sera 15f3. Ensuite, nous aurons ici un F C F 77. Quant à la dernière icône que je vais utiliser ici, couleur FF 8645 Comme vous pouvez le constater, les icônes sont plutôt jolies, elles ont des couleurs différentes. Maintenant, nous devons nous occuper des titres, alors allons-y et sélectionnons les titres Nous avons besoin de l'article de votre client suivi des trois éléments d' en-tête H. Je vais augmenter la taille du téléphone. Ça va faire 2,5 fram. Ensuite, nous aurons ici le poids du téléphone. Je vais le mettre à 300. Ensuite, nous devons transformer le texte en majuscules. Je vais également définir une ligne au centre. La prochaine chose que je vais faire est de changer la hauteur de la ligne. Réglons-le sur 3,5 RAM. Et créez également de l'espace en bas de la marge avec la valeur 0,7 Ram. Maintenant, les titres sont bien meilleurs. En tant qu'invité, nous devons changer les couleurs des titres, et les couleurs doivent correspondre aux couleurs des icônes Je vais le faire d'une manière simple. Je vais ajouter ici un sélecteur pour le titre, nous avons besoin de l'article de votre client Ensuite, nous avons besoin d'un sélecteur de graphique. Nous devons en spécifier un ici. Il faut ajouter ici H trois éléments de titre. Copions le sélecteur et ajoutons-le pour le reste des éléments Je vais modifier les numéros du sélecteur de graphiques. Nous avons besoin ici de chiffres de un à quatre. Passons au navigateur. Comme vous pouvez le constater, les titres ont les bonnes couleurs et ils sont plutôt jolis La seule chose que je dois faire est de personnaliser le graphique de puissance. Allons-y et sélectionnons l'article du client, puis les éléments. Réglons la taille de police à 1,6 RAM. Le poids de la police sera alors de 300. Et je vais aussi centrer le centre de la ligne de texte en utilisant le centre. Maintenant, tout semble plutôt beau en fait. Avec le deuxième menu déroulant, c'est terminé. Il est maintenant temps de passer à autre chose et de passer au troisième menu déroulant. 17. Créer le balisage HTML pour le troisième menu déroulant: Très bien, dans la conférence précédente, nous avons fini de styliser le deuxième menu déroulant. Je veux dire, le menu déroulant du client. Il est maintenant temps de passer à autre chose et de créer le troisième menu déroulant. Jetons un coup d'œil au projet terminé. Si nous survolons l'article du produit, nous verrons ici le troisième menu déroulant, qui, à mon avis, est plutôt joli Nous avons ici quelques icônes différentes ainsi que quelques détails sur les produits. Et en bas, tu peux t'asseoir. La première chose à faire est de créer le balisage HTML, nous devons trouver le troisième élément de navigation qui est les produits et après l' élément de lien, je veux dire la balise de lien de fermeture, nous devons insérer de nouveaux commentaires pour les trois éléments de la liste déroulante Ensuite, je vais ouvrir le tag avec le menu déroulant des classes et le menu déroulant trois. Ensuite, je vais ouvrir une autre balise DIP, qui sera consacrée aux produits. Ce sera l' enveloppe du contenu. Ensuite, je vais insérer ici le produit lui-même. Cet élément comprendra le phonosomique et deux éléments span Si nous jetons un coup d'œil au menu déroulant, vous verrez ici le phonosomique ainsi que les deux éléments ainsi Insérons ici des éléments I avec les classes solid, une clé à molette dont nous avons besoin ici Ensuite, je vais ouvrir T. Je vais insérer ici deux éléments de span. Le premier sera Theme and Page Builder. Ensuite, nous avons besoin du deuxième élément span dans lequel je vais insérer le texte suivant, le thème numéro un et le constructeur visuel de pages. Passons à l'ensemble des produits, nous aurons cinq produits, donc je vais dupliquer cet article quatre fois. Ensuite, nous devons apporter ici de légères modifications. Je vais modifier les phonosomicons ainsi que le contenu de l'élément span Le deuxième phonosomicon sera un fichier solide, puis le premier élément de span sera le plugin Page Builder En ce qui concerne le deuxième élément d'envergure, je vais passer aux thèmes et aux mises en page in situ Ensuite, le troisième phonosomicon sera un livre ouvert en phase solide En ce qui concerne les éléments panoramiques, je vais insérer le thème de votre magazine supplémentaire. En ce qui concerne le second sanelement, insérons alors le meilleur thème pour Blogger À 16 h 00, ce sera une enveloppe solide, tout comme les panneaux Le premier sera celui des Mal Bloom opt-in par e-mail de Mal Bloom . En ce qui concerne le second, Panelment sera le plugin ultime d'option de courrier électronique Pour le dernier produit, le téléphone sera solide. En ce qui concerne les panels que je suis, insérez votre partage social En ce qui concerne les deuxièmes téléphones, Micon va promouvoir le partage social Très bien, et la dernière chose que j' ai à faire est de créer le bouton que nous devons insérer ci-dessous. Ouvrons le bouton. Le type sera un bouton. En ce qui concerne le contenu, je vais me connecter pour télécharger Ok. Cela se trouve à peu près dans le troisième menu déroulant. Je veux dire le balisage H t. Nous allons vérifier les résultats. Si je survole l'article du produit, vous verrez ici le menu déroulant. Il possède déjà quelques styles, car nous avons défini certains styles courants dans la dernière conférence pour les listes déroulantes Par conséquent, il a déjà quelques styles. Maintenant, nous devons faire en sorte que cela ressemble à la version finale Passons à la prochaine conférence. 18. Mettre en forme le troisième menu déroulant: Dans la dernière conférence, nous avons créé le balisage HTML pour le troisième menu déroulant. Comme vous pouvez le constater, la liste déroulante comporte déjà des styles car nous avons déjà défini des styles communs pour chaque liste déroulante. Nous devons maintenant continuer et terminer le style du troisième menu déroulant. Passons au code VS et insérons nouveaux commentaires pour les trois listes déroulantes. Allons-y et sélectionnons le menu déroulant trois. Je vais définir la largeur et la hauteur. La largeur sera de 40. Pour ce qui est de la hauteur, je vais la régler 47 run next, je définis la position gauche, elle sera de 50 %. De plus, nous devons censurer l'élément en utilisant transform translate x -50 %. L'élément est parfaitement positionné au centre Enfin, j'ajoute qu'en fait, le menu déroulant est rembourré, mais je vais remplacer le style par défaut Utilisons le rembourrage dès maintenant. Par défaut, chaque liste déroulante possède un pad deux. Et je vais changer le rembourrage sur le dessus pour en faire un Ram Pour le reste des côtés, je vais en laisser deux. Très bien, après cela, je vais personnaliser les produits. Comme je l'ai dit, cet élément sera similaire aux services de la première liste déroulante, le téléphone, Atomics, et ces éléments de durée seront également similaires Si je regarde la version finale, vous verrez qu'elles sont assez similaires. Je vais utiliser ces vignettes dans le premier menu déroulant. Faisons défiler la page vers le haut et trouvons les services de la liste déroulante. Nous les avons ici. Je vais ajouter ici des produits. Voyons ce que nous avons en ce moment. Comme vous pouvez le constater, les icônes et les panneaux sont placés horizontalement dans une rangée Allons-y et ajoutons ici les produits I. Maintenant, les phonosomicons ne sont pas visibles car nous devons définir leurs Pour cela, en fait, débarrassons-nous de ces espaces à partir d'ici. Je vais ajouter ici les produits Child One. Ensuite, si on vérifie le résultat, vous verrez que le premier phonosomicon a sa couleur de fond et qu'il est plutôt joli Nous devons faire de même pour le reste des icônes. Je vais copier ce sélecteur et le modifier ici. Changeons le sélecteur d'ancrage. Nous en avons besoin ici deux, puis faisons de même pour le troisième élément, également pour le quatrième, et nous avons également besoin de la même chose pour la cinquième icône. Au total, nous aurons cinq produits. Voyons, comme vous pouvez le voir sur le téléphone, icônes géniales sont plutôt jolies. Nous avons également besoin du même effet de survol ici. Je veux dire, avec cet effet de survol, ajoutons également le sélecteur de produits ici Nous avons besoin du survol, puis des éléments. Nous avons maintenant le même effet de survol. Bien, la prochaine chose que je dois faire est de m'occuper des éléments de la colonne vertébrale. Je vais ajouter ici produit qui enveloppe les éléments de la travée Ces spinelements sont maintenant alignés verticalement. La prochaine chose que je vais faire est d'ajouter ici le produit , puis l'élément span. Cela modifiera la taille des éléments de portée du téléphone. Comme vous pouvez le constater, la taille du téléphone est modifiée. Nous devons maintenant personnaliser chaque élément de span. Je vais commencer par le premier. Ajoutons ici les produits, puis l'élément span. Avec Chart Selector, nous avons besoin du premier élément de span. Si je coche, vous direz que le premier élément de span est personnalisé. Nous devons maintenant changer les couleurs du premier élément du ventilateur. Nous avons besoin des couleurs appropriées. Nous l'avons dans le premier menu déroulant. Je vais accéder à un nouveau sélecteur de produits. Nous avons besoin du produit Child One. Ensuite, nous avons besoin du développement suivi des éléments de portée, toujours avec le sélecteur d'enfants Maintenant, nous devons en adhérer un. Allons-y et vérifions-le. Comme vous pouvez le constater, le premier élément panoramique a une couleur différente. La même couleur que celle que nous avons pour l'icône. Faisons de même pour le reste des éléments d'envergure. Je vais copier ce sélecteur ici. Nous devons modifier le numéro du produit. Ça va être le deuxième. Faisons de même pour le troisième produit. Ensuite, nous avons le produit numéro quatre, puis nous avons besoin de la même chose pour le produit numéro cinq. Comme vous pouvez le constater, tous les éléments d'envergure, les premiers éléments de travée ont changé de couleur et ils sont plutôt jolis. Nous devons maintenant nous occuper des éléments de la deuxième travée. Je vais ajouter ici le sélecteur pour les produits dont nous avons besoin ici, le sélecteur span with child, nous avons besoin ici du deuxième Comme vous pouvez le constater, le deuxième phénomène est plutôt sympa. Bien, la prochaine chose que je vais faire est de définir l'espace entre les produits. Je vais revenir à la troisième liste déroulante. Sélectionnons les produits et définissons la marge. Nous avons besoin d'une marge en haut et en bas, 1,7 RAM. Pour ce qui est du côté gauche et du côté droit, ce sera zéro. Maintenant, nous devons prendre soin du fond. Allons-y et stylons-le. Sélectionnez le menu déroulant trois, puis le bas. Je vais définir la largeur, elle sera de 100 %, puis la hauteur sera de quatre m. Changeons la couleur de fond. Ce sera la couleur violette dont nous avons besoin ici, 9544c. Ensuite, je vais me débarrasser de la bordure de faille. Je vais aussi arrondir le bouton en utilisant le rayon de bordure, il y aura deux RAM. Ensuite, je m' occuperai du téléphone. Changeons la taille du téléphone. Ça va être 1.4, puis je vais faire tourner le téléphone. Transformons le texte en majuscules et changeons la couleur. Il faut que la couleur soit blanche. Le bouton est plutôt joli. Ensuite, je vais augmenter l'espace entre les lettres. Passons à 0.1 Changez également le pointeur du curseur. Enfin, je vais placer le bouton légèrement vers le bas. Faisons-le en utilisant Transform. Traduisez y avec la valeur un r. D'accord, c'est tout. Le troisième menu déroulant est plutôt sympa. Maintenant, nous devons passer à autre chose et nous occuper de la suivante. 19. Créer le balisage HTML pour le quatrième menu déroulant: Très bien, dans la conférence précédente, nous avons fini de styliser le troisième menu déroulant , que je trouve plutôt sympa. Et maintenant, nous devons passer à autre chose et commencer à créer le menu déroulant suivant. Je veux dire le menu déroulant pour le lien de contact. Jetons un coup d'œil au projet terminé. Nous avons ici le quatrième menu déroulant. Il se compose de phonons et de quelques liens. Et nous avons également le bouton ci-dessous. OK, allons-y et commençons à créer le balisage HTM. Nous devons trouver le quatrième article , c'est-à-dire le contact. Et je vais insérer ici les commentaires de la quatrième liste déroulante. Ensuite, je vais ouvrir Deep Tag, qui aura deux classes différentes. Le premier sera le menu déroulant des noms de classes communs. Quant au second, il s'agira d' un nom de classe individuel dans la liste déroulante quatre. Ensuite, nous devons ouvrir un autre élément profond et ce sera les options de contact. Ensuite, je vais insérer un autre tag. Il sera composé d'éléments de pH et de span. Je vais ouvrir une enveloppe A solide pour les cours. Ensuite, je vais participer au panel d' instituer, qui abordera l'ensemble du sujet Nous allons avoir six développements différents. Dupliquons-le cinq fois, puis changeons de pontons et de panelements La deuxième icône sera un bien commun solide. En ce qui concerne l'élément span, je vais m'immiscer dans le chat avec les ventes. Ensuite, le prochain phonosomicon sera un solide, un utilisateur que je suis, un utilisateur que je suis comptes et des pilules Alors le phonosomicon suivant sera un solide. Une clé à molette. En ce qui concerne les éléments de portée, je suis le support technique d'interférence, alors nous aurons ici un groupe de personnes solide. Je vais également modifier le contenu de ce panneau. Ce sera en tant que communauté. Enfin, nous devons modifier le dernier élément. Le téléphone sera une ligne de fichier solide. En ce qui concerne les panels, je vais les aborder dans la documentation OK, la dernière chose à faire est de créer le fond. Insérons ici une balise de bouton avec un bouton de saisie. En ce qui concerne le contenu du bouton, je vais le partager avec nous. OK, c'est à propos du balisage H tl du quatrième menu déroulant. Comme vous pouvez le voir, nous avons ici le balisage H Tl, qui possède déjà certains styles car nous avons défini des styles courants pour les listes déroulantes Par conséquent, ces styles sont également appliqués à la quatrième liste déroulante Nous devons continuer à styliser le menu déroulant. Et pour cela, passons à la prochaine conférence. 20. Mettre en forme le quatrième menu déroulant: Dans la conférence précédente, nous avons préparé le balisage HTML de notre quatrième menu déroulant. Et maintenant, nous devons le styliser. Passons au code VS et insérons de nouveaux commentaires. Quatre. Quatre dans le menu déroulant, puis je vais sélectionner le menu déroulant avec son nom de classe individuel. Dans la quatrième liste déroulante, nous devons définir avec la hauteur. La largeur sera de 28 RAM. Pour ce qui est de la hauteur, je vais régler 233 Ram. Comme vous pouvez le constater, la taille du menu déroulant est plus grande. Ensuite, je vais changer de position. Je veux le placer au centre. Pour cela, nous devons définir la position gauche et la faire passer à 50 %. Ensuite, pour centrer parfaitement l'élément, nous devons utiliser transform, translate x pour la valeur -50 %. Maintenant, comme vous pouvez le voir, le menu déroulant est parfaitement centré Enfin, je vais définir le rembourrage. Réglons le rembourrage sur un Ram sur le dessus, puis sur Ram sur le reste des sites Nous devons appliquer trois fois le rembourrage sur l'élément D'accord, je vais maintenant personnaliser le développement. Je parle d'un développement qui inclut le phonémicon et cet élément panoramique Allons-y et sélectionnons les options de contact. Ensuite, je vais définir une marge de profondeur , qui sera de 1,4 m en haut et en bas et de zéro sur les côtés gauche et droit. De plus, je vais passer au pointeur. Comme vous pouvez le constater, la marge est appliquée. Il y a un certain espace entre les développements. Ensuite, je vais retirer le phontosomicon. Allons-y et sélectionnons les options de contact, puis l'élément. Je vais définir une largeur de 24 m. La taille de police du phontosomicon sera alors de Et nous devons également changer de couleur. Je vais utiliser la couleur 3293. Nous allons vérifier le résultat. Comme vous pouvez le constater, les osomicons du téléphone sont plutôt jolis. Ensuite, nous devons personnaliser les éléments de la travée. Je vais sélectionner les options de contact, puis l'élément span. La première chose que je vais faire est de changer la taille du téléphone. Ce sera 1,6 RAM. Ensuite, je vais transformer le texte en majuscules. Changez également la couleur. Je vais utiliser la même couleur que celle que nous avons utilisée pour le phonesomicon Créez également un espace entre les lettres en utilisant l' espacement des lettres avec la valeur 0,1 Ram Passons au navigateur. Comme vous pouvez le constater, les éléments du volet sont plutôt jolis. Et la seule chose à faire est de styliser le bouton, qui est placé en bas. Allons-y et sélectionnons le menu déroulant quatre en bas. Tout d'abord, je vais définir avec en hauteur. La largeur sera de 100 %. Quant à la hauteur, je vais la régler pour qu'elle soit de forme. Nous devons également changer la couleur de fond. Utilisons ici la couleur 2371. Ici, nous avons le bouton suivant pour y accéder depuis la commande par défaut. De plus, je vais arrondir le bouton. Allons-y et définissons la bordure sur non. En ce qui concerne le rayon frontalier, je vais le faire fonctionner maintenant. Notre bouton est bien plus joli. Ensuite, nous devons prendre soin de la police. Tout d'abord, définissons la taille de police. Ce sera 1,4 RAM. Ensuite, je vais rendre le téléphone plus audacieux en utilisant le poids de police en gras Transformez également le texte au cas par cas et changez la couleur. La couleur sera le blanc. La police est plutôt jolie. La seule chose que je dois faire est de créer un espace entre les lettres en utilisant le rythme des lettres, 0,1 RAM Et aussi, je vais créer à nouveau le pointeur du curseur. C'est ça. Le quatrième menu déroulant est plutôt sympa. Nous avons fini de travailler dessus. Ensuite, nous devons nous occuper du menu déroulant suivant, qui sera le cinquième menu déroulant et le dernier. Passons à la prochaine conférence. 21. Créer un balisage HTML pour le cinquième déroulant: Très bien, dans la conférence précédente, nous avons fini de travailler sur notre quatrième menu déroulant. J'ai créé le menu déroulant du lien de contact. Je trouve que ça a l'air plutôt sympa. Et maintenant, nous devons passer à autre chose et nous occuper du dernier menu déroulant, qui sera destiné au lien du compte Allons-y et jetons un coup d'œil au projet terminé. Nous avons ici notre dernier menu déroulant. Comme vous pouvez le constater, il se compose de plusieurs éléments différents. Nous avons deux entrées différentes pour le nom d'utilisateur et le mot de passe. Ensuite, vous pouvez voir ici la case à cocher suivie du bouton. Et en bas, vous pouvez voir quelques liens. Si vous oubliez votre nom d'utilisateur ou votre mot de passe, ces liens vous aideront à récupérer votre compte. C'est à peu près le dernier menu déroulant. Comme d'habitude, je vais créer le balisage HTML , puis nous allons le styliser Allons-y, trouvons le lien vers les comptes et créons de nouveaux commentaires pour le menu déroulant 5. Ensuite, je vais ouvrir le développement, qui comportera deux classes différentes, une liste déroulante et une liste déroulante de cinq. Ensuite, je vais ouvrir la balise de formulaire. Débarrassons-nous de l' attribut action, nous n'en avons pas besoin. Je vais ajouter ici le nom de la classe, qui sera un formulaire de compte. À l'intérieur des éléments de formulaire que je vais créer, qui seront des groupes de saisie de comptage, ils incluront deux champs de saisie. Je vais ouvrir la balise d'entrée avec du texte de type, et nous avons également besoin ici d'un attribut d'espace réservé comme valeur Je vais insérer ici le nom d'utilisateur. Dupliquons cette ligne de code. Le deuxième champ de saisie sera destiné au mot de passe. Je vais changer de type. Ce sera aussi un mot de passe. Changeons l'attribut d' espace réservé dont nous avons besoin ici, le mot de passe OK, voyons voir le groupe de saisie. Ensuite, je vais créer un développement qui inclura l'entrée et l'étiquette. Je veux dire saisir une case à cocher. Ajoutons un nom de classe au développement et ça va être vérifié. Ensuite, je vais instituer des éléments d'entrée. Le type sera une case à cocher. Nous avons également besoin de votre attribut d'identification avec le contrôle de valeur. Ensuite, je vais ouvrir l'étiquette et dans les quatre attributs je vais placer cocher également sous forme de texte, je vais insérer votre, souvenez-vous de moi, nous avons utilisé votre attribut ID et également quatre attributs avec les mêmes valeurs. Jetons un coup d' œil au navigateur. Si je clique sur l'étiquette, la case sera cochée. C'est pourquoi nous avons utilisé ces deux attributs avec les mêmes valeurs. Très bien, ensuite j'insère votre bouton avec le bouton de saisie. Je vais insérer votre verrou de membre par SMS. Après cela, je vais créer un paragraphe dans lequel nous insérerons le texte suivant oublié. Ensuite, nous avons besoin de ses éléments de durée, de son nom d'utilisateur. Ensuite, nous devons, encore une fois, étendre les éléments avec le passage de texte. Enfin, nous avons besoin d' un point d'interrogation. D'accord, cela concerne le balisage HTML de la liste déroulante 5. Nous avons ici le balisage HTML. Ensuite, nous devons styliser ces éléments. Et pour cela, passons à la prochaine conférence. 22. Mettre en forme le cinquième menu déroulant: Dans la conférence précédente, nous avons préparé le balisage HTM pour notre dernier menu déroulant. Je veux dire, le menu déroulant pour associer un compte. Il faut maintenant le personnaliser. En fait, nous allons terminer la navigation dans cette conférence. Jetons un coup d'œil au projet terminé, au menu déroulant. Le dernier menu déroulant devrait ressembler à. Passons au code VS et insérons de nouveaux commentaires pour la cinquième liste déroulante. Ensuite, je vais en descendre cinq, l'élément profond du rappeur et définir sa hauteur maximale. La largeur sera de 30 ram. Pour ce qui est de la hauteur, je vais faire 32 RAM. Comme vous pouvez le constater, la taille du menu du haut vers le bas a changé. Ensuite, je vais censurer l'élément. Je vais le faire en utilisant position gauche à 50%. Et nous devons également transformer translate x avec la valeur -50%. Cela nous permet de censurer parfaitement l'élément Comme vous pouvez le constater, le menu déroulant est centré. La prochaine chose que je vais faire est de définir le rembourrage. Je vais fabriquer un rembourrage de 2,5 RAM sur les quatre côtés. Le rembourrage est créé, l'espace à l'intérieur du menu déroulant. C'est tout ce qui concerne le développement du wrapper. Ensuite, je vais sélectionner le groupe d'entrée. Je vais aligner les entrées en utilisant Flax Box. Nous avons besoin de Display Flex. Ensuite, nous devons aligner les entrées verticalement. Et pour cela, nous devons changer la direction de la boîte flexible et en faire une colonne. OK, c'est tout à propos du groupe de saisie. Ensuite, nous devons personnaliser l'entrée elle-même. Allons-y et sélectionnons le groupe de saisie, suivi de la balise d'entrée. Tout d'abord, je vais définir la hauteur écrite. La largeur sera de 100 %. Quant à la hauteur, je vais en faire cinq. Nous allons également changer la couleur d'arrière-plan. Dans ce cas, je vais utiliser la couleur RGBA. La première valeur sera 191, puis la suivante sera 213. Car la troisième valeur sera 240. Ensuite, nous devons définir l'opacité, et je vais définir l' opacité 2.4 Comme vous pouvez le voir, la taille des entrées est modifiée Et nous avons également ici une couleur de fond différente. La prochaine chose que je vais faire est de créer de l'espace dans les entrées, et nous avons également besoin d'espace entre les champs de saisie. Je vais régler le rembourrage de 2,5 RAM haut et en bas et un RAM sur les côtés gauche et droit Ensuite, je vais séparer les entrées en utilisant le bas de la marge. Ça va faire trois descentes. Comme vous pouvez le voir, l'espace à l'intérieur des entrées créé et nous avons également séparé les entrées les unes des autres. La prochaine chose que je vais faire est de me débarrasser de la bordure par défaut en utilisant border none. Je vais arrondir légèrement les entrées. Nous devons le faire en utilisant rayon de bordure et la valeur sera de 0,5. Maintenant, les entrées sont bien meilleures. La prochaine chose que je vais faire est de m'occuper du défaut. Je vais changer la taille de police. Réglons la taille de police à 1,6 RAM. Et je vais aussi changer de couleur. Utilisons la couleur 444, qui est une couleur gris foncé. Maintenant que la police et la couleur sont modifiées avec le champ de saisie, c'est terminé. La prochaine chose que je vais faire est de changer la couleur de l'attribut placeholder Pour cela, nous devons sélectionner le groupe d'entrée, puis l'entrée, qui sera suivie du pseudo élément placeholder, du pseudo élément placeholder Celui-ci est un pseudo élément, il nous faut ici de la couleur. Je vais utiliser la couleur 888, qui est une couleur gris plus clair. OK, comme vous pouvez le voir, la couleur de l' attribut placeholder est modifiée, en fait, avec les entrées. Nous avons terminé. La prochaine chose que je vais faire est de m'occuper de la case à cocher et de l'étiquette. Je vais sélectionner le développement d'un wrapper qui vérifie le nom de classe Je vais déplacer la case à cocher et l'étiquette légèrement vers le haut pour cela. Utilisons la marge supérieure avec la valeur moins deux. Comme vous pouvez le constater, les éléments se sont déplacés vers le haut. Ensuite, je vais m'occuper de l'étiquette, vérifions-le, puis de l'étiquette, je vais régler la taille de police sur 1,6 RAM. Alors nous avons besoin d'un étang. Ça va être 300, 300. Je vais également changer de couleur. Utilisons la couleur 777. OK, la case à cocher et l'étiquette sont jolies. Maintenant, je vais m' occuper du bas. Allons-y et sélectionnons le formulaire de compte. en bas, je vais régler à 100 %, puis la hauteur sera pleine. Je vais changer la couleur du dos. Utilisons ici la couleur deux, D deux DCF, la taille du bas et la couleur du dos sont modifiées Ensuite, je vais me débarrasser de la bordure par défaut. Je vais arrondir le bouton. Nous n'avons besoin ici d'aucune frontière. De plus, nous avons besoin d'un rayon de bordure avec la valeur Ram. Nous devrions maintenant obtenir de bien meilleurs résultats. Le bouton est plutôt joli. Maintenant, nous devons prendre soin du téléphone. Changeons la taille du téléphone. Réglons-le sur 1,4 RAM. Ensuite, nous avons besoin que les épaisseurs de police soient plus audacieuses. De plus, je vais transformer le texte en majuscules, changer de couleur, le rendre blanc. Nous avons de bien meilleurs résultats. bouton a l'air sympa, mais nous devons ajouter quelques styles Mos à cet élément. Je vais augmenter l'espace entre les lettres. Faisons-en une RAM de 0,1. Changez également le curseur, faites-en un pointeur. Nous avons besoin d'espace en haut et en bas du bas. Je vais fixer la marge à trois RAM en haut. Ensuite, nous avons besoin de zéro sur le côté droit, 1,5 RAM en bas et de zéro sur le côté gauche. Nous avons maintenant de bien meilleurs résultats. Nous avons de l'espace en haut et en bas du bouton. Et en fait, c'est tout à propos du bouton. Ensuite, nous devons personnaliser le paragraphe ci-dessous. Sélectionnons le formulaire de compte. Réglons la taille du téléphone à 1,5 Fram. Ensuite, nous avons besoin de texte, d'une ligne au centre. Je vais également ajouter ici le poids du téléphone 300. Voici le paragraphe. N'oubliez pas que nous avons ici deux liens. Je veux dire nom d'utilisateur et mot de passe, nous devons personnaliser ces deux mots. Ce sont des éléments de travée. Nous avons ici deux éléments de travée. Je vais sélectionner le formulaire de compte, puis le span. Changeons la couleur de l'élément. Ça va être 2371. Ensuite, nous avons besoin que le curseur soit pointeur. De plus, je vais en changer pour huit, disons 2400, d'accord ? Donc tout semble plutôt beau en fait. Avec le menu déroulant, c'est terminé. De plus, on peut dire qu'avec la navigation, c'est terminé. Ensuite, nous devons nous occuper de la section suivante de la page de destination, qui est celle-ci. C'est plutôt sympa. Passons à la prochaine conférence et commençons à créer cette section. 23. Créer le balisage HTML pour la section Services: Très bien, dans la dernière conférence, nous avons fini de travailler sur la navigation. Nous avons créé tous les menus déroulants. Et maintenant, nous devons passer à autre chose et commencer à créer la section suivante de notre page de destination. Jetons un coup d'œil au projet terminé. La section suivante sera consacrée aux services. La section comprendra un titre, puis nous aurons neuf services différents. Chaque service sera composé d'un titre ponsomicon et d'un Et en plus de cela, nous aurons ici des arrière-plans sympas et sympas. Ces différentes formes que je trouve jolies et cool. Bien, comme d'habitude, nous allons commencer à créer cette section en créant le balisage HTML Revenons au code VS et après l'en-tête, créons de nouveaux commentaires pour les services. Ensuite, je vais ouvrir le tag de section avec les services de classe. Ensuite, je vais ouvrir le tag qui va être le wrapper du contenu et je vais assigner à son nom un wrapper de services Dans le wrapper, je vais ouvrir une balise d'en-tête et insérer votre contenu, ce que nous proposons Ensuite, après le départ, je vais ouvrir tag dip et ce sera la liste des services. Ajoutons à cet élément la liste des services de noms de classes. Dans la liste, je vais créer les services. Ouvrons le tag avec le service de nom de classe. Comme je l'ai dit, chaque service inclura titre de phonosomicon et également paragraphe avec un texte factice Je vais inculquer des éléments informatiques à la classe. Un ordinateur portable FA solide. Ensuite, après PhonomIcone, je vais ouvrir la balise H à trois titres, ce sera la création du site Web après l'élément de titre ce sera la création du site Web après l' Je vais ouvrir le tag, je vais vous insérer un texte factice de 20 mots, disons C'est ici. OK, c'est ça. En ce qui concerne le premier service, nous allons avoir neuf services au total. Je vais dupliquer cet élément huit fois. Ensuite, je vais changer la phonétique et les titres. Le deuxième phonomicon sera constitué flèches FA pleines pointant vers des cercles Pour les éléments de titre, il s'agira de gestion de contenu. Ensuite, la troisième icône sera FA Brands, le A logger En ce qui concerne l'élément de titre, je vais parler d'un blog d'initié. Le prochain phonomicon sera alors un solide, un globe. Quant à l'élément d'en-tête, ce sera le commerce. Ensuite, nous aurons ici une marque, un moteur de recherche. Ensuite, nous devons changer l'élément d'en-tête, ce sera PDG. Ensuite, je vais changer le phonosomicon, ce sera un solide Quant à l'élément d'en-tête, il s'agit de la gestion des utilisateurs. Le prochain phonomicon sera un bon ticket FA. Changeons l'élément de titre H à trois, ce sera un support multilingue Ensuite, nous aurons ici un solide hashtag FA dont le titre sera l'intégration des réseaux sociaux. Et la dernière icône du service sera Parents FA, Rocket Chat. Voilà, à propos des services. Jetons un coup d'œil au résultat. Ici, nous avons tous les services et toutes les icônes sont affichées. La seule chose à faire est créer deux arrière-plans. Ces deux formes, nous avons besoin de deux éléments profonds juste au-dessus de la section de fermeture. Nous avons besoin ici des services de nom de classe G un, puis des services PG deux. OK. Le balisage HTML de la section des services est créé Les deux derniers éléments, je veux dire, ces arrière-plans ne sont pas encore visibles car ce ne sont que des éléments vides. Il est maintenant temps de personnaliser cette section. Et pour cela, passons à la prochaine conférence. 24. Section des services de coiffure: Très bien, dans la conférence précédente, nous avons créé le balisage HTML pour notre nouvelle section, je parle de la section des services Il est maintenant temps de passer à autre chose et de commencer à styliser cette section. Revenons au code VS et insérons de nouveaux commentaires après l'en-tête Nous avons besoin ici de commentaires pour les services. Ensuite, parmi les services, je vais sélectionner l'élément de section. Tout d'abord, je vais définir la hauteur maximale. La largeur sera de 100 % Quant à la hauteur, je vais faire de la hauteur 170, la hauteur de la fenêtre d'affichage Cela signifie que la hauteur occupera 170 % du pot de vue Si nous vérifions le navigateur, vous verrez que la section aura une hauteur de 170 % de la vue affichée. Bien, parlons de l'élément section pour le moment. Ensuite, je vais sélectionner le wrapper de services. Je vais définir avec 60 %. Ensuite, je vais changer la couleur de fond. Ça va être blanc. De plus, je vais ajouter ici une ombre de boîte afin de rendre l' élément visible. L'ombre de la boîte aura les valeurs suivantes, 02 Ram, puis nous aurons six Ram. En ce qui concerne la couleur, je vais utiliser la valeur RGBA. Je vais insérer ici 130, puis 162235. Ensuite, nous avons besoin d'opacité, et ce sera 0,3. Maintenant, comme vous pouvez le voir, l'élément a une ombre encadrée et il est visible sur la page Ensuite, je vais m' occuper de la position de l'emballage. Réglons la position sur absolue. Je vais positionner le wrapper de services en fonction de ses éléments parents, qui dans ce cas sont les services Nous avons besoin de la position relative de l'élément parent. Je vais régler la position à 50 %, puis la position de gauche à 50 %. J'essaie de censurer parfaitement l'élément sur la page pour cela Comme vous le savez déjà, nous devons utiliser la transformation avec la fonction de traduction. Et nous devons ajouter ici -50 % et -50 % Nous avons besoin ici de deux -50 % parce que nous essayons de censurer l'élément Maintenant, si je vérifie le navigateur, vous constaterez que l'élément est parfaitement centré dans les deux directions. Je veux dire verticalement et horizontalement. Bien, après cela, je vais créer de l' espace en utilisant du rembourrage Réglons le rembourrage en haut et en bas à six RAM. En ce qui concerne les côtés gauche et droit, je vais mettre le rembourrage à zéro Nous avons de l'espace en haut et en bas. Ensuite, je vais arrondir légèrement l'élément en utilisant un rayon de bordure avec une valeur de un Ram. De plus, je vais aligner les éléments à l'aide d'une boîte en lin dont nous avons besoin ici pour afficher du lin. Ensuite, je vais placer les éléments flexibles verticalement. Nous devons changer la direction de la boîte flexible. Ce sera une chronique. Je vais également aligner les éléments au centre. Comme vous pouvez le constater, les éléments sont placés verticalement dans la colonne et le contenu est également placé au centre. Très bien, passons à l'emballage des services. Ensuite, je suis le style des éléments de titre. Allons-y et sélectionnons wrapper de services avec un élément d'en-tête H. Je vais changer de famille de téléphones. Dans ce cas, je vais utiliser des téléphones appelés Mull Cursive. Ensuite, je vais augmenter la taille du téléphone, il y aura trois RAM. Transformons également le texte en majuscules. Ensuite, le téléphone est allumé, le téléphone va être en gras et changer d'appelant. Je vais utiliser le numéro 39. 4353. C'est de couleur gris foncé. Regardons le titre. Comme vous pouvez le constater, le titre est plutôt joli. Je vais augmenter l'espace entre les lettres en utilisant l'espacement des lettres Ce sera 0,1 Ram. Et aussi, je vais créer de l'espace au bas de l' élément en utilisant le bas avec une valeur de huit RAM OK, c'est ça, à propos du titre. Ensuite, je vais m'occuper le moins des services. Allons-y et sélectionnons la liste des services. Je vais utiliser à nouveau, Flex Box. Réglons l'affichage pour qu'il soit flexible. Ensuite, pour envelopper les éléments flexibles, afin de les placer sur plusieurs lignes différentes, nous devons utiliser wrap avec la valeur p. De plus, je dois justifier le centre de contenu afin de centrer les éléments flexibles horizontalement. heure actuelle, rien n'est changé ici car nous devons attribuer de la hauteur aux services, je veux dire aux articles eux-mêmes. Une fois cela fait, les éléments seront placés dans différents rôles, comme dans la version finale. D'accord, en tant qu'invité, nous devons sélectionner le service lui-même et le définir en fonction de la hauteur. La largeur sera de 28 RAM. Pour ce qui est de la hauteur, je vais faire 35 RAM. Comme vous pouvez le constater, nous avons trois rangées différentes, et dans chaque rangée, vous pouvez voir les trois éléments. Très bien, la mise en page est prête. Nous devons maintenant personnaliser les articles. Je vais créer un espace entre les éléments sur les côtés gauche et droit. Je vais utiliser la marge. Nous avons besoin ici de zéro en haut et en bas et 2,5 fram sur les côtés gauche et droit Nous avons maintenant de l'espace entre les services. La prochaine chose que je vais faire est d'utiliser à nouveau, Flex Box. Réglons l'affichage pour qu'il soit flexible. Ensuite, je vais changer de direction car les éléments à l'intérieur des services doivent être placés verticalement. Pour cela, nous devons définir la direction de flexion sur la colonne. Ensuite, je vais centrer les éléments à l'aide d'une ligne. Les articles centrent et justifient le contenu dont nous avons besoin ici . Comme vous pouvez le constater, les éléments des services sont placés au centre. La prochaine chose que je vais faire est de m'occuper des phonoicons Sélectionnons le service, puis l' élément que je vais définir en hauteur, tous deux à dix. Ensuite, je vais changer la couleur de fond. Ça va être blanc. Nous avons également besoin de Box Shadow, ce sera 01 Ram Ram. Ensuite, nous avons besoin de la couleur RGBA. Les valeurs seront 75, puis 1192 contre un, et l'opacité sera 0,15. Ici, nous avons les icônes du téléphone Je vais faire ces cases autour en utilisant le rayon de bordure, ça va être de 50 %. Maintenant, nous avons les cercles. La prochaine chose que je vais faire est de placer les icônes au centre de ces cercles. Pour cela je vais utiliser à nouveau, Flex box. Nous avons besoin de Display Flex , puis d'un centre de rubriques et d'un centre de contenu Justify. Les icônes sont maintenant placées au centre des cercles. Agrandissons-les en utilisant, je vais définir la taille de la police en fonction du formulaire. Je vais également créer un espace au bas des icônes. Réglons la marge inférieure de deux M. D'accord, nous avons ici les icônes du téléphone. Maintenant, en tant qu'invité, nous devons changer les couleurs de chaque icône. Je vais commencer par la première icône, mais avant cela, je vais regarder la version finale. Comme vous pouvez le constater, chaque icône a une couleur différente. Mais si vous regardez les couleurs, vous remarquerez que nous avons ici un effet de dégradé linéaire. Je vais créer cet effet. Tout d'abord, je vais sélectionner le premier service à l'aide du sélecteur de chat Ensuite, nous avons besoin d'un élément. Pour créer un effet de dégradé linéaire avec l'élément de texte, je vais utiliser la technique suivante. Tout d'abord, nous avons besoin d' un arrière-plan avec une fonction de gradient linéaire. Je suis inséré ici. La première couleur sera le blanc. Pour ce qui est de la deuxième couleur, je vais en insérer une à 59. De plus, je vais ajouter ici 60 %. Cela signifie que la transition de couleur commencera après 60 % des éléments. Si nous vérifions le navigateur, vous verrez que le phonosomicon a toujours la couleur noire, mais que l'arrière-plan du cercle En fait, nous n'en avons pas besoin. Nous devons changer la couleur de l'icône elle-même. Pour ce faire, je vais ajouter ici deux propriétés différentes. Le premier sera un clip d'arrière-plan d'une clé Web. La valeur sera du texte. Quant à la deuxième propriété, elle sera la couleur du champ de texte de la clé Web. Je vais ajouter ici transparent comme valeur. Maintenant, comme vous pouvez le voir, nous avons ici un résultat agréable et cool, l'icône en forme de ponme a un effet de dégradé linéaire Faisons de même pour le reste des icônes. Je vais dupliquer ce code huit fois, car au total, nous aurons neuf icônes. Changeons les numéros du sélecteur. Et nous devons également changer les couleurs. La deuxième couleur sera FA 751c. La deuxième icône est plutôt jolie. Allons-y et changeons toutes les icônes. Lorsque vous en avez trois, la couleur va de trois à 93. Alors nous en aurons quatre ici. La couleur sera 31 DCA 1. Ensuite, nous aurons la cinquième icône. Pour ce qui est de la couleur, je vais ajouter ici 4400b. Ensuite, nous aurons le sixième article. Ajoutons ici f4800. Ensuite, nous aurons la septième icône. Pour ce qui est de la couleur, je vais insérer ici le F26 AC. Ensuite, nous avons besoin de l'icône numéro huit. Pour ce qui est de l'appelant , utilisons 0010. Nous devons changer la dernière icône. Ce sera le B6004. Comme vous pouvez le voir, toutes les icônes ont des couleurs de fond dégradées linéaires différentes. Et ils sont plutôt jolis. OK, maintenant nous devons nous occuper des rubriques dans les services Allons-y et sélectionnons le service 3. Je vais changer de famille de téléphones. Ce sera un croson, cursif, puis la taille du téléphone sera Tom Je vais changer de couleur. Réglons la couleur sur 5728. Il nous faut ici le signe de la livre sterling. Enfin, je vais ajouter ici une marge. Réglons la marge à deux RAM en haut et en bas et à zéro sur les côtés gauche et droit. Je vois que les titres sont plutôt jolis. Maintenant, nous devons nous occuper des paragraphes. Allons-y et sélectionnons le service. Je vais régler la taille en livres à 1,6 RAM, mais ensuite nous devons aligner le texte au centre. Enfin, changez de couleur. Je vais utiliser ici, 889b9. C'est bon. Comme vous pouvez le constater, les services sont plutôt jolis. Nous en avons presque terminé avec la section. La seule chose que j' ai à faire est de m' occuper des arrière-plans. Je parle de ces formes ici. Allons-y et faisons-le. Je vais commencer par le cercle. Sélectionnons le service PG 1. Je vais régler la largeur et la hauteur du tram. Ensuite, je vais changer le fond. Nous devons utiliser des dégradés linéaires. La direction va être double. Ensuite, nous avons besoin de transparent comme première couleur. La deuxième couleur sera transparente ainsi que pour la troisième couleur, je vais ajouter ici f437 Ici, nous avons les éléments en arrière-plan. Comme je l' ai dit, ce sera un cercle, donc je vais utiliser un rayon de chaudière d'une valeur de 50 %. Je vais également changer la position de l'élément. Réglons la position sur absolue. Ensuite, nous devons nous positionner à zéro. Quant à la bonne position, elle sera de 10 % Comme vous pouvez le voir, le cercle est la position. En fait, cela couvre les services. Nous n'en avons pas besoin. Pour résoudre ce problème, je vais ajouter une propriété d'index au wrapper de services avec une valeur supérieure à zéro Réglons-le sur un. Comme vous pouvez le voir, le problème est résolu, d'accord ? La seule chose qui a à voir avec le cercle est de diminuer l'opacité Pour le rendre encore plus beau, je vais définir l'opacité 2.3. Comme vous pouvez le voir, nous avons maintenant de bien meilleurs résultats C'est ça, à propos du cercle. Je vais maintenant m'occuper du second arrière-plan qui est un rectangle. En fait, je vais dupliquer ce code. Changeons le nom de la classe. Ce seront les services G 2. Nous avons besoin des mêmes hauteurs que pour l'arrière-plan. Je vais changer la couleur dont nous avons besoin ici, 74b5. Ensuite, je vais modifier le rayon de la bordure. Dans ce cas, nous avons besoin de 15 RAM. De plus, je vais changer la position du haut vers le bas. Ce sera 5 %. Quant à la bonne position, nous devons la changer en gauche. La position de gauche sera 12. 12 % Vérifions les résultats que nous avons ici, le rectangle et je vais le faire légèrement pivoter. Utilisons transform rotate Z et la valeur sera de moins dix degrés. En fait, quelque chose ne va pas ici car dans la version finale nous avons un résultat différent. Vérifions le code. C'est bizarre parce que tout semble correct. Ah oui, il faut changer de direction. Dans ce cas, la direction doit être vers la gauche et non vers la droite. Je pense que ça règle le problème. Le problème est réglé et tout semble parfait. OK, c'est tout à propos de cette section, je la trouve plutôt jolie et elle vous plaît. La prochaine chose que je dois faire est de m'occuper de la navigation, car une fois que nous faisons défiler la page vers le bas, nous devons rendre la navigation collante, fixée en haut. Cet effet ici, une fois que nous faisons défiler la page, la navigation change d'arrière-plan. Il est fixé sur le bord supérieur de la page. Afin de créer cet effet, passons au cours suivant. 25. Créer une barre de navigation collante dans Scroll: Très bien, dans la conférence précédente, nous avons fini de styliser la section des services. Ça a l'air plutôt sympa. Comme nous l'avons dit, nous allons nous occuper de la navigation. Nous ne devons pas fabriquer de colle. Une fois que nous avons fait défiler la page vers le bas, examinons le projet terminé. Une fois que nous avons fait défiler la page vers le bas, nous devons modifier un certain nombre de choses. Nous devons changer la couleur de fond de la navigation. Nous devons également changer les couleurs du logo et des éléments de navigation. Nous devons personnaliser le bas. Et nous devons également modifier la position des menus déroulants. OK, c'est ça, ce que nous allons faire dans cette conférence. Il est maintenant temps d'utiliser un peu de Javascript. Ouvrons le fichier script JS. La première chose que je vais faire est de sélectionner la navigation. Je vais créer une nouvelle variable. Je vais dire que c'est normal. Nous devons sélectionner la navigation, et pour cela je vais utiliser la méthode de sélection des requêtes. Nous devons spécifier ici le nom de la classe, qui ne figurera pas. OK. La navigation est sélectionnée. Nous devons maintenant vérifier si la position de défilement vertical d' une page Web est supérieure à zéro. Je vais utiliser un objet fenêtre. En fait, la fenêtre fait référence à la fenêtre du navigateur Web ou la baignoire que vous consultez actuellement. Nous devons utiliser un objet fenêtre et y ajouter un écouteur d'événements Le type de l'événement va être scrollé. De plus, je vais placer ici une fonction de rappel qui sera exécutée une fois que nous aurons fait défiler la page vers le bas Nous devons maintenant vérifier si la fenêtre défile ou non. Pour cela, je vais utiliser l' instruction if comme condition que je vais insérer ici. Défilement de la fenêtre Y. En fait, le défilement Y est une propriété qui indique le nombre de pixels sur lesquels la page a fait défiler verticalement depuis S'il est supérieur à zéro, cela signifie que vous devez faire défiler la page vers le bas depuis le haut de la page. Nous devons vérifier si le défilement de la fenêtre y est supérieur à zéro. Si c'est vrai, alors je vais ajouter une nouvelle classe à la barre de navigation. Ensuite, nous définirons de nouveaux styles dans le fichier CSS. Pour cette classe nouvellement créée, je vais utiliser la barre de navigation. Ensuite, je vais accéder à la liste des classes de la sieste. Nous devons ajouter ici une nouvelle classe et je vais l'appeler sticky. Encore une fois, si l'on fait défiler la page vers le bas, la nouvelle classe sera conservée dans le naber Ensuite, nous avons besoin de déclarations. Si la propriété window scroll y n' est pas supérieure à zéro, nous devons supprimer le sticker back class du napper Nous avons besoin de la liste des classes Napper Dot. Ensuite, nous devons utiliser la méthode de suppression. Et nous devons le préciser encore une fois, sticky. D'accord, c'est tout à propos du script Java. Je vais maintenant revenir au fichier CSS. Nous devons sélectionner Napper avec une classe adhésive. Je vais insérer Napper Sticky, et nous devons définir de nouveaux styles Je vais diminuer la hauteur, ce sera un bélier. Et je vais aussi changer la couleur de fond. Mettons-le en blanc. Maintenant, si nous faisons défiler la page vers le bas, les nouveaux styles seront appliqués au napper Comme vous pouvez le constater, la couleur de fond est blanche et la hauteur de la couche a également diminué OK, la prochaine chose que je vais faire est de rendre cet effet plus fluide. Et pour cela, nous devons utiliser les valeurs de transition, la durée totale sera de 0,3 seconde. Une fois que nous avons fait défiler la page, l' effet sera plus fluide. Très bien, ensuite je vais ajouter un petit effet d'ombre à la barre Of. Utilisons ici l'ombre de la boîte avec les valeurs 01 Ram, dix Ram, et la couleur sera RGB, A 130-16-2235, A 130-16-2235, et l'opacité sera de 0,6 une fois que nous ferons défiler la page Vous verrez ici un effet d'ombre agréable et cool. Bien, la prochaine chose que je vais faire est de changer la couleur du logo. Allons-y et sélectionnons les éléments d'envergure. En utilisant à nouveau, sticky, nous avons besoin ici du sticker, puis du logo, puis de l'élément span. Je vais changer de couleur. Il sera 9 h 26 moins sept heures. De plus, je vais me débarrasser de l'ombre technologique du logo. Disons qu'aucune en fait, la couleur n'est pas modifiée. Il y a quelque chose qui ne va pas. Nous devons ajouter ce code ci-dessous après le code où nous stylisons ces éléments de panneau pour que ce code fonctionne Si nous faisons défiler la page vers le bas, nous verrons que la couleur du logo est modifiée. OK, maintenant nous avons besoin de la même chose pour les articles sans objet. Ne trouvons aucun lien dont nous avons besoin ici. Alors pas de lien, il faut changer de couleur. Ce sera de la même couleur, 092627. devons également nous débarrasser de l' ombre technologique. Réglons-le sur aucun. Comme vous pouvez le constater, la couleur des éléments O est modifiée. Ensuite, nous devons changer la position du triangle, qui est l'élément postérieur de l' élément de navigation. Je vais également modifier la position du menu déroulant. Ajoutons ici Sticky, suivi des éléments publicitaires. Passons à la position deux. Nous avons besoin ici de crochets. Nous devons nous positionner à six Ram. En ce qui concerne le menu déroulant, utilisons le stick suivi du menu déroulant. Je vais me mettre en position pour prendre le tram, et je vais aussi changer l'ombre de la boîte. Faisons en sorte que ce soit 0110 Ram. Et la couleur sera celle-ci avec une opacité plus faible, 0.4 Maintenant, comme vous pouvez le voir, les positions du triangle et des menus du haut vers le bas sont modifiées Et nous avons aussi ici une jolie et cool boîte à ombres. La seule chose à faire est de personnaliser le bouton. En fait, nous avons ici un petit problème. Nous n'avons pas besoin de ce triangle ici. Je vais arranger ça. Trouvons le pseudo-élément, qui est un triangle. Nous devons exclure ici le bouton. Et nous pouvons le faire de la manière suivante. Vous pouvez voir ici que nous sélectionnons un article. Et puis, après les pseudo-éléments, obtenir un élément à partir d'ici, nous devons utiliser l'une des pseudoclasses appelées Nous devons spécifier ici le bas est en fait le dernier élément en haut, afin que nous puissions en déduire une pseudoclasse appelée le Cela exclura le bas d'ici. Maintenant, si nous vérifions, comme vous pouvez le voir, nous n' avons plus ici le triangle. Le problème est résolu. Bien, la dernière chose que j'ai à faire est de personnaliser le bas une fois que nous faisons défiler la page vers le bas. Alors allons-y et trouvons le bouton. Cela devrait être après les listes déroulantes. C'est ici. Sélectionnons le bouton avec la classe Sticky. Je vais changer le fond. Utilisons des dégradés linéaires. Nous avons besoin que la direction soit composée de deux droits. En ce qui concerne les couleurs, la première couleur sera F459. Pour ce qui est de la deuxième couleur, je vais insérer ici le F3598 Ensuite, nous devons passer à travers l'ombre des boîtes, il n'y en aura aucune. Je vais également changer la couleur du bouton. Comme vous pouvez le voir, il sera blanc. Le bouton est plutôt joli en fait. C'est tout ce qu'il faut pour sortir du lot, tout a une apparence et un fonctionnement parfaits. Nous pouvons passer à la prochaine conférence et commencer à nous occuper de la section suivante. 26. Créer le balisage HTML pour les projets: Dans la conférence précédente, nous avons créé un stick of bar. Une fois que nous avons fait défiler la page vers le bas, vous verrez que nous avons ici une barre fixe sans barre en haut de la page Web. Je trouve que ça a l'air plutôt sympa et cool. La prochaine chose que nous devons faire est de créer une autre section appelée projet. Si nous examinons le projet terminé, nous verrons ici la section du projet, que je trouve très impressionnante et cool. La section consiste en un paragraphe d'en-tête, puis nous avons ici une petite navigation avec différentes catégories de sites Web. Vous pouvez voir ici les affaires, la nourriture, la santé, les voyages. si je clique sur l'une des catégories, nous obtiendrons ici les packs de sites Web appropriés. La navigation fonctionne parfaitement. Nous avons ici le bouton Afficher tout, et si nous cliquons dessus, tous les projets s'afficheront. Je pense que cette section sera très intéressante. Nous utiliserons du HTML, du CSS et également du script Java. Il est maintenant temps de commencer à créer la section. Comme d'habitude, je vais commencer par le balisage HTML. Insérons de nouveaux commentaires ici. Je vais ouvrir le tag de section avec les projets de classe. Ensuite, comme je l'ai dit, nous allons commencer par le titre et le paragraphe. Je vais ouvrir H, un élément d' en-tête avec le texte 100 sites Web complets. Ensuite, nous aurons un paragraphe qui inclura du texte factice, comme vous le savez déjà Pour créer un texte factice, nous devons écrire un Lom puis spécifier le nombre de mots Dans notre cas, je vais créer 30 mots. Nous avons ici notre factice paragraphe après paragraphe. Nous devons créer une navigation. Ouvrons le tag avec le filtre de classe global, nous aurons six liens différents. Cinq d'entre elles seront de catégories différentes. Quant au sixième lien, il s'agira du bouton Afficher tout. Je vais ouvrir le lien avec le lien du filtre de classe. Ensuite, comme texte, je vais insérer votre entreprise. En plus de cela, nous avons besoin que vous insériez un attribut appelé type de données dans lequel nous devons spécifier le type, je veux dire la catégorie du projet. Dans ce cas, nous avons besoin de business. Dupliquons l'élément de lien cinq fois, puis changeons de catégorie. Le second sera la nourriture. Nous devons également modifier le type de données. Ensuite, la prochaine étape sera celle de la santé. Ensuite, nous voyagerons ici. Ensuite, le suivant sera un autre. Enfin, nous avons besoin d'une vue ici. Pour ce qui est du type de données, je vais tout insérer ici. Très bien, passons donc à la navigation par filtre. Ensuite, nous devons créer les projets. Je vais ouvrir une balise profonde avec la liste des projets de nom de classe dans laquelle je vais créer le projet. Chaque projet sera composé de trois images différentes, comme nous l'avons ici dans le projet final. Comme vous pouvez le constater, chaque projet est composé de trois images différentes. Nous devons insérer ici trois images différentes. Mais avant cela, nous devons ajouter ici l'attribut de type de données afin spécifier également la catégorie ici. La première catégorie sera celle des affaires. Je vais insérer trois images différentes. Ouvrons l'image. Je vais préciser ici le chemin de l'image. Tout d'abord, nous devons utiliser le dossier actuel. Sélectionnez ensuite le dossier d'images et trouvez la première image qui sera celle du Web, l'image 1. Dupliquons ce code deux fois et changeons les noms des images dont nous avons besoin ici. Web une image deux, puis Web une image trois. C'est bon, c'est ça. À propos du premier projet, comme vous pouvez le voir, nous avons ici le paragraphe d' en-tête, puis nous voyons ici la navigation. Et aussi trois images différentes qui sont trop grandes pour le moment . Mais nous allons régler ce problème. Allons-y et dupliquons les projets 11 fois, car au total, nous aurons 12 projets différents. Allons-y et apportons quelques modifications. Le deuxième type de données sera un autre. Nous devons également ici changer le nom des images dont nous avons besoin ici, Web two. Ensuite, le troisième projet portera sur la nourriture. Il nous en faut trois. Ensuite, le prochain projet sera Health Web Four. Ensuite, nous en aurons d'autres, changeons les noms des images dont nous avons besoin. Web 5. Ensuite, le prochain type de date sera la santé. En ce qui concerne les images, nous avons besoin de Web Six. Ensuite, nous aurons votre Web Seven. Le prochain projet sera dans la catégorie voyages, il s'agira du Web Eight. Ensuite, le suivant est Foot Web Nine. Ensuite, nous aurons du travail à faire. Laissons la valeur ajoutée ici zéro. Nous avons besoin de Web Ten. Ensuite, nous aurons Foot Web 11. Et le dernier type sera celui des affaires. Je ne vais pas le changer en ce qui concerne les noms des images dont nous avons besoin ici, Web 12. D'accord. Voilà, le balisage HTML de la section du projet est prêt Jetons un coup d' œil au navigateur. Comme vous pouvez le constater, nous avons ici les 12 projets. Tout est prêt. Et maintenant, il est temps de commencer à styliser cette section en conséquence. Passons à la prochaine conférence. 27. En-tête de projets et navigation par filtre: Dans la conférence précédente, nous avons préparé le balisage HTML pour la section de notre projet Comme vous pouvez le voir, toutes les images sont là pour le web. Il est temps de styliser cette section. Dans cette conférence, nous allons styliser la première partie de la section, je parle du paragraphe d'en-tête et de la navigation par filtre. Ensuite, nous passerons à autre chose et styliserons également les packs de sites Web. OK, passons au code V juste après la section des services dans définir de nouveaux commentaires pour les projets. Ensuite, je vais sélectionner la section des projets. Tout d'abord, je vais définir la largeur et la hauteur. La largeur sera de 100 % Quant à la hauteur, je vais également la faire de 100 %. Ensuite, je vais créer de l'espace en haut et en bas du rembourrage des sections Je vais régler le rembourrage à 25 RAM, puis à 0,15 Ram et à zéro De plus, je vais aligner les éléments à l'aide Flex Book sur l'écran Flex. Ensuite, pour aligner les éléments verticalement, il faut changer de direction. La direction de flexion sera une colonne. Je vais aligner les objets au centre. Comme vous pouvez le voir sur le contenu, les éléments flexibles sont placés au centre. De plus, nous avons de l'espace en haut et en bas de la section. La prochaine chose que je vais faire est de sélectionner H un élément de titre. Nous avons besoin ici des projets H one. Je vais changer de famille de téléphones. Ce sera de la cursive mull. Nous avons également besoin que la taille du téléphone soit plus grande. Réglons-le sur six RAM. Ensuite, je vais créer un espace en bas en utilisant la marge inférieure. Réglons la marge inférieure pour que je change également la couleur du titre. La couleur sera f4800. Jetons un coup d' œil au titre. Donc, comme vous pouvez le voir, le titre est plutôt sympa. Ensuite, je vais m' occuper du paragraphe. Je vais sélectionner les projets P. Passons à 90 RAM. Ensuite, je passe à une ligne de texte au centre. La prochaine chose que je veux faire est d'augmenter la taille du téléphone. Réglons-le sur deux RAM. Nous devons également changer de couleur. Réglons la couleur entre 57 et 8. Créez également de l' espace en bas. Réglons la marge inférieure à quatre RAM. Comme vous pouvez le constater, le paragraphe est plutôt sympa. Ensuite, je vais m' occuper de la navigation. Allons-y et sélectionnons Filtrer. La première chose que je vais faire est de définir la largeur. Ce sera 80 % , puis je vais régler la hauteur à dix Ram. Modifiez également la couleur de fond. Ça va être blanc. Ensuite, je vais utiliser box shadow afin de rendre la navigation visible. Je vais régler Box Shadow à 02 RAM. Huit RAM comme couleur. Je vais utiliser TBA. Les valeurs seront 130, puis 162. Nous allons sélectionner ces valeurs. Je vais configurer Opacity 2.2 OK, nous avons ici la navigation par filtre Ensuite, je vais le rendre légèrement arrondi, en utilisant le rayon de bordure. Réglons-le sur une RAM. Ensuite, je vais utiliser Flex Box. Réglons l'affichage pour qu'il soit flexible. Je vais aligner verticalement les éléments au centre. Comme vous pouvez le constater, les objets sont placés verticalement au centre. Je vais maintenant créer un espace entre les éléments en utilisant justify content space. Cette valeur nous permet de créer un espace uniforme entre les éléments flexibles. Enfin, nous avons besoin d'un espace entre la navigation et les images. Je vais le faire en utilisant la marge, en bas avec la valeur six. OK, maintenant la navigation est séparée des images. Ensuite, je vais personnaliser le lien. Dans la navigation par filtre, je vais sélectionner le lien de navigation du filtre. Réglons la largeur et la hauteur. La largeur sera de 14 RAM. Ensuite, je vais régler la hauteur à quatre béliers. Changeons la couleur de fond. Ce sera le F245. Comme vous pouvez le constater, la largeur et la hauteur ainsi qu'une couleur arrière sont appliquées aux éléments du lien. Ensuite, je vais créer les éléments autour en utilisant le rayon de bordure. Il y en aura quatre, nous devons donc placer les liens au centre. Pour cela, je vais utiliser à nouveau le CSS Flexbox. Nous avons besoin de Display Flex, puis de Justify Content Center et d'un centre de rubriques. Comme vous pouvez le constater, les liens sont placés au centre. Allons-y et définissons la taille de police à un point. Ensuite, nous avons besoin d'une épaisseur de police, elle sera en gras. Nous devons également transformer le texte en majuscules, puis changer de couleur. Ce sera le 919 AA. Jetons un coup d'œil. La navigation est plutôt sympa. Je vais créer un espace entre les lettres en utilisant l'espacement des lettres Réglons-le sur 0,1 run. Très bien, maintenant je vais créer un petit effet de survol Une fois que nous avons survolé les liens, ils devraient changer de couleur d'arrière-plan Et je veux aussi les déplacer un peu plus haut. Sélectionnons le lien du filtre avec le pointeur de la souris. Je vais changer la couleur de fond. Ça va être un D F deux. Nous devons également déplacer un peu l'élément vers le haut. Nous devons transformer, traduire Y et la valeur sera -0,1. L' effet ho fonctionne bien, mais nous avons besoin d'un effet plus fluide Ajoutons la transition A 0,3 seconde. Maintenant, tout fonctionne bien. En fait, je pense que la hauteur des maillons est un peu plus petite. Voyons la version finale. Oui, c'est définitivement plus petit. Augmentons la hauteur, faisons-en cinq. Nous avons maintenant de meilleurs résultats. La prochaine chose que je vais faire est d'activer le bouton d'affichage par défaut. Comme vous pouvez le constater, la vue en bas a une couleur de fond différente et la couleur du téléphone est également blanche. Pour ce faire, je vais ajouter une nouvelle classe au dernier lien que je consulte. Ajoutons ici Active. Ensuite, je vais sélectionner la classe active et changer la couleur de fond. Ce sera f401 Et nous avons également besoin de la couleur du texte, le blanc Nous devons ajouter aux classes et non à l'attribut de type de données. C'était une petite erreur. Maintenant, le style doit être appliqué. La seule chose que j' ai à faire est de changer la couleur de fond. Je vais sélectionner Active avec le survol. Changeons la couleur de fond. Ce sera le C611. Maintenant, tout fonctionne bien. Nous avons terminé de travailler sur la première partie de notre section. Ensuite, nous devons personnaliser ces packs de sites Web. À l'heure actuelle, nous avons ici des images plus grandes. Nous devons nous en occuper davantage. Passons à la prochaine conférence. 28. Packs de sites Web de coiffure: Très bien, dans la conférence précédente, nous avons abordé le style, la première partie de la section du projet, je parle du paragraphe d'en-tête et de la navigation par filtre. Et maintenant, nous devons nous occuper des packs de sites Web. Au total, nous avons ici 12 packs de sites Web. Ils sont alignés sur des lignes différentes. Nous avons quatre rangées. Dans chaque rangée, nous avons trois sites Web. Passons au code VS et commençons à styliser. la deuxième partie de la section des projets, nous devons sélectionner projets et je vais définir la largeur et la hauteur. La largeur sera de 33 RAM. En ce qui concerne la hauteur, je vais également régler la hauteur 233 Ram. Ensuite, je vais sélectionner et styliser les images. À l'heure actuelle, ils sont trop grands, nous devons donc nous en occuper et les réduire. Je vais sélectionner la première image dont nous avons besoin, l'image du projet, puis le sélecteur d' enfants Nous avons besoin ici de la première image. Je vais régler la largeur à 22. Quant à la hauteur, je vais la faire à 100 %. La première image est plus petite maintenant, mais en fait elle est étirée et elle n'a pas l'air belle. Pour résoudre ce problème, je vais sélectionner une image et utiliser une propriété appelée pieds d'objet avec la valeur cover. Maintenant, comme vous pouvez le voir, les images sont vraiment belles. Ensuite, je vais dupliquer ce code deux fois. Changeons les chiffres ici. Nous avons besoin d'un neuvième enfant et d'un neuvième enfant trois. La deuxième image sera de 20 RAM. Quant à la hauteur, je vais la régler à 30 RAM. Ensuite, nous avons l'image numéro trois. La largeur sera de 100 % Quant à la hauteur, je vais la faire de 70 %. Bien, prochaine chose que je vais faire est de sélectionner la liste des projets. Je vais définir la largeur et la hauteur. La largeur va être de 70 % Quant à la hauteur, je vais la porter à 100 %. Ensuite, je vais utiliser Flex Box pour aligner les éléments. Nous avons besoin de Display Flex. Ensuite, nous avons besoin de Justify Content Center pour centrer les éléments flexibles horizontalement. Ensuite, nous devons envelopper avec la valeur p afin d' aligner les packs de sites Web sur différentes lignes. Comme vous pouvez le voir maintenant, nous avons des images alignées sur différentes lignes. le moment, ils ne sont pas très beaux, mais nous allons bientôt y remédier. La prochaine chose que je vais faire est de régler la position de l' image sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui dans ce cas est le projet. Nous avons besoin de votre position relative car nous allons positionner les images en fonction de l'élément parent. Maintenant, toutes les images ont une position absolue. La prochaine chose que je vais faire est de régler position de chaque image à 50 %. Ensuite, nous avons besoin de positions pour la première image. Je vais régler la position gauche à 50 %. Afin de placer parfaitement l' image au centre, nous devons utiliser transform translate avec les valeurs -50 % à nouveau -50 %. Les premières images sont parfaitement placées au centre du Ensuite, je vais ajouter un effet d'ombre à la première image. Utilisons Box Shadow. Je vais ajouter ici les valeurs suivantes. Nous avons besoin de 01 RAM, puis de RAM complète et de RTB A. Je vais utiliser la couleur noire avec l'opacité 0.4 Comme vous pouvez le constater, les premières images ont un effet d'ombre. Ils ne sont pas entièrement visibles. Pour résoudre ce problème, je vais utiliser la propriété index. Réglons l'indice 22. Maintenant, ils devraient être entièrement visibles. Oui, ils sont visibles. Ensuite, je vais m' occuper de la deuxième image. Réglons la position gauche à -5 %. De plus, nous devons traduire, en fait, pas pour traduire, pour transformer, puis nous devons traduire Y -50 %. Les secondes images sont positionnées ici Encore une fois, une propriété d'index, car elles ne sont pas entièrement visibles. Fixons un index à un. Elles sont maintenant visibles, mais elles sont placées derrière les premières images, et c'est ce dont nous avons besoin. Je vais ajouter ici une ombre en forme de boîte. Les valeurs seront 03 Ram, 8 Ram. La couleur sera RGBA, 130162. Nous allons sélectionner cette valeur et modifier l'opacité. Ça va être 0,9 Maintenant, les secondes images ont cet effet d'ombre agréable et cool. En fait, je vais arrondir les coins des images. Utilisons pour le rayon. Réglons-le sur une RAM. Maintenant, les images sont bien meilleures. La prochaine chose que je vais faire est de m'occuper de la troisième image. Je vais définir la bonne position pour la troisième image à -10 %. Encore une fois, nous devons transformer, traduire Y -50 %, les troisièmes images sont Ajoutons ici l'ombre de la boîte. En fait, nous avons besoin des mêmes valeurs. Copions-les d'ici et collons-les ci-dessous. Les troisièmes images sont maintenant positionnées et présentent une ombre en forme de boîte. La seule chose que je dois faire est de séparer les packs de sites Web les uns des autres. J'ajoute ici la marge cinq. De plus, je vais pointer le curseur, d'accord ? Tout semble donc parfait et là où nous réalisons les projets, je suis dans les packs de sites Web. Tout est stylé et très joli. Nous devons maintenant faire en sorte que cette navigation fonctionne. Une fois que nous avons cliqué sur l'une des catégories, les images appropriées devraient être affichées. Pour ce faire, je vais passer à la prochaine conférence. 29. Faire fonctionner la navigation par filtre: Très bien, dans la conférence précédente, nous avons fini de styliser la section du projet. Comme vous pouvez le constater, tout est plutôt beau. Et maintenant, nous devons faire en sorte que la navigation fonctionne. Je veux dire, une fois que nous avons cliqué sur l'une des catégories, les packs de sites Web appropriés devraient être affichés. Jetons un coup d'œil au projet terminé. Si je clique sur l'un des liens, les sites Web appropriés seront affichés. Si je clique sur le bouton Afficher tout, tous les sites Web seront affichés. Très bien, c'est ce que nous allons faire dans cette conférence. Passons au fichier script JS. En fait, la première chose que je vais faire ici est ajouter des commentaires pour Napper, car je l'ai oublié Nous avons maintenant besoin d'un. Et ensuite je vais insérer de nouveaux commentaires pour la section du projet. Tout d'abord, je vais sélectionner tous les éléments du lien et les stocker dans la variable. Créons une nouvelle variable. Je vais l'appeler Filtrer les liens. Ensuite, nous devons sélectionner tous les liens en utilisant la méthode Query Selector All Cette méthode nous permet de sélectionner plusieurs éléments portant le même nom de classe. Dans ce cas, nous avons besoin ici d'un filtre de nom de classe, pas de lien. Cette méthode renvoie une liste de nœuds qui est une collection. C'est un objet semblable à un tableau. Nous devons maintenant parcourir la liste des nœuds. Je veux dire filtrer les liens et ajouter un écouteur d'événements à chaque lien Nous avons besoin de liens de filtrage suivis d'une méthode de recherche. En fait, pour chaque méthode, il existe une méthode d'assistance de tableau. Dans le script Go, il est utilisé pour parcourir les éléments d'un tableau ou d'une liste de nœuds et pour effectuer une action ou une opération spécifique sur chaque élément. Nous devons assurer une fonction de rappel. Cette fonction sera exécutée pour chaque élément de la liste des nœuds. Je vais m'assurer d'une dispute. Ce sera un lien de filtrage. Il représente l'élément en cours traitement dans la liste des nœuds. Nous pouvons maintenant ajouter un écouteur d'événements au lien du filtre. Le type de l'événement sera également cliqué, je vais assurer une fonction de rappel qui sera exécutée une fois que nous aurons cliqué sur le lien Si nous jetons un coup d'œil au navigateur et que nous cliquons sur l'un des liens ici, nous naviguerons vers le haut du site Web. En fait, il s'agit d'un comportement par défaut de l'élément de lien. Et nous devons empêcher ce comportement par défaut pour cela, nous devons passer ici et même des objets, puis nous pouvons utiliser la méthode appelée prevent default. Maintenant, si je clique sur les liens, nous ne naviguerons plus vers le haut de la page. Bien, comme vous le savez, le dernier lien, je veux dire le bouton Afficher tout, a une classe par défaut active. Une fois que nous avons cliqué sur l'un des liens, nous devons supprimer cette classe, je veux dire la classe active de l'élément actuel et nous devons l'ajouter à l'élément cliqué Pour ce faire, je vais sélectionner des éléments à l' aide de la méthode de sélection de requêtes Je vais préciser ici le nom de la classe. Nous avons besoin d'un lien de filtre et nous devons ajouter ici la classe active. Une fois actif, l' élément de lien est sélectionné. Nous pouvons maintenant supprimer la classe active de cet élément. Nous avons besoin d'une propriété de liste de classes. Ensuite, nous avons besoin de la méthode de suppression. Et nous devons indiquer ici le nom de la classe active. Une fois que nous avons cliqué sur les éléments du lien, la classe active sera supprimée de l'élément et ajoutée à l'élément cliqué Maintenant, pour ajouter une classe active à l'élément cliqué, nous devons ici filtrer le lien, la classe, la liste, l'ajouter, et nous devons le faire Acte de classe de l'Institut. Très bien, alors vérifions-le dans le navigateur. Si nous cliquons sur l'un des liens, vous verrez que l' arrière-plan est modifié. En fait, cela fonctionne très bien. Très bien, maintenant nous devons nous occuper des projets. Allons-y et sélectionnons à nouveau tous les projets en utilisant le sélecteur de requête, toutes les méthodes que nous devons spécifier ici, le nom de la classe, le projet Maintenant, je vais masquer tous les projets. Une fois que nous avons cliqué sur le lien du filtre, nous devons parcourir les projets, c' est-à-dire un nœud, au moins une collection, et nous devons masquer chaque projet. Pour ce faire, je vais sélectionner des projets suivis d' une méthode de fourrage. Je vais passer ici la fonction de rappel. L'argument sera le projet. Maintenant, afin de masquer les projets, je vais ajouter une nouvelle classe au projet. Ensuite, nous utiliserons cette classe en CSS. Pour masquer l'élément, nous avons besoin d'une liste de classes de projet. Et nous devons indiquer ici le nom de la classe. Dans ce cas, je vais appeler ça se cacher. Passons maintenant au fichier CSS et sélectionnons le projet avec la classe hide. Pour masquer l'élément, je vais utiliser display none. Maintenant, si nous cliquons sur l'un des liens, tous les projets seront chauffés. OK, nous devons maintenant masquer et afficher les projets en fonction des catégories. Et pour cela, nous devons utiliser ici une déclaration conditionnelle. Je veux dire si c'est une déclaration. Créons l'instruction if comme condition que je vais transmettre ici. Nous avons besoin de l'attribut filter link dot get. Je vais passer ici un attribut appelé type de données. Comme vous vous en souvenez, nous avons ajouté des attributs de type de données aux liens ainsi qu'aux projets. Si cette expression est égale aux attributs project get, alors au type de données. Cette condition si le type de données du lien de filtre cliqué correspond au type de données du projet En d'autres termes, il vérifie si le lien du filtre et le projet appartiennent à la catégorie ou au type. Si cette condition est vraie, nous devons continuer à afficher les projets correspondants. Mais ce n'est pas tout ce que nous avons à ajouter ici ou à déclarer, nous devons vérifier une autre condition qui sera filter link get attribute. Nous devons spécifier ici l'attribut du type de données. Si cela est égal à tous, cette partie de la condition vérifie si le type de données du lien de filtre cliqué est défini sur all Cette condition est utilisée pour indiquer que tous les projets doivent être affichés quel que soit leur type ou leur catégorie. Très bien, l'état de la déclaration est prêt. Si c'est vrai, alors nous devons afficher le projet. Par conséquent, nous devons supprimer la hauteur de classe du projet. Nous avons besoin de la liste des classes de projets, supprimez-la. Nous devons spécifier ici la hauteur du nom de classe. Très bien, donc je pense que c'est tout maintenant que la navigation devrait fonctionner. Cliquons, nous avons ici un problème. Examinons la page et vérifions l'onglet de la console. Nous avons une erreur qui indique que le projet n' est pas défini. Nous avons besoin de la 29e ligne. En fait, nous devons faire passer les déclarations ici. C'est pourquoi le projet n' est pas reconnu. Le problème doit maintenant être résolu. Vérifions-le. Si nous cliquons à nouveau, nous avons un problème. Impossible de lire les propriétés d'une suppression de lecture non définie. Voyons cette ligne de code ici, liste des classes avec la majuscule L. Maintenant, si je coche, tout fonctionnera parfaitement. Enfin, la navigation fonctionne bien. En fait, avec la section projet, c'est terminé. J'espère que c'était intéressant et que vous y apprendrez de nouvelles choses. Passons à la prochaine conférence. 30. Créer le balisage HTML pour la section Modèles: Très bien, dans la conférence précédente nous avons fini de travailler sur la section des projets. Il a l'air plutôt joli et fonctionne également bien. Je parle de cette navigation par filtre. Il est maintenant temps de passer à autre chose et de commencer à créer la section suivante. Jetons un coup d'œil au projet terminé. La section suivante sera une section appelée modèles. Cette section se compose de deux parties différentes. La première partie est ce que vous voyez ici en ce moment. Pour ce qui est de la deuxième partie, ce sera la vidéo. Allons-y et décrivons la section. La première partie comprendra les côtés gauche et droit. Sur le côté gauche, vous pouvez voir le paragraphe d'en-tête et le bas. Pour ce qui est du côté droit, vous pouvez voir ici trois images différentes. Et aussi en bas en bas, vous pouvez voir l' effet partiel des images. Nous allons commencer par la première partie , puis nous allons passer à la vidéo. Tout d'abord, nous devons créer le balisage HTML. Passons au code VS et insérons de nouveaux commentaires juste après les projets. Nous avons besoin de commentaires pour les modèles. Ensuite, je vais ouvrir les éléments de section avec les modèles de noms de classe. Comme je l'ai dit, la première partie de notre section sera composée de deux parties différentes. Je veux dire le côté gauche et le côté droit. Je vais ouvrir la balise p qui restera des modèles. Il se composera d'un paragraphe d'en-tête et d'un bouton. Je vais ouvrir les éléments de titre H one qui seront des modèles. Ensuite, nous avons besoin d'un paragraphe. Le paragraphe sera composé d'un texte factice. Je vais insérer ici, Lorem, puis le nombre de mots sera de 30 Nous avons ici le texte factice. Ensuite, nous avons besoin du type du fond, mais nous aurons également ici le nom de la classe, où il s' agira de modèles, PTN. En ce qui concerne le texte que je vais insérer à propos du modèle, d'accord, c'est tout. À propos du côté droit. Tout tourne autour du côté gauche, pas du côté droit. Maintenant, nous devons prendre soin du côté droit. Je vais ouvrir une balise profonde qui sera un modèle. Hein ? Nous allons avoir ici trois images différentes et un jeu de fesses. Insérons des éléments d'image. Je vais spécifier le chemin de l'image dont nous avons besoin pour quitter le dossier de la voiture, puis sélectionner les images. Je vais sélectionner Web 8, image 1. Ensuite, nous avons besoin de l'image Web deux, nous avons besoin de l'image Web huit. Très bien, passons aux images. Ensuite, nous avons besoin du bouton Play. Je vais ouvrir le tag avec le bouton du nom de la classe. Nous allons créer ce bâton en utilisant des téléphones allumés. J'ouvre une première balise de bouton avec le nom de classe Play PTN. Ensuite, je vais insérer vos éléments avec les classes FA solid FA play qui contiennent le balisage HTML sont prêtes pour la section des modèles J'en suis à la première partie de la section. Voici les éléments. Il est maintenant temps de passer à autre chose et de personnaliser ces éléments. Et pour cela, passons à la prochaine conférence. 31. Section de modèles de coiffure: Très bien, dans la leçon précédente, nous avons créé le balisage HTML pour la section des modèles, et maintenant nous devons styliser cette section Passons au code VS et insérons de nouveaux commentaires dans le fichier CSS. Nous avons besoin de Commons pour les modèles. Ensuite, je vais sélectionner la section des modèles. Tout d'abord, je vais définir la largeur et la hauteur. La largeur sera de 100 %. Quant à la hauteur, je vais la fixer à 100 % de hauteur de la fenêtre d'affichage Ce sera 100 % de la fenêtre d'affichage. Ensuite, je vais changer l'arrière-plan. Utilisons la fonction de gradient linéaire. La direction de la transition de couleur sera deux à gauche. Ensuite, je vais insérer votre premier appelant. Ça va être 8430. Ensuite, nous aurons la deuxième couleur. Ça va être 8430. C'est en fait la même couleur que pour le troisième appelant. Il va y en avoir 409. Jetons un coup d' œil au navigateur. Comme vous pouvez le constater, nous avons ici un classement linéaire en matières grasses. Ensuite, je vais cacher le côté droit pendant un moment. Sélectionnons les modèles, à droite. Ajoutez ici, n'en affichez aucun. Comme vous pouvez le constater, la partie droite est cachée et nous n'avons ici que le côté gauche. Tout d'abord, je vais personnaliser le côté gauche , puis nous nous occuperons également du côté droit. Allons-y et sélectionnons les modèles à gauche. Je vais régler la largeur à 50 %, elle occupera la moitié de la section. Ensuite, je vais régler la position sur absolue. Je vais positionner les modèles à gauche en fonction des éléments parents. Nous avons besoin de la position relative des modèles. Ensuite, je vais définir les propriétés en haut et à gauche. Les deux seront nuls. Créons également de l'espace à l'intérieur de l'élément à l' aide du rembourrage Je vais régler le rembourrage à 25 RAM en haut. Ensuite, nous aurons dix RAM sur le côté droit, zéro en bas et dix RAM sur le côté gauche. Encore une fois, nous avons ici les éléments, ainsi que l'espace à l'intérieur du côté gauche. Ensuite, je vais m' occuper du titre. Allons-y et sélectionnons des modèles. Un élément de titre de gauche. Tout d'abord, je vais définir la famille de téléphones. Téléphonons à Molly Cursive. Ensuite, je vais régler la taille du téléphone, il y aura sept RAM Transformons le texte en maquette d'opéra. Ensuite, nous avons besoin d'un espace entre les lettres. Réglons-le sur 2,5 RAM. Je vais donc changer de couleur. Ça va être blanc. Comme vous pouvez le constater, le titre est plutôt joli. Ajoutons-y d'autres styles. Je vais créer des effets d' ombre en utilisant l'ombre. Nous avons besoin ici de 0,5 RAM. Ensuite, la couleur sera RGBA, la couleur noire avec une opacité de 0,3 Enfin, je vais créer un espace au bas du titre en utilisant la marge inférieure, la valeur sera de trois RAM OK, alors passons au titre suivant. Je vais m'occuper du paragraphe. Allons-y et sélectionnons les modèles à gauche. Tout d'abord, je vais définir la largeur du paragraphe. Ce sera 60 RAM. Réglons ensuite la taille de police à 1,6 Rams. Je vais définir le poids de police dont nous avons besoin ici. Poids, ça va être 300 pour créer un espace entre les lettres. Réglons 2,1 RAM et changeons la couleur. La couleur sera 222. Nous avons ici le paragraphe. Ensuite, je vais réutiliser Tech Shadow. Copions cette ligne de code et ajoutons-la ici. Je vais diminuer l'opacité. Faisons en sorte que ce soit 0,1 RAM. En fait, pas de RAM mais juste 0,1. Enfin, lorsque vous entendez un fond plus grand pour créer l'espace en bas, ajoutons-le à sept. Bien, voyons le paragraphe suivant. Nous devons personnaliser le bas. Allons-y et sélectionnons des modèles. En fait, nous n'avons pas besoin des modèles qui restent. Nous avons besoin de modèles BTN, il a son nom de classe individuel. Tout d'abord, utilisons-nous 213 RAM. Ensuite, la hauteur du bas sera de six Ram. Ensuite, nous avons besoin de la couleur de fond. Je vais le mettre en blanc. Jetons un coup d'œil en bas. Nous devons nous débarrasser de la bordure par défaut et arrondir le bas. Nous avons besoin ici d'une bordure zéro, puis d'un rayon de bordure. Il y aura trois Ram. D'accord, après cela, nous devons nous occuper des polices de caractères. La taille de la police sera de 1,8 RAM. Alors je vais mettre le point en gras. Transformons également le texte en majuscules. Ensuite, nous avons besoin d'un espacement entre les lettres pour créer un espace entre les lettres Ce sera une RAM de 0,1 et cela changera également la couleur des téléphones. La couleur sera A, A, trois EC. Jetons un coup d'œil maintenant. Le bouton est plutôt joli. La seule chose que nous devons faire est de créer un effet d'ombre en utilisant Box Shadow. Nous avons besoin ici de 01 RAM, trois RAM, et la couleur sera RGBA avec une opacité de 0,1 également En plus de cela, nous devons souligner. OK, c'est tout, à propos du côté gauche, maintenant nous devons nous occuper du côté droit. Comme vous le savez maintenant, le côté droit est masqué. Je vais me débarrasser de Display None À partir d'ici. Je vais régler la largeur et la hauteur du côté droit. La largeur va être de 50 % Ensuite, nous avons besoin de hauteur, je vais la régler à 100 % je vais régler la position sur absolue. Les deux positions seront alors nulles. Nous devons définir la bonne position, qui sera également zéro. Comme vous pouvez le constater, les éléments sont placés sur le côté droit de la section. Ensuite, je vais vous présenter les images. Tout d'abord, je vais sélectionner toutes les images dont nous avons besoin ici, modèles, à droite, puis la pile d'images Les images auront deux styles communs. La première sera la position absolue. De plus, nous aurons ici un rayon de bordure et ce sera un Ram. Ensuite, nous devons personnaliser chaque image séparément. Allons-y et commençons par la première image dont nous avons besoin ici, le modèle de droite, suivi du nième sélecteur d'enfant Sélectionnez la première image, nous devons définir la largeur. Ça va faire 40 RAM. Je vais également définir la position de la première image. La position supérieure sera de 50 %. Ensuite, nous avons besoin de la bonne position, ce sera 25 %. Nous devons centrer l'image verticalement. Et pour cela, je vais utiliser transform translate Y avec une valeur de -50 % ici Prends la première image, celle-ci. Rendons-le visible en utilisant propriété index, car il s'est retrouvé derrière les autres images. Fixons l'index à un. Vous pouvez maintenant voir ici que la première image est entièrement visible. Ensuite, je vais créer un effet d' ombre en utilisant Po Shadow. Les valeurs seront de 0,27 Ram, et la couleur sera RGBA avec une opacité de 0,4. Je vais également diminuer légèrement l'opacité de l'image Réglons le paramètre 2.8 Encore une fois, nous avons ici la première image. Ça a l'air plutôt sympa. Passons à autre chose et personnalisons la deuxième image. En fait, je vais dupliquer ce code, puis changer le énième sélecteur de chat Il y en aura deux, la largeur sera de 20 RAM. Ensuite, nous devons positionner 20 % au lieu de la bonne position. Je vais utiliser la position de gauche. Et la valeur sera de 18 %. Nous n'avons pas besoin ici de transformer, traduire. Débarrassons-nous de ça. L'ombre de la boîte aura des valeurs différentes. Il nous faut ici 18 grammes. Quant à l'opacité, elle sera de 0,6 Élimine également l' opacité à partir d'ici. Ensuite, jetez un œil au navigateur. Nous avons ici la deuxième image. Il a l'air plutôt joli et il est correctement positionné. Ensuite, nous devons nous occuper de la troisième image. Je vais dupliquer ce code, changer le énième sélecteur de chat. Il y en aura trois. La largeur de l' image sera de sept. Ensuite, la position sera de 22 %. Ensuite, nous avons besoin de la bonne position, c'est 22 %. Ensuite, nous avons besoin de la bonne position, 5 %. Nous devons également modifier l'opacité de l'ombre de la boîte, elle sera de 0,5. Ensuite, ajoutez ici l'opacité, elle sera de 0,5 Je vais supprimer la propriété d'index parce que nous n'en avons pas besoin Je pense que c'est tout à propos de la troisième image. Jetons un coup d'œil. Comme vous pouvez le voir, les trois images sont alignées et elles sont plutôt jolies. OK, maintenant nous devons nous occuper du bouton de lecture. Allons-y et sélectionnons le bouton Development Play. Je vais définir la position comme absolue, puis il restera 57 % à la position La position sera de 23 %. Jetons un coup d'œil. Le bouton n'est pas visible. Elle s'est retrouvée derrière les images dont nous avons besoin ici, la propriété index. Fixons l'index à trois. Le bouton devrait maintenant être visible ici. Bouton. Ensuite, nous devons sélectionner Play BTN et définir la hauteur maximale Ça va faire 20 RAM. Je parle des deux propriétés. Ensuite, je vais changer la couleur de fond. Mettons-le en blanc. De plus, je vais arrondir l'élément en utilisant un rayon de bordure d'une valeur de 50 %. Ici, jouez à BTN I, le cercle Ensuite, nous devons nous débarrasser de la bordure par défaut du bas. Disons qu'il n'y a pas de frontière. Ensuite, nous avons besoin de Box Shadow. Les valeurs seront de 0,1 Ram. Dix RAM. Nous avons besoin de RGBA, de couleur noire avec une opacité de 0,6 Enfin, nous avons besoin de pointer le curseur ici Le cercle, le bas, est plutôt joli. Ensuite, nous devons créer le verso du bas. Cette partie, ce cercle transparent. Et je vais créer cet élément en utilisant quatre pseudo-éléments. Je vais sélectionner Play BTN, puis les quatre pseudo-éléments Définissons le contenu, il sera vide. Ensuite, nous avons besoin du poids et de la taille. Réglons les deux sur 26 RAM. Ensuite, je vais définir la couleur d'arrière-plan sur RGBA. Nous avons besoin ici de la couleur blanche, soit 25053 fois, mais nous avons besoin d'une opacité plus faible, 0,1 , soit 25053 fois, mais nous avons besoin d'une opacité plus faible, 0,1 , c'est vrai. Maintenant, avant, l'élément n'est pas visible car nous devons définir sa position. Réglons la position sur absolue. La première position sera de 50 %, puis la position de gauche sera également de 50 %. J'essaie de centrer l'élément pour cela. Comme vous le savez déjà, nous avons besoin ici transformer la traduction avec les valeurs -50% à nouveau -50% Maintenant, l' élément doit être visible Voici les éléments. Arrondissons-le en utilisant le rayon de bordure. Ce sera 50 %. Nous avons également besoin de Box Shadow. En fait, je vais chercher Box Shadow d'ici. Je veux dire les valeurs dont nous avons juste besoin pour changer l'opacité. Ce sera 0,3 Maintenant que nous pouvons voir clairement le cercle suivant, nous devons nous occuper de la phase. Il est trop petit. Maintenant, sélectionnons les éléments. Nous avons besoin de Play BTN. La taille du téléphone sera de sept RAM. Quant à la couleur de l'icône, je vais la régler sur 2025. Comme vous pouvez le voir, l'icône du téléphone est devenue plus grande et est plutôt jolie. Ensuite, nous devons créer les effets de survol. Les effets. Tout d'abord, je vais m' occuper du jeu BTN, sélectionnons-le avec le pointeur de la souris, je vais augmenter l' échelle de l'élément Pour cela, nous devons transformer l'échelle. Et ce sera 1,2. Nous avons besoin sa transition, le tout en 0,3 seconde. Maintenant, comme vous pouvez le voir, l'échelle augmente une fois que nous survolons le bouton Nous devons maintenant réduire légèrement les quatre éléments. Au survol, nous devons sélectionner Play. Btn avec survol suivi des éléments de force. Nous devons réduire l' échelle des éléments. Récupérons ce code à partir d'ici. Et faites en sorte que l'échelle 0,9 dont nous avons besoin ici fasse la transition de 0,3 seconde. Une fois que nous avons survolé le bas, l'échelle de l' élément diminuera Mais comme vous pouvez le constater, l' élément se déplace vers le bas. Cela se produit parce que vous êtes forcé à accéder à l'élément par défaut, transform translate est ici. Nous devons également copier, traduire et modifier ici. Copions la fonction de traduction et modifions-la ici. Maintenant, le problème doit être résolu. Comme vous pouvez le constater, tout fonctionne plutôt bien. Il faut maintenant créer l'effet polaire. Je veux dire, nous devons créer des éléments qui recouvriront partiellement les images avec un effet de flou Je vais créer avant les éléments de la section. Nous avons besoin ici de modèles suivis des quatre éléments. Définissons le contenu, il sera vide. Ensuite, nous avons besoin de hauteur, je vais les mettre tous les deux en tramway. Ensuite, nous avons besoin du contexte. Je vais utiliser la fonction de gradient linéaire. La direction de la transition de couleur sera deux en bas. Ensuite, la première couleur sera transparente. Ensuite, nous avons besoin d'une deuxième couleur, et ce sera huit pour 30, celle-ci. En ce qui concerne la troisième couleur, nous devons utiliser le même 84430 A dès maintenant avant que l' élément ne soit pas visible Parce qu'il s'est retrouvé derrière d'autres éléments, derrière l'élément de section. Pour rendre l' élément visible, nous avons besoin de l'index de valeur quatre. L'élément n'est pas visible. En fait, cela se produit parce que nous devons définir la position. Je l'ai oublié. Nous avons besoin d' une position absolue. Alors la position inférieure sera de -5 %. Quant à la bonne position, je vais dire deux, 10 %. Maintenant, l'élément devrait être visible Oui, c'est visible. Ensuite, nous devons utiliser une propriété appelée filtre, qui nous permettra de créer un effet polaire. Je vais utiliser un filtre avec fonction polaire et la valeur sera de sept. Comme vous pouvez le constater, nous avons ici un effet plutôt sympa et cool. Maintenant, nous avons un petit problème. Le bouton et le haut derrière l'élément précédent. Pour résoudre ce problème, nous devons augmenter la valeur de la propriété d'index. Pour le moment, il y en a trois. Faisons en cinq, ce qui est supérieur à quatre. Maintenant, le problème doit être résolu. OK ? Tout a l'air plutôt sympa. Et en fait, avec le style de la première partie de la section des modèles, nous avons terminé avec la suite. Nous devons intégrer la vidéo à cette section. Pour cela, passons à la prochaine conférence. 32. Créer le balisage HTML pour Video Player: Dans la conférence précédente, nous avons stylisé la section des modèles, je veux dire, la première partie de la section Il est maintenant temps de passer à autre chose et de passer à la deuxième partie. Je veux dire, nous devons adapter la vidéo à la section. Jetons un coup d'œil au projet terminé. Si je clique sur le bouton de lecture, la vidéo le fera. Si je clique sur le bouton de lecture, le jeu commencera à jouer. En fait, toutes les commandes fonctionnent bien. Ici, nous avons ici des options de vitesse. À l'heure actuelle, la vidéo est diffusée en mode normal. Si je clique, disons deux X, alors le jeu commencera à jouer rapidement. Ensuite, nous avons ici une photo. En mode photo, vous pouvez glisser-déposer cette petite fenêtre. Nous avons également ici le mode plein écran. Si je clique dessus, la vidéo sera diffusée en mode plein écran. Voilà, ce que nous allons faire, si je clique sur le bouton X, la vidéo se fermera. Allons-y et commençons à créer le balisage HTML. Dans le balisage HTML, nous allons cibler de nombreux éléments différents et suivre le cours. Je vais insérer de nouveaux commentaires juste au-dessus la balise de section finale dont nous avons besoin pour la vidéo. Ensuite, ouvrez l'élément, sera un conteneur vidéo dans lequel je vais insérer une autre profondeur et ce sera une vidéo. Je vais créer un motif de fermeture en X. C'est un tag ouvert avec la classe PTN. Insérez ensuite l'élément avec les classes une marque FA x solide. Ensuite, je vais en ouvrir un autre et ce sera un emballage de commandes Ensuite, nous avons besoin d'un autre tag DIP et ce sera chronologie vidéo dans laquelle nous aurons une zone de progression. Cet élément inclura la balise span avec zéro. De plus, nous aurons ici une autre baisse et cela fera partie du progrès. Cet élément sera vide. Ensuite, nous devons créer des commandes vidéo dans lesquelles nous aurons différentes options. Je veux dire les options sur le côté gauche, au centre et sur le côté droit, nous avons besoin d'éléments profonds avec les options des classes à gauche. Je vais dupliquer cette ligne de code deux fois. Comme je l'ai dit, nous avons besoin d' options au centre, également du côté droit. Faisons le point sur les options. En fait, nous avons besoin de vos options et non de vos options. Passons aux options sur le côté gauche du bouton qui comportera quatre volumes. Je vais ne pas sécuriser l' élément I avec les classes un volume élevé Ensuite, je vais créer une balise d'entrée. Le type va être range. Je vais également ajouter ici quelques attributs différents. Le premier sera un minimum. Je vais le mettre à zéro. Ensuite, nous aurons le maximum et ce sera un. Et nous avons également besoin d'un autre attribut appelé step. La valeur va être OK, c'est tout ce qui concerne la plage. Ensuite, je vais créer un autre développement qui sera un minuteur vidéo. À l'intérieur. Le minuteur vidéo comportera trois éléments de durée différents. La première sera à l'heure actuelle. Je vais aller à ins zéro. Dupliquons l'élément span deux fois. Le second sera un séparateur. Je vais insérer. Vers l'avant. Quant au troisième élément de span, il s'agira de la durée de la vidéo. Ensuite, je vais m' occuper des options du centre. Nous allons avoir ici trois boutons différents. Créons Button avec la classe sauter en arrière. Je vais insérer vos éléments. Ça va être FAS FA en arrière. Dupliquons le bouton deux fois. Le deuxième élément du bouton sera destiné à la pose de jeu. Changeons le nom de la classe. Pour l'élément, il s' agira de jouer au FASFA. En ce qui concerne les éléments du troisième bouton dont nous avons besoin ici, vers l'avant plutôt que vers l'arrière. Passons aux options au centre. Ensuite, nous avons des options sur le côté droit. Je vais insérer votre développement. Ce sera du contenu Play Back. Je vais insérer votre bouton, qui va indiquer la vitesse de lecture. Ici, je vais utiliser le symbole Google Material au lieu d'un élément. Allons dans le navigateur et recherchons les symboles Google Material. Nous devons visiter le site Web de Google Fonts, où nous avons récupéré les polices de caractères de Select here. Ce style, il va être arrondi. Ensuite, je vais rechercher une vidéo au ralenti. C'est l'icône dont nous avons besoin. Cliquons sur cette icône. Ensuite, je vais copier ce lien à partir d'ici. Nous devons coller le lien dans l'élément principal. Ensuite, nous devons copier cet élément span à partir d'ici. Insérons l'élément span à l'intérieur du bouton. Vérifiez ensuite si l' icône est affichée. Comme vous pouvez le voir, nous avons ici l'icône, elle est affichée. Ensuite, nous devons ajouter ici des options de vitesse. Dans l'ensemble, nous aurons besoin de cinq options de vitesse différentes. La première option sera deux x. Dupliquons le développement quatre fois et modifierons les options. Le second sera de 1,5 alors nous aurons ici la normale. La prochaine sera de 0,75 Quant à la dernière option de vitesse, elle sera de 0,5. De plus, nous devons également ajouter les attributs aux développements L'attribut sera la vitesse des données, et nous devons insérer ici les valeurs similaires dont nous avons besoin ici deux. Ensuite, 1,5 comme d'habitude, je vais en utiliser ici un. Ensuite, nous aurons ici 0,75 et enfin 0,5 C'est tout, propos des options de vitesse Ensuite, nous devons ajouter ici une icône pour l'image. En mode photo, nous avons besoin d'un bouton avec la classe Pick in Peak. Cela signifie qu'en fait, nous avons besoin d'ici pic pour pic. Cela signifie le mode image dans image. Encore une fois, nous devons récupérer l'icône d'ici. Cherchons image par image. C'est l'icône. Je vais prendre l'élément span et le coller ici, dans le bouton. Si nous vérifions le navigateur, vous verrez que l'icône s'affiche. Bien, nous avons ensuite besoin d' un autre bouton pour le mode plein écran. Ajoutons ici un écran de cluster. Je vais utiliser element avec les classes FA solid, FA, expand. Enfin, nous devons intégrer la vidéo. Nous devons insérer ici la vidéo elle-même. Nous devons ouvrir la balise vidéo dans l'attribut source. Nous devons spécifier le chemin du fichier. Tout d'abord, nous devons quitter le dossier actuel. Ensuite, nous devons sélectionner un dossier appelé vidéos. Et nous devons sélectionner ce fichier ici. Très bien, donc je pense que cela concerne le balisage HTML. J'espère que tout est correct ici. Nous avons tous les éléments en ce moment, tout est en désordre. Vous pouvez voir ici les éléments de l'en-tête. Et cela se produit parce que la vidéo parle de notre projet. C'est l'aperçu de notre projet. C'est pourquoi vous voyez ici les éléments de l'en-tête. Nous allons résoudre ces problèmes, nous personnaliserons ces éléments dans les prochaines conférences. Passons à autre chose. 33. Lecteur vidéo de coiffage: Dans la conférence précédente, nous avons préparé le balisage HDML pour la vidéo, je veux dire pour la deuxième partie de la section des modèles Il est maintenant temps de styliser ces éléments. heure actuelle, tout est foiré ici, mais nous allons bientôt y remédier La première chose que je vais faire avant de commencer à styliser ces éléments est de résoudre un petit problème. Comme vous pouvez le constater, cette icône n' est pas affichée ici. Si nous vérifions le code HTML, vous constaterez qu'il nous manque ici D. Je veux dire, nous avons besoin d'un visage solide. Maintenant, le problème doit être résolu. Comme vous pouvez le constater, l' icône s'affiche. Bien, passons maintenant au fichier CSS et créons de nouveaux communs pour la vidéo. Je vais sélectionner un conteneur vidéo. Tout d'abord, je vais définir la position de la vidéo. Ça va être réparé. Ensuite, je vais définir les propriétés en haut et à gauche. Je vais mettre le top à zéro. La position gauche sera alors zéro. Je vais définir la hauteur maximale. Réglons-les tous les deux à 100 %. Ensuite, je vais changer la couleur de fond. Réglons la couleur d'arrière-plan sur une valeur RGBA. Les valeurs seront de deux à sept, puis deux pour deux, puis nous aurons 253. Pour ce qui est de l'opacité, je vais la définir 2.9 Ici, nous avons le conteneur vidéo Mais c'est là que se trouve le problème. Il s'est retrouvé derrière certains éléments. Afin de résoudre ce problème, nous devons définir la propriété d'index. Réglons-le sur une valeur plus élevée. Disons 100. Maintenant, le problème est réglé. Le conteneur vidéo est créé, il est intitulé Suivant, je vais sélectionner la vidéo I, cet élément ici Sélectionnez Vidéo et définissons sa largeur. Elle sera de 90 m. Pour ce qui est de la hauteur, je vais régler la hauteur sur O. De plus, nous devons sélectionner la vidéo elle-même. Je parle de cet élément ici, sélectionnons-le en utilisant le nom de la balise et définissons-le avec une hauteur de 100 %. Dans ce cas, il occupera 100 % de la hauteur de son élément parent. Maintenant, nous avons la vidéo. La prochaine chose que je vais faire est de le placer au centre du récipient. Pour ce faire, je vais utiliser des livres en lin. Nous avons besoin de Display Flex, puis du centre de contenu Justify et du centre des articles. Maintenant, comme vous pouvez le voir, la vidéo est placée au centre de la page. Ensuite, je vais ajouter une petite ombre à la vidéo. Utilisons Box Shadow. Je vais insérer ici les valeurs suivantes. Nous avons besoin de zéro, puis d'un RAM. Ten Ram comme couleur. Je vais utiliser le RGBA. Les valeurs seront de 2052, puis de un à neuf également, l'opacité Je vais passer à 32.7 Comme vous pouvez le voir, la vidéo a un effet d'ombre agréable et cool Ensuite, je vais retirer l'emballage des commandes. Réglons avec 100 % , puis je vais définir la position sur absolue. Ensuite, je vais définir la position gauche, elle sera zéro. Pour ce qui est de la position inférieure, je vais la régler à deux, à 5,5 m, l'enveloppe des commandes et la partie supérieure en dessous Cela se produit parce que nous avons besoin d'une position relative pour la vidéo. Maintenant, comme vous pouvez le constater, le wrapper des commandes est correctement positionné. Pour mieux voir, je vais ajouter ici une couleur de fond temporaire. Supposons que vous ayez lu ici, nous avons l'emballage des commandes Très bien, débarrassons-nous de cette couleur de fond. La prochaine chose que je vais faire est de m' occuper de la chronologie de la vidéo. Nous allons sélectionner cet élément. Je vais définir la position absolue. Ensuite, je vais régler avec 100 %. Quant à la hauteur, elle sera de 0,7 RAM. Ensuite, je vais placer le curseur sur le pointeur. De plus, pour afficher cet élément, je vais utiliser à nouveau une couleur de fond temporaire. Mettons-le en rouge. Voici la chronologie de la vidéo. Ensuite, nous devons aborder le domaine des progrès. Je vais me débarrasser de cette couleur à partir d'ici. Ensuite, je vais sélectionner la zone de progression. Nous avons besoin de hauteur, ce sera 0,3 RAM. Ensuite, nous avons besoin de sa couleur de fond. Je vais utiliser la couleur RGBA. Ce sera de couleur blanche, mais avec une opacité plus faible, 0,6 Nous avons ici la zone de progression. Ensuite, je vais m' occuper des éléments de la travée. Je veux dire cet élément d'étendue, qui est placé dans la zone de progression, je vais sélectionner la zone de progression, suivie du T. Réglons la position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui est la zone de progression. Ensuite, je vais définir les propriétés en haut à gauche. heure actuelle, je vais passer à une ligne au centre de la zone de progression. Pour cela, je vais régler la position sur -2,5 frame. Ensuite, nous avons besoin de la position gauche, elle sera de 50 % Afin de centrer parfaitement l' élément, nous devons transformer la fonction translate x avec la valeur -50 %. Ensuite, je vais changer de couleur Ce sera 333 et définira également la taille de police. Je vais le régler sur 1,3 RAM. Nous avons ici l'élément Pan. Ensuite, je vais m' occuper de la barre de progression. Allons-y et sélectionnons la barre de progression. Je vais définir une largeur. Réglons-le à 50 % pendant un moment. Ensuite, la hauteur sera de 100 %. Je vais changer la couleur de fond. Ça va être 2289. C'est de couleur bleue. Ici, nous avons la barre de progression. Ensuite, je vais quitter le cercle de la barre de progression. Je vais créer ce cercle en utilisant avant l'élément dont nous avons besoin ici, la barre de progression, suivie des quatre, l'élément dont je vais mettre le contenu à vide. Ensuite, je vais régler la hauteur, toutes deux à 1,3 m. Ensuite, nous avons besoin d' un rayon de bordure de 50 %. Comme nous allons créer le cercle et changer la couleur de fond, je vais utiliser la même couleur bleue. Ensuite, nous avons besoin de la position pour afficher l'élément. La position sera absolue. Nous avons besoin de la position relative de l'élément de puissance. Alors les deux positions seront de 50 %. Ensuite, nous avons besoin de la bonne position. Je vais le mettre à zéro. Ensuite, afin de centrer l'élément verticalement, nous devons transformer la translation Y -50% Maintenant, le cercle doit être visible Nous l'avons ici. Très bien, ensuite je vais m'occuper des commandes vidéo. Allons-y et sélectionnons les commandes vidéo. Nous avons besoin de contrôles dans le conteneur. Tout d'abord, définissons la largeur. Ce sera 100 %. Ensuite, je vais aligner les éléments. Je veux dire des articles flexibles utilisant des livres flexibles. Nous avons besoin de Display Flex. Ensuite, nous avons besoin du centre des éléments de ligne afin de centrer les éléments flexibles verticalement. Et aussi, je vais créer de l'espace entre les éléments flexibles. En utilisant l'espace entre les deux, je veux dire justifier l'espace entre les contenus. Nous allons vérifier le résultat. Comme vous pouvez le constater, les commandes sont alignées. Ensuite, je vais créer de l'espace à l'intérieur de l' élément à l'aide du rembourrage Le rembourrage sera composé d' un bélier en haut et en bas et de deux béliers sur les côtés gauche et droit Je vais également changer la couleur de fond. Ce sera du RGBA, couleur noire avec une opacité de 0,5 OK, nous avons donc ici des commandes vidéo Ensuite, je vais m' occuper des options ici. Nous avons trois options, je veux dire les options sur le côté gauche. Ensuite, nous avons des options au centre et des options sur le côté droit. J'espère que tu t'en souviendras d'ici. Il reste des options. Ensuite, nous avons le centre d'options et les options à droite. Allons-y et sélectionnons Options. Je vais régler l' affichage pour qu'il soit flexible. Ensuite, je vais définir la largeur de chaque option. Je vais diviser 100 % par trois afin d' attribuer à chaque élément une largeur uniforme. Pour cela, nous calculons ensuite la fonction, cela nous permet de faire quelques calculs Comme je l'ai dit, il faut diviser 100 % par trois. Ensuite, je vais aligner les éléments au centre, en particulier en utilisant l'option aligner les éléments au centre. Bien, après cela, je vais sélectionner le deuxième élément d' options et le troisième élément d'options parce que nous avons besoin d'un alignement individuel pour ces options, je vais sélectionner les options enfant deux. Nous devons ici justifier le centre de contenu. Dupliquons ensuite ce code, changeons le sélecteur enfant. Il nous en faut trois. Quant à la valeur de la propriété justify content, elle sera flexible. Maintenant, comme vous pouvez le constater, les options sont parfaitement alignées. Maintenant, il faut prendre soin des boutons. Sélectionnons le bouton, je veux dire le bouton Options, je vais régler la hauteur à, puis nous devons supprimer la bordure par défaut par le bas. Définissons la bordure sur none. Ensuite, je vais me débarrasser de la couleur d'arrière-plan par défaut. Je vais définir la couleur de fond sur transparent. Puis changez la couleur du texte. Ça va être blanc. Enfin, nous avons besoin que le curseur soit pointeur. Très bien, comme vous pouvez le voir sur les boutons, les icônes sont plutôt jolies. Ensuite, je vais sélectionner des éléments. Nous avons besoin d'options. Je vais augmenter la taille du téléphone, disons à 1,9 m. Très bien, allons-y. Mais ensuite, je vais m' occuper de l'élément d'entrée, qui est une plage de volume. Je vais sélectionner Options de saisie. Je vais définir la hauteur. Ce sera 0,4 RAM, puis la largeur sera de 7,5. De plus, nous avons besoin d'un peu d'espace sur le côté droit en utilisant la marge, n'est-ce pas ? Disons-le à un Ram. Je pense que c'est l'élément d'entrée, la plage du volume. Plutôt sympa. Ensuite, nous devons prendre soin des éléments de durée du chronomètre vidéo. Allons-y et sélectionnons chronologie de la vidéo. Nous avons besoin d'un élément d'envergure. Réglons la couleur sur le blanc. Comme vous pouvez le constater, les éléments de la travée sont devenus blancs. Parmi les options de vitesse, je vais passer aux options de vitesse, définissons la largeur. Ce sera 9,5 RAM. Ensuite, nous avons besoin que la position soit absolue. Position relative des éléments parents. Dans ce cas, le parent est un contenu en cours de lecture, il nous faut ici la position relative. Ensuite, nous devons définir position inférieure pour les options de vitesse. Pour ce qui est de la position gauche, je vais la régler sur moins quatre RAM. Ensuite, je vais changer la couleur de fond. Il va être blanc. Ici, nous avons les options de vitesse. La prochaine chose que je vais faire est de le rendre légèrement arrondi. Réglons le rayon de bordure 2.4 run. C'est bon, c'est ça. En ce qui concerne les options de vitesse, le développement suivant, nous devons prendre soin de ces éléments de texte, je veux dire de la profondeur. Je vais sélectionner les options de vitesse, puis le développement. Réglons la taille du téléphone à 1,4 RAM. Ensuite, je vais créer de l'espace dans le développement. Disons du pudding, 2,5 grammes de RAM en plus. Ensuite, nous avons besoin de zéro sur le côté droit, de 0,5 en bas et de 1,5 RAM sur le côté gauche. Ensuite, utilisez à nouveau, plus près de 0,2 OK, maintenant les options de vitesse sont bien meilleures. Ensuite, nous devons activer l'une des options de vitesse. En fait, je vais faire en sorte que celui-ci soit actif normalement. L'option de vitesse par défaut que je vais ajouter au troisième développement, qui est normale, sera l'option active. Ensuite, je vais sélectionner ici l'option active. Changeons la couleur de fond. Ce sera la couleur bleue que nous avons utilisée récemment. Ensuite, il faut que la couleur soit blanche. D'accord, comme vous pouvez le voir, nous avons ici une option de vitesse par défaut agréable et cool, ce qui est normal. Bien, la dernière chose que je vais faire avec les commandes est de placer ces icônes parfaitement au centre. Je parle du centrage vertical, comme vous le voyez, ils ne sont pas parfaitement centrés Pour ce faire, je vais sélectionner ici Options puis Options Spin. Je vais régler W et hauteur à 100 %. Ensuite, je vais utiliser la hauteur de ligne. Je vais le configurer pour qu'il se plie. Maintenant, comme vous pouvez le constater, le problème est résolu. Très bien, donc la seule chose que je vais faire dans cette vidéo est de m'occuper du bouton de fermeture en X. Il devrait être placé ici. Allons-y et sélectionnons PTM. En fait, nous avons besoin d'un élément, je veux dire de l'icône. Je vais régler la position sur absolue. Ensuite, nous devons nous positionner à -6 %. La bonne position sera zéro Je vais également augmenter la taille de la police à 3 022,2 RAM Puis pointez le curseur. C'est bon, alors c'est tout. Nous avons fini de styliser la vidéo, elle est plutôt jolie. Ensuite, nous devons faire en sorte que cela fonctionne pour cela. Passons à la prochaine conférence. 34. Faire fonctionner Play/Pause Button: Dans la conférence précédente, nous avons fini de styliser le lecteur vidéo et nous devons maintenant le faire fonctionner. Pour cela, je vais utiliser Javascript. Passons au code VS et ouvrons le script ou le fichier JS. Je vais insérer de nouveaux commentaires pour la vidéo. Ensuite, je vais sélectionner quelques éléments différents. Le premier sera un conteneur vidéo. Je vais sélectionner cet élément en utilisant la méthode du sélecteur de requête Nous devons spécifier ici le nom de la classe, le conteneur vidéo. Ensuite, je vais sélectionner la vidéo elle-même. Je parle du fichier vidéo. Appelons la variable principale vidéo. Et sélectionnez cet élément en utilisant le nom du tag. Nous avons sélectionné cet élément ici, Vidéo également, je vais créer une autre variable et elle va être lue en BTN. Sélectionnons l'élément dont nous avons besoin ici, le nom de la classe, pose, et nous devons également saisir l'élément parce que c'est un téléphone, également un micro. D'accord, nous avons sélectionné trois éléments différents, le conteneur vidéo, la vidéo elle-même et le bouton de lecture. Nous devons maintenant ajouter un écouteur d'événements au bouton de lecture en cliquant sur un événement Une fois que nous avons cliqué sur le bouton de lecture, la vidéo devrait être jouée. Ensuite, au clic suivant, cela devrait être le cas. Je vais ajouter un écouteur d'événements au play BTN. Spécifiez ici l'événement de clic. Je vais également instituer une fonction de rappel. Cette fonction sera exécutée une fois que nous aurons cliqué sur le bouton. Nous devons vérifier si la vidéo est publiée ou non. Si c'est le cas, cela signifie que la vidéo n'est pas en cours de lecture. Si la vidéo est publiée, elle devrait commencer à être diffusée. Nous avons besoin de l'instruction if dans laquelle je vais insérer la condition suivante. Nous avons besoin d'un post vidéo principal. Il s'agit d'une propriété intégrée en script Java. Si c'est vrai, alors nous devrions regarder la vidéo. Pour cela, je vais utiliser fonction intégrée appelée argile. Bien, nous avons ensuite besoin déclaration L dans laquelle nous devons publier la vidéo. Nous avons besoin d'une méthode appelée post. Très bien, allons dans le navigateur et vérifions-le. Cliquez sur le bouton. Comme vous pouvez le constater, la vidéo est en cours de diffusion. Maintenant, une fois que j'ai cliqué sur le bouton, il s'arrête. Très bien, donc tout fonctionne bien. Ensuite, nous devons changer l'icône. Je veux dire, si la vidéo est en cours de diffusion, nous devrions afficher ici le bouton de pose. Et une fois que nous aurons posté la vidéo, nous devrions revenir ici avec le bouton de lecture. Nous devons remplacer les boutons, je veux dire les icônes. Pour cela, je vais ajouter even listener à la vidéo principale L'événement va se dérouler. De plus, je vais ajouter ici une fonction de rappel. Il sera exécuté une fois que la vidéo sera jouée. Si la vidéo est en cours de lecture, nous devons remplacer la classe de l'icône du téléphone. Nous avons besoin d'une liste de plateaux, puis nous devons utiliser la méthode de remplacement Nous devons remplacer la classe actuelle qui est une pièce de théâtre. Nous devons le remplacer par un post FA. Cela changera l'icône. Nous avons besoin de la même chose pour l'événement de pose dont nous avons besoin ici. Ensuite, je vais ajouter ici FAA play Très bien, voyons si cela fonctionne. Une fois que nous avons cliqué, la vidéo sera jouée et l'icône sera également modifiée. Comme vous pouvez le constater, tout fonctionne parfaitement. C'est bon, c'est tout pour le moment. Passons à la prochaine conférence. 35. Mettre à jour la barre de progression: Très bien, dans la conférence précédente, nous avons programmé le bouton de lecture. Une fois que j'ai cliqué dessus, la vidéo commence à jouer. L'icône changera également. Ensuite, si je clique sur le bouton Publier, la vidéo s'interrompt. Tout fonctionne parfaitement jusqu'à présent. Ensuite, nous devons prendre soin de la barre de progression. l'heure actuelle, la valeur par défaut est de 50 %. Nous devons la modifier et mettre à jour la largeur de la barre de progression en fonction de la progression de la vidéo. Revenons au fichier Javas. Tout d'abord, je vais sélectionner la barre de progression. Créons une nouvelle variable. Ce sera une barre de progression. Je vais sélectionner cet élément en utilisant, encore une fois, la méthode de sélection de requête Je vais spécifier ici le nom de la classe, la barre de progression. Ensuite, je vais modifier la largeur de la barre de progression. Comme je l'ai dit tout à l'heure, il est 50 % et je vais le ramener à zéro. Comme vous pouvez le constater, la largeur de la partie de progression est nulle. En fait, avant que l'élément sorte du lecteur vidéo, je vais changer de position. À l'heure actuelle, la position correcte est réglée à zéro et je vais la porter à -1,3 m. Maintenant, le problème est réglé Ensuite, je vais ajouter un écouteur d'événements à la vidéo principale Et l'événement sera une mise à jour temporelle. événement de mise à jour de l'heure se déclenche périodiquement au fur et à mesure que le temps de lecture des vidéos avance. Je vais ajouter un écouteur d'événements à la vidéo principale. Comme je l'ai dit, l'événement sera une mise à jour horaire. Nous avons besoin ici d'une fonction de rappel. Il sera exécuté une fois que le temps de lecture des vidéos aura progressé. Je vais utiliser la structuration et récupérer deux propriétés, l'heure actuelle et la durée, à partir de l'objet de l'événement Nous avons besoin de cibles ici. Et je vais placer ici l'objet de l' événement comme argument. Cette ligne de code extrait deux propriétés, heure actuelle et la durée, de l'objet cible pensé. Dans ce contexte, la cible représente l'élément vidéo, en l'occurrence la vidéo principale. L'heure actuelle représente la durée de lecture actuelle de la vidéo en secondes. Et la durée représente la durée totale de la vidéo, également en secondes. Je vais montrer ces deux propriétés dans la console. Insérons ici l' heure et la durée actuelles. Ensuite, je vais aller dans le navigateur, inspecter la page, vérifier l'onglet de la console. Une fois que j'ai cliqué sur le bouton de lecture, vous verrez ici l'heure actuelle affichée en secondes. Et nous avons également ici la durée totale, temps total de la vidéo. Bien, revenons au dossier Charles. Je vais me débarrasser de cette ligne de code. La prochaine chose que je vais faire est de définir la valeur en pourcentage de la partie progression. Pour cela, nous devons créer une nouvelle variable. Je vais l'appeler « personne ». Il sera égal à l' heure actuelle divisée par la durée. Il faut le multiplier par 100. Cette ligne calcule le pourcentage de la vidéo qui a été visionnée. Il divise l'heure actuelle par la durée et multiplie le résultat par 100 pour le convertir en pourcentage. Cette valeur représente l'état d'avancement de la lecture vidéo Nous devons maintenant ajouter cette valeur au style de la barre de progression. Pour cela, nous devons sélectionner la barre de progression. Ensuite, nous avons besoin de la propriété de style suivie de la largeur. Ensuite, je vais ouvrir, puis je vais ouvrir les chaînes de modèles. Nous devons passer ici la valeur en pourcentage que nous venons de définir. Nous avons besoin d'étalonnages suivis du signe du pourcentage. Cette ligne met à jour la largeur d' un élément de la barre de progression pour représenter visuellement la progression de la vidéo. Il définit la propriété de largeur du style CSS des barres de progression sur la valeur de la personne calculée, suivie du signe de pourcentage. Cela fera grossir ou rétrécir la barre de progression. Au fur et à mesure de la diffusion de la vidéo, ou six, tout est prêt à fonctionner. La barre de progression. Si je clique sur le bouton Play, la barre de progression sera mise à jour en conséquence, donc tout fonctionne correctement. Bien, parlons-en de cette vidéo, passons à la suivante. 36. Sauter une vidéo vers l'arrière et vers l'avant: Dans le cours précédent, nous avons programmé la barre de progression. Une fois que nous commençons à lire la vidéo, la barre de progression se met à jour automatiquement au fur et à mesure que la vidéo progresse. La prochaine chose que je vais faire est de programmer ces boutons de saut en avant et en arrière. Si nous examinons le projet terminé et que nous cliquons sur les boutons avant et arrière, comme vous pouvez le constater, ils fonctionnent. La vidéo est en cours de reliure. Passons au fichier geos et sélectionnons deux éléments, le phonomiconsan Les boutons permettent de passer en avant et de revenir en arrière. Je vais donc créer une variable et je vais l' appeler skip backward. Je vais sélectionner l'élément en utilisant la méthode du sélecteur de requête Nous devons ici revenir en arrière, puis passer aux éléments. Dupliquons ce code et changeons de l'arrière vers l'avant. Nous devons, d'accord, maintenant ajouter un écouteur d'événements aux deux boutons avec un événement de clic Ensuite, nous devons définir sauter la vidéo en ajoutant et en soustrayant un certain temps à l'heure actuelle de la Ajoutons un écouteur d'événements en arrière. Nous avons besoin d'un événement de clic. Ensuite, nous devons passer ici une fonction de rappel qui sera exécutée une fois que nous aurons cliqué en bas Comme je l'ai dit, nous devons soustraire un certain temps à l' heure actuelle de la vidéo Nous avons donc besoin de sa vidéo principale, à l'heure actuelle. Nous avons besoin de son heure actuelle, puis moins est égal, je vais soustraire 5 secondes. Maintenant, si je commence à lire la vidéo, puis si je clique sur le bouton retour, la vidéo sera ignorée de 5 secondes. Le bouton « Sauter en arrière » fonctionne correctement. Ensuite, nous devons faire de même avec le bouton Passer en avant. Je vais dupliquer ce code. Nous devons changer de variable, ça va être sauté en avant. Nous devons à nouveau ajouter ici 5 secondes. Ici, nous soustrayons 5 secondes de la durée de lecture actuelle de la vidéo Il recule la vidéo de 5 secondes lorsque vous cliquez sur le bouton « Passer en arrière » De la même manière, nous ajoutons 5 secondes au temps de lecture récurrent de la vidéo, et la vidéo avance rapidement de 5 secondes lorsque vous cliquez sur le bouton « Continuer à avancer ». Si nous vérifions les résultats et cliquons sur les boutons Ignorer, vous verrez que tout fonctionne parfaitement bien. Voyons quels sont les boutons de retour en arrière et de retour en arrière. Passons à la prochaine conférence. 37. Travailler sur Volume Button: Dans le cours précédent, nous avons programmé les boutons de saut en arrière et de saut en avant. Si nous visionnons la vidéo puis que nous cliquons sur ces boutons, ils ignoreront la vidéo. Ils fonctionnent bien. Ensuite, nous devons prendre soin du bouton de volume. Si nous examinons le projet terminé et que nous visionnons la vidéo, vous entendrez le son de la vidéo. Si je clique sur le bouton de volume, le son de la vidéo sera coupé Et vous pouvez également voir que l'icône est modifiée. Nous programmerons ce bouton dans cette conférence, puis nous nous occuperons du slider Très bien, passons au code VS. Tout d'abord, je vais ajouter des commentaires ici car le code devient de plus en plus volumineux. Et pour éviter toute confusion, ajoutons les commentaires. Je vais ajouter ici la barre de progression, la fin de la barre de progression. Ensuite, nous avons ici le bouton Play Pose. En fait, nous devons ajouter cette ligne ici. Et puis nous avons les boutons Ignorer. Très bien, il est maintenant temps de prendre soin du bouton de volume. Je vais sélectionner le volume. Batson. Changeons le nom. Ensuite, nous devons changer le nom de la classe qui sera le volume I du téléphone, donc l'icône. Ensuite, je vais ajouter ici de nouveaux commentaires. Je vais ajouter un écouteur d'événements au bouton de volume. Avec Click Event, nous avons besoin du volume BTN, d'ajouter un écouteur d'événements. Je vais insérer votre événement de clic. Et nous avons également besoin d'une fonction de rappel, qui sera exécutée une fois que nous aurons cliqué sur le bouton de volume Nous devons maintenant utiliser une instruction dans laquelle je vais vérifier l'état actuel du bouton de volume. Dans la condition, dans la déclaration, puis je vais l'expliquer. Nous n'avons pas besoin d'un opérateur suivi d'une liste de classes PCN de volume. Ensuite, je vais utiliser la méthode appelée contains. Je vais spécifier ici le nom de la classe qui correspond à un volume élevé. Cette condition vérifie si le volume du bouton de volume n'est pas élevé. La méthode class contains est utilisée pour déterminer si une classe est présente sur l'élément. Si le bouton n'a pas la classe de volume FA élevée, cela signifie que le volume n'est actuellement pas réglé sur le niveau le plus élevé. Si cette condition est vraie, alors nous devons régler le volume 2.5 Cela signifie que nous avons défini la propriété de volume de l' élément vidéo principal à 50% Ensuite, nous devons remplacer l'icône. Si cette condition est vraie, nous devons remplacer le téléphone. Donc, l'icône doit être remplacée par la liste des classes PTN du volume. Nous devons passer ici le point X du volume FA. Cette icône indique que le son est coupé. Nous avons maintenant besoin de ce nom de classe. Copions-le et collons-le ici. Bien, après cela, nous devons utiliser l'instruction L dans laquelle nous devons régler le volume de la vidéo à zéro. Nous devons couper le son. Nous avons besoin du volume vidéo principal. Il doit être égal à zéro. Nous devons également remplacer l'icône dont nous avons besoin ici, le volume FA élevé, puis le symbole du volume X. Permettez-moi de vous expliquer encore une fois. Cette ligne remplace la marque de classe FA volume X, qui représente une icône muette, par la marque FA volume élevé, qui représente une icône de volume élevé Cela met à jour visuellement l'icône du boson du volume pour indiquer que le volume est désormais à un niveau supérieur Quant à cette ligne, elle remplace la classe FA volume élevé par la marque FA volume X. Mise à jour visuelle de l'icône du bouton pour indiquer que le volume est coupé. Allons dans le navigateur et vérifions s'il fonctionne correctement. Je vais jouer la vidéo, le son. Si je clique sur le bouton volar, le son sera coupé et l'icône changera Comme vous pouvez le constater, tout fonctionne bien. Le bouton de volume est programmé. Ensuite, nous devons prendre soin de ce slider ici pour cela. Passons à la prochaine conférence. 38. Travailler sur Volume Slider: Dans le cours précédent, nous avons programmé le bouton de volume. Maintenant, comme je l'ai dit, nous devons nous occuper du curseur de volume, cet élément de saisie ici Jetons un coup d'œil au projet terminé et visionnons la vidéo. Vous pouvez interagir avec le curseur et modifier le volume en conséquence Si je fais glisser ce cercle vers la gauche, la vidéo sera coupée et l'icône changera en conséquence C'est ce que nous allons faire dans cette conférence. Revenons au code VS, sélectionnons les éléments d'entrée, mais tout d'abord, je vais modifier les commentaires. Laissons le volume ici car nous allons également ajouter le code du slider ici Je vais partir d' ici, juste du volume. Ensuite, je vais sélectionner les éléments d'entrée. Nous avons besoin d'un curseur de volume. Je vais changer le nom de la classe. Il faut qu'il parte. C'est la partie des options sur le côté gauche. Il faut entrer à gauche puis à droite, l'élément est sélectionné. Ensuite, nous devons ajouter un écouteur d'événements à l'élément dont nous avons besoin ici, le curseur de volume, nous devons ajouter un écouteur d'événements L'événement va être saisi. Cet événement est déclenché chaque fois que la valeur de l' élément d'entrée change. Dans ce cas, lorsque l'utilisateur interagit avec le curseur de volume Je vais transmettre votre entrée, puis nous avons besoin d'une fonction d'erreur qui sera exécutée une fois que l'événement se produira. Je vais maintenant définir le volume de la vidéo. Nous avons besoin du volume vidéo principal. Nous devons récupérer la valeur de l'objet cible. Nous avons besoin ici d'une valeur cible. Il faut le multiplier par un. Et je vais expliquer pourquoi nous faisons cela. Cette ligne définit la propriété de volume de l'élément vidéo principal sur la valeur actuelle du curseur de volume, qui dans ce cas consiste à cibler la multiplication par Cette conversion garantit que la valeur est traitée comme un nombre, et non comme une chaîne. Ensuite, nous devons utiliser l'instruction if. Nous avons besoin d'une déclaration avec la condition suivante. La vidéo principale est égale à zéro. Cette condition vérifie si le volume des vidéos est réglé sur zéro. En d'autres termes, s' il est désactivé ou non. Si le volume est coupé, nous devons mettre à jour l'icône du bouton de volume pour indiquer le mode muet Si le son n'est pas désactivé, nous devons mettre à jour l'icône pour indiquer un volume élevé Encore une fois, nous devons utiliser ces lignes. Nous avons besoin ici de cette ligne de code. Et puis dans l'instruction L, nous devons remplacer la marque X par une icône de volume élevé. Je vais passer cette ligne de code ici. Très bien, enfin, je vais ajouter ici une valeur du curseur de volume égale au volume vidéo principal Cette ligne de code définit la valeur du curseur de volume corresponde au niveau de volume actuel de l'élément vidéo principal Cela garantit que la position de la poignée du curseur reflète visuellement le réglage de volume actuel lorsque la page se charge ou lorsque le curseur est affiché pour la première fois Très bien, allons dans le navigateur et vérifions si tout fonctionne bien. Je vais regarder la vidéo. Ensuite, suivons le curseur. En fait, le curseur ne fonctionne pas. Vérifie le code. Il se peut qu'il y ait une erreur quelque part ici. Nous avons besoin du volume vidéo principal. J'ai oublié d'écrire cette propriété ici. Maintenant, je pense que le code devrait fonctionner. Vérifions-le. Maintenant, nous avons toujours un problème. Revenons au code VS. Le problème est qu'il nous manque ici l'objet de l'événement. Maintenant, je pense que cela devrait fonctionner. Oui Maintenant, ce curseur fonctionne correctement. Et nous pouvons interagir avec elle et modifier le volume en conséquence. Très bien, c'est tout pour le volume. Passons à la prochaine conférence. 39. Réguler les options de vitesse: Dans le cours précédent, nous avons réussi à contrôler le volume. Je veux dire, nous avons programmé le bouton de volume ainsi que le curseur de volume Et maintenant, il est temps de passer à autre chose et de régler les options de vitesse. Si nous examinons le projet terminé et que nous visionnons la vidéo, nous pouvons choisir ici n'importe quelle vitesse. Jouons à Two X. Comme vous pouvez le voir, la vidéo se joue plus rapidement. La même chose que nous avons avec une vitesse inférieure. La vidéo est diffusée à un rythme inférieur. OK ? C'est ce que nous allons faire dans cette conférence. Passons au code VS. Je vais sélectionner deux éléments différents. Le premier sera le bouton de vitesse. Je vais sélectionner l'élément est la méthode électronique d'investigation. Spécifiez ici le nom de la classe. Ce sera la vitesse de lecture. Nous avons besoin ici de l'élément span car le Batson est un élément de spin En plus de cela, je vais sélectionner les options de vitesse. Nous avons besoin ici d'options de vitesse. Je veux dire, le wrapper développe cet élément ici, nous devons spécifier le nom de la classe et ce seront des options de vitesse OK ? La première chose que je vais faire est donc de gérer l'affichage et le masquage des options de vitesse. Une fois que nous avons cliqué sur le bouton de vitesse , les options de vitesse sont maintenant visibles par défaut. À l'heure actuelle, les options de vitesse sont visibles par défaut. Nous devons le changer. Je vais ajouter Click Events au bouton de vitesse. En fait, nous avons besoin ici de nouveaux commentaires pour les options de vitesse. Ensuite, je vais ajouter un écouteur d'événements au bouton de vitesse avec un événement de clic Nous avons également besoin ici d'une fonction de rappel qui sera exécutée une fois que vous aurez cliqué sur le bouton de vitesse Je vais ajouter aux options Speed une nouvelle classe avec une méthode togal Je vais utiliser ce nom de classe dans le fichier CSS et nous allons définir de nouveaux styles pour ce nouveau nom de classe. Je vais utiliser les options de vitesse suivies de la propriété class list. Ensuite, comme je l'ai dit, nous avons besoin de la méthode togal, nous devons spécifier ici le nom de la classe Je vais appeler ça une émission. Ensuite, nous devons accéder au fichier CSS et sélectionner les options de vitesse avec la classe show nouvellement créée. Tout d'abord, nous devons masquer les options de vitesse. Je vais régler l'opacité à zéro et la visibilité à masquée Ensuite, nous avons besoin de ces deux propriétés avec des valeurs différentes. L'opacité en sera une, car la visibilité sera également visible Afin de rendre l'effet plus fluide, faisons simplement la transition. Nous avons besoin ici d'opacité. Ensuite, la durée sera de 0,15 seconde. De plus, je vais ajouter que tout va bien. Comme vous pouvez le constater, les options de vitesse sont masquées. Maintenant, une fois que j'ai cliqué sur le bouton, ils seront affichés. OK, tout fonctionne bien. La prochaine chose que je vais faire est de masquer les options de vitesse lorsque nous cliquons n'importe où sur la page, sur le document. Pour ce faire, je vais ajouter un écouteur d'événements au document Nous avons besoin d'un écouteur d'événements avec des événements de clic. Je vais également insérer ici une fonction de rappel. Je vais d'abord utiliser des déclarations. Je vais insérer ici la condition, puis je vais l'expliquer. Nous avons besoin que la cible ne soit pas égale à l'envergure. Ensuite, nous avons besoin de la deuxième condition avec notre opérateur. Ce sera le nom de la classe cible. N'est pas égal au nom de classe de l'élément span. Je veux dire celui-ci, les symboles matériels sont arrondis. Permettez-moi de vous expliquer ce que signifie cette condition. Cette condition vérifie si la cible des éléments cliqués n'est pas un élément span ou ne porte pas le nom de classe Material symbols rounded, en d'autres termes Il vérifie si l'élément sur lequel vous avez cliqué est autre chose qu'un élément de span spécifique Avec cette classe, je veux dire le nom de la classe, les symboles matériels ronds. Si cette condition est vraie, nous devons supprimer la classe Show des options de vitesse. Je vais récupérer ce code et changer la méthode togal en remove Maintenant, si nous allons dans le navigateur affichons les options de vitesse , puis cliquons n'importe où sur la page, quelque chose ne va pas ici. Vérifie l'onglet de la console. L'erreur indique que ce n' est pas défini car j'ai deviné que nous avons oublié d' insérer ici même l'objet en tant que paramètre Maintenant, le code devrait fonctionner. Affichons les options de vitesse , puis cliquons n'importe où sur la page. Maintenant, tout fonctionne bien. Bien, la prochaine chose que je vais faire est gérer la sélection de ces options. Nous devons sélectionner les développements qui sont placés dans le wrapper des options de vitesse I, nous devons sélectionner ces options ici Pour cela, je vais créer une nouvelle variable. Dupliquons ce code. Je vais changer de nom. Ce seront des options de vitesse, des éléments que nous devons ajouter ici de vous. Ensuite, je vais examiner les options de vitesse, les développements. Utilisons ici éléments d'options de vitesse variable nouvellement créés. Ensuite, nous avons besoin de chaque méthode qui nous permet d'itérer dans la collection Je vais ajouter ici fonction de rappel qui a besoin d'un paramètre Ce sera une option, c'est un élément courant dans la boucle. Je vais ajouter un écouteur d' à l'option avec événement de clic Ensuite, nous avons à nouveau besoin d'une fonction de rappel. Ce code parcourt chaque développement sélectionné à l' aide de la méthode du fourrage Pour chaque développement, qui représente une option de vitesse de lecture, il configure un écouteur d' événements par clic Ensuite, nous devons définir le taux de vitesse de lecture. Selon les options de vitesse cliquées. Nous avons besoin de votre taux de lecture vidéo principal. Il s'agit d'une propriété intégrée, en script Java. Il doit être égal à Option Dataset Do Speed. Nous avons défini le taux de lecture qui est égal à la vitesse du jeu de données d' options. Nous récupérons ici les valeurs de ces attributs. Comme vous vous en souvenez, nous avons ajouté un attribut de vitesse des données à chaque option de vitesse avec les valeurs appropriées Nous accédons à ces valeurs ici. Encore une fois, cette ligne indique que la propriété de vitesse de lecture de l'élément vidéo principal correspond à la valeur stockée dans l'attribut de vitesse des données de l'élément cliqué La propriété dataset vous permet d' accéder à des attributs de données personnalisés dans des éléments HTML. Dans ce cas, il est utilisé pour stocker les valeurs de vitesse de lecture associées à chaque option. Je parle de ces valeurs ici. OK, la prochaine chose que je vais faire est de changer l'option active. Comme vous le savez par défaut, l'option active est normale. Nous ajoutons de la classe à l'élément HTML. Cet élément est là. Vous pouvez voir ici l'option active de la classe. Nous devons changer cette classe. Nous devons supprimer cette classe de cet élément et l'ajouter à l'élément sur lequel vous avez cliqué Pour ce faire, nous avons besoin d'options de vitesse. Ensuite, nous devons sélectionner les éléments avec l'option class active. Nous avons besoin ici d'une option active. Et nous devons supprimer de la propriété de la classe, l'option active du nom de classe, et nous devons l'ajouter à l'option de clic. Nous avons besoin d'une liste de cours. la classe sera une option active. Très bien, je pense que c'est tout maintenant que le code devrait fonctionner. Sélectionnons l'option. Jouons la vidéo. Et puis sélectionnez l'option Vitesse. Il y a quelque chose qui ne va pas ici. Vérifions les options de vitesse de l'onglet de la console, les éléments. Ce fourrage n'est pas une fonction. Examinons cette ligne de code : options de vitesse, articles, fourrage. En fait, ici, tout semble correct. Nous allons vérifier les variables. Oui, nous avons besoin ici du sélecteur de requête, de la méthode All, car nous sélectionnons cinq éléments différents Voyons maintenant les résultats. Lisons l'option Select Speed de la vidéo. Ça ne marche toujours pas. Maintenant, je vais vérifier à nouveau le code. Je pense qu'ici tout semble correct. Le problème, c'est que nous n' arrivons pas ici. Toute erreur. Je vais vérifier si l' événement de clic fonctionne correctement. Je vais courir vers la console, cet élément est là. Je vais cliquer sur l'option de vitesse , puis cocher la case Console. Nous n'obtenons pas les résultats ici. Cela signifie que l' événement de clic ne fonctionne pas ici. Peut-être que les options de vitesse se retrouvent derrière certains éléments, c'est pourquoi l' événement de clic ne fonctionne pas. Je vais essayer ici d'ajouter une propriété d'index avec une valeur plus élevée. Disons dix. Voyons si cela fonctionne. C'était le problème. Maintenant, tout fonctionne bien. Nous pouvons modifier les options de vitesse sans aucun problème. Très bien, il s' agit donc des options de vitesse. Je suis désolée pour les derniers malentendus, mais en fait je pense que ce n'est pas C'est bon pour vous, pour les étudiants, car lorsque vous écrivez le code, vous rencontrerez de telles situations. Souvent, vous devez savoir comment résoudre le problème, trouver la boîte, etc. OK, c'est ça. Passons à la prochaine conférence. 40. Modes d'image et plein écran: Lors de la dernière conférence, nous avons programmé les options de vitesse. Nous devons maintenant passer à autre chose et prendre soin de ces deux boutons. Le premier est le mode image dans image. Quant au second, il s'agit d'un mode plein écran. Jetons un coup d'œil au projet terminé. Une fois que nous avons cliqué sur l' image en mode image, nous arriverons à cette petite fenêtre, vous pourrez suivre et déposer la fenêtre. C'est ainsi que fonctionne le mode image dans image. En ce qui concerne le mode plein écran, si nous cliquons sur le cycle ici , la vidéo sera jouée. En mode plein écran, vous pouvez réduire la fenêtre à partir d'ici, d'accord ? Nous allons donc programmer ces deux boutons dans cette conférence. Passons au code VS. Tout d'abord, je vais créer une nouvelle variable. Disons que c'est une photo que je choisis, choisissez PTN. Nous devons le sélectionner en utilisant la méthode du sélecteur de requête. Spécifiez ici le nom de la classe. Choisissez, suivi du panel dont nous avons besoin ici. Réflexions. Ensuite, je vais créer ici de nouveaux commentaires. En fait, débarrassons-nous de cette ligne de code à partir d'ici. Nous avons besoin de commentaires pour le mode image dans image, je vais ajouter un écouteur d' événements à la variable image dans image BTN la variable que nous venons Ajoutons ici un écouteur d'images avec événement de clic. De plus, nous avons besoin ici d'une fonction de rappel pour pouvoir lire la vidéo en image En mode image, nous devons utiliser l'une des fonctions Java intégrées C'est ce qu'on appelle demander une image dans une image. Nous devons joindre cette méthode à la vidéo principale. Comme je l'ai dit, nous avons besoin d' une demande photo par image. Très bien, allons dans le navigateur et cliquez sur cette icône ici. Comme vous pouvez le voir, nous avons ici une petite fenêtre que vous pouvez faire glisser. Et la fenêtre image en mode image fonctionne parfaitement. OK. C'est maintenant le mode plein écran. Ensuite, passons au code VS et créons une nouvelle variable. Je vais dupliquer cette ligne de code. Nous avons besoin d'un BTN en plein écran et je vais changer ici le nom de la classe Nous avons besoin d'un élément I en plein écran. Ensuite, je vais créer de nouveaux commentaires pour le mode plein écran. En fait, je vais récupérer ce code. Collons-le ici et changeons le bouton dont nous avons besoin ici, BTN en plein écran En ce qui concerne la méthode au lieu de la méthode de demande, nous avons besoin de la méthode de demande en plein écran. Passons maintenant au navigateur et cliquez sur le bouton plein écran. Cela ne fonctionne pas. Nous avons ici une erreur : impossible de lire les propriétés de. Maintenant, vérifions le code. Plein écran, BTN, vérifions la variable dont nous avons ici le type Tout ce dont nous avons besoin, c'est du double L. Maintenant, cela devrait fonctionner. Cliquons sur l'icône en plein écran. Et oui, nous avons ici le mode plein écran. Cela fonctionne très bien. Très bien, c'est tout ce qui concerne les modes image et plein écran, les deux fonctionnent bien Ensuite, nous devons nous occuper de la chronologie de la vidéo. Passons à la prochaine conférence. 41. Travailler sur la timeline vidéo: Dans la conférence précédente, nous avons programmé les boutons d'image et de plein écran Les deux modes fonctionnent correctement. Nous devons maintenant passer à autre chose et nous occuper de la chronologie de la vidéo. Je veux dire, nous devons dynamiser la partie progrès. Et nous devons également afficher l'heure actuelle de la vidéo ainsi que la durée de la vidéo. Jetons un coup d'œil au projet terminé. Comme vous pouvez le voir, nous avons ici la durée de la vidéo. Si nous commençons à regarder la vidéo, l'heure actuelle s' affichera comme si je cliquais ici n'importe où. Ensuite, nous mettrons à jour la barre de progression . OK, c'est ça. Ce que nous allons faire dans cette conférence. Passons au code VS. Je vais sélectionner un élément appelé chronologie de la vidéo. Créons une variable et appelons-la chronologie de la vidéo. Je vais sélectionner cet élément en utilisant la méthode du sélecteur de requête Nous devons indiquer ici le nom de la classe. Ce sera une chronologie vidéo. Ensuite, je vais insérer les commentaires pour la chronologie de la vidéo. Ensuite, je vais ajouter un écouteur d'événements à la chronologie de la vidéo avec un événement de clic Je tiens à vous rappeler où se trouve cet élément dans le fichier HTML, ici se trouve la chronologie de la vidéo. Il enveloppe la zone de progression. Je vais ajouter un écouteur d'événements à la chronologie de la vidéo. Utilisons cette méthode d' écoute d'événements , puis spécifions ici l'événement de clic Ensuite, nous avons besoin d'une fonction de rappel qui sera exécutée une fois que vous aurez cliqué sur la chronologie Je vais définir une nouvelle variable qui sera utilisée comme chronologie. Je vais le rendre égal à la largeur du client de la chronologie de la vidéo. Cette ligne calcule la largeur de l'élément chronologique de la vidéo et le stocke dans une variable Cette largeur représente la largeur totale de la chronologie, qui est nécessaire pour déterminer l'endroit où l'utilisateur a cliqué par rapport à la chronologie Pour que les choses soient claires, je vais lancer sur la console cette largeur de ligne de temps variable. Examinons la page. En fait, je vais attacher cette fenêtre au sommet actuel. Si je clique sur la chronologie de la vidéo , nous obtiendrons 900 pixels. La largeur totale de la chronologie vidéo est de 900 pixels. Encore une fois, la propriété de largeur du client calcule la largeur de l'élément Très bien, débarrassons-nous de cette ligne de code. Ensuite, je vais définir l'heure actuelle de la vidéo. Nous avons besoin de l'heure actuelle de la vidéo principale. Elle doit être égale à l'expression suivante que je vais utiliser ici, offset x. Je vais expliquer ces choses dans un instant. Nous avons besoin de sa chronologie avec la variable que nous avons définie ici. Ensuite, nous devons le multiplier par la durée de la vidéo principale. Laissez-moi vous expliquer ce qui se passe ici. Cette ligne calcule et définit la durée de lecture actuelle de l'élément vidéo principal en fonction endroit où l'utilisateur a cliqué sur la chronologie Voici comment cela fonctionne. Do offset X représente la position horizontale de l'événement de clic dans l'élément de chronologie vidéo. Il indique l'endroit où l'utilisateur a cliqué le long de la chronologie. Je vais courir jusqu'au point de la console. Offset X. En fait, nous devons passer son paramètre. Si je clique sur la chronologie de la vidéo, nous obtiendrons la position où l'utilisateur clique le long de la chronologie. Nous arrivons là, les positions exactes en pixels. Bien, nous avons ensuite ici le décalage x divisé par la chronologie. Cela permet de calculer la position relative du clic dans la chronologie en tant que fraction de la largeur totale de la chronologie Cette fraction est comprise entre 0 et 1 Ensuite, nous avons la multiplication par la durée de la vidéo principale Il représente la durée totale de la vidéo en secondes. Le résultat du calcul détermine la position exacte de lecture de la vidéo. Il définit la propriété temporelle actuelle de la vidéo principale sur cette position, permettant ainsi à l'utilisateur rechercher le point de clic dans la vidéo. Si je passe à la vidéo principale de la console, que je fais l'heure actuelle, puis si nous allons dans le navigateur et que nous cliquons sur la chronologie, nous obtiendrons l'heure actuelle de la vidéo en secondes. OK. Ensuite, je vais créer une nouvelle variable. Je vais appeler ça l'heure de la vidéo. Sélectionnons l'élément à l'aide de la méthode de sélection de requête. Je vais préciser ici le nom de la classe, heure actuelle. Je vais vous rappeler où se trouve cet élément. Nous avons ici l'heure actuelle. Il s'agit d'un élément d'envergure. Par défaut, nous avons des zéros ici. Nous devons maintenant afficher l'heure actuelle de la vidéo dans cet élément. Nous devons afficher l'heure actuelle ici. Pour cela, nous devons insérer l'heure actuelle de la vidéo, le texte intérieur étant égal à l'heure actuelle. Allons dans le navigateur et commençons à lire la vidéo. Comme vous pouvez le constater, nous arrivons ici quelques secondes. Mais nous devons formater cette valeur. Nous n'en avons pas besoin. Nous devons afficher l'heure actuelle dans le format tel que nous l'avons ici dans la version finale. Nous avons besoin de ce format ici. Pour ce faire, je vais revenir au code VS. Je vais créer une nouvelle fonction. En fait, je vais insérer cette fonction ici. Appelons la fonction format time. Ce sera une fonction de flèche. Je vais insérer ici un paramètre. Ça va être le moment. La première chose que je vais faire est de définir les secondes. Nous avons besoin d'une nouvelle variable appelée secondes. Ce sera égal à t floor et nous devons insérer ici le module de temps 60 Cette ligne calcule les secondes restantes en prenant le module de la valeur temporelle. Avec 60, cela garantit que les secondes contiennent une valeur 0 à 59. De la même manière que nous devons définir les secondes, dupliquons cette ligne de code dont nous avons besoin ici Minutes, nous devons diviser le temps par 60, puis nous avons besoin du module 60 Cette ligne calcule le nombre de minutes en divisant la valeur temporelle par 60 et en prenant la valeur plancher L'opération du module est à nouveau utilisée pour garantir que minutes sont comprises entre 0 et 59. Ensuite, nous devons définir les heures Je vais dupliquer cette ligne de code. Nous avons besoin d'heures, puis de calculs pour le temps divisé par 3 600 Nous n'en avons plus besoin ici Module 60, cette ligne calcule le nombre d'heures en divisant la valeur du temps par 3 630 600 signifie que 60 secondes sont multipliées par 60 minutes. Il donne le nombre total d' heures et la valeur temporelle. Ensuite, nous devons nous assurer que les secondes, les minutes et les heures à un chiffre sont formatées avec un zéro en tête pour garantir la cohérence de l'affichage Par exemple, si les secondes sont inférieures à dix, nous devons y ajouter un zéro initial. Pour ce faire, les secondes sont égales à 2 secondes, alors la condition est inférieure à dix. Nous avons besoin de son point d'interrogation. Si cette condition est vraie, alors nous avons besoin ici des chaînes de modèles zéro suivies des secondes. Si c'est faux, nous n' avons besoin que de quelques secondes. Nous avons également besoin de la même chose pour les minutes et les heures. Dupliquons cette ligne de code deux fois ici, minutes puis en heures. Bien, la prochaine chose que je vais faire est d'utiliser l'instruction if, où nous devons vérifier si les heures sont égales à zéro. Nous avons besoin d'une déclaration et nous devons vérifier les heures d'ouverture. Nous avons besoin d'heures égales à zéro. Si cette condition est vraie, nous devons renvoyer le résultat suivant dont nous avons besoin ici, en minutes et en secondes. Ensuite, nous devons rentrer. Récupérons ce code à partir d' ici. Collez-le ici. Et je vais ajouter ici les heures avec colonne, d'accord ? L' instruction conditionnelle suivante vérifie si la valeur des heures est égale à zéro. Si c'est le cas, cela signifie que le temps est inférieur à 1 heure. Et la fonction renvoie une chaîne au format minutes et secondes. Si le nombre d'heures est supérieur à zéro, cela signifie que la valeur horaire contient des heures . Et la fonction renvoie une chaîne au format heures, minutes et secondes. Maintenant, une fois que la fonction est prête, nous pouvons formater l'heure actuelle. Je vais appeler la fonction ici comme argument je vais insérer ici, heure actuelle. Alors maintenant, l'heure actuelle devrait être visible. Jouons la vidéo. Oups, nous avons ici une erreur. La nôtre n'est pas définie. Vérifions la déclaration. Oui, nous avons ici une faute de frappe. Nous avons besoin d'heures sans. J'ai fait cette erreur plusieurs fois. Maintenant, vérifions-le. Oui, nous avons ici l'heure actuelle mise à jour. OK, revenons à l'heure actuelle. Ensuite, nous devons nous occuper de la durée de la vidéo. Revenons au code VS. Je vais créer une nouvelle variable. Appelons cela la durée de la vidéo. Je vais sélectionner cet élément en utilisant, encore une fois, la méthode de sélection de requête Spécifiez ici le nom de la classe, la durée de la vidéo. Nous avons cet élément à côté de l'heure actuelle, et le séparateur ici est la durée de la vidéo. Je vais ajouter un écouteur d'événements à la durée de la vidéo. Je suis désolée, je vais voir la vidéo principale. Les données de l'événement vont être chargées. L' événement de données chargées est déclenché lorsque la vidéo a chargé suffisamment de données pour commencer la lecture. Ensuite, nous devons interférer avec une fonction de rappel. Cette fonction sera exécutée une fois que suffisamment de données seront chargées pour commencer la lecture. Ici, nous devons définir le contenu de la durée de la vidéo dont nous avons besoin. Ici, dans notre propriété de texte, ce sera la durée de la vidéo principale. OK, vérifions les résultats. Comme vous pouvez le voir, nous avons ici le nombre total de secondes. Nous devons le transformer dans le même format que celui que nous utilisons actuellement. Pour cela, il suffit d' appeler la fonction format time. Et nous devons utiliser la durée principale de la vidéo comme argument. Si nous vérifions les résultats, vous verrez que l'heure actuelle est affichée dans le même format que celui que nous avons utilisé pour l'heure actuelle. OK, c'est tout pour le moment. Passons à la prochaine conférence. 42. Créer une barre de progression glissable: Dans la conférence précédente, nous avons travaillé sur la chronologie de la vidéo. Je veux dire, l'heure actuelle de la vidéo et aussi la durée de la vidéo. Les deux fonctionnent bien et ils sont mis à jour une fois que nous avons visionné la vidéo. Ensuite, nous devons prendre soin de la barre de progression. Nous devons créer la barre de progression déplaçable. Nous devons également prendre soin de cette fois. Ici, nous devons mettre à jour l'heure actuelle. Une fois que nous avons fait glisser la barre de progression, examinons les projets terminés. Comme vous pouvez le constater, je peux faire glisser la barre de progression et l' heure actuelle est mise à jour en conséquence. Nous devons le créer. En fait, dans cette vidéo, passons au code VS. La première chose que je vais faire est d'ajouter un écouteur d'événements à la chronologie de la vidéo L'événement va être une étape importante. L'événement marquant est déclenché dès que le bouton de la souris est enfoncé sur un élément. Elle est plus spécifique à l'action qui consiste à appuyer sur le bouton de la souris sans qu'il soit nécessaire de relâcher le bouton. Cet événement est souvent utilisé pour détecter le début d' une interaction utilisateur, exemple le fait qu'il commence à faire glisser une fin. En outre, cet événement se produit avant le clic si la souris n'est pas éloignée de la fin. La différence entre l'événement click et l'événement mousedown est la suivante L'événement de clic est déclenché après un clic complet, qui consiste à appuyer puis relâcher le bouton de la souris sur un élément. Cela nécessite que les événements souris vers le bas et vers le haut se produisent sur le même élément. outre, l'événement de clic est généralement utilisé pour les actions qui doivent se produire une fois qu'un utilisateur a sélectionné ou activé un élément, comme appuyer sur le bouton pour soumettre un formulaire, etc. Je vais maintenant passer ici une fonction de rappel. Ensuite, nous avons à nouveau besoin d'une chronologie vidéo avec un écouteur d'événements. Dans ce cas, l'événement sera un déplacement de la souris. Nous ajoutons maintenant un écouteur d'image pour l'événement de déplacement de la souris Nous devons maintenant appeler la fonction appelée barre de progression Dale. le moment, cette fonction n' est pas encore créée, mais nous allons la créer dans un instant. Nous ajoutons un écouteur d'événements pour l'événement de déplacement de la souris. Lorsque l'utilisateur déplace la souris, la fonction de barre de progression déplaçable est appelée Cela mettra à jour la barre de progression et la durée de la vidéo au fur et à mesure que l'utilisateur fait glisser le pointeur. Je vais créer cette fonction. Créons une nouvelle variable, puis utilisons ce nom ici. Nous avons besoin ici d'un objet événement, puis d'une fonction flèche. La première chose que je vais faire est saisir ces deux lignes à partir d'ici. Comme vous vous en souvenez, cette ligne de code enregistre la largeur de l'élément chronologique de la vidéo. Quant à la deuxième ligne de code, elle calcule et met à jour l'heure actuelle de la vidéo en fonction de l'endroit où l'utilisateur clique sur la chronologie Outre ces deux lignes de code, je vais passer ici, largeur du style de barre de progression égale au décalage x. Et nous avons besoin ici de pixels. Nous trouvons maintenant la largeur de la barre de progression. décalage x indique le décalage horizontal du pointeur de la souris entre l'événement et le bord de mise du nœud cible. Régler efficacement la barre de progression au point où l' utilisateur clique ou fait glisser le pointeur. Maintenant, si nous allons dans le navigateur et dans la barre de progression, cela fonctionnera. Comme vous pouvez le constater, nous pouvons maintenant faire glisser la barre de progression. J'appuie sur le bouton de la souris, mais si je survole simplement la chronologie de la vidéo, je pourrai faire glisser la barre de progression Nous n'en avons pas besoin. Nous n'avons pas besoin de faire glisser la barre de progression au survol, nous devons faire glisser la barre de progression une fois que nous avons cliqué sur la chronologie de la vidéo Afin de résoudre ce problème, je vais dupliquer ce code. Nous devons transformer la chronologie de la vidéo en conteneur vidéo. Cet élément enveloppe l' intégralité du contenu de la vidéo. Je vais maintenant supprimer l' écouteur d'événements de la chronologie vidéo OK, maintenant le problème devrait être résolu. En fait, nous avons besoin de la souris vers le haut et de la souris vers le bas. OK, maintenant allons dans le navigateur et vérifions les résultats. Maintenant, j'appuie sur le bouton de la souris, mais une fois que je l'ai relâché et que j'ai simplement survolé la chronologie de la vidéo, nous ne pourrons plus suivre la barre de progression OK, donc le problème est réglé. Ensuite, nous devons mettre à jour l'heure actuelle de la vidéo. Pour cela, je vais utiliser cette ligne de code. Insérons-le ici. Nous devons ajouter ici la vidéo principale. Maintenant, si je suis la barre de progression, vous verrez que l' heure actuelle est mise à jour en conséquence. Cela fonctionne très bien. Bien, ensuite nous devons nous occuper de l'heure actuelle. Une fois que nous avons suivi la barre de progression, je veux dire, nous devons travailler sur cet élément ici. Comme vous vous en souvenez, il s'agit d'un élément d'envergure. Dans la zone de progression, nous devons nous occuper de cet élément. Je vais ajouter un écouteur d'événements à la chronologie de la vidéo. L'événement va être un mouvement de souris. Ensuite, nous avons besoin d'objets d'événements suivis de la fonction de rappel. Je vais sélectionner cet élément. Nous devons créer la variable, ce sera le temps de progression. Nous avons besoin ici d'une sélection de documents. Spécifiez ici l' élément appelé zone de progression. Ensuite, nous avons besoin d'un élément span. Ensuite, je vais définir le décalage x de l'élément. Créons un décalage x. Il doit être égal au décalage X. Nous obtenons ici le décalage horizontal du pointeur de la souris entre l'événement et le bord du pudding de l'élément cible, à savoir la chronologie de la vidéo Ensuite, nous devons définir la position gauche du temps de progression. Nous avons besoin ici du style de temps de progression à gauche. Il va être décalé X, et nous avons besoin de pixels. Nous définissons maintenant la propriété CSS gauche de l'élément de progression sur la valeur X du décalage. Déplacer l'aperçu temporel pour aligner avec le curseur de la souris sur la chronologie. Si je vais dans le navigateur et curseur sur la chronologie de la vidéo, vous pouvez voir que l'élément span se déplace le long de la chronologie de la vidéo Ensuite, nous devons définir la largeur de la ligne de temps. Je vais copier cette ligne de code. Nous devons maintenant définir l'heure actuelle de l'élément span. Créons une variable. Ce sera l'heure de la barre de progression. Je vais corriger cette valeur ici. Nous calculons maintenant le temps correspondant à la position actuelle de la souris sur la chronologie. Pour ce faire, il divise la souris dont la position x est définie par la largeur totale de la chronologie, pour obtenir une fraction qui pour obtenir une fraction qui représente la position de la souris sur la chronologie. Cette fraction est ensuite multipliée par la durée totale de la vidéo principale pour obtenir le temps correspondant dans la vidéo. Nous devons maintenant formater l' heure et l'afficher. Je vais attacher à la propriété de texte interne du temps de progression. Ensuite, nous avons besoin de l'heure du formatage. Je vais transmettre ici les progrès à temps partiel. Très bien, passons au navigateur. Comme vous pouvez le constater, une fois que je passe le curseur sur la chronologie de la vidéo, l'heure s'actualise Mais nous avons ici un petit problème. Par défaut, nous devons masquer l'heure ici ainsi que le cercle. Ensuite, une fois que nous avons survolé la chronologie de la vidéo, elles devraient apparaître Nous avons besoin de CSS. Je vais sélectionner les deux éléments. Zone de progression, étendue. De plus, nous avons besoin d' une barre de progression située avant l'élément. Je vais les masquer en utilisant l'affichage. Ensuite, au survol, survolez la chronologie de la vidéo. Ensuite, la zone de progression s'étend. Ensuite, nous avons besoin d'une barre de progression. Jusqu'à présent, nous devions réafficher les éléments à l' aide d'un bloc d'affichage. Comme vous pouvez le voir maintenant, le cercle et l'élément span sont tous deux masqués. Une fois que j'ai survolé la chronologie de la vidéo, elles s'afficheront à nouveau. Très bien, donc tout fonctionne bien. Nous avons créé la barre de progression de Gable. Passons à la prochaine conférence. 43. Cacher et montrer les commandes: Très bien, dans la conférence précédente, nous avons créé une barre de progression traçable Et maintenant, nous devons gérer le masquage et l'affichage des commandes vidéo. Nous devons également programmer le bouton de fermeture en X et le bouton de lecture sur la page de destination. Jetons un coup d'œil aux projets terminés. Si je lance la vidéo puis que j'arrête la souris, les commandes vidéo se masqueront au bout de 3 secondes. Si je déplace la souris, ils réapparaîtront. Comme je l'ai dit, nous allons gérer cela dans cette vidéo. Et nous devons également programmer le bouton de fermeture X, qui ferme la vidéo, et qui programmera également le bouton de lecture. Si je clique dessus, la vidéo apparaît. D'accord, passons au code VS. La première chose que je vais faire est de trouver des emballages de contrôle et de les masquer en utilisant Capacity Zero Visibility Masken Comme vous pouvez le constater, les commandes vidéo sont masquées. Ensuite, nous devons accéder au fichier script JS et créer, en fait, je vais le faire et ici, nouveaux commentaires pour les contrôles. Nous devons créer une fonction. Je vais l'appeler de controls, ce sera une fonction flèche. Ensuite, je vais utiliser l'une des méthodes Javascri intégrées appelée set time La fonction de temps du motet est une méthode Scot intégrée à Java qui définit un temporisateur et exécute une fonction ou un morceau de code spécifié Une fois le délai expiré, je vais passer ici une fonction de rappel C'est le premier argument. Ensuite, nous devons placer ici le deuxième argument, qui est le temps, et il est exprimé en millisecondes Je vais encore en placer 3 000 ici. Le premier argument de set time out est une autre fonction d'erreur. Cette fonction interne définit ce qui se passera une fois le chronomètre terminé. Quant au deuxième argument, c'est le délai en millisecondes Ici, il est réglé sur 3 000 millisecondes, ce qui équivaut à OK, maintenant que le bloc de code que je vais utiliser pour supprimer la classe du conteneur vidéo, je vais spécifier ici le nom de la classe. Appelons cela afficher les commandes. La classe show controls ajoutera des styles en CSS qui rendront les commandes du lecteur vidéo visibles. En supprimant cette classe, les commandes sont masquées dans la vue. Ensuite, je vais appeler cette fonction. Nous devons maintenant accéder au fichier CSS et utiliser les contrôles de classe show. Tout d'abord, je vais trouver le wrapper des commandes. Ensuite, je vais sélectionner le conteneur vidéo, suivi de la classe show controls. Ensuite, nous devons sélectionner le wrapper de contrôles. Nous devons rendre visibles les commandes. Tout d'abord, je vais définir que la position sera zéro, je veux dire la position inférieure. Ensuite, nous avons besoin d'une capacité et d'une visibilité visible. Je vais également utiliser la transition pour un effet plus fluide. Nous avons besoin de tout cela, alors la durée sera de 0,08 seconde Et nous en avons besoin ici. Ensuite, je vais ajouter la classe show controls au conteneur vidéo dans le fichier HTM. Insérons ici les commandes d'affichage, puis allons dans le navigateur. Si j'attends 3 secondes, les commandes disparaîtront. Il faut maintenant les afficher une fois que la souris est déplacée. Pour cela, je vais ajouter ici le conteneur vidéo avec écouteur d'événements L'événement va être déplacé. Nous devons placer ici l' appel de la fonction. Nous devons maintenant ajouter à la classe de conteneur vidéo show controls. Maintenant, si j'arrête de déplacer la souris pendant 3 secondes , les commandes vidéo se masqueront et une fois que j'aurai déplacé la souris, elles apparaîtront. OK, nous devons afficher les commandes pendant que la vidéo est en cours de pose. Pour cela, je vais revenir au fichier enfant et créer une instruction ici juste au-dessus de la fonction de temporisation définie. Nous avons besoin d'une déclaration, dans laquelle nous devons vérifier si la vidéo principale est publiée ou non. Ensuite, nous avons besoin d'une déclaration de retour. Laisse-moi t'expliquer. Qu'est-ce que je fais ici ? Cette instruction vérifie une condition. Et en fonction des résultats de la condition, soit continue d'exécuter le reste de la fonction, soit dépasse les rendements de la fonction très tôt. La publication est une propriété qui renvoie une valeur d'intimidation. Vrai ou faux. L'instruction if, si la condition est vraie, si la vidéo est publiée, alors la condition contenue dans l'instruction if est satisfaite. Si la condition est satisfaite, l' instruction de retour est exécutée. L'instruction de retour dépasse immédiatement la fonction de réglage de la hauteur. Cela signifie qu'aucun code suivant l'instruction return dans la fonction de contrôle n' est exécuté. En termes simples, si la vidéo est publiée, la fonction ne fait rien et cesse de fonctionner immédiatement. Si la condition est fausse, est-à-dire que la vidéo est en cours de lecture, la condition de l'instruction if n'est pas satisfaite et l' instruction return n'est pas exécutée. La fonction exécute ensuite le bloc de temporisation défini, qui attend 3 secondes puis exécute le code dans sa fonction de rappel, supprimant ainsi la classe show controls du Cela entraîne le masquage des commandes vidéo après le délai. J'espère que vous comprenez à quoi sert cette ligne de code. Passons au navigateur. Si je lance la vidéo puis que je la mets en pause, les commandes ne disparaîtront pas. Le code fonctionne bien. La prochaine chose que je vais faire est d' arrêter d' exécuter la fonction de temporisation définie Une fois que nous aurons déplacé la souris pour cela, je vais créer une nouvelle variable. Ça va être un chronomètre. Je vais décliner la variable sans lui attribuer de valeurs Ensuite, je vais attribuer la fonction set timeout à cette variable, le timer Ensuite, je vais utiliser l'une des méthodes Java Sc intégrées appelée clear time out. Je vais passer ici le chronomètre variable. Il arrêtera d'exécuter la fonction de temporisation définie. Et nous devons également appeler ici la fonction de contrôle de la hauteur. Très bien, allons dans le navigateur et vérifions si tout fonctionne bien. Je vais regarder la vidéo et attendre 3 secondes. Les commandes sont masquées. Si je déplace la souris, ils s'afficheront à nouveau. Si je publie la vidéo, les commandes seront visibles. Je pense que tout fonctionne parfaitement. Et maintenant, nous devons nous occuper du bouton de fermeture en X et du bouton de lecture dans la section des modèles. Revenons au fichier chavs et créons de nouvelles variables. Je vais dupliquer ce code, nous avons besoin de Play Button. Je vais sélectionner cet élément avec le nom de la classe. Jouez. Motif Btn x PTN X. Insérons ici. X PTN suivi du terrain. OK, nous devons maintenant ajouter des événements de clic aux deux modèles. Insérons ici le bouton Play, Ajouter un écouteur d'événements. Et je vais préciser ici l'événement de clic. Ensuite, nous avons besoin d' une fonction de rappel. Je vais ajouter une nouvelle classe au conteneur vidéo, que nous utiliserons. Ensuite, dans le fichier CSS, nous avons besoin d' une liste de classes de conteneurs vidéo. Je vais insérer le nom de la classe. Appelons ça une émission vidéo. Ensuite, je vais dupliquer ce bouton de changement de code. Ce sera X Baton. Ensuite, je vais changer de méthode en supprimer. De plus, je publierai la vidéo une fois que nous aurons fermé le conteneur vidéo dont nous avons besoin ici mainvideook Tout est prêt dans jovscript. Passons au fichier CSS. Et tout d'abord, je vais masquer le conteneur vidéo dont nous avons besoin ici, capacité zéro et visibilité dix. Ensuite, je vais sélectionner un conteneur vidéo avec la classe show video. Je vais afficher la vidéo. Nous avons besoin d'une opacité unique et d'une visibilité visible. De plus, je vais utiliser la transition pour des effets plus fluides. Nous avons besoin d'une transition, puis d'une opacité de 0,3 seconde, d'accord ? Comme vous pouvez le constater, par défaut, la vidéo est masquée. Si je clique sur le bouton de lecture, le lecteur vidéo s'affiche. Si je clique sur le bouton de fermeture X, il se masquera. accord, je pense que tout ce que nous avons fait, va bien et en fait, avec le lecteur vidéo, nous en avons fini avec le lecteur vidéo. J'espère que c'était intéressant. Nous avons utilisé beaucoup de Javascript et je pense que vous avez appris de nouvelles choses. OK, il est maintenant temps de passer à la création de la section suivante de notre projet. Pour cela, passons à la prochaine conférence. 44. Créer le balisage HTML pour la section Subscribe: Très bien, dans la conférence précédente, nous avons fini de travailler sur la section des modèles. Je veux dire, nous avons fini de travailler sur la deuxième partie de la section des modèles, qui était un lecteur vidéo. Nous avons créé le lecteur vidéo et l'avons fait fonctionner avec succès. Nous devons maintenant passer à autre chose et commencer à créer la section suivante de notre projet. Jetons un coup d'œil à la version finale. La section suivante est une section d'abonnement. C'est une section sympa et cool, mais petite. Nous avons ici une boîte noire au centre de la page. Il comprend un certain nombre d'éléments différents. Nous avons ici l'icône Google Material, suivie du paragraphe d' en-tête, et nous avons également ici un élément de saisie avec un bouton. La boîte a un effet d'ombre agréable et cool. D'accord, tout tourne autour de la section d'abonnement. Passons au code VS. Et tout d'abord, je vais créer le balisage HTML juste après la section du modèle, je vais insérer de nouveaux commentaires Il va s'agir d'un abonnement, puis nous avons besoin de la fin de l'abonnement. Ensuite, je vais ouvrir le tag de section avec le bouton subscribe. Le premier élément que je vais insérer dans l' élément de section sera le wrapper. Ouvrons avec le wrapper subscribe , puis je vais créer l'icône que nous devons développer avec la classe subscribe Ce sera le symbole Google Material. Je vais visiter le site Google Material Symbols. Cliquons sur ce lien ici. Je vais rechercher une icône appelée Mark. Lisez. Ici, nous avons l'icône. Je vais découper ce panneau à partir d' ici et le coller dans le développement, je vais changer le plan en plan arrondi Vérifions-le dans le navigateur. Comme vous pouvez le constater, nous avons ici l'icône Google Material. Ensuite, je vais créer les éléments de titre H one avec le texte subscribe. Nous avons maintenant le paragraphe suivant. Le texte va être saisi dans votre e-mail pour recevoir des mises à jour. Après le paragraphe, je suis un tag ouvert avec le groupe de saisie class subscribe. Dans le cadre du développement, nous aurons une balise de saisie avec le type email. De plus, je vais ajouter ici un attribut d'espace réservé et ce sera votre e-mail Ensuite, nous avons besoin du fond. Le texte sera en bas comme le texte. Je vais m'abonner. D'accord. Le dernier élément que je vais créer sera l'ombre. Je veux dire, il faut régler le nom de la classe, s'abonner à Shadow Il s'agira d' un élément vide. C'est tout à propos du balisage HD. Jetons un coup d'œil au navigateur Nous avons ici tous les éléments. Il est maintenant temps de passer à autre chose et commencer à styliser ces éléments. Passons à autre chose. 45. Section d'abonnement de style: Dans la dernière conférence, nous avons créé un balisage HTML pour la section d' abonnement Maintenant, comme je l'ai dit, nous devons styliser ces éléments. Jetons un coup d'œil, encore une fois, au projet terminé. Ici, nous avons la section d' abonnement. Nous devons styliser ces éléments et créer cet effet d' ombre agréable et cool. D'accord, passons au code VS dans le fichier CSS. Je vais insérer de nouveaux commentaires juste après la section du modèle dont nous avons besoin ici, abonnez-vous. Ensuite, je vais sélectionner les éléments de section avec le nom de classe Subscribe. La première chose que je vais faire est de définir avec la hauteur. Je vais régler avec 100 %. Quant à la hauteur, elle sera de 100 % de hauteur de fenêtre Je veux dire 100 % de la fenêtre d'affichage. Nous allons également changer la couleur d'arrière-plan. Je vais utiliser un dégradé linéaire. La couleur d'arrière-plan sera similaire à celle l'arrière-plan des sections du modèle Je vais définir la direction vers la gauche. Ensuite, nous devons passer ici trois couleurs. Le premier sera 8430. Je vais réutiliser cette couleur, 8430. Quant à la troisième couleur, elle sera 409, d'accord ? La couleur d'arrière-plan est modifiée et la largeur et la hauteur sont également appliquées à l'élément de section. Revenons au code VS et prenons soin de l' alignement des éléments. Je vais utiliser le boîtier Flex de CS. Nous avons besoin de Display Flex. Ensuite, je vais placer le contenu au centre de la section. Pour cela, nous devons justifier centre de contenu, puis un centre d'éléments de ligne. Comme vous pouvez le constater, les éléments sont placés au centre de la section. Ensuite, je vais m'occuper du wrapper d'abonnement, qui est cette boîte noire. Allons-y et sélectionnons le wrapper d' abonnement. Définissons les hauteurs comprises. La largeur sera de 80, c'est pour la hauteur. Je vais en faire 50. Et puis changez la couleur de fond, ce sera 231, D34 Ici, nous avons l'emballage. Ensuite, je vais arrondir les coins. Pour cela, nous devons utiliser le rayon. La valeur sera d'un RAM. De plus, je vais aligner les éléments en utilisant à nouveau la boîte flexible. Nous avons besoin de Display Flex. Ensuite, je vais changer de direction car nous devons aligner les éléments flexibles verticalement. Nous avons besoin de la direction de flexion pour être une colonne. Ensuite, je vais créer un espace uniforme entre les éléments flexibles. Pour cela, nous devons justifier le contenu non pas au centre mais à l'espace de manière uniforme. Enfin, je vais passer à une ligne d'éléments au centre, horizontalement. Pour cela, nous avons besoin d'une ligne de centres d'articles, nous avons besoin d'un centre ici, d'accord. Comme vous pouvez le voir, les éléments sont placés verticalement au centre. Ensuite, je vais m' occuper de l'icône. Sélectionnons l'icône Subscribe, suivie de l'élément span. Je vais augmenter la taille du téléphone. Ça va faire dix grammes. Je vais également changer la couleur de l'icône. La couleur sera 035. Nous avons ici une icône sympa et cool. Ensuite, je vais m' occuper du titre. Allons-y et sélectionnons le wrapper Subscribe, suivi de l'élément d'en-tête H. Je vais augmenter la taille du téléphone, il y aura quatre RAM. Ensuite, je vais modifier le poids de la police. Allons le rendre plus léger. Définissez le poids de police sur 300. Ensuite, je vais changer de couleur. Je vais utiliser la couleur AA. Il est de couleur grise. Ensuite, je vais déplacer l'élément un peu vers le haut en utilisant la marge supérieure. Nous avons besoin d'une valeur négative et ce sera moins cinq images. OK, le titre est plutôt sympa. Ensuite, je vais passer au paragraphe. Dupliquons ce code, puis changeons le sélecteur dont nous avons besoin ici La taille du téléphone sera de 1,8 RAM. Ensuite, nous avons besoin de la même valeur de poids du téléphone. La couleur sera 999. Il est de couleur gris légèrement plus foncé. Pour ce qui est de la marge supérieure, je vais partir d'ici moins cinq RAM. C'est ça. À propos du paragraphe suivant, nous devons nous occuper de la saisie et du bas. Tout d'abord, je vais sélectionner le wrapper, je veux dire le groupe de saisie Subscribe. Définissons la largeur. Ça va faire 50 RAM. Ensuite, je vais changer la hauteur. Réglons-le sur 5,5 images. En fait, afin de rendre cet élément visible, je vais ajouter ici une couleur de bacon temporaire. Mettons-le en rouge. Nous avons ici le wrapper, Subscribe input group. Ensuite, je vais m' occuper des éléments d'entrée. Nous devons donc à nouveau souscrire au groupe d'entrée, suivi des éléments d'entrée. Tout d'abord, je vais régler la position sur absolue. Ensuite, nous avons besoin de la position relative pour l'élément parent, qui est le groupe d'entrée. Ensuite, je vais régler la hauteur à 100 %. Dans ce cas, élément d'entrée reprendra la hauteur de son élément parent. Je veux dire 50 Ram et 5,5 Ram. Jetons un coup d' œil au navigateur. Voici les éléments. Débarrassons-nous de cette couleur de fond. Nous n'en avons plus besoin. OK. Ensuite, je vais changer la couleur de fond. Réglons-le entre 1b16 et neuf. De plus, je vais me débarrasser de la bordure de défaut, puis arrondir les coins de l'entrée en utilisant un rayon de bordure d'une valeur de cinq RAM, l'élément d'entrée est beaucoup plus beau Ensuite, je vais créer de l'espace à l'intérieur de l' entrée en utilisant du pudding Le rembourrage sera donc composé d'un bélier en haut, puis d'un bélier sur le côté droit, un bélier en bas et de deux béliers sur le côté gauche Nous avons maintenant un peu d'espace à l'intérieur de l'entrée. Ensuite, nous devons prendre soin du téléphone. Réglons la taille du téléphone à 1,6 RAM. Ensuite, le tarif téléphonique sera de 300. Je vais également changer de couleur. Utilisons un 05 FD. OK, donc tout a l'air plutôt sympa. Ensuite, je vais m'occuper de l'attribut placeholder Allons-y et sélectionnons le groupe Subscribe Input, puis l'élément d'entrée. Ensuite, nous avons besoin d' un pseudo élément substituable. Je vais changer la taille du téléphone. Ça va être 1.6 Je vais aussi changer de couleur. Utilisons la même couleur. Les vendeurs peuvent voir que l' espace réservé a été modifié. Bien, passons aux éléments d'entrée. Ensuite, nous devons prendre soin du bas, qui est actuellement placé derrière l'élément d'entrée. Allons-y et sélectionnons, il nous faut ici s'abonner au groupe de saisie, suivi de l'élément inférieur. Définissons la hauteur maximale. La largeur sera de 16 RAM. La hauteur sera alors de 100 % Elle occupera la hauteur de l'élément parent, 5,5 RAM. En fait, vous pouvez soit écrire ici à 100 %, soit hériter. Cela fonctionnera de la même manière, mais je préfère 100 %, je ne sais pas pourquoi. Ensuite, je vais définir la couleur de fond. Réglons l'arrière-plan sur 644 EF. La prochaine chose que je vais faire est de changer la position du bouton afin de voir à quoi il ressemble. Réglons la position sur absolue. Ensuite, nous devons nous positionner à zéro. Et nous devons également mettre la bonne position à zéro. Le bouton est maintenant visible. Supprimons la bordure défectueuse et arrondissons également le bouton. Nous avons besoin de la bordure non, alors le rayon de la bordure sera de cinq images, le bouton est beaucoup plus beau Ensuite, je vais te raccrocher au téléphone. Le côté téléphone va être de 1,5 fram, nous avons besoin de pontights, ça va être audacieux De plus, je vais transformer le texte en majuscules, puis changer de couleur, le rendre blanc. Nous allons vérifier le résultat. Comme vous pouvez le voir, le bouton est plutôt joli. La seule chose que nous devons faire est de créer un espace entre les lettres. Et je vais aussi ajouter au bouton un petit effet d'ombre. Je vais régler l'espacement entre les lettres à 0,2 m. Quant à l'ombre de la boîte, elle sera de 01, puis de cinq comme couleur Je vais utiliser le RGBA avec une opacité de 0,2, c' est la couleur noire Enfin, définissons le point du curseur. OK, c'est ça. Le bouton est prêt et en fait, tous les éléments sont stylés La seule chose que je dois faire est créer un effet d'ombre. Je parle de cet effet ici. Souvenez-vous que nous avons créé les éléments appelés Subscribe Shadow, le développement qui est vide. Je vais donc sélectionner cet élément. Tout d'abord, définie dans les hauteurs, la largeur sera de 80 %. C'est pour la hauteur. Je vais le régler sur 12 RAM. Ensuite, nous avons besoin de la couleur de fond. Je vais le régler entre 116 et 9. Ici, nous avons l'ombre. Changeons de position. Je vais régler la position sur absolue. Nous devons positionner cet élément en fonction des éléments de section. Nous avons besoin d'une position relative pour les éléments de section dont je vais définir la position inférieure à moins sept RAM. Quant à la position de gauche, elle sera de 50 %. Nous devons centrer l' élément horizontalement. Pour cela, nous devons utiliser la transformation avec la fonction de traduction. Dans ce cas, nous devons traduire x et la valeur sera de -50 %. Comme vous pouvez le voir, l'élément est centré Je vais maintenant faire pivoter les éléments selon l'axe X verticalement. Pour cela, nous devons utiliser la fonction de rotation x. Et la valeur sera de Siento Degrees. Maintenant que l'élément est pivoté, je vais l'arrondir En utilisant le rayon de bordure, l'élément sera arrondi à 30 %. Et maintenant, nous devons le rendre flou comme nous l'avons fait dans le projet final Pour ce faire, je vais utiliser propriété du filtre avec la fonction appelée polar et la valeur sera de trois RAM. Je vais également définir l'opacité 2.7. Maintenant, nous avons ici l'effet d'ombre, mais nous devons le transformer en effet tridimensionnel comme dans le projet final Afin de créer un environnement en trois D, je vais attribuer à l'élément de section une propriété appelée perspective. Cela nous permet de créer l'environnement en trois D, la valeur sera de 50 RAM. Nous avons également besoin d'une propriété appelée style de transformation pour l'élément parent de l'ombre, qui est le wrapper subscribe. Nous avons besoin ici d'un style de transformation avec la valeur préservée, trois D. Maintenant, l'effet des trois D sera appliqué. Jetons un coup d'œil. Comme vous pouvez le constater, nous avons ici un effet d'ombre agréable et cool. Il s'agit d'un effet en trois D qui se trouve dans la section d' abonnement. Je trouve que c'est plutôt joli et moderne. Passons à la prochaine conférence. 46. Créer un balisage HTML pour Footer: Très bien, dans la dernière conférence, nous avons fini de styliser la section d'abonnement. Il a l'air plutôt joli et moderne. Nous devons maintenant passer à autre chose et créer la dernière section de la première page, la page d'accueil. Ce sera le pied de page. Ici, nous avons le pied de page. C'est simple, mais je trouve qu'il a l'air plutôt sympa. Nous avons ici différents liens, ainsi que les icônes des téléphones. En bas, vous pouvez voir les éléments de navigation qui fonctionnent. Si nous cliquons sur l'un des éléments de navigation, nous accédons à la page appropriée. Comme vous pouvez le constater, tous les liens fonctionnent correctement. OK, allons-y et, tout d'abord, comme d'habitude, créons le balisage HTML Je vais insérer vos nouveaux commentaires pour le pied de page. Ensuite, je vais ouvrir un H de cinq pieds. Il comportera deux parties différentes. Nous aurons cette partie ici et en bas de page. Les éléments de navigation dont nous avons besoin ici. Remorqueur profond avec le bas de page de la classe en haut. De plus, je vais également créer un bas de page. En haut, il y aura des icônes de réseaux sociaux. Je vais ouvrir une session sur les réseaux sociaux de la classe. C'est ici que nous avons besoin de médias. Il s'agira d'un nom de classe individuel. Mais en plus de cela, je vais ajouter ici un nom de classe commun. Et ce sera un élément de bas de page, je suis en titre trois, le texte sera « Suivez-nous Ensuite, nous avons besoin ici d' un développement qui enveloppera les icônes. Je vais appeler ça des icônes, je vais insérer les icônes de votre téléphone. La première sera une phase Brands A. Dans l'ensemble, nous aurons sept icônes différentes, donc je vais dupliquer cette ligne de code six fois, puis changer les noms des classes. Le second sera FA Instagram. Ensuite, nous aurons ici un lien. Ensuite, le prochain sera un Twitter. le moment, Twitter a un nom différent, mais je vais quand même l'insérer ici. Ensuite, nous aurons Pinterest. Ensuite, l'icône suivante sera un tribble. Enfin, nous devrons, d' accord, pour que toutes les icônes du téléphone soient également créées. Vérifions-les si elles sont toutes visibles et affichées. Ici, nous avons sept icônes différentes et elles sont toutes affichées. OK, ensuite je vais m' occuper du prochain élément de filtre et il y aura quelques liens. Je vais d'abord insérer vos trois éléments de titre en H, ce seront des fonctionnalités. Ensuite, nous avons besoin d'éléments de lien. Le premier comportera plus de 1 000 mises en page. Je vais dupliquer cette ligne de code cinq fois car nous allons avoir six liens différents. Je veux dire, le deuxième élément de lien sera composé de plus de 100 éléments. Ensuite, le suivant sera un design sans code. Ensuite, le prochain sera le commerce électronique. En fait, les liens sont des liens vers le ventre que vous pouvez insérer ici comme bon vous semble Cela dépend entièrement de vous. Ensuite, l' élément suivant, sera le flux de travail. Enfin, je ne suis pas sûr du marketing. OK, c'est ça. À propos du deuxième élément de pied de page, en fait, je vais dupliquer cet élément deux fois Ensuite, je vais changer de titre. Changeons ici la première lettre, elle doit être majuscule. La deuxième rubrique sera consacrée aux services. Dans cet élément de bas de page, nous en aurons cinq. Lien. Je vais donc supprimer l'un d' entre eux, puis modifier le contenu des éléments du lien. Le premier sera Marketplace. Ensuite, nous aurons Theme Builder. Le prochain sera Cloud. Ensuite, je vais enfin passer à Intro Themes OK, c'est tout pour le deuxième Fem, en fait c'est le troisième élément de pied de page et le second, le dernier élément de pied de page, sera destiné à l' Nous allons avoir ici quatre liens. Je vais insérer ici un article à propos de nous. Ensuite, nous bloquerons, les prochains seront les transporteurs. Le dernier élément du lien sera le contact. Très bien, il s'agit des éléments du pied de page. En fait, c'est tout, à propos de la partie supérieure du pied de page. Je vais prendre note du bas de page. Nous aurons ici six éléments de lien différents seront des éléments de navigation. Je vais ouvrir les éléments du lien dans l'attribut de référence H. Je vais insérer un index HTML car cet élément de lien nous dirigera vers la page d'accueil. Dupliquons ensuite cette ligne de code cinq fois, car au total, nous avons six éléments de navigation différents. Le second sera destiné aux clients. Ensuite, nous aurons des produits dès maintenant, ces liens, je veux dire que ces pages ne sont pas créées. Nous les créerons lors des prochaines conférences. Quoi qu'il en soit, je vais préciser ici les noms des fichiers. La prochaine étape sera le contact. Ensuite, nous aurons un compte à rendre. Enfin, en ce qui concerne les prix, en ce qui concerne les prix, je pense qu'il s'agit d'une question de majoration extrême Tous les éléments sont créés. Vérifions-le dans le navigateur. Comme vous pouvez le voir, nous avons ici tous les liens ainsi que les asomicons du téléphone Il est maintenant temps de styliser ces éléments. Et pour cela, passons à la prochaine conférence. 47. Pied de page de style: Dans le cours précédent, nous avons créé le balisage HDML pour le pied de page, et il est maintenant temps de styliser ces éléments Regardons une fois de plus le projet terminé. Nous avons ici le pied de page, qui est simple, mais je le trouve plutôt joli et moderne Passons au code VS et commençons à écrire du CSS. En fait, avant cela, je vais ajouter ici un élément car j'ai oublié de le créer lors de la dernière conférence. Nous avons besoin ici du contenu du pied qui enveloppera le contenu du pied de Supprimons cette fermeture, Deep talk, et collons-la ci-dessous. OK, c'est ça. Le H sur le balisage est prêt. Je vais introduire vos nouveaux commentaires pour le pied de page. Ensuite, je vais sélectionner l'élément de pied de page. Tout d'abord, je vais définir la largeur et la hauteur. La largeur sera de 100 %. Quant à la hauteur, je vais faire en sorte que la hauteur du pot soit de 60 vues. Je veux dire 60 % de la fenêtre d'affichage. Et aussi, créons de l' espace à l'intérieur du pied de page en utilisant le rembourrage Le pudding sera composé de dix béliers en haut, puis de zéro sur le côté droit, trois béliers en bas, zéro sur le côté gauche D'accord ? Comme vous pouvez le constater, la largeur, hauteur et le pudding sont appliqués aux éléments Ensuite, je vais m'occuper du contenu du pied de page. Nous allons sélectionner ces éléments. Tout d'abord, définissez la largeur et la hauteur. La largeur sera de 100 % Quant à la hauteur, je vais également la faire de 100 %. Ensuite, je vais aligner les éléments à l'aide de la boîte CSS Flex, nous devons afficher flex. Ensuite, je vais placer les éléments, je veux dire les éléments flexibles, verticalement dans une colonne. Nous devons changer la direction du flex et il deviendra une colonne. Ensuite, je vais créer un espace entre les éléments flexibles en utilisant la justification d'un espace concret entre les deux. Et aussi, alignons les éléments au centre. Encore une fois, comme vous pouvez le voir, les éléments, je veux dire que les côtés supérieur et inférieur sont alignés. Ensuite, je vais m' occuper de la face supérieure. Allons-y et sélectionnons du pied vers le haut. Je vais régler avec 100 %. Ensuite, je vais aligner les éléments horizontalement dans une rangée. Et pour cela, utilisons à nouveau des livres flexibles. Afin de créer de l'espace entre les éléments flexibles, je vais utiliser le contenu de justification avec l'espace de valeur de manière uniforme. D'accord ? Les éléments, la première partie en haut du pied de page, sont bien alignés OK. Ensuite, je vais m' occuper des réseaux sociaux. Je vais sélectionner les réseaux sociaux en bas de page. Et je vais définir la largeur. Ce sera 30 % Comme vous pouvez le voir, la largeur du premier élément de pied de page dans les icônes des réseaux sociaux est augmentée C'est 30 % du pied de page. Ensuite, je vais sélectionner un élément de pied de page. C'est un nom de classe commun pour les quatre éléments de pied de page, nous devons utiliser du CSS, des livres flexibles Je vais aligner les éléments flexibles verticalement dans une colonne. En tant qu'invité, nous devons changer de direction et ce sera une colonne. Comme vous pouvez le constater, les éléments flexibles sont placés dans une colonne. Ensuite, nous allons nous occuper des titres. Je vais sélectionner l'élément de bas de page de la troisième page. Nous avons besoin des mêmes styles pour tous les éléments de titre. Je vais changer de famille de téléphones, ça va être cursif, puis la taille du téléphone sera de 2,5 Rams Je vais changer de couleur, utilisons la couleur 007. De plus, je vais créer un espace en bas en utilisant la marge. Les deux derniers, Ram. Comme vous pouvez le constater, les titres sont plutôt jolis Ensuite, nous devons prendre soin des icônes. Nous allons sélectionner les icônes, puis l'élément. Je vais augmenter la taille du téléphone, il sera de 2,5 RAM. Ensuite, nous avons besoin d'espace sur le côté droit de chaque icône. Je vais utiliser Marching Right avec une valeur de deux RAM. Et modifiez également le pointeur Coursermate. OK, maintenant nous avons de plus grandes icônes. En tant qu'invité, nous devons changer la couleur de chaque article. Allons-y et commençons par le premier. Je vais sélectionner les icônes I, puis le sélecteur pour le neuvième enfant Nous avons besoin du premier élément en fait d'une icône, la couleur sera 187. 72. Nous allons vérifier le résultat. Comme vous pouvez le constater, la couleur du premier élément est modifiée. Faisons de même pour le reste des icônes. Je vais dupliquer ce code six fois car total, nous avons sept icônes. En fait, nous avons besoin de sept icônes et de huit. Je vais modifier les numéros des sélecteurs de graphiques. Nous avons besoin de chiffres, de 1 à 7. Nous devons également changer les couleurs. La deuxième couleur sera C323. Ensuite, nous aurons un 662. Le prochain sera le 112. Ensuite, nous aurons ici le D081. Le sixième élément est la couleur 4c89. Nous avons également besoin ici de la couleur rouge, qui est F0000. D'accord, comme vous pouvez le voir, les couleurs des icônes ont changé et elles sont plutôt jolies. Ensuite, nous devons nous occuper des liens ici, je vais sélectionner l'élément pied de page. Changeons la taille du téléphone. Ce sera 1,8 RAM. Ensuite, nous avons besoin d'espace en bas en utilisant la marge inférieure. Et ce sera 1,5 RAM. Et changez également la couleur du lien. Ce sera 394353. Il est de couleur gris foncé. Voici les liens. En fait, je pense qu'il y a trop d'espace entre eux. Diminérons la marge. Potson, passe à 1,4 RAM. Faisons en sorte que ce soit 1,3 RAM. Je pense que nous avons maintenant de meilleurs résultats. Ensuite, nous avons dû nous occuper de la face inférieure. Sélectionnons le bas de page. Je vais définir la largeur à 100 %. Ensuite, nous devons aligner les éléments à l'aide de Flexbox. Nous devons afficher Flex. Ensuite, je vais créer un espace entre les éléments flexibles en utilisant justify content space. De plus, je vais utiliser l'option aligner les éléments au centre afin de centrer les éléments flexibles horizontalement. Comme vous pouvez le voir, les éléments du lien sont bien placés en ligne horizontale, ils sont alignés. Je vais maintenant créer une bordure en haut, la bordure que nous avons ici. Utilisons le haut de la bordure et les valeurs seront de 0,2 Ram solid comme couleur. Je vais utiliser la valeur RGBA, il nous faut zéro, puis 122, puis la valeur suivante sera 170 En ce qui concerne l'opacité, je vais la fixer à 0,2. De plus, nous avons besoin d'un peu d'espace en haut, en haut entre les éléments de navigation et la bordure Créons cet espace dans le rembourrage, en haut d'une RAM. Très bien, nous devons enfin personnaliser les éléments du lien. Je vais sélectionner le bas de page suivi de l'élément lien. Nous avons besoin d'une famille de polices. Ce sera un croissant, puis je vais définir une taille de police deux, Ram Et changez également la couleur de l'élément de lien. Ça va être 007 AA, d'accord ? Comme vous pouvez le constater, les éléments du lien sont plutôt jolis. En fait, avec le pied de page, c'est terminé. Nous pouvons dire que nous avons fini travailler sur la page principale, la page d'accueil. Tout a l'air plutôt sympa. Ensuite, nous devons nous occuper des pages, des clients, des produits, des contacts, de la tarification du compte. Nous devons créer cinq pages différentes. Nous devons également adapter l'ensemble du projet aux différentes tailles d' écran et aux différents appareils. Nous devons tout de même faire beaucoup de choses. Passons à la prochaine conférence. 48. Créer une barre de défilement personnalisée: Dans la conférence précédente, nous avons fini de travailler sur le pied de page Ça a l'air plutôt sympa. Comme je l'ai dit, nous devons passer à autre chose et commencer à créer les pages car la page d'accueil est déjà stylisée et personnalisée Avant de passer à autre chose et de commencer à créer les pages, je voudrais faire une dernière chose. Si nous examinons le projet terminé, vous trouverez ici une barre de défilement personnalisée. Elle est différente de la barre de défilement standard par défaut. Je veux dire à partir de celui-ci. Dans cette conférence, je vais modifier la barre de défilement. Passons au code VS et faisons défiler la le haut juste après les styles par défaut Je vais insérer de nouveaux communs pour une barre de défilement personnalisée. Ensuite, je vais sélectionner les éléments du corps, puis l' un des éléments du CD. Elle s'appelle Webkit Scroll Bar. Je vais maintenant définir la largeur de la barre de défilement. Réglons-le sur 1,5 RAM. Ensuite, nous devons définir un autre pseudo-élément appelé kit Web, barre de défilement, pouce, c'est cette partie ici. Je vais maintenant définir le fond et utiliser ici le dégradé linéaire. La première couleur sera 830. Pour le second, je vais utiliser le B55. Maintenant, si nous vérifions, vous verrez que le pouce est changé. Nous avons ici le pouce avec une couleur de fond différente. Maintenant, nous devons prendre soin de la piste. En fait, en ce moment, il peut voir que la piste est blanche. Quoi qu'il en soit, je vais le définir car vous pourriez avoir besoin d'une piste différente avec une couleur différente. À l'avenir, vous devriez savoir comment le modifier. Je vais sélectionner Body, puis webkit, scroll, bar, track Faisons en sorte que la couleur de fond soit blanche. La piste est blanche. Si nous changeons la couleur et la rendons verte, la piste changera de couleur de fond. C'est ainsi que vous pouvez modifier la couleur d'arrière-plan de la piste de la barre de défilement Revenons ici. Encore une fois de couleur blanche. C'est ça. Nous avons modifié la barre de défilement par défaut pour lui donner un aspect moderne et agréable. Il est maintenant temps de passer à la prochaine conférence, dans laquelle nous devons commencer à créer les pages. 49. Personnaliser Navbar: Très bien, dans la leçon précédente, nous avons créé une barre de défilement personnalisée qui est plutôt jolie et différente barres de défilement par défaut et standard. Maintenant, comme je l'ai dit, nous devons commencer à créer les pages. Dans cette conférence, je vais commencer à créer la page du client. Passons au projet terminé et vérifions à nouveau la page du client. Ici, nous avons la page du client qui consiste en un titre. Ensuite, nous avons ici quelques témoignages de différents clients Et en bas, nous avons le même pied de page que celui que nous avons créé pour la page principale, je parle également de la page d'accueil Nous avons ici la navigation. Elle est similaire à la navigation principale. La seule chose à voir avec la navigation est de changer la couleur du logo et des éléments de navigation. Et nous devons également changer l'arrière-plan, couleur et la couleur du bouton. OK, allons-y et commençons à travailler sur la page du client. La première chose que je vais faire est de créer un nouveau fichier ici dans le dossier HTML. Le fichier va être client, faites du HTML. Ouvrons ce fichier. Je vais le déplacer ici. La page des clients. Je veux dire, le fichier HTML est créé. Maintenant, je vais récupérer l'intégralité du contenu. Copions le code entier et collons-le ici. Ensuite, je vais supprimer toutes les sections sauf la navigation. Supprimons tout sauf la navigation que nous avons ici. Toute la navigation depuis la page d'accueil. Également, tous les liens que nous utilisons tout au long de ce projet. Vérifie le navigateur. Accédez à la page du client. Ici, nous avons la navigation, et la page entière est vide. Comme je l'ai dit, nous devons modifier légèrement la navigation. Je veux dire, nous devons changer les couleurs du logo et des éléments de navigation. Je vais ajouter un nouveau nom de classe à la nième barre et elle sera multipage Ensuite, je vais aller dans le fichier CSS et nous devons trouver l'élément span du logo. Nous l'avons ici. Je vais sélectionner la classe nouvellement ajoutée, suffisamment multipage, suivie du logo Ensuite, nous avons besoin d'un élément span. Changeons la couleur du texte. Il sera 9 h 26 moins sept heures. De plus, je vais me débarrasser de l'effet d'ombre, car lorsque nous avons un fond blanc , l'ombre n'est pas très belle. Je vais définir l'ombre du texte sur Non. Vérifie le navigateur. Comme vous pouvez le constater, la couleur du logo a changé et il est maintenant beaucoup plus beau. Prenons ici les éléments de navigation. Je vais trouver des éléments de lien ici, nous n'avons aucun lien. Et je vais accéder ici à plusieurs pages non suivies d'aucun lien. Ensuite, je vais changer de couleur. La couleur sera de 9 h 26 à 7 h. Et je vais aussi me débarrasser de l'ombre technologique. Réglons-le sur aucun. Comme vous pouvez le constater, la couleur des objets engourdis est modifiée OK, maintenant nous devons prendre soin de nos fesses. Trouvons le fond qui est placé après les gouttes. Au fur et à mesure que je remontais les cinq. Alors nous devrions trouver ici oui, PTN. Je vais sélectionner plusieurs pages, puis aucun élément. Ensuite, nous devons sélectionner, en fait nous avons besoin ici d'articles et d'articles. Ensuite, nous n'avons pas besoin de PTN. Je vais changer le fond dont nous avons besoin ici. Gradients linéaires La transition de couleur va prendre deux directions , non ? La première couleur sera alors F459. Pour ce qui est de la deuxième couleur, je vais utiliser le F3598 Comme vous pouvez le constater, la couleur de fond est modifiée. Ensuite, je vais changer la couleur du texte et il sera blanc. Je vais aussi me débarrasser de Box Shadow. Réglons-le sur aucun, d'accord ? Comme vous pouvez le constater, la navigation est plutôt sympa. La seule chose à faire en ce qui concerne la navigation, c'est de changer l'ombre des menus déroulants. Je vais le modifier légèrement. Trouvons alors le menu déroulant . Je vais ajouter ici, en fait, nous devons placer le code ici. Je vais sélectionner un numéro multipage, suivi de O éléments Ensuite, nous devons descendre. L'ombre de la boîte sera 0110. Ensuite, nous avons besoin de la couleur RGP 130. Ensuite, le prochain sera 162. Ensuite, nous avons besoin de 235, et l'opacité sera de 0,4 OK. Maintenant, comme vous pouvez le voir, nous avons ici un effet d'ombre différent et je pense il est bien meilleur que le précédent pour le fond blanc. Très bien, donc avec la navigation, c'est terminé. Voyons si le Tiki no bar fonctionne bien. Pour cela, je vais augmenter la hauteur du conteneur pendant un moment. Je vais utiliser des attributs de style. Ensuite, nous avons besoin de hauteurs. Réglons-le sur 150, mettons la hauteur. Et maintenant, vérifiez les résultats. Comme vous pouvez le constater, la barre adhésive fonctionne très bien. Nous avons ici une barre de défilement personnalisée, mais nous allons la modifier. Nous n'avons pas besoin de la barre de défilement violette ici. Si je me souviens bien. Nous avons ici une barre de défilement verte. Nous le modifierons un peu plus tard. OK, tout fonctionne bien. La navigation est plutôt sympa. Ensuite, nous devons ajouter le contenu à la page du client. Pour cela, passons à la prochaine conférence. 50. Créer le balisage HTML pour la section Témoignages: Lors de la conférence précédente, nous avons commencé à travailler sur la page du client. Nous avons personnalisé la navigation et il est maintenant temps d'ajouter le contenu à la page. Jetons un coup d'œil au projet terminé. La page du client inclura les témoignages des clients Nous allons créer le balisage HTML pour le contenu de la page du client Passons au code VS, et juste après la navigation, insérons de nouveaux commentaires pour les témoignages Ensuite, je vais ouvrir la section avec les témoignages sur les noms des cours Le premier élément que je vais insérer ici sera l'en-tête. Nous avons besoin de développements avec l' en-tête des témoignages relatifs aux noms de classes Ensuite, je vais ouvrir une balise d'en-tête avec le texte de ce que les clients disent de nous. Ensuite, nous devons continuer, car nous allons ajouter trust pilot. Après l'élément d'en-tête, je vais ouvrir une balise profonde avec les étoiles du nom de classe. Nous allons avoir des étoiles ici. Je vais insérer ici un symbole Google Material. Allons dans le navigateur et recherchons les symboles matériels de Google. Ensuite, nous devons trouver une icône appelée classe d'hôtel. C'est l'icône dont nous avons besoin. En fait, je vais l'arrondir, puis prendre l'élément span et le coller ici. Si nous vérifions le navigateur, vous verrez que l' étoile est affichée sur la page. Ensuite, je vais ajouter Tug avec le nom de classe Trust Pilot Ensuite, nous avons besoin de l'élément Span, puis du texte Trust Pilot. Ensuite, je vais ajouter ici cinq étoiles. Ouvrons Deep Tug. Accédez ensuite au navigateur et recherchez l' icône appelée étoile. Nous avons besoin de cette icône. Prenons l'élément span et collons-le dans le développement. Dans l'ensemble, nous aurons cinq étoiles. Je vais donc dupliquer cette ligne de code quatre fois. Vérifie le navigateur. Comme vous pouvez le constater, nous avons ici cinq étoiles. OK, la prochaine chose que je vais faire est de créer un autre développement, qui sera un emballage de témoignages Au total, nous aurons 12 témoignages différents. Ouvrons Deep Tug avec le témoignage du nom de la classe. Nous allons créer le premier, puis dupliquer le témoignage et apporter quelques modifications Le témoignage comportera deux éléments différents. Nous aurons un haut de témoignage et un corps de témoignage. Ouvrons de tu avec le nom de la classe. Le témoignage inclura l'image du client ainsi que le nom Je vais insérer une balise d'image, puis nous devons spécifier le chemin de l'image. Avant cela, nous devons quitter le dossier actuel. En ce moment, nous sommes dans le dossier HTML. Nous devons quitter le dossier, nous avons besoin de points et de s. Ensuite, nous devons entrer dans le dossier des images et sélectionner celui du client. J'ai besoin d'un nom, je vais ouvrir le tag span. Il s'appellera John Smith. Nous avons ici l'image du client ainsi que son nom. Bien, parlons de l'élément principal du témoignage. Ensuite, nous avons besoin d'un corps de témoignage. Les éléments incluront l'en-tête en forme d'étoiles et le paragraphe. En fait, c'est un titre, c'est aussi un paragraphe. Insérons ici des étoiles. Je vais prendre ces éléments avec cinq étoiles, puis les coller ici. Ensuite, nous avons besoin d' un paragraphe avec un texte factice. Nous avons besoin de cinq mots. Je vais insérer vos cinq Lorin, puis insérer un autre paragraphe En fait, si nous examinons le projet terminé, vous constaterez que nous avons ici différents paragraphes. La longueur des paragraphes est différente. le moment, je vais laisser cet élément vide, puis nous nous en occuperons un peu plus tard. Bien, alors passons au balisage HTML du premier témoignage Comme je l'ai dit, nous aurons 12 témoignages différents. Je vais dupliquer ce code 11 fois, puis je vais apporter quelques modifications. En fait, nous devons changer, tout d' abord, je vais insérer ici le nombre de mots. Je veux dire, nous avons besoin de Lauren 30 ans. Ensuite, nous devons nous occuper du deuxième témoignage dont nous avons besoin ici, le deuxième client Alors le nom sera Jack Brown. J'utilise des noms de domaine, vous pouvez utiliser ce que vous voulez Ensuite, je vais aller à Inerre Lauren 40. Alors nous aurons ici le client 3. Il s'appellera Smith. Pour ce qui est du paragraphe, je vais m' immiscer dans Lauren 50. Ensuite, nous avons ici le client 4, qui s'appellera Nick Peters En ce qui concerne le paragraphe, nous aurons ici 30 mots. Nous avons besoin de Lauren 30 ans. OK. Ensuite, nous avons besoin du client 5 nommé Philip Dough. Pour ce qui est du paragraphe, ce sera Laura 13. En fait, nous avons besoin de 12 articles. C'est le premier 112345. Il s'agit de six éléments, donc je vais le dupliquer six fois. Maintenant, j'espère que nous avons 12 témoignages. Il s'agit du cinquième témoignage. Il nous faut maintenant le client 6. Alors le nom sera Jane Smith. Pour ce qui est du paragraphe, ce sera Lauren 40. Ensuite, le client suivant est le client 7 , nommé Jessica Mendes, et le paragraphe sera Lauren 40 C'était le septième témoignage. Il nous faut ici le client 8 du nom de Steve Thompson. Le paragraphe sera Lauren 50. Il nous en faut neuf et ce sera Maria Green. Et le paragraphe sera, euh, 60. Alors nous avons ici le client 10. C'est Alexis, Alexis Smith, et nous avons besoin de Lorem 40 Puis le client 11, Bob Brown, Lum 20. Enfin, nous avons besoin du client 12. Ce sera Rose Hanson. En ce qui concerne le paragraphe, je vais insérer ici, Laurum 40 OK, donc je pense que le balisage horaire H est prêt, et j'espère que tout est correct ici Allons dans le navigateur et vérifions-le. Nous avons ici des images avec des noms et des paragraphes différents. Je pense que tout ce que nous n'avons pas ici, l'image du 11e client. Il se peut que nous ayons une erreur. Il s'agit du client 11. Maintenant, le problème est réglé. Je pense que tout semble correct. Nous devons maintenant personnaliser cette section. Passons à la prochaine conférence. 51. Témoignages de stylisation: Dans la conférence précédente, nous avons créé le balisage HTML pour la page du client Nous avons créé la section des témoignages. Vous pouvez voir ici tous les éléments. Nous devons maintenant commencer à styliser ces éléments. Mais avant cela, je vais faire une chose. Comme vous pouvez le voir, nous avons ici une barre de défilement dont le fond est violet Mais si nous examinons le projet terminé, vous verrez que la barre de défilement a une couleur verte différente Je vais m'occuper de ça dans un premier temps. Passons au code VS et créons d'abord un nouveau fichier dans le dossier CSS. Ce seront des clients. Ensuite, je vais déplacer ce fichier ici. Nous devons lier le fichier CSS du client au fichier HTML. Je veux dire, les clients pointent du code HTML. Je vais dupliquer ce code. Et nous devons changer ici le nom du fichier qui sera « clients ». OK, une fois les fichiers connectés. Ensuite, je vais accéder au fichier CSS de la vignette et récupérer ce code. Je veux dire, le code où nous changeons la couleur de fond de la barre de défilement Bruit sourd. Copions ce code, puis passons aux clients du fichier CS. Tout d'abord, je vais insérer vos commentaires pour barre de défilement personnalisée , puis coller le code Ici, nous devons changer ces deux couleurs. La première couleur sera 0067 A. Quant à la deuxième couleur, je vais utiliser 34 DC 87 Comme vous pouvez le voir, la couleur, je veux dire la couleur d'arrière-plan de la barre de défilement, est modifiée. Et ça a l'air plutôt sympa. Très bien, voyons donc à propos de la barre de défilement. Ensuite, nous devons vous emmener de la section des témoignages. Je vais insérer vos nouveaux commentaires pour les témoignages. Ensuite, nous devons sélectionner l'élément de section contenant les témoignages des noms de classe Tout d'abord, je vais définir la hauteur des éléments de section avec la main. Je vais les régler tous les deux à 100 %. Ensuite, je vais déplacer la section vers le bas en utilisant la marge supérieure. Je vais mettre en haut. En fait, nous créons l'espace entre le bord supérieur de la page et la section. Ensuite, je vais utiliser CSS Flexbox afin d' aligner les éléments flexibles Je vais régler l' affichage pour qu'il soit flexible. Ensuite, je vais changer de direction car nous allons aligner les éléments verticalement. Nous avons besoin de la direction de flexion pour être une colonne. Et nous devons également aligner les éléments au centre, comme vous pouvez le voir, le contenu placé au centre. En fait, nous devons modifier la taille des images car elles sont actuellement trop grandes. Je vais sélectionner le témoignage en haut, suivi de la pile d'images Réglons la hauteur de l'image, dans les deux cas à six RAM. Ensuite, je vais placer les pieds des objets à couvrir afin d'éviter de rétrécir les images et de perdre en qualité d'image Ensuite, je vais arrondir les images. Pour cela, nous avons besoin d'un rayon d' une valeur de 50 % chem. Comme vous pouvez le constater, nous avons ici un bien meilleur résultat car les images sont devenues plus petites. Ensuite, je vais m' occuper de l'en-tête. Je suis là, en-tête du témoignage. Nous devons aligner le texte au centre. Ensuite, je vais m'occuper de l'élément de titre H one. Allons-y et sélectionnons en-tête du témoignage suivi de l'élément de titre H. Tout d'abord, changeons la famille de téléphones. Ce sera Molly Cursive. Ensuite, je vais régler la taille du téléphone sur pi. Nous devons également changer la couleur utilisée ici, la couleur 0926, en sept Vérifions-le dans le navigateur. Nous avons ici le titre. Maintenant, je vais augmenter l' espace entre les lettres. Réglons-le sur 0,2 RAM. Je vais également diminuer la largeur du titre. Fixons-le à 70 % Comme vous pouvez le voir, le titre est placé sur le côté gauche de la page. Nous devons le placer au centre, et pour cela je vais utiliser la marge, même si cela nous permet de placer l'élément au centre. Si vous souhaitez centrer l'élément, vous devez utiliser simultanément la largeur et la marge. Souviens-toi de ça. Maintenant, comme vous pouvez le voir, le titre est placé au centre. Ensuite, je vais modifier la hauteur de la ligne. Réglons la hauteur de la ligne à huit. OK, ensuite je vais m' occuper des étoiles. Sélectionnons le développement du wrapper qui porte le nom de classe Stars Je vais utiliser Flex Box pour aligner les éléments. Comme vous pouvez le constater, les éléments sont placés horizontalement dans une rangée. Ensuite, je vais m' occuper de la position de l'élément. Réglons la position sur absolue. Nous devons positionner les éléments en fonction de leur élément parent. Nous avons besoin de la position relative du parent qui est l'en-tête du témoignage Maintenant, je vais définir les deux positions, ce sera 50 %. Quant à la bonne position, je vais la porter à 15 %. D'accord, vérifions les résultats. Les éléments sont bien placés et correctement. Ensuite, je vais m' occuper du projet pilote de confiance, mais comme je le vois, les étoiles sont soulignées. Si nous examinons le projet final, vous pouvez voir que les étoiles ne sont pas tracées, elles sont remplies. Allons visiter les symboles de Google Material. Allons consulter le site Web. Comme vous pouvez le voir dans la section des filtres, nous avons ici une option appelée champ et nous devons l'activer. Maintenant, si je recherche l'icône, vous verrez qu'il s'agit d'un champ. Si je clique sur l'icône, vous pouvez voir que nous avons ici exactement le même élément span, le même nom de classe et l'étoile de contenu. La seule différence que nous avons ici est que dans ce cas, lorsque nous utilisons les icônes de champ, la valeur de la propriété du champ est égale à un. Mais si nous vérifions le lien dans notre fichier H Neal, vous verrez que nous avons ici la propriété du champ Sa valeur appropriée est zéro. Si je remplace zéro par un et que je consulte le navigateur, vous verrez que toutes les étoiles sont remplies. D'accord ? Le problème est résolu. Passons à autre chose et passons à l'élément suivant, savoir Trust Pilot. Je vais sélectionner Trust Pilot et définir la marge en haut, car nous avons besoin d' espace en haut, fixons la marge maximale à un m. OK, la prochaine chose que je vais faire est occuper de cet élément de texte ici. Je veux dire Trust Pilot. Passons au code VS et au pilote de confiance puis aux panelements, si nous examinons le balisage HTML Vous pouvez voir ici que cet élément, l'élément trustpilot, inclut différents éléments de span Nous avons ici le text span trustpilot, et nous avons également ici les symboles avec des éléments span Dans notre cas, nous devons sélectionner uniquement cet élément span. Pour cela, je vais utiliser l'un des combinateurs CSS, ce signe ici Cela nous permet de sélectionner uniquement le premier élément d' envergure secondaire ici. Si j'ajoute ici des styles tels que la taille de police 2,5 RAM, alors la couleur est de 0926 à sept Je vais également utiliser l'espacement des lettres. Disons-le, 2,3 RAM. Ensuite, si nous vérifions le navigateur, vous verrez que seul cet élément span est stylé, ces étoiles ne sont pas modifiées Si je m'en débarrasse, veuillez signer d'ici puis changer de couleur pour obtenir des résultats différents. Comme vous pouvez le constater, tous ces éléments du pan sont maintenant modifiés. Mais si nous ajoutons ici le combinateur, l'élément de panneau changera OK, j'espère que c'est clair pour toi, je vais récupérer ces tuiles. OK, ensuite nous devons prendre soin des étoiles. Je vais sélectionner Trust Pilot, puis le développement. Ensuite, nous avons besoin de Span. Changeons la couleur. Ça va être 00. Ensuite, nous avons besoin d'une taille de police trois, Ram. De plus, je vais utiliser la marge. La marge sera nulle en haut et en bas -0,25 RAM. C'est sur le côté gauche et sur le côté droit. OK, les étoiles sont plutôt jolies. Ensuite, je vais m' occuper de cette étoile ici. Je vais sélectionner les étoiles suivies de l'élément span. Nous devons maintenant utiliser la même technique. Nous avons besoin du premier élément enfant. Je vais réutiliser le combinateur CSS. Changeons la taille de police. Il y aura cinq RAM. Ensuite, il nous faut de la couleur. Je vais régler la couleur sur 00b 67. Et nous devons également marcher du bon côté. Réglons-le sur une RAM. Je pense que nous en avons terminé avec l'en-tête. Tout a l'air plutôt sympa. Ensuite, nous devons nous occuper des témoignages. Je vais accéder au code VS et sélectionner le témoignage. Je vais définir la largeur et la hauteur du témoignage La largeur sera de 33 RAM. Quant à la hauteur, je vais la fixer à 100 %. Ensuite, je vais placer les témoignages sur différentes lignes Pour cela, je vais sélectionner un emballage de témoignages, fixons-le à 80 %, puis je vais utiliser Flex box Nous avons besoin de Display Flex pour placer les éléments flexibles sur différentes lignes. Nous devons utiliser un film flexible. Je vais également justifier le contenu et le placer au centre. Maintenant, comme vous pouvez le constater, les témoignages sont alignés. Ensuite, je vais créer un espace dans l' emballage des témoignages que je vais utiliser, Nous avons besoin d'un rembourrage de dix RAM en haut et en bas et de zéro sur les côtés gauche et droit D'accord. Tout a l'air plutôt sympa. Ensuite, nous devons revenir au témoignage, et je vais ajouter ici quelques styles différents Nous avons besoin d'une marge pour créer un espace entre les témoignages Ajoutons-le à deux RAM sur les quatre côtés. Ensuite, je vais régler Box Shadow à 01 Ram, dix Ram. La couleur sera le 113. Zéro, alors il nous en faut 162. Le prochain sera 235, et pour ce qui est de l'opacité, je vais utiliser 0,4. Maintenant, les témoignages sont bien meilleurs Ensuite, je vais les arrondir. Pour cela, nous avons besoin d'un rayon de bordure dont la valeur est un Ram. Je vais également créer un espace à l'intérieur du témoignage à l' aide d'un rembourrage Réglons-le à deux m sur les quatre côtés. C'est bon. Ensuite, je vais m'occuper du haut du témoignage. Je parle de l'image et du nom. Tout d'abord, je vais sélectionner l' emballage qui est le meilleur témoignage En fait, c'est le top du témoignage et non le top du témoignage. Utilisons Flex Books pour afficher Flex. Ensuite, je vais aligner les éléments au centre. Créons également de l'espace en bas en utilisant la marge. En bas, 1,5 RAM. Bien, après cela, je vais sélectionner les éléments de span, je veux dire le nom du client. Écrivons ce code après image, je vais sélectionner le haut du témoignage, suivi de l'élément span Je vais augmenter la taille du téléphone. Disons-le à 1,8 RAM. Le texte sera en majuscules. Nous avons besoin de transformer le texte en majuscules. Ensuite, je vais fixer la marge de gauche à deux RAM. Ensuite, nous avons besoin de couleur, et ce sera 588 Enfin, nous avons besoin que l' espacement des lettres soit de 0,1 exécution. OK, donc tous les noms sont plutôt jolis. Ensuite, nous devons prendre soin des éléments profonds contenus dans le corps du témoignage. Je parle de l'enveloppe des étoiles. Sélectionnons le corps du témoignage suivi du développement Je vais régler la marge à un RAM en haut et en bas et à zéro sur les côtés gauche et droit. Nous avons maintenant un peu d'espace. Ensuite, je vais m' occuper des étoiles. Nous allons sélectionner Testimonial Body, puis le développement. Ensuite, nous avons besoin de Span. Je vais augmenter la taille du téléphone, elle sera de trois mètres, puis changer de couleur. Je vais utiliser ici cette couleur verte. Les étoiles sont plutôt jolies. La seule chose que nous devons faire est de prendre soin de ces paragraphes ici. Commençons par le premier paragraphe. Je vais sélectionner le corps du témoignage, puis les éléments Et puis nous avons besoin de N sélecteur d'enfants. Nous avons besoin d'un sélecteur d'enfants. Vous pourriez penser que j'en écris une ici. Mais si nous examinons le fichier de courrier HT, vous verrez que ce paragraphe est le deuxième membre du développement. Au lieu d'un, il nous en faut deux. Augmentons la taille du téléphone. Ce sera 1,8 RAM. Ensuite, nous avons besoin de la famille téléphonique. Je vais le régler sur Molly Cursive. Déplaçons ensuite cette ligne vers le haut. Je vais mettre le poids du téléphone en gras. Et je vais changer de couleur. Il sera 9 h 26 moins sept heures. Enfin, je vais utiliser ici, margin, Bottom one, Ram. OK, vérifions les résultats. Le premier paragraphe est plutôt sympa. Passons maintenant au deuxième paragraphe. En fait, je vais dupliquer ce code, puis modifier le sélecteur de graphique Il va y en avoir trois. Je vais me débarrasser de la famille de téléphones, alors la taille du téléphone sera de 1,6 RAM. Ensuite, nous avons besoin que le poids du téléphone soit de 300, la couleur sera de 466. Enfin, nous avons besoin d'une marge. En bas, un Ram. OK, c'est ça. Les témoignages sont stylés et ils sont plutôt jolis. Avec la section des témoignages, c'est terminé. Mais avant de terminer la conférence, je vais faire une dernière chose. Si nous examinons le projet terminé, vous verrez que nous avons ici le I en pied de page que nous avons créé pour la page d'accueil. La seule chose que je vais faire est simplement de copier le balisage HTM du pied de page depuis la page d'accueil Copions-le et collons-le dans la page du client. Si je copie et colle ici le pied de page, puis que je vérifie le navigateur, vous verrez que nous avons exactement le même pied de page que sur la page d'accueil OK, ça y est, la page du client est prête. Ensuite, nous devons nous occuper de la page des produits. Et pour cela, passons à la prochaine conférence. 52. Créer le balisage HTML pour les produits Page: Dans la section précédente, nous avons créé la page du client. Ça a l'air plutôt sympa et cool. Il est maintenant temps de passer à autre chose et de commencer à créer notre page suivante, qui sera la page du produit. Passons à la version finale de notre projet et passons à la page du produit. La page des produits se compose de plusieurs parties différentes. Nous allons avoir ici l'entête, qui comprend deux rubriques. Ensuite, nous avons ici cette partie qui comprend deux côtés, gauche et droite. Sur le côté gauche, nous avons quelques éléments textuels. Et sur le bouton sur le côté droit, vous pouvez voir de belles et belles images du projet. Ensuite, nous avons ici une section qui ressemble à une section promotionnelle. Nous avons ici un effet d'horreur sympa et cool. bas, vous pouvez voir le pied de page que nous avons utilisé dans les pages I précédentes, la page d'accueil et sur la page clients Tout tourne autour de ça. La page du produit, je la trouve plutôt jolie, cool et moderne. Il est temps de commencer à créer cette page. Je vais passer au code VS. Je vais créer une nouvelle page, je veux dire un fichier HTML et je vais l'appeler products HTML. Créons également le fichier CSS et appelons-le products SS. Je vais fermer deux dossiers alors, en fait, nous avons besoin de clients. Ouvrons-le. Je vais copier l'intégralité du contenu et le coller dedans. Les produits du fichier HTML, nous devons conserver ici ces éléments HTML par défaut. Il suffit de changer le nom du fichier CS. Ce seront les produits dont nous aurons besoin ici. Ensuite, je vais laisser ici la navigation. Je vais supprimer la section des témoignages. Supprimons la section des témoignages. Je pense que c'est ça. Le fichier HTML est prêt. Regardons la page des produits. Comme vous pouvez le constater, nous avons ici la navigation et le pied de page Je vais masquer le pied de page pendant un moment. Afin de rendre notre processus de travail plus pratique. Nous avons différentes manières de masquer les éléments. Dans ce cas, je vais utiliser un attribut appelé. Comme vous pouvez le constater, le pied de page est masqué. D'accord ? Donc, comme je l'ai dit, nous allons commencer à créer une page de produits. Et la première chose à faire est de préparer le balisage HTML comme d' habitude dans la section des nouveaux commentaires non sécurisés pour les produits Ensuite, je vais ouvrir les éléments de section avec le nom de classe products. Ensuite, nous avons besoin de développements, qui seront l' enveloppe du contenu Je vais l'appeler product wrapper. Comme je l'ai dit, la page du produit comprendra trois parties différentes. Le premier sera l'en-tête dont nous avons besoin ici, en-tête des produits, qui comprendra deux éléments de titre. Le premier sera constitué d'éléments de titre Hone. Je vais insérer ici des thèmes et des plugins. Ensuite, nous avons besoin de H trois éléments de titre. Le texte sera facturé selon les thèmes et plugins les plus populaires au monde Bien, asseyons-nous à propos de l'en-tête. Ensuite, nous devons créer la deuxième partie. Je vais appeler cela du contenu des produits. Créons des développements avec le nom de classe, Products content. Je ne sais pas si c' est un bon nom, mais je vais quand même l'appeler. Dans le contenu des produits. Nous aurons deux côtés. Je veux dire, le côté gauche et le côté droit. Nous avons besoin de développements qui ne porteront que sur le contenu du produit. Je vais également créer le côté droit. Nous avons besoin de contenu de produits, n'est-ce pas ? OK, occupons-nous du côté gauche. Sur le côté gauche, nous aurons H un élément de titre avec le texte construit. Ensuite, je vais insérer ici paragraphe avec un texte factice en forme de loam ipsum Le nombre de mots sera de 13. Nous avons également besoin d'un bouton. Le type va être, nous avons besoin ici de l'attribut type et ce sera un bouton. Je vais suivre le nom de la classe. Le cours portera sur les produits, PTN. Comme le texte du bouton, je vais aller ici, en savoir plus sur nous qui sommes assis sur le côté gauche. Occupons-nous maintenant du côté droit. Et le côté droit comportera cinq images différentes. Nous avons besoin de votre étiquette d'image. Ensuite, nous devons spécifier le chemin du fichier. Tout d'abord, nous devons quitter le dossier en cours. Ensuite, nous devons entrer dans le dossier des images. Et je vais sélectionner Web 2, image 1. Dupliquons cette ligne de code quatre fois car nous aurons besoin de cinq images. La deuxième image sera Web 2, image 2. Ensuite, nous aurons le Web 2, l'image 3. La prochaine sera le Web 5, image 1, et le Web 5, image deux. Tout dépend du contenu des produits. Voici les images en ce moment, elles sont trop grandes, mais nous allons nous en occuper. La prochaine chose que je vais faire est de créer la troisième partie de la section. La troisième partie sera, comme je l'ai dit, la promotion des produits. Nous aurons deux parties. La première partie sera consacrée aux formes. Ces formes ici. Nous avons ici un cercle, deux cercles et le rectangle que je vais insérer ici Développements et ce seront des formes promotionnelles de produits. Nous aurons ici un rectangle, puis je vais créer un petit cercle et ensuite nous aurons besoin d'un grand cercle. Ensuite, je vais insérer un autre développement qui sera du contenu promotionnel. Dans le contenu promotionnel, nous avons besoin d'éléments d'en-tête H. Le texte sera de 100 000. Nous avons besoin d'ici, plus de 100 000 clients créent déjà sites Web géniaux et modernes avec du code et de la création. Ensuite, nous devons rejoindre la communauté la plus autonome. OK, c'est à propos de l'élément d'en-tête. Ensuite, nous avons besoin de Batson. Le type sera Patson. Pour ce qui est du texte dont nous avons besoin ici, inscrivez-vous dès aujourd'hui d'ailleurs, mais je vais interférer avec le texte. Nous offrons une garantie de remboursement de 30 jours. Joignez-vous à nous. D'accord. Enfin, je vais insérer votre développement. Ce sera Promo Shadow. Nous allons créer cet effet d'ombre agréable et cool. C'est pourquoi nous avons créé ce développement ici. OK, je pense que tous les éléments sont créés et que le balisage HTML est prêt Nous devons maintenant styliser ces éléments. Et pour cela, passons à la prochaine conférence. 53. Section des produits de coiffage: Très bien, dans la conférence précédente, nous avons créé le balisage HTML pour la page des produits Il est maintenant temps de styliser ces éléments. En fait, avant de commencer à styliser cette section, je vais modifier quelque chose dans le fichier HTML. J'ai ajouté ici cinq images différentes, mais en réalité, nous n'en avons besoin que de trois. Les trois premières images, c'est une erreur de ma part, et je suis désolée, je vais supprimer ces deux images car nous n'en avons pas besoin. Ensuite, je vais m' occuper du CSS car, souvenez-vous que nous avons créé un nouveau fichier CSS lors de la conférence précédente. C'est ce qu'on appelle le CSS du produit. Je vais l'ouvrir, déplaçons ce fichier sur le côté droit. Ensuite, je vais fermer le fichier CSS des clients. La première chose que je vais faire est de suivre les commentaires sur les produits. Ensuite, je vais sélectionner l'élément de section. Ce sont des produits. Tout d'abord, je vais définir la hauteur maximale. La largeur sera de 100 % Quant à la hauteur, je vais également la faire de 100 %. Je vais également créer de l'espace en haut de la section en utilisant le haut pour courir OK, donc la largeur et la hauteur sont appliquées à la section. Et nous avons également ici l'espace entre la navigation et la section. La barre de défilement est également affichée. Si nous examinons le projet terminé, vous verrez que nous avons ici une barre de défilement avec une couleur de fond différente. Je vais le changer. Revenons au code VS. Je vais ouvrir un fichier de style CSS. Nous devons corriger l'intégralité de ce code et le coller ici. Ensuite, je vais supprimer ce code. Nous n'en avons pas besoin. En outre, nous devons supprimer la piste de la barre de défilement. Ensuite, changeons les couleurs ici. La première couleur sera 14b3. C'est pour la deuxième couleur que je vais utiliser ici, 538 pieds se vendent Vous pouvez voir que la couleur d'arrière-plan de la barre de défilement a changé. Et ça a l'air plutôt sympa et ça correspond aux couleurs de cette page. Ensuite, je vais m'occuper de l'emballage des produits. Nous allons sélectionner cet élément, la largeur et la hauteur. Les deux seront à 100 %. Ensuite, je vais utiliser Flex Box pour aligner les éléments. Nous avons besoin de Display Flex. Ensuite, je vais changer de direction car nous allons aligner les éléments verticalement. Nous avons besoin de la direction de flexion pour être une colonne. Et je vais également aligner les éléments au centre horizontalement. Comme vous pouvez le constater, le contenu est placé au centre. Ensuite, je vais m' occuper de l'en-tête. Sélectionnons l'en-tête des produits. Nous devons aligner le texte au centre à l'aide du texte. Aligner le centre. Le texte du titre est placé au centre. Ensuite, nous devons nous occuper des titres. Je vais commencer par le premier titre, qui est un H. Nous avons besoin de l'en-tête du produit suivi de l'élément d'en-tête H. Tout d'abord, je vais définir la famille de téléphones. Ce sera le cas, nous n'en avons pas besoin, nous avons besoin de la famille téléphonique. Ce sera Molly Cursive. Ensuite, je vais changer la taille de police. La taille de police sera de six tours. Comme nous avons besoin d' un espacement entre les lettres pour créer un espace entre les lettres, ce sera 0,2 RAM Enfin, je vais changer la couleur du titre. La couleur sera 26353. OK, le premier titre est plutôt sympa. Ensuite, nous devons nous occuper de la deuxième rubrique, qui est la troisième. Sélectionnons. En-tête du produit suivi des trois éléments de titre H. Tout d'abord, je vais définir la taille de police. Il y aura trois Ram. Ensuite, nous avons besoin de poids. Je vais en faire 300. Changez également la couleur. La couleur sera 567599, puis créez une marge. Je suis dans l'espace, la marge sera de deux RAM en haut, puis zéro sur le côté droit, puis 15 RAM en bas, zéro sur le côté gauche. Nous avons donc ici l'en-tête. Les deux rubriques sont plutôt jolies et nous devons maintenant nous occuper du contenu du produit Je veux dire, cette partie ici, comme je l'ai dit, et comme vous le voyez, les images sont plus grandes. Je vais modifier la taille des images, puis nous allons styliser le reste des éléments. Je vais sélectionner les produits, le contenu. Dans ce cas, nous avons besoin de votre image avec un sélecteur pour enfants. Je vais sélectionner la première image. Nous devons définir la largeur. Il va faire 35 RAM. Dupliquons ensuite ce code deux fois, changeons le numéro du nième sélecteur enfant Nous avons besoin de 2.3 La deuxième image aura une capacité égale à 20 RAM. Quant à la troisième image, elle sera de 30 RAM. Maintenant, les images deviennent plus petites et nous pouvons styliser le reste des éléments. Je vais sélectionner le wrapper, qui est le contenu du produit Tout d'abord, je vais définir la hauteur maximale. La largeur sera de 80 %. Quant à la hauteur, je vais la porter à 90 RAM. Ensuite, pour rendre cet élément visible, nous devons ajouter une ombre carrée pour la valeur 01 Ram, dix Ram, et la couleur sera la valeur RGBA La première valeur sera 130, puis nous aurons 162, puis nous aurons besoin de 235 Enfin, l' opacité sera 0,4. Maintenant, comme vous pouvez le voir, l'élément, je veux dire le contenu du produit, l'élément wrapper est visible Ensuite, je vais coller rembourrage afin de créer de l'espace à l'intérieur de l'élément Le rembourrage sera composé de cinq béliers sur les quatre côtés. Nous allons également arrondir les coins de l'élément en utilisant le rayon de bordure. Et la valeur sera d'un RAM. Nous avons ici le rembourrage et aussi les coins qui l'entourent. Ensuite, je vais aligner les éléments dans le contenu des produits en utilisant CSS, Flax box. Je vais ajouter ici un drapeau d'affichage et nous devons également aligner les éléments au centre. En fait, nous avons un petit problème. Cette partie doit être placée en dehors du contenu du produit. C'est peut-être là le problème. Par erreur, j'ai ajouté du contenu promotionnel dans le contenu du produit. Supprimons ce code et ajoutons-le en dehors des développements. Maintenant, le problème devrait être résolu. Eh bien, nous avons ici le même problème. Trouvons le contenu des produits. Il s'agit de la fermeture, du tag du contenu du produit. Par conséquent, comme je l'ai dit, nous devons récupérer le code du contenu chromo et le coller en dehors du contenu des produits Maintenant, le problème devrait être résolu à coup sûr. Et oui, comme vous pouvez le constater, le contenu du Romo est placé en dehors du contenu des produits Maintenant, une fois ce problème résolu, nous devons personnaliser les éléments du contenu du produit. Nous devons commencer par le contenu des produits qui restent. Définissons que la largeur sera de 40 % du contenu du produit. Pour ce qui est de la hauteur, je vais l'atteindre à 100 %, puis je vais créer un rembourrage Je veux dire un peu d'espace à l'intérieur de l'élément. Le rembourrage sera de 15 grammes en haut et en bas et de zéro sur les côtés gauche et droit Ensuite, nous devons aligner les éléments à l'aide de la boîte flexible. Je vais utiliser Display Flex. Ensuite, nous devons placer les éléments flexibles verticalement dans une colonne. Par conséquent, nous devons changer le sens de la colonne. Et je vais également créer de l'espace entre les éléments flexibles en utilisant Justify Content Space de manière uniforme. Cela ajoutera un espace uniforme entre les éléments flexibles. Comme vous pouvez le constater, les éléments du côté gauche sont alignés. Ensuite, nous devons personnaliser chacun des éléments. Nous devons commencer par le titre. Je vais sélectionner H un élément de titre. Nous avons besoin de laisser le contenu des produits, suivi de l'élément d'en-tête H. Tout d'abord, changeons la famille de téléphones. Ce sera Croissant One Co. Ensuite, nous devons changer la taille du téléphone. Ce sera dix RAM. Ici, nous avons le titre. Si je regarde le projet terminé et que je regarde le titre, vous verrez que le titre a un effet de dégradé linéaire. Nous avons ici la couleur bleue. Comme vous pouvez le constater, la couleur a un effet de dégradé linéaire. Passons au code VS et définissons l'arrière-plan sur un dégradé linéaire. Nous devons changer le sens de la couleur. Il va y avoir deux transitions, n'est-ce pas ? La première couleur sera alors 35730. C'est pour la deuxième couleur, ça va être de deux à 509. Et je vais aussi m'y tenir à 80 % afin de modifier la transition de couleur. Ensuite, nous devons utiliser la propriété suivante. C'est ce qu'on appelle le clip d'arrière-plan du kit Web Il doit être défini sur du texte. Enfin, nous avons besoin d' une couleur transparente. Le titre devrait maintenant avoir un effet de dégradé linéaire. Nous l'avons ici. Je pense que c'est différent du projet fini. Vérifie les couleurs dont nous avons besoin. 357.3 il devrait être 730 puis 22509. OK, nous avons maintenant exactement la même couleur de fond. Je veux dire, l' infection linéaire que nous avons dans le projet terminé Bien, asseyons-nous au-dessus du titre. Ensuite, nous devons nous occuper du paragraphe, sélectionner les produits, le contenu laissé, puis les éléments. Tout d'abord, changeons la famille de téléphones. Je vais utiliser votre téléphone appelé Mull per, alors la taille du téléphone sera de 1,6 RAM Je vais également changer la couleur du texte. La couleur sera 537983. Ensuite, je vais réduire l'espace entre le titre et le paragraphe en utilisant la marge supérieure. Dans ce cas, nous avons besoin d'une valeur négative moins cinq RAM. Comme vous pouvez le constater, le paragraphe est en mosaïque. En fait, je vais changer la hauteur de la ligne, elle sera de 2,5 RAM. Nous avons maintenant un fait un peu meilleur. OK, c'est tout à propos du paragraphe. Ensuite, je vais m' occuper du bas. Allons-y et sélectionnons Produits, Contenu à gauche, puis les éléments du bas. La largeur du bas sera égale à 50 % du côté gauche. La hauteur sera de six béliers. Je vais changer le fond et utiliser un dégradé linéaire. Le gradient linéaire sera le même que celui que nous avons utilisé pour le titre. Je vais copier la valeur. Comme vous pouvez le constater, nous avons ici le même effet de dégradé linéaire. Ensuite, nous devons nous débarrasser de la bordure par défaut du bas. Réglons la bordure sur aucune et arrondissons les coins en utilisant le rayon de bordure. La valeur sera de cinq RAM. Maintenant que le bouton est plutôt joli, il faut prendre soin du téléphone. Réglons la taille du téléphone. Jusqu'à 1,6 RAM. Ensuite, nous devons transformer le texte en majuscules. Réglons la couleur sur le blanc, mais nous avons ensuite besoin de l'espacement entre les lettres L'espace entre les lettres sera de 0,2 RAM. Et enfin, rapprochons-nous de 0.0 Comme vous pouvez le voir, le bouton est plutôt joli. En fait, avec le côté gauche, c'est terminé. Tout a l'air plutôt sympa. Ensuite, nous devons prendre soin du côté droit. Je vais sélectionner le côté droit. Je veux dire des éléments avec le nom de classe product content. Bien, définissons la largeur. Cela représentera 60 % des éléments parents. Ensuite, je vais sélectionner Image. Utilisons ce sélecteur ici. Nous allons ajouter ici quelques styles courants. Le premier sera la position. Je vais régler la position sur absolue. Ensuite, nous avons besoin de la position relative pour les éléments parents, je veux dire le contenu des produits. Parce que nous allons aligner les images en fonction des éléments de contenu des produits. Je vais ajouter ici la position relative. Ensuite, je vais arrondir les coins des images en utilisant le rayon de bordure. Ce sera un Ram. De plus, nous avons besoin d'une ombre pour toutes les images avec les valeurs 02 Ram, huit Ram, et la couleur sera le noir. Pour ce qui est de l'opacité, je vais la fixer à 0,5 OK, nous avons donc ici les images avec des zones d'ombre Ensuite, nous devons positionner les images pour cela. Ajoutons quelques styles aux images individuelles. Je vais ajouter ici la hauteur, elle sera de 70. Ensuite, afin de maintenir la qualité de l'image, afin d'éviter de la rétrécir, je vais utiliser un couvre-pieds pour objets Nous avons besoin ici de couvrir et de contenir. D'accord, nous devons ensuite nous occuper des positions. Les deux positions seront de 50 %, alors nous avons besoin de la bonne position. Je vais le mettre à 15 %. Ensuite, nous devons centrer la verticale à l'intérieur de l'élément de contenu des produits. Pour cela, nous devons utiliser transformation avec la fonction translate y et la valeur sera de -50% Comme vous pouvez le voir, la première image est alignée et placée au centre des éléments I verticalement Ensuite, nous devons prendre soin de la deuxième image. Je vais ajouter ici. La position sera de 20 % pour la bonne position, passant de 30 à 33 %. La deuxième image est alignée et nous devons maintenant nous occuper de la troisième image, la position. En fait, nous n'avons pas besoin de nous positionner, nous avons besoin de la position inférieure. La position inférieure sera de 20 %, alors nous avons besoin bonne position, 3 % C'est tout. Les images sont alignées et en fait, avec l' élément de contenu du produit, c'est terminé. Ensuite, nous devons nous occuper du contenu pour cela. Passons à la prochaine conférence. 54. Section promotionnelle de produits de coiffage: Dans la conférence précédente, nous avons stylisé la première partie de la page du produit Je veux dire le contenu des produits. Nous devons maintenant nous occuper de la deuxième partie, qui est la promotion des produits. Tous les éléments sont créés et préparés et nous devons à nouveau les styliser. Jetons un coup d'œil au projet terminé. Nous allons personnaliser cette section ici. Et nous devons créer cet effet de survol agréable et cool. D'accord, passons au code VS et sélectionnons la promotion des produits. Je vais définir la largeur et la hauteur. La largeur sera de 100 %. C'est pour la hauteur. hauteur de la fenêtre sera de 150, je veux dire 50 % de la vue Vérifie le navigateur. Comme vous pouvez le constater, la hauteur n'est pas appliquée à l'élément promotionnel des produits. Il se peut qu'il y ait une erreur dans le fichier HTML. Ici, nous avons la promotion des produits. promotion des produits doit inclure le contenu de cette section. En fait, vérifions le tag de fermeture. OK, nous avons quelques erreurs ici. Nous devons supprimer ce code à partir de là car il ne fait pas partie du contenu des produits. Collons-le ici. De plus, nous devons inclure du contenu promotionnel dans la promotion des produits. Nous devons inclure cet élément ici. Maintenant, je pense, et j'espère que tout est correct et que le code devrait fonctionner ici. Nous avons une hauteur égale à 50 % de la fenêtre d'affichage De plus, la largeur est appliquée à 100%. OK. Ensuite, je vais m' occuper des formes, de ces trois formes ici. Je vais commencer par le rectangle Romo. Allons-y et sélectionnons ces éléments. Tout d'abord, nous devons définir la largeur et la hauteur. Les deux feront 60 m. Ensuite, je vais changer la couleur de fond. En fait, je vais utiliser un dégradé linéaire. Je vais définir le sens de la transition de couleur, et je vais le régler à 135 degrés. Dans ce cas, la direction sera en diagonale. La première couleur sera 184b. Pour ce qui est de la deuxième couleur, je vais la rendre transparente. Et je vais également définir la valeur en pourcentage. Cela va être de 8 %. Ici nous avons le rectangle et le fond en dégradé linéaire. Ensuite, je vais m'occuper de la position de cet élément. La position sera absolue. Afin de positionner cet élément en fonction des éléments parents, à savoir la promotion des produits, je vais utiliser la position relative. Ensuite, définissons les positions gauche et supérieure. Je vais commencer par la première place. Ce sera 25 %. Ensuite, la position de gauche sera de 10 %. Vérifie le navigateur. Comme vous pouvez le voir, le rectangle est positionné ensuite. Je vais l'arrondir parce que si nous examinons le projet fini, vous verrez qu'il est arrondi. Je vais utiliser le rayon de bordure avec une valeur de dix RAM, car vous pouvez voir les coins du rectangle qui l'entoure. Ensuite, je vais faire pivoter cet élément. Pour cela, nous devons transformer la fonction de rotation Z. Nous devons faire pivoter l'élément sens Z à la valeur que je vais insérer de 45 degrés. Comme vous pouvez le constater, le rectangle est pivoté. Enfin, je vais diminuer l'opacité du rectangle Faisons en sorte que ce soit 0,2 OK, c'est tout. À propos du rectangle promotionnel. Ensuite, je vais t'emmener hors du cercle. Je veux dire le plus petit. Allons-y et sélectionnons un petit cercle, définissons-le en hauteur. La largeur va être une forme. Pour ce qui est de la hauteur, je vais également lui donner une forme. Ensuite, nous avons besoin d'une couleur de fond, qui sera A D00 Ensuite, nous devons arrondir les éléments en utilisant un rayon de bordure d'une valeur de 50 % Let's. Vérifiez le navigateur. Ici, nous avons le cercle. Après cela, je vais m' occuper du poste. Réglons sa position en valeur absolue. Ensuite, nous devons nous positionner à 20 %. Quant à la bonne position, je vais la fixer à 40 %. Comme vous pouvez le voir, le cercle est positionné. Et la dernière chose que je vais faire est diminuer légèrement l' opacité Réglons l'opacité à 0,7 OK, voyons voir, au niveau du petit cercle Ensuite, nous devons prendre soin du grand cercle. Allons-y et en fait je vais dupliquer ce code, changer le nom de la classe. Nous avons besoin ici d'un grand cercle avec hauteur de 50 Ram. Ensuite, il faut changer la couleur de fond. Je vais utiliser la couleur 34 DC, puis la couleur 87. C'est une couleur verte. Ensuite, nous avons besoin d'un rayon de bordure, 50 % et d'une position absolue. Ensuite, nous devons mettre une certaine position et ce sera 25 %. Pour ce qui est de la bonne position, je vais le dire à 12 %. Débarrassons-nous de l'opacité Nous n'en avons pas besoin dans le cas d'un grand cercle. OK, nous avons donc déjà le grand cercle vert et toutes les formes. Ensuite, nous devons nous occuper du contenu promotionnel. Je parle de cet élément ici. Sélectionnons le contenu promotionnel. Je vais régler la largeur à 60%. Ensuite, la hauteur sera de 45 fram Je vais également changer l'arrière-plan en utilisant un dégradé linéaire. Utilisons la fonction de gradient linéaire. Tout d'abord, définissons le sens de la transition de couleur. Dans ce cas, je vais en utiliser deux, non ? La première couleur sera alors 184 PB. Pour ce qui est de la deuxième couleur, je vais utiliser le 13036 Nous avons ici le contenu promotionnel. Je vais le placer ici, au centre. Pour cela, nous devons changer de position. Je vais régler la position sur absolue. Ensuite, pour parfaitement centrer l'élément, nous avons besoin de la même technique. Nous devons utiliser le coin supérieur gauche et transformer les propriétés. Je vais définir la position supérieure à 50 %, puis la position gauche sera de 50 %. De plus, nous avons besoin d'une transformation avec une fonction de traduction et les valeurs seront -50 % et encore une fois de -50 %. Maintenant, dans ce cas, l'élément est parfaitement au centre de la section Ensuite, je vais faire en sorte que la boîte soit légèrement arrondie. Pour cela, nous avons besoin d'un rayon de bordure avec la valeur 1,5 à partir de. Je vais créer de l' espace à l'intérieur de la boîte, mais nous n'avons besoin d'espace que sur les côtés gauche et droit. Nous devons mettre une valeur de 0,5 image. D'accord, après cela, je vais aligner le contenu du contenu promotionnel, je parle de cet élément. Pour aligner les éléments, je vais utiliser la boîte S Flex. Nous avons besoin de Display Flex. Ensuite, je vais changer de direction car nous allons placer les éléments flexibles verticalement. Par conséquent, nous devons changer de direction et ce sera une colonne. Ensuite, je vais centrer le contenu dans les deux sens. Je suis à l'horizontale et à la verticale. Et pour cela, nous devons justifier un centre de contenu et également un centre de rubriques. Vérifie le navigateur. Comme vous pouvez le constater, le contenu est placé au centre. Ensuite, je vais changer le pointeur d'enregistrement du curseur pour que tout soit prêt. Ensuite, nous devons personnaliser chaque élément du contenu promotionnel. Je vais commencer par le titre. Sélectionnons le contenu de la promotion, suivi de l'élément d'en-tête H. Je vais régler la famille de téléphones pour qu'elle réfléchisse à la cursive. Ensuite, la taille du téléphone sera de quatre RAM. Je vais également augmenter l'espace entre les lettres. Disons 2,2 RAM. Je vais mettre le texte en majuscule. Par conséquent, nous devons utiliser la transformation de texte avec la valeur de majuscule Enfin, changez de couleur, rendez-la blanche. Le titre est personnalisé, mais comme vous pouvez le constater, nous devons aligner le texte au centre. Pour cela, je vais ajouter ici un centre de texte. Le texte est maintenant placé au centre. Très bien, tout dépend du titre. Ensuite, nous devons retirer le bouton. Allons-y et sélectionnons le contenu promotionnel, puis l'élément bouton. Tout d'abord, définissons les hauteurs comprises. La largeur sera de 25 RAM. Ensuite, nous avons besoin d' une hauteur qui sera de six RAM. Changeons la couleur de fond. Je vais utiliser 34 DC. Je parle ici de cette couleur, que nous avons utilisée dans le cas du grand cercle. OK, vérifions le navigateur. Nous avons donc le bouton. En fait, nous avons besoin d'un peu d'espace entre ces trois éléments. Je vais créer cet espace en utilisant la marge. Réglons la marge à sept RAM en haut, puis à zéro sur le côté droit. Cinq cadres en bas et zéro sur le côté gauche. Maintenant, nous avons de l'espace. Ensuite, nous devons nous débarrasser de la bordure par défaut et arrondir le bouton. Nous n'avons besoin d'aucune bordure, puis d'un rayon de bordure avec la valeur cinq boutons Ram. Ça a l'air sympa, mais il faut prendre soin de la police. Changeons la taille de police. Il y aura deux Ram. Ensuite, nous avons besoin que l' épaisseur de la police soit en gras. De plus, je vais transformer le texte en majuscules, puis changer la couleur, le rendre blanc. Enfin, nous avons besoin d'un espace entre les lettres. Réglons-le sur 0,2 RAM. Et changez aussi le cos, faites-en un pointeur. Voilà, à propos du bouton, il a l'air plutôt sympa. Enfin, nous devons nous occuper du paragraphe. Allons-y et sélectionnons le contenu promotionnel. Réglons la taille de police à 2,5 RAM. Le poids du téléphone sera alors de 300. De plus, nous avons besoin que la couleur soit blanche. Ensuite, je vais mettre le texte en majuscule. Nous avons besoin d'une transformation de texte avec la valeur à mettre en majuscule. Et enfin, créez un espace entre les lettres à 32,1 RAM. D'accord, le paragraphe est également très joli, et en fait, les trois éléments du contenu promotionnel sont personnalisés. Ensuite, nous devons créer l'ombre. Je parle de cette ombre ici. Comme vous vous en souvenez, nous avons créé un élément vide appelé « ombre promotionnelle ». Je vais sélectionner cet élément. Nous avons besoin d'une ombre promotionnelle. Disons qu'à l'intérieur des peaux, la largeur sera de 90 % , puis les peaux seront de dix béliers. Changeons la couleur de fond. Je vais utiliser la couleur 0525c. Ici, nous avons l'ombre. Ensuite, nous devons prendre soin de sa position. Réglons la position absolue. Ensuite, nous avons besoin que la position inférieure soit -20 %, la position de l'ombre est modifiée Ensuite, nous devons l' arrondir au rayon. Réglons-le sur dix RAM. Mais ensuite je vais faire pivoter les éléments en utilisant la fonction transform rotate x. Et la valeur sera de 20 degrés. L'élément est légèrement pivoté. Ensuite, nous devons créer l'effet de flou. Pour cela, nous devons filtrer avec fonction blar et la valeur sera de trois RAM, l'élément est flou et nous devons maintenant diminuer légèrement l' Réglons l'opacité 2.7 D'accord, l'ombre est presque prête Ensuite, nous devons créer l'environnement tridimensionnel. Et l'effet de l'ombre sera beaucoup plus cool. Je vais revenir au code VS. Pour créer l'environnement en trois D, nous devons utiliser une propriété appelée Perspective. Et je vais l'ajouter à l' emballage, qui est une promotion du produit qui met Perspective à 50 RAM Ensuite, pour appliquer cette propriété à l'ombre, nous devons ajouter une autre propriété au parent de l'élément d'ombre promotionnel. Dans ce cas, le parent est le contenu promotionnel et nous devons ajouter ici le style de transformation. Avec la valeur préservée, trois D. Maintenant, comme vous pouvez le constater, nous avons ici un résultat bien meilleur et cool. OK, il est maintenant temps de créer l'effet de survol. Au survol. Je vais transférer le contenu promotionnel à l'utilisateur. Ici, cet effet se rapproche davantage de l'utilisateur. Nous devons le faire en utilisant la propriété de transformation. Tout d'abord, je vais ajouter ici, survoler le contenu de la Romo Ensuite, nous devons nous transformer. Si j'utilise ici uniquement la fonction translate Z, nous remplacerons ce code ici Nous devons récupérer cette fonction, l'ajouter ici. Et nous devons ajouter ici fonction translate Z avec la valeur dix. Pour que l'effet fonctionne bien en tant qu'invité, nous devons le rendre plus fluide Pour cela, nous avons besoin d'une transition avec les valeurs a et 0,5 seconde. Maintenant, nous avons des acteurs sympas et cool. Ensuite, nous devons modifier l'arrière-plan de la promotion du produit. Nous devons également déplacer ces formes. Pour ce faire, je vais utiliser un script Java. Vous pensez peut-être que nous pouvons le faire en utilisant le CSS. Mais une fois que nous avons sélectionné les éléments, nous devons changer le style de l'élément parent, qui est la promotion du produit. Nous ne pouvons pas le faire en utilisant le CSS. C'est pourquoi je vais utiliser Javascript. En fait, créons un nouveau fichier Javascript dans le dossier JS. Je vais l'appeler products JS. Ensuite, nous devons lier cet élément au fichier HTML. Dupliquons ce code ici et changeons le nom du fichier. Ce seront les produits S. Je vais déplacer ce fichier ici. Tout d'abord, nous devons sélectionner deux éléments différents. Le premier est l'emballage. Créons une nouvelle variable et appelons-la produits. Je vais sélectionner cet élément en utilisant la méthode du sélecteur de requête Spécifiez ici le nom de classe dont il s'agit. Dupliquons cette ligne. La deuxième variable sera le contenu promotionnel. Changeons le nom de la classe. Nous avons besoin ici de contenu promotionnel. Ensuite, je vais ajouter un écouteur d'événements au contenu promotionnel Nous n'avons pas besoin de points, nous avons besoin de contenu promotionnel. En fait, nous avons besoin de contenu ici. Comme je l'ai dit, je vais ajouter à ces éléments dans Event Listener et l'événement sera passé au pointeur de la souris C'est la même chose que l'effet de survol. Ensuite, nous devons passer ici la fonction abc, qui sera exécutée une fois que nous aurons survolé les éléments, je veux dire le contenu promotionnel Je vais ajouter une nouvelle classe à l'élément promotionnel des produits. Ensuite, nous utiliserons cette nouvelle classe dans le fichier CSS et nous définirons le nouveau style. Je vais ajouter ici propriété de la liste des classes promotionnelles des produits, puis ajouter une méthode. Je vais appeler la classe animate. Nous devons ajouter à la promotion des produits sur Hover. Mais une fois la souris retirée, nous devons supprimer ce nom de classe de l'élément promotionnel des produits. Par conséquent, je vais dupliquer ce code ici. Lors des événements Mouse Out, nous devons supprimer Class Animate des produits que la promotion peut vendre C'est tout à propos de gov script. Ensuite, nous devons revenir au fichier CSS et trouver la promotion des produits. Je vais sélectionner cet élément en utilisant la classe animate. Nous avons besoin d'une animation suivie d' une promotion de produit professionnel Nous devons changer la couleur de fond. Je vais utiliser la valeur RGBA et ce sera dix. 59, puis 156, et l' opacité sera de 0,7. De plus, utilisez la transition pour des effets plus fluides, nous avons besoin ici de 0,3 seconde. Si je passe le curseur sur le contenu promotionnel, l'arrière-plan sera modifié Tout fonctionne bien. Ensuite, nous devons prendre soin des formes. Je vais sélectionner Promo Rectangle. Avec la classe animate, nous avons besoin d'animations suivies du rectangle promotionnel au survol Je vais augmenter l' opacité des éléments. Disons-le 2.8 Nous devons également augmenter la taille du rectangle à l' aide de la fonction d'échelle. Mais outre la fonction d'échelle, nous devons également ajouter ici la fonction de rotation Z. Afin d'éviter de remplacer le code, je vais récupérer ce code à partir d'ici Ajoutez également ici la fonction d'échelle. Je vais augmenter l' échelle du rectangle. Faisons en sorte que 1.4 Nous avons également besoin d'une transition. Tout cela va prendre 0,3 seconde. OK, passons le curseur sur le contenu de Romo. Comme vous pouvez le constater, l'échelle du rectangle augmente au survol. Et l'opacité de l' élément augmente également. Très bien, passons aux formes suivantes. Je veux dire, nous devons prendre soin du petit cercle. Sélectionnez-le en utilisant la classe animate. Dans le cas du petit cercle, je vais augmenter l'opacité à un Je vais également augmenter l'échelle. Passons également à 1.4. Ajoutons ici un sondage de transition de 0,3 seconde. Comme vous pouvez le constater, nous avons également un effet agréable et cool avec le petit cercle. Ensuite, nous devons prendre la troisième forme, qui est ce grand cercle ici. Sélectionnons un grand cercle avec la classe animate. Dans le cas du grand cercle , il suffit d' augmenter l'échelle. Réglons-le sur 1,4 et ajoutons également un appel de transition de 0,3 seconde. Très bien, donc tout est plutôt beau. La seule chose que nous ayons à faire est de nous débarrasser de l'ombre. Nous devons également changer l' ombre au survol. Trouvons l'ombre, puis sélectionnons-la. Avec la classe animate au survol, je vais augmenter la hauteur Ça va faire 13 RAM. Je vais changer la position inférieure. Disons deux à -15 % , puis je vais changer, également l'effet polaire dont nous avons besoin ici, 2,5 RAM Enfin, changeons l'opacité, 0,9. Je vais ajouter ici la transition p 0,3 seconde Si je survole le contenu, l'ombre changera En fait, nous avons ici un effet sympa et cool. OK, avec la section de promotion des produits, c'est terminé. La seule chose que nous devons faire dans le cas de la page des produits est d' ajouter ici le pied de page Je veux dire le pied de page que nous ajoutons à la page du client . Pour ce faire, il la page du client . Pour ce faire suffit de copier le pied de page d' ici et de le coller En fait, j' ai déjà un pied de page ici. Nous n'avons pas eu besoin de copier-coller, nous avons juste besoin de nous débarrasser de cet attribut à partir d'ici. J'ai juste oublié que nous avons ici le pied de page. Maintenant, tout devrait bien fonctionner. Nous pouvons dire qu'avec la page du produit, nous en avons terminé. Tout a l'air et fonctionne bien. Bien, passons à la page du produit. Ensuite, nous devons nous occuper de la page de contact. Passons à la prochaine conférence. 55. Créer le balisage HTML pour la page de conception: Lors de la conférence précédente, nous avons terminé de travailler sur la page du produit. Ça a l'air plutôt sympa et cool. Nous devons maintenant passer à autre chose et commencer à nous occuper de la page suivante, qui est la page de contact. Jetons un coup d'œil au projet terminé. Ici, nous avons la page de contact. Il se compose d'un en-tête où nous avons deux en-têtes différents Vous pouvez également voir ici deux parties différentes. Sur le côté gauche, vous pouvez voir plusieurs champs de saisie différents. Nous pouvons contacter l'équipe d'assistance. En ce qui concerne le côté droit, vous pouvez voir ici un support technique, nous pouvons discuter avec le support. Et vous pouvez également voir ici quelques options différentes. Nous avons également ici un cercle sympa et cool derrière la section de l'équipe d'assistance. OK, c'est à propos de la section contact. Passons au code VS et organisons les fichiers de travail pour une nouvelle page. Je vais fermer ces dossiers. Ensuite, je vais créer un nouveau fichier dans le dossier HTML. Ce sera contact Html. Je vais également créer un fichier de contacts. Ensuite, je vais déplacer ce fichier ici sur le côté gauche. Copions ensuite l' intégralité du contenu du fichier HTM du produit et collons-le ici. Ensuite, je vais fermer ce dossier. Nous devons changer le nom du fichier CSS. Ce sera Contact CSS. Ensuite, nous devons supprimer la section du produit. Cette section est ici. Débarrassons-nous de ça. De plus, je vais masquer le pied de page pendant un moment et me débarrasser de ce lien à partir d'ici, que tout soit prêt Passons à la page de contact. Ici, nous avons la page vide avec juste la navigation. Dans cette conférence, je vais créer le balisage masculin HTM pour la section contact Laissez-nous vos commentaires pour nous contacter. Ensuite, je vais ouvrir les éléments de section avec le nom de classe contact à l'intérieur de l' élément de section dont nous avons besoin, qui sera un wrapper de contact Il reprendra l'intégralité du contenu de cette section. Ensuite, je vais insérer ici des développements vides, qui seront un cercle de contact, je parle de ce cercle ici. Ensuite, nous devons créer l'en-tête. Je vais donc ouvrir la balise p avec l'en-tête de contact du nom de la classe dans laquelle je vais insérer deux en-têtes différents Le premier sera H, un élément d'en-tête avec le contact textuel. Quant au deuxième titre, il s'agira de l'élément H à trois titres. Je vais m'assurer. Si vous avez des questions, hésitez pas à nous contacter. C'est tout à propos de l'en-tête. Ensuite, nous devons assurer de tu, qui sera du côté du contenu du contact, cet élément Nous aurons deux parties, formulaire de contact et l'enveloppe du support de contact Ces deux parties ouvrent ici le deep tag, qui sera un wrapper de formulaire de contact Je vais insérer le symbole Google Material. Allons dans le navigateur et recherchons les symboles Google Material. Je vais rechercher une icône appelée groupe. En fait, nous l'avons ici, je vais sélectionner arrondi. Copions l'élément span à partir d'ici et collons-le ici. Je vais vérifier si l'icône est affichée. Donc, comme vous pouvez le voir, nous avons ici une icône. OK, ensuite nous avons besoin quatre éléments de titre et ce sera le contact. L'équipe d'assistance. Ensuite, je vais entrer dans votre paragraphe avec le texte Si vous avez des questions, envoyez-nous un e-mail. Après le paragraphe, je vais ouvrir les éléments du formulaire. À l'intérieur des éléments du formulaire, nous aurons deux entrées différentes. Je vais ouvrir une entrée avec le texte de type, et nous avons également besoin ici d'un attribut d' espace réservé Entrez le nom du texte. Je vais dupliquer ce code deux fois. La prochaine entrée sera pour le courrier électronique, nous devons changer le type et également l'attribut placeholder, ce sera l'adresse e-mail En ce qui concerne le troisième élément de saisie, je vais sauter ici, taper du texte. En ce qui concerne l'attribut placeholder, je vais insérer votre sujet Ensuite, après les éléments de saisie, nous avons besoin d'une zone de texte, elle aura un attribut d'espace réservé, le texte sera votre message Enfin, nous avons besoin du bouton ici avec le bouton de saisie comme texte du bouton. Je vais vous demander de soumettre un message. OK, c'est ça. À propos de l'emballage du formulaire de contact. Ensuite, je vais créer la deuxième partie qui sera un wrapper de support de contact Je vais à nouveau insérer ici le symbole Google Material. Allons sur le site Web et recherchons une icône appelée construction. Eh bien, nous devons récupérer cette icône. Copions ceci. Panelmentlose, cet onglet Insérons ici le panneau, puis vérifierons le navigateur. Nous avons ici la deuxième icône après l'élément span. Je vais insérer vos quatre en-têtes avec le texte « Support technique ». Ensuite, nous aurons ici un paragraphe avec le texte. Si vous avez besoin d'aide, vous pouvez discuter directement avec notre équipe d'assistance. Après cela, je vais insérer votre bouton avec le bouton de saisie. Je vais ajouter ici le nom de la classe. Ce sera le chat BTN. En ce qui concerne le texte, je vais insérer Chat avec le support. Ensuite, je vais insérer la balise p, qui sera une liste de support. Je vais insérer ici quelques modèles différents. Ouvrons le tag du bouton avec les types. Je vais également ajouter ici le nom de la classe. Ce sera Supporter le moins de PTN. Le premier PTN. Le premier modèle sera antérieur en tant que communauté, nous aurons quatre modèles différents. Je vais donc le dupliquer trois fois. Ensuite, je vais modifier le contenu de chaque modèle. Le second est Browse Documentation. Alors voilà, rejoignez le groupe Facebook. Enfin, nous avons besoin ici d' explorer, d'explorer le bloc. Je pense que c'est tout à propos du balisage nul de notre section de contact J'espère que tout est correct. Nous verrons que lorsque nous commencerons à styliser cette section, nous en avons ici tous les éléments. Ils sont prêts et nous devons maintenant styliser cette section. Pour cela, passons à la prochaine conférence. 56. Section de conception de coiffure: Dans la conférence précédente, nous avons créé le balisage HTML pour la section contact Maintenant, comme je l'ai dit, nous devons à nouveau styliser cette section. Jetons un coup d'œil au projet final. Voilà à quoi ressemble la page de contact. Nous avons ici un en-tête et deux parties différentes. Nous allons personnaliser tous les éléments. Passons au code VS et insérons de nouveaux commentaires dans le fichier CSS. Ce sera un contact. Ensuite, je vais sélectionner l' élément de section qui a un contact de nom de classe. Et je vais définir avec en hauteur, la largeur sera de 100 %. Quant à la hauteur, je vais la fixer à 150 m de hauteur de fenêtre Je veux dire 50 % de la fenêtre d'affichage. Je vais également créer l'espace sur le côté supérieur en utilisant la marge, 30 m au-dessus. Comme vous pouvez le voir, ces carreaux sont appliqués. En fait, nous allons changer la barre de défilement. Si nous examinons le projet terminé, vous verrez que nous avons ici une barre de défilement bleue. Je vais copier le code du fichier des produits. Nous avons besoin de ce code. Je vais le récupérer et le coller ici en haut. Maintenant, comme vous pouvez le voir, la barre de défilement est modifiée. OK, je vais maintenant m' occuper de l'emballage du contenu. Je vais définir les hauteurs, les deux seront à 100 %. De plus, je vais aligner le contenu à l'aide d'une boîte en lin. Nous avons besoin de lin pour étalage. Nous devons changer de direction car nous allons aligner les éléments flexibles verticalement. Nous avons besoin que la direction soit une colonne. Je vais également aligner les éléments au centre. OK, comme vous pouvez le voir, le contenu de la section contact est aligné. Ensuite, je vais m' occuper du cercle. Je suis dans ce cercle. Allons-y et sélectionnons le cercle de contact. Je vais définir avec les hauteurs. Passons à 290 m, puis la hauteur sera également de 90 Ram. Nous allons créer cet élément autour de lui, nous devons donc délimiter le rayon avec une valeur de 50 %. Ensuite, je vais changer l'arrière-plan. Je vais utiliser un dégradé linéaire. Tout d'abord, selon la définition, la direction sera deux, non ? En ce qui concerne les couleurs, la première sera 651f. Pour ce qui est de la deuxième couleur, je vais la rendre transparente. Et nous avons également besoin ici que le pourcentage de transparence soit 30%. Ici, nous avons le cercle avec un effet de gradient linéaire. Je vais changer la position de l'élément. Réglons la position sur absolue. Ensuite, nous avons besoin de la position relative, ou de l'élément parent, qui est l'enveloppe de contact Nous allons positionner l'élément en fonction de l' élément parent en fonction de l'enveloppe de contact Nous avons donc besoin ici de la position relative. Ensuite, je vais définir la position inférieure, et elle sera de 12 %. Quant à la position de gauche, je vais la mettre à 20 %. Enfin, je vais diminuer l' opacité du cercle Faisons en sorte que le cercle soit bien positionné. Ensuite, je vais m' occuper des titres. Allons-y et sélectionnons l'en-tête du contact. Je vais aligner le texte au centre en utilisant le centre d'alignement du texte. Comme vous pouvez le constater, le texte est placé au centre des deux titres. Je vais commencer à styliser le premier titre. Allons-y et sélectionnons l'en-tête de contact H. Changeons la famille de téléphones. Ce sera Lee Cursive. Ensuite, je vais définir la taille du téléphone. Réglons-le sur six RAM. Nous avons également besoin d'un espacement entre les lettres. Je vais faire de l'espace entre les lettres 0,2 Ram et aussi changer la couleur du titre, et ce sera 26353 D'accord, comme vous pouvez le voir, le premier titre est plutôt sympa. Ensuite, nous devons nous occuper de la deuxième rubrique. Sélectionnons l'en-tête du contact suivi des trois éléments d' en-tête H. Augmentons la taille du téléphone. Ça va faire trois rounds. Ensuite, je vais modifier le poids du téléphone. Réglons-le sur 300. Je vais changer la couleur du titre et ce sera 567599 Ensuite, nous devons créer de l'espace en haut et également en bas. Je vais utiliser la marge et il y aura deux RAM en haut. Le zéro sur le côté droit, 15 RAM sur le côté inférieur, puis le zéro sur le côté gauche. OK, nous avons ici le deuxième titre. Ils sont tous les deux très jolis. Ensuite, nous devons nous occuper du contenu du contact. Je veux dire, cette partie ici. Allons-y et sélectionnons le contenu du contact. Je vais placer les deux parties du contenu du contact côte à côte, horizontalement. Et pour cela, je vais utiliser Flex Book. Comme vous pouvez le constater, les deux côtés sont placés horizontalement. Ensuite, je vais sélectionner la première partie qui est l'emballage du formulaire de contact. Définissons les hauteurs comprises. La largeur sera de 45 RAM. Ensuite, nous avons besoin de hauteur, ce sera 78 Ram. Ensuite, je vais changer la couleur de fond. Ça va être blanc. Afin de rendre l' élément clairement visible, définissons l'ombre de la boîte. Nous avons besoin de 01 RAM, dix RAM et de la couleur RGBA Les valeurs seront 130162, puis 235, et l'opacité sera 0,4. Nous avons ici la première partie, le côté gauche du contenu du contact Il faut en fait placer le cercle derrière ces éléments. Pour cela, je vais utiliser une propriété d'index. Réglons l'index à dix, puis vérifions le navigateur. Maintenant, comme vous pouvez le voir, le cercle s'est retrouvé derrière l'élément. Ensuite, je vais créer de l'espace à l'intérieur de la boîte en utilisant du rembourrage Le rembourrage sera composé de quatre sur les côtés supérieur et inférieur, puis de deux Ram sur les côtés gauche et droit Bien, après cela, je vais arrondir les coins de la boîte. Pour cela, nous avons besoin d'un rayon de bordure d'un RAM. Ensuite, je vais créer de l'espace sur les côtés gauche et droit de l'élément en utilisant la marge. Nous avons besoin ici de 0,3 RAM. Je vais également aligner le texte au centre qui se trouve autour de l'emballage. En fait, comme vous pouvez le constater, nous avons ici un petit problème. La navigation se termine derrière cet élément. Je vais régler ce problème. Ouvrons le style. Faisons un fichier et trouvons que la barre de navigation que nous avons ici est la propriété d'index, et je vais augmenter la valeur. Réglons-le sur 100. Nous sommes maintenant confrontés au même problème. Réglons l'index à 1 000 Eh bien, le problème est maintenant résolu. OK, passons à autre chose et continuons à styliser la section contextuelle. le moment, je vais m' occuper de l'icône, qui est un symbole matériel de Google. Allons-y et sélectionnons l'emballage du formulaire de contact, puis l'élément Pan Augmentez ensuite la taille du téléphone. Ça va être un gramme. De plus, je vais changer la couleur de l'icône, et je vais dire 2842 Comme vous pouvez le voir, l'icône est plutôt jolie. Ensuite, nous devons nous occuper du titre. Sélectionnons le wrapper du formulaire de contact suivi des quatre éléments d'en-tête Je vais configurer la famille de téléphones pour qu'elle réfléchisse à la cursive, puis je vais régler la taille du téléphone sur 1,6 run Ensuite, nous avons besoin du poids du téléphone, il sera de 300. Ensuite, je vais transformer le texte en majuscules. Ensuite, changeons la couleur du texte. Je vais utiliser la même couleur ici, partons d'ici. Et ajoutez ici le signe de la livre sterling. Ensuite, je vais augmenter l'espace entre les lettres. Réglons-le sur 2,1 RAM. Enfin, je vais créer de l'espace en utilisant la marge. Il nous faut de la marge, trois RAM en haut. Ensuite, nous avons zéro sur le côté droit, un RAM en bas et zéro sur le côté gauche. Voici le titre, il a l'air plutôt sympa. Ensuite, nous devons nous occuper du paragraphe ici. Je vais sélectionner l'emballage du formulaire de contact. Tout d'abord, définissons la taille, ce sera 1,8 RAM. Ensuite, je vais changer de couleur. Faisons-en 5646. Modifiez le poids de la police. Déplaçons cette ligne haut, puis nous devons marcher en bas. Réglons-le sur une scie à cames à sept vitesses située au-dessus du paragraphe. Le dessus de l' emballage est plutôt joli. Ensuite, nous devons nous occuper du formulaire, je veux dire de ces champs de saisie. Allons-y et sélectionnons le wrapper de formulaire suivi des éléments du formulaire Je vais utiliser Flex box pour aligner les champs de saisie, nous avons besoin de Display Flex. Ensuite, pour placer les éléments d'entrée verticalement dans une colonne, nous devons changer la direction de la boîte flexible et la mettre en colonne. Comme vous pouvez le constater, les champs de saisie sont placés verticalement dans une colonne. Ensuite, je vais les personnaliser. Je vais définir le wrapper suivi l'entrée t. Ensuite, nous devons également sélectionner la zone de texte Tout d'abord, définissons un peu. Ce sera 100 %. Ensuite, je vais changer d'espace I, puis je vais créer de l' espace entre les entrées. Fixons la marge à deux RAM. Puis zéro, changez la couleur de fond des entrées et réglez-la sur 024 Vérifie le navigateur. OK, ensuite je vais augmenter l'espace à l'intérieur des entrées. Pour cela, je vais utiliser du pudding. Il y aura un bélier de tous les côtés sauf du côté gauche. Il y aura deux Ram, je veux dire deux Ram sur le côté gauche. Comme vous pouvez le constater, nous avons de l' espace à l'intérieur des entrées. Ensuite, je vais me débarrasser de cette bordure par défaut. Définissons la bordure sur none. Je vais arrondir légèrement les coins en utilisant rayon de bordure avec la valeur 0,5 fram Réglons ensuite la taille de police à 1,5 image et modifions également le poids de la police Je vais en faire 300, d'accord ? Comme vous pouvez le constater, les champs de saisie sont plutôt jolis. Ensuite, nous devons définir la hauteur séparément pour les entrées et pour le texte Aa, car nous avons besoin de hauteurs différentes pour ces éléments. Sélectionnons l'enveloppe du formulaire de contact, puis les entrées, et définissons la hauteur sur cinq Ensuite, je vais dupliquer ce code et changer la saisie en texte Aa. Nous avons besoin d'une hauteur de dix Ram. Je vais également ajouter ici une autre propriété. C'est ce qu'on appelle la taille Re et je vais en faire une nulle. Nous ne pouvons plus redimensionner la zone de texte. OK, donc je pense que ces champs de saisie sont plutôt jolis. Ensuite, nous devons prendre soin des attributs de l'espace réservé. Je vais changer la couleur de l' attribut placeholder pour les entrées ainsi que pour la zone de texte Je vais récupérer ce sélecteur à partir d'ici. Ensuite, collez, copiez-collez. Je vais ajouter ici une pseudo classe d' espace réservé, je veux dire un pseudo élément Ensuite, je vais ajouter ici la propriété de couleur. Et pour ce qui est de la couleur, ce sera 0335. Comme vous pouvez le constater, les attributs de l' espace réservé ont changé de couleur et ils sont plutôt jolis Ensuite, nous devons prendre soin du bouton. Allons-y et sélectionnons Contact Form Wrapper, puis l'élément Boson Je vais changer la hauteur, il y aura cinq RAM. Ensuite, je vais changer le fond en utilisant un dégradé linéaire. La direction à suivre sera double. Ensuite, il faut insérer ici deux couleurs différentes. Le premier sera le C40c. Pour ce qui est de la deuxième couleur, je vais lui donner 85, en fait 852 A. La couleur a changé Je veux dire, la couleur de fond est maintenant un dégradé linéaire. Je vais me débarrasser de la bordure par défaut, la régler sur non, et arrondir le bouton en utilisant le rayon de bordure. Il y aura cinq RAM. Maintenant, nous avons ici de bien meilleurs résultats. Je vais changer de police. Je vais personnaliser la police et ne pas la changer, régler la taille du téléphone sur 1,4 RAM. Ensuite, le poids du téléphone sera en gras. Ensuite, je vais transformer le texte au cas par cas. Augmentez également l' espace entre les lettres. Faites-en 0,1 RAM. Changez de couleur, ça va être blanc. Enfin, nous avons besoin d'un point de curseur situé autour de la première partie du contenu du contact, comme nous devons le faire ici pour la deuxième partie. Allons-y et sélectionnons le wrapper de support de contact. Je vais définir la largeur et la hauteur. La largeur qui va le faire basculer ici sera de 45 RAM. Ensuite, nous avons besoin de hauteur, je vais faire 67 RAM. Changez ensuite la couleur de fond, rendez-la blanche. De plus, nous avons besoin d'une ombre pour rendre l' élément visible. L'ombre de la boîte sera de 0,110 Ram comme couleur. Je vais insérer cette couleur ici. Nous avons ici la deuxième partie que je vais ajouter ici pour le rayon, ce sera un Ram. Ensuite, nous avons besoin d'une marge à gauche et à droite, il y aura trois RAM. De plus, il s'agit d'une ligne de texte au centre. OK, après cela, je vais parler de l'icône. Sélectionnons le wrapper d' assistance aux contacts, puis le panneau dont nous avons besoin ici, la taille du téléphone, il y aura huit RAM Ensuite, je vais ajouter de la couleur ici. La couleur sera 6797 FF. En fait, nous avons ici un problème dont nous avons besoin. Contactez le support Wrapper. Maintenant, le problème est réglé. En fait, je pense qu'il nous manque quelque chose parce que nous n'avons pas de place ici. Nous avions besoin d'espace et nous avons dû le fabriquer avec du rembourrage. Manquant ici. Remplissage avec des valeurs quatre Ram puis deux Ram. Maintenant, le problème doit être résolu. Oui, nous avons maintenant le même résultat. Je vais m' occuper du titre. Allons-y et sélectionnons wrapper de support de contact suivi de l'élément de titre H quatre Je vais régler la famille de téléphones pour qu'elle réfléchisse à la cursive. Ensuite, la taille du téléphone sera de 1,6 mm. Changez le poids du téléphone, ça va être 300. Ensuite, je vais transformer le texte en majuscules. Changeons donc de couleur. Je vais le faire 6797f. Vérifie le navigateur, le titre est sympa. Ensuite, je vais augmenter l'espace entre les lettres. Faisons en sorte que ce soit 0,1 RAM. Et aussi, nous avons besoin d' espace en utilisant la marge. La marge sera de trois RAM en haut, zéro sur le côté droit, un RAM en bas, puis zéro sur le côté gauche. OK, le titre est plutôt sympa. Ensuite, nous devons prendre ici le paragraphe. Allons-y et sélectionnons wrapper Contact support suivi de l'élément La taille de police sera de 1,8 RAM. Ensuite, nous aurons ici le poids de la police. Il y en aura 300. Passons à la couleur. Je vais en faire 56460. Ensuite, nous avons besoin d'une marge en bas. Réglons-le sur quatre RAM. C'est à propos du paragraphe. Ensuite, nous devons nous occuper de la cabane BTN. Je parle de ce bouton ici. Allons-y et sélectionnons Hut BTN. Je vais régler la largeur à 100 %, puis la hauteur sera de cinq. Je vais changer le fond d'écran. Utilisons à nouveau les dégradés linéaires. La direction sera donnée à deux droits pour les couleurs. Je vais utiliser 651f. La deuxième couleur, ce sera 48 FF. Regardons le bas ici. Nous avons le fond. Je vais me débarrasser de la bordure par défaut. Nous avons également besoin ici d' un rayon de bordure d'une valeur de cinq M. Vérifions-le en bas. Ça a l'air plutôt sympa. Passons au point. Je vais régler la taille du téléphone à 1,4 M. Ensuite, ce sera en gras De plus, je vais le faire par cas, puis je vais augmenter l' espace entre les lettres. Réglons-le sur 2,1 RAM. Changez la couleur, rendez-la blanche. Donc, comme vous pouvez le voir, le bas est plutôt joli. La seule chose que je dois faire est d'augmenter l' espace en bas. Et nous devons également créer le pointeur du curseur. Réglons donc la marge inférieure à cinq RAM. Et puis le pointeur du curseur. Oups. OK. En fait, oui, curseur. Eh bien, nous avons ici un petit problème. Je pense que nous avons également besoin de la propriété d'indice Z pour cette partie, car je suppose que le cercle chevauche cette partie Je vais ajouter ici, pas ici, mais ici. Indice avec la valeur dix. Maintenant, vérifions-le. Comme vous pouvez le constater, le problème est résolu. Bien, nous devons maintenant nous occuper de ces motifs, nous allons les styliser de cette façon. Allons-y et sélectionnons le wrapper, qui contient une liste de support pour les noms de classe Je vais utiliser Display Flex, car nous allons aligner ces boutons à l'aide de Flexbox. Je vais les aligner verticalement dans la colonne. Nous avons besoin de la direction de flexion pour être une colonne. Très bien, maintenant nous allons les personnaliser. Allons-y et sélectionnons la liste de support, puis l'élément bouton. Réglons la hauteur, faisons-en 4,5 RAM. De plus, nous avons besoin d'espace entre ces boutons. Nous avons besoin que la marge soit d'un RAM en haut et en bas et zéro sur les côtés gauche et droit. Changez également la couleur de fond. Utilisez ici, couleur F245. Regardons les résultats ensuite. Je vais me débarrasser de la bordure par défaut. Définissons la bordure sur none. Nous avons besoin d'un rayon de bordure pour arrondir les coins. Le rayon de bordure sera de quatre RAM. Ensuite, je vais m' occuper des téléphones. Réglons la taille du téléphone à 1,4 RAM. Je vais transformer le texte en majuscules. La couleur sera alors quatre A, pas un mais huit A F. Ensuite, nous devons laisser l'espacement, définissons-le à 2,1 RAM Enfin, nous avons besoin de courser pointer, d'accord ? Comme vous pouvez le constater, tout est plutôt beau. Et en fait, avec cette page, nous avons presque terminé. La seule chose que nous devons faire est d'ajouter ici le pied de page Pour cela, il suffit de supprimer les attributs que nous avons ajoutés ici. Je veux dire, l'attribut ici, supprimons-le. Ici, nous avons le pied de page avec la page de contact. Nous avons terminé. Ensuite, nous devons créer la page suivante de notre projet. C'est la page du compte. Pour cela, passons à la prochaine conférence. 57. Créer le balisage HTML pour la page de compte: Lors de la conférence précédente, nous avons fini de travailler sur la page de contact. Comme vous pouvez le voir, ça a l'air plutôt sympa. Et maintenant, nous devons passer à la page suivante, qui est la page du compte. Jetons un coup d'œil au projet terminé. Ici, nous avons la page du compte. Comme vous pouvez le voir, il s' agit d'un en-tête et nous avons ici les champs de saisie. Je veux dire le formulaire avec icône et aussi avec le bouton Soumettre. En bas, vous pouvez voir un autre fond. Nous pouvons voir ici le cercle qui est un joli et cool fond du formulaire. En bas, vous pouvez voir le pied de page standard. OK, c'est tout à propos de la page du compte. Passons au code VS et je vais organiser les fichiers de travail. Nous devons créer un nouveau fichier HTML dans le dossier HTML, compte HTML. Ensuite, je vais créer un nouveau fichier CSS dans le dossier CSS. Passons au fichier HTML du contact et copions le code entier. Je vais le coller ici. Fermons ce dossier. Je vais apporter ici quelques modifications. Nous devons changer le nom du fichier CSS, il s'agira de comptes. De plus, je vais me débarrasser de la section contact, nous devons donc masquer le pied de page Faisons-le cacher. OK, je pense que je vais déplacer ce fichier sur le côté droit. Vérifie que le navigateur accède à la page du compte. Nous avons ici la page du compte, qui est actuellement vide. Nous avons juste ici la navigation. Je vais créer le balisage HTML. Insérons vos nouveaux commentaires pour le compte. Je vais ouvrir une balise de section avec le nom d'un compte de classe. Ensuite, nous avons besoin de développements, qui seront des enveloppes de comptes. Donc, la première chose que je vais insérer ici est le cercle des comptes. Je suis en arrière-plan du formulaire. Ensuite, je vais insérer votre en-tête. Il sera composé de deux éléments de titre. Le premier sera un titre H avec l'espace membre du texte. En ce qui concerne le deuxième titre, je parle des trois éléments du titre H, dont nous avons besoin pour gérer votre compte, télécharger des produits et discuter avec nous. Nous avons également besoin de 2047 qui se trouve à propos de l'en-tête du compte Ensuite, je vais ouvrir un autre élément profond avec le wrapper de formulaire de compte de nom de classe La première chose que je vais insérer ici concerne les éléments d'envergure, je veux dire le symbole Google Material. Passons au navigateur, puis visitons le site Web. Je vais rechercher une icône appelée Person Check. En fait, c'est l'icône. Je vais sélectionner arrondi. Saisissez ensuite l'élément span et collez-le ici. Je vais vérifier le navigateur. Si l'icône est affichée, nous avons ici l'icône. Ensuite, je vais ajouter ici quatre éléments dans lesquels nous aurons le nom de la classe. Entrées de compte. Je vais insérer votre balise d'entrée avec le texte du type et avec l'attribut placeholder, ce sera le nom d'utilisateur Ensuite, nous avons besoin d'une autre entrée pour le mot de passe. Je vais changer de type, ce sera un mot de passe. Et nous devons également modifier l'attribut placeholder. Je vais insérer ton mot de passe. Ensuite, je vais ouvrir un autre deep tag et ce sera la vérification du compte. Je vais donc insérer ici balise d'entrée avec la case à cocher type. Je vais également ajouter ici l'attribut ID. Ce sera une vérification de compte. Ensuite, nous avons besoin d'une étiquette à l'intérieur de quatre attributs. Je vais insérer la même valeur, je veux dire vérifier le compte de la valeur que nous avons utilisée pour l'attribut ID. Insérons ici, souvenez-vous de moi ici. Les mêmes valeurs pour l'ID et quatre attributs, car une fois que nous avons cliqué sur l'étiquette, la saisie doit être vérifiée. C'est pourquoi nous avons utilisé ici les mêmes valeurs. Ensuite, je vais interférer avec le bouton de saisie comme texte. Je vais interférer avec la connexion. Ensuite, après le bouton, je passe au paragraphe avec le texte « J'ai oublié votre ». Ensuite, nous devons ouvrir l'élément span, nom d'utilisateur ou encore une fois, faire tourner Passport. Nous avons ajouté des éléments span à ces mots , car il s'agira de liens. Je vais ajouter ici un point d'interrogation. OK, c'est tout pour les éléments du formulaire. Ensuite, nous devons ajouter un autre bouton après ce développement. C'est un bouton ouvert avec les types. Je vais également ajouter ici le nom de la classe. Appelons-le PTN car il doit être placé en dehors du formulaire. Le texte. Je vais vous présenter qui n'est pas encore membre. Rejoignez-nous aujourd'hui. OK, donc je pense que c'est tout à propos du balisage HTML. Tout est prêt. Vérifie le navigateur. Nous avons ici tous les éléments de la page du compte. Ensuite, nous devons personnaliser ces éléments pour cela. Passons à la prochaine conférence. 58. Section de compte de coiffure: Dans la conférence précédente, nous avons créé le balisage HTML pour la page du compte Maintenant, on devine que nous devons styliser ces éléments. Encore une fois, je vais vous montrer la version finale de notre projet. Ici, nous avons la page du compte. Il se compose d'un en-tête, puis nous avons un formulaire avec ce cercle en arrière-plan et en bas, vous pouvez voir le pied de page Passons au code VS et insérons ici les nouveaux commentaires pour le compte. Ensuite, je vais sélectionner élément de section avec un compte de nom de classe. Tout d'abord, telle que définie avec et hauteur, la largeur sera de 100 %. Quant à la hauteur, je vais la porter à 120. Hauteur de la fenêtre d'affichage. Nous avons également besoin d'espace en haut en utilisant la marge. Top 30, d'accord ? La largeur et la hauteur sont appliquées à l'élément. En fait, vous pouvez voir ici la barre de défilement. Si nous examinons le projet terminé, vous verrez que nous avons ici défilement bleue. Changeons-le. Je vais accéder au fichier CSS du contact et récupérer ce code à partir d' ici, sur la page de contact. Nous avons une barre de défilement bleue. Je vais copier ce code et le coller ici. D'accord ? Comme vous pouvez le constater, la couleur de fond de la barre de défilement a changé . Ensuite, je vais sélectionner Account Wrapper. Nous devons définir la hauteur intérieure. Réglons-les tous les deux à 100%. Et je vais également utiliser Flex Box pour aligner les éléments. Nous avons besoin d'un écran Flex. Ensuite, nous devons changer de direction car nous avons deux éléments linéaires verticalement. Nous avons donc besoin d'une colonne de direction de flexion , puis d'un centre de ligne. OK, maintenant je vais m' occuper du cercle. Je parle de ce cercle ici. Revenons au code VS et sélectionnons un cercle de comptage. Définissons les hauteurs comprises. La largeur sera de 70. Pour ce qui est de la hauteur, je vais également atteindre 70 m. Changeons ensuite l'arrière-plan. Je vais utiliser un dégradé linéaire. La direction sera deux à gauche. En ce qui concerne les couleurs, la première couleur sera 651f. Pour ce qui est de la deuxième couleur, je vais la rendre transparente. Nous avons ici l'élément qui, pour le moment, n'est pas un cercle. Nous devons définir le rayon de la bordure à 50 %. Maintenant, l'élément a la forme du cercle. Ensuite, je vais m' occuper de sa position. Nous avons besoin d'une position absolue. Ensuite, je vais ajouter ici la position relative. Parce que nous allons positionner l'élément en fonction de son élément parent. Dans notre cas, l' élément parent est un wrapper de comptage. La position inférieure sera de 20 %. Quant à la position de gauche, je vais la porter à 33 %. Enfin, diminuons l'opacité, faisons-la 0,2. Voici le cercle Ensuite, je vais m' occuper de l'en-tête. En fait, l'en-tête sera similaire à l'en-tête de la page précédente, je veux dire la page de contact. Afin d'éviter d' écrire le même code, je vais ouvrir fichier CSS de contact et récupérer le code de l'en-tête. Collons-le ici. Et changez les noms des classes. Nous avons besoin de votre compte. Vérifie le navigateur. Comme vous pouvez le constater, l' en-tête est plutôt joli. les deux rubriques, la seule chose que je vais faire Dans les deux rubriques, la seule chose que je vais faire est de diminuer la marge en bas Réglons-le sur 12 RAM. OK, ça y est, à propos de l'en-tête. Ensuite, je vais m' occuper du formulaire. Sélectionnons l'emballage. Je veux dire un wrapper de formulaire de comptage Tout d' abord, définissez sa largeur Ça va faire 50 grammes. Ensuite, nous avons besoin de hauteur. Je vais également le régler sur 50 RAM. Ensuite, je vais définir la couleur de fond sur le blanc afin de rendre cet almon clairement visible Je vais régler Box Shadow sur 01 Ram. Huit béliers. Pour ce qui est de la couleur que je vais utiliser, il nous faut ici zéro, puis un RAM. Et la valeur RGBA 130-16-2235 et l'opacité 0,3. Ici, nous avons l'enveloppe en ce moment, elle et l'opacité 0,3. Ici, nous avons l'enveloppe en ce moment, elle s'est retrouvée derrière le cercle. Je vais résoudre ce problème en utilisant la propriété d'index Z. Mettons-le à dix. Maintenant, le problème est réglé. Ensuite, je vais arrondir les coins de l' emballage. Réglons le rayon de bordure à un RAM. Je vais aligner les éléments à l'intérieur de l' emballage à l'aide de flex box. Nous avons besoin de lin pour étalage. Ensuite, afin d'aligner les éléments verticalement, je vais définir la direction de flexion sur la colonne. Nous avons également besoin d'un centre de rubriques. OK, les éléments sont alignés. Ensuite, je vais m'occuper de l'élément de rotation I dans l'icône. Allons-y et sélectionnons Compte l'emballage, puis dans les éléments du moule En fait, si nous examinons le code HTML, vous constaterez que nous avons ici quelques éléments de span différents. Nous devons sélectionner cet élément de span ici, uniquement celui-ci. Par conséquent, je vais utiliser l' un des combinateurs CSS. Dans ce cas, nous ne sélectionnons que cet élément span. Je vais me fixer à une hauteur de neuf béliers. Changeons ensuite la couleur de fond. Ça va être FC8f. Ensuite, je vais arrondir les éléments, l'epod, le rayon à 50 %. Ensuite, je vais placer l'icône au centre du cercle Pour cela, je vais utiliser Flex box. Nous avons besoin d'un centre d'affichage, centre de contenu Justify et d'un centre de rubriques. Comme vous pouvez le constater, l'icône est placée au centre du cercle. Ensuite, je vais augmenter la taille du téléphone. Mettons-en 26. Je vais changer de couleur. Réglons la couleur sur 3776. Maintenant, nous avons besoin d'espace en bas, mais en fait, je pense que nous avons raté une année de rembourrage Je veux dire, dans l'emballage, parce que nous n'avons pas de place à l'intérieur de l'emballage, réglons le rembourrage sur trois Ram haut et en bas et deux Ram sur les côtés gauche et droit OK, maintenant nous avons de l'espace à l'intérieur de l'emballage et je vais l'ajouter ici en bas afin de créer de l'espace en bas de l'icône Mettons-le à trois m. D'accord, c'est à propos de l'icône. Ensuite, nous devons prendre soin des éléments d'entrée. Je vais sélectionner le wrapper avec les entrées. Je vais utiliser Flex Box. Nous avons besoin d'afficher la flexion puis de la colonne de direction de flexion, car nous allons aligner les entrées verticalement. Réglons la direction de flexion sur la colonne. Maintenant, comme vous pouvez le voir, les entrées sont placées verticalement. Ensuite, je vais les personnaliser. Allons-y et sélectionnons entrées du compte, suivies de l'élément d'entrée. Je vais régler la largeur à 40 Ram, puis la hauteur sera de cinq Ram. Je vais changer la couleur de fond. Réglons la couleur d'arrière-plan entre F zéro et quatre. Ensuite, nous avons besoin d'un peu d'espace entre les entrées Je vais donc définir une marge inférieure à trois RAM. Alors je vais me débarrasser de la limite de faille, disons à personne. Et arrondissez également l' entrée en utilisant un rayon de bordure de 0,5 Ram. Maintenant, les entrées sont plutôt belles. Ensuite, nous devons créer de l'espace à l'intérieur des entrées à l'aide du rembourrage Je vais régler le rembourrage à 0,5 RAM en haut et en bas et à un RAM sur les côtés gauche et droit Ensuite, nous devons changer la taille de police que je suis. Réglez la taille du téléphone sur 1,6 RAM et changez également la couleur. Ce sera 444, qui est une couleur gris, gris foncé. OK, donc c'est à propos des entrées. Ensuite, nous devons prendre ici l'espace réservé. Je vais sélectionner les entrées du compte. Ensuite, nous avons besoin de l'élément d'entrée, suivi de la pseudo-classe placeholder Je veux dire un pseudo élément. La couleur sera 888. OK, après ça, je vais m' occuper de la case à cocher. Allons-y et sélectionnons une vérification de comptage. Il s'agit d'un développement de wrapper. Je vais définir la marge. Je vais déplacer l' élément légèrement vers le haut. Je vais définir une marge en haut, moins deux RAM. Ensuite, nous avons besoin de zéro sur le côté droit, trois RAM en bas et de zéro sur le côté gauche. Bien, après cela, je vais changer le curseur en pointeurs Sélectionnez la vérification du compte, puis l'élément de saisie et réglez le pointeur sur le pointeur Nous avons maintenant ici un pointeur. Ensuite, je vais m' occuper de l'étiquette. Allons-y et sélectionnons la vérification du compte, puis l'étiquette. Je vais augmenter la taille du téléphone. Réglons-le sur 1,6, alors le poids du téléphone sera de 300. Je vais changer de couleur. Réglons-le sur 777. Et modifiez également le pointeur du cours. OK, c'est tout à propos de la case à cocher. Ensuite, nous devons prendre soin du bouton. Je vais sélectionner le wrapper du formulaire de compte, suivi de l'élément bouton Je vais régler la largeur à 100%, puis la hauteur sera de cinq RAM. Ensuite, je vais changer la couleur de fond. La couleur sera 3776. Ensuite, je vais me débarrasser de la limite de faille. Faisons en sorte que le rayon de la bordure ne soit pas modifié. Faisons en sorte que le bouton soit arrondi. Je vais le mettre à quatre. Ici, nous avons le bouton qui a l'air sympa, mais il faut prendre soin de la police. Allons-y et définissons la taille de police sur 1,5 RAM. Ensuite, nous avons besoin que la police soit en gras, car je vais transformer le texte en majuscules. Ensuite, il nous faut de la couleur, ce sera du blanc. Ensuite, je vais régler l'espacement des lettres à 0,1 RAM. Et aussi, changeons le curseur, faisons-en un pointeur. Très bien, le bouton est plutôt joli. La seule chose à faire est de créer de l'espace. Je vais régler la marge à 1,5 image en haut, puis avoir besoin de 1,5 image en haut et en bas En fait, je vais mettre zéro à gauche et à droite. D'accord, c'est tout à propos du bouton. Passons à autre chose et prenons soin du paragraphe. Je vais sélectionner le wrapper Act Form, suivi de l'élément Je vais augmenter la taille du téléphone. Ce sera 1,8 RAM. Ensuite, nous aurons ici le centre de la ligne de texte. Nous devons centrer le texte. Et je vais aussi changer le poids du téléphone. Disons-le à 300. OK. Le paragraphe a l'air sympa. Comme vous vous en souvenez, nous avons deux éléments d'envergure à l'intérieur du paragraphe. Je suis connecté, le nom d'utilisateur et le mot de passe. Je vais le personnaliser. Ensuite, sélectionnons l'emballage en mousse du compte suivi des éléments Ensuite, nous avons besoin de Span. Je vais changer de couleur. Il y en aura 2371. Ensuite, nous avons besoin que le poids de la mousse soit de 400. Et je vais aussi définir un point de cap, c'est tout à propos du paragraphe Tout a l'air plutôt sympa. La seule chose que nous devons faire est de personnaliser ce bouton ici. Je vais sélectionner un bouton avec un nom de classe, BT et out. En fait, je vais copier ce code à partir d' ici car nous avons besoin de styles similaires. La largeur sera de 35 fram, alors nous avons besoin de la même hauteur que pour le fond Je vais utiliser la fonction des dégradés linéaires. La direction va être à droite. Nous avons besoin de couleurs. Le premier sera le f48f. Pour ce qui est de la deuxième couleur, je vais utiliser le F3393 Ensuite, nous avons besoin d'un rayon frontière sans frontière. Pour Am, toutes ces tuiles seront identiques. La seule chose que je vais changer ici, c'est la marge. Nous avons besoin d'une marge supérieure. La valeur proviendra du deuxième bouton. Ça a l'air plutôt sympa. En fait, nous en avons presque terminé avec cette page. La seule chose que nous devons faire est de réafficher le pied de page Pour cela, il suffit de supprimer l'attribut appelé hidden d'ici. Maintenant, tout est plutôt beau et nous en avons terminé avec la page du compte. La prochaine chose que nous devons faire est de nous occuper de la dernière page, qui est une page de tarification. Pour cela, passons à la prochaine conférence. 59. Créer le balisage HTML pour la page de prix: Lors de la conférence précédente, nous avons fini de travailler sur la page du compte. Ça a l'air plutôt sympa. Nous devons maintenant passer à autre chose et nous occuper de la dernière page de notre projet, et ce sera la page des prix. Passons à la version finale de notre projet et examinons la page de tarification. Il se compose d'un en-tête. Nous avons ici quelques symboles matériels. Ensuite, vous pouvez voir ici deux options de tarification différentes, l'accès annuel et l'accès à vie. De plus, nous avons ici quelques formes différentes comme arrière-plan de ces options. bas, vous pouvez voir le pied de page standard que nous avons utilisé dans les pages précédentes C'est tout à propos de la page de tarification. Dans cette conférence, je vais créer le balisage HTML. Passons au code VS. Ensuite, je vais créer de nouveaux fichiers dans les dossiers HTML et CSS dont nous avons besoin ici, en facturant le HTML. Ensuite, je vais créer un fichier CSS de tarification. Déplaçons ce fichier sur le côté droit. Ensuite, je vais accéder au compte HTM du fichier et copier le code entier. Collons-le ici. Je vais apporter quelques modifications. Nous devons changer le nom du fichier CSS. Il va s'agir de la tarification du CSS. Je vais me débarrasser de la section des comptes. Je vais également masquer le pied de page. Vérifie le navigateur. Nous avons ici la page des tarifs. Il est vide pour le moment. Nous n'avons ici que la navigation. Alors allons-y et répondons. Pour créer le balisage HDM, je vais insérer vos commentaires concernant les prix Ensuite, je vais ouvrir balise de section avec le nom de classe Pricing, le premier élément à l'intérieur de l'élément section, je vais créer un wrapper de tarification dans lequel je vais insérer un autre élément profond Et il s' agira de formes de tarification. Nous aurons trois formes différentes. Le premier sera le rectangle de tarification. Ensuite, je vais créer un petit cercle de tarification. Ensuite, nous avons besoin d'un grand cercle. Je vais dupliquer cette ligne de code et simplement changer le nom de la classe. Nous avons besoin d'un grand cercle de prix. OK, après les formes, je vais créer un en-tête de tarification dans lequel nous aurons trois en-têtes différents Le premier sera constitué d'éléments de titre H avec le texte « Tarification simple ». Ensuite, je vais ouvrir à nouveau éléments d'en-tête H one et il devrait être complet sous forme de sites Web illimités. Ensuite, après ces éléments de titre je vais ouvrir le titre H trois avec le texte Join. Plus de 100 000 clients ont accès à un nombre illimité de sites Web. Modernisez-les. En fait, nous avons besoin ici thèmes et de plugins modernes. Et nous avons également besoin du créateur de site Web ultime. OK, ensuite je vais ouvrir et il y aura les critiques dont nous aurons besoin dans le paragraphe. Avec le texte. Excellente. Ensuite, je vais ouvrir le tag p, il y aura pricing stars. Nous devons aller sur le site Web de Google Material Symbols et rechercher une étoile. Nous avons besoin d'icônes de champ, et je vais également sélectionner des icônes arrondies. Copions les éléments du span. Nous avons besoin de cinq sanelements différents. Je vais dupliquer cette ligne de code quatre fois. Ensuite, vérifions-le dans le navigateur si les icônes sont affichées. Comme vous pouvez le constater, nous avons ici cinq étoiles. Après cela, nous avons à nouveau besoin d' un paragraphe avec les critiques de texte. Ensuite, après le paragraphe, je vais ouvrir le tag avec le nom de la classe, Pricing, Trust, Pilot. À l'intérieur de cet élément, je vais réinsérer le symbole Google. Allons-y et cherchons le symbole appelé hôtel. Nous avons besoin de ce symbole ici. Copions cet élément span et collons-le ici. Vérifiez ensuite le navigateur. Nous avons ici l'icône. Ensuite, je vais insérer ici un autre élément span avec le texte Trust Pilot. Avec cet élément span, nous en avons terminé avec l'en-tête. Je passe ensuite à des éléments approfondis avec les cartes de tarification par nom de classe. Nous aurons deux cartes différentes. Créons le premier. En fait, je vais ajouter ici une autre carte de tarification par nom de classe à gauche. Il s'agira du nom de chaque classe. Pour ce qui est de la carte tarifaire, je vais l'utiliser comme nom de classe courant. À l'intérieur de la carte, nous aurons des éléments profonds avec le nom de classe en haut de la liste des prix, dans lequel je vais insérer un élément H à trois titres avec le texte annuel Xs. Ensuite, nous avons besoin de H un élément d'en-tête pour le prix. Le prix sera de 99,90$. 9$ Ensuite, après le titre, nous avons encore besoin d'étoiles. Je vais ouvrir le tag P avec les étoiles de tarification du nom de la classe. Copions alors ce panneau ici. Nous avons besoin de cinq étoiles. Je vais donc dupliquer ce panneau quatre fois. Vérifie le navigateur. Nous avons ici les étoiles. Ensuite, je vais ouvrir les éléments avec la liste des noms de classe, dans laquelle nous aurons plusieurs éléments de liste différents. Ouvrons les éléments LI. Le premier sera constitué de centaines de packs de sites Web. Au total, nous aurons six éléments de liste. Par conséquent, je vais dupliquer cet élément cinq fois, puis en modifier le contenu. Le second sera consacré aux mises à jour des produits, puis à l'assistance premium. Ensuite, la prochaine sera l'utilisation illimitée du site Web. Ensuite, la prochaine sera la garantie sans risque. Enfin, je vais intervenir pour une seule fois, d'accord ? Nous avons donc ici les éléments de la liste. Ensuite, je vais ouvrir le bouton avec le bouton de saisie. De plus, je vais ajouter ici le nom de la classe et ce sera la carte de tarification BTN comme texte que je vais insérer pour m'inscrire aujourd'hui OK. En fait, je pense que c'est tout à propos de la première carte. Tous les éléments sont créés. Ensuite, je vais dupliquer ces éléments car nous avons également besoin d'une deuxième carte. Je suis en train de le dupliquer. Nous devons apporter quelques modifications. Changeons le nom de la classe. Nous avons besoin d' une carte de prix, alors je vais modifier le contenu des rubriques. Dans ce cas, nous avons besoin d'un axe temporel. Quant au prix, il sera de 249,90 $. Ensuite, nous avons besoin d'étoiles comme liste de Je vais apporter de légères modifications. Nous avons besoin de mises à jour à vie des produits, support premium à vie. Pour le reste des articles, je ne vais pas les modifier. Je pense que tout est prêt. J'espère qu'il n' y a aucune erreur et que tout est correct. Nous verrons cela dans la prochaine conférence, où nous allons styliser ces éléments. Pour l'instant, vérifions le navigateur. Tous les éléments sont préparés. Allons-y et passons à la prochaine conférence, où nous allons styliser la page de tarification. 60. Styles de formes: Dans la conférence précédente, nous avons créé le balisage HTML pour la section des prix Tous les éléments sont créés et préparés. Nous devons maintenant commencer à styliser ces éléments. Passons au code VS dans le fichier CSS de tarification. Je vais insérer de nouveaux commentaires pour la section des prix. Ensuite, je vais sélectionner les éléments de section, le nom de la classe, la tarification. En fait, nous avons besoin de la tarification ici. La première chose à faire est de définir le w et la hauteur. La largeur sera de 100 %. Quant à la hauteur, je vais faire en sorte que la hauteur de la fenêtre soit de 150 Je veux dire 50 % de la fenêtre d'affichage. Ensuite, nous avons besoin de la marge supérieure 30 afin de créer de l'espace en haut de la section. D'accord, la hauteur est appliquée aux éléments. Ensuite, nous devons changer la couleur de fond de la barre de défilement. Je vais accéder au dossier du compte. Prenez ce code que nous avons ici, barre de défilement bleue. Je vais coller ce code ici. Comme vous pouvez le constater, la couleur d' arrière-plan de la barre de défilement est modifiée. Ensuite, je vais sélectionner l'emballage des prix. Je vais définir en hauteur. Réglons les deux propriétés à 100 %. Ensuite, je vais aligner les éléments à l'aide de la boîte flexible. Nous avons besoin de lin pour étalage. Ensuite, je vais changer de direction et en faire une colonne. Comme nous allons aligner les éléments flexibles verticalement, nous avons besoin que la direction du texte soit celle de la colonne. Je vais également définir une ligne d'éléments au centre. OK, je peux voir que le contenu est placé au centre. Ensuite, je vais m'occuper des formes de cette section. Je parle de ces trois formes, du rectangle et de ces deux cercles. Allons-y et commençons par le rectangle. Je vais sélectionner un rectangle de tarification. Tout d'abord, définissons les hauteurs écrites. Je vais les régler tous les deux à 50 m , puis je vais changer la couleur de fond. En fait, je vais utiliser un dégradé linéaire. La direction de la transition de couleur sera de 135 degrés. Ensuite, je vais sélectionner la première couleur, elle sera 184 BB. Quant à la deuxième couleur, elle sera transparente avec une valeur de pourcentage 8 %. Nous avons ici le rectangle avec un effet de dégradé linéaire. Ensuite, je vais l' arrondir en utilisant le rayon de bordure dix. Ensuite, nous devons changer de position. Je vais régler la position sur absolue. Ensuite, afin de positionner l' élément en fonction du parent, qui est le wrapper de tarification, nous avons besoin de la position relative de l'élément parent Ensuite, je vais définir propriété supérieure sur 30 %. Quant à la propriété du laboratoire, je vais la définir sur 15 % . Vérifie le navigateur. Nous avons ici le rectangle dont nous avons besoin pour le faire pivoter. Je vais utiliser le transfert avec la fonction de rotation Z, et la valeur sera de 45 degrés. Comme vous pouvez le constater, le rectangle est pivoté. La dernière chose à faire concernant cette forme est de diminuer l'opacité Réglons l'opacité 2.2 Très bien, passons à la première forme Je suis dedans, le rectangle. Ensuite, je vais m' occuper de la deuxième forme, qui est ce petit cercle. Je vais sélectionner un petit cercle de tarification. Tout d'abord, comme défini dans les hauteurs, je vais les régler toutes les deux à huit grammes, puis je vais changer la couleur de fond. Utilisons ici les couleurs 34d, d87. C'est une couleur verte. Ensuite, pour arrondir l'élément, nous avons besoin d'un rayon de bordure 50 %. Ensuite, je vais changer la position des éléments. Réglons-le sur absolu. Définissez ensuite les propriétés en haut et à droite. La première position sera de 25 %. Quant à la bonne position, je vais la fixer à 15 %. Voici le petit cercle. Ensuite, nous devons nous occuper de la troisième forme, je veux dire, ce grand cercle ici. Passons au code VS et sélectionnons le grand cercle de tarification. Tout d'abord, définissons la hauteur maximale. Je vais les envoyer tous les deux à Fort to Ram. Ensuite, nous devons changer le fond. Je vais utiliser à nouveau le dégradé linéaire. Le sens de la transition de couleur sera défini par deux droits. Ensuite, nous avons besoin de la première couleur, qui sera transparente. Quant à la deuxième couleur, elle sera 71186 Et nous avons également besoin d'une valeur en pourcentage de 9 %. Nous avons ici une erreur, nous avons besoin de 71186 Maintenant, tout semble correct. Nous avons ici l'élément, qui est actuellement en cercle. Occupons-nous de ça. Nous avons besoin d'un rayon de bordure 50 %. Maintenant, vous pouvez voir ici le cercle avec des interfaces de grade linéaire. Ensuite, nous devons prendre soin de la position de cet élément. Nous avons besoin d'une position absolue. Ensuite, je vais définir la position inférieure. Ce sera 15 % Ensuite, je vais définir la bonne position. Étudions à 15 %. Et enfin, je vais modifier l'opacité Commençons par 2.2 Les trois formes sont personnalisées et positionnées. Ensuite, nous devons prendre soin de l'en-tête de la page. Pour cela, passons à la prochaine conférence. 61. En-tête de coiffage: D'accord, dans la dernière conférence, nous avons stylisé ces formes ici Maintenant, comme je l'ai dit, nous devons passer à autre chose et personnaliser l'en-tête de la page de tarification. Passons au code VS, puis sélectionnons l'en-tête de tarification. Je suis au centre du texte, je veux dire que nous avons besoin du centre de la ligne de texte. En plus de cela, je vais créer de l'espace en bas en utilisant la marge. 20 RAM inférieure. Comme vous pouvez le voir, le texte est placé au centre et nous avons également ici l'espace. Ensuite, je vais m'occuper des rubriques individuellement. Je vais commencer par le premier titre. En fait, je vais personnaliser les deux titres simultanément car nous avons ici deux éléments de titre H un Je vais les sélectionner. Nous avons besoin d'un en-tête de tarification suivi de l'élément d'en-tête H. Tout d'abord, je vais changer de famille de téléphones. Ce sera Mode Coursin'm, pour trouver la taille de police, il y aura cinq RAM De plus, nous avons besoin d'un espace entre les lettres. Réglons un espacement entre les lettres de 2,2 RAM et trouvons un lichen. La couleur que nous allons utiliser ici, la couleur 26353. D'accord ? Comme vous pouvez le constater, les deux premiers titres sont personnalisés, ils sont plutôt jolis Ensuite, nous devons nous occuper de l'élément de titre H à trois niveaux. En fait, dupliquons ce code, dupliquons ce code, changeons le sélecteur dont nous avons besoin ici, H trois Ensuite, je vais me débarrasser de Phone Family. De plus, je vais régler la taille du téléphone à deux RAM. Ensuite, nous devons nous débarrasser de l'espacement entre les lettres. La couleur du titre sera 567599. En plus de cela, je vais ajouter ici le poids du téléphone 300. Vérifie le navigateur. Je vais diminuer la largeur du titre. Réglons deux RAM. Et puis dans le navigateur, la largeur est diminuée. Mais comme vous pouvez le constater, il faut placer le titre au centre. Par conséquent, je vais utiliser la marche. faut marcher, il y aura deux béliers en haut. Ensuite, nous avons besoin d'une voiture sur le côté droit, puis de deux RAM. En fait, débarrassons-nous de deux car nous avons besoin des mêmes valeurs pour le côté inférieur et aussi pour le côté gauche. Nous pouvons donc ne laisser ici que deux RAM et une voiture. Vérifions-le. Comme vous pouvez le voir, le titre est placé au centre et nous avons également un peu d'espace en haut et en bas. Bien, passons aux titres. Ensuite. Je vais m'occuper de cette partie ici. Je vais sélectionner le paragraphe. Réglons la taille de police à deux RAM. Ensuite, nous avons besoin du poids de police. Il y en aura 300. De plus, je vais créer de l'espace sur le côté droit en utilisant la marge, n'est-ce pas ? La valeur sera d'un RAM. D'accord, les paragraphes sont donc personnalisés. Ensuite, je vais m' occuper des étoiles. Sélectionnons le développement du wrapper, à savoir les critiques. Je vais utiliser Flex box pour aligner les éléments. Réglons l'affichage pour qu'il soit flexible. Ensuite, nous devons justifier Content Center. Comme vous pouvez le constater, les éléments sont placés horizontalement dans une rangée. Ensuite, je vais sélectionner Pricing Stars, qui est l'enveloppe des icônes Sélectionnons les étoiles de tarification et créons de l'espace sur le côté droit en marchant à droite, un Ram Bon, maintenant nous devons personnaliser les étoiles. Je vais sélectionner l'élément span. Je veux dire, ces éléments de durée, nous avons besoin d'étoiles de prix suivies des éléments de durée Réglons la taille du téléphone à 2,5 RAM. Et je vais aussi changer la couleur des étoiles. La couleur sera 03b 57. C'est une couleur verte. Comme vous pouvez le constater, les étoiles sont plutôt jolies. Ensuite, je vais m' occuper de cette partie ici. Sélectionnons Pricing Trust Pilot. Je vais utiliser Flex box. Réglons l'affichage sur les drapeaux. Ensuite, nous devons aligner les éléments au centre. De plus, nous devons déplacer les éléments légèrement vers le haut en utilisant marge supérieure avec une valeur négative de -0,5 Ram OK, maintenant ça a l'air plutôt sympa. Ensuite, nous devons personnaliser ces deux éléments ici. Allons-y et commençons par le premier élément de span, qui est une icône. Je vais sélectionner Pricing Trust Pilot, puis l' élément span avec sélecteur Comme je l'ai dit, nous devons nous occuper du premier élément de span, qui est une icône dont nous avons besoin ici Je vais régler la taille du téléphone sur 3,5. Quant à la couleur, je vais utiliser la même couleur. Allons le prendre et le coller ici. D'accord, comme vous pouvez le voir, l'icône est plutôt jolie. La dernière chose que nous ayons à faire est de prendre soin de cet élément ici. Je vais dupliquer ce code. Nous avons besoin d'un élément d'envergure pour le deuxième élément d'envergure. Débarrassons-nous de la couleur et changeons la taille du téléphone dont nous avons besoin pour fonctionner. Très bien, c'est l'en-tête. Ça a l'air plutôt sympa. Ensuite, nous devons prendre soin des cartes. Et pour cela, passons à la prochaine conférence. 62. Cartes de prix de coiffure: Bien, donc après avoir stylisé l'en-tête, nous devons ensuite nous occuper des cartes. Nous devons les styliser tous les deux. Revenons donc au code VS et commençons à styliser les cartes. Je vais sélectionner le développement du wrapper les cartes de tarification Et je vais utiliser Flex Book pour placer les cartes horizontalement dans une rangée. Je veux dire côte à côte. Nous devons donc afficher Flex. Si nous examinons le projet, vous verrez que les cartes sont placées côte à côte. Ensuite, je vais personnaliser les cartes. Comme vous vous en souvenez, chaque carte possède une carte de tarification de classe commune et reste également une carte de tarification individuelle par classe. Tout d'abord, je vais ajouter aux deux cartes des styles communs. Je vais donc les sélectionner à l' aide d'une carte de tarification par nom de classe commun. Je vais définir les hauteurs élargies. La largeur sera de 45 RAM. Pour ce qui est de la hauteur, je vais faire 70 Ram. Ensuite, je vais changer la couleur de fond. Ça va être blanc. De plus, afin de voir clairement les cartes, je vais définir l' ombre de la boîte avec les valeurs. 01 RAM, dix RAM, et la couleur sera RGB, A 130-16-2235, et l'opacité Comme vous pouvez le constater, nous avons ici deux cartes. En fait, les formes, je veux dire, ces éléments se chevauchent sur les cartes Je vais les placer derrière les cartes, et pour cela nous pouvons définir la propriété d'index. Mettons-le à dix, d'accord ? Maintenant, comme vous pouvez le constater, le problème est résolu. OK ? Ensuite, je vais créer un espace entre les cartes. Faisons-le en utilisant la marge. La marge sera nulle en haut et en bas. En ce qui concerne les côtés gauche et droit, je vais fixer la marge à 1,5 m. Maintenant, il y a de l'espace entre les cartes. Ensuite, je vais également créer de l' espace à l'intérieur de la carte. Pour cela, nous avons besoin d'un rembourrage. Le rembourrage sera composé de quatre rampes en haut et en bas , puis de six rampes sur les côtés gauche et droit. C'est bon. Ensuite, je vais arrondir les coins des cartes. De plus, nous devons aligner les objets à l'intérieur de la carte à l' aide de livres en lin. Réglons le rayon de bordure sur, en fait, nous avons besoin ici du rayon de bordure. Le rayon de bordure sera d'un Ram. Ensuite, comme je l'ai dit, nous avons besoin de livres flexibles. Je vais régler l' affichage sur flex. Ensuite, je vais changer de direction car nous allons aligner verticalement les éléments à l'intérieur de la carte. Je vais donc définir la direction de flexion de la colonne, placons-la vers le bas. Ensuite, je vais placer les objets au centre. Nous devons aligner les articles au centre. Et nous devons également détecter le texte à l'aide de texte. Aligner le centre. OK, c'est ça. À propos des styles courants des cartes. Ensuite, je vais personnaliser les éléments H séparément. Nous allons commencer par les titres, je veux dire par H trois éléments de titre Allons-y et sélectionnons la tarification de la voiture, puis, en fait, nous avons besoin de votre carte de prix en haut. Et puis H, trois éléments de titre. Tout d'abord, je vais définir la famille de téléphones. Ce sera de la cursive mull. Ensuite, nous avons besoin de la taille du téléphone, je vais régler la taille du téléphone à 1,8 RAM. Ensuite, nous devons transformer le texte en majuscules. Je vais créer un espace entre les lettres. Réglons-le sur 2,2 RAM. Enfin, je vais créer de l'espace en bas en utilisant la marge inférieure, la valeur sera de deux points, d'accord ? Comme vous pouvez le constater, les titres sont personnalisés. Mais si nous examinons le projet terminé, vous verrez que les titres ont des couleurs différentes Et nous voyons également ici l'effet de gradient linéaire. Je vais définir la couleur séparément. Allons-y et sélectionnons la carte de prix à gauche, puis je vais utiliser le sélecteur ici Je vais utiliser. Dégradé linéaire, la direction de la transition de couleur sera double. Ensuite, il faut définir les couleurs. La première couleur sera 441d. Pour ce qui est de la deuxième couleur, je vais utiliser 0b38 De plus, je vais adhérer à 90 %. Ensuite, nous avons besoin d'une propriété appelée clip d'arrière-plan Webkit, ce sera du texte De plus, nous devons définir la couleur sur transparent. D'accord, comme vous pouvez le voir, le titre de la première carte est plutôt joli. Nous avons ici un effet de gradient linéaire. Faisons de même pour le deuxième titre. Je vais dupliquer ce code. Ensuite, nous devons changer le nom de la classe. Nous avons besoin d'une carte de prix, non ? Et il faut aussi changer les couleurs. La première couleur sera C, A six EFF. Pour la deuxième couleur, je vais la régler sur 71186. OK, vérifions les résultats. Comme vous pouvez le constater, le deuxième titre également très joli. Ensuite, nous devons nous occuper des prix. Je vais sélectionner le prix le plus élevé. Je vais régler le téléphone familial sur Molly. En fait, récupérons ce code à partir d' ici et apportons quelques modifications. La taille du téléphone sera de six RAM. Ensuite, nous avons besoin, en fait, nous n'avons pas besoin de majuscules. Je pense qu'en fait c'est ça. Vérifie le navigateur, les titres, les prix sont bons Nous devons changer les couleurs, et nous devons faire de même pour les rubriques précédentes Nous pouvons simplement ajouter ici une sélection. Dupliquons le sélecteur. Débarrassez-vous du Calibra , alors nous en avons besoin ici. Et aussi les éléments de titre H one. Vérifie que le prix du navigateur est de la même couleur avec un effet de dégradé. Faisons de même pour la deuxième carte. En fait, copions ce sélecteur à partir d'ici. Et puis il suffit de changer le nom de classe dont nous avons besoin ici, non ? C'est bon, c'est ça. Les titres sont plutôt jolis et il faut ensuite s'occuper des étoiles Revenons au code VS. Je vais sélectionner un emballage avec nom de la classe, une carte de tarification avec des étoiles Je vais créer de l' espace bas en utilisant la marge inférieure pour Ram. Ensuite, nous devons sélectionner le panneau dont nous avons besoin, encore une fois, les étoiles de la carte de prix suivies de cet élément les étoiles de la carte de prix suivies de cet Je vais changer la couleur de l'étoile. Utilisons ici 0357. Comme vous pouvez le constater, les étoiles sont plutôt jolies. Ensuite, nous devons nous occuper de ces listes. Ici, je vais sélectionner les éléments UL avec la liste de prix des noms de classe. La première chose que je vais faire est de me débarrasser des puces par défaut Nous n'avons besoin d'aucun style de liste. Je vais également créer un espace en bas en utilisant la marge inférieure pour. OK. Comme vous pouvez le voir, les balles sont retirées et nous avons également un peu d' espace en bas Ensuite, nous devons nous occuper des éléments de la liste. Je vais sélectionner la liste de prix, suivie des éléments LI. En fait, nous avons besoin d'ici. La carte de prix est la plus basse et la suivante. Ensuite, il doit être suivi de l'élément LI. Je vais augmenter la taille du téléphone, il y aura deux RAM. Ensuite, nous avons besoin d'un téléphone d'un poids de 300, disons, car je vais changer la couleur. Réglons-le sur 567599. Ensuite, nous avons besoin d'une marge, 1,5 RAM en haut et en bas, puis de zéro sur les côtés gauche et droit. Comme vous pouvez le constater, les articles les moins beaux sont plutôt jolis. Ensuite, nous devons changer la couleur du cinquième élément le plus petit. Je veux dire, nous devons rendre le moins d'objets verts. Pour cela, je vais sélectionner les éléments LI, puis le énième sélecteur enfant Nous devons sélectionner le cinquième élément. La couleur sera 0357. Comme vous pouvez le voir, le cinquième article a maintenant une couleur différente. Nous devons maintenant nous occuper du dernier point. Nous avons besoin que le dernier élément soit surligné. un fait, allons-y et sélectionnons l'élément de liste de la première carte. Il nous reste une carte de prix, suivie de la liste des prix. Ensuite, nous avons besoin d'un élément li suivi du dernier sélecteur enfant Nous avons besoin de votre dernier enfant. Je vais utiliser une propriété appelée décoration de texte avec la ligne de valeur parcourue. Ensuite, nous avons besoin d'une opacité de 0,5 OK. C'est à peu près le moins possible. Ensuite, nous devons prendre soin des boutons. Je vais sélectionner la carte tarifaire BTN. Je vais régler la largeur à 100 %, puis la hauteur sera de six béliers Je vais changer la frontière. Je veux dire, nous devons nous débarrasser de la bordure par défaut, la définir sur aucune, puis nous avons besoin que le rayon de bordure soit de cinq RAM. Réglons ensuite la taille de police à 1,6 Rams. Je vais transformer le texte en majuscules, changer de couleur, il sera blanc. Ensuite, nous devons créer un espace entre les lettres. Réglons-le sur 2,2 RAM. Enfin, je vais placer le curseur sur le pointeur. l'heure actuelle, les boutons ne sont pas très beaux car nous devons changer les couleurs d'arrière-plan de chaque bouton. Nous avons besoin de dégradés linéaires pour les deux motifs, ils ont des couleurs différentes. Je vais sélectionner la carte de prix à gauche, suivie du PTN de tarification Ensuite, je vais changer le fond. Utilisons des dégradés linéaires. En fait, nous avons besoin des valeurs similaires à celles que nous avons utilisées pour le titre. Je vais donc récupérer ce code à partir d'ici. Vérifie le navigateur. Le premier motif est plutôt joli. Faisons de même pour le second. Je vais dupliquer ce code, puis le changer de gauche à droite, et également récupérer les valeurs d'ici. Collons la valeur ici. Comme vous pouvez le constater, les deux boutons sont plutôt jolis. En fait, avec les cartes, nous avons presque terminé. Je dois faire encore une chose. Si nous examinons le projet final, vous verrez que la carte sur le côté droit semble un peu plus grande que la carte gauche. En fait, vous pensez peut-être que nous allons augmenter la hauteur intérieure, mais ce n'est pas ce que nous allons faire. Je vais créer via l'environnement , puis je vais déplacer cette carte près de l'utilisateur. Pour créer à travers l'environnement, nous devons utiliser une propriété appelée Perspective. Nous devons l'ajouter aux cartes de prix. La valeur sera de 50 Ram. Ensuite, je vais sélectionner la carte tarifaire, non ? Je vais utiliser transform, puis traduire une fonction avec la valeur cinq Ram. Maintenant, comme vous pouvez le voir, la deuxième carte, je veux dire la carte sur le côté droit s'est rapprochée de l'utilisateur. Je trouve que ça a l'air plutôt sympa. OK, avec la page des prix, nous sommes presque en panne. La seule chose que nous devons faire est d'afficher le pied de page Je vais me débarrasser de l' attribut called et c'est tout. OK. La page de tarification est plutôt jolie et moderne en fait, avec les pages que nous avons terminées. La prochaine chose que nous devons faire est de rendre le projet réactif aux différentes tailles d' écran et aux différents appareils. Passons à la prochaine conférence. 63. Rendre le projet réactif pour des écrans plus grands: Bonjour et bienvenue dans notre nouvelle section dans laquelle nous allons adapter notre projet aux notre projet aux différentes tailles d'écran et aux différents appareils. Dans la dernière section, nous avons terminé de travailler sur le projet. Je veux dire, nous avons créé et stylisé toutes les pages. Tout semble plutôt beau et moderne, mais nous devons maintenant rendre le projet réactif. Je voudrais parler un peu de l'importance de la conception Web réactive dans le développement Web. En fait, c'est très important dans le développement Web car cela garantit que les sites Web fonctionnent bien sur toutes sortes d' appareils et de tailles d'écran. Avec autant de gadgets différents tels que les smartphones et les tablettes, conception Web réactive aide sites Web à être beaux et faciles à utiliser partout. Cela permet également d'économiser du temps et des efforts en évitant d'avoir à concevoir des modèles distincts pour chaque appareil. De plus, les moteurs de recherche tels que Google préfèrent les sites Web adaptés aux mobiles. La conception Web réactive peut également améliorer la visibilité d' un site. En termes simples, la conception Web réactive est indispensable au développement Web. Pour garantir que les sites Web restent conviviaux et efficaces sur le large éventail d'appareils que les gens utilisent aujourd'hui dans mon projet Web, je me suis fixé comme priorité de rendre le site Web impressionnant sur différents appareils. Nous parlons de grands écrans de bureau tels que 1920 pixels et 1 600 pixels. Ainsi que des modèles légèrement plus petits comme 14 40 pixels, 1960, 6,12 × 80 pixels. Quatre tablettes. J'ai 820 pixels et 768 pixels. Bien sûr, pour ceux qui aiment naviguer sur leur téléphone, j'ai optimisé pour 43 393,3 Ce faisant, je m'assure que, quelle que soit la manière dont quelqu'un accède au site, ce soit sur un ordinateur, une tablette ou un téléphone portable, l'expérience est fluide et agréable Cette approche est essentielle aujourd'hui car les gens utilisent toutes sortes d'appareils, et je souhaite que tout le monde passe un moment positif et convivial sur mon site Web. La conception Web réactive n'est pas qu'un terme fantaisiste. Il s'agit de rendre les choses faciles et agréables pour tous, quel que soit le gadget qu'ils utilisent. D'accord ? Comme vous le savez, nous avons construit notre projet sur cet écran de très grande taille, et nous devons maintenant le rendre réactif sur ces points de rupture. Le premier point d'arrêt sera celui-ci ici. Je vais rendre le projet responsive avec toutes ses pages, puis nous passerons à un autre point d'arrêt OK, inspectons la page, passons en mode réactif. Comme vous pouvez le constater, nous avons ici ces dimensions. Je veux dire, 1920 pixels de largeur et 1080 pixels de hauteur. Comme je l'ai dit, le premier point de rupture sera 1 600 pixels et 900 pixels. Je vais insérer ici ces dimensions. Ensuite, je vais passer au code VS. Fermons ce dossier ici. Ensuite, je vais insérer ici de nouveaux communs pour le responsive. Ensuite, je vais utiliser requête multimédia CSS pour définir la largeur maximale de l'écran. Nous avons besoin d'un panneau suivi par les médias. Ensuite, nous devons spécifier la largeur maximale de l'écran. Ça va faire 1 600 pixels. Nous pouvons maintenant insérer ici les tuiles dont nous avons besoin. La première chose que je vais faire est de modifier la taille de police de l'élément HTML. Comme vous vous en souvenez, nous avons défini la taille de police du code HTML à 62,5 % afin d'utiliser le RAM, l'unité de mesure Et je vais diminuer la taille de la police de l'élément H mal. Cela réduira la taille de tous les éléments de l'ensemble du projet. Je vais réduire la taille de police de l'élément H mal 60 %. Maintenant, tous les éléments du projet sont devenus plus petits. Ensuite, je vais m' occuper de la barre de navigation. Je vais diminuer le rembourrage du. Côtés gauche et droit. Je vais sélectionner non et régler le putting sur 0,10 Exécuter ensuite Je vais modifier la largeur des articles sans éléments Moi, l'élément profond de l'enveloppe. Je ne vais sélectionner aucun élément et définir sa largeur à 55 %. Comme vous pouvez le voir, la largeur des éléments de navigation l'élément wrapper est augmentée Ensuite, je vais supprimer le menu déroulant. Comme vous pouvez le constater, il y a ici un petit écart entre le menu déroulant et le triangle. Je vais régler ce problème. Sélectionnons le menu déroulant. Changez sa position, je vais le régler sur 4,5 RAM. Maintenant, comme vous pouvez le constater, nous n'avons plus ici l'écart entre le triangle et le menu déroulant. Ensuite, je vais m'occuper de la section des services. Sélectionnons le wrapper des services et définissons la largeur à 70 %. D'accord, nous avons maintenant un meilleur résultat Ensuite, je vais m' occuper de la liste des projets. Allons-y et sélectionnons la liste des projets. Je vais me fixer à 80 % OK, donc cette section est également belle. Je passe ensuite à la section des modèles. Je vais personnaliser les images. Modelons à droite, suivi de l'image. Ensuite, nous avons besoin de sélectionner un enfant. Nous allons sélectionner la première image. Je vais changer les deux positions, ça va être de 45 %. Ensuite, réglons la largeur à 35 RAM. Je vais dupliquer le code dont nous avons besoin ici. Troisième image, puis je vais me débarrasser de la position supérieure et changer la largeur. Faisons en sorte que ce soit 55 RAM. OK, maintenant tout semble bien. Ensuite, nous devons combler cette petite lacune. En fait, je pense que c'est un défaut du navigateur que nous voyons ici. Cette petite lacune. Quoi qu'il en soit, je vais régler ce problème. Sélectionnons la section d'abonnement. Je vais régler la marche à moins un M. Maintenant, il n'y a plus d'écart et tout semble plutôt beau D'accord. Je pense donc que c'est à propos de la page d'accueil. Ensuite, nous devons nous occuper de la page restante. Passons à la page du client. Nous devons augmenter la largeur des témoignages, je veux dire l'emballage Revenons au code VS et ouvrons les clients du fichier CSS. Je vais insérer vos commentaires pour être réactif. Ensuite, nous avons besoin de la largeur maximale de la requête multimédia CSS qui sera de 1 600 pixels. Je vais sélectionner l'emballage des témoignages. Réglons sa largeur à 90 % OK, maintenant la section est plutôt jolie. Je pense que nous n'avons pas besoin de changer quoi que ce soit à ce point de rupture. Passons à la page suivante, qui est la page du produit. Je vais apporter ici des modifications aux diapositives. Allons-y et ouvrons la page des produits. Ensuite, nous avons besoin de ses commentaires pour réagir. Je vais définir le média X avec 1 600 pixels. Nous avons besoin de 1 600 pixels par an. Je vais sélectionner contenu du produit. La largeur de modification sera 90 %. Ensuite, je vais m' occuper du contenu promotionnel. Je suis l'élément d'en-tête. Allons-y et sélectionnons le contenu promotionnel, suivi de l'élément d'en-tête H. Je vais changer la taille du téléphone. Réglons-le sur 3,5 m. OK, maintenant le contenu promotionnel semble bon. En fait, avec la page du produit, nous en avons terminé. Passons à autre chose et vérifions la page de contenu. Je pense que tout semble bon. Ensuite, vérifions la page du compte. Nous n'avons pas besoin de modifications ici. En ce qui concerne la page de tarification, je vais apporter vos modifications aux diapositives. Revenons au code VS et au fichier SS des prix ouverts. Insérons des commentaires. Je vais créer une requête Caesars Media avec Xw de 1 600 pixels Allons-y et sélectionnons un petit cercle. Et changer sa bonne position sera de 10 %. De plus, je vais m' occuper de la position du grand cercle. Dupliquons alors ce code. Je vais changer le nom de la classe. Il va être grand. Je vais régler la bonne position à 10 % et je vais également changer la position de la boîte. Ça va être de 12 %, d'accord. Tout a l'air plutôt sympa. Et en fait, à ce point d'arrêt, je veux dire 1 600 pixels de largeur et 900 pixels de hauteur Nous avons terminé. Nous pouvons donc vérifier ce point d'arrêt ensuite, nous devons prendre soin de ce point d'arrêt ici Pour cela, passons à la prochaine conférence. 64. Rendre le projet réactif pour les écrans plus petits - Partie 1: Dans la conférence précédente, nous avons rendu le projet réactif. En ce qui concerne le point d'arrêt, je veux dire 1 600 pixels de largeur et 900 pixels de hauteur Il est maintenant temps de passer à autre chose et de rendre le projet réactif sur différentes tailles d'écran. Le prochain point d' arrêt sera celui-ci. Je veux dire, 14, 40 pixels et 900 pixels de hauteur. Revenons au navigateur et modifions les dimensions en mode réactif. Il nous faut ici 14, 40 pixels puis 900 pixels. Revenez ensuite au code VS, ouvrez le fichier de style CSS et créez une nouvelle requête multimédia CSS. La largeur maximale sera de 14 ou 40 pixels. La première chose que je vais faire est de modifier la taille de police de l'élément H Timel Je vais le diminuer encore une fois. La taille de police sera de 48 pixels. Je veux dire, le pourcentage, pas les pixels. Maintenant, les éléments sont redevenus plus petits. Ensuite, je vais m'occuper des éléments, du développement des emballages. Ne sélectionnons aucun élément. Encore une fois, augmentez la largeur. Je vais le mettre à 60 % D'accord, je pense que nous n'avons pas besoin de modifier l'en-tête. Ensuite, nous devons nous occuper de la section des services. Je vais sélectionner le wrapper des services. Définissez la largeur. La largeur sera de 75 %. D'accord, la section des services semble bonne. Ensuite, je vais m'occuper de la section des projets. Je vais augmenter la largeur de la navigation. Je parle de cette navigation ici. Et je vais également augmenter la largeur du projet à, allons-y, sélectionner Filtrer et régler sa largeur à 85 %. Ensuite, je vais sélectionner Liste des projets ici. Liste des projets, et je vais également me fixer à 85 %. OK ? La section du projet est donc plutôt jolie. Ensuite, je vais m'occuper de la section des modèles. La seule chose que je vais faire est ce paragraphe, je suis dans la largeur réduire légèrement ce paragraphe, je suis dans la largeur de ce paragraphe. Allons-y et sélectionnons les modèles à gauche, puis les éléments que je vais définir avec 250. Très bien, donc je pense que c'est à propos de la page d'accueil. Tout a l'air plutôt sympa. Ensuite, nous devons nous occuper de la page du client. Allons-y, ouvrons le fichier CSS des clients et créons une nouvelle requête multimédia CSS d'une largeur maximale de 40,40 pixels Je vais augmenter la largeur de l'emballage du témoignage, je parle de cet élément d'emballage Allons-y, sélectionnons emballage du témoignage et définissons sa largeur à 95 %. Ensuite, je vais modifier la largeur du témoignage lui-même Sélectionnons le témoignage et définissons sa largeur sur 32. Encore une fois, la section des témoignages semble bonne avec cette page. Nous avons terminé. Ensuite, jetons un coup d'œil à la page du produit. Nous devons apporter vos légères modifications. Je vais ouvrir les produits du fichier CSS , puis nous devons créer de nouveaux médias CSS. Nombre maximum de requêtes La largeur sera de 14 ou 40 pixels. Ensuite, je vais sélectionner contenu promotionnel et définir la largeur à 70 %. Ensuite, je vais m' occuper des formes. Sélectionnons le rectangle promotionnel. Je vais régler la position gauche à 8 %. Je vais également la changer en position. Mettons-le à 25 % Ensuite, je vais m'occuper du grand cercle. Je vais également changer de position. Sélectionnons le grand cercle. Réglez la position inférieure à 25 %. De plus, je vais changer la bonne position sera 8 %. C'est tout. La section promotionnelle semble bonne. En fait, avec cette page, c'est terminé. Regardons la page de contact. Ça a l'air bien. De plus, la page du compte est également belle. Regardons la section sur les prix. Je vais donc modifier légèrement la position du cercle. Je vais ouvrir la tarification du fichier. Et puis créons une requête médiatique d'une largeur maximale de 14, 40 pixels. Je vais sélectionner un petit cercle de tarification. Je vais changer sa bonne position. Faisons en sorte que ce soit 7 %, d'accord ? C'est tout qui semble plutôt beau sur les points d'arrêt. Et je vais vérifier ce point de rupture ici. Ensuite, nous devons rendre le projet réactif à ce point d'arrêt Et pour cela, passons à la prochaine conférence. 65. Rendre le projet réactif pour les écrans plus petits - Partie 2: Dans la conférence précédente, nous avons fait en sorte projet réponde à ce point d'arrêt Je suis ici dans la taille de l'écran avec les dimensions suivantes. 14, 40 pixels de largeur et 900 pixels de hauteur. Ensuite, nous devons nous occuper du prochain point d'arrêt. Je suis dans celui-ci. Revenons au navigateur et modifions les dimensions dont nous avons besoin ici, 13, 66, puis 768. Je vais revenir au code VS. Passons au fichier de style CSS et créons une nouvelle requête multimédia CSS. La largeur maximale sera de 13, 66 pixels. La première chose que je vais faire est modifier la taille du téléphone de l'élément HTML. Je vais régler la taille du téléphone à 56 %, cela diminuera la taille des éléments. Ensuite, je vais m'occuper des projets car les deux premières sections sont belles. Occupons-nous des projets. Je vais sélectionner Projet. Je vais changer la largeur, ce seront les deux Ram. Nous devons également modifier la taille des images. Je vais sélectionner la première image avec Nth Child Selector Insider One La largeur de la première image sera de 19 Ram. Ensuite, je vais dupliquer ce code deux fois car nous devons également personnaliser les deux images restantes. La deuxième image, la largeur de la deuxième image sera de 17 RAM. Ensuite, je vais définir la position gauche et la mettre à zéro. Quant à la troisième image, fixons-la à 90 % Et je vais également régler la bonne position à zéro, d'accord ? Comme vous pouvez le constater, la largeur des images est modifiée et elles sont plutôt jolies. D'accord, nous devons ensuite nous occuper de la section des modèles. Je vais prendre les photos. Passons au code VS et sélectionnons le modèle, droite, suivi des éléments de l'image. Encore une fois, sélectionnez, nous avons besoin de la première image. Je vais définir, faisons-en 30 RAM. De plus, je vais changer les deux positions, ce sera 45 %. Ensuite, je vais dupliquer ce code, changer le sélecteur Nous avons besoin de votre deuxième image. Je définis la largeur de la deuxième image. Ça va faire 17 RAM. OK, vérifions le navigateur. Je trouve que tout est plutôt beau. Ensuite, nous devons prendre soin de l'ombre. Je veux dire, cet effet de flou, si vous vous en souvenez, concerne quatre éléments de la section des modèles Je vais sélectionner les modèles suivis des quatre éléments. Je vais modifier la hauteur intérieure. Partons de 270 m. Quant à la hauteur, elle sera également de 70 m. Je vais également changer la position de l' élément dont nous avons besoin. La position inférieure sera zéro. Et nous avons également besoin de la bonne position, qui sera de 8 % Maintenant, nous avons de meilleurs résultats avec la page d'accueil. Nous avons terminé. Toutes ces sections ont l'air bien. Regardons le reste des pages. Je pense que la page du client est également belle. Regardons la page des produits. Je vais apporter ici quelques modifications. Passons au code VS et ouvrons les produits du fichier CSS. Je vais créer un nouveau média C. Spécifiez le maximum avec 13, 66 pixels. Tout d'abord, je vais m' occuper des images. Sélectionnons le contenu des produits. À ce moment-là, nous avons besoin d'une image avec un sélecteur d'enfants. Je vais sélectionner la première image. Modifions les hauteurs intérieures. Je vais régler la largeur à 30 RAM. Ensuite, la hauteur sera de 60 Ram. Je vais également changer la position de l'image. Réglons la position supérieure à 45 % Quant à la droite, position sera de 13 % La première image est personnalisée. Ensuite, nous devons nous occuper de la deuxième image. Je vais dupliquer ce code ici. Ensuite, je vais changer de sélecteur, nous avons besoin de sa deuxième image La largeur sera de 17 RAM. Ensuite, je vais me débarrasser de la hauteur, passer à la position, ça va être de 20 %. Quant à la bonne position, je vais faire en sorte qu'elle soit de 29 %. D'accord, la deuxième image est belle. Ensuite, nous devons nous occuper de la troisième image. Allons-y et dupliquons à nouveau le code dont nous avons besoin. Troisième image, je vais la régler avec 226 RAM. Ensuite, nous avons besoin de la position inférieure, ce sera 28 %. Ensuite, je vais régler bonne position à 3 %. Les images sont belles. En fait, avec cette partie, c'est terminé. Passons à autre chose et occupons-nous du contenu promotionnel. Je sélectionne le contenu promotionnel, modifions-le en hauteur. La largeur sera de 60 %. Quant à la hauteur, je vais la porter à 40 RAM. Ensuite, je vais personnaliser le grand cercle. Une fois que nous avons survolé le contenu promotionnel, je sélectionne un grand cercle avec la classe animée Je vais changer l'échelle. Ce sera 1.3 Maintenant, nous avons de meilleurs résultats. En fait, je pense que nous devons personnaliser le titre parce que je pense qu'il est plus grand que ce dont nous avons besoin ici. Je vais sélectionner le contenu promotionnel avec les éléments de titre H one. Réglons la taille à trois maintenant. Ça a l'air plutôt sympa. Ensuite, je m'occupe de l'ombre. Allons-y et sélectionnons Promo Shadow. Je vais changer la position inférieure. Ça va être de -14 % Ensuite, je vais changer l'ombre, je veux dire la position inférieure de l'ombre Une fois que nous aurons survolé le contenu promotionnel, je vais dupliquer ce code Ensuite, nous devons ajouter ici la classe animate. Je vais fixer la dernière position à 17 %. OK, maintenant tout va bien. Et en fait, avec cette section, nous en avons terminé. Regardons les autres pages. La page de contact semble bonne. Je pense que la page du compte est également belle. Ensuite, nous avons ici la section des prix. Ça a l'air bien aussi. Je pense que c'est ça. En ce qui concerne les points d'arrêt, le projet semble bon Je vais vérifier ce point d'arrêt. Le point d'arrêt suivant est celui-ci, la taille de l'écran aux dimensions 12, 80 pixels de largeur et 780 pixels de hauteur Au point d'arrêt, nous devons modifier la taille de police de l'élément H mel Tout dépend de ce point d'arrêt. Je ne vais pas consacrer une nouvelle conférence vidéo à ce point d'arrêt Je vais personnaliser le projet sur le point d'arrêt. Dans cette conférence, passons au code VS et ouvrons le fichier CSS stylisé Créons une nouvelle requête multimédia CSS avec une largeur maximale de 12 80 pixels. Sélectionnez ensuite l'élément Htimil et modifiez la taille du téléphone. Ce sera 52 % Ensuite, je vais modifier ici les dimensions. Nous allons donc vérifier le projet. Comme vous pouvez le constater, tout semble bon. Nous n'avons pas besoin de changer quoi que ce soit à ce point d'arrêt. En fait, j'ai oublié une chose sur la page d'accueil. Je n'ai pas encore vérifié le lecteur vidéo. C'est mon erreur. Mais comme vous pouvez le constater, ça a l'air bien. Nous n'avons rien à changer ici. D'accord, cela concerne ces points d'arrêt Je vais aussi vérifier celui-ci. Ensuite, nous devons prendre soin de ce point d'arrêt ici. Pour cela, passons à la prochaine conférence. 66. Rendre le projet réactif pour les écrans plus petits - Partie 3: Dans la conférence précédente, nous avons rendu le projet réactif sur ces deux points de rupture ici Nous devons maintenant passer à autre chose et occuper du prochain point d'arrêt, qui sera de 1024 pixels de largeur et 768 pixels de hauteur Revenons au navigateur et modifions les dimensions. Ici, nous avons besoin de 1 024,7 68. Revenons au code VS et créons une nouvelle requête multimédia CS. Dans le fichier de styles, je vais définir largeur maximale à 1024 pixels. La première chose que je vais faire est de m'occuper de la navigation. Allons-y, ne sélectionnons aucune pièce et changeons le rembourrage. Je vais régler le rembourrage à 0,5 image. Ensuite, je vais m'occuper de l'emballage des articles Nova Je vais sélectionner les éléments Nova, je vais régler la largeur à 65 % Comme vous pouvez le voir, les éléments de navigation sont beaux. Ensuite, je vais m' occuper du logo. Je vais sélectionner le logo, puis les panneaux. Mais dans ce cas, je vais sélectionner le premier élément panoramique dont nous avons besoin ici, sélection de l'enfant avec la valeur un. Je vais régler la police de caractères 2.5 Ram. Ensuite, je vais dupliquer ce code. Je vais ajouter ici des éléments de span. Réglons la taille de police à 1,5 RAM. Ensuite, je vais sélectionner le deuxième élément de span. Je vais copier ce code ici. Changeons le sélecteur pour le énième enfant. Il nous en faut deux. En ce qui concerne la taille du téléphone, je vais le faire fonctionner en version 1.2. Voilà, à propos du logo. Ensuite, je vais m' occuper de la bannière. Je vais sélectionner une bannière. Je vais changer la position de la bannière. Fixons la position à 16 %. Quant à la position de gauche, je vais la porter à 18 %. Ensuite, je vais m' occuper des titres. Sélectionnons une bannière avec H, un élément d'en-tête. Je vais régler la taille de police à neuf RAM. En ce qui concerne le deuxième titre, je vais dupliquer je vais dupliquer le code dont nous avons besoin ici, la bannière 3. Quant à la taille de police, elle sera de deux. OK, la bannière est belle. Ensuite, je vais m' occuper des arrière-plans. Nous devons apporter de légères modifications. Je vais sélectionner VG One et je vais régler la bonne position à -5 %. En fait, avant cela, nous devons nous occuper de l'arrière-plan principal Je vais sélectionner G main. Réglons la position gauche à -25 % En ce qui concerne le troisième arrière-plan, je vais sélectionner l' arrière-plan deux Mettons-nous à 60 %. D'accord, je trouve que les arrière-plans sont bons. Et en fait, avec l' en-tête, c'est terminé. Ensuite, nous devons nous occuper de la section des services. Je suis Select Services. Je vais régler la hauteur des services à 190 points de vue. Modifions ensuite la marge. Je vais régler la marge à 15 RAM en haut et en bas. En ce qui concerne les côtés gauche et droit, je vais remettre la marge à zéro. Ensuite, je vais m' occuper des formes, des arrière-plans, du cercle et de ce rectangle. Je vais sélectionner les services G One. Je vais changer de position. La première position sera de -15 %. Ensuite, je vais régler la bonne position à 3 %. Je vais également régler la hauteur de dix à 60 RAM Je vais fabriquer le moteur des éléments. Réglons également la hauteur à 60 RAM. OK, voilà le cercle, et je pense que nous avons de bien meilleurs résultats. Occupons-nous du rectangle. En fait, dupliquons ce code. Changez le nom de classe dont nous avons besoin ici. En ce qui concerne les positions, je vais définir la position inférieure. À -12 %, je vais utiliser une position gauche et la valeur sera de 5 %. Pour ce qui est de la hauteur, je vais laisser ces deux lignes de code ici Passons au navigateur. Comme vous pouvez le voir, nous avons ici un rectangle et en fait cette section semble bonne. Nous avons juste besoin de faire votre petit changement. Nous devons augmenter l' espace entre ces objets. Je vais sélectionner la liste des services maintenant. La liste des services a une propriété de contenu justifiée avec le centre de valeur, dans notre cas, sur cette taille d'écran. Je vais modifier la valeur de la propriété justify content et la définir de manière à ce qu'elle soit espacée de manière uniforme. Maintenant, l'espace est beaucoup plus grand et je trouve qu'il est beaucoup plus beau. OK, donc avec la section des services, c'est terminé. Ensuite, nous devons nous occuper de la section des modèles car la section du projet est belle. Passons à la section des modèles. Je vais partir du côté gauche. Restons les modèles. Je vais changer le rembourrage. Supposons un rembourrage de 25 images en haut, puis de dix images sur le côté droit, zéro sur le côté inférieur et de cinq images sur le côté Ensuite, je vais vous retirer de la rubrique. Allons-y et sélectionnons les modèles gauche (H), un élément d'en-tête. Je vais changer la taille du téléphone, il y aura cinq RAM. Ensuite, je vais dupliquer le code dont nous avons besoin ici. Paragraphe, je vais modifier la largeur du paragraphe. Ça va faire 45 RAM. Quant à la taille du téléphone, je vais la régler sur 1,5 RAM. Le titre et le paragraphe semblent bons. Ensuite, nous devons prendre soin du fond. Je vais sélectionner dix plaques, PTN. Tout d'abord, je vais diminuer la largeur. Réglons-le sur 27 RAM. Ensuite, nous devons modifier la hauteur. Ce sera 5,5 RAM. Puis changez la taille du téléphone. Je vais régler sur 1,6 RAM. Très bien, ça se trouve à peu près sur le côté gauche. Occupons-nous du bon côté. Je vais personnaliser les images. Nous allons sélectionner les modèles à droite, puis l'image. Dans ce cas, nous avons besoin de la première image. Utilisons le sélecteur de graphique et sélectionnons la première image. Je vais changer la position supérieure, elle sera de 45 %. Nous allons également changer la largeur. Je vais en faire 25 images. Alors dupliquons ce code. Nous avons besoin de sa deuxième image. La position supérieure sera de 25 % Ensuite, nous avons besoin de la position gauche 20 %. Quant à la largeur, je vais dire 214 RAM. Enfin, nous devons prendre soin de la troisième image. Dupliquons ce code, changeons la valeur du sélecteur de graphique dont nous avons besoin ici trois Dans le cas de la troisième image, nous avons besoin de deux positions pour atteindre 27 %. Ensuite, je vais débarrasser de la position gauche et passer à 240 RAM. OK, les images sont plutôt jolies. Ensuite, je vais m' occuper du bouton, je veux dire du bouton Play. Allons-y et sélectionnons le bouton Play. Je vais les régler en hauteur, tous les deux, à 17 Ram. En plus de cela, je vais personnaliser les éléments du bouton de lecture avant de s'asseoir. Ajoutons-les ici avant et fixons-les à une hauteur maximale de 23 Ram dans les deux cas. OK, le bouton est donc personnalisé. Enfin, je vais m' occuper de l'effet blar ici Nous devons sélectionner des modèles contenant quatre pseudo-éléments. Je vais me fixer des hauteurs, toutes deux à 60 Ram, puis changer la position inférieure, ça va être de 10 %. D'accord. Je pense que cela se trouve à peu près sur la page d'accueil du point d'arrêt. Tout semble bon. Vérifie le lecteur vidéo, il a également l'air bien. Passons à autre chose et examinons les autres pages. La page des clients semble bonne. En ce qui concerne la page des produits, je vais apporter ici quelques modifications. Passons au code VS et ouvrons le fichier CSS du produit. Je vais créer une nouvelle requête multimédia CSS avec une largeur de multiplexage de 1024 pièces. Tout d'abord, je vais m' occuper du titre du paragraphe sur le côté gauche de la première section. Ici. Je vais sélectionner le contenu des produits. Nous avons besoin du contenu des produits, puis nous avons besoin de H et d'éléments d'en-tête. Je vais changer la taille de police. Ce sera Ram. Dupliquons ce code et sélectionnons le paragraphe. La taille de police dans le cas du paragraphe sera de 1,5 tour. C'est ça, à peu près sur le côté gauche. Ensuite, je vais m'occuper des images sur le côté droit. Allons-y et sélectionnons Products Content Right, puis les éléments de l'image. Et puis nous avons besoin de sélectionner le graphique. Parce que nous devons sélectionner la première image, je vais régler 228 RAM. Quant à la hauteur, elle sera de 55 Ram. Ensuite, je vais dupliquer ce code deux fois car nous devons également nous occuper des deux images restantes. Nous avons besoin ici de la deuxième image. Débarrassons-nous de la hauteur et changeons la largeur. Ça va faire 15 RAM. Pour ce qui est de la troisième image, je vais la régler avec 224 RAM. J'ai besoin de l'image 3. OK, je trouve que la première section est jolie. Ensuite, nous devons nous occuper du contenu promotionnel. Allons-y et sélectionnons cet élément. Mettons-nous à 70 % , puis je m' occuperai du titre. Sélectionnons le contenu promotionnel, suivi de l'élément d'en-tête H. Je vais régler la taille du téléphone à 2,5 RAM. Maintenant, le titre semble bon. Ensuite, nous devons prendre soin des formes, je veux dire du rectangle et de ces cercles. Allons-y et commençons par le rectangle promotionnel. Je vais régler la hauteur à 50 m. Je parle des deux propriétés, puis je vais sélectionner le petit cercle. Changeons la position du cercle. Je vais fixer la première position à 25 %. Quant à la bonne position elle sera de 40 %. Ensuite, je vais m'occuper des grands cercles. Sélectionnez un grand cercle, puis je vais prendre la hauteur maximale à partir d'ici. Réglons la hauteur, les deux à 40 grammes. OK, le contenu de Romo est sympa. Je vais changer ici la position du grand cercle. Une fois que nous avons survolé l'élément, je vais sélectionner un grand cercle Avec la classe animate, je vais définir la position large à -2 %, d'accord ? Alors maintenant, je pense que nous avons bien meilleurs résultats avec cette page. Nous avons terminé. Vérifie la page de contenu. Ça a l'air bien. La page du compte semble bonne. Ainsi que pour la page de tarification. Je vais apporter ici quelques modifications. Ouvrons la tarification dans un fichier et créons une nouvelle requête multimédia CSS. Spécifiez ici la largeur maximale. Ça va faire 1024 pixels. Je vais sélectionner le prix de la voiture. Je vais régler la largeur 24 à. Alors je vais vous faire sortir du rectangle. Sélectionnons un rectangle. Je vais changer de position. La position supérieure sera de 28 % , puis la position de gauche sera de 5 %. De plus, je vais changer avec la hauteur. Réglons les deux à 40 grammes. Vérifie le navigateur. Nous avons ici le rectangle. Ensuite, prenons soin du grand cercle. Je vais dupliquer ce code. Changeons le nom de la classe. Nous avons besoin d'un grand cercle au lieu de propriétés en haut et en bas. Nous avons besoin de positions inférieures et droites. La position inférieure sera de 10 %. Ensuite, je vais changer de gauche à droite, et la bonne position sera 5 %. En ce qui concerne la hauteur maximale, je vais régler les deux sur 30 RAM. En fait, le code n'est pas appliqué aux éléments car nous avons ici besoin de tarifer sur un grand cercle et pas simplement sur un grand cercle. Vérifie maintenant le navigateur, le code est appliqué. Un grand cercle, c'est bien. Sortons du petit cercle. Dupliquons ce code. J'en ai l'habitude, votre position la plus élevée sera de 30 %, alors nous avons besoin bonne position 5 %. C'est probablement en hauteur. Je vais leur donner à tous les deux six rap dont nous avons besoin ici. Petit cercle. D'accord, en fait, je pense que nous pouvons déplacer le cercle légèrement vers le haut. Diminérons donc la position supérieure. Mettons-le à 28 %. Je vais modifier à nouveau la valeur. Disons 25 % Faisons la première place 26 % OK, je pense que c'est à cause de ces points de rupture. Toutes les pages ont l'air bien. Ensuite, nous devons rendre notre projet responsive sur les tablettes. Nous allons vérifier ce point de rupture ici et passer à la prochaine conférence, où nous commencerons à rendre le projet réactif sur les tablettes. 67. Créer un menu de hamburger - Partie 1: Très bien, dans la conférence précédente nous avons fini de travailler sur le point d'arrêt Comme je l'ai dit, nous devons passer à la réponse à la question de rendre le projet adaptatif sur les tablettes. Je veux dire, en ce qui concerne ces points d'arrêt, allons dans le navigateur et modifions les dimensions de l'écran Nous avons besoin ici de 820 pixels puis de 11 80 pixels. Il s'agit de la taille de l'écran de la tablette. Passons au code VS et ouvrons le fichier de style CSS. Je vais créer une nouvelle requête multimédia CS. Spécifiez la largeur maximale. Ça va faire 820 pixels. OK. Donc, avant de commencer à écrire le code, je vais vérifier la version finale de notre projet à ce point de rupture. Comme vous pouvez le constater, nous n' avons plus ici les éléments de navigation. Vous pouvez voir ici l'icône du menu. Si je clique dessus, nous arriverons au menu des hamburgers. Nous avons ici des éléments de navigation. En bas, vous pouvez voir les prix en bas. Si je clique sur l'un des éléments de navigation, nous arriverons ici aux menus déroulants. Nous devons modifier la navigation. Je veux dire, nous devons transformer la navigation pour lui donner cette apparence. Passons au code VS. La première chose que je vais faire est de masquer les éléments de navigation. Je vais sélectionner les articles Nova. Ensuite, je vais ajouter ici l' affichage N. Comme vous pouvez le voir, les éléments de navigation sont masqués. Ensuite, je vais créer l'icône du menu. Pour cela, je vais aller dans l'index du fichier HTM juste après le logo. Je vais insérer de nouveaux commentaires pour l'icône du menu. Ensuite, je vais ouvrir Deep tug, ce sera l'icône du menu L'icône du menu sera composée de deux lignes. Je vais ouvrir Deep Tug avec la ligne de cours. Ensuite, nous avons besoin de la première ligne. Le premier est le nom de classe commun. Quant au second, il s'agit d'un nom de classe individuel. Je vais dupliquer ce code car nous avons besoin de deux lignes. Changeons le nom de la classe. Ce sera la deuxième ligne. Très bien, l' icône du menu est créée. Ensuite, je vais personnaliser cet élément. Je vais sélectionner l'icône du menu. Allons-y, nous pouvons les cacher tous les deux à quatre RAM. Je vais ajouter ici une couleur de fond temporaire afin d'afficher l'icône Passons au navigateur. Comme vous pouvez le voir, nous avons ici l'icône du menu. Bien, définissons la position de l'icône du menu. Je vais le régler sur la position amino absolue 5 ram. Hein ? La position sera également de cinq RAM. Bien, après cela, je vais afficher les lignes. À l'heure actuelle, ce ne sont que des développements vides de sens. C'est pourquoi nous ne pouvons pas voir les lignes sur la page. Je vais sélectionner la ligne, fixons-la à 100 %, alors la hauteur sera de 0,4 RAM. Pour ce qui est de la couleur de fond, je vais la mettre sur le blanc. Maintenant, je vais me débarrasser de la couleur de fond rouge temporaire. Nous avons ici deux lignes. Maintenant, comme vous pouvez le voir, nous devons séparer ces lignes, et pour cela nous pouvons utiliser Flex Box. Je vais ajouter une boîte flexible à l'icône du menu. Lorsqu'il affiche flex, nous devons changer de direction car les lignes doivent être placées verticalement dans une colonne. La direction de flexion sera une colonne. Ensuite, nous avons besoin d'espace entre les lignes. Et pour cela, je vais justifier l'espace entre les contenus. Nous n'avons pas besoin d'un tel espace ici. En fait, la hauteur de l'icône du menu doit être de deux m et non de quatre m. Maintenant, l'icône du menu est belle. Ensuite, je vais transformer la navigation et lui donner cette apparence. Nous devons changer la couleur d'arrière-plan de la navigation, ainsi que la couleur du texte et de l'icône. Passons au code VS. Je vais sélectionner Nuer. Changeons la couleur de fond. Ça va être blanc. Ensuite, je vais changer la couleur du logo. Allons-y et sélectionnons Nuer suivi du logo. Et puis nous avons besoin de l'élément Span. Je vais régler la couleur sur F40. Ensuite, je vais vous attraper Text Shadow, disons à None. Comme vous pouvez le voir, la couleur du texte, je veux dire que la couleur du logo a changé et qu'il est beau. Ensuite, je vais personnaliser l'icône du menu. Je vais changer la couleur de fond. Utilisons ici la même couleur que celle que nous avons utilisée il y a une minute. Il nous en faut 40 ici. Comme vous pouvez le constater, les lignes ont une couleur de fond différente. Ensuite, je vais transformer l'icône en bouton de fermeture en X. Pour cela, je vais sélectionner la première ligne. Je vais utiliser la propriété de transformation Avec la fonction de rotation, la valeur sera de 45 degrés. De plus, je vais déplacer légèrement la ligne en utilisant la fonction translate y. La valeur sera 1.2 Dupliquons ce code et personnalisons la deuxième ligne dont nous avons besoin ici, faisant pivoter de moins 45 degrés. En ce qui concerne la fonction translate y, il nous faut ici le négatif 1.2 Vérifie le navigateur. Comme vous pouvez le voir, nous avons ici x. Maintenant, nous devons nous occuper des éléments de navigation. Pour le moment, ils sont cachés. Je vais me débarrasser de display none Au lieu de display none, je vais ajouter ici display flex. Nous devons placer les éléments de navigation verticalement dans une colonne. Par conséquent, nous avons besoin que la direction de flexion soit une colonne. Ensuite, je vais assouplir les éléments en utilisant justify content. Fléchissez, démarrez et alignez les éléments. Propriétés et valeurs de démarrage flexibles. Vérifie le navigateur. Nous avons ici des éléments de navigation. Nous devons changer la position de l'élément. Réglons-le sur absolu. Ensuite, je vais régler deux positions à 12 Ram, car la hauteur de la partie supérieure est de 12 Ram. Pour ce qui est de la position de gauche, je vais la mettre à zéro. Ensuite, je vais définir avec la hauteur, la largeur des éléments de navigation sera de 100 %. Quant à la hauteur, je vais faire ici le petit calcul dont nous avons besoin hauteur de la fonction de coupe sera de 100, hauteur du pot d'affichage de -12 grammes, soit la hauteur du Nper Si j'ajoute ici la couleur akron avec la valeur 245, nous obtiendrons ce résultat ici Bien, nous devons maintenant personnaliser les éléments de navigation. Je vais sélectionner un élément de navigation mais je dois exclure le dernier élément. Je veux dire qu'en bas, nous n'avons pas besoin d'une pseudo classe, nous devons ajouter ici le dernier enfant. Maintenant, le code, je veux dire, les vignettes seront appliquées à tous les objets de Nov sauf au dernier enfant. En bas, je vais régler la largeur à 100 %, puis la hauteur sera de 12 grammes. De plus, je vais utiliser Flex Box. Nous devons aligner les objets au centre. Ensuite, je vais créer de l' espace sur le côté gauche à l'aide d'un rembourrage Il en reste trois, Ram. Les éléments de navigation sont bien alignés. Nous devons maintenant personnaliser les liens. Je ne vais sélectionner aucun élément dont nous avons besoin ici. Aucun élément suivi par les éléments du lien. Encore une fois, nous devons exclure le bas. Je vais insérer ici. Pas de BTN. Changeons la couleur du lien. La couleur sera de 9 h 26 à 7 h. Et débarrassons-nous également de l'ombre. Faisons en sorte que l'ombre technologique soit nulle. Comme vous pouvez le constater, les liens semblent bons. Ensuite, je vais créer ces signes positifs ici. Et je vais le faire en utilisant quatre éléments. Allons-y et sélectionnons Aucun élément, puis les quatre éléments comme contenu que je vais insérer ici, plus sinus. Ensuite, nous avons besoin de la taille de police. Ce sera une forme. Je vais également changer de couleur. Utilisons ici la couleur F4a0. Ici, nous avons les points positifs. En fait, nous n'avons pas besoin du signe plus sinusoïdal avec le bouton, je vais exclure le bouton ici. Pour cela, nous devons réutiliser. Ensuite, nous devons ajouter ici le dernier enfant. Maintenant, comme vous pouvez le constater, nous n'avons plus ici le signe plus. C'est bon. Nous devons maintenant prendre soin de la position du signe plus. Pour cela, je vais régler la position sur absolue. Ensuite, nous devons nous positionner à 50 %, car la bonne position sera zéro. Ensuite, nous devons centrer l'élément verticalement. Pour cela, je vais transformer, traduire Y -50% Comme vous pouvez le voir, nous avons ici le sinus plus Ensuite, je vais définir la largeur et la hauteur. La largeur sera de dix. Pour ce qui est de la hauteur, je dirais que six ont couru. Nous devons centrer les éléments. Pour cela, je vais utiliser Display Flex avec centre de contenu justifié et un centre de rubriques. OK, c'est ça, à propos du signe plus. Ensuite, nous devons nous occuper du dernier élément de navigation, savoir ce bouton ici. Je veux dire le bas des prix. Je vais sélectionner Novem, puis le dernier. Voir la classe, définissons la position absolue. Ensuite, nous avons besoin que la position inférieure soit nulle. Nous avons également besoin de la position gauche, elle sera également nulle. Ensuite, il faut définir la largeur et la hauteur. La largeur sera de 100 %. Quant à la hauteur, je vais en faire 12 RAM. Ensuite, je vais définir la couleur de fond. Ça va être blanc. Nous allons vérifier le navigateur que nous avons ici en bas. Utilisons Flex Box pour aligner l'élément. Réglons l'affichage pour qu'il soit flexible. Ensuite, nous devons justifier le centre de contenu et aligner les éléments au centre afin de centrer le bas. Comme vous pouvez le constater, le bas est centré. Ajoutons ici une ombre en utilisant l'ombre de la boîte. Les valeurs seront 01 Ram, dix Ram comme couleur, je vais utiliser R GPA Les valeurs seront 130-16-2235, et l'opacité 0,2 C'est tout pour les éléments parents Nous devons maintenant personnaliser le bouton lui-même. Allons-y et sélectionnons PTN. Je vais régler avec 290, 5 %, puis la hauteur sera de six Ram. Donnons n'importe quelle couleur de fond, je vais en utiliser 40. Ensuite, il faut que la couleur soit blanche. Enfin, je vais régler la taille du point à 2,2 m. D'accord ? Donc, comme vous pouvez le voir, le bas est plutôt joli. En fait, nous avons ici le même résultat que celui dont nous avions besoin ensuite. Nous devons faire en sorte que le menu des hamburgers fonctionne, et nous devons également nous occuper des listes déroulantes pour cela Passons à la prochaine conférence. 68. Créer un menu de hamburger - Partie 2: Dans la conférence précédente, nous avons donc commencé à rendre le projet adaptatif pour les tablettes. Vous pouvez voir ici les dimensions des tablettes. Nous sommes en train de créer le menu des hamburgers. Dans cette conférence, je vais personnaliser les menus déroulants car ils ne sont pas très beaux pour le moment Je vais styliser les cinq listes déroulantes. Revenons au code DS. La première chose que je vais faire est masquer ces triangles ici, car nous n'en avons plus besoin. Je veux dire, nous n'en avons pas besoin pour les tablettes. Sélectionnons novem suivi de l'élément suivant dont nous avons besoin ici l'élément suivant dont nous avons besoin Pour masquer l'élément after, je vais utiliser display none. Comme vous pouvez le constater, les triangles sont cachés. Ensuite, je vais sélectionner la première liste déroulante. Je vais définir avec, ce sera 100 % Ensuite, nous devons changer la première position. Ça va faire 12 grammes. Pour ce qui est de la position des jambes, je vais la mettre à zéro. Vérifie le navigateur. Comme vous pouvez le constater, la position est modifiée. En fait, nous voyons ici les objets nava. Cela signifie que le menu déroulant s'est retrouvé derrière les éléments de navigation. Pour résoudre ce problème, je vais utiliser la propriété index. Réglons-le sur 100. Maintenant, le problème est réglé. Ensuite, je vais me débarrasser des idées de frontières à partir d'ici. Je vais régler le rayon de la bordure à zéro pour me débarrasser de l'ombre de la boîte, réglons-le sur aucun. Ensuite, je vais changer la direction du flex. Je veux dire que je vais placer les fonctionnalités et les services les uns sur les autres verticalement. Par conséquent, je vais régler la direction de flexion sur la colonne, puis me débarrasser du pudding Je vais le mettre à zéro, c' est-à-dire placer le menu du haut vers le bas, je veux dire l'emballage ensuite, je vais m'occuper des côtés gauche et droit parce que pour le moment, menu du haut vers le bas est nul Je vais sélectionner Top Down, une à gauche. Réglons avec 100 % , puis la hauteur sera de 50 %. Ensuite, je vais créer de l'espace en bas en utilisant le bas Réglons-le sur cinq RAM. Enfin, nous avons besoin d'un rembourrage. Réglons-le sur deux RAM. Bien, après cela, je vais sélectionner la liste des fonctionnalités. Sélectionnons la liste des fonctionnalités. Je vais régler les hauteurs à 100 % , puis je vais utiliser Flex Box. Réglons l'affichage pour qu'il soit flexible. Ensuite, nous devons changer de direction. Réglons la direction de flexion sur la colonne. Enfin, nous devons emballer les articles flexibles. Je veux dire, nous devons placer les éléments flexibles sur plusieurs lignes différentes. Nous avons besoin de flex wrap pour qu'il soit enroulé sur le côté gauche du menu déroulant. Ça a l'air bien. Ensuite, je vais m'occuper du côté droit. Allons-y et sélectionnons le menu déroulant à droite. Je vais régler la largeur à 100%. Ensuite, la hauteur sera de 75 RAM. En fait, pas Ram mais Percent. Ensuite, je vais régler le rembourrage à zéro sur le côté supérieur, puis sur deux RAM sur le côté droit, 13 RAM sur le côté inférieur et deux RAM sur le côté gauche OK, je vais ensuite sélectionner les services déroulants. Réglons la largeur à 100 % , puis la hauteur sera de 100 %. Ensuite, nous avons besoin de son Display Flex. De plus, je vais changer la direction dans laquelle ce sera une colonne. Et comme pour la liste des fonctionnalités , j'utilise ici les mêmes valeurs. Ajoutons simplement ici le nom de la classe. Et débarrassez-vous de ce code d'ici. Comme vous pouvez le constater, le côté droit est beau. Je vais changer la couleur de fond. Ajoutons ici la couleur de fond, le blanc. OK, je pense que le premier menu déroulant semble bon. Ensuite, nous devons nous occuper du deuxième menu déroulant. Je vais sélectionner le menu déroulant deux. Tout d'abord, définissons la hauteur maximale. La largeur sera de 100 %. Quant à la hauteur, je vais la régler à 75 RAM. Ensuite, je vais changer de position. La première place sera 12 Ram. Quant à la position de gauche, mettons-la à zéro, puis vérifions-la dans le navigateur. Nous avons ici le deuxième menu déroulant. Comme dans le premier cas, nous devons utiliser la propriété index car elle se retrouve derrière les éléments nub Je vais mettre l'index à 100. Maintenant, le problème est réglé. Ensuite, comme vous le devinez, nous devons changer la direction de la boîte flexible. Je vais changer, je vais définir la direction de flexion colonne dont nous avons besoin ici, colonne. OK. Ensuite, je vais me débarrasser du rayon, mettons-le à zéro. De plus, nous n'avons pas besoin de box shadow, il n'y en aura pas. Ensuite, je vais régler le rembourrage à deux Ram en haut, à Ram sur le côté droit, à zéro en bas et à deux Ram sur le côté gauche Ensuite, je vais créer un espace entre les éléments. Je vais sélectionner la deuxième liste déroulante avec le développement, fixons la marge à zéro en haut, 0,5 RAM sur le côté droit, à deux RAM en bas et à 0,5 RAM sur le côté gauche. Nous avons ici un peu d'espace. Ensuite, je vais sélectionner les éléments et diminuer leur taille. Allons-y et sélectionnons Drop Down to, alors nous avons besoin de développements. Et puis fixons la taille de police à cinq RAM. Eh bien, nous avons maintenant le problème de la hauteur de la liste déroulante. J'ai ici, hauteur 75 Ram. Supprimons cette valeur à partir d'ici et réglons simplement la hauteur sur auto. Nous allons vérifier les résultats. OK, le menu déroulant est plutôt sympa en fait, avec le deuxième menu déroulant, c'est terminé Passons à autre chose et occupons-nous du reste des listes déroulantes. En fait, nous allons utiliser des valeurs et des propriétés similaires pour écrire le même code encore et encore. Je vais sélectionner toutes les listes déroulantes simultanément. Commençons par le premier, puis je vais le dupliquer cinq fois, changer les chiffres dont nous avons besoin. Déposez deux, puis trois. Ensuite, nous avons le menu déroulant quatre, et enfin le menu déroulant cinq. Je vais sélectionner à partir d'ici quelques propriétés comme ces deux propriétés. Coupons-les. Nous avons également besoin de l'ombre de la boîte, du rayon de bordure et de la propriété index. Ajoutons-les ici. Je vais supprimer ces propriétés du deuxième menu déroulant. OK, maintenant je pense que les cinq menus déroulants devraient être beaux. Vérifions-le, les produits ont l'air bien. Ensuite, nous avons Contact. Ça a l'air bien aussi. Et la liste déroulante du compte semble également bonne. D'accord, les cinq menus déroulants sont personnalisés. Ensuite, nous devons faire en sorte que le menu des hamburgers fonctionne pour cela. Passons à la prochaine conférence. 69. Faire fonctionner le menu Hamburger: Dans la conférence précédente, nous avons personnalisé les menus déroulants pour tous les éléments de navigation. Dans cette conférence, je vais maintenant faire en sorte que le menu des hamburgers fonctionne Allons-y et jetons un coup d'œil au projet terminé. Par défaut, nous avons ici l'icône du menu et les éléments de navigation sont masqués. Si je clique sur l'icône, la navigation apparaît. Éléments de navigation avec les menus déroulants. Je vais m'occuper de ces choses dans cette conférence. Passons au code VS. La première chose que je vais faire avant de commencer à faire fonctionner la navigation, que j'ai fait une petite erreur par rapport à la conférence précédente. Si nous jetons un coup d'œil à la deuxième liste déroulante, vous verrez qu'il nous manque ici direction de flexion avec la colonne de valeur. Nous l'avons retiré. Au lieu de cette ligne, nous devons supprimer Box Shed on none. C'est mon erreur. OK, maintenant nous sommes prêts à commencer à faire fonctionner le menu des hamburgers La première chose que je vais faire est d'accéder au fichier Javascript et de sélectionner l'icône du menu. Je vais créer une nouvelle variable, appelons-la icône du menu, puis la sélectionner en utilisant la méthode du sélecteur de requête Je vais spécifier ici le nom de la classe, l'icône du menu. L'icône du menu est sélectionnée et nous devons maintenant ajouter un écouteur d'événements à l'icône avec événement de clic Je vais ajouter un écouteur d'événements à l'icône du menu. Comme je l'ai dit, nous avons besoin ici d' événement de clic suivi de la fonction Calbeck qui sera exécutée une fois que nous aurons cliqué sur l'icône du menu dans la fonction Calbeck Je vais ajouter un nouveau nom de classe au knapper en utilisant la méthode togal Une fois que nous avons cliqué sur l'icône du menu, nous devons ajouter une nouvelle classe au knapp Et une fois que nous avons cliqué à nouveau, nous devons supprimer ce nom de classe de la sieste. Pour cela, nous devons utiliser la méthode to, nous avons besoin ici de la liste des classes supérieures, suivie de la méthode togal Je vais ajouter ici une nouvelle classe, appelons-la hamburger Passons au fichier CSS. Je vais masquer les éléments de Nov en utilisant Display None. Ensuite, nous devons ajouter la classe hamburger nouvellement créée aux éléments suivants Le premier est Nov items, nous devons ajouter ici hamburger Ensuite, je vais ajouter la classe hamburger à la Nous devons également ajouter un hamburger ici. Ensuite, je vais ajouter un hamburger au Novem. Ensuite, nous avons besoin de Novem pour les éléments du lien. Enfin, je vais ajouter un hamburger aux files d'attente. Je veux dire les lignes 1 et 2 en tant que hamburger ici C. D'accord, passons au code VS, puis vérifions le résultat. Une fois que j'ai cliqué sur l'icône du menu, les éléments de navigation apparaissent. Ensuite, lorsque nous cliquons sur le bouton X de fermeture, la hauteur de navigation sera correcte. Tout fonctionne bien. Ensuite, nous devons changer la couleur de l'icône du menu car elle doit être blanche. Je vais trouver une ligne et changer la couleur qui sera le blanc car je vais faire adhérer transition pour un effet plus fluide dont nous avons besoin ici pour transformer. Ensuite, la durée sera de 0,3 seconde. Je vais également utiliser la fonction de synchronisation de transition appelée. Maintenant, comme vous pouvez le voir, nous avons ici des lignes blanches. Si je clique sur l'icône du menu, les lignes se transformeront avec un effet plus fluide. Mais une fois que nous avons affiché la navigation, nous ne voyons plus l'icône du menu car les lignes sont blanches. Nous devons nous occuper de cela. Je vais sélectionner Line avec la classe de hamburger que nous devons changer, nous avons besoin ici de la ligne de nom de classe Nous devons changer la couleur de fond et ce sera f40 OK, maintenant tout fonctionne bien. C'est bon. La prochaine chose que je vais faire est de régler quelques petits problèmes ici. Je veux dire, une fois que nous avons affiché la navigation puis que nous avons fait défiler la page vers le bas, vous voyez que la sieste est devenue collante. Et en fait, nous n'en avons pas besoin. Nous devons empêcher cette action. Revenons au fichier Vs et trouvons la fenêtre avec un événement de défilement. Nous devons maintenant utiliser une instruction où nous devons vérifier ces deux conditions simultanément si la largeur de la fenêtre est inférieure ou égale à 820 pixels, si la barre a la classe hamburger vérifier ces deux conditions simultanément Je vais utiliser l'instruction if et la condition sera que la largeur intérieure de la fenêtre soit largeur intérieure de la fenêtre soit inférieure ou égale à 820 pixels. Nous devons vérifier si la liste des classes de bar contient la classe hamburger Si cette condition est vraie, nous devons supprimer le sticker de classe situé dans la partie supérieure. Nous n'avons pas besoin ici de supprimer une liste de classes. Nous devons spécifier ici le nom de classe sticky. En plus de cela, nous devons utiliser l'instruction L. Si la condition est fausse, nous devons activer la classe sticky en fonction de la position de défilement Si la position de défilement, je veux dire le défilement de la fenêtre Y, est supérieure à zéro, alors nous devons ajouter la classe sticky. Dans le cas contraire, nous devons le supprimer. Nous devons transmettre ici la liste des classes du Togo. Nous devons préciser ici deux choses. Nous avons besoin de noms de classes collants, puis nous avons besoin de faire défiler les fenêtres. Y est supérieur à zéro. Très bien, donc je pense que c'est tout. Maintenant, le code devrait fonctionner. Nous allons vérifier les résultats. Je vais afficher la navigation. Ensuite, si nous faisons défiler la page vers le bas, nous aurons ici le même résultat. Il y a quelque chose qui ne va pas ici. Vérifie le code. La condition est correcte. Nous devons supprimer le code ticky de la partie non. Ensuite, nous devons l'ajouter en utilisant la classe togal. Oui, nous n'avons plus besoin de cette déclaration ici. Nous devons le supprimer car nous ajoutons la classe sticky à la partie now en utilisant la méthode togal Nous n'avons plus besoin de l'instruction if précédente. Maintenant, le code devrait fonctionner. Affichons la navigation, puis faisons défiler la page vers le bas. Et oui, nous n'avons plus ici la partie autocollante. OK. Si je ferme la navigation puis que je fais défiler la page vers le bas, vous verrez que l'icône n' est plus visible. Je veux dire, les lignes sont blanches et la position est également différente. Nous n'avons pas besoin de cette position pour l'icône. Occupons-nous de ça. Je vais revenir au dossier aves. Nous devons créer une instruction if dans l'événement de défilement. Nous devons vérifier si la propriété Y du défilement de la fenêtre est supérieure à zéro. Si cette condition est vraie, je vais ajouter une nouvelle classe à l'icône du menu, qui sera ensuite utilisée dans le fichier CSS. Pour créer de nouveaux styles, nous avons besoin de votre icône de menu, de votre liste de classes. Je vais appeler la nouvelle position de classe parce que nous sommes en train de changer la position de l'icône du menu. Sinon, si la condition est fausse, nous avons besoin de l'instruction L où nous devons supprimer la classe. Positionnez depuis le menu. En plus de cela, nous avons besoin d'une autre instruction if où nous devons vérifier si la sieste contient ou non la classe hamburger Nous avons besoin d'une déclaration avec la condition suivante. Nous avons besoin de contenus de classe. Nous devons spécifier ici le nom de classe hamburger. Si cette condition est vraie, nous devons supprimer la position de classe du menu. Nous avons besoin de la même déclaration. Ensuite, nous devons utiliser la position de classe et définir de nouveaux styles. Je vais trouver l' icône du menu. Nous l'avons ici. Utilisons la position de la classe suivie du menu. Je vais régler la position à quatre m. Ensuite, nous avons besoin de transform translate Y -50 %. transform translate Y -50 % Ajoutons ici la transition pour un effet plus fluide, nous avons besoin ici de 0,3 seconde De plus, nous devons changer la couleur des lignes. Je vais ajouter ici aucun sticker suivi de la ligne. Nous devons changer la couleur de la ligne lorsque nous avons le papier collant, c'est pourquoi j'utilise de la couleur autocollante La couleur de fond sera comprise entre 0926 et 7h. OK, vérifions-le. Si je fais défiler la page vers le bas, la position de l'icône sera modifiée. Et nous avons également ici des lignes sombres. OK, tout fonctionne bien. Ensuite, nous devons nous occuper des menus déroulants. Une fois que nous avons cliqué sur l'élément de navigation, le menu déroulant approprié devrait apparaître Ensuite, une fois que nous avons cliqué sur l' élément de navigation, il devrait se masquer. heure actuelle, vous pensez peut-être que nous avons déjà un événement de clic ici, mais ce n'est pas vrai. Il s'agit d'un effet de survol. Lorsque la taille de l'écran est plus petite, l'effet de survol fonctionne à nouveau comme un événement de clic , ce n'est pas un événement de clic Nous devons le créer. Nous devons afficher le menu déroulant et cliquer sur. Et nous devons également transformer ce panneau ici. Nous avons besoin du signe moins au lieu du signe plus. Allons-y et faisons-les. Je vais créer une nouvelle variable et il n' y aura aucun élément. Nous devons sélectionner tous les articles de novembre. Sélectionnons-les en utilisant la méthode query select or all. Je vais préciser ici le nom de la classe. Ce sera un élément de navigation. Ensuite, je vais examiner les articles de novembre. Utilisons pour chaque méthode dont nous avons besoin ici le paramètre n item, nous devons ajouter un événement de clic à chaque élément de navigation. Nous n'avons besoin ici d'aucun élément suivi de la méthode add event listener Nous devons spécifier ici l'événement de clic. De plus, je vais introduire ici une fonction de rappel. Nous devons maintenant vérifier si l' élément de navigation sur lequel vous avez cliqué possède une nouvelle classe, qui sera ensuite utilisée dans le fichier CSS pour créer de nouveaux styles Je parle de la même technique que celle que nous avons utilisée tout au long de ce projet. Encore une fois, nous devons vérifier si l' élément de navigation sur lequel vous avez cliqué possède la nouvelle classe Je vais utiliser des instructions if où nous devons passer la condition suivante. La liste des classes Novem contient et nous devons spécifier ici le nom de la classe Je vais appeler ça une émission. Si cette condition est vraie, nous devons la supprimer. Je veux dire que nous devons désactiver la visibilité. Je vais ajouter ici un élément de navigation, supprimer la liste des classes. Nous devons spécifier ici le nom de la classe à afficher. Ensuite, nous avons besoin de l'instruction L si la condition est fausse. Si l'élément de navigation n'affiche pas la classe, nous devons parcourir tous les éléments de navigation Nous devons supprimer l' affichage de classe de tous les articles. Ensuite, nous devons ajouter la classe show à l'élément de navigation cliqué Cela signifie que nous devons avoir une visibilité totale sur. Encore une fois, je vais adhérer à Nov Items Forage. Nous devons examiner les éléments de la liste des objets. Adhérons à l'élément de paramètre. Je vais supprimer class show de la liste des classes d'articles point remove. Je vais passer ici une émission de classe. Ensuite, nous devons ajouter la classe show à l'élément nob. Nous avons besoin ici de la liste des classes d'objets nob. Ajoutez, nous devons spécifier ici le nom de la classe, afficher. Encore une fois, lorsque vous cliquez sur un élément de navigation, la fonction de rappel est exécutée Si l'élément de navigation sur lequel vous avez cliqué possède déjà la classe d' affichage, cela signifie que l'élément est actuellement visible Dans ce cas, le code supprime la classe d'affichage de l' élément sur lequel vous avez cliqué, la masquant ainsi Ensuite, si l'élément de navigation sur lequel vous avez cliqué n'a pas la classe d'affichage, cela signifie que l'élément est actuellement masqué Dans ce cas, le code supprime d'abord la classe d'affichage de tous les éléments de navigation. Ensuite, il ajoute la classe show uniquement à l'élément de navigation sur lequel vous avez cliqué, rendant visible tout en masquant tous les autres OK, j'espère que tu comprends ces choses. Ensuite, nous devons accéder au fichier CSS et trouver Drop Down. Je vais sélectionner le menu déroulant. Je veux dire le nom de classe commun dont nous avons besoin ici, Opacité zéro et visibilité masquée Ensuite, je vais sélectionner l'élément de navigation avec survol. Ensuite, nous devons utiliser, encore une fois, le menu déroulant. Nous avons besoin du même code ici. Je veux dire les mêmes propriétés et valeurs. Ensuite, je vais sélectionner novem puis la classe. Nous avons donc à nouveau besoin d'une liste déroulante. Je vais régler l'opacité à un et la visibilité visible. Encore une fois, je pense que tout est correct. Allons dans le navigateur et vérifions le résultat. Si je clique sur l'élément de navigation, le menu déroulant apparaît. Une fois que j'ai cliqué sur l'élément de navigation, il sera chauffé. Comme vous pouvez le constater, tout fonctionne bien. Ensuite, nous devons transformer le signe plus en signe moins. Passons au code VS et trouvons nouvel élément avec quatre éléments. Nous l'avons ici. Allons-y et ne sélectionnons aucun élément avec affichage de classe, suivi des quatre. Voir l'élément. Nous devons modifier le contenu et le rendre négatif. OK, vérifions le navigateur. Cliquez sur l'élément de navigation. Comme vous pouvez le voir, nous avons maintenant le signe moins au lieu du signe plus, d'accord ? Tout pour expine. Mais il nous reste encore une chose à faire. Si je ferme la navigation, faites défiler la page vers le bas et cliquez sur l'icône du menu. La navigation sera affichée. Mais comme vous pouvez le constater, la partie actuelle est toujours délicate. De plus, la couleur de fond des lignes est sombre. Nous devons régler ces problèmes. Je vais revenir au fichier de script Java. Je vais ajouter ici où nous avons l'événement de clic avec l'icône du menu. Nous devons supprimer le sticker de classe de la partie actuelle. Je vais ajouter ici qu'il n'y a pas d'option de liste par classe. Nous devons spécifier ici le nom de la classe, hamburger. Ensuite, nous devons vérifier si la classe hamburger n'est pas présente et si la fenêtre défile Je vais ajouter ici déclaration où nous devons passer la condition suivante. Nous n'avons pas besoin d'opérateur, alors la liste des classes contient la classe hamburger Alors il nous faut ici un opérateur. Et nous devons vérifier si le défilement de la fenêtre y n'est pas égal à zéro. Si cette condition est vraie, si les deux conditions sont vraies, cela signifie que la classe hamburger n'est pas présente et que la fenêtre est griffonnée Dans ce cas, la classe sticky sera ajoutée à la liste Napper here Nous avons besoin de colle ici. Nous devons également ajouter la position de la classe à l'icône du menu ici. Récupérons ce code ici. Ensuite, nous avons besoin de l'instruction L, dans laquelle nous devons supprimer la position de la classe de l'icône du menu que nous supprimons. OK, je pense que c'est ça. Enfin, nous en avons terminé avec le menu des hamburgers. Vérifie le navigateur et cliquons sur l'icône du menu. Eh bien, ça ne marche pas. Cela signifie que nous avons commis une erreur. Vérifie le code. La condition contenue dans la déclaration est correcte. Ensuite, nous devons ajouter un stick to, maintenant nous devons classer la position de l'icône du menu. Ensuite, nous devons supprimer la position de classe de l'icône du menu. Eh bien, nous avons ici une erreur. Je ne sais pas pourquoi j'ai ajouté cette ligne ici. En fait, nous avons besoin d'ici maintenant. Faites partie de la liste des classes, supprimez le sticker de classe. C'est mon erreur maintenant. Je pense que cela devrait fonctionner. Cliquons. Et oui, tout fonctionne bien. Faisons défiler la page, puis cliquez. Comme vous pouvez le constater, tout fonctionne parfaitement. Très bien, passons au menu des hamburgers. Ensuite, nous devons personnaliser le reste des sections de la page d'accueil. Et nous devons également personnaliser les autres pages. Pour cela, passons à la prochaine conférence. 70. Rendre le projet réactif pour les tablettes: Dans la conférence précédente, nous avons fini travailler sur le menu des hamburgers. Cela fonctionne très bien. Et maintenant, nous devons passer à autre chose et personnaliser le reste des sections de la page d'accueil. Et nous devons également personnaliser les pages restantes. Passons au code VS et sélectionnons l'en-tête. Je vais modifier la hauteur de l'en-tête. La hauteur de vue sera de 70. Ensuite, je vais m'occuper de ces antécédents, je suis dans ces trois éléments. Allons-y et sélectionnons PG Main. Je vais augmenter la largeur, elle va être de 50 % et je vais aussi changer la position de l'élément. La première position sera de -105  %. Quant à la position de gauche, je vais régler à -50 %. C'est tout, propos du premier arrière-plan Ensuite, nous devons prendre soin de ces deux arrière-plans. Ici, je vais sélectionner G one. Changeons la bonne position. Cela va être de -10 % Dupliquons ce code et personnalisons le second tour, nous devons changer le nom de la classe Ce sera G deux dans cas du deuxième arrière-plan je vais me débarrasser du signe moins. Laissons d'ici 10 %. Bien, passons à l'en-tête, tout semble bon. Ensuite, nous devons nous occuper de la section des services. Allons-y et sélectionnons Services. Je vais changer la hauteur. La hauteur de pose sera de 120. Ensuite, je vais m' occuper de l'arrière-plan. Je suis dans ces formes ici. Allons-y et sélectionnons les services G one. Changeons de position. Deux positions seront de -20 % Quant à la bonne position, je vais la définir à -5 %. Ensuite, dupliquons ce code et changeons le nom de la classe Nous avons besoin de deux services. Dans le cas du deuxième élément, je vais me mettre dans la bonne position. Ensuite, nous avons besoin de la position de gauche. Je vais le mettre à zéro. OK, c'est tout à propos de la section des services. Ensuite, nous devons nous occuper de la section projet. Je vais personnaliser la navigation. Allons-y et sélectionnons Filtrer de. Je vais changer la largeur. Ce sera 90 %. Ensuite, je vais sélectionner l'élément de lien dont nous avons besoin ici pour remplir, fixons la largeur à 12. Quant à la hauteur, je vais la porter à 4,5 RAM. Comme vous pouvez le constater, la navigation semble bonne. Ensuite, nous devons nous occuper de la liste des projets. Je vais sélectionner la liste des projets, et je vais définir 90 %. Ensuite, je vais m'occuper de la section des modèles car je pense que nous en avons terminé avec la section des projets. Allons-y et sélectionnons l'élément de section avec les modèles de nom de classe. Je vais régler la hauteur à 90 Ram. En fait, pas M, mais mettez la hauteur, puis je vais régler la marge inférieure à moins un RAM. Ensuite, je vais m' occuper du côté gauche. Sélectionnons les modèles à gauche. Je vais régler la position gauche à 5 %. Je vais également changer le rembourrage Le rembourrage sera de 12 sur le côté supérieur, puis de dix RAM sur le côté droit, zéro sur le côté inférieur, puis de dix RAM sur le côté gauche OK, après ça, je vais m' occuper des images sur le côté droit. Allons-y et sélectionnons des modèles. À ce moment-là, nous avons besoin d'une image avec un énième sélecteur d'enfant. Je vais sélectionner la première image. Changeons la largeur. Ça va faire 30 points. Ensuite, je passe à la position, je vais passer à 70 %. Dupliquons ce code deux fois car nous devons également personnaliser les deux images restantes. Changeons le sélecteur d'enfant, il nous faut ici 2.3 dans le cas de la deuxième image Je vais régler la largeur à 18 RAM. Ensuite, la position supérieure sera de 2 %. En plus de cela, nous avons besoin de la position gauche, réglons-la sur -15 %. D'accord, nous avons maintenant la troisième largeur d'image de 48 RAM Pour ce qui est de la première position, je vais passer à la position 57 % OK, nous avons changé la position des images Ensuite, nous devons prendre ici cet élément. Ici, je parle de l' effet de flou, des quatre éléments. Je vais donc sélectionner des modèles suivis des quatre éléments su. Réglons la hauteur et la hauteur à 60 RAM. Ensuite, je vais régler la position inférieure à -5 % Ensuite, la bonne position sera de 5 %. Je vais également changer l'arrière-plan Je veux dire un dégradé linéaire, je vais changer de direction, il y aura deux niveaux inférieurs. Ensuite, la première couleur sera transparente. Pour le deuxième appel, ce sera 8430 Nous aurons ici le troisième appelant et ce sera 863c0, d' Voilà pour ce qui est de l'effet de flou. Ensuite, nous devons prendre soin du fond. Je vais sélectionner Play Bottom. Je vais définir deux positions à 60 %. Quant à la position de gauche, elle sera de -8 %. D'accord, cela se trouve à peu près dans la section des modèles Le lecteur vidéo a l'air en bon état. Ensuite, je vais m' occuper du pied de page. Allons-y et sélectionnons le pied de page. Changez la hauteur, la hauteur de la fenêtre sera de 40. Ensuite, nous devons changer le rembourrage. Je vais au 3026 en haut. Le zéro sur le côté droit, trois RAM en bas et le zéro sur le côté gauche. Très bien, je vais m' occuper des réseaux sociaux. Sélectionnons les réseaux sociaux et je vais définir la largeur à 35 % OK. Je pense que cela se trouve à peu près sur la page d'accueil. Tout semble plutôt bon. Allons-y et consultons la page des clients. Nous devons personnaliser cette page. La première chose que je vais faire est d'afficher l'icône du menu. Je vais ouvrir le fichier HTM des clients, puis je vais récupérer l'icône du menu de l'ancien fichier H tim indexé Copions cet élément et collons-le juste après le logo. Vérifie le navigateur. Comme vous pouvez le constater, l'icône du menu est blanche. Jusqu'à ce que nous fassions défiler la page. Nous devons le changer. En fait, je vais ajouter ici un nom de classe commun. Appelons-le I, je vais l'appeler sur les pages, peut-être que vous avez un meilleur nom. Ensuite, je vais trouver l'icône du menu ici, et je vais sélectionner les pages d'icônes. Changeons la couleur de fond. En fait, nous avons besoin de sa ligne. Changeons la couleur d'arrière-plan et passons de 0926 à 7. OK, vérifions le navigateur. Nous avons maintenant ici l' icône du menu avec des lignes sombres. Et il n'est pas nécessaire de faire défiler la page vers le bas pour l'afficher. OK, donc je vais m' occuper de l'en-tête de la page du client. Ouvrons la page des clients et créons une nouvelle requête multimédia CSS. Ça va faire 820 pixels. Je vais sélectionner l'en-tête du témoignage suivi de l'élément d' en-tête H. Réglons avec 80 % En ce qui concerne la taille de police du titre, je vais la mettre à 4,7. OK, ensuite je vais prendre les étoiles. Sélectionnons les étoiles et fixons la bonne position à 12 %. D'accord, pour que tout soit beau. Nous pouvons passer à autre chose et consulter la page suivante, qui est la page du produit. Nous devons faire de même avec l'icône du menu. Et nous devons également apporter quelques modifications ici. Allons-y et ouvrons le code HTML des produits. Alors je vais récupérer ce code d'ici. Collons l' icône du menu après le logo. Vous pouvez maintenant voir ici l'icône du menu avec des lignes sombres. Ensuite, je vais créer une nouvelle requête multimédia CSS sur les produits du fichier CSS. Nous avons besoin d'un support CSS suivi d'une largeur maximale, qui sera de huit tours de pixels Je vais sélectionner le contenu des produits. Je vais changer de hauteur, ça va être 115 Ram. Ensuite, je vais changer la direction de la boîte flexible. Nous devons placer les éléments flexibles verticalement. Par conséquent, nous avons besoin ici d'une colonne de direction de flexion. De plus, je vais aligner les éléments au centre , puis modifier le rembourrage Le rembourrage sera composé de cinq Ram en haut, zéro sur le côté droit, cinq Ram en bas, puis de dix Ram sur le côté gauche D'accord, voici le contenu des produits. Allons-y et personnalisons le côté gauche. Je vais sélectionner les produits. Contenu restant. Réglons à 60 % , puis je vais régler la hauteur sur automatique. Nous avons également besoin d'un rembourrage Il y aura cinq images en haut et en bas , puis zéro à droite et à gauche Bien, après cela, je vais sélectionner le paragraphe. Allons-y et sélectionnons les produits. Le contenu est parti, suivi de l'élément P. Je vais régler la marge à trois RAM en haut, puis à zéro sur le côté droit. Ensuite, nous avons besoin de cinq RAM en bas et de zéro sur le côté gauche. OK, je pense que nous en avons fini avec le côté gauche. Ensuite, nous devons prendre soin des images. Je vais sélectionner les produits, contenu à droite, puis les éléments de l'image. Et nous devons sélectionner la première image à l'aide du sélecteur de chat N. Je vais modifier la taille de la première image. Nous devons définir la largeur, elle sera de 22 RAM. Ensuite, je vais régler la hauteur à 44 Ram. Ensuite, je vais changer la position de l'image. La première position sera de 65 %. Quant à la bonne position, je vais la fixer à 24 %. Comme vous pouvez le voir, la position et la taille sont modifiées pour la première image. Ensuite, nous devons nous occuper du reste des images. Je vais dupliquer ce code deux fois dont nous avons besoin ici Deuxième image, je vais définir la largeur à 12 RAM. Ensuite, je vais prendre de la hauteur. La première position sera de 50 %. Quant à la bonne position, je vais la régler à 43 RAM. Ensuite, nous avons ici la troisième image que je vais définir avec 220 grammes. Ensuite, nous avons besoin de la position inférieure, ce sera 21 %. Quant à la bonne position, je vais la régler à 11 %. D'accord, je pense que c'est une question d'images. Comme vous pouvez le constater, ils ont l'air bien avec cette section, nous avons terminé. Ensuite, nous devons nous occuper du contenu promotionnel. Je vais sélectionner la promotion des produits. Réglons la hauteur à 120. Hauteur de la fenêtre d'affichage. Ensuite, je vais m'occuper des formes. Je vais sélectionner Promo Rectangle. Fixons-nous des hauteurs, toutes les deux à 42. Ensuite, je vais changer la position de l'élément. La première position sera de 32 %. Quant à la position de gauche, je vais la fixer à 6 % D'accord, nous devons ensuite supprimer le petit cercle. Ici, je vais sélectionner un petit cercle. Réglons la position du petit cercle à 30 %. Quant à la bonne position, elle sera de 40 %. D'accord. Ensuite, je vais retirer le grand cercle. Sélectionnons un grand cercle. Je vais régler les deux positions à 30 %. Quant à la bonne position elle sera de 5 %. D'accord, enfin, je vais m'occuper du titre du contenu promotionnel. Allons-y et sélectionnons le contenu promotionnel, suivi de l'élément d'en-tête H. Je vais changer la taille de police. Ce sera pour courir. OK. Je pense que cela concerne cette section. Tout semble bon. Ensuite, nous devons nous occuper de la section contact. Comme vous pouvez le constater, nous devons apporter quelques modifications. Ouvrons le fichier HTML du contact. Tout d'abord, je vais m' occuper de l'icône du menu. Trouvons le logo et collons ici l'icône du menu. Vous pouvez voir ici l'icône du menu. Ensuite, je vais créer une nouvelle requête multimédia CSS dans le fichier de contacts. Tout d'abord, je vais interférer dans les commentaires pour des raisons de réactivité. Ensuite, je vais créer une requête multimédia CSS avec une largeur maximale de 820 pixels. Ensuite, je vais sélectionner l'élément de section. Je vais changer la hauteur. Ce sera 110 vues, mettez la hauteur. Ensuite, je vais sélectionner trois éléments de titre. Nous avons besoin ici de l'en-tête de contact suivi de l'élément de titre H à trois. Réglons la largeur à 70 % Ensuite, nous devons modifier la marge. Je vais fixer la marge à deux RAM sur le côté supérieur. Ensuite, nous avons besoin d'Auto sur le côté droit, de 15 RAM en bas et d'Auto sur le côté gauche. Cela nous permet de centrer les éléments. OK, ensuite je vais m' occuper du cercle, de cet arrière-plan ici. Sélectionnons le cercle de contact. Je vais changer de rythme et de hauteur. Réglons les deux sur 70 RAM. Ensuite, nous devons changer la position du cercle. Réglons la position inférieure à 25 % Quant à la position de gauche, je vais la fixer à 2 % . Vérifie le navigateur. Le cercle est placé ici, il n'est pas tout à fait visible. Mais si je change la couleur du bacon et que je la mets en rouge, vous trouverez la position du cercle. Nous allons modifier la taille de ces deux éléments. Je vais sélectionner l'emballage du formulaire de contact, réglons avec 235 RAM Quant à la hauteur, je vais la régler à 78 Ram. Ensuite, je vais dupliquer ce code et changer le nom de la classe. Nous avons besoin de votre soutien. La hauteur sera de 67, d'accord. Cela se trouve à propos de la page de contact. Vous pouvez voir le cercle ici. Je trouve que tout est plutôt beau. Ensuite, nous devons nous occuper de la page suivante, qui est une page de comptage. Revenons donc au code VS et au code HTML du compte ouvert. Je vais prendre l'icône du menu à partir d'ici, et je vais la coller dedans. Le fichier HTML du compte, l'icône est visible. Je suis un fichier CS ouvert, puis je vais insérer des commentaires sur le site pour le responsive Ensuite, nous devons créer une requête multimédia CSS pour une largeur maximale de 820 pixels. Je vais sélectionner les éléments de la section. Réglons sa hauteur à 100 pieds de hauteur. Ensuite, je vais modifier la taille du cercle. Et nous devons également changer la position du cercle. Mettons-les toutes deux à 65 m. Pour la position, la position inférieure sera de 39 %. Quant à la position de gauche, je vais la régler à 23 %. D'accord. Je pense que c'est ça. À propos de la page du compte, tout semble bon. Ensuite, nous devons nous occuper de la dernière page sur le point d'arrêt, et ce sera la page des prix Ouvrons ici le fichier HTML de tarification. Ensuite, je vais prendre le menu. Collons-le après le logo et vérifions si l' icône est affichée. Comme vous pouvez le constater, l' icône s'affiche. Je vais passer à la tarification du fichier CS et créer une nouvelle requête multimédia CSS d'une largeur maximale de 820 pixels. La première chose que je vais faire est sélectionner la section des prix. Je vais changer de peau. Il y aura 120 véhicules cachés. Ensuite, je vais m' occuper des formes. Sélectionnons le rectangle de tarification. Je vais changer la position de gauche qui sera de -3 %. Ensuite, nous devons prendre soin du petit cercle, qui n'est pas visible pour le moment Je vais sélectionner un petit cercle. En fait, nous avons besoin de prix. Changeons avec, en hauteur, six RAM. Ensuite, nous devons nous positionner. Je vais le régler à 25 %. Quant à la bonne position, c'est 1 % En fait, je vais déplacer le cercle vers le haut jusqu' à 20 %. Je pense que c'est mieux en fait. Je pense que nous devons également déplacer le rectangle vers le haut, car je n' aime pas vraiment ce résultat ici. Réglons sur, disons, 25 %. Nous pouvons déplacer le rectangle légèrement vers le haut. Passons à une position 20 %. Maintenant, le rectangle est plus beau, mais je pense que 20 %, c'est trop. Passons à une position de 22 % OK, maintenant je pense que c'est beaucoup mieux. Bien, nous devons ensuite nous occuper du grand cercle. Je vais sélectionner un grand cercle. Reprenons ces quatre lignes à partir d'ici. Je vais régler la hauteur à 40 Ram. Alors nous avons besoin d'ici. Position inférieure, ça va être de 25 % Pour ce qui est de la bonne position, je vais régler sur -5 % OK, je trouve que ça a l'air sympa Ensuite, je vais m' occuper de l'en-tête. Sélectionnons l'en-tête de tarification. Mettons-nous à 28 mètres. Ensuite, je vais m' occuper des cartes. Nous n'avons plus besoin de l'effet des trois D. Je vais sélectionner des cartes de tarification, puis je vais définir une perspective nulle. OK, je vais enfin occuper de la carte sur le côté droit. Comme vous vous en souvenez, nous avons utilisé fonction Translate Z pour la bonne carte Je vais donc sélectionner la carte de prix, n'est-ce pas ? Ensuite, nous devons transformer avec la fonction translate Z et je vais la mettre à zéro. OK, ça marche. Maintenant, une fois que nous avons supprimé les trois D, je pense que nous devons changer la position du petit cercle, du rectangle également. Plongeons un petit cercle, un peu plus bas. Réglons la position à 25 %. OK, c'est bon. Je vais également augmenter la valeur de la position supérieure du rectangle. Réglons-le à 25 %. D'accord. Je pense que cela se rapporte à la page de tarification et je pense qu'avec ce point d'arrêt, nous en avons terminé Je veux dire le point d'arrêt de la table, vérifions-le ensuite Nous devons rendre le site Web réactif dès le point d'arrêt. Et pour cela, passons à la prochaine conférence. 71. Rendre le projet réactif pour les téléphones mobiles: Très bien, dans la conférence précédente, nous avons rendu le projet réactif à ce point de rupture ici Je veux dire le point d'arrêt pour une tablette. Ensuite, nous devons prendre soin de ce point d'arrêt ici. Il s'agit du deuxième point d'arrêt de la tablette. Revenons au navigateur et modifions les dimensions dont nous avons besoin ici. 768, puis 1024. Si nous consultons la page d'accueil, vous verrez que tout semble bien. Je vais consulter les pages. Vérifie la page des clients. Je pense que nous n'avons pas besoin de changer ici. Passons à la page suivante, ce sont les produits. La page des produits est également belle. Ensuite, nous avons la page de contact. Ça a l'air bien. Mais ensuite, nous avons une page de compte. Je pense que nous devons changer la position du cercle. Passons au code VS et ouvrons le fichier CSS du compte. Je vais créer une nouvelle requête multimédia CSS. Maxwth sera de 768 pixels. Ensuite, je vais sélectionner Account Circle. Je vais définir la position inférieure. Ça va être de 30 % maintenant, tout semble bon. Ensuite, je vais consulter la page des prix. Je vais personnaliser cette page. Je m'intéresse aux formes, aux arrière-plans des cartes. Passons au code VS et ouvrons le prix du fichier CSS. Je vais créer une nouvelle requête multimédia CSS. Spécifiez la largeur maximale. Nous avons besoin de 768 pixels. Je vais sélectionner un rectangle de tarification. Changeons que la première position soit de 30 %. Quant à la position de gauche, je vais la régler à -6 %. Ensuite, je vais sélectionner un grand cercle de tarification Réglons la position inférieure à 12 %. D'accord. Je pense que c'est ça. Tout semble bon au point d'arrêt. Et on peut dire que pour les tablettes, le site Web est beau. Je vais vérifier ce point d'arrêt ici. Maintenant, comme vous pouvez le constater, nous devons passer à autre chose et commencer à adapter le projet aux téléphones mobiles. Le premier point d'arrêt est 430 pixels de largeur et 32 pixels de hauteur Je vais régler les dimensions sur 43932. Comme vous pouvez le constater, tout est foiré ici. Allons-y et personnalisons le projet. Je vais ouvrir le style du fichier CSS. Créons une nouvelle requête multimédia CC. Le Wi maximum sera de 430 pixels. La première chose que je vais faire est sélectionner des éléments HTML. Nous devons diminuer la taille de la police. Réglons la taille de police à 45 % Cela diminuera la taille de tous les éléments. Ensuite, je vais m'occuper de la section des services, puis nous reviendrons à l'en-tête. Je vais sélectionner les services. Augmentons la hauteur de la section. Je vais le régler à une hauteur de pot de 40. Maintenant, nous avons de meilleurs résultats, mais nous devons prendre soin des formes. Je suis en arrière-plan. Allons-y et sélectionnons les services G one. Je vais changer de position. La première position sera de -10 %. Quant à la bonne position, je vais également la régler à -10 % Vérifie le navigateur. La première forme semble bonne. Occupons-nous du rectangle. Je vais dupliquer ce code. Changeons le nom de classe dont nous avons besoin ici. Y en a deux, je suis. Définissez la position inférieure et ce sera -8% OK. C'est tout à propos de la section des services. Ensuite, je vais m' occuper de la bannière. Allons-y et sélectionnons la bannière. Je vais définir la position de gauche, elle sera de 8 %. Ensuite, je vais m'occuper des arrière-plans. Je vais commencer par le contexte principal. Sélectionnons G main. Je vais définir les positions. La position supérieure sera de -75 %. Quant à la position de gauche, je vais la régler à moins un, 20 %. Ensuite, je vais changer le fond, le dégradé linéaire Définissons la fonction de gradient linéaire. La transition des couleurs, je veux dire que la direction de la transition va être vers la gauche. Ensuite, nous avons besoin de la première couleur, ce sera 44005 Pour ce qui est de la deuxième couleur, je vais utiliser à nouveau 4400b Ensuite, nous devons nous occuper du deuxième arrière-plan. Je veux dire que nous devons sélectionner G deux. Je vais régler la position gauche à 20 %. D'accord, je pense que c'est tout. À propos de l'en-tête, tout semble bon. Ensuite, nous devons nous occuper de la section projet. Je vais commencer par les titres. Allons-y et sélectionnons les éléments d' en-tête des projets. Je vais régler une taille à quatre RAM. Ensuite, je vais m' occuper du paragraphe. En fait, j'ai dit qu' il se dirigeait, donc c'est une erreur de ma part. Il s'agit d'un paragraphe. Je vais sélectionner des projets. Je vais régler la largeur 250. OK. La prochaine chose que je vais faire est de m' occuper de la navigation. Je vais placer les liens sur deux lignes. Nous devons sélectionner le filtre vers le haut, je vais définir la hauteur. Ça va faire 15 RAM. Ensuite, pour placer les liens sur deux lignes, nous devons utiliser Flex avec la valeur p. D'accord, maintenant les liens sont placés sur deux lignes, mais nous avons besoin ici du même nombre de liens sur chaque ligne. J'augmente l'espace entre les liens de navigation. Sélectionnons le lien du filtre et fixons la marge à un essai. Maintenant, le problème est résolu et avec cette section, nous avons terminé. Tout semble bon. Ensuite, nous devons nous occuper de la section des modèles. Je vais m'occuper du côté gauche. Allons-y et sélectionnons le modèle à gauche. Je vais mettre la position let à zéro. Ensuite, nous avons besoin que la largeur soit de 100 %. Je vais également changer le rembourrage Réglons le rembourrage à 12 RAM en haut, puis à cinq RAM sur le côté droit, à zéro en bas et à cinq RAM sur le côté gauche Ensuite, je vais placer les éléments flexibles au centre de la section. Pour cela, je vais utiliser Flex Box. Réglons cette plaque pour qu'elle fléchisse. Ensuite, nous devons changer de direction car nous allons placer les éléments flexibles verticalement dans une colonne. Nous avons besoin de la direction flexible pour être une colonne, puis nous devons justifier le centre de conférence et également un centre de rubriques. OK. Cela se trouve donc à peu près sur le côté gauche. En fait, je vais mettre une ligne le texte du paragraphe au centre. Je vais sélectionner les modèles à gauche et utiliser le centre de la ligne de texte. OK, maintenant tout semble bien. Ensuite, nous devons prendre les images et aussi le bas. Commençons par les images. Je vais sélectionner le modèle, c'est vrai. Suivent les éléments de l'image et je vais sélectionner la première image à l' aide du énième sélecteur d'enfant Je vais changer la largeur, ça va être de 23 RAM. Ensuite, je vais changer de position. La première position sera de 65 %. Quant à la bonne position, je vais la régler à 40 %. Ensuite, je vais dupliquer ce code deux fois car nous devons nous occuper du reste des images dont nous avons besoin ici, l'image deux puis l'image trois. La largeur de la deuxième image sera de 14 RAM. La position sera alors 51 %, soit la position de gauche dont nous avons besoin ici. La position gauche sera de -55 % Ensuite, nous devons nous occuper de la troisième image Mettons-nous au point avec 38 RAM. Ensuite, les deux positions seront de 55 %. Quant à la bonne position, je vais la régler à 10 %. D'accord, passons aux images suivantes. Je vais m'occuper de cette ombre ici. Je veux dire, nous devons sélectionner des modèles avec des éléments libres. Définissons la bonne position. Ce sera -7 % mais ensuite nous aurons besoin de la position la plus basse, ce sera -10 %. Je vais également changer le Utilisons un dégradé linéaire. La direction sera deux à gauche. En ce qui concerne les couleurs, la première sera transparente. Ensuite, je vais utiliser le deuxième appelant, le 8430. Quant au troisième appel, ce sera 409b OK ? Tout semble bon. Nous devons nous occuper du bouton Play. Sélectionnons l'emballage. Définir la position gauche sera de -25 %. Ensuite, je vais sélectionner Play BTN, je vais diminuer la taille de l'élément Réglons la largeur et la hauteur, toutes deux à 15 RAM. Je vais également modifier la taille de avant l'élément. Dupliquons ce code et ajoutons ici avant que la hauteur l'élément before soit de 19,5 %, pas un pourcentage mais de RAM C'est bon. Je pense que tout semble bon. La seule chose que nous devons faire est de changer la taille de l'icône Phm Je vais jouer à BTN, puis à l'élément Je vais régler la taille de police à cinq RAM. C'est bon, c'est ça. À propos du bouton de lecture, je vais vérifier le lecteur vidéo. Comme vous pouvez le constater, il est temps de prendre soin du lecteur vidéo car il n'a pas l' air très beau. Je vais continuer et sélectionner Vidéo. Je veux dire, pour l'emballage, fixons la largeur à 50. C'est pour la hauteur. Ça va être automatique. Maintenant, nous devons nous occuper des commandes. Sélectionnons les commandes vidéo. Nous avons besoin de contrôles ici. Je vais changer le rembourrage. Il y aura une rampe en haut et en bas et zéro sur les côtés gauche et droit. Ensuite, nous devons prendre soin des options sur le côté gauche. Je vais sélectionner Options avec la classe restante. Fixons-nous à 40 %. Maintenant, tout semble bon. Je vais changer la position du bouton de fermeture X. Nous allons sélectionner X PTN, suivi de l'élément Je vais régler la position à -8 % pour Ken, le lecteur vidéo. Ça a l'air plutôt sympa. Fermons-le et passons à la section suivante. Il s'agit d'une section d'abonnement. Nous devons également personnaliser cette section. Je suis un wrapper d'abonnement, fixons la largeur à 50. Ensuite, je vais m' occuper de la saisie. Et en bas, je vais m'abonner aux entrées, il faut que vous vous abonniez à un groupe de saisie, réglons avec 240 RAM. Ensuite, je vais passer aux entrées, utilisons le sélecteur nous avons pour ajouter ici une entrée que je vais régler avec une hauteur de 100 %. D'accord, c'est tout pour la section abonnée Ensuite, nous devons prendre soin du pied de page car les éléments, en particulier les icônes des réseaux sociaux, sont perturbés. Je vais sélectionner le pied de page. Réglons la hauteur 245, mettons la hauteur. Je vais changer la position des icônes des réseaux sociaux. Je vais les placer ici. Sélectionnez les réseaux sociaux vers le bas. Réglons la position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui est le pied de page Ensuite, nous avons besoin de la position inférieure. Il y aura six Ram. Passons également à 100 %. Ensuite, je vais placer les éléments horizontalement dans un rôle. Par conséquent, nous devons changer la direction de la boîte flexible et dans ce cas, ce sera un rôle. Enfin, nous devons justifier le centre de contenu. D'accord, comme vous pouvez le voir, le titre et les icônes des réseaux sociaux sont bien placés ici. Nous avons besoin d'un espace entre le titre et les icônes. Je vais donc sélectionner les réseaux sociaux pour les pieds, puis les trois éléments de titre H. Et je vais fixer une marge sur le côté droit à cinq m. OK, maintenant tout semble bon. Ensuite, je vais m' occuper de ces liens ici. Je vais changer la taille de police. Allons-y et sélectionnons le bas de la page, puis les éléments. Je suis le lien. La taille du téléphone sera de 1,8 RAM. D'accord, donc je pense que c'est à propos de la page d'accueil. Ensuite, nous devons nous occuper de la navigation. Je vais vérifier les listes déroulantes. Comme vous pouvez le constater, nous devons apporter ici quelques modifications. Je vais masquer ces panneaux PanElementsioSecond Passons au code VS et sélectionnons le service déroulant. Ensuite, nous avons besoin de développements suivis de la durée. Et nous devons sélectionner le deuxième élément du panneau à l'aide du sélecteur d'enfant Réglons l'affichage sur aucun. Comme vous pouvez le constater, ces éléments de panneau sont masqués. Ensuite, je vais modifier la taille du côté droit de la première liste déroulante. Sélectionnons une liste déroulante droite et définissons la largeur à 100 %. Quant à la hauteur, je vais la régler à 75 %. En fait, toutes les autres listes déroulantes sont belles On peut donc dire cela avec la page d'accueil et avec la navigation. Nous avons terminé. Ensuite, je vais consulter les autres pages. Vérifie la page des clients. Nous en avons deux, personnalisez cette page. Allons-y, ouvrons fichier CSS des clients et créons une nouvelle requête multimédia CSS. Spécifiez ensuite xw, cela fera 430 pixels. Je vais sélectionner l' en-tête du témoignage suivi de l'élément de titre H. Je vais définir la taille du téléphone. Ce sera aussi une forme. Je vais cacher les étoiles. Sélectionnons les étoiles et utilisons Display Non. OK, maintenant tout semble bon et avec la page du client, c'est terminé. Ensuite, je vais sélectionner la page Produits. Comme vous pouvez le constater, nous devons personnaliser cette page. Ouvrons les produits du fichier CCS et créons une nouvelle requête multimédia Ss Je vais préciser que Mawi le sera. 430 pixels. Ensuite, je vais sélectionner l' en-tête des produits suivi de l'élément d'en-tête H. Réglons la taille du téléphone à quatre RAM. OK, ensuite je vais m' occuper de la deuxième rubrique. Allons-y et dupliquons ce code. Je vais changer de sélecteur. Nous avons besoin de H trois, puis la taille du téléphone sera de 2,5. De plus, je change la largeur, disons à 80 % Ensuite, nous devons centrer le titre pour cela. Je vais définir la marge, ce sera deux points en haut. Ensuite, sur le côté droit, 15 RAM en bas et O sur le côté gauche. Comme vous pouvez le voir, le titre est placé au centre. Très bien, c'est le câble, le connecteur. Ensuite, nous devons nous occuper de la section du contenu du produit. Je vais sélectionner le contenu du produit Wrapper. Définissons le rembourrage. Il y aura cinq RAM en haut et en bas et zéro sur les côtés gauche et droit. Ensuite, je vais m' occuper de cette partie ici. Sélectionnez le contenu des produits à gauche. Je vais régler avec 100 %, mais utilisons ensuite Flex box. Nous avons besoin de Display Flex. Nous devons également changer de direction car les éléments flexibles doivent être placés verticalement dans la colonne. Par conséquent, nous avons besoin que la direction de flexion soit une colonne. De plus, je vais définir, aligner les éléments au centre. OK, je vais maintenant modifier l'alignement du paragraphe. Je parle du texte du paragraphe. Allons-y et sélectionnons les produits. Le contenu est parti, suivi des éléments. Tout d'abord, je vais modifier la largeur. Ce sera 8 %. Ensuite, plaçons le texte au centre en utilisant du texte. Un centre de ligne. En fait, nous avons ici un problème car ce contenu doit être placé au centre de la section. Revenons au code VS. Et en fait, nous avons besoin ici du contenu des produits et non de l'absence de contenu. Comme vous pouvez le constater, le problème est résolu. Bien, après cela, je vais m'occuper de ces images ici. Nous allons sélectionner le contenu des produits suivi des éléments de l'image. Et nous avons besoin de la première image en utilisant le sélecteur de graphique. Je vais définir la largeur et la hauteur. La largeur sera de 18 RAM. Ensuite, nous avons besoin de hauteur, ce sera 36 RAM. Je vais également changer la position de l'image. La première position sera de 75 %. Quant à la bonne position, je dirais de 30 %. Dupliquons ce code deux fois et changeons les sélecteurs du graphique Nous avons besoin de l'image numéro deux et de l'image numéro trois. Ensuite, je vais régler la largeur de la deuxième image à dix RAM. Je vais me débarrasser de hauteur car la position supérieure sera de 63 %. Ensuite, nous avons besoin de la bonne position, qui sera de 57 %. Quant à la troisième image, je vais régler la largeur sur 18 RAM Laissons cette valeur ici. Nous n'avons pas besoin de hauteur. En ce qui concerne les positions dont nous avons besoin ici, la position inférieure. Je vais le régler à 13 %. Pour la bonne position, ce sera 7 %. D'accord, je pense que c'est le câble pour les images. Voyons les résultats maintenant. Je pense que tout va bien dans cette section. Nous avons terminé. Passons à autre chose et occupons-nous de la deuxième section. Moi, le contenu promotionnel. Je vais sélectionner la promotion des produits et régler la hauteur sur 100 H. Ensuite, je vais sélectionner le contenu promotionnel et définir largeurs de 8 % Maintenant, nous devons personnaliser le contenu promotionnel au survol Passons au code VS et sélectionnons le contenu promotionnel avec Hover. Survolez, je vais modifier la propriété de transformation. Utilisons ici la traduction. Les valeurs seront de -50 % à nouveau -50 %. Ensuite, nous devons modifier la valeur de la fonction translate Z. Il va y en avoir six. OK, maintenant tout semble bien. Ensuite, nous devons nous occuper des formes qui sous-tendent le contenu promotionnel. Je vais commencer par le rectangle. Sélectionnons le rectangle promotionnel. Je vais régler la hauteur, dans les deux cas, à 35 Ram. Ensuite, je vais changer la position du rectangle dont nous avons besoin ici. La première position sera de 28 % Quant à la position de gauche, je vais la fixer à -3 % OK Ensuite, je vais m' occuper du grand cercle. Sélectionnons un grand cercle. En fait, je vais récupérer ce code d'ici. Nous avons besoin des mêmes valeurs en hauteur, car la position sera en bas et la valeur sera de 27 %. Quant à la position de gauche, je vais la changer position de droite et la valeur sera de -8 %. D'accord, enfin, nous devons personnaliser le petit cercle Sélectionnez un petit cercle et modifiez la position. La première position sera de 26 %. Quant à la bonne position, je dirais 30 %. D'accord, c'est une question de formes. Ensuite, nous devons nous occuper du titre et du paragraphe à l'intérieur du contenu promotionnel. Je vais sélectionner le contenu d' un élément d'en-tête. Je vais changer la taille du téléphone. Ce sera 1.8 Ensuite, je vais m' occuper du paragraphe. Nous avons besoin d'un contenu promotionnel suivi de l'élément P. Et la taille du téléphone sera également de 1,8 RAM. accord, je pense que c'est tout à propos de la page des produits, tout semble bien. Ensuite, nous devons nous occuper de la page suivante et ce sera la page de contact. Comme vous pouvez le constater, nous devons personnaliser cette page. Allons-y, ouvrons le fichier CSS de contact et créons un nouveau curry multimédia CSS dont nous avons besoin pour spécifier le x avec. Tout d'abord, je vais sélectionner les éléments de section avec le nom de classe contact et je vais régler la hauteur à 180 points de vue. Ensuite, je vais m' occuper de l'en-tête. Sélectionnons l'en-tête du contact suivi de l'élément d'en-tête H. Je vais changer la taille de la police, il y aura quatre RAM. Ensuite, je vais dupliquer ce code et m' occuper du deuxième titre qui est H trois, je vais définir la taille de la police sur 2,5 RAM. Ensuite, je vais ajouter ici que ce sera 80 %. Ensuite, nous devons détecter le cap. Je vais utiliser la marge avec les valeurs deux Ram Alto 15 et ensuite automatique également. C'est donc une question d'en-tête. Ensuite, je vais m'occuper de ces deux parties ici. Je vais sélectionner le contenu du contact. Nous devons changer la direction de la boîte flexible car nous allons placer ces deux éléments l'un sur l'autre verticalement. Je vais définir la direction de flexion sur la colonne. Ensuite, nous avons besoin d'un centre de rubriques. Maintenant, comme vous pouvez le voir, ils sont placés verticalement. Nous devons créer un espace entre ces éléments. Je vais sélectionner l' emballage du formulaire de contact, puis je vais définir la marge Il y aura zéro en haut, trois Ram sur le côté droit, dix Ram en bas et trois Ram sur le côté gauche. Nous avons maintenant un peu d'espace. Ensuite, je vais m' occuper de la position du cercle. Allons-y et sélectionnons le cercle de contact. Nous devons changer la position inférieure qui sera de 30 %. Quant à la position de gauche, je vais la fixer à 5 %. D'accord, je pense que tout bien et nous devons passer à la page suivante. Ce sera la page du compte. Je vais accéder au code BS et ouvrir le compte du fichier CSS. Créons une nouvelle requête multimédia CSS. Il nous faut ici, mawi, 430 pixels. Je vais sélectionner Account Circle. Changeons la taille du cercle. Je vais partir avec 260 points. De plus, nous avons besoin de hauteurs ayant la même valeur. Ensuite, je vais changer la position du cercle. Ajoutons la position inférieure à 34 % Quant à la position de gauche, elle sera de 10 %. D' accord, je vais maintenant m' occuper de l'en-tête. Ajoutons un en-tête ici. Nous avons besoin de H et d'éléments de titre. Je vais changer la taille du téléphone, ça va être un formulaire, puis je vais dupliquer ce code. Sélectionnez H trois éléments de titre. Nous avons donc besoin d'une taille de police de 2,5 RAM. Ensuite, nous avons besoin de largeur, elle sera de 80 %. Ensuite, nous devons centrer l'élément en utilisant la marge. Nous devons courir 15 fois et encore. Ou OK, cela se trouve à propos de la page du compte. Ensuite, je vais vous rediriger vers la page des prix. Passons au code VS et ouvrons les prix dans un fichier CSS. Je vais ajouter ici une nouvelle requête multimédia CSS avec une largeur maximale de 430 pixels. Je vais modifier la hauteur de la section. Sélectionnons les prix et fixons la hauteur à 18 points de vue. Ensuite, je vais enlever l'en-tête. Sélectionnons l'en-tête de tarification, suivi des éléments du titre tron. Je vais régler la taille de police à quatre RAM. Ensuite, nous devons modifier la largeur de l'en-tête. Ça va faire 50 RAM. Ensuite, nous devons centrer l' élément en utilisant la marge globale. OK, après cela, je vais passer à la deuxième rubrique. Je vais dupliquer ce code, changer le sélecteur. Nous avons besoin de H trois, je vais régler la taille du téléphone à deux RAM. Ensuite, nous avons besoin de la même chose avec, comme pour la marge. Il y aura deux M, puis deux Ram. Encore une fois, en fait, nous ne pouvons laisser ici que deux M et O. Ce sera exactement la même chose. OK, c'est tout à propos du H, des trois éléments de titre. Ensuite, je vais m' occuper des cartes. Il faut les placer verticalement. Et pour cela, nous devons sélectionner des cartes de tarification. Pour changer la direction de la boîte flexible, elle va être une colonne. Maintenant, elles sont placées verticalement dans une colonne. Je vais créer un espace entre les cartes. Je vais sélectionner une carte tarifaire, je vais fixer la marge à zéro, puis à 1,5, puis à dix points, et encore une fois à 1,5 r. Maintenant, nous avons l'espace entre les cartes, et la prochaine chose que je vais faire est de m'occuper des formes. Allons-y et commençons par le rectangle promotionnel. Je vais ajouter ici le code du rectangle. Nous avons besoin d'un rectangle de tarification et non d'un rectangle promotionnel. Je vais changer les deux positions, ça va être de 20 %. Ici, nous avons le rectangle. Ensuite, je vais m' occuper du petit cercle. Allons-y et sélectionnons un petit cercle. Nous avons besoin d'un cercle restreint de prix. Je vais fixer la position à 17 % Quant à la bonne position , elle sera de 5 % Enfin, je vais m'occuper du grand cercle. Nous devons changer de position. Nous avons besoin d'un grand cercle de prix et la position inférieure sera de 8 %. OK, je pense qu'Everton a l'air bien au point de rupture On peut dire que les premiers points d'arrêt des téléphones portables sont terminés Nous pouvons vérifier ce point d'arrêt ici et nous pouvons nous occuper du point d'arrêt suivant Je vais consulter le site web sur le point d'arrêt. Allons-y et changeons les dimensions dont nous avons besoin ici, 393 et 893 pixels. Examinons les projets. Si tout semble bon, la page d'accueil est bonne, examinons les autres pages. La page des clients semble bonne. Ensuite, nous avons la page des produits, elle a l'air bien aussi. Ensuite, je vais consulter la page de contact. Ensuite, nous avons la page du compte, enfin la page des prix. Comme vous pouvez le constater, tout semble bon. Nous n'avons pas besoin de changer quoi que ce soit à ce point d'arrêt. Maintenant, je vais vérifier ce point de rupture ici et vous le dernier point d'arrêt pour les téléphones portables, il sera de 375 pixels de largeur et 667 pixels de hauteur Allons-y et changeons les dimensions dont nous avons besoin ici, 375,6 67 Donc, comme vous pouvez le constater, tout est foiré. Encore une fois sur ce point d'arrêt, ouvrons le style du fichier CS et créons une nouvelle requête multimédia CSS Ça va faire 375 pixels. Je vais d'abord m'occuper de la section des services, sélectionnons les services et augmentons la hauteur. La hauteur de la fenêtre d' affichage sera de 350. OK. Ensuite, je vais m' occuper des services Gone. Réglons la première position à -7% Ensuite, je vais m' occuper de l'arrière-plan jusqu'à ce qui se trouve ici sur l'en-tête Allons-y et sélectionnons BG two. Je vais régler la position gauche à 30 % D'accord. Ensuite, je vais vérifier la navigation Nous devons apporter quelques modifications. Je vais diminuer la hauteur de l'élément de navigation. Allons-y et ne sélectionnons aucun élément, mais nous devons exclure à nouveau le roman qui se trouve Je vais ajouter ici le dernier enfant de la classe. En plus de cela, nous devons ici ajouter la classe Hamblger, nous devons diminuer la hauteur. Il va y en avoir huit. Ensuite, je vais changer le rembourrage sur le côté gauche, disons à trois m. Comme vous pouvez le voir, la hauteur des éléments de navigation est modifiée Ensuite, je vais modifier la position des listes déroulantes. Nous devons sélectionner le menu déroulant , puis définir l'opposition à huit points. Bien, la prochaine chose que je vais faire est d' ajouter une barre de défilement au premier menu déroulant. Allons-y et sélectionnons le menu déroulant. Ensuite, utilisez la propriété Overflow Y dont nous avons besoin ici Faites défiler maintenant, comme vous pouvez le voir, nous pouvons faire défiler le menu déroulant vers le bas Passons à la deuxième liste déroulante. Je vais sélectionner le menu déroulant deux. Réglons la hauteur à 32,5 RAM. En plus de cela, je vais sélectionner le menu déroulant deux avec les développements et je vais régler la hauteur du suivant. Je vais masquer les icônes ainsi que les paragraphes. Découlons-en deux, suivis des développements, puis réglons l' affichage sur aucun. Nous avons également besoin de la même chose pour le paragraphe. Passons à, d'accord, donc c'est tout à propos du deuxième menu déroulant. Passons à la troisième. Je vais personnaliser le troisième menu déroulant. Sélectionnons la troisième liste déroulante pour modifier la hauteur de la troisième liste déroulante. Ça va être 45. Ensuite, je vais masquer les éléments du deuxième spin dans le menu déroulant. Sélectionnons le menu déroulant trois, puis le développement. Ensuite, nous avons besoin de span avec sélecteur. Nous devons sélectionner les éléments de la deuxième travée. Ajoutons ici n'en afficher aucun. OK, c'est tout à propos de la troisième liste déroulante. La quatrième liste déroulante semble bonne. Quant à la cinquième liste déroulante, je vais la personnaliser. Allons-y et sélectionnons le menu déroulant 5. Je vais changer la hauteur. Ça va être 30. Ensuite, je vais régler la mise à 1,5. Ensuite, je vais m' occuper du bouton, je veux dire du bouton de tarification. Allons-y et sélectionnons Item with Last child. Donc, classe, je vais régler la hauteur à dix Ram. Ensuite, je vais également modifier la hauteur du bouton. Dupliquons le code dont nous avons besoin ici. O BTN, je vais régler la hauteur à cinq RAM. Très bien, vérifions le navigateur. Tout semble bon, en fait, avec la navigation. Nous avons terminé. Allons-y et consultons les autres sections. Tout semble bon. Comme vous pouvez le constater, le pied de page a besoin de quelques ajustements Allons-y et occupons-nous de ça. Je vais sélectionner le pied de page, et je vais augmenter la hauteur Disons 255 pieds de hauteur. Maintenant, le pied de page est beau. OK. Cela se trouve à propos de la page d'accueil. Ensuite, je vais consulter les autres pages. La page du client semble bonne. Ensuite, nous avons la page des produits. Sur la page des produits, nous devons nous occuper du contenu promotionnel. Ouvrons les produits du fichier CSS et créons de nouveaux médias CSS. Query Maxwit sera de 375 pixels. Je vais sélectionner le rectangle promotionnel. Réglons la hauteur, les deux à 30. Ensuite, je vais fixer la première place à 23 %. Ensuite, je vais m'occuper du grand cercle. Je vais me régler en fonction de la hauteur. En fait, récupérons ce code d'ici. La largeur et la hauteur seront de 30. En ce qui concerne les positions dont nous avons besoin ici, la position inférieure. Ce sera 20 % de la bonne position et une hausse de 30 à 11 %. Voyons le résultat Tout semble bon. Ensuite, la position du petit cercle. Sélectionnons un petit cercle et définissons sa position supérieure à 20 % OK, je vais changer la position du petit cercle au survol. Revenons au code VS et dupliquons ce code. Je vais ajouter ici la classe animate. La première place sera 13 %. Maintenant, je pense que tout va bien dans la section des produits. Je veux dire la page des produits, c'est terminé. Regardons la page de contact. Je vais personnaliser cette page. Ouvrons le fichier CSS de contact et créons une nouvelle requête multimédia CSS. Nous avons besoin d'un maximum de 375 pixels. Sélectionnons la section de contact et réglons la hauteur 220 (hauteur du point de vue). OK, maintenant le problème est réglé. Allons-y et vérifions la page du compte. Nous devons également personnaliser cette page. Je vais ouvrir le compte d'un fichier CSS. En fait, récupérons ce code d'ici. Nous avons besoin d'une section dédiée aux comptes. La hauteur sera de 130 points. Ensuite, je vais diminuer la largeur du compte pour Wrapper. Sélectionnons le compte pour le kit d' emballage avec 245 RAM. OK, maintenant tout va bien avec la page du compte. Nous avons terminé. Regardons la page des prix. Eh bien, nous devons augmenter la hauteur de la page de tarification. Collons ici la requête multimédia, sélectionnons le prix et fixons la hauteur du pot à 250. OK, c'est ça. Toutes les pages, y compris la page d'accueil, affichent bien à ce point d'arrêt Je veux dire, le point d'arrêt pour les téléphones portables, en fait, nous pouvons dire que notre projet répond à tous ces points d'arrêt vraiment populaires Nous pouvons également vérifier le dernier point de rupture. C'est la vidéo la plus longue du cours. Mais finalement, nous en avons terminé avec le projet. La seule chose que nous devons faire est de déployer le site Web. Je veux dire, nous devons l'héberger et le mettre en ligne pour cela. Passons à la prochaine conférence. 72. Déployer un site Web: Très bien, lors de notre conférence précédente, nous avons réussi à adapter notre projet à différentes tailles d'écran et à différents appareils. Il est maintenant temps de passer à l'étape finale, à savoir le déploiement de notre site Web en ligne. Il existe de nombreuses façons d'héberger votre site Web, mais dans ce cours, je préfère utiliser Netlify Netlify est une plateforme cloud qui fournit une gamme de services pour le développement et l'hébergement Web modernes Il propose une solution de plate-forme en tant que service qui simplifie le processus de déploiement et de gestion des sites Web et des applications Web. Allons visiter Netlify Com. La première chose que vous devez faire est de vous inscrire. Il s'agit d'un processus très simple. Je ne vais pas m'y attarder. Je suis déjà inscrit, donc je vais juste me connecter. Ici, nous avons un tableau de bord de l'utilisateur. Pour déployer le site Web, vous pouvez soit importer votre dépôt Git existant, soit simplement glisser-déposer votre dossier de projet de travail. Je préfère la deuxième méthode. Je veux dire, je vais glisser-déposer le dossier du projet. Mais avant cela, je dois noter une chose, car je me souviens que nous avions trois dossiers différents pour les fichiers HTML, CSS et Charles. Si je conservais ces dossiers, Atlifi ne déploiera pas correctement le site Web Nous devons conserver nos fichiers ensemble de cette façon. Ouvrons les projets dans le code VS. Une fois que j'ai supprimé les dossiers et placé tous les fichiers de travail ensemble, j'aurais dû modifier les chemins des fichiers liés. Si je vérifie le chemin du fichier CSS de style de fichier, vous verrez que nous n'avons plus ici deux points avec une barre oblique puis le nom du dossier, CSS J'ai fait la même chose pour les images. Comme vous pouvez le voir, nous avons ici un dossier d'images sans points ni barres obliques D'accord ? Assurez-vous que vous avez également modifié les chemins des fichiers et des images. Sinon, lorsque vous déployez le site Web, vous ne verrez pas les vignettes ou les images. Très bien, je pense que nous sommes prêts à déposer le dossier ici. Je vais quitter ce chemin, puis je vais déposer le dossier ici. Cela va prendre un certain temps. Comme vous pouvez le constater, déployez avec succès. Je vais cliquer sur Commencer, puis cliquer ici. Je vais cliquer sur le lien ici. Comme vous pouvez le constater, notre site Web est maintenant en ligne. Nous pouvons voir que tout semble bon et que tout fonctionne bien. Nous pouvons naviguer entre différentes pages, tout fonctionne et a l'air bien. Nous pouvons dire que notre site Web est en ligne. J'ai encore une chose à faire. Comme vous pouvez le voir, Netlify a généré un nom de domaine nul. Et je veux le changer. Cliquons ici. Configuration du site Je vais changer le nom du site. Tu utilises tous les noms que tu veux. C'est à vous de décider. Je vais supprimer ces personnages. Et je vais appeler le site web. Je ne sais pas, disons les appeler Créer un site Web. Ce n'est pas le nom parfait, mais je n'ai trouvé aucun autre nom. Je vais enregistrer le nom, puis si je clique sur le lien, vous verrez ici l' icône du nom de domaine et créerez un site Web, l'application Netlify point D'accord, vous savez maintenant comment héberger votre site Web sur Netlify. Encore une fois, il existe des tonnes de façons d'héberger les sites Web. Vous pouvez acheter les noms de domaine, etc. Très bien, félicitations. C'est un travail fantastique pour terminer ce cours. Vous êtes désormais doté des compétences nécessaires pour créer de superbes sites Web. Je tiens à vous remercier chaleureusement d'avoir participé à ce cours. Continuez à apprendre, restez curieux et profitez du voyage. En tant que développeur web, je vous souhaite bonne chance tous vos futurs projets. Bon codage, et que vos sites Web impressionnent toujours. Bonne chance Au revoir, au revoir.