A Pen by Nick LaDart.

index.html

<!-- another practice logo -->
<link href='http://fonts.googleapis.com/css?family=Dosis:300,400' rel='stylesheet' type='text/css'>
<div id="container"></div>

<div class="dog_container">
  <div class="blue_left"></div>
  <div class="blue_right"></div>  
  <div class="dark_blue_banner"></div>
  <div class="white_line_right"></div>
  
  <!-- dog head -->
  <div class="pt1"></div>
  <div class="pt2"></div>
  <div class="pt3"></div>
  <div class="pt4"></div>
  <div class="pt5"></div>
  <div class="pt6"></div>
  <div class="pt6_9"></div>
  <div class="pt7"></div>
  <div class="pt8"></div>
  <div class="pt9"></div>
  <div class="pt10"></div>
  <div class="pt11"></div>
  <div class="pt12"></div>
  <div class="pt13"></div>
  <div class="pt14"></div>
  
  
  <div class="red_banner"></div>
  <div class="white_line_left"></div>
  <div class="white_line_right"></div>
  <div class="a_better_way">A BETTER WAY</div>
  <div class="rabid_dog">LADART HAS</div>
  <!-- dog head -->
</div>

practice-logo-2.markdown

practice logo 2

Err... looks really weird in Firefox, but Chrome is okay.. haha. I should work on that.

Thanks to 'brandingbad.com' for the inspiration.

**edit - I went through and added the code for FF, looks a bit better.

A Pen by Nick LaDart on CodePen.

License.

style.css

/* */
body {background:#EFEEE9;}

#container {}

.dog_container {
  width:172px;
  height:203px;
  margin:auto;
  background:#E2DFD6;
}

.blue_left {
  position:absolute;
  background:#2EC4F2;
  margin-top:195px;
  margin-left:0px;
  width:86px;
  height:50px;
  -webkit-transform:skew(0deg,15deg);
  transform:skew(0deg,15deg);
}
.blue_right {
  position:absolute;
  background:#00B1F6;
  margin-left:86px;
  margin-top:195px;
  height:50px;
  width:86px;
  -webkit-transform:skew(0deg,-15deg);
  transform:skew(0deg,-15deg);
}

.dark_blue_banner {
  position:absolute;
  margin-top:180px;
  background:#47658B;
  height:30px;
  width:172px;
  -webkit-transform:skew(0deg,-15deg);
  transform:skew(0deg,-15deg);
}
.red_banner {
  position:absolute;
  background:#F53F31;
  margin-top:120px;
  width:172px;
  height:60px;
  -webkit-transform:skew(0deg,-15deg);
  transform:skew(0deg,-15deg);
}

.white_line_left {
  position:absolute;
  margin-top:212px;
  background:#fff;
  height:1px;
  width:40px;
  -webkit-transform:skew(0deg,-15deg);
  transform:skew(0deg,-15deg);
}
.white_line_right {
  position:absolute;
  margin-top:175px;
  margin-left:132px;
  background:#fff;
  height:1px;
  width:40px;
  -webkit-transform:skew(0deg,-15deg);
  transform:skew(0deg,-15deg);
}

.a_better_way {
  position:absolute;
  margin-top:188px;
  margin-left:48px;
  color:#fff;
  -webkit-transform:skew(0deg,-15deg);
  font-family:tahoma;
  letter-spacing:1.3px;
  font-size:9px;
  transform:skew(0deg,-15deg);
}

.rabid_dog {
  position:absolute;
  margin-top:127px;
  margin-left:12px;
  font-size:30px;
  color:#fff;
  font-family:dosis;
  -webkit-transform:skew(0deg,-15deg);
  transform:skew(0deg,-15deg);
}


.pt1 {
  position:absolute;
  margin-top:42px;
  margin-left:55px;
  border-bottom: 80px solid #B27428;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 0px;
  -webkit-transform:skew(0deg,-15deg);
  transform:skew(0deg,-15deg);
  
}

.pt2 {
  position:absolute;
  /* background:#C48728;*/
  background: -webkit-linear-gradient(top, #C48728, #B27428);
  margin-top:81px;
  margin-left:40px;
  height:70px;
  width:20px;
  -webkit-transform:skew(10deg,-15deg);
  transform:skew(10deg,-15deg);
  -webkit-transform:rotate(14deg); 
  transform:skew(0deg,14deg);
}

.pt3 {
  position:absolute;
  margin-top:52px;
  margin-left:45px;
  border-bottom: 50px solid #B27428;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	width: 0px;
  -webkit-transform:skew(0deg,-15deg);
  transform:skew(0deg,-15deg);
    -webkit-transform:rotate(-70deg); 
  transform:rotate(-70deg); 
}

.pt4 {
  position:absolute;
  margin-top:46px;
  margin-left:36px;
  border-bottom: 40px solid #C48728;
	border-left: 20px solid transparent;
	border-right: 14px solid transparent;
	height: 0;
	width: 0px;
    -webkit-transform:rotate(-107deg); 
  transform:rotate(-107deg); 
}
.pt5 {
  position:absolute;
  margin-top:37px;
  margin-left:31px;
  border-bottom: 30px solid #C48728;
	border-left: 30px solid transparent;
	border-right: 14px solid transparent;
	height: 0;
	width: 0px;
  -webkit-transform:rotate(-5deg); 
  transform:rotate(-5deg); 
}

.pt6 {
  position:absolute;
  margin-top:37px;
  margin-left:63px;
  border-bottom: 40px solid #C48728;
	border-left: 40px solid transparent;
	border-right: 14px solid transparent;
	height: 0;
	width: 0px;
  -webkit-transform:rotate(-65deg); 
  transform:rotate(-65deg); 
}

.pt7 {
  /* eye */
  position:absolute;
  margin-top:47px;
  margin-left:90px;
  border-bottom: 5px solid #fff;
	border-left: 5px solid transparent;
	border-right: 14px solid transparent;
	height: 0px;
	width: 0px;
  -webkit-transform:rotate(-5deg); 
  transform:rotate(-5deg); 
}
.pt6_9 {
  /* eye */
  position:absolute;
  margin-top:44px;
  margin-left:88px;
  border-bottom: 5px solid #B27428;
	border-left: 5px solid transparent;
	border-right: 14px solid transparent;
	height: 0px;
	width: 0px;
  -webkit-transform:rotate(-5deg); 
  transform:rotate(-5deg); 
}

.pt8 {
  position:absolute;
  margin-top:37px;
  margin-left:46px;
  border-bottom: 28px solid #C48728;
	border-left: 28px solid transparent;
	border-right: 14px solid transparent;
	height: 0;
	width: 0px;
  -webkit-transform:rotate(-75deg); 
  transform:rotate(-75deg); 
}
.pt9 {
  position:absolute;
  margin-top:54px;
  margin-left:90px;
  border-bottom: 28px solid #B27428;
	border-left: 28px solid transparent;
	border-right: 14px solid transparent;
	height: 0;
	width: 0px;
  -webkit-transform:rotate(-23deg); 
  transform:rotate(-23deg); 
}
.pt10 {
  position:absolute;
  margin-top:45px;
  margin-left:110px;
  border-bottom: 22px solid #C48728;
	border-left: 28px solid transparent;
	border-right: 14px solid transparent;
	height: 0;
	width: 0px;
  -webkit-transform:rotate(37deg);
  transform:rotate(37deg);
}
.pt11 {
  position:absolute;
  margin-top:50px;
  margin-left:129px;
  border-bottom: 10px solid #B27428;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0px;
	width: 0px;
    -webkit-transform:rotate(45deg); 
  transform:rotate(45deg); 
}
 .pt12 {
  position:absolute;
  margin-top:65px;
  margin-left:122px;
  width:20px;
  height:5px;
  background:#D6D6CC;
      -webkit-transform:rotate(10deg); 
  transform:rotate(10deg); 
} 
.pt13 {
  position:absolute;
  margin-top:64px;
  margin-left:118px;
  border-bottom: 5px solid #D6D6CC;
	border-left: 5px solid transparent;
	border-right: 14px solid transparent;
	height: 0px;
	width: 0px;
  -webkit-transform:rotate(-15deg); 
  transform:rotate(-15deg); 
}
.pt14 {
  position:absolute;
  margin-top:85px;
  margin-left:90px;
  border-bottom: 5px solid #B27428;
	border-left: 5px solid transparent;
	border-right: 14px solid transparent;
	height: 0px;
	width: 0px;
  -webkit-transform:rotate(-35deg); 
  transform:rotate(-35deg); 
}