Magic Card (#2226)

* Create index.html * Create style.css * Add files via upload * Update include.js --------- Co-authored-by: Sophia Brandt <16630701+sophiabrandt@users.noreply.github.com>
zero-to-mastery · Oct 27, 2023 · b39004b · b39004b
1 parent 5ff3661
commit b39004b
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 1 deletion.
diff --git a/Art/URK21CS1064/hacktober.png b/Art/URK21CS1064/hacktober.png
diff --git a/Art/URK21CS1064/index.html b/Art/URK21CS1064/index.html
@@ -0,0 +1,16 @@
+<!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="style.css">
+</head>
+<body>
+  <div class="card">
+    Magic Card
+  </div>
+
+  <a href="https://mythrillfiction.com/" target="_blank">Mythrill</a>
+</body>
+</html>
diff --git a/Art/URK21CS1064/style.css b/Art/URK21CS1064/style.css
@@ -0,0 +1,102 @@
+@property --rotate {
+  syntax: "<angle>";
+  initial-value: 132deg;
+  inherits: false;
+}
+
+:root {
+  --card-height: 65vh;
+  --card-width: calc(var(--card-height) / 1.5);
+}
+
+
+body {
+  min-height: 100vh;
+  background: #212534;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  box-sizing: border-box;
+}
+
+
+.card {
+  background: #191c29;
+  width: var(--card-width);
+  height: var(--card-height);
+  padding: 3px;
+  position: relative;
+  border-radius: 6px;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  font-size: 1.5em;
+  color: rgb(88 199 250 / 0%);
+  cursor: pointer;
+  font-family: cursive;
+}
+
+.card:hover {
+  color: rgb(88 199 250 / 100%);
+  transition: color 1s;
+}
+.card:hover:before, .card:hover:after {
+  animation: none;
+  opacity: 0;
+}
+
+
+.card::before {
+  content: "";
+  width: 104%;
+  height: 102%;
+  border-radius: 8px;
+  background-image: linear-gradient(
+    var(--rotate)
+    , #5ddcff, #3c67e3 43%, #4e00c2);
+    position: absolute;
+    z-index: -1;
+    top: -1%;
+    left: -2%;
+    animation: spin 2.5s linear infinite;
+}
+
+.card::after {
+  position: absolute;
+  content: "";
+  top: calc(var(--card-height) / 6);
+  left: 0;
+  right: 0;
+  z-index: -1;
+  height: 100%;
+  width: 100%;
+  margin: 0 auto;
+  transform: scale(0.8);
+  filter: blur(calc(var(--card-height) / 6));
+  background-image: linear-gradient(
+    var(--rotate)
+    , #5ddcff, #3c67e3 43%, #4e00c2);
+    opacity: 1;
+  transition: opacity .5s;
+  animation: spin 2.5s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    --rotate: 0deg;
+  }
+  100% {
+    --rotate: 360deg;
+  }
+}
+
+a {
+  color: #212534;
+  text-decoration: none;
+  font-family: sans-serif;
+  font-weight: bold;
+  margin-top: 2rem;
+}
diff --git a/include.js b/include.js
@@ -2196,7 +2196,13 @@ const cards = [
     githubLink: 'https://github.com/ishanchaskar'
   },
   {
-    artName: 'Circle',
+    artName: 'Magic Card',
+    pageLink: './Art/URK21CS1064/index.html', 
+    imageLink: './Art/URK21CS1064/hacktober.png', 
+    author: 'URK21CS1064', 
+    githubLink: 'https://github.com/URK21CS1064' 
+  },
+  {    artName: 'Circle',
     pageLink: './Art/rishiiiidha/index.html',
     imageLink: './Art/rishiiiidha/animation.gif',
     author: 'Rishidha',