CommunityOfCoders · amimayo · Mar 9, 2025
diff --git a/Easy/MayureshSurveIssue5/FOTR.jpeg b/Easy/MayureshSurveIssue5/FOTR.jpeg
diff --git a/Easy/MayureshSurveIssue5/Friend.jpeg b/Easy/MayureshSurveIssue5/Friend.jpeg
diff --git a/Easy/MayureshSurveIssue5/LOTRCon.jpeg b/Easy/MayureshSurveIssue5/LOTRCon.jpeg
diff --git a/Easy/MayureshSurveIssue5/LOTRMRDark.jpeg b/Easy/MayureshSurveIssue5/LOTRMRDark.jpeg
diff --git a/Easy/MayureshSurveIssue5/LOTRMTLight.jpeg b/Easy/MayureshSurveIssue5/LOTRMTLight.jpeg
diff --git a/Easy/MayureshSurveIssue5/RBOW1.jpeg b/Easy/MayureshSurveIssue5/RBOW1.jpeg
diff --git a/Easy/MayureshSurveIssue5/RBOW2.jpeg b/Easy/MayureshSurveIssue5/RBOW2.jpeg
diff --git a/Easy/MayureshSurveIssue5/RBOW3.jpeg b/Easy/MayureshSurveIssue5/RBOW3.jpeg
diff --git a/Easy/MayureshSurveIssue5/ROTK.jpeg b/Easy/MayureshSurveIssue5/ROTK.jpeg
diff --git a/Easy/MayureshSurveIssue5/TWT.jpeg b/Easy/MayureshSurveIssue5/TWT.jpeg
diff --git a/Easy/MayureshSurveIssue5/index.html b/Easy/MayureshSurveIssue5/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>The Lord Of The Rings</title>
+        <meta name="description" content="LOTR Flip Cards">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" type="image/jpeg" href="LOTRCon.jpeg">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=Yatra+One&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="lotr.css">
+    </head>
+
+    <body>
+
+        <div class="Door">
+            <img class="friend" src="Friend.jpeg">
+            <h2>Speak Friend and Enter!</h2>
+          <input class="userp" type="username" placeholder="">
+          <button class="speak" onclick="checkp()">Speak</button>
+          <p class="Incorrectp">You Shall Not Pass!</p>
+        </div>
+
+        <div class="Middle-Earth">
+        <header>
+          <div class="title">
+            <h1>The Lord Of The Rings
+            </h1>
+            <h2>By J.R.R. Tolkien</h2>
+          </div>
+            <h3 class="heading">Dark/Light Mode Toggle</h3>
+                <button class="mode" onclick="toggle()">
+                    <img class="btn"  src="LOTRCon.jpeg">
+                </button>
+        </header>
+      <div class="LOTR">
+      <div class="card">
+        <div class="flipcard">
+            <img class="front" src="RBOW1.jpeg">
+            <img class="back" src="FOTR.jpeg">
+        </div>
+        </div>
+        <div class="card">
+        <div class="flipcard">
+            <img class="front" src="RBOW2.jpeg">
+            <img class="back" src="TWT.jpeg">
+       </div>
+        </div>
+        <div class="card">
+       <div class="flipcard">
+           <img class="front" src="RBOW3.jpeg">
+           <img class="back" src="ROTK.jpeg">
+       </div>
+        </div>
+      </div>
+        </div>
+
+        <script>
+
+            function checkp() {
+              const inputp = document.querySelector('.userp').value;
+
+              if(inputp == "Mellon" || inputp == "mellon" || inputp == "friend") {
+                document.querySelector('.Door').style.display = "none";
+                document.querySelector('.Middle-Earth').style.display = "block";
+              }
+
+              else{
+                document.querySelector('.Incorrectp').style.display = "block";
+              }
+
+            }
+
+            function toggle() {
+                document.querySelector('.Middle-Earth').classList.toggle('mormode');
+                document.querySelector('.btn').classList.toggle('move');
+            }
+        </script>
+    </body>
+</html>
diff --git a/Easy/MayureshSurveIssue5/lotr.css b/Easy/MayureshSurveIssue5/lotr.css
@@ -0,0 +1,142 @@
+*{
+    margin: 0;
+    padding:0;
+    font-family: "Uncial Antiqua";
+}
+
+body{
+    background-color: black;
+    overflow-x: hidden;
+}
+
+.Door{
+    margin-top: 9em;
+    margin-left: 33.75%;
+    position: absolute;
+    width: 25em;
+    height: 15em;
+    color: rgb(14, 150, 205);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 2em;
+    gap: 1em;
+    box-shadow: none;
+}
+
+.friend{
+    width: 20em;
+    height: 25em;
+}
+
+.speak{
+    text-align: center;
+    padding: 0.5em;
+    outline: 3px solid  rgb(152, 134, 16);
+
+}
+
+.Incorrectp{
+    color: rgb(192, 37, 37);
+    display: none;
+}
+
+.Middle-Earth{
+    background-image: url(LOTRMTLight.jpeg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 100vw;
+    height: 100vh;
+    overflow-x: hidden;
+    display: none;
+}
+
+header{
+    text-align: center;
+    margin-top: 2em;
+    color: rgb(186, 184, 49);
+}
+
+.title{
+    padding: 0.1em;
+    outline: 3px solid rgb(192, 37, 37);
+}
+
+.heading{
+    margin-top: 2em;
+    color: rgb(183, 167, 24);
+}
+
+button{
+   margin-top: 2em;
+   width: 12em;
+   height: 4.25em;
+   background-color:rgb(230, 185, 80); 
+   border: none;
+   border-radius: 3em;
+   padding-right: 5em;
+}
+
+button:focus{
+    border: 0;
+    outline: 0;
+}
+
+.btn{
+    width: 4.25em;
+    height: 4.25em;
+    margin-bottom: 0;
+    outline: 2px solid rgb(152, 134, 16);
+    border-radius: 3em;
+    padding-left: 1.25em;
+    padding-right: 1.25em;
+    transition: transform 0.55s ease-in-out;
+}
+
+.move{
+    transform:translateX(5em);
+}
+
+.LOTR{
+    padding: 4em;
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    gap: 75px;
+    align-items: center;
+}
+
+.card{
+    width: 14em;
+    height: 21em;
+    perspective: 1200px;
+}
+
+.flipcard{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+}
+
+.front, .back{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    backface-visibility: hidden;
+    padding: 1em;
+}
+
+.card:hover .flipcard{
+    transform: rotateY(180deg);
+}
+
+.back{
+    transform: rotateY(180deg);
+}
+
+.mormode{
+    background-image:url(LOTRMRDark.jpeg);
+}