pythonph · zorexsalvo · Oct 20, 2022 · Oct 20, 2022
diff --git a/landing/static/landing/assets/img/Python_for_Beginner_Programmers.png b/landing/static/landing/assets/img/Python_for_Beginner_Programmers.png
diff --git a/landing/static/landing/assets/img/python_hour/python_hour_1.png b/landing/static/landing/assets/img/python_hour/python_hour_1.png
diff --git a/landing/static/landing/assets/img/python_hour/python_hour_2.png b/landing/static/landing/assets/img/python_hour/python_hour_2.png
diff --git a/landing/static/landing/assets/img/python_hour/python_hour_3.png b/landing/static/landing/assets/img/python_hour/python_hour_3.png
diff --git a/landing/templates/landing/index.html b/landing/templates/landing/index.html
@@ -580,11 +580,20 @@ <h3 class="font-montserrat text-20 m-0">
 					</div>
 				</div>

+        {% include "landing/python_hour.html" %} <br/>
+
 				<div
 					data-aos="fade-left"
 					data-aos-duration="1000"
 					data-aos-offset="300"
 				>
+
+          <img
+            src="{% static "landing/assets/img/Python_for_Beginner_Programmers.png" %}"
+            class="w-full rounded-10 object-cover"
+            />
+          <br/>
+
 					<img
            src="{% static "landing/assets/img/WFH_Pythonista.png" %}"
            class="w-full rounded-10 object-cover"

diff --git a/landing/templates/landing/python_hour.html b/landing/templates/landing/python_hour.html
@@ -0,0 +1,87 @@
+{% load static from staticfiles %}
+
+<div
+  class="swiper-container carousel-swiper bg-blue-2 w-full h-full rounded-10"
+>
+  <div class="swiper-wrapper">
+    {% for event in python_hour %}
+    <div class="swiper-slide w-full h-320x relative flex items-center">
+      <div class="relative border-r-slant h-full z-1 md:w-1/2 bg-blue-2">
+        <div
+          class="relative h-full bg-blue-2 h-full px-20 md:pl-30 pt-22 pb-35"
+        >
+          <div class="mb-5">
+            <span
+              class="
+                font-bold
+                text-10 text-blue
+                bg-yellow-2
+                rounded-md
+                uppercase
+                px-6
+                md:px-16
+                py-1
+              "
+            >
+              {{ event.tag }}
+            </span>
+          </div>
+          <h3
+            class="
+              text-24 text-white
+              font-montserrat font-semibold
+              leading-29
+              mb-10
+            "
+          >
+            <a href="{{ event.url }}">{{ event.title }}</a>
+          </h3>
+          <div class="text-16 leading-24 mb-20">
+            {{ event.description }}
+          </div>
+          <div class="flex flex-wrap mb-6 md:mb-0">
+            <span class="text-16 flex items-center leading-20 mb-12 w-1/2">
+              <img src="{% static "landing/assets/img/icon/icon-calendar.svg" %}" class="mr-10" /> {{ event.date }}
+            </span>
+            <span
+              class="
+                text-16
+                flex
+                items-center
+                leading-20
+                mb-12
+                w-1/2
+                pl-30
+                md:pl-30
+              "
+            >
+              <img src="{% static "landing/assets/img/icon/icon-clock.svg" %}"
+              class="mr-10" /> {{ event.time }}
+            </span>
+            <span class="text-16 flex items-center leading-20 mb-12 w-1/2">
+              <img src="{% static "landing/assets/img/icon/icon-marker.svg" %}"
+              class="mr-10" /> {{ event.location }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="absolute hidden md:block md:w-2/5x lg:w-1/2x ml-auto h-full">
+        <img src="{% static '' %}{{ event.cover_image }}" class="h-full w-full object-fill xl:object-contain object-right" />
+        <img src="{% static "landing/assets/img/icon/icon-logo.svg" %}" class="absolute w-90 right-0 bottom-0 mb-8 mr-4" />
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+  <div
+    class="
+      pagination
+      carousel-pagination
+      absolute
+      bottom-28
+      z-1
+      swiper-pagination-bullets
+      px-20
+      md:px-30
+    "
+  ></div>
+</div>
diff --git a/landing/views.py b/landing/views.py
@@ -9,10 +9,40 @@ def index(request):
    sections = Section.available_objects.all()
    board_members = Volunteer.available_objects.filter(is_staff=True)
    commitees = Commitee.available_objects.prefetch_related('volunteers')
+    python_hour = [
+        {
+            "link": "#",
+            "tag": "Python Hour",
+            "title": "Let's create animated Memes using Python and MoviePy",
+            "date": "Thursday, October 13, 2022",
+            "time": "7PM-8PM PHT",
+            "location": "Via Zoom and Youtube Live",
+            "cover_image": "landing/assets/img/python_hour/python_hour_1.png"
+        },
+        {
+            "link": "#",
+            "tag": "Python Hour",
+            "title": "API Development using Flask",
+            "date": "Thursday, October 20, 2022",
+            "time": "7PM-8PM PHT",
+            "location": "Via Zoom and Youtube Live",
+            "cover_image": "landing/assets/img/python_hour/python_hour_2.png"
+        },
+        {
+            "link": "#",
+            "tag": "Python Hour",
+            "title": "Data Science using Python!",
+            "date": "Thursday, October 27, 2022",
+            "time": "7PM-8PM PHT",
+            "location": "Via Zoom and Youtube Live",
+            "cover_image": "landing/assets/img/python_hour/python_hour_3.png"
+        }
+    ]

    return render(request, 'landing/index.html', {
        'events': events,
        'sections': sections,
        'board_members': board_members,
        'commitees': commitees,
+        'python_hour': python_hour,
    })