Créer 5 modèles de design d'interface utilisateur complets et modernes

1. Introduction: Bienvenue dans ce tout nouveau cours, où vous apprendrez à créer modèles de conception modernes et esthétiques pour vos Si vous souhaitez créer et personnaliser votre portefeuille, devenez un développeur et un designer expérimenté et faites-vous embaucher. Alors c'est le cours qu'il vous faut. Construira ensemble cinq sites Web réactifs complets et modernes avec trois technologies de base, HTML, CSS et JavaScript. Si vous avez des connaissances de base sur ces technologies. Et vous avez toujours du mal à créer les sites Web. Ou si vous souhaitez améliorer vos compétences de développeur et de designer, vous êtes au bon endroit. Nous avons créé ce cours pour offrir aux étudiants la meilleure expérience possible dans trois technologies de base et leur permettre de créer les modèles les mieux conçus qui enthousiasmeront leurs clients Qui créera cinq sites Web complets différents. Et pas seulement les pièces reproduites à partir de zéro, elles regorgeront d' effets et de designs modernes, agréables et beaux. Nous commencerons par des projets relativement simples, et nous passerons également en revue certaines parties avancées. Grâce à ce cours, vous pouvez obtenir les inspirations qui vous aideront à améliorer vos projets et à les intégrer à votre portfolio. Maîtriser uniquement ces technologies de base du développement Web frontal Vous pouvez créer des thèmes géniaux et modernes et simplement vous faire embaucher. De plus, vous aurez suffisamment de connaissances pour passer à autre chose et apprendre d'autres technologies, comme certains frameworks et bibliothèques frontaux, qui sont aujourd'hui très populaires et très demandés. Joints 2. À propos des projets: Bonjour et bienvenue au cours. Nous sommes heureux de vous voir ici. Comme vous le savez déjà, nous allons créer cinq sites Web réactifs complets différents en utilisant HTML, CSS et JavaScript. Dans cette vidéo, nous allons passer en revue chacune d'elles. Je voudrais mentionner une chose. Comme nous l'avons dit, les projets seront créés sur la base de trois technologies de base, HTML, CSS et JavaScript. Vous devez donc avoir une bonne compréhension du HTML et CSS ainsi que des connaissances de base en JavaScript pour pouvoir suivre les cours. Très bien, alors allons-y et décrivons les projets. Notre premier projet sera un site Web sur le mobilier. Le projet va être simple. Nous n'utiliserons que du HTML et du CSS. Mais je pense que vous allez l' apprécier car le projet est moderne et beau. Allons-y et décrivons le projet. Il se composera de deux sections différentes. Cela commencera par une navigation, qui inclura quelques éléments différents tels qu'un logo, une barre de recherche, quelques icônes dans les éléments de navigation. La navigation sera suivie de l'en-tête du site Web. Il a un fond bleu et belle bannière avec du texte et des boutons. Ensuite, nous avons une section de projet qui comprend deux rubriques différentes Et puis nous avons six cartes avec de belles icônes. Si nous survolons les icônes, nous aurons un effet agréable et fluide Après cela, nous allons créer une section de tarification. Cette section comportera deux parties différentes. La première partie comprend l' image, le titre et le bas. En ce qui concerne la deuxième partie, vous trouverez vos six voitures de tarification différentes avec un bel effet de surenchère. Ensuite, nous avons une section blog où vous pouvez trouver un magazine et des articles sur les tendances. La section blog est suivie de la section Contact. Enfin, nous avons ici un pied de page du site Web simple et agréable Très bien, ce sont donc les sections de notre premier site Web. Chaque projet du cours s'adapte à différentes tailles d'écran. Si j'inspecte la page, passe en mode réactif et vérifie le projet en quatre tailles d'écran différentes. Vous constaterez que le projet est réactif et qu'il s'affiche bien sur toutes les tailles d'écran. Les projets du cours sont créés pour des écrans de très grande taille. Je veux dire, cela coïncide avec 1920 pixels de largeur et 1080 pixels de hauteur Donc, si vous utilisez une taille d'écran relativement plus petite, vous devez passer en mode réactif pendant les cours et spécifier la largeur et la hauteur de cette manière. Sinon, le projet ne s'affichera pas correctement sur un écran plus petit tant que nous ne le rendrons pas réactif. Veuillez donc en tenir compte. D'accord, donc le prochain projet sera un site Web de portfolio personnel. De nos jours, ce type de site Web est très populaire et très demandé, donc je pense qu'il sera intéressant pour vous. Le projet concerne donc un développeur Web avec toutes ses compétences, travaux, ses projets, son contexte, etc. Allons-y et décrivons le projet. Nous avons donc ici un en-tête du site Web dans lequel nous avons un logo, une bannière et une icône du menu Hamburger Si je clique dessus, mec, la navigation apparaîtra avec de jolis effets. La bannière se compose de plusieurs éléments différents, dont l'image d'un développeur. X, nous avons une section sur les compétences qui nous montre les technologies et le niveau de connaissances d'un développeur Web. La section Compétences est suivie de la section Projet où vous pouvez trouver différentes œuvres d'un développeur. Ensuite, nous avons ici une section de contact avec quelques coordonnées et des champs de saisie. Et enfin, vous pouvez le retrouver dans un pied de page simple et sympa. Le prochain projet sera un site Web sur l'architecture. Le projet comprend deux sections différentes. Nous allons commencer à créer le projet en travaillant sur la barre de navigation et la navigation Nous avons ici le logo, la barre de recherche et l'icône du menu Hamburger Si je clique dessus, la navigation s'affichera correctement. Si je passe la souris sur les éléments de navigation, nous vous donnerons cet effet sympa et cool Après la navigation, nous allons créer cette bannière simple et agréable dans laquelle nous avons quelques éléments différents. Le binaire est suivi d'une section À propos composée de deux parties. Sur le côté gauche, nous avons quelques éléments de texte et le bouton, comme sur le côté droit, se compose d'un cadre et d'une image. Et en plus de cela, nous avons ici une partie sympa et cool au bas de cette section. Ensuite, nous avons la section des projets, qui comprend cinq cartes avec de jolis effets de survol Vient ensuite la section Clients, qui se compose de deux cartes différentes. Ensuite, nous avons une section de contact et un simple pied de page ci-dessous. Très bien, nous allons ensuite créer un site Web de designer d'intérieur Ce domaine est très populaire et très demandé aujourd'hui. Je pense donc que ce type de site Web sera intéressant et utile pour vous. Nous avons ici un en-tête du site Web qui inclut le logo, l'icône du menu Hamburger, puis la bannière animée Si je clique sur l'icône du menu, la navigation s' affichera correctement. Les binaires Animés, comme vous pouvez le voir, les éléments de texte changent avec quelques effets de fondu Ensuite, nous avons la section À propos, qui s'affiche bien avec un effet de fondu. Nous allons utiliser cet effet pour chaque section de ce projet. La section À propos comprend une image et quelques détails sur le designer. Ensuite, nous avons la section Services qui nous montre ce que le designer peut offrir. Après cela, vous pouvez trouver les projets du designer. Je suis dans le portfolio de ses œuvres. Vient ensuite la section des succès dans laquelle nous avons des compteurs animés Et enfin, vous pouvez trouver ici un pied de page simple et sympa. Très bien, le dernier projet et ce cours seront donc un site Web sur les cafés Le projet se composera de deux parties différentes et sera plein de designs et de fonctionnalités modernes . Nous allons commencer par une navigation qui est fixée en haut de la page. Une fois que nous faisons défiler la page vers le bas, il changera d'arrière-plan. Après la navigation , la bannière, qui comporte un diaporama, fonctionnera qui comporte un diaporama Nous allons utiliser l' un des plug-ins appelé swipe integer Oui On peut voir que le diaporama fonctionne automatiquement Mais en plus de cela, vous pouvez utiliser ces manettes. Et vous pouvez également faire glisser les diapositives avec une souris. OK, nous avons ensuite dans la section À propos avec quelques informations. Cette section est suivie d'un menu. Ensuite, nous avons quelques données avec des compteurs animés et de jolis effets La section suivante portera sur les clients que nous avons ici, les opinions des clients classées par coût. Vient ensuite la section Contact où vous pouvez contacter la maison ou réserver une table. Et enfin, nous avons ici un simple pied de page. Très bien, c'est tout pour nos projets. J'espère qu'ils vous plairont. Apprenez quelque chose de nouveau et inspirez-vous pour améliorer votre propre portfolio. Passons à autre chose. 3. Configuration: Bonjour et bienvenue au cours. Nous sommes heureux que vous soyez ici et nous espérons que vous apprécierez le cours avant d' approfondir et de commencer à créer nos projets. Tout d'abord, nous devons préparer notre environnement de travail. Je suis sûr que la plupart d'entre vous sont déjà prêts à écrire le code. Si c'est le cas, n'hésitez pas à ignorer cette vidéo et à vous lancer immédiatement dans les projets. Mais si ce n'est pas le cas, ce n'est pas le problème. Allons-y et configurons quelques outils. Tout au long de ce cours, nous aurons besoin de deux outils principaux , à savoir un navigateur Web moderne et un éditeur de texte. En tant que navigateur Web, je vais utiliser principalement Google Chrome. Et dans certains cas, nous aurons également besoin de l'aide de Mozilla Firefox. Je suis sûr que vous savez déjà comment installer ce navigateur Web, et je pense que vous les possédez déjà tous. Quoi qu'il en soit, voyons comment les télécharger. Pour accéder à Google Chrome, nous devons accéder à cette URL ici et télécharger le navigateur Web. Le processus d'installation est assez simple, je ne vais donc pas le parcourir. En ce qui concerne Mozilla Firefox, vous devez utiliser cette URL et télécharger le navigateur Web à partir d'ici. Les deux liens seront joints à cette conférence. Très bien, passons à autre chose et parlons de l'éditeur de texte. Nous allons utiliser Visual Studio Code car c'est actuellement l'un des meilleurs éditeurs de texte au monde. Bien sûr, vous pouvez vous sentir libre et utiliser votre éditeur de texte préféré. C'est à vous de décider, mais je recommande d'utiliser le code VS. Pour télécharger le code d'abus, vous devez vous rendre sur ce site Web et accéder l'éditeur de texte pour Windows, Mac ou Linux. Ce lien sera également joint à cette conférence. Le processus d'installation de Visual Studio Code est très simple, deuxièmement, donc je suis sûr qu'il n'y aura aucun problème. Très bien, donc une fois que vous aurez installé les deux outils, vous serez prêt à partir Passons donc directement aux projets 4. Projet 1 - Créer et styliser la navigation du site Web: Très bien, j'ai donc créé un nouveau dossier sur le bureau. Allons-y et ouvrons-le dans le code VS. Je vais créer ici deux fichiers différents, l'un pour le HTML et le second pour le CSS. Ouvrez ensuite le fichier index.html et créez un document HTML de base. Allons-y et changeons le titre. Je vais créer un meuble. Et je vais aussi lier le fichier CSS. Allons-y et exécutons le projet dans le navigateur. Et aussi, je vais placer le navigateur et l' éditeur côte à côte. Comme ça. Parce que je veux rendre notre processus de travail plus pratique et plus simple. Ensuite, je vais récupérer quelques liens tels que Font Awesome CDN, car nous allons utiliser icônes Font Awesome tout au long du projet Allons-y et récupérons le lien. Ouvrez ensuite la balise de lien et collez-la ici. Le lien. En outre, nous allons utiliser certaines polices Google. Alors allons-y, visitons site Web de Google Fonts et recherchons quelques polices différentes. La première sera une police appelée Kenya. Sélectionnons le style , puis recherchons une autre police, MCT1 Je vais sélectionner deux styles différents. Ensuite, nous devons récupérer le lien d'ici. Collons-le dans l'élément principal. Très bien, donc je pense que nous sommes prêts. Commençons par créer un balisage HTML. Tout d'abord, je vais vous faire part de quelques commentaires. Ensuite, ouvrons la balise DIV avec le conteneur de classe Ensuite, nous avons besoin d'un autre commentaire pour le moment, bien sûr. Ensuite, je vais instituer balise de navigation HTML5 avec la barre de navigation de classe Ensuite, je vais créer une balise profonde, ce qui sera suffisant en haut de la page. Et il inclura un logo. Je vais vous transmettre une icône Font Awesome avec les noms de classe fa, solid, FAA, couch Nous avons donc ici l'icône Font Awesome. Ensuite, je vais insérer ici une étiquette, qui indiquera qui a taxé les meubles de valeur Très bien, c'est tout pour le logo. Ensuite, je vais créer une barre de recherche. Instituons ici une balise de saisie avec un type de texte et avec l'attribut placeholder, qui inclura le texte suivant Qu'est-ce que tu cherches ? Ensuite, nous avons besoin à nouveau d'une icône Font Awesome, de noms de classes, solide, d'une loupe Nous avons donc ici les entrées et l'icône de recherche. Ensuite, je vais créer une autre balise profonde avec l'utilisateur de la classe. Et je vais passer ici quelques icônes différentes. Le premier sera un solide FA, surpris en train de faire du shopping. Ensuite, je vais vous transmettre l'étiquette Span, qui inclura la valeur dans laquelle je me trouve, le signe du dollar et quelques chiffres. Ensuite, je vais utiliser une autre police, icône géniale, F, un hot FAA normal Enfin, je vais faire une pause ici avec une autre icône. Ce sera un utilisateur solide. Nous avons donc ici nos icônes. Après ça. Je vais créer la liste de navigation, qui inclura quelques éléments de navigation différents. Interférons dans une autre police, icône géniale , ce sera une grosse maison solide. Et je vais également utiliser ici la balise span avec value home. Dupliquons l'élément de navigation plusieurs fois, puis changeons les noms de classe et les valeurs de ce Pentax Nous avons besoin ici d'un canapé et de produits. Le prochain sera le signe du dollar et la tarification. L'icône suivante sera Blogger. Faisons une pause ici sur le blog. Ensuite, nous aurons des ventes vedettes. Et la dernière icône sera un message. Et l'élément span sera Contact. Très bien, nous avons donc ici les icônes, mais comme vous pouvez le voir, l'une des icônes ne s'affiche pas Allons vérifier. Nous avons donc besoin ici de marques solides plutôt que solides. Maintenant, le problème est résolu. Très bien, passons au balisage HTML. Commençons par écrire du CSS. Je vais passer ici quelques commentaires pour les styles par défaut. Allons-y et sélectionnons tous les éléments à l'aide d'un astérisque Réglons la marge et le remplissage des deux à zéro. Je vais également définir la propriété de taille de la boîte, et je vais la définir sur border-box La prochaine va être esquissée. Faisons en sorte que ce ne soit pas le cas. Et je vais aussi définir la famille générale des formes. Ça va être simulé sans serif. Il peut donc voir que les styles par défaut sont appliqués. Ensuite, je vais modifier la taille de police de l'élément HTML car je souhaite utiliser la RAM comme unité de mesure. Réglons la taille de police à 62,5 %. Dans ce cas, une RAM sera égale à dix pixels. Très bien, allons-y et introduisons quelques commentaires pour le conteneur Et aussi pour la barre de navigation. Dans un premier temps, je vais styliser suffisamment d'éléments. Définissons la largeur. Je vais y arriver à 100 %. Et je vais aussi définir la hauteur, qui sera de 19 RAM. Modifiez ensuite la couleur d'arrière-plan. Je vais le mettre en blanc. Ensuite, je vais utiliser Display Flex et je vais changer de direction. Ce sera une colonne. Utilisez ensuite aligner les éléments au centre. Comme vous pouvez le constater, les éléments sont placés au centre. De plus, je vais utiliser un petit effet d'ombre. En utilisant box-shadow, les valeurs seront 01, rang 5 RAM comme couleur Je vais utiliser la valeur RGBA. Ce sera de couleur noire avec une opacité plus faible, 0,1. On peut donc voir que nous avons ici Box Shadow. Le prochain élément que je vais aborder en matière de style, c'est de ne pas être un top médiocre. Tout d'abord, réglons l'affichage sur Flex. Ensuite, nous devons aligner les éléments au centre verticalement. Et définissons également le rembourrage. Ce sera à la RAM et à zéro. D'accord ? Ensuite, sélectionnons les éléments situés dans la partie supérieure non médiocre. Définissons la marge. Ce sera zéro et le forum sur les côtés gauche et droit. Ensuite, je vais sélectionner le logo. Je veux dire l' icône Font Awesome et le logo. Changeons la taille de la police, faisons-en six RAM. Je vais donc changer de couleur. Utilisons ici f887 pour être When crée également de l'espace sur le côté droit en utilisant margin-right avec la Voici donc notre logo, qui est bien plus beau. Ensuite, je vais m' occuper des éléments de la plage, qui sont placés à côté de l'icône. Nous allons donc changer la famille de polices. Vous voyez que votre téléphone s'appelle Kenya. Cursif. Taille de police Agrandissons-le. À utiliser pour la RAM. Créez également un espace entre les lettres et changez de couleur. Je vais utiliser votre couleur 07372. Nous avons donc ici notre élément Span, qui est Todd et qui a l'air sympa. Sélectionnons ici le logo, je veux dire les éléments de l'emballage Je vais régler l'affichage pour qu'il fléchisse et également aligner les éléments au centre afin de centrer l'icône et les éléments de la colonne vertébrale. Ensuite, prenons soin de la barre de recherche. Tout d'abord, je vais sélectionner les éléments d'entrée et modifier leur largeur. Ça va faire 50 tonnes de bélier. Ensuite, nous devons créer de l' espace à l'intérieur du jeu d'entrées, en le rembourrant d' un point d' un point en haut plutôt que d'un point pour la RAM sur le côté droit, un point pour la RAM en bas et de 3,7 RAM sur le côté gauche Ensuite, je vais changer la couleur de fond. Ça va être un Effectif 3. Nous avons donc ici la barre de recherche, je veux dire l'élément de saisie. Débarrassons-nous de la frontière. Je vais faire en sorte qu'il n'y en ait aucun. Et je vais aussi activer border-radius 2.5. Ensuite, prenons soin de la police. Changeons la taille de la police, faisons-en 1,6 RAM. Et aussi, je vais régler l'épaisseur de la police à 300 et changer la couleur. À utiliser ici. Couleur bleue Il peut donc voir que l' élément d'entrée est plus beau. Allons-y et sélectionnons l'espace réservé. Changez la taille de la police, mettez-la 1.7 R& Modifiez également l'épaisseur de la police. Utilisez ici 300. Et je vais régler la couleur sur le bleu. D'accord. Il est maintenant temps de commencer à styliser l'icône Font Awesome. Je suis dans l'icône de recherche. Définissons cette position, rendons-la absolue. Et nous devons également rendre la position des éléments parents relative. Parce qu'il faut positionner les éléments en fonction des parents. Ensuite, définissez que la position supérieure sera de 50 pour cent. Car la position de gauche sera d'un point pour la RAM. Et je vais aussi centrer les éléments parfaitement horizontalement. Pour cela, nous avons besoin de Transform Translate, Y -50 %. Les icônes sont donc positionnées. Ensuite, je vais augmenter la taille de la police. Ça va faire 1,5 RAM. Changez la couleur. Tu te revois, couleur bleue. La barre de recherche est donc prête. Allons-y et sélectionnons l'utilisateur. Modifiez la taille de la police, mettez-la en RAM et définissez également la couleur. Comme vous pouvez le constater, nous avons besoin d' espace entre les articles. Je vais donc sélectionner l'utilisateur et l' espace utilisateur et définir la marge droite, faire un point pour exécuter D'accord ? Comme vous pouvez le voir, la partie supérieure de la barre de navigation est prête. Allons-y et occupons-nous de la liste de navigation. Définissons l'affichage, la flexibilité. Définissez la hauteur. Ce sera 8,5 RAM. Ensuite, nous avons besoin d'un peu d'espace en haut en utilisant le rembourrage par rapport à la RAM Ensuite, je vais sélectionner les développements dans la liste de navigation. La largeur sera donc de 16 RAM. De plus, je vais utiliser à nouveau Display Flex, puis changer la direction, en faire une colonne. Alignons les éléments au centre et utilisons également justify-content center afin de centrer parfaitement Hein ? Ensuite, je vais créer des bordures sur le côté gauche des éléments qui définissent la bordure gauche 2.1 comme solide. Et comme couleur, je vais utiliser la publicité E9. Continuons donc. Nous avons ici des frontières, mais nous devons les supprimer au début. Allons-y et sélectionnons romancière Div avec un neuvième enfant. Nous sélectionnons ici le premier élément, définissons la bordure sur aucune. Il peut donc voir que le problème est résolu. Et nos éléments de navigation sont bien meilleurs. Changeons le type du curseur et faisons en sorte qu'il pointe. Bien, passons à autre chose et sélectionnons les icônes, augmentons la taille de la police, passons à Ram. Changez également la couleur. Utilisez ici la couleur bleue. Ensuite, je vais créer de l'espace bas en utilisant la marge inférieure avec la valeur 1 de la RAM. Il peut donc voir que les icônes sont vraiment belles. Ensuite, je vais sélectionner les éléments de la plage. Je veux dire que la taille de police de l'élément sera de 1,6 RAM. Et puis nous devons également changer la couleur. Vous pouvez aussi colorier, je vais créer un espace entre les lettres. Il peut donc voir que les articles sont vraiment beaux. 5. Projet 1 - Aperçu: Bonjour et bienvenue sur notre deuxième projet, qui sera un site Web de portfolio personnel. De nos jours, ce type de site Web est très populaire et très demandé, donc je pense qu'il sera intéressant pour vous. Le projet concerne un développeur Web avec toutes ses compétences, travaux, ses projets, ses contacts, etc. Allons-y et décrivons le projet. Nous avons donc ici un en-tête du site Web dans lequel nous avons un logo, une bannière et une icône du menu Hamburger Si je clique dessus, la navigation apparaîtra avec de jolis effets. La bannière se compose de plusieurs éléments différents, dont l'image d'un développeur. Ensuite, nous avons une section sur les compétences qui nous montre les technologies et le niveau de connaissances d'un développeur Web. La section Compétences est suivie de la section Projet, où l'on peut trouver différents travaux d'un développeur. Ensuite, nous avons ici une section de contact avec quelques coordonnées et des champs de saisie. Enfin, vous pouvez trouver ici un pied de page simple et agréable. Le projet s'adapte à différentes tailles d'écran. Si j'inspecte la page, passe en mode réactif et vérifie le projet en quatre tailles d'écran différentes. Vous constaterez que le projet est réactif et qu'il s' affiche bien sur toutes les tailles d'écran. Encore une fois, tous les projets sont créés pour une taille d'écran très grande. Je suis sur des sites discrets avec 1920 pixels de largeur et 1080 pixels de hauteur. Donc, si vous utilisez une taille d'écran relativement petite, vous devez passer en mode réactif pendant les cours vous devez passer en mode réactif pendant les et spécifier la largeur et la hauteur de cette manière. Sinon, le projet ne s'affichera pas correctement sur un écran plus petit tant que nous ne le rendrons pas réactif. Veuillez donc en tenir compte. OK, donc c'est tout pour notre deuxième projet. Nous pouvons maintenant passer à autre chose et commencer à le construire 6. Projet 1 - Créer l'en-tête du site Web: Très bien, il est maintenant temps de créer notre prochaine section, qui sera The Landing Instituons de nouveaux commentaires pour les prêts. Ensuite, je vais ouvrir ici élément Section avec une classe Landing. Le premier élément que nous allons insérer ici sera l'arrière-plan. Ensuite, je vais insérer ici la bannière, qui sera composée de deux éléments différents. La première sera une image. Précisons ici le chemin de l'image. Nous devons sélectionner l'image de la bannière. Instituons également la classe Banner IMG. Ensuite, je vais ouvrir la balise H1 avec le titre de la classe Banner Le texte va porter sur des meubles de luxe. Ensuite, nous aurons deux boutons différents. Assignons 101 aux classes de boutons, Banner, BTN et Banner Insérons ici. Va au magasin. Je vais dupliquer cet élément et changer le nom de la classe ainsi que la valeur. Il va être exploré. Très bien, c'est donc tout à propos du balisage HTML de la deuxième section Allons-y et commençons à styliser les éléments les moins sensibles de vos commentaires. Et puis sélectionnez l'élément Section avec la classe Landing, je veux définir une largeur. Ça va être 100 %. En ce qui concerne la hauteur, je vais la faire atteindre 90 pour la hauteur de la fenêtre d'affichage Ensuite, je vais sélectionner l'arrière-plan. Réglons sa position sur absolue. Nous devons également définir la position de l'élément parent. Rendons les choses relatives. Ensuite, je vais définir la première position. Ce sera plein de RAM. Pour ce qui est de la position de décalage, je vais la porter à 50 %. Ensuite, centrons les éléments horizontalement lorsque vous transformez la translation X -50 % Je vais également définir la largeur. Ça va être 90 %. Pour ce qui est de la hauteur, je vais faire 65 mètres. Changez ensuite la couleur d'arrière-plan, faites-en 3954 Et arrondissez également les coins en utilisant le rayon de bordure. Trois rounds. Nous avons donc ici le fond bleu. Ensuite, je vais sélectionner Banner. Définissons la largeur, faisons-la à 60 %. Ensuite, définissez la hauteur comme étant de 65. Rime. Réglez également la position sur absolue. Ensuite, nous devons sélectionner l'élément d'image. Définissons la largeur à 100 %. Nous devons également définir la hauteur à 100 %. Nous avons donc ici l'image. Hein ? Ensuite, je vais changer la position de la bannière, disons la première à huit RAM. Définissez ensuite la position gauche avec le présent. Et aussi pour le centrage, je vais utiliser la valeur Transform Translate X -50 %. Après cela, je vais définir l'image d'arrière-plan. Nous avons besoin d'un gradient linéaire avec une valeur RGBA. Sélectionnons la couleur noire avec une opacité de 0,5. Et encore une fois, je vais utiliser la même couleur avec la même opacité Ensuite, définissons le radius de la frontière avec la valeur 3 RAM Nous avons besoin de pieds d'objet pour l' image dont la valeur est couverte. Et nous avons également besoin de la même chose pour le rayon de l'image. Enfin, utilisons l' opacité, en passant à huit. Très bien, donc l' image est jolie. Allons-y et occupons-nous du titre de la bannière. Définissons sa position comme absolue. Ensuite, nous devons définir la position supérieure, soit dix RAM, alors que la bonne position sera de cinq points. Comme vous pouvez le voir, le titre est positionné sur le côté droit. Définissons la taille de la police , ce sera atrium Et changez également la couleur de l'élément, rendez-le blanc. Très bien, je vais maintenant régler la largeur à 40 %. Et réduisons également l' espace entre les mots. Réglez la hauteur de ligne sur un. Droite. Ensuite, je vais aligner le texte sur le côté droit. Utilisez également l' effet d'ombre de certains textes avec les valeurs 03 RAM, 3 RAM. Et comme couleur, utilisons la valeur RGBA. Alors maintenant, comme vous pouvez le voir, le titre est vraiment sympa. Ensuite, je vais m' occuper des boutons. Réglons la position sur absolue. Affinez ensuite la position supérieure, soit 28 RAM. La largeur sera de 18 RAM. De plus, la hauteur sera égale à celle du rang complet. Alors il nous faut une frontière. Ça ne va pas être le cas. Changer le rayon de la bordure, arrondir les boutons, dévaluerait trois RAM Vous pouvez donc voir le bouton ici. Je vais modifier la taille de la police. Faisons-en 1,6 RAM. Le curseur peut-il également le faire pointer ? Très bien. Allons-y et sélectionnons le bouton forêt. La position va être la bonne. 25 RAM. La couleur de fond sera orange. La couleur du texte va être blanche. Donc le premier bouton a l'air bien. Allons-y et occupons-nous de la seconde. Utilisez le même code, modifiez le nom de la classe. La position va être à cinq points premiers. Sur le côté droit, modifiez également la couleur d'arrière-plan. Ça va être blanc. Quant à la couleur du texte, elle sera orange. Donc tout a l'air vraiment bien. Je vais créer un effet de survol. Pour le premier bouton. En survol. Je vais changer la couleur de fond. Faisons en sorte qu'il soit blanc. Changez également la couleur. Faites-le orange. Asphalte. Le deuxième bouton. Nous avons besoin du contraire. Je veux dire, nous devons changer la couleur de fond, la rendre orange. Quant à la couleur du texte, elle sera blanche. Enfin, utilisons les valeurs de transition, toutes de 0,3 s. D'accord, c'est tout. Le Landing est stylisé et nous devons maintenant passer à la section suivante 7. Projet 1 - Section Créer des produits: Bon, il est maintenant temps de passer à autre chose et de commencer à créer notre section suivante, qui sera la section Produits. Je vais commencer à créer du balisage HTML. Allons-y donc et insérons vos commentaires pour les produits. Ensuite, je vais ouvrir l' élément Section avec la classe Products. Le premier élément que je vais insérer ici sera de donner la priorité à la classe Products. Nous aurons ici un élément de titre h3 avec une valeur de recherche pour Ensuite, nous aurons le H2 au titre 15 000 et le H1 au titre Avec un texte Produits. Ensuite, je vais créer un autre développement qui sera composé d'icônes de produits. Ouvrons le tag DIV avec la chambre de classe. Je vais ne pas sécuriser une image car l' icône sera au format PNG de la chambre Et nous aurons également ici un élément de travée pour la chambre de texte. Dupliquons ces éléments plusieurs fois. Modifiez ensuite les noms des classes. Ça va être mis en mémoire tampon. Changez également le nom de l'image et remplacez la valeur du texte de l'élément span par la même. Pour l'élément suivant, il va être en train de manger. Changeons le nom de l'image ainsi que sa portée. Ensuite, nous aurons jusqu'à présent changé cette poêle. Le prochain point sera la table. Et le dernier article sera la garde-robe. Changeons donc le nom de l'image ainsi que cet élément de span. Très bien, c'est donc tout à propos du balisage HTML. Nous avons ici tous les éléments nécessaires. Allons-y et commençons à écrire du CSS. Je vais créer les commentaires, les produits et les produits. Sélectionnez ensuite les éléments de la section, définissez sa largeur, qui sera de 100 %. C'est probablement la hauteur. Je vais faire en sorte que la hauteur de la fenêtre d'affichage soit de 85. Ensuite, nous avons besoin de Display Flex. Et nous devons changer de direction. Faisons-en une colonne. Et alignez également les éléments au centre. Il peut donc voir que les éléments sont placés au centre. Allons-y et sélectionnons Produits. La largeur maximale définie sera de 60 %. Ensuite, je vais créer de l'espace en bas en utilisant la RAM de la marge inférieure à huit. Ensuite, je vais sélectionner Produits. H3, élément de titre, taille de police augmentée, accédez à Ram. Changez également la couleur que je vais utiliser ici, la couleur bleue. Dupliquons ce code. Changez H3N2, H12. Je vais changer la taille de la police, faire sept RAM et aussi changer la couleur. Utilisez ici, couleur orange. Hein ? Allons-y et stylisons le troisième titre, H1 Changez la taille de la police, faites-en neuf RAM. Changez également la couleur. Je vais utiliser ici la couleur bleue. De plus, je vais réduire l'espace en haut en utilisant la marge supérieure avec une valeur négative moins phi prime. OK, voyons donc que les titres sont plutôt jolis. Allons-y et sélectionnons des produits, des icônes. Je vais définir la largeur. Portons-le à 60 %. Ensuite, je vais régler l'affichage pour qu'il soit flexible. Créez un espace entre les éléments en utilisant l'option Justifier l' espace de contenu de manière uniforme. Comme vous pouvez le constater, nous avons ici un espace uniforme entre les articles. Ensuite, je vais sélectionner Donner les éléments des icônes des produits. Réglons l'affichage pour qu'il soit flexible. Changez également la direction, faites-en une colonne. Ensuite, je vais aligner les éléments au centre. Ensuite, définissons la largeur, faites-en 18 RAM. Définissez également la hauteur 20 RAM. Et créez de l'espace sur le côté droit en utilisant margin-right pour exécuter D'accord. Ensuite, changeons la couleur d'arrière-plan. Je vais utiliser votre couleur F7, F7, C7. Créez ensuite de l'espace à l'intérieur de l'article à l'aide d'un rembourrage. Ensuite, je vais créer un rayon de bordure à 2 heures du matin et aussi changer le curseur, le faire pointer Droite. Ensuite, je vais supprimer l' espace sur le côté droit par rapport au dernier élément. Nous devons donc sélectionner le dernier enfant. Ensuite, nous avons besoin que la marge droite soit nulle. Très bien. Allons-y et sélectionnons Image. Créez de l'espace en bas à l' aide de la marge inférieure à trois béliers. Ensuite, je vais sélectionner l'élément span. Changeons l'image en une plage. Changez la taille de la police, faites-en 2,5 RAM. Changez également la couleur. Utilise ta couleur. bleu. Ensuite, je vais créer un effet de survol. Je vais changer la couleur de fond. Faisons en sorte qu'il soit blanc. Et utilisez également box-shadow avec les valeurs 01 RAM, trois RAM Et comme couleur, je vais utiliser la couleur noire RGBA avec une opacité de 0,1 Et nous avons également besoin d' une transition pour un effet fluide. On peut donc voir que nous avons ici un bel effet de surenchère. La dernière chose que je vais faire est de créer du rembourrage à l'intérieur de la section supérieure avec Make it five prime Hein ? Tout semble donc bien et la section Produits est terminée. Passons à la suivante. 8. Projet 1 - Section de tarification de créer et de style: Très bien, il est donc temps de passer à autre chose. Répondez pour créer notre prochaine section, qui sera une section de tarification. Allons-y et insérons de nouveaux commentaires, Pricing and of Pricing. Ensuite, je vais ouvrir une classe d'éléments de section Pricing. Insérons ici la balise DIV Pricing top, qui inclura quelques éléments différents Je vais donc transmettre ici une image. Allons-y et précisons ici le chemin de l'image. Ce seront des meubles pour la PNG. Ensuite, je vais vous transmettre le contenu principal de votre tag DIV Pricing. Ouvrons la balise de titre H1 avec les textes, préparez-vous pour Noël Et je vais également placer ici un schéma, des tendances réelles. Hein ? Voyons donc ce qu'il en est de la face supérieure. Maintenant, nous devons créer quelques cartes. Créons des cartes de prix avec étiquette DIV , puis créons la voiture elle-même. Nous aurons donc ici des icônes de cartes de prix. Je veux dire que les icônes Font Awesome en auront trois. Le premier sera F, un lien solide avec la FAA Ensuite, le prochain sera très régulier. Fa chaud. Pour ce qui est de la troisième icône, je vais utiliser ici, F, un solide, une loupe De plus. Très bien, nous avons donc ici nos icônes Font Awesome Ensuite, je vais créer un emballage pour l'image. En ce qui concerne l'image, sélectionnons le chemin. Ce sera le fauteuil Pricing. Ensuite, je vais ouvrir la balise d'en-tête h3. Ce sera le nom de fauteuil. Eh bien, nous aurons donc ici des étoiles. Utilisons à nouveau Font Awesome. Les icônes auront cinq étoiles au total. Nous avons donc besoin d'une étoile solide. Dupliquons-le quatre fois. Et enfin, je vais passer ici H4, élément de titre pour le prix Très bien, alors asseyons-nous à propos de la carte. Il y en aura six. Allons-y donc et dupliquons-le cinq fois. Ensuite, nous devons apporter quelques modifications. Donc, la deuxième carte va parler du canapé. Nous devons changer de trajectoire, mais aussi de cap. Et nous aurons ici une étoile différente. Ça va être très irrégulier. Et le prix sera également de 129$. La prochaine carte portera sur l'éclairage. Changeons le prix, faisons-le à 59$. Ensuite, nous aurons une carte à propos de ce qui s'est passé jusqu'ici. Changeons le titre. Modifiez également le prix. Passez ensuite à la carte suivante. La table va être pleine. En fait, je vais changer les étoiles pour le début de l'année. Nous en avons besoin ici. Fa, irrégulier Puis modifiez le prix de la table. Ça va coûter 49$ Et maintenant, nous devons modifier les détails de la dernière carte, ce sera la garde-robe. Changeons le titre et changeons également l'étoile. Nous avons besoin ici d'un chat irrégulier. Enfin, je vais modifier le prix, non ? Nous avons donc ici nos six cartes avec des images et des détails. Et le dernier élément de cette section sera un modèle. Va au magasin. Très bien, c'est donc tout à propos du balisage HTML. Maintenant, il est temps de passer à autre chose et de commencer à écrire du CSS. Insérons de nouveaux commentaires pour la tarification. Ensuite, je vais sélectionner les éléments de la section. Définissons la largeur. Ça va être 100 %. Ici aussi, nous avons besoin d'une hauteur de 100%. Ensuite, je vais régler l'affichage pour qu'il soit flexible, puis changeons la direction, le transformons en colonne. Ensuite, je vais aligner les éléments au centre. On peut donc voir que les éléments sont placés au centre de la section. Ensuite, je vais créer de l'espace en bas en utilisant la marge, les 20 béliers inférieurs. Mais ici, nous avons un espace autour de l'élément de section. Allons-y et sélectionnons Pricing top. Je vais régler l' affichage pour qu'il soit flexible. Ensuite, alignons les éléments. Et le centre. En plus de cela, je vais créer de l'espace en bas. Vous avez donc ce rythme. Ensuite, je vais sélectionner les meilleures images de tarification. L'image. Créons de l' espace sur le côté droit. Faisons-en 20 RAM. Ensuite, je vais sélectionner Tarification des principaux éléments du titre H1. Augmentons la taille de la police, faisons-en sept RAM. Changez également la couleur. Je vais utiliser ta couleur bleue. Je vais donc définir la largeur. Faisons-en 50 RAM, et changeons également la hauteur de la ligne, faisons-en une. Ensuite, je vais créer de l'espace bas en utilisant la RAM Margin-Bottom Three On voit que le titre est plutôt joli. Allons-y et sélectionnons le bouton. Changeons la largeur, faisons-en 18 RAM. Nous devons donc modifier la hauteur. Faisons-le pour la RAM. Ensuite, je vais définir la couleur de fond. Ça va être blanc. Nous avons donc besoin ici d' une bordure avec des valeurs de 0,1 g solide, et la couleur va être orange. Nous avons donc ici le bouton. Arrondissons-le un peu en utilisant border-radius avec la valeur trois RAM Je vais donc modifier la taille de la police. Ça va être 1.6 R&. Ensuite, je vais changer la couleur. Utilisez ici la couleur orange et changez également le curseur, faites-le pointer. Comme vous pouvez le voir, le bouton est joli. Il est maintenant temps de passer à autre chose et de sélectionner la carte de prix. Changeons la largeur, faisons-en 30 RAM. Modifiez ensuite la hauteur. Ça va faire 45 RAM. Je vais également changer la couleur de fond. Faisons F7, F7, F7. Nous avons donc ici les cartes. Créons de l'espace en utilisant la marge, une RAM. De plus, je vais arrondir les coins en utilisant le rayon de bordure pour obtenir une rampe Nous avons donc ici les modifications. Ensuite, utilisez Display Flex et changez également la direction, faites-en une colonne. Et je vais aussi aligner les éléments au centre. Il peut donc voir que les objets sont placés au centre. Je veux dire au centre, verticalement. Utilisons également l'espace de contenu de justification entre les afin de créer un espace entre les éléments flexibles. Ensuite, je vais utiliser du rembourrage pour créer de l'espace à l'intérieur de la carte Utilisons ici cinq nombres premiers et zéro et changeons également le type du curseur, en faisons un pointeur. Très bien, donc les courts sont beaux. Ensuite, nous devons sélectionner un emballage pour le développement des cartes de tarification afin d'aligner les cartes dans un premier temps, utilisons la largeur, faisons-la à 60 % Réglez ensuite l'affichage sur Flex. On peut voir que les cartes sont placées côte à côte Maintenant, utilisez pour justifier le contenu avec la valeur Center Ensuite, je vais emballer éléments avec du Flex Wrap, du Wrap. OK, comme tu peux le voir, les cartes sont bien alignées. Utilisons la marge inférieure avec la valeur 5 RAM afin créer de l'espace en bas entre les chariots et le bouton Ensuite, je vais sélectionner les icônes des cartes de prix. Dans un premier temps, je vais les masquer en utilisant display none. Ensuite, allons-y et sélectionnons Image wrapper. Je vais définir la largeur. Faisons-en 20 RAM. Eh bien, définissons la hauteur. Ça va faire 18 RAM. En plus de cela, je vais créer de l'espace en bas. Faisons en sorte que ce soit cinq nombres premiers. Réglez ensuite l'affichage sur Flex. Et placez également le contrat et le central à l'aide de justify-content center Hein ? Ensuite, je vais sélectionner le troisième titre. Modifiez la taille de la police. Ça va être 1,61. Je vais également modifier l'épaisseur de la police. Réglons-le sur 300 et créons un espace entre les lettres. Faites-en 0,1 R&. Ensuite, je vais changer la couleur. Utilise ta couleur bleue. Voyons donc les éléments du titre. Aie l'air bien. Ensuite, je vais sélectionner les étoiles. Je parle de l'icône. Changeons la taille de la police, faisons-en 1,6 RAM. Changez également la couleur. Tu vois une orange. Comme vous pouvez le constater, les étoiles sont belles. Et maintenant, il est temps de personnaliser le H, quatre éléments de titre, c' est-à-dire le prix, changer la taille de la police. Changez également la couleur. Comme vous pouvez le constater, les titres sont jolis. Très bien, maintenant, nous avons besoin des mêmes styles pour le bouton en bas Comme vous pouvez le voir, ces carreaux sont appliqués et le bouton est joli. La dernière chose à faire dans cette section est de personnaliser les icônes de la carte. Sélectionnons l' emballage et définissons la position Faisons en sorte que ce soit absolu. Nous avons besoin de la position relative de l'élément parent afin d'aligner les éléments en fonction du parent. Mettons les deux premiers sur la RAM et la bonne position sur la RAM également. Ensuite, nous avons besoin de la flexibilité de l'affichage et nous devons changer la direction, en faire une colonne. Comme vous pouvez le voir, les icônes Font Awesome sont alignées dans le coin supérieur droit de la carte Nous devons maintenant personnaliser et styliser l'icône elle-même. Je veux dire l'icône Font Awesome. Réglons la largeur à trois RAM et définissons également la hauteur. Mettons-la également à 31. Nous avons besoin que la couleur de fond soit blanche. Ensuite, je vais arrondir les icônes en utilisant un rayon de bordure de 50 %. Créez également de l'espace en bas à l'aide de la marge, en bas de la RAM. Ensuite, je vais placer les icônes au centre des cercles en utilisant Display Flex, Justify-Content Et nous devons également aligner les éléments au centre. Ensuite, créons des effets d' ombre à l'aide de box-shadow, en utilisant vos valeurs 0,5 RAM, une RAM et la couleur noire RGBA avec une opacité plus faible Et maintenant, changeons la taille de la police, faisons en sorte qu'elle pointe vers la RAM et changeons également la couleur. Utilisez la couleur bleue. Très bien, les icônes sont donc belles, et maintenant nous devons les masquer car elles devraient apparaître lorsque vous survolez le pointeur Cachons les icônes et déplacons-les légèrement à l'aide de Transform. Traduisez la valeur Y en rampe. Comme vous pouvez le constater, les icônes sont masquées. Maintenant, nous devons créer un effet excessif. Sélectionnez la carte de prix avec le pointeur de la souris. Et nous devons également sélectionner les icônes. En survol. Nous devons réafficher les icônes et remettre la propriété transform translate Y à la position par défaut. Je veux dire qu'il nous faut zéro ici. Et utilisez également la transition pour un effet fluide. Comme vous pouvez le constater, nous avons ici un effet de survol vraiment sympa et simple Et en fait, avec la section des prix, nous en avons terminé. Allons-y donc et passons à la section suivante. 9. Projet 1 - Section de créer un blog: OK, maintenant il est temps de passer à autre chose. Et donc pour créer notre prochaine section, qui sera une section Blog, insérons vos nouveaux commentaires de blog et de blog. Ensuite, ouvrez la balise de section avec un nom de classe, Blog. Je vais insérer ici balise DIV avec le contenu du blog de la classe, dans laquelle je vais insérer ici une autre donnant la classe en haut du bloc. Nous avons besoin ici encore d'un tag DIV avec un magazine de classe. Et je vais aussi passer une image d'urine. Sélectionnons l'image, qui sera Magazine point PNG. Hein ? Ensuite, nous avons besoin d'une balise DIV avec les tendances d'une classe , puis d'une balise d'en-tête H1 avec la valeur des tendances hivernales. 2023. C'est arrivé ensuite. Je vais utiliser le bouton de téléchargement. Ensuite, utilisons la balise DIV avec la classe. Blogue. Les articles comporteront trois articles différents dans lesquels je vais passer l'année avec un numéro d'un. Ensuite, nous avons besoin d'un autre élément span avec du texte fictif. Dupliquons l'article deux fois, car comme je l'ai dit, nous avons besoin de trois articles au total. Changeons donc les chiffres. Très bien, c'est donc tout à propos du balisage HTML. Allons-y et commençons à personnaliser cette section. Je vais introduire de nouveaux commentaires. Sélectionnez ensuite la largeur définie de l'élément de section. Ça va être 100 %. Pour la hauteur. Je vais le régler à la hauteur de la fenêtre d'affichage Je vais également changer la couleur de fond. Ça va être de couleur bleue. Ensuite, je vais utiliser Flexbox. Placons les éléments au à l'aide de justify-content center et alignons les éléments au centre et alignons OK, je vais maintenant sélectionner Bloquer le contenu. Définissons une vague. Ce sera 50 %. Ensuite, la hauteur sera de 50 rampes. Je vais changer la couleur de fond. Je vais utiliser une couleur orange. Ensuite, arrondissons les coins en utilisant le rayon de bordure. Nous avons donc ici le contenu. Allons-y et sélectionnons Blog top. Utilisez Flexbox. Je vais suggérer que le contenu du site est espacé de manière uniforme. Et je vais aussi aligner les éléments au centre. Ensuite, allons-y et sélectionnons l'image du haut du bloc. Je suis à l'image du magazine. Définissons de l'espace en haut en utilisant la mémoire RAM des cinq premières marges. L'image est donc belle. Ensuite, je vais utiliser les tendances, les éléments de titre H1. Cela a changé la taille de la police. Ça va faire six RAM. Je vais également modifier la largeur. Réglons-le sur cinq nombres premiers et vérifions également l'espace entre les mots en utilisant la hauteur de ligne Un. Puis change de couleur, rends-la blanche, puis change de couleur, rends-la blanche. Et utilisez également un peu d'espace en bas. Droite. Après cela, allons-y et sélectionnons le bouton. Définissons la largeur. Ça va faire 18 RAM. Ensuite, je vais définir la hauteur. Il va y avoir plein de RAM. Modifiez également la couleur d'arrière-plan. Utilisons la couleur bleue. Supprime la bordure par défaut. Nous avons donc ici le bouton. Je vais l'arrondir en utilisant le radius de la bordure. Trois RAM. Changez également la taille de la police pour qu'elle soit de 1,6 RAM. Changez ensuite de couleur, mettez-la en blanc et pointez également le curseur. Droite. Après cela, je vais commencer à travailler sur des articles. Utilisons Flexbox. Nous avons besoin du centre de contenu Justify-Content. Et nous avons également besoin d'un peu d'espace en haut en utilisant la marge supérieure à la RAM. Nous avons donc ici les articles. Sélectionnons l'article lui-même. Largeur définie, ce sera 23 RAM. Nous devons également définir la hauteur, qui sera de dix RAM. Créez ensuite de l' espace en utilisant la marge. Ensuite, je vais utiliser Flexbox. Alignons les éléments au centre et utilisons également le pointeur du curseur. OK, je vais maintenant sélectionner les éléments de la plage dans l'article. Augmentons la taille de la police, mettons-la en RAM et changeons également la couleur. Je vais utiliser la couleur blanche. Ensuite, je vais mettre le texte en majuscules. Et modifiez également la hauteur de la ligne. Faites-en un. Vous aurez donc le texte des articles. Dupliquons ce code et sélectionnons maintenant le premier élément de span à l'aide du nième sélecteur enfant Je vais augmenter la taille de la police pour qu'elle soit de cinq RAM. Ensuite, débarrassez-vous de la couleur, de la transformation fiscale, de la propriété. Et aussi la hauteur de la ligne. Je vais utiliser font-weight avec le verrou de valeur. Et créons également de l'espace sur le côté droit en utilisant la rampe Margin-Right One Comme vous pouvez le voir, la section blog est terminée et elle a l'air sympa. Passons à la suivante. 10. Projet 1 - Créer une section de contenu: Très bien, alors allons-y et commençons à créer notre section suivante, qui sera une section Contact Je vais insérer vos nouveaux commentaires, contact et de conflit. Ouvrez ensuite les éléments de section avec le nom de classe Contact. Je vais insérer ici balise DIV avec un contenu de conflit de classe Let's Institute et d'autres DIV, qui vont se contenter Gauche. Je vais insérer vos éléments de titre H2 avec le texte Abonnez-vous à notre newsletter et recevez 30 %, qui seront placés dans l'élément span. Ensuite, je vais placer balise U DIV avec le contenu de la classe, n'est-ce pas ? Dans laquelle je vais insérer balise de saisie avec le type e-mail et avec un attribut d'espace réservé, votre adresse e-mail En plus de cela, je vais insérer votre bouton avec le texte d'inscription. Très bien, c'est tout à propos du balisage HTML. Allons-y et commençons à écrire du CSS dans les commentaires, les contacts et les contacts Je vais sélectionner la section Contact. Définissons la largeur. Ça va être 100 %. Je vais également définir la hauteur. Ça va être 40, hauteur de la fenêtre d' affichage. Ensuite, je vais utiliser Display Flex. Et je vais placer le contenu au centre à l' aide de justify-content center et aligner les éléments au centre Comme vous pouvez le constater, le contenu est placé au centre. Allons-y, sélectionnons le contenu et définissons la largeur. Ça va être 50 %. De plus, je vais définir que la hauteur sera de 15 RAM. Ensuite, je vais utiliser à nouveau Flexbox. Supposons donc que les éléments sont placés côte à côte horizontalement. Ensuite, sélectionnons le contenu à gauche et définissons la largeur. Ce sera 40 %. Ensuite, je vais définir que la hauteur sera de cent pour cent. Je suis dans la peau du parent à 100 %. Modifiez ensuite la couleur d'arrière-plan. Je vais utiliser la couleur orange. Nous avons donc ici le côté gauche. Arrondissons les coins en utilisant borderradius pour la RAM, 00 pour la RAM Je vais aussi utiliser des livres sur le lin. Et je veux placer les objets au centre. En plus de cela, créons de l' espace sur le côté gauche à l'aide d'un rembourrage Ensuite, je vais sélectionner le contenu à gauche, les éléments de titre. Définissons une vague. Ça va être 2 %. Je vais également modifier la taille de la police. Réglons-le sur 2.2 RAM. Ensuite, je vais changer de couleur, ce sera le blanc. Nous devons également diminuer la hauteur de la ligne. Ça va être un point. Pour. Maintenant, je vais sélectionner ces éléments de span, qui incluent 30 % de Changeons la taille de la police, lui donnons 2,5 RAM et changeons également la couleur. Je vais utiliser ta couleur bleue. Hein ? Le côté gauche est donc très beau. Allons-y et sélectionnons le côté droit. Définissons la largeur. Ça va être 60 %. Je vais également définir la hauteur comme étant de 100 %. Changez ensuite la couleur d'arrière-plan, utilisez la couleur bleue. Ensuite, je vais arrondir les coins en utilisant le rayon de bordure Dans ce cas, nous avons besoin de zéro pour la RAM, pour la RAM. Et zéro. Utilisez également Flexbox. Pour aligner les éléments au centre, nous devons aligner les éléments au centre et également le centre du contenu de Justify. Très bien, allons-y et sélectionnons les éléments d'entrée. Tout d'abord, je vais définir que la largeur sera de 35 RAM. Définissez ensuite la hauteur. Faisons en sorte qu'il soit plein de RAM. Changez la couleur d'arrière-plan. Je vais utiliser ici une couleur 17469. Disons une couleur bleu plus clair. Ensuite, je vais créer de l'espace à l'intérieur de l' entrée à l'aide d'un rembourrage Supprime ensuite la bordure par défaut et Create for the radius 0.5 La RAM change également la couleur. Je vais rendre la couleur blanche et créer de l'espace sur le côté droit en utilisant la marge, non ? Je veux que Ram soit devenu. Ainsi, comme vous pouvez le constater, l'élément d'entrée est plus joli. Allons-y et sélectionnons à nouveau l'entrée. Ici, espace réservé. Changeons la couleur. Faites-le en blanc et modifiez également la taille de la police. Faites-en un point. Pour la RAM. Très bien. Après cela, je vais sélectionner l' entrée avec focus. Concentrez-vous sur le fait que je vais changer la bordure. Faisons en sorte qu'il soit solide à 0,1 pièce. Et comme couleur, je vais utiliser l'orange. Ainsi, une fois que nous concentrons l'entrée, la bordure change. Hein ? Il est maintenant temps de personnaliser le bouton qui est placé à côté de l'élément d'entrée. Définissons une largeur, faisons-en dix RAM. Ensuite, je vais définir la hauteur. Ce sera plein de RAM. Modifiez également la couleur d'arrière-plan. Utilisons ici la couleur orange. Alors. Je vais me débarrasser de la frontière. Faisons une nonne et utilisons le rayon pour arrondir les coins du bouton Ensuite, je vais changer la taille de la police pour qu'elle soit de 1,6 RAM. Modifiez la couleur du texte. Mettons-le en blanc et changeons également le type du curseur, faisons-le pointer. Très bien, c'est donc tout à propos de la section Contact. Ça a l'air vraiment sympa. Passons à la section suivante. 11. Projet 1 - Créer et styliser le pied de page du site Web: Très bien, il est maintenant temps de créer notre dernière section du projet, qui sera un pied de En fait, le pied de page va être simple. Insérons vos commentaires pour le pied de page. Ensuite, je vais ouvrir la balise de pied de page HTML5. Nous allons utiliser le pied de page de la classe. Ensuite, insérons la balise U DIV avec la classe copyright, dans laquelle je vais placer le paragraphe, qui inclura l'entité HTML5 Je veux dire le signe du copyright, suivi du texte. Tous droits réservés. 2023. Ensuite, créez par code et créez. En plus de cela, nous aurons ici un logo. Je veux dire l' icône Font Awesome du canapé, suivie du titre H1, Element Furniture OK, alors c'est ça. Tous les éléments sont créés. Allons-y et personnalisons cette section. Au lieu de cela, des commentaires pour le pied de page. Ensuite, je vais sélectionner l' élément de pied de page, définir sa largeur Ce sera 50 %. Ensuite, la hauteur sera de cinq RAM. Nous avons également besoin ici d'une marge ou de vous pour centrer l'élément. Et utilisez également l'écran, Flex. Justifiez l'espace entre les contenus pour créer de l'espace entre les éléments. Et nous devons également aligner les éléments de centre à centre vertical. Ensuite, je vais utiliser border top avec les valeurs 0,1 RAM solide. Et comme couleur. Utilisons le CCC. Très bien, c'est tout à propos du pied de page Ensuite, je vais personnaliser le développement des droits d'auteur. Réglons la taille de police à 1,6 RAM. Changez également la couleur, couleur bleue. Ensuite, je vais m'occuper du côté droit du pied de page Utilisons Display Flex pour placer les éléments côte à côte. Nous devons également aligner les éléments ici, les centrer. Les éléments sont bien alignés. Ensuite, allons-y et sélectionnons l'icône Font Awesome. Augmentez la taille de la police, mettez-la en RAM. Et changez également la couleur que je vais utiliser ici, orange. Ensuite, nous avons besoin d'un espace sur le côté droit en utilisant le marginal droit avec la valeur 1,5 gramme. Très bien, c'est tout à propos de l'icône. Ensuite, je souhaite sélectionner les éléments de titre H1. Changeons la famille de polices. Utilisez ici le cours sur le Kenya. Il définit également la taille de police à exécuter et utilise un espacement des lettres de 0,3 RAM. Et changez également la couleur. Utilise ta couleur bleue. Très bien, voyons ce qu'il faut savoir sur le pied de page. Cela a l'air sympa et ce sera vraiment le projet que nous aurons terminé ensuite, nous devons le rendre réactif 12. Projet 1 - Rendre le projet réactif: Très bien, il est maintenant temps de rendre notre projet réactif aux différentes tailles d'écran. Je vais inspecter la page et passer en mode réactif. Le projet est conçu pour un écran de très grande taille. Et maintenant, nous devons trouver les points de rupture sur lesquels nous devons apporter des modifications. En fait, je pense qu' après 1 600 pixels, le projet a besoin de quelques modifications Revenons donc à l'éditeur. Et je vais d'abord insérer de nouveaux commentaires pour Responsive. Ensuite, je vais créer une requête multimédia CSS. Et pour ce qui est de la taille de l'écran, je vais définir ici 1 600 pixels. Tout d'abord, je vais m' occuper de la bannière. Allons-y et sélectionnons une bannière. Je vais modifier sa largeur. Portons-en 70 %. Très bien, ensuite, apportons une légère modification aux produits Sélectionnons-le et réglons le rembourrage jusqu'à dix RAM. Et je vais également modifier la hauteur, qui sera de 100 % de hauteur de fenêtre d'affichage Hein ? Comme vous pouvez le constater, la section Produits est plus belle. Ensuite, je vais sélectionner Produits en haut de la page et modifier la largeur pour qu'elle soit de 70 %. Je vais donc m'occuper des produits, des icônes. Passons également à deux 70 %. Nous avons donc maintenant un bien meilleur résultat. Très bien, ensuite, je vais m' occuper des cartes de prix Changeons donc la largeur. Ça va être 70 %. Ensuite, je vais m' occuper de la section blog. Allons-y et sélectionnons le contenu du blog. Largeur définie. Ce sera à nouveau 70 %. Nous avons maintenant un meilleur résultat. Passons ensuite à autre chose et sélectionnons Contact Content. Encore une fois, modifiez la largeur, faites-la à 70%. La section Contact semble bonne. Enfin, nous devons nous occuper du pied de page. Changeons cela avec deux 70 %. Très bien, donc je trouve que tout va bien. Allons-y et trouvons le point d'arrêt suivant, qui, je pense, sera de 1 400 pixels Allons-y et créons une nouvelle requête multimédia CSS. Et en tant que largeur maximale, définissons ici 1 400 pixels Je vais modifier la taille de police des éléments HTML. Mettons-le à 54 %. Cela réduira légèrement tous les éléments et nous aidera à rendre le projet réactif. Ensuite, je vais m' occuper de la tarification, des principaux éléments que je vois dans l'image. Changeons la largeur, lui donnons 60 RAM, et changeons également l' espace sur le côté droit, réglant la marge droite sur dix rampes Nous avons maintenant de meilleurs résultats. Et en fait toutes les autres sections. Aie l'air bien. Allons-y et commençons à travailler sur le prochain point d'arrêt, qui, je pense, sera de 1 200 pixels Allons-y et créons une nouvelle requête multimédia CSS. Et comme largeur maximale, spécifions ici 1 200 pixels Tout d'abord, modifions la taille de police des éléments HTML. Je vais le fixer à 51 %. Comme vous pouvez le constater, tous les éléments sont devenus plus petits. Ensuite, je vais sélectionner Banner. Changeons sa largeur et augmentons-la à 80 % pour que la bannière soit belle. Ensuite, je vais prendre ici la section des produits. Sélectionnons Products Top. Changez sa largeur, augmentez-la à 80 %. Et modifiez également la largeur des icônes des produits. Mettons-le également à 8 %. Très bien, ensuite, nous avons ici une fiche de prix. Je vais donc sélectionner les cartes de prix et régler leur largeur à 8 %. Nous avons donc à nouveau trois cartes sur chaque ligne. Très bien, passons à autre chose et occupons-nous de la section Blog. Sélectionnons le contenu du bloc et modifions sa largeur, jusqu' ce qu'il atteigne 8 %. Ensuite, je vais sélectionner l'image principale du blog , qui est Magazine. Réglons sa largeur à 40 RAM. Je vais donc sélectionner les articles de blog et mettre la marge supérieure à zéro. Très bien, donc la section Blog semble bonne. Et maintenant, nous devons nous occuper de la section Contact et du pied de page Réglons donc la largeur à 8 % pour contenu du contact et modifions également la largeur, ainsi que le pied Très bien, donc ça correspond à ce point d'arrêt. Allons-y et trouvons le suivant. Je pense donc que les prochains points d' arrêt seront de mille pixels. Allons-y et créons une nouvelle requête multimédia CSS d'une largeur maximale de mille pixels Tout d'abord, je vais réduire la taille de police de l'élément HTML. Portons ce chiffre à 46 %. Suivant. Je vais m' occuper de la navigation. Sélectionnez la sieste ou le meilleur développement et changeons en marche. Faites-le 0,2 Rem sur les côtés gauche et droit. Donc, la navigation au moins, c'est plus beau. Ensuite, je vais sélectionner la barre de recherche, élément de saisie. Et je vais modifier la largeur. Faisons en sorte qu'il soit prêt à courir. C'est donc tout pour la navigation. Sélectionnez le titre de la bannière et modifiez la taille de la police. Faisons-en six RAM. Ensuite, je vais m'occuper de la section Produits. Sélectionnons les produits et définissons la hauteur. Faisons en sorte que la hauteur de la fenêtre d' affichage soit de 90. Et je vais aussi régler le rembourrage sur le top 5. Ensuite, je vais sélectionner Produits. Cliquez sur H2, sur l'élément de titre et définissez la taille de police sur cinq REM Très bien, dupliquons ce code et il en va de même pour l'élément H one Je vais régler la taille de police sur sept rampes. Hein ? Passons à la section suivante, qui est la section des prix. Je vais sélectionner l'image du haut de la page Prix. Réglons sa largeur à 40 RAM. Ensuite, nous devons sélectionner Prix, élément supérieur du titre H1 Changeons la taille de police, mettons-la à cinq caractères premiers. Et je vais aussi m'asseoir avec 23 à 5 R&. Très bien, donc je pense que la face supérieure est belle. Maintenant, occupons-nous des cartes. Réglons sa largeur à 90 %. Encore une fois, nous avons trois cartes sur chaque ligne. Et en fait, tout semble bon. Passons à autre chose et trouvons le point d'arrêt suivant, qui, je pense, sera de 800 pixels Allons-y et sélectionnons nouvelle requête multimédia CSS avec une largeur maximale de 800 pixels Modifiez à nouveau la taille de police des éléments HTML. Je vais le fixer à 139 %. Ensuite, je vais sélectionner un logo. Je suis dans l'icône Font Awesome, et je change la taille de la police, je l'utilise pour la RAM. Après cela, je vais sélectionner la barre de recherche, élément de saisie. Et je vais modifier la largeur. Faisons-en 30 rampes. Très bien, nous devons maintenant nous occuper de la section Produits Je pense que nous avons beaucoup d' espace dans cette section, alors sélectionnons les produits et sélectionnons la hauteur maximale pour 75  % de hauteur de fenêtre d'affichage Et changez également le rembourrage sur le dessus. Mettons-le à zéro. Très bien. Ensuite, je vais sélectionner le développement des icônes. Réglons sa hauteur à 18 RAM. Nous devons également réduire la taille des icônes. Nous allons donc sélectionner les images et régler la largeur sur cinq premiers. Maintenant, ils ont l'air bien mieux. Et en plus de cela, je vais sélectionner des éléments de span et diminuer la taille de la police. Faisons-en une rampe de 1,8. Très bien, ensuite, allons-y et occupons-nous de la section des prix Sélectionnez Pricing top image et réglez sa largeur sur trois pour qu'elle s'affiche. Nous devons également nous occuper de la carte de prix. Réglons sa largeur à 27 RAM. Maintenant, les images sont en format U2, plus grandes. Alors occupons-nous de ça. Sélectionnez l'image de la carte de prix et définissez la largeur. Faisons-en 18 RAM. Maintenant, ils ont l'air bien mieux. Nous devons maintenant nous occuper de la section des blocs. Allons-y et sélectionnons ensemble de blocs de contenu avec deux 90 %. Je vais également sélectionner l'image du haut du blog. Et je vais définir sa largeur comme trois par rapport à la rampe. Hein ? Ensuite, allons-y et prenons soin des tendances. Éléments de titre H1. Je vais modifier la taille de sa police. Mettons-le à pleine RAM. Et modifiez également la largeur, faites-en une rampe de 30. OK, alors après cela, je vais sélectionner des articles de blog. Et fixons la marge supérieure à cinq fois la mémoire vive afin de pouvoir parcourir les articles vers le bas. Très bien, c'est tout à propos de la section Blog. Passons à la section Conduite, sélectionnons Contact Content et modifions-la à 90 %. En fait, nous avons besoin ici d'un signe de pourcentage. En plus de cela, je vais sélectionner le côté droit. Je veux dire l'élément d'entrée. Configurons avec 230 RAM Pour que la section Contact belle et passons au pied de page, changeons sa largeur, faisons-la à 90 % Très bien, c'est tout à propos de ce point d'arrêt. Passons à autre chose et trouvons le suivant. Je pense que le prochain point d' sera de 600 pixels. Créons donc une nouvelle requête multimédia CSS et définissons la largeur maximale à 600 pixels. Tout d'abord, encore une fois, je vais modifier la taille de police de l'élément HTML. Ça va être 35 %. Ensuite, je vais sélectionner les éléments du logo span. Et je vais modifier la taille de sa police. Faisons-en trois RAM. Nous devons donc prendre soin des éléments de saisie de la barre de recherche. Réglons sa largeur à 26 RAM. Nous devons également nous occuper des éléments de navigation. Donc, comme le développement et le changement avec make it 12 RAM. Maintenant, comme vous pouvez le voir, la partie supérieure du site Web est jolie. Passons au Débarquement. Je vais changer la hauteur. La hauteur de la fenêtre d' affichage sera de 75. Je vais également sélectionner les éléments de titre, qui sont placés sur la bannière, et modifions-en la largeur, en Ram. Suivant. Nous devons prendre soin du bouton. Les Bateson, fixons la largeur à 15 RAM. Ensuite, sélectionnons le premier Batson et changeons la position dans laquelle je me trouve La bonne position sera à 20 mètres de la rampe. D'accord, c'est donc tout à propos de l'en-tête du site Web. Passons à la section Produits. Réglons la hauteur à 90 degrés de hauteur de la fenêtre d'affichage. Maintenant, il peut voir que nous avons moins d'espace de journalisation. Nous allons donc sélectionner Produits. Haut. Nous avons besoin du centre d'alignement du texte et nous devons modifier la marge en bas Mettons-le sur trois rampes. Très bien, allons-y, sélectionnons les icônes et réglons leur largeur à 70 % De plus, nous avons besoin de Flex Wrap to Wrap pour placer les icônes sur différentes lignes. La prochaine chose à faire est de sélectionner Développement et de définir la largeur à 16 RAM. Nous devons également définir la marge sur, pour exécuter. On considère donc que le dernier élément a une marge sur le côté gauche. Je vais donc régler ce problème. Sélectionnez Développement. Je suis dans le dernier élément de la liste. Réglons la marge à droite sur, pour exécuter. Je peux voir maintenant que le problème est résolu. D'accord ? Ensuite, nous devons nous occuper de la section des blocs car la section des prix semble bonne. Allons-y et sélectionnons article, élément de champ. Modifiez la taille de la police. Réglons-le sur 1,5 RAM. Maintenant, ça a l'air bien. Et en fait, avec ce point de rupture, c'est terminé. Passons à autre chose et trouvons le point d'arrêt suivant, qui sera le dernier Allons-y et créons une nouvelle requête multimédia CSS en fonction de la largeur maximale de l'écran Je vais spécifier ici 450 pixels. Tout d'abord, modifions la taille de police de l'élément HTML. Ça va être 32 %. Ensuite, je vais m' occuper du logo. Je pense que ce serait bien si on cachait le texte. Je suis dans ce parlement en train d'utiliser un écran, aucun. Ensuite, je vais m'occuper de la section Produits. Nous allons sélectionner les produits et leur dire bonjour à hauteur de la fenêtre d'affichage. Très bien, ensuite, passons à autre chose et occupons-nous de la partie supérieure de la section des prix Je vais sélectionner un élément d'image. Réglons sa largeur à 25 RAM. Et aussi, personnalisons le titre H1. Je vais modifier la taille de la police. Réglons la taille de police à 3,5 RAM. Et puis changez la largeur, faites-en une enveloppe de 25. Très bien. Maintenant, je devais m'occuper de la section Contact. Allons-y et sélectionnons le côté gauche. Je veux dire contenu à gauche, H2, élément de titre. Réglons la taille de la police à un point, un piège. Ensuite, je vais sélectionner l'élément Contact left span. Et pour modifier la taille de sa police. Allons jusqu'à la rampe. Très bien, passons à autre chose et prenons soin du côté droit. Sélectionnez le contenu, n'est-ce pas ? Éléments d'entrée. Diminuez sa largeur, faites-en 25 RAM. Maintenant, il peut tout voir. Ça a l'air sympa et on peut dire que notre projet s'adapte à différentes tailles d'écran. Très bien, ce projet est terminé. J'espère que ça vous a plu. Nous pouvons maintenant passer à autre chose et commencer à créer notre prochain projet, qui, je l'espère, sera intéressant et vous permettra d' apprendre quelque chose de nouveau. Très bien, passons à autre chose. 13. Projet 2 - Aperçu: Bonjour et bienvenue sur notre deuxième projet, qui sera un site Web de portfolio personnel. De nos jours, ce type de site Web est très populaire et très demandé, donc je pense qu'il sera intéressant pour vous. Le projet concerne un développeur Web avec toutes ses compétences, travaux, ses projets, ses contacts, etc. Allons-y et décrivons le projet. Nous avons donc ici un en-tête du site Web dans lequel nous avons un logo, une bannière et une icône du menu Hamburger Si je clique dessus, la navigation apparaîtra avec de jolis effets. La bannière se compose de plusieurs éléments différents, dont l'image d'un développeur. Ensuite, nous avons une section sur les compétences qui nous montre les technologies et le niveau de connaissances d'un développeur Web. La section Compétences est suivie de la section Projet, où l'on peut trouver différents travaux d'un développeur. Ensuite, nous avons ici une section de contact avec quelques coordonnées et des champs de saisie. Enfin, vous pouvez trouver ici un pied de page simple et agréable. Le projet s'adapte à différentes tailles d'écran. Si j'inspecte la page, passe en mode réactif et vérifie le projet en quatre tailles d'écran différentes. Vous constaterez que le projet est réactif et qu'il s' affiche bien sur toutes les tailles d'écran. Encore une fois, tous les projets sont créés pour une taille d'écran très grande. Je suis sur des sites discrets avec 1920 pixels de largeur et 1080 pixels de hauteur. Donc, si vous utilisez une taille d'écran relativement petite, vous devez passer en mode réactif pendant les cours vous devez passer en mode réactif pendant les et spécifier la largeur et la hauteur de cette manière. Sinon, le projet ne s'affichera pas correctement sur un écran plus petit tant que nous ne le rendrons pas réactif. Veuillez donc en tenir compte. OK, donc c'est tout pour notre deuxième projet. Nous pouvons maintenant passer à autre chose et commencer à le construire 14. Projet 2 - Créer et styliser l'en-tête du site Web: Très bien, il est donc temps de commencer à construire nos projets. J'ai un dossier ici, le site web du portfolio. Allons-y et ouvrons-le dans VS Code. Ensuite, créez nos fichiers de travail pour HTML, CSS et aussi pour JavaScript. Ensuite, ouvrons le fichier index.html et créons un document HTML de base. Je vais changer le titre. Ce sera le site Web du portfolio. Ensuite, je vais lier le fichier CSS. Et relions également le fichier JavaScript à l'aide d'une balise de script. Très bien, ouvrons le navigateur de projets. Et je vais aussi placer l'éditeur et le navigateur côte à côte, comme ça En plus de cela, je vais utiliser quelques liens différents. Le premier sera Google Fonts. Tout au long de ce projet, nous utiliserons une police appelée write these. Nous allons sélectionner deux styles différents. Ensuite, nous rechercherons une autre police Google, appelée Cabot. Sélectionnez différents styles. Copiez ensuite le lien et collez-le dans l'élément principal. Très bien, nous avons ensuite besoin du CDN Font Awesome. Parce que nous allons utiliser deux polices différentes, des icônes géniales. Récupérons le lien, puis ouvrons la balise de lien et l'élément principal et collons le CDN. Très bien, donc tout est prêt. Allons-y et commençons à créer des commentaires de balisage HTML pour le conteneur Ensuite, je vais insérer ici la balise DIV avec le conteneur de classe Ensuite, nous avons besoin d'un autre commentaire pour la navigation. Créons un balisage HTML pour la navigation, nous avons besoin ici de la balise DIV avec l'icône du menu de classe, qui comprendra deux lignes différentes Le développement comportera deux classes, la ligne 1 et la ligne 1. Ensuite, nous avons besoin de la navigation. Je suis dans l'élément de navigation avec la classe Navigation. Il inclura une bordure de section. Et puis nous aurons ici des éléments de navigation. Insérons votre élément de lien avec la page d'accueil qui est dupliquée plusieurs fois et modifions les éléments de navigation Le second portera sur le sujet, puis nous aurons des projets. La prochaine sera Gallery. Ensuite, nous aurons des clients de blog. La prochaine sera la tarification, puis le contact. Très bien, c'est donc la navigation d' adéquation. Instituons de nouveaux commentaires pour Landing. Ouvrons la balise de section avec la classe Landing. Je vais créer la balise DIV avec la classe Section, en-tête PG avec le développeur Web de texte En fait, ce sera le titre H1, tag et non l'équipe Ensuite, nous avons besoin d'un logo avec un élément span avec le texte Web. Et puis à nouveau, étendez l'élément avec l'onglet de texte. Hein ? Ensuite, je vais créer Banner. Insérons ici la bordure de la section. Et nous aurons également ici des informations pour les développeurs. Il inclura une balise d'en-tête h3 avec le message d'accueil de la classe. Envoie un texto institutionnel, bonjour. Ensuite, nous aurons l'élément span. Je m'appelle Insérons vos éléments de titre H1 avec un nom de classe , puis insérons votre balise span avec le texte John Smith. Très bien. Après cela, je vais insérer votre balise d'en-tête h3 avec la classe Professeur, je veux dire profession. Introduisons quelques textes dans. Alors. Est-ce Span Tag, le développeur Web de contenu. Très bien. Ensuite, insérons un paragraphe avec la classe à propos de Et je vais créer un faux texte. Juste après. Je vais créer quelques icônes pour les réseaux sociaux. Mais d'abord, ouvrons le tag DIV avec les réseaux sociaux de la classe. Et ensuite je vais vous placer des icônes Font, Awesome. Le premier sera le FAA d'une marque, Facebook F. Ensuite, le second sera celui d'une marque sur Instagram Pour ce qui est du troisième, ce sera si mes marques ont un Twitter. Très bien, nous avons donc ici notre balisage HTML. Passons à autre chose et commençons à travailler sur le CV. Je vais créer un bouton avec le bouton de saisie et une classe. BTN, CV, BTN. Et aussi le texte de l'institut. CV avec vote négatif. Ensuite, nous avons besoin ici d' une balise span avec le texte, mes compétences. Ensuite, je vais créer une balise DIV avec l' image du développeur du nom de classe Ensuite, insérons votre image rappeur. Je veux dire que le développement sera l'emballage d'images pour sourds de la classe. Insérons une balise d'image , puis sélectionnons le chemin de l'image. Lorsque vous développez un point PNG. Très bien. L'image sera suivie d'un élément profond portant le nom de la classe deep experience. Et il possède également une autre étiquette span de classe Deep Work Institute portant le numéro 15. Et nous avons également besoin d'une autre travée. Des années d'expérience Dupliquons ce code. Changez ici. Le nom de la classe dont nous avons besoin de projets a changé de numéro, il va être plus de 400. Modifiez également le texte. Nous allons mettre en place des projets achevés. Très bien, voyons donc que nous avons ici notre balisage HTML pour la navigation et pour l'en-tête Commençons par écrire CSS plutôt que des commentaires pour les styles par défaut. Ensuite, je vais sélectionner chaque élément à l'aide d'un astérisque, définir une marge et les placer tous les deux à zéro. Je vais également définir la taille de la boîte, la zone de bordure. Ensuite, nous devons nous débarrasser de la décoration de texte. Définissons également le plan sur aucun. Et définissez la famille de polices. Pour les faire fonctionner sensoriellement. Très bien, après cela, je vais régler taille de police de l'élément HTML à 62,5 % car je vais utiliser la RAM comme unité de mesure Une mémoire vive sera égale à dix pixels. Ensuite, je vais insérer vos commentaires pour le conteneur. Nous allons sélectionner le conteneur. Définissez avec 100 % et définissez également la hauteur comme 100 % de hauteur de fenêtre d'affichage Changez ensuite l'arrière-plan. Je vais utiliser votre dégradé linéaire avec quelques couleurs différentes. La première va être 23293 la seconde va voir 3138 et avoir ici aussi la troisième Ça va être 232932. Nous avons donc ici la couleur de fond avec un dégradé linéaire Ensuite, je vais créer des commentaires pour le Landing. Sélectionnons le wrapper d'image du développeur et définissons sa largeur à 60 RAM Parce qu'à l'heure actuelle, l'image est trop grande. Nous avons besoin ici d'une hauteur de 60 RAM. Également. Allons-y, sélectionnons l'image elle-même et définissons une largeur et une hauteur de 100 %. Maintenant, l'image est devenue plus petite. Ensuite, je vais sélectionner l'élément de section. Définissons-le avec Make it hundreds for. Modifiez également la hauteur et définissez-la à 200 pour la hauteur de la fenêtre d'affichage. Je vais vous changer la hauteur du récipient. Ajoutons-le à 100 %. Maintenant, je vais sélectionner le titre d'arrière-plan de la section. Réglons sa position sur absolue. Nous devons également modifier la position de l'élément parent. Mettons-le sur relatif. Réglez ensuite le bas à zéro. Et nous avons également besoin de 50 % de gauche. Ensuite, pour un centrage parfait, nous devons transformer, traduire X avec -50 Après cela, je vais augmenter la taille de la police. Ça va être fini pour courir. Nous avons donc ici une rubrique de fond. Changeons la largeur pour qu'elle soit de 100 %. Également. Je vais aligner, en taxant le centre, puis en modifiant la famille de police Dans ce cas, je vais utiliser une police appelée curseur d'armoire. Maintenant, le titre semble bien meilleur. Ensuite, nous devons changer sa couleur. Ce sera du 3136 3D. C'est comme une couleur grise. De plus, nous avons besoin que l'opacité soit de 0,5. Maintenant, ça a l'air vraiment bien. Allons-y et sélectionnons Bannière. Je vais définir sa position comme absolue. Ensuite, nous avons besoin d'une position difficile à 50 % en position gauche, pieds pour cent. Ensuite, nous devons le centrer en utilisant Transform Translate -50 %. Et encore -50  % car nous devons centrer les éléments verticalement et horizontalement Très bien, après cela, je vais sélectionner Logo. Réglons sa position sur absolue. Ensuite, nous avons besoin d'une position difficile pour être pleine de RAM. Et puis positionnons cinq RAM. Modifiez ensuite la taille de la police. Ça va faire trois RAM. Nous avons donc ici le logo, il est placé dans le coin supérieur gauche de la page. Ensuite, je vais sélectionner les éléments de la plage. Le premier élément de travée. Changeons la couleur, rendons-la blanche. Nous avons donc ici le premier élément span. Dupliquons ce code et changeons le nom de la classe. Nous en avons besoin. Nous interchangeons la taille de police Ça va faire cinq RAM. Et je vais aussi changer la famille de polices. Je vais utiliser une mise en garde. Bien sûr, l'épaisseur de la police sera en gras. Et je vais aussi changer de couleur. Je vais utiliser la couleur verte, 298587. Très bien, nous avons donc ici notre logo, que je trouve très joli Ensuite, je vais afficher Flex pour la bannière. Ensuite, je vais sélectionner Bordure de section. Réglons sa largeur de 2,3 RAM. La hauteur sera de 55 RAM. Ensuite, je vais changer la couleur de fond. Utilisons ici BBB. Créez également l'espace sur le côté droit en utilisant Margin-Right Dix RAM Nous avons donc ici la bordure de section, la bordure de navigation. Donc, pour l'instant, je vais masquer la navigation pendant un moment. Instituons donc les commentaires. Sélectionnez ensuite Navigation et attribuez-le à ne pas afficher. Nous reviendrons à la navigation dans un moment. Allons-y et continuons à personnaliser l'en-tête du site Web. Je vais donc sélectionner Section border avec une pseudo-classe auparavant Mettons le contenu à vide. Ensuite, je vais définir la largeur sur trois RAM. La hauteur sera de trois Rahms. En fait, nous sommes en train de créer le cercle ici. Définissons donc la bordure à ce qu'elle pointe vers le plein sur la couleur BBB De plus, nous avons besoin que la couleur de fond soit comprise entre 1d22 et 8. Définissez ensuite la position sur positionnement absolu relatif de l'élément parent. Nous avons donc ici à l'avance des pseudo-éléments. Arrondissons-le en utilisant le rayon de bordure présent. Ensuite, la position dans laquelle je me trouve, la position de gauche sera de -1,65, comme suit C'est une position, il va faire moins trois RAM. Tu auras le cercle. Dupliquons ce code. Nous avons besoin d'un autre cercle, dans ce cas en utilisant le pseudo-élément after. Nous devons changer plusieurs choses à cet égard. Nous avons besoin. Position inférieure. Moins trois rampes. En fait, nous n'avons pas besoin de changer quoi que ce soit d'autre. Nous avons donc besoin d'une salutation. Modifiez la taille de la police. Ce sera 1,6 RAM. Ensuite, je vais transformer le texte en majuscules. Changez la couleur, faites-la blanche. De plus, nous avons besoin d'un espace entre les lettres. Nous avons ici un texte d'accueil. Ensuite, je vais sélectionner les éléments du span, le message d'accueil. Changeons la couleur, rendons-la verte. Ensuite, je vais sélectionner le nom. Changeons la taille de la police, faisons-en dix RAM. Nous avons besoin de 60 RAM. Créez également un espace autour de l'élément dans la marge entre la RAM zéro et la RAM zéro, alors la couleur sera blanche. Nous avons donc ici le nom. Ajoutons-y un peu d' ombre avec RGBA, couleur noire avec une opacité plus faible Nous avons donc ici un petit effet d'ombre. Ensuite, je vais sélectionner l'élément span, qui est placé dans le nom. La couleur va être verte. Le prénom est donc vert maintenant et il a l'air sympa. Ensuite, je vais sélectionner le prof. Modifiez la taille de la police. Ce sera 1,8 R &. Je vais également modifier l'épaisseur de la police. Réglons-le sur 300. Transforme le texte en majuscules. Changez également la couleur Ici, couleur blanche. Ensuite, créez un espace entre les lettres qui pointent vers la RAM. Créez également de l'espace au bas de l'échelle en utilisant la marge inférieure à six loyers Hein ? Maintenant, je vais sélectionner l' élément span du Prof. Changer la famille de polices Ça va être une mise en garde, c'est corrosif. Et je vais aussi régler la taille de la police à trois R &. Ensuite, je vais modifier l'épaisseur de la police, elle va être en gras. Transformez ensuite le texte en majuscules. Créez également de l'espace en utilisant la marge gauche, un point pour courir Nous avons donc ici la deuxième partie du Prof. Ensuite, nous avons besoin de : Réglons la largeur à 60 RAM Changez la famille de police, ce sera une mise en garde cursive. De plus, vous devez avoir une taille de police de 2,5 RAM. Ensuite, je vais changer la hauteur de ligne. Réglons-la sur un et changeons la couleur Fais-en un neuf, un BAE. Nous avons donc ici un paragraphe. Réglons la marge inférieure à cinq RAM afin de créer de l'espace en bas. Maintenant, nous devons nous occuper des icônes des réseaux sociaux. Réglons la marge inférieure à cinq RAM. Ensuite, je vais personnaliser trois icônes. C'est donc comme les réseaux sociaux. Irlande. Augmentez la taille de la police. Ce sera 2,5 RAM. Changez ensuite la couleur blanche. Je vais créer de l'espace sur le côté droit en utilisant margin-right to RAM Et puis utilisez un effet d'ombre. Les valeurs sont 0,5 gramme ou une RAM, et le RGB est une couleur noire avec une opacité de 0,3 D'accord, donc les icônes sont bien meilleures. Changeons le type du curseur, faisons-le pointer. Très bien, c'est tout pour les icônes des réseaux sociaux. Maintenant, je dois m' occuper du bouton. Réglons sa largeur à 20 RAM. Ensuite, la hauteur sera de six RAM. De plus, je vais définir la bordure pour qu'elle pointe vers un solide avec une couleur BBB Car le rayon sera de trois RAM. Je veux arrondir le motif. Changez ensuite la couleur d'arrière-plan, rendez-la transparente. Vous aurez donc le bouton. Occupons-nous du texte. La taille de la police sera d'un point pour la RAM. Changez, transformez, mettez-la en majuscules. Nous devons également définir la couleur sur blanc et également changer le curseur, le faire pointer. Très bien. La prochaine chose que je vais faire est de créer de l'espace sur le côté droit, il y aura sept RAM. Et maintenant, nous devons créer un effet de survol. Nous devons sélectionner BGN avant. Ajoutons du contenu à vide. Avec ça va être à 100 %. La hauteur sera également de 100 %. Changez ensuite la couleur d'arrière-plan, vous voyez une couleur verte. De plus, je vais régler border-radius sur trois RAM. Il doit être arrondi comme le bas. Réglez ensuite la position sur absolue. Nous devons entendre la position relative car le bouton est l'élément parent. Nous avons donc ici le pseudo-élément before. Mettons la position supérieure à zéro et cette position également à zéro. Alors maintenant, avant de découvrir le bouton , résolvons ce problème en utilisant la valeur de la propriété d'index moins dix Très bien, maintenant ça a l'air plutôt bien. Et nous devons masquer ces éléments à l'aide de l'échelle de transformation zéro. Une fois que nous avons survolé le bouton, le pseudo-élément ne devrait apparaître Nous allons donc sélectionner BTN avec over, suivi du pseudo-élément avant Réglons l'échelle à un. Et nous avons également besoin de votre transition pour rendre les faits plus intelligents. Utilisons également la transition ici. Très bien, nous devons maintenant créer une ligne à côté du bouton. Nous allons donc sélectionner CVP dix avec le pseudo-élément after. Mettons le contenu à vide. Ensuite, nous trouvons la largeur. Ça va faire cinq RAM. Nous avons besoin que la hauteur soit le point par rapport à la RAM. Changez ensuite la couleur d'arrière-plan. Ça va être BBB. Réglez donc la position sur absolue. La première position sera alors de 50 %. Pour ce qui est de la bonne position, ce sera moins cinq mille dollars. Nous avons donc ici la ligne. Ajoutons ici Transform, Translate Y -50  % afin de centrer parfaitement la ligne Très bien. Maintenant, nous avons besoin de CV span. Modifiez la taille de la police. Ce sera un point pour la RAM. Poids de la police. Je vais le régler sur 300. Transformez également le texte en majuscules, puis changez la couleur, mettez-le en blanc accord, de sorte que ce soit à peu près sur le côté gauche Passons à autre chose et prenons soin du côté droit. Je vais ajouter ici la couleur de fond. Utilisons la couleur verte autant que nécessaire, rayon de la bordure étant de 50 %. Ajoutons ici un rembourrage avec des valeurs différentes sur différents sites Nous avons également besoin ici d'un effet d'ombre. Les valeurs 01 RAM, 1 RAM et RGBA, la couleur noire et le point d'opacité indiquent un effet d'ombre Masquons la partie de l' image en utilisant overflow hidden. Très bien, maintenant nous avons besoin d' un peu d' espace entre les côtés gauche et droit. Sélectionnons les informations sur le développeur et définissons la marge droite à 15 runs. Nous avons donc maintenant un bien meilleur résultat. Sélectionnons cette œuvre. Réglez la largeur sur 25 RAM alors que la hauteur sera de 9 RAM. Nous avons également besoin ici de la couleur de fond d'un, de T22 à a. Ensuite, modifiez la taille de la police Ce sera un point pour la RAM. Nous avons besoin que le texte soit en majuscules. Changez la couleur, faites-la blanche. Il aura donc ce travail. C'est définir la bordure pour qu'elle pointe vers le bélier, le solide et le BBB. Nous avons également besoin de la RAM Border-Radius Six. Nous avons donc maintenant un bien meilleur résultat. Réglons l'affichage pour qu'il soit flexible. Nous devons envoyer le texte en utilisant le contenu justify-et aligner les éléments au centre Utilisons également le rembourrage, zéro pour ramper. Utilisez ensuite box-shadow avec les valeurs 0,5 gramme 1 gand, la couleur noire RGBA avec le point d'opacité Très bien, ensuite, définissons la position sur absolue. Et nous avons également besoin ici position relative de l'élément parent, qui est l'image du développeur. Ensuite, nous devons sélectionner séparément cette œuvre. Dans ce cas, vous augmentez votre expérience, réglez la position inférieure sur dix RAM. De plus, la bonne position sera quatre par rapport à la RAM. Ainsi, un élément est placé correctement. Sélectionnons que les projets définissent la position inférieure sur une RAM, puis la bonne position sera moins deux rampes. Très bien, donc tout semble bon. Maintenant, je vais sélectionner cette plage de travail. Neuvième enfant. Le premier élément de travée. Réglons la taille de police à trois RAM, soit 50 %. Alignons également le texte et le centre. Voilà, dupliquons ce code, changeons nth-child en, pour supprimer le centre d'alignement du texte Également la taille de la police, puis définissez la couleur sur le vert. Très bien, alors c'est ça. Tout a l'air parfait. Passons à la conférence suivante. 15. Projet 2 - Style et faire fonctionner la navigation: Très bien, donc une fois que nous en avons terminé avec un en-tête, il est temps de passer à autre chose et de travailler sur la navigation, qui est pour le moment masquée parce que nous lui avons assigné aucun affichage Allons-y et personnalisons l'icône du menu. Je vais régler avec 23 RAM. Ensuite, la hauteur sera de trois RAM. Et je vais y apposer une couleur de fond temporaire, C, C, C. Ensuite, nous devons définir la position. Ça va être réparé. La première position sera de cinq RAM. Pour ce qui est de la bonne position, il y aura également cinq RAM. Comme vous pouvez le voir, nous avons ici l'icône du menu. Débarrassons-nous de ces couleurs d'arrière-plan temporaires , puis sélectionnons la ligne. Configurons avec deux ou trois RAM car la hauteur va pointer vers la RAM. Ensuite, définissons la couleur d'arrière-plan sur BBB. Nous avons donc ici des lignes. Je vais régler l'affichage pour qu'il fléchisse pour l'icône du menu. Ensuite, nous devons changer de direction. Faisons-en une colonne et utilisons également l' espace de contenu de justification de manière uniforme. En plus de cela, nous devons aligner les éléments au centre et modifier le plus grossier, en le mettant à zéro Comme vous pouvez le voir, nous avons ici une jolie icône de menu à deux lignes. Ensuite, je vais supprimer le fait de ne rien afficher dans la navigation et la position définie, puis de le corriger. Alors nous devons le faire, si l'interposition doit être nulle Et nous avons également besoin ici la bonne position soit égale à zéro. Ensuite, réglons avec 250 RAM. Car la hauteur sera égale à cent dans la fenêtre d'affichage. Ensuite, je vais changer la couleur de fond. Ça va être de couleur grise. Nous avons ici la navigation. Réglons la propriété d'index sur 100 afin d'afficher la navigation. Très bien, maintenant nous avons également besoin d' un index Z pour l'icône du menu. Maintenant, l'icône s'affiche. Ensuite, je vais régler l'affichage sur Flexible et nous devons aligner les éléments de navigation en utilisant le centre d'alignement des éléments. De plus, je vais utiliser du rembourrage de l'oreillette gauche. Ensuite, allons-y et sélectionnons les éléments. Nous avons besoin de flexibilité d'affichage et nous devons changer de direction. Faisons-en une colonne. Les articles sont donc placés verticalement. Ensuite, je vais sélectionner l'élément de navigation lui-même. Je veux dire l'élément de lien. Réglons la taille de police à trois RAM. Modifiez également l'épaisseur de la police. Ça va être 300. Transformons ensuite le texte en majuscules Créez un espace entre les lettres et changez de couleur. Créez Color II. Nous avons également besoin d'espace, de marge, d'une RAM et de zéro. Comme vous pouvez le constater, les éléments de navigation sont beaux. Ensuite, je vais sélectionner les éléments du lien avec le pointeur de la souris. Changeons de couleur, rendons-la verte et utilisons également la transition pour un effet fluide. Alors maintenant, considérons que nous avons ici un bel effet de survol fluide Très bien, il est maintenant temps de faire fonctionner la navigation. Cachons-le. Réglez l'opposition à moins huit. Hum, pour ce qui est de la bonne position, nous avons besoin de -63 RAM Je vais également utiliser Transform Rotate. Z. La valeur va être de -15 degrés. Si je définis la position sur absolue, nous verrons la position de la navigation. Revenons ici, position fixe. Ainsi, une fois que nous avons cliqué sur l'icône, la navigation devrait apparaître. Nous avons besoin de JavaScript. Créons quelques variables. Icône de menu, sélectionnons-la à l' aide de la méthode QuerySelector. Nous devons spécifier ici le nom de la classe, l'icône du menu. Dupliquons ce code. Nous en avons besoin ici. Container a également modifié le nom de la variable. Ce sera un conteneur. Ensuite, je vais ajouter un écouteur d' événements à l' icône du menu à l'aide d'un événement de clic Et nous devons également transmettre une fonction de rappel. Ce sera une fonction en forme de flèche Une fois que nous avons cliqué sur l'icône du menu, nous devons ajouter une classe au conteneur. Nous avons donc besoin ici d'une propriété de liste de classes plutôt que de la méthode toggle. Et nous devons placer le nom de votre classe, qui va être modifié. OK, maintenant nous devons sélectionner Navigation avec un changement de classe et nous devons appliquer pour manger certains styles, position supérieure zéro et la position droite zéro. Nous avons également besoin ici de Transform, Rotate Z. Et nous avons ici pour passer la position par défaut zéro Une fois que nous avons cliqué sur l' icône du menu, la navigation apparaît. Pour que cela affecte le moteur, nous devons faire passer tous les points en 6 s. Maintenant, tout fonctionne bien et nous avons ici un bel effet. Ensuite, je vais régler l'opacité des tentatives à proximité à zéro et masquer la visibilité Nous devons masquer les éléments de navigation. Sélectionnez Navigation. Puis Bordure de section. Nous devons également masquer la frontière. Nous avons donc à nouveau besoin d'une opacité nulle et d'une visibilité cachée. Très bien, maintenant nous devons les afficher, que la navigation soit affichée. Nous devons à nouveau changer de classe, puis naviguer dans les éléments. Réglons l'opacité sur 1 et la visibilité sur Visible. Utilisez ensuite la transition avec un certain délai. Parce qu'une fois que nous aurons besoin de l'afficher dans la navigation, puis dans les éléments, faisons de même pour la bordure de la section. Utilisez le changement de classe et réglez l'opacité sur un et la visibilité pour le chauffer, désolé, visible Et utilisez également la transition, qui retarde encore une fois. OK, maintenant, tout fonctionne bien. Nous avons ici un effet cool. Une fois que nous avons affiché l'icône du menu. Très bien, enfin, je vais m'occuper des lignes. Nous devons définir la propriété de transformation pour faire pivoter Z de 45 degrés. Ce sera pour la première ligne. De plus, nous devons traduire pour déplacer la ligne avec la valeur 0,7 RAM et -0,1 rampe Faisons de même pour la ligne 2. Nous avons besoin ici de -45 degrés. Et nous devons également faire la transition. Maintenant, une fois que nous cliquons sur l'icône du menu, elle sera transformée en bouton de fermeture X. Tout fonctionne donc parfaitement. Très bien, c'est tout à propos de la navigation. Passons à la conférence suivante. 16. Projet 2 - Créer et personnaliser des compétences: Très bien, il est maintenant temps de créer notre prochaine section, qui sera une section de compétences Allons-y et insérons de nouveaux commentaires pour la section Compétences. Ouvrez ensuite la section, étiquetez avec un nom de classe. Compétences. Tout d'abord, je vais vous insérer quelques rubriques. Le premier sera le titre d' arrière-plan de la section H1 Il se dirigera probablement vers la section. Mes compétences. Ensuite, pour vous donner des instructions et pour les autres éléments du titre H1 Eh bien, le titre de la section du nom de la classe. Insérons vos compétences professionnelles. Après cela, je vais insérer l'élément de titre h3, qui sera un sous-titre Et il inclura une balise span. Avec des compétences. Ensuite, nous avons besoin de la bordure de section, la bordure que nous avons dans la première section. Ensuite, je vais créer des cartes. Au total, il y aura six cartes différentes. Ouvrons le tag DIV avec la carte Skills de la classe. Nous aurons donc ici des compétences avec les éléments de span, HTML et le pourcentage de biais, 95 % Ensuite, je vais créer un paragraphe avec un texte fictif Et nous avons également besoin de la progression, qui indiquera le pourcentage de ce cube. Très bien, alors c'est ça. Je vais dupliquer le code cinq fois car au total, j' aurai six cartes. Ensuite, je vais modifier les technologies et aussi les valeurs en pourcentage. Le second sera du CSS, à 90 %. Ensuite, nous aurons du JavaScript à 5 %. Le prochain sera React JS 75%. Ensuite, le suivant sera NodeJS, 85 %. Et la dernière technologie sera celle du futur exprimée en pourcentage de 75. Très bien, le balisage HTML de la section Compétences est prêt et il est maintenant temps d' écrire du Tout d'abord, répondons à vos commentaires. Des compétences et des compétences. Sélectionnez ensuite l'élément de section et la largeur et la hauteur définies. La largeur va être de 100 %. Quant à la hauteur , elle sera de 100. Hauteur de la fenêtre d'affichage. Et aussi position définie, Make it route. Très bien, après cela, je vais sélectionner la bordure de la section avec les compétences, le nom de la classe, définir la position sur absolue Et puis pour trouver Luck, la position sera 20 rampes. Ensuite, nous devrons le positionner à présent. Et pour centrer les éléments verticalement, utilisons Transform Translate Y -50 %. Comme vous pouvez le constater, la bordure est bien placée. Ensuite, je vais utiliser flexbox pour cet élément de section. Changez la direction, faites-en une colonne. Alignez les éléments au centre. On peut donc voir que les éléments sont placés horizontalement au centre. Ensuite, je vais sélectionner le titre de la section. Personnalisons-le. Changez la taille de la police, faites-en six RAM, puis nous aurons besoin de l'épaisseur de la police, ce sera 300 Transformez également le texte en majuscules. Créez ensuite un espace entre le treillis, placez-le de manière à ce qu'il pointe vers le bélier, changez de couleur, rendez-le blanc et créez également de l'espace en bas Trois RAM. Le titre semble donc bon. Il est maintenant temps de personnaliser le sous-titre. Modifiez la taille de la police. Ce sera en mémoire vive Ensuite, il nous faut de la couleur. Faisons en sorte qu'il soit vert. 29587. Transformez également le texte en majuscules Nous les avons donc ici, le rembourrage. Maintenant, nous devons sélectionner la balise span, qui est placée dans le sous-titre Changeons la famille de polices. Ça va être corrosif. Je vais donc modifier la taille de la police. Réglons-le sur 3,5 RAM. Transformez ensuite la taxation en majuscules plutôt qu'en majuscules, et modifiez également Ça va être blanc. Très bien, voilà, le rembourrage est vraiment joli Et maintenant, nous devons passer à autre chose et nous occuper des cartes. Sélectionnons un emballage. Réglez la largeur sur 140 RAM. Ensuite, placez la marge deux, l' atrium en haut, zéro. Sur le côté droit, zéro le Boltzmann peut faire de la RAM sur le côté gauche Ensuite, nous devons faire preuve de flexibilité et également d'enveloppement flexible avec le Value Wrap. Après cela, je vais sélectionner la carte elle-même. Tout d'abord, définissons la largeur. Ça va être quatre pour la RAM. Définissez ensuite la hauteur avec la valeur 18 RAM. Réglez la marge sur trois, étalez-la sur les quatre côtés. Nous avons donc besoin d'un peu de rembourrage avec les valeurs 0,3 RAM et de changer la couleur de fond Ccc pendant un moment. Nous avons donc ici les six cartes bien placées. Ensuite, je vais sélectionner la compétence, la régler sur Flexible. Nous devons également justifier l'espace entre les contenus afin de créer de l'espace. De plus, je vais créer de l'espace en bas en utilisant la marge du bas pour enfoncer. Ensuite, je vais sélectionner les balises span, définir la taille de police sur, pour exécuter. Changez la couleur, mettez-la en E, puis supprimez ces couleurs d'arrière-plan temporaires. Il peut donc voir la technologie et le pourcentage semble intéressant. Ensuite, je vais sélectionner les éléments de la plage, qui est le second. Changeons la couleur, rendons-la verte. Nous avons donc maintenant de meilleurs résultats. Après cela, je vais m' occuper du paragraphe. Changeons la famille de polices. Ce sera une mise en garde coercitive. Ensuite, je vais modifier la taille de la police. Réglons-le sur, pour enfoncer. Changez de couleur, mettez-la en BBB. Modifiez également la marge en bas, désolé, deux pour la RAM. Le paragraphe est donc très beau. Maintenant, nous devons nous occuper de la barre de progression. Allons-y avec 2,5 RAM. La hauteur sera de 2,5 RAM nous avons besoin que la couleur d'arrière-plan soit 122228 Ensuite, nous avons besoin d' un point de bordure pour enfoncer solidement. La couleur va être BBB. De plus, je vais arrondir les éléments en utilisant un rayon de bordure de 50 % et définir la position sur absolue En fait, nous avons besoin d'une position relative pour le parent, qui sera dans Skills Caught. Ensuite, nous avons besoin que la position inférieure soit de -1,25 RAM. Nous avons donc ici les cercles, et nous devons maintenant créer les lignes. Copions donc le nom de la classe et utilisons-le. Avant le pseudo-élément, définissez le contenu sur vide. Ensuite, nous avons besoin que la hauteur pointe vers la RAM. Changez ensuite la couleur d'arrière-plan. Utilisez la couleur verte. Position par rapport à l'absolu. Ensuite, nous avons besoin d' une position ferme pour atteindre 50 %. Pour la conception centrale, utilisons Transform Translate Y -50 pour cent Après cela, sélectionnons la carte des compétences, le neuvième enfant, suivie des compétences appelées progression, nous devons effacer la position pour être de dix pour Pour le premier élément. Dupliquons ce code et sélectionnons avant le pseudo-élément la bonne position. Ce sera 2,5 RAM. Et aussi la largeur, ça va être la 30e. Nous rampons. Nous avons donc ici la ligne. Copions ce code. Et maintenant, utilisez les pseudo-éléments après. La couleur va être 777. Je vais également dupliquer ce code ici. Passez de l'avant à l'après. Ensuite, la largeur sera égale à la pleine RAM. Quant à la bonne position, nous avons besoin ici de -4,3 RAM Très bien, maintenant nous avons des files d'attente. Dupliquons ce code. Modifiez les chiffres dont nous avons besoin ici. La bonne position sera de 50  % par rapport à la largeur de 31,5 RAM Pour ce qui est de la bonne position, ici, nous avons besoin de -6,1 RAM et la largeur sera de 5,8 Très bien, la deuxième carte est prête. Dupliquons ce code. Changez les chiffres. Nous en avons besoin ici. Trois. La bonne position sera de 20 %. Ensuite, je vais modifier la largeur. Ce sera 29,8 RAM. Désolé, cinq RAM. De plus, je vais changer la bonne position ici, huit points en RAM. Et la largeur sera également de 7,9 rampes. OK, donc les trois premiers accords sont prêts. Dupliquons maintenant ce code. Changez les chiffres. Ce sera pour la bonne position, juste 30 %. Ensuite, je vais modifier la largeur. Ce sera 25,5 RAM. Et nous avons également besoin ici que la position Y soit de 12 points par rapport à la rampe. Quant à la largeur, elle sera de 12 tours. Très bien. Ensuite, je vais copier la troisième carte car nous avons besoin de valeurs similaires. Changeons le nombre pour qu'il soit cinq. Voyons donc si la progression est prête. Ensuite, je vais copier la quatrième carte. Changez les chiffres, faites-en six. Maintenant, tout est prêt. Nous avons terminé de travailler sur la section Compétences. Passons à la suivante. 17. Projet 2 - Section Créer des projets: Très bien, une fois que nous en avons terminé avec la section Compétences, maintenant elle sonne, passez à autre chose et commencez à travailler sur la section suivante, qui sera une section de projet Nous allons donc insérer ici vos commentaires pour la section des projets. Ensuite, je vais ouvrir la balise de section avec un nom de classe, Projets. Allons-y et copions ce code à partir d'ici car nous avons besoin ici d'éléments de titre similaires. Allons-y et modifions ici mes projets. Alors nous avons besoin de ce portfolio. Et vous pouvez également modifier cet élément. Ensuite, il se projette. Hein ? Ensuite, je vais ouvrir la balise DIV pour les cartes de projet de classe Ensuite, nous avons besoin de la carte elle-même. Il inclura une image du projet d' élément Div. Ouvrons la balise d'image. Sélectionnez ensuite l'image dans le dossier d' images dont nous avons besoin ici pour le projet 1, PNG. Je vais également insérer ici une autre balise DIV avec les textes de la classe Utilisez plutôt Pontiac, ce sera du HTML. Ensuite, nous avons besoin d'une autre balise span, CSS. Et le troisième sera JavaScript. Ensuite, je vais utiliser la balise d'en-tête H3 avec un nom de projet de classe Dans ce cas, nous aurons un contact car le titre sera suivi du paragraphe avec un nom de classe, une description du projet, une tâche. Introduisons un texte factice. Et après cela, nous avons besoin d'un bouton. Le type va être le bouton. Nous avons également besoin ici d'un nom de classe, d'un projet, d'un BTN. Insérons ici. Voir le projet. Ensuite, nous avons besoin d'une icône Font Awesome pour la flèche. F pointu, F, flèche pleine. Hein ? OK, donc c'est tout pour la carte. Dupliquons-le cinq fois car au total, nous aurons six fiches de projet différentes. Allons-y et modifions les détails dont nous avons besoin pour projeter au format PNG. Modifiez ensuite le titre. Ce sera une calculatrice. Le prochain projet sera le projet 3. Ensuite, nous aurons le projet 4. Le titre sera Site Web. Ensuite, nous aurons le projet 5. Le nom va être Menu. Pour la dernière carte, nous aurons le projet 6. Et le titre va être « carte de profil ». Hein ? C'est tout pour les cartes. Le dernier élément dont nous avons besoin ici sera en bas avec un bouton de saisie. Nous avons également besoin ici d'un nom de classe. Ça va être BTN. Et insérons davantage votre vue. Enfin, je vais insérer votre élément DV, la classe Section Très bien, nous avons donc nos éléments. À l'heure actuelle, cette section a l'air moche. Alors allons-y et occupons-nous de cela. Je vais commencer à écrire du CSS, nous avons besoin ici de nouveaux commentaires pour les projets. Ensuite, je vais sélectionner l'image du projet. Allons-y avec la rampe 236. La hauteur sera de 20 RAM. Ensuite, nous devons sélectionner l'image elle-même. Commençons par 200 %. Ensuite, la hauteur sera de 100 %. Maintenant, les images sont devenues plus petites et nous avons maintenant un bien meilleur résultat. Nous allons sélectionner les éléments de section. Définissez la largeur. Ça va être 100 %. Ensuite, la hauteur sera également de 100 %. Ensuite, je vais définir la position sur relative. Nous avons également besoin ici d'un livre de flux. Changeons la direction qui va être la colonne. De plus, nous devons aligner les éléments au centre en utilisant l'option Aligner les éléments au centre. Les cartes sont placées au centre. Nous avons également ici la bordure et le titre de fond de la section. Très bien, ensuite, allons-y et sélectionnons Bordure de section. Réglons la hauteur à 140 RAM. Changer. La position va être absolue. La première position sera de 50 %. La bonne position sera 15 rampes. Nous devons également centrer la bordure à l'aide Transform Translate Y avec la valeur -50 %. Je vais également utiliser la marge zéro. Voyons donc que nous avons ici la bordure de section qui est placée sur le côté droit de cette section. Allons-y et sélectionnons la carte de projet. Réglez sa largeur sur quatre pour le bélier. La hauteur sera de 55 RAM, ce dont nous avons besoin pour changer la couleur d'arrière-plan. Vous voyez 1222 à 8. Ensuite, je vais sélectionner les cartes de projet. Le développement rapide a permis de fixer la largeur à 140 rampes. Nous avons donc besoin ici de livres flexibles. Utilisez ensuite le centre de contenu justify-pour envoyer vers les éléments Nous devons également emballer les articles flexibles et créer une marge sur le dessus. De plus, nous avons besoin d'un peu d'espace en bas car le rembourrage peut fonctionner Très bien, les cartes sont donc bien placées au centre de la section Ensuite, nous devons créer un espace entre les cartes. Utilisez la marge et réglez-la sur, pour qu'elle s'exécute. De plus, nous avons besoin d'un rembourrage de la RAM. Ensuite, je vais utiliser border-radius. La RAM Value One utilisera-t-elle Flexbox ? Nous devons ici changer de direction. Ce sera une colonne. Et je vais également utiliser l'espace de contenu de justification entre. Très bien, comme vous pouvez le voir, le titre d'arrière-plan recouvre la carte Nous allons donc résoudre ce problème à l'aide de la propriété index. Mettons-le à 100. Maintenant, le problème est résolu. Ensuite, je vais m' occuper des images dont nous avons besoin pour couvrir les pieds de l'objet. Et aussi, utilisons border-radius avec la valeur 1 de la RAM. Changez le curseur, pointez-le. Très bien, donc les voitures sont plus belles. Allons-y et prenons soin de l'effet de survol. Une fois que nous survolons les images, elles devraient s'élargir. Utilisons donc Transform Scale 1.3, puis utilisons la transition pour un effet fluide. On peut donc voir que nous avons ici un effet de survol, mais nous devons résoudre un problème Les images se chevauchent. Les chariots, nous devons donc déborder de valeur cachée. D'accord, maintenant nous avons un bien meilleur effet. Utilisons ici border-radius avec une valeur de 1 RAM. Maintenant, l'effet de survol est encore meilleur. Ensuite, je vais m' occuper des textes. Je veux dire, les technologies informatiques. Modifiez la taille de la police. Ce sera 1,6 RAM. Ensuite, nous avons besoin que la taille de la police soit de 300. Transformez également le texte en majuscules. Changez la couleur, mettez-la en vert. Nous avons donc ici les technologies. Créons de l'espace. Faites-en un loyer de 0,1, non ? Ensuite, je vais sélectionner l'emballage de textes. Définissons la marge supérieure à deux moins trois RAM. Afin de placer les éléments de la travée vers le haut. Ensuite, je vais sélectionner le nom du projet. Modifiez la taille de la police. Il va y en avoir trois. Rampe. Modifiez l'épaisseur de la police , jusqu'à 300, puis changez la couleur. Nous avons besoin ici d'une couleur blanche. Ensuite, nous avons besoin que la marge supérieure soit inférieure à deux RAM. Nous devons déplacer le nom vers le haut. Suivant. Je vais sélectionner la description du projet. Changeons la famille de polices. Ce sera une mise en garde. Cursif. Modifiez également la taille de la police, faites-la pointer vers une rampe. Changez la couleur que je vais utiliser ici, C, C, C. La description est donc belle. Ensuite, je vais m' occuper du bouton. Je veux dire que le projet BTN est réglé avec 220 RAM, alors la hauteur sera pleine de RAM Changez la couleur de fond, elle sera transparente. Ensuite, nous avons besoin que la taille de police soit de 1,8 RAM. Alignons le texte sur le côté gauche. Changez la couleur, faites-la blanche. Et il faut également qu'il n' y ait plus de bordure pour le parcours, donc il n'y aura aucun pointeur. D'accord ? Ensuite, je vais sélectionner Police, icône géniale. Je veux dire la flèche. Changeons la couleur, rendons-la verte. Et nous avons également besoin d'une marge sur le côté gauche. Ajoutons-le à une ligne. D'accord ? Le bouton est donc joli. Créons un petit effet de survol. Sélectionnez les ions lors du survol et modifiez la marge sur le côté gauche. Réglons-le sur, sur RAM et utilisons également la transition pour un effet plus fluide. Marge à gauche avec itération 0,3 s. Bon, nous avons donc ici un petit effet sympa Ensuite, je vais sélectionner le bouton, qui est placé en bas. Réglons la marge à cinq cadres en haut et zéros sur le reste des côtés Maintenant, tout semble bon. Et avec cette section, c'est terminé. Passons à autre chose. 18. Projet 2 - Créer et styliser: Très bien, une fois que nous en aurons terminé avec la section Compétences, il est maintenant temps de passer à autre chose et commencer à créer notre section suivante, qui sera une section de contact Allons-y et insérons de nouveaux commentaires pour la section Contact. Ensuite, je vais ouvrir la section, vérifier avec le nom de la classe. Contactez. Ensuite, je vais récupérer certains titres de la section précédente car nous aurons ici des éléments de titre similaires Collons donc ces éléments ici. Nous devons également modifier les valeurs du texte. Il faut que nous prenions contact avec moi. Ensuite, la rubrique suivante sera « Contacts ». Ensuite, nous aurons un peu de couple qui remplacera l'intérieur de cet élément de travée. Hein ? Ensuite, je vais ouvrir le chat, la bordure de la section de classe. Nous aurons également la même bordure dans cette section. Après la bordure de la section, je vais ouvrir la balise DIV avec la classe Contact Content, dans laquelle je vais insérer un autre contact de développement à gauche Sur le côté gauche, nous aurons l'adresse. Mettons ici l'icône Font Awesome, qui sera solide si un emplacement est pointillé. Ensuite, je vais insérer ici balise DIV avec le nom de classe Contact Info, dans laquelle nous aurons des éléments span, adresse, suivis d'un autre, span, New York, États-Unis Ensuite, je vais insérer vos éléments profonds et d'autres avec le nom de la classe freelance, dans lequel je vais placer l'icône Font Awesome avec les classes fa, utilisateur normal. Ensuite, nous avons besoin de Deep Dark avec la classe Contact Info, dans laquelle je vais placer deux éléments de span comme dans le cas précédent. Nous en avons besoin ici. Indépendant. Quant au deuxième élément span, il sera disponible dès maintenant. Très bien, allons-y, copions ce code deux fois et changeons le nom de la classe Ce sera un e-mail. Ensuite, nous devons changer le nom de la classe car l'icône Font Awesome va être enveloppe. Modifiez également les éléments du span, les e-mails et certains e-mails stupides John Smith sur Sign, web tab.com. OK, ensuite, je vais mettre ton téléphone. Modifiez également la police. Une icône géniale sera un téléphone à fax solide phasé Changez ensuite les éléments de la plage, vous aurez votre téléphone. Et je vais mettre ici numéro de téléphone fictif, les numéros 1 OK, après cela, je vais ouvrir un autre développement qui sera du bon côté. Ouvrons la balise de formulaire. Débarrassez-vous de l'attribut d'action. Dans l'élément de formulaire, je vais insérer une balise DIV avec les groupes de saisie de classe Ensuite, nous aurons un groupe de saisie. Ouvrons l'élément d'étiquette. Je vais mettre ici votre nom complet et l'icône Font Awesome, qui sera très solide. Un astérisque. Ensuite, je vais insérer ici une balise de saisie avec un type de texte. Très bien, allons-y et dupliquons le groupe d'entrée. Modifiez l'attribut for. Il va être envoyé par e-mail. De plus, nous avons besoin ici de votre adresse e-mail. Changez le type. Ensuite, je vais copier ce code. Modifiez l'attribut for, il sera sujet. Modifiez également votre texte, votre objet et nous avons besoin que vous saisissiez de A à B pour être taxé. Très bien, insérons à nouveau ici, groupe d'entrée. Changez l'étiquette, un message va être envoyé. Changer votre texte sera votre message. Au lieu de la balise de saisie, je vais utiliser ici la zone de texte. Ensuite, je vais ouvrir les éléments du bouton. Le type sera un bouton. Nous demanderons également à votre classe de contacter BTN. Et insérons ici envoyer un message. Très bien, alors attardons-nous sur le balisage HTML. Tous les éléments sont créés et nous devons maintenant écrire du CSS. Allons-y et insérons de nouveaux commentaires pour la section Contact. Tout d'abord, je vais sélectionner les éléments de la section. Mettons-nous à 200 %. Ensuite, la hauteur sera égale à cent de la hauteur de la fenêtre d'affichage et la position sera relative Ensuite, je vais utiliser Flexbox. Changeons de direction. Ce sera une colonne. Et je vais aussi aligner les éléments au centre. Vous pouvez donc voir que les objets sont placés au centre. Ensuite, je vais sélectionner Bordure de section. Définissons que cette position est absolue. Réglez la position des jambes sur 20 RAM. C'est probablement une position difficile, elle va atteindre 30 %. Comme vous pouvez le voir, dans cette section, embouteilleur est placé sur le côté gauche de cette action Ensuite, je vais sélectionner Contact Content. Je vais définir la largeur. Il faudra 120 RAM pour que la position soit absolue. La position va être de 50 %. Position gauche, 50  % également. Ensuite, pour un centrage parfait, je vais utiliser Transform Translate -50 %, puis -50 Ensuite, je vais régler la marge supérieure à sept rampes. Ensuite, je vais utiliser Flexbox. Cela justifie l' espace de contenu entre. Ensuite, utilisez les éléments d'alignement. Centre. D'accord, comme vous pouvez le voir, les deux côtés sont bien placés. Je suis du côté gauche et du côté droit. Ensuite, je vais te faire sortir du côté gauche. Sélectionnez l'élément profond dans le Contact de gauche. Réglez l'écran pour qu'il soit flexible. Ensuite, utilisez les éléments d'alignement, centrez. Et nous avons besoin de marge. Il y aura trois rampes et zéro. D'accord ? Après cela, je vais sélectionner les icônes Font Awesome sur le côté gauche, définissons-les avec 25 RAM. Ensuite, la hauteur sera également de cinq images. Ensuite, je vais changer la couleur de fond. Ce sera un D22 bordure de manière à ce que la rampe soit solide La couleur va être BBB. Nous avons donc ici les icônes. Ensuite, je vais arrondir ces cases en utilisant un rayon de bordure de 50 %. Et je vais aussi placer les articles au centre en utilisant Flexbox. Nous devons justifier le centre de contenu et aligner les éléments au centre. On peut donc voir que les icônes sont parfaitement placées au centre. Ensuite, je vais augmenter la taille de la police. Ce sera une rampe. Ensuite, je vais changer de couleur. Ça va être E. Créez également de l'espace sur le côté droit, ça va faire neuf RAM. Maintenant, il peut voir les icônes. Aie l'air bien. Allons-y et sélectionnons l'icône, suivie du pseudo-élément après. Le continent va être vide. Nous aurons alors de la largeur. Pour la RAM. La hauteur sera le point par rapport à la rampe. Nous créons des lignes mélodiques. Ensuite, nous aurons la couleur de fond, BBB, et la position sera absolue De plus, nous avons besoin ici que la position soit relative pour l'élément parent. Après cela, définissons la première position sera de 50 %. Nous devons également centrer la ligne à l'aide de Transform, Translate Y avec la valeur -50 %. Définissons également que la bonne position sera de moins 4 M. On peut voir que nous avons ici des lignes sur le côté droit des icônes. Ensuite, allons-y et sélectionnons jeu d'informations de contact avec 220 RAM. Ensuite, nous devons utiliser Flexbox. Changez de direction en utilisant la colonne. Nous avons ici. Le texte d'information est aligné au centre. Ensuite, je vais sélectionner les éléments de la plage. Modifiez la largeur. Ça va être cent pour cent. Ensuite, je vais sélectionner les premiers éléments de la plage à l'aide du sélecteur F enfant spécifié ici Premièrement, modifiez la famille de polices. Ce sera un cours de mise en garde. Ensuite, nous devons augmenter la taille de la police. Réglons-le sur trois RAM. Modifiez l'épaisseur de la police. Je vais le mettre en gras. La couleur va être blanche. Je vais également créer un fond spécialisé en utilisant la RAM de Margin Bottom 0,5 afin que vous puissiez voir le nom de l'élément span dans le premier élément. Ça a l'air bien. Allons-y et sélectionnons le second. Changez ici, le nombre, ça va être deux. Dans ce cas, la taille de la police sera de 1,6 RAM. Le poids de la police sera de 300. Pour ce qui est de la couleur, je vais en faire 777. Maintenant, les deux éléments de la travée sont plutôt jolis. Allons-y et sélectionnons le côté droit. Je suis dans le contrat, non ? Réglez la largeur sur 60 RAM. La hauteur sera également de 60 RAM. Utilisez ensuite à nouveau Flexbox, puis justify-content center et alignez les éléments au centre et Très bien. Ensuite, allons-y et sélectionnons les groupes de saisie. Utilisez à nouveau Display Flex. Ensuite, je vais sélectionner le groupe d'entrée lui-même. Encore une fois, affichez Flex. Changez la direction, faites-en une colonne. Donc, étape par étape, les éléments d'entrée. De plus en plus gentil. Ensuite, nous avons besoin de l'étiquette du groupe d'entrée. Modifiez la taille de la police. Ça va faire 1,6 RAM alors que nous avons besoin de 300 font-weight. Et créez également un espace entre les lettres. Utilise-le juste comme base. Ensuite, nous devons transformer le texte en majuscules et également changer la couleur, le rendre blanc Ensuite, définissons la marge sur la rampe 001,5 et sur la rampe. Il peut donc voir l'étiquette. Ayez l'air bien. Ensuite, nous avons besoin d'une entrée, d' un groupe, d'un élément d'étiquette I. Je suis dans l' icône Font Awesome, l'astérisque. Réglons la taille de la police à un point pour la modifier et modifier la couleur. Utilisez la couleur verte. Hein ? Ensuite, je vais sélectionner l'entrée du groupe de saisie, suivie de la zone de texte suivie de la Nous avons besoin de tuiles CSS similaires, disons bonjour à six RAM. Nous avons également besoin que la marge soit de 03, rampe, de cinq REM et de zéro. Dan, je vais changer la couleur de fond. Ce sera un à cause d' une bordure définie qui pointe vers Rams Solid et 777 Alors maintenant, les entrées sont belles. Ensuite, nous avons besoin du rayon pour arrondir les coins, régler sur trois rampes. Changer la taille de la police sera de 1,6 R& alors que l'épaisseur de la police sera de 300 et changer la couleur, la rendre blanche Ensuite, nous avons besoin d'espace à l'intérieur des entrées. Réglez le rembourrage sur une rampe ou une rampe, puis à nouveau sur une RAM et lisez le côté gauche du mandu Après cela, je vais sélectionner l' entrée elle-même, régler la largeur à 35 RAM. Ensuite, je vais sélectionner la zone de texte. Je vais modifier sa hauteur. Faisons-en 12 rampes, nous avons également besoin ici d' une marge en bas de la RAM. Et je vais désactiver la fonction de redimensionnement. Réglons le redimensionnement sur aucun. OK, enfin, je vais personnaliser le bouton en bas. Nous allons donc le sélectionner. Réglez la largeur sur 100 % moins trois RAM alors que la hauteur sera de cinq rampes. Revenons à la couleur, utilisons la couleur verte. De plus, nous avons besoin de points de bordure solides et la couleur doit être Bb B. Ensuite, nous devons arrondir les coins en utilisant le rayon de bordure La valeur sera de trois RAM. Changez la couleur, faites-la blanche. Et nous devons également ici transformer le texte en majuscules. Modifiez ensuite la taille de la police. Ce sera 1,6 RAM. Et nous avons également besoin ici que la taille de la police soit de 300. Créez un espace en utilisant l'espacement des lettres, pointez vers une rampe, et nous devons changer le curseur. Mettons-le au clair. Très bien, disons que la section Contact est plutôt jolie Passons à la section suivante. 19. Projet 2 - Créer et personnaliser le pied de page du site Web: Très bien, après la section Contact, dois maintenant passer à autre chose et commencer à créer la dernière partie du site Web, je dois maintenant passer à autre chose et commencer à créer la dernière partie du site Web, qui sera un pied de Le pied de page va être simple. Allons-y et insérons et affichons les commentaires. Ensuite, je vais ouvrir un pied de page, placer le pied page de la classe. Nous allons vous insérer. Suivez l'évolution grâce aux icônes de classe. Je vais récupérer ces icônes des réseaux sociaux d'ici. Allons-y et collez-les dans les icônes. Je vais ouvrir TikTok pour classer les droits d'auteur. Sécurisons un paragraphe avec un texte protégé par le droit d'auteur. Nous avons besoin ici d'un signe de copyright, qui est une entité HTML5 Ensuite, il sera suivi du texte Web. Ensuite, nous avons besoin d'une balise span avec la valeur deaf. De plus, je vais vous transmettre tous droits réservés. 2023. Ensuite, ouvrons données avec l' ordre de classe N placé ici, Paragraphe créé par des éléments de span et du code et Create. D'accord, donc c'est tout à propos du balisage HTML pour le pied de page. Allons-y et commençons à écrire du CSS. Insérez ici un pied de page et un pied de page. Je suis dans les commentaires. Ensuite, je vais sélectionner Footer. Mettons-nous à 200 %. La hauteur sera de dix rampes. Je vais donc placer Boulder en haut avec les valeurs 0,1 run solid et la couleur 444 De plus, je vais utiliser Display Flex pour justifier l'espace de contenu de manière uniforme. Et je vais également utiliser l'alignement des éléments au centre afin de centrer les éléments flexibles. OK, après cela, allons-y et sélectionnons les icônes, puis l'île. Nous avons besoin ici de la taille de la police, pour réduire la couleur , ce sera le blanc. Je vais donc utiliser la marge, non ? Pour courir. Et puis vous avez un effet d'ombre utilisant une ombre de texte, 0,5 gramme pour 1 gand Si c'est la couleur que je vais utiliser RGBA, couleur noire avec une opacité plus faible Et changer de cap va également le faire ressortir. OK, donc c'est tout pour les icônes des réseaux sociaux. Ensuite, je vais m' occuper du texte du copyright. Et je vais aussi sélectionner l'auteur. Réglez la taille de police sur 1,6 RAM. Changez de couleur, blanc. Vous pouvez donc voir que le texte est devenu blanc et plus grand. Utilisons le copyright, Span. Définissez la famille de police de manière à mettre en garde cursive. Je vais donc définir la taille de police sur 2,5. Rime. Modifiez l'épaisseur de la police, elle sera en gras, et changez également la couleur Je vais utiliser la couleur verte. Ensuite, définissez la marge droite sur une rampe. Très bien, nous avons donc ici un logo. Allons-y et sélectionnons author span. En fait, je vais copier ce code d'ici. Alors allons-y, le pied de page est vraiment joli et en fait toutes les sections sont terminées Comme vous pouvez le constater, nous avons ici un petit problème. La navigation s' affiche derrière le panier. Résolvons donc ce problème en utilisant l'indice 150. OK, alors c'est ça. Tout semble parfait. La seule chose que j'ai eu à faire est de rendre le projet réactif aux différentes tailles d'écran. Passons donc à autre chose. 20. Projet 2 - Rendre le projet réactif: Très bien, nous avons fini de créer et de personnaliser nos sections du projet, et nous devons maintenant le rendre réactif aux différentes tailles d' écran Allons-y, inspectons la page et passons en mode réactif. Nous devons trouver notre premier point de rupture sur lequel nous devons apporter des modifications. Je pense donc que le premier point d' sera de 1 700 pixels Allons-y et insérons de nouveaux commentaires pour le mode réactif. Ensuite, utilisez la requête multimédia CSS. Je vais spécifier ici une largeur maximale de 1 700 pixels. La première chose à faire est donc de modifier la taille de police de l'élément HTML. Portons-le à 57 %. Les éléments sont donc devenus relativement plus petits. Ensuite, je vais sélectionner Navigation et modifier la bonne position. Ça va faire moins sept pour la RAM. Je vais également sélectionner Bordure de section pour la section Compétences. Changeons la position de la longueur, faisons-en dix RAM. Ensuite, je vais sélectionner la bordure de la section Contact. Changeons la position de gauche, faisons dix courses. Nous allons donc vérifier le projet. En fait, nous devons adhérer à S car le code ne fonctionnait pas. OK, alors ensuite, nous devons trouver un autre point d'arrêt Et je pense qu'il devrait être de 1 500 pixels. Nous allons donc créer une nouvelle requête multimédia CSS et spécifier ici la largeur maximale, qui sera de 1 500 pixels Encore une fois, je vais modifier la taille de police de l'élément HTML. Mettons-le à 52 %. Ensuite, je vais personnaliser le nom. Changeons la taille de la police, faisons-en sept RAM. Modifiez également la largeur, ce sera pour fonctionner. OK, ensuite, je vais sélectionner À propos et modifier la largeur. Faisons-en 45 RAM. Après cela, je vais sélectionner Developer Image Wrapper. Réglons la largeur à 40 RAM. Définissez également la hauteur, faites-en également 40 RAM. Ensuite, nous devons nous occuper du travail sur les applications. Changeons la largeur. Ça va coûter 20 dollars de loyer pour la hauteur, je vais en faire sept RAM. Ensuite, le rembourrage sera de 0,1 RAM sur les côtés gauche et droit Ensuite, nous devons modifier leur position dans le cadre de leur travail. Sélectionnez un élément de plage. Un neuvième enfant. Modifiez la taille de la police, modifiez-la en rampe. Et la largeur va être de 35. Présent. OK, alors maintenant je vais sélectionner l'onglet Expérience et modifier. La position la plus basse sera de 22 points pour la bonne position, je vais la régler à 25 points. Ensuite, je vais m' occuper des sourds. Des projets. Changer. La position la plus basse sera de 14 % de loyer. Pour trouver la bonne position, je vais faire moins quatre rampes. Très bien. Ensuite, je vais m'occuper du titre de fond. Sélectionnons le titre de la section BG, changeons la taille de la police. Ça va faire 23 R &. Ensuite, occupons-nous de la section Compétences. Je vais sélectionner les compétences et modifier la taille à cent pour cent. Réglons également le rembourrage à dix RAM et zéro, puis à 20 RAM et zéro Ensuite, je vais sélectionner les cartes, l' encapsuler, changer la largeur, le faire courir à 100 Très bien, maintenant les cartes sont plutôt jolies. Ensuite, sélectionnons Section, bordure pour la section Compétences. Et je vais changer la hauteur. Ça va être à cinq RAM. Maintenant, je trouve que la bordure est plutôt jolie. Ensuite, passons à autre chose et occupons-nous de la section Projet. Sélectionnons les fiches de projet. Je veux dire que la largeur de l'emballage a été réglée sur 100 Ren. Alors maintenant, tout va bien. Nous devons nous occuper de la section Contact. Sélectionnons Contact Content et définissons la largeur à 110 RAM. Ok, donc tout a l'air bien. Passons au point de rupture suivant. Le prochain point d'arrêt sera donc, je pense, de 1 200 pixels. Allons-y et créons une nouvelle requête multimédia CSS. Définissez la largeur maximale sur 100, désolé, 1 200 pixels. Modifiez la taille de police de l'élément HTML. Je vais le fixer à 45 %. Ensuite, je vais m'occuper de l'action Projets. Nous allons donc sélectionner Projets suivis de la bordure de la section. Changer. La bonne position sera dix RAM. Maintenant, ça a l'air bien. Ensuite, nous devons nous occuper de la section Contact. Sélectionnez le contenu du contact, définissez la largeur sur 100 rampes. Nous devons également modifier, justifier le contenu. Espacez-le uniformément. Ensuite, nous devons sélectionner Contact, n'est-ce pas ? Utilisons Margin-Right, soit -15 RAM. Nous devons également personnaliser les groupes de saisie. Changeons la direction, créez une colonne. Alors. Nous devons sélectionner les groupes d'entrées, puis les entrées. Modifiez la largeur. Portons à 60 Ran. OK, alors maintenant la section Contact semble bonne. Et en fait, nous pouvons continuer et trouver le point d'arrêt suivant, qui sera de 900 pixels Allons-y et créons une nouvelle requête multimédia CSS. Configurez la largeur maximale à 900 pixels. Nous devons modifier la taille de police de l'élément HTML. Ce sera 39 %. Ensuite, je vais sélectionner Bordure de section et la masquer complètement pour toutes ces sections. Ensuite, je vais sélectionner Section, titre d'arrière-plan. Modifiez la taille de la police. Ça va faire 20 R&. Ensuite, je vais m'occuper de la section Contact. Allons-y, sélectionnons Contact Content et changeons la largeur pour qu'elle soit de cent rampes. De plus, je vais sélectionner Contact, n'est-ce pas ? Réglons la marge à droite, deux moins cinq RAM. La section Contact semble donc bonne. Et en fait, nous pouvons continuer et trouver le point d'arrêt suivant, qui sera de 700 pixels Créons donc une nouvelle requête multimédia sur Caesars. Changez la largeur maximale, elle sera de 700 pixels. Sélectionnez HTML et modifiez la taille de police. Maintenant, ce sera 35 %. Ensuite, je vais sélectionner le titre d'arrière-plan de la section et modifier la taille de la police. Réglons-le à 17 RAM. Ensuite, je vais sélectionner l'image du développeur et la masquer. Ensuite, allons-y et sélectionnons les cartes de compétences. Je veux dire le wrapper configuré avec 260 RAM. Ensuite, je vais dupliquer ce code, les compétences modifiées dans Projects. Et après cela, nous devons prendre ici la section Contact. Allons-y, sélectionnons Contact left et masquons-le. Je vais également sélectionner Contact Content et régler sa largeur sur 70 Ran. OK, donc pour ce qui est du point d'arrêt, je pense que c'est terminé Il est maintenant temps de trouver le dernier point d'arrêt. Allons-y et créons une nouvelle requête multimédia CSS. Ensuite, je vais spécifier la largeur maximale à 500 pixels. Prenons ici la navigation. Je voudrais l'étendre sur la page. Réglons donc à 200 % et changeons également la bonne position. Ça va coûter -100 000 dollars , ce dont nous avons besoin pour placer les objets au centre OK, après cela, je vais sélectionner Bannière, régler sa largeur à 70%. Ensuite, nous devons sélectionner le titre de la section et utiliser le centre d'alignement du texte afin d'aligner les titres au centre des La prochaine chose à faire est de vous occuper de la section Contact. Allons-y et sélectionnons Contact Content set with 255 ramp. Nous devons également sélectionner l'élément d'entrée. Réglez la largeur sur 50. Courez. OK, donc je trouve que tout semble très bien. Nous pouvons ajouter encore une chose. Vous savez, les cartes ont l'air mignonnes et leur largeur est également réglée à 55 RAM. Ensuite, je vais sélectionner les icônes du pied de page et les mettre en hauteur. OK, donc je pense que nous avons enfin terminé et que tout semble plutôt bien. Le projet est Responsive. Je pense donc que vous avez apprécié ce projet. Nous pouvons maintenant passer à autre chose et commencer à créer le suivant. 21. Projet 3 - Aperçu: Bonjour et bienvenue sur votre prochain projet, qui sera un site Web sur l'architecture. Le projet comprend deux sections différentes. Alors allons-y et passons en revue chacune d'elles. Nous allons commencer à créer le projet en travaillant sur le pas pauvre et la navigation. Nous avons ici le logo, la barre de recherche et une icône du menu Hamburger Si je clique dessus, la barre de navigation s'affichera correctement. Si je passe la souris sur les éléments de navigation, nous obtiendrons cet effet sympa et cool Après la navigation, vous créerez ces bannières simples et agréables dans lesquelles nous avons quelques éléments différents. La bannière est suivie d'une section À propos composée de deux parties. Sur le côté gauche, nous avons quelques éléments de texte et le bouton s'appelle le côté droit. Il se compose d'un cadre et d'une image. Et en plus de cela, nous avons ici une partie sympa et cool au bas de la section. En fait, ces éléments apparaîtront dans chaque section. Ensuite, nous avons la section Projet, qui comprend cinq cartes avec de jolis effets de finition. Ensuite, constituez la section clients, qui se compose de deux cartes différentes de celles que nous avions : une section Contact et un simple pied de page en bas de page Le projet s'adapte à différentes tailles d'écran. Si j'inspecte la page, passe en mode réactif et je vérifie le projet en quatre tailles d'écran différentes. Vous constaterez que le projet est réactif et qu'il est beau en moyenne, quelle que soit la taille d'écran. Encore une fois, les projets sont-ils créés pour une très grande taille d'écran ? Je suis partante. Cela correspond à 1920 pixels de largeur et 1080 pixels de hauteur Donc, si vous utilisez une taille d'écran relativement plus petite, vous devez passer en mode réactif pendant les cours vous devez passer en mode réactif pendant les et spécifier la largeur et la hauteur de cette manière. Sinon, le projet ne s'affichera pas correctement sur un petit écran tant que nous ne le rendrons pas réactif. Veuillez donc en tenir compte. Très bien, c'est tout pour notre troisième projet. Allons-y et commençons à travailler dessus 22. Projet 3 - Créer et styliser la navigation - Partie 1: Très bien, alors allons-y et commençons à créer un nouveau projet J'ai un dossier ici. Allons-y et ouvrons-le dans VS Code. Ensuite, nous devons créer des fichiers ou des fichiers de travail pour HTML, CSS et JavaScript. Nous avons besoin de index.html, puis de style.css. Et le suivant sera script.js. Ouvrez ensuite le fichier index.html et créez un document HTML de base. Tout d'abord, je vais changer le titre, ce sera architecture. Ensuite, nous devons lier nos fichiers. Le premier sera un fichier CSS. Ensuite, je vais ouvrir la balise script et spécifier dans l' attribut source le chemin du fichier JavaScript. Ouvrons le projet dans le navigateur, puis plaçons l'éditeur et le navigateur côte à côte. Comme ça. Très bien, je vais chercher quelques liens différents. Le premier sera Font Awesome CDN, car nous allons utiliser icônes Font Awesome tout au long du projet Copions le lien. Ensuite, je vais ouvrir la balise de lien dans l'élément principal et coller ici le CDN. Ensuite, je vais visiter le site Web de Google Fonts car nous allons utiliser certaines polices Google. Allons-y et cherchons la police appelée Able. Je vais sélectionner cette vignette. Le prochain sera notre premier laboratoire. Nous allons sélectionner le style. Ensuite, je vais copier le lien et le coller dans l'en-tête. Très bien, nous sommes donc prêts à commencer à écrire le code. Tout d'abord, je vais créer un balisage HTML. Insérons vos commentaires pour le conteneur. Ensuite, je vais ouvrir la balise DIV avec le conteneur de noms de classe, dans lequel je vais insérer des commentaires pour la barre de navigation Ouvrez ensuite l'élément de navigation HTML5 avec le nom de la classe navbar, dans lequel je vais insérer une balise DIV avec les classes brand, brand Maintenant quatre. Ensuite, je vais ouvrir une autre balise DIV avec le logo de la classe Un. Changeons ici les noms des classes. Nous avons besoin d'un logo et d'un logo trois. Ensuite, nous avons besoin ici des éléments de span dans lesquels je vais insérer l'architecture du texte. OK, c'est tout pour le logo. Ensuite, nous devons créer une barre de recherche. Insérons ici des éléments de saisie avec un type de texte et un attribut d'espace réservé Qu'est-ce que tu cherches ? Et nous avons également besoin ici d'une icône Font Awesome, qui sera une icône de recherche. Nous avons besoin de cours, fa solid, fa, loupe. D'accord, c'est donc tout à propos la première partie de la navigation. Nous devons maintenant créer un menu de hamburgers. Insérons ici l'icône du menu, sur laquelle nous aurons trois lignes, la première, la deuxième et la troisième couche. Ensuite, nous avons besoin de la balise DIV, qui sera une navigation Je vais insérer ici quelques liens différents. Le premier va rentrer chez lui. Ensuite, nous aurons à peu près les projets suivants. Ensuite, nous aurons un blog. prochain sera Clients et pour le dernier article, je vais mettre ici Contact. OK, alors en fait, attardons-nous sur le balisage HTML. Maintenant, je vais commencer à écrire du CSS. Tout d'abord, nous allons créer des commentaires pour les styles par défaut. Ensuite, je vais sélectionner chaque élément à l'aide d'un astérisque Et je vais mettre la marge et remplissage des deux à zéro. Ensuite, nous devons définir la taille de la boîte borderbox. Je vais également modifier la famille de polices. Utilisons ici la table. Sans-serif Également. Je vais me débarrasser de la décoration de texte Il n'y en aura aucune. Et je vais également définir le plan sur aucun. Les styles par défaut sont donc appliqués aux éléments. Ensuite, je vais modifier la taille de police de l'élément HTML. Ce sera 62,5  % parce que nous allons utiliser la RAM comme unité de mesure OK, allons-y et commençons à personnaliser le conteneur. Insérez ici les commentaires, puis sélectionnez le conteneur. Tout d'abord, je vais définir la largeur. Ça va être 100 %. En ce qui concerne la hauteur, je vais la mettre à 100 % de hauteur de fenêtre d'affichage Ensuite, changeons la couleur d'arrière-plan. Ça va être 2020-2020. C'est comme une couleur gris foncé. Ensuite, je vais placer vos commentaires dans la barre de navigation. Allons-y et définissons la largeur à 100 %. Pour ce qui est de la hauteur, ce sera. Peut RAM. Je vais également changer la couleur de fond. Utilisons ici la même couleur que celle que nous utilisons pour le contenant. Ensuite, je vais définir la position qui va être fixée. La première position sera nulle. La position de décalage sera également nulle. Ensuite, je vais sélectionner le logo 1. Disons avec 26 RAM que la hauteur sera également de six RAM. Réglons la RAM de la bordure 2.4, solide. Et la couleur va être H1B, c'est comme si, et la couleur jaune Dupliquons ce code et changeons le nom de la classe. Nous avons besoin de votre logo 2, changeons la largeur et la hauteur. Je vais les régler à cinq RAM. Supprime la bordure et change la couleur d'arrière-plan. Utilisez ici, couleur gris foncé. Très bien, pour le moment, le logo 2 n'est pas visible car nous avons ici la même couleur Réglons la position sur absolue. En fait, je vais également sélectionner des marques et définir la position sur absolue. Ensuite, nous devons nous positionner à 50 %. La chance va être celle d'un tram. Nous devons également centrer les éléments à l'aide Transform Translate Y -50 %. D'accord. Revenons au logo pour définir la position sur une RAM. La position de gauche sera également une RAM. À présent, l'élément est visible. Ensuite, je vais sélectionner le logo 3. La troisième partie du logo. Réglons la largeur à cinq RAM, alors la hauteur sera également de cinq pour M. Modifiez la bordure. Ce sera un point zéro pour la RAM, solide avec une couleur jaune. Ensuite, je vais changer la couleur de fond. Il va être gris foncé. Et maintenant, nous devons nous occuper de la position. Ça va être absolu. La meilleure position sera de percuter. Cette position sera également celle de percuter. Maintenant, le logo est plus beau. Réglons ici Display Flex. Ensuite, je vais sélectionner l'élément span et la marque. Modifiez la taille de la police. Ça va faire trois béliers. Ensuite, je vais changer la couleur. Mettons-le en blanc. De plus, nous avons besoin d'un espace entre les lettres. Réglons-le sur 0,3 rampe. Nous avons donc ici cet élément de casserole. Ensuite, je vais créer de l'espace, disons une marge de 1,5 sur une rampe et de 0,03 RAM sur le côté gauche Après cela, je vais sélectionner la barre de recherche. Réglons la position sur absolue. Ensuite, nous devons nous positionner à 50 %. La bonne position sera 15 RAM. Nous devons également centrer l'élément verticalement à l' aide de Transform Translate Y -50 %. OK, donc la barre de recherche est alignée sur le côté droit de la barre de navigation. Sélectionnons les éléments d'entrée. Une largeur affinée de 45 RAM par rapport à la hauteur sera de la RAM complète. Je vais également changer la couleur de fond. Je vais utiliser ici le 3341. C'est une couleur grise, mais la plus claire. Alors nous n'avons besoin d'aucune bordure. Et je vais utiliser du rembourrage pour créer de l'espace. Réglons-le sur, sur RAM pour exécuter à nouveau deux REM et le forum sur le côté gauche. Modifiez également la taille de la police. Ce sera 1,6 RAM. Ensuite, je vais changer la couleur du texte. Mettons-le en blanc. Changez le radius de bordure, faites-en 0,5 RAM. Alors maintenant, l'élément d'entrée est beaucoup plus beau. Ensuite, je vais sélectionner l'attribut d'espace réservé. Réglons la couleur sur C. C, C. Maintenant, je dois m'occuper de l'icône Font Awesome. Je suis dans l'icône de recherche. Réglons la position sur absolue. Ensuite, nous devons nous positionner à 50 %. La position de la chance sera de 1,5 RAM. Nous devons également centrer les éléments verticalement à l' aide de Transform Translate Y -50  % , modifier la taille de la police Ce sera 1,6 RAM. Et je vais aussi mettre la couleur sur C. C, C. Très bien, donc c' est tout pour la barre de recherche Ensuite, nous devons passer à autre chose et commencer à créer un menu de hamburgers 23. Projet 3 - Créer et styliser la navigation - Partie 2: Très bien, alors allons-y et commençons à travailler sur le menu des hamburgers Je vais sélectionner l'icône du menu. Tout d'abord, je vais afficher l'icône du menu. Réglons donc la largeur à quatre RAM. Nous avons besoin que la hauteur soit de 2,5 RAM par rapport à la couleur d'arrière-plan. Ce sera CCC. En fait, nous avons besoin de cette couleur de fond pour des raisons temporaires. Ensuite, je vais passer à la position absolue. La position sera donc de 50 %. Ensuite, nous avons besoin ici la bonne position, qui sera de huit RAM. Et nous devons également centrer l'icône à l'aide de Transform Translate Y -50 %. Ensuite, je vais changer le pointeur du curseur. Nous avons donc ici l'icône du menu. En fait, éliminons cette couleur d'arrière-plan temporaire , puis sélectionnons la ligne. La largeur sera égale à la largeur maximale. Ensuite, nous avons besoin de la hauteur, qui sera pointue par rapport au bélier. Ensuite, je vais changer la couleur de fond qui va être CCC Donc, pour l'instant, les lignes ne sont pas visibles. Vérifions le fichier HTML. En fait, nous avons besoin que vous ajoutiez une ligne de classe séparée. Maintenant, les lignes devraient être visibles. Toujours. Nous avons ici un problème. Oui, nous avons besoin ici de la balise DIV et non de la ligne tog. Désolée pour cette erreur. Maintenant, vous pouvez voir les lignes ici. Allons-y et alignons-les séparément. Pour cela, je vais utiliser Flexbox. Nous avons besoin de Display Flex. Ensuite, nous devons changer de direction. Ce sera une colonne. Et nous devons créer un espace entre les lignes en utilisant l'espace de justification entre les lignes. Nous avons donc ici l'icône du menu avec trois lignes différentes. D'accord ? Ensuite, je vais m'occuper de la navigation elle-même. Définissons la largeur. Ça va être cent pour cent. Ensuite, nous devons définir la hauteur, qui sera de 100, hauteur de la fenêtre d'affichage Ensuite, je vais changer la couleur de fond. Dans ce cas, je vais utiliser 0 B, 0 B, un car c'est comme la couleur bleu foncé. La prochaine fois que je vais m'asseoir, ma position sera absolue. Les positions supérieure et gauche doivent toutes deux être égales à zéro. Ensuite, je vais m'occuper des éléments de navigation. Ils doivent être placés au centre. À partir de là, utilisons flexbox pour centrer les éléments. Au début, nous devons adapter la colonne de direction, puis justifier le centre de contenu et aligner le centre des éléments. Nous avons donc ici les éléments alignés verticalement au centre. Ensuite, sélectionnons les éléments de navigation. Je veux dire que l'élément de lien définit la famille de polices (deux alphas lab, un, plus grossier que d' augmenter la taille de la Ça va faire cinq RAM. Eh bien, je vais donc changer de couleur. Mettons-le en blanc. Ensuite, je vais créer un espace entre les lettres. Réglons-le à 0,3 RAM. Nous avons également besoin ici d' une marge en bas. Mettons-le à 1 g. Comme vous pouvez le constater, les éléments de navigation sont plutôt beaux. Ensuite, je vais sélectionner avant le pseudo-élément. Définissons le contenu comme étant vide. Ensuite, je vais définir une largeur. Ce sera 15 RAM plutôt que la hauteur ne sera de 0,5 RAM. Changez la couleur d'arrière-plan. Je vais utiliser la couleur jaune ici pour régler la position. La position absolue sera de 50 pour cent. Maintenant, la position gauche devrait être la rampe -17. Nous devons également transformer, traduire Y -50 % afin de centrer les éléments verticalement. À l' heure actuelle, le pseudo-élément avant n'est pas réalisable car nous devons définir position par rapport aux éléments parents, en l' occurrence l'élément de lien On peut donc voir que nous avons maintenant les lignes sur le côté gauche des éléments. Nous avons besoin de la même chose du côté droit. Pour cela, je vais utiliser des pseudo-éléments. Nous avons juste besoin de changer de position. Nous avons besoin ici de la bonne position. Nous avons donc maintenant des lignes des deux côtés. Ces lignes seront utilisées pour l'effet de survol. Donc, tout d'abord, nous devons les masquer à l'aide de Transform Scale. Il doit être égal à zéro pour que les lignes soient masquées. Ensuite, je vais sélectionner le lien de navigation, puis le survoler. Et nous avons également besoin ici avant le pseudo-élément. Ainsi, lorsque vous survolez le pointeur, nous devons augmenter l'échelle et définir sur sa valeur par défaut, qui est un Utilisons la transition pour un effet fluide. Comme vous pouvez le voir, une fois que vous passez la souris sur l'élément et que la ligne apparaît, nous devons afficher la ligne du côté droit Pour cela, nous devons changer l'origine de la transformation. Par défaut, il est réglé sur central. Et maintenant, nous en avons besoin, non ? La ligne apparaît maintenant du côté droit. Nous avons également besoin de la même chose pour le pseudo-élément after. Copions donc ce changement de code ici avant et après. Et nous avons également besoin ici de transformer l'origine et la transition. Dans ce cas, l'origine sera laissée à la fin de la transformation. De plus, la transmission dont nous avons besoin est la même. Donc, si nous survolons les éléments de navigation, nous aurons cet effet agréable et cool Très bien, la prochaine chose à faire est d'afficher l'icône du menu car elle est masquée pour le moment Utilisons donc la propriété index. Nous voyons maintenant ici l'icône du menu. Et maintenant il est temps d' écrire du JavaScript pour que la navigation fonctionne. Je vais créer une variable, appelons-la icône de menu sélectionnée à l' aide de la méthode de sélection de la requête. Nous devons spécifier ici le nom de la classe, qui sera l'icône du menu. Dupliquons ce code. Nous avons besoin de la deuxième variable, qui sera sélectionnée dans la barre de navigation Voici la barre de navigation du nom de la classe. Ensuite, je vais ajouter un écouteur d'événements à l'icône du menu à l'aide d'un événement de clic Et nous devons également mettre ici une fonction de flèche, qui sera une fonction de rappel Je vais donc ajouter à Napa un nom de classe avec la méthode toggle Le nom de cette classe sera, disons, « change ». Après cela, nous devons masquer la navigation. Réglons la position de deux fenêtres d'affichage à une hauteur de -100. Ensuite, nous devons sélectionner Navigation avec un nom de classe différent. Nous devons remettre la position à zéro. Utilisons l'effet de transition. Nous en avons besoin ici aussi. Et la durée sera de 0,3 s. Donc si nous cliquons sur l'icône du menu, rien ne se passera. Examinons donc la page. Nous n'avons aucune erreur ici. Vérifions le HTML5. Nous devons ajouter ici le point JS car le nom du fichier n'a pas été indiqué correctement. Alors maintenant, la navigation fonctionne correctement. Et je fais ici un bel effet. Ensuite, je vais masquer les éléments de navigation en utilisant l' opacité zéro et en masquant la visibilité Ensuite, je vais sélectionner le changement de classe avec le lien de navigation qui a envoyé l'opacité à zéro et la visibilité à visible Également. Je vais sélectionner le premier élément de navigation avec un changement de classe. Supposons une transition vers toutes les 0,3 s. Ensuite, nous avons besoin d'un délai différé de 0,3 s. Nous devons afficher l'élément de navigation séparément avec un délai différent, ce qui créera un effet vraiment intéressant. Modifiez donc le délai. Nous avons besoin de 0,4 s, puis de 0,5 s pour le troisième élément. Ensuite, le prochain sera de 0,6 s. Ensuite, pour le cinquième élément, nous avons besoin de 0,7 s. Et pour le dernier élément, ce sera de 0,8 s. Alors vérifions les résultats. Et comme vous pouvez le constater, nous avons ici un effet vraiment sympa et cool. Très bien, nous devons maintenant nous occuper de l' icône du menu. Je fais la queue. Sélectionnez Modifier avec la première ligne. Mettons-en avec deux 55 %. Et nous avons également besoin ici de transformer, faire pivoter la direction Z de -15 degrés. Et nous devons également déplacer la ligne 1 en utilisant Translate moins zéro point en RAM et 0,8 rampe. Dupliquons ce code. Utilise ta ligne 3. Dans ce cas, nous devons supprimer mon signe de la fonction de rotation. Et nous avons également besoin ici de -0,8 RAM. Utilisons également la transition pour des effets fluides. Vérifions le résultat. Comme vous pouvez le constater, nous avons ici un effet sympa et cool. L'icône du menu se transforme en flèche. Très bien, c'est tout à propos de la navigation. Passons à autre chose et commençons à créer la partie suivante du site Web 24. Projet 3 - Créer et styliser l'en-tête du site Web: Très bien, une fois que nous avons terminé la navigation, il est temps de passer à autre chose et de commencer à créer la section suivante de notre projet Allons-y et insérons des commentaires. Pour atterrir. Nous allons créer un en-tête du site Web sous la forme d' une balise de section ouverte avec la classe Landing. Je vais insérer la balise U DIV avec la classe Landing image, dans laquelle nous pouvons placer un élément d'image Je vais sélectionner une image dans le dossier d' images qui va être Landing BG. Très bien, nous avons ensuite besoin de Banner dans lequel je vais insérer des éléments de titre H1 avec le nom de classe Banner Le texte va se trouver à l'intérieur de l'élément span. Maison de rêve. Ensuite, je vais insérer ici une balise DIV avec un nom de classe, un contenu de bannière dans lequel nous aurons un paragraphe avec du texte fictif Et en plus de cela, je vais instituer Bateson. En savoir plus D'accord, donc c'est tout à propos du balisage HTML. Allons-y et commençons à personnaliser cette section. Je vais vous insérer des commentaires, Landing et of Landing. Ensuite, sélectionnons Landing Image et définissons la largeur à 92 %. Ensuite, nous avons besoin de hauteur. Ça va être 70, hauteur de la fenêtre d' affichage. Ensuite, nous devons sélectionner l'image elle-même. Définissons une largeur comme 100 %. Selon la hauteur, elle sera également de 100 %. Et nous avons également besoin que votre objet soit en carbone. Très bien, nous avons donc ici l'image. Suivant. Je vais sélectionner l'élément de section et définir sa largeur. Ça va être 100 %. Allons suivre la hauteur. Je vais le régler à 90 degrés de hauteur de la fenêtre d'affichage. Ensuite, je vais définir la position de l' emballage d'image sur absolue Et nous avons également besoin ici de la position relative de l'élément de section, qui est un élément parent. Ensuite, définissons que la première position sera de 11 points. Pour ce qui est de la position de gauche, nous avons besoin ici de 50 %. Et nous devons également centrer l'image en utilisant Transform, Translate X -50% D'accord ? Ensuite, nous devons diminuer l' opacité de l'image Ensuite, allons-y et sélectionnons Bannière. Je vais définir sa position comme absolue. Ensuite, nous avons besoin que la position inférieure soit de 15 RAM. En ce qui concerne le laboratoire, la position sera de 20 rampes. On peut donc voir que la bannière est positionnée en bas. Ensuite, je vais sélectionner les éléments de titre. Réglons la taille de police à neuf. Bélier. La couleur va être blanche. Ensuite, je vais sélectionner les éléments de la plage à l'intérieur du titre. Changeons la famille de polices. Dans ce cas, je vais utiliser un téléphone appelé Alpha Flap One Cursive. Et je vais aussi changer. La taille de la police sera de huit RAM alors que la couleur sera jaune. Je vais donc créer un espace entre les lettres. Alors maintenant, le titre est plutôt joli. Ensuite, sélectionnons le contenu de la bannière. Nous avons besoin ici de Flexbox. Et nous devons également aligner les éléments au centre. Ensuite, je vais sélectionner le contenu de la bannière suivi du paragraphe. Réglons la largeur à 45 RAM. Et la taille de la police sera celle de la RAM. Je vais également changer la couleur qui se trouve ici. Col blanc. Créez de l'espace sur le côté droit en utilisant margin-right to ramp Le paragraphe est donc joli. Maintenant, nous devons nous occuper du bouton. Définissons que la largeur sera 15 R&. Ensuite, nous avons besoin ici d'une hauteur, qui serait de cinq mille. Je vais changer la couleur de fond. Mettons-le sur transparent. De plus, nous devons que la bordure soit uniforme de 0,3 rampe et que la couleur soit claire. Ensuite, prenons soin de la couleur. Ça va être blanc. Je vais donc augmenter la taille de la police. Mettons-le sur 1,6 RAM pour que le poids de la police soit en gras. Et aussi pour changer le curseur. Mettons-le au clair. Très bien, voyons donc le double de l' en-tête du site Web Ça a l'air sympa. Nous pouvons donc plutôt passer à la section suivante. 25. Projet 3 - Section Créer à propos: Très bien, nous en avons terminé avec l'en-tête du site Web et il est maintenant temps de passer à la section suivante du projet La section suivante sera donc la section À propos. Insérons vos commentaires pour la section À propos. Et puis, comme d'habitude, ouvrons la balise de section avec la classe about. Je vais placer la balise U DIV About à gauche, dans laquelle nous avons besoin de l'élément de titre H1 Avec un texte. Nous sommes entreprise de conception de bâtiments créatifs. L'élément de titre sera suivi du paragraphe avec du texte fictif Ensuite, après le paragraphe, nous avons besoin du bouton ici. Avec le texte, lisez la suite. Ensuite, je vais créer le côté droit dans lequel nous allons avoir le cadre. Et nous allons également avoir votre enveloppe d'image dans laquelle je vais insérer votre image elle-même. Nous allons sélectionner l'image dans le dossier des images. Ce sera About point JPG. Ensuite, nous devons utiliser le tag U DIV avec une expérience de nom de classe. Et nous avons également besoin d'une autre classe en bas de la section. Insérez votre élément de titre H1, 20 ans. Et puis nous avons besoin d'un élément de titre h3 que l' expérience du texte fonctionne OK, alors c'est ça. Tous les éléments sont créés et nous devons maintenant personnaliser cette section. En fait, je vais modifier la hauteur du conteneur pour qu'elle soit de 100 % et non de 100 % de la hauteur de la fenêtre d'affichage Maintenant, insérons vos commentaires, probablement à propos de la section. Alors. Tout d'abord, je vais m' occuper de l'image. C'est trop grand en ce moment. Configurons donc avec 250 RAM et la hauteur sera certifiée RAM pour l' enveloppe de l'image Ensuite, je vais sélectionner l'image elle-même. Définissons en hauteur, la largeur sera de 100 %. Pour la hauteur, ce sera également 100 %. Et nous devons également ajuster l'image à l'aide de la couverture du flux d' objets. D'accord, nous avons maintenant un bien meilleur résultat. Je vais maintenant m'occuper de l'élément section. Mettons-nous à 200 %. La hauteur sera de 75 pour la hauteur de la fenêtre d'affichage. Ensuite, je vais changer la couleur de fond. Ça va être 313133. C'est une couleur grise, plus claire. Ensuite, je vais utiliser Flexbox. Alignons les éléments au centre. Et je vais aussi vous utiliser pour justifier contenu avec des valeurs qui payent à peu près. Les côtés gauche et droit sont donc bien alignés. Ensuite, je vais sélectionner À propos de l'élément de titre H1 gauche. Réglons la taille de police à cinq REM pour que la couleur soit blanche. De plus, je vais changer la largeur, ce sera 50 mètres. Ensuite, nous avons besoin d' un peu d'espace en bas. Ça va faire six RAM. En fait. Nous n'en avons pas besoin cette année. Ensuite, je vais sélectionner le paragraphe. Réglons la taille de police 2 en RAM. Changez également la couleur. La couleur va être blanche. Nous avons besoin que la largeur soit de 50 RAM. Et nous avons également besoin que la marge la plus basse soit à cinq premiers. OK, ensuite, allons-y et prenons soin du Bateson. Je vais régler avec 218 RAM que nous avons besoin d'une hauteur de cinq RAM. De plus, je vais définir la couleur d'arrière-plan sur transparent, nous n'avons pas besoin d'un point de bordure pour être solide. Et la couleur sera Tba 8 1-p Je veux dire, la couleur jaune. Ensuite, je vais redéfinir la couleur sur le jaune. Nous avons donc besoin de 1,8 RAM sur site. Nous avons besoin d'espace entre les lettres. Réglons-le sur 0,1 run. Et nous avons également besoin que Caruso soit un point. OK, donc le bouton est plutôt joli. Et en fait, avec le côté gauche, c'est terminé. Passons à autre chose et prenons soin du cadre qui est placé sur le côté droit. Mettons-nous en place avec 250 RAM. Ensuite, nous avons besoin que la hauteur soit de 35 images. Je vais donc utiliser la bordure, qui sera composée de trois solides REM de couleur 555. Réglons la position sur absolue. Ensuite, nous devons nous positionner pour avoir 15 RAM. Quant à la bonne position, je vais la régler sur 40 RAM. En fait, nous avons besoin d'une position relative pour l'élément parent. C'est pourquoi nous ne voyons pas le cadre ici. Alors maintenant, c'est ici. Je vais définir la position de l'emballage de l'image sur absolue plutôt que deux positions ne seront un dram La bonne position sera 33 RAM. Nous avons donc maintenant de très bons résultats. Ensuite, je vais m' occuper du bas de la section. Réglons la position sur absolue. Nous avons besoin ici de la position la plus basse, par rapport à la RAM. Ensuite, la bonne position sera 33 rampes. Et nous avons également besoin que vous définissiez la hauteur comme étant de 12. Rahm. Ensuite, nous avons besoin d' une bordure sur le côté droit. Mettons-le sur une mémoire vive solide et la couleur sera jaune. Nous avons donc ici la bordure sur le côté droit. Alignons le texte pour qu'il soit écrit. Et nous avons également besoin d'un peu d'espace sur le côté droit en utilisant du rembourrage, n'est-ce pas ? Pour courir. Très bien, nous avons maintenant deux styles pour les titres Commençons par les éléments du titre H1. Je vais définir la famille de polices sur Alpha Slab One. La taille de police cursive sera de 61. Ensuite, je vais changer la couleur. Utilisons également votre 555, nous avons besoin d'espace entre les lettres. Disons 2,5 points. Le premier titre. Ça a l'air vraiment sympa. Ensuite, je vais sélectionner le deuxième titre, qui est H trois. Je vais régler la taille de police sur 2,5 Prime. Ensuite, la couleur va être blanche. Alors maintenant, le bas de la section est vraiment beau. Nous avons ici un petit problème. Nous devons afficher la navigation. Pour ça. Nous devons utiliser la propriété d'index avec la valeur 100. OK, alors c'est ça. Tout a l'air bien. Nous pouvons passer à autre chose et commencer à travailler sur la section suivante. 26. Projet 3 - Créer et personnaliser des projets: Très bien, il est maintenant temps de passer à autre chose et de commencer à créer notre prochaine section de ce projet La section suivante concerne les projets. Je vais donc insérer de nouveaux commentaires pour les nouveaux projets de la Section et pour les projets. Et puis je vais ouvrir la balise de section avec un nom de classe projects. Dans cette section, je vais mettre l'élément d' en-tête H1 avec le nom de classe Projects Heading Les derniers projets de Let's Institute. Ensuite, je vais ouvrir le tag DIV avec les cartes de classe dans lesquelles je vais placer les noms. La carte inclura une image. Sélectionnez l'image dans le dossier des images. Je vais également ouvrir une autre balise DIV avec le nom de la classe appelée content, dans laquelle nous aurons des éléments de titre H1 avec un texte La maison de vos rêves se trouve ici. Suivant. Nous aurons ici un paragraphe avec un texte fictif C'est donc tout à propos de la carte. Je vais dupliquer cet élément plusieurs fois et modifier les images. Au total, nous aurons cinq cartes différentes. Très bien, après cela, je vais ouvrir le tag DIV avec les designs de classe Et puis la section en bas. Nous l'avons déjà utilisé. Dans la dernière section. Ouvrons la balise de titre H1 avec les textes. Génial. Ensuite, nous avons besoin d'une balise de titre h3 avec un design de texte Nous avons donc ici le balisage HTML. Allons-y et commençons à écrire du CSS. Je vais insérer de nouveaux commentaires pour la section des projets. Ensuite, je vais m' occuper de la carte. Réglons la largeur à 32 RAM. Ensuite, je vais régler la hauteur à 50 RAM. Ensuite, je vais sélectionner l' image et définir sa largeur. Ça va être 100 %. Disons que la hauteur sera également de 100 %. Et nous devons également ajuster l' image à l'aide de la couverture des objets. Nous avons donc ici des images relativement plus petites. Et nous avons aussi ici, en bas de la section, des designs géniaux. Je vais donc le mettre ci-dessous. Sélectionnons l'élément Section et définissons sa largeur à 200 %. La hauteur sera égale à cent dans la fenêtre d'affichage. De plus, je vais définir la position sur relative. Maintenant, l' élément inférieur de la section est placé en bas. Ensuite, je vais sélectionner des projets ayant, définissons sa taille de police sous forme de tram. Ensuite, je vais changer de couleur. Ça va être blanc. Je vais créer un espace entre les lettres. Réglons-le de manière à ce qu'il pointe vers une rampe. Ensuite, je vais créer de l'espace en utilisant une marge avec des valeurs RAM soudaine, 010 RAM et neuf RAM. Nous avons donc ici le titre. Ensuite, sélectionnons les cartes. Je veux dire que la largeur de l'emballage a été réglée à 90 %. Ensuite, nous avons besoin de la marge automatique pour placer l' élément au centre. Dans ce cas, nous avons besoin de Flexbox. On peut donc voir que les cartes sont bien placées horizontalement. Créons un espace sur le côté droit de chaque carte en utilisant Margie, n'est-ce pas ? 2,5 RAM. Et nous avons également besoin que le curseur soit pointeur. Nous avons donc ici un résultat bien plus beau et meilleur. Ensuite, je vais sélectionner le contenu du panier. Mettons-nous à 200 %. De plus, la hauteur sera également de cent pour cent. Ensuite, nous devons nous positionner de manière absolue. De plus, nous avons besoin de la position relative de l'élément parent, qui dans ce cas est appelé. Ensuite, je vais mettre la première position à zéro. La position gauche sera également nulle. Voici le contenu de la carte. Changeons la couleur de fond. Je vais utiliser votre couleur RGBA. Je suis de couleur noire avec une opacité plus faible, 0,9. Ensuite, je vais sélectionner l'élément de titre H1 dans le contenu du panier Réglons la taille de la police sur la RAM pour que la couleur soit blanche. Je vais donc définir la position sur absolue. Ils ont pris position, ça va être plein de RAM. En ce qui concerne la position de leader, je vais également la régler à 4M Changez avec ça va faire 15 runs. Nous avons donc ici l'élément de titre H1. Ensuite, nous devons sélectionner le paragraphe du contenu de la morue. Définissons que la taille de la police sera de 1.6. La couleur sera blanche. Et je vais aussi définir que la position sera absolue et que nous devons placer la position à 13 RAM. En ce qui concerne la position gauche, je vais l'utiliser pour la RAM, la largeur sera de 17 rampes. Très bien. Donc le paragraphe d'en-tête ou Personnaliser. Ensuite, je vais sélectionner le contenu appelé avec avant les pseudo-éléments. Définissons le contenu comme étant vide. Ensuite, je vais définir la largeur. Ça va être 92 %. Ensuite, nous avons besoin de hauteur. Ce sera 0,1 RAM. De plus, nous devons changer la couleur d'arrière-plan que je vais utiliser ici et la couleur jaune. Définissons la position comme étant absolue. Nous avons besoin que la position Let soit nulle. J'ai senti que c'était à la RAM qu'il avait pris position . Nous avons donc ici avant tout des pseudo-éléments. Ensuite, nous devons créer une autre ligne en utilisant les pseudo-éléments after. Dans ce cas, nous aurons une ligne verticale. Changeons la largeur. Ce sera 0,1 RAM jusqu'à la hauteur. Je vais le fixer à 94 %. La position gauche sera deux REM. Mettons les deux positions dont nous avons besoin ici, zéro. Nous avons donc maintenant la deuxième ligne verticale. Je vais maintenant créer un effet de survol. Une fois que nous avons survolé la carte, nous devons afficher le contenu de la carte En fait, plaçons la couleur de fond ici. Ensuite, je vais utiliser couleur d'arrière-plan de transition d' une durée de 0,6 s. Maintenant, une fois que nous survolons la carte, la couleur d' arrière-plan change Ensuite, je vais aller à Hyde sur les deux lignes en utilisant transform. Échelle. La valeur doit être nulle, puis nous devons utiliser survol suivi du avant Pseudo-éléments. Nous devons changer d'échelle. Et vous voyez ici la valeur par défaut 1. Nous devons donc effectuer une transition pour un effet fluide. Alors maintenant, une fois que nous survolons la souris, la ligne de coupe s'affiche. En fait, nous devons modifier l'origine de la transformation car nous devons afficher la ligne depuis le côté gauche. Nous avons donc maintenant un bien meilleur résultat. Et maintenant, nous avons besoin de la même chose pour la deuxième ligne. Je veux dire le pseudo-élément après Utilisons le pointeur de la souris ici, changeons le pseudo-élément dont nous avons besoin ici après Nous devons également transformer l'origine pour qu'elle soit la meilleure et effectuer la transition par une transformation. Très bien, maintenant nous avons ici un bel effet de survol. Ensuite, je vais masquer le titre et le paragraphe en utilisant l' opacité et la visibilité Et une fois que nous avons survolé la carte, nous devons les afficher à nouveau. Nous avons donc besoin ici d'opacité 1 et de visibilité, visible. Copions ce code et utilisons-le également pour le paragraphe. Pour changer ici, le sélecteur est ici P. Et nous avons également besoin d' une transition pour les deux éléments En outre, nous devons également effectuer la transition avec le survol et avec un certain délai. OK, maintenant comme vous pouvez le voir, nous avons ici une bien meilleure information. En fait, je pense que tout fonctionne bien. Il suffit de changer la position des éléments inférieurs de la section. Réglons la bonne position à 12 tours. Très bien, donc tout semble bon. Et avec cette section, nous en avons terminé. Passons donc à autre chose. 27. Projet 3 - Créer et styliser des clients: Très bien, une fois que nous en avons terminé avec la section Projet, il ne reste plus à passer à autre chose et à créer notre section suivante, qui sera une section Clients Je vais donc placer des commentaires que vous saviez pour la section clients. Ensuite, ouvrons la balise de section avec un nom de classe. Clients. Je vais insérer votre élément de titre H1 avec un titre de classe Customers Insérons vos clients comme valeur de texte. Ensuite, je vais ouvrir Tip Check avec le nom du cluster Customers content, dans lequel je vais placer un autre don. Et ce sera une carte client. Donc, à l'intérieur de la carte, je vais insérer une image. Allons-y et sélectionnons l'image dans le dossier images. Ce sera comme une tumeur. Vous y trouverez également une étiquette DIV avec le contenu de la carte Clients de la classe À l'intérieur de cet élément, je vais placer balise d'en-tête H1 avec le nom John Smith Ensuite, nous aurons le titre h3 et il sera associé au co-manager Ensuite, nous aurons une icône Font Awesome. Ce sera la FAA, il reste des guillemets. Ensuite, nous avons besoin de votre paragraphe avec du texte fictif. Allons-y et dupliquons la carte client. Ensuite, je vais insérer ici la balise DIV, qui sera placée en bas de la section client Les éléments des sections précédentes. Nous allons donc avoir ici des éléments de titre H1 avec les clients de texte Et nous avons également besoin ici d' un élément de titre h3 avec le texte qui dit, d'accord, donc c'est tout Nous avons ici le balisage HTML. En fait, nous devons changer l'image ici. Ce sera le client 2. Maintenant, l'image est modifiée. Nous en avons terminé avec le balisage HTML. Allons-y et commençons à écrire du CSS. Nous avons besoin ici de nouveaux commentaires pour la section Clients. Ensuite, je vais sélectionner Section elements, qui possède un ClassName Customers Définissons la largeur. Ça va être 100 %. C'est probablement la hauteur. Je vais régler à la hauteur de la fenêtre d'affichage Et nous devons également changer la couleur de fond. Dans ce cas, je vais utiliser 313133. Ensuite, nous avons besoin d'un peu d'espace au sommet en utilisant du rembourrage, les sept meilleurs R& Ensuite, je vais sélectionner l' image de la carte client afin de la réduire. Mettons-nous en place avec 220 RAM. Maintenant, les images sont devenues plus petites et il est maintenant plus confortable de travailler. Nous avons donc besoin ici de la position relative de l'élément de section. Comme vous pouvez le constater, le bas de cette section est bien placé. Ensuite, je vais sélectionner la rubrique Clients. Définissons la taille de police. Il y aura huit rampes. Ensuite, il nous faut de la couleur. Ça va être blanc. De plus, je vais créer de l'espace en utilisant une marge avec la valeur 0010 RAM, puis neuf RAM sur le côté gauche Créez également un espace entre les lettres. Réglons-le pour qu'il pointe vers la RAM. Nous avons donc ici le titre de la section. Ensuite, je vais sélectionner le contenu des clients . Définissons une vague. Ce sera 80 %. Ensuite, nous aurons votre ligne de marge afin de centrer l'élément. Ensuite, je vais utiliser Flexbox. Nous devons justifier l'espace de contenu de manière uniforme afin de créer un espace uniforme entre les éléments flexibles. Ensuite, nous allons nous occuper du contenu des cartes des clients. La largeur sera de 50 R&. Ensuite, nous aurons la hauteur, qui sera de 22 RAM Ensuite, je vais changer la couleur d'arrière-plan. Ça va être 777. De plus, nous avons besoin ici de border-radius, 0,5 RAM. Ensuite, nous aurons un effet d'ombre avec les valeurs 01 RAM. Puis encore une fois une RAM et la couleur RGBA, couleur noire avec une opacité plus faible Ensuite, nous avons besoin d'un peu d'espace en utilisant la valeur de remplissage pour envelopper. OK, donc étape par étape, la carte est jolie. Ensuite, je vais faire en sorte que la position de l'image soit absolue. Ensuite, je vais sélectionner la carte client, qui est l' élément parent de l'image. Et nous avons besoin ici d' une position relative. Après cela, allons-y et définissons. La position sera de moins cinq points premiers. Et nous avons également besoin de la bonne position, ce sera sur la rampe. Nous avons donc besoin ici que le radius de la bordure soit de 0,5 REM. Ensuite, nous avons besoin d'un effet d'ombre. Les valeurs seront-elles 0,5 RAM, 0,5 RAM, et la couleur sera une couleur RGBA avec une opacité plus faible Très bien, donc les images sont bien alignées. Ensuite, je vais m'occuper des éléments de titre H1 du contenu de la morue La taille de la police sera de 2,5 RAM. Ensuite, nous aurons de la couleur. Ça va être blanc. Également. Je vais créer de l'espace en bas. Réglons-le sur une seule RAM. Les titres sont donc jolis. Le prochain élément à personnaliser sera l'élément de titre h3 Modifiez la taille de la police. Ce sera aussi 1,8 dram. La couleur que je vais utiliser C, C, C. Et la marge en bas sera à trois rampes. Ensuite, je vais m' occuper de l'élément I, de l' icône Font Awesome, citations d' Emily, de la taille de police de deux à la RAM. La couleur va également être claire. La marge inférieure, il faut s'en débarrasser. Les codes sont donc jolis. Nous devons maintenant nous occuper du paragraphe. Réglons la taille de police à 1,6 tour. Très bien, alors c'est ça. C'est tout pour la section client. Ça a l'air vraiment sympa. Nous pouvons maintenant passer à autre chose et commencer à travailler sur la section suivante. 28. Projet 3 - Créer une section de contenu: Très bien, il est donc temps de passer à autre chose et créer notre prochaine section du projet La section suivante sera une section de contact. Allons-y donc et insérons nouveaux commentaires pour la section conduite. Ensuite, je vais ouvrir la balise de section avec un nom de classe Contact. À l'intérieur de l'élément de section. Je vais ouvrir la balise profonde, qui sera Contact Content. Ensuite, nous avons besoin de Contact left, du côté gauche, de cette section. Ouvrons le titre H1, le tag et l'institut. Restez à l'affût et recevez les dernières mises à jour. Ensuite, nous avons besoin de Contact right, dans laquelle je vais insérer une balise de saisie avec un type e-mail et, avec la valeur de l'attribut d'espace réservé, saisir votre adresse e-mail Ensuite, nous avons besoin de l'icône Font Awesome, qui sera une assiette en carton solide. OK, alors voyons voir. Le balisage HTML est prêt. Allons-y et commençons à écrire du CSS. Insérons vos nouveaux commentaires pour Contact. Ensuite, je vais sélectionner les éléments de contact. Je parle des éléments de cette section. Cette cellule à 200 % aura une hauteur de 25 rampes. Ensuite, nous avons besoin de Flexbox et de justify-content center. Et nous devons également aligner les éléments au centre afin de centrer le contenu dans cette section. Ensuite, je vais sélectionner Contact Content et je vais spécifier la largeur. Ce sera 80 %. Ensuite, nous devons faire preuve de flexibilité afin de placer les éléments côte à côte Ensuite, je vais utiliser l'espace de contenu de justification, voire la nécessité de créer un espace maléfique entre les éléments flexibles. Ensuite, sélectionnons l'élément de titre Contact Content H1 Donc, la taille de la police est de trois RAM. Ensuite, je vais transformer le texte en majuscules. Changez également la couleur. Ce sera CCC. Nous avons ici l'élément de titre. Allons-y et sélectionnons les éléments d'entrée. Je vais régler la largeur à 45 RAM. Ensuite, la hauteur sera réservée à R&. Je vais également changer la couleur de fond. Mettons-le sur transparent. Ensuite, je vais créer de l' espace à l'intérieur de l' entrée en utilisant du rembourrage, 1,5 RAM, puis 1,5 g. Ensuite, nous devons pointer vers la RAM et zéro Après cela, je vais utiliser la bordure et je vais la définir sur aucune. Ensuite, il nous faut le fond. Ça va être 0,1 rime solide, et la couleur va être 777 Nous avons donc ici la bordure en bas. Ensuite, définissons la taille de police à 1,8 Ran. De plus, nous avons besoin que votre couleur soit CCC. Après cela, je vais sélectionner l' élément d'entrée suivi de la pseudo-classe focus Donc, une fois que nous avons focalisé l'élément d'entrée, nous devons changer la bordure, je veux dire la couleur de la bordure, et elle sera jaune. De plus, nous avons besoin ici d'une transition pour un effet fluide. D'accord ? Ainsi, une fois que nous avons focalisé l'élément d'entrée et la bordure en bas, changez sa couleur. Ensuite, je vais sélectionner l'attribut d' espace réservé et je veux changer la couleur Faisons-le CCC et utilisons également l'espacement des lettres, 0,1 RAM. D'accord ? C'est donc tout à propos de l'élément d'entrée. Maintenant, je vais vous supprimer de l'icône Font Awesome. Disons que la taille de police est d'environ 1,8. La position sera alors absolue. Je vais fixer ma position à 20 %. Quant à la bonne position, elle sera nulle et changera également la couleur. Faites-le C, C, C. Ensuite, changeons le curseur, faisons-le pointer. L'icône n'est donc pas visible car nous oublions votre position relative pour l'élément parent. Alors regardons le conflit, non ? Et définissez la position de l'itinéraire. OK, alors c'est ça. La section Contact est jolie, nous pouvons donc passer à autre chose et nous occuper de la section d'index 29. Projet 3 - Créer et personnaliser le pied de page du site Web: Très bien, il est maintenant temps de créer notre dernière section du projet Ce sera un pied de page. Le pied de page sera simple. Insérons de nouveaux commentaires pour le pied de page. Ensuite, je vais ouvrir la balise de pied de page HTML5, suivie du nom de classe Footer suivie du nom de classe Ouvrons la balise DIV avec le contenu du pied de page de classe dans lequel je vais placer le logo Nous devons ici discuter avec les classes, la marque, puis la marque Footer Le développement comportera trois éléments. Je veux dire un logo, un, un logo de niveau trois, comme si c'était dans la navigation. Et nous avons également besoin ici d'un élément span avec une architecture de texte. OK, ensuite, nous avons besoin ici du paragraphe du texte de copyright avec un signe de copyright. Et aussi avec le texte. Tous droits réservés Fabriqué en codant Create. Très bien, c'est tout à propos du balisage HTML du pied de Allons-y et stylisons cette section. Insérons de nouveaux commentaires pour le pied de page. Ensuite, je vais sélectionner l'élément de pied de page. Définissons une largeur. Ça va être 100 %. Il y a probablement de la hauteur. Je vais le régler sur sept R& Ensuite, nous avons besoin de la couleur de fond. Ce sera de 2020 à zéro. De plus, nous avons besoin d'une bordure en haut, de 0,1 g de solide. La couleur va être trois, e3, e4, un. Nous avons donc ici la bordure en haut du pied de page. Ensuite, je vais sélectionner Branch Footer, régler sa position sur absolue Ensuite, nous avons besoin de la position relative de l'élément parent, qui est le pied de page La première position sera de 3,5 RAM. Pour la position de gauche, je vais la régler à 20 %. D'accord, nous avons donc le logo. Choisissons le logo Frankfurter 1, qui sera composé de trois RAM Ce sont probablement des hauteurs. Je vais également le régler sur trois RAM. Ensuite, nous aurons ici des points de bordure vers le bélier, le plein, et la couleur sera jaune. Ensuite, je vais dupliquer ce code, changer le nom de la classe. Ça va aller à la largeur et la hauteur va être de 2,5 RAM. Et nous n'avons pas besoin de frontières. Changeons la couleur de fond. Ça va être 2020-2020. De plus, nous avons besoin d'une position difficile pour atteindre une rampe de 0,7. C'est ce qui a mené à la position. Il y aura également une rampe de 0,7. La deuxième partie est donc prête. Dupliquons ce code et changeons le nom de la classe. Nous avons besoin ici d'un logo 3. En fait, copions la bordure d'ici et collons-la ici. Ensuite, nous devons changer de position supérieure et gauche. Réglons les deux sur 1,3 RAM. Nous avons donc ici le logo. Ensuite, je vais sélectionner l'élément span. Définissons la taille de police sur, pour exécuter. En ce qui concerne la marge supérieure, ce sera 0,5 RAM. Donc en fait, on peut dire que le logo et le côté gauche du pied de page sont prêts Allons-y et prenons soin du texte de copyright. Je vais envoyer la position à Absolute alors que la première position sera de 50 %. Nous devons centrer les éléments à l'aide de Transform Translate Y -50 %. Pour la bonne position, ce sera 20 %. Ensuite, nous devons modifier la taille de la police. Faisons-en une pièce six R &. Changez également la couleur. Réglons-le sur CCC. C'est donc ça. Le pied de page est déjà là, il a l'air sympa. Et en fait, nous pouvons dire que le projet est terminé, il ne nous restait plus qu'à le rendre réactif aux différentes tailles d'écran. 30. Projet 3 - Rendre le projet réactif: Très bien, donc une fois que nous avons créé toutes les sections de notre projet, nous allons maintenant le rendre réactif aux différentes tailles d'écran Je vais inspecter la page et passer en mode réactif. Ensuite, je vais insérer vos nouveaux commentaires dans le fichier CSS pour le mode réactif. Nous allons donc trouver le point d'arrêt sur lequel nous devons apporter quelques modifications Ensuite, nous avons dû utiliser une requête multimédia CSS. Créons-le et spécifions la largeur maximale. Ça va faire 1 700 pixels. La première chose que je vais faire est de sélectionner Banner et de modifier la position. Ça va faire 12 R &. Ensuite, je vais sélectionner Environ, à droite, je veux dire le côté droit de la section À propos et définir la marge droite comme une rampe de 20 Après cela, allons-y, sélectionnons le cadre et changeons la largeur. Ça va faire 45 RAM. Nous devons également modifier la hauteur. Ce sera à 30 RAM. Ensuite, je vais changer la bonne position. Réglons-le sur 20 RAM. Je vais donc modifier la position du cadre et le déplacer vers la droite. Ensuite, sélectionnons À propos du wrapper d'image et modifions la largeur Ce sera 45 RAM plutôt que la hauteur ne sera de 30 RAM. Et je vais aussi changer de position. Ça va coûter 13€ de loyer. Maintenant, le côté droit semble bon. La prochaine chose que je vais faire est de changer la position du bas de la section. Nous avons donc besoin d'expérience ici et de changer de position. Réglons-le sur 20 rampes. OK, ensuite, occupons-nous de la section Projet. Sélectionnez l'élément Section et réglez la hauteur à 200 %. Ensuite, nous devons sélectionner les cartes et en définir deux à 80 %. De plus, je vais emballer les articles flexibles avec du Flex Wrap, du wrap. Et nous avons également besoin du centre de contenu Justify-Content. La prochaine chose que je vais faire est de créer de l' espace en bas en utilisant le rembourrage Réglons-le sur 25 rampes. OK, les cartes sont emballées, mais nous avons besoin ici de créer de l'espace. Pour ça. Je vais sélectionner la carte elle-même et régler la marge sur 1,5. Ok, alors maintenant tout va bien. Ensuite, je vais m'occuper de la section clients. Élisons le contenu du client. Réglez la largeur à 90 %. Et nous devons également changer la position du bas de la section. Réglons la bonne position à 20 Ran. D'accord ? La prochaine chose que je vais faire est de sélectionner Contact Content. Changeons la largeur pour qu'elle soit de 90 %. Nous devons également sélectionner la marque Footer et modifier la position de gauche Ça va être 16 %. Et faisons de même pour le droit d'auteur. Fixons également la bonne position à 16 %. OK, donc je pense que tout va bien au point d'arrêt. Allons-y et trouvons le suivant. Je pense donc que le prochain point d'arrêt sera de 1 400 pixels Je vais donc créer une nouvelle requête multimédia CSS. Et je vais spécifier ici la largeur maximale de 1 400 pixels Je vais réduire la taille de police de l'élément HTML. Réglons-le à 55 %. Cela rendra tous les éléments relativement plus petits. Ensuite, je vais sélectionner le cadre dans la section À propos. Réglons sa largeur à 40 RAM. La hauteur va être de 25 RAM. Et nous devons également changer de position. Réglons-le sur 15 RAM. Il en va de même pour l'image. J'ai fait l'emballage de l'image. Réglons la largeur à 40 RAM et hauteur à 25 à partir de. Et nous avons également changé la bonne position. Et dans ce cas, la bonne position sera un tram. D'accord ? Donc, le côté droit de la section À propos semble bon. Nous allons vous parler de cette expérience. Changez la bonne position et réglez-la sur 12 rampes. Très bien, donc tout semble bon. Allons-y et trouvons le point d'arrêt suivant. Je pense donc que le prochain point d'arrêt devrait être de 1 200 pixels. Nous allons donc créer une nouvelle requête multimédia CSS et définir la largeur maximale à 1 200 pixels Je vais à nouveau modifier la taille de police de l'élément HTML, définissons-la à 49 %. Ensuite, je vais m' occuper de la section À propos. Nous allons donc sélectionner le côté gauche de la section À propos. Et nous avons également besoin ici d'une largeur de paragraphe définie à 40 R&. Suivant. Je vais m'occuper de la section clients car les cartes sont trop proches les unes des autres. Nous allons donc sélectionner le contenu du client et le définir à 200 %. Ensuite, nous avons besoin de clients et nous devons changer la bonne position. Il va y avoir dix rampes. D'accord. Après cela, allons-y et occupons-nous de la section Contact. Définissons la largeur du contenu du contact à 200 %. Et je vais aussi m' occuper du pied de page. Nous devons changer la position des jambes. Mettons-le à dix pour cent. Vous devez également modifier la position du droit d'auteur. En fait, nous avons besoin ici de la position de la chance et non de la bonne. Nous avons besoin d'une position appropriée pour le droit d'auteur. Mettons-le donc également à dix pour cent. OK, donc je trouve que tout semble très bien. Passons à autre chose et occupons-nous du prochain point d'arrêt. Je pense que le prochain point de rupture devrait être de 900 pixels. Allons-y et recommençons. Créez une nouvelle requête multimédia CSS et spécifiez la largeur maximale à 900 pixels Tout d'abord, je vais modifier la taille de police de l'élément HTML. Mettons-le à 45 %. Ensuite, je vais m' occuper de la barre de recherche. Je veux dire l'élément d'entrée. Changeons sa largeur en faisant 30 rampes. Donc non, nous n'avons aucun problème avec la barre de navigation. Ensuite, nous devons nous occuper du titre de la bannière en réglant la taille de police sur sept rampes. Je vais également sélectionner des éléments d' intervalle dans le titre de la bannière. Changeons la taille de la police et réglons-la également sur sept rhum. OK, après cela, je vais sélectionner le contenu indépendant du paragraphe. Modifiez la taille de la police. La largeur de la rampe sera probablement de 1,7. Je vais le régler sur cinq points. Ensuite, nous devons nous occuper de la section À propos car les choses sont foirées ici Allons-y et sélectionnons À propos à gauche. Éléments de titre H1. Modifiez la taille de la police. Mettons-le à trois runs. De plus, je vais régler avec 235 RAM. Ensuite, je vais sélectionner le paragraphe dans la section À propos du côté gauche. Modifiez la taille de la police. Ce sera une rampe de 1,7. Et modifiez également la largeur. Je vais le régler sur 35 rampes, comme les éléments de cap. Ensuite, nous devons prendre soin du cadre. Sur le côté droit. Cela a changé. La largeur va être de 30 R&. De plus, nous devons changer la hauteur 30 et 15 RAM plutôt que de changer la bordure. Je veux dire la largeur de la bordure, ce sera 1,5 RAM. Nous devons également changer de position. Mettons-le à dix R&. Ensuite, nous devons nous occuper de l'emballage de l'image. Nous devons modifier sa largeur. Donc pour courir, il faut changer la hauteur. Réglons-le sur 15 rampes. Et je dois aussi m' occuper des postes. La meilleure position sera 12 rampes. Et nous devons également prendre soin de la bonne position. Étudions jusqu'à sept rampes. OK, donc le côté droit semble bon. Ensuite, nous devons personnaliser l'expérience. Cela revient à changer la bonne position et régler sur sept R& Ensuite, nous devons nous occuper de la section clients. Allons-y et sélectionnons Clients. La hauteur de l'élément de section est réglée à 100 %. Et nous avons également besoin d'un rembourrage en bas pour qu'il y ait 12 rampes. Je vais ensuite sélectionner le contenu du client et modifier l' orientation de la flexbox. Cela ne fait que deux colonnes. Et nous devons ici aligner les éléments au centre. À présent, les cartes sont placées verticalement les unes sur les autres. Créons un espace entre eux en utilisant la rampe H de la marge. Passons maintenant à la section clients. Ça a l'air bien. Nous devons vous emmener à la section Contact. Sélectionnez Contact Content. Changez la direction, faites-en une colonne comme dans la section précédente. Et nous devons également aligner les éléments, les centrer, puis sélectionner Contact à gauche et utiliser la marge en bas. Ça ne fait que deux à louer. D'accord. Je pense que tout semble bon au point d'arrêt. Vérifions la navigation. Nous devons maintenant nous occuper du prochain point d'arrêt. La promulgation est la dernière. Alors, Create new, voit cette requête multimédia régler la largeur maximale à 600 pixels. La première chose que je dois faire est donc de modifier la taille de police de l'élément HTML. Mettons-le à 35 %. Ensuite, je vais t' emmener au Navbar. Nous allons sélectionner la marque. Et sélectionnons les éléments de span et la marque désormais médiocre et masquée en utilisant Afficher aucun. Nous avons donc ici et juste le logo. Également. Nous devons nous occuper des éléments de navigation. Nous allons donc sélectionner Navigation, puis l'élément lien. Donc, la taille de la police est de trois RAM. Et nous devons également nous occuper des lignes. Ils sont trop longs. Nous avons besoin d'un élément avec un pseudo-élément avant, et nous avons également besoin d'un pseudo-élément après. Définissons la largeur pour pouvoir courir. Ensuite, je vais sélectionner séparément les pseudo-éléments Changeons cette position. Ce sera la rampe -13. Et nous devons également faire de même pour le pseudo-élément after. Dans ce cas, nous devons trouver la bonne position. Alors maintenant je pense que le problème est résolu. Passons maintenant à la bannière. Il faut changer la position gauche. Il va y avoir cinq RAM et nous devons également changer la position inférieure. Je vais le régler sur 18 R &. Ensuite, sélectionnons les éléments de titre et modifions la taille de la police, définissons-la sur cinq RAM. Je vais également sélectionner les éléments de span dans le titre de la bannière, cette cellule, sa taille de police deux pour R& Très bien, nous devons ensuite nous occuper de la section À propos. Nous allons donc sélectionner les droits et les masquer à l' aide de l'affichage. Aucune. En fait. Nous devons retirer cet élément du développement car il était caché. Ensuite, je vais sélectionner la section À propos et régler sa hauteur à 100 %. Et utilisez également le centre de contenu justify-. Nous avons également besoin d'un rembourrage de dix RAM (0,25 gramme zéro). Très bien. Après cela, je vais sélectionner le côté gauche. Mettons les textos des compagnies aériennes au centre. Alors modifiez la marge droite, mettez-la à zéro. Maintenant, je trouve que la section a l'air plutôt sympa. Nous allons vous retirer du titre de la section du projet. Sélectionnez donc le titre du projet, modifiez la taille de la police, faites-en six RAM. Ensuite, je vais consulter la section Clients. Sélectionnez le titre « Clients » et la taille de la police (jusqu'à six RAM). Très bien. Je pense que tout semble bon et que notre projet s' adapte à toutes les tailles d'écran. J'espère que cela vous a plu et que vous avez appris quelque chose de nouveau. Passons à autre chose et construisons notre prochain projet. 31. Projet 4 - Aperçu: Bonjour et bienvenue dans notre prochain projet. Dans cette section, nous allons créer un site Web de designer d'intérieur. Ce domaine est très populaire et très demandé aujourd'hui. Je pense donc que ce type de site Web sera intéressant et utile pour vous. Allons-y et décrivons le projet. Nous avons ici un en-tête du site Web qui inclut le logo, l'icône du menu Hamburger et une bannière animée Si je clique sur l'icône du menu, la navigation s' affichera correctement. La bannière est animée. Comme vous pouvez le constater, les éléments du texte changent avec certains effets de fondu. Ensuite, nous avons une section À propos qui s'affiche bien avec un effet de fondu. Nous allons utiliser cet effet pour chaque section et pour ce projet. La section À propos comprend une image et quelques détails sur le designer. Ensuite, nous avons la section Services, qui nous montre ce que le designer peut offrir. Ensuite, vous pouvez trouver les projets du designer. Je suis dans le portfolio de ses œuvres. Vient ensuite la section des succès dans laquelle nous avons des compteurs animés Enfin, vous pouvez trouver ici un pied de page simple et agréable. Le projet s'adapte à différentes tailles d'écran. Si j'inspecte la page, passe en mode réactif, puis vérifie le projet en quatre tailles d'écran différentes. Vous constaterez que le projet est réactif et qu'il s'affiche bien sur toutes les tailles d'écran. Encore une fois, tous les projets et ce cours sont créés pour une taille d'écran très grande. Je veux dire, cela coïncide avec 1920 pixels de largeur et 1080 pixels de hauteur Donc, si vous utilisez une taille d'écran relativement plus petite, vous devez passer en mode réactif pendant les cours et spécifier la largeur et la hauteur de cette manière. Sinon, le projet ne s'affichera pas correctement sur un écran plus petit tant que nous ne le rendrons pas réactif. Veuillez donc en tenir compte. Très bien, c'est tout pour notre quatrième projet. Passons à autre chose et commençons à le construire 32. Projet 4 - Créer et faire fonctionner la navigation: Très bien, alors allons-y et commençons à créer notre projet Je vais ouvrir ce dossier dans VS Code. Ensuite, je vais créer nos fichiers de travail. Comme d'habitude pour HTML, index.html, pour CSS et JavaScript. Ensuite, je vais ouvrir le fichier HTML à points d'index et créer un document HTML de base. Tout d'abord, allons-y et changeons le titre. Ce sera le site Web d'un architecte d'intérieur. Ensuite, je vais lier le fichier CSS. Spécifiez ici le nom du fichier et nous avons également besoin d' balise de script. L'attribut source. Nous avons besoin d'un script tel que le nom du fichier JavaScript. Ouvrons le navigateur de projets. Ensuite, je vais placer le navigateur et l' éditeur côte à côte Comme. Donc. Afin de rendre notre processus de travail plus confortable. Très bien, nous avons maintenant besoin liens tels que les icônes Font Awesome Allons voir Font Awesome, C, D et J. Oui, puis récupérons le premier lien à partir d'ici. Je vais ouvrir la balise de lien dans l'élément principal , puis vous coller le CDN. En plus de cela, je vais utiliser les téléphones Google. Alors allons-y et visitons le site Web de Google Fonts. Je vais rechercher une police appelée Railway. Nous allons sélectionner deux styles différents. D'ici. Ensuite, je vais rechercher un autre téléphone appelé Can-it Sélectionnons à nouveau quelques styles différents. Copiez ensuite le lien et collez-le dans l'en-tête souhaité. Très bien, nous sommes donc prêts à commencer à écrire du balisage HTML. Insérons vos commentaires pour le conteneur. Ensuite, je vais ouvrir la balise DIV avec le conteneur de classe. Ensuite, nous avons besoin de la balise DIV pour le rectangle. Il a besoin de deux classes, rectangle et un rectangle , nous avons également besoin ici du rectangle deux. Ensuite, je vais insérer des commentaires pour la navigation. Ensuite, ouvrons suffisamment de tables des matières avec un nom de classe Maintenant quatre, dans lesquels nous aurons un autre élément avec le concepteur de noms de classe. Insertons votre image. Je vais sélectionner une image dans le dossier des images. Ce sera du designer, le JPEG. Ensuite, nous avons besoin d'une balise DIV dans laquelle je vais insérer span avec le nom et Smith Et nous avons également besoin d'un autre élément de travée avec le texte « designer d'intérieur ». OK, après cela, je vais créer l'icône du menu dans laquelle je vais placer votre balise DIV avec les noms des classes Ligne 1. Nous avons besoin de trois lignes. Alors allons-y et changeons les noms des classes. Il va être aligné et couché trois. Ensuite, je vais créer la navigation elle-même. Écoutons. Maintenant, à gauche de l'image, je vais sélectionner l'image dans le dossier des images. Ce sera Nafta JPG. Ensuite, nous devons créer le côté droit de la navigation dans lequel je vais insérer votre trace avec le nom de classe X BTN. Ce sera le X Batson qui clôturera. Sincerity, votre tag DIV avec les classes XS line, X, line one, puis nous avons besoin de X line two Très bien, voyons ce qu'il en est du bouton X. Ensuite, nous avons besoin ici d'éléments de titre H1 avec un texte et Smith Ensuite, je vais insérer balise DIV avec au moins une classe nap, qui inclura des éléments de navigation Le premier lien sera la page d'accueil. Ensuite, je vais dupliquer cet élément plusieurs fois. Le second portera sur, ensuite, nous aurons les services. Ensuite, je vais insérer votre portfolio. Ensuite, nous aurons un blog. Enfin, je vais intervenir, Contact Alright, alors voyons voir Le balisage HTML est créé. Ensuite, je vais m' occuper du CSS. Ouvrons le fichier CSS et insérons nouveaux commentaires pour les styles par défaut. Je vais sélectionner chaque élément à l'aide d'un astérisque. Tout d'abord, définissons la marge et remplissage des deux à zéro Ensuite, je vais définir la taille de la boîte borderbox. Également. Il faut ici qu'il n'y ait pas de décoration de texte. Trouvé. Le plan, ça va aussi être connu. Je vais également modifier la famille de police pour chaque élément. Ce sera Railway Sensory. D'accord ? En outre, je vais modifier la taille de la police HTML car nous allons utiliser la RAM comme unité de mesure. Nous avons besoin qu'une ligne soit égale à dix RAM. La taille de police de l'élément HTML doit donc être de 62,5 %. Ensuite, je vais créer des commentaires auditifs pour le conteneur. Insertons des commentaires, interrompons la navigation. Ensuite, je vais sélectionner Navigation. Réglons l'affichage sur aucun. Je vais le cacher pendant un moment. Très bien. Ensuite, je vais sélectionner le conteneur. Définissons sa largeur. Ce sera 100 % de plus que la hauteur. La hauteur de la fenêtre d' affichage sera de 100. Je vais changer la couleur de fond. Utilisons la couleur. Un-deux, une-deux, une-deux Ensuite, je vais sélectionner le rectangle. Définissons sa largeur. Ça va faire 70 RAM. Nous avons également besoin de la hauteur, ce sera 40 RAM. Ensuite, je vais définir la RAM de Border 2.1 comme solide. Et la couleur va être RGBA de cinq à cinq à cinq C'est une couleur blanche avec une opacité plus faible, 0,1. Ensuite, définissons la position comme fixe. Nous avons donc ici le rectangle, nous devons changer sa position. Mais pour l'instant, je vais sélectionner le rectangle 1. Mettons-nous en position et faisons-en 48 %. La position de gauche sera de -21 %. Maintenant. Nous avons donc besoin ici de transformer, de faire pivoter dans la direction z et la valeur sera de 20 degrés. Ensuite, nous devons nous positionner par rapport au conteneur. Nous avons donc ici le premier rectangle. Ensuite, je vais vous retirer de l'outil rectangulaire. Définissons que la position soit moins huit RAM alors que nous avons besoin de la bonne position. Réglons-le sur moins dix RAM. Et récupérez également la propriété de transformation. La valeur va être de 60 degrés. D'accord ? Nous avons donc ici le deuxième rectangle. En fait, je vais changer la position du rectangle pour que les deux positions soient de 8 %. Et nous avons besoin ici de la bonne position moins dix pour cent au lieu de la RAM, non ? Ensuite, sélectionnons l'image du designer. Et avec une largeur de six mètres carrés, la hauteur de Rome sera également de six mètres carrés. Et nous avons également besoin ici pieds d' objets pour s'adapter à l'image. Je vais également modifier le rayon de la frontière. Ce sera 50 %. Nous avons donc ici l' image du designer. Ensuite, allons-y et sélectionnons la barre de navigation. Réglez la position sur absolue. Ensuite, pour la position, ce sera zéro, pour la position gauche, ce sera également zéro. Et nous devons définir la largeur à 100 %. Et la hauteur sera de dix RAM. Ensuite, je vais sélectionner le designer. Réglons la position sur absolue. Deuxièmement, la position va être de percuter , supposément en position gauche. Je vais le régler sur un tiers en RAM. Ensuite, nous avons besoin ici de flexbox pour aligner les éléments. Utilisons les éléments d'alignement, les centrons. OK, nous avons donc ici l' image et les éléments span. Sélectionnons des éléments profonds à l'intérieur du concepteur. Je vais donc utiliser à nouveau Flexbox Ensuite, nous devons changer de direction Ce sera une colonne. Également. Je vais aligner le texte au centre. Ensuite, nous avons besoin d'un peu d'espace sur le côté gauche. Réglons-le sur, pour qu'il fonctionne. Nous avons donc ici ces parlements. Maintenant, en fait, nous pouvons personnaliser chacun de ces éléments de poêle. Allons-y et sélectionnons le sinus ou la plage. Le premier élément de span utilisant le nième sélecteur enfant. La taille de la police sera donc de 1,8 RAM. Ensuite, nous avons besoin de l'épaisseur de la police, elle sera en gras. Définissons le texte, le transformons en majuscules et changeons la couleur Ça va être blanc. Ensuite, nous avons besoin d'un espace entre les lettres en utilisant le point d' espacement des lettres pour obtenir une rampe. Nous avons donc ici le nom du concepteur, le premier élément de la travée. Allons-y et dupliquons ce code. Modifiez également le sélecteur d'enfants dont nous avons besoin ici. Je vais modifier la taille de la police. Réglons-le à un point pour la RAM. Et si vous changez la couleur , vous allez passer à 999. Vérifions les résultats. Nous avons donc ici le deuxième élément de portée. Ensuite, je vais m' occuper de l'icône du menu, qui sera placée sur le côté droit. Réglons la position sur absolue. Dans ce cas, la position sera de trois RAM. Nous avons besoin de la bonne position. Il en sera de même pour la RAM. Et définissez également la largeur. Faisons cinq RAM. Alors. La hauteur sera de trois RAM. Et nous avons également besoin ici d'une couleur de fond temporaire. Utilisons CCC. Nous avons donc ici l'icône du menu placée sur le côté droit de la navigation. Allons-y et sélectionnons la ligne. Réglons sa largeur à 100 %. La hauteur sera indiquée par rapport à la RAM. De plus, nous avons besoin ici que la couleur de fond soit blanche. Débarrassons-nous de ces couleurs d'arrière-plan temporaires à partir de l'icône du menu. Nous avons donc les lignes, nous devons maintenant les aligner. Et pour cela, je vais utiliser Flexbox. Nous avons besoin de Display Flex. Ensuite, nous devons changer de direction. Ce sera une colonne. Nous avons également besoin d'un certain espace entre les lignes en utilisant de manière uniforme l' espace de contenu de justification. Nous avons donc ici l'icône du menu, qui est maintenant jolie. Changeons le curseur. Faites-le pointer. Ensuite, je vais sélectionner l'icône du menu avec le pointeur de la souris. Réglons la transformation à l'échelle. Pourquoi ? 1,4 ? Nous devons également effectuer une transition pour un effet fluide. Une fois que nous survolons l'icône du menu, ce K augmentera ici Effet sympa et cool. D'accord, éliminons les affichages depuis la navigation car nous allons faire en sorte que cela fonctionne. Tout d'abord, je vais m'occuper de la navigation à gauche. Réglons la largeur à 30 %. Ensuite, nous avons besoin que la hauteur soit de 100 %. Allons-y et sélectionnons l'image de gauche de Nafta, car pour le moment, l' image est trop grande Réglons la largeur à 100 %. Hauteur. Ce sera également 100 %. Encore une fois, nous avons besoin ici de pieds d'objets avec la valeur couverte. Nous avons donc ici l' image qui est placée sur le côté gauche de la navigation. Définissons la largeur de la navigation. Ça va être 100 %. Ensuite, la hauteur sera de 100 % de la hauteur de la fenêtre d'affichage. Nous avons également besoin ici de la couleur de fond, la couleur noir foncé. Ensuite, je vais régler la position sur fixe. La position supérieure sera nulle et la position de gauche sera également nulle. Très bien, alors voyons voir. L'image est jolie. Utilisons Display Flex. Nous avons donc ici au moins la navigation. Ensuite, je vais réduire légèrement l'opacité. Réglons 0,5 pour l'image. Ensuite, je vais sélectionner le côté droit. Réglons la largeur à 70 %, puis la hauteur à 100 % Ensuite, je vais m' occuper . Ensuite, je vais m' occuper du bouton de fermeture en X. Réglons sa largeur à quatre RAM pour que la hauteur soit également complètement REM. Donc, lorsque vous entendez la couleur d' arrière-plan, je parle de la couleur d' arrière-plan temporaire, puis je vais définir la position à corriger. La position de pointe sera de cinq RAM. Pour ce qui est de la bonne position, je vais également la fixer à cinq pour lui. Changeons également de cap à partir du bon point. Nous avons donc ici le bouton de fermeture X. Débarrassons-nous de ces couleurs d'arrière-plan temporaires et prenons soin des lignes pour créer un sinus X. Commençons donc par deux pour la RAM. La hauteur sera le point par rapport à rampe alors que la couleur d'arrière-plan sera le blanc. Nous avons donc ici les lignes et nous devons maintenant les transformer pour en faire X. Je vais donc sélectionner la première ligne qui utilise Transform. Faites pivoter la direction Z comme valeur que je vais placer vos -45 degrés. La première ligne est donc pivotée. Dupliquons ce code. Utilisez votre ligne ex pour vous débarrasser du signe moins à partir d'ici. De plus, nous avons besoin de la fonction Translate pour déplacer les éléments d'un point négatif vers la RAM, puis d'une rampe de -0,1 Maintenant, nous avons ici et le bouton X. Ensuite, je vais prendre ici les éléments de titre H1 sur le côté droit de la navigation Définissons la famille de polices. Ça va être franc, sans empattement. Ensuite, nous avons besoin de la taille de la police, ce sera cinq RAM. Nous allons modifier l'épaisseur de la police. Ajoutons-le à 300. Je vais transformer le texte en majuscules. Changez également la couleur. Je vais le mettre en blanc. Nous avons donc ici l'élément de titre H1, qui est le nom du concepteur Ensuite, définissons la position sur absolue. Je vais fixer la première position à 20 %. Quant à la position de leader, elle sera de 50 %. Nous voilà donc contents. Titre bien aligné. Ensuite, nous allons au moins vous éloigner de la navigation. Je vais utiliser Display Flex. Ensuite, je vais changer de direction car nous devons aligner les éléments verticalement. Ensuite, définissons la position sur absolue. La première position sera également de 30 %. La position de gauche, je vais la mettre à 50 % de probabilité de cap. Nous avons donc ici les éléments de navigation. Allons-y et sélectionnons au moins un élément. Je veux dire, les liens, je vais changer de famille de polices, ce sera un san-serif candide Définissons ensuite la taille de la police. Je vais le régler sur Fall RAM. De plus, nous avons besoin ici de la couleur CCC. Ensuite, nous avons besoin de Margin, 0,5 RAM plutôt que zéro. Les éléments de navigation sont désormais plus beaux. Ensuite, sélectionnons le premier lien à l'aide du nième sélecteur enfant Je vais changer de couleur. Utilisons la couleur rouge. Col 374. Très bien, vous avez donc le premier élément qui est lu. Ensuite, je vais utiliser un effet de survol. Je vais changer la couleur en survolant et utiliser à nouveau cette couleur rouge Et nous devons également faire la transition pour obtenir un effet fluide. OK, alors maintenant, une fois que nous survolons les éléments de navigation, ils changeront de couleur et seront lus Ensuite, je vais utiliser du JavaScript. Créons une variable. Ce sera l'icône du menu. Allons-y et sélectionnons l'icône du menu l'aide de la méthode de sélection de requête Nous devons spécifier le nom de la classe, qui sera l'icône du menu Dupliquons cette variable deux fois. Nous avons besoin ici du bouton X sélectionné. Et je vais également utiliser votre navigation. Spécifiez ici le nom de classe approprié. Navigation. Je vais maintenant ajouter un écouteur d'événements à l'icône du menu avec un événement de clic et une fonction de rappel Nous devons donc ajouter une classe à la navigation. Une fois que nous avons cliqué sur le bouton. Cette classe va être naviguée. C'est copier ce code. Maintenant, nous avons besoin du bouton X. Une fois que vous avez cliqué sur le bouton X, nous devons supprimer la classe de la navigation. Ensuite, utilisons ce cluster nouvellement créé pour naviguer. Mais avant tout, nous devons masquer la navigation en utilisant l'opacité zéro et la visibilité masquée Ensuite, nous avons besoin de la navigation suivie de la navigation. Et nous devons réafficher la navigation en utilisant l'opacité 1 et la visibilité. Maintenant, nous devons faire la transition entre les versions 0.3 s. Maintenant, une fois que nous avons cliqué sur l'icône du menu, la navigation s'affiche. Et une fois que nous avons cliqué sur le bouton X, il se cachera. Très bien, c'est donc tout à propos de la navigation. Passons à autre chose. 33. Projet 4 - Créer une bannière animée: Très bien, une fois que nous avons terminé la navigation, il est temps de passer à autre chose Et donc deux Créez la partie suivante du projet. La prochaine partie sera une bannière animée. Je vais donc insérer vos nouveaux commentaires pour Landing. Ensuite, je vais ouvrir une balise de section avec un nom de classe, Landing, dans laquelle je vais ouvrir une balise DIV avec la classe Banner Cet élément inclura donc autre chug profond avec deux classes, titre et la diapositive de titre Un total comportera deux diapositives. Insérons ici des éléments de titre h3 avec le texte, Bonjour Je le suis. Ensuite, nous aurons des éléments de titre H1 avec un texte et Smith Dupliquons. Elements, modifiez le nom de la classe. Et nous devons également modifier le texte. Nous voici donc de Londres. Nous avons donc besoin ici d'un design d'intérieur. Très bien, voyons ce qu'il en est du balisage HTML. Passons à autre chose et commençons à écrire du CSS. Je vais insérer vos commentaires pour Landing. Ensuite, je vais sélectionner Atterrissage. Je suis dans cet élément de section. Configurons à 200 % que la hauteur sera égale à 100 % de la hauteur de la fenêtre d'affichage Ensuite, je vais sélectionner Banner. Réglons la position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui est un élément de section. Fixons ensuite une position à 35 %. La position gauche sera de 50 % et nous devons centrer la bannière à l' aide de Transform Translate X avec -50 %. Très bien, ensuite, nous devons définir la largeur. Ça va être 100 %. Quant à la hauteur, je vais la régler à 40 RAM. De plus, nous avons besoin ici du centre d' alignement du texte. Il peut donc voir que la bannière est placée au centre. Allons-y et sélectionnons les éléments de titre de la diapositive h3 Je vais définir la taille de la police sur, à exécuter et à transformer le texte en majuscules Je vais changer la couleur, ça va être 999. Ensuite, nous avons besoin d'un espace entre les treillis en utilisant un espacement des lettres de 0,3 ran De plus, je vais créer de l'espace en bas en utilisant la marge inférieure, ce sera pour fonctionner. Nous avons donc ici des rubriques. Dupliquons ce code, changeons le sélecteur dont nous avons besoin ici pour l'élément de titre H1 La taille de la police sera de six RAM. De plus, je vais utiliser l'épaisseur de la police qui sera en gras. Changez ensuite la couleur. Faisons en sorte qu'il soit blanc. De plus, nous devons laisser ce patient peser 0,25 RAM et nous débarrasser de la marge OK, alors c'est ça. Les titres sont plutôt jolis. Ensuite, nous devons sélectionner la diapositive d'en-tête. Réglez la position sur absolue. La largeur va être de 100 %. À présent, les titres sont placés les uns sur les autres. Je vais utiliser Transform, Translate Z moins atrium et également régler l'opacité sur zéro et la visibilité À présent, les titres sont masqués. Ensuite, je vais créer des images-clés CSS. Le nom de l'animation sera le titre de l'animation. Donc, à zéro pour cent, nous avons besoin de ces trois lignes de code. Ensuite, à huit pour cent, je vais changer la valeur de la fonction Translate pour qu' elle soit nulle et nous devons également afficher le titre. La prochaine étape sera de 48 %. Nous avons besoin du même code ici. Ensuite, nous avons besoin de 56 %. Et nous avons besoin de ce code à partir de là, dès la première étape. La prochaine étape sera de 100 %. Ce sera la dernière étape. Nous en avons besoin ici. Le même code. Nous devons maintenant appliquer ces règles aux éléments, à la propriété de votre animation, puis au nom de l'animation. Ensuite, nous avons besoin d'une durée et d' une infinité et également d'une linéarité. Dupliquons ce code, changeons le nom de la classe. En fait, nous avons besoin de rythme. Pour la deuxième diapositive, nous avons besoin d'un délai de 4 s. Comme vous pouvez le voir, nous avons ici une animation vraiment sympa et cool. OK, donc c'est tout pour la bannière. Passons à autre chose. 34. Projet 4 - Section Créer à propos: Très bien, il est temps de passer à autre chose. Et ainsi de suite Créez la section suivante du projet. La section suivante sera donc une section À propos. Allons-y et insérons de nouveaux commentaires pour la section À propos que je vais ouvrir. Type de section contenant le nom de la classe. Dans lequel je vais ouvrir tag profond avec une classe à peu près à gauche. Ce sera le côté gauche où nous aurons l'image. Allons-y et sélectionnons l'image dans le dossier images. Ce sera About point JPG. Ensuite, nous avons besoin du côté droit dans lequel nous aurons les éléments de titre H1 À propos de. Ensuite, nous aurons les trois titres H Elements, high et Smith. Ensuite, nous avons besoin de la balise DIV avec les informations de classe dans lesquelles je vais ouvrir le paragraphe avec un texte factice Ensuite, nous aurons ici le tag DIV avec le réseau social de la classe, dans lequel je vais l' insérer. Maintenant, quelques icônes. La première sera celle des marques de fans. Fa tweeter. Dupliquons-le deux fois et changeons les noms des classes. Le second sera Facebook, F, et le troisième sera Instagram. Vous aurez donc le balisage HTML. Ensuite, nous devons créer quelques autres éléments. Lorsque vous entendez des éléments de titre H4 avec le texte, contactez-moi. Ici. Ensuite, je vais ouvrir la balise span dans laquelle je vais insérer un e-mail. Ensuite, ce sera lien complet dans lequel je vais passer. Et Smith sur design.com, une adresse e-mail factice Dupliquons ce code. Changez ici, envoyez un e-mail au téléphone et ne sécurisez pas un numéro de téléphone factice Très bien, donc en fait avec le balisage HTML, nous avons terminé. Allons-y et commençons à écrire du CSS. Insérez de nouveaux commentaires pour notre nouvelle section. Je veux dire la section À propos. Ensuite, je vais sélectionner les éléments de la section et définir sa largeur à 100 %. Quant à la hauteur, elle sera de 100 % de la hauteur de la fenêtre d'affichage. Ensuite, je vais utiliser Flexbox. Ensuite, nous avons besoin du centre de contenu justify-. Et je vais aussi créer de l'espace sur le dessus en utilisant du rembourrage, le dessus peut être rampé. Il est donc conçu que les côtés gauche et droit sont placés côte à côte Ensuite, nous devons ici modifier la hauteur du conteneur. Ça va être 100 %. Maintenant, nous avons également ici le fond sombre dans la section À propos. Ensuite, je vais sélectionner le côté gauche. Réglons la largeur à 40 %. Dupliquons ce code et trouvons également la largeur du côté droit. Ce sera 60 %. Ensuite, je vais sélectionner l'image qui est fermée dans la partie gauche. Réglons la largeur à 33 RAM. Changez la hauteur, ce sera 55 RAM. Ensuite, nous devons ajuster l'image à l' aide d'objets. Couvercle d'alimentation. Définissez également la position, rendez-la absolue. Ensuite, nous devons le positionner par rapport à l'élément parent qui se trouve à peu près à gauche. Définissons deux positions qui seront égales à moins dix RAM. Maintenant, nous avons besoin de la bonne position. Mettons-le à zéro. D'accord ? Nous avons donc ici l'image. Ensuite, prenons soin des éléments de titre H1 sur le côté droit. Définissons la famille de polices sur Can-it Sans-Serif. Ensuite, nous avons besoin de la taille de la police, il va falloir 20 RAM maintenant, donc je vais utiliser la taille de police. Soyons audacieux. Ensuite, je vais transformer le texte en majuscules. Ensuite, je vais créer un espace entre les lettres. Changez également la couleur qui va être 222. Ensuite, je vais changer de position pour qu'elle soit absolue. Nous avons besoin d'une position relative pour l'élément parent pour un développement à peu près correct. Ensuite, je vais définir la première position à -20 RAM. Quant à la position de gauche, elle sera de 15 RAM. Le titre est donc beau et bien aligné. Ensuite, nous avons besoin d' éléments de titre h3 sur le côté droit. La famille de polices va donc être comptée. San-Serif Ensuite, je vais augmenter la taille de la police. Il va y avoir plein de RAM. Ensuite, je vais régler le poids de la police à 300. De plus, nous avons besoin que la couleur soit blanche. Ensuite, je vais changer de position. Réglons-le sur l'absolu. Et nous devons nous positionner à moins sept RAM plutôt que nous n'avons besoin d'une position au tour qui sera de 25 RAM. Nous avons donc ici le deuxième titre aligné sur le premier titre, et il est plutôt joli. Ensuite, je vais sélectionner Info. Laisse la position absolue, réglée sur la position 25 RAM. Ensuite, nous avons besoin que la position gauche soit de 25 RAM. Après cela, je vais sélectionner le paragraphe dans les informations. Configurons la famille de polices sur can it san-serif. Ensuite, je vais modifier la taille de la police. Ce sera 1,8 RAM. Ensuite, je vais régler la largeur. Faisons-en 45 RAM. La couleur du paragraphe va être 777. Nous devons également modifier la hauteur de la ligne. Ajoutons-le à la version 1.8. Et nous avons besoin d'un peu d'espace en bas en utilisant la marge inférieure Faisons-en cinq RAM. Nous avons donc ici le paragraphe. Suivant. Allons-y et occupons-nous des réseaux sociaux. Je vais régler l' affichage pour qu'il soit flexible. Ensuite, nous avons besoin d'espace en bas en utilisant la marge des cinq derniers rayons. Et maintenant, nous pouvons personnaliser l'icône Font Awesome. Nous allons donc sélectionner les réseaux sociaux suivis de l'élément I. Passons à six RAM. Et la hauteur sera également de six RAM. Nous avons besoin que le rayon de la frontière soit de 50 %. Et nous avons également besoin de la couleur de fond. Utilisons 202 O2O. Nous avons donc ici les cercles. Je vais utiliser Display Flux. Ensuite, afin de centrer l'icône lorsque vous justifiez Contact Center et les éléments de ligne au centre. Je vais donc augmenter la taille de la police. Faisons-en 2,5 RAM. À présent, les icônes sont placées au centre des cercles. Ensuite, je vais utiliser de l'espace sur le côté droit en utilisant Margie directement dans la RAM Et la couleur sera également le rouge, que nous avons utilisé dans les conférences précédentes. Et changez également le curseur, faites-le pointer. Les icônes Font Awesome sont donc plutôt jolies. Ensuite, je vais m'occuper de l'info H, quatre éléments. Réglons la taille de police à 1,8 RAM. Ensuite, utilisez de la couleur, faites-la blanche. Ensuite, je vais sélectionner les éléments de la plage. À l'intérieur de l'info. Réglons la taille de police à 1,6 RAM. Modifiez l'épaisseur de la police, elle sera en gras. Ensuite, nous avons besoin que la couleur soit 777. De plus, je vais utiliser le bloc d'affichage, puis passer à la RAM et à zéro Enfin, nous devons sélectionner les éléments du lien. Changeons la famille de police. Ça va être compté comme un serif. Et puis quand changer la couleur, utilisons la couleur rouge. Très bien, donc en fait cette section est personnalisée. Ça a l'air plutôt sympa. Nous avons maintenant deux effets Create fade. Tout d'abord, nous devons masquer l'image. Utilisons l'opacité jusqu'à zéro, puis la visibilité. Caché Et nous devons également déplacer l' image vers le bas en utilisant Transform, Translate Y 20 ramp. Utilisons également ce code pour le côté droit de la section À propos. Maintenant, le contenu est masqué et nous devons écrire du JavaScript. Je vais ajouter un écouteur d'événements à l'objet de la fenêtre à l' aide d'événements de défilement et d'une fonction de rappel Ensuite, nous devons créer une variable qui sera d'environ. Sélectionnons les éléments à l' aide de la méthode de sélection de requêtes Et maintenant, nous devons utiliser les instructions if else, votre condition sera que le décalage de la page Y soit supérieur ou égal à 200. En fait, cette propriété nous indique la distance à laquelle nous faisons défiler la page vers le bas. Ensuite, nous devons ajouter un changement de classe à propos. Si cette condition est vraie. Dans l'instruction else, nous avons besoin de la même condition mais avec des éléments supprimés. Nous devons donc supprimer la classe de modification de la section about. Vérifions la propriété de décalage Y de la page de console. Je vais vous montrer ce que cela nous donne réellement une fois que nous aurons fait défiler la page. Inspectons donc la page et passons à la console. Donc, une fois que nous faisons défiler la page vers le bas, nous obtiendrons des valeurs. Encore une fois, il nous montre la distance que nous parcourons vers le bas en pixels. OK, nous devons maintenant sélectionner Modifier, puis À propos de l'image de gauche. Et nous devons utiliser ces trois lignes de code. Nous devons réafficher l'image. Et nous devons également le faire passer à la vitesse supérieure. Utilisons le même code pour le côté droit. Supprime le sélecteur d'image. Nous avons besoin ici d' une transition avec un certain retard. Et quand vous ferez la transition ici aussi. Alors maintenant, comme vous pouvez le voir, nous avons ici un très bel effet de fondu. Très bien, alors c'est ça. En fait, l'icône du menu ne fonctionne pas ici. Nous devons donc régler ce problème. Utilisons la propriété index et définissons-la sur 100. Alors maintenant, considérons que le problème est résolu, non ? Passons à autre chose. 35. Projet 4 - Section Créer et personnaliser des services: Très bien, il est maintenant temps de passer à autre chose et créer la section suivante de notre projet La section suivante concerne les services. Insérons de nouveaux commentaires pour une nouvelle section. Ensuite, je vais ouvrir la balise de section avec la classe Services. À l'intérieur de l'élément de section. Je vais ouvrir la balise DIV, qui sera l'en-tête Services Dans cet élément, je vais ouvrir la balise d' en-tête h3 avec le texte. Ce que je fais Ensuite, nous avons besoin d' éléments de titre H1 avec un texte Mes services Après cela, je vais ouvrir la balise DIV avec la classe Services, au moins À l'intérieur de cet élément. Je vais ouvrir une autre balise DIV avec l'élément de la liste des classes dans lequel je vais ouvrir l'icône Font Awesome avec la classe FA, solid fa, groupe de couches Ensuite, nous avons besoin de vous étendre sur l'élément dans lequel je vais insérer de l'espace. Planification. Ensuite, dans un autre élément de travée avec le texte, la disposition du mobilier. Ensuite, nous avons besoin d'une autre plage, qui sera la sélection de la surface. Je vais donc dupliquer l'élément de liste deux fois, puis nous devrons également changer les noms des classes et le texte. La deuxième icône va donc être une plume. Nous avons besoin ici de la conception de l'éclairage. Ensuite, la prochaine sera celle des détails intérieurs. Ensuite, nous allons procéder à l'installation. En ce qui concerne le troisième élément de la liste, l' icône Font Awesome représentant une maison. Ensuite, à l'intérieur de ce panneau, je vais insérer une sélection de couleur. Ensuite, il y aura les parures de fenêtres. Ensuite, nous aurons des documentations sur les constructeurs. Très bien, c'est tout à propos du balisage HTML. Nous avons ici les éléments HTML. Ensuite, je vais commencer à écrire le CSS. Tout d'abord, comme d'habitude, je vais insérer de nouveaux commentaires pour une nouvelle section, Services et hors Services. Ensuite, je vais ouvrir les éléments de la section. Définissons par ce que ce sera 100 %. Ensuite, nous avons besoin de la hauteur, qui sera de 70 pour la hauteur de la fenêtre d'affichage Ensuite, je vais utiliser Flexbox. Changeons la direction qui va être la colonne. Et je vais aussi aligner les éléments au centre. Très bien, nous avons donc ici les éléments HTML. Ensuite, je vais sélectionner l'en-tête Services, suivi de l'élément d'en-tête H à trois. Je vais régler la taille de police à deux grammes. Ensuite, nous devons transformer le texte en majuscules. Je vais donc changer la couleur, ça va être 777. Ensuite, je vais utiliser l'espacement des lettres. 0,3 points. Également. Je vais créer un espace en bas en utilisant la valeur inférieure de la marge pour exécuter. Nous avons donc ici la première rubrique. Dupliquons ce code et changeons le titre. Ça va être H1. Nous avons besoin ici d'une taille de police de cinq RAM. Ensuite, je vais me débarrasser de la propriété de transformation de texte. La couleur va être blanche. De plus, nous avons besoin de votre marge inférieure à 12 RAM. Nous avons donc ici la deuxième rubrique. En fait, je vais placer les titres et les caractères sensoriels à l' aide du centre d'alignement du texte Nous avons donc maintenant un meilleur résultat. Ensuite, je vais m' occuper de la liste des services. Mettons-en avec deux 70 %. Ensuite, je vais utiliser flexbox, suivie de la propriété justify content avec la valeur espacée de manière uniforme Nous avons un espace uniforme entre les éléments Ensuite, je vais sélectionner un élément de liste. Allons-y avec 230 RAM. Ensuite, nous avons besoin de livres de flux. Je vais changer de direction. Faisons-en une colonne car nous devons aligner les éléments verticalement. Utilisons le centre d'alignement des éléments. Les éléments de la liste sont donc bien alignés. Ensuite, allons-y et sélectionnons les éléments de la liste, la police, l'icône Awesome. Je vais augmenter la taille de la police. Ça va être complet. Ensuite, la couleur. Ça va être lu. De plus, je vais utiliser la marge inférieure. Avec une valeur de trois RAM. Nous avons besoin d'espace en bas. Les icônes sont donc plutôt jolies. Ensuite, je vais m' occuper de l'élément span. Réglons la famille de polices sur Can-it Sans-Serif. Ensuite, je vais modifier la taille de la police. Ça va être pour percuter, changer de couleur. Je vais utiliser la couleur blanche. Et nous avons également besoin d'une marge, 0,7 RAM en haut en bas et de zéro sur les côtés gauche et droit. OK, donc en fait, tout a l'air bien. Nous devons masquer l'en-tête car nous allons utiliser le même effet de fondu que dans la section précédente. Déplaçons l'en-tête vers le bas en utilisant Transform Translate Y cinq RAM. Il en va de même pour la liste des services. Je veux dire les éléments de la liste. Maintenant, tout le contenu est masqué. Allons-y et écrivons du JavaScript. Je vais dupliquer cette variable. Changez de nom, ce sera Services. Ensuite, nous avons besoin, encore une fois , de déclarations. Le nombre de pixels sera maintenant modifié par About dot offset top. Une fois la section À propos terminée , plus 200 pixels, nous devons afficher l'effet. Maintenant, je vais sélectionner le changement suivi de l'en-tête Services. Et nous avons besoin ici d'opacité 1, puis de visibilité, visible et de Transform Translate Y avec zéro Utilisons la transition. Ensuite, je vais copier ce code et le coller ici, nous avons besoin d'un élément de liste au lieu de l'en-tête des services. Sélectionnons ici l'élément de liste avec sélecteur F child et utilisons la transition pour le premier élément avec un délai de 0,5 s. Dupliquons ce code deux fois Modifiez la lecture des graphiques. Nous avons également besoin d'un délai de retard différent pour le deuxième et pour le troisième élément de la liste. OK, si nous rechargeons la page et que nous la faisons défiler vers le bas, nous obtiendrons cet effet de fondu agréable et cool OK, donc c'est tout à propos de la section Services. Passons à la conférence suivante. 36. Projet 4 - Section Créer et styliser un portfolio: Très bien, donc une fois que nous en avons terminé avec la section Services, il faut maintenant passer à autre chose et créer la section suivante, qui sera un portfolio. Je vais donc insérer vos nouveaux commentaires pour la nouvelle section. Ensuite, allons-y et, comme d'habitude, ouvrons la balise de section avec le portefeuille de classes. Je vais insérer votre balise DIV, qui sera l'en-tête du portfolio. Ouvrons la balise d'en-tête h3 avec le texte Portfolio. Ensuite, nous avons besoin de l'élément de titre H1. Nous allons juste vérifier mon travail. Après cela, je vais ouvrir la balise DIV avec la classe works Ce sera une enveloppe dont nous avons besoin du travail lui-même, qui se composera de deux parties Nous aurons une image. Nous allons sélectionner l'image dans le dossier des images. Ce sera Work One. Ensuite, nous aurons Work Info dans lequel je vais insérer un élément de titre h3 Ce sera du design d'intérieur. Ensuite, nous avons besoin de l'élément de titre H1, qui donnera un nouveau style à votre maison Ensuite, nous aurons un paragraphe avec du texte fictif. Ensuite, nous avons besoin de liens, qui seront peu nombreux. Projet. Très bien, alors c'est tout pour le travail. Je vais dupliquer cet élément plusieurs fois. Nous aurons quatre œuvres. Pour la deuxième œuvre, je vais modifier l'emplacement de l' image et des informations sur l'œuvre. Et je vais aussi changer le nom de l'image. Ensuite, nous aurons ici l'image Œuvre 3. ensuite travaillé pour et pour la quatrième Œuvre, je vais faire de même. Modifiez l'emplacement de l'image et des informations de travail. Très bien, donc en fait, avec le balisage HTML pour cette section, nous avons terminé Passons à autre chose et prenons soin du CSS. Je vais créer de nouveaux commentaires pour le portfolio. Ensuite, je vais sélectionner l'étiquette de section. Réglons la largeur à 100 %. Et la hauteur sera également de 100 %. Et nous avons également besoin d'un rembourrage, 20 RAM et zéro, puis de cinq nombres premiers et à nouveau de zéro Ensuite, je vais copier l' intégralité du code de la section précédente. Et je vais changer les noms des classes. Insertons-le ici. Portefeuille. Nous avons également besoin ici d'une marge en bas, de 20 rampes. Comme vous pouvez le voir, nous avons ici les titres des sections et ils sont plutôt jolis Très bien, ensuite, je vais m' occuper des travaux. Réglons la largeur à 80 %. Ensuite, nous avons besoin de la marge automatique pour centrer les éléments. Donc le Centre de développement. Ensuite, je vais sélectionner Work itself. Utilisons Flexbox. Nous devons ici justifier l'espace de contenu de manière uniforme. Nous avons besoin d'un espace uniforme entre les éléments flexibles. Ensuite, je vais fixer la marge à 15 RAM et à zéro. On peut donc voir que les éléments sont bien alignés. Ensuite, sélectionnons Image. Je vais définir la largeur, elle sera de 40 %. Ensuite, nous devons être à votre taille. Ça va faire 30 RAM. De plus, je vais utiliser le flux d'objets avec la couverture de valeur. Ensuite, je vais réduire légèrement l'opacité. Mettons-le à 0,8. Les images sont donc belles. Ensuite, je vais sélectionner Work Info. Réglons la largeur à 40 %. Ensuite, je vais sélectionner les éléments de titre h3 dans les informations de travail qui définissent la taille de la police à 1,6 RAM Ensuite, nous devons colorier ça va être 777. Je vais également transformer le texte en espacement entre lettres majuscules pour créer un espace entre le treillis Le premier élément de titre est donc joli. Ensuite, je vais dupliquer ce code, modifier le sélecteur dont nous avons besoin ici, les éléments de titre H1 Nous devons changer la famille de police. Ce sera un serif franc. Ensuite, je vais augmenter la taille de la police. Réglons-le sur Fall RAM. De plus, je vais utiliser ici l'épaisseur de la police, le gras, puis changer la couleur. Ça va être blanc. De plus, je vais me débarrasser des chèques qui transforment la propriété. En ce qui concerne l'espacement des lettres, il va pointer vers une rampe. En plus de cela, nous avons besoin de votre marge. Trois rampes et zéro. Très bien. Ensuite, je vais sélectionner Work Info, puis le paragraphe. Réglons la taille de police à 1,6 RAM pour que la couleur soit environ 777. Je vais placer la hauteur de la ligne à 1,6, puis utiliser la marge inférieure avec une valeur à enfoncer. D'accord ? Le paragraphe est donc joli. Ensuite, je vais sélectionner les éléments du lien. Réglons la taille de la police à 1,6 RAM plutôt que de modifier le poids de la police, ça va être en gras. Je vais aussi changer la couleur. Utilisons la couleur rouge , puis utilisons l'espace entre les lettres. Alors maintenant, l' élément de lien est joli. Ensuite, je vais masquer l'en-tête du portfolio en utilisant l' opacité et la visibilité Et nous devons également déplacer les éléments vers le bas. Nous allons utiliser le même effet de destin que nous avons utilisé dans les sections précédentes. Récupérons ce code et utilisons-le également pour le travail. Nous avons besoin ici de dix RAM pour le travail au lieu de cinq RAM. Ensuite, je vais écrire du JavaScript. Sélectionnons une nouvelle variable qui sera le portefeuille. Ensuite, je vais utiliser la déclaration if else. Nous devons changer ici le nom de la section. Dans ce cas, nous avons besoin de services. Et ici, nous avons besoin d'un portefeuille car le portefeuille vient après la section Services. Nous devons maintenant sélectionner les éléments en utilisant les efforts de changement de classe. Nous avons besoin ici de l'en-tête du portfolio, récupérez ce code et définissez l'opacité sur un Ensuite, nous avons besoin de visibilité, de visibilité. Quant à la fonction Translate Y, elle sera nulle. Et nous avons également besoin d' une transition pour un effet fluide. Je vais récupérer ce code et l'utiliser pour le travail. Changeons le nom de la classe. Ça va être du travail. Ensuite, nous devons utiliser la transition, mais nous utiliserons des transitions différentes pour les différents éléments de travail. Pour le premier élément, nous avons besoin d'une transition avec un délai 0,5 s. Dupliquons ce code. Pour le deuxième élément, nous avons besoin d'un délai 1 s. Ensuite, pour le troisième élément, nous avons besoin de 2 s. Quant au quatrième élément, cela va prendre 3 s. Très bien, donc si nous rechargeons la page, nous obtiendrons ces effets sympas et sympas Voilà pour la section Portfolio. Passons à la conférence suivante. 37. Projet 4 - Section de créer des données avec des compteurs: Très bien, donc une fois que nous en aurons terminé avec la section Portfolio, nous devons maintenant passer à la section suivante, qui sera consacrée aux données, je veux dire les compteurs de données animés Ouvrons la balise de section avec le nom de classe Data. Ensuite, je vais ouvrir une balise DIV, qui sera l'en-tête de données Insérons les éléments du titre de votre âge de trois ans, qui seront simplement des réussites. Et je vais également vous insérer des éléments de titre H1 avec le texte Partageons mes réussites. Très bien. C'est tout à propos de l'en-tête de la section. Ensuite, je vais ouvrir la balise DIV, qui sera une liste de données, dans laquelle nous aurons des éléments de données Insérons ici l'élément span. Et ici, les clients. Ensuite, nous aurons d' autres éléments de travée. Le nom de la classe, engourdi, je voulais dire le numéro. Et nous avons également besoin ici de Data, Val, qui va être un attribut. Je vais passer ici un nombre aléatoire. Par défaut, je vais insérer ici zéro. Dupliquons donc l'élément de données deux fois. Changeons ici le contenu, il s'agira de projets réalisés et la valeur des données sera de 652 Et nous avons besoin ici de tasses de café. Et la valeur des données sera de 1 000. D'accord, alors parlons-en à propos du balisage HTML. Nous avons ici tous les éléments que nous venons de créer. Je vais commencer à écrire le CSS. Instituons des commentaires pour les données. Ensuite, je vais sélectionner les éléments de la section et définir la largeur à 100 %. Quant à la hauteur, elle sera également de 100 %. Il nous faut du rembourrage, 20 RAM et zéro. Ensuite, je vais sélectionner l'en-tête de données. Utilisons ici le centre d' alignement du texte. Ensuite, je vais sélectionner l' en-tête de données H, trois éléments de titre. Modifiez la taille de la police. Ce sera pour courir. Ensuite, nous avons besoin d'une transformation fiscale. Ce sera en majuscules. Également. Je vais changer de couleur. Mettons-le à 777. Ensuite, nous avons besoin d'un espace entre les lettres, disons 2,3 RAM. Et je vais également placer la marge du bas à la rampe. Le premier titre est donc Personnaliser. Ensuite, je vais sélectionner les éléments de titre H1. Modifiez la taille de la police. Donc cinq RAM, alors nous avons besoin que la couleur soit blanche. De plus, nous avons besoin d' un espacement des lettres avec 0,3 RAM, puis d'une marge en bas, qui sera de 12 rampes. C'est tout pour les titres de la section. Ensuite, je vais personnaliser les données. moins. Réglons la largeur à 60 %. La hauteur sera de 90 RAM, ce que nous avons besoin de la marge automatique pour l'envoyer à l'élément. Ensuite, je vais m' occuper des éléments de données. Réglons la position sur absolue. Et nous avons également besoin ici de la position relative de l'élément parent, qui est une liste de données. Ensuite, utilisons Flexbox. Nous devons changer de direction. Ce sera une colonne. Nous avons donc ici les éléments de données. Ensuite, je vais sélectionner le premier élément de données. Mettons la position à zéro. Quant à la position suivante, elle sera nulle et dupliquez ce code deux fois. Modifiez les chiffres ici. Nous devons nous positionner à 50 %. Pour le deuxième élément , la position de gauche sera également de 50 %. De plus, je vais utiliser ici transform translate afin de centrer parfaitement l'élément Les valeurs que je vais calculer ici, -50 % et encore -50 %. En ce qui concerne le troisième élément, nous avons besoin ici position inférieure soit nulle et que la position Y soit également nulle. En fait, je ne vois pas ici le troisième élément. Vérifions le code. Oui, il faut changer le numéro. OK, alors maintenant tous les éléments, je veux dire, tous les éléments sont alignés. Ensuite, stylisons ces objets. Sélectionnez des données, des éléments et des éléments de plage. Mais pour commencer, changeons la taille de la police. Ce sera en RAM. Nous avons besoin ici d'une transformation du texte, en majuscules. Également dans un certain espace entre les lettres. Réglons-le pour qu'il pointe vers le bélier. Ensuite, il nous faut de la couleur. Je vais juste avoir 777 ans. Nous avons donc ici les premiers éléments de la plage à l'intérieur de l'élément de données. Dupliquez ce code, modifiez le numéro. Ici, F enfant de la famille de police va être. C'est possible sans serif ? Ensuite, nous avons besoin que la taille de la police soit de 20 RAM. Débarrassez-vous de la transformation fiscale. De plus, nous n'avons pas besoin de cet espacement. Mettons la couleur que je vais utiliser dans la colonne de droite. Et en plus de cela, je vais utiliser la hauteur de ligne. Allons 321. D'accord ? Comme vous pouvez le constater, les éléments de données sont personnalisés. Ils ont l'air plutôt jolis. Et maintenant, nous devons écrire du JavaScript. Je vais sélectionner quelques variables différentes. Le premier sera start, qui sera faux par défaut. Ensuite, je vais sélectionner les données. Je suis dans l'élément section. En outre, nous devons sélectionner les nombres en utilisant la méthode QuerySelector all Et comme nom de classe, je vais utiliser ici Num. Après cela, je vais créer un nombre de départs de fonctions. Insérons ici des éléments de paramètres. Ensuite, nous devons créer une variable qui sera maximale. Et en fait, ce sera la valeur de l'attribut data que nous avons placé ici dans le fichier HTML. Ensuite, je vais créer une variable appelée count. Et je vais utiliser la méthode setInterval. Nous devons maintenant augmenter le contenu des éléments d'une unité en utilisant l' opérateur d'incrémentation, le plus, plus Ensuite, les instructions IF dans lesquelles nous devons vérifier si le contenu des éléments est égal à max, qui est la valeur de l'attribut. Si c'est vrai, nous devons effacer l'intervalle en tant qu'intervalle. Je vais placer ici cinq millisecondes. Nous avons également besoin de l'instruction IF ici pour définir l'événement de défilement. Je veux dire, si la fenêtre fait défiler la fenêtre, pourquoi est-elle supérieure ou égale aux données situées en haut de la page, soit 300 pixels Encore une fois, nous avons besoin que les instructions dans lesquelles nous devons transmettre une valeur booléenne commencent par l'opérateur NOT, puis nous devons parcourir les nombres en utilisant pour chaque assistant de tableau Nous devons appeler la fonction start count en utilisant le paramètre numb Ensuite, nous devons définir la valeur booléenne de départ sur true. D'accord ? Nous devons régler ce petit problème. Nous avons besoin du contenu du texte. Comme vous pouvez le constater, les compteurs fonctionnent correctement. Maintenant, si Y recharge la page et qu'elle est appelée, accédez à la section des données, les chiffres compteront immédiatement Alors le voici. OK, alors c'est ça. Passons à la conférence suivante. 38. Projet 4 - Créer et personnaliser le pied de page du site Web: Très bien, il est maintenant temps de passer à autre chose et créer la dernière partie du projet, qui sera bientôt un pied de Le pied de page va être simple. Insérons de nouveaux commentaires pour le pied de page. Ensuite, je vais ouvrir la balise de pied de page HTML5, dans laquelle nous avons besoin d'une balise DIV avec le nom de classe Footer dans laquelle nous avons besoin d'une balise DIV avec le nom de classe Réseaux sociaux. Je vais créer des icônes Font Awesome. Je veux dire les icônes Font Awesome des réseaux sociaux. Récupérons ce code d'ici et collez-le ici dans le développement. Ensuite, je vais ouvrir l' élément de titre H1 avec le texte. Contactez-moi. De plus, nous avons besoin ici d'un lien. Ça va être et Smith sur design.com, une adresse e-mail de Tammy Après cela, je vais ouvrir un paragraphe avec le copyright de classe, dans lequel nous avons besoin d'un texte de copyright. Copyright suivi du signe du copyright. Ensuite, nous avons besoin de 2023, tous droits réservés. Textes standard sur le droit d'auteur. Je vais également instituer Made by Code et Create, qui seront placés dans la fenêtre. OK, alors c'est ça. Tous les éléments sont créés pour le pied de page. Maintenant, nous devons aller de l'avant et les styliser en utilisant CSS. Instituons vos commentaires pour le pied de page. Ensuite, je vais sélectionner la balise de pied de page. Mettons-nous à 200 %. Ensuite, nous avons besoin de hauteur. Ça va être 50. Tu mets de la hauteur. Je vais également utiliser Flexbox. Changeons de direction, transformons-en une colonne. Je vais également utiliser le centre de contenu justify-pour envoyer les éléments horizontalement et verticalement en utilisant le centre d' alignement des éléments utilisant le centre d' alignement D'accord, nous avons donc ici les éléments bien alignés. Ensuite, je vais sélectionner le réseau social, le wrapper. Utilisons à nouveau les livres sur les flux. Ensuite, nous avons besoin d'une marge en bas pour être de trois RAM. Ensuite, je vais personnaliser les icônes. Je veux dire les éléments I. Commençons par 25 RAM. Ensuite, nous avons besoin que la hauteur soit de cinq RAM. Nous allons créer les cercles. Je vais donc changer la couleur de fond. Utilisons 262626. Également. Arrondissez l'élément en utilisant le rayon de bordure présent OK, ensuite, je vais utiliser Flexbox pour centrer les icônes à l'intérieur des cercles à l' aide de Justify-content center Centre. Créons également de l' espace en utilisant la marge 0,1 RAM sur les côtés gauche et droit. Ensuite, je vais modifier la taille de la police. Ce sera pour courir. Changez également la couleur. Utilisez ici 777. Très bien, nous avons donc ici des icônes de réseaux sociaux Ils ont l'air bien. Ensuite, je vais m' occuper du titre H1 et changer la taille de la police Ce sera plein de RAM. Ensuite, je vais utiliser la couleur blanche. Également. Créez un espace entre les lettres. Réglons-le de manière à ce qu'il pointe vers une rampe. Ensuite, nous avons besoin d'une marge en bas pour fonctionner. Le titre est donc plutôt joli. Ensuite, nous devons prendre soin de l'élément de lien et définir la taille de la police sur, pour exécuter, changer également la couleur. Utilisez ici, D, D, D. Ensuite, nous avons besoin d' une marge en bas. Faisons en sorte que la RAM soit bronzée. Nous avons donc ici l'élément de lien. Enfin, nous devons nous occuper du paragraphe. Cela est donc sélectionné en utilisant le droit d'auteur. Modifiez la taille de la police. Il va falloir 1,6 RAM, alors nous avons besoin de couleur pour être CCC. Ensuite, je vais sélectionner les éléments de plage, qui sont placés à l'intérieur du paragraphe. Changeons la famille de polices. Ça va être considéré comme un serif. Ensuite, je vais modifier la taille de la police. Ce sera pour courir. Ici aussi, nous avons besoin de couleur. Sois lu. C'est la cellule qui se trouve au-dessus du pied de page. Ça a l'air plutôt sympa. Et en fait, le projet est terminé. La seule chose que j' ai à faire est de le rendre réactif aux différentes tailles d'écran. 39. Projet 4 - Rendre le projet réactif: Très bien, nous avons fini créer toutes les sections de ce projet, et il est maintenant temps de le rendre réactif aux différentes tailles d'écran Je vais inspecter la page et passer en mode réactif. Nous devons donc trouver les points d'arrêt sur lesquels nous devons apporter des modifications au projet Je peux voir sur des écrans plus petits que certaines parties du projet sont foirées Nous devons donc nous en occuper Revenons au fichier CSS. Et tout d'abord, je vais créer des commentaires pour le mode responsive. Ensuite, je vais créer une nouvelle requête multimédia CSS, dans laquelle je vais spécifier une largeur maximale de 1 500 pixels Tout d'abord, diminuons la taille de police de l'élément HTML. Portons-le à 55  %, car cela réduira la taille de tous les éléments. En fait, nous devons prendre soin du rectangle pour avoir besoin de changer de position. Sélectionnez Rectangle Tool et fixons ma position à -15 %. En fait, je trouve que toutes les autres sections sont bonnes. Nous pouvons donc trouver un autre point d'arrêt. Le prochain point d'arrêt sera donc de 1 300 pixels. Créons une nouvelle requête multimédia CSS et spécifions ici la largeur maximale de 1 300 pixels Tout d'abord, diminuons nouveau la taille de police pour l'élément HTML. Je vais le régler à 50 %. Encore une fois, les éléments sont devenus plus petits. Ensuite, je vais m' occuper de la section À propos qui se trouve à peu près à gauche et régler sa largeur à 35 %. Pour ce qui est à peu près à droite, je vais régler sa largeur à 65 %. Maintenant, la section À propos semble correcte. Ensuite, je vais m' occuper du portefeuille. Je ne suis que des œuvres. Commençons par le pourcentage de ce soir. Nous avons donc maintenant de meilleurs résultats. Je vais également m' occuper de la section des données. Fixons la largeur des données à 70 %, n'est-ce pas ? Donc je pense que c'est ça. Vérifions la navigation. Tout a l'air bien. Allons-y et trouvons le point d'arrêt suivant. Donc, le prochain point d'arrêt, je pense que ce sera 1 100 pixels Créons une nouvelle requête multimédia CSS. Définissez la largeur maximale à 1 100 pixels. Encore une fois, je vais réduire la taille de police des éléments HTML. Soit 30 à 45 %. Ensuite, je vais prendre ici la section À propos. Sélectionnez À propos des éléments de titre H1 droits et modifiez la taille de police Ça va faire 15 RAM. De plus, je vais changer les deux positions dont nous avons besoin ici, -18 RAM Ensuite, je vais dupliquer ce code. Sélectionnez H, trois éléments de titre. La taille de la police est de 3,5 RAM. Comme le polytope, la position sera de moins neuf rampes. OK, alors maintenant la section À propos est jolie. Ensuite, je vais m' occuper de la section des données. Sélectionnons l'élément de plage de la liste de données. Dans ce cas, le deuxième élément de plage. Réglons la taille de police à 16 RAM. Maintenant, nous avons de meilleurs résultats et nous pouvons réellement aller de l'avant et trouver le prochain point d'arrêt Je pense donc que le prochain point sera de 900 pixels. Créons une nouvelle requête multimédia CSS et spécifions ici la largeur maximale de 900 pixels Allons-y et sélectionnons le rectangle 1. Je vais régler la position Luck sur -40 points. Ensuite, allons-y et sélectionnons le rectangle 2. Il va être placé dans la bonne position à -25 %. Ensuite, je vais sélectionner le concepteur et régler sa position sur 15 rampes, je suis en position de gauche. Ensuite, nous avons besoin ici de l'icône du menu. Changeons la bonne position , ce sera 15 RAM. Nous avons donc maintenant de meilleurs résultats. Occupons-nous de la navigation, qui ne semble pas très bonne pour le moment. Je vais donc sélectionner la configuration de navigation à gauche avec 250 %. Ensuite, je vais sélectionner le côté droit et régler également sa largeur à 50 %. Très bien, pour le moment, la navigation ne semble pas bonne Encore une fois, sélectionnons les éléments de titre H1, qui sont placés sur le côté droit. Utilisons Transform. Traduisez Y. Je vais le déplacer. Désolé, nous avons besoin ici de traduire X et Y. Utilisons -50 % Et je vais aussi utiliser la position relative. Ensuite, nous devons fixer à 200 %. Alignons également le centre du texte. Ensuite, je vais au moins sélectionner Navigation. Déplaçons-le à l'aide de Transform, Translate X -50 %, puis utilisons à nouveau le centre d'alignement du texte Ensuite, je vais m' occuper de la section À propos. Sélectionnez À propos de la gauche et Hauteur huit en utilisant l'option Afficher aucun. Ensuite, nous avons besoin d'environ la bonne et nous devons définir la largeur à 100 %. Maintenant, la section À propos semble bonne et la navigation est également belle. D'accord. Passons donc à autre chose et prenons soin du côté droit de l'élément de titre de la section À propos Réglons la position gauche à 50 %. Nous devons également le centrer à l'aide Transform Translate X -50 %. Ensuite, nous devons nous occuper du deuxième titre, l'élément de titre h3 Changeons que sa position de décalage sera de 35 %. Maintenant, tout a l'air bien. Ensuite, je vais sélectionner Info et régler sa position gauche sur 50 %. Maintenant, nous avons besoin du centroïde en utilisant Transform Translate X -30% D'accord ? Ensuite, je m' occuperai de cette section des services. Sélectionnez la liste des services et définissons sa largeur à 90 %. Ensuite, prenons soin du portefeuille. Je vais sélectionner les œuvres et régler sa largeur à 100 %. Je vais également sélectionner Work Info et régler sa largeur à 50 %. Je crois Ça a l'air sympa. Et en fait, avec ce point d'arrêt, nous en avons terminé. Ensuite, nous devons trouver le point d'arrêt suivant, qui, je pense, sera de 700 pixels Allons-y et créons une nouvelle requête multimédia CSS Et spécifiez ici la largeur maximale de 700 pixels. Dans un premier temps, réduisons la taille de police des éléments HTML. Je vais le porter à 40 %. Ensuite, je vais sélectionner le concepteur et régler sa position gauche sur huit RAM. Et nous avons également besoin de l'icône du menu. C'est la bonne position. Ce sera aussi un atrium. Très bien. Nous devons nous occuper des diapositives. Je parle de la deuxième rubrique. Nous allons donc sélectionner l'élément de titre H1 et diminuer la taille de la police, lui donner cinq RAM Alors maintenant, ça a l'air plutôt beau. Ensuite, nous devons travailler sur la section Services. Allons-y et sélectionnons Services. Changer la hauteur va être de 90, la hauteur de la fenêtre d'affichage. Nous devons donc sélectionner Services, répertorier et modifier la direction de la flexbox. Faisons-en une colonne. Et aussi, nous devons aligner les éléments au centre. Les éléments sont donc placés verticalement, mais nous avons besoin d'un espace entre les éléments. Utilisons donc la marge, le bas avec la valeur. Trois rounds. D'accord ? Je pense donc que c'est tout à propos de ce point d'arrêt. Et nous devons nous occuper du dernier point d'arrêt. Allons-y et créons une nouvelle requête multimédia CSS. La largeur maximale sera de 500 pixels. Sélectionnez le rectangle et modifions la position du décalage. Ça va faire -70 %. Ensuite, nous avons besoin d'un rectangle pour changer sa bonne position. Je vais le régler à -50 %. Ils sont donc jolis. Ensuite, je vais m' occuper de la navigation. Allons-y, sélectionnons Navigation vers la gauche et masquons-la. Et maintenant, nous devons aligner correctement le côté droit. Sélectionnons donc suffisamment, droite, et définissons sa largeur à 100 %. Les éléments sont maintenant placés au centre de la navigation. Très bien. Ensuite, nous devons nous occuper du portefeuille. Sélectionnez Travailler et attribuez-le au centre des éléments d'alignement. En outre, vous avez besoin ici d'une image de travail. Je vais régler sa largeur à 60 %. Ensuite, je vais sélectionner Informations professionnelles et les masquer. Vérifions les projets. Maintenant, je pense que nous avons de bien meilleurs résultats. Ensuite, je vais m' occuper des éléments de données. Je veux dire, le deuxième élément, l'élément relatif à la durée de l' année. Changeons la taille de la police, faisons-en 12 rampes. Très bien, donc je pense que tout est prêt et que le projet s'adapte à toutes les tailles d'écran. J'espère que ce projet vous a plu et que vous avez appris quelque chose de nouveau. Passons donc à autre chose et créons le projet suivant. 40. Projet 5 - Aperçu: Bonjour et bienvenue dans notre prochain projet. Dans cette section, nous allons créer un site Web sur les cafés. Le projet se composera de deux parties différentes et sera plein de designs et de fonctionnalités modernes . Allons-y et décrivons le site Web. Nous allons commencer par une navigation qui est fixée en haut de la page. Une fois que nous faisons défiler la page vers le bas, il changera bien son arrière-plan. Une fois que la navigation fonctionnera sur la bannière, qui contient un diaporama, nous utiliserons l'un des plug-ins appelé swipe, Comme vous pouvez le constater, le diaporama fonctionne automatiquement. Mais en plus de cela, vous pouvez utiliser ces manettes. Et vous pouvez également faire glisser les diapositives avec une souris. OK, nous avons ensuite une section À propos avec quelques informations. Cette section est suivie d'un menu. Ensuite, nous avons quelques données avec des compteurs animés et de jolis effets secondaires La section suivante portera sur les clients que nous avons ici les avis des clients bien placés par Koch Vient ensuite la section Contact, où vous pouvez contacter la maison ou réserver une table. Enfin, nous avons ici un exemple de pied de page. Le projet s'adapte à différentes tailles d'écran. Si j'inspecte la page, passe en mode réactif et vérifie le projet en quatre tailles d'écran différentes. Vous constaterez que le projet est réactif et qu'il est beau en moyenne, différentes tailles d'écran. Encore une fois, comme les autres projets, celui-ci est créé pour un très grand écran de taille 2. Je suis dedans, cela coïncide avec une antenne de 1920 pixels de largeur à pixels de hauteur Donc, si vous utilisez une taille d'écran relativement petite, vous devez passer en mode réactif pendant les cours vous devez passer en mode réactif pendant les et spécifier la largeur et la hauteur de cette manière. Sinon, le projet ne s'affichera pas correctement sur un écran plus petit tant que nous ne le rendrons pas réactif. Veuillez donc en tenir compte. Très bien, nous sommes donc prêts à commencer à construire le projet. Passons à autre chose. 41. Projet 5 - Créer et styliser la navigation: Très bien, il est donc temps de commencer à créer les projets. Je vais ouvrir le dossier dans VS Code. Ensuite, je vais créer nos fichiers de travail pour HTML, CSS et aussi pour JavaScript. Ensuite, ouvrons le fichier index.html et créons un document HTML de base. Tout d'abord, allons-y et changeons le titre. Ça va être un café. Ensuite, je vais lier les fichiers. Ouvrons la balise de script et spécifiez le nom du fichier et l'attribut source. Ensuite, je vais ouvrir le navigateur de projets. Ensuite, récupérons quelques liens. Je veux dire, un lien vers les icônes de Font Awesome, car nous allons utiliser ces icônes tout au long du projet. Ouvrons la balise de lien et collons le CDN dans l'attribut de référence H. Mettons l'éditeur et le navigateur côte à côte Comme ça. Ensuite, je vais visiter le site Web de Google Fonts, car nous allons utiliser certaines polices Google. Et le projet. Allons-y et recherchons la police Google appelée Great Wipes Nous allons sélectionner cette vignette. Ensuite, je vais rechercher une autre police Google , Poppins Sélectionnez deux styles différents. Copiez ensuite le lien et collez-le dans l'élément principal. Ensuite, je vais récupérer le link force wiper point JS car nous allons utiliser ce plug-in tout au long du projet Prenons donc ce lien, collez-le dans l'élément principal. Et en plus de cela, nous devons récupérer le lien JavaScript et le coller au-dessus de l'écran. Torture. Oui Très bien, nous sommes donc prêts à commencer Insérons des commentaires pour le conteneur. Ensuite, je vais ouvrir la balise DIV avec un conteneur de classe. Ensuite, nous avons besoin de commentaires pour la navigation. Ouvrons suffisamment de tables des matières avec un nom de classe navbar. Je vais insérer votre tag DIV, qui sera un logo À l'intérieur du logo, je vais ouvrir une étiquette avec la mention « Class is a phase solid as a mug Saltzer Et en plus de cela, nous avons besoin du texte du logo. Je suis en train de développer Span Tag avec le café d'essai , puis un autre Span House. C'est tout pour le logo. Ensuite, je vais créer la navigation. Au moins, insérons vos éléments de lien. Nous allons juste rentrer chez nous. Dupliquons le lien plusieurs fois, puis modifions le texte. Le second sera Menu. Ensuite, nous aurons un blog sur. Également. Nous avons ici Sharp. Ensuite, contactez. En plus de cela, je vais insérer un autre lien qui aura une icône Font Awesome avec la classe qui est une FA solide en phase, prise en train de faire du shopping. En fait, l'icône n' est pas visible. Nous devons donc régler ce problème. Il y a un problème. Très bien, maintenant tout fonctionne bien. Ensuite, je vais m' occuper du débarquement. Je suis dans l'en-tête du site Web. Insérons de nouveaux commentaires, puis ouvrons l'élément Section avec le nom de classe Landing. Nous avons besoin ici d'éléments profonds, qui seront Banner, dans lesquels je vais ouvrir l'élément de titre h3 avec le titre principal de la classe Le texte sera le bienvenu. Et nous avons également besoin d'un autre titre qui sera H1, avec le texte Amazing Taste and Beautiful Place Ensuite, nous avons besoin d' un paragraphe avec du texte fictif. Et je vais également insérer vos boutons avec le nom de classe Banner BTN. Et nous avons également besoin ici de la bannière BTN one. Insérez votre commande. À présent. Je vais spécifier le type qui va être un bouton. Et nous avons besoin ici du second avec le nom de classe Banner entre deux. Pour le texte. Ce sera le menu Afficher. Juste après, je vais m' occuper du diaporama Nous avons besoin ici d' une balise DIV avec la classe swipe, dans laquelle je vais insérer un swipe ou Et nous avons également besoin ici d'un essuie-souris de deuxième classe. À l'intérieur de cette enveloppe d'essuie-glace, je vais ouvrir l'élément Div, qui va être parcouru par diapositive . Ensuite, je vais placer votre image. Sélectionnez l'image dans le dossier des images. Ce sera image1. Ensuite, je vais dupliquer, faire glisser deux fois et changer le nom de l'image dont nous avons besoin en image trois. Ensuite, je vais vous parler de la pagination. Je veux dire les manettes. Après le Swiffer, nous avons besoin de Landing Contact. Instituons un tag DIV avec les détails du cours dans lequel je vais l'ouvrir, j'ai pris le cours sur un téléphone solide Ensuite, nous avons besoin d'un endroit profond dans lequel je vais insérer un élément Span avec un numéro de téléphone factice Ensuite, nous avons besoin d'une autre fenêtre dans laquelle nous allons insérer du texte fictif Très bien, dupliquons ça. Développement. Modifiez l'icône Font Awesome. Le second va être loin, point de localisation. Débarrassons-nous également de ces chiffres à partir d'ici. Et tu devrais avoir une fausse adresse. Le deuxième élément de travée. Je vais m' en prendre à eux. Fausse localisation du mannequin. Après cela, changeons la troisième icône qui va être une horloge Débarrassons-nous des chiffres et utilisons-la pour vous. Texte ouvert du lundi au vendredi. En ce qui concerne le deuxième élément de span et ça va être le texte. S'il vous plaît Joignez-vous à nous Nous sommes disponibles de 8 h 00 à 21 h 00. Très bien, en fait, c'est À propos du balisage HTML Je vais commencer à écrire le CSS. Instituons des commentaires pour les styles par défaut. Ensuite, je vais sélectionner chaque élément à l'aide d'un astérisque. Et comme d'habitude, je vais mettre la marge et le remplissage des deux à zéro. Ensuite, je vais définir la taille de la boîte borderbox. Ensuite, nous devons nous débarrasser décoration du texte par défaut, ainsi que du contour. Ensuite, je vais définir la famille de police pour chaque élément sur Poppins, Et en plus de cela, nous devons modifier la taille de police de l'élément HTML car nous allons utiliser la RAM comme unité de mesure. Réglons la taille de police à 62,5 %. Ces styles par défaut sont donc appliqués aux éléments. Ensuite, je vais insérer des commentaires pour le conteneur. Ensuite, sélectionnons Développement pour le conteneur de classe défini de la manière dont il sera de 100 % et la hauteur sera également de 100 %. Je vais également vous demander de commenter le Débarquement. Parce que pour l'instant, je vais masquer complètement la bannière en utilisant Display None. D'accord ? Ensuite, je vais insérer les commentaires pour la navigation. Allons-y et sélectionnons la barre de navigation. Réglez sa largeur à 200 %. Pour la hauteur, ce sera 10 g. Ensuite, nous avons besoin ici de la position qui va être fixée. Les deux positions seront alors nulles. Quant à la position de gauche, elle sera également nulle. Pour le moment, la barre de navigation n' est pas réalisable. Corrigeons ce problème en utilisant la valeur 100 de la propriété d' index. Nous avons donc ici la navigation. Ensuite, utilisons Flexbox. Nous devons justifier l'espace de contenu manière uniforme et également aligner les éléments au centre afin de les centrer verticalement. Ensuite, je vais créer une bordure en bas avec une valeur de 0,1, une couleur continue et la couleur sera RGBA, couleur blanche avec une opacité plus faible Nous avons donc ici la bordure et les éléments sont également bien alignés. Ensuite, je vais sélectionner Logo. Utilisons Display Flex. Ensuite, nous devons aligner les éléments au centre. Et changeons également le curseur, faisons-en un pointeur. Hein ? Ensuite, je vais m' occuper des éléments I. Je parle de l'icône. Réglons la taille de police sur étrangère. De plus, je vais utiliser ici le texte du webkit, stroke. Réglons-le sur 0,1 RAM, et la couleur sera blanche. Ensuite, je vais définir la couleur sur transparent. Et nous avons également besoin d'une marge sur le côté droit. Réglons-le sur un seul run. Nous avons donc ici l' icône avec un trait de texte. Ensuite, je vais sélectionner le texte du logo et utiliser Flexbox. Changeons de direction. Nous devons placer les éléments dans la colonne. Et nous devons également aligner le texte à partir du centre. Nous avons donc ici les deux éléments d'envergure. Ensuite, je vais sélectionner le premier élément de span à l'aide du sélecteur F child Définissons la taille de police à exécuter. Nous avons donc besoin que vous transformiez le texte en majuscules. Créons ensuite un espace entre les lettres, mais arrondissez à 32,1 Et changez également la couleur. Je vais utiliser la couleur blanche. Comme vous pouvez le constater, le premier élément span est plutôt joli. Dupliquons ce code. Changez le numéro du nième enfant. Il s'agira de changer la taille de la police. Je vais le vendre jusqu' à un certain point pour de la RAM. Et aussi, changeons la couleur, faisons-la E. En plus de cela, nous avons besoin d'une marge en haut. Ajoutons-le à -0,7 rampe. Le logo est donc très joli. Ensuite, je vais m' occuper de la navigation. Sélectionnons l'élément de lien. Réglez la taille de police à un point pour la mémoire vive. Ensuite, nous avons besoin que la transformation du texte soit en majuscules. Réglons également la couleur E et nous avons besoin d'une marge sur le côté droit. Il y aura trois rampes. D'accord ? Ensuite, je vais créer un espace entre les lettres. Réglons-le pour qu'il pointe vers la RAM. Ensuite, je vais sélectionner une amande avec survol. En survolant, je vais changer la couleur. Ça va être C4, neuf. P63. Utilisez également la transition pour un effet fluide. Ainsi, une fois que nous survolons l'élément de navigation , la couleur standard sera modifiée Je vais sélectionner le premier élément de navigation car je souhaite définir sa couleur par défaut la couleur que nous avons utilisée ici. Ensuite, je vais m'occuper du dernier point parmi les moins importants. Je veux dire, le panier. Voyons sa taille de police. Faites-en 1,8 RAM. L'icône est donc devenue plus grande. Ensuite, je vais utiliser des pseudo-éléments. Réglons le contenu sur un. Je vais donc modifier la largeur. Ce sera 2,5 RAM alors que la hauteur sera également de 2,5 RAM. Je vais changer la couleur de fond. Utilisons ici la couleur FFC 107. Il sera de couleur jaune. Ensuite, je vais définir la position sur positionnement absolu relatif des éléments parents. Nous avons donc ici après l'élément, Changeons la position. Les deux positions seront de -1,5 RAM par rapport à la position de gauche Ce ne sera qu'une seule mémoire vive. Également. Je vais arrondir les éléments. Et puis devoir s' occuper du contenu. Réglons l'affichage pour qu'il soit flexible. Utilisez ensuite le centre de contenu justify-content et alignez les éléments. Centre. Je vais aussi changer la couleur. Passons à 222. Enfin, je vais modifier la taille de la police. Ajoutons-le à un point pour l'exécuter. Très bien, c'est tout à propos de la navigation. Ensuite, nous devons nous occuper du débarquement 42. Projet 5 - Créer un diaporama avec Swiper.js: Très bien, une fois que nous avons terminé la navigation, il est temps de passer à autre chose et de nous occuper de l'atterrissage En fait, débarrassons-nous de ça, partons d'ici. Et sélectionnez Atterrissage. Je vais me fixer à 200 %. C'est assez élevé. Ça va être 95. Hauteur de la fenêtre d'affichage Ensuite, je vais sélectionner Banner. Réglons la position sur absolue. Ensuite, nous devons nous positionner par rapport à l'élément parent. Ensuite, je vais régler la position à 20 %. Cette position sera donc de 50 %. Et pour centrer les éléments horizontalement, nous avons besoin de transformer la translation X avec -50 %. La bannière est donc visible pour le moment. Corrigeons ce problème en utilisant la valeur 100 de la propriété d' index. Nous avons donc ici la bannière. Nous allons placer le texte au centre en utilisant le centre d'alignement du texte. Ensuite, je vais sélectionner le titre principal. deux membres de la famille Bombe disent qu'ils ont une belle vie. Cursif. Ensuite, je vais régler la taille de la police sur Fall. Le poids de la police Ran sera de 300, et je vais changer la couleur. Utilisons ici la couleur. OK, ensuite, sélectionnons Bannière, éléments de titre H1. Donc, la taille de la police sera de six RAM, puis le poids de la police, ça va être de 400. Je vais également transformer le texte en majuscules. Changez ensuite la couleur. Ça va être blanc. Nous avons donc ici le titre. Je veux dire, la deuxième rubrique. Suivant. Je vais créer des espaces dans la marge avec des valeurs en RAM et zéro. Et je vais aussi changer la hauteur de la ligne. Ça va être 1,5. Et créez un espace entre les lettres. Réglons-le sur point à exécuter. Très bien. Ensuite, je vais sélectionner le paragraphe de la bannière. Réglons la taille de la police à 1,5 RAM, alors le poids de la police sera de 300. De plus, je vais changer la couleur, elle va être blanche. Réglez ensuite avec 260 RAM. De plus, je vais utiliser la marge avec les valeurs zéro et auto plutôt que pour la RAM et la ROM également. Il aura donc le paragraphe et nous devons maintenant créer un espace entre les lettres. Réglons-le sur 0,1 rampe. Hein ? Ensuite, je vais m'occuper des boutons. Sélectionnons les deux boutons. Réglez la largeur sur 12 RAM , alors la hauteur sera de 5,5 rampes. Je vais donc fixer le cap, nous allons pointer deux points. Alors. La marge sera de 0,1 RAM. Et nous avons besoin que la taille de police soit égale à un point pour la RAM, afin que les boutons soient plus Ensuite, je vais sélectionner le premier bouton. Changez la couleur d'arrière-plan. Utilisez ici la couleur dorée que doit être la bordure. Aucune. Modifiez la couleur du texte. Faites-en deux contre deux. Le premier bouton est donc plutôt joli. Ensuite, je vais dupliquer ce code, changer le nom de la classe et personnaliser le deuxième bouton. Je vais rendre la couleur d'arrière-plan transparente pour que la bordure soit pleine de 0,1 RAM. Et vous voyez ici la couleur blanche. En ce qui concerne la couleur du texte, je vais également le rendre blanc. Très bien. Les deux boutons sont donc très jolis. Sélectionnez le premier bouton avec le pointeur de la souris, je vais changer la couleur de fond Faisons en sorte que ce soit transparent. Et changez également la couleur du texte. Faites-le doré. Ensuite, je vais définir la RAM de la bordure 2.1, solide, et la couleur sera c4963 Copions ce code. Changez le nom de la classe Donc, la couleur de fond sera dorée par rapport à la couleur des textes. Tu vas être deux contre deux. Je vais donc utiliser la propriété de transition pour faciliter les choses. Donc, si nous survolons les parties d'entre elles, nous obtiendrons cet effet agréable et cool Après cela, je vais m' occuper du diaporama. Allons, essuyons. On dit qu'il faut attendre 100 % pour que la hauteur soit de 85 %. Je vais également sélectionner. Je glisse donc, suivi de l'image. Réglons la largeur à 100 %. La hauteur va être de 100 %. Et nous devons également ajuster l'image à l' aide de la couverture du flux d'objets. Vous avez donc l'image avec une nouvelle largeur et une nouvelle hauteur. Il est maintenant temps d'écrire du JavaScript. Créons une variable. Il va être effacé. Je vais utiliser du code prêt par défaut pour le diaporama que nous devons créer ici Essuie-glace Object News vers votre essuie-glace de noms de classe. Ensuite, nous avons besoin ici et d'autres objets avec la propriété auto-play, qui inclura l'objet comme valeur Nous avons besoin ici d'un délai de 4 000 s. Ensuite, nous avons besoin d'une autre propriété désactivée lors de l'interaction. Ça va être faux. Ensuite, je vais créer ici une nouvelle propriété avec une valeur, Fate, je veux dire Effect Fade. Ensuite, nous avons besoin d'une boucle, ce qui va être vrai. Également. Je vais instituer la pagination. Ici, un élément d'objet va être balayé ou je suis dans le nom de la classe, le balayage ou Ensuite, nous avons besoin d'une propriété appelée cliquable, qui sera juste vraie Alors maintenant, comme vous pouvez le voir, le diaporama fonctionne correctement et la pagination fonctionne également bien Très bien, ensuite je vais personnaliser les cercles ci-dessous. Je veux dire les contrôleurs de pagination. Nous devons sélectionner Span Point, Swipe ou Pagination Bullet Réglons la largeur à deux RAM par rapport à la hauteur prévue. Au bélier aussi. Nous avons besoin d'opacité pour ne faire qu'un. Ensuite, je vais placer la marge sur le côté droit, 1,5 RAM. Il est important ici d'appliquer ce code. Ensuite, la couleur de fond sera AA. Nous avons donc besoin ici que la position soit relative. Maintenant, le contrôle semble meilleur. Ensuite, je vais copier le nom de la classe et le coller après les pseudo-éléments. Ajoutons du contenu à vide. Ensuite, nous avons besoin de 2,5 RAM. La hauteur sera également de 2,5 mètres. Ensuite, nous avons besoin de la partie du taux d'habitude s'il est présent, car nous avons besoin de cercles. Réglons la position sur. Absolu. La position va être de 50 %. La position nette sera également de 50 %. Ensuite, afin d' envoyer parfaitement à l'élément lors de la transformation, traduisez avec des valeurs de -50 % et encore une fois, -50 % par rapport la couleur d'arrière-plan pour être transparente Et nous avons besoin ici de points de bordure vers la RAM solide et la couleur doit être AA. Maintenant, les balles, je veux dire, les manettes sont plutôt belles Ensuite, je vais copier le nom de la classe. Collons-le ici. En fait, nous devons le coller deux fois, puis supprimer l'élément span du sélecteur et le coller de manière active Donc, une fois que la puce est active, nous devons changer la couleur de fond. Ajoutons-le au blanc. Je vais donc dupliquer ce code et le coller après les pseudo-éléments. Ainsi, une fois que la puce est active, nous devons modifier la bordure des pseudo-éléments suivants. Je veux dire, la couleur de la bordure. Ça va être blanc aussi. Maintenant, on peut voir que tout fonctionne correctement et avec ce diaporama d' essuie-glace, Ensuite, je vais sélectionner Landing Contact, définir la position sur absolue. Ensuite, pour le positionner, ce sera H 5 %. La position gauche va être nulle. De plus, je vais définir la largeur à 100 %. Et la hauteur va être de 15. Hauteur de la fenêtre d'affichage. Changez la couleur d'arrière-plan. Je vais utiliser ici la couleur noire. Nous avons donc ici la partie inférieure de l'atterrissage, je veux dire le contact d'atterrissage. Utilisons Flexbox. Nous devons ici justifier le contenu avec des valeurs collées uniformément. Nous avons besoin d'un espace uniforme entre les éléments flexibles et nous devons également aligner verticalement les éléments au centre. Ensuite, changeons la couleur, rendons-la blanche. Nous avons donc ici les détails. En fait, il nous manque ici l'icône Font Awesome. Vérifions le code. Nous avons besoin d'un emplacement ici. Alors maintenant, l'icône est visible. Ensuite, je vais sélectionner les détails. Utilisez à nouveau des livres de flux. À présent, l'icône et les éléments de texte sont placés côte à côte Ensuite, je vais sélectionner les éléments I, définir la taille de police sur, à exécuter en fonction de la couleur. Colton. Je vais également créer de l'espace sur le côté droit. Appuyons sur la marge droite pour courir. Comme vous pouvez le voir, les icônes sont belles. Ensuite, je vais sélectionner le développement dans les détails. Réglons l'affichage pour qu'il soit flexible. Ensuite, nous devons changer de direction. Faisons-en une colonne. Nous devons maintenant personnaliser les éléments de texte. Allons-y et sélectionnons le premier élément du chemin à l'aide du sélecteur F child Je vais modifier la taille de la police. Ce sera 1,61. Ensuite, nous devons changer la couleur. Faisons en sorte qu'il soit blanc. Et je vais également utiliser la marge inférieure. Mettons-le à 0,5 pour N. Ainsi, les premiers éléments de la plage sont beaux. Allons-y et dupliquons ce code. Changer le sélecteur de nième enfant va être deux. Et nous devons modifier la taille de la police. Réglons-le sur 1,4 et changeons également la couleur, faisons-la BBB et supprimons la marge, en bas Réglez la largeur sur 2 m. Très bien, alors c'est ça. À propos du débarquement. Tout a l'air parfait. Passons à autre chose. 43. Projet 5 - Créer et personnaliser à propos de Section: Très bien, passons à autre chose et commençons à créer la section suivante de notre projet, qui sera une section À propos Je vais interviewer les nouveaux commentaires pour la section À propos. Ensuite, ouvrons la balise de section avec le nom de la classe about. Je vais indiquer à votre balise DIV dans laquelle nous aurons l'icône Font Awesome avec les noms de classe fa, solid, a mobile Ensuite, nous avons besoin ici d' éléments de titre H1 avec le texte facile à commander Ensuite, l'élément suivant sera un paragraphe avec du texte fictif Allons-y, dupliquons Development deux fois, puis changeons le nom de la classe. Votre camionnette. L'Atrial Hannigan, ce qui va être la livraison la plus rapide En ce qui concerne ce troisième article, nous avons besoin ici d'une tasse chaude. Passons à l'élément H1, je vais vous insérer du café de qualité D'accord, donc c'est tout à propos du balisage HTML. Maintenant, il est temps de ne pas en finir, de commencer à écrire du CSS. Je vais insérer de nouveaux commentaires pour la section À propos. Ensuite, je vais sélectionner l' élément Section avec une classe à propos de. Réglons la largeur à 100 % la hauteur sera de 60 % de la hauteur de la fenêtre d'affichage Changeons la couleur de fond. Je vais l'utiliser ici. Couleur dorée. Ensuite, nous devons utiliser Flexbox. Elons les éléments au centre et utilisons également le centre de contenu justify-. On peut donc voir que nous avons ici des éléments bien alignés. Ensuite, je vais sélectionner développement dans l'élément de la section À propos, qui sera transmis à la RAM. Ensuite, je vais régler que la hauteur sera de 35 mètres. Je vais également créer l'espace en utilisant une marge avec les valeurs zéro ou trois rampes, puis aligner le texte au centre. Ensuite, je vais utiliser à nouveau Flexbox. Changez de direction, ce sera une colonne. Nous devons également aligner les éléments, centrer et justifier l'espace du contenu de manière uniforme. Nous avons donc maintenant de bien meilleurs résultats et nous avons deux styles les éléments. Commençons par le micro rapide et réglons sa largeur à neuf R&, alors que la hauteur sera de dix RAM Modifiez la taille de la police. Il va y avoir plein de RAM. Je vais également utiliser votre coup d' attaque du Web Kit avec des valeurs pointant vers la RAM, et la couleur sera 282727 En plus de cela, nous devons définir la couleur, la rendre transparente. Très bien, donc les icônes de Font Awesome sont belles. Ensuite, utilisons la RAM Border 0.1, solide. La couleur de huit à sept à sept. Ensuite, je vais envoyer les icônes Font Awesome à l'aide de Flexbox, Justify-Content Center et d' Aligner le centre des éléments OK, alors c'est ça. Eh bien, les icônes Font Awesome. Ensuite, je vais sélectionner l'élément de titre H1. Réglons la taille de police 2 sur Ramper. Ensuite, je vais utiliser le poids par défaut à 400. Transforme le texte en majuscules. Changez ensuite la couleur. Je vais t'utiliser la même couleur. OK, donc vos titres sont jolis et je vais devoir personnaliser le paragraphe Définissons la taille de la police. Ça va faire 1,5 RAM. Ensuite, nous avons besoin ici du poids de la police. Ça va être à 300 heures. Changez la couleur, passez de H7 à 7. C'est donc ça. La section À propos est jolie et nous pouvons maintenant passer à autre chose. 44. Projet 5 - Section de menu Créer: Très bien, avec la section À propos, nous avons terminé et nous devons maintenant passer à autre chose Et donc deux Créez la section suivante, qui sera le menu. Je vais insérer vos nouveaux commentaires pour la nouvelle section. Et puis comme d'habitude, je vais ouvrir la balise de section avec un menu de classe. Ensuite, dans cet élément de section, je vais insérer une balise DIV, qui sera Menu left Le côté gauche de cette section. Nous avons besoin ici de l' élément de titre h3 avec le titre principal de la classe Instituons ces couvertures. Ensuite, nous avons besoin d'éléments de titre H1. Je vais juste être notre menu. Suivant. Je vais insérer ici le paragraphe avec un texte fictif Et nous avons également besoin ici d'un bouton. Il aura la classe Menu, BTN. Nous avons également besoin de l'attribut type. Nous allons juste être Bateson. Pour le texte. Je vais à l'Institut ici. Afficher le menu complet. Juste après le développement. Je vais en créer un autre, qui sera Menu, non ? Nous avons besoin d'un menu ici, non ? Des images. Ouvrons la balise DIV, qui sera le wrapper Menu Image Cet élément comprendra quatre images différentes. Sélectionnons le premier dans le dossier des images. Ce sera l'image 4. Ensuite, je vais dupliquer ce code trois fois et changer le nom des images. Nous avons besoin de l'image 5, de l'image 6, puis de l'image 7. OK, donc en fait, c'est tout à propos du balisage HTML. Maintenant, il faut passer à autre chose et commencer à écrire le CSS. Instituons de nouveaux commentaires pour le menu. Ensuite, je vais sélectionner les éléments de la section et définir sa largeur et sa hauteur. La largeur sera de cent pour cent. Pour ce qui est de la hauteur, je vais la fixer à 70 pour la hauteur de la fenêtre d'affichage Ensuite, je vais sélectionner Menu Image wrapper afin de réduire la taille de l' image Réglons avec 225 RAM et la hauteur sera de 25 RAM. Ensuite, je vais sélectionner les images et définir la largeur à 100 % et la hauteur à 100 %. De plus, nous avons besoin que la vitesse de l'objet soit couverte. Maintenant, il peut voir que nous avons des images relativement plus petites. Définissons l'arrière-plan du menu. Je vais utiliser la fonction de dégradé linéaire avec la couleur RGBA Je suis de couleur noire avec une opacité de 0,9. Et encore une fois, nous avons besoin de RGBA, couleur noire 0,8, je veux dire l'opacité Ensuite, je vais définir l' image comme arrière-plan. Nous devons sélectionner votre image 8. Et nous avons également besoin d'une position centrale qui ne se répète pas. Ensuite, je vais définir la taille de l' arrière-plan à couvrir. Nous avons donc ici l'image en arrière-plan de cette section. Ensuite, je vais utiliser Flexbox. Nous devons aligner les éléments au centre. Nous avons donc ici les images des objets placés au centre. Ensuite, allons-y et sélectionnons le côté gauche. Réglez la largeur à 50 %. Je vais également sélectionner Menu à droite et régler sa largeur à 50 % également. Très bien, après cela, je vais sélectionner Menu, non ? Images, réglez sa largeur sur 60 RAM. Ensuite, je vais utiliser Flexbox. Nous devons utiliser un habillage flexible avec un rap de valeurs afin d'encapsuler les images et de les aligner. Comme ça. Créons un espace entre les images en utilisant la marge. Réglons-le sur, sur RAM. De plus, nous avons besoin d'un pointeur de curseur pour l'image elle-même. Après cela, je vais t' emmener du côté gauche. Nous avons besoin d'un centre d'alignement du texte. Et je vais aussi placer la marge sur le côté droit, 23 RAM. Nous avons donc besoin d'une marge gauche pour le menu, non ? La valeur 3 REM également. D'accord ? En fait, l' alignement du texte doit être à droite et non au centre ici Ensuite, je vais sélectionner Menu de gauche, suivi du titre principal. Réglons la taille de police à six RAM. Le titre est donc plutôt joli. Ensuite, je vais sélectionner Menu de gauche suivi de l'élément de titre H1 Réglons la taille de police à six RAM. Également en poids de police, il doit être de 300. Ensuite, je vais transformer le texte en majuscules. Ensuite, je vais changer la couleur du titre. Ça va être blanc. De plus, je vais régler la marge supérieure sur moins la totalité de la RAM. Nous avons donc ici l'élément de titre H1. Ensuite, je vais sélectionner le paragraphe et le personnaliser. Tout d'abord, changeons la taille de la police. Ce sera un point pour Ran. Ensuite, je vais changer la couleur du paragraphe. Mettons-le à 777. Il s'agit d'une couleur gris clair. Ensuite, nous allons attendre d'avoir 50 RAM. Et je vais aussi placer la marge par rapport à la RAM et à zéro, puis à l'étranger. Et je vais ramer. D'accord ? Le paragraphe semble donc bon. La seule chose dont nous avons besoin ici est hauteur de ligne, la valeur 1,2 D'accord ? Après cela, je vais vous parler de la prochaine. Nous allons juste être le bouton Menu. Réglons la largeur à 15 mètres. Et la hauteur sera de 5,5 RAM. Nous avons besoin d'une couleur de fond qui sera transparente. Ensuite, je vais définir la RAM de la bordure 2.1. Solide La couleur, elle va être dorée. Nous avons donc besoin que la couleur de la taxe soit également appelée A. Modifiez ensuite la taille de la police. Ce sera 1,3 RAM. Je vais transformer le texte en majuscules. Positionnez ensuite le curseur sur le pointeur. OK, donc le bouton et le côté gauche de cette section sont plutôt jolis. Ensuite, je vais utiliser un effet de survol. Changeons la couleur de fond. Je vais le régler sur Golden. Et je vais aussi changer la couleur des textes. Réglez-le sur 222, puis utilisons la transition pour obtenir un effet fluide. Nous avons donc ici un bel effet de surenchère. Maintenant, nous devons nous occuper du côté droit. Je vais également créer un effet de survol pour les images. Sélectionnons donc Menu Image wrapper avec le pointeur de la souris , puis suivons le sélecteur d'image Nous avons besoin d'une échelle de transformation avec une Nous avons également besoin d'une transition. Une fois que nous passons la souris et que nous les envoyons, les images devraient s'élargir Utilisons le overflow hidden pour masquer les parties des images Maintenant, nous avons ici un très bel effet et en fait, avec la section Menu, nous avons terminé. Passons donc à autre chose. 45. Projet 5 - Créer et styliser des données avec des compteurs animés: Très bien, donc une fois que nous avons terminé la section Menu, il est maintenant temps de passer à autre chose et de créer la section suivante Nous allons simplement être les données. Insérons de nouveaux commentaires pour la nouvelle section. Dans cette section, nous aurons des compteurs animés. Ouvrons la balise de section avec les données de classe. Ensuite, nous devons insérer la balise U DIV, qui inclura un wrapper d'icônes Rouvrons-le avec les noms des classes. Si c'est un solide, une tasse chaude. Ensuite, nous avons besoin ici de l'élément Style avec le nom de la classe. Je peux BG. Ensuite, nous aurons un autre élément span avec la classe numb, dans lequel nous avons besoin d'un attribut appelé data Eh bien, nous allons vous insérer quelques chiffres. Disons 350. En ce qui concerne la valeur par défaut, je vais passer ici zéro. Ensuite, nous aurons une autre section avec des informations sur la classe dans laquelle je vais plutôt utiliser des branches de café. Dupliquons le développement trois fois , puis changeons les chiffres. Et nous devons également modifier le contenu des informations. Insérez votre nombre de récompenses. Ensuite, l'élément suivant, nous aurons également 25, 40. Ce panel va être composé de clients satisfaits. Pour le dernier élément que je vais insérer ici, disons 750 également. Ce montant final va être bloqué. Très bien, en fait, c'est tout à propos du balisage HTML. Allons-y et commençons à personnaliser cette section. Je vais créer de nouveaux commentaires pour les données. Ensuite, je vais sélectionner l' élément Section et définir avec deux 100%. La hauteur sera de 50 pour la fenêtre d'affichage. Ensuite, nous avons besoin que l'arrière-plan soit un gradient linéaire. Je vais utiliser ici la valeur RGBA. Je suis de couleur noire avec un point d'opacité pour. Et nous avons également besoin ici d'une autre valeur RGBA. Encore une fois, couleur noire avec une opacité de 0,3. Ensuite, nous devons sélectionner l'image comme arrière-plan. Ce sera l'image 7. Ensuite, nous devons spécifier que la position sera au centre. Et nous n'avons pas non plus besoin de répéter. Et nous avons défini la taille de l' arrière-plan comme la couverture. D'accord, nous avons donc ici l'image d'arrière-plan. Ensuite, utilisons Flexbox. Je vais utiliser le centre de contenu justify-et aligner le centre des éléments au centre du Nous avons ici les articles flexibles. Ensuite, je vais sélectionner des éléments. S'il s' agit d'une section de données avec 25 RAM, la hauteur sera de 30. A couru. Ensuite, je vais utiliser à nouveau Flexbox. Changeons de direction. Ce sera une colonne. Et nous devons également aligner les éléments et le centre. Ensuite, je vais utiliser pour justifier que le contenu sera constitué de valeurs Pacioli Nous devons créer un espace uniforme entre les éléments flexibles. Ensuite, je vais sélectionner I can wrapper et définir sa largeur en tant que Tran Ensuite, la hauteur sera également de huit RAM. Ensuite, il faut que le pointeur soit plus grossier. Et maintenant, nous devons sélectionner l'arrière-plan de l'icône. Je vais utiliser le bloc d'affichage. Ensuite, définissons la largeur à 100 %. Nous avons également besoin d'un taux élevé pour atteindre 100 %. Ensuite, je vais utiliser la bordure. Il sera plein de 0,1 RAM et la couleur sera dorée. Nous avons donc ici I can Background. Suivant. Nous devons sélectionner des éléments. s'agit de la position par rapport à position absolue relative de l'élément parent, qui est le wrapper d'icônes Ensuite, je vais fixer la première position à 50 %. Ensuite, nous avons besoin la position de gauche soit également de 50 %. Et pour centrer parfaitement l'élément, nous avons besoin de transform translate. Les valeurs seront-elles -50 % et encore -50 %. Maintenant, je les conserve parfaitement centrés à l'intérieur des boîtes. Ensuite, je vais augmenter la taille de la police. Il va être rediffusé. Également. Nous avons besoin ici encore d' un trait de texte Webkit avec une valeur pointant vers la RAM et la couleur dorée Et nous devons également définir la couleur transparente. Nous avons donc maintenant de belles icônes du café. Allons-y et sélectionnons l'icône wrapper avec le pointeur de la souris, puis l'arrière-plan de l'icône En survolant, je vais changer la couleur d'arrière-plan. Il va être doré. Et nous devons également faire pivoter les éléments dans la direction Z. Et la valeur va être de 135 degrés. Également. Nous avons besoin d'une transition pour un effet fluide. Et ce sera pour l'arrière-plan. Ainsi, une fois que nous survolons les boîtes, elles pivoteront bien Nous devons afficher les icônes. Utilisons l'indice avec la valeur 100. En fait, les icônes ne sont toujours pas visibles. En fait, le problème est que nous avons ici la même couleur pour le trait de texte. Ainsi, une fois que nous avons survolé l'enveloppe d'icônes, nous devons également changer la couleur de l'élément I. Alors prenons ce code et changeons la couleur qui va être celle d'un C7 C7. Nous avons également besoin d' une transition pour l'icône. Alors maintenant, le problème devrait être résolu. Ok, c'est ça. Tout fonctionne bien et nous avons ici une impression, un effet sympa et cool. OK, ensuite, nous devons sélectionner Numb et sa taille de police à trois rampes. Ensuite, je vais changer la couleur pour qu'elle soit dorée. C'est donc ici que nous avons le plus zéros par défaut pour le moment Ensuite, je vais sélectionner les informations. Ce sera le cas, la taille de la police sera de 1,8 RAM alors que la couleur sera de 999. Nous avons donc ici les éléments span, et nous devons maintenant écrire du JavaScript. Créons le menu Créer une variable. Je vais le sélectionner en utilisant la méthode de sélection de requêtes. Précisons ici le nom de la classe. Ensuite, nous avons besoin de nombres variables. Je dois sélectionner les nombres en utilisant méthode du sélecteur de requête Ensuite, nous avons besoin de la variable nommée start, qui sera fausse par défaut. Ce sera la valeur booléenne. Et maintenant, nous devons créer un nombre de départs de fonctions. Insérons ici des éléments de paramètres. Nous avons maintenant deux variables Create max, qui seront la valeur de l'ensemble de données. Je veux dire la valeur des données, eh bien, des attributs, que nous avons utilisés ici dans l'élément HTML Nous devons récupérer ces nombres et les stocker dans la variable max. Ensuite, nous avons besoin de count, qui sera la fonction d'intervalle définie. Nous devons donc définir le contenu du texte. Et en fait, nous devons l'augmenter d' une unité en utilisant l'opérateur d' incrémentation. Ensuite, nous avons besoin de l' instruction IF dans laquelle nous devons définir ce qui suit. Le contenu du texte. Si le TextContent est égal à max, nous devons effacer l'intégrale Et nous devons passer ici la variable de comptage. Quant à l'intervalle, ce sera 2000 divisé par le nonce Ensuite, nous devons ajouter un écouteur d' événements à l'objet de la fenêtre avec l'événement de défilement, et nous devons transmettre ici la fonction de rappel Nous devons commencer à compter une fois que nous avons fait défiler la page vers le bas. Nous avons donc besoin ici de l'instruction IF dans laquelle nous devons définir la fenêtre suivante. défilement Y est supérieur ou égal au décalage du point du menu en haut. Une fois que nous atteignons la section Menu, nous devons commencer à compter. Ensuite, nous avons besoin des instructions if dans lesquelles nous devons passer et non démarrer, qui est la valeur booléenne Ensuite, nous devons passer en revue les chiffres. Maintenant, nous devons appeler cette fonction .com et nous devons passer le paramètre none Ensuite, nous devons définir la valeur booléenne, en commençant par vrai. OK, donc une fois que nous aurons fait défiler la page vers le bas, les compteurs démarreront. Très bien, nous devons maintenant nous occuper de la barre de navigation. Nous devons le rendre collant une fois que nous avons fait défiler la page vers le bas. Nous devons donc utiliser ces événements de défilement ici. Nous allons bientôt créer une nouvelle variable . Je vais le sélectionner en utilisant la méthode QuerySelector. Précisons ici le nom de la classe maintenant quatre. Ensuite, nous avons besoin maintenant de la liste des classes de points. Et nous devons ajouter à la classe de barre de navigation Tiki en utilisant la méthode toggle De plus, nous devons passer le défilement par points de la fenêtre annuelle. Y est supérieur à zéro. Ensuite, nous devons sélectionner la classe Tiki, suivie de la barre de navigation Et nous devons changer la hauteur. Ça va faire huit RAM. Et nous devons également changer la couleur de fond. Je vais le mettre en noir. Et nous avons également besoin ici de faire passer tous les points en 5 s. Donc, une fois que nous faisons défiler la page vers le bas, nous obtiendrons cet effet sympa et cool. En fait, nous devons régler un petit problème. La barre de navigation s'est retrouvée derrière le Landing, nous avons donc besoin d'un index avec une valeur plus élevée OK, alors maintenant le problème est résolu. Et avec cette section, nous avons terminé 46. Projet 5 - Section de créer des clients: Ainsi, dans la conférence précédente, nous avons créé une section de données, je veux dire les compteurs de données animés Et maintenant, nous devons passer à autre chose. Et donc pour travailler sur la section suivante, qui sera une section de témoignages Nous allons insérer vos nouveaux commentaires. Clients. Je vais appeler cette section Clients. Ensuite, je vais ouvrir le type de section avec la classe Clients dans laquelle nous avons besoin d'un développement, qui sera la bannière des clients. Dans le cadre du développement, je vais ouvrir la balise d'en-tête h3 avec le titre principal de la classe et le témoignage textuel Ensuite, nous avons besoin des éléments de titre H1. Et ce seront les clients. Disons, ensuite, nous devons ajouter un paragraphe avec un texte factice. Après cela, je vais ouvrir la balise DIV, qui sera celle des clients Ensuite, nous avons besoin d'une autre profondeur, qui sera le client lui-même. Instituons un paragraphe avec un texte fictif. Ensuite, nous avons besoin d'éléments profonds, qui vont envelopper l'image Nous allons sélectionner le client Image 1. Ensuite, nous avons besoin de l'élément span pour le nom du client. OK, je vais dupliquer le client plusieurs fois. Ensuite, allons-y et changeons les images. Et nous devons également changer le texte, un texte factice. Changez le nom. Ce sera Nick Brown. Prochaine nouvelle baisse : 3. Et le nom va être David Jones. Ensuite, je vais modifier le texte, ainsi que le nom de l'image, le nom du client. Enfin, nous avons besoin du client 5. Le nom va être Mary Brown. Très bien, alors c'est ça. Le balisage HTML est prêt. Allons-y et commençons à écrire du CSS. Insérons de nouveaux commentaires pour les clients. Ensuite, je vais sélectionner l'élément Section. Réglons la largeur à 100 %. Ensuite, la hauteur sera de 70 pour la fenêtre d'affichage. Ensuite, nous avons besoin d'un arrière-plan avec une fonction de gradient linéaire dans laquelle je vais insérer une valeur RGBA Ce sera une couleur noire avec une opacité de 0,9. Ensuite, nous avons à nouveau besoin d'une valeur RGBA avec une couleur noire avec une opacité Ensuite, je vais sélectionner l'image dans le dossier des images. Ce sera l'image 8. Définissons la position. Ça va être au centre. Et nous avons également besoin de ne pas répéter Ensuite, je vais définir la propriété de taille d'arrière-plan sur cover. D'accord, nous avons donc ici l'image d'arrière-plan. Ensuite, nous devons nous occuper des images car elles sont deux plus grandes. Réglons la largeur à cinq de. La hauteur sera également de cinq mètres. Ensuite, nous avons besoin que l'objet phi soit couvert. Faites-les également contourner et utilisez le rayon de 50 % de la bordure Nous vous avons maintenant des images plus petites. Ensuite, je vais sélectionner Customers Banner, définir sa position sur absolue. Ensuite, nous l'avons positionné par rapport à l'élément parent, qui est une section. Configurons la position de dix pour cent et la position de gauche doit être de 50 pour cent Centrez simplement les éléments horizontalement à l' aide de Transform Translate X avec la valeur -50 % Nous avons également besoin ici du centre d' alignement du texte. Nous avons donc ici la bannière, qui n'est pas tout à fait visible pour le moment. Allons-y et sélectionnons Titre principal. Je vais régler la taille de la police à six RAM par rapport à ce dont nous avons besoin. Bannière client, suivie de l'élément de titre H1, disons la taille de police de six Rome également Et nous avons également besoin que le poids de la police soit de 300. Nous devons transformer le texte en majuscules et également changer la couleur Ça va être blanc. Maintenant, le titre est visible et il est plutôt joli. Ensuite, définissons la marge supérieure à deux moins quatre tours. OK, donc les deux titres sont plutôt jolis. Je vais m'asseoir en position par rapport au titre principal. Ensuite, nous avons besoin de l'indice avec une valeur plus élevée. D'accord, nous avons maintenant de meilleurs résultats. Ensuite, je vais m'occuper du paragraphe à l'intérieur de la bannière des clients. Ajoutons-en à 1,6 RAM. Et la couleur va être 777. De plus, nous avons besoin que la marge supérieure soit complète. Ensuite, nous devons régler la hauteur de la ligne à un point Ici, nous avons le paragraphe. Ensuite, je vais m'occuper de la position du client jusqu'à ce qu'elle soit absolue. Ensuite, nous avons besoin que la position inférieure soit nulle. Et nous avons également besoin d'une flexibilité d'affichage avec des éléments alignés. Flex et nous devons placer les articles au bas de la section. Ensuite, je vais sélectionner le client. Mettons-en avec deux 25 %. Maintenant, nous avons besoin que la hauteur soit de 25 RAM. Ensuite, je vais définir la couleur d'arrière-plan sur Doré. Je vais créer de l' espace en utilisant du rembourrage. Réglons-le sur, pour qu'il fonctionne. Changez ensuite la couleur, faites-la blanche. Il aura donc les clients. En fait, je pense que quelque chose ne va pas ici. Vérifions le fichier HTML. Nous avons donc les premiers clients. Nous devons le déplacer et le placer ici en tant que premier client de la liste. Alors maintenant, tout semble aller bien. Ensuite, allons-y et sélectionnons les clients. Avec F Child Selector, nous avons besoin d'un deuxième client Disons bonjour à une RAM Ensuite, je vais dupliquer ce code, changer le numéro. Ça va être quatre. Réglons la hauteur à 21 RAM. Maintenant, nous avons différentes hauteurs pour les clients. Ensuite, je vais sélectionner des éléments pairs. Réglons l'opacité à 2,9. Nous avons donc maintenant un meilleur résultat. Je vais récupérer ce code et le coller ici. Et je vais ajouter ici une marge sur le côté droit. Réglons-le sur, pour qu'il s'exécute afin de créer un espace entre l'image et le nom. Ensuite, je vais sélectionner le paragraphe client. Réglons la taille de police à 1,6 RAM par rapport à la marge. En bas, il va y avoir une course. Les paragraphes. Aie l'air bien. Ensuite, je vais sélectionner la position du client et la position assise sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui est un client. Mettons une certaine position dans la RAM. Nous avons également besoin de Flexbox. Nous devons aligner verticalement les éléments au centre. Maintenant, les images et les noms sont bien alignés. Maintenant, je dois m' occuper du nom. Sélectionnez les éléments de la plage, la taille de police à un point pour la RAM. Et nous avons également besoin que la transformation du texte soit en majuscules. C'est donc ça. Cette section est plutôt jolie. Passons à la conférence suivante. 47. Projet 5 - Créer et styliser la section et le pied de page du site Web: Très bien, une fois que nous en avons terminé avec la section client, nous devons maintenant passer à autre chose et créer la dernière partie du projet Nous devons créer la section Contact suivie du pied de page Insérons donc de nouveaux commentaires pour le concept. Ensuite, je vais insérer l' élément Section avec le nom de classe Contact. Je vais insérer ici la balise DIV, qui sera Contact left, le côté gauche de cette section Alors nous avons besoin de Contact, non ? Dans lequel je vais insérer des éléments formés. Les éléments formés auront un titre H1, une étiquette, un livre et une table. Ensuite, nous aurons un groupe de saisie dans lequel je vais insérer un élément d'entrée avec le texte type et avec un attribut d' espace réservé, qui sera le prénom. À la minute suivante. Elément d'entrée similaire avec LastName. Dupliquons le groupe d'entrées. Modifiez le type de l'élément d'entrée. Ce sera un e-mail. Et nous avons besoin de cette adresse e-mail. Ensuite, nous avons besoin d'un téléphone. Ensuite, je vais dupliquer à nouveau le groupe d'entrées. Supprimons le premier élément de saisie et plaçons votre zone de texte avec un attribut d' espace réservé Nous allons juste transmettre un message. Également. Je vais me débarrasser du deuxième élément d'entrée et placer le bouton Ici avec un bouton de saisie. Ensuite, nous avons besoin de l'attribut de classe, Contact BGN. Et je vais fixer ton rendez-vous. Très bien, c'est tout à propos du balisage HTML. Je vais commencer directement au CSS. Insérons des commentaires pour la section contact. Je vais sélectionner les éléments de la section. Largeur définie. Ce sera 100 %, la hauteur, la hauteur de la fenêtre d' affichage de 60 Ensuite, nous devons revenir à la couleur. Ça va être noir. Je vais donc utiliser Flexbox. Nous devons aligner les éléments à l'aide de Flexbox. Ensuite, je vais sélectionner le côté gauche et régler sa largeur à 50 %. Et la hauteur sera de 100 %. Et je vais changer d'arrière-plan. Utilisons la fonction de gradient linéaire. Avec valeur RGBA. Ce sera de couleur noire avec une opacité de 0,5. Ensuite, nous avons besoin de la couleur similaire. L'opacité va être de 0,4. Nous devons également sélectionner l'image du dossier images comme arrière-plan. L'image va être la première. Encore une fois, nous avons besoin de Center. Je suis dans cette position et maintenant je répète. Et nous avons également besoin ici de la taille de l' arrière-plan à couvrir. Nous avons ici l'image sur le côté gauche de la section Contact en arrière-plan. Ensuite, je vais sélectionner Contact, n'est-ce pas ? Vendons-le à 50 %. La hauteur va être de 100 %. Ensuite, je vais utiliser à nouveau Flexbox. Vous justifiez le centre de contenu. Et nous devons également aligner les éléments à centrer. Il peut donc voir que le contenu est placé au centre du côté droit de la section Contact. Ensuite, je vais sélectionner Contact, n'est-ce pas ? Elément de titre H1. Augmentons la taille de la police. Il va y avoir plein de RAM. Ensuite, je vais régler l'épaisseur de la police à 300 et changer la couleur. Ça va être blanc. Ensuite, je vais créer de l'espace en utilisant marge si la valeur est de 0,03 RAM et en RAM. Il aura donc le titre. Après cela, je vais sélectionner le groupe d'entrée. Utilisons à nouveau Flexbox Ensuite, je vais sélectionner le groupe de saisie suivi de l'élément d'entrée Et nous avons également besoin ici d'une zone de texte. Nous avons besoin de styles similaires pour les deux éléments. Réglez la largeur sur 30 rampes, puis la hauteur sera de cinq points principaux Je vais régler le rembourrage sur une RAM, une RAM plutôt que pour exécuter et zéro Je vais donc créer de l'espace en utilisant la marge pour exécuter. La couleur de fond sera transparente. Je vais me débarrasser de la bordure puis utiliser la bordure en bas. Seront les valeurs. Une RAM, solide, et la couleur sera RGBA de cinq à 55 à 55 Et l'opacité 0,1, 0,3. En fait, nous avons un problème ici. Oui, nous avons besoin de 0,1 RAM. Maintenant, la bordure est jolie. Ensuite, je vais changer la couleur pour qu'elle soit blanche. Après cela, je vais sélectionner la zone de texte séparément. Nous devons désactiver la fonction de redimensionnement. Je vais donc régler la hauteur à cinq RAM. Nous devons nous débarrasser de la barre de défilement. Pour cela, je vais utiliser la zone de texte, puis Web Kit, la barre de défilement. Et nous n'avons besoin ici d'en afficher aucun. On considère donc que la barre de défilement est masquée. OK, ensuite je vais m' occuper de l' attribut d'espace réservé pour les entrées et pour la zone de texte. Réglons la couleur sur le blanc. Très bien, maintenant les entrées sont plutôt belles. Allons-y et prenons soin du modèle. Sélectionnez-le et, tout d'abord, définissez sa largeur. Ça va l'être. Alors pour courir. Ensuite, nous avons besoin de la hauteur, qui sera de six RAM. Je vais changer la couleur de fond. Utilisons du doré. Suivant. Je vais changer la couleur du texte. C'est 322277. De plus, nous avons besoin de marge, d'une RAM pour fonctionner. Suivant. Il faut qu'il n'y ait aucune frontière. Je vais donc placer le curseur sur le pointeur. Donc, le bouton est plutôt joli. Et en fait, nous pouvons passer et commencer à travailler sur le pied de page Insérons de nouveaux commentaires plutôt que d'utiliser la balise de pied de page HTML5, dans laquelle je vais placer un paragraphe pour le texte du copyright Je vais utiliser le signe du copyright. Et puis tous droits réservés. 2023. Fabriqué par code et Create. Allons-y et stylisons le pied de page. Nous avons besoin de nouveaux commentaires pour le pied de page. Ensuite, je vais sélectionner l'élément de pied de page et définir la largeur à 100 % La hauteur sera de dix tours. Nous avons donc besoin que la couleur de fond soit 262626. Ensuite, nous avons besoin de Flexbox. Nous devons centrer les éléments à l' aide de justify-content center et Le centre peut voir que le contenu est parfaitement centré. Allons-y et sélectionnons Paragraphe. Modifiez la taille de la police. Ce sera 1,6 RAM. Et la couleur, ça va être 999. Très bien, c'est tout pour le pied de page et la section Contact Ils ont l'air bien tous les deux. Passons à autre chose et rendons le projet réactif 48. Projet 5 - Rendre le projet réactif: Très bien, donc toutes ces sections du projet sont créées Et maintenant, la seule chose à faire est de rendre le projet réactif aux différentes tailles d'écran. Je vais inspecter la page et passer en mode réactif. Nous devons trouver le point d'arrêt sur lequel nous devons apporter les modifications à l'aide de requêtes multimédia CSS Je pense donc que le premier point d'arrêt sur lequel nous devons modifier le projet sera de 1 500 pixels Je vais d'abord insérer de nouveaux commentaires pour le mode réactif. Ensuite, nous devons créer une requête multimédia CSS en tant que largeur maximale. Je vais spécifier ici 1 500 pixels. La première chose que je vais faire est donc de réduire la taille de police de l' élément HTML. Portons-le à 55 %. Cela réduira la taille de tous les éléments. Donc je trouve que tout va bien. Et maintenant, nous pouvons passer à autre chose et trouver le point d'arrêt suivant. Je pense que le prochain point d'arrêt sera de 1 300 pixels. Copions ce code et modifions la largeur maximale pour la porter à 1 300 pixels Je vais modifier la taille de police de l'élément HTML. Portons-le à 50 %. Très bien, maintenant je pense que le projet semble bon. Vérifions-le. Je pense que tout va bien et que nous pouvons passer à autre chose et trouver le point d'arrêt suivant Le prochain point d'arrêt, à mon avis, devrait donc être de 1 100 pixels Allons-y et créons une nouvelle requête multimédia CSS. Définissez la largeur maximale à 1 100 pixels. Je vais sélectionner l'élément HTML et encore une fois, diminuer la taille de la police, porter à 45 pour cent. Ensuite, je vais sélectionner Menu Image wrapper et modifier la largeur pour qu'elle soit de 18 RAM Quant à la hauteur, je vais également la régler sur 18 RAM. Nous devons maintenant nous occuper de la section clients. Sélectionnez Clients et définissons la hauteur à 120, la hauteur de la fenêtre d'affichage activée Je vais donc sélectionner les clients. Changeons la direction, transformons-en une colonne. Je vais placer les objets à la verticale. Ensuite, nous avons besoin de clients. Réglons sa largeur à 100 %. Quant à la hauteur, elle sera de 115 RAM. Je pense donc que nous devons modifier la taille du deuxième client. Alors définissons avec, réglons donc la hauteur à 15 RAM. Faisons de même pour le quatrième élément. Alors maintenant, la section clients est plutôt jolie. Ensuite, nous devons nous occuper de la section Contact. Allons-y, sélectionnons Contact left et masquons-le. Nous devons maintenant aligner les éléments au centre. Sélectionnons Contact, n'est-ce pas ? Je vais régler sa largeur à 100 %. Maintenant. L'élément est placé au centre. Ensuite, nous avons besoin du groupe d'entrée, suivi de l'élément d'entrée Et nous devons également sélectionner la zone de texte. Et nous avons également besoin du bas. Réglons la largeur à 40 rampes. Maintenant je trouve que tout va bien. Et avec ce point de rupture, c'est terminé. Passons à autre chose et trouvons le suivant. Donc, le prochain point d'arrêt, je pense que ce sera 900 pixels. Allons-y et créons une nouvelle requête multimédia CSS. Et définissez la largeur maximale à 900 pixels. Je vais sélectionner Landing Contact puis le développement. Ensuite, il nous faut de l'envergure. Dans ce cas, le deuxième élément de plage. Réglons l'affichage sur aucun. Ensuite, je vais sélectionner Menu, n'est-ce pas ? Et cache-le. Ensuite, je vais sélectionner Menu de gauche et régler sa largeur à 100 %. De plus, je vais aligner les textes au centre et nous devons supprimer la marge sur le côté droit. Nous devons prendre soin du paragraphe. Allons-y et sélectionnons le menu à gauche P et une certaine marge à exécuter. Et puis oral, puis à louer et encore ADL. Alors maintenant, cette section est plutôt jolie. Ensuite, je vais m'occuper de la section clients. Allons-y, sélectionnons Clients et définissons la hauteur à 140 pour la hauteur de la fenêtre d'affichage Alors maintenant je pense que ça a l'air mieux. Ensuite, je vais sélectionner les vêtements Customers H1 et régler leur largeur sur 50 rampes. En fait, je pense que nous devons diminuer la hauteur. Allons 321. OK. Très bien, nous devons maintenant passer à autre chose et personnaliser le paragraphe Allons-y et sélectionnons Customers Banner, puis le sélecteur P. Mettons-nous à 260 ram. Oh non, je trouve que ça a l'air mieux. Après ça. Je vais sélectionner les clients. Réglons la hauteur à 18 rampes. En fait, je vais copier ce code et modifier les hauteurs des deuxième et quatrième éléments. OK, alors maintenant je trouve que cette section est jolie. Ajoutons ici la marge automatique. Je vais donc remettre la hauteur à 140. Ok, c'est ça. Enfin, avec la section client, c'est terminé. Passons à autre chose et occupons-nous de la section des conflits. Je vais sélectionner le groupe d'entrées et définir la direction de flexion par rapport à la colonne. Suivant. Nous devons sélectionner la balise de saisie, suivie de la zone de texte. Et nous avons également besoin d'un bouton. Allons-y avec une rampe 260. Je vais également sélectionner section Contact et augmenter 30 à 90 % de la hauteur de la fenêtre d'affichage Nous avons donc maintenant de bons résultats. En fait, avec ces points d'arrêt, c'est terminé. Passons à autre chose et trouvons le suivant. Je pense donc que le prochain point d' arrêt sera de 600 pixels. Allons-y, créons une nouvelle requête multimédia CSS et définissons la largeur maximale à 600 pixels. Je vais sélectionner le code HTML et réduire la taille de la police. Portons-le à 35 %. Ensuite, je vais sélectionner Landing Contact et régler la hauteur sur 19 rampes. Je vais également changer de direction. Faisons-en une colonne. Je vais placer les objets à la verticale. Ensuite, nous avons besoin d'un centre d'articles de ligne. OK. Après cela, je vais m'occuper des détails. Je veux dire, le kit de développement avec 220 rampes. Maintenant, je pense que les objets sont mieux placés. Ensuite, nous devons nous occuper de la section À propos. Augmentons la hauteur, mettons-la à la hauteur de la fenêtre d'affichage Et je vais aussi changer de direction. Nous devons placer les objets verticalement. Ensuite, je vais sélectionner The Belmont dans la section À propos et régler sa largeur sur 60 RAM De plus, je vais placer la marge à zéro plutôt que de courir sur les côtés gauche et droit. Très bien. Après cela, allons-y et occupons-nous de la section clients. Nous avons ici un grand espace. Je vais atteindre la hauteur d'une fenêtre d'affichage. Maintenant, je trouve que cette section est jolie. Et en fait, avec ce point de rupture, c'est terminé. Passons à autre chose et réglons les derniers points d'arrêt. Je vais créer une nouvelle requête multimédia CSS. Ensuite, je vais définir la largeur maximale à 450 pixels. Sélectionnez le logo et créez-le. La prochaine chose que je vais faire est de sélectionner le groupe de saisie, suivi de la zone de texte de saisie et du bouton. Changez la largeur, faites-en une rampe de 50. OK. La seule chose que je vais faire alors est de créer de l'espace. Et dans la section Clients, définissons la hauteur à une hauteur de vingt pour la fenêtre d'affichage OK. Je pense que c'est ça. Tout a l'air plutôt bien. Et on peut dire que le projet est Responsive. En fait, avec ce projet, nous avons terminé notre cours. J'espère que ça vous a plu. Apprenez de nouvelles choses. Je te souhaite tout le meilleur. Bonne chance