CodePen

HTML

            
              <div class="wrapper">
  <article>
    <h2>CakeHR</h2>
    <p>Sweet! We've got everything set up.</p>
  </article>
  <div class="entypo-right-open-mini"></div>
</div>
            
          
!

CSS

            
              @import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}


html {
  background: url(http://goo.gl/mVMsk);
  
  color: #333;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  -webkit-font-smoothing: antialiased;
  font-style, font-weight, letter-spacing, line-height, word-spacing: normal;
}

.wrapper {
  margin: 50px auto;
  width: 400px;
  height: 100px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 10px 0 #222;
  overflow: hidden;
}

article {
  float: left;
  padding: 20px;
  width: 260px;
  height: 100px;
}

h2 {
  margin: 0 0 8px;

  font-size: 1.7rem;
  font-weight: bold;
}

p {
  color: #999;
  font-size: 1.3rem;
}

.entypo-right-open-mini {
  float: left;
  width: 99px;
  height: 100px;
  background: #5bb75b;
  border-left: 1px solid #419441;

  color: #fff;
  font-size: 3rem;
  line-height: 100px;
  text-align: center;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................