header logo

by dafin defandaky

HTML

<header class='header-logo'>
    <h1 class='title' itemprop='name'>
<a class='tag-heading' href='http://defandaky.blogspot.com/' itemprop='description' title='Den Bagus Dafin'>
<span class='sr'>
                  Den Bagus Dafin
                </span>
<span class='dbd-logo d'>
                  D
                </span>
<span class='dbd-logo b'>
                  B
                </span>
<span class='dbd-logo db'>
                  D
                </span>
</a>
<p class='description dbd-descrip' itemprop='description'>
              Blog seputar tutorial blog dan desain template blog
            </p></h1>
</header>

CSS

body{background-color:#252525;color:#888}
.header-logo{width:170px;margin:26px 0 0 20px;height:85pxpadding:20px;}
.header-logo p{margin:10px 0 0}
.tag-heading{font:normal normal 0/0 a;color:#fff;position:relative;width:170px;font-size:16px;height:85px;display:block}
.tag-heading span:first-child{text-align:left;border:none}
.tag-heading span{display:block;margin:0 0 10px;text-align:center;border:1px dashed rgba(26,26,26,0.5)}
.dbd-logo{height:50px;width:50px;float:left;margin:0 2px 0 0;font-family:Georgia;font-size:50px!important;color:#252525;text-align:center;font-size:320%;font-weight:900;line-height:54px}
.d{position:absolute;top:20px;left:0;background-color:#355;transform:rotate(0)}
.b{position:absolute;top:24px;left:51px;background-color:#585;transform:rotate(5deg)}
.db{position:absolute;top:23px;left:103px;background-color:#655;transform:rotate(9deg)}
.dbd-descrip{font-size:12px;margin:10px 0 0}
.d:hover,.b:hover,.db:hover{transform:rotate(0deg) scale(1.02)!important;transition:all 0.1s ease 0s}

@media only screen and (max-width:767px){
        .header-logo{position:absolute;width:auto;height:auto}
        .header-logo span:first-child{float:left;margin:9px}
        .dbd-logo{height:35px;width:40px;font-size:35px!important;line-height:35px}
      }
      @media screen and (max-width:500px){
        .header-logo h1{padding:7px 0}
         .d{position:absolute;top:0px;left:0;background-color:#355;transform:rotate(0)}
.b{position:absolute;top:0px;left:43px;background-color:#585;transform:rotate(5deg)}
.db{position:absolute;top:3px;left:83px;background-color:#655;transform:rotate(9deg)}
        .header-logo span:first-child{display:none}
        .header-logo p{display:none}
      }