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.

            
              <head>
  <title>Splashscreen DWAPS Formation</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>

<body>

	<div id="splashscreen">
		<div id="top">
			<div class="logo">
				<a href="{{ path( 'dwaps_core_home', { first_start: "accueil" } ) }}">
					<div id="body-dwaps">
							<div class="right-antenna"></div>
							<div class="left-antenna"></div>
							<div class="bugdroid-head"></div>
							<div class="left-eye"></div>
							<div class="right-eye"></div>
							<div class="red-side"></div>
					</div>
					<div class="DWAPS">
						<div class="D">D<div class="bodyword">éveloppement</div></div>
						<div class="W">W<div class="bodyword">eb et</div></div>
						<div class="A">A<div class="bodyword">pplications</div></div>
						<div class="P">P<div class="bodyword">our</div></div>
						<div class="S">S<div class="bodyword">martphones</div></div>
					</div>
				</a>
			</div>
		</div>
		<div id="bottom"></div>
	</div>
</body>
</html>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Cantarell');

body
{
	display: none;
	font-family: 'Cantarell', sans-serif;
	background: #2F4F4F; /* darkSlateGrey */
	overflow: scroll;
	overflow-x: hidden;
}

a
{
	text-decoration: none !important;
	border: 0 none !important;
  color: white !important;
}

.display-none
{
	display: none;
}

.margin-top
{
	margin-top: 12%;
}

/*GENERALE*/
.logo
{
	position: absolute;
	font-size: 2em;
	font-weight: 600;
	color: white;
	top: 60%;
	left: 30%;
	width: 170px;
	height: 170px;
	z-index: 99999;
}
/*FIN GENERALE*/

/*LOGO LETTRES*/

.DWAPS
{
	display: -webkit-flex;
	display: flex;
	margin-left: 190px;
	background: transparent !important;
	width: 200px;
	letter-spacing: 5px;
	font-size: 1.3em;
}

.D:first-letter, 
.W:first-letter, 
.A:first-letter, 
.P:first-letter, 
.S:first-letter
{
	text-shadow:
				0 0 1px #fff,
				1px 1px 1px #999,
				2px 2px 1px #777,
				3px 3px 1px #555,
				4px 4px 1px #333,
				5px 5px 1px #111,
				6px 6px 4px #000;
}

/*FIN LOGO LETTRES*/


/*LOGO DESSIN*/
#body-dwaps
{
	cursor: pointer;
	position: absolute;
	-webkit-transition: transform .5s cubic-bezier( .75,.12,.04,1.06 );
	   -moz-transition: transform .5s cubic-bezier( .75,.12,.04,1.06 );
	    -ms-transition: transform .5s cubic-bezier( .75,.12,.04,1.06 );
	     -o-transition: transform .5s cubic-bezier( .75,.12,.04,1.06 );
	        transition: transform .5s cubic-bezier( .75,.12,.04,1.06 );

	-webkit-transform-origin: 85px 85px;
	-moz-transform-origin: 85px 85px;
	-ms-transform-origin: 85px 85px;
	-o-transform-origin: 85px 85px;
	transform-origin: 85px 85px;
}

#body-dwaps:hover
{
	-webkit-transform: rotate( 405deg );
	   -moz-transform: rotate( 405deg );
	    -ms-transform: rotate( 405deg );
	     -o-transform: rotate( 405deg );
	        transform: rotate( 405deg );
}

.left-antenna, .right-antenna
{
	position: relative;
	width: 5px;
	height: 60px;
	background: #6CAA75;
}

.left-eye, .right-eye
{
	width: 20px;
	height: 10px;
	border-radius: 50%;
	background: black;
}

.left-antenna
{
	-webkit-transform: rotate( 55deg ) translate( 40px, 29px );
	   -moz-transform: rotate( 55deg ) translate( 40px, 29px );
	    -ms-transform: rotate( 55deg ) translate( 40px, 29px );
	     -o-transform: rotate( 55deg ) translate( 40px, 29px );
	        transform: rotate( 55deg ) translate( 40px, 29px );
}

.right-antenna
{
	-webkit-transform: rotate( -55deg );
	   -moz-transform: rotate( -55deg );
	    -ms-transform: rotate( -55deg );
	     -o-transform: rotate( -55deg );
	        transform: rotate( -55deg );	
}

.left-eye
{
	-webkit-transform: translate( 40px, -70px );
	   -moz-transform: translate( 40px, -70px );
	    -ms-transform: translate( 40px, -70px );
	     -o-transform: translate( 40px, -70px );
	        transform: translate( 40px, -70px );
}

.right-eye
{
	-webkit-transform: translate( 40px, -20px );
	   -moz-transform: translate( 40px, -20px );
	    -ms-transform: translate( 40px, -20px );
	     -o-transform: translate( 40px, -20px );
	        transform: translate( 40px, -20px );
}

.logo,
.bugdroid-head
{
	background: lightgreen;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dcefd5+0,a5c6a6+9,66a870+33,008208+48,25661e+73,003a05+100 */
	background: #dcefd5; /* Old browsers */
	background: -moz-linear-gradient(top,  hsl(104,45%,89%) 0%, hsl(122,22%,71%) 9%, hsl(129,27%,53%) 33%, hsl(124,100%,25%) 48%, hsl(114,55%,26%) 73%, hsl(125,100%,11%) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  hsl(104,45%,89%) 0%,hsl(122,22%,71%) 9%,hsl(129,27%,53%) 33%,hsl(124,100%,25%) 48%,hsl(114,55%,26%) 73%,hsl(125,100%,11%) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  hsl(104,45%,89%) 0%,hsl(122,22%,71%) 9%,hsl(129,27%,53%) 33%,hsl(124,100%,25%) 48%,hsl(114,55%,26%) 73%,hsl(125,100%,11%) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcefd5', endColorstr='#003a05',GradientType=0 ); /* IE6-9 */
	border-radius: 50%;
	box-shadow: 1px 1px 2px #001905;
}

.bugdroid-head
{
	position: absolute;
	top: 0;
	left: 0;
	width: 170px;
	height: 170px;
	border-radius: 50%;
}

.red-side
{
	background: red;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4d0d0+0,cca5a5+9,cc4b4b+33,b70303+53,aa0000+73,7a0002+100 */
	background: #f4d0d0; /* Old browsers */
	background: -moz-linear-gradient(top,  hsl(0,62%,89%) 0%, hsl(0,28%,73%) 9%, hsl(0,56%,55%) 33%, hsl(0,97%,36%) 53%, hsl(0,100%,33%) 73%, hsl(359,100%,24%) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  hsl(0,62%,89%) 0%,hsl(0,28%,73%) 9%,hsl(0,56%,55%) 33%,hsl(0,97%,36%) 53%,hsl(0,100%,33%) 73%,hsl(359,100%,24%) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  hsl(0,62%,89%) 0%,hsl(0,28%,73%) 9%,hsl(0,56%,55%) 33%,hsl(0,97%,36%) 53%,hsl(0,100%,33%) 73%,hsl(359,100%,24%) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4d0d0', endColorstr='#7a0002',GradientType=0 ); /* IE6-9 */
	width: 83px;
	height: 170px;
	-webkit-transform: translate( 87px, -140px );
	   -moz-transform: translate( 87px, -140px );
	    -ms-transform: translate( 87px, -140px );
	     -o-transform: translate( 87px, -140px );
	        transform: translate( 87px, -140px );
	border-top-right-radius: 85px;
	border-bottom-right-radius: 85px;
	border-left: 4px solid #2F4F4F; /* darkSlateGrey */
	box-shadow: 1px 1px 2px #5C0000;
}

/* FIN LOGO DESSIN */

#splashscreen
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-animation: removeZIndexMax .2s 4s forwards;
	-o-animation: removeZIndexMax .2s 4s forwards;
	animation: removeZIndexMax .2s 4s forwards;
}


/* TOP / BOTTOM PARTS */

	#splashscreen #top,
	#splashscreen #bottom
	{
		height: 50%;
		animation-delay: 3.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		position: relative;
		background: #2F4F4F; /* darkSlateGrey */
		width: 100%;
	}

	#splashscreen #top
	{
		-webkit-animation-name: toTop;
		-o-animation-name: toTop;
		animation-name: toTop;
	}

	#splashscreen #bottom
	{
		-webkit-animation-name: toBottom;
		-o-animation-name: toBottom;
		animation-name: toBottom;
	}

/* FIN TOP / BOTTOM PARTS */




#splashscreen .logo
{
	-webkit-animation: toBanner 1s 3s forwards;
	-o-animation: toBanner 1s 3s forwards;
	animation: toBanner 1s 3s forwards;
}

#splashscreen .DWAPS
{
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-animation: toHorizontal 1s 3s forwards;
	-o-animation: toHorizontal 1s 3s forwards;
	animation: toHorizontal 1s 3s forwards;
}

#splashscreen .DWAPS div
{
	/*color: lightgreen;*/
}

#splashscreen .D, 
#splashscreen .W, 
#splashscreen .A, 
#splashscreen .P, 
#splashscreen .S
{
	position: relative;
	-webkit-animation: turnIt 2s 3s forwards;
	-o-animation: turnIt 2s 3s forwards;
	animation: turnIt 2s 3s forwards;
}

#splashscreen .W
{
	/*margin-left: -7px;*/
}

#splashscreen .bodyword
{
	position: absolute;
	top: 0;
	left: 42px;
	-webkit-animation: disapears 1s 3s forwards;
	-o-animation: disapears 1s 3s forwards;
	animation: disapears 1s 3s forwards;
}

#splashscreen .W .bodyword
{
	left: 48px;
}

@-webkit-keyframes removeZIndexMax
{
	to {
		bottom: 88%;
	}
}
@-moz-keyframes removeZIndexMax
{
	to {
		bottom: 88%;
	}
}
@-ms-keyframes removeZIndexMax
{
	to {
		bottom: 88%;
	}
}
@-o-keyframes removeZIndexMax
{
	to {
		bottom: 88%;
	}
}
@keyframes removeZIndexMax
{
	to {
		bottom: 88%;
	}
}

@-webkit-keyframes disapears
{
	10% {
		opacity: 0;
		visibility: hidden;
	}
	100% {
		opacity: 0;
		visibility: hidden;
		display: none;
	}
}
@-moz-keyframes disapears
{
	10% {
		opacity: 0;
		visibility: hidden;
	}
	100% {
		opacity: 0;
		visibility: hidden;
		display: none;
	}
}
@-ms-keyframes disapears
{
	10% {
		opacity: 0;
		visibility: hidden;
	}
	100% {
		opacity: 0;
		visibility: hidden;
		display: none;
	}
}
@-o-keyframes disapears
{
	10% {
		opacity: 0;
		visibility: hidden;
	}
	100% {
		opacity: 0;
		visibility: hidden;
		display: none;
	}
}
@keyframes disapears
{
	10% {
		opacity: 0;
		visibility: hidden;
	}
	100% {
		opacity: 0;
		visibility: hidden;
		display: none;
	}
}

@-webkit-keyframes turnIt
{
	30% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
	70% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
	100% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
}
@-moz-keyframes turnIt
{
	30% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
	70% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
	100% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
}
@-ms-keyframes turnIt
{
	30% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
	70% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
	100% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
}
@-o-keyframes turnIt
{
	30% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
	70% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
	100% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
}
@keyframes turnIt
{
	30% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
	70% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
	100% {
		-webkit-transform: rotate( 720deg );
		   -moz-transform: rotate( 720deg );
		    -ms-transform: rotate( 720deg );
		     -o-transform: rotate( 720deg );
		        transform: rotate( 720deg );
	}
}

@-webkit-keyframes toHorizontal
{
	85% {
		margin-top: 25px;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
	100% {
		margin-top: 25px;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
}
@-moz-keyframes toHorizontal
{
	85% {
		margin-top: 25px;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
	100% {
		margin-top: 25px;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
}
@-ms-keyframes toHorizontal
{
	85% {
		margin-top: 25px;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
	100% {
		margin-top: 25px;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
}
@-o-keyframes toHorizontal
{
	85% {
		margin-top: 25px;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
	100% {
		margin-top: 25px;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
}
@keyframes toHorizontal
{
	85% {
		margin-top: 25px;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
	100% {
		margin-top: 25px;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
}

@-webkit-keyframes toTop
{
	50% {
		height: 50%;
	}
	100% {
		margin-bottom: 50%;
		height: 100%;
		box-shadow: 0 2px 3px #222;
	}
}
@-moz-keyframes toTop
{
	50% {
		height: 50%;
	}
	100% {
		margin-bottom: 50%;
		height: 100%;
		box-shadow: 0 2px 3px #222;
	}
}
@-ms-keyframes toTop
{
	50% {
		height: 50%;
	}
	100% {
		margin-bottom: 50%;
		height: 100%;
		box-shadow: 0 2px 3px #222;
	}
}
@-o-keyframes toTop
{
	50% {
		height: 50%;
	}
	100% {
		margin-bottom: 50%;
		height: 100%;
		box-shadow: 0 2px 3px #222;
	}
}
@keyframes toTop
{
	50% {
		height: 50%;
	}
	100% {
		margin-bottom: 50%;
		height: 100%;
		box-shadow: 0 2px 3px #222;
	}
}

@-webkit-keyframes toBottom
{
	to {
		margin-top: 50%;
		height: 0%;
	}
}
@-moz-keyframes toBottom
{
	to {
		margin-top: 50%;
		height: 0%;
	}
}
@-ms-keyframes toBottom
{
	to {
		margin-top: 50%;
		height: 0%;
	}
}
@-o-keyframes toBottom
{
	to {
		margin-top: 50%;
		height: 0%;
	}
}
@keyframes toBottom
{
	to {
		margin-top: 50%;
		height: 0%;
	}
}

@-webkit-keyframes toBanner
{
	95% {
		margin: 10px;
		top: -45px;
		left: 0%;
		font-size: 3em;
		-webkit-transform: scale( 0.5 );
		   -moz-transform: scale( 0.5 );
		    -ms-transform: scale( 0.5 );
		     -o-transform: scale( 0.5 );
		        transform: scale( 0.5 );
	}
	100% {
		margin: 10px;
		top: -45px;
		left: 0%;
		font-size: 3em;
		-webkit-transform: scale( 0.5 );
		   -moz-transform: scale( 0.5 );
		    -ms-transform: scale( 0.5 );
		     -o-transform: scale( 0.5 );
		        transform: scale( 0.5 );
	}
}
@-moz-keyframes toBanner
{
	95% {
		margin: 10px;
		top: -45px;
		left: 0%;
		font-size: 3em;
		-webkit-transform: scale( 0.5 );
		   -moz-transform: scale( 0.5 );
		    -ms-transform: scale( 0.5 );
		     -o-transform: scale( 0.5 );
		        transform: scale( 0.5 );
	}
	100% {
		margin: 10px;
		top: -45px;
		left: 0%;
		font-size: 3em;
		-webkit-transform: scale( 0.5 );
		   -moz-transform: scale( 0.5 );
		    -ms-transform: scale( 0.5 );
		     -o-transform: scale( 0.5 );
		        transform: scale( 0.5 );
	}
}
@-ms-keyframes toBanner
{
	95% {
		margin: 10px;
		top: -45px;
		left: 0%;
		font-size: 3em;
		-webkit-transform: scale( 0.5 );
		   -moz-transform: scale( 0.5 );
		    -ms-transform: scale( 0.5 );
		     -o-transform: scale( 0.5 );
		        transform: scale( 0.5 );
	}
	100% {
		margin: 10px;
		top: -45px;
		left: 0%;
		font-size: 3em;
		-webkit-transform: scale( 0.5 );
		   -moz-transform: scale( 0.5 );
		    -ms-transform: scale( 0.5 );
		     -o-transform: scale( 0.5 );
		        transform: scale( 0.5 );
	}
}
@-o-keyframes toBanner
{
	95% {
		margin: 10px;
		top: -45px;
		left: 0%;
		font-size: 3em;
		-webkit-transform: scale( 0.5 );
		   -moz-transform: scale( 0.5 );
		    -ms-transform: scale( 0.5 );
		     -o-transform: scale( 0.5 );
		        transform: scale( 0.5 );
	}
	100% {
		margin: 10px;
		top: -45px;
		left: 0%;
		font-size: 3em;
		-webkit-transform: scale( 0.5 );
		   -moz-transform: scale( 0.5 );
		    -ms-transform: scale( 0.5 );
		     -o-transform: scale( 0.5 );
		        transform: scale( 0.5 );
	}
}
@keyframes toBanner
{
	95% {
		margin: 10px;
		top: -45px;
		left: 0%;
		font-size: 3em;
		-webkit-transform: scale( 0.5 );
		   -moz-transform: scale( 0.5 );
		    -ms-transform: scale( 0.5 );
		     -o-transform: scale( 0.5 );
		        transform: scale( 0.5 );
	}
	100% {
		margin: 10px;
		top: -45px;
		left: 0%;
		font-size: 3em;
		-webkit-transform: scale( 0.5 );
		   -moz-transform: scale( 0.5 );
		    -ms-transform: scale( 0.5 );
		     -o-transform: scale( 0.5 );
		        transform: scale( 0.5 );
	}
}
            
          
!
            
              console.log( 'Message de DWAPSCoreBundle/Resources/public/js/bg.js : "It\'s ok !!!' );


var dwaps = {
	init: function()
	{
		this.body = document.body;
	},
	startBody: function()
	{
		var THIS = this;
		
		setTimeout(
			function()
			{
				THIS.body.style.display = "block";
				THIS.body.className = "animated fadeIn";
			}
		);

		setTimeout(
			function()
			{
				THIS.body.style.background = "#D4D4D4";
			},
			2000
		);
	}
}

dwaps.init();
dwaps.startBody();
            
          
!
999px
Loading ..................

Console