From 6f71c2df9c841f4bb615b854cdf7e903b2e2f6d4 Mon Sep 17 00:00:00 2001 From: Jhon Steve La Rosa Chirre Date: Tue, 14 Jul 2026 18:50:53 -0500 Subject: [PATCH] fix: make landing page responsive for mobile devices #3 --- index.html | 71 +++++++++++++++++++++++++++++++++++++++++++++++ package-lock.json | 6 ++++ 2 files changed, 77 insertions(+) create mode 100644 index.html create mode 100644 package-lock.json diff --git a/index.html b/index.html new file mode 100644 index 0000000..d615675 --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ +/* ============================================ + CSS RESPONSIVE - PLANTILLA + ============================================ */ + +/* Mobile First (320px - 480px) */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.container { + padding: 16px; +} + +/* Tablets (481px - 768px) */ +@media (min-width: 481px) { + .container { + padding: 24px; + max-width: 720px; + margin: 0 auto; + } +} + +/* Desktop (769px - 1024px) */ +@media (min-width: 769px) { + .container { + padding: 32px; + max-width: 960px; + margin: 0 auto; + } +} + +/* Large Desktop (1025px+) */ +@media (min-width: 1025px) { + .container { + max-width: 1200px; + } +} + +/* Touch Targets - mínimo 44px para móvil */ +button, a { + min-height: 44px; + min-width: 44px; + padding: 12px 24px; +} + +/* Imágenes responsivas */ +img { + max-width: 100%; + height: auto; +} + +/* Grid responsive */ +.grid { + display: grid; + grid-template-columns: 1fr; + gap: 16px; +} + +@media (min-width: 481px) { + .grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 769px) { + .grid { + grid-template-columns: repeat(4, 1fr); + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..b9918ac --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "Crystal-PDF", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}