HTML


<div id="juve">
<div id="ottavo-de-fila">
	<div class="name">
<svg xmlns="http://www.w3.org/2000/svg" width="" height="auto" viewBox="0 0 54.5 107.9" class="ju">
  <path id="wordmark" d="M4.3,0V8.5c0,2.2-1.3,3.7-3.9,3.7H0V10.4H.3A1.69255,1.69255,0,0,0,2.2,8.5V1.8H.3V0ZM8,10.4H9.9V0h2V10.2c0,1.3-.7,1.9-2,1.9H8a1.767,1.767,0,0,1-2-1.9V0H8Zm9.4-2.9V.1h2V7.6c0,3.4-1.8,4.6-4.9,4.6h-1V0h2V10.1h.1C16.9,10.2,17.4,9,17.4,7.5Zm5.7-5.6V5.1h2.3L25,6.8H23v3.5h3l-.3,1.8H21.1V0h4.5l.3,1.8H23.1ZM31.2,0h1.9V12.1H31.2V8L29.3,3.8h-.1v8.3H27.3V0h1.9l1.9,4.6h.1Zm8.9,1.9H38.2V12.2h-2V1.9H34.3L34.6.1h5.2Zm3,8.5H45V.1h2V10.3c0,1.3-.7,1.9-2,1.9H43.1a1.767,1.767,0,0,1-2-1.9V.1h2Zm5.4-2.2h2v2.4h1.8V8.9a1.62313,1.62313,0,0,0-.8-1.6L49.6,6.1a2.41788,2.41788,0,0,1-1-1.9V2A1.73494,1.73494,0,0,1,50.5.1h1.9A1.69255,1.69255,0,0,1,54.3,2V3.5L52.4,4V1.6H50.7V3.4a1.50981,1.50981,0,0,0,.8,1.4l1.8,1.1a2.39886,2.39886,0,0,1,1.2,2.2v2.3a1.66111,1.66111,0,0,1-1.9,1.8H50.8c-1.3,0-2-.5-2-1.8V8.2Z"/>
</svg>
	</div>
	
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
	 width="232.112px" height="356.017px" viewBox="0 0 232.112 356.017" enable-background="new 0 0 232.112 356.017"
	 xml:space="preserve" class="left-top">
	
<path fill="#FFFFFF" d="M12.5,11.5h128v173c0,0,6,58-52,91l-43,21c0,0-9.953-10.538-22-34l46-24c0,0,31-14,28-56v-135h-85V11.5z"/>
<path fill="#FFFFFF" d="M182.5,11.5h43v204c0,0,3,89-105,133c0,0-36.405-13-43.703-22c0,0,108.203-37,105.703-128V11.5z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
	 width="232.112px" height="356.017px" viewBox="0 0 232.112 356.017" enable-background="new 0 0 232.112 356.017"
	 xml:space="preserve" class="right-top">
<path fill="#FFFFFF" d="M12.5,11.5h128v173c0,0,6,58-52,91l-43,21c0,0-9.953-10.538-22-34l46-24c0,0,31-14,28-56v-135h-85V11.5z"/>
<path fill="#FFFFFF" d="M182.5,11.5h43v204c0,0,3,89-105,133c0,0-36.405-13-43.703-22c0,0,108.203-37,105.703-128V11.5z"/>
</svg>
</div>
<div id="ottavo-de-fila">
	<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
	 width="232.112px" height="356.017px" viewBox="0 0 232.112 356.017" enable-background="new 0 0 232.112 356.017"
	 xml:space="preserve" class="left-bottom">
<path fill="#FFFFFF" d="M12.5,11.5h128v173c0,0,6,58-52,91l-43,21c0,0-9.953-10.538-22-34l46-24c0,0,31-14,28-56v-135h-85V11.5z"/>
<path fill="#FFFFFF" d="M182.5,11.5h43v204c0,0,3,89-105,133c0,0-36.405-13-43.703-22c0,0,108.203-37,105.703-128V11.5z"/>
</svg>
	<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
	 width="232.112px" height="356.017px" viewBox="0 0 232.112 356.017" enable-background="new 0 0 232.112 356.017"
	 xml:space="preserve" class="right-bottom">
<path fill="#FFFFFF" d="M12.5,11.5h128v173c0,0,6,58-52,91l-43,21c0,0-9.953-10.538-22-34l46-24c0,0,31-14,28-56v-135h-85V11.5z"/>
<path fill="#FFFFFF" d="M182.5,11.5h43v204c0,0,3,89-105,133c0,0-36.405-13-43.703-22c0,0,108.203-37,105.703-128V11.5z"/>
</svg>
</div>
</div>



CSS


/*
**
** Ottavo is a New Logo :D
**
** #forzaJuve
*/
html, body {
	height: 90%;
  margin: 0;
	background-color: black;
}
#juve {
	margin: 100px 0 0;
	width: 100%;
}
#ottavo-de-fila {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 500px;
	transform: scale(1);
}
svg {
	position: relative;
	margin: 0;
	padding: 0;
}
div.name {
	max-height: 120px;
	margin-left: -25px;
}
svg.ju {
	position: relative;
	width: 100%;
	height: 700px;
	margin: 0 0 -10px;
	fill: white;
}
svg.left-top {
	transform: rotate(0deg) scaleX(-1);
	left: 47px;
}
svg.right-top {
	right: 47px;
}
svg.left-bottom {
	transform: rotate(180deg) scaleX(1) translate(0px, 62px);
	left: 47px;
}
svg.right-bottom {
	right: 47px;
	transform: rotate(180deg) scaleX(-1) translate(0px, 62px);
}



JS


// with JavaScript

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