katkatniss-add an art (#2849)

* katkatniss-add an art * katkatniss-add meta.json --------- Co-authored-by: Laureline Paris <[email protected]>
zero-to-mastery · Oct 28, 2024 · 84a94b7 · 84a94b7
1 parent 485ea36
commit 84a94b7
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 0 deletions.
diff --git a/Art/katkatniss-makeAHalloweenPumpkin/index.html b/Art/katkatniss-makeAHalloweenPumpkin/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Halloween Hacktoberfest</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+<div style="position: absolute;top:10px;" >
+  <p class="halloweenWordOrange">HAPPY HALLOWEEN</p>
+  <p class="halloweenWordYellow">HAPPY HALLOWEEN</p>
+  <p class="halloweenWordOrange" style="font-size:60px;left: 240px;">HAPPY</p>
+  <p class="halloweenWordYellow" style="font-size:60px;left: 780px;">HALLOWEEN</p>
+  <p class="halloweenWordOrange" style="font-size:90px; left: 140px;color: #0ad699">HAPPY</p>
+  <p class="halloweenWordYellow">HAPPY HALLOWEEN</p>
+  <p class="halloweenWordOrange">HAPPY HALLOWEEN</p>
+</div>
+<div class="center" style="height:100vh;">
+
+    <div style="top:120px; left:400px" class="pumpkin-month-smile"></div>
+    <div style="top:50px;left:200px;" class="pumpkin-eye"></div>
+  <div  style="display: flex;">
+    <div style="left:115px;top:20px;" class="pumpkin-body-third"></div>
+    <div style="left:65px;;top:7.5px;" class="pumpkin-body-second"></div>
+    <div style="left:0px;" class="pumpkin-body-center"></div>
+    <div style="left:-65px;;top:7.5px;" class="pumpkin-body-second"></div>
+    <div style="left:-110px;top:20px;" class="pumpkin-body-third"></div>
+  </div>
+    <div style="top:50px;right:200px;" class="pumpkin-eye"></div>
+    <div style="top:120px;right:400px" class="pumpkin-month-smile"></div>
+</div>
+
+</body>
+</html>
diff --git a/Art/katkatniss-makeAHalloweenPumpkin/meta.json b/Art/katkatniss-makeAHalloweenPumpkin/meta.json
@@ -0,0 +1,4 @@
+{
+  "githubHandle": "katkatniss",
+  "artName": "Make a Halloween Pumpkin"
+}
diff --git a/Art/katkatniss-makeAHalloweenPumpkin/styles.css b/Art/katkatniss-makeAHalloweenPumpkin/styles.css
@@ -0,0 +1,89 @@
+.halloweenWordOrange {
+    line-height: 70px;
+    font-size: 80px;
+    color: orangered;
+    position: relative;
+    margin: 10px;
+    left:20px;
+}
+.halloweenWordYellow {
+    line-height: 70px;
+    font-size: 80px;
+    color: sandybrown;
+    position: relative;
+    margin: 10px;
+    left:300px;
+}
+
+.center {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-wrap: wrap;
+    background:black;
+}
+
+.pumpkin-body-center {
+    width: 140px;
+    height: 200px;
+    background-color: orangered;
+    border: 1px dotted #97441a;
+    border-radius: 35%;
+    position: relative;
+    z-index: 3;
+}
+.pumpkin-body-second {
+    width: 100px;
+    height: 185px;
+    background-color: orangered;
+    border: 1px dotted #97441a;
+    border-radius: 40%;
+    position: relative;
+    z-index: 2;
+}
+.pumpkin-body-third {
+    width: 80px;
+    height: 160px;
+    background-color: orangered;
+    border: 1px dotted #97441a;
+    border-radius: 40%;
+    position: relative;
+    z-index: 1;
+}
+
+.pumpkin-eye {
+    width: 50px;
+    height: 50px;
+    background-color: black;
+    border: 3px solid #97441a;
+    border-radius: 50%;
+    position: relative;
+    animation-name: ani-circle; /*動畫名稱(自訂)*/
+    animation-duration: 10s; /*一次完整動畫時間為4秒*/
+    animation-iteration-count: infinite; /*播放次數為無限次*/
+    /*animation-direction: alternate; !*播放方向為先正向再反向*!*/
+}
+
+@keyframes ani-circle { /*動畫名稱為 ani-circle*/
+    0%   {z-index: 0;background: black;}
+    25%  {z-index: 1;}
+    50%  {z-index: 4;}
+    100%  {z-index: 4; background: orange;}
+}
+
+.pumpkin-month-smile {
+    border-bottom: 25px solid black;
+    width: 180px;
+    height: 30px;
+    border-radius: 50%;
+    position: relative;
+    animation-name: smile; /*動畫名稱(自訂)*/
+    animation-duration: 10s; /*一次完整動畫時間為4秒*/
+    animation-iteration-count: infinite; /*播放次數為無限次*/
+}
+
+@keyframes smile { /*動畫名稱為 ani-circle*/
+    0%  {z-index: 0;}
+    70% {z-index: 4;}
+    100% {z-index: 4;}
+}