lyft/index.html at gh-pages · Andu15/lyft · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
  <link type="text/css" rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="css/icomoon/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="assets/favicon/favi-lyft.ico" />
  <title>Lyft</title>
</head>

<body>
  <header>
    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo">
          <img class="logo-white" src="assets/images/logo-white.png" alt="logo" />
        </a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="#">Drive</a></li>
          <li><a href="#">Explore</a></li>
          <li><a href="#">Help</a></li>
          <li><a href="#" class="waves-effect waves-teal"><button class="btn-login">Log in</button></a></li>
        </ul>
      </div>
    </nav>
    <section class="introduction">
      <div class="introduction-container">
        <h2 class="introduction-title">turn miles into money</h2>
        <p class="introduction-description">sign up to drive with lyft.</p>
        <input class="introduction-input-phone" type="text"
          onkeypress='return event.charCode >= 48 && event.charCode <= 57' placeholder="Phone number" />
        <div class="btns-container">
          <a class="waves-effect waves-light btn-driver">Become a driver</a>
          <a class="waves-effect waves-teal btn-ride">Sign up to ride</a>
        </div>
        <p class="introduction-subtitle">Already applied? Check the status of your application here.</p>
        <p class="introduction-subtitle">Earn money for inviting friends to drive. Learn more.</p>
      </div>
    </section>
    <div class="gradient"></div>
  </header>
  <section class="presentation">
    <article class="presentation-container">
      <h2 class="presentation-title mr-b">A RIDE IN MINUTES</h2>
      <p class="presentation-subtitle">Request a ride and you'll be on your way in minutes.</p>
      <p class="presentation-subtitle">Request. Ride. Repeat</p>
      <h2 class="presentation-title mr-t mr-b">SERIOUS ABOUT SAFETY</h2>
      <p class="presentation-subtitle">From knowing the color of your drive's car to our 24/7</p>
      <p class="presentation-subtitle">Trust & Safety Team, we got you.</p>
      <h2 class="presentation-title mr-t">HAPPY DRIVERS.</h2>
      <h2 class="presentation-title mr-b">HAPPY RIDERS.</h2>
      <p class="presentation-subtitle">Ride with us and you'll see why 9 out of 10 rides end with five stars.</p>
    </article>
    <figure class="img-container">
      <img class="img-phone" src="./assets/images/phone.png" />
    </figure>
  </section>
  <section class="container-section column-min-max">
    <div class="text-container">
      <p class="subtitle">WATCH</p>
      <h2 class="title">AMPLIFY YOUR RIDE</h2>
      <p class="description">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-container">
      <iframe width="853" height="480" src="https://www.youtube.com/embed/fLSmUWOYpKw" frameborder="0" gesture="media"
        allowfullscreen></iframe>
    </div>
  </section>
  <section class="container-section column-max-min">
    <div class="video-container">
      <iframe width="853" height="480" src="https://www.youtube.com/embed/v8nyGzOLsdw" title="YouTube video player"
        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </div>
    <div class="text-container">
      <p class="subtitle">WATCH</p>
      <h2 class="title">JUNE</h2>
      <p class="description">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="container-section column-min-max">
    <div class="text-container">
      <p class="subtitle">WATCH</p>
      <h2 class="title">A GOOD THING GOING</h2>
      <p class="description">Launching on TV and online, "Ride on the Bright Side" shows how Lyft continues to
        prioritize happy drivers, short ETAs, and safety.</p>
    </div>
    <div class="video-container">
      <iframe width="853" height="480" src="https://www.youtube.com/embed/xj2VWLV0xCU" frameborder="0" gesture="media"
        allowfullscreen></iframe>
    </div>
  </section>
  <footer class="page-footer footer">
    <div class="container">
      <div class="row">
        <div class="col s3">
          <h5 class="white-text">LOG IN</h5>
          <p class="grey-text text-lighten-4 refs">Help</p>
          <p class="grey-text text-lighten-4 refs">Cities</p>
          <p class="grey-text text-lighten-4 refs">Airports</p>
          <p class="grey-text text-lighten-4 refs">Fare Estimate</p>
        </div>
        <div class="col s3">
          <h5 class="white-text">PARTNER</h5>
          <p class="grey-text text-lighten-4 refs">Partnerships</p>
          <p class="grey-text text-lighten-4 refs">Enterprise</p>
          <p class="grey-text text-lighten-4 refs">Ambassadors</p>
          <p class="grey-text text-lighten-4 refs">Developers</p>
        </div>
        <div class="col s3">
          <h5 class="white-text">LEARN</h5>
          <p class="grey-text text-lighten-4 refs">Safety</p>
          <p class="grey-text text-lighten-4 refs">Blog</p>
          <p class="grey-text text-lighten-4 refs">Press</p>
          <p class="grey-text text-lighten-4 refs">Careers</p>
        </div>
        <div class="col s3">
          <figure>
            <img class="dowloand-icon" src="assets/images/apple-store.svg" />
          </figure>
          <figure>
            <img class="dowloand-icon" src="assets/images/google-play.png" />
          </figure>
          <figure>
            <img class="dowloand-icon" src="assets/images/microsoft.png" />
          </figure>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
        <div class="icons-container">
          <span class="icon-facebook icon-icomoon"></span>
          <span class="icon-instagram icon-icomoon"></span>
          <span class="icon-twitter icon-icomoon"></span>
        </div>
        <hr class="line" />
        <p class="copyright">© 2017 Lyft, Inc.TermsPrivacy</p>
      </div>
    </div>
  </footer>

  <!--JavaScript at end of body for optimized loading-->
  <script type="text/javascript" src="js/materialize.min.js"></script>
</body>

</html>