From 9c208e1287c6511758460a12df69f9c716d09df8 Mon Sep 17 00:00:00 2001 From: LeslyN Date: Tue, 31 Oct 2017 10:43:05 -0500 Subject: [PATCH 01/16] Iniciando index --- index.html | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/index.html b/index.html index 67324f35..87eaa839 100644 --- a/index.html +++ b/index.html @@ -1 +1,71 @@ + + + + + Lyft + + + + + + + +
+
+ + +
+ + +
+ + +
+
+

turn miles into money

+

sign up to drive with lift

+
+ + + Sign up to ride +
+

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 & 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 +
+
+ + \ No newline at end of file From 92fdd98a552c8b00f6069ef101bf368aa47cc6e2 Mon Sep 17 00:00:00 2001 From: LizbethFP Date: Tue, 31 Oct 2017 10:49:10 -0500 Subject: [PATCH 02/16] terminando index --- index.html | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 96 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 87eaa839..704c54d0 100644 --- a/index.html +++ b/index.html @@ -67,5 +67,99 @@

happy riders

phone - - \ No newline at end of file + + +
+
+
wacth
+

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.

+
+ + +
+ + +
+ + +
+
wacth
+

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.

+
+
+ + +
+
+
wacth
+

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.

+
+ + +
+ + + + + + From 46fea6d5d9d5b0f0f2e23f564647948dbba7f3a5 Mon Sep 17 00:00:00 2001 From: LeslyN Date: Tue, 31 Oct 2017 10:51:52 -0500 Subject: [PATCH 03/16] subiendo clases reutilizables en css --- css/main.css | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/css/main.css b/css/main.css index 839fb7d0..d447dabd 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,23 @@ /* * Estilos de tu proyecto - */ \ No newline at end of file + */ +/CLASES REUTILIZABLES/ +body { +font-family: 'Montserrat', sans-serif; +} + +a { + text-decoration: none; +} + +.text-uppercase { + text-transform: uppercase; +} + +.text-white { + color: #fff; +} /verificar si lo necesitaré de verdad/ + +li { + list-style: none; +} From 60fc0ccb7da4de90dfb0b93c6966381018f1db4a Mon Sep 17 00:00:00 2001 From: LizbethFP Date: Tue, 31 Oct 2017 11:25:45 -0500 Subject: [PATCH 04/16] =?UTF-8?q?subiendo=20clases=20espec=C3=ADficas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/main.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) diff --git a/css/main.css b/css/main.css index d447dabd..e34adf7b 100644 --- a/css/main.css +++ b/css/main.css @@ -21,3 +21,75 @@ a { li { list-style: none; } + +/*CLASES ESPECÍFICAS*/ + +/*Encabezado*/ +header { + padding: 10px; +} + +.logo-container { + width: 40%; +} + +.logo { + width: 10%; +} + +nav, header button { + display: inline-block; +} + +/*Primera sección*/ + +/*Segunda sección*/ + +/*Tercera sección*/ + +/*Cuarta sección*/ + +/*Quinta sección*/ + +/*Pie de página*/ + +footer { + background-color: #333447; + color: #fff; + padding: 1%; +} + +footer div h4 a { + color: #fff; +} + +footer div ul li a { + color: #fff; +} + +.app-stores { + +} + +.base { + text-align: center; + width: 60%; + margin: 2% 18% 2%; +} + +.social-network { + width: 100%; + height: 1%; +} + +.icon-facebook, .icon-instagram, .icon-twitter { + border: 1px solid #fff; + border-radius: 30px; + padding: 10px; + display: inline-block; + margin: 10px; +} + +/*footer div ul li a i.icon-facebook, footer div ul li a i.icon-instagram, footer div ul li a i.icon-twitter { + display: inline-block; +}*/ From a1b07389f2776807f82acfd380770b7d240da686 Mon Sep 17 00:00:00 2001 From: LizbethFP Date: Tue, 31 Oct 2017 12:46:17 -0500 Subject: [PATCH 05/16] =?UTF-8?q?subiendo=20alineaci=C3=B3n=20de=20columna?= =?UTF-8?q?s=20e=20im=C3=A1genes=20de=20tiendas=20en=20pie=20de=20p=C3=A1g?= =?UTF-8?q?ina?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/main.css | 42 +++++++++++++++++++++++++++++++++++++----- index.html | 7 +++---- 2 files changed, 40 insertions(+), 9 deletions(-) diff --git a/css/main.css b/css/main.css index e34adf7b..df9a1536 100644 --- a/css/main.css +++ b/css/main.css @@ -1,7 +1,7 @@ /* * Estilos de tu proyecto */ -/CLASES REUTILIZABLES/ +/*CLASES REUTILIZABLES*/ body { font-family: 'Montserrat', sans-serif; } @@ -16,7 +16,7 @@ a { .text-white { color: #fff; -} /verificar si lo necesitaré de verdad/ +} /*verificar si lo necesitaré de verdad*/ li { list-style: none; @@ -65,21 +65,45 @@ footer div h4 a { footer div ul li a { color: #fff; + line-height: 50px; +} + +.login, .partner, .learn { + display: inline-block; + margin: 2% 5% 2%; +} + +.login ul, .partner ul, .learn ul { + padding-left: 0; } .app-stores { + width: 10%; + margin: 2% 3% 2% 7%; + display: inline-block; +} +.ban { + width: 100%; + padding: 5%; } +.ban img { + box-sizing: border-box; + height: 40px; + width: 135px; +} + + .base { text-align: center; width: 60%; - margin: 2% 18% 2%; + margin: 2% 19% 2%; } .social-network { width: 100%; - height: 1%; + height: 5%; } .icon-facebook, .icon-instagram, .icon-twitter { @@ -91,5 +115,13 @@ footer div ul li a { } /*footer div ul li a i.icon-facebook, footer div ul li a i.icon-instagram, footer div ul li a i.icon-twitter { - display: inline-block; + font-size: 20px; +}*/ + +hr { + margin-bottom: 5%; +} + +/*div.base span { + margin-top: 10%; }*/ diff --git a/index.html b/index.html index 704c54d0..abd55f6d 100644 --- a/index.html +++ b/index.html @@ -134,15 +134,15 @@

learn

-
+
apple store
-
+
google play
-
+
microsoft store
@@ -155,7 +155,6 @@

learn

    • -
    © 2017 Lyft, Inc.TermsPrivacy From 33b7152e821308dd508c4dbac3abd80cddd46d0c Mon Sep 17 00:00:00 2001 From: LeslyN Date: Wed, 1 Nov 2017 13:32:07 -0500 Subject: [PATCH 06/16] =?UTF-8?q?Footer=20con=20logo=20y=20men=C3=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/main.css | 51 ++++++++++++++++++++++++++++++++++++++++++++++----- index.html | 17 +++++++++-------- 2 files changed, 55 insertions(+), 13 deletions(-) diff --git a/css/main.css b/css/main.css index df9a1536..a02c76dc 100644 --- a/css/main.css +++ b/css/main.css @@ -2,6 +2,12 @@ * Estilos de tu proyecto */ /*CLASES REUTILIZABLES*/ +* { + box-sizing: border-box; + padding: 0; + margin:0; +} + body { font-family: 'Montserrat', sans-serif; } @@ -18,30 +24,65 @@ a { color: #fff; } /*verificar si lo necesitaré de verdad*/ -li { - list-style: none; +.right { + float: right; +} + +.left { + float: left; } /*CLASES ESPECÍFICAS*/ +li { + list-style: none; + display: inline-block; +} /*Encabezado*/ header { - padding: 10px; + background: linear-gradient(#76278F, #2B1E66); + padding: 30px; + height: 15vh; + width: 100%; } +nav, header button { + display: inline-block; +} + +/* Logo */ .logo-container { width: 40%; } .logo { width: 10%; + margin-left: 50px; } -nav, header button { - display: inline-block; +/* Menú */ +.menu { + right: 90px; + position: absolute; +} + +.list { + padding: 15px; +} + +.btn-list { + padding: 10px; + border-radius: 5px; + border: 1px solid #d8dce6; + background-color: transparent; + font-size: 18px; } /*Primera sección*/ +#section-one { + height: 60vh; + width: 100%; +} /*Segunda sección*/ diff --git a/index.html b/index.html index abd55f6d..37813a6d 100644 --- a/index.html +++ b/index.html @@ -12,20 +12,21 @@
    -
    +
    - +
    -
    +
    From 4faa9b7738f10d4131ebff92174d854a3cb21a13 Mon Sep 17 00:00:00 2001 From: LeslyN Date: Wed, 1 Nov 2017 21:05:30 -0500 Subject: [PATCH 07/16] Header con imagen - completo --- css/main.css | 80 +++++++++++++++++++++++++++++++++++++++++++++++----- index.html | 34 +++++++++++----------- 2 files changed, 90 insertions(+), 24 deletions(-) diff --git a/css/main.css b/css/main.css index a02c76dc..ba3b0aaa 100644 --- a/css/main.css +++ b/css/main.css @@ -33,37 +33,44 @@ a { } /*CLASES ESPECÍFICAS*/ + li { list-style: none; display: inline-block; } /*Encabezado*/ -header { - background: linear-gradient(#76278F, #2B1E66); - padding: 30px; - height: 15vh; +.image-hero{ + background: url(../assets/images/hero.gif) 0px -98px; + background-repeat: no-repeat; + background-size: cover; + position: absolute; width: 100%; + height: 100vh; } nav, header button { display: inline-block; } + /* Logo */ .logo-container { - width: 40%; + width: 500px; + height: 500px; + padding: 30px; } .logo { width: 10%; - margin-left: 50px; + margin-left: 30px; } /* Menú */ .menu { right: 90px; position: absolute; + padding: 30px; } .list { @@ -80,10 +87,69 @@ nav, header button { /*Primera sección*/ #section-one { - height: 60vh; width: 100%; + margin-top: 110px; +} + +.text-box{ + background-color: #fff; + padding: 60px; + margin-left: 870px; + min-height: 60vh; +} + +.text-color, .text-h3 { + color: #352384; + margin-top: -25px; } +.text-h3 { + font-size: 15px; + letter-spacing: 1.5px; + margin-top: 10px; + margin-bottom: 0; + font-weight: 800; +} + +/* Caja para Phone number */ +.info-input { + border: none; + border-bottom: 1px solid #352384; + font-size: 16px; + color: #cbd2e0; + padding-top: 20px; + padding-bottom: 10px; + outline: none; + width: 100%; +} + +/* Boton del formulario de la derecha - section one */ +.btn { + background-color: #ff00bf; + border: 1px solid #ff00bf; + border-radius: 5px; + padding: 10px; + font-size: 16px; + float: left; + margin-top: 20px; + position: absolute; + width: 140px; + height: 50px; +} + +.signup { + float: right; + margin-top: 30px; + right: 100px; +} + +/*Segunda sección*/ +#section-two { + background-image: linear-gradient(#74268e, #2B1E66); + width: 100%; + height: 100vh +}; + /*Segunda sección*/ /*Tercera sección*/ diff --git a/index.html b/index.html index 37813a6d..ef4ba1b1 100644 --- a/index.html +++ b/index.html @@ -11,36 +11,36 @@ -
    +
    -
    - - -
    -
    -

    turn miles into money

    -

    sign up to drive with lift

    -
    - - - Sign up to ride -
    -

    Already applied? Check the status of your application here.

    -

    Earn money for inviting friends to drive. Learn more

    -
    -
    + +
    + +
    +
    From 6f1b9021cfd2cc31335af881b4f237ba7372bc60 Mon Sep 17 00:00:00 2001 From: LizbethFP Date: Wed, 1 Nov 2017 22:11:08 -0500 Subject: [PATCH 08/16] corrigiendo videos en HTML --- css/main.css | 15 ++++++--------- index.html | 8 ++++---- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/css/main.css b/css/main.css index ba3b0aaa..25e08b83 100644 --- a/css/main.css +++ b/css/main.css @@ -1,11 +1,8 @@ -/* - * Estilos de tu proyecto - */ /*CLASES REUTILIZABLES*/ * { box-sizing: border-box; padding: 0; - margin:0; + margin:0; } body { @@ -24,21 +21,21 @@ a { color: #fff; } /*verificar si lo necesitaré de verdad*/ -.right { +/*.right { float: right; } .left { float: left; -} - -/*CLASES ESPECÍFICAS*/ +}*/ li { list-style: none; display: inline-block; } +/*CLASES ESPECÍFICAS*/ + /*Encabezado*/ .image-hero{ background: url(../assets/images/hero.gif) 0px -98px; @@ -63,7 +60,7 @@ nav, header button { .logo { width: 10%; - margin-left: 30px; + margin-left: 30px; } /* Menú */ diff --git a/index.html b/index.html index ef4ba1b1..8a8541fb 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@
    - +
    wacth
    @@ -99,7 +99,7 @@

    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.

    - +
    From 2274abdfde227daf1b5baba21d456d6ffac8f421 Mon Sep 17 00:00:00 2001 From: LeslyN Date: Thu, 2 Nov 2017 00:58:31 -0500 Subject: [PATCH 09/16] =?UTF-8?q?Segunda=20secci=C3=B3n=20completada?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/main.css | 120 +++++++++++++++++++++++++++++++++++++-------------- index.html | 22 +++++----- 2 files changed, 98 insertions(+), 44 deletions(-) diff --git a/css/main.css b/css/main.css index 25e08b83..ab9b9ae0 100644 --- a/css/main.css +++ b/css/main.css @@ -2,7 +2,7 @@ * { box-sizing: border-box; padding: 0; - margin:0; + margin:0; } body { @@ -21,29 +21,30 @@ a { color: #fff; } /*verificar si lo necesitaré de verdad*/ -/*.right { +.right { float: right; } .left { float: left; -}*/ +} + +/*CLASES ESPECÍFICAS*/ li { list-style: none; - display: inline-block; } -/*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; + height: 100%; width: 100%; - height: 100vh; } nav, header button { @@ -53,69 +54,70 @@ nav, header button { /* Logo */ .logo-container { - width: 500px; - height: 500px; padding: 30px; + height: 500px; + width: 500px; } .logo { + margin-left: 30px; width: 10%; - margin-left: 30px; } /* Menú */ .menu { right: 90px; - position: absolute; padding: 30px; + position: absolute; } .list { + display: inline-block; padding: 15px; } .btn-list { - padding: 10px; - border-radius: 5px; - border: 1px solid #d8dce6; background-color: transparent; + border: 1px solid #d8dce6; + border-radius: 5px; font-size: 18px; + padding: 10px; } /*Primera sección*/ #section-one { - width: 100%; margin-top: 110px; + width: 100%; } .text-box{ background-color: #fff; + margin-left: 865px; + max-height: 355px; padding: 60px; - margin-left: 870px; - min-height: 60vh; } -.text-color, .text-h3 { +.text-color, .text-h3, .signup { color: #352384; - margin-top: -25px; + margin-top: -15px; } .text-h3 { font-size: 15px; letter-spacing: 1.5px; - margin-top: 10px; + line-height: 15px; + margin-top: 15px; margin-bottom: 0; - font-weight: 800; } /* Caja para Phone number */ .info-input { border: none; border-bottom: 1px solid #352384; - font-size: 16px; color: #cbd2e0; - padding-top: 20px; + font-size: 16px; padding-bottom: 10px; + padding-top: 30px; outline: none; width: 100%; } @@ -123,31 +125,83 @@ nav, header button { /* Boton del formulario de la derecha - section one */ .btn { background-color: #ff00bf; + padding: 5px; border: 1px solid #ff00bf; border-radius: 5px; - padding: 10px; - font-size: 16px; float: left; - margin-top: 20px; + font-size: 16px; + margin-top: 30px; position: absolute; - width: 140px; height: 50px; + width: 140px; } .signup { float: right; - margin-top: 30px; - right: 100px; + margin-top: 40px; + text-decoration: underline; +} + +.article-p, .article-p-2 { + font-size: 9px; +} + +.article-p { + padding-top: 100px; +} + +.article-p-2 { + padding-bottom: 0px; + padding-top: 10px; } + /*Segunda sección*/ #section-two { - background-image: linear-gradient(#74268e, #2B1E66); + background-image: -webkit-linear-gradient(#6f268b, #2B1E66); + background-image: -o-linear-gradient(#6f268b, #2B1E66); + background-image: linear-gradient(#6f268b, #2B1E66); + border-top-color: transparent; + margin-top: 555px; + border-top-style: hidden; + position: absolute; width: 100%; - height: 100vh -}; +} -/*Segunda sección*/ +.container-section-two{ + height: 100%; + margin-top: 60px; +} + +.box-one, .box-two, .box-three, .phone-section-two { + margin-top: 40px; + margin-left: 150px; +} + +.box-one, .box-two { + width: 50% +} + +.box-three { + width: 60%; +} + +.box-p { + font-size: 12px; + 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*/ diff --git a/index.html b/index.html index 8a8541fb..4e66e198 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@
    -
    +
    apple store
    @@ -151,15 +151,14 @@

    learn

    © 2017 Lyft, Inc.TermsPrivacy
    - From 0672e918ee9db2903c946783c5d346354153871a Mon Sep 17 00:00:00 2001 From: LeslyN Date: Thu, 2 Nov 2017 04:37:46 -0500 Subject: [PATCH 12/16] actualizando footer con hover y README --- README.md | 98 ++++++++++------------------------------------------ css/main.css | 11 ++++++ index.html | 31 +++++++++-------- 3 files changed, 45 insertions(+), 95 deletions(-) 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/css/main.css b/css/main.css index d30c6c6c..f4e76d1c 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,6 @@ +/* + * Estilos de tu proyecto + */ /*CLASES REUTILIZABLES*/ * { box-sizing: border-box; @@ -301,6 +304,14 @@ footer { width: 100%; } +.title-login:hover, .title-partner:hover, .title-learn:hover { + text-decoration: underline #fff; +} + +.list-hover:hover { + color: #ff00bf; +} + footer div h4 a { color: #fff; } diff --git a/index.html b/index.html index 42bafd72..33e9955b 100644 --- a/index.html +++ b/index.html @@ -105,32 +105,32 @@

    a good thing going

    +
    © 2017 Lyft, Inc.TermsPrivacy
    From 6dce43386216cd5b1bb9f6d7a19ab1e0352a0082 Mon Sep 17 00:00:00 2001 From: LizbethFP Date: Sat, 4 Nov 2017 16:57:52 -0500 Subject: [PATCH 13/16] =?UTF-8?q?agregando=20carpeta=20de=20=C3=ADconos=20?= =?UTF-8?q?en=20assets?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/icons/icomoon/fonts/icomoon.eot | Bin 0 -> 2108 bytes assets/icons/icomoon/fonts/icomoon.svg | 13 +++++++++ assets/icons/icomoon/fonts/icomoon.ttf | Bin 0 -> 1944 bytes assets/icons/icomoon/fonts/icomoon.woff | Bin 0 -> 2020 bytes assets/icons/icomoon/style.css | 35 ++++++++++++++++++++++++ 5 files changed, 48 insertions(+) create mode 100644 assets/icons/icomoon/fonts/icomoon.eot create mode 100644 assets/icons/icomoon/fonts/icomoon.svg create mode 100644 assets/icons/icomoon/fonts/icomoon.ttf create mode 100644 assets/icons/icomoon/fonts/icomoon.woff create mode 100644 assets/icons/icomoon/style.css diff --git a/assets/icons/icomoon/fonts/icomoon.eot b/assets/icons/icomoon/fonts/icomoon.eot new file mode 100644 index 0000000000000000000000000000000000000000..006cab0201ab6ed42c001ebf785e405c11ea8858 GIT binary patch literal 2108 zcmah~O>7%Q6n?X7dt=ADjvcR)xSP}@&N^;f)`DS-ZY&XE{%+B}TeDmI$ zot=5}Jwy*BB1Qsr7Dfk*YnE?z>N(dcw~z9-y2pqV+MqS6Qx&aFH4qe9p%Rs8hc>A| zThN4P6`C#D2A6XpG(|~DncVK#P;!U8v`-?XZoKpIv@am#pm~axU#k`xls6Cu(;yei zh3y9VKFIs%d&--8>mwhm{s#GDBGIUn3Ps;?;|n6^62`L?D5N9t8_1j=tyG)40n?%L zF=TDCzE)rd!YddzAoo=ZyA6`*Tgcx-j?@a((xYqcKOz4LA0IX9+fBrYBJJ{V62*OX zKu#jzk?`dMwN+iC+g+I?^$BZe8iHa&ip**TMT!u=l| zqn06J2WS8W)0weRNnw&}n2o7vKc3mK%uH6uA08&-@dbZif8RKa82us{0slfgp3EE1 zum~eB_ah#BP1tI|))L*P&*@A03O1)h10$@xszDd`(N@Ps^;nX%S2&$rWbHMb8SS2? z2D?qCr@N}O@yCnd zTA@FC%M2QUv!_4I1KX@mZ{d4ktH+NN!DU1u)IL!nKD0&RLY60{2 zIN4x5149nd79uaDyk}pFYB$eM#`L*9zbL%Auvkl_VzMuNZfHs^EXkVB)9(r1dn5bd zHF?N8rt5D{P9{F9Hy*}f>}*CAew6)U|NM9$ER96_{BydV@D6%Kzke z;$@62Hx-8{u*DVOTuNY}fPYYOWoMtfcdsJJQfM|}on!u{Tlu5g@A~F{r(TCC|1c05 z;lS!!2EK>^k>46t!5KI2AY3TC;C*uHErw)`SOTBs0EO%R(R(OJBlJ3}u%FD?5`E3j zG0Jl_nzeZR~>nO&fbCOrP+(&EbYd!H9(g z;IfTH-~}5yfZw;V6A249xjEMb{fdn}G((R!*6P)Iz1EraR!dvk8}(XbDw#Sx)tx%) zROL#kyt7%@>dc|1GB4L_%}BXaD{U2;rDEjnUgYXp{W@Yx(q%KvHnEB_5^v2+z6ENc ZFG6>h_VB)HrtRx?+D_uD^K9}T^;A$tG- literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..64962423441c679762d930e61d649526493baf66 GIT binary patch literal 1944 zcmah~O>7%Q6n?X7dt=ADjyGN>aW|=nops!}#))Hxs7-1Lv}tK61SyA73A?dlhsHlj z94V2I$OVMB5PGQSt%n{f?w}r4J@6xO;KUIjaSInD!~r2{zS-T9O&Y}P{Cw}toAR=pzyoa%`zOlPD_QA^U zkUu68%|@+K4PEPeN#tF^e6azA^hEp?GPh4Qn%y0hctGz%boxenwZis=mmr&v2bz_g z4$1T#wGE_k9yJA9r*agXhjmq@rTd=Jg1_Q-yvJo9rq zS7D%iw3LVr?ulm4q>_k+NlxuqiCch2<4wn$J&Kl>u1cxYzr; z*Rxi-W!C#e>uOtC2R_^}xFI8k6(N^iAex)E%noh;N5`mVir4`fg2Q|vF)k@g@{O{D zmJj2ZOB7~{LixdiY&yLVR`>SI2XS*yBvTD9q|@25`4mZ*WqA;M@HXMA2VYBcm%gB{ z=xg|#i4Ki1chw?39>Y}=<3=jW+!aCR7MZ)|3**O^X_4cu^E1bn6=sjSPE2cdj#`AX zisol{m||g;$2Y`r1F`cnQLtnYADG#qK=ljhiHxG2Qe;)~_6tlv?e|KmtejGn%tZP^ zeXYbT!n&+*3nnnsqZW;e>GZkbSVq(IKp+SY@DdCJbWO{|hR>zb7aO+4NG1vkzij)E z{cek5F1HlXw8&B}S9Igc)#_z5)|ZTpB$Fetq*#S_E559&a>ke}f#IZ)k=5rIDzYBt zIh5AwrAc>|0=xAe6zwGZvYo_HicS(|d775RpU=~^sXu+gA`Rl~vCTT^oFxy5CAt9t z-wE~yeU>>NC*OB#SB;dyxPXn*Eug@}NMToPV0|8k8*CKd$V2)<{DoZb^eajI&9hS} zV}2kk3NJ4#wsN_Y9Lk>=nbs;xvK|Ty1|oM}D}H!Y9tkE4H6L&eeJtx=`~8DrPFiboXK;<9iiC$Oj*9+rH? zxkvBaX-KjZor~M&nD=zE{N$Z?L+AgXevc*pI20Y@z#e-h-iQg2-x_wo8Mp2rTqwMt zKRoreg=Ejz0$=8V3D^Cr4^V{0=vCHWKU=FM`i7rllxI;a!RZv7YC8ra2|61Kz-0%E zz(ogpfVUm&#h*fRun+pz9UPz-eZucHj~^NZGd320>kbxy7aZ&Xe&4}fiV|*eYpoCZ zWd{dnmL9IJwwvvCi`HqC+SEjAQ){KRxwYPI#iz45TA>f0NYO$4oh=r(Oog*H#Lywq-W)@89OIGYIqSxW3WihHy b7h@H=+q8@Rij}~1I{|RC|0?cXIfnlM^0W~E literal 0 HcmV?d00001 diff --git a/assets/icons/icomoon/fonts/icomoon.woff b/assets/icons/icomoon/fonts/icomoon.woff new file mode 100644 index 0000000000000000000000000000000000000000..b556478cb0751547e97266b229db4dbd7acb403d GIT binary patch literal 2020 zcma)7O>7%Q6n?X7duzwLjyGN>aX0A_JL|Y{jT6TXQIpgZNYm012vQEE5_V(94vp<7 zaYQ2_kqaES5Gqu)w;p;#+(8^x72-$Yh&Uo7IE4!m;(!n}-|Q}}^Mk~A-pu#DdGmf| zcGqt&Ei4ctH0c-WvFCeyJgF_c{_G?XJB76pmyjwIR~zL`aCPVvTT0gTT6vpu-$CcL zTzYF8yKCUSClW0#!|$&AUayw1$NMqX3tU21H$SU`1jqL#xJZx0Z|aTqZE(Lq*SV-j zc%!unJ6{lbFBi5iJl81SMqD4aF>I0P+h(~@1viV>?{m3-#sAl4YrBnlzkFgR0*T@t z+b1uPa9`ljKXhjHE9ICUdUsOb`&5TYaHts`N`|# zp+(FJPD&sjIOAad;LgF_&flF5csiuB&d*v~+txPS-L`={Fk;vdvb{Q#Kr}tWgZzJv zQO6SbE%jqlE*~F}6ejtGSX|46@tcn4rwT&p!GlaHH5XR*_N)hn)hCjrhUZeLOv!qT zBCL|!hnP4``0BvdBHf`+>2vxDJ}0C7!>qe&5g(7y)#D>(GQ+w%f=4v%DUO(kotumzOBV4VGe;Gub|E#IR@Bpq ztV-Sly78q-2Jf5zT z`r}vZq>(uL!pRz+0s8^=kXWQ8D0ohAKNvI2eK`5O+qY^a6~+}@oNfaJCT0@1>Hz!k zczVHR9*#Vu&l%5TgJ)hy=&zm|Pnt8mVNrN~ZoZk#Cgo7>?BIk}UX=Avpf3=)^-|%z zEAn74Zkn%+kEcIsZQe^J*_pg1{3wUTzS&VVCJiTg!!xFt4h{sxaCjz}%=QsDQorRcQL^{!qoJ$mEK(Ci=7tOs zI(ICbhy|U0HJpZXvcEz2pzwy#J~?O69wleRVfZ!=OgQ(14^V`L=|xs&KiRt_`kKGT zX#YmB6?ahZRy#2mN#GnT0GC`W0vBBD0p4-37ymYzi+$i;t;0Y8})O#lD@ literal 0 HcmV?d00001 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"; +} From 1acd1f56d573ace40d96cfd73b7ad441cee844d5 Mon Sep 17 00:00:00 2001 From: LizbethFP Date: Sat, 4 Nov 2017 20:46:24 -0500 Subject: [PATCH 14/16] =?UTF-8?q?corrigiendo=20detalles=20en=20CSS=20con?= =?UTF-8?q?=20%=20y=20ordenandolo=20alfab=C3=A9ticamente?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/main.css | 134 +++++++++++++++++++++++++++++---------------------- index.html | 6 +-- 2 files changed, 80 insertions(+), 60 deletions(-) diff --git a/css/main.css b/css/main.css index f4e76d1c..32ef87ff 100644 --- a/css/main.css +++ b/css/main.css @@ -1,15 +1,12 @@ -/* - * Estilos de tu proyecto - */ /*CLASES REUTILIZABLES*/ * { box-sizing: border-box; padding: 0; - margin:0; + margin:0; } body { -font-family: 'Montserrat', sans-serif; + font-family: 'Montserrat', sans-serif; } a { @@ -22,7 +19,7 @@ a { .text-white { color: #fff; -} /*verificar si lo necesitaré de verdad*/ +} .right { float: right; @@ -32,12 +29,12 @@ a { float: left; } -/*CLASES ESPECÍFICAS*/ - li { list-style: none; } +/*CLASES ESPECÍFICAS*/ + /*Encabezado*/ .image-hero{ background: url(../assets/images/hero.gif) 0px -98px; @@ -46,7 +43,6 @@ li { border-bottom-color: transparent; border-bottom-style: hidden; position: absolute; - height: 100%; width: 100%; } @@ -57,13 +53,13 @@ nav, header button { /* Logo */ .logo-container { - padding: 30px; height: 500px; + padding: 30px; width: 500px; } .logo { - margin-left: 30px; + margin-left: 30px; width: 10%; } @@ -90,14 +86,22 @@ nav, header button { /*Primera sección*/ #section-one { margin-top: 110px; + height: 67vh; /*revisar*/ width: 100%; } .text-box{ background-color: #fff; - margin-left: 865px; - max-height: 355px; + 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 { @@ -106,13 +110,15 @@ nav, header button { } .text-h3 { - font-size: 15px; + 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; @@ -133,20 +139,26 @@ nav, header button { border-radius: 5px; float: left; font-size: 16px; + height: 50px; margin-top: 30px; position: absolute; - height: 50px; - width: 140px; + width: 9%; +} + +input.btn.text-white { + font-weight: bold; } .signup { - float: right; margin-top: 40px; + margin-left: 200px; + position: absolute; text-decoration: underline; } .article-p, .article-p-2 { - font-size: 9px; + font-size: 10px; + line-height: 14px; } .article-p { @@ -165,20 +177,20 @@ nav, header button { background-image: -o-linear-gradient(#6f268b, #2B1E66); background-image: linear-gradient(#6f268b, #2B1E66); border-top-color: transparent; - margin-top: 555px; - border-top-style: hidden; + border-top-style: hidden; + margin-top: 39%; position: absolute; width: 100%; } -.container-section-two{ +.container-section-two { height: 100%; margin-top: 60px; } .box-one, .box-two, .box-three, .phone-section-two { - margin-top: 40px; margin-left: 150px; + margin-top: 40px; } .box-one, .box-two { @@ -189,8 +201,12 @@ nav, header button { width: 60%; } +.box-one h1, .box-two h1, .box-three h1 { + font-size: 28px; +} + .box-p { - font-size: 12px; + font-size: 16px; padding-top: 10px; } @@ -209,15 +225,15 @@ nav, header button { /*Tercera sección*/ #section-three { - margin-top: 60%; - position: absolute; + margin-top: 50.4%; + position: absolute; width: 100%; } .text-box-section-three { + margin-left: 5%; margin-top: 400px; position: absolute; - margin-left: 50px; width: 25%; } @@ -226,8 +242,8 @@ nav, header button { } .watch-a { - font-size: 8px; color: #000; + font-size: 8px; } .title-h2 { @@ -235,27 +251,28 @@ nav, header button { } .title-h2-p { - line-height: 20px; + line-height: 24px; + width: 70%; } .box-video { - display: block; + display: block; + height: 500px; left: 35%; margin-top: 323px; position: absolute; - height: 380px; width: 65%; } /*Cuarta sección*/ #section-four { - margin-top: 100%; - position: absolute; + margin-top: 83.7%; + position: absolute; width: 100%; } .text-box-section-four { - margin-left: 50px; + margin-left: 5%; position: absolute; right: 50px; top: 250px; @@ -263,34 +280,35 @@ nav, header button { } .box-video-four { - display: block; + display: block; + height: 500px; margin-top: 188px; margin-right: 25px; position: absolute; - height: 380px; width: 65%; } /*Quinta sección*/ #section-five { - margin-top: 75%; - position: absolute; + height: 100vh; + margin-top: 73%; + position: absolute; width: 100%; } .text-box-section-five { margin-top: 930px; + margin-left: 5%; position: absolute; - margin-left: 50px; width: 25%; } .box-video-five { - display: block; + display: block; + height: 500px; left: 35%; margin-top: 890px; position: absolute; - height: 380px; width: 65%; } @@ -300,10 +318,16 @@ footer { color: #fff; padding: 1%; position: absolute; - top: 342%; + 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; } @@ -323,7 +347,11 @@ footer div ul li a { .login, .partner, .learn { display: inline-block; - margin: 2% 5% 2%; + margin: 2% 7% 2%; +} + +.learn { + vertical-align: top; } .login ul, .partner ul, .learn ul { @@ -331,14 +359,14 @@ footer div ul li a { } .app-stores { - width: 20%; - margin: 2% 3% 2% 7%; display: inline-block; + margin: 2% 3% 2% 13%; + width: 20%; } .ban { - width: 100%; padding: 5%; + width: 100%; } .ban img { @@ -359,31 +387,23 @@ footer div ul li a { .base { text-align: center; - width: 60%; margin: 2% 19% 2%; + width: 60%; } .social-network { - width: 100%; height: 5%; + width: 100%; } .icon-facebook, .icon-instagram, .icon-twitter { border: 1px solid #fff; border-radius: 30px; - padding: 10px; display: inline-block; - margin: 10px; + margin: 30px; + padding: 10px; } -/*footer div ul li a i.icon-facebook, footer div ul li a i.icon-instagram, footer div ul li a i.icon-twitter { - font-size: 20px; -}*/ - hr { margin-bottom: 5%; } - -/*div.base span { - margin-top: 10%; -}*/ diff --git a/index.html b/index.html index 33e9955b..3f933b68 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@