Merge pull request #62 from Darkbeast-glitch/speakers

Update home page with speaker module and styles
djangocon · May 7, 2024 · 593ffd4 · 593ffd4
2 parents 1e264d1 + b3d3e52
commit 593ffd4
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 30 deletions.
diff --git a/djangocon_2024/content/home/4speakers.md b/djangocon_2024/content/home/4speakers.md
@@ -1,24 +1,64 @@
-<div markdown="1" class="swiper-slide" style="cursor:pointer" onclick="window.open('https://pretalx.evolutio.pt/pycon-pt-2023/speaker/BJWYLZ/','_blank')">
-![Speaker 1](/static/images/speakers/person.png){:class='speaker'} **Tom Forbes**{:class='speaker-name'}
-</div>
-<div markdown="1" class="swiper-slide" style="cursor:pointer" onclick="window.open('https://pretalx.evolutio.pt/pycon-pt-2023/speaker/MQF8UQ/','_blank')">
-![Speaker 2](/static/images/speakers/person_1.jpg){:class='speaker'} **Darya Petrashka**{:class='speaker-name'}
-</div>
-<div markdown="1" class="swiper-slide" style="cursor:pointer" onclick="window.open('https://pretalx.evolutio.pt/pycon-pt-2023/speaker/ELJJRP/','_blank')">
-![Speaker 3](/static/images/speakers/person_2.jpg){:class='speaker'} **Lucas**{:class='speaker-name'}
-</div>
-<div markdown="1" class="swiper-slide" style="cursor:pointer" onclick="window.open('https://pretalx.evolutio.pt/pycon-pt-2023/speaker/9NHRV8/','_blank')">
-![Speaker 4](/static/images/speakers/person_3.jpg){:class='speaker'} **Stefanie Molin**{:class='speaker-name'}
-</div>
-<div markdown="1" class="swiper-slide" style="cursor:pointer" onclick="window.open('https://pretalx.evolutio.pt/pycon-pt-2023/speaker/BK7CRH/','_blank')">
-![Speaker 5](/static/images/speakers/person_4-mino.jpg){:class='speaker'} **Felix Mino**{:class='speaker-name'}
-</div>
-<div markdown="1" class="swiper-slide" style="cursor:pointer" onclick="window.open('https://pretalx.evolutio.pt/pycon-pt-2023/speaker/8DMJYJ/','_blank')">
-![Speaker 6](/static/images/speakers/person_5.jpg){:class='speaker'} **Cristián Maureira-Fredes**{:class='speaker-name'} 
-</div>
-<div markdown="1" class="swiper-slide" style="cursor:pointer" onclick="window.open('https://pretalx.evolutio.pt/pycon-pt-2023/speaker/FDWJUP/','_blank')">
-![Speaker 7](/static/images/speakers/person.png){:class='speaker'} **Kushal Vijay**{:class='speaker-name'}
-</div>
-<div markdown="1" class="swiper-slide" style="cursor:pointer" onclick="window.open('https://pretalx.evolutio.pt/pycon-pt-2023/speaker/JUGPGE/','_blank')">
-![Speaker 8](/static/images/speakers/person_1.jpg){:class='speaker'} **Maxim Danilov**{:class='speaker-name'}
+title: Speakers
+layout: home_speakers
+
+<div class="container">
+<img src="/static/images/other/speakers.png" class="speaker-logo img-fluid" alt="speakers" />
+    <div class="row">
+        <!-- First Speaker -->
+        <div class="col-lg-3 col-md-4 col-sm-6">
+            <div class="swiper-slide" onclick="window.open('https://pretalx.evolutio.pt/djangocon-europe-2024/speaker/BJM3EY/','_blank')">
+                <img class='speaker' src="https://pretalx.evolutio.pt/media/anna_3.jpg" alt="Speaker 1">
+                <div class='speaker-name'>Anna Makarudze</div>
+                <div class='speaker-title'><span style="color:#863b35; font-weight:bold">Talk: </span>Django Girls: Decade in Review and Beyond </div>
+        <div style="display: flex; justify-content: center;">
+                <img src="/static/images/Icons/x.png" class="iconlogo img-fluid" alt="icons" />
+                <img src="/static/images/Icons/linkedin.png" class="iconlogo img-fluid" alt="icons" />
+            </div>
+            </div>
+        </div>
+        <!-- Second Speaker -->
+        <div class="col-lg-3 col-md-4 col-sm-6">
+            <div class="swiper-slide" onclick="window.open('https://pretalx.evolutio.pt/djangocon-europe-2024/speaker/3TG9VD/','_blank')">
+                <img class='speaker' src="https://pretalx.evolutio.pt/media/avatars/Antonis_Kalipetis_Platform_D3mrWrg.png" alt="Speaker 1">
+                <div class='speaker-name'>Antonis Kalipetis</div>
+                <div class='speaker-title'><span style="color:#863b35; font-weight:bold">Talk: </span>Up(sun) and running with Django description:..</div>
+        <div style="display: flex; justify-content: center;">
+                <img src="/static/images/Icons/x.png" class="iconlogo img-fluid" alt="icons" />
+                <img src="/static/images/Icons/linkedin.png" class="iconlogo img-fluid" alt="icons" />
+            </div>
+            </div>
+        </div>
+        <!-- Third Speaker -->
+         <div class="col-lg-3 col-md-4 col-sm-6">
+            <div class="swiper-slide" onclick="window.open('https://pretalx.evolutio.pt/djangocon-europe-2024/speaker/DGGFQB/','_blank')">
+                <img class='speaker' src="https://pretalx.evolutio.pt/media/avatars/12b7e40ed1ebd4846746004c77020183_91b8QTD.jpg" alt="Speaker 1">
+                <div class='speaker-name'>Anze</div>
+                <div class='speaker-title'><span style="color:#863b35; font-weight:bold">Talk: </span>Django, SQLite, and Production</div>
+        <div style="display: flex; justify-content: center;">
+                <img src="/static/images/Icons/x.png" class="iconlogo img-fluid" alt="icons" />
+                <img src="/static/images/Icons/linkedin.png" class="iconlogo img-fluid" alt="icons" />
+            </div>
+            </div>
+        </div>
+        <!-- Fourth Speaker -->
+       <div class="col-lg-3 col-md-4 col-sm-6">
+            <div class="swiper-slide" onclick="window.open('https://pretalx.evolutio.pt/djangocon-europe-2024/speaker/XWXU3M/','_blank')">
+                <img class='speaker' src="https://pretalx.evolutio.pt/media/avatars/Screenshot_2024-01-26_130522-min_KwTGpat.png" alt="Speaker 1">
+                <div class='speaker-name'>Dawn Michelle Wages</div>
+                <div class='speaker-title'><span style="color:#863b35; font-weight:bold">Talk: </span>Supercharging your Python Dev Environment...</div>
+        <div style="display: flex; justify-content: center;">
+                <img src="/static/images/Icons/x.png" class="iconlogo img-fluid" alt="icons" />
+                <img src="/static/images/Icons/linkedin.png" class="iconlogo img-fluid" alt="icons" />
+            </div>
+            </div>
+        </div>
+        <div class="row px-5 mainbutton">
+  <div class="container-button pt-5 px-3 d-flex justify-content-center">
+    <a href="https://pretalx.evolutio.pt/djangocon-europe-2024/speaker/" class="mx-2">
+      <button class="btn btn-primary btn-lg pycon-btn yellow-btn text-uppercase home-btn" role="button">
+        ALL Speakers <span class="pl-2"></span>
+      </button>
+    </a>
+        <!-- More speakers can be added following the same pattern -->
+    </div>
 </div>
diff --git a/djangocon_2024/static/css/project.css b/djangocon_2024/static/css/project.css
@@ -2262,3 +2262,56 @@ object[type="application/pdf"] {
 /* charts */
 
 
+/* speaker home css */
+
+.swiper-slide {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 20px;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    transition: 0.3s;
+    width: 300px;
+    height: 300px;
+    margin: 20px;
+}
+
+.swiper-slide:hover {
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+.speaker {
+    width: 130px;
+    height: 130px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.speaker-name {
+    margin-top: 10px;
+    font-weight: bold;
+    color: #333;
+}
+.speaker-logo{
+    width: 30%;
+    height: 30%;
+    padding-bottom:20px;
+}
+
+@media screen and (max-width: 600px) {
+    .speaker-logo {
+        width: 50%; /* Increase width */
+        height: 50%; /* Increase height */
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+/* speaker home end */
+
+/* icon size on speaker */
+.iconlogo {
+    width: 10%; /* Adjust as needed */
+  }
diff --git a/djangocon_2024/static/images/Icons/linkedin.png b/djangocon_2024/static/images/Icons/linkedin.png
diff --git a/djangocon_2024/static/images/Icons/x.png b/djangocon_2024/static/images/Icons/x.png
diff --git a/djangocon_2024/templates/modules/home_dates.html b/djangocon_2024/templates/modules/home_dates.html
@@ -70,7 +70,7 @@
         <li class="text-decoration-line-through">
           ✈️ 15th - Grants Applications Deadline ✅
         </li>
-        <li>
+        <li class="text-decoration-line-through">
           🎫 30th - Early Bird Ticket Sales Closes
         </li>
       </ul>

diff --git a/djangocon_2024/templates/modules/home_speakers.html b/djangocon_2024/templates/modules/home_speakers.html
@@ -2,20 +2,22 @@
 
 <div class="col-12 swiper-wrapper">
   {% with content=files.4|markdown %}
-        {{ content.html | safe }}
+  {{ content.html | safe }}
   {% endwith %}
 
 </div>
 
 <script>
-  window.addEventListener("DOMContentLoaded", function(){
+  window.addEventListener("DOMContentLoaded", function () {
     const swiper = new Swiper('.swiper', {
       slidesPerView: "auto",
       grabCursor: true,
       navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev',
-  },
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
     });
   });
-</script>
+
+
+</script>
diff --git a/djangocon_2024/templates/pages/home.html b/djangocon_2024/templates/pages/home.html
@@ -63,7 +63,9 @@
 {% include 'modules/default.html' with content=files.3|markdown %}
 
 
+
 {# HOME-SPEAKERS #}
+{% include 'modules/default.html' with content=files.4|markdown %}
 
 {# HOME-SPONSORS #}
 {% include 'modules/default.html' with content=files.5|markdown %}