Difference between revisions of "Msc1G2:Test1"

From uf
Jump to: navigation, search
 
(5 intermediate revisions by one user not shown)
Line 3: Line 3:
 
<html>
 
<html>
 
<style>
 
<style>
.particle-network-animation {
+
.header-background{background-image: url("http://gsm.hyperbody.nl/images/5/50/20160701_Group3_background-wiki.jpg");background-color: #cccccc;width:850px;height:300px;background-size: 100% auto; background-repeat: no-repeat;}
position: fixed;
+
.header-content{position:relative;bottom:50px;left:0px;}
top: 0;
+
.button-container{width:150px;height:50px;float:left;color:white;text-align:center;float:right;}
left: 0;
+
.bottom-container{position:relative;width:850px;height:10px;float:left;background-color: rgba(255, 128, 0, 0.7);bottom:10px;}
right: 0;
+
.button{width:140px; height:30px; bottom:10px;background-color: rgba(50, 50, 50, 0.23);padding-top:10px;}
height: 100vh;
+
a.nav-link:link,a.nav-link:visited{text-decoration:none;font-weight:bold;color:white}
background-color: #171717;
+
a.nav-link:hover,a.nav-link:active{text-decoration:none;font-weight:bold;color:#FF8000;}
 
+
a.nav-link-active:hover,a.nav-link-active:active{text-decoration:none;font-weight:bold;color:#000;}
  &::before {
+
.left-filler{width:230px;height:40px;float:left;}
    z-index: -2;
+
.hidden{visibility:hidden;}
    content: '';
+
.tab-active{background-color:rgba(255, 128, 0, 0.7);}
    position: absolute;
+
    top: 0;
+
    right: 0;
+
    bottom: 0;
+
    left: 0;
+
    // background-image: url(http://web.frfr.me/dev/world-map-optimized.jpg);
+
    background-image: url(https://images.unsplash.com/photo-1450849608880-6f787542c88a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=786a67dca1d8791d181bfd90b16240d9);
+
    background-position: center center;
+
  background-size: cover;
+
    opacity: 0.2;
+
  }
+
}
+
.glow {
+
  z-index: -1;
+
  position: fixed;
+
  top: 50%;
+
  left: 50%;
+
  background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent);
+
}
+
$duration: 25s;
+
.glow-1 {
+
  width: 150vw;
+
  height: 150vh;
+
  margin-top: -75vh;
+
  margin-left: -75vw;
+
  animation: glow-1-move $duration linear infinite both;
+
}
+
@keyframes glow-1-move {
+
  from {
+
    transform: translate(-100%, 100%);
+
  }
+
  to {
+
    transform: translate(100%, -100%);
+
  }
+
}
+
.glow-2 {
+
  width: 100vw;
+
  height: 100vh;
+
  margin-top: -50vh;
+
  margin-left: -50vw;
+
  animation: glow-2-move $duration linear $duration / 3 infinite both;
+
}
+
@keyframes glow-2-move {
+
  from {
+
    transform: translate(-100%, 0%);
+
  }
+
  to {
+
    transform: translate(100%, 100%);
+
  }
+
}
+
.glow-3 {
+
  width: 120vw;
+
  height: 120vh;
+
  margin-top: -60vh;
+
  margin-left: -60vw;
+
  animation: glow-3-move $duration linear $duration / 3 * 2 infinite both;
+
}
+
@keyframes glow-3-move {
+
  from {
+
    transform: translate(100%, 100%);
+
  }
+
  to {
+
    transform: translate(0%, -100%);
+
  }
+
}
+
 
</style>
 
</style>

Latest revision as of 01:37, 2 February 2018