Bootstrap Snippets Full Screen search

div class="container">
            <div class="float-right mt-3">
                    <button type="button" class="btn btn-primary search-btn btn-lg"><i class="fa fa-search"></i></button>
            </div>
        </div>
        <div class="search-area">
            <div class="close-btn pull-right"><button class="btn btn-lg m-3"><i class="fa fa-close"></i></button></div>
            <form action="">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-8 offset-lg-2 col-sm-12 offset-sm-0">
                                    <div class="input-group form-btn">
                                            <input type="text" class="form-control border-bottom" placeholder="Search here..." aria-label="Recipient's username" aria-describedby="button-addon2">
                                            <div class="input-group-append">
                                              <button class="btn btn-outline-light brd-left-none border-bottom" type="button" id="button-addon2"><i class="fa fa-search"></i></button>
                                            </div>
                                          </div>
                                          <small class="text-white pt-3">Begin typing your search above and press return to search.</small>
                            </div>
                        </div>
                    </div>
            </form>
        </div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500" rel="stylesheet">
    
.close-btn { position: relative; z-index: 9999;}
        .search-area { position: absolute; display: none; content: ''; top:0; left:0;  background: #9C27B0; width:100%; height:100%;}
        .form-btn { margin-top: 40%; font-family: 'Poppins', sans-serif; }
        .form-btn input { height:60px; background: transparent; font-size: 28px; color: #fff; } 
        .form-btn input:focus { background: transparent; outline: none; box-shadow: none; border-color:#ced4da; color: #fff;}
        .brd-left-none { border-left: none !important;}
        .form-btn .form-control { border-right:none !important;}
        .border-bottom { border: none; border-bottom: solid 1px #ced4da; border-radius: 0px;}
        .form-btn input::placeholder { color: #fff; font-weight: normal;}
        .form-btn i { font-size: 30px;}

$(document).ready(function(){
           $('.search-btn').click(function(){
               $('.search-area').fadeIn(); 
               $('.close-btn').fadeIn();              
           });

           $('.close-btn').click(function(){
               $('.search-area').fadeOut(); 
               $('.search-area').close();            
           });
          
       })