pixelfed/resources/assets/components/partials/discover/news-slider.vue

<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>