Additional typography elements

This article describes additional elements used for creating a demo content for the Quark template.

Product description

It is a Custom HTML module set in the mainbody module position

<div class="gk-desc"> 
     <img src="/images/demo/product_bg.jpg" alt="" data-sr="enter bottom and scale up 50% over .8s" />
     <h2>Duis scelerisque consequat magna eget euismod.<br />
          Sed vel odio nunc nulla facilisi</h2>
     <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit. Ut varius purus lectus, a pharetra mi blandit at. Integer ante leo, iaculis ut odio sit amet, dignissim pretium quam. Ut ac diam egestas, bibendum ex et, pharetra tellus. Proin sagittis est sit amet ipsum aliquam, non dapibus sapien congue. Donec lobortis sed lacus at consectetur. Ut aliquet sapien eget dolor sollicitudin interdum. Duis scelerisque consequat magna eget euismod. Sed vel odio nunc. Nulla facilisi. Aenean a tincidunt leo. Praesent dapibus nibh id mauris sollicitudin, ut auctor lacus interdum. Phasellus volutpat magna a purus elementum, eget gravida tellus feugiat. In id lorem sapien.
     </p>
     <a href="#" class="btn-border">Learn more</a> 
</div>

Video block

Above block is a Custom HTML module with a parallax background (uses suffix: very-big-spaces parallax-bg), based on the following code:

<a href="#" class="gk-video-link gk-add-rotate-animation" data-url="//player.vimeo.com/video/88558878?color=ffffff&title=0&byline=0&portrait=0" data-width="1920" data-height="1080"  data-sr="enter bottom and move 50px">Product landing page theme <i class="fa fa-play"></i> Play</a>

Testimonials

The testimonials block uses the following HTML structure (the module should have the testimonial suffix):

<div class="gk-testimonials" data-sr="scale up 50%" data-amount="3">
<div>
<div>
<blockquote>
<img src="/images/demo/testimonials_avatar.png" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis dictum elit eu placerat. Nullam vel pellentesque tortor, nec ornare enim. Praesent vehicula dapibus diam non porttitor. Etiam vel elit ante. Phasellus eleifend sollicitudin odio a varius. Donec sit amet lacinia velit, ut dignissim diam. Aliquam erat volutpat.</p>
<strong>Garland Noah</strong>
</blockquote>
<blockquote>
<img src="/images/demo/testimonials_avatar.png" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis dictum elit eu placerat. Nullam vel pellentesque tortor, nec ornare enim. Praesent vehicula dapibus diam non porttitor. Etiam vel elit ante. Phasellus eleifend sollicitudin odio a varius. Donec sit amet lacinia velit, ut dignissim diam. Aliquam erat volutpat.</p>
<strong>Garland Noah</strong>
</blockquote>
<blockquote>
<img src="/images/demo/testimonials_avatar.png" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis dictum elit eu placerat. Nullam vel pellentesque tortor, nec ornare enim. Praesent vehicula dapibus diam non porttitor. Etiam vel elit ante. Phasellus eleifend sollicitudin odio a varius. Donec sit amet lacinia velit, ut dignissim diam. Aliquam erat volutpat.</p>
<strong>Garland Noah</strong>
</blockquote>
</div>
</div>
</div>

Shipping block

The shipping block uses the gray-bg suffix and the special CSS class for the gk-cols structure:

<div class="gk-cols vertical-center" data-cols="2">
<div class="gk-text-center" data-sr="enter left and move 200px" >
<span class="big-text">Free Shipping on Orders over $25</span>
<p>Buy everyday free shipping products with free shipping<br />on orders over $35, low prices & product reviews</p>
</div>
<div class="gk-text-center" data-sr="enter right and move 200px" >
<img src="/images/demo/shipping_img.jpg" alt="" />
</div>
</div>

Thanks to the vertical-center CSS class the text and image are vertically centered inside the columns.

Newsletter form

The newsletter form uses the small-spaces newsletter dark-bg module suffixes and the following HTML code:

<form action="#">
<small>Stay up-to-date with latest product</small>
<input type="submit" value="Subscribe" class="dark btn-border" />
<input type="email" placeholder="Enter your e-mail..." name="email" required="required" />
</form>

The above newsletter form is only a HTML code - you need to connect it by yourself with your newsletter software

Contact information

The last module on the frontpage uses the small-spaces small-text suffixes and the gk-cols structure:

<div class="gk-cols" data-cols="3">
<div>email: This email address is being protected from spambots. You need JavaScript enabled to view it.</div>
<div class="gk-text-center">tel. 123.456.7890<br />fax: 098.654,3211</div>
<div class="gk-text-right">Quaking Row, Kensington,<br />IN, 47699-9366, US</div>
</div>

Every text in this module has other position thanks to the gk-text-left, gk-text-center and gk-text-right CSS classes.

Last modification: Wed 28 Jan 2015

HR Perspectief, dat ben ik!

Mijn naam is Esther Haage. Na een carrière van bijna 20 jaar binnen het Human Resources-management (HR) waarin ik kennis heb mogen maken met verschillende soorten ondernemingen, heb ik in 2015 de overstap gemaakt naar het zelfstandig adviseren. Onder de naam ‘ HR Perspectief’ ben ik gestart met het projectmatig ondersteunen van organisaties en hun HR-afdelingen. Denk hierbij aan een bedrijfsovername, een reorganisatie of een professionaliseringsslag van een HR-afdeling.

Ik woon in Amersfoort en ben moeder van een zoon en dochter. In mijn vrije tijd sport ik graag en kan ik enorm genieten van lekker eten en drinken. Ik ben direct, open, pragmatisch en ik hou ervan om de zaken op verschillende manieren te bekijken. De naam HR Perspectief is mij dan ook op het lijf geschreven.

Missie en visie

Wat is strategie wanneer het gaat om het succesvol maken van een bedrijf? Strategie is een veelomvattend woord. Maar het krijgt pas betekenis – dat wil zeggen, het gaat pas werken - wanneer de mensen binnen een organisatie ook meebewegen  om de strategie tot uitvoer te brengen.  Ik noem dit Flow. Verbinding, openheid en optimisme zijn de sleutels tot succes binnen teams en organisatie. Succes voor de mensen staat daarmee gelijk aan succes voor organisaties.  

Door de mensen binnen een organisatie in hun kracht te zetten, en te werken vanuit wederzijds respect, treedt verbinding op. Zowel tussen verschillende afdelingen als tussen (functie)lagen.  Er ontstaat flow. Aansturing  wordt minder belangrijk als mensen hetzelfde doel voor ogen hebben. Zo wordt een klimaat van ‘samen’ gecreëerd waarbij ‘wij’  boven ‘ ik’  komt te staan. 

Hoe creëer ik flow

Vanuit het centraal gelegen Amersfoort (of op locatie) ondersteun ik organisaties en teams op het gebied van Human Resources. Ik zoek naar de beweging: hoe creëer ik flow, hoe zorg ik ervoor dat  de mensen in beweging komen? Tijdens het project breng ik de ‘harde’ technische en ‘zachte’ menselijke kant van HR samen.  

Ik schakel makkelijk tussen operationeel, tactisch en strategisch niveau. Mijn vermogen om betrokken medewerkers in beweging te zetten en mensen te enthousiasmeren  gebruik ik om veranderingen in gang te zetten.  Belemmeringen zie ik als uitdagingen en mijn creativiteit zorgt ervoor dat een oplossing altijd voorhanden is.  

Ik stel vragen!  

  • Welke doelen streef je na?
  • Wat wil je bereiken?
  • Op welke manier speelt HR hier een rol bij?
  • Waarin ligt de gezamenlijke kracht?
  • Welke weg gaan we kiezen?
  • Op welke niveau kan ik je ontzorgen?

Waarvoor kan je bij mij terecht?

Ben je opzoek naar een verandertraject voor jouw afdeling HR? Optimalisatie van de processen of coaching van individuele medewerkers, HR Perspectief biedt perspectief! 

HR verandertrajecten | Organisatie ontwikkeling | Positioneren en vormgeven HR | Individuele coaching
×
×

Log in