Criando um Cartão de Perfil Pessoal com HTML e CSS: Projeto Simples para Iniciantes.

Acima, você pode ver um cartão de perfil pessoal simples e bonito que criei com HTML e CSS. Este é um ótimo projeto para iniciantes porque:

● É visualmente atraente

● Ensina conceitos importantes de layout

● Usa várias propriedades CSS comuns

● Possui efeitos interativos simples (hover)

Como funciona:

A estrutura HTML:

- Um container principal (cartão)

- Uma seção de cabeçalho com um avatar

- Uma seção de corpo com nome, título, bio e links sociais

- Um botão de contato

Os conceitos CSS que você vai aprender:

Flexbox para centralizar elementos

● Box-shadow para criar efeitos de sombra

● Posicionamento de elementos

● Estilização de texto e cores

● Efeitos de hover

● Bordas arredondadas

Você pode copiar este código, salvá-lo como um arquivo .html e abri-lo diretamente no seu navegador para ver o resultado. Para personalizá-lo, você pode alterar:

● As cores (procure pelos códigos de cor como #4e54c8)

● O texto (nome, título, bio)

● O tamanho do cartão

● As fontes

Este é um excelente ponto de partida para você começar a entender HTML e CSS. À medida que você se sentir mais confortável, pode adicionar mais elementos e estilo

Deixarei aqui agora agora o código do cartão de perfil pessoal Acima:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cartão de Perfil Pessoal</title>
  <style>
      /* Reset básico */
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      /* Estilo do corpo da página */
      body {
          font-family: 'Arial', sans-serif;
          background-color: #f0f2f5;
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          padding: 20px;
      }

      /* Estilo do cartão */
      .card {
          background-color: white;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          overflow: hidden;
          width: 300px;
          text-align: center;
      }

      /* Cabeçalho do cartão */
      .card-header {
          background-color: #4e54c8;
          height: 120px;
          position: relative;
      }

      /* Imagem de perfil */
      .profile-img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background-color: #f5f5f5;
          border: 5px solid white;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: -50px;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      /* Ícone de avatar simples */
      .avatar-icon {
          font-size: 50px;
          color: #999;
      }

      /* Conteúdo do cartão */
      .card-body {
          padding: 60px 20px 20px;
      }

      /* Nome da pessoa */
      .name {
          color: #333;
          font-size: 22px;
          font-weight: bold;
          margin-bottom: 5px;
      }

      /* Título/Profissão */
      .title {
          color: #6c757d;
          font-size: 16px;
          margin-bottom: 15px;
      }

      /* Descrição/Bio */
      .bio {
          color: #666;
          font-size: 14px;
          line-height: 1.5;
          margin-bottom: 20px;
      }

      /* Lista de redes sociais */
      .social-list {
          display: flex;
          justify-content: center;
          gap: 15px;
          list-style: none;
      }

      /* Item da rede social */
      .social-item {
          width: 40px;
          height: 40px;
          background-color: #eee;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          transition: background-color 0.3s;
      }

      /* Efeito de hover */
      .social-item:hover {
          background-color: #4e54c8;
          color: white;
      }

      /* Botão de contato */
      .contact-btn {
          display: block;
          background-color: #4e54c8;
          color: white;
          border: none;
          border-radius: 5px;
          padding: 10px 0;
          width: 100%;
          font-size: 16px;
          cursor: pointer;
          margin-top: 20px;
          transition: background-color 0.3s;
      }

      /* Efeito de hover no botão */
      .contact-btn:hover {
          background-color: #3a40a5;
      }
  </style>

</head>
<body>
  <div class="card">
      <div class="card-header">
          <div class="profile-img">
              <div class="avatar-icon">👤</div>
          </div>
      </div>
      <div class="card-body">
          <h1 class="name">Seu Nome</h1>
          <h2 class="title">Desenvolvedor Web</h2>
          <p class="bio">Olá! Sou um desenvolvedor web apaixonado por criar experiências digitais incríveis. Este é meu primeiro projeto HTML e CSS.</p>
          
          <ul class="social-list">
              <li class="social-item">FB</li>
              <li class="social-item">IG</li>
              <li class="social-item">TW</li>
              <li class="social-item">IN</li>
          </ul>
          
          <button class="contact-btn">Entre em Contato</button>
      </div>
  </div>
</body>
</html>

Gostou deste artigo? Então me siga para mais novidades

Vamos nos conectar? Meu Linkeding: https://www.linkedin.com/in/edilson-da-silva-136a0a33a