- Sobre
- Instalação
- Exemplo
Css
- Grid
- Imagens
- Tabelas
- Estilos
Componentes
- Cabeçalhos
- Botões
- Forms
- Cards
- Rodapé
Javascript
- Menu lateral
- Modais
- Slider
Slider básico
Para construir um slider, primeirio precisa criar um objeto com as classes row slider. Dentro deste objeto, crie os slides adicionando outro objeto com classe slide. Neste objeto, defina a background adicionando uma classe com cor ou uma imagem com a propriedade style inline. Se houver conteúdo além da imagem no slider, acrescente-os em um objeto com classe slide-body. Neste objeto você também deve orientar o alinhamento do conteúdo.
<div class="row slider">
<div class="slide" style="background:url('images/banner_japu.png');">
<div class="slide-body center-align">
<h4>Slide 1</h4>
<h6>Center aligned</h6>
<a href='' class='btn center'>Example</a>
</div>
</div>
<div class="slide fundo-azul">
<div class="slide-body left-align">
<h4>Slide 2 - Left aligned</h4>
</div>
</div>
<div class="slide fundo-vermelho">
<div class="slide-body right-align">
<h4>Slide 3 - Right aligned</h4>
</div>
</div>
</div>
Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus.