Full screen searchbox

<div class="container"> 
            <div id="search-box" class="mt-5"><i class="fa fa-search"></i></div> 
    </div>
    <div class="fullScreen">
        <form action="">
           <div class="placeholder"><i class="fa fa-search"></i></div>
            <input type="text" name="" id="">
            
            <div class="close">x</div>
        </form>
    </div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
     <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Poppins', sans-serif; }
        #search-box { cursor: pointer; font-size: 3em}
        .fullScreen { background: #673ab7; position: absolute; left:0px; right: 0px; bottom: 0px; left: 0px; top: 0px; transition:5s; display: none;}
        .fullScreen form { margin: auto; display:  flex;  align-items: center; min-height: 100vh; max-width: 550px; width: 100%;}
        .fullScreen input[type="text"] {  border: none; border-radius: 40px; height: 50px; line-height: 50px; margin: auto; width: 100%; padding: 15px 35px; box-sizing: border-box;}
        .fullScreen input[type="text"]:focus { outline: none; border: none; box-shadow: none; }
        .fullScreen .close {position: relative;z-index: 99;text-shadow: none;color: #f00;right: 30px;opacity: 1;font-weight: 400; cursor: pointer;}
        .placeholder { left: 30px; color: #ccc; position: relative}
    </style>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
        $(document).ready(function(){
            $('#search-box').click(function(){
                $('.fullScreen').show();
            });
            $('.close').click(function(){
                $('.fullScreen').hide();
            })
        })
    </script>