עיצוב גרפי מקצועי - שירותים לעסקים ולפרטיים :root { --primary: #6C63FF; --secondary: #4D44DB; --accent: #FF6584; --light: #F8F9FA; --dark: #212529; --gray: #6C757D; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light); color: var(--dark); line-height: 1.6; } /* Header Styles */ header { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 1rem 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); position: fixed; width: 100%; top: 0; z-index: 1000; } .container { width: 90%; max-width: 1200px; margin: 0 auto; } .header-container { display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; gap: 15px; } .avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .logo-text h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: 5px; } .logo-text p { font-size: 0.9rem; opacity: 0.9; } nav ul { display: flex; list-style: none; gap: 30px; } nav a { color: white; text-decoration: none; font-weight: 500; font-size: 1.1rem; transition: all 0.3s ease; padding: 5px 10px; border-radius: 4px; } nav a:hover { background-color: rgba(255, 255, 255, 0.2); } .mobile-menu-btn { display: none; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; } /* Hero Section */ .hero { padding: 180px 0 100px; background: linear-gradient(rgba(108, 99, 255, 0.1), rgba(108, 99, 255, 0.05)); text-align: center; } .hero h2 { font-size: 2.5rem; margin-bottom: 20px; color: var(--secondary); } .hero p { font-size: 1.2rem; max-width: 700px; margin: 0 auto 40px; color: var(--gray); } .cta-button { display: inline-block; background-color: var(--accent); color: white; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255, 101, 132, 0.4); } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(255, 101, 132, 0.6); background-color: #ff4d6d; } /* Services Section */ .services { padding: 80px 0; } .section-title { text-align: center; margin-bottom: 60px; } .section-title h2 { font-size: 2.2rem; color: var(--secondary); position: relative; display: inline-block; padding-bottom: 15px; } .section-title h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--accent); border-radius: 2px; } .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; } .service-card { background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .service-icon { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; font-size: 2rem; padding: 25px; text-align: center; } .service-content { padding: 25px; } .service-content h3 { font-size: 1.4rem; margin-bottom: 15px; color: var(--secondary); } .service-content ul { list-style: none; margin-bottom: 20px; } .service-content li { padding: 8px 0; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px; } .service-content li:last-child { border-bottom: none; } .service-content li i { color: var(--accent); } /* Contact Section */ .contact { padding: 80px 0; background: linear-gradient(rgba(108, 99, 255, 0.1), rgba(108, 99, 255, 0.05)); } .contact-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .contact-info h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--secondary); } .contact-info p { margin-bottom: 30px; color: var(--gray); } .contact-details { display: flex; flex-direction: column; gap: 20px; } .contact-item { display: flex; align-items: center; gap: 15px; } .contact-icon { width: 50px; height: 50px; background-color: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .contact-text h4 { font-size: 1.1rem; margin-bottom: 5px; } .contact-text a { color: var(--gray); text-decoration: none; transition: all 0.3s ease; } .contact-text a:hover { color: var(--primary); } .contact-form { background-color: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--dark); } .form-control { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; transition: all 0.3s ease; } .form-control:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2); } textarea.form-control { min-height: 150px; resize: vertical; } .submit-btn { background-color: var(--primary); color: white; border: none; padding: 12px 30px; border-radius: 5px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; width: 100%; } .submit-btn:hover { background-color: var(--secondary); } /* Notes Section */ .notes-section { padding: 80px 0; } .notes-container { max-width: 800px; margin: 0 auto; } .notes-form { background-color: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); margin-bottom: 40px; } .notes-list { background-color: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .note-item { padding: 15px 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .note-item:last-child { border-bottom: none; } .note-text { flex-grow: 1; } .note-actions { display: flex; gap: 10px; } .note-btn { background: none; border: none; cursor: pointer; color: var(--gray); transition: all 0.3s ease; font-size: 1rem; } .note-btn.edit-btn:hover { color: var(--primary); } .note-btn.delete-btn:hover { color: var(--accent); } /* Footer */ footer { background-color: var(--dark); color: white; padding: 50px 0 20px; } .footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-bottom: 40px; } .footer-col h4 { font-size: 1.2rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-col h4::after { content: ''; position: absolute; bottom: 0; right: 0; width: 50px; height: 2px; background-color: var(--accent); } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 10px; } .footer-col a { color: #ddd; text-decoration: none; transition: all 0.3s ease; } .footer-col a:hover { color: white; padding-right: 5px; } .social-links { display: flex; gap: 15px; margin-top: 20px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; color: white; transition: all 0.3s ease; } .social-links a:hover { background-color: var(--accent); transform: translateY(-3px); } .copyright { text-align: center; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #aaa; font-size: 0.9rem; } /* Responsive Styles */ @media (max-width: 992px) { .contact-container { grid-template-columns: 1fr; } .contact-info { text-align: center; } .contact-details { align-items: center; } .contact-item { justify-content: center; } } @media (max-width: 768px) { nav ul { position: fixed; top: 90px; right: -100%; width: 80%; height: calc(100vh - 90px); background-color: var(--secondary); flex-direction: column; align-items: center; justify-content: center; gap: 30px; transition: all 0.5s ease; } nav ul.active { right: 0; } .mobile-menu-btn { display: block; } .hero h2 { font-size: 2rem; } .hero p { font-size: 1rem; } .section-title h2 { font-size: 1.8rem; } } @media (max-width: 576px) { .logo-text h1 { font-size: 1.5rem; } .hero { padding: 150px 0 80px; } .hero h2 { font-size: 1.8rem; } .services-grid { grid-template-columns: 1fr; } } </style>

<!-- Hero Section -->
<section class="hero" id="home">
    <div class="container">
        <h2>עיצוב גרפי מותאם אישית לצרכים שלך</h2>
        <p>מעצב גרפי מקצועי עם ניסיון של למעלה מ-10 שנים בתעשייה. מציע שירותי עיצוב מקיפים לעסקים ולפרטיים, עם דגש על איכות, יצירתיות ומענה מלא לצרכים שלך.</p>
        <a href="#contact" class="cta-button">התחל פרויקט עכשיו</a>
    </div>
</section>

<!-- Services Section -->
<section class="services" id="services">
    <div class="container">
        <div class="section-title">
            <h2>השירותים שלנו</h2>
        </div>
        <div class="services-grid">
            <!-- Digital Design -->
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-laptop"></i>
                </div>
                <div class="service-content">
                    <h3>עיצוב דיגיטלי</h3>
                    <ul>
                        <li><i class="fas fa-check"></i> עיצוב אתרי אינטרנט</li>
                        <li><i class="fas fa-check"></i> עיצוב אפליקציות מובייל</li>
                        <li><i class="fas fa-check"></i> באנרים לרשת</li>
                        <li><i class="fas fa-check"></i> פוסטים וסטוריז לרשתות חברתיות</li>
                        <li><i class="fas fa-check"></i> עיצוב ממשקי משתמש (UI)</li>
                        <li><i class="fas fa-check"></i> אייקונים</li>
                        <li><i class="fas fa-check"></i> תבניות למצגות / Canva</li>
                    </ul>
                </div>
            </div>
            
            <!-- Print Design -->
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-print"></i>
                </div>
                <div class="service-content">
                    <h3>עיצוב לדפוס</h3>
                    <ul>
                        <li><i class="fas fa-check"></i> כרטיסי ביקור</li>
                        <li><i class="fas fa-check"></i> פליירים וברושורים</li>
                        <li><i class="fas fa-check"></i> קטלוגים</li>
                        <li><i class="fas fa-check"></i> פוסטרים</li>
                        <li><i class="fas fa-check"></i> שילוט</li>
                        <li><i class="fas fa-check"></i> עטיפות לספרים</li>
                        <li><i class="fas fa-check"></i> מדבקות</li>
                        <li><i class="fas fa-check"></i> עיצוב אריזות</li>
                    </ul>
                </div>
            </div>
            
            <!-- Branding -->
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-tags"></i>
                </div>
                <div class="service-content">
                    <h3>מיתוג ועיצוב למותג</h3>
                    <ul>
                        <li><i class="fas fa-check"></i> לוגו</li>
                        <li><i class="fas fa-check"></i> ספר מותג</li>
                        <li><i class="fas fa-check"></i> ניירת משרדית</li>
                        <li><i class="fas fa-check"></i> תוויות למוצרים</li>
                        <li><i class="fas fa-check"></i> עיצוב מרצ'נדייז</li>
                    </ul>
                </div>
            </div>
            
            <!-- Motion Design -->
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-film"></i>
                </div>
                <div class="service-content">
                    <h3>עיצוב לתנועה ווידאו</h3>
                    <ul>
                        <li><i class="fas fa-check"></i> פתיחים וסיומות לסרטונים</li>
                        <li><i class="fas fa-check"></i> גרפיקה לווידאו</li>
                        <li><i class="fas fa-check"></i> אנימציית טקסט</li>
                    </ul>
                </div>
            </div>
            
            <!-- Personal/Community Design -->
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-user-friends"></i>
                </div>
                <div class="service-content">
                    <h3>עיצוב אישי / קהילתי</h3>
                    <ul>
                        <li><i class="fas fa-check"></i> הזמנות לאירועים</li>
                        <li><i class="fas fa-check"></i> תעודות ודיפלומות</li>
                        <li><i class="fas fa-check"></i> קורות חיים מעוצבים</li>
                        <li><i class="fas fa-check"></i> לוחות שנה</li>
                        <li><i class="fas fa-check"></i> עיצובים לימודיים</li>
                    </ul>
                </div>
            </div>
            
            <!-- Marketing Design -->
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-bullseye"></i>
                </div>
                <div class="service-content">
                    <h3>עיצוב שיווקי</h3>
                    <ul>
                        <li><i class="fas fa-check"></i> עמודי נחיתה</li>
                        <li><i class="fas fa-check"></i> ניוזלטרים ודיוור</li>
                        <li><i class="fas fa-check"></i> קמפיינים גרפיים</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Notes Section -->
<section class="notes-section" id="notes">
    <div class="container notes-container">
        <div class="section-title">
            <h2>פתקים ושירותים</h2>
        </div>
        
        <div class="notes-form">
            <h3>מה תרצה לבצע?</h3>
            <div class="form-group">
                <label for="service-type">בחר שירות:</label>
                <select id="service-type" class="form-control">
                    <option value="">-- בחר שירות --</option>
                    <option value="digital">עיצוב דיגיטלי</option>
                    <option value="print">עיצוב לדפוס</option>
                    <option value="branding">מיתוג ועיצוב למותג</option>
                    <option value="motion">עיצוב לתנועה ווידאו</option>
                    <option value="personal">עיצוב אישי / קהילתי</option>
                    <option value="marketing">עיצוב שיווקי</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="note-text">הוסף הערות או פרטים:</label>
                <textarea id="note-text" class="form-control" placeholder="כתוב כאן את הפרטים וההערות שלך..."></textarea>
            </div>
            
            <button id="add-note-btn" class="submit-btn">שמור פתק</button>
        </div>
        
        <div class="notes-list">
            <h3>הפתקים שלך:</h3>
            <div id="notes-container">
                <!-- Notes will be added here dynamically -->
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="contact" id="contact">
    <div class="container">
        <div class="section-title">
            <h2>צור קשר</h2>
        </div>
        
        <div class="contact-container">
            <div class="contact-info">
                <h3>בואו נדבר על הפרויקט שלכם</h3>
                <p>מעוניין בשירותי עיצוב מקצועיים? מלא את הטופס או צור איתי קשר ישירות ואחזור אליך בהקדם.</p>
                
                <div class="contact-details">
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div class="contact-text">
                            <h4>טלפון</h4>
                            <a href="tel:+972501234567">050-123-4567</a>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="contact-text">
                            <h4>אימייל</h4>
                            <a href="mailto:[email protected]">[email protected]</a>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="contact-text">
                            <h4>מיקום</h4>
                            <span>תל אביב, ישראל</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="contact-form">
                <form id="contact-form">
                    <div class="form-group">
                        <label for="name">שם מלא:</label>
                        <input type="text" id="name" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="email">אימייל:</label>
                        <input type="email" id="email" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">טלפון:</label>
                        <input type="tel" id="phone" class="form-control">
                    </div>
                    
                    <div class="form-group">
                        <label for="subject">נושא:</label>
                        <input type="text" id="subject" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="message">הודעה:</label>
                        <textarea id="message" class="form-control" required></textarea>
                    </div>
                    
                    <button type="submit" class="submit-btn">שלח הודעה</button>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer>
    <div class="container">
        <div class="footer-container">
            <div class="footer-col">
                <h4>אודות</h4>
                <p>מעצב גרפי מקצועי עם ניסיון רב במתן פתרונות עיצוביים לעסקים ולפרטיים. מחויב למצוינות, יצירתיות ומתן שירות אישי.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-behance"></i></a>
                </div>
            </div>
            
            <div class="footer-col">
                <h4>שירותים</h4>
                <ul>
                    <li><a href="#">עיצוב דיגיטלי</a></li>
                    <li><a href="#">עיצוב לדפוס</a></li>
                    <li><a href="#">מיתוג ועיצוב למותג</a></li>
                    <li><a href="#">עיצוב לתנועה ווידאו</a></li>
                    <li><a href="#">עיצוב שיווקי</a></li>
                </ul>
            </div>
            
            <div class="footer-col">
                <h4>קישורים מהירים</h4>
                <ul>
                    <li><a href="#home">בית</a></li>
                    <li><a href="#services">שירותים</a></li>
                    <li><a href="#notes">פתקים</a></li>
                    <li><a href="#contact">צור קשר</a></li>
                    <li><a href="#">בלוג</a></li>
                    <li><a href="#">תיק עבודות</a></li>
                </ul>
            </div>
            
            <div class="footer-col">
                <h4>שאל שאלה</h4>
                <p>יש לך שאלה או מעוניין לקבל הצעת מחיר? אנא אל תהסס ליצור איתי קשר.</p>
                <a href="#contact" class="cta-button" style="display: inline-block; margin-top: 15px;">צור קשר</a>
            </div>
        </div>
        
        <div class="copyright">
            <p>&copy; 2023 עיצוב גרפי מקצועי. כל הזכויות שמורות.</p>
        </div>
    </div>
</footer>

<script>
    // Mobile Menu Toggle
    const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
    const navMenu = document.querySelector('nav ul');
    
    mobileMenuBtn.addEventListener('click', () => {
        navMenu.classList.toggle('active');
        mobileMenuBtn.innerHTML = navMenu.classList.contains('active') ? 
            '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
    });
    
    // Smooth Scrolling for Anchor Links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            
            if (navMenu.classList.contains('active')) {
                navMenu.classList.remove('active');
                mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
            }
            
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
    
    // Notes Functionality
    const serviceTypeSelect = document.getElementById('service-type');
    const noteTextArea = document.getElementById('note-text');
    const addNoteBtn = document.getElementById('add-note-btn');
    const notesContainer = document.getElementById('notes-container');
    
    let notes = JSON.parse(localStorage.getItem('designer-notes')) || [];
    
    function renderNotes() {
        notesContainer.innerHTML = '';
        
        if (notes.length === 0) {
            notesContainer.innerHTML = '<p>אין פתקים עדיין. הוסף פתק חדש למעלה.</p>';
            return;
        }
        
        notes.forEach((note, index) => {
            const noteEl = document.createElement('div');
            noteEl.className = 'note-item';
            noteEl.innerHTML = `
                <div class="note-text">
                    <strong>${getServiceName(note.service)}</strong>: ${note.text}
                </div>
                <div class="note-actions">
                    <button class="note-btn edit-btn" data-index="${index}">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="note-btn delete-btn" data-index="${index}">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            `;
            notesContainer.appendChild(noteEl);
        });
        
        // Add event listeners to edit and delete buttons
        document.querySelectorAll('.edit-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const index = e.currentTarget.getAttribute('data-index');
                editNote(index);
            });
        });
        
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const index = e.currentTarget.getAttribute('data-index');
                deleteNote(index);
            });
        });
    }
    
    function getServiceName(serviceValue) {
        const services = {
            'digital': 'עיצוב דיגיטלי',
            'print': 'עיצוב לדפוס',
            'branding': 'מיתוג ועיצוב למותג',
            'motion': 'עיצוב לתנועה ווידאו',
            'personal': 'עיצוב אישי / קהילתי',
            'marketing': 'עיצוב שיווקי'
        };
        return services[serviceValue] || 'שירות כללי';
    }
    
    function addNote() {
        const service = serviceTypeSelect.value;
        const text = noteTextArea.value.trim();
        
        if (!service || !text) {
            alert('אנא בחר שירות וכתוב את ההערות שלך');
            return;
        }
        
        notes.push({ service, text });
        saveNotes();
        serviceTypeSelect.value = '';
        noteTextArea.value = '';
        renderNotes();
    }
    
    function editNote(index) {
        const note = notes[index];
        serviceTypeSelect.value = note.service;
        noteTextArea.value = note.text;
        notes.splice(index, 1);
        saveNotes();
        renderNotes();
    }
    
    function deleteNote(index) {
        if (confirm('האם אתה בטוח שברצונך למחוק את הפתק הזה?')) {
            notes.splice(index, 1);
            saveNotes();
            renderNotes();
        }
    }
    
    function saveNotes() {
        localStorage.setItem('designer-notes', JSON.stringify(notes));
    }
    
    addNoteBtn.addEventListener('click', addNote);
    
    // Contact Form Submission
    const contactForm = document.getElementById('contact-form');
    
    contactForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const phone = document.getElementById('phone').value;
        const subject = document.getElementById('subject').value;
        const message = document.getElementById('message').value;
        
        // In a real implementation, you would send this data to your server
        // Here we'll just simulate a successful submission
        alert(`תודה לך, ${name}! ההודעה שלך נשלחה בהצלחה. אחזור אליך בהקדם.`);
        
        // Reset the form
        contactForm.reset();
        
        // Here you would typically send the form data to your server
        // For example using fetch():
        /*
        fetch('send-email.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                name: name,
                email: email,
                phone: phone,
                subject: subject,
                message: message
            })
        })
        .then(response => response.json())
        .then(data => {
            alert(data.message);
            if (data.success) {
                contactForm.reset();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('אירעה שגיאה בשליחת ההודעה. אנא נסה שוב מאוחר יותר.');
        });
        */
    });
    
    // Initialize the notes display
    renderNotes();
</script>