From d365b025d219c7770ce310e74a274bfc9ec494e6 Mon Sep 17 00:00:00 2001 From: RosyG Date: Wed, 22 Nov 2017 01:46:17 -0600 Subject: [PATCH 1/9] primer avance --- assets/icomoon/Read Me.txt | 7 ++ assets/icomoon/demo-files/demo.css | 152 +++++++++++++++++++++++++++++ assets/icomoon/demo-files/demo.js | 30 ++++++ assets/icomoon/demo.html | 118 ++++++++++++++++++++++ assets/icomoon/fonts/icomoon.eot | Bin 0 -> 2100 bytes assets/icomoon/fonts/icomoon.svg | 14 +++ assets/icomoon/fonts/icomoon.ttf | Bin 0 -> 1936 bytes assets/icomoon/fonts/icomoon.woff | Bin 0 -> 2012 bytes assets/icomoon/selection.json | 151 ++++++++++++++++++++++++++++ assets/icomoon/style.css | 41 ++++++++ css/main.css | 71 +++++++++++++- index.html | 84 +++++++++++++++- 12 files changed, 666 insertions(+), 2 deletions(-) create mode 100644 assets/icomoon/Read Me.txt create mode 100644 assets/icomoon/demo-files/demo.css create mode 100644 assets/icomoon/demo-files/demo.js create mode 100644 assets/icomoon/demo.html create mode 100644 assets/icomoon/fonts/icomoon.eot create mode 100644 assets/icomoon/fonts/icomoon.svg create mode 100644 assets/icomoon/fonts/icomoon.ttf create mode 100644 assets/icomoon/fonts/icomoon.woff create mode 100644 assets/icomoon/selection.json create mode 100644 assets/icomoon/style.css 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 0000000000000000000000000000000000000000..239674138d17f252e01fabdd8fa7eaed4c977f94 GIT binary patch literal 2100 zcmaJ?O>7%Q6n?Ygzu1W#yIwnP5_hxfIIcro|E@`5S5X2{oFAIBG@w>3bsXbbvezL$ zY9m!@5CS1Cq)AapgnB}P3JEHN6b?v4hyzH7Q-u)p#)S$AwFi(YnuIs&O=Fjcx0;#n zd-LYa%zHCCaTCCb5r6;(^+I5UFwNLRy`I@t<^G1a^>iPA6^f993Y4)_KtTg5oPseWc+Z-?nS0e<1_{>gV zl{y=nu?_pGEmf`BKnKI9w}J_iYe1dw;Ee|x4o+5OG-x~*ijqL11+ zm>mIvBWyK#JS@o`)okDP|8;oA02f3RaKI7p;a;AHF*uLT<9Gk2;z>uMgD3H>5a~igqm>xZ*zF~59FROgk}`=UB;JTt#ty#Ijzc?etQ|ddL|r`R zFq`}dv&m!@+$Qt#R4O&a%JwEz9L@%HAudl{1!uf(iT@^|6(|O!O>uEXliNff6)DH1P>A(Q`=5rM#+v}B9@4&8N(HGzO(ToAGxl7 zwz}Hf+!F{yLc{dV&5*Bjd*=o6`R%L8qro1l4X=%Qm#Bj0MuyXXcZ%@rbg0MSi90nK z?Zj#5CZa!Gd!mrYeFP5zJ?Q8pv|~l~qF(1V5>@?j*WXL^MWZ8_8$J_>_VSW6(9&X{ z&*}7&(nP*E>3taqHT*I*Fqmsc$qf#SjSlYN!BMg)iI*oP&Yhc>xGagHw1-8BOrA(b zczz@n>+6j~GrUu$Z*jTA6FR+K7ic|PJpIyaOKX5Ja+moX9R2ScJFCpEDDBUoVU`QE zY>6B9U$LeB0*j7i2!87Q`p?=HZ{;R(_Lry%j#K|Rcwd=dy?@KA7N%-Xm9Sxqvz&8h zLB?EF#SBjH!pFoxddbhIVqQ$}8mRw*C$nkBYGZ{@wYi9DRh^eZd{NU=#IlBUh!-`i z#}|UvumSa>8aBgWc!&MdbPcGnVow!whzlB~h|?O@A-<|%Jw8-|h7G7crC~F~;lpCC zQm#~#`qyqMKQ~{jC_*F@KKO|{aMXdyQ~APTDLYsHb{=RsR8ba$LSD(wWf$@@!t|1m y$yLU2Z6O#^pVtN4MFAgNMSXO$uz>9h>ZV}{>x}wbk896$2=k!cx!SbU<9`8s5=z(r literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..3926ecab2be093178d660f2063058cb3674e850d GIT binary patch literal 1936 zcmaJ?U1(!P6h3n&e@)t?$>t_af3mmtwn?_NX?~g;+a^nCv^4#(?bfZbW!Fv9*aniD z+8=fc3tJIIe6icEtX*WE1YHDOM5qsfMSM^YpB54An=gtWyAKMB{qfAr?KaC6PnenS zJ9FlonR8}tfB=96)__82Y_cl zVfEGg`+J`te;a__o6lutZJXb&1L&W{d3hcc#&78N$l1D<`Qq}`Q`cb(`Ay_Pp_I)~ z2l)s27swsO%+&?-zJ&ZcHm_ugxvin9f06%=G2U7zEiL0dQH;!=0F-*jI_LqoE$#=@ zyjvd0pAaQg%&tNRZu?2;19?p^0e|vW~O_c+G>%ltRZujnOc-z~(RPnZxUriR-XS7(1Zoy(4 zV(yaX&nFMQOsC0UFc9dqI~?}jKprJ-u_Pvw=wBn=>=l$JUb; zS9RY?D0#_IWv{BKtL}Tz(dKULsHqm)+A^}-L%G7Jf50R3Hdxx48f6dnV`Io^s5VSr zx_B!Tdd5%486O#pbA-~GT#7SS6VF7*)5*7qQp9SbX5KPV6dDZfS|MhqHVZ2;0U7Ul z3*80}5*|z2M50E?j=xwm)}>Yqcg(e1=sNw8>&9mr8@09Ffj~GoNblVWwiNCjyg)v` zdo6yZt=nqDXQRF)s^GnmVG{675uV)+^*TIur)HyxI1TMY^d&2A6cV|Y;6%JwAR#5=H3Lr%qqza*1bkdc7{t zP@kWCX`!wmz!fY_*9EURI74a4)JA8PZ7%+)*)Weupa**cnup+KdfOh)WbXMo2IKmjTL9g zm_t0LVTw4ZVIAUY8rFjg1PvQde@??@=zO|$a+}uhbvxq@+xX~3TKn501v>YfY%fehv$t`AMsaUJ7*Jy`WAr(6qo_N|z%q`rsGEUR?9=K2M#~4lJz^m%OY$`S57*B*-v9sr literal 0 HcmV?d00001 diff --git a/assets/icomoon/fonts/icomoon.woff b/assets/icomoon/fonts/icomoon.woff new file mode 100644 index 0000000000000000000000000000000000000000..bf529da628856941d3094a96274188821c2cf55b GIT binary patch literal 2012 zcmaJ?U1(fI6h3oj|FWCzX19BHlP1~T+?$_mVz>LhG}$eo(U472le9KUOKUgVH3{rb z%@1v%P{p4IUrbY^wn(1@ErJ$b;)7rjUj*@~h-e-JpG1)ML7~`W{pQ}ACZ)ky&dhht zoS!*o&fL8?F+5C+FzoB(($^J(7x?KhapF*%h&doVC&=S-XN#4>1<2;WpBGf$cfUSc zSQN4!zzbbLO|#|8uR(U7h~E`7|Ka1$=1K+FSl`BeT9D`ZcPn!cLiRQIPC@o>`S){` zrAv_g23`@g_bN@4YeneUz>-f8_pyH}g-eKQ^9voFnrN|FsFWZ}BKEt2ZjLtmd!e?t zgnUH|LyrS--ojSMN+jKs#L3?`R`w?)SOfT-gEj5s1Rf-M_=w-D-=jeef`oy#hN1&K z3Q!yN1a8ADwA#o*BUs(2l!TNRDG%OyaO>ft`bNDDIqCdOlV|ncJ#Tu-ZntTzE0_}_ z1`Chw)euQUnZx=~w$JnbGP^Le5U--H`*8<@^a73386=eK)>ND94sc z-8vJHSx2fvX33ri>w%)(&FoMPhFA~=nIkNdW{H$0+o5Iekh{Dv?SQQpo;uL#a!EiY1#n{FhYwPQIUft~J+FapleWAyz zp}xKluZH^AuMStb+wOANgNn;OD%|Bxp3H52mCv)0NH{#;_4&L5;c#S!Q}$6lU%ft> zzrN8a+(_$UMmZR@P@doBU8n^yWESwtemz5^-xFe}MFweafgD5D5r(>C0(t=qCJ_$= zQ3se~=C}7AYGs=G&dki!iItoy&^Wjp&7Ji%cpLUKHx9n!>kW1t+|#J`_7>9VelC@d z^$fQt1Ff#!_O^73^kZApZ)>!jK6~ayH2Pc*V+Xp~NJe6u?T{r_o`al z?cq+@HC|C#ZNVlb<>emznKSX`q)xtu+=$7z+IE((YhL_PiBwX*F`QWHJeA!4N#NQS ztE){-hr{7mWQ5ETT=y$o`ye|IkB{PRcz>))2AmVFKVi)ZDCboQ%7|?7r|jH1=$a%~j!7)wW}pSoD`p z_taZ|yz0sRO)iTlCjHd^&0jlLyvjB3;wxbc*y-OKyjL+WZ@+Rw!(r?gj4%_txO3?g zrEyoraFU-w^eOYPe)cm&!i$4mC;eOSB$}zLFK+tWjKy>img { + width: 70%; + height: 100%; +} +#about { + height: 610px; + background-color: #71268C; + box-sizing: border-box; +} +#external_links { + height: 400px; + background-color: #333447; +} + +#video, #video2 {/*Altura de la seccion donde estara el texto y el video*/ + height: 460px; + display: inline-block; + /*margin-top: 0; + margin-bottom: 0;*/ +} +#video2 >img {/*Proporción que ocupara el video, y la posición a la q estará:Video a la izquierda*/ + width: 65%; + right: 33%; + height: 100%; +} + +#video > img {/*Proporción que ocupara el video, y la posición a la q estará:Video a la derecha*/ + width: 65%; + left: 33%; + height: 100%; +} +#about > img { + margin-top: 50px; + width: 45%; + left: 30% + height: 85%; + + +} + +.foot { + height: 120px; + background-color: #333447; +} +.text-white {/*Texto que acompaña a cada video, es lo mismo para los tres*/ + display: inline-block; + vertical-align: top; + width: 33%; +} +.text-about { + color: white; + vertical-align: top; + width: 30%; + padding-left: 1%; + height: 100% + margin-right: 0; +} diff --git a/index.html b/index.html index 67324f35..3ae99dd1 100644 --- a/index.html +++ b/index.html @@ -1 +1,83 @@ - + + + + + A ride whenever you need one - Lyft + + + + + + + + +
+ imagen hero +
+ +
+ +
+

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

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ + video1 +
+ +
+ video2 + +
+
WATCH
+

AMPLIFY YOUR RIDE

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+ +
+ +
+
WATCH
+

AMPLIFY YOUR RIDE

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ + video3 +
+ + + +
+ +
+ + + From 1ea9e0a148b1fa48b1f6bcee22557fa29a03e44f Mon Sep 17 00:00:00 2001 From: RosyG Date: Wed, 22 Nov 2017 15:45:32 -0600 Subject: [PATCH 2/9] =?UTF-8?q?a=C3=B1adiendo=20formulario?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/main.css | 94 ++++++++++++++++++++++++++++++++++++++++++++++------ index.html | 47 +++++++++++++++++--------- 2 files changed, 115 insertions(+), 26 deletions(-) diff --git a/css/main.css b/css/main.css index ac27bc96..4a037f6a 100644 --- a/css/main.css +++ b/css/main.css @@ -4,9 +4,20 @@ body { font-family: 'Montserrat', sans-serif; } - + header { + background-color: #27193F; + } +#back-menu { + width: 100%; + height: 100px; + position: fixed; + background-color: #27193F; + opacity: 0.3; + /*filter: alpha(opacity=60); /* For IE8 and earlier */ +} #menu { height: 100px; + width: 100% } #intro { box-sizing: border-box; @@ -17,6 +28,37 @@ width: 70%; height: 100%; } +.form { + width: 25%; + height: 10%; + display: inline-block; + float: right; + padding-left: 5%; +} +#intro > section > h1{ + margin-top: 15%; + color: #9289BD; + font-size: x-large; + font-weight: bolder; + + letter-spacing: 1px; + width: 50%; +} +#intro > section > h5 { + color: #9289BD; + font-weight: bolder; + letter-spacing: 1px; + +} + +input[type=text] { + border: none; + color: #D3D3D3; + padding: 10px 408px 10px 1px; + border-bottom: 1px solid #9289BD; + font-size: 75%; +} + #about { height: 610px; background-color: #71268C; @@ -34,23 +76,25 @@ margin-bottom: 0;*/ } #video2 >img {/*Proporción que ocupara el video, y la posición a la q estará:Video a la izquierda*/ - width: 65%; + width: 66.5%; right: 33%; height: 100%; } #video > img {/*Proporción que ocupara el video, y la posición a la q estará:Video a la derecha*/ - width: 65%; + width: 66.5%; left: 33%; height: 100%; } #about > img { - margin-top: 50px; - width: 45%; - left: 30% + margin-top: 50px;/*Bajando 50px a la imagen*/ + margin-right: 10%;/*Recorriendo ligeramente a la izquierda a la imagen*/ + width: 40%; + float: right;/*Posicionando a la imagen del celular a la derecha*/ height: 85%; - - +} +#about > section > section > h1 { + font-size: large; } .foot { @@ -64,9 +108,37 @@ } .text-about { color: white; + display: inline-block; vertical-align: top; width: 30%; - padding-left: 1%; - height: 100% - margin-right: 0; + padding-left: 10%; + margin-top: 50px;/*Bajando 50px al texto*/ +} +.mb-60 { + margin-bottom: 60px; +} +.mt-0 { + margin-top: : 0; +} +.mb-0 { + margin-bottom: 0; +} +.icon-twitter { + color: white; +} + + + +#bottom_become:hover { + background-color: white; + color: #FF00BF; +} +.bottom-become { + color: white; + border: 2px solid #FF00BF; + background: #FF00Bf; + margin-top: 25px; + margin-right: 180px; + padding: 10px 10px; + border-radius: 5px; } diff --git a/index.html b/index.html index 3ae99dd1..eafdd3ea 100644 --- a/index.html +++ b/index.html @@ -4,39 +4,56 @@ 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.

-
+
+

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.
+
-
-

HAPPY DRIVERS.

-

HAPPY RIDERS.

-

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

-
- image phone + image phone
@@ -76,7 +93,7 @@

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tem

- +
From 72cd1f008626e76865366f4d068f3d0e6ff95014 Mon Sep 17 00:00:00 2001 From: RosyG Date: Wed, 22 Nov 2017 18:16:22 -0600 Subject: [PATCH 3/9] =?UTF-8?q?a=C3=B1adiendo=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/main.css | 194 +++++++++++++++++++++++++++++++-------------------- index.html | 65 ++++++++++++++--- 2 files changed, 172 insertions(+), 87 deletions(-) diff --git a/css/main.css b/css/main.css index 4a037f6a..38485ac6 100644 --- a/css/main.css +++ b/css/main.css @@ -1,23 +1,45 @@ -/* - * Estilos de tu proyecto - */ body { font-family: 'Montserrat', sans-serif; } header { background-color: #27193F; } + input[type=text] {/*Tamaño del contenedor del formulario*/ + 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; + height: 610px; + } + #about > img { + float: right;/*Posicionando a la imagen del celular a la derecha*/ + height: 85%; + margin-top: 50px;/*Bajando 50px a la imagen*/ + margin-right: 10%;/*Recorriendo ligeramente a la izquierda a la imagen*/ + width: 40%; + } + #about > section > section > h1 { + font-size: large; + } #back-menu { - width: 100%; + background-color: #27193F; height: 100px; position: fixed; - background-color: #27193F; opacity: 0.3; - /*filter: alpha(opacity=60); /* For IE8 and earlier */ + width: 100%; } -#menu { - height: 100px; - width: 100% +#bottom_become:hover { + background-color: white; + color: #FF00BF; +} +#external_links { + background-color: #333447; + height: 400px; } #intro { box-sizing: border-box; @@ -25,22 +47,14 @@ } #intro >img { - width: 70%; height: 100%; -} -.form { - width: 25%; - height: 10%; - display: inline-block; - float: right; - padding-left: 5%; + width: 70%; } #intro > section > h1{ - margin-top: 15%; color: #9289BD; font-size: x-large; font-weight: bolder; - + margin-top: 15%; letter-spacing: 1px; width: 50%; } @@ -50,69 +64,77 @@ letter-spacing: 1px; } - -input[type=text] { - border: none; - color: #D3D3D3; - padding: 10px 408px 10px 1px; - border-bottom: 1px solid #9289BD; - font-size: 75%; -} - -#about { - height: 610px; - background-color: #71268C; - box-sizing: border-box; -} -#external_links { - height: 400px; - background-color: #333447; +#menu { + height: 100px; + width: 100% } #video, #video2 {/*Altura de la seccion donde estara el texto y el video*/ - height: 460px; display: inline-block; - /*margin-top: 0; - margin-bottom: 0;*/ + height: 460px; } -#video2 >img {/*Proporción que ocupara el video, y la posición a la q estará:Video a la izquierda*/ - width: 66.5%; - right: 33%; +#video2 >iframe {/*Proporción que ocupara el video, y la posición a la q estará:Video a la izquierda*/ height: 100%; + right: 33%; + width: 66.5%; } -#video > img {/*Proporción que ocupara el video, y la posición a la q estará:Video a la derecha*/ - width: 66.5%; - left: 33%; +#video > iframe {/*Proporción que ocupara el video, y la posición a la q estará:Video a la derecha*/ height: 100%; + left: 33%; + width: 66.5%; } -#about > img { - margin-top: 50px;/*Bajando 50px a la imagen*/ - margin-right: 10%;/*Recorriendo ligeramente a la izquierda a la imagen*/ - width: 40%; - float: right;/*Posicionando a la imagen del celular a la derecha*/ - height: 85%; +.bottom-become { + background: #FF00Bf; + border: 2px solid #FF00BF; + border-radius: 5px; + color: white; + margin-top: 25px; + margin-right: 180px; + padding: 10px 10px; } -#about > section > section > h1 { - font-size: large; +.border-bottom { + border: 2px solid white; + padding: 10px; + border-radius: 15%; } -.foot { - height: 120px; - background-color: #333447; +.column > img: hover { + color: #FF00BF; } -.text-white {/*Texto que acompaña a cada video, es lo mismo para los tres*/ +.column { + box-sizing: border-box; + color: white; display: inline-block; - vertical-align: top; - width: 33%; + float: left; + margin-top: 5%; + padding-left: 5%; + text-align: left; + width: 25%; } -.text-about { - color: white; +.column > img { + display: block; + margin-bottom: 40px; + width: 70%; +} + +.form {/*Formato de texto del formulario*/ display: inline-block; - vertical-align: top; - width: 30%; - padding-left: 10%; - margin-top: 50px;/*Bajando 50px al texto*/ + float: right; + height: 10%; + padding-left: 5%; + width: 25%; +} + +.font-size { + font-size: 25px; +} +.foot { + background-color: #333447; + height: 120px; +} +.icon-twitter { + color: white; } .mb-60 { margin-bottom: 60px; @@ -123,22 +145,40 @@ input[type=text] { .mb-0 { margin-bottom: 0; } -.icon-twitter { +.text-white {/*Texto que acompaña a cada video, es lo mismo para los tres*/ + display: inline-block; + padding-left: 5%; + vertical-align: top; + width: 28%; +} +.text-about { color: white; + display: inline-block; + margin-top: 50px;/*Bajando 50px al texto*/ + padding-left: 10%; + vertical-align: top; + width: 30%; } +#back-menu > img { - -#bottom_become:hover { - background-color: white; - color: #FF00BF; + float: left; + height: 45px; + width: 70px; + margin-top: 3%; + margin-left: 5%; } -.bottom-become { +#back-menu > section > a { + margin-right: 8%; +} +.white-letter { color: white; - border: 2px solid #FF00BF; - background: #FF00Bf; - margin-top: 25px; - margin-right: 180px; - padding: 10px 10px; - border-radius: 5px; + /*letter-spacing: 2px;*/ + margin-top: 3%; + margin-right: 5%; + width: 30%; + +} +.float-right { + float: right; } diff --git a/index.html b/index.html index eafdd3ea..0ffc0c9c 100644 --- a/index.html +++ b/index.html @@ -12,11 +12,24 @@ +
imagen hero @@ -60,20 +73,22 @@
Ride with us and you’ll see why 9 out of 10 rides end with five stars.
WATCH
-

AMPLIFY YOUR RIDE

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

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.

- video1 +
- video2 + + +
WATCH
-

AMPLIFY YOUR RIDE

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

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.

@@ -81,15 +96,45 @@

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tem
WATCH
-

AMPLIFY YOUR RIDE

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

A GOOD THING GOING

+

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

- video3 +