<section class='delegate'>
  <a href="http://www.delegate.dk">

    <div class='logo'>
      <div>d</div>
      <div>e</div>
      <div>l</div>
      <div>e</div>
      <div class='twist'><span class='twist-back'><span>g</span></span>
      </div>
      <div>a</div>
      <div>t</div>
      <div>e</div>
    </div>

    <div class='slogan'>
      Shared Success
    </div>

  </a>
</section>
$device-extra-extra-small: 400px;
$device-extra-small: 480px;
$device-medium: 992px;
$rotate-angle: 10deg;

html, 
body { 
  box-sizing: border-box;
  text-align: center; 
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  transform-style: preserve-3d;  
}

.delegate{
  color: black;
  background: white;
  display: inline-block;
  font-family: 'Ubuntu', sans-serif, Verdana, Geneva;  
  a {
    text-decoration: none;
    color: inherit;
  }   
}

.logo {   
  max-width: 100%;
  margin-bottom: 1em;
  display: inline-block;

  > div {    
    box-shadow: -0.2em 0.2em 0.1em 0 rgba(0,0,0,0.50);
    float: left;
    color: white;
    background-color: #1A3033;          
    border: 1px solid transparent;
    border-radius: 2px; 
    margin: 2px;
    min-width: 0.5em;
    font-weight: bold;      
    padding: 0.25em 0.5em;     

    font-size: 100%;  
    @media (min-width: $device-extra-extra-small){
      font-size: 150%;
    }
    @media (min-width: $device-extra-small){
      font-size: 200%;
    }
    @media (min-width: $device-medium){
      font-size: 400%;
    }  

    transition: border-radius 0.3s;
    &:hover{
      border-radius: 50%;       
    }

  }

  .twist{        
    margin-left: -0.2em;
    & + div{      
      margin-left: -0.2em;
    }

    font-family: Times new roman;
    background-color: #F58026;
    border: 0.05em solid white;    
    xbox-shadow: none;
    transform: rotate($rotate-angle);
    -webkit-backface-visibility: hidden; //anti alias border
    overflow: hidden;
    position: relative;

    @media (min-width: $device-medium){
      top: 0.1em;
    }

    .twist-back {
      position: relative;
      transform: rotate(-$rotate-angle);	     
        display: inline-block;
        min-width: 0.5em;

        span{
          position: absolute;        
          top: -0.9em;
          left: 0.05em;       
          }
    }
  }
}

.slogan {    
  color: #1A3033;
  text-align: center;
  font-weight: bold;
  font-size: 150%;
  @media (min-width: $device-extra-small){
    font-size: 200%;
  }
  @media (min-width: $device-medium){
    font-size: 400%;
  }        
}

External CSS

  1. //fonts.googleapis.com/css?family=Ubuntu

External JavaScript

This Pen doesn't use any external JavaScript resources.