Iron Man suitcase

dabblet.css

/**
 * Iron Man suitcase
 */

* { box-sizing: border-box; }
.container { padding: 20px; }
.iron_title {
	text-align: center;
	font-family: stark;
	color: red;
	position:relative;
	filter: drop-shadow(1px 1px yellow);
}

.text-gradient { /*position:absolute; z-index:5; /*top:0; left:0;*/
  background: -webkit-linear-gradient(#6d0000, #bb0303);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@font-face {
	font-family: 'stark';
	src: url('http://cdn.oranger.me/fonts/stark.ttf');
	font-weight: normal;
	font-style: normal;
}

.main-element { margin: 0 auto; }

.stage {
	padding: 100px;
	background-image: radial-gradient(#eee, #FFF);
}

.the_suit {
	background-color: #bb0303;
	background: -webkit-linear-gradient(#9d0000, #bb0303);
	height: 100px;
	width: 150px;
	position: relative;
	border-top-left-radius: 10px 20px;
	border-top-right-radius: 10px 20px;
	border-bottom-left-radius: 10px 20px;
	border-bottom-right-radius: 10px 20px;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

.suit__handle {
	height: 6px;
	width: 50px;
	border: 4px solid #C50020;
	position: relative;
	top: -6px;
	left: calc(50% - 25px);
	border-radius: 4px 4px 0 0;
	border-bottom: none;
}

.suit__centre {
	width: 70px;
	height: 70px;
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 35px);
	background-image: radial-gradient(rgba(187, 3, 3, 0.5), rgba(181, 0, 16, 0.7), rgba(187, 3, 3, 0.6));
	border-radius: 50%;
	/*box-shadow: 0 0 20px rgba(255, 255, 255, 0.2) inset;*/
}

.arc-reactor {
	width: 24px;
	height: 24px;
	background-color: #dde;
	border: 1px solid #fff;
	border-radius: 50%;
	position: absolute;
	top: calc(50% - 12px);
	left: calc(50% - 12px);
	box-shadow: 0 0 4px 2px #6d0000,
				0 0 10px #FFF;
}

.the_suit:before {
	content: " ";
	display: block;
	height: 5px;
	width: 100px;
	position: absolute;
	left: calc(50% - 50px);
	bottom: 10px;
	box-shadow: 0 30px 15px 13px rgba(0, 0, 0, 0.5);
	border-radius: 0 0 50% 50%;
}

.arc-reactor__ring {
	width: 18px;
	height: 18px;
	border: 4px dotted #fff;
	position: absolute;
	top: calc(50% - 9px);
	left: calc(50% - 9px);
	border-radius: 50%;
	filter: drop-shadow(0 0 10px rgba(255,255,255,.9));
	animation: shine 1000ms linear infinite;
	-webkit-transition-property: transform;
	-webkit-transition-duration: 2s, 1s;
}

.arc-reactor__inner {
	width: 8px;
	height: 8px;
	border: 1px dotted #fff;
	position: absolute;
	top: calc(50% - 4px);
	left: calc(50% - 4px);
	border-radius: 50%;
	filter: drop-shadow(0 0 10px rgba(255,255,255,.9));
	animation: shine 1000ms linear infinite;
	-webkit-transition-property: transform;
	-webkit-transition-duration: 2s, 1s;
}

.arc-reactor__core {
	width: 4px;
	height: 4px;
	position: absolute;
	top: calc(50% - 2px);
	left: calc(50% - 2px);
	border-radius: 50%;
	background: #fff;
	-webkit-transition-property: transform;
	-webkit-transition-duration: 2s, 1s;
/*	animation: shine 1000ms linear infinite;*/
}

.arc-reactor:hover .arc-reactor__ring {
	border-color: #777;
	cursor: pointer;
	transform: rotate(180deg);
	animation:none;
}
		
@keyframes "shine" {
	0%   { border-color: #fff; filter: drop-shadow(0 0 10px 2px rgba(255,255,255,.9)); }
	50%  { border-color: #eee; filter: drop-shadow(0 0 5px 0px rgba(255,255,255,.9)); }
	100% { border-color: #fff; filter: drop-shadow(0 0 10px 2px rgba(255,255,255,.9)); }
}

dabblet.html

<div class="stage">
	<h1 class="iron_title text-gradient">IRON MAN</h1>
	<div class="container">
		<div class="main-element the_suit">
			<div class="suit__handle"></div>
			<div class="suit__centre">
				<div class="arc-reactor">
					<div class="arc-reactor__ring">
						<div class="arc-reactor__inner">
							<div class="arc-reactor__core"></div>
						</div>
					</div>
				</div><!-- arc-reactor -->
			</div><!-- suit__centre -->
		</div><!-- the_suit -->
	</div><!-- container -->
</div><!-- stage -->

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}