Blossom Art by Shwetal Soni

package.json

@@ -11,7 +11,7 @@
     "node-sass": "^5.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^4.0.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/art/ShwetalBlossom/ShwetalBlossom.jsx

@@ -0,0 +1,39 @@
+import style from "./style.module.css";
+import { Credit } from "../../components/Credit/index";
+
+// Replace ComponentName with YourName followed by ArtName.
+// For example, SalilReactLogo or SalilNaikReactLogo
+// component name, file name and folder name should be same. 
+
+function ShwetalBlossom() {
+  // Enter your name, github url and art-name below
+  let data = {
+    name: "Shwetal Soni",
+    "gh-link": "https://github.com/shwetalsoni",
+    "art-name": "Blossom",
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the line above*/}
+
+      {/* your art blocks will come here */}
+      <div>
+        <div className={style.blossom}>
+            <div className={style.leaf}>
+                <div className={style.leftleaf}></div>
+                <div className={style.rightleaf}></div>
+            </div>
+            <div className={style.leaf}>
+                <div className={style.secondleftleaf}></div>
+                <div className={style.secondrightleaf}></div>
+            </div>
+        </div> 
+      </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default ShwetalBlossom;

src/art/ShwetalBlossom/style.module.css

@@ -0,0 +1,34 @@
+.container {
+    background: #998235;
+}
+.blossom{
+    display: flex;
+    flex-direction: row;
+}
+.leftleaf{
+    height: 80px;
+    width: 65px;
+    border-radius: 0 45px 0 45px;
+    background-color: #1A4341;
+    margin-right: 20px;
+    margin-bottom: 20px;
+}
+.rightleaf{
+    width: 70px;
+    height: 45px;
+    border-radius:0 40px 0 40px ;
+    background-color: #F3AC3C;
+}
+.secondleftleaf{
+    width: 70px;
+    height: 45px;
+    border-radius:40px 0 40px 0;
+    background-color: #F3AC3C;
+}
+.secondrightleaf{
+    height: 80px;
+    width: 65px;
+    border-radius: 45px 0 45px 0;
+    background-color: #1A4341;
+    margin-top: 20px;
+}

yarn.lock

@@ -9315,7 +9315,7 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
-[email protected]:
+react-scripts@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
   integrity sha512-S5eO4vjUzUisvkIPB7jVsKtuH2HhWcASREYWHAQ1FP5HyCv3xgn+wpILAEWkmy+A+tTNbSZClhxjT3qz6g4L1A==