Tuliof210 / 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.

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