{"id":7372,"date":"2025-05-30T08:57:32","date_gmt":"2025-05-30T08:57:32","guid":{"rendered":"https:\/\/lpp-hidayatullah.id\/?page_id=7372"},"modified":"2025-05-30T09:30:32","modified_gmt":"2025-05-30T09:30:32","slug":"ramadhan","status":"publish","type":"page","link":"https:\/\/lpp-hidayatullah.id\/?page_id=7372","title":{"rendered":"Ramadhan"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Profil Kreatif Saya<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<style>\nbody {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    margin: 0;\n    padding: 0;\n    background-color: #f7f7f7;\n    color: #333;\n    line-height: 1.6;\n}\n\n.container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 20px;\n}\n\n\/* Header *\/\nheader {\n    background-color: #fff;\n    color: #333;\n    padding: 1.5em 0;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n    position: fixed;\n    width: 100%;\n    z-index: 100;\n}\n\nheader .container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.logo {\n    font-size: 1.5em;\n    font-weight: bold;\n    color: #007bff;\n}\n\nnav ul.menu {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display: flex;\n}\n\nnav ul.menu li {\n    margin-left: 25px;\n}\n\nnav ul.menu li a {\n    color: #333;\n    text-decoration: none;\n    transition: color 0.3s ease;\n}\n\nnav ul.menu li a:hover {\n    color: #007bff;\n}\n\n.hamburger {\n    display: none;\n    flex-direction: column;\n    cursor: pointer;\n}\n\n.hamburger span {\n    height: 3px;\n    width: 25px;\n    background-color: #333;\n    margin-bottom: 4px;\n    transition: 0.4s;\n}\n\n\/* Hero Section *\/\n.hero {\n    background-color: #e9ecef;\n    padding: 120px 0;\n}\n\n.hero .container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.hero-content {\n    max-width: 50%;\n}\n\n.hero h1 {\n    font-size: 3em;\n    color: #333;\n    margin-bottom: 15px;\n}\n\n.hero p {\n    font-size: 1.2em;\n    color: #555;\n    margin-bottom: 30px;\n}\n\n.hero-image {\n    max-width: 40%;\n}\n\n.hero-image img {\n    width: 100%;\n    height: auto;\n    display: block;\n}\n\n.button {\n    display: inline-block;\n    padding: 12px 25px;\n    border-radius: 5px;\n    text-decoration: none;\n    font-weight: bold;\n    transition: background-color 0.3s ease;\n}\n\n.button.primary {\n    background-color: #007bff;\n    color: #fff;\n}\n\n.button.secondary {\n    background-color: transparent;\n    color: #007bff;\n    border: 2px solid #007bff;\n}\n\n.button.primary:hover {\n    background-color: #0056b3;\n}\n\n.button.secondary:hover {\n    background-color: #e9ecef;\n    color: #0056b3;\n    border-color: #0056b3;\n}\n\n\/* Section Title *\/\n.section-title {\n    text-align: center;\n    margin-bottom: 50px;\n}\n\n.section-title h2 {\n    font-size: 2.5em;\n    color: #333;\n    margin-bottom: 10px;\n}\n\n.section-title .underline {\n    width: 80px;\n    height: 3px;\n    background-color: #007bff;\n    margin: 0 auto;\n}\n\n\/* About Section *\/\n.about {\n    padding: 80px 0;\n    background-color: #fff;\n}\n\n.about-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.about-image {\n    max-width: 45%;\n}\n\n.about-image img {\n    width: 100%;\n    height: auto;\n    border-radius: 5px;\n}\n\n.about-text {\n    max-width: 50%;\n}\n\n.about-text p {\n    margin-bottom: 15px;\n    color: #555;\n}\n\n\/* Skills Section *\/\n.skills {\n    padding: 80px 0;\n    background-color: #f7f7f7;\n}\n\n.skills-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 30px;\n    margin-top: 30px;\n}\n\n.skill-item {\n    background-color: #fff;\n    padding: 30px;\n    border-radius: 5px;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n    text-align: center;\n}\n\n.skill-item img {\n    max-width: 80px;\n    height: auto;\n    margin-bottom: 15px;\n}\n\n.skill-item h3 {\n    margin-top: 0;\n    color: #333;\n    margin-bottom: 10px;\n}\n\n.skill-item p {\n    color: #555;\n}\n\n\/* Portfolio Section *\/\n.portfolio {\n    padding: 80px 0;\n    background-color: #fff;\n}\n\n.portfolio-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n    gap: 20px;\n    margin-top: 30px;\n}\n\n.portfolio-item {\n    position: relative;\n    overflow: hidden;\n    border-radius: 5px;\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n.portfolio-item img {\n    width: 100%;\n    height: auto;\n    display: block;\n    transition: transform 0.3s ease;\n}\n\n.portfolio-item .overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 123, 255, 0.9);\n    color: #fff;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.portfolio-item:hover img {\n    transform: scale(1.05);\n}\n\n.portfolio-item:hover .overlay {\n    opacity: 1;\n}\n\n.portfolio-item .overlay h3 {\n    font-size: 1.5em;\n    margin-bottom: 10px;\n}\n\n.portfolio-item .overlay p {\n    text-align: center;\n    padding: 0 20px;\n    margin-bottom: 20px;\n}\n\n.portfolio-item .overlay a {\n    background-color: #fff;\n    color: #007bff;\n    padding: 10px 20px;\n    border-radius: 5px;\n    text-decoration: none;\n    font-weight: bold;\n}\n\n.portfolio-item .overlay a:hover {\n    background-color: #e9ecef;\n    color: #0056b3;\n}\n\n\/* Contact Section *\/\n.contact {\n    padding: 80px 0;\n    background-color: #f7f7f7;\n}\n\n.contact-wrapper {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n    gap: 30px;\n    margin-top: 30px;\n}\n\n.contact-form {\n    background-color: #fff;\n    padding: 30px;\n    border-radius: 5px;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.contact-form h3 {\n    font-size: 1.8em;\n    color: #333;\n    margin-bottom: 20px;\n}\n\n.form-group {\n    margin-bottom: 20px;\n}\n\n.form-group label {\n    display: block;\n    margin-bottom: 5px;\n    font-weight: bold;\n    color: #333;\n}\n\n.form-group input[type=\"text\"],\n.form-group input[type=\"email\"],\n.form-group textarea {\n    width: 100%;\n    padding: 12px;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    box-sizing: border-box;\n    font-size: 1em;\n}\n\n.form-group textarea {\n    resize: vertical;\n}\n\n.contact-info {\n    background\n<\/style>\n<\/head>\n<body>\n    <header>\n        <div class=\"container\">\n            <div class=\"logo\">RIZKY RAMADHAN<\/div>\n            <nav>\n                <ul class=\"menu\">\n                    <li><a href=\"#beranda\">Beranda<\/a><\/li>\n                    <li><a href=\"#tentang-saya\">Tentang Saya<\/a><\/li>\n                    <li><a href=\"#keahlian\">Hobi<\/a><\/li>\n                    <li><a href=\"#portofolio\">Proyek<\/a><\/li>\n                    <li><a href=\"#kontak\">Kontak<\/a><\/li>\n                <\/ul>\n                <div class=\"hamburger\">\n                    <span><\/span>\n                    <span><\/span>\n                    <span><\/span>\n                <\/div>\n            <\/nav>\n        <\/div>\n    <\/header>\n\n    <main>\n        <section id=\"beranda\" class=\"hero\">\n            <div class=\"container\">\n                <div class=\"hero-content\">\n                    <h1>Hai, Saya RIZKY RAMADHAN<\/h1>\n                    <p>Seorang Pelajar yang sangat senang mendalami ilmu programing dan itu adalah keahlian saya.<\/p>\n                    <a href=\"#portofolio\" class=\"button primary\">Lihat Portofolio Saya<\/a>\n                    <a href=\"#kontak\" class=\"button secondary\">Hubungi Saya<\/a>\n                <\/div>\n                <div class=\"hero-image\">\n                    <img decoding=\"async\" src=\"https:\/\/lpp-hidayatullah.id\/wp-content\/uploads\/2025\/05\/IMG_20250503_114509_720-scaled.jpg?attachment_id=7377\" alt=\"Ilustrasi Hero\">\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"tentang-saya\" class=\"about\">\n            <div class=\"container\">\n                <div class=\"section-title\">\n                    <h2>Tentang Saya<\/h2>\n                    <div class=\"underline\"><\/div>\n                <\/div>\n                <div class=\"about-content\">\n                    <div class=\"about-image\">\n                        <img decoding=\"async\" src=\"https:\/\/lpp-hidayatullah.id\/wp-content\/uploads\/2025\/05\/IMG_20250503_114509_720-scaled.jpg?attachment_id=7377\" alt=\"Ilustrasi Tentang Saya\">\n                    <\/div>\n                    <div class=\"about-text\">\n                        <p>\ud83d\udcbb Programmer | \ud83d\udcf7 Fotografer &#038; Editor | \ufffd Siswa SM Hidayatullah Gunung Tembak.<\/p>\n                        <p>Pecinta kode yang berbicara melalui logika, dan kamera yang bercerita melalui lensa.\nSelalu mencari tantangan baru, baik di dunia programming maupun di balik layar editing.\nTak hanya otak yang dilatih, tubuh juga harus kuat!.<\/p>\n                        <p>\ud83d\udd27 Sedang Dipelajari: Brackets | Photo Editing | Videografi<br>\n\ud83c\udfaf Fokus Saat Ini: Membuat website programming &#038; editing video<br>\n\ud83d\udcf8 Gear Favorite: Leica SL dan Fujifilm X T100<br>\n\n<br>&#8220;Life is about solving problems\u2014whether it\u2019s debugging code or finding the perfect angle.&#8221;.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"keahlian\" class=\"skills\">\n            <div class=\"container\">\n                <div class=\"section-title\">\n                    <h2>Hobi<\/h2>\n                    <div class=\"underline\"><\/div>\n                <\/div>\n                <div class=\"skills-grid\">\n                    <div class=\"skill-item\">\n                        <img decoding=\"async\" src=\"https:\/\/lpp-hidayatullah.id\/wp-content\/uploads\/2025\/05\/images-1.png\" alt=\"Keahlian 1\">\n                        <h3>PROGRAMING<\/h3>\n                        <p>&#8220;Programming adalah seni mengubah logika menjadi solusi digital&#8221; \ud83d\udcbb\u26a1.<\/p>\n                    <\/div>\n                    <div class=\"skill-item\">\n                        <img decoding=\"async\" src=\"https:\/\/lpp-hidayatullah.id\/wp-content\/uploads\/2025\/05\/259-2592784_video-editing-logo-transparent-hd-png-download.png\" alt=\"Keahlian 2\">\n                        <h3>EDITING<\/h3>\n                        <p>&#8220;Editing adalah programing tanpa menggunakan code &#8211; kami memotong clip, menambahkan fitur, dan render solusi dalam baris filter.&#8221; \u2702\ufe0f\u2328\ufe0f<\/p>\n                    <\/div>\n                    <div class=\"skill-item\">\n                        <img decoding=\"async\" src=\"https:\/\/lpp-hidayatullah.id\/wp-content\/uploads\/2025\/05\/pngtree-camera-icon-vector-illustration-in-line-style-for-any-purpose-png-image_989668.jpg\" alt=\"Keahlian 3\">\n                        <h3>FOTOGRAFER<\/h3>\n                        <p>&#8220;Fotografi adalah seni mengubah detik biasa menjadi kenangan abadi.&#8221; \ud83d\udcf7\u2728<\/p> <\/div>\n                    <div class=\"skill-item\">\n                        <img decoding=\"async\" src=\"https:\/\/lpp-hidayatullah.id\/wp-content\/uploads\/2025\/05\/download-2.png\" alt=\"Keahlian 4\">\n                        <h3>BERORGANISASI<\/h3>\n                        <p>&#8220;Organisasi adalah studio kolaborasi: setiap orang membawa warna, bersama-sama kita melukis hasil terbaik.&#8221; \ud83c\udfa8\u2728<\/p>\n                    <\/div>\n                    <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"portofolio\" class=\"portfolio\">\n            <div class=\"container\">\n                <div class=\"section-title\">\n                    <h2>Proyek<\/h2>\n                    <div class=\"underline\"><\/div>\n                <\/div>\n                <div class=\"portfolio-grid\">\n                    <div class=\"portfolio-item\">\n                        <img decoding=\"async\" src=\"https:\/\/lpp-hidayatullah.id\/wp-content\/uploads\/2025\/05\/259-2592784_video-editing-logo-transparent-hd-png-download.png\" alt=\"Proyek 1\">\n                        <div class=\"overlay\">\n                            <h3>EDITING VIDEO<\/h3>\n                            <p>Mengedit video\/foto kegiatan pondok (halaqah, acara santri, dll.) agar lebih menarik dengan pemotongan klip, efek, teks, nasyid, dan peningkatan kualitas. Hasilnya untuk dokumentasi atau publikasi media sosial.<\/p>\n                            <a href=\"#\">Lihat Detail<\/a>\n                        <\/div>\n                    <\/div>\n                    <div class=\"portfolio-item\">\n                        <img decoding=\"async\" src=\"https:\/\/lpp-hidayatullah.id\/wp-content\/uploads\/2025\/05\/download-2.png\" alt=\"Proyek 2\">\n                        <div class=\"overlay\">\n                            <h3>Berorganisasi<\/h3>\n                            <p>Bertujuan mengelola dan menjalankan program kerja Pandu untuk meningkatkan kualitas siswa melalui kegiatan akademik, kreativitas, kepemimpinan, dan sosial.<\/p>\n                            <a href=\"#\">Lihat Detail<\/a>\n                        <\/div>\n                    <\/div>\n                    <div class=\"portfolio-item\">\n                        <img decoding=\"async\" src=\"https:\/\/lpp-hidayatullah.id\/wp-content\/uploads\/2025\/05\/images-1.png\" alt=\"Proyek 3\">\n                        <div class=\"overlay\">\n                            <h3>PROGRAMING<\/h3>\n                            <p>Pengembangan solusi digital (aplikasi, website, atau sistem) menggunakan bahasa pemrograman untuk memenuhi kebutuhan tertentu, seperti otomasi, analisis data, atau platform interaktif.<\/p>\n                            <a href=\"#\">Lihat Detail<\/a>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"kontak\" class=\"contact\">\n            <div class=\"container\">\n                <div class=\"section-title\">\n                    <h2>Kontak<\/h2>\n                    <div class=\"underline\"><\/div>\n                <\/div>\n                <div class=\"contact-wrapper\">\n                    <div class=\"contact-form\">\n                        <h3>Kirim Pesan<\/h3>\n                        <form action=\"#\" method=\"post\">\n                            <div class=\"form-group\">\n                                <label for=\"nama\">Nama:<\/label>\n                                <input type=\"text\" id=\"nama\" name=\"nama\" required>\n                            <\/div>\n                            <div class=\"form-group\">\n                                <label for=\"email\">Email:<\/label>\n                                <input type=\"email\" id=\"email\" name=\"email\" required>\n                            <\/div>\n                            <div class=\"form-group\">\n                                <label for=\"pesan\">Pesan:<\/label>\n                                <textarea id=\"pesan\" name=\"pesan\" rows=\"5\" required><\/textarea>\n                            <\/div>\n                            <button type=\"submit\" class=\"button primary\">Kirim<\/button>\n                        <\/form>\n                    <\/div>\n                    <div class=\"contact-info\">\n                        <h3>Info Kontak<\/h3>\n                        <p><i class=\"fas fa-envelope\"><\/i> smikun123@gmail.com<\/p>\n                        <p><i class=\"fas fa-phone\"><\/i> +62 851 7205 4635<\/p>\n                        <p><a href=\"https:\/\/www.instagram.com\/raafka34\/\"><i class=\"fab fa-linkedin\"><\/i>IG: @raafka34<\/a><\/p>\n                      \n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n\n    <footer>\n        <div class=\"container\">\n            <p>&copy;RIZKY RAMADHAN KELAS 2 MA\/SMA.<\/p>\n        <\/div>\n    <\/footer>\n\n    <script src=\"script.js\"><\/script>\n    <script src=\"https:\/\/kit.fontawesome.com\/your-fontawesome-kit.js\" crossorigin=\"anonymous\"><\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Profil Kreatif Saya RIZKY RAMADHAN Beranda Tentang Saya Hobi Proyek Kontak Hai, Saya RIZKY RAMADHAN Seorang Pelajar yang sangat senang [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7372","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lpp-hidayatullah.id\/index.php?rest_route=\/wp\/v2\/pages\/7372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lpp-hidayatullah.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lpp-hidayatullah.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lpp-hidayatullah.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lpp-hidayatullah.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7372"}],"version-history":[{"count":19,"href":"https:\/\/lpp-hidayatullah.id\/index.php?rest_route=\/wp\/v2\/pages\/7372\/revisions"}],"predecessor-version":[{"id":7401,"href":"https:\/\/lpp-hidayatullah.id\/index.php?rest_route=\/wp\/v2\/pages\/7372\/revisions\/7401"}],"wp:attachment":[{"href":"https:\/\/lpp-hidayatullah.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}