Создаем объявление 03

<link rel="stylesheet" href="/styles/notice/css/bubl.css">
<div class="notice--example">
    <h1>Добро пожаловать!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur adipisci qui repellendus <buy>500 рублей!</buy> lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero repellat consequuntur voluptates illo officiis. Ipsum minus, ad expedita quisquam sed. Consequatur adipisci qui repellendus.</p>
    <a href="#" data-xf-click="overlay" class="button button--primary button--icon--example">       
       <span class="button-text">Оформить подписку</span>       
    </a>
</div>
<div class="bubl1"></div>
<div class="bubl2"></div>
<div class="bubl3"></div>

$0
@font-face {
    font-family: 'SKODANextArabic';
    src: url('/styles/notice/fonts/SKODANextArabic-Regular.woff2') format('woff2'),
         url('/styles/notice/fonts/SKODANextArabic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SKODANextArabic';
    src: url('/styles/notice/fonts/SKODANextArabic-Bold.woff2') format('woff2'),
         url('/styles/notice/fonts/SKODANextArabic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'SolomonSans';
    src: url('/styles/notice/fonts/Solomon-Sans-Normal.woff2') format('woff2'),
         url('/styles/notice/fonts/Solomon-Sans-Normal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SolomonSans';
    src: url('/styles/notice/fonts/Solomon-Sans-Bold.woff2') format('woff2'),
         url('/styles/notice/fonts/Solomon-Sans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

.notice {
    &.notice-example {
        background: rgb(48,55,57) url(/styles/notice/images/notice-bg.jpg) no-repeat top;
        background-size: cover;
        color: #fff;
        overflow: hidden;
        position: relative;
        border: none;
        .uix_noticeIcon {
            display: none;
        }
        .notice--example {
            background: transparent url(/styles/notice/images/notice-logo.png) no-repeat 98% 50%;
            background-size: 160px;
            padding: 1em;
            z-index: 2;
            h1 {
                font-family: 'SKODANextArabic';
                font-size: 2.2em;
                font-weight: bold;
                text-transform: uppercase;
                background: linear-gradient(330deg, #130E54 0%, #C6AAD1 25%, #130E54 50%, #C6AAD1 75%, #130E54 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                -webkit-text-stroke: 1px #fff;
                padding: 0;
                margin: 0;                  
            }
            p {
                font-family: 'SolomonSans';
                font-size: 1em;
                max-width: 85%;
                padding: 0;
                margin: 0;
                buy {
                    font-size: 1em;
                    font-weight: bold;
                    color: red;              
                }
                @media (max-width: @xf-responsiveWide) {
                    max-width: 100%;
                }
            }
            a {
                margin-top: 1em;
                &.button--icon--example {
                    .button-text {
                        font-family: 'SolomonSans';
                        font-weight: bold;
                        text-transform: uppercase;
                        &:before {
                            .m-faBase();
                            .m-faContent(@fa-var-wallet);
                            margin-right: 3px;
                        }
                    }
                }
            }
            @media (max-width: @xf-responsiveWide) {
                background: transparent;
            }
            @media (max-width: @xf-responsiveMedium) {
                font-size: 90%;
            }
            @media (max-width: @xf-responsiveNarrow) {
                font-size: 80%;
            }          
        }
    }
}