Upload files to "MohanFiles"

2025-04-23 07:43:56 -04:00 · 2025-04-23 07:43:56 -04:00 · 77a18da933
parent f4db940a17
commit 77a18da933
3 changed files with 54 additions and 0 deletions
--- a/MohanFiles/index.html
+++ b/MohanFiles/index.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="main.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="index.js"></script>
+</head>
+<body>
+
+    <main>
+        <div class="wrapper">
+          <article class="flow">
+    
+            <p class="awesome" data-element="awesome">Python</p>
+          </article>
+        </div>
+      </main>
+    
+</body>
+</html>
--- a/MohanFiles/index.js
+++ b/MohanFiles/index.js
@ -0,0 +1,12 @@
+const awesome = document.querySelector('[data-element="awesome"]');
+const intrinsicSwitch = document.querySelector("#intrinsic-switch");
+
+// Set sizing attribute based on switch
+intrinsicSwitch.addEventListener("change", () => {
+    alert("hi")
+  awesome.setAttribute(
+    "data-sizing",
+    intrinsicSwitch.checked ? "intrinsic" : "extrinsic"
+  );
+});
+
--- a/MohanFiles/main.css
+++ b/MohanFiles/main.css
@ -0,0 +1,19 @@
+.awesome {
+    border: 5px solid;
+    width: min-content;
+    font-size: 5rem;
+    font-weight: bold;
+    padding: 2rem;
+    text-transform: uppercase;
+    transform: rotate(-45deg); 
+    display: inline-block;
+    margin: 10rem 10rem 10rem 10rem;
+    animation: name duration timing-function delay iteration-count direction fill-mode;
+}
+
+  
+
+  
+  /*
+  
+