-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (134 loc) · 9.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>P3H YM Gorontalo | RUSLAN SAMUEL</title>
<link rel="shortcut icon" href="assets/Icon Halal Indonesia 2.png" type="image/x-icon">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<!-- <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> -->
<style>
::-webkit-scrollbar{
width: 0;
}
</style>
</head>
<body id="beranda" class="cursor-default">
<nav class="bg-white w-full sm:px-24 flex justify-between items-center shadow-md sticky top-0 absolute" z-index="999">
<a href="#beranda" class="flex justify-center items-center gap-2 ps-4 py-2">
<img src="" alt="Halal Indonesia" class="h-4 sm:h-8 elLogoHalal">
<img src="" alt="LP3H YM Gorontalo" class="h-4 sm:h-8 elLogoLp3h">
<div class="flex flex-col justify-center items-start">
<h1 class="sm:text-base text-sm font-bold text-purple-900 uppercase elNama"></h1>
<h2 class="sm:block hidden text-xs text-purple-700 elProfesi"></h2>
</div>
</a>
<div class="flex justify-center items-center" id="elMenu"></div>
</nav>
<section class="w-full p-4 sm:p-0 shadow-md" style="background-image: url('assets/abstract-dark-purple-3d-background-with-purple-and-white-lines-paper-cut-style-textured-usable-for-decorative-web-layout-poster-banner-corporate-brochure-and-seminar-template-design-vector.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;">
<div class="w-full h-full flex flex-col sm:flex-row justify-start sm:justify-between items-start sm:items-center p-0 sm:p-24 gap-4 sm:gap-0">
<div class="flex justify-center items-center gap-3 sm:gap-7">
<img src="" alt="Halal Indonesia" class="h-14 sm:h-44 elLogoHalalPutih">
<div class="flex flex-col justify-center items-start sm:gap-3">
<h1 class="font-black text-lg sm:text-5xl text-white uppercase elNama" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="500"></h1>
<h2 class="text-xs sm:text-3xl text-purple-500" data-aos="fade-right" data-aos-easing="linear" data-aos-duration="500">Pendamping <span class="text-white">Proses Produk Halal</span></h2>
<h3 class="text-xs sm:text-3xl text-purple-500" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="500">No. Registrasi : <span class="text-white elNoreg"></span></h3>
</div>
</div>
<div class="sm:flex-col sm:flex hidden justify-start items-start gap-10 p-8 rounded-3xl bg-purple-300/80 shadow-xl gap-5">
<div class="flex justify-center items-center gap-2">
<img src="" alt="BPJPH" class="w-12 sm:w-24 elLogoBpjph">
<div class="flex flex-col justify-center items-start">
<h1 class="font-black text-4xl">BPJPH</h1>
<h1 class="text-xs">BADAN PENYELENGGARA</h1>
<h1 class="text-xs">JAMINAN PRODUK HALAL</h1>
<h1 class="text-xs">KEMENTRIAN AGAMA RI</h1>
</div>
</div>
<div class="flex justify-center items-center gap-2">
<img src="" alt="LP3H YM Gorontalo" class="w-12 sm:w-24 elLogoLp3h">
<div class="flex flex-col justify-center items-start">
<h1 class="font-black text-4xl">LP3H</h1>
<h1 class="text-xs">YAYASAN MATAHARI</h1>
<h1 class="text-xs font-black">G O R O N T A L O</h1>
</div>
</div>
</div>
</div>
</section>
<section class="p-4 sm:p-24 flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-10 text-gray-700">
<img src="assets/Kantor BPJPH.png" alt="Kantor BPJPH" class="w-full sm:w-1/2 rounded-xl shadow-md" data-aos="flip-down" data-aos-easing="linear" data-aos-duration="500">
<div class="flex flex-col justify-start items-start w-full sm:w-1/2" data-aos="zoom-in" data-aos-easing="linear" data-aos-duration="500">
<h1 class="font-bold sm:text-2xl text-purple-800 mb-1 sm:mb-3">KEBIJAKAN HALAL</h1>
<p class="text-justify text-xs sm:text-base">Kami berkomitmen dan bertanggung jawab untuk menghasilkan produk halal secara konsisten dan berkesinambungan dengan melakukan tindakan :</p>
<ol class="list-decimal ms-5 text-justify text-xs sm:text-base">
<li class="ps-1">Mematuhi peraturan perundangan terkait jaminan produk halal;</li>
<li class="ps-1">Menggunakan bahan halal dan melaksanakan proses produk halal (PPH) sesuai dengan ketentuan yang berlaku;</li>
<li class="ps-1">Menyiapkan sumber daya manusia yang mendukung pelaksanaan PPH diperusahaan; serta,</li>
<li class="ps-1">Mensosialisasikan dan mengkomunikasikan kebijakan halal pada seluruh pihak terkait untuk memastikan semua personil menjaga integritas halal di unit usaha.</li>
</ol>
</div>
</section>
<section class="p-4 sm:p-24 flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-10 text-purple-300 bg-gradient-to-r from-purple-900 to-purple-600 shadow-md">
<div class="flex flex-col justify-start items-start w-full sm:w-1/2 order-2 sm:order-1 data-aos="zoom-in" data-aos-easing="linear" data-aos-duration="500">
<h1 class="font-bold sm:text-2xl text-white mb-1 sm:mb-3">PRODUK WAJIB SERTIFIKAT HALAL</h1>
<p class="text-justify text-xs sm:text-base">Berdasarkan Undang-Undang Nomor 33 Tahun 2014 beserta turunannya, ada tiga kelompok produk yang harus sudah bersertifikat halal, yaitu :</p>
<ol class="list-decimal ms-5 text-justify text-xs sm:text-base">
<li class="ps-1">Produk makanan dan minuman</li>
<li class="ps-1">Bahan baku, bahan tambahan pangan, bahan penolong produk (makanan dan minuman)</li>
<li class="ps-1">Produk hasil sembelihan (jasa penyembelihan)</li>
</ol>
<p class="text-justify text-xs sm:text-base mt-1 sm:mt-3">Untuk produk yang belum bersertifikat halal dan sudah beredar di masyarakat, akan ada sanksi berupa :</p>
<ol class="list-disc ms-5 text-justify text-xs sm:text-base">
<li class="ps-1">Peringatan tertulis</li>
<li class="ps-1">Denda administratif</li>
<li class="ps-1">Penarikan produk dari peredaran</li>
</ol>
</div>
<img src="assets/Produk Halal.jpg" alt="Produk Halal" class="w-full sm:w-1/2 rounded-xl shadow-md order-1 sm:order-2" data-aos="flip-down" data-aos-easing="linear" data-aos-duration="500">
</section>
<section class="p-4 sm:p-24 flex flex-col justify-center items-center text-gray-700">
<span class="text-base sm:text-xl font-black text-purple-600">Bagi Pelaku Usaha Mikro dan Kecil</span>
<span class="text-lg sm:text-3xl font-medium text-purple-800">Penahapan Kewajiban Bersertifikat Halal</span>
<span class="mb-4 text-sm sm:text-base text-center">Untuk produk makanan, minuman, hasil sembelihan dan jasa penyembelihan</span>
<span class="text-xs px-2 py-1 rounded-r-full rounded-l-full bg-purple-600 text-white">Mulai Tanggal</span>
<span class="text-lg font-bold text-purple-800 mb-3">17 Oktober 2019</span>
<span class="text-xs px-2 py-1 rounded-r-full rounded-l-full bg-purple-600 text-white">Sampai Tanggal</span>
<span class="text-lg font-bold text-purple-800 mb-4">17 Oktober 2026</span>
<span class="text-xs italic text-center">(Sumber : Pasal 160 PP No. 42 Tahun 2024 tentang Penyelenggaraan Bidang Jaminan Produk Halal)</span>
</section>
<section class="px-4 sm:px-24 py-4 flex justify-center items-center gap-10 text-purple-300 bg-gradient-to-l from-green-500 to-orange-500 shadow-md">
<span onclick="window.open('https://s.id/RuslanSamuel-P3H')" class="text-white hover:underline cursor-pointer sm:text-base text-xs">Hubungi sekarang untuk pendampingan proses produk halal</span>
</section>
<section class="px-4 sm:px-24 py-4 sm:py-10 flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-10 text-purple-300 bg-gradient-to-l from-purple-900 to-purple-600 shadow-md">
<div class="w-full sm:w-1/3 flex flex-col justify-center items-start order-1">
<a href="#beranda" class="flex flex-col justify-center items-start mb-4">
<h1 class="text-2xl font-bold text-white uppercase elNama"></h1>
<h2 class="text-white elProfesi"></h2>
</a>
<div class="flex flex-col justify-center items-start gap-1 text-xs">
<span class="cursor-pointer flex gap-1 justify-start items-start text-white hover:underline elAlamat"></span>
<span class="cursor-pointer flex gap-1 justify-start items-start text-white hover:underline elWhatsapp"></span>
<span class="cursor-pointer flex gap-1 justify-start items-start text-white hover:underline elEmail"></span>
<span class="cursor-pointer flex gap-1 justify-start items-start text-white hover:underline elWebsite"></span>
</div>
</div>
<div class="w-full sm:w-1/3 mx-auto flex justify-around sm:justify-center items-center gap-6 order-3 sm:order-2">
<img src="" alt="Halal Indonesia" class="h-12 sm:h-28 elLogoHalalPutih">
<img src="" alt="BPJPH" class="h-12 sm:h-28 elLogoBpjph">
<img src="" alt="LP3H YM Gorontalo" class="h-12 sm:h-28 elLogoLp3h">
</div>
<div class="w-full sm:w-1/3 h-full flex justify-center items-center order-2 sm:order-3">
<iframe src="" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="w-full aspect-video rounded-xl shadow-md elMaps"></iframe>
</div>
</section>
<!-- SCRIPT START -->
<!-- <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> -->
<script src="script.js"></script>
<script>
// AOS.init();
</script>
<!-- SCRIPT END -->
</body>
</html>