-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (116 loc) · 8.48 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="">
<script src="https://cdn.tailwindcss.com"></script>
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.1.0/uicons-regular-rounded/css/uicons-regular-rounded.css'>
<link rel="shortcut icon" href="img/calculadora.svg" type="image/x-icon">
<title>Conversor Binario</title>
</head>
<body class="bg-gray-900">
<header>
<nav>
<section class="text-gray-400 bg-gray-900 body-font font-medium text-2xl pb-8">
<div class="container mx-auto flex pt-10 md:flex-row flex-col items-center justify-center">
<a href="index.html" class="ml-8"><i class="fi fi-rr-calculator mr-4"></i> CONVERSOR BINARIO</a>
</div>
</section>
</nav>
</header>
<main>
<section class="text-gray-400 bg-gray-900 body-font">
<div class="container mx-auto flex px-10 py-12 md:flex-row flex-col items-center">
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 md:mb-0 mb-10">
<img class="object-cover object-center rounded" alt="hero" src="img/img1.png">
</div>
<div class="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
<h1 class="title-font sm:text-3xl text-2xl mb-4 font-medium text-white">¡Convierte entre sistemas numéricos
<br class="hidden lg:inline-block">con facilidad!
</h1>
<p class="mb-8 leading-relaxed">Ya sea que estés estudiando informática, programación, matemáticas o simplemente necesites realizar conversiones entre diferentes sistemas numéricos en tu vida diaria, nuestra herramienta es la solución perfecta para ti.</p>
<div class="flex justify-center">
<a href="conversor.html" class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Empezar</a>
</div>
</div>
</div>
</section>
<section class="text-gray-400 bg-gray-900 body-font">
<div class="container px-10 py-24 mx-auto flex flex-wrap">
<div class="flex flex-wrap w-full">
<div class="lg:w-3/5 md:w-1/2 md:pr-10 md:py-6">
<div class="flex relative pb-12">
<div class="h-full w-10 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-800 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-white mb-1 tracking-wider">Selecciona el tipo de conversión</h2>
<p class="leading-relaxed">Determina el tipo de conversión que deseas realizar. Puedes convertir un número binario a decimal, o viceversa. También es posible convertir entre otras bases numéricas, como octal o hexadecimal, dependiendo de las funciones disponibles en el conversor.</p>
</div>
</div>
<div class="flex relative pb-12">
<div class="h-full w-10 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-800 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-white mb-1 tracking-wider">Ingresar el número </h2>
<p class="leading-relaxed">Introduce el número que deseas convertir en el conversor, utilizando la base numérica adecuada. Asegúrate de representar correctamente el número según las reglas del sistema numérico elegido, ya sea binario (0 y 1), decimal (0 al 9), octal (0 al 7), hexadecimal (0 al 9 y A-F), u otro sistema numérico específico.</p>
</div>
</div>
<div class="flex relative">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
<path d="M22 4L12 14.01l-3-3"></path>
</svg>
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-white mb-1 tracking-wider">¡LISTO!</h2>
<p class="leading-relaxed">Haz clic en el botón de "Convertir" o "Calcular" según lo indique el conversor. El resultado de la conversión se mostrará en la pantalla.</p>
</div>
</div>
</div>
<img class="lg:w-2/5 md:w-1/2 object-cover object-center rounded-lg md:mt-0 mt-12 mx-auto" src="img/img2.png" alt="step">
</div>
</div>
</section>
<section class="text-gray-400 bg-gray-900 body-font">
<form action="https://formsubmit.co/9003251b636c8294cd4e075fa39b1579" method="post" class="container px-10 py-20 mx-auto flex flex-wrap items-center">
<div class="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
<h1 class="title-font font-medium text-3xl text-white">¡No esperes más, envía tus sugerencias hoy mismo!</h1>
<p class="leading-relaxed mt-4">Si has identificado áreas en las que podríamos crecer o si simplemente quieres compartir tus comentarios sobre tu experiencia con nosotros, no dudes en enviar un correo electrónico.</p>
</div>
<div class="lg:w-2/6 md:w-1/2 bg-gray-800 bg-opacity-50 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<h2 class="text-white text-lg font-medium title-font mb-5">Envía tus sugerencias</h2>
<div class="relative mb-4">
<label for="Correo" class="leading-7 text-sm text-gray-400">Correo Electrónico</label>
<input placeholder="[email protected]" type="email" id="email" name="Correo" class="w-full bg-gray-600 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-indigo-900 rounded border border-gray-600 focus:border-indigo-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<div class="relative mb-4">
<label for="Sugerencias" class="leading-7 text-sm text-gray-400">Sugerencia</label>
<textarea type="texta" id="sugerencias" name="Sugerencias" class="w-full bg-gray-600 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-indigo-900 rounded border border-gray-600 focus:border-indigo-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</textarea>
</div>
<button type="submit" class="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Enviar</button>
</div>
</form>
</section>
</main>
<footer class="text-gray-400 bg-gray-900 body-font">
<div class="container px-5 py-8 mx-auto flex items-center justify-center sm:flex-row flex-col">
<i class="fi fi-rr-calculator text-2xl"></i>
</div>
</footer>
</body>
</html>