[PROY08: NFT Preview Card Component] construido con HTML
, CSS
para mejorar nuestras habilidades de codificación. Este proyecto es el octavo de los desafios #100daysofprojects promovido por Frontend Club.
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.
- Ver un diseño óptimo en pantallas
grandes(1200px)
ypequeñas(375px)
. - Ver una imagen de
fondo(overlay)
al pasar el mouse sobre la tarjeta. - Ver un color diferente(
hover
) al pasar el mouse sobre eltítulo de tarjeta
ynombre del usuario
.
- Agrega icono
favicon
al proyecto. - Agrega una
URL
fácil de recordar (ej.08-nft-preview-card-component
). - Agrega un
título
al proyecto (ej.NFT Preview Card Component - Frontend Club
). - Bonus: Agrega un archivo
README.md
al proyecto.
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
HTML
Semántico- Estilos
CSS
Git
yGitHub
Netlify
Flujo de desarrollo
- Análisis del diseño
- Configuración inicial
- Vincular archivos y librerías
- Iniciar proyecto con Git
- Marcado HTML
- Estructura semántica
- Atributos accesibles
- Enlaces y rutas
- Estilos CSS
- De arriba hacia abajo
- Estilos reutilizables
- Estilos personalizados
- 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.
- Frontend Club - Comunidad de desarrollo web
- Netlify - Plataforma de alojamiento web
- Multi Device Website Mockup Generator - Generador de maquetas
- SVGOMG - Optimizador de SVG
- Squoosh - Optimizador de imágenes
- Shots - Capturas de pantalla
- Google Fonts - Fuentes gratuitas
- Mi familia que siempre me apoya en mis proyectos
- Mi streeamer favorito que me inspira a seguir adelante @midudev
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.