Box-Fenster Home

Fenster öffnen auf der selben Seite

Per div-Box (deshalb haben wir es Boxfenster genannt) öffnen sich alle Fenster bei Klick auf den Weiter-Button bzw. Mehr-Lesen o.ä. Dieses Öffnen der Fenster funktioniert nur per CSS und ganz ohne Javascript.

Fenster Abdunklung

Ab einer gewissen Breite des Displays bzw. Bildschirms sind die Box-Fenster nicht mehr füllend in der Breite und Höhe, sondern wir haben diese horizontal und vertikal mittig zentriert mit einem Abstand zum Rand und als kleinen Hingucker noch dabei den Hintergrund abgedunkelt, damit die Fenster sich noch mehr abheben, gerade bei einem One-Pager ein durchaus wertvoller Aspekt.

Die vorstehend genannte Abdunklung erfolgt per CSS-rgba und ist deshalb in Transparenz-Stärke (Deckung) undTransparenz-Farbe auch beliebig einstellbar.

 

Box-Fenster Primus-1

Werther

Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine.

Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken.

Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund!

Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer Geliebten - dann sehne ich mich oft und denke : ach könntest du das wieder ausdrücken, könntest du dem Papiere das einhauchen, was so voll, so warm in dir lebt, daß es würde der Spiegel deiner Seele, wie deine Seele ist der Spiegel des unendlichen Gottes!

 

Box-Fenster Secundus

Lightbox Picture Gallery

So funktioniert diese Foto-Schau: Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Es ist ein Jquery-Script.

Tolles Feature: Nachdem Sie ein Bild geklickt haben, fahren Sie mit der Maus über die rechte oder linke Fotohälfte des Bildes. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf dieses immer weiter zum nächsten bzw. vorangehendem Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Zum Schließen des Fenster klickt man auf das 'Schließen-Symbol' oder irgendwo ausserhalb des Fensters.

 

Box-Fenster Tertius - Die Abschnitte im Inhalt

Mit Pseudo-Element 'nth-child(n)'

Auf der Seite (index.html) sehen Sie im Inhaltsbereich mehrere Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, erklären wir Ihnen nachstehend.

Der Pseudo-Selektor :nth-child(n) ist sehr hilfreich, wenn man gleiche Elemente innerhalb eines Elternelement verschieden aussehen lassen möchte. Insbesondere bei Wiederholungen ist dies effektiv.

Alle Möglichkeiten:

SELFHTML-Wiki beschreibt es, aber noch viel übersichtlicher und mit sehr vielen Beispielen erklärt es die Webseite h5c3 .

Die wichtigsten Möglichkeiten:

Wie an den vorstehend genannten Links zu sehen, gibt es mehrere 'nth-child-Selektoren'. Nachfolgend möchten wir aber Ihnen die wichtigsten beschreiben:

1.) Einfache 'nth-child-Selektoren':

1.a) Spricht jeden Abschnitt individuell an:

'nth-child(1)' spricht den ersten Abschnitt an.
'nth-child(2)' spricht den zweiten Abschnitt an.
'nth-child(3)' spricht den dritten Abschnitt an.
'nth-child(4)' spricht den vierten Abschnitt an usw.

1b) Spricht jeden zweiten Abschnitt an:

'nth-child(odd)' spricht jeden ungeraden Abschnitt an (also 1, 3 ,5, 7 usw).
'nth-child(even)' spricht jeden geraden Abschnitt an (also 2, 4, 6, 8 usw).


2.) Erweiterte 'nth-child-Selektoren':
Jetzt wird es noch variabler und effektiver. Hier im Beispiel die Anweisungen für jeden dritten anzusprechenden Abschnitt.

'nth-child(3n+1)' spricht den ersten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 1, Abschnitt 4, Abschnitt 7 usw. sind identisch.

'nth-child(3n+2)' ist für den zweiten Abschnitt zuständig und ab diesen wird jeder dritte Abschnitt angesprochen.
D.h. Abschnitt 2, Abschnitt 5, Abschnitt 8 usw. sind identisch.

'nth-child(3n+3)' spricht den dritten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 3, Abschnitt 6, Abschnitt 9 usw. sind identisch.

'nth-child(3n+4)' spricht den vierten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 4, Abschnitt 7, Abschnitt 10 usw. sind identisch.

Wie funktioniert es in diesem Template ?

Wir haben den 'nth-child-Selektor' für die Abschnitte in der Datei format.css angelegt. Und zwar haben wir den 'nth-child-Selektor' auf unsere CSS-Klasse namens 'section-content' gesetzt und hierbei erweiterte 'nth-child' verwendet.

CSS
<!-- Allgemeines Beispiel-->
.section-content:nth-child(3n+1) {
background:#fff;
color:#000;
}
.section-content:nth-child(3n+2) {
background:black;
color:red;
}
.section-content:nth-child(3n+3) {
background:#808080;
color:black;
}

So sieht ein Abschnitt in der HTML-Datei aus:

HTML
<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt ...
</div>
</div>
<!-- E N D E ABSCHNITT -->

So sehen zwei Abschnitte in der HTML-Datei aus:

HTML
<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt Abschnitt 1 ...
</div>
</div>
<!-- E N D E ABSCHNITT -->

<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt Abschnitt 2 ...
</div>
</div>
<!-- E N D E ABSCHNITT -->

Sehr praktisch und übersichtlich: Der Code für die Abschnitte ist also in der HTML-Datei immer der gleiche, egal wieviele Abschnitte.

 

Box-Fenster Quartus

Anfahrt 1

So errreichen Sie uns: Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.

Anfahrt 2

So errreichen Sie uns: Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

 

Box-Fenster Quntus Leistungen

What We Offer

Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna.

Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero.

Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor.

Weitere Leistungen

 

Box-Fenster Sextus

Bilder

Die Fotos in dieser Vorlage sind von https://picjumbo.com/ . Wir haben diese responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

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.
Die Dateien der Icon-Schrift sind also bereits diesem Template beigefügt mit dem großen Vorteil, das die Icons somit auch geladen und angezeigt werden, wenn keine Internet-Verbindung besteht.

Die Icon-Schrift kann aber statt dessen auch noch einfacher durch einen entsprechenden Link im Kopfbereich der Seite aufgerufen werden, die Schrift wird dann serverseitig geladen, sehen Sie hierzu die Erklärungen auf der Seite des Anbieters. Dies mag für manche der leichtere Weg sein, falls man ein Versions-Update aktualisieren möchte. Aber wie gesagt: Besteht keine Internet-Verbindung, so wird in diesem Fall auch kein Icon angezeigt.

Alpha Sextus

Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus.

Beta Sextus

Fusce vel dui.Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.

Delta Sextus

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

 

Impressum

Informationspflicht laut §5 E-Commerce Gesetz, §14 Unternehmensgesetzbuch, §63 Gewerbeordnung und Offenlegungspflicht laut §25 Mediengesetz.

Buchhandlung Lesezeichen
Mag. Melanie Rüdisser-König
Schweizer Straße 6,
6845 Hohenems,
Österreich
Unternehmensgegenstand: Einzelhandel mit Büchern
UID-Nummer: ATU80414213
Firmensitz: 6845 Hohenems

Tel.: +43 5576 72953
E-Mail ans Lesezeichen

Berufsrecht: Gewerbeordnung: www.ris.bka.gv.at
Kontaktdaten des Verantwortlichen für Datenschutz
Sollten Sie Fragen zum Datenschutz haben, finden Sie nachfolgend die Kontaktdaten der verantwortlichen Person bzw. Stelle:
Buchhandlung Lesezeichen
Mag. Melanie Rüdisser-König
Schweizer Str. 6, 6845 Hohenems, Österreich
E-Mail-Adresse und Telefon wie oben.

Bildernachweis

Die Bilder, Fotos und Grafiken auf dieser Webseite sind urheberrechtlich geschützt. Die Bilderrechte liegen beim Fotografen Samuel Nußbaumer.

Urheberrechtshinweis

Alle Inhalte dieser Website (Bilder, Fotos, Texte,) unterliegen dem Urheberrecht. Bitte fragen Sie uns, bevor Sie die Inhalte dieser Website verbreiten, vervielfältigen oder verwerten, wie zum Beispiel auf anderen Websites erneut veröffentlichen. Falls notwendig, werden wir die unerlaubte Nutzung von Teilen der Inhalte unserer Seite rechtlich verfolgen.
Sollten Sie auf dieser Webseite Inhalte finden, die das Urheberrecht verletzen, bitten wir Sie uns zu kontaktieren.

Haftung für Links auf dieser Website

Unsere Website enthält Links zu anderen Webseiten, für deren Inhalt wir nicht verantwortlich sind. Haftung für verlinkte Websites besteht für uns nicht, da wir keine Kenntnis rechtswidriger Tätigkeiten hatten und haben, uns solche Rechtswidrigkeiten auch bisher nicht aufgefallen sind und wir Links sofort entfernen würden, wenn uns Rechtswidrigkeiten bekannt werden.
Wenn Ihnen rechtswidrige Links auf unserer Website auffallen, bitte wir Sie uns zu kontaktieren. Sie finden die Kontaktdaten im Impressum.

Haftung für Inhalte dieser Website

Wir entwickeln die Inhalte dieser Website ständig weiter und bemühen uns, korrekte und aktuelle Informationen bereitzustellen.
Unsere Verpflichtungen zur Entfernung von Informationen oder zur Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen aufgrund von gerichtlichen oder behördlichen Anordnungen bleiben auch im Falle unserer Nichtverantwortlichkeit davon unberührt.
Sollten Ihnen problematische oder rechtswidrige Inhalte auffallen, bitte wir Sie uns umgehend zu kontaktieren, damit wir die rechtswidrigen Inhalte entfernen können. Sie finden die Kontaktdaten im Impressum.

EU-Streitschlichtung

Gemäß Verordnung über Online-Streitbeilegung in Verbraucherangelegenheiten (ODR-Verordnung) möchten wir Sie über die Online-Streitbeilegungsplattform (OS-Plattform) informieren.
Verbraucher haben die Möglichkeit, Beschwerden an die Online Streitbeilegungsplattform der Europäischen Kommission zu richten. Die dafür notwendigen Kontaktdaten finden Sie oberhalb in unserem Impressum.
Wir möchten Sie jedoch darauf hinweisen, dass wir nicht bereit oder verpflichtet sind, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.
Alle Texte sind urheberrechtlich geschützt.
Quelle: Erstellt mit dem Impressum Generator von AdSimple

 

Datenschutz

Wir informieren Sie umfassend über Daten, die wir über Sie verarbeiten.

Diese Datenschutzerklärung soll Ihnen die wichtigsten Dinge so einfach und transparent wie möglich beschreiben.
Wenn trotzdem Fragen bleiben, möchten wir Sie bitten, sich an die im Impressum genannte verantwortliche Stelle zu wenden, den vorhandenen Links zu folgen und sich weitere Informationen auf Drittseiten anzusehen.

Anwendungsbereich

Die Datenschutzerklärung gilt für alle Bereiche, in denen personenbezogene Daten im Unternehmen über die Kanäle (Website, Social Media, E-Mail) strukturiert verarbeitet werden. Sollten wir außerhalb dieser Kanäle mit Ihnen in Rechtsbeziehungen eintreten, werden wir Sie gegebenenfalls gesondert informieren.

Rechtsgrundlagen

Wir beziehen uns auf die VERORDNUNG (EU) 2016/679 DES EUROPÄISCHEN PARLAMENTS UND DES RATES vom 27. April 2016. Diese Datenschutz-Grundverordnung der EU können Sie selbstverständlich online auf EUR-Lex, dem Zugang zum EU-Recht, nachlesen.
Zusätzlich zu der EU-Verordnung gelten auch noch nationale Gesetze: In Österreich ist dies das Bundesgesetz zum Schutz natürlicher Personen bei der Verarbeitung personenbezogener Daten (Datenschutzgesetz), kurz DSG.

Kontaktdaten des Verantwortlichen

Sollten Sie Fragen zum Datenschutz haben, finden Sie nachfolgend die Kontaktdaten der verantwortlichen Person bzw. Stelle:
Buchhandlung Lesezeichen
Mag. Melanie Rüdisser-König
Schweizer Str. 6, 6845 Hohenems, Österreich

Speicherdauer

Dass wir personenbezogene Daten nur so lange speichern, wie es für die Bereitstellung unserer Dienstleistungen unbedingt notwendig ist, gilt als generelles Kriterium bei uns. Das bedeutet, dass wir personenbezogene Daten löschen, sobald der Grund für die Datenverarbeitung nicht mehr vorhanden ist. Sollten Sie die Löschung Ihrer Daten wünschen, werden die Daten so rasch wie möglich und soweit keine Pflicht zur Speicherung besteht, gelöscht.

Rechte laut Datenschutz-Grundverordnung

Sie haben Rechte – zögern Sie nicht, die oben gelistete verantwortliche Stelle bei uns zu kontaktieren!
Wenn Sie glauben, dass die Verarbeitung Ihrer Daten gegen das Datenschutzrecht verstößt oder Ihre datenschutzrechtlichen Ansprüche in sonst einer Weise verletzt worden sind, können Sie sich bei der Aufsichtsbehörde beschweren. Diese ist für Österreich die Datenschutzbehörde, deren Website Sie hier finden.
Für unser Unternehmen ist die folgende lokale Datenschutzbehörde zuständig:

Österreich Datenschutzbehörde

Leiterin: Mag. Dr. Andrea Jelinek
Adresse: Barichgasse 40-42, 1030 Wien
Telefonnr.: +43 1 52 152-0
E-Mail-Adresse: dsb(at)dsb.gv.at
Website: https://www.dsb.gv.at/

TLS-Verschlüsselung mit https

TLS, Verschlüsselung und https klingen sehr technisch und sind es auch. Wir verwenden HTTPS (das Hypertext Transfer Protocol Secure steht für „sicheres Hypertext-Übertragungsprotokoll“), um Daten abhörsicher im Internet zu übertragen.
Das bedeutet, dass die komplette Übertragung aller Daten von Ihrem Browser zu unserem Webserver abgesichert ist – niemand kann “mithören”.
Damit haben wir eine zusätzliche Sicherheitsschicht eingeführt und erfüllen Datenschutz durch Technikgestaltung (Artikel 25 Absatz 1 DSGVO). Durch den Einsatz von TLS (Transport Layer Security), einem Verschlüsselungsprotokoll zur sicheren Datenübertragung im Internet, können wir den Schutz vertraulicher Daten sicherstellen.
Sie erkennen die Benutzung dieser Absicherung der Datenübertragung am kleinen Schlosssymbol links oben im Browser, links von der Internetadresse und der Verwendung des Schemas https (anstatt http) als Teil unserer Internetadresse.

Kommunikation

Wenn Sie mit uns Kontakt aufnehmen und per Telefon oder E-Mail kommunizieren, kann es zur Verarbeitung personenbezogener Daten kommen.
Die Daten werden für die Abwicklung und Bearbeitung Ihrer Frage und des damit zusammenhängenden Geschäftsvorgangs verarbeitet.
Ihnen stehen grundsätzlich die Rechte auf Auskunft, Berichtigung, Löschung, Einschränkung, Datenübertragbarkeit, Widerruf und Widerspruch zu.

Cookies

Diese Website verwendet keine Cookies, sammelt keine Daten und benutzt auch keine Tools, wie z.B. Google Analytics u.a.

Alle Texte sind urheberrechtlich geschützt.
Quelle: Erstellt mit dem Impressum Generator von AdSimple

 

Box-Fenster Disclaimer

Allein in der Dunkelheit

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern? Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen? Er konnte die Aufforderung stehen zu bleiben schon hören.




Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag.

Er versuchte, sich in der Dunkelheit seinen Weg zu ertasten und erstarrte: Anscheinend gab es keinen anderen Ausweg aus diesem kleinen Hof als den Durchgang, durch den er gekommen war. Die Schritte wurden lauter und lauter, er sah eine dunkle Gestalt um die Ecke biegen. Fieberhaft irrten seine Augen durch die nächtliche Dunkelheit und suchten einen Ausweg. War jetzt wirklich alles vorbei?