Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>موقعي البسيط</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #2c3e50; | |
| --secondary-color: #3498db; | |
| --accent-color: #e74c3c; | |
| --light-color: #ecf0f1; | |
| --dark-color: #2c3e50; | |
| --text-color: #333; | |
| --transition: all 0.3s ease; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| line-height: 1.6; | |
| color: var(--text-color); | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| padding: 15px 0; | |
| transition: var(--transition); | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 25px; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--text-color); | |
| font-weight: 500; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .nav-links a:hover { | |
| color: var(--secondary-color); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--secondary-color); | |
| transition: var(--transition); | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| margin-top: 100px; | |
| padding: 80px 0; | |
| text-align: center; | |
| color: white; | |
| } | |
| .hero h1 { | |
| font-size: 3.5rem; | |
| margin-bottom: 20px; | |
| animation: fadeInUp 1s ease; | |
| } | |
| .hero p { | |
| font-size: 1.3rem; | |
| margin-bottom: 30px; | |
| max-width: 700px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| animation: fadeInUp 1s ease 0.2s both; | |
| } | |
| .cta-button { | |
| display: inline-block; | |
| padding: 15px 35px; | |
| background: var(--accent-color); | |
| color: white; | |
| text-decoration: none; | |
| border-radius: 50px; | |
| font-weight: bold; | |
| transition: var(--transition); | |
| box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4); | |
| animation: fadeInUp 1s ease 0.4s both; | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6); | |
| } | |
| /* About Section */ | |
| .about { | |
| background: white; | |
| padding: 80px 0; | |
| } | |
| .section-title { | |
| text-align: center; | |
| font-size: 2.5rem; | |
| margin-bottom: 50px; | |
| color: var(--primary-color); | |
| position: relative; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -15px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 80px; | |
| height: 4px; | |
| background: var(--secondary-color); | |
| } | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 50px; | |
| align-items: center; | |
| } | |
| .about-text { | |
| text-align: right; | |
| } | |
| .about-text h3 { | |
| font-size: 1.8rem; | |
| margin-bottom: 20px; | |
| color: var(--primary-color); | |
| } | |
| .about-text p { | |
| margin-bottom: 20px; | |
| font-size: 1.1rem; | |
| } | |
| .features { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 25px; | |
| margin-top: 30px; | |
| } | |
| .feature { | |
| background: var(--light-color); | |
| padding: 25px; | |
| border-radius: 10px; | |
| transition: var(--transition); | |
| } | |
| .feature:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature i { | |
| font-size: 2.5rem; | |
| color: var(--secondary-color); | |
| margin-bottom: 15px; | |
| } | |
| .feature h4 { | |
| margin-bottom: 10px; | |
| color: var(--primary-color); | |
| } | |
| /* Services Section */ | |
| .services { | |
| background: var(--light-color); | |
| padding: 80px 0; | |
| } | |
| .service-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .service-card { | |
| background: white; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| transition: var(--transition); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .service-card img { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| } | |
| .service-info { | |
| padding: 25px; | |
| } | |
| .service-info h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 15px; | |
| color: var(--primary-color); | |
| } | |
| .service-info p { | |
| margin-bottom: 20px; | |
| } | |
| .service-link { | |
| display: inline-block; | |
| color: var(--secondary-color); | |
| text-decoration: none; | |
| font-weight: bold; | |
| transition: var(--transition); | |
| } | |
| .service-link:hover { | |
| color: var(--accent-color); | |
| } | |
| /* Contact Section */ | |
| .contact { | |
| background: white; | |
| padding: 80px 0; | |
| } | |
| .contact-form { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .form-group { | |
| margin-bottom: 25px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 10px; | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| } | |
| .form-group input, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 15px; | |
| border: 2px solid var(--light-color); | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--secondary-color); | |
| } | |
| .submit-btn { | |
| background: var(--secondary-color); | |
| color: white; | |
| border: none; | |
| padding: 15px 40px; | |
| border-radius: 50px; | |
| font-size: 1.1rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .submit-btn:hover { | |
| background: var(--primary-color); | |
| transform: translateY(-3px); | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark-color); | |
| color: white; | |
| padding: 40px 0; | |
| text-align: center; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 30px; | |
| margin-bottom: 30px; | |
| } | |
| .footer-section h3 { | |
| margin-bottom: 20px; | |
| color: var(--secondary-color); | |
| } | |
| .footer-section p { | |
| margin-bottom: 15px; | |
| } | |
| .social-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .social-links a { | |
| color: white; | |
| font-size: 1.5rem; | |
| transition: var(--transition); | |
| } | |
| .social-links a:hover { | |
| color: var(--secondary-color); | |
| transform: translateY(-5px); | |
| } | |
| .copyright { | |
| padding-top: 20px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| margin-top: 20px; | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .hero p { | |
| font-size: 1.1rem; | |
| } | |
| .about-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .nav-links { | |
| display: none; | |
| } | |
| .mobile-menu { | |
| display: block; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .service-cards { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--secondary-color); | |
| border-radius: 5px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary-color); | |
| } | |
| /* Built with anycoder link */ | |
| .built-with { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: rgba(255, 255, 255, 0.9); | |
| padding: 10px 20px; | |
| border-radius: 30px; | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); | |
| transition: var(--transition); | |
| z-index: 1000; | |
| } | |
| .built-with:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container header-content"> | |
| <a href="#" class="logo">موقعي</a> | |
| <nav> | |
| <ul class="nav-links"> | |
| <li><a href="#home">الرئيسية</a></li> | |
| <li><a href="#about">عن الموقع</a></li> | |
| <li><a href="#services">الخدمات</a></li> | |
| <li><a href="#contact">تواصل معنا</a></li> | |
| </ul> | |
| </nav> | |
| <div class="mobile-menu"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <section id="home" class="hero"> | |
| <div class="container"> | |
| <h1>مرحباً بك في موقعي البسيط</h1> | |
| <p>هذا موقع جميل وسهل الاستخدام مصمم خصيصاً لك. استكشف الميزات الرائعة وابدأ رحلتك الرقمية.</p> | |
| <a href="#about" class="cta-button">ابدأ الآن</a> | |
| </div> | |
| </section> | |
| <section id="about" class="about"> | |
| <div class="container"> | |
| <h2 class="section-title">عن الموقع</h2> | |
| <div class="about-content"> | |
| <div class="about-text"> | |
| <h3>لماذا هذا الموقع؟</h3> | |
| <p>أنا سعيد بإنشاء هذا الموقع البسيط الذي يمكنك حفظه ونسخه بسهولة. تم تصميمه ليكون سهل الاستخدام ومتناسق على جميع الأجهزة.</p> | |
| <p>يتميز الموقع بتصميم حديث ومتجاوب مع جميع أحجام الشاشات، مما يضمن تجربة رائعة للمستخدمين.</p> | |
| <div class="features"> | |
| <div class="feature"> | |
| <i class="fas fa-mobile-alt"></i> | |
| <h4>متجاوب</h4> | |
| <p>يعمل بشكل مثالي على جميع الأجهزة</p> | |
| </div> | |
| <div class="feature"> | |
| <i class="fas fa-rocket"></i> | |
| <h4>سريع</h4> | |
| <p>تحميل سريع ومؤثرات بسيطة</p> | |
| </div> | |
| <div class="feature"> | |
| <i class="fas fa-palette"></i> | |
| <h4>جذاب</h4> | |
| <p>تصميم أنيق وجذاب</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="about-image"> | |
| <img src="https://picsum.photos/seed/website/500/400" alt="موقع ويب" style="border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="services" class="services"> | |
| <div class="container"> | |
| <h2 class="section-title">خدماتنا</h2> | |
| <div class="service-cards"> | |
| <div class="service-card"> | |
| <img src="https://picsum.photos/seed/webdesign/400/200" alt="تصميم الويب"> | |
| <div class="service-info"> | |
| <h3>تصميم الويب</h3> | |
| <p>نحن نقدم تصميمات حديثة وجذابة تتناسب مع احتياجاتك. كل موقع مصمم خصيصاً ليعكس هويتك.</p> | |
| <a href="#" class="service-link">تعرف أكثر <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| </div> | |
| <div class="service-card"> | |
| <img src="https://picsum.photos/seed/development/400/200" alt="التطوير"> | |
| <div class="service-info"> | |
| <h3>التطوير</h3> | |
| <p>خبرتنا في تطوير المواقع تجعل من مشروعك ناجحاً. نستخدم أحدث التقنيات لضمان أداء عالي.</p> | |
| <a href="#" class="service-link">تعرف أكثر <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| </div> | |
| <div class="service-card"> | |
| <img src="https://picsum.photos/seed/consulting/400/200" alt="الاستشارات"> | |
| <div class="service-info"> | |
| <h3>الاستشارات</h3> | |
| <p>نقدم استشارات متخصصة تساعدك على اتخاذ القرارات الصحيحة لنجاح مشروعك الرقمي.</p> | |
| <a href="#" class="service-link">تعرف أكثر <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact" class="contact"> | |
| <div class="container"> | |
| <h2 class="section-title">تواصل معنا</h2> | |
| <div class="contact-form"> | |
| <form id="contactForm"> | |
| <div class="form-group"> | |
| <label for="name">الاسم الكامل</label> | |
| <input type="text" id="name" name="name" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">البريد الإلكتروني</label> | |
| <input type="email" id="email" name="email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">الرسالة</label> | |
| <textarea id="message" name="message" rows="5" required></textarea> | |
| </div> | |
| <button type="submit" class="submit-btn">إرسال الرسالة</button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>عن الموقع</h3> | |
| <p>موقع بسيط وجميل مصمم ليعرض خدماتك بطريقة احترافية.</p> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>روابط سريعة</h3> | |
| <p><a href="#home" style="color: white; text-decoration: none;">الرئيسية</a></p> | |
| <p><a href="#about" style="color: white; text-decoration: none;">عن الموقع</a></p> | |
| <p><a href="#services" style="color: white; text-decoration: none;">الخدمات</a></p> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>تواصل</h3> | |
| <p><i class="fas fa-envelope"></i> info@mysite.com</p> | |
| <p><i class="fas fa-phone"></i> +962 79 123 4567</p> | |
| </div> | |
| </div> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-facebook"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2023 موقعي. جميع الحقوق محفوظة.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">Built with anycoder</a> | |
| <script> | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Form submission handling | |
| document.getElementById('contactForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const formData = new FormData(this); | |
| const name = formData.get('name'); | |
| // Create success message | |
| const successMessage = document.createElement('div'); | |
| successMessage.style.cssText = ` | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: #27ae60; | |
| color: white; | |
| padding: 20px 40px; | |
| border-radius: 10px; | |
| font-size: 1.2rem; | |
| z-index: 1000; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.3); | |
| animation: fadeInUp 0.5s ease; | |
| `; | |
| successMessage.textContent = `شكراً لك ${name}، سنتواصل معك قريباً!`; | |
| document.body.appendChild(successMessage); | |
| // Reset form | |
| this.reset(); | |
| // Remove message after 3 seconds | |
| setTimeout(() => { | |
| successMessage.style.animation = 'fadeInUp 0.5s ease reverse'; | |
| setTimeout(() => { | |
| document.body.removeChild(successMessage); | |
| }, 500); | |
| }, 3000); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| const navLinks = document.querySelector('.nav-links'); | |
| mobileMenu.addEventListener('click', () => { | |
| navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex'; | |
| }); | |
| // Header scroll effect | |
| window.addEventListener('scroll', () => { | |
| const header = document.querySelector('header'); | |
| if (window.scrollY > 100) { | |
| header.style.background = 'rgba(255, 255, 255, 0.98)'; | |
| header.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.15)'; | |
| } else { | |
| header.style.background = 'rgba(255, 255, 255, 0.95)'; | |
| header.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)'; | |
| } | |
| }); | |
| // Add animation on scroll | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.animation = 'fadeInUp 0.6s ease forwards'; | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all sections | |
| document.querySelectorAll('section').forEach(section => { | |
| observer.observe(section); | |
| }); | |
| // Add hover effect to service cards | |
| document.querySelectorAll('.service-card').forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.style.transform = 'translateY(-10px)'; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |