diff --git a/Art/claire-ca/candle-flicker/candle-flicker.gif b/Art/claire-ca/candle-flicker/candle-flicker.gif
new file mode 100644
index 000000000..c1088dfc4
Binary files /dev/null and b/Art/claire-ca/candle-flicker/candle-flicker.gif differ
diff --git a/Art/claire-ca/candle-flicker/index.html b/Art/claire-ca/candle-flicker/index.html
new file mode 100644
index 000000000..402560ca4
--- /dev/null
+++ b/Art/claire-ca/candle-flicker/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+ Candle Flicker
+
+
+
+
+
+
diff --git a/Art/claire-ca/candle-flicker/style.css b/Art/claire-ca/candle-flicker/style.css
new file mode 100644
index 000000000..18bb7e444
--- /dev/null
+++ 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
index fc300bd7c..836272611 100644
--- 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'
},
{