☘ 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 * 💝 Added like feature * trial * Added Tile Art * Added WDG Logo * Fixed: Credits Style Rules * Added like button * Fix: creditsRef current * Added env, firebase and like-unlike feature * Updated env example * Removed firebase analytics to prevent credentials leak * Deploy add-like-feature branch to vercel * Lazy load IP * Added double-tap to like * fix: like and caption UI * fix: like popup UI and UX * minor chanes * Cancel render of like buttons and pulsing heart in case env is missing * minor change Co-authored-by: Jaagrav <jaagravseal03@gmail.com> * added like feature * ⏰ Clock Using Css (#107) * 📴 Add LG logo (#120) * 👨‍🦳 Made an Old Man Illustration (#144) * Shridhar Git logo * Shridhar Old Man Illustration * Shridhar Old Man Illustration * Shridhar Old Man Illustration * add: new arts * add: new arts * updated readme * 🥚 Myntra Logo and Spiral Animation on Updates Branch (#148) * Create SrishtiGuleriaMyntra.jsx * Create style.module.css * Create SrishtiGuleriaSprial.jsx * Create style.module.css * ⛄ Snowman (#154) * 🎩 Made a hat (#83) * added hat * Added a Hat * 🍧 WhatsApp Logo (#149) * 🎯 Added Target Logo (issue-127)(Changes made) (#151) * 🍰 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 * 💝 Added like feature * trial * Added Tile Art * Added WDG Logo * Fixed: Credits Style Rules * Added like button * Fix: creditsRef current * Added env, firebase and like-unlike feature * Updated env example * Removed firebase analytics to prevent credentials leak * Deploy add-like-feature branch to vercel * Lazy load IP * Added double-tap to like * fix: like and caption UI * fix: like popup UI and UX * minor chanes * Cancel render of like buttons and pulsing heart in case env is missing * minor change Co-authored-by: Jaagrav <jaagravseal03@gmail.com> * added like feature * ⏰ Clock Using Css (#107) * 📴 Add LG logo (#120) * 👨‍🦳 Made an Old Man Illustration (#144) * Shridhar Git logo * Shridhar Old Man Illustration * Shridhar Old Man Illustration * Shridhar Old Man Illustration * add: new arts * add: new arts * updated readme 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> Co-authored-by: Jaagrav <jaagravseal03@gmail.com> * Added Target Logo (issue-127)(Changes made) Co-authored-by: Salil Naik <salil.naik27@gmail.com> 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> Co-authored-by: Jaagrav <jaagravseal03@gmail.com> * add: new 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> Co-authored-by: Jaagrav <jaagravseal03@gmail.com> Co-authored-by: Srishti Guleria <61888364+sg7801@users.noreply.github.com> Co-authored-by: Apoorva <63863726+apoorva567@users.noreply.github.com> Co-authored-by: CHARU SACHDEVA <60181628+Charu271@users.noreply.github.com> Co-authored-by: Sreehari A <sreeharianilkumar1@gmail.com>
salil-naik · Apr 17, 2021 · 892523f · 892523f
1 parent 3359eba
commit 892523f
Show file tree

Hide file tree

Showing 14 changed files with 509 additions and 6 deletions.
diff --git a/src/App.js b/src/App.js
@@ -34,7 +34,13 @@ import {
   WebDevGoaWDGLogo,
   HarshitClock,
   HarshitLG,
-  ShridharOldMan
+  ShridharOldMan,
+  SrishtiGuleriaSpiral,
+  SrishtiGuleriaMyntra,
+  HarshitSnowman,
+  ApoorvaHat,
+  CharuWhatsApp,
+  SreehariTarget
 } from "./art/index";
 
 // An array of Art Components
@@ -58,18 +64,24 @@ let componentArr = [
   <TarunGitLogo />,
   <HarshitInstagram />,
   <AyushYadavAbstractArt />,
-  <AryanJainGlobe />,
+  <SrishtiGuleriaSpiral />,
   <HarshitXiaomi />,
   <PankajChromeLogo />,
   <ShreyaLinkedIn />,
   <ShridharAarogyaSetu />,
+  <HarshitClock />,
   <VidiptaSharmaAdobe />,
+  <HarshitLG />,
+  <ShridharOldMan />,
+  <SrishtiGuleriaMyntra />,
+  <HarshitSnowman />,
   <SheetalJainPepsi />,
-  <SharvariBirajdarLoader />,
+  <SreehariTarget />,
   <AvishakeAudiLogo />,
-  <HarshitClock />,
-  <HarshitLG />,
-  <ShridharOldMan />
+  <SharvariBirajdarLoader />,
+  <CharuWhatsApp />,
+  <ApoorvaHat />,
+  <AryanJainGlobe />
 ];
 
 function App() {

diff --git a/src/art/ApoorvaHat/ApoorvaHat.jsx b/src/art/ApoorvaHat/ApoorvaHat.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 ApoorvaHat() {
+  // Enter your name, github url and art-name below
+  let data = {
+    name: "Apoorva Chauhan",
+    "gh-link": "https://github.com/apoorva567",
+    "art-name": "hat",
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the line above*/}
+
+      {/* your art blocks will come here */}
+      <div>
+        <div className={style.blocks}></div>
+
+
+      </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default ApoorvaHat;
diff --git a/src/art/ApoorvaHat/style.module.css b/src/art/ApoorvaHat/style.module.css
@@ -0,0 +1,16 @@
+.container {
+  background-color: rgb(34, 9, 34);
+}
+
+.blocks{
+  height:130px;
+  width: 160px;
+  border-top-left-radius: 65px;
+  border-top-right-radius: 65px;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+  background-color: rgb(160, 139, 196);
+  border: 40px solid rgb(34, 9, 34);
+  border-bottom: 20px solid transparent;
+
+}
diff --git a/src/art/CharuWhatsApp/CharuWhatsApp.jsx b/src/art/CharuWhatsApp/CharuWhatsApp.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import style from "./style.module.css";
+import { Credit } from "../../components/Credit/index";
+
+function CharuWhatsApp() {
+    let data = {
+        name: "Charu Sachdeva",
+        "gh-link": "https://github.com/Charu271",
+        "art-name": "WhatsApp Logo",
+      };
+    return (
+        <div className={`${style.container} container`}>
+            <div className={style.wrapper}>
+                <div className={style.outer}>
+                    <div className={style.inner}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="rgb(253,253,253)" className="bi bi-telephone-fill" viewBox="0 0 16 16">
+                    <path fillRule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
+                    </svg>
+                    </div>
+                </div>
+            </div>
+            <Credit data={data}/>
+        </div>
+    )
+}
+
+export default CharuWhatsApp
diff --git a/src/art/CharuWhatsApp/style.module.css b/src/art/CharuWhatsApp/style.module.css
@@ -0,0 +1,44 @@
+.container{
+    background-color:rgb(31,182,159);
+}
+.outer{
+    background-color: white;
+    height:100px;
+    width:100px;
+
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50% 50% 50% 50%;
+}
+.inner{
+    background-color: rgb(82,206,95);
+    height:80px;
+    width:80px;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50% 50% 50% 50%;
+    position: relative;
+}
+.outer::before{
+    content:"";
+    border:40px solid white ;
+    top:20.5%;
+    left:-3%;
+    position:absolute;
+    clip-path: polygon(26% 12%, 57% 37%, 90% 66%, 0% 100%);
+}
+.inner::before{
+    content:"";
+    border:15px solid rgb(82,206,95) ;
+    top:64%;
+    left:-4%;
+    position:absolute; 
+    clip-path: polygon(26% 12%, 57% 37%, 90% 66%, 0% 100%);
+}
+.wrapper{
+    height: 110px;
+    width:110px;
+    position:relative
+}
diff --git a/src/art/HarshitSnowman/HarshitSnowman.jsx b/src/art/HarshitSnowman/HarshitSnowman.jsx
@@ -0,0 +1,46 @@
+import style from "./style.module.css";
+import { Credit } from "../../components/Credit/index";
+
+function HarshitSnowman() {
+  let data = {
+    name: "Harshit Pandey",
+    "gh-link": "https://github.com/HarshitPandey251",
+    "art-name": "Snow Man",
+  };
+
+  return (
+    <div className={`${style.container} container`}>
+      {/* do not edit the className above*/}
+
+      {/* your art blocks will come here */}
+      <div className={style.logoContainer}>
+
+            <div className={style.head}>
+                <div className={style.eye1}></div>
+                <div className={style.eye2}></div>
+                <div className={style.nose}></div>
+                <div className={style.mouth}>
+                </div>
+                <div className={style.hat}>
+                    <div className={style.hatTop}></div>
+                </div>  
+            </div>
+            <div className={style.body}>
+                <div className={style.buttons}>
+                    <div className={style.btn1}></div>
+                    <div className={style.btn2}></div>
+                    <div className={style.btn3}></div>
+                </div>     
+                <div className={style.stick1}></div>
+                <div className={style.stick2}></div>
+                <div className={style.middle}></div>   
+            </div>             
+      </div>
+
+      {/* do not edit line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default HarshitSnowman;
diff --git a/src/art/HarshitSnowman/style.module.css b/src/art/HarshitSnowman/style.module.css
@@ -0,0 +1,114 @@
+.container {
+  background: #ADD8E6;
+}
+
+.logoContainer {
+  position: relative;
+  height: 150px;
+  width: 150px;
+}
+
+.head {
+  width: 95px;
+  height: 95px;
+  left: 23px;
+  top: 20px;
+  background: #fff;
+  border-radius: 50%;
+  position: relative;
+  z-index: 4;
+  border: solid 2px #fff;
+}
+.eye1,.eye2{
+  background: #000000;
+  height: 15px;
+  width: 15px;
+  border-radius: 45%;
+  position: relative;
+}
+.eye1{
+  top: 30px;
+  left: 25px;
+}
+.eye2{
+  top: 15px;
+  left: 55px;
+}
+.nose {
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 45px solid #f49f36;
+  margin-left: 40px;
+  position: relative;
+  top: 18px;
+  left: -40px;
+  transform: rotate(180deg);
+}
+.mouth{
+  height: 5px;
+  width: 30px;
+  background: #000;
+  position: relative;
+  top: 25px;
+  left: 40px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+  transform: rotate(-20deg);
+}
+.hat{
+  background: #000;
+  height: 10px;
+  width: 108px;
+  position: relative;
+  bottom: 47px;
+  left: -10px;
+  border-radius: 4px;
+}
+.hatTop{
+  height: 0;
+  width: 60px;
+  border-bottom: 43px solid #000;
+  position: relative;
+  bottom: 42px;
+  left: 27px;
+}
+.body{
+  width: 115px;
+  height: 120px;
+  left: 15px;
+  top: -10px;
+  background: #fff;
+  border-radius: 50%;
+  position: relative;
+  border: solid 2px #fff;
+}
+.buttons{
+  position: relative;
+  top: 30px;
+  left: 50px;
+}
+.btn1,.btn2,.btn3{
+  height: 10px;
+  width: 10px;
+  background: #000;
+  border-radius: 45%;
+  margin-top: 10px;
+}
+.stick1, .stick2 {
+  position: relative;
+  width: 7px;
+  height: 70px;
+  border: solid 1px #705039;
+  border-radius: 25px;
+  background: #705039;    
+}
+.stick1 {
+  transform: rotate(-55deg);
+  bottom: 90px;
+  left: -18px;
+}
+.stick2 {
+  transform: rotate(50deg);
+  bottom: 162px;
+  left: 116px;
+}
diff --git a/src/art/SreehariTarget/SreehariTarget.jsx b/src/art/SreehariTarget/SreehariTarget.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 SreehariTarget() {
+  // Enter your name, github url and art-name below
+  let data = {
+    name: "Sreehari A",
+    "gh-link": "https://github.com/sreeharianilkumar1",
+    "art-name": "Target",
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the line above*/}
+
+      {/* your art blocks will come here */}
+      <div>
+        <div className={style.outercircle}>
+          <div className={style.redinnercircle}>
+            <div className={style.innercircle}>
+
+            </div>
+          </div>
+        </div>
+        <div className={style.textname}>
+          <h2>TARGET</h2>
+        </div>
+      </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default SreehariTarget;
diff --git a/src/art/SreehariTarget/style.module.css b/src/art/SreehariTarget/style.module.css
@@ -0,0 +1,24 @@
+.container {
+  background-color: red;
+}
+
+.outercircle{
+  padding: 30px;
+  background-color: white;
+  border-radius: 50%;
+}
+.redinnercircle{
+  padding: 30px;
+  background-color:red;
+  border-radius: 50%;
+}
+.innercircle{
+  padding: 30px;
+  background-color: white;
+  border-radius: 50%;
+}
+.textname{
+  color: white;
+  text-align: center;
+  font-size: x-large;
+}