Пишем разметку:
Пишем наш стиль:
Смотрим наш результат:
HTML:
<div class="frame">
<!-- Cards -->
<div class="card card-1">
<div class="card-top">Basic</div>
<div class="card-info">
<div class="card-cost">
<div class="card-value">5€</div>
<div class="card-month">per month</div>
</div>
<div class="card-lines">
<div class="card-line" style="width: 80px;"></div>
<div class="card-line" style="width: 50px;"></div>
<div class="card-line" style="width: 90px;"></div>
<div class="card-line" style="width: 70px;"></div>
</div>
</div>
</div>
<div class="card card-2">
<div class="card-top">Pro</div>
<div class="card-info">
<div class="card-cost">
<div class="card-value">10€</div>
<div class="card-month">per month</div>
</div>
<div class="card-lines">
<div class="card-line" style="width: 90px;"></div>
<div class="card-line" style="width: 50px;"></div>
<div class="card-line" style="width: 100px;"></div>
<div class="card-line" style="width: 70px;"></div>
</div>
</div>
</div>
<div class="card card-3">
<div class="card-top">Premium</div>
<div class="card-info">
<div class="card-cost">
<div class="card-value">20€</div>
<div class="card-month">per month</div>
</div>
<div class="card-lines">
<div class="card-line" style="width: 90px;"></div>
<div class="card-line" style="width: 50px;"></div>
<div class="card-line" style="width: 100px;"></div>
<div class="card-line" style="width: 70px;"></div>
</div>
</div>
</div>
<div class="bars">
<!-- BAR 1 -->
<div class="stat">
<div class="stat-info">
<div class="stat-min">5 Users</div>
<div class="stat-max">100 Users</div>
</div>
<div class="stat-bar bar-1">
<span></span>
</div>
</div>
<!-- BAR 2 -->
<div class="stat">
<div class="stat-info">
<div class="stat-min">20 GB</div>
<div class="stat-max">200 GB</div>
</div>
<div class="stat-bar bar-2">
<span></span>
</div>
</div>
<!-- BAR 3 -->
<div class="stat">
<div class="stat-info">
<div class="stat-min">1 Project</div>
<div class="stat-max">50 Projects</div>
</div>
<div class="stat-bar bar-3">
<span></span>
</div>
</div>
</div>
</div>
SCSS:
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
$orange: #ff773d;
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
background: lighten(grey, 47%);
color: #333;
font-family: "Open Sans", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: grid;
grid-gap: 1px;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
justify-content: center;
}
.card {
background: white;
height: 85%;
width: 88%;
justify-self: center;
display: flex;
flex-direction: column;
box-shadow: 1px 1px 10px rgba(grey, 0.4);
border-radius: 0.3rem;
cursor: pointer;
transition: all 0.3s ease-in-out;
&:first-child {
margin-left: 1rem;
}
&:nth-child(3) {
margin-right: 1rem;
}
& > * {
transition: all 0.3s ease-in-out;
}
// HOVERS
&:hover {
transform: scale(1.04);
.card-top {
background: darken($orange, 20%);
}
.card-value {
color: darken($orange, 20%);
}
}
// BASIC CARD
&-1:hover ~ .bars > .stat > .bar-1 > span {
width: 10%;
}
&-1:hover ~ .bars > .stat > .bar-2 > span {
width: 10%;
}
&-1:hover ~ .bars > .stat > .bar-3 > span {
width: 10%;
}
// PRO CARD
&-2:hover ~ .bars > .stat > .bar-1 > span {
width: 30%;
}
&-2:hover ~ .bars > .stat > .bar-2 > span {
width: 60%;
}
&-2:hover ~ .bars > .stat > .bar-3 > span {
width: 40%;
}
// PREMIUM BAR
&-3:hover ~ .bars > .stat > .bar-1 > span {
width: 100%;
}
&-3:hover ~ .bars > .stat > .bar-2 > span {
width: 100%;
}
&-3:hover ~ .bars > .stat > .bar-3 > span {
width: 100%;
}
&-top {
height: 25%;
width: 100%;
background: #ff773d;
color: white;
font-weight: 600;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
display: flex;
justify-content: center;
align-items: center;
}
&-info {
height: 75%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
& > * {
text-align: center;
}
}
&-cost {
margin-bottom: 1rem;
}
&-value {
font-weight: 700;
font-size: 1.6rem;
}
&-month {
font-size: 0.8rem;
}
&-lines {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
&-line {
margin-bottom: 3px;
height: 4px;
background: #e0e0e0;
}
}
.bars {
height: 85%;
width: 95%;
background: white;
box-shadow: 3px 3px 5px rgba(grey, 0.2);
grid-column: 1 / -1;
justify-self: center;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.stat {
padding: 0.8rem 0.5rem 0.8rem 0.5rem;
&-info {
font-size: 0.8rem;
margin-bottom: 0.2rem;
display: flex;
justify-content: space-between;
}
&-bar {
height: 12px;
width: 100%;
background: #e0e0e0;
border-radius: 0.5rem;
& > span {
display: block; // Important to have
height: 100%;
width: 0;
background: #ff773d;
border-radius: 0.5rem;
transition: all 0.3s;
}
}
}