Merge pull request #162 from Manav173/about

Added an About Page
Dev-tanay · Jun 3, 2024 · 5338590 · 5338590
2 parents f42b747 + e40eeec
commit 5338590
Show file tree

Hide file tree

Showing 5 changed files with 242 additions and 1 deletion.
diff --git a/about.css b/about.css
diff --git a/about.html b/about.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>About The Game - Rubik Cube</title>
+  <link rel="stylesheet" href="about.css">
+</head>
+<body>
+  <header class="header">
+    <a href="index.html" class="btn--about">Back to Game</a>
+  </header>
+
+  <div class="content"
+  <h1 class="text--title" style="text-align: center;">
+    <span>About The Game</span>
+  </h1>
+</div>
+
+  <div class="content">
+    <div class="text">
+      <div class="about-text--content">
+        <p>This website is dedicated to providing you with the best Rubik's Cube solving experience. Our team is passionate about puzzles and games, and we strive to create tools and resources that enhance your enjoyment and skill development.</p>
+        <p>Whether you're a beginner or an experienced solver, we hope you find our website helpful and enjoyable. Feel free to explore the various features and settings of our Rubik's Cube solver and let us know if you have any feedback or suggestions!</p>
+        <h1>About Rubik's Cubes</h1>
+
+        <p>Welcome to the "About" page for Rubik's Cubes! Here, you'll find comprehensive information about Rubik's Cubes, including their history, basic concepts, solving methods, and more.</p>
+
+        <h2 class="subheading">History</h2>
+        <p>The Rubik's Cube, invented by Ernő Rubik in 1974, is a 3D combination puzzle that has fascinated millions of people worldwide. Originally called the "Magic Cube," it gained immense popularity after being licensed to the Ideal Toy Corporation in 1980 and rebranded as the "Rubik's Cube."</p>
+
+        <h2 class="subheading">Basic Concepts</h2>
+        <p>A standard Rubik's Cube consists of six faces, each covered by nine stickers of one of six solid colors: white, red, blue, orange, green, and yellow. The goal is to solve the cube by rotating the faces until each face is a solid color.</p>
+
+        <h2 class="subheading">Solving Methods</h2>
+        <p class="subtopic">There are several methods for solving Rubik's Cube, including:</p>
+        <ul class="subtopic">
+        <li>Fridrich Method (CFOP)</li>
+        <li>BEGINNER Method</li>
+        <li>Roux Method</li>
+        <li>ZB Method</li>
+        </ul>
+
+        <h2 class="subheading">Advanced Techniques</h2>
+        <p class="subtopic">Advanced cubers often utilize techniques such as:</p>
+        <ul class="subtopic">
+        <li>OLL (Orientation of Last Layer)</li>
+        <li>PLL (Permutation of Last Layer)</li>
+        <li>F2L (First Two Layers)</li>
+        <li>X-Cross</li>
+        <li>OLLCP (OLL plus Corner Permutation)</li>
+        </ul>
+        <br>
+
+      <h2 class="subheading">Formulas and Algorithms</h2>
+      <br>
+      <div class="formula">
+        <h3>The Cross</h3>
+        <p>Formula: <code>F R U R' U' F'</code></p>
+      </div>
+      <div class="formula">
+        <h3>First Layer Corners</h3>
+        <p>Formula: <code>R U R' U R U2 R'</code></p>
+      </div>
+      <div class="formula">
+        <h3>Second Layer Edges (F2L)</h3>
+        <p>Formula: <code>R U R' U' R U' R'</code></p>
+      </div>
+      <div class="formula">
+        <h3>Orientation of Last Layer (OLL)</h3>
+        <p>Formula: <code>F R U R' U' F'</code></p>
+      </div>
+      <div class="formula">
+        <h3>Permutation of Last Layer (PLL)</h3>
+        <p>Formula: <code>R U2 R' U' R U R' U' R U' R'</code></p>
+      </div>
+  </div>
+
+  <footer class="footer">
+    <p class="text--footer">© 2024 Rubik-Cube</p>
+  </footer>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -11,7 +11,9 @@
 
 </head>
 <body>
-
+  <header class="ui__header header"> <!-- Added "header" class -->
+    <a href="about.html" class="btn--about">About Us</a>
+  </header>
   <!-- separate div element for the goggle sign-in/log-in element -->
   <!-- g_id_onload is for automatic loading of the Google Identity Services. -->
   <div id="g_id_onload"

diff --git a/package-lock.json b/package-lock.json
diff --git a/style.css b/style.css
@@ -365,4 +365,18 @@ body {
 
 .g_id_signin {
   margin-top: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  color: #333;
+  z-index: 10;
+}
+
+.btn--about {
+  position: relative;
+  z-index: 10; /* Ensure it's on top */
 }