Плагин ремодал


<link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal-default-theme.min.css" rel="stylesheet" type="text/css">
<style>
.remodal-overlay {
background: rgba(0, 0, 0, 0.8);
}
.remodal {
background: rgba(0, 0, 0, 0);
width:auto;
padding: 0px;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal.min.js"></script>

Атрибуты :
data-remodal

Записал для вас мини-марафон по созданию блога уже на канале добавляю последние записи так что приятного просмотра

Макет для работы

Ссылка на плейлист --- https://youtube.com/playlist?list=PLtz5_N8wESgtiiUIftKYa-KqAK6BaNJgt

Обновился плейлист добавился ещё один урок по cms webflow

Краткое видео о том как Стилизовать элемент список

Урок о том как сделать динамический слайдер используя webflow cms и swiper slider

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<style>
.swiper-container {
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
</style>

————————————————
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script>
var swiper = new Swiper(".swiper-container", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
scrollbar: {
el: ".swiper-scrollbar",
hide: true,
},
//autoplay: {
// delay: 2500,//
// disableOnInteraction: false,//
// },//
//direction: "vertical",//
spaceBetween: 20,
slidesPerView: 1,
centeredSlides: false,
freeMode: false,
loop: false,
mousewheel: true,
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 20,
},
1024: {
slidesPerView: 3,
spaceBetween: 20,
},
},
});
</script>

<style>
.gooey{
background-image: linear-gradient(120deg, #34e0f0 0%, #c20000 100%);
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
width: 150px; height: 144px;
animation: morph 3s linear infinite;
transform-style: preserve-3d;
outline: 1px solid transparent;
will-change: border-radius;
}
.gooey:before,
.gooey:after{
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0; top: 0;
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21);
will-change: border-radius, transform, opacity;
animation-delay: 200ms;
background-image: linear-gradient(120deg, rgba(0,67,255,.55) 0%, rgba(0,103,255,.89) 100%);
}

.gooey:before{
animation: morph 3s linear infinite;
opacity: .21;
animation-duration: 1.5s;
}

.gooey:after{
animation: morph 3s linear infinite;
animation-delay: 400ms;
opacity: .89;
line-height: 120px;
text-indent: -21px;
}

@keyframes morph{
0%,100%{
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
transform: translate3d(0,0,0) rotateZ(0.01deg);
}
34%{
border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
transform: translate3d(0,5px,0) rotateZ(0.01deg);
}
50%{
opacity: .89;
transform: translate3d(0,0,0) rotateZ(0.01deg);
}
67%{
border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
transform: translate3d(0,-3px,0) rotateZ(0.01deg);
}
}

@keyframes fadeIn{
100%{
transform: scale(1.03);
opacity: 0;
}
</style>

Анимация цикличное вращение
https://youtu.be/hCNJWCI96d0