QUIZ 1 PWEB ALDO
Assalamualaikum Wr. Wb.
Nama: Lalu Aldo Wadagraprana
NRP: 5025221101
Kelas: Pemrograman Web A
Dalam Postingan kali ini saya telah mengerjakan QUIZ 1 Pemrograman Web yaitu membuat HTML dan CSS yang berisikan Website Copany Profile Sederhana
Berikut adalah tampilan untuk Course Web yang telah dibuat menggunakan HTML dan CSS:
Dalam Website Company Profile ini dibuat dengan HTML dan CSS secara terpisah,
Tampilan Lengkapnya dapat di cek dalam Web Berikut ini: https://wadagraprana.github.io/PemrogramanWeb_Quiz1/Quiz1Aldo.html
Adapun source code HTML untuk web di atas adalah sebagai berikut:
https://github.com/Wadagraprana/PemrogramanWeb_Quiz1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LBH Nusantara Jaya</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="Profile">
<div class="wrapper_profile">
<td rowspan="5" align="center"><img src="LBH.png" width="100"></td>
</div>
</div>
<ul class="nav">
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Layanan</a></li>
<li id="Pages">
<a href="#">Pages</a>
<ul class="subnav">
<li><a href="#">Portofolio</a></li>
<li><a href="#">Testimoni</a></li>
</ul>
</li>
<li><a href="#">Kontak</a></li>
</ul>
</header>
<section id="content">
<h2>LBH Nusantara Jaya</h2>
<p>Memberikan Pelayanan Hukum Gratis Bagi Masyarakat Kurang Mampu</p>
</section>
<section id="services">
<h2>Layanan Hukum</h2>
<ul>
<li>Bantuan Hukum</li>
<li>Pendampingan Hukum</li>
<li>Konsultasi Hukum</li>
</ul>
</section>
<section id="portfolio">
<h2>Portofolio</h2>
<div class="portfolio-item">
<img src="Konsultasi Hukum.jpg" alt="Deskripsi Gambar 1">
<p>Layanan jasa konsultan hukum kami berikan sesuai dengan permasalah dan atau kasus yang sedang dihadapi oleh klien, sehingga akan menghasilkan upaya hukum yang efektif dan maksimal untuk menyelesaikan pemasalahan atau kasus hukum yang ada. </p>
</div>
<div class="portfolio-item">
<img src="Pendampingan Hukum.jpg" alt="Deskripsi Gambar 2" width="600px">
<p>LBH hadir membantu anda dalam pendampingan proses mediasi</p>
</div>
</section>
<section id="contact">
<h2>Kontak Kami</h2>
<p>Silakan hubungi kami melalui formulir kontak di bawah ini:</p>
<form action="proses.php" method="post">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" rows="4" required></textarea>
<button type="submit">Kirim</button>
</form>
</section>
<footer>
<p>© 2023 LBH Nusantara Jaya. Hak Cipta Dilindungi.</p>
</footer>
</body>
</html>
Adapun source code CSS untuk web di atas adalah sebagai berikut:
* {
margin: 0;
padding: 0;
}
/* Penataan Umum */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
line-height: 1.6;
margin: 0 auto;
max-width: 1200px;
padding: 20px;
}
/* Header */
header {
background-color: #ac0e0e;
color: #fff;
text-align: center;
padding: 20px;
}
header h1 {
font-size: 36px;
}
/* Navigasi */
.nav {
background: #ac0e0e;
height: 60px;
display: inline-block;
}
.nav li {
float: left;
list-style-type: none;
position: relative;
}
.nav li a {
font-size: 16px;
color: white;
display: block;
line-height: 60px;
padding: 0 26px;
text-decoration: none;
border-left: 1px solid #ac0e0e;
font-family: Montserrat, sans-serif;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
background-color: #ff0000;
}
#settings a {
padding: 18px;
height: 24px;
font-size: 10px;
line-height: 24px;
}
#Pages a{
border-left: 0 none;
}
#Pages>a {
background-image: url(triangle.png);
background-position: 85% center;
background-repeat: no-repeat;
padding-right: 42px;
}
.subnav {
visibility: hidden;
position: absolute;
top: 110%;
right: 0;
width: 200px;
height: auto;
opacity: 0;
transition: all 0.1s;
background: #ac0e0e;
}
.subnav li {
float: none;
}
.subnav li a {
border-bottom: 1px solid #ffffff;
}
#Pages:hover .subnav {
visibility: visible;
top: 100%;
opacity: 1;
}
/* Sections */
section {
margin: 20px 0;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
/* Formulir Kontak */
form label {
display: block;
font-weight: bold;
margin-top: 10px;
}
form input[type="text"],
form input[type="email"],
form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
form button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
/* Footer */
footer {
text-align: center;
padding: 10px 0;
background-color: #333;
color: #fff;
}
Comments
Post a Comment