<h1>music player</h1>
<div class="music-player">
        <div class="left">
                <div class="circle"></div>
                <div class="cd">
                    <div class="cd-right"></div>
                    <div class="cd-right-small"></div>
                    <div class="cd-left"></div>
                    <div class="cd-left-small"></div>
                    <div class="cd-circle"></div>
                    <hr>
                    <hr>
                </div>
        </div>
        <div class="right">
            <div class="player">
                <div class="p-circle"></div>
                <hr class="first">
                <hr class="secound">
                <hr class="third">
                <div class="square"></div>
                
            </div>
            <div class="last">
                <div></div>
                <div></div>
            </div>
            <div class="mora"></div>
        </div>
    </div>

h1
{
  text-align:center;
}
.music-player
{
    height:200px;
    width: 250px;
    border: 5px solid #242121;
    border-radius: 5px;
    background-color: #BC9E85;
    margin:50px auto;
}
.left
{
    float: left;
    width: 70%;
    position: relative
}
.right
{
    float: right;
    width: 30%;
    position: relative
}
.cd
{
    height: 150px;
    width: 150px;
    border: 4px solid #242121;
    border-radius: 50%;
    background-color: #7C8697;
    margin:10px 0 0 10px;
    transition:all .3s ease-in-out;
    position:relative
}
.circle
{
    height: 15px;
    width: 15px;
    float: left;
    border: 3px solid #242121;
    border-radius: 50%;
    background-color: #fff;
    margin:7px 0 0 7px;
   position:absolute
}
.cd-right
{
    height: 100px;
    width: 83px;
    border: 4px solid #ddd;
    border-color: transparent #242121 transparent transparent;
    border-radius: 0 55px 63px 0;
    margin: 25px 0px 0px 50px;
   position:absolute
}
.cd-right-small
{
    height: 63px;
    width: 70px;
    border: 4px solid #ddd;
    border-color: transparent #242121 transparent transparent;
    border-radius: 0 55px 63px 0;
    margin: 45px 0px 0px 50px;
    position:absolute
}
.cd-left
{
    height: 100px;
    width: 80px;
    border: 4px solid #ddd;
    border-color: transparent transparent transparent #242121;
    border-radius: 55px 0 0 63px;
    margin: 25px 0px 0px 12px;
    position:absolute
}
.cd-left-small
{
    height: 63px;
    width: 70px;
    border: 4px solid #ddd;
    border-color: transparent transparent transparent #242121;
    border-radius: 55px 0 0 63px;
    margin: 42px 0px 0px 25px;
   position:absolute
}
.cd-circle
{
    height: 15px;
    width: 15px;
    float: left;
    border: 4px solid #242121;
    border-radius: 50%;
    background-color: #BC9E85;
    margin: 64px 0 0 65px;
    position:absolute
}
.cd hr
{
    width: 40px;
    display: inline-block;
    height: 5px;
    background-color: #242121;
    border: 0;
    border-radius: 5px;
    margin: 170px 0 0 4px;
}
.player
{
    position: absolute;
    margin-top:20px
}
.player .p-circle
{
    height: 13px;
    width: 13px;
    border: 3px solid #242121;
    border-radius: 50%;
    background-color: #fff;
    margin: 1px 0 0 40px;
    position:absolute
  
}
.player .first
{
    width: 20px;
    height: 4px;
    background-color: #242121;
    border: 0;
    margin: 20px 0 0 27px;
    position: absolute;
    transform: rotate(-45deg);
    border-radius: 5px
}
.secound
{
    background-color: #242121;
    border: 0;
    margin: 60px 0px 0px -4px;
    height: 4px;
    width: 70px;
    transform: rotate(90deg);
}
.third
{
    width: 20px;
    height: 4px;
    background-color: #242121;
    border: 0;
    margin: 36px 0 0 15px;
    position: absolute;
    transform: rotate(-45deg);
    border-radius: 5px
}
.square
{
    height: 10px;
    width: 20px;
    border: 4px solid #242121;
    background-color: #fff;
     transform: rotate(-45deg);
    border-radius: 5px;
    margin: 42px 0 0 -2px;
}
.last div
{
    
    height: 15px;
    width: 15px;
    border: 3px solid #242121;
    border-radius: 50%;
    background-color: #fff;
    margin: 137px 0px -127px 48px;
}
.mora
{
    height: 60px;
    width: 15px;
    border: 4px solid #242121;
    background-color: #fff;
    border-radius: 5px;
    margin: -3px 0 0 46px;
}
.player:hover
{
    margin-left: -30px;
    transform:rotatez(30deg);
    transition:all 1s ease-in-out;
}