Roman_applicant-site/public/scssold/layout/_counter.scss

191 lines
4.0 KiB
SCSS

@use '../utils' as *;
/*----------------------------------------*/
/* 13. COUNTER CSS
/*----------------------------------------*/
// Counter css start
.tp-counter {
&__item {
text-align: center;
color: var(--tp-common-white);
&.has-border{
@media #{$xs,$sm,$md} {
&::after{
display: none !important;
}
}
position: relative;
&::after{
position: absolute;
right: -20px;
top: -20px;
content: '';
width: 1px;
height:100px ;
background-color: rgba($color: #fff, $alpha: .2);
display: inline-block;
}
}
& span {
& b {
font-size: 36px;
display: block;
line-height: 1;
position: relative;
&::after {
content: '+';
}
}
}
}
}
.tp-counter-2 {
&__bg {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 10px;
}
&__icon {
font-size: 40px;
display: inline-block;
margin-bottom: 30px;
}
&__item {
text-align: center;
color: var(--tp-common-white);
& span {
& b {
font-size: 36px;
display: block;
line-height: 1;
position: relative;
&::after {
content: '+';
}
}
}
}
}
.tp-pulse-border{
border-radius: 50%;
z-index: 1;
&::before{
position: absolute;
content: '';
left: 50%;
top: 50%;
@include transform(translate(-50%, -50%));
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid rgba($color: #fff, $alpha: .4);
animation: borderanimate2 2s linear infinite;
animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
@include transition(.3s);
z-index: -1;
}
&::before{
animation-delay: .7s;
}
}
.tp-countdown{
&__video {
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
& a {
background-color: var(--tp-common-white);
@include square-btn(90px,$circle:true);
display: inline-block;
font-size: 20px;
color: var(--tp-theme-primary);
position: relative;
&::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border:1px solid var(--tp-common-white);
left: 0;
top: 0;
transform: scale(1.3);
}
}
}
&__right{
@media #{$xs} {
padding-left: 30px;
padding-right: 30px;
}
}
}
.tp-coundown {
&__countdown {
@media #{$xs} {
background-color: var(--tp-common-white);
padding:30px 15px ;
display: inline-block;
}
& .cdown {
padding: 20px 25px;
background-color: white;
display: inline-block;
text-align: center;
margin-right: 5px;
border-radius: 5px;
@media #{$xs} {
padding: 0;
margin-right:10px;
}
& p {
margin-bottom: 0;
}
}
& .time-count {
font-size: 30px;
font-weight: 700;
}
}
}
.count-down-shapes-1{
position: absolute;
left: 50px;
top: 40px;
transform: scale(.6);
}
.count-down-shapes-2{
position: absolute;
right: 25%;
transform: scale(.6);
}
.count-down-shapes-3{
position: absolute;
right: 0px;
bottom: 20%;
}
.course__view{
margin-left: 15px;
}