Web Development Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/web-development/ Tue, 31 Mar 2026 13:52:40 +0000 id hourly 1 https://wordpress.org/?v=7.0 https://farhanhidayat.com/wp-content/uploads/2024/11/cropped-Favicon-Farhanhidayat-32x32.png Web Development Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/web-development/ 32 32 10 Navbar HTML CSS Simple & Keren (Copy Paste, Anti Ribet) https://farhanhidayat.com/navbar-html-css-simple/ https://farhanhidayat.com/navbar-html-css-simple/#respond Tue, 31 Mar 2026 13:52:40 +0000 https://farhanhidayat.com/?p=2335 Lagi cari navbar HTML CSS simple yang bisa langsung dipakai tanpa ribet? Tenang, kamu nggak sendirian. Banyak yang stuck di bagian ini waktu bikin website. Nah, di artikel ini kamu bakal nemuin 10 contoh navbar keren yang tinggal copy paste aja. Jadi kamu nggak perlu pusing ngoding dari nol, cukup pakai, edit dikit, dan langsung […]

Artikel 10 Navbar HTML CSS Simple & Keren (Copy Paste, Anti Ribet) pertama kali tampil pada Farhanhidayat.com.

]]> Lagi cari navbar HTML CSS simple yang bisa langsung dipakai tanpa ribet? Tenang, kamu nggak sendirian. Banyak yang stuck di bagian ini waktu bikin website.

Nah, di artikel ini kamu bakal nemuin 10 contoh navbar keren yang tinggal copy paste aja. Jadi kamu nggak perlu pusing ngoding dari nol, cukup pakai, edit dikit, dan langsung jadi 😄

Kenapa Navbar Itu Penting di Website?

Sebelum masuk ke contoh, kita bahas dikit biar kamu makin paham.

Navbar itu ibarat “jalan utama” di website kamu. Kalau navigasinya jelas, pengunjung bakal lebih nyaman jelajah isi website. Sebaliknya, kalau navbar berantakan, orang bisa langsung kabur.

Selain itu, navbar juga bikin tampilan website jadi lebih profesional. Bahkan, desain sederhana pun bisa keliatan mahal kalau navbar-nya rapi.

Ciri Navbar HTML CSS Simple yang Bagus

Biar nggak asal pilih, ini beberapa ciri navbar yang layak kamu pakai:

  • Strukturnya clean dan mudah dibaca
  • Menu tidak terlalu banyak
  • Warna enak dilihat dan kontras
  • Ringan dan cepat di-load
  • Mudah diubah sesuai kebutuhan

Intinya, simple tapi tetap enak dipakai.

10 Navbar HTML CSS Simple & Keren (Siap Copy Paste)

 

1. Simple Clean Navbar

Navbar ini paling basic, tapi justru paling sering dipakai.

  • Cocok untuk: portfolio, landing page
  • Kelebihan: ringan, rapi, nggak ribet

👉 Tinggal copy paste, langsung jadi navbar standar yang aman dipakai di mana aja.

Kode HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Navbar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <nav class="navbar">
    <div class="logo">DayatDev</div>
    <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

</body>
</html>

Kode CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background: #f5f5f5;
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 8%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Logo */
.logo {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

/* Menu */
.nav-links {
  list-style: none;
  display: flex;
  gap: 25px;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  transition: 0.3s;
}

/* Hover effect */
.nav-links a:hover {
  color: #6a6ff5;
}

Penjelasan Singkat

Navbar ini pakai flexbox, jadi otomatis rapi:

  • space-between → logo kiri, menu kanan
  • gap → jarak antar menu
  • hover → kasih efek interaktif

Simple, tapi udah cukup buat website profesional.

Ganti warna utama

.nav-links a:hover {
  color: #ff6600;
}

Ganti background navbar

.navbar {
  background: #6a6ff5;
}

.nav-links a {
  color: #fff;
}

Tambahin garis bawah saat hover

.nav-links a:hover {
  border-bottom: 2px solid #6a6ff5;
}

2. Navbar dengan CTA Button

Kalau kamu pengen navbar yang lebih “niat”, ini pilihan bagus.

  • Ada tombol seperti “Login” atau “Kontak”
  • Bikin tampilan lebih profesional

Biasanya dipakai di website bisnis atau jualan.

HTML

<nav class="navbar">
  <div class="logo">DayatDev</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Pricing</a></li>
  </ul>
  <a href="#" class="btn">Get Started</a>
</nav>

CSS

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 8%;
  background: #fff;
}

.btn {
  background: #6a6ff5;
  color: #fff;
  padding: 8px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s;
}

.btn:hover {
  background: #4c50d3;
}

👉 Cocok buat landing page atau jualan.

3. Responsive Navbar (Hamburger Menu)

Sekarang hampir semua website butuh versi mobile.

  • Desktop: menu biasa
  • Mobile: berubah jadi hamburger

Jadi, website kamu tetap nyaman dibuka di HP.

HTML

<nav class="navbar">
  <div class="logo">DayatDev</div>
  <div class="menu-toggle">☰</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

.menu-toggle {
  display: none;
  font-size: 22px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
  }

  .nav-links.active {
    display: flex;
  }
}

JS

<script>
const toggle = document.querySelector(".menu-toggle");
const nav = document.querySelector(".nav-links");

toggle.onclick = () => {
  nav.classList.toggle("active");
};
</script>

👉 Wajib kalau target user mobile.

4. Center Logo Navbar

Berbeda dari yang lain, logo ada di tengah.

  • Menu di kiri dan kanan
  • Cocok untuk branding

Hasilnya keliatan lebih unik dan beda.

HTML

<nav class="navbar">
  <ul class="left">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>

  <div class="logo">DayatDev</div>

  <ul class="right">
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left, .right {
  display: flex;
  gap: 20px;
  list-style: none;
}

👉 Cocok buat branding biar beda.

5. Sticky Navbar (Nempel Saat Scroll)

Navbar ini tetap di atas walaupun halaman di-scroll.

  • User nggak perlu scroll ke atas lagi
  • Navigasi jadi lebih cepat

Selain itu, UX juga jadi lebih enak.

CSS

.navbar {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1000;
}

👉 Navbar tetap di atas saat scroll.

6. Transparent Navbar

Navbar ini menyatu dengan background.

  • Awalnya transparan
  • Cocok untuk hero section

Biasanya dipakai di landing page modern.

CSS

.navbar {
  position: absolute;
  width: 100%;
  background: transparent;
  color: #fff;
}

.nav-links a {
  color: #fff;
}

👉 Cocok untuk hero section.

7. Navbar Transparan → Solid Saat Scroll

Ini versi upgrade dari transparent navbar.

  • Awal transparan
  • Saat scroll berubah warna

Efeknya simpel, tapi keliatan keren banget.

JS

<script>
window.addEventListener("scroll", function() {
  const nav = document.querySelector(".navbar");
  nav.classList.toggle("scrolled", window.scrollY > 50);
});
</script>

CSS

.navbar.scrolled {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

👉 Efek simpel tapi premium.

8. Dropdown Menu Navbar

Kalau menu kamu banyak, ini wajib dipakai.

  • Ada submenu
  • Navigasi jadi lebih rapi

Jadi, user nggak bingung walaupun halaman banyak.

HTML

<li class="dropdown">
  <a href="#">Services</a>
  <ul class="dropdown-menu">
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Development</a></li>
  </ul>
</li>

CSS

.dropdown-menu {
  display: none;
  position: absolute;
  background: #fff;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

👉 Solusi kalau menu banyak.

9. Glassmorphism Navbar

Navbar dengan efek blur seperti kaca.

  • Tampilan modern
  • Cocok untuk UI kekinian

Walaupun simple, kesannya premium.

CSS

.navbar {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  padding: 15px;
  border-radius: 10px;
}

👉 UI modern banget.

10. Minimal Icon Navbar

Navbar ini lebih ringkas.

  • Pakai icon + teks
  • Cocok untuk dashboard

Selain itu, tampilannya juga lebih clean.

HTML

<nav class="navbar">
  <a href="#">🏠 Home</a>
  <a href="#">👤 About</a>
  <a href="#">📦 Services</a>
  <a href="#">📞 Contact</a>
</nav>

CSS

.navbar {
  display: flex;
  gap: 20px;
}

.navbar a {
  text-decoration: none;
  color: #333;
}

👉 Cocok buat dashboard / admin.

Kesalahan yang Sering Terjadi Saat Membuat Navbar

Walaupun terlihat simpel, tapi faktanya masih banyak yang salah saat bikin navbar.

  • Terlalu banyak menu → bikin bingung
  • Warna kurang kontras → susah dibaca
  • Tidak responsive → jelek di HP
  • Desain terlalu ramai → berat loading

Makanya, supaya nggak bikin bingung, lebih baik pilih navbar yang simple tapi tetap jelas

Tips Biar Navbar Kamu Lebih Maksimal

Biar hasilnya makin keren, kalau mau lebih maksimal, coba lakukan beberapa hal berikut:

  • Gunakan warna sesuai branding
  • Jaga jarak antar menu biar rapi
  • Tambahkan efek hover sederhana
  • Jangan terlalu banyak animasi
  • Tes di laptop dan HP

Selain itu, supaya tampilannya nggak flat, kamu bisa menambahkan animasi biar terasa lebih hidup.

Cara Menggunakan Kode Navbar Ini (Biar Langsung Jalan)

Tenang aja, supaya lebih mudah dipahami, sebenarnya caranya gampang banget, jadi kamu bisa mulai dari langkah berikut:

  1. Copy kode HTML & CSS
  2. Simpan dalam file .html
  3. Buka di browser
  4. Edit teks, warna, atau menu sesuai kebutuhan

Dalam beberapa menit aja, kamu pun bisa langsung punya navbar yang siap dipakai.

Kesimpulan

Sebenarnya, bikin navbar HTML CSS simple itu nggak sesulit yang dibayangin. Jadi, dengan contoh yang tepat, kamu pun bisa langsung pakai tanpa ribet. Nah, sekarang kamu tinggal pilih style yang paling cocok, lalu cukup copy paste dan sedikit custom, sehingga akhirnya navbar keren untuk website kamu bisa langsung dipakai.

FAQ

1. Apakah navbar ini bisa dipakai untuk semua website?

Iya, semua contoh di sini fleksibel dan bisa dipakai untuk berbagai jenis website.

2. Harus jago coding dulu nggak?

Nggak perlu. Kamu cukup copy paste dan ubah dikit sesuai kebutuhan.

3. Gimana cara bikin navbar jadi responsive?

Kamu bisa pakai versi hamburger menu atau tambahkan media query di CSS.

Artikel 10 Navbar HTML CSS Simple & Keren (Copy Paste, Anti Ribet) pertama kali tampil pada Farhanhidayat.com.

]]> https://farhanhidayat.com/navbar-html-css-simple/feed/ 0 Cara Membuat Web Gratis dari Google dengan Bantuan Stitch AI https://farhanhidayat.com/cara-membuat-web-gratis-dari-google-dengan-bantuan-stitch-ai/ https://farhanhidayat.com/cara-membuat-web-gratis-dari-google-dengan-bantuan-stitch-ai/#respond Wed, 20 Aug 2025 11:08:22 +0000 https://farhanhidayat.com/?p=1785 Punya website sekarang bukan lagi hal yang ribet atau butuh modal besar. Justru sekarang siapa saja bisa bikin web gratis dari Google dengan bantuan teknologi AI seperti Stitch AI. Buat pemula, pelaku UMKM, atau bahkan yang sekadar ingin coba-coba, cara ini bisa jadi solusi cepat, mudah, dan pastinya hemat biaya. Yuk, kita bahas kenapa penting […]

Artikel Cara Membuat Web Gratis dari Google dengan Bantuan Stitch AI pertama kali tampil pada Farhanhidayat.com.

]]> Punya website sekarang bukan lagi hal yang ribet atau butuh modal besar. Justru sekarang siapa saja bisa bikin web gratis dari Google dengan bantuan teknologi AI seperti Stitch AI. Buat pemula, pelaku UMKM, atau bahkan yang sekadar ingin coba-coba, cara ini bisa jadi solusi cepat, mudah, dan pastinya hemat biaya.

Yuk, kita bahas kenapa penting punya website, apa itu Stitch AI, sampai langkah-langkah membuatnya!

Kenapa Membuat Web Gratis dari Google Itu Penting?

Banyak orang mikir bikin website itu mahal dan ribet. Padahal sekarang sudah banyak cara praktis, termasuk dari Google sendiri.

Solusi untuk Pemula dan UMKM

Website bisa jadi toko online yang buka 24 jam. UMKM jadi lebih mudah menjual produk atau jasa dan orang pun gampang menemukannya di internet.

Menghemat Biaya Awal Bisnis Online

Dengan adanya opsi web gratis dari Google, kamu bisa hemat ratusan ribu bahkan jutaan untuk biaya domain dan hosting di awal. Jadi modal bisa difokuskan ke hal lain, misalnya promosi.

Mudah Dikelola Tanpa Keahlian Teknis

Dulu orang harus belajar coding buat bikin web. Sekarang? Tinggal klik-klik, isi konten, dan website langsung jadi.

Apa Itu Stitch AI dan Bagaimana Bisa Membantu?

web gratis dari google

Nah, di sinilah Stitch AI masuk sebagai “asisten pintar” kamu.

Pengenalan Stitch AI

Stitch AI adalah AI website builder yang memanfaatkan kecerdasan buatan untuk membangun web otomatis. Cukup isi data, pilih template, dan Stitch AI akan menyiapkan desain web yang terlihat profesional.

Kelebihan Stitch AI Dibanding Builder Lain

  • Desain otomatis dan responsif (cocok buat HP & laptop).
  • Cepat dipakai, bahkan untuk orang awam.
  • Sudah punya fitur optimasi SEO dasar.

Integrasi dengan Layanan Google

Stitch AI terhubung mulus dengan akun Google. Kalau sudah punya Gmail, cukup connect, lalu publish website langsung di Google Sites atau pakai domain custom.

Langkah-Langkah Membuat Web Gratis dari Google dengan Stitch AI

Prosesnya gampang banget. Berikut langkah yang bisa kamu ikuti:

1. Membuka Akun Google dan Stitch AI

Pastikan kamu punya akun Google aktif. Lalu daftar ke Stitch AI, biasanya cukup login dengan Gmail.

2. Memilih Template dan Desain Otomatis

Pilih template yang sesuai kebutuhan: toko online, portfolio, atau landing page. AI akan bantu menyesuaikan desain.

3. Menambahkan Konten dan Gambar

Masukkan teks, foto produk, atau informasi bisnis. Jangan lupa pakai gambar yang ringan biar loading web tetap cepat.

4. Menghubungkan Domain Gratis dari Google

Google menyediakan opsi domain gratis via Google Sites. Kamu bisa langsung publish web dengan alamat bawaan.

5. Publikasi Website dalam Hitungan Menit

Kalau sudah puas, klik publish. Web kamu siap online dan bisa diakses siapa saja!

 

Tips Optimasi Website Agar Lebih SEO Friendly

Punya web gratis dari Google aja belum cukup. Biar makin mudah ditemukan, coba ikuti tips ini:

Gunakan Kata Kunci di Judul & Deskripsi

Misalnya pakai keyword “web gratis dari Google” di judul artikel atau halaman utama. Ini bikin website lebih mudah terindeks.

Optimasi Gambar & Kecepatan Loading

Pastikan ukuran gambar tidak terlalu besar. Website yang cepat loading lebih disukai Google.

Tambahkan Konten Berkualitas Secara Rutin

Bikin artikel, update produk, atau sekadar menulis tips di blog. Semakin banyak konten relevan, semakin bagus di mata mesin pencari.

Kelebihan dan Kekurangan Membuat Web Gratis dari Google dengan Stitch AI

Setiap tools pasti ada plus dan minusnya.

Kelebihan

  • Gratis dan praktis.
  • Nggak perlu skill coding.
  • Desain modern dan responsif.
  • Cocok untuk UMKM, portofolio, atau website pribadi.

Kekurangan

  • Fitur terbatas dibanding builder premium.
  • Domain custom biasanya berbayar.
  • Kurang fleksibel kalau ingin fitur khusus (misalnya toko online besar).

Kesimpulan

Membuat web gratis dari Google sekarang jauh lebih mudah berkat bantuan Stitch AI. Kamu nggak perlu jadi ahli IT atau keluar modal besar untuk mulai punya website sendiri.

Buat pemula, pelaku UMKM, atau siapa saja yang ingin hadir di dunia digital, cara ini bisa jadi langkah awal yang tepat. Tinggal login, isi data, pilih template, dan website langsung jadi.

Singkatnya: Stitch AI + Google = solusi cepat bikin website gratis, praktis, dan tetap terlihat profesional.

Artikel Cara Membuat Web Gratis dari Google dengan Bantuan Stitch AI pertama kali tampil pada Farhanhidayat.com.

]]> https://farhanhidayat.com/cara-membuat-web-gratis-dari-google-dengan-bantuan-stitch-ai/feed/ 0 Download Template HTML Gratis untuk Website Portfolio (Kode Lengkap) https://farhanhidayat.com/template-html-gratis-untuk-website-portfolio/ https://farhanhidayat.com/template-html-gratis-untuk-website-portfolio/#respond Mon, 10 Feb 2025 01:00:09 +0000 https://farhanhidayat.com/?p=1520 Di era digital, memiliki website portfolio yang menarik sangat penting bagi para freelancer, desainer, dan developer. Website ini berfungsi sebagai kartu nama digital yang menampilkan karya terbaik kepada calon klien atau perusahaan.Namun, membangun website dari nol sering kali memakan waktu dan tenaga. Oleh karena itu, menggunakan template HTML gratis bisa menjadi solusi terbaik. Artikel ini […]

Artikel Download Template HTML Gratis untuk Website Portfolio (Kode Lengkap) pertama kali tampil pada Farhanhidayat.com.

]]> Di era digital, memiliki website portfolio yang menarik sangat penting bagi para freelancer, desainer, dan developer. Website ini berfungsi sebagai kartu nama digital yang menampilkan karya terbaik kepada calon klien atau perusahaan.Namun, membangun website dari nol sering kali memakan waktu dan tenaga. Oleh karena itu, menggunakan template HTML gratis bisa menjadi solusi terbaik.

Artikel ini akan membagikan kode lengkap HTML, CSS, dan JavaScript agar Anda bisa langsung menggunakannya untuk membangun website portfolio yang profesional dan responsif.

Mengapa Memilih Template HTML Gratis untuk Website Portfolio?

Ada banyak keuntungan dalam menggunakan template HTML gratis dibandingkan membuatnya dari awal. Beberapa alasan utama meliputi:

  • Desain modern & responsif yang memastikan tampilan optimal di semua perangkat.
  • Mudah disesuaikan, sehingga Anda dapat mengubah warna, font, dan tata letak sesuai kebutuhan.
  • SEO friendly, memungkinkan website lebih mudah ditemukan di mesin pencari.
  • Kode ringan & cepat, sehingga halaman tidak memerlukan banyak waktu untuk dimuat.

Dengan berbagai keunggulan ini, tidak mengherankan jika banyak profesional lebih memilih menggunakan template HTML gratis untuk membangun website mereka.

 Demo & Fitur Template 

Kami telah menyiapkan kode sumber HTML siap pakai yang bisa Anda gunakan langsung! Berikut beberapa fitur utamanya:

  • Mode Gelap & Terang
  • Animasi Smooth
  • Bagian Portofolio Interaktif

Live preview tersedia. Lihat sekarang dan nikmati tampilannya!

Live Preview

Koding Website Portfolio Gratis

Berikut adalah kode lengkap untuk membuat website portfolio responsif menggunakan HTML, CSS, dan JavaScript.

1️⃣ Struktur HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
  rel="stylesheet"
/>

</head>
<body>
    <header>
        <a href="#" class="logo">
        <img src="img/logo.png" alt="Logo" class="logo-img">
    </a>
        <nav>       
            <a href="#home" class="nav-link">Home</a>
            <a href="#services">Services</a>
            <a href="#works">Works</a>
            <a href="#resume">Resume</a>
            <a href="#skills">Skills</a>
            <a href="#contact">Contact</a>
        </nav>

           <div class="right-section">
        <button class="theme-toggle">
            <i class="fas fa-moon"></i> <!-- Ikon bulan -->
        </button>
        <a href="#contact">
            <button class="hire-button">Hire Me!</button>
        </a>
        
    </div>

    </header>
  <main id="home">
    <div class="text-content">
        <p>Hai, Saya Farhan</p>
        <h1 class="gradient-text">Spesialis-Konten dan Artikel.</h1>
        <p class="description">
            Saya menciptakan konten yang menarik dan informatif untuk membantu bisnis dan individu menyampaikan pesan mereka secara efektif kepada audiens.
        </p>
       <div class="buttons">
    <button class="download-cv">
        Download CV <i class="fas fa-download"></i>
    </button>
    <a href="#" class="social-icon"><i class="fab fa-tiktok"></i></a>
    <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
    <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
    <a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>

    
</div>


    </div>
    <div class="image-container">
        <img src="img/Gambar1.jpeg" alt="Gerold" class="hover-image">
    </div>

</main>


<!-------------------------------- services-section -------------------------------------->
<section id="services">
    <div class="container">
        <h2 class="gradient-text">Keahlian Menulis Saya</h2>
        <p class="section-description">
            Saya mengubah ide Anda menjadi konten yang menginspirasi dan relevan untuk menjangkau audiens yang lebih luas.
        </p>

        <div class="service">
            <div class="service-number">01</div>
            <div class="service-content">
                <h3 class="service-title">Penulisan Artikel</h3>
                <p class="service-description">
                    Buat artikel berkualitas tinggi dengan riset mendalam yang mampu menarik perhatian pembaca dan meningkatkan visibilitas online Anda.
                </p>
            </div>
            <div class="service-icon">
                <i class="fas fa-arrow-right"></i>
            </div>
        </div>

        <div class="service">
            <div class="service-number">02</div>
            <div class="service-content">
                <h3 class="service-title">Pembuatan Konten SEO</h3>
                <p class="service-description">
                    Optimalkan konten Anda dengan strategi SEO untuk meningkatkan peringkat di mesin pencari dan menarik lebih banyak traffic organik.
                </p>
            </div>
            <div class="service-icon">
                <i class="fas fa-arrow-down"></i>
            </div>
        </div>

        <div class="service">
            <div class="service-number">03</div>
            <div class="service-content">
                <h3 class="service-title">Manajemen Blog</h3>
                <p class="service-description">
                    Kelola blog Anda dengan artikel yang konsisten, menarik, dan relevan untuk mempertahankan loyalitas pembaca.
                </p>
            </div>
            <div class="service-icon">
                <i class="fas fa-arrow-down"></i>
            </div>
        </div>

        <div class="service">
            <div class="service-number">04</div>
            <div class="service-content">
                <h3 class="service-title">Penulisan Salinan</h3>
                <p class="service-description">
                    Tulis teks promosi yang menggugah, meningkatkan konversi, dan membangun hubungan dengan audiens Anda.
                </p>
            </div>
            <div class="service-icon">
                <i class="fas fa-arrow-down"></i>
            </div>
        </div>
    </div>
</section>
<!-------------------------------- recent-works -------------------------------------->
<section id="works">
    <div class="container">
        <h2 class="gradient-text">Portofolio Karya Saya</h2>
        <p class="section-description">
            Saya menghadirkan ide-ide anda dalam bentuk artikel menarik yang informatif, relevan, dan berfokus pada pembaca Anda.
        </p>

        <!-- Filter Buttons -->
        <div class="filter-buttons">
            <button class="filter-btn active" data-filter="all">Semua</button>
            <button class="filter-btn" data-filter="uxui">Artikel SEO</button>
            <button class="filter-btn" data-filter="branding">Konten Blog</button>
            <button class="filter-btn" data-filter="apps">Ulasan Produk</button>
        </div>

        <!-------------------------------- laptop-gallery -------------------------------------->

         <div class="gallery-container">
        <div class="gallery-item">
            <img src="img/Gambar2.png" alt="Laptop 1">
            <div class="overlay">
                <h3>Semua</h3>
                <p>Kumpulan lengkap karya terbaik saya yang mencakup berbagai topik dan gaya penulisan, mulai dari artikel SEO hingga ulasan produk. Temukan inspirasi dan ide di sini!</p>
            </div>
        </div>
        <div class="gallery-item">
            <img src="img/Gambar3.png" alt="Laptop 2">
            <div class="overlay">
                <h3>Artikel SEO</h3>
                <p>Artikel yang dirancang khusus untuk meningkatkan peringkat di mesin pencari, dengan riset kata kunci mendalam dan konten yang relevan untuk audiens Anda. Cocok untuk meningkatkan visibilitas bisnis online Anda.</p>
            </div>
        </div>
        <div class="gallery-item">
            <img src="img/Gambar4.png" alt="Laptop 3">
            <div class="overlay">
                <h3>Konten Blog</h3>
                <p>Konten blog menarik dan informatif yang dibuat untuk memikat pembaca dan membangun loyalitas audiens. Artikel ini dirancang untuk menyampaikan cerita atau informasi dengan cara yang kreatif dan engaging.</p>
            </div>
        </div>
        <div class="gallery-item">
            <img src="img/Gambar4.png" alt="Laptop 4">
            <div class="overlay">
                <h3>Ulasan Produk</h3>
                <p>Penilaian mendalam dan jujur tentang berbagai produk, memberikan informasi yang berguna bagi pembaca sebelum mereka membuat keputusan pembelian. Ulasan ini membantu pembaca memahami nilai dari produk yang mereka pertimbangkan.</p>
            </div>
        </div>
    </div>
        </div>
    </div>
</section>
<!-------------------------------------------- resume --------------------------------->
<section id="resume">
    <div class="container experience-wrap">
        <!-- Experience Section -->
        <div class="experience">
            <h2 class="gradient-text">
                <i class="icon">⚙</i> Pengalaman Saya
            </h2>
            <div class="experience-list">
                <div class="experience-item">
                    <h3>2022 - Sekarang</h3>
                    <h4>Penulis Konten Freelance</h4>
                    <p>Membuat artikel berkualitas untuk blog, media online, dan klien internasional, mencakup berbagai topik seperti teknologi, pendidikan, dan bisnis.</p>
                </div>
                <div class="experience-item">
                    <h3>2021 - 2022</h3>
                    <h4>Kontributor di Universitas Raharja</h4>
                    <p>Bekerja sama dengan platform pmb raharja untuk menghasilkan artikel SEO-friendly yang menarik audiens.</p>
                </div>
                <div class="experience-item">
                    <h3>2020 - 2021</h3>
                    <h4>Editor & Penulis di Blog Pribadi</h4>
                    <p>Mengelola blog pribadi dengan fokus pada edukasi digital, berbagi wawasan tentang teknologi dan strategi konten.</p>
                </div>
                <div class="experience-item">
                    <h3>2018 - 2020</h3>
                    <h4>Magang Penulis di Universitas Raharja</h4>
                    <p>Belajar dasar-dasar penulisan profesional dan strategi komunikasi efektif untuk audiens yang beragam.</p>
                </div>
            </div>
        </div>

        <!-- Education Section -->
        <div class="education">
            <h2 class="gradient-text">
                <i class="icon">🎓</i> Pendidikan Saya
            </h2>
            <div class="education-list">
                <div class="education-item">
                    <h3>2020 - 2023</h3>
                    <h4>Universitas Raharja</h4>
                    <p>Gelar S1 di bidang Teknik Informatika, dengan spesialisasi pada pengembangan konten berbasis data, penulisan artikel, dan penguasaan coding untuk pembuatan landing page.</p>
                </div>
                <div class="education-item">
                    <h3>2016 - 2020</h3>
                    <h4>SMK Darul Hidayah</h4>
                    <p>Jurusan Teknik Komputer dan Jaringan, mempelajari dasar-dasar instalasi jaringan, konfigurasi perangkat keras.</p>
                </div>
                <div class="education-item">
                    <h3>2012 - 2015</h3>
                    <h4>Mts Darul Hidayah</h4>
                    <p>Madrasah Tsanawiyah yang mengintegrasikan pendidikan agama Islam dengan ilmu pengetahuan umum.</p>
                </div>
                <div class="education-item">
                    <h3>2010 - 2011</h3>
                    <h4>MI Munada</h4>
                    <p>Madrasah Ibtidaiyah yang berkomitmen membangun fondasi pendidikan dasar berbasis agama Islam.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-------------------------------------------- skills-section --------------------------------->

<section id="skills">
  <div class="container">
    <div class="skills">
  <h2 class="gradient-text">Keterampilan Saya</h2>
  <p>Saya menciptakan kata-kata yang berdampak dan merancang strategi konten yang meningkatkan brand Anda serta melibatkan audiens Anda.</p>
  <div class="skill-boxes">
    <div class="skill-box">
      <i class="fa-solid fa-pen-nib"></i>
      <h3>92%</h3>
      <p>Penulisan SEO</p>
    </div>
    <div class="skill-box">
      <i class="fa-solid fa-file-alt"></i>
      <h3>80%</h3>
      <p>Penulisan Salinan</p>
    </div>
    <div class="skill-box">
      <i class="fa-solid fa-diagram-project"></i>
      <h3>85%</h3>
      <p>Strategi Konten</p>
    </div>
    <div class="skill-box">
      <i class="fa-brands fa-wordpress"></i>
      <h3>99%</h3>
      <p>Manajemen WordPress</p>
    </div>
    <div class="skill-box">
      <i class="fa-solid fa-magnifying-glass"></i>
      <h3>89%</h3>
      <p>Pengeditan & Pengoreksian</p>
    </div>
  </div>
</div>

    </div>
  </div>
</section>

<!-------------------------------------------- recent-blogs --------------------------------->

<section class="recent-blogs">
  <div class="container">
    <h2 class="gradient-text">Artikel Terbaru</h2>
    <p>Saya mengubah ide Anda menjadi artikel berkualitas tinggi yang relevan, menarik, dan memberikan dampak besar kepada pembaca.</p>
    <div class="blog-grid">
      <div class="blog-card">
        <span class="category">Bisnis</span>
        <img src="img/business.webp" alt="Business Blog">
        <div class="blog-content">
          <span><i class="fas fa-calendar-alt"></i> Jan 20, 2025</span>
          <span><i class="fas fa-comment"></i> Comment</span>
          <h3>Strategi bisnis online untuk Meningkatkan Penjualan dengan Cepat</h3>
        </div>
      </div>
      <div class="blog-card">
        <span class="category">Investasi</span>
        <img src="img/Investasi.jpg" alt="Development Blog">
        <div class="blog-content">
          <span><i class="fas fa-calendar-alt"></i> Jan 21, 2025</span>
          <span><i class="fas fa-comment"></i> Comment</span>
          <h3>Metode 50 30 20 Cara Mudah Mengatur Investasi dan Pengeluaran</h3>
        </div>
      </div>
      <div class="blog-card">
        <span class="category">Pendidikan</span>
        <img src="img/development.webp" alt="Portfolio Blog">
        <div class="blog-content">
          <span><i class="fas fa-calendar-alt"></i> Dec 01, 2022</span>
          <span><i class="fas fa-comment"></i> Comment</span>
          <h3>Teknik belajar efektif untuk Meningkatkan Prestasi Akademik</h3>
        </div>
      </div>
    </div>
  </div>
</section>

<!-------------------------------------------- contact-section --------------------------------->

<section id="contact">
  <div class="container form-wrap">
    <div class="contact-form">
      <h2>Mari Berkolaborasi!</h2>
      <p>Saya menciptakan artikel yang menarik, informatif, dan dirancang khusus untuk menyampaikan pesan Anda dengan tepat.</p>
      <form>
        <div class="form-group">
          <input type="text" placeholder="First name" />
          <input type="text" placeholder="Last name" />
        </div>
        <div class="form-group">
          <input type="email" placeholder="Email address" />
          <input type="tel" placeholder="Phone number" />
        </div>
        <div class="form-group">
          <select>
            <option>Select an option</option>
            <option>Select an option</option>
            <option>Select an option</option>
          </select>
        </div>
        <textarea placeholder="Message"></textarea>
        <button type="submit">Send Message</button>
      </form>
    </div>
    <div class="contact-info">
      <div class="info-item">
        <i class="fas fa-phone"></i>
        <div>
          <h4>Phone</h4>
          <p>+62 8566 4316 906</p>
        </div>
      </div>
      <div class="info-item">
        <i class="fas fa-envelope"></i>
        <div>
          <h4>Email</h4>
          <p>farhanhidayat7373@gmail.com</p>
        </div>
      </div>
      <div class="info-item">
        <i class="fas fa-map-marker-alt"></i>
        <div>
          <h4>Address</h4>
          <p>Jl.KH Hasyim Ashari, Gg. KH M Kup No. 39, Pinang</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-------------------------------------------- footer --------------------------------->

<footer class="footer">
  <div class="footer-logo">
    <img src="img/Logo.png" alt="Logo">
  </div>
  <ul class="footer-links">
    <li><a href="#home">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#works">Portfolios</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  <p class="footer-copyright">
    © 2025 All rights reserved by <span class="highlight">FarhanHidayat</span>
  </p>
</footer>

    <script src="script.js"></script>
</body>
</html>

2️⃣ Styling dengan CSS (style.css)

:root {
    scroll-behavior: smooth;
}

body {
     margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: #272935;
    color: #1a1a1a; /* Warna teks utama */
    height: 100vh; /* Pastikan tinggi halaman penuh */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10%; 
    position: fixed;
    width: 80%;
    z-index: 1000;
    background-color: #353744;
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Animasi transisi */
}

.logo-img {
    height: 40px; /* Atur tinggi logo */
    width: auto;  /* Pertahankan proporsi gambar */
}


nav a {
    margin: 0 15px;
    color: #ffffff;
    transform: scaleX(0);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    font-weight: bold;
    position: sticky;
    top: 0;
}

nav a:hover {
    color: #f5f5f5;;
    border-bottom: 1px solid #ffffff;
    transform: scaleX(1);
    transition:0.5s ease;

}

.nav-link {
    padding: 10px 20px;
    font-size: 1rem;
    background: linear-gradient(135deg, #2bbab3, #ffffff);
    color: #000;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: #bbb;
}

/* Bagian kanan navbar */
.right-section {
    display: flex;
    align-items: center;
    gap: 15px; /* Atur jarak antara ikon dan tombol */
}

/* Tombol Tema (Ikon Bulan) */
.theme-toggle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2bbab3, #ffffff); /* Gradasi warna */
    border: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.theme-toggle i {
    color: #333; /* Warna ikon */
}

.theme-toggle:hover {
    background: linear-gradient(135deg, #ffffff, #2bbab3); /* Gradasi terbalik saat hover */
}

/* Tombol Hire Me */
.hire-button {
    padding: 12px 25px;
    font-size: 1rem;
    border: 2px solid #2bbab3;
    background: transparent;
    color: #ffffff;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hire-button:hover {
    background: linear-gradient(135deg, #ffffff, #2bbab3);
    color: #000000;
}

main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px 10%;
    min-height: 90vh;
}

.text-content {
    flex: 1;
    max-width: 45%; /* Teks maksimal 45% dari lebar layar */
}

.text-content p {
    margin: 0;
    font-size: 2.6rem;
    color: #ffffff;
    font-weight: bold;
}

.text-content h1 {
    font-size: 3.8rem;
    line-height: 1.1;
    margin: 20px 0;
    font-weight: bold;
}

.gradient-text {
    font-size: 4rem; /* Ukuran font besar */
    font-weight: bold; /* Teks tebal */
    background: linear-gradient(90deg, #2bbab3, #ffffff); /* Gradasi warna */
    -webkit-background-clip: text; /* Klip latar belakang ke teks */
    -webkit-text-fill-color: transparent; /* Isi teks transparan sehingga gradasi terlihat */
    
}


.text-content .description {
    margin: 20px 0;
    color: #ffffff;
    font-size: 1rem;
}

.text-content .buttons {
    margin-top: 20px;
    display: flex;
    gap: 15px; /* Jarak antar elemen */
}

.text-content .buttons a {
    color: #bbb;
    text-decoration: none;
    transition: color 0.3s;
}

.text-content .buttons a:hover {
    color: white;
}

/* Gaya untuk tombol Download CV */
.download-cv {
    background: transparent;
    color: #bbb;
    border: 2px solid #2bbab3;
    padding: 10px 30px;
    border-radius: 50px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 20px 0;
    transition: all 0.3s ease;
}

.download-cv:hover {
    background: #2bbab3;
    color: white;
}

/* Gaya untuk ikon sosial media */
.social-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid #2bbab3;
    border-radius: 50%;
    color: #2bbab3;
    text-decoration: none;
    margin-left: 10px;
    margin: 20px 0;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: #2bbab3;
    color: white;
}


.image-container {
    flex: 1;
    max-width: 45%; /* Gambar maksimal 45% dari lebar layar */
    text-align: right; /* Gambar di kanan */
}

.image-container img {
    max-width: 100%; /* Gambar menyesuaikan wadah */
    border-radius: 15px; /* Membulatkan sudut gambar */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.hover-image {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* Transisi transformasi dan filter */
}

/* Efek hover */
.image-container:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); /* Bayangan lebih besar saat hover */
}

.image-container:hover .hover-image {
    transform: scale(1.05); /* Membesarkan gambar sedikit */
    filter: brightness(1.2) saturate(1.2); /* Menambah kecerahan dan saturasi */
}

/*********************************** Section Container *********************************/
#services {
    background-color: #353744;
    color: #ffffff;
    padding: 60px 20px;
    text-align: center;
    
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Title and Description */
.section-title {
    margin: 0;
    font-size: 2.6rem;
    color: #ffffff;
    font-weight: bold;
}

.section-title h2 {
    font-size: 3.8rem;
    line-height: 1.1;
    margin: 20px 0;
    font-weight: bold;
}

.gradient-text {
    font-size: 3rem; /* Ukuran font besar */
    font-weight: bold; /* Teks tebal */
    background: linear-gradient(90deg, #2bbab3, #ffffff); /* Gradasi warna */
    -webkit-background-clip: text; /* Klip latar belakang ke teks */
    -webkit-text-fill-color: transparent; /* Isi teks transparan sehingga gradasi terlihat */
    
}

.section-description {
    font-size: 1rem;
    margin-bottom: 50px;
    color: #ffffff; /* Warna deskripsi */
}

/* Service Cards */
.service {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    background-color: #272935;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth hover effect */
}

.service:hover {
    background-color: #2bbab3;
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
}

/* Service Number */
.service-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
    margin-right: 20px;
}

/* Service Content */
.service-content {
    flex-grow: 1;
    text-align: left;
}

.service-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10px;
}

.service-description {
    font-size: 0.95rem;
    color: #ffffff;
}

/* Service Icon */
.service-icon {
    font-size: 1.5rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*********************************** My Recent Works *************************************/

/* Section Container */
#works {
    padding: 60px 20px;
    background-color: #272935;
    text-align: center;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Title & Description */
.section-title {
    font-size: 2.5rem;
    color: #fff;
    font-weight: bold;
    margin-bottom: 10px;
}

.section-description {
    font-size: 1rem;
    color: #ffffff;
    margin-bottom: 30px;
}

/* Filter Buttons */
.filter-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.filter-btn {
    padding: 10px 20px;
    font-size: 1rem;
    color: #000;
    background: #ece9ff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth hover effect */
}

.filter-btn.active,
.filter-btn:hover {
    background: #2bbab3;
    color: white;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

/* laptop-gallery */
/* Container utama */
.laptop-gallery {
    padding: 40px 20px;
    background: linear-gradient(180deg, #ffffff, #f0f4ff); /* Latar belakang gradasi */
    text-align: center;
}

/* Kontainer grid */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 kolom */
    gap: 20px; /* Jarak antar gambar */
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Item dalam grid */
.gallery-item {
    overflow: hidden;
    border-radius: 20px; /* Membuat sudut melengkung */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Bayangan gambar */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img {
    width: 100%; /* Pastikan gambar memenuhi kotak */
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Efek hover */
/* Overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Warna overlay dengan transparansi */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    opacity: 0; /* Sembunyikan overlay awalnya */
    transition: opacity 0.3s ease-in-out;
    padding: 20px;
    box-sizing: border-box;
}

/* Kontainer utama */
.laptop-gallery {
    padding: 40px 20px;
    background: linear-gradient(180deg, #ffffff, #ece9ff); /* Latar belakang gradasi */
    text-align: center;
}

/* Grid untuk gambar */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Setiap item gambar */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

/* Overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Warna overlay dengan transparansi */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    opacity: 0; /* Sembunyikan overlay awalnya */
    transition: opacity 0.3s ease-in-out;
    padding: 20px;
    box-sizing: border-box;
}

/* Efek hover */
.gallery-item:hover img {
    transform: scale(1.1); /* Zoom-in pada gambar */
}

.gallery-item:hover .overlay {
    opacity: 1; /* Tampilkan overlay */
}

/* Judul dan deskripsi */
.overlay h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.overlay p {
    font-size: 1rem;
    line-height: 1.5;
}

/**************************************** resume ***************************/
#resume {
    background-color: #353744;
    color: #2bbab3;
    padding: 60px 20px;
    text-align: center;
    border-radius: 50px;
}

.experience-wrap {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Title */
.section-title {
    font-size: 2rem;
    color: #7b5cff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}


.section-title .icon {
    font-size: 1.5rem;
}

/* Experience and Education Lists */
.experience, .education {
    flex: 1;
    max-width: 500px;
}

.experience-list, .education-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Individual Items */
.experience-item, .education-item {
    background: #272935; /* Background untuk setiap item */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.experience-item:hover, .education-item:hover {
    transform: translateY(-5px); /* Efek melayang saat hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}

/* Text Styling */
.experience-item h3, .education-item h3 {
    color: #2bbab3;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.experience-item h4, .education-item h4 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: white;
}

.experience-item p, .education-item p {
    font-size: 1rem;
    color: #bbb;
}

/**************************************** skills-section ***************************/

/* Gaya umum untuk section */
#skills {
  padding: 50px 20px;
  background-color: #272935;
  color: white;
  text-align: center;
}

/* Judul section */
.skills {
  text-align: center;
  color: #fff;
  font-family: Arial, sans-serif;
}

.skills h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.skills p {
  margin-bottom: 20px;
}

.skill-boxes {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.skill-box {
  background: #353744;
  border-radius: 10px;
  padding: 20px;
  width: 180px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth hover effect */
}

.skill-box:hover {
   background: #2bbab3;
  transform: translateY(-10px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

.skill-box i {
  font-size: 3rem;
  color: #2bbab3;
  margin-bottom: 10px;
}

.skill-box:hover i {
  color: #000;
}

.skill-box h3 {
  font-size: 1.5rem;
  margin: 10px 0;
  
}

.skill-box p {
  font-size: 1rem;
  color: #fff;
}


/**************************************** recent-blogs ***************************/

.recent-blogs {
  padding: 50px 0;
  background-color: #353744;
  color: white;
  text-align: center;
  border-radius: 50px;
}

.recent-blogs h2 {
  font-size: 2.5rem;
  color: #9b59b6;
  margin-bottom: 20px;
}

.recent-blogs p {
  color: #ffffff;
  margin-bottom: 40px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.blog-card {
  background: #272935;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth hover effect */
}

.blog-card:hover {
  transform: translateY(-10px);
  background-color: #2bbab3;
}

.blog-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.blog-card:hover img {
    transform: scale(1.1); /* Zoom-in pada gambar */
    transition: transform 0.3s ease;
}

.category {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #2bbab3;
  color: white;
  padding: 5px 10px;
  font-size: 0.9rem;
  border-radius: 12px;
}

.blog-content {
  padding: 20px;
}

.blog-content span {
  display: inline-block;
  font-size: 0.8rem;
  color: #fff;
  margin-right: 15px;
}

.blog-content h3 {
  font-size: 1.2rem;
  color: white;
  margin-top: 15px;
}

/**************************************** contact-section ***************************/


#contact {
  padding: 50px 0;
}

.form-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.contact-form, .contact-info {
  background: #353744;
  color: #333;
  border-radius: 15px;
  padding: 30px;
  width: 48%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
  color: #2bbab3;
  margin-bottom: 10px;
}

.contact-form p {
  margin-bottom: 20px;
  font-size: 16px;
  color: #fff;
}

.contact-form .form-group {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box; /* Pastikan ukuran elemen termasuk padding dan border */
  color: #333;
}

.contact-form textarea {
  height: 80px;
}

.contact-form button {
  background: linear-gradient(135deg, #2bbab3, #ffffff);
  color: #000;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  margin-top: 20px;
}

.contact-form button:hover {
  background: linear-gradient(135deg, #ffffff, #2bbab3);
}

.contact-info .info-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.contact-info .info-item i {
  font-size: 24px;
  color: #2bbab3;
  margin-right: 15px;
}

.contact-info .info-item h4 {
  margin: 0;
  font-size: 16px;
  color: #fff;
}

.contact-info .info-item p {
  margin: 0;
  font-size: 14px;
  color: #bbb;
}

/**************************************** contact-section ***************************/

.footer {
  background-color: #353744;
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

.footer-logo img {
  max-width: 80px;
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer-links li {
  display: inline;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-copyright {
  font-size: 14px;
  color: #aaa;
}

.footer-copyright .highlight {
  color: #fff;
  font-weight: bold;
}

3️⃣ Interaktif dengan JavaScript (script.js)

document.addEventListener("DOMContentLoaded", () => {
    const content = document.querySelector(".text-content");
    const image = document.querySelector(".image-container img");

    if (content && image) {
        content.style.opacity = "0";
        content.style.transform = "translateX(-50px)";
        image.style.opacity = "0";
        image.style.transform = "translateX(50px)";

        setTimeout(() => {
            content.style.transition = "all 1s ease";
            content.style.opacity = "1";
            content.style.transform = "translateX(0)";
        }, 300);

        setTimeout(() => {
            image.style.transition = "all 1s ease";
            image.style.opacity = "1";
            image.style.transform = "translateX(0)";
        }, 500);
    } else {
        console.error("Elements not found in the DOM.");
    }

});

Cara Menggunakan Template

1️⃣ Download koding di atas atau salin ke editor seperti VS Code.
2️⃣ Simpan file dengan format index.html, style.css, dan script.js.
3️⃣ Jalankan dengan membuka index.html di browser.
4️⃣ Kustomisasi teks, warna, dan gambar sesuai kebutuhan.
5️⃣ Upload ke GitHub Pages atau Netlify untuk hosting gratis.

Tambahkan gambar hasil tampilan website agar lebih menarik bagi pembaca!

Kesimpulan

Secara keseluruhan, menggunakan template HTML gratis merupakan cara yang efektif untuk membangun website portfolio profesional tanpa harus membuatnya dari nol. Dengan menggunakan template ini, Anda bisa mendapatkan:

  • Desain responsif dan modern.
  • Anda dapat menyesuaikan kode dengan mudah karena strukturnya yang ringan.
  • Struktur yang SEO-friendly, membantu website lebih mudah ditemukan di mesin pencari.

Coba sekarang! Download template ini dan buat website portofolio impian Anda!

Jika Anda memiliki pertanyaan atau ingin fitur tambahan, tinggalkan komentar di bawah! 👇

Artikel Download Template HTML Gratis untuk Website Portfolio (Kode Lengkap) pertama kali tampil pada Farhanhidayat.com.

]]> https://farhanhidayat.com/template-html-gratis-untuk-website-portfolio/feed/ 0