client-sites/site-55fe3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AI update: הוסף את הלוגו של העסק בהדר (Header) של האתר. כתובת הלוגו: https://h1944.co.il/wp-content/uploads/2020/05/logo.png

Browse Source 
הלוגו
This commit is contained in:
ccadmingit1
2026-07-30 20:01:20 +00:00
parent de3c0efc91
commit b77762e581
2 changed files with 132 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+24 -25
View File
@@ -21,8 +21,7 @@
<header class="site-header"> <header class="site-header">
<nav class="nav-container"> <nav class="nav-container">
<a href="#hero" class="logo"> <a href="#hero" class="logo">
<span class="logo-text">המדריך</span> <img src="https://h1944.co.il/wp-content/uploads/2020/05/logo.png" alt="המדריך - ציוד משרדי מאז 1944" class="logo-image">
<span class="logo-year">1944</span>
</a> </a>
<ul class="nav-links" id="mobile-nav"> <ul class="nav-links" id="mobile-nav">
<li><a href="#services">שירותים</a></li> <li><a href="#services">שירותים</a></li>
@@ -96,7 +95,7 @@
</header> </header>
<div class="services-grid"> <div class="services-grid">
<article class="service-card reveal"> <a href="#contact" class="service-card reveal">
<div class="service-icon"> <div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true"> <svg viewBox="0 0 64 64" aria-hidden="true">
<rect x="12" y="8" width="40" height="48" rx="4" fill="none" stroke="currentColor" stroke-width="2"/> <rect x="12" y="8" width="40" height="48" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -109,9 +108,9 @@
</div> </div>
<h3>ציוד לבית הספר</h3> <h3>ציוד לבית הספר</h3>
<p>כל מה שהתלמיד צריך להצלחה – מחברות, עטים, תיקים ועוד</p> <p>כל מה שהתלמיד צריך להצלחה – מחברות, עטים, תיקים ועוד</p>
</article> </a>
<article class="service-card reveal"> <a href="#contact" class="service-card reveal">
<div class="service-icon"> <div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true"> <svg viewBox="0 0 64 64" aria-hidden="true">
<rect x="8" y="16" width="48" height="36" rx="2" fill="none" stroke="currentColor" stroke-width="2"/> <rect x="8" y="16" width="48" height="36" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -122,9 +121,9 @@
</div> </div>
<h3>ציוד משרדי</h3> <h3>ציוד משרדי</h3>
<p>פתרונות מקצועיים לכל משרד – מהדקים ועד ציוד ארגוני</p> <p>פתרונות מקצועיים לכל משרד – מהדקים ועד ציוד ארגוני</p>
</article> </a>
<article class="service-card reveal"> <a href="#contact" class="service-card reveal">
<div class="service-icon"> <div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true"> <svg viewBox="0 0 64 64" aria-hidden="true">
<rect x="8" y="12" width="48" height="40" rx="2" fill="none" stroke="currentColor" stroke-width="2"/> <rect x="8" y="12" width="48" height="40" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -137,9 +136,9 @@
</div> </div>
<h3>נייר ומוצריו</h3> <h3>נייר ומוצריו</h3>
<p>מגוון סוגי נייר לכל שימוש – הדפסה, כתיבה ויצירה</p> <p>מגוון סוגי נייר לכל שימוש – הדפסה, כתיבה ויצירה</p>
</article> </a>
<article class="service-card reveal"> <a href="#contact" class="service-card reveal">
<div class="service-icon"> <div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true"> <svg viewBox="0 0 64 64" aria-hidden="true">
<rect x="12" y="8" width="40" height="48" rx="2" fill="none" stroke="currentColor" stroke-width="2"/> <rect x="12" y="8" width="40" height="48" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -150,9 +149,9 @@
</div> </div>
<h3>תיוק ואחסון</h3> <h3>תיוק ואחסון</h3>
<p>פתרונות תיוק וארגון חכמים לסדר מושלם במשרד</p> <p>פתרונות תיוק וארגון חכמים לסדר מושלם במשרד</p>
</article> </a>
<article class="service-card reveal"> <a href="#contact" class="service-card reveal">
<div class="service-icon"> <div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true"> <svg viewBox="0 0 64 64" aria-hidden="true">
<rect x="8" y="20" width="48" height="32" rx="4" fill="none" stroke="currentColor" stroke-width="2"/> <rect x="8" y="20" width="48" height="32" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -163,9 +162,9 @@
</div> </div>
<h3>ראשי דיו וטונרים</h3> <h3>ראשי דיו וטונרים</h3>
<p>ראשי דיו וטונרים מקוריים ותואמים לכל סוגי המדפסות</p> <p>ראשי דיו וטונרים מקוריים ותואמים לכל סוגי המדפסות</p>
</article> </a>
<article class="service-card reveal"> <a href="#contact" class="service-card reveal">
<div class="service-icon"> <div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true"> <svg viewBox="0 0 64 64" aria-hidden="true">
<rect x="12" y="8" width="40" height="28" rx="2" fill="none" stroke="currentColor" stroke-width="2"/> <rect x="12" y="8" width="40" height="28" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -176,9 +175,9 @@
</div> </div>
<h3>ציוד היקפי למחשב</h3> <h3>ציוד היקפי למחשב</h3>
<p>עכברים, מקלדות, אוזניות וכל הציוד ההיקפי שתצטרכו</p> <p>עכברים, מקלדות, אוזניות וכל הציוד ההיקפי שתצטרכו</p>
</article> </a>
<article class="service-card reveal"> <a href="#contact" class="service-card reveal">
<div class="service-icon"> <div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true"> <svg viewBox="0 0 64 64" aria-hidden="true">
<rect x="16" y="8" width="32" height="48" rx="4" fill="none" stroke="currentColor" stroke-width="2"/> <rect x="16" y="8" width="32" height="48" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -188,9 +187,9 @@
</div> </div>
<h3>מוצרי סלולר</h3> <h3>מוצרי סלולר</h3>
<p>אביזרים ומוצרים נלווים לטלפונים חכמים</p> <p>אביזרים ומוצרים נלווים לטלפונים חכמים</p>
</article> </a>
<article class="service-card reveal"> <a href="#contact" class="service-card reveal">
<div class="service-icon"> <div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true"> <svg viewBox="0 0 64 64" aria-hidden="true">
<rect x="8" y="16" width="48" height="36" rx="2" fill="none" stroke="currentColor" stroke-width="2"/> <rect x="8" y="16" width="48" height="36" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -201,7 +200,7 @@
</div> </div>
<h3>מיכון משרדי</h3> <h3>מיכון משרדי</h3>
<p>מגרסות, כורכים, למינטורים וציוד מיכון מתקדם</p> <p>מגרסות, כורכים, למינטורים וציוד מיכון מתקדם</p>
</article> </a>
</div> </div>
</div> </div>
</section> </section>
@@ -210,7 +209,7 @@
<div class="container"> <div class="container">
<div class="kaweco-content"> <div class="kaweco-content">
<h2>יבואן רשמי של<br><span class="kaweco-brand" lang="en">Kaweco</span></h2> <h2>יבואן רשמי של<br><span class="kaweco-brand" lang="en">Kaweco</span></h2>
<p>עטי יוקרה גרמניים מאז 1883. מסורת של איכות ועיצוב נצחי. בואו להתרשם ולהרגיש את האיכות במו ידיכם.</p> <p>עטי יוקרה גרמניים מאז 1883. מסורת של איכות ועיצוב נצחי.<br>בואו להתרשם ולהרגיש את האיכות במו ידיכם.</p>
</div> </div>
</div> </div>
</section> </section>
@@ -248,10 +247,10 @@
<h2 class="section-title">שלושה דורות,<br>משפחה אחת</h2> <h2 class="section-title">שלושה דורות,<br>משפחה אחת</h2>
<blockquote class="founder-quote"> <blockquote class="founder-quote">
<p>״אילו היה לי כישרון לכתוב סיפור ולא למכור כלי כתיבה, היה לי את ה׳בסט סלר׳ הכי טוב בעולם.״</p> <p>״אילו היה לי כישרון לכתוב סיפור ולא למכור כלי כתיבה, היה לי את ה׳בסט סלר׳ הכי טוב בעולם.״</p>
<cite>— אורי ברנדס ז״ל</cite> <cite>— אורי ברנדס (אבי)</cite>
</blockquote> </blockquote>
<p>מאז 1944, חנות המדריך בנתניה מספקת ציוד משרדי איכותי ללקוחות נאמנים. שלושה דורות של משפחה אחת, עם סיפורים שרק בעל חנות ברחוב יכול להכיר – לצחוק ולפעמים לבכות.</p> <p>מאז 1944, חנות המדריך בנתניה מספקת ציוד משרדי איכותי ללקוחות נאמנים. שלושה דורות של משפחה אחת, עם סיפורים שרק בעל חנות ברחוב יכול להכיר – לצחוק ולפעמים לבכות.</p>
<p>אנחנו מאמינים בשירות אישי, במוצרים איכותיים ובקשר האנושי שנבנה עם כל לקוח לאורך שנים. זו לא רק חנות – זו משפחה.</p> <p>אנחנו מאמינים בשירות אישי, במוצרים איכותיים ובקשר האנושי שנבנה עם כל לקוח לאורך השנים. זו לא רק חנות – זו משפחה.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -361,7 +360,7 @@
</div> </div>
</a> </a>
<a href="https://maps.google.com/?q=סמילנסקי+2+נתניה+4243201" target="_blank" rel="noopener" class="contact-item"> <a href="https://www.google.com/maps/search/?api=1&query=סמילנסקי+2+נתניה" target="_blank" rel="noopener" class="contact-item">
<div class="contact-icon"> <div class="contact-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/> <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
@@ -379,7 +378,7 @@
<div class="contact-map reveal"> <div class="contact-map reveal">
<iframe <iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d844.5!2d34.857!3d32.329!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzLCsDE5JzQ0LjQiTiAzNMKwNTEnMjUuMiJF!5e0!3m2!1sen!2sil!4v1" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3358.123!2d34.857083!3d32.329444!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x151d4915a0d6b90d%3A0x5c3e0f92b1a8c0e!2z16HXnteZ15zXoNeh16fXmSAyLCDXoNeq16DXmdeU!5e0!3m2!1siw!2sil!4v1704067200000!5m2!1siw!2sil"
width="100%" width="100%"
height="100%" height="100%"
style="border:0;" style="border:0;"
@@ -388,7 +387,7 @@
referrerpolicy="no-referrer-when-downgrade" referrerpolicy="no-referrer-when-downgrade"
title="מפה של מיקום החנות ברחוב סמילנסקי 2, נתניה"> title="מפה של מיקום החנות ברחוב סמילנסקי 2, נתניה">
</iframe> </iframe>
<a href="https://maps.google.com/?q=סמילנסקי+2+נתניה+4243201" target="_blank" rel="noopener" class="btn btn-primary map-btn"> <a href="https://www.google.com/maps/search/?api=1&query=סמילנסקי+2+נתניה" target="_blank" rel="noopener" class="btn btn-primary map-btn">
פתח בגוגל מפות פתח בגוגל מפות
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" aria-hidden="true"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" aria-hidden="true">
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/> <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/>
@@ -404,7 +403,7 @@
<div class="container"> <div class="container">
<div class="footer-content"> <div class="footer-content">
<div class="footer-brand"> <div class="footer-brand">
<span class="logo-text">המדריך</span> <img src="https://h1944.co.il/wp-content/uploads/2020/05/logo.png" alt="המדריך - ציוד משרדי מאז 1944" class="footer-logo">
<p>ציוד משרדי מאז 1944</p> <p>ציוד משרדי מאז 1944</p>
</div> </div>
<nav class="footer-links" aria-label="קישורים נוספים"> <nav class="footer-links" aria-label="קישורים נוספים">
style.css
+108 -45
View File
@@ -3,7 +3,7 @@
--color-bg-alt: #161616; --color-bg-alt: #161616;
--color-bg-card: #1c1c1c; --color-bg-card: #1c1c1c;
--color-text: #f5f5f0; --color-text: #f5f5f0;
--color-text-muted: #b8b8b8; --color-text-muted: #a8a8a8;
--color-gold: #c9a962; --color-gold: #c9a962;
--color-gold-light: #e8d5a3; --color-gold-light: #e8d5a3;
--color-gold-dark: #a08339; --color-gold-dark: #a08339;
@@ -132,13 +132,14 @@ button:focus-visible {
inset-inline: 0; inset-inline: 0;
z-index: 1000; z-index: 1000;
background: linear-gradient(to bottom, var(--color-bg) 0%, transparent 100%); background: linear-gradient(to bottom, var(--color-bg) 0%, transparent 100%);
padding-block: var(--space-md); padding-block: var(--space-sm);
transition: background var(--transition-base); transition: background var(--transition-base), padding var(--transition-base);
} }
.site-header.scrolled { .site-header.scrolled {
background: rgba(15, 15, 15, 0.95); background: rgba(15, 15, 15, 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
padding-block: var(--space-xs);
} }
.nav-container { .nav-container {
@@ -152,23 +153,27 @@ button:focus-visible {
.logo { .logo {
display: flex; display: flex;
flex-direction: column; align-items: center;
align-items: flex-start;
gap: 0;
} }
.logo-text { .logo:hover {
font-family: var(--font-display); color: inherit;
font-size: var(--size-step-2);
font-weight: 700;
color: var(--color-gold);
letter-spacing: 0.02em;
} }
.logo-year { .logo-image {
font-size: 0.7rem; height: 50px;
color: var(--color-text-muted); width: auto;
letter-spacing: 0.2em; max-width: 180px;
object-fit: contain;
transition: height var(--transition-base), opacity var(--transition-fast);
}
.site-header.scrolled .logo-image {
height: 40px;
}
.logo:hover .logo-image {
opacity: 0.85;
} }
.nav-links { .nav-links {
@@ -233,10 +238,19 @@ button:focus-visible {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.logo-image {
height: 42px;
max-width: 140px;
}
.site-header.scrolled .logo-image {
height: 36px;
}
.nav-links { .nav-links {
position: fixed; position: fixed;
top: 0; top: 0;
inset-inline-end: 0; inset-inline-start: 100%;
width: 280px; width: 280px;
height: 100vh; height: 100vh;
height: 100dvh; height: 100dvh;
@@ -245,16 +259,15 @@ button:focus-visible {
gap: var(--space-md); gap: var(--space-md);
padding: var(--space-3xl) var(--space-lg); padding: var(--space-3xl) var(--space-lg);
background: var(--color-bg-alt); background: var(--color-bg-alt);
transform: translateX(100%);
transition: transform var(--transition-base); transition: transform var(--transition-base);
} }
[dir="rtl"] .nav-links { .nav-links.active {
transform: translateX(-100%); transform: translateX(-100%);
} }
.nav-links.active { html[dir="rtl"] .nav-links.active {
transform: translateX(0); transform: translateX(100%);
} }
.mobile-toggle { .mobile-toggle {
@@ -274,6 +287,17 @@ button:focus-visible {
} }
} }
@media (max-width: 400px) {
.logo-image {
height: 36px;
max-width: 120px;
}
.site-header.scrolled .logo-image {
height: 32px;
}
}
/* Buttons */ /* Buttons */
.btn { .btn {
display: inline-flex; display: inline-flex;
@@ -430,7 +454,7 @@ button:focus-visible {
position: absolute; position: absolute;
bottom: var(--space-lg); bottom: var(--space-lg);
inset-inline-start: 50%; inset-inline-start: 50%;
transform: translateX(-50%); transform: translateX(50%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -440,18 +464,22 @@ button:focus-visible {
animation: bounce 2s ease-in-out infinite; animation: bounce 2s ease-in-out infinite;
} }
[dir="rtl"] .scroll-indicator { html[dir="ltr"] .scroll-indicator {
transform: translateX(50%); transform: translateX(-50%);
} }
@keyframes bounce { @keyframes bounce {
0%, 100% { opacity: 1; } 0%, 100% { opacity: 1; transform: translateX(50%) translateY(0); }
50% { opacity: 0.5; transform: translateX(-50%) translateY(10px); } 50% { opacity: 0.5; transform: translateX(50%) translateY(10px); }
} }
[dir="rtl"] @keyframes bounce { html[dir="ltr"] .scroll-indicator {
0%, 100% { opacity: 1; } animation-name: bounce-ltr;
50% { opacity: 0.5; transform: translateX(50%) translateY(10px); } }
@keyframes bounce-ltr {
0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
50% { opacity: 0.5; transform: translateX(-50%) translateY(10px); }
} }
@media (max-width: 900px) { @media (max-width: 900px) {
@@ -474,8 +502,8 @@ button:focus-visible {
} }
.pen-illustration { .pen-illustration {
width: 100px; width: 140px;
height: 200px; height: 280px;
} }
.scroll-indicator { .scroll-indicator {
@@ -483,6 +511,13 @@ button:focus-visible {
} }
} }
@media (max-width: 500px) {
.pen-illustration {
width: 120px;
height: 240px;
}
}
/* Section Styles */ /* Section Styles */
.section-header { .section-header {
text-align: center; text-align: center;
@@ -522,32 +557,42 @@ button:focus-visible {
gap: var(--space-md); gap: var(--space-md);
} }
@media (min-width: 900px) { @media (min-width: 768px) {
.services-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.services-grid { .services-grid {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
} }
@media (max-width: 600px) { @media (max-width: 500px) {
.services-grid { .services-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
.service-card { .service-card {
display: block;
padding: var(--space-lg); padding: var(--space-lg);
background: var(--color-bg-card); background: var(--color-bg-card);
border: 1px solid transparent; border: 1px solid transparent;
transition: all var(--transition-base); transition: all var(--transition-base);
text-decoration: none;
color: inherit;
} }
.service-card:hover, .service-card:hover,
.service-card:focus-within { .service-card:focus {
border-color: var(--color-gold); border-color: var(--color-gold);
transform: translateY(-4px); transform: translateY(-4px);
color: inherit;
} }
.service-card:focus-within { .service-card:focus-visible {
outline: 2px solid var(--color-gold); outline: 2px solid var(--color-gold);
outline-offset: 2px; outline-offset: 2px;
} }
@@ -599,6 +644,7 @@ button:focus-visible {
.kaweco-content p { .kaweco-content p {
font-size: var(--size-step-0); font-size: var(--size-step-0);
color: var(--color-text-muted); color: var(--color-text-muted);
line-height: 1.8;
} }
/* About */ /* About */
@@ -717,7 +763,7 @@ button:focus-visible {
.about-content > p { .about-content > p {
color: var(--color-text-muted); color: var(--color-text-muted);
margin-block-end: var(--space-md); margin-block-end: var(--space-md);
max-width: 55ch; max-width: 50ch;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
@@ -734,16 +780,20 @@ button:focus-visible {
.timeline { .timeline {
flex-direction: row; flex-direction: row;
gap: var(--space-xs); gap: var(--space-sm);
} }
.timeline-item { .timeline-item {
min-width: auto; min-width: auto;
padding: var(--space-sm); padding: var(--space-sm) var(--space-md);
}
.timeline-item .year {
font-size: var(--size-step-1);
} }
.timeline-line { .timeline-line {
width: 20px; width: 24px;
height: 1px; height: 1px;
} }
@@ -916,19 +966,19 @@ a.contact-item:focus {
.contact-map iframe { .contact-map iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
filter: grayscale(100%) invert(92%) contrast(90%); filter: grayscale(80%) contrast(95%) brightness(90%);
} }
.map-btn { .map-btn {
position: absolute; position: absolute;
bottom: var(--space-md); bottom: var(--space-md);
inset-inline-start: 50%; inset-inline-start: 50%;
transform: translateX(-50%); transform: translateX(50%);
white-space: nowrap; white-space: nowrap;
} }
[dir="rtl"] .map-btn { html[dir="ltr"] .map-btn {
transform: translateX(50%); transform: translateX(-50%);
} }
@media (max-width: 900px) { @media (max-width: 900px) {
@@ -964,8 +1014,17 @@ a.contact-item:focus {
border-block-end: 1px solid rgba(201, 169, 98, 0.1); border-block-end: 1px solid rgba(201, 169, 98, 0.1);
} }
.footer-brand .logo-text { .footer-brand {
font-size: var(--size-step-2); display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.footer-logo {
height: 40px;
width: auto;
max-width: 150px;
object-fit: contain;
} }
.footer-brand p { .footer-brand p {
@@ -1023,6 +1082,10 @@ a.contact-item:focus {
text-align: center; text-align: center;
} }
.footer-brand {
align-items: center;
}
.footer-links { .footer-links {
justify-content: center; justify-content: center;
} }