Difference between revisions of "Team:UANL"

 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{UANL/header}}
 +
 
<html>
 
<html>
  
−
<styles>
+
<style>
−
//how many images we have
+
−
$slides: 4;
+
  
−
// how much we want each slide to show
+
.slider {
−
$time_per_slide: 4;
+
width: 95%;
 +
margin: auto;
 +
overflow: hidden;
 +
}
  
−
// total time needed for full animation
 
−
$total_animation_time: $time_per_slide * $slides;
 
  
−
body{
+
.slider .text {
−
  background:#000;
+
    font-size: 30px;
 +
    background-color: rgba(255,255,255,0.7);
 +
    position: relative;
 +
    top: -60px;
 +
    padding: 20px;
 +
    text-align: center;
 
}
 
}
−
.container{
 
−
  margin:50px auto;
 
−
  width:500px;
 
−
  height:300px;
 
−
  overflow:hidden;
 
−
  border:10px solid;
 
−
  border-top-color:#856036;
 
−
  border-left-color:#5d4426;
 
−
  border-bottom-color:#856036;
 
−
  border-right-color:#5d4426;
 
−
  position:relative;
 
  
 +
.slider ul {
 +
display: flex;
 +
padding: 0;
 +
width: 800%;
 +
 +
animation: cambio 20s infinite alternate linear;
 
}
 
}
−
.photo{
+
 
−
  position:absolute;
+
.slider li {
−
  animation:round #{$total_animation_time}s infinite;
+
width: 100%;
−
  opacity:0;
+
list-style: none;
−
 
+
 
}
 
}
−
@keyframes round{ 
 
−
  25%{
 
−
    opacity:1;
 
−
  }
 
−
  40%{
 
−
    opacity:0;
 
−
  }
 
−
}
 
  
−
@for $index from 1 to $slides + 1{
+
.slider img {
−
  img:nth-child(#{$index}){
+
max-height: 500px;
−
     animation-delay:#{$total_animation_time - $time_per_slide * $index}s
+
     width: auto;
−
  }
+
 
}
 
}
−
 
 
  
−
</styles>
+
@keyframes cambio {
 +
0% {margin-left: 0;}
 +
10% {margin-left: 0;}
 +
 +
15% {margin-left: -100%;}
 +
25% {margin-left: -100%;}
 +
 +
30% {margin-left: -200%;}
 +
40% {margin-left: -200%;}
 +
 +
45% {margin-left: -300%;}
 +
55% {margin-left: -300%;}
  
−
<div class="container">
+
60% {margin-left: -400%;}
−
  <img class='photo'  src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
+
70% {margin-left: -400%;}
−
  <img class='photo'  src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
+
−
  <img class='photo'  src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
+
−
  <img class='photo'  src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
+
  
−
</div>
+
75% {margin-left: -500%;}
 +
85% {margin-left: -500%;}
 +
 
 +
90% {margin-left: -600%;}
 +
100% {margin-left: -600%;}
 +
 
 +
}
 +
 
 +
</style>
 +
 
 +
<div class="slider">
 +
<ul>
 +
<li>
 +
  <img src="https://static.igem.org/mediawiki/2019/2/2d/T--UANL--mty.jpg" alt="" class="mx-auto d-block">
 +
<div class="text">Monterrey, Nuevo León, México</div>
 +
</li>
 +
<li>
 +
  <img src="https://static.igem.org/mediawiki/2019/c/c0/T--UANL--mty3.jpg" alt="" class="mx-auto d-block">
 +
<div class="text">Universidad Autónoma de Nuevo León</div>
 +
</li>
 +
<li>
 +
  <img src="https://static.igem.org/mediawiki/2019/a/ac/T--UANL--fcb.png" alt="" class="mx-auto d-block">
 +
<div class="text">School of Biology, UANL</div>
 +
</li>
 +
<li>
 +
  <img src="https://static.igem.org/mediawiki/2019/d/d1/T--UANL--FCQ.jpg" alt="" class="mx-auto d-block">
 +
<div class="text">School of Chemistry, UANL</div>
 +
</li>
 +
 
 +
<li>
 +
  <img src="https://static.igem.org/mediawiki/2019/e/e7/T--UANL--FIME.jpg" alt="" class="mx-auto d-block">
 +
<div class="text">School of Mechanical and Electrical Engineering, UANL</div>
 +
</li>
 +
 
 +
<li>
 +
  <img src="https://static.igem.org/mediawiki/2019/c/cb/T--UANL--fcfm.jpg" alt="" class="mx-auto d-block">
 +
<div class="text">School of Mathematics and Physics</div>
 +
</li>
 +
 
 +
<li>
 +
  <img src="https://static.igem.org/mediawiki/2019/8/86/T--UANL--CIDEB.jpg" alt="" class="mx-auto d-block">
 +
<div class="text">Bilingual Education  Research and Development Center, UANL</div>
 +
</li>
 +
 
 +
<li>
 +
  <img src="https://static.igem.org/mediawiki/2019/e/e0/T--UANL--design--diagramaIgem.jpeg" alt="" class="mx-auto d-block">
 +
<div class="text">Graphic resume</div>
 +
</li>
 +
 
 +
 
 +
</ul>
 +
</div>
  
 
</html>
 
</html>
 +
 +
 +
{{UANL/footer}}

Latest revision as of 02:40, 22 October 2019

  • Monterrey, Nuevo León, México
  • Universidad Autónoma de Nuevo León
  • School of Biology, UANL
  • School of Chemistry, UANL
  • School of Mechanical and Electrical Engineering, UANL
  • School of Mathematics and Physics
  • Bilingual Education Research and Development Center, UANL
  • Graphic resume