My Potfólio Réplica

👁️ Preview Web: vercel

Este projeto foi desenvolvido no bootcamp DevStart PayLivre sobre supervisão da be.academy.

Prótoripo desenvolvido pelo professor Luan Monteiro.

Neste repositório está descrito o processo de criação da réplica do modelo disponibilizado para todos os alunos.

🚀 Sobre mim

Sou desenvolvedor full-stack, sempre disposto a encarar novos desáfios na área de desenvolvimento, educação e pesquisa.

Stack utilizada

Front-end: HTML e CSS

📁 Estrutura do projeto

assets
- images
- script
- styles
  - pattern.css
  - reset.css
  - responsive.css
  - style.css
index.html

⚒️ Primeira Etapa:

Trabalhando o HTML

TEXTO DO SITE

  be.

  QUEM SOU
  CASES
  😃 FAÇA UM ORÇAMENTO

  Olá!👋🏻 Eu sou  
  Luan Monteiro
  Especialista em Desenvolvimento Front-end

  Tenho como especialidade realizar sonhos, transformando seu projeto em uma obra de arte.

  veja meus cases

  #vemcomopai🔥

  Sucesso
  Tem
  Nome

  QUEM SOU.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel posuere enim. 
  Quisque cursus ac leo et maximus. Proin non diam congue, sodales velit et, cursus ante. 
  Suspendisse convallis rhoncus dapibus. Vivamus accumsan leo id blandit ultrices. 
  Fusce libero ligula, ullamcorper quis facilisis sed, commodo nec lacus. 

  CASES.

  ENTRE EM CONTATO.
  #LetsGoUp🚀

  Feito com ❤️ e carinho por mim.

Criar a estrutura no Index.html

    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>MyPortfólio</title>
    </head>
    <body>
        TEXTO DO SITE
    </body>
    </html>

Definir as marcações semânticas do porjeto

Cabeçalho

<header>
    <!--logo-->
    <!--botões de navegação-->
</header>

Barra de Navegação

<nav>
    <!--lista de links-->
</nav>

Conteúdo principal

<main>
    <!--suas seções-->
</main>

Suas subseções de conteúdo

<section>
    <!--conteúdos da seção-->
</section>

Rodapé

<footer>
    <!--informações-->
</footer>

🧰 Segunda Etapa:

Criar container que envolvera as partes importantes do projeto
Trabalhando o CSS/style
- Olhamos para o layout do site e procurando por estilos que se repetem e colocamos em um unico arquivo.
  - Pattern
    - Fonte
    - Cores
    - Componentes
Customizar HEADER
Customizar a MAIN
- Estilo da section "s-hero"
- Estilo da section "s-access"
- Estilo da section "s-about"
- Estilo da section "s-contact"
Customizar footer