Elements

Accordion

[gr-hr type= » » width= »5″ align= »center »]

 

[gr-accordions active= »0″][gr-accordion title= »First Item »]Lorem ipsum dolor sit amet consectetuer velit pretium euismod ipsum enim. Mi cursus at a mollis senectus id arcu gravida quis urna. Sed et felis id tempus Morbi mauris tincidunt enim In mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nulla nibh, commodo vel vehicula quis, semper id nunc. Phasellus nec leo convallis, pharetra nulla quis, pellentesque lectus. Morbi id mi lectus. Sed id libero vitae ligula mattis sagittis non eget nisi.[/gr-accordion][gr-accordion title= »Second Item »]Praesent scelerisque ipsum erat, et sagittis nulla placerat in. Vivamus et ligula non nibh bibendum porta pharetra vel eros. Morbi eleifend placerat lobortis. Integer mollis consectetur enim, eu rhoncus velit gravida non. Nam tincidunt eleifend leo, in convallis magna faucibus vitae. Ut rutrum justo elit, id lobortis tortor mollis vitae. Curabitur venenatis libero sit amet ipsum cursus venenatis. Nulla quis lacus molestie, egestas nibh nec, elementum ante.[/gr-accordion][gr-accordion title= »Third Item »]Vestibulum scelerisque odio nibh, sed fringilla orci suscipit ac. Etiam semper urna nulla, ut aliquet dolor venenatis eget. Fusce hendrerit tortor et metus dapibus, sit amet pretium lacus adipiscing. Aliquam egestas ipsum sed ligula egestas semper. Suspendisse aliquet porta mi, sed placerat urna faucibus sit amet. Morbi bibendum rhoncus lobortis. Proin consectetur a sapien et semper. Donec quis neque sodales, faucibus turpis eu, ullamcorper leo. Donec suscipit quam at ornare congue. Quisque feugiat lectus id dignissim elementum. Suspendisse semper elementum augue in congue. Curabitur suscipit ornare mi, convallis pellentesque odio commodo sed. Nam varius eros nec magna ullamcorper ornare.[/gr-accordion][/gr-accordions]

[gr-gap h= »40″]

[gr-section fullwidth height= »20″ paddingtop= » » paddingright= » » paddingbottom= » » paddingleft= » »][gr-section-background color= »#f0f0f0″][/gr-section-background][gr-section-content] [/gr-section-content][/gr-section]

[gr-gap h= »80″]

[gr-columns][gr-column type= »1/3″]

Horizontal Tabs

[gr-hr type= » » width= »10″ align= »left »]

[/gr-column][gr-column type= »2/3″][gr-tabs pos= »top » active= »0″][gr-tab title= »First Item » icon= »fa fa-heart »]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lectus sapien. Fusce et gravida tellus. Fusce vel commodo est, a vulputate dui. Integer tortor augue, pretium eu euismod at, euismod ac ligula. Sed eleifend nisi nulla, ac convallis quam consequat ac. Donec a leo sem. Praesent pellentesque est et purus viverra facilisis. Mauris hendrerit orci vel nisi feugiat euismod. Integer sit amet tortor nec enim pretium ultrices ac quis ipsum.[/gr-tab][gr-tab title= »Second Item » icon= »fa fa-cloud »]Morbi nisl ipsum, ornare in leo id, pellentesque dictum sapien. Suspendisse convallis lorem diam, a lobortis odio ultricies id. Proin cursus massa ut dui rutrum, vel faucibus nibh suscipit. Nunc consequat purus at tincidunt sagittis. Nunc nec nisi ut turpis ultricies interdum id at dui. Nullam sed libero fermentum, ultricies nisi ac, molestie metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis id justo odio. Donec non massa laoreet, interdum massa pellentesque, semper erat. Sed porttitor, magna non placerat consequat, lorem magna vulputate metus, eget sodales quam enim nec massa. Integer adipiscing eu tellus id varius. Nunc ut ultrices diam. Aliquam ullamcorper nisl nec iaculis tempor. Aliquam sagittis dictum metus a congue. Nullam feugiat dictum massa eget dictum.[/gr-tab][gr-tab title= »Third Item » icon= »fa fa-comments »]Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis id justo odio. Donec non massa laoreet, interdum massa pellentesque, semper erat. Sed porttitor, magna non placerat consequat, lorem magna vulputate metus, eget sodales quam enim nec massa. Integer adipiscing eu tellus id varius. Nunc ut ultrices diam. Aliquam ullamcorper nisl nec iaculis tempor. Aliquam sagittis dictum metus a congue. Nullam feugiat dictum massa eget dictum.[/gr-tab][/gr-tabs][/gr-column][/gr-columns]

[gr-gap h= »10″]

[gr-columns][gr-column type= »1/3″]

Vertical tabs

[gr-hr type= » » width= »10″ align= »left »]

[/gr-column][gr-column type= »2/3″][gr-tabs position= »right » active= »1″][gr-tab title= »First Item »]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lectus sapien. Fusce et gravida tellus. Fusce vel commodo est, a vulputate dui. Integer tortor augue, pretium eu euismod at, euismod ac ligula. Sed eleifend nisi nulla, ac convallis quam consequat ac. Donec a leo sem. Praesent pellentesque est et purus viverra facilisis. Mauris hendrerit orci vel nisi feugiat euismod. Integer sit amet tortor nec enim pretium ultrices ac quis ipsum. Suspendisse egestas quis risus bibendum lobortis. Integer a faucibus neque. Morbi quis sem suscipit, consequat nunc malesuada, dictum leo. Integer non interdum nisl, ullamcorper pellentesque mi. Fusce tortor nisi, elementum at massa et, consectetur aliquam nulla.[/gr-tab][gr-tab title= »Second Item »]Morbi nisl ipsum, ornare in leo id, pellentesque dictum sapien. Suspendisse convallis lorem diam, a lobortis odio ultricies id. Proin cursus massa ut dui rutrum, vel faucibus nibh suscipit. Nunc consequat purus at tincidunt sagittis. Nunc nec nisi ut turpis ultricies interdum id at dui. Nullam sed libero fermentum, ultricies nisi ac, molestie metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis id justo odio. Donec non massa laoreet, interdum massa pellentesque, semper erat.[/gr-tab][gr-tab title= »Third Item »]Proin cursus massa ut dui rutrum, vel faucibus nibh suscipit. Nunc consequat purus at tincidunt sagittis. Nunc nec nisi ut turpis ultricies interdum id at dui. Nullam sed libero fermentum, ultricies nisi ac, molestie metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis id justo odio. Donec non massa laoreet, interdum massa pellentesque, semper erat. Sed porttitor, magna non placerat consequat, lorem magna vulputate metus, eget sodales quam enim nec massa. Integer adipiscing eu tellus id varius. Nunc ut ultrices diam. Aliquam ullamcorper nisl nec iaculis tempor. Aliquam sagittis dictum metus a congue. Nullam feugiat dictum massa eget dictum.[/gr-tab][/gr-tabs][/gr-column][/gr-columns]

[gr-gap h= »40″]

[gr-section fullwidth height= »20″ paddingtop= » » paddingright= » » paddingbottom= » » paddingleft= » »][gr-section-background color= »#f0f0f0″][/gr-section-background][gr-section-content] [/gr-section-content][/gr-section]

[gr-gap h= »40″]

Parallax Section

[gr-hr type= » » width= »5″ align= »center »]

 

[gr-section fullwidth paddingtop= »90″ paddingright= »0″ paddingbottom= »70″ paddingleft= »0″][gr-section-background image= »http://bicode.mobi/wp-content/uploads/2014/07/bg-03.jpg » parallax= »0.8″][/gr-section-background][gr-section-content container][gr-section-content]

Let’s work together

Hugo Brandt Corstius wrote under over sixty different pseudonyms, allonyms and aliases. He claimed each them to be a component of his character. In Vrij Nederland he used the pseudonym Piet Grijs and between 1979 and 1986 in de Volkskrant he used the pseudonym Stoker. His other pseudonyms include Battus (in NRC Handelsblad and Vrij Nederland), Raoul Chapkis, Victor Baarn, Dolf Cohen, Maaike Helder, Peter Malenkov and Talisman. The Battus name was reserved for writing on linguistics and language play, in columns, articles and books.

[/gr-section-content][/gr-section]

[gr-section fullwidth height= »20″ paddingtop= » » paddingright= » » paddingbottom= » » paddingleft= » »][gr-section-background color= »#f0f0f0″][/gr-section-background][gr-section-content] [/gr-section-content][/gr-section]

[gr-gap h= »80″]

[gr-columns][gr-column type= »1/3″]

Alerts

[gr-hr type= » » width= »10″ align= »left »]

[/gr-column][gr-column type= »2/3″]

[gr-alert type= »white »]Standard Message. Wrap any text for a basic warning alert message.[/gr-alert]

[gr-alert type= »yellow »]Warning! Best check yo self, you’re not looking too good.[/gr-alert]

[gr-alert type= »blue »]Heads up! This alert needs your attention, but it’s not super important.[/gr-alert]

[gr-alert type= »red »]Oh snap! Change a few things up and try submitting again.[/gr-alert]

[gr-alert type= »green »]Well done! You successfully read this important alert message.[/gr-alert]

[/gr-column][/gr-columns]

[gr-gap h= »40″]

[gr-section fullwidth height= »20″ paddingtop= » » paddingright= » » paddingbottom= » » paddingleft= » »][gr-section-background color= »#f0f0f0″][/gr-section-background][gr-section-content] [/gr-section-content][/gr-section]

[gr-gap h= »40″]

Carousel

[gr-hr type= » » width= »5″ align= »center »]

[gr-carousel type= »projects » ids= »49,48,47,46,44,43,40,39,37,35″ columns= »4″ mask grayscale hover= »1″]

[gr-gap h= »20″]

[gr-section fullwidth height= »20″ paddingtop= » » paddingright= » » paddingbottom= » » paddingleft= » »][gr-section-background color= »#f0f0f0″][/gr-section-background][gr-section-content] [/gr-section-content][/gr-section]

[gr-gap h= »80″]

[gr-columns][gr-column type= »1/4″]

Button colors

[gr-hr type= » » width= »10″ align= »left »]

[/gr-column][gr-column type= »1/4″]

[gr-button url= »# » color= »theme »]Nice button[/gr-button]

[gr-button url= »# » color= »violet »]Nice button[/gr-button]

[gr-button url= »# » color= »blue »]Nice button[/gr-button]

[gr-button url= »# » color= »white »]Nice button[/gr-button]

[/gr-column][gr-column type= »1/4″]

[gr-button url= »# » color= »orange »]Nice button[/gr-button]

[gr-button url= »# » color= »green »]Nice button[/gr-button]

[gr-button url= »# » color= »aqua »]Nice button[/gr-button]

[gr-button url= »# » color= »mediumgrey »]Nice button[/gr-button]

[/gr-column][gr-column type= »1/4″]

[gr-button url= »# » color= »seagreen »]Nice button[/gr-button]

[gr-button url= »# » color= »purple »]Nice button[/gr-button]

[gr-button url= »# » color= »red »]Nice button[/gr-button]

[gr-button url= »# » color= »darkgrey » ]Nice button[/gr-button]

[/gr-column][/gr-columns]

 

[gr-hr type= »dotted »]

 

[gr-columns][gr-column type= »1/4″]

Button sizes and icons

[gr-hr type= » » width= »10″ align= »left »]

[/gr-column][gr-column type= »1/4″]

[/gr-column][gr-column type= »1/4″]

[gr-button url= »# » size= »small » color= »simple »]Nice button[/gr-button]

[gr-button url= »# » color= »simple »]Nice button[/gr-button]

[gr-button url= »# » size= »large » color= »simple »]Nice button[/gr-button]

[/gr-column][gr-column type= »1/4″]

[gr-button url= »# » size= »small » color= »theme » icon= »fa fa-heart »]Nice button[/gr-button]

[gr-button url= »# » color= »theme » icon= »fa fa-heart »]Nice button[/gr-button]

[gr-button url= »# » size= »large » color= »theme » icon= »fa fa-heart »]Nice button[/gr-button]

[/gr-column][/gr-columns]

[gr-gap h= »40″]

[gr-section fullwidth height= »20″ paddingtop= » » paddingright= » » paddingbottom= » » paddingleft= » »][gr-section-background color= »#f0f0f0″][/gr-section-background][gr-section-content] [/gr-section-content][/gr-section]

[gr-gap h= »40″]

Slider

[gr-hr type= » » width= »5″ align= »center »]

 

[gr-slider ids= »638,652″]

[gr-gap h= »80″]

[gr-section fullwidth height= »20″ paddingtop= » » paddingright= » » paddingbottom= » » paddingleft= » »][gr-section-background color= »#f0f0f0″][/gr-section-background][gr-section-content] [/gr-section-content][/gr-section]

[gr-gap h= »80″]

[gr-columns][gr-column type= »1/3″]

Icon Boxes

[gr-hr type= » » width= »10″ align= »left »]

[/gr-column][gr-column type= »1/3″][gr-iconbox type= »1″ title= »Web Development » icon= »fa fa-code »]Mauris pretium, metus eget porta dictum, mauris ipsum imperdiet erat, aliquam rhoncus mauris justo vehicula tellus. Vestibulum purus libero, tincidunt hendrerit tincidunt.[/gr-iconbox][/gr-column][gr-column type= »1/3″][gr-iconbox type= »2″ title= »Branding & Identity » icon= »fa fa-heart-o »]Vestibulum purus libero, tincidunt hendrerit tincidunt id, fermentum nec quam. Donec non orci nisl, non venenatis magna. Suspendisse ullamcorper orci ut erat.[/gr-iconbox][/gr-column][/gr-columns]

[gr-gap h= »40″]

[gr-columns][gr-column type= »1/3″][/gr-column][gr-column type= »1/3″][gr-iconbox type= »3″ title= »Web Development » icon= »fa fa-code »]Mauris pretium, metus eget porta dictum, mauris ipsum imperdiet erat, aliquam rhoncus mauris justo vehicula tellus. Vestibulum purus libero, tincidunt hendrerit tincidunt.[/gr-iconbox][/gr-column][gr-column type= »1/3″][gr-iconbox type= »4″ title= »Branding & Identity » icon= »fa fa-heart-o »]Vestibulum purus libero, tincidunt hendrerit tincidunt id, fermentum nec quam. Donec non orci nisl, non venenatis magna. Suspendisse ullamcorper orci ut erat.[/gr-iconbox][/gr-column][/gr-columns]

[gr-gap h= »40″]