pixelfed/pixelfed

<template>
    <div class="rounded-3 overflow-hidden discover-news-slider">
        <div class="row align-items-center">
            <div class="col-xl-4 col-md-5 offset-lg-1">
                <div class="pt-5 pb-3 pb-md-5 px-4 px-lg-0">
                    <p class="lead mb-3" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;letter-spacing: -0.7px;font-weight:300;font-size:20px;">Introducing</p>
                    <h2 class="h1 pb-0 mb-3" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;letter-spacing: -1px;font-weight:700;">Emoji <span class="primary">Reactions</span></h2>
                    <p class="lead" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;letter-spacing: -0.7px;font-weight:400;font-size:17px;line-height:15px;">
                        A new way to interact with content,<br /> now available!
                    </p>
                    <a href="#" class="btn btn-primary primary btn-sm">Learn more <i class="far fa-chevron-right fa-sm ml-2"></i></a>
                </div>
            </div>
            <div class="col-lg-6 col-md-7 offset-xl-1">
                <div class="position-relative d-flex flex-column align-items-center justify-content-center h-100">
                    <svg class="d-none d-md-block position-absolute top-50 start-0 translate-middle-y" width="868" height="868" style="min-width: 868px;" viewBox="0 0 868 868" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.15" cx="434" cy="434" r="434" fill="#7dd3fc"></circle></svg>
                    <div class="d-flex">
                        <img src="/img/remoji/hushed_face.gif" class="position-relative zindex-3 mb-2 my-lg-4" width="100" alt="Illustration">
                        <img src="/img/remoji/thumbs_up.gif" class="position-relative zindex-3 mb-2 my-lg-4" width="100" alt="Illustration">
                        <img src="/img/remoji/sparkling_heart.gif" class="position-relative zindex-3 mb-2 my-lg-4" width="100" alt="Illustration">
                    </div>
                </div>
            </div>
        </div>
        <div style="position: absolute;left: 50%;transform: translateX(-50%);bottom:10px;">
            <div class="d-flex">
                <button class="btn btn-link p-0">
                    <i class="far fa-dot-circle"></i>
                </button>

                <button class="btn btn-link p-0 mx-2">
                    <i class="far fa-circle"></i>
                </button>

                <button class="btn btn-link p-0">
                    <i class="far fa-circle"></i>
                </button>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
    export default {

    }
</script>

<style lang="scss">
    .discover-news-slider {
        position: relative;
        background-color: #e0f2fe;
    }
</style>