insane svg coupon card for elementor no plugins

ОСТМОТР

1 000 ₽
ЗАКЗАТЬ

HTML + JS

				
					<div class="ticket-wrap">

  
  <svg aria-hidden="true" focusable="false" class="ticket-svg left"
       viewBox="0 0 820 340"
       preserveAspectRatio="none"
       xmlns="http://www.w3.org/2000/svg">

    <defs>

      <linearGradient x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#ffffff
"/>
        <stop offset="100%" stop-color="#f8efe4
        "/>
      </linearGradient>

      <mask>

        <rect width="820"
              height="340"
              rx="26"
              fill="white"/>

        
        <g fill="black">
          <circle cx="0" cy="0" r="10"/>
          <circle cx="0" cy="34" r="10"/>
          <circle cx="0" cy="68" r="10"/>
          <circle cx="0" cy="102" r="10"/>
          <circle cx="0" cy="136" r="10"/>
          <circle cx="0" cy="170" r="10"/>
          <circle cx="0" cy="204" r="10"/>
          <circle cx="0" cy="238" r="10"/>
          <circle cx="0" cy="272" r="10"/>
          <circle cx="0" cy="306" r="10"/>
          <circle cx="0" cy="340" r="10"/>
        </g>

        
        <g fill="black">
          <circle cx="820" cy="0" r="10"/>
          <circle cx="820" cy="34" r="10"/>
          <circle cx="820" cy="68" r="10"/>
          <circle cx="820" cy="102" r="10"/>
          <circle cx="820" cy="136" r="10"/>
          <circle cx="820" cy="170" r="10"/>
          <circle cx="820" cy="204" r="10"/>
          <circle cx="820" cy="238" r="10"/>
          <circle cx="820" cy="272" r="10"/>
          <circle cx="820" cy="306" r="10"/>
          <circle cx="820" cy="340" r="10"/>
        </g>

      </mask>

    </defs>

    <rect width="820"
          height="340"
          rx="26"
          fill="url(#bgL)"
          mask="url(#maskL)"/>

  </svg>


  
  <div class="ticket-right-wrap">

    <svg aria-hidden="true" focusable="false" class="ticket-svg right"
         viewBox="0 0 380 340"
         preserveAspectRatio="none"
         xmlns="http://www.w3.org/2000/svg">

      <defs>

        <linearGradient x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#f8efe4"/>
          <stop offset="100%" stop-color="#FFF
"/>
        </linearGradient>

        <mask>

          <rect width="380"
                height="340"
                rx="26"
                fill="white"/>

          <g fill="black">
            <circle cx="0" cy="0" r="10"/>
            <circle cx="0" cy="34" r="10"/>
            <circle cx="0" cy="68" r="10"/>
            <circle cx="0" cy="102" r="10"/>
            <circle cx="0" cy="136" r="10"/>
            <circle cx="0" cy="170" r="10"/>
            <circle cx="0" cy="204" r="10"/>
            <circle cx="0" cy="238" r="10"/>
            <circle cx="0" cy="272" r="10"/>
            <circle cx="0" cy="306" r="10"/>
            <circle cx="0" cy="340" r="10"/>
          </g>

          <g fill="black">
            <circle cx="380" cy="0" r="10"/>
            <circle cx="380" cy="34" r="10"/>
            <circle cx="380" cy="68" r="10"/>
            <circle cx="380" cy="102" r="10"/>
            <circle cx="380" cy="136" r="10"/>
            <circle cx="380" cy="170" r="10"/>
            <circle cx="380" cy="204" r="10"/>
            <circle cx="380" cy="238" r="10"/>
            <circle cx="380" cy="272" r="10"/>
            <circle cx="380" cy="306" r="10"/>
            <circle cx="380" cy="340" r="10"/>
          </g>

        </mask>

      </defs>

      <rect width="380"
            height="340"
            rx="26"
            fill="url(#bgR)"
            mask="url(#maskR)"/>

    </svg>


    
    <div class="ticket-img"
         style="background-image:url('https://trezvyjvoditelmsk.ru/wp-content/uploads/2026/05/777-1.webp');">
    </div>

  </div>


  
  <div class="ticket-content">

    <h2>ОСТМОТР</h2>

    <div class="price">1 000 ₽</div>

    <a class="ticket-btn"
       href="https://t.me/kutuzov2332"
       target="_blank" rel="noopener noreferrer">

      <span>ЗАКЗАТЬ </span>

      <div class="plus"></div>

    </a>

  </div>

</div>

CSS

				
					/* ==================================================
   ОСНОВНОЙ КОНТЕЙНЕР
   MAIN WRAP
================================================== */

.ticket-wrap{
    position:relative;

    width:100%;
    max-width:1100px;
    min-width:320px;

    margin:0 auto;

    overflow:visible;

    aspect-ratio:1200 / 340;

    flex-shrink:0;

    /* 🔥 теперь всё адаптируется от ширины контейнера */
    container-type:inline-size;

    padding-right:40px;
}


/* ==================================================
   SVG
================================================== */

.ticket-svg{
    position:absolute;
    top:0;

    height:100%;
    display:block;
}

.ticket-svg.left{
    left:0;
    width:68%;
    z-index:1;
}


/* ==================================================
   ПРАВАЯ ЧАСТЬ
================================================== */

.ticket-right-wrap{
    position:absolute;

    top:0;
    right:0;

    width:32%;
    height:100%;

    z-index:2;

    transform-origin:left center;

    transition:transform .5s cubic-bezier(.2,.8,.2,1);
}

.ticket-right-wrap .ticket-svg{
    width:100%;
    height:100%;
}


/* ==================================================
   HOVER DESKTOP
================================================== */

@media (hover:hover) and (pointer:fine){

    .ticket-wrap:hover .ticket-right-wrap{
        transform:translateX(40px) rotate(6deg);
    }

}


/* ==================================================
   CONTENT
================================================== */

.ticket-content{
    position:absolute;

    top:50%;
    left:5%;

    transform:translateY(-50%);

    width:45%;

    z-index:5;
}


/* ==================================================
   TITLE
================================================== */

.ticket-content h2{
    margin:0;

    color:#55adf5;

    font-weight:700;
    line-height:1;

    white-space:nowrap;

    /* 🔥 адаптация от контейнера */
    font-size:clamp(14px,7cqw,52px);
}


/* ==================================================
   PRICE
================================================== */

.ticket-content .price{
    margin-top:10px;
    margin-bottom:20px;

    color:#55adf5;

    line-height:1.2;

    font-weight:500;

    /* 🔥 адаптация от контейнера */
    font-size:clamp(10px,2.5cqw,22px);
}


/* ==================================================
   BUTTON
================================================== */

.ticket-btn{
    display:inline-flex;

    align-items:center;
    justify-content:space-between;

    text-decoration:none;

    background:#55adf5;

    border-radius:999px;

    box-sizing:border-box;

    /* 🔥 адаптация */
    width:clamp(90px,18cqw,170px);
    height:clamp(28px,5.5cqw,50px);

    padding-left:clamp(10px,2.5cqw,20px);
    padding-right:clamp(3px,0.5cqw,6px);

    flex-shrink:0;

    -webkit-font-smoothing:antialiased;
}

.ticket-btn span{
    color:#FFF
;

    font-weight:500;

    white-space:nowrap;

    /* 🔥 адаптация */
    font-size:clamp(9px,2cqw,15px);
}


/* ==================================================
   PLUS
================================================== */

.ticket-btn .plus{
    position:relative;

    width:clamp(18px,4cqw,38px);
    height:clamp(18px,4cqw,38px);

    min-width:clamp(18px,3cqw,38px);
    min-height:clamp(18px,3cqw,38px);

    border-radius:999px;

    background:#FFF
;

    flex-shrink:0;

    overflow:hidden;

    transform:translateZ(0);

    backface-visibility:hidden;

    will-change:transform;

    transition:transform .6s cubic-bezier(.2,.8,.2,1);
}

.ticket-wrap:hover .ticket-btn .plus{
    transform:rotate(180deg);
}


/* ==================================================
   PLUS LINES
================================================== */

.ticket-btn .plus::before,
.ticket-btn .plus::after{
    content:"";

    position:absolute;

    top:50%;
    left:50%;

    background:#55adf5;

    transform:translate(-50%,-50%);
}

.ticket-btn .plus::before{
    width:38%;
    height:2px;
}

.ticket-btn .plus::after{
    width:2px;
    height:38%;
}


/* ==================================================
   IMAGE
================================================== */

.ticket-img{

    --img-right:20%;
    --img-top:50%;
    --img-width:58%;

    position:absolute;

    right:var(--img-right);
    top:var(--img-top);

    transform:translateY(-50%);

    width:var(--img-width);

    aspect-ratio:5 / 6;

    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;

    z-index:5;
}


/* ==================================================
   LAPTOP
================================================== */

@media (max-width:1200px){

    .ticket-content{
        width:48%;
    }

    .ticket-img{
        --img-right:18%;
        --img-width:60%;
    }

}


/* ==================================================
   TABLET
================================================== */

@media (max-width:1024px){

    .ticket-wrap{
        aspect-ratio:1200 / 360;
    }

    .ticket-content{
        width:50%;
    }

    .ticket-img{
        --img-right:16%;
        --img-width:64%;
    }

}


/* ==================================================
   PHONE
================================================== */

@media (max-width:767px){

    .ticket-wrap{
        aspect-ratio:1200 / 420;
    }

    .ticket-content{
        left:6%;
        width:54%;
    }

    .ticket-img{
        --img-right:20%;
        --img-width:70%;
    }

    .ticket-right-wrap,
    .ticket-wrap:hover .ticket-right-wrap{
        transform:none !important;
        transition:none !important;
    }

}


/* ==================================================
   SMALL PHONE
================================================== */

@media (max-width:420px){

    .ticket-wrap{
        aspect-ratio:1200 / 470;
    }

    .ticket-content{
        width:56%;
    }

    .ticket-img{
        --img-right:20%;
        --img-width:62%;
    }

}


/* ==================================================
   ULTRA SMALL
================================================== */

@media (max-width:320px){

    .ticket-wrap{
        aspect-ratio:1200 / 620;
    }

    .ticket-content{
        left:14px;
        width:58%;
    }

    .ticket-img{
        --img-right:4%;
        --img-width:58%;
    }

    .ticket-right-wrap{
        width:30%;
    }

}

animation 1

				
					.ticket-wrap{
    animation:ticketFloat 5s ease-in-out infinite;
}

@keyframes ticketFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

animation 2

				
					/* ==================================================
   ПОЯВЛЕНИЕ ВСЕГО ТИКЕТА
================================================== */

.ticket-wrap{
    animation:ticketIntro 1s cubic-bezier(.2,.8,.2,1) both;
}


/* ==================================================
   АНИМАЦИЯ
================================================== */

@keyframes ticketIntro{

    0%{
        opacity:0;

        transform:
        translateY(60px)
        scale(.92);

        filter:blur(18px);
    }

    100%{
        opacity:1;

        transform:
        translateY(0)
        scale(1);

        filter:blur(0);
    }

}

Instruction

				
					# 🛠 КАК РЕДАКТИРОВАТЬ SVG КУПОН В ELEMENTOR

# 🛠 HOW TO EDIT THE SVG COUPON IN ELEMENTOR

---

# 🔥 КАК ПОМЕНЯТЬ ЗАГОЛОВОК

# 🔥 HOW TO CHANGE THE TITLE

Найди:
Find:

```html
<h2>ОСТМОТР</h2>
```

Замени на:
Replace with:

```html
<h2>DENTAL CHECKUP</h2>
```

---

# 💰 КАК ПОМЕНЯТЬ ЦЕНУ

# 💰 HOW TO CHANGE THE PRICE

Найди:
Find:

```html
<div class="price">1 000 ₽</div>
```

Замени:
Replace:

```html
<div class="price">$49</div>
```

---

# 🖼 КАК ПОМЕНЯТЬ КАРТИНКУ

# 🖼 HOW TO CHANGE THE IMAGE

Найди:
Find:

```html
style="background-image:url('ССЫЛКА');"
```

Замени ссылку:
Replace the URL:

```html
style="background-image:url('https://site.com/image.webp');"
```

---

# 🔗 КАК ПОМЕНЯТЬ ССЫЛКУ КНОПКИ

# 🔗 HOW TO CHANGE BUTTON LINK

Найди:
Find:

```html
href="https://t.me/kutuzov2332"
```

Замени:
Replace:

```html
href="https://yourwebsite.com"
```

---

# ✍ КАК ПОМЕНЯТЬ ТЕКСТ КНОПКИ

# ✍ HOW TO CHANGE BUTTON TEXT

Найди:
Find:

```html
<span>ЗАКАЗАТЬ</span>
```

Замени:
Replace:

```html
<span>BOOK NOW</span>
```

---

# 🎨 КАК ПОМЕНЯТЬ ОСНОВНЫЕ ЦВЕТА

# 🎨 HOW TO CHANGE MAIN COLORS

---

# 🌈 ЛЕВЫЙ ГРАДИЕНТ

# 🌈 LEFT GRADIENT

Найди:
Find:

```svg
<linearGradient>
```

Поменяй цвета:
Change colors:

```svg
<stop offset="0%" stop-color="#254b70"/>
<stop offset="100%" stop-color="#55adf5"/>
```

Пример:
Example:

```svg
<stop offset="0%" stop-color="#111111"/>
<stop offset="100%" stop-color="#ff4d4d"/>
```

---

# 🌈 ПРАВЫЙ ГРАДИЕНТ

# 🌈 RIGHT GRADIENT

Найди:
Find:

```svg
<linearGradient>
```

Поменяй:
Change:

```svg
<stop offset="0%" stop-color="#55adf5"/>
<stop offset="100%" stop-color="#254b70"/>
```

---

# 🔘 КАК ПОМЕНЯТЬ ЦВЕТ КРУГА "+"

# 🔘 HOW TO CHANGE PLUS BUTTON COLOR

Найди:
Find:

```css
.ticket-btn .plus{
    background:#55adf5;
}
```

Замени:
Replace:

```css
background:#ff4d4d;
```

---

# 🔤 КАК ПОМЕНЯТЬ ЦВЕТ ТЕКСТА КНОПКИ

# 🔤 HOW TO CHANGE BUTTON TEXT COLOR

Найди:
Find:

```css
.ticket-btn span{
    color:#55adf5;
}
```

Замени:
Replace:

```css
color:#ff4d4d;
```

---

# ⚪ КАК ПОМЕНЯТЬ ФОН КНОПКИ

# ⚪ HOW TO CHANGE BUTTON BACKGROUND

Найди:
Find:

```css
.ticket-btn{
    background:#fff;
}
```

Замени:
Replace:

```css
background:#000;
```

---

# 🔠 КАК ПОМЕНЯТЬ ЦВЕТ ЗАГОЛОВКА

# 🔠 HOW TO CHANGE TITLE COLOR

Найди:
Find:

```css
.ticket-content h2{
    color:#fff;
}
```

Замени:
Replace:

```css
color:#000;
```

---

# 💵 КАК ПОМЕНЯТЬ ЦВЕТ ЦЕНЫ

# 💵 HOW TO CHANGE PRICE COLOR

Найди:
Find:

```css
.ticket-content .price{
    color:#fff;
}
```

---

# 📏 КАК ПОМЕНЯТЬ РАЗМЕР КАРТОЧКИ

# 📏 HOW TO CHANGE CARD SIZE

Найди:
Find:

```css
max-width:1100px;
```

Замени:
Replace:

```css
max-width:1400px;
```

---

# 🔄 КАК ИЗМЕНИТЬ HOVER АНИМАЦИЮ

# 🔄 HOW TO CHANGE HOVER ANIMATION

Найди:
Find:

```css
transform:translateX(40px) rotate(6deg);
```

Сильнее эффект:
Stronger effect:

```css
transform:translateX(70px) rotate(12deg);
```

---

# 🌊 КАК ИЗМЕНИТЬ ПЛАВАЮЩУЮ АНИМАЦИЮ

# 🌊 HOW TO CHANGE FLOAT ANIMATION

Найди:
Find:

```css
transform:translateY(-10px);
```

Замени:
Replace:

```css
transform:translateY(-20px);
```

---

# 📱 МОБИЛЬНАЯ ВЕРСИЯ

# 📱 MOBILE VERSION

Найди:
Find:

```css
@media (max-width:767px)
```

Тут настраивается мобильная версия.
This controls the mobile layout.

---

# 💎 ЛУЧШИЕ ЦВЕТА ДЛЯ PREMIUM ДИЗАЙНА

# 💎 BEST COLORS FOR PREMIUM DESIGN

---

# 🔵 BLUE

```css
#55adf5
#254b70
```

---

# 🟣 PURPLE

```css
#7b61ff
#3d2c8d
```

---

# 🔴 RED

```css
#ff4d4d
#7a0000
```

---

# 🟡 GOLD

```css
#f5c542
#7a5a00
```

---

# ⚫ BLACK PREMIUM

```css
#111111
#2b2b2b
```