From b26c47c4d26623cd1706444e52b28d49d9c8ae40 Mon Sep 17 00:00:00 2001 From: Lavish Bansal Date: Sun, 17 Oct 2021 13:52:06 +0530 Subject: [PATCH] skill bar addded --- README.md | 1 + Skill Bar/image.jpg | Bin 0 -> 29509 bytes Skill Bar/index.html | 47 +++++++++++++++++++ Skill Bar/readme.md | 2 + Skill Bar/style.css | 106 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 156 insertions(+) create mode 100644 Skill Bar/image.jpg create mode 100644 Skill Bar/index.html create mode 100644 Skill Bar/readme.md create mode 100644 Skill Bar/style.css diff --git a/README.md b/README.md index ace5347..600d8bb 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,7 @@ | 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/ | +| Skill Bar | https://lavishbansal17.github.io/Skill-Bar/ | - -- ![Project Intro Gif](./Gif.gif) diff --git a/Skill Bar/image.jpg b/Skill Bar/image.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f35d92642b084c70d2f408f32ce61d241636f58b GIT binary patch literal 29509 zcmeIb3piA5_c*+rDm)ik|e3*e3(k*6qEC5*qu;HLI`D&oMV#namulx zkW&%kd_K%L4l}doyVdhNZ_oRE|L^zy{@3?h*Y~^r$-c(kv(~!TTKC%PUVE)|@0eei zz0ih}$90cGEG#V01@I4Ic0pPY8!PMTFZf{xzZ`2gIM~@a)^TxhuHjk7!^6Ffo11t2 z#tppd`PXxEZxGtRzezw)P>_dDc(ahe=8Xb^0;@z=*Z>YY$65}KwF11{yaNC2ALd(# ze+|nJns3{PAmc{Jyp;JIe9l+q>FTWi+|32zn=-LX@8 zm&|TumHny*4ytJ#(>|_qLieQMc_U*JQ!{g$%U7=2+Sxm}xqEnedHeX@z7rS}eD_{R zMC9YB=$I$5aW9fyCa0vPrDwd!&C4$+EGjOktg5c5t$Y9B>S$^IX50T z%XQIZ)AoHg*9aU9Pt19@R#NF4S@4o;^Ex3Z<-Q%1RndM(_MZuM>winKzXbc2T%8aP z8w;2`Hhu^VQ6oZjJ!k!W{MNy58~AMlzir^ZX9J}c#9L_oYsxQMr_0#-?>nhfMwP`M zFE%w*?cVnB!ieOSxwvjd3|+gAuoh{O;A*2=Z)ZYxd^^sV6!}EDyF7a(86Lc3eDs0A zg4emArELw}-=+W5xN8Q)_u8!ju}QvLAI?!Zh8y%Xzem|7e^>s{m6Sq&~ zOx?Eg>Q=7%QrT_e1~TVwBWtU&t-SB|tJY1Op8jaH+ixsl+Dh}1o`tSd$EoIm!|IQp zrEZl_TemE%N0siAg>M-n8We+vSh{MO^(SRD&l}2uMKNc-F(J8&a9+x#LC)}~!x!E< zZ?%=jdc`gp%#>>$toQ5Y0Wt46(;m<@3Yh9nr)8LbG{QTE6b?pfL-LE z^4?HGnrgN0&ZOrK>g;%%HaV$+_=}@mTi9;j{;Y015`=K$j#8o{g)*OeZ>sJbj#0ew za7n*;T7H}B%S>oA@bsFky<}~FE+)jG$%G;kB9XTR_|GTjXQ)yh)kJaxPA9klmY$5p z4o$0jVISK{6wO!``S{rt%;&}+Cp#Iu69LmCg<8@u&W3>FqlWf5$vf$plet2aL)BPH zEb1Ae!)t6LUQOO$Sx~9&nBbbMc{xE`gOjD)uF>36swqv*PD*c-iwVXZQdsP&3x4u3 zd27#IOEuPF$Z2`8qYA~tgs!$wFmD6YsIe|-=pfvtK3dF1EgJ`g8R)%h`X;>%vZ87c zHSaWfw}_sNkI>JQHKy-}MPI#PIJn2z5WiWk@-m<&-?y z>Cuyw{=MMqo>v#_Qy$+qEhr#lbHjiw-;)WEKQSR8CNvsNZDB%dCy0ourDl$;M0gg- zyt8M={Qg2d0h349b9d)(Z>McwL76k8n9!|2N8uHCl1L6dmtS5~&}vhj8ztWt6>$ZA z{oadeGO^e8sDFBR#VHTisQI@NqiB>3$1#7k<<@1`&s z-ZqOue)rMA1r@TCG;&>thIg)Rk{xAC&Qoxsf~rS#g@ca|$8pwTj=BoYWYNfEx&EmM zzs{Zl*u}Eh^W3BlNt&1^}aaJ#5_DycCzjpXE zr_O;HYg!-iE8Y~lmO580v8T;>-U72`d_?9*uo3vYZ*SD|7 zJ4;+fJgo?``5k?P=cg&8a-x{hKz+RZtLYtuMfZA(0vlYlw?|#RaQ*!4_gfd!GRLh@ zi$~gU-b_dshwUedh^tmr2(;y|!FmuTNqJTdCL7+@nw((2%h`Wqh|E3kbmKN^4sAQt zqR*g;$VP3)-u2DSdhY$^1V?@iA;<=^{h)wuESvR+XJz#+t{rQ3c&qTAwoIR1hG(5B zklRjHUCB&{7a15{Cp$f5f~*a`nB+Zhl-y0K6_fP~bzYlLc~JSNyu8#suacKXdqXqu zimp{65L<#Knwn4Ur}YU}hi&jyKbxSQS-yQNtJC|)+TFc^*ZEGR8$SG2W3aEp%8Chb z*-{^Nm>~HFMR&bOJEARchUI_2!Ic{D$+Kcp1+}@4hTYO=>(qBJVqATh@XdHvQ)dI) z<@pO;CkLK&xqOx#LwyS~X-C___nP#DYs1#|;I^OL@#)JmUuoJgDaA8!eyW|4Mbh@$ zY_^cig1P$F$<&^fpIBKCh=>^SgDp_W#5d^LMh*w`W=%Ef+!+d2FitXw8a*r3BDaub z-u}hDz$eyiQ_+RZYB>jL&4P3}i}~&Yl`p0-@bgYOrWBo*5qU_pqD<(%#>GB({kQR^BOEW)qRZ`htMafrXPffkn_Tyr@+^pK z>3FAXEMPNfsFwviAZgsma4DJ?(;M&*`H--cTsS$<4~JAJQt;J;H8sf&9qX^nXGvNW zwmRE#D?i*Z``k+-6H1!F)opXJEPTtr^l1`%XC4G-#MH#`1(w;rawsemJs#Wd7`4H) z*5cExi?;6*4x2uDC)N3p^}z_5qxrPr(5+iz5=KJ>6(#VanVExLF-r8TF^19%6Y3hM zmEfZ`_mb`yQcdc5#M>1TA9a1OTM3csZFqfC>YMt7b!TRj_SqaFyWqi+sX{Rc*4)}j zKh#>L*iTyT{jf_fq`!UqkgRz@ah!DI$KAM>kBTjif4i{v0Q;g9;ZO=+RZEa?DmP_0$IMoo7gfB3v3qlld zoK%lK1#bFL@(zUXvb&R!hYp$C{!l>AHMy}s!wNZkvDhP8K}dPl9-evP$`h$)TS_B1zuzeS zz{Ogw(@&@&@gYrkcDh)Wx57Xhq0$M~y9?WmMLI^9s;3{@n4~SXR_gMuQ&)^`U%qjC zGOR&VMz6>9afOUJsb#+7(!lg=+9VizrlW!8w|Je}okbO{Q6t=?qbaib9m>xvtQ?(m zsz@7Do=g#(vusWndGNc*LT?1GiWwXTv)dT8?623y7pA$%jtLd2hS5#>m=M3WZB-8+ zQY{qGW9eYL=(%Jvt1G5%ky)}Ff-9)s+EuiPei+}dvb!~F*9Uif|A`oke8J3MgkaRm z(k`+WZN=ATJRlag^^1m0KamS*F7XVvNv3O)1G4%p-cKp(OPk-4$rc@oJ{~7KHN|7M zEnD#AUA|@>JOG6HN-fg!iecfj` z#Lju){)h1sgl$wsn!YwUsjnixZ_{%J{txL^S7$CwEIT^UgTzkvsdmW^ zKHFqOr}j-BlviVG>Uf7LSWHZvz~^;5PzjYbYVpXDJ?AYihgHrTb?$fHuzgG3sduLP zR6kz#-E!dp)krW#K3s2d4j%mC3g4#%`=jc~#_M*yc=bPJx%i*3r2X&k$ieGo=pBt3hW@RS-*)o* zZuspX{`+2&(<`KGR}Wu~lfj8Lf{MDSrepk}Bkeje-QjOHOJ*zT@zlHUxF&u)k@$G! z);<{xT_x1|@!Kxw(Kky>=t7$T9}{}drO$*2AQYNsIV?Q-A_Us?4;=3(wmr@8q%_w; zc9@4-f;JP%^tO-RQz+Ss@5!c+ z8fqI&t&UvRN4iz!_F`g=8dH@Z6&CBPypS7RYa?2}W#5a&UEiB?E(Xr+Iz0em#ZGr>$qp>{Lsv5IuY78 zbqzW#?tfaNW5DZ%a#$dGqe|FXd$k49-S`vFCZ}iQ-G|;t_$r#1w(84V*^E-$t=m|C zW35!{m5)nZ!>>p{NbR}QT~nz8e*TM|^9P=_I;VM=7?5dw(>WAbOHt?WHJ6?%w|uC+ zo<3dI+S}_@mm_KJK4R|hOvUpv?)1)w>mO(KOC_xt?>acu>P$#iCVj2^~`wQSN8Y9cmB_=(eC0dVwHCnH}H=(PkG;H-Oq zd?+~shH0A_#P{i}ls{Q@{s#Yez_$4PIpqtU}k zKFiWnLndV6#y5oVRk5^sT%Ljqu zMcfyt-^I(W6=zOGB!1v54%>heDIlY( zoVcq4b`?|PWBmzcD$}t%65<=}XKz`2)G70OLT<>|awl{#Gkx$WtM!EaJQKQI=%3Ji zr+mVKuq?f-jM&Zb0uyniX3_S1$0?Cb+b(ryzF!w>vSgi zBscE(*!4-$;J$i+Q?(>(X;M9^I66xqM00y&Eh;B9aO08@*}<_OVQc(3yl%5|Uc5|1 z`w1gSH(Q4@GkdPr=QeDvhqzGEGfDn}FfPvD2c9*?4}2u@Yn!Ee68qyA0W_30{aQ{C z`Wvw~`K5VB@C;%8PHTVb9(RW4$MODe+49F;Pd}6~dwpi(>Ak5zohJk*RwVNK(7B!T zz0|<|PZB5&@B5W%t`$iy9Sgjw^xBjc*1vu7GTg@2vaV<#!03FzdQCx~1rM~3w8DOb zhUk;p-;UZqn80srT;p8wJJ+=FIF_JJ&c> zNq*;z-?$-=@AG~}kDIjzrK`_ULWcT@qF&=P0CQIL-IMp=wf-{OSRLm-xfHvH{7x{> zE%wyI8j~oN0Gr4gd=0cw(%Bsi(}hfE$_Dk3d&Kp{GIj*}?!#DDzvGwcuFNTguO0e% z!F_Gr-%k-dT)Yvlj9!RqkcIBp@4qmC&SgS%(p247`W%z4mUbquc*an2o95>Pyau4K z!-_3jqz^9VUq7i)D?Oy}l`6l#UeT<;KyCA(t8r1pSb03*J#8%d`Q>b`(~K90#CUY3 zns>w(i1hAyk0BqG`$Fp{%D`LHyz&@vi2>IVjZ7PqOpJtk!iJs*IHMO_@PFcDUP%*?jmAFc0X{Y{r0yq@1&;o8LaSj!lZYA8|?Bjs$9G&5wnc?{`qEf;+1Uwie26&$Zccd5*cug zt|ZNi8>@f5E!E|i-mELVsGqJ{vL~v$1wZf zCkc)b1vIzo_a8VNpJHz5AL)7dadnla`g%2!C;87NgIT}e@TTtxAE;p>IwJQ^-!2Ks zrv>V|?Q0CWY_~u?x`m4;YkIH29BXM-+h?lRF{eXu{R0wyyooyMI@I>zm1Ql-NtlW; z=tHrMSIAIs);z7qj&TWb(79l%Q_`dmH)7~5u{YGqe@A&$XYD!3oFhln_nz_0h``Of zE%d^#LjFTvjmYcUmYq1?mYxr_v13mHJC7}u& zaE0fVzQ=cG;_~Sp&J09%SL)_k*(-!k7W2BkD6JaGQZ<<_msd*Rx;v#3didmPJ2jlF zv;4KeAbyrs=eQjkm2+we4)9ExZoG^dZ%rs&OvMJ`$*(5iK7PP4W(wU2=JhLz9JY*d zLOvp&gFhopvk0s-1IW!7}ZP$sm|N((6;1eU39MP@?u8}6i)#W1iY z3v9%^2-yYw0|#3IC1xc{5~~dD~RPCcJ!)f9CQA$HW&m4w9%xUjS#84Qlx}*_hD1BxFMxaa1+~?mfKv9Qoom z$Zx&;HirKLZxTg!(Af0Nv|FxTV<|HAd&Ic@P(W0^wg7bYA3BUILd|R2k4E-%RWhOO z2qVMgP3P(QUMl5JH+1O^Hu_wTPFGk`l^{M+>9p%qxRd87P$()FI>0h#;K%w&GGQ>9 zYrg-+K?UjwW#Ymd(;Z>f`7zSXpoI!xUwo009sU zyB!Awv^7L(90X#jzafCM?Va0tz&}Re8BEB4l08>XPGxY%sUnaz6RK_=q8cKBpTw9D zv>kX$JGR^Z2A_m%i!q}?Tn9H5C&9h!7`na$CJ;Sp*-Rv}Dj+*=96C!76mrBBGdbVhpQs2_U ze1)J2)h4=8Ql4Y_n6OLt+nrYL8&cIxz0U1hzvh56yGe%kOf80kesQ2&t4`)h|9fYT zwPI&W$hhbxG1W3$S$OCXXZ9Ct+Zs1;bv;_QQN%Ltq^1e6535PTt!#*NjiSj0sLoDN zpDo?cyMu^QV%~Luu#&3Uw@eMs(8@ND$ayKBQp{oZWm9a$QN(sU`(dW|cbrT&@XhLu9mOJco6kBbVHQ*OQqIeBmG)*uhXN8ZKS zephEwDndS~q{3M&wUwphx_3W&^~$?0G&|3Nu-Vbj+qHJ!RFhO$ z)T=$yU-Oy{n@;NNh~Fa&&H9KtU?J*0T0h^tDR&Frbg5#W9nQzjhLu%&jdLD4G1i_} zaS(T+fLct!)=2ElYZ2Bd09DvZv-ET4FYq>;hpcjn@1lI-O7Y)N=icN~Z~9=b3s`

?vExKN3-#9)QdXw1kW8h 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 literal 0 HcmV?d00001 diff --git a/Skill Bar/index.html b/Skill Bar/index.html new file mode 100644 index 0000000..38e3b6d --- /dev/null +++ b/Skill Bar/index.html @@ -0,0 +1,47 @@ + + + + + + + Skill Bar + + + +

+

Skill Bar Design

+
+ HTML +
+
+
+ 95% +
+
+ CSS +
+
+
+ 85% +
+
+ Javascript +
+
+
+ 75% +
+
+ + + diff --git a/Skill Bar/readme.md b/Skill Bar/readme.md new file mode 100644 index 0000000..b6613a7 --- /dev/null +++ b/Skill Bar/readme.md @@ -0,0 +1,2 @@ +# Skill Bar + \ No newline at end of file diff --git a/Skill Bar/style.css b/Skill Bar/style.css new file mode 100644 index 0000000..a559f38 --- /dev/null +++ b/Skill Bar/style.css @@ -0,0 +1,106 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #2e2e2e; +} +.container { + position: relative; + width: 500px; +} +.container h2 { + color: #fff; +} +.container .skills { + position: relative; + display: flex; + margin: 20px 0; + padding: 24px 10px 18px; + background: linear-gradient(#616161 0%, #333 10%, #222); + border-radius: 8px; + overflow: hidden; + border: 2px solid #000; + transition: 0.5s; +} +.container:hover .skills { + opacity: 0.05; +} +.container .skills:hover { + opacity: 1; +} +.container .skills:before { + content: ""; + position: relative; + top: 0; + left: 0; + width: 100%; + height: 50%; + background: rgba(255, 255, 255, 0.1); + z-index: 10; +} +.container .skills .Name { + position: relative; + width: 110px; + text-align: right; + color: #fff; + margin-top: -2px; + text-transform: uppercase; +} +.container .skills .value { + position: relative; + width: 40px; + text-align: left; + color: #fff; + margin-top: -2px; + text-transform: uppercase; +} +.container .skills .percent { + position: relative; + width: calc(400% - 150px); + height: 20px; + margin: 0 10px; + border-radius: 10px; + background: #151515; + box-shadow: inset 0 0 10px #000; + overflow: hidden; +} +.container .skills .percent .progress { + position: absolute; + top: 0; + left: 0; + width: 70%; + height: 100%; + border-radius: 10px; + background: #fff; + box-shadow: inset 0 0 2px #000; + animation: animate 4s ease-in-out forwards; +} +@keyframes animate { + from { + width: 0; + } +} +.container .skills:nth-child(2) .percent .progress { + background: linear-gradient(45deg, #1fe6ff, #673ab7); +} +.container .skills:nth-child(3) .percent .progress { + background: linear-gradient(45deg, #3bc0ff, #33ff00); +} +.container .skills:nth-child(4) .percent .progress { + background: linear-gradient(45deg, #ffee54, #ff00ca); +} +footer { + position: relative; + color: yellow; + top: 19rem; + right: 53rem; +} +footer a { + color: white; +}