Music Album Disc
Music Album Disc is the interesting Project for a beginners in CSS. Using HTML and CSS Learn create the best UI/UX Design. Through this you will learn flexbox, position and animation.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Album</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="album">
<div class="card">
<img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/white-and-blue-rock-music-album-cover-design-template-669d6b733ca7b8e20734de8eea1e67ea_screen.jpg?ts=1561485914"
alt="">
</div>
<div class="outer">
<div class="inner">
<img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/white-and-blue-rock-music-album-cover-design-template-669d6b733ca7b8e20734de8eea1e67ea_screen.jpg?ts=1561485914" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
.container .album{
display: flex;
align-items: center;
justify-content: center;
}
.container .album .outer{
height:250px;
width:250px;
background-color:rgb(21,21,21);
border-radius:50%;
display: flex;
justify-content: center;
align-items: center;
}
.container .album .card{
height:300px;
width:250px;
position: relative;
left:25%;
background-color:black;
overflow:hidden;
display:flex;
justify-content: center;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
cursor: pointer;
}
.container .album .outer .inner{
height:100px;
width:100px;
border-radius:50%;
background-color:white;
overflow:hidden;
display: flex;
}
.container .album .card img{
width:120%;
}
.container .album .outer .inner img{
width:100%;
}
.container .album:hover .outer{
z-index:-1;
animation:rotate 1s infinite linear;
}
@keyframes rotate {
0%{
transform:rotateZ(0deg);
}
100%{
transform:rotate(360deg);
}
}