Renzo

In this example below you will see how to do a Renzo with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Pondake, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Pondake ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Renzo</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <div class="raincont">
    <div class="rainbow"></div>
  </div>

<div class="container">
  <h1> Dit is een titel </h1>
  <p> Dit was tekst, ojee misschien wat te weinig, ach boeie. </p>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Pondake/renzo-RKWBNw */
body{
  margin: 0 auto}

.raincont{
    display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
 overflow: hidden;
  margin: 0 auto;
}

.rainbow{
  width: 100%;
  height: 100vw;
  margin: 0 auto;

  background: -webkit-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet);
  background: -moz-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
  background: -o-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
  background: -ms-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet,red);
  background-repeat:repeat-x;
    transform: rotate(135deg);
  
  
  
  -webkit-animation:go 3000ms linear infinite;
  -moz-animation:go 3000ms linear infinite;
  -o-animation:go 3000ms linear infinite;
  -ms-animation:go 3000ms linear infinite;
  animation:go 3000ms linear infinite;
}

@-webkit-keyframes go{
  0%{background-position:0;}
  100%{background-position:100vw 0;}

}

@-moz-keyframes go{
  0%{background-position:0;}
  50%{background-position:50vw 0;}
  100%{background-position:100vw 0;}

}
@-o-keyframes go{
  0%{background-position:0;}
  100%{background-position:100vw 0;}

}
@-ms-keyframes go{
  0%{background-position:0;}
  100%{background-position:100vw 0;}
}
  .container{
    position: absolute;
    text-align: center;
    top:20%;
    left: 0;
    right: 0;
    z-index: 99;
    background: rgba(255,255,255,0.6)
  }

Comments