Html dan CSS Custom Web abdulrahmantsani.com | Halaman Home

Pada artikel ini saya ingin membagikan kode HTML dan CSS yang saya gunakan pada beranda website ini. Barangkali Anda sedang membutuhkannya dan ingin mengadaptasinya ke dalam proyek Anda sendiri. Setiap elemen yang ada di halaman beranda merupakan hasil implementasi langsung dari kode yang saya sertakan, sehingga Anda bisa melihat preview sebelum menerapkannya.

CTA

Berikut html dan css untuk section CTA:

<section id="home-cta" class="cta-section">
<div class="cta-container">
<h2>Mari bekerjasama</h2>
<p>
Saya siap membantu Anda mengembangkan website, SEO dan strategi digital marketing lainnya. 
Mulai dengan diskusi terlebih dahulu.
</p>
<a href="https://wa.me/6285129449454" class="cta-btn">Diskusi Sekarang</a>
</div>
</section>
<style>.cta-section {
width: 100%;
background: #0B6EFD;
padding: 65px 20px;
text-align: center;
color: #fff;
margin-top: 70px;
border-radius: 18px;
box-sizing: border-box;
box-shadow: 0 10px 30px rgba(11,110,253,0.25);
}

.cta-section h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 16px;
}

.cta-section p {
font-size: 17px;
max-width: 760px;
margin: 0 auto 30px auto;
line-height: 1.65;
opacity: 0.95;
}

.cta-btn {
display: inline-block;
padding: 14px 30px;
background: #fff;
color: #0B6EFD;
font-size: 18px;
font-weight: 700;
border-radius: 10px;
text-decoration: none;
transition: 0.25s ease;
}

.cta-btn:hover {
background: #e8e8e8;
transform: translateY(-3px);
}

/* responsive */
@media (max-width: 600px) {
.cta-section h2 {
font-size: 24px;
}
.cta-section p {
font-size: 15px;
max-width: 100%;
}
.cta-btn {
font-size: 16px;
padding: 12px 22px;
}
}
</style>

Portofolio

Berikut html dan css untuk section portofolio:

<section class="experience-timeline">
<h2>Pengalaman Project</h2>

<div class="timeline">

<!-- ITEM 1 -->
<div class="timeline-item right">
<div class="timeline-content">
<span class="year">2021 - 2023</span>
<h3>Hallokim.com</h3>
<p>Agensi | WFH </p>
<ul>
<li>Publikasi artikel</li>
<li>Penulisan artikel SEO</li>
<li>Keyword Research</li>
</ul>
</div>
</div>

<!-- ITEM 2 -->
<div class="timeline-item left">
<div class="timeline-content">
<span class="year">2023 - 2025</span>
<h3>Jagoan Billboard</h3>
<p>Outdoor Advertising | WFH & WFO</p>
<ul>
<li>Search Engine Optimization</li>
<li>Manajemen Website</li>
<li>Manajemen Social Media</li>
</ul>
</div>
</div>

<!-- ITEM 3 -->
<div class="timeline-item right"> 
<div class="timeline-content">
<span class="year">2024</span>
<h3>Raven Course</h3>
<p>Kursus Bahasa Inggris di Jepara | WFH</p> 
<ul>
<li>Meta ADS</li>
<li>Web Developer (WordPress)</li>
<li>Search Engine Optimization (SEO)</li>
</ul>
</div>
</div>
<!-- ITEM 4 -->
<div class="timeline-item left">
<div class="timeline-content">
<span class="year">2025</span>
<h3>MADS</h3>
<p>Outdoor Advertising | WFO</p>
<ul>
<li>Copywriting</li>
<li>Manajemen Website</li>
<li>Search Engine Optimization (SEO)</li>
</ul>
</div>
</div>
</section>

<style>.experience-timeline {
padding: 60px 8%;
font-family: Inter, sans-serif;
}

.experience-timeline h2 {
text-align: center;
margin-bottom: 40px;
font-weight: 700;
font-size: 28px;
color: #0b2340;
}

.timeline {
position: relative;
max-width: 900px;
margin: auto;
}

.timeline::before {
content: "";
position: absolute;
width: 4px;
background: #0b6efd;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
}

.timeline-item {
width: 50%;
padding: 20px 40px;
position: relative;
box-sizing: border-box;
}

.timeline-item::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #fff;
border: 3px solid #0b6efd;
border-radius: 50%;
top: 24px;
z-index: 2;
}

.timeline-item.right {
left: 50%;
}

.timeline-item.right::before {
left: -12px;
}

.timeline-item.left {
left: 0;
}

.timeline-item.left::before {
right: -12px;
}

.timeline-content {
background: #ffffff;
padding: 20px 24px;
border-radius: 12px;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
}

.timeline-content .year {
font-size: 14px;
color: #0b6efd;
font-weight: 600;
display: block;
margin-bottom: 6px;
}

.timeline-content h3 {
margin: 0 0 6px 0;
font-size: 20px;
font-weight: 700;
color: #0b2340;
}

.timeline-content p {
margin: 0;
color: #667085;
line-height: 1.6;
}
@media (max-width: 768px) {

/* Reset zig-zag posisi */
.timeline-item {
width: 100% !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
padding-left: 55px !important;
padding-right: 20px !important;
}

/* Garis vertical timeline */
.timeline::before {
left: 28px !important;
right: auto !important;
}

/* Bullet */
.timeline-item::before {
left: 20px !important;
right: auto !important;
margin: 0 !important;
transform: translateX(0) !important;
}

/* Typografi mobile */
.timeline-content .year {
font-size: 15px !important; /* H6 mobile */
line-height: 22px !important;
}

.timeline-content h3 {
font-size: 16px !important; /* H3 mobile */
line-height: 24px !important;
margin-bottom: 6px !important;
}

.timeline-content p {
font-size: 15px !important; /* body text mobile */
line-height: 24px !important;
margin-bottom: 8px !important;
}

.timeline-content ul {
font-size: 15px !important; /* body text mobile */
line-height: 24px !important;
padding-left: 20px !important;
margin-bottom: 12px !important;
}
}

</style>

Feature Boxes

Berikut html dan css untuk section feature box:

<!-- Feature Boxes Section -->
<section class="feature-section">

<!-- BOX 1: Layanan -->
<a href="https://abdulrahmantsani.com/jasa/" class="feature-box">
<div class="feature-icon">
<svg width="72" height="72" viewBox="0 0 24 24" fill="none">
<rect x="2" y="3" width="20" height="12" rx="1.5" stroke="#FFFFFF" stroke-width="1.4" fill="rgba(255,255,255,0.03)"/>
<path d="M8 19h8" stroke="#FFFFFF" stroke-width="1.4" stroke-linecap="round"/>
<path d="M12 15v1.6" stroke="#FFFFFF" stroke-width="1.4" stroke-linecap="round"/>
</svg>
</div>

<div class="feature-content">
<h3>Layanan Saya</h3>
<p>Website, optimasi SEO, dan digital marketing untuk meningkatkan hasil penjualan bisnis Anda.</p>
<span class="feature-button">Lihat Layanan</span>
</div>
</a>

<!-- BOX 2: Portofolio -->
<a href="/portofolio" class="feature-box">
<div class="feature-icon">
<svg width="72" height="72" viewBox="0 0 24 24" fill="none">
<rect x="3" y="3" width="10" height="6" rx="2" stroke="#FFFFFF" stroke-width="1.4" fill="rgba(255,255,255,0.03)"/>
<rect x="15" y="3" width="6" height="10" rx="2" stroke="#FFFFFF" stroke-width="1.4" fill="rgba(255,255,255,0.03)"/>
<rect x="3" y="11" width="6" height="10" rx="2" stroke="#FFFFFF" stroke-width="1.4" fill="rgba(255,255,255,0.03)"/>
<rect x="11" y="15" width="10" height="6" rx="2" stroke="#FFFFFF" stroke-width="1.4" fill="rgba(255,255,255,0.03)"/>
</svg>
</div>

<div class="feature-content">
<h3>Portofolio</h3>
<p>Kumpulan brand & proyek yang sudah mempercayakan kebutuhan digital mereka kepada saya.</p>
<span class="feature-button">Lihat Portofolio</span>
</div>
</a>

<!-- BOX 3: Tulisan -->
<a href="https://abdulrahmantsani.com/e-book" class="feature-box">
<div class="feature-icon">
<svg width="72" height="72" viewBox="0 0 24 24" fill="none">
<rect x="3" y="4" width="14" height="16" rx="2" stroke="#FFFFFF" stroke-width="1.4" fill="rgba(255,255,255,0.03)"/>
<path d="M7 4v16" stroke="#FFFFFF" stroke-width="1.2" stroke-linecap="round"/>
<path d="M18.2 3.8L20.2 5.8C20.6 6.2 20.6 6.8 20.2 7.2L14 13.4L11.6 13.9L12.1 11.5L18.2 5.3C18.6 4.9 19.4 4 18.2 3.8Z" stroke="#FFFFFF" stroke-width="1.2" fill="rgba(255,255,255,0.05)"/>
<path d="M11.6 13.9L10.5 15" stroke="#FFFFFF" stroke-width="1.2" stroke-linecap="round"/>
</svg>
</div>

<div class="feature-content">
<h3>Tulisan</h3>
<p>Berisi panduan, edukasi, dan insight seputar freelance & digital marketing yang saya rangkum dalam bentuk web book.</p>
<span class="feature-button">Baca Tulisan</span>
</div>
</a>

</section>
<style>.feature-section {
background:#283593;
padding:60px 8%;
display:flex;
justify-content:center;
align-items:stretch;
gap:30px;
flex-wrap:wrap;
box-sizing:border-box;
}

.feature-box {
background:#0b6efd;
flex:1;
min-width:250px;
max-width:350px;
border-radius:12px;
overflow:hidden;
text-align:center;
color:#fff;
text-decoration:none;
box-shadow:0 6px 22px rgba(0,0,0,0.18);
display:flex;
flex-direction:column;
align-items:center;
transition:transform .25s ease, box-shadow .25s ease;
}

.feature-box:hover {
transform:translateY(-6px);
box-shadow:0 10px 32px rgba(0,0,0,0.25);
}

.feature-icon {
padding:28px 24px 10px;
display:flex;
align-items:center;
justify-content:center;
}

.feature-content {
padding:0 28px 28px;
}

.feature-content h3 {
margin:0 0 10px;
font-weight:700;
color:#ffffff;
}

.feature-content p {
font-size:14px;
line-height:1.6;
margin:0 0 18px;
color:rgba(255,255,255,0.95);
}

.feature-button {
display:inline-block;
background:#fff;
color:#3f51b5;
padding:8px 16px;
border-radius:8px;
font-weight:600;
font-size:13px;
transition:background .25s ease;
}

.feature-button:hover {
background:#e3e8ff;
}

/* RESPONSIVE */
@media(max-width:768px) {
.feature-section {
padding:50px 18px;
gap:20px;
}

.feature-box {
max-width:100%;
}
}
</style>

Hero

Berikut html dan css untuk section hero:

<section class="hero-section">
<div class="hero-container">

<div class="hero-text">
<div class="hero-badge">Hi, I'm</div>

<h1 class="hero-title">Abdul Rahman Tsani</h1>
<h4 class="hero-subtitle">Web Developer • SEO Specialist • Digital Marketer</h4>

<p class="hero-desc">
Saya membantu usaha dan brand memaksimalkan potensi digital melalui website, SEO, dan strategi marketing agar menjadi investasi jangka panjang.
</p>

<div class="hero-buttons">
<a href="https://wa.me/685129449454" class="hero-btn primary">Hire Me</a>
<a href="https://abdulrahmantsani.com/about-me/" class="hero-btn outline">Tentang Saya</a>
</div>
</div>

<div class="hero-photo-container">
<div class="hero-photo">
<img src="https://abdulrahmantsani.com/wp-content/uploads/2025/09/1758033197947-e1762057116876.webp" alt="Abdul Rahman Tsani — foto profil"/>
</div>
</div>

</div>
</section>
<Style>
/* === DESKTOP === */
.hero-section {
display:flex;
align-items:center;
justify-content:center;
padding:56px 20px;
background:#ffffff;
font-family:Inter,Arial,sans-serif;
color:#0b2340;
font-size:16px;
line-height:27px;
}

.hero-container {
max-width:1100px;
width:100%;
display:flex;
gap:36px;
align-items:center;
background:#fff;
padding:80px;
border-radius:16px;
box-shadow:0 8px 30px rgba(12,40,80,0.06);
}

.hero-text {
flex:1;
min-width:270px;
}

.hero-badge {
display:inline-block;
padding:6px 10px;
border-radius:999px;
background:rgba(11,110,253,0.08);
color:#0b6efd;
font-weight:600;
font-size:13px;
line-height:18px;
}

.hero-title {
margin:14px 0 4px;
font-size:30px;
line-height:39px;
font-weight:700;
}

.hero-subtitle {
margin:0 0 8px;
color:#0b6efd;
font-weight:500;
letter-spacing:0.3px;
font-size:18px;
line-height:28px;
}

.hero-desc {
margin:0 0 18px;
color:#667085;
font-size:16px;
line-height:27px;
}

.hero-buttons {
display:flex;
gap:12px;
align-items:center;
}

.hero-btn {
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 16px;
border-radius:12px;
font-weight:700;
text-decoration:none;
cursor:pointer;
font-size:16px;
line-height:27px;
}

.hero-btn.primary {
background:#0b6efd;
color:#fff;
box-shadow:0 6px 18px rgba(11,110,253,0.18);
border:none;
}

.hero-btn.outline {
background:transparent;
color:#0b6efd;
border:1px solid rgba(11,110,253,0.14);
}

.hero-photo-container {
width:320px;
display:flex;
justify-content:center;
}

.hero-photo {
width:220px;
height:220px;
border-radius:50%;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
border:8px solid rgba(11,110,253,0.06);
box-shadow:0 18px 40px rgba(11,34,64,0.08);
background:linear-gradient(180deg,#ffffff 0%,rgba(11,110,253,0.02) 100%);
}

.hero-photo img {
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* === MOBILE === */
@media (max-width:768px) {
.hero-section {
font-size:15px;
line-height:24px;
}

.hero-container {
flex-direction:column;
text-align:center;
padding: 28px;
}

.hero-photo-container {
width:100%;
margin-bottom:24px;
order:1;
}

.hero-text {
order:2;
min-width:100%;
}

.hero-buttons {
order:3;
flex-direction:column;
width:100%;
gap:10px;
justify-content:center;
}

.hero-btn {
width:100%;
justify-content:center;
font-size:15px;
line-height:22px;
}

.hero-title {
font-size:24px;
line-height:32px;
}

.hero-subtitle {
font-size:15px;
line-height:22px;
}
}
</Style>