ngajar/web-basic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tambahan kelas sore

Browse Source
This commit is contained in:
Dita Aji Pratama 2025-03-05 21:12:56 +07:00
parent d404a1cf20
commit 4c095d2711
6 changed files with 97 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
about.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/article.css" />
<link rel="stylesheet" href="css/profile.css" />
</head>
<body>
@ -34,9 +35,22 @@
<a class="menu-item" href="contact.html">Contact</a>
</div>
</nav>
<div class="container-profile">
<div class="profile-header">
<h1>Es Kuwut</h1>
</div>
<div class="profile-message">
<p>Es kuwut merupakan sejenis minuman koktail dingin khas Bali yang terbuat dari air kelapa yang dicampur dengan serutan kelapa, serutan melon atau timun, biji selasih, perasan jeruk nipis, sirup melon, es batu dan terkadang ditambahkan susu, santan, atau nata de coco.</p>
<p>Penamaan kuwut sendiri berarti daging kelapa atau kelapa. Minuman ini merupakan minuman asli Bali yang kini dapat ditemui dan populer di seluruh Indonesia. Bagi orang-orang yang tidak mampu membeli melon, atau pedagang yang ingin menurunkan harga dagang, terkadang melon digantikan dengan serutan timun. Dalam pembuatan es kuwut, penggunaan sirup melon dapat digantikan dengan bahan lain seperti gula yang dicairkan atau sirup berperisa leci atau jeruk. Air kelapa yang digunakan juga dapat ditambahkan susu kental manis. Variasi es kuwut kekinian juga kian variatif, terkadang nata de coco, jeli, potongan buah naga atau semangka ditambahkan dalam es kuwut.</p>
</div>
<div class="profile-image">
<img src="https://foto.kontan.co.id/Af65DnPyU1WaK9hSyL3zWGMVKhw=/smart/2024/03/14/1703599507p.jpg" alt="">
</div>
</div>
<div class="container">
<h1 class="judul"><u>Our Team</u></h1>
<h1 class="judul"><u>Our Team (Pagi)</u></h1>
<div class="team-profile">
<div>
@ -67,5 +81,34 @@
</div>
</div>
<div class="container">
<h1 class="judul"><u>Our Team (Sore)</u></h1>
<div class="team-profile">
<div>
<img src="https://doodleipsum.com/700x700/avatar-5?i=3fb5f8acc680a523b0e4709192c7333b" alt="">
<h2>Avii</h2>
<p>
<a href="#">Instagram</a> | <a href="#">Linkedin</a> | <a href="#">Tiktok</a>
</p>
</div>
<div>
<img src="https://doodleipsum.com/700x700/avatar-5?i=330517b8fa833af9099cf11f29f69bc6" alt="">
<h2>Vivin</h2>
<p><a href="#">Instagram</a> | <a href="#">Linkedin</a> | <a href="#">Tiktok</a></p>
</div>
<div>
<img src="https://doodleipsum.com/700x700/avatar-5?i=3866b029457817a8d3bdd26ebba02cbc" alt="">
<h2>Hamdi</h2>
<p><a href="#">Instagram</a> | <a href="#">Linkedin</a> | <a href="#">Tiktok</a></p>
</div>
<div>
<img src="https://doodleipsum.com/700x700/avatar-5?i=64c93dfe447c5a5251b02d295fa0b46f" alt="">
<h2>Nathan</h2>
<p><a href="#">Instagram</a> | <a href="#">Linkedin</a> | <a href="#">Tiktok</a></p>
</div>
</div>
</div>
</body>
</html>

3
article.html
View File

@ -40,7 +40,7 @@
<div>
<h2 class="judul"><u>Article</u></h2>
</div>
<aside>
<aside class="side-left">
<ul>
<li><a href="#">Pertamax dioplos, warga pindah ke Shell</a></li>
<li><a href="#">Ditemukan kehidupan baru di planet Mars</a></li>
@ -53,6 +53,7 @@
<p>"Kami ingin memastikan apakah konsumen itu mendapatkan produk sesuai yang dijanjikan oleh Pertamina atau tidak," kata Wakil Ketua Komisi VI DPR dari Fraksi PDIP Adisatrya Suryo Sulisto di lokasi, Senin, 3 Maret 2025.</p>
<p>Adisatrya mengatakan pihaknya menggeruduk SPBU Pertamina karena mendengar keluhan dari masyarakat. Pasalnya, berkembang narasi bahwa kualitas BBM RON 92 atau Pertamax setara RON 90 atau Pertalite.</p>
</article>
<aside class="side-right">Test</aside>
<footer>Copyright (c) 2025 Widuri News</footer>
</main>
</div>

19
css/article.css
View File

@ -2,21 +2,26 @@
.container-article {
display: grid;
grid-template-areas:
"header header"
"menu article"
"footer footer";
grid-template-columns: 1fr 3fr;
"header header header"
"menuleft article menuright"
"footer footer footer";
grid-template-columns: 1fr 4fr 1fr;
gap:20px;
padding: 5px;
padding: 0px;
/* background-color: #ff9999; */
}
.container-article > div {
/* background-color: #bbb; */
grid-area: header;
}
.container-article > aside {
.container-article > aside.side-left {
background-color: #bbb;
grid-area: menu;
grid-area: menuleft;
padding: 10px;
}
.container-article > aside.side-right {
background-color: #bbb;
grid-area: menuright;
padding: 10px;
}
.container-article > article {

37
css/profile.css Normal file
View File

@ -0,0 +1,37 @@
.container-profile {
display: grid;
grid-template-areas:
"header header"
"message image";
grid-template-columns: 3fr 2fr;
margin-inline: 100px;
margin-top: 30px;
margin-bottom: 40px;
}
.profile-header {
grid-area: header;
}
.profile-message {
grid-area: message;
}
.profile-image {
grid-area: image;
}
.profile-image > img {
width: 100%;
}
/* Responsive */
@media only screen and (max-width: 600px) {
.container-profile {
grid-template-areas:
"header"
"image"
"message";
grid-template-columns: 1fr;
margin-inline: 40px;
}
}

1
css/style.css
View File

@ -8,7 +8,6 @@
body {
margin:0;
padding:0;
}
.container {

2
index.html
View File

@ -36,6 +36,7 @@
<div class="container">
<h2>Pemrograman Web</h2>
<h3>Alternative element div</h3>
<mark>header</mark> buat header diatas <br>
<mark>nav</mark> buat menu navigasi <br>
@ -43,6 +44,7 @@
<mark>article</mark> buat artikel <br>
<mark>section</mark> Buat section, contoh: Call-to-Action, Testimonial, Our Clients, etc <br>
<mark>main</mark> Buat container / bagian utamanya <br>
<mark>address</mark> Buat menampilkan alamat <br>
<mark>footer</mark> Buat footer bagian bawah <br>
<hr>