Carregando conteúdo requerido...
Carregando...
Menu de Opções Ligue-nos Filtre seu Cruzeiro

Guia de Estilos

| 01 Introdução

Oi amigo! Este Guia de Estilos serve para documentar a interface. Utilize o botão abaixo para ativar ou desativar a exibição de códigos auxiliarem em HTML, CSS e JavaScript. Bom projeto! :)

| 02 Paleta de Cores

 
 
 
  • Rosa PopUp
  • HEX #E8228F
 
 
 
  • Azul Petroleo
  • HEX #2D323B
 
 
 
  • Ciano
  • HEX #18A5CE
 
 
 
  • Carmim
  • HEX #DC1947
 
 
 
  • Turquesa
  • HEX #00CFB6
 
 
 
  • Cinza
  • HEX #DCDCDC

| 03 Tipografia

Titulo 1

  • <h1>
  • Fonte: Helvetica Neue
  • Tamanho: 3em / 32px
  • Peso: 400
  • Cor: #222

The quick brown fox jumps over the lazy dog.

Titulo 2

  • <h2>
  • Fonte: Helvetica Neue
  • Tamanho: 2.8em / 28px
  • Peso: 400
  • Cor: #222

The quick brown fox jumps over the lazy dog.

Titulo 3

  • <h3>
  • Fonte: Helvetica Neue
  • Tamanho: 2.6em / 26px
  • Peso: 400
  • Cor: #222

The quick brown fox jumps over the lazy dog.

Titulo 4

  • <h4>
  • Fonte: Helvetica Neue
  • Tamanho: 2.4em / 24px
  • Peso: 400
  • Cor: #222

The quick brown fox jumps over the lazy dog.

Titulo 5

  • <h5>
  • Fonte: Helvetica Neue
  • Tamanho: 2.4em / 24px
  • Peso: 400
  • Cor: #222
The quick brown fox jumps over the lazy dog.

Titulo 6

  • <h6>
  • Fonte: Helvetica Neue
  • Tamanho: 2em / 20px
  • Peso: 400
  • Cor: #222
The quick brown fox jumps over the lazy dog.

Parágrafo

  • <p>
  • Fonte: Helvetica Neue
  • Tamanho: 1.6em / 16px
  • Peso: 400
  • Cor: #222

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, dolor alias deleniti ex ipsam esse, culpa ipsa maiores est suscipit cumque commodi aliquid ea illo, cum eligendi. Adipisci ex itaque, voluptate. Veritatis nesciunt sed porro labore quibusdam libero sequi minima incidunt commodi rerum architecto vel eius odio, ipsum molestiae consequuntur.

Link

  • <a>
  • Cor: #E8228F

Exemplo de texto contendo um link.

Negrito

  • <b>
  • Peso: 700

Exemplo de texto contendo um elemento negrito.

Itálico

  • <i>

Exemplo de texto contendo um elemento itálico.

Destaque

  • <strong>

Exemplo de texto contendo um elemento destacado.

Ênfase

  • <em>

Exemplo de texto contendo um elemento com ênfase.

Sem ênfase

  • <small>
Exemplo de texto de importância secundária.

Marcação

  • <mark>

Exemplo de texto contendo um elemento marcado.

Código HTML

  • <code>

Exemplo de texto contendo um código HTML.

Citação

  • <q>

Exemplo de texto contendo uma citação alinhada.

Bloco de Citação

  • <blockquote>

Fairy tales are more than true: not because they tell us that dragons exist, but because they tell us that dragons can be beaten.

Neil GaimanCoraline

Endereço

  • <address>
Nome da Empresa
Rua Nome da Rua, 1000
Cidade, CEP
Tel: (11) 555-5555

| 04 Listas

Simples

  • <ul>
  • Não-ordenada
  • Sem marcadores
  • Item da Lista A
  • Item da Lista B
  • Item da Lista C
  • Item da Lista D
  • Item da Lista E

Padrão

  • <ul>
  • Não-ordenada
  • Com marcadores
  • Item da Lista A
  • Item da Lista B
  • Item da Lista C
  • Item da Lista D
  • Item da Lista E

Numérica

  • <ol>
  • Ordenada
  1. Item da Lista A
  2. Item da Lista B
  3. Item da Lista C
  4. Item da Lista D
  5. Item da Lista E

Definição

  • <dl>
  • Sem marcadores
Item da Lista A
Definição Lorem ipsum dolor sit amet.
Item da Lista B
Definição Lorem ipsum dolor sit amet.
Item da Lista C
Definição Lorem ipsum dolor sit amet.

| 05 Artigo

Título do Artigo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat placeat nulla cumque suscipit optio vero odio illo cupiditate velit asperiores distinctio, error commodi consectetur. Dolore quaerat numquam dolor consequuntur necessitatibus molestias voluptatibus officia perspiciatis accusantium. Quibusdam, sint cupiditate dolores enim reiciendis perferendis. Accusamus molestias deleniti ab voluptatum consequatur recusandae nisi.

Subtítulo do Artigo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat placeat nulla cumque suscipit optio vero odio illo cupiditate velit asperiores distinctio, error commodi consectetur. Dolore quaerat numquam dolor consequuntur necessitatibus molestias voluptatibus officia perspiciatis accusantium. Quibusdam, sint cupiditate dolores enim reiciendis perferendis. Accusamus molestias deleniti ab voluptatum consequatur recusandae nisi.

Subtítulo do Artigo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat placeat nulla cumque suscipit optio vero odio illo cupiditate velit asperiores distinctio, error commodi consectetur. Dolore quaerat numquam dolor consequuntur necessitatibus molestias voluptatibus officia perspiciatis accusantium. Quibusdam, sint cupiditate dolores enim reiciendis perferendis. Accusamus molestias

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
Subtítulo do Artigo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat placeat nulla cumque suscipit optio vero odio illo cupiditate velit asperiores distinctio, error commodi consectetur. Dolore quaerat numquam dolor consequuntur necessitatibus molestias voluptatibus officia perspiciatis accusantium. Quibusdam, sint cupiditate dolores enim reiciendis perferendis. Accusamus molestias

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ut, obcaecati iusto eligendi eum esse laudantium culpa beatae nisi possimus dignissimos, amet eveniet repellat necessitatibus, nihil. Officiis odio atque quo et, repudiandae beatae esse consectetur iste harum incidunt itaque repellendus! Eius consectetur, blanditiis voluptatibus, est soluta dicta illum repudiandae? Tempora?

Neil GaimanCoraline
Subtítulo do Artigo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat placeat nulla cumque suscipit optio vero odio illo cupiditate velit asperiores distinctio, error commodi consectetur. Dolore quaerat numquam dolor consequuntur necessitatibus molestias voluptatibus officia perspiciatis accusantium. Quibusdam, sint cupiditate dolores enim reiciendis perferendis. Accusamus molestias

| 06 Grid

1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
2 col
2 col
2 col
2 col
2 col
2 col
3 col
3 col
3 col
3 col
4 col
4 col
4 col
6 col
6 col
12 col

| 07 Icones

  • Favicon
  • Apple Touch Icon
  • Chrome Touch Icon
  • Windows 8 Tile

| 08 Botões

Padrão

  • <button>

3D

  • <button>

Fantasma

  • <button>

| 09 Formulários

Legenda

  • <legend>
Legenda do Formulário

Campo de texto

  • <input>
  • Type: text

Campo válido

  • <input>
  • Type: text

Campo invalido

  • <input>
  • Type: text

Nome

  • <input>
  • Type: text

Sugestões

  • <input>
  • Type: text
  • Datalist

URL

  • <input>
  • Type: url

Telefone

  • <input>
  • Type: tel

Email

  • <input>
  • Type: email

Busca

  • <input>
  • Type: search

Endereço

  • <input>
  • Type: text

Cidade:

  • <input>
  • Type: text

Estado:

  • <input>
  • Type: text

País:

  • <input>
  • Type: text

CEP:

  • <input>
  • Type: text

CPF:

  • <input>
  • Type: text

CNPJ:

  • <input>
  • Type: text

Campo Numérico

  • <input>
  • Type: number

Data

  • <input>
  • Sem fuso horário
  • Type: date

Data Local

  • <input>
  • Com fuso horário
  • Type: datetime-local

Horário

  • <input>
  • Sem fuso horário
  • Type: time

Semana

  • <input>
  • Sem fuso horário
  • Type: week

Mês

  • <input>
  • Sem fuso horário
  • Type: month

Caixa de texto

  • <textarea>

Lista de Seleção

  • <select>

Caixa de seleção

  • <input>
  • type: checkbox
Caixa de Seleção:

Botão de opção

  • <input>
  • type: radio
Caixa de Seleção:

Cor

  • <input>
  • Type: color

| 11 Breadcrumbs

Breadcrumbs

  • <nav>

| 12 Paginação

Paginação

| 13 Abas

Abas

Conteúdo da Aba 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur accusantium ullam dicta doloremque ab, aliquid et quas officiis molestiae deleniti!

Conteúdo da Aba 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum repudiandae numquam totam nemo saepe explicabo rerum ratione adipisci quod. Explicabo.

Conteúdo da Aba 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt numquam, sint corporis qui, quos veritatis laborum impedit quas accusamus! Voluptate!

Conteúdo da Aba 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, natus, corporis! Aliquid deserunt minus dolor eius possimus qui quibusdam laboriosam?

Conteúdo da Aba 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod totam ut labore reprehenderit assumenda quasi necessitatibus amet. Quasi, porro, corporis!

| 14 Tabelas

Tabela Padrão

  • <table>
# Titulo Coluna 1 Titulo Coluna 2 Titulo Coluna 3 Titulo Coluna 4 Titulo Coluna 5
1 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo
2 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo
3 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo
4 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo
5 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo

Zebrada

  • <table>
# Titulo Coluna 1 Titulo Coluna 2 Titulo Coluna 3 Titulo Coluna 4 Titulo Coluna 5
1 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo
2 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo
3 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo
4 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo
5 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo

Com bordas

  • <table>
# Titulo Coluna 1 Titulo Coluna 2 Titulo Coluna 3 Titulo Coluna 4 Titulo Coluna 5
1 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo
2 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo
3 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo
4 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo
5 Texto do Campo Texto do Campo Texto do Campo Texto do Campo Texto do Campo

| 15 Mensagens

Sucesso

Mensagem enviada com sucesso!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa.

Erro

Erro de comunicação

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa.

| 16 Slider

Slider

| 18 Rodapé

| 19 Outros

Tooltip

Tooltip Topo Tooltip Abaixo Tooltip Esquerda Tooltip Direita

| 20 Blocos

Acordeon

Descrição

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate

Descrição

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate

Descrição

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate

Descrição

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate

Descrição

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate

Observações sobre as idades e valores apresentados:
- Bebê corresponde a 0 e 1 ano de idade no dia do embarque no navio;
- Criança estará na faixa etária de 2 à 11 anos de idade no dia do embarque no navio; e,
- Adulto será qualquer passageiro com idade maior ou igual a 12 anos de idade no dia do embarque no navio.
- Os valores são totais, incluindo todas as taxas marítimas (taxas de serviço e portuárias) e valores da tarifa da cabine escolhida para a quantidade e perfil (idades) dos passageiros escolhidos, e excluindo atividades pessoais e opcionais (como restaurantes especializados, bebidas não disponibilizadas na pensão completa do navio, excursões, pacotes aéreos, dentre outros).
- Valores promocionais: durarão enquanto houver disponibilidade de cabine e poderão ser modificados sem aviso prévio.
- Dentro da mesma categoria de cabine poderá haver variação de tamanho, disposição e mobília em relação àquelas apresentadas. Imagens apenas representativas.
x Fechar
Este site utiliza cookies para aprimorar a sua navegação e sugerir as melhores opções para seu cruzeiro.