78 lines
4.7 KiB
Plaintext
78 lines
4.7 KiB
Plaintext
<section class="relative w-full py-8 px-6 my-12">
|
||
<div class="absolute top-0 left-0 h-[600px] md:h-full w-full md:w-1/3 bg-orange-500 rounded-br-[30px] md:rounded-tr-[30px] md:rounded-br-[30px] -z-10"></div>
|
||
|
||
<div class="md:container md:max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-5 gap-6 items-center relative">
|
||
|
||
<!-- Left Content -->
|
||
<div class="text-white md:p-6 rounded-lg flex flex-col items-center md:items-start relative z-10 h-full justify-center">
|
||
<div>
|
||
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center md:text-left">Social Media</h2>
|
||
<p class="text-lg mb-8 text-center md:text-left">
|
||
Ikuti akun resmi DLH untuk berita, edukasi, dan ajakan aksi lingkungan langsung dari sumber terpercaya.
|
||
</p>
|
||
</div>
|
||
<div class="w-full flex justify-center md:justify-start">
|
||
<img src="@Url.Content("~/assets/images/home/pancoran.svg")" alt="DLH Pancoran" class="max-w-full h-auto">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Content - Social Media Posts Grid -->
|
||
<div class="col-span-4 grid grid-cols-1 md:grid-cols-4 gap-6 relative z-10">
|
||
<!-- Instagram Post 1 -->
|
||
<div class="w-full max-w-[280px] h-[400px] overflow-hidden rounded-lg shadow-lg border border-gray-200 mx-auto">
|
||
<blockquote
|
||
class="instagram-media"
|
||
data-instgrm-captioned
|
||
data-instgrm-permalink="https://www.instagram.com/p/DBtPIcETJjm/?utm_source=ig_embed&utm_campaign=loading"
|
||
data-instgrm-version="14"
|
||
style="background:#FFF; border:0; border-radius:8px; box-shadow:none; margin:0; max-width:100%; min-width:100%; height:100%; width:100%;">
|
||
</blockquote>
|
||
</div>
|
||
|
||
<!-- Instagram Post 2 -->
|
||
<div class="w-full max-w-[280px] h-[400px] overflow-hidden rounded-lg shadow-lg border border-gray-200 mx-auto">
|
||
<blockquote
|
||
class="instagram-media"
|
||
data-instgrm-captioned
|
||
data-instgrm-permalink="https://www.instagram.com/p/DEzFYTwpJDW/?utm_source=ig_embed&utm_campaign=loading"
|
||
data-instgrm-version="14"
|
||
style="background:#FFF; border:0; border-radius:8px; box-shadow:none; margin:0; max-width:100%; min-width:100%; height:100%; width:100%;">
|
||
</blockquote>
|
||
</div>
|
||
|
||
<!-- Twitter Post -->
|
||
<div class="w-full max-w-[280px] h-[400px] overflow-hidden rounded-lg shadow-lg border border-gray-200 bg-white mx-auto">
|
||
<blockquote class="twitter-tweet" data-theme="light" data-width="100%" style="height:100%; border:0; margin:0;">
|
||
<a href="https://twitter.com/dinaslhdki/status/1884521645173596375?ref_src=twsrc%5Etfw">January 29, 2025</a>
|
||
</blockquote>
|
||
</div>
|
||
|
||
<!-- TikTok Post -->
|
||
<div class="w-full max-w-[280px] h-[400px] overflow-hidden rounded-lg shadow-lg border border-gray-200 mx-auto">
|
||
<blockquote
|
||
class="tiktok-embed"
|
||
cite="https://www.tiktok.com/@@dinaslhdki/video/7332309253337746694"
|
||
data-video-id="7332309253337746694"
|
||
style="max-width:100%; min-width:100%; height:100%; margin:0; border:0; border-radius:8px;">
|
||
<section>
|
||
<a target="_blank" title="@@dinaslhdki" href="https://www.tiktok.com/@@dinaslhdki?refer=embed">@@dinaslhdki</a>
|
||
Street Sweeper Electric⚡️ Peluncuran Street sweeper Electric, menyapu dan menyedot sampah ke dalam bak tahan karat dengan teknologi mesin yang lebih ramah lingkungan☘️
|
||
<a title="suksesjakartauntukindonesia" target="_blank" href="https://www.tiktok.com/tag/suksesjakartauntukindonesia?refer=embed">#SuksesJakartaUntukIndonesia</a>
|
||
<a title="kurangipilaholah" target="_blank" href="https://www.tiktok.com/tag/kurangipilaholah?refer=embed">#KurangiPilahOlah</a>
|
||
<a title="roadsweeperelectric" target="_blank" href="https://www.tiktok.com/tag/roadsweeperelectric?refer=embed">#RoadSweeperElectric</a>
|
||
</section>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<register-block dynamic-section="css" key="cssSosmed">
|
||
|
||
</register-block>
|
||
|
||
<register-block dynamic-section="scripts" key="jsSosmed">
|
||
<script async src="https://www.instagram.com/embed.js"></script>
|
||
<script async src="https://platform.twitter.com/widgets.js"></script>
|
||
<script async src="https://www.tiktok.com/embed.js"></script>
|
||
</register-block> |