cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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

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

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="content">
  <div class="me">Pali Madra</div>
  <div class="where">
    <a href="https://twitter.com/palimadra">T</a>
    <a href="http://codepen.io/palimadra">C</a>
    <a href="https://github.com/Pali Madra">G</a>
    <a href="mailto:pali.madra@gmail.com">M</span></a>
  </div>
</div>
            
          
!
            
              body {
  background: #34495e;
  text-align: center;
  font-size: 5em;
  color: #f5f5f5;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.me {
  font-family: 'Leckerli One', cursive;
  color: #f5f5f5;
  line-height: 1em;
  margin-bottom: .3em;
}

.where {
  font-family: fontello;
  font-style: normal;
  font-weight: normal;
  color: #f5f5f5;
  font-size: 80%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a {
  color: #f5f5f5;
  text-decoration: none;
  padding: 0.05em;
  opacity:1;
  -webkit-transition: opacity .2s ease;
  -moz-transition: opacity .2s ease;
  -ms-transition: opacity .2s ease;
  -o-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

a:hover {
  color: #f5f5f5;
  opacity:0.8;
  -webkit-transition: opacity .2s ease;
  -moz-transition: opacity .2s ease;
  -ms-transition: opacity .2s ease;
  -o-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

::selection {
  background: #f5f5f5;
  color: #34495e;
}

.content {
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

@font-face {
  font-family: 'fontello';
  src: url('data:application/octet-stream;base64,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') format('woff'),
       url('data:application/octet-stream;base64,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') format('truetype');
}

            
          
!
            
              var colors = ["#23861e","#cc8647","#3e86bf","#df413b","#2f416f"];
function Shuffle(o) {
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
};
Shuffle(colors);
var body = document.getElementsByTagName('body')[0];
body.style.background = colors[0]
var s = document.createElement("style");
s.innerText = '::selection{color:' + colors[0] + ';}';
document.head.appendChild(s);
            
          
!
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