From 3e4088aa9313547a46cd10cef9799b8cdbd2ecbc Mon Sep 17 00:00:00 2001 From: Lavish Bansal Date: Sat, 16 Oct 2021 22:02:16 +0530 Subject: [PATCH] initial commit --- Isometric social media icon/image.jpg | Bin 0 -> 12510 bytes Isometric social media icon/index.html | 77 +++++++++++++++ Isometric social media icon/readme.md | 2 + Isometric social media icon/style.css | 125 +++++++++++++++++++++++++ README.md | 3 +- 5 files changed, 206 insertions(+), 1 deletion(-) create mode 100644 Isometric social media icon/image.jpg create mode 100644 Isometric social media icon/index.html create mode 100644 Isometric social media icon/readme.md create mode 100644 Isometric social media icon/style.css diff --git a/Isometric social media icon/image.jpg b/Isometric social media icon/image.jpg new file mode 100644 index 0000000000000000000000000000000000000000..760db050085b7725adbf66e3c40d76834dd5923a GIT binary patch literal 12510 zcmeI2XH-*tm-a*NU=&1YL5lPy9f44!iGV0Y5Qs<<5RfW86afv=q=SIcdw>9;qtZJF zgx-7agc>G3_snz8nwj;^`_3olU7no1&WD_H*1nS8f9<`mbFN0OW&zh8Dyu02aBy${ zFR&lL)dWBhfQO6wYsYT**qwlwfB+w#fRu=ckeHm5oScl5jEsWv`ZWqlASD^uwVT&~ zH>hc7XvnE(Z{4K6b)A}q`qxcx@UYk56Oa%PkWf>QQBeOsZ&%*{Kw_MIJZU@}762{~ z2M>sI)eHau05}BLY=0&EuNw|7Hb+7tViHm^>gej}KQk~iGqN$DAx zS=l+cdHH3C@`_4iRdvmerskH`w)T$BpMyigsFBgJ@wxeh#iiwy)wT7#{e#1!WAw@C z*)Lr<0KC6s{ZrY0&;`Wm!o|nO!zcQs3kUZtHt>M>1b2i8ughx_nL6HJx#v$ztq}FK z^g9Ww@RMDdmretuH`zqy*!O-(`-igsJ7EF;BW3>-_P4Ha0688G_Rqru0>FTi>oCqQ zxPRi$Z}5kKKMed~;12_T82JBy0q DCvum{rKS;j1G=6Y<25!l&?f#2f8CJ`uy=v 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�EN;e81xmuq}EjZG$Q}U(pLFK zttUf#vjd}ToFtvOt#u9(WR2&YF?tNaR%inzg!6HHl81Sd{&f8dhE} z#Ez^ob-hDiI0bO{UQ4=P+hLltt`Y!3G`I0EZB6(fAo3v*yuS3HQuCn&&DdCeh%9!D zT6NJwlepe;?^Ris$v0do+Rm(qcCm}l#`+o7uDQ~YD{r9NIMK#d1M%x*q3w1mJ0PO6 zaJ53Ou$R_lH_+;sK1grwr)Qr$L~t@3i`4EuP+x-QEuy@HRa+9`%!Z<)HU70J`?u!o zcRF&}Y*j{yTvYAHUw-XdlB2enDo&I^QBHlhT*kyA?6SYxb!IPP4xDU;0our)F9PG3 zY(0@$o$&v&@nh}5gqmv%s)YfTZB#A2Jn*AR^%;qCj14=i?~Z_!87UOykOL`t@rCUB z@4VR-PP{-_E_9j|&KZ*)k(G}xPbRi2JjzP-@EL&puvL+wH|mx2fg!7Go4yr&QdVKG z@7XD_BW4rjDV8(OkOy}h5`0ejrVZB)!9eva!SF|2HlA=-G-%F**2+sP?G57FvLtO4 zMrFL7tO;{B#84ybeQ}I4$ZWe}NjJk{(VNgTj2b~7s5v2dGn!{Pq}}32&SD{ z(c@a&v7D(lB-3D@o0tPz^`9}}k3$B1PtY9*hyMH|Bd zF2v0W40~jLCK^CqL^uN8P`YF1$Kj{eQk4GloXv4%#>#SC$~nxwY@iimvFN!8KAOa> z*rt;2mXV(^jNpg9=`2;d^&bW;$^)iYdzTf)UQ6QRIytx6b~_YW4i;x3Q^X#I;6n|M zZRUMh$L~(ukMh6!$ZFCR6c0{O-+r>`h;>Z=E3;+>?8*Ayn>F-wdR6@|c>)ai{cGV^ zZ?;C&lDmUfD?rx56`U*j9Tl8dp!Q-ytB+*8A$7hqMj&5$Q<+9Bs*&`kkqK?K=dREL;J3?EZGfuV9wuwxql?htA|YSAduC$8(B|{ zwQN!;g;1W+lhYb*V{r*7YQqCgH!x-I2tf5EFnGOT|c9B=Kxl|(&M#4Bza$&1C zqZlTcSl4tpJo}jNf!My0*l2(Cagn+m`J2H8=onb+5xv02pyJr~h0(UJPGg>MWQQgoVQZm1j0)o9vyq0VQ*TELP+X`_>cSMU&7J>0 zT|V=5I#uQ_+}R_ch&BCf0n-XloiDUTQZ&~2SMgHpf|z9c3BPBa{Ydvv?`608b+vU3 z_J272zuf-cGaeS|1W3UErM5Xeu3;a7Fb8jV21Ow6DkH~F$5Xnbv)*=wT-vlvdY-s1K^-6#*F;?F?F@7=9r45xP?<&2&kGfAEAHbE7Dk5RP za-OLpy1Fr|!9A^(71KW8q=1-v?Bi3v;XhRLwY(vY#{;!Y1Lh5#xj5H}(MyMMz5m5F zcgk^Ud}vfqjEe)rOrP@$rQR!(X@yVxsN9X58btWMOtB>6EmxYpX@mOD$&g6j4L1=S z2B$iH##;rH^T-P{Muiy$*mzag1J=6%WN0SZoC>q<$5DDx zJ^TgPPSgWcT02GQqVi-~m3R2SHH}04ge|=p1aR_+8h->TS8M_Ea%EnqB8C|aBW9x zk0Sszr?H$ss5;pXS4Km2;ar19%E&ux?CERU6{FS-T#aR=f`*frrG~X{b`4cBxp z1vD?@iSX$jx_qkpDcruf-Nv4T2*DG|G z?x{M>kkLOIHsr+1LsqHhHnlo|wYQ#(@HsfM7bY*fW?Cpc8{N}`_%BiSw~MZqP|8-F&0Vzv7>+pJ1Qp%w|KNy(iD}8 s5H7W3PdH**9DMcLT0VbXk^A$S;2#G5Fz| + + + + + + Isometric social media icon + + + + + + + + diff --git a/Isometric social media icon/readme.md b/Isometric social media icon/readme.md new file mode 100644 index 0000000..fc335a9 --- /dev/null +++ b/Isometric social media icon/readme.md @@ -0,0 +1,2 @@ +# Isometric Social Media Icon + \ No newline at end of file diff --git a/Isometric social media icon/style.css b/Isometric social media icon/style.css new file mode 100644 index 0000000..3b4a4a3 --- /dev/null +++ b/Isometric social media icon/style.css @@ -0,0 +1,125 @@ +* { + margin: 0; + padding: 0; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #222; +} + +ul { + position: relative; + display: flex; + transform-style: preserve-3d; + transform: rotate(-25deg) skew(25deg); +} + +ul li { + position: relative; + list-style: none; + width: 60px; + height: 60px; + margin: 0 10px; +} + +ul li::before { + content: ""; + position: relative; + bottom: -10; + left: 0; + width: 100%; + height: 10px; + background: #2a2a2a; + transform-origin: top; + transform: skewX(-41deg); +} + +ul li::after { + content: ""; + position: relative; + top: 0; + left: -9; + width: 9px; + height: 100%; + background: #2a2a2a; + transform-origin: right; + transform: skewY(-41deg); +} + +ul li span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background: #333; + color: rgba(255, 255, 255, 0.2); + font-size: 30px !important; + transition: 0.2s; +} + +ul li:hover span { + z-index: 1000; + transition: 0.5s; + color: #fff; + box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05); +} + +ul li:hover span:nth-child(5) { + transform: translate(40px, -40px); + opacity: 1; +} +ul li:hover span:nth-child(4) { + transform: translate(30px, -30px); + opacity: 0.8; +} +ul li:hover span:nth-child(3) { + transform: translate(20px, -20px); + opacity: 0.6; +} +ul li:hover span:nth-child(2) { + transform: translate(10px, -10px); + opacity: 0.4; +} +ul li:hover span:nth-child(1) { + transform: translate(0px, -0px); + opacity: 0.2; +} + +ul li:nth-child(1):hover span { + background: #3b5999; +} + +ul li:nth-child(2):hover span { + background: #55acee; +} + +ul li:nth-child(3):hover span { + background: #25d366; +} + +ul li:nth-child(4):hover span { + background: #e4405f; +} + +ul li:nth-child(5):hover span { + background: #0077b5; +} + +footer { + position: relative; + color: yellow; + top: 19rem; + right: 50rem; +} + +footer a { + color: white; +} diff --git a/README.md b/README.md index f727737..ace5347 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,8 @@ | Parallax Sunset | https://sinc0115.github.io/parallax-sunset/ | | Captain America Animation | https://jonathanallisson.github.io/Captain/ | | Plane Animation | https://jonathanallisson.github.io/plane/ | ---- +| Isometric social media icon | https://lavishbansal17.github.io/Isometric-social-media-icon/ | +- -- ![Project Intro Gif](./Gif.gif)