xxx logo with css

XXX (starring vin diesel)

by Pranab Dey

HTML

<div class="main">
<div class="x3">
    <div class="x3-1">
    </div>
  </div>
  <div class="x1">
    <div class="x">
    </div>
  </div>
  <div class="x2">
    <div class="x2-1">
    </div>
  </div>
</div>

SCSS

.msg{
  background: url(http://i.imgur.com/saRP7r7.png) repeat top center;
  background-size: contain;
  position: absolute;
  -webkit-clip-path: polygon(0% 10%, 39% 0%, 50% 25%, 63% 0%, 100% 10%, 77% 10%, 70% 50%, 80% 87%, 100% 85%, 63% 100%, 50% 75%, 39% 100%, 0% 85%, 20% 87%, 30% 50%, 20% 10%, 0% 10%);
  clip-path: polygon(0% 10%, 39% 0%, 50% 25%, 63% 0%, 100% 10%, 77% 10%, 70% 50%, 80% 87%, 100% 85%, 63% 100%, 50% 75%, 39% 100%, 0% 85%, 20% 87%, 30% 50%, 20% 10%, 0% 10%);
}
.msg1{
  background: linear-gradient(to bottom right,#7e7576,#faf9f6,#504748,#7c7572,#9c9291);
  position: absolute;
  -webkit-clip-path: polygon(0% 12%, 39% 0%, 50% 24%, 63% 0%, 100% 12%, 77% 14%, 71% 50%, 80% 84%, 100% 83%, 63% 100%, 50% 76%, 39% 100%, 0% 83%, 20% 84%, 29% 50%, 20% 13%, 0% 12%);
  clip-path: polygon(0% 12%, 39% 0%, 50% 24%, 63% 0%, 100% 12%, 77% 14%, 71% 50%, 80% 84%, 100% 83%, 63% 100%, 50% 76%, 39% 100%, 0% 83%, 20% 84%, 29% 50%, 20% 13%, 0% 12%);
}
body{
  background: #0a0607;
}
.main{
  width: 100vw;
  max-width: 100%;
}
.x1{
  @extend .msg1;
  width: 460px; height: 210px;
  left: 50%; margin-left: -230px; top: 50%; margin-top: -105px;
  z-index: 3;
}
.x{
  @extend .msg;
  width: 450px; height: 200px;
  left: 50%; margin-left: -225px; top: 50%; margin-top: -100px;
}
.x2{
  @extend .msg1;
  width: 340px; height: 110px;
  left: 28%; top: 50%; margin-left: -170px; margin-top: -60px;
  z-index: 2;
}
.x2-1{
  @extend .msg;
  background-size: cover;
  width: 330px; height: 100px;
  left: 18%; top: 50%; margin-left: -55px; margin-top: -50px;
}
.x3{
  @extend .msg1;
  width: 340px; height: 110px;
  right: 28%; top: 50%; margin-right: -170px; margin-top: -60px;
  z-index: 2;
}
.x3-1{
  @extend .msg;
  background-size: cover;
  width: 330px; height: 100px;
  right: 18%; top: 50%; margin-right: -55px; margin-top: -50px;
}
@media only screen and (min-width: 1200px){
  .x3{
  right: 35%; top: 50%; margin-right: -170px; margin-top: -60px;
}
   .x2{
  left: 35%; top: 50%;...

JavaScript

/*linear-gradient(to bottom right,#982131,#5f0706,#7f0e10,#6c080a,#5f0706)*/