<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.