Merge pull request #1823 from zero-to-mastery/ChrRepou-art

Chr repou art
zero-to-mastery · Oct 3, 2023 · e1e8a83 · e1e8a83
2 parents ebe8c85 + fdfc292
commit e1e8a83
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 0 deletions.
diff --git a/Art/ChrRepou/flower.css b/Art/ChrRepou/flower.css
@@ -0,0 +1,81 @@
+body {
+  height: 100%;
+}
+
+.center {
+  background-color: yellow;
+  border-radius: 50%;
+  border: 1px solid black;
+  width: 80px;
+  height: 80px;
+  position: relative;
+  top: 200px;
+  left: 650px;
+}
+
+.petal-1 {
+  width: 50px;
+  height: 100px;
+  background-color: pink;
+  border-radius: 50%;
+  transform: rotate(145deg);
+  position: relative;
+  top: 160px;
+  left: 705px;
+}
+
+.petal-2 {
+  width: 50px;
+  height: 100px;
+  background-color: pink;
+  border-radius: 50%;
+  transform: rotate(-140deg);
+  position: relative;
+  top: 60px;
+  left: 635px;
+}
+
+.petal-4 {
+  width: 50px;
+  height: 100px;
+  background-color: pink;
+  border-radius: 50%;
+  position: relative;
+  transform: rotate(-90deg);
+  bottom: 90px;
+  left: 740px;
+}
+
+.petal-6 {
+  width: 50px;
+  height: 100px;
+  background-color: pink;
+  border-radius: 50%;
+  position: relative;
+  transform: rotate(40deg);
+  position: relative;
+  bottom: 240px;
+  left: 705px;
+}
+
+.petal-7 {
+  width: 50px;
+  height: 100px;
+  background-color: pink;
+  border-radius: 50%;
+  position: relative;
+  transform: rotate(-40deg);
+  bottom: 340px;
+  left: 635px;
+}
+
+.petal-8 {
+  width: 50px;
+  height: 100px;
+  background-color: pink;
+  border-radius: 50%;
+  position: relative;
+  transform: rotate(-90deg);
+  bottom: 390px;
+  left: 600px;
+}
diff --git a/Art/ChrRepou/flower.html b/Art/ChrRepou/flower.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <title>Flower Art</title>
+    <link href="./flower.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="center"></div>
+    <div class="petal-1"></div>
+    <div class="petal-2"></div>
+    <div class="petal-4"></div>
+    <div class="petal-6"></div>
+    <div class="petal-7"></div>
+    <div class="petal-8"></div>
+  </body>
+</html>
diff --git a/Art/ChrRepou/flower.png b/Art/ChrRepou/flower.png
diff --git a/include.js b/include.js
@@ -152,6 +152,13 @@ let cards = [
     imageLink: './Art/Venkateeshh/BounceBall.gif',
     author: 'Venkatesh',
     githubLink: 'https://github.com/Venkateeshh'
+  },
+  {
+    artName: 'Flower',
+    pageLink: './Art/ChrRepou/flower.html',
+    imageLink: './Art/ChrRepou/flower.gif',
+    author: 'ChrRepou',
+    githubLink: 'https://github.com/ChrRepou'
   }
 ];