Créer 30 projets Web avec HTML, CSS et JavaScript (2024)

1. Introduction: Bonjour et bienvenue au cours. J'espère que ce sera votre bonne voie et que vous apprécierez les projets que nous allons construire tout au long de ce cours. Comme vous le savez déjà, nous allons créer 30 projets modernes et créatifs différents. Tous ces projets seront construits sur la base des trois technologies de base que sont le développement Web frontal, HTML, CSS et Javascript. Je voudrais mentionner une chose. Comme je l'ai dit, les projets seront créés sur la base du HTML, du CSS et du Javascript. Vous devez avoir une bonne compréhension du HTML et du CSS ainsi que des connaissances de base en Javascript afin de suivre les cours et de ne pas vous y perdre. Les projets seront remplis de différentes techniques et astuces modernes. Vous pourrez apprendre à créer de jolis et beaux effets et animations, vous pourrez utiliser comme source d'inspiration pour développer et personnaliser votre propre portfolio. Comme je l'ai mentionné, nous allons construire 30 projets. Ce sont des modèles indépendants, vous n'avez donc pas à les parcourir dans l'ordre. Vous pouvez créer tous les projets de votre choix dans la liste. Cela dépend entièrement de vous. Certains des projets sont simples, mais vous rencontrerez également des projets avancés. Nous avons inclus dans le cours tous les niveaux dont le développeur a besoin. Nous développerons des projets tels que des menus de navigation, des diaporamas, des en-têtes de sites Web, des cartes, des applications Web et d'autres projets intéressants et créatifs Je suis sûr qu'ils vous plairont. Je pense que vous aurez beaucoup de pratique et expérience dans le développement Web frontal dans lequel le HTML, CSS et le Javascript sont indispensables. Je voudrais également mentionner un autre point. Les projets sont créés pour un écran de très grande taille. Si vous utilisez une taille d'écran relativement petite, je vous recommande de passer en mode réactif. Réglez la largeur et la hauteur sur 1920 pixels et 1080 pixels, et suivez les cours avec cette résolution. Sinon, les projets risquent ne pas s'afficher correctement sur un écran plus petit. Et vous aurez du mal à suivre les cours, veuillez en tenir compte. Très bien, alors passons à autre chose et 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. Projet - Application musicale Spotify - Partie 1: Bonjour et bienvenue à notre tout premier projet dans le cadre de ce cours. Dans cette vidéo, nous allons commencer à créer une application musicale Spotify avec HTML, CSS et Javascript. Avant de passer directement à la construction du projet, je vais le décrire. Comme vous pouvez le constater, nous avons ici une application musicale Spotify composée de plusieurs parties différentes. En haut de l'application, vous pouvez voir des icônes portant le nom de l'application. Ensuite, nous avons ici une pochette qui nous montre le nom de la chanson ainsi que l'artiste. En bas, vous pouvez voir les détails de la chanson et le nom de l'artiste de la chanson. Ensuite, nous avons une barre de progression avec l'heure actuelle de la chanson et la durée de la chanson. Ensuite, vous pouvez voir ici les commandes du lecteur. En bas, nous avons ici quelques icônes avec du texte. Si je clique sur le bouton de lecture, la musique commence à jouer. Comme vous pouvez le constater, la barre de progression est mise à jour ainsi que l'heure actuelle de la chanson. Ensuite, si je clique à nouveau sur le bouton de lecture, la musique s'arrêtera de jouer. Nous avons ici les boutons suivant et précédent. Si je clique dessus, nous passerons aux chansons suivantes et précédentes. Tout fonctionne parfaitement. Très bien, donc si je clique n'importe où sur la barre de progression, la musique sera rembobinée et l' heure actuelle sera Très bien, donc tout fonctionne parfaitement. Vous pouvez voir ici des effets d'ombres sympas et sympas. C'est ce qu'on appelle CSS New Morphism. Tout au long de ce didacticiel, vous apprendrez comment créer les nouveaux effets de morphisme CSS OK, commençons. J'ai créé un nouveau dossier sur le bureau appelé application Spotify Music, dans lequel j'ai un autre dossier. Musique Il comprend trois chansons différentes. Allons-y, ouvrons ce dossier dans le code VS, puis créons nos fichiers de travail pour HDML Ensuite, nous avons besoin d'un fichier pour CSS. Je vais également créer un fichier pour le script Java. Ouvrons le fichier HTML et créons les documents HTML de base. Je vais placer ici un point d'exclamation, puis appuyer sur le bouton supérieur ou sur Entrée. Allons-y. Nous avons ici la structure HTML de base, les éléments HTML de base. La première chose que je vais faire est de changer le titre. Ce sera Spotify. Music Up, je vais alors lier les fichiers CSS et chavs. Je vais ouvrir le link tag. Ensuite, je vais spécifier ici le chemin du fichier. Ensuite, je vais ouvrir la balise de script. Dans l'attribut source, je vais insérer le script de nom final JS. Ensuite, nous avons besoin d'un attribut appelé defer. Cet attribut indique au navigateur d' exécuter le script une fois le contenu HTML transmis. Cela signifie que le script sera chargé manière asynchrone pendant le transfert du contenu HTML, mais il n'interrompra pas l'analyse du En fait, vous pouvez lier le fichier Esk à partir d'ici. Je veux dire, vous pouvez ouvrir la balise script juste au-dessus la balise body de fermeture , puis spécifier ici l'alphhibute source Mais dans ce cas, je vais utiliser cette technique. Très bien, après cela, allons-y et ouvrons le projet dans le navigateur en utilisant le serveur en direct, vous pouvez cliquer ici ou cliquer sur le bouton. Passez en direct. Notre projet est en ligne dans le navigateur. Je vais placer le navigateur et l'éditeur côte côte, comme ça. Ensuite, je vais également ajouter d'autres liens. Nous allons utiliser des icônes de téléphone tout au long de ce projet, et je vais également utiliser des téléphones Google. Allons-y et cherchons un CDN JS génial pour téléphone. Ensuite, je vais cliquer ici pour copier l'URL. Ensuite, je vais ouvrir la balise link, puis coller le CDM copié ici dans l'attribut de référence H. Bien, après cela, je vais rechercher des téléphones Google. Allons visiter le site Web. Je vais chercher des téléphones appelés Delicious. Drone à main. Cliquons sur le téléphone. Ensuite, nous devons acheter des téléphones. Ensuite, je vais sélectionner d'autres téléphones. Ça va être très négatif. Il nous faut ici le négatif. Cliquez sur Obtenir le téléphone. Ensuite, nous devons obtenir le code d'étendue ici. Nous avons les deux téléphones. Je vais copier ces liens et les placer ici dans l'élément principal. Très bien, nous pouvons maintenant commencer à écrire le balisage HTML. Je vais créer un développement qui sera le conteneur, embellira l'ensemble du contenu. Ensuite, nous avons un autre développement avec le lecteur de noms de classes qui comprendra plusieurs parties différentes. La première partie sera le haut du joueur, je veux dire le côté supérieur du lecteur dans lequel je vais insérer un bouton avec PTN. Nous avons également besoin d'un bouton serré. Ensuite, à l'intérieur de l'élément bouton, je vais insérer la police nosomicon Nous avons besoin d'éléments I avec les classes, une ligne continue à gauche. Ensuite, je vais insérer les éléments de votre volet avec le texte de l'application Spotify Music. Ensuite, nous avons besoin d'un autre téléphone, d'une icône. En fait, je vais copier ce bouton à partir d'ici. Collons-le ici. Je vais changer l'icône. Dans ce cas, nous avons besoin d' une ellipse solide. Ici, nous avons deux modèles avec le texte. Ensuite, je vais créer le corps du joueur. Je suis dans la partie suivante de notre joueur. Je vais ouvrir le tag avec le nom de la classe player body. Dans lequel je vais ouvrir un autre div avec le nom de classe current song. Ensuite, nous devons créer une couverture. Comme vous vous en souvenez, le couvercle est composé de deux éléments de travée. Le premier sera l'artiste. Asseyons-nous ici, King Canyon. Ensuite, je vais ouvrir une autre période et ce sera le titre de la chanson Malland En fait, ce sont des chansons étranges et aléatoires. Je les ai choisis parce qu'ils sont libres de droits. Et je l'ai fait pour éviter toute réclamation de copyright. Si vous ne les aimez pas, ce n'est pas un problème, ne faites pas attention à ces chansons. Très bien, je vais maintenant créer des informations sur les chansons. Nous avons besoin de développements avec le nom de la classe, les informations sur les chansons. Ensuite, nous en aurons besoin d'une autre, qui portera sur les détails de la chanson. Ensuite, je vais insérer les éléments de votre colonne vertébrale avec le nom de la classe. Nom de la chanson. Ce sera Holand. Dupliquons ce code, changeons le nom de la classe. Ça va être une chanson. En fait, pas de détails mais l'artiste. Et nous avons besoin de King Canyon. C'est bon. Ensuite, je vais insérer votre phonosomicon. Ce sera un cœur solide. Ensuite, je vais m'occuper de la progression de la chanson. Je veux dire, je vais créer du développement. Ce sera la durée de la chanson dans laquelle je vais en insérer une autre. Ce sera l'heure de la chanson. Ensuite, il y a la progression de la chanson. Alors je vais à Odio. Nous avons besoin du nom du dossier Music dans lequel je vais sélectionner la première chanson, celle-ci. Ensuite, je vais ajouter ici le nom de classe Odio. OK. Ensuite, je vais prendre en compte l'heure actuelle et la durée de la chanson. Je vais insérer ici des développements avec l'heure du nom de classe dans lesquels je vais insérer deux éléments de span. Pour l'instant, je vais insérer zéro. Puis à nouveau zéro. Dupliquons ces éléments. Ensuite, nous devons nous occuper des contrôles. Je vais insérer votre développement avec les commandes de nom de classe. Ensuite, je vais insérer votre bouton dans la classe. En fait, nous pouvons récupérer le bouton d'ici. Je vais changer les noms de classe du téléphone, en tant qu'icône, Nada Shuffle Dupliquons ce bouton cinq fois. En fait, quatre fois, car dans l'ensemble, nous avons besoin de cinq boutons différents. Le second sera le bouton de la chanson précédente. Je vais ajouter ici une nouvelle classe pré PTN. En ce qui concerne les éléments, nous avons besoin d'un retour en arrière solide. Ensuite, nous avons le bouton. Ajoutons ici le nom de la classe, jouez. Les sondages modifient également les éléments. Ça va être une bonne FA. Jouez. Ensuite, nous avons le boson pour la prochaine chanson dont nous avons besoin ici Ensuite, PTN. Pour ce qui est de l'élément, ce sera un solide attaquant de la FA. Enfin, je vais changer ici l'élément, ce sera un FA solide. Répéter. Bien, comme vous pouvez le voir, les cinq icônes sont affichées ici. Ensuite, je vais passer à la partie inférieure de l'application. Je veux dire que nous devons créer ces deux icônes avec le texte. Allons-y et abordons le développement avec le joueur de classe. Nous avons sûrement besoin d'un lecteur dans lequel je vais insérer des éléments I. Ce sera un solide A. Music Ensuite, je vais insérer vos éléments Span dans le texte. Écoutez Spotify. Musique Enfin, nous avons besoin d'un autre élément avec les cours, une solide liste A. Très bien, passons au balisage HTML. Nous avons ici de nombreux éléments différents. J'espère que tout est correct. Nous verrons cela tout au long du projet. Très bien, il s' agit du balisage HTML. Tous les éléments sont créés, et nous devons maintenant commencer à styliser le projet en conséquence. Passons à la prochaine conférence. 4. Projet - Application musicale Spotify - Partie 2: Très bien, dans la dernière conférence, nous avons créé le balisage HTML pour le lecteur, et maintenant nous devons écrire du CSS La première chose que je vais faire est de créer des styles par défaut pour chaque élément. Je vais sélectionner chaque élément à l'aide d'un astérisque. Ensuite, je vais définir la marge et le rembourrage. Mettons-les tous les deux à zéro. Ensuite, je vais définir la propriété de dimensionnement des boîtes. Et ce sera égal à Border Box. Cela signifie que tous les éléments situés en hauteur incluront le rembourrage et la bordure Après cela, je vais fixer une limite à zéro. Définissons également la famille de téléphones. Ce seront les téléphones que nous avons sélectionnés parmi les téléphones Google. C'est un signal sensoriel négatif. C'est bon. Comme vous pouvez le constater, toutes les tuiles par défaut sont appliquées aux éléments. Ensuite, je vais définir la taille de téléphone de l'élément HTML. Tout au long de ce projet, je vais utiliser le RAM comme unité de mesure. heure actuelle, un M est égal à 16 pixels, car par défaut, la taille de téléphone de l'élément HTML est égale à 16 pixels. Je veux convertir un RAM en dix pixels. Par conséquent, nous devons réduire la taille de téléphone de l'élément HTML. Réglons-le à 62,5 %. Dans ce cas, un M sera égal à dix pixels Comme vous pouvez le constater, la taille des éléments est devenue plus petite. Ensuite, je vais retirer le conteneur qui contient tout le contenu de notre projet Tout d'abord, définissons avec et hauteur. La largeur sera de 100 %. Quant à la hauteur, je vais la régler à 100 % de hauteur de la fenêtre d'affichage Cela signifie qu'il occupera 100 % de la hauteur du point de vue. Ensuite, je vais changer la couleur de fond. Je vais utiliser un dégradé linéaire. Par conséquent, nous avons besoin ici de la couleur de fond et non de la couleur d'arrière-plan, ou vous pouvez utiliser une image de fond. Utilisons le dégradé linéaire. La première couleur sera 313131. Pour ce qui est de la deuxième couleur, je vais utiliser 151515 OK. Comme vous pouvez le voir, nous avons ici l'effet de dégradé. Ensuite, je vais placer le contenu au centre de la page. Je vais le faire en utilisant CSS Flex box. Réglons l'affichage pour qu'il soit flexible. Ensuite, nous avons besoin d'un centre de contenu Justify et également d'un centre de rubriques. Comme vous pouvez le constater, le contenu est placé au centre. Ensuite, sélectionnons le joueur défini en hauteur. La largeur sera de 35 RAM. Ensuite, je vais régler la hauteur à 700 Ram. Changez également non pas 700 mais 70 m. Ensuite, je vais changer le fond. Utilisons à nouveau la fonction de gradient linéaire. La direction de la transition de couleur sera vers la droite. Ensuite, je vais spécifier les couleurs. Le premier sera 313234. Quant à la deuxième couleur, je vais la définir 223031 OK, nous avons donc le joueur. Je vais créer un effet d'ombre. Utilisons Box Shadow. Les valeurs seront nulles. Il indique le décalage horizontal de l'ombre. Dans ce cas, c'est zéro, ce qui signifie qu'il n'y a aucun décalage horizontal. L'ombre se trouvera directement derrière l'élément. Ensuite, je vais passer un Ram. Cette valeur indique le décalage vertical de l'ombre. Il est défini sur un Ram, ce qui signifie que l'ombre sera décalée vers le bas d'une distance égale à la taille de police des éléments multipliée par un. La valeur suivante sera cinq RAM. Cette valeur définit le rayon de flou de l'ombre. Une valeur plus élevée créera un effet d'ombre plus flou. Enfin, il nous faut la couleur. Ce sera de couleur noire avec une opacité de 0,4 OK, nous avons donc ici l'effet d'ombre, que je trouve plutôt sympa Ensuite, je vais arrondir le joueur en utilisant le rayon de bordure. Réglons-le sur le RAM. Ensuite, je vais aligner le contenu à l'aide de Flex Box. Je vais placer les éléments verticalement. Tout d'abord, nous avons besoin de Display flex. Ensuite, nous devons changer la direction que cela va prendre. Colonne suivante, en plaçant jusqu'à trois béliers sur les quatre côtés. OK, c'est tout pour le joueur en ce moment. Ensuite, je vais m' occuper de la partie supérieure du joueur, donc je vais sélectionner la partie supérieure du joueur. Réglons la largeur à 100 %. Ensuite, je vais aligner les éléments à l'aide Flex Book. Nous avons besoin d'un écran. Ensuite, je vais créer un espace entre les éléments flexibles en utilisant le contenu de justification. Espace entre. Enfin, nous devons aligner verticalement les éléments au centre. OK, les éléments sont donc alignés. Ensuite, je vais m' occuper des boutons. Allons-y et sélectionnons Player BTN. Il s'agit d'un nom de classe commun pour chaque bouton du projet. Tout d'abord, définissons la hauteur maximale. Je vais jouer avec 24 Rams, ça va être une question de forme aussi Ensuite, je vais définir la bordure 2.2 comme solide. Et la couleur sera RGBA. Nous avons besoin ici de la couleur blanche, 25053 fois, puis l'opacité sera de 0,1. Ensuite, je vais entourer le bouton d' un rayon de bordure Réglons-le à 50 % Ensuite, je vais changer la couleur de fond. Mettons-le à deux, B à C à E. Ensuite, je vais changer de couleur. Réglons la couleur sur 89b dont nous avons besoin pour créer l'effet d'ombre Comme je l'ai dit au début du tutoriel, nous allons utiliser du CSS, nouveaux effets de morphisme, et nous allons créer à l'aide de box shadow Je vais insérer ici quelques valeurs différentes, puis je vais expliquer à quoi elles servent. Je vais passer ici 0,5 Ram, puis encore 0,5 Ram , puis il nous faut deux Ram, puis -0,1 Ram Ensuite, il nous faut de la couleur. Ce sera du RGB, une couleur noire avec une opacité de 0,5. C'est la première ombre Ensuite, nous avons besoin du second. Il va faire -0,4 Ram. Puis encore -0,4 Ram. Ensuite, nous aurons deux RAM, -0,1 Ram comme couleur Je vais utiliser la couleur blanche. L'opacité va être de 0,2 OK, comme vous pouvez le voir, nous avons ici cet effet d' ombre agréable et cool Permettez-moi de vous expliquer à quoi servent ces valeurs. C'est la première partie de l'ombre. 0,5 RAM est le décalage horizontal de l'ombre. Cela signifie que l'ombre sera décalée vers la droite de 0,5 fois la taille de police des éléments. Ensuite, nous avons à nouveau 0,5. Il s'agit d'un décalage vertical de l'ombre. Cela signifie que l'ombre sera décalée vers le bas de 0,5 fois la taille de police de l' élément Ensuite, nous avons deux RAM, et c'est le rayon de flou de l'ombre Cela indique un effet de flou relativement important -0,1 Ram. Il s'agit d'un rayon étendu de l'ombre. Une valeur négative provoquera une contraction de l'ombre. Et puis il y a la couleur. Nous avons à nouveau la deuxième partie de l'ombre, la première valeur -0,4 Ram Il s'agit d'un décalage horizontal de l'ombre. Il s'agit d'une valeur négative, ce qui signifie que l'ombre sera décalée vers la gauche 0,4 fois la taille de police des éléments. Ensuite, nous avons le décalage vertical de l'ombre. Il s'agit là encore d'une valeur négative. Ensuite, nous avons le rayon de flou, puis le rayon de propagation. Il est réglé sur -0,1 RAM. C'est une valeur négative qui provoque la contraction de l' ombre. Très bien, donc en fin de compte, nous avons un effet sympa et cool. Ce type d'effet en CSS s' appelle CSS New Morphism. Il est implémenté à l'aide d'ombres encadrées et de couleurs d'arrière-plan claires et foncées pour créer l'illusion que des éléments sont légèrement extrudés de l'arrière-plan Enfin, je vais ajouter un pointeur de curseur. C'est bon. Ensuite, je vais créer l'effet de clic pour les boutons. Je vais sélectionner Player PTN, puis les Actives avec la classe Je vais utiliser transform translate Y avec la valeur 0,2 Ram. Une fois que nous aurons cliqué sur le bouton, nous obtiendrons cet effet de clic agréable et cool. Ensuite, je vais m' occuper de ce panneau situé sur le côté supérieur du lecteur Allons-y et sélectionnons Player Top, puis le panneau. Allons-y et augmentons la taille du téléphone. Ce sera 1.3, puis vous changerez de couleur. Je vais utiliser cette couleur ici. 89b. D'accord, ça se trouve à peu près sur le côté supérieur. Passons au corps du joueur. Allons-y et sélectionnons le corps du joueur. Tout d'abord, je vais définir ce qui se trouve dans les hauteurs. La largeur va être de 100 % Quant à la hauteur, je vais définir 250, 5 %. Ensuite, je vais aligner les éléments à l'aide de Flex box. Nous avons besoin de Display Flex. Ensuite, je vais placer le contenu au centre. Nous avons besoin du centre de contenu Justify et du centre des articles d'Align. Bien, au centre, nous avons ici le nom de la chanson et aussi l'artiste de la chanson. Nous allons créer ici la couverture. Je parle de cette partie. Allons-y et sélectionnons la chanson actuelle. Définissons la hauteur maximale. Je vais les régler tous les deux sur 18 RAM. Ensuite, je vais changer de frontière. Il sera solide de 0,5 RAM. Et la couleur sera RGP, une couleur blanche avec une opacité de 0,15. Ensuite, je vais arrondir l'élément Je vais définir le rayon de bordure à 50 % Enfin, nous allons créer le même nouvel effet de morphis en utilisant Box Shadow En fait, je vais prendre l'ombre de la boîte à partir d'ici , puis modifier les valeurs dont nous avons besoin ici. 0,6 Ram, puis quatre Ram, alors nous avons besoin ici de -0,1 Ram comme couleur Ce sera du RGB, une couleur noire avec une opacité de 0,9 Quant à la deuxième partie, il nous faut ici, -0,6 Ram, puis quatre Ensuite, nous avons besoin du point -0,2 En ce qui concerne la couleur, nous avons besoin de la couleur blanche avec une opacité de 0,4 Comme vous pouvez le voir, nous avons ici cet effet d'ombre agréable et cool Ensuite, je vais sélectionner la couverture. Je suis dans la partie intérieure de cet élément. Réglons la hauteur à 100 %. Ensuite, je vais changer la couleur de fond. Ce sera 101112. Et nous devons également avoir un rayon de limite de 50 %. D'accord, après cela, je vais m' occuper des éléments de portée. Allons-y et sélectionnons la couleur avec l'intervalle. Changeons de famille de téléphones. Dans ce cas, je vais utiliser le deuxième téléphone, Delicious Hand, qui sera cursif Ensuite, je vais définir la position des deux éléments d'envergure. Ça va être absolu. Et nous devons également modifier la propriété d'affichage. Ça va être bloqué. Bien, après cela, je vais personnaliser chaque élément de rotation séparément. Allons-y et sélectionnons le premier. Nous avons besoin d'une couverture suivie de l'élément de rotation. Je vais utiliser le sélecteur d'enfants. Nous avons besoin du premier élément de rotation. Changeons la couleur. Ce sera D. Ensuite, je vais changer la taille du téléphone. Passons de 30 à 1,6. Je vais également changer de position. La position supérieure sera de 20 % Quant à la position de gauche, je vais la fixer à 30 %. En fait, nous avons besoin d'une position relative pour l'élément parent car nous devons aligner les éléments en fonction des éléments parents. Réglons la position par rapport à la chanson en cours. Maintenant, comme vous pouvez le constater, l'élément est correctement placé. Allons-y et dupliquons ce code. Changez la sélection de l'enfant, nous en avons besoin de deux, puis la couleur sera blanche. La taille du téléphone sera de 2,5 RAM. Ensuite, nous devons nous positionner avec la valeur de 35 %. Pour ce qui est de la position de gauche, je vais la régler à 20 % . En plus de cela, je vais ajouter avec, elle sera de dix RAM. Enfin, nous avons besoin que la ligne de texture soit au centre. Très bien, la couverture est plutôt jolie. La seule chose que je vais faire est de faire une légère rotation. Cet élément que je vais ajouter ici, transforme la rotation Z avec la valeur -15 degrés. Bien, passons maintenant à la pochette, nous devons parler de la chanson à l'automne. Choisissons une chanson à l'automne. Tout d'abord, définissez la largeur. Ce sera 100 % Ensuite, nous devons aligner les éléments à l'aide de Flex Book. Je vais régler l'affichage sur, puis je vais créer l'espace entre les éléments flexibles, justifier l' espace de contenu entre les deux. Nous devons également aligner les éléments au centre, cela centrera l' élément verticalement. Ensuite, je vais créer un espace bas en utilisant la marge. Les trois derniers. Bien, après cela, je vais sélectionner les détails de la chanson. Changeons le sens de l'alignement des éléments à l'aide de Flex Books. Nous avons besoin de la direction de flexion pour être une colonne. Comme vous pouvez le voir maintenant, les détails de la chanson sont placés verticalement les uns sur les autres. Ensuite, je vais sélectionner le nom de la chanson. Réglons la taille du téléphone à deux. Courez, alors il nous faut de la couleur. Ça va être blanc. Je vais aussi alléger le téléphone. Réglons le poids du téléphone à 300. OK. Ensuite, je vais vous parler de l'artiste de la chanson. Et en fait, dupliquons ce code. Nous avons besoin de votre chanteur. Je vais définir la taille de police sur 1,2 RAM. Alors la couleur sera cette couleur ici. En ce qui concerne le poids de la police, je vais m'en débarrasser. Très bien, parlons-en des détails de la chanson. Ensuite, nous allons prendre soin du cœur, ce téléphone est également là. Allons-y et sélectionnons les informations sur le morceau, puis les éléments. Nous avons besoin. La taille de police doit être de deux M. Ensuite, je vais changer l'arrière-plan. Utilisons un arrière-plan avec un dégradé linéaire. Si nous examinons le projet terminé, vous verrez que nous avons ici un arrière-plan dégradé linéaire. Je vais changer la direction de la couleur. La transition comportera deux droits. Ensuite, nous avons besoin de couleurs. Le premier aura 37 ans. Pour le second, je vais utiliser 62 BC 68. heure actuelle, l'arrière-plan du phontosomicon est modifié, et en fait, nous devons changer la couleur du Pour cela, je vais utiliser les propriétés suivantes. Nous avons besoin d'un clip d'arrière-plan de la clé Web, ce sera du texte. En plus de cela, je vais utiliser la couleur du texte de la clé Web avec une valeur, transparente. OK. Maintenant, l'arrière-plan de l'icône du téléphone est changé et c'est plutôt joli. Après ça, je vais m' occuper du temps. Allons-y et choisissons une heure. Réglons avec 100 % Ensuite, je vais régler la hauteur sur 0,5. La couleur de fond sera 000d. Ensuite, je vais définir le rayon de bordure de 2,5 RAM. De plus, nous devons créer de l'espace en bas en utilisant la marge, en bas, une RAM. Ensuite, nous devons créer des effets d'ombre. Réglons Shadow 2,2 Ram, puis 0,2 Ram, puis encore 0,2 Ram. La couleur sera la couleur blanche RGBA avec l' Opco 0.1. Enfin, changez le pointeur pointé. Bien, comme vous pouvez le voir, la barre de progression est créée. Ensuite, nous devons nous occuper des progrès irréguliers. Nous allons sélectionner cet élément. Tout d'abord, je vais changer de position. Ça va être absolu. Ensuite, nous devons nous positionner par rapport aux éléments parents. Ensuite, nous avons besoin des propriétés du haut et de la gauche, toutes deux égales à zéro. Changez la largeur, elle sera de 30 %. Ensuite, nous avons besoin d' hauteur qui sera de 100 %. Ensuite, nous devons changer l'arrière-plan. Utilisons à nouveau la fonction de gradient linéaire. En fait, nous avons besoin des mêmes valeurs pour cette fonction. Trouvons-les et collons-les ici. Comme vous pouvez le constater, nous avons ici le déroulement de la chanson. La seule chose que je dois faire est de l' arrondir en utilisant le rayon de bordure. Réglons-le à 2.5 run. Très bien, allons-y, faisons des progrès. Ensuite, nous devons prendre soin du temps. Nous allons sélectionner cet élément. Je vais régler la largeur à 100 %. Ensuite, je vais aligner les éléments à l' aide de Flex Books. Nous devons afficher le flex et créer un espace entre les éléments flexibles en utilisant le contenu de justification. Espace entre les deux également. Créons de l'espace en bas en utilisant la marge. En bas, lancez bien, l'heure et la durée de la chanson sont alignées. Ensuite, nous devons prendre soin de ces éléments de poêle. Sélectionnez l'heure, puis le plan. Je vais augmenter la taille du téléphone. Disons 21 points de RAM. Pour ce qui est de la couleur, je vais utiliser le gris. Celui-ci, ici. Comme vous pouvez le constater, l'heure et la durée de la chanson sont personnalisées. Ensuite, je vais m' occuper des commandes, de ces modèles. Allons-y et sélectionnons les commandes. Je vais régler avec 100 % Ensuite, nous devons les aligner à l'aide de Flex Box. Réglons ce jeu pour qu'il soit flexible, créons de l'espace en utilisant la justification de l'espace de contenu entre les deux. Nous devons également aligner les éléments au centre. Comme vous pouvez le constater, les boutons sont alignés. Ensuite, je vais personnaliser le bouton Play Pose. Comme vous pouvez le constater, c'est différent. Allons-y et sélectionnons Play Pose. Je vais régler la hauteur de Witten à cinq images car elle sera légèrement plus grande que les autres boutons Réglons la hauteur à cinq cadres. Ensuite, je vais changer le fond. En fait, nous avons besoin des mêmes valeurs. Passons à la fonction de notation linéaire. Comme vous pouvez le constater, le bouton est joli. Je vais changer la couleur de l'icône. Ça va être blanc. Enfin, nous devons modifier la case Afficher. En fait, je vais récupérer l'ombre de la boîte à partir d'ici. Changeons les valeurs dont nous avons besoin de 0,5 Ram, puis je vais définir cette valeur à deux Ram, 0,1 Ram. L'opacité de la couleur sera de 0,8. Ensuite, nous aurons ici 0,82. Je vais changer cette valeur, elle sera de 0,1 En fait, nous avons besoin ici de l'ombre de la boîte et non de la taille de la boîte. OK, pour le bouton Play, nous avons une ombre différente car le bouton est légèrement plus grand. Ensuite, je vais m'occuper du pied de page du joueur. Allons-y et sélectionnons le pied de page du joueur réglé sur 100 %. Ensuite, je vais aligner les éléments à l'aide de Flex Book Nous devons afficher flex, puis nous devons justifier l'espace de contenu entre les éléments, car nous devons créer de l'espace entre les éléments. Ensuite, je vais régler le centre d' alignement des éléments. Enfin, nous avons besoin de la marge supérieure O. D'accord ? Afin de voir clairement pourquoi nous avons besoin de cette propriété, commentons-la. Comme vous pouvez le constater, nous devons placer le pied de page vers le bas. C'est pourquoi j'utilise ici margin top, auto. Nous avons besoin de cet élément car nous avons aligné le contenu de l'ensemble du lecteur à l'aide de Flexbox. Nous avons besoin d'une marge en haut pour placer le pied de page en bas. OK, après ça, je vais m'occuper des icônes dans le pied. Sélectionnons les éléments, augmentons la taille du téléphone. Il fera 1,8 RAM et changera également de couleur. Utilisons ici cette couleur grise. Les icônes ont l'air bien. Ensuite, je vais m' occuper de ce panneau. Dupliquons ce code, changeons le sélecteur dont nous avons besoin ici pour déplacer les éléments La taille de la police sera de 1,2 e. Pour ce qui est de la couleur, nous avons besoin ici de la même couleur. Très bien, le lecteur est personnalisé, il a l'air plutôt sympa. Maintenant, nous devons faire en sorte que cela fonctionne. Pour cela, passons à la prochaine conférence. 5. Projet - Application musicale Spotify - Partie 3: Bien, une fois que le lecteur est personnalisé et stylisé, nous devons maintenant ajouter du Javascript à notre projet La première chose que je vais faire est de créer un tableau dans lequel nous stockerons les données des chansons. Je vais créer la variable et l'appeler song data. Ce sera un tableau. Je vais insérer ici trois objets différents. Chaque objet inclura le nom de la chanson, l'artiste, ainsi que la source du fichier audio. Je vais insérer un objet dans lequel je vais créer trois propriétés différentes. Le premier sera le nom, je vais ajouter ici Holland. Ensuite, nous aurons Artist, ce sera King Canyon. Ensuite, nous aurons la propriété source dans laquelle je vais insérer la source de l' audiophile dont nous avons besoin ici, Mahu Land, puis C'est en fait le titre de la chanson. Si nous vérifions le dossier de musique, vous verrez que nous avons ici ce nom. Je vais adhérer à l' extension de la chanson. Ce sera le MP 3. Bien, voyons voir le premier objet. Nous en aurons trois. Dupliquons-le deux fois. Le nom de la deuxième chanson sera un peu comme par vente. Alors l'artiste va devenir un partenaire silencieux. Encore une fois, ce sont des chansons étranges. Ensuite, nous avons besoin d'une source, et ce sera le partenaire silencieux de Para ou Psi. Quant à la troisième chanson, ce sera la vérité, c'est le nom. Ensuite, nous aurons l'artiste et ce sera Domini. Enfin, nous avons besoin de l'artiste source Domini. Très bien, alors arrêtons-nous sur les données de nos chansons. Ensuite, je vais créer quelques variables différentes. Nous devons sélectionner de nombreux éléments différents. Je vais créer la première variable, ce sera un conteneur. Allons-y et sélectionnons le conteneur à l'aide méthode de sélection de requête de document. Spécifiez ici le nom de la classe, container. Dans l'ensemble, nous aurons ici 12 variables et éléments différents. Je vais dupliquer cette ligne de code 11 fois. OK, alors allons-y et changeons les noms des variables ainsi que les noms des classes. Le second sera le titre de la chanson. Nous avons besoin du nom de votre classe. Ensuite, nous changerons d'artiste. Nous avons besoin de l'artiste de la chanson. Ensuite, nous aurons la reprise, le nom de la classe, la pochette. Ensuite, la variable suivante sera play pulse bottom. Appelons la variable play pulse BTN. Ensuite, on dit ici le nom de la classe, le poète de théâtre. La variable sera située en bas de la page précédente. Disons que c'est un pré BTN. Et sélectionnez la variable, je veux dire les éléments avec le nom de la classe. Avant BTN, suivant, suivant, PTM. Changeons le nom de la classe. Ensuite, je vais sélectionner Odio. Il a le nom de classe Odio. Ensuite, la variable suivante sera le temps de la chanson. Changeons le C. Nous avons besoin de temps pour son fils. Ensuite, nous aurons la progression de la chanson. Modifiez la progression de la chanson du cours. Ensuite, nous aurons l'artiste de couverture et le nom de la couverture. Changeons le nom de la variable dont nous avons besoin et ce sera une couverture. Ensuite, nous devons sélectionner les éléments d'envergure. Et je vais utiliser here select, let's select. En fait, le nom de couverture est le deuxième élément de span dont nous avons besoin ici deux. Dupliquons ce code et supprimons cette ligne. Changez le nom, je veux dire le nom de la variable, ce sera l'artiste de couverture. Ensuite, nous avons besoin d'une première période. Vérifions l'index du fichier HTM et vérifions-nous que nous sommes corrects ici. Nous avons une couverture, la première est en fait, la première est artiste et ensuite nous avons le nom. Passons au script, au fichier GS. Nous avons le nom de couverture. C'est le second. OK, c'est correct. Allons-y et créons une autre variable, et ce sera l'index des chansons. Faisons la variable effacée en utilisant let keyword song index. Et je vais le mettre à zéro. Bien, après cela, je vais créer une fonction. Cette fonction prendra un index comme argument. Il récupérera les données des chansons à partir du tableau de données des chansons Sur la base de l'index, il mettra à jour divers éléments de l'interface utilisateur avec des informations sur la chanson actuellement chargée. Il définira également l'attribut source de l'élément audio sur le fichier de chanson correspondant. Allons-y et créons une fonction. Je vais l'appeler Load Song. Comme je l'ai dit, nous avons besoin d'un paramètre, appelons-le index. Nous devons mettre à jour l'interface utilisateur. Nous devons définir le nom et artiste de la pochette ainsi que le nom et l'artiste de la chanson. Et nous devons également définir la source du fichier audio. Je vais insérer ici le nom de la couverture, le contenu du texte. Je vais récupérer les données du tableau de données de chansons dont nous avons besoin ici, les données de chansons. Ensuite, nous devons spécifier l'index. Ensuite, nous avons besoin du nom, qui est la première propriété de l'objet. Dupliquons ce code trois fois ici. Artiste de couverture. Je vais changer la propriété du nom en artiste. Ensuite, nous devons définir le nom de la chanson. Enfin, nous avons besoin d'un chanteur. OK, encore une fois, en fait, nous avons besoin d'un artiste. Nous avons défini le nom de la pochette, l'artiste de la reprise, le nom de la chanson et l'artiste de la chanson. Il faut maintenant définir la source du fichier audio. Je vais ajouter ici l'audio RC. Il sera égal au modèle littéral. Nous avons besoin d'un dossier appelé musique. Ensuite, nous devons spécifier ici la source à partir des objets que nous avons ici. Je vais insérer les données des chansons. Ensuite, nous devons spécifier l'index. Ensuite, nous avons besoin d'une propriété RC. Et enfin l'extension du fichier audio P 3. D'accord, c'est tout pour cette fonction, nous devons appeler cette fonction une fois que la fenêtre sera chargée. Je vais attacher un écouteur d'événements à l'objet window avec l'événement appelé load Insérons ici une fonction de rappel. Appelez ensuite la fonction load song comme argument, je vais interférer. Index des chansons, que nous avons créé ici. Bien, encore une fois, cette fonction prend un index comme argument. Récupère les données des chansons dans le tableau de données des chansons en fonction de cet index Et met à jour divers éléments de l'interface utilisateur avec des informations sur la chanson actuellement chargée. Les informations, je veux dire le nom de la chanson, l'artiste de la chanson, et aussi la source du fichier audio. Bien, après cela, je vais créer une autre fonction pour jouer la chanson. Allons-y, créons une variable et appelons-la play song. Parce que j'ai dit que ce serait une fonction. Cette fonction permet de contrôler la lecture de l'élément audio. Il ajoutera une classe à l'élément conteneur pour indiquer que la chanson est jouée. En outre, il changera l'icône du bouton Play Post et lancera la lecture de l'audio. Nous avons besoin ici de la liste des classes de conteneurs. Je vais ajouter ici le nom de classe pose. Ensuite, nous devons accéder au jeu sur cette icône ici. C'est un enfant des éléments du bouton. Comme vous pouvez le voir, nous avons ici des éléments de bouton puis à l'intérieur de l'élément de bouton, vous pouvez voir l'élément. Nous devons accéder à cet élément. Par conséquent, nous avons besoin de Play Button First Element Child. Ensuite, nous devons changer le nom de la classe. Ce sera un article de FA solide. Enfin, pour jouer cette chanson, nous devons utiliser l'une des fonctions intégrées à Javascript appelée play. Nous avons à nouveau besoin de la lecture audio. Cette fonction, je veux dire, joue la fonction Song contrôle la lecture de l'élément audio. Il ajoute une classe à l'élément conteneur pour indiquer que la chanson est jouée. Et cela change également l'icône du téléphone du bouton Play Pose. Enfin, il joue la chanson. Bien, de la même manière que nous devons gérer la chanson, je vais dupliquer ce code. Nous avons besoin de la fonction Pose Song. Ensuite, je vais changer la méthode d en remove. Nous devons également changer l'atome du téléphone. Dans ce cas, il faut jouer au lieu de poser. Enfin, nous devons publier l' audio en utilisant la méthode de pose. Bien, pour que ces fonctions fonctionnent, nous devons ajouter un écouteur d'événements au bouton de lecture Et nous devons appeler ces deux fonctions. Je vais sélectionner Play Post BTN avec ajout d'un écouteur d'événements. Et nous avions précisé ici le clic sur l'événement. Ensuite, nous avons besoin d'une fonction de rappel qui sera exécutée une fois que nous aurons cliqué sur le bouton. Une fois que nous avons cliqué sur le bouton, nous devons vérifier si le conteneur a la classe de pose. Si c'est le cas, cela signifie que la chanson est en cours de lecture. Nous devons appeler la fonction ****. Sinon, nous devons appeler play song pour commencer à jouer la chanson. Très bien, nous avons besoin d'une instruction if dans laquelle nous devons vérifier si le conteneur contient une classe. Si c'est le cas, nous devons poser la chanson. Nous devons appeler cette fonction. Si cette condition est fausse, alors nous avons besoin de l'instruction L et nous devons chanter la fonction. Très bien, allons-y et vérifions les résultats. Si nous cliquons sur le bouton Play Put, l'icône sera modifiée, mais comme vous pouvez l'entendre, la chanson ne joue pas. En fait, vérifions la console. Nous avons ici une erreur indiquant que l'élément n' a aucune source prise en charge. Script JS 49 ligne. Nous avons un problème avec la source. En fait, la source semble correcte. Nous avons le problème ici. Eh bien, comme vous le voyez, nous avons ici l'extension MP three dans la propriété source. Et donc, nous n'avons plus besoin ici cette extension car elle va doubler. Débarrassons-nous de ça. Maintenant, je pense que la chanson va jouer. Cliquons sur le bouton. Comme vous pouvez le voir, la chanson est jouée et l'icône est également modifiée. Très bien, donc tout fonctionne bien jusqu'à présent. Après cela, je vais te retirer de la couverture. Je vais le faire pivoter pendant que la musique joue. Je vais ajouter ici la liste des cours de couverture. Je vais ajouter un nouveau cours à la couverture. Appelons cela une rotation. Nous devons supprimer cette classe. Une fois que nous avons posé la chanson, nous devons suivre la même ligne avec la méthode de suppression. Ensuite, je vais accéder au fichier CSS stylisé et trouver une couverture ici Je vais créer une animation. Je vais utiliser des cadres clés CSS avec le nom cover rotate. Je vais définir la rotation de l'élément à 0 %. Je vais mettre la rotation de transformation à zéro. Ensuite, à 100 %, nous devons transformer la rotation Z avec une valeur de 360 degrés. Ensuite, je vais sélectionner la rotation de la classe, que nous avons ajoutée à la couverture. Je vais définir l'animation. Le nom va être « rotation de la couverture ». Ensuite, nous avons besoin de la durée. Cela va prendre 10 secondes car l'animation sera linéaire et nous devons la jouer à l'infini OK, jouons la chanson. Comme vous pouvez le voir, la pochette tourne une fois que nous avons posé la chanson, puis elle s'arrête Très bien, donc tout fonctionne parfaitement. Ensuite, je vais m'occuper du précédent et continuer. Boutons suivants, il faut les faire fonctionner. Je vais commencer par la chanson précédente. Je vais créer une nouvelle fonction. Disons que c'est avant l'écoute d'une chanson. Nous devons diminuer la valeur de l'indice des chansons. Pour cela, je vais utiliser l' opérateur de décrémentation moins moins ensuite Si l'indice du morceau est inférieur à zéro. Si c'est le cas, nous devons définir l'index des chansons sur l'index de la dernière chanson dans le tableau de données des chansons. Nous avons besoin de l'instruction here if dans laquelle je vais vérifier si l'index des chansons est inférieur à zéro. Si c'est le cas, nous devons définir l'index des chansons sur les données des chansons sur la longueur moins un. Si l'indice des chansons est inférieur à zéro, nous définissons l'index des chansons sur l'index de la dernière chanson dans le tableau de données des chansons. Ensuite, nous devons charger la fonction de chanson avec l'index de la chanson. Ensuite, nous devons également jouer la fonction chanson. Très bien, cette fonction est prête. Ensuite, nous devons nous occuper de la chanson suivante, BTN. Je veux dire, nous devons créer une fonction similaire pour le bouton de la chanson suivante. Dupliquons ce code, changeons Le nom de la fonction sera le prochain morceau à écouter. Au lieu d'un opérateur de décrémentation, nous avons besoin d'un opérateur d'incrémentation. Ensuite, nous devons modifier la condition de l'instruction if. Parce que nous devons vérifier si l'indice des chansons est supérieur à l'indice de la dernière chanson dans le tableau de données des chansons. Si c'est le cas, nous devons mettre l'index des chansons à zéro. Je vais changer la condition ici. Nous avons besoin que l'indice des chansons soit supérieur aux données relatives aux chansons par rapport à la longueur moins un. Si c'est vrai, alors nous devons mettre l'index des chansons à zéro. Ensuite, nous avons besoin de ces deux fonctions pour les faire fonctionner. Nous devons les appeler une fois que nous avons cliqué sur les boutons dont nous avons besoin ici pour sélectionner un pré-BTN avec écouteur d'événements, l'événement sera Et nous avons également besoin ici d'une fonction livre. Mais au lieu de la fonction book, je vais insérer le nom de la fonction elle-même. Jeu de chansons. Dupliquons ce code et passons du pré au suivant. Ensuite, nous avons besoin de Song Play. Très bien, les deux boutons devraient maintenant fonctionner. Jouons la chanson. Cliquez ensuite sur le bouton précédent. Comme vous pouvez le voir, la musique passe à la chanson précédente. Les deux boutons fonctionnent parfaitement. C'est bon. Une fois que les commandes fonctionnent correctement. Ensuite, nous devons nous occuper de la mise à jour de l'heure de la chanson. Je veux dire, nous devons mettre à jour l'heure actuelle, la durée de la musique. Nous devons également mettre à jour la barre de progression, etc. Bien, la prochaine chose que je vais faire est d'ajouter un écouteur d'événements à l'audio L'événement sera une mise à jour horaire. Cet événement se déclenche en continu lorsque la position de lecture audio change. Ajoutons ici une fonction de rappel. Nous devons insérer ici un objet d'événement. La prochaine chose que je vais faire est d' extraire l' heure et la durée actuelles. Allons-y, créons une variable et appelons-la « current time ». Elle doit être égale à l'heure actuelle cible. Nous saisissons l' heure actuelle à partir de l'objet d'événement, et l'objet d'événement contient des informations sur l'événement De la même manière, nous devons saisir la durée. Dupliquons ce code. La deuxième variable sera la durée. Nous devons sélectionner la durée. Current time récupère la position de lecture actuelle de l'élément audio et la valeur en secondes La durée permet de récupérer la durée totale du fichier audio, toujours en secondes. C'est bon. Ensuite, nous devons calculer l'ampleur de la progression. Je vais créer une nouvelle variable, appelons-la « current time ». Avec elle, elle doit être égale à l' heure actuelle divisée par la durée. Et nous devons multiplier cette valeur par 100. OK, cette ligne de code calcule le pourcentage de la durée totale écoulée en fonction de la position de lecture actuelle Nous devons maintenant mettre à jour la largeur de la barre de progression. Nous avons besoin de la progression de la chanson et de la largeur du style. Ensuite, je vais utiliser des modèles littéraux. Insérons ici, l'heure actuelle avec. Nous devons respecter le signe du pourcentage. Bien, avec ces deux lignes, nous mettons à jour l'interface utilisateur. Nous actualisons la largeur de l'élément de progression du morceau pour refléter la position de lecture actuelle. Cette ligne indique dynamiquement la largeur de l'élément de la barre de progression en fonction du pourcentage du fichier audio qui a été lu jusqu'à ce que le son soit lu. Cette largeur est continuellement mise à jour, fournissant une indication visuelle de la progression de la lecture audio. heure actuelle, la largeur de la progression est fixée à 30 %. Allons-y et ramenons-la à zéro. Ensuite, je vais jouer la chanson. Comme vous pouvez le voir, dans la barre de progression dans laquelle je me trouve, la largeur de la barre de progression augmente au fur et à mesure de la place d'Odio Très bien, donc tout fonctionne bien. Nous devons maintenant mettre à jour l'heure actuelle de la chanson ainsi que la vidéo. Pas la vidéo mais la durée du son. Allons-y et créons de nouvelles variables. Nous avons besoin d'une chanson à l'heure actuelle. Je vais sélectionner la méthode use query selector de ce Panelementlet use query selector Sélectionnez l'heure suivie de ce panneau, nous devons utiliser le sélecteur ampchild Je vais sélectionner le premier élément de rotation. Alors dupliquons ce code. La deuxième variable sera une certaine durée. Je vais changer le sélecteur ce sera l'enfant 2 Bien, après cela, nous devons attacher un nouvel écouteur d' événements à audio dont nous avons besoin, ici, un écouteur d'événements audio Les données de l'événement vont être chargées. Adhérons à une fonction covic. événements écoute l'événement de chargement des données, qui indique que le navigateur a chargé données odio pour l' Ensuite, je vais créer une variable, et ce sera la durée de l'odio Elle doit être égale à la durée de l'odeur. Nous extrayons maintenant la durée de l'odio. Cette ligne de code récupère la durée totale du fichier audio chargé dans l'élément Odio, et elle nous donne la valeur en secondes OK, ensuite je vais créer une autre variable, et le nombre total de minutes sera atteint. Nous devons calculer le total des minutes et des secondes. Il doit être égal au plancher mathématique. Je vais insérer ici la durée d'Odio divisée par 60. Cela duplique cette ligne de code. Nous avons besoin d'un total de secondes. Dans ce cas, nous avons besoin d'un module de durée audio 60. C'est bon. La première ligne calcule le nombre total de minutes en divisant la durée totale par 60 et en arrondissant au nombre entier le plus proche C'est pourquoi nous avons utilisé cet étage ici. Quant à la deuxième ligne, elle calcule les secondes restantes et en divisant la durée totale par 60 arrondissant au nombre entier inférieur le plus proche Bien, après cela, nous devons formater les secondes et utiliser l' instruction if dans laquelle nous devons vérifier si le total des secondes est inférieur à dix, puis nous devons ajouter zéro devant le chiffre dont nous avons besoin ici, le total des secondes. Ensuite, je vais utiliser le modèle littéral, nous avons besoin de zéro, puis je vais insérer ici le total des secondes. Encore une fois, nous vérifions si le total des secondes est inférieur à dix. Si c'est vrai, nous ajoutons un zéro aux secondes pour nous assurer que le format d' affichage de l'heure est exprimé en minutes et en secondes. Bien, enfin, nous devons modifier le contenu du texte de la durée de la chanson dont nous avons besoin ici la durée de la chanson suivie du contenu du texte. Je vais insérer ici les littéraux du modèle suivis total des minutes et du total des secondes. Nous avons besoin d'un total de minutes. En fait, nous avons besoin de quelques minutes. Ensuite, nous avons besoin d'une colonne dont nous avons deux en secondes au total. Bien, comme vous pouvez le voir, nous avons ici la durée de la chanson. Si nous passons à d'autres chansons, durée de la chanson sera mise à jour en conséquence. Très bien, tout fonctionne bien. Ensuite, nous devons prendre soin de l'heure actuelle de la chanson. Je vais créer de nouvelles variables. Le premier sera consacré aux minutes actuelles. Il doit être égal à l'heure actuelle du plancher buccal divisée par 16. Dupliquons ce code. Nous avons besoin des secondes actuelles. Nous devons modifier la division par module. La première ligne calcule le nombre total de minutes écoulées en divisant le temps de lecture actuel par le temps de lecture actuel 60 et en arrondissant au Quant à la deuxième ligne, elle calcule les secondes restantes en divisant le temps de lecture actuel par 60 et en le temps de lecture actuel par arrondissant au nombre entier inférieur le plus proche Cette opération garantit que la variable des secondes actuelle représente la deuxième partie du temps. Maintenant, nous devons vérifier à nouveau si secondes actuelles sont inférieures à dix, nous devons faire la même chose qu'ici. Nous devons préfixer zéro au chiffre dont nous avons besoin pour les secondes actuelles égales au zéro littéral du modèle, puis encore une fois, pour les secondes actuelles OK, maintenant nous devons formater les secondes. Je veux dire, nous devons faire la même chose qu'ici. Ajoutons ici la chanson, l'heure actuelle, le contenu du texte dont nous avons besoin en minutes actuelles, deux points, les secondes actuelles. OK, encore une fois, nous mettons à jour l'interface utilisateur. Nous mettons à jour le contenu du texte de l'élément d' heure actuelle avec les minutes et secondes actuelles calculées au format minutes et secondes. Cette ligne indique de manière dynamique le contenu textuel d'un élément pour afficher le temps de lecture actuel du fichier audio en minutes et secondes. Très bien, allons-y et jouons la chanson. Comme vous pouvez le constater, l' heure actuelle n'est pas mise à jour. Nous avons un problème quelque part ici. Vérifie le code. En fait, ce code, je veux dire le code des minutes et secondes actuelles devrait être en dehors de cet événement. Nous allons placer le code ici, puis vérifier les résultats. Comme vous pouvez le constater, l'heure actuelle est parfaitement actualisée pour toutes les chansons. Très bien, nous devons maintenant passer à la dernière partie de notre projet. Je veux dire, nous devons mettre à jour la barre de progression une fois que nous avons cliqué n'importe où ici, comme dans le projet terminé. Si nous cliquons n'importe où sur la barre de progression, la musique sera rebobinée en conséquence Très bien, nous devons donc rechercher une position de lecture spécifique. Je vais ajouter un écouteur d'événements à l'heure de la chanson. Avec un événement de clic, nous avons besoin d'un événement de clic d'écouteur. Et avec une fonction de rappel, je vais insérer ici un objet d'événement Bien, maintenant nous devons définir la progression avec, créons une nouvelle variable. Il va y avoir du progrès avec. Il doit être égal au client Song Time. Avec cette ligne de code, nous récupérons la largeur de l'élément song time, qui représente la largeur totale de la barre de progression. Ensuite, nous devons créer une autre variable, qui sera col offset X. Je vais la rendre égale à offset X. Cette ligne indique la distance horizontale entre le bord gauche de l'élément de temps de chanson et le point où l'utilisateur a cliqué, indiquant ainsi X. Je vais la rendre égale à offset X. Cette ligne indique la distance horizontale entre le bord gauche de l'élément de temps de chanson et le point où l'utilisateur a cliqué, la position que l'utilisateur souhaite Encore une fois, cette ligne de code permet de récupérer la distance horizontale entre le bord gauche de l'élément Song Time le point où l'utilisateur a cliqué Bien, après cela, je vais définir la durée de la chanson. Créons une autre variable. En fait, nous avons besoin d'espace ici. La nouvelle variable sera la durée de la chanson. Elle doit être égale à la durée de l'odeur. Ensuite, nous devons définir l' heure actuelle de l'Odio Je vais ajouter ici l'heure actuelle. Ce qui doit être égal au décalage de clic x divisé par la largeur de progression. Nous devons multiplier cette valeur par la durée du soleil. Bien, cette ligne de code calcule la position de lecture souhaitée dans le fichier audio en fonction du rapport entre la position définie sur laquelle vous avez cliqué dans la largeur de la barre de progression et la largeur totale de la barre de progression Ensuite, nous le multiplions par la durée totale de l'audio. Cela définira la propriété temporelle actuelle de l'élément audio en recherchant efficacement la position de lecture souhaitée. Nous devons maintenant appeler la fonction Play Song. Il lancera la lecture du son à partir de la position de lecture nouvellement définie. Très bien, allons-y et vérifions le résultat. Si je clique, rien ne se passera car nous avons une erreur. Vérifie la console. Impossible de définir l'heure actuelle du script JS 1204124 (heure actuelle) En fait, tout semble correct. Voyons les autres lignes que nous avons ici. De quoi avons-nous besoin ici ? Des points de l'ensemble X, c'est donc un TypoLei'm. Je suis désolée pour ça. Maintenant, je pense que tout est correct. Nous allons vérifier les résultats. OK, donc tout fonctionne parfaitement. C'est bon. Nous avons presque terminé notre projet. La seule chose que je vais faire est gérer la fin de la lecture audio. Une fois la chanson terminée , nous devons passer à la chanson suivante. Je vais ajouter ici un écouteur emo à l'audio. L'événement va prendre fin. Une fois la musique terminée, nous devons appeler la fonction de lecture de la chanson suivante. Insérons ici la prochaine chanson à jouer. OK, lorsque l'événement terminé se produit, nous déclenchons la fonction de lecture de la chanson suivante, qui chargera et jouera la chanson suivante de la playlist. Nous allons vérifier les résultats. Je vais rebobiner la chanson ici. Attendons la fin. Comme vous pouvez le voir, lorsque la chanson s'est terminée, elle est passée à la chanson suivante. Très bien, donc tout fonctionne bien. Et en fait, nous pouvons dire que le projet est terminé. J'espère que ce projet vous plaira et que vous apprendrez de nouvelles choses. Il est maintenant temps de passer à la création de notre prochain projet. Passons à la prochaine conférence. 6. Projet 1 - Carte de produit CSS: Très bien, il est donc temps de commencer à construire le projet, qui sera une carte produit bien conçue et cool. Le projet sera créé sur la base du HTML et du CSS. Ce sera simple, mais vous apprendrez à concevoir la fiche produit de manière moderne et cool. La carte est placée au centre de la page , sur un joli fond. Sur le côté gauche de la carte, nous avons une image du casque. Quant au côté droit, il comprend quelques éléments différents tels que des titres, des paragraphes, le prix du produit et le bouton pour l'acheter Bien, asseyons-nous sur le projet. Allons-y et commençons à le créer. J'ai créé un nouveau dossier dans lequel nous avons un dossier d'images. Allons-y et ouvrons le dossier dans le code VS. Ensuite, je vais créer nos fichiers de travail pour le HTML qui sera du HTML d'index et pour le style CSS Ss. Ensuite, je vais ouvrir le fichier d' index HM et créer la structure HD de base. Changeons le titre. Ce sera une fiche produit, puis je vais lier le fichier CSS. OK, allons-y et ouvrons le projet et le navigateur. Ensuite, je vais placer le navigateur et l'éditeur côte à côte, comme ça, afin de rendre notre processus de travail plus simple et plus pratique. Bien, après cela, je vais aller sur le site Web de Google Phones, car nous allons utiliser l'un des téléphones Google tout au long du projet. Visitons le site Web, puis recherchons Google Phone appelé, n'est-ce pas ? Je vais sélectionner quelques styles différents, des téléphones légers aux téléphones gras. Ensuite, je vais copier le lien et le coller dans l'élément principal. Très bien, nous sommes prêts à commencer à écrire le balisage HTML. Je vais ouvrir la balise div, qui sera le conteneur à l'intérieur de cet élément. Je vais ouvrir un autre dip qui servira de fond. Nous avons besoin de deux éléments à cet égard. Ensuite, je vais ouvrir la carte dans laquelle nous aurons un emballage d'arrière-plan Et puis, à l'intérieur de l'emballage, nous avons besoin d'un autre plongeon qui sera le fond de la carte Après cela, je vais ouvrir le titre. Éléments avec le titre de la carte de classe. Jouons ici. Battements. Ensuite, nous avons besoin de développement, qui sera l'automobile. Je vais maintenant ouvrir le tag image. Allons-y et sélectionnons Image dans le dossier des images. Ce sera un casque. C'est bon. Ensuite, je suis le tag qui sera l'ombre. Première ombre. Nous avons besoin de trois ombres. Changeons les noms des classes. Ensuite, je vais insérer ici une autre balise profonde. Ce sera le contenu de la carte. Nous aurons ici H trois éléments de titre avec la classe small header. Ce sont des bits d'insertion. Ensuite, nous avons besoin de H, une balise de titre avec l'en-tête principal de la classe. Nous avons besoin d'écouteurs. Ensuite, je vais ouvrir la balise H five heading avec le sous-titre de classe Je vais insérer ici un aperçu du produit. Ensuite, nous avons besoin du paragraphe avec un texte factice. Ce sera une vue d'ensemble du produit. Vient ensuite la partie prix. Ouvrons H une balise d' en-tête avec le contexte de prix dont nous avons besoin ici, 99$. Ensuite, je vais ouvrir l' élément H à trois titres avec la moyenne des prix du nom de classe Insérons ici la même valeur. Enfin, nous avons besoin du bouton avec la classe appelée BTN. Le type sera le plus bas. Ensuite, je vais procéder à un achat interné. Très bien, en fait, avec le balisage HTML, c'est terminé. Nous pouvons maintenant passer sur ser pour écrire le CSS. Je vais sélectionner chaque élément à l'aide d'un astérisque. Ensuite, réglez la marge et le rembourrage à zéro. Ensuite, je vais définir la taille de la boîte sur la zone de bordure. Nous avons aussi besoin d'une famille amusante pour être franche et honnête. Ensuite, je vais sélectionner l'élément HTML et définir la taille de la police à 62,5 %, car nous allons utiliser M comme unité de mesure Un m doit être égal à dix pixels, c'est pourquoi nous avons défini la taille de police. Ensuite, nous avons besoin d'un conteneur, la largeur sera de 100 %. Ensuite, nous avons besoin d'une hauteur de 100 points de vue. Ensuite, je vais changer la couleur de fond. Utilisons ici 57567. Ensuite, je vais sélectionner l'arrière-plan, définir sa largeur sur 180 RAM. Dans ce cas, la hauteur sera la même. Ensuite, je vais régler rayon de la bordure à 50 %, ce sera le cercle. Changez également la couleur de fond. Je vais utiliser le 334. Ensuite, je vais changer de position. Faisons en sorte que ce soit absolu. Et nous avons également besoin de la position relative de l'élément parent. Ici, nous avons le fond, le cercle. Corrigeons, allons-y sélectionnons le premier tour et réglons la position gauche à -45 %. Quant aux deux positions, elles seront -10 %. Ensuite, je vais sélectionner l'arrière-plan deux, régler la position droite à -15 %. Quant aux deux positions, elles seront de 35 %. D'accord, maintenant l'arrière-plan est maintenant l'arrière-plan Cachons les pièces situées à l'extérieur du conteneur. Maintenant, les arrière-plans sont enfin prêts. Ensuite, je vais sélectionner une voiture. Définissons la largeur et la hauteur. La largeur sera de 120 RAM. Quant à la hauteur, je vais la régler à 70 RAM. Changez également la couleur de fond. Je vais utiliser le 5566, nous devons afficher la carte Réglons la position sur absolue, puis la position supérieure sera de 50 %, la position de gauche sera de 50 %. Ensuite, pour centrer l'élément, nous devons le transformer, le traduire avec des valeurs de -50 % et encore une fois -50 %. Voici la voiture Réglons le rayon de la bordure sur un Ram afin d'arrondir les coins. Ensuite, nous avons besoin de box shadow avec les valeurs 01 Ram, six Ram, et la couleur RGBA dans la couleur noire, avec une opacité inférieure, 0,4. Nous avons ici un bel effet d'ombre Bien, après cela, je vais d' abord m'occuper de l'arrière-plan de la carte, nous avons besoin d'un emballage Réglons la largeur à 100 %. La hauteur sera 100 %. Ensuite, je vais sélectionner l'arrière-plan de la carte lui-même Réglons la largeur à 100 %. Ensuite, la hauteur sera de 200 %. En ce qui concerne la couleur de fond, je vais utiliser l'appelant 52555. Bien, ensuite nous avons besoin que la position soit absolue. Ensuite, nous avons besoin de la position relative de l'élément parent. Réglons la position gauche. Ce sera -55 % Quant à la première position, je vais la régler à -50 % Ensuite, nous devons transformer la fonction de rotation Z. Faisons pivoter l' élément de -40 degrés. De plus, je vais soutenir le rayon jusqu'à zéro, 50 %, puis encore 50 % et zéro. OK, nous avons ici le contexte. Nous devons utiliser Overflow hidden afin de masquer la partie de l'arrière-plan Très bien, le fond est donc prêt. Ensuite, je vais m' occuper de l'en-tête de la carte. Réglons la position sur absolue. Ensuite, la position supérieure sera de 2 %. Quant à la position de gauche, je vais la fixer à 50 % Et encore une fois, nous devons transformer, traduire x afin de centrer l'élément. Ensuite, je vais régler la taille du téléphone à 25 images. Ici, nous avons le titre. Ensuite, je vais créer un espace entre les lettres. Allons 3025 Fram. Nous devons également transformer le texte en majuscules , puis changer la couleur. Ce sera 777970. Nous avons ici le titre, qui semble bien meilleur. Ensuite, je vais diminuer l'opacité. Allons 32.3 Très bien, le titre est plutôt joli Ensuite, je vais m' occuper de l'image du casque. Réglons sa position sur Absolute. Ensuite, les deux positions seront de -5 %. Quant à la position de gauche, je vais la régler -2 % Comme vous pouvez le voir, l'image est Ensuite, je vais m' occuper des effets d'ombre. Nous allons sélectionner la première ombre. Je vais régler sa largeur à 20 RAM. Ensuite, la hauteur sera de 60 %. Ensuite, je vais régler la position sur absolue. La position supérieure sera de 15 %. Quant à la position de gauche, je vais régler à 30 % Ensuite, nous avons besoin que le fond soit un dégradé linéaire. Je vais prendre la bonne direction. Et puis définissons la première couleur comme transparente. La prochaine sera de couleur noire RGBA avec une opacité de 0,7 Quant à la troisième couleur, elle sera également transparente Nous avons ici les éléments. Ensuite, je vais utiliser le rayon de bordure. Ça va être zéro. 50 %, 50 % et zéro. Ensuite, je vais utiliser le filtre avec la fonction de flou. La valeur sera de trois RAM. Je vais également diminuer l'opacité. Mettons-le à 2,5, ici nous avons un bel effet d'ombre. Ajoutons ici la transformation rotative y avec la valeur 45 degrés. OK, alors maintenant nous avons un schéma de résultat. Passons à autre chose et copions ce code. Pour la deuxième ombre, nous avons besoin d'une largeur de 25 Ram. Ensuite, je vais également régler la hauteur à 25 RAM. Changeons la position dont nous avons besoin ici. bas sera de -2 % Quant à la position de gauche, il faut que le rayon de la bordure soit de 50 %. Débarrassez-vous également de la fonction de rotation. Ici, Débarrassez-vous également de la fonction de rotation nous avons la deuxième ombre, maintenant nous devons vous prendre de la troisième Réglons avec 255 Ram, et la hauteur sera de 15 Ram. Ensuite, nous avons besoin de la couleur de fond. Reprenons cette fonction à partir de là, je vais changer l'opacité Ensuite, nous devons transformer avec la fonction de rotation x. Nous devons faire pivoter l'élément selon la direction x, et la valeur sera de 70 degrés. Et nous avons également besoin d'une fonction de rotation avec une valeur de -30 degrés. Ensuite, je vais déplacer l'élément avec la valeur cinq images Ensuite, nous avons besoin d' un filtre avec la fonction Blar. La valeur sera de cinq images. Bien, passons maintenant aux ombres. Je vais m'occuper du contenu de la carte. Allons-y et définissons la position sur absolue. Ensuite, la position supérieure sera zéro, position droite sera également zéro. Ensuite, nous devons régler la largeur à 50 % et la hauteur à 100 %. Utilisons le rembourrage et réglons-le sur cinq RAM OK, après cela, je vais m' occuper du petit titre, fixer la marge maximale à six RAM. Ensuite, nous devons avoir une taille de téléphone de cinq. Modifiez également la transformation du texte. Mettons-le en majuscules. Ensuite, nous devons utiliser une fonction de gradient linéaire en arrière-plan . La direction va être à droite. Utilisons la première couleur, 9954. Ensuite, le suivant sera 4622 avec une valeur de 13 %. Ensuite, nous avons besoin d'un clip d'arrière-plan Webket avec des textes de valeur. Nous avons besoin d'une couleur de texte Web avec une valeur transparente. Comme vous pouvez le voir, nous avons ici du texte avec un effet de dégradé linéaire. Ensuite, utilisons un effet d'ombre avec des valeurs 0,5 Ram, un Ram, et la couleur sera RGBA, couleur noire avec une opacité 0,2 Très bien, c'est tout, à propos du premier titre Ensuite, je vais prendre ici le titre principal, définir la taille de police. Il y aura sept Ram. Ensuite, nous avons besoin que le texte soit en majuscules. Changez également la couleur , utilisons la couleur blanche. Ensuite, je vais utiliser un effet de planification avec les valeurs de la propriété précédente de la navette technique. Ensuite, je vais définir la marge à 0,05 Ram et trois Ram. Nous avons ici la deuxième rubrique. Ensuite, je vais m' occuper du sous-titre, je veux dire, de l'aperçu du produit Récupérons ce code à partir d' ici et apportons quelques modifications. 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. Débarrassons-nous de la marche. Le titre a l'air sympa. Ensuite, je vais m' occuper du paragraphe. Allons-y et réglons la taille du téléphone sur 1,4 RAM. Ensuite, la couleur sera A. Modifiez également la hauteur de la ligne, définissons-la sur 1,2. Ensuite, nous devons être 300. Réglez le poids sur deux, puis nous devons avoir un Ram, 05 Ram, puis trois Ram. Le paragraphe a l'air sympa, passons à autre chose. Et dans le contexte des prix, définissez la position sur absolu. Ensuite, la position inférieure sera de cinq Fram. Ensuite, nous avons besoin d'une taille de police de 12 RAM. Ensuite, je vais changer de couleur. Utilisons la couleur 77797 et diminuons l'opacité. Réglons le paramètre 2.5 Ici nous avons le contexte du prix. Ensuite, je vais sélectionner le prix lui-même. Réglons la position en valeur absolue. Ensuite, la position de Boson sera de 8 m. Ensuite, nous aurons besoin de la position de gauche, qui sera de 17 RAM Changez la taille du téléphone, réglons-le sur quatre RAM. Changez la couleur, rendez-la blanche. Nous avons également besoin d'un effet d'ombre. Réglons-le sur 0,1 RAM, 2 m, et le RGBA avec une opacité de 0,2 Ensuite, je m' occupe des pots Réglons la position sur absolue. La position la plus basse sera alors de 11 Rams. Pour la bonne position, je vais le régler sur dix RAM. Ensuite, c' est la largeur, qui sera de 20 RAM. Réglons également la hauteur à cinq RAM. Ici, nous avons le bas bien placé. Ensuite, je vais m' occuper du rayon frontalier. Réglons-le à 2,7 RAM. Changez également la bordure, n'en faites aucune. Ensuite, je vais régler l' arrière-plan sur un dégradé linéaire. Je vais récupérer cette valeur à partir d'ici. Nous avons ici un bel effet. Débarrassons-nous de cette valeur à partir d'ici. Ensuite, je vais régler la taille du téléphone à 1,6 Rams. Mettez le texte en majuscules, changez de couleur, il sera blanc Nous avons besoin d'un peu d'espace entre le bouton en forme de lettres, c'est plutôt joli. Ensuite, nous avons besoin d'un effet d'ombre. Réglez l'ombre de la boîte sur 01 Ram, trois Ram. Et la couleur noire RGBA. Changez également le curseur, faites-en un pointeur. D'accord. La dernière chose que je vais faire est rendre le bouton cliquable Nous avons besoin d'un cours de chien actif. Ensuite, nous devons transformer, traduire Y. Mettons-lui deux -0,2 Une fois que nous avons cliqué sur le bouton, il se déplacera bien. Très bien, asseyons-nous sur ce projet. J'espère que cela vous a plu. Passons la réponse à la construction de la suivante. 7. Project 2 - Menu de navigation CSS avec Hover: Très bien, il est donc temps de passer à autre chose et de créer notre prochain projet. Dans cette section, nous allons créer un menu de navigation CSS avec un effet de survol agréable et cool Comme vous pouvez le constater, nous avons ici quelques éléments de navigation différents. Une fois que nous avons survolé les objets , nous obtiendrons cet effet sympa et cool Chaque élément de navigation a une couleur d'arrière-plan différente et, de plus, l'élément apparaît bien en arrière-plan. OK, tout tourne autour du projet. Il est maintenant temps de le construire. J'ai un nouveau dossier sur le bureau. Allons-y et ouvrons-le dans le code VS. Allons-y et créons nos fichiers de travail pour HTML et CSS. Nous n'aurons que deux fichiers. Ouvrons le fichier HTML indexé , puis créons le document HTML de base Allons-y et changeons le titre. Ce sera un menu CSS. Ensuite, je vais lier le fichier CSS et spécifier ici le nom du fichier. OK, allons-y et ouvrons le projet et le navigateur. Ensuite, placez le navigateur et l'éditeur côte à côte. Donc, tout au long du projet, je vais utiliser Google Phones. Pour cela, nous devons visiter le site Web de Google Phones. Cherchons le téléphone Google appelé Writs. Je vais sélectionner le style. Ensuite, je vais sélectionner un autre téléphone appelé Joséphine Slap Passons donc à des styles différents. Copiez le lien à partir d'ici et collez-le dans l'élément principal. D'accord, d'accord, nous sommes donc prêts à commencer à construire le projet. Je vais créer le HTM et le baliser. Nous avons besoin d'un conteneur dans lequel je vais utiliser la balise div avec la navigation de classe. Il sera composé de quelques liens différents. La première sera d' insérer ici un attribut appelé texte de données. Je vais placer votre maison. Dupliquons le lien et modifions le contenu ainsi que les attributs du texte de données dont nous avons besoin. Ensuite, il y aura des projets. Ensuite, nous aurons une galerie. Le prochain sera un bloc. Le dernier élément sera un conflit. Très bien, passons donc au HTML. Ensuite, nous devons commencer à écrire le CSS. Tout d'abord, je vais sélectionner chaque élément à l'aide d'un astérisque et définir une marge, et les mettre tous les deux à zéro Ensuite, je vais définir la taille de la boîte sur la zone de bordure. Nous avons également besoin que la décoration du texte ne soit aucune. Ensuite, je vais régler la taille du téléphone pour l'élément humain H à 62,5 %, car nous allons utiliser la RAM comme unité de mesure. Une RAM doit être égale à dix pics, les éléments sont devenus les éléments Allons-y et sélectionnons le conteneur. Je vais régler la largeur à 100 %, puis la hauteur sera de 100 % de hauteur du point de vue Ensuite, je vais utiliser Flex book pour centrer le contenu à l'aide Justified Content Center et d'Align Items Center. Comme vous pouvez le constater, les liens sont placés au centre de la page. Ensuite, je vais sélectionner la navigation. Réglons la hauteur à 60 Ram. Ensuite, je vais utiliser Flex Box. Nous devons changer la direction, définissons-la en colonne. Je vais également aligner les éléments au centre. En ce qui concerne la propriété de contenu justifiée, je vais la définir de manière à ce qu'elle soit espacée de manière uniforme. Ici, nous avons les éléments de navigation bien placés. Ensuite, je vais sélectionner les éléments du lien. Définissons la famille de téléphones. Ce seront des droits. Cursive, le téléphone est changé. Ensuite, je vais augmenter la taille du téléphone. Il y aura six RAM, A. Changez de couleur. Je vais utiliser le 5255 Ensuite, nous avons besoin d'un espace entre les lettres. Mettons-le à 2.2, changeons également la largeur, faisons-le à 100 % et la hauteur sera également de 100 %. Ensuite, nous avons besoin que la ligne de texte technique soit au centre. Nous avons ici les éléments de navigation. Ils sont plutôt jolis. Ensuite, je vais sélectionner la navigation avec un effet de survol. Je veux dire la pseudoclasse hover, suivie de l'élément link Changeons la couleur. Il va y en avoir 888. Ensuite, je vais sélectionner la navigation, puis le lien. Et puis le survol. Je vais changer de couleur. Mettons-le en blanc. Réglons l'ombre de la boîte pour l'élément de liaison à 0,5 RAM, soit une RAM. Et la couleur noire RGBA avec une opacité 0,1 Ensuite, nous avons besoin d'une transition pour un effet fluide En fait, nous avons besoin ici de l'ombre technologique et non de l'ombre de la boîte au survol. La couleur du lien est en train de changer. Ensuite, je vais sélectionner le lien de navigation. Et puis, avant l'élément, définissons le contenu sur un attribut. Ensuite, nous avons besoin du texte des données , que nous avons utilisé dans le fichier HTML. Ensuite, je vais définir la position sur absolue. Et nous avons besoin d'une position relative pour la navigation. Après cela, je vais fixer la première position à 50 %, puis la position sera également de 50 %. Je vais censurer l'élément en utilisant transform translate -50 % et encore une fois -50 %. Ensuite, je vais régler la largeur à 180 m et la hauteur à 180 m également Nous avons besoin que la couleur de fond soit rouge, c'est une couleur temporaire. Et aussi décrétez l'opacité. Bien, arrondissons l' élément en utilisant le rayon de bordure 50 %. Ensuite, nous avons besoin d'une propriété d'index inférieure à un pour rendre les liens visibles. OK, c'est un résultat temporaire. Nous avons besoin de Display Flex. Alors justifiez. Le contenu sera au centre. Et nous avons également besoin d'un centre de produits. Ensuite, je vais augmenter la taille du téléphone. Ça va faire 30 RAM. La famille de téléphones sera le deuxième téléphone, Joseph, avec serif à claques Ensuite, le poids du téléphone va être retiré. Je vais également changer de couleur. Utilisons 777. Comme vous pouvez le voir, nous avons ici les éléments, je veux dire les plus gros éléments en arrière-plan de la navigation dont nous avons besoin pour les afficher une fois que nous avons survolé les éléments Ensuite, je vais sélectionner la navigation. A avec le pointeur de la souris, suivi du pseudo élément before En fait, par défaut, je vais rendre le contenu vide. Ensuite, le contenu avec le texte de la date de l'attribut doit être survolé. Débarrassons-nous de la hauteur intérieure et plaçons-les ici car nous avons besoin que la position gauche soit de 50 %. Débarrassons-nous de la couleur d'arrière-plan et rendons l'opacité nulle Ici, nous avons besoin d'une opacité de 0,7. Et je vais également définir l' espacement des lettres sur 50 Ram par défaut En ce qui concerne l'effet de survol, l'espacement des lettres sera d'un Enfin, nous avons besoin d'une transition pour un effet plus fluide. Une fois que nous avons survolé les éléments, nous aurons les éléments appropriés en arrière-plan Ensuite, je vais masquer le trop-plein afin de me débarrasser de ces barres de défilement au survol De plus, nous avons également besoin d'un trop-plein caché pour le conteneur. Sachez que tout fonctionne bien. La seule chose que nous devons faire est de changer les couleurs de fond. Une fois que nous avons survolé les éléments, nous avons besoin de la navigation suivie du lien avec le sélecteur de graphique Et puis il faut avant l'élément. La couleur de fond du premier article sera Bf94 144 Nous avons ici la couleur de fond du premier article. Nous avons besoin de la même chose pour tous les articles. En fait, changeons la position gauche et 40 %. Maintenant, nous avons un meilleur résultat. Dupliquons ce code et changeons les couleurs d'arrière-plan pour le reste des éléments. Le second sera le F3722. Ensuite, nous aurons 8961, puis nous aurons 974 Ensuite, le prochain sera neuf ou six. Pour le dernier élément, nous avons besoin de 43 A, A. En fait, nous devons également modifier les sélecteurs pour enfants Nous en avions un partout. Nous avons besoin de chiffres de un à six. Très bien, maintenant nous avons ici un effet sympa et cool. En fait, presque tout fonctionne bien. Nous avons juste besoin d'apporter une petite modification à la propriété de transition. Faisons défiler la page vers le haut et la transition. Au lieu de tout cela, je vais assurer séparément l' espacement des lettres, puis la position gauche Nous avons maintenant de bien meilleurs résultats. Ça y est, le projet est terminé. J'espère que cela vous a plu. Passons à autre chose. 8. Projet 3 - Boîte modale réussie/échouée: Très bien, il est temps de commencer à créer notre prochain projet. Dans cette section, nous allons créer une boîte de module Success Fail. Je veux dire le message contextuel qui nous indique le succès ou l'échec. Vous trouverez ce message sur presque tous les sites Web. Très souvent, nous avons ici deux boutons différents. L'un d'eux est vert et l'autre est rouge. Si je clique sur le bouton vert, nous recevrons ce joli message pop de réussite. Ensuite, si je clique sur le bouton Go Ahead, il se fermera comme pour le bouton rouge. Si je clique dessus, nous recevrons un message d'échec, qui se fermera une fois que j'aurai cliqué sur le bouton Réessayer. OK, c'est tout à propos de ce projet. Cela va être simple, mais je pense que ce sera très utile et que vous l'apprécierez. Commençons. J'ai créé un nouveau dossier sur le bureau. Allons-y et ouvrons-le dans le code VS. Créez ensuite nos fichiers de travail pour le HTML, le CSS et le script Gale Le premier sera indexé en HTML. Ensuite, nous aurons des styles et nous aurons également besoin de scripts. Ensuite, je vais ouvrir le fichier d'index HMO et créer le document HTML de base Allons-y et changeons le titre. Ce sera une boîte à modèles, puis nous devrons lier les fichiers CSS et Jovscopt OK, ensuite je vais lancer le projet dans le navigateur. Et je vais également placer l'éditeur et le navigateur côte à côte. OK, ensuite je vais prendre le lien du téléphone CDN, car nous allons utiliser des icônes de téléphone tout au long du projet Allons-y et copions le lien à partir d'ici. Ensuite, je vais ouvrir la balise de lien et coller le lien du CDN ici D'accord, je vais ensuite visiter le site Web de Google Phones, car nous allons utiliser l'un des téléphones Google. Allons-y et recherchons Google Phone, qui s'appelle Weeks Made for Display. Je vais sélectionner ces différents styles, puis copier le lien d' ici et le coller dans la tête Elon. Très bien, nous sommes prêts à commencer à écrire le balisage du courrier HT Je vais créer un développement qui sera le conteneur à l'intérieur du développement. Je vais ouvrir un autre point de profondeur, c'est dans ce domaine que nous aurons du succès. Ensuite, je vais insérer Patson avec les classes PTN, puis Success BTN Le texte va être soumis. Ensuite, nous avons besoin d'un modèle de boîte. Je vais créer du développement avec la classe Success, model and model. C'est Insérez ici un autre P qui sera l'icône du modèle. Et nous avons également besoin d' une autre classe Success sur laquelle insérer ici une icône de téléphone qui sera FA solid FA check Après l'icône, nous avons besoin modèle en haut dans lequel nous avons H, un élément de titre, le texte success. Le top du mannequin sera suivi par le mannequin Patson. Nous aurons également ici un autre cours, Pots, Success. Insérons un pot avec un modèle de classe BTN. Je vais définir l'attribut type sur pots. Insérons le texte. Allez-y. Bien, maintenant nous avons besoin de la même chose en cas d'échec. Dupliquons ce code et apportons quelques modifications. Nous devons transformer le succès en échec. En fait, faisons-le pour chaque succès. Ensuite, nous devons échouer. Modifiez également le texte du bouton. Ce sera encore une fois T. Nous devons également changer l'icône. D'accord, je pense que cela concerne le balisage HTML. Allons-y et commençons à écrire le CSS. Je vais sélectionner chaque élément, puis définir la marge et les mettre à zéro Ensuite, je vais définir la taille de la boîte sur la zone de bordure. Je vais changer de famille de téléphones. Ce sera le téléphone sur lequel nous avons sélectionné les semaines pour l'affichage. Ça va être des sansorifls. Je peux voir que les styles par défaut sont appliqués aux éléments. Ensuite, je vais sélectionner des modèles et les masquer en utilisant Display None. Très bien, occupons-nous du contenant. Je vais régler sa largeur à 100 % et la hauteur à 100 % de la hauteur du pot. Modifiez également la couleur de fond. Utilisons ici la couleur 264653. C'est de couleur verte. Ensuite, nous avons besoin d'un livre en lin. Et pour centrer les éléments dont nous avons besoin, justifiez un capteur de contenu et un centre de rubriques. OK, après cela, je vais sélectionner PTN. Fixons alors la marge à trois RAM. La largeur sera de 15 RAM. Je vais régler la hauteur à quatre RAM. Les motifs se sont agrandis. Réglons le rayon de la bordure à trois RAM. Ensuite, débarrassez-vous de Porter par défaut, n'en faites aucun, nous avons besoin d'un effet d'ombre. Réglons Box Shadow 201 Ram, trois Ram. Et utilisez ici R pour une couleur noire avec une opacité plus faible. Très bien, je vais maintenant définir la taille de police sur un Rame Le poids de la police à transformer en majuscules doit être transformé en majuscules. Espacons 2,1 RAM. Changez ensuite de couleur. Ça va être blanc. Et placez également le curseur sur le pointeur. Nous devons maintenant modifier les arrière-plans du bouton séparément. La première sera la couleur 298. En ce qui concerne le deuxième bouton, je vais utiliser une couleur rouge, qui sera Fd575 OK, les boutons sont prêts. Ensuite, je vais créer, cliquer sur le fait en utilisant transform translate y. Définissons-le 2.2 Ram. Une fois que j'ai cliqué sur le bouton , il se déplacera. Nous l'avons fait en utilisant une pseudo-classe active. Ensuite, je vais masquer les boutons et m' occuper des modèles. Réglons avec 25 RAM, alors la hauteur sera de 30 Ram. Ensuite, je vais changer la couleur de fond. Mettons-le sur E. Je vais définir la position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui sera un conteneur. Mettons les deux modèles au centre. Nous avons besoin que les propriétés en haut et à gauche soient égales à 50 % et nous avons également besoin de transform translate avec les valeurs -50 % et -50 %. Les deux modèles sont placés au centre de la Ensuite, je vais utiliser Flex Box. Changeons la direction dans laquelle elle sera placée en colonne. Nous devons aligner les éléments verticalement. Définissons donc une ligne centrée sur les éléments. De plus, je vais arrondir l'élément en utilisant le rayon de bordure. Nous avons ensuite besoin de box shadow avec les valeurs 01 Ram, trois Ram. Et la couleur noire RGBA avec une opacité plus faible. OK, après cela, je vais sélectionner l'icône du modèle. Réglons la largeur à six RAM, puis la hauteur sera également de six RAM. Nous avons besoin d'une position absolue. Ensuite, je vais me mettre en position deux moins trois Ram. Comme je vais utiliser le port the radius, arrondissons l'élément. Ensuite, je vais sélectionner l'icône elle-même. Augmentons la taille du téléphone. Je vais le régler sur 2,5 RAM. La couleur sera le blanc. Ici, nous avons les icônes sélection de l'icône d'échec, définissez sa couleur d'arrière-plan sur le rouge. De plus, je vais utiliser l'ombre avec les valeurs 0,5 Ram, deux Ram, et la couleur sera 240-96-5608, et l'opacité 0,3. Ensuite, nous avons besoin d'une boîte flexible Justiquons un centre de contenu et un centre de rubriques. OK, l'icône est prête et elle est plutôt jolie. Prochaine. Ensuite, je vais m' occuper du top model. Disons que sa largeur est de 100 %, la hauteur sera de 20 RAM. Ensuite, je vais utiliser Display Flex avec contenu de justification et un centre d'éléments de ligne. Allons-y et sélectionnons Modal Top H, un élément d' en-tête. Je vais augmenter la taille du téléphone, il sera de 2,5 RAM. Changez ensuite de couleur. Je vais en faire 264653. Alors je vais te retirer du bas de la page. Réglons la largeur à 100%. La hauteur sera de dix RAM selon nos besoins. Encore une fois, Flex Box avec Justify Content Center et Align Items center. Ensuite, je vais sélectionner le modèle, le bas, échouer et changer la couleur de fond. Tu vois une couleur rouge. En fait, nous avons besoin de réduire le rayon de la frontière. Réglons le rayon de la bordure sur 00. Puis un Ram, et encore un Ram. OK ? Le problème est résolu. Ensuite, je vais sélectionner le Batson. Passons à dix RAM, alors la hauteur sera de trois RAM, rayon de bordure sera de deux RAM. Ensuite, je vais me débarrasser de la bordure par défaut, supprimer une, changer la couleur de fond. Utilisez ici, couleur blanche. Ensuite, nous devons transformer le texte en majuscules. De plus, le poids de la police sera en gras. Ensuite, je vais utiliser un effet d'ombre avec les valeurs 012 et la couleur RGB Nous allons configurer le pointeur sur pointeur. OK, après ça, je vais changer la couleur du bas. Mettons-le en rouge. Ensuite, nous devons créer un effet de clic. Transformons la translation de 0,2 m. D'accord, nous avons maintenant ici l'effet de clic. Bien, après cela, je vais sélectionner le modèle d'échec et le masquer pendant un moment. Afin de personnaliser le modèle Success, sélectionnons l'icône Success définissons sa couleur d'arrière-plan sur le vert. Ensuite, nous avons besoin d'une ombre de boîte de 0,5 m, de deux Ram. Et le RGBA 421-57-1403 et l'Opacity 0.3 Très bien. Ensuite, je vais sélectionner Model Bottom Success et changer et l'Opacity 0.3 Très bien. Ensuite, je vais sélectionner Model Bottom Success et changer la couleur d'arrière-plan. Ça va être vert. En fait, les deux modèles ont l'air bien. Ensuite, je vais changer la couleur du Boom, il va être vert. C'est bon. Ça y est, tout est prêt. Maintenant, je vais me débarrasser de cet écran. Aucune d'ici. Je vais masquer les modèles à l'aide d'une échelle. Nous avons également besoin de propriétés d'opacité et de visibilité. Ensuite, nous devons récupérer les boutons. Il est maintenant temps de l'utiliser. Créons les boutons variables et sélectionnons les boutons à l'aide de la méthode Curry Select All. Nous avons besoin de son nom de classe, BTN. Ensuite, nous avons besoin de la deuxième variable. Ce seront des modèles. Nous avons besoin ici du modèle, également du modèle BTN. Insérons ici le modèle PTN. Nous pouvons déjà voir tous les éléments. Regardons les boutons. En utilisant la méthode Forage, nous devons ajouter l' écoute des événements au bouton. Nous cliquons sur event, je vais insérer ici une fonction de rappel Une fois que nous avons cliqué sur le bouton, nous devons parcourir les modèles en utilisant à nouveau la méthode du fourrage. En fait, nous avons besoin du modèle ici, du paramètre dont nous avons besoin instruction here if dans laquelle nous devons définir la liste des classes du modèle if et le premier élément de la liste des classes. Ensuite, nous devons le diviser et sélectionner le premier élément s'il est égal à la classe dans la liste des classes BTN Je parle encore une fois du deuxième élément, nous devons le diviser en tirets, puis sélectionner le premier élément. Si cette condition est vraie, nous devons montrer le modèle de boîte. Nous avons besoin ici de la méthode add, et à la place de la classe open, qui sera utilisée dans le fichier CSS. Nous devons sélectionner Ouvrir, puis le modèle, et le rendre visible. Sélectionnons ce code. Nous avons également besoin ici d' opacité et de visibilité. Nous avons besoin d'une seule échelle opacité et d'une visibilité visible. De plus, je vais effectuer la transition pendant 0,5 seconde. Comme vous pouvez le constater, les boutons fonctionnent correctement et les modèles apparaissent une fois que nous avons cliqué dessus. Ensuite, nous devons les cacher. Une fois que nous avons cliqué sur les boutons des modèles, nous devons parcourir les BTN du modèle Ensuite, je vais ajouter un écouteur d'événements au modèle BTN. Avec un événement de clic, nous devons supprimer la classe ouverte du modèle. Maintenant, si je clique sur le bouton, les boîtes à modèles seront correctes, tout fonctionne bien. Et avec ce projet, c'est terminé. Passons à autre chose. 9. Project 4 - Formulaire d'inscription avec des illustrations: Très bien, il est donc temps de passer à autre chose et de commencer à créer notre prochain projet, qui sera un formulaire d'inscription avec des défauts animés et des illustrations. Lorsque vous créez le site Web, presque toutes les pages ont besoin de ce type de modèle. Je pense que ce projet vous sera très utile. Allons-y et décrivons le projet. Nous avons ici un modèle de formulaire de connexion. Sur le côté gauche, vous pouvez voir les illustrations. En ce qui concerne le côté droit, nous avons ici des champs d'impo avec un motif Vous trouverez ci-dessous un lien pour vous inscrire. Si je clique dessus, le formulaire de connexion passera au signe du formulaire, agréablement avec quelques défauts animés. Nous pouvons donc passer aux différents formulaires de cette manière. Très bien, asseyons-nous sur ce projet, commençons. J'ai créé un nouveau dossier sur le bureau dans lequel j'ai un dossier contenant des images d'illustration. Allons-y, ouvrons le dossier dans le code VS, puis créons nos fichiers de travail pour HTML. Ensuite, nous avons besoin de fichiers CSS, nous avons besoin ici d'un fichier pour Javascript. Ouvrez ensuite le fichier HTML d'index et créez un document HTML de base. Je vais changer le titre. Ce sera des formulaires d' inscription, de connexion. Ensuite, je vais lier les fichiers. Le premier sera un fichier CSS. Nous avons également besoin ici d'un fichier Javascript. Spécifiez le nom du fichier dans l'attribut source. Allons-y et exécutons le projet navigateur à l' aide du serveur en direct. Ensuite, je vais placer l'éditeur et le navigateur côte à côte comme ça. Afin de rendre notre processus de travail plus pratique et plus simple, je vais visiter le site Web des polices CDN, JS afin de récupérer le lien, car nous allons utiliser des icônes de police lom Ouvrons la balise link et collons le CDN ici. En plus de cela, je vais utiliser les téléphones Google. Visitez le site Web de Google Phones. Je vais chercher un téléphone appelé Signa Negative. Je ne sais pas si je prononce correctement, sélectionnons différents styles, puis collons le lien dans l'élément principal. OK, je vais commencer à créer le balisage H mal. Nous avons besoin ici d'un conteneur dans lequel je vais insérer le tag, qui sera un emballage de formulaire Ensuite, nous formons l'emballage à gauche et à droite. Insérons ici H un élément de titre avec le texte s'inscrire. Formulaire avec le formulaire d'inscription au cours. Débarrassons-nous de l'attribut action. J'insère ici un groupe de saisie dans lequel nous aurons une balise de saisie avec le texte de type. Et nous avons besoin d'un attribut placeholder dans lequel je vais insérer le nom d'utilisateur Ensuite, je vais insérer votre phonosomicon, qui sera FA, solide FA Ensuite, je vais dupliquer le groupe de saisie deux fois. Et changeons le type ici. Ce sera un e-mail. Nous avons besoin d'un e-mail ici. Et changez également l'icône. Ce sera une enveloppe. Ensuite, nous devons taper le mot de passe ici. L'espace réservé sera le mot de passe. Et changez également l'icône. Ça va être verrouillé. OK, nous avons donc ici les champs de saisie et les icônes. Insérons ici un bas avec le formulaire de classe BTM dont nous avons besoin ici, tapez, ce sera un bouton Pour ce qui est du texte, je vais l'insérer ici. S'inscrire. OK, après cela, nous avons besoin d'un lien avec le lien de connexion à la classe. Mettons en place le texte de connexion. OK, allons-y, copions ce code et collez-le ci-dessous dans le wrapper du formulaire Bien, je vais apporter quelques modifications ici. Nous devons nous connecter. Quant à l'élément de lien, il s'agira de s'inscrire. Et modifiez également le nom de la classe. OK, je pense que c'est ça. Tout est prêt. Je vais commencer à écrire le CSS. Sélectionnons chaque élément à l'aide d'un astérisque. Tout d'abord, je vais définir une marge et les mettre toutes les deux à zéro. Ensuite, nous aurons la taille de la boîte, qui sera une zone de bordure. Je vais mettre les grandes lignes à néant. Ensuite, il faut que la décoration du texte soit nulle. Je vais changer de famille de téléphones. Cela va être nettement négatif ou, comme vous pouvez le voir, les styles par défaut sont appliqués aux éléments Ensuite, je vais sélectionner l'élément HTML et diminuer la taille du défaut car nous allons utiliser M comme unité de mesure. Dans ce cas, un m sera égal à dix pixels. OK, allons-y et commençons à personnaliser le conteneur. Je vais régler la largeur à 100 % La hauteur sera de 100 ports de hauteur. Ensuite, nous avons besoin de la couleur de fond. Ce sera l'EC 2. Ensuite, je vais sélectionner un emballage en mousse. Réglons sa position en valeur absolue. Ensuite, nous avons besoin de la position relative pour l'élément parent qui est un conteneur. Réglons la position supérieure à 50 %. Ensuite, nous devons placer la position gauche à 50 %. Et nous devons centrer l'élément en utilisant transform translate avec les valeurs -50 % et encore une fois -50 % Maintenant, le contenu est placé au centre de la Ensuite, je vais régler la largeur. Ce sera 100 Ram. Quant à la hauteur, je vais la régler à 65 RAM. Changez également la couleur de fond, elle sera blanche. Nous avons ici l'emballage du formulaire, utilisons des livres flexibles Je vais arrondir les inconvénients en utilisant le rayon de bordure. Disons deux Ram. Créez également un effet d'ombre. Intérions 0,3 RAM, trois RAM, puis la couleur sera RGBA, 326-01-1207 avec une opacité 0,3. Très bien, maintenant le wrapper de formulaires est bien meilleur maintenant Allons-y et sélectionnons l'emballage du formulaire à gauche. Et nous avons également besoin d'un wrapper, accord, car ces éléments auront des styles similaires Mettons-nous avec deux livres à 50 %, la hauteur sera de 100 %. Ensuite, nous avons besoin de livres flexibles. Nous devons changer de direction, ce sera une colonne. Je vais placer le contenu de justification au centre et les éléments Elon au centre également. Alignons également le texte au centre. OK, les formulaires sont placés au centre des emballages. Ensuite, je vais sélectionner les éléments de titre H. Augmentons la taille du téléphone. Il va y en avoir six. Ensuite, nous avons besoin du Col 47f, il est de couleur bleue Réglons la marge à moins cinq RAM. Zéro, puis six RAM et zéro. Les titres sont plutôt jolis. Ensuite, je vais sélectionner le groupe d'entrée. Set d'entrées avec 225 RAM. Ensuite, la hauteur sera de cinq béliers. Fixons la marge à un RAM, zéro. Ensuite, je vais me débarrasser de la bordure, puis définir la bordure en bas. Ce sera 0,2 RAM solide avec une couleur RGBA, 641-23-2505 et une opacité 0,5. OK, après cela, je vais régler la après cela, je vais Changeons la taille de police. Ce sera 1,4 RAM. De plus, nous avons besoin d'un rembourrage sur le côté droit. Réglons 22 RAM. Ensuite, je vais changer la couleur de fond. Cela va être transparent, les champs de saisie seront plus beaux. Ensuite, je vais sélectionner une entrée avec un attribut placeholder Changeons la couleur. Le fait que ce soit bleu crée également un espace entre les lettres. Et changez la taille de police, 3 021,2 RAM. Nous avons également besoin que le poids de police soit de 500. Enfin, transformons le texte. Vers les majuscules. Très bien, ensuite je vais sélectionner entrée du groupe de saisie en mettant l' accent sur la classe sur le focus, je vais changer la couleur de la bordure. Mettons-le en bleu. Une fois que nous avons focalisé les champs de saisie, la bordure en bas changera de couleur. Bien, après cela, je retire l'élément du groupe d'entrée. Je suis dans le téléphone des icônes, position absolue. Ensuite, nous avons besoin de la position relative. Pour l'élément parent, qui est le groupe d'entrée, définissons la position supérieure. Ce sera 50 %, alors nous avons besoin de la bonne position. Je vais le régler sur 2,5 RAM. Et nous avons également besoin de transformer la translation Y avec -50 % afin de centrer l'élément Ensuite, je vais changer la taille du téléphone. Ce sera 1,3 Rams. Changeons la couleur, définissons-la en bleu. Ici, les automatismes du téléphone sont bien placés. Ensuite, sélectionnons le bouton, réglons la largeur sur 20 RAM. Ensuite, la hauteur sera de 4,5 RAM. Je vais fixer une marge en haut à deux RAM. Ensuite, il faut que la frontière soit nulle. Je vais utiliser le rayon de bordure pour arrondir le bouton, 3025 Changez la couleur de fond. Couleur bleue, les boutons sont jolis. La couleur suivante sera le blanc. Réglez la transformation du texte en majuscules. La taille de police sera de 1,4 RAM. Ensuite, nous avons besoin que l'épaisseur de la police soit gras et que nous utilisions un peu d' espace entre les lettres. Ensuite, je vais créer un effet d'ombre. Disons Box Shadow, 20,5 RAM, un Ram. Et le RTP est une couleur, je veux dire cette couleur bleue avec une opacité de 0,4, les boutons sont plutôt jolis Je vais placer le curseur sur le pointeur. C'est bon. Après cela, je vais créer, cliquer sur le fait en utilisant transform translate Y. Définissons-le 2.2 Ram Une fois que nous avons cliqué sur le bouton, nous aurons ici l'effet de clic. OK, allons-y et sélectionnons l'élément de lien. Je vais régler la position absolue, la position inférieure définie, ce sera le cas. Quant à la taille du téléphone, je vais la régler sur 1,6 RAM. Transformons le texte en majuscules. Mettez également le téléphone en gras. Ensuite, nous avons besoin de la taille de police. Ce sera 1,6 RAM. Changez de couleur, je vais utiliser le bleu. Ensuite, allons-y et sélectionnons le lien d'inscription. Je vais régler la position droite à quatre m. En ce qui concerne le lien sinusoïdal, nous avons besoin de la position quatre vers la gauche. OK, en fait, les deux formulaires de connexion et d' inscription sont terminés. Ils sont plutôt jolis. Ensuite, je vais sélectionner l'emballage du formulaire à gauche et le masquer en utilisant le zéro d'opacité et le hetum de visibilité Le formulaire d'inscription est hedum. Maintenant, je vais le placer ici pour le fond de l'emballage. Nous allons sélectionner cet élément. Définissons cette position. largeur absolue du minate sera de 100 m. La hauteur sera également de 100 m. Ensuite, nous avons besoin de la couleur de fond, elle sera bleue. Je vais également utiliser un rayon de bordure de 15 m. Nous avons ici le fond bleu. Allons-y et fixons la position de gauche à -40 %. Quant à la position supérieure , elle sera de 90 %. Ensuite, nous devons changer l'origine de la transformation qui sera en bas à droite Pour faire pivoter l'élément dans la direction Z, la valeur sera de -40 degrés En fait, nous devons nous positionner à -90 %. OK, maintenant nous devons masquer la partie de l'arrière-plan en utilisant la chaleur de débordement Nous avons ici un beau contexte. Ensuite, je vais insérer votre image qui servira d'illustration. Sélectionnez l'image 1. Adhérons au nom de la classe, ce sera l'image gauche et supprimons l'attribut all. Allons-y et sélectionnons l'image. Réglons avec 235 fram, alors la position sera absolue Pour le moment, l'image n' est pas visible. Fixons un index à 100. Ici, nous avons l'image. Je vais sélectionner l'image à gauche, position en haut sera de 25 %, puis nous avons besoin que la position de gauche soit de 8 %. D'accord, donc l'image est bien placée. Maintenant, nous devons nous occuper du Javascript. Créons une variable, ce sera un conteneur. Je vais sélectionner cet élément comme méthode de sélection Nous devons spécifier ici le conteneur du nom de classe. Dupliquons-le deux fois. La deuxième variable sera le lien sinusoïdal. Insérons le nom de la classe. Nous avons également besoin ici, sinus in link, changer le nom de la classe. Nous avons maintenant besoin d'un lien d'inscription avec l'écouteur d'événements. Mettons-le ici, cliquez sur Événement et également sur la fonction de rappel Nous avons besoin d'un conteneur suivi de la propriété de liste de classes et nous devons ajouter à la liste de classes navigate. Cela se produira au clic. Nous devons maintenant utiliser cette classe pour ajouter des styles aux éléments. Je parle de l'arrière-plan de l' emballage du formulaire. Transformons la fonction de rotation Z avec la valeur 130 degrés. De plus, nous devons traduire pour déplacer l'élément. La valeur sera de 15 Ram , puis encore 15 Ram dans les deux directions, I, x et y. Une fois que j'ai cliqué, l' arrière-plan se déplacera. Il faut ajouter ici la transition pour rendre l'effet plus fluide. Maintenant, si nous cliquons, nous obtiendrons le mouvement agréable et cool de l'arrière-plan. Ensuite, nous devons nous occuper de l'emballage du formulaire laissé avec again navigate class l'heure actuelle, l'élément est masqué et nous devons le rendre visible. Utilisons à nouveau la transition avec un certain délai. Nous avons à nouveau besoin d'une transition par défaut sans délai. Si je clique, le formulaire d' inscription apparaîtra bien. Il faut maintenant prendre en main l'image. Utilisons à nouveau la classe navigate suivie de l'image de gauche. Nom de la classe. Réglons l'opacité à zéro et la visibilité masquée Nous avons besoin ici de la fonction transform translate y. Nous devons déplacer légèrement l'image et également utiliser la transition d' une durée totale de 0,5 seconde. nous avons besoin d'une transition pour l'élément gauche de l'image Par défaut, nous avons besoin d'une transition pour l'élément gauche de l'image avec un délai. Une fois que j'ai cliqué, l' image se cachera bien. Le formulaire s'affichera. Très bien, tout fonctionne bien. Ensuite, nous devons nous occuper du lien de signature. Pour supprimer une classe, naviguez depuis le conteneur. Maintenant, si je clique sur S' inscrire puis connecte en arrière-plan, je reviendrai à sa position par défaut. Maintenant, nous devons nous occuper de la forme du rappeur, non ? Nous devons définir l'opacité à zéro, puis masquer la visibilité pour masquer le formulaire de connexion C'est la transition. Ensuite, je vais ajouter une transition par défaut à l'élément. Avec un délai, ça va être d'une seconde. Si je clique sur le lien, le formulaire de connexion se masquera parfaitement, puis il apparaîtra une fois que nous aurons cliqué à nouveau sur le lien. OK, la seule chose que je dois faire est d'utiliser la deuxième image pour le formulaire de connexion. Nous avons ici la deuxième image. Sélectionnons l'image à droite, fixons sa position supérieure à 17 % puis la bonne position sera de 7 %. Nous devons donc transformer la translation Y avec une valeur moins cinq de l'image. Je vais régler l'opacité à zéro et la visibilité à masquée Nous devons afficher l'image. Une fois que nous avons cliqué sur le lien dont nous avons besoin ici, classe navigue, suivie de l'image, n'est-ce pas ? Nom de la classe. Réglons l'opacité à un et la visibilité à visible. Ensuite, nous devons transformer la fonction translate Y. La valeur sera de cinq. Nous avons besoin d'une transition pour un effet fluide. Nous avons également besoin d'un délai. Ensuite, nous devons ajouter ici la transition par défaut. Maintenant, si je clique sur les liens, tout fonctionnera bien. En fait, nous devons éliminer les délais à partir de là. D'accord ? Tout fonctionne bien. Et nous avons ici un modèle de signature et de signature de formulaire sympa . Passons à autre chose. 10. Projet 5 - En-tête de site Web: OK, il est donc temps de créer notre prochain projet. Dans cette section, nous allons créer un en-tête agréable et moderne du site Web. Aujourd'hui, chaque site Web moderne doit avoir un en-tête cool. Dans cette section, vous apprendrez comment créer et personnaliser l' en-tête de la page de destination. Allons-y et décrivons le projet. L'en-tête est composé de plusieurs parties différentes. Dans le coin supérieur gauche, nous avons un code de logo et nous le créons. Ensuite, dans le coin supérieur droit, nous avons une navigation simple. Nous n'avons que trois éléments de navigation avec effet de survol. En ce qui concerne le centre de la page, nous avons ici la partie la plus importante. Vous pouvez voir ici la lampe qui est en fait créée avec du HTML et du CSS purs. Nous n'avons aucune image ici. La lampe est éclairée, et vous pouvez également voir ici sous l'ombre. En plus de cela, nous avons ici quelques éléments textuels différents, et vous pouvez également voir ici un arrière-plan textuel, qui, à mon avis, est vraiment beau et cool OK, c'est tout pour ce projet, allons-y et commençons à le construire. J'ai créé un nouveau dossier sur le bureau. Allons-y et ouvrons-le dans le code VS. Ensuite, je vais créer nos fichiers de travail pour le HTML et le CSS. Nous n'utiliserons que ces deux technologies. Ouvrons le fichier HTML Idextt et créons le document HTML de base Je vais changer le titre. Insérons votre page de destination. Ensuite, je vais lier le fichier CSS. Allons-y, ouvrons le projet et le navigateur , puis plaçons l'éditeur côte à côte sur le navigateur, comme suit. OK. Je vais visiter le site Web de Google Fonts car nous allons utiliser le Google Pont tout au long de ce projet. Allons donc sur le site Web , puis recherchons le téléphone appelé vendu. Je vais sélectionner quelques styles différents à partir d'ici. Je vais chercher un autre p, qui sera PT Sans Narrow. Nous allons sélectionner ces styles. Ensuite, je vais chercher Passion One, récupérer ces tuiles. Ensuite, je vais copier le lien à partir d'ici, et nous devons le coller et nous devons le coller dans l'élément principal. C'est bon. Nous pouvons maintenant commencer à écrire le balisage HTML Nous avons besoin d'un conteneur dans lequel je vais créer un atterrissage. Insérons ici n éléments avec la classe NoFBar dans laquelle je vais insérer un logo Ce sera span element, CAC, code et create Ensuite, je vais créer un système de navigation. Insérons ici des éléments de lien. Ce sera à la maison. Le deuxième élément sera constitué de tutoriels. Pour ce qui est du troisième point, je vais insérer vos cours. OK. Ensuite, nous avons besoin d'une bannière dans laquelle je vais insérer le développement, ce sera une lampe. Alors il nous faut ici de l'ombre. Ce sont les parties de la lampe. La prochaine sera une ampoule. Ensuite, nous aurons de la lumière. Le prochain sera Shadow. C'est bon. Après cela, nous avons besoin d'éléments de titre H one avec le titre de bannière de classe. Le texte va être appris. Ensuite, nous avons besoin d'un titre de bannière. En fait, le premier était le titre principal. Il s'agit simplement du titre avec le code texte et créez. En fait, nous avons besoin ici de deux éléments de titre H et non du t. Nous aurons alors un paragraphe avec le paragraphe de bannière de classe. Insérons ici le développement Web et la conception Web. Donc en fait, c'est ça. Le balisage HTML est prêt, et nous devons commencer à écrire le CSS Créons des styles par défaut. Nous avons besoin de tous les éléments. Réglons la marge et le rembourrage à zéro. Ensuite, nous avons besoin que la taille de la boîte soit une zone de bordure. En outre, nous devons nous débarrasser de la décoration du texte. Ensuite, définissons la famille de téléphones. Ce sera le téléphone PT Sans Narrow PT Sans Narrow Sansif Next, je vais modifier la taille avant de l'élément H tal car nous allons utiliser la RM comme unité de mesure Dans ce cas, un M sera égal à dix pixels. Après cela, prenons soin du conteneur. Je vais régler à 100 %, la hauteur sera de 100 % de hauteur du pot. Ensuite, je vais changer le fond. Ce sera un gradient linéaire. La première couleur sera deux C, deux, trois un. Ensuite, le suivant sera le 2b2c3. Nous avons donc ici le contexte. Ensuite, je m' occuperai de l'atterrissage. Réglons la largeur à 95 %. La hauteur sera de 90 %. Ensuite, je vais changer la couleur de fond. Il va faire 24 h 25 à 9 h. Et puis il nous faut de l'ombre. Disons deux zéro, un M quatre RM et la couleur RGBA La couleur sera le noir avec une opacité de 0,3. Nous avons donc ici l'en-tête. Nous devons le placer au centre. Utilisons la grille d'affichage, puis plaçons les éléments au centre. L'élément est donc placé au centre de la page. Ensuite, je vais m' occuper du bar nord. Mettons-le à 100 %. Ensuite, la hauteur sera de 15 ml, nous avons besoin de pudding. Mettons-le à zéro et dix points de RAM sur les côtés gauche et droit. Ensuite, je vais utiliser des livres en lin. Alignons les éléments au centre Nous devons donc justifier contenu avec les valeurs espacées entre les deux. Nous avons donc ici le logo et les éléments de navigation. Ensuite, je vais m' occuper du logo. Je suis dans ce panel Changeons la famille de téléphones. Ce sera Passion One, cursive. Ensuite, je vais passer à la taille du téléphone à huit RAM. De plus, nous avons besoin que la couleur soit blanche. Ensuite, je vais augmenter l' espace entre les lettres. Disons 2,2 RAM. Nous avons également besoin d'une ombre de texte. Ce sera 0,51 ram avec RTB de couleur noire, et l'opacité sera de Nous avons donc le logo. Ensuite, je vais sélectionner l'intervalle suivi de l'élément after. Faisons en sorte que le contenu soit vide. Nous avons besoin de la ligne sur le logo et de la position absolue, et nous avons également besoin de la position relative pour l'élément livre. Réglons la largeur à 9,5, la hauteur sera de 0,5. De plus, nous avons besoin d'une couleur de fond, disons 2444 Ensuite, je vais régler la position à 50 %. La position gauche sera nulle, et nous devons nous centrer à l'aide de la transformation Traduire Y -50 %. OK. Parlons-en du logo. Occupons-nous des éléments de navigation. Sélectionnons la navigation suivie de l'élément lien. Je vais régler la taille du téléphone à deux RAM, puis nous avons besoin d'une marge sur le côté droit. Mettons-le à cinq M. De plus, nous avons besoin de couleur. Je vais passer à cinq, deux, cinq, quatre, cinq, voici les éléments de navigation. Ensuite, je vais augmenter l'espace entre les lettres. Ensuite, nous avons besoin d'un élément de lien avec un sélecteur de graphique. Je vais sélectionner le premier élément du lien. Réglons la couleur sur d d d. Le premier élément a donc une couleur différente par défaut. Ensuite, je vais créer un effet de survol. Je vais changer la couleur au survol, disons 2444, puis utiliser la transition pour un effet smooer En fait, nous devons changer la couleur, il nous faut ici d d d. Très bien, c'est tout pour la navigation. Nous devons maintenant nous occuper du centre de la page. Je suis dans la lampe. Réglons la position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent. Mettons la position du haut à zéro, puis la position de gauche sera de 50 %, et nous devons centrer l' élément en utilisant transform, translate x -50 % Ensuite, nous avons besoin que la largeur soit 20 m, je vais régler la hauteur à 30. Et utilisez ici une couleur de fond temporaire. Nous avons donc ici la lampe. le moment, cela ne ressemble aucune lampe, mais nous allons y remédier. Sélectionnons le fil. Je vais régler une largeur de 2,4 m. Ensuite, nous avons besoin de hauteur, ce sera dix béliers. Ensuite, nous avons besoin que la couleur de fond soit 1224. Ensuite, je vais définir la position sur absolue. Ensuite, il faut que la première position soit zéro. La position gauche sera de 50 %, et nous devons également centrer l'élément en utilisant transform, translate x -50 % Ensuite, je vais utiliser un effet d'ombre. Réglons-le sur 0,51 RAM et sur la couleur RGBA avec une opacité inférieure En fait, le fil n'est pas visible car cet élément nous manque du tout. En fait, nous devons placer ces éléments à l'intérieur de la lampe et nous devons également ajouter du fil ici. OK. Nous avons donc le fil. Ça a l'air plutôt sympa. Ensuite, je vais m' occuper de l'ombre. Allons-y et sélectionnons cet élément. Je vais régler la largeur à 100 %. La hauteur sera de dix. Ensuite, nous avons besoin de la couleur de fond. Ça va être noir pendant un moment. Réglons la position sur absolue. Ensuite, nous devons positionner dix béliers. Nous avons donc l'ombre. Allons-y et définissons le rayon de la bordure à 50 %, 50 %, puis à zéro et à zéro. Comme vous pouvez le constater, la teinte a maintenant une meilleure forme. Réglons l'arrière-plan sur un dégradé linéaire. Je vais utiliser ici comme première couleur de d16. Ensuite, il y aura 24 à 25 voix contre 9. Ici, nous avons la teinte qui est bien meilleure. Utilisons un effet d'ombre. Je vais le régler sur 0,5 ram RM et la couleur sera le noir RGPA avec une opacité plus faible Maintenant, la teinte est plutôt jolie. Ensuite, je vais sélectionner une teinte avec un élément postérieur. Réglons le contenu sur vide , puis nous avons besoin que la largeur soit de 100 %. La hauteur sera de deux béliers. Ensuite, je vais régler la position sur absolue. Définissons également la position inférieure. Il va y avoir moins d'une RAM. Ensuite, nous avons besoin de la position gauche, ce sera zéro. Nous avons également besoin d'un rayon de bordure. Ce sera 50 %. Quant à la couleur de fond, je vais la régler sur deux D, trois, deux, trois sept. D'accord, comme tu peux le voir. Maintenant, l'élément ressemble à 100 % de la teinte. Ensuite, je vais m' occuper de l'ampoule. Disons que c'est avec deux trois RAM. Ensuite, la hauteur sera de 2,5 ram. De plus, nous avons besoin ici d'une couleur de fond, elle sera blanche. Ensuite, je vais régler la position sur absolue. La position inférieure sera de 8,5 RAM, quant à la position de gauche, elle sera de 50 %, et nous devons centrer l'élément en utilisant transform, translate x -50 % Nous avons donc ici l'ampoule. Nous devons le rendre arrondi. Faisons-le en utilisant un rayon de bordure avec des valeurs zéro, zéro, 50 % et 50 %. OK. Nous avons donc ici l'ampoule. Ensuite, je vais ajouter ici, box shadow avec les valeurs 0,5 R deux RAM puis la couleur RGBA, 2505, 2505, trois fois C'est une couleur blanche et le contraire 2.3. OK. Nous avons donc ici un bel effet. Parlons-en du bulbe. Passons à autre chose et prenons soin de la lumière. Disons que sa largeur est de 100 %. Ensuite, la hauteur sera de 50 RM. Ensuite, je vais changer l'arrière-plan. Utilisons à nouveau le dégradé linéaire. La première couleur sera RGBA, 2505, 2505, 55, et l' Ensuite, je vais utiliser une couleur transparente, et comme troisième, réutilisons la couleur transparente. C'est bon. Nous devons maintenant modifier la position de l'élément. Réglons-le sur absolu. Ensuite, les deux positions seront de 19 M. Ensuite, nous avons besoin de la position gauche, ce sera 50 %. Encore une fois, nous devons centrer l'élément en utilisant transform, translate x -50 % Maintenant, l'élément est bien positionné. Ensuite, nous avons besoin d' un rayon de bordure avec les valeurs 30 %, 30 %, zéro et zéro. Ensuite, nous devons utiliser un filtre avec fonction de flou, et la valeur sera un RM Nous avons donc la lumière. Diminérons l' opacité, faisons-la 0,3. Nous avons maintenant ici cet effet de lumière agréable et cool. Après cela, je vais sélectionner l'ombre, réglons la largeur à 40 ram, puis la hauteur sera de huit ram, ensuite, nous avons besoin de l'arrière-plan. Utilisons à nouveau le dégradé linéaire. Ici, il faut que la direction soit vers la droite, alors la première couleur sera transparente. Ensuite, nous aurons la couleur noire, et encore une fois, la couleur transparente. Nous avons donc ici l'ombre. Nous devons le positionner. Réglons la position sur absolue. Ensuite, la position inférieure sera -45 RAM. Pour ce qui est de la position de gauche, je vais la fixer à 50 %. Encore une fois, nous devons centrer l'élément en utilisant transform, translate X -50 % C'est bon. Ensuite, je vais faire pivoter l' élément selon l'axe x. La valeur sera de -70 degrés. Comme vous pouvez le voir, l' élément est pivoté. Maintenant, je vais utiliser un rayon de bordure avec une valeur de 50 %, et nous avons également besoin d'un filtre avec fonction de flou et la valeur sera de deux Très bien, comme vous pouvez le voir, nous avons ici un effet d'ombre cool. Encore une fois, diminuons l' opacité, faisons-la 0,3. OK, c'est ça. La lampe avec son ombre est prête. Ça a l'air cool. Nous devons maintenant passer à la rubrique principale. Réglons la position sur absolue. Ensuite, lorsque vous avez pris position à 25 %, la position de gauche sera de 26 %. Changeons la famille de téléphones. Je vais utiliser Oswald, San Serif. La taille du téléphone sera de 20 RM. Nous avons donc ici le titre principal. Ensuite, je vais mettre le texte en majuscules. Ensuite, il nous faut de la couleur. Utilisons ici 4142, sept. La couleur est donc modifiée. Ensuite, nous avons besoin de l'espacement entre les lettres. Ça va faire dix RM. Ensuite, je vais diminuer l'opacité. Faisons en sorte que ce soit 0,5. Ensuite, je vais changer le fond. Utilisons le dégradé linéaire. La première couleur sera 41427. Ensuite, nous avons besoin de 70 % de transparence. Ensuite, je vais utiliser une propriété appelée webkit background clip qui sera du texte Ensuite, je vais utiliser webkit, couleur du champ de texte, qui sera transparente Donc, comme vous pouvez le voir, nous avons ici fait vraiment intéressant et intéressant. Ensuite, je vais m' occuper du titre de la bannière. Réglons cette position en valeur absolue. La position inférieure sera 35, alors nous avons besoin de la bonne position. Je vais le fixer à 23 %. Passons à Passion One en famille, Cursive. Je vais également augmenter la taille du téléphone. Ça va faire huit RM. Nous avons donc le titre. Transformons le texte en majuscules, puis changeons la couleur. Ça va être BBB. Ensuite, nous avons besoin d'un espacement entre les lettres. Il y aura deux béliers. Utilisez également un effet d'ombre. Supposons que le texte soit ombré sur 0,5 RAM par RAM et que le RGBA soit noir avec une opacité de 0,3, en fait Le titre est plutôt sympa. Ensuite, je vais en prendre ici. Du paragraphe. Changeons le nom de la classe et apportons quelques modifications ici. La position du pot sera de 30 RM, puis la bonne position sera de 24 %. Je vais changer de famille de téléphones. Utilisons ici Oswald Sarif Ensuite, nous devons changer la taille du téléphone, ce sera le R Aussi, changez ici le poids du téléphone Je vais le mettre à 300. Ensuite, débarrassez-vous de Tax Transform Property et changez également de couleur. Il y aura six C, six D sept. Et puis débarrassez-vous de l'ombre fiscale, diminuez également l'espacement, faites-en 0,1 RM. C'est bon. Alors c'est tout. L'en-tête du site Web est plutôt joli. J'espère que ce projet vous a plu. Passons à autre chose. 11. Project 6 - Carte de blog: Bien, il est temps de passer à autre chose et de commencer à créer notre prochain projet. Dans cette section, nous allons créer une carte à blocs élégante et moderne. Allons-y et décrivons le projet. Comme vous pouvez le constater, la carte est composée de plusieurs éléments différents. Nous avons ici une image sur le côté gauche de la carte, puis quelques éléments textuels Et nous avons également ici le bouton qui nous indique en savoir plus. Si je clique sur le bouton, la carte s'agrandira. Et nous trouverons ici trois autres cartes différentes sur certaines visites. Si je passe la souris sur les cartes, nous obtiendrons cet effet sympa et cool Comme vous pouvez le constater, le contenu du bouton est modifié. Maintenant, cela nous indique que lisez moins. Si je clique sur le bouton, la carte sera réduite au minimum. Très bien, alors asseyons-nous sur ce projet. Commençons. J'ai créé un nouveau dossier sur le bureau. Allons-y, ouvrons-le dans le code VS, puis créons nos fichiers de travail. Nous avons besoin de trois fichiers différents, pour le HTML, pour le CSS et pour le script Java. Ensuite, je vais ouvrir le fichier HTML indexé et nous devons créer un document HTML de base Allons-y et changeons le titre. Ce sera un bloc-car. Ensuite, je vais lier le CSS et un fichier de script. Ouvrons la balise script et spécifions ici le nom du fichier jar. OK, allons-y et ouvrons le projet dans le navigateur à l' aide du serveur live. Ensuite, je vais placer l'éditeur et le navigateur côte à côte. Ensuite, je vais prendre le lien CDN pour téléphone, donc les icônes, car nous allons utiliser ces icônes tout au long de ce projet Copions le lien, ouvrons balise de lien dans l'élément principal et collons le CDN ici. Ensuite, je vais visiter le site Web de Google Phones. Pour récupérer des téléphones sur Google Phones, recherchons un téléphone appelé Roboto Condensed Je vais sélectionner quelques styles différents, puis je vais rechercher un autre téléphone, qui sera End. Sélectionnons à nouveau différents styles, puis je vais copier le lien d' ici et le coller uniquement dans la tête. Très bien, nous sommes prêts à commencer à écrire le balisage HTML Nous devons créer une balise d'ouverture de conteneur qui sera bloquée. Nous avons besoin d'une image de bloc dans laquelle je vais ouvrir la balise image. Allons-y et sélectionnons l'image le dossier des images. Ce sera la première image. Ensuite, après l'image, nous devons créer le contenu de la carte à blocs. Cet élément comprendra H trois éléments de titre. Ce sera la date du 27 janvier 2023. Ensuite, nous avons besoin de H un élément de titre. Ce sera une nouvelle exploration pour. Nous avons également besoin d'un paragraphe avec un texte factice. Ensuite, je vais créer un bouton avec la carte de nom de classe BTN. Le type sera un bouton. Je vais également placer ici read then span element more. Ensuite, je vais créer dans lequel nous avons des blocs, nous aurons trois objets différents. À partir de votre image, je vais sélectionner l'image dans le. Dossier d'images. Ce sera pour un. Ensuite, nous avons besoin d'un élément span avec le texte explorer à un. Et nous avons également besoin de phonique. Ce sera FA, Solid Magnifying Co, Location Je vais dupliquer cet article deux fois car nous allons avoir trois articles différents. Allons-y et apportons quelques modifications. Il nous faut en déchirer deux. Nous devons ici changer les noms des images. OK, en fait c'est ça. Le balisage HTML est créé. Et maintenant, nous devons parler du CSS. Tout d'abord, je vais sélectionner chaque élément à l'aide d'un astérisque Réglons la marge et le rembourrage à zéro. Ensuite, nous avons besoin que la taille de la boîte soit une zone de bordure. Je vais également diminuer la taille du téléphone de l'élément H Timal, car nous allons utiliser M comme unité de mesure Dans ce cas, un m sera égal à dix pixels. Allons-y et sélectionnons le conteneur. Je vais régler la largeur à 100 % , puis la hauteur sera de 100 pieds de vue. Changeons l'arrière-plan. Je vais utiliser la fonction de gradient linéaire. La direction sera de 145 degrés, puis la couleur sera de 6193 Alors nous avons besoin ici de 0 % . La deuxième couleur sera 814 Nous avons besoin ici de la valeur en pourcentage, 75. OK, nous avons donc ici un arrière-plan sympa et cool. Utilisons Flex Box. Pour centrer le contenu, nous devons justifier le centre de contenu et un centre d'éléments de ligne, le contenu est centré. En fait, je vais diminuer la taille des images dont la largeur est fixée à 25 images. Ensuite, la hauteur sera de 35 cadres. Ensuite, je vais sélectionner l'image elle-même qui définit la largeur à 100 % et la hauteur à 100 %. Nous avons également besoin d'une couverture d'alimentation en objets. Nous avons maintenant de meilleurs résultats. Allons-y, sélectionnons Block Tours et utilisons Flex Books. Les images sont placées horizontalement, côte à côte. Allons-y et sélectionnons Block Card Image. Je vais régler sur 30 Ram, puis la hauteur sera également 32 Ram. Ensuite, nous devons sélectionner l'image de la carte elle-même. Je parle de l'élément image. Réglons avec 100 % et la hauteur sera de 100 %. Nous avons également besoin d' un couvre-pieds pour objets. Ensuite, je vais sélectionner Bloquer la carte et définir sa largeur à 55 %. Ensuite, la hauteur sera de 80 %. Changeons la couleur de fond. Je vais utiliser RGB, 40, 40, 40. Ensuite, je vais utiliser rayon de la bordure pour l'arrondir dans les coins. 3 022,5 RAM. Nous avons ici la carte avec un fond sombre. Ensuite, je vais utiliser un peu de rembourrage. 3 022,5 béliers créent un effet d'ombre . Réglons l'ombre, 201,4 RAM, huit RAM, et la couleur sera RGB, 40, 40, 40 Pour ce qui est de l'opacité, je vais dire 2,8 et nous avons également besoin ici du RGB huit OK, maintenant nous avons un bien meilleur résultat. Je vais maintenant utiliser l' arrière-plan avec cette fonction de gradation linéaire pour l'image De plus, je vais l' arrondir en utilisant le rayon de bordure. Réglons ensuite la position sur absolue. Nous avons également besoin de la position relative de l'élément parent. Réglons la position à 15 %, puis la position de gauche sera de moins dix RAM. Nous devons transformer la traduction Y -50%. Je vais également définir l'échelle de l'image 2.6 Nous avons ici l'image suivante. Prenons le rayon de bordure de l'image elle-même. Et nous devons également réduire l'opacité. Passons à 0,5 Maintenant, l' image est plutôt jolie. Allons-y et organisons les visites guidées. Je vais définir le poids à 100 % , puis je vais même utiliser un contenu justifié avec un espace de valeur. Nous avons besoin d'un espace uniforme entre les objets. Ici, nous avons les articles bien placés. Ensuite, je vais définir la position absolue. La position inférieure sera de six RAM. Pour la position, je vais la mettre à zéro. Les visites sont indiquées ci-dessous. Allons-y et sélectionnons Bloquer le contenu de la carte. Je vais régler sa position en valeur absolue. Ensuite, je vais régler les deux positions à 1 %, la position sera 15 %. Ensuite, nous avons besoin d'une transformation avec une fonction d'échelle. Je vais définir la valeur à 0,8 Ensuite, je vais m' occuper des en-têtes. Je veux dire le premier titre, H trois. Réglons la famille de téléphones sur Roboto Condensed San Serif. Ensuite, la taille du téléphone sera de deux RAM. Il nous faut aussi de la couleur, ça va être 999. Ensuite, je vais mettre un espace en bas, ici nous avons le premier titre. Ensuite, je vais dupliquer ce code et modifier ici la famille de téléphones car nous devons changer la taille du téléphone . Il sera de 3,5 RAM. Ensuite, nous avons besoin que le poids du téléphone soit de 300 et que nous changions également de couleur, il sera blanc. Passons aux éléments du deuxième titre. Ensuite, je vais prendre l'année du paragraphe. Copions ce code, changeons le sélecteur. Ça va être le cas, je vais régler la taille du téléphone sur 1,6 RAM et aussi changer la couleur. Ça va être 777. Ensuite, nous avons besoin que la largeur soit de 35 RAM. Changez également la marge en bas, faites-en trois RAM. C'est à propos du paragraphe. Ensuite, je vais enlever le paton. Réglons avec 216 RAM. Ensuite, la hauteur sera de quatre béliers. En fait, nous devons saisir cet arrière-plan avec une fonction de gradient linéaire. Nous avons besoin de la même couleur de fond ici. Ensuite, je vais définir la bordure sur non. Changez également la couleur, rendez-la blanche. Ensuite, je vais changer de famille de téléphones. Ça va être le cas, est-ce que ça peut être sansorif ? Le bouton est plutôt joli. J'ai réglé la taille du téléphone à 1,4 RAM. Transformez également le texte en majuscules. Ensuite, je vais créer un espace entre les lettres, soit 0,1 Ram. De plus, je vais arrondir le bouton en utilisant rayon de bordure avec la valeur deux RAM. OK, le bouton est plutôt joli. Je vais utiliser un effet d'ombre. Réglons l'ombre de la boîte à 0,1 mm. Et la couleur RGBA, je veux dire la couleur noire avec une opacité de 0,1. De plus, je vais changer le curseur, le faire pointer Le bouton est plutôt joli. Maintenant, je vais m'occuper des visites de quartier. Je veux dire, les voitures en bas. Réglons le rayon de bordure à un RAM. Ensuite, je vais utiliser un effet d'ombre. Réglons block shadow à 01 Ram, cinq Ram. Et encore une fois, le RGB, une couleur noire avec une opacité 0,3 Ensuite, je vais mettre le curseur sur le pointeur Ensuite, je vais m' occuper des images. Revenons en arrière avec la fonction de dégradé linéaire. La direction sera de 135 degrés et la couleur sera de 6193 Ensuite, le prochain sera de 1356 contre sept, le rayon de la frontière étant d'un Ram Nous avons besoin du même rayon de bordure pour l'image elle-même. Je vais également diminuer l'opacité. Passons à 0,5 Maintenant, les images sont plutôt cool. Ensuite, je vais m' occuper des éléments d' envergure de l'article. Réglons la position sur absolue. Nous avons besoin de la position relative de l'élément parent. Ensuite, la position supérieure sera de 50 %, la position de gauche de -35 % Nous devons centrer l'élément en utilisant transform translate Y -50 % Ensuite, je vais changer de famille de téléphones Utilisons Candi. Ici, nous avons les éléments de panneau pour augmenter la taille du téléphone Ce sera 1,8 RAM. Changez le poids du téléphone, réglons-le sur 500. Nous devons également transformer le texte en majuscules. Ensuite, je vais créer un espace entre les lettres et changer de couleur. Fais-le blanc. En fait, il y a quelque chose qui ne va pas ici. Nous avons raté le mien. Maintenant, tout semble aller pour le mieux. Nous devons faire pivoter le texte dans le sens Z avec une valeur de -90 degrés. Maintenant, tout semble plutôt beau. Très bien, copions ce sélecteur et utilisons votre élément. Réglons avec 26 Ram, alors la hauteur sera également de 6 Ram. Je vais changer la couleur de fond. Ça va être 1683. J'ai besoin du panneau de tachymètre. Ensuite, nous devons prendre soin de la position. Nous devons placer l' icône au centre. Nous devons donc nous positionner à 50 %, position gauche , 50 %, et transformer traduire avec les valeurs -50 % et encore une fois -50 %. Les icônes sont placées au centre de l'élément Je vais arrondir les éléments en utilisant un rayon de bordure 50 %. Ensuite, nous devons placer l'icône au centre à l'aide de Flexbox. Lorsque vous justifiez le centre de contenu et les éléments d'une ligne. Augmentons également la taille du téléphone, faisons-en 2,5 RAM. Changez la couleur. Nous. Très bien, nous avons les icônes ici. Utilisons un effet d'ombre avec des valeurs 01 Ram, trois Ram, et la couleur sera le noir avec une opacité de 0,1 Très bien, maintenant je vais créer l' effet de survol au survol Nous allons diminuer l'opacité. Réglons l'opacité à zéro et la visibilité masquée. Une fois que nous avons survolé les éléments, l'icône devrait s'afficher Survolons les effets suivis de l'image du haut. En fait, nous devons récupérer ce sélecteur d' ici et le coller Juste après l'image. Comment allons-nous modifier l'opacité ? Ce sera 0,05. Nous avons également besoin d'une transition. Prenons ce sélecteur. Maintenant, occupez-vous de l'icône des points. Changeons l' opacité, faisons-en une. Nous avons également besoin d' une visibilité visible. Ensuite, la transition est de 0,3 seconde, et nous avons également besoin d'un point de temps de retard de 1 seconde. Maintenant, comme vous pouvez le voir, nous avons ici un effet de survol vraiment cool et agréable Bien, après cela, il faut que la capacité soit nulle et que la visibilité soit masquée. Nous devons cacher les objets. Comme nous devons changer, la taille de la carte sera de 45 %. Quant à la hauteur sera de 40 %. Ensuite, nous devons supprimer la fonction d' échelle à partir d'ici et également modifier la position de l'image. Ce sera 50 % de la première place. Quant à la position de gauche, elle sera de moins cinq RAM. L'image est bien positionnée. Ensuite, nous devons nous occuper de la modification du contenu. La première position sera de 15 %. Quant à la position de gauche, je vais la porter à 40 %. Nous devons nous débarrasser de l' échelle, tout semble bien. Occupons-nous du Batson. Nous avons besoin de votre position relative. Et puis l'index 100, parce que le bouton a été désactivé, il est à nouveau activé. OK, je pense que tout est prêt. Et maintenant, nous pouvons commencer à écrire du Javascript. Créons un bouton variable et sélectionnons cet élément à l'aide de la méthode de sélection de requête Nous devons spécifier ici le nom de classe du bas. Ensuite, nous devons sélectionner block car. Spécifiez ici le nom de la classe. Nous devons maintenant ajouter un écouteur d' événements au bouton en cliquant sur un événement De plus, nous avons besoin ici d'une fonction de rappel. Une fois que nous avons cliqué sur le bouton, nous devons ajouter une nouvelle classe à la carte de blocage. Nous avons besoin ici de la propriété louée par la classe, puis de la méthode togl, la nouvelle classe va être modifiée Très bien, maintenant nous devons sélectionner la carte à bloquer avec changement de classe. Nous devons ajouter ici de nouveaux styles. Nous devons changer la largeur, elle sera de 55 %. Il faut également changer la hauteur, elle sera de 80 % Utilisons la transition pour un effet plus fluide. Une fois que nous aurons récupéré le bouton, la carte s'agrandira bien. Ensuite, je vais m' occuper de l'image. Utilisez à nouveau Cl change. Nous devons déplacer l' élément en utilisant la fonction transform translate y avec la valeur -50 %. Et nous avons également besoin d'une échelle à 0,6 Ensuite, nous devons changer la position à 15 % Les deux positions, comme pour la position de gauche, seront de moins dix Ram Nous avons également besoin d'une transition ici. Une fois que nous avons cliqué, l' image se déplacera vers le haut, la taille sera modifiée. Ensuite, nous devons nous occuper du contenu. Changeons la première position. Ce sera 1 % pour la position de gauche. Je vais le régler à 15 %. Ensuite, utilisez transformation avec la fonction d'échelle, ce sera 0,8. Nous avons également besoin d'une transition pour un effet plus fluide, le contenu est prêt. Ensuite, je vais m' occuper des objets Tors. Sélectionnons l'élément Block Tours et rendons-le visible en utilisant l'opacité 1 et la visibilité visible Ensuite, nous avons besoin d'une transition. Une fois que nous avons cliqué, les éléments apparaîtront. Mais comme vous pouvez le constater, nous avons besoin ici d'un certain délai. Je vais ajouter le délai à chaque élément de la visite séparément. Sélectionnons le premier et définissons la transition sur 0,3 seconde et le temps de retard sur 0,3 seconde. Dupliquons ce code pour le deuxième élément. Le délai sera de 0,5 seconde. En ce qui concerne le dernier élément, cela prendra 0,7 seconde. Maintenant, comme vous pouvez le voir, nous avons ici un effet vraiment cool. La seule chose que nous devons faire est de modifier le contenu du bouton. Nous devons utiliser un opérateur ternaire. Cette condition est vraie. Ensuite, nous devons sélectionner les éléments span et modifier le contenu du texte. Il va y en avoir moins. Sinon, c'est plus que ça. Nous avons besoin de la déclaration avec la plus grande valeur. Maintenant, si je clique, le contenu changera. Maintenant, tout fonctionne bien avec ce projet. Nous avons terminé. J'espère que cela vous a plu. C'était intéressant et utile. Passons à Answer pour créer le suivant. 12. Projet 7 - Menu de navigation avec des cercles: Très bien, il est donc temps de passer à autre chose et de créer notre prochain projet. Dans cette section, nous allons créer un menu de navigation en HTML, CSS et Javascript. Comme vous pouvez le voir, nous avons ici un bouton au centre de la page. Si je clique sur ce bouton, quelques éléments de navigation différents s'afficheront avec un effet agréable et cool. Comme vous pouvez le constater, le contenu du bouton est modifié. Maintenant, il est écrit « fermer ». Si je clique à nouveau sur le bouton, les éléments de navigation se masqueront. Je pense que le projet va être intéressant et utile. Allons-y et commençons. J'ai créé un nouveau dossier sur le bureau, qui est actuellement vide. Allons-y et ouvrons ce dossier dans le code VS. Ensuite, nos fichiers de travail, le premier sera l'index HTML. Ensuite, nous aurons le style CSS. De plus, nous avons besoin d'un fichier pour Javcript, ce seront des scripts Allons-y, ouvrons le fichier HTML d'index et créons le document HTML de base. Je vais changer le titre. Insérons votre menu CSS. Ensuite, je vais lier fichiers CSS et Charles Grit à des balises de script et nous devons spécifier ici le nom du fichier Chiles OK, allons-y et ouvrons le projet dans le navigateur à l' aide du serveur live. Ensuite, je vais placer l'éditeur côte dans le navigateur. OK, maintenant je vais prendre une police Google. Visitez le site Web de Google Fonts, puis recherchons une police appelée Mukta Je vais choisir différents styles à partir d'ici. Copions le lien , puis collez-le dans l'élément principal. Très bien, nous sommes prêts à commencer à écrire le balisage HTML Nous avons besoin ici d'un conteneur dans lequel je vais insérer le menu. Nous avons besoin d'un bouton ici avec un bouton de saisie, puis nous avons besoin d'une classe. Ce sera le menu BTM. Nous avons également besoin de deux emplacements ici, Span, element, menu, et aussi dans un autre span. Pour terminer, nous avons ici le bas. Ensuite, nous avons besoin des éléments de navigation. Je vais ouvrir un élément avec une navigation de classe. Insérons ici des éléments de lien. Le premier sera à la maison, puis je vais le dupliquer plusieurs fois. Le second portera sur. Ensuite, nous aurons des projets. Le prochain sera un bloc, et le dernier sera une galerie. OK, donc je pense que tout est prêt et maintenant nous pouvons commencer à écrire le CSS. Sélectionnons chaque élément, définissons la marge et mettons les deux à zéro. Ensuite, il faut que la décoration du texte soit nulle. Nous avons besoin que la taille de la boîte corresponde à celle de la bordure. Je vais configurer la famille de téléphones pour chaque élément de manière à ce qu'elle change. Très bien, je vais ensuite régler la taille du téléphone de l'élément HTML à 62,5 % afin de faire en sorte qu'un m soit égal à dix pixels Parce que nous allons utiliser m comme unité de mesure, la largeur du conteneur à 100 %. Nous avons également besoin de hauteur, ce sera la hauteur du pot à 100 vues. Ensuite, je vais changer la couleur de fond. Utilisons F 1f1f1. Ensuite, nous avons besoin d'un menu. Je vais régler la largeur à 70 RAM. La hauteur sera également de 70 m. Je vais régler la position en valeur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui est un conteneur. Pour centrer l'élément, nous avons besoin que la position supérieure soit de 50 %, cette position de 50 % . Et nous avons besoin de la largeur de translation de la transformation de -50 % et encore une fois de -50 %. Maintenant, le menu est centré Ensuite, nous avons besoin de l'élément span du bouton de menu. Je veux dire le second, il faut le cacher pendant un moment. Ensuite, allons-y et sélectionnons le menu PTN. La largeur sera de 15 RAM. Ensuite, la hauteur sera également de 15 RAM. Ensuite, la couleur de fond sera verte. Je veux dire 238. Allons-y et définissons la position absolue. Ensuite, nous devons positionner à 50 %, cette position sera de 50 %. Encore une fois, nous devons centrer l'élément à l' aide de transform translate. -50 % encore -50 % Je vais aussi me débarrasser de la frontière. Comme vous pouvez le voir, le bouton est centré, arrondissons-le en utilisant le rayon de bordure. Ensuite, je vais régler la taille du téléphone à 2,5 images. Changer l'étang va être audacieux. De plus, nous devons transformer le texte en majuscules, puis changer la couleur qui sera le blanc. Je vais utiliser une boîte flexible. Utilisons le centre de contenu Justify et un centre de rubriques. En plus de cela, je vais utiliser un petit effet d'ombre. Réglons-le sur 0,5 RAM. Ensuite, nous avons besoin de deux RAM. La couleur sera 351-90-2140, et l'opacité, 0,4. Nous avons également besoin de la pointe Bien, après cela, nous devons sélectionner les éléments du lien. Réglons la position sur absolue. La largeur sera alors de 12. La hauteur sera également de 12. Ensuite, nous avons besoin de la couleur de fond à maîtriser, que nous avons utilisée. La couleur sera le blanc. Nous allons arrondir les éléments, puis régler la taille du téléphone à 1,8 RAM et utiliser Flex Box. Nous devons centrer le contenu à l'aide du centre contenu de justification et du centre des éléments de ligne. Très bien, ensuite je vais utiliser Shadow. Je vais récupérer cette valeur d' ici et la coller pour l'élément lien. Bien, après cela, je vais sélectionner les premiers éléments du lien à l' aide du sélecteur d'enfant Réglons la position supérieure à 15 %, puis la position gauche à 75 %. Nous devons également transformer la traduction -50 % à nouveau -50 %. Copions ce code plusieurs fois, changeons le nombre de sélections. Dans l'ensemble, nous avons cinq articles différents. La position du deuxième objet sera 20 % et 20 %. Ensuite, nous aurons ici 60 % pour la position de gauche 20 %. Ensuite, le quatrième élément, nous aurons 85,65 %. Quant au dernier article, nous en avons ici, 45 % puis 85 %. Comme vous pouvez le voir, les éléments sont bien alignés Nous devons maintenant écrire du Javascript. Créons un menu variable BTN. Je vais sélectionner cet élément en utilisant la méthode du sélecteur de requête Spécifiez ici le nom de la classe, menu BTN. Ensuite, je vais créer une autre variable, qui sera le menu. Nous devons ajouter un écouteur d'événements au menu BTN Avec un événement de clic, nous devons créer l'événement de clic . C'est ici. Fonction arrière. Une fois que nous avons cliqué sur le menu BTN, nous devons ajouter une nouvelle classe au menu en utilisant la méthode togal Cette classe va être modifiée et nous devons utiliser cette classe dans fichier CSS qui copie le sélecteur dont nous avons besoin ici le premier élément span, nous devons utiliser display none pour le premier élément et nous devons passer ici la modification finale. Quant au deuxième élément, nous devons l'afficher, nous avons besoin d'un display flex. Une fois que nous avons cliqué sur le menu, le contenu passe du menu à la fermeture. Ensuite, nous devons positionner ici à 50 % et à gauche à 50 % également. Nous devons censurer les éléments. Ils se retrouveront derrière le bouton du menu. Ensuite, nous les afficherons en utilisant le nom de la classe de changement. Nous devons apporter des modifications aux cinq éléments. En fait, les objets ne sont pas bien placés car nous devons nous débarrasser de ce texte à partir d'ici. Bien, nous devons maintenant afficher le bas du menu en utilisant la propriété index. Entre 30 et 100, nous avons ici le bas, comme vous pouvez le voir, une fois que nous avons cliqué sur le bouton du menu, les éléments de navigation sont placés à leur place. Nous devons maintenant utiliser la transition pour rendre l'effet plus fluide. Nous avons besoin de tous ici. La durée sera alors de 0,2 seconde. De plus, je vais utiliser la fonction Si cubique pour rendre l'effet plus agréable. Une fois que nous avons cliqué sur l'icône du menu, les éléments s' afficheront bien. En fait, je vais ajouter différents délais pour les objets afin de rafraîchir l'effet. Maintenant, si je clique, nous aurons ça sympa et cool. En fait, je vais également ajouter une transition par défaut. Maintenant, tout fonctionne parfaitement, et ce projet est terminé. Passons à autre chose. 13. Projet 8 - En-tête de site avec des dégradés: Bien, il est temps de passer à autre chose et de commencer à créer notre prochain projet. Dans cette section, nous allons créer un en-tête de page de destination avec des dégradés CSS Comme vous pouvez le voir, nous avons ici un en-tête de site Web avec de jolis et sympas dégradés de couleurs CSS. Sur le côté gauche, vous pouvez trouver différentes couches avec des dégradés. Vous pouvez également voir le titre suivi du bouton. En ce qui concerne le côté droit, vous pouvez voir ici une simple barre de navigation avec trois éléments de navigation qui est suivie de la bannière. Vous pouvez voir ici les éléments du titre. L'un des titres contient ces jolis et sympas dégradés CSS En bas, vous trouverez trois phonosomicons. Ils représentent les liens vers les réseaux sociaux. OK, asseyons-nous à propos de ce projet. Allons-y et commençons à le construire. J'ai créé un nouveau dossier sur le bureau. Allons-y et ouvrons-le dans le code VS. Je vais créer nos fichiers de travail. Le premier sera l'index HTML, puis nous aurons un fichier pour le style CSS CSS. Ouvrons le fichier HTML d'index et créons la structure HTML de base. Je vais changer le titre. Ce sera une page de destination, puis je vais lier le fichier ESS ici. Allons-y et ouvrons le projet dans le navigateur à l'aide du serveur live. Ensuite, je vais placer le navigateur et l'éditeur côte à côte afin de rendre notre processus de travail plus pratique et plus simple. Ensuite, je vais prendre le lien du phono CDN, car nous allons utiliser les icônes phono Copions le lien à partir d'ici. Ouvrez ensuite la balise de lien dans l'élément principal et collez le lien ici. Ensuite, je vais visiter le site Web de Google Phones. Parce que nous allons utiliser le téléphone Google tout au long du projet. Allons-y et cherchons Tilt, Warp the style. Copiez le lien et collez-le uniquement dans la tête. Très bien, nous sommes prêts à commencer à écrire le balisage du démon H. Je vais ouvrir le deep tag qui sera le conteneur dans lequel je vais insérer l'atterrissage. Ensuite, voici les couches, la couche un, la couche deux et la couche trois. À l'intérieur de la troisième couche, nous aurons une couche intérieure. Ensuite, je vais créer la navigation sans aucun élément. Insérons ici Aucun article. Nous aurons trois éléments de lien différents. Ouvrons l'élément de lien et collons ici à la page d'accueil. Ensuite, le second sera Explore. Quant au troisième, ce sera Contact. Bien, après la navigation, nous avons besoin d'une bannière dans laquelle je vais ouvrir H one, avec le titre des dégradés d'éléments Ensuite, nous avons besoin d'un bouton. Le type sera un bouton. Ensuite, nous avons besoin d'un élément span avec le texte Explore. Ensuite, je vais placer avec la classe FA solid FA arrow. Hein ? En fait, nous avons besoin ici de l'élément I et non du deep. Nous avons ici le côté gauche de la page. Ensuite, nous devons créer un en-tête dans lequel je vais placer H un élément de titre avec le texte de la page de destination. Ensuite, nous avons besoin ici des dégradés CSS de l'élément span. OK, après cela, nous devons créer les liens vers les réseaux sociaux que nous devons développer avec la classe des médias sociaux dans laquelle je vais placer un élément avec les classes FA Brands, Facebook. Dupliquons-le deux fois. Changez les noms des classes. Le second sera FA Instagram. Quant au troisième élément de lien, ce sera FA Twitter. C'est bon, alors c'est tout. Tous les éléments sont créés et il faut maintenant commencer à écrire le CSS. Je vais sélectionner tous les éléments. Et utilisez certains styles par défaut. Fixons la marge et mettons les deux à zéro. Ensuite, nous avons besoin que la taille de la boîte soit une zone de bordure, car je vais définir la décoration du texte sur aucune Ensuite, nous avons besoin de la famille téléphonique. Ce sera Tilt Warp, le téléphone Google que nous avons sélectionné Comme vous pouvez le constater, les vignettes par défaut sont appliquées. Ensuite, je vais régler la taille du téléphone de l'élément HTML à 62,5 %. Pour qu'un m soit égal à dix pixels, nous allons utiliser M comme unité de mesure Ensuite, je vais sélectionner le conteneur dont la largeur est réglée à 100 %, puis la hauteur sera de 100 pieds de hauteur. Utilisons la couleur de fond. Ça va être de 162. Nous avons ici la couleur bleue. Ensuite, je vais sélectionner l'atterrissage. Réglons la largeur à 95 %, puis la hauteur à 90 %. Je vais utiliser un arrière-plan avec une fonction de dégradé linéaire. La direction sera vers le bas. Nous avons besoin ici de la première couleur qui sera un D24. Ensuite, le prochain sera 2d48. 99, 70 % Nous avons ici un beau dégradé. Ensuite, nous avons besoin de box shadow avec les valeurs 01 Ram, cinq Ram. Et la couleur sera le noir avec une opacité plus faible, 0,2 d'accord ? Maintenant, pour le rayon, il faut qu'il y ait un Ram, comme vous pouvez voir les coins qui l'entourent. Ensuite, je vais centrer l'élément à l'aide d'un livre en lin. Nous devons justifier le centre de contenu , puis un centre de rubriques. Comme vous pouvez le constater, l'en-tête est centré sur la page. Ensuite, je vais sélectionner la première couche. Réglons sa largeur à 70 %. Ensuite, la hauteur sera de 120 % pour régler la position en valeur absolue Ensuite, nous avons besoin de la position relative de l'élément parent, qui est un atterrissage. Définissons le haut. La position va être de -10 % alors que la position de gauche va être de -5 %. Je vais utiliser une fonction de gradient linéaire La première couleur sera C558. Ensuite, le prochain sera 4538. Nous avons ici la première couche. Ensuite, je vais utiliser le rayon de bordure avec les valeurs zéro, 50 % 50 % puis zéro. De plus, nous avons besoin d'une opacité de 0,5. Ensuite, je vais utiliser une ombre avec des valeurs 01 Ram, cinq Ram Et le RGBA est de couleur noire avec une opacité de 0,5 Comme vous pouvez le constater, nous avons ici la première couche En fait, nous devons masquer les parties de la première couche en utilisant Overflow He OK, c'est ça. La première couche est prête. Je vais dupliquer ce code pour changer de hauteur, ce sera un 40 % puis la position de gauche sera de 15 % à 50 %. Ensuite, la première couleur sera 338 Pour ce qui est de la deuxième couleur, je vais utiliser 452. Ici aussi, valeur en pourcentage 40 % En fait, quelque chose ne va pas ici. Oui, nous devons changer le nom de la classe. Ce sera la deuxième couche. Nous avons ici la deuxième couche. Dupliquons ce code, changeons le nom de la classe. Ce sera la troisième couche. Nous avons besoin que la hauteur soit de 1 à 30 % , puis la position de tête sera -25 %. Et nous devons changer les couleurs dans la fonction de gradation linéaire, la première sera de 95. En fait, nous avons besoin ici du sens de la transition vers, n' En fait, nous avons besoin ici du sens de la transition vers, Ensuite, la couleur suivante sera 5584. Débarrassons-nous de la valeur en pourcentage. Nous avons ici la troisième couche. Ils sont plutôt jolis. Débarrassons-nous de l'opacité. Ici, nous n'avons pas besoin d'opacité. Nous avons donc maintenant de bien meilleurs résultats. Très bien, allons-y et sélectionnons la couche intérieure. Réglons avec 100 %, puis la hauteur sera de 100 %. Prenons cette fonction graduée linéaire, changeons la direction en haut à droite selon nos besoins La première couleur sera 245. La prochaine couleur sera b1666. Ensuite, nous devons transformer avec une fonction de traduction des valeurs. Nous allons avoir 30 Ram, puis 15 Ram. Nous devons déplacer l'élément dans les deux sens. Utilisons le rayon de bordure pour arrondir l'élément 50 %. Maintenant, nous devons masquer les parties de l' élément en utilisant Overflow Heiden OK, donc je trouve que ça a l'air plutôt sympa. Maintenant, il faut sortir du no bar. Réglons la position sur absolue. La position supérieure sera zéro, position gauche sera zéro. Avec 100 %, la hauteur sera de dix ml. Je vais utiliser des livres flexibles. Nous allons placer les éléments au centre verticalement. Nous devons également justifier le contenu avec Flex, car nous allons placer les éléments du bon côté. Réglons la mise à 100 RAM. Nous pouvons maintenant personnaliser les liens. Sélectionnons les éléments A. Je vais définir la taille de police sur 1,4 RAM. La couleur sera le blanc. Nous avons besoin que la transformation du texte soit en majuscules, alors Pnight sera 300 Et nous avons également besoin de l' espace en utilisant la marge, 02 RAM sur les côtés gauche et droit, puis de créer un espace entre les lettres. Réglons-le sur 2,1 RAM. De plus, nous avons besoin d'un effet d'ombre à 3 020,5 RAM, d' un RAM avec une couleur noire RGBA et d'une opposition de 0,2 OK, c' Les éléments de navigation sont plutôt jolis. Ensuite, je vais sélectionner la bannière. Réglons la position sur absolue, puis la position supérieure sera de 35 % de la position gauche, 10 %. Voici la bannière, le titre en bas. Allons-y et personnalisons les éléments du titre, augmentons la taille du téléphone. Il y aura dix RAM, puis la couleur sera blanche. De plus, nous avons besoin d'un espace entre les lettres. Réglons-le sur 2,3 RAM. Ensuite, nous avons besoin de pots à marge. Réglons-le sur cinq RAM. Nous avons également besoin d' une ombre de texte avec les valeurs 0,5 Ram, deux Ram et la couleur RGBA Le titre est plutôt sympa. Ensuite, je vais m' occuper du bas. Sélectionnons-le. Je vais régler la largeur à 20 RAM. La hauteur sera de cinq béliers. Ensuite, nous avons besoin que la couleur de fond soit blanche. Réglons la bordure 2.2 Ram, solide, de couleur blanche. Ensuite, je vais définir le rayon de bordure de 2,7 RAM. Ici, nous avons le fond. Je vais utiliser des livres flexibles, c'est une ligne au centre. Quant à la propriété justify content, je vais la définir pour qu'elle soit espacée autour du texte et que les flèches soient bien alignées. En fait, nous avons besoin d' espace entre les deux et non les rondes. C'est ça. Il nous reste maintenant un rembourrage pour former un seul RAM. Ensuite, je vais augmenter la taille du téléphone, il y aura 1,8 RAM. Ensuite, nous devons procéder à la transformation fiscale pour qu'elle soit en majuscules. Utilisez également un espace entre les lettres. Mettons 32,2 RAM et changeons la couleur. Je vais utiliser ici la couleur neuf, F cinq, le texte est plutôt joli. Ensuite, je vais utiliser un effet d'ombre. Soit 3 020,5 RAM. Need 0,5 image à nouveau. Et la couleur, 230-31-7590 Et l'opacité 0,3 Très Ensuite, je vais utiliser Box Shadow 3,020,5 Fram, deux Ram. Et la couleur RGBA, je veux dire la couleur noire avec une opacité 0,2 Enfin, utilisez le point cos Bien, maintenant nous devons passer à autre chose et supprimer l'icône, je veux dire la flèche sur le côté droit. Réglons avec 30 % et la hauteur sera de 100 %. Changeons la couleur de fond. Je vais utiliser ici E C 245. Nous devons maintenant afficher la flèche. Réglons le rayon à 0,7 Ram, 0,7 Ram et zéro. Nous allons maintenant utiliser la boîte Flex pour placer la flèche au centre en utilisant le centre contenu de justification et le centre des éléments de ligne. Et changez aussi la couleur, rendez-la blanche. Augmentons la taille du téléphone. Il y aura 1,8 tram. Ici, nous avons la flèche. Nous allons maintenant nous occuper de l'en-tête, l'élément d'en-tête sur le côté droit. Réglons la position sur absolue. La première position sera de 30 %. Pour ce qui est de la bonne position, je vais atteindre dix Ram. Augmentons la taille du téléphone, il y aura cinq RAM. Ici, nous avons le titre sur le côté droit. Réglons la largeur, 243 RAM. Puis une ligne de texte sur le côté droit. Changez également la couleur, rendez-la blanche. Utilisez ensuite un effet d'ombre. Nous avons besoin de 0,5 RAM, d'une RAM et de la couleur RGBA avec une pâte de 0,2 . Le titre est bien meilleur Nous devons maintenant sélectionner l'élément span. Utilisons le bloc d'affichage. Ensuite, nous avons besoin d'une taille de police de six RAM. Ensuite, nous avons besoin de transformer le texte en majuscules comme nous en avons besoin ici. Dégradé linéaire, la première couleur sera 815. Ensuite, le suivant sera 447 avec 90 % Pour appliquer le dégradé linéaire, nous avons besoin du clip d' arrière-plan Property Webkit, ce sera du Et nous avons également besoin du texte du webkit, de la sensation de couleur. Cela va être transparent. Comme vous pouvez le voir, nous avons ici un effet de dégradé agréable et cool pour l'élément d'en-tête. OK, maintenant nous devons nous occuper des réseaux sociaux. Réglons la position sur absolue. La position la plus basse sera de cinq RAM. Pour ce qui est de la bonne position, je vais la régler sur dix RAM. Ensuite, nous avons besoin de livres flexibles. Ici, nous avons les icônes. Je vais sélectionner un élément de réseau social. Augmentons la taille du téléphone, il y aura deux RAM. Ensuite, il faut que la couleur soit blanche. Nous avons également besoin d'une marge de 0,15 Ram. Utilisons un effet d'ombre avec les valeurs 0,5 Ram, un Ram. La couleur noire du RGBA. Changez également le curseur, faites-le pointer. OK, c'est ça. Tout a l'air plutôt sympa. Avec ce projet, c'est terminé. J'espère que c'était intéressant et que vous l'avez apprécié. Passons à autre chose. 14. Project 9 - Formulaire de communication avec le mode clair / sombre: OK, il est temps de passer à autre chose et de commencer à créer notre prochain projet. Dans cette section, nous allons créer un formulaire de contact en mode clair et en mode sombre. Comme vous pouvez le constater, le projet est en mode clair par défaut . Vous pouvez voir ici quelques champs de saisie différents avec un bas. Ici, nous avons deux fonds différents, clair et foncé. Nous avons également ici quelque chose comme le soleil. Si je clique sur le noir, le projet passe en mode sombre et le soleil se transforme en lune. Ensuite, si je clique sur Lumière, le projet reviendra en mode Lumière. Je pense que ce projet sera intéressant et utile pour vous car nos jours, les sites Web utilisent le mode clair et le mode sombre. Vous allez donc apprendre quelque chose de nouveau dans ce projet, d'accord ? Il est maintenant temps de passer à autre chose et de commencer à le construire. J'ai créé un nouveau dossier sur le bureau, qui est actuellement vide. Allons-y et ouvrons-le dans le code VS. Ensuite, nous devons créer nos fichiers de travail pour le HTML. Ensuite, pour le CSS, nous avons également besoin d'un fichier pour Javascript. Ouvrons l'index, chargeons le fichier HTML et créons le document HTML de base. Je vais changer le titre. Il va faire nuit claire, changez de Togo. Ensuite, je vais lier le CSS et passer la souris sur les fichiers. Ouvrons la balise script et spécifions le nom du fichier dans l'attribut source. Ensuite, nous devons ouvrir le projet dans le navigateur à l' aide du serveur live. Mettons également l'éditeur et le navigateur côte à côte, comme suit. Maintenant, je vais utiliser des Google Fonts. Visitons le site Web et recherchons Google Phone appelé Ubuntu. Je vais sélectionner quelques styles différents ici, puis je vais copier le lien et le coller dans l'élément principal, nous sommes prêts à commencer à écrire le code. Je vais commencer par le balisage H L. Ouvrons le tag avec le conteneur de classe dans lequel je vais ouvrir le wrapper de formulaire À l'intérieur de l'emballage du formulaire, nous aurons l'emballage en mousse à gauche et l'emballage du formulaire Ouvrons le côté gauche pour créer Sun Moon. Ensuite, nous avons besoin d'un bâton avec un élément de travée. Il a la classe BG, nous avons besoin de trois éléments d'envergure. Le second sera clair, le clair foncé car le bouton de texte aura un attribut type, ce sera un bouton. Ensuite, nous devons prendre ici le côté droit du formulaire. Ouvrons H un élément d'en-tête qui sera « Contactez-nous ». Insérons votre saisie dans le champ de classe. Le type sera du texte. Nous avons également besoin d'un attribut d'espace réservé avec votre nom. Dupliquons-le et changeons l'espace réservé. Ce sera un e-mail. Je vais également modifier l'attribut type. Ce sera aussi un e-mail. Ensuite, nous avons besoin d'une zone de texte. Je vais ajouter ici une classe, ce sera un champ puis un message également, je vais utiliser un attribut placeholder avec le texte de votre message OK, ensuite il nous faut du bas. Le type sera le plus bas. Je vais donc instituer l'envoi de SMS. Très bien, donc je pense que tout est prêt. Allons-y et commençons à écrire le CSS. Je vais utiliser certains styles par défaut. Sélectionnons chaque élément fixons la marge et mettons à zéro. Ensuite, nous avons besoin que la taille de la boîte soit une zone de bordure. Je vais mettre les grandes lignes à néant. Réglons la famille de téléphones sur, que nous venons de récupérer sur le site Web de Google Phones. OK, les styles par défaut sont donc appliqués. Ensuite, je vais définir la taille de police de l'élément H tmul à 62,5 %, car nous allons utiliser m comme unité de Dans ce cas, un m sera égal à dix pixels. Ensuite, nous devons sélectionner le conteneur. Définissons la largeur. Ce sera 100 %, puis la hauteur sera de 100 % de hauteur de vue. Changeons la couleur de fond. Ça va être blanc. Ensuite, je vais utiliser les livres Flex. Nous devons centrer l'élément en utilisant le centre contenu de justification et le centre des éléments de ligne. Comme vous pouvez le constater, le contenu est parfaitement centré sur la page. Utilisons un emballage en mousse et définissons sa largeur, 280 RAM. Ensuite, nous avons besoin de hauteur, ce sera 60 Ram. Ensuite, nous avons besoin que la couleur de fond soit blanche. Je vais utiliser des livres en lin. Réglez le rayon de la bordure à trois béliers, arrondissez les coins. Je vais également utiliser un effet d'ombre. Réglons Box Shadow à zéro, à Ram, six Ram. Et la couleur sera RGBA 61215 et l'opacité 0.2 Bon, nous avons ici la forme avec Ensuite, je vais sélectionner l'emballage du formulaire à gauche. Réglons sa largeur à 40 %. Ensuite, je vais dupliquer ce code. Changez le cours dont nous avons besoin ici, non ? Et la largeur sera de 60 %. D'accord, à côté d'utiliser la boîte flexible pour le côté gauche, changeons de direction. Ce sera également une colonne, nous avons besoin que vous justifiiez le contenu par un espace entre les deux, nous avons besoin d'un peu d'espace entre les éléments. Quant aux objets Elin , ils seront au centre. Suivant. Je vais créer de l' espace à l'aide d'un rembourrage Disons-le à 100, puis à 20,0. Ensuite, je vais sélectionner le Soleil et la Lune Passons la largeur à 12, puis la hauteur sera également de 12 RAM. Je vais changer le fond. Utilisons le dégradé linéaire. Il faut que la direction soit de 225 degrés. Quant à la première couleur , elle sera F 9, alors la couleur suivante sera 55. Ensuite, je vais arrondir l'élément en utilisant le rayon de bordure. Ici, nous avons le soleil. Ensuite, je vais prendre ici, en bas, sur le côté gauche, réglons sa largeur à 20 RAM. Ensuite, la hauteur sera de quatre béliers. Je vais changer la couleur de fond. Il va y en avoir 888. Alors débarrassons-nous de la frontière, faisons en sorte qu'il n'y en ait aucune. Et nous avons également besoin d' un rayon de bordure, trois RAM. Ici, nous avons le fond. Ensuite, je vais régler la taille du téléphone à 1,4 RAM. Changez également la couleur. Ça va être 777. Ensuite, je vais mettre le curseur sur le pointeur. Très bien, après cela, je vais sélectionner le bas avec un élément de rotation. Réglons la position sur absolue. Nous avons besoin de la position relative de l'élément parent, qui est le bas dans ce cas. Ensuite, il faut que deux positions soient nulles. Ensuite, je vais régler la largeur à 50 %. Changer également la hauteur, faire à 100 % Ensuite, je vais sélectionner l'arrière-plan. Changeons la couleur de fond. Ça va être blanc. Nous avons également besoin d'un rayon de bordure d'une valeur de trois RAM. Réglons la position gauche à zéro. Il nous faut de l'ombre. Réglons-le sur 0,5 RAM, un RAM. Et le RGBA est de couleur noire avec une opacité de 0,1. Nous avons ici le fond, qui va passer du clair au foncé Ensuite, je vais sélectionner le clair et le foncé. Réglons l'affichage pour qu'il soit flexible. Nous devons centrer le contenu à l'aide du centre contenu Justify et d'un centre des éléments de ligne. Après cela, je vais sélectionner la lumière séparément, position gauche à zéro. Pour ce qui est du noir, je vais le mettre à zéro dans la bonne position. OK, ça y est, le bouton est personnalisé. Ensuite, je vais m' occuper du côté droit. Nous avons besoin de livres flexibles. Ensuite, je vais changer de direction, en faire une colonne. De plus, je vais éliminer les objets au centre. En ce qui concerne le contenu justifié, je vais le mettre à un espace entre les deux. Afin de créer un espace entre les éléments, fixons la mise à huit RAM, puis à zéro. Comme vous pouvez le constater, les éléments sont alignés. Il est maintenant temps de personnaliser les éléments du titre. Réglons la taille de police à cinq RAM. La couleur sera alors 777. Voici le titre. Ensuite, je vais sélectionner Field, régler la largeur sur 50 RAM. La hauteur sera alors de cinq béliers. Je vais me débarrasser de la bordure, puis créer une bordure en bas. Réglons-le sur 0,2 RAM, solide. La couleur sera BBB. Ici, nous avons les champs de saisie avec une bordure en bas. En fait, diminuons la largeur, faisons-en 30 RAM car ils sont trop grands. Nous avons maintenant de bien meilleurs résultats. Ensuite, je vais régler la taille du téléphone à 1,4 RAM. La couleur sera alors 555. Changez également la couleur de la teinte noire, rendez-la transparente. Ensuite, je vais sélectionner Field, puis l'attribut placeholder Changeons la transformation du texte, mettons-le en majuscules, nous avons donc besoin que la taille du téléphone soit de 1,4 RAM. Changez ensuite la couleur, faites-en BBB. De plus, nous avons besoin d'un espacement des lettres avec la valeur 0,1 Ram. Comme vous pouvez le constater, l'attribut placeholder est plutôt joli Ensuite, je vais sélectionner la zone de texte avec le message du cours. Réglons la hauteur à dix Ram. Et je vais également désactiver la fonction de redimensionnement. Réglons-le sur aucun. OK, c'est tout pour les champs de saisie. Maintenant, il faut faire attention au fond. Définissons avec, ce seront les deux Ram, puis la hauteur sera de 4,5 Ram. Ensuite, je vais changer la couleur de fond. Utilisons ici la couleur 262431. De plus, je vais définir la bordure sur aucune, puis arrondir le bouton en utilisant le rayon de bordure. Réglons-le sur trois RAM ici, en bas. Changeons la taille de police. Ce sera 1,4 RAM. Ensuite, je vais changer de couleur. Faisons en sorte que ce soit BB, transformons le texte en majuscules. Créez ensuite un espace entre les lettres, faites en sorte que ce soit 0,1. Changez de cap, c'est le pointeur. Et nous avons également besoin d'un effet d'ombre. Disons 2012. Et la couleur sera noir avec une opacité de 0,1 OK, c'est le bouton, plutôt sympa Je vais créer un effet de clic en utilisant la classe de stock active. Nous devons nous transformer. Traduisez Y avec une valeur de 0,2 Ram. Une fois que j'ai cliqué, nous obtiendrons ce bel effet de clic. Très bien, maintenant je dois ajouter ici un fond de cercle. Personnalisons les éléments sélectionnés. Réglez la largeur sur 120 RAM. Ensuite, la hauteur sera également de 120 RAM. Je vais utiliser le rayon de bordure. Réglons-le à 50 %. Arrondissez l'élément. Je vais récupérer cet arrière-plan avec sa fonction de dégradé linéaire. Voici le cercle. Nous devons changer sa position. Réglons-le sur absolu. Ensuite, nous avons besoin de la position relative du conteneur. La position supérieure sera de -70 %. Quant à la position gauche, elle sera de 50 %. Et nous devons centrer l' élément horizontalement en utilisant transform translate x -50 % OK, donc maintenant, la seule chose que j'ai à faire est créer l'ombre avec les valeurs 01 Ram, cinq Ram La couleur sera 248-10-6509. Avec une opacité de 0,2, nous devons placer le cercle derrière l' emballage Réglons la position sur relative. Ensuite, utilisez la propriété index de la valeur 100. OK, maintenant tout est plutôt beau. Nous pouvons commencer à écrire le Govscript. Allons-y et créons une nouvelle variable qui sera un conteneur. Je vais le sélectionner en utilisant la méthode du sélecteur de requête. Nous devons indiquer ici le nom de la classe. Ensuite, nous devons sélectionner le bouton. Placons ici l'enveloppe du formulaire de nom de classe à gauche, suivie du bouton de nom de balise OK, nous devons maintenant ajouter un écouteur d'événements au bouton avec un événement de clic Nous avons également besoin ici de la fonction Cope. Une fois que nous avons cliqué sur le bouton, nous devons ajouter une nouvelle classe au conteneur en utilisant la méthode to. Appelons le changement de nom de classe. Nous devons maintenant utiliser ce nom de classe dans le fichier Css pour créer de nouveaux styles pour le mode sombre. Je vais commencer par l'arrière-plan sélectionné à l' aide de la classe switch. Nous avons besoin ici d'une transformation, nous traduisons la fonction x et la valeur sera 100 %. Utilisez également la transformation de transition, la durée sera de 0,4 seconde. Une fois que nous avons cliqué, l'élément passera bien du clair au foncé et du foncé au clair. OK, allons-y et sélectionnons Switch with container. Je vais changer la couleur de fond. Ce sera 262431, puis vous utiliserez la transition. Une fois que j'ai cliqué, l'arrière-plan du conteneur passe du clair au foncé. Ensuite, nous devons prendre soin de l'arrière-plan du cercle. Sélectionnons-le en utilisant le commutateur pour changer l'arrière-plan. Je vais utiliser un dégradé linéaire. La direction sera de 225 degrés. Ensuite, je vais utiliser la première couleur, 93 DFF. Quant à la deuxième couleur, elle sera 3374 Nous avons également besoin de box shadow 015 avec une couleur RTB 60508115 et opacité 0,5. Maintenant, comme vous pouvez le voir, le cercle, la couleur de fond du cercle couleur de fond du Cain, passons à autre chose et sélectionnons Switch with form wrapper. Je vais changer la couleur de fond dont nous avons besoin ici. Cette couleur à nouveau, 262431, puis utilisez la transition. Une fois que j'ai cliqué, l'arrière-plan du formulaire de contact changera bien. Ensuite, nous devons changer le soleil. Nous allons donc sélectionner ces éléments. Changez le fond dont nous avons besoin ici, dégradé linéaire. La direction sera 225. En ce qui concerne les couleurs que je vais utiliser , elles ont copié le code entier et l'ont collé ici Ensuite, je vais changer l'ombre de la boîte. Faisons en sorte qu'il n'y en ait aucune. Maintenant, le soleil change. Mais nous avons besoin ici d'un effet supplémentaire. Nous devons transformer le soleil en lune. Nous allons sélectionner l'élément Soleil Lune, suivi de l'élément après la mer. Je vais mettre le contenu à vide. Ensuite, nous avons besoin que la position soit absolue. Utilisons la position relative pour l'élément parent, qui dans ce cas est le soleil et la lune. Définissons bien. La position sera nulle. Pour la première place, je vais également mettre le score à zéro. Ensuite, la largeur sera de 9,5 RAM. La hauteur sera également de 9,5 fram. Changeons le rayon, il sera de 50 %. Il nous faut un cercle. Modifiez également la couleur de fond. Je vais utiliser ici cette couleur foncée. OK, maintenant c'est fait, mais nous devons ajouter ici un certain effet. En fait, changeons la couleur d'arrière-plan , puis utilisons l'échelle de transformation. Mets-le à zéro. Nous devons augmenter l'échelle. Une fois que j'ai cliqué sur le bouton, utilisons le commutateur de classe suivi du soleil et de la lune. Avec After Do Elements, je vais redéfinir la couleur de fond pour qu'elle redevienne foncée. Nous devons également augmenter l'échelle de 0 à 1. Nous avons également besoin d'une transition pour un effet plus fluide Nous avons maintenant de bien meilleurs résultats. Mais nous devons ici transformer origine pour qu'elle soit en haut plutôt qu'au centre. Maintenant, comme vous pouvez le voir, l'élément augmente depuis le côté droit. Et nous avons ici des résultats bien meilleurs et intéressants. Très bien, ensuite je vais m' occuper du paton lui-même. Sélectionnons le bouton avec l'interrupteur, je vais changer la couleur du fond. Utilisons ici la couleur 1128. Il faut aussi sa transition pour un effet fluide. Comme vous pouvez le constater, le fond change de couleur de fond. Nous devons également changer la couleur de l'élément span. Sélectionnons Changer d'arrière-plan et changeons la couleur d'arrière-plan. Utilisez ici, 34323. Encore une fois, transition, je veux dire que nous devons ajouter ici couleur de fond avec une durée d'un point de 1 seconde. Comme vous pouvez le voir, le bouton est plutôt joli. Une fois que nous avons changé de mode, nous devons maintenant prendre le texte de l'entrée. Sélectionnons le champ à l'aide d'un interrupteur et changeons la couleur. Faites-le léger avec BBB is light. Enfin, nous avons le haut du bas, je veux dire le bouton Soumettre. Sélectionnons-le et changeons la couleur de fond. Ce sera BBB, et nous devons également changer de couleur Faisons en sorte qu'il fasse noir, accord, alors c'est tout, tout fonctionne parfaitement. Et nous avons ici ce joli et cool passage de la lumière à l'obscurité. 15. Project 10 - Barre de recherche: Très bien, alors passons à autre chose et commençons à créer notre prochain projet. Dans cette section, nous allons créer une barre de recherche sympa et sympa. Comme vous pouvez le voir, nous avons ici un cercle au centre de la page, une icône de recherche. Si je clique sur cet élément, la barre de recherche s'agrandira. Vous pouvez taper ici. Pensez également que l'icône de recherche est modifiée avec le bouton de fermeture X. Si je clique sur ce bouton, la barre de recherche se ferme. Et nous reviendrons également ici, sur l'icône de recherche. Très bien, asseyons-nous sur ce projet. C'est simple, mais je suis sûr que vous apprécierez et qu'il sera intéressant et utile. Allons-y et commençons à le construire. J'ai créé un nouveau dossier dans la barre de recherche du bureau, qui est actuellement vide. Allons-y, ouvrons ce dossier dans le code Us, puis créons des fichiers de travail pour HTML. Ensuite, nous avons besoin d'un fichier pour CSS, également pour le script Java. Ensuite, je vais ouvrir le fichier HTM indexé et créer la structure HTML de base Allons-y et changeons le titre. Ce sera une barre de recherche, puis je vais lier les fichiers CSS et Js. Ouvrons la balise script et spécifions le nom du fichier dans l'attribut source. OK, ensuite je vais ouvrir le projet dans le navigateur. Ensuite, placez l'éditeur et le navigateur côte à côte. Ensuite, je vais récupérer le lien CDN du téléphone, car nous allons utiliser certaines icônes du téléphone tout au long de ce projet Copions le lien, puis ouvrons la balise de lien et collons-la dans l'attribut de référence H. En plus de cela, nous avons besoin de téléphones Google. Allons-y et visitons le site Web. Je vais rechercher un téléphone appelé Signica Negative. Récupérons les styles , puis copions le lien et collez-le dans l'élément principal. Très bien, nous sommes donc prêts à commencer à écrire le balisage HTML Je vais ouvrir Deep Type, qui sera le conteneur. Insérons ici la barre de recherche, dans laquelle je vais insérer élément de saisie avec le type texte et avec un type d' attribut substituable De plus, nous aurons ici un phontosomicon des classes FA solide, FA loupe Nous avons également besoin ici d' un autre phonosomicon, les classes FA solid Nous avons ici tous les éléments. Et maintenant, nous pouvons commencer à écrire le CSS. Je vais sélectionner chaque élément, puis définir une marge et les mettre tous les deux à zéro. Ensuite, nous avons besoin que la taille de la boîte soit une zone de bordure. Je vais me débarrasser du plan par défaut, puis changer de famille de téléphones. Ce sera le téléphone que nous avons sélectionné, le Signia negative Sensori En outre, je vais régler la taille du téléphone de l'élément H tim à 62,5 % afin d'utiliser le RAM comme unité de mesure OK, allons-y et prenons soin du conteneur avec lequel je vais régler à 100 %, puis la hauteur sera de 100 points de vue. Nous avons également besoin ici de la couleur de fond. Je vais utiliser ici la couleur 1611. Il est de couleur foncée. Nous avons également besoin de Flexbox pour centrer le contenu. Justiquons un centre de contenu et un centre d'éléments de ligne. Comme vous pouvez le constater, le contenu est centré sur la page. Ensuite, je vais sélectionner la barre de recherche. Réglons la largeur à 45 RAM. La hauteur sera alors de huit béliers. De plus, nous avons besoin que la couleur de fond soit blanche. Ensuite, je vais utiliser le rayon de bordure pour arrondir les coins. Réglons-le sur dix RAM. Utilisons également un effet d' ombre. Ce sera 01 Ram, 6 Ram. Et la couleur sera RGBA, noir avec une opacité plus faible, 0,6 OK, après cela, je vais aligner le texte sur le côté droit Ensuite, je vais sélectionner les éléments d'entrée. Réglons avec deux 100 % , alors la hauteur sera également de 100 %. Débarrassons-nous de la bordure par défaut puis utilisons le rayon de bordure avec la valeur dix Ram. Ensuite, je vais définir la couleur de fond sur Non. Nous avons également besoin d'un Ram, 7,5 Ram, puis un Ram, puis deux Ram Nous avons de l'espace à l'intérieur de l'entrée. Ensuite, je vais augmenter la taille du téléphone, il y aura deux RAM. Ensuite, je vais sélectionner l'élément I de la barre de recherche, je veux dire Fmoc Réglons la position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui est la barre de recherche du wrapper Les deux positions seront de 50 % Ensuite, la bonne position sera de 0,5. Ensuite, nous devons traduire x -50 % En fait, nous avons besoin de y au lieu de x pour que les icônes soient centrées verticalement Mettons-nous au point avec sept RAM. Et la hauteur sera également de sept béliers. Ensuite, nous avons besoin que la couleur de fond soit la couleur rouge ED 3758 Réglons le rayon de bordure à 50 % afin d'arrondir l'élément. Utilisez également Flex Box pour centrer les éléments en utilisant le centre contenu de justification et le centre des éléments de ligne. Comme vous pouvez le constater, les icônes sont centrées. Augmentons la taille du téléphone, faisons-en 2,5 images. Changez ensuite la couleur, rendez-la blanche. Changez également le type de curseur, faites-en un pointeur. OK, maintenant il est temps d' écrire du Javascript. Créons une variable, qui sera le conteneur. Je vais sélectionner cet élément en utilisant la méthode du sélecteur de requête Nous devons spécifier ici le conteneur du nom de classe. Ensuite, nous avons besoin d'une autre variable qui sera de telles icônes. Sélectionnons les deux éléments à l'aide du sélecteur de requête. Toutes les méthodes dont nous avons besoin ici pour passer la barre de recherche. Ensuite, je vais parcourir les icônes en utilisant la méthode du forage, vous avez besoin de l'icône de recherche ici mais sans les guillemets. Ensuite, je vais passer ici la fonction flèche. Je vais ajouter un écouteur d'événements à l'icône de recherche avec un événement de clic avec une fonction de rappel Nous devons maintenant ajouter une classe au conteneur au clic en utilisant la méthode togal Le nom de la classe va être, disons, change. Nous devons donc maintenant utiliser cette classe dans le fichier CSS. Tout d'abord, changeons La largeur de la partie de recherche sera de huit RAM. Ensuite, je vais sélectionner la partie de recherche avec modification. Réglons avec 245 fram. Utilisez également la transition pour un effet plus fluide. Nous avons besoin ici de la largeur et de la durée, 0,5 seconde. De plus, je vais utiliser la fonction Si cubique pour rendre l'effet plus agréable. Cela se trouve dans les valeurs de la fonction. Une fois que j'ai cliqué sur l' icône, la partie de recherche s'agrandit. Je vais mettre l'opacité à zéro pour l'élément d'entrée. Ensuite, je vais le sélectionner avec modification et régler l'opacité sur un Je vais utiliser la transition avec opacité et avec une durée de 0,5 seconde De plus, nous avons besoin d'un temps de retard de 0,3 seconde. Nous avons besoin de la même transition pour l' élément d'entrée par défaut, mais sans le délai. Maintenant, tout fonctionne bien. Maintenant, nous devons prendre soin des icônes. Sélectionnons les éléments à l'aide du sélecteur de graphique numéro trois. Réglez l'opacité à 20. Ensuite, nous devons sélectionner les éléments avec changement de classe. Nous avons besoin ici d'une opacité unique. Nous devons également apporter des modifications avec le sélecteur de graphique deux et l'opacité zéro Enfin, nous avons besoin d'une transition pour rendre les effets plus fluides. Comme vous pouvez le voir, par défaut, nous avons ici l'icône de recherche. Une fois que nous avons cliqué, il se transformera en bouton de fermeture en X. Tout fonctionne parfaitement. Et nous avons ici une barre de recherche cool et moderne. Passons au projet suivant. 16. Projet 11 -: Très bien, il est donc temps de passer à autre chose et de commencer à créer notre prochain projet. Dans cette section, nous allons créer une application qui sera une calculatrice Javascript. Comme vous pouvez le constater, la calculatrice a look agréable, moderne et amusant. Si nous faisons ici l' un des calculs, nous obtiendrons les bonnes réponses. Comme vous pouvez le constater, le calculateur fonctionne bien. Nous avons ici un écran suivi des boutons. Deux d'entre elles sont différentes. Le premier, je veux dire le rouge, est destiné à être supprimé. Quant au bouton vert, il s'agit d'un bouton équivalent. Très bien, alors asseyons-nous sur ce projet. Commençons. J'ai créé un nouveau dossier sur le bureau qui est vide pour le moment. Allons-y et ouvrons-le dans le code VS. Ensuite, je vais créer les fichiers de travail pour l'index HTML HTML. Ensuite, pour le CSS, qui sera le style CSS nous avons également besoin d'un fichier pour le script Javascript JS. Ensuite, je vais ouvrir le fichier HTML d'index et créer la structure HTML de base. Tout d'abord, je vais changer le titre. Ce sera une calculatrice. Ensuite, je vais lier le CSS et les fichiers Javas. Nous devons ouvrir le script Tac et spécifier le nom du fichier dans l'attribut source Ensuite, je vais ouvrir le projet dans le navigateur en utilisant le serveur live. Nous allons également placer l'éditeur et le navigateur côte à côte pour rendre le processus de travail plus pratique et plus simple. Je vais visiter le site Web de Google Phone, car nous allons utiliser un téléphone Google tout au long de ce projet. Allons-y et cherchons un téléphone appelé No to Suns. Nous allons sélectionner plusieurs styles différents, puis copier le lien et le coller dans l'élément principal. OK, nous sommes prêts à commencer à écrire le code. Commençons par le balisage HTML. Je vais créer le conteneur dans lequel je vais insérer une balise, qui sera une calculatrice. Nous avons besoin ici d'éléments de saisie qui constitueront l'écran. Ajoutons un écran de nom de classe. Ensuite, je vais créer patm avec le type patm. Alors nous avons besoin ici de BTN. De plus, je vais utiliser un attribut appelé data num. Insérons votre C. Je vais dupliquer ce patm plusieurs fois car nous allons avoir de nombreux boutons différents Ajoutons ici la classe, puis je vais insérer divide sine. Alors il nous en faut 789. Ensuite, nous avons besoin d'un astérisque. Je parle de la multiplication sinusoïdale 456. Ensuite, nous aurons un signe moins suivi de 12,3. Ensuite, nous aurons un signe plus sinusoïdal Le prochain sera zéro. Puis encore zéro, nous aurons des points et enfin le signe égal. Je vais également changer le nom de la classe. Ce sera égal. Très bien, nous avons donc ici un balisage HTML. Allons-y et commençons à écrire le CSS. Sélectionnez chaque élément et définissez une marge, puis mettez-les tous les deux à zéro. Ensuite, je vais définir la taille de la boîte sur la zone de bordure. Il faut que les grandes lignes soient nulles. Changez ensuite la famille de téléphones pour chaque élément, ce sera le téléphone qui aura sélectionné et non les fils. San Serif. Bien, après cela, je vais régler la face avant de l'élément H mile à 62,5 % parce que nous allons utiliser m comme unité de mesure Et dans ce cas, un m sera égal à dix pexels. Sélectionnons la largeur du conteneur à 100 %. Ensuite, la hauteur sera de 100 points de vue sur la hauteur du pot. Modifiez également la couleur de fond. Ça va être 12224, c'est une couleur foncée Ensuite, je vais utiliser Flex Box car nous allons centrer le contenu à l'aide du Justified Content Center et du centre des articles. Comme vous pouvez le constater, le contenu est placé au centre de la page. Allons-y et sélectionnons la calculatrice. Je vais régler avec 240 Ram, puis la hauteur sera de 60 Ram. Changeons la couleur de fond. Je vais utiliser 223. Nous avons la calculatrice, mettons quelques espaces en remplissant trois Ram, deux Ram Ensuite, nous avons besoin d' un rayon de bordure 32 RAM. Nous avons également besoin d'un effet d'ombre. Réglons l'ombre de la boîte sur 0,1 RAM, puis sur trois RAM, et la couleur sera la couleur RGBA avec opacité de 0,4. Nous avons ici un effet d'ombre agréable et cool Après cela, je vais sélectionner Screen, qui est l'élément d'entrée. Réglons la largeur à 34 RAM. La hauteur sera de huit béliers. Ensuite, je vais changer la couleur de fond. Utilisons 888d, puis je vais utiliser la marge en bas Réglons-le sur 1,5 RAM. Ensuite, nous avons besoin d'un rayon de bordure, ce sera un Ram. Supprime la bordure par défaut, définissons-la sur none. Je vais désactiver les événements de pointeur, définissons-les sur none. Et je vais également aligner le texte sur le côté droit. Nous ne pouvons plus nous concentrer sur l'élément d'entrée. Réglons la taille du téléphone à deux RAM. Augmentez également le rythme entre les lettres. Faisons un Ram, changeons la couleur. Ça va être blanc. Ensuite, nous devons mettre, disons 22 RAM. Ensuite, je vais sélectionner BTN, suivi du sinus égal Réglons avec 27 RAM. La hauteur sera également de sept béliers. Voici les boutons. Utilisons la marge, faisons-en un RAM. Ensuite, je vais me débarrasser de la bordure par défaut. Je vais changer le fond. Utilisons le dégradé linéaire. La direction sera de 180 degrés. Pour ce qui est de la première couleur, je vais utiliser 222. Ensuite, la deuxième couleur sera 333. Comme vous pouvez le constater, la couleur est modifiée. Utilisons quelques effets d'ombre dont nous avons besoin ici. Insérez zéro -0,8 RAM, les huit RAM. Et la couleur sera la couleur noire avec une opacité de 0,25 La prochaine valeur sera de 000,2 m. Voici le résultat. Voici La couleur sera le noir avec une opacité 0,75. Ensuite, nous avons besoin d'une autre valeur Un m de RAM, 2,5 de RAM et la couleur RGBA avec une opacité 0,4 Ensuite, je vais définir le rayon de bordure sur un Changez également le curseur, faites-en un pointeur. La prochaine chose que je vais faire est d'utiliser Flex Box pour la calculatrice. Réglons fp2p. Nous devons également justifier le centre de contenu. Et les éléments de ligne sont centrés, les motifs sont alignés. Bien. Ensuite, sélectionnons Effacer, la largeur est donc 225 Ram. En fait, avec la mise en page que nous avons terminée, les motifs sont parfaitement alignés. Ensuite, je vais sélectionner BTN avec l'élément Before Do. De plus, nous avons besoin d'éléments égaux à avant de faire. Définissons le contenu de manière à attribuer les données num, que nous avons utilisées dans le fichier HTML. Ici, nous avons les chiffres et les signes sur les boutons. Réglons la position sur absolue. Nous avons besoin de la position relative de l'élément parent. Je vais régler la première position à 0,3 RAM. La position gauche sera de 0,4 Ram. Nous avons également besoin de 0,7 RAM en position inférieure. Et la bonne position sera 1,2 RAM. Ensuite, je vais changer de couleur, ce sera le blanc. Réglons, affichez les drapeaux, utilisez Justify Content Center et Eline Items Center Les chiffres et les signes sont centrés. Ensuite, je vais augmenter la taille du téléphone. Ce sera 2,2 RAM. Changez le fond, je vais utiliser , encore une fois, des dégradés linéaires La direction sera de 90 degrés et la première couleur sera 2d2d2 D. Ensuite, la suivante sera 40, 40, 40 Maintenant, les boutons sont plus beaux. Utilisons Box Shadow dont nous avons besoin ici. -0,5 Ram, puis -0,5 Ram, 1,5 Ram. Et la couleur RGBA est noire avec une opacité 0,1. Ensuite, nous devons ajouter une autre valeur, un RAM, 0,5 RAM, puis un RAM, et le RGB avec une opacité 0,15. Ensuite, nous avons besoin d'une bordure sur le côté gauche, ce sera 0,1 RAM solide La couleur sera 0004. Alors changeons ici. Nous avons besoin d'une bordure inférieure. Bordure en haut, maintenant nous devons utiliser le rayon de bordure, ce sera un RAM. Les boutons sont plutôt jolis. Ajoutons ici l'arrière-plan à, ce sera 62929 Nous devons également sélectionner Effacer avec avant le pseudo élément et nous devons changer l'arrière-plan. Ce sera de la même couleur. Nous devons placer le code ci-dessous. Le code sera remplacé. Nous avons ici un beau fond transparent. Ajoutons ces bordures à l'élément et changeons la couleur. Ce sera un F quatre. Nous avons besoin de la même chose pour le bouton d'égalité. Changeons l'arrière-plan. Utilisez la couleur 37925 comme nous en avons besoin ici. Égal à avant que l'élément ne change l'arrière-plan. Utilisez ce code ici. Nous avons également besoin de ces frontières. Maintenant, tout est parfait et avec le style, c'est terminé. La seule chose à faire est de créer un effet de clic en utilisant PT et Active. Et aussi quand il est égal à actif. Réglons le filtre sur la luminosité avec une valeur 1,5. Nous avons ici un bel effet de clic. Bien, il est maintenant temps de faire fonctionner le calculateur avec Javascript. Je vais créer une fonction. Appelons cela calculé ici, une fonction de flèche. Nous devons créer plusieurs variables différentes. Le premier sera un écran. Sélectionnons-le en utilisant la méthode du sélecteur de requête. Nous avons besoin ici du nom de la classe, de l'écran. Ensuite, l'élément suivant sera constitué de boutons. Nous devons les sélectionner à l'aide de la méthode query select all. Voici PTN. Enfin, il nous faut ici l'égalité. Très bien, après cela, je vais parcourir les boutons en utilisant la méthode du fourrage. Ensuite, nous devons ajouter un écouteur d'événements au bouton à l'aide d'un événement de clic Et nous devons également transmettre ici une fonction de rappel. Ajoutons ici un paramètre. Ensuite, nous devons créer une valeur variable qui sera égale à l'ensemble de données cible. Nous saisissons ici les nombres que nous avons transmis dans l'attribut data num. Vérifions-le dans la console. Je vais lancer la fonction. Si j'inspecte la page et que je sépare ces fenêtres, passez à l'onglet console. Si je clique sur les chiffres , nous obtiendrons un objet de carte de chaînes m dans lequel nous aurons les nombres. Si j'ajoute ici la propriété num, nous obtiendrons des nombres sans aucun objet dans la console. OK, débarrassons-nous de cette ligne de code. Ensuite, je vais définir la valeur de l'écran avec le signe plus égal. Il sera égal à la valeur. Les chiffres sont ajoutés à l'écran, je veux dire que les valeurs sont ajoutées à l'écran. Après cela, nous devons prendre soin du signe égal. Ajoutons un écouteur d'événements à l'événement du signe égal avec clic Et nous avons également besoin d'une fonction de rappel. Créons une réponse variable. Et je vais utiliser la fonction intégrée evil, qui évalue l'expression Ensuite, nous devons filtrer cette valeur pour qu'elle soit égale à la réponse. Si je fais ici le calcul j'obtiendrai la bonne réponse. Nous devons maintenant nous occuper de la fonction claire. Ajoutons même un écouteur à la fonction clear with click event Une fois que nous avons cliqué sur la fonction d'effacement, nous devons vider l'écran. Nous devons ajouter ici une chaîne vide. Maintenant, tout fonctionne parfaitement. La calculatrice fonctionne bien. Nous en avons terminé avec ce projet. J'espère que c'était intéressant et que vous avez appris de nouvelles choses. Passons à autre chose. 17. Project 12 - En-tête de site avec menu de navigation: Très bien, il est donc temps de passer à autre chose et de commencer à créer notre prochain projet. Dans cette section, nous allons créer un en-tête de site Web avec un menu de hamburgers Le site Web portera sur quelque chose comme la nourriture ou les recettes. Il se compose de deux parties différentes. Nous avons ici une icône de menu. Si je clique dessus, les éléments de navigation s'afficheront bien, avec quelques effets. Si je survole les objets, nous obtiendrons ce bel effet de survol. Si je clique à nouveau sur l'icône du menu, les éléments de navigation se fermeront. En plus de cela, nous avons ici quelques éléments textuels différents avec une image bien placée Également sur le côté droit, vous pouvez voir ici l' image de la nourriture, ce qui crée un signe vraiment sympa et cool. Très bien, c'est tout pour ce projet. Allons-y et commençons. J'ai créé un nouveau dossier sur le bureau dans lequel nous avons un dossier d'images. Allons-y et ouvrons ce dossier dans le code VS. Créez ensuite nos fichiers de travail pour HTML, pour CSS, ainsi que quatre Ylscript Ensuite, je vais ouvrir l'index, charger le fichier HTML et créer la structure HTML pac. Changeons le titre. Je vais accéder à la page de destination à l'intérieur de cette page. Alors allons-y et lions le CSS et tous les fichiers de script dont nous avons besoin ici, stylés CSS Ouvrons ensuite la balise script et spécifions le nom du fichier dans l'attribut source. Ouvrons le projet dans le navigateur à l'aide du serveur live. Ensuite, je vais placer l'éditeur et le navigateur côte côte, comme ça. Allons-y et commençons à écrire le balisage H mal. Nous avons besoin d'une étiquette profonde qui sera le conteneur. Ensuite, je vais insérer ici une autre profondeur. Il va atterrir. Ensuite, à l'intérieur du palier, je vais ouvrir la navigation, dans laquelle nous aurons deux parties. Le premier sera le menu. Je vais insérer ici, Lines, nous aurons trois lignes différentes. Nous avons besoin de deux cours, une ligne sur la première. Nous devons également modifier ici les chiffres. Outre les lignes, nous aurons ici l'élément Span. Ce sera le menu texte. Voilà, à propos de l'icône du menu. Ensuite, nous devons créer des éléments de navigation. Je vais insérer un élément de lien avec la classe. Aucun élément à l'intérieur de l'élément de lien. Eh bien, étendez le tag avec le nom de l'article. Ce sera la maison. Je vais insérer une balise d'image. Nous allons sélectionner Image dans le dossier des images. Ce sera la troisième image. Dupliquez ensuite cet élément cinq fois. Changez les objets, le second portera sur. Nous devons également modifier les noms des images. Ensuite, nous aurons des recettes comme image 5. Ensuite, nous aurons l'image de livraison 6. Enfin, nous prendrons contact. Quant à l'image, ce sera l'image 7. OK, nous avons donc ici les images et les éléments de navigation. Ensuite, je vais créer la bannière. À l'intérieur de la bannière, nous aurons une image. Sélectionnons la deuxième image dans le dossier d'images. Nous avons également besoin de son nom de classe. Ce sera l'image de gauche. Ensuite, je vais ouvrir l'en-tête. Il inclura H, un élément d'en-tête. Ce sera le meilleur pied de tous les temps. Ensuite, nous aurons des recettes de paragraphes pour une alimentation saine. Dupliquons-le deux fois. Le deuxième paragraphe sera livré le jour même que pour le troisième paragraphe. Nous aurons ici des produits frais et délicieux. Bien, après ça, je vais m' occuper du côté droit. Nous avons besoin, sélectionnons l'image 1 dans le dossier d'images dont nous avons besoin ici, nom de classe, image. Hein ? Nous avons également besoin de ce qui sera l'assiette. OK. Je pense que tout est créé et qu'avec le balisage HTM, c'est terminé Allons-y et occupons-nous du CSS. Je vais visiter le site Web de Google Phones, car nous allons utiliser téléphones Google tout au long de ce projet. Allons-y et cherchons un téléphone appelé Tilt. Maintenant, sélectionnons ce style. Nous avons également besoin d'un autre téléphone appelé Ctilium Web. Nous allons sélectionner plusieurs styles différents, puis copier le lien et le coller dans les éléments principaux. Ensuite, je vais créer des styles par défaut. Je vais sélectionner chaque élément, puis définir une marge et les mettre tous les deux à zéro. Nous avons besoin que la taille de la boîte corresponde à celle de la bordure. Je vais également me débarrasser de la décoration de texte par défaut. Réglons-le sur Non, puis réglons famille du téléphone sur l'inclinaison cursive. De plus, je vais régler la taille du téléphone pour l'élément H tim à 62,5 %, car nous allons utiliser le RAM comme unité de mesure Dans ce cas, un RAM sera égal à dix pixels. Ensuite, je ne sélectionnerai aucun élément. Je vais les masquer pendant un moment, en utilisant Display Non. Ensuite, je vais sélectionner la bannière, et je vais également la masquer. Sélectionnons le conteneur, définissons sa largeur 200 %, puis la hauteur sera de 100 % de hauteur du pot Je vais changer la couleur du dos. Utilisons la couleur jaune qui sera FD 861. Ici, nous avons la couleur jaune. Ensuite, je vais sélectionner Lending et définir sa largeur et sa hauteur. La largeur va être de 90 % Quant à la hauteur, je vais régler 280, 5 %. Changez également la couleur de fond. Je vais utiliser ici les couleurs FFT, 868, f863. Changeons le rayon de la bordure, faisons-en deux Ram. Nous avons également besoin d'un effet d'ombre. Réglons Pop Shadow 201 Ram, 6 Ram. Et la couleur noire RGBA avec une opacité 0,3 Voici l'atterrissage Je vais le placer au centre à l'aide d'un livre en lin. Nous devons justifier le centre de contenu et un centre d'éléments de ligne pour l'élément parent qui est un conteneur. Maintenant, l'élément est parfaitement placé au centre. Ensuite, je vais sélectionner une navigation qui définit sa position comme position dominante absolue par rapport à position dominante absolue l'élément parent. Réglons deux positions à zéro et la position de gauche à zéro également. Ensuite, nous avons besoin que la largeur soit de cinq RAM. Pour ce qui est de la hauteur, je vais, puis je vais changer la couleur de fond. Ça va être blanc. De plus, je vais régler les hauteurs à 100 %. Ensuite, pour un rayon de 2 m00, nous avons besoin de coins arrondis sur le côté gauche de l'élément Ensuite, allons-y et sélectionnons l'icône du menu. Je vais régler sa largeur à quatre RAM, puis la hauteur sera de 16 Ram. Réglons la couleur d'arrière-plan sur CC pendant un moment. Ici, nous avons l'icône du menu. Réglons la position sur absolue. Ensuite, les deux positions seront de 50 %, la position sera de 50 %. Nous devons parfaitement centrer l'élément et pour cela nous devons le transformer. Traduire. -50 % encore -50 % L'élément est centré, utilisons des livres flexibles Je vais définir la direction de flexion sur la colonne. Ensuite, lorsque vous justifiez l'espace de contenu entre et le centre des éléments de ligne. Je vais également mettre le curseur sur le pointeur. C'est bon. Ensuite, je m' occuperai des files d'attente. Réglons la largeur à 80 %, puis la hauteur sera de deux RAM. Changez également la couleur d'arrière-plan, la couleur rouge pendant un moment. Ensuite, je vais sélectionner la ligne et définir sa largeur à 100%. Ensuite, la hauteur sera de 0,3 RAM. Modifiez également la couleur de fond. Utilisez 555. Ensuite, nous avons besoin d'un rayon de bordure, il sera de 0,5 RAM. Débarrassons-nous de la couleur rouge à partir d' ici. Voici les lignes. Nous devons maintenant créer un espace entre les lignes. Pour cela, je vais utiliser Display Flex. La direction du flex sera colonne et nous devons justifier le contenu par un espace de valeurs entre les deux les lignes étant séparées. De plus, je vais me débarrasser de cette couleur de fond à partir d'ici. Nous devons maintenant prendre soin des éléments de travée. Je veux dire le texte du menu qui définit l' orientation du texte à la verticale. Nous devons placer les lettres verticalement. Ensuite, nous avons besoin du mode d'écriture Vertical L, R. Augmentez la taille du téléphone. Ce sera 2,5 RAM. Ici, le texte est placé verticalement. Transformons ensuite le texte en majuscules. La couleur sera 555. L'icône du menu est plutôt jolie. Débarrassons-nous de ça, ça se joue à partir d'ici. Réglez la largeur sur 25 RAM. Nous avons besoin que la hauteur soit égale à 100 %, changez de position, elle sera absolue. En fait, nous devons diminuer la taille de l'image car elle est trop grande. Pour l'instant, passons à 211 RAM. La hauteur sera de 11. Nous avons également besoin d'un couvre-pieds pour objets. Maintenant, les images deviennent plus petites et le processus de travail sera plus pratique. Réglons la position gauche à cinq RAM. Ensuite, nous avons besoin de Display Flex. La direction de flexion sera une colonne. Ensuite, je vais sélectionner maintenant un article et attribuer la valeur de lin à un. Désormais, chaque article a une largeur égale. Changeons la couleur de fond. Il va y en avoir 888. Ensuite, je règle la position de l'image sur absolue et je vais définir deux positions sur 50 %. Ensuite, nous devons transformer la translation Y avec -50 % afin de centrer l'image horizontalement, verticalement Ensuite, nous avons besoin que la bonne position soit moins trois RAM. De plus, je vais définir la position relative de l'élément op, qui est l'élément parent. Les images sont bien placées. Nous devons masquer les parties des images en utilisant Overflow hidden Maintenant, ils sont plutôt jolis et cool. Bien, après cela, je vais m'occuper des éléments du texte. Cet élément panoramique, définissons la position 2 absolue. Ensuite, nous devons les positionner à 50 %. Nous devons également les centrer , en particulier en utilisant transform translate y -50 %, alors la position de gauche sera trois RAM Configurons la famille de téléphones sur Till Web Serif. Ensuite, je vais augmenter la taille du téléphone. Ce sera 2,5 % de deux points, puis augmentez la taille du téléphone, 2,5 fram crée également un espace entre les lettres, puis changez de couleur Il va y en avoir 33. Donc, comme vous pouvez le constater, le spinelle doit être plutôt joli. Ensuite, je vais sélectionner un nouvel élément avec le pointeur de la souris. Je vais changer la couleur de fond sur Hot 26. Utilisez également la transition pour un effet plus fluide. Nous avons ici l'effet d'usure. Ensuite, je vais utiliser Javascript pour faire fonctionner le menu. Créons une variable appelée icône de menu et sélectionnons cet élément à l'aide de la méthode de sélection de requête Je vais spécifier ici le nom de la classe sera une icône de menu. En plus de cela, je vais créer deux autres variables. Le second sera composé de lignes. Sélectionnons les lignes. Ensuite, nous avons besoin d'un conteneur. Précisons ici le nom. OK, nous devons maintenant ajouter écouteur d'événements à l' icône du menu en cliquant sur un événement Ajoutons ici une fonction de rappel au clic. Nous devons ajouter une nouvelle classe au conteneur en utilisant la méthode togal Le nom de la classe sera, disons, change. Nous devons maintenant utiliser ce nom de classe dans le fichier CSS pour créer de nouvelles règles. Au clic, nous avons besoin d'un changement suivi des lignes au clic. Je vais faire pivoter l'icône. En utilisant la fonction de rotation C, la valeur sera de 90 degrés. Utilisons la transition. Si je clique, l'icône du menu pivote. Ensuite, je suis élément d'envergure et l'image utilisant l'opacité zéro et la visibilité masquée De plus, je ne suis pas un objet utilisant la fonction scale x. Ajoutons-le à zéro, puis je vais utiliser le changement avec un élément. Une fois que nous avons cliqué sur l'icône, nous devons ramener l'échelle à un, pour revenir à sa valeur par défaut. Ajoutons ici une transition avec transfert de 0,5 seconde. Je vais également définir l'origine de la transformation à gauche. Eh bien, une fois que nous avons cliqué, les éléments s'afficheront. Si nous nous débarrassons de l'origine de la transformation, vous verrez les résultats dont nous n'avons pas réellement besoin. Ensuite, je vais sélectionner span Elements avec changement de classe. Réglons l'opacité à un et la visibilité à visible. De plus, je vais utiliser la transition avec peu de temps de retard. Nous avons besoin de la même chose pour l'image. Changeons le sélecteur. Nous avons besoin d'une image ici. Augmentons le temps de retard, faisons-le 0,7 seconde. Maintenant, une fois que j'ai cliqué, nous obtiendrons cet effet sympa et cool. Les articles, ou leur affichage au clic , peuvent rendre cet effet encore meilleur. Sélectionnons un article. Je suis dans le premier élément en utilisant le sélecteur Chad, suivi de Spun Passons à la transition. Ensuite, je vais dupliquer cet élément cinq fois, modifier les sélecteurs du graphique Mph et augmenter légèrement les temps de retard Maintenant, si je clique, le temps suffisant pour les éléments des panneaux apparaîtra correctement Nous avons également besoin de la même chose pour les images. Je vais changer les sélecteurs plutôt que le span. Je vais insérer une image. Augmentons légèrement le temps de retard , car par défaut, le temps de retard est différent pour l'image de ce panneau. Maintenant, vérifions-le. Comme vous pouvez le voir nous avons ici un résultat cool et agréable. Débarrassons-nous de la transition à partir d'ici. Nous avons maintenant besoin de la même chose pour l'élément nova lui-même. Sélectionnons le premier élément Nova l'aide de Chart Selector Corp, la propriété de transition, puis dupliquons ce code cinq fois, changeons le numéro des sélecteurs enfants, et nous devons également ajouter un temps de retard pour chaque élément Nova avec un laps de temps différent Modifiez le délai pour chaque article. Maintenant, si je clique, nous obtiendrons ceci sympa et cool, parfait en fait. Avec la navigation, c'est terminé. Passons à autre chose et occupons-nous du reste du projet. Sélectionnons l'image de gauche, définissons la largeur sur T m, puis la position sera absolue. Voici les images. Je vais définir position absolue de l'image. De plus, je vais définir la bonne position à -10%. Ensuite, allons-y et sélectionnons l'en-tête Réglons l'affichage sur aucun afin de masquer l'en-tête pendant un moment. Allons-y et positionnons l' image sur le côté gauche, la position sera de -15 %. Quant à la position de gauche, je vais la régler sur -10 %. Ensuite nous devons transformer la rotation, la valeur sera de 70 degrés Ensuite, je vais régler Opacity 2.5. L'image est bien positionnée Nous avons besoin de masquer le trop-plein pour l'atterrissage afin de masquer la partie de l'image Je vais également ajouter cette propriété à la navigation car elle s'est retrouvée derrière l'image. Bien, ensuite je vais m' occuper de l'assiette. Je vais régler sa largeur à 70 % et sa hauteur à 100 %. Ensuite, je vais changer la couleur de fond, elle sera blanche. Je vais régler la position sur absolue. Alors la bonne position sera -20 %. Ici, nous avons la plaque qui, pour le moment, ne ressemble à aucune plaque Réglons avec 50 % pour l'image. Et nous avons également besoin que l' indice soit de 100, puis que l'opacité soit de 0,9. Voici l'image Réglons le rayon de bordure de la plaque à 50 %, puis à 00,50 %, nous avons besoin de coins arrondis sur le côté droit Réglons la transformation pour faire pivoter la fonction Z. La valeur sera de -30 degrés. Maintenant, nous avons ici une assiette qui a l'air plutôt jolie. Occupons-nous de l'en-tête. Je vais régler la position sur absolue, puis sur la position sur 20 % la position gauche sur 10 %. Voici l'en-tête. Personnalisons chacun des éléments. Je vais sélectionner l'en-tête. Chacun d'entre eux. Élément d'en-tête, réglons la taille du téléphone à dix RAM. Le poids du téléphone sera de 300. Ensuite, je vais sélectionner les paragraphes. Dans l'élément d'en-tête, la taille du téléphone sera de 1,8 RAM. Ensuite, nous avons besoin d'une marge. Il y aura deux RAM et zéro. Je vais également définir la transformation du texte en majuscules. Ensuite, je vais sélectionner l'en-tête, suivi des quatre éléments. Faisons en sorte que le contenu soit vide. Ensuite, nous avons besoin que la position soit absolue. Je vais régler la position sur 50 % Ensuite, nous devons centrer l'élément verticalement en utilisant transform translate Y -50 %, cette position sera un RAM Ensuite, nous avons besoin que la largeur soit de trois RAM. Quant à la hauteur, je vais la régler à 2,3 RAM. Changez ensuite la couleur de fond, ce sera 333. Voici les éléments. Réglons la position sur relative pour l'élément parent. Maintenant, pour résoudre ce petit problème, il nous faut rembourrer les cinq RAM restantes Maintenant, l'en-tête est plutôt joli et nous devons adapter le projet aux différentes tailles d'écran. Il a été créé pour un écran de très grande taille. Si je consulte ici la version finale du projet pour différentes tailles d'écran, alors vous découvrirez que le projet est réactif. Comme vous pouvez le constater, il est plutôt joli sur des écrans de petite taille. Maintenant, si je le vérifie pour iPod ou pour téléphone, vous constaterez qu'il est plutôt joli et réactif. D'accord, je vais rendre le projet réactif à l'aide de requêtes multimédia CSS. Créons-le et spécifions ici la largeur maximale de 1 600 pixels. Je vais sélectionner l'en-tête H, un élément de titre. Réglons une taille de police de deux mètres. Ensuite, je vais vérifier le projet sur un point d'arrêt différent, il a l'air sympa Ensuite, je vais le vérifier sur un écran plus petit. Nous devons apporter quelques modifications ici. Créons une nouvelle requête multimédia CSS. Je vais régler la largeur maximale à 1 208 pixels. Sélectionnons l' élément HTML et diminuons la taille du téléphone de 50 %, cela réduira tous les éléments. Ensuite, je vais sélectionner l'en-tête H un. Diminuez la taille du téléphone, portez-la à sept. En fait, tout semble plutôt beau. Réglons l'écran sur l' iPad et créons une requête multimédia CSS. Réglez la largeur du multiplexage sur 820 pixels. Je vais sélectionner l'image de gauche. Réglons la position à -10 % Ensuite, je vais sélectionner la plaque et modifier sa largeur Ce sera 90 % , puis la hauteur sera de 50 %. Changez également la position inférieure, elle sera nulle. Ensuite, je vais régler la bonne position à moins deux RAM. Je vais déplacer l' image vers le bas. Sélectionnons l'image à droite, réglons sa position de placement sur 15 RAM. Nous avons maintenant le mois de mars, meilleur résultat. Ensuite, je vais sélectionner l'en-tête. Réglez sa position gauche à 50 %. De plus, nous devons transformer la translation x afin de centrer l' orme horizontalement L'en-tête est placé au centre. En fait, avec ce point d'arrêt, c'est terminé. Créons une nouvelle requête multimédia CSS pour une taille d' écran légèrement plus petite. La largeur maximale sera de 768 pixels. Je vais sélectionner l'en-tête 1 et définir sa largeur à 50 RAM. Sélectionnez également l'image à droite et fixons le poids à 45 %. Ensuite, la position inférieure sera de 12 RAM. Maintenant, je trouve que tout est plutôt beau. Et changeons la taille de l'écran. Ensuite, je vais créer une nouvelle requête multimédia CS. La largeur maximale sera de 480 véhicules. Je vais sélectionner l'image Left et régler sa largeur sur 60 Ram. Ensuite, je vais sélectionner l'en-tête. Régler la position gauche à 65 %. De plus, je vais sélectionner l'en-tête H un et régler la taille du téléphone sur six RAM. Nous devons réduire la taille d'un en-tête. Ensuite, je vais sélectionner l'image correctement. Réglons la largeur à 50 %. Ensuite, la position inférieure sera dix RAM. Ensuite, nous devons prendre soin de l'assiette. Réglons la hauteur à 40 %. Quant à la bonne position, elle sera de -15 RAM Maintenant, ça a l'air plutôt sympa. Nous devons créer le dernier point de rupture. Créons une requête multimédia CS et définissons x avec 2 400,14 pixels. Je vais sélectionner l'élément HTML. Réglons la taille de police 240, 2% Tout est plutôt beau. Et avec le projet que nous avons terminé, il est réactif. J'espère que c'était intéressant et que vous l'avez apprécié. Passons à autre chose et occupons-nous du prochain projet. 18. Projet 13 - Carte de produit: Très bien, alors passez plutôt autre chose et commencez à créer notre prochain projet. Dans cette section, nous allons créer cette carte de produits cool et moderne. Le projet sera créé sur la base du HTML et du CSS. Allons-y et décrivons-le rapidement. Comme vous pouvez le constater, la carte est placée au centre de la page. Derrière la carte, nous avons ce joli et cool arrière-plan. La carte parle de quelque chose comme Raincode. Au centre de la carte, nous avons ici un produit qui passe à autre chose, passez la souris en bas, vous pouvez voir cette jolie ombre fraîche sur le côté gauche de la carte Nous avons deux titres différents pour le côté droit. Vous pouvez voir ici les détails de la carte. Vous pouvez sélectionner la couleur à partir d'ici ou la taille, la longueur de la poitrine, etc. bas, nous avons un fond qui, au clic, se déplace, crée un bel effet de clic. OK, c'est tout à propos de ce projet. Allons-y et commençons à le créer. J'ai créé un nouveau dossier sur le bureau dans lequel nous avons un dossier pour les images. Allons-y et ouvrons le dossier dans le code VS. Ensuite, je vais créer nos fichiers de travail pour le HTML et pour le CSS, nous aurons ces deux fichiers différents. Ouvrons le fichier HTML indexé et créons le document HTML de base Ensuite, je vais changer le titre. Ce sera une carte de produit. Ensuite, je vais lier le fichier CSS. Après cela, je vais ouvrir le projet dans le navigateur en utilisant le serveur live. Mettons l'éditeur et le navigateur côte à côte. Comme d'habitude tout au long du projet, je vais utiliser les téléphones Google. Alors allons-y, visitons le site Web et recherchons un téléphone appelé Joséphine Sans Je vais choisir différents styles. En plus de cela, je vais chercher un autre téléphone appelé Tilt Warp. Nous allons sélectionner le style, puis copier le lien et le coller dans l'élément principal. Nous sommes prêts à commencer à créer le projet. Nous allons commencer par le balisage des cartes HD. Ouvrons le tag, qui sera le conteneur à l'intérieur du conteneur dans lequel je vais créer une carte. Ensuite, nous aurons ici, je veux dire, le côté gauche et aussi le côté droit, le côté gauche. Pour insérer H trois éléments de titre avec le texte en code ici, deuxième titre qui sera H et un autre avec le texte Spring Sale Offer le texte Spring Sale Offer insérez ici la balise div qui sera l'image de gauche de la carte. Nous allons sélectionner Image dans le dossier des images. Ce sera du code. Très bien, c'est ça, à peu près sur le côté gauche. Allons-y et créons le bon côté. Je vais ouvrir le tag, qui va contenir des informations sur le produit. Ouvrons un autre plongeon, qui sera coloré. Nous avons besoin de la couleur du paragraphe, suivie du développement, qui sera constitué de couleurs. Nous aurons ici des panelements, je veux dire quatre éléments de span Ensuite, je vais créer la taille dont nous avons besoin ici, un paragraphe avec les liens de texte. Ensuite, je vais insérer votre balise deep avec les tailles de classe dans lesquelles nous aurons des éléments, quatre éléments d'envergure tailles différentes, comme L x L, etc. Bien, après les tailles que je vais créer les détails que nous aurons, je vais créer un paragraphe avec la longueur de la pochette du texte. Ensuite, nous aurons ici un autre paragraphe avec le texte 66 M. Ensuite, nous aurons également un compteur de manches. Nous aurons ici un compteur de cours. Ensuite, je vais créer un paragraphe coffre sur place avec le coffre de texte. Nous allons donc avoir ici un autre paragraphe avec le texte 102 M Santi mètres. Ensuite, nous aurons un compteur de poitrine. Nous avons encore besoin d'un autre compteur de classes. Très bien, enfin, je vais insérer votre bas de page avec la carte de classe BTN, réglons le type 2 en bas et je vais instituer votre texte Procéder. D'accord. Le balisage HD mal est créé et nous pouvons maintenant commencer à écrire le CSS Tout d'abord, je vais créer des styles par défaut. Sélectionnons chaque élément à l'aide d'un astérisque. Réglez la marge et le rembourrage à zéro. Ensuite, je vais définir la taille de la boîte sur la zone de bordure. Nous avons également besoin d'une famille téléphonique Joséphine Sans Santerif Ensuite, je vais régler la taille du téléphone de l'élément atuml à 62,5 %, car nous allons utiliser M comme Dans ce cas, un M sera égal à dix pixels. Ensuite, je vais m'occuper de l'image de gauche de la carte car elle est trop grande. Pour le moment, passons au cadre 235. Ensuite, je vais sélectionner l'image elle-même et définir largeur à 100 %. Non, l'image est devenue plus petite et nous pouvons commencer à personnaliser le conteneur à 100 %. Ensuite, la hauteur sera de 100 % de hauteur du pot d'affichage Je vais définir l'arrière-plan. Utilisons le dégradé linéaire. Je vais utiliser la première couleur, le blanc avec une opacité inférieure 0,2 Quant à la deuxième couleur, elle redeviendra blanche avec une opacité de 0,2 Ensuite, je vais définir l' image comme arrière-plan, mais en la sélectionnant dans le dossier images Ensuite, ils découvrent que la position sera au centre. De plus, il n'est pas nécessaire de répéter. Ensuite, je vais définir la taille de l' arrière-plan à couvrir. Nous avons ici cette belle et cool image de fond. Je vais utiliser Flex Book pour centrer la carte à l'aide du Justify Content Center et d'un centre de rubriques. La carte est placée au centre. Il est maintenant temps de personnaliser la carte elle-même. Sélectionnons-le et réglons-le sur 100 RAM. Ensuite, la hauteur sera de 65 Ram. Je vais régler l' ombre à 01 Ram, 6 Ram. Et la couleur sera le noir avec une opacité de 0,5 Nous avons ici une carte avec une ombre Utilisons des livres en lin. Je fais les coins de la carte, je l' arrondis en utilisant le rayon de bordure. Ensuite, je vais mettre le curseur sur le pointeur. Très bien, allons-y et occupons-nous du côté gauche. Je vais régler sa largeur à 65 % puis la hauteur à 100 %. Je vais également changer la couleur de fond. Utilisons RGBA 120-31-2106 opacité de 0,7. Ensuite, j'ai réglé le rayon de bordure sur 1m00 Nous avons besoin de coins arrondis sur le côté gauche. Nous avons ici le contexte. Ensuite, je vais m' occuper du côté droit. Réglons avec 230, 5 %, puis la hauteur sera 100 %. Changez également la couleur de fond. Je vais utiliser ici le RGBA 903-80-6606, et l'opacité 0,7 pour toutes les cellules situées dans rayon limite de 0,1 m1 de RAM et zéro, d'accord ? Les côtés gauche et droit sont donc séparés par les arrière-plans. Ensuite, je vais définir la position de l'enveloppe d'image sur absolue Nous avons besoin de la position relative de l'élément parent qui reste. Réglons la position à 12 % Quant à la bonne position, elle sera de -8 % Comme vous pouvez le voir, l'image est bien placée Je suis le suivant. Réglez le filtre Pack Drop sur Polar avec une valeur de 0,5 Ram pour le côté droit, ce que vous puissiez voir que l' arrière-plan soit polaire. Maintenant, affichons l'image en utilisant la propriété d'index Z avec la valeur 100. En fait, je vais sélectionner l'image de gauche de la carte avec le pseudo élément après. Faisons en sorte que le contenu soit vide. La position sera alors absolue. Ensuite, je vais mettre la dernière position, deux moins sept RAM. La position de gauche sera de 50 % et nous devons envoyer à l'élément en utilisant transform translate x -50 % En fait, nous créons l'ombre ci-dessous. Réglons avec 232 RAM. Ensuite, la hauteur sera de dix Ram. Changez la couleur de fond. Je vais utiliser le RGB, une couleur noire avec une opacité de 0,4. Utiliser également le rayon de bordure Réglons-le sur dix RAM. Comme vous pouvez le constater, voici les éléments. Utilisons un filtre avec fonction de flou. Nous évaluerons 3,5 RAM. Comme vous pouvez le constater, nous avons ici une ombre. En fait, je vais créer l'effet de survol sur le survol. Je vais déplacer l'image vers le haut. Réglons la position à 8 % et utilisons également la transition pour un effet plus fluide. Ensuite, nous devons changer après. Donc, l'élément dans lequel je suis dans l'ombre au survol. Utilisons la position inférieure, faisons-en moins dix RAM. Et utilisez également un filtre. Je vais augmenter la valeur de la fonction de flou, puis utiliser la transition pour effet plus fluide. Vérifions-le. Maintenant, comme vous pouvez le voir, nous avons ici effet de survol vraiment sympa et cool OK, maintenant allons-y et personnalisons les titres. Je vais commencer par les trois éléments d'en-tête H. Réglons la position en valeur absolue , alors la première position sera de 15 %. Quant à la position de gauche, je vais régler à 10 % puis je vais augmenter. Changeons la famille de téléphones. Ce sera pour Tarp Cursive. Augmentez la taille du téléphone, il y en aura trois. Ram crée également un espace entre les lettres. Changez de couleur. C'est 31227. Nous avons donc ici le premier élément de titre. Dupliquons ce code, changeons le sélecteur. Nous avons besoin d'un élément de titre H. Changer les deux positions sera de 22 %. Ensuite, je vais augmenter la taille du téléphone. Disons 4,5 % 4,5 Ram. Utilisez également la transformation du texte, mettez les majuscules, puis nous avons besoin que la hauteur de ligne soit égale à un. Et nous devons également changer de couleur. Je vais utiliser neuf, B, D, sept. Nous avons ici la deuxième rubrique. Mettons-nous au point avec 22 RAM. Maintenant, c'est beaucoup mieux avec le côté gauche. Nous avons terminé. Passons à autre chose et prenons soin du bon côté. Je vais utiliser des livres Flex. Utilisons Justify Content Center et Align Items Center. Comme vous pouvez le constater, le contenu est placé au centre du côté droit. Ensuite, je vais sélectionner Informations sur le produit. Réglons la largeur à 24 RAM. Ensuite, je vais sélectionner Informations sur le produit. Suivez le paragraphe. Réglons la taille de police sur 1,2 RAM. Ensuite, la police huit sera 300. Modifiez la propriété de transformation du texte, mettez les majuscules. Ensuite, je vais régler la couleur sur RGBA, 255-25-5255, je veux dire la couleur blanche avec une opacité de 0,7. Les opacité Allons-y et sélectionnons les couleurs. Réglez la flexibilité de l'écran. Ensuite, nous avons besoin d'une marge. Il y aura deux Ram et zéro, puis quatre Ram et encore zéro. Après cela, je vais sélectionner l'intervalle de couleurs. Nous avons quatre éléments de travée pour différentes couleurs. Réglons la largeur à six RAM, puis la hauteur sera de 0,5 RAM. Changez la couleur d'arrière-plan afin de voir les éléments de la plage pendant un moment. Débarrassons-nous d'elle maintenant. Je vais sélectionner le premier élément de rotation à l' aide du énième sélecteur enfant Changeons la couleur de fond. Je vais utiliser Color CDD C seven. Nous avons ici la première couleur. Dupliquons ce code trois fois. Nous avons au total quatre éléments de spin. Changeons les sélecteurs pour le nième enfant. Ensuite, je vais changer les couleurs de fond. Le second sera 986, puis nous en aurons 55542. Et nous avons également besoin de 383123. Nous avons ici quatre couleurs différentes. Très bien, ensuite je vais m'occuper des tailles. Fixons la marge à deux, puis 04.0 Ensuite, je vais utiliser des livres flexibles Définissons le deuxième contenu de justification. Espace entre. Comme vous pouvez le voir, nous avons bien l'espace entre les tailles. Sélectionnons l'élément span. Réglez la taille du téléphone sur 1,6 RAM. Ensuite, le poids du téléphone sera de 300. Changez également la couleur, faites-en neuf B, D sept. Ensuite, je vais régler la largeur à trois RAM. La hauteur sera également de trois. Ensuite, je vais sélectionner le deuxième élément de rotation à l'aide du sélecteur enfant Réglons le rayon de la bordure à 50 %, nous avons besoin d'un cercle. Et puis définissez la bordure 2.1 Ram solid. Et la couleur sera neuf, B, D sept. Nous avons ici un cercle, mais nous devons placer la taille à l'intérieur du cercle. Utilisons Flex Book en utilisant contenu de justification et le centre des éléments de ligne. La taille est maintenant centrée à l'intérieur du cercle. Ensuite, je vais m' occuper de la pochette. Sélectionnons également le coffre. Je vais choisir 100 %. Ensuite, nous avons besoin de livres flexibles, puis de justifier l'espace de contenu entre les deux. Ensuite, je vais sélectionner le compteur. Réglons avec 22 RAM, alors la hauteur sera de deux RAM. Utilisons le rayon de bordure pour créer le cercle, définissons-le à 50 %. Ensuite, je vais définir la bordure 2.1 Ram solid et utiliser cette couleur. Ensuite, nous avons besoin d'une marge de deux Ram et de 0,4 Ram zéro. Nous avons ici des cercles pour les deux éléments. Ensuite, je vais sélectionner Sleeve Counter Transform. Traduisez la fonction X 30 en 16 RAM. Ensuite, nous avons besoin d'un compteur de poitrine. Changeons la valeur. Il y aura cinq RAM. Nous venons de déplacer les cercles de différentes quantités. Sélectionnons le compteur de manches suivi du pseudo-élément avant. Faisons en sorte que le contenu soit vide. Nous devons créer des lignes. Réglons la position sur absolue. Ensuite, nous avons besoin de la position relative. Pour le compteur, qui est l'élément parent, nous devons le positionner à 50 % , puis la bonne position sera deux RAM. Ensuite, nous devons transformer, traduire la fonction y afin de centrer verticalement l'élément. Ensuite, je vais régler la largeur à 16 RAM. Quant à la hauteur, elle sera de 0,1 Ram. Je vais changer la couleur de fond. Utilisons la même couleur. Nous avons ici la ligne pour la longueur des manches. Nous avons également besoin de la même ligne sur le côté droit. Utilisons après l'élément sucre, il suffit de changer la bonne position, il y aura moins six RAM. Et changez également la largeur. Nous avons besoin de six RAM. Nous avons ici un comptoir agréable et cool. Faisons de même pour le compteur de poitrine. Changeons les noms de classe car nous devons changer la largeur de l'élément précédent, ce sera cinq RAM. Après l'élément, nous avons besoin que la bonne position soit -17 Ram. Et la largeur sera également de 17 RAM. Très bien, les deux compteurs sont plutôt jolis et maintenant nous devons personnaliser le bas Allons-y et sélectionnons cet élément. Je vais utiliser 12 RAM. Et la hauteur sera de cinq béliers. Changeons la couleur de fond. Réutilisez la même couleur. Je vais régler l' affichage sur bloc, puis sur la marge A O afin de centrer l'élément. Maintenant, le bas est centré. Ensuite, fixons le rayon de la bordure à cinq béliers. Je vais me débarrasser de la bordure par défaut. Ensuite, je vais ajouter la taille de police, en faire 1,4 RAM. L'épaisseur de la police sera en gras, puis la transformation du texte sera en majuscules. Nous avons également besoin d'un effet d' ombre. Réglons-le sur 0,1 RAM, 0,2 M, un RAM. C'est la couleur que je vais utiliser, le noir avec une opacité 0,4. Le bouton est plutôt joli Enfin, je vais mettre le curseur sur le pointeur. OK, nous avons presque terminé. La seule chose que nous devons faire est de créer un effet de clic en utilisant la classe do active. Nous avons besoin de transformation. Traduire la fonction y avec une valeur de -0,2 Ram. Si je clique sur le bouton, nous aurons ce fait sympa et cool sur le clic. Très bien, nous en avons donc terminé avec ce projet. J'espère que cela vous a plu. Passons à autre chose et occupons-nous de la suivante. 19. Project 14 - Formulaire de communication animé: Très bien, passons à autre chose. créer notre prochain projet, dans cette section, nous allons créer un formulaire de contact animé en HTML et CSS. Ce projet va être simple, mais je pense qu'il sera intéressant et un peu drôle. Comme vous pouvez le constater, nous avons ici quelques animations et effets amusants. Tout ce que vous voyez ici est créé avec du HTML et du CSS purs. Nous n'utilisons aucune image ici. En haut de page, nous avons un titre, puis il est suivi par les vagues, je veux dire la mer. Dans la mer, vous pouvez voir deux groupes de poissons. Ils se déplacent de gauche à droite. En plus de cela, nous avons ici deux champs de saisie différents et un bouton Soumettre. Très bien, alors asseyons-nous sur ce projet. Allons-y et commençons. J'ai créé un nouveau dossier sur le bureau. Allons-y, ouvrons-le dans le code VS, puis créons nos fichiers de travail. Nous allons utiliser uniquement le HTML et le CSS dont nous avons besoin ici indexer le HTML et les styles. Ensuite, je vais ouvrir le fichier HTML d'index et créer le document HTML de base. Allons-y et changeons le titre. Ce sera un formulaire de contact, puis je vais lier le fichier CSS. Allons-y ensuite et exécutons le projet dans le navigateur à l' aide du serveur en direct. Mettons l'éditeur et le navigateur côte à côte. Bien, tout au long du projet, nous allons utiliser les téléphones Google. Alors allons-y et visitons le site Web. Je vais rechercher des téléphones Google appelés Rubic Bubbles Sélectionnons le style, puis saisissons le lien dont nous avons besoin pour le coller dans l'élément principal. C'est bon, c'est ça. Allons-y et pour créer le balisage H mal, nous avons besoin d'un conteneur Je suis dans l'étiquette profonde dans laquelle je vais insérer de l'eau. Ensuite, nous aurons des vagues dans lesquelles je vais créer dix vagues, dix éléments profonds. Je vais ouvrir Deep Tag, qui sera également un groupe de poissons. Nous aurons ici une autre classe de poissons. Un. Ensuite, nous avons besoin de poisson Tidy. Dupliquons ce code cinq fois. Nous aurons six poissons dans chaque groupe. Ensuite, je vais dupliquer l'ensemble du groupe et changer le nom de la classe. Très bien, pour le moment, rien n' est visible parce que nous n' avons que des développements vides. Allons-y et commençons à écrire le CSS. Je vais sélectionner chaque élément, puis définir une marge et les mettre tous les deux à zéro. Ensuite, nous avons besoin que la taille de la boîte soit une zone de bordure. Définissez également le plan pour ne pas modifier la famille de téléphones. Ce seront des bulles de rubis. Ensuite, je vais régler la taille du téléphone de l'élément HTML à 62,5 % afin d'utiliser le RAM comme unité de mesure Dans ce cas, un RAM sera égal à dix pixels. Allons-y et prenons soin du conteneur. Je vais régler la largeur à 100 % , puis la hauteur sera de 100 % de hauteur du pot. Ensuite, je vais sélectionner l'eau. Réglez la largeur à 100 % La hauteur sera de 85 % Réglez la position sur absolue. Nous avons besoin de la position relative de l'élément parent, le conteneur. Ensuite, nous devons également laisser la position inférieure. La position sera également nulle. La couleur de fond sera 60 PTE six. Ici, nous avons l'eau. Ensuite, je vais sélectionner les vagues. Réglons la largeur à 100% Ensuite, la hauteur sera de dix m. Ensuite, nous devons changer la couleur de fond. Utilisons la couleur EE. Réglez la position sur absolue. La position sera alors de 15 %, cette position sera de zéro. Nous avons ici les vagues. Ensuite, je vais sélectionner la vague elle-même. Réglez la largeur à 10 %, puis la hauteur sera de dix RAM. Changez la couleur de fond, je vais utiliser le blanc. Ici, nous avons les vagues. Utilisons la boîte flexible pour placer les éléments horizontalement dans une rangée. Je vais me débarrasser de cette couleur de fond temporaire. Ensuite, je vais régler le rayon de bordure la vague à 00, 50 % et 50 %. Nous avons également besoin de 50 %. Comme vous pouvez le voir, nous avons ici les vagues. OK, après cela, je vais sélectionner Fish Group. Réglons la largeur à 40 RAM. Ensuite, la hauteur sera de 15 Ram. Je vais changer la couleur de fond, passons-en à C. Ensuite, changez de position, elle sera absolue. Réglez également la première position à 50 %. La position gauche sera de 40 %. Ici, nous avons le premier groupe. Sélectionnons Fish body. Je vais régler avec jusqu'à six Ram, puis la hauteur sera de trois Ram. Changez la couleur de fond, je vais utiliser 26388 Ensuite, je vais régler le rayon de la frontière à 65 %, puis à 40 %, 40 % et 65 % à 50 % Maintenant, nous avons des corps de poissons. Ensuite, je vais sélectionner Fish Tail. C'est réglé à zéro. La hauteur sera nulle. Nous avons besoin d'une frontière. Nous avons besoin d'une bordure solide à deux Ram. La couleur va être transparente. Ensuite, nous avons besoin de la bordure supérieure avec la valeur zéro. Ensuite, je vais utiliser le bas de la bordure avec des valeurs 1,8 Ram solid, et la couleur sera 26388 Comme vous pouvez le constater, nous avons ici des triangles créés par les bordures. Nous devons les alterner. Utilisons la fonction Transformer la rotation Z. La valeur sera de 90 degrés. Les queues sont tournées, mais nous devons les déplacer et les placer derrière les cadavres de poissons Sélectionnons Fish Set Display Flex. Nous avons maintenant de meilleurs résultats, mais nous devons rapprocher les queues des corps. Utilisons la marge, à droite, avec la valeur -1.2 Maintenant nous devons déplacer les queues Utilisons le centre des éléments de ligne. Maintenant, tout semble plutôt beau. Réglons le rayon de la bordure à un bélier afin que la queue soit légèrement arrondie. Réglons la position en valeur absolue. Maintenant, tous les poissons se sont retrouvés les uns sur les autres. Sélectionnons le poisson à l'aide du sélecteur, ce sera le premier poisson Réglons la première position à 40 %, alors la bonne position sera. Deux béliers. Voici le premier poisson. Diminuez l'opacité. Passez à 0.3 Ensuite, je vais dupliquer ce code. Changez le, nous devons le positionner à zéro. Quant à la bonne position , ce sera dix Ram. Nous avons ici le deuxième poisson. Dupliquons le code, changeons le numéro. Les deux positions seront de 30 %. Quant à la bonne position, je vais lui donner 15 RAM. Ensuite, nous avons besoin d'un quatrième poisson. Réglons la position inférieure à zéro. La bonne position sera huit béliers. Ensuite, nous avons besoin du cinquième article. Je vais changer la première position, elle sera nulle. Pour ce qui est de la position de gauche, je vais prendre huit RAM. Ensuite, nous avons besoin d'un sixième élément, réglons la position à 40 %. Quant à la position de gauche, je vais la régler sur deux RAM. Ensuite, nous avons besoin de la septième place. La position inférieure sera zéro, c'est pour la position gauche. Je vais en faire dix. Nous avons ici tous les poissons alignés. Débarrassons-nous de l'arrière-plan temporaire. Comme vous pouvez le voir, nous avons ici le groupe de poissons. Ils sont plutôt jolis. Ensuite, je vais sélectionner le premier groupe de poissons. Les deux positions seront de 35 %, la position gauche sera 35 %, la position gauche -25 %. Dupliquons ce code, changeons le nom de la classe Nous avons besoin de Phish, du groupe 2 , de la position 2 à 70 %. Pour ce qui est de la bonne position, je vais faire en sorte qu'elle soit de -25 %. Et nous devons également transformer, traduire, y18 degrés Comme vous pouvez le voir, le groupe de poissons est placé en bas. En fait, si je supprime ces deux lignes , le groupe de poissons se retrouvera du côté droit. En fait, ils devraient être alternés. Nous avons besoin ici de la fonction de rotation Y et non de la translation. Le groupe de poissons fait l'objet d'une rotation. Ensuite, nous devons créer l'animation. Nous avons besoin de cadres clés CSS. Le nom sera le groupe 1 du hameçonnage à 0 %, nous avons besoin que la position gauche soit de -25 %. Quant la fonction transform rotate y, à la fonction transform rotate y, elle sera nulle Ensuite, la prochaine étape sera de 47 % sur cette étape. Je vais régler la position gauche à 100 % car la fonction de rotation sera la même. Ensuite, la prochaine étape sera de 53 % La position de gauche sera de 100 %. Quant à la fonction de rotation, je vais la régler à 18 degrés. Ensuite, la prochaine étape sera 100 %. C'est la fin de l'animation. Je vais prendre ces deux lignes. Réglons la fonction de rotation à 18 degrés. Nous devons maintenant appliquer ces règles en utilisant propriété d'animation institue le premier groupe de poissons, le nom de l'animation. Ensuite, nous avons besoin d'une durée infinie de 30 secondes. Et la fonction linéaire. Comme vous pouvez le constater, le groupe de poissons se déplace bien de gauche à droite. Une fois qu'ils sont cachés, ils doivent pivoter et revenir sur le côté gauche. Très bien, tout fonctionne bien. Nous avons maintenant besoin de la même animation pour le deuxième groupe de poissons. Changeons. Le nom sera le groupe de poissons 2, puis ici, à droite, position, la fonction de rotation sera de 180 degrés. Puis changez ici encore une fois, la position dont nous avons besoin, à 180 degrés. Nous avons également besoin de la même chose sur cette étape. Insérons ici zéro. Ici, il nous faut zéro. Encore une fois. Réglons l'animation pour le deuxième groupe dont nous avons besoin ici, de retarder de 4 secondes et de changer le nom. Nous avons besoin du groupe de poissons 2. Comme vous pouvez le constater, les deux groupes évoluent bien. Nous devons nous débarrasser de cette barre de défilement à partir d'ici. Faisons en sorte que le trop-plein soit masqué pour le conteneur. Bon, maintenant nous n' avons plus les coups de défilement et les deux groupes se déplacent bien Ensuite, nous devons prendre soin des champs de saisie. Créons du HTM lors de l'annotation. Nous avons besoin d'un contact. Ensuite, H un élément d'en-tête avec le nom de classe contact head, ça va être contact us. Ensuite, nous avons besoin d'un élément de formulaire avec le nom de la classe (formulaire de contact). Insérons un élément profond qui sera un groupe d'entrée. Je vais insérer votre nom puis je vais entrer dans un élément de votre nom puis saisie avec le texte de type Dupliquons ce code. Nous avons besoin du même groupe de saisie pour le courrier électronique, changez le type. Ce sera un e-mail. Ensuite, nous avons besoin d'un groupe de saisie pour le message au lieu d'éléments de saisie, je vais utiliser une zone de texte. Nous avons ici les champs de saisie. Allons-y et stylisons ces éléments. Je vais sélectionner le titre du contact. Réglons cette position en valeur absolue. La première position sera le cadre, puis nous avons quitté la position, elle sera de 50 %. Et quand il faudra centrer l'élément en utilisant transform translate x -50 % Ensuite, je vais régler la taille du téléphone à neuf RAM, changer de couleur, ce sera une couleur orange, Voici le titre. Utilisons ici un effet d' ombre. Réglons l'ombre du texte sur 0,5 Ensuite, un RB, une couleur noire avec une opacité de 0,2 Très bien, le titre est plutôt joli Ensuite, je vais utiliser le formulaire de contact. Réglons cette position en valeur absolue. Ensuite, les deux positions seront 35 %. Je vais définir la position let sur 50 %. Encore une fois, en centrant à l'aide de transform translate x -50 %, le formulaire de contact soit centré sur la page Ensuite, je vais sélectionner le groupe de saisie. Réglons l'affichage pour qu'il soit flexible. Nous devons changer la direction dans laquelle ce sera une colonne. Ensuite, je vais fixer la marge en bas à trois RAM. Comme vous pouvez le constater, il y a un peu d'espace entre le suivant. Je vais sélectionner l'étiquette. Réglons la taille de police sur 2,3 RAM. Alors la couleur sera blanche. Je vais fixer une marge en bas à un Ram. Les étiquettes sont jolies. Ensuite, je vais sélectionner les éléments d'entrée. Réglons avec 250 RAM. Alors la hauteur sera de. 0,5 RAM. Nous avons besoin que la bordure soit nulle, puis nous devons arrondir les coins en utilisant le rayon de bordure, trois RAM. Ensuite, je vais créer de l'espace à l' aide d'un rembourrage. Disons-le à un Ram, 1m1m, puis à deux Ram sur le côté gauche Les deux premiers champs de saisie sont plutôt jolis. Ensuite, je vais régler la taille du téléphone sur 1,6 RAM, changer la couleur. Je vais utiliser le 555. Nous avons besoin de Box Shadow 000.3 Ram, un Ram. Et la couleur sera RGBA avec Opacité 0.1 Très bien, ensuite je vais m' occuper de la zone de texte En fait, copions ces lignes puis définissons la hauteur à dix RAM. Comme vous pouvez le constater, la zone de texte est jolie. Ensuite, je vais le placer ici, en bas. Nous oublions que nous avons oublié le bouton Soumettre. Définissons le nom de classe comme contact. Btn, nous devons envoyer un message, puis je vais sélectionner le bas Réglons avec 250 RAM. Alors la hauteur sera de cinq. Changez la bordure, n'en faites aucune. Ensuite, nous avons besoin que la couleur de fond soit orange. Changez de couleur, ça va être blanc. Ensuite, je vais faire en sorte que la taille de police soit deux RAM. De plus, nous avons besoin d'un espace entre les lettres. Réglons-le sur 2,2 RAM. Transformez ensuite le texte en majuscules. La méthode suivante est le rayon de la bordure. Pour arrondir le bouton , je vais utiliser une ombre. Récupérons ce code à partir d' ici et utilisons-le également pour le bouton. Enfin, mettons le cap sur le point. OK, alors c'est tout. Nous en avons terminé avec ce projet. J'espère que c'était intéressant. Passons maintenant à autre chose et occupons-nous du prochain projet. 20. Projet 15 - Button lumineux: Bien, il est temps de passer à autre chose et de commencer à créer notre prochain projet. Dans cette section, nous allons construire ce beau fond frais et lumineux Le projet sera créé sur la base du HTML et du CSS. Nous n'utiliserons que ces deux technologies. Comme vous pouvez le voir, nous avons ici un fond avec du texte et aussi l'ombre en bas. Le texte en bas clignote et l'ombre brille également Si je survole le bas, nous obtiendrons cet effet sympa et cool Le texte cessera de clignoter et l'ombre s' étendra également, n'est-ce pas ? Je pense que ce projet va être intéressant et amusant. Vous apprendrez comment créer ces effets en utilisant uniquement du HTML et du CSS. OK, allons-y et commençons. J'ai créé un nouveau dossier sur le bureau, qui est actuellement vide. Allons-y, ouvrons-le dans le code VS et créons nos fichiers de travail pour HTML et CSS. Comme nous l'avons dit, nous n' utiliserons que ces deux technologies. Allons-y, ouvrons le fichier HTML d'index et créons le document HTML de base. Je vais changer le titre du projet. Ce sera un bouton, puis je vais lier le fichier CSS. Spécifiez ici le nom du fichier. Ouvrons le projet dans le navigateur et plaçons l'éditeur et le navigateur côte à côte. En plus de cela, je vais récupérer des téléphones Google sur le site Web de Google Phones. Allons-y et cherchons le signe de téléphone appelé Can négatif. Nous allons sélectionner ces styles, puis copier le lien et le coller dans l'élément principal. OK, maintenant nous pouvons commencer à écrire le balisage H m, Open Deep Tech, qui sera le conteneur. Je vais insérer un bouton avec la classe BTN. Ensuite, nous avons besoin d'un attribut de type, qui sera un bouton. Je vais insérer votre élément span avec la classe Text me here, hover C'est tout à propos du balisage H mal. Commençons par écrire du CSS. Nous avons besoin d'un rembourrage de marge pour que chaque élément soit égal à zéro. Ensuite, je vais définir la taille de la boîte sur la zone de bordure. Ensuite, je vais définir le plan sur non. Modifiez également la famille de polices : le serif négatif significatif. Ensuite, nous devons définir la taille de police de l'élément H dimel à 62,5 % afin d'utiliser m comme unité de mesure Dans ce cas, un m sera égal à dix pixels. Ensuite, je vais sélectionner le conteneur. Réglons à 100 %. Ensuite, la hauteur sera de 100 % de hauteur du point de vue Changez la couleur de fond. Je vais utiliser ici la couleur 1611d, c'est une couleur foncée Ensuite, nous avons besoin d'une boîte flexible pour centrer le contenu. Utilisons Justify Content Center et un Line Items Center. Comme vous pouvez le constater, le bas est placé au centre de la page. Après cela, je vais sélectionner un PTN lumineux. Prenons 245 Ram, alors la hauteur sera de 12 Ram. Réglons l'arrière-plan sur aucun. Ici, nous avons le fond. Ensuite, nous devons définir la bordure. Mettons-le à 2,7 RAM, solide. Au niveau de la couleur, je vais utiliser la fonction RGB. Les valeurs seront 212044. Ensuite, j'ai défini le rayon de bordure à deux RAM. Rendons les coins arrondis. Ensuite, je vais régler la couleur sur la même valeur RGB. En fait, nous avons besoin d'ici 74.4 Maintenant, la couleur est légèrement modifiée et je pense que c'est bien mieux Ensuite, nous avons besoin d' une taille de sept RAM. Ensuite, je vais créer un espace entre les lettres. Réglons-le sur 2,5 RAM. Change box shadow sera dans le set 003 Ram RGP et de la même couleur Nous avons maintenant de bien meilleurs résultats. Je vais utiliser le rembourrage restant de 2,5 RAM. Ensuite, fixons cos deux points. Voyons voir en bas à droite. Maintenant, nous devons sélectionner le bas, suivi de l'élément avant. Faisons en sorte que le contenu soit vide. Ensuite, je vais régler la largeur à 100 %. La hauteur à 100 %. Je vais régler la position sur absolue. Nous avons besoin de la position relative de l'élément du motif, qui est le bouton lui-même. Mettons la position à zéro. La position sera également nulle. Ensuite, nous avons besoin de Box Shadow 006 Ram. La couleur sera celle que nous avons utilisée. Ensuite, nous avons besoin d'un fond lumineux avec une fois que le contenu de l'élément sera vide. Ensuite, nous avons besoin que la position soit absolue. La première place sera zéro. La position gauche sera de 50 %, puis la largeur sera de 100 %. Quant à la hauteur, je vais également dire 100 %. Ensuite, je vais définir le fond. La couleur sera la même. Réglons l'opacité 2.7 Ensuite, nous devons transformer la translation -50 % puis de 130 % Je vais également utiliser ici fonction de rotation selon la direction x, la valeur sera de 45 degrés Et je vais aussi utiliser la fonction d'échelle 1.35 Ici, nous avons l'élément Utilisons un filtre avec fonction de flou avec une valeur de trois RAM. Étape par étape, nous créons l'ombre. Définissons les événements ponctuels, aucun. Ensuite, je vais utiliser la perspective, qui nous aidera à créer trois effets en D. Disons-le à six Ram. Comme vous pouvez le constater, l' ombre s'est étendue. Ensuite, je vais sélectionner un texte lumineux. Réglons la technologie Shadow 2001 Ram. La couleur sera RGBA 212474. Ensuite, nous avons besoin d'une autre valeur, 001 Ram. Rgba est de la même couleur mais avec une opacité de 0,7 En fait, nous avons également besoin ici d'une opacité de 0,7 Vous pouvez voir le résultat ici. Ensuite, je vais créer une animation CSS. Fixons le nom de la bordure des images clés à 0 %. L'opacité doit être de 0,1. Ensuite, l' étape suivante sera de 2 % et la valeur sera de un Répliquons ce changement de code. La valeur en pourcentage sera de 4 %, la valeur sera de 0,1 Ensuite, nous avons besoin de 8 % et la valeur de l'opacité sera de un Je vais insérer 70 % avec l'opacité 0,7. Ensuite, je vais définir 100 % et l'opacité Nous avons besoin de votre fonction d'animation pour appliquer ces règles. C'est la durée maximale de 2 secondes. Ensuite, nous avons besoin de linéaire et aussi d'infini. Comme vous pouvez le voir, nous avons ici un effet agréable, cool et éclatant Ensuite, je vais créer d' autres images-clés avec le texte du nom. À 0 % je vais régler l'opacité à 0,1 La prochaine étape sera de 2 %, l'opacité sera Ensuite, nous avons besoin ici de 8 % et d'une opacité 0,1. Ensuite, la prochaine étape sera de 9 % avec la valeur un Ensuite, nous aurons une capacité de 12 % soit 0,1. Ensuite, je vais insérer vos 20 % avec la capacité d'opacité Ensuite, nous aurons ici 25 % avec une valeur 0,3. La prochaine étape sera de 30 % et l'opacité sera de un insérez votre 70 % avec la valeur 0,7 L'étape suivante consiste à obtenir 72 % avec la valeur 0,2. Dupliquons à nouveau ce changement de code. La valeur en pourcentage sera de 77 % et l'opacité de 0,9. Ensuite, je vais définir la valeur du pourcentage sur 100 et l'opacité 0,9. Réutilisons la propriété d'animation avec le nom des images clés La durée sera de 3 secondes. Ensuite, nous avons besoin du linéaire et encore une fois de l' infini. Comme vous pouvez le voir, nous avons ici de beaux clignotements et lueurs, les faits La seule chose que je dois faire est de créer le bouton lumineux avec effet de survol Avec le survol, je vais régler l'arrière-plan sur RGB, la couleur que nous avons utilisée Je vais changer la couleur du texte. Disons que 22729 sera. Il faut alors que l'animation soit nulle. Utilisez également la transition. Une fois que nous aurons obtenu cette belle fente, le texte clignote toujours. Je vais donc sélectionner le bas brillant avec le pointeur de la souris, Je vais donc sélectionner le bas brillant avec le pointeur suivi du Réglons Box Shadow 2015 Ram et le RGB, la couleur utilise également la transition. Maintenant, l'ombre s' étend bien. Ensuite, je vais sélectionner le bas avec le survol suivi de l'élément après Réglons avec 2 100,20 % La hauteur sera de 120  %. Nous avons également besoin En fait, supprimons cette valeur. Je vais modifier la valeur de traduction. Ce sera 110 %. De plus, je vais utiliser son filtre avec fonction de flou avec une valeur de cinq Utilisez également la transition pour un effet fluide. Maintenant, tout semble plutôt beau. Enfin, je vais m' occuper du texte. Sélectionnons le bouton avec le pointeur de la souris suivi du sélecteur de texte lumineux Nous devons arrêter l'animation. Réglons-le sur non. Très bien, maintenant tout est parfait et nous avons terminé ce projet. Passons à autre chose. 21. Projet 16 - Hamburger Menu: Bien, il est temps de passer à autre chose et commencer à créer notre prochain projet. Dans cette section, nous allons créer un menu hamburger en HTML, CSS et Javascript Allons-y et décrivons le projet. Comme vous pouvez le constater, nous avons ici une image d'arrière-plan en plein écran. Au centre de la page, vous pouvez voir le menu hamburger en texte Les lettres ont un fond transparent et les bordures. Ensuite, dans le coin supérieur droit de la page, vous pouvez voir l'icône du menu, qui a ce joli et cool arrière-plan animé. Si je clique sur l'icône du menu, l'arrière-plan s' agrandira et les éléments du menu s'afficheront. Si je passe le curseur sur les articles, ils changeront de couleur de cette façon cool et agréable Ensuite, si je clique sur le bouton X, les éléments du menu se masqueront Très bien, donc je pense que ce projet sera intéressant et qu'il vous plaira. Allons-y et commençons. J'ai créé un nouveau dossier sur le bureau qui inclut un dossier pour les images. Allons-y, ouvrons le dossier et le code VS , puis créons nos fichiers de travail pour HTML, CSS et aussi pour Javascript. Ensuite, je vais ouvrir le fichier d'index HTM et créer le document HTM de base. Changeons le titre. Ce sera un menu de hamburgers. Je vais lier le CSS et les fichiers Javascript. Nous avons besoin de la balise de script et du nom du fichier dans l'attribut source. OK, allons-y et ouvrons le projet dans le navigateur. Placez ensuite le navigateur et l'éditeur côte côte, comme suit. Ensuite, je vais visiter le site Web de Google Phones, car nous allons utiliser les téléphones Google tout au long de ce projet. Allons-y et cherchons le téléphone appelé Secular One. Je vais sélectionner le style, puis copier le lien et le coller dans l'élément principal. Nous pouvons maintenant commencer à créer le balisage HD. Ouvrons Deep Tag, qui sera le conteneur. Ensuite, à l'intérieur du conteneur, je vais ouvrir Lending, dans lequel nous aurons H un élément de titre, le menu hamburger Ensuite, je vais créer un menu hamburger, dans lequel je vais insérer des éléments avec la navigation de classe Dans la navigation, nous aurons un élément de lien, qui sera l'élément de navigation dont nous avons besoin ici. Contenu des données, attribuez le texte home. Insérons ici la page d'accueil. Ensuite, nous avons besoin de quelques articles différents. La seconde portera sur le bloc. La prochaine sera une galerie. Quant au dernier élément de navigation, il s'agira de Contact. Ensuite, nous avons besoin du menu. Je vais insérer ici, Lines. Nous aurons trois lignes. Chaque développement comportera deux classes : ligne, ligne un, ligne deux et ligne trois. D'accord, c'est tout à propos du balisage HTML. Tous les éléments sont créés. Et maintenant, nous devons ouvrir le fichier CSS et commencer à écrire le CSS. Tout d'abord, je vais sélectionner chaque élément à l'aide d'un astérisque, puis définir la marge et les mettre tous les deux à zéro Ensuite, nous devons définir la propriété de dimensionnement de la boîte. Ce sera une zone de bordure. Ensuite, il faut que la décoration du texte ne soit aucune. Je vais également définir la famille de téléphones pour chaque élément, deux téléphones laïques et un capteur de référence. Comme vous pouvez le constater, les styles par défaut sont appliqués aux éléments. Ensuite, je vais définir la taille par défaut de l'élément HTM à 62,5 %, car nous allons utiliser M comme unité de mesure Dans ce cas, un M sera égal à dix pixels. Allons-y et sélectionnons le conteneur. Je vais définir sa largeur. Ce sera 100 % alors nous avons besoin de hauteur, ce sera une hauteur de 100 points Ensuite, je vais m' occuper de l'atterrissage. Réglons ça avec la hauteur. Je vais régler la largeur à 100 %. Quant à la hauteur, elle sera également de 100 %. Nous devons étendre l'atterrissage. Ensuite, je vais changer le fond d'écran. Utilisons le dégradé linéaire. La première couleur sera la couleur noire RGBA avec une opacité de 0,8 Quant à la deuxième couleur, nous avons besoin ici de la même valeur RGBA, mais l'opacité sera de 0,9. Ensuite, nous devons sélectionner l'image dans le dossier images Nous avons besoin d'une image d' arrière-plan en plein écran. Nous avons également besoin que la position soit au centre et qu'il n'y ait pas de répétition. Nous avons ici l'image d'arrière-plan en plein écran. En fait, je vais définir la propriété de taille d'arrière-plan deux, puis couvrir. Allons-y et utilisons les livres Flex. Nous devons centrer le titre sur cela. Utilisez le centre de contenu Justify et les centres des éléments de ligne peuvent voir que le titre est parfaitement centré sur la page. Ensuite, je vais sélectionner l'élément d'en-tête H et le personnaliser. Définissons la taille du téléphone. Il va y en avoir dix. Ensuite, il nous faut de la couleur. Réglons la couleur sur C A, A cinq. Oh, c'est de couleur jaune. Ensuite, je vais créer un effet d'ombre. Réglons Text Shadow 203 Ram, 6 Ram. Et la couleur RGBA avec une opacité 0,7 Ensuite, je vais créer un espace entre les lettres Réglons-le sur 2,3 RAM. Maintenant, nous avons besoin d'un fond transparent pour les lettres. Pour cela, je vais utiliser une propriété appelée Webkit Text stroke Ce sera 0,1 RAM et la couleur sera jaune. Nous devons également définir la couleur sur transparent. Donc, comme vous pouvez le voir, le titre est plutôt sympa. Ensuite, je vais m'occuper des éléments de navigation. Sélectionnons l' élément de lien et utilisons l'option Afficher aucun pour masquer les éléments du lien. Nous devons maintenant nous occuper de la navigation. Définissons avec la hauteur. La largeur va être, alors nous avons également besoin de hauteurs. Changez la couleur de fond. Nous allons utiliser ici la couleur 28231. Nous avons ici l' élément ci-dessous. Faisons attention à sa position. Je vais régler la position sur absolue. Ensuite, nous avons besoin de la position relative du conteneur. Parce que nous allons positionner l'élément en fonction du conteneur. Fixons la première position à quatre. Quant à la bonne position, il en sera de même. Ensuite, nous avons besoin de Box Shadow. Réglons-le sur 013. Et la couleur sera le noir avec une opacité de 0,7. Ici, nous avons l'élément placé dans le coin supérieur droit de la page Allons-y et créons une animation CSS à l'aide d'images clés. Nous devons ici nommer BG Anim à 0 %. Je vais définir le rayon de la bordure aux valeurs suivantes Le premier sera de 63 %, puis nous en aurons 37 %, le suivant sera 54 % puis 46 %, alors nous en avons besoin. Et 85 % 48  % puis 52 % La dernière sera de 45 %. La prochaine étape sera de 14 %. Reprenons ce code à partir d'ici et modifions les valeurs dont nous avons besoin ici. 40 % puis 60 % La prochaine sera 49 % Ensuite, nous aurons 60 % à 40 % et la dernière valeur sera 51 %. Ensuite, je vais passer à l'étape suivante, 28 % Reprenons le code , changeons les valeurs. Le premier sera de 54 %, puis 46 %, 38 %, 62 %. Ensuite, nous aurons ici 70 %, 30 % et 51 % La prochaine étape sera de 42 % Allons-y et changeons à nouveau les valeurs du rayon de bordure. Il nous faut ici 61 % puis 39 %. Le prochain sera 55 % 45 % Ensuite, il nous faudra 61 % puis 38 % 62 39  % Allons-y et définissons l' Il va falloir modifier les valeurs à 56 %. La première sera de 61 %, 39 %, 67 % , 33 % . Ensuite, nous aurons 70 %, 50 % 50 % et 30 %. La prochaine étape sera de 70 %. Changeons les valeurs La première sera de 50 %, puis encore une fois, 50 % 34 % 66 %. Ensuite, nous avons besoin 56 %, 68 %, 32 % et 44 %. À l'étape suivante, ce sera 84 %. Changeons la première valeur Ce sera 46 % Ensuite, nous aurons 54 % 50 % Ensuite, 50 % Ensuite, nous aurons 35 % 61 % 39 % 65 % D'accord cadre de la dernière étape, je suis dans 100 %. Nous avons besoin des mêmes valeurs que celles que nous avons utilisées pour la première étape, les images clés déjà Ensuite, nous avons besoin d'une propriété d'animation. Insérons le nom de l'animation. Ensuite, nous avons besoin d'une durée, de 7 secondes, linéaire et infinie. Comme vous pouvez le voir, nous avons ici ces éléments animés sympas et sympas. Passons à l'icône du menu. Je vais définir cette position. Réglons-le sur absolu. Ensuite, nous avons besoin de deux positions. Ça va avoir sept Ram. Nous aurons alors la bonne position. Je vais le régler à six RAM. Réglez la largeur, elle sera de 3,5 RAM. La hauteur est alors de deux. Ensuite, définissez le pointeur du curseur, et nous avons également besoin de la couleur d' arrière-plan. Utilisons ici la couleur jaune. Ici, nous avons l'icône du menu. Maintenant, il faut s' occuper des files d'attente. Réglons avec 23,5 Fram, alors la hauteur sera de 0,2 Changez la couleur d'arrière-plan, réutilisez ici la couleur jaune, puis supprimez cette couleur temporaire à partir d'ici. Ici, nous avons les lignes, maintenant nous devons les séparer. Réglons la position absolue. Ensuite, nous devons sélectionner la première ligne. Définissez deux. La position sera nulle. Ensuite, nous avons besoin de la deuxième ligne. Nous avons besoin d'une largeur de 60 %. Ensuite, position sera de 0,9 RAM. Nous avons également besoin d'une position gauche. Réglons-le à deux points de niveau Ram. Nous avons ici la deuxième ligne. Prenons ici la troisième ligne. Je vais récupérer ce code, définir le nom de la classe sur la troisième ligne. Ensuite, nous devons nous positionner à 1,8 RAM, d'accord. Nous avons donc ici l'icône du menu. Ça a l'air plutôt sympa. Nous devons maintenant écrire du Javascript. Créons une variable. Ce sera une icône de menu. 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 icône de menu. Ensuite, nous avons besoin d'une autre variable. Ce sera un menu de hamburgers. Changeons le nom de la classe. Nous avons besoin d'un menu de hamburgers. Ensuite, je vais ajouter un écouteur d'événements à l'icône du menu avec un événement cliqué Nous devons également passer ici la fonction Calbeck qui sera exécutée. Une fois que nous avons cliqué sur l' élément cliqué, nous devons ajouter une nouvelle classe au menu hamburger en utilisant la méthode Togo Le nom de la classe va être, disons, change. Nous devons maintenant utiliser ce nom de classe dans le fichier CCs afin de créer de nouveaux styles, qui seront appliqués une fois que nous aurons cliqué sur l'icône du menu Allons-y et utilisons Modifier avec navigation. Une fois que nous avons cliqué, nous devons changer. La première position sera de 50 % , puis la bonne position sera également de 50 %. Et nous devons centrer l'élément à l' aide de transform translate. Les valeurs seront de 50 % puis -50 %. Une fois que nous aurons cliqué sur l'icône, l'élément sera placé au centre, dans la navigation Il faut maintenant augmenter la taille de l'élément. Réglons avec 200 %, alors la hauteur sera également de 200 % Nous devons également publier l'animation. Pour cela, je vais utiliser une propriété appelée animation play state et elle sera publiée. Si je clique, l' élément sera développé, l'animation s'arrêtera. Nous devons maintenant masquer ces barres de défilement. Pour cela, je vais utiliser Overflow hidden. Maintenant, nous n'avons pas ici le scroll Bs. Ensuite, je vais ajouter ici la transition. Afin de rendre l' effet plus fluide, nous avons besoin d'un certain temps de temporisation et une fonction Cubic Busier pour rendre l'effet plus agréable Les valeurs seront 0,20 3,110,30 2,1 Encore une fois, avons également besoin ici La bonne position sera de 0,4 seconde. La durée sera de 0,4 seconde. Ensuite, nous avons besoin d'un délai. Encore une fois, la fonction Cubic Busier. Ensuite, nous aurons Transform. La durée sera de 0,3 seconde. Ensuite, nous avons besoin d'un délai. Ensuite, avec une durée de 0,8 seconde, le temps de retard sera de 1 seconde. Et encore une fois, nous avons besoin d'une fonction Cubic Busier. Vient ensuite la hauteur 0,8 seconde, 1 seconde. Et la même fonction cubique ser. En fait c'est ça. Comme vous pouvez le constater, nous avons ici cet effet sympa et cool. La navigation s'étend de cette manière cool. Prenons la transition et ajoutons-la ici. Par défaut, organisons le code, puis éliminons le délai et modifions-le. Ça fait 1,1 seconde. Encore une fois, il nous faut 1,1 seconde. Vient ensuite la transformation. Modifions le délai. Cela va prendre 1,1 seconde. Pour ce qui est de la largeur, il nous faut ici 0,7 seconde puis 0,4 seconde pour la hauteur. Ajoutons ici les mêmes valeurs. Maintenant, si je clique puis que je ferme, nous obtiendrons ici les effets animés sympas et sympas. OK, maintenant nous devons nous occuper des files d'attente. Commençons par la première ligne. Nous avons besoin de deux positions pour un poids de 0,9 gramme. Ensuite, nous devons transformer la fonction Rotate. La valeur sera de 45 degrés. Ensuite, nous avons besoin de la deuxième ligne , le changement de classe ayant défini l'opacité à zéro et la faisabilité, nous devons complètement masquer la deuxième ligne En ce qui concerne la troisième ligne, nous avons besoin ici de deux positions soit 0,9 Ram. Ensuite, la propriété de transformation devra faire pivoter la fonction avec la valeur -45 degrés. Une fois que j'ai cliqué ici, petit problème. Oui, nous devons changer le nom de la classe. Nous avons maintenant ici un bouton de fermeture en X sur un clic. Ajoutons ici la transition. Au bout d'une seconde, j'utilise également la fonction Cubic Busier. De plus, nous avons besoin ici de transformer 0,3 seconde, 1,6 seconde. Ensuite, je vais copier, en fait, nous avons besoin d'une transition et non d'une transformation. Copions le code, collez-le ici. Une fois que j'ai cliqué, nous aurons cette belle transformation de l'icône du menu. Je trouve que ça a l'air plutôt cool. Ensuite, utilisons la transition pour la première ligne. Et le délai sera de 1,6 seconde. De plus, nous avons besoin d'un point de durée d'une seconde sans délai. Utilisez ensuite la transition pour la deuxième ligne. Par défaut, nous avons besoin d'un point d' opacité de 1 seconde et d'un temps de retard de 1,6 seconde Copions le code. En fait, nous en avons besoin pour la troisième ligne. Maintenant, si je clique, nous arriverons ici. Ce fait sympa et cool. OK, occupons-nous des éléments de navigation. Je vais les montrer en retour. Personnalisons les éléments du lien. Je vais utiliser Flex Books avec Justify Content Center. Ensuite, nous devons changer de direction. Créons la colonne et à côté de cela, nous avons également besoin du centre des éléments de ligne. Comme vous pouvez le voir, nous avons ici les éléments de navigation. Réglons la taille de police à sept RAM. Ensuite, la couleur sera CCC. Modifiez l'espacement des lettres. Réglons-le sur 0,3 RAM. Ensuite, nous avons besoin de la marge inférieure. Faisons-en un RAM. Nous avons ici les éléments de navigation. Ils ont l'air sympa. Sélectionnons la navigation suivie du lien. Ensuite, avant le développement, le contenu sera le contenu des données attributaires que nous avons utilisé dans l'élément HTML. Ensuite, je vais régler la position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent. Mettons la position à zéro. Ensuite, la position des jambes sera également nulle. Je vais régler la couleur sur le jaune. Je vais régler la couleur sur B, D neuf. Ensuite, la largeur sera de 100 %. Ici, nous avons l'élément forcé. Réglons la largeur à zéro, puis masquons l'élément à l' aide de l'ourlet de débordement L'espace blanc doit être p. Ensuite, nous devons sélectionner navigation A avec le survol suivi de l'élément précédent Au survol, il faut changer la largeur. Ce sera 100 %. Ensuite, nous avons besoin de votre transition alors que 0,6 seconde est écoulée. Une fois que j'aurai survolé, nous obtiendrons cet effet sympa et cool une fois que j'aurai fermé la navigation Ensuite, nous aurons ici un petit problème dont nous avons besoin ici, opacité zéro et la visibilité Ensuite, je vais utiliser Change, puis le lien de navigation. Nous devons réexposer les articles. Nous avons maintenant de meilleurs résultats, mais nous avons besoin ici d'une transition 0,5 seconde et d' un délai de 1,5 seconde. Nous avons besoin d'une transition par défaut toutes les 0,5 secondes. Maintenant, si je clique, nous obtiendrons des résultats sympas. Tout fonctionne parfaitement, et le projet est terminé. Passons à autre chose. 22. Projet 17 - En-tête de site avec diaporama et menu de navigation: OK, il est donc temps de passer à autre chose et de créer notre prochain projet. Dans cette section, nous allons créer un en-tête de site Web avec un diaporama et un menu de navigation. Le projet sera créé sur la base du HTML, du CSS et du Javascript. Allons-y et décrivons le projet. Comme vous pouvez le constater, le projet porte sur la nourriture. Nous avons ici quelques diapositives différentes qui incluent des images de nourriture, certains titres et le paragraphe Et nous avons également ici le bouton a un effet de survol agréable et cool Le numéro se compose d'un logo et quelques éléments de navigation qui ont cet effet de survol agréable et cool De plus, dans le coin supérieur droit, nous avons une icône de menu avec un effet de survol Si je clique dessus, la barre latérale apparaît. Si je clique ici, les éléments de navigation s'afficheront bien. Fermons la barre latérale. En fait, le projet s' adapte aux différentes tailles d'écran. Si j'inspecte la page, que je passe en mode réactif et que je vérifie le projet est adapté à différentes tailles d'écran, vous constaterez que le projet est réactif. Cela convient aux différentes tailles d'écran. Vous découvrirez le responsive web design. Très bien, alors asseyons-nous sur le projet. Ce sera un gros match, mais j'espère que vous l'apprécierez et que vous apprendrez de nouvelles choses. Allons-y et commençons. J'ai créé un nouveau dossier sur le bureau. Allons-y, ouvrons-le dans le code VS, puis créons nos fichiers de travail. Nous avons besoin du HTML à points d'index, puis du style CSS. Nous avons également besoin d'un fichier pour le script Javascript JS. Ouvrons le fichier HTML à points d'index et créons le document HTML de base. Je vais changer le titre, ce sera la page de destination, puis je vais lier les fichiers CSS et Javlscript Ouvrons le script et spécifions le nom du fichier multiple dans l'attribut source. Ensuite, je vais ouvrir le projet dans le navigateur en utilisant le serveur live. Ensuite, placez le navigateur et l'éditeur côte à côte afin de rendre notre processus de travail plus pratique et plus simple. Je vais visiter le site Web de Google Phones, car nous allons utiliser certains téléphones Google tout au long de ce projet. Allons-y et recherchons un téléphone Google appelé Fiel One Je vais sélectionner le style. Ensuite, je vais chercher un autre téléphone. Ça va être de l'encre, antiqua, je ne sais pas comment prononcer ces noms de poids Nous allons sélectionner ces styles, puis copier le lien et le coller uniquement dans la tête. Très bien, ensuite je vais me procurer le CDN pour les asomiques téléphoniques, parce que nous allons utiliser Copions le lien, la balise open link dans l'élément principal et collons ici le CDN. Très bien, nous sommes prêts à commencer à construire un projet. Créons un conteneur dans lequel je vais avoir un prêt. Ensuite, je ne vais ouvrir aucun élément dont la classe fait maintenant partie. Insérons un tag qui sera le logo. Le logo sera composé d'un pontomicon, qui sera un solide ustensile A. Ensuite, nous allons passer à la navigation. Je parle des éléments dont nous avons besoin ici, des éléments de lien. Le premier sera à la maison. Ensuite, je vais le dupliquer plusieurs fois et modifier les éléments. Le second portera sur. Ensuite, nous mangerons de la cuisine. Je vais visiter votre galerie. Ensuite, l'élément suivant sera bloqué. Pour ce qui est de la dernière, je vais vous contacter sur place ici Nous avons ensuite les éléments de navigation dont nous avons besoin. Créez l'icône du menu Nous avons besoin ici de deux lignes avec les classes ligne et ligne un, et également de la ligne deux. Après la navigation, je vais créer des diapositives. Ouvrons le tag P. Ce sera toboggan et il y aura un autre cours. Diapositive 1, nous avons besoin ici d'un emballage d'image de diapositive. Ensuite, l'image elle-même. Je vais sélectionner une image dans le dossier des images. Nous avons besoin de nourriture. Ensuite, nous aurons une bannière. Il sera composé de H, un élément de titre avec le titre de classe PG. Le texte sera Taste. Ensuite, nous aurons H deux éléments de titre avec l'en-tête principal de la classe. Le texte va être une nourriture incroyable. Ensuite, nous aurons un paragraphe avec la description de la classe food task. Nous allons avoir ici un texto de Tammy. Nous aurons également ici en bas la diapositive de classe, PTN. De plus, nous aurons ici l'attribut type et ce sera pat. En ce qui concerne le texte, je vais insérer davantage votre point de vue. OK, je vais maintenant créer la barre latérale. Nous avons besoin ici de l'icône des téléphones qui sera une marque FA solide en X. Ce sera le bouton de fermeture. Ensuite, nous aurons la barre latérale. Non, nous avons besoin d'un bouton avec le buffet du cours, BTN le texte sera «   cuisine Nous avons également besoin du type de bouton. Ensuite, après le bouton, je vais créer suffisamment d'éléments dans la barre latérale. Je vais insérer votre élément de lien. Ce sera la maison. Répliquons-le plusieurs fois. En fait, je vais récupérer ces liens parce que nous avons besoin du même contenu. Collons-le ici. Très bien, donc avec le balisage HTML, nous avons presque terminé Commençons par écrire du CSS. Je vais mettre à zéro la marge et le rembourrage de chaque élément Ensuite, nous avons besoin de la taille de la boîte. Ce sera une zone de bordure. Ensuite, je vais définir la décoration du texte sur none. Nous avons besoin d'une famille téléphonique, ça va en être une. Ensuite, je vais régler la taille de téléphone de l'élément HTML à 62,5 %, car nous allons utiliser M comme unité de mesure Dans ce cas, un RAM sera égal à dix pixels. Je vais maintenant sélectionner le conteneur. En fait, nous devons changer ici. Le nom va être container. Réglons la largeur à 100 % car la hauteur sera de 100 % de la hauteur de la fenêtre d'affichage Ensuite, je vais régler le pudding trois béliers sur les quatre côtés Ensuite, je vais sélectionner l'atterrissage. Réglez sa largeur à 200 %, puis la hauteur sera de 100 %. Ensuite, je vais également sélectionner les diapositives et ces deux lignes ici Ensuite, nous avons besoin d'une diapositive. Nous avons besoin d'une hauteur de 100 % Bien, après cela, je vais sélectionner l'emballage d'image de diapositive et l' utiliser à nouveau avec une hauteur 100 %. Dupliquons ce code et utilisons-le avec la hauteur pour l'image elle-même Maintenant, la taille de l' image est modifiée. Sélectionnons la barre latérale et masquons-la pendant un moment. Ensuite, je vais sélectionner, maintenant je vais définir sa position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent qui est un atterrissage. Réglons la largeur à 100%. La hauteur sera de dix RAM. Ensuite, je vais utiliser des livres flexibles. Nous devons ici justifier l'espace de contenu entre les deux. En ce qui concerne les objets LN, je vais les mettre au centre. Ensuite, nous avons besoin d'un rembourrage. 0,5 RAM. Nous avons ici la navigation. Je vais régler la couleur d'arrière-plan sur CCC pendant un moment. Nous pouvons maintenant voir l'icône et les éléments de navigation. Débarrassons-nous de la couleur de fond. Ensuite, je vais m' occuper du logo. Réglons la taille du téléphone à cinq RAM. Ensuite, nous avons besoin de Webkit, d'un trait de texte. Ce sera 0,1 Ram. La couleur sera le blanc. Pour ce qui est de la couleur elle-même, je vais la définir comme transparente. Maintenant, nous avons là un fait aussi beau et cool. Réglons le curseur de manière à ce qu'il pointe. Bien, après ça, je vais m' occuper de la navigation. Je parle des éléments du lien. Réglons la taille du téléphone à deux RAM. La transformation du texte sera en majuscules. Je vais mettre la couleur sur le blanc. Nous avons besoin d'une marge 03 Ram sur les côtés gauche et droit. Nous avons ici les éléments de navigation. Créons un effet excessif en utilisant des pseudo-éléments avant et après. Nous avons besoin que le contenu soit vide. Ensuite, je vais régler la largeur à 100%. Ensuite, la hauteur sera de 0,2 RAM. Nous avons besoin d'une couleur de fond, elle sera blanche. Ensuite, je vais définir la position. Ce sera absolu et nous avons besoin d'une position relative pour l'élément de lien. Réglons deux positions à -0,5 RAM. Quant à la position de gauche, elle sera nulle. Nous avons ici les lignes. Nous avons maintenant besoin de la même ligne en bas des liens. Utilisons l' élément after do, je vais changer les positions dont nous avons besoin (position inférieure). Maintenant, nous avons des files d'attente de haut en bas. Ajoutons ici l'échelle de transformation x zéro. Nous devons les masquer et les afficher. Une fois que nous avons survolé les éléments, survolons la classe et passons à l'échelle 1 Nous avons également besoin de la même chose pour l'élément. En outre, nous devons utiliser la transition pour un effet plus fluide. Une fois que nous avons survolé les éléments , les lignes s'affichent Mais elles apparaissent depuis le centre. Et nous devons le changer. Nous devons changer l'origine de la transformation. Et nous devons passer à l'élément précédent. Et nous avons besoin de transformer l'origine, juste pour l'élément suivant. Maintenant, si je survole, nous obtiendrons cet effet de survol agréable et cool nouveau cet effet de survol agréable et cool qui concerne les éléments de navigation Ensuite, je vais m' occuper de l'icône du menu. Réglons la largeur à six RAM. La hauteur sera de deux béliers. Ensuite, je vais m' occuper des files d'attente. Réglons sur 100 % Quant au De, il sera de 0,4 Comme nous devons changer la couleur de fond, définissons-le en blanc. Nous avons ici deux lignes et nous devons les séparer. Pour cela, je vais utiliser des livres flexibles. Nous devons afficher le flex , puis la direction du flex sera également une colonne, nous devons justifier l'espace de contenu entre les deux et aussi changer le Coursormke it point, vous aurez l'icône du menu Ensuite, je vais créer des effets de survol. Nous devons sélectionner la ligne au survol. Réglons l'échelle de transformation x 0,5 et utilisons ensuite la transition. Si je survole, la largeur des lignes diminuera Mais nous avons besoin d'effets différents pour la première et la deuxième ligne. Nous devons modifier l'origine de la transformation. Ce sera parfait pour la première ligne. Pour ce qui est de la deuxième ligne, je vais la prendre à gauche. Maintenant, si je survole, nous obtiendrons de meilleurs résultats Mais ce n'est pas ce dont nous avons besoin en fait. Nous devons changer le nom de la classe maintenant, tout fonctionne parfaitement. Très bien, passons à la navigation. Passons à autre chose et occupons-nous des diapositives. Je vais définir la couleur d'arrière-plan de l'emballage d'images , puis nous avons besoin d'un objet adapté aux images. Ça va être couvert. Et je vais aussi diminuer l'opacité 2.3 Maintenant, les images sont bien meilleures Ajoutons une propriété d'index à la barre n, passons à dix. Ensuite, je vais sélectionner un pan dont la largeur est fixée à 100 RAM. Et la hauteur sera également de 100 Ram. Je vais régler la position en valeur absolue. Ensuite, nous positionnons la position absolue pour l'élément parent qui est une diapositive, je vais définir deux positions à 50 % puis position à 50 % . Ensuite, pour le centrage, nous devons transformer la traduction à 50 % et encore une fois à 50 %. OK, après cela, je vais sélectionner le titre PG Définissons la position, je vais la rendre absolue. Ensuite, nous devons positionner 20 % vers la gauche, position sera de 50 %. Pour le centrage horizontal, nous devons transformer la traduction x -50 %. Voici le titre, définissons la famille de téléphones sur Inknut Antique Ensuite, la taille du téléphone sera de 20 RAM. Ensuite, je vais utiliser le trait de texte Webkit, nous avons besoin d'un arrière-plan transparent et la bordure, nous avons besoin de 0,05 RAM Et la couleur sera le blanc. La prochaine minute, la couleur doit être transparente. Nous avons ici un cap. En fait, nous devons changer ici, cette lettre. Maintenant, le problème est réglé. Réglons l' espacement des lettres à 1,5 RAM. Nous avons besoin d'un espace entre les lettres. Ensuite, je vais configurer Opacity 2.4. Je trouve que le titre est plutôt cool Sélectionnons le titre principal. Je vais régler la position position absolue 47 %, la position gauche 22 %. Ensuite, nous avons besoin de la taille du téléphone, je vais le régler sur un tram. Ensuite, je vais transformer le texte en majuscules. Changeons la couleur. Je vais faire du blanc, puis je vais augmenter l'espace entre les lettres. Faisons en sorte que ce soit 0,5 RAM. Le titre est plutôt sympa. En fait, je vais ajouter ici le poids de la police. Passons à 300, d'accord ? Après le titre principal, je vais m' occuper du paragraphe. Réglons la position sur absolue. Ensuite, la position inférieure sera de 35 %. Ensuite, je vais régler position gauche à 50 %. Et nous devons centrer l'élément horizontalement en utilisant transform translate x -50 %. Réglons la largeur sur 80 RAM Ensuite, je vais régler la taille du téléphone à 1,8 RAM. Changez le poids du téléphone, réglons-le à 300. De plus, nous devons aligner le texte au centre , puis la couleur sera blanche. Voici le paragraphe. Ensuite, je vais commencer par le bas. Réglons la largeur à 20 RAM. Ensuite, la hauteur sera de cinq béliers. Ensuite, je vais régler la position sur absolue. La position inférieure sera 27 %. Pour la position de gauche, je vais régler sur 50 %. Ensuite nous devons envoyer à l'élément en utilisant la fonction transform translate x -50 %. Le bas est placé au centre Ensuite, je vais changer la couleur de fond, elle sera transparente. Je vais régler la bordure à 2,1 RAM et la couleur sera blanche, la taille du téléphone à 1,8 RAM. Ensuite, je vais transformer le texte en majuscules. Créez également un espace entre les lettres, faites-en 0,1 RAM. Puis change de couleur, ça va être blanc. De plus, nous avons besoin que le curseur soit pointeur. Ensuite, sélectionnez Bouton, puis les quatre éléments. Faisons en sorte que le contenu soit vide. Nous devons créer les parties blanches au survol. Réglons la largeur à 20 RAM. Ensuite, la hauteur sera de dix Ram. Changeons la couleur de fond pour le rendre blanc. Ensuite, la position sera la position gauche absolue sera de -14 Ram Pour ce qui est des deux positions, je vais les mettre à zéro. Ensuite, nous devons transformer avec fonction de rotation dans la direction z. La valeur sera de 45 degrés. Ici, nous avons les éléments blancs sur le côté gauche du bas. Nous avons besoin de la même chose en utilisant les éléments suivants, nous avons besoin des éléments. Je veux dire, des éléments blancs sur le côté droit. Changeons la position dont nous avons besoin. Hein ? Comme les deux positions seront égales à moins cinq fram, nous avons la deuxième partie sur le côté droit Je vais créer l' effet de survol dont nous avons besoin ici. Avant survoler, je vais augmenter l' échelle de l'élément Mettons-le à 2.4 Nous avons besoin de la même chose pour les éléments suivants. Utilisons la transition pour un effet plus fluide. Si je survole, ces éléments augmenteront. Ensuite, je vais sélectionner Patton avec pointeur et je vais changer la couleur du texte. Faisons en sorte qu'il soit noir. De plus, nous avons besoin d'une transition avec un certain délai, d'une durée de 0,3 seconde. Nous avons également besoin d'une transition par défaut pour le patton. Mais dans ce cas, sans transition, sans délai, il faut ajouter. Voici la propriété d'index avec une valeur négative afin d'afficher le texte. Voici le texte. Nous devons maintenant masquer ces parties blanches à l'extérieur du parton en utilisant le trop-plein Nous avons maintenant ici un effet de survol agréable et cool. Très bien, ajoutons à l' atterrissage un effet d'ombre avec les valeurs 01 Ram, 3 Ram. Et la couleur noire RGBA avec une opacité de 0,7 Maintenant, nous avons ici un effet d'ombre agréable et cool En fait, je vais me débarrasser de la barre de défilement en utilisant Overflow Heiden pour le conteneur. Les défilement ne sont plus visibles Je vais dupliquer la diapositive plusieurs fois. Nous aurons quatre diapositives différentes. Apportons les modifications dont nous avons besoin ici. Diapositive 2. Changez également le nom de l'image, et nous devons changer les titres et les recettes délicieuses Ensuite, nous avons besoin de la diapositive 3. Modifiez également le contenu des rubriques dont nous avons besoin ici, Profitez Quant à la deuxième rubrique, ce seront des ingrédients frais. Ensuite, nous aurons ici la diapositive 4. Changez le nom de l'image et modifiez également le contenu de l'en-tête Eléments. Nous aurons ici Explore puis Top Cuisines. Bien, maintenant il est temps d'écrire du Javascript et de faire fonctionner le diaporama. Je vais créer un diaporama variable, qui sera la fonction. Ensuite, nous devons sélectionner les diapositives et en faire un tableau en utilisant la méthode du tableau. Nous avons besoin ici de diapositives en utilisant la méthode du sélecteur de requête. Spécifiez ici la diapositive du nom de la classe. Je vais parcourir la console pour voir le résultat. Appelons la fonction. Si j' inspecte la page puis que je passe à l'onglet de la console, nous obtiendrons ici un tableau composé de quatre diapositives différentes. Comme vous pouvez le constater, nous avons ici des développements concernant les noms de classes et les numéros d'index. Ensuite, je vais créer une variable appelée current, qui sera le compteur. Je vais le définir sur un par défaut. Ensuite, nous avons besoin de l' instruction here if dans laquelle je vais définir ce qui suit. Si le courant est supérieur à la longueur de deux diapositives, je parle du nombre de diapositives, alors nous devons régler le courant sur une. Sinon, je veux dire, si le courant est égal à zéro, alors nous devons définir la longueur actuelle des deux diapositives. Nous avons également besoin ici de l'opérateur d'incrément plus plus plus actuel. Nous devons augmenter le courant d'une unité. Ensuite, je vais utiliser la méthode set interval. J'appelle la fonction Diaporama. Nous avons besoin de 1 000 millisecondes. Ensuite, je vais parcourir les diapositives en utilisant la méthode du fourrage. Nous avons besoin de sa déclaration dans laquelle nous avons besoin de la liste 1, nous devons accéder au nom de la deuxième classe sur la diapositive. Ensuite, nous avons besoin de la méthode fractionnée. Nous devons le diviser en deux et récupérer le deuxième article. Nous devons le numéroter, puis il devrait être égal au courant. Si cette condition est vraie, ajoutez à la diapositive les styles CSS suivants. Nous avons besoin ici d'une visibilité visible et aussi d'une opacité Ensuite, nous avons besoin de la déclaration L. Si cette condition est fausse, alors nous devons masquer cette diapositive en utilisant la visibilité masquée et l'opacité nulle, d'accord ? Alors maintenant, comme vous pouvez le voir, diaporama fonctionne. Les diapositives changent avec un intervalle d'une seconde. Je vais utiliser la transition pour la diapositive avec opacité et la durée sera de 0,3 seconde. Maintenant, les diapositives changent plus facilement, nous en avons besoin ici. La couleur de fond doit être noire afin de créer un effet de fondu beaucoup plus agréable Et aussi, nous devons modifier l'intervalle. Modifions également la durée de la transition. Maintenant, nous avons ici un résultat bien meilleur et cool. Le diaporama fonctionne parfaitement. Ensuite, je vais m' occuper de la barre latérale. Fixons la position. Ensuite, nous devons nous positionner à zéro. La bonne position sera également zéro. Ensuite, la largeur sera de 50 RAM. Quant à la hauteur, je vais faire en pot atteigne une hauteur de 100 vues. Ensuite, changeons la couleur de fond. Ce sera D DD. Ici, nous avons la barre latérale. Utilisons la propriété index pour masquer l'icône du menu. Maintenant, le problème est réglé. Ensuite, sélectionnons la barre latérale I Elements. Je suis sur le bouton de fermeture X I, la position absolue, et la première position sera deux RAM. La bonne position sera cinq RAM. Ensuite, je vais augmenter la taille du téléphone. Faisons-en un bélier. Changez la couleur de l'icône. Il va y en avoir 555. De plus, nous avons besoin que le curseur soit pointeur. En fait, l'icône n' est pas visible. Voyons le fichier HTM dont nous devons nous débarrasser à partir d'ici. Maintenant, l'icône est visible et elle est plutôt jolie. Ensuite, je vais m' occuper de la navigation. Je vais régler la largeur à 40 RAM. Ensuite, la hauteur sera de 15 Ram. Je vais définir la bordure 2.1 Ram solute. Et la couleur sera 999. Ensuite, nous avons besoin que la position soit absolue. La position supérieure sera de 50 %, la position noire sera de 50 %. Nous devons centrer l'élément. Nous avons besoin de Transform Translate. -50 % et encore -50 % Ensuite, je vais sélectionner le côté B, Réglons la largeur à 40 RAM. Ensuite, la hauteur sera de 15 Ram. Je vais changer la couleur de fond. Réglons-le sur transparent. Ensuite, je vais définir la bordure sur non. Nous avons également besoin que la famille soit passionnée par les noix d'encre. Ensuite, nous avons besoin d'une taille de police de six RAM. Je vais transformer le texte en majuscules. Encore une fois, je vais utiliser le trait de texte du kit Web pour rendre le texte plus agréable. Nous avons besoin ici de 0,1 Ram 222 et ensuite la couleur sera transparente. Ensuite, positionnons le curseur de manière à ce qu'il pointe. Nous avons ici le bas, qui est plutôt joli. Modifions la hauteur de la navigation. Faites-en 60 points de rampe. Nous devons placer les objets ici. Sélectionnons la barre latérale. Désormais, les éléments configurent l'affichage sur flex. Ensuite, nous avons besoin que la direction de flexion soit une colonne. De plus, je vais définir la position en absolu. Ensuite, la position supérieure sera de 30 %. La position sera de 50 %. Réglons transformation pour traduire X et la valeur sera de -50 %. Nous devons centrer l'élément horizontalement Réglons le centre d'alignement du texte. Ici, les éléments de navigation sont alignés. Nous devons maintenant sélectionner Link Element et les personnaliser. Réglons alors la taille du téléphone à trois RAM. La couleur sera 888. Ensuite, nous devons fixer la marge à un B et à zéro. Nous devons transformer le texte en majuscules. Les articles sont beaux. Nous devons maintenant créer un effet de survol. Ajoutons ici le survol. Suivez le cours, je vais changer de couleur au survol. Réglons-le sur 444. Et utilisez également la transition pour un effet plus fluide. Nous avons ici un effet de survol. Ensuite, je vais masquer la barre latérale. Réglons la bonne position deux -50 Ram. Utilisez maintenant Javascript pour l'afficher. Au clic, je vais créer une barre latérale variable TN. Nous allons sélectionner cet élément à l'aide de la méthode de sélection de requête. Spécifiez ici le nom de la classe, la barre latérale, le PTN. Je vais dupliquer ce code plusieurs fois. La deuxième variable sera la barre latérale. Changeons le nom de la classe. Ensuite, nous aurons l'icône du menu. Nous devons également fermer le bouton X. Nous allons sélectionner cet élément. Nous devons ajouter un écouteur d'événements à l'icône du menu cliquant sur Événement avec une fonction de rappel Je vais ajouter une nouvelle classe dans la barre latérale. Une fois que nous avons cliqué sur l' icône du menu à l'aide de la méthode, appelons le nom de la classe, naviguons. Dupliquons ce code que nous devons supprimer. Nous avons besoin de fermer ici. Mais une fois que nous avons cliqué sur X, nous devons supprimer la classe. Naviguez. OK. Utilisons maintenant la navigation, suivie de la barre latérale. Je vais changer de position. Mettons-le à zéro. Ensuite, nous avons besoin d'une transition. Je vais entrer ici, à ce moment-là, la durée sera de 0,5 seconde. Et nous avons également besoin d'une fonction cubique avec les valeurs 100,1. Si je clique sur l'icône du menu, nous arriverons à la barre latérale et elle se fermera Une fois que vous avez cliqué sur le bouton de fermeture. OK, maintenant nous devons cacher les objets. Disons que l'opacité est nulle et que la visibilité est masquée. Ensuite, je vais changer la hauteur des 32 15 Ram. Maintenant, je vais ajouter Even Listener au bouton de la barre latérale en cliquant à nouveau sur l'événement Nous avons besoin ici d'une fonction de rappel. Une fois que nous avons cliqué sur le bouton , nous devons en ajouter une autre dans la barre latérale en utilisant la méthode totale Appelons le changement de classe. Nous devons maintenant sélectionner la barre latérale. Maintenant, avec le changement de classe, nous devons augmenter la hauteur au clic, passons à 60 RAM. Et utilisez également à nouveau la transition avec les valeurs de hauteur. La durée sera de 0,5 seconde. Maintenant, si je clique sur le bouton, l'élément se développera. Nous devons maintenant afficher les éléments de navigation. Nous avons besoin de votre changement de classe, suivi des n éléments. Nous devons définir l'opacité à un et la visibilité à faisable. Ensuite, nous avons besoin d'une transition ici. Tout va durer 0,5 seconde et nous avons besoin d'un temps de retard de 0,5 seconde. Maintenant, une fois que j'ai cliqué, les éléments de navigation s'afficheront bien. OK, donc tout fonctionne parfaitement. Nous devons maintenant rendre le projet réactif. Passons au mode réactif. Je vais définir la largeur et la hauteur pour une taille d'écran très grande. Ensuite, je vais trouver les points d'arrêt sur lesquels nous devons apporter des modifications Je vais utiliser des requêtes multimédia CSS pour rendre le projet réactif. Allons-y et créons une requête multimédia CSS. Je vais spécifier une largeur maximale de 1 200 pixels. Régler le côté téléphone de l'élément H dem 250, 5 % Diminuez la taille de l'écran. Comme vous pouvez le constater, les éléments sont devenus plus petits après 1 200 pixels. Ensuite, nous devons trouver le prochain point de rupture. Créez une requête multimédia CSS et spécifiez largeur maximale de 1 000 pixels. Je vais régler la taille du téléphone pour l'élément H tim à 50 % pour que tout soit beau. Sélectionnons l'en-tête d'arrière-plan et définissons la taille de police sur 16 RAM. Ensuite, je vais régler les deux positions à 25 %. Ensuite, je vais sélectionner le paragraphe et régler la largeur sur 60 RAM. Je trouve que tout va bien et que nous devons trouver le prochain point de rupture. Je vais créer une nouvelle requête multimédia CSS. Réglons la largeur maximale à 800 pixels. Je vais à nouveau diminuer la taille de police de l'élément H m. Réglons-le à 45 %. Ensuite, je vais sélectionner la navigation. Je parle des éléments du lien, et définissez la marge sur 0,1 RAM. Ensuite, prenons soin de la bannière. Je vais récupérer le code à partir d'ici, changer la taille du téléphone, faire en sorte qu'il soit 14 RAM. Pour ce qui est des deux positions, je vais passer à 28 %. Ensuite, sélectionnons le titre principal, réglons la taille du téléphone à sept RAM. Pour ce qui est de la position de gauche, je vais l'atteindre à 25 %. D'accord, allons-y et trouvons le prochain point de rupture. Allons-y et créons une nouvelle requête multimédia Cess. Et spécifiez la largeur maximale qui sera de 600 pixels. Je vais régler la taille du téléphone de l'élément HTML à 40 %. Ensuite, nous avons besoin de la navigation. Je dois le cacher. Ensuite, nous avons besoin d'un titre d'arrière-plan. En fait, les deux rubriques. Apportons ici quelques modifications. Réglez la taille du téléphone sur dix RAM. Ensuite, les deux positions seront de 33 %. En ce qui concerne le titre principal, je vais régler la taille du téléphone à six RAM. Quant à la position, fixons-la à 27 %. D'accord, je trouve que tout est plutôt beau. Maintenant, nous devons vous parler du dernier point de rupture. Allons-y, créons une nouvelle requête multimédia CSS et spécifions une largeur maximale de 450 pixels. Je vais régler la taille de téléphone de l' élément HTM à 35 %. De plus, nous avons besoin que la barre latérale soit étendue sur toute la page Réglons avec 100 % Pour ce qui est de la bonne position, je vais passer à -100 %. Une fois que j'ai cliqué , la barre latérale s' étendra sur toute la page Ensuite, je vais sélectionner le titre principal et définir la taille du téléphone à 25 images par seconde. La position de gauche sera de 29 %. Ensuite, je vais sélectionner le paragraphe défini avec 245 images Maintenant, je trouve que tout semble plutôt beau, et en fait, avec le projet, nous en avons terminé. Il s'adapte aux différentes tailles d'écran. J'espère que c'était intéressant et que vous y apprendrez de nouvelles choses. Passons à autre chose. 23. Project 18 - Carte de profil: Très bien, passons donc à autre et commençons à créer un nouveau projet. Dans cette section, nous allons créer une carte de profil. Le projet sera créé sur la base du HTML, du CSS et du Javascript. Allons-y et décrivons-le rapidement. Comme vous pouvez le constater, nous avons ici une carte avec l'image d'une personne. En bas, vous pouvez voir le bouton plus. Si je clique dessus, la carte s'agrandira et vous verrez les détails sur la personne, tels que son nom, son poste, ses liens vers les réseaux sociaux, etc. Le bouton plus est modifié pour me contacter. Si je clique sur le bouton retour, la carte se ferme. OK. Cette discussion sur le projet est donc simple, mais je pense que ce sera intéressant et utile car nos jours, de nombreux sites Web ont besoin de cartes de profil. Passons à autre chose et commençons. J'ai créé un nouveau dossier sur le bureau dans lequel j'ai un autre dossier pour les images. Ouvrons le dossier dans le code VS, puis créons les fichiers de travail pour le HTML, pour le CSS. Nous avons également besoin d'un fichier pour le script Java. Ensuite, je vais ouvrir le fichier index so mel et créer un document H mel de base. Changeons le titre. Ce sera une carte de profil. Ensuite, je vais lier les fichiers CSS et Charles. Nous avons besoin ici de la balise de script et du nom du fichier dans l'attribut source. OK, allons-y et ouvrons le projet dans le navigateur à l' aide du serveur live. Ensuite, je vais placer l'éditeur côte dans le navigateur. Ensuite, je visite le site Web de Google Phones. Comme nous allons utiliser les téléphones Google tout au long du projet, allons-y et recherchons un téléphone appelé punto Je vais sélectionner plusieurs styles différents, puis copier le lien et le coller dans l'élément Masquer. En plus de cela, je vais récupérer le super lien CDN du téléphone Nous allons utiliser des icônes géniales pour les téléphones tout au long du projet. Copions le lien à partir d'ici. Ouvrez ensuite le lien, tirez sur l'élément de tête et collez ici le CDM OK, nous sommes donc prêts à commencer à écrire le balisage HTML. Je vais créer le conteneur qui emballera tout le contenu. Ensuite, nous aurons une carte dans laquelle je vais insérer Deep tug, qui se trouvera en haut de cet élément Pour insérer Cardmage, nous avons besoin de cette image. Allons-y et sélectionnons l'image dans le dossier des images. Ensuite, je vais insérer ici give verified, dans lequel je vais insérer le phonosomicon, nous avons besoin d'une vérification FA solide Ensuite, je vais créer le fond avec la carte de classe BTN. Spécifiez le type de l'élément qu'il va placer en bas. Ensuite, je vais vous insérer des éléments panoramiques dans la classe. Ensuite, nous avons besoin d'un autre élément de panneau avec le nom de classe BTN text. Je vais insérer «   contactez-moi » Ensuite, je vais créer le bas de la carte. Nous avons besoin d'éléments de titre H one portant le nom de John Smith. Ensuite, nous avons besoin de trois éléments de titre pour la position. Ce sera un concepteur de produits. Ensuite, je vais créer le développement, qui sera un réseau social. J'insère ici un autre Deps, be social Info. Instituons des éléments avec les noms des classes, les marques FA liées. Ensuite, nous avons besoin d'éléments span avec le nom de la classe. Instituons un certain nombre, puis nous avons besoin d'un autre élément span avec les abonnés de la classe. Instituons des abonnés textuels. OK. Je vais dupliquer ce code deux fois. Changeons les phonéicônes. Le second sera FA Instagram. Je vais changer ces chiffres. Le troisième sera FA Facebook. Changeons le numéro. OK, donc tout est prêt. Allons-y et commençons à écrire du CSS. Je vais définir la marge et mettre chaque élément à zéro, puis je vais définir la taille de la boîte sur la zone de bordure Ensuite, nous avons besoin de la famille téléphonique. Ce sera Ubuntu San Serif. Je vais régler la taille du téléphone de l'élément HTML à 62,5 % afin d'utiliser le RAM comme unité de mesure Dans ce cas, un RAM sera égal à dix pixels. Ensuite, je vais sélectionner l'image du haut de la carte dont la largeur est définie sur 12 RAM. Ensuite, la hauteur sera également de 12 RAM. Ensuite, je vais sélectionner l'image elle-même. Réglons la largeur à 100 % Ensuite, la hauteur sera également de 100 %. Nous avons également besoin ici de pieds d'objets avec la valeur color. Maintenant, l'image est devenue plus petite et nous pouvons maintenant nous occuper du conteneur. Réglons la largeur à 100 % , puis la hauteur sera de 100 % de la hauteur du pot. Ensuite, je vais changer la couleur de fond. Utilisons ici la couleur 13124. Ensuite, je vais sélectionner la carte. Réglons sur 35 RAM. Ensuite, la hauteur sera de 60 Ram. Ensuite, nous avons besoin de la couleur de fond, ce sera 32365 Ensuite, je vais définir la position sur absolue. Et nous avons besoin de la position relative pour l'élément parent, qui dans ce cas est un conteneur. Je vais définir la position supérieure à 15 %, la position gauche sera de 50 % et nous devons transformer translate x avec -50 % afin de centrer l'élément horizontalement Comme vous pouvez le voir, la carte est centrée. Ensuite, je vais définir le rayon de bordure sur un RAM. Je vais également créer une ombre. Insérons 03 Ram, six Ram. Et la couleur sera le noir avec une opacité de 0,5. Nous avons ici un bel effet d'ombre OK, après cela, je vais sélectionner le haut de la carte. Réglons la hauteur à 25 RAM. Ensuite, je vais définir la position absolue de l' image. Nous avons besoin de la position relative de l'élément parent. Réglons la position supérieure à cinq cadres. Ensuite, la position de gauche sera de 50 %. Encore une fois, nous devons centrer l'élément en utilisant transform translate x -50 %, l'image est centrée horizontalement Ensuite, je vais arrondir l'image. En utilisant un rayon de bordure de 50 % , l'image a été arrondie. Nous avons également besoin de Box Shadow. Ce sera 01 Ram, trois Ram, et la couleur sera RGBA En fait, nous avons ici un petit problème, nous ne voyons pas le téléphone ici, donc l'icône Je suis sur le chèque. Regardons le code HT dont nous avons besoin ici. Ces éléments. Maintenant, le problème est réglé. Revenons au fichier CSS. Sélectionnez le développement avec la classe vérifiée. Je vais régler le passage à 2,5 RAM. Ensuite, si la hauteur doit également être de 2,5 images, je vais changer l'arrière-plan. Ce sera un gradient linéaire. Définissons que la direction sera deux, n'est-ce pas ? Et la première couleur sera un 35c6, puis la deuxième couleur sera trois Cinq BP. Comme vous pouvez le constater, nous avons ici un beau contexte. Réglons le rayon de la bordure à 50 % Nous avons besoin d'un élément arrondi. Nous avons également besoin de drapeaux d'affichage. Et pour centrer l'élément, nous devons justifier le centre de contenu et le centre des éléments de ligne. Comme vous pouvez le voir, l'icône Ponso est centrée à l'intérieur du cercle Ensuite, je vais régler la position sur absolue. Ensuite, nous avons besoin que la position inférieure soit un Ram. Pour ce qui est de la bonne position, je vais la mettre à zéro. Bien, après ça, je vais enlever l'icône. Augmentons la taille du téléphone. Ce sera 1,5 RAM. Et changez de couleur. Je vais le rendre blanc. Maintenant, l'icône est plutôt jolie. Ensuite, sélectionnons la carte BTN et fixons la largeur à 17 RAM Ensuite, la hauteur sera de 4,5 RAM. Ensuite, je vais changer le fond d'écran. Utilisez à nouveau le dégradé linéaire. La direction va être à droite. La première couleur sera 82 62d2. Ensuite, la deuxième couleur sera DC 561. Nous avons ici un beau dégradé. Réglons la position sur absolue. Ensuite, nous devons nous positionner à 22,5 par rapport au laboratoire. La position sera de 50 %. Ensuite, nous devons centrer l'élément en utilisant transform translate x -50 %, Batson est Ensuite, nous devons centrer l'élément en utilisant transform translate x -50 %, Batson Ensuite, je vais me débarrasser de la bordure par défaut. Ensuite, je vais l' arrondir en utilisant le rayon de bordure 3 Ram. Ensuite, je vais configurer Box Shadow 201m3 Ram. Et la couleur sera GPA avec une opacité de 0,3. Ensuite, je vais placer le curseur à deux points Bien, après cela, je vais sélectionner plus, réglons la position sur absolue. Ensuite, les deux positions seront de 50 %. Nous avons besoin de la position 1,5 Ram. Ensuite, je vais centrer l' élément verticalement en utilisant transform translate Y -50%. De plus, je vais faire pivoter l'élément dans la direction z avec la valeur -45 degrés Réglons la taille de police à trois RAM. La couleur sera le blanc. Nous avons ici x. Ensuite, je vais sélectionner le texte BTN. Réglons la taille du téléphone à 1,6 RAM et la couleur sera blanche. J'ai mis le téléphone en gras. Ensuite, créons un espace entre les lettres. De plus, je vais définir la position en absolu. La première position sera de 50 %, puis la bonne position sera de trois Ram. Encore une fois, nous devons censurer l'élément, en particulier en utilisant transform translate Y -50% OK, le bas est plutôt joli Ensuite, je vais m' occuper du bas. Réglons la hauteur à 35 RAM. Ensuite, nous avons besoin d'une boîte flexible. Je vais définir la direction de flexion sur la colonne. Ensuite, je vais aligner les éléments au centre. En ce qui concerne la propriété de contenu justifiée, je vais la définir de manière à ce qu'elle soit espacée de manière uniforme. Comme vous pouvez le constater, les éléments sont alignés verticalement. Réglons le rembourrage sur les cinq premiers Ram. Ensuite, je vais m'occuper de l'élément de titre H one, qui est le nom qui définit la taille de police à trois. Ensuite, le poids du téléphone sera de 300. De plus, je vais changer la couleur, la rendre blanche. Ensuite, je vais dupliquer ce code et changer le sélecteur dont nous avons besoin ici, H, trois éléments de titre, la taille du téléphone sera de 1,2 RAM Ensuite, je vais changer de couleur. Ce sera le D111. Ensuite, nous avons besoin d'un espacement entre les lettres de 0,1 RAM. De plus, je vais déplacer l' élément vers le haut en utilisant la marge, le haut moins quatre RAM. Bien, après ça, je vais m' occuper des réseaux sociaux. Réglons la largeur à 100 % Nous avons besoin d'une boîte flexible pour l'aligner. Éléments horizontalement. Utilisons de manière uniforme l'espace de contenu de justification. Ensuite, je vais sélectionner à nouveau les informations sociales dont nous avons besoin, Flex Box. Ensuite, nous devons changer la direction dont nous avons besoin pour aligner les éléments verticalement. Mettons les éléments de ligne au centre, les éléments sont alignés et nous devons maintenant sélectionner les éléments. Mettons-nous au point avec six RAM. Ensuite, la hauteur sera également de six béliers. Je vais changer la couleur de fond. Utilisons CCC. Ensuite, je vais utiliser Flexbox pour centrer les icônes, les icônes sont centrées Ensuite, je vais régler le rayon de bordure à 50 %. Nous avons également besoin de pok shadow avec les valeurs 01 Ram, trois Ram, et la couleur sera RGBA Réglons la taille de police à 1,8 RAM. Ensuite, changez de couleur , ce sera le blanc. Débarrassons-nous de la couleur d'arrière-plan temporaire. Ensuite, je vais sélectionner les premières informations sociales à l' aide du sélecteur d'identifiant Changeons la couleur de fond. Je vais utiliser un dégradé linéaire. La direction va être deux, non ? Pour ce qui est de la première couleur, je vais utiliser 0077b Ensuite, nous aurons 5107. Dupliquons ce code deux fois, changeons les sélecteurs du graphique La couleur de la deuxième icône sera 833ab, quatre. Quant à la deuxième couleur, elle sera C13 584. Il faut aussi qu'ici, la troisième couleur soit 13, elle six. Très bien, occupons-nous du troisième élément dont nous avons besoin ici, le 42672 Ensuite, la deuxième couleur sera 5581. Très bien, donc les trois icônes sont plutôt jolies. Ensuite, nous devons prendre soin de l'engourdissement. Réglons la taille du téléphone. Ce sera 1,8 RAM. Ensuite, nous avons besoin d'une épaisseur de police, elle sera en gras. Et je vais aussi changer de couleur. Faisons-en un EEE. Ensuite, nous avons besoin d'une marge. 1,5 RAM, 0,1,5 RAM et zéro. Encore une fois, les chiffres sont plutôt jolis. Ensuite, nous devons prendre soin des suiveurs. Réglons la couleur deux AA. Hein ? En fait, la carte est stylée Nous devons maintenant utiliser Javascript. Créons un bouton variable. Je vais le sélectionner en utilisant la méthode du sélecteur de requête. Nous devons indiquer ici le nom de la classe. Ce sera la carte BTN. Ensuite, nous avons besoin d'une autre variable. Ce sera la carte qui sera sélectionnée. Je vais maintenant ajouter un écouteur d'événements au bouton en cliquant sur un événement Nous devons également transmettre ici la fonction de rappel. Je vais ajouter une nouvelle classe à la carte en utilisant la méthode togal Le nom de la classe va être modifié et nous devons utiliser cette classe en CSS pour créer nouveaux styles que nous devons utiliser au clic. Allons-y et changeons la hauteur de la carte. Ça va faire 25 images. Ensuite, nous devons décoder les en-têtes en utilisant l'opacité zéro et la visibilité masquée Nous avons besoin de la même chose pour les informations. Je vais aussi envoyer un texto à Hyde PTN. En fait, changeons la largeur du motif, faisons-en cinq. Ensuite, je vais changer la position gauche qui sera de 50 % Débarrassez-vous de la fonction de rotation pendant un moment. Ensuite, nous devons traduire deux fois avec -50 %. C'est bon, alors c'est tout. Nous avons maintenant besoin d'un changement suivi de la carte. Réglons la hauteur, 260 RAM. Je vais utiliser votre hauteur de transition et la durée sera de 0,5 seconde. Si je clique, la hauteur de la carte sera augmentée. Très bien, ensuite je vais appuyer sur le bouton. Utilisons à nouveau le changement rapide suivi de la voiture, BTN, je vais augmenter la largeur, il y aura 17 RAM Utilisons ici la transition. Si je clique sur le bouton, sa taille augmentera. Ensuite, je vais sélectionner le changement avec « Plus », nous avons besoin la position gauche 1,5 Ram. De plus, je vais faire pivoter l'élément dont nous avons besoin en traduisant d'abord Y -50%, puis en faisant pivoter la fonction Z avec une valeur de -45 degrés Utilisez ensuite la transition pour un effet plus fluide. Si je clique, le signe plus pivote et le motif s'agrandit. En fait, il faut le cacher ici, pas le H. Je vais afficher le texte BTN en retour Nous devons donc ici changer le texte BTN. Et nous devons régler l'opacité à un et la visibilité à visible. Je vais également utiliser la transition. Nous devons respecter un peu de retard, durée 0,5 seconde. Si je clique, tout fonctionnera parfaitement. Ensuite, je vais m' occuper des titres. Sélectionnons le changement suivi de l'élément de titre H un. Je vais les montrer en retour. Réglons l'opacité à un et la visibilité à visible. Nous avons également besoin d'une transition. Le délai sera de 0,5 seconde. Si je clique, le premier titre apparaîtra bien. Faisons de même pour les éléments du deuxième titre. Changeons ici le sélecteur, le temps de retard sera de 0,6 seconde. Comme vous pouvez le constater, les titres sont bien affichés. Faisons de même pour les réseaux sociaux. Je vais sélectionner Modifier, puis le sélecteur d'informations sociales pour enfants Tout d'abord, définissons l'opacité à un et la visibilité à visible. Nous avons besoin ici d'une transition. Les trois articles auront des délais différents et cela créera un bel effet. Il nous faut 0,8 seconde. Dupliquons ce code deux fois, changeons les sélecteurs du nième enfant et modifions également le temps de retard Nous avons besoin de 0,9 seconde et 1 seconde. En fait, nous devons changer le numéro ici. Maintenant, si je clique, tout fonctionnera parfaitement. Et nous avons ici une jolie et cool carte de profil. Très bien, alors j'espère que c'était intéressant, vous avez apprécié ce projet. Passons à autre chose. 24. Project 19 - Formulaire d'inscription: Très bien, il est donc temps de passer à autre chose et de créer notre prochain projet. Dans cette section, nous allons créer un formulaire de signature moderne et cool Le projet sera créé sur la base du HTML, du CSS et du Javascript. Comme vous pouvez le constater, le projet a un design moderne et plutôt impressionnant. Par défaut, nous avons ici un formulaire de signature. Le formulaire lui-même a un joli fond avec différentes formes. Sur le côté gauche, vous pouvez voir la plante. Ensuite, nous avons ici un titre suivi des champs de saisie. De plus, j'ai ici une coche personnalisée. Vous trouverez ci-dessous des liens vers les réseaux sociaux. Si je clique sur le lien de signature, nous obtiendrons ici le formulaire de signature avec seulement deux champs de saisie. Si je clique sur le formulaire d'inscription, nous reviendrons au formulaire d'inscription. Très bien, alors asseyons-nous sur le projet, commençons. J'ai créé un nouveau dossier sur le bureau dans lequel j'ai un dossier pour les images. Ouvrons le projet en code BS, puis je vais créer nos fichiers de travail. Le premier sera l'index du code HTML. Ensuite, nous aurons un fichier pour CSS. Et nous avons également besoin d'un troisième fichier pour le script Javascript JS, fichier d'index HTM ouvert et de la création de la structure HTM de base. Je vais changer le titre. Ce sera un formulaire de connexion, d'inscription. Ensuite, je vais lier le fichier CSS. Nous devons également lier le fichier Gil Sky. Ouvrons le script Tac. Spécifiez le nom du fichier dans l'attribut source. OK, allons-y et ouvrons le projet dans le navigateur à l' aide du serveur live. Et je vais aussi placer le navigateur et l'éditeur côte à côte, comme ça. Allons-y et commençons à créer le H DM lors du balisage. Je vais ouvrir la balise div qui sera le conteneur, elle inclura l' ensemble du contenu. Ensuite, nous avons besoin d'un autre plongeon qui servira de toile de fond. Ensuite, nous avons besoin d'un wrapper de formulaire dans lequel je vais insérer une image Nous allons sélectionner Image dans le dossier des images. Ce sera une plante. Débarrassons-nous de l'attribut Alt. Ensuite, nous devons créer H un élément de titre. Ajoutez ici le titre du formulaire de classe. Je vais insérer ici le texte suivant. Remplissez le formulaire et devenez membre de l'équipe. Ensuite, nous avons besoin d'éléments de formulaire avec le formulaire de contact de classe. Débarrassons-nous de l'attribut action, puis insérons ici un élément profond, qui sera constitué de liens totaux Je vais insérer ici un élément avec le lien de bascule de classe Et nous avons également besoin d' une autre inscription à une classe. Insérons du texte, inscrivez-vous. En fait, nous devons nous inscrire et non pas nous connecter. Dupliquons le code, connectons-nous et changeons également le nom de la classe. Nous devons nous connecter ici. Très bien, après cela, je vais créer des développements qui seront des intrants. Ouvrons la balise de saisie avec un texte de type et également avec le champ de saisie du nom de classe. Nous avons également besoin d'une autre hauteur de classe. Ajoutons ici un attribut d'espace réservé avec le prénom du texte Dupliquons l' entrée T trois fois. Nom de famille. Le prochain sera le courrier électronique. Nous devons changer le type et aussi l'espace réservé, ce sera l'adresse e-mail Nous avons besoin de l'écran. Le prochain sera le passeport. Nous avons besoin de l'écran. Et modifiez également l'attribut placeholder. Ce sera un passeport. Bien, après cela, je vais créer une case à cocher. Ajoutons ici la classe Hyde. Je vais insérer votre saisie en cochant la case Type. Nous avons également besoin de sa carte d'identité. Ça va être vérifié. Ensuite, après l'élément de saisie, je vais étiqueter pour vérifier que le texte est d'accord. Ensuite, nous avons besoin d' un élément span avec le texte. Conditions d'utilisation. C'est bon. Ensuite, je vais créer le bouton. Bouton « Je soumets » où la classe soumet. Le type sera un bouton comme le texte. Je vais m'inscrire. Ensuite, nous avons besoin des réseaux sociaux. J'en suis à certains éléments de la classe. Une marque, FA, Facebook. Dupliquons-le trois fois et changeons les noms des classes. Le second sera Instagram. Ensuite, nous aurons Twitter. C'est parce que la dernière icône va être liée. En fait, tous les éléments sont créés et maintenant je vais récupérer les liens du formulaire CDN, copier le lien d'ici Ensuite, je vais ouvrir la balise link dans l'élément head et insérer le CDN dans l'attribut de référence H. Comme vous pouvez le voir maintenant, les icônes sont affichées. Ensuite, je vais visiter le site Web de Google Phones. Parce que nous allons utiliser différents téléphones Google tout au long de ce projet. Visitons le site Web et cherchons, n'est-ce pas ? Ce sera le premier. Je vais sélectionner quelques styles différents. Ensuite, je vais chercher un autre téléphone sur lequel il va être affiché, p. Sélectionnez le style, puis je vais récupérer le lien et le coller dans l'élément principal OK, allons-y et commençons à écrire le CSS. Je vais sélectionner chaque élément à l'aide d'un astérisque, définir une marge et les mettre tous les deux à zéro Ensuite, nous devons définir la taille de la boîte pour qu'elle soit intégrée à la boîte, et définir le contour sur aucun Ensuite, nous devons nous débarrasser de la décoration de texte par défaut et également modifier la famille du téléphone. Ça va être cansif. En outre, je vais régler la taille du téléphone pour l'élément H ml à 62,5 %. Dans ce cas, un m sera égal à dix pixels, et nous utiliserons M comme unité de mesure Les styles par défaut sont appliqués, faut maintenant prendre soin de l'image car elle est trop grande. heure actuelle, sélectionnons le formulaire, wrapper, l'image et définissons l'affichage sur aucun C'est bon, l'image est cachée. Nous pouvons maintenant nous occuper du conteneur. Réglons la largeur à 100 %, puis la hauteur sera la hauteur du pot à 100 vues. Je vais changer la couleur de fond. Ce sera 9c287. Nous avons ici le contexte. Ensuite, je vais sélectionner PG. Définissons la largeur, elle sera de 100 % puis la hauteur sera d'une poursuite de 50 %, couleur de fond, ce sera EEE Nous avons ici l'élément. Je vais régler le rayon de bordure à 50 % puis à 00,50 %. Maintenant, je vais m' occuper de la position Déplaçons-le en utilisant translate 20 %. Ensuite, il faut que -50 % de l'élément soit également déplacé Nous avons besoin ici de la fonction de rotation dans la direction z, et la valeur sera de 15 degrés. Je pense que c'est ça. Nous devons masquer des parties en dehors de la page en utilisant Overflow hidden Nous avons maintenant ici ce fond cool et impressionnant. Allons-y et occupons-nous de l'emballage du formulaire. Je vais régler la position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui dans ce cas est un conteneur. Ensuite, je vais définir position 50 %, puis la position gauche sera 50 %. Je vais centrer l'élément en utilisant transform translate avec les utilisant transform translate avec valeurs -50 % et encore une fois -50 %. Comme vous pouvez le voir, l'emballage du formulaire est centré sur Réglons la largeur à 70 %, puis la hauteur à 80 %. Changeons la couleur de fond. Je vais utiliser ici la couleur 25 à 5 à 7. Nous avons ici le fond de l'emballage en mousse. Arrondissons l'élément en utilisant le rayon de bordure 2 Ram. Nous avons également besoin de box shadow, des valeurs suivantes. 03 RAM, huit RAM. La couleur sera RGBA, couleur noire avec une opacité de 0,6 Nous avons ici un effet d'ombre agréable et cool Ensuite, je vais m' occuper de l'image. Réglons sur 140 RAM. Mais il faut que la position soit absolue. La position de gauche sera de -50 % Quant à la position supérieure, je vais la régler sur -20 %. Nous avons ici l'image Réglons l'opacité sur 0,5. Ensuite, nous avons besoin de masquer le débordement pour masquer les parties de l'image Maintenant, ça a l'air plutôt cool. Allons-y et occupons-nous de l'en-tête du formulaire. Je vais alors régler la position sur absolue. La position sera dirigée à 19 %. La position sera égale à 35 % de la famille téléphonique, elle sera inclinable, Priest cursive. La famille de téléphones est modifiée. Nous devons maintenant l' agrandir en utilisant la taille du téléphone. Réglons-le sur cinq images. Le poids sera de 300. Nous devons changer de couleur. Je vais passer au blanc. Le titre semble bien meilleur. Réglons sa largeur à 35 RAM. Ensuite, je vais utiliser un effet d'ombre. Nous avons besoin de 01 RAM, deux RAM, et la couleur sera RGP, une couleur noire avec une opacité 0,5. Voici le titre, qui est plutôt joli Sélectionnons le formulaire de contact, définissons la largeur à 35 %, puis la hauteur sera 100 %. Je vais définir la position sur absolue, puis les deux positions seront nulles. La bonne position sera également zéro. Ensuite, je vais changer la couleur de fond. Mettons le rouge pendant un moment. Voici donc le formulaire de contact. Débarrassons-nous de cette couleur. À partir d'ici. Je vais utiliser des livres flexibles pour aligner les éléments. Réglons la direction de flexion sur la colonne. Ensuite, nous devons justifier le contenu avec un espace de valeurs entre les deux. Ensuite, je vais utiliser pudding d'une valeur de sept RAM puis de dix ram Ensuite, nous avons besoin de sept RAM, et encore une fois de sept RAM. Nous avons maintenant l'espace à l'intérieur de l'élément. Ensuite, je vais m' occuper des liens. Mettons le texte sur une ligne deux. C'est vrai, nous avons ici les liens sur le côté droit de l'élément. Ensuite, je vais sélectionner Total Link. Nous avons également besoin d'une envergure totale. Réglons la taille de police 21,6 RAM. Ensuite, le poids de police sera de 300. Je vais mettre la transformation du texte en majuscules. Ensuite, nous avons besoin d'un espacement entre les lettres, 0,1 RAM. Changez la couleur, je vais l'utiliser ici. Couleur 9287. Voici les liens. En fait, je pense que nous sommes absents. Cet élément span, je parle de la barre oblique ici. Ensuite, je vais ajouter ici un pointeur. Nous avons maintenant également un pointeur de cap pour l'élément span. Ensuite, je vais sélectionner le spin et régler la marche à zéro et 0,5 RAM Nous avons besoin d'un espace entre les liens. Ensuite, inscrivons-nous, je vais définir la couleur 289663 Ce sera en fait le lien actif. Ensuite, je vais sélectionner les entrées. Réglons la marge maximale à moins deux RAM. Ensuite, nous avons besoin de livres flexibles. Je vais définir la direction de la colonne Ensuite, je vais sélectionner l'entrée. Définissons la largeur. Ce sera 100 %, alors la hauteur sera de cinq béliers. Ensuite, nous devons marcher, il y aura un Ram et zéro Ensuite, je vais régler la mise sur un Ram. Ensuite, nous avons besoin de la couleur de fond. Ce sera 343539. Les entrées sont bien meilleures. Ensuite, je vais définir la bordure 2.1 Ram solid. Et la couleur sera RVB 25053 fois la couleur blanche avec une opacité 0,1. Voici la jolie bordure Réglez ensuite le rayon de bordure à 0,5 RAM. Nous avons également besoin ici de la taille de la police, elle sera de 1,6 RAM. Changez ensuite de couleur. Je vais le faire EEE, la couleur a changé Je vais maintenant sélectionner la case à cocher. Réglons l'affichage pour qu'il soit flexible. Nous avons besoin d'un centre d'articles, puis je vais définir une marge en haut à deux RAM. Ensuite, je vais sélectionner la case à cocher, suivie de l'élément d'entrée. Réglons l'apparence sur Aucune. Ensuite, nous aurons besoin de deux RAM. La hauteur sera également de deux béliers. Ensuite, je vais changer la couleur de fond. Il va y en avoir 333. Voici la boîte. Ajoutons ici une marge sur le côté droit et fixons-la à un RAM. Ensuite, nous avons besoin d'un rayon de bordure. Je vais le régler sur 2,2 RAM. Ensuite, je vais sélectionner les éléments d'entrée ainsi que l'étiquette. Passons au pointeur pour les deux éléments. Je vais maintenant sélectionner l' étiquette et la personnaliser. Je vais maintenant sélectionner l'entrée avec AcdoClass cochée. Réglons la couleur d'arrière-plan 258235. Une fois que j'ai vérifié, la couleur de fond de la boîte changera. Nous avons besoin ici d'une transition afin de rendre l' effet plus fluide. Si je clique, la couleur d'arrière-plan changera en douceur. Ensuite, je vais sélectionner Entrée avec un élément. Faisons en sorte que le contenu soit vide. Ensuite, il faut que la position soit absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui est l'entrée. Réglons la position à -15 % Ensuite, la position gauche sera de 20 % Je vais régler la largeur à 50 % puis la hauteur à 75 %. Ensuite, nous avons besoin d'une bordure, non ? Et il sera solide de 0,2 RAM. Et la couleur sera le blanc. Dupliquons le code dont nous avons besoin ici. Bordure en bas. Comme vous pouvez le voir, nous avons ici une coche. Nous devons maintenant faire pivoter l'élément en utilisant transform rotate Z, la valeur sera de 45 degrés. Nous avons ici une jolie coche. Ensuite, nous avons besoin de zéro opacité et de visibilité masquée. Ensuite, je vais sélectionner un élément d'entrée avec un colas coché et suivi de l'élément after do Une fois la saisie vérifiée , nous devons réafficher la coche. Nous avons besoin d'une opacité unique et d'une visibilité visible. Ajoutez ensuite ici la transition. Si je clique, nous arriverons à cette jolie et cool apparence de coche. Très bien, allons-y sélectionnons l'étiquette et personnalisons-la. Je vais régler la taille du téléphone à 1,2 RAM. L'appelant sera DDD. Ensuite, je vais sélectionner les éléments d'envergure, qui sont placés à l'intérieur de l'étiquette. Changeons l'appel. 58235, d'accord. Maintenant, tout semble plutôt beau et maintenant nous pouvons passer à autre chose et nous occuper du bas. Réglons la largeur à 100% , puis la hauteur sera de cinq RAM. Ensuite, je vais changer la couleur de fond. Utilisons ici la couleur D48 142. Ensuite, je vais me débarrasser de la bordure par défaut, puis changer la taille du téléphone, ce sera 1,6 RAM. Changez le poids du téléphone, je vais le régler à 300. Nous avons également besoin d'un espacement entre les lettres de 0,1 m, puis nous avons besoin d'une transformation du texte. Ce sera en majuscules car je vais régler la couleur sur le blanc. Comme vous pouvez le constater, le bas est plutôt joli. Ensuite, positionnons le curseur sur le pointeur. De plus, je vais ajouter ici le rayon de bordure, qui sera de 0,3 RAM. Ensuite, nous avons besoin ici de l'ombre de la boîte avec les valeurs 0,1 m1m et la couleur sera RGBA, la couleur noire avec une opacité de 0,1 OK, enfin je vais ajouter ici Il y aura moins quatre RAM. Le bouton est plutôt joli. Je vais créer un effet de clic en utilisant la pseudoclasse active dont nous avons besoin ici Transform translate y avec la valeur 0,2. Si je clique sur le bouton, nous obtiendrons cet effet de clic sympa et cool Bien, passons à autre chose et occupons-nous des icônes des réseaux sociaux. Je vais sélectionner Wrapper. Réglons avec 100 % Ensuite, nous devons mettre, il y aura trois RAM et 40 %. Ensuite, nous avons besoin de 0,0. Ensuite, je vais régler l'affichage sur flex. Nous devons justifier l'espace entre les contenus. De plus, je vais définir une bordure en haut, 2.1 Ram solid. Et la couleur sera RGBA, couleur blanche avec une opacité plus faible, 0,2 OK, ensuite je vais m' occuper des icônes Passons à trois RAM. Ensuite, la hauteur sera de trois béliers. Ensuite, je vais changer la couleur de fond. Utilisons votre couleur, 939695. Ensuite, je vais régler le rayon du porteur à 50 % car nous avons besoin de cercles. Ensuite, nous devons censurer les icônes à l'aide de livres flexibles. Utilisons le contenu de justification et les éléments d'une ligne. Ensuite, j'ai réglé la taille du téléphone à 1,6 RAM. Je vais donc changer de couleur. Cela va faire 333c et créer également un pointeur de curseur. Très bien, tout est plutôt beau. Maintenant, je vais utiliser du Javascript. Créons une nouvelle variable et appelons-la sign in. Je vais sélectionner un élément en utilisant la méthode du sélecteur de requête. Insérez votre identifiant de classe. Ensuite, nous avons besoin de plusieurs variables différentes. Le second va être l'inscription. Ensuite, nous aurons votre conteneur. La dernière variable va être soumise , je veux dire le bouton. Allons-y et ajoutons événement à l'élément de connexion par un clic Nous avons également besoin ici d'une fonction de rappel qui sera exécutée une fois que nous aurons cliqué sur le lien de connexion Je vais ajouter au conteneur une nouvelle méthode avec ajout et cela va être modifié. Dupliquons le code dont nous avons besoin ici, signons une fois. Ensuite, nous devons supprimer les modifications de l'élément. Je vais maintenant utiliser le changement de classe dans le fichier CSS afin de créer de nouveaux styles, qui seront appliqués une fois que nous aurons cliqué sur le lien. Nous avons besoin ici d'un changement suivi du formulaire de signature. Je vais changer de couleur. Ensuite, je vais sélectionner avec inscription et changer la couleur. Nous devons définir le lien actif ici en utilisant ces différentes couleurs. Une fois que j'ai cliqué, la couleur changera. Ensuite, je vais sélectionner Modifier, puis régler l'affichage en hauteur sur aucun. Une fois que j'ai cliqué, deux champs de saisie et la case à cocher se masquent. Ensuite, je vais sélectionner Afficher et définir la transformation avec la fonction de traduction. Nous devons déplacer les éléments de moins six RAM vers le haut. Maintenant, comme vous pouvez le constater, nous avons de bien meilleurs résultats. Nous devons prendre soin du fond. Nous devons le déplacer vers le haut. Et nous devons également modifier le texte. Sélectionnons Modifier. Avec la classe Submit, nous devons déplacer les éléments en utilisant transform translate, Y -14 Ram Maintenant, le bouton se déplace vers le haut et ça a l'air plutôt sympa. OK, maintenant nous avons besoin la même chose avec changement de classe car nous devons créer un effet de clic, nous avons besoin ici de -13,8 RAM Si je clique, le bouton aura un effet de clic. OK, la dernière chose à faire est de changer le texte. Une fois que nous aurons cliqué sur le lien, je modifierai le contenu du texte du bouton Soumettre et je me connecterai. Nous avons besoin de la même chose ci-dessous. Dans ce cas, nous devons changer de connexion pour nous inscrire. OK, maintenant tout se passe parfaitement avec le projet, c'est terminé. Passons à autre chose. 25. Project 20 - Barre de progression animée: Bonjour et bienvenue dans notre prochain projet. Dans cette section, nous allons créer une barre de progression animée. Le projet sera créé sur la base du HTML, du CSS et du Javascript. En fait, ça va être drôle. Premièrement, allons-y et décrivons-le rapidement. Comme vous pouvez le voir, nous avons ici un titre qui se charge suivi de la barre de progression, qui est actuellement vide. Et puis en bas, nous avons deux boutons différents, télécharger et réinitialiser. Si je clique sur Télécharger, la barre de progression commencera à se remplir. Le titre sera également animé. Si je clique sur Réinitialiser, la barre de progression cessera de fonctionner. Très bien, donc je pense que le projet sera intéressant et amusant. Alors allons-y et commençons. J'ai créé un nouveau dossier sur le bureau, qui est actuellement vide. Allons-y et ouvrons-le dans le code VS, puis créons sur des fichiers de travail, nous avons besoin d'un index HTML. Ensuite, le deuxième fichier sera de style CSS. Nous avons également besoin d'un fichier pour le script Java ou S. Ouvrons le fichier HTML d'index et créons le document HTML de base. Je vais changer le titre. Ce sera la barre de progression. Ensuite, je vais lier le fichier CSS. Nous avons également besoin d'une balise de script pour lier le fichier de script chav Insérons le nom du fichier dans l'attribut source. OK, allons-y et ouvrons le projet dans le navigateur à l' aide du serveur live. Ensuite, placez l'éditeur côte à côte dans le navigateur. Comme tout au long du projet, je vais utiliser les téléphones Google. Alors allons-y et visitons le site Web. Je vais rechercher des téléphones appelés Rubic Bubbles. Nous allons sélectionner le style, copier le lien et le coller dans l'élément principal. Je vais maintenant commencer à écrire le balisage HTM. Nous avons besoin d'un contenant, il emballera tout le contenu. Ouvrons la balise, qui servira d'enveloppe de barre de progression à l'intérieur de cet élément Je vais ouvrir le chargement de trois balises d' en-tête. Ensuite, nous aurons une barre de progression dans laquelle je vais insérer une barre. Ensuite, je vais créer des patons. Nous avons besoin de modèles d'emballage, puis du bouton lui-même dont nous avons besoin ici, des classes PTN, Dupliquez-le et modifiez le nom de la classe. Réinitialiser. Insérons ici le contenu. Le premier va être téléchargé. Quant au second, il va être réinitialisé. Voilà, à propos du balisage HD. Nous devons maintenant commencer à écrire le CSS. Sélectionnez chaque élément comme d'habitude, créez des styles par défaut. Nous avons besoin d'une marge et d'un rembourrage, tous deux nuls Ensuite, je vais définir la taille de la boîte sur la zone de bordure. Nous avons besoin d'une famille de téléphones, ce seront des bulles rubiques, le téléphone que nous avons sélectionné Les styles par défaut sont appliqués. Ensuite, je vais définir la taille de police de l'élément HTML à 62,5 %. Pour utiliser un m comme unité de mesure 1, m sera égal à Ensuite, je vais retirer le contenant. Réglons la largeur, elle sera de 100 %. Ensuite, nous avons besoin de hauteur, ce sera 100 % de hauteur de fenêtre Modifiez également la couleur de fond. Il y en aura 734. Ensuite, je vais utiliser des livres flexibles. Afin d'aligner le contenu au centre, nous devons justifier le centre de contenu et aligner le centre des éléments. Comme vous pouvez le constater, le contenu est bien placé au centre. Ensuite, allons-y et sélectionnons le wrapper Progress Bar. Je vais définir la largeur, elle sera de 70 RAM. Ensuite, nous avons besoin de livres en lin. Je vais changer de direction. Ce sera une chronique. Nous devons aligner les éléments verticalement. Utilisons ensuite le centre de contenu de justification. Ensuite, je vais sélectionner les éléments de titre. Réglons la taille de police à cinq hm. La couleur sera 1182. Je vais également créer un espace entre les lettres. Comme vous pouvez le constater, le titre est plutôt joli. Ajoutons ici la transformation du texte en majuscules. Ensuite, nous avons besoin d'une ombre de texte. Ce sera 0,5 Hm, trois RAM. Et la couleur sera le noir avec une opacité de 0,3. Maintenant, le titre est bien meilleur Ajoutons ici la marge en bas, il y aura trois RAM. OK, c'est ça. À propos du titre. Allons-y et occupons-nous de la barre de progression. Additionnons 100 %, alors la hauteur sera de 3,5 RAM. Nous avons besoin d'une bordure, elle sera de 0,2 RAM. La couleur unie sera 66, la couleur verte. Ensuite, nous avons besoin d'un rayon de bordure pour arrondir l'élément. Disons 23 RAM. De plus, nous devons mettre 0,3 RAM. Ensuite, je m' occuperai du bar. Réglons sur 100 % , puis la hauteur sera de 100 %. Je vais changer l'arrière-plan. Utilisons le dégradé linéaire. La direction va être deux, non ? Pour ce qui est de la première couleur, je vais utiliser le Fd166 Ensuite, la couleur suivante sera f476. Comme vous pouvez le voir, nous avons ici le bar. Nous devons le rendre arrondi. Utilisons un rayon de bordure de trois m. Maintenant, c'est plutôt joli. Nous avons besoin d'espace en bas. Utilisons la marge. Quatre derniers Ram. Ensuite, je vais sélectionner les boutons. Réglons avec 100 %. Nous devons également utiliser la boîte flexible, utiliser la justification du contenu, l'espace entre les boutons aligné et nous devons maintenant les personnaliser. Sélectionnons BTN. Je vais régler la largeur à 35 % puis la hauteur à 5,5. Je vais définir la bordure pour que la taille du téléphone ne soit pas réglée sur 1,8 RAM. Ensuite, nous avons besoin de couleur. Il sera blanc car je vais créer un espace entre les lettres. Ensuite, fixons le rayon de bordure à cinq RAM. Je vais ajouter ici une ombre à boîte avec les pâles 01 Ram, trois Ram Et la couleur sera le noir avec une opacité de 0,2. Changez également de cap ou faites-en un pointeur Bon, maintenant nous devons changer l'arrière-plan de chacun des boutons. Le premier va être téléchargé. Utilisons le dégradé linéaire. La direction va être à droite. Pour ce qui est des couleurs, je vais utiliser f476. Ensuite, le prochain sera F D 166. Le premier bouton est plutôt joli. Ensuite, je vais faire de même pour le deuxième bouton, qui est réinitialisé. Je vais changer les couleurs. Ajoutons ici le second 166. Bon, ça y est, tous les éléments sont stylés Nous avons maintenant besoin de BTN actif pour créer l'effet de clic. Nous avons besoin de transform translate Y 0,2 m. Maintenant, si je clique sur les boutons, nous obtiendrons ce bel effet de clic. Réglons la largeur de la barre à zéro, puis je vais le faire. Créez des animations CSS. Nous avons besoin de votre barre de nom anim à 0 % Nous avons besoin que la largeur soit égale à zéro Pour 100 %, je vais définir la largeur à 100 %. Réglons l' animation sur la barre Anim Ensuite, la durée sera de 10 secondes et nous avons également besoin de lignes linéaires et avancées. Comme vous pouvez le constater, la barre de progression se remplit. Nous devons maintenant créer une autre animation. Il va être chargé. Pour un cap à 0 %, nous avons besoin d'une opacité égale à un À 25 %, je vais mettre l'opacité à zéro. Ensuite, je vais dupliquer ce code. À 50 %, l'opacité sera de un, 75 %. Il faut que l'opacité soit nulle Pour ce qui est du 100 %, nous avons besoin d'un indice d'opacité. Si j'ajoute ici, une animation avec les valeurs chargeant anum, puis la durée, 2 secondes, cinq, je veux dire les cinq fois, nous obtiendrons cette animation sympa et cool Il est maintenant temps d'écrire du Javascript. Créons un BTN de téléchargement variable. Je vais sélectionner le bas en utilisant la méthode Queryselector Ensuite, je vais sélectionner Réinitialiser le BTN. Changeons le nom de la classe. Ensuite, nous avons besoin d'une autre variable. Ce sera un conteneur. Maintenant, je vais ajouter un écouteur d'événements au bouton de téléchargement avec un événement de clic Nous avons besoin ici d'une fonction de rappel qui sera exécutée Une fois que nous avons cliqué sur le bouton, nous devons ajouter une nouvelle classe au conteneur à l'aide d'une méthode. La classe va être modifiée. Maintenant, si je sélectionne une barre avec changement de classe et que j' ajoute ici l'animation. Ensuite, une fois que nous avons cliqué sur le bouton de téléchargement, la barre de progression commencera à fonctionner. Ensuite, nous avons également besoin de la même chose pour le titre. Sélectionnons la barre de progression, troisième enveloppe avec Cl change ici, et l'animation Maintenant, comme vous pouvez le constater, tout fonctionne bien. Il faut programmer le bouton de réinitialisation. Changeons ici. Le bouton va être réinitialisé, BTN et nous devons supprimer la classe Change du conteneur Une fois que j'ai cliqué sur le bouton de réinitialisation, l'animation cessera de fonctionner. C'est bon, tout fonctionne parfaitement. J'espère que ce projet était intéressant et amusant. Allons-y et commençons à créer le suivant. 26. Project 21 - En-tête de site avec animations: Bonjour et bienvenue sur notre prochain projet. Dans cette section, nous allons créer un en-tête de site Web moderne et cool avec des animations et un menu de hamburgers Le projet sera créé sur la base HTML, du CSS et du Javskrit C'est en fait le projet le plus ambitieux et l'un des meilleurs de ce cours. Allons-y et décrivons le projet. Comme vous pouvez le constater, nous avons ici un bel en-tête pour le site Web. Nous avons deux parties, gauche et droite. Les deux parties ont des arrière-plans différents. Sur le côté gauche, nous avons un quant au côté droit, il y a un fond clair. Au centre de la page, vous pouvez voir le titre. Il se compose de deux parties. Le côté gauche est large. Quant au côté droit, il a un fond transparent avec une image. Vous pouvez également trouver la même chose pour d'autres éléments textuels. Ici, sur le côté droit, dans le coin supérieur gauche, trouve l'icône du menu. Si je clique dessus, les éléments se masqueront avec effets de fondu et un menu de navigation affichera les éléments de navigation avec des arrière-plans transparents agréables et sympas et de jolis effets de survol Si je clique sur l'icône du menu, la navigation se ferme et les éléments s'affichent à nouveau. Grâce aux effets de fondu, le projet s'adapte aux différentes tailles d'écran. Si j'inspecte la page , passe en mode réactif, puis vérifie les différentes tailles d'écran du projet. Vous constaterez qu' il est beau et réactif sur toutes les tailles d'écran. Très bien, alors asseyons-nous sur ce projet. Je pense que tu vas l'adorer. Alors allons-y et commençons. J'ai créé un nouveau dossier sur le bureau qui inclut le dossier pour les images. Allons-y, ouvrons-le dans le code VS, puis créons nos fichiers de travail. Nous avons besoin de trois dossiers. Le premier sera un index en HTML, puis nous aurons le style CSS. Quant au troisième, il s'agira d' un fichier pour le script Javascript JS. Allons-y, ouvrons le fichier HTM indexé et créons la structure HTM de base Je vais changer le titre. Insérons votre page de destination, puis je vais lier les fichiers CSS et JS. Nous avons besoin ici d'une balise de script, puis nous devons spécifier le nom du fichier dans l'attribut source, mccain Allons-y et ouvrons le projet dans le navigateur à l'aide du serveur live. Ensuite, je vais placer le navigateur et l' éditeur côte à côte. Afin de rendre le processus de travail plus simple et plus pratique, je vais prendre quelques liens différents. Le premier sera une police de caractères, un excellent CDN, car nous allons utiliser des icônes géniales pour les téléphones tout au long du projet Récupérons le lien d'ici. Ensuite, ouvrez la balise link dans l'élément principal et collez le CDN ici. En plus de cela, nous allons utiliser les téléphones Google. Allons visiter le site Web, puis je vais rechercher un Google Phone appelé Signica Negative Nous allons sélectionner quelques styles différents. Ensuite, je vais chercher une autre police qui sera Stick, no bills. Nous allons sélectionner différents styles, puis je vais copier le lien et le coller dans l'élément principal. Très bien, nous sommes prêts à commencer à créer le projet. Je vais commencer par un balisage HTML. Créons un conteneur. Il inclura tout le contenu dont nous avons besoin ici, icône du menu. Il sera composé de lignes. Nous aurons ici deux lignes, la première et la deuxième. En plus de cela, nous avons besoin d' éléments span avec le menu de classe. Et nous devons insérer ici le menu texte. Nous avons besoin d'une autre travée et elle va fermer. OK, après l'icône du menu. Je vais insérer ici éléments de navigation avec le nom de classe navigation. Je vais insérer ici des éléments de lien. Le premier sera à la maison, puis je vais le dupliquer plusieurs fois. Modifions les éléments de navigation. Le second portera sur le sujet, puis nous aurons du contenu. Le prochain sera constitué de tutoriels. Pour ce qui est du dernier point, je vais insérer un contact. OK. Après la navigation, je vais ouvrir Depth va atterrir, faire un autre plongeon, atterrir à gauche, puis nous devons atterrir à droite et à gauche. Ayez H un élément d'en-tête avec le nom de classe principal. Nous avons également besoin d'un autre titre principal à gauche. Je vais insérer ici trois lettres. Ensuite, dans lequel je vais insérer un titre H avec le code texte et Créer. Ensuite, je vais insérer ici un paragraphe avec un texte factice en tant que développement qui sera un lien Je vais insérer un élément avec le texte. En savoir plus Je vais également insérer ici l'icône des polices, qui sera une flèche FA solid FA. Juste après, je vais m'occuper du côté droit. Nous avons besoin ici d'icônes de réseaux sociaux. Insérons un élément. Le premier sera le Facebook d'une marque, puis nous aurons un Twitter. Quant à la troisième icône, il s'agira d'un lien vers les icônes des réseaux sociaux. Je vais ajouter des éléments de titre H one avec les noms de classe. Titre principal et titre principal. Bien, ce sera la deuxième partie du titre principal. Insérons ici le reste des lettres. Ensuite, nous avons besoin d'un texte contenant trois technologies, Open H, un élément de gestion, le premier étant le HTML Ensuite, nous aurons le CSS et le Javascript. OK, donc je pense que c'est tout. À propos du balisage HTML, la seule chose à faire est de l'insérer ici, atterrir, d'écrire l'arrière-plan, qui sera vide heure actuelle, nous avons ici tous les éléments, et maintenant nous en avons deux pour écrire le CSS. Ouvrons le fichier CSS. Sélectionnez chaque élément, définissez la marge et mettez-les tous les deux à zéro. Ensuite, nous avons besoin que la taille de la boîte soit une zone de bordure. Je vais également définir la décoration du texte sur aucune Ensuite, je vais définir la famille de téléphones. Ce sera un san serif en signe et négatif. Tous les styles par défaut sont appliqués. Ensuite, je vais définir la taille de police de l'élément H mal à 62,5 % car nous allons utiliser M comme unité de mesure Dans ce cas, un m sera égal à dix pixels, les éléments sont devenus plus petits. Maintenant, je vais m' occuper du conteneur. Réglons la largeur à 100 % , puis la hauteur sera de 100 % de hauteur du point de vue Ensuite, je vais m' occuper de l'atterrissage. La largeur sera de 100 % La hauteur sera également de 100 %. Je vais également changer l'arrière-plan. Utilisons la fonction de gradient linéaire. La première couleur sera le noir avec une opacité de 0,5 Quant à la deuxième couleur, je vais réinsérer une couleur noire avec une opacité de 0,4 Ensuite, nous devons sélectionner l'image dans le dossier images Ensuite, je vais définir la position qui sera centrée. Et nous devons également ajouter ici qu'il n'y a pas de répétition. En plus de cela, je vais définir propriété paro size avec la valeur cover OK, nous avons ici l'image du parc. Ensuite, je vais sélectionner un homme, réglons l'affichage sur aucun. Je vais me cacher un moment. Ensuite, nous avons besoin de la navigation. Je vais également le masquer en utilisant display none. Les deux éléments sont masqués. Je sais que nous pouvons nous occuper de l'atterrissage. Sélectionnons l'atterrissage à gauche. Je vais régler la position sur absolue. Ensuite, nous avons besoin de la position relative des éléments parents. Deux positions seront nulles. La position gauche sera nulle. Ensuite, nous avons besoin que la largeur soit de 50 % et que la hauteur soit de 100 %. Ensuite, je vais dupliquer ce code, changer la classe, nous avons besoin de votre atterrissage correctement. Nous avons besoin des mêmes propriétés, il suffit de changer de gauche à droite, les deux parties sont alignées. Ensuite, je vais prendre l'arrière-plan du côté droit. Réglons la largeur à 100 %. La hauteur sera de 100 %. Je vais régler la position en valeur absolue. La première place sera nulle. Pour ce qui est de la bonne position, je vais également la mettre à zéro. Ensuite, nous avons besoin de la couleur de fond. Ça va être 94e. L'arrière-plan du côté droit est modifié. Maintenant, je vais m' occuper de tout. Réglons la position sur absolue. Ensuite, la position inférieure sera dix RAM. Pour ce qui est de la position de gauche, je vais également atteindre dix RAM. L'élément est placé en bas. Ensuite, je vais sélectionner H, un élément d'en-tête dans la liste à propos. Réglons la taille de police à six RAM. Ensuite, je vais mettre le texte en majuscules. Changez également la couleur, elle sera blanche. Ensuite, je vais créer une ombre, 0,5 Ram, un Ram. Et la couleur sera le noir avec une opacité de 0,5 Nous avons ici le titre Ça a l'air plutôt sympa. Passons maintenant au paragraphe. Réglez la taille du téléphone sur 1,6 RAM. Ensuite, je vais changer de couleur. Ça va être 94e. Ensuite, je vais utiliser 250 RAM. Nous devons également faire marcher un Ram, 03 Ram et zéro Voici le paragraphe. Allons-y, prenons soin du lien. Je vais régler l' affichage sur flex. Ensuite, nous avons besoin d'une ligne de produits, qui servira de référence. Ensuite, nous avons besoin du pointeur du curseur. Ensuite, je vais définir la largeur, ce sera 14 RAM. Ensuite, je vais sélectionner un élément. Réglons la taille du téléphone à 1,6 RAM. Ensuite, je vais le mettre en majuscules, il nous faut de la couleur, ce sera du blanc. De plus, je vais définir une marge sur le côté droit, ce sera un Ram. Nous avons besoin d'un espace entre le texte et la flèche. Ensuite, je vais m' occuper de la flèche. Sélectionnons les éléments. Je vais régler la taille de la police sur 1,6 RAM. Ensuite, il nous faut de la couleur. Ça va être blanc. Voici la flèche. Je vais maintenant créer un effet de survol. Nous devons ajouter le survol au lien. Ensuite, nous devons sélectionner un élément au survol. Je vais augmenter la marge sur le côté droit. Réglons-le sur deux RAM. J'utilise également ici la transition afin de rendre l' effet plus fluide. Réglons la durée de 2,3 secondes. Si je survole, nous obtiendrons ce bel effet. OK, alors asseyons-nous sur cet élément. Ensuite, je vais sélectionner le titre principal. Réglons la position sur absolue. La première position sera de 25 %. Ensuite, nous avons besoin d'une famille de polices. Ce sera la deuxième police, stick. Pas de pilules. San Serif. Ensuite, je vais régler la taille du téléphone à 20 RAM. Il s'agit des styles par défaut pour les deux parties. Maintenant, je vais sélectionner le côté gauche. Réglons la bonne position à -1 % Ensuite, je vais régler la couleur sur le blanc car nous avons besoin de l'ombre, ce sera 0,5 RAM, un RAM Et la couleur sera GPA, couleur noire avec une opacité de 0,5 Nous avons ici la première partie du titre Sélectionnons le côté droit. Je vais régler la position gauche à 1 %. Ensuite, nous avons besoin d'une ombre de texte 0,5 mm et du RGBA de 0,2 à droite, le côté droit n'est pas visible Fixons l'indice 2100. Nous avons donc le bon côté. Débarrassons-nous de la propriété index et ajoutons-la ici. De plus, nous avons besoin ici que le poids de la police soit en gras. Ensuite, je vais mettre le texte en majuscules , puis créer un espace entre les lettres, faire trois RAM. Maintenant, le titre semble bien meilleur. Nous devons prendre soin de l' arrière-plan du côté droit. Nous avons besoin d'un gradient linéaire. La première couleur sera noir RGBA avec une opacité 0,2 Ensuite, nous avons à nouveau besoin couleur noire RGBA avec une opacité 0,1 Maintenant, nous devons définir l'URL de l'image Nous avons besoin de la même image de fond. Ensuite, nous avons besoin de 30 % comme position. De plus, je vais utiliser le clip d'arrière-plan Web K, ce sera du texte. En plus de cela, nous avons besoin du texte du webkit, du toucher de la couleur. Je vais le rendre transparent. Si je coche, vous verrez ici l'image comme arrière-plan du texte. Je trouve que ça a l'air plutôt sympa. Très bien, prenons ce code et collons-le. Ville où nous avons le bon côté. Ensuite, je vais m' occuper des icônes des réseaux sociaux. Réglons la position de l'emballage. Absolu. Ensuite, nous avons besoin que la position soit à cinq fram La bonne position sera également de cinq images. Ensuite, nous avons besoin d'une propriété d'index 100 pour afficher les icônes. Je vais sélectionner des éléments, je vais régler la taille du téléphone à trois RAM. La marge sera alors de 0,15 Ram. Ensuite, nous avons besoin de Tech Shadow. Réglons-le sur 0,5 image, une poussette, et la couleur sera RGB, couleur noire avec une opacité 0,2 Ensuite, nous avons également besoin du même arrière-plan pour les icônes Copions le code. Ajoutez ici le pointeur du curseur. Comme vous pouvez le voir, nous avons ici des icônes de police avec la même image de fond. Ensuite, je vais m' occuper du texte. Je vais définir le poste. En fait, prenons ce code. Passez à la position. Il nous faut ici six RAM. Nous avons besoin de la position inférieure et de la position supérieure. Changeons-le. Comme vous pouvez le constater, les éléments sont placés en bas. Ensuite, nous devons sélectionner H, un élément d'en-tête. Définissez la taille de police sur huit RAM. Ensuite, le poids de la police sera en gras. Ensuite, je vais mettre la transformation du texte en majuscules. Alors nous avons besoin de The Shadow. Ce sera 0,5 RAM, un RAM, avec le RGBA de couleur noire avec opacité de 0,2. Encore une fois, saisissez ce code Et ici, comme vous pouvez le voir, les titres sont plutôt jolis Pour diminuer la hauteur de la ligne, il en faudra un. Et nous avons également besoin d'une ligne de texte sur le côté droit. OK, tout a l'air plutôt sympa. Nous en avons terminé avec les titres du texte. Je vais maintenant rendre visible l'icône du menu. Cela a fixé sa position à la valeur absolue. Ensuite, nous devons positionner ce sera la position à cinq cadres. Je vais aussi créer cinq images. Réglez la largeur, ce sera dix RAM. Ensuite, nous avons besoin de hauteur, ce sera trois RAM. Utilisez également la propriété index, passez à 200. Ensuite, nous avons besoin de la couleur de fond. Utilisons une couleur d' arrière-plan temporaire. Ici, nous avons l'icône du menu. Je vais sélectionner Line. Réglons sur 2,5 RAM. Ensuite, la hauteur sera de 0,2 Ram. Changez la couleur de fond, fixons-la à neuf pour E. Voici les lignes. Je vais me débarrasser de cette couleur de fond. Maintenant que les lignes sont visibles, il faut les séparer. Sélectionnons les lignes, fixons hauteur à 100 % , puis nous avons besoin d'une boîte flexible. La direction sera également une colonne, nous devons justifier le contenu avec un espace de valeurs, même les lignes sont bien séparées et alignées. Ensuite, je vais m'occuper des éléments de travée. Nous avons deux éléments de rotation, le menu et la fermeture. Réglons la taille de police à 1,8 RAM. Ensuite, nous avons besoin d'une transformation de texte. Ce sera également en majuscules. Je vais régler la couleur 29 FurTe. Nous avons ici des éléments d'envergure. Réglons la position sur absolue. Nous avons besoin de la bonne position pour être à zéro. Ensuite, je vais régler l'affichage pour qu' il soit flexible pour l'icône du menu. Nous avons besoin d'un centre de distribution. Justifiez également l'espace de contenu entre les deux. Ensuite, je vais placer le curseur sur le pointeur. Créons également de l' espace à l'aide du rembourrage. Réglons-le sur zéro et 0,5 m. Comme vous pouvez le constater, les éléments de travée sont bien alignés à côté des lignes. Je vais sélectionner Fermer et définir sa position à 100 %. Maintenant, le deuxième élément de span s'est retrouvé en dessous. Maintenant, nous devons utiliser du Javascript. Créons une variable. Ce sera un conteneur. Je vais le sélectionner en utilisant la méthode du sélecteur de requête. Nous devons spécifier ici le conteneur du nom de classe. Ensuite, je vais créer une autre variable. Ce sera une icône de menu. Spécifiez ici le nom de la classe. Je vais maintenant ajouter un écouteur d'événements à l'icône du menu en cliquant sur un événement De plus, nous devons ajouter ici une fonction de rappel qui sera exécutée une fois que nous aurons cliqué sur l'icône du menu Je vais ajouter une nouvelle classe au conteneur en utilisant la méthode togal, et le nom de la classe sera navigate Je vais utiliser cette classe dans le fichier CSS afin créer de nouveaux styles qui seront appliqués aux éléments. Une fois que nous avons cliqué sur l'icône, ajoutons la transformation de la ligne 1 avec une fonction de rotation Z. La valeur sera de 135 degrés. Nous avons également besoin d'ici pour traduire. Nous devons déplacer légèrement les éléments. La valeur sera de 0,7 Ram. Dupliquons ce code, changeons le nom de la classe. Nous avons besoin de la deuxième ligne. La fonction de rotation Z sera de 225 degrés. Voyons voir, nous avons ici le bouton X. Maintenant, si j'ajoute ici la classe navigate. Et utilisez également la transition avec la Cubic zer fonction par clic. Ensuite, les lignes se transformeront en bouton de fermeture en X. Bien, après cela, je vais sélectionner Naviguer. Suivi du menu. Je vais définir la propriété de transformation pour traduire la fonction Y avec la valeur 110%, je veux dire -110% comme nous en avons besoin ici Menu avec transition dont le point de temporisation est de 1 seconde. Dupliquons ce code, changeons le nom de la classe. Il nous faut 120 % pour clôturer. Je vais ajouter ici une transition avec transformation durée de 0,3 seconde. Ensuite, nous avons besoin d'une transition pour le menu avec navigation. Nous avons également besoin de la même transition pour terminer. Donc, une fois que j'ai cliqué, les éléments fins changeront. Il ne reste plus qu'à masquer ce bel élément. Conférons le trop-plein au plus grand nombre. Maintenant, comme vous pouvez le constater, tout fonctionne parfaitement. Ensuite, je vais m' occuper de la rubrique principale. Nous allons sélectionner le titre principal avec Naviguer. Réglez la transformation pour traduire Y moins cinq images. Ensuite, nous avons besoin d'une opacité nulle et d'une visibilité masquée. Ajoutons également ici une transition pour un effet plus fluide. Une fois que j'ai cliqué, le titre se masquera avec un bel effet de fondu. Ensuite, je vais cacher l'information. Sélectionnons un élément avec la classe navigate. Nous avons besoin ici de transform translate x five Ram. Et nous avons également besoin de nouveau d'une opacité nulle et d'une visibilité masquée Et encore une fois, pour un effet fluide, passons à la durée d'une seconde. Une fois que j'ai cliqué, la section à propos se déplacera en hauteur avec un effet de fondu. Ensuite, je vais faire de même pour le texte. Nous allons sélectionner l'élément avec la classe Navigate. Définissez transform pour traduire x moins pi fram. Nous avons également besoin d'une opacité nulle et d'une visibilité masquée. Encore une fois, utilisez la transition pour le point de durée de 1 seconde. Si je clique, les éléments se masqueront. Mais il nous faut ici 1 seconde au lieu de 0,1. Maintenant, comme vous pouvez le voir, tout fonctionne à nouveau correctement. Maintenant, nous avons besoin de la même chose pour les réseaux sociaux. Nous allons sélectionner les éléments avec le nom de la classe. Naviguez et faites la même chose dont nous avons besoin ici. Opacité nulle et visibilité masquée. Et utilisez également une transition d'une durée de 0,5 seconde. Si je clique, tous les éléments se masqueront. Nous avons ici de jolis effets de fondu. Ensuite, je vais masquer l' arrière-plan du côté droit. Nous allons sélectionner ces éléments à l'aide de la classe. Naviguez. Je vais définir la transformation pour traduire x 100 %. Nous avons également besoin d'une opacité nulle et encore une fois de la visibilité masquée Ensuite, je vais ajouter ici la transition. Si je clique, l'arrière-plan se déplacera vers la droite. Nous devons masquer ces barres de défilement. Utilisons le trop-plein masqué pour l'atterrissage. Maintenant, tout fonctionne parfaitement. Très bien, maintenant je vais sélectionner Atterrissage avec navigation. Afin de flouter l'arrière-plan, nous avons besoin du filtre Blar 1.5 Vous pouvez toujours voir que l' arrière-plan est flou. En fait, nous avons besoin que l'arrière-plan du conteneur soit noir pour améliorer les effets de flou Maintenant, comme vous pouvez le constater, nous avons ici des résultats bien meilleurs et bien meilleurs Très bien, je vais ensuite ajouter une transition afin de rendre l'effet un peu plus fluide. Et nous avons également besoin d' un certain délai. Ensuite, nous avons besoin d'une transition pour l'atterrissage par défaut. Maintenant, si nous voulons arriver là, effet polaire avec transition en douceur. Très bien, maintenant je vais m' occuper de la navigation qui était masquée. Réglons la largeur à 100 %, puis la hauteur sera de 100 %. Je vais régler la position sur absolue. Ensuite, nous avons besoin de livres flexibles. Je vais changer de direction, puis utiliser le centre de contenu de justification et un centre de rubriques. Nous devons centrer le contenu. Je veux dire les éléments de navigation en ce moment, ils sont visibles. Ajoutons ici l'indice avec la valeur 100. Nous avons maintenant les éléments de navigation. Je vais sélectionner Link Elements. Réglons la taille du téléphone 210 RAM. Ensuite, le poids du téléphone sera en gras. Je vais également transformer le texte en majuscules. Ensuite, nous avons besoin de Tech Shadow 0,5 Ram, un Ram, et la couleur sera le noir avec une opacité de 0,5 Ensuite, nous avons besoin d' une marge, 0,5 Ram Et en fait, nous avons besoin ici de 0,5 RAM. Nous avons ici les éléments de navigation. Je vais maintenant prendre l'arrière-plan, que nous avons utilisé plusieurs fois. Utilisons ici le même code. Changeons la valeur en pourcentage dont nous avons besoin, 35 % Comme vous pouvez le voir, nous avons ici une image de fond pour les éléments de navigation. Changeons de couleur ici. Il sera blanc avec une opacité plus faible. Nous avons maintenant de bien meilleurs résultats. OK, après cela, je vais créer un effet de survol sur Ho. Je vais modifier l'espacement des lettres. Je vais augmenter l'espace. Nous avons maintenant besoin d' une transition d'une durée de 0,5 seconde. Nous avons maintenant cet effet de survol agréable et cool. OK ? Ensuite, je vais masquer la navigation par défaut. Utilisons l'opacité zéro et la visibilité masquée. Je vais les montrer en retour. Une fois que nous avons ouvert le menu, nous avons besoin de naviguer par nom de classe, suivi de la navigation. Nous avons également besoin de la même chose pour l'élément lien. Réglons l'opacité à un et la visibilité à visible. Ensuite, je vais modifier la transition. Ajoutons ici une opacité de 0,5 seconde. Et nous avons également besoin d' un temps de retard d'une seconde. Maintenant, une fois que nous ouvrons le menu, les éléments de navigation s'affichent. Très bien, débarrassez-vous de ce code à partir d'ici, car nous allons utiliser transition différente pour chaque élément. Je vais commencer par le premier en utilisant le sélecteur de nième enfant Définissez la transition. Nous avons besoin d'un espacement entre les lettres d'une durée de 0,5 seconde. Ensuite, nous avons besoin d'une opacité 0,5 seconde, puis d' un délai de 1 seconde Je vais dupliquer ce code plusieurs fois. Modifions les sélections de l'enfant pour le deuxième élément dont nous avons besoin de 1,2 seconde. Ensuite, pour le troisième élément, cela prendra 1,4 seconde. Ensuite, nous aurons 1,6 seconde, et enfin 1,8 seconde. Si j'ouvre le menu, les éléments s' afficheront dans l'ordre avec un effet agréable et cool. En fait, tout fonctionne parfaitement, et nous devons maintenant adapter le projet aux différentes tailles d'écran. Allons-y et passons le projet en mode réactif. Nous devons trouver les points d'arrêt sur lesquels nous devons apporter des modifications à notre projet Allons-y et créons une requête multimédia CSS. Je vais ajouter ici des commentaires pour le responsive. La largeur maximale sera de 1 600 pixels. Je vais régler la taille du téléphone pour l'élément H demil à 55 %. Cela réduira la taille des éléments Ensuite, nous devons trouver un autre point de rupture. Réglons la largeur à 1 280 pixels. Je trouve que le projet a l'air plutôt sympa. Ensuite, je vais régler la largeur à 1024 pixels. Allons-y et dupliquons ce code. Je vais régler avec 1 200 pixels. Quant à la taille de police de l'élément H, elle sera de 45 %. Les éléments sont devenus plus petits et le projet est vraiment beau. Ensuite, je vais réduire la taille de l'écran et trouver le prochain point de rupture. Réglons l'iPod du projet 2. Je vais dupliquer ce code, changer le maximum sera de 900 pixels. Pour ce qui est de la taille du téléphone, je vais définir deux à 40 %. En plus de cela, je vais sélectionner , je veux dire, le paragraphe, fixons deux pour deux RAM. Comme vous pouvez le constater, tout semble bon. Ensuite, je vais réduire la taille de l'écran. Réglons avec 2500 pixels, c'est ce que sera le Hyde, 800 pixels. Créons une nouvelle requête multimédia CSS avec Max de 700 pixels. Je vais régler la taille de téléphone de l'élément HTM à 35 %. Ensuite, je vais sélectionner Landing Left et régler sur 100 %. Ensuite, je vais accéder au fichier de script Java Create new variable. Ça va se diriger, non ? Sélectionnons les éléments à l'aide de la méthode de sélection de requêtes. Nous avons besoin ici, de la classe principale, du titre, non ? Dupliquons le code dont nous avons besoin ici. Nous nous dirigeons également vers la gauche. Les deux éléments de titre sont sélectionnés. Ensuite, je vais créer nouvelle variable appelée responsive Design qui sera une fonction dont nous avons besoin si, dans laquelle je vais définir ce qui suit. La largeur intérieure de la fenêtre est inférieure ou égale à 700 pixels. Ensuite, nous devons adopter le bon style. N'en affiche aucun. Si la taille de l'écran est inférieure à 700 pixels, nous devons masquer le titre sur le côté droit. Pour ce qui est de la gauche, nous devons faire en sorte que le texte soit explorateur. Nous avons également besoin d'une déclaration L. Récupérons ce code. Dans l'instruction L, nous avons besoin d' bloc d'affichage pour le titre à droite. Pour le titre de gauche, nous avons besoin que le contenu du texte soit x. Ensuite, nous avons besoin d'un écouteur d'événements pour l'objet de fenêtre avec l'événement de redimensionnement Et nous avons également besoin ici d'une fonction de rappel. Appelons la fonction responsive design. Et nous devons également appeler la fonction en dehors de l'instruction. Une fois que nous avons réduit la taille de l'écran à 700 pixels, le côté droit, je veux dire que le titre droit est masqué. Ensuite, sélectionnons le titre principal à gauche. Et changer la bonne position sera de 50 %. De plus, nous devons centrer l'élément en utilisant transform translate x 50 %. Ensuite, nous avons besoin d' rembourrage sur le côté gauche pour qu'il y ait trois RAM, le titre est placé au centre Allons-y, sélectionnons l'arrière-plan du côté droit et réglons l'affichage sur aucun, l'arrière-plan n'est masqué. En plus de cela, je vais sélectionner le titre principal, juste avec le texte H un et aussi un élément de réseau social. Nous avons besoin de la couleur de remplissage du texte du kit Web. La couleur sera le blanc. Je vais sélectionner le titre principal et définir la taille du téléphone, 212 RAM. Maintenant, comme vous pouvez le voir, les en-têtes et les icônes sont blancs En fait, nous avons une erreur, nous avons besoin du contenu textuel et non de l'affichage. Et il en va de même dans la déclaration sur les outs. Maintenant, le problème sera résolu. Nous en sommes à la deuxième partie. Ensuite, je vais sélectionner « À propos du changement ». La position inférieure sera de 50 % Quant à la position gauche, elle sera de 50 %. Ensuite, nous devons transformer translate x avec -50 %. Nous avons également besoin de display flex et nous devons changer de direction, ce sera une colonne Faisons une ligne d'éléments au centre. Nous devons également définir que la largeur sera de 100%. En fait, nous avons un problème. Oui, nous avons besoin de la position de gauche et non du porteur de gauche. Maintenant, l'élément est placé au centre. Changeons l'écran du mobile et créons une nouvelle requête multimédia CSS. La largeur maximale sera de 450 pixels. Je vais sélectionner environ et régler la position inférieure à 45 %. Changeons l' écran, réduisons-le. Nous avons ici une navigation qui a l'air sympa. Je n'aime pas les effets ici sur des écrans plus petits. Je vais m'occuper de ça. Sélectionnons Naviguer avec le titre principal et définissons la transformation, la traduction à 50 %, puis moins cinq RAM. Maintenant, je pense que nous avons ici de bien meilleurs résultats. En fait, je pense que nous en avons terminé avec le projet. J'espère que c'était intéressant et que vous avez appris de nouvelles choses. Allons-y et passons au projet suivant. 27. Project 22 - Curseur de témoignage: Très bien, il est donc temps de passer à la réponse pour créer notre prochain projet. Dans cette section, nous allons créer un slider de témoignages Ce projet sera créé sur la base du HTML, du CSS et du Javascript. Allons-y et décrivons-le rapidement. Comme vous pouvez le constater, nous avons ici un slider de témoignages. Je veux dire, au centre de la page, vous pouvez voir la carte où nous avons l'image du client, puis l'opinion du client, ainsi que le nom et l'âge. Sur le côté droit et sur le côté gauche, vous pouvez voir les flèches. Vous pouvez cliquer sur les flèches et nous passerons aux autres clients. En bas, vous pouvez voir que ce sont les manettes. Vous pouvez cliquer sur ces points et nous trouverons le bon client. D'accord, je pense que le projet sera intéressant et utile de nos jours. Presque tous les sites Web ont une telle section. Vous pourrez apprendre comment créer un slider de témoignage OK, alors allons-y et commençons. J'ai créé un nouveau dossier sur le bureau dans lequel j'ai un dossier pour les images. Allons-y, ouvrons le projet et le code VS, puis créons des fichiers de travail pour HTML. Ensuite, pour le CSS, nous avons également besoin d' un fichier pour le script Java. Ouvrons le fichier HTML d'index et créons la structure HTML de base. Je vais changer le titre. Ce sera un slider de témoignages. Ensuite, je vais lier le fichier CSS, et nous devons également lier le fichier Javas Insérons le fichier nommant l'attribut source. OK, ouvrons le projet dans le navigateur à l'aide du serveur live , puis organisons notre environnement de travail. Je vais placer le navigateur et l'éditeur côte à côte comme ça, afin de simplifier le processus. OK, je vais corriger le lien du téléphone CDN car nous allons utiliser des icônes de téléphone tout au long de ce projet Copions le lien, puis ouvrons la balise de lien dans l'élément principal et collons le CDN dans l'attribut de référence H. En plus de cela, nous allons utiliser des téléphones Google. Nous allons donc visiter le site Web de Google Phones. Je vais rechercher un appel téléphonique. Est-ce possible ? Sélectionnons les styles. Ensuite, je vais copier le lien et le coller dans l'élément principal. OK, nous sommes prêts à commencer à écrire le code. Je vais commencer par le balisage HTML. Nous avons besoin d'un contenant qui emballera tout le contenu. Ensuite, nous avons besoin d'un emballage de témoignages, dans lequel je vais ouvrir un autre fond, sera un en-tête de témoignages À l'intérieur de cet élément, nous avons besoin de trois éléments d'en-tête avec le texte, nos clients. Ensuite, nous avons besoin d'un élément de titre H, qui sera un témoignage Ensuite, nous avons besoin d'étoiles. Je vais ouvrir des éléments de classe A solid star. Nous avons besoin de cinq étoiles. Voici les icônes. Ensuite, je vais insérer ici témoignages dans lesquels nous avons besoin d'un slider Ensuite, nous avons besoin d'une diapositive. Je vais insérer ici l'arrière-plan de la diapositive. Ensuite, le contenu de la diapositive dans lequel je vais insérer un élément. Ce sera une gauche solide. Alors nous avons besoin de ce qu'il faut. Ensuite, nous devons créer une image de diapositive dans laquelle je vais insérer une balise d'image. Nous allons sélectionner Image dans le dossier des images. Ce sera un client sur IPG. Ensuite, faites glisser le texte dans lequel je vais insérer. H, élément à trois rubriques, ce sera un produit merveilleux. Ensuite, nous avons besoin d'un paragraphe avec un texte de Tammy. Nous avons également besoin d' un autre paragraphe dans lequel je vais insérer le nom du client, le H. Ensuite, je vais créer les contrôles. Ouvrons Deep va être un jeu de commandes. Et je vais insérer ici l'élément I, qui sera FA solid FA arrow left. Ensuite, nous avons besoin de la flèche droite. Et je vais également insérer vos points qui seront créés par span elements. Très bien, donc en fait, nous avons ici un petit problème à ajouter ici. Ça va être solide. Maintenant, les Asmicons du téléphone sont affichés avec le balisage H demil Nous sommes déprimés. Allons-y et commençons à écrire le CSS. Tout d'abord, comme d'habitude, je vais sélectionner chaque élément puis définir une marge et les mettre tous les deux à zéro. Ensuite, je vais définir la taille de la boîte sur la zone de bordure. Nous avons également besoin d'une famille téléphonique. Ce sera le téléphone appelé, n'est-ce pas, que nous avons sélectionné sur le site Web de Google Phones. Ensuite, je vais régler la taille du téléphone pour l'élément H mil à 62,5 % car nous allons utiliser M comme unité de mesure, la RAM sera égale à dix pixels, tous les éléments sont devenus plus petits Ensuite, je vais vous présenter l'image. Réglons avec 215 Ram, alors la hauteur sera de 16 Ram. Ensuite, je vais sélectionner l'image elle-même, la définir en hauteur. Je vais régler avec 200 %, la hauteur sera de 100 % . Et nous avons également besoin de pieds d'objets avec une couverture de valeur Maintenant, l'image est devenue plus petite. Allons-y et commençons à personnaliser le conteneur. Je vais régler à 100 %, puis la hauteur sera de 100 parties de hauteur. Changeons la couleur de fond. Je vais utiliser un dégradé linéaire. La première couleur sera 368661. Ensuite, le prochain sera 2964. Nous avons ici un beau contexte. Utilisons des livres flexibles. Nous devons centrer le contenu en utilisant un centre contenu et un centre d'éléments de ligne justifiés. Comme vous pouvez le constater, le contenu est placé au centre. Allons-y et sélectionnons l'emballage du témoignage. Je vais régler la largeur à 95 %, puis la hauteur à 90 %. Ensuite, nous avons besoin de la couleur de fond. Je vais utiliser un dégradé linéaire. La première couleur sera RGBA, couleur noire avec une opacité 0,7 Ensuite, nous avons encore besoin de la couleur noire avec l' opacité 0,5 Avec l'opacité 0,6 Ensuite, couleur noire avec l' opacité 0,5 Avec je vais définir l'URL de l' image de fond Nous allons sélectionner Image dans le dossier des images. Ensuite, je vais définir la position qui sera celle du capteur et nous n'avons pas besoin de le répéter. Enfin, je vais définir la taille de fond pour couvrir. Comme vous pouvez le voir, nous avons ici une image de fond agréable et cool pour l'emballage. Ensuite, nous avons besoin d'une ombre carrée avec une valeur de 01, Bram de cinq images, et la couleur sera RGBA, couleur noire avec une opacité 0,4. Nous avons ici un effet d'ombre agréable et cool Ensuite, je vais m'occuper de l'en-tête du témoignage. Réglons la position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui est l'emballage du témoignage Je vais définir la position supérieure à 5 %, puis la position gauche à 50 %. Nous devons centrer l'élément en utilisant transform translate x avec la valeur moins. 50 % Ensuite, nous devons aligner le texte au centre. Nous avons ici l'entête du témoignage. Copions-le, sélectionnez Collez-le ici. Et sélectionnez H, trois éléments de titre. Je vais régler la taille du téléphone à deux RAM. Le poids du téléphone sera alors de 300. De plus, nous avons besoin de couleur pour CCC. Nous avons ici le premier élément de titre. Ensuite, je duplique ce code, change le sélecteur dont nous avons besoin ici H un élément de titre. Réglons la taille du téléphone à cinq RAM. Ensuite, je vais ajouter ici la transformation du texte avec la valeur en majuscules , changer également la couleur, ça va être blanc. Ensuite, nous avons besoin d'un espacement des lettres avec la valeur 0,4 Ram. Voici le titre. Ensuite, je vais supprimer les icônes du téléphone. Réglons la taille du téléphone à 1,6 RAM. Ensuite, la couleur, ce sera RTB 255 à 2062, ce sera la couleur jaune Réglons la marge à 0,5 RAM. Nous avons ici les étoiles. Ils sont plutôt jolis. Ensuite, je vais m' occuper des commandes. Réglons sur cinq, puis la hauteur sera de cinq Ram. Ensuite, nous avons besoin de la couleur de fond. Je vais définir la couleur de fond 27854. Ensuite, je vais régler Opacity 2.6. Ensuite, nous avons besoin d' rayon de bordure de 50 %, nous avons besoin de contrôles arrondis Ensuite, je vais régler l'affichage sur flex, car nous devons centrer les flèches en utilisant le centre de contenu justify et le centre des éléments de ligne. Comme vous pouvez le constater, les flèches sont placées au centre des cercles. Ajoutons la taille de police, faisons-en trois RAM. Ensuite, il nous faut de la couleur. Il va y en avoir 444. De plus, je vais régler la position sur absolue. La position sera de 50 %. Nous devons également transformer la translation Y afin de centrer les flèches verticalement avec la valeur -50 %, puis changer de curseur, en faire un pointeur Nous avons ici les commandes. Nous devons maintenant sélectionner les commandes avec mph, sélecteurs graphiques et régler la position gauche de la première flèche à 15 %. Dupliquons ce code Sélectionnez la deuxième flèche et changez de position. Nous avons besoin de la bonne position 15 % Comme vous pouvez le voir, les flèches sont bien alignées. Ensuite, je vais m' occuper des points. Sélectionnons les éléments d'envergure. Tout d'abord, je vais définir le « nous » et la hauteur. Réglons-les tous les deux sur un seul RAM. Ensuite, nous avons besoin de la couleur de fond. Ce sera CC. Ensuite, nous avons besoin d'un rayon de bordure pour arrondir les éléments 50 %. À l'heure actuelle, les points ne sont pas visibles. Réglons la position absolue pour l'élément parent. Ensuite, les pots et la position seront de 10 % par rapport à la position laissée, je vais le dire à 50 %. Ensuite nous devons centrer les éléments en utilisant transform translate x -50 %. Ensuite, nous avons besoin de Flexbox Ici, nous avons les points. Nous avons besoin d'un peu d'espace entre eux. Faisons-le en utilisant une marge de 0,5 rm. Et je vais aussi mettre le curseur sur le pointeur. Maintenant, les points sont plutôt jolis. Ajoutons la classe active au premier élément de spin. Sélectionnez ensuite l'élément de rotation actif. Réglez la largeur sur 1,5, puis la hauteur sera. 1,5 RAM. Nous avons besoin que la couleur de fond soit blanche. Comme vous pouvez le voir, le point est plus grand. Nous devons centrer les éléments verticalement à l'aide d'éléments linéaires. Au centre, d'accord, c'est une question de points pour le moment. Ensuite, je vais m' occuper de la diapositive. Sélectionnons les témoignages définis à 55 %, puis la hauteur sera de 50 RAM La minute suivante, position absolue, je vais régler la position sur 50 % puis la position gauche sera 50 %. Et nous devons centrer l'élément en utilisant la transformation, traduire les valeurs -50 % à transformation, traduire les valeurs nouveau -50 %. Ensuite, je vais ajouter Il mesurera 0,1 m d'épaisseur et la couleur sera blanche. Ici, nous avons la bordure, dupliquons la diapositive plusieurs fois. Je vais apporter ici quelques modifications. Nous devons changer le nom de l'image car le nom du client sera Mary Brown. Ensuite, nous avons besoin du client 3. Il s'appelle Nick Jones et il aura 27 ans. Nous avons besoin du client 4, il s'appelle Brown. Changeons le H. Nous avons ici. Dernière image, le client 5, et le client sera John Smith, 25 ans. Comme vous pouvez le voir, cette diapositive s'affiche ensuite Je vais sélectionner le curseur, régler la hauteur à 100 %. Ensuite, la largeur sera de 500 %. Nous devons régler la flexion de l'affichage, de sorte que les diapositives soient placées horizontalement, côte à côte Ensuite, je vais sélectionner une diapositive réglée sur 20 %. Ce sera 100 % de l'emballage. J'en suis à la cinquième partie de l'emballage. Sélectionnons l' arrière-plan de la diapositive et définissons la largeur à 70 %. La hauteur sera 65 %. Je vais changer la couleur d'arrière-plan. Utilisons ici cette couleur verte. Ensuite, je vais définir la position sur absolue. Nous avons besoin de la position relative de l'élément parent. Ensuite, je vais définir que la position sera de 50 % la position de gauche 50 %. Et nous devons transformer, traduire avec les valeurs -50 % et encore une fois -50 %. Voici l' arrière-plan de cette diapositive Ajoutons ici, ou le rayon. Il y aura deux Ram. Ensuite, nous avons besoin d'une opacité 0,7 Ensuite, je vais sélectionner le contenu de la diapositive Récupérons le code d'ici et collons-le pour le contenu de la diapositive. Changez la couleur du bacon, il sera blanc. De plus, je vais me débarrasser de l'opacité. Ensuite, nous avons besoin de Display Flex. De plus, nous devons ici justifier contenu avec l'espace de valeurs entre les deux, nous avons besoin d'espace entre les éléments flexibles. Ajoutons également ici un centre de rubriques. Ensuite, nous devons créer de l'espace en utilisant un rembourrage de 0,5 RAM. Ensuite, je vais faire pivoter l'arrière-plan à l'aide de la fonction de rotation Z. Et la valeur sera de moins six degrés. Maintenant, nous avons ici de bien meilleurs et beaux résultats. Ensuite, je vais m' occuper du. Phonosomicon, réglons la taille du téléphone à 12 Bram, puis la couleur sera verte De plus, je vais régler la position sur absolue. Nous avons ici les citations et nous devons les positionner. Faisons d'abord appel au phonosomicon en utilisant nième enfant. Les deux positions seront de -20 %. Quant à la position de gauche, je vais la régler à 10 %. Dupliquons ce code et changeons de Pour le deuxième phonosomicon, nous avons besoin de la position inférieure (-20 %) et de la position droite ( 10 %). Comme vous pouvez le voir, les guillemets Allons-y et prenons soin du texte de la diapositive. Réglons la largeur à 70 %, puis je vais m' occuper de l'image. Réglons le rayon de la bordure à 3m03 Ram zéro. Maintenant, l'image est plutôt jolie. Ensuite, je vais sélectionner l' image de la diapositive avec les pseudo-éléments suivants. Nous avons également besoin d'une image de diapositive avec un pseudo-élément avant. Nous devons créer une jolie bordure. Réglons le quantum sur vide. Ensuite, nous devons être à 100 % la hauteur sera de 100 %. Ensuite, nous devons la régler sur absolue. Nous avons besoin de la position relative de l'élément parent, qui est une image de diapositive. Ensuite, je vais définir la bordure sur 0,2 Ram solid. Et la couleur sera RTB, une couleur noire avec une opacité de 0,4. Ensuite, une couleur noire avec une opacité nous avons besoin d'un rayon de bordure trois, Ram 03 Ram zéro C'est comme le rayon de bordure de l'image. Ensuite, nous devons prendre soin de la position des éléments avant et après. Commençons par l'élément suivant. Les deux positions seront égales à moins un RAM. Ensuite, nous avons besoin que la position gauche soit de -0,5 RAM. Dupliquons ce code, changeons le sélecteur dont nous avons besoin avant l'élément Réglons les pots et positionnons deux moins un Ram. Et la bonne position sera de -0,5 RAM. OK, maintenant les éléments sont beaux. Nous avons besoin ici de la propriété index moins un. Maintenant, nous avons ici cette belle et cool réalité qu'est la frontière. Sélectionnons le texte de la diapositive avec trois éléments d'en-tête H. Je vais régler la taille du téléphone à 2,5 RAM. Le poids du téléphone sera alors de 300. Je vais régler la couleur sur 111, puis je vais définir la marge en bas sur un RAM. Allons-y et personnalisons le paragraphe. Sélectionnez le texte de la diapositive à l'aide du sélecteur. Je vais régler la taille du téléphone à 1,4 RAM. Le poids du téléphone sera de 300. Nous avons également besoin que la couleur soit RGB 3.040,35. Ensuite, je vais régler la hauteur de ligne à 1,2. Nous avons également besoin En bas, il y aura trois Ram. Comme vous pouvez le constater, le paragraphe est plutôt sympa. Réglons avec 235 RAM. Ensuite, je vais sélectionner Slide Text Client. Réglons la taille du téléphone : 21,8 RAM. Pour ce qui est de la couleur, je vais utiliser les RTP 11, 83, 47. Le nom et le. Il a l'air plutôt sympa. En fait, je me débarrasse de cette frontière à partir d'ici. Nous n'en avons plus besoin. Nous devons maintenant commencer à écrire le Javascript. Créons une variable. Ce sera un slider. Je vais sélectionner un élément en utilisant la méthode du sélecteur de requête. Insérons le curseur du nom de votre classe. Ensuite, nous avons besoin de quelques variables différentes. Le second sera constitué de diapositives. Et nous devons sélectionner les diapositives à l'aide de la méthode All du sélecteur de requêtes Changeons le nom de la classe. La variable suivante sera la flèche gauche. Contrôlons la flèche gauche. Nous avons également besoin de la flèche droite. Dupliquons cette ligne de code. Tournez de gauche à droite. Il nous faut ici le deuxième enfant. Très bien, maintenant je vais ajouter un écouteur à la flèche droite avec un événement de clic Ensuite, nous avons besoin de la fonction cope qui sera exécutée une fois que nous aurons cliqué sur la flèche droite. Je vais ajouter du style au slider. Il va être transformé avec la fonction value translate x. Je vais intervenir de -20 % Ensuite, nous avons besoin d'une transition pour le curseur avec tout et la durée sera de 0,8 seconde De plus, je vais utiliser le P1001 cubique. Si je clique sur la flèche droite, ce curseur se déplacera vers la gauche. Ensuite, je vais créer une nouvelle variable, ce sera l'index des diapositives. Et je vais le mettre à zéro par défaut et dupliquer le code dont nous avons besoin ici. Flèche gauche Je vais ajouter ici un index des diapositives, et je vais le régler sur index des diapositives moins un. Ensuite, nous traduisons x. Je vais passer ici index des diapositives multiplié à -20 %. Copions ce code Collez-le ici pour obtenir la flèche droite dont nous avons besoin ici, plus une. Maintenant, si je clique sur le, le curseur fonctionnera correctement. Une fois que nous avons atteint la dernière ou la première diapositive, nous devons arrêter le curseur Nous avons besoin ici d'un index de diapositive supérieur à zéro. Nous avons besoin d'un point d'interrogation, index de diapositives moins un ou zéro. Nous avons besoin d'une déclaration similaire ici. L'index des diapositives est inférieur à la longueur des diapositives enseignées moins un , puis le point d'interrogation. Et nous devons indexer l'index des diapositives plus un ou la longueur des diapositives moins un Maintenant, une fois que nous atteignons la dernière diapositive, le curseur cesse fonctionner et il en va de même pour la première diapositive OK ? Nous avons maintenant besoin de masquer le trop-plein pour masquer le reste des diapositives Maintenant, si je clique, le curseur fonctionnera parfaitement. Maintenant, nous devons nous occuper des points. Créons une variable. Ce sera un emballage à pois. Sélectionnez cet élément. Ensuite, il faut que je passe votre temps. Nous avons également besoin de la requête « Tout sélectionner ». Je vais regarder à travers les points en utilisant la méthode du fourrage. Nous avons besoin d'un point et d'un index. Les paramètres que je vais ajouter vont même jusqu'à écouter l'événement point with click. Et nous devons également transmettre ici la fonction de rappel. Réglons l'index de la diapositive sur index, je veux dire le paramètre. Ensuite, je vais activer les points, utiliser la méthode du sélecteur de demande Je vais supprimer Active de la liste des classes. Ajoutons la même déclaration ici. Je vais également ajouter à l'actif. Maintenant, si je clique sur le, le curseur fonctionnera Maintenant, nous devons travailler sur les points. Une fois que nous avons cliqué sur les manettes, ajoutons ici des points qui enveloppent les enfants. Nous devons ajouter ici un index des diapositives. J'ajoute Active à la liste des cours. Ensuite, je copie ce code à partir d'ici et je l'ajoute pour les deux flèches. Maintenant, si je clique, les points fonctionneront bien. En fait, tout fonctionne bien. Ensuite, je vais créer une variable appelée set index, qui sera une fonction. Je vais récupérer ce code à partir d'ici et ajouter une fonction. Nous avons également besoin de ce code. Ensuite, je vais me débarrasser de cette fin de code appelée fonction set index. Je vais faire de même pour les flèches gauche et droite. Appelons function set index. Maintenant, le code semble beaucoup plus simple. En fait, tout fonctionne parfaitement et nous en avons terminé avec ce projet. J'espère que c'était intéressant et que vous avez appris de nouvelles choses. Allons-y et passons au projet suivant. 28. Project 23 - Formulaire de communication animé: Bonjour et bienvenue dans notre prochain projet. Dans cette section, nous allons créer un formulaire de contact animé. Le projet sera créé sur la base du HTML, du CSS et du Javascript. Comme vous pouvez le voir, nous avons ici un cercle animé au centre de la page. Si je clique dessus, le formulaire de contact s'affichera. Il se compose de deux éléments différents. Nous nous dirigeons ici vers les champs de saisie pour le nom et e-mail avec ce bel effet de focus. Ensuite, nous avons ici une zone de texte pour le message. En bas, vous pouvez voir le bouton qui a cet effet de survol agréable et cool Dans le coin supérieur droit du formulaire de contact, vous pouvez voir le bouton de fermeture en X. Si je clique dessus, le formulaire de contact se ferme. D'accord, je pense que le projet sera intéressant et utile. Allons-y et commençons. J'ai créé un nouveau dossier sur le bureau. Allons-y, ouvrons-le dans le code VS, puis créons nos fichiers de travail pour HTML. Ensuite, nous avons besoin d'un fichier pour CSS, je vais donc créer un fichier de script JS pour le script Java. Ouvrons le fichier HTML d'index et créons le document HTML de base. Je vais changer le titre. Ce sera un formulaire de contact. Ensuite, je vais lier le fichier CSS. Nous avons également besoin d'un lien pour le fichier Java. Allons-y et ouvrons le projet dans le navigateur à l'aide du serveur live. Et nous devons également placer le navigateur et l'éditeur côte à côte, comme ça. Ensuite, je vais visiter le site Web de Google Phones. Comme nous allons utiliser les téléphones Google tout au long de ce projet, je vais rechercher un téléphone appelé poppins Nous allons sélectionner quelques styles différents, puis je vais copier le lien et le coller dans l'élément principal. Ensuite, je vais prendre le téléphone, lien CDN parce que nous allons utiliser le téléphone certaines icônes dont nous avons besoin pour ouvrir balise de lien et coller le CDN dans l'attribut de référence H. OK, nous sommes prêts à commencer à écrire le balisage HTML. Nous avons besoin d'un contenant qui emballera tout le contenu. Ensuite, nous avons besoin d'un emballage de formulaire. Je vais ouvrir le bouton avec la classe Fermer BTN. Ensuite, nous devons placer ici x après le bouton. Je vais créer un formulaire avec le formulaire de contact avec le nom de la classe. Débarrassons-nous de l'attribut action à l'intérieur de l'élément de formulaire. Je vais placer H une balise d'en-tête avec l'en-tête du formulaire de classe. Le texte sera « Contactez-nous ». Ensuite, nous avons besoin de développement, qui sera constitué de groupes d'entrée. Insérons votre groupe de saisie dans lequel je vais placer l'étiquette pour le nom. Je vais ajouter ici une étiquette de champ. Ensuite, je vais insérer votre balise de saisie avec le type de texte, également le nom de la classe, ce sera un champ. Ensuite, nous devons ajouter ici l'attribut placeholder avec le texte Entrez votre nom. Je vais dupliquer le groupe de saisie. Nous avons besoin de la même chose pour l'e-mail. Changeons le texte. Nous devons donc saisir ici votre adresse e-mail à côté d'insérer une zone de texte. Dans un premier temps, nous avons besoin d' un développement avec le groupe de zones de texte de classe. Ensuite, je vais insérer votre étiquette pour le message. Le nom de la classe sera intitulé field label. Ensuite, je vais insérer une zone de texte. Avec le champ du nom de classe. Nous avons également besoin d'un attribut d'espace réservé avec le texte, votre message ici OK, après cela, nous devons soumettre Batson. Avec le type Batson. Je vais ajouter ici le nom de la classe, ce sera Submit PTN. Ensuite, je vais ajouter ici ce qui sera placé dans l'élément span Submit. Et nous avons également besoin d'un élément qui sera une flèche FA solide juste après le bouton. Je vais placer ici un paragraphe avec le texte pour toute question, conflit ou centre d'appels 2047 Je vais ajouter ici éléments de durée et un numéro de téléphone factice En fait, tous les éléments sont créés et nous pouvons maintenant commencer à écrire le CSS. Comme d'habitude, je vais sélectionner chaque élément , puis régler la marge et le rembourrage à zéro Ensuite, nous devons définir le dimensionnement des boîtes. Ce sera une zone de bordure car je vais définir une ligne à aucune. Ensuite, je vais définir la famille de téléphones. Ce sera Poppins San Serif. Les styles par défaut sont appliqués. Ensuite, je vais régler la taille du téléphone de l'élément HTM à 62,5 %. Pour utiliser M comme unité de mesure, m sera égal à dix pixels Après cela, sélectionnons le conteneur. Je vais définir la largeur, elle sera de 100 %, puis la hauteur sera de 100 ports de hauteur. Je vais changer la couleur de fond, ça va être EEE Ensuite, je sélectionne l'emballage du formulaire, fixons-le à 60 %, puis la hauteur sera de 70 Ensuite, nous avons besoin d'une couleur de fond, elle sera blanche. Nous avons ici l'enveloppe du formulaire. Nous avons besoin d'une position absolue. Ensuite, les deux positions seront de 50 % La position de gauche sera 50 %. Et pour censurer l'élément, nous devons transformer translate -50 % et encore une fois -50 % . Comme on peut le voir, le wrapper du formulaire est placé au centre de la page Ensuite, je vais ajouter ici une ombre avec la valeur 03 Ram, six Ram. Et la couleur sera RGBA, couleur noire avec une opacité plus faible, 0,1 Nous avons ici un bel effet d'ombre Réglons le rayon de la bordure à un Ram afin d' arrondir les coins. Maintenant, l'emballage en mousse est plus beau. Ensuite, je vais sélectionner Fermer BTN et définir sa position sur absolue Ensuite, les deux positions seront de -1,5 fram. La bonne position sera également de -1,5 fram. Réglons la largeur à trois RAM. Ensuite, la hauteur sera de trois béliers. Nous avons besoin d'une couleur de fond, elle sera blanche. Ici, nous avons le bouton de fermeture en X. Réglons la bordure 2.1 Ram vendue. La couleur sera EEE. De plus, nous avons besoin d'un rayon de bordure pour arrondir l' élément. Ensuite, je vais ajouter ici une ombre de boîte d'une valeur de 0,1 à 0,1 m. La couleur sera RGBA, couleur noire avec une opacité 0,1. Nous avons également besoin d'un pointeur ici Ensuite, je vais créer un effet de survol. Sélectionnons le bouton. Avec le survol, je vais changer la couleur de fond Ça va être deux contre deux. Ensuite, il faut que la couleur soit blanche. Je vais définir la bordure sur 0,1 RAM solide et la couleur sera blanche. Ajoutons ici une transition pour rendre l'effet plus fluide. Si je survole le bouton de fermeture en X, nous arriverons ici. Effet sympa et cool. Allons-y et sélectionnons le formulaire de contact. Je vais régler la largeur à 100 %, puis la hauteur à 100 %. Réglons l'affichage Flex. Ensuite, nous avons besoin que la direction de flexion soit une colonne, nous devons aligner les éléments verticalement. Ensuite, nous devons justifier le contenu. Il y aura même de l'espace pour créer un espace événementiel entre les éléments flexibles. De plus, je vais régler la mise à 0,15 RAM sur les côtés gauche et droit Allons-y et formons un titre. Je vais régler la taille du formulaire en fonction du formulaire. Alors la couleur sera 333. Ici, nous avons le titre. Ensuite, je vais sélectionner les groupes d'entrée. Réglons avec 100 %. Ensuite, nous avons besoin de Display Flex. Je vais mettre le contenu de justification à un espace entre les deux. Nous avons également besoin d'une marge en bas, il y aura trois RAM. Les champs de saisie sont alignés. Ensuite, sélectionnons le groupe de saisie. Nous avons besoin d'une largeur de 40 RAM, alors la hauteur sera de six. Ensuite, je vais sélectionner le libellé du champ. Réglons la taille à 1,4 RAM. La couleur sera 888. Après cela, je vais sélectionner l' élément d'entrée en utilisant le champ de classe. Réglons avec 100 %, puis la hauteur sera 100 %. Ensuite, nous avons besoin d'une bordure, il n'y en aura aucune. De plus, je vais définir la bordure en bas, 2,2 m de long et la couleur sera BBB Nous aurons juste une bordure en bas. Ensuite, nous avons besoin que la taille du téléphone soit de 1,8 RAM. Ensuite, je vais régler le pudding à 0,02 Ram et à zéro. C'est tout à propos de l'élément d'entrée. Ensuite, nous avons besoin d'un champ avec un attribut placeholder. Je vais changer de couleur, passons à 222. La couleur de l' espace réservé est modifiée. Ensuite, je vais sélectionner le groupe de zones de texte. Réglons Display Flex. Nous avons besoin d'une direction flexible. Ce sera une chronique. Ensuite, je vais sélectionner le groupe de zones de texte, puis la zone de texte. Je vais régler la hauteur à 12 Ram. Nous avons besoin d'une bordure en bas. Il sera solide de 0,2 RAM, et la couleur sera BBB Ensuite, nous avons besoin d'un rembourrage sur le dessus, il y aura un Rams Je vais désactiver la fonction de redimensionnement. Nous devons définir le redimensionnement sur aucun Maintenant, nous ne pouvons plus réciter la zone de texte Ensuite, je vais sélectionner Soumettre BTN, régler avec 18 RAM, puis la hauteur sera de cinq RAM Ensuite, nous avons besoin de la couleur de fond. Je vais passer à 72 f45 A. Ensuite, supprimez la bordure par défaut. Faisons en sorte qu'il n'y en ait aucune. Je vais arrondir l'élément en utilisant le rayon de bordure 3 Ram. Changez la couleur. Il sera blanc, comme nous en avons besoin. La taille de police doit être de 1,5 RAM. Maintenant, le bouton est beaucoup plus beau. Ensuite, nous avons besoin de Box Shadow. Ce sera 0,3 RAM, un RAM, et la couleur sera 250-57-0590 et l'opacité 0,5 Nous avons également besoin du curseur pour 250-57-0590 et l'opacité 0,5 Nous avons également besoin du curseur 0,5 Nous avons également besoin OK, donc le bouton est plutôt joli. Ensuite, je vais sélectionner Soumettre BTN, puis cet élément Réglons la position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui dans ce cas est le bouton lui-même. Réglons la position à 50 %. Ensuite, la position de gauche sera à cinq images. Ensuite, nous avons besoin de transformer la translation Y -50 % afin de censurer l'élément verticalement Ensuite, je vais sélectionner Soumettre le BTN suivi de l'icône La taille de la police sera de 1,8 RAM. La position sera alors absolue. Nous devons nous positionner à 50 %, puis la bonne position sera 4,5 RAM. Et nous devons également censurer l'élément verticalement en utilisant transform translate Y -50% D'accord, après cela, je vais créer un effet de survol Sélectionnons le bouton avec le pointeur de la souris. Au survol, je vais changer la couleur de fond. Il va y en avoir 333. De plus, nous avons besoin d'un box shadow d'une valeur de 0,3 Ram, un Ram. Et la couleur sera RGBA, couleur noire avec le survol d'une opacité 0,5 fonctionne bien. Nous devons ajouter ici une transition maintenant, comme vous pouvez le voir, nous avons un effet de survol agréable et cool Survolez. Je vais déplacer l'icône. Bouton d'envoi avec le pointeur de la souris suivi de l'élément. Je vais me changer. La bonne position sera trois Ram. J'utilise également ici la transition avec la droite et la durée sera de 0,5 seconde. Une fois que je survole, la flèche se déplace vers la droite. Et en fait, cela créera cet effet de survol agréable et cool Ensuite, je vais sélectionner un contact pour le paragraphe ci-dessous. Réglons la taille du téléphone à 1,6 RAM. Alors la couleur sera 888. Ensuite, je vais sélectionner l'élément span dans le paragraphe. Changeons la couleur. Je vais utiliser ici la couleur 45. Le paragraphe a l'air plutôt sympa en fait. La prochaine chose que nous devons faire est créer un effet de mise au point. Une fois que nous nous sommes concentrés, nous devons changer la bordure en bas. Je veux dire la couleur, réglons-la sur un solide de 0,2 RAM, et la couleur sera 45. Une prochaine bordure de transition en bas d'une durée de 0,3 seconde. Nous devons également assouplir la focalisation sur les fonctions, les champs de saisie, puis nous obtiendrons cet effet agréable et cool. OK, après cela, je vais sélectionner Field focus, puis l'attribut placeholder Nous devons masquer l'espace réservé pour focaliser le champ. Réglons la couleur sur transparent. Ensuite, nous devons faire la transition entre couleur et la durée, 0,3 seconde. Une fois que nous nous sommes concentrés, l'attribut placeholder se masquera parfaitement Nous devons maintenant nous occuper des animations. Réglons l'affichage sur Aucun pour l'emballage du téléphone. Je vais ajouter de nouveaux éléments dans le fichier HTML. Appelons cela le chargement. Nous avons besoin ici d'un autre arrière-plan de chargement profond que je vais placer ici et qui sera régulier en FA. Enveloppe Fa Ensuite, je vais styliser ces éléments. Sélectionnons le chargement. Réglez la largeur à 100 %, puis la hauteur sera de 100 %. Je vais régler la position sur absolue. Ensuite, nous devons placer zéro. En position zéro, nous avons besoin de Display Flex pour centrer le contenu à l'aide du centre contenu Justify et du centre Align Items. L'élément est placé au centre. Ensuite, je vais sélectionner l'arrière-plan de chargement. Définissons la largeur. Ça va faire 12 RAM. Ensuite, la hauteur sera également de 12 RAM. Changez la couleur de fond, utilisez cette couleur ici. Ensuite, nous avons besoin d'un rayon de bordure. Ça va être un cercle. Nous avons besoin de 50 %. Ensuite, nous avons besoin box shadow d' une valeur de 0,1 m3 de RAM La couleur sera celle que nous avons utilisée récemment. Ensuite, je vais sélectionner des éléments. Passons à 12 m. Ensuite, la hauteur sera également de 12 RAM. Ensuite, il nous faut de la couleur. Ça va être blanc. Ensuite, je vais augmenter la taille du téléphone. Mettons-le sur M. Changez la position, je vais la rendre absolue. Ensuite, notre position à deux sera 50 %, la position gauche sera %. Et nous devons centrer l'élément, traduire -50 % et -50 %. Nous avons également besoin d'une flexibilité d'affichage avec le centre de contenu justifié et le centre des éléments de ligne afin de censurer l'icône à l'intérieur du Allons droit au but. OK, l'icône est plutôt jolie. Maintenant, je vais créer des cadres clés CSS avec le nom chargé à 0 %, nous avons besoin d' une largeur de 12 RAM. De plus, la hauteur sera de 12 RAM. La couleur de fond sera F45. Ensuite, à 50 %, je vais augmenter la largeur, ce sera 14 RAM. Ensuite, nous avons besoin d'une hauteur de 14 Ram. En ce qui concerne la couleur de fond, je vais utiliser F616 Appliquons ces carreaux. Nous avons besoin d'animation. Ensuite, le nom des images clés chargeant la durée sera de 0,9 seconde. Ensuite, nous devons assouplir la fonction. De plus, nous devons jouer l' animation à l'infini. Comme vous pouvez le constater, le fond est animé. Ensuite, je vais utiliser Javascript pour afficher le formulaire de contact. Créons une nouvelle variable. Ce sera le cas, sélectionnons l'icône à l' aide de la méthode de sélection de requête Nous devons vous insérer le nom de la classe en cours de chargement I. Ensuite, nous avons besoin de la deuxième variable qui sera proche de BTN. Nous allons sélectionner cet élément. Quant à la troisième variable, je vais utiliser container. Insérons votre conteneur de nom de classe. Ensuite, je vais ajouter un écouteur d'événements à l'icône avec un événement de clic De plus, nous devons passer ici la fonction de rappel qui sera exécutée une fois que nous aurons cliqué sur l'icône Je vais ajouter une nouvelle classe au conteneur en utilisant la méthode add et le nom de la classe va être changé. Dupliquons le code dont nous avons besoin ici, fermez le PTN. Une fois que nous avons cliqué sur le PTN fermé, nous devons supprimer le changement de classe du conteneur Il est maintenant temps d' utiliser le changement de classe et de définir de nouveaux styles CSS, qui seront appliqués au clic. Nous avons besoin ici d'une opacité nulle, d'une visibilité masquée. Ensuite, je vais ajouter ici l' opacité zéro et la visibilité masquée Nous devons également sélectionner un wrapper de formulaire avec changement de classe. Et nous devons rendre le formulaire visible en utilisant l'opacité 1 et la visibilité visible. Une fois que j'ai cliqué, le formulaire s'affiche. Et une fois que nous avons cliqué sur le bouton X, il se ferme. Maintenant, je vais ajouter ici une transition dont la durée totale sera de 0,3 seconde. Nous avons besoin d'une transition par défaut pour le chargement avec un délai de 0,3 seconde. Ensuite, nous avons besoin d'une transition pour le wrapper Fam. Cela va être de 0,3 seconde et le temps de retard de 0,3 seconde. Et nous avons également besoin d'une transition par défaut de 0,3 seconde. Maintenant, si je clique, le formulaire s'affichera avec l'effet Fa et tout fonctionnera correctement. bon, alors c'est tout. Passons à autre chose. 29. Project 24 - En-tête de site avec des formulaires: Très bien, il est donc temps de passer à autre chose et de commencer à créer notre prochain projet. Dans cette section, nous allons créer un en-tête de site Web avec des formulaires d'inscription et de journalisation. Le projet sera créé sur la base du HTML, du CSS et du Javascript. Allons-y donc et décrivons-le rapidement. Comme vous pouvez le voir, nous avons ici cet en-tête de site Web sympa et cool. Nous avons ici une petite navigation avec deux liens home et join. Ensuite, nous avons une bannière avec des éléments de titre, et nous avons également ici un petit logo dans le coin inférieur droit. Si je clique sur S'inscrire, nous obtiendrons ici le formulaire d'inscription. Nous avons ici deux champs de saisie différents avec deux boutons. Si je clique sur le lien de connexion, nous passerons au formulaire de connexion. Comme vous pouvez le constater, le bouton est correctement modifié. Si je clique sur S'inscrire, nous reviendrons au formulaire d'inscription. Si je clique sur Accueil, nous passerons à la bannière Ok. Cela correspond donc à ce projet. J'espère que ce sera intéressant et utile et qu'il vous plaira. Alors allons-y et commençons. J'ai préparé un nouveau dossier sur le bureau dans lequel j'ai un dossier pour les images. Allons-y et ouvrons le projet dans le code VS. Ensuite, je vais créer nos fichiers de travail pour le HTML. Ensuite, nous avons besoin d'un fichier pour CSS. Je vais créer un script. S. Ouvrons le fichier HTML d'index et créons la structure HTML de la page. Je vais changer le titre, ce sera la page de destination. Ensuite, je vais lier le lien du fichier CSS au fichier de script Java. J'ajoute ici le nom du fichier dans l'attribut source. OK, allons-y et ouvrons le projet dans le navigateur à l'aide du package Live Server. Ensuite, je vais placer le navigateur et l'éditeur côte à côte. Donc très bien, je vais visiter le CDN Phone Awesome parce que nous allons utiliser des icônes géniales pour les téléphones Copions le lien à partir d'ici. Ensuite, je vais ouvrir le tag link et coller ici le CDN. Ensuite, nous devons visiter le site Web de Google Phones. Je vais utiliser Google Phones tout au long de ce projet. Allons-y et cherchons une police appelée cabin. Nous allons sélectionner plusieurs styles différents, puis copier le lien et le coller dans l'élément principal. OK, nous sommes prêts à commencer à créer le balisage HDL. Tout d'abord, je vais ouvrir le deep tag, qui sera le conteneur. Ensuite, je vais insérer ici, un autre va atterrir dans lequel je vais créer une navigation avec la partie classe. Je vais ajouter ici une navigation dans laquelle nous allons placer un élément de lien avec le logo Cuss. Je place ici un élément d'envergure avec le Quas Circle. Ensuite, je vais ajouter ici une autre page avec le texte du logo Quas Le texte sera Go anywhere. Ensuite, nous avons besoin d'éléments de lien. Je veux dire les boutons. Le premier sera à la maison. En ce qui concerne le second, je vais placer ici, Join. Passons à la navigation. Ensuite, je vais créer la bannière. À l'intérieur de la bannière, je vais placer H un élément de titre. Ce sera explorer de nouvelles visites avec Go Anywhere. Je vais placer vos éléments de travée et me déplacer n'importe où à l'intérieur de la travée. Ensuite, je vais créer un contact. Nous avons besoin ici de trois éléments de titre avec le texte. Commencez par trois. Ensuite, je vais insérer ici H un élément de titre et créer un nouveau compte. Après les éléments d'en-tête, nous avons besoin d'un paragraphe dont le texte est déjà membre. Ensuite, nous avons besoin d'un élément de lien dans lequel je vais placer la connexion. Après le paragraphe. Nous devons créer des éléments de formulaire avec le formulaire de contact de classe. Débarrassons-nous de l' attribut action dans le formulaire. Je vais créer un groupe de saisie dans lequel nous aurons des éléments de saisie avec le type text, avec l'attribut placeholder Ce sera le prénom. Mais ensuite, nous avons besoin d'éléments dont la classe est un utilisateur solide. Dupliquons le groupe de saisie plusieurs fois. Le deuxième sera le nom de famille. Pour le troisième , je vais insérer votre adresse e-mail. Nous devons changer de type. Il s'agira d'un e-mail comme pour le téléphone ou de quelques icônes. Quant au quatrième élément dont nous avons besoin ici, mot de passe. Changeons le type. Ce sera un verrouillage par mot de passe. Ensuite, je vais créer un groupe PTN dans lequel nous aurons deux boutons différents Créons un bouton avec le contact de classe BTN et je vais également ajouter ici un attribut de type Ce sera le bouton suivant. Je vais insérer ici la méthode de changement. En ce qui concerne le deuxième bouton, je vais ajouter ici créer un compte. OK, c'est tout à propos du formulaire. Créons un logo en bas. Tout est prêt et nous pouvons commencer à écrire le CSS. Je vais sélectionner chaque élément à l'aide d'un disque principal. Réglons ensuite la marge et le rembourrage, tous deux à zéro Ensuite, je vais définir la propriété de taille de la boîte, ce sera la zone de bordure. Ensuite, il faut que la décoration du texte soit nulle. De plus, je vais mettre les grandes lignes à néant. Enfin, je vais définir la famille de téléphones. Ce sera le chalet Sanerif. Ensuite, je vais définir la taille du téléphone. Ensuite, je vais définir la taille du téléphone de l'élément H on. Je vais le régler à 62,5 % afin d'utiliser m comme unité de mesure Dans ce cas, un m sera égal à dix pixels. Après cela, prenons soin du conteneur. Je vais définir la largeur. Ce sera 100 % Quant à la hauteur, je vais la régler à 100 VH. Je veux dire la hauteur de la fenêtre d'affichage. Changeons la couleur de fond. Ce sera 525561. Ensuite, je vais régler l'affichage sur flex. Nous allons déplacer le contenu vers le centre à l'aide d'un centre de contenu de justification et d'un centre d'éléments de ligne. Comme vous pouvez le constater, le contenu est placé au centre de la page. Ensuite, allons-y et sélectionnons l'atterrissage. Je vais définir la hauteur maximale. La largeur va être de 95 % Quant à la hauteur, je vais la régler à 90 % Ensuite, nous devons définir l'arrière-plan. Utilisons le dégradé linéaire. La transition s'orientera vers deux droits. Ensuite, nous avons besoin de la couleur RGB 309-40-2505 Nous avons besoin ici d' valeur en pourcentage de 40 %. Ensuite, la couleur suivante sera RGBA 309-40-2505. La même couleur mais avec opacité de 0,8. Ensuite, nous devons une valeur en pourcentage de 40 %. Ensuite, la couleur suivante sera RGBA 309-40-2505. La même couleur mais avec une opacité de 0,8. Ensuite, nous devons définir l'URL de l'image d'arrière-plan. Sélectionnons l'image dans le dossier des images. Ensuite, nous avons besoin du centre de la position et de l'absence de répétition. Nous devons également définir la propriété de taille d'arrière-plan avec une valeur de couverture. OK, nous avons ici ce joli décor cool pour l'atterrissage. Ajoutons un rayon de bordure pour l'atterrissage, faisons-en deux Ram. De plus, nous avons besoin de box shadow avec les valeurs 01 Ram, cinq Ram. Et la couleur sera RGBA, couleur noire avec une opacité de 0,4 Très bien, ensuite allons-y et sélectionnons Bannière Je vais le masquer en utilisant Display None, puis je vais sélectionner Contact et le masquer également. Passons maintenant à la navigation. Je vais sélectionner, maintenant réglons la position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent. Ensuite, je vais mettre la position à zéro. La position de gauche sera alors nulle. Ensuite, nous avons besoin de largeur, elle sera de 30 %, la hauteur sera 12 h 00 . Ensuite, je vais changer la couleur de fond. Il va être rouge pendant un moment. Nous avons ici la navigation. Débarrassons-nous de la couleur de fond. Ensuite, nous avons besoin de la navigation. Je vais définir la largeur à 100 %, puis la hauteur à 100 %. Réglons l'affichage pour qu'il soit flexible et nous devons justifier l'espace de contenu entre les deux. Et alignez également les éléments au centre afin de les centrer verticalement. Ensuite, je vais créer de l'espace en utilisant un rembourrage, cadre zéro fi, les liens sont bien alignés Occupons-nous du logo. Je vais régler l' affichage sur flex. Ensuite, nous avons besoin d'un cercle. Mettons-nous avec trois RAM. Ensuite, la hauteur sera de trois béliers. Je vais changer la couleur de fond. La couleur sera 1d95, c'est une couleur bleue Réglons ensuite le rayon de la bordure à 50 %. Pour créer le cercle, nous avons également besoin d'une marge sur le côté droit, un Ram. Voici le cercle. Ensuite, je vais sélectionner du texte. Réglons la taille à deux RAM. Le poids du téléphone sera de 400, qui crée également un espace entre les lettres. Ensuite, nous avons besoin de couleur. Ça va être blanc. Voici le texte. Je vais les aligner au centre en utilisant le centre Align Items. Maintenant, le logo et le texte sont parfaitement alignés. Ensuite, je vais m' occuper de l'article. Réglons la taille de police sur 1,6 Ramon. Le poids va être audacieux. Nous avons également besoin ici de la couleur 6967. Nous avons ici les éléments de navigation. Sélectionnons l' élément de navigation avec le pointeur de la souris. Je vais changer la couleur au survol. Ce sera CCC. Nous avons également besoin d'une transition afin de rendre les effets de survol plus fluides Une fois que je survole, les objets Nova changeront de couleur. Ensuite, je vais m' occuper de la bannière, qui est actuellement masquée. Réglons la position sur absolue. Ensuite, nous devons nous positionner, ce sera 30 %, puis la position de gauche sera de 5 %. La bannière est alignée. Ensuite, je vais prendre l'élément de titre H un. Réglons la taille de police sur cinq, puis le poids du téléphone sera de 300. Changez de couleur, je vais le rendre blanc. Ensuite, je vais prendre l'élément span. Nous avons besoin d'un bloc d'affichage. Ensuite, je vais augmenter la taille du téléphone. Il y aura sept Ram. Ensuite, nous avons besoin du poids de police. Mettons-le en gras. Je vais aligner le texte au centre, puis je vais le transformer en majuscules. Ensuite, je vais changer de couleur. Ça va être bleu. Nous avons également besoin d'une marge en haut. Réglons-le sur six RAM. Enfin, je vais ajouter un effet d'ombre. Réglons l'ombre du texte à 01 RAM. Trois RAM et la couleur sera noire avec une opacité de 0,2 OK, donc la bannière est plutôt jolie Ensuite, je vais ajouter ici n'en afficher aucun pendant un moment car nous allons nous occuper de la section contact. Débarrassons-nous de Display None à partir d'ici. Définissez la position deux, absolue, puis nous devons positionner 25 %, puis la position gauche sera 5 %. Comme vous pouvez le voir, le formulaire est bien placé. Ensuite, nous devons contacter H 3. Réglons la taille de police à 1,6 RAM, soit la transformation du texte. Ce sera en majuscules. Je vais changer de couleur Utilisons cette couleur grise. Dupliquons ce code, changeons le sélecteur dont nous avons besoin ici H un élément de titre. Je vais augmenter la taille du téléphone. Réglons-le sur 4,5 RAM. Débarrassez-vous ensuite de la transformation du texte et définissez le poids de la police en gras. Ensuite, la couleur sera blanche. Ensuite, nous avons besoin de l'espacement. Réglons-le sur 2,2 RAM. Je vais fixer la marge à deux RAM et zéro. Le deuxième titre semble plutôt sympa. Ensuite, sélectionnons le paragraphe, la taille de police à 1,5 Ensuite, nous avons besoin d'un poids, il va être en gras. Ensuite, je mets la couleur sur le gris. Nous avons besoin d'une marge en bas, il y aura trois béliers. Je vais maintenant m'occuper du lien qui se trouve à l'intérieur du paragraphe. Réglons la couleur sur le bleu. Bien, voyons voir le paragraphe suivant. Nous devons prendre soin des champs de saisie. Sélectionnons le groupe de saisie. Je vais régler la largeur à 40 RAM. Ensuite, la hauteur sera de 4,5 RAM. Ensuite, nous avons besoin d'une marge, elle sera de 20. Ensuite, je vais sélectionner les éléments d'entrée. Réglons la largeur à 100 %, puis la hauteur sera 100 %. Ensuite, il faut une couleur de fond. Je vais définir la couleur de fond 2323644. Ensuite, il faut que la frontière soit nulle. De plus, je vais régler le rayon de bordure à 1,5 RAM. Ensuite, nous devons le mettre, il y aura un Ram et deux Ram. Les champs de saisie sont bien meilleurs. Ensuite, je vais ajouter de la couleur ici. Ce sera CCC. Nous avons également besoin d'une taille de téléphone 1.4 Ram. Ensuite, je vais copier le sélecteur et ajouter ici une pseudo classe de focus sur le focus Je vais changer la bordure en fonction du focus. Je vais changer la couleur de fond. Ça va faire 344 heures. Nous devons également changer la frontière. Réglons-le sur 0,2 RAM solide, et la couleur sera bleue. Une fois que nous nous sommes concentrés, nous obtiendrons cet effet agréable et cool. Bien, après ça, je vais m' occuper des icônes du téléphone. Réglons la position sur absolue. Ensuite, nous devons nous positionner par rapport aux éléments parents qui sont le groupe d'entrée. Réglons la bonne position sur deux RAM car deux positions seront égales à 50 %. Et nous devons censurer les icônes verticalement en utilisant transform translate Y -50 %. Ensuite, définissons la taille de police sur 1,4 Changez également la couleur. Je vais le faire CCC. Comme vous pouvez le constater, les icônes sont plutôt jolies. Ensuite, nous devons prendre soin des boutons. Réglons avec 240 Ram, alors la hauteur sera de cinq Ram. Nous devons également afficher Flex justify. Le contenu sera un espace entre les deux, puis nous avons besoin d'une marge en haut, les boutons sont bien alignés. Nous devons maintenant personnaliser chacun d'entre eux. Nous allons sélectionner Contact. Si Btn est réglé à 46 %, la hauteur sera de 100 %. Ajoutons ici le rayon de bordure, ce sera quatre RAM Ensuite, il nous faut de la couleur, ce sera du blanc. Je vais définir la bordure sur non. Ensuite, nous avons besoin de la taille de police, elle sera de 1,5 RAM. Réglons le poids de la police sur le tracé. Changez également le curseur, faites-en un pointeur. En fait, nous avons besoin ici de couleur, pas de colonnes. Ensuite, nous devons changer la couleur d'arrière-plan de chaque bouton séparément. Sélectionnons le premier. Je vais définir la couleur de fond sur le gris. Pour ce qui est du deuxième bouton, je vais rendre son fond bleu. Les boutons sont jolis. Ensuite, je vais sélectionner le logo en bas. Réglons la position sur Absolute. Ensuite, nous avons besoin d'une position inférieure, il y aura trois RAM. Je vais régler la bonne position avec trois RAM. Ensuite, nous avons besoin de largeur, ce sera six RAM. La hauteur sera également de six béliers. Nous devons transformer les éléments en cercle, nous avons donc besoin d'un rayon de bordure 50 % et également de revenir à la couleur, de la rendre bleue. Ensuite, nous avons besoin de box shadow avec les valeurs 01 Ram, cinq Ram, et la couleur sera RBA, couleur noire avec une opacité 0,3. Ici, nous avons le logo dans le coin inférieur droit Maintenant, je vais réafficher la bannière et masquer la section contact en utilisant l' opacité zéro et la visibilité masquée Il est maintenant temps d'écrire du Javascript. Créons une nouvelle variable. Ce sera un conteneur. Je vais sélectionner le conteneur en utilisant la méthode du sélecteur de requête Nous devons spécifier ici le conteneur du nom de classe. Ensuite, nous devons sélectionner le bouton de connexion. Nous allons sélectionner cet élément. Nous devons placer ici barre de navigation avec le sélecteur du neuvième enfant Il y en aura trois. Maintenant, je vais ajouter un écouteur d'événements au bouton joint avec un événement de clic avec une fonction de rappel qui sera exécutée une fois que nous aurons cliqué sur l'élément de lien Je vais ajouter une nouvelle classe au conteneur en utilisant une méthode. Cette classe va être modifiée. Je vais maintenant utiliser le changement de classe et créer de nouveaux styles qui seront appliqués. Une fois que nous avons cliqué sur le lien, nous devons le sélectionner et le réafficher en utilisant l'opacité 1 et la visibilité visible Je vais ajouter ici une transition avec des valeurs toutes 0,5 seconde et avec un temps de retard de 0,5 seconde. Copions la transition et ajoutons-la au contact par défaut. Ensuite, nous devons sélectionner la bannière avec changement de classe car nous devons masquer la bannière. Une fois que nous avons cliqué sur le lien, définissons l'opacité à zéro et la visibilité à masquée Nous devons ajouter ici toutes les transitions de 0,5 seconde. Encore une fois, nous avons besoin d'une transition par défaut, mais avec un certain délai. Une fois que j'ai cliqué, le formulaire de contact s'affiche. Ensuite, je vais créer une nouvelle variable. Ce sera la maison BTN. Nous allons sélectionner cet élément. Nous devons modifier le sélecteur d'enfants. Il va y en avoir deux. Ensuite, je vais dupliquer ce code, changer le bas. Nous avons besoin d'elle chez nous. Une fois que nous avons cliqué sur le bouton Accueil, nous devons supprimer le changement de classe du conteneur afin de réafficher la bannière. Une fois que nous avons cliqué sur Accueil, la bannière s'affichera à nouveau et le formulaire d'inscription sera masqué. Ensuite, je vais créer une nouvelle variable. Ce sera le login BTN. Je parle du lien de connexion que nous avons dans le paragraphe. Nous allons sélectionner cet élément. Je vais ajouter un écouteur d' événements au bouton de connexion avec nouveau clic sur un événement et une fonction de rappel Une fois que nous avons cliqué sur le bouton de connexion, nous devons ajouter une nouvelle classe au conteneur. Et ça va être le cas, nous avons utilisé ici la méthode togal. Sélectionnons la hauteur, puis le groupe de saisie avec le graphique, sélectionnons-en un. Et nous avons également besoin de la même chose pour le deuxième élément. Nous devons masquer ces champs de saisie. Une fois que nous avons cliqué sur Se connecter, les deux premiers champs de saisie le seront. Ensuite, nous avons besoin d' un point d'interrogation. Si la déclaration est vraie, nous devons modifier le contenu du texte du bouton de connexion pour nous inscrire. Si c'est faux, nous devons faire en sorte que le contenu textuel du bouton de connexion se connecte. Si je clique sur le BTN de connexion, le texte de l' enregistrement changera Nous avons également besoin de la même chose pour le bouton. Contactons PTN, changeons le nom de la classe Nous avons besoin ici d'un sélecteur de graphiques. Nous devons sélectionner le deuxième bouton. Je vais m'en servir ici, opérateur. Nous devons modifier le contenu du texte du contact BTN, le connecter Nous avons besoin de la même chose ici également. Nous devons modifier le contenu du texte du BTN et lui faire créer un compte Allons-y et vérifions ce que nous avons ici. Cliquez sur Rejoindre, puis passons à la journalisation. Comme vous pouvez le constater, le contenu du bouton est modifié. Très bien, donc tout est plutôt beau et fonctionne parfaitement. Passons à autre chose. 30. Project 25 - Cartes de prix: Bonjour et bienvenue dans nos prochains projets. Dans cette section, nous allons créer des cartes de prix modernes et sympas. Le projet sera créé sur la base du HTML et du CSS. Comme vous pouvez le voir, nous avons ici trois cartes différentes avec des effets de dégradé sympas et sympas. Chaque carte comporte plusieurs parties différentes, telles que le type, les caractéristiques de prix , le bouton d' achat, etc. Si je recharge la page, les cartes apparaîtront avec effet de décoloration agréable et cool De nos jours, de nombreux sites Web ont besoin de telles sections. Je pense que le projet sera intéressant et utile. Alors allons-y et commençons. J'ai créé un nouveau dossier sur le bureau, qui est actuellement vide. Allons-y, ouvrons le projet dans le code VS, puis créons nos fichiers de travail. Nous avons besoin de deux fichiers, l'index HTML et le style CSS. Ouvrons le fichier HTML d'index et créons les documents HTML de base Tout d'abord, je vais changer le titre. Ce seront des cartes de tarification. Ensuite, je vais lier le fichier CSS. Nous devons également ouvrir le projet dans le navigateur à l'aide du serveur live. Mettons le navigateur et l'éditeur côte à côte. Ensuite, je vais visiter le CDN des téléphones, car nous allons utiliser des icônes phonesome tout au long de ce projet Copions le lien à partir d'ici. Ensuite, nous devons ouvrir la balise link dans l'élément principal et coller le CDN. En plus de cela, je vais prendre des téléphones Google. Visitons le site Web de Google Phones, puis recherchons Pound appelée Sophia Sons. Allons-y, sélectionnons quelques styles différents, puis copions le lien et collez-le dans l'élément principal. OK, nous sommes prêts à commencer à écrire le balisage HTML. Je vais ouvrir De Tu, qui sera le conteneur à l'intérieur des profondeurs. Je vais créer des cartes de prix, ce sera l'emballage. Ensuite, nous avons besoin de la carte de tarification elle-même dans laquelle nous aurons le type de carte. Ça va être basique. Ensuite, je vais assurer H un élément de titre avec le prix de la carte de classe, ce sera 14,90 $ (9$). Ensuite, je vais assurer H trois éléments de titre avec le Ça va faire un mois. Ensuite, nous avons besoin d'ici où je vais insérer quelques éléments de liste. Je vais insérer ici, suivre une icône, ce sera une solide case A. Ensuite, je vais insérer votre panneau. Ça va être un texto factice. Dupliquons l' article plusieurs fois. Je vais changer le nom de classe pour le phonosomeicon pour trois éléments, je suis dans les trois derniers Ensuite, je vais assurer le bouton. Ce sera la carte PTN. Nous avons également besoin ici d' un type qui sera un bouton. Je vais maintenant assurer le texte. De plus, nous avons besoin du fond de votre carte avec le texte. Joignez-vous à nous. OK. Voilà, c'est tout pour la carte. Je vais le dupliquer deux fois parce que nous allons avoir trois cartes différentes. Dupliquons-le , puis apportons quelques modifications. Le second sera standard, et le prix sera différent 24,99€ Je vais changer de phonémique Ensuite, nous aurons une prime avec un prix différent pour 9,99€ Encore une fois, je vais changer la phonétique dont nous avons besoin ici, des chèques au lieu du point X. En fait, les trois cartes sont créées. Je suis dans le balisage HD et maintenant nous pouvons commencer à écrire le CSS Allons-y et sélectionnons chaque élément. Comme d'habitude, je vais mettre la marge et le rembourrage à zéro Ensuite, je vais définir la taille de la boîte. Ce sera une zone frontalière Nous avons également besoin de sa famille de téléphone. Réglons-le sur Sophia San San Serif. Ensuite, je vais régler la taille de téléphone de l'élément HTML à 62,5 %, car nous allons l'utiliser comme unité de mesure Dans ce cas, un m sera égal à dix pixels. Ensuite, je vais commencer à personnaliser le conteneur. Réglons sa largeur à 100 %. Ensuite, la hauteur sera de 100 % de la hauteur de la fenêtre d'affichage Ensuite, je vais changer l'arrière-plan. Utilisons le dégradé linéaire. La direction sera deux à gauche. Ensuite, nous avons besoin de la première couleur, elle sera 1d33 58 Ensuite, la couleur suivante sera 14278. Nous avons également besoin ici de la troisième couleur, qui sera Oe138 En fait, nous devons en changer deux. Comme vous pouvez le constater, nous avons ici un arrière-plan agréable et cool avec des infections de grade. Ensuite, je vais configurer Display Reflex, car nous allons centrer le contenu en utilisant un centre contenu justifié et un centre d'éléments de ligne. Comme vous pouvez le constater, le contenu est placé au centre. Ensuite, je vais m' occuper de l'emballage. Je suis inscrit dans les fiches de prix. Passons à 80 %. Ensuite, nous avons besoin de Flexbooks. Réglons le contenu de justification de manière à ce qu'il soit espacé de manière uniforme. Comme vous pouvez le constater, les cartes sont bien alignées. Ensuite, je vais sélectionner la carte elle-même. Mettons-nous au point avec 230 RAM. Ensuite, la hauteur sera de 50 Ram. Changeons le fond. Je vais utiliser un dégradé linéaire. La direction va être deux, non ? Et la première couleur sera 1254. Ensuite, la couleur suivante sera F139. Nous avons ici les arrière-plans des cartes. Ensuite, je vais régler le rayon de bordure à 1,5 RAM, puis un RAM, puis 1,5 RAM, et encore 1,5 RAM. Ensuite, je vais définir l'ombre de la boîte avec les valeurs 01 Ram, six Ram, et la couleur sera R pour être une couleur noire avec une opacité 0,4. Ici, nous avons l'ombre Ensuite, je vais utiliser des livres flexibles. Définissons la direction de la colonne suivante. Nous devons justifier le contenu avec un espace de valeur uniforme. En ce qui concerne les éléments de la ligne, je vais les placer au centre. Passons ensuite du pointeur au pointeur. Comme vous pouvez le constater, les éléments sont alignés à l'intérieur de la carte. Allons-y et commençons par le type de carte que je vais définir avec 222 RAM. Ensuite, la hauteur sera de quatre béliers. Nous avons également besoin ici de la couleur de fond. Ce sera CCC. Utilisez cette couleur uniquement pour des raisons temporaires. Ensuite, je vais utiliser la fonction transform rotate Z avec la valeur -90 degrés, l'élément est pivoté Réglons la position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui est la carte. Réglons la position sur 12 RAM. Quant à la position, je vais la régler sur -13 Ram Comme vous pouvez le constater, l' élément est bien aligné. Ensuite, fixons le rayon de bordure à 2,5 Fram. Ensuite, nous avons besoin de 2,5 fram, 0,0 L'élément est devenu arrondi Ensuite, fixons la taille de police à 2,2 RAM. Ensuite, le poids de la police sera en gras. Je vais augmenter l'espace entre les lettres. Utilisons ensuite Text Transform Make au cas par cas. Ensuite, je vais mettre la couleur sur le blanc. Ensuite, nous avons besoin d'une boîte flexible pour centrer le texte à l'intérieur l'élément en utilisant justify concenter et aligner les éléments au centre. Je vais maintenant régler box shadow avec les mêmes valeurs que celles que nous avons utilisées pour la carte. Changeons l'opacité. Ce sera 0,3. Nous avons ici l'effet d'ombre. Ensuite, je vais dupliquer type de carte et changer le nom de la classe sera en bas de la carte. De plus, nous devons nous débarrasser de la propriété gauche au lieu de la propriété supérieure, nous avons besoin de la partie inférieure et la valeur sera de moins quatre RAM. Ensuite, je vais me débarrasser de transform Rotate. Nous devons également modifier le rayon de la frontière. Nous avons besoin de 00, puis de ces deux valeurs. La partie inférieure est plutôt jolie. Ensuite, je vais sélectionner la carte de tarification, puis le sélecteur graphique Il nous faut le premier. Ensuite, nous avons besoin fond de votre carte. Nous devons changer le fond. Je vais utiliser un dégradé linéaire. La direction sera également la bonne. En ce qui concerne les couleurs, la première sera f6od C, puis nous aurons ici La première carte est plutôt jolie. Dupliquons ce code deux fois, changeons les sélecteurs, les couleurs de la deuxième carte seront df3b, comme la deuxième couleur sera 6615d Occupons-nous de la troisième carte. Le premier appelant sera OD9fc. Appelons le deuxième appelant. Je vais insérer ici, 174 FF. C'est bon. Les trois cartes sont donc personnalisées. Je parle de ces deux éléments. Ensuite, nous avons besoin du prix de la carte. Je vais régler la taille du téléphone à sept, puis le poids du téléphone sera de 300. Ensuite, je vais sélectionner le mois. Réglons la taille du téléphone en fonction des Rams. Nous avons besoin du poids de votre téléphone, 300. Ensuite, je vais me mettre en marche au sommet. Il y aura moins quatre RAM. Je vais déplacer l'élément vers le haut. Ensuite, nous avons besoin du moins d'éléments, passons à 30. Ensuite, la hauteur sera de m. Nous avons besoin d'une boîte flexible. Mettons le contenu de justification au centre. En ce qui concerne les articles des compagnies aériennes, ils seront également au centre pour qu' ils soient bien alignés. Ensuite, je vais m'occuper du moins d' objets avec un sélecteur pour enfants, nous avons besoin d'objets étranges Définissons la couleur d'arrière-plan deux, RGBA 91233 et l'Opacité 0.5 Ensuite, je vais Passons à deux RAM. Alors il faut que Texiline soit au centre. Je vais également régler la taille du téléphone à 1,8 RAM. Ensuite, nous avons besoin d'une marge sur le côté droit, réglons-la sur un RAM. Ensuite, je vais prendre l'élément span. Réglons la taille du téléphone à 1,4 RAM. Ensuite, nous avons besoin que la transformation du texte soit en majuscules. Ensuite, je vais d'abord sélectionner une carte avec sélecteur pour enfants, puis nous avons besoin du prix de la carte Répliquons-le trois fois. Nous avons besoin d'ici un mois, car je vais en utiliser le moins possible. Et enfin, nous avons besoin de l'élément span. Nous allons changer la couleur du texte avec des effets de dégradé. Réglons en arrière-plan cette valeur que nous avons utilisée pour la première carte. En plus de cela, nous avons besoin d' clip de fond de clé Web. Ça va être un texto. De plus, je vais utiliser la couleur du champ de texte de la clé Web et il sera transparent, comme vous pouvez le voir, le texte de la première carte est plutôt joli. Dupliquons-le deux fois. Modifiez les sélecteurs du graphique. Il nous faut le deuxième, puis le troisième. Je vais prendre les fonds d'écran appropriés pour la deuxième carte, mais aussi pour la troisième carte. Comme vous pouvez le voir maintenant, le texte des cartes est plutôt joli. Ensuite, nous devons prendre soin des boutons. Réglons avec 212 grammes, alors la hauteur sera de trois béliers. Je vais mettre la transformation du texte en majuscules. Ensuite, nous avons besoin d'un rayon de bordure, ce sera trois RAM. Ensuite, nous n'avons besoin d'aucune bordure. Je vais changer de couleur et le rendre blanc. Ensuite, nous avons besoin de l'espacement entre les lettres. Ce sera 0,1 Ram. Changez ensuite de point de cap. Comme pour les autres éléments, nous devons modifier les arrière-plans des bosons séparément. Prenons l'arrière-plan pour le premier, puis dupliquons ce code deux fois, changeons les sélecteurs et utilisons également les arrière-plans appropriés pour le deuxième en bas et le troisième En fait, nous avons ici un petit problème. Nous utilisons les mêmes arrière-plans pour les deuxième et troisième cartes. Alors allons-y et résolvons ce problème. Nous devons récupérer le code au lieu de celui-ci, et nous devons faire de même pour les matraques OK, maintenant tout a l'air génial. Je vais maintenant créer l'effet de fondu. Nous devons cacher les cartes. Créons des images clés Ess avec le nom Anim one à 0 %. Je vais définir la transformation pour traduire x -15 Nous avons également besoin d'une opacité nulle et d'une visibilité masquée. Ensuite, à 100 %, nous avons besoin des mêmes propriétés avec les valeurs suivantes. Translate x sera égal à zéro, quant à l'opacité, elle sera égale à un Ensuite, nous avons besoin d' une visibilité visible. Sélectionnons la première carte et utilisons ces propriétés par défaut. Et nous avons également besoin d'une animation avec la carte de valeurs 1, qui est le nom des images-clés. Ensuite, nous avons besoin de durée. Cela va prendre 1 seconde, puis le délai d'une seconde. Nous avons également besoin de lignes linéaires et avancées. La première carte fonctionne bien. Faisons de même pour le reste des cartes. Je vais dupliquer ce code deux fois, puis changer de sélecteur Nous devons également traduire x en traduction Y. Le nom sera alors la carte deux Nous avons besoin ici de y au lieu de x. Quant au troisième élément, nous traduisons x sans moins, le nom sera alors la carte trois. Encore une fois, débarrassez-vous des inconvénients. En fait, nous avons besoin ici de 15 RAM sans inconvénient. Maintenant, tout semble et fonctionne très bien. Ça y est, nous en avons terminé avec ce projet. Passons à autre chose.