-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprofil.html
119 lines (118 loc) · 9.9 KB
/
profil.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
<!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/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- <link href="https://unpkg.com/aos@2.3.1/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-center 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 text-gray-700 gap-4 sm:gap-20">
<img src="assets/Logo Yayasan Matahari.png" alt="Yayasan Matahari" class="w-20 sm:w-56">
<div class="flex flex-col justify-center items-center ">
<h1 class="font-bold text-sm sm:text-lg text-purple-800">Lembaga Pendamping Proses Produk Halal</h1>
<h1 class="font-black text-3xl sm:text-4xl uppercase"><span class="text-green-600 me-2">Yayasan</span><span class="text-orange-600">Matahari</span></h1>
<h2 class="text-purple-900 text-sm sm:text-base">No. Registrasi : 2205000003</h2>
<div class="flex justify-center items-center gap-2 my-3 sm:my-5">
<h2 class="px-2 bg-green-600 text-white uppercase font-bold rounded-r-full rounded-l-full">Pujo Basuki</h2>
<h2 class="px-2 bg-orange-600 text-white uppercase font-bold rounded-r-full rounded-l-full">081360054669</h2>
</div>
<p class="text-purple-800 font-light text-center text-xs sm:text-sm italic">Jln. Rawa Sakti Timur Lrg. VII, GP. Jeulingke</p>
<p class="text-purple-800 font-light text-center text-xs sm:text-sm italic">Banda Aceh Syiah Kuala, Kota Banda Aceh, Aceh</p>
</div>
</section>
<section class="px-4 sm:px-24 py-4 sm:py-12 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">
<img src="assets/Sertifikat P3H BPJPH.jpg" alt="Sertifikat P3H BPJPH" class="w-full sm:w-1/3 rounded-xl overflow-hidden shadow-lg hover:scale-110 duration-300 order-2 sm:order-1" onclick="window.open('assets/Sertifikat P3H BPJPH.pdf')" data-aos="flip-down" data-aos-easing="linear" data-aos-duration="500">
<img src="assets/P1 2.png" alt="Publikasi" class="w-full sm:w-1/3 rounded-xl shadow-lg order-1 sm:order-2" data-aos="flip-down" data-aos-easing="linear" data-aos-duration="500">
<img src="assets/Sertifikat P3H Great Edu.jpg" alt="Sertifikat P3H Great Edu" class="w-full sm:w-1/3 rounded-xl overflow-hidden shadow-lg hover:scale-110 duration-300 order-3" onclick="window.open('assets/Sertifikat P3H Great Edu.pdf')" data-aos="flip-down" data-aos-easing="linear" data-aos-duration="500">
</section>
<section class="px-0 sm:px-24 py-0 sm:py-12 flex flex-wrap sm:flex-nowrap justify-center items-center gap-0 sm:gap-10 text-gray-700">
<img src="assets/WhatsApp Image 2024-10-29 at 22.24.24.png" alt="Poster" class="p-4 sm:p-0 w-1/2 sm:w-1/4 sm:rounded-xl sm:shadow-lg hover:scale-110 duration-300 cursor-pointer" data-aos="flip-down" data-aos-easing="linear" data-aos-duration="500" onclick="window.open('assets/WhatsApp Image 2024-10-29 at 22.24.24.png')">
<img src="assets/WhatsApp Image 2024-10-29 at 22.24.25.png" alt="Poster" class="p-4 sm:p-0 w-1/2 sm:w-1/4 sm:rounded-xl sm:shadow-lg hover:scale-110 duration-300 cursor-pointer" data-aos="flip-down" data-aos-easing="linear" data-aos-duration="500" onclick="window.open('assets/WhatsApp Image 2024-10-29 at 22.24.25.png')">
<img src="assets/WhatsApp Image 2024-10-29 at 22.24.26.png" alt="Poster" class="p-4 sm:p-0 w-1/2 sm:w-1/4 sm:rounded-xl sm:shadow-lg hover:scale-110 duration-300 cursor-pointer" data-aos="flip-down" data-aos-easing="linear" data-aos-duration="500" onclick="window.open('assets/WhatsApp Image 2024-10-29 at 22.24.26.png')">
<img src="assets/WhatsApp Image 2024-10-31 at 01.21.20.png" alt="Poster" class="p-4 sm:p-0 w-1/2 sm:w-1/4 sm:rounded-xl sm:shadow-lg hover:scale-110 duration-300 cursor-pointer" data-aos="flip-down" data-aos-easing="linear" data-aos-duration="500" onclick="window.open('assets/WhatsApp Image 2024-10-31 at 01.21.20.png')">
</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/aos@2.3.1/dist/aos.js"></script> -->
<script src="script.js"></script>
<script>
// AOS.init();
</script>
<!-- SCRIPT END -->
</body>
</html>