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 Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

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="iphone_contour">
	<div id="bouton_gauche_1"></div>
	<div id="bouton_gauche_2"></div>
	<div id="bouton_gauche_3"></div>
	<div id="bouton_droite"></div>
	<div id="bouton_home"></div>
	<div id="haut_parleur"></div>
	<div id="camera_gauche"></div>
	<div id="camera_haut"></div>
	<div id="camera_haut_2"></div>
	<div id="ecran_marque">SAMSUNG</div>
	<div id="ecran">
		<div id="ecran_background"></div>
		<div id="ecran_background_2"></div>
		<div id="ecran_background_3"></div>
		<div id="container_top_bar">
			<div id="top_bar_info_texte">Clemishow</div>
			<div id="top_bar_bulle_1"></div>
			<div id="top_bar_bulle_2"></div>
			<div id="top_bar_bulle_3"></div>
			<div id="top_bar_bulle_4"></div>
			<div id="top_bar_bulle_5"></div>
			<div id="top_bar_heure">16:36</div>
			<div id="top_bar_batterie_texte">49%</div>
			<div id="top_bar_batterie_1"></div>
			<div id="top_bar_batterie_2"></div>
			<div id="top_bar_batterie_3"></div>
		</div>
	</div>
</div>


<div id="container_boutton">
	<!--<p id="clique_background_edit">EDIT TOP BAR TEXTE</p>
	<input id="edit" type="text" value="clemishow">
	<p id="edit_confirm">OK</p>-->
	<select id="select_phone">
	  <option id="iphone6" value="iphone6">Iphone 6</option>
	  <option id="samsung6" value="samsung6">Samsung galaxy 6</option>
	</select>
	<p id="clique_background_iphone">SHOW BACKGROUND IPHONE</p>
	<p id="clique_couleur">COLOR PHONE</p>
	<p id="clique_top_bar">SHOW TOP BAR</p>
	<p id="clique_start">ROTATE</p>
	<p id="clique_background">SHOW SCREEN BACKGROUND</p>
	<p id="clique_background_switch">SWITCH BACKGROUND</p> 
</div>




 
            
          
!
            
              #container_boutton {
	position: relative;
	top: 90px;
}

#clique_couleur, #clique_top_bar, #clique_background, #clique_background_switch, #clique_background_iphone, #clique_start, #clique_background_edit {
	text-decoration: none;
	font-family: 'Open Sans';
	color: white;
	background: black;
	padding: 5px;
	position: absolute;
	cursor: pointer;
}

#clique_couleur {
	top: 170px;
	left: 20px;
}

#clique_top_bar {
	top: 210px;
	left: 20px;
}

#clique_background {
	top: 250px;
	left: 20px;
}

#clique_background_switch {
	top: 290px;
	left: 20px;
	display: none;
}

#clique_background_iphone {
	top: 130px;
	left: 20px;
}

#clique_start {
	top: 52px;
	left: 20px;
}

#clique_background_edit {
	top: 12px;
	left: 20px;
}

#select_phone select:focus {
    outline: none;
}

#select_phone {
	width: 230px;
	position: absolute;
	top: 108px;
	left: 20px;
	border: none;
	border-radius: none;
	text-decoration: none;
	box-shadow: none;
	background-image: none;
	appearance: none;
	border-color: white;
	background: black;
	color: white;
	height: 30px;
	text-transform: uppercase;
	font-family: 'Open Sans';
	font-weight: 100;
	font-size: 17px;
	outline: none;
}

#edit {
	width: 151px;
	height: 28px;
	padding-left: 5px;
	border: none;
	background: black;
	color: white;
	text-transform: uppercase;
	font-family: 'Open Sans';
	font-weight: 100;
	font-size: 17px;
	position: relative;
	left: 20px;
	top: 27px;
	outline: none;
	display: none;
}

#edit_confirm {
	background: white;
	width: 23px;
	height: 23px;
	padding: 3px;
	position: relative;
	top: 29px;
	left: 177px;
	cursor: pointer;
	transition: 300ms all;
	font-size: 17px;
}

body {
	background: #34495e;
	transition: 300ms all;
	font-family: 'Open Sans';
	font-weight: 100;
}

#iphone_contour {
	width: 200px;
	height: 380px;
	background: transparent;
	border: solid 2.5px white;
	border-radius: 25px;
	position: absolute;
	top: 50px;
	left: 300px;
	transition: 300ms all;
}

#bouton_gauche_1 {
	width: 2.5px;
	height: 20px;
	background: white;
	position: absolute;
	top: 45px;
	left: -3.5px;
	border-radius: 10px;
	transition: 300ms all;
}

#bouton_gauche_2 {
	width: 2.5px;
	height: 30px;
	background: white;
	position: absolute;
	top: 85px;
	left: -3.5px;
	border-radius: 10px;
	transition: 300ms all;
}

#bouton_gauche_3 {
	width: 2.5px;
	height: 30px;
	background: white;
	position: absolute;
	top: 125px;
	left: -3.5px;
	border-radius: 10px;
	transition: 300ms all;
}

#bouton_droite {
	width: 2.5px;
	height: 25px;
	background: white;
	position: absolute;
	top: 85px;
	left: 200px;
	border-radius: 10px;
	transition: 300ms all;
}

#bouton_home {
	width: 25px;
	height: 25px;
	background: transparent;
	border: solid 1.5px white;
	border-radius: 50%;
	position: absolute;
	top: 347px;
	left: 88px;
	transition: 300ms all;
}

/*HAUT PARLEUR*/
#haut_parleur {
	width: 35px;
	height: 2.5px;
	background: white;
	border-radius: 50px;
	position: absolute;
	top: 21px;
	left: 80px;
	transition: 300ms all;
}

/*FRONT GAUCHE*/
#camera_gauche {
	width: 6px;
	height: 6px;
	background: white;
	position: absolute;
	left: 60px;
	top: 19px;
	border-radius: 50%;
	transition: 300ms all;
}

/*FRONT HAUT*/
#camera_haut {
	width: 4px;
	height: 4px;
	background: white;
	position: absolute;
	left: 95px;
	top: 8px;
	border-radius: 50%;
	transition: 300ms all;
}

#camera_haut_2 {
	width: 6px;
	height: 6px;
	background: white;
	position: absolute;
	left: 53px;
	top: 9px;
	border-radius: 50%;
	transition: 300ms all;
	opacity: 0;
}

#ecran_marque {
	color: white;
	font-family: 'Helvetica';
	font-weight: 500;
	font-size: 9.5px;
	position: absolute;
	top: 20px;
	left: 72px;
	opacity: 0;
	transition: 300ms all;
}

#ecran {
	width: 180px;
	height: 305px;
	background: transparent;
	border: solid 1.5px white;
	position: absolute;
	top: 35px;
	left: 9px;
	transition: 300ms all;
	overflow: hidden;
}

#top_bar_info_texte {
	color: white;
	font-family: 'Open Sans';
	font-weight: 100;
	font-size: 7px;
	position: absolute;
	left: 34px;
	top: 3px;
	transition: 300ms all;
}

#top_bar_bulle_1 {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: white;
	position: absolute;
	left: 7px;
	top: 6px;
	transition: 300ms all;
}

#top_bar_bulle_2 {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: white;
	position: absolute;
	left: 12px;
	top: 6px;
	transition: 300ms all;
}

#top_bar_bulle_3 {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: white;
	position: absolute;
	left: 17px;
	top: 6px;
	transition: 300ms all;
}

#top_bar_bulle_4 {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: white;
	position: absolute;
	left:22px;
	top: 6px;
	transition: 300ms all;
}

#top_bar_bulle_5 {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: white;
	position: absolute;
	left: 27px;
	top: 6px;
	transition: 300ms all;
}

#top_bar_heure {
	color: white;
	font-family: 'Open Sans';
	font-weight: 100;
	font-size: 7px;
	position: absolute;
	left: 78px;
	top: 3px;
	transition: 300ms all;
}

#top_bar_batterie_texte {
	color: white;
	font-family: 'Open Sans';
	font-weight: 100;
	font-size: 7px;
	position: absolute;
	left: 140px;
	top: 3px;
	transition: 300ms all;
}

#top_bar_batterie_1 {
	width: 12px;
	height: 5px;
	background: transparent;
	border: solid 1px white;
	position: absolute;
	top: 4px;
	left: 157px;
	transition: 300ms all;
}

#top_bar_batterie_2 {
	width: 3px;
	height: 3px;
	background: white;
	position: absolute;
	top: 6px;
	left: 170px;
	transition: 300ms all;
}

#top_bar_batterie_3 {
	width: 5.4px;
	height: 5px;
	background: white;
	position: absolute;
	top: 5px;
	left: 158px;
	transition: 300ms all;
}

#container_top_bar {
	transition: 300ms all;
}

#ecran_background {
	background: #e74c3c;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left;
	width: 180px;
	height: 305px;
	position: absolute;
	top: 15px;
	transition: 2s all linear;
	opacity: 0;
	z-index: 2;
}

#ecran_background_2 {
	background: #9b59b6;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right;
	width: 180px;
	height: 305px;
	position: absolute;
	top: 15px;
	left: -190px;
	transition: 300ms all linear;
	opacity: 1;
	z-index: 2;
}

#ecran_background_3 {
	background: #3498db;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right;
	width: 180px;
	height: 305px;
	position: absolute;
	top: 15px;
	left: -190px;
	transition: 300ms all linear;
	opacity: 1;
	z-index: 2;
}
            
          
!
            
              var compteur_couleur = 0;
var compteur_top_bar = 0;
var compteur_background = 0;
var compteur_background_switch = 0;
var compteur_background_iphone = 0;
var compteur_phone = 0;
var compteur_rotate = 0;
var compteur_edit = 0;
var hide = document.getElementById('clique_top_bar');
var background = document.getElementById('clique_background');
var background_iphone = document.getElementById('clique_background_iphone');
var ecran_marque = document.getElementById('ecran_marque');
var heure = document.getElementById('top_bar_heure');
var batterie = document.getElementById('top_bar_batterie_texte');
var background_switch_texte = document.getElementById('clique_background_switch');
var texte_bar = document.getElementById('top_bar_info_texte');


//COULEUR STRUCTURE
$('#clique_couleur').on("click", function() {
if (compteur_couleur == 0) {	
$('#iphone_contour').css('border-color', 'black');				$('#bouton_gauche_1').css('background', 'black');
$('#bouton_gauche_2').css('background', 'black');
$('#bouton_gauche_3').css('background', 'black');		$('#bouton_droite').css('background', 'black');
$('#bouton_home').css('border-color', 'black');
$('#haut_parleur').css('background', 'black');
$('#camera_gauche').css('background', 'black');
$('#camera_haut').css('background', 'black');
$('#camera_haut_2').css('background', 'black');
$('#ecran_marque').css('color', 'black');
$('#ecran').css('border-color', 'black');
$('#top_bar_info_texte').css('color', 'black');
$('body').css('background', '#ecf0f1');
$('#top_bar_bulle_1').css('background', 'black');
$('#top_bar_bulle_2').css('background', 'black');
$('#top_bar_bulle_3').css('background', 'black');
$('#top_bar_bulle_4').css({'background' : 'black'});
$('#top_bar_bulle_5').css({'background' : 'black'});
$('#top_bar_heure').css('color', 'black');
$('#top_bar_batterie_texte').css('color', 'black');
$('#top_bar_batterie_1').css('border-color', 'black');
$('#top_bar_batterie_2').css('background', 'black');
$('#top_bar_batterie_3').css('background', 'black');
$('#iphone_contour').css('background', 'transparent');
background_iphone.innerHTML = 'NO BACKGROUND IPHONE';
compteur_background_iphone = 0;
setTimeout(function() {
	compteur_couleur++;
},100);					
}
});

$('#clique_couleur').on("click", function() {
if (compteur_couleur == 1) {	
$('#iphone_contour').css('border-color', 'white');
$('#bouton_gauche_1').css('background', 'white');
$('#bouton_gauche_2').css('background', 'white');
$('#bouton_gauche_3').css('background', 'white');
$('#bouton_droite').css('background', 'white');
$('#bouton_home').css('border-color', 'white');
$('#haut_parleur').css('background', 'white');
$('#camera_gauche').css('background', 'white');
$('#camera_haut').css('background', 'white');
$('#camera_haut_2').css('background', 'white');
$('#ecran_marque').css('color', 'white');
$('#ecran').css('border-color', 'white');
$('#top_bar_info_texte').css('color', 'white');
$('#top_bar_bulle_1').css('background', 'white');
$('#top_bar_bulle_2').css('background', 'white');
$('#top_bar_bulle_3').css('background', 'white');
$('#top_bar_bulle_4').css({'background' : 'white'});
$('#top_bar_bulle_5').css({'background' : 'white'});
$('#top_bar_heure').css('color', 'white');
$('#top_bar_batterie_texte').css('color', 'white');
$('#top_bar_batterie_1').css('border-color', 'white');
$('#top_bar_batterie_2').css('background', 'white');
$('#top_bar_batterie_3').css('background', 'white');
$('body').css('background', '#34495e');
background_iphone.innerHTML = 'SHOW BACKGROUND IPHONE';
setTimeout(function() {
	compteur_couleur = 0;
},100);
}
});


//SCRENN BACKGROUND
$('#clique_background').on("click", function() {
if (compteur_background == 0) {	
	$('#ecran_background').css('transition', '2s');
	$('#ecran_background').css('opacity', '1');
	$('#clique_background_switch').css('display', 'block');
	background.innerHTML = 'HIDE SCREEN BACKGROUND';
setTimeout(function() {
	compteur_background++;
},100);					
}
});

$('#clique_background').on("click", function() {
if (compteur_background == 1) {	
	$('#ecran_background').css('transition', '300ms');
	$('#ecran_background_2').css('left', '-185px');
	$('#ecran_background_3').css('left', '-185px');
	$('#clique_background_switch').css('display', 'none');
	compteur_background_switch = 0;
	background.innerHTML = 'SHOW SCREEN BACKGROUND';
	background_switch_texte.innerHTML ='SWITCH BACKGROUND';
setTimeout(function() {
	compteur_background = 0;
	$('#ecran_background').css('background-position', 'right');
	$('#ecran_background').css('opacity', '0');
},100);
}
});


//TOP BAR
$('#clique_top_bar').on("click", function() {
if (compteur_top_bar == 0) {
	$('#container_top_bar').css('opacity', '0');
	$('#container_top_bar').css('transition-delay', '0ms');
	$('#ecran_background').css('transition', '540ms');
	$('#ecran_background').css('top', '0');
	$('#ecran_background_2').css('top', '0');
	$('#ecran_background_3').css('top', '0');
	$('#ecran_background').css('height', '325px');
	$('#ecran_background_2').css('height', '325px');
	$('#ecran_background_3').css('height', '325px');
	hide.innerHTML = 'SHOW TOP BAR';
setTimeout(function() {
	compteur_top_bar++;
},100);
}
});

$('#clique_top_bar').on("click", function() {
if (compteur_top_bar == 1) {
	$('#container_top_bar').css('transition-delay', '300ms');
	$('#container_top_bar').css('opacity', '1');
	$('#ecran_background').css('transition', '300ms');
	$('#ecran_background').css('top', '15px');
	$('#ecran_background_2').css('top', '15px');
	$('#ecran_background_3').css('top', '15px');
	$('#ecran_background').css('height', '310px');
	$('#ecran_background_2').css('height', '310px');
	$('#ecran_background_3').css('height', '310px');
	hide.innerHTML = 'HIDE TOP BAR';
setTimeout(function() {
	compteur_top_bar = 0;
},100);
}
});


//BACKGROUND ADD
$('#clique_background_switch').on("click", function() {
if (compteur_background_switch == 0) {
	background_switch_texte.innerHTML ='SWITCH BACKGROUND';
	$('#ecran_background_2').css('left', '0');
setTimeout(function() {
	compteur_background_switch++;
},100);
}
});

$('#clique_background_switch').on("click", function() {
if (compteur_background_switch == 1) {
	$('#ecran_background').css('height', '325px');
	background_switch_texte.innerHTML ='NO MORE BACKGROUND';
setTimeout(function() {
	$('#ecran_background_3').css('left', '0');
	compteur_background_switch = 0;
},100);
}
});


//REMPLISSAGE DE L'IPHONE
$('#clique_background_iphone').on("click", function() {
if (compteur_background_iphone == 0 && compteur_couleur == 0) {
	$('#iphone_contour').css('background', 'black');
	background_iphone.innerHTML = 'HIDE BACKGROUND IPHONE';
setTimeout(function() {
	compteur_background_iphone++;
},100);
}
});


$('#clique_background_iphone').on("click", function() {
if (compteur_background_iphone == 1) {
	$('#iphone_contour').css('background', 'transparent');
	background_iphone.innerHTML = 'SHOW BACKGROUND IPHONE';
setTimeout(function() {
	compteur_background_iphone = 0;
},100);
}
});


//SAMSUNG TRANSFORM
$('#select_phone').change(function () {
	if (compteur_phone == 0) {
		$('#iphone_contour').css({'height' : '400px', 'border-radius' : '35px'});
		$('#bouton_gauche_1').css('opacity', '0')
		$('#bouton_gauche_2').css('top', '50px')
		$('#bouton_gauche_3').css('top', '95px')
		$('#bouton_droite').css({'top' : '125px', 'height' : '30px'});
		$('#bouton_home').css({'border-radius' : '15px', 'width' : '50px', 'height' : '18px',  'top' : '370px', 'left' : '75px', 'border-width' : '1px' });
		$('#ecran').css({'height' : '325px', 'top' : '35px'});
		$('#haut_parleur').css({'top' : '10px', 'left' : '77px', 'width' : '40px'});
		$('#camera_gauche').css({'width' : '9px', 'height' : '9px', 'left' : '135px', 'top' : '7px'});
		$('#camera_haut').css({'width' : '6px', 'height' : '6px', 'left' : '62px', 'top' : '9px'});
		$('#camera_haut_2').css('opacity', '1')
		$('#ecran_marque').css('opacity', '1')
		$('#ecran').css({'width' : '185px', 'left' : '6.5px'});
		$('#ecran_background').css({'height' : '325px', 'width' : '185px', 'transition' : '300ms'});
		$('#ecran_background_2').css({'height' : '325px', 'width' : '185px', 'transition' : '300ms'});
		$('#ecran_background_3').css({'height' : '325px', 'width' : '185px', 'transition' : '300ms'});
		heure.innerHTML = "11:06";
		$('#top_bar_batterie_texte').css('opacity', '0')
		$('#top_bar_batterie_1').css({'width' : '4px', 'height' : '6px', 'top' : '5px', 'left' : '148px'});
		$('#top_bar_batterie_2').css({'width' : '4px', 'height' : '1px', 'top' : '4px', 'left' : '149px'});
		$('#top_bar_batterie_3').css({'width' : '4px', 'height' : '3px', 'top' : '10px', 'left' : '149px'});
		$('#top_bar_heure').css({'left' : '157px', 'top' : '2px', 'font-size' : '9px'});
		$('#top_bar_bulle_1').css({'top' : '9.5px', 'left' : '133px',  'width' : '1px', 'height' : '3px', 'border-radius' : '0px'});
		$('#top_bar_bulle_2').css({'top' : '8px', 'left' : '135px', 'width' : '1px', 'height' : '4.5px', 'border-radius' : '0px'});
		$('#top_bar_bulle_3').css({'top' : '6.5px', 'left' : '137px', 'width' : '1px', 'height' : '6px', 'border-radius' : '0px'});
		$('#top_bar_bulle_4').css({'top' : '5px', 'left' : '139px', 'width' : '1px', 'height' : '7.5px', 'border-radius' : '0px'});
		$('#top_bar_bulle_5').css({'top' : '3.5px', 'left' : '141px', 'width' : '1px', 'height' : '9px', 'border-radius' : '0px'});
		$('#top_bar_info_texte').css('opacity', '0')
		setTimeout(function () {
			compteur_phone++;
		}, 100);
	}
});


//IPHONE TRANSFORM
$('#select_phone').change(function () {
	if (compteur_phone == 1) {
		$('#iphone_contour').css({'height' : '380px', 'border-radius' : '25px'});
		$('#bouton_gauche_1').css('opacity', '1')
		$('#bouton_gauche_2').css('top', '85px')
		$('#bouton_gauche_3').css('top', '125px')
		$('#bouton_droite').css({'top' : '85px', 'height' : '25px'});
		$('#bouton_home').css({'border-radius' : '50%', 'width' : '25px', 'height' : '25px', 'top' : '347px', 'left' : '88px', 'border-width' : '1px'});
		$('#ecran').css({'height' : '285px', 'top' : '45px'});
		$('#haut_parleur').css({'top' : '21px', 'left' : '80px', 'width' : '35px'});
		$('#camera_gauche').css({'width' : '6px', 'height' : '6px', 'left' : '60px', 'top' : '19px'});
		$('#camera_haut').css({'width' : '4px', 'height' : '4px', 'left' : '95px', 'top' : '8px'});
		$('#camera_haut_2').css('opacity', '0')
		$('#ecran_marque').css('opacity', '0')
		$('#ecran').css({'width' : '180px', 'left' : '9px', 'height' : '305px', 'top' : '35px'});
		$('#ecran_background').css({'height' : '310px', 'width' : '180px', 'transition' : '300ms'});
		$('#ecran_background_2').css({'height' : '310px', 'width' : '180px', 'transition' : '300ms'});
		$('#ecran_background_3').css({'height' : '310px', 'width' : '180px', 'transition' : '300ms'});
		$('#top_bar_batterie_texte').css('opacity', '1')
		heure.innerHTML = "16:36";
		batterie.innerHTML = "49%";
		$('#top_bar_batterie_1').css({'width' : '12px', 'height' : '5px', 'top' : '4px', 'left' : '157px'});
		$('#top_bar_batterie_2').css({'width' : '3px', 'height' : '3px', 'top' : '6px', 'left' : '170px'});
		$('#top_bar_batterie_3').css({'width' : '5.4px', 'height' : '5px', 'top' : '5px', 'left' : '158px'});
		$('#top_bar_heure').css({'left' : '78px', 'top' : '3px', 'font-size' : '7px'});
		$('#top_bar_bulle_1').css({'top' : '6px', 'left' : '7px',  'width' : '3px', 'height' : '3px', 'border-radius' : '50%'});
		$('#top_bar_bulle_2').css({'top' : '6px', 'left' : '12px', 'width' : '3px', 'height' : '3px', 'border-radius' : '50%'});
		$('#top_bar_bulle_3').css({'top' : '6px', 'left' : '17px', 'width' : '3px', 'height' : '3px', 'border-radius' : '50%'});
		$('#top_bar_bulle_4').css({'top' : '6px', 'left' : '22px', 'width' : '3px', 'height' : '3px', 'border-radius' : '50%'});
		$('#top_bar_bulle_5').css({'top' : '6px', 'left' : '27px', 'width' : '3px', 'height' : '3px', 'border-radius' : '50%'});
		$('#top_bar_info_texte').css('opacity', '1')
		setTimeout(function () {
			compteur_phone = 0;
		}, 100);
	}
});

//ROTATE
$('#clique_start').on('click', function() {
	if (compteur_rotate == 0) {
		$('#clique_top_bar').css('display', 'none')
		$('#ecran_background').css('top', '0');
		$('#ecran_background_2').css('top', '0');
		$('#ecran_background_3').css('top', '0');
		$('#ecran_background').css('height', '325px');
		$('#ecran_background_2').css('height', '325px');
		$('#ecran_background_3').css('height', '325px');
		$('#container_top_bar').css('display', 'none')
		$('#iphone_contour').css('left', '400px')
		setTimeout(function() {
			compteur_rotate++;
		},1200);
		setTimeout(function() {
			$('#iphone_contour').css('transform', 'rotateZ(90deg)')
		},500);
	}
	
	if (compteur_rotate == 1) {
		$('#iphone_contour').css('transform', 'rotateZ(0deg)')
		setTimeout(function() {
			compteur_rotate = 0;
		},1200);
		setTimeout(function() {
			$('#iphone_contour').css('left', '300px')
			$('#container_top_bar').css('display', 'block')
			$('#container_top_bar').css('opacity', '1')
			hide.innerHTML = 'HIDE TOP BAR';
			$('#ecran_background').css('top', '15px');
			$('#ecran_background_2').css('top', '15px');
			$('#ecran_background_3').css('top', '15px');
			$('#ecran_background').css('height', '310px');
			$('#ecran_background_2').css('height', '310px');
			$('#ecran_background_3').css('height', '310px');
			$('#clique_top_bar').css('display', 'block')
		},500);
	}
});


//EDIT 
$('#clique_background_edit').on('click', function() {
	if (compteur_edit == 0) {
			$('#edit').css({'display' : 'block'});
		setTimeout(function() {
			compteur_edit++;
		},100);
	}
	
	if (compteur_edit == 1) {

		setTimeout(function() {
			compteur_edit = 0;
		},100);
	}
});
	
            
          
!
999px
Loading ..................

Console