Info-Kreis

Mit einem Info Kreis kannst Du Informationen auf den Punkt darstellen und visualisieren. Der Info-Kreis gliedert sich in einen innen liegenden Inhaltsbereich und in eine außen liegende Umlaufbahn. In die Umlaufbahn lassen sich Icons oder Bilder mit und ohne Hintergrund platzieren und mit Informationen belegen. Die Umlaufbahn kann mit einer durchgehenden Linie oder mit gepunkteten und gestrichelten Linien in unterschiedlichen Größen und Farben gestaltet werden. Beim Scrollen über ein Icon der Umlaufbahn, erscheint im innen liegenden Inhaltsbereich die dazu hinterlegte Information. 

Drinks

Beispieltext zu Drinks

Musik

Beispieltext zu Musik.

Musik

Beispieltext zu Musik.

Liebe

Beispieltext zu Liebe.

Stern

Beispieltext zu Stern.

Play

Beispieltext zu Play.

Info

Inhaltsbereich: transparent

Bilder / Icons: umlaufend und ohne Hintergrundfarbe

Animation: nein

Verbindungslinie Inhaltsbereich: durchgehend, schwarz, 1px

Verbindungslinie Außenbereich: durchgehend, schwarz, 1px.

Drinks

Beispieltext zu Drinks

Musik

Beispieltext zu Musik

Liebe

Beispieltext zu Liebe

Stern

Beispieltext zu Stern

Play

Beispieltext zu Play

Info

Inhaltsbereich: schwarzer Hintergrund mit weißer Schrift

Bilder / Icons: umlaufend und mit schwarzer Hintergrundfarbe und bunten Icons

Animation: ein- und auszoomen

Verbindungslinie Inhaltsbereich: durchgehend, rot, 3px

Verbindungslinie Außenbereich: gepunktet, rot, 3px.

Drinks

Musik

Liebe

Stern

Play

Info

Inhaltsbereich: grau mit Linkbuttons

Bilder / Icons: umlaufend mit grauer Hintergrundfarbe und bunten Icons

Animation: Autoplay

Verbindungslinie Inhaltsbereich: durchgehend, schwarz, 3px

Verbindungslinie Außenbereich: gestrichelt, schwarz, 5px.

Intelligentes Webdesign

Benutzerfreundlich

Atemberaubende Grafiken

Fairer Preis

Freundlicher Support

Info

Inhaltsbereich: transparent mit schwarzem Text

Bilder / Icons: umlaufend mit grauer Hintergrundfarbe und weißen Icons

Animation: Ein- & Auszoomen

Verbindungslinie Inhaltsbereich: durchgehend, grau, 2px

Verbindungslinie Außenbereich: gespunktet, grau, 2px.

Benutzerfreundlich

Fair

Freundlich

Kompetent

Info

Inhaltsbereich: transparent mit Texthighlights

Bilder / Icons: nur im oberen Bereich mit schwarzer Hintergrundfarbe und weißen Icons

Animation: Zoom In mit Seitenladeanimation elastic

Verbindungslinie Inhaltsbereich: durchgehend, schwarz, 2px

Verbindungslinie Außenbereich: ohne