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
• 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
• 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 left (Hinweis unter Artikel) https://css-generators.com/ribbon-shapes/

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>Matthias Hiltner</p>
</div>

Ribbon right (static Content)

Code:
<div style="width: 300px; margin: 5px 0;" class="uk-panel uk-panel-box uk-first-column">
 <div class="ribbon"><span>RIBBONTEXT</span></div>
 <p><b>Welcome to our wonderful world.</b><br>We sincerely hope that each and every user entering our website will find exactly what he is looking for.</p>
</div>

Button

· Button mit FA Icon:

Buttontext

Code:
<a href="#" class="uk-button btn-primary"><i class="fa fa-external-link"></i> Buttontext</a>

· Button mit KFV Icon:

Buttontext

Code:
<a href="#" class="uk-button btn-primary"><i class="kfv-schneidgeraet pe-3x pe-va"></i> Buttontext</a>

· Button mit pe-7s Icon:

Buttontext

Code:
<a href="#" class="uk-button btn-primary"><i class="pe-7s-map-marker pe-lg pe-va"></i> Buttontext</a>

· Nur Icon:

pe-7s-map-marker

Code:
<p><i class="pe-7s-map-marker pe-lg pe-va"></i> pe-7s-map-marker</p>

· Blinkendes Icon:

pe-7s-map-marker

Code:
<p><i class="pe-7s-map-marker pe-lg pe-va blink"></i> pe-7s-map-marker</p>

Font Demo

Listen

• This is a sample unordered list

• ul with class arrow

• ul with class user-plus

• ul with class arrow-double

• ul with class dreieck

• ul with class tick

• ul with class cross

• ul with class star

• ul with class rss

• ul with class spot

Code:
<ul class="spot">
	<li>ul with class <strong>spot</strong></li>
</ul>

Accordion

• Stadt Abenberg ohne class acc(weiß)
• Markt Allersberg class acc (grau)

Code:
<ul uk-accordion class="uk-accordion">
   <li style="padding:8px 15px;margin-bottom:2px;border:1px solid #e5e5e5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px" class="">
    <a class="uk-accordion-title" href="/" style="font-size: 18px;" id="uk-accordion-1" role="button" aria-controls="uk-accordion-2" aria-expanded="false" aria-disabled="false"><i style="color:black; font-size: 20px;" class="kfv-logo-nurwappen"></i> Stadt Abenberg</a>
    <div class="uk-accordion-content" id="uk-accordion-2" role="region" aria-labelledby="uk-accordion-1" hidden="">
     <div class="accordion-inner">
      <h4 style="margin-top: 10px; font-size: 16px;" class="uk-kfv-bar-grey">Bereich: Stadt Abenberg ohne class acc(weiß)</h4>
      Bitte Deine Haupt-/Stammfeuerwehr anklicken:<br>
      <p><a class="btn btn-primary btn-sm" href="#" target="_blank"><i class="uk-icon-external-link"></i> FF Abenberg</a></p>
      <p><a class="btn btn-primary btn-sm" href="#" target="_blank"><i class="uk-icon-external-link"></i> FF Bechhofen</a></p>
     </div>
    </div>
   </li>

   <li style="padding:8px 15px;margin-bottom:2px;border:1px solid #e5e5e5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px">
    <a class="acc uk-accordion-title" href="/" style="font-size: 18px;" id="uk-accordion-3" role="button" aria-controls="uk-accordion-4" aria-expanded="false" aria-disabled="false"><i style="color:black; font-size: 20px;" class="kfv-logo-nurwappen"></i> Markt Allersberg</a>
    <div class="uk-accordion-content" hidden="" id="uk-accordion-4" role="region" aria-labelledby="uk-accordion-3">
     <div class="accordion-inner">
      <h4 style="margin-top: 10px; font-size: 16px;" class="uk-kfv-bar-grey">Bereich: Markt Allersberg class acc (grau)</h4>
      Bitte Deine Haupt-/Stammfeuerwehr anklicken:<br>
      <p><a class="btn btn-primary btn-sm" href="#" target="_blank"><i class="uk-icon-external-link"></i> FF Allersberg</a></p>
      <p><a class="btn btn-primary btn-sm" href="#" target="_blank"><i class="uk-icon-external-link"></i> FF Altenfelden</a></p>
     </div>
    </div>
   </li>
</ul>

Trennlinien und Überschrifdeko

Code:
<hr class="uk-hr-kfv">

Code:
<hr class="uk-divider-icon">

Style kfv-headline ganze Breite

Code:
<h1 class="uk-kfv-headline-1">Style kfv-headline-1</h1>

Style kfv-headline breit wie Text

Code:
<h1 class="uk-kfv-headline-2">Style kfv-headline-2</h1>

Labels in KFV rot (#f22c0f)

Hinweis:

Code:
<span class="uk-label uk-label-kfv">Hinweis:</span>

Text

Code:
<span class="uk-kfv-badge">Text:</span>

Name und Dienstgradhelm

Code:
<div class="uk-text-left">
 <div style="margin:15px 0;">
 <i class="kdtname" data-badge="II">Max Mustermann    </i>
</div>
</div>

Code:
<div style="width: 265px;">
 <div class="uk-panel uk-panel-box" style="height: 220px; margin-bottom: 1em;">
  <div class="uk-panel-badge uk-panel-badge-kfv-helm">III</div>
  <div style="padding-bottom: 20px;">
  <h3>Fachberater<br>Ipsum</h3>
  <h2>Max Mustermann</h2>
  <hr class="uk-hr-kfv">
  </div>
 </div>
</div>

Ring um Icons

Code:
<div style="width: 300px; margin: 5px 0;" class="uk-panel uk-panel-box uk-first-column">
 <a href="#" target="_blank" rel="noopener">
  <div class="hi-icon-wrap"><span class="hi-icon-wrap hi-icon kfv-feuerwehrwappen-bayern pe-4x pe-va"></span>
   <h3>FF Kammerstein</h3>
  </div>
 </a>
</div>

Überschriften

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:
<button class="btn btn-primary" type="button">Primary</button>