Menu



CONFEDERAÇÃO BRASILEIRA DE VOLEIBOL

A Confederação Brasileira de Voleibol representa a entidade máxima do voleibol no país.

Website Security Test

Frontpage can contain big header image if you add in the template settings (on the "Features" tab the imageBg page suffix.

Header form

Header form is based on the following code:

<h1>Start 30-Day free trial today. Set up in instant</h1>
<h2>Powerful landing page theme for running serious business</h2>
<form class="gk-form">
<div><input type="email" placeholder="Email address ..." /> <input type="submit" value="Get Started today!" /></div>
</form>
<p><a class="gk-video-link modal" href="http://www.youtube.com/embed/vb2eObvmvdI" rel="{handler: 'iframe', size: {x: 560, y: 315}}">Watch the introduction</a></p>

As you can see it uses h1 and h2 elements for creating headers, then the form is wrapped in the form element with gk-form class. The input elements are automatically styled inside the form. Additionally under the form there is the link with classes gk-video-link and modal - first class is responsible for the styling, second one is responsible for the popup - it uses the Joomla! built-in popup mechanism.

In every module with centered suffix you can place a paragraph with gkCentered class.

Icons

Icons placed on the frontpage uses the following structure:

<div class="gkIcons">
<div>
<div class="gkIconArea">
<a href="#" class="gkCrop">Creative</a>
</div>
<h2>Creative</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget elit eu velit vehicula feugiat. </p>
</div>

<div>
<div class="gkIconArea">
<a href="#" class="gkRocket">Rocket</a>
</div>
<h2>Powerful Control</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget elit eu velit vehicula feugiat. </p>
</div>

<div>
<div class="gkIconArea">
<a href="#" class="gkMobile">Responsive</a>
</div>
<h2>Responsive Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget elit eu velit vehicula feugiat. </p>
</div>
</div>

Every column is placed in the div container which contains a container with class gkIconArea with link using one of these classes: gkCrop, gkRocket or gkMobile.

Under the icon area you can place the h2 element with title and paragraph with description

Sliding notebook

To create the two columns block with the sliding image you should use the following structure:

<div class="gkHorizontalSlide">
<div class="gkHorizontalSlideLeftColumn">
<h2>Joomla! and WordPress blog theme
inspired by Metro Windows 8 UI</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget elit eu velit vehicula feugiat. Integer viverra metus vitae lectus dictum eleifend. Lorem ipsum dolor sit amet. Donec viverra lobortis feugiat. Sed id odio ante.</p>
<p>Duis bibendum metus eu urna placerat mattis! Duis bibendum tempor massa at tristique. Integer viverr metus vitae lectus dictum eleifend amet.</p>
<p><a href="#" class="button">View Details</a></p>
</div>
<div class="gkHorizontalSlideRightColumn">
<img src="/templates/gk_simplicity/images/demo/demo_notebook.png" alt="Notebook" />
</div>
</div>

The most important part are the containers with classes: gkHorizontalSlideLeftColumn and gkHorizontalSlideRightColumn - in the second container there should be placed an image which will slide on scroll.

Sliding tablet

The sliding tablet effect is created using the following structure:

<div class="gkTextBlock">
<h2>We build responsive,<br />mobile-friendly website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque faucibus risus non iaculis. Fusce a augue ante, pellentesque pretium erat. Fusce in turpis in velit tempor pretium. Integer a leo libero.</p>
</div>
<img src="/templates/gk_simplicity/images/demo/manufacturers.png" alt="Manufacturers" />

<img src="/templates/gk_simplicity/images/demo/tablet_image.png" class="gkImageBlock" alt="Image block" />

The sliding image is placed in the gkImageBlock wrapper. The gkTextBlock class adds necessary top spacing for the text block.

Testimonials

The testimonials are created using the following structure:

<div class="gkTestimonials">
<div>
<figure>
<img src="/templates/gk_simplicity/images/demo/avatar-1.png" alt="Robert Gavick" />
<figcaption><q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque faucibus risus non iaculis. Fusce a augue ante, pellentesque.</q></figcaption>
</figure>
</div>

<div>
<figure>
<img src="/templates/gk_simplicity/images/demo/avatar-2.png" alt="Paulina Nowakowska" />
<figcaption><q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque faucibus risus non iaculis. Fusce a augue ante, pellentesque.</q></figcaption>
</figure>
</div>

<div>
<figure>
<img src="/templates/gk_simplicity/images/demo/avatar-3.png" alt="Tomasz Dziuda" />
<figcaption><q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque faucibus risus non iaculis. Fusce a augue ante, pellentesque.</q></figcaption>
</figure>
</div>
</div>

The testimonial content was wrapped up into the figure element - the image is used to create an avatar and the figcaption with the blockquote element is used to create the testimonial text.

Button area

The last custom HTML element from the frontpage uses the following structure:

<div class="gkButtonArea">
<h3>The 30 day free trial includes all features.<small>Your 30-day money back guarantee starts after your 30-day free trial.</small></h3>
<a href="#">Get Started</a>
</div>

Every link placed in the gkButtonArea element creates a big button floated to right.

CRIAÇÃO DE SITES NO RIO DE JANEIRO RJ

Criação de sites personalizados. Desenvolvimento de sites sob medida. Criação de Sites de alto nível para pessoas como você

Criatividade

Nossos projetos são únicos. Procuramos nos superar a cada site, a cada campanha. Criatividade é tudo.

Resultado

Sabemos exatamente o que, e como fazer para que você tenha resultados.
Deixe com a gente.

Funcional

Essencial é o que tudo seja acessível por qualquer pessoa, em qualquer aparelho. Criação de Sites RJ é com a RioMarca.

Desenvolvimento de sites
que funcionam em Telefones e Tablets

Aqui na RioMarca partimos do princípio que o site tem que ser acessível em qualquer dispositivo, seja ele Smartphone, um Tablet ou Computador. Com isso conseguimos otimizar o resultado e deixar seus clientes mais felizes.

Desenvolvimento de Sites Criação de Sites RJ é com a RioMarca

Transformamos idéias em realidade

Nossa experiencia e expertise nos permite desenvolver todos os tipos de projetos web.

ImaginaSamba

O site do grupo ImaginaSamba foi desenvolvido com a nova tendência mundial para web, o layout de uma só página. Utilizamos as mais modernas técnicas de programação aliadas a um design ultra-moderno, explícito e único, desenvolvido exclusivamente para eles.

Veja a seguir como ficou essa superprodução RioMarca:

Veja o site

Site mc Sapão

Não acha melhor conversarmos pessoalmente?Podemos marcar uma reunião para explicar como funciona o nosso trabalho

Agendar