From 4c095d27118493acbf5c352c8a4a2024e8b8ab8a Mon Sep 17 00:00:00 2001 From: Dita Aji Pratama Date: Wed, 5 Mar 2025 21:12:56 +0700 Subject: [PATCH] Tambahan kelas sore --- about.html | 45 ++++++++++++++++++++++++++++++++++++++++++++- article.html | 3 ++- css/article.css | 19 ++++++++++++------- css/profile.css | 37 +++++++++++++++++++++++++++++++++++++ css/style.css | 1 - index.html | 2 ++ 6 files changed, 97 insertions(+), 10 deletions(-) create mode 100644 css/profile.css diff --git a/about.html b/about.html index d63e271..b5b8f57 100644 --- a/about.html +++ b/about.html @@ -9,6 +9,7 @@ + @@ -34,9 +35,22 @@ Contact + +
+
+

Es Kuwut

+
+
+

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.

+

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.

+
+
+ +
+
-

Our Team

+

Our Team (Pagi)

@@ -67,5 +81,34 @@
+
+

Our Team (Sore)

+
+
+ +

Avii

+

+ Instagram | Linkedin | Tiktok +

+
+
+ +

Vivin

+

Instagram | Linkedin | Tiktok

+
+
+ +

Hamdi

+

Instagram | Linkedin | Tiktok

+
+
+ +

Nathan

+

Instagram | Linkedin | Tiktok

+
+
+ +
+ \ No newline at end of file diff --git a/article.html b/article.html index 996492b..ee3a065 100644 --- a/article.html +++ b/article.html @@ -40,7 +40,7 @@

Article

-
diff --git a/css/article.css b/css/article.css index b0cdd3f..3947828 100644 --- a/css/article.css +++ b/css/article.css @@ -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 { diff --git a/css/profile.css b/css/profile.css new file mode 100644 index 0000000..dd46303 --- /dev/null +++ b/css/profile.css @@ -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; + } +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 8c98cd7..a0e62e4 100644 --- a/css/style.css +++ b/css/style.css @@ -8,7 +8,6 @@ body { margin:0; padding:0; - } .container { diff --git a/index.html b/index.html index 901871d..a9eb771 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,7 @@

Pemrograman Web

+

Alternative element div

header buat header diatas
nav buat menu navigasi
@@ -43,6 +44,7 @@ article buat artikel
section Buat section, contoh: Call-to-Action, Testimonial, Our Clients, etc
main Buat container / bagian utamanya
+ address Buat menampilkan alamat
footer Buat footer bagian bawah