/
comida.html
126 lines (123 loc) · 5.62 KB
/
comida.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="es">
<head>
<title>JNGS/Comida</title>
<link rel="shortcut icon" href="visual/Logo.ico" />
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<link rel="stylesheet" href="visual/comida.css" />
</head>
<body>
<section id="container" class="blur">
<section class="contenedorGrande">
<section class="conteinerCards">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Comida 1: Zumito-->
<div class="swiper-slide">
<div class="comodinBox">
<img src="visual/comida/icono.png" class="imageComodin" alt="Imagen Comodin">
<div class="content">
<p>Un buen zumito te ira bien en tu largo y dificil camino</p>
</div>
<div class="details">
<div class="imgBox">
<img src="visual/comida/zumo.png">
</div>
<h3>Muy Comun<br> <span>Suma 1 punto</span></h3>
</div>
</div>
</div>
<!--Comdia 2: Pegante-->
<div class="swiper-slide">
<div class="comodinBox">
<img src="visual/comida/icono.png" class="imageComodin" alt="Imagen Comodin">
<div class="content">
<p>Al parecer estas roto por dentro, giño giño...</p>
</div>
<div class="details">
<div class="imgBox">
<img src="visual/comida/pegante.png">
</div>
<h3>Algo común<br> <span>Suma 3 Puntos</span></h3>
</div>
</div>
</div>
<!-- COMIDA 3: LEAN -->
<div class="swiper-slide">
<div class="comodinBox">
<img src="visual/comida/icono.png" class="imageComodin" alt="Imagen Comodin">
<div class="content">
<p>Sustancia morada que te hará olvidar que estas en Colombia</p>
</div>
<div class="details">
<div class="imgBox">
<img src="visual/comida/lean.png">
</div>
<h3>Raro<br> <span>Suma 5 punto</span></h3>
</div>
</div>
</div>
<!-- COMIDA 4: CHONTADURO-->
<div class="swiper-slide">
<div class="comodinBox">
<img src="visual/comida/icono.png" class="imageComodin" alt="Imagen Comodin">
<div class="content">
<p>Su riqueza en nutrientes te ayudara a alcanzar un alto score</p>
</div>
<div class="details">
<div class="imgBox">
<img src="visual/comida/chontaduros.png">
</div>
<h3>Muy raro<br> <span>Suma 8 puntos</span></h3>
</div>
</div>
</div>
<!-- COMIDA 5: GASEOSA-->
<div class="swiper-slide">
<div class="comodinBox">
<img src="visual/comida/icono.png" class="imageComodin" alt="Imagen Comodin">
<div class="content">
<p>Liquido rico en azúcar, recuerda no tomar mas de 10</p>
</div>
<div class="details">
<div class="imgBox">
<img src="visual/comida/gaseosa.png">
</div>
<h3>Extremadamente Raro<br> <span>Suma 12 puntos</span></h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contenedorTextoIndicativo">
<img class="imgcont" src="visual/flecha_izquierda.png" alt="Flecha a la izquierda">
<p class="textocont">Arrastra para visualizar</p>
<img class="imgcont" src="visual/flecha_derecha.png" alt="Flecha a la derecha"></
</section>
</section>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script type="module">
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 100,
modifier: 2,
slideShadows: true,
},
loop:true
});
</script>
</section>
</section>
<a href="instrucciones.html" class="btn-neon">
<span class="span"></span>
ATRAS
</a>
</body>
</html>