forked from Laboratoria/SAP001-lyft
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (122 loc) · 4.75 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lyft</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://file.myfontastic.com/itB5qJBMGkViNxiEcarVea/icons.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<script src="main.js"></script>
</head>
<body>
<section class='banner-top'>
<div class="header">
<img class="logo" src="assets/images/logo-white.png">
<div class='options'>
<a class='drive'>Drive</a>
<a class='explore'>Explore</a>
<a class='help'>Help</a>
<a class='login'>Log In</a>
</div>
</div>
<div class='side-form'>
<h1 class="form-title">TURN MILES</h1>
<h1>INTO MONEY</h1>
<h3>SIGN UP TO DRIVE WITH LYFT</h3>
<a class="phone-number">Phone number </a>
<div class="clicks">
<a class="drivers">Become a drive</a>
<a class="sign-up">Sign up to ride</a>
</div>
<p class='application'>Already aplied? Check the status of your application here</p>
<p class='learn-more'>Earn money for inviting friends to drive. Learn more.</p>
</div>
</section>
<section class='phone'>
<div class="phone-text">
<h2>A RIDE IN MINUTES</h2>
<p class='p1'>Request a ride and you'll be on your way in minutes</p>
<p class='p2'>Request.Ride.Repeat</p>
<h2 class="safety">SERIOUS ABOUT SAFETY</h2>
<p class='p3'>From knowing the colot of your driver's car to our 24/7</p>
<p class='p4'>Trust & Safety Terms, we got you.</p>
<h2 class="happy-drivers">HAPPY DRIVERS.</h2>
<h2 class="happy-riders">HAPPY RIDERS.</h2>
<p class='p5'>Ride with us and you'll see why 9 out of 10 rides end with five stars.</p>
</div>
<div class="cellphone">
<img class="mobile" src="assets/images/phone.png" width="450px" >
</div>
</section>
<section class='watch commercial'>
<div class= 'video1-text'>
<h4 class= 'text-box'>WATCH</h4>
<h2 class= 'text-box'>AMPLYFY YOUR RIDE</h2>
<p class= 'text-box'>Lyft's new emblem, Amp is the secret to smooth picups. Lighting up the dashboards nationwide, the device makes it easy for passengers and drives to find each other.
</p>
</div>
<iframe width="700px" height="475px" src="https://www.youtube.com/embed/fLSmUWOYpKw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</section>
<section class= 'watch june'>
<iframe width="700px" height="475px" src="https://www.youtube.com/embed/V7j8Aqxmbs8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<div class='video2-text'>
<h4 class='text-box'>WATCH</h4>
<h2 class='text-box'>JUNE</h2>
<p class='text-box'>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 sharring her life, too.
</p>
</div>
</section>
<section class='watch despacito'>
<div class='video1-text'>
<h4 class='text-box'>WATCH</h4>
<h2 class='text-box'>A GOOD THING GOING</h2>
<p class='text-box'>Launching on TV and online, "ride on the bright side" shows how Lyft continues to prioritize happy drivers, short ETAs, and safety.
</p>
</div>
<iframe width="700px" height="475px" src="https://www.youtube.com/embed/hWYQvs6UrPs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</section>
<section class='footer-1'>
<lu class='log'>
<li class='list-log'>LOG IN</li>
<li class='list-log'>Help</li>
<li class='list-log'>Cities</li>
<li class='list-log'>Airports</li>
<li class='list-log'>Fare Estimate</li>
</lu>
<lu class='partner'>
<li class='list-partner'>PARTNER</li>
<li class='list-partner'>Partnershp</li>
<li class='list-partner'>Enterprise</li>
<li class='list-partner'>Ambassador</li>
<li class='list-partner'>Developers</li>
</lu>
<lu class='learn'>
<li class='list-learn'>LEARN</li>
<li class='list-learn'>Safety</li>
<li class='list-learn'>Blog</li>
<li class='list-learn'>Press</li>
<li class='list-learn'>Careers</li>
</lu>
<lu class='apps'>
<li>
<img class="apple-logo" width="100px" src="assets/images/apple-store.svg">
</li>
<li>
<img class="playstore-logo" width="100px" src="assets/images/google-play.png">
</li>
<li>
<img class="microsoft" width="100px" src="assets/images/microsoft.png">
</li>
</lu>
</section>
<section class='footer-2'>
<!-- SOCIAL MEDIA LOGOS AQUI-->
<i id="icon" class="icon-facebook-circled"></i>
<i id="icon"class="icon-instagrem"></i>
<i id="icon" class="icon-twitter-circled"></i>
<p class='end'>© 2017 Lyft, Inc. TermsPrivacy</p>
</section>
</body>
</html>