-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (109 loc) · 8.31 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href=https://stitches.hyperyolo.com/output.css rel="stylesheet">
<link rel="stylesheet" href=https://use.fontawesome.com/releases/v5.6.3/css/all.css integrity=sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/ crossorigin="anonymous">
<title>e-rolling</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body><nav class="font-sans bg-white text-center flex justify-between my-4 mx-auto container overflow-hidden">
<a href="/" class="block text-left">
<img src="https://i.ibb.co/6PSnPp0/IMG-20211117-WA0042.jpg" class="h-10 sm:h-10 rounded-full d-none d-md-block" style="width: 100px; height: 100px;" alt="logo">
</a>
<ul class="text-sm text-gray-700 list-none p-0 flex items-center">
<li><a href="#" class="inline-block py-2 px-3 text-gray-900 hover:text-gray-700 no-underline">Servicios</a></li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-900 hover:text-gray-700 no-underline">Precios</a></li>
<li class="pr-2"><a href="#"
class="inline-block py-2 px-3 text-gray-900 hover:text-gray-700 no-underline">Productos</a></li>
<li class="pl-2 border-l"><a href="#"
class="inline-block py-2 px-3 text-gray-900 hover:text-gray-700 no-underline">Iniciar sesión</a></li>
<button class="hover:bg-text-gray-800 text-white ml-4 py-2 px-3" style="background-color: #34eb40;">
Registrarse
</button>
</ul>
</nav>
<section class="font-sans h-screen w-full bg-cover text-center flex flex-col items-center justify-center"
>
<div style="width:100%;height:0px;position:absolute;padding-bottom:56.250%; top:150px; "><iframe src="https://streamable.com/e/1wnlur?autoplay=1&nocontrols=1" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px; "></iframe></div>
</section>
<section class="font-sans container m-auto max-w-xl flex flex-col flex-wrap sm:flex-row justify-center" >
<div class="w-full sm:w-1/2 lg:w-1/4 text-center py-8"style="margin-top: 100px;" >
<label for="" class="uppercase tracking-loose font-bold text-sm">Tarifa joven</label>
<h1 for="" class="uppercase tracking-loose font-bold text-5xl my-2">$19.99<span class="text-gray-700 font-light text-xs">/mes</span></h1>
<p class="my-2 text-gray-700"><strong class="text-black pr-2">Requisitos</strong></p>
<p class="my-2 text-gray-700"><strong class="text-black pr-2"></strong>15-29 años + Carnet estudiante</p>
<button class="bg-transparent hover:bg-black text-black-dark font-semibold hover:text-white py-2 px-4 border border-black hover:border-transparent">
Comprar ahora
</button>
</div>
<div class="w-full sm:w-1/2 lg:w-1/4 text-center py-8" style="margin-top: 100px;" >
<label for="" class="uppercase tracking-loose font-bold text-sm">Tarifa Adulta</label>
<h1 for="" class="uppercase tracking-loose font-bold text-5xl my-2">25.99<span class="text-gray-700 font-light text-xs">/mes</span></h1>
<p class="my-2 text-gray-700"><strong class="text-black pr-2">Requisitos</strong></p>
<p class="my-2 text-gray-700"><strong class="text-black pr-2"></strong>+29 años</p>
<button class="bg-transparent hover:bg-black text-black-dark font-semibold hover:text-white py-2 px-4 border border-black hover:border-transparent">
Comprar ahora
</button>
</div>
<div class="w-full sm:w-1/2 lg:w-1/4 text-center py-8" style="margin-top: 100px;" >
<label for="" class="uppercase tracking-loose font-bold text-sm">Tarifa supercarga</label>
<h1 for="" class="uppercase tracking-loose font-bold text-5xl my-2">$10<span class="text-gray-700 font-light text-xs">/mes</span></h1>
<p class="my-2 text-gray-700"><strong class="text-black pr-2">Requisitos</strong></p>
<p class="my-2 text-gray-700"><strong class="text-black pr-2"></strong>Disponer de tu propio patinete</p>
<button class="bg-transparent hover:bg-black text-black-dark font-semibold hover:text-white py-2 px-4 border border-black hover:border-transparent">
Comprar ahora
</button>
</div>
</div>
</section>
<footer class="font-sans text-white py-8 px-4" style="background-color: #34eb40;">
<div class="mx-auto container overflow-hidden flex flex-col lg:flex-row justify-between">
<a class="block mr-4 w-1/2">
<img src="https://i.ibb.co/V9cW6yY/IMG-20211117-WA0044.jpg" class="h-10 sm:h-10 rounded d-none d-md-block" style="width: 100px; height: 100px;" alt="logo">
</a>
<div class="w-1/2 flex text-sm mt-6 lg:mt-0">
<ul class="text-gray-700 list-none p-0 font-thin flex flex-col text-left">
<li class="inline-block py-2 px-3 text-white uppercase no-underline font-medium tracking-wide">Productos</li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-400 no-underline">Popular</a></li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-400 no-underline">Trending</a></li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-400 no-underline">Catalog</a></li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-400 no-underline">Features</a></li>
</ul>
<ul class="text-gray-700 list-none p-0 font-thin flex flex-col text-left">
<li class="inline-block py-2 px-3 text-white uppercase no-underline font-medium tracking-wide">Compañía</li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-400 no-underline">Press Release</a>
</li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-400 no-underline">Mission</a></li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-400 no-underline">Strategy</a></li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-400 no-underline">Works</a></li>
</ul>
<ul class="text-gray-700 list-none p-0 font-thin flex flex-col text-left">
<li class="inline-block py-2 px-3 text-white uppercase no-underline font-medium tracking-wide">Información</li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-400 no-underline">Support</a></li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-400 no-underline">Developers</a></li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-400 no-underline">Customer
Services</a></li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-400 no-underline">Started Guide</a>
</li>
</ul>
<div class="text-gray-700 flex flex-col">
<div class="inline-block py-2 px-3 text-white uppercase font-medium tracking-wide">Siguenos</div>
<div class="flex pl-4 justify-start">
<a class="block flex items-center text-white hover:text-gray-500 mr-6 no-underline" href="#"><i
class="fab fa-instagram"></i></a>
<a class="block flex items-center text-white hover:text-gray-500 no-underline" href="#"><i
class="fab fa-twitter"></i></a>
</div>
</div>
</div>
</div>
<div class="pt-4 mt-4 text-gray-700 border-t border-gray-900 text-center"> ©2021 E-rolling. Todos los derechos reservados.</div>
</footer></body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</script>