Vehicle Maintenance

UI-design for vehicle maintenance checks

by Neil Daley

HTML

<div class="boxleft">
  
  <p class="center large">VEHICLE CHECK</p>
  
 
 <nav>
  <ul class="vc">
    <li>
      <a class="dropdown" href="#">Vehicle</a>
      <ul>
    <li><a href="http://cssdeck.com/labs/full/da9azzqv">Add</a></li>
    <li><a href="#">Edit</a>
    <li><a href="#">Remove</a></li>
    </ul>
    </li>
    <li>
      <a class="dropdown" href="#">Status</a>
    <ul>
    <li><a href="#">Schedules</a></li>
    <li><a href="#">Appointment</a></li>
    </ul>
    </li>
    <li>
      <a class="dropdown" href="#">Logs</a>
      <ul>
    <li><a href="#">Tune-Ups</a></li>
    <li><a href="#">Battery</a></li>
    <li><a href="#">Tires</a></li>
    <li><a href="#">Brakes</a></li>
    </ul>
    </li>
    <li>
      <a href="http://cssdeck.com/labs/full/bpzlkvlc">Home</a>
    </li>   
  </ul>
</nav> 

 </br></br></br></br>
 <div class="boxinner1">
 <p class="center large">WELCOME</p>
 This section would display warm welcome for using the app....
 </div>
 
 <div class="boxinner2">
 <p class="center large">REMINDERS</p>
 This section would remind the user of upcoming events required on specific vehicle...
 </div>
 
 
 <!--
 <div id="Vehicle" class="tabcontent">
   <h3>Vehicle</h3>
  </div>
  
 
  <button class="tablink">Vehicle</button>
  
  <button class="tablink">Status</button>
  
  <button class="tablink">Updates</button>
  
  <button class="tablink">Deals</button> 

</br>
<p style="color: white; text-align: center">Vehicle Information</p>
  
<label style="color: white" for="tbVehicleType">Type:</label>
<input type="textbox" id="tbVehicleType" /></br>
  
<label style="color: white" for="tbVehicleType">Make:</label>
<input type="textbox" id="tbVehicleMake" /></br>

<label style="color: white" for="tbVehicleModel">Model:</label>
<input type="textbox" id="tbVehicleModel" /></br>
  -->
 
</div>

CSS

.boxleft {
  float: left;
  width: 300px;
  height: 500px;
  border-radius: 10px;
  /*background-color: blue;*/
  background: linear-gradient(#0066ff, #0099ff, #00ccff);
}
/*
.boxinner1 {
  float: left;
  width: 300px;
  height: 20px;
  border-radius: 10px;
}

.boxinner2 {
  float: left;
  width: 300px;
  height: 20px;
  border-radius: 10px;
}*/

p.center {
    text-align: center;
    color: white;
}

p.large {
    font-size: 100%;
}

nav ul {
	-webkit-font-smoothing:antialiased;
	text-shadow:0 1px 0 #FFF;
    background: #ddd;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

nav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    min-width: 25%;
}

nav a {
    background: #ddd;
    color: #444;
    display: block;
    font: bold 11px/15px sans-serif;
    padding: 0px 5px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}

nav .dropdown:after {
    content: ' ▶';
}
nav .dropdown:hover:after{
	content:'\25bc'
}
nav li:hover a {
    background: #ccc;
}

nav li ul {
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}

nav li:hover ul {
    opacity: 1;
    top: 15px;
    visibility: visible;
}

nav li ul li {
    float: none;
    width: 100%;
}
nav li ul a:hover {
    background: #bbb;
}

/*

nav ul {
	-webkit-font-smoothing:antialiased;
	text-shadow:0 1px 0 #FFF;
    background: #ddd;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
nav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    min-width:...