Scribd
Upload
7 views

Index

Uploaded by

dwiana.ramadhanti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views

Index

Uploaded by

dwiana.ramadhanti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofolio Saya</title>
<!-- Link ke CSS Bootstrap 5 -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
/* Custom Styling */
.hero-section {
height: 100vh;
background: url('path-to-your-image.jpg') no-repeat center center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
color: green;
text-align: center;
}
.card-img-top {
max-height: 200px;
object-fit: cover;
}
</style>
</head>
<body>

<!-- Hero Section -->


<section class="hero-section d-flex flex-column justify-content-center align-
items-center">
<h1>Selamat datang di Portofolio Saya</h1>
<p>Desainer & Pengembang Web</p>
<a href="#about" class="btn btn-light btn-lg mt-4">Pelajari Lebih
Lanjut</a>
</section>

<!-- Tentang Saya -->


<section id="about" class="container py-5">
<div class="row">
<div class="col-lg-6">
<img src='assets/img/profileimage.jpg'
</div>
<div class="col-lg-6">
<h2>Tentang Saya</h2>
<p>Saya adalah seorang desainer dan pengembang web dengan
pengalaman dalam membangun situs web yang responsif dan menarik. Saya ahli dalam
menggunakan HTML, CSS, JavaScript, dan berbagai framework seperti Bootstrap.</p>
</div>
</div>
</section>

<!-- Proyek Saya -->


<section id="projects" class="bg-light py-5">
<div class="container">
<h2 class="text-center mb-4">Proyek Terbaru</h2>
<div class="row">
<!-- Proyek 1 -->
<div class="col-md-4 mb-4">
<div class="card">
<img src="project-image-1.jpg" class="card-img-top"
alt="Proyek 1">
<div class="card-body">
<h5 class="card-title">Proyek 1</h5>
<p class="card-text">Deskripsi singkat tentang proyek
pertama yang saya kerjakan.</p>
<a href="#" class="btn btn-primary">Lihat Detail</a>
</div>
</div>
</div>
<!-- Proyek 2 -->
<div class="col-md-4 mb-4">
<div class="card">
<img src="project-image-2.jpg" class="card-img-top"
alt="Proyek 2">
<div class="card-body">
<h5 class="card-title">Proyek 2</h5>
<p class="card-text">Deskripsi singkat tentang proyek
kedua yang saya kerjakan.</p>
<a href="#" class="btn btn-primary">Lihat Detail</a>
</div>
</div>
</div>
<!-- Proyek 3 -->
<div class="col-md-4 mb-4">
<div class="card">
<img src="project-image-3.jpg" class="card-img-top"
alt="Proyek 3">
<div class="card-body">
<h5 class="card-title">Proyek 3</h5>
<p class="card-text">Deskripsi singkat tentang proyek
ketiga yang saya kerjakan.</p>
<a href="#" class="btn btn-primary">Lihat Detail</a>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Kontak -->


<section id="contact" class="container py-5">
<h2 class="text-center mb-4">Hubungi Saya</h2>
<form>
<div class="mb-3">
<label for="name" class="form-label">Nama</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Pesan</label>
<textarea class="form-control" id="message" rows="4"
required></textarea>
</div>
<button type="submit" class="btn btn-primary">Kirim Pesan</button>
</form>
</section>

<!-- Footer -->


<footer class="bg-dark text-white text-center py-4">
<p>&copy; 2024 Portofolio Saya. Semua hak cipta dilindungi.</p>
</footer>

<!-- Link ke JavaScript Bootstrap 5 -->


<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>

You might also like