الفرق بين المراجعتين لصفحة: «تجربة»

[مراجعة منقحة]

مراجعة ٢٢:١٦، ١٤ ديسمبر ٢٠٢٣

   <img src="صورة_البطاقة_1.jpg" alt="صورة البطاقة 1" style="width:100%">

وصف للبطاقة 1.

   <img src="صورة_البطاقة_2.jpg" alt="صورة البطاقة 2" style="width:100%">

وصف للبطاقة 2.

 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;

}

.card {

 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 transition: 0.3s;
 width: 200px;
 border-radius: 5px;
 margin: 15px;

}

.card:hover {

 box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);

}

.container {

 padding: 2px 16px;

}

</style>

@@ سطر ١: / سطر ١: @@
-<includeonly>{{مقالة الصفحة الرئيسية المختارة/المقالة الحالية}}</includeonly><noinclude>
+<div class="card-container">
-[[تصنيف:قوالب الصفحة الرئيسية]]
+  <div class="card">
-{{توثيق}}</noinclude>
+    <img src="صورة_البطاقة_1.jpg" alt="صورة البطاقة 1" style="width:100%">
+    <div class="container">
+      <h4><b>عنوان البطاقة 1</b></h4>
+      <p>وصف للبطاقة 1.</p>
+    </div>
+  </div>
+  <div class="card">
+    <img src="صورة_البطاقة_2.jpg" alt="صورة البطاقة 2" style="width:100%">
+    <div class="container">
+      <h4><b>عنوان البطاقة 2</b></h4>
+      <p>وصف للبطاقة 2.</p>
+    </div>
+  </div>
+  <!-- يمكنك إضافة المزيد من البطاقات حسب الحاجة -->
+</div>
+<style>
+.card-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+  width: 200px;
+  border-radius: 5px;
+  margin: 15px;
+}
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+.container {
+  padding: 2px 16px;
+}
+</style>