LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS3 Testimonials Slider

He promptly completed the task at hand and communicates really well till the project reaches the finishing line. I was pleased with his creative design and will definitely be hiring him again.

Steve Kruger

UI/UX Designer at Woof Design Studio
He promptly completed the task at hand and communicates really well till the project reaches the finishing line. I recommend him to anyone who wants their work done professionally. The project ... read more

John Doe

Developer Relations at Woof Studios
He promptly completed the task at hand and communicates really well till the project reaches the finishing line. I was pleased with his creative design and will definitely be hiring him again.

Steve Stevenson

CEO Woof Web Design Studios
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

*{
  box-sizing:border-box;
}
html, body{
  height:100%;
  font: normal 1em/1.5 "Open Sans";
  background-color:#ddd;
  background-size:cover;
}
a{
  color:#ccc;
}
.container{
  width:500px;
  min-height:315px;
  margin:0 auto;
  position:relative;
  padding-bottom:30px;
  overflow:hidden;
}
h1{
  text-align:center;
  text-shadow:0 1px white;
  color:#02303F;
}
h2{
  color:#736861; 
  margin:15px 0 5px;
  text-shadow:0 1px rgba(255,255,255,0.5);
}
h6{
  color:#928566; 
  margin:0;
}
input[type="radio"] {
position: absolute;
width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
padding: 0;
margin: -1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
label{
  display:block;
  width:32%;
  border: 4px solid white;
  position:absolute;
  bottom:5px;
  cursor: pointer;
  transition: border-color 0.3s linear;
}

label.second{
  left:34%;
}
label.third{
  left:68%;
}

blockquote{
  margin:0;
  padding:30px;
  width:500px;
  background-color: #DB532B;
  color:white;
  box-shadow: 0 5px 2px rgba(0,0,0,0.1);
  position:relative;
  transition: background-color 0.6s linear;
}

blockquote:after { 
  content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  top: 100%; 
  border: solid transparent; 
  border-top-color: #DA532B;
  border-left-color:#DA532B;
  border-width: 10px; 
  left: 10%; 
} 
#second:checked ~ .two blockquote {
  background-color:purple;
}
.two blockquote:after{
  border: solid transparent; 
  border-top-color: purple;
  border-left-color:purple;
  border-width: 10px;
}
#third:checked ~ .three blockquote{
  background-color:#54885F;
}
.three blockquote:after{
  border: solid transparent; 
  border-top-color: #54885F;
  border-left-color: #54885F;
  border-width: 10px;
}
.quotes{
  position:absolute;
  color:rgba(255,255,255,0.5);
  font-size:5em;
}
.leftq{
  top:-25px;
  left:5px;
}
.rightq{
  bottom:-10px;
  right:5px;
}
img{
  float:left;
  margin-right: 20px;
}
.slide{
  position:absolute;
  left:-100%;
  opacity:0;
  transition: all 0.6s ease-in;
}

#first:checked ~ label.first {
  border-width:6px;
  border-color:#DB532B;
}
#second:checked ~ label.second {
  border-width:6px; border-color:purple;
}
#third:checked ~ label.third {
  border:6px solid #54885F;
}

#first:checked ~ div.one {
  left:0;
  opacity:1;
}
#second:checked ~ div.two {
  left:0;
  opacity:1;
}
#third:checked ~ div.three {
  left:0;
  opacity:1;
}
Host Instantly Drag and Drop Website Builder

 

Wed, 11/29/2017 - 11:18

Related Codes

Pen ID
Pen ID
Pen ID