Html dan CSS Web abdulrahmantsani.com | Halaman Home

Hai,

Pada artikel ini saya ingin membagikan kode HTML dan CSS yang saya gunakan pada beranda website ini.

Barangkali ada yang sedang membutuhkan dan ingin mengadaptasinya ke dalam proyek sendiri, silahkan copy-paste.

Ohya, Setiap elemen yang ada di halaman beranda merupakan hasil implementasi langsung dari kode yang saya sertakan, sehingga Anda bisa melihat preview sebelum menerapkannya.

Semoga bermanfaat yaaa:)

CTA

Berikut html dan css untuk section CTA:

<section id="home-cta" class="cta-section">
<div class="cta-container">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur facilisis justo vitae suscipit sagittis. Suspendisse ultricies tortor sed lorem porta, vel feugiat massa dictum.
</p>
<a href="#" class="cta-btn">Contact</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>Lorem ipsum dolor sit amet</h2>

<div class="timeline">

<!-- ITEM 1 -->
<div class="timeline-item right">
<div class="timeline-content">
<span class="year">Tahun</span>
<h3>Brand</h3>
<p>Industri| WFH </p>
<ul>
<li>Tanggungjawab 1</li>
<li>Tanggungjawab 2</li>
<li>Tanggungjawab 3</li>
</ul>
</div>
</div>

<!-- ITEM 2 -->
<div class="timeline-item left">
<div class="timeline-content">
<span class="year">Tahun</span>
<h3>Brand</h3>
<p>Industri| WFH & WFO</p>
<ul>
<li>Tanggungjawab 1</li>
<li>Tanggungjawab 2</li>
<li>Tanggungjawab 3</li>
</ul>
</div>
</div>

<!-- ITEM 3 -->
<div class="timeline-item right"> 
<div class="timeline-content">
<span class="year">Tahun</span>
<h3>Brand</h3>
<p>Industri| WFH</p> 
<ul>
<li>Tanggungjawab 1</li>
<li>Tanggungjawab 2</li>
<li>Tanggungjawab 3</li>
</ul>
</div>
</div>
<!-- ITEM 4 -->
<div class="timeline-item left">
<div class="timeline-content">
<span class="year">2025</span>
<h3>Brand</h3>
<p>Industri | WFO</p>
<ul>
<li>Tanggungjawab 1</li>
<li>Tanggungjawab 2</li>
<li>Tanggungjawab 3</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="#" 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>Nulla facilisi. Vivamus pretium, nisi vitae vulputate pretium, odio nibh laoreet magna, id sodales ante nisl nec justo. Phasellus tincidunt, enim id pharetra commodo, orci nibh blandit massa, ut luctus nisl lacus nec risus. Sed sed libero nec elit pharetra malesuada.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus nibh sit amet urna varius accumsan. Sed tempor dui non risus scelerisque, id mollis erat vulputate.</p>
<span class="feature-button">Lihat Portofolio</span>
</div>
</a>

<!-- BOX 3: Tulisan -->
<a href="#" 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>Cras sapien ipsum, bibendum sed congue sed, feugiat sit amet erat. Donec vel laoreet augue. Mauris pulvinar blandit lacus, eget semper odio dictum vel. Suspendisse potenti. Donec condimentum vehicula sapien non molestie. Duis semper sollicitudin fermentum. Quisque dictum ullamcorper urna vel posuere. Nam sed ipsum bibendum, interdum neque ac, venenatis enim. Curabitur volutpat mi ac nisi dictum, non placerat ipsum scelerisque.</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">skill 1 • skill 2 • skill 3</h4>

<p class="hero-desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae urna feugiat, condimentum nisl at, suscipit nisl.
</p>

<div class="hero-buttons">
<a href="#" class="hero-btn primary">Hire Me</a>
<a href="#" class="hero-btn outline">Tentang Saya</a>
</div>
</div>

<div class="hero-photo-container">
<div class="hero-photo">
<img src="#" alt="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>