پیشنمایش زنده
کد HTML
<div class="container">
<div class="palette">
<div class="color"><span>264653</span></div>
<div class="color"><span>2A9D8F</span></div>
<div class="color"><span>E9C46A</span></div>
<div class="color"><span>F4A261</span></div>
<div class="color"><span>E76F51</span></div>
</div>
<div id="stats">
<span>53421 saves</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M4 7.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5S5.5 9.83 5.5 9 4.83 7.5 4 7.5zm10 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-5 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S9.83 7.5 9 7.5z"></path>
</svg>
</div>
</div>
کد CSS
.container {
height: 200px;
width: 350px;
border-radius: 1em;
overflow: hidden;
box-shadow: 0 10px 20px #dbdbdb;
font-family: sans-serif;
}
.palette {
display: flex;
height: 86%;
width: 100%;
}
.color {
height: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
letter-spacing: 1px;
transition: flex 0.1s linear;
}
.color span {
opacity: 0;
transition: opacity 0.1s linear;
}
.color:nth-child(1) {
background: #264653;
}
.color:nth-child(2) {
background: #2a9d8f;
}
.color:nth-child(3) {
background: #e9c46a;
}
.color:nth-child(4) {
background: #f4a261;
}
.color:nth-child(5) {
background: #e76f51;
}
.color:hover {
flex: 2;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.color:hover span {
opacity: 1;
}
#stats {
height: 14%;
width: 100%;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5em;
box-sizing: border-box;
color: #bebebe;
}
#stats svg {
fill: #bebebe;
transform: scale(1.2);
}