@import url("https://fonts.googleapis.com/css?family=Amaranth|Dancing+Script");
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background:#ededed;
  /* fallback for old browsers */

  /* Chrome 10-25, Safari 5.1-6 */

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-family: 'Dancing Script', cursive;
}
header{padding-top: 20px;}
.soos {
    position: fixed;

    left: 100px;
    z-index: 100;
    display: block;
    width: 100px;
    height: auto;
    cursor: pointer;
}
.heading {
  text-align: center;
  color: #fff;
  font-size: 60px;
  font-family: 'Amaranth', sans-serif;
}

.cards {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width:1100px;
  margin: 0 auto;
  padding: 10px 0px 0;
}

.cards__item {
  width: 29%;
  margin: 10px 20px;
  background-color: #96286a;
    border-radius: 5px;
}
}

.cards__item-title {
  text-align: center;
  color: #fff;
  font-weight: normal;
  font-size: 20px;
  letter-spacing: 1px;
}

.atvImg {
  border-radius: 5px;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  height: 300px;
  display: inline-block;
}
.atvImg img {
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(14, 21, 47, 0.25);
}

.atvImg-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  transition: all 0.2s ease-out;
}
.atvImg-container.over .atvImg-shadow {
  box-shadow: 0 45px 100px rgba(14, 21, 47, 0.4), 0 16px 40px rgba(14, 21, 47, 0.4);
}

.atvImg-layers {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  transform-style: preserve-3d;
}
.sami{  position: absolute;
  top: 60%;

  left: 50%;
  -webkit-transform: translate(-50%, -50%) ;
          transform: translate(-50%, -50%) ;



  }
.atvImg-rendered-layer {
  position: absolute;
  width: 104%;
  height: 104%;
  top: -2%;
  left: -2%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;
  transition: all 0.1s ease-out;
}
.logo img{width:inherit;
  max-height: 70px;}
.zakaa{background: none !important;}
.zakaa1{width: 60%!important;}
.atvImg-shadow {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  transition: all 0.2s ease-out;
  box-shadow: 0 8px 30px rgba(14, 21, 47, 0.6);
}
.zakaa4{max-width: 55% !important;
  padding-right: 0px;
      padding-left: 0px;}
.zakaa5{padding-left:0 !important;}
.zakaa6{flex: auto !important;
    float: right!important;
    border-top: 3px solid #ddc276;
      padding-top: 10px;
        margin-bottom: 30px;
        display: block !important;
    }
.atvImg-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 60%);
}
@media screen and (max-width: 769px) {.zakaa4{max-width: 100% !important;
  padding-right: 0px;
      padding-left: 0px;}.zakaa3{background: #ededed;}
.soos{left: auto;
right: 10px;}
.cards__item {
    width: 100%;

}
}

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>3d parallax hover effect</title>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/style.css">

      <link rel="stylesheet" type="text/css" href="css/normalize.css" />
      <link rel="stylesheet" type="text/css" href="css/demo.css" />
      <link rel="stylesheet" type="text/css" href="css/icons.css" />
      <link rel="stylesheet" type="text/css" href="css/style5.css" />
      <script src="js/modernizr.custom.js"></script>
</head>

<body>

  <!-- Images from Dribbble: https://dribbble.com/Rishavmalla -->

    <header class=" codrops-header">




      <nav id="bt-menu" class="bt-menu">
        <a href="#" class="bt-menu-trigger"><span>Menu</span></a>
        <ul>
          <li><a href="#">About us</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#">Clients</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <ul>
          <li><a href="http://www.twitter.com/codrops" class="bt-icon icon-twitter">Twitter</a></li>
          <li><a href="https://plus.google.com/101095823814290637419" class="bt-icon icon-gplus">Google+</a></li>
          <li><a href="http://www.facebook.com/pages/Codrops/159107397912" class="bt-icon icon-facebook">Facebook</a></li>
          <li><a href="https://github.com/codrops" class="bt-icon icon-github">icon-github</a></li>
        </ul>
      </nav>
      <img class="soos" src="logo1.png" alt="" >




    </header>
<div class="container">


  <div class="cards">

    <div class="cards__item">

      <a href="https://dribbble.com/shots/2792589-Time-for-a-vacation" title="Time for a vacation">
        <div class="atvImg">
          <img src="https://d13yacurqjgara.cloudfront.net/users/1085581/screenshots/2792589/for_dribbble-01.png">

          <div class="atvImg-layer" data-img="https://d13yacurqjgara.cloudfront.net/users/1085581/screenshots/2792589/for_dribbble-01.png"></div>

        </div>

      </a>
        <h2 style=" text-align:center;" class="cards__item-title">Time for a vacation</h2>
    </div>
    <div class="cards__item">

      <a href="#" title="Singha Durbar">
        <div class="atvImg">
          <img src="1.jpg">

          <div class="atvImg-layer" data-img="1.jpg">  </div>

        </div>
      </a>
  <h2 style=" text-align:center;" class="cards__item-title">Singha Durbar</h2>
    </div>
    <div class="cards__item">

      <a href="https://dribbble.com/shots/3002552-Little-Miss-Sunshine" title="Little Miss Sunshine">
        <div class="atvImg">
          <img src="1.jpg">

          <div  class="atvImg-layer" data-img="https://d13yacurqjgara.cloudfront.net/users/1085581/screenshots/3002552/little_miss_sunshine-01.png"></div>

        </div>
      </a>
  <h2 style=" text-align:center;" class="cards__item-title">Little Miss Sunshine</h2>
    </div>

  </div>

</div>

<script src="js/classie.js"></script>
<script src="js/borderMenu.js"></script>
    <script  src="js/index.js"></script>




</body>

</html>
