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

Line 2: Line 2:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
−
*,*:before,*:after {box-sizing:inherit;margin:0; padding:0; border:0 none; position: relative;}
+
body, html {
−
html {
+
height: 100%
−
background: #000;
+
}
−
box-sizing:border-box;
+
−
font-family: 'Vollkorn', sans-serif;
+
−
font-size: 1rem;
+
−
color: #000;
+
−
}
+
  
−
@media screen and (min-width: 700px) {
+
.bgimg {
−
body > article {
+
background-image: url('https://static.igem.org/mediawiki/2017/5/55/KU_Leuven_Background_ComingSoon.png');
−
display: flex;
+
height: 100vh;
−
flex-wrap: wrap;
+
background-position: center;
−
}
+
background-size: cover;
−
figure {
+
position: relative;
−
background: #eee;
+
color: white;
−
width: calc( 50% + 1px);
+
font-family: "Courier New", Courier, monospace;
−
height: 100vh;
+
font-size: 5000px;
−
margin: 0 auto 10vh 0;
+
−
position: sticky;
+
−
top: 0;
+
−
overflow: hidden;
+
−
box-shadow: 4px -4px 8px rgba(0,0,0,.4);
+
−
}
+
−
figure::after {
+
−
content: '';
+
−
position: absolute;
+
−
top: 5vmin;
+
−
right: 5vmin;
+
−
bottom: 5vmin;
+
−
left: 45%;
+
−
border: 2px dashed #fff;
+
−
outline: 1px solid #fff;
+
−
outline-offset: -5vmin;
+
−
backdrop-filter: grayscale(1);
+
−
pointer-events: none;
+
−
}
+
−
figure:nth-of-type(2n)::after {
+
−
right: 45%;
+
−
left: 5vmin;
+
−
}
+
−
section {
+
−
background: #fff;
+
−
width: calc(50% + 1px);
+
−
height: 100vh;
+
−
margin: 0 0 10vh auto;
+
−
position: sticky;
+
−
top: 0;
+
−
// overflow: hidden;
+
−
padding: 5vmin;
+
−
box-shadow: -4px -4px 8px rgba(0,0,0,.4);
+
−
}
+
−
figure:nth-of-type(1),
+
−
section:nth-of-type(1) {
+
−
margin: 0 0 10vh 0;
+
−
width: 50%;
+
−
}
+
−
figure:nth-of-type(2n) {
+
−
margin: 0 0 10vh auto;
+
−
box-shadow: -4px -4px 8px rgba(0,0,0,.4);
+
−
}
+
−
section:nth-of-type(2n) {
+
−
margin: 0 auto 10vh 0;
+
−
box-shadow: 4px -4px 8px rgba(0,0,0,.4);
+
 
}
 
}
−
figure:last-of-type,
+
 
−
section:last-of-type {
+
.topleft {
−
margin-bottom: 0;
+
position: absolute;
−
}
+
top: 0;
−
section::before {
+
left: 16px;
−
background: inherit;
+
}
−
z-index: 1;
+
 
−
content: '';
+
.bottomleft {
−
position: absolute;
+
position: absolute;
−
top: 50%;
+
bottom: 0;
−
left:0;
+
left: 16px;
−
width: 7vmin;
+
}
−
height: 7vmin;
+
 
−
transform: translate(calc(-50% + 1px), -50%) rotate(-45deg);
+
.middle {
−
clip-path: polygon(-15% -15%, 110% 0%, 0% 110%);
+
position: absolute;
−
box-shadow: -4px -2px 8px rgba(0,0,0,.4);
+
top: 50%;
−
border-radius: 1.5vmin 0 0 0;
+
left: 50%;
−
}
+
transform: translate(-50%, -50%);
−
section:nth-of-type(2n)::before {
+
text-align: center;
−
left:auto;
+
}
−
right: 0;
+
 
−
transform: translate(calc(50% - 1px), -50%) rotate(-45deg) scale(-1);
+
hr {
−
}
+
margin: auto;
−
section::after {
+
width: 40%;
−
content: '';
+
}
−
position: absolute;
+
</style>
−
top: 5vmin;
+
<div class="bgimg">
−
right: 45%;
+
  <div class="topleft">
−
bottom: 5vmin;
+
<p>KU_Leuven iGEM</p>
−
left: 5vmin;
+
  </div>
−
border: 2px dashed #fff;
+
  <div class="middle">
−
outline: 1px solid #fff;
+
<h1>COMING SOON</h1>
−
outline-offset: -5vmin;
+
<hr style="margin:auto;width:40%">
−
backdrop-filter: invert(1);
+
<p id="demo" style="font-weight:bold;font-size:60px;">date</p>
−
pointer-events: none;
+
  </div>
−
}
+
  <div class="bottomleft">
−
section:nth-of-type(2n):after {
+
<p>Human Practices</p>
−
right: 5vmin;
+
  </div>
−
left: 45%;
+
−
}
+
−
figure img {
+
−
min-width: 100%;
+
−
min-height: 100%;
+
−
object-fit: cover;
+
−
object-position: center;
+
−
}
+
−
section > div {
+
−
display: flex;
+
−
flex-direction: column;
+
−
align-items: center;
+
−
height: 100%;
+
−
padding: 1rem;
+
−
}
+
−
h1,
+
−
h2 {
+
−
margin: 15% 0 auto;
+
−
font-size: calc(5vmin + 3vmax);
+
−
text-align: center;
+
−
font-weight: 700;
+
−
line-height: 1;
+
−
word-spacing: .5rem;
+
−
}
+
−
p {
+
−
text-align: right;
+
−
width: 100%;
+
−
font-family: "Cormorant", serif;
+
−
font-weight: 400;
+
−
font-style: italic;
+
−
font-size: calc(1.5vmin + 1.75vmax);
+
−
margin-bottom: 5%;
+
−
}
+
−
a {
+
−
color: transparent;
+
−
-webkit-text-stroke: 2px #212121;
+
−
text-decoration: none;
+
−
    font-weight: 900;
+
−
    letter-spacing: 2px;
+
−
}
+
−
a:hover, a:focus {
+
−
-webkit-text-stroke: 1px #999;
+
−
}
+
−
}
+
−
</style>
+
−
<article>
+
−
<figure>
+
−
<img src='https://unsplash.it/450/800?image=508' alt />
+
−
</figure>
+
−
<section>
+
−
<div>
+
−
<h1>Scrolling half by half</h1>
+
−
<p>Made in pure #CSS and almost all is "old properties" method. And a bit imagination.<br/>
+
−
Yes, the flexbox is old now.</p>
+
−
</div>
+
−
</section>
+
−
+
−
<figure>
+
−
<img src='https://unsplash.it/450/800?image=817' alt />
+
−
</figure>
+
−
<section>
+
−
<div>
+
−
<h2>I'm Kseso,<br/>
+
−
&ldquo;a #CSS observer&rdquo;</h2>
+
−
<p>Ramajero Argonauta, Enredique Amanuense de #CSS.</p>
+
 
</div>
 
</div>
−
</section>
+
<script type="text/javascript">
−
+
// Set the date we're counting down to
−
<figure>
+
var countDownDate = new Date("Oct 31, 2017 23:59:59").getTime();
−
<img src='https://unsplash.it/450/800?image=948' alt />
+
 
−
</figure>
+
// Update the count down every 1 second
−
<section>
+
var x = setInterval(function() {
−
<div>
+
 
−
<h2><a href='https://escss.blogspot.com'>&xi;sCSS Blog</a></h2>
+
  // Get todays date and time
−
<p>#impoCSSible inside EsCSS. A Spanish #CSS blog where the borders & limits of #CSS disappear.</p>
+
  var now = new Date().getTime();
−
</div>
+
 
−
</section>
+
  // Find the distance between now an the count down date
−
+
  var distance = countDownDate - now;
−
<figure>
+
 
−
<img src='https://unsplash.it/450/800?image=737' alt />
+
  // Time calculations for days, hours, minutes and seconds
−
</figure>
+
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
−
<section>
+
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
−
<div>
+
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
−
<h2>#impoCSSible is nothing</h2>
+
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
−
<p>You don´t need Javascript or #CSS processors either for almost 100% of what you want to do.</p>
+
 
−
</div>
+
  // Display the result in an element with id="demo"
−
</section>
+
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
−
+
  + minutes + "m " + seconds + "s ";
−
<figure>
+
 
−
<img src='https://unsplash.it/450/800?image=870' alt />
+
  // If the count down is finished, write some text
−
</figure>
+
  if (distance < 0) {
−
<section>
+
clearInterval(x);
−
<div>
+
document.getElementById("demo").innerHTML = "EXPIRED";
−
<h2>Idea from E.Bouças´s <a href='https://codepen.io/eduardoboucas/full/qdaOWv/'>pen</a></h2>
+
  }
−
<p>Without jQuery or Javascript, nor fixed position (bye IOs problems)</p>
+
}, 1000);
−
</div>
+
</script>
−
</section>
+
</html>
−
+
 
−
<figure>
+
−
<img src='https://unsplash.it/450/800?image=743' alt />
+
−
</figure>
+
−
<section>
+
−
<div>
+
−
<h2>Images from unsplash.it</h2>
+
−
<p>Because it´s the best for demos. Thanks, guys!</p>
+
−
</div>
+
−
</section>
+
−
+
−
<figure>
+
−
<img src='https://unsplash.it/450/800?image=452' alt />
+
−
</figure>
+
−
<section>
+
−
<div>
+
−
<h2>show the PEN.<br/>
+
−
<a href='https://escss.blogspot.com/2017/08/scroll-half-by-half-pure-css.html'>link the POST</a></h2>
+
−
<p>Por una web con mucho estilo, para argonautas con buen gusto.</p>
+
−
</div>
+
−
</section>
+
−
+
−
</article>
+
−
</html>
+
 
{{KU_Leuven_footer}}
 
{{KU_Leuven_footer}}

Revision as of 16:05, 8 October 2017

KU_Leuven iGEM

COMING SOON

date

Human Practices