Barber Shop & Hairdressers Salon Website 2024 Using Elementor Flexbox

856SHARES

Button Style CSS

Button Style CSS Classes

button
button-white

Service Item CSS

.info-box .icon .elementor-icon::after{
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    transition: 0.4s;
    top: -12px;
    left: -12px;
    width: 60px;
    height: 60px;
    background-color: rgb(247 247 247 / 0%);
}

.info-box:hover .icon .elementor-icon::after{
    top: -59px;
    left: -59px;
    width: 154px;
    height: 154px;
    background-color: #F7F7F7;
}

.info-box-btn .elementor-button-icon{
    font-size: 24px!important;
    margin-top: -4px;
    fill: #969696;
    
}

.info-box-btn:hover .elementor-button-icon{
    fill: #1E1E1E;
}
.info-box-btn .elementor-button-icon svg{
    rotate: -45deg;
    transition: all 0.4s;
}
 
.info-box-btn:hover .elementor-button-icon svg{
    rotate: 0deg;
}

Service Item CSS Classes

info-box
icon
info-box-btn

Team Member CSS

.team-member .member-info{
    transition: 0.4s;
    transform: translateY(45px);
}

.team-member:hover .member-info{
    transform: translateY(0);
}

.team-member .member-info .member-socials {
    transition: 0.4s;
    opacity: 0;
    
}

.team-member:hover .member-info .member-socials{
    opacity: 1;
}

Team Member CSS Classes

team-member
member-info

Check Box CSS

.check-box:hover .elementor-icon{
    fill: #fff!important;
    color: #fff;
    background-color: #1E1E1E!important;
}

Check Box CSS Class

check-box

Portfolio Section CSS

.portfolio .item-description{
    transform: translateX(20px);
    transition: opacity 0.5s, transform 0.5s;
    opacity: 0;
}

.portfolio:hover .item-description{
    transform: translateX(0);
    opacity: 1;
}

.portfolio .item-description .tittle{
    color: #fff;
    text-decoration: underline;
    -webkit-text-decoration-color: transparent;
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.06em;
}

.portfolio .item-description .tittle:hover{
    -webkit-text-decoration-color: currentColor;
    text-decoration-color: currentColor;
    
}

Portfolio Section CSS Classes

portfolio
item-description

Tab CSS

.tabs .e-n-tabs-heading{
    border-right: 1px solid #1e1e1e33;
}

Tab CSS Class

tabs

Blog Post CSS

.blog-post .jkit-postblock-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}

.blog-post .jkit-post-meta{
    align-self: flex-start;
}

.blog-post .jkit-post-title{
   order: 2!important;
}

.blog-post .jkit-post-meta-bottom{
    order: 3;
}

Blog Post CSS Class

blog-post

Marquee Content CSS

.marquee-content{
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee-content .elementor-heading-title{
    display: inline-block;
    animation: marquee 28s linear infinite;
}

.marquee-content:hover .elementor-heading-title{
    animation-play-state: paused;
  }

@keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
     transform: translateX(-50%);
    }
  }

Marquee Content CSS Class

marquee-content