throwback to hyperloop tc :)

hoodrichpirobo · May 20, 2024 · 9cfc2c5 · 9cfc2c5
1 parent 2c877c8
commit 9cfc2c5
Show file tree

Hide file tree

Showing 6 changed files with 734 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.gitkeep b/.gitkeep
diff --git a/MainPage.html b/MainPage.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8"/>
+        <meta name="viewport"
+                content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
+        <title> HLT </title>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+    <body>
+        <div id="page">
+
+            <nav>
+
+                <img src="images/logo-white.png"/>
+                <ul class="menu">
+                    <li class="dropdown"><span> Valores &#9662</span>
+                        <ul class="values-menu">
+                            <li><a href="#"> Inclusividad </a></li>
+                            <li><a href="#"> Desarrollo </a></li>
+                            <li><a href="#"> Comunicación </a></li>
+                            <li><a href="#"> Sostenibilidad </a></li>
+                        </ul>
+                    </li>
+                    <li><a href="booking.html"> HyperloopTrips  </a></li>
+                    <li><a href="#"> Nosotrxs </a></li>
+                </ul>
+
+            </nav>
+
+            <div class="section header">
+
+                <div class="photo">
+                    <picture>
+                        <source media="(min-width:401px)"
+                                    srcset="images/trips-big.jpg"/>
+                        <source media="(max-width:400px)"
+                                    srcset="images/trips-tall.jpg"/>
+                        <img src="images/trips-small.jpg"/>
+                    </picture>
+                </div>
+
+            </div>
+
+            <section class="section content">
+
+                <h1>¡Viaja con el Transporte Moderno!</h1>
+
+                <p> Después de bastante esfuerzo, el Hyperloop es una realidad, 
+                convirtiéndose en el primer transporte público internacional y sostenible. 
+                Presenta esto así una de las más importantes iniciativas hacía la lucha por 
+                la enriquecedora mezcla de culturas.</p>
+
+                <p> Ningún ser humano es <strong>ilegal</strong>. </p>
+
+                <img id="pic" src="images/multiculture.jpg" style="max-width: 600px"/>
+
+            </section>
+
+            <footer>
+
+                <section class="section content">
+
+                    <p> &copy; 2022 <a href="https://www.linkedin.com/in/cuxprada/">Cux Prada</a>.</p>
+
+                    <p> Pueden hacer click en las imágenes para conocer donde están las principales sedes internacionales de Hyperloop. </p>
+
+                </section>
+
+            </footer>
+
+            <div class="section medallo">
+                <a href="https://www.youtube.com/watch?v=5ZoYy2ZtCCU"><img src="images/medallo.png" style="max-width:100%"/></a>
+            </div>
+
+            <div class="section vlc">
+                <a href="https://www.youtube.com/watch?v=FsFbZVmUOXE"><img src="images/vlc.jpg" style="max-width:100%"/></a>
+            </div>
+
+            <div class="section edi">
+
+                <a href="https://www.youtube.com/watch?v=LX2nq-tthxs">
+
+                    <picture>
+
+                        <source media="(min-width:401px)"
+                                    srcset="images/edi.jpg"/>
+                        <source media="(max-width:400px)"
+                                    srcset="images/edi-tall.jpg"/>
+                        <img src="images/edi.jpg" style="max-width:100%"/>
+
+                    </picture>
+
+                </a>
+
+            </div>
+
+        </div>
+    </body>
+</html>
diff --git a/booking.html b/booking.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+
+        <meta charset="UTF-8"/>
+        <meta name="viewport"
+                content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
+        <title> Reserva tu viaje </title>
+        <link rel="stylesheet" href="estilo.css"/>
+
+    </head>
+    <body>
+
+        <a href="MainPage.html"><img class="pod" src="images/auranInicio.png"/></a>
+
+        <header class="trip-form-header">
+            <h1> Explora con HyperLoopTrips!  </h1>
+            <p><em> Reserva tu próximo viaje con nosotros, nos encanta ser tu compañía en cada aventura! </em></p>
+            <p><em>Al escogernos estás colaborando a reducir la contaminación. </em></p>
+        </header>
+
+
+        <form action="" method="get" class="trip-form">
+
+            <div class="form-row">
+                <label for="full-name"> Nombre </label>
+                <input id="full-name" name="full-name" type="text"/>
+            </div>
+
+            <div class="form-row">
+                <label for="full-name"> Apellidos </label>
+                <input id="full-name" name="full-name" type="text"/>
+            </div>
+
+            <div class="form-row">
+                <label for="id"> DNI </label>
+                <input id="id" name="id" type="number"/>
+            </div>
+
+            <div class="form-row">
+                <label for="email"> Correo electrónico </label>
+                <input id="email"
+                        name="email"
+                        type="email"
+                        placeholder="cux@ejemplo.com"/>
+            </div>
+
+            <fieldset class="legacy-form-row">
+                <legend> Tipo de pasaje </legend>
+                <input id="trip-type-1"
+                        name="trip-type"
+                        type="radio"
+                        value="business"/>
+                <label for="trip-type-1" class="radio-label"> Business </label>
+                <input id="trip-type-2"
+                        name="trip-type"
+                        type="radio"
+                        value="economy"
+                        checked />
+                <label for="trip-type-2" class="radio-label"> Económico </label>
+            </fieldset>
+
+            <div class="form-row">
+                <label for="pronouns"> Pronombres </label>
+                <select id="pronouns" name="pronouns">
+                    <option value="they/them"> Elle/le </option>
+                    <option value="she/her"> Ella/la </option>
+                    <option value="he/him"> Él/el </option>
+                </select>
+            </div>
+
+            <div class="form-row">
+                <label for="departure"> Salida </label>
+                <select id="departure" name="departure">
+                    <option value="med"> Medellín, Colombia </option>
+                    <option value="vlc"> Valencia, España </option>
+                    <option value="edi"> Edimburgo, Reino Unido </option>
+                    <option value="boston"> Boston, Estados Unidos </option>
+                </select>
+            </div>
+
+            <div class="form-row">
+                <label for="destination"> Destino </label>
+                <select id="destination" name="destination">
+                    <option value="med"> Medellín, Colombia </option>
+                    <option value="vlc"> Valencia, España </option>
+                    <option value="edi"> Edimburgo,Reino Unido </option>
+                    <option value="boston"> Boston, Estados Unidos </option>
+                </select>
+            </div>
+
+            <div class="form-row">
+                <label for="departure-date"> Fecha de ida </label>
+                <input id="departure-date" name="departure-date" type="date"/>
+            </div>
+
+            <div class="form-row">
+                <label for="return-date"> Fecha de vuelta</label>
+                <input id="return-date" name="return-date" type="date"/>
+                <div class="instructions"> Dejar en blanco en caso de ser solo un pasaje de ida.</div>
+            </div>
+
+            <div class="form-row">
+                <label for="abstract"> Observaciones </label>
+                <textarea id="abstract" name="abstract"></textarea>
+                <div class="instructions"> Nos pueden informar en 500 palabras si se padece alguna discapacidad, alergías u otros aspectos a tener en cuenta. </div>
+            </div>
+
+            <div class="form-row">
+                <label class="checkbox-label" for="available">
+                <input id="available"
+                        name="available"
+                        type="checkbox"
+                        value="accepts"
+                        checked/>
+                <span> He leído y acepto los términos y condiciones </span>
+                </label>
+            </div>
+
+            <div class="form-row">
+                <label class="checkbox-label" for="available">
+                <input id="available"
+                        name="available"
+                        type="checkbox"
+                        value="accepts"/>
+                <span> Acepto que se destine el 30% de los fondos <br> recaudados con mi pasaje hacia la <br>colonización de Marte. </span>
+                </label>
+            </div>
+
+            <div class="form-row">
+                <button> Submit </button>
+            </div>
+
+        </form>
+
+        <img class="logo" src="images/Auran Blanco.png"/>
+
+    </body>
+</html>