<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" /> <div class="container"> <div class="postAttribute"> <div class="row"> <h2>SELECTED CATEGORY</h2> <ol class="breadcrumb"> <li>category 1</li> <li class="active">Subcategory 1</li> </ol> <hr> </div> <div class="row"> <form action=""> <div class="col-md-8"> <div class="row"> <h2>INCLUDE SOME DETAILS</h2> <div class="form-group"> <label for="">Ad Title <span class="star">*</span></label> <input type="text" name="" id="" class="input-lg form-control"> </div> <div class="form-group"> <label for="">Description <span class="star">*</span></label> <textarea name="" id="" cols="30" rows="5" class="form-control"></textarea> </div> <hr> </div> <div class="row"> <h2>SET A PRICE</h2> <div class="form-group"> <label for="">Price <span class="star">*</span></label> <div class="input-group"> <input type="number" name="" id="" aria-describedby="basic-addon2" class="form-control " placeholder="Price in Ruppess"> <span class="input-group-addon" id="basic-addon2">Per Kg</span> </div> </div> <hr> </div> <div class="row "> <h2>UPLOAD UPTO 3 PICTURES</h2> <div class="uploadPicture"> <div class="input-group"> <div class="col-md-4 col-sm-4"> <div class="wrapper"> <input type="file" name="postImage" id="" class=" file form-control"> <i class="fas fa-camera fa-lg"></i> <input type="submit" class="form-control submit value=" Add Photo"> </div> </div> <div class="col-md-4 col-sm-4"> <div class="wrapper"> <input type="file" name="postImage" id="" class=" file form-control"> <i class="fas fa-camera fa-lg"></i> <input type="submit" class="form-control submit value=" Add Photo"> </div> </div> <div class="col-md-4 col-sm-4"> <div class="wrapper"> <input type="file" name="postImage" id="" class=" file form-control"> <i class="fas fa-camera fa-lg"></i> <input type="submit" class="form-control submit" value="Add Photo"> </div> </div> </div> </div> <hr> </div> <div class="form-group"> <input type="submit" class="sellBtn hoverGreen" value="Post Now" class="form-control"> </div> </div> </form> </div> </div> </div>

/* postAttribute */ .postAttribute { border: 1px solid #cccc; padding: 2em; } .postAttribute h2{ font-size: 20px; font-weight: 700; } .postAttribute .col-md-8 h2{ font-size: 20px; font-weight: 700; } /* postImage */ .uploadPicture .wrapper { width: 15vh; height: 15vh; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; position: relative; } .uploadPicture .wrapper:hover { text-decoration: none; background: yellowgreen; color: white; } .uploadPicture .wrapper .file { width: 100%; height: 100%; position: absolute; left: 0; right: 0; opacity: 0; cursor: pointer; } .uploadPicture .wrapper .submit:hover { color: white !important; } .uploadPicture .wrapper input { background: transparent; border: none; box-shadow: none; } .uploadPicture .input-group { margin-right: auto; margin-left:auto; } /* start */ .star{ color:red; } /* Global Button Classes */ .hoverAll:hover{ color:yellowgreen; border:#cccc; } .hoverGreen:hover{ color:white; background:var(--yellogreen); } .userBtn{ background: #337ab7; padding: .5em 4em .5em 4em; color: white; border: none; margin-bottom: 1em; } .userBtn:hover{ color:white; background:var(--yellogreen); } .sellBtn { border: 1px solid #ccc; background: none; font-size: 1em; font-weight: bold; padding: 1em; border-radius: none; } .sellBtn:hover { border: 2px solid var(--midnight); text-decoration: none; cursor:pointer; } :root{ --midnight:#104f55; --light-blue:#49bbc6; --yellogreen:yellowgreen; }