72 lines
1.2 KiB
CSS
72 lines
1.2 KiB
CSS
|
.countdown {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
opacity: 0;
|
||
|
|
transition: 0.2s all ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.counter {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.counter-component {
|
||
|
|
border: 2px solid #e74c3c;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
flex-direction: column;
|
||
|
|
width: 6em;
|
||
|
|
height: 6em;
|
||
|
|
margin-right: 1em;
|
||
|
|
margin-left: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.counter-component:first-of-type {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.counter-component:last-of-type {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.counter-component span {
|
||
|
|
font-size: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.label {
|
||
|
|
font-size: .75em;
|
||
|
|
color: #34495e;
|
||
|
|
font-weight: lighter;
|
||
|
|
margin-top: .5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 600px) {
|
||
|
|
.counter {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
grid-template-rows: 1fr 1fr;
|
||
|
|
grid-column-gap: 1em;
|
||
|
|
grid-row-gap: 1em;
|
||
|
|
margin-bottom: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.counter-component {
|
||
|
|
margin-right: 0;
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.counter-component:last-of-type {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.separator {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|