From 6114983af5b4897490fdb85c224828b73115ad3f Mon Sep 17 00:00:00 2001 From: Mark Date: Sun, 1 Feb 2026 23:33:18 +0000 Subject: [PATCH] UI/UX improvements: unified logo size, mobile optimizations, grid layout restructure - Fixed logo size inconsistency across devices (unified to 44px) - Restructured homepage hero section with grid-template-areas for better layout control - Desktop: 3-column layout (welcome | image | sidebar) with recommendation box under image - Mobile: optimized order (image -> welcome -> recommendations -> info -> sidebar) - Added mobile text alignment optimizations (center for h1, left for descriptions) - Updated Medkulturno posredovanje page with justified text on mobile - Fixed Ponudba page free consultation notice alignment on mobile - Moved recommendation box to align with hero section bottom - Changed 'Svetovalno / preventivno' to 'Svetovalno medkulturno posredovanje' - Fixed star icon alignment in 'Zakaj izbrati Prosberry' section --- css/style.css | 149 +++++++++++++++--- index.html | 73 +++++---- ponudba/index.html | 2 +- .../medkulturno-posredovanje/index.html | 6 +- 4 files changed, 166 insertions(+), 64 deletions(-) diff --git a/css/style.css b/css/style.css index b686c35..fb910b5 100644 --- a/css/style.css +++ b/css/style.css @@ -336,11 +336,9 @@ footer { justify-content: center; } - /* Logotip se manjša skupaj z menijem */ + /* Logotip - fiksna velikost za konsistentnost */ .logo img { - height: 3.5vw; - max-height: 50px; - min-height: 25px; + height: 44px; } .nav-links { @@ -578,7 +576,7 @@ footer { } .logo img { - height: calc(50px + 2rem - 10px); + height: 44px; width: auto; margin: 0 10px 0 0; display: block @@ -5320,34 +5318,66 @@ footer { position: relative } +/* --- DESKTOP POSTAVITEV --- */ .hero-new-content { - max-width: 1200px; - margin: 0 auto; - width: 100%; - display: grid; - grid-template-columns: 1fr 1fr; + display: grid !important; + grid-template-columns: 1.2fr 0.8fr 280px; + grid-template-areas: + "welcome image sidebar" + "zakaj branje sidebar"; gap: 2rem; - align-items: stretch; - min-height: auto; + align-items: start; + max-width: 1400px; + margin: 0 auto; + padding: 0 50px; z-index: 2; - padding: 0 55px; } -.hero-new-text { - align-self: stretch; - display: flex; - flex-direction: column; - gap: 1.5rem; - height: auto; +/* Razporeditev elementov v mrežo */ +.hero-welcome-area { + grid-area: welcome; padding-top: 48px; - padding-bottom: 0 +} + +.hero-new-image { + grid-area: image; +} + +.workshops-sidebar-inline { + grid-area: sidebar; +} + +.hero-info-box { + grid-area: zakaj; + margin-top: 1rem; +} + +.recommendation-box-home { + grid-area: branje; + margin-top: 1rem; + align-self: end; + width: 100%; +} + +#hero-welcome { + text-align: left; + font-size: 2.2rem; + margin-bottom: 1.5rem; +} + +.hero-cta-box-inline { + background: rgba(251, 99, 57, 0.08); + padding: 0.75rem 1rem; + border-radius: 10px; + margin: 1rem 0; + border-left: 4px solid var(--primary-color); } .hero-new-text h1 { font-size: 2.2rem; font-weight: 600; line-height: 1.3; - margin-bottom: 0 + margin-bottom: 0; } .hero-slogan { @@ -6769,16 +6799,59 @@ html, body { padding: 100px 1rem 40px; } - .hero-new-text h1 { + .hero-new-content { + display: flex !important; + flex-direction: column; + padding: 0 1.5rem; + } + + /* Točen vrstni red po navodilih */ + .hero-new-image { + order: 1; + margin-bottom: 2rem; + } + + .hero-welcome-area { + order: 2; + } + + .recommendation-box-home { + order: 3; + margin: 2rem 0 !important; + max-width: 100% !important; + } + + .hero-info-box { + order: 4; + max-width: 100% !important; + padding: 1.2rem; + margin-top: 1rem !important; + } + + .workshops-sidebar-inline { + order: 5; + margin-top: 2rem; + } + + /* Poravnave besedila na mobilniku */ + #hero-welcome { + text-align: center; + margin-bottom: 2.5rem !important; font-size: 1.8rem; } - .hero-new-subtitle { - font-size: 1rem; + .hero-slogan, + .hero-new-description { + text-align: left; + margin-bottom: 1.5rem !important; } - .hero-info-box { - padding: 1.2rem; + .hero-cta-box-inline { + margin-bottom: 2rem; + } + + .hero-new-slogan { + margin-bottom: 1.5rem; } .hero-info-box h2 { @@ -6789,6 +6862,10 @@ html, body { font-size: 0.9rem; } + .hero-new-subtitle { + font-size: 1rem; + } + .features-section { padding: 40px 1rem; } @@ -7355,6 +7432,11 @@ html, body { text-align: center; } + /* Besedilo v hero sekciji - obojestransko poravnano na mobilnih */ + .mediation-hero-text p { + text-align: justify !important; + } + .mediation-hero-text .cta-button { margin: 0 auto; } @@ -7373,6 +7455,16 @@ html, body { grid-template-columns: 1fr !important; } + /* Besedilo v step karticah - obojestransko poravnano na mobilnih */ + .step-card p { + text-align: justify !important; + } + + /* "Zakaj izbrati Prosberry" naslov - leva poravnava na mobilnih */ + #zakaj h2 { + text-align: left !important; + } + /* Cena prikaz na mobilnih */ .pricing-content { width: 100%; @@ -7431,6 +7523,11 @@ html, body { grid-template-columns: 1fr !important; } + /* Brezplačno srečanje - leva poravnava besedila na mobilnih */ + .offer-free-notice p { + text-align: left !important; + } + .offer-section { padding: 2rem 1.5rem; } diff --git a/index.html b/index.html index 58feeeb..bcbb6ba 100644 --- a/index.html +++ b/index.html @@ -107,12 +107,13 @@
-
-
-

Dobrodošli v prostoru rasti in sodelovanja

+
+ +
+

Dobrodošli v prostoru rasti in sodelovanja

PROSBERRY – mesto, kjer učenje, povezovanje in podpora postanejo enostavni!

Učenje splošne in poslovne angleščine za vse starostne skupine ter podpora medkulturni integraciji v vrtcih, šolah in institucijah

-
+

Prvo srečanje ali uvodni posvet je brezplačen in brez obveznosti. Pogovoriva se o vaših ciljih in možnostih sodelovanja.

@@ -121,38 +122,14 @@

Uči se angleščine, spoznaj medkulturne zgodbe in uživaj v vsakem koraku!

-
-

Zakaj PROSBERRY?

-

PROS simbolizira znanje, izkušnje in strokovnost, ki podpirajo rast in razvoj.

-

BERRY predstavlja raznolikost in živost, ki bogati učenje, povezovanje in medkulturne izkušnje.

-

Tudi v jeziku in med ljudmi rastemo vsak po svoje – z različnimi potrebami, ozadji in cilji.

-

Moj cilj je ustvariti prostor, kjer se lahko učimo, povezujemo in sodelujemo naravno, enostavno in z veseljem.

-
-
-
- Amra Kurešepi Zulji - - -
-

Priporočamo branje

-
- - Kako medkulturnost spodbuja rast? - Kako medkulturnost spodbuja rast? - - - Kako se čas in disciplina razlikujeta po kulturah? - Kako se čas in disciplina razlikujeta po kulturah? - - - Kako učenje ustvarja skupnost? - Kako učenje ustvarja skupnost? - -
-
- + +
+ Amra Kurešepi Zulji +
+ +

Aktualne delavnice

@@ -174,6 +151,34 @@
+ + +
+

Priporočamo branje

+
+ + Kako medkulturnost spodbuja rast? + Kako medkulturnost spodbuja rast? + + + Kako se čas in disciplina razlikujeta po kulturah? + Kako se čas in disciplina razlikujeta po kulturah? + + + Kako učenje ustvarja skupnost? + Kako učenje ustvarja skupnost? + +
+
+ + +
+

Zakaj PROSBERRY?

+

PROS simbolizira znanje, izkušnje in strokovnost, ki podpirajo rast in razvoj.

+

BERRY predstavlja raznolikost in živost, ki bogati učenje, povezovanje in medkulturne izkušnje.

+

Tudi v jeziku in med ljudmi rastemo vsak po svoje – z različnimi potrebami, ozadji in cilji.

+

Moj cilj je ustvariti prostor, kjer se lahko učimo, povezujemo in sodelujemo naravno, enostavno in z veseljem.

+
diff --git a/ponudba/index.html b/ponudba/index.html index f61255a..454403f 100644 --- a/ponudba/index.html +++ b/ponudba/index.html @@ -164,7 +164,7 @@
-
+

Prvo srečanje je brezplačno – brez obveznosti, samo spoznavanje in posvet preko spleta.

diff --git a/skupaj-za-vkljucevanje/medkulturno-posredovanje/index.html b/skupaj-za-vkljucevanje/medkulturno-posredovanje/index.html index 0a4c1f3..d0a41b0 100644 --- a/skupaj-za-vkljucevanje/medkulturno-posredovanje/index.html +++ b/skupaj-za-vkljucevanje/medkulturno-posredovanje/index.html @@ -215,7 +215,7 @@
-

Svetovalno / preventivno medkulturno posredovanje

+

Svetovalno medkulturno posredovanje

Ker je pogosto lažje preprečiti nesporazume, kot jih reševati, posrednik:

  • ✔ predstavi kulturne razlike,
    • @@ -333,8 +333,8 @@
    -

    - ⭐ Ker razumemo izobraževalni sistem – in ljudi v njem. +

    + ⭐Ker razumemo izobraževalni sistem – in ljudi v njem.

    Medkulturno posredovanje je učinkovito le, če posrednik razume obe strani – jezik in kulturo priseljencev ter delovanje institucij.

    Kot profesorica angleščine in poznavalka vzgojno-izobraževalnega sistema: