📋 Indíce

• Bem-vindo
• Proposta
  • O desafio
  • Objetivo
• Meu processo
  • Construção do site
  • Aprendizado
  • Prosseguimento
• Screenshots
• Links
• Tecnologias utilizadas
• Pré-requisitos
• Procedimentos de instalação
• Agradecimentos
• Autora

Bem-vindo! 👋

Landingpage pet.

Essa foi a criação da minha primeira landing page para adquirir habilidades de codificação criando projetos realistas.

🚀 Proposta

Desafio da mentoria CSV para prática de projetos com o objetivo de adquirir habilidades de codificação.

Escolha de um projeto com o prazo de entrega de 7 dias O prazo foi diminuido em 1 dia pelo mentor, portanto, precisou ser realizado em 6 dias.

Data inicial: 24/07/2022

Data final: 29/07/2022

🏆 O desafio

Os usuários devem ser capazes de:

Página principal

• Clicar nos links de navegação do cabeçalho "Quem somos?, "Galeria de fotos" e "contato" e serem direcionados para as respectivas páginas index.html, galeria.html e contato.html.

• Ao passar o mouse sob as listas de serviço, elas irão aumentar seu tamanho.

• Ao clicar sob as listas de serviço, será direcionado para uma página externa.

Página - Quem somos?

• O usuário deve ser capaz de passar o mouse sob o parágrafo e ele mudará de cor.

Página - Galeria de fotos

• Ao passar pelas fotos cada uma terá destaque ao aumentar de tamanho.

Página - contato

• Preenchimento dos dados com "nome, e-mail, telefone e mensagem".

• Observe que este é um teste de criação de formulário que ainda passará por validação.

🏆 Objetivo

• Baseado no curso de HTML e CSS da Alura e no site Barbearia-Alura, tive como objetivo fazer o meu primeiro projeto pessoal para adiquirir conhecimentos nas linguagens de marcação HTML5 e CSS3.

• Criar uma landingpage para divulgação de serviços na área pet.

• Iniciar aprendizado em HTML e CSS.

👩🚀 Meu processo

6 dias para concluir o projeto

🏆 Construção do site

• Marcação HTML5 semântica
• Propriedades CSS

A construção deste projeto consistiu na criação de quatro páginas

1. Criação do arquivo index.html e style.css e listas de navegação ul li a para redirecionamento para outras páginas.

2. Criação do aquivo quemsomos.htm e style-quem-somos.css com informações sobre os serviços e sua localização, assim como imagens e um parágrafo com efeito hover

3. Criação do arquivo galeria.html de imagens com efeito hover

4. Criação do arquivo contato.html e style-contato com um formulário de contato.

Dentro da pasta /design encontram-se os designs do projeto. O desenho está em formato PNG estático. Usei meu julgamento para estilos como font-size, paddinge margin.

🏆 Aprendizado

• Criação de header e footer
• Centralização dos elementos de navegação com inline-block
• Inserção de imagens
• Efeito hover
• Criação de formulário

🏆 Prosseguimento

Novos projetos para aprender o uso do flexbox.

📸 Screenshots

🖥️ Desktop design

✔️ Links

• Clique no link para acessar a página: https://raizacirne.github.io/landingpage-pet/

🛠 Tecnologias utilizadas

• HTML5
• CSS3

☑️ Pré-requisitos

• Editor de código de sua preferência (recomendado VS code)
• Git

📝 Procedimentos de instalação

Clone este repositório usando o comando:

git clone https://github.com/RaizaCirne/landingpage-pet.git

Baixar arquivo zip

Extrir arquivos

Abrir pasta no editor de código.

😎 Agradecimentos

Agradeço a Alura por todo o aprendizado que me possibilitou fazer o meu primeiro projeto pessoal. Agradeço também ao professor e mentor Pedro Marins que me ensinou a ir além da teoria para colocar todo conhecimento obtido em prática!

😎 Autora

• Personal Page - Raíza Cirne Braz
• Frontend Mentor - @RaizaCirne
• GitHub - RaizaCirne
• LinkedIn - Raíza Cirne Braz

HTML - CSS 🚀