banner

raw html

by Oleh Kotsubko

HTML

<a href="" class="c-banner">
    <div class="c-banner__container">
        <div class="c-banner__text">Soon you’ll get <span class="u-color-accent">all about </span><br><span class="u-color-pink">eSports</span> in the single place</div>
        <div class="c-banner__button">
            <button type="button" class="c-button">Learn more</button>
        </div>
    </div>
</a>

CSS

@import url('https://fonts.googleapis.com/css?family=Rubik:700');
    .c-banner, .c-banner * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    button::-moz-focus-inner {
        border: 0;
    }
    .c-banner {
        background-color: #010e28;
        font-family: 'Rubik', sans-serif;
        font-weight: 700;
        color: #fff;
        display: block;
        width: 100%;
        text-decoration: none;
        z-index: 8;
        position: relative;
        height: 114px;
        overflow: hidden;
    }
    .c-banner__container {
        width: 1210px;
        max-width: 100%;
        padding: 24px 0 24px 75px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
    }
    .c-banner__container:before {
        content: '';
        height: 806px;
        width: 600px;
        background: url(https://blob4weplaytest.blob.core.windows.net/weplay-public/relaunch/1x_pic_1.png) no-repeat center center / contain;
        position: absolute;
        right: 0;
        z-index: -1;
        top: -188px;
    }
    .c-banner__text {
        font-size: 28px;
        width: 480px;
        max-width: 100%;
        margin-right: 32px;
        opacity: 0;
        transition: .3s ease;
        -webkit-transition: .3s ease;
    }
    .c-banner__text.show {
        opacity: 1;
    }
    .c-button {
        background-color: #3bbbe9;
        border-radius: 32px;
        font-size: 18px;
        text-decoration: none;
        color: #fff;
        text-align: center;
        width: 240px;
        max-width: 100%;
        display: inline-block;
        padding: 12px;
        border: none;
        cursor: pointer;
        font-weight: 700;
        -webkit-transition: opacity .3s ease, background-color .3s ease;
        -o-transition: opacity .3s ease, background-color .3s ease;
        transition:...

JavaScript

$(document).ready(function () {
        var userLang = (navigator.language || navigator.userLanguage).split('-')[0];
        if (userLang === 'be' || userLang === 'ru' || userLang === 'kk' || userLang === 'uk') {
            var titleTextRu = 'Ты получишь<span class="u-color-accent"> всё о</span><br><span class="u-color-pink"> eSports</span> на одной платформе';
            var btnText = "Узнать больше";
            $('.c-banner__text').empty().html(titleTextRu);
            $('.c-banner .c-button').text(btnText);
        }
        $('.c-banner__text').addClass('show');
        $('.c-banner .c-button').addClass('show');
    });