automaticalldramatic/CSS3-Testimonials-Slider.markdown

## CSS3-Testimonials-Slider.markdown

      
    Raw
  

              CSS3-Testimonials-Slider.markdown
            
          
    CSS3 Testimonials Slider

Metro-style testimonials slider
A Pen by Sara Soueidan on CodePen.
License.

  
## index.html
<h1> CSS3 Testimonials Slider</h1>
<div class="container">
  <input type="radio" name="nav" id="first" checked/>
  <input type="radio" name="nav" id="second" />
  <input type="radio" name="nav" id="third" />

  <label for="first" class="first"></label>
<label for="second"  class="second"></label>
<label for="third" class="third"></label>

  <div class="one slide">
    <blockquote>
      <span class="leftq quotes">&ldquo;</span> 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. <span class="rightq quotes">&bdquo; </span>
    </blockquote>
    <img src="data:image/jpeg;base64,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" width="170" height="130" />
    <h2>Steve Kruger</h2>
    <h6>UI/UX Designer at Woof Design Studio</h6>
  </div>

  <div class="two slide">
    <blockquote>
      <span class="leftq quotes">&ldquo;</span> 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 ... <a href="#"> read more</a><span class="rightq quotes">&bdquo; </span>
    </blockquote>
    <img src="http://behance.vo.llnwd.net/profiles14/297668/projects/3041537/f4d6311b432c4804f1c8045459df9647.jpg" width="170" height="130" />
    <h2>John Doe</h2>
    <h6>Developer Relations at Woof Studios</h6>
  </div>

  <div class="three slide">
    <blockquote>
      <span class="quotes leftq"> &ldquo;</span> 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. <span class="rightq quotes">&bdquo; </span>
    </blockquote>
    <img src="http://media.digitalcameraworld.com/files/2012/10/People_photography_composition_tips_PHG18.chap4_.n_p38_39.jpg" width="170" height="130" />
    <h2>Steve Stevenson</h2>
    <h6>CEO Woof Web Design Studios</h6>
  </div>


</div>

## script.js


*/
/*
A free PSD is available.
Inspired by Subash Dharel's work on Dribbble:
http://dribbble.com/shots/757402-FREEe-Metro-Testimonial

## style.css
@import url(http://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;
}
	<h1> CSS3 Testimonials Slider</h1>
	<div class="container">
	<input type="radio" name="nav" id="first" checked/>
	<input type="radio" name="nav" id="second" />
	<input type="radio" name="nav" id="third" />

	<label for="first" class="first"></label>
	<label for="second" class="second"></label>
	<label for="third" class="third"></label>

	<div class="one slide">
	<blockquote>
	<span class="leftq quotes">“</span> 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. <span class="rightq quotes">&bdquo; </span>
	</blockquote>
	<img src="data:image/jpeg;base64,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" width="170" height="130" />
	<h2>Steve Kruger</h2>
	<h6>UI/UX Designer at Woof Design Studio</h6>
	</div>

	<div class="two slide">
	<blockquote>
	<span class="leftq quotes">“</span> 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 ... <a href="#"> read more</a><span class="rightq quotes">&bdquo; </span>
	</blockquote>
	<img src="http://behance.vo.llnwd.net/profiles14/297668/projects/3041537/f4d6311b432c4804f1c8045459df9647.jpg" width="170" height="130" />
	<h2>John Doe</h2>
	<h6>Developer Relations at Woof Studios</h6>
	</div>

	<div class="three slide">
	<blockquote>
	<span class="quotes leftq"> “</span> 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. <span class="rightq quotes">&bdquo; </span>
	</blockquote>
	<img src="http://media.digitalcameraworld.com/files/2012/10/People_photography_composition_tips_PHG18.chap4_.n_p38_39.jpg" width="170" height="130" />
	<h2>Steve Stevenson</h2>
	<h6>CEO Woof Web Design Studios</h6>
	</div>


	</div>


	*/
	/*
	A free PSD is available.
	Inspired by Subash Dharel's work on Dribbble:
	http://dribbble.com/shots/757402-FREEe-Metro-Testimonial
	@import url(http://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;
	}