How can i make header and footer like the image i send..?

i upload an image here i wanna make my header and footer like the image i send anyone can help me with that ..?

in footer i have 5 button in middle of the item one of them have background and icon looks like image how can i make that ..?

and i have a header i wanna make that like image to .

anyone can give me a code or something..?

thanks

enter image description here this is my image

Solution

Below is an idea which you can do this.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style type="text/css">

    .header {
        background-color: black;
        width: 500px;
        height: 70px;
        border-bottom-left-radius: 60%;
        border-bottom-right-radius: 60%;
    }

    .footer {
        width: 500px;
        display: flex;
        justify-content: space-around;
        background-color: #dbd0d0;
        padding: 10px;
        position: relative;
        margin-top: 100px;
    }

    .fa.fa-home {
        padding: 15px;
        position: absolute;
        background-color: #60b75f;
        border-radius: 100%;
        color: white;
        top: -18px;
    }

    .fa.fa-volume-up {
        margin-right: 30px;
    }

    .fa.fa-map-o {
        margin-left: 30px;
    }

</style>

<div class="header">

</div>



<div class="footer">

    <i class="fa fa-user-o" aria-hidden="true"></i>
    <i class="fa fa-volume-up" aria-hidden="true"></i>
    <i class="fa fa-home" aria-hidden="true"></i>
    <i class="fa fa-map-o" aria-hidden="true"></i>
    <i class="fa fa-bars" aria-hidden="true"></i>

</div>