CodePen Embed - Swiss css cards

<div class="container">
  <div class="row">
    
    <div class="col-lg-3 col-md-6 col-xs-12">
      <div class="card gg"><div class="g g1">g</div><div class="g g2">g</div></div>
    </div>
    
    <div class="col-lg-3 col-md-6 col-xs-12">
      <div class="card dead-kennedys">
        <div class="lines">
          <div class="line pink"></div>
          <div class="line blue"></div>
          <div class="line yellow"></div>
           <div class="line pink"></div>
          <div class="line blue"></div>
          <div class="line yellow"></div>
           <div class="line pink"></div>
          <div class="line blue"></div>
          <div class="line yellow"></div>
        </div>
      </div>
    </div>
    
    <div class="col-lg-3 col-md-6 col-xs-12">
      <div class="card ramones-container">
        <div class="text">
          <div class="ramones dark">ramones</div>
          <div class="ramones light">ramones</div>
        </div>
        <div class="text">
          <div class="ramones dark">ramones</div>
          <div class="ramones light">ramones</div>
        </div>
        <div class="text">
          <div class="ramones dark">ramones</div>
          <div class="ramones light">ramones</div>
        </div>
        <div class="text">
          <div class="ramones dark">ramones</div>
          <div class="ramones light">ramones</div>
        </div>
        <div class="text">
          <div class="ramones dark">ramones</div>
          <div class="ramones light">ramones</div>
        </div>
       <div class="text">
          <div class="ramones dark">ramones</div>
          <div class="ramones light">ramones</div>
        </div>
      </div>
    </div>
    
    <div class="col-lg-3 col-md-6 col-xs-12">
       <div class="card theater">
         <div class="text">
           <div class="normal">The living theater</div>
           <div class="mirrored">The living theater</div>
         </div>
         <div class="text">
           <div class="normal">The living theater</div>
           <div class="mirrored">The living theater</div>
         </div>
         <div class="text">
           <div class="normal">The living theater</div>
           <div class="mirrored">The living theater</div>
         </div>
         <div class="text">
           <div class="normal">The living theater</div>
           <div class="mirrored">The living theater</div>
         </div>
         <div class="text">
           <div class="normal">The living theater</div>
           <div class="mirrored">The living theater</div>
         </div>
         <div class="text">
           <div class="normal">The living theater</div>
           <div class="mirrored">The living theater</div>
         </div>
         <div class="text">
           <div class="normal">The living theater</div>
           <div class="mirrored">The living theater</div>
         </div>
         <div class="text">
           <div class="normal">The living theater</div>
           <div class="mirrored">The living theater</div>
         </div>
         <div class="text">
           <div class="normal">The living theater</div>
           <div class="mirrored">The living theater</div>
         </div>
         <div class="text">
           <div class="normal">The living theater</div>
           <div class="mirrored">The living theater</div>
         </div>
         <div class="text">
           <div class="normal">The living theater</div>
           <div class="mirrored">The living theater</div>
         </div>
      </div>
    </div>
    
    <div class="col-lg-3 col-md-6 col-xs-12">
      <div class="card lemonheads">
        <div class="text">lemonheads</div>
        <div class="text">lemonheads</div>
        <div class="text">lemonheads</div>
        <div class="text">lemonheads</div>
        <div class="text">lemonheads</div>
        <div class="text">lemonheads</div>
        <div class="text">lemonheads</div>
      </div>
    </div>
    
    <div class="col-lg-3 col-md-6 col-xs-12">
      <div class="card talkingheads">
        <div class="block block-bottom-large"></div>
        
        <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
         <div class="block block-top-small"></div>
        <div class="block block-top-small"></div>
  
      </div>
    </div>
    
     <div class="col-lg-3 col-md-6 col-xs-12">
      <div class="card indie">
        <div class="container">
          <div class="box red"></div>
          <div class="box pink"></div>
          <div class="box red"></div>
          <div class="box pink"></div>
          <div class="box red"></div>
          <div class="box pink"></div>
          <div class="box red"></div>
          <div class="box pink"></div>
          <div class="box red"></div>
          <div class="box pink"></div>
        </div>
         <div class="container">
          <div class="box red"></div>
          <div class="box pink"></div>
          <div class="box red"></div>
          <div class="box pink"></div>
          <div class="box red"></div>
          <div class="box pink"></div>
          <div class="box red"></div>
          <div class="box pink"></div>
          <div class="box red"></div>
          <div class="box pink"></div>
        </div>
      </div>
    </div>

    
     <div class="col-lg-3 col-md-6 col-xs-12">
      <div class="card iggy">
        <div class="circle-container">
          <!--for margin between inline-block elements-->
          <div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div>
        </div>
         <div class="box-container">
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
        </div>
      </div>
    </div>

    
    
  </div>
</div>

.container{
  margin-bottom: 100px;
  margin-top: 50px;
}

.card{
  background-color: red;
  overflow: hidden;
  position: relative;
  width: 260px;
  margin-top:20px;
}

.gg{
  font-family: sans-serif;
  font-size: 350px;
  padding:0;
  line-height: 350px;
  height: 400px;
  position: relative;
  font-weight: bold;
  background-color:#EE1C25;
  
  .g{
    position: absolute;
  }
  
  .g1{
    top:-100px;
    left:-5px;
    color: #D9DFD1;
  }
  .g2{
    left:67px;
    color: #009BAD;
     mix-blend-mode: multiply;
  }
}

.dead-kennedys{
  background-color: #D9DFD1;
  height:400px;
  
  .line{
    width:15px;
    height: 300px;
    background-color: red;
    position: absolute;
    right:0;
    top:0;
    left:0;
    bottom: 0;
    margin: auto;
    mix-blend-mode: darken;
    
    $deg: 20;
   @for $i from 1 through 8 {
      &:nth-child(#{$i}) { 
      transform: rotate($deg + deg);
        $deg: $deg +20;
      }
    }
  }
  
  .lines{
    margin-left: 25px;
    margin-top: 25px;
    width: 100%;
    position: relative;
    height: 400px;

  }
  
  .pink{
    background-color: #DE4D89;
  }
  
  .blue{
    background-color: #43BFBF;
  }
  
  .yellow{
    background-color: #D6B431;
  }
}


.ramones-container{
  background-color: #DAE0D4;
  padding-top: 20px;
  height: 400px;
  
  .text{
    position: relative;
    
   $top: -6;
   @for $i from 1 through 6 {
     
      &:nth-child(#{$i}) .dark { 
      top: $top+px;
        $top: $top +1;
      }
    }
  }
    
    .ramones{
        text-align: center;
        font-size: 50px;
        font-weight: bold;
        mix-blend-mode: multiply;
        line-height:50px;
      }
  
  .dark{
    position: absolute;
    left: 0;
    right:0;
    margin: auto;
    color: #009ACA;
  }
  
  .light{
    color: #CC0070;
  }
}

.theater{
  background-color: #FFFFFF;
  border: 1px solid #000000;
  height: 400px;
  
  .text{
    text-align: center;
    font-size: 20px;
    font-style: italic;
    font-weight: bold;
    line-height: 20px;
    text-transform: uppercase;
    
    .mirrored{
      transform: scale(1, -1);
    }
  }
}

.lemonheads{
  height:  400px;
  background-color: #FFDD00;
  
  .text{
    background-color: black;
    color: #FFDD00;
    display: block;
    padding: 10px 10px 0;
    position: absolute;
    font-size: 20px;
    line-height: 14px;
    left: 0;
    transform-origin: 10px 0px;
    top: 0px;
    letter-spacing:1px;
    
     $top: 0;
     $scale: 1;
     $scale-counter: 0;
   @for $i from 1 through 7 {
      &:nth-child(#{$i}) { 
      transform: scale($scale);
        top: $top +px;
        $scale: $scale +0.2;
        $top: $top + 24 + (24 * $scale-counter);
        $scale-counter :  $scale-counter +0.19;
      }
    }
  }
  
}

.talkingheads{
  background-color: #DDE0D5;
  height: 400px;
  
  .block-bottom-large{
	  width: 0;
	  height: 0;
	  border-bottom: 273px solid #FFD101;
	  border-left: 273px solid transparent;
    position: absolute;
    left: -6px;
    top: -6px;
  }
  
  .block-top-small{
    width: 0;
    height: 0;
    border-top: 29px solid #F04A0E;
    border-right: 29px solid transparent;
    position: relative;
    display: inline-block;
  }
}

.indie{
  background-color: #E6E6DB;
  height: 400px;
  
  .container{
    transform: rotate(20deg);
    transform-origin: -20px -20px;
    margin-top: 50px;
  }
  
  .box{
    width: 30px;
    height: 100px;
    display: inline-block;
  }
  
  .red{
    background-color: #E7661F;
    transform: skewX(18deg);
  }
  
  .pink{
    background-color: #FD3389;
    transform: skewX(-18deg);
    mix-blend-mode: multiply;
  }
}

.iggy{
  background-color: #E6E6DB;
  height: 400px;
  positon: relative;
  
  .circle-container{
    padding-left: 0;
    position: relative;
    left: -30px;
    width: 130%;
    margin-top: 5px;
  }
  
  .circle{
    width: 60px;
    height: 60px;
    background-color: #CD0076;
    border-radius: 100%;
    display: inline-block;
    margin-top: -5px;
  }
  
  .box-container{
    position: absolute;
    top: 0;
  }
  
  .box{
    width: 60px;
    height: 60px;
    position: absolute;
    left:0; 
    top: 0;
    background-color: #009DCA;
    mix-blend-mode: multiply;
     
     $list: 0, 30, 60, 90, 120, 150, 180, 210;
     $listY: 0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 360;
    
     $random: random( length($list) );
     $pos: nth($list, $random);
    
     $randomY: random( length($listY) );
     $posY: nth($listY, $randomY);
    
   @for $i from 1 through 12 {
      &:nth-child(#{$i}) { 
           transform: translateX($pos+px ) translateY($posY+px );
        
         $random: random( length($list) );
         $pos: nth($list, $random);
        
        $randomY: random( length($listY) );
         $posY: nth($listY, $randomY);
      }
    }
  }
}

View Compiled

Run Pen

This Pen is owned by Joke Gysen on CodePen.

See more by @keukenrolletje on CodePen

External CSS

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.