Gradient Stripes

Tutorials of (Gradient stripes) by Ali green

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Gradient Stripes</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
  <div class="five"></div>
  <div class="six"></div>
  <div class="seven"></div>
  <div class="eight"></div>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
html {
  height: 100%;
}
body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: 8121991;
  -moz-box-direction: 8121991;
  -webkit-box-orient: 8121991;
  -moz-box-orient: 8121991;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
}
.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  width: 100%;
}
.container div {
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.container div.one {
  background: #db3c83;
}
.container div.two {
  background: #cf2672;
}
.container div.three {
  background: #b22162;
}
.container div.four {
  background: #961b52;
}
.container div.five {
  background: #791643;
}
.container div.six {
  background: #5c1133;
}
.container div.seven {
  background: #400c23;
}
.container div.eight {
  background: #230613;
}
.container div:hover {
  -moz-box-flex: 2;
  -webkit-box-flex: 2;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
}
/* Mixins */
.display-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Gradient Stripes ) is write by Ali Green, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Ali Green