diff --git a/ar-events.html b/ar-events.html
new file mode 100644
index 0000000..4394275
--- /dev/null
+++ b/ar-events.html
@@ -0,0 +1,217 @@
+
+
+
+
+
+
+ OSCSA
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ar-index.html b/ar-index.html
index 4ffd52d..e3deaf2 100644
--- a/ar-index.html
+++ b/ar-index.html
@@ -86,6 +86,7 @@ نحن نُعزِز توصيات اليونسكو
نشاطاتنا التعليمية
تواصل معنا
+ Events
EN
diff --git a/assets/css/arabic.css b/assets/css/arabic.css
index 9a06a5c..7130a84 100644
--- a/assets/css/arabic.css
+++ b/assets/css/arabic.css
@@ -66,3 +66,101 @@ body {
padding-top: 3cm;
/* padding-bottom: 30px; */
}
+}
+/* Event */
+#events{
+ background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../img/services-bg.jpeg) fixed center center;
+ background-size: cover;
+ min-height: 80vh;
+}
+.event-items{
+ margin: 0 1rem;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-gap: .3rem;
+}
+
+#events .event-card{
+ transform: translateY(0);
+ animation: appear 2s forwards ease-in-out;
+ max-height: 100%;
+ min-height: 345px;
+ width: 297px;
+ border-radius: 10px;
+ box-shadow: 1px 1px 1px grey;
+ margin: 0.2rem .3rem;
+ transform-origin: center;
+ transition: transform 2s;
+}
+.event-image{
+ margin-right: 0 !important;
+ width: 100%;
+ height: 100%;
+}
+.event-image img{
+ width: 103%;
+ height: 100%;
+}
+#events .event-card:hover{
+ transform: translateY(-1rem) !important;
+}
+@keyframes appear {
+ 0%{
+ transform: scale(0);
+ }
+ 100%{
+ transform: scale(1);
+ }
+
+}
+.event-card div{
+ display: flex;
+ margin: .9rem .5rem 1rem 1rem;
+}
+.event-card .event-name p{
+ padding: .4rem .8rem;
+ text-transform: uppercase;
+ font-weight: 800;
+ border: none;
+ background-color: #03C4EB;
+ color: #fff;
+ border-radius: 18px;
+ margin-bottom: .1rem;
+}
+.event-card .event-title, .event-speaker, .event-language{
+ display: flex;
+ flex-direction: column;
+ margin-top: .3rem !important;
+ margin-bottom: .2rem !important;
+}
+
+.event-card .event-title h2{
+ margin: .1rem 0;
+ font-size: 1000;
+ color: #111;
+}
+.event-card .event-details{
+ font-weight: 800;
+ font-size: 70%;
+ color: gray;
+ margin-bottom: .1rem;
+}
+.event-speaker h4{
+ margin-bottom: .1rem;
+ color: #111;
+ font-weight: 800;
+ font-size: 90%;
+}
+.event-language h5{
+ margin-bottom: .1rem;
+ color: #111;
+ font-weight: 500;
+}
+@media screen and (max-width: 996px) {
+ .event-items{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ }
+}
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index f37cd18..7c5b612 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1155,3 +1155,100 @@ section {
#contact img {
padding: 20px;
}
+/* Event */
+#events{
+ background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../img/services-bg.jpeg) fixed center center;
+ background-size: cover;
+ min-height: 80vh;
+}
+.event-items{
+ margin: 0 1rem;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-gap: .3rem;
+}
+
+#events .event-card{
+ transform: translateY(0);
+ animation: appear 2s forwards ease-in-out;
+ max-height: 100%;
+ min-height: 345px;
+ width: 297px;
+ border-radius: 10px;
+ box-shadow: 1px 1px 1px grey;
+ margin: 0.2rem .3rem;
+ transform-origin: center;
+ transition: transform 2s;
+}
+.event-image{
+ margin-right: 0 !important;
+ width: 100%;
+ height: 100%;
+}
+.event-image img{
+ width: 100%;
+ margin: 0%;
+}
+#events .event-card:hover{
+ transform: translateY(-1rem) !important;
+}
+@keyframes appear {
+ 0%{
+ transform: scale(0);
+ }
+ 100%{
+ transform: scale(1);
+ }
+
+}
+.event-card div{
+ display: flex;
+ margin: .9rem .5rem 1rem 1rem;
+}
+.event-card .event-name p{
+ padding: .4rem .8rem;
+ text-transform: uppercase;
+ font-weight: 800;
+ border: none;
+ background-color: #03C4EB;
+ color: #fff;
+ border-radius: 18px;
+ margin-bottom: .1rem;
+}
+.event-card .event-title, .event-speaker, .event-language{
+ display: flex;
+ flex-direction: column;
+ margin-top: .3rem !important;
+ margin-bottom: .2rem !important;
+}
+
+.event-card .event-title h2{
+ margin: .1rem 0;
+ font-size: 1000;
+ color: #111;
+}
+.event-card .event-details{
+ font-weight: 800;
+ font-size: 70%;
+ color: gray;
+ margin-bottom: .1rem;
+}
+.event-speaker h4{
+ margin-bottom: .1rem;
+ color: #111;
+ font-weight: 800;
+ font-size: 90%;
+}
+.event-language h5{
+ margin-bottom: .1rem;
+ color: #111;
+ font-weight: 500;
+}
+@media screen and (max-width: 996px) {
+ .event-items{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ }
+}
\ No newline at end of file
diff --git a/assets/img/Capture1.PNG b/assets/img/Capture1.PNG
new file mode 100644
index 0000000..4814623
Binary files /dev/null and b/assets/img/Capture1.PNG differ
diff --git a/assets/img/Capture2.PNG b/assets/img/Capture2.PNG
new file mode 100644
index 0000000..978d212
Binary files /dev/null and b/assets/img/Capture2.PNG differ
diff --git a/assets/img/Capture3.PNG b/assets/img/Capture3.PNG
new file mode 100644
index 0000000..555ca4c
Binary files /dev/null and b/assets/img/Capture3.PNG differ
diff --git a/events.html b/events.html
new file mode 100644
index 0000000..28e388f
--- /dev/null
+++ b/events.html
@@ -0,0 +1,235 @@
+
+
+
+
+
+
+
+
+
+
+
+ OSCSA
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 549687d..e6036a2 100644
--- a/index.html
+++ b/index.html
@@ -104,6 +104,7 @@
+ 
+ 
+ 