PROY08: NFT Preview Card Component

Crear un componente NFT vista previa con efecto overlay, usando HTML y CSS; y lograr que se parezca lo más posible al diseño.

1. Ver un diseño óptimo en pantallas grandes(1200px) y pequeñas(375px).
2. Ver una imagen de fondo(overlay) al pasar el mouse sobre la tarjeta.
3. Ver un color diferente(hover) al pasar el mouse sobre el título de tarjeta y nombre del usuario.

1. Agrega icono favicon al proyecto.
2. Agrega una URL fácil de recordar (ej. 08-nft-preview-card-component).
3. Agrega un título al proyecto (ej. NFT Preview Card Component - Frontend Club).
4. Bonus: Agrega un archivo README.md al proyecto.

• Proyecto
• Repositorio

Estructura del proyecto

/
📂
├── 📂css/
│ └── styles.css
├── 📂fonts/
│ └── Outfit-VariableFont_wght.ttf
├── 📂images/
│   └── favicon-32x32.png
│   └── icon-clock.svg
│   └── icon-ethereum.svg
│   └── icon-view.svg
│   └── image-equilibrium.jpg
│   └── larry.webp
│   └── logo.webp
│   └── mockup.webp
│   └── scrrenshoot.webp
└── index.html
└── LICENSE
└── README.md

Tecnologías

1. HTML Semántico
2. Estilos CSS
3. Git y GitHub
4. Netlify

Flujo de desarrollo

1. Análisis del diseño
2. Configuración inicial
   • Vincular archivos y librerías
   • Iniciar proyecto con Git
3. Marcado HTML
   • Estructura semántica
   • Atributos accesibles
   • Enlaces y rutas
4. Estilos CSS
   • De arriba hacia abajo
   • Estilos reutilizables
   • Estilos personalizados
5. Flujo de trabajo mobile-first

Fragmentos de codigo

Etiquetas meta para el SEO.

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Larry Villegas Costas" />
<meta
  name="title"
  content="PROY08: NFT Preview Card Component - Larry Villegas Costas - Frontend Club"
/>
<meta
  name="description"
  content="PROY08: NFT Preview Card Component - Larry Villegas Costas - Frontend Club"
/>
<title>NFT Preview Card Component - Frontend Club</title>

Comparte los recursos que hayas utilizado para completar este proyecto.

1. Frontend Club - Comunidad de desarrollo web
2. Netlify - Plataforma de alojamiento web
3. Multi Device Website Mockup Generator - Generador de maquetas
4. SVGOMG - Optimizador de SVG
5. Squoosh - Optimizador de imágenes
6. Shots - Capturas de pantalla
7. Google Fonts - Fuentes gratuitas

• Mi familia que siempre me apoya en mis proyectos
• Mi streeamer favorito que me inspira a seguir adelante @midudev

• LinkedIn
• Facebook
• GitHub
• Correo
• Twitter
• Portfolio

Este proyecto está bajo la Licencia (MIT) - mira el archivo LICENSE para detalles

No dudes en contactarme si crees que te puedo ayudar en algún proyecto o tienes un trabajo para mi.