vitorlsilveira/cefet-web-coral55

A página da Lanchonete do Coral 55

cefet-web-coral55

Um cardápio das gostosuras marítimas servidas na Lanchonete do Coral 55.

Atividade

Você deve estilizar a página do cardápio (arquivo index.html) de forma a implementar o comprehensive layout criado por um designer (arquivo coral55-comp.png). Você deve usar a especificação do layout (arquivo coral55-specs.png).

Diretrizes do Exercício

Aqui estão os itens que precisam ser implementados:

1. Use elementos semânticos no lugar de <div></div> e <span></span> sempre que um deles existir.
2. Use a fonte "Ravie" que está inclusa no projeto, dentro da pasta fonts.
3. Estude qual o melhor seletor CSS para cada situação.
4. Use espaçamento (vertical) duplo para os itens do cardápio.
5. Inclua o <script></script> js/bubbles.js.
6. Lembre-se de como funciona o box-model na hora de definir as dimensões dos elementos.
7. Lembre-se de que elementos posicionados de forma absolute têm seu como seu sistema de coordenadas o seu ancestral mais próximo que esteja com posicionamento não-estático (i.e., position: [absolute, relative, fixed]).

• Tipicamente colocamos position: relative; no elemento pai de um elemento com position: absolute; para servir de sistema de coordenadas.

Roteiro

Minha sugestão é escolher cada parte da página para estilizar. Eu fiz na seguinte ordem:

1. Estilização do recipiente geral da página (#recipiente) - como ficou
2. Estilização do cabeçalho (header) - como ficou
3. Estilização da seção lateral (#lateral) - como ficou
   • Esta é a parte mais demorada da atividade prática
   • Além de estilizar essa seção, também tirei #cardapio de baixo dela
   • Deixe a lateral com position absolute e posicionado no topo e o #recipiente com position relative. Assim, defina o height como 100% para que ele ocupe 100% do recipiente (a altura de um elemento também é relacionado com seu ancestral não estático mais próximo).
4. Estilização do cardápio (#cardapio) - como ficou
5. Estilização do rodapé (footer) - como ficou
6. Estilização do ticket (#ticket) - como ficou

FAQ

• Para rotacionar um elemento no sentido horário:

  #elemento {
    transform: rotate(45deg); /* dado em graus, sentido horário */
  }

• Para fazer uma transição suave da posição left de um elemento, usamos a propriedade transition:

  #elemento {
    /* ... */
    left: -100px;
    transition: left 100ms ease-out; /* propriedade, duração, interpolação */
  }
  #element:hover {
    left: 0;
  }

• Centralizando um elemento block cuja largura é sempre a mesma:

  #elemento {
    width: /* um valor */;
    margin-left: auto;
    margin-right: auto;
  }

• Meu degradê não está funcionando... por quê?

  • Possivelmente, você está atribuindo um linear-gradient(...) para a propriedade background-color, mas um degradê é, para o CSS, um background-image