adding my candle animation (#2407)

zero-to-mastery · Oct 31, 2023 · aa80a0a · aa80a0a
1 parent c3a95af
commit aa80a0a
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 13 deletions.
diff --git a/Art/claire-ca/candle-flicker/candle-flicker.gif b/Art/claire-ca/candle-flicker/candle-flicker.gif
diff --git a/Art/claire-ca/candle-flicker/index.html b/Art/claire-ca/candle-flicker/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Candle Flicker</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="flex">
+      <div class="candle">
+        <div class="candle-wick"></div>
+      </div>
+      <div class="table"></div>
+    </div>
+  </body>
+</html>
diff --git a/Art/claire-ca/candle-flicker/style.css b/Art/claire-ca/candle-flicker/style.css
@@ -0,0 +1,122 @@
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+  background: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(rgba(112, 111, 247, 1)),
+    to(rgba(0, 12, 54, 1))
+  );
+  background: -o-linear-gradient(
+    bottom,
+    rgba(112, 111, 247, 1) 0%,
+    rgba(0, 12, 54, 1) 100%
+  );
+  background: linear-gradient(
+    0deg,
+    rgba(112, 111, 247, 1) 0%,
+    rgba(0, 12, 54, 1) 100%
+  );
+}
+.flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  height: 100vh;
+}
+.candle {
+  position: relative;
+  width: 8rem;
+  height: 11rem;
+  background-color: hsl(0, 0%, 85%);
+  border: 3px solid hsl(0, 0%, 0%);
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  -webkit-box-shadow: inset 1rem 0 0.5rem hsl(0, 0%, 64%);
+  box-shadow: inset 1rem 0 0.5rem hsl(0, 0%, 64%);
+}
+.candle::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -3rem;
+  left: 52%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  z-index: 10;
+  background: -o-radial-gradient(
+    circle,
+    rgba(247, 197, 111, 1) 0%,
+    rgba(245, 138, 11, 1) 100%
+  );
+  background: radial-gradient(
+    circle,
+    rgba(247, 197, 111, 1) 0%,
+    rgba(245, 138, 11, 1) 100%
+  );
+  opacity: 0.9;
+  height: 2.5rem;
+  width: 2rem;
+  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+  -webkit-animation: 2s infinite flicker alternate;
+  animation: 2s infinite flicker alternate;
+}
+.candle-wick {
+  width: 0.25rem;
+  height: 1.5rem;
+  background-color: black;
+  position: absolute;
+  top: -1.5rem;
+  left: 50%;
+}
+.table {
+  width: 20rem;
+  height: 1rem;
+  background-color: black;
+}
+
+@-webkit-keyframes flicker {
+  from {
+    -webkit-box-shadow: 0 0 3px -3px #f7c56f;
+    box-shadow: 0 0 3px -3px #f7c56f;
+    -webkit-transform: translateX(-45%);
+    transform: translateX(-45%);
+  }
+  to {
+    -webkit-box-shadow: 0 0 3px 3px #f7c56f;
+    box-shadow: 0 0 3px 3px #f7c56f;
+    -webkit-transform: translateX(-55%);
+    transform: translateX(-55%);
+  }
+}
+
+@keyframes flicker {
+  from {
+    -webkit-box-shadow: 0 0 3px -3px #f7c56f;
+    box-shadow: 0 0 3px -3px #f7c56f;
+    -webkit-transform: translateX(-45%);
+    transform: translateX(-45%);
+  }
+  to {
+    -webkit-box-shadow: 0 0 3px 3px #f7c56f;
+    box-shadow: 0 0 3px 3px #f7c56f;
+    -webkit-transform: translateX(-55%);
+    transform: translateX(-55%);
+  }
+}
diff --git a/include.js b/include.js
@@ -1,5 +1,5 @@
 let cards = [
-   {
+  {
     artName: 'RingAnimation',
     pageLink: './Art/stormworm9/RingAnimation/ring.html',
     imageLink: './Art/stormworm9/RingAnimation/ring.gif',
@@ -76,7 +76,7 @@ let cards = [
     author: 'Krish Gautam',
     githubLink: 'https://github.com/Kris248'
   },
-  
+
   {
     artName: 'Ball Animation',
     pageLink: './Art/daemonvk18/animation..html',
@@ -147,7 +147,7 @@ let cards = [
     author: 'Manish Jha',
     githubLink: 'https://github.com/manishjha-04'
   },
-    {
+  {
     artName: 'MeetingPoint',
     pageLink: './Art/manishjha-04/Meeting Point/index.html',
     imageLink: './Art/manishjha-04/Meeting Point/Meetingpoint.gif',
@@ -2636,11 +2636,11 @@ let cards = [
     githubLink: 'https://github.com/milesjorg'
   },
   {
-      artName: 'Square color changing animation',
-      pagelink: './Art/divyansharya8826/index.html',
-      imageLink: './Art/divyansharya8826/Square.gif',
-      author: 'divyansharya8826',
-      githubLink: 'https://github.com/divyansharya8826'
+    artName: 'Square color changing animation',
+    pagelink: './Art/divyansharya8826/index.html',
+    imageLink: './Art/divyansharya8826/Square.gif',
+    author: 'divyansharya8826',
+    githubLink: 'https://github.com/divyansharya8826'
   },
   {
     artName: 'Arrows',
@@ -2670,6 +2670,13 @@ let cards = [
     author: 'amandeepsinghparihar',
     githubLink: 'https://github.com/amandeep-singh-parihar'
   },
+  {
+    artName: 'Candle Flicker',
+    pageLink: './Art/claire-ca/candle-flicker/index.html',
+    imageLink: './Art/claire-ca/candle-flicker/candle-flicker.gif',
+    author: 'Claire Calder',
+    githubLink: 'https://github.com/claire-ca'
+  },
   {
     artName: '90 Degree Container with Shifting Base',
     pageLink: './Art/norib016/art.html',
@@ -2767,12 +2774,12 @@ let cards = [
     imageLink: './Art/Piyush_Luitel/index.gif',
     author: 'Piyush_Luitel',
     githubLink: 'https://github.com/PiyushLuitel-07'
-  }
-  ,{
+  },
+  {
     artName: 'Kinetic Loading',
-    pageLink: './Art/urjabahad/kinetic_loading.html', 
-    imageLink: './Art/urjabahad/kinetic_loading.gif', 
-    author: 'Urja', 
+    pageLink: './Art/urjabahad/kinetic_loading.html',
+    imageLink: './Art/urjabahad/kinetic_loading.gif',
+    author: 'Urja',
     githubLink: 'https://github.com/urjabahad'
   },
   {