forked from Laboratoria/SAP001-lyft
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
158 lines (158 loc) · 6.86 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
<!DOCTYPE html>
<html lang='pt_br'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<link rel='stylesheet' href='css/main.css' />
<!-- LINK FONT GOOGLE-->
<link href='https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900' rel='stylesheet' />
<!-- LINK ICONES-->
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.1.0/css/all.css' integrity='sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt' crossorigin='anonymous' />
<title>Lyft</title>
</head>
<body>
<!-- HEADER -->
<div class='header'>
<div class='fundo-header'>
<!-- NAVIGATION -->
<div class='banner-nav'>
<a href='#'><img class='logo' src='assets/images/logo-white.png' /></a>
<nav>
<ul class='nav-bar'>
<li><a href='#'>Drive</a></li>
<li><a href='#'>Explore</a></li>
<li><a href='#'>Help</a></li>
<li><a href='#' class='login'>Log in</a></li>
</ul>
</nav>
</div>
<!-- BOX FLYER -->
<div class='flyer-header'>
<div class='box-header'>
<h1 class='title-header'>TURN MILES INTO MONEY</h1>
<h2 class='sub-header'>SIGN UP TO DRIVE WITH LYFT.</h2>
<form class='form'>
<input type='text' placeholder='Phone number' />
<button type='submit' class='send'>Become a driver</button>
<a href='#' class='link-flyer'>Sign up to ride</a>
</form>
<div class='txt-flyer'>
<p>Already applied? Check the status of your application here.</p>
<p>Earn money for inviting friends to drive. Learn more.</p>
</div>
</div>
</div>
</div>
</div>
<div style='display:flex'>
<section class='shadow-header'></section>
</div>
<!-- ABOUT -->
<div class='about'>
<div class='container-about'>
<div class='box-about'>
<h2 class='title-about'>A RIDE IN MINUTES</h2>
<p class='txt-about'>Request a ride and you'll be on your way in minutes.
</br>Request.Ride.Repeat.</p>
<h2 class='title-about'>SERIOUS ABOUT SAFETY</h2>
<p class='txt-about'>From knowing the color of your driver's car to our 24/7
</br>Trust & Safety Team, we got you.</p>
<h2 class='title-about'>HAPPY DRIVERS.</h2>
<h2 class='title-about space-title'>HAPPY RIDERS.</h2>
<p class='txt-about'>Ride with us and you'll see why 9 out of 10 rides end with five stars.</p>
</div>
<img class='about-img' src='assets/images/phone.png' />
</div>
</div>
<!-- VIDEO 1 -->
<div class='videos'>
<div class='container-text'>
<small class='small-text'>WATCH</small>
<h2 class='title-video'>AMPLIFY YOUR RIDE</h2>
<p class='text-video'>Lyft's new emblem, Amp is the secret to smooth pickups. Lightinh up dashboards nationwide, the devide makes it easy for passengers and drivers to find each other.</p>
</div>
<div class='container-video'>
<iframe width='100%' height='100%' src='https://www.youtube.com/embed/fLSmUWOYpKw' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>
</div>
</div>
<!-- VIDEO 2 -->
<div class='videos'>
<div class="container-video">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/V7j8Aqxmbs8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class='container-text'>
<small class='small-text'>WATCH</small>
<h2 class='title-video'>JUNE</h2>
<p class='text-video'>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>
</div>
<!-- VIDEO 3 -->
<div class='videos'>
<div class='container-text'>
<small class='small-text'>WATCH</small>
<h2 class='title-video'>A GOOD THINK GOING</h2>
<p class='text-video'>Lauching on TV and online, 'Tide on the Bright Side' shows how Lyft continues to prioritize happy drivers, short ETAS, and safety.</p>
</div>
<div class='container-video'>
<iframe width='100%' height='100%' src='https://www.youtube.com/embed/hWYQvs6UrPs' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>
</div>
</div>
<!-- FOOTER -->
<div class='footer'>
<div class='menu-footer'>
<div class='list-footer'>
<!-- COLUMN 1 -->
<div class='column-footer'>
<ul class='login-footer'>
<li class='title-footer'><a href='#'>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>
<!-- COLUMN 2 -->
<div class='column-footer'>
<ul class='menu-partner'>
<li class='title-footer'><a href='#'>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>
<!-- COLUMN 3 -->
<div class='column-footer'>
<ul class='menu-learn'>
<li class='title-footer'><a href='#'>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>
<!-- COLUMN DOWNLOADS -->
<div class='column-footer'>
<ul class='downloads-footer'>
<li><a href='#'><img src='assets/images/apple-store.svg' alt='apple store' width='120' /></a></li>
<li><a href='#'><img src='assets/images/google-play.png' alt='google play' width='120' /></a></li>
<li><a href='#'><img src='assets/images/microsoft.png' alt='microsoft store' width='120'/></a></li>
</ul>
</div>
</div>
<!-- MEDIA SOCIAL -->
<div class='social-footer'>
<ul class='social-media'>
<li><a href='#' class='border-icon'><i class='fab fa-facebook-f'></i></a></li>
<li><a href='#'><i class='fab fa-instagram'></i></a></li>
<li><a href='#' class='border-icon'><i class='fab fa-twitter'></i></a></li>
</ul>
<hr class='hr-footer'>
</div>
<div class='fcopyright-footer'>
<small class='copyright'>© 2017 Lyft, Inc. TermsPrivacy</small>
</div>
</div>
</body>
</html>