Hugging Face's logo

Spaces:
Malaji71
/
miguelpitchdeck
Running

App Files Community
Malaji71 commited on
Commit
b35734c
路
verified 路
1 Parent(s): ffa370c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +127 -52
index.html CHANGED
@@ -2,7 +2,7 @@
2
  <html lang="es">
3
  <head>
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>MIGUEL - Pitch Deck</title>
7
  <style>
8
  @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Manrope:wght@200;300;400;500;600;700&display=swap');
@@ -14,6 +14,7 @@
14
  background: #050505;
15
  color: #f0f0f0;
16
  overflow: hidden;
 
17
  }
18
 
19
  .slide {
@@ -21,8 +22,9 @@
21
  height: 100vh;
22
  position: relative;
23
  display: none;
24
- background-size: cover;
25
  background-position: center;
 
26
  }
27
 
28
  .slide.active { display: flex; align-items: center; justify-content: center; }
@@ -310,24 +312,54 @@
310
 
311
  /* ===================== NAVEGACI脫N ===================== */
312
  .nav {
313
- position: fixed; bottom: 30px; right: 30px; z-index: 100; display: flex; gap: 10px;
 
 
 
 
 
314
  }
315
  .nav button {
316
- background: transparent; border: 1px solid rgba(255,255,255,0.3);
317
- color: white; padding: 10px 20px; cursor: pointer;
318
- font-family: 'Manrope', sans-serif; font-size: 0.8rem; letter-spacing: 2px; transition: 0.3s;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
319
  }
320
- .nav button:hover { border-color: white; background: rgba(255,255,255,0.1); }
321
  .nav button:disabled { opacity: 0.3; cursor: not-allowed; }
 
322
  .slide-counter {
323
- position: fixed; bottom: 30px; left: 30px;
324
- font-size: 0.9rem; opacity: 0.5; letter-spacing: 3px;
 
 
 
 
 
 
 
 
 
325
  }
326
 
327
- /* ===================== RESPONSIVE DESIGN ===================== */
328
 
329
  /* Tablets (max-width: 1024px) */
330
  @media (max-width: 1024px) {
 
331
  .titulo-main { font-size: 6rem; letter-spacing: 15px; }
332
  .titulo-slide2 { font-size: 3.5rem; }
333
  .titulo-slide4 { font-size: 2.5rem; }
@@ -341,31 +373,43 @@
341
 
342
  /* Tablets peque帽as y m贸viles grandes (max-width: 768px) */
343
  @media (max-width: 768px) {
344
- .titulo-main { font-size: 4rem; letter-spacing: 10px; margin-top: 60px; }
345
- .tagline-top { font-size: 1.3rem; top: 15px; }
346
- .credits { font-size: 1.1rem; }
347
- .genre { font-size: 0.8rem; }
 
 
 
 
 
348
 
349
- .titulo-slide2 { font-size: 2.5rem; }
350
- .texto-slide2 { font-size: 1rem; }
351
 
352
- .titulo-slide-top-right { font-size: 2rem; top: 40px; right: 5%; }
353
  .equipo-container {
354
  grid-template-columns: 1fr;
355
- bottom: 20px;
356
  gap: 15px;
357
  }
358
  .miembro { padding: 15px; }
359
  .miembro-nombre { font-size: 1.4rem; }
360
 
361
- .overlay-slide4, .overlay-slide5, .overlay-slide6 { width: 100%; }
 
 
 
 
 
 
 
362
  .content-slide4, .content-slide5 { width: 90%; left: 5%; }
363
  .content-slide6 { width: 90%; left: 5%; }
364
 
365
- .titulo-slide4 { font-size: 2rem; }
366
- .titulo-slide5 { font-size: 2.2rem; }
367
- .gracias-title { font-size: 2.8rem; margin-bottom: 30px; }
368
- .contacto-nombre { font-size: 1.5rem; }
369
 
370
  .table-row {
371
  grid-template-columns: 1fr;
@@ -379,30 +423,51 @@
379
  .cascada-table th, .cascada-table td { padding: 8px 10px; }
380
  .notas-tecnicas { margin-top: 60px; padding: 15px; }
381
 
382
- .nav { bottom: 20px; right: 20px; }
383
- .nav button { padding: 8px 15px; font-size: 0.7rem; }
384
- .slide-counter { bottom: 20px; left: 20px; font-size: 0.8rem; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
385
  }
386
 
387
  /* M贸viles peque帽os (max-width: 480px) */
388
  @media (max-width: 480px) {
389
- .titulo-main { font-size: 3rem; letter-spacing: 8px; }
390
- .tagline-top { font-size: 1rem; }
391
- .credits { font-size: 0.95rem; line-height: 1.8; }
 
 
 
 
 
 
392
 
393
- .titulo-slide2 { font-size: 2rem; }
394
- .texto-slide2 { font-size: 0.9rem; line-height: 1.6; }
395
 
396
- .titulo-slide-top-right { font-size: 1.6rem; }
397
  .miembro-nombre { font-size: 1.2rem; }
398
  .miembro-bio { font-size: 0.85rem; }
399
 
400
- .titulo-slide4, .titulo-slide5 { font-size: 1.8rem; }
401
- .highlight-number { font-size: 2rem; }
402
- .highlight-text { font-size: 0.75rem; }
403
 
404
- .gracias-title { font-size: 2.2rem; letter-spacing: 2px; }
405
- .contacto-item { font-size: 0.95rem; }
406
  .whatsapp-icon { width: 20px; height: 20px; }
407
 
408
  .table-row {
@@ -412,40 +477,50 @@
412
 
413
  .cascada-table {
414
  font-size: 0.75rem;
415
- overflow-x: auto;
416
  }
417
  .notas-tecnicas h3 { font-size: 1.1rem; }
418
  .nota-item { font-size: 0.75rem; }
419
 
420
  .talishte-credit {
421
- font-size: 0.75rem;
422
- bottom: 70px;
423
  right: 5%;
424
  left: 5%;
425
  text-align: center;
426
  }
427
 
 
428
  .nav {
429
- bottom: 15px;
430
- right: 15px;
 
431
  }
432
  .nav button {
433
- padding: 6px 12px;
434
- font-size: 0.65rem;
 
 
435
  }
436
  .slide-counter {
437
- bottom: 15px;
438
- left: 15px;
439
- font-size: 0.7rem;
 
 
440
  }
441
  }
442
 
443
  /* Modo horizontal en m贸viles muy peque帽os */
444
  @media (max-height: 500px) and (orientation: landscape) {
445
- .titulo-main { font-size: 2.5rem; margin-top: 0; }
446
- .credits { font-size: 0.85rem; margin-top: 100px; }
447
- .gracias-title { font-size: 2rem; margin-bottom: 20px; }
448
- .contacto-item { margin-bottom: 10px; font-size: 0.9rem; }
 
 
 
 
 
449
  }
450
  </style>
451
  </head>
@@ -645,7 +720,7 @@
645
  </div>
646
  </div>
647
 
648
- <!-- NAVEGACI脫N FIJA -->
649
  <div class="slide-counter"><span id="current">1</span> / 6</div>
650
  <div class="nav">
651
  <button id="btn-prev" onclick="changeSlide(-1)">PREV</button>
 
2
  <html lang="es">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
  <title>MIGUEL - Pitch Deck</title>
7
  <style>
8
  @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Manrope:wght@200;300;400;500;600;700&display=swap');
 
14
  background: #050505;
15
  color: #f0f0f0;
16
  overflow: hidden;
17
+ touch-action: manipulation;
18
  }
19
 
20
  .slide {
 
22
  height: 100vh;
23
  position: relative;
24
  display: none;
25
+ background-size: contain; /* CAMBIADO: para ver m谩s imagen */
26
  background-position: center;
27
+ background-repeat: no-repeat;
28
  }
29
 
30
  .slide.active { display: flex; align-items: center; justify-content: center; }
 
312
 
313
  /* ===================== NAVEGACI脫N ===================== */
314
  .nav {
315
+ position: fixed;
316
+ bottom: 30px;
317
+ right: 30px;
318
+ z-index: 1000; /* MUY ALTO para que siempre est茅 visible */
319
+ display: flex;
320
+ gap: 10px;
321
  }
322
  .nav button {
323
+ background: rgba(0,0,0,0.7); /* Fondo oscuro para que destaque */
324
+ border: 2px solid rgba(255,255,255,0.5);
325
+ color: white;
326
+ padding: 12px 20px;
327
+ cursor: pointer;
328
+ font-family: 'Manrope', sans-serif;
329
+ font-size: 0.85rem;
330
+ letter-spacing: 2px;
331
+ transition: 0.3s;
332
+ border-radius: 5px;
333
+ backdrop-filter: blur(5px);
334
+ }
335
+ .nav button:hover {
336
+ background: rgba(0,0,0,0.9);
337
+ border-color: white;
338
+ }
339
+ .nav button:active {
340
+ transform: scale(0.95);
341
  }
 
342
  .nav button:disabled { opacity: 0.3; cursor: not-allowed; }
343
+
344
  .slide-counter {
345
+ position: fixed;
346
+ bottom: 30px;
347
+ left: 30px;
348
+ z-index: 1000; /* MUY ALTO */
349
+ font-size: 0.9rem;
350
+ opacity: 0.8;
351
+ letter-spacing: 3px;
352
+ background: rgba(0,0,0,0.6);
353
+ padding: 8px 15px;
354
+ border-radius: 5px;
355
+ backdrop-filter: blur(5px);
356
  }
357
 
358
+ /* ===================== RESPONSIVE DESIGN MEJORADO ===================== */
359
 
360
  /* Tablets (max-width: 1024px) */
361
  @media (max-width: 1024px) {
362
+ .slide { background-size: contain; }
363
  .titulo-main { font-size: 6rem; letter-spacing: 15px; }
364
  .titulo-slide2 { font-size: 3.5rem; }
365
  .titulo-slide4 { font-size: 2.5rem; }
 
373
 
374
  /* Tablets peque帽as y m贸viles grandes (max-width: 768px) */
375
  @media (max-width: 768px) {
376
+ .slide {
377
+ background-size: contain;
378
+ background-position: center center;
379
+ }
380
+
381
+ .titulo-main { font-size: 3.5rem; letter-spacing: 8px; margin-top: 60px; }
382
+ .tagline-top { font-size: 1.1rem; top: 10px; }
383
+ .credits { font-size: 1rem; line-height: 1.8; }
384
+ .genre { font-size: 0.75rem; }
385
 
386
+ .titulo-slide2 { font-size: 2.2rem; }
387
+ .texto-slide2 { font-size: 0.95rem; }
388
 
389
+ .titulo-slide-top-right { font-size: 1.8rem; top: 30px; right: 5%; }
390
  .equipo-container {
391
  grid-template-columns: 1fr;
392
+ bottom: 120px; /* M脕S ARRIBA para no tapar navegaci贸n */
393
  gap: 15px;
394
  }
395
  .miembro { padding: 15px; }
396
  .miembro-nombre { font-size: 1.4rem; }
397
 
398
+ .overlay-slide4, .overlay-slide5 {
399
+ width: 100%;
400
+ background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.0) 100%);
401
+ }
402
+ .overlay-slide6 {
403
+ width: 100%;
404
+ background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.0) 100%);
405
+ }
406
  .content-slide4, .content-slide5 { width: 90%; left: 5%; }
407
  .content-slide6 { width: 90%; left: 5%; }
408
 
409
+ .titulo-slide4 { font-size: 1.8rem; }
410
+ .titulo-slide5 { font-size: 2rem; }
411
+ .gracias-title { font-size: 2.5rem; margin-bottom: 30px; }
412
+ .contacto-nombre { font-size: 1.4rem; }
413
 
414
  .table-row {
415
  grid-template-columns: 1fr;
 
423
  .cascada-table th, .cascada-table td { padding: 8px 10px; }
424
  .notas-tecnicas { margin-top: 60px; padding: 15px; }
425
 
426
+ /* NAVEGACI脫N M脕S GRANDE Y VISIBLE EN M脫VIL */
427
+ .nav {
428
+ bottom: 15px;
429
+ right: 15px;
430
+ z-index: 1000;
431
+ }
432
+ .nav button {
433
+ padding: 12px 18px;
434
+ font-size: 0.8rem;
435
+ background: rgba(0,0,0,0.8);
436
+ }
437
+ .slide-counter {
438
+ bottom: 15px;
439
+ left: 15px;
440
+ font-size: 0.8rem;
441
+ background: rgba(0,0,0,0.8);
442
+ padding: 10px 15px;
443
+ }
444
  }
445
 
446
  /* M贸viles peque帽os (max-width: 480px) */
447
  @media (max-width: 480px) {
448
+ .slide {
449
+ background-size: contain;
450
+ background-position: center top; /* Mostrar m谩s la parte superior */
451
+ }
452
+
453
+ .titulo-main { font-size: 2.5rem; letter-spacing: 5px; margin-top: 50px; }
454
+ .tagline-top { font-size: 0.9rem; top: 5px; }
455
+ .credits { font-size: 0.85rem; line-height: 1.6; }
456
+ .genre { font-size: 0.65rem; }
457
 
458
+ .titulo-slide2 { font-size: 1.8rem; }
459
+ .texto-slide2 { font-size: 0.85rem; line-height: 1.5; }
460
 
461
+ .titulo-slide-top-right { font-size: 1.4rem; }
462
  .miembro-nombre { font-size: 1.2rem; }
463
  .miembro-bio { font-size: 0.85rem; }
464
 
465
+ .titulo-slide4, .titulo-slide5 { font-size: 1.6rem; }
466
+ .highlight-number { font-size: 1.8rem; }
467
+ .highlight-text { font-size: 0.7rem; }
468
 
469
+ .gracias-title { font-size: 2rem; letter-spacing: 2px; }
470
+ .contacto-item { font-size: 0.9rem; margin-bottom: 15px; }
471
  .whatsapp-icon { width: 20px; height: 20px; }
472
 
473
  .table-row {
 
477
 
478
  .cascada-table {
479
  font-size: 0.75rem;
 
480
  }
481
  .notas-tecnicas h3 { font-size: 1.1rem; }
482
  .nota-item { font-size: 0.75rem; }
483
 
484
  .talishte-credit {
485
+ font-size: 0.7rem;
486
+ bottom: 90px;
487
  right: 5%;
488
  left: 5%;
489
  text-align: center;
490
  }
491
 
492
+ /* NAVEGACI脫N OPTIMIZADA PARA M脫VILES PEQUE脩OS */
493
  .nav {
494
+ bottom: 10px;
495
+ right: 10px;
496
+ gap: 8px;
497
  }
498
  .nav button {
499
+ padding: 10px 15px;
500
+ font-size: 0.75rem;
501
+ background: rgba(0,0,0,0.85);
502
+ border: 2px solid rgba(255,255,255,0.6);
503
  }
504
  .slide-counter {
505
+ bottom: 10px;
506
+ left: 10px;
507
+ font-size: 0.75rem;
508
+ background: rgba(0,0,0,0.85);
509
+ padding: 8px 12px;
510
  }
511
  }
512
 
513
  /* Modo horizontal en m贸viles muy peque帽os */
514
  @media (max-height: 500px) and (orientation: landscape) {
515
+ .slide { background-size: cover; }
516
+ .titulo-main { font-size: 2rem; margin-top: 0; }
517
+ .credits { font-size: 0.8rem; margin-top: 80px; }
518
+ .gracias-title { font-size: 1.8rem; margin-bottom: 20px; }
519
+ .contacto-item { margin-bottom: 8px; font-size: 0.85rem; }
520
+
521
+ .nav { bottom: 10px; right: 10px; }
522
+ .nav button { padding: 8px 12px; font-size: 0.7rem; }
523
+ .slide-counter { bottom: 10px; left: 10px; font-size: 0.7rem; }
524
  }
525
  </style>
526
  </head>
 
720
  </div>
721
  </div>
722
 
723
+ <!-- NAVEGACI脫N FIJA (SIEMPRE VISIBLE) -->
724
  <div class="slide-counter"><span id="current">1</span> / 6</div>
725
  <div class="nav">
726
  <button id="btn-prev" onclick="changeSlide(-1)">PREV</button>