LarryIVC/100_days_of_projects_day3

Product info, is a card about a product on the shoping store

PROY03: Product Info - 100daysofprojects

[PROY03: Product Info] construido con HTML y CSS, para mejorar nuestras habilidades de codificación. Este proyecto es el tercero de los desafios #100daysofprojects promovido por Frontend Club.

Tabla de contenidos

• Descripcion
  • El desafio
  • Capturas
  • Enlaces
• Flujo de trabajo
  • Desarrollo
  • Recursos
• Agradecimientos
• Contacto
• Licencia

Descripcion

El desafio

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

Los usuarios deberían poder:

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.

Importante:

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.

Capturas

Enlaces

• Proyecto
• Repositorio

Flujo de trabajo

Desarrollo

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;
  }

Recursos

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

Agradecimientos

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

Contacto

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

Licencia

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.