pannel2

by jeum

HTML

<div id="Import">

		<div id="Pannel">
			
			<div id="pannel0">
				<div>
					<h2>Ouvrir</h2>
					<p>Les fichiers seront directement ouverts sur ce poste.</p>
				</div>
				<div>
					<h2>Convertir</h2>
					<p>Les fichiers seront uploadés et convertis par le serveur.</p>
					<input type="button" value="&middot;&middot;&middot;" id="next0"/>
				</div>
			</div>
		</div>
		<input type="file" id="filepicker" style="display:none" multiple/>
		<div id="dropper"></div>
	</div>

CSS

/* Import */
		#Import div{
			position: absolute;
			top: 0;
			bottom: 0;
			overflow: hidden;
		}
		#Pannel{
			left: 0;
			right: 0;
			margin: auto;
			width: 400px;
			height: 200px;
		}
		#pannel0{
            width: 100%;
		}
		#pannel0 div{
			width: 200px;
			-webkit-transition: all 250ms linear;
			-moz-transition: all 250ms linear;
			-o-transition: all 250ms linear;
			transition: all 250ms linear;
			border: solid #222 1px;
		}
		#pannel0 div:nth-child(1){
			right: 200px;
            background-color: red;
		}
		#pannel0 div:nth-child(2){
			right: 0;
            background-color: blue;
		}