<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row destacados">
<div class=" col-md-10">
<div class="box1">
<h4>Poster votre annonce en 2 minutes</h4>
</div>
</div>
</div>
<div class="col-md-5">
<div class="main-login main-center">
<form class="form-horizontal" method="post" action="#">
<div class="row destacados">
<div class=" col-md-10">
<div class="box2">
<h4>Pays & Ville</h4>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-md-7">
<select class="form-control">
<option value="0">votre Pays</option>
<option value="1">Bénin</option>
<option value="2">Burkina faso</option>
<option value="3">Cameroun</option>
<option value="4">Congo</option>
<option value="5">Cote d'Ivoir</option>
<option value="6">Guinée</option>
<option value="7">Gabon</option>
<option value="8">Mali</option>
<option value="9">RDC</option>
<option value="9">Sénégal</option>
</select>
</div>
</div>
<div class="form-group">
<div class="cols-sm-12">
<input type="text" class="form-control" name="pays" placeholder="Votre ville"/>
</div>
</div>
<div class="row destacados">
<div class=" col-md-10">
<div class="box2">
<h4>Catégories & Sous-catégories</h4>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-12">
<select class="form-control">
<option value="0">Catégories</option>
</select>
</div>
</div>
<div class="form-group">
<div class="cols-sm-12">
<select class="form-control">
<option value="0">Sous-catégories</option>
</select>
</div>
</div>
<div class="row destacados">
<div class=" col-md-10">
<div class="box2">
<h4>Titre & Déscription & Prix</h4>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-12">
<input type="text" class="form-control" name="pays" placeholder="Titre de votre annonce"/>
</div>
</div>
<div class="form-group">
<div class="cols-sm-12">
<textarea class="form-control" placeholder="Décrivez en detail votre annonce"></textarea>
</div>
</div>
<div class="form-group">
<div class="cols-sm-12">
<div class="input-group">
<input type="text" class="form-control" name="pays" placeholder="Votre prix"/>
<span class="input-group-addon">FCFA</span>
</div>
</div>
</div>
<div class="row destacados">
<div class=" col-md-10">
<div class="box2">
<h4>Télécharger des photos</h4>
</div>
</div>
</div>
<div class="form-group">
<label for="files" class="btn btn-info"><i class="glyphicon glyphicon-camera"></i> Ajouter des images </label>
<div class="cols-sm-12">
<input type="file" id="files" name="files[]" multiple />
</div>
</div>
<div class="form-group ">
<button type="button" class="btn btn-success btn-lg btn-block login-button"><i class="glyphicon glyphicon-plus"></i> Poster l'annonce</button>
</div>
</form>
</div>
</div>
</div>
</div>
.destacados{
padding: 10px 0;
}
.box1 h4 {
position:relative;
padding: 10px 20px;
margin: 10px 0px;
margin-left: -30px;
font-size: 25px;
line-height:32px;
font-weight:bold;
color:#fff;
background:#cc0000;
/* css3 extras */
text-shadow:0 1px 1px rgba(0,0,0,0.2);
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0.2);
/* See "NOTE 1" */
zoom:1;
}
.box1 h4:before,
.box1 h4:after {
content:"";
position:absolute;
/* See "NOTE 2" */
z-index:-1;
top:100%;
left:0;
border-width:0 10px 10px 0;
border-style:solid;
border-color:transparent maroon;
}
/********************* seconde ******************************/
.destacadose{
padding: 10px 0;
}
.box2 h4 {
position:relative;
padding: 10px 20px;
margin: 1px 0px;
margin-left: -30px;
font-size: 16px;
line-height: 15px;
font-weight:bold;
color:#fff;
background:#149ccf;
/* css3 extras */
text-shadow:0 1px 1px rgba(0,0,0,0.2);
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0.2);
/* See "NOTE 1" */
zoom:1;
}
.box2 h4:before,
.box2 h4:after {
content:"";
position:absolute;
/* See "NOTE 2" */
z-index:-1;
top:100%;
left:0;
border-width:0 10px 10px 0;
border-style:solid;
border-color:transparent #066487;
}
/********************* upload **************************/
#files {
display: none;
}
/*.imageThumb {
max-height: 75px;
border: 2px solid;
padding: 1px;
cursor: pointer;
}*/
/*.pip {
display: inline-block;
margin: 10px 10px 0 0;
}*/
/*.remove {
display: block;
background: #444;
border: 1px solid black;
color: white;
text-align: center;
cursor: pointer;
}*/
/*.remove:hover {
background: white;
color: black;
}*/
.nnah{
padding: 0;
margin: 5px;
}
.nnahs{
padding: 0;
}
.close{
position: absolute;
z-index: 1;
font-size: 14px;
margin-left: -5px;
margin-top: -7px;
}
.close span{
opacity: 1;
color: #000;
}
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<div class=\"alert alert-success col-xs-2 col-sm-2 col-md-2 nnah\">" +
"<button type=\"button\" class=\"close\" data-dismiss=\"alert\"><span aria-hidden=\"true\" class=\"glyphicon glyphicon-remove\"></span></button>" +
"<img class=\" col-xs-12 col-sm-12 col-md-12 nnahs\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/>" +
"</div>").insertAfter("#files");
$(".remove").click(function(){
$(this).parent(".pip").remove();
});
// Old code here
/*$("<img></img>", {
class: "imageThumb",
src: e.target.result,
title: file.name + " | Click to remove"
}).insertAfter("#files").click(function(){$(this).remove();});*/
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
