CSS
/*
Author: Ashfaq Ahmed @ Codeconvey.
Author URI: http://www.codeconvey.com/
*/
#cc-slider {
text-align: center;
margin: 0 auto;
max-width: 850px;
position:relative;
}
#cc-slider input {
display: none;
}
#cc-slider label, a {
color: #ef023f;
cursor: pointer;
text-decoration: none;
}
#cc-slider label:hover {
color: #ff0042 !important;
}
#slide1:checked ~ #cc-slides .inner { margin-left:0; }
#slide2:checked ~ #cc-slides .inner { margin-left:-100%; }
#slide3:checked ~ #cc-slides .inner { margin-left:-200%; }
#slide4:checked ~ #cc-slides .inner { margin-left:-300%; }
#slide5:checked ~ #cc-slides .inner { margin-left:-400%; }
#overflow {
width: 100%;
overflow: hidden;
}
#cc-slides article img {
width: 100%;
}
#cc-slides .inner {
width: 500%;
line-height: 0;
}
#cc-slides article {
width: 20%;
float: left;
}
#controls {
margin: -8% 0 0 84%;
width: 15%;
height: 50px;
}
#controls label {
display: none;
width: 50px;
height: 50px;
}
#active {
margin: 23% 0 0;
text-align: center;
}
#active label {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
width: 10px;
height: 10px;
background: #f89e67;
}
#active label:hover {
background: #ccc;
border-color: #777 !important;
}
#controls label:hover {
opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
background: url('../images/next.png') no-repeat;
float: right;
margin: 0 10px 0 0;
display: block;
background-color:#ef023f;
}
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
background: url('../images/prev.png') no-repeat;
float: left;
margin: 0 0 0 17px;
display: block;
background-color:#ef023f;
}
/* cctooltip Box */
.cctooltip {
color: #FFFFFF;
font-style: italic;
line-height: 20px;
margin-top: 250px;
opacity: 0;
position: absolute;
text-align: left;
-webkit-transform: translateZ(0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.cctooltip h3 {
color: #FFFFFF;
margin: 0 0 5px;
font-weight: normal;
font-size: 16px;
font-style: normal;
background: none repeat scroll 0 0 #222222;
padding: 5px;
}
.cctooltip h4 {
color: #FFFFFF;
margin: 0 0 5px;
font-weight: normal;
font-size: 14px;
font-style: normal;
background: none repeat scroll 0 0 #222222;
padding: 5px;
text-align:right;
width:106px;
}
/* cc-slider Styling */
#cc-slides {
margin: 0;
padding: 1%;
background: #fff;
}
/* Animation */
#cc-slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
#cc-slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label{
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
#slide1:checked ~ #cc-slides article:nth-child(1) .cctooltip,
#slide2:checked ~ #cc-slides article:nth-child(2) .cctooltip,
#slide3:checked ~ #cc-slides article:nth-child(3) .cctooltip,
#slide4:checked ~ #cc-slides article:nth-child(4) .cctooltip,
#slide5:checked ~ #cc-slides article:nth-child(5) .cctooltip {
opacity: 1;
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;
}
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Chivo);
body {
font-family: 'Lato',Arial,sans-serif;
color: #333;
background:#CACACA;
margin: 0 auto;
overflow-x: hidden;
}
/* -------------------------------------------------------------------------------------------
PAGE LAYOUT PURPOSE ONLY - MAY NOT REQUIRE
---------------------------------------------------------------------------------------------- *
/* Container & Wrapper */
.wrapper {
background: #fff;
overflow: auto;
margin-top: 50px;
padding: 2em;
}
/* Columns */
.column{ float:left;}
.colum_full{ width:100%;}
.colum_6{ width:60%;}
.colum_5{ width:50%;}
.colum_4{ width:40%;}
.colum_3{ width:30%;}
.colum_2{ width:20%;}
.colum_1{ width:10%;}
.column_half{
float: left;
margin: 0 2%;
width: 46%;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container {
margin-right: auto;
margin-left: auto;
}
/* To Navigation Style */
.codeconTop {
background:#523D1F;
font-size: 0.69em;
line-height: 2.2;
padding: 0;
text-transform: uppercase;
width: 100%;
}
.codeconTop a {
color: #fff;
display: inline-block;
letter-spacing: 0.1em;
padding: 2em;
text-decoration: none;
}
.codeconTop a:hover {
background: rgba(255,255,255,0.95);
color: #716d62;
}
.codeconTop span.right {
float: right;
}
.codeconTop span.right a {
float: left;
display: block;
}
header {
text-align: center;
margin: 0 auto;
max-width: 100%;
position: relative;
padding-top:50px;
}
section {
display: block;
font-size: 22px;
font-weight: 300;
line-height: 32px;
padding: 2em 4em 0;
text-align: center;
}
.descriptions{
margin: 0 auto;
padding-bottom: 0;
padding-left:72px;
line-height:25px;
}
h1 {
font-size: 2.625em;
font-weight: 300;
line-height: 1.3;
margin: 0;
}
h2 {
font-size: 24px;
line-height: 1.3;
margin: 0;
}
.clearfix {
clear: both;
}
strong{
font-size:14px;
}
em{
font-size:11px;
}
.cctop {
background:#222222;
padding:12px;
overflow: auto;
}
.navbar-brand {
color:#FFFFFF;
}
a.navbar-brand :hover{ color:#FFFFFF;}
.menus {
padding: 2em 0 3em;
}
.menus a {
display: inline-block;
margin: 0.5em;
padding: 0.7em 1.1em;
outline: none;
background:#FFFFFF;
color: rgba(0,0,0,0.3);
text-decoration: none;
font-weight: 700;
opacity: 1;
-webkit-transition: all 0.2s;
transition: all 0.2s;
color:#608ebd;
}
.menus a:hover{
color:#0156ac;
}
.bottom {
padding-bottom: 4em;
color: rgba(0,0,0,0.4);
text-align:center;
}
.bottom a {
display: inline-block;
margin-top: 0.5em;
color:#FFFFFF;
text-decoration:none;
}
footer {
background-color: #FFFFFF;
padding:12px;
margin-top: 60px;
color: #BBBBBB;
font-family: 'Chivo',Helvetica,Arial,sans-serif;
font-size: 11px;
font-weight: 200;
letter-spacing: 2px;
line-height: 14px;
text-transform: uppercase;
text-align:center;
}
footer a{
color: #BBBBBB;
}
