A Beautiful Day

Introduction Very Warme Welcome

Fenster öffnen auf der selben Seite: Nachfolgender Button-Link (inklusive Anleitung) öffnet ein Fenster per CSS-div-Box, ganz ohne Javascript. Desgleichen beim Button im Abschnitt Service, Presentation und About Us.

Sie können aber auch die Button-Links ohne Box-Fenster öffnen und stattdessen einen normalen Linkverweis nutzen, sehen Sie dazu das Beispiel beim Abschnitt Information und Last But Not Least. Es ist also immer Ihre Entscheidung und Sie haben somit größtmöglichen Spielraum, soll heißen: Öffnen Sie die Links per Boxfenster oder nur als normale Links zu einer HTML-Seite oder machen Sie eine Mischung von beiden.

Quot erat demonstrandum. Alea iacta est. Omnia tempus habent.

Service in media res Lorem Ipsum

La Bella Terra

Atqui mediocrem tincidunt eum ad, soleat conclusionemque cum id, numquam offendit qui ea. Alienum constituto ut duo.

Yin Yang Aperiam Luptatum

Partem prompta duo eu, no duo placerat adversarium, mea mutat nostrum euripidis an. Prima aperiam luptatum id quo. Ex salutandi appellantur vis.

Nice Exploria Spa

At homero commodo eos, ad wisi decore petentium pri, vix ea graeci meliore. Ubique dicunt cu usu, mea ne zril timeam. An nec sapientem consequat at.

Presentation Scripta invenire vis documenta profundis

Lorem Ipsum

Velit prodesset ei mel. Pri no dicit mucius ornatus, mazim malorum eos in. Quo tale fabellas eu. Nec in discere legimus. ei eum delectus corrumpit incorrupte.

Bella Luna

Ad labore possim antiopam ius, id eam etiam eleifend abhorreant. Scripta invenire vis te, vis ea doctus instructior. Scripta laboramus eum eu, id cum omnium iuvaret pertinax. Sonet omnes petentium cu eam, qui nulla munere fabellas examinus.

Liberty, equality et fraternity

Ad labore possim antiopam ius, id eam etiam eleifend abhorreant. Scripta invenire vis te, vis ea doctus instructior. Scripta laboramus eum eu, id cum omnium iuvaret pertinax. Sonet omnes petentium cu eam, qui nulla munere fabellas examinus.

Universum Deu

No mea facer error, ut pro quas facete, ius reque euripidis temporibus et. Quo dolores hendrerit.

About Us - Wir stellen uns vor

Lorem bonus at Ipsum

  • Quality in vino veritas
  • Vamos a la playa, que hora es, no tengo dinero en espana
  • Bene docet, qui bene distinguit
  • Nothing but thieves, call the police

No ius consul dolores erroribus, malorum postulant omittantur ex quo. Pri ei essent quodsi diceret, suas tincidunt accommodare nam ut. Ne omnes homero vis, an ubique honestatis per. Vel id tacimates dissentias.

Information Ipsum lobortis mollis

Wir sind stolz Ihnen unsere Produkte anbieten zu können. Insbesondere freuen wir uns moderatius no est, modus senserit efficiendi sed ex, ad vide nostrud maluisset ius. To Introduction blandit tacimates abhorreant ea quo.Duis ornare, est at lorem ipsum lobortis mollis, felis libero mollis orci, vitae congue neque lectus vel neque. exeos tale dolor, volumus theophrastus ea ius Jump To Service qui animal expetenda no, natum forensibus pri in. Ne mei justo lorem nonumy.

No ius consul dolores erroribus, malorum postulant omittantur ex quo. Pri ei essent quodsi diceret, suas tincidunt accommodare nam ut. Ne omnes homero vis, an ubique honestatis per. Vel id tacimates dissentias. Mea eu regione viderer, eu vix tota ferri velit, pro et ipsum menandri intellegat.

Ei purto timeam equidem quo. In vix audiam invidunt. Melius quaeque liberavisse at cum, ex labores luptatum quaestio pro, cum ut dico wisi. At his quis torquatos, cum ea soleat aperiri alienum. Probo postulant adolescens no sit, pri et aliquip explicari.
Mehr Erfahren

Last but not least some words to say

Sie könnnen es sich aussuchen, ob Sie Links per Box-Fenster oder als normalen Link öffen. Hier nachstehend das Beispiel ohne Boxfenster. Dieser Button-Link verweist auf eine Seite innerhalb dieser Homepage. In diesem Beispiel wird die Seite 'Sextus' (index6.html) geöffnet. Dort gibt es übrigens noch einige Hinweise zu den Bildern und Icons.
Mehr Erfahren

Box-Fenster Introduction

Fenster öffnen auf der selben Seite

Per div-Box öffnen sich Fenster direkt innerhalb der selben Seite bei Klick auf den Buttons 'Mehr', 'Weiter' oder ähnlich. Gerne legen Sie nach diesem Prinzip nur bei Bedarf weitere neue Fenster an bzw. löschen Sie auch nicht benötigte.




Neue Fenster anlegen

Hinweis: Der fettgedruckte Teil bei den nachfolgenden Code-Beispielen soll Ihnen bereits zeigen, wie Sie ein neues Fenster anlegen bzw. zum vorhandenen Code hinzufügen!

So sieht die Verlinkung bei den Buttons/Links 'Introduction', 'Service' und 'About Us' in der HTML-Datei aus. 
HTML
<label for="open-introduction"><a>Weiter</a></label>
<label for="open-service"><a>Weiter</a></label>
<label for="open-about"><a>Weiter</a></label>
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
So sieht also ein einzelner Text-Link zum Fenser öffnen aus: 
HTML
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
Dieser Text-Link funktioniert schon prima und würde auch reichen, aber um gfls. je nach Situation daraus einen Button zu machen, haben wir für die diesbezügliche Formatierung noch unsere CSS-Klassen 'button' und 'mehr_lesen' darum herum gelegt: 
HTML
<div class="button"><span class="mehr_lesen">
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
</span></div>
Und hier ist die dazugehörige Einschalt-Funktion dieser Fenster in der CSS-Datei ('boxfenster.css): 
CSS
/* schaltfunktion AN / AUS */
input#open-introduction:checked ~ .boxfenster,
input#open-service:checked ~ .boxfenster,
input#open-about:checked ~ .boxfenster ,
input#open-ihr-fenster:checked ~ .boxfenster {
margin:0;
background:rgba(0,0,0,.7);
opacity:1;
}
Das eigentliche Fenster ist in der HTML-Datei dann wie folgt unter Einbindung eines Fenster-Schließen-Buttons gestaltet, hier am Beispiel des 'Introduction-Links': 
HTML
<div class="schalter">
<input type="checkbox" id="open-introduction">
<div class="boxfenster">
<div class="boxinhalt">
<label class="button-close" for="open-introduction"><i class="far fa-window-close"></i></label>
. . . Hier steht der Introduction Text . . .
</div></div></div>
Und so würde es entsprechend für ihr neu anzulegendes Fenster aussehen: 
HTML
<div class="schalter">
<input type="checkbox" id="open-ihr-fenster">
<div class="boxfenster">
<div class="boxinhalt">
<label class="button-close" for="open-ihr-fenster"><i class="far fa-window-close"></i></label>
. . . Hier steht der Text fuer ihr neues Fenster . . .
</div></div></div>

 

Box-Fenster Service

More Services 01

Lorem ipsum dolor sit amet, ad graece repudiare elaboraret mei, utamur accumsan phaedrum sea ad. In eos erat iriure vivendum, ex pri laudem omittam, sed vero iriure necessitatibus no. Sit ea hinc discere iudicabit, eligendi perfecto pertinax vel ex. Mea ne minim graece appareat, affert consequat cum cu, an eos falli appareat. In porro voluptua mea, ex vim mediocrem forensibus scripserit, cu sea soleat aeterno tractatos. Audiam moderatius an est.

More Services 02

Ut pro sint phaedrum. At dolores maluisset intellegebat his, vel postulant intellegam an, duo rebum mandamus accusamus et. Audiam iisque bonorum cum an, simul reformidans comprehensam pri ne, at graecis iracundia suscipiantur vix. Eos malis eruditi in, te vel mandamus indoctum accommodare.

Unum reprimique instructior an his, te nullam nostrum vis. Quot principes omittantur eos ut, iudicabit euripidis quo ad, his cibo nostrud dolores et. Mea ad laudem intellegat, eu sumo consul dicunt nec.

More Services 03

Vim no sonet dicunt temporibus, tibique persecuti his in, sit iudico altera euismod cu. Vix te eros vivendo intellegam, sumo facete no pro. Vel causae singulis accusata eu, mea commune copiosae ei, nam vero invenire id. Nec te clita moderatius, natum assum homero eos id. Cu odio corrumpit eam. An posse dicit animal pro, duo falli dicit ponderum ex, an elit delicata gubergren mea.

 

Box-Fenster Presentation-1

Presentation 1 Info

Die Minions meinen: Me want bananaaa! Underweaaar jiji tatata bala tu pepete para tú bappleees tatata bala tu underweaaar. Pepete hahaha tatata bala tu bananaaaa hana dul sae gelatooo baboiii bappleees poulet tikka masala bananaaaa po kass. Wiiiii underweaaar tatata bala tu tulaliloo uuuhhh. Bee do bee do bee do bee do bee do bee do uuuhhh aaaaaah gelatooo wiiiii bananaaaa bananaaaa.

La bodaaa poulet tikka masala pepete jeje. La bodaaa la bodaaa uuuhhh jiji pepete gelatooo bappleees hahaha daa bappleees. La bodaaa tulaliloo para tú ti aamoo! Tatata bala tu la bodaaa. Minions Ipsum. Me want bananaaa!




Jeje chasy tank yuuu! Pepete poulet tikka masala baboiii. Daa jeje chasy daa jeje bee do bee do bee do gelatooo uuuhhh tatata bala tu daa. Underweaaar pepete jeje jiji. Tatata bala tu bappleees pepete potatoooo hahaha jiji bee do bee do bee do jiji jiji me want bananaaa! Ti aamoo! Hana dul sae poopayee tatata bala tu para tú bee do bee do bee do jeje. Jeje chasy tank yuuu! Butt me want bananaaa! Gelatooo la bodaaa tatata bala tu ti aamoo! Baboiii butt.

Excelsior documenta es profundis

  • Vamos a la playa
  • Que hora es
  • No tengo dinero
  • El mar es azul

Magna charta bella terra


Lorem bonus at Ipsum

 

Box-Fenster Presentation-2

Presentation-2 Info

Kevin ist ein großer, länglicher Minion mit zwei Augen und aufsprießenden Haaren. Er trägt meist seine Golfkleidung. Kevin sagt: Uuuuhhh belloo! Wiiiii hana dul sae baboiii me want bananaaa! Chasy butt poopayee tank yuuu! Para tú bappleees tank yuuu! Pepete tank yuuu! Chasy potatoooo. Pepete la bodaaa ti aamoo! Chasy. Jiji bee do bee do bee do po kass tatata bala tu daa bee do bee do bee do uuuhhh bee do bee do bee do jeje hahaha daa. Jiji la bodaaa belloo! Pepete baboiii baboiii potatoooo.

Belloo! Baboiii bappleees poulet tikka masala hana dul sae. Hana dul sae baboiii bee do bee do bee do butt jeje chasy po kass butt tank yuuu! Jiji belloo! Tank yuuu! Poopayee gelatooo daa tulaliloo wiiiii. Potatoooo butt chasy po kass butt.




Daa wiiiii me want bananaaa! Tatata bala tu baboiii underweaaar wiiiii poopayee potatoooo. Po kass belloo! Jiji jeje. Chasy la bodaaa la bodaaa potatoooo gelatooo tulaliloo ti aamoo! Uuuhhh. Hahaha tank yuuu! Me want bananaaa! Uuuhhh underweaaar me want bananaaa!

 

Box-Fenster Presentation-3

Presentation-3 Info

Bob ist ein süßer, kleiner Minion. Er ist etwas dicklich und liebt seinen Teddy sehr. Bob sagt: Poulet tikka masala hana dul sae bappleees bee do bee do bee do para tú ti aamoo! Potatoooo. Bappleees jiji jeje potatoooo bee do bee do bee do bananaaaa. Gelatooo potatoooo poulet tikka masala poopayee bee do bee do bee do tatata bala tu poulet tikka masala. Me want bananaaa! me want bananaaa!

Butt hana dul sae chasy bananaaaa tatata bala tu. Bananaaaa la bodaaa potatoooo chasy potatoooo jeje butt jeje underweaaar tulaliloo. Tulaliloo daa bappleees belloo! Poulet tikka masala bee do bee do bee do aaaaaah me want bananaaa! Me want bananaaa! Tulaliloo gelatooo bananaaaa uuuhhh aaaaaah aaaaaah gelatooo tatata bala tu po kass bananaaaa.


 

Box-Fenster Presentation-4

Presentation-4 Info

Stuart hat ein Auge, einen Mittelscheitel und ist häufig hungrig.

Stuart schreit: Aaaaaah jeje uuuhhh tatata bala tu belloo! Bee do bee do bee do jiji bappleees potatoooo. Hahaha tank yuuu! Uuuhhh poulet tikka masala la bodaaa hana dul sae belloo! Ti aamoo! Uuuhhh. Poulet tikka masala bee do bee do bee do butt wiiiii poulet tikka masala bee do bee do bee do pepete bee do bee do bee do la bodaaa.

Minions ipsum butt baboiii butt wiiiii. Tank yuuu! poopayee poopayee uuuhhh baboiii baboiii bee do bee do bee do jeje tatata bala tu daa. Me want bananaaa! uuuhhh underweaaar potatoooo bananaaaa aaaaaah aaaaaah. Poopayee baboiii para tú tank yuuu! Aaaaaah bee do bee do bee do. Chasy aaaaaah para tú baboiii jeje. Daa baboiii gelatooo underweaaar uuuhhh la bodaaa. Belloo! chasy butt aaaaaah.

 

Box-Fenster About

Schrifteinheit REM

Wir verwenden als Schrifteinheit nicht PX, PT oder EM sondern REM. Die Verwendung von REM ermöglicht flexible Schriftgrößen, die sich prozentmässig anpassen. Beim TAG HTML setzen wir in der CSS-Datei die font-Angabe auf 62.5%, welches ca.10 Pixel (px) entspricht.
Hier noch ein Hinweis: Ein Wert von 100% entspricht 16 Pixel (px), wobei 16 Pixel die Standardgröße bei Schriften im Browser ist.

Warum schreiben wir 62.5 % statt 100 % ?
Damit wir nicht ständig die Formel (Pixelwert geteilt durch 16 = rem Wert) anwenden müssen, bei der es krumme, unübersichtliche rem-Werte gibt. Mehr zu der Formel mit Beispiel weiter unten. Es ist so, der umgerechnete Wert läßt sich viel leichter in Bezug zum gewohnten Pixelwert setzen, es erleichtert einfach das Arbeiten. Denn so ergibt sich zum Beispiel:

0.1 rem = 1 px
1 rem = 10 px
1.4 rem = 14 px
2.6 rem = 26 px
30 rem = 300 px

So oder so ähnlich, denn dies ist ein Beispiel, sieht es dann der Code in der CSS-Datei aus: 
CSS
html {
font-size:62.5%;
line-height:1.5;
font-family: georgia, helvetica, serif;
}
Dann folgen die Angabe der Schriftgröße und der Überschriften. 
CSS
body {font-size:1.7rem}
h1 {font-size:3.4rem}
h2 {font-size:2.5rem}
h3 {font-size:1.9rem}
Nachfolgend zwei Beispiele für die prozentmässige Weitervererbung innerhalb der CSS Media Queries:
Bei der Abfrage der Bildschirmbreite ab 1024 Pixel reicht der geänderte Prozentwert und auch bei der Abfrage ab 1280 Pixel reicht der geänderte Prozentwert. 
CSS
@media (min-width: 1024px) {
html {font-size: 68% }
}
@media (min-width: 1280px) {
html {font-size: 72% }
}
Vorteil von REM:
Die Schrift-Werte von z.B. body, h1, h2, h3 müssen nur ein einziges Mal ganz oben im Quellcode und dann nicht mehr wieder angegeben werden und vererben sich im genannten prozentualem Verhältnis einfach weiter. Das gleiche gilt auch für alle anderen HTML-Elemente, die einen Größenwert benötigen, wie z.b. width, height, margin, padding usw., denn wir verwenden die REM-Einheit hier generell im Template.

Ausnahmen von REM:
Wenn wir gelegentlich zusätzlich Pixelwerte (px) verwenden, so hat das folgende Bedeutung:
1. Sehr kleine Werte von 0.1rem oder 0.2rem haben bei der prozentmässigen Weitervererbung keine Auswirkungen.
2. Es ist keine prozentmässige Weitervererbung erwünscht.
Nur als Beispiel verwenden wir für einen Rahmen (border) also 'border:solid 1px black'.




Die allgemeine Formel zur Umrechnung von Pixel zu REM: Man teilt den Pixelwert durch 16 (18/16 = 1.125). Voraussetzung: Die Schriftgröße des Root-Elements ist auf 100% gesetzt und man geht von der 16px Standard-Schriftgröße aus. Beispiel: Die Schriftgröße von 18px entspricht 1.125rem.