|
|
<!DOCTYPE html> |
|
|
<html dir="rtl" lang="ar"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>نموذج الذكاء الاصطناعي المصري</title> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap'); |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Cairo', sans-serif; |
|
|
} |
|
|
|
|
|
.features-section { |
|
|
padding: 4rem 2rem; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.feature { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
margin-bottom: 3rem; |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
animation: fadeInUp 0.6s forwards; |
|
|
} |
|
|
|
|
|
.feature:nth-child(2) { |
|
|
animation-delay: 0.2s; |
|
|
} |
|
|
|
|
|
.feature:nth-child(3) { |
|
|
animation-delay: 0.4s; |
|
|
} |
|
|
|
|
|
.feature-image { |
|
|
flex: 1; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
margin: 0 2rem; |
|
|
} |
|
|
|
|
|
.feature-image img { |
|
|
width: 100%; |
|
|
height: 300px; |
|
|
object-fit: cover; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.feature:hover img { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.feature-text { |
|
|
flex: 1; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
.feature-title { |
|
|
font-size: 2rem; |
|
|
color: #333; |
|
|
margin-bottom: 1rem; |
|
|
opacity: 0; |
|
|
animation: fadeInRight 0.6s forwards; |
|
|
animation-delay: 0.3s; |
|
|
} |
|
|
|
|
|
.feature-description { |
|
|
font-size: 1.1rem; |
|
|
color: #666; |
|
|
line-height: 1.6; |
|
|
opacity: 0; |
|
|
animation: fadeInRight 0.6s forwards; |
|
|
animation-delay: 0.5s; |
|
|
} |
|
|
|
|
|
@keyframes fadeInUp { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes fadeInRight { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateX(-20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.feature { |
|
|
flex-direction: column; |
|
|
} |
|
|
.feature-image { |
|
|
margin: 1rem 0; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<section class="features-section"> |
|
|
<div class="feature"> |
|
|
<div class="feature-text"> |
|
|
<h2 class="feature-title">الذكاء الاصطناعي المتقدم</h2> |
|
|
<p class="feature-description">نظام متطور يدمج أحدث تقنيات الذكاء الاصطناعي مع احتياجات السوق المصري</p> |
|
|
</div> |
|
|
<div class="feature-image"> |
|
|
<img src="/api/placeholder/600/400" alt="الذكاء الاصطناعي المتقدم"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature"> |
|
|
<div class="feature-text"> |
|
|
<h2 class="feature-title">حلول مبتكرة</h2> |
|
|
<p class="feature-description">تطوير حلول ذكية تناسب مختلف القطاعات والمجالات في مصر</p> |
|
|
</div> |
|
|
<div class="feature-image"> |
|
|
<img src="/api/placeholder/600/400" alt="حلول مبتكرة"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature"> |
|
|
<div class="feature-text"> |
|
|
<h2 class="feature-title">تقنيات المستقبل</h2> |
|
|
<p class="feature-description">استخدام أحدث التقنيات العالمية مع التركيز على التطوير المستمر</p> |
|
|
</div> |
|
|
<div class="feature-image"> |
|
|
<img src="/api/placeholder/600/400" alt="تقنيات المستقبل"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</body> |
|
|
</html> |
