PROY03: Product Info - 100daysofprojects

Crear una tarjeta de información de producto, usando HTML y CSS, y lograr que se parezca lo más posible al diseño.

1. Ver el diseño óptimo en pantallas grandes(1200px).
2. Ver un color diferente(hover) al pasar el mouse sobre el botón principal.
3. Ver un color diferente(hover) al pasar el mouse sobre los botones secundarios.
4. Ver un color de sombra(box-shadow) como se muestra en la imagen.

1. Agrega icono favicon al proyecto.
2. Agrega una URL fácil de recordar (ej. 03-product-info).
3. Agrega un título al proyecto (ej. Product Info - Frontend Club).
4. Bonus: Agrega un archivo README.md al proyecto.

• Proyecto
• Repositorio

Estructura del proyecto

/
📂
├── 📂css/│ 
│ └── styles.css
├── 📂images/
│ └── day02.webp
│ └── favicon-32x32.png
│ └── headphone.png
│ └── logo.webp
│ └── mockup.webp
│ └── scrrenshot.webp
└── index.html
└── LICENSE
└── README.md

Tecnologías

1. HTML Semántico
2. Estilos CSS
3. Animaciones CSS
4. Git y GitHub
5. 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 desktop-first

Fragmentos de codigo

Etiquetas meta para el SEO.

<meta name="author" content="Larry Villegas Costas" />
<meta
      name="title"
      content="PROY03: Product Info - Larry Villegas Costas - Frontend Club"
/>
<meta
      name="description"
      content="PROY03: Product Info - Larry Villegas Costas - Frontend Club"
/>
<title>PROY03: Product Info - Larry Villegas Costas - Frontend Club</title>

Animaciones CSS.

@media screen and (max-width: 768px) {
  :root {
    font-size: 12px;
  }

  article {
    flex-direction: column;
    max-width: 31.25rem;
    gap: 1.5rem;
  }

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.