visa_app/application/views/document_upload.php

<style>

.designinput {
  position: relative;
  display: inline-block;
  margin-left: 15px;
}
.slide-up {
  display: inline-block;
  width: 260px;
  padding: 10px 0 10px 30px;
  font-family: "Open Sans", sans;
  font-weight: 400;
  color: #377D6A;
  background: #efefef;
  border: 0;
  border-radius: 3px;
  outline: 0;
  text-indent: 80px;
  transition: all .3s ease-in-out;
}
.slide-up::-webkit-input-placeholder {
  color: #efefef;
  text-indent: 0;
  font-weight: 300;
}
.slide-up + label {
      font-weight: 400;
  display: inline-block;
  position: absolute;
  transform: translateX(0);
  top: 0;
  left: 0;
  padding: 10px 15px;
  text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  transition: all .3s ease-in-out;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  overflow: hidden;
}
.slide-up + label:before, .slide-up + label:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: -1;
  transition: all .3s ease-in-out;
}
.slide-up + label:before {
  top: 6px;
  left: 5px;
  right: 5px;
  bottom: 6px;
  background: #df2769;
}
.slide-up + label:after {
  top: 0;
  bottom: 0;
  background: rgb(177, 177, 177);
}

span:nth-child(1) .slide-up {
  text-indent: 105px;
}

span:nth-child(3) .slide-up {
  text-indent: 125px;
}

span:nth-child(1) .slide-up:focus,
span:nth-child(1) .slide-up:active,
span:nth-child(3) .slide-up:focus,
span:nth-child(3) .slide-up:active {
  text-indent: 0;
}

.slide-up:focus,
.slide-up:active {
  color: #377D6A;
  text-indent: 0;
  background: #fff;
}
.slide-up:focus::-webkit-input-placeholder,
.slide-up:active::-webkit-input-placeholder {
  color: #aaa;
}
.slide-up:focus + label,
.slide-up:active + label {
  transform: translateY(-100%);
}
.slide-up:focus + label:before,
.slide-up:active + label:before {
  border-radius: 5px;
}
.slide-up:focus + label:after,
.slide-up:active + label:after {
  transform: translateY(100%);
}
 
 


 





  .btn-primary:hover, .btn-primary:active, .btn-primary.hover{
    background-color: #087322;
  }
   .btn-primary12:hover, .btn-primary12:active, .btn-primary12.hover{
    background-color: #FFC107;
    color: #fff;
  }
  .btn-primary{
      color: #fff;
    background-color: rgba(18, 187, 23, 0.75);
    border-color: rgba(18, 187, 23, 0.75);
    box-shadow: 0 2px 2px 0 rgba(233,30,99,.14), 0 3px 1px -2px rgba(233,30,99,.2), 0 1px 5px 0 rgba(233,30,99,.12);
    /*position: relative;*/
    padding: 10px 19px;
    margin: 0.3125rem 1px;
    min-width: auto;
    font-size: 1.20rem;
    font-weight: 800;
    line-height: 1.428571;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    letter-spacing: 0;
    cursor: pointer;
    border: 0;
    border-radius: .2rem;
    outline: 0;
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1);
    /*will-change: box-shadow,transform;*/
  }
  .btn-primary12{
      color: #fff;
   background-color:#f2b865;
    border-color: #f2b865;
    box-shadow: 0 2px 2px 0 rgba(233,30,99,.14), 0 3px 1px -2px rgba(233,30,99,.2), 0 1px 5px 0 rgba(233,30,99,.12);
    /*position: relative;*/
    padding: 10px 19px;
    margin: 0.3125rem 1px;
    min-width: auto;
    font-size: 1.20rem;
    font-weight: 800;
    line-height: 1.428571;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    letter-spacing: 0;
    cursor: pointer;
    border: 0;
    border-radius: .2rem;
    outline: 0;
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1);
    /*will-change: box-shadow,transform;*/
  }
   
  .or-button{
    position: relative;
    margin: -13px;
    display: inline-block;
    padding: 2px 5px;
    background-color: #fff;
    border-radius: 38px;
  }
  .box-title-box{
    margin-left: 18px;
    background: linear-gradient(60deg,#ec407a,#d81b60);
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(233,30,99,.4);
    display: inline-block;
    border-radius: 3px;
    padding: 13px;
    margin-top: -50px;
    margin-right: 15px;
    float: left;
  }
  </style>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper" style="background-color: #eee;">
    <!-- Content Header (Page header) -->
    <section class="content-header">
    </section>
    <!-- Main content -->
    <section class="content" style="margin-top: 50px;">
     <div class="row">
         
        <div class="col-md-offset-1 col-md-10">
          <div class="box box-solid" style="box-shadow:0 1px 4px 0 rgba(0,0,0,.14);padding: 20px;">
            
            <div class="box-body">
              <div class="row">
                <h3 class="box-title-box">Document Master</h3>
              </div>
               <!-- form start -->
            <form role="form" style="padding:40px;">
                <div class="row">
                  <div class="col-md-5 designinput">
                    <div class="form-group">
                           <input class="slide-up" id="card" type="text" placeholder="Enter visa name" /><label for="card">Document Name</label>

                    <!--<label for="exampleInputcountryname">Country Name</label>
                    <input type="text" class="form-control" id="exampleInputcountryname" placeholder="Enter country">-->
                  </div>
                  </div>
                  <div class="col-md-5">
                    <div class="form-group">
                           <label for="exampleInputcountryname">Document Upload</label>

                           <input id="card" type="file" />

                    <!--<label for="exampleInputcountryname">Country Name</label>
                    <input type="text" class="form-control" id="exampleInputcountryname" placeholder="Enter country">-->
                  </div>
                  </div>        
                </div>
               <div class="row">
                  <div class="col-md-12">                       
                          <label for="Description">Description</label>
                          <textarea class="form-control" rows="3" placeholder="Enter ..." data-gramm="true" data-txt_gramm_id="d620fc04-2898-2668-7729-ac0c777081d4" data-gramm_id="d620fc04-2898-2668-7729-ac0c777081d4" spellcheck="false" data-gramm_editor="true" style="z-index: auto; position: relative; line-height: 20px; font-size: 14px; transition: none; background: transparent !important;"></textarea>                                              
                  </div>
               </div> 
              <div class="row" style="padding-top:15px;">
                 <div class="col-md-offset-8 col-md-4">                   
                <button type="submit" class="btn btn-primary">Submit</button>
              <div class="or-button">Or</div>
                <button type="submit" class="btn btn-primary12">Reset</button>
                </div>                
              </div>
            </form>
 
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- ./col -->
      </div>
      <!-- /.row -->
   
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->