feture

Use CSS- variable like-flex-wrap,justify-content,box-shadow,:hover .

This is CSS sheet-like Nab bar

.flcx{

background-image: url('cod.jpg');

height: 200px;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

align-items: flex-end;

}

.flcx > div{

    width: 100px;

    background: yellowgreen;

  font-size: 25px;

  margin: 10px;

  padding: 10px;

  text-align: center;

  box-shadow: 5px 10px 10px rgb(10, 5, 5);

}

.flcx > div:hover{

      box-shadow: 5px 10px 10px white;    

}

.flcx > div a:hover{

    color: white;

}

.flcx > div a{

      color: rgba(3, 2, 2, 0.596);

}

.div-clear{

    clear: both;

}

 This is HTML sheet with <a> Tag

<div class="flcx">

    <div class="divx1"><a href="#">Home</a></div>

    <div class="divx2"><a href="#">Project</a></div>

    <div class="divx3"><a href="#">JAVA</a></div>

    <div class="divx4"><a href="#">Python</a></div>

    <div class="divx5"><a href="#">About</a></div>

    <div class="divx6"><a href="#">Contect</a></div>

</div>

<div class="div-clear"></div><br>

<hr><br>