HTML

  
  <div class="container">
    <div class="card">
      <header>
        <h2 class="username">odraciRdev</h2>
      </header>
        <img src="../../assets/img/avatar.webp" 
        alt="Avatar de odraciRdev" 
        class="avatar">
      <article class="info">
        <p class="age"><strong>Edad:</strong> 00</p>
        <p class="country"><strong>País:</strong> Venezuela</p>
        <p class="dob"><strong>Nacimiento:</strong> 00/00/0000</p>
      </article>
      <footer>
        <p class="web">
          <a href="//github.com/odracirdev">
          <img src="../../assets/img/github.svg">GitHub</a>
        </p>
      </footer>
    </div>
  

CSS

  
  .container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    
  .card {
    width: 300px;
    height: 450px;
    background-image:
    repeating-linear-gradient(
      343deg, 
      rgba(12,15,16, 0.04) 0px, 
      rgba(12,15,16, 0.04) 2px,
      transparent 2px, 
      transparent 4px)
      linear-gradient(
        180deg, 
        rgb(5,8,37),
        rgb(93,83,83));
    border-radius: 8px;
    box-shadow: black 1px 1px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: whitesmoke;
  }
    
  .username {
    font-size: 2rem;
    line-height: 2.3rem;
    text-align: center;
    margin: 1rem 0;
  }
    
  .avatar {
    width: 50%;
    border-radius: 8px;
    box-shadow: black 1px 1px 4px;
  }
    
  .info {
    width: 80%;
    margin: 2rem 0;
  }

  footer img {
    width: 32px;
  }
    
  footer a {
    text-decoration: none;
    color: whitesmoke;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: scale 300ms ease;
  }
    
  footer a:hover {
    text-decoration: none;
    scale: 115%;
  }