mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-18 12:31:27 +00:00
55 lines
2.5 KiB
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>
|