-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
159 lines (159 loc) · 6.77 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="assets/image/logo-pink.png">
<link rel="stylesheet" href="assets/css/main.css">
<title>Lyft</title>
</head>
<body>
<header id="header" class="header-up-scroll">
<nav class="nav-header">
<div class="logo">
<a href="index.html"><img src="assets/image/logo-white.png" alt="lya" width="60" id="logo"></a>
</div>
<div class="menu">
<a href="#">Drive</a>
<a href="#">Explore</a>
<a href="#">Help</a>
<a href="#" ><button type="button" class="c-white c-pink" id="nav-log-in">Log in</button></a>
<a href="#" class="none-sign-up" id="nav-sign-up"><button type="button" class="c-pink">Sign up</button></a>
</div>
</nav>
</header>
<section class="main-sec">
<section class="first-content p-relative">
<section>
<video id="video-inicio" src="assets/image/hero-video.mp4" autoplay loop muted></video>
</section>
<section class="sec-form-sign-up p-abs">
<form action="" method="post" class="contact-form">
<div>
<h1>TURN MILES INTO MONEY</h1>
<p>SIGN UP TO DRIVE WITH LYFT</p>
</div>
<div class="input-box">
<input type="text" class="inp-data" placeholder="Phone number" id="inp-phone">
</div>
<div class="input-box none" name="form-none">
<input type="text" class="inp-data" placeholder="Name" id="inp-name">
</div>
<div class="input-box none" name="form-none">
<input type="email" class="inp-data" placeholder="Email" id="inp-email">
</div>
<div class="input-box none" name="form-none">
<input type="text" class="inp-data" placeholder="City" id="inp-city">
</div>
<div class="input-box">
<button type="submit" id="btn-become">Become a driver</button>
<a href="#">Sign up to ride</a>
</div>
<div class="input-box condition-box">
<p>Already applied? <a href="" class="link">Check the status of your application here.</a></p>
<p>Earn money for inviting friends to drive. <a href="" class="link">Learn more</a></p>
</div>
</form>
</section>
</section>
<section class="sec-phone">
<section class="left">
<div class="ride">
<h2 class="up-case">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="serious">
<h2 class="up-case">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="happy">
<h2 class="up-case">Happy drivers</h2>
<h2 class="up-case">Happy riders</h2>
<p>Ride with us and you’ll see why 9 out of 10 rides end with five stars.</p>
</div>
</section>
<section class="right">
<img src="assets/image/phone.png" alt="phone">
</section>
</section>
<section class="amplify-ride">
<div class="text">
<a class="up-case link" href="">Watch</a>
<h2 class="up-case">Amplify your ride</h2>
<p>Lyft's new embelm ,Amp, is the secret to smooth pickups.
Lighting up dashboards nationwide,the device makes it easy for passengers and drivers to find each ohter</p>
</div>
<div class="video">
<iframe class="youtube-player" src="https://www.youtube-nocookie.com/embed/fLSmUWOYpKw?rel=0&controls=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</section>
<section class="june">
<div class="video">
<iframe class="youtube-player" src="https://www.youtube-nocookie.com/embed/v8nyGzOLsdw?rel=0&controls=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="text">
<a class="up-case link" href="">Watch</a>
<h2 class="up-case">June</h2>
<p>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.</p>
</div>
</section>
<section class="good-thing">
<div class="text">
<a class="up-case link" href="">LEARN MORE</a>
<h2 class="up-case">DRIVE TOWARD WHAT MATTERS</h2>
<p>Wherever you’re going, we’ll help you get there — and will be here as long as you need us.</p>
</div>
<div class="video">
<iframe class="youtube-player" src="https://www.youtube-nocookie.com/embed/gZjVSuVBiYs?rel=0&controls=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</section>
</section>
<footer class="footer">
<section class="link-foot">
<div>
<ul>
<li><a href="#" class="up-case">Log in</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Cities</a></li>
<li><a href="#">Airports</a></li>
<li><a href="#">Fare Estimate</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#" class="up-case">Partner</a></li>
<li><a href="#">Partnerships</a></li>
<li><a href="#">Enterprise</a></li>
<li><a href="#">Ambassadors</a></li>
<li><a href="#">Developers</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#" class="up-case">Learn</a></li>
<li><a href="#">Safety</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="https://itunes.apple.com/us/app/lyft-on-demand-ridesharing/id529379082?mt=8" target="_blank"><img src="assets/image/apple-store.svg" alt="app store"></a></li>
<li><a href="https://play.google.com/store/apps/details?id=me.lyft.android" target="_blank"><img src="assets/image/google-play.png" alt="google play" width="135"></a></li>
<li><a href="https://www.microsoft.com/es-pe/store/p/lyft/9pjks5v4v997?ocid=badge&rtc=1" target="_blank"><img src="assets/image/microsoft.png" alt="microsoft" width="135"></a></li>
</ul>
</div>
</section>
<section class="icon">
<span class="icon-facebook"></span>
<span class="icon-instagram"></span>
<span class="icon-twitter2"></span>
<hr>
<p>© Lyft Inc TermsPrivacy</p>
</section>
</footer>
<script type="text/javascript" src="assets/js/app.js"></script>
</body>
</html>