Difference between revisions of "Team:KU Leuven/Entrepreneurship"

Line 1: Line 1:
  
 +
{{KU_Leuven}}
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
body {
+
       
  background: #000;
+
        h4 {
  overflow: hidden;
+
            margin-bottom: 10px;
}
+
        }
 +
        .background{
 +
            background:url(https://static.igem.org/mediawiki/2017/c/cb/KU_Leuven_Homepage2.png);
 +
            position: initial;
 +
            background-size: 100%;
 +
            padding: 0 10px 0 10px;
 +
        }
  
#showcase {
+
        #grad {
  display: flex;
+
            background: -webkit-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Safari 5.1-6.0 */
  justify-content: center;
+
            background: -o-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Opera 11.1-12.0 */
  align-items: center;
+
            background: -moz-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Firefox 3.6-15 */
  margin: 0 auto;
+
            background: linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Standard syntax */
  width: 1000px;
+
        }
  height: 700px;
+
        p.head::first-letter {
}
+
            color: #cc3333;
 +
            font-size: 40px;
 +
        }
 +
       
 +
        p {
 +
          text-align:justify;
 +
          font-size: 20px;
 +
        }
 +
        </style>
 +
       
 +
            <div id="grad">
 +
                   
 +
                        <br>
 +
                   
 +
                        <div class="background">
 +
                            <h1 style="text-align:center; padding: 30px; font-size:50px; color: white;">Entrepreneurship</h1>
 +
                                <p class="head" style="text-align:center;color: white; padding: 10px 10px 60px 10px; font-size:15px;">.... </p>
 +
                       
 +
                        </div>
 +
                    <br>
 +
                    <div class="container">
 +
                   
 +
                        <p class="head" style="text-align:justify; padding: 0px 50px 0px 50px;">
 +
                            Booo!</p>
  
section {
+
                    </div>
  display: inline-block;
+
  position: relative;
+
  width: 25%;
+
  height: 100%;
+
  background-size: cover;
+
}
+
section:after {
+
  content: '';
+
  position: absolute;
+
  top: 0;
+
  width: 100%;
+
  height: 100%;
+
  -moz-transition: all 0.5s;
+
  -o-transition: all 0.5s;
+
  -webkit-transition: all 0.5s;
+
  transition: all 0.5s;
+
}
+
  
section:nth-child(1) {
 
  -moz-animation: section-1 8s both infinite;
 
  -webkit-animation: section-1 8s both infinite;
 
  animation: section-1 8s both infinite;
 
}
 
  
@-moz-keyframes section-1 {
 
  0%, 20%, 100% {
 
    background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%;
 
    -webkit-clip-path: polygon(23% 18%, 95% 13%, 100% 91%, 55% 87%);
 
  }
 
  25%, 45% {
 
    background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%;
 
    -webkit-clip-path: polygon(95% 10%, 100% 80%, 62% 77%, 45% 12%);
 
  }
 
  50%, 70% {
 
    background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%;
 
    -webkit-clip-path: polygon(100% 67%, 48% 63%, 28% 9%, 95% 3%);
 
  }
 
  75%, 95% {
 
    background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%;
 
    -webkit-clip-path: polygon(78% 72%, 58% 34%, 95% 27%, 100% 73%);
 
  }
 
}
 
@-webkit-keyframes section-1 {
 
  0%, 20%, 100% {
 
    background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%;
 
    -webkit-clip-path: polygon(23% 18%, 95% 13%, 100% 91%, 55% 87%);
 
  }
 
  25%, 45% {
 
    background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%;
 
    -webkit-clip-path: polygon(95% 10%, 100% 80%, 62% 77%, 45% 12%);
 
  }
 
  50%, 70% {
 
    background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%;
 
    -webkit-clip-path: polygon(100% 67%, 48% 63%, 28% 9%, 95% 3%);
 
  }
 
  75%, 95% {
 
    background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%;
 
    -webkit-clip-path: polygon(78% 72%, 58% 34%, 95% 27%, 100% 73%);
 
  }
 
}
 
@keyframes section-1 {
 
  0%, 20%, 100% {
 
    background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%;
 
    -webkit-clip-path: polygon(23% 18%, 95% 13%, 100% 91%, 55% 87%);
 
  }
 
  25%, 45% {
 
    background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%;
 
    -webkit-clip-path: polygon(95% 10%, 100% 80%, 62% 77%, 45% 12%);
 
  }
 
  50%, 70% {
 
    background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%;
 
    -webkit-clip-path: polygon(100% 67%, 48% 63%, 28% 9%, 95% 3%);
 
  }
 
  75%, 95% {
 
    background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%;
 
    -webkit-clip-path: polygon(78% 72%, 58% 34%, 95% 27%, 100% 73%);
 
  }
 
}
 
section:nth-child(2) {
 
  -moz-animation: section-2 8s both infinite;
 
  -webkit-animation: section-2 8s both infinite;
 
  animation: section-2 8s both infinite;
 
}
 
  
@-moz-keyframes section-2 {
+
       
  0%, 20%, 100% {
+
       
    background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%;
+
    -webkit-clip-path: polygon(0% 7%, 100% 9%, 95% 93%, 5% 95%);
+
  }
+
  25%, 45% {
+
    background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%;
+
    -webkit-clip-path: polygon(100% 3%, 95% 95%, 5% 90%, 0% 5%);
+
  }
+
  50%, 70% {
+
    background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%;
+
    -webkit-clip-path: polygon(95% 83%, 5% 78%, 0% 6%, 100% 11%);
+
  }
+
  75%, 95% {
+
    background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%;
+
    -webkit-clip-path: polygon(5% 79%, 0% 21%, 100% 16%, 95% 83%);
+
  }
+
}
+
@-webkit-keyframes section-2 {
+
  0%, 20%, 100% {
+
    background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%;
+
    -webkit-clip-path: polygon(0% 7%, 100% 9%, 95% 93%, 5% 95%);
+
  }
+
  25%, 45% {
+
    background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%;
+
    -webkit-clip-path: polygon(100% 3%, 95% 95%, 5% 90%, 0% 5%);
+
  }
+
  50%, 70% {
+
    background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%;
+
    -webkit-clip-path: polygon(95% 83%, 5% 78%, 0% 6%, 100% 11%);
+
  }
+
  75%, 95% {
+
    background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%;
+
    -webkit-clip-path: polygon(5% 79%, 0% 21%, 100% 16%, 95% 83%);
+
  }
+
}
+
@keyframes section-2 {
+
  0%, 20%, 100% {
+
    background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%;
+
    -webkit-clip-path: polygon(0% 7%, 100% 9%, 95% 93%, 5% 95%);
+
  }
+
  25%, 45% {
+
    background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%;
+
    -webkit-clip-path: polygon(100% 3%, 95% 95%, 5% 90%, 0% 5%);
+
  }
+
  50%, 70% {
+
    background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%;
+
    -webkit-clip-path: polygon(95% 83%, 5% 78%, 0% 6%, 100% 11%);
+
  }
+
  75%, 95% {
+
    background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%;
+
    -webkit-clip-path: polygon(5% 79%, 0% 21%, 100% 16%, 95% 83%);
+
  }
+
}
+
section:nth-child(3) {
+
  -moz-animation: section-3 8s both infinite;
+
  -webkit-animation: section-3 8s both infinite;
+
  animation: section-3 8s both infinite;
+
}
+
 
+
@-moz-keyframes section-3 {
+
  0%, 20%, 100% {
+
    background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%;
+
    -webkit-clip-path: polygon(5% 11%, 100% 14%, 95% 88%, 0% 91%);
+
  }
+
  25%, 45% {
+
    background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%;
+
    -webkit-clip-path: polygon(100% 14%, 95% 84%, 0% 91%, 5% 7%);
+
  }
+
  50%, 70% {
+
    background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%;
+
    -webkit-clip-path: polygon(95% 79%, 0% 86%, 5% 7%, 100% 3%);
+
  }
+
  75%, 95% {
+
    background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%;
+
    -webkit-clip-path: polygon(0% 85%, 5% 14%, 100% 3%, 95% 95%);
+
  }
+
}
+
@-webkit-keyframes section-3 {
+
  0%, 20%, 100% {
+
    background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%;
+
    -webkit-clip-path: polygon(5% 11%, 100% 14%, 95% 88%, 0% 91%);
+
  }
+
  25%, 45% {
+
    background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%;
+
    -webkit-clip-path: polygon(100% 14%, 95% 84%, 0% 91%, 5% 7%);
+
  }
+
  50%, 70% {
+
    background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%;
+
    -webkit-clip-path: polygon(95% 79%, 0% 86%, 5% 7%, 100% 3%);
+
  }
+
  75%, 95% {
+
    background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%;
+
    -webkit-clip-path: polygon(0% 85%, 5% 14%, 100% 3%, 95% 95%);
+
  }
+
}
+
@keyframes section-3 {
+
  0%, 20%, 100% {
+
    background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%;
+
    -webkit-clip-path: polygon(5% 11%, 100% 14%, 95% 88%, 0% 91%);
+
  }
+
  25%, 45% {
+
    background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%;
+
    -webkit-clip-path: polygon(100% 14%, 95% 84%, 0% 91%, 5% 7%);
+
  }
+
  50%, 70% {
+
    background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%;
+
    -webkit-clip-path: polygon(95% 79%, 0% 86%, 5% 7%, 100% 3%);
+
  }
+
  75%, 95% {
+
    background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%;
+
    -webkit-clip-path: polygon(0% 85%, 5% 14%, 100% 3%, 95% 95%);
+
  }
+
}
+
section:nth-child(4) {
+
  -moz-animation: section-4 8s both infinite;
+
  -webkit-animation: section-4 8s both infinite;
+
  animation: section-4 8s both infinite;
+
}
+
 
+
@-moz-keyframes section-4 {
+
  0%, 20%, 100% {
+
    background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%;
+
    -webkit-clip-path: polygon(5% 18%, 89% 21%, 62% 73%, 0% 83%);
+
  }
+
  25%, 45% {
+
    background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%;
+
    -webkit-clip-path: polygon(57% 31%, 45% 67%, 0% 77%, 5% 18%);
+
  }
+
  50%, 70% {
+
    background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%;
+
    -webkit-clip-path: polygon(45% 57%, 0% 67%, 5% 8%, 72% 12%);
+
  }
+
  75%, 95% {
+
    background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%;
+
    -webkit-clip-path: polygon(0% 77%, 5% 18%, 47% 21%, 32% 67%);
+
  }
+
}
+
@-webkit-keyframes section-4 {
+
  0%, 20%, 100% {
+
    background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%;
+
    -webkit-clip-path: polygon(5% 18%, 89% 21%, 62% 73%, 0% 83%);
+
  }
+
  25%, 45% {
+
    background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%;
+
    -webkit-clip-path: polygon(57% 31%, 45% 67%, 0% 77%, 5% 18%);
+
  }
+
  50%, 70% {
+
    background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%;
+
    -webkit-clip-path: polygon(45% 57%, 0% 67%, 5% 8%, 72% 12%);
+
  }
+
  75%, 95% {
+
    background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%;
+
    -webkit-clip-path: polygon(0% 77%, 5% 18%, 47% 21%, 32% 67%);
+
  }
+
}
+
@keyframes section-4 {
+
  0%, 20%, 100% {
+
    background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%;
+
    -webkit-clip-path: polygon(5% 18%, 89% 21%, 62% 73%, 0% 83%);
+
  }
+
  25%, 45% {
+
    background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%;
+
    -webkit-clip-path: polygon(57% 31%, 45% 67%, 0% 77%, 5% 18%);
+
  }
+
  50%, 70% {
+
    background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%;
+
    -webkit-clip-path: polygon(45% 57%, 0% 67%, 5% 8%, 72% 12%);
+
  }
+
  75%, 95% {
+
    background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%;
+
    -webkit-clip-path: polygon(0% 77%, 5% 18%, 47% 21%, 32% 67%);
+
  }
+
}
+
@media (max-width: 1000px) {
+
  #showcase {
+
    position: absolute;
+
    top: -115px;
+
    left: -200px;
+
    margin: 0;
+
    -moz-transform: scale(0.65, 0.65);
+
    -ms-transform: scale(0.65, 0.65);
+
    -webkit-transform: scale(0.65, 0.65);
+
    transform: scale(0.65, 0.65);
+
  }
+
}
+
</style>
+
<figure id="showcase">
+
  <section></section>
+
  <section></section>
+
  <section></section>
+
  <section></section>
+
</figure>
+
 
</html>
 
</html>
 
{{KU_Leuven_footer}}
 
{{KU_Leuven_footer}}

Revision as of 01:24, 30 October 2017


Entrepreneurship

....


Booo!