diff --git a/README.md b/README.md index deafa8b7..75772721 100644 --- a/README.md +++ b/README.md @@ -1,92 +1,27 @@ # Lyft -* **Track:** _Common Core_ -* **Curso:** _Creando tu primer sitio web interactivo_ -* **Unidad:** _Maquetado web con HTML & CSS_ - +##Estructura de la página. +![Lyft estructure](assets/images/lyft-structure.png) *** +## Previo al código -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. - -## Flujo de trabajo - -1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74) - de este repositorio. - -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í: - - ```bash - git clone https://github.com//lyft.git - ``` - -## Objetivo - -El reto consiste en replicar el sitio de **Lyft**, este será el resultado -a lograr: - -![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). +1. Realizar un [**Repositorio en GitHub**](https://github.com/RosyG/lyft-v3) -* En la carpeta `css` tendrás un archivo base `main.css` donde agregarás los - estilos necesarios para tu proyecto: +2. Subir la estructura de carpetas con el comando `git add .`, `git commit -m "comentario"` y `git push origin master` -* 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: + ## Links de videos utilizados: + - 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. + * https://www.youtube.com/watch?v=gZjVSuVBiYs&feature=youtu.be + - Para agregar los videos, se obtuvo por medio del proveedor YouTube al buscar la etiqueta `iframe` que se puede obtener dando clic en `compartir` y después en `insertar`. - > 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 ;) + ## Herramientas tecnológicas utilizadas: -## A tener en cuenta + * [jQuery](http://jquery.com/download/) + * [materialize](http://materializecss.com/) + * [Icomoon](https://icomoon.io/) -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 +# Desarrollado para [Laboratoria](http://www.laboratoria.la/) diff --git a/assets/icomoon/Read Me.txt b/assets/icomoon/Read Me.txt new file mode 100644 index 00000000..8491652f --- /dev/null +++ b/assets/icomoon/Read Me.txt @@ -0,0 +1,7 @@ +Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. + +To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts + +You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. + +You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection. diff --git a/assets/icomoon/demo-files/demo.css b/assets/icomoon/demo-files/demo.css new file mode 100644 index 00000000..900facec --- /dev/null +++ b/assets/icomoon/demo-files/demo.css @@ -0,0 +1,152 @@ +body { + padding: 0; + margin: 0; + font-family: sans-serif; + font-size: 1em; + line-height: 1.5; + color: #555; + background: #fff; +} +h1 { + font-size: 1.5em; + font-weight: normal; +} +small { + font-size: .66666667em; +} +a { + color: #e74c3c; + text-decoration: none; +} +a:hover, a:focus { + box-shadow: 0 1px #e74c3c; +} +.bshadow0, input { + box-shadow: inset 0 -2px #e7e7e7; +} +input:hover { + box-shadow: inset 0 -2px #ccc; +} +input, fieldset { + font-family: sans-serif; + font-size: 1em; + margin: 0; + padding: 0; + border: 0; +} +input { + color: inherit; + line-height: 1.5; + height: 1.5em; + padding: .25em 0; +} +input:focus { + outline: none; + box-shadow: inset 0 -2px #449fdb; +} +.glyph { + font-size: 16px; + width: 15em; + padding-bottom: 1em; + margin-right: 4em; + margin-bottom: 1em; + float: left; + overflow: hidden; +} +.liga { + width: 80%; + width: calc(100% - 2.5em); +} +.talign-right { + text-align: right; +} +.talign-center { + text-align: center; +} +.bgc1 { + background: #f1f1f1; +} +.fgc1 { + color: #999; +} +.fgc0 { + color: #000; +} +p { + margin-top: 1em; + margin-bottom: 1em; +} +.mvm { + margin-top: .75em; + margin-bottom: .75em; +} +.mtn { + margin-top: 0; +} +.mtl, .mal { + margin-top: 1.5em; +} +.mbl, .mal { + margin-bottom: 1.5em; +} +.mal, .mhl { + margin-left: 1.5em; + margin-right: 1.5em; +} +.mhmm { + margin-left: 1em; + margin-right: 1em; +} +.mls { + margin-left: .25em; +} +.ptl { + padding-top: 1.5em; +} +.pbs, .pvs { + padding-bottom: .25em; +} +.pvs, .pts { + padding-top: .25em; +} +.unit { + float: left; +} +.unitRight { + float: right; +} +.size1of2 { + width: 50%; +} +.size1of1 { + width: 100%; +} +.clearfix:before, .clearfix:after { + content: " "; + display: table; +} +.clearfix:after { + clear: both; +} +.hidden-true { + display: none; +} +.textbox0 { + width: 3em; + background: #f1f1f1; + padding: .25em .5em; + line-height: 1.5; + height: 1.5em; +} +#testDrive { + display: block; + padding-top: 24px; + line-height: 1.5; +} +.fs0 { + font-size: 16px; +} +.fs1 { + font-size: 28px; +} + diff --git a/assets/icomoon/demo-files/demo.js b/assets/icomoon/demo-files/demo.js new file mode 100644 index 00000000..6f45f1c4 --- /dev/null +++ b/assets/icomoon/demo-files/demo.js @@ -0,0 +1,30 @@ +if (!('boxShadow' in document.body.style)) { + document.body.setAttribute('class', 'noBoxShadow'); +} + +document.body.addEventListener("click", function(e) { + var target = e.target; + if (target.tagName === "INPUT" && + target.getAttribute('class').indexOf('liga') === -1) { + target.select(); + } +}); + +(function() { + var fontSize = document.getElementById('fontSize'), + testDrive = document.getElementById('testDrive'), + testText = document.getElementById('testText'); + function updateTest() { + testDrive.innerHTML = testText.value || String.fromCharCode(160); + if (window.icomoonLiga) { + window.icomoonLiga(testDrive); + } + } + function updateSize() { + testDrive.style.fontSize = fontSize.value + 'px'; + } + fontSize.addEventListener('change', updateSize, false); + testText.addEventListener('input', updateTest, false); + testText.addEventListener('change', updateTest, false); + updateSize(); +}()); diff --git a/assets/icomoon/demo.html b/assets/icomoon/demo.html new file mode 100644 index 00000000..b94148f9 --- /dev/null +++ b/assets/icomoon/demo.html @@ -0,0 +1,118 @@ + + + + + IcoMoon Demo + + + + + +
+

Font Name: icomoon (Glyphs: 4)

+
+
+

Grid Size: 14

+
+
+ + + + icon-camera-retro +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-twitter +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-facebook +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-facebook-f +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-copyright +
+
+ + +
+
+ liga: + +
+
+
+ + +
+

Font Test Drive

+ + +
  +
+
+ +
+

Generated by IcoMoon

+
+ + + + diff --git a/assets/icomoon/fonts/icomoon.eot b/assets/icomoon/fonts/icomoon.eot new file mode 100644 index 00000000..23967413 Binary files /dev/null and b/assets/icomoon/fonts/icomoon.eot differ diff --git a/assets/icomoon/fonts/icomoon.svg b/assets/icomoon/fonts/icomoon.svg new file mode 100644 index 00000000..81790872 --- /dev/null +++ b/assets/icomoon/fonts/icomoon.svg @@ -0,0 +1,14 @@ + + + +Generated by IcoMoon + + + + + + + + + + \ No newline at end of file diff --git a/assets/icomoon/fonts/icomoon.ttf b/assets/icomoon/fonts/icomoon.ttf new file mode 100644 index 00000000..3926ecab Binary files /dev/null and b/assets/icomoon/fonts/icomoon.ttf differ diff --git a/assets/icomoon/fonts/icomoon.woff b/assets/icomoon/fonts/icomoon.woff new file mode 100644 index 00000000..bf529da6 Binary files /dev/null and b/assets/icomoon/fonts/icomoon.woff differ diff --git a/assets/icomoon/selection.json b/assets/icomoon/selection.json new file mode 100644 index 00000000..85bb1fec --- /dev/null +++ b/assets/icomoon/selection.json @@ -0,0 +1,151 @@ +{ + "IcoMoonType": "selection", + "icons": [ + { + "icon": { + "paths": [ + "M530.286 475.429c0-10.286-8-18.286-18.286-18.286-50.286 0-91.429 41.143-91.429 91.429 0 10.286 8 18.286 18.286 18.286s18.286-8 18.286-18.286c0-30.286 24.571-54.857 54.857-54.857 10.286 0 18.286-8 18.286-18.286zM658.286 549.714c0 80.571-65.714 146.286-146.286 146.286s-146.286-65.714-146.286-146.286 65.714-146.286 146.286-146.286 146.286 65.714 146.286 146.286zM73.143 877.714h877.714v-73.143h-877.714v73.143zM731.429 549.714c0-121.143-98.286-219.429-219.429-219.429s-219.429 98.286-219.429 219.429 98.286 219.429 219.429 219.429 219.429-98.286 219.429-219.429zM146.286 182.857h219.429v-73.143h-219.429v73.143zM73.143 292.571h877.714v-146.286h-473.143l-36.571 73.143h-368v73.143zM1024 146.286v731.429c0 40.571-32.571 73.143-73.143 73.143h-877.714c-40.571 0-73.143-32.571-73.143-73.143v-731.429c0-40.571 32.571-73.143 73.143-73.143h877.714c40.571 0 73.143 32.571 73.143 73.143z" + ], + "width": 1024, + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "camera-retro" + ], + "defaultCode": 61571, + "grid": 14 + }, + "attrs": [], + "properties": { + "name": "camera-retro", + "id": 124, + "order": 28, + "prevSize": 28, + "code": 61571 + }, + "setIdx": 2, + "setId": 0, + "iconIdx": 124 + }, + { + "icon": { + "paths": [ + "M925.714 233.143c-25.143 36.571-56.571 69.143-92.571 95.429 0.571 8 0.571 16 0.571 24 0 244-185.714 525.143-525.143 525.143-104.571 0-201.714-30.286-283.429-82.857 14.857 1.714 29.143 2.286 44.571 2.286 86.286 0 165.714-29.143 229.143-78.857-81.143-1.714-149.143-54.857-172.571-128 11.429 1.714 22.857 2.857 34.857 2.857 16.571 0 33.143-2.286 48.571-6.286-84.571-17.143-148-91.429-148-181.143v-2.286c24.571 13.714 53.143 22.286 83.429 23.429-49.714-33.143-82.286-89.714-82.286-153.714 0-34.286 9.143-65.714 25.143-93.143 90.857 112 227.429 185.143 380.571 193.143-2.857-13.714-4.571-28-4.571-42.286 0-101.714 82.286-184.571 184.571-184.571 53.143 0 101.143 22.286 134.857 58.286 41.714-8 81.714-23.429 117.143-44.571-13.714 42.857-42.857 78.857-81.143 101.714 37.143-4 73.143-14.286 106.286-28.571z" + ], + "width": 950.8571428571428, + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "twitter" + ], + "defaultCode": 61593, + "grid": 14 + }, + "attrs": [], + "properties": { + "name": "twitter", + "id": 145, + "order": 27, + "prevSize": 28, + "code": 61593 + }, + "setIdx": 2, + "setId": 0, + "iconIdx": 145 + }, + { + "icon": { + "paths": [ + "M548 6.857v150.857h-89.714c-70.286 0-83.429 33.714-83.429 82.286v108h167.429l-22.286 169.143h-145.143v433.714h-174.857v-433.714h-145.714v-169.143h145.714v-124.571c0-144.571 88.571-223.429 217.714-223.429 61.714 0 114.857 4.571 130.286 6.857z" + ], + "width": 602.2582857142856, + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "facebook", + "facebook-f" + ], + "defaultCode": 61594, + "grid": 14 + }, + "attrs": [], + "properties": { + "name": "facebook, facebook-f", + "id": 146, + "order": 26, + "prevSize": 28, + "code": 61594 + }, + "setIdx": 2, + "setId": 0, + "iconIdx": 146 + }, + { + "icon": { + "paths": [ + "M657.143 613.714v62.286c0 80.571-128.571 110.286-209.143 110.286-156.571 0-274.286-119.429-274.286-277.143 0-154.857 116.571-271.429 271.429-271.429 56.571 0 204.571 20 204.571 110.857v62.286c0 5.143-4 9.143-9.143 9.143h-67.429c-5.143 0-9.143-4-9.143-9.143v-40c0-36-69.143-52.571-116-52.571-106.857 0-181.143 77.143-181.143 188 0 114.857 77.714 198.857 185.714 198.857 41.143 0 118.857-15.429 118.857-51.429v-40c0-5.143 4-9.143 8.571-9.143h68c4.571 0 9.143 4 9.143 9.143zM438.857 146.286c-201.714 0-365.714 164-365.714 365.714s164 365.714 365.714 365.714 365.714-164 365.714-365.714-164-365.714-365.714-365.714zM877.714 512c0 242.286-196.571 438.857-438.857 438.857s-438.857-196.571-438.857-438.857 196.571-438.857 438.857-438.857v0c242.286 0 438.857 196.571 438.857 438.857z" + ], + "width": 877.7142857142857, + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "copyright" + ], + "defaultCode": 61945, + "grid": 14 + }, + "attrs": [], + "properties": { + "name": "copyright", + "id": 460, + "order": 25, + "prevSize": 28, + "code": 61945 + }, + "setIdx": 2, + "setId": 0, + "iconIdx": 460 + } + ], + "height": 1024, + "metadata": { + "name": "icomoon" + }, + "preferences": { + "showGlyphs": true, + "showCodes": true, + "showQuickUse": true, + "showQuickUse2": true, + "showSVGs": true, + "fontPref": { + "prefix": "icon-", + "metadata": { + "fontFamily": "icomoon", + "majorVersion": 1, + "minorVersion": 0 + }, + "metrics": { + "emSize": 1024, + "baseline": 6.25, + "whitespace": 50 + }, + "embed": false + }, + "imagePref": { + "prefix": "icon-", + "png": true, + "useClassSelector": true, + "color": 0, + "bgColor": 16777215, + "classSelector": ".icon", + "height": 32, + "columns": 16, + "margin": 16 + }, + "historySize": 50 + } +} \ No newline at end of file diff --git a/assets/icomoon/style.css b/assets/icomoon/style.css new file mode 100644 index 00000000..840f84e2 --- /dev/null +++ b/assets/icomoon/style.css @@ -0,0 +1,41 @@ +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot?yacsm2'); + src: url('fonts/icomoon.eot?yacsm2#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?yacsm2') format('truetype'), + url('fonts/icomoon.woff?yacsm2') format('woff'), + url('fonts/icomoon.svg?yacsm2#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-camera-retro:before { + content: "\f083"; +} +.icon-twitter:before { + content: "\f099"; +} +.icon-facebook:before { + content: "\f09a"; +} +.icon-facebook-f:before { + content: "\f09a"; +} +.icon-copyright:before { + content: "\f1f9"; +} diff --git a/assets/images/lyft-structure.png b/assets/images/lyft-structure.png new file mode 100644 index 00000000..001107ad Binary files /dev/null and b/assets/images/lyft-structure.png differ diff --git a/css/main.css b/css/main.css index 839fb7d0..c92d8d80 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,132 @@ -/* - * Estilos de tu proyecto - */ \ No newline at end of file + body { + font-family: 'Montserrat', sans-serif; + } + + input[type=text] { + color: #D3D3D3; + border: none; + border-bottom: 1px solid #9289BD; + font-size: 75%; + padding: 10px 408px 10px 1px; + } + #about { + background-color: #71268C; + box-sizing: border-box; + } + #about > section > section > h1 { + font-size: large; + } +#back-menu > img { + float: left; + height: 45px; + width: 70px; + margin-top: 3%; + margin-left: 5%; +} +#back-menu > section > a { + margin-right: 8%; +} +.border-sing:hover, #bottom-become:hover { + background-color: white; + color: #FF00BF; +} +#external_links { + background-color: #333447; + color: white; + margin-bottom: 0; +} +iframe { + height: 460px; +} +.border-bottom { + border: 2px solid white; + padding: 10px; + border-radius: 15%; +} +.foot { + color: white; + background-color: #333447; + height: auto; + padding: 2em; +} +.mt-0 { + margin-top: : 0; +} +#text-white { + display: inline-block; + padding: 3em; + vertical-align: top; +} +.text-about { + color: white; + display: inline-block; + margin-top: 50px; + padding-left: 10%; + vertical-align: top; +} +.white-letter { + color: white; + margin-top: 3%; + margin-right: 5%; + width: 30%; +} +#nav { + background-color: rgba(38,21,69,0.3); +} +.brand-logo { + width: 80%; + margin: 0.1em 1em; +} +.img-logo { + width: 8%; +} +.container-nav { + background-color: #27193F; +} +#nav-mobile > li > a { + font-size: 1.125rem; +} +.border-sing { + border: 1px solid currentColor; + border-radius: .5rem; + padding: 0.5em 1em; +} +#img-intro { + width: 97%; + height: auto; +} +#bottom-become { + background: #FF00Bf; + border: 2px solid #FF00BF; + border-radius: 5px; + color: white; + margin-top: 25px; + margin-right: 180px; + padding: 1em .75rem; +} +.mb-60 { + margin-bottom: 60px; +} +.mb-0 { + margin-bottom: 0; +} +.logo-google { + margin-top: 0.5em; + width: 60%; +} +.mb-5 { + margin-bottom: 5em; +} + +span[class^='icon-'] { + border: 1px solid white; + border-radius: 50%; + padding: 1em; + margin: 0 0.25em; +} +.watch { + color: #FF00BF; +} +.letter-form { + color: #352384; +} diff --git a/docs/body-lyft.png b/docs/body-lyft.png new file mode 100644 index 00000000..6b63c4e6 Binary files /dev/null and b/docs/body-lyft.png differ diff --git a/index.html b/index.html index 67324f35..851dad03 100644 --- a/index.html +++ b/index.html @@ -1 +1,227 @@ - + + + + + A ride whenever you need one - Lyft + + + + + + + + + + + + + + + + + +
+ +
+ +
+ + +
+
+ imagen hero +
+ +
+

TURN MILES
INTO MONEY

+

SING UP TO DRIVE WITH LYFT

+ + +
+ Become a drive +
+
+
+ +
+ +
+ +
+

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.
+
+ +
+ + image 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 passengers and drivers to find each other.

+
+ + +
+ +
+ +
+ WATCH +

JUNE

+

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

+
+
+ + +
+ +
+ WATCH +

Round Up & Donate

+

Opt in and we’ll round up each fare to the nearest dollar, then donate the difference to a charitable cause of your choice.

+
+ + +
+ + + +
+ + + +
+ + +
+ + + + + + + + + + diff --git a/js/app.js b/js/app.js new file mode 100644 index 00000000..e27e5668 --- /dev/null +++ b/js/app.js @@ -0,0 +1,3 @@ +$(document).ready(function(){ + $('.sidenav').sidenav(); +});