LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS 1981

MEDIA

Oliver - Mechanical

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet est nisl. Mauris euismod vel quam eu tincidunt. Sed dapibus justo id dapibus tempor. Pellentesque a libero sed risus congue ultrices. Quisque at congue massa. Duis feugiat ligula non nisi semper tempus. Duis blandit lacus sed diam blandit, id faucibus nunc viverra. Morbi consequat consequat facilisis. Sed in felis vitae nibh venenatis finibus sed et dolor. Sed vulputate molestie est ac tristique. Vestibulum et aliquam velit, in convallis nisl. Vivamus pellentesque venenatis urna eget suscipit.


Sed rhoncus a leo congue sollicitudin. Fusce risus tortor, rutrum id egestas at, elementum in dui. Fusce bibendum purus eu turpis vestibulum, eget aliquet ante pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce egestas, mauris eu vehicula placerat, lacus mi hendrerit lacus, ac rhoncus arcu purus eget odio. Aliquam commodo mattis lorem vitae porttitor.

Scanning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet est nisl. Mauris euismod vel quam eu tincidunt. Sed dapibus justo id dapibus tempor. Pellentesque a libero sed risus congue ultrices. Quisque at congue massa. Duis feugiat ligula non nisi semper tempus. Duis blandit lacus sed diam blandit, id faucibus nunc viverra. Morbi consequat consequat facilisis. Sed in felis vitae nibh venenatis finibus sed et dolor. Sed vulputate molestie est ac tristique. Vestibulum et aliquam velit, in convallis nisl. Vivamus pellentesque venenatis urna eget suscipit.


Sed rhoncus a leo congue sollicitudin. Fusce risus tortor, rutrum id egestas at, elementum in dui. Fusce bibendum purus eu turpis vestibulum, eget aliquet ante pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce egestas, mauris eu vehicula placerat, lacus mi hendrerit lacus, ac rhoncus arcu purus eget odio. Aliquam commodo mattis lorem vitae porttitor.

CSS
body, html {
  font-family: 'Share Tech Mono', monospace;
  background-color: #121;
  box-shadow: inset 0 0 200px #020;
  height: 100%;
  background: linear-gradient(to bottom, #001100 0%, #111311 100%);
  color: #0f0;
  font-size: 16px;
}

::selection {
  background-color:green;
}

.visual2 {
  width: 100%;
  height: 200px;
  border: 1px solid green;
  position: relative;
  margin-bottom: 10px;
}
.visual2:before, .visual2:after {
  content: "";
  width: 100px;
  height: 100px;
  border: 1px solid #0f0;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  animation: spin 4s infinite linear;
}

.visual2:before{
  animation: spin 2s infinite linear;
}
.visual2:after{
  animation: spin 4s infinite linear alternate;
}

.visual1 {
  width: 100%;
  height: 200px;
  border: 1px solid green;
  position: relative;
  margin-bottom: 10px;
}

.visual1:after, .visual1:before {
  position:absolute;
  top: 0;
  left: 0;
}

.visual1:after {
  content: "";
  display: block;
  border-bottom: 1px solid green;
  width: 100%;
  height: 1%;
  animation: scan 5s infinite  linear;
}
.visual1:before {
  content: "";
  display: block;
  border-right: 1px solid green;
  height: 100%;
  width: 1%;
  animation: scan 0.3s infinite alternate linear;
}


h1,h2,h3,h4,h5,h6 {
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
  text-transform: uppercase;
  margin: 10px;
  display: block;
  font-weight: bold;
  font-size: 1.1em;
  float:none;
  clear:both;
}

h2:before, h2:after, h1:before, h1:after, h3:before, h3:after {
  content:" ✱ ✱ ";
}


/*Gradent Elements*/
button:hover, hr, img {
  background: repeating-linear-gradient(0deg, #0c0, #0c0 1px, #050 1px, #050 2px);
  
  
}

body {
  padding: 20px;
  animation: twitch 0.5s infinite;
  background: repeating-linear-gradient(0deg, #000, #000 2px, #020 2px, #020 4px);
}

.screen {
  font-family: 'Share Tech Mono', monospace;
  display: flex;
  animation: flicker 0.001s infinite;
  mix-blend-mode: screen;
  
}

button {
  
}

section {
  margin-bottom: 10px;
}

button {
  font-family: 'Share Tech Mono', monospace;
  color: #0f0;
  background: transparent;
  padding: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  width: 100%;
  margin: 0 10px 10px 0;
  outline:none;
  
  border: 1px solid #0f0;
  box-shadow: 0 0 10px rgba(0,255,0,0.5), rgba(0,255,0,0.5);
  cursor: pointer;
}

button:hover {
  animation: flicker2 0.1s infinite alternate;
  color: #000;
  border: 1px solid transparent;
  box-shadow: 0 0 40px #0A0, inset 0 0 40px #0A0;
}

button:active {
  font-weight: bold;
}

button:visited {
  font-weight: bold;
  border: 1px solid blue;
}

.imageDisplay {
  text-align: center;
  width: 100%;
  border: 2px solid #0f0;
  position: relative;
  overflow: hidden;
  mix-blend-mode: multiply;
}

.imageDisplay video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #0f0;
}

.imageDisplay div {
  position: relative;
  width: 100%;
  background-color: #000;
  box-shadow: 0 0 80px #0A0, inset 0 0 150px 50px #090;
  
  background: repeating-linear-gradient(0deg, #050, #050 1px, #010 1px, #010 2px);
  
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  
  
}

#firstVideo {
  font-family: 'Share Tech Mono', monospace;
}

#firstVideo:after {
  content: "";
  
}

.imageDisplay:after {
  padding-top: 56.25%;
  display: block;
  content: "";
}

.imageDisplay div img {
  border-radius: 50%;
  border: 1px solid #000;
  margin: 0 auto;
  align: center;
  background-color: #0f0;
}

iframe#iframeVideo {
  mix-blend-mode: overlay;
}

.buttonGroup {
  width: 33.3%;
  padding: 0 10px;
}

.buttonGroup hr {
  position: relative;
  height: 1em;
  color: #0f0;
  border-color:#0f0;
  background-color:#0f0;
}

.buttonGroup hr:after {
  content: "✱✱✱✱✱✱✱✱✱✱✱✱✱✱✱✱✱✱✱";
  position: absolute;
  top: 0;
  left: 0;
  color:#000;
  text-align: center;
  width: 100%;
  z-index: 10;
}

.bgVideo {
  top: 50%; 
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}

.bgVideo iframe {
  width: 100%;
  height: 100%;
  
}

.buttonGroup p {
  margin-bottom: 1em;
}

.setButtons {
  display: flex;
}

.setButtons button {
  width: 100%;
}

.setButtons button:first-child {
  width: 100%;
  margin-left: 0;
}

.setButtons button:last-child {
  width: 100%;
  margin-right: 0;
}





@keyframes flicker {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blipIn {
  0% {
    height: 0;
  }
  100% {
    height: auto;
  }
}

@keyframes spin {
  0% {
    transform: rotate3d(0,1,1,360deg);;
  }
  100% {
    transform: rotate3d(360deg);
  }
}

@keyframes scan {
  0% {
  }
  100% {
    height: 100%;
    width: 100%;
  }
}

@keyframes twitch {
  0% {
    padding: 20px;
  }
  50% {
    padding: 20px;
  }
  51% {
    padding: 19px;
  }
  50% {
    padding: 20px;
  }
  100% {
    padding: 20px;
  }
}

@media screen and (max-width: 700px) {
  
     .screen {
        display: block;
    }
    .buttonGroup {
      width: auto;
      padding: 0 10px;
    }
}
JS
$(document).ready(function(){
  
  $("button").hide();
  $("button").each(function(i) {
      var name = $(this).attr('value');
      $(this).delay(i*100).slideDown(60);
      $(this).html(name);
  });
  
  $("button").click(function(){
    var name = $(this).attr('value');
    if (name=="") {
    } else {
      console.log('else')
    }
    
  });
});
Term
Mon, 11/27/2017 - 21:26

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv