La cloche.

Il y a ceux qui ont lu cette nouvelle devant vous.
Abonnez-vous pour recevoir des articles frais.
E-mail
Nom
Nom de famille
Comment voulez-vous lire la cloche
Sans spam

Cette section du site est entièrement dédiée aux deux langues de la création d'un site, nommément HTML et CSS. Ici, vous pouvez avoir progressivement apprendre des langues, trouver tout, des bases aux moments les plus difficiles.

Cette section repose sur le principe de l'étude étape par étape du matériau. Ainsi, avant chaque nom de la leçon sur HTML et CSS, il existe un chiffre correspondant au numéro de cours de séquence. Il est naturel dans le cas si vous voulez tout apprendre du très basique et de ne pas vous rendre une bouillie dans ma tête. Si vous savez déjà quoi que ce soit sur les langages HTML et CSS, vous pouvez également trouver les connaissances qui vous manquent ou, approfondir déjà apprises.

Cette section contient des leçons sur les langages HTML5 et CSS3, respectivement, s'il existe des versions plus récentes de ces langues, elles seront également reflétées dans les nouvelles leçons de cette section et vous apprendrez certainement.



Probablement, chaque personne qui au moins une fois dans sa vie est apparue de la création d'un site, bien sûr, j'ai entendu parler d'un tel paquet comme HTML et CSS, je peux déclarer avec confiance que si vous voulez faire des sites vous-même, vous ne voulez pas faire sans connaître ces deux choses.

Après avoir reçu des concepts généraux sur ce que HTML est dans votre tête, il a clairement développé une image ambiguë et je pense que ce n'est pas surprenant. Il est temps de passer directement à la pratique et à créer votre premier document HTML.

Comme dans le langage HTML, les deux dans CSS ont ses propres caractéristiques, règles et structure. Dans cette leçon, je vous dirai des concepts de base de la langue CSS, de sa structure, de sa structure, de la première table CSS avec vous et d'apprendre à connecter la feuille de style au document HTML.

Les sélecteurs de CSS sont la base de la langue elle-même et de leur étude et leur compréhension est très importante, donc dans cette leçon, je vous en dirai plus sur plusieurs types de sélecteurs et je vais décrire leurs capacités.

Un point très important dans la création d'un site est de travailler avec le texte, et comme vous comprenez, avec le texte de HTML, vous devez également pouvoir travailler et savoir quelles étiquettes sont et comment elles peuvent être utilisées.

Après avoir appris toutes les balises HTML pour travailler avec le texte, il est temps d'aller directement à CSS travaillant avec du texte qui élargira déjà vos connaissances et opportunités.

Dans CSS, un nombre énorme de toutes sortes de propriétés d'apparence commode et efficacement changeantes et que nous continuons à étudier CSS fonctionnent avec le texte et dans cette leçon, nous approfondirons dans le sujet du travail avec le texte et envisager de nouvelles propriétés du texte.

Travailler avec des images lors de la création du site, l'un des points clés, comme lors de la création d'une conception, également avec une mise en page simple ou une écriture de tout matériau de votre site.

CSS élargit de manière significative de travailler avec des objets HTML, dans cette leçon, je voudrais vous indiquer en détail ces paramètres pouvant être appliqués aux images.

Titre complet - Langage Signalétique Hyper Text.. C'est une langue de balisage hypertexte, qui est utilisé partout lors de la construction de pages Web et de documents. Le chemin HTML a commencé dans la première moitié 90 ans. À cette époque, il était extrêmement primitif, mais a déjà contribué à faire des pages simples pour le Web. Depuis lors, la langue se développe constamment, car elle a déjà beaucoup appris. Sans HTML, dans ce formulaire, comme nous l'avions l'habitude, les sites Web n'existeraient tout simplement pas. Presque tous les sites utilisent dans une certaine mesure HTML.

Aujourd'hui, la norme actuelle - Html5.qui a été officiellement libéré en 2014. C'est une norme révolutionnaire qui a permis à la langue d'aller à un nouveau niveau.

Innovations dans HTML5:

  • L'algorithme d'emballage a changé lors du développement de la structure DOM;
  • Les nouvelles tags sont apparues, comme audio, vidéo et autres. À propos, maintenant uniquement les forces HTML que vous pouvez créer un lecteur Web. Auparavant, je devais utiliser Adobe Flash Player;
  • Nuérez la partie des règles et la sémantique de l'utilisation d'éléments HTML.

Si vous regardez globalement, HTML5 est devenu plus que la prochaine version linguistique, mais une plate-forme de développement d'applications à part entière. Auparavant, sa capacité était limitée à la construction d'une structure, il est aujourd'hui beaucoup plus intelligent. Avec la sortie de la norme, la sphère d'utilisation de la langue s'est considérablement étendue. Outre la direction traditionnelle du développement Web, il est utilisé pour créer des programmes informatiques sur Windows 8 et plus récente, et même développer des applications de smartphones sur toutes les plateformes populaires.

Tout est venu au fait que HTML5 a commencé à être appliqué dans deux directions clés:

  • En tant que version mise à jour de la langue HTML;
  • Le rôle d'une plate-forme fonctionnelle sur laquelle des applications Web peuvent être construites par diverses complexes. True, créez une application à part entière sur PURE HTML5 ne fonctionnera pas, car elle est toujours utilisée JavaScript et CSS3.

Qui est engagé dans la modernisation de HTML5? Sur la langue fonctionne W3C ou nom complet - WORLD WIDE WEB CONSORTIUM - Il s'agit d'une organisation de niveau international qui conserve l'indépendance de développeurs spécifiques. Il produit également des spécifications, des définitions et des normes pour HTML5. La spécification originale et complète est disponible sur le site officiel sur le lien ( disponible en anglais). L'organisation n'a pas terminé les travaux sur la langue, au contraire - continue de le développer.

Navigateurs de support

Il est important de comprendre que la spécification HTML5 et la mise en œuvre de cette technologie dans des navigateurs spécifiques sont des concepts différents. De nombreux navigateurs Web développés activement ont commencé à implémenter des fonctions HTML5 HTML5 avant même la publication de cette version. À ce jour, la plupart des navigateurs frais prennent en charge toutes les fonctions HTML5. Support complet Fournir: Chrome, c'est-à-dire 11, firefox, bord, opéra. Les versions relativement anciennes n'ont pas le soutien de nouvelles normes, par exemple, à savoir 8 ans et plus. Dans la version C'est-à-dire 9. et 10 Les normes ont déjà été mises en œuvre, mais seulement partiellement.

Souvent, les navigateurs peuvent généralement travailler avec une nouvelle norme, mais de manière différente de traiter les fonctions ou de produire simplement une erreur. Par conséquent, dans le développement CrossBOser, il est nécessaire de prendre en compte toutes les caractéristiques des navigateurs. À ce stade, soutenir la norme des navigateurs Web est déjà sur un bon niveau.

Pour vous assurer que la version actuelle du navigateur prend en charge HTML5, vous pouvez passer un petit test.

Quel est nécessaire pour le travail?

Qu'est-ce qui est utile pendant le développement de HTML5? L'outil Key est un éditeur de texte dans lequel le code sera fermé pour la future page Web. L'un des éditeurs les plus populaires et les plus multifonctionnels est NOTEPAD ++. Il est disponible sur le site officiel absolument gratuit. En plus de la distribution gratuite, il dispose toujours de toutes les fonctions nécessaires, a beaucoup de plug-ins utiles, met en évidence l'ouverture et la fermeture des balises.

Aussi un bon éditeur avec le support de la plupart des systèmes d'exploitation est le code Visual Studio. Il est capable de travailler dans MacOS, Windows et Linux. Par opportunités, ce logiciel est quelque peu supérieur au Notepad ++.

Le deuxième outil important est un navigateur Web, il sera utile pour tester le code. Tout navigateur convient à partir du développeur bien connu. Si vous devez créer une application multiplate-forme, vous devrez définir tous les navigateurs Web populaires sur le système.

J'ai décidé de payer plus d'attention aux débutants qui souhaitent acquérir des connaissances sur le site Web des bâtiments du site. Mon professeur m'a poussé dessus, qui a fait beaucoup d'erreurs dans les méthodes de travail de laboratoire. J'aimerais jeter un coup d'œil à cette ressource à partir de laquelle des informations éducatives ont été prises et il y aurait quelques lignes de mon avis. Mais maintenant n'est pas à propos de ça. Dans ma première conférence, je parlerai de

Quelle est la structure du document HTML

Étiqueter rapporte que la structure du document HTML commence, - Qu'est-ce qui se termine. Entre les étiquettes Les moteurs de navigateur et de recherche sont stockés dans la plupart des cas. Dans les étiquettes Contient le titre de notre page. Étiqueter suggère que d'autres informations sont destinées à l'utilisateur, Et suggère naturellement que les informations de l'utilisateur se termine.

Maintenant je vais vous expliquer un peu. TOUTES TAGS ( tEG - Langue de marquage hypertexte) Ils sont divisés en deux types de "célibataire" et de "fermeture". De plus, les balises sont aux caractères suivants < et > , Ce sont eux qui distinguent une balise du texte ordinaire Html. Considérez certaines des balises «simples» les plus simples:


- la balise qui est responsable du transfert vers une nouvelle chaîne à l'endroit où cette balise est installée. Considérez le code à l'aide de cette balise.

Mon premier site Bonjour tous le monde!
Et c'est mon premier site.

Le résultat peut être visualisé.


- Tag, qui dessine une ligne horizonable. Cette balise fait référence aux éléments bloquants, la ligne commence toujours par une nouvelle ligne. Il a 5 attributs:

  • aligner - détermine l'alignement de la ligne. Peut prendre la valeur de gauche, centre, droite.
  • couleur - Spécifie la couleur de la ligne.
  • noshade - dessine une ligne sans effets en trois dimensions.
  • taille - Spécifie l'épaisseur de la ligne.
  • largeur - Définit la largeur de la ligne.

Code à l'aide de la balise


:

Mon premier site Bonjour tous le monde!


Et c'est mon premier site.

L'exemple visuel est situé.

Une autre étiquette "simple" est . Cette balise est utilisée pour stocker des informations destinées aux navigateurs et aux moteurs de recherche. Les moteurs de recherche font appel aux méthagaines pour obtenir une description du site, des mots-clés et d'autres données. Autorisé à utiliser un nombre illimité de méthamis, tous doivent être entre et . Les paramètres de n'importe quel métatahatga ont la forme "nom \u003d valeur", qui est déterminée par des mots-clés contenu, nom. ou alors http-equiv.. Parce que Les métatellets sont conçus pour les voitures, ils n'entrent aucun changement visuel. Je ne donnerai que le code source:

Cette ligne suggère que le créateur de page estime que le codage UTF-8 est utilisé sur la page. Dans HTML5, tout est devenu plus facile, afin de spécifier le codage, seule la ligne suivante est suffisante:

Autres étiquettes solitaires ( , ,
, , , ,


, , , , , , , , , ), Mais avec eux, je vous présenterai un peu plus tard.

Parlons maintenant de "clôtures" étiquettes. Le nom "Étiquette fermée" elle-même suggère que la balise nécessite une fermeture obligatoire. Ceci est fait afin de limiter clairement une partie du texte auquel la balise est valide.

Pour un exemple visuel, jetez un coup d'œil à la balise Ceci est utilisé pour mettre en évidence le texte, il définit une police grasse. Mots clés et Ce sont des limites qui déterminent la zone de sélection de texte. Voici le code où dans la dernière ligne a oublié de fermer la balise :

Mon premier site Bonjour tous le monde! Et c'est mon premier site.
Bonjour tous le monde! Et c'est mon premier site.

Comme vous pouvez le constater, rien de compliqué, vous pouvez maintenant créer plusieurs pages de transfusées les unes avec les autres.

Tags pour mettre en évidence le texte

Il existe plusieurs façons de mettre en évidence le texte sur la page. Vous pouvez le faire avec des styles, mais vous pouvez à l'aide de tags. Nous sommes intéressés par la deuxième option.

- établit la police grasse à la place.

- établit une intersection de la police.

- ajoute un soulignement au texte.

- Conçu pour la mise au point de texte. Les navigateurs affichent un tel texte avec un stage.

- traverse le texte. Cette balise est exclue de HTML5 au lieu d'il est recommandé d'utiliser

- Affiche le texte par le texte de Monoshyry. Exclu de HTML5.

- Affiche la police comme un index supérieur. La police est affichée au-dessus de la ligne de base du texte et de la taille réduite.

- Affiche la police sous la forme de l'index inférieur. Le texte est situé sous la base de la base des symboles de chaîne restants et de la taille réduite.

- Conçu pour la mise au point de texte. Les navigateurs affichent un tel texte avec une inscription grasse.

- Réduit la taille de la police par unité par rapport au texte conventionnel. Dans la taille de la police HTML est mesurée dans des unités conventionnelles de 1 à 7, la taille moyenne du texte utilisé par défaut est adoptée 3. Étiquette Réduit le texte sur une unité conditionnelle. Il est permis d'utiliser des étiquettes imbriquées Dans le même temps, la taille de la police sera inférieure à 1 avec chaque niveau investi, mais ne peut pas être inférieur à 1.

- Augmente la taille de la police par unité par rapport au texte conventionnel. Dans la taille de la police HTML est mesurée dans des unités conventionnelles de 1 à 7, la taille de texte moyenne utilisée par défaut est adoptée 3. Ainsi, ajoutant une balise Augmente le texte sur une unité conditionnelle. Il est permis d'utiliser des étiquettes imbriquées Dans le même temps, la taille de la police sera plus avec chaque niveau.

- utilisé pour mettre en évidence la citation dans le texte. Le contenu du conteneur est automatiquement affiché dans le navigateur dans des guillemets.

- Conçu pour mettre en évidence des citations longues dans le document. Le texte désigné par cette balise est traditionnellement affiché sous forme de bloc aligné avec des retraites à gauche et à droite (environ 40 pixels), tout au-dessus et ci-dessous.


 - Détermine le bloc de texte pré-formaté. Un tel texte est généralement affiché par la police monosine et avec tous les espaces entre les mots. Par défaut, n'importe quel nombre de lacunes exécutées dans un contrat, sur la page Web s'affiche comme une. Étiqueter 
Vous permet de contourner cette fonctionnalité et d'afficher le texte en tant que développeur est requis.

- détermine le paragraphe de texte. Étiqueter

Il s'agit d'un élément de bloc, commence toujours par une nouvelle ligne, les paragraphes de texte s'exécutant sont séparés entre eux. La valeur de facturation peut être contrôlée par des styles. S'il n'y a pas de balise de fermeture, on pense que la fin du paragraphe coïncide avec le début de l'élément de bloc suivant.

..
..

- HTML offre six en-têtes de niveaux différents qui montrent l'importance relative de la section située après le titre. Donc, tag

représente l'en-tête le plus important du premier niveau et la balise

Il sert à indiquer le titre du sixième niveau et est le moins important. Par défaut, l'en-tête de premier niveau est affiché par la la plus grande police de police, les en-têtes de niveau suivants sont inférieurs. Mots clés

,…,

Ce sont les éléments de blocs, ils commencent toujours par une nouvelle ligne et, après eux, d'autres éléments sont affichés sur la ligne suivante. De plus, la rubrique et après avoir ajouté un espace vide. La balise a un attribut aligner.qui définit l'alignement de l'en-tête, peut prendre des valeurs la gauche. - Titre de nivellement sur le bord gauche, centre - alignement au centre, droite- alignement sur le bord droit, justifier.- alignement de largeur (simultanément sur le bord droit et gauche). Cette valeur ne fonctionne que pour le titre, dont la longueur est supérieure à une ligne.

- Il s'agit d'un conteneur de modifier les caractéristiques de la police, telles que la taille, la couleur et le casque. Bien que cette balise soit toujours prise en charge par tous les navigateurs, il est considéré comme obsolète et il est recommandé de refuser de refuser de styles. La balise a 3 attributs: couleur - Définit la couleur du texte, visage. - détermine le casque de la police, taille - Spécifie la taille de la police dans les unités conventionnelles.

- marque le texte comme une citation ou une note de bas de page à un autre matériau. Une telle sélection est commode de modifier le style du texte via CSS et s'applique également à la division du code HTML sur les éléments structurels. Les navigateurs définissent généralement le texte à l'intérieur du conteneur Italique.

- indique que la séquence de caractères est une abréviation. Utilisation de l'attribut titre La réduction est donnée, ce qui permet de comprendre l'abréviation à ces personnes qui ne le connaissent pas. De plus, les moteurs de recherche indiquent une option de réduction de texte intégral, qui peut être utilisée pour augmenter la notation du document.

Par défaut, texte ci-joint dans le conteneur souligné la ligne pointillée.

Ci-dessous, je donnerai le code dans lequel j'ai utilisé toutes ces balises:

Mon premier site

Html. Et. CSS. Sont deux des technologies principales pour la construction de pages Web. HTML fournit la structure de la page, CSS. La mise en page (visuelle et aurs), pour une variété d'appareils. Outre des graphiques et des scripts, HTML et CSS sont à la base de la construction de pages Web et d'applications Web. En savoir plus ci-dessous sur:

Qu'est-ce que HTML?

HTML est la langue pour décrire la structure des pages Web. HTML donne aux auteurs les moyens de:

Publier des documents en ligne avec des blessures, du texte, des tableaux, des listes, des photos, etc.
Récupérez des informations en ligne via des liens hypertextes, en cliquant sur un bouton.
Formulaires de conception pour effectuer des transactions avec des services distants, destinés à une utilisation dans la recherche d'informations, faire des réservations, commander des produits, etc.
Inclure des feuilles de propagation, des clips vidéo, des clips sonores et d'autres applications directement dans leurs documents.
Avec HTML, les auteurs décrivent la structure des pages à l'aide du balisage. Les éléments de l'étiquette de langue des morceaux de contenu tels que "Paragraphe", "liste", "table", etc..

Qu'est-ce que xhtml?

Xhtml est A. variante de HTML Qui utilise la syntaxe de XML, la langue de balisage extensible. XHTML a tous les mêmes éléments (pour les paragraphes, etc.) en tant que variante HTML, mais la syntaxe est légèrement différente. Parce que XHTML est une application XML, vous pouvez utiliser d'autres fichiers XML. outils. Il (tel que XSLT, une langue pour la transformation de la teneur en XML).

Qu'est-ce que CSS?

CSS est la langue pour décrire la présentation de pages Web, y compris les couleurs, la mise en page et les polices. Il permet d'adapter la présentation à différents types de périphériques, tels que les grands écrans, les petits écrans ou les imprimantes. CSS. EST. indépendant. De HTML et peut être utilisé avec n'importe quel balancement XML langue Langue. La séparation du code HTML de CSS facilite la maintenance des sites, partager des feuilles de style entre les pages et les pages sur mesure dans différents environnements. Ceci est appelé séparation de la structure (ou: contenu) de la présentation.

Qu'est-ce que webfont?

Webfont. Est une technologie qui permet aux personnes d'utiliser des polices à la demande sur la bande sans nécessiter d'installation dans le système d'exploitation. W3C a une expérience dans les polices téléchargeables via HTML, CSS2 et SVG. Jusqu'à récemment, des polices téléchargeables n'ont pas été communes sur le Web en raison de l'absence de format de police interopérable. L'effort WebFont envisage de résoudre celui-ci grâce à la création d'un format de police ouvert et financé par l'industrie. pour le web. (Appelé "Woff").

La conférence est arrivée à la fin, j'espère que les connaissances acquises vous seront utiles! Dans la prochaine conférence, je vais vous dire que la balise se garde en elle-même Apprenez à effectuer toutes sortes de manipulations avec des images et faites connaissance avec les tables.

Lors de l'écriture de cet article, la description de certaines balises a été prise d'ici

ou étudier des cours HTML indépendamment et libres

Voulez-vous créer votre site Web sur Internet? - Très bon! Html. Les leçons vous aideront avec cela.

Langage de balisage hypertexte ou abrégé Html. - La langue des documents de marquage hypertexte, le produit du consortium W3C - est basé sur presque toutes les pages Web existantes, ce qui la met en premier lieu de la hiérarchie des outils pour créer des sites. Une attention particulière devrait être accordée à l'étude des leçons de cette section.

  • Cours de HTML - Ce sont des leçons pour créer des pages en ligne.
  • Cours de HTML - la première étape pour développer le développement de sites en ligne.
  • Cours de HTML Et les cours de conception Web sont des concepts complètement différents.

Nouveau, moderne cours de HTML Développé spécifiquement pour les débutants.

Syntaxe Html. Pretty simple et facile à comprendre, mais cela ne signifie pas que le processus d'apprentissage ira bien et sans erreurs. Pas besoin d'avoir peur d'eux - ils sont inévitables. En faisant des erreurs, vous obtenez des informations sur la manière dont vous ne devriez pas circuler plus loin, ces informations valent un certain effort, un temps et donc particulièrement précieux. Cela accumule les connaissances et l'expérience.

En créant vos premières pages, vous apprécierez l'idée que vous découvrez le monde pour vous-même qui ne connaissait pas et que vous ne deviez même pas deviner son existence - le monde des autres opportunités est le monde du Web.

Fais attention! Vous pouvez ajouter à une nouvelle leçon.

Nouvelles cours HTML | Exemple de code HTML

Considérez ses éléments:

Tags définissant le début et la fin du document.

Section de service. Voici des commandes pour les navigateurs, instructions pour les robots de recherche, liens vers des fichiers distants, scripts.

Tags définissant l'en-tête principal du document.

Cette section contient toute la partie visible de la page Web.

Dans le navigateur, nous verrons bonjour World! :

Pour étudier Html. Le bloc-notes est nécessaire. Nous allons imprimer manuellement le code. Peut-être tout ... L'interprétation du code est engagée dans des logiciels pour afficher des pages Web, c'est-à-dire Internet Explorer, Firefox, Opera, Chrome et d'autres navigateurs.

Dans les leçons de ce cours seront présentés HTML 5., Inclusion XHTML et CSS. Une telle combinaison est optimale pour apprendre et peut s'accélérer de manière significative dans le développement du matériau.

Actuellement sur le site officiel du consortium W3C déjà disponible Spécification HTML 5.. Le développement de la cinquième version a commencé en 2007, il est basé sur elle XML Et en substance, il est complété de nouveaux éléments et attributs, Xhtml-manger. Cinquième version Html. Il offre des fonctionnalités plus larges et simplifie le processus de création de sites interactifs et d'applications Web. Outre, HTML 5. Contient des éléments supplémentaires qui fournissent des placements dans la page Web de contenu multimédia.

Nouveau Html. Il n'a pas encore reçu le statut de la recommandation et ses balises, à ce stade, ne sont comptabilisées que par certains navigateurs. Mais malgré cela, les cours HTML 5 sont disponibles aujourd'hui.

Post ScriptUm: Internet est constitué d'une multitude infinie de pages liées aux liens hypertexte, via le protocole de transfert d'hypertexte ou le protocole de transfert HTTP HTTP - HTTP Abréviated sous forme de documents hypertextes. Et ce qui est Html.? Html. - Langage Signalétique Hyper Text. ou la langue des documents de marquage hypertexte.

Cet article ne prétend pas être une guidage exhaustive sur la langue de balisage des documents HTML. Il décrit les fondements de HTML - principes de base, concepts et définitions de cette technologie, ayant maîtrisé, qui peut être facilement déplacé vers l'étude du codage HTML.

Château

Timbre

Pour explorer la leçon, téléchargez l'archive avec les fichiers nécessaires.

Html. - Ceci est une langue de balisage documents. Prononciation correcte - EICH TI EM EL.

Vous avez probablement travaillé dans l'éditeur de documents Word ou des applications de bureau similaires? Vous savez probablement que ce type d'éditeurs dispose de riches opportunités pour éditer le texte, l'emplacement des éléments, l'insertion d'images, etc.

Pourquoi demandez-vous, écrivez dans un article dédié au HTML sur les processeurs de texte? Mais pourquoi. Si vous le comprenez, qu'est-ce qu'un éditeur de bureau? Ceci est une application d'édition et d'affichage de documents.

Mot-clé ici - document . C'est-à-dire que nous créons, éditons et surveillons un document dans un programme, dans ce cas - dans l'éditeur de bureau. Si vous ouvrez ce document dans un simple éditeur de texte, par exemple dans un ordinateur portable, nous verrons beaucoup de caractères et de signes étranges. Cette bouillie des symboles est incompréhensible à l'humanité, mais compréhensible aux ordinateurs. Grâce à cette langue intérieure, le document Word acquiert une certaine structure et une certaine apparence dans l'éditeur lui-même, et le document se présente devant nous dans toute sa gloire avec du texte formaté et des images à sa place.

Html. - Ceci est une langue de balise linguistique pour le navigateur. Word "Ohm sert un navigateur ici, et le document est une page HTML. C'est la meilleure base de la technologie HTML, dont la compréhension est nécessaire pour ne pas confondre la bande des documents Web avec des langages de programmation. Le nom parle pour lui-même - avec HTML, nous emplacementoù la page sera affichée l'élément, l'image ou le texte, et dans quel ordre ils se suivront mutuellement.

Oui, un ensemble simple et une mise en forme du texte dans les applications de bureau n'ont rien de commun avec la programmation. Mais le lecteur de supervision remarquera un détail important - dans le processeur de texte, nous tapons, modifier et formater du texte et des images à l'aide des boutons et des menus visuels, mais pourquoi le code HTML est-il écrit manuellement? Pourquoi étudier autant de détails techniques sur la rédaction du marquage pour le document?

En fait, il y a beaucoup d'éditeurs avec lesquels vous pouvez créer et éditer des pages HTML par analogie avec Word. C'est-à-dire que le code HTML source pour nous est caché et nous ne la gravons pas.

Mot unique pour HTML. Ces éditeurs visuels sont appelés:

WYSIWYG. éditeurs - W.chapeau. Y.ou. S.ee JE.s. W.chapeau. Y.ou. G.eT. C'est-à-dire que si nous nous traduisions en russe: ce que nous voyons, alors nous obtenons.

Je les appelle "Vuziwow". Bien qu'il soit phonétiquement et non correctement, mais indique clairement la signification de la présente invention. Les débutants utilisent très souvent de tels éditeurs pour créer leurs premiers sites. Bien sûr, il est pratique - vous n'avez pas besoin de plonger dans l'étude des tags, des styles de conception et des autres, à première vue, des choses désagréables et complexes. L'éditeur lui-même convertit automatiquement nos actions en code HTML.

Mais comme on dit, rien d'autre n'arrive. Et si plus précisément, cette approche présente des inconvénients très graves. Qu'est-ce qui empêche tout le monde d'une ligne d'utiliser des éditeurs visuels pour concevoir des pantalons HTML? Le fait est que les pages formées de cette manière ont, en règle générale, beaucoup d'excès de code, beaucoup d'erreurs d'un point de vue sémantique. Maintenant, bien sûr, il n'y a aucun problème à la connexion Internet haut débit et la différence de taille de la page 400 Ko et 100 ko ne sont pas significatives pour la vitesse, mais le code HTML optimisé et correctement écrit élimine l'ensemble des problèmes et donne beaucoup d'avantages, nommément:

  • Le code HTML compétent a un effet positif sur l'optimisation des moteurs de recherche, la vitesse de numérisation d'un site de robot de recherche. Le code généré par Vuzivuga code ici n'est pas acceptable et même nocif;
  • Le code HTML généré par WYSIWYG Editor a de nombreuses erreurs sémantiques. C'est-à-dire que les balises générées par un tel éditeur ne sont pas utilisées comme objectif, où vous devez utiliser, par exemple, les listes
      L'éditeur générera à nous une autre balise inutile. Bien sûr, cela dépend de l'éditeur, mais il existe ici des solutions intégrées pour la création de sites et non une modification de texte facile dans la zone de texte avec WYSIWYG.
    • De nombreuses balises supplémentaires sont générées et la structure du document est gonflée. Supposons d'abord déplacer l'élément dans un tel programme, puis à gauche, puis la trace reste dans le code HTML source de chaque action. L'éditeur est un programme et il ne peut pas savoir ce que vous souhaitez obtenir en conséquence, il forme des tonnes de code, en tenant compte de tous les comportements possibles du document dans le navigateur.
    • En règle générale, les éditeurs pour la conception visuelle du code HTML sont rapidement liés. Et en raison du manque d'intérêt des professionnels - généralement de soutien et d'arrêt du développement. Et HTML se développe. Tout se développe, à l'exception des universités. En conséquence, ils ne peuvent pas générer le code droit et moderne dans lequel de nouvelles puces et solutions seraient impliquées.
    • Soutenez ces projets et développer - Kara Heaven. Sur l'utilisation de modèles et de réutilisation du code de parole ne peut pas être.

    Ainsi, HTML n'écrira qu'avec des poignées. Des outils adéquats pour l'édition visuelle HTML n'ont pas encore augmenté et ils sont peu susceptibles d'apparaître. Le langage HTML Markup est facile à apprendre et à comprendre, et les moyens d'écriture de code HTML défini, mais à ce sujet dans d'autres leçons.

    Portant un peu avec un éditeur WYSIWYG, le jeune HTML-Guru laisse une leçon non-consistante et passez à autre chose.

    Structure de document HTML

    Je recommande de télécharger et d'installer l'éditeur de texte sublime. Intruther Je ne recommande pas d'utiliser pour la mise en page HTML intégrée au Windows "Notepad", si vous ne voulez pas vous casser une psychisme dans les premiers pores de l'étude HTML.

    Nous avons décidé que le code HTML du document sera écrit manuellement, c'est-à-dire se réconcilier. Disposition HTML - le processus de création d'un document HTML. Dans les cercles communs et compétents - juste la mise en page. Tout document a une structure et certaines règles de construction. Quels éléments est le code, quelle structure de HTML?

    Créons un modèle initial sur l'ordinateur - Fichier index.html, ouvrez à l'aide de l'éditeur et insérez le code suivant:

    Titre Corps du document Veuillez noter que les documents HTML ont une extension .html..

    Donc, dans l'exemple de l'exemple.

    - Type de document (DC)

    Cette conception est toujours indiquée au début du document pour le navigateur "compréhension" correct de la version de HTML utilisé lors de la construction d'un document.

    En raison du fait que HTML se développe constamment, il possède plusieurs versions, en tant que produit de programme. La version actuelle de HTML est la cinquième et une donnée dans l'exemple. drogue est pertinent.

    En principe, il n'a aucun sens pour approfondir l'étude du type de document, car avec la sortie HTML5, cette conception est devenue la norme. Il suffit d'insérer au début du document chaque fois que vous démarrez la mise en page du site.

    - Début du document

    La première balise que nous rencontrons après que le médecin soit .

    Tag HTML - unité structurelle de marquage du document HTML. Le code HTML se plie à partir de briques, qui sont appelés tags. Chaque balise a sa propre fonction et l'étude de la langue de balisage HTML, finalement, est précisément dans l'étude des balises et de leurs propriétés dans le document.

    J'aimerais noter que l'étude de HTML n'est pas une leçon aussi complexe, car elle peut sembler à première vue. Pour apprendre les étiquettes utilisées dans le balisage - pas une charge aussi importante sur le cerveau.

    Donc, le marquage du document commence par la balise et se termine par une étiquette de fermeture. Chaque balise contenant d'autres tags ou éléments doit être fermée fermeture. Par example, , ,

    , etc.

    Étiqueter Il est obligatoire, car il contient toute la structure du document et est une coquille pour d'autres éléments.

    Étiqueter

    Ensuite, nous voyons étiqueter qui contient les autres jusqu'à ce que les articles le comprennent. Contient d'autres éléments - cela signifie que les éléments ou les étiquettes sont entre l'étiquette d'ouverture et de fermeture de la structure:

    <тег> Contenu ou autres balises

    Étiqueter Il est destiné à stocker le métaming du document HTML, c'est-à-dire les informations qui ne sont pas affichées dans le document lui-même, mais sont importantes et détermine en grande partie la manière dont le document examinera et comment se comporter.
    Cette balise est requise dans le document.

    Étiqueter - En-tête de document</h4> <title>Titre

    Titre est un <b>étiquette obligatoire</b>contenant du texte Meta Information affichée dans le navigateur ou l'en-tête de l'onglet. Étiqueter <title> doit être dans la balise <head>. En outre, le contenu de cette balise est utilisé par les moteurs de recherche pour afficher le document dans les résultats de la délivrance.</p> <h4>METATEGE <meta charset="UTF-8" ></h4> <meta charset="UTF-8" > <p><b>METATEGE</b> - une balise spécialisée conçue pour fournir des données de page structurées. Les métathléts sont les plus souvent utilisés dans la balise <head>. Les métagélées ne sont pas nécessaires dans la structure <b>Html.</b> Document.</p> <h4>Favicon (Favicon)</h4> <link rel="icon" href="favicon.ico" > <p>Connecte un fichier au document avec l'image du Favonki. <b>Favicon (Favicon)</b> - Icône miniature affichée à côté du nom du document dans l'onglet Navigateur. Favonka est un fichier graphique, 16 x 16 (ou 32 x 32) pixels, qui peuvent avoir des formats différents, tels que PNG, JPG, ICO, GIF. Traditionnellement utilisé le format ICO. Favonki animé est des fichiers GIF contenant des animations. Vous pouvez regarder une favon animée, par exemple, Vkontakte lorsqu'un nouveau message vient.</p> <h4>Styles de document CSS</h4> <link rel="stylesheet" href="style.css"> <p>Se connecte au fichier de document CSS avec des styles de conception HTML.</p> <p><b>CSS.</b> - <i>cascade</i> Styles de la conception d'un document HTML. Chaque balise qui est dans la balise <body>, il existe un ensemble de propriétés, telles que la couleur, la largeur, la hauteur, la position par rapport à d'autres éléments. Toutes ces propriétés sont des styles CSS qui peuvent être prélevés dans un fichier externe. Conception <link> Connecte des fichiers externes au document HTML, y compris les styles CSS.</p> <p>Note: Propriété <b>href.</b> Conceptions <link > Spécifie l'emplacement du fichier externe. Dans notre exemple, dossier <i>style.css.</i> et <i>favicon.ico.</i>, sont dans le même dossier que le fichier <i>index.html</i>. <link> n'a pas de balise de fermeture.</p> <h4>Étiqueter <script></h4> <script src="script.js" type="text/javascript"></script> <p>Étiqueter<script> содержит код или ссылку на файл <b>javaScript </b> и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.</p> <p>В нашем примере подключается внешний файл <i>script.js </i>, который находится в той-же папке, что и основной файл index.html.</p> <p>Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.</p> <h4>Тело aka body</h4> <body> <p>Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.</p> <p>Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл <b><i>index.html </i> </b> в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.</p> <p>Тег <body> может содержать любые HTML теги, необходимые для оформления документа и обеспечения его функционала (формы). Приведу таблицу наиболее используемых тегов и вкратце опишу каждый. Вы можете сразу выполнять приведенные примеры в редакторе.</p> <table><tr><td><h4>Тег</h4> </td> <td><h4>Описание</h4> </td> </tr><tr><td> <a> </td> <td> Тег для создания ссылок в документе.<br> Пример: текст ссылки Атрибут <b>href </b> указывает документ, на который будет вести данная ссылка. </td> </tr><tr><td> <em>, <strong> </td> <td> Делает текст <i>курсивом </i>или <b>жирным </b> (акцентируемым).<br> Пример: <em>текст курсивом</em> <strong>жирный (акцентируемый) текст</strong> </td> </tr><tr><td> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> </td> <td> Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h1 до h4. В документе должен быть только один заголовок, выделенный тегом h1, как главный заголовок документа.<br> Примеры: <h1>Заголовок первого уровня</h1> <h2>Заголовок второго уровня</h2> <h3>Заголовок третьего уровня</h3> ... и т. д. </td> </tr><tr><td> <ol>, <ul> </td> <td> Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег <li><br> Примеры: <ul> <li>Элемент маркированного списка 1</li> <li>Элемент маркированного списка 2</li> </ul> <ol> <li>Элемент нумерованного списка 1</li> <li>Элемент нумерованного списка 2</li> </ol> </td> </tr><tr><td> <p> </td> <td> Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно.<br>Пример: <p>Внешний вид HTML разметки во многом определяется CSS стилями.</p> <p>Тем не менее, некоторые веб-мастера предпочитают не использовать стили на первых этапах проекта.</p> </td> </tr><tr><td> <img> </td> <td> Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст - атрибут "alt". Данный тег "самозакрывающийся".<br>Пример: <img src='https://i0.wp.com/путь_до_картинки.jpg' loading=lazy loading=lazy> </td> </tr><tr><td> <form> + <input> + <textarea> </td> <td> Формы и элементы ввода.<br> Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача - отправка данных на сервер.<br> Пример - простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст: <form action="ссылка_на_скрипт_обработки_формы"> <input type="text" name="name"> <input type="text" name="email"> <textarea name="text"> Текст сообщения <textarea> <input type="submit" value="Написать"> </form> </td> </tr><tr><td> <span> </td> <td> Определяет подстроку в строке.<br>Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере.<br>Пример: Изучение HTML, в большинстве случаев, не вызывает <span>ни каких сложностей</span> у новичков. </td> </tr><tr><td> <video>, <audio> </td> <td> Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег.<br>Примеры: <video src="rolik_chuma.mp4" controls></video> <audio src="muzichka.mp3" controls></audio> Параметр <b>controls </b> говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере. </td> </tr><tr><td> <div> </td> <td> Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие "дивной" верстки - это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги <div>.<br>Пример: <div> <div> Текст во вложенном блоке </div> </div> Все элементы <div>, в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег </div>. </td> </tr><tr><td> <iframe> </td> <td> Данный тег загружает внешнюю страницу в документ.<br>Пример: <iframe src="http://rtfm.org.ru"></iframe> </td> </tr></table><p>Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное - понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.</p> <p>Обратите внимание на то, что все названия в подключаемых файлах должны писаться латинскими символами, без пробелов.</p> <p>Например, не:</p><p> <video src="ролик чума.mp4" controls></video> </p><p> <video src="rolik_chuma.mp4" controls></video> </p><p>Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.</p> <p>Итак, теперь мы знаем некоторые <b>основы HTML </b>: какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному - а именно, печенькам.</p> <h3>Практическое задание по HTML верстке</h3> <p>Если вы еще не скачали архив с примерами, сделайте это . Для примера, можете подглядывать в файл example.html, который также находился в архиве.</p> <ol><li>Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;</li> <li>Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;</li> <li>Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.</li> </ol><p>На этом урок по основам HTML окончен, в следующем уроке "Основы CSS " мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="bsb-wrap bsb-bold bsb-after-post php-mode" data-post-id="4848" data-share-url="/eshhe-odin-nalog-chem-zamenit-nalog-na-modernizatsiyu/"> <div class="bsb-items"> <div class="bsb-item bsb-facebook bsb-no-count" data-id="facebook"> <a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fqipu.ru%2Ffr%2Fmts%2Fosnovy-html-dlya-nachinayushchih-osnovy-html-dlya-nachinayushchih-izuchenie-html-s-nulya.html" class="bsb-link" target="_blank" data-wpel-link="internal"> <i class="bsb-icon icon icon-facebook"></i> <span class="bsb-label">Partager.</span> </a> </div> <div class="bsb-item bsb-telegram bsb-no-count" data-id="telegram"> <a href="https://qipu.ru/fr/tg://msg?text=https%3A%2F%2Fqipu.ru%2Fmts%2Fosnovy-html-dlya-nachinayushchih-osnovy-html-dlya-nachinayushchih-izuchenie-html-s-nulya.html" class="bsb-link" target="_blank" data-wpel-link="internal"> <i class="bsb-icon icon icon-telegram"></i> <span class="bsb-label">Partager.</span> </a> </div> <div class="bsb-item bsb-twitter bsb-no-count" data-id="twitter"> <a href="https://twitter.com/share?url=https%3A%2F%2Fqipu.ru%2Ffr%2Fmts%2Fosnovy-html-dlya-nachinayushchih-osnovy-html-dlya-nachinayushchih-izuchenie-html-s-nulya.html" class="bsb-link" target="_blank" data-wpel-link="internal"> <i class="bsb-icon icon icon-twitter"></i> <span class="bsb-label">Tweet.</span> </a> </div> <div class="bsb-item bsb-vkontakte bsb-no-count" data-id="vkontakte"> <a href="https://vk.com/share.php?url=https%3A%2F%2Fqipu.ru%2Fmts%2Fosnovy-html-dlya-nachinayushchih-osnovy-html-dlya-nachinayushchih-izuchenie-html-s-nulya.html" class="bsb-link" target="_blank" data-wpel-link="internal"> <i class="bsb-icon icon icon-vkontakte"></i> <span class="bsb-label">Comme.</span> </a> </div> <div class="bsb-item bsb-fb-messenger bsb-no-count" data-id="fb-messenger"> <a href="https://qipu.ru/fr/fb-messenger://share/?link=https%3A%2F%2Fqipu.ru%2Fmts%2Fosnovy-html-dlya-nachinayushchih-osnovy-html-dlya-nachinayushchih-izuchenie-html-s-nulya.html" class="bsb-link" target="_blank" data-wpel-link="internal"> <i class="bsb-icon icon icon-fb-messenger"></i> <span class="bsb-label">Comme.</span> </a> </div> </div> </div> </div> </div> </article> <section class="section-carousel"> <div class="post-carousel"> <h3 class="title-block">Lire aussi</h3> <div class="owl-container owl-loop" data-columns="3" data-padding="20"> <div class="owl-carousel"> <article class="post- post type-post status-publish format-standard has-post-thumbnail hentry category-morning-news"> <div class="post-thumbnail"> <img width="720" height="378" src="/uploads/e559950a8c28c2ecd6250bcdb1ca9b6a.jpg" class="attachment-md size-md wp-post-image" alt="Détermination des charges de règlement du coefficient de réseau électrique de la combinaison de charges de Maxima" / loading=lazy loading=lazy> <div class="post-more"><a href="https://qipu.ru/fr/megaphone/opredelenie-raschetnyh-nagruzok-gorodskih-elektricheskih-setei.html" class="btn-link" data-wpel-link="internal"><span>Lire</span></a></div> <ul class="post-meta"></ul> <a href="https://qipu.ru/fr/megaphone/opredelenie-raschetnyh-nagruzok-gorodskih-elektricheskih-setei.html" data-wpel-link="internal"></a> </div> <h2 class="entry-title"><a href="https://qipu.ru/fr/megaphone/opredelenie-raschetnyh-nagruzok-gorodskih-elektricheskih-setei.html" data-wpel-link="internal">Détermination des charges de règlement du coefficient de réseau électrique de la combinaison de charges de Maxima</a></h2> <ul class="post-meta"> <li class="meta-date"> <time class="entry-date published updated" datetime=""> 2021-05-10 18:10:49 </time> </li> </ul> </article> <!-- /next_post --> <article class="post- post type-post status-publish format-standard has-post-thumbnail hentry category-morning-news"> <div class="post-thumbnail"> <img width="720" height="378" src="/uploads/72ec1ff0e6d0b242b4f7b2620ac56169.jpg" class="attachment-md size-md wp-post-image" alt="Réseaux secondaires de réseau de communication réseau secondaire" / loading=lazy loading=lazy> <div class="post-more"><a href="https://qipu.ru/fr/tele2/vtorichnye-seti-svyazi-vtorichnaya-set-svyazi-kanalov.html" class="btn-link" data-wpel-link="internal"><span>Lire</span></a></div> <ul class="post-meta"></ul> <a href="https://qipu.ru/fr/tele2/vtorichnye-seti-svyazi-vtorichnaya-set-svyazi-kanalov.html" data-wpel-link="internal"></a> </div> <h2 class="entry-title"><a href="https://qipu.ru/fr/tele2/vtorichnye-seti-svyazi-vtorichnaya-set-svyazi-kanalov.html" data-wpel-link="internal">Réseaux secondaires de réseau de communication réseau secondaire</a></h2> <ul class="post-meta"> <li class="meta-date"> <time class="entry-date published updated" datetime=""> 2021-05-10 18:10:49 </time> </li> </ul> </article> <!-- /next_post --> <article class="post- post type-post status-publish format-standard has-post-thumbnail hentry category-morning-news"> <div class="post-thumbnail"> <img width="720" height="378" src="/uploads/34ce76b240af9af5ab78b6ac754bf912.jpg" class="attachment-md size-md wp-post-image" alt="Installation du firmware officiel sur Samsung Galaxy S6 Firmware Nokia C6 00" / loading=lazy loading=lazy> <div class="post-more"><a href="https://qipu.ru/fr/mobile-tips/ustanovka-oficialnoi-proshivki-na-samsung-galaxy-s6-ustanovka.html" class="btn-link" data-wpel-link="internal"><span>Lire</span></a></div> <ul class="post-meta"></ul> <a href="https://qipu.ru/fr/mobile-tips/ustanovka-oficialnoi-proshivki-na-samsung-galaxy-s6-ustanovka.html" data-wpel-link="internal"></a> </div> <h2 class="entry-title"><a href="https://qipu.ru/fr/mobile-tips/ustanovka-oficialnoi-proshivki-na-samsung-galaxy-s6-ustanovka.html" data-wpel-link="internal">Installation du firmware officiel sur Samsung Galaxy S6 Firmware Nokia C6 00</a></h2> <ul class="post-meta"> <li class="meta-date"> <time class="entry-date published updated" datetime=""> 2021-05-10 18:10:49 </time> </li> </ul> </article> <!-- /next_post --> </div> <div class="owl-dots"></div> </div> </div> </section> </main> </div> </div> </div> </div> <footer class="site-footer"> <style> .footer-section { width: 830px; margin: 0 auto; padding: 0; font-family: 'Noto Sans', sans-serif; } .site-footer { background-color: #222; } @media (max-width: 1025px) { .footer-section { max-width: 690px; } } @media (max-width: 760px) { .footer-section { width: 90%; } } .site-footer a:hover { color: #FF3400; } .white-a { color: #969696!important; } .white-a:hover { color: #fff!important; } .white-a:hover g { opacity: 1; } </style> <div class="footer-section"> <div class="footer" > <div class="footer__menu"> <div class="footer__menu__logo" style="background:none;"><img src="/logo.png" loading=lazy loading=lazy></div> <ul> <li><a href="https://qipu.ru/fr/category/megaphone/">Mégaphone</a></li> <li><a href="https://qipu.ru/fr/category/mts/">Mts</a></li> <li><a href="https://qipu.ru/fr/category/beeline/">Ligne droite</a></li> <li><a href="https://qipu.ru/fr/category/tele2/">Tele 2</a></li> </ul> <ul> <li><a href="https://qipu.ru/fr/category/megaphone/">Mégaphone</a></li> <li><a href="https://qipu.ru/fr/category/mts/">Mts</a></li> <li><a href="https://qipu.ru/fr/category/beeline/">Ligne droite</a></li> <li><a href="https://qipu.ru/fr/category/tele2/">Tele 2</a></li> </ul> </div> <div class="footer__social"> <a href="https://facebook.com/" target="_blank" class="footer__social--facebook white-a" data-wpel-link="external"></a> <a href="https://twitter.com/" target="_blank" class="footer__social--tw white-a" data-wpel-link="external"></a> <a href="" target="_blank" class="footer__social--vk white-a" data-wpel-link="external"></a> <a href="https://youtube.com/" target="_blank" class="footer__social--yt white-a" data-wpel-link="external"></a> </div> <div class="footer__info" > <p>© Qipu.ru, 2021. Assistant personnel dans le monde de la communication cellulaire <br> .</p> </div> </div> </div> </footer> </div> </div> <a href="https://qipu.ru/fr/#top" class="scroll-to-top hidden-sm-down" data-wpel-link="internal"></a> <div class="site-search" id="search"> <button type="button" class="close"></button> <div class="form-container"> <div class="container"> <div class="row"> <div class="col-lg-6 offset-lg-3"> <form role="search" method="get" class="search-form form" action="/"> <label class="sr-only">Rechercher:</label> <div class="input-group"> <input type="search" value="" name="s" class="search-field form-control" placeholder="Qu'est-ce que tu cherches?" required> <span class="input-group-btn"> <button type="submit" class="search-submit btn btn-primary btn-effect"><span>Rechercher.</span><span><i class="icon icon-search"></i></span></button> </span> </div> </form> <p>Entrez des mots-clés.</p> </div> </div> </div> </div> </div> <style type="text/css"> .wpmchimpa-overlay-bg.wpmchimpselector { display: none; top: 0; left: 0; height:100%; width: 100%; cursor: pointer; z-index: 999999; background: #000; background: rgba(0,0,0,0.40); background:rgba(0,0,0,0.7);cursor: default; position: fixed!important; } .wpmchimpa-overlay-bg #wpmchimpa-main *{ transition: all 0.5s ease; } .wpmchimpa-overlay-bg .wpmchimpa-mainc, .wpmchimpa-overlay-bg .wpmchimpa-maina{ -webkit-transform: translate(0,0); height:100%;} .wpmchimpa-overlay-bg #wpmchimpa-main { position: absolute; top: 50%; left: 50%; border-radius: 2px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% - 20px); max-width:650px; background: #27313B; text-align: center; background-color:#ffffff;} #wpmchimpa-main #wpmchimpa-newsletterform{ } #wpmchimpa-main #wpmchimpa{ width: calc(100% - 20px); max-width: 400px; margin: 0 auto; } #wpmchimpa div{ position:relative; } #wpmchimpa h3{ line-height: 24px; margin-top:20px; color: #F4233C; font-size: 24px; font-family:Tahoma, Geneva, sans-serif;font-size:35px;line-height:35px;font-weight:normal;font-style:normal;color:#f34b38;} #wpmchimpa .wpmchimpa_para{ margin-top: 15px; } #wpmchimpa .wpmchimpa_para,#wpmchimpa .wpmchimpa_para * { font-size: 15px; color: #959595; font-family:Tahoma, Geneva, sans-serif;font-size:15px;} #wpmchimpa form{ margin: 20px auto; } #wpmchimpa .formbox > div:first-of-type{ width: 65%; float: left; } #wpmchimpa .formbox > div:first-of-type + div{ width: 35%; float: left; text-align: center; } #wpmchimpa .formbox input[type="text"]{ border-radius: 3px 0 0 3px; } #wpmchimpa .wpmchimpa-field{ position: relative; width:100%; margin: 0 auto 10px auto; text-align: left; } #wpmchimpa .inputicon{ display: none; } #wpmchimpa .wpmc-ficon .inputicon { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; pointer-events: none; } #wpmchimpa .wpmc-ficon input[type="text"], #wpmchimpa .wpmc-ficon input[type="text"] ~ .inputlabel{ padding-left: 40px; } #wpmchimpa .wpmc-ficon [wpmcfield="email"] ~ .inputicon { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMzZDNkM2QiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTUxMiwzODRjMCwxMS4yMTktMy4xNTYsMjEuNjI1LTguMjE5LDMwLjc4MUwzNDIuMTI1LDIzMy45MDZMNTAyLjAzMSw5NGM2LjIxOSw5Ljg3NSw5Ljk2OSwyMS40NjksOS45NjksMzRWMzg0eiBNMjU2LDI2Ni43NUw0NzguNSw3Mi4wNjNjLTkuMTI1LTUtMTkuNDA2LTguMDYzLTMwLjUtOC4wNjNINjRjLTExLjEwOSwwLTIxLjM5MSwzLjA2My0zMC40ODQsOC4wNjNMMjU2LDI2Ni43NXogTTMxOC4wMzEsMjU0Ljk2OSBsLTUxLjUsNDUuMDk0QzI2My41MTYsMzAyLjY4OCwyNTkuNzY2LDMwNCwyNTYsMzA0cy03LjUxNi0xLjMxMy0xMC41MzEtMy45MzhsLTUxLjUxNi00NS4wOTRMMzAuMjUsNDM4LjE1NiBDNDAuMDYzLDQ0NC4zMTMsNTEuNTYzLDQ0OCw2NCw0NDhoMzg0YzEyLjQzOCwwLDIzLjkzOC0zLjY4OCwzMy43NS05Ljg0NEwzMTguMDMxLDI1NC45Njl6IE05Ljk2OSw5NEMzLjc1LDEwMy44NzUsMCwxMTUuNDY5LDAsMTI4IHYyNTZjMCwxMS4yMTksMy4xNDEsMjEuNjI1LDguMjE5LDMwLjc4MWwxNjEuNjQxLTE4MC45MDZMOS45NjksOTR6Ii8+PC9zdmc+') no-repeat center} #wpmchimpa .wpmc-ficon [wpmcfield="FNAME"] ~ .inputicon { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMzZDNkM2QiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNjEyIDYxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDYxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBhdGggZD0iTTMwNi4wMDEsMzI1Ljk4OGM5MC41NjMtMC4wMDUsMTIzLjE0Ny05MC42ODIsMTMxLjY3OS0xNjUuMTY3QzQ0OC4xODgsNjkuMDYsNDA0Ljc5OSwwLDMwNi4wMDEsMCBjLTk4Ljc4MiwwLTE0Mi4xOTUsNjkuMDU1LTEzMS42NzksMTYwLjgyQzE4Mi44NjIsMjM1LjMwNCwyMTUuNDM2LDMyNS45OTUsMzA2LjAwMSwzMjUuOTg4eiIvPjxwYXRoIGQ9Ik01NTAuOTgxLDU0MS45MDhjLTAuOTktMjguOTA0LTQuMzc3LTU3LjkzOS05LjQyMS04Ni4zOTNjLTYuMTExLTM0LjQ2OS0xMy44ODktODUuMDAyLTQzLjk4My0xMDcuNDY1IGMtMTcuNDA0LTEyLjk4OC0zOS45NDEtMTcuMjQ5LTU5Ljg2NS0yNS4wODFjLTkuNjk3LTMuODEtMTguMzg0LTcuNTk0LTI2LjUzNy0xMS45MDFjLTI3LjUxOCwzMC4xNzYtNjMuNCw0NS45NjItMTA1LjE4Niw0NS45NjQgYy00MS43NzQsMC03Ny42NTItMTUuNzg2LTEwNS4xNjctNDUuOTY0Yy04LjE1Myw0LjMwOC0xNi44NCw4LjA5My0yNi41MzcsMTEuOTAxYy0xOS45MjQsNy44MzItNDIuNDYxLDEyLjA5Mi01OS44NjMsMjUuMDgxIGMtMzAuMDk2LDIyLjQ2My0zNy44NzMsNzIuOTk2LTQzLjk4MywxMDcuNDY1Yy01LjA0NSwyOC40NTQtOC40MzMsNTcuNDg5LTkuNDIyLDg2LjM5MwljLTAuNzY2LDIyLjM4NywxMC4yODgsMjUuNTI1LDI5LjAxNywzMi4yODRjMjMuNDUzLDguNDU4LDQ3LjY2NiwxNC43MzcsNzIuMDQxLDE5Ljg4NGM0Ny4wNzcsOS45NDEsOTUuNjAzLDE3LjU4MiwxNDMuOTIxLDE3LjkyNCBjNDguMzE4LTAuMzQzLDk2Ljg0NC03Ljk4MywxNDMuOTIxLTE3LjkyNGMyNC4zNzUtNS4xNDUsNDguNTktMTEuNDI0LDcyLjA0MS0xOS44ODQJQzU0MC42OTQsNTY3LjQzNSw1NTEuNzQ3LDU2NC4yOTcsNTUwLjk4MSw1NDEuOTA4eiIvPjwvZz48L3N2Zz4=') no-repeat center} #wpmchimpa .wpmc-ficon [wpmcfield="LNAME"] ~ .inputicon { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMzZDNkM2QiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNjEyIDYxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDYxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBhdGggZD0iTTMwNi4wMDEsMzI1Ljk4OGM5MC41NjMtMC4wMDUsMTIzLjE0Ny05MC42ODIsMTMxLjY3OS0xNjUuMTY3QzQ0OC4xODgsNjkuMDYsNDA0Ljc5OSwwLDMwNi4wMDEsMCBjLTk4Ljc4MiwwLTE0Mi4xOTUsNjkuMDU1LTEzMS42NzksMTYwLjgyQzE4Mi44NjIsMjM1LjMwNCwyMTUuNDM2LDMyNS45OTUsMzA2LjAwMSwzMjUuOTg4eiIvPjxwYXRoIGQ9Ik01NTAuOTgxLDU0MS45MDhjLTAuOTktMjguOTA0LTQuMzc3LTU3LjkzOS05LjQyMS04Ni4zOTNjLTYuMTExLTM0LjQ2OS0xMy44ODktODUuMDAyLTQzLjk4My0xMDcuNDY1IGMtMTcuNDA0LTEyLjk4OC0zOS45NDEtMTcuMjQ5LTU5Ljg2NS0yNS4wODFjLTkuNjk3LTMuODEtMTguMzg0LTcuNTk0LTI2LjUzNy0xMS45MDFjLTI3LjUxOCwzMC4xNzYtNjMuNCw0NS45NjItMTA1LjE4Niw0NS45NjQgYy00MS43NzQsMC03Ny42NTItMTUuNzg2LTEwNS4xNjctNDUuOTY0Yy04LjE1Myw0LjMwOC0xNi44NCw4LjA5My0yNi41MzcsMTEuOTAxYy0xOS45MjQsNy44MzItNDIuNDYxLDEyLjA5Mi01OS44NjMsMjUuMDgxIGMtMzAuMDk2LDIyLjQ2My0zNy44NzMsNzIuOTk2LTQzLjk4MywxMDcuNDY1Yy01LjA0NSwyOC40NTQtOC40MzMsNTcuNDg5LTkuNDIyLDg2LjM5MwljLTAuNzY2LDIyLjM4NywxMC4yODgsMjUuNTI1LDI5LjAxNywzMi4yODRjMjMuNDUzLDguNDU4LDQ3LjY2NiwxNC43MzcsNzIuMDQxLDE5Ljg4NGM0Ny4wNzcsOS45NDEsOTUuNjAzLDE3LjU4MiwxNDMuOTIxLDE3LjkyNCBjNDguMzE4LTAuMzQzLDk2Ljg0NC03Ljk4MywxNDMuOTIxLTE3LjkyNGMyNC4zNzUtNS4xNDUsNDguNTktMTEuNDI0LDcyLjA0MS0xOS44ODQJQzU0MC42OTQsNTY3LjQzNSw1NTEuNzQ3LDU2NC4yOTcsNTUwLjk4MSw1NDEuOTA4eiIvPjwvZz48L3N2Zz4=') no-repeat center} #wpmchimpa .wpmchimpa-field textarea, #wpmchimpa .wpmchimpa-field select, #wpmchimpa input[type="text"]{ text-align: left; width: 100%; height: 40px; border-radius:3px; background: #fff; padding: 0 10px; color: #353535; font-size:17px; outline:0; display: block; border: 1px solid #efefef; font-family:Tahoma, Geneva, sans-serif;font-size:15px;color:#696565;} #wpmchimpa .wpmchimpa-field.wpmchimpa-multidrop select{ height: 100px; } #wpmchimpa .wpmchimpa-field.wpmchimpa-drop:before{ content: ''; width: 40px; height: 40px; position: absolute; right: 0; top: 0; pointer-events: none; background: no-repeat center; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMwMDAiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgOTQuODU5IDk0Ljg1OSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTQuODU5IDk0Ljg1OSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjMxMiw0MS43NTdoNjAuMjM2YzAuNzcsMCwxLjQ2OS0wLjQ0LDEuODAyLTEuMTMzYzAuMzM0LTAuNjkxLDAuMjQxLTEuNTE0LTAuMjM3LTIuMTE0TDQ4Ljk5NCwwLjc1MyBDNDguNjE0LDAuMjc3LDQ4LjAzOSwwLDQ3LjQzMSwwcy0xLjE4NCwwLjI3Ny0xLjU2MywwLjc1M0wxNS43NDgsMzguNTFjLTAuNDc5LDAuNjAxLTAuNTcyLDEuNDIzLTAuMjM4LDIuMTE0IEMxNS44NDMsNDEuMzE3LDE2LjU0Miw0MS43NTcsMTcuMzEyLDQxLjc1N3oiLz4gPHBhdGggZD0iTTc3LjU0Nyw1My4xMDJIMTcuMzEyYy0wLjc2OSwwLTEuNDY5LDAuNDM5LTEuODAyLDEuMTMzYy0wLjMzNCwwLjY5MS0wLjI0MSwxLjUxNCwwLjIzOCwyLjExM2wzMC4xMTksMzcuNzU4IGMwLjM4LDAuNDc2LDAuOTU1LDAuNzUzLDEuNTYzLDAuNzUzczEuMTg0LTAuMjc3LDEuNTYzLTAuNzUzTDc5LjExLDU2LjM0OGMwLjQ3OS0wLjYwMSwwLjU3MS0xLjQyMiwwLjIzNy0yLjExMyBDNzkuMDE2LDUzLjU0MSw3OC4zMTcsNTMuMTAyLDc3LjU0Nyw1My4xMDJ6Ii8+PC9zdmc+'); } #wpmchimpa input[type="text"] ~ .inputlabel{ position: absolute; top: 0; left: 0; right: 0; pointer-events: none; width: 100%; line-height: 40px; color: rgba(0,0,0,0.6); font-size: 17px; font-weight:500; padding: 0 10px; white-space: nowrap; font-family:Tahoma, Geneva, sans-serif;font-size:15px;color:#696565;} #wpmchimpa input[type="text"]:valid + .inputlabel{ display: none; } #wpmchimpa select.wpmcerror, #wpmchimpa input[type="text"].wpmcerror{ border-color: red; } #wpmchimpa .wpmchimpa-check, #wpmchimpa .wpmchimpa-radio{ clear: both; } #wpmchimpa .wpmchimpa-check *, #wpmchimpa .wpmchimpa-radio *{ color: #fff; font-family:Tahoma, Geneva, sans-serif;font-size:14px;font-weight:normal;font-style:normal;color:#3d3d3d;} #wpmchimpa .wpmchimpa-item{ width:100%; display: inline-block; vertical-align: top; } #wpmchimpa .wpmchimpa-item input { display: none; } #wpmchimpa .wpmchimpa-item span { cursor: pointer; display: inline-block; position: relative; padding-left: 35px; line-height: 20px; margin-right: 10px; } #wpmchimpa .wpmchimpa-item span:before, #wpmchimpa .wpmchimpa-item span:after { content: ''; display: inline-block; width: 12px; height: 12px; left: 0; top: 4px; position: absolute; } #wpmchimpa .wpmchimpa-item span:before { border:1px solid #ccc; border-radius: 1px; background-color: #fff; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border: 1px solid#f34b38;background: #ffffff;} #wpmchimpa .wpmchimpa-item input[type='checkbox'] + span:hover:after, #wpmchimpa input[type='checkbox']:checked + span:after { content:''; width: 14px; height: 14px; background: no-repeat center; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMwMDAwMDAiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDIzMCAyMzAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIzMCAyMzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik05Mi4zNTYsMjIzLjU0OWM3LjQxLDcuNSwyMy45MTQsNS4wMTQsMjUuNjkxLTYuNzc5YzExLjA1Ni03My4yMTcsNjYuMzc4LTEzNC45ODUsMTA4LjI0My0xOTMuMTg5IEMyMzcuODk4LDcuNDUyLDIxMS4yMDctNy44NywxOTkuNzUsOC4wNjdDMTYxLjQ5Myw2MS4yNDksMTEzLjI3NCwxMTcuMjEsOTQuNDEsMTgxLjc0NCBjLTIxLjU1Ny0yMi4wMzEtNDMuMjAxLTQzLjg1My02Ny4zNzktNjMuMjEyYy0xNS4zMTItMTIuMjY1LTM3LjIxNSw5LjM0My0yMS43MzgsMjEuNzM3IEMzNi43OTQsMTY1LjUwMSw2NC4wMTcsMTk0LjkyNCw5Mi4zNTYsMjIzLjU0OXoiLz48L3N2Zz4='); } #wpmchimpa .wpmchimpa-item input[type='checkbox']:not(:checked) + span:hover:after { opacity: 0.5; } #wpmchimpa .wpmchimpa-item input[type='radio'] + span:before { border-radius: 50%; width: 12px; height: 12px; top: 4px; } #wpmchimpa input[type='radio']:checked + span:after { background: #000000; width: 8px; height: 8px; top: 6px; left: 2px; border-radius: 50%; } #wpmchimpa .wpmcinfierr{ display: block; height: 10px; text-align: left; line-height: 10px; margin-bottom: -10px; font-size: 10px; color: red; pointer-events: none; font-family:Tahoma, Geneva, sans-serif;} #wpmchimpa .wpmchimpa-subs-button{ border-radius: 0 3px 3px 0; width: 100%; color: #fff; font-size: 17px; border: 1px solid #FA0B38; background-color: #FF1F43; height: 40px; line-height: 40px; text-align: center; cursor: pointer; position: relative; top: 0; font-family:Tahoma, Geneva, sans-serif;font-size:16px;font-weight:normal;font-style:normal;color:#ffffff;background-color:#f34b38;} #wpmchimpa .wpmchimpa-subs-button::before{ content: 'Подписаться'; } #wpmchimpa .wpmchimpa-subs-button:hover{ background-color: #FA0B38; color:#ffffff;background-color:#75c462;} #wpmchimpa .wpmchimpa-subs-button.subsicon:before{ padding-left: 40px; } #wpmchimpa .wpmchimpa-subs-button.subsicon::after{ content:''; position: absolute; height: 40px; width: 40px; top: 0; left: 0; pointer-events: none; } .wpmchimpa-overlay-bg.signalshow .wpmchimpa-subs-button::after, .wpmchimpa-overlay-bg.signalshow .wpmchimpa-subs-button::before{ display: none; } #wpmchimpa-main .wpmchimpa-signal { display: none; z-index: 1; top: 5px; left: calc(50% - 20px); position: absolute; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } .wpmchimpa-overlay-bg.signalshow #wpmchimpa-main .wpmchimpa-signal { display: inline-block; } #wpmchimpa-main .wpmchimpa-feedback{ text-align: center; position: relative; color: #ccc; font-size: 10px; height: 12px; margin-top: -12px; font-family:Tahoma, Geneva, sans-serif;color:#3d3d3d;} #wpmchimpa-main .wpmchimpa-tag{ margin: 5px auto; } #wpmchimpa-main .wpmchimpa-tag, #wpmchimpa-main .wpmchimpa-tag *{ color:#fff; font-size: 10px; font-family:Tahoma, Geneva, sans-serif;font-size:10px;color:#3d3d3d;} #wpmchimpa-main .wpmchimpa-tag:before{ content:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMzZDNkM2QiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTBweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTQxNy41NjYsMjA5LjgzaC05LjQ4NHYtNDQuMzg4YzAtODIuMDk5LTY1LjE1MS0xNTAuNjgxLTE0Ni41ODItMTUyLjE0NWMtMi4yMjQtMC4wNC02LjY3MS0wLjA0LTguODk1LDAgYy04MS40MzIsMS40NjQtMTQ2LjU4Miw3MC4wNDYtMTQ2LjU4MiwxNTIuMTQ1djQ0LjM4OGgtOS40ODVDODEuOTIyLDIwOS44Myw3MCwyMjQuOTEyLDcwLDI0My41Mzl2MjIyLjYzMiAgQzcwLDQ4NC43NzcsODEuOTIyLDUwMCw5Ni41MzksNTAwaDMyMS4wMjhjMTQuNjE3LDAsMjYuNTM5LTE1LjIyMywyNi41MzktMzMuODI5VjI0My41MzkgIEM0NDQuMTA1LDIyNC45MTIsNDMyLjE4NCwyMDkuODMsNDE3LjU2NiwyMDkuODN6IE0yODcuMTI5LDM1NC42Mjl2NjcuMjdjMCw3LjcwNC02LjQ0OSwxNC4yMjItMTQuMTU5LDE0LjIyMmgtMzEuODM0ICBjLTcuNzEsMC0xNC4xNTktNi41MTgtMTQuMTU5LTE0LjIyMnYtNjcuMjdjLTcuNDc3LTcuMzYxLTExLjgzLTE3LjUzNy0xMS44My0yOC43OTVjMC0yMS4zMzQsMTYuNDkxLTM5LjY2NiwzNy40NTktNDAuNTEyICBjMi4yMjItMC4wOSw2LjY3My0wLjA5LDguODk1LDBjMjAuOTY4LDAuODQ2LDM3LjQ1OSwxOS4xNzgsMzcuNDU5LDQwLjUxMkMyOTguOTU5LDMzNy4wOTIsMjk0LjYwNSwzNDcuMjY4LDI4Ny4xMjksMzU0LjYyOXogTTM0NS41NzIsMjA5LjgzSDI2MS41aC04Ljg5NWgtODQuMDcydi00NC4zODhjMC00OC45MDUsMzkuNzQ0LTg5LjM0Miw4OC41MTktODkuMzQyczg4LjUyLDQwLjQzNyw4OC41Miw4OS4zNDJWMjA5LjgzeiIvPjwvc3ZnPg=='); margin: 5px; top: 1px; position:relative; } #wpmchimpa-main .wpmchimpa-social{ display: inline-block; margin: 12px auto 0; height: 90px; width: 100%; background: rgba(75, 75, 75, 0.3); box-shadow: 0px 1px 1px 1px rgba(116, 116, 116, 0.94); } #wpmchimpa-main .wpmchimpa-social::before{ content: 'Subscribe with'; font-size: 13px; color: #ADACB2; width: 100%; display: block; margin: 15px auto 5px; } #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc{ display: inline-block; width:40px; height: 40px; border-radius: 2px; cursor: pointer; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; -webkit-backface-visibility:hidden; border:1px solid #262E43; border-color: #ffffff;} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc::before{ content: ''; display: block; width:40px; height: 40px; background: no-repeat center; } #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-fb { display:none;} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-fb::before { background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI5Ni4yOTYsNTEySDIwMC4zNlYyNTZoLTY0di04OC4yMjVsNjQtMC4wMjlsLTAuMTA0LTUxLjk3NkMyMDAuMjU2LDQzLjc5NCwyMTkuNzczLDAsMzA0LjU1NiwwaDcwLjU4OHY4OC4yNDJoLTQ0LjExNSBjLTMzLjAxNiwwLTM0LjYwNCwxMi4zMjgtMzQuNjA0LDM1LjM0MmwtMC4xMzEsNDQuMTYyaDc5LjM0NmwtOS4zNTQsODguMjI1TDI5Ni4zNiwyNTZMMjk2LjI5Niw1MTJ6Ii8+PC9zdmc+')} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-fb:hover:before { background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMyZDYwOWIiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI5Ni4yOTYsNTEySDIwMC4zNlYyNTZoLTY0di04OC4yMjVsNjQtMC4wMjlsLTAuMTA0LTUxLjk3NkMyMDAuMjU2LDQzLjc5NCwyMTkuNzczLDAsMzA0LjU1NiwwaDcwLjU4OHY4OC4yNDJoLTQ0LjExNSBjLTMzLjAxNiwwLTM0LjYwNCwxMi4zMjgtMzQuNjA0LDM1LjM0MmwtMC4xMzEsNDQuMTYyaDc5LjM0NmwtOS4zNTQsODguMjI1TDI5Ni4zNiwyNTZMMjk2LjI5Niw1MTJ6Ii8+PC9zdmc+')} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-gp { display:none;} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-gp:before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI3My4zNzIsMzAyLjQ5OGMtNS4wNDEtNi43NjItMTAuNjA4LTEzLjA0NS0xNi43LTE4Ljg0MmMtNi4wOTEtNS44MDQtMTIuMTgzLTExLjA4OC0xOC4yNzEtMTUuODQ1IGMtNi4wOTItNC43NTctMTEuNjU5LTkuMzI5LTE2LjcwMi0xMy43MDljLTUuMDQyLTQuMzc0LTkuMTM1LTguOTQ1LTEyLjI3NS0xMy43MDJjLTMuMTQtNC43NTctNC43MTEtOS42MS00LjcxMS0xNC41NTggYzAtNi44NTUsMi4xOS0xMy4yNzgsNi41NjctMTkuMjc0YzQuMzc3LTUuOTk2LDkuNzA3LTExLjc5OSwxNS45ODYtMTcuNDE3YzYuMjgtNS42MTcsMTIuNTU5LTExLjc1MywxOC44NDQtMTguNDE1IGM2LjI3Ni02LjY2NSwxMS42MDQtMTUuNDY1LDE1Ljk4NS0yNi40MTJjNC4zNzMtMTAuOTQ0LDYuNTYzLTIzLjQ1OCw2LjU2My0zNy41NDJjMC0xNi43NS0zLjcxMy0zMi44MzUtMTEuMTM2LTQ4LjI1IGMtNy40MjMtMTUuNDE4LTE3Ljg5LTI3LjQxMi0zMS40MDUtMzUuOTc2aDM4LjU0TDMwMy4yLDBIMTc4LjQ0MWMtMTcuNjk5LDAtMzUuNDk4LDEuOTA2LTUzLjM4NCw1LjcyIGMtMjYuNDUzLDUuOS00OC43MjMsMTkuMzY4LTY2LjgwNiw0MC4zOTdDNDAuMTcxLDY3LjE1LDMxLjEyOSw5MC45OSwzMS4xMjksMTE3LjYzN2MwLDI4LjE3MSwxMC4xMzgsNTEuNTgzLDMwLjQwNiw3MC4yMzMgYzIwLjI2OSwxOC42NDksNDQuNTg1LDI3Ljk3OCw3Mi45NDUsMjcuOTc4YzUuNzEsMCwxMi4zNzEtMC40NzgsMTkuOTg1LTEuNDI3Yy0wLjM4MSwxLjUyMS0xLjA0MywzLjU2Ny0xLjk5Nyw2LjEzNiBzLTEuNzE1LDQuNjItMi4yODYsNi4xNGMtMC41NywxLjUyMS0xLjA0NywzLjM3NS0xLjQyNSw1LjU2NmMtMC4zODIsMi4xOS0wLjU3MSw0LjQyOC0wLjU3MSw2LjcxIGMwLDEyLjU2Myw2LjA4NiwyNi43NDQsMTguMjcxLDQyLjU0MWMtMTQuNDY1LDAuMzg3LTI4LjczNywxLjY3LTQyLjgyNSwzLjg2Yy0xNC4wODQsMi4xOS0yOC44MzMsNS42MTYtNDQuMjUyLDEwLjI4IGMtMTUuNDE3LDQuNjYxLTI5LjIxNywxMS40Mi00MS4zOTYsMjAuMjdjLTEyLjE4Miw4Ljg1NC0yMS4zMTcsMTkuMzY2LTI3LjQwOCwzMS41NDlDMy41MzMsMzYxLjU1OSwwLjAxLDM3NC40MDUsMC4wMSwzODYuMDE3IGMwLDEyLjc1MSwyLjg1NywyNC4zMTQsOC41NjUsMzQuNjljNS43MDgsMTAuMzY5LDEzLjAzNSwxOC44NDIsMjEuOTgyLDI1LjQwNmM4Ljk0NSw2LjU3LDE5LjI3MywxMi4wODMsMzAuOTc4LDE2LjU2MiBjMTEuNzA0LDQuNDcsMjMuMzE1LDcuNjU5LDM0LjgyOSw5LjU2MmMxMS41MTYsMS45MDMsMjIuODg4LDIuODU0LDM0LjExOSwyLjg1NGM1MS4wMDcsMCw5MC45ODEtMTIuNDY0LDExOS45MDktMzcuMzk3IGMyNi42NDgtMjMuMjIzLDM5Ljk3MS01MC4wNjIsMzkuOTcxLTgwLjUxN2MwLTEwLjg1NS0xLjU3LTIwLjk4NC00LjcxMi0zMC40MDlDMjgyLjUxLDMxNy4zMzcsMjc4LjQyLDMwOS4yNTQsMjczLjM3MiwzMDIuNDk4eiBNMTYzLjMxMSwxOTguNzIyYy05LjcwNywwLTE4LjkzNy0yLjQ3NS0yNy42OTQtNy40MjZjLTguNzU3LTQuOTUtMTYuMTgtMTEuMzc0LTIyLjI3LTE5LjI3MyBjLTYuMDg4LTcuODk4LTExLjQxOC0xNi43OTYtMTUuOTg3LTI2LjY5NWMtNC41NjctOS44OTYtNy45NDQtMTkuNzkyLTEwLjEzNS0yOS42OTJjLTIuMTktOS44OTUtMy4yODQtMTkuMzE4LTMuMjg0LTI4LjI2NSBjMC0xOC4yNzEsNC44NTQtMzMuOTc0LDE0LjU2Mi00Ny4xMDhjOS43MDUtMTMuMTM0LDIzLjQxMS0xOS43MDEsNDEuMTEyLTE5LjcwMWMxMi41NjMsMCwyMy45MzUsMy44OTksMzQuMTE4LDExLjcwNCBjMTAuMTgzLDcuODA0LDE4LjE3NywxNy43MDEsMjMuOTg0LDI5LjY5MmM1LjgwMiwxMS45OTEsMTAuMjc3LDI0LjQwNywxMy40MTcsMzcuMjU3YzMuMTQsMTIuODQ3LDQuNzExLDI0Ljk4Myw0LjcxMSwzNi40MDMgYzAsMTkuMDM2LTQuMTM5LDM0LjMxNy0xMi40MTksNDUuODMzQzE5NS4xNDQsMTkyLjk2NCwxODEuNzc1LDE5OC43MjIsMTYzLjMxMSwxOTguNzIyeiBNMjQyLjI1MSw0MTMuMTIzIGMtNS4yMyw4Ljk0OS0xMi4zMTksMTUuOTQtMjEuMjY3LDIwLjk4MWMtOC45NDYsNS4wNDgtMTguNTA5LDguNzU4LTI4LjY5MywxMS4xNGMtMTAuMTgzLDIuMzg1LTIwLjg4OSwzLjU3Mi0zMi4xMiwzLjU3MiBjLTEyLjE4MiwwLTI0LjI3LTEuNDMxLTM2LjI1OC00LjI4NGMtMTEuOTktMi44NTEtMjMuNDU5LTcuMTg3LTM0LjQwMy0xMi45OTFjLTEwLjk0NC01LjgtMTkuNzk1LTEzLjc5OC0yNi41NTEtMjMuOTgyIGMtNi43NTctMTAuMTg0LTEwLjEzNS0yMS43NDQtMTAuMTM1LTM0LjY5YzAtMTEuNDE5LDIuNTY4LTIxLjYwMSw3LjcwOC0zMC41NWM1LjE0Mi04Ljk0NSwxMS43MDktMTYuMDg0LDE5LjcwMi0yMS40MDggYzcuOTk0LTUuMzMyLDE3LjMxOS05LjcxMywyNy45NzktMTMuMTMxYzEwLjY2LTMuNDMzLDIwLjkzNy01LjgwOCwzMC44MzMtNy4xMzljOS44OTUtMS4zMzUsMTkuOTg1LTEuOTk1LDMwLjI2Mi0xLjk5NSBjNi4yODMsMCwxMS4wNDMsMC4xOTEsMTQuMjc3LDAuNTY3YzEuMTQzLDAuNzY3LDQuMDQzLDIuNzU5LDguNzA4LDUuOTk2czcuODA0LDUuNDI4LDkuNDIzLDYuNTcgYzEuNjE1LDEuMTM3LDQuNTY3LDMuMzI2LDguODUsNi41NjNjNC4yODEsMy4yMzcsNy4zMjcsNS42NjEsOS4xMzUsNy4yNzljMS44MDMsMS42MTgsNC40MjEsNC4wNDUsNy44NDksNy4yNzkgYzMuNDI0LDMuMjM3LDUuOTQ4LDYuMDQzLDcuNTY2LDguNDIyYzEuNjE1LDIuMzc4LDMuNjE2LDUuMjgsNS45OTYsOC43MDJjMi4zOCwzLjQzMyw0LjA0Myw2LjcxNSw0Ljk5OCw5Ljg1NSBjMC45NDgsMy4xNDIsMS44NTQsNi41NjcsMi43MDcsMTAuMjc3YzAuODU1LDMuNzIsMS4yODMsNy41NjksMS4yODMsMTEuNTdDMjUwLjEwNSwzOTMuNzEzLDI0Ny40ODcsNDA0LjE4MiwyNDIuMjUxLDQxMy4xMjN6Ii8+IDxwb2x5Z29uIHBvaW50cz0iNDAxLjk5OCw3My4wODkgNDAxLjk5OCwwIDM2NS40NDksMCAzNjUuNDQ5LDczLjA4OSAyOTIuMzU4LDczLjA4OSAyOTIuMzU4LDEwOS42MzYgMzY1LjQ0OSwxMDkuNjM2ICAzNjUuNDQ5LDE4Mi43MjUgNDAxLjk5OCwxODIuNzI1IDQwMS45OTgsMTA5LjYzNiA0NzUuMDgxLDEwOS42MzYgNDc1LjA4MSw3My4wODkiLz48L3N2Zz4=')} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-gp:hover:before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNlYjQwMjYiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI3My4zNzIsMzAyLjQ5OGMtNS4wNDEtNi43NjItMTAuNjA4LTEzLjA0NS0xNi43LTE4Ljg0MmMtNi4wOTEtNS44MDQtMTIuMTgzLTExLjA4OC0xOC4yNzEtMTUuODQ1IGMtNi4wOTItNC43NTctMTEuNjU5LTkuMzI5LTE2LjcwMi0xMy43MDljLTUuMDQyLTQuMzc0LTkuMTM1LTguOTQ1LTEyLjI3NS0xMy43MDJjLTMuMTQtNC43NTctNC43MTEtOS42MS00LjcxMS0xNC41NTggYzAtNi44NTUsMi4xOS0xMy4yNzgsNi41NjctMTkuMjc0YzQuMzc3LTUuOTk2LDkuNzA3LTExLjc5OSwxNS45ODYtMTcuNDE3YzYuMjgtNS42MTcsMTIuNTU5LTExLjc1MywxOC44NDQtMTguNDE1IGM2LjI3Ni02LjY2NSwxMS42MDQtMTUuNDY1LDE1Ljk4NS0yNi40MTJjNC4zNzMtMTAuOTQ0LDYuNTYzLTIzLjQ1OCw2LjU2My0zNy41NDJjMC0xNi43NS0zLjcxMy0zMi44MzUtMTEuMTM2LTQ4LjI1IGMtNy40MjMtMTUuNDE4LTE3Ljg5LTI3LjQxMi0zMS40MDUtMzUuOTc2aDM4LjU0TDMwMy4yLDBIMTc4LjQ0MWMtMTcuNjk5LDAtMzUuNDk4LDEuOTA2LTUzLjM4NCw1LjcyIGMtMjYuNDUzLDUuOS00OC43MjMsMTkuMzY4LTY2LjgwNiw0MC4zOTdDNDAuMTcxLDY3LjE1LDMxLjEyOSw5MC45OSwzMS4xMjksMTE3LjYzN2MwLDI4LjE3MSwxMC4xMzgsNTEuNTgzLDMwLjQwNiw3MC4yMzMgYzIwLjI2OSwxOC42NDksNDQuNTg1LDI3Ljk3OCw3Mi45NDUsMjcuOTc4YzUuNzEsMCwxMi4zNzEtMC40NzgsMTkuOTg1LTEuNDI3Yy0wLjM4MSwxLjUyMS0xLjA0MywzLjU2Ny0xLjk5Nyw2LjEzNiBzLTEuNzE1LDQuNjItMi4yODYsNi4xNGMtMC41NywxLjUyMS0xLjA0NywzLjM3NS0xLjQyNSw1LjU2NmMtMC4zODIsMi4xOS0wLjU3MSw0LjQyOC0wLjU3MSw2LjcxIGMwLDEyLjU2Myw2LjA4NiwyNi43NDQsMTguMjcxLDQyLjU0MWMtMTQuNDY1LDAuMzg3LTI4LjczNywxLjY3LTQyLjgyNSwzLjg2Yy0xNC4wODQsMi4xOS0yOC44MzMsNS42MTYtNDQuMjUyLDEwLjI4IGMtMTUuNDE3LDQuNjYxLTI5LjIxNywxMS40Mi00MS4zOTYsMjAuMjdjLTEyLjE4Miw4Ljg1NC0yMS4zMTcsMTkuMzY2LTI3LjQwOCwzMS41NDlDMy41MzMsMzYxLjU1OSwwLjAxLDM3NC40MDUsMC4wMSwzODYuMDE3IGMwLDEyLjc1MSwyLjg1NywyNC4zMTQsOC41NjUsMzQuNjljNS43MDgsMTAuMzY5LDEzLjAzNSwxOC44NDIsMjEuOTgyLDI1LjQwNmM4Ljk0NSw2LjU3LDE5LjI3MywxMi4wODMsMzAuOTc4LDE2LjU2MiBjMTEuNzA0LDQuNDcsMjMuMzE1LDcuNjU5LDM0LjgyOSw5LjU2MmMxMS41MTYsMS45MDMsMjIuODg4LDIuODU0LDM0LjExOSwyLjg1NGM1MS4wMDcsMCw5MC45ODEtMTIuNDY0LDExOS45MDktMzcuMzk3IGMyNi42NDgtMjMuMjIzLDM5Ljk3MS01MC4wNjIsMzkuOTcxLTgwLjUxN2MwLTEwLjg1NS0xLjU3LTIwLjk4NC00LjcxMi0zMC40MDlDMjgyLjUxLDMxNy4zMzcsMjc4LjQyLDMwOS4yNTQsMjczLjM3MiwzMDIuNDk4eiBNMTYzLjMxMSwxOTguNzIyYy05LjcwNywwLTE4LjkzNy0yLjQ3NS0yNy42OTQtNy40MjZjLTguNzU3LTQuOTUtMTYuMTgtMTEuMzc0LTIyLjI3LTE5LjI3MyBjLTYuMDg4LTcuODk4LTExLjQxOC0xNi43OTYtMTUuOTg3LTI2LjY5NWMtNC41NjctOS44OTYtNy45NDQtMTkuNzkyLTEwLjEzNS0yOS42OTJjLTIuMTktOS44OTUtMy4yODQtMTkuMzE4LTMuMjg0LTI4LjI2NSBjMC0xOC4yNzEsNC44NTQtMzMuOTc0LDE0LjU2Mi00Ny4xMDhjOS43MDUtMTMuMTM0LDIzLjQxMS0xOS43MDEsNDEuMTEyLTE5LjcwMWMxMi41NjMsMCwyMy45MzUsMy44OTksMzQuMTE4LDExLjcwNCBjMTAuMTgzLDcuODA0LDE4LjE3NywxNy43MDEsMjMuOTg0LDI5LjY5MmM1LjgwMiwxMS45OTEsMTAuMjc3LDI0LjQwNywxMy40MTcsMzcuMjU3YzMuMTQsMTIuODQ3LDQuNzExLDI0Ljk4Myw0LjcxMSwzNi40MDMgYzAsMTkuMDM2LTQuMTM5LDM0LjMxNy0xMi40MTksNDUuODMzQzE5NS4xNDQsMTkyLjk2NCwxODEuNzc1LDE5OC43MjIsMTYzLjMxMSwxOTguNzIyeiBNMjQyLjI1MSw0MTMuMTIzIGMtNS4yMyw4Ljk0OS0xMi4zMTksMTUuOTQtMjEuMjY3LDIwLjk4MWMtOC45NDYsNS4wNDgtMTguNTA5LDguNzU4LTI4LjY5MywxMS4xNGMtMTAuMTgzLDIuMzg1LTIwLjg4OSwzLjU3Mi0zMi4xMiwzLjU3MiBjLTEyLjE4MiwwLTI0LjI3LTEuNDMxLTM2LjI1OC00LjI4NGMtMTEuOTktMi44NTEtMjMuNDU5LTcuMTg3LTM0LjQwMy0xMi45OTFjLTEwLjk0NC01LjgtMTkuNzk1LTEzLjc5OC0yNi41NTEtMjMuOTgyIGMtNi43NTctMTAuMTg0LTEwLjEzNS0yMS43NDQtMTAuMTM1LTM0LjY5YzAtMTEuNDE5LDIuNTY4LTIxLjYwMSw3LjcwOC0zMC41NWM1LjE0Mi04Ljk0NSwxMS43MDktMTYuMDg0LDE5LjcwMi0yMS40MDggYzcuOTk0LTUuMzMyLDE3LjMxOS05LjcxMywyNy45NzktMTMuMTMxYzEwLjY2LTMuNDMzLDIwLjkzNy01LjgwOCwzMC44MzMtNy4xMzljOS44OTUtMS4zMzUsMTkuOTg1LTEuOTk1LDMwLjI2Mi0xLjk5NSBjNi4yODMsMCwxMS4wNDMsMC4xOTEsMTQuMjc3LDAuNTY3YzEuMTQzLDAuNzY3LDQuMDQzLDIuNzU5LDguNzA4LDUuOTk2czcuODA0LDUuNDI4LDkuNDIzLDYuNTcgYzEuNjE1LDEuMTM3LDQuNTY3LDMuMzI2LDguODUsNi41NjNjNC4yODEsMy4yMzcsNy4zMjcsNS42NjEsOS4xMzUsNy4yNzljMS44MDMsMS42MTgsNC40MjEsNC4wNDUsNy44NDksNy4yNzkgYzMuNDI0LDMuMjM3LDUuOTQ4LDYuMDQzLDcuNTY2LDguNDIyYzEuNjE1LDIuMzc4LDMuNjE2LDUuMjgsNS45OTYsOC43MDJjMi4zOCwzLjQzMyw0LjA0Myw2LjcxNSw0Ljk5OCw5Ljg1NSBjMC45NDgsMy4xNDIsMS44NTQsNi41NjcsMi43MDcsMTAuMjc3YzAuODU1LDMuNzIsMS4yODMsNy41NjksMS4yODMsMTEuNTdDMjUwLjEwNSwzOTMuNzEzLDI0Ny40ODcsNDA0LjE4MiwyNDIuMjUxLDQxMy4xMjN6Ii8+IDxwb2x5Z29uIHBvaW50cz0iNDAxLjk5OCw3My4wODkgNDAxLjk5OCwwIDM2NS40NDksMCAzNjUuNDQ5LDczLjA4OSAyOTIuMzU4LDczLjA4OSAyOTIuMzU4LDEwOS42MzYgMzY1LjQ0OSwxMDkuNjM2ICAzNjUuNDQ5LDE4Mi43MjUgNDAxLjk5OCwxODIuNzI1IDQwMS45OTgsMTA5LjYzNiA0NzUuMDgxLDEwOS42MzYgNDc1LjA4MSw3My4wODkiLz48L3N2Zz4=')} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-ms { display:none;} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-ms::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMTcgMTciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE3IDE3IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNOC4wMjEsMS4zODV2Ni40MzdoOC43OTFWMC4xMjdMOC4wMjEsMS4zODV6IE0wLDcuODIyaDYuNjQ4VjEuNDk0TDAsMi40NDNWNy44MjJ6IE0wLDE0LjE3NSBsNi42NDgsMS4wMzFWOC42M0gwVjE0LjE3NXogTTguMDIxLDE1LjMyMWw4Ljc5MSwxLjM2NFY4LjYzSDguMDIxVjE1LjMyMXoiLz48L3N2Zz4=')} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-ms:hover:before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMwMEJDRjIiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMTcgMTciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE3IDE3IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNOC4wMjEsMS4zODV2Ni40MzdoOC43OTFWMC4xMjdMOC4wMjEsMS4zODV6IE0wLDcuODIyaDYuNjQ4VjEuNDk0TDAsMi40NDNWNy44MjJ6IE0wLDE0LjE3NSBsNi42NDgsMS4wMzFWOC42M0gwVjE0LjE3NXogTTguMDIxLDE1LjMyMWw4Ljc5MSwxLjM2NFY4LjYzSDguMDIxVjE1LjMyMXoiLz48L3N2Zz4=')} #wpmchimpa-main .wpmchimpa-close-button{ position: absolute; display: block; top: 0; right: 0; width: 25px; text-align: center; cursor: pointer; } #wpmchimpa-main .wpmchimpa-close-button::before{ content: "\00D7"; font-size: 25px; line-height: 25px; font-weight: 100; color: #999; opacity: 0.4; color:;} #wpmchimpa-main .wpmchimpa-close-button:hover:before{ opacity: 1; } #wpmchimpa-main .wpmchimpa-feedback.wpmchimpa-done{ font-size: 15px; margin: 10px; height: auto;} #wpmchimpa-main .wpmchimpa-feedback.wpmchimpa-done:before{ content:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSIxNDIuOCwzMjMuODUgMzUuNywyMTYuNzUgMCwyNTIuNDUgMTQyLjgsMzk1LjI1IDQ0OC44LDg5LjI1IDQxMy4xLDUzLjU1Ii8+PC9zdmc+'); width: 40px; height: 40px; border-radius: 20px; line-height: 46px; display: block; background-color: #01E169; margin: 40px auto; } .wpmc_2col #wpmchimpa .wpmc_colsplit{ width: calc(50% - 5px); display: inline-block; float: left; } .wpmc_2col #wpmchimpa .wpmc_coleven{ margin-left: 10px; } @media only screen and (max-width: 600px){ .wpmc_2col #wpmchimpa .wpmc_colsplit{ width: 100%; margin-left: 0; } } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } .animatedout { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } </style> <div class="wpmchimpa-reset wpmchimpa-overlay-bg wpmchimpselector chimpmatecss"> <div class="wpmchimpa-maina bounceInDown animated" wpmcexitanim> <div class="wpmchimpa-mainc"> <div id="wpmchimpa-main"> <div id="wpmchimpa-newsletterform" class="wpmchimpa-wrapper"> <div class="wpmchimpa" id="wpmchimpa"> <h3>La cloche.</h3> <div class="wpmchimpa_para"><div style="text-align: center;">Il y a ceux qui ont lu cette nouvelle devant vous.</div><div style="text-align: center;">Abonnez-vous pour recevoir des articles frais. <img src="http://" loading=lazy loading=lazy></div></div> <form wpmc_suc wpmc_msg="Спасибо! ПРОВЕРЬТЕ ПОЧТУ" action="" method="post"> <input type="hidden" name="action" value="wpmchimpa_add_email_ajax"/> <input type="hidden" name="wpmcform" value="1"/> <div class="formbox wpmchimpa-field"><div class="wpmchimpa-text wpmc-ficon"><input type="text" name="email" wpmctype="email" wpmcfield="email" wpmcreq="true" required/><span class="inputlabel">E-mail</span><span class="inputicon"></span><div class="wpmcinfierr" wpmcerr="email"></div></div><div class="wpmchimpa-subsc"><div class="wpmchimpa-subs-button"></div><div class="wpmchimpa-signal"><style type="text/css">#wpmchimpa-main .sp8 { margin: 0 auto;width: 50px;height: 30px;} #wpmchimpa-main .sp8 > div { background-color: #3d3d3d;margin-left: 3px;height: 100%;width: 6px;display: inline-block;-webkit-animation: wpmchimpa-mainsp8 1.2s infinite ease-in-out;animation: wpmchimpa-mainsp8 1.2s infinite ease-in-out;} #wpmchimpa-main .sp8 .sp82 { -webkit-animation-delay: -1.1s;animation-delay: -1.1s;} #wpmchimpa-main .sp8 .sp83 { -webkit-animation-delay: -1.0s;animation-delay: -1.0s;} #wpmchimpa-main .sp8 .sp84 { -webkit-animation-delay: -0.9s;animation-delay: -0.9s;} #wpmchimpa-main .sp8 .sp85 { -webkit-animation-delay: -0.8s;animation-delay: -0.8s;} @-webkit-keyframes wpmchimpa-mainsp8 { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } }@keyframes wpmchimpa-mainsp8 { 0%, 40%, 100% { transform: scaleY(0.4);-webkit-transform: scaleY(0.4);} 20% { transform: scaleY(1.0);-webkit-transform: scaleY(1.0);} }</style><div class="sp8"><div class="sp81"></div><div class="sp82"></div><div class="sp83"></div><div class="sp84"></div><div class="sp85"></div></div></div></div><div style="clear:both"></div></div><div class="wpmchimpa-field wpmchimpa-text wpmc_colsplit wpmc-ficon"><input type="text" name="merge_fields[FNAME]" wpmctype="text" wpmcfield="FNAME" wpmcreq="true" required/><span class="inputlabel">Nom</span><span class="inputicon"></span><div class="wpmcinfierr" wpmcerr="FNAME"></div></div><div class="wpmchimpa-field wpmchimpa-text wpmc_colsplit wpmc-ficon"><input type="text" name="merge_fields[LNAME]" wpmctype="text" wpmcfield="LNAME" wpmcreq="true" required/><span class="inputlabel">Nom de famille</span><span class="inputicon"></span><div class="wpmcinfierr" wpmcerr="LNAME"></div></div><div class="wpmchimpa-field wpmchimpa-radio"><div class="wpmchimpa-itemh">Comment voulez-vous lire la cloche</div><div class="wpmchimpa-itemb"><label class="wpmchimpa-item"><input type="radio" name="group[f899931c09]" value="a22E2103B4." wpmctype="radio" wpmcfield="f899931c09" wpmcreq="true"><span>Deux fois par jour</span></label><label class="wpmchimpa-item"><input type="radio" name="group[f899931c09]" value="4AB55DE31A." wpmctype="radio" wpmcfield="f899931c09" wpmcreq="true"><span>Newsletter matin</span></label><label class="wpmchimpa-item"><input type="radio" name="group[f899931c09]" value="e386C1935E." wpmctype="radio" wpmcfield="f899931c09" wpmcreq="true"><span>Bulletin de soirée</span></label></div><div class="wpmcinfierr" wpmcerr="f899931c09"></div></div> <div style="clear:both"></div> <div class="wpmchimpa-tag">Sans spam</div> </form> <div class="wpmchimpa-feedback" wpmcerr="gen"></div> </div> </div> <div class="wpmchimpa-close-button"></div> </div> </div> </div> </div><script data-cfasync="false" src="/cdn-cgi/scripts/af2821b0/cloudflare-static/email-decode.min.js"></script><script type='text/javascript' src='https://qipu.ru/wp-content/themes/authentic/js/vendors.min.js?ver=201710093'></script> <script type='text/javascript'> /* <![CDATA[ */ var translation = { "next":"Next","previous":"Previous"} ; /* ]]> */ </script> <script type='text/javascript' src='https://qipu.ru/wp-content/themes/authentic/js/scripts.js?ver=201710093'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=9.9.9'></script> <script type='text/javascript' src='https://qipu.ru/wp-content/plugins/chimpmatepro/public/assets/js/public.js?ver=1.3.2'></script> </body> </html>