Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[18/10/2022]: TASK 3 - Add Event SubPages and Its Arabic Equivalent #190

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[18/10/2022]: TASK 3 - Add Event SubPages and Its Arabic Equivalent #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6611ff0
Task 3: event subpages
okerekechinweotito Oct 18, 2022
7476fe5
add images to event subpage
okerekechinweotito Oct 18, 2022
4fff717
Merge branch 'main' into task-3/events-subpages
okerekechinweotito Oct 23, 2022
979872a
bug fixes
okerekechinweotito Oct 23, 2022
a446e35
bug fix
okerekechinweotito Oct 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
441 changes: 441 additions & 0 deletions ar-events.html
View file
Open in desktop

Large diffs are not rendered by default.

107 changes: 96 additions & 11 deletions ar-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,22 +78,32 @@ <h2>نحن نُعزِز <span class="typed" data-typed-items="النمو الأ
<header id="header" class="d-flex align-items-center">
<div class="container d-flex align-items-center justify-content-between">





<!-- Uncomment below if you prefer to use a text logo -->
<!-- <h1 class="logo mr-auto"><a href="index.html">OSCSA</a></h1> -->

<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto active" href="#hero">الرئيسية</a></li>
<li><a class="nav-link scrollto" href="#about">من نحن</a></li>
<li><a class="nav-link scrollto" href="#services">ماهي العلوم المفتوحة</a></li>
<li><a class="nav-link scrollto" href="#testimonials">توصيات اليونسكو</a></li>
<li><a class="nav-link scrollto" href="#materilas">نشاطاتنا التعليمية</a></li>
<li><a class="nav-link scrollto" href="#contact">تواصل معنا</a></li>
<li><a href="index.html"><i class="bi bi-globe"></i>EN </a></li>
<li><a class="nav-link scrollto" href="#hero"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">مسكن</font></font></a></li>
<li><a class="nav-link scrollto" href="#about"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">حول</font></font></a></li>
<li><a class="nav-link scrollto" href="#services"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">العلوم المفتوحة</font></font></a></li>
<li class="dropdown" id="dropdown"><a class="aboutDropDown"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">الأحداث</font></font><i class="bi bi-chevron-left"></i>
</a><div class="dropdown-content"><a class="aboutDropDown">
</a><a class="nav-link scrollto" href="./index.html#event"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">قسم الفعاليات</font></font></a>
<a class="nav-link scrollto" href="./ar-events.html"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">صفحة الأحداث</font></font></a>
</div>
</li>
<li><a class="nav-link scrollto" href="#testimonials"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">توصية اليونسكو</font></font></a></li>
<li><a class="nav-link scrollto" href="#materilas"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">المواد</font></font></a></li>
<li><a class="nav-link scrollto" href="#contact"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">اتصال</font></font></a></li>
<li><a href="index.html"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">عربي</font></font><i class="bi bi-globe"></i></a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->

<a href="index.html" class="logo mr-auto"><img src="assets/img/landing/logo1.webp" alt=""></a>
<!-- Uncomment below if you prefer to use a text logo -->
<!-- <h1 class="logo mr-auto"><a href="index.html">OSCSA</a></h1> -->


</div>
</header><!-- End Header -->
Expand Down Expand Up @@ -460,6 +470,81 @@ <h3 class="subscribe-title">نشاطاتنا التعليمية</h3>



<!-- Events Ssection -->

<section id="event">
<div class="container aos-init aos-animate" data-aos="fade-up">
<div class="col-md-12">

<h3 class="section-title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">الأحداث</font></font></h3>
<div class="section-title-divider"></div>
<section class="gx-4 text-justify events-container">

<!-- Event 1 -->
<a href="./events-subpages/ar-events-subpage-1.html">
<div class="card">
<img src="../assets/img/events/event1.png" alt="الصورة الرمزية" style="width: 100%; height: 50%">
<div class="container">
<h6>
<strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
الاستفادة من العلوم المفتوحة في التعلم الآلي والمعلوماتية الحيوية
</font></font></strong>
</h6>
<p></p>
<strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">المتحدثون:</font></font></strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> بتول المرزوق
</font></font><p></p>

<p><strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">اللغة:</font></font></strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> الإنجليزية</font></font></p>
</div>
</div>
</a>

<!-- Event 2 -->
<a href="./events-subpages/ar-events-subpage-2.html">
<div class="card">
<img src="../assets/img/events/event2.png" alt="الصورة الرمزية" style="width: 100%; height: 50%">
<div class="container">
<h6>
<strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
هل تنطبق أفضل الممارسات على مشروعك؟ </font><font style="vertical-align: inherit;">تحديد سياق طريقة تورينج للمجتمع العالمي.
</font></font></strong>
</h6>
<p></p>
<strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">المتحدثون:</font></font></strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> المرزوق بتول ، كارون إيما ، شاران ملفيكام
</font></font><p></p>

<p><strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">اللغة:</font></font></strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> الإنجليزية والعربية</font></font></p>
</div>
</div>
</a>

<!-- Event 3 -->
<a href="./events-subpages/ar-events-subpage-3.html">
<div class="card">
<img src="../assets/img/events/event3.png" alt="الصورة الرمزية" style="width: 100%; height: 50%">
<div class="container">
<h6>
<strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
ممارسات لتحسين الرؤية والمخرجات لطلاب الدراسات العليا في شبكة المملكة المتحدة السعودية
</font></font></strong>
</h6>
<p></p>
<strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">المتحدثون:</font></font></strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> بتول المرزوق
</font></font><p></p>

<p><strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">اللغة:</font></font></strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> الإنجليزية والعربية</font></font></p>
</div>
</div>
</a>

</section>
</div>

<div class="text-center mt-5">
<h6><a class="font-weight-bold" href="./ar-events.html"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> انتقل إلى صفحة الأحداث</font></font></a></h6>
</div>
</div>
</section>


<!-- ======= Contact Section ======= -->
Expand Down
43 changes: 43 additions & 0 deletions assets/css/events-subpage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
.breadcrumbs {
margin: 5em 0 0 0;
}

.events-subpage-container {
padding: 0 5em;
margin: 2em 0 0 0;
}



.events-subpage-container a:hover {
text-decoration: underline;

}

.details-image-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}

.details-image-wrapper img {
width: 30em;
}


@media screen and (max-width: 900px) {
.events-subpage-container {
padding: 0 2em;
margin: 2em 0 0 0;
}

.details-image-wrapper {
display: flex;
justify-content: space-around;
flex-flow: column wrap;
}

.details-image-wrapper img {
width: 20em;
}
}
53 changes: 53 additions & 0 deletions assets/css/events.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
.events-container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
margin: 0 0 2em 0;
gap: 3em;
min-height: 35em;
padding: 0 3em;
}

.events-container a {
color: #00354E;
}

.events-container a:visited,
.events-container a:active {
color: #00354E;
}

@media screen and (max-width: 900px) {
.events-container {
flex-flow: column wrap;
justify-content: space-around;
}

}

.events-container .card {
box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 23em;
height: 28em;
gap: 3em;
cursor: pointer;
}

@media screen and (max-width: 900px) {
.events-container .card {
width: 20em;
}

}

.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
color: #00354E;
text-decoration: underline;
}

.breadcrumbs {
margin: 5em 0 0 0;
}
84 changes: 84 additions & 0 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ h3,
h4,
h5,
h6 {

font-family: 'Raleway', 'Noto Kufi Arabic', sans-serif;
font-weight: 400;
margin: 0 0 20px 0;
Expand Down Expand Up @@ -965,6 +966,88 @@ section {
margin: 0 2px;
}

/* Events Section --------------------------------- */
#event {
margin: 3em 0 0 0;
}

.events-container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
margin: 0 0 2em 0;
gap: 3em;
min-height: 35em;
cursor: pointer;
}

.events-container a {
color: #00354E;
}

.events-container a:visited,
.events-container a:active {
color: #00354E;
}

@media screen and (max-width: 900px) {
.events-container {
flex-flow: column wrap;
justify-content: space-around;
}

}

.events-container .card {
box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 20em;
height: 28em;
gap: 3em;
}

@media screen and (max-width: 900px) {
.events-container .card {
width: 20em;
}

}

.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
color: #00354E;
text-decoration: underline;
}

.breadcrumbs {
margin: 5em 0 0 0;
}

/* About DropDown */
.dropdown {
position: relative;
display: inline-block;
cursor: pointer;
}


.dropdown-content {
display: none;
position: absolute;
background-color: #00354E;
color: #fff !important;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 5px 5px 20px 2px;
z-index: 1;
text-align: center;
}

.dropdown:hover .dropdown-content {
display: block;
}

/* Contact Section
--------------------------------*/
#contact {
Expand Down Expand Up @@ -1155,3 +1238,4 @@ section {
#contact img {
padding: 20px;
}

Binary file added assets/img/events/event1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/events/event2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/events/event3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading