<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-12"> <ul class="nav nav-tabs tabsbar" role="tablist"> <li class="active"><a href="#pet" role="tab" id="pets" data-toggle="tab">Pet Info.</a></li> <li><a href="#vet" role="tab" data-toggle="tab" id="vets">Vets & Hospitals</a></li> <li><a href="#shop" role="tab" data-toggle="tab" id="shops">Pet Food Shop</a></li> <li><a href="#training" role="tab" data-toggle="tab" id="trainer"> Pet Trainer</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="pet"> <!-- next div Pet infomation--> <div class="container"> <div class="row listnow"> <div class="col-sm-6 col-sm-offset-3"> <h1 class="infolist" id="pets1"> Pet Infomation</h1> </div> <div class="col-sm-12"> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-3 control-label labelname">Owner Name</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="name" placeholder="Name"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">State</label> <div class="col-sm-6"> <select class="form-control input-lg"> <option>State</option> <option>a</option> <option>a</option> <option>a</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">City</label> <div class="col-sm-6"> <select class="form-control input-lg"> <option>City</option> <option>a</option> <option>a</option> <option>a</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Address</label> <div class="col-sm-6"> <textarea class="form-control input-lg" rows="3" name="address" placeholder="Address"></textarea> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Email</label> <div class="col-sm-6"> <input type="email" class="form-control input-lg" name="email" placeholder="Email"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Mobile No.</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="number" placeholder="Mobile Number"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Breed</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="breed" placeholder="Breed Name"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Sex</label> <div class="col-sm-6 btn-group"> <button type="button" class="btn btn-default btn-lg">Male</button> <button type="button" class="btn btn-default btn-lg">Female</button> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Color</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="color" placeholder="Color"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Age</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="age" placeholder="0Year 0Month 0day"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Price</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="price" placeholder="Min Price"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Pic</label> <div class="col-sm-6"> <input type="file" class="form-control input-lg" name="pic"> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-2"> <button type="submit" class="btn btn-primary btn-lg btn-block" id="pets1">Save</button> </div> </div> </form> </div> </div> </div> </div> <!--next vet div--> <div class="tab-pane" id="vet"> <div class="container"> <div class="row listnow"> <div class="col-sm-6 col-sm-offset-3"> <h1 class="infolist" id="vets2">Vets & Hospitals</h1> </div> <div class="col-sm-12"> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-3 control-label labelname">Hospitals/Clinic Name</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="hosname" placeholder="Hospitals/Clinic Name"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label lablename">Dr. Name</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="drname" placeholder="Dr.Abc"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">State</label> <div class="col-sm-6"> <select class="form-control input-lg"> <option>State</option> <option>a</option> <option>a</option> <option>a</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">City</label> <div class="col-sm-6"> <select class="form-control input-lg"> <option>City</option> <option>a</option> <option>a</option> <option>a</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Address</label> <div class="col-sm-6"> <textarea class="form-control input-lg" rows="3" name="address" placeholder="Address"></textarea> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Email</label> <div class="col-sm-6"> <input type="email" class="form-control input-lg" name="email" placeholder="Email"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Tel.</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="telnumber" placeholder="Tel. Number"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Mobile No.</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="number" placeholder="Mobile Number"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Open Time</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="opentime" placeholder="09:00AM"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Close Time</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="closetime" placeholder="09:00PM"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Working Day</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="workingday" placeholder="Mon-Sat"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Pic</label> <div class="col-sm-6"> <input type="file" class="form-control input-lg" name="pic"> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-2"> <button type="submit" class="btn btn-primary btn-lg btn-block" id="vets2">Save</button> </div> </div> </form> </div> </div> </div> </div> <!-- next Shop div--> <div class="tab-pane" id="shop"> <div class="container"> <div class="row listnow"> <div class="col-sm-6 col-sm-offset-3"> <h1 class="infolist" id="shops3">Pet Food Shop</h1> </div> <div class="col-sm-12"> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-3 control-label labelname">Shop Name</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="shopname" placeholder="Shop Name"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Owner Name</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="name" placeholder="Name"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">State</label> <div class="col-sm-6"> <select class="form-control input-lg"> <option>State</option> <option>a</option> <option>a</option> <option>a</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">City</label> <div class="col-sm-6"> <select class="form-control input-lg"> <option>City</option> <option>a</option> <option>a</option> <option>a</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Address</label> <div class="col-sm-6"> <textarea class="form-control input-lg" rows="3" name="address" placeholder="Address"></textarea> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Email</label> <div class="col-sm-6"> <input type="email" class="form-control input-lg" name="email" placeholder="Email"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Mobile No.</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="number" placeholder="Mobile Number"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Web Site</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="website" placeholder="http://www.abc.com"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Open Time</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="sopentime" placeholder="09:00AM"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Close Time</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="sclosetime" placeholder="09:00PM"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Working Day</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="soffday" placeholder="Mon-Sat"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Pic</label> <div class="col-sm-6"> <input type="file" class="form-control input-lg" name="pic"> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-2"> <button type="submit" class="btn btn-primary btn-lg btn-block" id="shops3">Save</button> </div> </div> </form> </div> </div> </div> </div> <!-- next div pet trainer--> <div class="tab-pane" id="training"> <div class="container"> <div class="row listnow"> <div class="col-sm-6 col-sm-offset-3"> <h1 class="infolist" id="trainer4">Pet Trainer</h1> </div> <div class="col-sm-12"> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-3 control-label labelname">Pet Training School Name</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="schoolname" placeholder="Pet Training School Name"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Owner Name</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="name" placeholder="Name"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">State</label> <div class="col-sm-6"> <select class="form-control input-lg"> <option>State</option> <option>a</option> <option>a</option> <option>a</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">City</label> <div class="col-sm-6"> <select class="form-control input-lg"> <option>City</option> <option>a</option> <option>a</option> <option>a</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Address</label> <div class="col-sm-6"> <textarea class="form-control input-lg" rows="3" name="address" placeholder="Address"></textarea> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Email</label> <div class="col-sm-6"> <input type="email" class="form-control input-lg" name="email" placeholder="Email"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Mobile No.</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="number" placeholder="Mobile Number"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Web Site</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="website" placeholder="http://www.abc.com"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Open Time</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="sopentime" placeholder="09:00AM"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Close Time</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="sclosetime" placeholder="09:00PM"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Working Day</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg" name="soffday" placeholder="Mon-Sat"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label labelname">Pic</label> <div class="col-sm-6"> <input type="file" class="form-control input-lg" name="pic"> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-2"> <button type="submit" class="btn btn-primary btn-lg btn-block" id="trainer4">Save</button> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div>

.infolist { text-align: center; font-family: 'Merriweather', serif; font-size:2em; color: #fff; line-height:200%; border-radius:5px; } .labelname { font-family: 'Merriweather', serif; font-size:1.1em; } .listnow .btn-primary { background-color:#ff5b5b; font-family: 'Merriweather', serif; font-size:1.5em; } .listnow .btn-primary { border-color:#ff5b5b; } .listnow .btn-primary:active, .listnow .btn-primary:focus { outline: none; } .tabsbar { margin-top:20px; border-radius-top:3px; } .tabsbar li a { font-family: 'Merriweather', serif; font-size:1.1em; color:#313b4b; } .tabsbar li #pets:hover { background-color:#1aa3a3; color:white; } .tabsbar li #vets:hover { background-color:#005b96; color:white; } .tabsbar li #shops:hover { background-color:#00C060; color:white; } .tabsbar li #trainer:hover { background-color:#930072; color:white; } #pets1 { background-color:#1aa3a3; border:1px solid #1aa3a3; } #vets2 { border:1px solid #005b96;; background-color:#005b96; } #shops3 { border:1px solid #00C060;; background-color:#00C060; } #trainer4 { border:1px solid #930072; background-color:#930072; } .nav-tabs { border-bottom: 1px solid #313b4b; } .nav-tabs>li.active>#pets, .nav-tabs>li.active>#pets:hover, .nav-tabs>li.active>#pets:focus { background-color:#1aa3a3; color:white; } .nav-tabs>li.active>#vets, .nav-tabs>li.active>#vets:hover, .nav-tabs>li.active>#vets:focus { background-color:#005b96; color:white; } .nav-tabs>li.active>#shops, .nav-tabs>li.active>#shops:hover, .nav-tabs>li.active>#shops:focus { background-color:#00C060; color:white; } .nav-tabs>li.active>#trainer, .nav-tabs>li.active>#trainer:hover, .nav-tabs>li.active>#trainer:focus { background-color:#930072; color:white; } @media(max-width: 420px){ .infolist{font-size: 1.5em;} }