Add files via upload

FisherLuba · Feb 10, 2024 · 70d2128 · 70d2128
1 parent 13d1f25
commit 70d2128
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 31 deletions.
diff --git a/css/style.css b/css/style.css
@@ -11,16 +11,37 @@ html {
   width: 400px;
 }
 
+#github-link {
+  display: block;
+  position: fixed;
+  text-align: center;
+  width: 75%;
+  left: 50%;
+  bottom: 10%;
+  margin-left: -37.5%;
+  font-size: 36px;
+  font-weight: bold;
+  font-family: "Comic Sans MS", "Comic Sans", cursive;;
+}
+
 .gradient-text {
   text-align: center;
-  /* color: #e8e81c; */
   padding-top: 10%;
-  /* background-image: linear-gradient(#e8e81c, orange) no-repeat;
-  */
   background-clip: text;
-  /* text-fill-color: transparent;  */
-  /* background: -webkit-linear-gradient(0deg, #e8e81c, gray); */
   background: -webkit-linear-gradient(0deg, orange, yellow);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+}
+
+.gradient-text-blue {
+  text-align: center;
+  padding-top: 10%;
+  background-clip: text;
+  background: -webkit-linear-gradient(0deg, aqua, blue);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+#github-link:hover {
+  font-size: 48px;
 }
diff --git a/index.html b/index.html
@@ -1,20 +1,21 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta content="Grilled Cheese" property="og:title" />
-    <meta content="A website for everyone who loves grilled cheese" property="og:description" />
-    <meta content="https://www.grilledcheese.dev/" property="og:url" />
-    <meta content="https://joyfoodsunshine.com/wp-content/uploads/2023/01/best-grilled-cheese-sandwich-recipe-2.jpg" alt="GRILLED CHEESE" property="og:image" />
-    <meta content="#e8e81c" data-react-helmet="true" name="theme-color" />
-    <meta name="twitter:card" content="summary_large_image">
-    <title>GRILLED CHEESE</title>
-    <link rel="stylesheet" href="css/style.css">
-    <script src="javascript/index.js"></script>
-</head>
-<body>
-    <h1 class="gradient-text">I LOVE GRILLED CHEESE</h1>
-    <img src="https://joyfoodsunshine.com/wp-content/uploads/2023/01/best-grilled-cheese-sandwich-recipe-2.jpg" alt="GRILLED CHEESE" class="center">
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="Grilled Cheese" property="og:title" />
+    <meta content="A website for everyone who loves grilled cheese" property="og:description" />
+    <meta content="https://www.grilledcheese.dev/" property="og:url" />
+    <meta content="https://joyfoodsunshine.com/wp-content/uploads/2023/01/best-grilled-cheese-sandwich-recipe-2.jpg" alt="GRILLED CHEESE" property="og:image" />
+    <meta content="#e8e81c" data-react-helmet="true" name="theme-color" />
+    <meta name="twitter:card" content="summary_large_image">
+    <title>GRILLED CHEESE</title>
+    <link rel="stylesheet" href="css/style.css">
+    <script src="javascript/index.js"></script>
+</head>
+<body>
+    <h1 class="gradient-text">I LOVE GRILLED CHEESE</h1>
+    <img src="https://joyfoodsunshine.com/wp-content/uploads/2023/01/best-grilled-cheese-sandwich-recipe-2.jpg" alt="GRILLED CHEESE" class="center">
+    <a id="github-link" class="gradient-text-blue" target="_blank" href="https://github.com/FisherLuba/FisherLuba.github.io">Star the repo to make all your grilled cheese's taste better!</a>
+</body>
+</html>
diff --git a/javascript/index.js b/javascript/index.js
@@ -1,26 +1,44 @@
+// The best code you have ever seen
+
 let currentPercent = 10;
+let currentPercentBlue = 10;
 
 
 function doGradientCycle() {
     const gradientElements = document.getElementsByClassName("gradient-text");
     if (gradientElements == null) return;
     for (let element of gradientElements) {
-        // let value = `-webkit-linear-gradient(0deg, yellow, orange ${currentPercent}%, yellow ${100 - currentPercent}%)`;
-        // let value = `-webkit-linear-gradient(0deg, yellow 45%, orange 50%, yellow 55%)`;
         let value = `-webkit-linear-gradient(0deg, yellow ${currentPercent}%, orange ${currentPercent + 15}%, yellow ${currentPercent + 30}%)`;
-        // value = "-webkit-linear-gradient(0deg, orange $1, yellow 99)";
         element.style.background = value;
         console.log(element.style.background);
         element.style.color = "blue";
         element.style.webkitBackgroundClip = "text";
         element.style.webkitTextFillColor = "transparent";
-        // console.log(element.style);
     }
     if (currentPercent >= 55) {
         currentPercent = 10;
         return;
     }
-    currentPercent += 3.25;
+    currentPercent += 1.75;
+}
+
+function doBlueGradientCycle() {
+    const gradientElements = document.getElementsByClassName("gradient-text-blue");
+    if (gradientElements == null) return;
+    for (let element of gradientElements) {
+        let value = `-webkit-linear-gradient(0deg, #2beaff ${currentPercentBlue}%, #209af7 ${currentPercentBlue + 15}%, #2beaff ${currentPercentBlue + 30}%)`;
+        element.style.background = value;
+        console.log(element.style.background);
+        element.style.color = "blue";
+        element.style.webkitBackgroundClip = "text";
+        element.style.webkitTextFillColor = "transparent";
+    }
+    if (currentPercentBlue >= 65) {
+        currentPercentBlue = 0;
+        return;
+    }
+    currentPercentBlue += 0.75;
 }
 
-setInterval(doGradientCycle, 100, 100);
+setInterval(doGradientCycle, 50, 50);
+setInterval(doBlueGradientCycle, 50, 50);