↓
↓
/* ---------------- HERO ---------------- */ #hero { background: url('SaulHero5.jpg') center/cover no-repeat; } /* ✅ INSTAGRAM MOBILE FIX ONLY */ .ig-mobile #hero { background-position: 52% center; background-size: 105% auto; } /* ---------------- ARROWS ---------------- */ .arrow-down { position:absolute; left:50%; transform:translateX(-50%); font-size:1.2rem; color: rgba(255,255,255,0.85); user-select:none; cursor:pointer; transition: opacity 1.5s ease; } #hero .arrow-down { opacity:0.75; text-shadow: 0.5px 0 currentColor, -0.5px 0 currentColor, 0 0.5px currentColor, 0 -0.5px currentColor; } .arrow-fade { opacity:0; pointer-events:none; } .arrow-visible { opacity:0.75; pointer-events:auto; cursor:pointer; } .arrow-down { bottom: 40px; } /* ---------------- GRID ---------------- */ .folder-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:80px; max-width:900px; padding:0 60px; justify-items:center; } .folder { display:flex; flex-direction:column; align-items:center; cursor:pointer; position: relative; } .folder-stack { position: relative; width:144px; height:64px; } .folder-main { position: absolute; right:0; top:0; width:88px; height:64px; background:#e4c97a; border-radius:3px; box-shadow:2px 2px 0 #000; z-index:10; } .folder-tab { position:absolute; top:-8px; left:8px; width:32px; height:12px; background:#e4c97a; border-radius:2px; box-shadow:1px 1px 0 #000; } .trail { position:absolute; top:0; width:88px; height:64px; border-radius:3px; } .trail.t1 { right:12px; background:#c9a84a; z-index:6; } .trail.t2 { right:26px; background:#9b5c5c; z-index:5; } .trail.t3 { right:40px; background:#6e7f52; z-index:4; } .trail.t4 { right:54px; background:#5a6b8c; z-index:3; } .folder span { margin-top:16px; width:144px; text-align:center; font-size:0.7rem; letter-spacing:0.6px; opacity:0.85; } .photo-count { font-size:0.6rem; opacity:0.6; margin-top:2px; } /* ---------------- PREVIEW IMAGES ---------------- */ .folder-preview { position: absolute; width:88px; height:64px; object-fit: cover; border-radius: 3px 3px 0 0; top: -20px; right: 0; transform-origin: bottom right; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 15; } .folder:hover .folder-preview { opacity: 1; } /* ---------------- CONTACT ---------------- */ @keyframes breathe { 0% { transform: scale(1); opacity:0.85; } 50% { transform: scale(1.05); opacity:1; } 100% { transform: scale(1); opacity:0.85; } } .contact-icons { display:flex; gap:80px; } .contact-icons a { animation:breathe 6s ease-in-out infinite; } .contact-icons a:nth-child(2) { animation-delay:1.2s; } .contact-icons a:nth-child(3) { animation-delay:2.4s; } .icon svg { width:36px; height:36px; stroke:#eee; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition: transform 0.3s ease; } .icon:hover svg { transform:translateY(-4px); } /* ---------------- MOBILE ---------------- */ @media (max-width:768px){ #hero { background:url('SAULZIDULKABEJCEK-3.jpg') center/cover no-repeat; } #folders { background: url('backgroundwebsite2.jpg') center/cover no-repeat; } #contact { background: url('backgroundwebsite.jpg') center/cover no-repeat; } .folder-grid { grid-template-columns: repeat(2,1fr); gap:48px 24px; padding:0 24px; } .folder { transform: scale(0.85); } .contact-icons { gap:48px; } .icon svg { width:30px; height:30px; stroke-width:1.2; } .folder-preview { display:none; } }
↓
↓
LinkedIn Instagram Email
/* ---------------- HERO ---------------- */ #hero { background: url('SaulHero5.jpg') center/cover no-repeat; } /* ✅ INSTAGRAM FIX */ .instagram-browser #hero { background: none; position: relative; } .instagram-browser #hero::before { content: ""; position: absolute; inset: 0; background: url('SaulHero5.jpg') center center / cover no-repeat; transform: scale(1.02); /* prevents edge gaps */ z-index: -1; } /* ---------------- ARROWS ---------------- */ .arrow-down { position:absolute; left:50%; transform:translateX(-50%); font-size:1.2rem; color: rgba(255,255,255,0.85); user-select:none; cursor:pointer; transition: opacity 1.5s ease; } #hero .arrow-down { opacity:0.75; text-shadow: 0.5px 0 currentColor, -0.5px 0 currentColor, 0 0.5px currentColor, 0 -0.5px currentColor; } .arrow-fade { opacity:0; pointer-events:none; } .arrow-visible { opacity:0.75; pointer-events:auto; cursor:pointer; } .arrow-down { bottom: 40px; } /* ---------------- GRID ---------------- */ .folder-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:80px; max-width:900px; padding:0 60px; justify-items:center; } .folder { display:flex; flex-direction:column; align-items:center; cursor:pointer; position: relative; } .folder-stack { position: relative; width:144px; height:64px; } .folder-main { position: absolute; right:0; top:0; width:88px; height:64px; background:#e4c97a; border-radius:3px; box-shadow:2px 2px 0 #000; z-index:10; } .folder-tab { position:absolute; top:-8px; left:8px; width:32px; height:12px; background:#e4c97a; border-radius:2px; box-shadow:1px 1px 0 #000; } .trail { position:absolute; top:0; width:88px; height:64px; border-radius:3px; } .trail.t1 { right:12px; background:#c9a84a; z-index:6; } .trail.t2 { right:26px; background:#9b5c5c; z-index:5; } .trail.t3 { right:40px; background:#6e7f52; z-index:4; } .trail.t4 { right:54px; background:#5a6b8c; z-index:3; } .folder span { margin-top:16px; width:144px; text-align:center; font-size:0.7rem; letter-spacing:0.6px; opacity:0.85; } .photo-count { font-size:0.6rem; opacity:0.6; margin-top:2px; } /* ---------------- PREVIEW IMAGES ---------------- */ .folder-preview { position: absolute; width:88px; height:64px; object-fit: cover; border-radius: 3px 3px 0 0; top: -20px; right: 0; transform-origin: bottom right; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 15; } .folder:hover .folder-preview { opacity: 1; } /* ---------------- CONTACT ---------------- */ @keyframes breathe { 0% { transform: scale(1); opacity:0.85; } 50% { transform: scale(1.05); opacity:1; } 100% { transform: scale(1); opacity:0.85; } } .contact-icons { display:flex; gap:80px; } .contact-icons a { animation:breathe 6s ease-in-out infinite; } .contact-icons a:nth-child(2) { animation-delay:1.2s; } .contact-icons a:nth-child(3) { animation-delay:2.4s; } .icon svg { width:36px; height:36px; stroke:#eee; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition: transform 0.3s ease; } .icon:hover svg { transform:translateY(-4px); } /* ---------------- MOBILE ---------------- */ @media (max-width:768px){ #hero { background:url('SAULZIDULKABEJCEK-3.jpg') center/cover no-repeat; } #folders { background: url('backgroundwebsite2.jpg') center/cover no-repeat; } #contact { background: url('backgroundwebsite.jpg') center/cover no-repeat; } .folder-grid { grid-template-columns: repeat(2,1fr); gap:48px 24px; padding:0 24px; } .folder { transform: scale(0.85); } .contact-icons { gap:48px; } .icon svg { width:30px; height:30px; stroke-width:1.2; } .folder-preview { display:none; } }
↓
↓