diff --git a/src/App.js b/src/App.js index 0c6273b..837ea4e 100644 --- a/src/App.js +++ b/src/App.js @@ -40,7 +40,13 @@ import { HarshitSnowman, ApoorvaHat, CharuWhatsApp, - SreehariTarget + SreehariTarget, + RaveenaSachiniPeaceSymbol, + RaveenaSachiniPowerSymbol, + RaveenaSachiniSwastika, + SrishtiGuleriaRound, + AparnaGoyalReddit, + KratiMitraSignal, } from "./art/index"; // An array of Art Components @@ -81,7 +87,13 @@ let componentArr = [ , , , - + , + , + , + , + , + , + , ]; function App() { diff --git a/src/art/AparnaGoyalReddit/AparnaGoyalReddit.jsx b/src/art/AparnaGoyalReddit/AparnaGoyalReddit.jsx new file mode 100644 index 0000000..395accc --- /dev/null +++ b/src/art/AparnaGoyalReddit/AparnaGoyalReddit.jsx @@ -0,0 +1,36 @@ +import style from "./style.module.css"; +import { Credit } from "../../components/Credit/index"; + +function AparnaGoyalReddit() { + let data = { + name: "Aparna Goyal", + "gh-link": "https://github.com/GeekyGoyal", + "art-name": "Reddit Logo", + }; + return ( +
+ {/* DO NOT edit the className above*/} + + {/* your art blocks will come here */} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {/* do not edit the line below */} + +
+ ); +} + +export default AparnaGoyalReddit; diff --git a/src/art/AparnaGoyalReddit/style.module.css b/src/art/AparnaGoyalReddit/style.module.css new file mode 100644 index 0000000..70d589f --- /dev/null +++ b/src/art/AparnaGoyalReddit/style.module.css @@ -0,0 +1,125 @@ +.container { + background-color: #222230; +} + +.logo { + width: 150px; + height: 150px; + background-color: #ff4500; + border-radius: 50%; + outline:none; + position: relative; +} + +.face { + width: 85px; + height: 60px; + background-color: #fff; + position: absolute; + border-radius: 50%; + margin-top: 60px; + margin-left: 30px; +} + +.lefteye { + width: 17px; + height: 17px; + border-radius: 50%; + background-color: #ff4500; + position: absolute; + margin-top: 16px; + margin-left: 15px; +} + +.righteye { + width: 17px; + height: 17px; + border-radius: 50%; + background-color: #ff4500; + position: absolute; + margin-top: 16px; + margin-left: 55px; +} + +.smile { + width: 53px; + height: 45px; + position: absolute; + border: 4px solid transparent; + border-bottom: 5px solid #ff4500; + border-radius: 50%; + top: 5px; + left: 18px; +} + +.round1{ + width: 3.5px; + height: 3.5px; + background-color: #ff4500; + position: absolute; + border-radius: 50%; + top: 29.75px; + left: 40px; +} + +.round2{ + width: 3.5px; + height: 3.5px; + background-color: #ff4500; + position: absolute; + border-radius: 50%; + top: 29.5px; + left: 1.77px; + } + +.leftear { + width: 21px; + height: 25px; + background-color: #fff; + border-radius: 50%; + position: absolute; + top: 65px; + left: 22px; +} + +.rightear { + width: 21px; + height: 25px; + background-color: #fff; + position: absolute; + border-radius: 50%; + top: 65px; + right: 27px; +} + +.head1{ + width: 28px; + height: 4px; + background-color: #fff; + position: absolute; + top: 47px; + left: 63.5px; + transform: rotate(105deg); + +} +.head2{ +width: 28px; + height: 4px; + background-color:#fff; + position: absolute; + top: 35px; + left: 79px; + transform: rotate(195deg); + border-bottom-right-radius:0.3rem ; +} + +.head2::after{ + content: ""; + width: 15px; + height: 15px; + background-color:#fff; + border-radius: 50%; + position: absolute; + left: -6px; + top: -6px; +} diff --git a/src/art/KratiMitraSignal/KratiMitraSignal.js b/src/art/KratiMitraSignal/KratiMitraSignal.js new file mode 100644 index 0000000..8407764 --- /dev/null +++ b/src/art/KratiMitraSignal/KratiMitraSignal.js @@ -0,0 +1,30 @@ +import React from 'react' +import style from "./style.module.css"; +import { Credit } from "../../components/Credit/index"; + +function KratiMitraSignal() { + let data = { + name: "Krati Mitra", + "gh-link": "https://github.com/kratimitra", + "art-name": "Signal Logo", + }; + return ( +
+
+
+
+
+
+
+
+
+ + +
+
+ +
+ ) +} + +export default KratiMitraSignal diff --git a/src/art/KratiMitraSignal/style.module.css b/src/art/KratiMitraSignal/style.module.css new file mode 100644 index 0000000..29ec7a5 --- /dev/null +++ b/src/art/KratiMitraSignal/style.module.css @@ -0,0 +1,60 @@ +.container { + background-color: rgb(52, 70, 235); +} +.outer { + display: inline-flex; + border-radius: 60% 60% 60% 60%; + height: 120px; + background-color: rgb(52, 70, 235); + align-items: center; + border: 4px dashed white; + width: 120px; + justify-content: center; +} + +.inner { + width: 100px; + height: 100px; + position: relative; + justify-content: center; + display: inline-flex; + background-color: white; + align-items: center; + border-radius: 60% 60% 60% 60%; +} + +.uppertriangle { + position: absolute; + transform: rotate(223deg); + top: 87px; + height: 40px; + width: 40px; + right: 82px; + border-right: dotted 20px transparent; + border-bottom: solid 30px white; + border-left: dashed 20px transparent; +} + +.triangle { + position: absolute; + transform: rotate(225deg); + top: 79px; + left: -17px; + width: 10px; + height: 50px; + border-right: dotted 17px transparent; + border-bottom: solid 35px rgb(52, 70, 235); + border-left: dashed 17px transparent; +} + +.outertriangle { + position: absolute; + transform: rotate(345deg); + top: 45.5px; + width: 1px; + left: -5px; + height: 1px; + border-right: dotted 30px transparent; + border-bottom: dashed 50px white; + border-left: dotted 30px transparent; +} diff --git a/src/art/MrunaliniTile/MrunaliniTile.jsx b/src/art/MrunaliniTile/MrunaliniTile.jsx new file mode 100644 index 0000000..fa6f3f3 --- /dev/null +++ b/src/art/MrunaliniTile/MrunaliniTile.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 ComponentName() { + // Enter your name, github url and art-name below + let data = { + name: "", + "gh-link": "", + "art-name": "", + }; + return ( +
+ {/* DO NOT edit the line above*/} + + {/* your art blocks will come here */} +
+ + +
+ + {/* do not edit the line below */} + +
+ ); +} + +export default ComponentName; diff --git a/src/art/MrunaliniTile/style.module.css b/src/art/MrunaliniTile/style.module.css new file mode 100644 index 0000000..0ff3451 --- /dev/null +++ b/src/art/MrunaliniTile/style.module.css @@ -0,0 +1,3 @@ +.container { + background-color: pink; +} diff --git a/src/art/RaveenaSachiniPeaceSymbol/RaveenaSachiniPeaceSymbol.jsx b/src/art/RaveenaSachiniPeaceSymbol/RaveenaSachiniPeaceSymbol.jsx new file mode 100644 index 0000000..c851e89 --- /dev/null +++ b/src/art/RaveenaSachiniPeaceSymbol/RaveenaSachiniPeaceSymbol.jsx @@ -0,0 +1,36 @@ +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 RaveenaSachiniPeaceSymbol() { + // Enter your name, github url and art-name below + let data = { + name: "Raveena Sachini", + "gh-link": "https://github.com/raveena69", + "art-name": "Symbol of Peace", + }; + return ( +
+ {/* DO NOT edit the line above*/} + + {/* your art blocks will come here */} +
+
+
+
+
+
+
+
+
+ + {/* do not edit the line below */} + +
+ ); +} + +export default RaveenaSachiniPeaceSymbol; diff --git a/src/art/RaveenaSachiniPeaceSymbol/style.module.css b/src/art/RaveenaSachiniPeaceSymbol/style.module.css new file mode 100644 index 0000000..511388d --- /dev/null +++ b/src/art/RaveenaSachiniPeaceSymbol/style.module.css @@ -0,0 +1,45 @@ +.container { + background-color:rgb(154, 176, 194); +} + +.outCircle{ + width:180px; + height:180px; + border-radius:180px; + background-color:black; +} + +.innerCircle{ + width:143px; + height:143px; + border-radius:143px; + background-color:rgb(154, 176, 194); + position:absolute; + margin: 19px 0px 0px 19px; +} + +.innerLongVertical{ + width:22px; + height:155px; + background-color:black; + position:absolute; + margin: 0px 0px 0px 61px; +} + +.innerShortLeft{ + width:22px; + height:100px; + background-color:black; + transform: rotate(50deg); + position:absolute; + margin: 39px 0px 0px 30px; +} + +.innerShortRight{ + width:22px; + height:100px; + background-color:black; + transform: rotate(-50deg); + position:absolute; + margin: 40px 0px 0px 92px; +} diff --git a/src/art/RaveenaSachiniPowerSymbol/RaveenaSachiniPowerSymbol.jsx b/src/art/RaveenaSachiniPowerSymbol/RaveenaSachiniPowerSymbol.jsx new file mode 100644 index 0000000..12d1d67 --- /dev/null +++ b/src/art/RaveenaSachiniPowerSymbol/RaveenaSachiniPowerSymbol.jsx @@ -0,0 +1,35 @@ +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 RaveenaSachiniPowerSymbol() { + // Enter your name, github url and art-name below + let data = { + name: "Raveena Sachini", + "gh-link": "https://github.com/raveena69", + "art-name": "Power Symbol", + }; + return ( +
+ {/* DO NOT edit the line above*/} + + {/* your art blocks will come here */} +
+
+
+
+
+
+
+
+ + {/* do not edit the line below */} + +
+ ); +} + +export default RaveenaSachiniPowerSymbol; diff --git a/src/art/RaveenaSachiniPowerSymbol/style.module.css b/src/art/RaveenaSachiniPowerSymbol/style.module.css new file mode 100644 index 0000000..eff93d5 --- /dev/null +++ b/src/art/RaveenaSachiniPowerSymbol/style.module.css @@ -0,0 +1,38 @@ +.container { + background-color: lightsteelblue; +} + +.outerBox{ + width: 180px; + height: 180px; + /* background-color: teal; */ +} + +.outerCircle{ + width: 160px; + height: 160px; + border-radius: 160px; + border: 20px solid black; + position: absolute; + margin-top: 20px; + margin-left: 10px; +} + +.outLineVertical{ + width:50px; + height:100px; + border-radius: 130px; + background-color:lightsteelblue; + position: absolute; + margin-left: 65px; + z-index: 1; +} + +.insideLineVertical{ + width:30px; + height:100px; + border-radius: 130px; + background-color:black; + position: absolute; + margin-left: 10px; +} diff --git a/src/art/RaveenaSachiniSwastika/RaveenaSachiniSwastika.jsx b/src/art/RaveenaSachiniSwastika/RaveenaSachiniSwastika.jsx new file mode 100644 index 0000000..9950c51 --- /dev/null +++ b/src/art/RaveenaSachiniSwastika/RaveenaSachiniSwastika.jsx @@ -0,0 +1,37 @@ +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 RaveenaSachiniSwastika() { + // Enter your name, github url and art-name below + let data = { + name: "Raveena Sachini", + "gh-link": "https://github.com/raveena69", + "art-name": "Swastika", + }; + return ( +
+ {/* DO NOT edit the line above*/} + + {/* your art blocks will come here */} +
+
+
+
+
+
+
+
+
+
+ + {/* do not edit the line below */} + +
+ ); +} + +export default RaveenaSachiniSwastika; diff --git a/src/art/RaveenaSachiniSwastika/style.module.css b/src/art/RaveenaSachiniSwastika/style.module.css new file mode 100644 index 0000000..a93a06e --- /dev/null +++ b/src/art/RaveenaSachiniSwastika/style.module.css @@ -0,0 +1,61 @@ +.container { + background-color: lightgray; +} + +.outBox{ + height: 177px; + width:177px; +} + +.firstRow{ + height: 90px; + width: 20px; + background: black; + position: absolute; + margin-bottom: 120px; + margin-right: 122 px; +} + +.firstRowLong{ + height: 20px; + width: 175px; + background: black; + transform: rotate(-90deg); + position: absolute; + margin-top: 78px; +} + +.secondRow{ + height: 20px; + width: 98px; + background: black; + transform: rotate(90deg); + position: absolute; + margin-top: 118px; + margin-left: 118px; +} + +.thirdRow{ + height: 20px; + width: 98px; + background: black; + position: absolute; + margin-left: 79px; +} + +.secondRowLong{ + height: 20px; + width: 177px; + background: black; + position: absolute; + margin-top: 76px; +} + +.fourthRow{ + height: 20px; + width: 98px; + background: black; + position: absolute; + margin-top: 157px; +} + diff --git a/src/art/SrishtiGuleriaRound/SrishtiGuleriaRound.jsx b/src/art/SrishtiGuleriaRound/SrishtiGuleriaRound.jsx new file mode 100644 index 0000000..f309c65 --- /dev/null +++ b/src/art/SrishtiGuleriaRound/SrishtiGuleriaRound.jsx @@ -0,0 +1,27 @@ +import style from "./style.module.css"; +import { Credit } from "../../components/Credit/index"; + +function SrishtiGuleriaRound() { + // Enter your name, github url and art-name below + let data = { + name: "Srishti Guleria", + "gh-link": "https://github.com/sg7801", + "art-name": "Round Animation", + }; + return ( +
+ {/* DO NOT edit the line above*/} + + {/* your art blocks will come here */} +
+ + + +
+ {/* do not edit the line below */} + +
+ ); +} + +export default SrishtiGuleriaRound; diff --git a/src/art/SrishtiGuleriaRound/style.module.css b/src/art/SrishtiGuleriaRound/style.module.css new file mode 100644 index 0000000..e72ed13 --- /dev/null +++ b/src/art/SrishtiGuleriaRound/style.module.css @@ -0,0 +1,47 @@ +.container{ + background-color: rgb(0, 0, 0); + display:flex; + justify-content:center; + align-items:center; +} + +@keyframes animate{ + 0%{ + transform: rotate(0deg); + } + 100%{ + transform: rotate(360deg); + } +} +.square{ + position: relative; + height: 150px; + width: 150px; +} +.square span:nth-child(1){ + position: absolute; + width: 100%; + height: 100%; + border: 6px solid hsl(83, 100%, 61%); + border-radius: 10% ; + transition: 0.9s; + animation: animate 4s linear infinite; +} +.square span:nth-child(2){ + position: absolute; + width: 100%; + height: 100%; + border: 6px solid #f1f1f5; + border-radius: 4%/100%; + transition: 0.9s; + animation: animate 2s linear ease-in-out; +} +.square span:nth-child(3){ + position: absolute; + width: 100%; + height: 100%; + border: 5px solid #fc97ff; + border-radius: 5%; + transition: 0.9s; + animation: animate 8s linear infinite; +} diff --git a/src/art/index.js b/src/art/index.js index 15f0c52..f580919 100644 --- a/src/art/index.js +++ b/src/art/index.js @@ -34,4 +34,10 @@ export { default as SrishtiGuleriaMyntra } from "./SrishtiGuleriaMyntra/SrishtiG export { default as HarshitSnowman } from "./HarshitSnowman/HarshitSnowman"; export { default as ApoorvaHat } from "./ApoorvaHat/ApoorvaHat"; export { default as CharuWhatsApp } from "./CharuWhatsApp/CharuWhatsApp"; -export { default as SreehariTarget } from "./SreehariTarget/SreehariTarget"; \ No newline at end of file +export { default as SreehariTarget } from "./SreehariTarget/SreehariTarget"; +export { default as RaveenaSachiniPeaceSymbol } from "./RaveenaSachiniPeaceSymbol/RaveenaSachiniPeaceSymbol"; +export { default as RaveenaSachiniPowerSymbol } from "./RaveenaSachiniPowerSymbol/RaveenaSachiniPowerSymbol"; +export { default as RaveenaSachiniSwastika } from "./RaveenaSachiniSwastika/RaveenaSachiniSwastika"; +export { default as SrishtiGuleriaRound } from "./SrishtiGuleriaRound/SrishtiGuleriaRound"; +export { default as AparnaGoyalReddit } from "./AparnaGoyalReddit/AparnaGoyalReddit"; +export { default as KratiMitraSignal } from "./KratiMitraSignal/KratiMitraSignal"; \ No newline at end of file