<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="google" value="notranslate">

  <title>HitchHike</title>

  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootcards CSS files for desktop, iOS and Android -->
  <!-- You'll only need to load one of these (depending on the device you're using) in production -->

  <!-- Bootcards CSS files for desktop, iOS and Android -->
  <!-- You'll only need to load one of these (depending on the device you're using) in production -->
  <!-- <link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-ios.min.css" rel="stylesheet"> -->
   <link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-desktop.min.css" rel="stylesheet">
  <!--<link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-android.min.css" rel="stylesheet">-->

  <!-- Font awesome -->
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
  <style>
    @import url(http://fonts.googleapis.com/css?family=Roboto:400,100);
    <meta name="viewport" content="width=device-width, initial-scale=1">

    .login-card {
      padding: 40px;
      width: 274px;
      background-color: #F7F7F7;
      margin: 0 auto 10px;
      border-radius: 2px;
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
      overflow: hidden;
    }

    .login-card h1 {
      font-weight: 100;
      text-align: center;
      font-size: 2.3em;
    }

    .login-card input[type=submit] {
      width: 100%;
      display: block;
      margin-bottom: 10px;
      position: relative;
    }

    .login-card input[type=text], input[type=password] {
      height: 44px;
      font-size: 16px;
      width: 100%;
      margin-bottom: 10px;
      -webkit-appearance: none;
      background: #fff;
      border: 1px solid #d9d9d9;
      border-top: 1px solid #c0c0c0;
      /* border-radius: 2px; */
      padding: 0 8px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
    }

    .login-card input[type=text]:hover, input[type=password]:hover {
      border: 1px solid #b9b9b9;
      border-top: 1px solid #a0a0a0;
      -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
      -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    }

    .login {
      text-align: center;
      font-size: 14px;
      font-family: 'Arial', sans-serif;
      font-weight: 700;
      height: 36px;
      padding: 0 8px;
    /* border-radius: 3px; */
    /* -webkit-user-select: none;
      user-select: none; */
    }
   .login-submit {
      /* border: 1px solid #3079ed; */
      border: 0px;
      color: #fff;
      text-shadow: 0 1px rgba(0,0,0,0.1); 
      background-color: #4d90fe;
      /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
    }

    .login-submit:hover {
      /* border: 1px solid #2f5bb7; */
      border: 0px;
      text-shadow: 0 1px rgba(0,0,0,0.3);
      background-color: #357ae8;
      /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
    }

   .login-card a {
      text-decoration: none;
      color: #666;
      font-weight: 400;
      text-align: center;
      display: inline-block;
      opacity: 0.6;
      transition: opacity ease 0.5s;
    }

    .login-card a:hover {
      opacity: 1;
    }

    .login-help {
      width: 100%;
      text-align: center;
      font-size: 12px;
    }
  .white{color:white}
  </style>
</head>
<body>
<!--
<nav class="navbar navbar-dark bg-primary navbar-fixed-top" style="">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" style="color:white" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar "></span>
        <span class="icon-bar "></span>
        <span class="icon-bar "></span>
      </button>
      <a class="navbar-brand" style="color:white" href="#">HitchHike</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class=""><a href="#" class="white">Dashboard</a></li>
        <li class="active"><a href="#" class="white">History</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" class="white"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
        <li><a href="#" class="white"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
      </ul>
    </div>
  </div>
</nav>
-->
<div class="container">    
<div class="row" style="text-align:center">
<div class="col-md-3 col-sm-3"></div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="col-md-12 col-sm-12 col-xs-12 login-card">
    <h1 style="color:" size=6>SIGNUP AS CARDRIVER</h1><br/>
    <form method="POST">
      <input type="text" name="name" placeholder="Full Name">
      <input type="text" name="email" placeholder="E-mail">
      <input type="text" name="phoneno" placeholder="Phone Number">
      <input type="password" name="password" placeholder="Password">
      <input type="password" name="Conformpass" placeholder="Conform Password">
      <input type="text" name="carno" placeholder="Your Car Registration Number">
      <input type="text" name="carbrand" placeholder="Your Car Brand">
      <input type="text" name="carmodel" placeholder="Your Car Model">
      <input type="submit" name="signup" class="login login-submit" value="signup">
    </form>
      
    <div class="login-help">
      <a href="#">Forgot Password</a>
    </div>
</div>
</div>
</div>
</div>

</body>
</html>
