Skip to content

Instantly share code, notes, and snippets.

@nladart
Created September 6, 2013 15:50
Show Gist options
  • Save nladart/6465801 to your computer and use it in GitHub Desktop.
Save nladart/6465801 to your computer and use it in GitHub Desktop.
A Pen by Nick LaDart.
<!-- 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

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.

/* */
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment