feat: "added answer for quiz1"

Added Homepage, Profile,, Food,, Profile, and Tourist pages with CSS styles and images for content for quiz 1 answer.
rafaeljonathannh · Sep 26, 2024 · 86f5bee · 86f5bee
commit 86f5bee
Show file tree

Hide file tree

Showing 15 changed files with 313 additions and 0 deletions.
diff --git a/food.html b/food.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Local Food / Rafael Jonathan Raja Nicholas Harianja</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body class="fade-in">
+    <nav>
+        <ul>
+            <li><a href="/quiz1">Home</a></li>
+            <li><a href="/quiz1/profile">Profile</a></li>
+            <li><a href="/quiz1/hometown">Hometown</a></li>
+            <li><a href="/quiz1/food">Local Food</a></li>
+            <li><a href="/quiz1/tourist">Tourist Places</a></li> 
+        </ul>
+    </nav>
+
+    <div id="content">
+        <section id="food" class="section active">
+            <h1>Local Food</h1>
+            <img src="images/localfood.jpg" alt="local food" width="300">
+            <p> 
+                Arsik (Surat Batak: ᯀᯒ᯲ᯘᯂᯪ᯲) adalah salah satu hidangan khas 
+                masyarakat Batak atau yang disebut juga dengke na niarsik yang memiliki arti ikan yang dimasak hingga kering.
+                Kata "arsik" berasal dari cara memasak hidangan ini yaitu "mangarsik" yang berarti hidangan ikan disiram-siram atau diguyur selama proses memasak.
+                Masakan ini adalah simbol karunia bagi masyarakat Batak dan akan dihidangkan saat acara adat seperti pernikahan dan kelahiran. 
+                Hidangan ini disajikan dengan harapan agar orang yang menerima hidangan ini dapat memiliki hati dan perilaku yang bersih. 
+            </p>
+            <p>
+                Masakan ini dikenal pula sebagai ikan mas bumbu kuning. Ikan mas adalah bahan utama, yang dalam penyiapannya tidak dibuang sisiknya. 
+                Bumbu arsik sangat khas, mengandung beberapa komponen yang khas dari wilayah pegunungan Sumatera Utara, seperti andaliman dan asam cikala (buah kecombrang), lengkuas, dan serai. 
+                Bumbu-bumbu yang dihaluskan dilumuri pada tubuh ikan beberapa saat. Ikan kemudian dimasak dengan sedikit minyak dan api kecil hingga agak mengering. 
+                Selain ikan mas, terdapat jenis ikan lainnya yang dapat dimasak dengan cara diarsik yaitu ikan mujair dan ikan nila. Ketiga ikan ini biasa digunakan sebagai bahan utama hidangan arsik karena masyarakat Batak dengan mudah mendapatkan ikan ini di kawasan Danau Toba.
+                Menurut masyarakat batak terdahulu dalam upacara tertentu, penyajian arsik tidak boleh sembarangan, 
+                kondisi ikan harus utuh dari kepala sampai ekor, sampai sisiknya pun tidak boleh dibuang.
+            </p>
+        </section>
+    </div>
+</body>
+</html>
diff --git a/hometown.html b/hometown.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hometown / Rafael Jonathan Raja Nicholas Harianja</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body class="fade-in">
+    <nav>
+        <ul>
+            <li><a href="/quiz1">Home</a></li>
+            <li><a href="/quiz1/profile">Profile</a></li>
+            <li><a href="/quiz1/hometown">Hometown</a></li>
+            <li><a href="/quiz1/food">Local Food</a></li>
+            <li><a href="/quiz1/tourist">Tourist Places</a></li> 
+        </ul>
+    </nav>
+
+    <div id="content">
+        <section id="hometown" class="section active">
+            <h1>Hometown</h1>
+            <img src="images/map_pangaribuan.jpg" alt="Pangaribuan" width="300">
+            <p>Hometown saya adalah Pangaribuan. Pangaribuan adalah sebuah kecamatan yang terletak di kabupaten Tapanuli Utara, 
+                provinsi Sumatera Utara, Indonesia. Ibu kota kecamatan ini berada di desa Pakpahan.
+            </p>
+            <p> Terdapat 26 desa pada Kecamatan Pangaribuan yaitu :<br>
+                1. Batu Nadua<br>
+                2. Batu Manumpak<br>
+                3. Godung Borotan<br>
+                4. Harianja<br>
+                5. Huta Raja<br>
+                6. Lumban Sinaga Simatupang<br>
+                7. Lumban Sormin<br>
+                8. Najumambe<br>
+                9. Padang Parsadaan<br>
+                10. Pakpahan<br>
+                11. Pansur Natolu<br>
+                12. Parlombuan<br>
+                13. Parratusan<br>
+                14. Parsibarungan<br>
+                15. Parsorminan I<br>
+                16. Purbatua<br>
+                17. Rahut Bosi<br>
+                18. Rahut Bosi Onan<br>
+                19. Sampagul<br>
+                20. Sibingke<br>
+                21. Sigotom Dolok Nauli<br>
+                22. Sigotom Julu<br>
+                23. Sigotom Timur<br>
+                24. Silantom Jae<br>
+                25. Silantom Julu<br>
+                26. Silantom Tonga
+            </p>
+        </section>
+    </div>
+</body>
+</html>
diff --git a/images/aeksijorni.jpeg b/images/aeksijorni.jpeg
diff --git a/images/danautoba.jpg b/images/danautoba.jpg
diff --git a/images/hutanpinus.jpg b/images/hutanpinus.jpg
diff --git a/images/localfood.jpg b/images/localfood.jpg
diff --git a/images/map_pangaribuan.jpg b/images/map_pangaribuan.jpg
diff --git a/images/parapat.jpg b/images/parapat.jpg
diff --git a/images/rafael.jpg b/images/rafael.jpg
diff --git a/images/rafael1.jpg b/images/rafael1.jpg
diff --git a/images/samosir.jpeg b/images/samosir.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="fade-in">
+    <nav>
+        <ul>
+            <li><a href="/quiz1">Home</a></li>
+            <li><a href="/quiz1/profile">Profile</a></li>
+            <li><a href="/quiz1/hometown">Hometown</a></li>
+            <li><a href="/quiz1/food">Local Food</a></li>
+            <li><a href="/quiz1/tourist">Tourist Places</a></li> 
+        </ul>
+    </nav>
+
+    <div id="content">
+        <section id="home" class="section active">
+            <h1>Selamat datang di halaman utama website saya!</h1>
+            <p>Terdapat 4 menu pilihan yaitu Profile, Hometown, Local Food, dan Tourist Places. Enjoy!</p>
+        </section>
+</body>
+</html>
diff --git a/profile.html b/profile.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profile / Rafael Jonathan Raja Nicholas Harianja</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body class="fade-in">
+    <nav>
+        <ul>
+            <li><a href="/quiz1">Home</a></li>
+            <li><a href="/quiz1/profile" class="active">Profile</a></li>
+            <li><a href="/quiz1/hometown">Hometown</a></li>
+            <li><a href="/quiz1/food">Local Food</a></li>
+            <li><a href="/quiz1/tourist">Tourist Places</a></li> 
+        </ul>
+    </nav>
+
+    <div id="content">
+        <section id="profile" class="section active">
+            <h1>Profil</h1>
+            <img src="images/rafael.jpg" alt="Rafael Jonathan Raja Nicholas Harianja" width="300">
+            <p>Salam kenal! Saya adalah Rafael Jonathan Raja Nicholas Harianja. 
+                Saat ini saya sedang berkuliah di Teknik Informatika Institut Teknologi Sepuluh Nopember.
+                Saya terlahir di kota perjuangan, Surabaya dari keluarga batak pada 1 Februari 2005.  
+                Saya memiliki hobi bermusik dan olahraga.
+                Saya saat ini sedang mengambil mata kuliah Pemrograman Web (F) yang diampuh oleh Ir. Misbakhul Munir Irfan Subakti, S.Kom., M.Sc., M.Phil.
+                Saya ingin memaksimalkan tahun saya di kuliah membangun portofolio dan project terutama dibidang AI Engineering dan Cyber Security.
+            </p>
+        </section>
+    </div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,112 @@
+body, h1, p, ul, li {
+    margin: 0;
+    padding: 0;
+} */
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    line-height: 1.6;
+}
+
+nav {
+    background: linear-gradient(to right, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* gradasi keren*/
+    padding: 10px 0;
+    text-align: center;
+}
+
+
+nav ul {
+    list-style: armenian;
+}
+
+nav ul li {
+    display: inline;
+    margin-right: 20px;
+}
+/* tulisan di nav*/
+nav ul li a {
+    color: #fff;
+    text-decoration: aquamarine;
+    font-weight: bold;
+    padding: 5px 10px;
+    transition: background-color 0.3s;
+}
+
+/* nav nya bisa di hover :)*/
+nav ul li a:hover {
+    background-color: #555;
+    border-radius: 5px;
+}
+
+/* latar belakang */
+#content {
+    padding: 20px;
+    margin: 20px auto;
+    max-width: 800px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    font-family: 'Arial', sans-serif;
+    margin-bottom: 15px;
+    font-size: 26px;
+    color: #015aff;
+    transition: color 0.3s ease, transform 0.3s ease; /*ulik dikit transisi bisa dipakai di future*/
+}
+
+h1:hover {
+    color: #ff5722; 
+}
+p {
+    margin-bottom: 20px;
+    padding: 10px 15px;
+    border-left: 3px solid #0073e6; 
+    background-color: #f4f4f4;
+    text-indent: 20px;
+    font-size: 16px;
+    color: #555;
+    line-height: 1.7;
+}
+:target {
+    display: block; 
+}
+#home:target ~ #content > #home,
+#profile:target ~ #content > #profile,
+#hometown:target ~ #content > #hometown,
+#food:target ~ #content > #food,
+#tourist:target ~ #content > #tourist {
+    display: block; 
+}
+/* tambah animasi tipis tipis ganti page */
+.fade-in {
+    animation: fadeInAnimation 0.5s ease-in forwards;
+}
+
+@keyframes fadeInAnimation {
+    from {
+        opacity: 0; 
+    }
+    to {
+        opacity: 1; 
+    }
+}
+
+@media (max-width: 600px) {
+    nav ul li {
+        display: block;
+        margin-bottom: 10px;
+    }
+
+    nav ul li a {
+        display: block;
+    }
+
+    #content {
+        margin: 10px;
+        padding: 15px;
+    }
+}
+
diff --git a/tourist.html b/tourist.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tourist Places / Rafael Jonathan Raja Nicholas Harianja</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body class="fade-in">
+    <nav>
+        <ul>
+            <li><a href="/quiz1">Home</a></li>
+            <li><a href="/quiz1/profile">Profile</a></li>
+            <li><a href="/quiz1/hometown">Hometown</a></li>
+            <li><a href="/quiz1/food">Local Food</a></li>
+            <li><a href="/quiz1/tourist">Tourist Places</a></li> 
+        </ul>
+    </nav>
+
+    <div id="content">
+        <section id="tourist" class="section active">
+            <h1>Tourist Places</h1>
+            <p>Tempat wisata di sekitar Pangaribuan adalah seperti:</p>
+            <ul>
+                <li>Danau Toba - Danau vulkanik terbesar di Indonesia yang terkenal dengan keindahan alamnya.</li>
+                <img src="images/danautoba.jpg" alt="danau toba" width="300">
+                <li>Parapat - Salah satu kota kecil di tepi Danau Toba yang sering dikunjungi wisatawan.</li>
+                <img src="images/parapat.jpg" alt="parapat" width="300">
+                <li>Hutan Pinus Sibolangit - Area hutan pinus yang sejuk dan cocok untuk rekreasi keluarga.</li>
+                <img src="images/hutanpinus.jpg" alt="hutan pinus" width="300">
+                <li>Pulau Samosir - Pulau di tengah Danau Toba yang menawarkan budaya dan keindahan alam Batak.</li>
+                <img src="images/samosir.jpeg" alt="pulau samosir" width="300">
+            </ul>
+        </section>
+    </div>
+</body>
+</html>