Template HTML Gratis untuk Website Portfolio
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!
🛠️ 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>[email protected]</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! 👇
Berbagi wawasan dan tips praktis seputar dunia digital.
You might also like
Bisnis
Coding
Investasi
Pendidikan
Review
Tips
