Documentation

HTML Entity Konverterter

Bei Neuaufnahme von Code:

HTML Entity Konverterter

UIkit

Get familiar with the basic setup and overview of UIkit:

UIkit Documentation

Auflösungen für Bilder

Bildschirmauflösungen beschreiben die Anzahl der Pixel, die ein Bildschirm horizontal und vertikal anzeigen kann, und sind ein wichtiger Faktor für die Bildqualität. Je höher die Auflösung, desto schärfer und detaillierter das Bild. Gängige Bildschirmauflösungen:

• SD (768x576): Standard Definition, oft für ältere Geräte
• OG (1200x630) Open Graph beste Größe für WhatsApp und Facebook
• HD Ready (1280x720): High Definition ready, auch Half HD genannt, für kleinere Bildschirme
• Full HD (1920x1080): Der Standard für viele Anwendungen, bietet scharfe Bilder und Details (bevorzugt)
• Quad HD (2560x1440): Zwischen Full HD und 4K, ideal für Gaming und professionelle Anwendungen
• 4K UHD (3840x2160): Ideal für Videobearbeitung und immersive Gaming-Erlebnisse
• 8K UHD (7680x4320): Sehr hohe Auflösung, die noch selten eingesetzt wird

Ribbon top / left

Code:
<div style="margin: 15px 0;" class="uk-panel uk-ribbon-box uk-first-column">
 <div class="ribbonleft">Hinweis:</div>
 <p><b>Artikeltext und Bilder:</b><br>Katja Hättig</p>
</div>

Code:
<div style="margin: 15px 0; padding: 15px 80px;" class="uk-panel uk-ribbon-box uk-first-column">
 <div class="ribbonleft2">Hinweis:</div>
 <p><b>Lore Ipsum Dolor samet it:</b><br>Katja Hättig<br>..<br>..</p>
</div>

Code:
<div style="margin: 15px 0; padding: 15px 90px;" class="uk-panel uk-ribbon-box uk-first-column">
 <div class="ribbontop"><br>Tipp:<br></div>
 <p><b>Lore Ipsum Dolor samet it:</b><br>Katja Hättig<br>..<br>..<br></p>
</div>

More ideas for ribbons:

More Ribbon Shapes

Liste mit Icon

• Freitag 18:00 Uhr: Bieranstich durch Bürgermeister
• Freitag 19:00 Uhr: Plattenparty mit Sound Revolution
• Samstag 18:00 Uhr: Baumaufstellen im Anschluss Oberkrainer Abend mit Power Hoch 5
• Sonntag 09:00 Uhr: Kirchweihgottesdienst in St. Peter, anschließend Frühschoppen im Festzelt mit Vuglwild
• Sonntag 11:30 Uhr: Mittagstisch und Kerwaausklang

Code:
<ul class="fa-ul">
 <li><span class="fa-li"><i class="fa-solid fa-arrow-right-from-bracket"></i></span>Freitag 18:00 Uhr: Bieranstich durch Bürgermeister</li>
 <li><span class="fa-li"><i class="fa-solid fa-arrow-right-from-bracket"></i></span>Freitag 19:00 Uhr: Plattenparty mit Sound Revolution</li>
 <li><span class="fa-li"><i class="fa-solid fa-arrow-right-from-bracket"></i></span>Samstag 18:00 Uhr: Baumaufstellen im Anschluss Oberkrainer Abend mit Power Hoch 5</li>
 <li><span class="fa-li"><i class="fa-solid fa-arrow-right-from-bracket"></i></span>Sonntag 09:00 Uhr: Kirchweihgottesdienst in St. Peter, anschließend Frühschoppen im Festzelt mit Vuglwild</li>
 <li><span class="fa-li"><i class="fa-solid fa-arrow-right-from-bracket"></i></span>Sonntag 11:30 Uhr: Mittagstisch und Kerwaausklang</li>
</ul>

Accordion

• Item 1

  Lorem ipsum dolor

• Item 2

  Ut enim ad minim veniam

• Item 3

  Duis aute irure dolor in

Code:
<ul uk-accordion="">
 <li class="uk-open"><a class="uk-accordion-title">Item 1</a>
  <div class="uk-accordion-content">
   <p>Lorem ipsum dolor</p>
  </div>
 </li>
 <li><a class="uk-accordion-title">Item 2</a>
  <div class="uk-accordion-content">
   <p>Ut enim ad minim veniam</p>
  </div>
 </li>
 <li><a class="uk-accordion-title">Item 3</a>
  <div class="uk-accordion-content">
   <p>Duis aute irure dolor in</p>
  </div>
 </li>
</ul>

Überschriften Anreisser

Die Anreisser funktionieren mit jedem H-tag
Kerwaboum Farbcode rot: #cd3330
Kerwaboum Farbcode grau: #4f565b
Spalter Bier Farbcode blau: #27355d

Überschrift

Überschrift

Überschrift

Code rot:
<h3 class="uk-ffw-bar-red">Überschrift</h3>
Code grau:
<h4 class="uk-ffw-bar-grey">Überschrift</h4>
Code blau:
<h4 class="uk-ffw-bar-blue">Überschrift</h4>

Überschriften

Code:
  <h1>H1 Heading</h1>

Code: #999 hellgrau zu dunkelgrau (uk-icon-link)
<a class="uk-icon-link" href="#" target="_blank" rel="noopener"><i class="fa-solid fa-arrow-up-right-from-square"></i> Linktext</a>

Code: #cd3330 kerwa rot zu schwarz (uk-icon-link-kerwa)
<a class="uk-icon-link-kerwa" href="#" target="_blank" rel="noopener"><i class="fa-solid fa-arrow-up-right-from-square"></i> Linktext</a>

Code:
<i class="fa-solid fa-gifts fa-5x"></i>

Code:
Icon:  <i uk-icon="icon: youtube"></i>
Blinkendes Icon:  <i class="blink" uk-icon="user"></i>

Code: <a class="uk-icon-link" href="#" uk-icon="icon: youtube"></a>

Code: <a class="uk-icon-button" href="#" uk-icon="icon: youtube"></a>

Code:
<blockquote class="bg-light border rounded p-3">
 <p><q>Real estate cannot be lost or stolen, nor can it be carried away. Purchased with common sense, paid for in full, and managed with reasonable care, it is about the safest investment in the world.</q></p>
 <p class="m-0"><cite>Franklin D. Roosevelt</cite></p>
</blockquote>

Code:
<ul>
 <li>Lorem...</li>
 <li>Lorem...</li>
</ul>

Code:
<ol>
 <li>Lorem...</li>
 <li>Lorem...</li>
</ol>

Code:
<ul class="fa-ul">
 <li><span class="fa-li"><i class="fas fa-check-square"></i></span>Lorem....</li>
 <li><span class="fa-li"><i class="fas fa-check-square"></i></span>Lorem....</li>
</ul>

Code: <button type="button" class="btn btn-primary">Primary</button>

Code: <a class="btn btn-primary" href="#" role="button">Link</a>