<section>

<div class="logo-container">

<div class="logo">

  <img src="https://0.s3.envato.com/files/62552047/id_thumbnail.png" />

</div>

​

<div class="logo-css">

<div class="themebucket">

  <div class="bkt-body">

     <span class="bkt-l"></span>

    <span class="bkt-r"></span>

    <span class="top-rund"></span>

     <span class="top-rund-inner"></span>

    <span class="t-text"></span>

    <span class="btm-rund"></span>

  </div>

  <span class="bkt-shadow"></span>

</div>

  </div>  

</div>

</section>

​

<div class="guess">

  <h2>Lets Guess!</h2> 

  <p>

  Which one is image and which one build with CSS.</p>

​

  <div class="note">

    <p>A surprising gift for <a href="http://themeforest.net/user/ThemeBucket" target="_blank">ThemeBucket</a> Team</p>

    <p>Dulal Khan, Hasin Hayder, Kamrujaman Shohel and Mosaddek Hossain.</p> 

  </div>

</div>

* {

  padding: 0; 

  margin: 0;

}

.logo-container {

    position: relative;

  width: 162px;

  margin-left: auto;

  margin-right: auto;

  padding: 20px;

  margin-top: 5%;

}

.logo {

  float: left;

}

​

.themebucket {

  position: relative;

  display: block;

  margin: 0 0 0 82px;

  height: 80px;

  width: 80px;

  border-radius: 4px;

  background: #F76286;

  /*background: rgba(0,0,0,0.2);*/

  overflow:hidden;

}

​

.bkt-body {

  position: absolute;

  left: 25px;

  height: 30px;

  width: 32px;

  margin-top: 25px;

  /*background: #fff; 

  /*background: rgba(255,255,255,0.4)*/

  z-index: 10;

}

​

.bkt-l {

  position: absolute;

  background: #fff;

  width: 50%;

  height: 95%;

  right: 3px;

  transform: rotate(9deg);

}

.bkt-r {

  position: absolute;

  background: #fff;

  width: 50%;

  height: 95%;

  left: 3px;

  transform: rotate(-9deg);

}

​

.top-rund {

  position: absolute;

height: 9px;

width: 30px;

left: -1px;

top: -5px;

border-radius: 50%;

border: 2px solid #F76286;

 background: #FFDF00;

/*background: rgba(255, 255, 255, 0.8);*/

overflow: hidden;

}

.top-rund-inner {

  position: absolute;

height: 6px;

width: 26px;

left: 3px;

top: 2px;

border-radius: 50%;

  background: #F76286;

/*background: rgba(0, 0, 0, 0.5);*/

​

}

​

.btm-rund {

  position: absolute;

height: 8px;

width: 1.25em;

  background: #fff;

/*background: rgba(255, 255, 255, 0.8);*/

bottom: -4px;

left: 0.38em;

border-radius: 50%;

}

​

.t-text {

   position: absolute;

height: 1.02em;

width: .306em;

top: 6px;

left: .85em;

  border-radius: 0px 0px 30% 30%;

  background: #F76286;

/*background: rgba(0, 0, 0, 0.5);*/

}

​

.t-text:before {

  content: "";

position: absolute;

height: .35em;

width: .25em;

top: 0px;

left: -.4em;

  border-radius: 0px 0px 50% 50%;

 background: #F76286;

/*background: rgba(0, 0, 0, 0.5);*/

}

​

.t-text:after {

  content: "";

position: absolute;

height: .35em;

width: .2em;

top: 0px;

left: .5em;

  border-radius: 0px 0px 40% 50%;

 background: #F76286;

/*background: rgba(0, 0, 0, 0.5);*/

}

​

.bkt-shadow {

  position: absolute;

height: 40px;

width: 60px;

left: 36px;

top: 36px;

  transform: rotate(35deg);

  z-index: 10;

  background-image: linear-gradient(to right, rgba(0, 0, 0, .16), rgba(0, 0, 0, .07) 40%, rgba(0, 0, 0, .04) 60%, rgba(0, 0, 0, .02));

  z-index: 0;

}

​

.guess {

  font-family: "Open Sans", sans-serif;

  text-align: center;

  color: #888;

}

​

.guess h2 {

  color: #F76286;

}

​

.note {

  padding: 30px 0;

font-size: 14px;

}

.note a {

  color: #F76286;

text-decoration: none;

}

.note a:hover {

  text-decoration: underline;

}

​