Tutorial del proyecto JavaScript de estadísticas de perfil

Archivos completos del proyecto

Créalo a partir del código fuente

Crea los archivos del proyecto, copia el código y abre el archivo HTML en tu navegador.

1Crea 3 archivos
→
2Copia el código
→
3Ejecuta index.html

Antes de ejecutarlo

Mantén todos los archivos del proyecto juntos en la misma carpeta.

Estructura del proyecto

profile-statistics/

<!DOCTYPE html>
<html lang="en">
  <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>Profile Statistics</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
      integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="stats-container">
      <i class="fas fa-briefcase fa-3x icon"></i>
      <div class="counter" data-ceil="15">15</div>
      <h4>Years Exprerience</h4>
    </div>
    <div class="stats-container">
      <i class="fas fa-cloud fa-3x icon"></i>
      <div class="counter" data-ceil="260">260</div>
      <h4>Websites Made</h4>
    </div>
    <div class="stats-container">
      <i class="fab fa-apple fa-3x icon"></i>
      <div class="counter" data-ceil="27">27</div>
      <h4>Apps Made</h4>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Estadísticas de perfil

Estadísticas de perfil

Créalo a partir del código fuente

Practica con proyectos relacionados

Animación de efecto de texto automático

Barra de carga

Carrusel de testimonios

Animación de efecto de texto automático

Barra de carga

Carrusel de testimonios