template AI beings
.title-wrp{
top: 0;
position: absolute;
margin-top: 25px;
text-align: center;
}
.aibeing-menu-title{
color: #282828;
font-family: var( --e-global-typography-e60e8cc-font-family ), Sans-serif;
font-weight: var( --e-global-typography-e60e8cc-font-weight );
font-size: var( --e-global-typography-e60e8cc-font-size );
line-height: var( --e-global-typography-e60e8cc-line-height );
letter-spacing: var( --e-global-typography-e60e8cc-letter-spacing );
}
@media (max-width: 480px){
.aibeing-menu-title{
font-size: 24px;
}
}
.cls-menu1, .cls-menu2{
fill: none;
stroke: lightgray;
stroke-width: 1.5;
stroke-dashoffset: 0;
}
.cls-menu3{
fill: none;
stroke: #fbfbfb;
stroke-width: 10;
stroke-dasharray: 4;
}
#aibeings{
width: 100%;
height: 500px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
}
.menu-grid-background{
width: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
-o-object-fit: cover;
object-fit: cover;
max-height: 500px;
}
#menuGrid{
min-width: 1366px;
width: 100%;
height: 100%;
}
#menuGrid2{
min-width: 1366px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.aibeings-container{
margin-top: 50px;
max-width: 700px;
width: 100%;
height: 300px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row;
flex-flow: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
z-index: 1;
overflow: hidden;
}
.aibeings-wrapper{
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row;
flex-flow: row;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.aibeing-item{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin: auto;
width: 15%;
height: 250px;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 600;
text-align: center;
fill: lightgray;
text-decoration: none;
-webkit-transition: all .3s cubic-bezier(0.25, 1, 0.5, 1);
-o-transition: all .3s cubic-bezier(0.25, 1, 0.5, 1);
transition: all .3s cubic-bezier(0.25, 1, 0.5, 1);
}
.aibeing-name{
color: lightgray;
font-family: var( --e-global-typography-088a005-font-family ), Sans-serif;
font-weight: 700;
font-size: var( --e-global-typography-088a005-font-size );
line-height: var( --e-global-typography-088a005-line-height );
letter-spacing: var( --e-global-typography-088a005-letter-spacing );
}
.aibeing-item-current:hover,
.aibeing-item-current:hover .aibeing-name{
cursor: pointer;
fill: #ff883a;
color: #ff883a;
}
.aibeings-menu-mobile{
display: none;
}
@media (max-width: 480px){
.aibeing-item{
width: 100%;
height: 250px;
}
.aibeings-menu-desktop{
display: none;
}
.aibeings-menu-mobile{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.aibeing-slide{
-webkit-transition: all .6s cubic-bezier(0.25, 1, 0.5, 1);
-o-transition: all .6s cubic-bezier(0.25, 1, 0.5, 1);
transition: all .6s cubic-bezier(0.25, 1, 0.5, 1);
fill: lightgray;
color: lightgray;
}
.aibeing-slide.is-active .aibeing-item,
.aibeing-slide.is-active .aibeing-name{
fill: #ff883a;
color: #ff883a;
}
.splide--nav > .splide__track > .splide__list > .splide__slide.aibeing-slide{
border: 0px solid transparent;
}
.splide--nav > .splide__track > .splide__list > .splide__slide.aibeing-slide.is-active{
border: 0px solid transparent;
}
.splide__arrow.single-arrow{
background: none;
width: 2em;
height: 2em;
margin-right: -10px;
}
.splide__arrow--prev.single-prev svg,
.splide__arrow--next.single-next svg{
fill: #eb5e00;
width: 2em;
height: 2em;
}
.splide__arrow--prev.single-prev {
margin-left: -12px;
}
}
document.addEventListener( 'DOMContentLoaded', function () {
var textSlides = new Splide( '#aibeingSlides', {
gap: 0,
focus: 'center',
width: '100%',
height: 250,
perPage: 3,
arrowPath: 'M16.71,0l10,20-10,20-3.42-1.71L22.43,20,13.29,1.71Z',
classes: {
arrows: 'splide__arrows wrp-arrows',
arrow : 'splide__arrow single-arrow',
prev : 'splide__arrow--prev single-prev',
next : 'splide__arrow--next single-next',
},
isNavigation: true,
pagination: false,
easing: 'cubic-bezier(0.25, 1, 0.5, 1)'
}).mount();
});
<!-- -->
