Powerstylezcom

Um die HTML Startseite für ihre Woltlab Suite 5 / Woltlab Suite 3 zu erstellen gehen Sie bitte wie folgt vor (Sie können auch die Checkbox nach jedem abgearbeiteten Arbeitsschritt aktivieren):

• Erstellen Sie im Admin Control Panel (ACP) unter folgenden Pfad eine neue Seite:

  
  

  Inhalt > Seiten > Seite hinzufügen (Plus-Symbol klicken)

  1



• Es öffnet sich ein Pop up-Fenster, dort folgendes auswählen und dann speichern:

  
  

  Seiten-Typ: HTML

  Mehrsprachigkeit: Bleibt ihnen überlassen (Version Deutsch und Englisch in dieser Anleitung vorhanden)

  2



• Tragen sie auf der angezeigten Seite (allgemeine Angaben) folgende Angaben ein und wählen diverse Felder aus:

  
  

  Name: HTML-Startseite

  Individuelle URL: Bleibt ihnen überlassen

  Seite ist Startseite: Aktivieren

  3



• Tragen sie auf der unter dem Registernamen "Inhalte" angezeigten Seite folgende Angaben ein:

  
  

  Titel: HTML-Startseite (bei mehrsprachigen Boxeninhalt dementsprechend im jeweiligen Eingabefeld)

  Fügen Sie den folgenden Code in das Feld "Inhalt" ein (bei mehrsprachigen Boxeninhalt dementsprechend im jeweiligen Eingabefeld):

  
  

  Deutsche Startseite:

  
  <!-- HTML Startseite Demo fuer WSC 5 / WSC 3 DE Design & coding by Gino Zantarelli https://www.powerstylez.com --> <div id="GZcustompagecontainer"> <div class="row section hinweis"> <div class="col-md-12"> <h5>Willkommen auf der Demo-Startseite Version 1.4!</h5> <p>Diese Seite, gestaltet und umgesetzt von <a href="https://www.powerstylez.de"><b>Gino Zantarelli</b></a>, zeigt Ihnen ein paar Beispiele in reinem HTML (mit teilweiser Java Script-Unterstützung, welche schon direkt eingebunden ist!) wie man eine Anfangsseite realisieren könnte. Leider lässt sich durch die HTML-Formatierung eine Einbindung von Funktionen des Woltlab-CMS nicht direkt realisieren, man kann aber selbst erstellte Boxen Standardmäßig einbinden.</p> <br/> <p>Ein weiterer, kleiner Nachteil ist die ignorierung der aktuellen Breakpoints für mobile Ansichten vom Woltlab CMS (welche nicht direkt auf dieser Seite im Style-Container genutzt werden können), nur die Breakpoints mit Pixelangabe (wie vom älteren WBB 4 bekannt) sind aktiv. Über die CSS-Definition eines Stils oder das Stilübergreifende CSS können aber die neueren Breakpoints für die erstellte Seite angesprochen werden, alle Beispiele auf dieser Seite sind für die Mobilanzeige schon optimiert.</p> <br/> <h6>Stilanpassungen für verschiedene Stile:</h6> <p>Diverse CSS-Anpassungen können in der jeweiligen CSS-Definition des zu verwendeten Stils durchgeführt werden, als Bezug ist der Inhalt in einem Container mit ID <xmp class="fieldsmall"><div id="GZcustompagecontainer"></xmp> gesetzt.</p> <br/> <h6>Wo kann ich die Hauptfarben sowie CSS-Formatierungen anpassen?</h6> <p>Die Anpassungen können direkt im Quellcode dieser Seite im unteren "Style"-Bereich bearbeitet werden. Durch die von mir gesetzten Markierungen wie z. Bspl. <xmp class="fieldsmall">/*Hintergrundfarbe*/</xmp> oder <xmp class="fieldsmall">/*Umrandung Textinhalt*/</xmp> sollten die anzupassenden Codestellen relativ schnell gefunden werden.</p> <br/> <p>NEU: Soll der teiltransparente Hintergrund in dargestellter HERO-Box angepasst werden, so findet man unter dem Codeblock <xmp class="fieldsmall">#GZcustompagecontainer .herobg .col-md-12</xmp> die Anpassung für helle sowie dunkle Bilder.</p> <br/> <p>Über die CSS-Definition eines Stils oder das Stilübergreifende CSS können die vorgebenen Farbcodes auch für verschiedene Stile überschrieben werden, es muss dann aber im Code ein <xmp class="fieldsmall">{MEINCODE !important;}</xmp> gesetzt sein um dieses zu erzwingen!</p> <br/> <h6>Wo finde ich die zu bearbeitenden Blockarten?</h6> <p>Da diese Seite diverse Blocks mit verschiedenen Inhalten nutzt ist eine Markierung im Quellcode eingebaut wie z. Bspl. <xmp class="fieldsmall"><-- Start Herobild --></xmp> und <xmp class="fieldsmall"><-- Ende Herobild --></xmp> , die Blocks sollten damit leicht zu finden sein...</p> </div> </div> <!-- Start Herobild --> <div class="herobg section"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <h1>Hallo ... ich bin ein 'Hero' H1-Titeltext!</h1> <p class="subtitle">Dieses ist der 'Subtitle'-Text des Herobildes und kann beliebig in der angelegten Seite angepasst werden. Machen sie hier auf den Inhalt ihres CMS oder Forum aufmerksam - das ist wichtig für evtl. Besucher.</p> <ul class="buttonGroup"> <li><a href="https://www.w3schools.com" class="button">Das ist Button #1</a></li> <li><a href="https://www.woltlab.com/de" class="button">Das ist Button #2</a></li> <li><a href="https://www.powerstylez.com" class="button buttonPrimary">Das ist ein aktiver Button</a></li> </ul> </div> <div class="mouse_scroll"><a href="#" class="nav-link" data-id="anchor1"> <div class="mouse"> <div class="wheel"></div> </div> <div> <span class="m_scroll_arrows one"></span> <span class="m_scroll_arrows two"></span> <span class="m_scroll_arrows tree"></span> </div> </a></div> </div> <!-- Ende Herobild --> <!-- Start Anchor Scrollpoint --><div id="anchor1" ></div><!-- Ende Anchor Scrollpoint --> <!-- Start Scrollpoints --> <div class="row section"> <div class="col-md-12"> <h3 class="title">Scrollpoints (Sprungmarken)</h3> <p>Diese Button sind mit sogenannten Scrollpoints verknüpft, wenn man schnell zu einer bestimmten Sektion möchte springt die Webseite auf die markierte Stelle.Man kann mit einfügen von ID´s, z. Bspl. <xmp class="fieldsmall">data-id="anchor1"</xmp> im Hauptlink und dann im Content eingefügten Code <xmp class="fieldsmall"><div id="anchor1"></div></xmp> diesen Scrollpoint ansprechen, es müssen laufende Nummern verwendet werden für diverse Punkte (anchor1, anchor2, anchor3 ...)</p> <br/> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor1">Scrollpoint #1</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor2">Scrollpoint #2</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor3">Scrollpoint #3</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor4">Scrollpoint #4</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor5">Scrollpoint #5</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor6">Scrollpoint #6</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor7">Scrollpoint #7</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor8">Scrollpoint #8</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor9">Scrollpoint #9</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor10">Scrollpoint #10</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor11">Scrollpoint #11</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor12">Scrollpoint #12</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor13">Scrollpoint #13</a> </li> <li class="nav"> <a href="#" class="nav-link button buttonPrimary" data-id="anchor14">Scrollpoint #14</a> </li> </div> </div> <!-- Ende Scrollpoints --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Titel & Text --> <div class="row section"> <div class="col-md-12"> <h2 class="title">Dieses ist ein H2-Titel</h2> <p>Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. Clock round the earhole <a href="#">scrumpy</a> bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> <br/> <p><i>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</i></p> </div> </div> <!-- Ende Titel & Text --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor2"> >>>>>>>>>>> Scrollpoint 2 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Hinweisboxen --> <div class="row section announcebox"> <div class="col-md-3"> <i class="fa fa-user-circle"></i> <h6 class="title">Dieses ist ein H6-Boxentitel</h6> <p>Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more cowbell first-order optimal strategies. Not a hill to die on peel the onion out of the loop win-win, for staff engagement, nor market-facing.</p> <p><a href="#" class="button">Button</a></p> </div> <div class="col-md-3"> <i class="fa fa-comments-o"></i> <h6 class="title">Ein Boxentitel mit <span class="font-weight-bold">fetten Text</span></h6> <p class="font-weight-bold">Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more cowbell first-order optimal strategies. Not a hill to die on peel the onion out of the loop win-win, for staff engagement, nor market-facing.</p> </div> <div class="col-md-3"> <i class="fa fa-users"></i> <h6 class="title">Ein Boxentitel mit <i>schrägen Text</i></h6> <p><i>Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more cowbell first-order optimal strategies. Not a hill to die on peel the onion out of the loop win-win, for staff engagement, nor market-facing.</i></p> </div> <div class="col-md-3"> <i class="fa fa-lightbulb-o"></i> <h6 class="title">Ein Boxentitel mit <a href="#">Weblink</a></h6> <p>Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more <a href="https://www.youtube.com/watch?v=nd-_UwzSSvQ">Punk</a> first-order optimal strategies. Not a hill to die on peel the <a href="#">onion</a> out of the loop win-win, for staff engagement, nor market-facing.</p> </div> </div> <!-- Ende Hinweisboxen --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor3" > >>>>>>>>>>> Scrollpoint 3 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Bild mit Text Box --> <div class="row section picturebox"> <div class="col-md-4"> <img src="https://picsum.photos/0?random" alt=""> </div> <div class="col-md-8"> <h2 class="title">Dieses ist ein H2-Titel</h2> <p class="subtitle">Hier steht der 'Subtitle' um eine Beschreibung anzuzeigen...</p> <p>Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more cowbell first-order optimal strategies. Not a hill to die on peel the <a href="#">onion</a> out of the loop win-win, for staff engagement, nor market-facing.</p> <br/> <p><a href="#" class="button buttonPrimary">Aktiver Button</a></p> </div> </div> <!-- Ende Bild mit Text Box --> <!-- Start Bild mit Text Box --> <div class="row section picturebox"> <div class="col-md-8 right"> <h2 class="title">Dieses ist ein H2-Titel</h2> <p class="subtitle">Hier steht der 'Subtitle' um eine Beschreibung anzuzeigen...</p> <p>Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more cowbell first-order optimal strategies. Not a hill to die on peel the <a href="#">onion</a> out of the loop win-win, for staff engagement, nor market-facing.</p> <br/> <p><a href="#" class="button buttonPrimary">Aktiver Button</a></p> </div> <div class="col-md-4"> <img src="https://picsum.photos/0?random" alt=""> </div> </div> <!-- Ende Bild mit Text Box --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor4" > >>>>>>>>>>> Scrollpoint 4 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Bilderslider --> <div class="section sliderbox"> <div class="col-md-12"> <h3 class="title">Bilderslider (Sheet Slider)</h3> <p>Das ist der Sheet Bilderslider (<a href="https://github.com/zkreations/SheetSlider">» Sheet Slider Webseite</a>) mit diversen Titelanzeigen sowie Links, Vor/Zurück und Pausenfunktion. Es können maximal <b>10 Bilder</b> eingebunden werden.</p> <br/> <!--Sheet Slider--> <div class="sheetSlider sh-default sh-auto"> <input id="s1" type="radio" name="slide1" checked/> <input id="s2" type="radio" name="slide1"/> <input id="s3" type="radio" name="slide1"/> <input id="s4" type="radio" name="slide1"/> <input id="s5" type="radio" name="slide1"/> <input id="s6" type="radio" name="slide1"/> <div class="sh__content"> <!-- Slider Item 1 --> <div class="sh__item"> <img src="https://picsum.photos/1280/720?image=180" alt=""/> <!-- Item Info --> <div class="sh__meta"> <h1>Ich bin ein H1-Titeltext!</h1> <span>Hier steht der Untertitel um eine Beschreibung anzuzeigen...</span> </div> </div> <!-- Slider Item 2 --> <div class="sh__item"> <img src="https://picsum.photos/1280/720?image=290" alt=""/> <!-- Item Info --> <div class="sh__meta"> <h2>... und ich bin ein H2-Titeltext!</h2> <span>Hier steht der Untertitel mit <a href="https://www.unsplash.com">Weblink</a></span> </div> </div> <!-- Slider Item 3 --> <div class="sh__item"> <a href="https://www.unsplash.com"><img src="https://picsum.photos/1280/720?image=350" alt=""/></a> <!-- Item Info --> <div class="sh__meta"> <h4>Bild mit Weblink</h4> <span>Leitet bei Klick auf das Bild weiter nach <a href="https://www.unsplash.com">Unsplash.com</a></span> </div> </div> <!-- Slider Item 4 --> <div class="sh__item"> <img src="https://picsum.photos/1280/720?image=460" alt=""/> <!-- Item Info --> <div class="sh__meta"> <h3>Ich bin ein H3-Titeltext!</h3> <span>Hier steht der Untertitel um eine Beschreibung anzuzeigen...</span> </div> </div> <!-- Slider Item 5 --> <div class="sh__item"> <img src="https://picsum.photos/1280/720?image=530" alt=""/> <!-- Item Info --> <div class="sh__meta"> <h4>Ich bin ein H4-Titeltext!</h4> <span>Hier steht der Untertitel um eine Beschreibung anzuzeigen...</span> </div> </div> <!-- Slider Item 6 --> <div class="sh__item"> <a href="https://www.unsplash.com"><img src="https://picsum.photos/1280/720?image=680" alt=""/></a> <!-- Item Info --> <div class="sh__meta"> <h4>Bild mit Weblink</h4> <span>Leitet bei Klick auf das Bild weiter nach <a href="https://www.unsplash.com">Unsplash.com</a></span> </div> </div> </div> <!-- .sh__content --> <!-- Button --> <div class="sh__btns"> <label for="s1"></label> <label for="s2"></label> <label for="s3"></label> <label for="s4"></label> <label for="s5"></label> <label for="s6"></label> </div> <!-- .sh__btn --> <!-- Arrows --> <div class="sh__arrows"> <label for="s1"></label> <label for="s2"></label> <label for="s3"></label> <label for="s4"></label> <label for="s5"></label> <label for="s6"></label> </div> <!-- .sh__arrows --> <!--Control--> <button class="sh-control"></button> </div> <!-- .sheetSlider --> </div> </div> <!-- Ende Bilderslider --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor5" > >>>>>>>>>>> Scrollpoint 5 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start 3 Column Textboxes --> <div class="row section"> <div class="col-md-4"> <h5 class="title">Column 1</h5> <p>I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.</p> </div> <div class="col-md-4 center"> <h5 class="title">Column 2 (center)</h5> <p>I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.</p> <br/> <p><a href="#" class="button">Button</a></p> </div> <div class="col-md-4"> <h5 class="title">Column 3</h5> <p>I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.</p> </div> </div> <!-- Ende 3 Column Textboxes --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor6" > >>>>>>>>>>> Scrollpoint 6 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Titel & Text --> <div class="row section"> <div class="col-md-12"> <h2 class="title right">Dieses ist ein H2-Titel (right)</h2> <p>Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. Clock round the earhole <a href="#">scrumpy</a> bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa. </p> <br/> <p><small>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</small></p> </div> </div> <!-- Ende Titel & Text --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor7" > >>>>>>>>>>> Scrollpoint 7 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Pricing Table --> <div class="row section pricing"> <div class="col-md-12"> <h2 class="title">Preistabellen (responsive)</h2> <p>Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. Clock round the earhole <a href="#">scrumpy</a> bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> <div class="columnsOne"> <ul class="price"> <li class="header">Basic</li> <li class="subtable">€ 9.99 / monatlich</li> <li>10GB Speicherplatz</li> <li>10 E-Mail Postfächer</li> <li>10 Domains</li> <li>1GB Bandbreite</li> <li class="Pbottom"><a href="#" class="button">Bestellen</a></li> </ul> </div> <div class="columnsTwo"> <ul class="price"> <li class="header pro">Pro</li> <li class="subtable">€ 100.90 / jährlich</li> <li>Unbegrenzter Speicherplatz</li> <li>250 E-Mail Postfächer</li> <li>25 Domains <a href="https://www.powerstylez.de">(mehr Informationen)</a></li> <li>6GB Bandbreite</li> <li class="Pbottom"><a href="#" class="nav-link button buttonPrimary">Jetzt bestellen!</a></li> </ul> </div> <div class="columnsThree"> <ul class="price"> <li class="header">Premium</li> <li class="subtable">€ 29.99 / monatlich</li> <li>50GB Speicherplatz</li> <li>50 E-Mail Postfächer</li> <li>12 Domains</li> <li>2GB Bandbreite</li> <li class="Pbottom"><a href="#" class="button">Bestellen</a></li> </ul> </div> </div> <!-- Ende Pricing Table --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor8" > >>>>>>>>>>> Scrollpoint 8 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Portfolio --> <div class="row section"> <h2 class="title">Portfolio</h2> <p>Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. Clock round the earhole <a href="#">scrumpy</a> bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> <br/> <p><i>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</i></p> <div class="portfolio section"> <ul class="grid"> <li> <figure> <img src="https://picsum.photos/1280/720?random" alt=""> <figcaption> <h3>Random Image</h3> <span>Wechselt beim wiederholten Aufruf</span> <a href="https://picsum.photos/" class="button">Details</a> </figcaption> </figure> </li> <li> <figure> <img src="https://picsum.photos/1280/720?image=369" alt=""> <figcaption> <h3>Picsum Image</h3> <span>Gibt es hier: https://picsum.photos</span> <a href="#" class="button">Details</a> </figcaption> </figure> </li> <li> <figure> <img src="https://picsum.photos/g/1280/720?image=369" alt=""> <figcaption> <h3>Picsum Image (GS)</h3> <span>Gibt es hier: https://picsum.photos</span> <a href="#" class="button">Details</a> </figcaption> </figure> </li> </ul> <ul class="grid"> <li> <figure> <img src="https://picsum.photos/1280/720?image=619" alt=""> <figcaption> <h3>Picsum Image</h3> <span>Gibt es hier: https://picsum.photos</span> <a href="#" class="button">Details</a> </figcaption> </figure> </li> <li> <figure> <img src="https://picsum.photos/1280/720?image=184" alt=""> <figcaption> <h3>Picsum Image</h3> <span>Gibt es hier: https://picsum.photos</span> <a href="#" class="button">Details</a> </figcaption> </figure> </li> <li> <figure> <img src="https://picsum.photos/1280/720?image=621" alt=""> <figcaption> <h3>Schönes Bild</h3> <span>...von unbekannten Fotograf</span> <a href="#" class="button">Details</a> </figcaption> </figure> </li> </ul> </div> </div> <!-- Ende Portfolio --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor9" > >>>>>>>>>>> Scrollpoint 9 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Counterboxes --> <div id="counter"> <div class="row section counterbox"> <div class="col-md-3"> <i class="fa fa-code"></i> <h2 class="counter-value count-title" data-to="5600" data-count="5600">0</h2> <p class="count-text ">Zeilen CSS-Code geschrieben</p> </div> <div class="col-md-3"> <i class="fa fa-coffee"></i> <h2 class="counter-value count-title" data-to="1700" data-count="1700">0</h2> <p class="count-text ">Liter starken Kaffee getrunken</p> </div> <div class="col-md-3"> <i class="fa fa-bed"></i> <h2 class="counter-value count-title" data-to="23" data-count="23">0</h2> <p class="count-text ">Tage & Nächte programmiert</p> </div> <div class="col-md-3"> <i class="fa fa-thumbs-o-up"></i> <h2 class="counter-value count-title" data-to="157" data-count="157">0</h2> <p class="count-text ">positive Bewertungen von Kunden</p> </div> </div> </div> <!-- Ende Counterboxes --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor10" > >>>>>>>>>>> Scrollpoint 10 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start GAccordion --> <div class="gaccordion section"> <h3 class="title">Das ist ein Accordion Menu</h3> <p class="subtitle">Hier steht der Untertitel um eine Beschreibung anzuzeigen...</p> <li class="gaccordion">Section 1</li> <div class="gpanel"> <p> I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please. We don't need a backup, it never goes down! can you make it stand out more? so can you make it look more designed so i know you've made thirty iterations but can we go back to the first one that was the best version nor the target audience is makes and famles aged zero and up, i was wondering if my cat could be placed over the logo in the flyer yet I think we need to start from scratch. Make it sexy something summery; colourful. This is just a 5 minutes job is this the best we can do, and make it look like Apple, for i love it, but can you invert all colors? and can you make it more infographic-y. It's great, can you add a beard though is this the best we can do could you rotate the picture to show the other side of the room? and could you solutionize that for me. The hair is just too polarising. What is a hamburger menu other agencies charge much lesser it looks a bit empty, try to make everything bigger can you put "find us on facebook" by the facebook logo? for is this the best we can do, I know somebody who can do this for a reasonable cost, so that's great, but we need to add this 2000 line essay. You can get my logo from facebook I got your invoice...it seems really high, why did you charge so much, nor doing some work for us "pro bono" will really add to your portfolio i promise. There is too much white space is this the best we can do, mmm, exactly like that, but different, the flier should feel like a warm handshake, but I know somebody who can do this for a reasonable cost, or make it pop can you rework to make the pizza look more delicious. Do less with more i love it, but can you invert all colors? can you help me out? you will get a lot of free exposure doing this other agencies charge much lesser, so we have big contacts we will promote you, nor the website doesn't have the theme i was going for. We don't need a contract, do we doing some work for us "pro bono" will really add to your portfolio i promise. Start on it today and we will talk about what i want next time . Make it look like Apple can you make it more infographic-y so try a more powerful colour theres all this spanish text on my site this was not according to brief.</p> </div> <li class="gaccordion">Section 2</li> <div class="gpanel"> <p>Lorem ipsum...</p> </div> <li class="gaccordion">Section 3</li> <div class="gpanel"> <p> You are lucky to even be doing this for us we try your eye, but can you change everything? and I know somebody who can do this for a reasonable cost, or give us a complimentary logo along with the website, nor can we barter services?. Can't you just take a picture from the internet? can't you just take a picture from the internet? make it look like Apple i was wondering if my cat could be placed over the logo in the flyer can it be more retro. The target audience is makes and famles aged zero and up i love it, but can you invert all colors? and do less with more. Can you turn it around in photoshop so we can see more of the front can you pimp this powerpoint, need more geometry patterns other agencies charge much lesser. The website doesn't have the theme i was going for I want you to take it to the next level. Doing some work for us "pro bono" will really add to your portfolio i promise we try your eye, but can you change everything?. This looks perfect. Just Photoshop out the dog, add a baby, and make the curtains blue make it original. Can you put "find us on facebook" by the facebook logo? that's great, but can you make it work for ie 2 please nor you might wanna give it another shot, for can it be more retro. We try your eye, but can you change everything? can you lower the price for the website? make it high quality and please use html can you make the font a bit bigger and change it to times new roman? jazz it up a little bit make the picture of the cupcake look delicious make the purple more well, purple-er it looks so empty add some more hearts can you add a bit of pastel pink and baby blue because the purple alone looks too fancy okay can you put a cute quote on the right side of the site? oh no it looks messed up! i think we need to start from scratch, for I want you to take it to the next level, for start on it today and we will talk about what i want next time , for there are more projects lined up charge extra the next time, and I want you to take it to the next level, nor can my website be in english?.</p> <p> <img src="https://cdn-icons-png.flaticon.com/512/265/265674.png" alt="Herb Doe" style="height:100px;width:100px;border-radius:100%;float:right;margin:0px 0px 20px 20px"> We are a startup can we have another option, but could you rotate the picture to show the other side of the room? it looks a bit empty, try to make everything bigger, but it's great, can you add a beard though but it's great, can you add a beard though . Remember, everything is the same or better what is a hamburger menu or needs to be sleeker, can you punch up the fun level on these icons this red is too red so there is too much white space. We are a startup it looks a bit empty, try to make everything bigger, or can my website be in english? or can you put "find us on facebook" by the facebook logo? but we are your relatives what you've given us is texty, we want sexy so make it sexy. Just do what you think. I trust you the flier should feel like a warm handshake that's great, but can you make it work for ie 2 please im not sure, try something else can you make it look more designed nor it looks a bit empty, try to make everything bigger could you move it a tad to the left. Just do what you think. I trust you it's great, can you add a beard though . There are more projects lined up charge extra the next time there are more projects lined up charge extra the next time, for can you use a high definition screenshot and could you do an actual logo instead of a font, yet I have an awesome idea for a startup, i need you to build it for me I have an awesome idea for a startup, i need you to build it for me or we are a big name to have in your portfolio. Could you solutionize that for me. We exceed the clients' expectations we are a non-profit organization, so could you move it a tad to the left it's great, can you add a beard though can you lower the price for the website? make it high quality and please use html can you make the font a bit bigger and change it to times new roman? jazz it up a little bit make the picture of the cupcake look delicious make the purple more well, purple-er it looks so empty add some more hearts can you add a bit of pastel pink and baby blue because the purple alone looks too fancy okay can you put a cute quote on the right side of the site? oh no it looks messed up! i think we need to start from scratch or other agencies charge much lesser. Can you please change the color theme of the website to pink and purple? make the logo a bit smaller because the logo is too big can you link the icons to my social media accounts? oh and please put pictures of cats everywhere are you busy this weekend? I have a new project with a tight deadline make it sexy. Start on it today and we will talk about what i want next time we are your relatives, for make it pop for needs to be sleeker.</p> </div> </div> <!-- Ende GAccordion --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor11" > >>>>>>>>>>> Scrollpoint 11 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Circlebox --> <div class="row section circlebox"> <div class="col-md-4"> <div class="circle" style='background: url("https://cdn-icons-png.flaticon.com/512/265/265674.png") no-repeat center / cover;'></div> <h2 class='title'>Das ist ein h2-Titel der 'Circle'-Box</h2> <p>I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.</p> </div> <div class="col-md-4"> <div class="circle" style='background: url("images/default-logo-small.png") no-repeat center;'></div> <h2 class='title'>Das ist ein h2-Titel der 'Circle'-Box</h2> <p>I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this <a href="#">2000</a> line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.</p> </div> <div class="col-md-4"> <div class="circle"><i class="fa fa-user-circle"></i></div> <h2 class='title'>Das ist ein h2-Titel der 'Circle'-Box</h2> <p>I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.</p> </div> </div> <!-- Ende Circlebox --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor12" > >>>>>>>>>>> Scrollpoint 12 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Teamboxes --> <div class="row section team"> <div class="col-md-12"> <h2 class="title">Das ist unser Team!</h2> <p>Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. Clock round the earhole <a href="#">scrumpy</a> bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> <div class="col-md-3"> <div class ="thumb"> <img src="https://images.unsplash.com/photo-1570483133451-ddc0616200d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80" alt=""> </div> <div class="team con"> <h3 class='title'>Jane Doe</h3> <span>Head of Development</span> <div class="team description"> <p>Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> <div class="contacticon"> <ul> <li><a href="mailto:community@powerstylez.com"><i class="far fa-envelope"></i> Email</a></li> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-instagram"></i></a></li> <li><a href="#"><i class="fab fa-xing"></i></a></li> </ul> </div> </div> </div> <div class="col-md-3"> <div class ="thumb"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80" alt=""> </div> <div class="team con"> <h3 class='title'>John Doe</h3> <span>Creative Director</span> <div class="team description"> <p>Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> <div class="contacticon"> <ul> <li><a href="mailto:community@powerstylez.com"><i class="far fa-envelope"></i> Email</a></li> <li><a href="#"><i class="fab fa-codepen"></i></a></li> <li><a href="#"><i class="fab fa-github"></i></a></li> <li><a href="#"><i class="fab fa-xing"></i></a></li> <li><a href="#"><i class="fab fa-linkedin-square"></i></a></li> </ul> </div> </div> </div> <div class="col-md-3"> <div class ="thumb"> <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80" alt=""> </div> <div class="team con"> <h3 class='title'>Walt Doe</h3> <span>Sales Managment</span> <div class="team description"> <p>Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> <div class="contacticon"> <ul> <li><a href="mailto:community@powerstylez.com"><i class="far fa-envelope"></i> Email</a></li> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-instagram"></i></a></li> <li><a href="#"><i class="fab fa-xing"></i></a></li> </ul> </div> </div> </div> <div class="col-md-3"> <div class ="thumb"> <img src="https://images.unsplash.com/photo-1609543232540-7d1af3591c20?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8ODYyfHxwZXJzb258ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=700&q=60" alt=""> </div> <div class="team con"> <h3 class='title'>Mary Doe</h3> <span>Head of Marketing</span> <div class="team description"> <p>Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> <div class="contacticon"> <ul> <li><a href="mailto:community@powerstylez.com"><i class="far fa-envelope"></i> Email</a></li> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-instagram"></i></a></li> <li><a href="#"><i class="fab fa-xing"></i></a></li> </ul> </div> </div> </div> </div> <!-- Ende Teamboxes --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor13" > >>>>>>>>>>> Scrollpoint 13 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Commentboxes --> <div class="row section"> <div class="col-md-12"> <h3 class="title">Kommentarboxen</h3> <p>Diese Boxen sollen Kommentare darstellen, es werden <strong>KEINE</strong> Daten von der verwendeten Software abgerufen da dieses Beispiel nur HTML beinhaltet.</p> <div class="commentbox"> <div class="commentbox-body"> <h6 class="title">Walt Doe <small><i> Posted on June 17, 2020</i></small></h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="Herb Doe" style="height:60px;width:60px;border-radius:100%"> </div> </div> </div> <div class="row section"> <div class="col-md-4"> <div class="commentbox"> <div class="commentbox-body"> <h6 class="title">Bob Doe <small><i> Posted on June 13, 2020</i></small></h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <img src="https://i1.wp.com/www.winhelponline.com/blog/wp-content/uploads/2017/12/user.png" alt="John Doe" style="height:60px;width:60px;border-radius:100%"> </div> </div> <div class="col-md-4"> <div class="commentbox"> <div class="commentbox-body"> <h6 class="title">Walt Doe <small><i> Posted on September 15, 2018</i></small></h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="Walt Doe" style="height:60px;width:60px;border-radius:100%"> </div> </div> <div class="col-md-4"> <div class="commentbox"> <div class="commentbox-body"> <h6 class="title">Jane Doe <small><i> Posted on September 15, 2018</i></small></h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <img src="https://cdn-icons-png.flaticon.com/512/3135/3135789.png" alt="Jane Doe" style="height:60px;width:60px;border-radius:100%"> </div> </div> </div> <!-- Ende Commentboxes --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor14" > >>>>>>>>>>> Scrollpoint 14 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Basic Beispiele --> <div class="row section"> <div class="col-md-12"> <h3 class="title">Überschriften</h3> <p class="subtitle">Das sind die Textbeispiele für diverse Überschriften, einmal als 'normale' Version und zusätzlich als 'title' Klassifizierungen.</p> <h1>h1 (70px)</h1> <h2>h2 (60px)</h2> <h3>h3 (50px)</h3> <h4>h4 (40px)</h4> <h5>h5 (30px)</h5> <h6>h6 (18px)</h6> <br/> <h1 class="title">h1 class title (70px)</h1> <h2 class="title">h2 class title (60px)</h2> <h3 class="title">h3 class title (50px)</h3> <h4 class="title">h4 class title (40px)</h4> <h5 class="title">h5 class title (30px)</h5> <h6 class="title">h6 class title (18px)</h6> </div> <div class="row section"> <div class="col-md-12"> <h4 class="title">Zitatbox</h4> <quote> <h5 class="title">Das ist ein Zitat (quote) mit vergrößerten Textinhalt (130%)</h5> <p>Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. Clock round the earhole scrumpy bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </quote> </div> </div> <div class="row section"> <div class="col-md-12"> <h4 class="title">Markierter Text (auch als 'Highlight' bekannt)</h4> <p>Clock round the earhole scrumpy bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling. <mark>Das ist ein markierter Text (mark) mit <a href="#">Link</a> im Textinhalt.</mark> Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> </div> <div class="row section"> <div class="col-md-12"> <h4 class="title">Abbr Textlink</h4> <p>Das ist ein Text mit <abbr title="Das ist der Text beim Hoovereffekt">abbr-Inhalt (abbr)</abbr>, beim hoovern mit dem Mauszeiger wird ein selbst festgelegter Text angezeigt. Für den mobilen Einsatz ist diese Art von Hinweisangaben nicht geeignet, es empfiehlt sich dort mit <abbr title="Direkter Text sollte zwingend Mobil eingesetzt werden da sich Mobilgeräte anders verhalten">direkter Textanzeige</abbr> zu arbeiten.</p> </div> </div> </div> <div class="row section"> <div class="col-md-12"> <h4 class="title">Hinweisboxen</h4> <p>Es gibt 4 verschiedene Hinweisboxen im html-System, hier sieht man diese als Beispiel:</p> <div class="success"> <strong>Success!</strong> Dieses Warnfeld kann auf eine erfolgreiche oder positive Aktion hinweisen. <a href="#">Link</a> </div> <div class="info"> <strong>Info!</strong> Dieses Informationsfeld kann auf eine neutrale informative Änderung oder Aktion hinweisen. <a href="#">Link</a> </div> <div class="error"> <strong>Error!</strong> Dieses Fehlerfeld kann auf eine gefährliche oder möglicherweise falsche Aktion hinweisen. <a href="#">Link</a> </div> <div class="warning"> <strong>Warning!</strong> Dieses Warnfeld kann auf eine Warnung hinweisen, die möglicherweise beachtet werden muss. <a href="#">Link</a> </div> </div> </div> <div class="row section"> <div class="col-md-12"> <h4 class="title">Social Links mit Animation (pulse)</h4> <li class="social"><a href="#" alt="Telegram" class="social"><i class="fa fa-telegram"></i></a></li> <li class="social"><a href="#" alt="Whatsapp" class="social"><i class="fa fa-whatsapp"></i></a></li> <li class="social"><a href="#" alt="Snapchat" class="social"><i class="fa fa-snapchat"></i></a></li> <li class="social"><a href="#" alt="Facebook" class="social"><i class="fa fa-facebook"></i></a></li> <li class="social"><a href="#" alt="Twitter" class="social"><i class="fa fa-twitter"></i></a></li> <li class="social"><a href="#" alt="GooglePlus" class="social"><i class="fa fa-google-plus-official"></i></a></li> <li class="social"><a href="#" alt="Instagram" class="social"><i class="fa fa-instagram"></i></a></li> <li class="social"><a href="#" alt="Pinterest" class="social"><i class="fa fa-pinterest"></i></a></li> <li class="social"><a href="#" alt="Reddit" class="social"><i class="fa fa-reddit"></i></a></li> <li class="social"><a href="#" alt="Linkedin" class="social"><i class="fa fa-linkedin-square"></i></a></li> <li class="social"><a href="#" alt="Xing" class="social"><i class="fa fa-xing"></i></a></li> <li class="social"><a href="#" alt="Dribbble" class="social"><i class="fa fa-dribbble"></i></a></li> <li class="social"><a href="#" alt="Github" class="social"><i class="fa fa-github"></i></a></li> <li class="social"><a href="#" alt="Steam" class="social"><i class="fa fa-steam"></i></a></li> </div> </div> </div> <!-- Ende Basic Beispiele --> <style> /*---------- Basics -----------*/ #GZcustompagecontainer { font-size: 14px; line-height: 1.48; } #GZcustompagecontainer a { outline: none !important; } #GZcustompagecontainer .row.section.hinweis .col-md-12 { border: 1px dashed; padding: 10px; font-family: 'Consolas', monospace; } #GZcustompagecontainer .row.section.hinweis p { display: inline; line-height: 2; } #GZcustompagecontainer .row.section.hinweis h6 { margin-top: 20px; font-weight: 600; } #GZcustompagecontainer p a:not(.button) { text-decoration: underline dotted; } #GZcustompagecontainer .divider { border-top: 8px solid currentColor; margin: 30px 10%; opacity: .1; } #GZcustompagecontainer h1 { font-size: 70px; } #GZcustompagecontainer h2 { font-size: 60px; } #GZcustompagecontainer h3 { font-size: 50px; } #GZcustompagecontainer h4 { font-size: 40px; } #GZcustompagecontainer h5 { font-size: 30px; } #GZcustompagecontainer h6 { font-size: 18px; } #GZcustompagecontainer h1.title { font-size: 70px; line-height: 1.1; letter-spacing: -3px; } #GZcustompagecontainer h2.title { font-size: 60px; line-height: 70px; letter-spacing: -3px; margin-bottom: 10px; } #GZcustompagecontainer h3.title { font-size: 50px; line-height: 1; margin-bottom: 10px; letter-spacing: -2px; } #GZcustompagecontainer .gaccordion.section h3 { margin: 15px 0px 2px; } #GZcustompagecontainer h4.title { font-size: 40px; line-height: 1; margin-bottom: 10px; letter-spacing: -1px; } #GZcustompagecontainer h5.title { font-size: 30px; line-height: 1; margin-bottom: 10px; letter-spacing: -1px; } #GZcustompagecontainer h6.title { font-size: 18px; line-height: 1.6; margin-bottom: 10px; } #GZcustompagecontainer .subtitle { font-size: 20px; margin-top: -10px; margin-bottom: 20px; } #GZcustompagecontainer .center { text-align: center; } #GZcustompagecontainer .right { text-align: right; } #GZcustompagecontainer mark { padding: 2px; color: #333 !important; } #GZcustompagecontainer mark a { color: #333 !important; text-decoration: underline dotted !important; } #GZcustompagecontainer quote { display: block; padding: 20px 0px; min-height: 40px; margin: 10px 0px; } #GZcustompagecontainer quote::before { content: "\f10d"; font-family: FontAwesome; font-weight: normal; font-size: 60px; height: 44px; line-height: 44px; opacity: .4; position: absolute; margin-top: -5px; } #GZcustompagecontainer quote h1, #GZcustompagecontainer quote h2, #GZcustompagecontainer quote h3, #GZcustompagecontainer quote h4, #GZcustompagecontainer quote h5, #GZcustompagecontainer quote h6 { margin-left: 80px; font-style: italic; } #GZcustompagecontainer quote p { margin-left: 80px; font-size: 130%; font-style: italic; line-height: 1.2; } #GZcustompagecontainer abbr[data-original-title], #GZcustompagecontainer abbr[title] { text-decoration: underline dotted; cursor: help; border-bottom: none; } #GZcustompagecontainer li.nav { list-style: none; display: inline-block; margin: 2px; } #GZcustompagecontainer .fieldsmall { resize: none; font-size: 12px; padding: 3px 6px; border: 1px solid #000 !important; background-color: #fff !important; color: #222 !important; font-family: Courier New; word-break: normal; display: inline-block; margin: 1px 0px; } /*---------- Boxsystem Basics -----------*/ #GZcustompagecontainer .row { margin-right: 0px; margin-left: 0px; } #GZcustompagecontainer .col-md-3 { padding: 30px 40px; } #GZcustompagecontainer .col-md-4, #GZcustompagecontainer .col-md-12 { padding-right: 0px; padding-left: 0px; } #GZcustompagecontainer .col-md-4:nth-child(2) { padding-right: 20px; padding-left: 20px; } #GZcustompagecontainer .col-md-4 h2.title { font-size: 20px; line-height: 1.1; margin-bottom: 10px; } #GZcustompagecontainer .col-md-12 { padding: 10px 0px; } /*---------- Counterbox -----------*/ #GZcustompagecontainer .row.section.counterbox .col-md-3 { text-align: center; border-right: 1px solid; padding: 15px 40px; } #GZcustompagecontainer .row.section.counterbox .col-md-3:last-child { border-right: none; } #GZcustompagecontainer .row.section.counterbox .col-md-3 .fa { text-align: center; font-size: 60px; line-height: 1; } #GZcustompagecontainer .counter-value.count-title { font-size: 30px !important; font-weight: 600; line-height: 1 !important; padding: 10px; } /*---------- Top Herobox -----------*/ #GZcustompagecontainer .herobg { background: url('https://picsum.photos/1820/720?image=4'); width: 100%; min-height: 600px; background-repeat: no-repeat; background-position: center; background-size: cover; padding: 50px; text-align: center; color: #ffffff; } #GZcustompagecontainer .herobg .col-md-12 { background-color: rgba(255, 255, 255, 0.2); /*-- background-color: rgba(0, 0, 0, 0.2); fuer helle Bilder nutzen --*/ padding: 20px; margin-bottom: 20px; } #GZcustompagecontainer .herobg h1 { font-size: 70px !important; line-height: 1.1 !important; letter-spacing: -3px !important; color: #fff; margin-top: 40px; text-shadow: 0px 4px 8px #000; } #GZcustompagecontainer .herobg .subtitle::before { content: ""; margin: 20px 20%; height: 5px; background-color: #fff; display: block; } #GZcustompagecontainer .herobg p.subtitle { font-size: 20px !important; font-weight: 100 !important; line-height: 1.6 !important; margin-top: 20px; text-shadow: 0px 2px 3px #000; } #GZcustompagecontainer .herobg .buttonGroup { margin-top: 40px; margin-bottom: 80px; justify-content: center; } /*---------- Colored Announceboxes -----------*/ #GZcustompagecontainer .announcebox { background-color: #3a6d9c; /*Hintergrundfarbe*/ color: #ffffff; /*Schriftfarbe*/ } .sidebar + .content:not(:last-child) #GZcustompagecontainer .announcebox .col-md-3 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .announcebox .col-md-3 { flex: 0 0 25%; max-width: 25%; } #GZcustompagecontainer .announcebox .col-md-3:nth-child(1) { background: rgba(0, 0, 0, 0.05); } #GZcustompagecontainer .announcebox .col-md-3:nth-child(2) { background: rgba(0, 0, 0, 0.1); } #GZcustompagecontainer .announcebox .col-md-3:nth-child(3) { background: rgba(0, 0, 0, 0.2); } #GZcustompagecontainer .announcebox .col-md-3:nth-child(4) { background: rgba(0, 0, 0, 0.3); } #GZcustompagecontainer .announcebox .col-md-3 .fa { display: block; text-align: left; font-size: 60px; color: #fff; line-height: 1.4; } #GZcustompagecontainer .announcebox .font-weight-bold { font-weight: 600 !important; } #GZcustompagecontainer .announcebox a:not(.button) { color: #ffffff; } #GZcustompagecontainer .announcebox a:hover { opacity: .8; } #GZcustompagecontainer .announcebox h6 + p { margin: 10px 0px 20px; font-weight: 100; } #GZcustompagecontainer .announcebox p a:not(.button) { text-decoration: underline dotted; font-weight: 400; } #GZcustompagecontainer .announcebox .button { background-color: #fff !important; background-image: none !important; border: none !important; color: #151515 !important; font-weight: 400; box-shadow: none !important; border-radius: 2px; line-height: 1.2; text-shadow: none !important; padding: 7px 12px; font-size: 14px; } #GZcustompagecontainer .announcebox .button::before { display: none; } #GZcustompagecontainer .announcebox .button:hover { opacity: .75; } /*---------- Social Button -----------*/ #GZcustompagecontainer li.social { width: 52px; height: 52px; display: inline-block; text-align: center; border: 2px solid; list-style: none; margin: 2px; } #GZcustompagecontainer .social a { display: block; font-size: 34px; line-height: 48px; } #GZcustompagecontainer li.social:hover { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /*---------- Picturebox Left Float -----------*/ #GZcustompagecontainer .picturebox .col-md-4 { display: block; max-height: 300px; flex: 1; width: 300px; padding: 0px; max-width: 300px; } #GZcustompagecontainer .picturebox .col-md-4 img { background-size: cover; max-height: 300px; width: 300px; } #GZcustompagecontainer .picturebox .col-md-8 { padding: 0px 0px 0px 30px; flex: 1; max-width: 100%; } #GZcustompagecontainer .picturebox .col-md-8.right { padding: 0px 30px 0px 0px; } #GZcustompagecontainer .picturebox .subtitle { font-size: 20px; margin-top: -20px; margin-bottom: 20px; } /*---------- Comment Boxes -----------*/ #GZcustompagecontainer .commentbox { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); padding: 14px; margin: 10px 0px; } #GZcustompagecontainer .commentbox-body { -ms-flex: 1; flex: 1; } /*---------- Accordion -----------*/ #GZcustompagecontainer .gaccordion.section::before { display: none; } #GZcustompagecontainer li.gaccordion { margin-top: 2px; border-radius: 0px; color: #ffffff !important; background-color: #3a6d9c; /*Hintergrundfarbe*/ box-shadow: none !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer; list-style: none; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } #GZcustompagecontainer li.gaccordion:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)) !important; /*Hintergrundfarbe Hover Transparenz*/ } #GZcustompagecontainer li.gaccordion.active { background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)) !important; /*Hintergrundfarbe Active Transparenz*/ } #GZcustompagecontainer .gpanel { padding: 0 18px; background-color: rgba(0, 0, 0, 0.05); /*Hintergrundfarbe Textinhalt*/ max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } #GZcustompagecontainer .gaccordion p.subtitle { line-height: 1.5; margin-bottom: 5px; } #GZcustompagecontainer .gpanel p { padding: 10px 0px; } #GZcustompagecontainer .gaccordion::before { color: #fff; float: left; margin-right: 10px; content: "\f078"; font-family: FontAwesome; font-weight: normal; font-size: 13px; height: 20px; line-height: 20px; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; } #GZcustompagecontainer .gaccordion.active::before { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); } /*---------- Circleboxes -----------*/ #GZcustompagecontainer .row.section.circlebox { text-align: center; } .sidebar + .content:not(:last-child) #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } #GZcustompagecontainer .circle { background-color: #3a6d9c !important; /*Hintergrundfarbe*/ border: 15px solid #2b4f71; /*Umrandung Textinhalt*/ border-radius: 100%; width: 200px; height: 200px; display: inline-block; margin: 15px 0px; } #GZcustompagecontainer .circle:hover { border: 15px solid #335b81; /*Umrandung Hover Transparenz*/ -webkit-transition: 200ms linear 0s; -moz-transition: 200ms linear 0s; -o-transition: 200ms linear 0s; transition: 200ms linear 0s; } #GZcustompagecontainer .circle .fa { font-size: 120px; line-height: 170px; color: #fff; } #GZcustompagecontainer .circlebox .col-md-4 h2.title { font-size: 24px !important; line-height: 1.1 !important; margin-bottom: 10px !important; letter-spacing: -1px !important; } #GZcustompagecontainer .circle.col-md-4:nth-child(2) { padding-right: 20px; padding-left: 20px; } /*! => Sheet Slider v2.2.0 => Copyright: 2018 zkreations => Licensed under MIT | https://zkreations.github.io/SheetSlider/ */ /* Basic design */ #GZcustompagecontainer .sheetSlider { line-height: 1.48; position: relative; width: 100%; padding-bottom: 30.857143%; /* Höhe des Sliders */ overflow: hidden; color: #fff; } .sheetSlider a { color: #fff; } .sheetSlider input, .sh__btns { display: none; } /* reset */ .sheetSlider h4,.sheetSlider label,.sheetSlider a,.sheetSlider img,.sheetSlider span,.sh-control { background: none; padding: 0; margin: 0; border: 0; outline: 0; box-shadow: 0 0 transparent; text-decoration: none; } /* Inhalt */ .sh__content { position: absolute; height: 100%; width: 100%; transition: transform .7s cubic-bezier(.54,0,.1,1); transform: translate3d(0, 0, 0); } /* Anpassung Elemente */ .sh__item { display: block; position: absolute; top: 0;left: 0; width: 100%; height: 100%; } .sh__item img { width: 100%; } /* Anpassung Textinhalte */ .sh__meta { left: 25px; top: 25px; position: absolute; background-color: rgba(0, 0, 0, 0.4); /* Textblock Hintergrundfarbe hier anpassen */ padding: 8px 18px; /* Textblock Randabstand hier anpassen */ text-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 1px 5px rgba(0, 0, 0, .16); max-width: 100%; opacity: 0; transform: translate3d(0, 4em, 0); transition: opacity .7s .4s,transform .7s .4s; } .sh__meta h1, .sh__meta h2, .sh__meta h3, .sh__meta h4, .sh__meta span { display: block; margin-bottom: 0px !important; } .sh__meta span { font-weight: 400; padding-top: 0px; } .sh__meta a { text-decoration: underline dotted !important; transition: color .5s; } #GZcustompagecontainer .sh__meta span { color: #ffffff !important; /* Untertitel Schriftfarbe hier anpassen */ font-size: 15px; /* Untertitel Schriftgröße hier anpassen */ } #GZcustompagecontainer .sh__meta h1 { font-size: 28px; /* H1 Schriftgröße hier anpassen */ line-height: 1.28; } #GZcustompagecontainer .sh__meta h2 { font-size: 23px; /* H2 Schriftgröße hier anpassen */ line-height: 1.28; } #GZcustompagecontainer .sh__meta h3 { font-size: 18px; /* H3 Schriftgröße hier anpassen */ line-height: 1.28; } #GZcustompagecontainer .sh__meta h4 { font-size: 34px; /* H4 Schriftgröße hier anpassen */ line-height: 1.28; } /* Anpassung Button Navigation */ .sh__btns { bottom: 0;left: 0;right: 0; position: absolute; z-index: 10; padding-left: 4em; padding-right: 4em; justify-content: space-between; margin-bottom: 20px; } .sh__btns label { background-color: rgba(255, 255, 255, .5); cursor: pointer; margin: 0 .2em; height: 6px; flex: 1 0 auto; transition: background .5s; } .sh__btns label:hover { background-color: rgba(255, 255, 255, 1); } /* Anpassung Steuerbutton */ .sh__arrows,.sh-control { position: absolute; right: 0; bottom: 0; z-index: 10; transform: translate3d(0, 0, 0); transition: transform .3s; box-shadow: 0 1px 1px rgba(0, 0, 0, .15); } .sh__arrows:hover,.sheetSlider:hover .sh__arrows,.sheetSlider:hover .sh-control { transform: translate3d(0, 0, 0); } .sh__arrows label, .sh-control { background-color: white; background-repeat: no-repeat; background-position: 50%; cursor: pointer; border-radius: 0px !important; } .sh__arrows label { display: none; transition: background-color .3s; width: 50px; height: 50px; color: #888888; } .sh__arrows label:hover { background-color: rgba(255, 255, 255, .9); color: #333333; } /* play/pause */ .sh-control { width: 45px; height: 45px; bottom: 50px; background-color: white !important; color: #888888 !important; border-radius: 0px !important; background-image: none !important; border: none !important; box-shadow: none !important; text-shadow: none !important; } .sh-control::before { content: "\f04c" !important; font-family: FontAwesome !important; font-weight: normal !important; display: inline-block !important; font-size: 20px !important; line-height: 28px !important; vertical-align: -5px !important; } .sh-control:hover { color: #666666 !important; opacity: .9; } .sh-control.is-active { color: #333333 !important; } /* Bildformate */ /*21:9*/ .sh-21r9 { padding-bottom: 42.857143%; } /*16:9*/ .sh-16r9 { padding-bottom: 56.25%; } /*4:3*/ .sh-4r3 { padding-bottom: 75%; } /*1:1*/ .sh-1r1 { padding-bottom: 100%; } /* Animation Versions "checked" */ /*Animation Default*/ .sh-default .sh__item:nth-child(2) { left: 100%; } .sh-default .sh__item:nth-child(3) { left: 200%; } .sh-default .sh__item:nth-child(4) { left: 300%; } .sh-default .sh__item:nth-child(5) { left: 400%; } .sh-default .sh__item:nth-child(6) { left: 500%; } .sh-default .sh__item:nth-child(7) { left: 600%; } .sh-default .sh__item:nth-child(8) { left: 700%; } .sh-default .sh__item:nth-child(9) { left: 800%; } .sh-default .sh__item:nth-child(10) { left: 900%; } .sh-default input:nth-child(1):checked~.sh__content { transform: translate3d(0%, 0, 0); } .sh-default input:nth-child(2):checked~.sh__content { transform: translate3d(-100%, 0, 0); } .sh-default input:nth-child(3):checked~.sh__content { transform: translate3d(-200%, 0, 0); } .sh-default input:nth-child(4):checked~.sh__content { transform: translate3d(-300%, 0, 0); } .sh-default input:nth-child(5):checked~.sh__content { transform: translate3d(-400%, 0, 0); } .sh-default input:nth-child(6):checked~.sh__content { transform: translate3d(-500%, 0, 0); } .sh-default input:nth-child(7):checked~.sh__content { transform: translate3d(-600%, 0, 0); } .sh-default input:nth-child(8):checked~.sh__content { transform: translate3d(-700%, 0, 0); } .sh-default input:nth-child(9):checked~.sh__content { transform: translate3d(-800%, 0, 0); } .sh-default input:nth-child(10):checked~.sh__content { transform: translate3d(-900%, 0, 0); } /* Animation vertical*/ .sh-vertical .sh__item:nth-child(2) { top: 100%; } .sh-vertical .sh__item:nth-child(3) { top: 200%; } .sh-vertical .sh__item:nth-child(4) { top: 300%; } .sh-vertical .sh__item:nth-child(5) { top: 400%; } .sh-vertical .sh__item:nth-child(6) { top: 500%; } .sh-vertical .sh__item:nth-child(7) { top: 600%; } .sh-vertical .sh__item:nth-child(8) { top: 700%; } .sh-vertical .sh__item:nth-child(9) { top: 800%; } .sh-vertical .sh__item:nth-child(10) { top: 900%; } .sh-vertical input:nth-child(1):checked~.sh__content { transform: translate3d(0%, 0, 0); } .sh-vertical input:nth-child(2):checked~.sh__content { transform: translate3d(0, -100%, 0); } .sh-vertical input:nth-child(3):checked~.sh__content { transform: translate3d(0, -200%, 0); } .sh-vertical input:nth-child(4):checked~.sh__content { transform: translate3d(0, -300%, 0); } .sh-vertical input:nth-child(5):checked~.sh__content { transform: translate3d(0, -400%, 0); } .sh-vertical input:nth-child(6):checked~.sh__content { transform: translate3d(0, -500%, 0); } .sh-vertical input:nth-child(7):checked~.sh__content { transform: translate3d(0, -600%, 0); } .sh-vertical input:nth-child(8):checked~.sh__content { transform: translate3d(0, -700%, 0); } .sh-vertical input:nth-child(9):checked~.sh__content { transform: translate3d(0, -800%, 0); } .sh-vertical input:nth-child(10):checked~.sh__content { transform: translate3d(0, -900%, 0); } /* Animation fade*/ .sh-fade .sh__item { opacity: 0; transition: opacity .7s cubic-bezier(.54,0,.1,1); } .sh-fade input:nth-child(1):checked~.sh__content .sh__item:nth-child(1), .sh-fade input:nth-child(2):checked~.sh__content .sh__item:nth-child(2), .sh-fade input:nth-child(3):checked~.sh__content .sh__item:nth-child(3), .sh-fade input:nth-child(4):checked~.sh__content .sh__item:nth-child(4), .sh-fade input:nth-child(5):checked~.sh__content .sh__item:nth-child(5), .sh-fade input:nth-child(6):checked~.sh__content .sh__item:nth-child(6), .sh-fade input:nth-child(7):checked~.sh__content .sh__item:nth-child(7), .sh-fade input:nth-child(8):checked~.sh__content .sh__item:nth-child(8), .sh-fade input:nth-child(9):checked~.sh__content .sh__item:nth-child(9), .sh-fade input:nth-child(10):checked~.sh__content .sh__item:nth-child(10) { opacity: 1; z-index: 1; } /* Animation flip */ .sh-flip .sh__item { opacity: 0; transition: transform .5s cubic-bezier(.54,0,.1,1), opacity .5s; transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform-origin: bottom; } .sh-flip input:nth-child(1):checked~.sh__content .sh__item:nth-child(1), .sh-flip input:nth-child(2):checked~.sh__content .sh__item:nth-child(2), .sh-flip input:nth-child(3):checked~.sh__content .sh__item:nth-child(3), .sh-flip input:nth-child(4):checked~.sh__content .sh__item:nth-child(4), .sh-flip input:nth-child(5):checked~.sh__content .sh__item:nth-child(5), .sh-flip input:nth-child(6):checked~.sh__content .sh__item:nth-child(6), .sh-flip input:nth-child(7):checked~.sh__content .sh__item:nth-child(7), .sh-flip input:nth-child(8):checked~.sh__content .sh__item:nth-child(8), .sh-flip input:nth-child(9):checked~.sh__content .sh__item:nth-child(9), .sh-flip input:nth-child(10):checked~.sh__content .sh__item:nth-child(10) { transform: perspective(400px); opacity: 1; z-index: 1; } /* Textanzeige */ .sheetSlider input:nth-child(1):checked~.sh__content .sh__item:nth-child(1) .sh__meta, .sheetSlider input:nth-child(2):checked~.sh__content .sh__item:nth-child(2) .sh__meta, .sheetSlider input:nth-child(3):checked~.sh__content .sh__item:nth-child(3) .sh__meta, .sheetSlider input:nth-child(4):checked~.sh__content .sh__item:nth-child(4) .sh__meta, .sheetSlider input:nth-child(5):checked~.sh__content .sh__item:nth-child(5) .sh__meta, .sheetSlider input:nth-child(6):checked~.sh__content .sh__item:nth-child(6) .sh__meta, .sheetSlider input:nth-child(7):checked~.sh__content .sh__item:nth-child(7) .sh__meta, .sheetSlider input:nth-child(8):checked~.sh__content .sh__item:nth-child(8) .sh__meta, .sheetSlider input:nth-child(9):checked~.sh__content .sh__item:nth-child(9) .sh__meta, .sheetSlider input:nth-child(10):checked~.sh__content .sh__item:nth-child(10) .sh__meta { opacity: 1; transform: translate3d(0, 0, 0); } /* Navigations Button Bilder */ /*Navibutton links */ .sheetSlider input:nth-child(1):checked~input:nth-child(2):last-of-type~.sh__arrows label:nth-child(2), .sheetSlider input:nth-child(1):checked~input:nth-child(3):last-of-type~.sh__arrows label:nth-child(3), .sheetSlider input:nth-child(1):checked~input:nth-child(4):last-of-type~.sh__arrows label:nth-child(4), .sheetSlider input:nth-child(1):checked~input:nth-child(5):last-of-type~.sh__arrows label:nth-child(5), .sheetSlider input:nth-child(1):checked~input:nth-child(6):last-of-type~.sh__arrows label:nth-child(6), .sheetSlider input:nth-child(1):checked~input:nth-child(7):last-of-type~.sh__arrows label:nth-child(7), .sheetSlider input:nth-child(1):checked~input:nth-child(8):last-of-type~.sh__arrows label:nth-child(8), .sheetSlider input:nth-child(1):checked~input:nth-child(9):last-of-type~.sh__arrows label:nth-child(9), .sheetSlider input:nth-child(1):checked~input:nth-child(10):last-of-type~.sh__arrows label:nth-child(10), .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(2), .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(3), .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(4), .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(5), .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(6), .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(7), .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(8), .sheetSlider input:nth-child(10):checked~.sh__arrows label:nth-child(9) { display: block; float: left; } .sheetSlider input:nth-child(1):checked~input:nth-child(2):last-of-type~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(3):last-of-type~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(4):last-of-type~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(5):last-of-type~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(6):last-of-type~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(7):last-of-type~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(8):last-of-type~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(9):last-of-type~.sh__arrows label:nth-child(9)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(10):last-of-type~.sh__arrows label:nth-child(10)::before, .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(10):checked~.sh__arrows label:nth-child(9)::before { content: "\f053"; font-family: FontAwesome; font-weight: normal !important; display: inline-block; font-size: 40px; line-height: 62px; padding-left: 12px; } /*Navibutton rechts */ .sheetSlider input:nth-child(1):checked~.sh__arrows label:nth-child(2), .sheetSlider input:nth-child(2):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(3), .sheetSlider input:nth-child(3):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(4), .sheetSlider input:nth-child(4):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(5), .sheetSlider input:nth-child(5):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(6), .sheetSlider input:nth-child(6):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(7), .sheetSlider input:nth-child(7):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(8), .sheetSlider input:nth-child(8):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(9), .sheetSlider input:nth-child(9):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(10), .sheetSlider input:nth-child(10):checked:last-of-type~.sh__arrows label:nth-child(1) { display: block; float: right; } .sheetSlider input:nth-child(1):checked~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(2):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(3):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(4):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(5):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(6):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(7):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(8):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(9)::before, .sheetSlider input:nth-child(9):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(10)::before, .sheetSlider input:nth-child(10):checked:last-of-type~.sh__arrows label:nth-child(1)::before { content: "\f054"; font-family: FontAwesome; font-weight: normal !important; display: inline-block; font-size: 40px; line-height: 62px; padding-left: 22px; } .sheetSlider input:nth-child(1):checked~.sh__btns label:nth-child(1), .sheetSlider input:nth-child(2):checked~.sh__btns label:nth-child(2), .sheetSlider input:nth-child(3):checked~.sh__btns label:nth-child(3), .sheetSlider input:nth-child(4):checked~.sh__btns label:nth-child(4), .sheetSlider input:nth-child(5):checked~.sh__btns label:nth-child(5), .sheetSlider input:nth-child(6):checked~.sh__btns label:nth-child(6), .sheetSlider input:nth-child(7):checked~.sh__btns label:nth-child(7), .sheetSlider input:nth-child(8):checked~.sh__btns label:nth-child(8), .sheetSlider input:nth-child(9):checked~.sh__btns label:nth-child(9), .sheetSlider input:nth-child(10):checked~.sh__btns label:nth-child(10) { background-color: #ffffff; /*aktiver Sliderbutton Hintergrundfarbe*/ } /* Mobile Options */ @media (min-width: 576px) { .sheetSlider { font-size: 9px; } .sh__meta { left: 25px !important; right: 25px !important; top: 25px !important; max-width: 100% !important; width: auto !important; } .sh__arrows, .sh-control { transform: translate3d(100%, 0, 0); } .sh__arrows label { width: 60px; height: 60px; } .sh-control { bottom: calc(4em + 16px); } } @media (min-width: 768px) { .sh__btns { display: flex; } .sh__meta { display: block; } } @media (min-width: 992px) { .sheetSlider{ font-size: 10px; } } /* ================= Sheet Slider Mobile Smartphone */ @media (max-width: 576px) { .sh__meta { left: 0% !important; right: 0px !important; top: 0% !important; width: 100% !important; max-width: 100% !important; padding: 6px 12px; } .sheetSlider h1, .sheetSlider h2, .sheetSlider h3, , .sheetSlider h4 { font-size: 18px !important; /* Überschriften in Sidebar Schriftgröße hier anpassen */ } .sh__meta span, .sh__meta span { font-size: 12px; /* Untertitel in Sidebar Schriftgröße hier anpassen */ } .sh__arrows, .sh-control { display: none; } .sh__btns { display: flex !important; } } /*---------- Pricing Tables -----------*/ #GZcustompagecontainer .row.section.pricing { margin-top: 30px; } #GZcustompagecontainer .pricing .columnsOne { float: left; width: 33.3%; margin-top: 20px; padding-right: .5%; padding-left: 1%; } #GZcustompagecontainer .pricing .columnsTwo { float: left; width: 33.3%; margin-top: 20px; padding: 0px 18px; } #GZcustompagecontainer .pricing .columnsThree { float: left; width: 33.3%; margin-top: 20px; padding-left: .5%; padding-right: 1%; } #GZcustompagecontainer .price { list-style-type: none; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } #GZcustompagecontainer .price:hover { transition: transform 0.24s linear; transform: scale(1.02); } #GZcustompagecontainer .price .header { background-color: #325c84; /*Hintergrundfarbe Tabellenkopf*/ color: #ffffff; font-size: 25px; height: 80px; } #GZcustompagecontainer .price .header.pro { background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); /*Hintergrundfarbe Tabellenkopf Mitte/Pro*/ color: #ffffff; font-size: 28px; } #GZcustompagecontainer .price .header.pro::before { font-family: 'Arial'; font-weight: normal !important; font-style: normal !important; text-align: center; float: left; border: 1px solid #fff; color: #ffffff; padding: 2px 8px; line-height: 1.28; border-radius: 3px; content: "NEU"; font-size: 14px; letter-spacing: 0px; width: 50px; margin-right: -50px; } #GZcustompagecontainer .price .subtable { background-color: #3a6d9c; /*Hintergrundfarbe Tabellenkopf Subtitel*/ color: #ffffff; font-size: 20px; } #GZcustompagecontainer .price li { background-color: #ecf1f7; /*Hintergrundfarbe*/ margin-bottom: 1px; padding: 20px; text-align: center; color: #151515; } #GZcustompagecontainer .price li.Pbottom { background-color: #364c66; } #GZcustompagecontainer .price li.Pbottom .button { background-color: #ffffff !important; color: #151515 !important; font-weight: 400; box-shadow: none !important; background-image: none !important; line-height: 1.48; text-shadow: none !important; padding: 7px 14px; border-radius: 2px; border: none !important; transition: all 0.15s; } #GZcustompagecontainer .price li.Pbottom .button:hover { opacity: .75 !important; } #GZcustompagecontainer .price li a:not(.button) { text-decoration: underline dotted; color: #151515 !important; font-weight: 600; } @media (max-width: 768px) { #GZcustompagecontainer .pricing .columnsOne, #GZcustompagecontainer .pricing .columnsTwo, #GZcustompagecontainer .pricing .columnsThree { width: 100%; float: none; padding: 0px; } #GZcustompagecontainer .price:hover { transform: none; } } /*---------- Teamboxes -----------*/ #GZcustompagecontainer .row.section.team { justify-content: center; } #GZcustompagecontainer .team .col-md-3 { background-color: #3a6d9c; /*Hintergrundfarbe*/ margin: 20px 1% 0px; padding: 0px; flex: 0 0 23%; max-width: 23%; text-align: center; } #GZcustompagecontainer .team .col-md-3 .thumb { background-color: #2c5276; /*Hintergrundfarbe Bild*/ max-height: 450px; overflow: hidden; } #GZcustompagecontainer .team .col-md-3 .thumb img { width: 100%; height: auto; } #GZcustompagecontainer .team .col-md-3 h3.title { margin-bottom: 2px; font-size: 24px; line-height: 26px; letter-spacing: -1px; font-weight: 600; } #GZcustompagecontainer .team.con { padding: 12px; background-color: #3a6d9c; /*Hintergrundfarbe Teambox Content*/ color: #ffffff; min-height: auto; } #GZcustompagecontainer .team.con span { font-size: 18px; font-weight: 500; color: #d7d7d7; line-height: 22px; } #GZcustompagecontainer .team.con .description { font-size: 13px; margin-top: 10px; padding: 10px; border-top: 1px solid #fff; min-height: 120px; } #GZcustompagecontainer .team.con .contacticon { border-top: 1px solid #fff; padding-top: 10px; } #GZcustompagecontainer .team.con .contacticon li { display: inline-block; margin-right: 4px; margin-bottom: 4px; background-color: #ffffff; padding: 5px 12px; border-radius: 2px; transition: all 0.15s; } #GZcustompagecontainer .team.con .contacticon li:hover { opacity: .8; } #GZcustompagecontainer .team.con .contacticon li a { outline: none !important; color: #151515; } #GZcustompagecontainer .team.con .contacticon i { display: inline-block; font-family: FontAwesome; font-size: 15px; font-weight: normal !important; font-style: normal !important; text-align: center; color: #151515; } @media only screen and (min-width: 769px) and (max-width: 1024px) { #GZcustompagecontainer .team .col-md-3 { margin: 20px 3% 0px; flex: 0 0 43%; max-width: 43%; } } @media (max-width: 768px) { #GZcustompagecontainer .team .col-md-3 { width: 100%; max-width: 100%; float: none; padding: 0px; } } /*---------- Portfolio Imageboxes -----------*/ #GZcustompagecontainer .grid { display: flex; padding: 0px; max-width: 100%; margin: 0 auto; list-style: none; text-align: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #GZcustompagecontainer .grid li { -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; display: inline-block; margin: 0; padding: 0px 0px; text-align: left; position: relative; } #GZcustompagecontainer .grid figure { margin: 0px; position: relative; } #GZcustompagecontainer .grid figure img { max-width: 101%; display: block; position: relative; } #GZcustompagecontainer .grid figcaption { position: absolute; bottom: -1px; left: 0; padding: 10px 130px 15px 20px; background-color: #3a6d9c; /*Hintergrundfarbe*/ color: #ffffff; /*Schriftfarbe*/ line-height: 1.1; } #GZcustompagecontainer .grid figcaption h3 { margin: 0; padding: 0; color: #fff; font-size: 20px !important; font-weight: 400; letter-spacing: -1px; } #GZcustompagecontainer .grid figcaption span { font-size: 11px; } #GZcustompagecontainer figure { overflow: hidden; } #GZcustompagecontainer figure img { -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } #GZcustompagecontainer figure:hover img, #GZcustompagecontainer figure.cs-hover img { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } #GZcustompagecontainer figcaption { max-height: 100px; width: 101%; top: auto; bottom: 0; opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; } #GZcustompagecontainer figure:hover figcaption, #GZcustompagecontainer figure.cs-hover figcaption { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s; } #GZcustompagecontainer figcaption a { position: absolute !important; bottom: 20px; right: 20px; } #GZcustompagecontainer figcaption .button { background-color: #fff !important; color: #151515 !important; font-weight: 400; box-shadow: none; background-image: none; font-size: 13px; line-height: 1; text-shadow: none !important; padding: 7px 12px; border-radius: 2px; border: none !important; transition: all 0.15s; } #GZcustompagecontainer figcaption .button::before { display: none; } #GZcustompagecontainer figcaption .button:hover { opacity: .75; } /*---------- Animated Mouse Symbol -----------*/ .mouse_scroll { display: block; margin: 0 auto; width: 24px; height: 100px; } .m_scroll_arrows { display: block; width: 5px; height: 5px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-right: 2px solid white; border-bottom: 2px solid white; margin: 0 0 1px 6px; width: 12px; height: 12px; } .herobg + .mouse_scroll { margin-top: -100px; } .one { margin-top: 1px; } .one, .two, .tree { -ms-animation: mouse-scroll 1s infinite; -webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite; } .one { -ms-animation-delay: .1s; -webkit-animation-delay: .1s; -moz-animation-delay: .1s; -webkit-animation-direction: alternate; } .two { -ms-animation-delay: .2s; -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -webkit-animation-direction: alternate; margin-top: -6px; } .tree { -ms-animation-delay: .3s; -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -webkit-animation-direction: alternate; margin-top: -6px; } .mouse { height: 42px; width: 24px; border-radius: 14px; transform: none; border: 2px solid white; top: 170px; } .wheel { height: 5px; width: 2px; display: block; margin: 5px auto; position: relative; height: 8px; width: 2px; border: 1px solid #fff; } .wheel { -ms-animation: mouse-wheel 0.6s linear infinite; -webkit-animation: mouse-wheel 0.6s linear infinite; -moz-animation: mouse-wheel 0.6s linear infinite; } @-webkit-keyframes mouse-wheel { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); } } @-moz-keyframes mouse-wheel { 0% { top: 1px; } 25% { top: 2px; } 50% { top: 3px;} 75% { top: 2px;} 100% { top: 1px;} } @-webkit-keyframes mouse-scroll { 0% { opacity: 0;} 50% { opacity: .5;} 100% { opacity: 1;} } @-moz-keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } @-o-keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } @keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } @-ms-keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } @media (max-width: 576px) { #GZcustompagecontainer .row { display: block; } #GZcustompagecontainer .picturebox .col-md-8, #GZcustompagecontainer .picturebox .col-md-8.right { padding: 0px; } #GZcustompagecontainer .picturebox .col-md-4 img { margin-top: 10px; } #GZcustompagecontainer .announcebox .col-md-3 { flex: 0 0 100%; max-width: 100%; } #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } #GZcustompagecontainer .row.section.counterbox .col-md-3 { flex: 0 0 100%; max-width: 100%; border: none; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .announcebox .col-md-3 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content:not(:last-child) #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .row.section.counterbox .col-md-3 { flex: 0 0 100%; max-width: 100%; border: none; } #GZcustompagecontainer h2.title { font-size: 50px; line-height: 55px; letter-spacing: -2px; } #GZcustompagecontainer h3.title { font-size: 40px; letter-spacing: -2px; } #GZcustompagecontainer .herobg { padding: 20px; } #GZcustompagecontainer .herobg h1 { font-size: 50px !important; line-height: 1.1 !important; letter-spacing: -2px !important; margin-top: 20px !important; } #GZcustompagecontainer .herobg p.subtitle { font-size: 18px !important; line-height: 1.4 !important; } #GZcustompagecontainer .gaccordion p.subtitle { line-height: 1.3; margin-bottom: 5px; margin-top: 10px; } #GZcustompagecontainer .picturebox .col-md-8 { padding: 20px 0px; } } @media (max-width: 768px) { #GZcustompagecontainer .row { display: block; } #GZcustompagecontainer .picturebox .col-md-8, #GZcustompagecontainer .picturebox .col-md-8.right { padding: 0px; } #GZcustompagecontainer .picturebox .col-md-4 img { margin-top: 10px; } #GZcustompagecontainer .announcebox .col-md-3 { flex: 0 0 100%; max-width: 100%; } #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } #GZcustompagecontainer .row.section.counterbox .col-md-3 { flex: 0 0 100%; max-width: 100%; border: none; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .announcebox .col-md-3 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content:not(:last-child) #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .row.section.counterbox .col-md-3 { flex: 0 0 100%; max-width: 100%; border: none; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .row.section.counterbox .col-md-3 { flex: 0 0 100%; max-width: 100%; border: none; } #GZcustompagecontainer .col-md-4 { padding: 20px 0px; } #GZcustompagecontainer .row.section.counterbox .col-md-3 { text-align: center; border-right: none; padding: 40px 40px; width: 100%; flex: 0 0 100%; max-width: 100%; } #GZcustompagecontainer .row.section.counterbox .col-md-3 .fa { font-size: 140px; } #GZcustompagecontainer .counter-value.count-title { font-size: 50px; } #GZcustompagecontainer .count-text { font-size: 22px; } #GZcustompagecontainer .col-md-4:nth-child(2) { padding-right: 0px; padding-left: 0px; } #GZcustompagecontainer .grid figcaption h3 { font-size: 18px; } #GZcustompagecontainer .grid li { flex: 0 0 100%; max-width: 100%; } #GZcustompagecontainer .picturebox .col-md-4 { width: 100%; flex: 0 0 100%; max-width: 100%; height: 300px; } #GZcustompagecontainer .picturebox .col-md-4 img { width: 100%; height: 300px; } #GZcustompagecontainer .picturebox .col-md-8 { padding: 20px 0px; flex: 100%; max-width: 100%; } #GZcustompagecontainer .sheetSlider { padding-bottom: 55%; } .sheetSlider input:nth-child(1):checked~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(2):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(3):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(4):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(5):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(6):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(7):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(8):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(9)::before, .sheetSlider input:nth-child(9):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(10)::before, .sheetSlider input:nth-child(10):checked:last-of-type~.sh__arrows label:nth-child(1)::before { content: "\f054"; font-family: FontAwesome; font-weight: normal !important; display: inline-block; font-size: 30px; line-height: 56px; padding-left: 18px; } .sheetSlider input:nth-child(1):checked~input:nth-child(2):last-of-type~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(3):last-of-type~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(4):last-of-type~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(5):last-of-type~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(6):last-of-type~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(7):last-of-type~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(8):last-of-type~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(9):last-of-type~.sh__arrows label:nth-child(9)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(10):last-of-type~.sh__arrows label:nth-child(10)::before, .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(10):checked~.sh__arrows label:nth-child(9)::before { content: "\f053"; font-family: FontAwesome; font-weight: normal !important; display: inline-block; font-size: 30px; line-height: 56px; padding-left: 12px; } #GZcustompagecontainer .sh-control { bottom: 60px; } #GZcustompagecontainer .sh__meta { left: 15px; top: 15px; } #GZcustompagecontainer .sh__meta h4 { font-size: 22px; letter-spacing: -1px; } #GZcustompagecontainer .sh__meta span { font-size: 15px; } #GZcustompagecontainer .announcebox { text-align: center; } #GZcustompagecontainer .announcebox .col-md-3 .fa { text-align: center; font-size: 100px; line-height: 1.2; } } </style> <!-----------------------------------------------------------------------------------> <!-- Script Area --------------------------------------------------------------------> <!-----------------------------------------------------------------------------------> <!-- Accordion Function --> <script data-relocate="true"> var acc = document.getElementsByClassName("gaccordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script> <!-- Counter Animation --> <script data-relocate="true"> var a = 0; $(window).scroll(function() { var oTop = $('#counter').offset().top - window.innerHeight; if (a == 0 && $(window).scrollTop() > oTop) { $('.counter-value').each(function() { var $this = $(this), countTo = $this.attr('data-count'); $({ countNum: $this.text() }).animate({ countNum: countTo }, { duration: 3000, easing: 'swing', step: function() { $this.text(Math.floor(this.countNum)); }, complete: function() { $this.text(this.countNum); //alert('finished'); } }); }); a = 1; } }); </script> <!-- Image Slider Function --> <script data-relocate="true"> /*! => Sheet Slider v2.2.0 => Copyright: 2018 zkreations => Licensed under MIT | github.com/zkreations/SheetSlider/blob/master/LICENSE */ var sheetSlider = (function(){ var animateDelay = 4000, autoplayHoverPause = false, auto, slides = document.querySelectorAll(".sh-auto input"), sliderContent = document.querySelector(".sh-auto .sh__content"), sliderButtons = document.querySelectorAll(".sh-auto .sh__btns label"), sliderArrows = document.querySelectorAll(".sh-auto .sh__arrows label"), sliderControl = document.querySelector(".sh-control"), sliderStoped = false; if (autoplayHoverPause) { sliderContent.addEventListener("mouseover", pauseSlider); sliderContent.addEventListener("mouseout", playSlider); } if(sliderControl) sliderControl.addEventListener("click", playPauseButton); function setInput(){ auto = setInterval(autoSlides, animateDelay); } function autoSlides() { for (var i = 0; i < slides.length; i++) if (slides[i].checked) { if(i === slides.length - 1) slides[0].checked = true; else slides[i + 1].checked = true; break; } } function pauseSlider(){ clearInterval(auto); } function playSlider(){ if(!sliderStoped) setInput(); } function playPauseButton(){ sliderStoped = !sliderStoped; pauseSlider(); sliderControl.classList.add('is-active'); if(!sliderStoped){ autoSlides(); playSlider(); sliderControl.classList.remove('is-active'); } } for (var i = 0; i < slides.length; i++) { if (sliderButtons.length){ // Pausar si los botones reciben un clic sliderButtons[i].addEventListener("click", function() { pauseSlider(); playSlider(); }); } if (sliderArrows.length){ // Pausar si las flechas reciben un clic sliderArrows[i].addEventListener("click", function() { pauseSlider(); playSlider(); }); } } window.addEventListener("load",function(){ setInput(); }); })(); </script> <!-- Scrollpoint Anchor Function --> <script data-relocate="true"> $(document).ready(function() { // navigation click actions $('.nav-link').on('click', function(event){ event.preventDefault(); var sectionID = $(this).attr("data-id"); scrollToID('#' + sectionID, 750); }); // scroll to top action $('.scroll-top').on('click', function(event) { event.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); // mobile nav toggle $('#nav-toggle').on('click', function (event) { event.preventDefault(); $('#main-nav').toggleClass("open"); }); }); // scroll function function scrollToID(id, speed){ var offSet = 50; var targetOffset = $(id).offset().top - offSet; var mainNav = $('#main-nav'); $('html,body').animate({scrollTop:targetOffset}, speed); if (mainNav.hasClass("open")) { mainNav.css("height", "1px").removeClass("in").addClass("collapse"); mainNav.removeClass("open"); } } if (typeof console === "undefined") { console = { log: function() { } }; } </script>
  
  
  
  

  Englische Startseite:

  
  <!-- HTML Start page Demo for WSC 5 / WSC 3 EN Design & coding by Gino Zantarelli https://www.powerstylez.com --> <div id="GZcustompagecontainer"> <div class="row section hinweis"> <div class="col-md-12"> <h5>Welcome to the demo homepage version 1.4! </h5> <p>This page, designed and implemented by <a href="https://www.powerstylez.com"><b>Gino Zantarelli</b></a>, shows you a few examples in pure HTML (with partial Java Script support, which is already directly integrated!) how you could create a start page. Unfortunately, the HTML formatting does not allow the integration of functions of the Woltlab CMS directly, but you can integrate self-created boxes as standard.</p> <br/> <p>Another small disadvantage is the ignoring of the current breakpoints for mobile views from Woltlab CMS (which cannot be used directly on this page in the style container), only the breakpoints with pixel information (as known from the older WBB 4) are active. The newer breakpoints for the created page can be addressed via the CSS definition of a style or the cross-style CSS, all examples on this page have already been optimized for mobile display.</p> <br/> <h6>Style adjustments for different styles:</h6> <p>Various CSS adjustments can be made in the respective CSS definition of the style to be used, the content is set in a container with ID <xmp class="fieldsmall"><div id="GZcustompagecontainer"></xmp> as a reference.</p> <br/> <h6>Where can I adjust the main colors and CSS formatting?</h6> <p>The adjustments can be edited directly in the source code of this page in the lower "Style" area. The markings I have set such as E.g. <xmp class="fieldsmall">/*Hintergrundfarbe*/</xmp> or <xmp class="fieldsmall">/*Umrandung Textinhalt*/</xmp> the codes to be adapted should be found relatively quickly.</p> <br/> <p>NEW: If the partially transparent background in the HERO box is to be adjusted, you can find the adjustment for light and dark images under the code block <xmp class = "fieldsmall">#GZcustompagecontainer .herobg .col-md-12</xmp>.</p> <br/> <p>The specified color codes can also be overwritten for different styles via the CSS definition of a style or the cross-style CSS, but then a <xmp class="fieldsmall">{MYCODE !important;}</xmp> be set to force this!</p> <br/> <h6>Where can I find the block types to be edited?</h6> <p>Since this page uses various blocks with different content, a marker is built into the source code such as E.g. <xmp class="fieldsmall"><-- Start Herobild --></xmp> and <xmp class="fieldsmall"><-- Ende Herobild --></xmp> , the blocks should be easy to find ...</p> </div> </div> <!-- Start Herobild --> <div class="herobg section"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <h1>Hello ... I'm a 'Hero' H1 title text! </h1> <p class="subtitle">This is the 'Subtitle' text of the hero picture and can be adjusted as required in the created page. Draw attention to the content of your CMS or forum here - this is important for any visitors.</p> <ul class="buttonGroup"> <li><a href="https://www.w3schools.com" class="button">This is button #1</a></li> <li><a href="https://www.woltlab.com/de" class="button">This is button #2</a></li> <li><a href="https://www.powerstylez.com" class="button buttonPrimary">This is an active button</a></li> </ul> </div> <div class="mouse_scroll"><a href="#" class="nav-link" data-id="anchor1"> <div class="mouse"> <div class="wheel"></div> </div> <div> <span class="m_scroll_arrows one"></span> <span class="m_scroll_arrows two"></span> <span class="m_scroll_arrows tree"></span> </div> </a></div> </div> <!-- Ende Herobild --> <!-- Start Anchor Scrollpoint --><div id="anchor1" ></div><!-- Ende Anchor Scrollpoint --> <!-- Start Scrollpoints --> <div class="row section"> <div class="col-md-12"> <h3 class="title">Scrollpoints (Jump labels)</h3> <p>These buttons are linked with so-called scroll points, if you want to go quickly to a certain section, the website jumps to the marked position.You can insert IDs, e.g. E.g. <xmp class="fieldsmall">data-id="anchor1"</xmp> in the main link and then the code <xmp class="fieldsmall"><div id="anchor1"></div></xmp> inserted in the content address this scroll point, consecutive numbers must be used for various points (anchor1, anchor2, anchor3 ...)</p> <br/> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor1">Scrollpoint #1</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor2">Scrollpoint #2</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor3">Scrollpoint #3</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor4">Scrollpoint #4</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor5">Scrollpoint #5</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor6">Scrollpoint #6</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor7">Scrollpoint #7</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor8">Scrollpoint #8</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor9">Scrollpoint #9</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor10">Scrollpoint #10</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor11">Scrollpoint #11</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor12">Scrollpoint #12</a> </li> <li class="nav"> <a href="#" class="nav-link button" data-id="anchor13">Scrollpoint #13</a> </li> <li class="nav"> <a href="#" class="nav-link button buttonPrimary" data-id="anchor14">Scrollpoint #14</a> </div> </div> <!-- Ende Scrollpoints --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Titel & Text --> <div class="row section"> <div class="col-md-12"> <h2 class="title">This is an H2 title</h2> <p>Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. Clock round the earhole <a href="#">scrumpy</a> bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> <br/> <p><i>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</i></p> </div> </div> <!-- Ende Titel & Text --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor2" > >>>>>>>>>>> Scrollpoint 2 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Hinweisboxen --> <div class="row section announcebox"> <div class="col-md-3"> <i class="fa fa-user-circle"></i> <h6 class="title">This is an H6 boxing title</h6> <p>Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more cowbell first-order optimal strategies. Not a hill to die on peel the onion out of the loop win-win, for staff engagement, nor market-facing.</p> <p><a href="#" class="button">Button</a></p> </div> <div class="col-md-3"> <i class="fa fa-comments-o"></i> <h6 class="title">A box title with <span class="font-weight-bold">bold Text</span></h6> <p class="font-weight-bold">Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more cowbell first-order optimal strategies. Not a hill to die on peel the onion out of the loop win-win, for staff engagement, nor market-facing.</p> </div> <div class="col-md-3"> <i class="fa fa-users"></i> <h6 class="title">A box title with <i>slanted Text</i></h6> <p><i>Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more cowbell first-order optimal strategies. Not a hill to die on peel the onion out of the loop win-win, for staff engagement, nor market-facing.</i></p> </div> <div class="col-md-3"> <i class="fa fa-lightbulb-o"></i> <h6 class="title">A box title with <a href="#">web link</a></h6> <p>Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more <a href="https://www.youtube.com/watch?v=nd-_UwzSSvQ">Punk</a> first-order optimal strategies. Not a hill to die on peel the <a href="#">onion</a> out of the loop win-win, for staff engagement, nor market-facing.</p> </div> </div> <!-- Ende Hinweisboxen --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor3" > >>>>>>>>>>> Scrollpoint 3 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Bild mit Text Box --> <div class="row section picturebox"> <div class="col-md-4"> <img src="https://picsum.photos/0?random" alt=""> </div> <div class="col-md-8"> <h2 class="title">This is an H2 title</h2> <p class="subtitle">Here is the 'Subtitle' to show a description ...</p> <p>Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more cowbell first-order optimal strategies. Not a hill to die on peel the <a href="#">onion</a> out of the loop win-win, for staff engagement, nor market-facing.</p> <br/> <p><a href="#" class="button buttonPrimary">Active Button</a></p> </div> </div> <!-- Ende Bild mit Text Box --> <!-- Start Bild mit Text Box --> <div class="row section picturebox"> <div class="col-md-8 right"> <h2 class="title">This is an H2 title</h2> <p class="subtitle">Here is the 'Subtitle' to show a description ...</p> <p>Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more cowbell first-order optimal strategies. Not a hill to die on peel the <a href="#">onion</a> out of the loop win-win, for staff engagement, nor market-facing.</p> <br/> <p><a href="#" class="button buttonPrimary">Active Button</a></p> </div> <div class="col-md-4"> <img src="https://picsum.photos/0?random" alt=""> </div> </div> <!-- Ende Bild mit Text Box --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor4" > >>>>>>>>>>> Scrollpoint 4 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Bilderslider --> <div class="section sliderbox"> <div class="col-md-12"> <h3 class="title">Picture slider (Sheet Slider)</h3> <p>This is the Sheet Picture slider (<a href="https://github.com/zkreations/SheetSlider">» Sheet Slider Web page</a>) with various title displays as well as links, forwards / backwards and pause functions. A maximum of <b>10 Pictures</b> can be integrated.</p> <br/> <!--Sheet Slider--> <div class="sheetSlider sh-default sh-auto"> <input id="s1" type="radio" name="slide1" checked/> <input id="s2" type="radio" name="slide1"/> <input id="s3" type="radio" name="slide1"/> <input id="s4" type="radio" name="slide1"/> <input id="s5" type="radio" name="slide1"/> <input id="s6" type="radio" name="slide1"/> <div class="sh__content"> <!-- Slider Item 1 --> <div class="sh__item"> <img src="https://picsum.photos/1280/720?image=180" alt=""/> <!-- Item Info --> <div class="sh__meta"> <h1>I am an H1 title text!</h1> <span>Here is the subtitle to show a description ...</span> </div> </div> <!-- Slider Item 2 --> <div class="sh__item"> <img src="https://picsum.photos/1280/720?image=290" alt=""/> <!-- Item Info --> <div class="sh__meta"> <h2>... and I'm an H2 title text!</h2> <span>Here is the subtitle with <a href="https://www.unsplash.com">web link</a></span> </div> </div> <!-- Slider Item 3 --> <div class="sh__item"> <a href="https://www.unsplash.com"><img src="https://picsum.photos/1280/720?image=350" alt=""/></a> <!-- Item Info --> <div class="sh__meta"> <h4>Image with web link</h4> <span>Forwards by clicking on the picture to <a href="https://www.unsplash.com">Unsplash.com</a></span> </div> </div> <!-- Slider Item 4 --> <div class="sh__item"> <img src="https://picsum.photos/1280/720?image=460" alt=""/> <!-- Item Info --> <div class="sh__meta"> <h3>I am an H3 title text!</h3> <span>Here is the subtitle to show a description ...</span> </div> </div> <!-- Slider Item 5 --> <div class="sh__item"> <img src="https://picsum.photos/1280/720?image=530" alt=""/> <!-- Item Info --> <div class="sh__meta"> <h4>I am an H4 title text!</h4> <span>Here is the subtitle to show a description ...</span> </div> </div> <!-- Slider Item 6 --> <div class="sh__item"> <a href="https://www.unsplash.com"><img src="https://picsum.photos/1280/720?image=680" alt=""/></a> <!-- Item Info --> <div class="sh__meta"> <h4>Image with web link</h4> <span>Forwards by clicking on the picture to <a href="https://www.unsplash.com">Unsplash.com</a></span> </div> </div> </div> <!-- .sh__content --> <!-- Button --> <div class="sh__btns"> <label for="s1"></label> <label for="s2"></label> <label for="s3"></label> <label for="s4"></label> <label for="s5"></label> <label for="s6"></label> </div> <!-- .sh__btn --> <!-- Arrows --> <div class="sh__arrows"> <label for="s1"></label> <label for="s2"></label> <label for="s3"></label> <label for="s4"></label> <label for="s5"></label> <label for="s6"></label> </div> <!-- .sh__arrows --> <!--Control--> <button class="sh-control"></button> </div> <!-- .sheetSlider --> </div> </div> <!-- Ende Bilderslider --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor5" > >>>>>>>>>>> Scrollpoint 5 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start 3 Column Textboxes --> <div class="row section"> <div class="col-md-4"> <h5 class="title">Column 1</h5> <p>I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.</p> </div> <div class="col-md-4 center"> <h5 class="title">Column 2 (center)</h5> <p>I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.</p> <br/> <p><a href="#" class="button">Button</a></p> </div> <div class="col-md-4"> <h5 class="title">Column 3</h5> <p>I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.</p> </div> </div> <!-- Ende 3 Column Textboxes --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor6" > >>>>>>>>>>> Scrollpoint 6 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Titel & Text --> <div class="row section"> <div class="col-md-12"> <h2 class="title right">This is an H2 title (right)</h2> <p>Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. Clock round the earhole <a href="#">scrumpy</a> bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa. </p> <br/> <p><small>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</small></p> </div> </div> <!-- Ende Titel & Text --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor7" > >>>>>>>>>>> Scrollpoint 7 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Pricing Table --> <div class="row section pricing"> <div class="col-md-12"> <h2 class="title">Pricing tables (responsive)</h2> <p>Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. Clock round the earhole <a href="#">scrumpy</a> bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> <div class="columnsOne"> <ul class="price"> <li class="header">Basic</li> <li class="subtable">$ 9.99 / month</li> <li>10GB Storage</li> <li>10 Emails</li> <li>10 Domains</li> <li>1GB Bandwidth</li> <li class="Pbottom"><a href="#" class="button">Sign Up</a></li> </ul> </div> <div class="columnsTwo"> <ul class="price"> <li class="header pro">Pro</li> <li class="subtable">$ 100.90 / year</li> <li>Unlimited Storage</li> <li>250 Emails</li> <li>25 Domains <a href="https://www.powerstylez.com">(Read more)</a></li> <li>6GB Bandwidth</li> <li class="Pbottom"><a href="#" class="nav-link button buttonPrimary">Sign up now!</a></li> </ul> </div> <div class="columnsThree"> <ul class="price"> <li class="header">Premium</li> <li class="subtable">$ 29.99 / month</li> <li>50GB Storage</li> <li>50 Emails</li> <li>12 Domains</li> <li>2GB Bandwidth</li> <li class="Pbottom"><a href="#" class="button">Sign Up</a></li> </ul> </div> </div> <!-- Ende Pricing Table --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor8" > >>>>>>>>>>> Scrollpoint 8 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Portfolio --> <div class="row section"> <h2 class="title">Portfolio</h2> <p>Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. Clock round the earhole <a href="#">scrumpy</a> bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> <br/> <p><i>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</i></p> <div class="portfolio section"> <ul class="grid"> <li> <figure> <img src="https://picsum.photos/1280/720?random" alt=""> <figcaption> <h3>Random Image</h3> <span>Changes with repeated call</span> <a href="https://picsum.photos/" class="button">Details</a> </figcaption> </figure> </li> <li> <figure> <img src="https://picsum.photos/1280/720?image=369" alt=""> <figcaption> <h3>Picsum Image</h3> <span>Is there ... here: https://picsum.photos</span> <a href="#" class="button">Details</a> </figcaption> </figure> </li> <li> <figure> <img src="https://picsum.photos/g/1280/720?image=369" alt=""> <figcaption> <h3>Picsum Image (GS)</h3> <span>Is there ... here: https://picsum.photos</span> <a href="#" class="button">Details</a> </figcaption> </figure> </li> </ul> <ul class="grid"> <li> <figure> <img src="https://picsum.photos/1280/720?image=619" alt=""> <figcaption> <h3>Picsum Image</h3> <span>Is there ... here: https://picsum.photos</span> <a href="#" class="button">Details</a> </figcaption> </figure> </li> <li> <figure> <img src="https://picsum.photos/1280/720?image=184" alt=""> <figcaption> <h3>Picsum Image</h3> <span>Is there ... here: https://picsum.photos</span> <a href="#" class="button">Details</a> </figcaption> </figure> </li> <li> <figure> <img src="https://picsum.photos/1280/720?image=621" alt=""> <figcaption> <h3>Nice picture</h3> <span>...by unknown photographer</span> <a href="#" class="button">Details</a> </figcaption> </figure> </li> </ul> </div> </div> <!-- Ende Portfolio --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor9" > >>>>>>>>>>> Scrollpoint 9 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Counterboxes --> <div id="counter"> <div class="row section counterbox"> <div class="col-md-3"> <i class="fa fa-code"></i> <h2 class="counter-value count-title" data-to="5600" data-count="5600">0</h2> <p class="count-text ">lines of CSS code written</p> </div> <div class="col-md-3"> <i class="fa fa-coffee"></i> <h2 class="counter-value count-title" data-to="1700" data-count="1700">0</h2> <p class="count-text ">liters of drinking strong coffee</p> </div> <div class="col-md-3"> <i class="fa fa-bed"></i> <h2 class="counter-value count-title" data-to="23" data-count="23">0</h2> <p class="count-text ">days & nights programmed</p> </div> <div class="col-md-3"> <i class="fa fa-thumbs-o-up"></i> <h2 class="counter-value count-title" data-to="157" data-count="157">0</h2> <p class="count-text ">positive reviews from customers</p> </div> </div> </div> <!-- Ende Counterboxes --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor10" > >>>>>>>>>>> Scrollpoint 10 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start GAccordion --> <div class="gaccordion section"> <h3 class="title">This is an accordion menu</h3> <p class="subtitle">Here is the subtitle to show a description ...</p> <li class="gaccordion">Section 1</li> <div class="gpanel"> <p> I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please. We don't need a backup, it never goes down! can you make it stand out more? so can you make it look more designed so i know you've made thirty iterations but can we go back to the first one that was the best version nor the target audience is makes and famles aged zero and up, i was wondering if my cat could be placed over the logo in the flyer yet I think we need to start from scratch. Make it sexy something summery; colourful. This is just a 5 minutes job is this the best we can do, and make it look like Apple, for i love it, but can you invert all colors? and can you make it more infographic-y. It's great, can you add a beard though is this the best we can do could you rotate the picture to show the other side of the room? and could you solutionize that for me. The hair is just too polarising. What is a hamburger menu other agencies charge much lesser it looks a bit empty, try to make everything bigger can you put "find us on facebook" by the facebook logo? for is this the best we can do, I know somebody who can do this for a reasonable cost, so that's great, but we need to add this 2000 line essay. You can get my logo from facebook I got your invoice...it seems really high, why did you charge so much, nor doing some work for us "pro bono" will really add to your portfolio i promise. There is too much white space is this the best we can do, mmm, exactly like that, but different, the flier should feel like a warm handshake, but I know somebody who can do this for a reasonable cost, or make it pop can you rework to make the pizza look more delicious. Do less with more i love it, but can you invert all colors? can you help me out? you will get a lot of free exposure doing this other agencies charge much lesser, so we have big contacts we will promote you, nor the website doesn't have the theme i was going for. We don't need a contract, do we doing some work for us "pro bono" will really add to your portfolio i promise. Start on it today and we will talk about what i want next time . Make it look like Apple can you make it more infographic-y so try a more powerful colour theres all this spanish text on my site this was not according to brief.</p> </div> <li class="gaccordion">Section 2</li> <div class="gpanel"> <p>Lorem ipsum...</p> </div> <li class="gaccordion">Section 3</li> <div class="gpanel"> <p> You are lucky to even be doing this for us we try your eye, but can you change everything? and I know somebody who can do this for a reasonable cost, or give us a complimentary logo along with the website, nor can we barter services?. Can't you just take a picture from the internet? can't you just take a picture from the internet? make it look like Apple i was wondering if my cat could be placed over the logo in the flyer can it be more retro. The target audience is makes and famles aged zero and up i love it, but can you invert all colors? and do less with more. Can you turn it around in photoshop so we can see more of the front can you pimp this powerpoint, need more geometry patterns other agencies charge much lesser. The website doesn't have the theme i was going for I want you to take it to the next level. Doing some work for us "pro bono" will really add to your portfolio i promise we try your eye, but can you change everything?. This looks perfect. Just Photoshop out the dog, add a baby, and make the curtains blue make it original. Can you put "find us on facebook" by the facebook logo? that's great, but can you make it work for ie 2 please nor you might wanna give it another shot, for can it be more retro. We try your eye, but can you change everything? can you lower the price for the website? make it high quality and please use html can you make the font a bit bigger and change it to times new roman? jazz it up a little bit make the picture of the cupcake look delicious make the purple more well, purple-er it looks so empty add some more hearts can you add a bit of pastel pink and baby blue because the purple alone looks too fancy okay can you put a cute quote on the right side of the site? oh no it looks messed up! i think we need to start from scratch, for I want you to take it to the next level, for start on it today and we will talk about what i want next time , for there are more projects lined up charge extra the next time, and I want you to take it to the next level, nor can my website be in english?.</p> <p> <img src="https://cdn-icons-png.flaticon.com/512/265/265674.png" alt="Herb Doe" style="height:100px;width:100px;border-radius:100%;float:right;margin:0px 0px 20px 20px"> We are a startup can we have another option, but could you rotate the picture to show the other side of the room? it looks a bit empty, try to make everything bigger, but it's great, can you add a beard though but it's great, can you add a beard though . Remember, everything is the same or better what is a hamburger menu or needs to be sleeker, can you punch up the fun level on these icons this red is too red so there is too much white space. We are a startup it looks a bit empty, try to make everything bigger, or can my website be in english? or can you put "find us on facebook" by the facebook logo? but we are your relatives what you've given us is texty, we want sexy so make it sexy. Just do what you think. I trust you the flier should feel like a warm handshake that's great, but can you make it work for ie 2 please im not sure, try something else can you make it look more designed nor it looks a bit empty, try to make everything bigger could you move it a tad to the left. Just do what you think. I trust you it's great, can you add a beard though . There are more projects lined up charge extra the next time there are more projects lined up charge extra the next time, for can you use a high definition screenshot and could you do an actual logo instead of a font, yet I have an awesome idea for a startup, i need you to build it for me I have an awesome idea for a startup, i need you to build it for me or we are a big name to have in your portfolio. Could you solutionize that for me. We exceed the clients' expectations we are a non-profit organization, so could you move it a tad to the left it's great, can you add a beard though can you lower the price for the website? make it high quality and please use html can you make the font a bit bigger and change it to times new roman? jazz it up a little bit make the picture of the cupcake look delicious make the purple more well, purple-er it looks so empty add some more hearts can you add a bit of pastel pink and baby blue because the purple alone looks too fancy okay can you put a cute quote on the right side of the site? oh no it looks messed up! i think we need to start from scratch or other agencies charge much lesser. Can you please change the color theme of the website to pink and purple? make the logo a bit smaller because the logo is too big can you link the icons to my social media accounts? oh and please put pictures of cats everywhere are you busy this weekend? I have a new project with a tight deadline make it sexy. Start on it today and we will talk about what i want next time we are your relatives, for make it pop for needs to be sleeker.</p> </div> </div> <!-- Ende GAccordion --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor11" > >>>>>>>>>>> Scrollpoint 11 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Circlebox --> <div class="row section circlebox"> <div class="col-md-4"> <div class="circle" style='background: url("https://cdn-icons-png.flaticon.com/512/265/265674.png") no-repeat center / cover;'></div> <h2 class='title'>That is an h2 title of the 'Circle' box</h2> <p>I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.</p> </div> <div class="col-md-4"> <div class="circle" style='background: url("images/default-logo-small.png") no-repeat center;'></div> <h2 class='title'>That is an h2 title of the 'Circle' box</h2> <p>I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this <a href="#">2000</a> line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.</p> </div> <div class="col-md-4"> <div class="circle"><i class="fa fa-user-circle"></i></div> <h2 class='title'>That is an h2 title of the 'Circle' box</h2> <p>I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.</p> </div> </div> <!-- Ende Circlebox --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor12" > >>>>>>>>>>> Scrollpoint 12 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Teamboxes --> <div class="row section team"> <div class="col-md-12"> <h2 class="title">This is our Team!</h2> <p>Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. Clock round the earhole <a href="#">scrumpy</a> bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> <div class="col-md-3"> <div class ="thumb"> <img src="https://images.unsplash.com/photo-1570483133451-ddc0616200d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80" alt=""> </div> <div class="team con"> <h3 class='title'>Jane Doe</h3> <span>Head of Development</span> <div class="team description"> <p>Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> <div class="contacticon"> <ul> <li><a href="mailto:community@powerstylez.com"><i class="far fa-envelope"></i> Email</a></li> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-instagram"></i></a></li> <li><a href="#"><i class="fab fa-xing"></i></a></li> </ul> </div> </div> </div> <div class="col-md-3"> <div class ="thumb"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80" alt=""> </div> <div class="team con"> <h3 class='title'>John Doe</h3> <span>Creative Director</span> <div class="team description"> <p>Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> <div class="contacticon"> <ul> <li><a href="mailto:community@powerstylez.com"><i class="far fa-envelope"></i> Email</a></li> <li><a href="#"><i class="fab fa-codepen"></i></a></li> <li><a href="#"><i class="fab fa-github"></i></a></li> <li><a href="#"><i class="fab fa-xing"></i></a></li> <li><a href="#"><i class="fab fa-linkedin-square"></i></a></li> </ul> </div> </div> </div> <div class="col-md-3"> <div class ="thumb"> <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80" alt=""> </div> <div class="team con"> <h3 class='title'>Walt Doe</h3> <span>Sales Managment</span> <div class="team description"> <p>Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> <div class="contacticon"> <ul> <li><a href="mailto:community@powerstylez.com"><i class="far fa-envelope"></i> Email</a></li> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-instagram"></i></a></li> <li><a href="#"><i class="fab fa-xing"></i></a></li> </ul> </div> </div> </div> <div class="col-md-3"> <div class ="thumb"> <img src="https://images.unsplash.com/photo-1609543232540-7d1af3591c20?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8ODYyfHxwZXJzb258ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=700&q=60" alt=""> </div> <div class="team con"> <h3 class='title'>Mary Doe</h3> <span>Head of Marketing</span> <div class="team description"> <p>Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> <div class="contacticon"> <ul> <li><a href="mailto:community@powerstylez.com"><i class="far fa-envelope"></i> Email</a></li> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-instagram"></i></a></li> <li><a href="#"><i class="fab fa-xing"></i></a></li> </ul> </div> </div> </div> </div> <!-- Ende Teamboxes --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor13" > >>>>>>>>>>> Scrollpoint 13 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Commentboxes --> <div class="row section"> <div class="col-md-12"> <h3 class="title">Comment boxes</h3> <p>These boxes are intended to represent comments, <strong>NO</strong> data is retrieved from the software used since this example only contains HTML.</p> <div class="commentbox"> <div class="commentbox-body"> <h6 class="title">Walt Doe <small><i> Posted on June 17, 2020</i></small></h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <img src="https://image.flaticon.com/icons/svg/146/146007.svg" alt="Herb Doe" style="height:60px;width:60px;border-radius:100%"> </div> </div> </div> <div class="row section"> <div class="col-md-4"> <div class="commentbox"> <div class="commentbox-body"> <h6 class="title">Bob Doe <small><i> Posted on June 13, 2020</i></small></h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <img src="https://i1.wp.com/www.winhelponline.com/blog/wp-content/uploads/2017/12/user.png" alt="John Doe" style="height:60px;width:60px;border-radius:100%"> </div> </div> <div class="col-md-4"> <div class="commentbox"> <div class="commentbox-body"> <h6 class="title">Walt Doe <small><i> Posted on September 15, 2018</i></small></h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <img src="https://image.flaticon.com/icons/svg/146/146007.svg" alt="Walt Doe" style="height:60px;width:60px;border-radius:100%"> </div> </div> <div class="col-md-4"> <div class="commentbox"> <div class="commentbox-body"> <h6 class="title">Jane Doe <small><i> Posted on September 15, 2018</i></small></h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <img src="https://image.flaticon.com/icons/svg/146/146005.svg" alt="Jane Doe" style="height:60px;width:60px;border-radius:100%"> </div> </div> </div> <!-- Ende Commentboxes --> <!-- Start Trennlinie --><div class="col-md-12"><div class="divider"></div></div><!-- Ende Trennlinie --> <!-- Start Anchor Scrollpoint --><div id="anchor14" > >>>>>>>>>>> Scrollpoint 14 <<<<<<<<<<<< </div><!-- Ende Anchor Scrollpoint --> <!-- Start Basic Beispiele --> <div class="row section"> <div class="col-md-12"> <h3 class="title">Headlines</h3> <p class="subtitle">These are the text examples for various headings, once as a 'normal' version and also as 'title' classifications.</p> <h1>h1 (70px)</h1> <h2>h2 (60px)</h2> <h3>h3 (50px)</h3> <h4>h4 (40px)</h4> <h5>h5 (30px)</h5> <h6>h6 (18px)</h6> <br/> <h1 class="title">h1 class title (70px)</h1> <h2 class="title">h2 class title (60px)</h2> <h3 class="title">h3 class title (50px)</h3> <h4 class="title">h4 class title (40px)</h4> <h5 class="title">h5 class title (30px)</h5> <h6 class="title">h6 class title (18px)</h6> </div> <div class="row section"> <div class="col-md-12"> <h4 class="title">Quote box</h4> <quote> <h5 class="title">This is a quote with enlarged text content (130%)</h5> <p>Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. Clock round the earhole scrumpy bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </quote> </div> </div> <div class="row section"> <div class="col-md-12"> <h4 class="title">Highlighted text (also known as 'highlight')</h4> <p>Clock round the earhole scrumpy bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling. <mark>This is a marked text with <a href="#">link</a> in the text content.</mark> Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.</p> </div> </div> <div class="row section"> <div class="col-md-12"> <h4 class="title">Abbr text link</h4> <p>This is a text with <abbr title="This is the text in the hoover effect">abbr content (abbr)</abbr>, when hovering with the mouse pointer, a self-defined text is displayed. This type of information is not suitable for mobile use, it is advisable to work there with <abbr title="Direct text should be used mobile because mobile devices behave differently">direct text</abbr> display.</p> </div> </div> </div> <div class="row section"> <div class="col-md-12"> <h4 class="title">Notice boxes</h4> <p>There are 4 different information boxes in the html system, here you can see them as an example:</p> <div class="success"> <strong>Success!</strong> This success box could indicate a successful or positive action. <a href="#">Link</a> </div> <div class="info"> <strong>Info!</strong> This info box could indicate a neutral informative change or action. <a href="#">Link</a> </div> <div class="error"> <strong>Error!</strong> This error box could indicate a dangerous or potentially negative action. <a href="#">Link</a> </div> <div class="warning"> <strong>Warning!</strong> This warning box could indicate a warning that might need attention. <a href="#">Link</a> </div> </div> </div> <div class="row section"> <div class="col-md-12"> <h4 class="title">Social Links with animation (pulse)</h4> <li class="social"><a href="#" alt="Telegram" class="social"><i class="fa fa-telegram"></i></a></li> <li class="social"><a href="#" alt="Whatsapp" class="social"><i class="fa fa-whatsapp"></i></a></li> <li class="social"><a href="#" alt="Snapchat" class="social"><i class="fa fa-snapchat"></i></a></li> <li class="social"><a href="#" alt="Facebook" class="social"><i class="fa fa-facebook"></i></a></li> <li class="social"><a href="#" alt="Twitter" class="social"><i class="fa fa-twitter"></i></a></li> <li class="social"><a href="#" alt="GooglePlus" class="social"><i class="fa fa-google-plus-official"></i></a></li> <li class="social"><a href="#" alt="Instagram" class="social"><i class="fa fa-instagram"></i></a></li> <li class="social"><a href="#" alt="Pinterest" class="social"><i class="fa fa-pinterest"></i></a></li> <li class="social"><a href="#" alt="Reddit" class="social"><i class="fa fa-reddit"></i></a></li> <li class="social"><a href="#" alt="Linkedin" class="social"><i class="fa fa-linkedin-square"></i></a></li> <li class="social"><a href="#" alt="Xing" class="social"><i class="fa fa-xing"></i></a></li> <li class="social"><a href="#" alt="Dribbble" class="social"><i class="fa fa-dribbble"></i></a></li> <li class="social"><a href="#" alt="Github" class="social"><i class="fa fa-github"></i></a></li> <li class="social"><a href="#" alt="Steam" class="social"><i class="fa fa-steam"></i></a></li> </div> </div> </div> <!-- Ende Basic Beispiele --> <style> /*---------- Basics -----------*/ #GZcustompagecontainer { font-size: 14px; line-height: 1.48; } #GZcustompagecontainer a { outline: none !important; } #GZcustompagecontainer .row.section.hinweis .col-md-12 { border: 1px dashed; padding: 10px; font-family: 'Consolas', monospace; } #GZcustompagecontainer .row.section.hinweis p { display: inline; line-height: 2; } #GZcustompagecontainer .row.section.hinweis h6 { margin-top: 20px; font-weight: 600; } #GZcustompagecontainer p a:not(.button) { text-decoration: underline dotted; } #GZcustompagecontainer .divider { border-top: 8px solid currentColor; margin: 30px 10%; opacity: .1; } #GZcustompagecontainer h1 { font-size: 70px; } #GZcustompagecontainer h2 { font-size: 60px; } #GZcustompagecontainer h3 { font-size: 50px; } #GZcustompagecontainer h4 { font-size: 40px; } #GZcustompagecontainer h5 { font-size: 30px; } #GZcustompagecontainer h6 { font-size: 18px; } #GZcustompagecontainer h1.title { font-size: 70px; line-height: 1.1; letter-spacing: -3px; } #GZcustompagecontainer h2.title { font-size: 60px; line-height: 70px; letter-spacing: -3px; margin-bottom: 10px; } #GZcustompagecontainer h3.title { font-size: 50px; line-height: 1; margin-bottom: 10px; letter-spacing: -2px; } #GZcustompagecontainer .gaccordion.section h3 { margin: 15px 0px 2px; } #GZcustompagecontainer h4.title { font-size: 40px; line-height: 1; margin-bottom: 10px; letter-spacing: -1px; } #GZcustompagecontainer h5.title { font-size: 30px; line-height: 1; margin-bottom: 10px; letter-spacing: -1px; } #GZcustompagecontainer h6.title { font-size: 18px; line-height: 1.6; margin-bottom: 10px; } #GZcustompagecontainer .subtitle { font-size: 20px; margin-top: -10px; margin-bottom: 20px; } #GZcustompagecontainer .center { text-align: center; } #GZcustompagecontainer .right { text-align: right; } #GZcustompagecontainer mark { padding: 2px; color: #333 !important; } #GZcustompagecontainer mark a { color: #333 !important; text-decoration: underline dotted !important; } #GZcustompagecontainer quote { display: block; padding: 20px 0px; min-height: 40px; margin: 10px 0px; } #GZcustompagecontainer quote::before { content: "\f10d"; font-family: FontAwesome; font-weight: normal; font-size: 60px; height: 44px; line-height: 44px; opacity: .4; position: absolute; margin-top: -5px; } #GZcustompagecontainer quote h1, #GZcustompagecontainer quote h2, #GZcustompagecontainer quote h3, #GZcustompagecontainer quote h4, #GZcustompagecontainer quote h5, #GZcustompagecontainer quote h6 { margin-left: 80px; font-style: italic; } #GZcustompagecontainer quote p { margin-left: 80px; font-size: 130%; font-style: italic; line-height: 1.2; } #GZcustompagecontainer abbr[data-original-title], #GZcustompagecontainer abbr[title] { text-decoration: underline dotted; cursor: help; border-bottom: none; } #GZcustompagecontainer li.nav { list-style: none; display: inline-block; margin: 2px; } #GZcustompagecontainer .fieldsmall { resize: none; font-size: 12px; padding: 3px 6px; border: 1px solid #000 !important; background-color: #fff !important; color: #222 !important; font-family: Courier New; word-break: normal; display: inline-block; margin: 1px 0px; } /*---------- Boxsystem Basics -----------*/ #GZcustompagecontainer .row { margin-right: 0px; margin-left: 0px; } #GZcustompagecontainer .col-md-3 { padding: 30px 40px; } #GZcustompagecontainer .col-md-4, #GZcustompagecontainer .col-md-12 { padding-right: 0px; padding-left: 0px; } #GZcustompagecontainer .col-md-4:nth-child(2) { padding-right: 20px; padding-left: 20px; } #GZcustompagecontainer .col-md-4 h2.title { font-size: 20px; line-height: 1.1; margin-bottom: 10px; } #GZcustompagecontainer .col-md-12 { padding: 10px 0px; } /*---------- Counterbox -----------*/ #GZcustompagecontainer .row.section.counterbox .col-md-3 { text-align: center; border-right: 1px solid; padding: 15px 40px; } #GZcustompagecontainer .row.section.counterbox .col-md-3:last-child { border-right: none; } #GZcustompagecontainer .row.section.counterbox .col-md-3 .fa { text-align: center; font-size: 60px; line-height: 1; } #GZcustompagecontainer .counter-value.count-title { font-size: 30px !important; font-weight: 600; line-height: 1 !important; padding: 10px; } /*---------- Top Herobox -----------*/ #GZcustompagecontainer .herobg { background: url('https://picsum.photos/1820/720?image=4'); width: 100%; min-height: 600px; background-repeat: no-repeat; background-position: center; background-size: cover; padding: 50px; text-align: center; color: #ffffff; } #GZcustompagecontainer .herobg .col-md-12 { background-color: rgba(255, 255, 255, 0.2); /*-- background-color: rgba(0, 0, 0, 0.2); fuer helle Bilder nutzen --*/ padding: 20px; margin-bottom: 20px; } #GZcustompagecontainer .herobg h1 { font-size: 70px !important; line-height: 1.1 !important; letter-spacing: -3px !important; color: #fff; margin-top: 40px; text-shadow: 0px 4px 8px #000; } #GZcustompagecontainer .herobg .subtitle::before { content: ""; margin: 20px 20%; height: 5px; background-color: #fff; display: block; } #GZcustompagecontainer .herobg p.subtitle { font-size: 20px !important; font-weight: 100 !important; line-height: 1.6 !important; margin-top: 20px; text-shadow: 0px 2px 3px #000; } #GZcustompagecontainer .herobg .buttonGroup { margin-top: 40px; margin-bottom: 80px; justify-content: center; } /*---------- Colored Announceboxes -----------*/ #GZcustompagecontainer .announcebox { background-color: #3a6d9c; /*Hintergrundfarbe*/ color: #ffffff; /*Schriftfarbe*/ } .sidebar + .content:not(:last-child) #GZcustompagecontainer .announcebox .col-md-3 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .announcebox .col-md-3 { flex: 0 0 25%; max-width: 25%; } #GZcustompagecontainer .announcebox .col-md-3:nth-child(1) { background: rgba(0, 0, 0, 0.05); } #GZcustompagecontainer .announcebox .col-md-3:nth-child(2) { background: rgba(0, 0, 0, 0.1); } #GZcustompagecontainer .announcebox .col-md-3:nth-child(3) { background: rgba(0, 0, 0, 0.2); } #GZcustompagecontainer .announcebox .col-md-3:nth-child(4) { background: rgba(0, 0, 0, 0.3); } #GZcustompagecontainer .announcebox .col-md-3 .fa { display: block; text-align: left; font-size: 60px; color: #fff; line-height: 1.4; } #GZcustompagecontainer .announcebox .font-weight-bold { font-weight: 600 !important; } #GZcustompagecontainer .announcebox a:not(.button) { color: #ffffff; } #GZcustompagecontainer .announcebox a:hover { opacity: .8; } #GZcustompagecontainer .announcebox h6 + p { margin: 10px 0px 20px; font-weight: 100; } #GZcustompagecontainer .announcebox p a:not(.button) { text-decoration: underline dotted; font-weight: 400; } #GZcustompagecontainer .announcebox .button { background-color: #fff !important; background-image: none !important; border: none !important; color: #151515 !important; font-weight: 400; box-shadow: none !important; border-radius: 2px; line-height: 1.2; text-shadow: none !important; padding: 7px 12px; font-size: 14px; } #GZcustompagecontainer .announcebox .button::before { display: none; } #GZcustompagecontainer .announcebox .button:hover { opacity: .75; } /*---------- Social Button -----------*/ #GZcustompagecontainer li.social { width: 52px; height: 52px; display: inline-block; text-align: center; border: 2px solid; list-style: none; margin: 2px; } #GZcustompagecontainer .social a { display: block; font-size: 34px; line-height: 48px; } #GZcustompagecontainer li.social:hover { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /*---------- Picturebox Left Float -----------*/ #GZcustompagecontainer .picturebox .col-md-4 { display: block; max-height: 300px; flex: 1; width: 300px; padding: 0px; max-width: 300px; } #GZcustompagecontainer .picturebox .col-md-4 img { background-size: cover; max-height: 300px; width: 300px; } #GZcustompagecontainer .picturebox .col-md-8 { padding: 0px 0px 0px 30px; flex: 1; max-width: 100%; } #GZcustompagecontainer .picturebox .col-md-8.right { padding: 0px 30px 0px 0px; } #GZcustompagecontainer .picturebox .subtitle { font-size: 20px; margin-top: -20px; margin-bottom: 20px; } /*---------- Comment Boxes -----------*/ #GZcustompagecontainer .commentbox { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); padding: 14px; margin: 10px 0px; } #GZcustompagecontainer .commentbox-body { -ms-flex: 1; flex: 1; } /*---------- Accordion -----------*/ #GZcustompagecontainer .gaccordion.section::before { display: none; } #GZcustompagecontainer li.gaccordion { margin-top: 2px; border-radius: 0px; color: #ffffff !important; background-color: #3a6d9c; /*Hintergrundfarbe*/ box-shadow: none !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer; list-style: none; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } #GZcustompagecontainer li.gaccordion:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)) !important; /*Hintergrundfarbe Hover Transparenz*/ } #GZcustompagecontainer li.gaccordion.active { background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)) !important; /*Hintergrundfarbe Active Transparenz*/ } #GZcustompagecontainer .gpanel { padding: 0 18px; background-color: rgba(0, 0, 0, 0.05); /*Hintergrundfarbe Textinhalt*/ max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } #GZcustompagecontainer .gaccordion p.subtitle { line-height: 1.5; margin-bottom: 5px; } #GZcustompagecontainer .gpanel p { padding: 10px 0px; } #GZcustompagecontainer .gaccordion::before { color: #fff; float: left; margin-right: 10px; content: "\f078"; font-family: FontAwesome; font-weight: normal; font-size: 13px; height: 20px; line-height: 20px; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; } #GZcustompagecontainer .gaccordion.active::before { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); } /*---------- Circleboxes -----------*/ #GZcustompagecontainer .row.section.circlebox { text-align: center; } .sidebar + .content:not(:last-child) #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } #GZcustompagecontainer .circle { background-color: #3a6d9c !important; /*Hintergrundfarbe*/ border: 15px solid #2b4f71; /*Umrandung Textinhalt*/ border-radius: 100%; width: 200px; height: 200px; display: inline-block; margin: 15px 0px; } #GZcustompagecontainer .circle:hover { border: 15px solid #335b81; /*Umrandung Hover Transparenz*/ -webkit-transition: 200ms linear 0s; -moz-transition: 200ms linear 0s; -o-transition: 200ms linear 0s; transition: 200ms linear 0s; } #GZcustompagecontainer .circle .fa { font-size: 120px; line-height: 170px; color: #fff; } #GZcustompagecontainer .circlebox .col-md-4 h2.title { font-size: 24px !important; line-height: 1.1 !important; margin-bottom: 10px !important; letter-spacing: -1px !important; } #GZcustompagecontainer .circle.col-md-4:nth-child(2) { padding-right: 20px; padding-left: 20px; } /*! => Sheet Slider v2.2.0 => Copyright: 2018 zkreations => Licensed under MIT | https://zkreations.github.io/SheetSlider/ */ /* Basic design */ #GZcustompagecontainer .sheetSlider { line-height: 1.48; position: relative; width: 100%; padding-bottom: 30.857143%; /* Höhe des Sliders */ overflow: hidden; color: #fff; } .sheetSlider a { color: #fff; } .sheetSlider input, .sh__btns { display: none; } /* reset */ .sheetSlider h4,.sheetSlider label,.sheetSlider a,.sheetSlider img,.sheetSlider span,.sh-control { background: none; padding: 0; margin: 0; border: 0; outline: 0; box-shadow: 0 0 transparent; text-decoration: none; } /* Inhalt */ .sh__content { position: absolute; height: 100%; width: 100%; transition: transform .7s cubic-bezier(.54,0,.1,1); transform: translate3d(0, 0, 0); } /* Anpassung Elemente */ .sh__item { display: block; position: absolute; top: 0;left: 0; width: 100%; height: 100%; } .sh__item img { width: 100%; } /* Anpassung Textinhalte */ .sh__meta { left: 25px; top: 25px; position: absolute; background-color: rgba(0, 0, 0, 0.4); /* Textblock Hintergrundfarbe hier anpassen */ padding: 8px 18px; /* Textblock Randabstand hier anpassen */ text-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 1px 5px rgba(0, 0, 0, .16); max-width: 100%; opacity: 0; transform: translate3d(0, 4em, 0); transition: opacity .7s .4s,transform .7s .4s; } .sh__meta h1, .sh__meta h2, .sh__meta h3, .sh__meta h4, .sh__meta span { display: block; margin-bottom: 0px !important; } .sh__meta span { font-weight: 400; padding-top: 0px; } .sh__meta a { text-decoration: underline dotted !important; transition: color .5s; } #GZcustompagecontainer .sh__meta span { color: #ffffff !important; /* Untertitel Schriftfarbe hier anpassen */ font-size: 15px; /* Untertitel Schriftgröße hier anpassen */ } #GZcustompagecontainer .sh__meta h1 { font-size: 28px; /* H1 Schriftgröße hier anpassen */ line-height: 1.28; } #GZcustompagecontainer .sh__meta h2 { font-size: 23px; /* H2 Schriftgröße hier anpassen */ line-height: 1.28; } #GZcustompagecontainer .sh__meta h3 { font-size: 18px; /* H3 Schriftgröße hier anpassen */ line-height: 1.28; } #GZcustompagecontainer .sh__meta h4 { font-size: 34px; /* H4 Schriftgröße hier anpassen */ line-height: 1.28; } /* Anpassung Button Navigation */ .sh__btns { bottom: 0;left: 0;right: 0; position: absolute; z-index: 10; padding-left: 4em; padding-right: 4em; justify-content: space-between; margin-bottom: 20px; } .sh__btns label { background-color: rgba(255, 255, 255, .5); cursor: pointer; margin: 0 .2em; height: 6px; flex: 1 0 auto; transition: background .5s; } .sh__btns label:hover { background-color: rgba(255, 255, 255, 1); } /* Anpassung Steuerbutton */ .sh__arrows,.sh-control { position: absolute; right: 0; bottom: 0; z-index: 10; transform: translate3d(0, 0, 0); transition: transform .3s; box-shadow: 0 1px 1px rgba(0, 0, 0, .15); } .sh__arrows:hover,.sheetSlider:hover .sh__arrows,.sheetSlider:hover .sh-control { transform: translate3d(0, 0, 0); } .sh__arrows label, .sh-control { background-color: white; background-repeat: no-repeat; background-position: 50%; cursor: pointer; border-radius: 0px !important; } .sh__arrows label { display: none; transition: background-color .3s; width: 50px; height: 50px; color: #888888; } .sh__arrows label:hover { background-color: rgba(255, 255, 255, .9); color: #333333; } /* play/pause */ .sh-control { width: 45px; height: 45px; bottom: 50px; background-color: white !important; color: #888888 !important; border-radius: 0px !important; background-image: none !important; border: none !important; box-shadow: none !important; text-shadow: none !important; } .sh-control::before { content: "\f04c" !important; font-family: FontAwesome !important; font-weight: normal !important; display: inline-block !important; font-size: 20px !important; line-height: 28px !important; vertical-align: -5px !important; } .sh-control:hover { color: #666666 !important; opacity: .9; } .sh-control.is-active { color: #333333 !important; } /* Bildformate */ /*21:9*/ .sh-21r9 { padding-bottom: 42.857143%; } /*16:9*/ .sh-16r9 { padding-bottom: 56.25%; } /*4:3*/ .sh-4r3 { padding-bottom: 75%; } /*1:1*/ .sh-1r1 { padding-bottom: 100%; } /* Animation Versions "checked" */ /*Animation Default*/ .sh-default .sh__item:nth-child(2) { left: 100%; } .sh-default .sh__item:nth-child(3) { left: 200%; } .sh-default .sh__item:nth-child(4) { left: 300%; } .sh-default .sh__item:nth-child(5) { left: 400%; } .sh-default .sh__item:nth-child(6) { left: 500%; } .sh-default .sh__item:nth-child(7) { left: 600%; } .sh-default .sh__item:nth-child(8) { left: 700%; } .sh-default .sh__item:nth-child(9) { left: 800%; } .sh-default .sh__item:nth-child(10) { left: 900%; } .sh-default input:nth-child(1):checked~.sh__content { transform: translate3d(0%, 0, 0); } .sh-default input:nth-child(2):checked~.sh__content { transform: translate3d(-100%, 0, 0); } .sh-default input:nth-child(3):checked~.sh__content { transform: translate3d(-200%, 0, 0); } .sh-default input:nth-child(4):checked~.sh__content { transform: translate3d(-300%, 0, 0); } .sh-default input:nth-child(5):checked~.sh__content { transform: translate3d(-400%, 0, 0); } .sh-default input:nth-child(6):checked~.sh__content { transform: translate3d(-500%, 0, 0); } .sh-default input:nth-child(7):checked~.sh__content { transform: translate3d(-600%, 0, 0); } .sh-default input:nth-child(8):checked~.sh__content { transform: translate3d(-700%, 0, 0); } .sh-default input:nth-child(9):checked~.sh__content { transform: translate3d(-800%, 0, 0); } .sh-default input:nth-child(10):checked~.sh__content { transform: translate3d(-900%, 0, 0); } /* Animation vertical*/ .sh-vertical .sh__item:nth-child(2) { top: 100%; } .sh-vertical .sh__item:nth-child(3) { top: 200%; } .sh-vertical .sh__item:nth-child(4) { top: 300%; } .sh-vertical .sh__item:nth-child(5) { top: 400%; } .sh-vertical .sh__item:nth-child(6) { top: 500%; } .sh-vertical .sh__item:nth-child(7) { top: 600%; } .sh-vertical .sh__item:nth-child(8) { top: 700%; } .sh-vertical .sh__item:nth-child(9) { top: 800%; } .sh-vertical .sh__item:nth-child(10) { top: 900%; } .sh-vertical input:nth-child(1):checked~.sh__content { transform: translate3d(0%, 0, 0); } .sh-vertical input:nth-child(2):checked~.sh__content { transform: translate3d(0, -100%, 0); } .sh-vertical input:nth-child(3):checked~.sh__content { transform: translate3d(0, -200%, 0); } .sh-vertical input:nth-child(4):checked~.sh__content { transform: translate3d(0, -300%, 0); } .sh-vertical input:nth-child(5):checked~.sh__content { transform: translate3d(0, -400%, 0); } .sh-vertical input:nth-child(6):checked~.sh__content { transform: translate3d(0, -500%, 0); } .sh-vertical input:nth-child(7):checked~.sh__content { transform: translate3d(0, -600%, 0); } .sh-vertical input:nth-child(8):checked~.sh__content { transform: translate3d(0, -700%, 0); } .sh-vertical input:nth-child(9):checked~.sh__content { transform: translate3d(0, -800%, 0); } .sh-vertical input:nth-child(10):checked~.sh__content { transform: translate3d(0, -900%, 0); } /* Animation fade*/ .sh-fade .sh__item { opacity: 0; transition: opacity .7s cubic-bezier(.54,0,.1,1); } .sh-fade input:nth-child(1):checked~.sh__content .sh__item:nth-child(1), .sh-fade input:nth-child(2):checked~.sh__content .sh__item:nth-child(2), .sh-fade input:nth-child(3):checked~.sh__content .sh__item:nth-child(3), .sh-fade input:nth-child(4):checked~.sh__content .sh__item:nth-child(4), .sh-fade input:nth-child(5):checked~.sh__content .sh__item:nth-child(5), .sh-fade input:nth-child(6):checked~.sh__content .sh__item:nth-child(6), .sh-fade input:nth-child(7):checked~.sh__content .sh__item:nth-child(7), .sh-fade input:nth-child(8):checked~.sh__content .sh__item:nth-child(8), .sh-fade input:nth-child(9):checked~.sh__content .sh__item:nth-child(9), .sh-fade input:nth-child(10):checked~.sh__content .sh__item:nth-child(10) { opacity: 1; z-index: 1; } /* Animation flip */ .sh-flip .sh__item { opacity: 0; transition: transform .5s cubic-bezier(.54,0,.1,1), opacity .5s; transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform-origin: bottom; } .sh-flip input:nth-child(1):checked~.sh__content .sh__item:nth-child(1), .sh-flip input:nth-child(2):checked~.sh__content .sh__item:nth-child(2), .sh-flip input:nth-child(3):checked~.sh__content .sh__item:nth-child(3), .sh-flip input:nth-child(4):checked~.sh__content .sh__item:nth-child(4), .sh-flip input:nth-child(5):checked~.sh__content .sh__item:nth-child(5), .sh-flip input:nth-child(6):checked~.sh__content .sh__item:nth-child(6), .sh-flip input:nth-child(7):checked~.sh__content .sh__item:nth-child(7), .sh-flip input:nth-child(8):checked~.sh__content .sh__item:nth-child(8), .sh-flip input:nth-child(9):checked~.sh__content .sh__item:nth-child(9), .sh-flip input:nth-child(10):checked~.sh__content .sh__item:nth-child(10) { transform: perspective(400px); opacity: 1; z-index: 1; } /* Textanzeige */ .sheetSlider input:nth-child(1):checked~.sh__content .sh__item:nth-child(1) .sh__meta, .sheetSlider input:nth-child(2):checked~.sh__content .sh__item:nth-child(2) .sh__meta, .sheetSlider input:nth-child(3):checked~.sh__content .sh__item:nth-child(3) .sh__meta, .sheetSlider input:nth-child(4):checked~.sh__content .sh__item:nth-child(4) .sh__meta, .sheetSlider input:nth-child(5):checked~.sh__content .sh__item:nth-child(5) .sh__meta, .sheetSlider input:nth-child(6):checked~.sh__content .sh__item:nth-child(6) .sh__meta, .sheetSlider input:nth-child(7):checked~.sh__content .sh__item:nth-child(7) .sh__meta, .sheetSlider input:nth-child(8):checked~.sh__content .sh__item:nth-child(8) .sh__meta, .sheetSlider input:nth-child(9):checked~.sh__content .sh__item:nth-child(9) .sh__meta, .sheetSlider input:nth-child(10):checked~.sh__content .sh__item:nth-child(10) .sh__meta { opacity: 1; transform: translate3d(0, 0, 0); } /* Navigations Button Bilder */ /*Navibutton links */ .sheetSlider input:nth-child(1):checked~input:nth-child(2):last-of-type~.sh__arrows label:nth-child(2), .sheetSlider input:nth-child(1):checked~input:nth-child(3):last-of-type~.sh__arrows label:nth-child(3), .sheetSlider input:nth-child(1):checked~input:nth-child(4):last-of-type~.sh__arrows label:nth-child(4), .sheetSlider input:nth-child(1):checked~input:nth-child(5):last-of-type~.sh__arrows label:nth-child(5), .sheetSlider input:nth-child(1):checked~input:nth-child(6):last-of-type~.sh__arrows label:nth-child(6), .sheetSlider input:nth-child(1):checked~input:nth-child(7):last-of-type~.sh__arrows label:nth-child(7), .sheetSlider input:nth-child(1):checked~input:nth-child(8):last-of-type~.sh__arrows label:nth-child(8), .sheetSlider input:nth-child(1):checked~input:nth-child(9):last-of-type~.sh__arrows label:nth-child(9), .sheetSlider input:nth-child(1):checked~input:nth-child(10):last-of-type~.sh__arrows label:nth-child(10), .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(2), .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(3), .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(4), .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(5), .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(6), .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(7), .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(8), .sheetSlider input:nth-child(10):checked~.sh__arrows label:nth-child(9) { display: block; float: left; } .sheetSlider input:nth-child(1):checked~input:nth-child(2):last-of-type~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(3):last-of-type~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(4):last-of-type~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(5):last-of-type~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(6):last-of-type~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(7):last-of-type~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(8):last-of-type~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(9):last-of-type~.sh__arrows label:nth-child(9)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(10):last-of-type~.sh__arrows label:nth-child(10)::before, .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(10):checked~.sh__arrows label:nth-child(9)::before { content: "\f053"; font-family: FontAwesome; font-weight: normal !important; display: inline-block; font-size: 40px; line-height: 62px; padding-left: 12px; } /*Navibutton rechts */ .sheetSlider input:nth-child(1):checked~.sh__arrows label:nth-child(2), .sheetSlider input:nth-child(2):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(3), .sheetSlider input:nth-child(3):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(4), .sheetSlider input:nth-child(4):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(5), .sheetSlider input:nth-child(5):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(6), .sheetSlider input:nth-child(6):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(7), .sheetSlider input:nth-child(7):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(8), .sheetSlider input:nth-child(8):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(9), .sheetSlider input:nth-child(9):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(10), .sheetSlider input:nth-child(10):checked:last-of-type~.sh__arrows label:nth-child(1) { display: block; float: right; } .sheetSlider input:nth-child(1):checked~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(2):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(3):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(4):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(5):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(6):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(7):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(8):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(9)::before, .sheetSlider input:nth-child(9):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(10)::before, .sheetSlider input:nth-child(10):checked:last-of-type~.sh__arrows label:nth-child(1)::before { content: "\f054"; font-family: FontAwesome; font-weight: normal !important; display: inline-block; font-size: 40px; line-height: 62px; padding-left: 22px; } .sheetSlider input:nth-child(1):checked~.sh__btns label:nth-child(1), .sheetSlider input:nth-child(2):checked~.sh__btns label:nth-child(2), .sheetSlider input:nth-child(3):checked~.sh__btns label:nth-child(3), .sheetSlider input:nth-child(4):checked~.sh__btns label:nth-child(4), .sheetSlider input:nth-child(5):checked~.sh__btns label:nth-child(5), .sheetSlider input:nth-child(6):checked~.sh__btns label:nth-child(6), .sheetSlider input:nth-child(7):checked~.sh__btns label:nth-child(7), .sheetSlider input:nth-child(8):checked~.sh__btns label:nth-child(8), .sheetSlider input:nth-child(9):checked~.sh__btns label:nth-child(9), .sheetSlider input:nth-child(10):checked~.sh__btns label:nth-child(10) { background-color: #ffffff; /*aktiver Sliderbutton Hintergrundfarbe*/ } /* Mobile Options */ @media (min-width: 576px) { .sheetSlider { font-size: 9px; } .sh__meta { left: 25px !important; right: 25px !important; top: 25px !important; max-width: 100% !important; width: auto !important; } .sh__arrows, .sh-control { transform: translate3d(100%, 0, 0); } .sh__arrows label { width: 60px; height: 60px; } .sh-control { bottom: calc(4em + 16px); } } @media (min-width: 768px) { .sh__btns { display: flex; } .sh__meta { display: block; } } @media (min-width: 992px) { .sheetSlider{ font-size: 10px; } } /* ================= Sheet Slider Mobile Smartphone */ @media (max-width: 576px) { .sh__meta { left: 0% !important; right: 0px !important; top: 0% !important; width: 100% !important; max-width: 100% !important; padding: 6px 12px; } .sheetSlider h1, .sheetSlider h2, .sheetSlider h3, , .sheetSlider h4 { font-size: 18px !important; /* Überschriften in Sidebar Schriftgröße hier anpassen */ } .sh__meta span, .sh__meta span { font-size: 12px; /* Untertitel in Sidebar Schriftgröße hier anpassen */ } .sh__arrows, .sh-control { display: none; } .sh__btns { display: flex !important; } } /*---------- Pricing Tables -----------*/ #GZcustompagecontainer .row.section.pricing { margin-top: 30px; } #GZcustompagecontainer .pricing .columnsOne { float: left; width: 33.3%; margin-top: 20px; padding-right: .5%; padding-left: 1%; } #GZcustompagecontainer .pricing .columnsTwo { float: left; width: 33.3%; margin-top: 20px; padding: 0px 18px; } #GZcustompagecontainer .pricing .columnsThree { float: left; width: 33.3%; margin-top: 20px; padding-left: .5%; padding-right: 1%; } #GZcustompagecontainer .price { list-style-type: none; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } #GZcustompagecontainer .price:hover { transition: transform 0.24s linear; transform: scale(1.02); } #GZcustompagecontainer .price .header { background-color: #325c84; /*Hintergrundfarbe Tabellenkopf*/ color: #ffffff; font-size: 25px; height: 80px; } #GZcustompagecontainer .price .header.pro { background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); /*Hintergrundfarbe Tabellenkopf Mitte/Pro*/ color: #ffffff; font-size: 28px; } #GZcustompagecontainer .price .header.pro::before { font-family: 'Arial'; font-weight: normal !important; font-style: normal !important; text-align: center; float: left; border: 1px solid #fff; color: #ffffff; padding: 2px 8px; line-height: 1.28; border-radius: 3px; content: "NEU"; font-size: 14px; letter-spacing: 0px; width: 50px; margin-right: -50px; } #GZcustompagecontainer .price .subtable { background-color: #3a6d9c; /*Hintergrundfarbe Tabellenkopf Subtitel*/ color: #ffffff; font-size: 20px; } #GZcustompagecontainer .price li { background-color: #ecf1f7; /*Hintergrundfarbe*/ margin-bottom: 1px; padding: 20px; text-align: center; color: #151515; } #GZcustompagecontainer .price li.Pbottom { background-color: #364c66; } #GZcustompagecontainer .price li.Pbottom .button { background-color: #ffffff !important; color: #151515 !important; font-weight: 400; box-shadow: none !important; background-image: none !important; line-height: 1.48; text-shadow: none !important; padding: 7px 14px; border-radius: 2px; border: none !important; transition: all 0.15s; } #GZcustompagecontainer .price li.Pbottom .button:hover { opacity: .75 !important; } #GZcustompagecontainer .price li a:not(.button) { text-decoration: underline dotted; color: #151515 !important; font-weight: 600; } @media (max-width: 768px) { #GZcustompagecontainer .pricing .columnsOne, #GZcustompagecontainer .pricing .columnsTwo, #GZcustompagecontainer .pricing .columnsThree { width: 100%; float: none; padding: 0px; } #GZcustompagecontainer .price:hover { transform: none; } } /*---------- Teamboxes -----------*/ #GZcustompagecontainer .row.section.team { justify-content: center; } #GZcustompagecontainer .team .col-md-3 { background-color: #3a6d9c; /*Hintergrundfarbe*/ margin: 20px 1% 0px; padding: 0px; flex: 0 0 23%; max-width: 23%; text-align: center; } #GZcustompagecontainer .team .col-md-3 .thumb { background-color: #2c5276; /*Hintergrundfarbe Bild*/ max-height: 450px; overflow: hidden; } #GZcustompagecontainer .team .col-md-3 .thumb img { width: 100%; height: auto; } #GZcustompagecontainer .team .col-md-3 h3.title { margin-bottom: 2px; font-size: 24px; line-height: 26px; letter-spacing: -1px; font-weight: 600; } #GZcustompagecontainer .team.con { padding: 12px; background-color: #3a6d9c; /*Hintergrundfarbe Teambox Content*/ color: #ffffff; min-height: auto; } #GZcustompagecontainer .team.con span { font-size: 18px; font-weight: 500; color: #d7d7d7; line-height: 22px; } #GZcustompagecontainer .team.con .description { font-size: 13px; margin-top: 10px; padding: 10px; border-top: 1px solid #fff; min-height: 120px; } #GZcustompagecontainer .team.con .contacticon { border-top: 1px solid #fff; padding-top: 10px; } #GZcustompagecontainer .team.con .contacticon li { display: inline-block; margin-right: 4px; margin-bottom: 4px; background-color: #ffffff; padding: 5px 12px; border-radius: 2px; transition: all 0.15s; } #GZcustompagecontainer .team.con .contacticon li:hover { opacity: .8; } #GZcustompagecontainer .team.con .contacticon li a { outline: none !important; color: #151515; } #GZcustompagecontainer .team.con .contacticon i { display: inline-block; font-family: FontAwesome; font-size: 15px; font-weight: normal !important; font-style: normal !important; text-align: center; color: #151515; } @media only screen and (min-width: 769px) and (max-width: 1024px) { #GZcustompagecontainer .team .col-md-3 { margin: 20px 3% 0px; flex: 0 0 43%; max-width: 43%; } } @media (max-width: 768px) { #GZcustompagecontainer .team .col-md-3 { width: 100%; max-width: 100%; float: none; padding: 0px; } } /*---------- Portfolio Imageboxes -----------*/ #GZcustompagecontainer .grid { display: flex; padding: 0px; max-width: 100%; margin: 0 auto; list-style: none; text-align: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #GZcustompagecontainer .grid li { -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; display: inline-block; margin: 0; padding: 0px 0px; text-align: left; position: relative; } #GZcustompagecontainer .grid figure { margin: 0px; position: relative; } #GZcustompagecontainer .grid figure img { max-width: 101%; display: block; position: relative; } #GZcustompagecontainer .grid figcaption { position: absolute; bottom: -1px; left: 0; padding: 10px 130px 15px 20px; background-color: #3a6d9c; /*Hintergrundfarbe*/ color: #ffffff; /*Schriftfarbe*/ line-height: 1.1; } #GZcustompagecontainer .grid figcaption h3 { margin: 0; padding: 0; color: #fff; font-size: 20px !important; font-weight: 400; letter-spacing: -1px; } #GZcustompagecontainer .grid figcaption span { font-size: 11px; } #GZcustompagecontainer figure { overflow: hidden; } #GZcustompagecontainer figure img { -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } #GZcustompagecontainer figure:hover img, #GZcustompagecontainer figure.cs-hover img { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } #GZcustompagecontainer figcaption { max-height: 100px; width: 101%; top: auto; bottom: 0; opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; } #GZcustompagecontainer figure:hover figcaption, #GZcustompagecontainer figure.cs-hover figcaption { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s; } #GZcustompagecontainer figcaption a { position: absolute !important; bottom: 20px; right: 20px; } #GZcustompagecontainer figcaption .button { background-color: #fff !important; color: #151515 !important; font-weight: 400; box-shadow: none; background-image: none; font-size: 13px; line-height: 1; text-shadow: none !important; padding: 7px 12px; border-radius: 2px; border: none !important; transition: all 0.15s; } #GZcustompagecontainer figcaption .button::before { display: none; } #GZcustompagecontainer figcaption .button:hover { opacity: .75; } /*---------- Animated Mouse Symbol -----------*/ .mouse_scroll { display: block; margin: 0 auto; width: 24px; height: 100px; } .m_scroll_arrows { display: block; width: 5px; height: 5px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-right: 2px solid white; border-bottom: 2px solid white; margin: 0 0 1px 6px; width: 12px; height: 12px; } .herobg + .mouse_scroll { margin-top: -100px; } .one { margin-top: 1px; } .one, .two, .tree { -ms-animation: mouse-scroll 1s infinite; -webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite; } .one { -ms-animation-delay: .1s; -webkit-animation-delay: .1s; -moz-animation-delay: .1s; -webkit-animation-direction: alternate; } .two { -ms-animation-delay: .2s; -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -webkit-animation-direction: alternate; margin-top: -6px; } .tree { -ms-animation-delay: .3s; -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -webkit-animation-direction: alternate; margin-top: -6px; } .mouse { height: 42px; width: 24px; border-radius: 14px; transform: none; border: 2px solid white; top: 170px; } .wheel { height: 5px; width: 2px; display: block; margin: 5px auto; position: relative; height: 8px; width: 2px; border: 1px solid #fff; } .wheel { -ms-animation: mouse-wheel 0.6s linear infinite; -webkit-animation: mouse-wheel 0.6s linear infinite; -moz-animation: mouse-wheel 0.6s linear infinite; } @-webkit-keyframes mouse-wheel { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); } } @-moz-keyframes mouse-wheel { 0% { top: 1px; } 25% { top: 2px; } 50% { top: 3px;} 75% { top: 2px;} 100% { top: 1px;} } @-webkit-keyframes mouse-scroll { 0% { opacity: 0;} 50% { opacity: .5;} 100% { opacity: 1;} } @-moz-keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } @-o-keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } @keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } @-ms-keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } @media (max-width: 576px) { #GZcustompagecontainer .row { display: block; } #GZcustompagecontainer .picturebox .col-md-8, #GZcustompagecontainer .picturebox .col-md-8.right { padding: 0px; } #GZcustompagecontainer .picturebox .col-md-4 img { margin-top: 10px; } #GZcustompagecontainer .announcebox .col-md-3 { flex: 0 0 100%; max-width: 100%; } #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } #GZcustompagecontainer .row.section.counterbox .col-md-3 { flex: 0 0 100%; max-width: 100%; border: none; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .announcebox .col-md-3 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content:not(:last-child) #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .row.section.counterbox .col-md-3 { flex: 0 0 100%; max-width: 100%; border: none; } #GZcustompagecontainer h2.title { font-size: 50px; line-height: 55px; letter-spacing: -2px; } #GZcustompagecontainer h3.title { font-size: 40px; letter-spacing: -2px; } #GZcustompagecontainer .herobg { padding: 20px; } #GZcustompagecontainer .herobg h1 { font-size: 50px !important; line-height: 1.1 !important; letter-spacing: -2px !important; margin-top: 20px !important; } #GZcustompagecontainer .herobg p.subtitle { font-size: 18px !important; line-height: 1.4 !important; } #GZcustompagecontainer .gaccordion p.subtitle { line-height: 1.3; margin-bottom: 5px; margin-top: 10px; } #GZcustompagecontainer .picturebox .col-md-8 { padding: 20px 0px; } } @media (max-width: 768px) { #GZcustompagecontainer .row { display: block; } #GZcustompagecontainer .picturebox .col-md-8, #GZcustompagecontainer .picturebox .col-md-8.right { padding: 0px; } #GZcustompagecontainer .picturebox .col-md-4 img { margin-top: 10px; } #GZcustompagecontainer .announcebox .col-md-3 { flex: 0 0 100%; max-width: 100%; } #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } #GZcustompagecontainer .row.section.counterbox .col-md-3 { flex: 0 0 100%; max-width: 100%; border: none; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .announcebox .col-md-3 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content:not(:last-child) #GZcustompagecontainer .row.section.circlebox .col-md-4 { flex: 0 0 100%; max-width: 100%; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .row.section.counterbox .col-md-3 { flex: 0 0 100%; max-width: 100%; border: none; } .sidebar + .content.sidebarRightCollapsed:not(:last-child) #GZcustompagecontainer .row.section.counterbox .col-md-3 { flex: 0 0 100%; max-width: 100%; border: none; } #GZcustompagecontainer .col-md-4 { padding: 20px 0px; } #GZcustompagecontainer .row.section.counterbox .col-md-3 { text-align: center; border-right: none; padding: 40px 40px; width: 100%; flex: 0 0 100%; max-width: 100%; } #GZcustompagecontainer .row.section.counterbox .col-md-3 .fa { font-size: 140px; } #GZcustompagecontainer .counter-value.count-title { font-size: 50px; } #GZcustompagecontainer .count-text { font-size: 22px; } #GZcustompagecontainer .col-md-4:nth-child(2) { padding-right: 0px; padding-left: 0px; } #GZcustompagecontainer .grid figcaption h3 { font-size: 18px; } #GZcustompagecontainer .grid li { flex: 0 0 100%; max-width: 100%; } #GZcustompagecontainer .picturebox .col-md-4 { width: 100%; flex: 0 0 100%; max-width: 100%; height: 300px; } #GZcustompagecontainer .picturebox .col-md-4 img { width: 100%; height: 300px; } #GZcustompagecontainer .picturebox .col-md-8 { padding: 20px 0px; flex: 100%; max-width: 100%; } #GZcustompagecontainer .sheetSlider { padding-bottom: 55%; } .sheetSlider input:nth-child(1):checked~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(2):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(3):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(4):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(5):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(6):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(7):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(8):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(9)::before, .sheetSlider input:nth-child(9):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(10)::before, .sheetSlider input:nth-child(10):checked:last-of-type~.sh__arrows label:nth-child(1)::before { content: "\f054"; font-family: FontAwesome; font-weight: normal !important; display: inline-block; font-size: 30px; line-height: 56px; padding-left: 18px; } .sheetSlider input:nth-child(1):checked~input:nth-child(2):last-of-type~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(3):last-of-type~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(4):last-of-type~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(5):last-of-type~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(6):last-of-type~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(7):last-of-type~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(8):last-of-type~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(9):last-of-type~.sh__arrows label:nth-child(9)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(10):last-of-type~.sh__arrows label:nth-child(10)::before, .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(10):checked~.sh__arrows label:nth-child(9)::before { content: "\f053"; font-family: FontAwesome; font-weight: normal !important; display: inline-block; font-size: 30px; line-height: 56px; padding-left: 12px; } #GZcustompagecontainer .sh-control { bottom: 60px; } #GZcustompagecontainer .sh__meta { left: 15px; top: 15px; } #GZcustompagecontainer .sh__meta h4 { font-size: 22px; letter-spacing: -1px; } #GZcustompagecontainer .sh__meta span { font-size: 15px; } #GZcustompagecontainer .announcebox { text-align: center; } #GZcustompagecontainer .announcebox .col-md-3 .fa { text-align: center; font-size: 100px; line-height: 1.2; } } </style> <!-----------------------------------------------------------------------------------> <!-- Script Area --------------------------------------------------------------------> <!-----------------------------------------------------------------------------------> <!-- Accordion Function --> <script data-relocate="true"> var acc = document.getElementsByClassName("gaccordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script> <!-- Counter Animation --> <script data-relocate="true"> var a = 0; $(window).scroll(function() { var oTop = $('#counter').offset().top - window.innerHeight; if (a == 0 && $(window).scrollTop() > oTop) { $('.counter-value').each(function() { var $this = $(this), countTo = $this.attr('data-count'); $({ countNum: $this.text() }).animate({ countNum: countTo }, { duration: 3000, easing: 'swing', step: function() { $this.text(Math.floor(this.countNum)); }, complete: function() { $this.text(this.countNum); //alert('finished'); } }); }); a = 1; } }); </script> <!-- Image Slider Function --> <script data-relocate="true"> /*! => Sheet Slider v2.2.0 => Copyright: 2018 zkreations => Licensed under MIT | github.com/zkreations/SheetSlider/blob/master/LICENSE */ var sheetSlider = (function(){ var animateDelay = 4000, autoplayHoverPause = false, auto, slides = document.querySelectorAll(".sh-auto input"), sliderContent = document.querySelector(".sh-auto .sh__content"), sliderButtons = document.querySelectorAll(".sh-auto .sh__btns label"), sliderArrows = document.querySelectorAll(".sh-auto .sh__arrows label"), sliderControl = document.querySelector(".sh-control"), sliderStoped = false; if (autoplayHoverPause) { sliderContent.addEventListener("mouseover", pauseSlider); sliderContent.addEventListener("mouseout", playSlider); } if(sliderControl) sliderControl.addEventListener("click", playPauseButton); function setInput(){ auto = setInterval(autoSlides, animateDelay); } function autoSlides() { for (var i = 0; i < slides.length; i++) if (slides[i].checked) { if(i === slides.length - 1) slides[0].checked = true; else slides[i + 1].checked = true; break; } } function pauseSlider(){ clearInterval(auto); } function playSlider(){ if(!sliderStoped) setInput(); } function playPauseButton(){ sliderStoped = !sliderStoped; pauseSlider(); sliderControl.classList.add('is-active'); if(!sliderStoped){ autoSlides(); playSlider(); sliderControl.classList.remove('is-active'); } } for (var i = 0; i < slides.length; i++) { if (sliderButtons.length){ // Pausar si los botones reciben un clic sliderButtons[i].addEventListener("click", function() { pauseSlider(); playSlider(); }); } if (sliderArrows.length){ // Pausar si las flechas reciben un clic sliderArrows[i].addEventListener("click", function() { pauseSlider(); playSlider(); }); } } window.addEventListener("load",function(){ setInput(); }); })(); </script> <!-- Scrollpoint Anchor Function --> <script data-relocate="true"> $(document).ready(function() { // navigation click actions $('.nav-link').on('click', function(event){ event.preventDefault(); var sectionID = $(this).attr("data-id"); scrollToID('#' + sectionID, 750); }); // scroll to top action $('.scroll-top').on('click', function(event) { event.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); // mobile nav toggle $('#nav-toggle').on('click', function (event) { event.preventDefault(); $('#main-nav').toggleClass("open"); }); }); // scroll function function scrollToID(id, speed){ var offSet = 50; var targetOffset = $(id).offset().top - offSet; var mainNav = $('#main-nav'); $('html,body').animate({scrollTop:targetOffset}, speed); if (mainNav.hasClass("open")) { mainNav.css("height", "1px").removeClass("in").addClass("collapse"); mainNav.removeClass("open"); } } if (typeof console === "undefined") { console = { log: function() { } }; } </script> 4



• Wählen sie auf der unter dem Registernamen "Boxen" angezeigten Seite aus welche Boxen auf der Startseite angezeigt werden sollen.

  5



• Wählen sie auf der unter dem Registernamen "Zugangsbeschränkung" angezeigten Seite evtl. noch die Gruppenberechtigungen aus und speichern alles ("Absenden"-Button).

  6



Wenn alles soweit richtig nach dieser Anleitung gemacht wurde, so sollte die HTML Startseite jetzt sichtbar sein und funktionieren - evtl. sollte noch einmal die Taste F5 zum aktualisieren der Anzeige im Browser gedrückt werden.

Diverse Hinweise bezüglich der Anpassung finden sie in der Hinweisbox der Startseite ganz oben (diese Box sollte im finalen Betrieb vorher von ihnen entfernt werden).

Achtung: Sichern sie vor Anpassungen vorher den Original Code um bei Problemen alles wieder herstellen zu können (z. Bspl. als Textdatei)!

Folgender Codeblock stellt immer ein Sliderinhalt dar (max. 10 Stück zulässig):

Hier kann nun die Bildquelle, Verlinkungen und der Textinhalt angepasst werden.

WICHTIG: Alle verwendeten Bilder müssen gleich groß sein!

Im Demoslider sind bereits diverse Beispiele eingearbeitet mit einfachen Text, Links im Text, verlinktes Bild mit Text usw., daraus kann man selber seinen eigenen Sliderinhalt anfertigen.

Sollen Bilder direkt vom eigenen Server genutzt werden, so erstellen sie einen Ordner mit Namen "sliderimages" in den Hauptpfad ihrer WSC5 / WSC 3 Server-Installation. In diesem Ordner müssen später zwingend die zu verwendeten Bilder gelagert sein um diese nutzen zu können. Alle Bilder sollten die selbe Größe (min. 2200px x 500px) sowie Dateiart haben ( z.Beispiel .jpeg-Bilder), da es sonst zu fehlerhaften Darstellungen kommen kann.

Die hier zu verwendeten Bilderlinks sollten nun so aussehen:

<img src="{@$__wcf->getPath()}sliderimages/NAME DES BILDES.jpg" alt=""/>