Einführung in HTML und CSS für Einsteiger
Ausgewähltes Thema: Einführung in HTML und CSS für Einsteiger. Starte heute deine Reise ins Web – freundlich erklärt, praxisnah gezeigt und mit kleinen Aha-Momenten, die dir Selbstvertrauen geben. Abonniere, stelle Fragen, wachse mit jeder Zeile Code.
Was sind HTML und CSS?
HTML beschreibt die Struktur deiner Inhalte: Überschriften, Absätze, Links, Bilder. Denk an ein gut sortiertes Notizbuch, in dem alles seinen Platz hat. Kommentiere gern unten, welche Elemente dir zuerst begegnet sind.
Was sind HTML und CSS?
CSS verleiht deiner Struktur Persönlichkeit: Farben, Abstände, Schriften, Layouts. Ein schlichtes Grundgerüst wird zur einladenden Seite. Probiere Farben aus, teile Screenshots, und frage die Community nach Feedback zu deinem Stil.
Die minimale HTML-Struktur
Beginne mit , dann , und . Füge eine hinzu, damit dein Tab sinnvoll benannt ist. Speichere als index.html. Teile deine erste Datei im Kommentarbereich, wir feiern mit. </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-55319263 e-con-full e-flex e-con e-child" data-id="55319263" data-element_type="container">
<div class="elementor-element elementor-element-c3106efa e-con-full e-flex e-con e-child" data-id="c3106efa" data-element_type="container">
<div class="elementor-element elementor-element-54540709 elementor-widget elementor-widget-image" data-id="54540709" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img loading="lazy" decoding="async" width="1024" height="682" src="https://montavistavalues.com/wp-content/uploads/2025/03/17e2a6050ec954d8-1024x682.jpeg" class="attachment-large size-large wp-image-535" alt="" srcset="https://montavistavalues.com/wp-content/uploads/2025/03/17e2a6050ec954d8-1024x682.jpeg 1024w, https://montavistavalues.com/wp-content/uploads/2025/03/17e2a6050ec954d8-768x512.jpeg 768w, https://montavistavalues.com/wp-content/uploads/2025/03/17e2a6050ec954d8-300x200.jpeg 300w, https://montavistavalues.com/wp-content/uploads/2025/03/17e2a6050ec954d8.jpeg 1380w" sizes="(max-width: 1024px) 100vw, 1024px" /> </div>
</div>
</div>
<div class="elementor-element elementor-element-3d0cca12 e-con-full e-flex e-con e-child" data-id="3d0cca12" data-element_type="container" data-settings="{"background_background":"classic"}">
<div class="elementor-element elementor-element-01eda84c elementor-widget elementor-widget-heading" data-id="01eda84c" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h3 class="elementor-heading-title elementor-size-default">Head und Body verstehen</h3> </div>
</div>
<div class="elementor-element elementor-element-03323139 m-0 elementor-widget elementor-widget-text-editor" data-id="03323139" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Im Head stehen Metadaten wie <meta charset="utf-8"> und Beschreibungen für Suchmaschinen. Im Body leben die sichtbaren Inhalte. Frage ruhig nach Beispielen, wenn dir ein Meta-Tag rätselhaft erscheint. </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-f8d14298 e-con-full e-flex e-con e-child" data-id="f8d14298" data-element_type="container">
<div class="elementor-element elementor-element-4bc3f880 e-con-full e-flex e-con e-child" data-id="4bc3f880" data-element_type="container">
<div class="elementor-element elementor-element-e5f1637f elementor-widget elementor-widget-image" data-id="e5f1637f" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img loading="lazy" decoding="async" width="1024" height="682" src="https://montavistavalues.com/wp-content/uploads/2025/03/4df8360c5899e7d0-1024x682.jpeg" class="attachment-large size-large wp-image-537" alt="" srcset="https://montavistavalues.com/wp-content/uploads/2025/03/4df8360c5899e7d0-1024x682.jpeg 1024w, https://montavistavalues.com/wp-content/uploads/2025/03/4df8360c5899e7d0-768x512.jpeg 768w, https://montavistavalues.com/wp-content/uploads/2025/03/4df8360c5899e7d0-300x200.jpeg 300w, https://montavistavalues.com/wp-content/uploads/2025/03/4df8360c5899e7d0.jpeg 1380w" sizes="(max-width: 1024px) 100vw, 1024px" /> </div>
</div>
</div>
<div class="elementor-element elementor-element-c10352c6 e-con-full e-flex e-con e-child" data-id="c10352c6" data-element_type="container" data-settings="{"background_background":"classic"}">
<div class="elementor-element elementor-element-d22dfa6e elementor-widget elementor-widget-heading" data-id="d22dfa6e" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h3 class="elementor-heading-title elementor-size-default">Im Browser testen und aktualisieren</h3> </div>
</div>
<div class="elementor-element elementor-element-c91389b8 m-0 elementor-widget elementor-widget-text-editor" data-id="c91389b8" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Öffne die Datei doppelt geklickt im Browser, aktualisiere nach Änderungen, und beobachte das Ergebnis. Nutze die Entwicklertools, um Elemente zu inspizieren. Berichte, welcher Browser bei dir gerade am besten funktioniert. </div>
</div>
</div>
</div>
</div>
</div>
<section class="elementor-section elementor-top-section elementor-element elementor-element-534172a0 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="534172a0" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-c262c3cd" data-id="c262c3cd" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-9a973df7 elementor-view-stacked elementor-shape-circle elementor-widget elementor-widget-icon" data-id="9a973df7" data-element_type="widget" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-fas-circle-notch" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M288 39.056v16.659c0 10.804 7.281 20.159 17.686 23.066C383.204 100.434 440 171.518 440 256c0 101.689-82.295 184-184 184-101.689 0-184-82.295-184-184 0-84.47 56.786-155.564 134.312-177.219C216.719 75.874 224 66.517 224 55.712V39.064c0-15.709-14.834-27.153-30.046-23.234C86.603 43.482 7.394 141.206 8.003 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.788 504 256c0-115.633-79.14-212.779-186.211-240.236C302.678 11.889 288 23.456 288 39.056z"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-3bea1da7 elementor-widget elementor-widget-heading" data-id="3bea1da7" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Semantisches HTML und Zugänglichkeit</h2> </div>
</div>
<div class="elementor-element elementor-element-427559ed elementor-widget elementor-widget-text-editor" data-id="427559ed" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Nutze <header>, <nav>, <main>, <section>, <article>, <footer>, um Bereiche zu kennzeichnen. So erkennt jeder die Bedeutung. Teile ein Beispiel, wie du einen Blogartikel mit <article> strukturierst. </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-36f0a27e" data-id="36f0a27e" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-27638dd6 elementor-view-stacked elementor-shape-circle elementor-widget elementor-widget-icon" data-id="27638dd6" data-element_type="widget" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-fas-circle-notch" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M288 39.056v16.659c0 10.804 7.281 20.159 17.686 23.066C383.204 100.434 440 171.518 440 256c0 101.689-82.295 184-184 184-101.689 0-184-82.295-184-184 0-84.47 56.786-155.564 134.312-177.219C216.719 75.874 224 66.517 224 55.712V39.064c0-15.709-14.834-27.153-30.046-23.234C86.603 43.482 7.394 141.206 8.003 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.788 504 256c0-115.633-79.14-212.779-186.211-240.236C302.678 11.889 288 23.456 288 39.056z"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-cc33c83c elementor-widget elementor-widget-heading" data-id="cc33c83c" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Semantisches HTML und Zugänglichkeit</h2> </div>
</div>
<div class="elementor-element elementor-element-a9d6f7a5 elementor-widget elementor-widget-text-editor" data-id="a9d6f7a5" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Alt-Texte für Bilder, sinnvolle Linktexte, Labels für Formulare und korrekte Überschriftenstruktur helfen allen. Teste mit der Tabulator-Taste. Frage nach Checklisten, wenn du unsicher bist, ob alles zugänglich ist. </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-aa745e16" data-id="aa745e16" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-eb1bbc0a elementor-view-stacked elementor-shape-circle elementor-widget elementor-widget-icon" data-id="eb1bbc0a" data-element_type="widget" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-fas-circle-notch" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M288 39.056v16.659c0 10.804 7.281 20.159 17.686 23.066C383.204 100.434 440 171.518 440 256c0 101.689-82.295 184-184 184-101.689 0-184-82.295-184-184 0-84.47 56.786-155.564 134.312-177.219C216.719 75.874 224 66.517 224 55.712V39.064c0-15.709-14.834-27.153-30.046-23.234C86.603 43.482 7.394 141.206 8.003 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.788 504 256c0-115.633-79.14-212.779-186.211-240.236C302.678 11.889 288 23.456 288 39.056z"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-cbb48863 elementor-widget elementor-widget-heading" data-id="cbb48863" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Semantisches HTML und Zugänglichkeit</h2> </div>
</div>
<div class="elementor-element elementor-element-22140bb7 elementor-widget elementor-widget-text-editor" data-id="22140bb7" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Saubere Überschriftenhierarchie, beschreibende Titel und präzise Meta-Description unterstützen die Auffindbarkeit. Schreibe Inhalte für Menschen, nicht nur für Bots. Poste deine Meta-Description und lass dir Feedback geben. </div>
</div>
</div>
</div>
</div>
</section>
<div class="elementor-element elementor-element-33049c76 e-flex e-con-boxed e-con e-parent" data-id="33049c76" data-element_type="container">
<div class="e-con-inner">
<div class="elementor-element elementor-element-f6ff4f81 elementor-widget elementor-widget-heading" data-id="f6ff4f81" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">CSS-Grundlagen: Selektoren, Kaskade, Box-Modell</h2> </div>
</div>
<div class="elementor-element elementor-element-ba514f36 e-con-full e-flex e-con e-child" data-id="ba514f36" data-element_type="container">
<div class="elementor-element elementor-element-aa2ab462 e-con-full e-flex e-con e-child" data-id="aa2ab462" data-element_type="container">
<div class="elementor-element elementor-element-28d81c1a e-con-full e-flex e-con e-child" data-id="28d81c1a" data-element_type="container">
<div class="elementor-element elementor-element-e6f4fe82 e-con-full e-flex e-con e-child" data-id="e6f4fe82" data-element_type="container">
<div class="elementor-element elementor-element-e7bb725b elementor-view-default elementor-widget elementor-widget-icon" data-id="e7bb725b" data-element_type="widget" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-fas-star" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-2292c3ee elementor-widget elementor-widget-heading" data-id="2292c3ee" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h3 class="elementor-heading-title elementor-size-default">Selektoren, Klassen und IDs sicher anwenden</h3> </div>
</div>
<div class="elementor-element elementor-element-ec53ad96 elementor-widget elementor-widget-text-editor" data-id="ec53ad96" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Wähle Elemente per Tag, Klasse (.kachel) oder ID (#intro). Kombiniere Selektoren, um präzise zu stylen. Teile dein Lieblingsbeispiel, bei dem eine Klasse dein Styling-Problem elegant gelöst hat. </div>
</div>
</div>
<div class="elementor-element elementor-element-fe7ff463 e-con-full e-flex e-con e-child" data-id="fe7ff463" data-element_type="container">
<div class="elementor-element elementor-element-7d2a9d63 elementor-view-default elementor-widget elementor-widget-icon" data-id="7d2a9d63" data-element_type="widget" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-fas-star" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-77fed7ef elementor-widget elementor-widget-heading" data-id="77fed7ef" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h3 class="elementor-heading-title elementor-size-default">Kaskade und Spezifität im Griff</h3> </div>
</div>
<div class="elementor-element elementor-element-1fec6940 elementor-widget elementor-widget-text-editor" data-id="1fec6940" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Später definierte Regeln und spezifischere Selektoren gewinnen. Vermeide zu viele !important-Angaben. Nutze konsistente Klassen. Beschreibe im Kommentar, wann dich Spezifität überrascht hat und wie du es gelöst hast. </div>
</div>
</div>
<div class="elementor-element elementor-element-60600431 e-con-full e-flex e-con e-child" data-id="60600431" data-element_type="container">
<div class="elementor-element elementor-element-db217bc7 elementor-view-default elementor-widget elementor-widget-icon" data-id="db217bc7" data-element_type="widget" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-fas-star" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-f2063142 elementor-widget elementor-widget-heading" data-id="f2063142" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h3 class="elementor-heading-title elementor-size-default">Das Box-Modell verstehen</h3> </div>
</div>
<div class="elementor-element elementor-element-c8958963 elementor-widget elementor-widget-text-editor" data-id="c8958963" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Jedes Element hat Inhalt, Padding, Border, Margin. Mit box-sizing: border-box wird Rechnen leichter. Zeichne dir die Schichten auf und erzähle, welcher Aha-Moment dir beim Ausrichten geholfen hat. </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-8e123ae5 e-con-full e-flex e-con e-child" data-id="8e123ae5" data-element_type="container">
<div class="elementor-element elementor-element-21570335 elementor-widget elementor-widget-button" data-id="21570335" data-element_type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
<div class="elementor-button-wrapper">
<a class="elementor-button elementor-button-link elementor-size-sm" href="https://montavistavalues.com">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Auf Angebot antworten</span>
</span>
</a>
</div>
</div>
</div>
<div class="elementor-element elementor-element-c6262dbd elementor-widget elementor-widget-button" data-id="c6262dbd" data-element_type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
<div class="elementor-button-wrapper">
<a class="elementor-button elementor-button-link elementor-size-sm" href="https://montavistavalues.com">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Mehr erfahren</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-b549b46f e-con-full e-flex e-con e-child" data-id="b549b46f" data-element_type="container">
<div class="elementor-element elementor-element-13778597 elementor-widget elementor-widget-image" data-id="13778597" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img loading="lazy" decoding="async" width="1024" height="682" src="https://montavistavalues.com/wp-content/uploads/2025/03/608814ef06e3a339-1024x682.jpeg" class="attachment-large size-large wp-image-528" alt="" srcset="https://montavistavalues.com/wp-content/uploads/2025/03/608814ef06e3a339-1024x682.jpeg 1024w, https://montavistavalues.com/wp-content/uploads/2025/03/608814ef06e3a339-768x512.jpeg 768w, https://montavistavalues.com/wp-content/uploads/2025/03/608814ef06e3a339-300x200.jpeg 300w, https://montavistavalues.com/wp-content/uploads/2025/03/608814ef06e3a339.jpeg 1380w" sizes="(max-width: 1024px) 100vw, 1024px" /> </div>
</div>
</div>
</div>
</div>
</div>
<section class="elementor-section elementor-top-section elementor-element elementor-element-005db928 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="005db928" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-4968afda" data-id="4968afda" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-2e1beb4f elementor-widget elementor-widget-heading" data-id="2e1beb4f" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Layouts mit Flexbox und Grid</h2> </div>
</div>
<div class="elementor-element elementor-element-4d8030c9 elementor-widget elementor-widget-text-editor" data-id="4d8030c9" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Mit display: flex, justify-content und align-items ordnest du Inhalte schnell. Probiere eine horizontale Navigation. Teile einen Codeausschnitt, der dir ein nerviges Ausrichtungsproblem erspart hat. </div>
</div>
<div class="elementor-element elementor-element-f98ab56e elementor-view-default elementor-widget elementor-widget-icon" data-id="f98ab56e" data-element_type="widget" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-fas-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg> </div>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-92493ba1" data-id="92493ba1" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-70d2deef elementor-widget elementor-widget-image" data-id="70d2deef" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img loading="lazy" decoding="async" width="683" height="1024" src="https://montavistavalues.com/wp-content/uploads/2025/03/47ff4dfbe83089b3-1024x1536.jpeg" class="attachment-large size-large wp-image-540" alt="" srcset="https://montavistavalues.com/wp-content/uploads/2025/03/47ff4dfbe83089b3-1024x1536.jpeg 1024w, https://montavistavalues.com/wp-content/uploads/2025/03/47ff4dfbe83089b3-768x1152.jpeg 768w, https://montavistavalues.com/wp-content/uploads/2025/03/47ff4dfbe83089b3-300x450.jpeg 300w, https://montavistavalues.com/wp-content/uploads/2025/03/47ff4dfbe83089b3.jpeg 1333w" sizes="(max-width: 683px) 100vw, 683px" /> </div>
</div>
<div class="elementor-element elementor-element-5edcaa88 elementor-widget elementor-widget-image" data-id="5edcaa88" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img loading="lazy" decoding="async" width="1024" height="682" src="https://montavistavalues.com/wp-content/uploads/2025/03/74959d2ae531bcf7-1024x682.jpeg" class="attachment-large size-large wp-image-531" alt="" srcset="https://montavistavalues.com/wp-content/uploads/2025/03/74959d2ae531bcf7-1024x682.jpeg 1024w, https://montavistavalues.com/wp-content/uploads/2025/03/74959d2ae531bcf7-768x512.jpeg 768w, https://montavistavalues.com/wp-content/uploads/2025/03/74959d2ae531bcf7-300x200.jpeg 300w, https://montavistavalues.com/wp-content/uploads/2025/03/74959d2ae531bcf7.jpeg 1380w" sizes="(max-width: 1024px) 100vw, 1024px" /> </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-aea37167" data-id="aea37167" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-815f03e3 elementor-widget elementor-widget-heading" data-id="815f03e3" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Layouts mit Flexbox und Grid</h2> </div>
</div>
<div class="elementor-element elementor-element-597fd5ef elementor-widget elementor-widget-text-editor" data-id="597fd5ef" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Grid-template-columns, gap und grid-areas schaffen präzise Layouts. Starte mit zwei Spalten, erweitere später. Poste einen Screenshot deines ersten Grids, wir geben dir konstruktives Feedback. </div>
</div>
<div class="elementor-element elementor-element-464c767b elementor-view-default elementor-widget elementor-widget-icon" data-id="464c767b" data-element_type="widget" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-fas-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="elementor-section elementor-top-section elementor-element elementor-element-444670f3 elementor-section-content-top elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="444670f3" data-element_type="section">
<div class="elementor-container elementor-column-gap-wide">
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-a8373cf5" data-id="a8373cf5" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-cc609f4c elementor-widget elementor-widget-heading" data-id="cc609f4c" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Farben, Schriften und konsistentes Design</h2> </div>
</div>
<div class="elementor-element elementor-element-30b9352f elementor-widget elementor-widget-text-editor" data-id="30b9352f" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Nutze HSL für intuitive Anpassungen und prüfe Kontraste für Lesbarkeit. Halte dich an wenige Akzentfarben. Teile deine Palette, und wir empfehlen Verbesserungen für Barrierefreiheit und Harmonie. </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-f83c92e2" data-id="f83c92e2" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-e953d9ec elementor-widget elementor-widget-heading" data-id="e953d9ec" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Farben, Schriften und konsistentes Design</h2> </div>
</div>
<div class="elementor-element elementor-element-4fbf9be4 elementor-widget elementor-widget-text-editor" data-id="4fbf9be4" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Wähle gut lesbare Schriften, achte auf ausreichende x-Höhe, Zeilenhöhe und Zeichenabstand. Teste Systemschriften für Performance. Frag nach Font-Paarungen, wenn du unsicher bist, was zusammenpasst. </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-63cfa1e0" data-id="63cfa1e0" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-6a67d690 elementor-widget elementor-widget-heading" data-id="6a67d690" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Farben, Schriften und konsistentes Design</h2> </div>
</div>
<div class="elementor-element elementor-element-c46416af elementor-widget elementor-widget-text-editor" data-id="c46416af" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Definiere Farben, Abstände und Schriften in :root als Variablen. So bleibt dein Stil konsistent. Poste ein Snippet deiner Variablen und hole dir Tipps für klare Namensgebung. </div>
</div>
</div>
</div>
</div>
</section>
<section class="elementor-section elementor-top-section elementor-element elementor-element-843ef858 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="843ef858" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-e0e99f4f" data-id="e0e99f4f" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-c587abfe elementor-position-top elementor-widget elementor-widget-image-box" data-id="c587abfe" data-element_type="widget" data-widget_type="image-box.default">
<div class="elementor-widget-container">
<div class="elementor-image-box-wrapper"><figure class="elementor-image-box-img"><img decoding="async" src="https://montavistavalues.com/wp-content/plugins/elementor/assets/images/placeholder.png" title="" alt="" loading="lazy" /></figure><div class="elementor-image-box-content"><h3 class="elementor-image-box-title">This is the heading</h3><p class="elementor-image-box-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p></div></div> </div>
</div>
<div class="elementor-element elementor-element-1438c730 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="1438c730" data-element_type="widget" data-widget_type="divider.default">
<div class="elementor-widget-container">
<div class="elementor-divider">
<span class="elementor-divider-separator">
</span>
</div>
</div>
</div>
<div class="elementor-element elementor-element-faad6929 elementor-align-center elementor-widget elementor-widget-button" data-id="faad6929" data-element_type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
<div class="elementor-button-wrapper">
<a class="elementor-button elementor-button-link elementor-size-sm" href="https://montavistavalues.com">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Klicken Sie hier</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-74c0cbdc" data-id="74c0cbdc" data-element_type="column">
<div class="elementor-widget-wrap">
</div>
</div>
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-1816d62b" data-id="1816d62b" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-a1c4c2e3 elementor-position-top elementor-widget elementor-widget-image-box" data-id="a1c4c2e3" data-element_type="widget" data-widget_type="image-box.default">
<div class="elementor-widget-container">
<div class="elementor-image-box-wrapper"><figure class="elementor-image-box-img"><img decoding="async" src="https://montavistavalues.com/wp-content/plugins/elementor/assets/images/placeholder.png" title="" alt="" loading="lazy" /></figure><div class="elementor-image-box-content"><h3 class="elementor-image-box-title">This is the heading</h3><p class="elementor-image-box-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p></div></div> </div>
</div>
<div class="elementor-element elementor-element-f917d307 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="f917d307" data-element_type="widget" data-widget_type="divider.default">
<div class="elementor-widget-container">
<div class="elementor-divider">
<span class="elementor-divider-separator">
</span>
</div>
</div>
</div>
<div class="elementor-element elementor-element-f99b895a elementor-align-center elementor-widget elementor-widget-button" data-id="f99b895a" data-element_type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
<div class="elementor-button-wrapper">
<a class="elementor-button elementor-button-link elementor-size-sm" href="https://montavistavalues.com">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Klicken Sie hier</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="elementor-element elementor-element-f71deb65 e-flex e-con-boxed e-con e-parent" data-id="f71deb65" data-element_type="container">
<div class="e-con-inner">
<div class="elementor-element elementor-element-eb5db86f elementor-widget elementor-widget-google_maps" data-id="eb5db86f" data-element_type="widget" data-widget_type="google_maps.default">
<div class="elementor-widget-container">
<div class="elementor-custom-embed">
<iframe loading="lazy"
src="https://maps.google.com/maps?q=LVA-Hauptgeb%C3%A4ude%2C%2040215%20D%C3%BCsseldorf%2C%20Germany&t=m&z=10&output=embed&iwloc=near"
title="LVA-Hauptgebäude, 40215 Düsseldorf, Germany"
aria-label="LVA-Hauptgebäude, 40215 Düsseldorf, Germany"
></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-b892f812 e-flex e-con-boxed e-con e-parent" data-id="b892f812" data-element_type="container">
<div class="e-con-inner">
<div class="elementor-element elementor-element-71f61c1d elementor-nav-menu__align-justify elementor-nav-menu--dropdown-none elementor-widget elementor-widget-nav-menu" data-id="71f61c1d" data-element_type="widget" data-settings="{"layout":"horizontal","submenu_icon":{"value":"<svg class=\"e-font-icon-svg e-fas-caret-down\" viewBox=\"0 0 320 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\"><\/path><\/svg>","library":"fa-solid"}}" data-widget_type="nav-menu.default">
<div class="elementor-widget-container">
<nav aria-label="Menu" class="elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-horizontal e--pointer-underline e--animation-fade">
<ul id="menu-1-71f61c1d" class="elementor-nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-574"><a href="https://montavistavalues.com/geschaftsbedingungen/" class="elementor-item">Geschäftsbedingungen</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-575"><a href="https://montavistavalues.com/datenschutzrichtlinie/" class="elementor-item">Datenschutzrichtlinie</a></li>
</ul> </nav>
<nav class="elementor-nav-menu--dropdown elementor-nav-menu__container" aria-hidden="true">
<ul id="menu-2-71f61c1d" class="elementor-nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-574"><a href="https://montavistavalues.com/geschaftsbedingungen/" class="elementor-item" tabindex="-1">Geschäftsbedingungen</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-575"><a href="https://montavistavalues.com/datenschutzrichtlinie/" class="elementor-item" tabindex="-1">Datenschutzrichtlinie</a></li>
</ul> </nav>
</div>
</div>
</div>
</div>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/theme\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<!--copyscapeskip-->
<aside id="moove_gdpr_cookie_info_bar" class="moove-gdpr-info-bar-hidden moove-gdpr-align-center moove-gdpr-dark-scheme gdpr_infobar_postion_bottom" aria-label="GDPR Cookie Banner" style="display: none;">
<div class="moove-gdpr-info-bar-container">
<div class="moove-gdpr-info-bar-content">
<div class="moove-gdpr-cookie-notice">
<p>We are using cookies to give you the best experience on our website.</p>
<p>You can find out more about which cookies we are using or switch them off in <button tabindex="0" aria-haspopup="true" data-href="#moove_gdpr_cookie_modal" class="change-settings-button">settings</button>.</p>
<button class="moove-gdpr-infobar-close-btn gdpr-content-close-btn" aria-label="Close GDPR Cookie Banner">
<span class="gdpr-sr-only">Close GDPR Cookie Banner</span>
<i class="moovegdpr-arrow-close"></i>
</button>
</div>
<!-- .moove-gdpr-cookie-notice -->
<div class="moove-gdpr-button-holder">
<button class="mgbutton moove-gdpr-infobar-allow-all gdpr-fbo-0" aria-label="Accept" tabindex="1" >Accept</button>
<button class="mgbutton moove-gdpr-infobar-reject-btn gdpr-fbo-1 " tabindex="1" aria-label="Reject">Reject</button>
<button class="mgbutton moove-gdpr-infobar-settings-btn change-settings-button gdpr-fbo-2" aria-haspopup="true" data-href="#moove_gdpr_cookie_modal" tabindex="2" aria-label="Settings">Settings</button>
<button class="moove-gdpr-infobar-close-btn gdpr-fbo-3" aria-label="Close GDPR Cookie Banner" tabindex="3" >
<span class="gdpr-sr-only">Close GDPR Cookie Banner</span>
<i class="moovegdpr-arrow-close"></i>
</button>
</div>
<!-- .button-container -->
</div>
<!-- moove-gdpr-info-bar-content -->
</div>
<!-- moove-gdpr-info-bar-container -->
</aside>
<!-- #moove_gdpr_cookie_info_bar -->
<!--/copyscapeskip-->
<script>
const lazyloadRunObserver = () => {
const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
entries.forEach( ( entry ) => {
if ( entry.isIntersecting ) {
let lazyloadBackground = entry.target;
if( lazyloadBackground ) {
lazyloadBackground.classList.add( 'e-lazyloaded' );
}
lazyloadBackgroundObserver.unobserve( entry.target );
}
});
}, { rootMargin: '200px 0px 200px 0px' } );
lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
lazyloadBackgroundObserver.observe( lazyloadBackground );
} );
};
const events = [
'DOMContentLoaded',
'elementor/lazyload/observe',
];
events.forEach( ( event ) => {
document.addEventListener( event, lazyloadRunObserver );
} );
</script>
<link rel="preload" href="https://montavistavalues.com/wp-content/plugins/elementor/assets/css/widget-heading.min.css?ver=3.31.2" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="https://montavistavalues.com/wp-content/plugins/elementor/assets/css/widget-heading.min.css?ver=3.31.2" media="all"></noscript><link rel="preload" href="https://montavistavalues.com/wp-content/plugins/elementor/assets/css/widget-image.min.css?ver=3.31.2" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="https://montavistavalues.com/wp-content/plugins/elementor/assets/css/widget-image.min.css?ver=3.31.2" media="all"></noscript><link rel="preload" href="https://montavistavalues.com/wp-content/plugins/elementor/assets/css/widget-image-box.min.css?ver=3.31.2" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="https://montavistavalues.com/wp-content/plugins/elementor/assets/css/widget-image-box.min.css?ver=3.31.2" media="all"></noscript><link rel="preload" href="https://montavistavalues.com/wp-content/plugins/elementor/assets/css/widget-divider.min.css?ver=3.31.2" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="https://montavistavalues.com/wp-content/plugins/elementor/assets/css/widget-divider.min.css?ver=3.31.2" media="all"></noscript><link rel="preload" href="https://montavistavalues.com/wp-content/plugins/elementor/assets/css/widget-google_maps.min.css?ver=3.31.2" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="https://montavistavalues.com/wp-content/plugins/elementor/assets/css/widget-google_maps.min.css?ver=3.31.2" media="all"></noscript><link rel="preload" href="https://montavistavalues.com/wp-content/plugins/elementor-pro/assets/css/widget-nav-menu.min.css?ver=3.31.2" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="https://montavistavalues.com/wp-content/plugins/elementor-pro/assets/css/widget-nav-menu.min.css?ver=3.31.2" media="all"></noscript><script id="moove_gdpr_frontend-js-extra">
var moove_frontend_gdpr_scripts = {"ajaxurl":"https:\/\/montavistavalues.com\/wp-admin\/admin-ajax.php","post_id":"552","plugin_dir":"https:\/\/montavistavalues.com\/wp-content\/plugins\/gdpr-cookie-compliance","show_icons":"all","is_page":"1","ajax_cookie_removal":"false","strict_init":"2","enabled_default":{"strict":2,"third_party":0,"advanced":0,"performance":0,"preference":0},"geo_location":"false","force_reload":"true","is_single":"","hide_save_btn":"false","current_user":"0","cookie_expiration":"365","script_delay":"2000","close_btn_action":"1","close_btn_rdr":"","scripts_defined":"{\"cache\":true,\"header\":\"\",\"body\":\"\",\"footer\":\"\",\"thirdparty\":{\"header\":\"\",\"body\":\"\",\"footer\":\"\"},\"strict\":{\"header\":\"\",\"body\":\"\",\"footer\":\"\"},\"advanced\":{\"header\":\"\",\"body\":\"\",\"footer\":\"\"}}","gdpr_scor":"true","wp_lang":"","wp_consent_api":"false","gdpr_nonce":"bb1a4c5ace"};
</script>
<script defer src="https://montavistavalues.com/wp-content/plugins/gdpr-cookie-compliance/dist/scripts/main.js?ver=5.0.6" id="moove_gdpr_frontend-js"></script>
<script id="moove_gdpr_frontend-js-after">
var gdpr_consent__strict = "true"
var gdpr_consent__thirdparty = "false"
var gdpr_consent__advanced = "false"
var gdpr_consent__performance = "false"
var gdpr_consent__preference = "false"
var gdpr_consent__cookies = "strict"
</script>
<script defer src="https://montavistavalues.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.31.2" id="elementor-webpack-runtime-js"></script>
<script defer src="https://montavistavalues.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.31.2" id="elementor-frontend-modules-js"></script>
<script defer src="https://montavistavalues.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script>
<script id="elementor-frontend-js-before">
var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},"hasCustomBreakpoints":false},"version":"3.31.2","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"theme_builder_v2":true,"nested-elements":true,"e_element_cache":true,"home_screen":true,"e_atomic_elements":true,"atomic_widgets_should_enforce_capabilities":true,"e_classes":true,"global_classes_should_enforce_capabilities":true,"e_variables":true,"cloud-library":true,"e_opt_in_v4_page":true,"e_opt_in_v4":true,"mega-menu":true},"urls":{"assets":"https:\/\/montavistavalues.com\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/montavistavalues.com\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/montavistavalues.com\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"8ce285c980"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":552,"title":"HTMLCSSStart%20%E2%80%93%20Montavistavalues","excerpt":"","featuredImage":false}};
</script>
<script defer src="https://montavistavalues.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.31.2" id="elementor-frontend-js"></script>
<script defer src="https://montavistavalues.com/wp-content/plugins/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js?ver=1.2.1" id="smartmenus-js"></script>
<script defer src="https://montavistavalues.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.31.2" id="elementor-pro-webpack-runtime-js"></script>
<script defer src="https://montavistavalues.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script>
<script defer src="https://montavistavalues.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script>
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
</script>
<script id="elementor-pro-frontend-js-before">
var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/montavistavalues.com\/wp-admin\/admin-ajax.php","nonce":"73e3ac2be8","urls":{"assets":"https:\/\/montavistavalues.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/montavistavalues.com\/wp-json\/"},"settings":{"lazy_load_background_images":true},"popup":{"hasPopUps":false},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"},"x-twitter":{"title":"X"},"threads":{"title":"Threads"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/montavistavalues.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}};
</script>
<script defer src="https://montavistavalues.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.31.2" id="elementor-pro-frontend-js"></script>
<script defer src="https://montavistavalues.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.31.2" id="pro-elements-handlers-js"></script>
<!--copyscapeskip-->
<!-- V1 -->
<dialog id="moove_gdpr_cookie_modal" class="gdpr_lightbox-hide" aria-modal="true" aria-label="GDPR Settings Screen">
<div class="moove-gdpr-modal-content moove-clearfix logo-position-left moove_gdpr_modal_theme_v1">
<button class="moove-gdpr-modal-close" autofocus aria-label="Close GDPR Cookie Settings">
<span class="gdpr-sr-only">Close GDPR Cookie Settings</span>
<span class="gdpr-icon moovegdpr-arrow-close"></span>
</button>
<div class="moove-gdpr-modal-left-content">
<div class="moove-gdpr-company-logo-holder">
<img src="https://montavistavalues.com/wp-content/plugins/gdpr-cookie-compliance/dist/images/gdpr-logo.png" alt="Montavistavalues" width="350" height="233" class="img-responsive" />
</div>
<!-- .moove-gdpr-company-logo-holder -->
<ul id="moove-gdpr-menu">
<li class="menu-item-on menu-item-privacy_overview menu-item-selected">
<button data-href="#privacy_overview" class="moove-gdpr-tab-nav" aria-label="Privacy Overview">
<span class="gdpr-nav-tab-title">Privacy Overview</span>
</button>
</li>
<li class="menu-item-strict-necessary-cookies menu-item-off">
<button data-href="#strict-necessary-cookies" class="moove-gdpr-tab-nav" aria-label="Necessary">
<span class="gdpr-nav-tab-title">Necessary</span>
</button>
</li>
<li class="menu-item-moreinfo menu-item-off">
<button data-href="#cookie_policy_modal" class="moove-gdpr-tab-nav" aria-label="Cookie Policy">
<span class="gdpr-nav-tab-title">Cookie Policy</span>
</button>
</li>
</ul>
<div class="moove-gdpr-branding-cnt">
<a href="https://wordpress.org/plugins/gdpr-cookie-compliance/" rel="noopener noreferrer" target="_blank" class='moove-gdpr-branding'>Powered by <span>GDPR Cookie Compliance</span></a>
</div>
<!-- .moove-gdpr-branding -->
</div>
<!-- .moove-gdpr-modal-left-content -->
<div class="moove-gdpr-modal-right-content">
<div class="moove-gdpr-modal-title">
</div>
<!-- .moove-gdpr-modal-ritle -->
<div class="main-modal-content">
<div class="moove-gdpr-tab-content">
<div id="privacy_overview" class="moove-gdpr-tab-main">
<span class="tab-title">Privacy Overview</span>
<div class="moove-gdpr-tab-main-content">
<p>This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.</p>
</div>
<!-- .moove-gdpr-tab-main-content -->
</div>
<!-- #privacy_overview -->
<div id="strict-necessary-cookies" class="moove-gdpr-tab-main" style="display:none">
<span class="tab-title">Necessary</span>
<div class="moove-gdpr-tab-main-content">
<p>Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.</p>
<div class="moove-gdpr-status-bar gdpr-checkbox-disabled checkbox-selected">
<div class="gdpr-cc-form-wrap">
<div class="gdpr-cc-form-fieldset">
<label class="cookie-switch" for="moove_gdpr_strict_cookies">
<span class="gdpr-sr-only">Enable or Disable Cookies</span>
<input type="checkbox" aria-label="Necessary" disabled checked="checked" value="check" name="moove_gdpr_strict_cookies" id="moove_gdpr_strict_cookies">
<span class="cookie-slider cookie-round gdpr-sr" data-text-enable="Enabled" data-text-disabled="Disabled">
<span class="gdpr-sr-label">
<span class="gdpr-sr-enable">Enabled</span>
<span class="gdpr-sr-disable">Disabled</span>
</span>
</span>
</label>
</div>
<!-- .gdpr-cc-form-fieldset -->
</div>
<!-- .gdpr-cc-form-wrap -->
</div>
<!-- .moove-gdpr-status-bar -->
</div>
<!-- .moove-gdpr-tab-main-content -->
</div>
<!-- #strict-necesarry-cookies -->
<div id="cookie_policy_modal" class="moove-gdpr-tab-main" style="display:none">
<span class="tab-title">Cookie Policy</span>
<div class="moove-gdpr-tab-main-content">
<p>More information about our <a href="#" target="_blank" rel="noopener">Cookie Policy</a></p>
</div>
<!-- .moove-gdpr-tab-main-content -->
</div>
</div>
<!-- .moove-gdpr-tab-content -->
</div>
<!-- .main-modal-content -->
<div class="moove-gdpr-modal-footer-content">
<div class="moove-gdpr-button-holder">
<button class="mgbutton moove-gdpr-modal-allow-all button-visible" aria-label="Enable All">Enable All</button>
<button class="mgbutton moove-gdpr-modal-save-settings button-visible" aria-label="Save Settings">Save Settings</button>
</div>
<!-- .moove-gdpr-button-holder -->
</div>
<!-- .moove-gdpr-modal-footer-content -->
</div>
<!-- .moove-gdpr-modal-right-content -->
<div class="moove-clearfix"></div>
</div>
<!-- .moove-gdpr-modal-content -->
</dialog>
<!-- #moove_gdpr_cookie_modal -->
<!--/copyscapeskip-->
</body>
</html>