Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.
- Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
- Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
- Internet Explorer/Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5
- Opera: Presiona Ctrl+F5.
@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;
}