Boas-Vindas ao repositório do Dojo Landing Page!
Neste Dojo, vamos desenvolver uma Landing Page para a confeitaria LGPDoces. Utilize os arquivos index.html
e style.css
para escrever seu código.
-
Crie um cabeçalho para a página:
- Adicione um
id
para seu cabeçalho; - Faça com que a cor de fundo seja
#FFC5E5
; - Faça com que a posição seja absoluta;
- Use as propriedades
left
etop
para retirrar espaços em branco.
- Adicione um
-
Crie um menu para o cabeçalho:
- Adicione 3 elementos
h3
com os nomes "SOBRE", "SERVIÇOS" e "CONTATO", que deverão ficar à direita do cabeçalho; - Adicione um elemento
h1
com o nome "LGPDoces", que deverá ficar à esquerda do cabeçalho; - Dica: Use o
display: inline-block
.
- Adicione 3 elementos
-
Faça com que todas as fontes sejam da família Arial e da cor
#1f1c0d
. -
Faça com que o
body
seja da cor#FEE9FC
. -
Crie uma seção e atribua uma
classe
e umid
a ela:- Faça com que essa seção tenha margens em relação ao topo, direita e esquerda;
- Crie um
h2
com o texto "Sobre nós" dentro da seção e adicione umid
para ele; - Crie um parágrafo com o texto "Somos a LGPDoces, uma confeitaria que está há 10 anos no mercado oferecendo o melhor da confeitaria. Nossa missão é levar mais sabor e alegria para todas as pessas consumidoras e você pode ser uma delas! Veja o que nós oferecemos." e adicione um
id
para ele; - Faça com que o título tenha uma margem em relação à esquerda e um tamanho de
32px
; - Faça com que o parágrafo tenha um tamanho de
20px
.
-
Crie uma seção e atribua uma
classe
e umid
a ela:-
Faça com que essa seção tenha margens em relação ao topo, direita e esquerda;
-
Crie um
h2
dentro dessa seção com fonte de32px
e margem em relação à esquerda; -
Dentro da pasta
img
, há 4 imagens de produtos oferecidos. Para cada imagem, dentro da seção criada neste passo (6), crie umarticle
e coloque dentro dele a imagem e o texto a ela relacionado. Para o bolo "Temos deliciosos bolos para você!"; para os brigadeiros "Experimente nossos famosos brigadeiros gourmet"; para os cupcakes "Os melhores cupcakes para suas festas e dia a dia"; para a torta "Experimente também nossas saborosas tortas". Exemplo de código:<section> <h2 id="services-title">Nossos serviços</h2> <article> <img src="./img/bolo.jpg" alt="foto bolo de chocolate com morangos" class="right"> <h3 class="product">Temos deliciosos bolos para você!</h3> </article> </section
-
-
Faça com que as imagens fiquem lado a lado com os seus respectivos textos. Exemplo: ao lado da imagem do bolo deve estar o texto referente a ele.
-
Crie uma seção e atribua uma
classe
e umid
a ela:- Dentro dessa seção, adicione um
h2
com o texto "Entre em contato através de nossas redes sociais!" ; - Na pasta
img
há 3 imagens referentes a ícones de redes sociais. Para cada um dos ícones, dentro da seção criada neste passo (8), crie um elementoa
que irá receber o ícone da rede social para que, quando for cliacado, redirecione para uma nova página. Exemplo de código:
<a href="https://www.whatsapp.com/?lang=pt_br" target="_blank"> <img src="./img/whatsapp.png" alt="Ícone do whatsapp" class="socialmedia-icon"> </a>
- Faça com que os ícones tenham largura de
64px
; - Retire o atributo
text-decoration
de todas as tagsa
.
- Dentro dessa seção, adicione um
-
Crie um
footer
para a página:- Faça com que esse footer tenha um
id
; - Crie um parágrafo dentro do footer com o texto "Todos os direitos reservados | LGPDoces | 2022";
- Defina uma
altura
para o footer; - Defina que sua largura ocuperá 100% da tela;
- Faça com que sua posição seja absoluta e use a propriedade
left
para retirar espaços em branco; - Defina uma margem em relação ao topo;
- Faça com que a cor de fundo do footer seja
#FFC5E5
; - Defina uma margem em relação à esquerda e ao topo para o parágrafo.
- Faça com que esse footer tenha um
-
Cire uma navegação interna no site:
- Utilize a tage
a
para criar uma navegação interna através do menu do cabeçalho do site. Ao clicar em "SOBRE", a pessoa deve ser redirecionada para a primeira seção (que fala sobre a confeitaria); ao clicar em "SERVIÇOS", deverá ser redirecionada para a seção que lista os doces produzidos; ao clicar em "CONTATO", deverá ser redirecionada para a seção com os links para as redes sociais.
- Utilize a tage