Get A Free Quote
dot

My Car

Technologies Html 5, CSS3
HTML Panda HTML Panda HTML Panda
                            /*
 Table Of Contents

 1.) Homepage
 2.) About Us
 3.) Contact Us
 ===============================================*/

/*
 1.) Homepage
 ----------------------------------------*/

.content {
	background-color: #eeeeee;
	-webkit-box-shadow: 0px 2px 3px rgb(214,214,214) inset;
	-moz-box-shadow: 0px 2px 3px rgb(214,214,214) inset;
	box-shadow: 0px 2px 3px rgb(214,214,214) inset;
}

.banner-container {
	padding: 0 0 0 5px;
	position: relative;
}
.banner-content {
	float: left;
	width: 50%;
	padding-top: 40px;
}
.banner-content p {
	width: 94%;
	color: #6d6e70;
	font-size: 20px;
	line-height: 1.5;
}
.banner-img {
	float: right;
	width: 50%;
	position: absolute;
	top: -31px;
	right: 0;
}

.features-block {
	width: 25%;
	float: left;
	padding-left: 20px;
}
.features-block:first-child {
	padding-left: 0px;
}
.gr-circle {
	background-color: #2cd453;
	width: 90px;
	height: 90px;
	position: absolute;
	right: 10px;
	top: -12px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	display: block;
}
.icon-right-lg {
	width: 55px;
	height: 45px;
	background-position: 0 -22px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 22px;
}
.view-features {
	padding: 23px 0 18px;
	overflow: hidden;
	clear: both;
}
.view-features p {
	padding-left: 30px;
	letter-spacing: -1px;
	margin-bottom: 10px;
}
.tab-content .tab, .tab-content-subpage .tab-subpage {
	display: none;
}
.tab-content .tab:first-child, .tab-content-subpage .tab-subpage:first-child {
	display: block;
}
.tab-content-one {
	background-color: #ffffff;
	padding: 20px 30px 29px 33px;
}
.tab-content-one h2 {
	clear: both;
}
.tab-links {
	float: left;
	width: 70px;
	list-style-type: none;
}
.tab-links li {
	margin-bottom: 5px;
}

.tab-links li a {
	display: block;
	text-align: center;
	padding: 12px 0;
	background-color: #dddddd;
	margin-right: 5px;
}
.tab-links li.active, .tab-links li.active a {
	background-color: #ffffff;
}
.tab-links li a i {
	width: 45px;
	height: 45px;
}

.tab-content, .tab-content-subpage {
	float: left;
	width: 92.5%;
}
.personal-info-wrap {
	padding: 20px 0 50px 0;
}
.user-info-form {
	float: left;
	padding-right: 42px;
	width: 57%;
}
.user-info-block {
	margin-bottom: 6px;
}
.user-info-block label {
	color: #4c4643;
	font-size: 16px;
	line-height: 1.2;
	width: 37%;
	float: left;
	text-transform: capitalize;
	padding-top: 7px;
}
.text-wrap, .sbHolder {
	width: 62%;
	float: left;
	background-color: #eeeeee;
	font-size: 16px;
	line-height: 1.3;
	color: #aaaaaa;
	border: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	padding: 5px;
}

/*Select*/

.sbHolder {
	position: relative;
	height: 30px;
}
.sbSelector {
	background-color: #eeeeee;
	font-size: 16px;
	line-height: 1.3;
	color: #aaaaaa;
	border: none;
	display: block;
	height: 31px;
	width: 100%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	padding: 5px 0 6px;
}
.sbToggle {
	background-image: url('../images/arrow.png');
	background-repeat: no-repeat;
	width: 12px;
	height: 7px;
	background-position: 0 0;
	position: absolute;
	z-index: 999;
	right: 17px;
	top: 12px;
}
.time-cont .sbToggle {
	background-image: inherit;
}
.sbOptions {
	position: absolute;
	width: 100%;
	left: 0;
	background-color: #eeeeee;
	border: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	top: 31px !important

}
.sbOptions li {

}
.sbOptions li:first-child {
	display: none;
}

.sbOptions li a {
	display: block;
	border: none;
	padding: 7px 10px 7px 10px;
	text-align: left;
	color: #aaaaaa;
}

/*Select1*/

.time-cont .sbHolder {
	width: 62px;
}

.select-time {
	float: left;
	width: 62%;
}
.time-cont {
	width: 50%;
	float: left;
}
.time-cont .text-wrap {
	width: 60px;
}
.time-cont span {
	color: #aaaaaa;
	display: inline-block;
	font-size: 16px;
	margin: 7px 0 0 6px;
}
.instruct-wrap {
	float: right;
	width: 43%;
}
.notice-block {
	background-color: #efeee8;
	padding: 12px 3px 10px 10px;
	margin-top: -4px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	margin-bottom: 25px;
}
.notice-block h4 {
	color: #4c4643;
	font-size: 13px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
}
.notice-block h4 strong {
	text-transform: uppercase;
}
.notice-block p {
	color: #4c4643;
	font-size: 13px;
	line-height: 1.1;
	margin-bottom: 12px;
}
.post-detail {
	width: 62%;
	float: left;
}
.post-detail .text-wrap {
	width: 49%;
	margin-right: 9px;
	float: left;
}
.look-btn {
	width: 47%;
	background-color: #0085b2;
	float: left;
	color: #ffffff;
	font-size: 17px;
	border: none;
	padding: 3px 0 5px;
	border-radius: 3px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
}

/*Scroll Bar*/

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	background-color: rgba(221,221,221,1);
	width: 7px;
}
.mCSB_scrollTools .mCSB_draggerRail {
	background-color: rgba(239,238,232,0);
}
.mCSB_inside > .mCSB_container {
	margin-right: 12px;
}

/*Check Box*/

.check-block {
	position: relative;
	margin: 0 0 20px;
}
.check-box {
	opacity: 0;
}
.check-block label {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	line-height: 1.2;
	color: #4c4643;
	font-weight: 600;
	position: relative;
	padding-left: 30px;
	float: left;
}
.check-block label:before, .check-box {
	height: 21px;
	width: 21px;
	left: 0;
	position: absolute;
	top: 0px;
	background: #efeee8;
	content: "";
	border-radius: 3px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
}
.check-box {
	z-index: 9;
}
.check-block label:after {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background: transparent none repeat scroll 0 0;
	border-color: -moz-use-text-color -moz-use-text-color #000 #000;
	border-color: -webkit-use-text-color -webkit-use-text-color #000 #000;
	border-color: #000 #000;
	border-image: none;
	border-style: none none solid solid;
	border-width: medium medium 2px 2px;
	content: "";
	height: 6px;
	left: 5px;
	opacity: 0;
	position: absolute;
	top: 6px;
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg); /* IE 9 */
	-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
	width: 10px;
}
.check-box:checked + label:after {
	opacity: 1;
}

/*?*/

.result-btn-wrap {
	padding: 0 40px 0 30px;
}
.result-btn {
	background-color: #fc5211;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	width: 100%;
	text-align: center;
	border: none;
	padding: 10px 0 3px;
}
.post-add-wrap {
	position: relative;
}

/*Desktop2*/

.result-section, .sub-result-section {
	padding: 53px 0 50px;
}
.sub-tab-content-one {
	padding: 21px 28px 42px 35px;
	background-color: #ffffff;
}
.view-result-wrapper {
	margin: 0 -9px;
}
.view-result-wrapper h3 {
	font-size: 19px;
	color: #0085b2;
	text-align: center;
	margin-bottom: 10px;
}
.result-box {
	float: left;
	width: 33.33%;
	padding: 10px 9px 0;
}
.ract-box {
	padding: 28px 0 25px;
	border: 2px solid #eeeeee;
	text-align: center;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
}
.score-box.ract-box {
	padding: 28px 0 34px;
}
.cost-box.ract-box {
	padding: 28px 0 8px;
}
.accept-box .gr-circle {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto 10px;
	width: 115px;
	height: 115px;
}
.accept-box .icon-right-lg {
	top: 39px;
}
.accept-box strong {
	display: block;
	color: #0085b2;
	font-size: 43px;
	line-height: 1.2;
	font-family: 'Montserrat', sans-serif;
	display: block;
}
.sub-tab-content-two .accept-box strong {
	font-size: 36px;
	margin-bottom: 1px;
	line-height: 1;
}
.sub-tab-content-two .accept-box strong small {
	font-size: 17px;
	font-family: 'Montserrat', sans-serif;
	color: #0085b2;
	display: block;
}
.cost-box-top li {
	display: inline-block;
}
.circle {
	width: 167px;
	height: 167px;
}
.view-details-wrapper {
	padding: 43px 0 0;
}
.view-details-wrapper h2 {
	font-size: 25px;
	color: #0085b2;
	margin-bottom: 18px;
}
.contact-wrap {
	float: left;
	width: 50%;
	padding-right: 62px;
}
.inner-contact-wrap p {
	margin-bottom: 43px;
	line-height: 1.5;
}
.inner-contact-wrap ul li {
	display: inline-block;
}
.cost-box-top {
	padding: 25px 0 40px;
	font-size: 0;
}
.cost-box-bottom ul, .cost-box-bottom li, .cost-box-bottom span {
	display: inline-block;
	vertical-align: middle;
	font-size: 0;
}
.cost-box-bottom span {
	color: #0085b2;
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.1;
	text-align: right;
}
.cost-box-bottom {
	border-top: 1px solid #eeeeee;
	padding: 12px 0 0;
}
.cost-box-bottom li a {
	display: block;
}
.low-cost, .high-cost {
	margin-bottom: 2px;
}
.inner-contact-wrap ul li {
	display: inline-block;
	margin-right: 7px;
}
.inner-contact-wrap  li a, .back-btn {
	font-size: 19px;
	color: #ffffff;
	background-color: #0085b2;
	display: block;
	padding: 7px 11px 10px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
}
.back-btn {
	display: inline-block;
}
.credit-file-wrap {
	float: left;
	width: 50%;
	padding-left: 14px;
}
.credit-file-wrap ul {
	list-style-type: none;
	font-size: 0;
}
.credit-file-wrap p {
	margin-bottom: 30px;
}
.credit-file-wrap ul li {
	background-color: #fff;
	border: 2px solid #eeeeee;
	vertical-align: middle;
	display: inline-block;
	margin-right: 17px;
}
.credit-file-wrap ul li:last-child {
	margin-right: 0;
}
.credit-file-wrap ul li a {
	display: block;
	text-align: center;
}
.view-credit-file {
	margin-bottom: 30px;
}
.view-credit-file p {
	width: 95%;
}
.credit-file-free {
	letter-spacing: -1px;
}
.free-credit-btn {
	display: block;
	text-align: center;
	border: 2px solid #eeeeee;
	padding: 10px 0;
}

/*Circle*/

.circle-prog, .sub-circle-prog {
	width: 167px;
	display: inline-block;
	position: relative;
	text-align: center;
	line-height: 1.2;
	height: 167px;
	position: relative;
}
.circle-prog canvas, .sub-circle-prog canvas {
	vertical-align: top;
}
.circle-prog span, .sub-circle-prog span {
	display: block;
	color: #0085b2;
	font-size: 20px;
	font-family: 'Montserrat', sans-serif;
	position: absolute;
	left: 0;
	right: 0;
	top: 45px;
}
.circle-prog span strong, .sub-circle-prog strong {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 43px;
}

/*Desktop3*/

.sub-credit-file-wrap.credit-file-wrap {
	float: none;
	width: 100%;
	overflow: hidden;
}
.sub-credit-file-wrap .view-credit-file {
	float: left;
	width: 50%;
}
.sub-credit-file-wrap .credit-file-free {
	float: left;
	width: 50%;
	padding-left: 17px;
}
.ui-accordion-header-icon {
	display: none;
}
.accordian-title {
	border: 2px solid #eeeeee;
	color: #0085b2;
	font-size: 14px;
	line-height: 1.2;
	padding: 14px 25px 5px 14px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	cursor: pointer;
	margin-bottom: 10px;
	min-height: 55px;
	display: inline-block;
	width: 100%;
	vertical-align: middle;
}
.accordian-cont p {
	font-size: 13px;
	color: #6d6e70;
	line-height: 1.5;
}
.accordion:nth-child(odd) {
	float: left;
	width: 48%;
}
.accordion .accordian-cont {
	display: none;
}
.accordion:first-child .accordian-block:first-child .accordian-cont {
	display: block;
}
.accordion:nth-child(even) {
	float: right;
	width: 48%;
}
.accordian-cont {
	padding: 0 40px 0 14px;
}
.gr-circle .icon-like {
	top: 29px;
	height: 60px;
	left: 0;
	margin: 0 auto;
	position: absolute;
	right: 0;
	width: 60px;
}
.sub-credit-file-wrap {
	padding: 0 0 5px 0;
}
.sub-tab-content-two .accept-box.ract-box {
	padding: 28px 0 10px;
}
.view-details-subpage {
	padding: 45px 0 18px;
}
.view-details-subpage h2 {
	letter-spacing: -1px;
}
.sub-credit-file-wrap p {
	width: 92%;
}
.accordian-box {
	padding: 7px 0 13px;
}
.back-wrap {
	text-align: right;
}
.sub-tab-content-two {
	padding: 21px 28px 30px 35px;
}
.accordian-title.active {
	border: 2px solid #2dd454;
}
.tab-links li.active a .icon-network {
	background-position: 0 -494px;
}
.tab-links li.active a .icon-user {
	background-position: 7px -76px;
}
.tab-links li a .icon-user {
	background-position: 3px -545px;
}

.tab-links li a .icon-network {
	background-position: 3px -116px;
}

.banner-content h1 {
	letter-spacing: -1.5px;
}

.circle-prog span.percent, .sub-circle-prog span.percent {
	font-size: 43px;
	font-family: 'Montserrat', sans-serif;
}
.circle-prog small {
	color: #0085b2;
	display: block;
	font-family: "Montserrat", sans-serif;
	font-size: 20px;
	left: 0;
	position: absolute;
	right: 0;
	top: 81px;
}


                        
My Car

We created an ease-to-use website that lets people know their car credit score.

My Car Credit Score lets people find whether they are eligible for getting finance and get a complete indication of the price, even without impacting on their credit score. It serves customers with 25 lenders, smooth search and quick results.

They required simple but a well-defined website. We converted Sketch into HTML coding and made the website highly responsive and compatible with multiple devices like mobile, desktop, tablets, etc.