TUGAS 3 PWEB ALDO
Assalamualaikum Wr. Wb.
Nama: Lalu Aldo Wadagraprana
NRP: 5025221101
Kelas: Pemrograman Web A
Dalam Postingan kali ini saya telah mengerjakan Tugas Pemrograman Web 3 yaitu membuat HTML dan CSS yang berisikan Course Web.
Berikut adalah tampilan untuk Course Web yang telah dibuat menggunakan HTML dan CSS:
Dalam Course Web ini dibuat dengan HTML dan CSS secara terpisah, berbeda dengan Tugas 2 kemarin yang mana CSS digabung menjadi satu di dalam HTML. Pada Tugas ini terdapat 2 file yakni file HTML dan file CSS secara terpisah.
Tampilan Lengkapnya dapat di cek dalam Web Berikut ini: https://wadagraprana.github.io/PemrogramanWeb_Tugas3/Tugas3Aldo.html
Adapun source code HTML untuk web di atas adalah sebagai berikut:
https://github.com/Wadagraprana/PemrogramanWeb_Tugas3
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="Style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Tugas 2 PWEB Membuat Course Sederhana
menggunakan HTML dan CSS
Lalu Aldo Wadagraprana - 5025221101
</title>
</head>
<body>
<div class="container">
<h1>TAEKWONDO COURSE</h1>
<h3></h3>
<hr>
<!-- Content of the body-->
<h2>Kelas Oleh Lalu Aldo Wadagraprana</h2>
<h3>DAN IV Kukkiwon International</h3>
<div class="row">
<div class="column">
<div class="content">
<img src=
"Latihan Reguler.jpg"
alt="" style="width:100%">
<h3>
<a href="#">Kelas Reguler</a>
</h3>
<p>
Kelas Reguler ini adalah kelas non prestasi
prestasi. Kelas ini cocok diikuti untuk semua
kalangan usia, yang berkisar antar 5 tahun
sampai dengan 60 tahun. yang tentu saja
metode latihannya akan disesuaikan selaras
dengan usia dan tingkatan sabuk.
</p>
</div>
</div>
<div class="column">
<div class="content">
<img src=
"Kelas Prestasi.jpg"
alt="" style="width:100%">
<h3>
<a href="#">Kyorugi Prestasi</a>
</h3>
<p>
Kyorugi adalah salah satu cabang Peminatan
di Taekwondo, yang merupakan pertandingan
tarung 1vs1, dengan menggunakan full body
Protector. Kelas Kyorugi Prestasi adalah kelas
Pemusatan Latihan, diluar waktu kelas reguler
dengan fokus latihan untuk Pertandingan Kyorugi
Prestasi.
</p>
</div>
</div>
<div class="column">
<div class="content">
<img src=
"Poomsae.jpg"
alt="" style="width:100%">
<h3>
<a href="#">Poomsae Prestasi</a>
</h3>
<p>
Poomsae adalah salah satu cabang Peminatan
di Taekwondo, yang merupakan pertandingan
Pertunjukan Seni Gerakan. Kelas Poomase
Prestasi adalah kelas Pemusatan Latihan,
diluar waktu Kelas Reguler dengan fokus
latihan untuk pertandingan Poomsae Prestasi
</p>
</div>
</div>
<div class="column">
<div class="content">
<img src=
"Freestyle.jpg"
alt="" style="width:100%">
<h3>
<a href="#">Kelas Freestyle</a>
</h3>
<p>
Taekwondo Freestyle adalah cabang baru yang
merupakan pengembangan dari Poomsae yang mana
Freestyle diharuskan membuat koreografi sendiri.
Dalam Kelas Freestyle ini setiap Atlet yang
mendaftar memiliki persyaratan Tertentu salah satunya
adalah sudah bersertifikasi DAN I Kukkiwon International
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Adapun source code CSS untuk web di atas adalah sebagai berikut:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0px;
}
div.card {
width: 850px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
.container {
min-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.1);
}
/* Styling the three events section */
section .events {
width: 50%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
float: right;
box-sizing: border-box;
}
h1 {
color: green;
}
a {
text-decoration: none;
color: #5673C8;
}
a:hover {
color: lightblue;
}
/* paragraph tag decoration */
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
}
/* row and column decoration */
.row {
margin: 0px -18px;
padding: 8px;
}
.row > .column {
min-height: 480px;
padding: 6px;
}
.column {
float: left;
width: 25%;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* content decoration */
.content {
background-color: white;
padding: 8px;
border: 2px solid gray;
min-height: 250px;
}
/* window size 850 width set */
@media screen and (max-width: 800px) {
.column {
width: 50%;
}
}
/* window size 400 width set */
@media screen and (max-width: 100px) {
.column {
width: 100%;
}
}
.section {
margin-bottom: 20px;
}
.section h2 {
color: #555;
}
.section p {
line-height: 1.6;
}
.section ul {
list-style-type: disc;
margin-left: 20px;
}
.section .sub-section {
margin-left: 20px;
}
Comments
Post a Comment