Information & Pattern

HTML-Gesuchsvorlage 2

Diese Vorlage kannst du in zwei Varianten nutzen, einmal mit Bildern, einmal mit Fonticons. (Wer sich ein bisschen mit HTML auskennt, kann aber auch Bilder und Fonticons kombinieren oder die Abschnitte mit und ohne Spalten austauschen.)

Variante mit Bildern

Das Bild im Titel-Teil des Gesuchs hat eine feste Breite von 410px. Die Höhe ist nicht fix und darf zwischen 30px – 210px variieren. 210px Höhe sind die Maximalgröße. Die anderen Bilder im Gesuch sind sowohl in der Höhe und der Breite variabel und müssen nicht quadratisch, sondern können auch rechteckig sein. Jedoch dürfen die Bilder maximal 180x180px groß sein.
Abgesehen vom Titel-Bild sind alle Bilder in der Vorlage rein optional. Falls du außer einem Bild im Titel keine Bilder benötigst, kannst du die Platzhalterbilder im Code einfach herauslöschen.

Variante mit Fonticons

Diese kommt ohne Bilder aus (wer sich mit HTML ein wenig auskennt, kann aber auch hier Bilder einsetzen, im Titel wäre das anstelle des Fonticons ein Bild von 100x100px und in den Abschnitten anstelle der Fontiocns Bilder mit 60x60px – die Größe der Bilder wäre hier fest und nicht variabel).
Du kannst die voreingesetzten (Platzhalter-)Fonticons dabei beliebig durch jedes andere Fonticon bis zu Icons der Version 4, die du auf der Website von Fontawesome findest (Link), ersetzen.
Abgesehen vom Fonticon im Titel des Gesuchs sind alle Fonticons in der Vorlage rein optional. Falls du außer einem Fonticon im Titel keine weiteren Fonticons benötigst, kannst du die Platzhaltericons, die im Code sind, samt des Div-Containers, in den sie verpackt sind, einfach herauslöschen.

Vorlage mit Bildern

Leider keine Bilder für Gäste.

Gesuchstitel

Platz für etwas mehr Text

Einleitung

Hier kann dein Untertitel stehen

Leider keine Bilder für Gäste. Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen.

Titelzeile

Gesuchte/r: Name | Alter | Beruf | sonstiges

Leider keine Bilder für Gäste. [frei] [reserviert] [vergeben] Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung. Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen. Natürlich nur dann, wenn sich alle an diese Standards halten. Das gilt für Browser wie Firefox, Opera, Safari und den Internet Explorer ebenso wie für die Darstellung in Handys. Und was können Sie für Standards tun?

Titelzeile

Suchende/r: Name | Alter | Beruf | sonstiges

Leider keine Bilder für Gäste. Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.

Schlussworte

Hier kann dein Untertitel stehen

Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung. Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen.

Code:

<div id="eg-search">            
            <div class="headbox2">
                Leider keine Bilder für Gäste.
            </div>
            <div class="headbar2">
                <div class="headtitle2">Gesuchstitel</div>
                Platz für etwas mehr Text. Wenn dein Gesuch keinen Untertitel haben soll, kannst du dieses Feld auch einfach leer lassen. Maximal passen 4 Zeilen Text in das Feld.
Das Bild im Header sollte <b>410px breit</b> sein, ist aber in der <b>Höhe variabel</b>. Die <u>maximale Höhe</u> sind <u>210px</u>, die <u>minimale Höhe</u> wären <u>30px</u>. Die <span>Breite ist mit 410px fix!</span>
            </div>
            
            <div class="sectitle">Titelzeile</div>
            <div class="subsec">Hier kann dein Untertitel stehen</div>
            <div class="colsection">
                Leider keine Bilder für Gäste. Schreibe hier einen Einleitungstext zum Gesuch. Optional kannst du ein Bild in den Code einfügen, dort, wo vor diesem Text momentan ein Platzhalterbild eingefügt ist. Beim Einfügen eines eigenen Bildes bitte beachten, <u>die img class nicht zu entfernen und nur den Teil hinter "src=" zu ersetzen.</u> Die Größe des Bildes kann dabei variabel sein, aber nicht größer als 180x180px. Möchtest du kein Bild einfügen, lösche das <*img ...> einfach.
            </div>
                
            <div class="sectitle">Titelzeile</div>
            <div class="subsec">Gesuchte(r): Name | Alter | Beruf | Avatar</div>
            <div class="section">
                Leider keine Bilder für Gäste. <font class="free">[frei]</font> <font class="reserved">[reserviert]</font> <font class="taken">[vergeben]</font> Hier kannst du den gesuchten Charakter beschreiben. Optional kannst du ein Bild bis zu einer Größe von 180x180px einfügen. Kleinere Bilder, egal ob quadratisch oder rechteckig, sind auch möglich. Füge dein Bild dort ein, wo derzeit ein Platzhalterbild hinterlegt ist. Beim Einfügen eines eigenen Bildes bitte beachten, <u>die img class nicht zu entfernen und nur den Teil hinter "src=" zu ersetzen.</u> Möchtest du kein Bild einfügen, lösche das <*img ...> einfach heraus.
            </div>
                
            <div class="sectitle">Titelzeile</div>
            <div class="subsec">Suchende(r): Name | Alter | Beruf | sonstiges</div>
            <div class="section">
                Leider keine Bilder für Gäste. <font class="taken">[vergeben]</font> Hier kannst du den suchenden Charakter beschreiben. Optional kannst du ein Bild bis zu einer Größe von 180x180px einfügen. Kleinere Bilder, egal ob quadratisch oder rechteckig, sind auch möglich. Füge dein Bild dort ein, wo derzeit ein Platzhalterbild hinterlegt ist. Beim Einfügen eines eigenen Bildes bitte beachten, <u>die img class nicht zu entfernen und nur den Teil hinter "src=" zu ersetzen.</u> Möchtest du kein Bild einfügen, lösche das <*img ...> einfach heraus.
            </div>

            <div class="sectitle">Schlussworte</div>
            <div class="subsec">Hier kann dein Untertitel stehen</div>
            <div class="colsection">
                 Platz für die Formalitäten und weitere Informationen.
            </div>
            <div style="float: clear;"></div>
        </div>

Vorlage mit Fonticons

kurzer Gesuchstitel
Platz für etwas mehr Text

Einleitung

Hier kann dein Untertitel stehen

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.

Titelzeile

Gesuchte/r: Name | Alter | Beruf | sonstiges

[frei] [reserviert] [vergeben] Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung. Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen.

Titelzeile

Suchende/r: Name | Alter | Beruf | sonstiges

[frei] [reserviert] [vergeben] Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.

Schlussworte

Hier kann dein Untertitel stehen

Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung.

Code:

<div id="eg-search">    
            <div class="headbox">
                <div class="headtitle"><span>kurzer Gesuchstitel<br></span>Platz für etwas mehr Text</div>
            </div>
            <div class="headbar">
                <div class="hpic flex"><i class="fa fa-user"></i></div>
            </div>
            
            <div class="sectitle">Titelzeile</div>
            <div class="subsec">Hier kann dein Untertitel stehen</div>
            <div class="colsection">
                Schreibe hier einen Einleitungstext zum Gesuch.
            </div>
            <div class="sectitle">Titelzeile</div>
            <div class="subsec">Gesuchte(r): Name | Alter | Beruf | Avatar</div>
            <div class="section">
                <div class="sectionicon flex left"><i class="fa fa-female"></i></div><font class="free">[frei]</font> <font class="reserved">[reserviert]</font> <font class="taken">[vergeben]</font> Hier kannst du den gesuchten Charakter beschreiben. Optional kannst du ein Fonticon einfügen. Das voreingesetzte Fonticon kannst du dabei nach Belieben gegen ein zu deinem Gesuch passendes Fonticon von fontawesome ersetzen. Möchtest du kein Fonticon einfügen, entferne das voreingesetzte Fonticon einfach.
            </div>
            
            <div class="sectitle">Titelzeile</div>
            <div class="subsec">Suchende(r): Name | Alter | Beruf | sonstiges</div>
            <div class="section">
                <div class="sectionicon flex right"><i class="fa fa-male"></i></div><font class="taken">[vergeben]</font> Hier kannst du den suchenden Charakter beschreiben. Optional kannst du ein Fonticon einfügen. Das voreingesetzte Fonticon kannst du dabei nach Belieben gegen ein zu deinem Gesuch passendes Fonticon von fontawesome ersetzen. Möchtest du kein Fonticon einfügen, entferne das voreingesetzte Fonticon einfach.
            </div>
            
            <div class="sectitle">Titelzeile</div>
            <div class="subsec">Hier kann dein Untertitel stehen</div>
            <div class="section">
                <div class="sectionicon flex left"><i class="fa fa-book"></i></div> Hier kannst du näher auf die gemeinsame Geschichte, den Status Quo oder die Zukunft der Charaktere und ihre Beziehung zueinander eingehen. Optional kannst du ein Fonticon einfügen. Das voreingesetzte Fonticon kannst du dabei nach Belieben gegen ein zu deinem Gesuch passendes Fonticon von fontawesome ersetzen. Möchtest du kein Fonticon einfügen, entferne das voreingesetzte Fonticon einfach.
            </div>
            
            <div class="sectitle">Titelzeile</div>
            <div class="subsec">Hier kann dein Untertitel stehen</div>
            <div class="colsection">
                 Platz für die Formalitäten und weitere Informationen.
            </div>
            
            <div style="float: clear;"></div>
        </div>