Difference between revisions of "Team:KU Leuven/HP/HP Main"

Line 1: Line 1:
−
{{KU_Leuven}}
 
 
<html>
 
<html>
 +
<style type="text/css">
 +
*{
 +
  margin: 0;
 +
  padding: 0;
 +
  -webkit-box-sizing: border-box;
 +
          box-sizing: border-box;
 +
}
  
−
<body>
+
.igem_2017_content_wrapper {
 +
padding-top: 50px;
 +
padding-bottom: 50px;
 +
width: 100%;
 +
display: block;
 +
position: relative;
 +
background-color: #a8a6a6;
 +
min-height: 100vh;
 +
font-family: 'Lato', Tahoma, Geneva, sans-serif;
  
−
<img src="https://static.igem.org/mediawiki/2017/6/60/HEKCite-01.png" alt="HTML5 Icon" width="100" style="center" >
+
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
 +
box-shadow: 0 6px 12px rgba(0,0,0,.175);
 +
}
 +
h1{
 +
  font-size: 2.5rem;
 +
  font-family: 'Montserrat';
 +
  font-weight: normal;
 +
  color: #444;
 +
  text-align: center;
 +
  margin: 2rem 0;
 +
}
  
−
</body>
+
.wrapper{
−
</html>
+
  width: 90%;
 +
  margin: 0 auto;
 +
  max-width: 80rem;
 +
}
  
 +
.cols{
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -ms-flex-wrap: wrap;
 +
      flex-wrap: wrap;
 +
  -webkit-box-pack: center;
 +
      -ms-flex-pack: center;
 +
          justify-content: center;
 +
}
  
 +
.col{
 +
  width: calc(25% - 2rem);
 +
  margin: 1rem;
 +
  cursor: pointer;
 +
}
  
 +
.container{
 +
  -webkit-transform-style: preserve-3d;
 +
          transform-style: preserve-3d;
 +
-webkit-perspective: 1000px;
 +
        perspective: 1000px;
 +
}
  
 +
.front,
 +
.back{
 +
  background-size: cover;
 +
background-position: center;
 +
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 +
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 +
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 +
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 +
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 +
-webkit-backface-visibility: hidden;
 +
        backface-visibility: hidden;
 +
text-align: center;
 +
min-height: 280px;
 +
height: auto;
 +
border-radius: 10px;
 +
color: #fff;
 +
font-size: 1.5rem;
 +
}
  
 +
.back{
 +
  background: #cedce7;
 +
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
 +
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
 +
  background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
 +
}
  
 +
.front:after{
 +
position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    z-index: 1;
 +
    width: 100%;
 +
    height: 100%;
 +
    content: '';
 +
    display: block;
 +
    opacity: .6;
 +
    background-color: #000;
 +
    -webkit-backface-visibility: hidden;
 +
            backface-visibility: hidden;
 +
    border-radius: 10px;
 +
}
 +
.container:hover .front,
 +
.container:hover .back{
 +
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 +
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 +
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 +
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 +
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 +
}
  
 +
.back{
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    width: 100%;
 +
}
  
 +
.inner{
 +
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
 +
            transform: translateY(-50%) translateZ(60px) scale(0.94);
 +
    top: 50%;
 +
    position: absolute;
 +
    left: 0;
 +
    width: 100%;
 +
    padding: 2rem;
 +
    -webkit-box-sizing: border-box;
 +
            box-sizing: border-box;
 +
    outline: 1px solid transparent;
 +
    -webkit-perspective: inherit;
 +
            perspective: inherit;
 +
    z-index: 2;
 +
}
  
 +
.container .back{
 +
    -webkit-transform: rotateY(180deg);
 +
            transform: rotateY(180deg);
 +
    -webkit-transform-style: preserve-3d;
 +
            transform-style: preserve-3d;
 +
}
  
 +
.container .front{
 +
    -webkit-transform: rotateY(0deg);
 +
            transform: rotateY(0deg);
 +
    -webkit-transform-style: preserve-3d;
 +
            transform-style: preserve-3d;
 +
}
  
 +
.container:hover .back{
 +
  -webkit-transform: rotateY(0deg);
 +
          transform: rotateY(0deg);
 +
  -webkit-transform-style: preserve-3d;
 +
          transform-style: preserve-3d;
 +
}
  
 +
.container:hover .front{
 +
  -webkit-transform: rotateY(-180deg);
 +
          transform: rotateY(-180deg);
 +
  -webkit-transform-style: preserve-3d;
 +
          transform-style: preserve-3d;
 +
}
  
−
{{KU_Leuven_footer}}
+
.front .inner p{
 +
  font-size: 2rem;
 +
  margin-bottom: 2rem;
 +
  position: relative;
 +
}
 +
 
 +
.front .inner p:after{
 +
  content: '';
 +
  width: 4rem;
 +
  height: 2px;
 +
  position: absolute;
 +
  background: #C6D4DF;
 +
  display: block;
 +
  left: 0;
 +
  right: 0;
 +
  margin: 0 auto;
 +
  bottom: -.75rem;
 +
}
 +
 
 +
.front .inner span{
 +
  color: rgba(255,255,255,0.7);
 +
  font-family: 'Montserrat';
 +
  font-weight: 300;
 +
}
 +
 
 +
@media screen and (max-width: 64rem){
 +
  .col{
 +
    width: calc(33.333333% - 2rem);
 +
  }
 +
}
 +
 
 +
@media screen and (max-width: 48rem){
 +
  .col{
 +
    width: calc(50% - 2rem);
 +
  }
 +
}
 +
 
 +
@media screen and (max-width: 32rem){
 +
  .col{
 +
    width: 100%;
 +
    margin: 0 0 2rem 0;
 +
  }
 +
}
 +
</style>
 +
<div class="igem_2017_content_wrapper">
 +
<div class="wrapper">
 +
  <h1>Human Practices</h1>
 +
  <div class="cols">
 +
<div class="col" ontouchstart="this.classList.toggle('hover');">
 +
<div class="container">
 +
<div class="front" style="background-image: url(https://unsplash.it/500/500/)">
 +
<div class="inner">
 +
<p>Human Practices Gold</p>
 +
              <span>Lorem ipsum</span>
 +
</div>
 +
</div>
 +
<div class="back">
 +
<div class="inner">
 +
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col" ontouchstart="this.classList.toggle('hover');">
 +
<div class="container">
 +
<div class="front" style="url(https://unsplash.it/511/511/)">
 +
<div class="inner">
 +
<p>Silver</p>
 +
              <span>Lorem ipsum</span>
 +
</div>
 +
</div>
 +
<div class="back">
 +
<div class="inner">
 +
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col" ontouchstart="this.classList.toggle('hover');">
 +
<div class="container">
 +
<div class="front" style="background-image: url(https://unsplash.it/502/502/)">
 +
<div class="inner">
 +
<p>Education</p>
 +
              <span>Lorem ipsum</span>
 +
</div>
 +
</div>
 +
<div class="back">
 +
<div class="inner">
 +
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col" ontouchstart="this.classList.toggle('hover');">
 +
<div class="container">
 +
<div class="front" style="background-image: url(https://unsplash.it/503/503/)">
 +
<div class="inner">
 +
<p>Public Engagement</p>
 +
              <span>Lorem ipsum</span>
 +
</div>
 +
</div>
 +
<div class="back">
 +
<div class="inner">
 +
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</html>

Revision as of 20:59, 19 September 2017

Human Practices

Human Practices Gold

Lorem ipsum

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Silver

Lorem ipsum

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Education

Lorem ipsum

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Public Engagement

Lorem ipsum

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.