bruhh

valentino-setiawan · Aug 4, 2024 · e4cd5ea · e4cd5ea
commit e4cd5ea
Show file tree

Hide file tree

Showing 8 changed files with 262 additions and 0 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "firefox",
+            "request": "launch",
+            "name": "Launch Firefox against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/MPP/Source/AmazingSightAhead.jpg b/MPP/Source/AmazingSightAhead.jpg
diff --git a/MPP/Source/Untitled design.png b/MPP/Source/Untitled design.png
diff --git a/MPP/Source/img.jpg b/MPP/Source/img.jpg
diff --git a/MPP/dafaganteng.html b/MPP/dafaganteng.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dafament</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div class="border">
+        <h1>Archive of Our Lord Departed</h1>
+    </div>
+
+    <!-- <div class="lt"></div>
+    <div class="rt"></div> -->
+
+    <div id="L1">
+        <h3>Website Standards and Practices</h3>
+        <ul>
+            <li id="e">
+                <a href="https://unicorn-utterances.com/collections/framework-field-guide-fundamentals">
+                    Learning to use the Big 3 JS Frameworks/Libraries.
+                </a>
+            </li><br>
+
+            <li>
+                <a href="https://css-tricks.com/the-great-divide/">
+                    Understanding the evolution and divergences of being a Front-end Developer.
+                </a>
+            </li><br>
+
+            <li>
+                <a href="https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/">
+                    Taking a deeper dive into the branching roles and responsibilities of a Front-end Developer.
+                </a>
+            </li><br>
+
+            <li>
+                <a href="https://youtu.be/a_1cV7hg5G8">
+                    Learning the history of crafting Web Apps and their present use.
+                </a>
+            </li><br>
+
+            <li>
+                <a href="https://youtu.be/8sXRyHI3bLw">
+                    The best tools and resources for Web Development in 2024 along with their use-cases.
+                </a>
+            </li><br>
+
+
+        </ul>
+
+    </div>
+    <div>
+        <h3>DevOps and understanding Web/App procedures</h3>
+        <ul>
+            <li>
+                <a href="https://software.endy.muhardin.com/manajemen/aplikasi-prakarya-vs-aplikasi-production/">
+                    Understanding the differences and expectations of a theoretical and production App.
+                </a>
+            </li><br>
+
+            <li>
+                <a href="https://graphite.dev/blog/stacked-prs>">
+                    Joint Development Cycles and overcoming their hurdles.
+                </a>
+            </li><br>
+
+        </ul>
+        <h3>Scholarship and Extra Study programs and opportunities</h3>
+        <ul>
+            <li>
+                <a href="https://aws.dicoding.com/">
+                    Learn how to use AWS for Web/App infrastructure and Back-End Development
+                </a>
+            </li><br>
+        </ul>
+    </div>
+    <div class="IllusoryPath">
+        <summary>Thanks for taking the time to use this website, any suggestions for materials? contact us at @CypherArchives.</summary>
+        <details><summary></summary>
+            <p id="LawOfProgression">Nothing more here, go on back</p>
+            <p>Guess you aren't easily deterred</p>
+            <img src="Source/AmazingSightAhead.jpg">
+        </details>
+
+    </div>
+
+
+
+</body>
+</html>
diff --git a/MPP/style.css b/MPP/style.css
@@ -0,0 +1,52 @@
+
+body {
+    margin-top: 0px;
+    margin-bottom: 150px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    box-sizing: border-box;
+
+}
+
+.border {
+    border-bottom: #0070E0 2px solid;
+    position: relative;
+    top: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* padding: 0px 5svh; */
+
+}
+
+#L1 {
+    max-width: 579.583px;
+}
+
+ul a:visited {
+    color: #0070E0 ;
+    text-decoration: none;
+}
+
+li {
+
+}
+
+#LawOfProgression {
+    margin-bottom: 800px;
+}
+
+.lt {
+    position: sticky;
+    margin-left: 0px;
+    height: 10px;
+    width: 80px;
+    border: #0070E0 solid 2px;
+    background-image: url(Source/Untitled\ design.png);
+}
+
+.rt {
+    border: #0070E0 solid 2px;
+}
diff --git a/test2/REAL-casing.html b/test2/REAL-casing.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Choose Realme</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+        }
+
+        .container {
+            width: 80%;
+            margin: auto;
+            overflow: auto;
+            padding: 20px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            background-color: #fff;
+        }
+
+        .realme-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            grid-gap: 20px;
+        }
+
+        .realme-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 20px;
+            box-shadow: 0 0 10px rgba(255, 0, 0, 0.1);
+            background-color: #fff;
+            cursor: pointer;
+            transition: 0.3s;
+        }
+
+        .realme-item:hover {
+            transform: translateX(-10px);
+        }
+
+        .realme-item img {
+            width: 100%;
+            height: auto;
+        }
+
+        .realme-item h3 {
+            margin: 10px 0;
+            font-size: 18px;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Choose Your  casing for samsung</h1>
+        <div class="realme-container">
+            <div class="realme-item">
+                <img src="https://shopgoto.com/cdn/shop/products/610214673282_GoTo_Dot-45-Case_Samsung_Galaxy-A03s_Black_Back_1200x.jpg?v=1645137661" alt="casing for samsung A03s">
+                <h3> casing for samsung A03s</h3>
+                <h5>Rp 150.000</h5>
+            </div>
+            <div class="realme-item">
+                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_eRNZ2y2i-x7dqyL2ZNQQiLwLEToazKKaNQ&usqp=CAU" alt="casing for samsungA54 ">
+                <h3>casing for samsung A54</h3>
+                <h5>Rp 325.000</h5>
+            </div>
+            <div class="realme-item">
+                <img src="data:image/jpeg;base64,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" alt="casing for samsungs23">
+                <h3>casing for samsung s23</h3>
+                <h5>Rp 450.000</h5>
+            </div>
+            <div class="realme-item">
+                <img src="https://images.tokopedia.net/img/cache/700/VqbcmM/2022/3/11/a4ba8434-f25a-44db-b9a3-81a41d2e31aa.jpg" alt="casing for samsungs22">
+                <h3>casing for samsung s22</h3>
+                <h5>Rp 250.000</h5>
+            </div>
+            <div class="realme-item">
+                <img src="data:image/jpeg;base64,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" alt="casing for samsungs23+">
+                <h3>casing for samsungs23+</h3>
+                <h5>Rp 500.000</h5>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/test2/UNI-MAT.HTML b/test2/UNI-MAT.HTML
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>This is a page title</title>
+</head>
+<body>
+
+	<p id="mainText">
+    This is the page body
+		<span class="bolded">and it contains</span>
+		a lot of various content within
+    <span class="bolded">the DOM</span>
+	</p>
+</body>
+</html>