style.css

*{
    padding: 0;
    margin:0;
    color: white ;
    font-family:sans-serif ;
}
body{
    background-color: #001;
    display: flex;
}
/* .profile{
    display: none;
} */
.img-box{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid white;
     flex-shrink: 0;/* because shrinkage */
}

.img-box img{
    width: 100%;
}
.profile{
    display: flex;
    align-items: center ;
    gap: 30px;
}
.profile h2{
font-size: 20px;
text-transform: capitalize;
}
.menu{
    background-color:#123 ;
    width:60px;
    height: 100vh;
    padding: 20px;
  overflow: hidden;
}
.menu:hover{
    width: 260px;
}
ul{
list-style:none ;
position: relative;
height: 95%;
}
ul li a{
    display: block;
    text-decoration:none;
    padding: 10px;
    margin: 20px 0px;
    border-radius: 8px;
    display: flex ;
   align-items :center;
   gap: 40px;
   transition: .5s;
}
ul li a:hover, .active, .data-info .box:hover ,td:hover{
    background-color: #ffffff55;
}
.log-out{
position:absolute;
bottom: 0px;
width:100%;
}
.log-out a {
    background-color:  #a00;
}
ul li a i{
font-size: 30px;
}
.content{
    width: 100%;
    margin: 10px;
}
.title-info{
    background-color: rgb(10, 76, 231);
    padding: 10px;
    margin: 10px 0;
    border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-radius: 8px;
}
.data-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.data-info .box {
    background-color:#123;
    height: 150px;
    flex-basis: 150px;/* is the same role of with but their we used because we have display :flex*/
    flex-grow: 1;  /*if we have a empty space, the box will grow in */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.data-info .box i{
    font-size: 40px;
}
.data-info .box .data{
    text-align: center;
}
.data-info .box .data span{
    font-size: 30px;
}
table{
    width: 100%;
    text-align: center;
    border-spacing: 8px;
}
td,th {
    background:#123;
    height: 40px;
    border-radius: 8px;
}
th{
    background-color:  #0080ff ;
}
.price .count{
   padding: 6px;
   border-radius: 6px; 
}
.price{
    background-color: green;
}
.count{
    background-color: gold;
}