Esse projeto é uma Landing Page de uma hamburgueria fictícia chamada Empire Burger. Nela há seções sobre as Ofertas Especiais, Horário de Funcionamento, cardápio contendo os ingredientes e preços, cards com os feedbacks dos clientes e a localização do estabelecimento.
Para facilitar a codificação do projeto foi usado um protótipo do Figma como base, o autor do layout é o Designer Tiago Alves. Clique aqui para abrir o protótipo no Figma.
-
Criar as seguintes seções: Menu, Banner Hero, Ofertas Especiais, Onde fica o Nosso Castelo e Footer;
- Desktop
- Mobile
-
Ao clicar em um item do menu, o usuário deverá ser levado para a seção correspondente;
-
Na seção Ofertas Especiais os elementos devem ser organizados com o uso da propriedade "display: grid" do CSS;
-
As informações do card da oferta (nome do prato e gramagem) devem estar no HTML, a única imagem deve ser a foto do prato com o preço;
-
Na seção Onde fica o Nosso Castelo você deverá incorporar uma localização do Google Maps.
-
Todos os requisitos do Nivel Fácil;
- Desktop
- Mobile
-
Criar as seguintes seções: Cardápio, Atendimento e Nossas Entregas;
- Desktop
- Mobile
-
Na seção Cardápio os preços devem ser formatados com o método Intl.NumberFormat;
-
O card Horário de Funcionamento deverá ter os estados aberto e fechado, o estado será alterado conforme o horário do navegador do usuário.
-
Todos os requisitos do Nivel Fácil e Médio;
- Desktop
- Mobile
-
Criar as seguintes seções: Nossa Realeza e Publicações do Instagram;
- Desktop
- Mobile
-
Buscar a lista de itens do cardápio via API;
-
Buscar a lista de depoimentos via API;
-
Na seção Nossa Realeza os depoimentos deverão estar em um carrossel funcional;
-
O texto de cada depoimento deverá estar limitado em quatro linhas. Você pode usar a propriedade "clamp" do CSS.