🥗 Adding new arts.

* made the header responsive, updated the readme * update: readme * Blossom Art by Shwetal Soni * 🐛 Add Instagram logo (#16) Co-authored-by: Salil Naik <salil.naik27@gmail.com> * Update App.js * Delete package-lock.json * 🍀 Blossom Art by Shwetal Soni (#22) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Blossom Art by Shwetal Soni * Update App.js * Delete package-lock.json Co-authored-by: Salil Naik <salil.naik27@gmail.com> * Rotating Cube using CSS (#23) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Rotating Cube Added Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 🍇 Facebook logo (#28) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Add Facebook Logo Co-authored-by: Salil Naik <salil.naik27@gmail.com> * ⭐ Captain America shield (#30) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * added captain america shield Co-authored-by: Salil Naik <salil.naik27@gmail.com> * ❤ YouTube Logo (#31) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Added YouTube logo * Update style.module.css Co-authored-by: Salil Naik <salil.naik27@gmail.com> * minor css fixes * 🔵 Circle component (#50) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * adding Circle Component Co-authored-by: Salil Naik <salil.naik27@gmail.com> * ⚽ Created a figure with circles and different figures * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * circle design added * Update PepsiLogo.jsx * Update style.module.css Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 🧵 Added a Git Logo (#60) * Added a Git Logo * Delete package-lock.json * Update style.module.css * Update TarunGitLogo.jsx Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 👌 RitikaAgrawalMoneyHeistMask (#69) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Money Heist Mask CSS Art Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 🥏 A simple pre-loader. (#70) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Added Pre-loader logo * Delete package-lock.json * Update style.module.css Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 🎨 Made an Abstract Art. (#73) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Added Abstract Art Co-authored-by: Salil Naik <salil.naik27@gmail.com> * add: new arts * add: index folder in art folder to export all the files * 🧧 Added Adobe Logo (#81) * 🎟 Xiaomi logo (#92) * 🏥 Made Aarogya Setu logo (#96) * Shridhar Git logo * Shridhar Aarogya Setu logo * Shridhar Aarogya Setu logo * Git logo(my logo) files deleted * Updated color scheme of circle and sphere (#102) * Added Globe By Aryan * updated colors * 🍚 Added Chrome Logo (#104) * 🥟 LinkedIn * add: more arts Co-authored-by: shwetalsoni <sonishwetal704@gmail.com> Co-authored-by: Harshit Pandey <69616901+HarshitPandey251@users.noreply.github.com> Co-authored-by: Shwetal Soni <57187745+shwetalsoni@users.noreply.github.com> Co-authored-by: Subhashree <47693419+micky2001@users.noreply.github.com> Co-authored-by: Antra Verma <51118723+mis-coder@users.noreply.github.com> Co-authored-by: Fpj-11 <76908206+Fpj-11@users.noreply.github.com> Co-authored-by: Suraj Jha <surajsjjha@gmail.com> Co-authored-by: Sheetal Jain <64475191+sheetalj2205@users.noreply.github.com> Co-authored-by: tarunsingh7379 <72147696+tarunsingh7379@users.noreply.github.com> Co-authored-by: Ritika Agrawal <65513097+Ritika-Agrawal811@users.noreply.github.com> Co-authored-by: Sharvari Birajdar <78595265+sharvariiii@users.noreply.github.com> Co-authored-by: Ayush Yadav <72045437+Retroid-007@users.noreply.github.com> Co-authored-by: Vidipta <42835714+Vidipta@users.noreply.github.com> Co-authored-by: Shridhar-dev <52820662+Shridhar-dev@users.noreply.github.com> Co-authored-by: coolAryan <42404394+coolAryan@users.noreply.github.com> Co-authored-by: pankaj892 <31444506+pankaj892@users.noreply.github.com> Co-authored-by: Shreya Shahi <shreyashahi1398@gmail.com>
salil-naik · Apr 7, 2021 · fda141e · fda141e
1 parent 58b88fe
commit fda141e
Show file tree

Hide file tree

Showing 16 changed files with 482 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 
 
 ## Run the project
-Run the `yarn install` command in the terminal to downlaod the dependencies.   
+Run the `yarn install` command in the terminal to download the dependencies.   
 Run the `yarn start` command to run the project in the development mode. 
 
 Open http://localhost:3000 to view it in the browser.

diff --git a/src/App.js b/src/App.js
@@ -22,6 +22,12 @@ import {
   SharvariBirajdarLoader,
   AyushYadavAbstractArt,
   AvishakeAudiLogo,
+  AryanJainGlobe,
+  HarshitXiaomi,
+  PankajChromeLogo,
+  ShreyaLinkedIn,
+  ShridharAarogyaSetu,
+  VidiptaSharmaAdobe,
 } from "./art/index";
 
 // An array of Art Components
@@ -38,14 +44,20 @@ let componentArr = [
   <RitikaAgrawalMoneyHeistMask />,
   <ShwetalBlossom />,
   <SubhashreeRotatingCube />,
-  <HarshitFacebook />,
   <AntraCaptainShield />,
+  <HarshitFacebook />,
   <FalguniYouTube />,
   <HarshitInstagram />,
-  <SheetalJainPepsi />,
-  <SharvariBirajdarLoader />,
   <TarunGitLogo />,
   <AyushYadavAbstractArt />,
+  <AryanJainGlobe />,
+  <HarshitXiaomi />,
+  <PankajChromeLogo />,
+  <ShreyaLinkedIn />,
+  <ShridharAarogyaSetu />,
+  <VidiptaSharmaAdobe />,
+  <SheetalJainPepsi />,
+  <SharvariBirajdarLoader />,
   <AvishakeAudiLogo />,
 ];
 

diff --git a/src/art/AryanJainGlobe/AryanJainGlobe.jsx b/src/art/AryanJainGlobe/AryanJainGlobe.jsx
@@ -0,0 +1,31 @@
+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 AryanJainGlobe() {
+  // Enter your name, github url and art-name below
+  let data = {
+    name: "Aryan Jain",
+    "gh-link": "https://github.com/coolAryan",
+    "art-name": "Globe",
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the line above*/}
+
+      {/* your art blocks will come here */}
+      <div>
+      <div className={style.circle}></div>
+
+      </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default AryanJainGlobe;
diff --git a/src/art/AryanJainGlobe/style.module.css b/src/art/AryanJainGlobe/style.module.css
@@ -0,0 +1,14 @@
+.container {
+  background-color:paleturquoise;
+}
+
+.circle {
+  display: block;
+  height: 100px;
+  width: 100px;
+  background: green;
+  border-radius: 90%;
+  box-shadow: 90px 0 rgb(162, 89, 255), 0 90px #ff7262 ;
+  margin: 10;
+  background: radial-gradient(circle at 100px 100px, rgb(26, 188, 254), rgba(151, 136, 136, 0.897));
+}
diff --git a/src/art/HarshitFacebook/style.module.css b/src/art/HarshitFacebook/style.module.css
@@ -1,12 +1,12 @@
 .container {
-    background-color: #f2f2b6;
+    background-color: #242526;
   }
 
 .wrapper{
     margin: 100px;
     width: 9.6rem;
     height: 9.6rem;
-    background: #3b5999;
+    background: #2D88FF;
     border-radius: 8px;
     overflow: hidden;
 }
@@ -27,7 +27,7 @@
     left: 25px;
     top: 22px;
     position: relative;
-    background: #3b5999;
+    background: #2D88FF;
     border-top-left-radius: 12px;
  }
 

diff --git a/src/art/HarshitXiaomi/HarshitXiaomi.jsx b/src/art/HarshitXiaomi/HarshitXiaomi.jsx
@@ -0,0 +1,31 @@
+import style from "./style.module.css";
+import { Credit } from "../../components/Credit/index";
+
+function HarshitXiaomi() {
+  let data = {
+    name: "Harshit Pandey",
+    "gh-link": "https://github.com/HarshitPandey251",
+    "art-name": "Xiaomi logo",
+  };
+
+  return (
+    <div className={`${style.container} container`}>
+      {/* do not edit the line above*/}
+
+      {/* your art blocks will come here */}
+      <div className={style.logoContainer}>
+        <div className={style.mtext}>
+            <div className={style.mInsert}>
+                <div className={style.mInner}></div>
+            </div>
+        </div>
+        <div className={style.itext}></div>
+      </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default HarshitXiaomi;
diff --git a/src/art/HarshitXiaomi/style.module.css b/src/art/HarshitXiaomi/style.module.css
@@ -0,0 +1,46 @@
+.container {
+    background: #c9d6ff;
+}
+.logoContainer {
+    position: relative;
+    height: 150px;
+    width: 150px;
+    background: #f2692e;
+    border-radius: 5px;
+}
+.mtext{
+    height: 57px;
+    width: 62px;
+    left: 32px;
+    top: 47px;
+    background: #fff;
+    position: relative;
+    border-top-right-radius: 20px;
+}
+
+.mInsert{
+    height: 46px;
+    width: 35px;
+    left: 14px;
+    top: 12px;
+    background: #f2692e;
+    position: relative;
+    border-top-right-radius: 10px;
+}
+
+.mInner{
+    height: 35px;
+    width: 13px;
+    left: 10px;
+    top: 10px;
+    background: #fff;
+    position: relative;
+}
+.itext{
+    height: 57px;
+    width: 13px;
+    left: 104px;
+    top: -10px;
+    background: #fff;
+    position: relative;
+}
diff --git a/src/art/PankajChromeLogo/PankajChromeLogo.jsx b/src/art/PankajChromeLogo/PankajChromeLogo.jsx
@@ -0,0 +1,34 @@
+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 PankajChromeLogo() {
+  // Enter your name, github url and art-name below
+  let data = {
+    name: "Pankaj Biradar",
+    "gh-link": "https://github.com/pankaj892",
+    "art-name": "Google Chrome Logo",
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the line above*/}
+
+      {/* your art blocks will come here */}
+      <div className={style.logo}>
+        <div className = {style.center}></div>
+        <div className = {style.yellow}></div>
+        <div className = {style.green}></div>
+
+
+      </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default PankajChromeLogo;
diff --git a/src/art/PankajChromeLogo/style.module.css b/src/art/PankajChromeLogo/style.module.css
@@ -0,0 +1,76 @@
+.container {
+  background-color:aliceblue;
+}
+
+
+.logo {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  width: 150px;
+  height: 150px;
+  background: #dc4c40;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    width: 70px;
+    height: 70px;
+    background: #367bf0;
+    border-radius: 50%;
+    border: 8px solid #fff;
+    z-index: 3;
+}
+
+.yellow {
+position: absolute;
+top: 28%;
+left: 58%;
+width: 100%;
+height: 100%;
+background: #f7c43a;
+z-index: 2;
+transform: skewX(-30deg);
+}
+
+.yellow::before
+{
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -49px;
+  width: 91%;
+  height: 43%;
+  background: #f7c43a;
+  transform: skewX(24deg);
+}
+
+.green
+{
+  position: absolute;
+    top: -69%;
+    left: -253px;
+    width: 66%;
+    height: 72%;
+    background: #0fa361;
+    z-index: 1;
+    transform: skewX(30deg);
+}
+
+.green::before
+{ 
+    content: '';
+    position: absolute;
+    top: 139px;
+    left: 142px;
+    width: 103%;
+    height: 106%;
+    background: #0fa361;
+    transform: skewX(32deg);
+}
diff --git a/src/art/ShreyaLinkedIn/ShreyaLinkedIn.jsx b/src/art/ShreyaLinkedIn/ShreyaLinkedIn.jsx
@@ -0,0 +1,32 @@
+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 ShreyaLinkedIn() {
+  // Enter your name, github url and art-name below
+  let data = {
+    name: "Shreya Shahi",
+    "gh-link": "https://github.com/shreya-1398",
+    "art-name": "LinkedIn logo",
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the line above*/}
+
+      {/* your art blocks will come here */}
+      <div>
+        <div className={style.blocks}>
+          <p className={style.logo}>in</p>
+        </div>
+      </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default ShreyaLinkedIn;
diff --git a/src/art/ShreyaLinkedIn/style.module.css b/src/art/ShreyaLinkedIn/style.module.css
@@ -0,0 +1,23 @@
+.container {
+  background-color: #e7eef5;
+}
+
+.logo {
+  position: absolute;
+  font-size: 7em;
+  color: white;
+  font-weight: bold;
+}
+
+.blocks {
+  height: 130px;
+  width: 130px;
+  padding: 0%;
+  margin: 0%;
+  display: flex;
+  justify-content: center;
+  background-color: #0073b1;
+  border-radius: 15px;
+  position: relative;
+  align-items: center;
+}
diff --git a/src/art/ShridharAarogyaSetu/ShridharAarogyaSetu.jsx b/src/art/ShridharAarogyaSetu/ShridharAarogyaSetu.jsx
@@ -0,0 +1,27 @@
+import style from "./style.module.css";
+import { Credit } from "../../components/Credit/index";
+
+function ShridharAarogyaSetu() {
+  let data = {
+    name: "Shridhar Kamat",
+    "gh-link": "https://github.com/Shridhar-dev/",
+    "art-name": "Aarogya Setu logo",
+  };
+
+  return (
+    <div className={`${style.container} container`}>
+      {/* do not edit the className above*/}
+
+      {/* your art blocks will come here */}    
+
+        <div className={style.main}>
+            <div className={style.heartmid}></div>
+            <div className={style.tick}></div>
+        </div>
+      {/* do not edit line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default ShridharAarogyaSetu;