Update issue templates

.github/ISSUE_TEMPLATE/add-css-art.md

@@ -0,0 +1,10 @@
+---
+name: Add CSS Art
+about: Tell us about the art you are working on
+title: I am making a <Art Name>
+labels: ''
+assignees: ''
+
+---
+
+

README.md

@@ -1,10 +1,16 @@
-# CSS Art Gallery
+# CSS Art Gallery · ![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](README.md) [![Netlify Status](https://api.netlify.com/api/v1/badges/eb3ec884-1819-4b09-95fd-bda3f44863b9/deploy-status)](https://app.netlify.com/sites/css-art-gallery/deploys)
+
+
+![Cover Image](./src/images/cover-image.png)
+
+
+## Run the project
 Run the `yarn start` command in the terminal
 
 This command will run the app in the development mode.
 Open http://localhost:3000 to view it in the browser.
 
-The page will reload if you make edits. You will also see any lint errors in the console.
+The page will reload if you make edits.
 
 <br />
 
@@ -15,6 +21,8 @@ The page will reload if you make edits. You will also see any lint errors in the
 3. Give [gradient](https://uigradients.com/) or solid background colours to the `.container` class. Kindly do not keep the background white in colour.
 4. To test your component, import your component to app.js. DO NOT FORGET to remove the import from App.js before you push. Since multiple contributors are going to contribute at the same time, almost every contributor will get merge conflicts. So, edit app.js file only for test purpose, DO NOT push app.js changes to GitHub.
 5. Check out `index.css` for common CSS. DO NOT EDIT THIS FILE.
+6. If you are coding an object inside the container, for example, a logo, a geometrical shape or an object, kindly make sure the total dimensions (width and height) do not exceed 150px. You may take up to 180px only when required. 
+7. When you create a pull request, please specify `updates` branch as all the contributor's changes are going to be merged in the `updates` branch and then to the `main` branch. 
 
 ### Folder Structure
 

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
     "gh-pages": "^3.1.0",
+    "node-sass": "^5.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

src/App.js

@@ -9,6 +9,8 @@ import SalilDroplets from "./art/SalilDroplets/SalilDroplets.jsx";
 import SalilAvicii from "./art/SalilAvicii/SalilAvicii.jsx";
 import SalilEclips from "./art/SalilEclips/SalilEclips.jsx";
 import SalilMicrosoft from "./art/SalilMicrosoft/SalilMicrosoft.jsx";
+import JaagravGithubLogo from "./art/JaagravGithubLogo/JaagravGithubLogo.jsx";
+import RainbowBlocks from "./art/RainbowBlocks/RainbowBlocks.jsx";
 
 // An array of Art Components
 let componentArr = [
@@ -19,6 +21,8 @@ let componentArr = [
   <SalilAvicii />,
   <SalilEclips />,
   <SalilMicrosoft />,
+  <JaagravGithubLogo />,
+  <RainbowBlocks />
 ];
 
 function App() {

src/art/1_template/template.jsx

@@ -3,6 +3,7 @@ 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 ComponentName() {
   // Enter your name, github url and art-name below
@@ -17,8 +18,7 @@ function ComponentName() {
 
       {/* your art blocks will come here */}
       <div>
-
-
+        <div className={style.circle}></div>
       </div>
 
       {/* do not edit the line below */}

src/art/JaagravGithubLogo/style.module.css

@@ -13,6 +13,7 @@
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
+  transform: scale(0.7);
 }
 
 .head {

src/art/RainbowBlocks/RainbowBlocks.jsx

@@ -0,0 +1,29 @@
+import style from "./style.module.scss";
+import { Credit } from "../../components/Credit/index";
+
+// Replace ComponentName with YourName followed by ArtName.
+// For example, SalilReactLogo or SalilNaikReactLogo
+
+function RainbowBlocks() {
+  // Enter your name, github url and art-name below
+  let data = {
+    name: "Salil Naik",
+    "gh-link": "https://github.com/salil-naik",
+    "art-name": "Rainbow Blocks",
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the line above*/}
+
+      {/* your art blocks will come here */}
+      <div>
+        <div className={style.drop}></div>        
+      </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default RainbowBlocks;

src/art/RainbowBlocks/style.module.scss

@@ -0,0 +1,33 @@
+.container {
+  background-color: #f2f2f2;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    .drop{
+      transform: rotateZ(-135deg) rotateY(180deg);
+      transition: 1s ease-in-out;
+    }
+  }
+}
+
+// colors
+$red: #ff7262;
+$blue: rgb(26, 188, 254);
+$green: rgb(10, 207, 131);
+$indigo: rgb(162, 89, 255);
+$violet: #ffa4ef;
+
+.drop {
+  width: 200px;
+  height: 80px;
+  border-radius: 40px;
+  background-color: $blue;
+  transform: rotateZ(-45deg) rotateY(0);
+  box-shadow: 
+  -230px 0 $violet, 230px 0 $indigo, 
+  115px 110px $red, -115px 110px $green, 
+  115px -110px $green, -115px -110px $indigo, 
+  0px 230px $violet, 0px -230px $red;
+  transition: 1s ease-in-out;
+}