diff --git a/README.md b/README.md index deafa8b7..4f2da9e3 100644 --- a/README.md +++ b/README.md @@ -1,92 +1,30 @@ # Lyft -* **Track:** _Common Core_ -* **Curso:** _Creando tu primer sitio web interactivo_ -* **Unidad:** _Maquetado web con HTML & CSS_ +La siguiente página está conformada por 5 partes: + - Header: se encuentra en la parte superior de toda la página y contiene lo siguiente: -*** + 1. Logo: se tiene un logo pequeño en la parte superior izquierda. + 2. Menú: se tiene un menú con tres opciones y un botón de inicio de sesión. + 3. Imagen principal: se tiene una imágen gif de fondo de toda esa sección. -Para completar este reto, hemos creado este repositorio boilerplate (plantilla -inicial) con todos los recursos que necesitas. Esto incluye imágenes y -estructura de carpetas y archivos donde colocarás tu código. + - Sección 1: es la segunda sección que contiene lo siguiente: -## Flujo de trabajo + 1. Article: se tiene un caja al lado izquierdo y esta contiene lo siguiente: + * Caja: está representada con un aticle el cual da a conocer una descripción de lo que tiene al lado, este mismo contiene un subtítulo pequeño, un título y un texto en general. + * video: se tiene un video a la izquierda. -1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74) - de este repositorio. + - Sección 2: es la tercera sección que contiene lo siguiente: -2. Luego deberás **clonar** tu fork en tu máquina. Recuerda que el comando a usar - es `git clone` y su estructura normalmente se ve así: + 1. Article: al igual que nuestra sección 1, en esta sección encontramos una caja y un video al lado pero para este caso la caja se encuentra a la izquierda y el video al lado derecho. + + - Sección 3: es la cuarta sección que tiene la misma estructura que la sección 1. - ```bash - git clone https://github.com//lyft.git - ``` + - Sección 4: es nuestra quinta sección y contiene lo siguiente: + + 1. Primera parte: se encuentran tres columnas de links y una columna de imágenes (App Store, Google Play y Microsoft). + 2. Segunda parte: se encuentran tres íconos de redes sociales y el texto de Copyright. -## Objetivo - -El reto consiste en replicar el sitio de **Lyft**, este será el resultado -a lograr: +Se realizó lo más parecido posible a nuestra página de ejemplo **Lyft**, como se puede observar en la siguiente imagen: ![Lyft Website](docs/fullpage.png) -## Consideraciones - -* Encontrarás un archivo base `index.html` en el cual deberás escribir la - estructura de tu proyecto y enlazar tus archivos de estilos (CSS). - -* En la carpeta `css` tendrás un archivo base `main.css` donde agregarás los - estilos necesarios para tu proyecto: - -* Dentro de la carpeta `assets` se encuentra la carpeta `images` donde - encontrarás todas las imágenes necesarias para completar tu proyecto. - -* Deberás **actualizar el archivo `README.md`** explicando el contenido de tu - repositorio. - -* Esta web utiliza la tipografía `Montserrat`. - -* La paleta de colores puedes obtenerla inspeccionado el sitio original, pero - para ganar tiempo, puedes usar los siguientes: - - - Botones, hover: `#FF00BF` - - Fondo de `footer`: `#333447` - - Título del formulario: `#352384` - - Texto del formulario: `#728099` - - Gradiente morado: `linear-gradient(#76278F, #2B1E66);` - -* Para el footer, deberás tomar en cuenta que tiene un hover y se ve como en la - siguiente imagen: - - ![Lyft - Footer](docs/footer.gif) - - Además, los íconos deberás obtenerlo de `Icomoon`. - -* Para este reto, encontrarás ciertas cosas que probablemente aun no has visto - en clase (formularios, videos de Youtube). No te preocupes, estamos seguros - que los afrontarás con éxito, de igual forma aquí unos tips: - - - Estos son los videos de Youtube: - * https://www.youtube.com/watch?v=fLSmUWOYpKw - * https://www.youtube.com/watch?v=V7j8Aqxmbs8 - * https://www.youtube.com/watch?v=xj2VWLV0xCU - - Para agregar los videos, averigua sobre la etiqueta `iframe`. - - Para el formulario, revisa las etiquetas como `form` e `input`. - -* Puedes ver el [sitio original](https://www.lyft.com/), sin embargo, su diseño - ya ha cambiado en ciertas partes, así que tu fuente de verdad es la imagen que - muestra el objetivo de este reto. - - > Nota: El sitio original tiene ciertos efectos y funcionalidades que -están fuera del alcance de este reto. Enfócate en obtener la maquetación -lo más parecido posible, usando lo aprendido en clase ;) - -## A tener en cuenta - -Este reto será evaluado sobre lo siguiente: - -* Pixel perfect (replicar el diseño con exactitud) -* Estructura de carpetas y archivos -* Nombramiento de clases, id, etc -* Indentación -* Archivo `README.md` actualizado y correctamente redactado -* Uso de comentarios para hacer tu código más legible diff --git a/assets/icons/icomoon/fonts/icomoon.eot b/assets/icons/icomoon/fonts/icomoon.eot new file mode 100644 index 00000000..006cab02 Binary files /dev/null and b/assets/icons/icomoon/fonts/icomoon.eot differ diff --git a/assets/icons/icomoon/fonts/icomoon.svg b/assets/icons/icomoon/fonts/icomoon.svg new file mode 100644 index 00000000..183c4158 --- /dev/null +++ b/assets/icons/icomoon/fonts/icomoon.svg @@ -0,0 +1,13 @@ + + + +Generated by IcoMoon + + + + + + + + + \ No newline at end of file diff --git a/assets/icons/icomoon/fonts/icomoon.ttf b/assets/icons/icomoon/fonts/icomoon.ttf new file mode 100644 index 00000000..64962423 Binary files /dev/null and b/assets/icons/icomoon/fonts/icomoon.ttf differ diff --git a/assets/icons/icomoon/fonts/icomoon.woff b/assets/icons/icomoon/fonts/icomoon.woff new file mode 100644 index 00000000..b556478c Binary files /dev/null and b/assets/icons/icomoon/fonts/icomoon.woff differ diff --git a/assets/icons/icomoon/style.css b/assets/icons/icomoon/style.css new file mode 100644 index 00000000..d6c1305d --- /dev/null +++ b/assets/icons/icomoon/style.css @@ -0,0 +1,35 @@ +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot?t4yonv'); + src: url('fonts/icomoon.eot?t4yonv#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?t4yonv') format('truetype'), + url('fonts/icomoon.woff?t4yonv') format('woff'), + url('fonts/icomoon.svg?t4yonv#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-facebook:before { + content: "\ea90"; +} +.icon-instagram:before { + content: "\ea92"; +} +.icon-twitter:before { + content: "\ea96"; +} diff --git a/css/main.css b/css/main.css index 839fb7d0..28b3a0c4 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,408 @@ -/* - * Estilos de tu proyecto - */ \ No newline at end of file +/*CLASES REUTILIZABLES*/ +* { + box-sizing: border-box; + margin:0; + padding: 0; +} + +body { + font-family: 'Montserrat', sans-serif; +} + +a { + text-decoration: none; +} + +.text-uppercase { + text-transform: uppercase; +} + +.text-white { + color: #fff; +} + +.right { + float: right; +} + +.left { + float: left; +} + +li { + list-style: none; +} + +/*CLASES ESPECÍFICAS*/ + +/*Encabezado*/ +.image-hero{ + background: url(../assets/images/hero.gif) 0px -98px; + background-repeat: no-repeat; + background-size: cover; + border-bottom-color: transparent; + border-bottom-style: hidden; + position: absolute; + width: 100%; +} + +nav, header button { + display: inline-block; +} + + +/* Logo */ +.logo-container { + height: 500px; + padding: 30px; + width: 500px; +} + +.logo { + margin-left: 30px; + width: 10%; +} + +/* Menú */ +.menu { + padding: 30px; + right: 90px; + position: absolute; +} + +.list { + display: inline-block; + padding: 15px; +} + +.btn-list { + background-color: transparent; + border: 1px solid #d8dce6; + border-radius: 5px; + font-size: 18px; + padding: 10px; +} + +/*Primera sección*/ +#section-one { + height: 67vh; /*revisar*/ + margin-top: 110px; + width: 100%; +} + +.text-box{ + background-color: #fff; + display: inline-block; + float: right; + height: 100vh; + padding: 60px; + padding-bottom: 100px; + width: 40%; +} + +.text-box h1 { + font-size: 40px; +} + +.text-color, .text-h3, .signup { + color: #352384; + margin-top: -15px; +} + +.text-h3 { + font-size: 14px; + font-weight: normal; + letter-spacing: 1.5px; + line-height: 15px; + margin-top: 15px; + margin-bottom: 0; +} + +/* Caja para Phone number */ +.info-input { + border: none; + border-bottom: 1px solid #352384; + color: #cbd2e0; + font-size: 16px; + padding-bottom: 10px; + padding-top: 30px; + outline: none; + width: 100%; +} + +/* Boton del formulario de la derecha - section one */ +.btn { + background-color: #ff00bf; + border: 1px solid #ff00bf; + border-radius: 5px; + float: left; + font-size: 16px; + height: 50px; + margin-top: 30px; + padding: 5px; + position: absolute; + width: 9%; +} + +input.btn.text-white { + font-weight: bold; +} + +.signup { + margin-top: 40px; + margin-left: 200px; + position: absolute; + text-decoration: underline; +} + +.article-p, .article-p-2 { + font-size: 10px; + line-height: 14px; +} + +.article-p { + padding-top: 100px; +} + +.article-p-2 { + padding-bottom: 0px; + padding-top: 10px; +} + + +/*Segunda sección*/ +#section-two { + background-image: -webkit-linear-gradient(#6f268b, #2B1E66); + background-image: -o-linear-gradient(#6f268b, #2B1E66); + background-image: linear-gradient(#6f268b, #2B1E66); + border-top-color: transparent; + border-top-style: hidden; + margin-top: 39%; + position: absolute; + width: 100%; +} + +.container-section-two { + height: 100%; + margin-top: 60px; +} + +.box-one, .box-two, .box-three, .phone-section-two { + margin-left: 150px; + margin-top: 40px; +} + +.box-one, .box-two { + width: 50% +} + +.box-three { + width: 60%; +} + +.box-one h1, .box-two h1, .box-three h1 { + font-size: 28px; +} + +.box-p { + font-size: 16px; + padding-top: 10px; +} + +/* Imagen de teléfono */ +.phone-section-two { + height: 500px; + padding: 30px; +} + +.image-phone { + margin-left: 90px; + position: absolute; + width: 380px; + +} + +/*Tercera sección*/ +#section-three { + margin-top: 50.4%; + position: absolute; + width: 100%; +} + +.text-box-section-three { + margin-left: 5%; + margin-top: 400px; + position: absolute; + width: 25%; +} + +.article-h5 { + margin-bottom: 0px; +} + +.watch-a { + color: #000; + font-size: 8px; +} + +.title-h2 { + margin-bottom: 20px; +} + +.title-h2-p { + line-height: 24px; + width: 70%; +} + +.box-video { + display: block; + height: 500px; + left: 35%; + margin-top: 323px; + position: absolute; + width: 65%; +} + +/*Cuarta sección*/ +#section-four { + margin-top: 83.7%; + position: absolute; + width: 100%; +} + +.text-box-section-four { + margin-left: 5%; + position: absolute; + right: 50px; + top: 250px; + width: 25%; +} + +.box-video-four { + display: block; + height: 500px; + margin-top: 188px; + margin-right: 25px; + position: absolute; + width: 65%; +} + +/*Quinta sección*/ +#section-five { + height: 100vh; + margin-top: 73%; + position: absolute; + width: 100%; +} + +.text-box-section-five { + margin-top: 930px; + margin-left: 5%; + position: absolute; + width: 25%; +} + +.box-video-five { + display: block; + height: 500px; + left: 35%; + margin-top: 890px; + position: absolute; + width: 65%; +} + +/*Pie de página*/ +footer { + background-color: #333447; + color: #fff; + padding: 1%; + position: absolute; + top: 292.8%; + width: 100%; +} + +h4.text-uppercase { + font-size: 16px; + line-height: 18px; + margin-bottom: 30%; +} + +.title-login:hover, .title-partner:hover, .title-learn:hover { + text-decoration: underline #fff; +} + +.list-hover:hover { + color: #ff00bf; +} + +footer div h4 a { + color: #fff; +} + +footer div ul li a { + color: #fff; + line-height: 50px; +} + +.login, .partner, .learn { + display: inline-block; + margin: 2% 7% 2%; +} + +.learn { + vertical-align: top; +} + +.login ul, .partner ul, .learn ul { + padding-left: 0; +} + +.app-stores { + display: inline-block; + margin: 2% 3% 2% 13%; + width: 20%; +} + +.ban { + padding: 5%; + width: 100%; +} + +.ban img { + box-sizing: border-box; + height: 40px; + width: 135px; +} + +.list-li { + display: inline-block; + position: absolute; +} + +.list-li { + display: inline-block; + position: relative; +} + +.base { + margin: 2% 19% 2%; + text-align: center; + width: 60%; +} + +.social-network { + height: 5%; + width: 100%; +} + +.icon-facebook, .icon-instagram, .icon-twitter { + border: 1px solid #fff; + border-radius: 30px; + display: inline-block; + margin: 30px; + padding: 10px; +} + +hr { + margin-bottom: 5%; +} diff --git a/index.html b/index.html index 67324f35..3f933b68 100644 --- a/index.html +++ b/index.html @@ -1 +1,165 @@ + + + + + Lyft + + + + + + + +
+
+ + +
+ + + +
+
+

turn miles
into money

+

sign up to drive with lift.

+
+ + + +
+

Already applied?Check the status of your application here.

+

Earn money for inviting friends to drive. Learn more

+
+
+
+ + +
+ + +
+
+

a ride in minutes

+

Request a ride and you’ll be on your way in minutes. Request. Ride. Repeat.

+
+ +
+

serious about safety

+

From knowing the color of your driver’s car to our 24/7 Trust & amp Safety Team, we got you.

+
+ +
+

happy drivers

+

happy riders

+

Ride with us and you’ll see why 9 out of 10 rides end with five stars.

+
+
+ +
+ phone +
+
+ + +
+
+
watch
+

amplify your ride

+

Lyft's new emblem, Amp, is the secret to smooth pickups. Lighting up dashboards nationwide, the device makes it easy for passangers and drivers to find each other.

+
+ + +
+ + +
+ + +
+
watch
+

june

+

In an animated short film by Academy Award-winner John Kahrs, a lovely widow in historic South Chicago is empowered to start sharing the ride -and sharing her life, too.

+
+
+ + +
+
+
watch
+

a good thing going

+

Launching on TV and online, "Ride on the Bright Side" shows how Lyft continues to prioritize happy drivers, short ETAs, and safety.

+
+ + +
+ + + + +