Scribd
Upload
17 views17 pages

Index

The document is an HTML template for an educational platform, featuring a responsive design with sections for a header, hero, features, testimonials, contact, and footer. It uses CSS variables for styling and includes various UI elements such as buttons, grids, and cards. The layout is designed for right-to-left text direction, suitable for Arabic language users.

Uploaded by

anismedkour99
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views17 pages

Index

The document is an HTML template for an educational platform, featuring a responsive design with sections for a header, hero, features, testimonials, contact, and footer. It uses CSS variables for styling and includes various UI elements such as buttons, grids, and cards. The layout is designed for right-to-left text direction, suitable for Arabic language users.

Uploaded by

anismedkour99
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<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">
<link href="https://fonts.googleapis.com/css2?
family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #6e3bdc; /* ‫* اللون البنفسجي الأساسي‬/
--primary-light: #8d6ad9; /* ‫* بنفسجي فاتح‬/
--secondary: #f8f5ff; /* ‫* خلفية فاتحة‬/
--accent: #ff9e5e; /* ‫* لون تباين برتقالي‬/
--dark: #1a1a2e;
--light: #ffffff;
--gray: #6c757d;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Tajawal', sans-serif;
}

body {
background-color: var(--secondary);
color: var(--dark);
direction: rtl;
}

/* Header */
.header {
background-color: var(--light);
padding: 1rem 2rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}

.logo-container {
display: flex;
align-items: center;
gap: 1rem;
}

.logo-img {
height: 50px;
}

.logo-text h1 {
color: var(--primary);
font-size: 1.5rem;
margin-bottom: 0.2rem;
}

.logo-text p {
color: var(--gray);
font-size: 0.8rem;
}

.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}

.nav-links a {
color: var(--dark);
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}

.nav-links a:hover {
color: var(--primary);
}

.auth-buttons .btn {
padding: 0.5rem 1.5rem;
border-radius: 25px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
}

.btn-login {
background: linear-gradient(90deg, var(--primary), var(--primary-
light));
color: var(--light);
}

.btn-login:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(110, 59, 220, 0.3);
}

/* Hero Section */
.hero {
margin-top: 80px;
padding: 5rem 2rem;
background: linear-gradient(90deg, var(--primary), var(--primary-
light));
color: var(--light);
text-align: center;
}

.hero h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}

.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 2rem;
}

.hero-buttons {
display: flex;
justify-content: center;
gap: 1rem;
}

.hero-btn {
padding: 0.8rem 2rem;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
}

.btn-primary {
background-color: var(--light);
color: var(--primary);
}

.btn-primary:hover {
background-color: var(--accent);
color: var(--light);
transform: translateY(-3px);
}

.btn-outline {
border: 2px solid var(--light);
color: var(--light);
}

.btn-outline:hover {
background-color: var(--light);
color: var(--primary);
transform: translateY(-3px);
}

/* Features */
.features {
padding: 4rem 2rem;
background-color: var(--light);
}

.section-title {
text-align: center;
margin-bottom: 3rem;
}

.section-title h2 {
font-size: 2rem;
color: var(--primary);
margin-bottom: 1rem;
position: relative;
display: inline-block;
}

.section-title h2::after {
content: '';
position: absolute;
bottom: -10px;
right: 50%;
transform: translateX(50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--primary-
light));
}

.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}

.feature-card {
background-color: var(--light);
border-radius: 10px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s;
text-align: center;
border-top: 3px solid var(--primary);
}

.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(110, 59, 220, 0.1);
}

.feature-icon {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1.5rem;
}

/* Footer */
.footer {
background: linear-gradient(90deg, var(--primary), var(--primary-
light));
color: var(--light);
padding: 3rem 2rem;
text-align: center;
}

.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin: 2rem 0;
}
.footer-links a {
color: var(--light);
text-decoration: none;
}

@media (max-width: 768px) {


.header {
flex-direction: column;
gap: 1rem;
}

.hero-buttons {
flex-direction: column;
}

.hero-btn {
width: 100%;
text-align: center;
}
}

.btn-primary {
background-color: var(--light);
color: var(--primary);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
background-color: var(--accent);
color: var(--light);
}

.btn-outline {
background-color: transparent;
border: 2px solid var(--light);
color: var(--light);
}

.btn-outline:hover {
background-color: var(--light);
color: var(--primary);
transform: translateY(-3px);
}

/* Features Section */
.features {
padding: 4rem 2rem;
background-color: var(--secondary);
}

.section-title {
text-align: center;
margin-bottom: 3rem;
}

.section-title h2 {
font-size: 2rem;
color: var(--primary);
margin-bottom: 1rem;
position: relative;
display: inline-block;
}

.section-title h2::after {
content: '';
position: absolute;
bottom: -10px;
right: 50%;
transform: translateX(50%);
width: 80px;
height: 3px;
background: linear-gradient(to right, var(--primary), var(--accent));
}

.section-title p {
color: var(--gray);
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}

.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}

.feature-card {
background-color: var(--light);
border-radius: 10px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
border-top: 3px solid var(--primary);
}

.feature-icon {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1.5rem;
}

.feature-card h3 {
font-size: 1.3rem;
margin-bottom: 1rem;
color: var(--dark);
}
.feature-card p {
color: var(--gray);
line-height: 1.6;
}

/* Testimonials */
.testimonials {
padding: 4rem 2rem;
background-color: var(--light);
}

.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}

.testimonial-card {
background-color: var(--secondary);
border-radius: 10px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
position: relative;
}

.testimonial-text {
font-style: italic;
margin-bottom: 1.5rem;
color: var(--dark);
line-height: 1.6;
}

.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
}

.author-img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}

.author-info h4 {
color: var(--primary);
margin-bottom: 0.2rem;
}

.author-info p {
color: var(--gray);
font-size: 0.9rem;
}

/* Contact Section */
.contact {
padding: 4rem 2rem;
background-color: var(--secondary);
}

.contact-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
margin-top: 2rem;
}

.contact-info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.contact-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}

.contact-icon {
font-size: 1.5rem;
color: var(--primary);
margin-top: 0.3rem;
}

.contact-text h3 {
color: var(--dark);
margin-bottom: 0.3rem;
}

.contact-text p, .contact-text a {
color: var(--gray);
text-decoration: none;
transition: color 0.3s ease;
}

.contact-text a:hover {
color: var(--primary);
}

.contact-form {
background-color: var(--light);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.form-group {
margin-bottom: 1.5rem;
}

.form-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--dark);
font-weight: 500;
}
.form-control {
width: 100%;
padding: 0.8rem 1rem;
border: 1px solid #ddd;
border-radius: 5px;
font-family: 'Tajawal', sans-serif;
transition: all 0.3s ease;
}

.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.1);
}

textarea.form-control {
min-height: 150px;
resize: vertical;
}

.submit-btn {
background: linear-gradient(135deg, var(--primary), var(--accent)));
color: var(--light);
border: none;
padding: 0.8rem 2rem;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
}

.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
background: var(--primary-dark);
}

/* Footer */
.footer {
background: linear-gradient(135deg, var(--primary), var(--primary-
dark)));
color: var(--light);
padding: 3rem 2rem 1.5rem;
}

.footer-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}

.footer-logo {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}

.footer-logo-img {
height: 40px;
width: auto;
}

.footer-logo-text h2 {
font-size: 1.2rem;
margin-bottom: 0.3rem;
color: var(--light);
}

.footer-logo-text p {
font-size: 0.8rem;
opacity: 0.8;
color: rgba(255, 255, 255, 0.7);
}

.footer-links h3 {
font-size: 1.2rem;
margin-bottom: 1.5rem;
position: relative;
display: inline-block;
color: var(--light);
}

.footer-links h3::after {
content: '';
position: absolute;
bottom: -8px;
right: 0;
width: 40px;
height: 2px;
background-color: var(--accent);
}

.footer-links ul {
list-style: none;
}

.footer-links li {
margin-bottom: 0.8rem;
}

.footer-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
}

.footer-links a:hover {
color: var(--light);
padding-right: 5px;
}

.footer-social h3 {
font-size: 1.2rem;
margin-bottom: 1.5rem;
position: relative;
display: inline-block;
color: var(--light);
}

.footer-social h3::after {
content: '';
position: absolute;
bottom: -8px;
right: 0;
width: 40px;
height: 2px;
background-color: var(--accent);
}

.social-icons {
display: flex;
gap: 1rem;
}

.social-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
color: var(--light);
}

.social-icon:hover {
background-color: var(--accent);
transform: translateY(-3px);
}

.footer-bottom {
text-align: center;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 2rem;
}

.footer-bottom p {
opacity: 0.8;
font-size: 0.9rem;
}

/* Responsive Styles */
@media (max-width: 768px) {
.header {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}

.auth-buttons {
width: 100%;
display: flex;
justify-content: center;
}

.hero {
padding: 3rem 1rem;
text-align: center;
}

.hero h2 {
font-size: 1.8rem;
}

.hero p {
font-size: 1rem;
}

.hero-buttons {
flex-direction: column;
width: 100%;
}

.hero-btn {
width: 100%;
text-align: center;
}

.features, .testimonials, .contact {


padding: 2rem 1rem;
}

.footer-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="logo-container">
<img src="http://localhost/insfpbm/src/Picsart_24-12-04_19-08-42-
270.png" alt="‫ "شعار المعهد‬class="logo-img">
<div class="logo-text">
<h1>‫<المعهد الوطني للتكوين المهني‬/h1>
<p>‫ سدراتة‬- ‫<بلقاضي معمر‬/p>
</div>
</div>
<div class="auth-buttons">
<a href="login.php" class="btn btn-login">‫<تسجيل الدخول‬/a>

</div>
</header>

<!-- Hero Section -->


<section class="hero">
<h2>‫<منصتنا التعليمية توفر لك تجربة تكوين مهني متكاملة‬/h2>
<p> ‫انضم إلى آالف المتربصين الذين طوروا مهاراتهم وحققوا أحالمهم المهنية من‬
‫<خالل برامجنا التدريبية المتميزة‬/p>
<div class="hero-buttons">
<a href="login.php" class="hero-btn btn-primary">‫<الدخول إلى المنصة‬/a>
<a href="demande_certificate.php" class="hero-btn btn-outline"> ‫طلب‬
‫<شهادة التربص‬/a>
</div>
</section>

<!-- Features Section -->


<section class="features" id="features">
<div class="section-title">
<h2>‫<لماذا تختار منصتنا؟‬/h2>
<p> ‫نقدم حلوًال تعليمية متكاملة تلبي جميع احتياجات المتربصين والأساتذة‬
‫<والإدارة‬/p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-laptop-code"></i>
</div>
<h3>‫<منصة تعليمية متكاملة‬/h3>
<p> ‫واجهة سهلة االستخدام توفر جميع الأدوات التعليمية في مكان‬
‫<واحد‬/p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<h3>‫<أساتذة مؤهلون‬/h3>
<p>‫<تعلم من أفضل الخبراء في مجال التكوين المهني‬/p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-certificate"></i>
</div>
<h3>‫<شهادات معتمدة‬/h3>
<p>‫<احصل على شهادات معترف بها في سوق العمل‬/p>
</div>
</div>
</section>

<!-- Testimonials Section -->


<section class="testimonials">
<div class="section-title">
<h2>‫<آراء المتربصين‬/h2>
<p>‫<انظر ماذا يقول طالبنا عن تجربتهم مع منصتنا التعليمية‬/p>
</div>
<div class="testimonial-grid">
<div class="testimonial-card">
<p class="testimonial-text">" ‫المنصة ساعدتني كثيًرا في تطوير مهاراتي‬
‫<"التقنية والحصول على فرصة عمل مميزة في وقت قصير‬/p>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="
‫ "صورة المتربص‬class="author-img">
<div class="author-info">
<h4>‫<أحمد بوزيد‬/h4>
<p>‫<متربص في الإلكترونيك الصناعي‬/p>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="testimonial-text">"‫ واجهة سهلة‬،‫تجربة رائعة مع منصة المعهد‬
‫<"االستخدام ومحتوى تعليمي ممتاز‬/p>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/women/44.jpg"
alt="‫ "صورة المتربص‬class="author-img">
<div class="author-info">
<h4>‫<فاطمة الزهراء‬/h4>
<p>‫<متربصة في الإعالم الآلي‬/p>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="testimonial-text">" ‫ساعدتني المنصة في متابعة دروسي وتقديم‬
‫<"واجباتي بسهولة حتى أثناء عملي‬/p>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="
‫ "صورة المتربص‬class="author-img">
<div class="author-info">
<h4>‫<محمد أمين‬/h4>
<p>‫<متربص في التبريد والتكييف‬/p>
</div>
</div>
</div>
</div>
</section>

<!-- Contact Section -->


<section class="contact">
<div class="section-title">
<h2>‫<تواصل معنا‬/h2>
<p>‫<لديك استفسار أو تحتاج إلى مساعدة؟ ال تتردد في التواصل معنا‬/p>
</div>
<div class="contact-container">
<div class="contact-info">
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="contact-text">
<h3>‫<العنوان‬/h3>
<p>‫ الجزائر‬،‫ والية سوق أهراس‬،‫<سدراتة‬/p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-phone-alt"></i>
</div>
<div class="contact-text">
<h3>‫<الهاتف‬/h3>
<p><a href="tel:+213123456789">+213 12 34 56 78</a></p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-text">
<h3>‫<البريد الإلكتروني‬/h3>
<p><a
href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-clock"></i>
</div>
<div class="contact-text">
<h3>‫<ساعات العمل‬/h3>
<p> ‫ مساًء‬4 ‫ صباًحا إلى‬8 ‫ من‬،‫<من الأحد إلى الخميس‬/p>
</div>
</div>
</div>
<div class="contact-form">
<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="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>
</section>

<!-- Footer -->


<footer class="footer">
<div class="footer-container">
<div class="footer-about">
<div class="footer-logo">
<img src="http://localhost/insfpbm/src/Picsart_24-12-04_19-08-
42-270.png" alt="‫ "شعار المعهد‬class="footer-logo-img">
<img src="http://localhost/insfpbm/src/Picsart_24-12-04_19-08-42-
270.png" alt="‫ "شعار المعهد‬class="footer-logo-img">
<div class="footer-logo-text">
<h2>‫<المعهد الوطني‬/h2>
<H3>‫<للتكوين المهني بلقاضي معمر سدراتة‬/H3>
</div>
</div>
<p>‫نهدف إلى تقديم أفضل برامج التكوين المهني لتأهيل كوادر قادرة على‬
‫المنافسة في سوق العمل‬.</p>
</div>
<div class="footer-links">
<h3>‫<روابط سريعة‬/h3>
<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>
<li><a href="#">‫<اتصل بنا‬/a></li>
</ul>
</div>
<div class="footer-social">
<h3>‫<تابعنا على‬/h3>
<div class="social-icons">
<a href="#" class="social-icon"><i class="fab fa-facebook-
f"></i></a>
<a href="#" class="social-icon"><i class="fab
fa-twitter"></i></a>
<a href="#" class="social-icon"><i class="fab
fa-instagram"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-
in"></i></a>
<a href="#" class="social-icon"><i class="fab
fa-youtube"></i></a>
</div>
<div class="footer-newsletter" style="margin-top: 1.5rem;">

</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 ‫المعهد الوطني المتخصص في التكوين المهني بلقاضي معمر‬
‫ جميع الحقوق محفوظة‬.‫سدراتة‬.</p>
</div>
</footer>

<script>
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});

// Header scroll effect


window.addEventListener('scroll', function() {
const header = document.querySelector('.header');
if (window.scrollY > 50) {
header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
header.style.padding = '0.5rem 2rem';
} else {
header.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)';
header.style.padding = '1rem 2rem';
}
});
</script>
</body>
</html>

You might also like