HTML


<svg version="1.1" viewBox="0 0 487.235 482.972" preserveAspectRatio="xMinYMin meet" class="logo">
	<g>
		<path fill="#39A9DC" d="M414.973,411.063c-94.701,93.726-248.244,93.725-342.946-0.001s-94.702-245.685,0-339.411 c94.703-93.726,248.245-93.726,342.948,0C509.676,165.377,509.676,317.336,414.973,411.063z"/>
		<path d="M215.603,8.993L11.72,212.875c0,0,35.251,34.044,69.547,8.236L254.494,47.884"/>
		<path d="M142.849,322.013l-73.421,73.421c0,0,36.92,26.013,62.979,14.803l49.333-49.333"/>
		<path d="M165.609,172.126L23.246,314.49c0,0,35.069,34.226,60.296,17.486L204.5,211.017"/>
		<polygon fill="#FFFFFF" points="198.104,344.827 158.904,305.626 404.842,59.689 441.957,100.974"/>
		<polygon fill="#FFFFFF" points="432.332,394.543 390.266,436.613 48.196,94.543 89.486,51.697"/>
	</g>
	<a xlink:href="http://wpfix.it" target="_blank">
		<text x="195" y="420" fill="rgba(255,255,255,.8)">WPfix.it</text>
	</a>
</svg>
<div class="shadow"></div>


CSS


/* CSS > 4 WpFixit Logo Design
*
* WpFix / ia a New Lab Wordpress Dev. Fix & Design
*
* @webbeloz > via Front-end
*/
html, body {
  background-color: white;
  margin: 0;
}  
svg {
  display: block;
  height: 340px;
  font-size: 22px;
  font-family: "monospace";
  text-shadow: 0 -1px rgba(0,0,0,.4);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.logo {
  width: 340px;
}
.shadow {
  position: absolute;
  top: calc(50% + 172px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  font: 300 18px/75px 'open_sanslight', sans-serif;
  font-weight: 300;
  width: 320px;
  height: 25px;
  vertical-align: middle;
  padding-bottom: 2px!important;  
  background-color: rgb(135,135,135);
  background: -moz-radial-gradient(center, ellipse cover,  rgba(135,135,135,1) 0%, rgba(221,221,221,1) 35%, rgba(255,255,255,1) 66%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(135,135,135,1)), color-stop(35%,rgba(221,221,221,1)), color-    stop(66%,rgba(255,255,255,1)));
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(135,135,135,1) 0%,rgba(221,221,221,1) 35%,rgba(255,255,255,1) 66%);
  background: -o-radial-gradient(center, ellipse cover,  rgba(135,135,135,1) 0%,rgba(221,221,221,1) 35%,rgba(255,255,255,1) 66%);
  background: -ms-radial-gradient(center, ellipse cover,  rgba(135,135,135,1) 0%,rgba(221,221,221,1) 35%,rgba(255,255,255,1) 66%);
  background: radial-gradient(ellipse at center,  rgba(135,135,135,1) 0%,rgba(221,221,221,1) 35%,rgba(255,255,255,1) 66%);
}


JS




CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now