enjalot/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Port of @sarah_edo's codepen to make her badge

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {

  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #455772; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#455772), color-stop(18%,#6b8395), color-stop(35%,#a0d0cc), color-stop(45%,#a0d0cc), color-stop(60%,#a0d0cc), color-stop(81%,#56737c), color-stop(100%,#293e56)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* IE10+ */
  background: linear-gradient(135deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#455772', endColorstr='#293e56',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.accelerate {
  transform: translateZ(0);
  perspective: 1000;
  backface-visibility: hidden;
}

.particle1 {
  width: 200vw;
  height: 100vh;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/particles2.png");
  @extend .accelerate;
  position: absolute;
  z-index: 1000;
  opacity: 0.45;
  overflow: hidden;
  animation: particleOne 200s linear infinite;
  filter: blur(4px) brightness(0.9);
  -webkit-filter: blur(4px) brightness(0.9);
}

.particle2 {
  width: 200vw;
  height: 100vh;
  filter: blur(1px) hue-rotate(-8deg);
  -webkit-filter: blur(1px) hue-rotate(-8deg);
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/particles3.png");
  @extend .accelerate;
  position: absolute;
  z-index: 1000;
  opacity: 0.45;
  overflow: hidden;
  animation: particleOne 260s linear infinite;
}

.orb {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/orb.png");
  width: 500px;
  height: 356px;
  position: absolute;
  @extend .accelerate;
  top: 20%;
  left: 50%;
  opacity: 0.8;
  z-index: 50;
  animation: orb 2s ease infinite;
}

.orb1 {
  @extend .accelerate;
  position: absolute;
}

.orb2 {
  top: 50%;
  left: 10%;
  opacity: 0.85;
  z-index: 50;
  filter: blur(1px) hue-rotate(-8deg);
  -webkit-filter: blur(1px) hue-rotate(-8deg);
  animation: orb2 70s ease-out infinite;
  img {
    width: 40%;
    height: auto;
  }
}

.orb3 {
  top: 34%;
  left: 80%;
  opacity: 0.6;
  z-index: 20;
  filter: blur(2px) hue-rotate(15deg);
  -webkit-filter: blur(2px) hue-rotate(15deg);
  animation: orb2 70s ease-out infinite;
  img {
    width: 30%;
    height: auto;
  }
}

@keyframes particleOne {
  50% { transform: translateX(200%); }
}

@keyframes orb {
  50%   { transform: translateY(-5px); }
}

@keyframes orb2 {
  50%   { transform: translateX(300px); }
}

.blue {
  position: absolute;
  z-index: 70;
  opacity: 0.2;
  top: 45%;
  width: 100%;
  height: 10%;
  box-shadow:0px 0px 50px 50px #8EB7BA;
  background: #8EB7BA;
}

.land {
  width: 100%;
  height: auto;
  bottom: 0;
  position: absolute;
  img {
    width: 100%;
    height: auto;
  }
}

@media screen and ( max-height: 400px) {
    .land { bottom: -55%; }
}

@media screen and ( max-width: 620px ){
    .orb { left: 10% !important; }
    .orb3 { left: -2% !important; }
}
  </style>
</head>

<body>
  <div class="particle1"></div>
<div class="particle2"></div>
<div class="particle2 next"></div>
<div class="blue"></div>
<div class="orb"></div>
<div class="orb1 orb2">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/orb.png">
</div>
<div class="orb1 orb3">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/orb.png">
</div>
<div class="land">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/land.png">
</div>
  <script>


  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {

	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #455772; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#455772), color-stop(18%,#6b8395), color-stop(35%,#a0d0cc), color-stop(45%,#a0d0cc), color-stop(60%,#a0d0cc), color-stop(81%,#56737c), color-stop(100%,#293e56)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* IE10+ */
	background: linear-gradient(135deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#455772', endColorstr='#293e56',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}

	.accelerate {
	transform: translateZ(0);
	perspective: 1000;
	backface-visibility: hidden;
	}

	.particle1 {
	width: 200vw;
	height: 100vh;
	background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/particles2.png");
	@extend .accelerate;
	position: absolute;
	z-index: 1000;
	opacity: 0.45;
	overflow: hidden;
	animation: particleOne 200s linear infinite;
	filter: blur(4px) brightness(0.9);
	-webkit-filter: blur(4px) brightness(0.9);
	}

	.particle2 {
	width: 200vw;
	height: 100vh;
	filter: blur(1px) hue-rotate(-8deg);
	-webkit-filter: blur(1px) hue-rotate(-8deg);
	background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/particles3.png");
	@extend .accelerate;
	position: absolute;
	z-index: 1000;
	opacity: 0.45;
	overflow: hidden;
	animation: particleOne 260s linear infinite;
	}

	.orb {
	background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/orb.png");
	width: 500px;
	height: 356px;
	position: absolute;
	@extend .accelerate;
	top: 20%;
	left: 50%;
	opacity: 0.8;
	z-index: 50;
	animation: orb 2s ease infinite;
	}

	.orb1 {
	@extend .accelerate;
	position: absolute;
	}

	.orb2 {
	top: 50%;
	left: 10%;
	opacity: 0.85;
	z-index: 50;
	filter: blur(1px) hue-rotate(-8deg);
	-webkit-filter: blur(1px) hue-rotate(-8deg);
	animation: orb2 70s ease-out infinite;
	img {
	width: 40%;
	height: auto;
	}
	}

	.orb3 {
	top: 34%;
	left: 80%;
	opacity: 0.6;
	z-index: 20;
	filter: blur(2px) hue-rotate(15deg);
	-webkit-filter: blur(2px) hue-rotate(15deg);
	animation: orb2 70s ease-out infinite;
	img {
	width: 30%;
	height: auto;
	}
	}

	@keyframes particleOne {
	50% { transform: translateX(200%); }
	}

	@keyframes orb {
	50% { transform: translateY(-5px); }
	}

	@keyframes orb2 {
	50% { transform: translateX(300px); }
	}

	.blue {
	position: absolute;
	z-index: 70;
	opacity: 0.2;
	top: 45%;
	width: 100%;
	height: 10%;
	box-shadow:0px 0px 50px 50px #8EB7BA;
	background: #8EB7BA;
	}

	.land {
	width: 100%;
	height: auto;
	bottom: 0;
	position: absolute;
	img {
	width: 100%;
	height: auto;
	}
	}

	@media screen and ( max-height: 400px) {
	.land { bottom: -55%; }
	}

	@media screen and ( max-width: 620px ){
	.orb { left: 10% !important; }
	.orb3 { left: -2% !important; }
	}
	</style>
	</head>

	<body>
	<div class="particle1"></div>
	<div class="particle2"></div>
	<div class="particle2 next"></div>
	<div class="blue"></div>
	<div class="orb"></div>
	<div class="orb1 orb2">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/orb.png">
	</div>
	<div class="orb1 orb3">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/orb.png">
	</div>
	<div class="land">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/land.png">
	</div>
	<script>


	</script>
	</body>