This repository has been archived by the owner on Nov 28, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
198 lines (194 loc) · 6.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lyft Flex</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,900" rel="stylesheet">
<link rel="stylesheet" href="assets/css/common.css">
<link rel="stylesheet" href="assets/css/main.css">
<script src="https://use.fontawesome.com/e81f3961b0.js"></script>
</head>
<body>
<!--header-->
<header>
<!--nav-->
<nav id="navegador" class="navegador-class flex-container">
<!--logo-->
<div class="logo-class" id="logo-id"></div>
<div class="lista-nav">
<ul>
<li class="nav-lista">
<a href="#" class="nav-menu" id="drive">Drive</a>
</li>
<li>
<a href="#" class="nav-menu" id="explore">Explore<i class="fa fa-chevron-down" aria-hidden="true"></i></a>
</li>
<li>
<a href="#" class="nav-menu" id="help">Help</a>
</li>
<li>
<a href="#" class="nav-menu borde-blanco" id="log">Log in</a>
</li>
<li>
<a href="#" class="nav-menu borde-rosa" id="sign">Sign up</a>
</li>
</ul>
</div>
</nav>
</header>
<!--principal-->
<main id="main" class="flex-container">
<!--video-->
<div class="video-hero">
<video src="assets/images/hero-video.mp4" type="video/mp4" autoplay muted loop >
</video>
</div>
<!--registro-->
<section id="registro" class="flex-container registro-caja">
<h2 class="text-uppercase miles mb-0 mt-0">TURNS MILES IN TO MONEY</h2>
<h6 class="text-uppercase mb-0 mt-0">SIGN UP TO DRIVE WITH LYFT</h6>
<form id="formulario" class="form">
<div class="input">
<input type="text" maxlength="9" placeholder="Phone number" id="input-number">
</div>
<span class="hide cruz error-1" id="error-1" >
<img src="assets/images/error.png" width="30" alt="">
</span>
<!--funcionalidad-registro-->
<div class="input-ocultos gral-hide">
<input class="input-name mb-0" id="input-name" type="text" placeholder="First Name">
<span class="hide cruz error-2" id="error-2" >
<img src="assets/images/error.png" width="30" alt="">
</span>
</div>
<div class="input-ocultos hide">
<input class="input-email mb-0" id="input-email" type="text" placeholder="Email">
<span class="hide cruz error-3" id="error-3" >
<img src="assets/images/error.png" width="30" alt="">
</span>
</div>
<div class="input-ocultos hide">
<input class="input-city mb-0" id="input-city" type="text" placeholder="City">
<span class="hide cruz error-4" id="error-4" >
<img src="assets/images/error.png" width="30" alt="">
</span>
</div>
</form>
<div class="btn-a">
<button class="btn-driver-class" id="btn-driver">Become a Driver</button>
<a href="#" class="sign-up-to-ride">Sign up to ride</a>
</div>
</ul>
<small>
<a href="#" class="already">Already applied? Check the status of your application here.</a>
</small>
<small>
<a href="#" class="earn-money">Earn money for inviting friends to drive. Learn more.</a>
</small>
</section>
</main>
<!--información-->
<section id="info" class="flex-container">
<div class="col-text flex-container">
<div class="detalle">
<h2 class="text-uppercase">a ride in minutes</h2>
<p>Request a ride and you'll be on your way in minutes. Request. Ride. Repeat.</p>
</div>
<div class="detalle">
<h2 class="text-uppercase">serious about safety</h2>
<p>From knowing the color of your driver’s car to our 24/7 Trust & Safety Team, we got you.</p>
</div>
<div class="detalle">
<h2 class="text-uppercase">happy drivers. happy riders</h2>
<p>Ride with us and you’ll see why 9 out of 10 rides end with five stars.</p>
</div>
</div>
<div class="col-img flex-container">
<img src="assets/images/phone.png" alt="#">
</div>
</section>
<!--videos-->
<div class="vid-global">
<div class="first-vid flex-container">
<div class="amplify-text">
<h5>WATCH</h5>
<h2>AMPLIFY YOUR RIDE</h2>
<p>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.</p>
</div>
<div class="video-youtube">
<iframe width="850" height="500" src="https://www.youtube.com/embed/fLSmUWOYpKw?ecver=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<!--videos-->
<div class="second-vid flex-container">
<div class="showing">
<h5 class="text-uppercase">watch</h5>
<h1 class="text-uppercase">Showing Up Quick</h1>
<p>Request a ride and you’ll be on your way in minutes. Request. Ride. Repeat. Download today, and <a href="#">#RideOnTheBrightSide</a>.</p>
</div>
<div>
<iframe width="850" height="500" src="https://www.youtube.com/embed/xj2VWLV0xCU?ecver=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!--pie-->
<section class="footer flex-container" id="footer">
<div class="row flex-container mt-0">
<div class="columna mt-0">
<a href="#"><h2 class="text-uppercase mt-0">drive</h2></a>
<a href=""><h2 class="text-uppercase mt-0">ride</h2></a>
<a href=""><h2 class="text-uppercase mt-0">log in</h2></a>
<a href=""><p>Help</p></a>
<a href=""><p>Cities</p></a>
<a href=""><p>Airports</p></a>
<a href=""><p>Fare Estimate</p></a>
<a href=""><p>Free Ride Credits</p></a>
<a href=""><p>Driver Bonus</p></a>
<a href=""><p>Gift Cards</p></a>
</div>
<div class="columna">
<a href=""><h2 class="text-uppercase mt-0">partner</h2></a>
<a href=""><p>Partnerships</p></a>
<a href=""><p>Business</p></a>
<a href=""><p>Ambassadors</p></a>
<a href=""><p>Events</p></a>
</div>
<div class="columna">
<a href=""><h2 class="text-uppercase mt-0">learn</h2></a>
<a href=""><p>Safety</p></a>
<a href=""><p>Blog</p></a>
<a href=""><p>Press</p></a>
<a href=""><p>Careers</p></a>
<a href=""><p>Driver<br>Requirements</p></a>
<a href=""><p>Driver Earnings</p></a>
<a href=""><p>Driving Jobs</p></a>
<a href=""><p>Round up &<br>Donate</p></a>
</div>
<div class="col-store">
<div class="store">
<img src="assets/images/apple-store.svg" alt="App Store">
</div>
<div class="store">
<img src="assets/images/google-play.png" alt="Google Play">
</div>
<div class="store">
<img src="assets/images/microsoft.png" alt="Microsoft">
</div>
</div>
</div>
<div class="row-redes flex-container">
<div class="redes-sociales flex-container">
<a href="https://twitter.com/lyft"><i class="fa fa-twitter social-icon" aria-hidden="true"></i></a>
<a href="https://www.facebook.com/lyft/"><i class="fa fa-facebook social-icon" aria-hidden="true"></i></a>
<a href="https://www.instagram.com/lyft/"><i class="fa fa-instagram social-icon" aria-hidden="true"></i></a>
</div>
<hr>
<div class="copyright flex-container">
<p>© 2017 Lyft, Inc. <a href="">Terms</a> <a href="">Privacy</a></p>
</div>
</div>
</section>
</footer>
<script src="assets/js/main.js"></script>
</body>
</html>