Skip to content

Andres-Torrez/iphone-catalog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

iPhone Store

Tienda online profesional de iPhones con diseño moderno y responsive.

🚀 Características

  • Diseño premium: Estética inspirada en Apple con toques modernos de ecommerce
  • Totalmente responsive: Optimizado para móvil, tablet y desktop
  • Rendimiento: HTML, CSS y JavaScript vanilla sin frameworks pesados
  • Accesibilidad: Contraste adecuado, navegación por teclado, etiquetas ARIA
  • SEO básico: Meta descripciones, etiquetas semánticas, estructura clara

📁 Estructura del proyecto

iphone-catalog/
├── index.html          # Homepage con hero, productos y beneficios
├── iphone-15.html      # Página de producto iPhone 15
├── iphone-16.html      # Página de producto iPhone 16
├── iphone-17.html      # Página de producto iPhone 17
├── styles.css          # Sistema de diseño completo
├── script.js           # Interacciones y utilidades
├── images/             # Imágenes de productos
│   ├── iphone15.jpg
│   ├── iphone16.jpg
│   └── iphone17.jpg
└── README.md

🛠️ Tecnologías

  • HTML5: Estructura semántica y accesible
  • CSS3: Variables CSS, Grid, Flexbox, animaciones
  • JavaScript: Vanilla JS sin dependencias

📱 Páginas

Homepage (index.html)

  • Header fijo con navegación responsive
  • Hero section con CTA
  • Grid de productos con tarjetas modernas
  • Sección de beneficios
  • Estadísticas de confianza
  • Footer profesional

Páginas de producto

  • Galería de imágenes
  • Especificaciones técnicas
  • Badges (Nuevo, Popular, En stock)
  • Botones de acción (Comprar, Contactar)
  • Productos relacionados

🎨 Sistema de diseño

Colores

  • Primary: #0071e3 (Azul Apple)
  • Secondary: #1d1d1f (Negro Apple)
  • Background: #f5f5f7 (Gris claro)
  • Surface: #ffffff (Blanco)

Tipografía

  • Font family: SF Pro Display, system-ui, sans-serif
  • Escalado fluido con clamp()

Componentes

  • Botones con variantes: primary, secondary, outline
  • Tarjetas de producto con hover effects
  • Badges para estados
  • Grid responsive

🚀 Despliegue

Este proyecto está optimizado para GitHub Pages:

  1. Sube los archivos a un repositorio
  2. Ve a Settings > Pages
  3. Selecciona la rama main y carpeta / (root)
  4. Tu sitio estará disponible en https://tuusuario.github.io/iphone-catalog/

📝 Notas

  • Los selectores data-testid se mantienen para compatibilidad con scraping
  • Las imágenes deben estar en la carpeta images/
  • El menú móvil funciona sin dependencias externas

📄 Licencia

Proyecto de demostración para fines educativos.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors