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

55 lines
2.5 KiB
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>