Oliver/paraguay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace emoji icons with Unsplash free images (Paraguay, Banking, Legal, Taxes, ERP)

Browse Source
This commit is contained in:
Kato
2026-09-05 12:37:51 +00:00
parent 51b9e88a9a
commit ef0d9aac55
2 changed files with 89 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+75 -1
View File
@@ -120,6 +120,79 @@ body {
::-webkit-scrollbar-thumb { background: #bdc3c7; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #95a5a6; }
/* ========================================
IMAGE STYLES
======================================== */
/* Hero background image */
.hero-image {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
object-fit: cover;
width: 100%;
height: 100%;
z-index: 0;
filter: brightness(0.45) saturate(1.1);
}
.hero-content { position: relative; z-index: 1; }
/* About card images */
.about-image {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px 8px 0 0;
margin: -20px -20px 16px -20px;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
filter: saturate(0.85);
}
.about-card:hover .about-image {
transform: scale(1.03);
filter: saturate(1);
}
/* Banner image */
.banner-image {
width: 52px;
height: 52px;
border-radius: 12px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
animation: floatSlow 4s ease-in-out infinite;
}
/* Modal images */
.modal-image {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 16px;
display: block;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* Newsletter image */
.newsletter-image {
width: 80px;
height: 80px;
border-radius: 16px;
object-fit: cover;
margin: 0 auto 16px;
display: block;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
/* Remove old icon float animation since we use images now */
.about-icon {
font-size: 2.5rem;
margin-bottom: 12px;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
display: inline-block;
}
/* Text selection */
::selection { background: rgba(24, 119, 242, 0.2); color: #1c1e21; }
@@ -286,7 +359,7 @@ body {
overflow: hidden;
}
/* Subtle mesh pattern overlay */
/* Subtle mesh pattern overlay — sits above image, below content */
.hero::before {
content: '';
position: absolute;
@@ -294,6 +367,7 @@ body {
background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.05) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
.hero-content { position: relative; z-index: 1; }
index.html
+14 -17
View File
@@ -69,7 +69,7 @@
<div class="login-steps">
<!-- Step 1: Username -->
<div class="login-step active" id="login-step-1">
<div class="login-icon">💬</div>
<img src="https://images.unsplash.com/photo-1611162616475-46b635cb6868?w=80&h=80&fit=crop&q=80" alt="Telegram" class="modal-image" />
<h2 class="hide-de">Telegram Username eingeben</h2>
<h2 class="hide-en">Enter Telegram Username</h2>
<p class="login-hint">
@@ -86,7 +86,7 @@
</div>
<!-- Step 2: Code -->
<div class="login-step" id="login-step-2">
<div class="login-icon">🔐</div>
<img src="https://images.unsplash.com/photo-1567427017947-545c5f8d16ad?w=80&h=80&fit=crop&q=80" alt="Verification" class="modal-image" />
<h2 class="hide-de">Verifizierungscode</h2>
<h2 class="hide-en">Verification Code</h2>
<p class="login-hint">
@@ -103,7 +103,7 @@
</div>
<!-- Step 3: Registration -->
<div class="login-step" id="login-step-3">
<div class="login-icon">🎉</div>
<img src="https://images.unsplash.com/photo-1521791136064-7986c2920216?w=80&h=80&fit=crop&q=80" alt="Registration" class="modal-image" />
<h2 class="hide-de">Registrierung abschließen</h2>
<h2 class="hide-en">Complete Registration</h2>
<div class="form-group">
@@ -238,7 +238,7 @@
<!-- Hero Section -->
<section class="hero" id="hero">
<div class="hero-particles" id="hero-particles"></div>
<img src="https://images.unsplash.com/photo-1569288052389-dac9b098dcd1?w=1600&h=800&fit=crop&q=75" alt="Paraguay landscape" class="hero-image" />
<div class="hero-content">
<h1 class="hero-title">
<span class="hide-de">Paraguay LLC & SRL Community</span>
@@ -266,15 +266,12 @@
</div>
</div>
</div>
<div class="hero-scroll-indicator">
<div class="scroll-arrow"></div>
</div>
</section>
<!-- Telegram Banner (nicht logged-in) -->
<div class="telegram-banner" id="telegram-banner">
<div class="banner-content">
<span class="banner-icon">📱</span>
<img src="https://images.unsplash.com/photo-1614680376593-902f74cf0d41?w=64&h=64&fit=crop&q=80" alt="Telegram" class="banner-image" />
<div class="banner-text">
<strong>
<span class="hide-de">Noch nicht angemeldet?</span>
@@ -302,8 +299,8 @@
<span class="hide-en">About the Community</span>
</h2>
<div class="about-grid">
<div class="about-card">
<div class="about-icon">🏦</div>
<div class="about-card" data-image="banking">
<img src="https://images.unsplash.com/photo-1601597111158-2fceff292cdc?w=400&h=250&fit=crop&q=80" alt="Banking" class="about-image" />
<h3>
<span class="hide-de">Banken & Zahlungsverkehr</span>
<span class="hide-en">Banking & Payments</span>
@@ -313,8 +310,8 @@
<span class="hide-en">Experiences with Paraguayan and international banks, accounts, transfers and credit cards.</span>
</p>
</div>
<div class="about-card">
<div class="about-icon">⚖️</div>
<div class="about-card" data-image="legal">
<img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=400&h=250&fit=crop&q=80" alt="Legal" class="about-image" />
<h3>
<span class="hide-de">Rechtliches</span>
<span class="hide-en">Legal Matters</span>
@@ -324,8 +321,8 @@
<span class="hide-en">Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay.</span>
</p>
</div>
<div class="about-card">
<div class="about-icon">📊</div>
<div class="about-card" data-image="taxes">
<img src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=400&h=250&fit=crop&q=80" alt="Taxes" class="about-image" />
<h3>
<span class="hide-de">Steuern & Buchhaltung</span>
<span class="hide-en">Taxes & Accounting</span>
@@ -335,8 +332,8 @@
<span class="hide-en">Tax advice, accounting systems, annual statements and international tax planning.</span>
</p>
</div>
<div class="about-card">
<div class="about-icon">💻</div>
<div class="about-card" data-image="erp">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=250&fit=crop&q=80" alt="ERP Systems" class="about-image" />
<h3>
<span class="hide-de">ERP-Systeme</span>
<span class="hide-en">ERP Systems</span>
@@ -394,7 +391,7 @@
<section class="section section-alt newsletter-section" id="newsletter-section" style="display:none;">
<div class="container">
<div class="newsletter-card">
<div class="newsletter-icon">✉️</div>
<img src="https://images.unsplash.com/photo-1596526131083-e8c633c948d2?w=120&h=120&fit=crop&q=80" alt="Newsletter" class="newsletter-image" />
<h2>
<span class="hide-de">Newsletter</span>
<span class="hide-en">Newsletter</span>