From 9d90c5063a44fdf964a0ac74c76238eaa5f009cb Mon Sep 17 00:00:00 2001 From: "U.Senthil Kumar" <66522620+coderiksenthil@users.noreply.github.com> Date: Sat, 8 Jun 2024 08:39:15 +0530 Subject: [PATCH 1/9] Other Top Deals --- css/index.css | 66 +++++++++++++++++++++++++++++++++++++++++++++++- index.html | 69 +++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 124 insertions(+), 11 deletions(-) diff --git a/css/index.css b/css/index.css index de69c969..e1ce0c32 100644 --- a/css/index.css +++ b/css/index.css @@ -122,7 +122,7 @@ body { display: none; } -#category-grid { +/*#category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; @@ -147,7 +147,71 @@ body { .category h3 { font-size: 18px; color: #333333; +}*/ + +/*Other Top Deals*/ +#category-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 40px; + margin-top: 20px; + margin-bottom: 20px; + margin-left: 20px; + margin-right: 20px; +} + +.category-container { + position: relative; + border-radius: 15px; + overflow: hidden; +} + +.category { + width: 100%; /* Adjust the width as needed */ + height: auto; + display: block; + border-radius: 15px; +} + +.show-items-link { + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + text-decoration: none; /* Remove default link styling */ +} + +.show-items-btn { + background-color: rgba(0, 0, 0, 0.6); + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + display: none; + cursor: pointer; +} + +.category-container:hover .show-items-btn { + display: block; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + #category-grid { + grid-template-columns: repeat(2, 1fr); + gap: 20px; /* Adjust gap for smaller screens */ + margin: 10px; /* Adjust margins for smaller screens */ + } +} + +@media (max-width: 480px) { + #category-grid { + grid-template-columns: 1fr; + gap: 10px; /* Adjust gap for smallest screens */ + margin: 5px; /* Adjust margins for smallest screens */ + } } +/*Other Top Deals*/ /*adding transition property to the images of the cateogory-grid section*/ #category-grid img { diff --git a/index.html b/index.html index af8a160c..c0d41d0e 100644 --- a/index.html +++ b/index.html @@ -314,17 +314,66 @@
zr`_MXi sZ-$Z!E2sJKK;4gwQx<%r#{I3y!3U1<>Rb
za5AWR$)hb-w@b+)&4urun=4h^z0uZ2GzepQ^u<9fd5M
zUha_Is*4g6HX);gnOAWlNTC%UFRTzu4QpdvV!d~0f%k)s48U4lKTuATE{kr
z<)MV%GLEV~{l07JrI@3K-MVqo{Cp7V0zqJQso$!AQ9ny~IZd7-KwpUXkRL5eD~#5A
zH&WiD=byf(*C0znLyy{A0M=r?TjSQ3_YK)$^W(&)uT?Q@452#
*jXg2+5JF9WH;TI*W@#e@lqFQ!eT#3asF>_Mg=*DZyI+Cz(k7*Vs
zoO7cU6Y=yFOh_aemlP8Q0UyX{wjxkZ#ewbPG?;3-Or?SRa8V5^KU&@eg0@n6=S+>`
zk^HL4C(t;{P
zK~+e&i2FZYXT20<`!MGQ(pt1J%z+^dw(a*CxehpuuDWr=#?3ST2tHiQU7mO@gc$42
zPS$9CX*M^iz6&^LNqhn{9SFM5yBTI2an?A!&wxqnr>V!05$L>U#J0^Lb|R79Y2D$A
z_yS1y(&4sA=|Sk!eBIpLSC1(F?A4P`EmM$<_Tl?Bk(q?N2=sJ1f8y}>1;=T*)71jR
zmOw9j=NYgxl8ouLIZF?OlC@fsRwSM5`G-&04%r!pc)^U!hq%Bl>TbiN2iM(W!%sj^
zlyWtc3uQ~Olw6fLv=Q!-ervL3`j1~bM=Z$s^e1mjesjElG5AGL!Ivo-@d!>Y4Z2kE
zor`0fSV>8?eEgHQOXI^%hk}W?wMqW?@nPoW-1Q31YTEjMKl(Q-82ZcOj_;R~UmY*I
z;&?Npf|!a(n8QuixNW9V=rbg(iMSG2qTD#ttWUrFq7!-lfQyViTBh^y%9ET-lmLna
z-YgrX12gi}C;C2K(pPNn%ywDB=xcyc*IQzQi
$dNEbKf@->fJAqY6UYk)@D)QqRBEY1U68JYEEh)ft=P8_{t8VBPvd&6kcGe`}U>
zKg@6Vp7?uu*CoShF_Sp#cg_&$tglo80uCDD9EO%rjp}shNV-o{grIC=jK-a#s=#Zg
z12_nb3Gy9EVMFX~Pn8P9X!NB%ecax*q0OraFct`#D2@4fxh*k}opTJ{a*LL@#OItt
z4iSh >l7!r!K2qMxQLu!C@
zcWrd{#u)J2-`{i2{^oEv+`F&qddJK0z=hiW@WpDfPZHFD=@F@m%4kTvUd^Gl3Xy)3
zEAhXJwuqCUt|fk+VRmm
N
z-FssT;i*MOB@Q!5Fj_VTl9t^L*&j`~wuL>fzos;0Z6bAD#>njXf9cv9b*{wZIai>x
zEIUwfwAP2MZJo_NH*`ylXgc5BsoSn+H=N%sp-iyb&1uLj3=wJ?eDndo7nk#QvPM8Y
zsP8Ucivy#bc6RuzL6ObU8AFDs*E2hv)g0RIp$sWMS8%(xpTFsG?(EXTyLa4ynYEyl
z=$h`$8ThS)t^m=nCXfusAKF(|@n|OmD=pgD>vLp7riGU=RwcLo($(`}LMl%?Ahy
zm~0?ncF;*MADg3D?H*A}(+R`Jz-{A}Mmvh7U@s!?kG>Q#fW!?KvTH@W_R(-%YyPo)
zW!}?)1$meI-wjAp2$ee{>pD>Ju^LXPf3hn~iHs`iSt2ZJzab2c3d7u5sL+#*N=tbj
z0tcMD%t}mUfFsjv`1jUx9zlf-KLTLs>!5fsxBS|sw%~5(xVxcPzx8j5ZraK7K+s@}
z4fun3w2BGEuY|m^{BPjO`?V@S1ZP0;hnVH{i6#?~jeYe&qP*&u_xB%qeeC;T14Qk;
zz?666r#81Vhb^K<>x(5nlm^Z+vFtHk(bZte(T4`GVnDo}_{