B1A022052 Ridhagustia

TUGAS PEMBUATAN WEBSITE PROFIL DIRI
KOMPUTER DAN PEMROGRAMAN (CODING)
DISUSUN OLEH :
Nama : Ridhagustia
NPM : B1A022052
Kelas : A
NAMA ASISTEN DOSEN :

Randi Julian Saputra
(G1A019066)
DOSEN PENGAMPU :
Arie VAtresia, S.T., M.TI, Ph.D.
PROGRAM STUDI ILMU HUKUM

FAKULTAS HUKUM
UNIVERSITAS BENGKULU
2023
PEMBAHASAN
1. Tampilan Website
Jawab :
Print Screen
Gambar 1 Tampilan Website

Penjelasan :
Pada gambar 1 yang merupakan tampilan website profil diri saya. Saya menggunakan
html dan css untuk membentuk desain sedemikian rupa hingga menjadi seperti ini. Pada
halaman ini, pengunjung website saya dapat mengakses beberapa hal, yaitu:
1. About Me: elemen ini memuat informasi pribadi terkait dengan karakteristik saya.
Terdapat nama, nama panggilan, Pendidikan saya, organisasi yang saya ikut, hobi,
prestasi, dan juga cita-cita saya. Tujuannya adalah untuk memperkenalkan diri saya
lebih jauh lagi kepada para pengunjung website saya
Ridhagustia 1 B1A022052
2. My Skills: Bagian ini mencakup apa saja kemampuan yang saya miliki, dengan tujuan
untuk meyakinkan orang-orang yang ingin mengenali saya.
3. Certificate: Berisikan dokumentasi dari prestasi-prestasi yang saya miliki.
4. Pendidikan: Membaritahu Pendidikan apa yang sedang saya temput saat ini.
5. Contact, Birthday, Lokasi
2. Tampilan Code html

Print Screen
Gambar 2.1 Index.html Source Code
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ridhagustia's Website</title>
<link rel="shortcut icon" href="./assets/images/Ridha.jpg" type="image/x-icon">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<main>
<aside class="sidebar" data-sidebar>
<div class="sidebar-info">
<figure class="avatar-box">
<img src="./assets/images/Ridhaaa.jpg" alt="Ridhagustia" width="20">
</figure>
<div class="info-content">
<h1 class="name" title="Richard hanrick">Ridhagustia</h1>
<p class="title">Mahasiswa Ilmu Hukum</p>
</div>
<button class="info_more-btn" data-sidebar-btn>
<span>Show Contacts</span>
<ion-icon name="chevron-down"></ion-icon>
</button>
</div>
<div class="sidebar-info_more">
<div class="separator"></div>
<ul class="contacts-list">
<li class="contact-item">
<div class="icon-box">
<ion-icon name="mail-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Email</p>
<a href="mailto:richard@example.com" class="contact-
link">ridhagustia09@gmail.com</a>
</div>
</li>
<ion-icon name="phone-portrait-outline"></ion-icon>
</div>
<p class="contact-title">Phone</p>
<a href="tel:+12133522795" class="contact-link">08975799517
</a>
</div>
</li>
<ion-icon name="calendar-outline"></ion-icon>
</div>
<p class="contact-title">Birthday</p>
<time datetime="1982-06-23">August 9, 2002</time>
</div>
</li>
<ion-icon name="location-outline"></ion-icon>
</div>
<p class="contact-title">Location</p>
<address>Kandang Limun, Kota Bengkulu, Bengkulu,
indonesia</address>
</div>
</li>
</ul>
<div class="separator"></div>
<ul class="social-list">
<li class="social-item">
<a href="#" class="social-link">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
</ul>
</div>
</aside>
<div class="main-content">
<nav class="navbar">
<ul class="navbar-list">
<li class="navbar-item">
<button class="navbar-link active" data-nav-link>About</button>
</li>
<li class="navbar-item">
<button class="navbar-link" data-nav-link>Contact</button>
</li>
</ul>
</nav>
<article class="about active" data-page="about">
<header>
<h2 class="h2 article-title">About me</h2>
</header>
<section class="about-text">
<p>
Hai nama saya Ridhagustia biasanya di panggil Ridha, sekarang saya adalah
mahasiswa aktif di salah satu perguruan tinggi di Bengkulu tepatnya di fakultas hukum.
Saya mengikuti berbagai organisasi, Menjadi anggota kesekretariatan paralegal dan juga
anggota dari kaderisasi wami. Saya memiliki hobby berolahraga tepatnya pada olahraga
Volly, waktu saya duduk di bangku sekolah dasar, saya pernah mengikuti lomba Volly dan
mendapatkan juara 1, motto hidup saya dapat bermanfaat untuk orang banyak juga tujuan
hidup saya menjadi orang yang sukses lahir dan batin. Cita2 saya adalah berkerja di bidang
hukum dan bisa mendirikan kantor hukum milik pribadi
</p>
</section>
<section class="service">
<h3 class="h3 service-title">My Skills</h3>
<ul class="service-list">
<li class="service-item">
<div class="service-icon-box">
<img src="./assets/images/icon-design.svg
" alt="design icon" width="40">
</div>
<div class="service-content-box">
<h4 class="h4 service-item-title">Publik Speaking</h4>
<p class="service-item-text">
"Kuasailah panggung, katakanlah dengan percaya diri." "Suara yang
gemetar, tak mampu menembus batas mimpi."
</p>
</div>
</li>
<img src="./assets/images/icon-dev.svg" alt="Web development icon"
width="40">
</div>
<h4 class="h4 service-item-title">Crictical Thinking</h4>
"Ketika kita berpikir kritis, kita melampaui pandangan permukaan
dan menemukan inti dari masalah."
</p>
</div>
</li>
<img src="./assets/images/icon-app.svg" alt="mobile app icon"
width="40">
</div>
<h4 class="h4 service-item-title">Penegak Hukum yang Adil</h4>
"Karena Adil bukan privilese, tapi hak setiap individu dalam hidup
ini."
</p>
</div>
</li>
<img src="./assets/images/icon-photo.svg" alt="camera icon"
width="40">
</div>
<h4 class="h4 service-item-title">Penegak Hukum Bijaksana</h4>
"Kebijaksanaan bukanlah sekadar pengetahuan, tetapi juga
penerapannya dalam kehidupan sehari-hari, menjalankan tindakan yang paling bijak dalam
setiap situasi."
</p>
</div>
</li>
</ul>
</section>
<section class="testimonials">
<h3 class="h3 testimonials-title">Testimonials</h3>
<ul class="testimonials-list has-scrollbar">
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="testimonials-avatar-box">
<img src="./assets/images/avatar-1.png" alt="Daniel lewis"
width="60" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>Me</h4>
<div class="testimonials-text" data-testimonials-text>
<p>
Ridhagustia B1A022052
</p>
</div>
</div>
</li>
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="testimonials-avatar-box">
<img src="./assets/images/avatar-2.png" alt="Jessica miller"
width="60" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-
title>Pendidikan</h4>
<div class="testimonials-text" data-testimonials-text>
<p>
S-1 Ilmu Hukum, Fakultas Hukum, Universitas Bengkulu
</p>
</div>
</div>
</li>
<div class="modal-container" data-modal-container>
<div class="overlay" data-overlay></div>
<section class="testimonials-modal">
<button class="modal-close-btn" data-modal-close-btn>
<ion-icon name="close-outline"></ion-icon>
<section class="Certificate">
<h3 class="h3 Certificate-title">Certificate</h3>
<ul class="Certificate-list has-scrollbar">
<li class="Certificate-item">
<a href="#">
<img src="./assets/images/Sertif1.png" alt="client logo">
</a>
</li>
<a href="#">
<img src="./assets/images/sertif2.png" alt="client logo">
</a>
</li>
<a href="#">
<img src="./assets/images/logo-3-color.png" alt="client logo">
</a>
</li>
</ul>
</section>
</article>
<article class="contact" data-page="contact">
<header>
<h2 class="h2 article-title">Contact</h2>
</header>
<section class="mapbox" data-mapbox>
<figure>
<h3 class="h3 form-title">Contact Form</h3>
<form action="#" class="form" data-form>
<div class="input-wrapper">
<input type="text" name="fullname" class="form-input"
placeholder="Full name" required data-form-input>
<input type="email" name="email" class="form-input"
placeholder="Email address" required data-form-input>
</div>
<textarea name="message" class="form-input" placeholder="Your
Message" required data-form-input></textarea>
<button class="form-btn" type="submit" disabled data-form-btn>
<ion-icon name="paper-plane"></ion-icon>
<span>Send Message</span>
</button>
</form>
</section>
</article>
</div>
</main>
<script src="./assets/js/script.js"></script>
<script type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></
script>
</body>
</html>
KEMENTRIAN RISET, TEKNOLOGI DAN PENDIDIKAN
UNIVERSITAS BENGKULU
FAKULTAS HUKUM
PROGRAM STUDI ILMU HUKUM
Jalan W.R. Supratman Kandang Limun Bengkulu
Bengkulu 38371 A Telepon : (0736) 344087, 22105-227
LEMBAR ACC KOMPUTER DAN PEMROGRAMAN
Nama Mahasiswa : Ridhagustia
NPM : B1A022052
Dosen : Arie VAtresia, S.T., M.TI, Ph.D.

Asisten : Randi Julian Saputra (G1A019066)
Laporan Praktikum
Hari/Tanggal Laporan diberikan Tanda ACC
Laporan Tugas
Tanggal ACC :

B1A022052 Ridhagustia

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

B1A022052 Ridhagustia

Diunggah oleh

Hak Cipta:

Format Tersedia

TUGAS PEMBUATAN WEBSITE PROFIL DIRI

KOMPUTER DAN PEMROGRAMAN (CODING)

NAMA ASISTEN DOSEN :

PROGRAM STUDI ILMU HUKUM

Gambar 1 Tampilan Website

2. Tampilan Code html

Gambar 2.1 Index.html Source Code

LEMBAR ACC KOMPUTER DAN PEMROGRAMAN

Nama Mahasiswa : Ridhagustia

Dosen : Arie VAtresia, S.T., M.TI, Ph.D.

Hari/Tanggal Laporan diberikan Tanda ACC

Anda mungkin juga menyukai