SCSS
* {
margin: 0;
}
body {
height: 100vh;
background: darken(#86C1D4, 15);
}
.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 346px;
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
}
.title {
font-family: "Roboto", sans-serif;
color: #FFF;
text-align: center;
padding-top: 32px;
font-weight: 300;
.text {
font-size: 42px;
}
.number {
font-size: 48px;
}
}
.icon {
// background: radial-gradient(ellipse at center, #d3d3d3 0%, #ffffff 100%);
background: #fff;
width: 15vw;
height: 15vw;
max-width: 250px;
max-height: 250px;
border-radius: 20%;
box-shadow: 0 16px 16px 0 rgba(#000, 0.2);
padding: 48px;
display: flex;
.lines {
min-height: 100%;
height: 100%;
width: 100%;
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: space-around;
.line {
border-radius: 2px;
width: 18%;
background: #9CD9DE;
animation: lineColor 3s ease-in alternate infinite;
&:nth-child(1) {
height: 45%;
}
&:nth-child(2) {
animation-delay: 1s;
height: 65%;
}
&:nth-child(3) {
animation-delay: 2s;
height: 90%;
}
}
}
}
@keyframes lineColor {
20% {
background: #9CD9DE;
}
50% {
background: #86C1D4;
}
100% {
background: #5A92AF;
}
}
@media all and (max-height: 500px) {
.wrapper {
height: 160px;
width: 346px;
.icon {
width: 20vh;
height: 20vh;
padding: 5%;
}
.title {
display: none;
}
}
}
