octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

            
              #star
#site
  header Blurb ★ Herd
  article#content
    section November 14 2012
    header My Thoughts On Adapting Early
    p The web changes super fast these days, especially on the mobile side of the equation. One of the big questions web companies face, from start-up to established corporations is when and how they should adopt new technologies, workflows and design concepts.
    p I think, for the most part, larger companies that claim to be early adopters are really just have a “let’s wait and see what everyone else does” attitude then when it looks promising they can throw the influence and money behind it to build something with it. Start-ups are risky ventures anyway so they really are the new adopters, they are the ones that in some cases drive the new tech forward.
    p In either case, there are some pretty big risks and rewards for early adoption. As I see it, for any tech company the reward of early adoption does outweigh the risk – even in large companies.
    a href="http://www.blurbherd.com/2012/11/14/my-thoughts-on-adopting-early/" full article
            
          
!

CSS

            
              body{font: 15px 'Helvetica Neue', sans-serf;}
#star{
  .star(325, px, #f4f4f4, -15);
  position: fixed;
  z-index: -1;
}
#site{
 padding: 1% 15%; 
}
header{
  text-align: center;
  color: #333;
  font-size: 72px;
  font-family: 'LeagueGothic', 'Arial Narrow', Impact, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(256, 256, 256, 0.1), 0 2px 0 #AAA, 0 3px 0 #AAA, 0 3px 5px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid #CCC;
  margin: 0 0 20px;
  padding: 0 0 20px;
}
article section{
  line-height: 12px;
  text-transform: uppercase;
  color: #A61010;
}
a{
  color: #A61010;
  &:hover{
    color: #730A0A;
  }
}
article header{
  font-size: 48px;
  margin: 0 0 20px;
  text-shadow: 0 1px 0 rgba(256, 256, 256, 0.7), 0 1px 3px rgba(0, 0, 0, 0.4);
  text-align: left;
  border: none;
}


/*begin mixin*/
.star(@starSize: 1, @units: em, @starColor: red, @starRotation: 0){
   // to make the star be right side up at 0 we add 35 to the rotation.
   @realStarRotation: @starRotation + 35;
   @star-105: @starSize * -1.05;
   @star80: @starSize * 0.8;
   @star70: @starSize * 0.7;
   @star-65: @starSize * -0.65;
   @star60: @starSize * 0.6;
   @star-45: @starSize * -0.45;
   @star30: @starSize * 0.3;
   @star3: @starSize * 0.03;

   margin: ~"@{star60}@{units}" 0;
   display: block;
   color: @starColor;
   width: 0px;
   height: 0px;
  border-right: ~"@{starSize}@{units}" solid transparent;
   border-bottom: ~"@{star70}@{units}"  solid @starColor;
   border-left: ~"@{starSize}@{units}" solid transparent;
   transform: rotate(~"@{realStarRotation}deg");
  
  &:before {
   border-bottom: ~"@{star80}@{units}" solid @starColor;
   border-left: ~"@{star30}@{units}" solid transparent;
   border-right: ~"@{star30}@{units}" solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: ~"@{star-45}@{units}";
   left: ~"@{star-65}@{units}";
   display: block;
   content: '';
   transform: rotate(-35deg);
  }
  
  &:after {
   position: absolute;
   display: block;
   color: red;
   top: ~"@{star3}@{units}";
   left: ~"@{star-105}@{units}";
   width: 0px;
   height: 0px;
   border-right: ~"@{starSize}@{units}" solid transparent;
   border-bottom: ~"@{star70}@{units}" solid @starColor;
   border-left: ~"@{starSize}@{units}" solid transparent;
   transform: rotate(-70deg);
   content: '';
  }
}
            
          
!

JS

            
              
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console