Quartus
Die Flaggen
Hier der Code für die Flaggen, die im Inhaltsbereich zu sehen sind. Für den Fall, das man nur eine der Flaggen nutzen möchte. Anhand der eindeutigen CSS-Klassen (Ländername), kann man die jeweilige Flagge recht gut zuordnen. Es sind Deutschland, Spanien, Frankreich, Polen, Österreich, Italien, Schweiz und Dänemark.HTML-Bereich für die Flaggen:
<div class="deutschland"> </div> <div class="spanien"> </div> <div class="frankreich"> </div> <div class="polen"> </div> <div class="oesterreich"> </div> <div class="italien"> </div> <div class="schweiz"> <div id="plus"> </div> </div> <div class="daenemark"> <div id="plus2"> </div> </div>CSS-Bereich für die Flaggen:
.deutschland {display:inline-block;
background:linear-gradient(black 33.33%,red 33.33%,red 66.66%,gold 66.66%,gold 99.99%);
width: 150px;
height: 100px;
border:solid 1px #7F7F7F; }
.polen {display:inline-block;
background:linear-gradient(#fff 50%,#dc143c 50%);
width: 150px;
height: 100px;
border:solid 1px #7F7F7F; }
.spanien {display:inline-block;
background:linear-gradient(#C60B1E 25%,#ffc400 25%,#ffc400 75%, #C60B1E 75%,#C60B1E 100%);
width: 150px;
height: 100px;
border:solid 1px #7F7F7F; }
.frankreich {display:inline-block;
background:linear-gradient(to right,#002395 33.33%,white 33.33%,white 66.66%,#ed2939 66.66%,#ed2939 99.99%);
width: 150px;
height: 100px;
border:solid 1px #7F7F7F; }
.oesterreich{display:inline-block;
background:linear-gradient(#ed2939 33.33%,white 33.33%,white 66.66%,#ed2939 66.66%,#ed2939 100%);
width: 150px;
height: 100px;
border:solid 1px #7F7F7F; }
.italien {display:inline-block;
background:linear-gradient(to right, #009246 33.33%,white 33.33%,white 66.66%,#ce2b37 66.66%,#ce2b37 99.99%);
width: 150px;
height: 100px;
border:solid 1px #7F7F7F; }
.schweiz {display:inline-block;
background:red;
width: 150px;
height: 100px;
border:solid 1px #7F7F7F; }
#plus{position: relative;
display:inline-block;
background: white;
width: 20px;
height: 60px;
top:20px;
margin-left: 60px;
margin:0 auto; }
.daenemark {display:inline-block;
background:#c60c30;
width: 150px;
height: 100px;
border:solid 1px #7F7F7F; }
#plus2{position: relative;
background: #fff;
width: 20px;
height: 98px;
margin-left: 40px;
top:0px; }
#plus2:before{position: absolute;
background: #fff;
content: "";
width: 148px;
height: 20px;
top: 40px;
left: -40px; }
Nach diesem Prinzip lassen sich weitere Flaggen erstellen, z.B. Niederlande, Belgien, Luxemburg, Ungarn, Finnland, Rumänien, Lettland, Bulgarien, Russland, Littauen, Rumänien, Monaco, Ukraine, Irland, Estland, Armenien, Bolivien, Costa Rica, Elfenbeinküste, Gabun, Gambia, Guinea, Indonesien, Jemen, Kolumbien, Mali, Mauritius, Nigeria, Peru, Sierra Leone, Thailand, Tschad.
Die Schrift
Webfonts
In diesem Template werden Google Webfonts verwendet. Diese sind ja kostenlos und beliebt. Es sind die Schriften 'ROBOTO Light' und 'OPEN SANS Light', welche direkt im Template integriert sind und somit auch ohne Internet-Verbindung angezeigt werden. Die Schriften haben wir über das HTML Link-Element eingebunden.<link rel="stylesheet" href="css/font-roboto-light.css" type="text/css"> <link rel="stylesheet" href="css/font-open-sans-light.css" type="text/css">Wenn Sie diese Schriften nicht verwenden wollen bzw. sich für andere Schriften entscheiden, so nehmen Sie einfach den Link-Verweis aus der HTML-Seite heraus, damit die Schriften nicht geladen werden.
Icons
Wir verwenden Font-Icons
Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen. Wir haben eine der beliebtesten Icon-Schriften in dieser Vorlage bereits anbei. Sie heißt "Fontawesome".Tipps zu den Font-Icons
Viele weitere Icons sind möglich, denn die Icon-Schrift "FontAwesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen. Der nachfolgende Link zum Anbieter zeigt weitere Infos sowie auch eine Übersicht aller Icons: fontawesomeAllgemeiner Hinweis dazu: Wir haben die Icons schon für Sie angepasst. Denn ohne weitere Bearbeitung sind die Font-Icons immer genauso groß und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.
Als Beispiel: