Header with background animate 01 

<!DOCTYPE html>
<html>
<head>
	<title>BACKGROUND OVERLAY | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="BACKGROUND OVERLAY">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet">
</head>
<body>

	<div class="menu" id="menu">
		<li><a href="#">ACCUEIL</a></li>
		<li><a href="#">ABOUT ME</a></li>
		<li><a href="#">MY WORKS</a></li>
		<li><a href="#">CONTACT ME</a></li>
	</div>
	<div class="container gradient-purple-blue">
	  <div class="under-container bubble" style="height:90vh;">
		<div class="line">
		  <div class="square" id="square">H</div>
		  <div class="square" >e</div>
		  <div class="square" >l</div>
		  <div class="square" >l</div>
		  <div class="square" >o</div>
		  <div class="square" style="margin-left:30px;">I</div>
		  <div class="square" >'</div>
		  <div class="square" >m</div>
		</div>
		<div class="line">
		  <div class="square" >P</div>
		  <div class="square" >a</div>
		  <div class="square" >u</div>
		  <div class="square" >l</div>
		</div>
	  </div>
	  <div class="under-container" style="height:10vh">
		<div class="mouse">
		  <div class="molette"></div>
		</div>
	  </div>
	  </div>
	</div>
	<div class="container" id="secondcontainer">
	  <div class="under-container">
		<div class="profil-picture" id="profilpicture">
		</div>
	  </div>
	</div>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> 
	<script src="script.js"></script>
</body>
</html>
/*@import url('https://fonts.googleapis.com/css?family=Cabin:400,400i,500,500i,600,600i,700,700i|Monoton|Yellowtail');*/
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700,800,900&subset=latin-ext');

body {
  font-family:'Quicksand';
  margin:0;
}
.container {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  width:100vw;
  max-width:100%;
  height:100vh;
  /*background:url('https://images.unsplash.com/photo-1511227499331-25c621db940e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2e7e55bd948e728345b7ed558d550053&auto=format&fit=crop&w=1400&q=80');
  background-size:cover;
  background-position:50% 50%;*/
}
.gradient-purple-blue {
  background-image: linear-gradient(30deg, #8E78FF, #B9DEDB);
}
.under-container {
  width:100vw;
  max-width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}

.title {
  font-size:50px;
  color:white;
}

.menu {
  width:100vw;
  max-width:100%;
  display:flex;
  justify-content:space-around;
  position:fixed;
  transition:opacity 0.5s;
  z-index:1;
}

.menu li {
  padding:30px;
  list-style: none;
}

.menu li a {
  color:white;
  text-decoration:none;
  font-weight:900;
}


.line {
  display:flex;
  position:relative;
  z-index:3;
}

.square {
  font-size:100px;
  font-weight:900;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  cursor:default;
  transition:all 0.3s;
  color:#fff;
}

.square:hover {
  color:#08FDD8;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1)
  }
  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }
  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }
  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    -ms-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    -ms-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1)
  }
  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    -ms-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }
  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    -ms-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }
  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    -ms-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand
}

.mouse {
  display:flex;
  width:30px;
  height:50px;
  border:2px solid #fff;
  border-radius:30px;
}

.molette {
  margin:12px auto auto auto;
  width:3px;
  height:3px;
  background-color:#fff;
  border: 1px solid #fff;
  border-radius: 90px;
  animation: scroll 2s ease infinite;
}

@keyframes scroll {
  0%{opacity:0; margin:10px auto auto auto;}
  10%{opacity:1;}
  50%{margin:10px auto auto auto;}
  90%{opacity:1;}
  100%{opacity:0; margin:18px auto auto auto;}
}

.mousetext{
  color:#fff;
  font-weight: 500;
}

/* bubble inspired by Mattia Astorino https://codepen.io/equinusocio/pen/jezBdZ*/

.bubble {
  position:relative;
}

.bubble::before
{
  content: '';
  position:absolute;
  z-index:2;
  top: 35%;
  left: 35%;
  transform: translate(-50%, -50%);
  display: block;
  width: 25vw;
  height: 25vw;
  min-height: 200px;
  min-width: 200px;
  background: linear-gradient(
    270deg,
    #43e97b,
    #38f9d7,
    #e0c3fc,
    #8ec5fc,
    #4facfe,
    #00f2fe,
    #a8edea,
    #fed6e3
  );
  background-size: 1600% 1600%;
  box-shadow: inset 0px -20px 100px 0px rgba(255, 255, 255, 0.48);
  animation: 
    transform 20s linear infinite alternate,
    movement 40s linear infinite alternate,
    shade 60s linear infinite alternate;
}

.bubble::after
{
  content: '';
  position:absolute;
  z-index:2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 15vw;
  height: 10vw;
  min-height: 200px;
  min-width: 200px;
  background: linear-gradient(
    270deg,
    #00f2fe,
    #8ec5fc,
    #38f9d7,
    #4facfe,
    #a8edea,
    #43e97b,
    #e0c3fc,
    #fed6e3
  );
  background-size: 1600% 1600%;
  box-shadow: inset 0px -20px 100px 0px rgba(255, 255, 255, 0.48);
  animation: 
    transform2 20s linear infinite alternate-reverse,
    movement 40s linear infinite alternate-reverse,
    shade 60s linear infinite alternate-reverse;
}

@keyframes transform
{
    0%,
  100% { border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%; } 
   20% { border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%; } 
   40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%; } 
   60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%; } 
   80% { border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%; } 
}

@keyframes transform2 {
  0%{border-radius: 42% 58% 60% 40% / 32% 54% 46% 68%}
  20%{border-radius: 59% 41% 36% 64% / 32% 64% 36% 68%}
  40%{border-radius: 48% 52% 52% 48% / 54% 53% 47% 46%}
  60%{border-radius: 42% 58% 51% 49% / 63% 64% 36% 37%}
  80%{border-radius: 32% 68% 33% 67% / 63% 35% 65% 37%}
  100%{border-radius: 34% 66% 52% 48% / 34% 53% 47% 66%}
}
@keyframes movement
{
  from { -webkit-transform: rotate(-1turn) translateY(-50px); transform: rotate(-1turn) translateY(-50px); }
    to { -webkit-transform: none; transform: none; }
}
@keyframes shade
{
  0%, 100% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
}
.profil-picture {
  display:flex;
  justify-content:center;
  align-items:center;
  width:150px;
  height:150px;
  border-radius:100%;
  background:linear-gradient(30deg, #232323, #B9BCC3);
  opacity:0;
}
.profilpicture-animation {
  animation:showprofil 0.5s forwards;
}
.profil-picture img{
  width:95%;
  height:95%;
  border-radius:100%;
}
@keyframes showprofil {
  0%{
    transform:translateY(-100%);
    opacity:0;
  }
  100%{
    transform:translateY(0%);
    opacity:1;
  }
}
var square = document.getElementsByClassName('square');

for(var i = 0; i<square.length; i++){
  square[i].addEventListener('mouseenter', function(){
    this.classList.add("rubberBand");
    this.addEventListener("animationend", function(){
      this.classList.remove("rubberBand");
    }, false);
  })
}
login page green one

login page green one

Texte Block Posts Style01

Texte Block Posts Style01

Table bootstrap with Datatable

Table bootstrap with Datatable

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Input file style02

Input file style02

Elastic Content Slider

Elastic Content Slider

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Cards box with title

Cards box with title

Buttons Styles Inspirations

Buttons Styles Inspirations

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select