Nama : Ari Cakra Kurniawan
Nim : 312410248
Kelas : TI.24.A2
Mata Kuliah : Pemrograman Web 1
Dosen Pengampu : Agung Nugroho, S.Kom., M.Kom.
Hasil akhir
Membuat awalan navbar
Ditambahkan css agar lebih berwarna
Membuat navigasi agar jelas terlihat
Membuat Hero Panel
Membuat layout sidebar
Membuat footer agar lebih berwarna
Membuat layout main
Menambahkan content artikel
- Tambahkan Layout untuk menu About => buat single layout yang berisi deskripsi, portfolio, dll
- Tambahkan layout untuk menu Contact => yang berisi form isian: nama, email, message, dll
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tentang Saya</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1>Tentang Saya</h1>
</header>
<nav>
<a href="home.html">Home</a>
<a href="artikel.html">Artikel</a>
<a href="about.html" class="active">About</a>
<a href="kontak.html">Kontak</a>
</nav>
<section id="hero">
<h1>Kenalan Yuk 👋</h1>
<p>Halo! Saya <strong>Ari Cakra Kurniawan</strong>, seorang mahasiswa jurusan <strong>Teknik Informatika</strong> dari prodi Teknik.
Saya tertarik di bidang teknologi, desain UI/UX, dan pengembangan web. Saya senang belajar hal baru dan bikin sesuatu yang out of the box.</p>
<a href="kontak.html" class="btn btn-large">Hubungi Saya »</a>
</section>
<section id="wrapper">
<section id="main">
<article class="entry">
<h2>Visi & Tujuan</h2>
<img src="https://dummyimage.com/150/71e6d4/fff.png" alt="">
<p>Saya berfokus untuk mengembangkan solusi digital yang bermanfaat, mudah digunakan, dan menarik secara visual. Mimpi saya adalah membangun sistem yang dapat membantu orang dalam aktivitas sehari-hari dengan teknologi yang sederhana tapi impactful.</p>
</article>
<hr class="divider" />
<article class="entry">
<h2>Keahlian</h2>
<img src="https://dummyimage.com/150/3e73e6/fff.png" alt="" class="right-img">
<ul>
<li>Web Development (HTML, CSS, PHP, JS)</li>
<li>UI/UX Design (Figma, Canva)</li>
<li>Networking & Server Setup</li>
</ul>
</article>
</section>
<aside id="sidebar">
<div class="widget-box">
<h3 class="title">Info Singkat</h3>
<p>Mahasiswa aktif yang suka eksplor hal baru, terutama dalam dunia coding dan desain digital.</p>
</div>
<div class="widget-box">
<h3 class="title">Media Sosial</h3>
<ul>
<li><a href="#">Instagram</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">GitHub</a></li>
</ul>
</div>
</aside>
</section>
</div>
</body>
<footer>
<p>© 2025 - Universitas Pelita Bangsa</p>
</footer>
</html>Hasilnya :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kontak Saya</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1>Kontak Saya</h1>
</header>
<nav>
<a href="home.html">Home</a>
<a href="artikel.html">Artikel</a>
<a href="about.html">About</a>
<a href="kontak.html" class="active">Kontak</a>
</nav>
<section id="hero">
<h1>Hubungi Saya 📩</h1>
<p>Punya ide keren, kolaborasi, atau sekadar mau ngobrol soal teknologi? Yuk, kirim pesan lewat form di bawah!</p>
</section>
<section id="wrapper">
<section id="main">
<form action="#" method="post" style="background:#f4f4f4; padding:20px; border-radius:8px;">
<label for="nama"><strong>Nama:</strong></label><br>
<input type="text" id="nama" name="nama" style="width:100%; padding:10px; margin-bottom:10px;"><br>
<label for="email"><strong>Email:</strong></label><br>
<input type="email" id="email" name="email" style="width:100%; padding:10px; margin-bottom:10px;"><br>
<label for="pesan"><strong>Pesan:</strong></label><br>
<textarea id="pesan" name="pesan" rows="5" style="width:100%; padding:10px; margin-bottom:10px;"></textarea><br>
<button type="submit" style="padding:10px 15px; background-color:#1f5faa; color:white; border:none; border-radius:5px; cursor:pointer;">Kirim Pesan</button>
</form>
</section>
<aside id="sidebar">
<div class="widget-box">
<h3 class="title">Info Kontak</h3>
<p><strong>Email:</strong> [email protected]<br>
<strong>Telepon:</strong> +62 821-2146-3232</p>
</div>
<div class="widget-box">
<h3 class="title">Alamat</h3>
<p>Jl. Imam Bonjol, Kab. Bekasi, Jawa Barat, Indonesia</p>
</div>
</aside>
</section>
</div>
</body>
<footer>
<p>© 2025 - Universitas Pelita Bangsa</p>
</footer>
</html>Hasilnya :
Terimakasih Telah Membaca sampai Akhir