<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ng-include="'views/components/Header.html'"></div> <div class="container"> <div class="form-group"> <div class="label-title">Select Watch Brand </div> <div class="row" style="margin-top: 3%;"> <div class="col-md-2 col-md-offset-5"> <select class="form-control ng-pristine ng-valid ng-touched" ng-model="watch.brand" style=" margin: 0 auto;"> <option value="Rolex" selected="">Rolex</option> </select> </div> </div> </div> <div class="col-md-12"> <div class="label-title">Select Watch Model </div> <div class="well-none" style="margin-top: 3%"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active" carousel> <div class="row" carousel-item ng-repeat="watches in watchesCarouselObj"> <div class="col-sm-2 col-xs-6" ng-repeat="watch in watches" ng-click="getWatchModel(watch.identifier);"> <a> <div ng-class="watch.className"> <img src="http://lcc.dotcmscloud.com/contentAsset/image/{{watch.uploadimage}}/fileAsset" alt="" class="img-responsive" style="height: 140px;"> </div> </a> <div style="text-align: center;font-family: Calibri"> <h4 class="watchModel">{{watch.model}}</h4> </div> </div> </div> <!--/row--> </div> </div> </div> <!--/myCarousel--> </div> <div class="clear"></div> <!--/well--> </div> <ul class="thumbnails"> <li class="col-sm-3"> <P class="upload_title">WATCH FRONT</P> <div class="fff"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/230x240" alt=""></a> </div> <button class="btn btn-primary uploadbutton" class="">CLICK TO UPLOAD</button> </div> </li> <li class="col-sm-3"> <P class="upload_title">WATCH FRONT</P> <div class="fff"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/230x240" alt=""></a> </div> <button class="btn btn-primary uploadbutton" class="">CLICK TO UPLOAD</button> </div> </li> <li class="col-sm-3"> <P class="upload_title">WATCH FRONT</P> <div class="fff"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/230x240" alt=""></a> </div> <button class="btn btn-primary uploadbutton" class="">CLICK TO UPLOAD</button> </div> </li> <li class="col-sm-3"> <P class="upload_title">WATCH FRONT</P> <div class="fff"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/230x240" alt=""></a> </div> <button class="btn btn-primary uploadbutton">CLICK TO UPLOAD</button> </div> </li> </ul> </div> <div class="form-group"> <div class="label-title">Serial Number</div> <div class="row" style="margin-top: 3%;"> <div class="col-md-2 col-md-offset-5"> <input type="text" class="form-control" ng-model="watch.caseSerial" style=" margin: 0 auto;"> </div> </div> <div class="clear"></div> </div> <div class="form-group"> <div class="label-title">Case Size</div> <div class="row" style="margin-top: 3%;"> <div class="col-md-2 col-md-offset-5"> <select ng-model="size" class="form-control ng-pristine ng-valid ng-touched" ng-options="item.size as item.size for item in sizes" ng-change="getCaseSize()" style=" margin: 0 auto; font-family: calibri;"> <option style="font-family: calibri;">Select</option> </select> </div> </div> <div class="clear"></div> </div> <div class="form-group"> <div class="label-title">Case</div> <div style="margin: 0 auto;text-align: center; margin-left: 25%;margin-top: 3%;"> <div class="col-sm-4 col-md-2" ng-repeat="caseType in watchCaseSizes"> <img src="http://lcc.dotcmscloud.com/contentAsset/image/{{caseType.caseimage}}/fileAsset" ng-class="caseType.className" style="width: 100px; height: 90px;" ng-click="highlightCase($index)"> <div style="color: black;">{{caseType.casetype}}</div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="clear"></div> <div class="form-group"> <div class="label-title">Visual Appearance</div> <div style="margin: 0 auto;text-align: center;margin-left: 10%; margin-top: 3%"> <div class="col-sm-4 col-md-2" ng-repeat="aestheticCondition in watchAestheticConditions"> <img src="http://lcc.dotcmscloud.com/contentAsset/image/{{aestheticCondition.aestheticimage}}/fileAsset" ng-class="aestheticCondition.className" style="width: 100px;" ng-click="getVisualAppearence($index)"> <div style="color: black;">{{aestheticCondition.aeshesticcondition}}</div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="form-group"> <div class="label-title">Time Keeping</div> <div style="margin: 0 auto;text-align: center; margin-top: 3%"> <div> <div class="radio" style="display : inline;"> <label style="width : 100px;"><input type="radio" name="optradio" value="Poor" ng-model="$scope.timeKeeping" style="margin-top: 4px" ng-change="getTimeKeepingIdentifier(4)">Poor</label> </div> <div class="radio" style="display : inline;"> <label class="timekeeping-radio"><input type="radio" name="optradio" value="Fair" ng-model="$scope.timeKeeping" style="margin-top: 4px" ng-change="getTimeKeepingIdentifier(3)">Fair</label> </div> <div class="radio" style="display : inline;"> <label class="timekeeping-radio"><input type="radio" name="optradio" value="Good" ng-model="$scope.timeKeeping" style="margin-top: 4px" ng-change="getTimeKeepingIdentifier(2)">Good</label> </div> <div class="radio" style="display : inline;"> <label class="timekeeping-radio"><input type="radio" name="optradio" value="Very Good" ng-model="$scope.timeKeeping" style="margin-top: 4px" ng-change="getTimeKeepingIdentifier(1)">Very Good</label> </div> <div class="radio" style="display : inline;"> <label class="timekeeping-radio"><input type="radio" name="optradio" value="Excellent" ng-model="$scope.timeKeeping" style="margin-top: 4px" ng-change="getTimeKeepingIdentifier(0)">Excellent</label> </div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="clear"></div> <div style="margin-bottom: 30px;margin-left: 44%"> <button ng-click="uploadFile()" class="btn btn-primary">Continue</button> </div> </div> <div ng-include="'views/components/Footer.html'"></div>

.uploadbutton{ margin-left:20%; } .upload_title{ margin-left:20% ; } .timekeeping-radio{ margin-left:5% ; } .label-title{ font-family: Calibri;font-size: 24px;font-weight: bolder;text-align: center } li { list-style-type:none;}