Difference between revisions of "Team:UANL"

Line 2: Line 2:
  
 
<style>
 
<style>
−
:root {
+
 
−
font-size: 14px;
+
−
}
+
−
@media screen and (max-width: 767px){
+
−
:root {
+
−
font-size: 12px;
+
−
}
+
−
}
+
−
html,body{
+
−
padding: 0;
+
−
margin: 0;
+
−
font-family: Lato;
+
−
}
+
 
.slider {
 
.slider {
−
width: 500px;
+
width: 95%;
−
height: 250px;
+
margin: auto;
 
overflow: hidden;
 
overflow: hidden;
−
position: relative;
 
−
text-align: center;
 
−
line-height: 240px;
 
 
}
 
}
−
.slider > .radio {
+
 
−
display: none;
+
.slider ul {
 +
display: flex;
 +
padding: 0;
 +
width: 400%;
 +
 +
animation: cambio 20s infinite alternate linear;
 
}
 
}
  
−
/* slide items */
+
.slider li {
−
.slider > .item {
+
−
position: absolute;
+
−
top: 0;
+
−
left: 0;
+
 
width: 100%;
 
width: 100%;
−
height: 100%;
+
list-style: none;
−
z-index: 1;
+
 
}
 
}
−
.slider > .radio:checked ~ .item {
+
 
−
transition: all .4s ease 0s;
+
.slider img {
−
}
+
−
/* labels ( prev. and next button ) */
+
−
.slider > .label {
+
−
display: none;
+
−
position: absolute;
+
−
z-index: 4;
+
−
top: 0;
+
−
height: 100%;
+
−
width: 30px;
+
−
background-color: rgba( 255, 255, 255, .5 );
+
−
opacity: 0;
+
−
transition: opacity .2s ease 0s;
+
−
}
+
−
.slider:hover > .label {
+
−
opacity: 1;
+
−
transition: opacity .2s ease 0s;
+
−
}
+
−
/* indicators */
+
−
.slider > .indicator {
+
−
position: relative;
+
−
display: inline-block;
+
−
bottom: 5px;
+
−
z-index: 5;
+
−
width: 10px;
+
−
height: 10px;
+
−
border-radius: 5px;
+
−
background-color: rgba( 255, 255, 255, .5 );
+
−
vertical-align: bottom;
+
−
line-height: 1;
+
−
opacity: 0;
+
−
transition: opacity .2s ease 0s;
+
−
}
+
−
.slider:hover > .indicator {
+
−
opacity: 1;
+
−
transition: opacity .2s ease 0s;
+
−
}
+
−
.slider > .indicator label {
+
−
display: block;
+
 
width: 100%;
 
width: 100%;
−
height: 100%;
 
 
}
 
}
  
 +
@keyframes cambio {
 +
0% {margin-left: 0;}
 +
20% {margin-left: 0;}
 +
 +
25% {margin-left: -100%;}
 +
45% {margin-left: -100%;}
 +
 +
50% {margin-left: -200%;}
 +
70% {margin-left: -200%;}
 +
 +
75% {margin-left: -300%;}
 +
100% {margin-left: -300%;}
 +
}
  
−
/* [ active slide item ] asterisks: slide.length - 1 */
 
−
.slider > .radio:checked + * + * + * + * + .item {
 
−
left: 0;
 
−
z-index: 3;
 
−
}
 
−
/* [ previous slide item ] asterisks: slide.length - 2 */
 
−
.slider > .radio:checked + * + * + * + .item,
 
−
.slider > .radio:first-of-type:checked ~ .item:last-of-type {
 
−
left: -100%;
 
−
z-index: 2;
 
−
}
 
−
/* [ next slide item ] asterisks: slide.length */
 
−
.slider > .radio:checked + * + * + * + * + * + .item,
 
−
.slider > .radio:last-of-type:checked ~ .item:first-of-type {
 
−
left: 100%;
 
−
z-index: 2;
 
−
}
 
−
/* [ previous button ] asterisks: ( slide.length - 1 ) * 2 */
 
−
.slider > .radio:checked + * + * + * + * + * + * + * + * + .label,
 
−
.slider > .radio:first-of-type:checked ~ .label:last-of-type {
 
−
left: 0;
 
−
display: block;
 
−
}
 
−
/* [ next button ] asterisks: slide.length * 2 */
 
−
.slider > .radio:checked + * + * + * + * + * + * + * + * + * + * + .label,
 
−
.slider > .radio:last-of-type:checked ~ .label:first-of-type {
 
−
right: 0;
 
−
display: block;
 
−
}
 
−
/* [ active indicator ] asterisks: ( slide.length * 3 ) - 1 */
 
−
.slider > .radio:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + .indicator {
 
−
background-color: rgba( 127, 127, 127, .5 );
 
−
}
 
 
</style>
 
</style>
  
 
<div class="slider">
 
<div class="slider">
−
<input type="radio" name="radio" id="radio01" class="radio" checked="checked">
+
<ul>
−
<input type="radio" name="radio" id="radio02" class="radio">
+
<li>
−
<input type="radio" name="radio" id="radio03" class="radio">
+
  <img src="http://dominicushoeve.com/wp-content/uploads/ktz/latest-high-resolution-wallpaper-1920x1080-70558-pictures-high-resolution-wallpaper-30whtvl34j4r12m8b0c1sa.jpg" alt="">
−
<input type="radio" name="radio" id="radio04" class="radio">
+
</li>
−
<input type="radio" name="radio" id="radio05" class="radio">
+
<li>
−
<div class="item" id="item01"><img src="https://unsplash.it/500/250?image=1021" alt="slide-image-01"></div>
+
  <img src="http://youghaltennisclub.ie/wp-content/uploads/2014/06/Tennis-Wallpaper-High-Definition-700x300.jpg" alt="">
−
<div class="item" id="item02"><img src="https://unsplash.it/500/250?image=1032" alt="slide-image-02"></div>
+
</li>
−
<div class="item" id="item03"><img src="https://unsplash.it/500/250?image=1023" alt="slide-image-03"></div>
+
<li>
−
<div class="item" id="item04"><img src="https://unsplash.it/500/250?image=1024" alt="slide-image-04"></div>
+
  <img src="http://welltechnically.com/wp-content/uploads/2013/08/android-wallpapers-700x300.jpg" alt="">
−
<div class="item" id="item05"><img src="https://unsplash.it/500/250?image=1035" alt="slide-image-05"></div>
+
</li>
−
<label class="label" id="label01" for="radio01"></label>
+
<li>
−
<label class="label" id="label02" for="radio02"></label>
+
  <img src="http://welltechnically.com/wp-content/uploads/2013/09/android-widescreen-wallpaper-14165-hd-wallpapers-700x300.jpg" alt="">
−
<label class="label" id="label03" for="radio03"></label>
+
</li>
−
<label class="label" id="label04" for="radio04"></label>
+
</ul>
−
<label class="label" id="label05" for="radio05"></label>
+
</div>
−
<span class="indicator"><label id="indicator01" for="radio01"></label></span>
+
−
<span class="indicator"><label id="indicator02" for="radio02"></label></span>
+
−
<span class="indicator"><label id="indicator03" for="radio03"></label></span>
+
−
<span class="indicator"><label id="indicator04" for="radio04"></label></span>
+
−
<span class="indicator"><label id="indicator05" for="radio05"></label></span>
+
−
</div>
+
  
 
</html>
 
</html>

Revision as of 01:59, 22 October 2019