cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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 id="pied"></div>
<div id="rectangle"></div>
<div id="quart"></div>
<div id="quart_2"></div>
<div id="rectangle_pied"></div>
<div id="rectangle_pied_2"></div>
<div id="jambe_1"></div>
<div id="jambe_2"></div>
<div id="jambe_3"></div>
<div id="cartouche_1"></div>
<div id="cartouche_2"></div>
<div id="cartouche_3"></div>
<div id="cartouche_4"></div>
<div id="quart_jaune"></div>
<div id="carre_jaune"></div>
<div id="carre_jaune_fonce"></div>
<div id="rectangle_verticale"></div>
<div id="poche_1"></div>
<div id="poche_2"></div>
<div id="slip"></div>
<div id="ceinture"></div>
<div id="ceinture_rouge"></div>
<div id="ceinture_marron"></div>
<div id="ceinture_cote_gauche"></div>
<div id="ceinture_cote_droite"></div>
<div id="cape_droite"></div>
<div id="obus"></div>
<div id="obus_2"></div>
<div id="corps_haut"></div>
<div id="bras_gauche"></div>
<div id="avantBras_gauche"></div>
<div id="arme"></div>
<div id="viseur"></div>
<div id="viseur_2"></div>
<div id="silencieux"></div>
<div id="gachet"></div>
<div id="pouce"></div>
<div id="circuit"></div>
<div id="circuit_2"></div>
<div id="laniere"></div>
<div id="cou"></div>
<div id="bras_droit"></div>
<div id="triceps_droit"></div>
<div id="avant_bras_droit"></div>
<div id="avant_bras_rouge_droit"></div>
<div id="main_droite"></div>
<div id="circuit_main_droite"></div>
<div id="tete"></div>
<div id="casque"></div>
<div id="visiere"></div>
<div id="antenne"></div>
<div id="bout_antenne"></div>
<div id="cape"></div>
<div id="circuit_torse"></div>
<div id="iron_man"></div>
<div id="ecrou"></div>
<div id="circuit_torse_2"></div>
<div id="laser"></div>
<div id="text">
  <p>Based on <a id="dribbble" href="https://dribbble.com/shots/1041307-Boba-Fett?list=searches&tag=boba&offset=8" target=_blank>Dribbble</a> by <a href="http://clement.saulnier.fr" id="hetic" target=_blank>CLEMENT</p>
</div>
            
          
!
            
              #dribbble {
	color: #EC4E8B;
}

#hetic {
	color: #6FB400;
}

#text {
	position: absolute;
	top: 400px;
	left: 50px;
	font-family: "futura std";
}

a {
	text-decoration: none;
}

#pied {
	width: 85px;
	height: 12px;
	background: #C7C2B2;
	position: absolute;
	top: 600px;
	left: 300px;
}

#pied:before {
	content: "";
	width: 85px;
	height: 12px;
	background: #C7C2B2;
	position: absolute;
	left: 135px;
}

#rectangle {
	width: 46px;
	height: 32px;
	background: #A1977B;
	position: absolute;
	top: 568px;
	left: 340px;
	border-radius: 0 10px 0px 0px;
	z-index: -2;
}

#rectangle:before {
	content: "";
	width: 46px;
	height: 32px;
	background: #A1977B;
	position: absolute;
	top: 0;
	left: 96px;
	border-radius: 10px 0 0 0;
}

#quart {
  	width: 23px;
  	height: 23px;
	background: #E8DEBE;
  	-webkit-border-radius: 100% 0 0;
 	border-radius: 100% 0 0;
 	position: absolute;
	top: 577px;
	left: 300px;
}

#quart:before {
	content: "";
  	width: 23px;
  	height: 23px;
	background: #E8DEBE;
  	-webkit-border-radius: 100% 0 0;
 	border-radius: 100% 0 0;
 	position: absolute;
	top: 0px;
	left: 197px;
	transform: rotate(90deg);
}

#rectangle_pied {
	width: 33px;
	height: 23px;
	background: #E8DEBE;
	position: absolute;
	top: 577px;
	left: 323px;
}

#rectangle_pied:before {
	content: "";
	width: 33px;
	height: 23px;
	background: #E8DEBE;
	position: absolute;
	left: 144px;
}

#rectangle_pied_2 {
	width: 28px;
	height: 25px;
	background: #E8DEBE;
	position: absolute;
	top: 565px;
	left: 348px;
}

#rectangle_pied_2:before {
	content: "";
	width: 28px;
	height: 25px;
	background: #E8DEBE;
	position: absolute;
	top: 0px;
	left: 98px;
}

#quart_2 {
	width: 10px;
  	height: 10px;
	background: #A1977C;
  	-webkit-border-radius: 100% 0 0;
 	border-radius: 100% 0 0;
 	position: absolute;
	top: 590px;
	left: 348px;
	z-index: 3;
}

#quart_2:before {
	content: "";
	width: 10px;
  	height: 10px;
	background: #A1977C;
  	-webkit-border-radius: 100% 0 0;
 	border-radius: 100% 0 0;
 	position: absolute;
	top: 0px;
	left: 117px;
	z-index: 3;
	transform: rotate(90deg);
}

#jambe_1 {
	width: 28px;
	height: 210px;
	background: #B1C49E;
	position: absolute;
	top: 355px;
	left: 348px;
}

#jambe_1:before {
	content: "";
	width: 28px;
	height: 210px;
	background: #B1C49E;
	position: absolute;
	left: 98px;
}

#jambe_2 {
	width: 15px;
	height: 73px;
	background: #B1C49E;
	position: absolute;
	top: 460px;
	left: 370px;
	border-radius: 0 0px 10px 0px;
}

#jambe_2:before {
	content: "";
	width: 15px;
	height: 60px;
	background: #B1C49E;
	position: absolute;
	top: 0px;
	left: 64px;
	border-radius: 0 0px 0px 10px;
}

#jambe_3 {
	width: 20px;
	height: 95px;
	background: #B1C49E;
	position: absolute;
	top: 366px;
	left: 374px;

	&::after {
		content: "";
		width: 20px;
		height: 96px;
		background: #B1C49E;
		position: absolute;
		top: 0px;
		left: 52px;	
	}
}
	
#cartouche_1 {
	width: 10px;
	height: 10px;
	background: #7F9D5B;
	z-index: 4;
	position: absolute;
	top: 530px;
	left: 338px;
}

#cartouche_1:before {
	content: "";
	width: 10px;
	height: 20px;
	background: #607746;
	position: absolute;
	top: 10px;
	left: 0px;
}

#cartouche_2 {
	width: 10px;
	height: 10px;
	background: #7F9D5B;
	z-index: 4;
	position: absolute;
	top: 530px;
	left: 358px;
}

#cartouche_2:before {
	content: "";
	width: 10px;
	height: 20px;
	background: #607746;
	position: absolute;
	top: 10px;
	left: 0px;
}

#cartouche_3 {
	width: 10px;
	height: 10px;
	background: #7F9D5B;
	z-index: 4;
	position: absolute;
	top: 530px;
	left: 454px;
}

#cartouche_3:before {
	content: "";
	width: 10px;
	height: 20px;
	background: #607746;
	position: absolute;
	top: 10px;
	left: 0px;
}

#cartouche_4 {
	width: 10px;
	height: 10px;
	background: #7F9D5B;
	z-index: 4;
	position: absolute;
	top: 530px;
	left: 474px;
}

#cartouche_4:before {
	content: "";
	width: 10px;
	height: 20px;
	background: #607746;
	position: absolute;
	top: 10px;
	left: 0px;
}

#quart_jaune {
	width: 43px;
  	height: 43px;
	background: #FCB73F ;
  	-webkit-border-radius: 0% 0 100%;
 	border-radius: 0% 0 100%;
 	position: absolute;
	top: 460px;
	left: 336px;
	z-index: 3;
}

#quart_jaune:before {
	content: "";
	width: 43px;
  	height: 43px;
	background: #FCB73F;
  	-webkit-border-radius: 0 0 0 100%;
 	border-radius: 0 0 0 100%;
 	position: absolute;
	top: 0px;
	left: 106px;
	z-index: 3;
}

#carre_jaune {
	width: 12px;
	height: 12px;
	background: #FCB73F;
	position: absolute;
	top: 460px;
	left: 374px;
	z-index: 4;
}

#carre_jaune {
	width: 12px;
	height: 12px;
	background: #FCB73F;
	position: absolute;
	top: 460px;
	left: 374px;
	z-index: 4;
}

#carre_jaune:before {
	content: "";
	width: 12px;
	height: 12px;
	background: #FCB73F;
	position: absolute;
	top: 0px;
	left: 60px;
	z-index: 4;
}

#carre_jaune_fonce {
	width: 8px;
	height: 12px;
	background: #BC892C;
	position: absolute;
	top: 460px;
	left: 386px;
	z-index: 5;
}

#carre_jaune_fonce:before {
	content: "";
	width: 8px;
	height: 12px;
	background: #BC892C;
	position: absolute;
	top: 0px;
	left: 40px;
	z-index: 5;
}

#rectangle_verticale {
	width: 32px;
	height: 76px;
	background: #1F2913;
	position: absolute;
	top: 385.6px;
	left: 394px;
}

#poche_1 {
	width: 40px;
	height: 55px;
	background: #607746;
	position: absolute;
	top: 380px;
	left: 336px;
	border-radius: 0 0 0 10px;
	
	&::before {
		content: "";
		width: 40px;
		height: 20px;
		background: #7F9D5B;
		position: absolute;
		border-radius: 0px 0px 20px 0px;
	}
	
	&::after {
		content: "";
		width: 12px;
		height: 6px;
		background: #607746;
		position: absolute;
		top: 10px;
	}
}

#poche_2 {
	width: 40px;
	height: 55px;
	background: #607746;
	position: absolute;
	top: 380px;
	left: 444px;
	border-radius: 0 0 10px 0;
	
	&::before {
		content: "";
		width: 40px;
		height: 20px;
		background: #7F9D5B;
		position: absolute;
		border-radius: 0px 0px 0px 20px;
	}
	
	&::after {
		content: "";
		width: 12px;
		height: 6px;
		background: #607746;
		position: absolute;
		top: 10px;
		left: 27px;
	}
}

#slip {
	width: 75px;
	height: 34px;
	background: #607746; 
	border-radius: 50% / 0 0% 100% 100%;
	position: absolute;
	top: 355px;
	left: 373px;
	z-index: 6;
	
	&::before {
		content: "";
		width: 75px;
		height: 33px;
		background: #7F9D5B; 
		border-radius: 50% / 100% 100% 0% 0%;
		position: absolute;
		top: -108px;
		
	}
}

#ceinture {
	width: 127px;
	height: 20px;
	background: #809E5C;
	position: absolute;
	top: 335px;
	left: 348px;
	
	&::before {
		content: "";
		width: 10px;
		height: 20px;
		background: #607746;
		position: absolute;
		left: -10px;
	}
	
	&::after {
		content: "";
		width: 10px;
		height: 20px;
		background: #607746;
		position: absolute;
		left: 126px;
	}
	
}

#ceinture_rouge {
	width: 127px;
	height: 30px;
	background: #A73F2D;
	position: absolute;
	top: 306px;
	left: 347px;
}

#cape_droite {
	height: 210px;
	width: 10px;
	background: #1F2913;
	position: absolute;
	top: 258px;
	left: 474px;
	z-index: -1;
}

#ceinture_marron {
	width: 127px;
	height: 26px;
	background: #7F521D;
	position: absolute;
	top: 280px;
	left: 347px;
	
	&::before {
		content: "";
		width: 23px;
		height: 15px;
		background: #987445;
		position: absolute;
		left: 8px;
	}
	
	&::after {
		content: "";
		width: 23px;
		height: 15px;
		background: #987445;
		position: absolute;
		left: 37px;
	}
}

#ceinture_cote_gauche {
	width: 10px;
	height: 15px;
	background: #987445;
	position: absolute;
	top: 280px;
	left: 337px;
	
	&::before {
		content:"";
		width: 10px;
		height: 21px;
		background: #5D380D;
		position: absolute;
		top: 15px;
	}
}

#ceinture_cote_droite {
	width: 10px;
	height: 15px;
	background: #987445;
	position: absolute;
	top: 280px;
	left: 474px;
	
	&::before {
		content:"";
		width: 10px;
		height: 21px;
		background: #5D380D;
		position: absolute;
		top: 15px;
	}
}

#obus {
	width: 23px;
	height: 20px;
	background: #5D380D;
	position: absolute;
	top: 296px;
	left: 354px;
	
	&::before {
		content: "";
		width: 23px;
		height: 20px;
		background: #5D380D;
		position: absolute;
		left: 30px;
	}
	
	&::after {
		content: "";
		width: 23px;
		height: 15px;
		background: #987445;
		position: absolute;
		top: -16px;
		left: 60px;
	}
}

#obus_2 {
	width: 23px;
	height: 20px;
	background: #5D380D;
	position: absolute;
	top: 295px;
	left: 414px;
	
	&::before {
		content: "";
		width: 23px;
		height: 15px;
		background: #987445;
		position: absolute;
		top: -15px;
		left: 29px;
	}
	
	&::after {
		content: "";
		width: 23px;
		height: 20px;
		background: #5D380D;
		left: 29px;
		position: absolute;
	}
}

#corps_haut {
	width: 127px;
	height: 107px;
	background: #B1C49E;
	position: absolute;
	top: 173px;
	left: 347px;
	
	&::before {
		content: "";
		width: 8px;
		height: 22px;
		background: #607746;
		position: absolute;
		top: 85px;
	}
	
	&::after {
		content: "";
		width: 8px;
		height: 22px;
		background: #607746;
		position: absolute;
		top: 85px;
		left: 119px;
	}
}

#bras_gauche {
	height: 86px;
	width: 10px;
	background: #B1C49E;
	position: absolute;
	top: 173px;
	left: 337px;
	
	&::before {
		content: "";
		height: 93px;
		width: 8px;
		background: #7F9D5B;
		position: absolute;
		right: 10px;
		border-radius: 0px 0px 10px 0px;
	}
	
	&::after {
		content: "";
		height: 35px;
		width: 8px;
		background: #FCB73F ;
		position: absolute;
		right: 10px;
		border-radius: 0px 0px 10px 0px;
	}
}

#avantBras_gauche {
	width: 40px;
	height: 58px;
	background: #A73F2D;
	position: absolute;
	top: 208px;
	left: 289px;
	
	&::before {
		content: "";
		width: 40px;
		height: 8px;
		background: #607746;
		position: absolute;
		top: 57px;
		border-radius: 0 0px 10px 10px;
	}
	
	&::after {
		content: "";
		height: 35px;
		width: 40px;
		background: #EBE1C1;
		position: absolute;
		top: -35px;
	}
}

#arme {
	width: 13px;
	height: 79px;
	background: #333333;
	position: absolute;
	top: 185px;
	left: 277px;
	
	&::before {
		content: "";
		width: 26px;
		height: 45px;
		background: #333333;
		position: absolute;
		top: -40px;
		right: 0px;
	}
	
	&::after {
		content: "";
		width: 13px;
		height: 145px;
		background: #333333;
		position: absolute;
		top: -150px;
		right: 6px;
	}
}

#viseur {
	width: 15px;
	height: 15px;
	background: #333333;
	position: absolute;
	top: 154px;
	left: 250px;
	
	&::before {
		content: "";
		width: 15px;
		height: 51px;
		background: #333333;
		position: absolute;
		right: 10px;
		top: -23px;
		border-bottom: solid 7px #5C5C5C;
	}
}

#viseur_2 {
	width: 7px;
	height: 45px;
	background: #333333;
	position: absolute;
	top: 124px;
	left: 235px;
}

#silencieux {
	width: 5px;
	height: 80px;
	background: #5B5B5B;
	position: absolute;
	top: 40px;
	left: 275px;
	z-index: 2;
	
	&::before {
		content: "";
		width: 5px;
		height: 80px;
		background: #5B5B5B;
		position: absolute;
		left: 9px;
		border-bottom: solid 5px #333333;
	}
	
	&::after {
		content: "";
		width: 5px;
		height: 80px;
		background: #5B5B5B;
		position: absolute;
		left: -9px;
		border-bottom: solid 5px #333333;
	}
}

#gachet {
	width: 22px;
	height: 25px;
	background: transparent;
	border: solid 5px;
	border-color: #333333 #333333 transparent transparent;
	position: absolute;
	top: 150px;
	left: 278px;
	z-index: -1;
	
	&::before {
		content: "";
		width: 19px;
		height: 17px;
		background: #EBE1C1;
		-webkit-border-radius: 0% 100% 0% 0%;
 		border-radius: 0% 70% 0% 0%;
		position: absolute;
		top: 5px;
		-webkit-animation: doigt 4s infinite;
	}
}

#pouce {
	width: 5px;
	height: 23px;
	background: #EBE1C1;
	position: absolute;
	top: 185px;
	left: 285px;
	z-index: 6;
	
	&::before {
		content: "";
		width: 12px;
		height: 12px;
		background: #EBE1C1;
		position: absolute;
		top: 0px;
		right: 0px;
		border-radius: 80% 0% 0% 0%;
	}
	
	&::after {
		content: "";
		width: 39px;
		height: 23px;
		background: #A3997E;
		position: absolute;
		top: 0px;
		left: 5px;
	}
}

#circuit {
	width: 25px;
	height: 12px;
	background: #EBE1C1;
	position: absolute;
	top: 195px;
	left: 297px;
	z-index: 7;
	border-radius: 50% / 100% 100% 0% 0%;
	
	&::before {
		content: "";
		width: 25px;
		height: 29px;
		background: #531E15;
		position: absolute;
		top: 13px;
	}
	
	&::after {
		content: "";
		width: 6px;
		height: 6px;
		background: #A73F2D;
		position: absolute;
		top: 30px;
		left: 9px;
		border-radius: 50%;
	}
}

#circuit_2 {
	width: 6px;
	height: 10px;
	background: #A73F2D;
	position: absolute;
	top: 208px;
	left: 301px;
	z-index: 7;
	
	&::before  {
	content: "";
	width: 6px;
	height: 10px;
	background: #A73F2D;
	position: absolute;
	top: 0px;
	left: 11px;
	z-index: 7;
}
}

#laniere {
	width: 8px;
	height: 62px;
	background: #987445;
	position: absolute;
	top: 168px;
	left: 347px;
	border-radius: 0 0px 0 10px;
	
	&::before {
		content: "";
		width: 8px;
		height: 20px;
		background: #987445;
		border-radius: 10px 0px 10px 0px;
		position: absolute;
		top: 62px;
	}
}


#cou {
	width: 58px;
	height: 8px;
	background: #EBE1C1;
	position: absolute;
	top: 165px;
	left: 381px;
	
	&::before {
		content: "";
		width: 8px;
		height: 5px;
		background: #212B15;
		position: absolute;
		right: 58px;
		top: 3px;
	}
	
	&::after {
		content: "";
		width: 10px;
		height: 5px;
		background: #212B15;
		position: absolute;
		left: 58px;
		top: 3px;
	}
	
	
}

#bras_droit {
	width: 10px;
	height: 85px;
	background: #B1C49E;
	position: absolute;
	top: 173px;
	left: 474px;
	
	&::before  {
		content: "";
		width: 10px;
		height: 38px;
		background: #7F9D5B;
		position: absolute;
		left: 10px;
		top: 0px;
	}
	
	&::after {
		content: "";
		width: 75px;
		height: 23px;
		background: #7F9D5B;
		position: absolute;
		top: 31.5px;
		transform: rotate(45deg);
		border-radius: 0 0 25px 40px;
	}
}


#triceps_droit {
	width: 55px;
	height: 25px;
	background: #FCB73F;
	position: absolute;
	top: 172px;
	left: 486px;
	border-radius: 25px 0px 25px 0px;
	transform: rotate(45deg);
	z-index: 8;
}

#avant_bras_droit {
	width: 86px;
	height: 25.5px;
	background: #B1C49E;
	position: absolute;
	top: 205.5px;
	left: 504px;
	transform: rotate(45deg);
	
	&::before {
		content: "";
		width: 10px;
		height: 25px;
		background: #607746;
		position: absolute;
		top: 0px;
		left: 86px;
		border-radius: 0 30px 0 0;
	}
	
}

#avant_bras_rouge_droit {
	width: 33px;
	height: 60px;
	background: #A73F2D;
	position: absolute;
	top: 237.2px;
	left: 520px;
	transform: rotate(45deg);
	
	&::before {
		content: "";
		width: 10px;
		height: 60px;
		background: #531E15;
		position: absolute;
		left: 33px;
	}
	
	&::after {
		content: "";
		width: 10px;
		height: 30px;
		background: #531E15;
		position: absolute;
		top: 10px;
		left: 18px;
	}
}

#main_droite {
	width: 34px;
	height: 39px;
	background: #EBE1C1;
	position: absolute;
	top: 279px;
	left: 489px;
	transform: rotate(45deg);
	z-index: -1;
	
	&::before {
		content: "";
		width: 9px;
		height: 35px;
		background: #EBE1C1;
		position: absolute;
		left: 34px;
		top: 4px;
		border-radius: 0px 20px 20px 0px;
	}
}

#circuit_main_droite {
	width: 34px;
	height: 25px;
	background: #A3997E;
	position: absolute;
	top: 284.5px;
	left: 490px;
	transform: rotate(45deg);
	z-index: 8;
	
	&::before {
		content: "";
		width: 20px;
		height: 10px;
		background: #EBE1C1;
		border-radius: 50% / 0% 0% 100% 100%;
		position: absolute;
		left: 7px;
	}
	
	&::after {
		content: "";
		width: 20px;
		height: 6px;
		background: #531E15;
		position: absolute;
		top: -6px;
		left: 7px;
	}
}

#tete {
	width: 110px;
	height: 65px;
	background: #1F2913;
	position: absolute;
	top: 100px;
	left: 347px;	
	border-left: solid 8px #CCCCCC; 
	border-right: solid 8px #CCCCCC; 
	
	&::before, &::after {
		content: "";
		background-color: #7F9D5B;
		position: absolute;
		width: 27px;
		height: 27px;
	}
	
	&::before {
		border-radius: 0 100% 0 0;
		top: 38px;
	}
	
	&::after {
		border-radius: 100% 0 0 0;
		left: 83px;
		top: 38px;
	}
}

#casque {
	width: 110px;
	height: 38px;
	background: #7F9D5B;
	border-radius: 50% / 60px 60px 0 0;
	position: absolute;
	top: 62px;
	left: 355px;
	
	&::before, &::after {
		content: "";
		width: 5px;
		height: 9px;
		background: #FCB73F;
		position: absolute;
	}
	
	&::before {
		top: 29px;
		left: 75px;
	}
	
	&::after {
		top: 29px;
		left: 85px;
	}
}

#visiere {
	width: 108px;
	height: 10px;
	background: #1F2913;
	border: solid 9px #A73F2D;
	position: absolute;
	top: 100px;
	left: 347px;
	z-index: 9;
	-webkit-animation: visiere 6s infinite;
	
	&::before {
		content: "";
		width: 10px;
		height: 49px;
		background: #1E2813;
		position: absolute;
		top: 10px;
		left: 39px;
		border-left: solid 9px #A73F2D;
		border-right: solid 9px #A73F2D;
		-webkit-animation: visiere 6s infinite;
		
	}
}

#antenne {
	width: 4px;
	height: 70px;
	background: #CCCCCC;
	position: absolute;
	left: 347px;
	top: 30px;
}

#bout_antenne {
	width: 10px;
	height: 8px;
	background: #1F2913;
	position: absolute;
	left: 347px;
	top: 22px;
	
	&::before {
		content: "";
		height: 4px;
		width: 15px;
		background: #1F2913;
		position: absolute;
		left: 10px;
		border-bottom: solid 4px #CCCCCC;
	}
}

#cape {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 290px 70px;
	border-color: transparent transparent #1F2913 transparent;
	z-index: -10;
	position: absolute;
	top: 170px;
	left: 280px;
	
}

#circuit_torse {
	width: 111px;
	height: 35px;
	background: #7F9D5B;
	position: absolute;
	top: 195px;
	left: 355px;
	
	&::before, &::after {
		content: "";
		width: 30px;
		height: 30px;
		background: #7F9D5B;
		position: absolute;
	}
	
	&::before {
		border-radius: 0% 0% 100% 0%;
		top: 33px;
	}
	
	&::after {
		border-radius: 0% 0% 0% 100%;
		top: 33px;
		left: 81px;
	}
}

#iron_man {
	height: 35px;
	width: 10px;
	background: #B1C49E;
	position: absolute;
	left: 405px;
	top: 195px;
	z-index: 9;
	
	&::before {
		content: "";
		width: 20px;
		height: 20px;
		background: #B1C49E;
		border-radius: 50%;
		position: absolute;
		top: 8px;
		left: -5px;
	}
	
	&::after {
		content: "";
		width: 10px;
		height: 10px;
		background: #7F9D5B;
		border-radius: 50%;
		position: absolute;
		top: 13px;
		left: 0px;
	}
}

#ecrou {
	width: 13px;
	height: 5px;
	background: #B1C49E;
	border-radius: 50% / 0 0% 100% 100%;
	position: absolute;
	top: 203px;
	left: 356px;
	transform: rotate(130deg);
	
	&::before {
		content: "";
		width: 13px;
		height: 5px;
		background: #B1C49E;
		border-radius: 50% / 0 0% 100% 100%;
		position: absolute;
		top: -9px;
		transform: rotate(180deg);
	}
}

#circuit_torse_2 {
	width: 111px;
	height: 15px;
	background: #7F9D5B;
	position: absolute;
	left: 355px;
	top: 173px;
	z-index: 9;
	
	&::before, &::after {
		content: "";
		width: 17px;
		height: 5px;
		background: #1F2913;
		position: absolute;
		top: 30px;
		left: 94px;
	}
	
	&::after {
		top: 40px;
	}
}

#laser {
	width: 7px;
	height: 30px;
	background: #3498db;
	position: absolute;
	left: 274px;
	top: 40px;
	z-index: -2;
	-webkit-animation: laser 4s infinite;
}

/*
@-webkit-keyframes visiere {
    0%   {background-color: #1E2813;}
    25%  {background-color: #3498db;}
    50%  {background-color: #3498db;}
	 100%  {background-color: #1E2813;}
}
*/

@-webkit-keyframes laser {
	0% {
		transform: translateY(0px);
		opacity: 0;
	}
		10% {
		transform: translateY(-100px);
			opacity: 1;
	}
			100% {
		transform: translateY(-100px);
			opacity: 0;
	}
}


@-webkit-keyframes doigt {
	0% {
		transform: translateY(0px);
	}
		10% {
		transform: translateY(10px);
	}
			40% {
		transform: translateY(0px);
	}
}



            
          
!
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