sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Increase size and reposition background logos with varied rotations

Browse Source 
Adjusts dimensions, positions, and rotation angles of background logos for improved visibility and aesthetic placement across different screen areas.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/W476LqQ
This commit is contained in:
sebastjanartic 2025-08-28 15:43:22 +00:00
parent 38274ff979
commit 0998b6daf6
2 changed files with 164 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
client/src/components/search-header.tsx
View File

@ -45,41 +45,59 @@ export default function SearchHeader({
return (
<div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
{/* go4.video logoti v headerju - bolj vidni */}
{/* go4.video logoti v headerju - veliki in vidni */}
<div
style={{
position: 'absolute',
top: '5px',
right: '8%',
top: '2px',
right: '15%',
transform: 'rotate(-15deg)',
width: '140px',
height: '70px',
width: '200px',
height: '100px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 1,
opacity: 0.4,
filter: 'blur(0.3px)'
opacity: 0.7,
filter: 'blur(0.1px)'
}}
/>
<div
style={{
position: 'absolute',
top: '5px',
left: '20%',
transform: 'rotate(25deg)',
width: '180px',
height: '90px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 1,
opacity: 0.65,
filter: 'blur(0.1px)'
}}
/>
<div
style={{
position: 'absolute',
top: '8px',
left: '12%',
transform: 'rotate(25deg)',
width: '120px',
height: '60px',
right: '45%',
transform: 'rotate(-35deg)',
width: '160px',
height: '80px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 1,
opacity: 0.35,
filter: 'blur(0.3px)'
opacity: 0.6,
filter: 'blur(0.1px)'
}}
/>

206
client/src/pages/home.tsx
View File

@ -85,15 +85,111 @@ export default function Home() {
/>
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
{/* Background logo decorations - go4.video logos bolj vidni */}
{/* Background logo decorations - veliki go4.video logoti po različnih kotih */}
{/* Zgoraj levo */}
<div
style={{
position: 'absolute',
top: '15%',
right: '85%',
transform: 'rotate(-20deg)',
width: '180px',
height: '90px',
top: '5%',
left: '3%',
transform: 'rotate(-25deg)',
width: '300px',
height: '150px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.6,
filter: 'blur(0.1px)'
}}
/>
{/* Zgoraj desno */}
<div
style={{
position: 'absolute',
top: '8%',
right: '2%',
transform: 'rotate(30deg)',
width: '280px',
height: '140px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.55,
filter: 'blur(0.1px)'
}}
/>
{/* Sredina levo */}
<div
style={{
position: 'absolute',
top: '40%',
left: '1%',
transform: 'rotate(18deg)',
width: '260px',
height: '130px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.5,
filter: 'blur(0.1px)'
}}
/>
{/* Sredina desno */}
<div
style={{
position: 'absolute',
top: '45%',
right: '1%',
transform: 'rotate(-35deg)',
width: '240px',
height: '120px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.45,
filter: 'blur(0.1px)'
}}
/>
{/* Spodaj levo */}
<div
style={{
position: 'absolute',
top: '75%',
left: '2%',
transform: 'rotate(-15deg)',
width: '220px',
height: '110px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.4,
filter: 'blur(0.1px)'
}}
/>
{/* Spodaj desno */}
<div
style={{
position: 'absolute',
top: '80%',
right: '3%',
transform: 'rotate(22deg)',
width: '200px',
height: '100px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
@ -101,61 +197,7 @@ export default function Home() {
pointerEvents: 'none',
zIndex: 0,
opacity: 0.35,
filter: 'blur(0.3px)'
}}
/>
<div
style={{
position: 'absolute',
top: '50%',
left: '85%',
transform: 'rotate(15deg)',
width: '160px',
height: '80px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.3,
filter: 'blur(0.3px)'
}}
/>
<div
style={{
position: 'absolute',
top: '80%',
right: '90%',
transform: 'rotate(-10deg)',
width: '140px',
height: '70px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.25,
filter: 'blur(0.3px)'
}}
/>
<div
style={{
position: 'absolute',
top: '25%',
left: '88%',
transform: 'rotate(35deg)',
width: '120px',
height: '60px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.2,
filter: 'blur(0.3px)'
filter: 'blur(0.1px)'
}}
/>
@ -178,40 +220,58 @@ export default function Home() {
{/* Footer with large triangle design */}
<footer className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden">
{/* go4.video logoti v footerju - bolj vidni */}
{/* go4.video logoti v footerju - veliki in vidni */}
<div
style={{
position: 'absolute',
top: '15px',
right: '12%',
top: '10px',
right: '8%',
transform: 'rotate(-20deg)',
width: '170px',
height: '85px',
width: '250px',
height: '125px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 1,
opacity: 0.45,
filter: 'blur(0.2px)'
opacity: 0.7,
filter: 'blur(0.1px)'
}}
/>
<div
style={{
position: 'absolute',
bottom: '15px',
left: '8%',
bottom: '10px',
left: '5%',
transform: 'rotate(30deg)',
width: '140px',
height: '70px',
width: '220px',
height: '110px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 1,
opacity: 0.4,
opacity: 0.65,
filter: 'blur(0.1px)'
}}
/>
<div
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'rotate(-45deg)',
width: '180px',
height: '90px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.3,
filter: 'blur(0.2px)'
}}
/>