Merge branch 'main' into main

Dev-tanay · Jul 23, 2024 · ef1031e · ef1031e
2 parents 56baeb9 + d000ea3
commit ef1031e
Show file tree

Hide file tree

Showing 23 changed files with 4,231 additions and 1,344 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/AboutUs/About.css b/AboutUs/About.css
@@ -1,3 +1,31 @@
+
+::-webkit-scrollbar-track
+{
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar
+{
+	width: 10px;
+	background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar-thumb
+{
+	background-color:#FF9900;
+	background-image: -webkit-linear-gradient(45deg,
+	                                          rgba(255, 255, 255, .2) 25%,
+											  transparent 25%,
+											  transparent 50%,
+											  rgba(255, 255, 255, .2) 50%,
+											  rgba(255, 255, 255, .2) 75%,
+											  transparent 75%,
+											  transparent)
+}
+
+
+
 html {
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
@@ -164,8 +192,9 @@ body {
 }
 
 .btn:hover {
-  color: rgba(0, 0, 0, 0.5);
+  color: rgb(245, 245, 245);
   transition: color 400ms ease-out;
+  background-color: #541a8be7;
 }
 
 .btn:after {
@@ -176,8 +205,8 @@ body {
   height: 3.5em;
   left: 50%;
   top: 50%;
-  margin-left: -1.75em;
-  margin-top: -1.75em;
+  margin-left: 1.75em;
+  margin-top: 1.75em;
   border-radius: 100%;
 }
 
@@ -186,13 +215,27 @@ body {
   left: 1.2em;
   opacity: 1;
   pointer-events: auto;
+  height: 60px;
+  width: 60px;
+  border-radius: 8px;
+  cursor: pointer;
+  background-color: #541a8b24;
+  padding-left: 11px;
+  padding-top: 9px;
 }
 
 .btn--gh {
   top: 1.2em;
   right: 1.2em;
   opacity: 1;
   pointer-events: auto;
+  height: 60px;
+  width: 60px;
+  border-radius: 8px;
+  cursor: pointer;
+  background-color: #541a8b24;
+  padding-left: 10px;
+  padding-top: 9px;
 }
 
 @media screen and (max-width: 768px) {
@@ -231,3 +274,54 @@ body {
     right: 1em;
   }
 }
+
+.icons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  gap: 25px;
+}
+
+.icons .icon i {
+  margin-top: 15px;
+  font-size: 30px;
+  transition: all 0.9s ease;
+}
+
+.icons .icon:hover i {
+  transform: scale(1.2);
+}
+
+.icons .icon:hover .fab.fa-facebook {
+  color: #3b5998;
+}
+
+.icons .icon:hover .fab.fa-twitter {
+  color: #090e11;
+}
+
+.icons .icon:hover .fab.fa-instagram {
+  background: radial-gradient(
+    circle at 30% 107%,
+    #fdf497 0%,
+    #fdf497 5%,
+    #fd5949 45%,
+    #d6249f 60%,
+    #285aeb 90%
+  );
+  background-clip: text;
+  border-radius: 20%;
+  transform: scale(1.5);
+  color: transparent;
+}
+
+.icons .icon:hover .fab.fa-youtube {
+  color: #c31a1e;
+}
+.icons .icon:hover .fab.fa-github {
+  color: #333;
+}
+.icons .icon:hover .fab.fa-linkedin {
+  color: #0077b5;
+}
diff --git a/AboutUs/About.html b/AboutUs/About.html
@@ -84,9 +84,48 @@ <h3>Permutation of Last Layer (PLL)</h3>
   </div>
   <hr/>
 
+  <div class="icons">
+    <a href="">
+      <div class="icon">
+        <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
+      </div>
+    </a>
+
+    <a href="">
+      <div class="icon">
+        <i class="fab fa-twitter" title="X"style="cursor: pointer;"></i>
+      </div>
+    </a>
+
+    <a href="">
+      <div class="icon">
+        <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
+      </div>
+    </a>
+
+
+    <a href="" title="YouTube">
+      <div class="icon">
+        <i class="fab fa-youtube" style="cursor: pointer;"></i>
+      </div>
+    </a>
+
+    <a href="">
+      <div class="icon">
+        <i class="fab fa-github" title="Github"></i>
+      </div>
+    </a>
+
+  </div>
+
   <footer class="footer">
-    <p class="text--footer">© 2024 Rubik-Cube</p>
+    <p id="current-year" class="text--footer">© <span id="year"></span> Rubik-Cube</p>
   </footer>
+
 </body>
 <script  src="./About.js"></script>
+<script>
+  document.getElementById('year').textContent = new Date().getFullYear();
+</script>
+
 </html>
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,11 @@
+# Use the official nginx image as the base image
+FROM nginx:alpine
+
+# Copy the HTML, CSS, and JavaScript files into the container
+COPY ./ /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80
+
+# Start nginx when the container launches
+CMD ["nginx", "-g", "daemon off;"]